# 🎨 MazeBench UI Visual Guide This document describes the visual layout and design of the custom MazeBench frontend. ## 🖼️ Overall Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ HEADER │ │ ❄️ MAZE BENCH ENVIRONMENT │ │ ICE SLIDING PUZZLE │ └─────────────────────────────────────────────────────────────┘ ┌──────────┬─────────────────────────────┬──────────────────┐ │ │ │ │ │ LEFT │ CENTER │ RIGHT │ │ PANEL │ PANEL │ PANEL │ │ │ │ │ │ Controls │ Game Board │ Telemetry │ │ D-Pad │ │ Live Stats │ │ Status │ [Maze Grid Display] │ Rewards │ │ │ │ Observation │ │ │ │ Move History │ │ │ │ │ └──────────┴─────────────────────────────┴──────────────────┘ ``` ## 📐 Detailed Layout ### Header Section ``` ┌─────────────────────────────────────────────────────────────┐ │ │ │ ❄️ MAZE BENCH ENVIRONMENT │ │ (2.5rem, 900 weight, letter-spacing: 3px) │ │ │ │ ICE SLIDING PUZZLE │ │ (0.9rem, 700 weight, letter-spacing: 4px) │ │ │ └─────────────────────────────────────────────────────────────┘ ``` - Background: Linear gradient (dark blue shades) - Border: 1px solid line color - Text: White with blue glow shadow - Center aligned, full width --- ### Left Panel (320px wide) #### 1. Controls Section ``` ┌──────────────────────────┐ │ CONTROLS │ ← Section title ├──────────────────────────┤ │ ┌─────────┬─────────┐ │ │ │ 🔄 │ 📊 │ │ │ │ RESET │ STATE │ │ ← Two buttons │ └─────────┴─────────┘ │ └──────────────────────────┘ ``` - Buttons: Gradient backgrounds, hover lift effect - Icons: Emoji for visual identity - Grid layout: 2 columns #### 2. Level Selection ``` ┌──────────────────────────┐ │ LEVEL SELECTION │ ├──────────────────────────┤ │ Choose Level (1-30) │ │ ┌─────────────────────┐ │ │ │ Level 0 ▼ │ │ ← Dropdown │ └─────────────────────┘ │ └──────────────────────────┘ ``` - Dropdown: Custom styled select - Arrow icon: Blue chevron - 30 level options (0-29) #### 3. Direction Pad ``` ┌──────────────────────────┐ │ DIRECTION PAD │ │ Use arrow keys or WASD │ ← Hint text ├──────────────────────────┤ │ ╔═══╗ │ │ ║ ▲ ║ │ ← Up button │ ╚═══╝ │ │ ╔═══╗ ╔═══╗ ╔═══╗ │ │ ║ ◀ ║ ║ • ║ ║ ▶ ║ │ ← Left, Center, Right │ ╚═══╝ ╚═══╝ ╚═══╝ │ │ ╔═══╗ │ │ ║ ▼ ║ │ ← Down button │ ╚═══╝ │ └──────────────────────────┘ ``` - 3x3 grid layout - Corner slots: Empty dashed borders - Center: Static core (non-interactive) - Arrows: Large, bold, blue colored - Hover: Lifts up with glow effect #### 4. Session Status ``` ┌──────────────────────────┐ │ SESSION STATUS │ ├──────────────────────────┤ │ ⚡ Ready to start... │ ← Icon + message └──────────────────────────┘ ``` - Icon changes based on state - Dark inset background - Updates with each action --- ### Center Panel (Flexible width, ~600px) #### Game Board Area ``` ┌────────────────────────────────────┐ │ │ │ ┌────────────────────────────┐ │ │ │ # # # # # # # # # # │ │ │ │ # . . . . . . . . # │ │ │ │ # . . . . . . . . # │ │ │ │ # . . a . . . . . # │ │ ← Maze grid │ │ # . . . . . . . . # │ │ (48px cells) │ │ # . . . . . . e . # │ │ │ │ # . . . . . . . . # │ │ │ │ # # # # # # # # # # │ │ │ └────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ ✨ PUZZLE SOLVED ✨ │ │ ← Solved banner │ └─────────────────────────────┘ │ (if completed) │ │ └────────────────────────────────────┘ ``` **Cell Types:** - `#` Wall: Blue gradient, inset shadow - `.` Path: Dark blue, flat - `e` Exit: Green tint, rotating diamond ◇ - `a` Agent: Glowing blue orb ● - `b` Agent on Exit: Blue orb on green background **Animations:** - Exit diamond pulses (scale + opacity) - Agent orb glows (shadow intensity) - Board fades in on load - Solved banner slides up with celebration --- ### Right Panel (380px wide) #### 1. Live Stats ``` ┌──────────────────────────────┐ │ TELEMETRY │ ├──────────────────────────────┤ │ LIVE STATS │ ├──────────────────────────────┤ │ ┌──────────────────────────┐ │ │ │ Level │ │ │ │ 5 │ │ ← Full width │ └──────────────────────────┘ │ │ ┌────────────┬─────────────┐ │ │ │ Moves │ Status │ │ │ │ 12/50 │ RUNNING │ │ ← 2 columns │ └────────────┴─────────────┘ │ └──────────────────────────────┘ ``` - Grid layout: 1 full + 2 half columns - Values: Large, bold font - Status: Blue (running) or Green (solved) #### 2. Rewards Panel ``` ┌──────────────────────────────┐ │ ┌────────────┬─────────────┐ │ │ │ Total Rew. │ Last Step │ │ │ │ +2.340 │ -0.010 │ │ ← Large numbers │ └────────────┴─────────────┘ │ │ │ │ Recent step rewards │ │ (newest → oldest) │ │ ┌──┬──┬──┬──┬──┬──┬──┬──┐ │ │ │+1│-1│+0│-1│+2│-1│+0│-1│ │ ← Pill chips │ └──┴──┴──┴──┴──┴──┴──┴──┘ │ └──────────────────────────────┘ ``` - Total: Large (1.8rem), green/red colored - Step: Medium (1.4rem), green/red/gray - Chips: Rounded pills, last 8 rewards - Colors: Green (+), Red (-), Gray (0) #### 3. Observation Panel ``` ┌──────────────────────────────┐ │ OBSERVATION │ ├──────────────────────────────┤ │ ┌──────────────────────────┐ │ │ │ Players │ 1 │ │ │ ├──────────┴───────────────┤ │ │ │ Agent Pos│ [[3,4]] │ │ ← Monospace │ ├──────────┴───────────────┤ │ │ │ Exit Pos │ [[6,7]] │ │ ← Monospace │ └──────────────────────────┘ │ │ │ │ ┌──────────────────────────┐ │ │ │ 💬 Moved LEFT. Step 12. │ │ ← Message │ └──────────────────────────┘ │ └──────────────────────────────┘ ``` - Key-value pairs - Positions: Monospace font, blue color - Message: Icon + text, slides in #### 4. Move History ``` ┌──────────────────────────────┐ │ MOVE HISTORY — newest left │ │ (showing 10 of 10) │ ├──────────────────────────────┤ │ ┌────────────────────────┐ │ │ │ ▶ ▲ ▲ ▶ ▼ ◀ ▲ ▶ ... │ │ ← Horizontal scroll │ └────────────────────────┘ │ └──────────────────────────────┘ ``` - Horizontal scroll strip - Last 30 moves shown - Arrow icons: ▲ ▼ ◀ ▶ - Recent moves: Bright blue - Old moves: Muted gray --- ## 🎨 Color Palette ### Background Colors ``` Deep: #0d1525 ███ Darkest background BG1: #111827 ███ Primary background BG2: #151e2e ███ Secondary background Panel: #1a2438 ███ Card backgrounds Panel Mid: #1e2a40 ███ Gradient mid-point Panel Inset:#0f1929 ███ Inset areas ``` ### Border & Line Colors ``` Line: #2a3a52 ███ Primary borders Line Soft: #1e2d42 ███ Subtle borders ``` ### Text Colors ``` Text: #c8daf0 ███ Body text Text Head: #e2eeff ███ Headings Muted: #4a6080 ███ Secondary text ``` ### Accent Colors ``` Blue: #38bdf8 ███ Primary actions Blue Bright:#0ea5e9 ███ Buttons Blue Dim: #1e6fa8 ███ Hover states Green: #10b981 ███ Positive/Success Green Dim: #065f46 ███ Green tints Red: #f87171 ███ Negative/Error Amber: #f59e0b ███ Warning Purple: #a78bfa ███ Special states ``` ## 🎭 Visual Effects ### Shadows ```css --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); /* Cards */ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); /* Header */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); /* Buttons */ ``` ### Gradients ```css /* Card backgrounds */ linear-gradient(180deg, #1a2438 0%, #1e2a40 100%) /* Button backgrounds */ linear-gradient(180deg, #1e2a40, #0f1929) /* Primary button */ linear-gradient(135deg, #0ea5e9, #1e6fa8) /* Wall cells */ linear-gradient(135deg, #2563a8, #1a4a80) /* Exit cells */ linear-gradient(180deg, #0a2a1e, #052016) /* Solved banner */ linear-gradient(135deg, #10b981, #059669) ``` ### Animations ```css /* Board appearance */ @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Exit marker pulse */ @keyframes pulse { 0%, 100% { opacity: 1; transform: rotate(45deg) scale(1); } 50% { opacity: 0.7; transform: rotate(45deg) scale(0.95); } } /* Agent glow */ @keyframes glow { 0%, 100% { box-shadow: 0 0 16px rgba(47,143,255,0.6); } 50% { box-shadow: 0 0 24px rgba(47,143,255,0.8); } } /* Solved celebration */ @keyframes celebrate { 0% { transform: scale(0.8) rotate(-5deg); } 50% { transform: scale(1.1) rotate(5deg); } 100% { transform: scale(1) rotate(0deg); } } ``` ### Hover Effects ```css /* Buttons lift on hover */ :hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); } /* Active state scales down */ :active { transform: scale(0.95); } ``` ## 📱 Responsive Breakpoints ```css /* Desktop (default) */ @media (min-width: 1400px) { .mz-container { grid-template-columns: 320px 1fr 380px; } } /* Medium screens */ @media (max-width: 1400px) { .mz-container { grid-template-columns: 280px 1fr 340px; } } /* Mobile/Tablet */ @media (max-width: 1024px) { .mz-container { grid-template-columns: 1fr; } /* Stacks panels vertically */ } /* Small mobile */ @media (max-width: 768px) { .mz-title { font-size: 1.8rem; } .board-cell { width: 40px; height: 40px; } } ``` ## 🎯 Interactive States ### Button States 1. **Default**: Gradient background, subtle shadow 2. **Hover**: Lifts up 2px, stronger shadow, blue border 3. **Active**: Scales down to 0.95, immediate feedback 4. **Disabled**: 50% opacity, no pointer events ### Cell States - **Wall**: Static, inset shadow - **Path**: Static - **Exit**: Pulsing diamond animation (2s loop) - **Agent**: Glowing orb animation (1.5s loop) ### Status Messages - **Success**: ✅ Green checkmark - **Action**: 🎮 Game controller - **Info**: ℹ️ Information - **Error**: ❌ Red X - **Loading**: ⚡ Lightning bolt ## 🖱️ Interaction Feedback ### Visual Feedback Timeline ``` Click Button ↓ (0ms) Button scales down (transform: scale(0.95)) ↓ (10ms) API call initiated ↓ (150ms) Button disabled (opacity: 0.5) ↓ (200-500ms) API response received ↓ (0ms) Board updates (fade in animation) Stats update (instant) Rewards update (instant) History updates (slide in) ↓ (300ms) Button re-enabled Animation complete ``` ### Loading States ``` Action Initiated ↓ Loading overlay appears (backdrop blur) Spinner starts rotating Buttons disabled ↓ Action completes ↓ Loading overlay fades out Buttons re-enabled Status updated ``` --- ## 📋 Typography Scale ``` Title: 2.5rem / 900 weight ❄️ MAZE BENCH ENVIRONMENT Subtitle: 0.9rem / 700 weight ICE SLIDING PUZZLE Section: 1rem / 900 weight TELEMETRY Section Small: 0.75rem / 900 weight LIVE STATS Reward Total: 1.8rem / 900 weight +2.340 Reward Step: 1.4rem / 900 weight -0.010 Stat Value: 1.1rem / 800 weight 12/50 Body: 0.85rem / 700 weight Regular text Small: 0.7rem / 700 weight Hints, labels Tiny: 0.65rem / 900 weight UPPERCASE LABELS ``` --- This visual guide describes the complete layout and design system of the MazeBench custom frontend. Every element has been carefully crafted for optimal user experience and aesthetic appeal.