Skip to content
/ tryvia Public

Tryvia - A simple but not easy trivia game for Trybers

0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

caiolmf/tryvia

BranchesTags

Repository files navigation

Boas vindas ao repositório do projeto de Trivia!

Você já usa o GitHub diariamente para desenvolver os exercícios, certo? Agora, para desenvolver os projetos, você deverá seguir as instruções a seguir. Fique atento a cada passo, e se tiver qualquer dúvida, nos envie por Slack! #vqv 🚀

Aqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto a partir desse repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.

O que deverá ser desenvolvido

Você deverá desenvolver um jogo de perguntas e respostas baseado no jogo Trivia (tipo um show do milhão americano rs) utilizando React e Redux.

O app começa com uma tela onde a pessoa que joga coloca seu nome e seu e-mail. O e-mail será usado para buscar a foto associada no site Gravatar (se houver).

Logo após, ela é redirecionada para o jogo onde deve escolher uma das respostas disponíveis para cada uma das perguntas. A resposta deve ser marcada antes de o contador de tempo chegar a zero, caso contrário a resposta deve ser considerada como errada.

Cada acerto dá à pessoa que joga pontos que deverão ser computados num placar no header da aplicação.

Após 5 perguntas respondidas, a pessoa que joga é redirecionada para uma tela de score, onde o texto mostrado vai depender do número de acertos.

No final de cada jogo, a pessoa que joga pode acessar o ranking com as melhores pontuações.

A pessoa que joga pode configurar algumas opções para o jogo em uma tela de configurações acessível a partir do header do app.

Você pode acessar um protótipo no link abaixo:

https://www.figma.com/file/9XUqIwKEFBfbZn5t8MMZJY/Trivia---project?node-id=0%3A1

⚠️ Sinta-se livre para alterar a UI. Só respeite os atributos data-testid; eles serão usados na correção do exercício.

⚠️ Para ver os comentários sobre cada componente, basta clicar no ícone de comentários no Figma (lado esquerdo superior).

image

Data de Entrega

O projeto tem até a seguinte data: 28/07/2020 - 14:00h. Para ser entregue a avaliação final.

Desenvolvimento e testes

Este repositório já contem um template com um App React criado, configurado e com os testes automatizados que fazem parte da correção. Após clonar o projeto e instalar as dependências, você precisará montar toda a configuração do Redux.

Para o projeto ser validado, todos os testes E2E devem passar. É possível testar isso local rodando npm run cy. Esse comando roda a suite de testes do Cypress que valida se o fluxo geral e os requisitos funcionais estão funcionando como deveriam.

Você pode também executar o comando npm run cy:open para ter um resultado visual dos testes executados.

Esses testes não consideram o layout de maneira geral, mas sim os atributos e informações corretas, então preste atenção nos atributos definidos no protótipo.

Os testes te darão uma mensagem de erro caso não estejam passando (seja qual for o motivo). 😉

Trivia API

A API do Trivia é bem simples. Temos 2 endpoints que vamos precisar utilizar para esse exercício.

  • Pegar o token de sessão da pessoa que está jogando
  • Pegar perguntas e respostas

Primeiro, é necessário fazer um GET request para:

https://opentdb.com/api_token.php?command=request

Esse endpoint te retornará o token que vai ser utilizado nas requisições seguintes. Esse token expira em 6 horas e te retornará um response_code: 3 caso esteja expirado.

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

Paga pegar as perguntas, você deve realizar um GET request para o seguinte endpoint:

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

Recomendamos pedir 5 perguntas de uma vez e controlar a disposição delas no código.

Essa API te retorna as perguntas no seguinte formato:

// tipo 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"
         ]
      }
   ]
}

// tipo booleana
{
   "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"
         ]
      }
   ]
}

Caso o token seja inválido, essa será a resposta da API:

{
   "response_code":3,
   "results":[]
}

Gravatar

