react

react/jogo-velha/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

react/jogo-velha/app/components/Botao/Botao.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+
+interface BotaoProps {
+    count?: any;
+    onClick?: any;
+    children?: string;
+    value?: any;
+    onSquareClick?: any;
+}
+
+export default function Botao({count, value, onSquareClick, onClick, children}:BotaoProps) {
+
+    /*
+    //variavael de state/estado
+    const [count, setCount] = useState(0);
+    //estado atual ( count) / função que permite atualizá-lo ( setCount)
+
+    function handleClick() {
+        setCount(count + 1);
+       // alert('Você me clicou '+count+' vezes!');
+        //console.log(count);
+    }
+    const [value, setValue] = useState('');
+    function jogarClick() {
+        setValue('X');
+    }
+    */
+
+    return (
+
+        <button 
+            onClick={onSquareClick}
+            style={{
+                width: '40px',
+                height: '40px',
+                margin:'0'
+            }}
+        >
+            {value}
+        </button>
+        //<button>
+           // {children}
+        //</button>
+
+    );
+}

react/jogo-velha/app/components/Image/Image.tsx

@@ -0,0 +1,19 @@
+export default function Image() {
+
+    const user = {
+        name: 'Laiane Langa',
+        imageUrl: 'https://github.com/lailanga.png',
+        imageSize: 90,
+    };
+
+    return (
+        <img 
+            src={user.imageUrl}
+            alt={'Foto de perfil de '  + user.name}
+            style={{
+                width: user.imageSize,
+                height: user.imageSize
+            }}
+        />
+    );
+}

react/jogo-velha/app/components/Lista/Lista.tsx

@@ -0,0 +1,18 @@
+export default function Lista() {
+
+    const products = [
+        { title: 'Cabbage', id: 1 },
+        { title: 'Garlic', id: 2 },
+        { title: 'Apple', id: 3 },
+    ];
+
+    const listItems = products.map(product =>
+        <li key={product.id}>
+          {product.title}
+        </li>
+    );
+
+    return (
+        <ul>{listItems}</ul>
+    );
+}

react/jogo-velha/app/components/Tabuleiro/Tabuleiro.tsx

@@ -0,0 +1,82 @@
+import Botao from "../Botao/Botao";
+//import { useState } from 'react';
+
+interface TabuleiroProps {
+    xIsNext?: boolean;
+    squares?: unknown | any;
+    onPlay?: any;
+}
+
+export default function Tabuleiro({xIsNext, squares, onPlay, ...props}:TabuleiroProps) {
+
+    //const [xIsNext, setXIsNext] = useState(true);
+    //const [squares, setSquares] = useState(Array(9).fill(''));
+
+    function handleClick(i: number) {
+        if( squares[i] || calculateWinner(squares) ){
+            return;
+        }
+        const nextSquares = squares.slice();
+        if(xIsNext){
+            nextSquares[i] = 'X';
+        }else{
+            nextSquares[i] = 'O';
+        }
+        //setSquares(nextSquares);
+        //setXIsNext(!xIsNext);
+        onPlay(nextSquares);
+    }
+
+    const winner = calculateWinner(squares);
+    let status;
+    if (winner) {
+        status = "Ganhador: " + winner;
+    } else {
+        status = "Próximo jogador: " + (xIsNext ? "X" : "O");
+    }
+
+    function calculateWinner(squares:any) {
+        const lines = [
+          [0, 1, 2],
+          [3, 4, 5],
+          [6, 7, 8],
+          [0, 3, 6],
+          [1, 4, 7],
+          [2, 5, 8],
+          [0, 4, 8],
+          [2, 4, 6]
+        ];
+        for (let i = 0; i < lines.length; i++) {
+          const [a, b, c] = lines[i];
+          if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+            return squares[a];
+          }
+        }
+        return null;
+    }
+
+
+    return (
+        <>
+            <div>{status}</div>
+            <div>
+                <Botao value={squares[0]} onSquareClick={() => handleClick(0)} />
+                <Botao value={squares[1]} onSquareClick={() => handleClick(1)} />
+                <Botao value={squares[2]} onSquareClick={() => handleClick(2)} />
+            </div>
+            <div>
+                <Botao value={squares[3]} onSquareClick={() => handleClick(3)} />
+                <Botao value={squares[4]} onSquareClick={() => handleClick(4)} />
+                <Botao value={squares[5]} onSquareClick={() => handleClick(5)} />
+            </div>
+            <div>
+                <Botao value={squares[6]} onSquareClick={() => handleClick(6)} />
+                <Botao value={squares[7]} onSquareClick={() => handleClick(7)} />
+                <Botao value={squares[8]} onSquareClick={() => handleClick(8)} />
+            </div>
+        </>
+
+    );
+}
+
+

react/jogo-velha/app/services/game/Game.tsx

@@ -0,0 +1,50 @@
+import Tabuleiro from "@/app/components/Tabuleiro/Tabuleiro";
+import { useState } from 'react';
+
+export default function Game(){
+
+    //const [xIsNext, setXIsNext] = useState(true);
+    const [history, setHistory] = useState([Array(9).fill('')]);
+    const [currentMove, setCurrentMove] = useState(0);
+    const xIsNext = currentMove % 2 === 0;
+    //const currentSquares = history[history.length - 1];
+    const currentSquares = history[currentMove];
+
+    function handlePlay(nextSquares:any) {
+        //setHistory([...history, nextSquares]);
+        const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
+        setHistory(nextHistory);
+        setCurrentMove(nextHistory.length - 1);
+        //setXIsNext(!xIsNext);
+    }
+
+    function jumpTo(nextMove:any) {
+        setCurrentMove(nextMove);
+        //setXIsNext(nextMove % 2 === 0);
+    }
+
+    const moves = history.map((squares, move) => {
+        let description;
+        if (move > 0) {
+          description = 'Vá se mover #' + move;
+        } else {
+          description = 'Ir para o início do jogo';
+        }
+        return (
+          <li key={move}>
+            <button onClick={() => jumpTo(move)}>{description}</button>
+          </li>
+        );
+    });
+
+    return (
+        <div>
+            <div>
+                <Tabuleiro xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
+            </div>
+            <div>
+                {moves}
+            </div>
+        </div>
+    );
+}

react/jogo-velha/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig