First commit, phased 1 and 2 created but untested

2026-10-20 07:40:35 +11:00
commit 7a3e408ffc
66 changed files with 5639 additions and 0 deletions
@@ -0,0 +1,51 @@
+# UI_GUIDE.md
+
+## Pages
+| File | Purpose | Auth |
+|---|---|---|
+| `index.html` | Landing: title, tagline, Login/Register buttons | public |
+| `register.html` / `login.html` | forms | public |
+| `create-hero.html` | name + class picker with class descriptions | needs login, no hero |
+| `game.html` | main dashboard (see layout) | needs login + hero |
+| `shop.html` | buy/sell tabs | needs hero |
+| `leaderboard.html` | tabs: Level / Gold / Kills | public |
+
+Auth guard on the client: on page load call `/api/auth/me`; redirect as needed. (Server still enforces — client redirect is UX only.)
+
+## game.html layout
+```
+┌ Header: logo • hero name • Lv • gold • Logout
+├ Left column:  Hero card (HP bar, XP bar, Energy bar + regen timer), stats, unspent points [+]
+├ Centre:       Tabs → Hunt | Expedition | Inventory
+│               Hunt: zone cards (locked ones greyed with "Reach Lv X")
+│               Combat log panel: replays rounds with short delay, then shows summary
+└ Right column: Equipment slots (weapon/armor/trinket), recent combat history
+```
+Mobile (< 700px): single column; tabs become a bottom nav.
+
+## Theme: "Ember & Parchment" (dark fantasy)
+CSS variables in `theme.css`:
+```
+--bg: #14110f;  --panel: #211b17;  --panel-2: #2c231d;
+--text: #eadfce; --muted: #a59a8a;
+--accent: #e2822b (ember orange); --accent-2: #f2c14e (gold);
+--danger: #c0392b; --success: #4f9d69; --info: #4a7fb0;
+--border: #3a2f27;
+Rarity: common #b8b0a3, uncommon #5fb36b, rare #4a8fe0, epic #a45ee0, legendary #f2a23a
+```
+Fonts: system serif stack for headings (`Georgia, 'Times New Roman', serif`), system sans for body. No external font/CDN requests (CSP + offline friendly).
+
+## Components (build once in components.css)
+`.panel`, `.btn` (+ `.btn-primary`, `.btn-danger`, `:disabled`), `.bar` with `.bar-fill` (hp/xp/energy variants), `.tabs`, `.card`, `.toast`, `.tooltip`, `.badge` (rarity), `.table`, `.modal`.
+
+## UX rules
+- Every action button shows a loading state and is disabled while the request is in flight (prevents double-clicks).
+- Show energy cost on the button: `Hunt (5⚡)`. Disable if not enough energy, and say why.
+- Errors → toast from `error.message`. Successes → toast or inline result.
+- Numbers formatted with thousands separators.
+- Countdowns update every second client-side but **re-sync with the server** after each API call.
+- Accessible basics: labels on inputs, buttons are `<button>`, colour is not the only signal, focus outlines kept.
+- No images required: use emoji/CSS shapes for icons if no art is available (⚔️ 🛡️ 💍 🧪 ⚡ 💰).
+
+## Copy tone
+Short, flavourful, never longer than 2 lines. e.g. "A Meadow Wolf lunges from the tall grass!"