nova64 0.2.5 → 0.2.7

package/dist/examples/hello-3d/code.js

@@ -0,0 +1,325 @@
+// HELLO 3D WORLD - Simple Nintendo 64/PlayStation style 3D demo
+// Demonstrates basic 3D rendering with GPU acceleration
+
+let cubes = [];
+let spheres = [];
+let time = 0;
+let cameraAngle = 0;
+let initialized = false; // Prevents update() from running during scene transitions
+
+// Screen management
+let gameState = 'start'; // 'start', 'playing'
+let startScreenTime = 0;
+let uiButtons = [];
+
+export async function init() {
+  // Clear arrays immediately to prevent update() from accessing deleted meshes
+  initialized = false; // Mark as not ready during initialization
+  cubes = [];
+  spheres = [];
+
+  cls();
+
+  // Setup 3D scene
+  setCameraPosition(0, 5, 15);
+  setCameraTarget(0, 0, 0);
+  setCameraFOV(60);
+
+  // Nintendo 64 style lighting
+  setLightDirection(-0.5, -1, -0.3);
+  setFog(0x202040, 20, 100);
+
+  // Enable retro effects
+  enablePixelation(1);
+  enableDithering(true);
+
+  // Create some basic 3D objects
+  createScene();
+
+  // Initialize start screen
+  initStartScreen();
+
+  initialized = true; // Now safe to update
+  console.log('🎮 Hello 3D World - Nintendo 64/PlayStation style demo loaded!');
+}
+
+function initStartScreen() {
+  uiButtons = [];
+
+  // Start button - positioned higher for easier clicking
+  uiButtons.push(
+    createButton(
+      centerX(220),
+      150,
+      220,
+      55,
+      '▶ START DEMO',
+      () => {
+        console.log('🎯 START BUTTON CLICKED! Changing gameState to playing...');
+        gameState = 'playing';
+        console.log('✅ gameState is now:', gameState);
+      },
+      {
+        normalColor: rgba8(50, 180, 255, 255),
+        hoverColor: rgba8(80, 200, 255, 255),
+        pressedColor: rgba8(20, 140, 220, 255),
+      }
+    )
+  );
+
+  // Info button
+  uiButtons.push(
+    createButton(
+      centerX(200),
+      350,
+      200,
+      45,
+      'ℹ INFO',
+      () => {
+        console.log('Hello 3D World - Basic 3D demo with GPU acceleration');
+      },
+      {
+        normalColor: rgba8(100, 100, 255, 255),
+        hoverColor: rgba8(130, 130, 255, 255),
+        pressedColor: rgba8(70, 70, 220, 255),
+      }
+    )
+  );
+}
+
+function createScene() {
+  // Create stunning holographic spinning cubes with advanced materials
+  const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff];
+  const emissiveColors = [0x330000, 0x003300, 0x000033, 0x333300, 0x330033, 0x003333];
+
+  for (let i = 0; i < 6; i++) {
+    const angle = (i / 6) * Math.PI * 2;
+    const x = Math.cos(angle) * 8;
+    const z = Math.sin(angle) * 8;
+
+    // Create cube with enhanced visual effects
+    const cube = createCube(2, colors[i], [x, 0, z]);
+
+    cubes.push({
+      mesh: cube,
+      x: x,
+      y: 0,
+      z: z,
+      rotationSpeed: 1 + Math.random() * 2,
+      bobPhase: Math.random() * Math.PI * 2,
+      glowPhase: Math.random() * Math.PI * 2,
+    });
+  }
+
+  // Create magical glowing spheres
+  for (let i = 0; i < 4; i++) {
+    const sphere = createSphere(1, 0x88ddff, [
+      (Math.random() - 0.5) * 12,
+      2 + Math.random() * 4,
+      (Math.random() - 0.5) * 12,
+    ]);
+
+    spheres.push({
+      mesh: sphere,
+      x: (Math.random() - 0.5) * 12,
+      y: 2 + Math.random() * 4,
+      z: (Math.random() - 0.5) * 12,
+      vx: (Math.random() - 0.5) * 4,
+      vy: Math.random() * 2,
+      vz: (Math.random() - 0.5) * 4,
+      trail: [],
+    });
+  }
+
+  // Create stunning ground plane
+  const ground = createPlane(40, 40, 0x444466, [0, -2, 0]);
+  setRotation(ground, -Math.PI / 2, 0, 0);
+}
+
+export function update(dt) {
+  // Safety check: Don't update if not initialized OR if arrays are empty (prevents errors during scene transitions)
+  // When scene is cleared, arrays are emptied on next init() call
+  if (!initialized || cubes.length === 0) {
+    return;
+  }
+
+  time += dt;
+
+  if (gameState === 'start') {
+    startScreenTime += dt;
+    updateAllButtons();
+
+    // KEYBOARD FALLBACK: Press ENTER or SPACE to start
+    if (isKeyPressed('Enter') || isKeyPressed(' ') || isKeyPressed('Space')) {
+      console.log('🎮 Keyboard start pressed!');
+      gameState = 'playing';
+      return;
+    }
+
+    // Still animate 3D scene in background
+    cubes.forEach(cube => {
+      cube.bobPhase += dt * 2;
+      const bobY = Math.sin(cube.bobPhase) * 2;
+      setPosition(cube.mesh, cube.x, bobY, cube.z);
+      rotateMesh(cube.mesh, dt * cube.rotationSpeed, dt * cube.rotationSpeed * 0.7, 0);
+    });
+
+    cameraAngle += dt * 0.2;
+    const camX = Math.cos(cameraAngle) * 15;
+    const camZ = Math.sin(cameraAngle) * 15;
+    setCameraPosition(camX, 8, camZ);
+    setCameraTarget(0, 0, 0);
+    return;
+  }
+
+  // Playing state
+  // Rotate cubes
+  cubes.forEach(cube => {
+    cube.bobPhase += dt * 2;
+    const bobY = Math.sin(cube.bobPhase) * 2;
+
+    setPosition(cube.mesh, cube.x, bobY, cube.z);
+    rotateMesh(cube.mesh, dt * cube.rotationSpeed, dt * cube.rotationSpeed * 0.7, 0);
+  });
+
+  // Bounce spheres
+  spheres.forEach(sphere => {
+    sphere.x += sphere.vx * dt;
+    sphere.y += sphere.vy * dt;
+    sphere.z += sphere.vz * dt;
+
+    // Simple physics
+    sphere.vy -= 9.8 * dt; // gravity
+
+    // Ground bounce
+    if (sphere.y < 1) {
+      sphere.y = 1;
+      sphere.vy *= -0.8;
+    }
+
+    // Wall bounds
+    if (Math.abs(sphere.x) > 10) {
+      sphere.vx *= -1;
+      sphere.x = Math.sign(sphere.x) * 10;
+    }
+    if (Math.abs(sphere.z) > 10) {
+      sphere.vz *= -1;
+      sphere.z = Math.sign(sphere.z) * 10;
+    }
+
+    setPosition(sphere.mesh, sphere.x, sphere.y, sphere.z);
+  });
+
+  // Rotate camera
+  cameraAngle += dt * 0.3;
+  const camX = Math.cos(cameraAngle) * 15;
+  const camZ = Math.sin(cameraAngle) * 15;
+
+  setCameraPosition(camX, 8, camZ);
+  setCameraTarget(0, 0, 0);
+}
+
+export function draw() {
+  if (gameState === 'start') {
+    drawStartScreen();
+    return;
+  }
+
+  // Playing - Simple HUD
+  print('🎮 HELLO 3D WORLD', 8, 8, rgba8(0, 255, 255, 255));
+  print('Nintendo 64 / PlayStation Style', 8, 24, rgba8(255, 200, 0, 255));
+  print(`Time: ${time.toFixed(1)}s`, 8, 40, rgba8(255, 255, 255, 255));
+  print(`Objects: ${cubes.length + spheres.length + 1}`, 8, 56, rgba8(100, 255, 100, 255));
+
+  // 3D Stats
+  const stats = get3DStats();
+  if (stats && stats.render) {
+    print(`3D Meshes: ${stats.meshes || 0}`, 8, 72, rgba8(150, 150, 255, 255));
+    print(`GPU: ${stats.renderer || 'Three.js'}`, 8, 88, rgba8(150, 150, 255, 255));
+  }
+
+  print('WASD: Move camera manually', 8, 320, rgba8(200, 200, 200, 200));
+  print('Full GPU 3D acceleration with Three.js!', 8, 340, rgba8(100, 255, 100, 180));
+}
+
+function drawStartScreen() {
+  // Bright gradient background
+  drawGradientRect(0, 0, 640, 360, rgba8(30, 60, 120, 230), rgba8(10, 30, 80, 240), true);
+
+  // Animated title with rainbow glow
+  const rainbow = [
+    rgba8(255, 0, 0, 255),
+    rgba8(255, 127, 0, 255),
+    rgba8(255, 255, 0, 255),
+    rgba8(0, 255, 0, 255),
+    rgba8(0, 0, 255, 255),
+    rgba8(148, 0, 211, 255),
+  ];
+  const colorIndex = Math.floor(startScreenTime * 2) % rainbow.length;
+
+  setFont('huge');
+  setTextAlign('center');
+  const bounce = Math.sin(startScreenTime * 3) * 8;
+  drawTextShadow('HELLO', 320, 60 + bounce, rainbow[colorIndex], rgba8(0, 0, 0, 255), 5, 1);
+  drawTextShadow('3D WORLD', 320, 110 + bounce, rgba8(0, 255, 255, 255), rgba8(0, 0, 0, 255), 5, 1);
+
+  // Subtitle
+  setFont('large');
+  const pulse = Math.sin(startScreenTime * 4) * 0.3 + 0.7;
+  drawTextOutline(
+    'Nintendo 64 / PlayStation Style',
+    320,
+    160,
+    rgba8(255, 200, 0, Math.floor(pulse * 255)),
+    rgba8(0, 0, 0, 255),
+    1
+  );
+
+  // Info panel
+  const panel = createPanel(centerX(450), 200, 450, 180, {
+    bgColor: rgba8(20, 40, 80, 200),
+    borderColor: rgba8(50, 180, 255, 255),
+    borderWidth: 3,
+    shadow: true,
+    gradient: true,
+    gradientColor: rgba8(30, 50, 100, 200),
+  });
+  drawPanel(panel);
+
+  setFont('normal');
+  setTextAlign('center');
+  drawText('BASIC 3D RENDERING DEMO', 320, 220, rgba8(0, 255, 255, 255), 1);
+
+  setFont('small');
+  drawText('Experience GPU-accelerated 3D graphics with Three.js', 320, 245, uiColors.light, 1);
+  drawText('Watch spinning cubes and bouncing spheres', 320, 260, uiColors.light, 1);
+  drawText('Full retro Nintendo 64 visual effects enabled', 320, 275, uiColors.light, 1);
+
+  setFont('tiny');
+  drawText('Camera rotates automatically around the scene', 320, 300, uiColors.secondary, 1);
+
+  // Draw buttons
+  drawAllButtons();
+
+  // DEBUG: Show mouse position and button bounds
+  const mx = mouseX();
+  const my = mouseY();
+  if (mx >= 0 && my >= 0) {
+    setFont('tiny');
+    setTextAlign('left');
+    drawText(`Mouse: ${mx}, ${my}`, 10, 10, rgba8(255, 255, 0, 255), 1);
+    // Draw crosshair at mouse position
+    line(mx - 10, my, mx + 10, my, rgba8(0, 255, 0, 255));
+    line(mx, my - 10, mx, my + 10, rgba8(0, 255, 0, 255));
+  }
+
+  // Pulsing start prompt
+  const alpha = Math.floor((Math.sin(startScreenTime * 6) * 0.5 + 0.5) * 255);
+  setFont('normal');
+  setTextAlign('center');
+  drawText('▶ PRESS START DEMO ◀', 320, 425, rgba8(50, 200, 255, alpha), 1);
+
+  // Nova64 branding
+  setFont('tiny');
+  drawText('Nova64 v0.2.0 - Fantasy Console', 320, 345, rgba8(150, 150, 200, 150), 1);
+}

