ui revamp plan

Guide for ui revamp plan

UI/UX Complete Revamp Plan

Context

After implementing the OSRS-style permanent right panel, user testing revealed critical bugs and UX issues requiring a comprehensive revamp.

User Feedback

Quote: "UI looks massively broken, not enjoying the look and feel. Wear your UX specialist hat and revamp it."

Specific Issues:

Orbs are stretched/elongated (not circular)
Skill icons failed to load (PNG errors)
Overall visual design is poor
Milestone tracker in wrong position

Critical Bugs to Fix

1. Orb Layout (Circular Shape)

Current Issue:

// This doesn't work - orbs stretch horizontally
ui.allocate_space(egui::Vec2::new(50.0, 50.0));

Proposed Fix:

// Option 1: Explicit size constraints
ui.set_min_width(60.0);
ui.set_max_width(60.0);
ui.set_min_height(60.0);
ui.set_max_height(60.0);

// Option 2: Use vertical layout for each orb
ui.vertical(|ui| {
    ui.set_width(60.0);
    ui.set_height(60.0);
    // Orb content
});

// Option 3: Custom painter for perfect circles
let (rect, response) = ui.allocate_exact_size(
    egui::Vec2::splat(60.0),
    egui::Sense::hover()
);
ui.painter().circle_filled(
    rect.center(),
    30.0,
    egui::Color32::from_rgb(220, 53, 69)
);

Recommended: Option 3 (custom painter) for perfect circular control.

2. Icon Loading Failures

Error:

Format error decoding Png: Invalid PNG signature.

Root Cause: Generated images are WebP format but saved with .png extension.

Fix:

Re-generate icons using image generation tool
Explicitly save as PNG format

Verify with file command:

file assets/logos/Ranged_icon.png
# Should output: PNG image data, 512 x 512, ...

Icons to Regenerate:

Ranged_icon.png
Slayer_icon.png
Fletching_icon.png
Crafting_icon.png

3. Milestone Tracker Position

Current: Bottom-right (conflicts with panel)
Required: Top-left corner

File: src/systems/ui/progression_tracker.rs

Change:

// FROM:
.anchor(egui::Align2::RIGHT_BOTTOM, egui::Vec2::new(-10.0, -10.0))

// TO:
.anchor(egui::Align2::LEFT_TOP, egui::Vec2::new(10.0, 10.0))

Visual Design Improvements

Color Palette Refresh

Current Palette (Dull):

Primary BG: rgb(62, 53, 41) - muddy brown
Secondary BG: rgb(40, 35, 30) - dark brown
Orb colors: muted reds/blues

Proposed Palette (Vibrant):

// Background colors
const COLOR_PRIMARY_BG: egui::Color32 = egui::Color32::from_rgb(25, 28, 45);     // Deep indigo
const COLOR_SECONDARY_BG: egui::Color32 = egui::Color32::from_rgb(40, 44, 60);   // Slate
const COLOR_PANEL_BORDER: egui::Color32 = egui::Color32::from_rgb(60, 65, 85);   // Light slate

// Accent colors
const COLOR_ACCENT_GOLD: egui::Color32 = egui::Color32::from_rgb(255, 200, 87);  // Gold
const COLOR_ACCENT_CYAN: egui::Color32 = egui::Color32::from_rgb(13, 202, 240);  // Cyan

// Orb colors (vibrant)
const COLOR_HP: egui::Color32 = egui::Color32::from_rgb(220, 53, 69);            // Vibrant red
const COLOR_PRAYER: egui::Color32 = egui::Color32::from_rgb(13, 202, 240);       // Cyan
const COLOR_ENERGY: egui::Color32 = egui::Color32::from_rgb(123, 237, 159);      // Lime green

Rationale:

Deep indigo/navy: Modern, professional, less muddy
Vibrant orb colors: Clear visual feedback
Gold accents: Matches Indian mythology theme

Typography System

Hierarchy:

// Headings
const HEADING_SIZE: f32 = 16.0;
const HEADING_COLOR: egui::Color32 = COLOR_ACCENT_GOLD;

// Body text
const BODY_SIZE: f32 = 13.0;
const BODY_COLOR: egui::Color32 = egui::Color32::WHITE;

// Labels/secondary
const LABEL_SIZE: f32 = 11.0;
const LABEL_COLOR: egui::Color32 = egui::Color32::from_gray(180);

