@loonylabs/create-game 0.1.0

package/template/apps/client/src/input.ts

@@ -0,0 +1,92 @@
+import * as THREE from 'three';
+
+const FLOOR_Y = 0; // Three.js y-coordinate of the floor plane
+
+/**
+ * Set up click-to-move (left-click + hold) and melee attack (Space / right-click).
+ * Requires a reference to the camera and renderer canvas.
+ */
+export function initInput(
+  canvas: HTMLCanvasElement,
+  camera: THREE.Camera,
+  sendMessage: (msg: unknown) => void,
+): () => void {
+  const raycaster = new THREE.Raycaster();
+  const floorPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); // y=0 plane
+  const target = new THREE.Vector3();
+
+  let holdInterval: ReturnType<typeof setInterval> | null = null;
+  let lastNdc = new THREE.Vector2();
+
+  function sendMoveAtNdc(ndc: THREE.Vector2): void {
+    raycaster.setFromCamera(ndc, camera);
+    const hit = raycaster.ray.intersectPlane(floorPlane, target);
+    if (hit) {
+      // Send float coordinates — no Math.round — server handles float positions
+      sendMessage({ type: 'PLAYER_MOVE', targetX: target.x, targetY: target.z });
+    }
+  }
+
+  function onPointerDown(event: PointerEvent): void {
+    if (event.button === 0) {
+      // Left click — move immediately
+      const rect = canvas.getBoundingClientRect();
+      lastNdc.set(
+        ((event.clientX - rect.left) / rect.width) * 2 - 1,
+        -((event.clientY - rect.top) / rect.height) * 2 + 1,
+      );
+      sendMoveAtNdc(lastNdc);
+
+      // Hold-to-move: continue sending while button held
+      holdInterval = setInterval(() => {
+        sendMoveAtNdc(lastNdc);
+      }, 100);
+    } else if (event.button === 2) {
+      // Right click — melee
+      sendMessage({ type: 'ACTION_EVENT', entityId: 0, action: 'melee', payload: null });
+    }
+  }
+
+  function onPointerMove(event: PointerEvent): void {
+    const rect = canvas.getBoundingClientRect();
+    lastNdc.set(
+      ((event.clientX - rect.left) / rect.width) * 2 - 1,
+      -((event.clientY - rect.top) / rect.height) * 2 + 1,
+    );
+  }
+
+  function onPointerUp(event: PointerEvent): void {
+    if (event.button === 0 && holdInterval !== null) {
+      clearInterval(holdInterval);
+      holdInterval = null;
+    }
+  }
+
+  function onKeyDown(event: KeyboardEvent): void {
+    if (event.code === 'Space') {
+      event.preventDefault();
+      sendMessage({ type: 'ACTION_EVENT', entityId: 0, action: 'melee', payload: null });
+    }
+  }
+
+  function onContextMenu(event: Event): void {
+    event.preventDefault();
+  }
+
+  canvas.addEventListener('pointerdown', onPointerDown);
+  canvas.addEventListener('pointermove', onPointerMove);
+  canvas.addEventListener('pointerup', onPointerUp);
+  window.addEventListener('keydown', onKeyDown);
+  canvas.addEventListener('contextmenu', onContextMenu);
+
+  return () => {
+    canvas.removeEventListener('pointerdown', onPointerDown);
+    canvas.removeEventListener('pointermove', onPointerMove);
+    canvas.removeEventListener('pointerup', onPointerUp);
+    window.removeEventListener('keydown', onKeyDown);
+    canvas.removeEventListener('contextmenu', onContextMenu);
+    if (holdInterval !== null) {
+      clearInterval(holdInterval);
+    }
+  };
+}

