# skelmkeyz/dg5mi architecture

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

- Interactive diagram: https://gitdiagram.com/skelmkeyz/dg5mi
- Repository: https://github.com/skelmkeyz/dg5mi

## Overview

DG5MI is a browser-based, five-minute daygame challenge app. A player enters an interaction, records thumbs-up/down feedback across timed stages, supplies IOI ratings, and receives a score and weekly category; the app logs results to Supabase and can show recent history. Separate login, signup, and dashboard code provides Supabase authentication and credit-balance lookup. The main orchestration and its helper calls are visible in excerpts; README documents the challenge stages and capabilities. HTML wiring and unsampled files are not verified, so no links to those are inferred.

Main entry points: [`js/app.js`](https://github.com/skelmkeyz/dg5mi/blob/main/js/app.js) (Challenge Orchestrator), [`js/supabase.js`](https://github.com/skelmkeyz/dg5mi/blob/main/js/supabase.js) (Supabase Client), [`js/timer.js`](https://github.com/skelmkeyz/dg5mi/blob/main/js/timer.js) (Stage Timer), [`js/login.js`](https://github.com/skelmkeyz/dg5mi/blob/main/js/login.js) (Login Flow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_challenge["Challenge Flow"]
  node_app["Challenge Orchestrator<br/>[app.js]"]
  node_timer["Stage Timer<br/>[timer.js]"]
  node_stage_feedback["Stage Feedback<br/>[app.js]"]
  node_result_view["Result &amp; History View<br/>[app.js]"]
end

subgraph group_evaluation["Scoring &amp; Summary"]
  node_score["IOI Scoring<br/>[score.js]"]
  node_weekly["Weekly Category<br/>[weekly.js]"]
end

subgraph group_accounts["Accounts &amp; Dashboard"]
  node_login["Login Flow<br/>[login.js]"]
  node_signup["Signup Flow<br/>[signup.js]"]
  node_dashboard["Credits Dashboard<br/>[dashboard.js]"]
end

subgraph group_backend["Supabase Integration"]
  node_supabase_client["Supabase Client<br/>[supabase.js]"]
end

node_player(("Player"))
node_supabase_service[("Supabase Backend")]

node_player -->|"starts challenge"| node_app
node_app -->|"starts timer"| node_timer
node_timer -->|"signals stages and finish"| node_app
node_player -->|"votes per stage"| node_stage_feedback
node_app -->|"calculates score"| node_score
node_app -->|"classifies week"| node_weekly
node_app -->|"renders result"| node_result_view
node_app -->|"reads history and saves log"| node_supabase_client
node_login -->|"authenticates"| node_supabase_client
node_signup -->|"registers account"| node_supabase_client
node_dashboard -->|"checks auth and credits"| node_supabase_client
node_supabase_client -->|"connects to"| node_supabase_service

click node_app "https://github.com/skelmkeyz/dg5mi/blob/main/js/app.js"
click node_timer "https://github.com/skelmkeyz/dg5mi/blob/main/js/timer.js"
click node_stage_feedback "https://github.com/skelmkeyz/dg5mi/blob/main/js/app.js"
click node_result_view "https://github.com/skelmkeyz/dg5mi/blob/main/js/app.js"
click node_score "https://github.com/skelmkeyz/dg5mi/blob/main/js/score.js"
click node_weekly "https://github.com/skelmkeyz/dg5mi/blob/main/js/weekly.js"
click node_login "https://github.com/skelmkeyz/dg5mi/blob/main/js/login.js"
click node_signup "https://github.com/skelmkeyz/dg5mi/blob/main/js/signup.js"
click node_dashboard "https://github.com/skelmkeyz/dg5mi/blob/main/js/dashboard.js"
click node_supabase_client "https://github.com/skelmkeyz/dg5mi/blob/main/js/supabase.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_app,node_timer,node_stage_feedback,node_result_view toneBlue
class node_score,node_weekly,node_supabase_service toneAmber
class node_login,node_signup,node_dashboard toneMint
class node_supabase_client toneRose
class node_player toneIndigo
```

## Components

### Challenge Flow

- [Challenge Orchestrator](https://github.com/skelmkeyz/dg5mi/blob/main/js/app.js): `js/app.js`
- [Stage Timer](https://github.com/skelmkeyz/dg5mi/blob/main/js/timer.js): `js/timer.js`
- [Stage Feedback](https://github.com/skelmkeyz/dg5mi/blob/main/js/app.js): `js/app.js`
- [Result & History View](https://github.com/skelmkeyz/dg5mi/blob/main/js/app.js): `js/app.js`

### Scoring & Summary

- [IOI Scoring](https://github.com/skelmkeyz/dg5mi/blob/main/js/score.js): `js/score.js`
- [Weekly Category](https://github.com/skelmkeyz/dg5mi/blob/main/js/weekly.js): `js/weekly.js`

### Accounts & Dashboard

- [Login Flow](https://github.com/skelmkeyz/dg5mi/blob/main/js/login.js): `js/login.js`
- [Signup Flow](https://github.com/skelmkeyz/dg5mi/blob/main/js/signup.js): `js/signup.js`
- [Credits Dashboard](https://github.com/skelmkeyz/dg5mi/blob/main/js/dashboard.js): `js/dashboard.js`

### Supabase Integration

- [Supabase Client](https://github.com/skelmkeyz/dg5mi/blob/main/js/supabase.js): `js/supabase.js`

### Other components

- **Player**
- **Supabase Backend**

## Connections

- Player → Challenge Orchestrator: starts challenge (evidence: `README.md`)
- Challenge Orchestrator → Stage Timer: starts timer (evidence: `js/app.js`)
- Stage Timer → Challenge Orchestrator: signals stages and finish (evidence: `js/app.js`)
- Player → Stage Feedback: votes per stage (evidence: `README.md`)
- Challenge Orchestrator → IOI Scoring: calculates score (evidence: `js/app.js`)
- Challenge Orchestrator → Weekly Category: classifies week (evidence: `js/app.js`)
- Challenge Orchestrator → Result & History View: renders result (evidence: `js/app.js`)
- Challenge Orchestrator → Supabase Client: reads history and saves log (evidence: `js/app.js`)
- Login Flow → Supabase Client: authenticates (evidence: `js/login.js`)
- Signup Flow → Supabase Client: registers account (evidence: `js/signup.js`)
- Credits Dashboard → Supabase Client: checks auth and credits (evidence: `js/dashboard.js`)
- Supabase Client → Supabase Backend: connects to (evidence: `js/supabase.js`)