Letra a Letra

Descrição: Um jogo multiplayer baseado em caça-palavras e batalha naval, onde os jogadores disputam para encontrar mais letras usando de todos os meios possíveis para atrapalhar seu adversário.

---

1. Visão Geral

• Gênero: Tabuleiro / Estratégia / Multiplayer
• Plataforma: Web
• Público-alvo: Todos
• Objetivo principal: Encontrar mais palavras escondidas na grade do que o oponente.

---

2. Mecânicas de Jogo

• Controles: A partir de cliques
• Regras principais:
  • Cada partida é entre 2 jogadores, jogando em turnos.
  • O jogo sorteia quem inicia.
  • Cada jogador pode revelar uma letra da grade por turno.
  • Letras reveladas contribuem para formar palavras; poderes secretos podem ser usados para atrapalhar o adversário.
• Pontuação: Cada palavra encontrada = 1 ponto.
  • Se o jogador 1 descobrir parte da palavra, mas o jogador 2 descobrir a última letra, o ponto vai para o jogador 2.
• Condição de vitória: Jogador com maior pontuação vence.

---

3. Estrutura do Jogo

• Telas/Páginas principais:

  • Home Page: Insere nickname, escolhe avatar e escolhe criar ou entrar em sala.
  • Create Room Page: Configura e cria a sala.
  • Rooms Page: Lista salas públicas e permite inserir código de sala específica.
  • Lobby Page: Exibe jogadores na sala e permite chat entre os jogadores e troca de slots.
  • Game Page: Mostra o jogo e o vencedor final.

• Fluxo de navegação:

Home -> Create Room
Home -> Rooms
Create Room -> Lobby
Rooms -> Lobby
Lobby -> Game

4. Personagens / Avatares

• Avatares padrões do jogo
• O jogador escolhe um avatar na Home apenas para identificação visual

5. Sistema de Multiplayer

• Tipo: Online, multiplayer

• Salas: Cada sala suporta 2 jogadores e 5 espectadores, jogo por turnos

• Limite de jogadores: 7 por sala

6. Progressão e Recompensas

• Não há sistema de itens, moedas ou recompensas nesta versão alfa.

7. Monetização

• Na versão final, o jogo contará com alguns anúncios.

8. Tecnologias Utilizadas

• Frontend: React, Vite

• Backend: Node.js com Express

• WebSockets: Socket.io

• Outras bibliotecas: Nanoid, Cors, React-DOM, Socket.io-client

9. Estrutura de Pastas do Projeto