package/template/apps/client/src/lib/audio/CombatDetector.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { CombatDetector } from './CombatDetector.js';
+
+describe('CombatDetector', () => {
+  beforeEach(() => { vi.useFakeTimers(); });
+  afterEach(() => { vi.useRealTimers(); });
+
+  it('triggers combat when grunt is within radius', () => {
+    const setState = vi.fn();
+    const detector = new CombatDetector(4000, setState);
+    detector.check({ x: 0, y: 0 }, [{ type: 'grunt', x: 2, y: 0 }], 5);
+    expect(setState).toHaveBeenCalledWith('combat');
+  });
+
+  it('does not trigger combat when grunt is outside radius', () => {
+    const setState = vi.fn();
+    const detector = new CombatDetector(4000, setState);
+    detector.check({ x: 0, y: 0 }, [{ type: 'grunt', x: 10, y: 0 }], 5);
+    expect(setState).not.toHaveBeenCalled();
+  });
+
+  it('ignores non-grunt entities', () => {
+    const setState = vi.fn();
+    const detector = new CombatDetector(4000, setState);
+    detector.check({ x: 0, y: 0 }, [{ type: 'item', x: 1, y: 0 }], 5);
+    expect(setState).not.toHaveBeenCalled();
+  });
+
+  it('exits combat after delay when grunt moves away', () => {
+    const setState = vi.fn();
+    const detector = new CombatDetector(4000, setState);
+
+    // Enter combat
+    detector.check({ x: 0, y: 0 }, [{ type: 'grunt', x: 2, y: 0 }], 5);
+    expect(setState).toHaveBeenCalledWith('combat');
+
+    // Grunt now out of range
+    detector.check({ x: 0, y: 0 }, [{ type: 'grunt', x: 10, y: 0 }], 5);
+    expect(setState).toHaveBeenCalledTimes(1); // still in combat, timer pending
+
+    // After delay
+    vi.advanceTimersByTime(4000);
+    expect(setState).toHaveBeenCalledWith('ambient');
+  });
+
+  it('cancels exit timer if grunt re-enters range during delay', () => {
+    const setState = vi.fn();
+    const detector = new CombatDetector(4000, setState);
+
+    detector.check({ x: 0, y: 0 }, [{ type: 'grunt', x: 2, y: 0 }], 5);
+    detector.check({ x: 0, y: 0 }, [{ type: 'grunt', x: 10, y: 0 }], 5); // starts exit timer
+    vi.advanceTimersByTime(2000);
+    detector.check({ x: 0, y: 0 }, [{ type: 'grunt', x: 2, y: 0 }], 5); // re-enters — cancel timer
+
+    vi.advanceTimersByTime(4000);
+    // Should not have called ambient
+    expect(setState).not.toHaveBeenCalledWith('ambient');
+  });
+});

package/template/apps/client/src/lib/audio/CombatDetector.ts

@@ -0,0 +1,53 @@
+/**
+ * @file lib/audio/CombatDetector.ts
+ * Detects combat state by checking player proximity to grunt entities.
+ *
+ * Responsibilities:
+ *   - Check distance between player and all grunts each tick
+ *   - Call setState('combat') / setState('ambient') on the provided callback
+ *   - Apply a configurable exit delay before leaving combat state
+ *
+ * What does NOT belong here:
+ *   - Music playback (→ MusicManager.ts)
+ *   - Store reads (caller passes positions)
+ *   - Socket or server communication
+ */
+
+import type { MusicState } from './MusicManager.js';
+
+interface Position { x: number; y: number }
+interface EntityLike { type?: string; x: number; y: number }
+
+export class CombatDetector {
+  private inCombat = false;
+  private exitTimer: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(
+    private readonly exitDelay: number,
+    private readonly onStateChange: (state: MusicState) => void,
+  ) {}
+
+  check(playerPos: Position, entities: EntityLike[], radius: number): void {
+    const nearGrunt = entities.some(
+      e => e.type === 'grunt' && Math.hypot(e.x - playerPos.x, e.y - playerPos.y) <= radius,
+    );
+
+    if (nearGrunt) {
+      if (this.exitTimer) { clearTimeout(this.exitTimer); this.exitTimer = null; }
+      if (!this.inCombat) {
+        this.inCombat = true;
+        this.onStateChange('combat');
+      }
+    } else if (!nearGrunt && this.inCombat && !this.exitTimer) {
+      this.exitTimer = setTimeout(() => {
+        this.inCombat = false;
+        this.exitTimer = null;
+        this.onStateChange('ambient');
+      }, this.exitDelay);
+    }
+  }
+
+  dispose(): void {
+    if (this.exitTimer) { clearTimeout(this.exitTimer); this.exitTimer = null; }
+  }
+}

package/template/apps/client/src/lib/audio/MusicManager.ts

