Phase 2 complete
This commit is contained in:
Aodhan Collins
654
docs/reference/UI_DESIGN_PROMPTS.md
Normal file
654
docs/reference/UI_DESIGN_PROMPTS.md
Normal file
@@ -0,0 +1,654 @@
|
||||
# UI Design Prompts - Ready to Use
|
||||
|
||||
**Purpose:** Copy-paste prompts for UI design LLMs (v0.dev, Midjourney, etc.)
|
||||
**Date:** October 12, 2025
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Base Prompt Template
|
||||
|
||||
```
|
||||
Design a modern dark-themed web application interface for a tabletop RPG storytelling platform.
|
||||
|
||||
Visual Style:
|
||||
- Dark theme with purple gradient accents (#667eea to #764ba2)
|
||||
- Card-based layout with rounded corners (8-12px radius)
|
||||
- Smooth shadows for depth and elevation
|
||||
- Clean, modern sans-serif typography
|
||||
- RPG fantasy aesthetic with subtle magical elements
|
||||
|
||||
Color Palette:
|
||||
- Background: Deep dark blue (#1a1a2e, #16213e)
|
||||
- Surface: Dark slate (#2d3748)
|
||||
- Primary: Purple gradient (#667eea to #764ba2)
|
||||
- Text: White/light gray (#ffffff, #e2e8f0)
|
||||
- Accent: Bright purple (#667eea)
|
||||
|
||||
Design Principles:
|
||||
- Clear visual hierarchy
|
||||
- Generous white space
|
||||
- Accessible contrast ratios
|
||||
- Smooth animations and transitions
|
||||
- Mobile-responsive design
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📄 Prompt 1: Session Setup / Landing Page
|
||||
|
||||
```
|
||||
Create a modern dark-themed landing page for an RPG storytelling web app called "Storyteller RPG"
|
||||
|
||||
Page Components:
|
||||
1. Header Section:
|
||||
- Large app title with dice emoji (🎭 Storyteller RPG)
|
||||
- Subtitle: "Private character-storyteller interactions"
|
||||
- Centered layout
|
||||
|
||||
2. Demo Session Card:
|
||||
- Title: "🎲 Demo Session - The Cursed Tavern"
|
||||
- Short description text
|
||||
- Three horizontally arranged buttons:
|
||||
* "🎲 Join as Storyteller" (primary gradient button)
|
||||
* "⚔️ Play as Bargin (Dwarf Warrior)" (character button)
|
||||
* "🏹 Play as Willow (Elf Ranger)" (character button)
|
||||
- Gradient background (gold #ffd89b to teal #19547b)
|
||||
- Rounded corners with padding
|
||||
|
||||
3. Divider:
|
||||
- Horizontal line with centered text "OR CREATE YOUR OWN"
|
||||
|
||||
4. Create Session Section:
|
||||
- White card with shadow
|
||||
- Title: "Create New Session"
|
||||
- Description: "Start a new game as the storyteller"
|
||||
- Text input field for session name
|
||||
- Full-width primary button: "Create Session"
|
||||
|
||||
5. Divider:
|
||||
- Horizontal line with "OR"
|
||||
|
||||
6. Join Session Section:
|
||||
- White card with shadow
|
||||
- Title: "Join Existing Session"
|
||||
- Form with inputs:
|
||||
* Session ID field
|
||||
* Character name field
|
||||
* Character description textarea
|
||||
* Personality textarea (optional)
|
||||
* Model selector dropdown
|
||||
- Large gradient button: "✨ Create Character (Wizard)"
|
||||
- Secondary toggle: "↓ Quick Create"
|
||||
|
||||
Visual Style:
|
||||
- Purple gradient background for page
|
||||
- White content cards with soft shadows
|
||||
- Centered layout, max-width 600px
|
||||
- Generous padding and spacing
|
||||
- Modern, clean, inviting design
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📄 Prompt 2: Character View (Player Interface)
|
||||
|
||||
```
|
||||
Design a dark-themed character view interface for a player in an RPG session
|
||||
|
||||
Layout Structure:
|
||||
- Full-height application with header, scrollable content, and fixed message composer
|
||||
|
||||
Components:
|
||||
|
||||
1. Character Header (Dark gradient #2d3748):
|
||||
- Left side:
|
||||
* Character name (large, white)
|
||||
* Character description (gray text)
|
||||
* Personality trait with emoji (🎭)
|
||||
* Three profile badges: Race | Class | Personality
|
||||
(Pills with purple accent color)
|
||||
- Right side:
|
||||
* Export button (📥 Export) with subtle purple background
|
||||
* Connection status indicator:
|
||||
- Green dot "● Connected" when active
|
||||
- Gray dot "○ Disconnected" when offline
|
||||
|
||||
2. Current Scene Card (if active):
|
||||
- Highlighted card with scene icon (📜)
|
||||
- Title: "Current Scene"
|
||||
- Scene description text
|
||||
- Distinct background color from messages
|
||||
|
||||
3. Two-Column Content Area:
|
||||
|
||||
Left Column - Public Messages Feed:
|
||||
- Title: "📢 Public Actions (All Players See)"
|
||||
- Message cards with:
|
||||
* Sender name/icon
|
||||
* Message content
|
||||
* Timestamp
|
||||
* Light background with left purple border accent
|
||||
|
||||
Right Column - Private Conversation:
|
||||
- Title: "💬 Private Conversation with Storyteller"
|
||||
- Chat-style message bubbles:
|
||||
* Character messages: Right-aligned, purple gradient
|
||||
* Storyteller messages: Left-aligned, darker color
|
||||
* Timestamps below each message
|
||||
- Auto-scroll to bottom
|
||||
|
||||
4. Message Composer (Fixed Bottom):
|
||||
- Visibility dropdown selector (Private | Public | Mixed)
|
||||
- For "Mixed" mode:
|
||||
* Two textareas stacked:
|
||||
- "Public action (all players see)..."
|
||||
- "Private action (only storyteller sees)..."
|
||||
* "Send Mixed Message" button
|
||||
- For simple mode:
|
||||
* Single input field (placeholder changes by visibility)
|
||||
* "Send" button
|
||||
- Elevated shadow, dark background
|
||||
|
||||
Visual Style:
|
||||
- Dark theme throughout
|
||||
- Purple accent colors for character messages
|
||||
- Clear visual separation between public and private
|
||||
- Smooth scrolling
|
||||
- Professional messaging interface aesthetic
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📄 Prompt 3: Character Creation Wizard
|
||||
|
||||
```
|
||||
Design a beautiful multi-step character creation wizard modal for an RPG application
|
||||
|
||||
Modal Structure:
|
||||
- Full-screen dark overlay (semi-transparent)
|
||||
- Centered wizard container (max 800px wide)
|
||||
- Dark gradient background (#1a1a2e to #16213e)
|
||||
- Rounded corners with border
|
||||
|
||||
Components:
|
||||
|
||||
1. Wizard Header:
|
||||
- Large title: "Create Your Character"
|
||||
- Progress indicator: 6 step pills arranged horizontally
|
||||
* "1. Basic Info" | "2. Description" | "3. Race & Class" | "4. Personality" | "5. AI Model" | "6. Review"
|
||||
* Active step: Purple gradient background, white text
|
||||
* Inactive steps: Muted gray background, gray text
|
||||
* Completed steps: Dimmed purple
|
||||
- Steps wrap on mobile
|
||||
|
||||
2. Content Area (Changes per step):
|
||||
|
||||
Step 1 - Basic Info:
|
||||
- Text input: "Character Name" (with autofocus glow)
|
||||
- Dropdown: "Gender" (Male, Female, Non-binary, Custom)
|
||||
- Import section:
|
||||
* Light text: "💡 Have an existing character?"
|
||||
* Button: "📥 Import from JSON" (outlined style)
|
||||
|
||||
Step 3 - Race & Class (example):
|
||||
- Grid of 5 selection cards (2-3 columns responsive)
|
||||
- Each card:
|
||||
* Race/Class name (bold white)
|
||||
* Short description (gray)
|
||||
* Unselected: Dark background, light border
|
||||
* Selected: Purple gradient background, bright border, slight shadow
|
||||
* Hover: Lift effect with shadow
|
||||
- Two sections: Race cards, then Class cards
|
||||
|
||||
Step 6 - Review:
|
||||
- Preview card with sections:
|
||||
* Basic Information (list of key-value pairs)
|
||||
* Description (paragraph)
|
||||
* Background (if provided)
|
||||
* AI Model
|
||||
- Summary box at bottom:
|
||||
* Purple gradient background
|
||||
* "Character Summary" heading
|
||||
* Natural language sentence about the character
|
||||
|
||||
3. Wizard Footer:
|
||||
- Left: "Cancel" button (secondary)
|
||||
- Right: Navigation buttons
|
||||
* "← Back" (secondary, only shows steps 2-6)
|
||||
* "Next →" (primary purple gradient, steps 1-5)
|
||||
* "✨ Create Character" (primary gradient, step 6)
|
||||
|
||||
Animations:
|
||||
- Step content fades in with slight upward movement
|
||||
- Card selection: Scale transform + glow
|
||||
- Progress indicator: Smooth transitions
|
||||
- Button hovers: Elevation effect
|
||||
|
||||
Visual Style:
|
||||
- Dark, immersive wizard experience
|
||||
- Purple accent throughout
|
||||
- Clear visual hierarchy
|
||||
- Smooth, modern interactions
|
||||
- Feels guided and professional
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📄 Prompt 4: Storyteller View Dashboard
|
||||
|
||||
```
|
||||
Design a comprehensive storyteller dashboard for managing an RPG game session
|
||||
|
||||
Layout:
|
||||
- Sidebar + main content area (grid layout)
|
||||
- Dark theme with purple accents
|
||||
|
||||
Components:
|
||||
|
||||
1. Header Bar:
|
||||
- Session name (large white text)
|
||||
- Session ID with copy button
|
||||
- "Generate Contextual Response" button (purple gradient)
|
||||
- Connection status indicator
|
||||
|
||||
2. Left Sidebar - Character List:
|
||||
- Title: "Characters in Session"
|
||||
- Scrollable character cards (one per character):
|
||||
* Character name (white)
|
||||
* Small profile badges (Race | Class | Personality)
|
||||
* "Needs Response" red indicator (if pending)
|
||||
* Hover: Light background
|
||||
* Selected: Purple left border + highlighted background
|
||||
- Empty state: "No characters yet" with muted text
|
||||
|
||||
3. Main Content Area - Tabs:
|
||||
|
||||
Tab 1 - Public Actions Feed:
|
||||
- Title: "📢 Recent Public Actions"
|
||||
- Timeline/feed of public messages:
|
||||
* Character avatar/icon
|
||||
* Character name
|
||||
* Action text
|
||||
* Timestamp
|
||||
* Compact card style with left accent
|
||||
|
||||
Tab 2 - Character Conversation (selected character):
|
||||
- Character header showing their profile
|
||||
- Message thread (scrollable):
|
||||
* Character messages (left-aligned)
|
||||
* Storyteller responses (right-aligned, purple)
|
||||
* Timestamps
|
||||
- Response composer section:
|
||||
* Large textarea "Write your response..."
|
||||
* "✨ AI Suggest" button (secondary)
|
||||
* "Send Private Response" button (primary)
|
||||
|
||||
Tab 3 - Scene Narration:
|
||||
- Title: "📜 Broadcast Scene to All Players"
|
||||
- Large textarea for scene description
|
||||
- Context options:
|
||||
* Character selection checkboxes
|
||||
* Additional context input
|
||||
- "Generate with AI" button (secondary)
|
||||
- "Broadcast Scene" button (primary, large)
|
||||
|
||||
4. AI Suggestion Panel (conditional):
|
||||
- Appears when "AI Suggest" clicked
|
||||
- Green accent background
|
||||
- Title: "AI-Generated Suggestion"
|
||||
- Editable textarea with generated response
|
||||
- Model indicator (small text)
|
||||
- Action buttons:
|
||||
* "Use This Response" (success green)
|
||||
* "Regenerate" (secondary)
|
||||
* "Cancel" (text button)
|
||||
|
||||
Visual Style:
|
||||
- Dark command center aesthetic
|
||||
- Clear information hierarchy
|
||||
- Easy to scan character list
|
||||
- Comfortable reading for long text
|
||||
- Purple highlights for storyteller actions
|
||||
- Green highlights for AI features
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📄 Prompt 5: Gamemaster Control Panel
|
||||
|
||||
```
|
||||
Design a powerful gamemaster control panel for managing RPG game sessions
|
||||
|
||||
Layout:
|
||||
- Command center dashboard style
|
||||
- Sidebar navigation + main content panels
|
||||
- Dark theme with multiple accent colors
|
||||
|
||||
Components:
|
||||
|
||||
1. Header:
|
||||
- Title: "Gamemaster Control Panel"
|
||||
- Current game indicator (pill badge)
|
||||
- Quick action buttons:
|
||||
* "Create New Game" (purple gradient)
|
||||
* "Load Game" (secondary)
|
||||
* "Save Game" (secondary)
|
||||
|
||||
2. Left Navigation:
|
||||
- Vertical menu with icons:
|
||||
* Dashboard (overview icon)
|
||||
* Games (list icon)
|
||||
* Players (users icon)
|
||||
* Settings (gear icon)
|
||||
- Active item: Purple left border + highlight
|
||||
|
||||
3. Main Content - Game Creation Wizard:
|
||||
|
||||
Step 2 - Player Slots:
|
||||
- Grid of player slot cards (2-3 columns):
|
||||
* Slot number badge (top-right)
|
||||
* Type toggle: Human | AI (switch component)
|
||||
* If Human:
|
||||
- User selector dropdown
|
||||
- Character assignment
|
||||
* If AI:
|
||||
- AI model dropdown
|
||||
- Personality/behavior settings
|
||||
* Drag handle (for reordering)
|
||||
- "Add Slot" button at end
|
||||
|
||||
Each slot card:
|
||||
- Dark background with border
|
||||
- Assigned: Green accent border
|
||||
- Empty: Dashed border
|
||||
- Hover: Lift effect
|
||||
|
||||
4. Main Content - Game Overview Dashboard:
|
||||
- Metric cards row (4 cards):
|
||||
* Active Players (number + icon)
|
||||
* Total Messages (number + icon)
|
||||
* Session Duration (time + icon)
|
||||
* AI Usage Cost ($ + icon)
|
||||
- Current scene card (large, highlighted)
|
||||
- Recent activity feed
|
||||
- Quick actions panel
|
||||
|
||||
5. Role Assignment Interface:
|
||||
- Drag-and-drop layout:
|
||||
* Left: Available players list (cards)
|
||||
* Right: Game slots (drop zones)
|
||||
* Visual feedback during drag
|
||||
- Each player card:
|
||||
* Avatar/icon
|
||||
* Username
|
||||
* Online status
|
||||
* Drag handle
|
||||
|
||||
Visual Style:
|
||||
- Professional dashboard aesthetic
|
||||
- Multiple status colors (green=good, red=alert, yellow=warning)
|
||||
- Clear data visualization
|
||||
- Interactive drag-and-drop
|
||||
- Elevated cards with shadows
|
||||
- Purple primary, green success, red danger
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📄 Prompt 6: Admin Dashboard
|
||||
|
||||
```
|
||||
Design a comprehensive system administration dashboard for monitoring and management
|
||||
|
||||
Layout:
|
||||
- Full-width dashboard with sidebar navigation
|
||||
- Dark theme with data visualization focus
|
||||
|
||||
Components:
|
||||
|
||||
1. Top Header:
|
||||
- Title: "System Administration"
|
||||
- System status indicators (colored dots):
|
||||
* API Status (green/red)
|
||||
* Database (green/red)
|
||||
* WebSocket (green/red)
|
||||
- Global stats (small numbers):
|
||||
* Active Games: 12
|
||||
* Active Users: 48
|
||||
* API Calls Today: 1,234
|
||||
|
||||
2. Sidebar Navigation:
|
||||
- Vertical menu items:
|
||||
* Dashboard (home icon)
|
||||
* Games (controller icon)
|
||||
* Users (people icon)
|
||||
* LLM Config (brain icon)
|
||||
* Analytics (chart icon)
|
||||
* Costs (dollar icon)
|
||||
* Logs (terminal icon)
|
||||
- Active: Purple background + white icon
|
||||
|
||||
3. Dashboard Overview:
|
||||
- 4 metric cards (top row):
|
||||
* Total Games (number, trend arrow, sparkline)
|
||||
* Total Users (number, trend arrow, sparkline)
|
||||
* Today's Cost ($, trend arrow)
|
||||
* System Health (percentage, circular progress)
|
||||
|
||||
- Charts section:
|
||||
* Line chart: "Games Created Over Time" (7 days)
|
||||
* Bar chart: "Model Usage Distribution"
|
||||
* Pie chart: "Cost Breakdown by Model"
|
||||
|
||||
- Recent Activity Feed:
|
||||
* Timeline of recent events
|
||||
* Color-coded by type (create, error, warning)
|
||||
* Timestamps
|
||||
* Quick action buttons
|
||||
|
||||
4. Games Management Table:
|
||||
- Data table with columns:
|
||||
* ID | Name | GM | Players | Status | Created | Actions
|
||||
- Features:
|
||||
* Sort arrows in headers
|
||||
* Search bar (top-right)
|
||||
* Filter chips (by status)
|
||||
* Pagination controls (bottom)
|
||||
- Row actions:
|
||||
* View (eye icon)
|
||||
* Edit (pencil icon)
|
||||
* Delete (trash icon)
|
||||
- Status badges (colored):
|
||||
* Active (green)
|
||||
* Paused (yellow)
|
||||
* Completed (gray)
|
||||
|
||||
5. Cost Analytics View:
|
||||
- Summary cards (top):
|
||||
* This Month ($)
|
||||
* Per Game Average ($)
|
||||
* Most Expensive Model (name + $)
|
||||
- Cost breakdown table:
|
||||
* Model | Calls | Total Cost | Avg Per Call
|
||||
* Sortable columns
|
||||
- Date range picker (top-right)
|
||||
- Export CSV button
|
||||
|
||||
Visual Style:
|
||||
- Professional admin interface
|
||||
- Data-focused with clear metrics
|
||||
- Color-coded status indicators
|
||||
- Clean tables with good readability
|
||||
- Charts with tooltips
|
||||
- Responsive grid layouts
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Specialized Component Prompts
|
||||
|
||||
### Prompt: Message Bubble Component
|
||||
|
||||
```
|
||||
Design a modern chat message bubble component for a dark-themed RPG interface
|
||||
|
||||
Requirements:
|
||||
- Two variants: Character (sent) and Storyteller (received)
|
||||
- Character messages:
|
||||
* Right-aligned
|
||||
* Purple gradient background (#667eea to #764ba2)
|
||||
* White text
|
||||
* Rounded corners (more rounded on left side)
|
||||
* Small shadow
|
||||
- Storyteller messages:
|
||||
* Left-aligned
|
||||
* Dark gray background (#374151)
|
||||
* Light gray text
|
||||
* Rounded corners (more rounded on right side)
|
||||
* Subtle border
|
||||
- Both include:
|
||||
* Message content (wrapped text)
|
||||
* Timestamp (small, muted, below bubble)
|
||||
* Sender name (optional, above bubble)
|
||||
- Smooth entry animation (fade + slide)
|
||||
- Hover: Slight shadow increase
|
||||
```
|
||||
|
||||
### Prompt: Selection Card Component
|
||||
|
||||
```
|
||||
Design an interactive selection card for character race/class/personality selection
|
||||
|
||||
States:
|
||||
1. Default:
|
||||
- Dark background (#2d3748)
|
||||
- Light border (rgba(255,255,255,0.1))
|
||||
- Rounded corners (10px)
|
||||
- Padding: 20px
|
||||
- Content:
|
||||
* Title (bold, white, 16px)
|
||||
* Description (gray, 13px)
|
||||
|
||||
2. Hover:
|
||||
- Background: Slightly lighter
|
||||
- Border: Purple tint
|
||||
- Transform: translateY(-2px)
|
||||
- Shadow: Elevated
|
||||
|
||||
3. Selected:
|
||||
- Background: Purple gradient (subtle)
|
||||
- Border: Bright purple (#667eea)
|
||||
- Shadow: Purple glow
|
||||
- Checkmark icon (top-right corner)
|
||||
|
||||
Animation:
|
||||
- Smooth transition on all state changes
|
||||
- Scale slightly on click
|
||||
- Ripple effect on selection
|
||||
|
||||
Size:
|
||||
- Min width: 200px
|
||||
- Flexible height based on content
|
||||
- Grid-friendly
|
||||
```
|
||||
|
||||
### Prompt: Progress Indicator Component
|
||||
|
||||
```
|
||||
Design a multi-step progress indicator for a wizard interface
|
||||
|
||||
Components:
|
||||
- 6 steps arranged horizontally
|
||||
- Each step:
|
||||
* Number or icon
|
||||
* Label text below
|
||||
* Connecting line to next step
|
||||
|
||||
States per step:
|
||||
1. Completed:
|
||||
- Checkmark icon (white)
|
||||
- Purple filled circle
|
||||
- Purple line to next
|
||||
- Label: Purple, smaller
|
||||
|
||||
2. Active/Current:
|
||||
- Number in white
|
||||
- Purple gradient circle (larger)
|
||||
- Pulsing glow animation
|
||||
- Label: White, bold
|
||||
|
||||
3. Upcoming:
|
||||
- Number in gray
|
||||
- Gray outlined circle
|
||||
- Gray dashed line to next
|
||||
- Label: Gray, normal
|
||||
|
||||
Responsive:
|
||||
- Desktop: Horizontal line
|
||||
- Mobile: Vertical or wrapped
|
||||
|
||||
Visual Style:
|
||||
- Modern, clean
|
||||
- Clear current position
|
||||
- Motivating progress visualization
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📱 Mobile-Specific Prompts
|
||||
|
||||
### Prompt: Mobile Navigation
|
||||
|
||||
```
|
||||
Design a mobile-friendly bottom navigation bar for the RPG app
|
||||
|
||||
Requirements:
|
||||
- Fixed to bottom of screen
|
||||
- Dark background with slight transparency
|
||||
- 4-5 navigation items:
|
||||
* Home/Session (house icon)
|
||||
* Character (person icon)
|
||||
* Messages (chat icon)
|
||||
* More (dots icon)
|
||||
- Active item:
|
||||
* Purple icon color
|
||||
* Label text (white)
|
||||
* Indicator line on top
|
||||
- Inactive items:
|
||||
* Gray icon
|
||||
* Small label (optional)
|
||||
- Badge notifications (red dot on icons)
|
||||
- Safe area insets for iOS
|
||||
- Subtle shadow on top edge
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Using These Prompts
|
||||
|
||||
### With v0.dev (Vercel):
|
||||
```
|
||||
Copy base template + specific page prompt
|
||||
Add: "Generate React/Next.js components with Tailwind CSS"
|
||||
Review generated code and iterate
|
||||
```
|
||||
|
||||
### With Midjourney/DALL-E:
|
||||
```
|
||||
Copy prompt
|
||||
Add: "UI mockup, high fidelity, Figma style"
|
||||
Generate multiple variations
|
||||
Use as design reference
|
||||
```
|
||||
|
||||
### With Claude/GPT:
|
||||
```
|
||||
Copy prompt
|
||||
Add: "Generate HTML/CSS code for this design"
|
||||
or "Create a React component for this"
|
||||
Iterate on the implementation
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**All prompts are ready to copy and use!** Customize colors, spacing, or specific elements as needed.
|
||||
890
docs/reference/UI_ELEMENTS_INVENTORY.md
Normal file
890
docs/reference/UI_ELEMENTS_INVENTORY.md
Normal file
@@ -0,0 +1,890 @@
|
||||
# UI Elements Inventory - Storyteller RPG
|
||||
|
||||
**Purpose:** Comprehensive list of UI elements organized by page for design template generation
|
||||
**Date:** October 12, 2025
|
||||
**Status:** Phase 2 Complete, Planning Phase 3
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Design System Overview
|
||||
|
||||
### Color Palette
|
||||
- **Primary Gradient:** #667eea to #764ba2 (purple gradient)
|
||||
- **Secondary Gradient:** #ffd89b to #19547b (gold to teal)
|
||||
- **Background Dark:** #1a1a2e, #16213e
|
||||
- **Surface Dark:** #2d3748
|
||||
- **Text Light:** #ffffff, #e2e8f0
|
||||
- **Text Muted:** #a0aec0, #718096
|
||||
- **Accent:** #667eea (purple)
|
||||
- **Success:** #10b981, #34d399
|
||||
- **Warning:** #f59e0b
|
||||
- **Error:** #ef4444
|
||||
|
||||
### Typography
|
||||
- **Font Family:** -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif
|
||||
- **H1:** 2.5rem, bold
|
||||
- **H2:** 2rem, bold
|
||||
- **H3:** 1.5rem, semibold
|
||||
- **Body:** 1rem
|
||||
- **Small:** 0.875rem
|
||||
|
||||
### Spacing Scale
|
||||
- **xs:** 0.25rem (4px)
|
||||
- **sm:** 0.5rem (8px)
|
||||
- **md:** 1rem (16px)
|
||||
- **lg:** 1.5rem (24px)
|
||||
- **xl:** 2rem (32px)
|
||||
- **2xl:** 3rem (48px)
|
||||
|
||||
### Border Radius
|
||||
- **Small:** 6px
|
||||
- **Medium:** 8px
|
||||
- **Large:** 12px
|
||||
- **XLarge:** 20px
|
||||
|
||||
---
|
||||
|
||||
## 📄 Page 1: Session Setup / Landing Page
|
||||
|
||||
### Purpose
|
||||
Entry point for creating or joining game sessions
|
||||
|
||||
### Layout Structure
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Header (Logo + Title) │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ Demo Session Cards │
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ Create New Session Section │
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ Join Existing Session Section │
|
||||
│ │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### UI Elements
|
||||
|
||||
#### **Header Section**
|
||||
- **App Title:** Large heading with emoji (🎭 Storyteller RPG)
|
||||
- **Subtitle:** Descriptive tagline
|
||||
- **Logo/Icon:** Optional app icon
|
||||
|
||||
#### **Demo Section**
|
||||
- **Section Title:** "🎲 Demo Session - The Cursed Tavern"
|
||||
- **Description Text:** Short description paragraph
|
||||
- **Button Group (3 buttons):**
|
||||
- Storyteller button (🎲 icon, primary style)
|
||||
- Character 1 button (⚔️ icon, character style)
|
||||
- Character 2 button (🏹 icon, character style)
|
||||
- **Visual Style:** Gradient background, rounded corners
|
||||
|
||||
#### **Divider Elements**
|
||||
- **Text Divider:** "OR CREATE YOUR OWN" / "OR"
|
||||
- **Horizontal line with text overlay**
|
||||
|
||||
#### **Create Session Section**
|
||||
- **Section Title:** "Create New Session"
|
||||
- **Section Description:** "Start a new game as the storyteller"
|
||||
- **Input Field:** Text input for session name
|
||||
- **Primary Button:** "Create Session" (full width)
|
||||
- **Visual Style:** White card with shadow
|
||||
|
||||
#### **Join Session Section**
|
||||
- **Section Title:** "Join Existing Session"
|
||||
- **Section Description:** "Play as a character in an ongoing game"
|
||||
- **Form Elements:**
|
||||
- Session ID input field
|
||||
- Character name input field
|
||||
- Character description textarea
|
||||
- Personality traits textarea (optional)
|
||||
- Model selector dropdown (grouped options)
|
||||
- Model hint text
|
||||
- **Action Buttons:**
|
||||
- "✨ Create Character (Wizard)" - Primary gradient button
|
||||
- "↓ Quick Create" toggle - Secondary button
|
||||
- "Join Session (Simple)" - Conditional primary button
|
||||
- **Visual Style:** White card with shadow
|
||||
|
||||
### Responsive Behavior
|
||||
- **Desktop:** Single column, max-width 600px, centered
|
||||
- **Mobile:** Full width, stacked elements
|
||||
|
||||
---
|
||||
|
||||
## 📄 Page 2: Character View (Player Interface)
|
||||
|
||||
### Purpose
|
||||
Interface for players to interact with storyteller and view game state
|
||||
|
||||
### Layout Structure
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ Character Header (Info + Status) │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Current Scene Card (if active) │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────┬─────────────────────────┐ │
|
||||
│ │ Public Messages │ Private Conversation │ │
|
||||
│ │ Feed │ with Storyteller │ │
|
||||
│ │ │ │ │
|
||||
│ │ │ │ │
|
||||
│ └─────────────────┴─────────────────────────┘ │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Message Composer (Bottom) │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### UI Elements
|
||||
|
||||
#### **Character Header**
|
||||
- **Character Name:** Large heading
|
||||
- **Character Description:** Paragraph text
|
||||
- **Personality Trait:** Small text with emoji (🎭)
|
||||
- **Profile Badges:** 3 pill-shaped badges
|
||||
- Race badge
|
||||
- Class badge
|
||||
- Personality type badge
|
||||
- **Action Buttons:**
|
||||
- Export button (📥 Export)
|
||||
- **Status Indicator:** Connection status dot
|
||||
- Connected: Green dot + "● Connected"
|
||||
- Disconnected: Gray dot + "○ Disconnected"
|
||||
- **Visual Style:** Dark gradient background, rounded top corners
|
||||
|
||||
#### **Current Scene Card** (Conditional)
|
||||
- **Section Title:** "📜 Current Scene"
|
||||
- **Scene Text:** Paragraph with scene description
|
||||
- **Visual Style:** Highlighted card, distinct from messages
|
||||
|
||||
#### **Public Messages Section**
|
||||
- **Section Title:** "📢 Public Actions (All Players See)"
|
||||
- **Message List:**
|
||||
- Message bubble/card per public action
|
||||
- Sender indicator (🎭 Public Action / 🎲 Scene)
|
||||
- Message content
|
||||
- Timestamp (small, muted)
|
||||
- **Visual Style:** Light background, left border accent
|
||||
|
||||
#### **Private Conversation Section**
|
||||
- **Section Title:** "💬 Private Conversation with Storyteller"
|
||||
- **Message List:**
|
||||
- Message bubbles alternating left/right
|
||||
- Character messages (right aligned, purple)
|
||||
- Storyteller messages (left aligned, different color)
|
||||
- Timestamps
|
||||
- **Scroll Behavior:** Auto-scroll to bottom on new message
|
||||
|
||||
#### **Message Composer** (Bottom Section)
|
||||
- **Visibility Selector:** Dropdown
|
||||
- Options: Private, Public, Mixed
|
||||
- **Mixed Mode Form:**
|
||||
- Public textarea: "Public action (all players see)..."
|
||||
- Private textarea: "Private action (only storyteller sees)..."
|
||||
- Send button: "Send Mixed Message"
|
||||
- **Simple Mode Form:**
|
||||
- Single input field (changes placeholder by visibility)
|
||||
- Send button
|
||||
- **Visual Style:** Fixed to bottom, elevated shadow
|
||||
|
||||
### Component States
|
||||
- **Connected State:** Full functionality enabled
|
||||
- **Disconnected State:** Inputs disabled, gray overlay
|
||||
- **Loading State:** Skeleton screens
|
||||
- **Empty State:** "No messages yet" placeholder
|
||||
|
||||
---
|
||||
|
||||
## 📄 Page 3: Character Creation Wizard
|
||||
|
||||
### Purpose
|
||||
Multi-step guided character creation with profile system
|
||||
|
||||
### Layout Structure
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ Wizard Header (Title + Progress) │
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ │
|
||||
│ Step Content Area │
|
||||
│ (Changes per step) │
|
||||
│ │
|
||||
│ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ Footer (Cancel | Back | Next/Create) │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### UI Elements
|
||||
|
||||
#### **Wizard Overlay**
|
||||
- **Full-screen modal:** Dark semi-transparent background
|
||||
- **Centered container:** Max 800px width
|
||||
- **Visual Style:** Dark gradient card with border
|
||||
|
||||
#### **Wizard Header**
|
||||
- **Title:** "Create Your Character" (large heading)
|
||||
- **Progress Indicator:** 6 steps
|
||||
- Step pills showing: "1. Basic Info", "2. Description", etc.
|
||||
- Active step highlighted
|
||||
- Completed steps dimmed
|
||||
- Responsive: Wraps on mobile
|
||||
|
||||
#### **Step 1: Basic Info**
|
||||
- **Step Title:** "Basic Information"
|
||||
- **Input Fields:**
|
||||
- Character name (text input, required, autofocus)
|
||||
- Gender dropdown (4 options)
|
||||
- **Import Section:**
|
||||
- Import hint text: "💡 Have an existing character?"
|
||||
- File upload button: "📥 Import from JSON"
|
||||
- Hidden file input (accepts .json)
|
||||
- **Visual Style:** Form inputs with dark theme
|
||||
|
||||
#### **Step 2: Description**
|
||||
- **Step Title:** "Character Description"
|
||||
- **Input Fields:**
|
||||
- Description textarea (required, 4 rows)
|
||||
- Background textarea (optional, 3 rows)
|
||||
- **Visual Style:** Larger text areas, clear labels
|
||||
|
||||
#### **Step 3: Race & Class**
|
||||
- **Step Title:** "Race & Class"
|
||||
- **Race Selection:**
|
||||
- Label: "Race"
|
||||
- Selection grid (responsive, min 200px cards)
|
||||
- 5 clickable cards:
|
||||
- Race name (bold)
|
||||
- Race description (smaller text)
|
||||
- Selected state: gradient background + border
|
||||
- Hover state: slight elevation
|
||||
- **Class Selection:**
|
||||
- Same layout as Race
|
||||
- 5 class cards
|
||||
- **Visual Style:** Grid layout, interactive cards
|
||||
|
||||
#### **Step 4: Personality**
|
||||
- **Step Title:** "Personality Type"
|
||||
- **Selection Grid:**
|
||||
- 4 personality type cards
|
||||
- Same card style as race/class
|
||||
- **Additional Input:**
|
||||
- "Additional Personality Traits" textarea (optional, 3 rows)
|
||||
- **Visual Style:** Consistent with Step 3
|
||||
|
||||
#### **Step 5: AI Model**
|
||||
- **Step Title:** "AI Model Selection"
|
||||
- **Model Dropdown:**
|
||||
- Large dropdown (bigger padding/font)
|
||||
- Grouped options (OpenAI / OpenRouter)
|
||||
- Shows provider in parentheses
|
||||
- **Help Text:**
|
||||
- "💡 Different models give different personalities!"
|
||||
- Multi-line hint text
|
||||
- **Visual Style:** Prominent dropdown, informative hint
|
||||
|
||||
#### **Step 6: Review**
|
||||
- **Step Title:** "Review Your Character"
|
||||
- **Preview Card:**
|
||||
- Multiple sections with borders between:
|
||||
- Basic Information (name, gender, race, class, personality)
|
||||
- Description
|
||||
- Background (if provided)
|
||||
- Additional Traits (if provided)
|
||||
- AI Model
|
||||
- Summary box at bottom:
|
||||
- Highlighted background
|
||||
- "Character Summary" heading
|
||||
- Natural language summary sentence
|
||||
- **Visual Style:** Clean, organized, easy to scan
|
||||
|
||||
#### **Wizard Footer**
|
||||
- **Button Layout:**
|
||||
- Cancel (left, secondary)
|
||||
- Navigation (right):
|
||||
- Back button (steps 2-6, secondary)
|
||||
- Next button (steps 1-5, primary)
|
||||
- Create button (step 6, primary with sparkles)
|
||||
- **Visual Style:** Fixed footer, clear hierarchy
|
||||
|
||||
### Animation & Transitions
|
||||
- **Step Changes:** Fade in with slight upward movement
|
||||
- **Card Selection:** Transform scale + shadow on selection
|
||||
- **Button Hovers:** Slight elevation, color shift
|
||||
- **Progress Indicator:** Smooth transitions between steps
|
||||
|
||||
---
|
||||
|
||||
## 📄 Page 4: Storyteller View
|
||||
|
||||
### Purpose
|
||||
Interface for storyteller to manage game, view all character actions, and respond
|
||||
|
||||
### Layout Structure
|
||||
```
|
||||
┌──────────────────────────────────────────────────┐
|
||||
│ Header (Session Info + Controls) │
|
||||
├──────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌───────────────┬────────────────────────────┐ │
|
||||
│ │ Character │ Main Content Area: │ │
|
||||
│ │ List │ │ │
|
||||
│ │ (Sidebar) │ - Public Actions Feed │ │
|
||||
│ │ │ - Selected Character View │ │
|
||||
│ │ │ - Scene Narration │ │
|
||||
│ │ │ │ │
|
||||
│ └───────────────┴────────────────────────────┘ │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### UI Elements
|
||||
|
||||
#### **Storyteller Header**
|
||||
- **Session Name:** Large heading
|
||||
- **Session ID:** Copy button with ID
|
||||
- **Control Buttons:**
|
||||
- Generate contextual response button
|
||||
- Other session controls
|
||||
- **Visual Style:** Dark header, elevated
|
||||
|
||||
#### **Character List Sidebar**
|
||||
- **Section Title:** "Characters in Session"
|
||||
- **Character Cards:** (One per character)
|
||||
- Character name
|
||||
- Race/Class/Personality badges
|
||||
- "Needs Response" indicator (conditional)
|
||||
- Click to select
|
||||
- Active state highlighting
|
||||
- **Empty State:** "No characters yet" message
|
||||
- **Visual Style:** Scrollable sidebar, clear selection state
|
||||
|
||||
#### **Public Actions Feed**
|
||||
- **Section Title:** "📢 Recent Public Actions"
|
||||
- **Feed Items:**
|
||||
- Character name/avatar
|
||||
- Public action text
|
||||
- Timestamp
|
||||
- Compact card style
|
||||
- **Visual Style:** Timeline/feed layout
|
||||
|
||||
#### **Character Conversation View**
|
||||
- **Character Header:**
|
||||
- Selected character name
|
||||
- Profile info
|
||||
- **Conversation Thread:**
|
||||
- Message list (character + storyteller messages)
|
||||
- Clear visual distinction between senders
|
||||
- Timestamps
|
||||
- **Response Composer:**
|
||||
- Textarea for response
|
||||
- "✨ AI Suggest" button
|
||||
- "Send Private Response" button
|
||||
- **Visual Style:** Similar to character view but reversed perspective
|
||||
|
||||
#### **AI Suggestion Modal/Section**
|
||||
- **Generated Response Display:**
|
||||
- Title: "AI-Generated Suggestion"
|
||||
- Response content (editable)
|
||||
- Model used indicator
|
||||
- **Action Buttons:**
|
||||
- "Use This Response"
|
||||
- "Regenerate"
|
||||
- "Cancel"
|
||||
- **Visual Style:** Highlighted section, easy to edit
|
||||
|
||||
#### **Scene Narration Section**
|
||||
- **Section Title:** "Broadcast Scene to All Players"
|
||||
- **Input Field:**
|
||||
- Large textarea for scene description
|
||||
- Character count/hint
|
||||
- **Contextual Generation:**
|
||||
- "Generate with AI" button
|
||||
- Character selection checkboxes
|
||||
- Additional context input
|
||||
- **Send Button:** "📜 Broadcast Scene"
|
||||
- **Visual Style:** Prominent, distinct from private responses
|
||||
|
||||
### Responsive Behavior
|
||||
- **Desktop:** Sidebar + main content (grid layout)
|
||||
- **Tablet:** Collapsible sidebar
|
||||
- **Mobile:** Stack vertically, tab navigation
|
||||
|
||||
---
|
||||
|
||||
## 📄 Page 5: Gamemaster Control Panel (Phase 3)
|
||||
|
||||
### Purpose
|
||||
Admin interface to create games, assign roles, and manage session
|
||||
|
||||
### Layout Structure
|
||||
```
|
||||
┌────────────────────────────────────────────┐
|
||||
│ GM Header (Game Info + Quick Actions) │
|
||||
├────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────────┬──────────────────────┐ │
|
||||
│ │ Game │ Main Panel: │ │
|
||||
│ │ Sessions │ │ │
|
||||
│ │ List │ - Game Setup Wizard │ │
|
||||
│ │ │ - Role Assignment │ │
|
||||
│ │ │ - Player Management │ │
|
||||
│ │ │ - Game State View │ │
|
||||
│ │ │ │ │
|
||||
│ └──────────────┴──────────────────────┘ │
|
||||
│ │
|
||||
└────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### UI Elements
|
||||
|
||||
#### **GM Dashboard Header**
|
||||
- **Title:** "Gamemaster Control Panel"
|
||||
- **Active Game Indicator:** Current game name
|
||||
- **Quick Actions:**
|
||||
- "Create New Game" button
|
||||
- "Load Game" button
|
||||
- "Save Game" button
|
||||
- **Visual Style:** Command center aesthetic
|
||||
|
||||
#### **Game Sessions List**
|
||||
- **List Items:** (Per game)
|
||||
- Game name
|
||||
- Status badge (not started, active, paused, completed)
|
||||
- Player count
|
||||
- Created date
|
||||
- Actions: View, Edit, Delete
|
||||
- **Visual Style:** Card list, status colors
|
||||
|
||||
#### **Game Creation Wizard**
|
||||
- **Step 1: Game Info**
|
||||
- Game name input
|
||||
- Scenario/setting textarea
|
||||
- Genre/theme selector
|
||||
- **Step 2: Player Slots**
|
||||
- Slot configuration (number input)
|
||||
- Slot cards:
|
||||
- Slot type (Human/AI toggle)
|
||||
- Player assignment (if human)
|
||||
- AI configuration (if AI)
|
||||
- **Step 3: Storyteller Assignment**
|
||||
- Radio buttons: Human / AI
|
||||
- User selector (if human)
|
||||
- AI model selector (if AI)
|
||||
- Storytelling style dropdown
|
||||
- **Step 4: Game Settings**
|
||||
- Turn-based toggle
|
||||
- Auto-save interval
|
||||
- Other game rules
|
||||
- **Visual Style:** Multi-step wizard like character creation
|
||||
|
||||
#### **Role Assignment Interface**
|
||||
- **Player Slots Grid:**
|
||||
- Drag-and-drop cards
|
||||
- Each slot shows:
|
||||
- Slot number
|
||||
- Assigned player/AI
|
||||
- Character info (if selected)
|
||||
- Edit button
|
||||
- **Available Players Panel:**
|
||||
- List of users
|
||||
- Drag to assign
|
||||
- **Visual Style:** Interactive, clear assignment state
|
||||
|
||||
#### **Game State Overview**
|
||||
- **Tabs:**
|
||||
- Overview
|
||||
- Characters
|
||||
- Messages
|
||||
- Timeline
|
||||
- **Overview Tab:**
|
||||
- Game status
|
||||
- Current scene
|
||||
- Active players
|
||||
- Statistics (messages, actions, etc.)
|
||||
- **Characters Tab:**
|
||||
- All character profiles
|
||||
- Stats/inventory (if applicable)
|
||||
- **Messages Tab:**
|
||||
- All messages (public + private)
|
||||
- Filter controls
|
||||
- **Visual Style:** Dashboard with data cards
|
||||
|
||||
#### **AI Storyteller Command Interface**
|
||||
- **Command Input:**
|
||||
- Special input for GM → AI storyteller
|
||||
- Examples: "Introduce a plot twist", "Increase difficulty"
|
||||
- **AI Status:**
|
||||
- Active/paused toggle
|
||||
- Last action timestamp
|
||||
- Response queue
|
||||
- **Override Controls:**
|
||||
- Edit AI responses
|
||||
- Take manual control
|
||||
- **Visual Style:** Distinct command interface
|
||||
|
||||
---
|
||||
|
||||
## 📄 Page 6: Admin Dashboard (Development/Future)
|
||||
|
||||
### Purpose
|
||||
System-wide administration, monitoring, and configuration
|
||||
|
||||
### Layout Structure
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ Admin Header (System Status) │
|
||||
├────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────┬──────────────────────┐ │
|
||||
│ │ Nav Menu │ Content Panel │ │
|
||||
│ │ │ │ │
|
||||
│ │ - Games │ (Changes per menu) │ │
|
||||
│ │ - Users │ │ │
|
||||
│ │ - Models │ │ │
|
||||
│ │ - Costs │ │ │
|
||||
│ │ - Logs │ │ │
|
||||
│ │ │ │ │
|
||||
│ └──────────┴──────────────────────┘ │
|
||||
│ │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### UI Elements
|
||||
|
||||
#### **Admin Header**
|
||||
- **Title:** "System Administration"
|
||||
- **System Status Indicators:**
|
||||
- API status (green/red dot)
|
||||
- Active games count
|
||||
- Active users count
|
||||
- **Visual Style:** Dark header, status indicators
|
||||
|
||||
#### **Navigation Menu**
|
||||
- **Menu Items:**
|
||||
- Dashboard (overview)
|
||||
- Games Management
|
||||
- User Management
|
||||
- LLM Configuration
|
||||
- Cost Analytics
|
||||
- System Logs
|
||||
- Settings
|
||||
- **Visual Style:** Vertical menu, active state highlighting
|
||||
|
||||
#### **Dashboard Overview**
|
||||
- **Metric Cards:**
|
||||
- Total games (number + trend)
|
||||
- Total users (number + trend)
|
||||
- API calls today (number + cost)
|
||||
- System health (percentage)
|
||||
- **Recent Activity Feed:**
|
||||
- Latest games created
|
||||
- Recent errors
|
||||
- High-cost requests
|
||||
- **Charts:**
|
||||
- Games over time
|
||||
- Cost over time
|
||||
- Model usage distribution
|
||||
- **Visual Style:** Grid of cards, charts with tooltips
|
||||
|
||||
#### **Games Management**
|
||||
- **Games Table:**
|
||||
- Columns: ID, Name, GM, Players, Status, Created, Actions
|
||||
- Sort controls
|
||||
- Filter controls
|
||||
- Pagination
|
||||
- **Actions:**
|
||||
- View details
|
||||
- Force end
|
||||
- Delete
|
||||
- **Visual Style:** Data table with actions
|
||||
|
||||
#### **User Management**
|
||||
- **Users Table:**
|
||||
- Columns: Username, Email, Role, Games, Joined, Status, Actions
|
||||
- Search bar
|
||||
- Role filter
|
||||
- **Actions:**
|
||||
- Edit role
|
||||
- Suspend/activate
|
||||
- View activity
|
||||
- **Visual Style:** Data table with user cards
|
||||
|
||||
#### **LLM Configuration**
|
||||
- **Model Cards:** (Per model)
|
||||
- Model name
|
||||
- Provider
|
||||
- Status (enabled/disabled toggle)
|
||||
- Usage stats
|
||||
- Cost per token
|
||||
- Edit button
|
||||
- **Add Model Form:**
|
||||
- Model ID input
|
||||
- API key input
|
||||
- Configuration options
|
||||
- **Visual Style:** Grid of model cards
|
||||
|
||||
#### **Cost Analytics**
|
||||
- **Summary Cards:**
|
||||
- Total cost this month
|
||||
- Average per game
|
||||
- Most expensive model
|
||||
- **Cost Breakdown:**
|
||||
- Per model chart
|
||||
- Per game table
|
||||
- Per user table
|
||||
- **Date Range Selector:**
|
||||
- Preset ranges (Today, Week, Month)
|
||||
- Custom range picker
|
||||
- **Export Button:** Download CSV
|
||||
- **Visual Style:** Charts and tables
|
||||
|
||||
#### **System Logs**
|
||||
- **Log Viewer:**
|
||||
- Real-time log stream
|
||||
- Log level filter (Info, Warning, Error)
|
||||
- Search/filter input
|
||||
- Timestamp
|
||||
- Auto-scroll toggle
|
||||
- **Visual Style:** Terminal/console aesthetic
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Common UI Components (Used Across Pages)
|
||||
|
||||
### Buttons
|
||||
- **Primary Button:**
|
||||
- Gradient background (#667eea to #764ba2)
|
||||
- White text, rounded corners
|
||||
- Hover: Slight lift, darker gradient
|
||||
- Sizes: Small, Medium, Large
|
||||
- **Secondary Button:**
|
||||
- Transparent/outlined style
|
||||
- Border color matches theme
|
||||
- Hover: Background color change
|
||||
- **Icon Buttons:**
|
||||
- Circular or square
|
||||
- Icon only, tooltip on hover
|
||||
- **Danger Button:**
|
||||
- Red color scheme
|
||||
- Used for delete/destructive actions
|
||||
|
||||
### Input Fields
|
||||
- **Text Input:**
|
||||
- Dark background with light border
|
||||
- Focus: Border color change, glow effect
|
||||
- Error state: Red border + error message below
|
||||
- Success state: Green border
|
||||
- **Textarea:**
|
||||
- Same as text input but multi-line
|
||||
- Resize handle
|
||||
- **Dropdown/Select:**
|
||||
- Custom styled select
|
||||
- Grouped options support
|
||||
- Search/filter (for long lists)
|
||||
- **Checkbox:**
|
||||
- Custom checkbox with checkmark animation
|
||||
- Label click support
|
||||
- **Radio Buttons:**
|
||||
- Custom styled radio
|
||||
- Clear selected state
|
||||
- **File Upload:**
|
||||
- Drag-and-drop zone
|
||||
- File type indicator
|
||||
- Upload progress
|
||||
|
||||
### Cards
|
||||
- **Base Card:**
|
||||
- Rounded corners (8-12px)
|
||||
- Shadow for elevation
|
||||
- Padding: 1-2rem
|
||||
- Background: White or dark surface
|
||||
- **Interactive Card:**
|
||||
- Hover state: Lift effect
|
||||
- Click state: Scale slightly
|
||||
- Selection state: Border highlight
|
||||
- **Info Card:**
|
||||
- Icon + title + content
|
||||
- Color-coded by type
|
||||
|
||||
### Badges/Pills
|
||||
- **Status Badge:**
|
||||
- Small, rounded pill
|
||||
- Color-coded (green=active, red=error, yellow=warning)
|
||||
- Sizes: XS, SM, MD
|
||||
- **Count Badge:**
|
||||
- Circular badge with number
|
||||
- Often overlays buttons/icons
|
||||
|
||||
### Modals/Overlays
|
||||
- **Modal:**
|
||||
- Full-screen semi-transparent overlay
|
||||
- Centered content container
|
||||
- Close button (X) in top-right
|
||||
- Click outside to close (optional)
|
||||
- **Toast/Notification:**
|
||||
- Slide in from top-right
|
||||
- Auto-dismiss after timeout
|
||||
- Close button
|
||||
- Type: Success, Error, Warning, Info
|
||||
|
||||
### Navigation
|
||||
- **Tabs:**
|
||||
- Horizontal tabs with active state
|
||||
- Underline or background highlight
|
||||
- **Breadcrumbs:**
|
||||
- Path navigation
|
||||
- Separator (/ or >)
|
||||
- Click to navigate
|
||||
- **Pagination:**
|
||||
- Previous/Next buttons
|
||||
- Page numbers
|
||||
- Jump to page input
|
||||
|
||||
### Loading States
|
||||
- **Spinner:**
|
||||
- Circular spinner (small, medium, large)
|
||||
- Themed color
|
||||
- **Skeleton Screen:**
|
||||
- Gray placeholder boxes
|
||||
- Shimmer animation
|
||||
- **Progress Bar:**
|
||||
- Linear progress indicator
|
||||
- Percentage display (optional)
|
||||
|
||||
### Empty States
|
||||
- **No Data:**
|
||||
- Icon + message
|
||||
- Call-to-action button
|
||||
- Helpful hint text
|
||||
- **Error State:**
|
||||
- Error icon + message
|
||||
- Retry button
|
||||
- Support link
|
||||
|
||||
---
|
||||
|
||||
## 📱 Responsive Breakpoints
|
||||
|
||||
### Desktop (1024px+)
|
||||
- Multi-column layouts
|
||||
- Sidebars visible
|
||||
- Full navigation
|
||||
|
||||
### Tablet (768px - 1023px)
|
||||
- Collapsible sidebars
|
||||
- Stacked cards
|
||||
- Simplified navigation
|
||||
|
||||
### Mobile (<768px)
|
||||
- Single column
|
||||
- Bottom navigation
|
||||
- Hamburger menu
|
||||
- Full-screen modals
|
||||
- Larger tap targets
|
||||
|
||||
---
|
||||
|
||||
## ♿ Accessibility Requirements
|
||||
|
||||
### Keyboard Navigation
|
||||
- All interactive elements focusable
|
||||
- Logical tab order
|
||||
- Focus indicators (outline)
|
||||
- Keyboard shortcuts (optional)
|
||||
|
||||
### Screen Reader Support
|
||||
- Semantic HTML
|
||||
- ARIA labels where needed
|
||||
- Alt text for images
|
||||
- Form labels associated
|
||||
|
||||
### Color Contrast
|
||||
- WCAG AA minimum (4.5:1 for text)
|
||||
- Color not sole indicator
|
||||
- High contrast mode support
|
||||
|
||||
### Interaction
|
||||
- Minimum touch target: 44x44px
|
||||
- No timing-critical interactions
|
||||
- Error prevention and recovery
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Animation Guidelines
|
||||
|
||||
### Durations
|
||||
- **Micro:** 100-200ms (hover, focus)
|
||||
- **Short:** 200-300ms (buttons, tooltips)
|
||||
- **Medium:** 300-500ms (modals, page transitions)
|
||||
- **Long:** 500-800ms (complex animations)
|
||||
|
||||
### Easing
|
||||
- **Ease-out:** UI appearing (modal open)
|
||||
- **Ease-in:** UI disappearing (modal close)
|
||||
- **Ease-in-out:** Smooth transitions
|
||||
|
||||
### Motion Preferences
|
||||
- Respect `prefers-reduced-motion`
|
||||
- Disable decorative animations
|
||||
- Keep functional animations
|
||||
|
||||
---
|
||||
|
||||
## 📐 Layout Patterns
|
||||
|
||||
### Container Widths
|
||||
- **Max Width:** 1200px (main content)
|
||||
- **Narrow:** 600px (forms, wizards)
|
||||
- **Wide:** 1400px (dashboards)
|
||||
|
||||
### Grid Systems
|
||||
- **12-column grid** for complex layouts
|
||||
- **Flexbox** for simple layouts
|
||||
- **CSS Grid** for card grids
|
||||
|
||||
### Spacing Rhythm
|
||||
- Consistent vertical rhythm (8px base unit)
|
||||
- Component spacing: 16px, 24px, 32px
|
||||
- Section spacing: 48px, 64px
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Priority Elements for UI Design Templates
|
||||
|
||||
### High Priority (MVP Essential)
|
||||
1. Session Setup page
|
||||
2. Character View
|
||||
3. Character Creation Wizard
|
||||
4. Storyteller View
|
||||
5. Primary buttons and inputs
|
||||
|
||||
### Medium Priority (Phase 3)
|
||||
6. Gamemaster Control Panel
|
||||
7. Role assignment interface
|
||||
8. Game state dashboard
|
||||
|
||||
### Low Priority (Future)
|
||||
9. Admin Dashboard
|
||||
10. Analytics views
|
||||
11. Advanced settings
|
||||
|
||||
---
|
||||
|
||||
**Use this document to prompt UI design tools with specific page requirements!**
|
||||
|
||||
Example prompt structure:
|
||||
```
|
||||
Create a modern dark-themed UI design for [PAGE NAME] with the following elements:
|
||||
[List specific elements from above]
|
||||
Color scheme: Purple gradient (#667eea to #764ba2)
|
||||
Style: Modern, RPG-themed, clean
|
||||
```
|
||||
401
docs/reference/UI_ELEMENTS_REFERENCE.md
Normal file
401
docs/reference/UI_ELEMENTS_REFERENCE.md
Normal file
@@ -0,0 +1,401 @@
|
||||
# UI Elements Reference - Storyteller RPG
|
||||
|
||||
**Purpose:** Complete catalog of UI elements for design system templates
|
||||
**Date:** October 12, 2025
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Design System Overview
|
||||
|
||||
### Color Palette
|
||||
- **Primary:** Purple gradient (#667eea to #764ba2)
|
||||
- **Background:** Dark theme (#1a1a2e, #16213e)
|
||||
- **Success:** Green (#10b981, #86efac)
|
||||
- **Text:** White (#fff), Light gray (#aaa, #ccc)
|
||||
- **Borders:** Subtle white rgba (0.1 opacity)
|
||||
|
||||
### Typography
|
||||
- **Headings:** 24-32px, bold
|
||||
- **Body:** 14-16px, normal
|
||||
- **Small:** 12-13px, secondary info
|
||||
|
||||
---
|
||||
|
||||
## 📄 Page 1: Session Setup / Landing Page
|
||||
|
||||
### Purpose
|
||||
Entry point for creating/joining sessions and characters
|
||||
|
||||
### Key Sections
|
||||
|
||||
#### 1. Header Area
|
||||
- **App Title:** "🎭 Storyteller RPG"
|
||||
- **Subtitle:** Brief tagline
|
||||
- **Logo placeholder** (future)
|
||||
|
||||
#### 2. Demo Session Quick Access
|
||||
- **Section Title:** "🎲 Demo Session - 'The Cursed Tavern'"
|
||||
- **Description text:** Brief explanation
|
||||
- **Three action buttons:**
|
||||
- Join as Storyteller (gold gradient)
|
||||
- Play as Bargin (character 1)
|
||||
- Play as Willow (character 2)
|
||||
- **Button styling:** Large, prominent, with icons
|
||||
|
||||
#### 3. Session Creation Section
|
||||
- **Section Title:** "Create New Session"
|
||||
- **Description:** "Start a new game as the storyteller"
|
||||
- **Input field:** Session name (text)
|
||||
- **Primary button:** "Create Session"
|
||||
|
||||
#### 4. Session Join Section
|
||||
- **Section Title:** "Join Existing Session"
|
||||
- **Description:** "Play as a character in an ongoing game"
|
||||
- **Form elements:**
|
||||
- Session ID input (text)
|
||||
- Character name input (text, required)
|
||||
- Description textarea (3 rows)
|
||||
- Personality textarea (2 rows, optional)
|
||||
- Model selector (dropdown with optgroups)
|
||||
- Model hint text (small, gray)
|
||||
- **Character creation options:**
|
||||
- Primary button: "✨ Create Character (Wizard)"
|
||||
- Divider: "or"
|
||||
- Toggle button: "Quick Create" (shows simple form)
|
||||
- **Submit button:** "Join Session (Simple)" (conditional)
|
||||
|
||||
#### 5. Dividers
|
||||
- Horizontal rule with centered text ("OR")
|
||||
- Visual separation between sections
|
||||
|
||||
---
|
||||
|
||||
## 📄 Page 2: Character View (Player Perspective)
|
||||
|
||||
### Purpose
|
||||
Player's interface for interacting with storyteller
|
||||
|
||||
### Layout Structure
|
||||
Three-column layout: Info | Messages | Public Feed
|
||||
|
||||
### Key Sections
|
||||
|
||||
#### 1. Character Header
|
||||
- **Character name** (h2, white, bold)
|
||||
- **Description text** (gray, italic)
|
||||
- **Personality traits** (with emoji prefix)
|
||||
- **Profile badges** (if profile exists):
|
||||
- Race badge
|
||||
- Class badge
|
||||
- Personality type badge
|
||||
- **Action buttons:**
|
||||
- Export button (📥)
|
||||
- Connection status indicator (● Connected / ○ Disconnected)
|
||||
|
||||
#### 2. Current Scene Panel (if active)
|
||||
- **Section title:** "📜 Current Scene"
|
||||
- **Scene text** (large, prominent)
|
||||
- **Background:** Highlighted panel
|
||||
|
||||
#### 3. Public Messages Section
|
||||
- **Section title:** "📢 Public Actions (All Players See)"
|
||||
- **Message list:**
|
||||
- Message sender label
|
||||
- Timestamp
|
||||
- Message content
|
||||
- Visual distinction from private messages
|
||||
|
||||
#### 4. Private Conversation Area
|
||||
- **Section title:** "💬 Private Conversation with Storyteller"
|
||||
- **Message thread:**
|
||||
- Character messages (right-aligned, colored)
|
||||
- Storyteller messages (left-aligned, different color)
|
||||
- Timestamps
|
||||
- Message bubbles
|
||||
- **Auto-scroll to latest**
|
||||
|
||||
#### 5. Message Composer
|
||||
- **Message visibility selector** (dropdown):
|
||||
- Private
|
||||
- Public
|
||||
- Mixed
|
||||
- **Input area (varies by type):**
|
||||
- Private/Public: Single text input
|
||||
- Mixed: Two textareas (public + private)
|
||||
- **Send button** (primary, disabled when disconnected)
|
||||
|
||||
#### 6. AI Generation Section (future)
|
||||
- Generate suggestion button
|
||||
- Prompt customization
|
||||
- Regenerate option
|
||||
|
||||
---
|
||||
|
||||
## 📄 Page 3: Storyteller View (GM Perspective)
|
||||
|
||||
### Purpose
|
||||
Game master interface to manage all players and narrate story
|
||||
|
||||
### Layout Structure
|
||||
Two-column: Character list sidebar | Main content area
|
||||
|
||||
### Key Sections
|
||||
|
||||
#### 1. Session Header
|
||||
- **Session name** (h2)
|
||||
- **Session ID display** with copy button
|
||||
- **Quick copy feedback** (tooltip/toast)
|
||||
|
||||
#### 2. Character List Sidebar
|
||||
- **Section title:** "Active Characters"
|
||||
- **Character cards:**
|
||||
- Character name
|
||||
- "💬 View" button (per character)
|
||||
- Highlight active selection
|
||||
- Pending response indicator (red dot)
|
||||
- **Scrollable list**
|
||||
|
||||
#### 3. Scene Narration Panel
|
||||
- **Section title:** "📜 Scene Narration"
|
||||
- **Textarea:** Large input for scene description
|
||||
- **Buttons:**
|
||||
- "Broadcast Scene" (primary)
|
||||
- "✨ AI Suggest" (secondary, generates scene)
|
||||
|
||||
#### 4. Public Actions Feed
|
||||
- **Section title:** "📢 Recent Public Actions"
|
||||
- **Message list:**
|
||||
- Character name
|
||||
- Action content
|
||||
- Timestamp
|
||||
- **Latest 5 messages shown**
|
||||
|
||||
#### 5. Character Conversation View
|
||||
- **Header:** Selected character name
|
||||
- **Conversation thread:**
|
||||
- Character messages
|
||||
- Your responses
|
||||
- Timestamps
|
||||
- **Response composer:**
|
||||
- Large textarea
|
||||
- Button group:
|
||||
- "✨ AI Suggest"
|
||||
- "Send Private Response"
|
||||
|
||||
#### 6. Multi-Character Response (future)
|
||||
- Select multiple characters
|
||||
- Generate context-aware response
|
||||
- Broadcast to selected players
|
||||
|
||||
---
|
||||
|
||||
## 📄 Page 4: Character Creation Wizard
|
||||
|
||||
### Purpose
|
||||
6-step guided character creation with profiles
|
||||
|
||||
### Layout Structure
|
||||
Modal overlay with centered card
|
||||
|
||||
### Key Sections
|
||||
|
||||
#### 1. Wizard Header
|
||||
- **Title:** "Create Your Character"
|
||||
- **Progress indicator:**
|
||||
- 6 steps shown
|
||||
- Active step highlighted
|
||||
- Step labels visible
|
||||
|
||||
#### 2. Step Navigation
|
||||
- **Footer buttons:**
|
||||
- Cancel (left)
|
||||
- Back (if not step 1)
|
||||
- Next (steps 1-5)
|
||||
- Create Character (step 6)
|
||||
|
||||
### Step-by-Step UI Elements
|
||||
|
||||
#### Step 1: Basic Info
|
||||
- **Form elements:**
|
||||
- Name input (required)
|
||||
- Gender selector (dropdown)
|
||||
- **Import section:**
|
||||
- Hint text
|
||||
- Import from JSON button (file picker)
|
||||
|
||||
#### Step 2: Description
|
||||
- **Form elements:**
|
||||
- Description textarea (4 rows, required)
|
||||
- Background textarea (3 rows, optional)
|
||||
|
||||
#### Step 3: Race & Class
|
||||
- **Selection grids:** (2x3 or responsive)
|
||||
- Race cards (clickable)
|
||||
- Class cards (clickable)
|
||||
- **Card elements:**
|
||||
- Name (bold)
|
||||
- Description (gray)
|
||||
- Selected state (highlighted border, gradient background)
|
||||
- Hover effects
|
||||
|
||||
#### Step 4: Personality
|
||||
- **Selection grid:** 2x2
|
||||
- Personality type cards
|
||||
- Same card styling as Step 3
|
||||
- **Additional traits textarea** (optional)
|
||||
|
||||
#### Step 5: AI Model
|
||||
- **Model selector:** Large dropdown
|
||||
- Optgroups (OpenAI, OpenRouter)
|
||||
- Model names with providers
|
||||
- **Hint text:** Model personality differences
|
||||
|
||||
#### Step 6: Review
|
||||
- **Preview panels:**
|
||||
- Basic Information
|
||||
- Description
|
||||
- Background (if provided)
|
||||
- Additional Traits (if provided)
|
||||
- AI Model
|
||||
- **Summary card:**
|
||||
- Character identity statement
|
||||
- Highlighted/special styling
|
||||
|
||||
---
|
||||
|
||||
## 📄 Future Pages (Phase 3+)
|
||||
|
||||
### Gamemaster Dashboard
|
||||
- **Game creation wizard**
|
||||
- **Player slot assignment**
|
||||
- **Role management grid**
|
||||
- **Game state overview**
|
||||
- **AI control panel**
|
||||
|
||||
### Admin Panel
|
||||
- **System overview**
|
||||
- **User management**
|
||||
- **LLM configuration**
|
||||
- **Cost tracking dashboard**
|
||||
- **Analytics charts**
|
||||
|
||||
### Character Sheet (Enhanced)
|
||||
- **Stats display**
|
||||
- **Inventory grid**
|
||||
- **Skills list**
|
||||
- **Equipment slots**
|
||||
- **Character progression**
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Common UI Components
|
||||
|
||||
### Buttons
|
||||
1. **Primary button:** Purple gradient, white text
|
||||
2. **Secondary button:** Transparent, border, hover effect
|
||||
3. **Wizard button:** Extra gradient styling
|
||||
4. **Export/Action buttons:** Subtle rgba background
|
||||
5. **Icon buttons:** Small, inline
|
||||
|
||||
### Form Elements
|
||||
1. **Text inputs:** Dark background, subtle border, focus glow
|
||||
2. **Textareas:** Resizable, same styling as inputs
|
||||
3. **Dropdowns:** Custom styling, optgroups
|
||||
4. **File pickers:** Hidden, triggered by styled button
|
||||
|
||||
### Cards
|
||||
1. **Selection cards:** Clickable, hover lift, selected state
|
||||
2. **Character cards:** Compact, button included
|
||||
3. **Message cards:** Bubbles, aligned left/right
|
||||
4. **Preview panels:** Bordered sections with headers
|
||||
|
||||
### Indicators
|
||||
1. **Status dots:** Colored circles (● ○)
|
||||
2. **Badges:** Rounded rectangles, colored background
|
||||
3. **Progress bars:** Step indicators
|
||||
4. **Loading states:** Spinners, skeleton screens
|
||||
|
||||
### Feedback
|
||||
1. **Toasts/Alerts:** Success/error messages
|
||||
2. **Tooltips:** Hover information
|
||||
3. **Validation messages:** Inline form errors
|
||||
4. **Empty states:** No data placeholders
|
||||
|
||||
---
|
||||
|
||||
## 📐 Layout Patterns
|
||||
|
||||
### Responsive Breakpoints
|
||||
- **Desktop:** > 768px (multi-column)
|
||||
- **Mobile:** ≤ 768px (single column, stacked)
|
||||
|
||||
### Grid Systems
|
||||
- **2-column:** Sidebar + main content
|
||||
- **3-column:** Info + center + sidebar
|
||||
- **Selection grids:** Auto-fit, min 200px
|
||||
|
||||
### Spacing
|
||||
- **Sections:** 2-3rem padding
|
||||
- **Elements:** 1-1.5rem gaps
|
||||
- **Inline:** 0.5-1rem margins
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Design Prompt Template
|
||||
|
||||
**For UI Design LLM:**
|
||||
|
||||
```
|
||||
Create a modern, dark-themed UI design for [PAGE NAME] with these elements:
|
||||
|
||||
**Color Scheme:**
|
||||
- Primary: Purple gradient (#667eea to #764ba2)
|
||||
- Background: Dark navy (#1a1a2e, #16213e)
|
||||
- Accents: White with 10% opacity borders
|
||||
- Text: White and light gray
|
||||
|
||||
**Layout:**
|
||||
[Describe specific layout]
|
||||
|
||||
**Components Needed:**
|
||||
[List specific elements for that page]
|
||||
|
||||
**Style:**
|
||||
- Modern, clean, RPG-themed
|
||||
- Smooth gradients and shadows
|
||||
- Glassmorphism effects
|
||||
- Smooth hover animations
|
||||
- Mobile responsive
|
||||
|
||||
**Inspiration:**
|
||||
Discord's UI, modern game interfaces, fantasy themes
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Component Priority
|
||||
|
||||
### Essential (Implement First)
|
||||
1. Session setup forms
|
||||
2. Message display/composer
|
||||
3. Character header/info
|
||||
4. Navigation/buttons
|
||||
|
||||
### Important (Phase 2-3)
|
||||
1. Character creation wizard
|
||||
2. Storyteller dashboard
|
||||
3. Profile displays
|
||||
4. Export/import UI
|
||||
|
||||
### Nice-to-Have (Phase 4+)
|
||||
1. Character sheets with stats
|
||||
2. Inventory management
|
||||
3. Dice roller UI
|
||||
4. Image generation panels
|
||||
5. Analytics dashboards
|
||||
|
||||
---
|
||||
|
||||
**Total UI Elements Cataloged:** 100+
|
||||
**Pages Documented:** 4 (+ 3 future)
|
||||
**Ready for design system creation** ✅
|
||||
343
docs/reference/UI_QUICK_REFERENCE.md
Normal file
343
docs/reference/UI_QUICK_REFERENCE.md
Normal file
@@ -0,0 +1,343 @@
|
||||
# UI Design Quick Reference
|
||||
|
||||
**TL;DR guide for getting UI designs quickly**
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Priority Order
|
||||
|
||||
### Phase 2 (Current - Already Built)
|
||||
✅ Session Setup Page
|
||||
✅ Character View
|
||||
✅ Character Creation Wizard
|
||||
✅ Storyteller View
|
||||
|
||||
### Phase 3 (Next - Need Designs)
|
||||
🎨 Gamemaster Control Panel
|
||||
🎨 Game Creation Wizard
|
||||
🎨 Role Assignment Interface
|
||||
|
||||
### Phase 4+ (Future)
|
||||
⏳ Admin Dashboard
|
||||
⏳ Analytics Views
|
||||
|
||||
---
|
||||
|
||||
## 📄 6 Core Pages Summary
|
||||
|
||||
| Page | Purpose | Complexity | Priority |
|
||||
|------|---------|------------|----------|
|
||||
| **Session Setup** | Landing, join/create | Low | ✅ Built |
|
||||
| **Character View** | Player interface | Medium | ✅ Built |
|
||||
| **Character Wizard** | Character creation | Medium | ✅ Built |
|
||||
| **Storyteller View** | GM interface | High | ✅ Built |
|
||||
| **Gamemaster Panel** | Game management | High | 🎨 Next |
|
||||
| **Admin Dashboard** | System admin | High | ⏳ Future |
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Design Files Location
|
||||
|
||||
All design documentation in `/docs/reference/`:
|
||||
- **UI_ELEMENTS_INVENTORY.md** - Complete element list by page (15,000+ words)
|
||||
- **UI_DESIGN_PROMPTS.md** - Copy-paste prompts for LLMs
|
||||
- **UI_QUICK_REFERENCE.md** - This file
|
||||
|
||||
---
|
||||
|
||||
## ⚡ Quick Start
|
||||
|
||||
### To Get Designs Fast:
|
||||
|
||||
1. **Read the prompts file:**
|
||||
- `/docs/reference/UI_DESIGN_PROMPTS.md`
|
||||
- Find the page you need
|
||||
- Copy the full prompt
|
||||
|
||||
2. **Choose your tool:**
|
||||
- **v0.dev** (Vercel) - Best for React/Tailwind code
|
||||
- **Midjourney/DALL-E** - Best for visual mockups
|
||||
- **Claude/GPT-4** - Best for HTML/CSS implementation
|
||||
|
||||
3. **Generate:**
|
||||
- Paste prompt
|
||||
- Add tool-specific instructions
|
||||
- Generate multiple variations
|
||||
- Iterate and refine
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Current Design System (Already Implemented)
|
||||
|
||||
### Colors
|
||||
```css
|
||||
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
--bg-dark: #1a1a2e;
|
||||
--surface-dark: #2d3748;
|
||||
--text-light: #ffffff;
|
||||
--accent-purple: #667eea;
|
||||
```
|
||||
|
||||
### Components We Have
|
||||
- ✅ Buttons (primary, secondary, icon)
|
||||
- ✅ Input fields (text, textarea, dropdown)
|
||||
- ✅ Cards (base, interactive, info)
|
||||
- ✅ Badges/Pills
|
||||
- ✅ Message bubbles
|
||||
- ✅ Selection cards (wizard)
|
||||
- ✅ Progress indicator
|
||||
- ✅ Form layouts
|
||||
- ✅ Modal overlays
|
||||
|
||||
### Components We Need
|
||||
- 🎨 Data tables
|
||||
- 🎨 Drag-and-drop cards
|
||||
- 🎨 Charts (line, bar, pie)
|
||||
- 🎨 Timeline/activity feed
|
||||
- 🎨 Tabs component
|
||||
- 🎨 Metric cards with trends
|
||||
- 🎨 Role assignment slots
|
||||
|
||||
---
|
||||
|
||||
## 📋 Example: Getting Gamemaster Panel Design
|
||||
|
||||
### Option 1: v0.dev (Code + Design)
|
||||
```
|
||||
Prompt: [Copy from UI_DESIGN_PROMPTS.md - Prompt 5]
|
||||
Add: "Generate as Next.js components with Tailwind CSS and shadcn/ui"
|
||||
Output: Working React code + visual preview
|
||||
```
|
||||
|
||||
### Option 2: Midjourney (Mockup)
|
||||
```
|
||||
Prompt: [Copy from UI_DESIGN_PROMPTS.md - Prompt 5]
|
||||
Add: "UI mockup, high fidelity, Figma style, dark theme, 4k"
|
||||
Output: Visual design to reference
|
||||
```
|
||||
|
||||
### Option 3: Manual Implementation
|
||||
```
|
||||
1. Read element list in UI_ELEMENTS_INVENTORY.md
|
||||
2. Sketch/wireframe layout
|
||||
3. Build components one by one
|
||||
4. Match existing design system colors/spacing
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Common Customizations
|
||||
|
||||
### To Match Different Styles:
|
||||
|
||||
**Sci-Fi Theme:**
|
||||
```
|
||||
Change gradient to: #00d9ff to #0099ff (cyan)
|
||||
Add: Glowing borders, neon accents
|
||||
Fonts: Orbitron or Exo 2
|
||||
```
|
||||
|
||||
**Fantasy Theme:**
|
||||
```
|
||||
Keep purple gradient
|
||||
Add: Texture overlays, paper-like cards
|
||||
Fonts: Cinzel or IM Fell
|
||||
Decorative borders
|
||||
```
|
||||
|
||||
**Minimal Theme:**
|
||||
```
|
||||
Change to monochrome: #000000 to #ffffff
|
||||
Remove: Gradients, decorative elements
|
||||
Fonts: Inter or System UI
|
||||
Flat design
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📐 Layout Templates
|
||||
|
||||
### Dashboard Layout (Gamemaster/Admin)
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ Header (Global Actions) │
|
||||
├──────┬──────────────────────────┤
|
||||
│ Nav │ Main Content Area │
|
||||
│ Bar │ │
|
||||
│ │ ┌────────┬────────┐ │
|
||||
│ │ │ Card │ Card │ │
|
||||
│ │ └────────┴────────┘ │
|
||||
│ │ │
|
||||
│ │ [Tables/Charts/Forms] │
|
||||
└──────┴──────────────────────────┘
|
||||
|
||||
Sidebar: 240px
|
||||
Content: flex-1
|
||||
Gap: 24px
|
||||
```
|
||||
|
||||
### Chat Layout (Character/Storyteller)
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ Header (Info + Actions) │
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ Scrollable Message Area │
|
||||
│ (Messages stacked vertically) │
|
||||
│ │
|
||||
├─────────────────────────────────┤
|
||||
│ Fixed Composer (Bottom) │
|
||||
└─────────────────────────────────┘
|
||||
|
||||
Header: Auto height
|
||||
Messages: flex-1, overflow-auto
|
||||
Composer: Auto height, fixed position
|
||||
```
|
||||
|
||||
### Wizard Layout
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ Wizard Header + Progress │
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ │
|
||||
│ Step Content (Centered) │
|
||||
│ Max Width: 600px │
|
||||
│ │
|
||||
│ │
|
||||
├─────────────────────────────────┤
|
||||
│ Footer (Cancel | Back | Next) │
|
||||
└─────────────────────────────────┘
|
||||
|
||||
Modal: Max 800px width, centered
|
||||
Content: Vertical padding 48px
|
||||
Footer: Sticky bottom
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Phase 3 Design Priorities
|
||||
|
||||
### Must Have First:
|
||||
1. **Gamemaster Dashboard** - Overview/home screen
|
||||
2. **Game Creation Form** - Simple version
|
||||
3. **Player Slot Cards** - Assignment interface
|
||||
|
||||
### Can Wait:
|
||||
4. Role drag-and-drop (use simple assignment first)
|
||||
5. Advanced analytics
|
||||
6. Detailed configuration screens
|
||||
|
||||
---
|
||||
|
||||
## 💡 Tips for Design Consistency
|
||||
|
||||
### When Designing New Pages:
|
||||
|
||||
1. **Reuse existing components**
|
||||
- Check what's already built
|
||||
- Extend rather than recreate
|
||||
|
||||
2. **Match spacing**
|
||||
- Use 8px grid system
|
||||
- Common gaps: 16px, 24px, 32px
|
||||
|
||||
3. **Follow color usage**
|
||||
- Purple for primary actions
|
||||
- Dark backgrounds (#2d3748)
|
||||
- White/light text
|
||||
|
||||
4. **Keep hierarchy clear**
|
||||
- Largest: Page titles (2rem)
|
||||
- Medium: Section titles (1.5rem)
|
||||
- Normal: Body text (1rem)
|
||||
|
||||
5. **Maintain card style**
|
||||
- Rounded 8-12px
|
||||
- Subtle shadows
|
||||
- Padding 1-2rem
|
||||
|
||||
---
|
||||
|
||||
## 📱 Responsive Breakpoints
|
||||
|
||||
```css
|
||||
/* Mobile First */
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Tablet - 768px */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding: 24px;
|
||||
}
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop - 1024px */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Workflow Recommendation
|
||||
|
||||
### For Phase 3 Implementation:
|
||||
|
||||
**Week 1:** Design Phase
|
||||
- Day 1: Generate Gamemaster dashboard mockups
|
||||
- Day 2: Review and refine designs
|
||||
- Day 3: Generate component mockups
|
||||
- Day 4: Finalize design system updates
|
||||
- Day 5: Create component specifications
|
||||
|
||||
**Week 2-3:** Implementation
|
||||
- Build reusable components
|
||||
- Implement layouts
|
||||
- Connect to backend
|
||||
- Test responsive behavior
|
||||
- Polish animations
|
||||
|
||||
**Week 4:** Polish
|
||||
- Fix edge cases
|
||||
- Accessibility improvements
|
||||
- Performance optimization
|
||||
- User testing
|
||||
|
||||
---
|
||||
|
||||
## 📚 Resources
|
||||
|
||||
### Design Tools
|
||||
- **v0.dev** - https://v0.dev (AI code generation)
|
||||
- **Figma** - https://figma.com (Design/prototype)
|
||||
- **Tailwind UI** - https://tailwindui.com (Component library)
|
||||
- **shadcn/ui** - https://ui.shadcn.com (React components)
|
||||
|
||||
### Inspiration
|
||||
- **Dribbble** - Search "RPG dashboard dark theme"
|
||||
- **Behance** - Search "game master interface"
|
||||
- **Awwwards** - Dark themed web apps
|
||||
|
||||
### Color Tools
|
||||
- **Coolors** - Generate palette variations
|
||||
- **Color Hunt** - Find complementary palettes
|
||||
- **Contrast Checker** - Ensure accessibility
|
||||
|
||||
---
|
||||
|
||||
**Everything you need to get UI designs for Phase 3 is ready!** 🎨✨
|
||||
|
||||
Start with the Gamemaster Control Panel - that's the biggest design challenge for Phase 3.
|
||||
Reference in New Issue
Block a user