Instruções

Construir um Jogo da Velha

Objetivo: Atender às user stories abaixo e fazer todos os testes passarem para completar o laboratório. User stories: 1. Você deve criar um componente Board que renderize nove elementos button, cada um com a classe square, em uma grade 3x3. 2. Clicar nos elementos button.square deve alternar entre exibir um X e um O dentro do elemento. 3. Uma vez que um jogador tenha vencido o jogo, clicar em qualquer button.square não deve causar mais alterações. 4. Você deve criar um elemento button#reset que reinicia o jogo quando clicado. 5. Uma mensagem deve ser exibida indicando X ou O como o vencedor, ou nenhum dos dois se o resultado for um empate.

O que fazer:

Testes:

  • Você deve exportar um componente `Board`.
  • Você deve ter nove elementos `button.square`.
  • Os elementos `button.square` devem estar em uma grade 3x3.
  • O primeiro clique em um elemento `button.square` deve resultar em `X` sendo exibido dentro do elemento.
  • Clicar no elemento `button#reset` deve reiniciar o jogo.
  • O segundo clique em um elemento `button.square` deve resultar em `O` sendo exibido dentro do elemento.
  • Todos os cliques subsequentes em um elemento `button.square` devem alternar entre exibir `X` e `O` dentro do elemento.
  • Clicar em um elemento `button.square` já utilizado não deve resultar em nenhuma alteração.
  • Clicar em um elemento `button.square` após o término do jogo não deve resultar em nenhuma alteração.
  • O jogo deve exibir uma mensagem indicando o vencedor como `X` ou `O`.
  • O jogo deve exibir uma mensagem indicando um empate.

Preview