Usage:

ui.heading(egui::RichText::new("Combat")
    .size(HEADING_SIZE)
    .color(HEADING_COLOR));

ui.label(egui::RichText::new("Level: 3")
    .size(BODY_SIZE)
    .color(BODY_COLOR));

Spacing System

Standardized Spacing:

const SPACING_SMALL: f32 = 8.0;   // Between related elements
const SPACING_MEDIUM: f32 = 12.0; // Between components
const SPACING_LARGE: f32 = 16.0;  // Between sections

Application:

Tab icons: SPACING_MEDIUM (12px)
Section separators: SPACING_LARGE (16px)
Button padding: SPACING_SMALL (8px)

Component Improvements

Orb Design

Enhanced Orb with Glow:

fn render_orb(ui: &mut egui::Ui, value: i32, max: i32, color: egui::Color32, label: &str) {
    let (rect, response) = ui.allocate_exact_size(
        egui::Vec2::splat(60.0),
        egui::Sense::hover()
    );
    
    let painter = ui.painter();
    let center = rect.center();
    
    // Outer glow (if hovered)
    if response.hovered() {
        painter.circle_filled(center, 32.0, color.linear_multiply(0.3));
    }
    
    // Main circle
    painter.circle_filled(center, 28.0, color);
    
    // Inner shadow
    painter.circle_filled(center, 26.0, egui::Color32::from_black_alpha(30));
    
    // Text
    painter.text(
        center,
        egui::Align2::CENTER_CENTER,
        format!("{}", value),
        egui::FontId::proportional(16.0),
        egui::Color32::WHITE
    );
    
    // Label below
    ui.label(egui::RichText::new(label)
        .size(LABEL_SIZE)
        .color(LABEL_COLOR));
    
    // Tooltip
    response.on_hover_text(format!("{}: {}/{} ({}%)", 
        label, value, max, (value * 100 / max)));
}

Tab Button Enhancement

Improved Tab with Hover:

let is_active = ui_state.active_tab == tab;
let is_hovered = false; // Will be set by response

let mut btn = egui::ImageButton::new(egui::load::SizedTexture::new(tex, icon_size));

if is_active {
    btn = btn.tint(egui::Color32::WHITE).frame(true);
} else {
    btn = btn.tint(egui::Color32::from_white_alpha(150)).frame(false);
}

let response = ui.add(btn);

// Hover effect
if response.hovered() {
    // Draw glow border
    let rect = response.rect;
    ui.painter().rect_stroke(
        rect.expand(2.0),
        4.0,
        egui::Stroke::new(2.0, COLOR_ACCENT_GOLD)
    );
}

if response.clicked() {
    ui_state.active_tab = tab;
}

Content Area Enhancements

Skills Tab - XP Progress Bars

Add thin progress bars below each skill:

// After displaying skill level
let current_xp = skills.get_xp(skill_type);
let current_level = skills.get_level(skill_type);
let xp_for_current = Skills::get_xp_for_level(current_level);
let xp_for_next = Skills::get_xp_for_level(current_level + 1);

let progress = if xp_for_next > xp_for_current {
    (current_xp - xp_for_current) as f32 / (xp_for_next - xp_for_current) as f32
} else {
    1.0
};

ui.add(egui::ProgressBar::new(progress)
    .desired_height(3.0)
    .fill(COLOR_ACCENT_GOLD)
    .show_percentage());

Combat Tab - Weapon Icon

Display weapon icon next to name:

ui.horizontal(|ui| {
    // Weapon icon
    if let Some(weapon_icon) = equipped_weapon_icon {
        ui.image(egui::load::SizedTexture::new(weapon_icon, egui::Vec2::new(24.0, 24.0)));
    }
    
    // Weapon name
    ui.label(egui::RichText::new(&interface.name)
        .strong()
        .color(COLOR_ACCENT_GOLD)
        .size(HEADING_SIZE));
});

Parallel Agent Breakdown

Agent 1: Core Layout & Styling

Scope: Layout fixes, color palette, spacing, milestone tracker

Tasks:

Fix orb circular layout (custom painter)
Update color palette throughout
Move milestone tracker to top-left
Standardize spacing system
Add tab hover effects

Files: mod.rs, progression_tracker.rs

Agent 2: Assets & Content Polish

Scope: Icon generation, skills improvements, tooltips