root/
├─ api/
│  ├─ src/
│  │  ├─ controllers/
│  │  │  ├─ gameController.ts
│  │  │  ├─ roomController.ts
│  │  │  └─ playerController.ts
│  │  ├─ entities/
│  │  │  ├─ board.ts
│  │  │  ├─ cell.ts
│  │  │  ├─ game.ts
│  │  │  └─ player.ts
│  │  ├─ logs/
│  │  │  └─ .gitkeep
│  │  ├─ middleware/
│  │  │  ├─ gameMiddleware.ts
│  │  │  ├─ playerMiddleware.ts
│  │  │  └─ roomMiddleware.ts
│  │  ├─ routes/
│  │  │  ├─ gameRoutes.ts
│  │  │  ├─ playerRoutes.ts
│  │  │  └─ roomRoutes.ts
│  │  ├─ services/
│  │  │  ├─ gameService.ts
│  │  │  ├─ roomService.ts
│  │  │  └─ playerService.ts
│  │  ├─ settings/
│  │  │  ├─ board.json
│  │  │  ├─ cell.json
│  │  │  ├─ server.json
│  │  │  └─ themes.json
│  │  ├─ tests/
│  │  │  └─ tests.ts
│  │  ├─ utils/
│  │  │  ├─ board/
│  │  │  │  ├─ canPlaceWord.ts
│  │  │  │  ├─ checkCompletedWord.ts
│  │  │  │  ├─ placeWord.ts
│  │  │  │  ├─ selectTheme.ts
│  │  │  │  └─ themesEnum.ts
│  │  │  ├─ cell/
│  │  │  │  └─ powerRarity.ts
│  │  │  ├─ game/
│  │  │  │  ├─ assignPowerToPlayer.ts
│  │  │  │  ├─ gameModes.ts
│  │  │  │  ├─ gameStatus.ts
│  │  │  │  ├─ movements.ts
│  │  │  │  ├─ movementsEnum.ts
│  │  │  │  └─ nullPlayer.ts
│  │  │  ├─ requests/
│  │  │  │  ├─ gameRequess.ts
│  │  │  │  ├─ playerRequests.ts
│  │  │  │  └─ roomRequests.ts
│  │  │  ├─ responses/
│  │  │  │  ├─ gameResponses.ts
│  │  │  │  ├─ playerResponses.ts
│  │  │  │  ├─ roomResponses.ts
│  │  │  │  └─ serverResponses.ts
│  │  │  ├─ room/
│  │  │  │  └─ enumNicknames.ts
│  │  │  ├─ server/
│  │  │  │  ├─ handleResponse.ts
│  │  │  │  ├─ handleSocket.ts
│  │  │  │  ├─ logEnum.ts
│  │  │  │  └─ logger.ts
│  │  │  ├─ socket/
│  │  │  │  ├─ gameEmits.ts
│  │  │  │  ├─ gameSocket.ts
│  │  │  │  ├─ message.ts
│  │  │  │  └─ roomService.ts
│  │  ├─ app.ts
│  │  ├─ server.ts
│  │  └─ socket.ts
│  ├─ tsconfig.json
│  └─ package.json
├─ ui/
│  ├─ public/
│  │  └─ logo.svg
│  ├─ src/
│  │  ├─ assets/
│  │  │  ├─ avatar/
│  │  │  │  ├─ avatar-1.png
│  │  │  │  ├─ avatar-2.png
│  │  │  │  ├─ avatar-3.png
│  │  │  │  ├─ avatar-4.png
│  │  │  │  ├─ avatar-5.png
│  │  │  │  └─ avatar-6.png
│  │  │  ├─ buttons/
│  │  │  │  ├─ icon-back.png
│  │  │  │  ├─ icon-chat.png
│  │  │  │  ├─ icon-create.png
│  │  │  │  ├─ icon-enter.png
│  │  │  │  ├─ icon-help.png
│  │  │  │  ├─ icon-play.png
│  │  │  │  ├─ icon-refresh.png
│  │  │  │  ├─ icon-send.png
│  │  │  │  └─ icon-settings.png
│  │  │  ├─ powers/
│  │  │  │  ├─ icon-blind.png
│  │  │  │  ├─ icon-block.png
│  │  │  │  ├─ icon-detecttraps.png
│  │  │  │  ├─ icon-freeze.png
│  │  │  │  ├─ icon-imunity.png
│  │  │  │  ├─ icon-lantern.png
│  │  │  │  ├─ icon-spy.png
│  │  │  │  ├─ icon-trap-cell.png
│  │  │  │  ├─ icon-trap.png
│  │  │  │  ├─ icon-unblock.png
│  │  │  │  └─ icon-unfreeze.png
│  │  │  ├─ background.png
│  │  │  └─ logo.png
│  │  ├─ components/
│  │  │  ├─ Create/
│  │  │  │  ├─ GamemodeItem.tsx
│  │  │  │  ├─ GamemodeList.tsx
│  │  │  │  ├─ PowerItem.tsx
│  │  │  │  ├─ PowerList.tsx
│  │  │  │  ├─ PowerPopup.tsx
│  │  │  │  ├─ SettingsPopup.tsx
│  │  │  │  ├─ ThemeItem.tsx
│  │  │  │  └─ ThemeList.tsx
│  │  │  ├─ Game/
│  │  │  │  ├─ Powers/
│  │  │  │  │  ├─ BlockOverlay.ts
│  │  │  │  │  └─ TrapOverlay.ts
│  │  │  │  ├─ Board.tsx
│  │  │  │  ├─ Cell.tsx
│  │  │  │  ├─ EffectOverlay.tsx
│  │  │  │  ├─ ExtraButtons.tsx
│  │  │  │  ├─ PlayerCard.tsx
│  │  │  │  ├─ PowerItem.tsx
│  │  │  │  ├─ Slots.tsx
│  │  │  │  ├─ TurnOverlay.tsx
│  │  │  │  ├─ WinnerOverlay.tsx
│  │  │  │  └─ Words.tsx
│  │  │  ├─ Home/
│  │  │  │  ├─ AvatarItem.tsx
│  │  │  │  ├─ AvatarList.tsx
│  │  │  │  └─ AvatarPopup.tsx
│  │  │  ├─ Lobby/
│  │  │  │  ├─ ChatPopup.tsx
│  │  │  │  ├─ PlayerItem.tsx
│  │  │  │  ├─ PlayerList.tsx
│  │  │  │  ├─ SpectatorItem.tsx
│  │  │  │  └─ SpectatorList.tsx
│  │  │  ├─ Room/
│  │  │  │  ├─ RoomEnterError.tsx
│  │  │  │  ├─ RoomItem.tsx
│  │  │  │  ├─ RoomList.tsx
│  │  │  │  └─ RoomPopup.tsx
│  │  │  └─ Loading.tsx
│  │  ├─ pages/
│  │  │  ├─ Create.tsx
│  │  │  ├─ Game.tsx
│  │  │  ├─ Home.tsx
│  │  │  ├─ Lobby.tsx
│  │  │  └─ Room.tsx
│  │  ├─ services/
│  │  │  └─ socketProvider.tsx
│  │  ├─ styles/
│  │  │  ├─ Create/
│  │  │  │  ├─ GamemodeItem.module.css
│  │  │  │  ├─ GamemodeList.module.css
│  │  │  │  ├─ PowerItem.module.css
│  │  │  │  ├─ PowerList.module.css
│  │  │  │  ├─ PowerPopup.module.css
│  │  │  │  ├─ SettingsPopup.module.css
│  │  │  │  ├─ ThemeItem.module.css
│  │  │  │  └─ ThemeList.module.css
│  │  │  ├─ Game/
│  │  │  │  ├─ Powers/
│  │  │  │  │  ├─ BlockOverlay.module.css
│  │  │  │  │  └─ TrapOverlay.module.css
│  │  │  │  ├─ Board.module.css
│  │  │  │  ├─ Cell.module.css
│  │  │  │  ├─ EffectOverlay.module.css
│  │  │  │  ├─ ExtraButtons.module.css
│  │  │  │  ├─ PlayerCard.module.css
│  │  │  │  ├─ PowerItem.module.css
│  │  │  │  ├─ Slots.module.css
│  │  │  │  ├─ TurnOverlay.module.css
│  │  │  │  ├─ WinnerOverlay.module.css
│  │  │  │  └─ Words.module.css
│  │  │  ├─ Home/
│  │  │  │  ├─ AvatarItem.module.css
│  │  │  │  ├─ AvatarList.module.css
│  │  │  │  └─ AvatarPopup.module.css
│  │  │  ├─ Lobby/
│  │  │  │  ├─ PlayerItem.module.css
│  │  │  │  ├─ PlayerList.module.css
│  │  │  │  ├─ SpectatorItem.module.css
│  │  │  │  └─ SpectatorList.module.css
│  │  │  ├─ Room/
│  │  │  │  ├─ RoomErrorPopup.module.css
│  │  │  │  ├─ RoomItem.module.css
│  │  │  │  ├─ RoomList.module.css
│  │  │  │  └─ RoomPopup.module.css
│  │  │  ├─ ChatPopup.module.css
│  │  │  ├─ Create.module.css
│  │  │  ├─ Game.module.css
│  │  │  ├─ Home.module.css
│  │  │  ├─ Loading.module.css
│  │  │  ├─ Lobby.module.css
│  │  │  └─ Room.module.css
│  │  ├─ utils/
│  │  │  ├─ avatars.ts
│  │  │  ├─ gameResponses.ts
│  │  │  ├─ passTurn.ts
│  │  │  ├─ powers.ts
│  │  │  ├─ preloads.ts
│  │  │  ├─ room_utils.ts
│  │  │  ├─ socket.ts
│  │  │  └─ themes.ts
│  │  ├─ App.css
│  │  ├─ App.tsx
│  │  ├─ index.css
│  │  ├─ main.tsx
│  │  ├─ settings.json
│  │  └─ vite-env.d.ts
│  ├─ .gitignore
│  ├─ eslint.config.js
│  ├─ index.html
│  ├─ package.json
│  ├─ tsconfig.app.json
│  ├─ tsconfig.json
│  ├─ tsconfig.node.json
│  └─ vite.config.ts
├─ diagrams/
│  └─ fluxDiagram.drawio.svg
├─ .vscode/
├─ .gitignore
├─ INIT.py
└─ README.md

10. Como Rodar

• Instalação + Execução: npm start