✨ Projeto Trivia Game 🧠 ⏰

Essa aplicação é um jogo de perguntas e respostas baseado no jogo Trivia (tipo um show do milhão americano rs) utilizando React e Redux.

Foi desenvolvido em grupo, utilizando metodologias ágeis (scrum e kanban), como desafio do módulo de front-end da Trybe.

Sumário

• Sobre o projeto
  • Contexto
  • Prazo de realização
  • Funcionalidades
  • Demo
• Tecnologias utilizadas
  • Front-end
  • Testes
• APIs
• Instalação
  • Executando testes
• Requisitos do projeto
• Status de desenvolvimento
  • Desafios de desenvolvimento
• Desenvolvedores
• Agradecimentos

Sobre o projeto

👨‍💻 Contexto

O projeto foi desenvolvido em grupo e nosso desafio foi desenvolver a interface em React js de um jogo de perguntas e respostas, implementando diversas funcionalidades que exigiram habilidades com ciclo de vida de componentes, além do gerenciamento de estado da aplicação com Redux, sendo necessário criar: store, reducers, actions síncronas e assíncronas, dispatchers e conectar o Redux aos componentes React.

A base de dados é da API do Trivia, mas também consumimos a API Gravatar para resgatar, quando possível, a foto do usuário logado.

Além disso, também implementamos testes para garantir uma boa cobertura da aplicação.

Para o bom andamento do trabalho em equipe, utilizamos um quadro Kanban no Trello, além de utilizar o Slack para comunicação síncrona e assíncrona.

Período de realização

A sprint foi de 4 dias dedicados, em nov/2022.

Habilidades

• Implementação adequada de componentes React.
• Gerenciamento de estado com Redux.
• Consumo de APIs públicas.
• JavaScript assíncrono (async/await).
• Implementação de testes unitários.
• Trabalho em equipe e metodologias ágeis: scrum e kanban.

(Voltar ao topo)

Funcionalidades

• Tela de Login: se o email tiver cadastro no site Gravatar, a foto será associada ao perfil da pessoa usuária.
• Tela de jogo:
  • Apresenta uma pergunta por vez, com suas opções de resposta.
  • A resposta deve ser marcada antes do timer de 30s chegar a zero.
  • Caso contrário, a resposta será considerada errada.
  • Placar no header da aplicação, atualizado a cada resposta dada.
• Após 5 perguntas respondidas, direciona para a tela de score, onde o texto mostrado depende do número de acertos.
  • O score é contabilizado considerando o tempo restante e a dificuldade da pergunta.
• Visualizar a página de ranking, se quiser, ao final de cada jogo.
• Configurar algumas opções para o jogo em uma tela de configuração acessível a partir do cabeçalho do app. (A implementar)

Demo

Screenshot em breve

Sugestão de uso opcional para estilização: Protótipo no Figma

Deploy: https://trivia-game-ligiabicalho.vercel.app/

Tecnologias utilizadas

Front-end

• HTML
• CSS
• JavaScript
• React
• Redux

Testes

• Jest
• React Testing Library

(Voltar ao topo)

⚙️ APIs

As requisições foram feitas utilizando apenas o fetch, orientação dada para evitar conflitos com a avaliação dos requisitos.

🎲 Trivia API

A API do Trivia é um banco de dados aberto e funciona de forma bem simples.
Utilizamos 2 endpoints:

1. Pegar o token de sessão da pessoa que está jogando, fazendo uma requisição para:
   https://opentdb.com/api_token.php?command=request
   O retorno é um token que deve ser utilizado nas requisições seguintes

   {
     "response_code":0,
     "response_message":"Token Generated Successfully!",
     "token":"f00cb469ce38726ee00a7c6836761b0a4fb808181a125dcde6d50a9f3c9127b6"
   }

2. Pegar perguntas e respostas, utilizando o token gerado

     https://opentdb.com/api.php?amount=${quantidade-de-perguntas-retornadas}&token=${seu-token-aqui}

   ⚠️ O token expira em 6 horas e retornará um response_code: 3 caso esteja expirado.

   • Possibilidades de resposta:

     // Pergunta de múltipla escolha
     {
       "response_code":0,
       "results":[
           {
             "category":"Entertainment: Video Games",
             "type":"multiple",
             "difficulty":"easy",
             "question":"What is the first weapon you acquire in Half-Life?",
             "correct_answer":"A crowbar",
             "incorrect_answers":[
                 "A pistol",
                 "The H.E.V suit",
                 "Your fists"
             ]
           }
       ]
     }

     // Pergunta de verdadeiro ou falso
     {
       "response_code":0,
       "results":[
           {
             "category":"Entertainment: Video Games",
             "type":"boolean",
             "difficulty":"hard",
             "question":"TF2: Sentry rocket damage falloff is calculated based on the distance between the sentry and the enemy, not the engineer and the enemy",
             "correct_answer":"False",
             "incorrect_answers":[
                 "True"
             ]
           }
       ]
     }

     // Token expirado
     {
       "response_code":3,
       "results":[]
     }

