• A pessoa que joga deve conseguir escrever seu nome no input de texto
• A pessoa que joga deve conseguir escrever seu email no input de email
• O botão "Play" deve ser desabilitado caso email e/ou nome não estejam preenchidos
• O campo de texto para o nome deve possuir o atributo data-testid com o valor input-player-name
• O campo de texto para o email deve possuir o atributo data-testid com o valor input-gravatar-email
• O botão "Play" que leva a pessoa ao jogo deve possuir o atributo data-testid com o valor btn-play

• Ao clicar no botão "Play", uma requisição para a API do Trivia deve ser feita para obter o token de jogador
• Após clicar no botão "Play", a pessoa deve ser redirecionada para a tela do jogo. O redirecionamento deve acontecer somente após o retorno do token pela API.
• O token deve ser armazenado e enviado em todas as requisições seguintes.
• Salve no localStorage o valor do token recebido na API do Trivia, utilizando a chave token.

• O botão que leva a pessoa a tela de configurações deve possuir o atributo data-testid com o valor btn-settings
• A tela de configurações deve possuir um título com o atributo data-testid contendo o valor settings-title

• Os testes criados por você não irão influenciar os outros requisitos no avaliador. Você deverá desenvolver seus testes unitários/integração usando a biblioteca React Testing Library, enquanto o avaliador usará a biblioteca Cypress para avaliar os requisitos, inclusive os de cobertura.
• Para os testes passarem é necessário que a página de Login tenha o caminho src/pages/Login.js

• A imagem do perfil vinda do Gravatar em um elemento que deve possuir o atributo data-testid com o valor header-profile-picture
• O nome da pessoa em um elemento que deve possuir o atributo data-testid com o valor header-player-name
• O placar zerado em um elemento que deve possuir o atributo data-testid com o valor header-score

• Acessar o jogo com um token inválido leva a um logout, excluindo o token do localStorage e redirecionando a página para a tela de login

• A pergunta e suas alternativas de resposta devem ser recebidas da API do Trivia

• Apenas uma pergunta deve ser exibida por vez

• A categoria da pergunta (campo category) deve ser exibida em um elemento com o atributo data-testid com o valor question-category para a pessoa que está jogando

• O texto da pergunta (campo question) deve ser exibido em um elemento com o atributo data-testid com o valor question-text para a pessoa que está jogando

• O texto com as alternativas devem ser exibidos seguindo as regras abaixo:

  • Os botões das alternativas devem ser elementos irmãos; ou seja, não podem estar dentro de outra tag
  • O elemento com a alternativa correta deve possuir o atributo data-testid com o valor correct-answer
  • Os elementos com as alternativas incorretas devem possuir o atributo data-testid com o valor wrong-answer-${index}, com ${index} iniciando com o valor 0
  • As alternativas devem estar dentro de uma tag que possui o atributo data-testid com o valor answer-options
  • As alternativas devem ser exibidas em ordem aleatória
  • Dica: utilize botões (<button/>) para as alternativas

• Utilize a propriedade css border com o valor 3px solid rgb(6, 240, 15) para a alternativa correta.
• Utilize a propriedade css border com o valor 3px solid red para as alternativas incorretas.

• Caso a pergunta não seja respondida a tempo, a resposta é considerada como errada
• Respostas incorretas não somam pontos ao placar
• Um temporizador deve aparecer na tela da pessoa, começando de 30 segundos e indo de forma decrescente até zero
• Após o tempo se esgotar, todos os botões das alternativas devem ser desabilitados

💡 Dica: Lembre-se do setTimeout e do setInterval

• Você deve salvar a pontuação atual no estado no redux na chave player.score
• 💡 Leia a sub-seção Observações técnicas, na seção 🏪 Desenvolvimento para mais detalhes
• Respostas erradas não devem somar ao placar
• A fórmula para cálculo dos pontos por pergunta é: 10 + (timer * dificuldade), onde timer é o tempo restante no contador de tempo e dificuldade é hard: 3, medium: 2, easy: 1, dependendo da pergunta. 💡 Exemplo: Se no momento da resposta correta o timer estiver contando 17 segundos, e a dificuldade da pergunta é 2 (média), a pontuação deve ser: 10 + (17 * 2) = 44

