implementation plan

Guide for implementation plan

UI Layout & Styling Revamp - Implementation Plan

Complete overhaul of the UI's visual design system to achieve a modern, polished aesthetic with improved color scheme, proper layout constraints, and consistent spacing.

User Review Required

IMPORTANT
Manual Verification Required: This implementation requires visual inspection in the running game to verify:
  • Orbs render as perfect circles (not ovals)
  • New color scheme looks cohesive
  • Milestone tracker appears in top-left correctly
  • Tab hover states and selected states feel responsive
  • [NEW] Skill icons load correctly (Ranged, Slayer, Fletching, Crafting)
  • [NEW] Skills tab matches the new blue-gray design system
Please confirm you can test the game visually after implementation.

Proposed Changes

UI Core Module (Completed)

constants.rs

  • Added shared design system constants

mod.rs

  • Updated theme implementation
  • Fixed orb layouts
  • Standardized spacing

progression_tracker.rs

  • Moved tracker to top-left

Skills & Assets (Agent 2 Scope)

skills_ui.rs

Visual Polish
  • Replace hardcoded background colors with constants.rs values
  • Use constants::SPACING_... for grid layout
  • Enhance skill cell styling to match the premium dark theme
// Use constants for frame backgrounds
egui::Frame::none()
    .fill(constants::COLOR_PRIMARY_BG) // instead of rgb(20,20,20)
    ...

// Skill cells
egui::Frame::none()
    .fill(constants::COLOR_SECONDARY_BG) // instead of rgb(45,40,35)
    ...

Assets Generation

New Icons
  • Generate missing skill icons using image generation tool:
    • assets/logos/Ranged_icon.png
    • assets/logos/Slayer_icon.png
    • assets/logos/Fletching_icon.png
    • assets/logos/Crafting_icon.png
  • Ensure icons are 512x512 PNGs with transparent background (if supported) or consistent style

Verification Plan

Manual Browser Testing

Since this is a visual UI overhaul, verification will be primarily manual inspection:
Test Steps:
  1. Build and run the game:
    cargo run --bin legends_client
  2. Orb Layout Verification:
    • Inspect the three orbs (HP, Prayer, Energy) in the top section of the right panel
    • ✓ Verify all orbs are perfectly circular (not oval-shaped)
  3. Color Scheme Verification:
    • ✓ Panel background: Dark blue-gray (#191C2D)
    • ✓ Minimap area background: Medium blue-gray (#282C3C)
  4. Milestone Tracker Position:
    • ✓ Tracker compact button appears in top-left corner (not bottom-right)
  5. Skills Tab Verification (Agent 2):
    • ✓ Open Skills Tab (2nd tab)
    • ✓ Check that background matches main panel (not black)
    • ✓ Verify all skill icons load (no missing textures for Ranged, Slayer, etc.)
    • ✓ Verify XP bars render correctly below skill levels
    • ✓ Check grid spacing is consistent (16px)

Automated Testing

  • ✅ Existing compilation check via cargo check
  • Note: No existing unit tests for UI rendering (UI is WYSIWYG, requires visual inspection)