# ckda5699/motionid-team_21joints architecture

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

- Interactive diagram: https://gitdiagram.com/ckda5699/motionid-team_21joints
- Repository: https://github.com/ckda5699/motionid-team_21joints

## Overview

Bundesliga Motion ID is a mobile-first player-identification quiz, with supporting Bundesliga news, match, statistics, and leaderboard views. The main path is a fan entering a challenge, watching staged motion playback, locking a player guess, and seeing a scored reveal and results; local progress is persisted by the app. The README describes five progressive reveal stages and additional training modes. Source excerpts show the app’s screen orchestration, scoring, and local data wiring; unsampled views and integrations are represented only where documented or directly referenced.

Main entry points: [`app/src/components/Screens.jsx`](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/Screens.jsx) (App Screens), [`app/src/App.jsx`](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/App.jsx) (App Orchestrator), [`app/src/data/appData.js`](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/data/appData.js) (Challenge Data), [`app/src/lib/scoring.js`](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/lib/scoring.js) (Scoring Rules)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_flow["Challenge Flow"]
  node_app["App Orchestrator<br/>[App.jsx]"]
  node_progress[("Progress Store<br/>[progressStore.js]")]
end

subgraph group_game["Quiz Mechanics"]
  node_answer["Answer Input<br/>[AnswerBar.jsx]"]
  node_replay["Replay Viewport<br/>[ReplayViewport.jsx]"]
  node_timeline["Stage Timeline<br/>[StageTimeline.jsx]"]
  node_scoring["Scoring Rules<br/>[scoring.js]"]
  node_game_data["Challenge Data<br/>[appData.js]"]
end

subgraph group_content["Bundesliga Content"]
  node_content_client["Manifest Client<br/>[contentClient.js]"]
  node_runtime["Runtime URLs<br/>[runtime.js]"]
  node_news_data["News And Goals<br/>[newsGoalsData.js]"]
  node_stats_data["League Statistics<br/>[tableStatsData.js]"]
  node_media["Local Media"]
  node_fixtures["Fixture Data"]
end

subgraph group_ui["App Presentation"]
  node_screens["App Screens<br/>[Screens.jsx]"]
  node_phone["Phone Frame<br/>[PhoneFrame.jsx]"]
  node_topbar["League Top Bar"]
  node_bottomnav["Bottom Navigation<br/>[BottomNav.jsx]"]
  node_logo["Motion ID Logo<br/>[MotionIdLogo.jsx]"]
  node_icon["Icon Set<br/>[Icon.jsx]"]
  node_devtool["Dev Overlay"]
end

node_fan(("Fan"))

node_fan -->|"plays"| node_app
node_app -->|"routes screens"| node_screens
node_app -->|"selects challenges"| node_game_data
node_app -->|"saves progress"| node_progress
node_app -->|"renders in"| node_phone
node_app -->|"renders"| node_devtool
node_phone -->|"renders"| node_topbar
node_phone -->|"renders"| node_bottomnav
node_screens -->|"reads challenge data"| node_game_data
node_screens -->|"reads news and goals"| node_news_data
node_screens -->|"reads statistics"| node_stats_data
node_screens -->|"uses scoring"| node_scoring
node_screens -->|"renders answer input"| node_answer
node_screens -->|"renders replay"| node_replay
node_screens -->|"renders stages"| node_timeline
node_screens -->|"renders"| node_logo
node_screens -->|"renders"| node_icon
node_answer -->|"normalizes names"| node_scoring
node_scoring -->|"reads quiz players"| node_game_data
node_scoring -->|"searches player data"| node_stats_data
node_game_data -->|"resolves media URLs"| node_runtime
node_game_data -->|"imports fixtures"| node_fixtures
node_content_client -->|"resolves data URL"| node_runtime
node_content_client -->|"uses fallback data"| node_game_data
node_app -->|"builds session queue"| node_game_data