Na tela de Inicio, 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 (https://br.gravatar.com/site/implement/hash/), recomendamos utilizar o CryptoJs.

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

https://www.gravatar.com/avatar/HASH-GERADA
// Exemplo
https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50
// Exemplo
<img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />

Caso o e-mail não tenha uma foto vinculada ao Gravatar, exiba a imagem default:

https://www.gravatar.com/avatar/2d3bf5b67282f5f466e503d7022abcf3

Lembre-se de manter o data-testid correto.

Requisitos do projeto

⚠️ Lembre-se que o seu projeto só será avaliado se estiver passando pelos checks do CodeClimate.

Nesse projeto, a pessoa que joga deve conseguir completar o jogo e conseguir ver seu placar depois de responder todas as 5 perguntas, além de acessar a tela de configurações e de ranking.

Lembrem-se de utilizar os conhecimentos adquiridos ao longo dos últimos projetos nas ferramentas do React como o Router, Link, Redux e testes para ajudá-los a completar os requisitos.

Os requisitos do seu projeto são avaliados automaticamente, sendo utilizada a resolução 1366 x 768 (1366 pixels de largura por 768 pixels de altura). Logo, recomenda-se desenvolver seu projeto usando a mesma resolução, via instalação deste plugin do Chrome para facilitar a configuração dessa resolução.

Todos os elementos devem respeitar os atributos descritos no protótipo.

Tela de início:

  1. A pessoa que joga deve preencher as informações para iniciar um jogo

    • 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 "Jogar" que leva a pessoa ao jogo deve possuir o atributo data-testid com o valor btn-play
    • 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 "Jogar" deve ser desabilitado caso email e/ou nome não estejam preenchidos

  2. A pessoa que joga deve ter acesso à tela de configurações através da tela inicial

    • 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

  3. A pessoa jogadora deve iniciar um jogo

    • Após clicar no botão "Jogar", a pessoa deve ser redirecionada para a tela do jogo
    • Ao clicar no botão "Jogar", um requisição para a API do Trivia deve ser feita para obter o token de jogador
    • O token deve ser armazenado na aplicação e enviado em todas as requisições seguintes.
    • Salve no LocalStorage o token recebido utilizando a chave token

Tela do jogo:

  1. O header deve conter as informações da pessoa jogadora

    • 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

  2. A página deve conter as informações relacionadas à pergunta

    • A pergunta e suas alternativas de resposta devem ser recebidas da API do Trivia
    • 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:
      • 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 ser exibidas em ordem aleatória
      • Dica: utilize botões (<button/>) para as alternativas

  3. Só deve ser possível escolher uma resposta correta por pergunta

  4. Ao clicar em uma resposta, a resposta correta deve ficar verde e as incorretas, vermelhas

    • 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 rgb(255, 0, 0) para as alternativas incorretas.

  5. A pessoa que joga tem 30 segundos para responder cada pergunta

    • 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

  6. Ao clicar na resposta correta, pontos devem ser somados no placar da pessoa que está jogando

    • Você deve salvar a pontuação atual no localStorage
    • Leia a seção "Implementações técnicas" 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;

  7. Após a resposta ser dada, o botão "Próxima" deve aparecer

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

  8. A pessoa que joga deve responder 5 perguntas no total

    • A cada nova pergunta o temporizador deve ser reiniciado para 30 segundos
    • Após a quinta pergunta, o botão "Próxima" 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)

Tela de feedback:

  1. O header de feedback deve conter as informações da pessoa jogadora

    • 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

  2. A pessoa deve ver a mensagem de feedback

    • A mensagem deve ser "Podia ser melhor..." caso a pessoa acerte menos de 3 perguntas
    • A mensagem deve ser "Mandou bem!" 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

  3. A pessoa jogadora deve ver as informações relacionadas aos resultados obtidos

    • 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

  4. A pessoa jogadora tem a opção de jogar novamente

    • Ao clicar no botão "Jogar novamente", a pessoa deve ser redirecionada para a tela de início
    • O botão para jogar novamente deve possuir o atributo data-testid com o valor btn-play-again

  5. A pessoa jogadora tem a opção de visualizar a tela de ranking

    • Ao clicar no botão "Ver 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

Tela de ranking:

  1. Deve existir um botão para ir ao início

    • 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)

  2. Apresentação do ranking

    • 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.
    • Leia a seção "Implementações técnicas" para mais detalhes

(Não avaliativo) Tela de configurações:

  1. Ao mudar o valor do dropdown categoria, apenas perguntas da categoria selecionada devem aparecer para a pessoa que está jogando. Essa configuração será identificada pela chave category no retorno da API;

  2. Ao mudar o valor do dropdown dificuldade, apenas perguntas da dificuldade selecionada devem aparecer para a pessoa que está jogando. Essa configuração será identificada pela chave difficulty no retorno da API;

  3. Ao mudar o valor do dropdown tipo, apenas perguntas do tipo selecionado devem aparecer para a pessoa que está jogando. Essa configuração será identificada pela chave type no retorno da API.

Obs: A maneira como a API deve ser estruturada segue o seguinte modelo: https://opentdb.com/api_config.php

Implementações técnicas