👤 Gravatar

O Gravatar é um serviço que permite deixar o avatar global a partir do email cadastrado, ele mostra sua foto cadastrada em qualquer site vinculado.

Na tela de Login, a pessoa que joga pode colocar um e-mail que deve fazer uma consulta a API do Gravatar.

A implementação é feita baseada no e-mail. Esse email deve ser transformado em uma hash MD5.
Para gerar tal hash, utilizamos o CryptoJs.

Após a geração da hash, basta adicionar o valor gerado no final da URL:

// Formato de URL necessário:
https://www.gravatar.com/avatar/${hash-gerada}

Exemplo de imagem exibida

(Voltar ao topo)

Instalando o projeto localmente

Caso deseje instalar o projeto na sua máquina, siga os seguintes passos:

1. Clone o repositório
   git clone git@github.com:ligiabicalho/Trivia-Game.git
2. Entre na pasta do projeto
   cd Trivia-Game
3. Instale as dependências
   npm install
4. Inicie o servidor local
   npm start

• Executando os testes de cobertura

É possível verificar o percentual da cobertura de testes que desenvolvemos com o comando:
npm run test-coverage

(Voltar ao topo)

Requisitos do projeto

Clique na seta para ver a lista de requisitos que recebemos para desenvolver durante o processo avaliativo.

Utilizamos o quadro Kanban no Trello para acompanhar o andamento do trabalho em equipe.

Tela de Login

1. Crie a tela de login, onde a pessoa que joga deve preencher nome e e-mail para iniciar um jogo.
2. Crie o botão "Play" de iniciar o jogo.
3. Crie um botão "Settings" na tela inicial que leve para a tela de configurações.
4. Desenvolva testes para atingir 90% de cobertura da tela de Login.

Tela de Jogo

5. Crie um header que deve conter as informações da pessoa jogadora.
6. Crie a página de jogo que deve conter as informações relacionadas à pergunta.
7. Desenvolva o estilo que, ao clicar em uma resposta, a correta deve ficar verde e as incorretas, vermelhas.
8. Desenvolva um timer onde a pessoa que joga tem 30 segundos para responder.
9. Crie o placar com as seguintes características:
   • O cálculo dos pontos por pergunta é: 10 + (timer * dificuldade), sendo timer o tempo restante do contador.
10. Crie um botão de "Next" que apareça após a resposta ser dada.
11. Desenvolva o jogo de forma que a pessoa que joga deve responder 5 perguntas no total.
12. (Bônus) Desenvolva testes para atingir 90% de cobertura da tela de Jogo.

Tela de Feedback

12. Desenvolva o header de feedback que deve conter as informações da pessoa jogadora.
13. Crie a mensagem de feedback para ser exibida a pessoa usuária.
14. Exiba as informações relacionadas aos resultados obtidos para a pessoa usuária.
15. Crie a opção para a pessoa jogadora poder jogar novamente.
16. Crie a opção para a pessoa jogadora poder visualizar a tela de ranking.
17. Desenvolva testes para atingir 90% de cobertura da tela de Feedbacks.

Tela de Ranking

18. Crie um botão para ir ao início.
19. Crie o conteúdo da tela de ranking.
20. Desenvolva testes para atingir 90% de cobertura da tela de Rankings.

Tela Settings

Não foi disponibilizado requisitos avaliativos para tela de Settings.

No entanto, pode-se explorar os dados fornecidos pela API Trivia para, por exemplo, escolher quantidade, categorias, nível de dificuldade dentre outras possibilidades em relação as perguntas.

(Voltar ao topo)

Status de desenvolvimento

O projeto foi entregue com 100% das funcionalidades avaliativas. No entanto, pode-se ainda implementar a Tela de Settings, gerando maior personalização do jogo.

Desafios de desenvolvimento

Em breve

Desenvolvedores

Made with contrib.rocks.

Agradecimentos

Agradeço à Trybe por nos proporcionar esta oportunidade de aprendizado e desenvolvimento de habilidades técnicas e de trabalho em equipe. Também agradeço aos colegas da equipe pelas trocas, aos instrutores e mentores que nos apoiaram e orientaram durante o projeto.

(Voltar ao topo)