# tauqeer-code-craft/inkguess architecture

> Architecture diagram of the GitHub repository tauqeer-code-craft/inkguess, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tauqeer-code-craft/inkguess
- Repository: https://github.com/tauqeer-code-craft/inkguess

## Overview

InkGuess is a real-time multiplayer drawing-and-guessing game. Players create or join a coded room, the host starts rounds, a drawer selects a word and shares strokes while others guess in chat, and the game updates hints, timers, scores, and final rankings before a rematch. The frontend combines REST room setup with Socket.IO gameplay; the backend coordinates room and game state through Redis with an in-memory fallback. Relationships involving unsampled gateway and component internals are limited to source-index references or README-documented behavior.

Main entry points: [`apps/frontend/src/components/GameBoard.tsx`](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/GameBoard.tsx) (Game board), [`apps/backend/src/game.service.ts`](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/game.service.ts) (Game engine), [`apps/frontend/src/sockets/socketService.ts`](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/sockets/socketService.ts) (Socket client), [`apps/frontend/src/store/useGameStore.ts`](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/store/useGameStore.ts) (Game state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Player experience"]
  node_lobby["Room lobby<br/>[Lobby.tsx]"]
  node_gameboard["Game board<br/>[GameBoard.tsx]"]
  node_canvas["Drawing canvas<br/>[Canvas.tsx]"]
  node_chat["Guess chat<br/>[Chat.tsx]"]
  node_wordselect["Word selection<br/>[WordSelection.tsx]"]
  node_scoreboard["Scoreboard<br/>[ScoreBoard.tsx]"]
end

subgraph group_frontend["Frontend runtime"]
  node_app["App session<br/>[App.tsx]"]
  node_state["Game state<br/>[useGameStore.ts]"]
  node_restclient["Room REST client<br/>[client.ts]"]
  node_socketclient["Socket client<br/>[socketService.ts]"]
end

subgraph group_backend["Game backend"]
  node_roomapi["Room API<br/>[room.controller.ts]"]
  node_gateway["Socket gateway<br/>[socket.gateway.ts]"]
  node_gameservice["Game engine<br/>[game.service.ts]"]
  node_wordbank["Word selection data<br/>[game-words.ts]"]
  node_types["Game data types<br/>[types.ts]"]
end

subgraph group_storage["Room state"]
  node_redisservice["State adapter<br/>[redis.service.ts]"]
  node_redis[("Redis")]
end

node_players(("Players"))

node_players -->|"create or join"| node_lobby
node_app -->|"shows lobby"| node_lobby
node_app -->|"shows game"| node_gameboard
node_app -->|"connects"| node_socketclient
node_lobby -->|"requests rooms"| node_restclient
node_lobby -->|"joins room"| node_socketclient
node_gameboard -->|"reads state"| node_state
node_gameboard -->|"renders"| node_canvas
node_gameboard -->|"renders"| node_chat
node_gameboard -->|"renders"| node_wordselect
node_gameboard -->|"renders"| node_scoreboard
node_canvas -->|"updates"| node_state
node_canvas -->|"sends strokes"| node_socketclient
node_chat -->|"updates"| node_state
node_chat -->|"submits guesses"| node_socketclient
node_wordselect -->|"reads state"| node_state
node_wordselect -->|"selects word"| node_socketclient
node_scoreboard -->|"reads scores"| node_state
node_restclient -->|"HTTP requests"| node_roomapi
node_socketclient -->|"sends game events"| node_gateway
node_gateway -->|"dispatches events"| node_gameservice
node_roomapi -->|"room operations"| node_gameservice
node_gameservice -->|"reads and writes"| node_redisservice
node_gameservice -->|"generates choices"| node_wordbank
node_gameservice -.->|"broadcasts events"| node_gateway
node_redisservice -.->|"uses when available"| node_redis
node_gameservice -->|"uses data types"| node_types
node_gateway -->|"uses data types"| node_types

click node_app "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/App.tsx"
click node_lobby "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/Lobby.tsx"
click node_gameboard "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/GameBoard.tsx"
click node_canvas "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/Canvas.tsx"
click node_chat "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/Chat.tsx"
click node_wordselect "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/WordSelection.tsx"
click node_scoreboard "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/ScoreBoard.tsx"
click node_state "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/store/useGameStore.ts"
click node_restclient "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/api/client.ts"
click node_socketclient "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/sockets/socketService.ts"
click node_roomapi "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/room.controller.ts"
click node_gateway "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/socket.gateway.ts"
click node_gameservice "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/game.service.ts"
click node_wordbank "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/game-words.ts"
click node_types "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/types.ts"
click node_redisservice "https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/redis.service.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_lobby,node_gameboard,node_canvas,node_chat,node_wordselect,node_scoreboard toneBlue
class node_app,node_state,node_restclient,node_socketclient toneAmber
class node_roomapi,node_gateway,node_gameservice,node_wordbank,node_types toneMint
class node_redisservice,node_redis toneRose
class node_players toneIndigo
```

## Components

### Player experience

- [Room lobby](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/Lobby.tsx): `apps/frontend/src/components/Lobby.tsx`
- [Game board](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/GameBoard.tsx): `apps/frontend/src/components/GameBoard.tsx`
- [Drawing canvas](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/Canvas.tsx): `apps/frontend/src/components/Canvas.tsx`
- [Guess chat](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/Chat.tsx): `apps/frontend/src/components/Chat.tsx`
- [Word selection](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/WordSelection.tsx): `apps/frontend/src/components/WordSelection.tsx`
- [Scoreboard](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/components/ScoreBoard.tsx): `apps/frontend/src/components/ScoreBoard.tsx`

### Frontend runtime

- [App session](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/App.tsx): `apps/frontend/src/App.tsx`
- [Game state](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/store/useGameStore.ts): `apps/frontend/src/store/useGameStore.ts`
- [Room REST client](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/api/client.ts): `apps/frontend/src/api/client.ts`
- [Socket client](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/frontend/src/sockets/socketService.ts): `apps/frontend/src/sockets/socketService.ts`

### Game backend

- [Room API](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/room.controller.ts): `apps/backend/src/room.controller.ts`
- [Socket gateway](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/socket.gateway.ts): `apps/backend/src/socket.gateway.ts`
- [Game engine](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/game.service.ts): `apps/backend/src/game.service.ts`
- [Word selection data](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/game-words.ts): `apps/backend/src/game-words.ts`
- [Game data types](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/types.ts): `apps/backend/src/types.ts`

### Room state

- [State adapter](https://github.com/tauqeer-code-craft/inkguess/blob/main/apps/backend/src/redis.service.ts): `apps/backend/src/redis.service.ts`
- **Redis**

### Other components

- **Players**

## Connections

- Players → Room lobby: create or join (evidence: `readme.md`)
- App session → Room lobby: shows lobby (evidence: `apps/frontend/src/App.tsx`)
- App session → Game board: shows game (evidence: `apps/frontend/src/App.tsx`)
- App session → Socket client: connects (evidence: `apps/frontend/src/App.tsx`)
- Room lobby → Room REST client: requests rooms (evidence: `apps/frontend/src/components/Lobby.tsx`)
- Room lobby → Socket client: joins room (evidence: `apps/frontend/src/components/Lobby.tsx`)
- Game board → Game state: reads state (evidence: `apps/frontend/src/components/GameBoard.tsx`)
- Game board → Drawing canvas: renders (evidence: `apps/frontend/src/components/GameBoard.tsx`)
- Game board → Guess chat: renders (evidence: `apps/frontend/src/components/GameBoard.tsx`)
- Game board → Word selection: renders (evidence: `apps/frontend/src/components/GameBoard.tsx`)
- Game board → Scoreboard: renders (evidence: `apps/frontend/src/components/GameBoard.tsx`)
- Drawing canvas → Game state: updates (evidence: `apps/frontend/src/components/Canvas.tsx`)
- Drawing canvas → Socket client: sends strokes (evidence: `apps/frontend/src/components/Canvas.tsx`)
- Guess chat → Game state: updates (evidence: `apps/frontend/src/components/Chat.tsx`)
- Guess chat → Socket client: submits guesses (evidence: `apps/frontend/src/components/Chat.tsx`)
- Word selection → Game state: reads state (evidence: `apps/frontend/src/components/WordSelection.tsx`)
- Word selection → Socket client: selects word (evidence: `apps/frontend/src/components/WordSelection.tsx`)
- Scoreboard → Game state: reads scores (evidence: `apps/frontend/src/components/ScoreBoard.tsx`)
- Room REST client → Room API: HTTP requests (evidence: `readme.md`)
- Socket client → Socket gateway: sends game events (evidence: `readme.md`)
- Socket gateway → Game engine: dispatches events (evidence: `apps/backend/src/socket.gateway.ts`)
- Room API → Game engine: room operations (evidence: `apps/backend/src/room.controller.ts`)
- Game engine → State adapter: reads and writes (evidence: `apps/backend/src/game.service.ts`)
- Game engine → Word selection data: generates choices (evidence: `apps/backend/src/game.service.ts`)
- Game engine → Socket gateway: broadcasts events (evidence: `apps/backend/src/socket.gateway.ts`)
- State adapter → Redis: uses when available (evidence: `apps/backend/src/redis.service.ts`)
- Game engine → Game data types: uses data types (evidence: `apps/backend/src/game.service.ts`)
- Socket gateway → Game data types: uses data types (evidence: `apps/backend/src/socket.gateway.ts`)