52 lines
2.7 KiB
Markdown
52 lines
2.7 KiB
Markdown
# 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!"
|