Update game.js

game.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import * as CANNON from 'cannon-es';
-// import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Optional for debugging
+// Uncomment for physics debugging:
+// import CannonDebugger from 'cannon-es-debugger';
 
 // --- DOM Elements ---
 const sceneContainer = document.getElementById('scene-container');
@@ -12,8 +13,8 @@ const logElement = document.getElementById('log-display');
 const ROOM_SIZE = 10;
 const WALL_HEIGHT = 4;
 const WALL_THICKNESS = 0.5;
-const CAMERA_Y_OFFSET = 15; // Camera height
-const PLAYER_SPEED = 5; // Movement speed units/sec
+const CAMERA_Y_OFFSET = 20; // Increased camera height for better overview
+const PLAYER_SPEED = 5;
 const PLAYER_RADIUS = 0.5;
 const PLAYER_HEIGHT = 1.8;
 const PROJECTILE_SPEED = 15;
@@ -21,38 +22,35 @@ const PROJECTILE_RADIUS = 0.2;
 
 // --- Three.js Setup ---
 let scene, camera, renderer;
-let playerMesh; // Visual representation of the player
-const meshesToSync = []; // Array to hold { mesh, body } pairs for sync
-const projectiles = []; // Active projectiles { mesh, body, lifetime }
+let playerMesh;
+const meshesToSync = [];
+const projectiles = [];
+let axesHelper; // For debugging orientation
 
 // --- 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
+let playerBody;
+const physicsBodies = [];
+let cannonDebugger = null; // Optional physics debugger instance
 
 // --- 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
+let gameState = {}; // Will be initialized in init()
+const keysPressed = {};
+let gameLoopActive = false; // Control the game loop
 
-// --- Game Data (Keep relevant parts, add monster/item placements) ---
+// --- Game Data (Ensure starting point 0,0 exists!) ---
 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 ...
+    "0,0": { type: 'city', features: ['door_north', 'item_Key'], name: "City Square"}, // Added item
+    "0,1": { type: 'forest', features: ['path_north', 'door_south', 'monster_goblin'], name: "Forest Path" }, // Added monster
+    "0,2": { type: 'forest', features: ['path_south'], name: "Deep Forest"},
+    "1,1": { type: 'forest', features: ['river', 'path_west'], name: "River Bend" },
+    "-1,1": { type: 'ruins', features: ['path_east', 'item_Healing Potion'], name: "Old Ruins"}, // Added item
+    // ... Add many more locations ...
 };
 
 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'},
+    "Key": { type: "quest", description: "A rusty key.", model: 'box_gold'},
     // ...
 };
 
