# CricScoring Pro

Live cricket scoring with a TV-style broadcast overlay. Score a match ball by ball in the
app; the overlay that runs in OBS/vMix updates itself.

This repository is the **migrated, modular project**: the working single-file app
(`legacy-backup/index.html`) and overlay (`legacy-backup/overlay.html`) were split into the
module tree documented below. Functionality, databases paths, prices and screen layout are
unchanged - only the code organisation is new.

## Start here

| I want to... | Open |
| --- | --- |
| Score a match | `app/dashboard/dashboard.html` |
| Preview the broadcast overlay | `broadcast/overlay.html?demo=1` |
| Use the overlay on a stream | `broadcast/overlay.html?tour=<tournamentId>` |
| See the marketing pages | `website/index.html` |
| Manage my account / matches / broadcasts | `customer/account.html`, `customer/broadcast-center.html` |
| Admin | `admin/admin.html` |
| Understand the code | `docs/ARCHITECTURE.md` |
| See where old code moved | `docs/MIGRATION.md` |

> **Important:** open the project through a web server (`http://`), not by double-clicking the
> files. ES modules and the view loader use `fetch()`/`import`, which browsers block on
> `file://`. Any static server works, e.g. `python3 -m http.server 8080` in the project root,
> then visit `http://localhost:8080/app/dashboard/dashboard.html`.
>
> The in-app sandboxed preview is the same story: it can render markup, but modules and
> fetches need a real server.

## What is in the box

```
admin/
app/
assets/
auth/
broadcast/
config/
css/
customer/
firebase/
payments/
website/
```

Highlights:

* **63 legacy regions** of the old monolith are mapped to **28 modules** - every line of the legacy script has exactly one new home (`docs/MIGRATION.md`).
* **15 screens** and **19 dialogs/sheets** live in `app/views/` and are fetched at boot; the app shell is markup + module loading only.
* **7 broadcast themes**, **5 event animations**, **5 overlay components** and a pure payload adapter in `broadcast/`.
* Standalone `website/`, `auth/`, `customer/` and `admin/` pages that reuse the app's modules instead of duplicating logic.

## Running it

1. Serve the folder over HTTP (see above).
2. Sign in (email + password, e-mail link or Google).
3. Create a tournament -> add teams/players -> create a match -> score.
4. For streaming, unlock the broadcast for that tournament (`₹` price comes from
   `payments/plans.js`), copy the overlay link from the payment sheet or the
   customer broadcast centre, and add it in OBS/vMix as a browser source at 1920x1080.

## Verification

The migration was verified with real runs, not by inspection:

* `work/verify.py` - every module parses, every `import` resolves to a real file, every
  `getElementById` target exists in the migrated markup (0 missing).
* `work/testbed/e2e.mjs` - drives the **real app in headless Chrome** with a stubbed Firebase
  layer: boot, view injection, login, scoring a boundary, event-logged undo, live payload
  publish, overlay subscribe/render, full-screen scorecard, all five animations, innings-break
  and result lower thirds, theme switching. Screenshots land in `work/testbed/`.

## Docs

* `docs/ARCHITECTURE.md` - folders, modules, dependencies, data flow, scoring flow, Firebase
  flow, auth, payment/subscription, broadcast, themes, animations.
* `docs/MIGRATION.md` - old -> new locations, what was refactored, compatibility notes.
* `docs/screenshot-scoring-panel.png` / `docs/screenshot-overlay-result.png` - captured by
  `work/testbed/e2e.mjs` (real Chrome) so the migrated UI can be compared with the old one.
* `legacy-backup/` - the untouched originals, kept for reference and rollback.