Quizard VSCode Extension

Connect your local VSCode workspace to the Quizard game engine with instant hot reload.

Features

• Local-First Development: Edit code on your local machine using VSCode
• Instant Hot Reload: Changes sync to the remote container and trigger Vite HMR (<100ms)
• File Synchronization: Automatic file sync with 500ms debounce
• Game Commands: Play, Build, and Stop your game directly from VSCode
• Status Bar Integration: Visual connection and game status indicators
• Two Development Modes:
  • Client-Only: Frontend development, connects to shared Colyseus server
  • Full-Stack: Local Colyseus instance for multiplayer testing

Installation

1. Install the extension from the VSCode Marketplace (coming soon)
2. Or install from .vsix file: code --install-extension quizard-vscode-0.1.0.vsix

Quick Start

1. Open your game project folder in VSCode
2. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
3. Run command: Quizard: Connect to Workspace
4. Enter your User ID and Auth Token
5. Wait for initial sync to complete
6. Press F5 to play your game!

Commands

• Quizard: Connect to Workspace - Connect to remote workspace
• Quizard: Disconnect - Disconnect from workspace
• Quizard: Play (Client Only) - Run game in client-only mode (F5)
• Quizard: Play Full Stack - Run game with local server (Shift+F5)
• Quizard: Build Project - Build game assets
• Quizard: Stop Game - Stop running game (Shift+F9)
• Quizard: Open Game in Browser - Open game in browser

Configuration

Open VSCode settings (Cmd+, or Ctrl+,) and search for "Quizard":

{
  "quizard.serverUrl": "ws://localhost:3001",
  "quizard.syncDebounce": 500,
  "quizard.autoConnect": false,
  "quizard.excludePatterns": [
    "**/node_modules/**",
    "**/.git/**",
    "**/dist/**",
    "**/build/**",
    "**/.vscode/**"
  ]
}

Settings

• quizard.serverUrl: WebSocket server URL (default: ws://localhost:3001)
• quizard.syncDebounce: File sync debounce time in milliseconds (default: 500)
• quizard.autoConnect: Automatically connect on startup (default: false)
• quizard.excludePatterns: File patterns to exclude from sync

Workflow

1. Connect: Connect VSCode to your Quizard workspace
2. Edit: Make changes to your code locally
3. Auto-Sync: Files automatically sync to the remote container
4. Hot Reload: Vite HMR updates the browser instantly
5. Play: Test your game with F5 or Shift+F5

Status Bar

The status bar shows your current connection and game state:

• 🔌 Connected - Connected to workspace (click to disconnect)
• 🔴 Disconnected - Not connected (click to connect)
• 🔄 Syncing - Syncing files
• ▶️ Running - Game is running (click to stop)

Development Modes

Client-Only Mode (F5)

Perfect for frontend development:

• Starts Vite dev server in container
• Connects to shared Colyseus server
• Fast startup (~2 seconds)
• Great for UI/UX work

Full-Stack Mode (Shift+F5)

For multiplayer testing:

• Starts Vite + local Colyseus server
• Complete game environment
• Test multiplayer features
• Slower startup (~5 seconds)

Troubleshooting

Connection Issues

• Ensure the Quizard server is running
• Check serverUrl in settings
• Verify your auth token is valid
• Check the Output panel: View > Output > Quizard

Sync Issues

• Check excluded patterns in settings
• Ensure files aren't too large (>100MB)
• Check disk space in container
• Review logs in Output panel

Game Not Starting

• Ensure you're connected to workspace
• Check for build errors in Output panel
• Verify package.json scripts are correct
• Try rebuilding: Quizard: Build Project

Support

• GitHub: https://github.com/CorianderCake/kizami
• Issues: Report bugs via GitHub Issues
• Documentation: See project README

License

MIT