@@ -0,0 +1,137 @@
+/**
+ * @file lib/audio/MusicManager.ts
+ * Adaptive music manager — biome tracks + ambient/combat state machine + stingers.
+ *
+ * Responsibilities:
+ *   - Crossfade between biome ambient tracks on setBiome()
+ *   - Fade combat layer in/out on setState()
+ *   - Play one-shot stingers over running music via EventBus
+ *
+ * What does NOT belong here:
+ *   - Combat detection logic (→ CombatDetector.ts)
+ *   - One-shot sound effects (→ SoundManager.ts)
+ *   - Socket / store access
+ */
+
+import { Howl } from 'howler';
+import { eventBus } from '@loonylabs/gamedev-client';
+
+export type MusicState = 'ambient' | 'combat';
+
+interface TrackEntry {
+  src: string | null;
+  volume: number;
+}
+
+interface CombatLayer extends TrackEntry {
+  targetVolume: number;
+  fadeIn: number;
+}
+
+interface BiomeConfig {
+  ambient: TrackEntry;
+  layers?: { combat?: CombatLayer };
+}
+
+interface StingerEntry {
+  src: string | null;
+  volume: number;
+}
+
+interface MusicConfig {
+  crossfadeDuration: number;
+  combatDetectionRadius: number;
+  combatExitDelay: number;
+  biomes: Record<string, BiomeConfig>;
+  stingers: Record<string, StingerEntry>;
+}
+
+export class MusicManager {
+  private config: MusicConfig | null = null;
+  private currentTrack: Howl | null = null;
+  private combatLayer: Howl | null = null;
+  private currentBiome = '';
+  private state: MusicState = 'ambient';
+  private unsubscribers: Array<() => void> = [];
+
+  init(config: MusicConfig): void {
+    this.config = config;
+
+    // Subscribe stingers via EventBus
+    for (const id of Object.keys(config.stingers)) {
+      const type = id as Parameters<typeof eventBus.on>[0];
+      const unsub = eventBus.on(type, () => this.playStinger(id));
+      this.unsubscribers.push(unsub);
+    }
+  }
+
+  setBiome(biomeId: string): void {
+    if (!this.config || biomeId === this.currentBiome) return;
+    const biome = this.config.biomes[biomeId];
+    this.currentBiome = biomeId;
+
+    if (!biome?.ambient?.src) {
+      this.currentTrack?.fade(this.currentTrack.volume(), 0, this.config.crossfadeDuration * 1000);
+      setTimeout(() => { this.currentTrack?.stop(); this.currentTrack = null; }, this.config.crossfadeDuration * 1000);
+      return;
+    }
+
+    const fadeDuration = this.config.crossfadeDuration * 1000;
+    const next = new Howl({ src: [biome.ambient.src!], loop: true, volume: 0 });
+    next.play();
+    next.fade(0, biome.ambient.volume, fadeDuration);
+
+    if (this.currentTrack) {
+      const old = this.currentTrack;
+      old.fade(old.volume(), 0, fadeDuration);
+      setTimeout(() => old.stop(), fadeDuration);
+    }
+
+    this.currentTrack = next;
+
+    // Dispose combat layer on biome change — new biome may have different layers
+    if (this.combatLayer) {
+      this.combatLayer.stop();
+      this.combatLayer = null;
+    }
+  }
+
+  setState(state: MusicState): void {
+    if (!this.config || state === this.state) return;
+    this.state = state;
+
+    const layer = this.config.biomes[this.currentBiome]?.layers?.combat;
+    if (!layer?.src) return;
+
+    if (state === 'combat') {
+      if (!this.combatLayer) {
+        this.combatLayer = new Howl({ src: [layer.src!], loop: true, volume: 0 });
+        this.combatLayer.play();
+      }
+      this.combatLayer.fade(this.combatLayer.volume(), layer.targetVolume, layer.fadeIn * 1000);
+    } else {
+      if (this.combatLayer) {
+        const cl = this.combatLayer;
+        cl.fade(cl.volume(), 0, 1500);
+        setTimeout(() => { cl.stop(); }, 1500);
+        this.combatLayer = null;
+      }
+    }
+  }
+
+  playStinger(id: string): void {
+    if (!this.config) return;
+    const stinger = this.config.stingers[id];
+    if (!stinger?.src) return;
+    new Howl({ src: [stinger.src!], volume: stinger.volume }).play();
+  }
+
+  dispose(): void {
+    for (const unsub of this.unsubscribers) unsub();
+    this.unsubscribers = [];
+    this.currentTrack?.stop();
+    this.combatLayer?.stop();
+  }
+}
+
+export const musicManager = new MusicManager();

package/template/apps/client/src/lib/audio/SoundManager.ts