package/dist/examples/hello-skybox/code.js

@@ -0,0 +1,183 @@
+// 🌌 NOVA DRIFT — Deep Space Crystal Hunter
+// Free-fly through an asteroid field, collect all 15 energy crystals
+//
+// Controls:  W / SPACE = thrust   S = brake
+//            A / D     = yaw      Q / E = pitch
+
+let time = 0;
+let pos = { x: 0, y: 0, z: 10 };
+let vel = { x: 0, y: 0, z: 0 };
+let yaw = 0; // horizontal bearing, degrees
+let pitch = 0; // vertical bearing,   degrees
+let score = 0;
+let collected = 0;
+
+const TOTAL = 15;
+const THRUST = 14;
+const TURN_SPD = 55;
+const PITCH_SPD = 40;
+const DRAG = 0.88;
+
+let asteroids = [];
+let crystals = [];
+
+// ── Init ─────────────────────────────────────────────────────────────────────
+export async function init() {
+  // Deep-space skybox
+  createSpaceSkybox({
+    starCount: 3000,
+    starSize: 2.2,
+    nebulae: true,
+    nebulaColor: 0x0a0033,
+  });
+  setFog(0x000511, 100, 500);
+
+  // Cinematic lighting
+  setAmbientLight(0x202040, 1.0);
+  setLightDirection(-0.4, -1, -0.3);
+  setLightColor(0xaaaaff);
+
+  // Post-processing
+  enableBloom(1.0, 0.5, 0.5);
+  enableFXAA();
+  enableVignette(1.0, 0.85);
+
+  // ── Asteroid field ──────────────────────────────────────────────────────
+  for (let i = 0; i < 45; i++) {
+    const angle = Math.random() * Math.PI * 2;
+    const dist = 30 + Math.random() * 200;
+    const x = Math.cos(angle) * dist + (Math.random() - 0.5) * 60;
+    const y = (Math.random() - 0.5) * 80;
+    const z = Math.sin(angle) * dist + (Math.random() - 0.5) * 60;
+    const r = 2 + Math.random() * 9;
+    const mesh = createSphere(r, 0x554433, [x, y, z], 7, { material: 'standard', roughness: 0.95 });
+    asteroids.push({
+      mesh,
+      x,
+      y,
+      z,
+      rx: (Math.random() - 0.5) * 0.3,
+      ry: (Math.random() - 0.5) * 0.3,
+      rz: (Math.random() - 0.5) * 0.15,
+    });
+  }
+
+  // ── Distant planets ─────────────────────────────────────────────────────
+  const planetDefs = [
+    { x: 250, y: -40, z: -300, r: 50, color: 0x3355aa },
+    { x: -400, y: 30, z: -150, r: 70, color: 0xaa3333 },
+    { x: 80, y: 60, z: 320, r: 35, color: 0x228855 },
+  ];
+  for (const p of planetDefs) {
+    createSphere(p.r, p.color, [p.x, p.y, p.z], 20, { material: 'standard', roughness: 0.7 });
+  }
+
+  // ── Energy crystals ──────────────────────────────────────────────────────
+  const palette = [0x00ffcc, 0xff44ff, 0xffdd00, 0x44aaff];
+  for (let i = 0; i < TOTAL; i++) {
+    const angle = (i / TOTAL) * Math.PI * 2 + (Math.random() - 0.5) * 0.8;
+    const dist = 40 + Math.random() * 120;
+    const x = Math.cos(angle) * dist;
+    const y = (Math.random() - 0.5) * 50;
+    const z = Math.sin(angle) * dist;
+    const color = palette[i % palette.length];
+    const mesh = createCube(2.5, color, [x, y, z], { material: 'emissive', emissive: color });
+    crystals.push({ mesh, x, y, z, active: true });
+  }
+
+  setCameraFOV(75);
+  setCameraPosition(pos.x, pos.y, pos.z);
+  setCameraTarget(0, 0, 0);
+}
+
+// ── Update ────────────────────────────────────────────────────────────────────
+export function update(dt) {
+  time += dt;
+
+  // Yaw
+  if (key('KeyA') || key('ArrowLeft')) yaw += TURN_SPD * dt;
+  if (key('KeyD') || key('ArrowRight')) yaw -= TURN_SPD * dt;
+
+  // Pitch  (clamp to ±75°)
+  if (key('KeyQ') || key('ArrowUp')) pitch = Math.min(pitch + PITCH_SPD * dt, 75);
+  if (key('KeyE') || key('ArrowDown')) pitch = Math.max(pitch - PITCH_SPD * dt, -75);
+
+  // Forward direction
+  const yRad = (yaw * Math.PI) / 180;
+  const pRad = (pitch * Math.PI) / 180;
+  const fdx = -Math.sin(yRad) * Math.cos(pRad);
+  const fdy = Math.sin(pRad);
+  const fdz = -Math.cos(yRad) * Math.cos(pRad);
+
+  // Thrust / brake
+  if (key('KeyW') || key('Space')) {
+    vel.x += fdx * THRUST * dt;
+    vel.y += fdy * THRUST * dt;
+    vel.z += fdz * THRUST * dt;
+  }
+  if (key('KeyS')) {
+    vel.x -= fdx * THRUST * 0.5 * dt;
+    vel.y -= fdy * THRUST * 0.5 * dt;
+    vel.z -= fdz * THRUST * 0.5 * dt;
+  }
+
+  // Drag + integrate
+  vel.x *= DRAG;
+  vel.y *= DRAG;
+  vel.z *= DRAG;
+  pos.x += vel.x;
+  pos.y += vel.y;
+  pos.z += vel.z;
+
+  setCameraPosition(pos.x, pos.y, pos.z);
+  setCameraTarget(pos.x + fdx, pos.y + fdy, pos.z + fdz);
+
+  // Rotate asteroids
+  for (const a of asteroids) {
+    rotateMesh(a.mesh, a.rx * dt, a.ry * dt, a.rz * dt);
+  }
+
+  // Spin crystals + collect on proximity
+  for (const c of crystals) {
+    if (!c.active) continue;
+    rotateMesh(c.mesh, 0.5 * dt, 1.2 * dt, 0.3 * dt);
+    const dx = pos.x - c.x,
+      dy = pos.y - c.y,
+      dz = pos.z - c.z;
+    if (dx * dx + dy * dy + dz * dz < 100) {
+      // ≤ 10 unit radius
+      removeMesh(c.mesh);
+      c.active = false;
+      collected++;
+      score += 100;
+      sfx('coin');
+      if (collected >= TOTAL) sfx('powerup');
+    }
+  }
+
+  animateSkybox(dt);
+}
+
+// ── Draw ──────────────────────────────────────────────────────────────────────
+export function draw() {
+  const spd = Math.round(Math.sqrt(vel.x * vel.x + vel.y * vel.y + vel.z * vel.z) * 10);
+
+  // Top-left HUD
+  print(`CRYSTALS  ${score.toString().padStart(6, '0')}`, 16, 16, rgba8(0, 255, 200, 255));
+  print(`SPEED     ${spd.toString().padStart(3)} u/s`, 16, 36, rgba8(160, 200, 255, 210));
+  print(`REMAINING ${collected} / ${TOTAL}`, 16, 56, rgba8(255, 220, 80, 200));
+
+  // Controls hint — fades out after 8 s
+  if (time < 8) {
+    const a = Math.min(255, Math.floor((8 - time) * 50));
+    print('W / SPACE — Thrust     S — Brake', 320, 328, rgba8(200, 200, 200, a));
+    print('A / D     — Turn       Q / E — Pitch', 320, 346, rgba8(200, 200, 200, a));
+  }
+
+  // Victory screen
+  if (collected >= TOTAL) {
+    const pulse = Math.floor((Math.sin(time * 4) * 0.5 + 0.5) * 255);
+    print('ALL CRYSTALS COLLECTED!', 320, 170, rgba8(0, 255, 200, pulse));
+    print(`FINAL SCORE  ${score}`, 320, 194, rgba8(255, 220, 0, 255));
+  }
+}

