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!"

2.7 KiB Raw Permalink Blame History