162 lines
4.7 KiB
Markdown
162 lines
4.7 KiB
Markdown
# AeThex Studio - Quick Start Guide
|
|
|
|
## 🚀 You're All Set!
|
|
|
|
The development server is running at: **http://localhost:3000**
|
|
|
|
## What's Included
|
|
|
|
### ✅ Complete IDE Features
|
|
- **File Explorer** (Left Sidebar) - Browse your project files organized by platform
|
|
- **Monaco Code Editor** - Professional code editing with syntax highlighting
|
|
- **AI Assistant** (Right Sidebar) - Get help with code, debugging, and cross-platform development
|
|
- **Console Panel** (Bottom) - View output from all platforms in real-time
|
|
- **Cross-Platform Preview** - See your game running on all platforms simultaneously
|
|
- **Nexus Sync Monitor** - Debug real-time state synchronization
|
|
|
|
### 🎮 Pre-loaded Sample Project
|
|
The IDE comes with a sample cross-platform game project:
|
|
- `/roblox` - Lua scripts for Roblox
|
|
- `/web` - HTML/JS for browsers
|
|
- `/mobile` - React Native for mobile
|
|
- `/desktop` - Electron for desktop
|
|
- `/shared` - Nexus Engine and shared code
|
|
|
|
### 🎨 UI Components
|
|
- Dark theme optimized for long coding sessions
|
|
- Collapsible sidebars and panels
|
|
- Multi-file tab support
|
|
- Keyboard shortcuts (Cmd/Ctrl + S to save)
|
|
|
|
## How to Use
|
|
|
|
### 1. Explore Files
|
|
Click on any file in the left sidebar to open it in the editor.
|
|
|
|
### 2. Edit Code
|
|
Make changes in the Monaco editor. Files auto-save or use Cmd/Ctrl + S.
|
|
|
|
### 3. View Console Output
|
|
Check the console panel at the bottom for logs from different platforms:
|
|
- [ROBLOX] in red
|
|
- [WEB] in blue
|
|
- [MOBILE] in green
|
|
- [DESKTOP] in purple
|
|
|
|
### 4. Use AI Assistant
|
|
Click the AI Assistant in the right sidebar for help:
|
|
- Generate code
|
|
- Explain existing code
|
|
- Convert between platforms
|
|
- Add Nexus Engine sync
|
|
- Set up authentication
|
|
|
|
### 5. Preview Across Platforms
|
|
Click the "Cross-Platform Preview" tab to see your game running on all platforms with live sync monitoring.
|
|
|
|
### 6. Create New Project
|
|
Click "New Project" in the navbar to:
|
|
1. Choose from 9 templates
|
|
2. Configure platforms and features
|
|
3. Set up Nexus Engine, Passport Auth, GameForge
|
|
|
|
## Key Features Demo
|
|
|
|
### Real-Time State Sync (Nexus Engine)
|
|
Open the "Cross-Platform Preview" tab to see the sync status table showing how variables stay synced across platforms in real-time.
|
|
|
|
### AI-Powered Development
|
|
Try these quick actions in the AI Assistant:
|
|
- "Set up cross-platform player movement"
|
|
- "Add Nexus Engine state sync"
|
|
- "Create Passport login flow"
|
|
|
|
### Multi-Platform Deployment
|
|
Click "Deploy" in the navbar to deploy to:
|
|
- Roblox Cloud
|
|
- Web hosting
|
|
- App Store/Play Store
|
|
- Desktop executables
|
|
|
|
## Keyboard Shortcuts
|
|
- `Cmd/Ctrl + S` - Save file
|
|
- `Cmd/Ctrl + K` - Command palette
|
|
- `Cmd/Ctrl + B` - Toggle left sidebar
|
|
- `Cmd/Ctrl + J` - Toggle bottom panel
|
|
|
|
## Architecture Highlights
|
|
|
|
### State Management (Zustand)
|
|
- `editor-store.ts` - File tree, open files, editor state
|
|
- `app-store.ts` - UI state, console, sync events
|
|
|
|
### Components
|
|
All components are in `/components`:
|
|
- Core UI in root
|
|
- Reusable primitives in `/ui`
|
|
|
|
### Styling
|
|
- Tailwind CSS with custom dark theme
|
|
- Purple (#8b5cf6) primary color
|
|
- Pink (#ec4899) secondary color
|
|
- Cyan (#06b6d4) accent color
|
|
|
|
## What's Mock vs Real
|
|
|
|
Currently everything is **fully functional UI** with **mock data**:
|
|
- ✅ Real: UI, editor, file tree, layout, themes
|
|
- 📊 Mock: AI responses, deployment, platform previews, sync data
|
|
|
|
To connect real backends:
|
|
1. Add API endpoints in `/app/api`
|
|
2. Connect Monaco editor to file system
|
|
3. Integrate actual AI models (Gemini/Claude/GPT-4)
|
|
4. Set up WebSocket for real-time sync
|
|
5. Add deployment pipelines
|
|
|
|
## Next Steps
|
|
|
|
### Customize Your Experience
|
|
1. Edit `/app/globals.css` for theme changes
|
|
2. Modify `/lib/templates.ts` to add project templates
|
|
3. Update `/store/editor-store.ts` to load real files
|
|
|
|
### Add Real Functionality
|
|
1. Connect to Git for version control
|
|
2. Integrate with Roblox API for live deployment
|
|
3. Set up WebSocket server for Nexus Engine
|
|
4. Add user authentication with Passport system
|
|
|
|
### Extend Features
|
|
1. Add more AI quick actions
|
|
2. Create custom deployment pipelines
|
|
3. Build analytics dashboard
|
|
4. Add collaborative editing
|
|
|
|
## Troubleshooting
|
|
|
|
### Port Already in Use
|
|
If port 3000 is taken, edit `package.json` and change the dev script:
|
|
```json
|
|
"dev": "next dev -p 3001"
|
|
```
|
|
|
|
### Dependencies Issues
|
|
Run: `npm install --legacy-peer-deps`
|
|
|
|
### Monaco Editor Not Loading
|
|
Monaco loads dynamically. If it doesn't appear, check browser console for errors.
|
|
|
|
## Support
|
|
|
|
- **Documentation**: See README-NEW.md
|
|
- **Issues**: Open a GitHub issue
|
|
- **Questions**: Check the code comments
|
|
|
|
---
|
|
|
|
## 🎉 Enjoy Building with AeThex Studio!
|
|
|
|
Remember: This is a fully functional IDE UI. You can click around, open files, type code, use the AI assistant, and explore all features. The interface is production-ready and built with Next.js 14, TypeScript, and Tailwind CSS.
|
|
|
|
**Build once, deploy everywhere!** 🚀
|