# mohamadal-shanti/grandlinerun architecture

> Architecture diagram of the GitHub repository mohamadal-shanti/grandlinerun, 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/mohamadal-shanti/grandlinerun
- Repository: https://github.com/mohamadal-shanti/grandlinerun

## Overview

Grand Line Run is a browser-based, level-based Phaser game with sign-in, score submission, and a public leaderboard. The main flow is player → title/sign-in → gameplay → game-over results; the title and results screens use score and quote APIs. README documents a serverless quote lookup through Lambda and DynamoDB, while sampled code shows the client API calls but not their backend handlers. The graph reflects that limit and separates the documented quote backend from the score and leaderboard endpoints.

Main entry points: [`js/TitleScene.js`](https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/TitleScene.js) (Title scene), [`js/GameScene.js`](https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/GameScene.js) (Gameplay scene), [`js/main.js`](https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/main.js) (Game bootstrap), [`js/Scores.js`](https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/Scores.js) (Scores client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser client"]
  node_page["Game page<br/>[index.html]"]
  node_entry["Game bootstrap<br/>[main.js]"]
  node_data["Game data<br/>[GameData.js]"]
end

subgraph group_game["Game experience"]
  node_title["Title scene<br/>[TitleScene.js]"]
  node_gameplay["Gameplay scene<br/>[GameScene.js]"]
  node_assets["Game assets"]
end

subgraph group_identity["Identity and scores"]
  node_auth["Auth client<br/>[Auth.js]"]
  node_scores["Scores client<br/>[Scores.js]"]
end

subgraph group_cloud["Cloud services"]
  node_static["Static hosting"]
  node_cognito["Amazon Cognito"]
  node_gateway["API Gateway"]
  node_quote_fn["Quote Lambda"]
  node_quote_db[("Quote DynamoDB")]
end

node_player(("Player"))
node_phaser["Phaser engine"]

node_player -->|"opens"| node_page
node_page -->|"loads from"| node_static
node_page -->|"starts"| node_entry
node_entry -->|"initializes"| node_auth
node_entry -->|"creates game"| node_phaser
node_entry -->|"registers scene"| node_title
node_entry -->|"registers scene"| node_gameplay
node_title -->|"starts run"| node_gameplay
node_gameplay -->|"returns on restart"| node_title
node_title -->|"checks identity"| node_auth
node_title -->|"requests sign-in"| node_auth
node_auth -->|"exchanges tokens"| node_cognito
node_title -->|"requests rankings"| node_scores
node_scores -->|"fetches leaderboard"| node_gateway
node_gameplay -->|"submits score"| node_scores
node_scores -->|"gets ID token"| node_auth
node_scores -->|"posts score"| node_gateway
node_gameplay -->|"requests villain quote"| node_gateway
node_gateway -->|"invokes"| node_quote_fn
node_quote_fn -->|"queries quotes"| node_quote_db
node_title -->|"loads artwork"| node_assets
node_gameplay -->|"uses game rules"| node_data
node_title -->|"uses arc data"| node_data

click node_page "https://github.com/mohamadal-shanti/grandlinerun/blob/main/index.html"
click node_entry "https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/main.js"
click node_data "https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/GameData.js"
click node_title "https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/TitleScene.js"
click node_gameplay "https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/GameScene.js"
click node_assets "https://github.com/mohamadal-shanti/grandlinerun/tree/main/assets"
click node_auth "https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/Auth.js"
click node_scores "https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/Scores.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_page,node_entry,node_data toneBlue
class node_title,node_gameplay,node_assets toneAmber
class node_auth,node_scores toneMint
class node_static,node_cognito,node_gateway,node_quote_fn,node_quote_db toneRose
class node_player,node_phaser toneIndigo
```

## Components

### Browser client

- [Game page](https://github.com/mohamadal-shanti/grandlinerun/blob/main/index.html): `index.html`
- [Game bootstrap](https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/main.js): `js/main.js`
- [Game data](https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/GameData.js): `js/GameData.js`

### Game experience

- [Title scene](https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/TitleScene.js): `js/TitleScene.js`
- [Gameplay scene](https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/GameScene.js): `js/GameScene.js`
- [Game assets](https://github.com/mohamadal-shanti/grandlinerun/tree/main/assets): `assets`

### Identity and scores

- [Auth client](https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/Auth.js): `js/Auth.js`
- [Scores client](https://github.com/mohamadal-shanti/grandlinerun/blob/main/js/Scores.js): `js/Scores.js`

### Cloud services

- **Static hosting**
- **Amazon Cognito**
- **API Gateway**
- **Quote Lambda**
- **Quote DynamoDB**

### Other components

- **Player**
- **Phaser engine**

## Connections

- Player → Game page: opens
- Game page → Static hosting: loads from
- Game page → Game bootstrap: starts
- Game bootstrap → Auth client: initializes
- Game bootstrap → Phaser engine: creates game
- Game bootstrap → Title scene: registers scene
- Game bootstrap → Gameplay scene: registers scene
- Title scene → Gameplay scene: starts run
- Gameplay scene → Title scene: returns on restart
- Title scene → Auth client: checks identity
- Title scene → Auth client: requests sign-in
- Auth client → Amazon Cognito: exchanges tokens
- Title scene → Scores client: requests rankings
- Scores client → API Gateway: fetches leaderboard
- Gameplay scene → Scores client: submits score
- Scores client → Auth client: gets ID token
- Scores client → API Gateway: posts score
- Gameplay scene → API Gateway: requests villain quote
- API Gateway → Quote Lambda: invokes
- Quote Lambda → Quote DynamoDB: queries quotes
- Title scene → Game assets: loads artwork
- Gameplay scene → Game data: uses game rules
- Title scene → Game data: uses arc data