ui phase2 requirements

Guide for ui phase2 requirements

UI Phase 2 Requirements - OSRS-Style Layout Redesign

Purpose

This document captures user feedback and requirements for the second phase of UI improvements, focusing on a complete layout redesign to match OSRS's permanent right-side panel architecture.

User Feedback Summary (Steps 670-694)

Issues Reported

  1. Empty Tabs
    • Quests tab is empty
    • Settings tab is empty
    • Prayer tab is missing content (but correct structure)
  2. Broken Layouts
    • Equipment shows up in backpack
    • Equipment/Inventory UI looks broken
  3. Missing/Broken Icons
    • Ranged icon broken
    • Slayer icon broken
    • Fletching icon broken
    • Crafting icon broken
    • Requirement: Generate new icons with white background, extract to transparent PNG
  4. Behavior Issues
    • Chat should not be shown in offline version
    • Clicking an open menu item again should hide the menu (toggle behavior)
  5. Skills Tab UX
    • User feedback: "I don't like the UX of the skills tab"
    • Current implementation: Compact grid with Level/Level display
    • Needs redesign as part of overall layout overhaul
  6. Prayer Naming Clarification
    • User stated: "Prayer tab is correct, it need not be named Tapasya"
    • Revert: Keep "Prayer" as the skill name (don't rename to Tapasya)

Major Redesign Request: OSRS-Style Permanent Right Panel

Current Layout (Floating Panel)

┌─────────────────────────────────────┐
│                                     │
│         Game World                  │
│                                     │
│                                     │
│                                     │
│                                     │
│                                     │
│                                     │
│                                     │
│                                     │
│                                     │
│                                     │
│                                     │
│                                     │
└─────────────────────────────────────┘
                              ┌────────┐
                              │ Tabs   │
                              │ [Icon] │
                              │ [Icon] │
                              │ [Icon] │
                              │ [Icon] │
                              └────────┘
                              ┌────────────┐
                              │  Content   │
                              │            │
                              │            │
                              └────────────┘
Problems:
  • Panel floats over game world
  • Takes up screen space when open
  • Inconsistent with OSRS UX expectations

Requested Layout (OSRS-Style Permanent Panel)

┌──────────────────────────────┬──────────────┐
│                              │  Minimap     │
│                              │              │
│         Game World           ├──────────────┤
│                              │ ⚡ HP  🙏 Pray│
│                              │ Orbs         │
│                              ├──────────────┤
│                              │ [I] [E] [P] [M]│ ← Top row tabs
│                              ├──────────────┤
│                              │              │
│                              │   Content    │
│                              │   Area       │
│                              │              │
│                              ├──────────────┤
│                              │ [C] [S] [Q] [⚙]│ ← Bottom row tabs
└──────────────────────────────┴──────────────┘
Layout Structure (Top to Bottom):
  1. Minimap (top)
  2. Orbs (HP, Prayer, Energy/Special Attack)
  3. Top Row Menu Tabs (4 tabs)
  4. Content Area (shows active tab content)
  5. Bottom Row Menu Tabs (4 tabs)
Key Characteristics:
  • Always visible (permanent fixture)
  • Fixed width (e.g., 245px)
  • Right-aligned to screen edge
  • Game world adjusts to left of panel (doesn't overlap)

Implementation Requirements

1. Icon Generation

Broken Icons to Regenerate:
  • Ranged
  • Slayer
  • Fletching
  • Crafting
Process:
  1. Generate icons with white background
  2. Extract/remove background to make transparent
  3. Save as PNG
  4. Place in assets/logos/ directory
  5. Update asset loading in src/systems/ui/mod.rs
Style Guidelines:
  • Match Indian mythology aesthetic (game theme)
  • Consistent size (ideally 32x32 or 64x64)
  • Clear, recognizable symbols
  • Transparent background

2. Layout Redesign

File to Modify: src/systems/ui/mod.rs
Changes Required:

A. Remove Floating Window

// OLD: Floating window with anchor
egui::Window::new("Menu")
    .anchor(egui::Align2::RIGHT_BOTTOM, egui::Vec2::new(-10.0, -10.0))
    .fixed_size(egui::Vec2::new(245.0, 310.0))
    // ...

// NEW: Fixed right-side panel
egui::SidePanel::right("game_menu")
    .exact_width(245.0)
    .resizable(false)
    .show(ctx, |ui| {
        // Panel content
    });

B. Panel Structure

egui::SidePanel::right("game_menu")
    .exact_width(245.0)
    .show(ctx, |ui| {
        // 1. Minimap
        render_minimap_widget(ui);
        
        ui.separator();
        
        // 2. Orbs (HP, Prayer, Energy)
        render_orbs(ui, player_stats);
        
        ui.separator();
        
        // 3. Top Row Tabs (4 buttons)
        ui.horizontal(|ui| {
            for tab in [Inventory, Equipment, Prayer, Magic] {
                if ui.add(tab_button(tab)).clicked() {
                    ui_state.active_tab = tab;
                }
            }
        });
        
        ui.separator();
        
        // 4. Content Area (scrollable)
        egui::ScrollArea::vertical().show(ui, |ui| {
            render_active_tab_content(ui, ui_state.active_tab);
        });
        
        ui.separator();
        
        // 5. Bottom Row Tabs (4 buttons)
        ui.horizontal(|ui| {
            for tab in [Combat, Stats, Quests, Settings] {
                if ui.add(tab_button(tab)).clicked() {
                    ui_state.active_tab = tab;
                }
            }
        });
    });

C. Minimap Integration

  • Use existing MinimapPlugin rendering
  • Embed minimap texture in top section of panel
  • Fixed size (e.g., 200x200)

D. Orbs Implementation

fn render_orbs(ui: &mut egui::Ui, stats: &PlayerStats) {
    ui.horizontal(|ui| {
        // HP Orb
        render_orb(ui, "HP", stats.hp, stats.max_hp, egui::Color32::RED);
        
        // Prayer Orb
        render_orb(ui, "Prayer", stats.prayer, stats.max_prayer, egui::Color32::LIGHT_BLUE);
        
        // Energy/Special Orb (future)
        // render_orb(ui, "Energy", stats.energy, 100, egui::Color32::YELLOW);
    });
}

fn render_orb(ui: &mut egui::Ui, label: &str, current: i32, max: i32, color: egui::Color32) {
    ui.vertical(|ui| {
        // Circular progress indicator
        let radius = 20.0;
        let center = ui.cursor().min + egui::vec2(radius, radius);
        let painter = ui.painter();
        
        // Background circle
        painter.circle_filled(center, radius, egui::Color32::from_gray(50));
        
        // Progress arc
        let progress = current as f32 / max as f32;
        // ... draw arc based on progress
        
        // Text overlay
        painter.text(
            center,
            egui::Align2::CENTER_CENTER,
            format!("{}", current),
            egui::FontId::proportional(12.0),
            egui::Color32::WHITE,
        );
        
        ui.label(label);
    });
}

3. Tab Content Population

Quests Tab

UiTab::Quests => {
    ui.heading("Quests");
    ui.separator();
    
    // Access quest data (need to add to UiParams)
    if let Some(active_quests) = quest_data {
        for quest in &active_quests.active {
            ui.label(&quest.name);
            // Show progress, objectives
        }
    }
    
    ui.separator();
    ui.label("Completed Quests:");
    // List completed quests
}

Settings Tab

UiTab::Settings => {
    ui.heading("Settings");
    ui.separator();
    
    ui.label("Audio");
    ui.add(egui::Slider::new(&mut settings.volume, 0.0..=1.0).text("Volume"));
    
    ui.separator();
    ui.label("Graphics");
    ui.checkbox(&mut settings.vsync, "VSync");
    
    ui.separator();
    if ui.button("Logout").clicked() {
        // Send logout event
    }
}

Prayer Tab

UiTab::Prayer => {
    ui.heading("Prayers");
    ui.separator();
    
    // Grid of prayer icons
    egui::Grid::new("prayer_grid")
        .spacing(egui::vec2(4.0, 4.0))
        .show(ui, |ui| {
            for (i, prayer) in prayers.iter().enumerate() {
                render_prayer_button(ui, prayer);
                if (i + 1) % 3 == 0 {
                    ui.end_row();
                }
            }
        });
}

4. Equipment/Inventory Fix

Current Issue: Equipment items showing in backpack, layout broken.
Root Cause: Likely in inventory_ui.rs - the horizontal split between Equipment and Inventory may not be rendering correctly.
Investigation Needed:
  1. Check render_inventory_tab function
  2. Verify Equipment query is working
  3. Ensure equipment slots are rendering in left panel
  4. Ensure inventory grid is rendering in right panel
Potential Fix:
// src/systems/ui/inventory_ui.rs
pub fn render_inventory_tab(...) {
    ui.horizontal(|ui| {
        // LEFT: Equipment Panel
        ui.vertical(|ui| {
            ui.set_width(100.0); // Fixed width
            ui.label("Equipment");
            render_equipment_slots(ui, equip, ...);
        });
        
        ui.separator();
        
        // RIGHT: Inventory Panel
        ui.vertical(|ui| {
            ui.label("Backpack");
            egui::Grid::new("inventory_grid")
                .show(ui, |ui| {
                    // 4x7 grid
                });
        });
    });
}

5. Menu Toggle Behavior

Requirement: Clicking an active tab button should close the menu.
Current Implementation: Menu is always open (permanent panel in new design).
Revised Requirement: Since panel is permanent, toggle behavior may not apply. However, if user wants collapsible panel:
// Add to UiState
pub struct UiState {
    pub active_tab: UiTab,
    pub panel_open: bool, // NEW
}

// In tab button click handler
if ui.add(tab_button(tab)).clicked() {
    if ui_state.active_tab == tab {
        ui_state.panel_open = !ui_state.panel_open; // Toggle
    } else {
        ui_state.active_tab = tab;
        ui_state.panel_open = true;
    }
}

// Only show panel if open
if ui_state.panel_open {
    egui::SidePanel::right("game_menu")
        // ...
}
Note: OSRS doesn't collapse the panel, so this may not be needed.

6. Chat Visibility

Requirement: Hide chat in offline mode.
Implementation:
// Check for multiplayer/online state
let is_online = game_state.get() == &GameState::Login || network_client.is_some();

if is_online {
    egui::Window::new("Chat")
        .anchor(egui::Align2::LEFT_BOTTOM, egui::Vec2::new(10.0, -10.0))
        .show(ctx, |ui| {
            // Chat UI
        });
}
Alternative: Add a show_chat field to UiState and toggle it based on game mode.

Testing Checklist

  • All broken icons load correctly (Ranged, Slayer, Fletching, Crafting)
  • Right panel is always visible and fixed width
  • Minimap renders at top of panel
  • Orbs display HP and Prayer correctly
  • Top row tabs (Inventory, Equipment, Prayer, Magic) work
  • Bottom row tabs (Combat, Stats, Quests, Settings) work
  • Content area shows correct tab content
  • Quests tab shows active and completed quests
  • Settings tab has functional controls
  • Prayer tab shows prayer grid
  • Equipment/Inventory layout is correct (no overlap)
  • Chat is hidden in offline mode
  • Game world adjusts to left of panel (no overlap)

Design Decisions

Why Permanent Panel?

  1. OSRS Familiarity: Players expect this layout from RuneScape
  2. Consistent Access: Always-visible UI reduces clicks
  3. Screen Real Estate: Dedicated space prevents overlap with game world
  4. Information Density: Minimap + Orbs + Tabs in one cohesive panel

Why Two Rows of Tabs?

  1. 8 Total Tabs: Too many for single row at 245px width
  2. Logical Grouping:
    • Top row: Inventory-related (items, equipment, prayers, magic)
    • Bottom row: Information/Settings (combat, stats, quests, settings)
  3. OSRS Standard: Matches player expectations

Why Orbs?

  1. Quick Reference: See HP/Prayer at a glance without opening tabs
  2. Visual Feedback: Color-coded progress indicators
  3. OSRS Standard: Iconic UI element from RuneScape

Related Documents