# takos-34/fnaticdle architecture

> Architecture diagram of the GitHub repository takos-34/fnaticdle, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/takos-34/fnaticdle
- Repository: https://github.com/takos-34/fnaticdle

## Overview

FnaticDLE is a daily Fnatic-player trivia game. A fan loads the game, receives player and attribute data, makes guesses, and sees attribute-by-attribute feedback; successful play reveals a victory view with a share option. The server selects a daily player, serves the game, answers API requests from MySQL, and periodically writes daily logs. The frontend also keeps guesses locally until midnight. The map reflects the shown source; unsampled HTML and styles are included as product components, but their detailed behavior is not inferred.

Main entry points: [`src/app.js`](https://github.com/takos-34/fnaticdle/blob/main/src/app.js) (Express server), [`src/config/db.js`](https://github.com/takos-34/fnaticdle/blob/main/src/config/db.js) (MySQL pool), [`public/scripts/index.js`](https://github.com/takos-34/fnaticdle/blob/main/public/scripts/index.js) (Guessing UI), [`public/index.html`](https://github.com/takos-34/fnaticdle/blob/main/public/index.html) (Game page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Game client"]
  node_game_page["Game page<br/>[index.html]"]
  node_game_assets["Game assets"]
  node_game_styles["Game styling<br/>[index.css]"]
  node_game_client["Guessing UI<br/>[index.js]"]
  node_guess_feedback["Guess feedback<br/>[index.js]"]
  node_local_progress["Local progress<br/>[index.js]"]
  node_victory_share["Victory and share<br/>[index.js]"]
end

subgraph group_server["Game server"]
  node_http_server["Express server<br/>[app.js]"]
  node_page_routes["Page routes<br/>[index.js]"]
  node_game_api["Game API<br/>[app.js]"]
  node_daily_selector["Daily selection<br/>[app.js]"]
  node_daily_logs["Daily logs<br/>[app.js]"]
end

subgraph group_data["Game data"]
  node_db_pool["MySQL pool<br/>[db.js]"]
  node_player_data[("Player records")]
end

node_fan(("Fnatic fan"))
node_mysql[("MySQL service")]
node_x_service(("X sharing"))

node_fan -->|"plays"| node_game_page
node_http_server -->|"serves static"| node_game_page
node_http_server -->|"mounts routes"| node_page_routes
node_http_server -->|"uses"| node_db_pool
node_game_client -->|"requests data"| node_game_api
node_game_api -->|"queries"| node_db_pool
node_db_pool -->|"connects"| node_mysql
node_mysql -.->|"stores"| node_player_data
node_page_routes -->|"serves home"| node_game_page
node_game_api -->|"returns feedback"| node_guess_feedback
node_game_client -->|"restores guesses"| node_local_progress
node_game_client -->|"renders response"| node_guess_feedback
node_guess_feedback -->|"shows victory"| node_victory_share
node_victory_share -->|"shares result"| node_x_service
node_http_server -->|"starts selection"| node_daily_selector
node_http_server -->|"schedules selection"| node_daily_selector
node_http_server -->|"schedules logs"| node_daily_logs
node_daily_selector -->|"selects player"| node_db_pool
node_daily_logs -->|"logs chosen player"| node_daily_selector

click node_game_page "https://github.com/takos-34/fnaticdle/blob/main/public/index.html"
click node_game_assets "https://github.com/takos-34/fnaticdle/tree/main/public/assets"
click node_game_styles "https://github.com/takos-34/fnaticdle/blob/main/public/styles/index.css"
click node_game_client "https://github.com/takos-34/fnaticdle/blob/main/public/scripts/index.js"
click node_guess_feedback "https://github.com/takos-34/fnaticdle/blob/main/public/scripts/index.js"
click node_local_progress "https://github.com/takos-34/fnaticdle/blob/main/public/scripts/index.js"
click node_victory_share "https://github.com/takos-34/fnaticdle/blob/main/public/scripts/index.js"
click node_http_server "https://github.com/takos-34/fnaticdle/blob/main/src/app.js"
click node_page_routes "https://github.com/takos-34/fnaticdle/blob/main/src/routes/index.js"
click node_game_api "https://github.com/takos-34/fnaticdle/blob/main/src/app.js"
click node_daily_selector "https://github.com/takos-34/fnaticdle/blob/main/src/app.js"
click node_daily_logs "https://github.com/takos-34/fnaticdle/blob/main/src/app.js"
click node_db_pool "https://github.com/takos-34/fnaticdle/blob/main/src/config/db.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_game_page,node_game_assets,node_game_styles,node_game_client,node_guess_feedback,node_local_progress,node_victory_share toneBlue
class node_http_server,node_page_routes,node_game_api,node_daily_selector,node_daily_logs,node_mysql toneAmber
class node_db_pool,node_player_data toneMint
class node_fan,node_x_service toneIndigo
```

## Components

### Game client

- [Game page](https://github.com/takos-34/fnaticdle/blob/main/public/index.html): `public/index.html`
- [Game assets](https://github.com/takos-34/fnaticdle/tree/main/public/assets): `public/assets`
- [Game styling](https://github.com/takos-34/fnaticdle/blob/main/public/styles/index.css): `public/styles/index.css`
- [Guessing UI](https://github.com/takos-34/fnaticdle/blob/main/public/scripts/index.js): `public/scripts/index.js`
- [Guess feedback](https://github.com/takos-34/fnaticdle/blob/main/public/scripts/index.js): `public/scripts/index.js`
- [Local progress](https://github.com/takos-34/fnaticdle/blob/main/public/scripts/index.js): `public/scripts/index.js`
- [Victory and share](https://github.com/takos-34/fnaticdle/blob/main/public/scripts/index.js): `public/scripts/index.js`

### Game server

- [Express server](https://github.com/takos-34/fnaticdle/blob/main/src/app.js): `src/app.js`
- [Page routes](https://github.com/takos-34/fnaticdle/blob/main/src/routes/index.js): `src/routes/index.js`
- [Game API](https://github.com/takos-34/fnaticdle/blob/main/src/app.js): `src/app.js`
- [Daily selection](https://github.com/takos-34/fnaticdle/blob/main/src/app.js): `src/app.js`
- [Daily logs](https://github.com/takos-34/fnaticdle/blob/main/src/app.js): `src/app.js`

### Game data

- [MySQL pool](https://github.com/takos-34/fnaticdle/blob/main/src/config/db.js): `src/config/db.js`
- **Player records**

### Other components

- **Fnatic fan**
- **MySQL service**
- **X sharing**

## Connections

- Fnatic fan → Game page: plays (evidence: `README.md`)
- Express server → Game page: serves static (evidence: `src/app.js`)
- Express server → Page routes: mounts routes (evidence: `src/app.js`)
- Express server → MySQL pool: uses (evidence: `src/app.js`)
- Guessing UI → Game API: requests data (evidence: `public/scripts/index.js`)
- Game API → MySQL pool: queries (evidence: `src/app.js`)
- MySQL pool → MySQL service: connects (evidence: `src/config/db.js`)
- MySQL service → Player records: stores
- Page routes → Game page: serves home (evidence: `src/routes/index.js`)
- Game API → Guess feedback: returns feedback (evidence: `public/scripts/index.js`)
- Guessing UI → Local progress: restores guesses (evidence: `public/scripts/index.js`)
- Guessing UI → Guess feedback: renders response (evidence: `public/scripts/index.js`)
- Guess feedback → Victory and share: shows victory (evidence: `public/scripts/index.js`)
- Victory and share → X sharing: shares result (evidence: `public/scripts/index.js`)
- Express server → Daily selection: starts selection (evidence: `src/app.js`)
- Express server → Daily selection: schedules selection (evidence: `src/app.js`)
- Express server → Daily logs: schedules logs (evidence: `src/app.js`)
- Daily selection → MySQL pool: selects player (evidence: `src/app.js`)
- Daily logs → Daily selection: logs chosen player (evidence: `src/app.js`)