Generated by Spark: DO THIS PLAN, Create AeThex Studio - a professional cross-platform game development IDE using Next.js 14, TypeScript, and Tailwind CSS.
=== CORE LAYOUT === Top Navbar (h-16, dark bg #0a0a0f): - Left: AeThex logo (purple gradient #8b5cf6 to #ec4899) + "AeThex Studio" text - Center: Current project name + auto-save indicator (green dot when saved) - Right: - "Deploy" dropdown (Roblox icon, Web icon, Mobile icon, Desktop icon, "Deploy All") - "Run All Platforms" button (purple gradient, play icon) - Sync status indicator (green = synced) - User avatar dropdown (settings, logout) Main Container (flex, h-[calc(100vh-4rem)]): LEFT SIDEBAR (w-64, bg-gray-900): - "Explorer" header with new file/folder icons - File tree with folders: └─ 📁 roblox/ ├─ main.lua ├─ player-controller.lua └─ datastore.lua └─ 📁 web/ ├─ index.html ├─ game.js └─ style.css └─ 📁 mobile/ ├─ App.tsx ├─ GameScreen.tsx └─ config.json └─ 📁 desktop/ ├─ main.js └─ preload.js └─ 📁 shared/ ├─ nexus-engine.ts ├─ passport-auth.ts └─ gameforge-config.json └─ README.md - Collapsible folders with expand/collapse icons - Right-click context menu (New File, New Folder, Delete, Rename) - Platform icons next to files (Roblox = 🎮, Web = 🌐, Mobile = 📱, Desktop = 🖥️) CENTER EDITOR (flex-1): - Tab bar showing open files with close icons - Monaco Editor integration: - Syntax highlighting for Lua, JavaScript, TypeScript, HTML, CSS - Line numbers - Minimap - Dark theme (vs-dark) - Auto-complete - Multi-cursor support - Bottom tabs: - "Editor" (default) - "Cross-Platform Preview" (shows all platforms running) - "Nexus Sync Monitor" (state sync visualization) RIGHT SIDEBAR (w-80, bg-gray-900, collapsible): - "AI Assistant" header with Gemini/Claude model selector - Chat interface: - Message history (scrollable, auto-scroll to bottom) - User messages (left, blue bg #3b82f6) - AI messages (right, purple bg #8b5cf6) - Code blocks with syntax highlighting + copy button - "Insert into editor" button on code responses - Quick Actions (button grid above input): - "Explain Code" 🔍 - "Add Comments" 💬 - "Generate Tests" ✅ - "Cross-Platform Convert" 🔄 - "Add Nexus Sync" 🔗 - "Setup Passport Auth" 🔐 - Input textarea with "Send" button - Token usage bar at bottom (shows "450K / 500K tokens used") BOTTOM PANEL (h-64, collapsible): - Tabs: "Console" | "Terminal" | "Nexus Sync" | "Deploy Logs" - Console output with color coding: - [Roblox] messages in red - [Web] messages in blue - [Mobile] messages in green - [Desktop] messages in purple - Auto-scroll to latest output - Clear console button === CROSS-PLATFORM PREVIEW TAB === When "Cross-Platform Preview" tab is active, show: Grid Layout (2x2): - Top-Left: Roblox Viewport - Iframe with Roblox game embed - "Open in Roblox Studio" button - Player count: X online - Top-Right: Web Browser Viewport - Iframe with web game - Address bar showing URL - Responsive viewport size selector - Bottom-Left: Mobile Device Mockup - iPhone/Android frame - Game rendering inside - Rotate button (portrait/landscape) - Bottom-Right: Desktop Window - Native window chrome - Game rendering inside - Platform: Windows/Mac/Linux selector Center Overlay - Sync Status Panel (floating, glassmorphism): Table showing synchronized state: | Variable | Roblox | Web | Mobile | Desktop | Status | |------------|--------|------|--------|---------|------------| | playerX | 120 | 120 | 120 | 120 | ✓ Synced | | playerY | 85 | 85 | 85 | 85 | ✓ Synced | | health | 100 | 98 | 100 | 100 | ⚠ Syncing | | inventory | [...] | [...] | [...] | [...] | ✓ Synced | | score | 1250 | 1250 | 1250 | 1250 | ✓ Synced | Color coding: Green (✓ Synced), Yellow (⚠ Syncing), Red (✗ Conflict) Controls below table: - "Refresh All Platforms" button - Latency simulator slider (0-500ms) with live display - "Simulate Disconnect" button (test offline handling) - "Force Sync All" button === NEW PROJECT MODAL === Triggered by "New Project" button, show full-screen modal: Step 1 - Choose Template: Card grid (3 columns): - "Roblox Game Starter" (Roblox icon, "Most Popular" badge) - "Cross-Platform Multiplayer" (multi-platform icon, "Recommended" badge) - "Transmedia Story Project" (book icon) - "Battle Royale Template" (crosshair icon) - "RPG Adventure Kit" (sword icon) - "Social Hub/Hangout" (chat icon) - "Simulator Game" (upgrade icon) - "Obby/Parkour" (running icon) - "Blank Project" (plus icon) Each card shows: - Icon/thumbnail - Template name - Short description - Platform badges (which platforms it supports) - "Preview" and "Select" buttons Step 2 - Configure Project: Form layout: - Project Name (text input, required) - Description (textarea, optional) - Target Platforms (checkboxes with icons): ☑ Roblox ☑ Web ☑ Mobile ☐ Desktop (coming soon badge) - Enable Features (toggle switches): - ⚡ Nexus Engine (real-time state sync) - tooltip: "Sync game state across all platforms" - 🔐 Passport Authentication (unified identity) - tooltip: "One account, all platforms" - 🎮 GameForge Governance (anti-cheat) - tooltip: "Server-authoritative game logic" - 📊 Analytics Dashboard (player metrics) - 💰 Monetization (in-app purchases) - 🌍 Transmedia Tools (story/lore builder) Step 3 - Review & Create: Summary card showing: - Project name - Template selected - Platforms enabled (with icons) - Features enabled (checkboxes) - Estimated setup time: "~30 seconds" - "Create Project" button (large, purple gradient) - "Back" button Progress bar after clicking Create: - "Setting up Roblox environment..." (with spinner) - "Initializing web project..." (with spinner) - "Configuring mobile build..." (with spinner) - "Installing Nexus Engine..." (with spinner) - "Setting up Passport Auth..." (with spinner) - "Project ready!" (checkmark) === DEPLOYMENT SYSTEM === When "Deploy" dropdown is clicked: Dropdown menu: - "Deploy to Roblox" (with last deployed: X minutes ago) - "Deploy to Web" (with URL preview) - "Deploy to Mobile" (with build status) - "Deploy to Desktop" (with version number) - Divider - "Deploy to All Platforms" (bold, purple) - "Deployment Settings" Deploy Modal (when platform selected): - Platform icon + name at top - Build configuration: - Environment: Production / Staging / Development (radio buttons) - Version: Auto-increment / Custom (with input) - Commit message: (textarea) - Pre-deploy checklist (auto-checked): ✓ Code compiles successfully ✓ No syntax errors ✓ Tests passed (if any) ✓ Nexus Engine configured ⚠ Warning: 2 TODO comments found - "Deploy Now" button - Estimated deploy time: ~2 minutes Deployment Progress: - Step-by-step progress bar - Live log output in scrollable container - Cancel deployment button - Success state with: - "Deployment successful!" message - Live URL (for Web) - Universe ID (for Roblox) - Build number (for Mobile/Desktop) - "View Live" button - "Share" button - "Rollback" button (if not first deploy) === NEXUS SYNC MONITOR TAB === When "Nexus Sync" bottom panel tab is active: Left side - State Tree View: Hierarchical view of synced state: └─ GameState ├─ Players (3 connected) │ ├─ Player_001 │ │ ├─ position: {x: 120, y: 85, z: 0} │ │ ├─ health: 100 │ │ └─ inventory: [item1, item2] │ ├─ Player_002 │ └─ Player_003 ├─ World │ ├─ objects: [...] │ └─ weather: "sunny" └─ Matchmaking └─ queue: [] Right side - Sync Activity Feed: Real-time log of sync events: 14:30:45.123 [Roblox→All] Player_001.position updated 14:30:45.124 [Web] Ack received (12ms latency) 14:30:45.126 [Mobile] Ack received (14ms latency) 14:30:45.140 [Desktop] Ack received (28ms latency) 14:30:46.001 [Web→All] Player_002.health changed: 100→95 14:30:46.015 [Conflict] Player_001.inventory - resolving... 14:30:46.020 [Resolved] Server authority applied Color coded by type: - Blue: Normal sync - Yellow: Warnings - Red: Conflicts - Green: Resolutions Bottom stats bar: - Total syncs: 1,247 - Conflicts: 3 - Avg latency: 18ms - Bandwidth: 2.3 KB/s === AI ASSISTANT FEATURES === AI understands AeThex-specific commands: Pre-programmed prompts (clickable in chat): - "Set up cross-platform player movement" - "Add Nexus Engine state sync for [variable]" - "Create Passport login flow" - "Generate GameForge anti-cheat rules" - "Build multiplayer matchmaking system" - "Add in-game purchase system" - "Create transmedia character bio template" - "Export game for Steam/console" AI response capabilities: - Generate code in Lua, JavaScript, TypeScript - Explain cross-platform architecture - Suggest performance optimizations - Debug sync conflicts - Create deployment scripts - Write documentation - Generate test cases Context awareness: - Knows current file open - Knows project structure - Knows enabled features (Nexus, Passport, etc.) - Remembers conversation history - Suggests relevant templates === STYLING REQUIREMENTS === Color Palette: - Primary: Purple #8b5cf6 - Secondary: Pink #ec4899 - Accent: Cyan #06b6d4 - Background: Very dark #0a0a0f - Surface: Dark gray #1a1a1f - Text: White #ffffff - Text secondary: Gray #94a3b8 - Success: Green #10b981 - Warning: Yellow #f59e0b - Error: Red #ef4444 Typography: - Headers: Inter font, bold - Body: Inter font, regular - Code: JetBrains Mono, monospace UI Components: - Buttons: Rounded corners (8px), gradient backgrounds, hover effects - Cards: Dark surface with subtle border, shadow on hover - Inputs: Dark bg with purple border on focus - Modals: Backdrop blur, centered, slide-in animation - Tabs: Underline indicator for active tab - Dropdowns: Smooth expand/collapse animations Icons: Use Lucide React icons throughout Animations: - Smooth transitions (200ms ease-in-out) - Hover effects on all interactive elements - Loading spinners for async operations - Slide transitions for modals - Fade-in for notifications === TECHNICAL IMPLEMENTATION === Use these technologies: - Next.js 14 with App Router - TypeScript (strict mode) - Tailwind CSS for styling - Radix UI for accessible components - Monaco Editor (@monaco-editor/react) for code editing - Zustand for state management - Socket.io client for real-time features - Framer Motion for animations Code structure: - Proper component separation - TypeScript types for all props - Error boundaries - Loading states for all async operations - Responsive design (mobile-friendly) - Dark theme throughout - Accessibility (keyboard navigation, ARIA labels) Mock data: - Generate realistic file structures - Mock API responses for deployments - Simulate sync events - Show sample console output - Display mock analytics Make it production-ready with: - Proper error handling - Loading indicators - Empty states (no projects, no files open) - Toast notifications for actions - Confirmation dialogs for destructive actions - Keyboard shortcuts (Cmd+S to save, Cmd+P for command palette) === ADDITIONAL FEATURES === Command Palette (Cmd+K): - Quick actions search - File search - Recent projects - AI prompt templates - Keyboard shortcut reference Settings Panel: - Theme: Dark / Light / Auto - Editor: Font size, tab size, word wrap - AI: Model selection, token limits - Platforms: Configure deployment targets - Account: Profile, billing, API keys Collaboration (show UI only, mock functionality): - "Share Project" button - Collaborator avatars in navbar - Real-time cursors in editor (different colors) - Comment threads on lines of code - Activity feed of team changes Analytics Dashboard (separate view): - Player metrics across platforms - Revenue by platform - Engagement graphs (daily active users, session length) - Platform breakdown pie chart - Top features used - Conversion funnel Export all this as a fully functional Next.js application with TypeScript and Tailwind CSS. Include all necessary components, proper file structure, and working interactions. Make it look and feel like a professional development tool used by studios.
This commit is contained in:
GitHub
parent
4d20c14822
commit
a161f707c8