package/dist/examples/hello-world/code.js

@@ -0,0 +1,19 @@
+// Hello World — Nova64 minimal cart
+// A spinning cube with a HUD label. Under 15 lines.
+
+let cube;
+
+export function init() {
+  cube = createCube(1, 0x00aaff, [0, 0, -4]);
+  setAmbientLight(0xffffff, 1.5);
+  setCameraPosition(0, 1, 4);
+  setCameraTarget(0, 0, 0);
+}
+
+export function update(dt) {
+  rotateMesh(cube, dt * 0.5, dt, 0);
+}
+
+export function draw() {
+  printCentered('Hello, Nova64!', 12, 0xffffff);
+}

package/dist/examples/input-showcase/code.js

@@ -0,0 +1,109 @@
+// examples/input-showcase/code.js
+// Demonstrates every Nova64 input method: keyboard, gamepad, and mouse.
+// All inputs are visualized live so you can see exactly what the engine detects.
+
+const KEY_MAP = [
+  ['KeyW', 'W'],
+  ['KeyA', 'A'],
+  ['KeyS', 'S'],
+  ['KeyD', 'D'],
+  ['ArrowUp', '↑'],
+  ['ArrowDown', '↓'],
+  ['ArrowLeft', '←'],
+  ['ArrowRight', '→'],
+  ['Space', 'SPC'],
+  ['ShiftLeft', 'SHF'],
+  ['KeyE', 'E'],
+  ['KeyQ', 'Q'],
+  ['Enter', 'ENT'],
+  ['Escape', 'ESC'],
+];
+
+const BTN_LABELS = ['A', 'B', 'X', 'Y', 'LB', 'RB', 'LT', 'RT', 'SEL', 'STR'];
+
+// Spinning cube changes color based on WASD input
+let cube;
+let cubeColor = 0x0088ff;
+let mouseTrail = [];
+
+export function init() {
+  setCameraPosition(0, 0, 8);
+  setCameraTarget(0, 0, 0);
+  setAmbientLight(0xffffff, 1.0);
+  setFog(0x0a0a1a, 20, 50);
+
+  cube = createCube(2, cubeColor, [0, 0, 0], { material: 'holographic' });
+}
+
+export function update(dt) {
+  // Drive cube rotation with WASD
+  const rx = (key('KeyS') ? 1 : 0) - (key('KeyW') ? 1 : 0);
+  const ry = (key('KeyD') ? 1 : 0) - (key('KeyA') ? 1 : 0);
+  rotateMesh(cube, rx * dt * 2, ry * dt * 2, 0);
+
+  // Record mouse trail (last 20 positions)
+  const mx = getMouseX ? getMouseX() : 0;
+  const my = getMouseY ? getMouseY() : 0;
+  mouseTrail.push({ x: mx, y: my });
+  if (mouseTrail.length > 20) mouseTrail.shift();
+}
+
+export function draw() {
+  // ── Background gradient header ───────────────────────────────────────────
+  rect(0, 0, 320, 20, rgba8(20, 20, 50, 255), true);
+  printCentered('INPUT SHOWCASE', 4, 0xffffff);
+
+  // ── Keyboard section ─────────────────────────────────────────────────────
+  print('KEYBOARD', 8, 26, 0xaaaaff);
+  const kbCols = 7;
+  KEY_MAP.forEach(([code, label], i) => {
+    const col = i % kbCols;
+    const row = Math.floor(i / kbCols);
+    const x = 8 + col * 44;
+    const y = 36 + row * 14;
+    const pressed = key(code);
+    rect(x, y, 40, 12, pressed ? rgba8(0, 200, 80, 255) : rgba8(40, 40, 80, 200), true);
+    rect(x, y, 40, 12, rgba8(100, 100, 180, 180), false);
+    print(label, x + 2, y + 2, pressed ? 0x000000 : 0xdddddd);
+  });
+
+  // ── Gamepad section ───────────────────────────────────────────────────────
+  print('GAMEPAD', 8, 74, 0xaaaaff);
+  BTN_LABELS.forEach((label, i) => {
+    const x = 8 + i * 30;
+    const pressed = btn(i);
+    rect(x, 84, 26, 12, pressed ? rgba8(255, 160, 0, 255) : rgba8(40, 40, 80, 200), true);
+    rect(x, 84, 26, 12, rgba8(100, 100, 180, 180), false);
+    print(label, x + 2, 86, pressed ? 0x000000 : 0xdddddd);
+  });
+
+  // ── Analog sticks ─────────────────────────────────────────────────────────
+  print('STICKS', 8, 102, 0xaaaaff);
+  // Left stick area
+  rect(8, 112, 40, 22, rgba8(30, 30, 60, 200), true);
+  rect(8, 112, 40, 22, rgba8(80, 80, 150, 180), false);
+  print('L-STICK', 10, 114, 0x888888);
+  // Right stick area
+  rect(54, 112, 40, 22, rgba8(30, 30, 60, 200), true);
+  rect(54, 112, 40, 22, rgba8(80, 80, 150, 180), false);
+  print('R-STICK', 56, 114, 0x888888);
+  print('(connect gamepad)', 100, 118, 0x555577);
+
+  // ── Mouse section ─────────────────────────────────────────────────────────
+  print('MOUSE', 8, 140, 0xaaaaff);
+  const mx = mouseTrail.length ? mouseTrail[mouseTrail.length - 1].x : 0;
+  const my = mouseTrail.length ? mouseTrail[mouseTrail.length - 1].y : 0;
+  print(`X: ${Math.round(mx)}  Y: ${Math.round(my)}`, 8, 150, 0xdddddd);
+
+  // Draw mouse trail
+  if (mouseTrail.length > 1) {
+    for (let i = 1; i < mouseTrail.length; i++) {
+      const alpha = Math.floor((i / mouseTrail.length) * 200);
+      pset(mouseTrail[i].x, mouseTrail[i].y, rgba8(80, 200, 255, alpha));
+    }
+  }
+
+  // ── Active key hint ───────────────────────────────────────────────────────
+  rect(0, 170, 320, 10, rgba8(15, 15, 40, 255), true);
+  print('WASD rotates cube  |  All inputs highlighted in real time', 4, 172, 0x555577);
+}