• O botão "Next" deve possuir o atributo data-testid com o valor btn-next
• Ao clicar nesse botão, a próxima pergunta deve aparecer na tela

• A cada nova pergunta o temporizador deve ser reiniciado para 30 segundos
• Após a quinta pergunta, o botão "Next" deve redirecionar a pessoa para a tela de Feedback
• Para perguntas com type:"boolean", mostrar somente 2 campos (um para cada resposta possível)
• Para perguntas com type:"multiple", mostrar a quantidade necessária de campos (um para cada resposta possível)

• A imagem do perfil vinda do Gravatar em um elemento que deve possuir o atributo data-testid com o valor header-profile-picture
• O nome da pessoa em um elemento que deve possuir o atributo data-testid com o valor header-player-name
• O placar com o valor atual em um elemento que deve possuir o atributo data-testid com o valor header-score

• A mensagem deve ser "Could be better..." caso a pessoa acerte menos de 3 perguntas
• A mensagem deve ser "Well Done!" caso a pessoa acerte 3 perguntas ou mais
• O elemento da mensagem de feedback deve possuir o atributo data-testid com o valor feedback-text

• O placar final deve ser mostrado em um elemento com o atributo data-testid com o valor feedback-total-score
• O número de perguntas que a pessoa acertou deve ser exibido em um elemento com o atributo data-testid com o valor feedback-total-question
• Os elementos com os data-testid devem possuir apenas o número
• No estado do redux as chaves score e assertions devem ser do tipo number

• Ao clicar no botão "Play Again", a pessoa deve ser redirecionada para a tela de início (login)
• O botão para "Play Again" deve possuir o atributo data-testid com o valor btn-play-again

• Ao clicar no botão "Ranking", a pessoa deve ser redirecionada para a tela de ranking
• O botão para ir para a tela de ranking deve possuir o atributo data-testid com o valor btn-ranking
• A tela de ranking deve possuir um título com o atributo data-testid contendo o valor ranking-title

• Os testes criados por você não irão influenciar os outros requisitos no avaliador. Você deverá desenvolver seus testes unitários/integração usando a biblioteca React Testing Library, enquanto o avaliador usará a biblioteca Cypress para avaliar os requisitos, inclusive os de cobertura.
• Para os testes passarem é necessário que a página de Feedbacks tenha o caminho src/pages/Feedback.js

• Esse botão deve possuir o atributo data-testid com o valor btn-go-home
• Esse botão deve enviar a pessoa para o início (tela de preenchimento dos dados)

• Deve-se mostrar uma lista com a imagem de perfil vinda do Gravatar, nome e pontuação das pessoas que jogaram em ordem decrescente (da maior pontuação para a menor)
• Os elementos com os nomes das pessoas que jogaram devem possuir o atributo data-testid com o valor player-name-${index}, onde ${index} é iniciado em zero
• Os elementos com as pontuações das pessoas que jogaram devem possuir o atributo data-testid com o valor player-score-${index}, onde ${index} é iniciado em zero
• O ranking deve ser armazenado no navegador através do localStorage.

• Os testes criados por você não irão influenciar os outros requisitos no avaliador. Você deverá desenvolver seus testes unitários/integração usando a biblioteca React Testing Library, enquanto o avaliador usará a biblioteca Cypress para avaliar os requisitos, inclusive os de cobertura.
• Para os testes passarem é necessário que a página de Ranking tenha o caminho src/pages/Ranking.js

• Os testes criados por você não irão influenciar os outros requisitos no avaliador. Você deverá desenvolver seus testes unitários/integração usando a biblioteca React Testing Library, enquanto o avaliador usará a biblioteca Cypress para avaliar os requisitos, inclusive os de cobertura.
• Para os testes passarem é necessário que a página de Jogo tenha o caminho src/pages/Game.js

• Os testes criados por você não irão influenciar os outros requisitos no avaliador. Você deverá desenvolver seus testes unitários/integração usando a biblioteca React Testing Library, enquanto o avaliador usará a biblioteca Cypress para avaliar os requisitos, inclusive os de cobertura.