Spaces:
Sleeping
Sleeping
| # 🎨 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. | |