Algumas coisas devem seguir um padrão pré-estabelecido para que os teste de correção funcionem corretamente.

Player

No localStorage do navegador:

  • a chave state deve conter a seguinte estrutura:
player: {
    name,
    assertions,
    score,
    gravatarEmail
}

name é o nome da pessoa que joga

assertions é o número de acertos

score é a pontuação

gravatarEmail é o email da pessoa que joga

  • a chave ranking deve conter a seguinte estrutura:
[
    {name: nome-da-pessoa, score: 10, picture: url-da-foto-no-gravatar}
]
  • a chave token deve conter o valor do token recebido na API do Trivia.

Instruções para entregar seu projeto:

ANTES DE COMEÇAR A DESENVOLVER:

  1. Clone o repositório
  • git clone https://github.com/tryber/sd-0x-project-trivia-react-redux.git.
  • Entre na pasta do repositório que você acabou de clonar:
    • cd sd-0x-project-trivia-react-redux
  1. Instale as dependências, inicialize o projeto e rode os testes
  • Instale as dependências:
    • npm install
  • Inicialize o projeto:
    • npm start (uma nova página deve abrir no seu navegador com um texto simples)
  • Verifique que os testes E2E estão executando:
    • npm run cy (os testes devem rodar e falhar)
    • npm run cy:open (os testes devem rodar e falhar, legal caso queira ver o Cypress funcionando)
  1. Crie uma branch a partir da branch master
  • Verifique que você está na branch master
    • Exemplo: git branch
  • Se não estiver, mude para a branch master
    • Exemplo: git checkout master
  • Agora, crie uma branch onde você vai guardar os commits do seu projeto
    • Você deve criar uma branch no seguinte formato: nome-de-usuario-nome-do-projeto
    • Exemplo: git checkout -b joaozinho-trivia
  1. Adicione as mudanças ao stage do Git e faça um commit
  • Verifique que as mudanças ainda não estão no stage
    • Exemplo: git status (deve aparecer listada a pasta components em vermelho)
  • Adicione o novo arquivo ao stage do Git
    • Exemplo:
      • git add . (adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)
      • git status (deve aparecer listado o arquivo components/Header.jsx em verde)
  • Faça o commit inicial
    • Exemplo:
      • git commit -m 'iniciando o projeto. VAMOS COM TUDO :rocket:' (fazendo o primeiro commit)
      • git status (deve aparecer uma mensagem tipo nothing to commit )
  1. Adicione a sua branch com o novo commit ao repositório remoto
  • Usando o exemplo anterior: git push -u origin joaozinho-trivia
  1. Crie um novo Pull Request (PR)
  • Vá até a página de Pull Requests do repositório no GitHub
  • Clique no botão verde "New pull request"
  • Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
  • Clique no botão verde "Create pull request"
  • Adicione uma descrição para o Pull Request e clique no botão verde "Create pull request"
  • Não se preocupe em preencher mais nada por enquanto!
  • Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado

DURANTE O DESENVOLVIMENTO

  • Faça commits das alterações que você fizer no código regularmente

  • Lembre-se de sempre após um (ou alguns) commits atualizar o repositório remoto

  • Os comandos que você utilizará com mais frequência são:

    1. git status (para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)
    2. git add (para adicionar arquivos ao stage do Git)
    3. git commit (para criar um commit com os arquivos que estão no stage do Git)
    4. git push -u nome-da-branch (para enviar o commit para o repositório remoto na primeira vez que fizer o push de uma nova branch)
    5. git push (para enviar o commit para o repositório remoto após o passo anterior)

DEPOIS DE TERMINAR O DESENVOLVIMENTO

Para "entregar" seu projeto, siga os passos a seguir:

  • Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas
    • No menu à direita, clique no link "Labels" e escolha a label code-review
    • No menu à direita, clique no link "Assignees" e escolha o seu usuário
    • No menu à direita, clique no link "Reviewers" e digite students, selecione o time tryber/students-sd-0x

Se ainda houver alguma dúvida sobre como entregar seu projeto, aqui tem um video explicativo.

REVISANDO UM PULL REQUEST

⚠⚠⚠

À medida que você e as outras pessoas que estudam na Trybe forem entregando os projetos, vocês receberão um alerta via Slack para também fazer a revisão dos Pull Requests dos seus colegas. Fiquem atentos às mensagens do "Pull Reminders" no Slack!

Use o material que você já viu sobre Code Review para te ajudar a revisar os projetos que chegaram para você.

About

Tryvia - A simple but not easy trivia game for Trybers

Resources

Readme
Activity

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 5

Languages