@@ -0,0 +1,59 @@
+/**
+ * @file lib/audio/SoundManager.ts
+ * Event-driven one-shot sound effects manager.
+ *
+ * Responsibilities:
+ *   - Load Howl instances for configured event types
+ *   - Subscribe to EventBus and play the matching clip on each event
+ *   - Expose play() for manual/direct triggering
+ *
+ * What does NOT belong here:
+ *   - Music / looping tracks (→ MusicManager.ts)
+ *   - Combat state detection (→ CombatDetector.ts)
+ *   - Toast notifications (→ components/ToastSystem.svelte)
+ */
+
+import { Howl } from 'howler';
+import { eventBus } from '@loonylabs/gamedev-client';
+import type { GameEventType } from '@loonylabs/gamedev-core';
+
+interface SoundEntry {
+  src: string | null;
+  volume: number;
+}
+
+interface SoundConfig {
+  volume: number;
+  events: Partial<Record<GameEventType, SoundEntry>>;
+}
+
+export class SoundManager {
+  private sounds = new Map<GameEventType, Howl>();
+  private unsubscribers: Array<() => void> = [];
+
+  init(config: SoundConfig): void {
+    for (const [type, entry] of Object.entries(config.events) as [GameEventType, SoundEntry][]) {
+      if (!entry?.src) continue;
+      const howl = new Howl({
+        src: [entry.src],
+        volume: entry.volume ?? config.volume,
+      });
+      this.sounds.set(type, howl);
+      const unsub = eventBus.on(type, () => this.play(type));
+      this.unsubscribers.push(unsub);
+    }
+  }
+
+  play(type: GameEventType): void {
+    this.sounds.get(type)?.play();
+  }
+
+  dispose(): void {
+    for (const unsub of this.unsubscribers) unsub();
+    this.unsubscribers = [];
+    this.sounds.forEach(h => h.unload());
+    this.sounds.clear();
+  }
+}
+
+export const soundManager = new SoundManager();

package/template/apps/client/src/lib/audio/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @file lib/audio/index.ts
+ * Public re-export barrel for audio subsystem.
+ */
+
+export { SoundManager, soundManager } from './SoundManager.js';
+export { MusicManager, musicManager } from './MusicManager.js';
+export type { MusicState } from './MusicManager.js';
+export { CombatDetector } from './CombatDetector.js';

package/template/apps/client/src/main.ts

@@ -0,0 +1,32 @@
+/**
+ * @file main.ts
+ * Browser entry point — and nothing more.
+ *
+ * Responsibilities:
+ *   - Mount the Svelte UI overlay onto #ui
+ *   - Create the GameOrchestrator and hand it the canvas
+ *   - Initialize the socket connection
+ *
+ * What does NOT belong here:
+ *   - Game loop logic
+ *   - Controller or camera setup
+ *   - Dungeon mesh management
+ *   - Entity rendering
+ *
+ * To add a new system (audio, events, analytics):
+ *   → Add it to GameOrchestrator in game.ts, not here.
+ */
+
+import { mount } from 'svelte';
+import App from './components/App.svelte';
+import { GameOrchestrator } from './game.js';
+import { initSocket } from './socket.js';
+
+const uiEl = document.getElementById('ui') as HTMLElement;
+mount(App, { target: uiEl });
+
+const canvas = document.getElementById('game-canvas') as HTMLCanvasElement;
+const game = new GameOrchestrator(canvas);
+
+initSocket(game);
+game.start();

package/template/apps/client/src/renderer/basecamp.ts

