No description
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. |
||
|---|---|---|
| .github | ||
| src | ||
| .gitignore | ||
| .spark-initial-sha | ||
| components.json | ||
| index.html | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| PRD.md | ||
| README.md | ||
| SECURITY.md | ||
| spark.meta.json | ||
| tailwind.config.js | ||
| theme.json | ||
| tsconfig.json | ||
| vite.config.ts | ||
✨ Welcome to Your Spark Template!
You've just launched your brand-new Spark Template Codespace — everything’s fired up and ready for you to explore, build, and create with Spark!
This template is your blank canvas. It comes with a minimal setup to help you get started quickly with Spark development.
🚀 What's Inside?
- A clean, minimal Spark environment
- Pre-configured for local development
- Ready to scale with your ideas
🧠 What Can You Do?
Right now, this is just a starting point — the perfect place to begin building and testing your Spark applications.
🧹 Just Exploring? No problem! If you were just checking things out and don’t need to keep this code:
- Simply delete your Spark.
- Everything will be cleaned up — no traces left behind.
📄 License For Spark Template Resources
The Spark Template files and resources from GitHub are licensed under the terms of the MIT license, Copyright GitHub, Inc.