parallel ui revamp

Guide for parallel ui revamp

UI/UX Revamp - Parallel Agent Breakdown

Agent 1: Core UI Layout & Styling

Scope

Visual design system, layout fixes, color palette, and main panel structure.

Files to Modify

  • src/systems/ui/mod.rs (lines 345-615: main panel rendering)
  • src/systems/ui/progression_tracker.rs (move to top-left)

Tasks

1. Fix Orb Layout

Lines: 370-420 in mod.rs
  • Replace allocate_space with proper circular constraints
  • Use Frame with min_size and max_size set to same value
  • Add proper centering logic

2. Color Palette Update

Throughout mod.rs
  • Replace rgb(62,53,41) → rgb(25,28,45) (primary BG)
  • Replace rgb(40,35,30) → rgb(40,44,60) (secondary BG)
  • Update orb colors:
    • HP: rgb(220,53,69)
    • Prayer: rgb(13,202,240)
    • Energy: rgb(123,237,159)

3. Move Milestone Tracker

File: progression_tracker.rs
  • Change anchor from RIGHT_BOTTOM to LEFT_TOP
  • Adjust positioning vector
  • Ensure no z-fighting with other UI

4. Spacing & Typography

Throughout mod.rs
  • Standardize padding: 8px, 12px, 16px
  • Update heading sizes: 16px bold
  • Update body text: 13px regular
  • Tab icon spacing: 12px between tabs

5. Tab Visual Feedback

Lines: 430-450, 600-615 (tab rows)
  • Add hover tint effect
  • Improve selected state (border + glow)
  • Add smooth transitions

Deliverables

  • Fixed circular orbs
  • New color scheme applied
  • Milestone tracker in top-left
  • Consistent spacing throughout
  • Polished tab interactions

Agent 2: Assets & Component Polish

Scope

Icon generation, skill tab improvements, and content area enhancements.

Files to Modify

  • Asset files: assets/logos/*.png
  • src/systems/ui/skills_ui.rs
  • src/systems/ui/inventory_ui.rs (spacing only)

Tasks

1. Regenerate Skill Icons

Action: Use image generation tool
  • Generate 4 icons: Ranged, Slayer, Fletching, Crafting
  • Export as proper PNG (not WebP)
  • Size: 512x512, transparent background
  • Style: Indian mythology theme
  • Save directly to: assets/logos/
Verification:
file assets/logos/Ranged_icon.png
# Should show: PNG image data

2. Skills Tab Polish

File: skills_ui.rs
  • Add thin XP progress bars below each skill
  • Improve grid spacing (16px gaps)
  • Better level number styling
  • Ensure icons use new assets
Example XP bar code:
let xp_progress = (current_xp - xp_for_current) / (xp_for_next - xp_for_current);
ui.add(egui::ProgressBar::new(xp_progress)
    .desired_height(3.0)
    .fill(egui::Color32::from_rgb(255,200,87)));

3. Combat Tab Improvements

File: mod.rs (lines 460-530, Combat content area)
  • Add weapon icon next to name
  • Improve attack style button layout
  • Better visual hierarchy

4. Tooltip Enhancements

Files: skills_ui.rs, mod.rs
  • Richer orb tooltips (show max values, percentages)
  • Skill tooltips show XP needed for next level
  • Item tooltips in inventory

5. Content Area Padding

File: mod.rs (line 565: content frame)
  • Increase inner margin to 12px
  • Add section separators where appropriate

Deliverables

  • 4 working PNG icons
  • Skills tab with XP bars
  • Improved tooltips
  • Polished content areas

Coordination Points

Shared Constants

Create src/systems/ui/constants.rs:
// Agent 1 creates this file, Agent 2 uses it
pub const COLOR_PRIMARY_BG: egui::Color32 = egui::Color32::from_rgb(25, 28, 45);
pub const COLOR_SECONDARY_BG: egui::Color32 = egui::Color32::from_rgb(40, 44, 60);
pub const COLOR_ACCENT_GOLD: egui::Color32 = egui::Color32::from_rgb(255, 200, 87);
// ... etc

Merge Order

  1. Agent 2 completes asset generation first (no code conflicts)
  2. Agent 1 merges layout changes
  3. Agent 2 merges component polish on top

Testing

Both agents verify:
cargo check --bin legends_client
cargo run --bin legends_client

Timeline

  • Phase 1 (Parallel):
    • Agent 1: Orbs + Colors (30 min)
    • Agent 2: Icons (30 min)
  • Phase 2 (Parallel):
    • Agent 1: Spacing + Tabs (20 min)
    • Agent 2: Skills polish (20 min)
  • Phase 3 (Sequential):
    • Agent 1 merges → Agent 2 merges
Total: ~50 minutes parallel + 10 min merge = 1 hour