click node_app "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/App.jsx"
click node_screens "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/Screens.jsx"
click node_phone "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/PhoneFrame.jsx"
click node_topbar "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/BundesligaTopBar.jsx"
click node_bottomnav "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/BottomNav.jsx"
click node_answer "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/AnswerBar.jsx"
click node_replay "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/ReplayViewport.jsx"
click node_timeline "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/StageTimeline.jsx"
click node_scoring "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/lib/scoring.js"
click node_progress "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/lib/progressStore.js"
click node_game_data "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/data/appData.js"
click node_content_client "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/services/contentClient.js"
click node_runtime "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/config/runtime.js"
click node_news_data "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/data/newsGoalsData.js"
click node_stats_data "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/data/tableStatsData.js"
click node_media "https://github.com/ckda5699/motionid-team_21joints/tree/main/app/public/media"
click node_fixtures "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/data/bundesligaFixtures.generated.js"
click node_logo "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/MotionIdLogo.jsx"
click node_icon "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/Icon.jsx"
click node_devtool "https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/AgentationDevTool.jsx"

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_app,node_progress toneBlue
class node_answer,node_replay,node_timeline,node_scoring,node_game_data toneAmber
class node_content_client,node_runtime,node_news_data,node_stats_data,node_media,node_fixtures toneMint
class node_screens,node_phone,node_topbar,node_bottomnav,node_logo,node_icon,node_devtool toneRose
class node_fan toneIndigo
```

## Components

### Challenge Flow

- [App Orchestrator](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/App.jsx): `app/src/App.jsx`
- [Progress Store](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/lib/progressStore.js): `app/src/lib/progressStore.js`

### Quiz Mechanics

- [Answer Input](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/AnswerBar.jsx): `app/src/components/AnswerBar.jsx`
- [Replay Viewport](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/ReplayViewport.jsx): `app/src/components/ReplayViewport.jsx`
- [Stage Timeline](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/StageTimeline.jsx): `app/src/components/StageTimeline.jsx`
- [Scoring Rules](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/lib/scoring.js): `app/src/lib/scoring.js`
- [Challenge Data](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/data/appData.js): `app/src/data/appData.js`

### Bundesliga Content

- [Manifest Client](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/services/contentClient.js): `app/src/services/contentClient.js`
- [Runtime URLs](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/config/runtime.js): `app/src/config/runtime.js`
- [News And Goals](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/data/newsGoalsData.js): `app/src/data/newsGoalsData.js`
- [League Statistics](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/data/tableStatsData.js): `app/src/data/tableStatsData.js`
- [Local Media](https://github.com/ckda5699/motionid-team_21joints/tree/main/app/public/media): `app/public/media`
- [Fixture Data](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/data/bundesligaFixtures.generated.js): `app/src/data/bundesligaFixtures.generated.js`

### App Presentation

- [App Screens](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/Screens.jsx): `app/src/components/Screens.jsx`
- [Phone Frame](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/PhoneFrame.jsx): `app/src/components/PhoneFrame.jsx`
- [League Top Bar](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/BundesligaTopBar.jsx): `app/src/components/BundesligaTopBar.jsx`
- [Bottom Navigation](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/BottomNav.jsx): `app/src/components/BottomNav.jsx`
- [Motion ID Logo](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/MotionIdLogo.jsx): `app/src/components/MotionIdLogo.jsx`
- [Icon Set](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/Icon.jsx): `app/src/components/Icon.jsx`
- [Dev Overlay](https://github.com/ckda5699/motionid-team_21joints/blob/main/app/src/components/AgentationDevTool.jsx): `app/src/components/AgentationDevTool.jsx`

### Other components

- **Fan**

## Connections

- Fan → App Orchestrator: plays (evidence: `README.md`)
- App Orchestrator → App Screens: routes screens (evidence: `app/src/App.jsx`)
- App Orchestrator → Challenge Data: selects challenges (evidence: `app/src/App.jsx`)
- App Orchestrator → Progress Store: saves progress (evidence: `app/src/App.jsx`)
- App Orchestrator → Phone Frame: renders in (evidence: `app/src/App.jsx`)
- App Orchestrator → Dev Overlay: renders (evidence: `app/src/App.jsx`)
- Phone Frame → League Top Bar: renders (evidence: `app/src/components/PhoneFrame.jsx`)
- Phone Frame → Bottom Navigation: renders (evidence: `app/src/components/PhoneFrame.jsx`)
- App Screens → Challenge Data: reads challenge data (evidence: `app/src/components/Screens.jsx`)
- App Screens → News And Goals: reads news and goals (evidence: `app/src/components/Screens.jsx`)
- App Screens → League Statistics: reads statistics (evidence: `app/src/components/Screens.jsx`)
- App Screens → Scoring Rules: uses scoring (evidence: `app/src/components/Screens.jsx`)
- App Screens → Answer Input: renders answer input (evidence: `app/src/components/Screens.jsx`)
- App Screens → Replay Viewport: renders replay (evidence: `app/src/components/Screens.jsx`)
- App Screens → Stage Timeline: renders stages (evidence: `app/src/components/Screens.jsx`)
- App Screens → Motion ID Logo: renders (evidence: `app/src/components/Screens.jsx`)
- App Screens → Icon Set: renders (evidence: `app/src/components/Screens.jsx`)
- Answer Input → Scoring Rules: normalizes names (evidence: `app/src/components/AnswerBar.jsx`)
- Scoring Rules → Challenge Data: reads quiz players (evidence: `app/src/lib/scoring.js`)
- Scoring Rules → League Statistics: searches player data (evidence: `app/src/lib/scoring.js`)
- Challenge Data → Runtime URLs: resolves media URLs (evidence: `app/src/data/appData.js`)
- Challenge Data → Fixture Data: imports fixtures (evidence: `app/src/data/appData.js`)
- Manifest Client → Runtime URLs: resolves data URL (evidence: `app/src/services/contentClient.js`)
- Manifest Client → Challenge Data: uses fallback data (evidence: `app/src/services/contentClient.js`)
- App Orchestrator → Challenge Data: builds session queue (evidence: `app/src/App.jsx`)