@@ -64,23 +62,40 @@ const monstersData = {
 // --- Initialization ---
 
 function init() {
+    console.log("Initializing Game...");
+    // Reset state cleanly
+    gameState = {
+        inventory: [],
+        stats: { hp: 30, maxHp: 30, strength: 7, wisdom: 5, courage: 6 },
+        position: { x: 0, z: 0 },
+        monsters: [],
+        items: [],
+    };
+    // Clear existing sync/physics lists if restarting
+    meshesToSync.length = 0;
+    projectiles.length = 0;
+    physicsBodies.length = 0;
+
+
     initThreeJS();
     initPhysics();
-    initPlayer();
-    generateMap(); // Generate based on gameData
+    initPlayer(); // Must be after physics
+    generateMap(); // Generate map based on gameData
     setupInputListeners();
-    animate(); // Start the game loop
     updateUI(); // Initial UI update
     addLog("Welcome! Move with WASD/Arrows. Space to Attack.", "info");
+    console.log("Initialization Complete.");
+    gameLoopActive = true; // Start the loop AFTER setup
+    animate(); // Start the game loop
 }
 
 function initThreeJS() {
+    console.log("Initializing Three.js...");
     scene = new THREE.Scene();
     scene.background = new THREE.Color(0x111111);
 
     camera = new THREE.PerspectiveCamera(60, sceneContainer.clientWidth / sceneContainer.clientHeight, 0.1, 1000);
-    // Start camera slightly offset, will follow player
-    camera.position.set(0, CAMERA_Y_OFFSET, 5); // Look slightly forward initially
+    camera.position.set(0, CAMERA_Y_OFFSET, 5); // Start above origin
     camera.lookAt(0, 0, 0);
 
     renderer = new THREE.WebGLRenderer({ antialias: true });
@@ -89,140 +104,152 @@ function initThreeJS() {
     sceneContainer.appendChild(renderer.domElement);
 
     // Lighting
-    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
     scene.add(ambientLight);
-    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);
-
-    // Configure shadow properties if needed
+    const dirLight = new THREE.DirectionalLight(0xffffff, 1.0); // Brighter directional
+    dirLight.position.set(15, 25, 10); // Higher angle
+    dirLight.castShadow = true;
     dirLight.shadow.mapSize.width = 1024;
     dirLight.shadow.mapSize.height = 1024;
+    // Optional: Improve shadow quality/range
+    dirLight.shadow.camera.near = 0.5;
+    dirLight.shadow.camera.far = 50;
+    dirLight.shadow.camera.left = -ROOM_SIZE * 2;
+    dirLight.shadow.camera.right = ROOM_SIZE * 2;
+    dirLight.shadow.camera.top = ROOM_SIZE * 2;
+    dirLight.shadow.camera.bottom = -ROOM_SIZE * 2;
+
+    scene.add(dirLight);
+    // scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) ); // Debug shadow camera
+
+    // Axes Helper
+    axesHelper = new THREE.AxesHelper(ROOM_SIZE / 2); // Size relative to room
+    axesHelper.position.set(0, 0.1, 0); // Slightly above ground
+    scene.add(axesHelper);
+    console.log("Three.js Initialized.");
 
     window.addEventListener('resize', onWindowResize, false);
 }
 
 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
+    console.log("Initializing Cannon-es...");
+    world = new CANNON.World({ gravity: new CANNON.Vec3(0, -9.82, 0) });
+    world.broadphase = new CANNON.SAPBroadphase(world); // Generally better than Naive
+    world.allowSleep = true; // Allow bodies to sleep to save performance
 
-    // Ground plane (physics only)
+    // Ground plane
     const groundShape = new CANNON.Plane();
-    const groundBody = new CANNON.Body({ mass: 0 }); // Mass 0 means static
+    const groundBody = new CANNON.Body({ mass: 0, material: new CANNON.Material("ground") });
     groundBody.addShape(groundShape);
-    groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0); // Rotate plane to be horizontal
+    groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
     world.addBody(groundBody);
+    console.log("Physics World Initialized.");
+
+    // Optional: Physics Debugger
+    // try {
+    //     cannonDebugger = new CannonDebugger(scene, world, {
+    //          color: 0x00ff00, // Optional: specify color
+    //          scale: 1.0,      // Optional: scale
+    //      });
+    //     console.log("Cannon-es Debugger Initialized.");
+    // } catch (e) {
+    //      console.error("Failed to initialize CannonDebugger. Did you include it?", e);
+    // }
 }
 
