# ayoup1/guess-word architecture

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

- Interactive diagram: https://gitdiagram.com/ayoup1/guess-word
- Repository: https://github.com/ayoup1/guess-word

## Overview

This is a two-player, real-time “Guess the Word” game. A player creates a room with a secret answer or joins an available room; players then exchange questions and yes/no answers until a guess wins or the round limit ends the game. The Vue client presents the lobby and game, while the Socket.IO server coordinates events and keeps game and player state in memory. The tree and excerpts support the main workflow and disconnect/retry behavior; unsampled client details are represented only where documented by the tree.

Main entry points: [`client/src/main.js`](https://github.com/ayoup1/guess-word/blob/master/client/src/main.js) (Socket.IO client), [`server/index.js`](https://github.com/ayoup1/guess-word/blob/master/server/index.js) (Socket event handlers), [`client/src/store.js`](https://github.com/ayoup1/guess-word/blob/master/client/src/store.js) (Vuex game state), [`client/src/components/Welcome.vue`](https://github.com/ayoup1/guess-word/blob/master/client/src/components/Welcome.vue) (Room lobby)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Game client"]
  node_home["Home view<br/>[Home.vue]"]
  node_welcome["Room lobby<br/>[Welcome.vue]"]
  node_gameview["Game screen<br/>[Game.vue]"]
  node_router["Client router<br/>[router.js]"]
  node_app["App event listener<br/>[App.vue]"]
  node_store["Vuex game state<br/>[store.js]"]
  node_footer["Lobby counters<br/>[Footer.vue]"]
  node_socketclient["Socket.IO client<br/>[main.js]"]
end

subgraph group_realtime["Realtime server"]
  node_server["Socket event handlers<br/>[index.js]"]
end

subgraph group_domain["In-memory domain"]
  node_gamestate[("Game map<br/>[Game.js]")]
  node_players[("Player registry<br/>[ActivePlayer.js]")]
end

node_player(("Player"))

node_player -->|"chooses room"| node_welcome
node_player -->|"plays game"| node_gameview
node_home -->|"renders"| node_welcome
node_router -->|"routes home"| node_home
node_router -->|"routes game"| node_gameview
node_welcome -->|"emits join/create"| node_socketclient
node_gameview -->|"emits game actions"| node_socketclient
node_socketclient -->|"connects"| node_server
node_server -->|"creates and updates"| node_gamestate
node_server -->|"registers and looks up"| node_players
node_gamestate -->|"looks up sockets"| node_players
node_server -->|"dispatches game updates"| node_socketclient
node_server -->|"dispatches lobby counts"| node_socketclient
node_app -->|"applies player/game updates"| node_store
node_socketclient -->|"delivers game events"| node_app
node_socketclient -->|"delivers lobby counts"| node_footer
node_footer -->|"updates availability"| node_store
node_store -->|"provides availability"| node_welcome
node_store -->|"provides game state"| node_gameview

click node_home "https://github.com/ayoup1/guess-word/blob/master/client/src/views/Home.vue"
click node_welcome "https://github.com/ayoup1/guess-word/blob/master/client/src/components/Welcome.vue"
click node_gameview "https://github.com/ayoup1/guess-word/blob/master/client/src/views/Game.vue"
click node_router "https://github.com/ayoup1/guess-word/blob/master/client/src/router.js"
click node_app "https://github.com/ayoup1/guess-word/blob/master/client/src/App.vue"
click node_store "https://github.com/ayoup1/guess-word/blob/master/client/src/store.js"
click node_footer "https://github.com/ayoup1/guess-word/blob/master/client/src/components/Footer.vue"
click node_socketclient "https://github.com/ayoup1/guess-word/blob/master/client/src/main.js"
click node_server "https://github.com/ayoup1/guess-word/blob/master/server/index.js"
click node_gamestate "https://github.com/ayoup1/guess-word/blob/master/server/Model/Game.js"
click node_players "https://github.com/ayoup1/guess-word/blob/master/server/Model/ActivePlayer.js"

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_home,node_welcome,node_gameview,node_router,node_app,node_store,node_footer,node_socketclient toneBlue
class node_server toneAmber
class node_gamestate,node_players toneMint
class node_player toneIndigo
```

## Components

### Game client

- [Home view](https://github.com/ayoup1/guess-word/blob/master/client/src/views/Home.vue): `client/src/views/Home.vue`
- [Room lobby](https://github.com/ayoup1/guess-word/blob/master/client/src/components/Welcome.vue): `client/src/components/Welcome.vue`
- [Game screen](https://github.com/ayoup1/guess-word/blob/master/client/src/views/Game.vue): `client/src/views/Game.vue`
- [Client router](https://github.com/ayoup1/guess-word/blob/master/client/src/router.js): `client/src/router.js`
- [App event listener](https://github.com/ayoup1/guess-word/blob/master/client/src/App.vue): `client/src/App.vue`
- [Vuex game state](https://github.com/ayoup1/guess-word/blob/master/client/src/store.js): `client/src/store.js`
- [Lobby counters](https://github.com/ayoup1/guess-word/blob/master/client/src/components/Footer.vue): `client/src/components/Footer.vue`
- [Socket.IO client](https://github.com/ayoup1/guess-word/blob/master/client/src/main.js): `client/src/main.js`

### Realtime server

- [Socket event handlers](https://github.com/ayoup1/guess-word/blob/master/server/index.js): `server/index.js`

### In-memory domain

- [Game map](https://github.com/ayoup1/guess-word/blob/master/server/Model/Game.js): `server/Model/Game.js`
- [Player registry](https://github.com/ayoup1/guess-word/blob/master/server/Model/ActivePlayer.js): `server/Model/ActivePlayer.js`

### Other components

- **Player**

## Connections

- Player → Room lobby: chooses room
- Player → Game screen: plays game
- Home view → Room lobby: renders
- Client router → Home view: routes home
- Client router → Game screen: routes game
- Room lobby → Socket.IO client: emits join/create
- Game screen → Socket.IO client: emits game actions
- Socket.IO client → Socket event handlers: connects
- Socket event handlers → Game map: creates and updates
- Socket event handlers → Player registry: registers and looks up
- Game map → Player registry: looks up sockets
- Socket event handlers → Socket.IO client: dispatches game updates
- Socket event handlers → Socket.IO client: dispatches lobby counts
- App event listener → Vuex game state: applies player/game updates
- Socket.IO client → App event listener: delivers game events
- Socket.IO client → Lobby counters: delivers lobby counts
- Lobby counters → Vuex game state: updates availability
- Vuex game state → Room lobby: provides availability
- Vuex game state → Game screen: provides game state