MrPiglr
8d6ebeba35
Layout: Top navbar: AeThex logo (left), project name (center), user menu with avatar (right) Left sidebar (250px): File tree navigator with folders/files, "New File" and "New Folder" buttons Center: Code editor area (use Monaco Editor component if available, or textarea with syntax highlighting) Right sidebar (300px, collapsible): AI Assistant chat panel with message history Bottom panel (200px, collapsible): Console output and terminal Features: File tree supports create/rename/delete operations Tabs for multiple open files Syntax highlighting for Lua, JavaScript, TypeScript Dark theme with purple/cyan accent colors (futuristic gaming aesthetic) Split panes are resizable Auto-save indicator in navbar Use TypeScript and proper state management. Make it feel like VS Code but purpose-built for game development. Create a unified game development workspace that shows the same game running on three platforms simultaneously: Left panel: Roblox viewport (embed mockup) Center panel: Web browser viewport with game canvas Right panel: Mobile device mockup with game Include: Shared state indicator showing synced variables (player position, score, inventory) Platform-specific code tabs that show Lua (Roblox), JavaScript (Web), and React Native (Mobile) "Deploy to Platform" buttons for each Sync status indicator (green = synced, yellow = syncing, red = conflict) Console output panel at bottom showing platform-specific logs Use a dark IDE-like theme. Make it feel like a professional developer tool. Add a "New Project" modal to the AeThex Studio IDE: Modal triggered by "New Project" button in navbar: Step 1: Choose template (card grid layout) Roblox Game Starter Cross-Platform Multiplayer Transmedia Story Project Blank Project Each card shows icon, title, description, and "Popular" badge where applicable Step 2: Project configuration form Project name input Platform checkboxes (Roblox, Web, Mobile) Enable Nexus Engine toggle (with tooltip explaining state sync) Enable Passport Auth toggle (with tooltip explaining unified identity) Step 3: Review summary and "Create Project" button After creation, populate file tree with template structure and open main file in editor. Use a stepper UI component to show progress. Modern, clean design. Build the AI Assistant chat panel for the right sidebar: UI Components: Header: "AeThex AI Assistant" with model selector dropdown (Claude Sonnet, GPT-4o) Chat message history (scrollable, auto-scroll to bottom) Messages alternate left (user) and right (AI) with avatars Code blocks in messages with syntax highlighting and copy button Input textarea at bottom with "Send" button Token usage indicator (shows X / 500K tokens used this month) Quick Actions (buttons above input): "Explain selected code" "Add comments" "Convert to cross-platform" "Generate tests" Message Types: User messages: blue background AI messages: dark gray background with purple border System messages: small, centered, gray text (e.g., "Code inserted into editor") Features: When AI generates code, show "Insert into editor" button Track conversation context (include current file, project structure) Show typing indicator when AI is responding Make the UX smooth and polished. Create a preview panel modal that opens when user clicks "Preview" in navbar: Layout (fullscreen modal with dark backdrop): Close button (top right) Tab navigation: "Roblox" | "Web" | "Mobile" | "All Platforms" "All Platforms" tab shows three columns: Left: Roblox viewport (iframe placeholder with Roblox logo) Center: Web browser viewport (iframe with game canvas) Right: Mobile device mockup (iPhone frame with game view) Shared State Indicator (floating panel at bottom): Shows synced variables in real-time table: Variable | Roblox | Web | Mobile | Status playerX | 120 | 120 | 120 | ✓ Synced health | 100 | 98 | 100 | ⚠ Syncing Color coded: Green (synced), Yellow (syncing), Red (conflict) Controls: "Refresh All" button Individual "Deploy to [Platform]" buttons Latency simulator slider (0-500ms) Use glassmorphism UI style with blur effects. This should look futuristic and impressive. Add user authentication and workspace management: Login page: AeThex logo and tagline "Sign in with AeThex Passport" button (purple gradient) "Sign in with Google" button "Sign in with GitHub" button Illustration of cross-platform game development Dashboard (after login, before opening project): Header: "My Workspaces" with "New Workspace" button Grid of workspace cards showing: Project name Last modified timestamp Platform badges (Roblox, Web, Mobile icons) Thumbnail/preview image Three-dot menu (Rename, Delete, Share) Empty state if no workspaces: "Create your first game" CTA with template previews Each workspace card is clickable and opens the IDE with that project loaded. Use modern card design with hover effects. Show loading skeletons while fetching data.
143 lines
8.4 KiB
Markdown
143 lines
8.4 KiB
Markdown
# Planning Guide
|
|
|
|
AeThex Studio is a browser-based cross-platform game development IDE with file management, multi-platform preview, AI assistance, and project templates.
|
|
|
|
**Experience Qualities**:
|
|
1. **Professional** - Should feel like a complete IDE with file navigation, tabs, and split panels like VS Code
|
|
2. **Intelligent** - AI assistance deeply integrated with context awareness and code suggestions
|
|
3. **Cross-Platform** - Unified workspace showing Roblox, Web, and Mobile development simultaneously
|
|
|
|
**Complexity Level**: Complex Application (advanced functionality with multiple views and state management)
|
|
This is now a full-featured IDE with file tree navigation, multiple open files, tabbed editor, AI chat panel, console output, multi-platform preview, and project templates - creating a complete game development workspace.
|
|
|
|
## Essential Features
|
|
|
|
### File Tree Navigator
|
|
- **Functionality**: Left sidebar showing folder/file hierarchy with create, rename, and delete operations
|
|
- **Purpose**: Organize multiple scripts and manage project structure like a real IDE
|
|
- **Trigger**: Always visible on desktop, accessible via tabs on mobile
|
|
- **Progression**: User clicks "New File" → enters name → new file appears in tree → clicks to open
|
|
- **Success criteria**: Files persist between sessions, operations work smoothly, selected file highlights
|
|
|
|
### Multi-File Tabs
|
|
- **Functionality**: Horizontal tabs showing open files with close buttons
|
|
- **Purpose**: Work with multiple scripts simultaneously without losing context
|
|
- **Trigger**: Opening a file from tree adds a tab
|
|
- **Progression**: User opens file → tab appears → clicks tab to switch → clicks X to close
|
|
- **Success criteria**: Active tab highlighted, tab state persists, smooth switching
|
|
|
|
### Multi-Platform Preview
|
|
- **Functionality**: Modal showing Roblox, Web, and Mobile viewports side-by-side with shared state sync
|
|
- **Purpose**: Visualize how game runs across all platforms simultaneously
|
|
- **Trigger**: User clicks "Preview" button in toolbar
|
|
- **Progression**: Click Preview → modal opens → see three viewport mockups → view synced state table → close modal
|
|
- **Success criteria**: Modal is visually impressive with glassmorphism, state sync table updates, deploy buttons present
|
|
|
|
### New Project Wizard
|
|
- **Functionality**: 3-step modal for creating projects with templates, platform selection, and feature toggles
|
|
- **Purpose**: Quick-start new games with appropriate scaffolding
|
|
- **Trigger**: User clicks "New Project" button in toolbar
|
|
- **Progression**: Click New Project → choose template → configure settings → review → create → file tree populates
|
|
- **Success criteria**: Stepper UI shows progress, all template types available, settings persist
|
|
|
|
### Console Output Panel
|
|
- **Functionality**: Bottom panel showing logs filtered by platform (Roblox/Web/Mobile/System)
|
|
- **Purpose**: Display runtime output and errors from all platforms in one place
|
|
- **Trigger**: Always visible on desktop (collapsible), shows logs automatically
|
|
- **Progression**: Code runs → logs appear → filter by platform → clear logs button
|
|
- **Success criteria**: Color-coded messages, platform badges, auto-scroll, clear functionality
|
|
|
|
### User Profile Menu
|
|
- **Functionality**: Avatar dropdown in toolbar showing GitHub profile with sign-out option
|
|
- **Purpose**: Display current user identity and provide account actions
|
|
- **Trigger**: Click avatar icon in top-right
|
|
- **Progression**: User logged in → avatar shows → click opens menu → see profile info
|
|
- **Success criteria**: Fetches real GitHub user via spark.user(), displays avatar and email
|
|
|
|
## Edge Case Handling
|
|
- **Empty File Tree**: Show placeholder with "Create your first file" message
|
|
- **No Open Files**: Display welcome message in editor area
|
|
- **AI Errors**: Display user-friendly error messages if AI service is unavailable
|
|
- **Large Scripts**: Monaco handles large files, warn if exceeds 10,000 lines
|
|
- **Invalid Operations**: Prevent deleting root folder, renaming to empty string
|
|
- **Network Issues**: Show offline indicator if can't reach AI or user services
|
|
- **Mobile Layout**: Stack panels vertically with tab navigation for Files/Editor/AI
|
|
|
|
## Design Direction
|
|
The design should evoke a professional game development IDE with futuristic gaming aesthetics - dark themes with vibrant cyan/purple accents, glassmorphism effects in modals, and smooth panel animations. This is VS Code meets Unreal Engine editor with a playful gaming twist.
|
|
|
|
## Color Selection
|
|
A dark, code-focused theme with vibrant accent colors inspired by Roblox's playful brand and gaming aesthetics.
|
|
|
|
- **Primary Color**: oklch(0.45 0.20 265) - Deep electric blue that represents technical precision and digital creativity
|
|
- **Secondary Colors**:
|
|
- Background: oklch(0.15 0.02 265) - Near-black with subtle blue tint
|
|
- Surface: oklch(0.20 0.03 265) - Slightly elevated dark panels
|
|
- **Accent Color**: oklch(0.75 0.20 150) - Vibrant cyan-green for CTAs, highlights, and active states
|
|
- **Foreground/Background Pairings**:
|
|
- Primary (Deep Blue): White text (oklch(0.98 0 0)) - Ratio 7.2:1 ✓
|
|
- Accent (Cyan-Green): Dark text (oklch(0.15 0.02 265)) - Ratio 8.1:1 ✓
|
|
- Background (Near-Black): Light text (oklch(0.85 0.03 265)) - Ratio 12.3:1 ✓
|
|
- Surface (Dark Panel): Light text (oklch(0.85 0.03 265)) - Ratio 10.5:1 ✓
|
|
|
|
## Font Selection
|
|
Typography should feel technical yet approachable - monospace for code, clean sans-serif for UI.
|
|
|
|
- **Typographic Hierarchy**:
|
|
- H1 (App Title): Space Grotesk Bold/32px/tight tracking (-0.02em)
|
|
- H2 (Section Headers): Space Grotesk Semibold/20px/normal tracking
|
|
- Body (UI Text): Inter Medium/14px/relaxed line-height (1.6)
|
|
- Code (Editor): JetBrains Mono Regular/14px/monospace
|
|
- Small (Hints): Inter Regular/12px/muted color
|
|
|
|
## Animations
|
|
Animations should feel snappy and technical - quick state transitions with subtle easing that reinforces the digital tool aesthetic. Use framer-motion for panel slides and modal appearances, but keep transitions under 200ms to avoid feeling sluggish. Add micro-interactions on buttons (scale on press) and smooth scrolling in the chat panel.
|
|
|
|
## Component Selection
|
|
- **Components**:
|
|
- `Button` with accent variant for primary actions (New Project, Preview)
|
|
- `Card` for template previews, project configs, and preview mockups
|
|
- `Dialog` for Preview Modal, New Project Modal, About dialog
|
|
- `DropdownMenu` for file context menus and user profile menu
|
|
- `Avatar` for user profile display
|
|
- `ScrollArea` for file tree, chat messages, console logs
|
|
- `Tabs` for template categories, preview modes, console filters, mobile navigation
|
|
- `Input` for file rename, project name entry
|
|
- `Checkbox` for platform selection in new project
|
|
- `Switch` for Nexus Engine and Passport Auth toggles
|
|
- `Badge` for popular templates, platform indicators, status labels
|
|
- `Tooltip` for button explanations and feature descriptions
|
|
- `ResizablePanel` for adjustable sidebar and panel widths
|
|
- Custom Monaco Editor wrapper
|
|
- Custom FileTree with nested folders
|
|
- Custom FileTabs with close buttons
|
|
- Custom ConsolePanel with platform filtering
|
|
- **Customizations**:
|
|
- Monaco editor with dark theme configuration
|
|
- File tree with expand/collapse animations
|
|
- Preview modal with glassmorphism effects (backdrop-blur)
|
|
- Multi-platform viewport mockups with device frames
|
|
- Shared state sync table with color-coded status
|
|
- Console with platform-specific badge colors
|
|
- **States**:
|
|
- Buttons: Accent primary (New Project), Ghost secondary (Templates, Copy)
|
|
- File items: Selected (accent background), Hover (muted background)
|
|
- Tabs: Active (accent bottom border), Inactive (transparent)
|
|
- Console logs: Color by type (red error, yellow warn, blue info)
|
|
- **Icon Selection**:
|
|
- File tree: `<Folder />`, `<File />`, `<Plus />`, `<Trash />`, `<PencilSimple />`
|
|
- Toolbar: `<FolderPlus />` (New Project), `<Play />` (Preview), `<User />` (Profile)
|
|
- Preview: `<ArrowsClockwise />` (Refresh), `<GameController />`, `<Globe />`, `<DeviceMobile />`
|
|
- Console: `<Terminal />` (Console icon)
|
|
- All from Phosphor Icons
|
|
- **Spacing**:
|
|
- Container padding: p-4
|
|
- Panel borders: border-border (1px)
|
|
- Component gaps: gap-4 for sections, gap-2 for grouped items
|
|
- File tree indent: 12px per level
|
|
- **Mobile**:
|
|
- Tabs for Files/Editor/AI switching on mobile
|
|
- File tree full-screen on mobile
|
|
- Hide console panel on mobile
|
|
- Preview modal scrollable on small screens
|
|
- Stepper in New Project modal scales down
|