🎮 React Tic-Tac-Toe

Um jogo clássico de Jogo da Velha (Tic-Tac-Toe) desenvolvido em React com interface moderna e intuitiva.

🚀 Demonstração

Um jogo interativo onde dois jogadores podem competir alternadamente, com detecção automática de vitória, empate e histórico de jogadas.

✨ Funcionalidades

• 🎯 Jogo de Tic-Tac-Toe clássico para dois jogadores
• ✏️ Edição de nomes dos jogadores em tempo real
• 🏆 Detecção automática de vitória e empate
• 📝 Log completo de todas as jogadas
• 🔄 Funcionalidade de reiniciar jogo
• 🎨 Interface responsiva e moderna
• ⚡ Performance otimizada com React 19

🛠️ Tecnologias Utilizadas

• React 19.0.0 - Biblioteca JavaScript para construção de interfaces
• Vite 4.4.5 - Build tool e dev server ultrarrápido
• JavaScript ES6+ - Linguagem de programação moderna
• CSS3 - Estilização e layout responsivo
• ESLint - Linting e qualidade de código

📁 Estrutura do Projeto

tic-tac-toe/
├── public/
│   ├── bg-pattern-dark.png    # Padrão de fundo (tema escuro)
│   ├── bg-pattern.png         # Padrão de fundo (tema claro)
│   └── game-logo.png          # Logo do jogo
├── src/
│   ├── components/
│   │   ├── GameBoard.jsx      # Tabuleiro do jogo
│   │   ├── GameOver.jsx       # Tela de fim de jogo
│   │   ├── Log.jsx            # Histórico de jogadas
│   │   └── Player.jsx         # Componente do jogador
│   ├── data/
│   │   └── winning-combinations.jsx  # Combinações vencedoras
│   ├── assets/
│   │   └── react.svg          # Ícone do React
│   ├── App.jsx                # Componente principal
│   ├── index.css              # Estilos globais
│   └── index.jsx              # Ponto de entrada
├── index.html                 # Template HTML
├── package.json               # Dependências e scripts
├── vite.config.js             # Configuração do Vite
└── README.md                  # Documentação

🔧 Pré-requisitos

Certifique-se de ter instalado em sua máquina:

• Node.js (versão 14.18+ ou 16+)
• npm ou yarn

⚡ Instalação e Execução

1. Clone o repositório

git clone <url-do-repositorio>
cd tic-tac-toe

2. Instale as dependências

npm install
# ou
yarn install

3. Execute o projeto em modo de desenvolvimento

npm run dev
# ou
yarn dev

4. Acesse a aplicação

Abra seu navegador e acesse: http://localhost:5173

📦 Scripts Disponíveis

Script	Descrição
npm run dev	Executa a aplicação em modo de desenvolvimento
npm run build	Gera build de produção otimizado
npm run preview	Visualiza o build de produção localmente
npm run lint	Executa verificação de código com ESLint

🎮 Como Jogar

1. Iniciar Jogo: A aplicação carrega com um tabuleiro vazio e dois jogadores padrão
2. Editar Nomes: Clique em "Edit" ao lado do nome para personalizar os nomes dos jogadores
3. Fazer Jogadas: Clique em qualquer quadrado vazio do tabuleiro para fazer sua jogada
4. Alternância: Os jogadores alternam automaticamente entre X e O
5. Vitória/Empate: O jogo detecta automaticamente vitórias e empates
6. Reiniciar: Use o botão "Rematch" para começar uma nova partida
7. Histórico: Acompanhe todas as jogadas no log lateral

🏗️ Arquitetura

Componentes Principais

• App.jsx: Gerencia o estado global do jogo, lógica de vitória e coordena todos os componentes
• GameBoard.jsx: Renderiza o tabuleiro 3x3 e gerencia as interações de clique
• Player.jsx: Componente reutilizável para exibir e editar informações dos jogadores
• GameOver.jsx: Modal exibido ao final do jogo com resultado e opção de reiniciar
• Log.jsx: Exibe o histórico cronológico de todas as jogadas

Estado e Dados

• gameTurns: Array que armazena todas as jogadas realizadas
• players: Objeto com os nomes personalizados dos jogadores
• gameBoard: Matriz 3x3 derivada das jogadas para representar o estado atual
• WINNING_COMBINATIONS: Constante com todas as combinações possíveis de vitória

🤝 Contribuindo

1. Faça um fork do projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👨‍💻 Autor

Desenvolvido com ❤️ usando React e Vite.

---

⭐ Se este projeto foi útil para você, considere dar uma estrela!