-// --- Primitive Assembly Functions ---
-function createPlayerMesh() {
+// --- Primitive Creation Functions (Keep as before) ---
+function createPlayerMesh() { /* ... same as before ... */
     const group = new THREE.Group();
-    // Simple capsule: cylinder + sphere cap
-    const bodyMat = new THREE.MeshLambertMaterial({ color: 0x0077ff }); // Blue player
+    const bodyMat = new THREE.MeshLambertMaterial({ color: 0x0077ff });
     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.position.y = PLAYER_RADIUS;
     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.position.y = PLAYER_HEIGHT - PLAYER_RADIUS;
     head.castShadow = true;
-
-    group.add(body);
-    group.add(head);
-
-    // Add a "front" indicator (e.g., small cone)
+    group.add(body); group.add(head);
     const noseGeom = new THREE.ConeGeometry(PLAYER_RADIUS * 0.3, PLAYER_RADIUS * 0.5, 8);
-    const noseMat = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // Yellow nose
+    const noseMat = new THREE.MeshBasicMaterial({ color: 0xffff00 });
     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
+    nose.position.set(0, PLAYER_HEIGHT * 0.7, -PLAYER_RADIUS * 0.7); // Point along negative Z initially
+    nose.rotation.x = Math.PI / 2 + Math.PI; // Adjust rotation to point forward (-Z)
     group.add(nose);
-
     return group;
-}
-
-function createSimpleMonsterMesh(modelType = 'capsule_green') {
+ }
+function createSimpleMonsterMesh(modelType = 'capsule_green') { /* ... same as before ... */
     const group = new THREE.Group();
-    let color = 0xff0000; // Default red
-    let geom;
-    let mat;
-
+    let color = 0xff0000;
+    let geom; let mat;
     if (modelType === 'capsule_green') {
-        color = 0x00ff00; // Green
+        color = 0x00ff00;
         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);
-    }
+        body.position.y = 0.5; head.position.y = 1.0 + 0.4;
+        group.add(body); group.add(head);
+    } else { 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 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);
-     }
+function createSimpleItemMesh(modelType = 'sphere_red') { /* ... same as before ... */
+     let geom, mat; let color = 0xffffff;
+     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 { 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;
+     const mesh = new THREE.Mesh(geom, mat); mesh.position.y = PLAYER_RADIUS; mesh.castShadow = true;
      return mesh;
 }
-
-function createProjectileMesh() {
+function createProjectileMesh() { /* ... same as before ... */
     const geom = new THREE.SphereGeometry(PROJECTILE_RADIUS, 8, 8);
-    const mat = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // Bright yellow
+    const mat = new THREE.MeshBasicMaterial({ color: 0xffff00 });
     const mesh = new THREE.Mesh(geom, mat);
     return mesh;
 }
+// Shared Geometries / Materials for walls/floors
+const floorGeometry = new THREE.PlaneGeometry(ROOM_SIZE, ROOM_SIZE);
+const wallN SGeometry = new THREE.BoxGeometry(ROOM_SIZE, WALL_HEIGHT, WALL_THICKNESS);
+const wallEWGeometry = new THREE.BoxGeometry(WALL_THICKNESS, WALL_HEIGHT, ROOM_SIZE);
+const floorMaterials = {
+    city: new THREE.MeshLambertMaterial({ color: 0xdeb887 }),
+    forest: new THREE.MeshLambertMaterial({ color: 0x228B22 }),
+    cave: new THREE.MeshLambertMaterial({ color: 0x696969 }),
+    ruins: new THREE.MeshLambertMaterial({ color: 0x778899 }),
+    plains: new THREE.MeshLambertMaterial({ color: 0x90EE90 }),
+    default: new THREE.MeshLambertMaterial({ color: 0xaaaaaa })
+};
+const wallMaterial = new THREE.MeshLambertMaterial({ color: 0x888888 });
 
 // --- Player Setup ---
 function initPlayer() {
-    // Visuals
+    console.log("Initializing Player...");
+    // Visual Mesh
     playerMesh = createPlayerMesh();
-    playerMesh.position.y = PLAYER_HEIGHT / 2; // Adjust initial position based on model
+    // Start slightly above ground to avoid initial collision issues
+    playerMesh.position.set(0, PLAYER_HEIGHT, 0); // Adjust initial Y based on model pivot
     scene.add(playerMesh);
+    console.log("Player mesh added to scene.");
 
-    // 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.
+    // Physics Body
     const playerShape = new CANNON.Sphere(PLAYER_RADIUS);
     playerBody = new CANNON.Body({
-        mass: 5, // Give player some mass
+        mass: 70, // Player mass in kg (approx)
         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)
+        position: new CANNON.Vec3(0, PLAYER_HEIGHT, 0), // Match mesh Y
+        linearDamping: 0.95, // High damping for tight control
+        angularDamping: 1.0, // Prevent any spinning
+        material: new CANNON.Material("player") // Assign physics material
     });
-     playerBody.addEventListener("collide", handlePlayerCollision); // Add collision listener
+    // playerBody.fixedRotation = true; // Might not be needed with angular damping 1.0
+    playerBody.allowSleep = false; // Player should always be active
+
+    playerBody.addEventListener("collide", handlePlayerCollision);
     world.addBody(playerBody);
+    console.log("Player physics body added.");
 
     // Add to sync list
     meshesToSync.push({ mesh: playerMesh, body: playerBody });
@@ -230,291 +257,111 @@ function initPlayer() {
 
 // --- Map Generation ---
 function generateMap() {
-    const wallMaterial = new CANNON.Material("wallMaterial"); // For physics interactions
+    console.log("Generating Map...");
+    const staticMaterial = new CANNON.Material("static"); // Physics material for walls/floor
+
+    // Add physics ground plane (redundant with initPhysics but ensures material)
+    const groundShape = new CANNON.Plane();
+    const groundBody = new CANNON.Body({ mass: 0, material: staticMaterial });
+    groundBody.addShape(groundShape);
+    groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
+    world.addBody(groundBody);
+    physicsBodies.push(groundBody);
+
+    // Add visual grid helper (optional)
+    // const gridHelper = new THREE.GridHelper(ROOM_SIZE * 5, 5, 0x444444, 0x444444); // Size, Divisions
+    // scene.add(gridHelper);
+
 
     for (const coordString in gameData) {
         const [xStr, yStr] = coordString.split(',');
         const x = parseInt(xStr);
-        const y = parseInt(yStr); // Represents Z in 3D
+        const z = parseInt(yStr); // Map Y is World Z
         const data = gameData[coordString];
+        const type = data.type || 'default';
 
-        // 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 Floor Mesh
+        const floorMat = floorMaterials[type] || floorMaterials.default;
+        const floorMesh = new THREE.Mesh(floorGeometry, floorMat);
+        floorMesh.rotation.x = -Math.PI / 2;
+        floorMesh.position.set(x * ROOM_SIZE, 0, z * ROOM_SIZE);
+        floorMesh.receiveShadow = true;
+        scene.add(floorMesh);
+        // console.log(`Added floor at <span class="math-inline">\{x\},</span>{z}`);
 
         // 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 },
+        const wallDefs = [ // [direction, geometry, xOffset, zOffset]
+            ['north', wallNSGeometry, 0, -0.5],
+            ['south', wallNSGeometry, 0, 0.5],
+            ['east', wallEWGeometry, 0.5, 0],
+            ['west', wallEWGeometry, -0.5, 0],
         ];
 
-        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
+        wallDefs.forEach(([dir, geom, xOff, zOff]) => {
+            const doorFeature = `door_${dir}`;
+            const pathFeature = `path_${dir}`; // Consider paths as openings
             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
-                );
+                const wallX = x * ROOM_SIZE + xOff * ROOM_SIZE;
+                const wallZ = z * ROOM_SIZE + zOff * ROOM_SIZE;
+                const wallY = WALL_HEIGHT / 2;
+
+                // Visual Wall
+                const wallMesh = new THREE.Mesh(geom, wallMaterial);
+                wallMesh.position.set(wallX, wallY, wallZ);
                 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
-                });
+                scene.add(wallMesh);
+
+                // Physics Wall
+                const wallShape = new CANNON.Box(new CANNON.Vec3(geom.parameters.width / 2, geom.parameters.height / 2, geom.parameters.depth / 2));
+                const wallBody = new CANNON.Body({ mass: 0, shape: wallShape, position: new CANNON.Vec3(wallX, wallY, wallZ), material: staticMaterial });
                 world.addBody(wallBody);
-                physicsBodies.push(wallBody); // Keep track if needed for removal
+                physicsBodies.push(wallBody);
             }
         });
 
-        // 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);
+        // Spawn Items based on features like 'item_Key'
+        features.forEach(feature => {
+            if (feature.startsWith('item_')) {
+                const itemName = feature.substring(5).replace('_', ' '); // e.g., item_Healing_Potion -> Healing Potion
+                 if(itemsData[itemName]) {
+                    spawnItem(itemName, x, z);
+                 } else {
+                     console.warn(`Item feature found but no data for: ${itemName}`);
+                 }
+            } else if (feature.startsWith('monster_')) {
+                 const monsterType = feature.substring(8); // e.g., monster_goblin -> goblin
+                 if(monstersData[monsterType]) {
+                     spawnMonster(monsterType, x, z);
+                 } else {
+                     console.warn(`Monster feature found but no data for: ${monsterType}`);
+                 }
+            }
+            // Handle other visual features (rivers etc.) - currently no physics
+            else if (feature === 'river') {
+                 const riverMesh = createFeature(feature, x, z);
                  if (riverMesh) scene.add(riverMesh);
              }
-             // Handle other features
-         });
+        });
     }
