# AeThex Studio

A powerful, **multi-platform** browser-based IDE for game development with **AI-powered cross-platform code translation**, modern tooling, and an intuitive interface. Build once, deploy everywhere.

![AeThex Studio](https://img.shields.io/badge/version-1.0.0-blue.svg) ![License](https://img.shields.io/badge/license-MIT-green.svg) ![Next.js](https://img.shields.io/badge/Next.js-14.2-black.svg) ![React](https://img.shields.io/badge/React-18.3-blue.svg)

## 🌟 What Makes AeThex Studio Different

**Cross-Platform Translation Engine** - The only IDE that translates your code between game platforms:
- 🎮 **Roblox Lua** → ⚡ **UEFN Verse** → 🌐 **Spatial TypeScript** → 🎯 **Core Lua**
- AI-powered intelligent code conversion
- Platform-specific best practices applied
- Side-by-side comparison view
- Explanation of key differences

**Build once, deploy everywhere.** Write your game logic in Roblox, translate to UEFN with one click.

## ✨ Features

### 🌍 **Multi-Platform Support** ⭐ NEW!
- **Platform Switching** - Work with Roblox, UEFN, Spatial, or Core
- **Platform-Specific Templates**:
  - 🎮 **Roblox**: 25 Lua templates
  - ⚡ **UEFN**: 8 Verse templates (Beta)
  - 🌐 **Spatial**: Coming soon
  - 🎯 **Core**: Coming soon
- **Cross-Platform Translation** - AI-powered code conversion between platforms
- **Side-by-Side Comparison** - Compare original and translated code
- **Smart Editor** - Language highlighting adapts to selected platform

### 🎨 **Modern Code Editor**
- **Monaco Editor** - The same editor that powers VS Code
- **Multi-language Support** - Lua, Verse, TypeScript
- **Real-time code validation** and linting
- **Multi-file editing** with tab management
- **File tree navigation** with drag-and-drop organization

### 🤖 **AI-Powered Assistant**
- Built-in AI chat for code help and debugging
- Context-aware suggestions
- Code explanation and documentation
- Roblox API knowledge

### 📁 **Project Management**
- **File Tree** - Organize your scripts into folders
- **Drag-and-drop** - Rearrange files easily
- **Quick file search** (Cmd/Ctrl+P) - Find files instantly
- **Search in files** (Cmd/Ctrl+Shift+F) - Global text search

### 🎯 **Productivity Features**
- **33+ Code Templates** - Ready-made scripts for multiple platforms
  - **Roblox** (25 templates):
    - Beginner templates (Hello World, Touch Detectors, etc.)
    - Gameplay systems (DataStore, Teams, Combat, etc.)
    - UI components (GUIs, Timers, etc.)
    - Advanced features (Pathfinding, Inventory, etc.)
  - **UEFN** (8 templates):
    - Beginner (Hello World, Player Tracking)
    - Gameplay (Timers, Triggers, Damage Zones)
    - UI (Button Interactions)
    - Tools (Item Spawners)
- **Command Palette** (Cmd/Ctrl+K) - Quick access to all commands
- **Keyboard Shortcuts** - Professional IDE shortcuts
- **Code Preview** - Test your scripts instantly

### 💻 **Interactive Terminal & CLI**
- **Built-in Terminal** - Full-featured command line interface
- **10+ CLI Commands** for Roblox development:
  - `help` - Display available commands
  - `run` - Execute current Lua script
  - `check` - Validate syntax and find errors
  - `count` - Count lines, words, characters
  - `api <class>` - Lookup Roblox API documentation
  - `template [list|name]` - Browse and load templates
  - `export [filename]` - Export scripts to .lua files
  - `clear` - Clear terminal output
  - `info` - Display system information
  - `echo` - Print text to terminal
- **Command History** - Navigate previous commands with ↑/↓ arrows
- **Auto-completion** - Tab-complete command names
- **Smart Suggestions** - Context-aware command hints
- **Toggle with Cmd/Ctrl + `** - Quick terminal access

### 🎨 **Customization**
- **5 Beautiful Themes**:
  - **Dark** - Classic dark theme for comfortable coding
  - **Light** - Clean light theme for bright environments
  - **Synthwave** - Retro neon aesthetic
  - **Forest** - Calming green tones
  - **Ocean** - Deep blue theme
- **Persistent preferences** - Your settings are saved

### 📱 **Mobile Responsive**
- Optimized layouts for phones and tablets
- Touch-friendly controls
- Hamburger menu for mobile
- Collapsible panels

### 🚀 **Developer Experience**
- **Code splitting** for fast loading
- **Error boundaries** with graceful error handling
- **Loading states** with spinners
- **Toast notifications** for user feedback
- **Testing infrastructure** with Vitest

## 🎮 Perfect For

- **Multi-Platform Developers** - Build for Roblox, UEFN, Spatial, and Core from one IDE
- **Game Studios** - Translate games between platforms with AI assistance
- **Roblox → UEFN Migration** - Converting existing Roblox games to Fortnite
- **Students & Learners** - Learn multiple game development languages
- **Rapid Prototyping** - Build once, deploy to multiple platforms
- **Web-Based Development** - Code anywhere, no installation needed

## ⌨️ Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| `Cmd/Ctrl + S` | Save file (auto-save enabled) |
| `Cmd/Ctrl + P` | Quick file search |
| `Cmd/Ctrl + K` | Command palette |
| `Cmd/Ctrl + N` | New project |
| `Cmd/Ctrl + F` | Find in editor |
| `Cmd/Ctrl + Shift + F` | Search in all files |
| ``Cmd/Ctrl + ` `` | Toggle terminal |

## 🚀 Getting Started

### Prerequisites
- Node.js 18+
- npm or yarn

### Installation

```bash
# Clone the repository
git clone https://github.com/AeThex-LABS/aethex-studio.git

# Navigate to the project directory
cd aethex-studio

# Install dependencies
npm install

# Start the development server
npm run dev
```

Visit `http://localhost:3000` to see the application.

### 🔑 Enabling Cross-Platform Translation

To unlock the **AI-powered code translation** feature, you need a Claude API key:

1. **Get API Key**: Visit [Anthropic Console](https://console.anthropic.com/settings/keys) and create a new API key

2. **Configure Environment**:
   ```bash
   # Copy example environment file
   cp .env.example .env.local

   # Edit .env.local and add your API key
   VITE_CLAUDE_API_KEY=sk-ant-api03-your-api-key-here
   ```

3. **Restart Dev Server**:
   ```bash
   npm run dev
   ```

4. **Test Translation**:
   - Open AeThex Studio
   - Click "Translate" button in toolbar
   - Watch real AI translation happen! 🎉

📖 **Full Setup Guide**: See [CLAUDE_API_SETUP.md](./CLAUDE_API_SETUP.md) for detailed instructions, cost estimates, and troubleshooting.

💡 **Note**: Without an API key, the app works perfectly but shows mock translations instead of real AI conversions.

### Building for Production

```bash
# Build the application
npm run build

# Start the production server
npm start
```

## 📖 Usage Guide

### Creating Your First Script

1. Click **"New File"** in the file tree
2. Choose a template or start from scratch
3. Write your Lua code in the Monaco editor
4. Click **"Preview"** to test
5. **Copy** or **Export** your script

### Using Templates

1. Click the **Templates** button in the toolbar
2. Browse categories: Beginner, Gameplay, UI, Tools, Advanced
3. Click a template to load it into your editor
4. Customize the code for your needs

### AI Assistant

1. Open the **AI Chat** panel (right side on desktop)
2. Ask questions about:
   - Roblox scripting
   - Code debugging
   - API usage
   - Best practices
3. Get instant, context-aware answers

### Organizing Files

- **Create folders** - Right-click in file tree
- **Drag and drop** - Move files between folders
- **Rename** - Click the menu (⋯) next to a file
- **Delete** - Use the menu to remove files

### Searching

- **Quick search** - `Cmd/Ctrl+P` to find files by name
- **Global search** - `Cmd/Ctrl+Shift+F` to search text across all files
- **In-editor search** - `Cmd/Ctrl+F` to find text in current file

## 🛠️ Tech Stack

- **Next.js 14** - React framework
- **React 18** - UI library
- **TypeScript** - Type safety
- **Monaco Editor** - Code editor
- **Tailwind CSS** - Styling
- **Radix UI** - Component primitives
- **Phosphor Icons** - Icon library
- **Vitest** - Testing framework
- **PostHog** - Analytics (optional)
- **Sentry** - Error tracking (optional)

## 🧪 Running Tests

```bash
# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with UI
npm run test:ui

# Generate coverage report
npm run test:coverage
```

## 📂 Project Structure

```
aethex-studio/
├── src/
│   ├── components/        # React components
│   │   ├── ui/           # Reusable UI components
│   │   ├── CodeEditor.tsx
│   │   ├── FileTree.tsx
│   │   ├── AIChat.tsx
│   │   └── ...
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions
│   │   ├── templates.ts  # Code templates
│   │   └── ...
│   └── App.tsx           # Main application
├── app/                  # Next.js app directory
│   └── globals.css       # Global styles
├── public/               # Static assets
└── tests/                # Test files
```

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📝 Code Templates

AeThex Studio includes 25+ production-ready templates:

**Beginner:**
- Hello World, Player Join Handler, Part Touch Detector, etc.

**Gameplay:**
- DataStore System, Teleport Part, Team System, Combat System, etc.

**UI:**
- GUI Buttons, Proximity Prompts, Countdown Timers, etc.

**Tools:**
- Give Tool, Sound Manager, Admin Commands, Chat Commands, etc.

**Advanced:**
- Round System, Inventory System, Pathfinding NPC, Shop System, etc.

## 🐛 Bug Reports

Found a bug? Please open an issue on GitHub with:
- Description of the bug
- Steps to reproduce
- Expected vs actual behavior
- Screenshots (if applicable)

## 📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

## 🙏 Acknowledgments

- **Monaco Editor** - For the powerful code editor
- **Roblox** - For the game platform
- **Radix UI** - For accessible component primitives
- **Vercel** - For Next.js framework

## 📧 Contact

- **Website**: [aethex.com](https://aethex.com)
- **GitHub**: [@AeThex-LABS](https://github.com/AeThex-LABS)
- **Issues**: [GitHub Issues](https://github.com/AeThex-LABS/aethex-studio/issues)

---

**Built with ❤️ by the AeThex team**

Happy coding! 🎮✨
