Frontend Challenge

Neste challenge você vai criar uma aplicação web do famoso jogo Jokenpo ou Pedra Papel Tesoura.

As regras do jogo são:

• Se os dois jogares selecionarem a mesma jogada, é um empate
• Pedra ganha de tesoura
• Tesoura ganha de papel
• Papel ganha de pedra

Link do figma

O que deve estar implementado

• Placar do jogador
• Possibilidade de selecionar sua própria jogada
• Utilizar uma jogada aleatória por parte do desafiante
  • Este desafiante deve ser um bot
  • O bot deve ter uma inteligência básica, ou seja, ele deve escolher uma jogada aleatória
• Exibir o resultado do jogo

Multiplayer (extra)

Implemente primeiro a versão singleplayer e depois a multiplayer, a versão multiplayer é um requisito extra, por isso a organização do código é importante, para que seja possível implementar a versão multiplayer, com poucas alterações no código singleplayer.

• Criar salas de jogo para dois jogadores competirem em tempo real
• Exibir o status da sala e permitir que jogadores aguardem adversários
• Mostrar o placar compartilhado entre os dois jogadores
• Utilizar bibliotecas como Socket.IO ou WebSockets nativo

❗ Como deve estar implementado

Requisitos obrigatórios de implementação:

• React
• Typescript

Como pode estar implementado

Recursos que podem ser utilizados para realizar a implementação:

• Frameworks baseado em React como Next
• Bibliotecas de componentes (Material, Bootstrap, Chakra, etc)
• Redux, Mobx, etc
• Bibliotecas de terceiros (axios, moment, date-fns, lodash, etc)

❗ O que será avaliado

• Priorização de implementação
• Componentização
• Manutenibilidade
• Testabilidade
• Forma de entrega conforme o proposto

🍒 Ganha mais pontos

• Terminar dentro do tempo
• Responsividade (mobile-fist)
• Implementar testes unitários
• Implementar alguma forma de deploy
• Persistência (pode ser em localStorage, ou firebase e afins)
• Chamadas HTTP para server
• Adicionar funcionalidade multiplayer utilizando sockets

Como entregar

A entrega será através de um fork, então você deve:

1. Realizar um fork do repositório (não clone diretamente)
2. Implementar o teste no seu fork
3. Enviar um pull-request para este repositório

‼️ Atenção

Bastante atenção no processo de entrega, este é um critério de avaliação.

Inspiração

Este desafio foi fortemente inspirado no desafio do Frontendmentor, disponível nesse link

Divirta-se! 🚀

---

Style Guide:

• Font: roboto
• Background Color: #2C3E50
• yellow: #F1C40F
• blue: #2980B9
• green: #27AE60
• red: #E74C3C
• Imagens na pasta assets