# eriic-builds/mywcbracket architecture

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

- Interactive diagram: https://gitdiagram.com/eriic-builds/mywcbracket
- Repository: https://github.com/eriic-builds/mywcbracket
- Video tour (about a minute): https://gitdiagram.com/eriic-builds/mywcbracket/video

## Overview

My World Cup Bracket is a static, browser-run World Cup prediction dashboard: people import, build, or reopen a bracket, then track it against published results and optionally compare or share it. Its distinct product stages include bracket ingestion and editing, scoring and visualization, match-detail exploration, local pool management, and champion celebration. README capabilities guide the map; sampled source is limited, so links between unsampled browser modules are shown only where documented behavior supports them.

Main entry points: [`docs/js/main.js`](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/main.js) (App controller), [`docs/js/match-details.js`](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/match-details.js) (Match cards), [`docs/index.html`](https://github.com/eriic-builds/mywcbracket/blob/main/docs/index.html) (Dashboard page), [`docs/js/interact.js`](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/interact.js) (Bracket scoring)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_bracket["Bracket setup"]
  node_parser["Workbook parser<br/>[parse-excel.js]"]
  node_builder["Bracket builder<br/>[builder.js]"]
end

subgraph group_dashboard["Live dashboard"]
  node_page["Dashboard page<br/>[index.html]"]
  node_main["App controller<br/>[main.js]"]
  node_scoring["Bracket scoring<br/>[interact.js]"]
  node_render["Dashboard rendering<br/>[render.js]"]
  node_bracketmap["Bracket layouts<br/>[bracket-tree.js]"]
  node_matchcards["Match cards<br/>[match-details.js]"]
end

subgraph group_pool["Local pool"]
  node_storage["Local storage<br/>[storage.js]"]
  node_share["Share and backup<br/>[share.js]"]
  node_compare["Pool comparison<br/>[compare.js]"]
end

subgraph group_data["Tournament data"]
  node_results["Published results<br/>[results.json]"]
  node_topology["Tournament topology<br/>[topology.json]"]
  node_details["Match detail records<br/>[match-details.json]"]
  node_portraits["Portrait mappings"]
  node_fetch["Results sync<br/>[fetch_results.py]"]
  node_matchdetailsync["Detail sync<br/>[match_details.py]"]
end

subgraph group_experience["Interactive experience"]
  node_celebration["Champion celebration"]
  node_trigger["Celebration trigger"]
  node_scene["Celebration scene"]
  node_motion["Landing animation<br/>[landing-ballpit.js]"]
end

node_visitor(("Bracket visitor"))
node_portraitservice(("Portrait source"))
node_resultsprovider(("Results provider"))
node_pages(("Static site host"))

node_visitor -->|"opens dashboard"| node_page
node_pages -->|"serves static files"| node_page
node_page -->|"starts app"| node_main
node_main -->|"imports workbook"| node_parser
node_main -->|"builds picks"| node_builder
node_main -->|"saves and reopens"| node_storage
node_main -->|"shares or backs up"| node_share
node_main -->|"compares rivals"| node_compare
node_main -->|"scores bracket"| node_scoring
node_main -->|"renders dashboard"| node_render
node_main -->|"shows bracket layout"| node_bracketmap
node_main -->|"opens match facts"| node_matchcards
node_scoring -->|"reads results"| node_results
node_bracketmap -->|"reads topology"| node_topology
node_matchcards -->|"reads match details"| node_details
node_matchcards -->|"reads portrait map"| node_portraits
node_matchcards -.->|"requests credited portraits"| node_portraitservice
node_visitor -->|"activates champion"| node_trigger
node_trigger -->|"starts cutscene"| node_celebration
node_celebration -->|"creates scene"| node_scene
node_page -->|"shows interactive balls"| node_motion
node_resultsprovider -->|"supplies match feed"| node_fetch
node_fetch -->|"writes results"| node_results
node_matchdetailsync -->|"updates details"| node_details

click node_page "https://github.com/eriic-builds/mywcbracket/blob/main/docs/index.html"
click node_main "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/main.js"
click node_parser "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/parse-excel.js"
click node_builder "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/builder.js"
click node_storage "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/storage.js"
click node_share "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/share.js"
click node_compare "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/compare.js"
click node_scoring "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/interact.js"
click node_render "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/render.js"
click node_bracketmap "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/bracket-tree.js"
click node_matchcards "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/match-details.js"
click node_results "https://github.com/eriic-builds/mywcbracket/blob/main/docs/data/results.json"
click node_topology "https://github.com/eriic-builds/mywcbracket/blob/main/docs/data/topology.json"
click node_details "https://github.com/eriic-builds/mywcbracket/blob/main/docs/data/match-details.json"
click node_portraits "https://github.com/eriic-builds/mywcbracket/blob/main/docs/data/match-portraits.json"
click node_fetch "https://github.com/eriic-builds/mywcbracket/blob/main/scripts/fetch_results.py"
click node_matchdetailsync "https://github.com/eriic-builds/mywcbracket/blob/main/scripts/match_details.py"
click node_celebration "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/champion-celebration.js"
click node_trigger "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/champion-celebration-trigger.js"
click node_scene "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/champion-celebration-scene.js"
click node_motion "https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/landing-ballpit.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_parser,node_builder toneBlue
class node_page,node_main,node_scoring,node_render,node_bracketmap,node_matchcards toneAmber
class node_storage,node_share,node_compare toneMint
class node_results,node_topology,node_details,node_portraits,node_fetch,node_matchdetailsync toneRose
class node_celebration,node_trigger,node_scene,node_motion,node_visitor,node_portraitservice,node_resultsprovider,node_pages toneIndigo
```

## Components

### Bracket setup

- [Workbook parser](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/parse-excel.js): `docs/js/parse-excel.js`
- [Bracket builder](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/builder.js): `docs/js/builder.js`

### Live dashboard

- [Dashboard page](https://github.com/eriic-builds/mywcbracket/blob/main/docs/index.html): `docs/index.html`
- [App controller](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/main.js): `docs/js/main.js`
- [Bracket scoring](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/interact.js): `docs/js/interact.js`
- [Dashboard rendering](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/render.js): `docs/js/render.js`
- [Bracket layouts](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/bracket-tree.js): `docs/js/bracket-tree.js`
- [Match cards](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/match-details.js): `docs/js/match-details.js`

### Local pool

- [Local storage](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/storage.js): `docs/js/storage.js`
- [Share and backup](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/share.js): `docs/js/share.js`
- [Pool comparison](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/compare.js): `docs/js/compare.js`

### Tournament data

- [Published results](https://github.com/eriic-builds/mywcbracket/blob/main/docs/data/results.json): `docs/data/results.json`
- [Tournament topology](https://github.com/eriic-builds/mywcbracket/blob/main/docs/data/topology.json): `docs/data/topology.json`
- [Match detail records](https://github.com/eriic-builds/mywcbracket/blob/main/docs/data/match-details.json): `docs/data/match-details.json`
- [Portrait mappings](https://github.com/eriic-builds/mywcbracket/blob/main/docs/data/match-portraits.json): `docs/data/match-portraits.json`
- [Results sync](https://github.com/eriic-builds/mywcbracket/blob/main/scripts/fetch_results.py): `scripts/fetch_results.py`
- [Detail sync](https://github.com/eriic-builds/mywcbracket/blob/main/scripts/match_details.py): `scripts/match_details.py`

### Interactive experience

- [Champion celebration](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/champion-celebration.js): `docs/js/champion-celebration.js`
- [Celebration trigger](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/champion-celebration-trigger.js): `docs/js/champion-celebration-trigger.js`
- [Celebration scene](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/champion-celebration-scene.js): `docs/js/champion-celebration-scene.js`
- [Landing animation](https://github.com/eriic-builds/mywcbracket/blob/main/docs/js/landing-ballpit.js): `docs/js/landing-ballpit.js`

### Other components

- **Bracket visitor**
- **Portrait source**
- **Results provider**
- **Static site host**

## Connections

- Bracket visitor → Dashboard page: opens dashboard
- Static site host → Dashboard page: serves static files
- Dashboard page → App controller: starts app
- App controller → Workbook parser: imports workbook
- App controller → Bracket builder: builds picks
- App controller → Local storage: saves and reopens
- App controller → Share and backup: shares or backs up
- App controller → Pool comparison: compares rivals
- App controller → Bracket scoring: scores bracket
- App controller → Dashboard rendering: renders dashboard
- App controller → Bracket layouts: shows bracket layout
- App controller → Match cards: opens match facts
- Bracket scoring → Published results: reads results
- Bracket layouts → Tournament topology: reads topology
- Match cards → Match detail records: reads match details
- Match cards → Portrait mappings: reads portrait map
- Match cards → Portrait source: requests credited portraits
- Bracket visitor → Celebration trigger: activates champion
- Celebration trigger → Champion celebration: starts cutscene
- Champion celebration → Celebration scene: creates scene
- Dashboard page → Landing animation: shows interactive balls
- Results provider → Results sync: supplies match feed
- Results sync → Published results: writes results
- Detail sync → Match detail records: updates details