@@ -0,0 +1,126 @@
+/**
+ * Basecamp structure meshes — code-generated Three.js primitives.
+ * Zero-asset approach: huts, campfire, fence posts.
+ */
+import * as THREE from 'three';
+
+export interface BasecampConfig {
+  center: { x: number; z: number };
+  getTerrainHeight: (x: number, z: number) => number;
+}
+
+function createHut(w: number, h: number, d: number): THREE.Group {
+  const group = new THREE.Group();
+
+  // Walls
+  const wallGeo = new THREE.BoxGeometry(w, h, d);
+  const wallMat = new THREE.MeshStandardMaterial({ color: 0x8B6914, roughness: 0.9 });
+  const walls = new THREE.Mesh(wallGeo, wallMat);
+  walls.position.y = h / 2;
+  group.add(walls);
+
+  // Roof (cone/pyramid)
+  const roofGeo = new THREE.ConeGeometry(Math.max(w, d) * 0.75, h * 0.6, 4);
+  const roofMat = new THREE.MeshStandardMaterial({ color: 0x6B3A1A, roughness: 0.85 });
+  const roof = new THREE.Mesh(roofGeo, roofMat);
+  roof.position.y = h + h * 0.3;
+  roof.rotation.y = Math.PI / 4;
+  group.add(roof);
+
+  return group;
+}
+
+function createCampfire(): THREE.Group {
+  const group = new THREE.Group();
+
+  // Stone ring
+  const ringGeo = new THREE.TorusGeometry(0.6, 0.15, 6, 8);
+  const ringMat = new THREE.MeshStandardMaterial({ color: 0x666666, roughness: 1 });
+  const ring = new THREE.Mesh(ringGeo, ringMat);
+  ring.rotation.x = Math.PI / 2;
+  ring.position.y = 0.15;
+  group.add(ring);
+
+  // Log pile
+  const logGeo = new THREE.CylinderGeometry(0.08, 0.08, 0.7, 5);
+  const logMat = new THREE.MeshStandardMaterial({ color: 0x4a3010, roughness: 0.95 });
+  for (let i = 0; i < 3; i++) {
+    const log = new THREE.Mesh(logGeo, logMat);
+    log.position.set(Math.cos(i * 2.1) * 0.2, 0.2, Math.sin(i * 2.1) * 0.2);
+    log.rotation.z = Math.PI / 2 + (i - 1) * 0.3;
+    log.rotation.y = i * 0.8;
+    group.add(log);
+  }
+
+  // Fire glow
+  const light = new THREE.PointLight(0xff6622, 3, 20);
+  light.position.y = 1;
+  group.add(light);
+
+  // Ember core (small bright sphere)
+  const emberGeo = new THREE.SphereGeometry(0.15, 6, 6);
+  const emberMat = new THREE.MeshBasicMaterial({ color: 0xff4400 });
+  const ember = new THREE.Mesh(emberGeo, emberMat);
+  ember.position.y = 0.4;
+  group.add(ember);
+
+  return group;
+}
+
+function createFencePost(height: number = 1.2): THREE.Mesh {
+  const geo = new THREE.CylinderGeometry(0.06, 0.08, height, 5);
+  const mat = new THREE.MeshStandardMaterial({ color: 0x6B4226, roughness: 0.9 });
+  const post = new THREE.Mesh(geo, mat);
+  post.position.y = height / 2;
+  return post;
+}
+
+/**
+ * Create basecamp structure meshes.
+ * Returns a Group that can be added to the scene and disposed later.
+ */
+export function createBasecampMeshes(config: BasecampConfig): THREE.Group {
+  const group = new THREE.Group();
+  const { center, getTerrainHeight } = config;
+  const getY = (x: number, z: number) => getTerrainHeight(x, z) ?? 32;
+
+  // Main hut
+  const hut1 = createHut(4, 3, 5);
+  const hut1X = center.x - 8;
+  const hut1Z = center.z - 4;
+  hut1.position.set(hut1X, getY(hut1X, hut1Z), hut1Z);
+  group.add(hut1);
+
+  // Smaller hut
+  const hut2 = createHut(3, 2.5, 3);
+  const hut2X = center.x + 6;
+  const hut2Z = center.z - 3;
+  hut2.position.set(hut2X, getY(hut2X, hut2Z), hut2Z);
+  group.add(hut2);
+
+  // Storage hut
+  const hut3 = createHut(2.5, 2, 3);
+  const hut3X = center.x + 4;
+  const hut3Z = center.z + 5;
+  hut3.position.set(hut3X, getY(hut3X, hut3Z), hut3Z);
+  group.add(hut3);
+
+  // Campfire at center
+  const campfire = createCampfire();
+  campfire.position.set(center.x, getY(center.x, center.z), center.z);
+  group.add(campfire);
+
+  // Fence posts in a rough semicircle on the wilderness side
+  const fenceRadius = 12;
+  const fenceCount = 10;
+  for (let i = 0; i < fenceCount; i++) {
+    const angle = (i / fenceCount) * Math.PI + Math.PI * 0.5; // semicircle facing east
+    const fx = center.x + Math.cos(angle) * fenceRadius;
+    const fz = center.z + Math.sin(angle) * fenceRadius;
+    const post = createFencePost();
+    post.position.set(fx, getY(fx, fz), fz);
+    group.add(post);
+  }
+
+  return group;
+}