@myvillage/cli 1.0.0

package/src/utils/templates.js

@@ -0,0 +1,1301 @@
+import { mkdirSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+// MyVillage brand colors
+const BRAND = {
+  gold: '#FFD700',
+  brown: '#8B4513',
+  green: '#228B22',
+  primary: '#B07C00',
+  secondary: '#E4DCCB',
+  darkBrown: '#302017',
+  deepGreen: '#043922',
+  teal: '#799C9F',
+};
+
+export function createGameProject(targetDir, options) {
+  const { name, description, type, ageGroup } = options;
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+
+  // Create directory structure
+  const dirs = [
+    '',
+    'public',
+    'public/assets',
+    'public/assets/models',
+    'public/assets/textures',
+    'public/assets/audio',
+    'src',
+    'src/scenes',
+    'src/components',
+    'src/utils',
+  ];
+
+  for (const dir of dirs) {
+    mkdirSync(join(targetDir, dir), { recursive: true });
+  }
+
+  // Write common files
+  writeFileSync(join(targetDir, 'package.json'), generatePackageJson(name, description, slug, type));
+  writeFileSync(join(targetDir, 'vite.config.js'), generateViteConfig());
+  writeFileSync(join(targetDir, '.gitignore'), generateGitignore());
+  writeFileSync(join(targetDir, 'README.md'), generateReadme(name, description, type, ageGroup));
+  writeFileSync(join(targetDir, 'public/index.html'), generateIndexHtml(name));
+
+  // Write base source files
+  writeFileSync(join(targetDir, 'src/main.js'), generateMainJs(type));
+  writeFileSync(join(targetDir, 'src/scenes/MainScene.js'), generateMainScene(type));
+  writeFileSync(join(targetDir, 'src/utils/InputManager.js'), generateInputManager());
+  writeFileSync(join(targetDir, 'src/utils/AudioManager.js'), generateAudioManager());
+  writeFileSync(join(targetDir, 'src/components/UI.js'), generateUI(type));
+
+  // Write game-type-specific files
+  switch (type) {
+    case 'quiz':
+      writeFileSync(join(targetDir, 'src/components/GameLogic.js'), generateQuizGameLogic());
+      break;
+    case 'exploration':
+      writeFileSync(join(targetDir, 'src/components/GameLogic.js'), generateExplorationGameLogic());
+      break;
+    case 'narrative':
+      writeFileSync(join(targetDir, 'src/components/GameLogic.js'), generateNarrativeGameLogic());
+      break;
+    default:
+      writeFileSync(join(targetDir, 'src/components/GameLogic.js'), generateBaseGameLogic());
+      break;
+  }
+}
+
+function generatePackageJson(name, description, slug, type) {
+  return JSON.stringify({
+    name: slug,
+    version: '1.0.0',
+    description,
+    private: true,
+    type: 'module',
+    scripts: {
+      dev: 'vite',
+      build: 'vite build',
+      preview: 'vite preview',
+    },
+    dependencies: {
+      three: '^0.161.0',
+    },
+    devDependencies: {
+      vite: '^5.0.0',
+    },
+    myvillage: {
+      gameId: null,
+      gameType: type,
+      lastDeployed: null,
+    },
+  }, null, 2) + '\n';
+}
+
+function generateViteConfig() {
+  return `import { defineConfig } from 'vite';
+
+export default defineConfig({
+  root: '.',
+  publicDir: 'public',
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+});
+`;
+}
+
+function generateGitignore() {
+  return `node_modules/
+dist/
+.DS_Store
+*.log
+`;
+}
+
+function generateReadme(name, description, type, ageGroup) {
+  return `# ${name}
+
+${description}
+
+- **Game Type**: ${type}
+- **Target Age Group**: ${ageGroup}
+- **Engine**: Three.js
+- **Built with**: MyVillageOS CLI
+
+## Getting Started
+
+\`\`\`bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+src/
+  main.js           - Game entry point, sets up Three.js renderer
+  scenes/
+    MainScene.js    - Main Three.js scene with lighting and camera
+  components/
+    UI.js           - UI overlay (HUD, menus, dialogs)
+    GameLogic.js    - Core game logic and state management
+  utils/
+    InputManager.js - Keyboard, mouse, and touch input handling
+    AudioManager.js - Sound effects and background music
+public/
+  index.html        - HTML entry point
+  assets/           - Static assets (models, textures, audio)
+\`\`\`
+
+## Deploying to MyVillageOS
+
+When your game is ready, deploy it to the MyVillageOS platform:
+
+\`\`\`bash
+myvillage deploy
+\`\`\`
+
+You'll earn MVT tokens for successful deployments!
+
+## Learn More
+
+- [Three.js Documentation](https://threejs.org/docs/)
+- [Vite Documentation](https://vitejs.dev/)
+- [MyVillageOS Developer Guide](https://portal.myvillageproject.ai)
+`;
+}
+
+function generateIndexHtml(name) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${name}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; overflow: hidden; }
+    body { background: ${BRAND.darkBrown}; }
+    #game-container { width: 100%; height: 100%; position: relative; }
+    canvas { display: block; }
+
+    /* Loading screen */
+    #loading-screen {
+      position: absolute;
+      top: 0; left: 0; width: 100%; height: 100%;
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      background: ${BRAND.darkBrown};
+      color: ${BRAND.secondary};
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      z-index: 100;
+      transition: opacity 0.5s;
+    }
+    #loading-screen.hidden { opacity: 0; pointer-events: none; }
+    #loading-screen h1 { color: ${BRAND.gold}; margin-bottom: 20px; }
+    #progress-bar {
+      width: 200px; height: 6px;
+      background: rgba(255,255,255,0.2);
+      border-radius: 3px; overflow: hidden;
+    }
+    #progress-fill {
+      height: 100%; width: 0%;
+      background: ${BRAND.gold};
+      transition: width 0.3s;
+    }
+
+    /* UI overlay */
+    #ui-overlay {
+      position: absolute;
+      top: 0; left: 0; width: 100%; height: 100%;
+      pointer-events: none;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    #ui-overlay > * { pointer-events: auto; }
+  </style>
+</head>
+<body>
+  <div id="game-container">
+    <div id="loading-screen">
+      <h1>${name}</h1>
+      <div id="progress-bar"><div id="progress-fill"></div></div>
+      <p id="loading-text" style="margin-top: 10px; font-size: 14px;">Loading...</p>
+    </div>
+    <div id="ui-overlay"></div>
+  </div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>
+`;
+}
+
+function generateMainJs(type) {
+  return `// Game Entry Point
+// This file initializes the Three.js renderer and starts the game loop.
+
+import * as THREE from 'three';
+import { MainScene } from './scenes/MainScene.js';
+import { InputManager } from './utils/InputManager.js';
+import { AudioManager } from './utils/AudioManager.js';
+import { GameLogic } from './components/GameLogic.js';
+import { UI } from './components/UI.js';
+
+class Game {
+  constructor() {
+    this.container = document.getElementById('game-container');
+    this.clock = new THREE.Clock();
+
+    // Game state: 'loading' | 'menu' | 'playing' | 'paused' | 'gameover'
+    this.state = 'loading';
+
+    this.init();
+  }
+
+  init() {
+    // Set up renderer with responsive canvas
+    this.renderer = new THREE.WebGLRenderer({ antialias: true });
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    this.renderer.shadowMap.enabled = true;
+    this.container.appendChild(this.renderer.domElement);
+
+    // Initialize subsystems
+    this.input = new InputManager(this.renderer.domElement);
+    this.audio = new AudioManager();
+    this.scene = new MainScene();
+    this.gameLogic = new GameLogic(this);
+    this.ui = new UI(this);
+
+    // Handle window resize
+    window.addEventListener('resize', () => this.onResize());
+
+    // Simulate asset loading (replace with real asset loading in your game)
+    this.loadAssets().then(() => {
+      this.state = 'menu';
+      this.hideLoadingScreen();
+      this.ui.showMenu();
+    });
+
+    // Start game loop
+    this.animate();
+  }
+
+  async loadAssets() {
+    const progressFill = document.getElementById('progress-fill');
+    const loadingText = document.getElementById('loading-text');
+
+    // Simulate loading progress - replace with actual asset loading
+    const steps = ['Preparing scene...', 'Loading assets...', 'Almost ready...'];
+    for (let i = 0; i < steps.length; i++) {
+      loadingText.textContent = steps[i];
+      progressFill.style.width = \`\${((i + 1) / steps.length) * 100}%\`;
+      await new Promise((r) => setTimeout(r, 300));
+    }
+  }
+
+  hideLoadingScreen() {
+    const screen = document.getElementById('loading-screen');
+    screen.classList.add('hidden');
+    setTimeout(() => screen.remove(), 500);
+  }
+
+  onResize() {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+
+    this.scene.camera.aspect = width / height;
+    this.scene.camera.updateProjectionMatrix();
+    this.renderer.setSize(width, height);
+  }
+
+  startGame() {
+    this.state = 'playing';
+    this.gameLogic.start();
+    this.ui.showHUD();
+  }
+
+  pauseGame() {
+    this.state = 'paused';
+    this.ui.showPauseMenu();
+  }
+
+  resumeGame() {
+    this.state = 'playing';
+    this.ui.showHUD();
+  }
+
+  endGame(result) {
+    this.state = 'gameover';
+    this.ui.showGameOver(result);
+  }
+
+  animate() {
+    requestAnimationFrame(() => this.animate());
+
+    const delta = this.clock.getDelta();
+
+    if (this.state === 'playing') {
+      this.gameLogic.update(delta);
+      this.scene.update(delta);
+    }
+
+    this.renderer.render(this.scene.scene, this.scene.camera);
+  }
+}
+
+// Start the game
+const game = new Game();
+
+// Make game globally accessible for debugging
+window.game = game;
+`;
+}
+
+function generateMainScene(type) {
+  return `// Main Three.js Scene
+// Sets up camera, lighting, and the 3D environment.
+
+import * as THREE from 'three';
+
+export class MainScene {
+  constructor() {
+    // Create scene
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color(0x87CEEB); // Sky blue
+
+    // Camera setup with perspective projection
+    this.camera = new THREE.PerspectiveCamera(
+      60,                                     // FOV
+      window.innerWidth / window.innerHeight, // Aspect ratio
+      0.1,                                    // Near plane
+      1000                                    // Far plane
+    );
+    this.camera.position.set(0, 5, 10);
+    this.camera.lookAt(0, 0, 0);
+
+    // Lighting setup
+    this.setupLighting();
+
+    // Create ground plane
+    this.setupEnvironment();
+  }
+
+  setupLighting() {
+    // Ambient light for overall illumination
+    const ambient = new THREE.AmbientLight(0xffffff, 0.5);
+    this.scene.add(ambient);
+
+    // Directional light (sun) with shadows
+    const sun = new THREE.DirectionalLight(0xffffff, 1.0);
+    sun.position.set(10, 20, 10);
+    sun.castShadow = true;
+    sun.shadow.mapSize.width = 2048;
+    sun.shadow.mapSize.height = 2048;
+    sun.shadow.camera.near = 0.5;
+    sun.shadow.camera.far = 50;
+    sun.shadow.camera.left = -20;
+    sun.shadow.camera.right = 20;
+    sun.shadow.camera.top = 20;
+    sun.shadow.camera.bottom = -20;
+    this.scene.add(sun);
+  }
+
+  setupEnvironment() {
+    // Ground plane using MyVillage brand green
+    const groundGeometry = new THREE.PlaneGeometry(50, 50);
+    const groundMaterial = new THREE.MeshStandardMaterial({
+      color: 0x228B22, // MyVillage green
+      roughness: 0.8,
+    });
+    const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+    ground.rotation.x = -Math.PI / 2;
+    ground.receiveShadow = true;
+    this.scene.add(ground);
+
+    // Add a sample object - replace with your game objects
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    const material = new THREE.MeshStandardMaterial({
+      color: 0xFFD700, // MyVillage gold
+    });
+    this.sampleObject = new THREE.Mesh(geometry, material);
+    this.sampleObject.position.y = 0.5;
+    this.sampleObject.castShadow = true;
+    this.scene.add(this.sampleObject);
+  }
+
+  update(delta) {
+    // Rotate the sample object - replace with your scene updates
+    if (this.sampleObject) {
+      this.sampleObject.rotation.y += delta * 0.5;
+    }
+  }
+}
+`;
+}
+
+function generateInputManager() {
+  return `// Input Manager
+// Handles keyboard, mouse, and touch input for both desktop and mobile.
+
+export class InputManager {
+  constructor(canvas) {
+    this.canvas = canvas;
+
+    // Keyboard state
+    this.keys = {};
+    this.keysJustPressed = {};
+
+    // Mouse state
+    this.mouse = { x: 0, y: 0, down: false };
+
+    // Touch state
+    this.touches = [];
+    this.isTouchDevice = 'ontouchstart' in window;
+
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    // Keyboard events
+    window.addEventListener('keydown', (e) => {
+      if (!this.keys[e.code]) {
+        this.keysJustPressed[e.code] = true;
+      }
+      this.keys[e.code] = true;
+    });
+
+    window.addEventListener('keyup', (e) => {
+      this.keys[e.code] = false;
+    });
+
+    // Mouse events
+    this.canvas.addEventListener('mousemove', (e) => {
+      // Normalized device coordinates (-1 to +1)
+      this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+      this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+    });
+
+    this.canvas.addEventListener('mousedown', () => {
+      this.mouse.down = true;
+    });
+
+    this.canvas.addEventListener('mouseup', () => {
+      this.mouse.down = false;
+    });
+
+    // Touch events
+    this.canvas.addEventListener('touchstart', (e) => {
+      this.touches = Array.from(e.touches).map((t) => ({
+        x: (t.clientX / window.innerWidth) * 2 - 1,
+        y: -(t.clientY / window.innerHeight) * 2 + 1,
+        id: t.identifier,
+      }));
+    });
+
+    this.canvas.addEventListener('touchmove', (e) => {
+      e.preventDefault();
+      this.touches = Array.from(e.touches).map((t) => ({
+        x: (t.clientX / window.innerWidth) * 2 - 1,
+        y: -(t.clientY / window.innerHeight) * 2 + 1,
+        id: t.identifier,
+      }));
+    }, { passive: false });
+
+    this.canvas.addEventListener('touchend', (e) => {
+      this.touches = Array.from(e.touches).map((t) => ({
+        x: (t.clientX / window.innerWidth) * 2 - 1,
+        y: -(t.clientY / window.innerHeight) * 2 + 1,
+        id: t.identifier,
+      }));
+    });
+  }
+
+  // Check if a key is currently held down
+  isKeyDown(code) {
+    return !!this.keys[code];
+  }
+
+  // Check if a key was just pressed this frame (call clearFrame() each frame)
+  isKeyJustPressed(code) {
+    return !!this.keysJustPressed[code];
+  }
+
+  // Get WASD / arrow key movement vector
+  getMovementVector() {
+    let x = 0;
+    let z = 0;
+
+    if (this.isKeyDown('KeyW') || this.isKeyDown('ArrowUp')) z -= 1;
+    if (this.isKeyDown('KeyS') || this.isKeyDown('ArrowDown')) z += 1;
+    if (this.isKeyDown('KeyA') || this.isKeyDown('ArrowLeft')) x -= 1;
+    if (this.isKeyDown('KeyD') || this.isKeyDown('ArrowRight')) x += 1;
+
+    // Normalize diagonal movement
+    const length = Math.sqrt(x * x + z * z);
+    if (length > 0) {
+      x /= length;
+      z /= length;
+    }
+
+    return { x, z };
+  }
+
+  // Call at the end of each frame to clear one-shot inputs
+  clearFrame() {
+    this.keysJustPressed = {};
+  }
+}
+`;
+}
+
+function generateAudioManager() {
+  return `// Audio Manager
+// Handles sound effects and background music using the Web Audio API.
+
+export class AudioManager {
+  constructor() {
+    this.context = null;
+    this.sounds = new Map();
+    this.musicGain = null;
+    this.sfxGain = null;
+    this.initialized = false;
+  }
+
+  // Initialize audio context on first user interaction
+  init() {
+    if (this.initialized) return;
+
+    this.context = new (window.AudioContext || window.webkitAudioContext)();
+    this.musicGain = this.context.createGain();
+    this.sfxGain = this.context.createGain();
+    this.musicGain.connect(this.context.destination);
+    this.sfxGain.connect(this.context.destination);
+
+    this.musicGain.gain.value = 0.5;
+    this.sfxGain.gain.value = 0.8;
+
+    this.initialized = true;
+  }
+
+  // Load an audio file and store it by name
+  async loadSound(name, url) {
+    this.init();
+
+    try {
+      const response = await fetch(url);
+      const arrayBuffer = await response.arrayBuffer();
+      const audioBuffer = await this.context.decodeAudioData(arrayBuffer);
+      this.sounds.set(name, audioBuffer);
+    } catch (err) {
+      console.warn(\`Failed to load sound "\${name}" from \${url}:\`, err.message);
+    }
+  }
+
+  // Play a loaded sound effect
+  playSFX(name) {
+    this.init();
+
+    const buffer = this.sounds.get(name);
+    if (!buffer) return;
+
+    const source = this.context.createBufferSource();
+    source.buffer = buffer;
+    source.connect(this.sfxGain);
+    source.start(0);
+  }
+
+  // Play a loaded sound as looping background music
+  playMusic(name) {
+    this.init();
+    this.stopMusic();
+
+    const buffer = this.sounds.get(name);
+    if (!buffer) return;
+
+    this.currentMusic = this.context.createBufferSource();
+    this.currentMusic.buffer = buffer;
+    this.currentMusic.loop = true;
+    this.currentMusic.connect(this.musicGain);
+    this.currentMusic.start(0);
+  }
+
+  stopMusic() {
+    if (this.currentMusic) {
+      this.currentMusic.stop();
+      this.currentMusic = null;
+    }
+  }
+
+  setMusicVolume(value) {
+    if (this.musicGain) this.musicGain.gain.value = Math.max(0, Math.min(1, value));
+  }
+
+  setSFXVolume(value) {
+    if (this.sfxGain) this.sfxGain.gain.value = Math.max(0, Math.min(1, value));
+  }
+}
+`;
+}
+
+function generateUI(type) {
+  let typeSpecificUI = '';
+
+  switch (type) {
+    case 'quiz':
+      typeSpecificUI = `
+  showQuestion(question, choices, onAnswer) {
+    this.clearOverlay();
+
+    const panel = this.createElement('div', {
+      position: 'absolute', bottom: '20px', left: '50%', transform: 'translateX(-50%)',
+      width: '90%', maxWidth: '600px', background: 'rgba(48,32,23,0.95)',
+      borderRadius: '16px', padding: '24px', color: '#E4DCCB',
+    });
+
+    const qText = this.createElement('p', {
+      fontSize: '18px', fontWeight: 'bold', marginBottom: '16px',
+      color: '#FFD700', textAlign: 'center',
+    });
+    qText.textContent = question;
+    panel.appendChild(qText);
+
+    choices.forEach((choice, index) => {
+      const btn = this.createElement('button', {
+        display: 'block', width: '100%', padding: '12px',
+        margin: '8px 0', background: '#043922', color: '#E4DCCB',
+        border: '2px solid #228B22', borderRadius: '8px',
+        fontSize: '16px', cursor: 'pointer', textAlign: 'left',
+      });
+      btn.textContent = choice;
+      btn.addEventListener('click', () => onAnswer(index));
+      panel.appendChild(btn);
+    });
+
+    this.overlay.appendChild(panel);
+  }
+
+  showScore(score, total) {
+    this.clearOverlay();
+
+    const panel = this.createElement('div', {
+      position: 'absolute', top: '10px', right: '10px',
+      background: 'rgba(48,32,23,0.85)', borderRadius: '12px',
+      padding: '10px 18px', color: '#FFD700', fontSize: '18px', fontWeight: 'bold',
+    });
+    panel.textContent = \`Score: \${score} / \${total}\`;
+    this.overlay.appendChild(panel);
+  }`;
+      break;
+
+    case 'exploration':
+      typeSpecificUI = `
+  showMinimap(playerPos, items) {
+    // Minimap rendering in top-right corner
+    let minimap = this.overlay.querySelector('#minimap');
+    if (!minimap) {
+      minimap = this.createElement('canvas', {
+        position: 'absolute', top: '10px', right: '10px',
+        width: '150px', height: '150px',
+        background: 'rgba(48,32,23,0.8)', borderRadius: '8px',
+        border: '2px solid #B07C00',
+      });
+      minimap.id = 'minimap';
+      minimap.width = 150;
+      minimap.height = 150;
+      this.overlay.appendChild(minimap);
+    }
+
+    const ctx = minimap.getContext('2d');
+    ctx.clearRect(0, 0, 150, 150);
+
+    // Draw player
+    ctx.fillStyle = '#FFD700';
+    ctx.beginPath();
+    ctx.arc(75 + playerPos.x * 3, 75 + playerPos.z * 3, 4, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Draw collectible items
+    ctx.fillStyle = '#228B22';
+    items.forEach((item) => {
+      ctx.beginPath();
+      ctx.arc(75 + item.x * 3, 75 + item.z * 3, 3, 0, Math.PI * 2);
+      ctx.fill();
+    });
+  }
+
+  showInventory(items) {
+    let inv = this.overlay.querySelector('#inventory');
+    if (!inv) {
+      inv = this.createElement('div', {
+        position: 'absolute', bottom: '10px', left: '50%', transform: 'translateX(-50%)',
+        display: 'flex', gap: '8px', background: 'rgba(48,32,23,0.85)',
+        padding: '10px', borderRadius: '12px',
+      });
+      inv.id = 'inventory';
+      this.overlay.appendChild(inv);
+    }
+    inv.innerHTML = '';
+
+    items.forEach((item) => {
+      const slot = this.createElement('div', {
+        width: '48px', height: '48px', background: '#043922',
+        borderRadius: '8px', border: '2px solid #228B22',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        color: '#FFD700', fontSize: '12px', textAlign: 'center',
+      });
+      slot.textContent = item.name;
+      inv.appendChild(slot);
+    });
+  }`;
+      break;
+
+    case 'narrative':
+      typeSpecificUI = `
+  showDialogue(speaker, text, choices, onChoice) {
+    this.clearOverlay();
+
+    const panel = this.createElement('div', {
+      position: 'absolute', bottom: '0', left: '0', width: '100%',
+      background: 'rgba(48,32,23,0.95)', padding: '20px 24px',
+      borderTop: '3px solid #B07C00', color: '#E4DCCB',
+    });
+
+    if (speaker) {
+      const nameTag = this.createElement('span', {
+        color: '#FFD700', fontWeight: 'bold', fontSize: '16px',
+        marginBottom: '8px', display: 'block',
+      });
+      nameTag.textContent = speaker;
+      panel.appendChild(nameTag);
+    }
+
+    const textEl = this.createElement('p', {
+      fontSize: '15px', lineHeight: '1.5', marginBottom: choices ? '16px' : '0',
+    });
+    textEl.textContent = text;
+    panel.appendChild(textEl);
+
+    if (choices && choices.length > 0) {
+      choices.forEach((choice, index) => {
+        const btn = this.createElement('button', {
+          display: 'block', width: '100%', padding: '10px',
+          margin: '6px 0', background: 'transparent', color: '#FFD700',
+          border: '1px solid #B07C00', borderRadius: '8px',
+          fontSize: '14px', cursor: 'pointer', textAlign: 'left',
+        });
+        btn.textContent = \`> \${choice}\`;
+        btn.addEventListener('click', () => onChoice(index));
+        panel.appendChild(btn);
+      });
+    } else {
+      const hint = this.createElement('p', {
+        fontSize: '12px', color: '#799C9F', marginTop: '8px', textAlign: 'center',
+      });
+      hint.textContent = 'Click to continue...';
+      panel.appendChild(hint);
+      panel.addEventListener('click', () => onChoice(-1));
+    }
+
+    this.overlay.appendChild(panel);
+  }`;
+      break;
+
+    default:
+      typeSpecificUI = '';
+  }
+
+  return `// UI Overlay Manager
+// Manages HUD elements, menus, and dialogs rendered as HTML over the canvas.
+
+export class UI {
+  constructor(game) {
+    this.game = game;
+    this.overlay = document.getElementById('ui-overlay');
+  }
+
+  // Helper to create a styled DOM element
+  createElement(tag, styles) {
+    const el = document.createElement(tag);
+    Object.assign(el.style, styles);
+    return el;
+  }
+
+  clearOverlay() {
+    this.overlay.innerHTML = '';
+  }
+
+  showMenu() {
+    this.clearOverlay();
+
+    const menu = this.createElement('div', {
+      position: 'absolute', top: '50%', left: '50%',
+      transform: 'translate(-50%, -50%)', textAlign: 'center',
+      color: '#E4DCCB',
+    });
+
+    const title = this.createElement('h1', {
+      fontSize: '36px', color: '#FFD700', marginBottom: '30px',
+    });
+    title.textContent = document.title;
+    menu.appendChild(title);
+
+    const playBtn = this.createElement('button', {
+      padding: '14px 48px', fontSize: '18px', fontWeight: 'bold',
+      background: '#B07C00', color: 'white', border: 'none',
+      borderRadius: '12px', cursor: 'pointer',
+    });
+    playBtn.textContent = 'Play';
+    playBtn.addEventListener('click', () => this.game.startGame());
+    menu.appendChild(playBtn);
+
+    this.overlay.appendChild(menu);
+  }
+
+  showHUD() {
+    this.clearOverlay();
+
+    const pauseBtn = this.createElement('button', {
+      position: 'absolute', top: '10px', right: '10px',
+      padding: '8px 16px', background: 'rgba(48,32,23,0.7)',
+      color: '#E4DCCB', border: '1px solid #B07C00',
+      borderRadius: '8px', cursor: 'pointer', fontSize: '14px',
+    });
+    pauseBtn.textContent = 'Pause';
+    pauseBtn.addEventListener('click', () => this.game.pauseGame());
+    this.overlay.appendChild(pauseBtn);
+  }
+
+  showPauseMenu() {
+    this.clearOverlay();
+
+    const menu = this.createElement('div', {
+      position: 'absolute', top: '50%', left: '50%',
+      transform: 'translate(-50%, -50%)', textAlign: 'center',
+      background: 'rgba(48,32,23,0.9)', padding: '30px 40px',
+      borderRadius: '16px', color: '#E4DCCB',
+    });
+
+    const title = this.createElement('h2', {
+      color: '#FFD700', marginBottom: '20px',
+    });
+    title.textContent = 'Paused';
+    menu.appendChild(title);
+
+    const resumeBtn = this.createElement('button', {
+      display: 'block', width: '100%', padding: '12px',
+      margin: '8px 0', background: '#B07C00', color: 'white',
+      border: 'none', borderRadius: '8px', fontSize: '16px', cursor: 'pointer',
+    });
+    resumeBtn.textContent = 'Resume';
+    resumeBtn.addEventListener('click', () => this.game.resumeGame());
+    menu.appendChild(resumeBtn);
+
+    this.overlay.appendChild(menu);
+  }
+
+  showGameOver(result) {
+    this.clearOverlay();
+
+    const panel = this.createElement('div', {
+      position: 'absolute', top: '50%', left: '50%',
+      transform: 'translate(-50%, -50%)', textAlign: 'center',
+      background: 'rgba(48,32,23,0.95)', padding: '30px 40px',
+      borderRadius: '16px', color: '#E4DCCB',
+    });
+
+    const title = this.createElement('h2', {
+      color: '#FFD700', marginBottom: '10px',
+    });
+    title.textContent = result?.won ? 'Congratulations!' : 'Game Over';
+    panel.appendChild(title);
+
+    if (result?.score !== undefined) {
+      const score = this.createElement('p', {
+        fontSize: '20px', marginBottom: '20px',
+      });
+      score.textContent = \`Score: \${result.score}\`;
+      panel.appendChild(score);
+    }
+
+    const retryBtn = this.createElement('button', {
+      padding: '12px 36px', background: '#B07C00', color: 'white',
+      border: 'none', borderRadius: '8px', fontSize: '16px', cursor: 'pointer',
+    });
+    retryBtn.textContent = 'Play Again';
+    retryBtn.addEventListener('click', () => {
+      this.game.gameLogic.reset();
+      this.game.startGame();
+    });
+    panel.appendChild(retryBtn);
+
+    this.overlay.appendChild(panel);
+  }
+${typeSpecificUI}
+}
+`;
+}
+
+function generateBaseGameLogic() {
+  return `// Base Game Logic
+// Manages game state, scoring, and core game mechanics.
+// Customize this file to build your game!
+
+export class GameLogic {
+  constructor(game) {
+    this.game = game;
+    this.score = 0;
+    this.time = 0;
+  }
+
+  start() {
+    this.score = 0;
+    this.time = 0;
+  }
+
+  reset() {
+    this.score = 0;
+    this.time = 0;
+  }
+
+  update(delta) {
+    this.time += delta;
+
+    // Add your game logic here!
+    // Access input: this.game.input.isKeyDown('Space')
+    // Access scene: this.game.scene
+    // Access audio: this.game.audio.playSFX('jump')
+    // End game: this.game.endGame({ won: true, score: this.score })
+  }
+}
+`;
+}
+
+function generateQuizGameLogic() {
+  return `// Quiz Game Logic
+// Manages questions, answers, scoring, and progress tracking.
+
+export class GameLogic {
+  constructor(game) {
+    this.game = game;
+    this.score = 0;
+    this.currentQuestion = 0;
+
+    // Define your quiz questions here
+    this.questions = [
+      {
+        question: 'What is 2 + 2?',
+        choices: ['3', '4', '5', '6'],
+        correct: 1,
+      },
+      {
+        question: 'What is the capital of France?',
+        choices: ['London', 'Berlin', 'Paris', 'Madrid'],
+        correct: 2,
+      },
+      {
+        question: 'Which planet is closest to the Sun?',
+        choices: ['Venus', 'Mercury', 'Earth', 'Mars'],
+        correct: 1,
+      },
+    ];
+  }
+
+  start() {
+    this.score = 0;
+    this.currentQuestion = 0;
+    this.showCurrentQuestion();
+  }
+
+  reset() {
+    this.score = 0;
+    this.currentQuestion = 0;
+  }
+
+  showCurrentQuestion() {
+    if (this.currentQuestion >= this.questions.length) {
+      // Quiz complete
+      this.game.endGame({
+        won: this.score > this.questions.length / 2,
+        score: this.score,
+      });
+      return;
+    }
+
+    const q = this.questions[this.currentQuestion];
+    this.game.ui.showQuestion(q.question, q.choices, (answerIndex) => {
+      this.handleAnswer(answerIndex);
+    });
+    this.game.ui.showScore(this.score, this.questions.length);
+  }
+
+  handleAnswer(answerIndex) {
+    const q = this.questions[this.currentQuestion];
+
+    if (answerIndex === q.correct) {
+      this.score++;
+      // Play celebration animation - rotate the sample object faster
+      if (this.game.scene.sampleObject) {
+        this.game.scene.sampleObject.scale.set(1.5, 1.5, 1.5);
+        setTimeout(() => {
+          this.game.scene.sampleObject.scale.set(1, 1, 1);
+        }, 500);
+      }
+    }
+
+    this.currentQuestion++;
+    this.showCurrentQuestion();
+  }
+
+  update(delta) {
+    // Quiz games are event-driven, so update is minimal
+  }
+}
+`;
+}
+
+function generateExplorationGameLogic() {
+  return `// Exploration Game Logic
+// Manages character movement, collision detection, and collectible items.
+
+import * as THREE from 'three';
+
+export class GameLogic {
+  constructor(game) {
+    this.game = game;
+    this.score = 0;
+    this.moveSpeed = 5;
+    this.player = null;
+    this.collectibles = [];
+    this.collectedItems = [];
+  }
+
+  start() {
+    this.score = 0;
+    this.collectedItems = [];
+    this.setupPlayer();
+    this.spawnCollectibles();
+  }
+
+  reset() {
+    // Remove existing objects
+    if (this.player) this.game.scene.scene.remove(this.player);
+    this.collectibles.forEach((c) => this.game.scene.scene.remove(c.mesh));
+    this.collectibles = [];
+    this.collectedItems = [];
+    this.score = 0;
+  }
+
+  setupPlayer() {
+    // Create a simple player character (gold cube)
+    const geometry = new THREE.BoxGeometry(0.8, 1.2, 0.8);
+    const material = new THREE.MeshStandardMaterial({ color: 0xFFD700 });
+    this.player = new THREE.Mesh(geometry, material);
+    this.player.position.set(0, 0.6, 0);
+    this.player.castShadow = true;
+    this.game.scene.scene.add(this.player);
+
+    // Update camera to follow player
+    this.game.scene.camera.position.set(0, 8, 12);
+  }
+
+  spawnCollectibles() {
+    // Spawn collectible items in random positions
+    const items = [
+      { name: 'Star', color: 0xFFD700 },
+      { name: 'Gem', color: 0x228B22 },
+      { name: 'Coin', color: 0xB07C00 },
+    ];
+
+    for (let i = 0; i < 10; i++) {
+      const item = items[i % items.length];
+      const geometry = new THREE.SphereGeometry(0.3, 8, 8);
+      const material = new THREE.MeshStandardMaterial({ color: item.color, emissive: item.color, emissiveIntensity: 0.3 });
+      const mesh = new THREE.Mesh(geometry, material);
+
+      mesh.position.set(
+        (Math.random() - 0.5) * 20,
+        0.5,
+        (Math.random() - 0.5) * 20
+      );
+      mesh.castShadow = true;
+
+      this.game.scene.scene.add(mesh);
+      this.collectibles.push({ mesh, name: item.name, collected: false });
+    }
+  }
+
+  update(delta) {
+    if (!this.player) return;
+
+    // WASD movement
+    const movement = this.game.input.getMovementVector();
+    this.player.position.x += movement.x * this.moveSpeed * delta;
+    this.player.position.z += movement.z * this.moveSpeed * delta;
+
+    // Keep player within bounds
+    this.player.position.x = Math.max(-24, Math.min(24, this.player.position.x));
+    this.player.position.z = Math.max(-24, Math.min(24, this.player.position.z));
+
+    // Camera follows player
+    this.game.scene.camera.position.x = this.player.position.x;
+    this.game.scene.camera.position.z = this.player.position.z + 12;
+    this.game.scene.camera.lookAt(this.player.position);
+
+    // Check collisions with collectibles
+    this.collectibles.forEach((item) => {
+      if (item.collected) return;
+
+      const dist = this.player.position.distanceTo(item.mesh.position);
+      if (dist < 1.0) {
+        item.collected = true;
+        this.game.scene.scene.remove(item.mesh);
+        this.collectedItems.push({ name: item.name });
+        this.score++;
+      }
+    });
+
+    // Rotate uncollected items
+    this.collectibles.forEach((item) => {
+      if (!item.collected) {
+        item.mesh.rotation.y += delta * 2;
+        item.mesh.position.y = 0.5 + Math.sin(Date.now() * 0.003) * 0.15;
+      }
+    });
+
+    // Update UI
+    this.game.ui.showInventory(this.collectedItems);
+    this.game.ui.showMinimap(
+      this.player.position,
+      this.collectibles.filter((c) => !c.collected).map((c) => c.mesh.position)
+    );
+
+    // Check win condition
+    const remaining = this.collectibles.filter((c) => !c.collected).length;
+    if (remaining === 0) {
+      this.game.endGame({ won: true, score: this.score });
+    }
+
+    this.game.input.clearFrame();
+  }
+}
+`;
+}
+
+function generateNarrativeGameLogic() {
+  return `// Narrative Game Logic
+// Manages dialogue, choices, scene transitions, and story branching.
+
+export class GameLogic {
+  constructor(game) {
+    this.game = game;
+    this.currentSceneIndex = 0;
+    this.score = 0;
+
+    // Define your story scenes here.
+    // Each scene has speaker, text, and optional choices.
+    // Choices have 'text' and 'next' (index of the next scene to go to).
+    this.storyScenes = [
+      {
+        speaker: 'Narrator',
+        text: 'You find yourself at the entrance to a mysterious village. The golden gates shine in the sunlight.',
+        choices: [
+          { text: 'Enter the village', next: 1 },
+          { text: 'Look around first', next: 2 },
+        ],
+      },
+      {
+        speaker: 'Village Elder',
+        text: 'Welcome, young traveler! We have been expecting you. Our village needs your help.',
+        choices: [
+          { text: 'How can I help?', next: 3 },
+          { text: 'What happened here?', next: 3 },
+        ],
+      },
+      {
+        speaker: 'Narrator',
+        text: 'You notice a weathered signpost and colorful flowers lining a cobblestone path. The village looks peaceful but there is an air of anticipation.',
+        choices: [
+          { text: 'Follow the path inside', next: 1 },
+        ],
+      },
+      {
+        speaker: 'Village Elder',
+        text: 'A great challenge lies ahead. Only someone with courage and wisdom can solve it. Will you accept the quest?',
+        choices: [
+          { text: 'I accept!', next: 4 },
+          { text: 'Tell me more about the quest', next: 4 },
+        ],
+      },
+      {
+        speaker: 'Narrator',
+        text: 'And so your adventure begins... This is where your story continues! Edit the storyScenes array in GameLogic.js to create your own narrative.',
+        choices: null, // null choices = end of story
+      },
+    ];
+  }
+
+  start() {
+    this.currentSceneIndex = 0;
+    this.score = 0;
+    this.showCurrentScene();
+  }
+
+  reset() {
+    this.currentSceneIndex = 0;
+    this.score = 0;
+  }
+
+  showCurrentScene() {
+    const scene = this.storyScenes[this.currentSceneIndex];
+    if (!scene) {
+      this.game.endGame({ won: true, score: this.score });
+      return;
+    }
+
+    const choiceTexts = scene.choices ? scene.choices.map((c) => c.text) : null;
+
+    this.game.ui.showDialogue(scene.speaker, scene.text, choiceTexts, (choiceIndex) => {
+      this.handleChoice(choiceIndex);
+    });
+  }
+
+  handleChoice(choiceIndex) {
+    const scene = this.storyScenes[this.currentSceneIndex];
+
+    if (!scene.choices || choiceIndex === -1) {
+      // End of story
+      this.game.endGame({ won: true, score: this.score });
+      return;
+    }
+
+    const choice = scene.choices[choiceIndex];
+    if (choice && choice.next !== undefined) {
+      this.currentSceneIndex = choice.next;
+      this.score++;
+      this.showCurrentScene();
+    } else {
+      this.game.endGame({ won: true, score: this.score });
+    }
+  }
+
+  update(delta) {
+    // Narrative games are event-driven via UI choices
+  }
+}
+`;
+}