[UI/UX] Redesign Home page, add weapon skin selector, optimize hero-select button colors, and fix bugs

[zhaohacker8]

Description

Redesign the Home page UI, add a weapon skin selector for heroes, polish hero selection button colors, and fix assorted code bugs for stability and usability.

This task includes:

1. Home UI redesign: New layout/visual hierarchy with responsive behavior.
2. Weapon skin selector: Choose a weapon skin per hero with preview and persistence.
3. Button color optimization: Accessible, consistent states for hero selection (default/hover/active/disabled).
4. Bug fixes: Minor code issues (null-guards, layout jitter, focus handling, cleanup).

---

Requirements

• Home layout: Clear entry points (Play, Hero Select, Settings), responsive to typical desktop resolutions; safe-area aware.
• Design system: Use project color tokens/typography; spacing scale; consistent card/buttons shadows & radius.
• Weapon skin selector:
  • Display available skins (grid/carousel) with preview (portrait or 3D/2D still).
  • Show equipped state; lock/unlock indicator if a skin is not available.
  • Persist the chosen skin per hero; restore on next launch.
• Hero-select button colors: Define tokens for default / hover / active / disabled; meet WCAG 2.1 AA contrast (≥ 4.5:1 for text).
• Input & accessibility: Keyboard navigation & focus ring; tooltips/aria-labels for buttons; no color-only cues.
• Performance/robustness: Lazy-load heavy assets; guard against null renderer/camera; dispose listeners/resources on scene change.
• Config-driven: Skin metadata (id, name, preview, unlock) lives in config (e.g., configs/skins.json) and is hero-aware.

---

Milestones

• Wireframe → visual spec of Home (layout, tokens, states).
• Implement Home containers/components + responsive rules.
• Build Weapon Skin Selector (UI + data model + persistence).
• Apply hero-select button color tokens & state styles; update hover/focus/disabled.
• Add accessibility pass (tab order, focus ring, aria/tooltips, contrast).
• Fix discovered bugs (null-guards, layout flicker, input focus traps).
• Update docs/changelog; attach screenshots/GIF.

Completion Deadline: TBD

---

User Story

• As a player, I want a clean Home page so I can quickly access core actions.
• As a player, I want to choose a weapon skin for my hero and see a preview before starting.
• As a player, I want clear, consistent button colors so interactions feel responsive and readable.
• As a team, we want a robust, config-driven UI that is easy to maintain and extend.

---

Acceptance Criteria

Home UI

• New layout renders correctly at common desktop widths; no clipped text or overlapping components.
• Visual hierarchy matches spec (titles, sections, spacing, tokens).

Weapon Skin Selector

• Lists available skins for the selected hero; unavailable skins are visibly locked.
• Clicking a skin shows a preview; clicking Equip/Select marks it as equipped.
• The equipped skin persists and is restored on relaunch; the game uses it in session.

Hero-select Button Colors

• States (default / hover / active / disabled) are implemented; text contrast passes AA.
• Hover/active feedback feels immediate; disabled state is obvious and non-clickable.
• Keyboard focus is visible and distinct from hover.

Stability

• No NPEs from UI/renderer/camera; no layout jitter when opening panels; no input focus traps.
• Logs are clean; resources are disposed on scene change.

---

Documentation

• Home UI spec (layout, tokens, spacing, state diagrams).
• Skin config schema + example (configs/skins.json), hero mapping, and persistence notes.
• Contrast test notes and screenshots/GIF of selector + button states.
• Known limitations & follow-ups (e.g., skin rarity filters, purchase flow).

---

Test Plan

Automated

• Unit: skin config parse → model mapping → persistence read/write.
• Unit: color/token helpers return expected values for states.
• UI state tests (where feasible): selector open/close, equip transitions.

Manual

• Navigate Home with mouse + keyboard; tab order correct; focus ring visible.
• Switch heroes → selector lists corresponding skins; lock indicators correct.
• Equip a skin → restart → selection persists; skin applied in-game.
• Verify button states & contrast in light/dark backgrounds (if applicable).
• 10–15 min playtest: no crashes/hitches; UI remains responsive.

---

Risks & Mitigations

• Risk: Asset-heavy previews cause stutter.
  Mitigation: Lazy-load & cache; defer heavy work off main thread where possible.
• Risk: Contrast regressions in edge backgrounds.
  Mitigation: Snapshot tests & token-driven colors; check AA with tooling.
• Risk: Skin–hero mapping errors.
  Mitigation: Schema validation + unit tests + fallback visuals.

---

Definition of Done

• All Acceptance Criteria pass; screenshots/GIF attached.
• Skin selection persists and is used in-session.
• Button color states consistent & accessible.
• Docs updated; tests green; PR reviewed & merged.

---

Meta

Assignees: @zhaohacker8 (Chenxu Zhao)
Reviewers: @teammate-1 @teammate-2
Labels: sprint 2, team 2
Type: Task
Project: 2025 Studio 4 Project
Estimate: 3–5 SP Priority: High