Update game.js

game.js

@@ -1,634 +1,520 @@
 import * as THREE from 'three';
-// import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Keep commented unless needed
+import * as CANNON from 'cannon-es';
+// import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Optional for debugging
 
 // --- DOM Elements ---
 const sceneContainer = document.getElementById('scene-container');
-const storyTitleElement = document.getElementById('story-title');
-const storyContentElement = document.getElementById('story-content');
-const choicesElement = document.getElementById('choices');
 const statsElement = document.getElementById('stats-display');
 const inventoryElement = document.getElementById('inventory-display');
+const logElement = document.getElementById('log-display');
 
 // --- Config ---
-const ROOM_SIZE = 10; // Size of each map grid cell in 3D space
+const ROOM_SIZE = 10;
 const WALL_HEIGHT = 4;
 const WALL_THICKNESS = 0.5;
-const CAMERA_HEIGHT = 15; // How high the overhead camera is
+const CAMERA_Y_OFFSET = 15; // Camera height
+const PLAYER_SPEED = 5; // Movement speed units/sec
+const PLAYER_RADIUS = 0.5;
+const PLAYER_HEIGHT = 1.8;
+const PROJECTILE_SPEED = 15;
+const PROJECTILE_RADIUS = 0.2;
 
 // --- Three.js Setup ---
 let scene, camera, renderer;
-let mapGroup; // A group to hold all map related objects
-// let controls; // Optional OrbitControls
+let playerMesh; // Visual representation of the player
+const meshesToSync = []; // Array to hold { mesh, body } pairs for sync
+const projectiles = []; // Active projectiles { mesh, body, lifetime }
+
+// --- Physics Setup ---
+let world;
+let playerBody; // Physics body for the player
+const physicsBodies = []; // Keep track of bodies to remove later if needed
+const cannonDebugRenderer = null; // Optional: Use cannon-es-debugger
+
+// --- Game State ---
+let gameState = {
+    inventory: [],
+    stats: { hp: 30, maxHp: 30, strength: 7, wisdom: 5, courage: 6 },
+    position: { x: 0, z: 0 }, // Player's logical grid position (optional)
+    monsters: [], // Store active monster data { id, hp, body, mesh, ... }
+    items: [], // Store active item data { id, name, body, mesh, ... }
+};
+const keysPressed = {}; // Track currently pressed keys
+
+// --- Game Data (Keep relevant parts, add monster/item placements) ---
+const gameData = {
+    // Structure: "x,y": { type, features, items?, monsters? }
+    "0,0": { type: 'city', features: ['door_north'] },
+    "0,1": { type: 'forest', features: ['path_north', 'door_south', 'item_potion'] }, // Add item marker
+    "0,2": { type: 'forest', features: ['path_south', 'monster_goblin'] }, // Add monster marker
+    // ... Add many more locations based on your design ...
+};
+
+const itemsData = {
+    "Healing Potion": { type: "consumable", description: "Restores 10 HP.", hpRestore: 10, model: 'sphere_red' },
+    "Key": { type: "quest", description: "Unlocks a door.", model: 'box_gold'},
+    // ...
+};
+
+const monstersData = {
+    "goblin": { hp: 15, attack: 4, defense: 1, speed: 2, model: 'capsule_green', xp: 5 },
+    // ...
+};
+
+// --- Initialization ---
+
+function init() {
+    initThreeJS();
+    initPhysics();
+    initPlayer();
+    generateMap(); // Generate based on gameData
+    setupInputListeners();
+    animate(); // Start the game loop
+    updateUI(); // Initial UI update
+    addLog("Welcome! Move with WASD/Arrows. Space to Attack.", "info");
+}
 
 function initThreeJS() {
     scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x111111); // Darker background for contrast
-    scene.fog = new THREE.Fog(0x111111, CAMERA_HEIGHT * 1.5, CAMERA_HEIGHT * 3); // Add fog for depth
+    scene.background = new THREE.Color(0x111111);
 
     camera = new THREE.PerspectiveCamera(60, sceneContainer.clientWidth / sceneContainer.clientHeight, 0.1, 1000);
-    // Set initial overhead position (will be updated)
-    camera.position.set(0, CAMERA_HEIGHT, 0);
+    // Start camera slightly offset, will follow player
+    camera.position.set(0, CAMERA_Y_OFFSET, 5); // Look slightly forward initially
     camera.lookAt(0, 0, 0);
 
     renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight);
-    renderer.shadowMap.enabled = true; // Enable shadows if using lights that cast them
+    renderer.shadowMap.enabled = true;
     sceneContainer.appendChild(renderer.domElement);
 
     // Lighting
-    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Softer ambient
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
     scene.add(ambientLight);
-    // Light source directly above the center (acts like a player flashlight)
-    const playerLight = new THREE.PointLight(0xffffff, 1.5, ROOM_SIZE * 3); // Intensity, Distance
-    playerLight.position.set(0, CAMERA_HEIGHT - 2, 0); // Position slightly below camera
-    scene.add(playerLight);
-    // We will move this light with the camera/player later
-
-    // Map Group
-    mapGroup = new THREE.Group();
-    scene.add(mapGroup);
+    const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    dirLight.position.set(10, 20, 5);
+    dirLight.castShadow = true; // Enable shadows for this light
+    scene.add(dirLight);
 
-    // Optional Controls (for debugging)
-    // controls = new OrbitControls(camera, renderer.domElement);
-    // controls.enableDamping = true;
-    // controls.target.set(0, 0, 0); // Ensure controls start looking at origin
+    // Configure shadow properties if needed
+    dirLight.shadow.mapSize.width = 1024;
+    dirLight.shadow.mapSize.height = 1024;
 
     window.addEventListener('resize', onWindowResize, false);
-    animate();
 }
 
-function onWindowResize() {
-    if (!renderer || !camera) return;
-    camera.aspect = sceneContainer.clientWidth / sceneContainer.clientHeight;
-    camera.updateProjectionMatrix();
-    renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight);
+function initPhysics() {
+    world = new CANNON.World({
+        gravity: new CANNON.Vec3(0, -9.82, 0) // Standard gravity
+    });
+    world.broadphase = new CANNON.NaiveBroadphase(); // Simple broadphase for now
+    // world.solver.iterations = 10; // Adjust solver iterations if needed
+
+    // Ground plane (physics only)
+    const groundShape = new CANNON.Plane();
+    const groundBody = new CANNON.Body({ mass: 0 }); // Mass 0 means static
+    groundBody.addShape(groundShape);
+    groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0); // Rotate plane to be horizontal
+    world.addBody(groundBody);
 }
 
