Jogo Adivinhe o Número

Descrição

"Guess the Number" é um jogo simples e divertido baseado em React, onde os usuários tentam adivinhar um número gerado aleatoriamente entre 1 e 100 dentro de 10 tentativas. O aplicativo fornece feedback sobre se o número adivinhado é maior ou menor que o número alvo.

Recursos

• Interface amigável para o usuário.
• Feedback em tempo real sobre os palpites.
• Exibe o histórico de palpites.
• Alertas quando a entrada é inválida.
• Páginas de sucesso e falha baseadas no desempenho do usuário.

Tecnologias

Estrutura do Projeto

O projeto segue uma estrutura padrão de aplicativo React:

guess-the-number/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   │   ├── Bad.svg
│   │   ├── Success.svg
│   │   └── questionMark.svg
│   ├── components/
│   │   ├── AlertMessage/
│   │   │   ├── AlertMessage.jsx
│   │   │   └── AlertMessage.module.css
│   │   ├── Footer/
│   │   │   ├── Footer.jsx
│   │   │   └── Footer.module.css
│   │   ├── GuessHistory/
│   │   │   ├── GuessHistory.jsx
│   │   │   └── GuessHistory.module.css
│   │   ├── ResultMessage/
│   │   │   ├── ResultMessage.jsx
│   │   │   └── ResultMessage.module.css
│   ├── pages/
│   │   ├── StartPage/
│   │   │   ├── StartPage.jsx
│   │   │   └── StartPage.module.css
│   │   ├── Game/
│   │   │   ├── Game.jsx
│   │   │   └── Game.module.css
│   │   ├── SuccessPage/
│   │   │   ├── SuccessPage.jsx
│   │   │   └── SuccessPage.module.css
│   │   └── FailPage/
│   │       ├── FailPage.jsx
│   │       └── FailPage.module.css
│   ├── App.js
│   ├── index.js
│   └── ...
├── package.json
└── ...

Estrutura do Projeto

Aqui está uma visão geral dos arquivos relevantes para nosso projeto, com base nas práticas padrão e inferidas a partir dos caminhos dos arquivos:

• public/: Contém ativos públicos e o arquivo HTML principal.
• src/: Contém todo o código-fonte.
  • components/: Contém componentes React reutilizáveis.
  • pages/: Contém componentes de nível de página.
  • assets/: Contém imagens e outros ativos estáticos.
  • App.js: O componente principal do aplicativo.
  • index.js: O ponto de entrada para o aplicativo React.
• package.json: Contém metadados e dependências do projeto.

Instalação

Para executar este projeto localmente, siga estas etapas:

1. Clone o repositório:

   git clone https://github.com/seu-nome-de-usuário/guess-the-number.git
   cd guess-the-number

2. Instale as dependências:

   npm install

3. Inicie o servidor de desenvolvimento:

   npm start

4. Abra seu navegador e acesse http://localhost:5173.

Componentes

StartPage

• A página inicial do jogo.
• Exibe instruções do jogo e um botão para iniciar o jogo.

Game

• A interface principal do jogo onde os usuários inserem seus palpites.
• Fornece feedback em tempo real sobre os palpites.
• Exibe o histórico de palpites.
• Redireciona para as páginas de sucesso ou falha com base no desempenho do usuário.

SuccessPage

• Exibe uma mensagem de sucesso e o histórico de palpites quando o usuário acerta o número.

FailPage

• Exibe uma mensagem de falha e o histórico de palpites quando o usuário não acerta o número dentro de 10 tentativas.

GuessHistory

• Um componente que exibe o histórico de palpites.

ResultMessage

• Um componente que mostra se o último palpite foi muito alto ou muito baixo.

AlertMessage

• Um componente que exibe mensagens de alerta para entradas inválidas.

Footer

• Um componente de rodapé simples.

Scripts

• npm start: Inicia o servidor de desenvolvimento.
• npm build: Compila o aplicativo para produção.
• npm test: Executa testes.
• npm eject: Ejecta a configuração do Create React App.

Design

Você pode encontrar o design do jogo no Figma aqui.

Contribuindo

1. Faça um fork do repositório.
2. Crie sua branch de feature: git checkout -b feature/sua-feature
3. Faça commit das suas alterações: git commit -m 'Adicione alguma feature'
4. Faça push para a branch: git push origin feature/sua-feature
5. Abra um pull request.

Desenvolvido por Alan Barroncas 🚀