Um simples dominó!

Olá boa noite.

Este é o meu primeiro post gostaria de especificar a versao inicial do meu dominó com bot, uma aplicação PHP Laravel.

🧩 Visão Geral da Página

Esta página implementa uma partida de dominó contra um bot, construída em React com integração ao backend via requisições HTTP (Axios). Ela gerencia tanto a lógica do jogo quanto a experiência visual do usuário, incluindo animações, timer e estados de jogo.

Estrutura do Jogo

A aplicação é baseada em três elementos principais:

Player (usuário) → peças visíveis na parte inferior
Bot (oponente) → peças ocultas na parte superior
Mesa (board) → área central onde as peças são jogadas

Os dados do jogo são carregados dinamicamente a partir do backend e atualizados em tempo real.

Lógica do Jogo
🔹 Identificação das pontas da mesa

A cada jogada, o sistema identifica os extremos da mesa:

left → primeira peça
right → última peça

Esses valores determinam quais peças podem ser jogadas.

🔹 Validação de jogadas

A função verifica se uma peça pode ser jogada:

Se a mesa está vazia → qualquer peça é válida
Caso contrário → a peça deve combinar com uma das pontas

Inteligência do Bot

O bot segue uma lógica simples:

Procura uma peça jogável
Se encontrar → joga
Se não:
Compra do monte
Tenta novamente
Se o monte acabar → passa a vez

Isso cria um comportamento básico, porém funcional, simulando um jogador real.

Jogadas do Player

O jogador pode:

Clicar em uma peça válida → jogar
Comprar peça → quando não há jogadas possíveis
Ter o turno passado automaticamente se:
não houver jogadas
e não houver peças no monte

Sistema de Tempo

Cada turno possui um limite de 30 segundos:

O tempo é reiniciado a cada turno
Se o tempo acabar:
o turno é automaticamente passado
uma mensagem é exibida

Mensagem exibida:

⏰ Tempo esgotado. Passou a vez!

Se o jogador:

não tiver jogadas possíveis
e o monte estiver vazio

Então:

aparece a mensagem:
🟡 Passe livre
o turno é automaticamente passado
Atualização em Tempo Real

A página utiliza um sistema de polling (a cada 1 segundo) para:

atualizar o estado do jogo
verificar vitória/derrota
sincronizar jogadas

Renderização da Mesa

A função getPieceStyle é responsável por posicionar as peças:

Ela organiza o tabuleiro em formato de "cobra":

Linha 1 → horizontal
Coluna direita → descendo
Linha 2 → voltando
Coluna esquerda → subindo
Linha 3 → topo

Cada peça recebe:

posição X/Y
rotação (0°, 90°, 180°, 270°)

Isso cria o efeito visual clássico do dominó.

Interface Visual

Elementos principais:
Mesa com borda estilizada
Peças animadas ao jogar
Monte de peças empilhado
Timer no canto superior
Mensagens centralizadas
Modal de início e fim de jogo
Finalização da Partida

O jogo termina quando:

um jogador fica sem peças

Ou quando o backend define o vencedor.

Resultado exibido:

🏆 Você venceu
💀 Você perdeu

Com opção de reiniciar a partida.

Experiência do Usuário

A página inclui:

animação de jogada
delay no bot (simula pensamento)
bloqueio de interação durante ações
feedback visual claro
sistema automático de regras
Conclusão

Essa página representa um sistema completo de dominó com:

lógica de jogo funcional
sincronização com backend
interface interativa
controle de estado avançado
experiência fluida

Ela combina bem lógica + UI + tempo real, criando uma base sólida para evoluções futuras como:

IA mais avançada
multiplayer real
ranking / histórico