+    console.log("Map Generation Complete.");
 }
 
-function spawnItem(itemName, gridX, gridY) {
+function spawnItem(itemName, gridX, gridZ) { /* ... Mostly same as before ... */
     const itemData = itemsData[itemName];
-    if (!itemData) {
-        console.warn(`Item data not found for ${itemName}`);
-        return;
-    }
-
-    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
+    if (!itemData) return;
+    const x = gridX * ROOM_SIZE + (Math.random() - 0.5) * (ROOM_SIZE * 0.4);
+    const z = gridZ * ROOM_SIZE + (Math.random() - 0.5) * (ROOM_SIZE * 0.4);
+    const y = PLAYER_RADIUS;
     const mesh = createSimpleItemMesh(itemData.model);
     mesh.position.set(x, y, z);
-    mesh.userData = { type: 'item', name: itemName }; // Store game data on mesh
+    mesh.userData = { type: 'item', name: itemName };
     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
+    const shape = new CANNON.Sphere(PLAYER_RADIUS); // Make pickup radius same as player
+    const body = new CANNON.Body({ mass: 0, isTrigger: true, shape: shape, position: new CANNON.Vec3(x, y, z)});
+    body.userData = { type: 'item', name: itemName, mesh: mesh }; // Link back
     world.addBody(body);
-
     gameState.items.push({ id: body.id, name: itemName, body: body, mesh: mesh });
     physicsBodies.push(body);
-}
-
-function spawnMonster(monsterType, gridX, gridY) {
-     const monsterData = monstersData[monsterType];
-     if (!monsterData) {
-         console.warn(`Monster data not found for ${monsterType}`);
-         return;
-     }
-
-     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;
-
-    const moveDirection = new CANNON.Vec3(0, 0, 0);
-    const moveSpeed = PLAYER_SPEED;
-
-    if (keysPressed['w'] || keysPressed['arrowup']) {
-        moveDirection.z = -1;
-    } else if (keysPressed['s'] || keysPressed['arrowdown']) {
-        moveDirection.z = 1;
-    }
-
-    if (keysPressed['a'] || keysPressed['arrowleft']) {
-        moveDirection.x = -1;
-    } else if (keysPressed['d'] || keysPressed['arrowright']) {
-        moveDirection.x = 1;
-    }
-
-    // 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;
-
-        // 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);
-
-    } 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 'Fire' (Space bar)
-    if (keysPressed['space']) {
-        fireProjectile();
-        keysPressed['space'] = false; // Prevent holding space for continuous fire (debounce)
-    }
-}
-
-// --- 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 };
-}
-
-// --- 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);
-        }
-    }
-
-    // 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!");
-         }
-    }
-}
-
-function handleProjectileCollision(event) {
-    const projectileBody = event.target; // The projectile body itself
-    const otherBody = event.body;
+    console.log(`Spawned item ${