-function animate() {
-    requestAnimationFrame(animate);
-    // if (controls) controls.update();
-    if (renderer && scene && camera) {
-        renderer.render(scene, camera);
-    }
+// --- Primitive Assembly Functions ---
+function createPlayerMesh() {
+    const group = new THREE.Group();
+    // Simple capsule: cylinder + sphere cap
+    const bodyMat = new THREE.MeshLambertMaterial({ color: 0x0077ff }); // Blue player
+    const bodyGeom = new THREE.CylinderGeometry(PLAYER_RADIUS, PLAYER_RADIUS, PLAYER_HEIGHT - (PLAYER_RADIUS * 2), 16);
+    const body = new THREE.Mesh(bodyGeom, bodyMat);
+    body.position.y = PLAYER_RADIUS; // Position cylinder part correctly
+    body.castShadow = true;
+
+    const headGeom = new THREE.SphereGeometry(PLAYER_RADIUS, 16, 16);
+    const head = new THREE.Mesh(headGeom, bodyMat);
+    head.position.y = PLAYER_HEIGHT - PLAYER_RADIUS; // Position head on top
+    head.castShadow = true;
+
+    group.add(body);
+    group.add(head);
+
+    // Add a "front" indicator (e.g., small cone)
+    const noseGeom = new THREE.ConeGeometry(PLAYER_RADIUS * 0.3, PLAYER_RADIUS * 0.5, 8);
+    const noseMat = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // Yellow nose
+    const nose = new THREE.Mesh(noseGeom, noseMat);
+    nose.position.set(0, PLAYER_HEIGHT * 0.7, PLAYER_RADIUS * 0.7); // Position in front, slightly down
+    nose.rotation.x = Math.PI / 2; // Point forward
+    group.add(nose);
+
+    return group;
 }
 
-// --- Primitive Creation Functions ---
-const materials = {
-    floor_forest: new THREE.MeshLambertMaterial({ color: 0x228B22 }), // Green
-    floor_cave: new THREE.MeshLambertMaterial({ color: 0x696969 }), // Grey
-    floor_room: new THREE.MeshLambertMaterial({ color: 0xaaaaaa }), // Light Grey
-    floor_city: new THREE.MeshLambertMaterial({ color: 0xdeb887 }), // Tan/Pavement
-    wall: new THREE.MeshLambertMaterial({ color: 0x888888 }),
-    door: new THREE.MeshLambertMaterial({ color: 0xcd853f }), // Peru (brownish)
-    river: new THREE.MeshBasicMaterial({ color: 0x4682B4, transparent: true, opacity: 0.7 }), // Steel Blue
-    unexplored: new THREE.MeshBasicMaterial({ color: 0x555555, wireframe: true }),
-    visited_marker: new THREE.MeshBasicMaterial({ color: 0xaaaaaa, wireframe: true, transparent: true, opacity: 0.5 }), // Faint marker for visited
-    current_marker: new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }), // Yellow marker
-};
-
-const geometries = {
-    floor: new THREE.PlaneGeometry(ROOM_SIZE, ROOM_SIZE),
-    wall: new THREE.BoxGeometry(ROOM_SIZE, WALL_HEIGHT, WALL_THICKNESS),
-    wall_side: new THREE.BoxGeometry(WALL_THICKNESS, WALL_HEIGHT, ROOM_SIZE),
-    marker: new THREE.BoxGeometry(ROOM_SIZE * 0.8, 0.1, ROOM_SIZE * 0.8), // Flat marker
-    river: new THREE.PlaneGeometry(ROOM_SIZE * 0.3, ROOM_SIZE), // Thin river strip
-};
-
-function createFloor(type = 'room', x = 0, z = 0) {
-    const material = materials[`floor_${type}`] || materials.floor_room;
-    const floor = new THREE.Mesh(geometries.floor, material);
-    floor.rotation.x = -Math.PI / 2; // Rotate to be flat
-    floor.position.set(x * ROOM_SIZE, 0, z * ROOM_SIZE);
-    floor.receiveShadow = true;
-    return floor;
+function createSimpleMonsterMesh(modelType = 'capsule_green') {
+    const group = new THREE.Group();
+    let color = 0xff0000; // Default red
+    let geom;
+    let mat;
+
+    if (modelType === 'capsule_green') {
+        color = 0x00ff00; // Green
+        mat = new THREE.MeshLambertMaterial({ color: color });
+        const bodyGeom = new THREE.CylinderGeometry(0.4, 0.4, 1.0, 12);
+        const headGeom = new THREE.SphereGeometry(0.4, 12, 12);
+        const body = new THREE.Mesh(bodyGeom, mat);
+        const head = new THREE.Mesh(headGeom, mat);
+        body.position.y = 0.5;
+        head.position.y = 1.0 + 0.4;
+        group.add(body);
+        group.add(head);
+    } else { // Default box monster
+        geom = new THREE.BoxGeometry(0.8, 1.2, 0.8);
+        mat = new THREE.MeshLambertMaterial({ color: color });
+        const mesh = new THREE.Mesh(geom, mat);
+        mesh.position.y = 0.6;
+        group.add(mesh);
+    }
+    group.traverse(child => { if (child.isMesh) child.castShadow = true; });
+    return group;
 }
 
-function createWall(direction, x = 0, z = 0) {
-    let wall;
-    const base_x = x * ROOM_SIZE;
-    const base_z = z * ROOM_SIZE;
-    const half_room = ROOM_SIZE / 2;
-    const wall_y = WALL_HEIGHT / 2; // Position center of wall at half height
-
-    switch (direction) {
-        case 'north':
-            wall = new THREE.Mesh(geometries.wall, materials.wall);
-            wall.position.set(base_x, wall_y, base_z - half_room);
-            break;
-        case 'south':
-            wall = new THREE.Mesh(geometries.wall, materials.wall);
-            wall.position.set(base_x, wall_y, base_z + half_room);
-            break;
-        case 'east':
-            wall = new THREE.Mesh(geometries.wall_side, materials.wall);
-            wall.position.set(base_x + half_room, wall_y, base_z);
-            break;
-        case 'west':
-            wall = new THREE.Mesh(geometries.wall_side, materials.wall);
-            wall.position.set(base_x - half_room, wall_y, base_z);
-            break;
-        default: return null;
-    }
-    wall.castShadow = true;
-    wall.receiveShadow = true;
-    return wall;
+function createSimpleItemMesh(modelType = 'sphere_red') {
+     let geom, mat;
+     let color = 0xffffff; // Default white
+
+     if(modelType === 'sphere_red') {
+         color = 0xff0000;
+         geom = new THREE.SphereGeometry(0.3, 16, 16);
+     } else if (modelType === 'box_gold') {
+          color = 0xffd700;
+          geom = new THREE.BoxGeometry(0.4, 0.4, 0.4);
+     } else { // Default sphere
+          geom = new THREE.SphereGeometry(0.3, 16, 16);
+     }
+     mat = new THREE.MeshStandardMaterial({ color: color, metalness: 0.3, roughness: 0.6 });
+     const mesh = new THREE.Mesh(geom, mat);
+     mesh.position.y = PLAYER_RADIUS; // Place at player radius height
+     mesh.castShadow = true;
+     return mesh;
 }
 
-function createFeature(feature, x = 0, z = 0) {
-    const base_x = x * ROOM_SIZE;
-    const base_z = z * ROOM_SIZE;
-    let mesh = null;
-    // Example: Add a river feature
-    if (feature === 'river') {
-        mesh = new THREE.Mesh(geometries.river, materials.river);
-        mesh.rotation.x = -Math.PI / 2;
-        mesh.position.set(base_x, 0.05, base_z); // Slightly above floor
-    }
-    // Add more features: 'door_north', 'chest', 'tree' etc.
-    // For doors, you might modify/omit wall segments instead of adding an object
+function createProjectileMesh() {
+    const geom = new THREE.SphereGeometry(PROJECTILE_RADIUS, 8, 8);
+    const mat = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // Bright yellow
+    const mesh = new THREE.Mesh(geom, mat);
     return mesh;
 }
 
-
-function createMarker(type, x = 0, z = 0) {
-    let material;
-    switch (type) {
-        case 'current': material = materials.current_marker; break;
-        case 'visited': material = materials.visited_marker; break;
-        case 'unexplored': material = materials.unexplored; break;
-        default: return null;
-    }
-    const marker = new THREE.Mesh(geometries.marker, material);
-    marker.position.set(x * ROOM_SIZE, 0.1, z * ROOM_SIZE); // Slightly above floor
-    return marker;
+// --- Player Setup ---
+function initPlayer() {
+    // Visuals
+    playerMesh = createPlayerMesh();
+    playerMesh.position.y = PLAYER_HEIGHT / 2; // Adjust initial position based on model
+    scene.add(playerMesh);
+
+    // Physics
+    // Using a capsule shape approximation (sphere + cylinder + sphere) is complex in Cannon.
+    // Let's use a simpler Sphere or Box for now. Sphere is often better for rolling/movement.
+    const playerShape = new CANNON.Sphere(PLAYER_RADIUS);
+    playerBody = new CANNON.Body({
+        mass: 5, // Give player some mass
+        shape: playerShape,
+        position: new CANNON.Vec3(0, PLAYER_HEIGHT / 2, 0), // Start at origin, slightly above ground
+        linearDamping: 0.9, // Add damping to prevent sliding forever
+        angularDamping: 0.9, // Prevent spinning wildly
+        fixedRotation: true, // Prevent player body from tipping over (optional but good for top-down)
+    });
+     playerBody.addEventListener("collide", handlePlayerCollision); // Add collision listener
+    world.addBody(playerBody);
+
+    // Add to sync list
+    meshesToSync.push({ mesh: playerMesh, body: playerBody });
 }
 
-// --- Game Data (ADD MAP COORDINATES and TYPE/FEATURES) ---
-const gameData = {
-    // Page ID: { title, content, options, illustration(optional), mapX, mapY, type, features? }
-    "1": {
-        title: "The Beginning", content: "<p>...</p>", illustration: "city-gates",
-        mapX: 0, mapY: 0, type: 'city', features: ['door_north'], // Example feature
-        options: [
-            { text: "Visit the local weaponsmith", next: 2 },
-            { text: "Seek wisdom at the temple", next: 3 },
-            { text: "Meet the resistance leader", next: 4 }
-        ]
-    },
-    "2": { // Weaponsmith - let's place it near the start
-        title: "The Weaponsmith", content: "<p>...</p>", illustration: "weaponsmith",
-        mapX: -1, mapY: 0, type: 'room', features: ['door_east'],
-        options: [
-            { text: "Take Flaming Sword", next: 5, addItem: "Flaming Sword" },
-            // ... other weapon choices ...
-            { text: "Return to city square", next: 1 }
-        ]
-    },
-    "3": { // Temple
-        title: "The Ancient Temple", content: "<p>...</p>", illustration: "temple",
-        mapX: 1, mapY: 0, type: 'room', features: ['door_west'],
-         options: [
-             { text: "Learn Healing Light", next: 5, addItem: "Healing Light Spell" },
-             // ... other spell choices ...
-             { text: "Return to city square", next: 1 }
-        ]
-    },
-    "4": { // Resistance Tavern
-        title: "The Resistance Leader", content: "<p>...</p>", illustration: "resistance-meeting",
-        mapX: 0, mapY: -1, type: 'room', features: ['door_north'],
-         options: [
-             { text: "Take Secret Tunnel Map", next: 5, addItem: "Secret Tunnel Map" },
-             // ... other item choices ...
-             { text: "Return to city square", next: 1 }
-        ]
-    },
-    "5": { // Start of Forest Path (North of City)
-        title: "The Journey Begins", content: "<p>You leave Silverhold...</p>", illustration: "shadowwood-forest",
-        mapX: 0, mapY: 1, type: 'forest', features: ['path_north', 'path_east', 'path_west', 'door_south'],
-        options: [
-            { text: "Take the main road (North)", next: 6 },
-            { text: "Follow the river path (East)", next: 7 },
-            { text: "Brave the ruins shortcut (West)", next: 8 },
-            { text: "Return to the City Gate", next: 1} // Link back
-        ]
-    },
-    "6": { // Forest Path North
-        title: "Ambush!", content: "<p>Scouts jump out!</p>", illustration: "road-ambush",
-        mapX: 0, mapY: 2, type: 'forest', features: ['path_north', 'path_south'],
-        // Challenge will determine next step (9 or 10)
-         challenge: { title: "Escape Ambush", stat: "courage", difficulty: 5, success: 9, failure: 10 },
-         options: [] // Options determined by challenge
-    },
-     "7": { // River Path East
-         title: "Misty River", content: "<p>A spirit appears...</p>", illustration: "river-spirit",
-         mapX: 1, mapY: 1, type: 'forest', features: ['river', 'path_west'],
-         challenge: { title: "River Riddle", stat: "wisdom", difficulty: 6, success: 11, failure: 12 },
-         options: []
-     },
-     "8": { // Ruins Path West
-         title: "Forgotten Ruins", content: "<p>Whispers echo...</p>", illustration: "ancient-ruins",
-         mapX: -1, mapY: 1, type: 'ruins', features: ['path_east'],
-         challenge: { title: "Navigate Ruins", stat: "wisdom", difficulty: 5, success: 13, failure: 14 },
-         options: []
-     },
-     // --- Corresponding Challenge Outcomes ---
-     "9": { // Success Ambush (Continue North)
-        title: "Breaking Through", content: "<p>You fought them off!</p>", illustration: "forest-edge",
-        mapX: 0, mapY: 3, type: 'forest', features: ['path_north', 'path_south'], // Edge of forest
-        options: [ {text: "Cross the plains", next: 15} ] // To page 15 (fortress approach)
-     },
-     "10": { // Failure Ambush (Captured) -> Leads to different location potentially? Let's put it nearby for now.
-         title: "Captured!", content: "<p>They drag you to an outpost.</p>", illustration: "prisoner-cell",
-         mapX: 1, mapY: 2, type: 'cave', // Represent outpost as cave/cell
-         options: [ { text: "Wait...", next: 20 } ] // Link to page 20 logic
-     },
-     "11": { // Success Riddle
-         title: "Spirit's Blessing", content: "<p>The spirit blesses you.</p>", illustration: "spirit-blessing",
-         mapX: 1, mapY: 1, type: 'forest', features: ['river', 'path_west'], // Stay in same spot, get item/stat
-         addItem: "Water Spirit's Blessing", statIncrease: { stat: "wisdom", amount: 2 },
-         options: [ { text: "Continue journey", next: 15 } ] // Option to move on
-     },
-    "12": { // Failure Riddle
-         title: "Spirit's Wrath", content: "<p>Pulled underwater!</p>", illustration: "river-danger",
-         mapX: 1, mapY: 1, type: 'forest', features: ['river', 'path_west'], // Stay in same spot, lose HP
-         hpLoss: 8,
-         options: [ { text: "Struggle onwards", next: 15 } ]
-     },
-     "13": { // Success Ruins
-         title: "Ancient Allies", content: "<p>The spirits offer help.</p>", illustration: "ancient-spirits",
-         mapX: -1, mapY: 1, type: 'ruins', features: ['path_east'],
-         addItem: "Ancient Amulet", statIncrease: { stat: "wisdom", amount: 1 },
-         options: [ { text: "Accept amulet and continue", next: 15 } ]
-     },
-     "14": { // Failure Ruins
-         title: "Lost in Time", content: "<p>Exhausted from the maze.</p>", illustration: "lost-ruins",
-         mapX: -1, mapY: 1, type: 'ruins', features: ['path_east'],
-         hpLoss: 10,
-         options: [ { text: "Push onwards, weakened", next: 15 } ]
-     },
-     "15": { // Fortress Approach (example)
-        title: "The Looming Fortress", content: "<p>The dark fortress rises...</p>", illustration: "evil-fortress",
-        mapX: 0, mapY: 4, type: 'plains', // Barren plains
-        options: [ /* ... options to infiltrate ... */ {text: "Survey the area", next: 16} ]
-     },
-     // ... Add ALL other pages with mapX, mapY, type, features ...
-    "99": {
-        title: "Game Over", content: "<p>Your adventure ends here.</p>",
-        mapX: 0, mapY: 0, type: 'gameover', // Special type
-        options: [{ text: "Restart", next: 1 }],
-        illustration: "game-over",
-        gameOver: true
-     }
-};
-
-const itemsData = { // (Keep this data as before)
-    "Flaming Sword": { type: "weapon", description: "A fiery blade. +3 Attack.", attackBonus: 3 },
-    "Whispering Bow": { type: "weapon", description: "A silent bow. +2 Attack.", attackBonus: 2 },
-    // ... other items ...
-    "Secret Tunnel Map": { type: "quest", description: "Shows a hidden path" },
-    "Master Key": { type: "quest", description: "Unlocks many doors" },
-    "Ancient Amulet": { type: "armor", description: "Wards off some dark magic. +1 Defense", defenseBonus: 1}, // Made armor type
-};
+// --- Map Generation ---
+function generateMap() {
+    const wallMaterial = new CANNON.Material("wallMaterial"); // For physics interactions
+
+    for (const coordString in gameData) {
+        const [xStr, yStr] = coordString.split(',');
+        const x = parseInt(xStr);
+        const y = parseInt(yStr); // Represents Z in 3D
+        const data = gameData[coordString];
+
+        // Create Floor Mesh (visual only, physics ground plane handles floor collision)
+        const floorMesh = createFloor(data.type, x, y);
+        scene.add(floorMesh); // Add floor directly to scene, not mapGroup if physics handles it
+
+        // Create Wall Meshes and Physics Bodies
+        const features = data.features || [];
+        const wallPositions = [
+            { dir: 'north', xOffset: 0, zOffset: -0.5, geom: geometries.wall },
+            { dir: 'south', xOffset: 0, zOffset: 0.5, geom: geometries.wall },
+            { dir: 'east', xOffset: 0.5, zOffset: 0, geom: geometries.wall_side },
+            { dir: 'west', xOffset: -0.5, zOffset: 0, geom: geometries.wall_side },
+        ];
+
+        wallPositions.forEach(wp => {
+            // Check if a feature indicates an opening in this direction
+            const doorFeature = `door_${wp.dir}`;
+            const pathFeature = `path_${wp.dir}`; // Consider paths as openings too
+            if (!features.includes(doorFeature) && !features.includes(pathFeature)) {
+                // Add Visual Wall Mesh
+                const wallMesh = new THREE.Mesh(wp.geom, materials.wall);
+                wallMesh.position.set(
+                    x * ROOM_SIZE + wp.xOffset * ROOM_SIZE,
+                    WALL_HEIGHT / 2,
+                    y * ROOM_SIZE + wp.zOffset * ROOM_SIZE
+                );
+                wallMesh.castShadow = true;
+                wallMesh.receiveShadow = true;
+                scene.add(wallMesh); // Add walls directly to scene
+
+                // Add Physics Wall Body
+                const wallShape = new CANNON.Box(new CANNON.Vec3(
+                    wp.geom.parameters.width / 2,
+                    wp.geom.parameters.height / 2,
+                    wp.geom.parameters.depth / 2
+                ));
+                const wallBody = new CANNON.Body({
+                    mass: 0, // Static
+                    shape: wallShape,
+                    position: new CANNON.Vec3(wallMesh.position.x, wallMesh.position.y, wallMesh.position.z),
+                    material: wallMaterial // Assign physics material
+                });
+                world.addBody(wallBody);
+                physicsBodies.push(wallBody); // Keep track if needed for removal
+            }
+        });
 
-// --- Game State ---
-let gameState = {}; // Initialize in startGame
-let visitedCoords = new Set(); // Track visited map coordinates as "x,y" strings
-
-// --- Game Logic Functions ---
-
-function startGame() {
-    gameState = { // Reset state
-        currentPageId: 1,
-        inventory: [],
-        stats: { courage: 7, wisdom: 5, strength: 6, hp: 30, maxHp: 30 }
-    };
-    visitedCoords = new Set(); // Reset visited locations
-    const startPage = gameData[gameState.currentPageId];
-    if (startPage && startPage.mapX !== undefined && startPage.mapY !== undefined) {
-        visitedCoords.add(`${startPage.mapX},${startPage.mapY}`); // Mark start as visited
+        // Spawn Items
+        if (data.items) {
+            data.items.forEach(itemName => spawnItem(itemName, x, y));
+        }
+        // Spawn Monsters
+         if (data.monsters) {
+            data.monsters.forEach(monsterType => spawnMonster(monsterType, x, y));
+         }
+
+         // Add other features visually (rivers, etc. - physics interaction TBD)
+         features.forEach(feature => {
+             if (feature === 'river') {
+                 const riverMesh = createFeature(feature, x, y);
+                 if (riverMesh) scene.add(riverMesh);
+             }
+             // Handle other features
+         });
     }
-    renderPage(gameState.currentPageId);
 }
 
-function renderPage(pageId) {
-    const page = gameData[pageId];
-    if (!page) {
-        console.error(`Error: Page data not found for ID: ${pageId}`);
-        // Handle error state more gracefully if needed
-        storyTitleElement.textContent = "Error";
-        storyContentElement.innerHTML = "<p>Adventure lost in the void!</p>";
-         choicesElement.innerHTML = ''; // Clear choices
-         addChoiceButton("Restart", 1); // Add only restart
-        updateScene(null); // Clear the scene or show error state
+function spawnItem(itemName, gridX, gridY) {
+    const itemData = itemsData[itemName];
+    if (!itemData) {
+        console.warn(`Item data not found for ${itemName}`);
         return;
     }
 
-    // Update UI Text
-    storyTitleElement.textContent = page.title || "Untitled Location";
-    storyContentElement.innerHTML = page.content || "<p>...</p>";
-    updateStatsDisplay();
-    updateInventoryDisplay();
-
-    // Update Choices based on requirements
-    choicesElement.innerHTML = ''; // Clear old choices
-    let hasAvailableOptions = false;
-    if (page.options && !page.challenge && !page.gameOver) { // Don't show choices if there's a challenge or game over
-        page.options.forEach(option => {
-             // Check requirements before adding the button
-            const requirementFailed = !checkChoiceRequirements(option, gameState.inventory);
-            const button = addChoiceButton(option.text, option.next, option.addItem, requirementFailed);
-            if (!requirementFailed) {
-                hasAvailableOptions = true;
-            }
-        });
-    }
-
-     // Handle Game Over / No Options / Challenge Page
-     if (page.gameOver) {
-          addChoiceButton("Restart Adventure", 1);
-          hasAvailableOptions = true; // Allow restart
-     } else if (page.challenge) {
-          choicesElement.innerHTML = `<p><i>A challenge blocks your path...</i></p>`;
-          // Challenge resolved in handleChoiceClick *after* rendering this page
-     } else if (!hasAvailableOptions && !page.gameOver && !page.challenge) {
-          choicesElement.innerHTML = '<p><i>No further options available from here.</i></p>';
-          addChoiceButton("Restart Adventure", 1);
-     }
-
-    // Update 3D Scene based on current page's coordinates
-    updateScene(pageId);
+    const x = gridX * ROOM_SIZE + (Math.random() - 0.5) * (ROOM_SIZE * 0.5); // Randomize position within cell
+    const z = gridY * ROOM_SIZE + (Math.random() - 0.5) * (ROOM_SIZE * 0.5);
+    const y = PLAYER_RADIUS; // Place at reachable height
+
+    // Visual Mesh
+    const mesh = createSimpleItemMesh(itemData.model);
+    mesh.position.set(x, y, z);
+    mesh.userData = { type: 'item', name: itemName }; // Store game data on mesh
+    scene.add(mesh);
+
+    // Physics Body (Static Sensor)
+    const shape = new CANNON.Sphere(0.4); // Slightly larger than visual for easier pickup
+    const body = new CANNON.Body({
+        mass: 0,
+        isTrigger: true, // Sensor - detects collision but doesn't cause physical reaction
+        shape: shape,
+        position: new CANNON.Vec3(x, y, z)
+    });
+    body.userData = { type: 'item', name: itemName, mesh }; // Link body back to mesh
+    world.addBody(body);
+
+    gameState.items.push({ id: body.id, name: itemName, body: body, mesh: mesh });
+    physicsBodies.push(body);
 }
 
-// Helper to add choice buttons
-function addChoiceButton(text, nextPage, addItem = null, disabled = false, requireItem = null, requireAnyItem = null) {
-     const button = document.createElement('button');
-     button.classList.add('choice-button');
-     button.textContent = text;
-     button.disabled = disabled;
-
-     // Store data
-     button.dataset.nextPage = nextPage;
-     if (addItem) button.dataset.addItem = addItem;
-
-     // Create tooltip for disabled buttons based on requirement
-     if (disabled) {
-         if (requireItem) button.title = `Requires: ${requireItem}`;
-         else if (requireAnyItem) button.title = `Requires one of: ${requireAnyItem.join(', ')}`;
-         else button.title = `Cannot choose this option now.`;
+function spawnMonster(monsterType, gridX, gridY) {
+     const monsterData = monstersData[monsterType];
+     if (!monsterData) {
+         console.warn(`Monster data not found for ${monsterType}`);
+         return;
      }
 
-     if (!disabled) {
-         button.onclick = () => handleChoiceClick(button.dataset);
-     }
-     choicesElement.appendChild(button);
-     return button; // Return button in case needed
+     const x = gridX * ROOM_SIZE + (Math.random() - 0.5) * (ROOM_SIZE * 0.3); // Randomize position
+     const z = gridY * ROOM_SIZE + (Math.random() - 0.5) * (ROOM_SIZE * 0.3);
+     const y = PLAYER_HEIGHT / 2; // Start at roughly player height
+
+     // Visual Mesh
+     const mesh = createSimpleMonsterMesh(monsterData.model);
+     mesh.position.set(x, y, z);
+     mesh.userData = { type: 'monster', monsterType: monsterType };
+     scene.add(mesh);
+
+     // Physics Body (Dynamic)
+     // Using a simple sphere collider for monsters for now
+     const shape = new CANNON.Sphere(PLAYER_RADIUS * 0.8); // Slightly smaller than player
+     const body = new CANNON.Body({
+         mass: 10, // Give mass
+         shape: shape,
+         position: new CANNON.Vec3(x, y, z),
+         linearDamping: 0.8,
+         angularDamping: 0.9,
+         fixedRotation: true, // Prevent tipping
+     });
+     body.userData = { type: 'monster', monsterType: monsterType, mesh: mesh, hp: monsterData.hp }; // Store HP on body userData
+     world.addBody(body);
+
+     gameState.monsters.push({ id: body.id, type: monsterType, hp: monsterData.hp, body: body, mesh: mesh });
+     meshesToSync.push({ mesh: mesh, body: body }); // Add monster to sync list
+     physicsBodies.push(body);
+ }
+
+
+// --- Input Handling ---
+function setupInputListeners() {
+    window.addEventListener('keydown', (event) => {
+        keysPressed[event.key.toLowerCase()] = true;
+         keysPressed[event.code] = true; // Also store by code (e.g., Space)
+    });
+    window.addEventListener('keyup', (event) => {
+        keysPressed[event.key.toLowerCase()] = false;
+         keysPressed[event.code] = false;
+    });
 }
 
+function handleInput(deltaTime) {
+    if (!playerBody) return;
 
-// Check choice requirements (returns true if requirements MET)
-function checkChoiceRequirements(option, inventory) {
-    const reqItem = option.requireItem;
-    if (reqItem && !inventory.includes(reqItem)) {
-        return false; // Specific item required but not present
-    }
-    const reqAnyItem = option.requireAnyItem;
-    if (reqAnyItem && !reqAnyItem.some(item => inventory.includes(item))) {
-        return false; // Required one item from list, but none present
-    }
-    return true; // All requirements met or no requirements
-}
-
-function handleChoiceClick(dataset) {
-    const nextPageId = parseInt(dataset.nextPage);
-    const itemToAdd = dataset.addItem;
+    const moveDirection = new CANNON.Vec3(0, 0, 0);
+    const moveSpeed = PLAYER_SPEED;
 
-    if (isNaN(nextPageId)) {
-        console.error("Invalid nextPageId:", dataset.nextPage);
-        return;
+    if (keysPressed['w'] || keysPressed['arrowup']) {
+        moveDirection.z = -1;
+    } else if (keysPressed['s'] || keysPressed['arrowdown']) {
+        moveDirection.z = 1;
     }
 
-    // --- Process Effects of Making the Choice ---
-    if (itemToAdd && !gameState.inventory.includes(itemToAdd)) {
-        gameState.inventory.push(itemToAdd);
-        console.log("Added item:", itemToAdd);
-        // Add feedback to player? Maybe via story text update?
+    if (keysPressed['a'] || keysPressed['arrowleft']) {
+        moveDirection.x = -1;
+    } else if (keysPressed['d'] || keysPressed['arrowright']) {
+        moveDirection.x = 1;
     }
 
-    // --- Move to Next Page ---
-    const previousPageId = gameState.currentPageId;
-    gameState.currentPageId = nextPageId;
-
-    const nextPageData = gameData[nextPageId];
-    if (!nextPageData) {
-        console.error(`Data for page ${nextPageId} not found!`);
-        renderPage(99); // Go to game over page as fallback
-        return;
-    }
-
-     // Add coordinates to visited set
-     if (nextPageData.mapX !== undefined && nextPageData.mapY !== undefined) {
-         visitedCoords.add(`${nextPageData.mapX},${nextPageData.mapY}`);
-     }
-
+    // Normalize diagonal movement and apply speed
+    if (moveDirection.lengthSquared() > 0) { // Only normalize if there's movement
+        moveDirection.normalize();
+        // Apply velocity directly - better for responsive character control than forces
+        playerBody.velocity.x = moveDirection.x * moveSpeed;
+        playerBody.velocity.z = moveDirection.z * moveSpeed;
 
-    // --- Process Landing Effects & Challenges ---
-    let currentPageIdAfterEffects = nextPageId; // Start with the target page ID
+        // Make player mesh face movement direction (optional)
+         const angle = Math.atan2(moveDirection.x, moveDirection.z);
+         // Smooth rotation? Lerp quaternion later. For now, direct set.
+         playerMesh.quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), angle);
 
-    // Apply HP loss defined on the *landing* page
-    if (nextPageData.hpLoss) {
-        gameState.stats.hp -= nextPageData.hpLoss;
-        console.log(`Lost ${nextPageData.hpLoss} HP. Current HP: ${gameState.stats.hp}`);
-        if (gameState.stats.hp <= 0) {
-            console.log("Player died from HP loss!");
-            gameState.stats.hp = 0;
-            renderPage(99); // Go to a specific game over page ID
-            return;
-        }
-    }
-    // Apply stat increase defined on the *landing* page
-    if (nextPageData.statIncrease) {
-        const stat = nextPageData.statIncrease.stat;
-        const amount = nextPageData.statIncrease.amount;
-        if (gameState.stats.hasOwnProperty(stat)) {
-            gameState.stats[stat] += amount;
-            console.log(`Stat ${stat} increased by ${amount}.`);
-        }
+    } else {
+        // If no movement keys pressed, gradually stop (handled by linearDamping)
+        // Or set velocity to zero for instant stop:
+        // playerBody.velocity.x = 0;
+        // playerBody.velocity.z = 0;
     }
 
-     // Handle Challenge on the landing page
-     if (nextPageData.challenge) {
-          const challenge = nextPageData.challenge;
-          const reqStat = challenge.stat;
-          const difficulty = challenge.difficulty;
-          const successPage = challenge.success;
-          const failurePage = challenge.failure;
-
-          if (reqStat && difficulty !== undefined && successPage !== undefined && failurePage !== undefined) {
-             const currentStatValue = gameState.stats[reqStat] || 0;
-             const roll = Math.floor(Math.random() * 6) + 1;
-             const total = roll + currentStatValue;
-             const success = total >= difficulty;
-
-             console.log(`Challenge: ${challenge.title || 'Test'}. Roll(${roll}) + ${reqStat}(${currentStatValue}) = ${total} vs DC ${difficulty}. Success: ${success}`);
-
-             // Update page based on challenge result
-             currentPageIdAfterEffects = success ? successPage : failurePage;
-
-             // Apply stat change from challenge outcome (optional: only on success/failure?)
-             // This example applies basic +/- based on outcome
-             if(gameState.stats.hasOwnProperty(reqStat)) {
-                gameState.stats[reqStat] += success ? 1 : -1;
-                gameState.stats[reqStat] = Math.max(1, gameState.stats[reqStat]); // Don't go below 1
-             }
-
-             // Add challenge result to story? (Needs modification of renderPage or state)
-
-             // If challenge leads to non-existent page, handle error
-             if (!gameData[currentPageIdAfterEffects]) {
-                  console.error(`Challenge outcome page ${currentPageIdAfterEffects} not found!`);
-                  renderPage(99); return;
-             }
-              // Update visited coords for the challenge outcome page
-              const challengeOutcomePageData = gameData[currentPageIdAfterEffects];
-               if (challengeOutcomePageData.mapX !== undefined && challengeOutcomePageData.mapY !== undefined) {
-                    visitedCoords.add(`${challengeOutcomePageData.mapX},${challengeOutcomePageData.mapY}`);
-               }
-
-
-          } else {
-              console.error("Malformed challenge data on page", nextPageId);
-          }
-          gameState.currentPageId = currentPageIdAfterEffects; // Update state with final page after challenge
-     }
-
-
-    // --- Render the final page after all effects/challenges ---
-    renderPage(gameState.currentPageId);
-}
-
-
-function updateStatsDisplay() {
-    let statsHTML = ''; // Start fresh
-    statsHTML += `<span>HP: ${gameState.stats.hp}/${gameState.stats.maxHp}</span>`;
-    statsHTML += `<span>Str: ${gameState.stats.strength}</span>`;
-    statsHTML += `<span>Wis: ${gameState.stats.wisdom}</span>`;
-    statsHTML += `<span>Cor: ${gameState.stats.courage}</span>`;
-    statsElement.innerHTML = statsHTML;
-}
-
-function updateInventoryDisplay() {
-    let inventoryHTML = ''; // Start fresh
-    if (gameState.inventory.length === 0) {
-        inventoryHTML += '<em>Empty</em>';
-    } else {
-        gameState.inventory.forEach(item => {
-            const itemInfo = itemsData[item] || { type: 'unknown', description: '???' };
-            const itemClass = `item-${itemInfo.type || 'unknown'}`;
-            inventoryHTML += `<span class="${itemClass}" title="${itemInfo.description}">${item}</span>`;
-        });
+    // Handle 'Fire' (Space bar)
+    if (keysPressed['space']) {
+        fireProjectile();
+        keysPressed['space'] = false; // Prevent holding space for continuous fire (debounce)
     }
-    inventoryElement.innerHTML = inventoryHTML;
 }
 
-// --- Map and Scene Update Logic ---
-function updateScene(currentPageId) {
-    if (!mapGroup) return;
-
-    // Clear previous map elements
-    while (mapGroup.children.length > 0) {
-        mapGroup.remove(mapGroup.children[0]);
-    }
+// --- Combat ---
+function fireProjectile() {
+    if (!playerBody || !playerMesh) return;
+    addLog("Pew!", "combat"); // Simple log
+
+    // Create Mesh
+    const projectileMesh = createProjectileMesh();
+    // Create Physics Body
+    const projectileShape = new CANNON.Sphere(PROJECTILE_RADIUS);
+    const projectileBody = new CANNON.Body({
+        mass: 0.1, // Very light
+        shape: projectileShape,
+        linearDamping: 0.01, // Minimal damping
+        angularDamping: 0.01,
+    });
+    projectileBody.addEventListener("collide", handleProjectileCollision);
+
+    // Calculate initial position and velocity
+    // Start slightly in front of player, based on player's rotation
+    const offsetDistance = PLAYER_RADIUS + PROJECTILE_RADIUS + 0.1; // Start just outside player radius
+    const direction = new THREE.Vector3(0, 0, -1); // Base direction (forward Z)
+    direction.applyQuaternion(playerMesh.quaternion); // Rotate based on player mesh orientation
+
+    const startPos = new CANNON.Vec3().copy(playerBody.position).vadd(
+        new CANNON.Vec3(direction.x, 0, direction.z).scale(offsetDistance) // Offset horizontally
+    );
+    startPos.y = PLAYER_HEIGHT * 0.7; // Fire from "head" height approx
+
+    projectileBody.position.copy(startPos);
+    projectileMesh.position.copy(startPos); // Sync initial mesh position
+
+    // Set velocity in the direction the player is facing
+    projectileBody.velocity = new CANNON.Vec3(direction.x, 0, direction.z).scale(PROJECTILE_SPEED);
+
+    // Add to scene and world
+    scene.add(projectileMesh);
+    world.addBody(projectileBody);
+
+    // Add to sync list and active projectiles list
+    const projectileData = { mesh: projectileMesh, body: projectileBody, lifetime: 3.0 }; // 3 second lifetime
+    meshesToSync.push(projectileData);
+    projectiles.push(projectileData);
+    physicsBodies.push(projectileBody);
+
+    // Link body and mesh
+    projectileBody.userData = { type: 'projectile', mesh: projectileMesh, data: projectileData };
+    projectileMesh.userData = { type: 'projectile', body: projectileBody, data: projectileData };
+}
 
-    const currentPageData = gameData[currentPageId];
-    if (!currentPageData || currentPageData.mapX === undefined || currentPageData.mapY === undefined) {
-        console.warn("Cannot update scene, current page has no map coordinates:", currentPageId);
-         // Maybe show a default "limbo" state?
-        camera.position.set(0, CAMERA_HEIGHT, 0);
-        camera.lookAt(0, 0, 0);
-        if (scene.getObjectByName("playerLight")) scene.getObjectByName("playerLight").position.set(0, CAMERA_HEIGHT - 2, 0);
-        return;
+// --- Collision Handling ---
+function handlePlayerCollision(event) {
+    const otherBody = event.body; // The body the player collided with
+    if (!otherBody.userData) return;
+
+    // Player <-> Item Collision
+    if (otherBody.userData.type === 'item') {
+        const itemName = otherBody.userData.name;
+        const itemIndex = gameState.items.findIndex(item => item.id === otherBody.id);
+
+        if (itemIndex > -1 && !gameState.inventory.includes(itemName)) {
+            gameState.inventory.push(itemName);
+            addLog(`Picked up ${itemName}!`, "pickup");
+            updateInventoryDisplay(); // Update UI immediately
+
+            // Remove item from world
+            scene.remove(otherBody.userData.mesh);
+            world.removeBody(otherBody);
+            meshesToSync = meshesToSync.filter(sync => sync.body.id !== otherBody.id);
+            physicsBodies = physicsBodies.filter(body => body.id !== otherBody.id);
+            gameState.items.splice(itemIndex, 1);
+        }
     }
 
-    const currentX = currentPageData.mapX;
-    const currentY = currentPageData.mapY; // Using Y for Z in 3D
-
-    // Update camera and light position to center on current room
-    const targetX = currentX * ROOM_SIZE;
-    const targetZ = currentY * ROOM_SIZE;
-    camera.position.set(targetX, CAMERA_HEIGHT, targetZ + 0.1); // Offset slightly to avoid z-fighting if looking straight down
-    camera.lookAt(targetX, 0, targetZ);
-    const playerLight = scene.getObjectByName("playerLight"); // Get light added in init
-    if (playerLight) playerLight.position.set(targetX, CAMERA_HEIGHT - 2, targetZ);
-
-
-    // Define view distance (how many neighbors to render)
-    const viewDistance = 2;
-
-    // Render current room and neighbors
-    for (let dx = -viewDistance; dx <= viewDistance; dx++) {
-        for (let dy = -viewDistance; dy <= viewDistance; dy++) {
-            const checkX = currentX + dx;
-            const checkY = currentY + dy;
-            const coordString = `${checkX},${checkY}`;
-
-            // Find page ID for this coordinate (requires efficient lookup - maybe build map index?)
-            let pageIdAtCoord = null;
-            for (const id in gameData) {
-                if (gameData[id].mapX === checkX && gameData[id].mapY === checkY) {
-                    pageIdAtCoord = id;
-                    break;
-                }
-            }
-
-            if (pageIdAtCoord) {
-                const pageDataAtCoord = gameData[pageIdAtCoord];
-                const isVisited = visitedCoords.has(coordString);
-                const isCurrent = (checkX === currentX && checkY === currentY);
-
-                if (isCurrent || isVisited) {
-                    // Render visited/current room
-                    const floor = createFloor(pageDataAtCoord.type, checkX, checkY);
-                    mapGroup.add(floor);
-
-                    // Add walls (simplified: add all 4 unless a feature indicates door/opening)
-                    // More complex: check connections to neighbors
-                    const features = pageDataAtCoord.features || [];
-                    if (!features.includes('door_north')) mapGroup.add(createWall('north', checkX, checkY));
-                    if (!features.includes('door_south')) mapGroup.add(createWall('south', checkX, checkY));
-                    if (!features.includes('door_east')) mapGroup.add(createWall('east', checkX, checkY));
-                    if (!features.includes('door_west')) mapGroup.add(createWall('west', checkX, checkY));
-
-                     // Add other features
-                     features.forEach(feature => {
-                         const featureMesh = createFeature(feature, checkX, checkY);
-                         if (featureMesh) mapGroup.add(featureMesh);
-                     });
-
-
-                    // Add marker
-                    if (isCurrent) {
-                        mapGroup.add(createMarker('current', checkX, checkY));
-                    } else {
-                        mapGroup.add(createMarker('visited', checkX, checkY));
-                    }
-
-                } else {
-                    // Render unexplored marker for adjacent non-visited rooms
-                     if(Math.abs(dx) <= 1 && Math.abs(dy) <= 1 && !(dx === 0 && dy ===0)) { // Only immediate neighbors
-                       mapGroup.add(createMarker('unexplored', checkX, checkY));
-                     }
-                }
-            } else {
-                // Optional: Render something if coordinate is empty but adjacent (like a boundary wall)
-                 // Or just leave it empty (part of the fog)
-            }
-        }
+    // Player <-> Monster Collision (Simple damage placeholder)
+    else if (otherBody.userData.type === 'monster') {
+        // Example: Player takes damage on touch
+        // Implement cooldown later
+        gameState.stats.hp -= 1; // Monster touch damage
+        addLog(`Touched by ${otherBody.userData.monsterType}! HP: ${gameState.stats.hp}`, "combat");
+        updateStatsDisplay();
+         if (gameState.stats.hp <= 0) {
+             gameOver("Defeated by a monster!");
+         }
     }
-     // Update controls target if using OrbitControls
-     // if (controls) controls.target.set(targetX, 0, targetZ);
 }
 
-
-// --- Initialization ---
-initThreeJS();
-startGame(); // Start the game after setting up Three.js
+function handleProjectileCollision(event) {
+    const projectileBody = event.target; // The projectile body itself
+    const otherBody = event.body;