Update game.js

game.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import * as CANNON from 'cannon-es';
-// import CannonDebugger from 'cannon-es-debugger'; // Keep commented unless debugging physics visually
+// import CannonDebugger from 'cannon-es-debugger'; // Keep commented for now
 
 // --- DOM Elements ---
 const sceneContainer = document.getElementById('scene-container');
@@ -10,86 +10,96 @@ const logElement = document.getElementById('log-display');
 
 // --- Config ---
 const ROOM_SIZE = 10;
-const WALL_HEIGHT = 4;
+const WALL_HEIGHT = 3; // Slightly shorter walls
 const WALL_THICKNESS = 0.5;
-const CAMERA_Y_OFFSET = 20;
-const PLAYER_SPEED = 6; // Slightly faster
+const CAMERA_Y_OFFSET = 25; // Higher camera
+const PLAYER_SPEED = 6;
 const PLAYER_RADIUS = 0.5;
 const PLAYER_HEIGHT = 1.8; // Visual height
-const PLAYER_PHYSICS_HEIGHT = PLAYER_HEIGHT; // Height of physics body (using sphere, so this isn't directly used like capsule)
-const PLAYER_JUMP_FORCE = 8; // Adjust jump strength
+const PLAYER_JUMP_IMPULSE = 7; // Impulse force for jump
 const PROJECTILE_SPEED = 15;
 const PROJECTILE_RADIUS = 0.2;
-const PICKUP_RADIUS = 1.5; // How close player needs to be to pickup items
+const PICKUP_RADIUS = 1.5;
+const PICKUP_RADIUS_SQ = PICKUP_RADIUS * PICKUP_RADIUS; // Use squared distance
 
 // --- Three.js Setup ---
 let scene, camera, renderer;
 let playerMesh;
-const meshesToSync = [];
-const projectiles = [];
+const meshesToSync = []; // Holds { mesh: THREE.Mesh, body: CANNON.Body }
+const projectiles = []; // Holds { mesh, body, lifetime }
 let axesHelper;
 
 // --- Physics Setup ---
 let world;
 let playerBody;
-const physicsBodies = []; // Keep track of ALL bodies we add
+const physicsBodies = new Map(); // Use Map<id, CANNON.Body> for easier removal
+let groundMaterial, playerMaterial, wallMaterial, monsterMaterial, itemMaterial; // Physics materials
 let cannonDebugger = null;
 
 // --- Game State ---
 let gameState = {};
 const keysPressed = {};
 let gameLoopActive = false;
-let animationFrameId = null; // To potentially cancel the loop
+let animationFrameId = null;
+let selectedTool = null; // For building tools later
 
-// --- Game Data (Simplified for Debugging, ensure 0,0 exists!) ---
+// --- Game Data (Ensure starting point 0,0 exists!) ---
 const gameData = {
+    // Structure: "x,y": { type, features?, items?, monsters?, name? }
     "0,0": { type: 'city', features: ['door_north', 'item_Key'], name: "City Square"},
-    "0,1": { type: 'forest', features: ['path_north', 'door_south', 'item_Healing_Potion'], name: "Forest Entrance" }, // Note item name change
+    "0,1": { type: 'forest', features: ['path_north', 'door_south', 'item_Healing_Potion'], name: "Forest Entrance" },
     "0,2": { type: 'forest', features: ['path_south', 'monster_goblin'], name: "Deep Forest"},
     "1,1": { type: 'forest', features: ['river', 'path_west'], name: "River Bend" },
     "-1,1": { type: 'ruins', features: ['path_east'], name: "Old Ruins"},
-    // Add more simple locations for testing movement
     "1,0": { type: 'plains', features: ['door_west'], name: "East Plains"},
     "-1,0": { type: 'plains', features: ['door_east'], name: "West Plains"},
-
 };
 
-const itemsData = {
-    "Healing Potion": { type: "consumable", description: "Restores 10 HP.", hpRestore: 10, model: 'sphere_red' },
-    "Key": { type: "quest", description: "A rusty key.", model: 'box_gold'},
-    // ...
+const itemsData = { // Add 'name' for consistency
+    "Healing Potion": { name: "Healing Potion", type: "consumable", description: "Restores 10 HP.", hpRestore: 10, model: 'sphere_red' },
+    "Key": { name: "Key", type: "quest", description: "A rusty key.", model: 'box_gold'},
 };
 
-const monstersData = {
-    "goblin": { hp: 15, attack: 4, defense: 1, speed: 2, model: 'capsule_green', xp: 5 },
-    // ...
+const monstersData = { // Add 'name'
+    "goblin": { name: "Goblin", hp: 15, attack: 4, defense: 1, speed: 2.5, model: 'capsule_green', xp: 5 },
 };
 
 // --- Materials and Geometries (Defined once) ---
-const materials = {
-    floor_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_floor: new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),
-    wall: new THREE.MeshLambertMaterial({ color: 0x888888 }), // Use Lambert for walls too (needs light)
-    // Basic materials for debug:
-    debug_player: new THREE.MeshBasicMaterial({ color: 0x0077ff, wireframe: true }),
-    debug_wall: new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }),
-    debug_item: new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }),
-    debug_monster: new THREE.MeshBasicMaterial({ color: 0xff00ff, wireframe: true }),
+// Using basic wireframe materials for initial debugging
+const debugMaterials = {
+    player: new THREE.MeshBasicMaterial({ color: 0x0077ff, wireframe: true }),
+    wall: new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }),
+    item: new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }),
+    monster: new THREE.MeshBasicMaterial({ color: 0xff00ff, wireframe: true }),
+    projectile: new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Keep projectiles solid
+    floor_default: new THREE.MeshBasicMaterial({ color: 0x555555, wireframe: true }), // Wireframe floor
 };
-const geometries = {
+// Normal Materials (Use after debugging)
+// const normalMaterials = {
+//     player: new THREE.MeshLambertMaterial({ color: 0x0077ff }),
+//     wall: new THREE.MeshLambertMaterial({ color: 0x888888 }),
+//     item_consumable: new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.6 }),
+//     item_quest: new THREE.MeshStandardMaterial({ color: 0xffd700, roughness: 0.4 }),
+//     monster_goblin: new THREE.MeshLambertMaterial({ color: 0x00ff00 }),
+//     floor_city: new THREE.MeshLambertMaterial({ color: 0xdeb887 }),
+//     floor_forest: new THREE.MeshLambertMaterial({ color: 0x228B22 }),
+//      // ... add all floor types
+//     floor_default: new THREE.MeshLambertMaterial({ color: 0xaaaaaa })
+// };
+const activeMaterials = debugMaterials; // Switch to normalMaterials when ready
+
+const geometries = { // Keep geometries simple
     floor: new THREE.PlaneGeometry(ROOM_SIZE, ROOM_SIZE),
     wallNS: new THREE.BoxGeometry(ROOM_SIZE, WALL_HEIGHT, WALL_THICKNESS),
     wallEW: new THREE.BoxGeometry(WALL_THICKNESS, WALL_HEIGHT, ROOM_SIZE),
-    // Primitives for assembly
-    box: new THREE.BoxGeometry(1, 1, 1),
-    sphere: new THREE.SphereGeometry(0.5, 16, 16),
-    cylinder: new THREE.CylinderGeometry(0.5, 0.5, 1, 16),
-    cone: new THREE.ConeGeometry(0.5, 1, 16),
-    plane: new THREE.PlaneGeometry(1, 1),
+    playerCylinder: new THREE.CylinderGeometry(PLAYER_RADIUS, PLAYER_RADIUS, PLAYER_HEIGHT - (PLAYER_RADIUS * 2), 8),
+    playerSphere: new THREE.SphereGeometry(PLAYER_RADIUS, 8, 8),
+    playerNose: new THREE.ConeGeometry(PLAYER_RADIUS * 0.3, PLAYER_RADIUS * 0.5, 4),
+    monsterCapsuleBody: new THREE.CylinderGeometry(0.4, 0.4, 1.0, 8),
+    monsterCapsuleHead: new THREE.SphereGeometry(0.4, 8, 8),
+    itemSphere: new THREE.SphereGeometry(0.3, 8, 8),
+    itemBox: new THREE.BoxGeometry(0.4, 0.4, 0.4),
+    projectile: new THREE.SphereGeometry(PROJECTILE_RADIUS, 6, 6),
 };
 
 
@@ -97,112 +107,100 @@ const geometries = {
 
 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 }, // Logical position, might not be needed now
-        monsters: [], // { id, type, hp, body, mesh }
-        items: [], // { id, name, body, mesh } - body might be null if not physics based
-    };
+    // Reset state and clear arrays/maps
+    gameState = { inventory: [], stats: { hp: 30, maxHp: 30, strength: 7, wisdom: 5, courage: 6 }, monsters: [], items: [] };
     keysPressed = {};
     meshesToSync.length = 0;
     projectiles.length = 0;
-    physicsBodies.length = 0;
-    // Clear previous scene children if restarting
+    physicsBodies.clear(); // Clear the map
+
+    // Clear previous scene if restarting
     if (scene) {
-        while (scene.children.length > 0) {
-            scene.remove(scene.children[0]);
-        }
+        while (scene.children.length > 0) scene.remove(scene.children[0]);
+    } else {
+        scene = new THREE.Scene(); // Create scene only if it doesn't exist
     }
-    // Clear physics world bodies if restarting
-     if (world) {
-         while (world.bodies.length > 0) {
-             world.removeBody(world.bodies[0]);
-         }
-     }
+    scene.background = new THREE.Color(0x1a1a1a);
 
+    // Clear previous renderer if restarting
+    if (renderer) {
+        renderer.dispose();
+        if (renderer.domElement.parentNode) {
+            renderer.domElement.parentNode.removeChild(renderer.domElement);
+        }
+    }
 
-    initThreeJS();
-    initPhysics();
-    initPlayer(); // Player depends on physics world existing
-    generateMap(); // Map depends on physics world existing
+    initThreeJS(); // Setup camera, renderer, lights
+    initPhysics(); // Setup world, materials
+    initPlayer();  // Setup player mesh + body
+    generateMap(); // Setup static map meshes + bodies
     setupInputListeners();
     updateUI();
-    addLog("Welcome! Move: QWEASDZXC, Jump: Shift/X, Attack: Space, Pickup: F", "info");
-
+    addLog("Welcome! Move: QWEASDZXC, Jump: X, Attack: Space, Pickup: F", "info");
     console.log("--- Initialization Complete ---");
-    if (animationFrameId) cancelAnimationFrame(animationFrameId); // Stop previous loop if restarting
+
+    if (animationFrameId) cancelAnimationFrame(animationFrameId);
     gameLoopActive = true;
     animate();
 }
 
 function initThreeJS() {
     console.log("Initializing Three.js...");
-    scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x1a1a1a); // Match body background slightly better
-
     const aspect = sceneContainer.clientWidth / sceneContainer.clientHeight;
     camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 1000);
-    camera.position.set(0, CAMERA_Y_OFFSET, 5); // Start overhead, slightly back
-    camera.lookAt(0, 0, 0); // Look at origin initially
+    // Set camera directly overhead looking down
+    camera.position.set(0, CAMERA_Y_OFFSET, 0);
+    camera.lookAt(0, 0, 0); // Look straight down at origin initially
+    camera.rotation.x = -Math.PI / 2; // Explicitly set rotation if lookAt isn't enough
 
     renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight);
     renderer.shadowMap.enabled = true;
-    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
     sceneContainer.appendChild(renderer.domElement);
 
     // Lighting
-    scene.add(new THREE.AmbientLight(0xffffff, 0.6)); // More ambient light
+    scene.add(new THREE.AmbientLight(0xffffff, 0.7)); // Brighter ambient for debug
     const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
-    dirLight.position.set(20, 30, 15); // Adjust light direction
+    dirLight.position.set(10, 30, 20); // Angled light
     dirLight.castShadow = true;
-    dirLight.shadow.mapSize.width = 2048; // Increase shadow map resolution
-    dirLight.shadow.mapSize.height = 2048;
-    dirLight.shadow.camera.near = 1;
-    dirLight.shadow.camera.far = 60; // Adjust shadow camera range
-    const shadowCamSize = 25;
-    dirLight.shadow.camera.left = -shadowCamSize;
-    dirLight.shadow.camera.right = shadowCamSize;
-    dirLight.shadow.camera.top = shadowCamSize;
-    dirLight.shadow.camera.bottom = -shadowCamSize;
+    dirLight.shadow.mapSize.width = 1024;
+    dirLight.shadow.mapSize.height = 1024;
     scene.add(dirLight);
-    // scene.add(new THREE.CameraHelper(dirLight.shadow.camera)); // Shadow debug
 
     // Axes Helper
     axesHelper = new THREE.AxesHelper(ROOM_SIZE * 0.5);
-    axesHelper.position.set(0, 0.01, 0); // Place it clearly
+    axesHelper.position.set(0, 0.01, 0);
     scene.add(axesHelper);
-    console.log("Three.js Initialized.");
+    console.log("Three.js Initialized. Camera at:", camera.position);
 
     window.addEventListener('resize', onWindowResize, false);
 }
 
 function initPhysics() {
     console.log("Initializing Cannon-es...");
-    world = new CANNON.World({ gravity: new CANNON.Vec3(0, -15, 0) }); // Slightly stronger gravity
+    world = new CANNON.World({ gravity: new CANNON.Vec3(0, -15, 0) });
     world.broadphase = new CANNON.SAPBroadphase(world);
     world.allowSleep = true;
 
     // Define materials
-    const groundMaterial = new CANNON.Material("ground");
-    const playerMaterial = new CANNON.Material("player");
-    const wallMaterial = new CANNON.Material("wall");
-    const monsterMaterial = new CANNON.Material("monster");
-    const itemMaterial = new CANNON.Material("item"); // For trigger bodies if used
+    groundMaterial = new CANNON.Material("ground");
+    playerMaterial = new CANNON.Material("player");
+    wallMaterial = new CANNON.Material("wall");
+    monsterMaterial = new CANNON.Material("monster");
+    itemMaterial = new CANNON.Material("item"); // Not used for physics bodies anymore
 
-    // Ground plane
+    // Ground physics body
     const groundShape = new CANNON.Plane();
     const groundBody = new CANNON.Body({ mass: 0, material: groundMaterial });
     groundBody.addShape(groundShape);
     groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
     world.addBody(groundBody);
-    physicsBodies.push(groundBody);
+    physicsBodies.set(groundBody.id, groundBody); // Track it
 
-    // Contact Materials (basic examples)
-    const playerGround = new CANNON.ContactMaterial(playerMaterial, groundMaterial, { friction: 0.3, restitution: 0.1 });
-    const playerWall = new CANNON.ContactMaterial(playerMaterial, wallMaterial, { friction: 0.0, restitution: 0.1 }); // Low friction vs walls
+    // Contact Materials
+    const playerGround = new CANNON.ContactMaterial(playerMaterial, groundMaterial, { friction: 0.1, restitution: 0.1 }); // Low friction
+    const playerWall = new CANNON.ContactMaterial(playerMaterial, wallMaterial, { friction: 0.01, restitution: 0.1 }); // Very low friction vs walls
     const monsterGround = new CANNON.ContactMaterial(monsterMaterial, groundMaterial, { friction: 0.4, restitution: 0.1 });
     const monsterWall = new CANNON.ContactMaterial(monsterMaterial, wallMaterial, { friction: 0.1, restitution: 0.2 });
 
@@ -210,100 +208,87 @@ function initPhysics() {
     world.addContactMaterial(playerWall);
     world.addContactMaterial(monsterGround);
     world.addContactMaterial(monsterWall);
-
     console.log("Physics World Initialized.");
 
     // Optional: Physics Debugger Init
-    // try {
-    //     cannonDebugger = new CannonDebugger(scene, world, { color: 0x00ff00, scale: 1.0 });
-    //     console.log("Cannon-es Debugger Initialized.");
-    // } catch (e) { console.error("Failed to initialize CannonDebugger.", e); }
+    // try { cannonDebugger = new CannonDebugger(scene, world, { color: 0x00ff00 }); console.log("Debugger Init."); }
+    // catch (e) { console.error("Failed CannonDebugger.", e); }
 }
 
-// --- Primitive Assembly Functions (Keep as before) ---
-function createPlayerMesh() { /* ... same ... */
+// --- Primitive Assembly Functions ---
+function createPlayerMesh() {
     const group = new THREE.Group();
-    // Use DEBUG material temporarily
-    const bodyMat = materials.debug_player; //new THREE.MeshLambertMaterial({ color: 0x0077ff });
-    const bodyGeom = new THREE.CylinderGeometry(PLAYER_RADIUS, PLAYER_RADIUS, PLAYER_HEIGHT - (PLAYER_RADIUS * 2), 8); // Lower poly
-    const body = new THREE.Mesh(bodyGeom, bodyMat);
+    const bodyMat = activeMaterials.player; // Use active material set
+    const body = new THREE.Mesh(geometries.playerCylinder, bodyMat);
     body.position.y = PLAYER_RADIUS; body.castShadow = true;
-    const headGeom = new THREE.SphereGeometry(PLAYER_RADIUS, 8, 8); // Lower poly
-    const head = new THREE.Mesh(headGeom, bodyMat);
+    const head = new THREE.Mesh(geometries.playerSphere, bodyMat);
     head.position.y = PLAYER_HEIGHT - PLAYER_RADIUS; head.castShadow = true;
     group.add(body); group.add(head);
-    const noseGeom = new THREE.ConeGeometry(PLAYER_RADIUS * 0.3, PLAYER_RADIUS * 0.5, 4); // Lower poly
-    const noseMat = new THREE.MeshBasicMaterial({ color: 0xffff00 });
-    const nose = new THREE.Mesh(noseGeom, noseMat);
-    // Position nose correctly relative to player center (Y=PLAYER_HEIGHT/2)
-    nose.position.set(0, (PLAYER_HEIGHT / 2) * 0.9, -PLAYER_RADIUS); // Position Z forward, adjust Y
-    nose.rotation.x = Math.PI / 2 + Math.PI; // Point along -Z
+    const nose = new THREE.Mesh(geometries.playerNose, new THREE.MeshBasicMaterial({ color: 0xffff00 })); // Nose always bright yellow
+    nose.position.set(0, PLAYER_HEIGHT * 0.6, PLAYER_RADIUS); // Point forward +Z
+    // No rotation needed if pointing +Z
     group.add(nose);
-    group.position.y = PLAYER_HEIGHT / 2; // Set pivot to bottom center
+    // Important: Set group's origin to the intended base/center of the physics body
+    group.position.set(0, 0, 0); // Position will be controlled by sync
     return group;
-}
-function createSimpleMonsterMesh(modelType = 'capsule_green') { /* ... Mostly same, maybe use debug material ... */
+ }
+function createSimpleMonsterMesh(modelType = 'capsule_green') {
     const group = new THREE.Group();
-    let color = 0xff00ff; // Magenta debug default
-    let mat = materials.debug_monster; // Use debug material
+    const mat = activeMaterials.monster; // Use active debug/normal material
     if (modelType === 'capsule_green') {
-        color = 0x00ff00;
-        // mat = new THREE.MeshLambertMaterial({ color: color }); // Keep debug for now
-        const bodyGeom = new THREE.CylinderGeometry(0.4, 0.4, 1.0, 8); // Lower poly
-        const headGeom = new THREE.SphereGeometry(0.4, 8, 8);
-        const body = new THREE.Mesh(bodyGeom, mat);
-        const head = new THREE.Mesh(headGeom, mat);
+        const body = new THREE.Mesh(geometries.monsterCapsuleBody, mat);
+        const head = new THREE.Mesh(geometries.monsterCapsuleHead, mat);
         body.position.y = 0.5; head.position.y = 1.0 + 0.4;
         group.add(body); group.add(head);
-    } else { let geom = new THREE.BoxGeometry(0.8, 1.2, 0.8); const mesh = new THREE.Mesh(geom, mat); mesh.position.y = 0.6; group.add(mesh); }
+    } else { /* Add other monster types if needed */ }
     group.traverse(child => { if (child.isMesh) child.castShadow = true; });
-    group.position.y = 1.2 / 2; // Center pivot
+    group.position.set(0, 0, 0); // Position set by sync
     return group;
 }
-function createSimpleItemMesh(modelType = 'sphere_red') { /* ... Mostly same, maybe use debug material ... */
-     let geom, mat; let color = 0x00ff00; // Green debug default
-     mat = materials.debug_item; // Use debug material
-     if(modelType === 'sphere_red') { color = 0xff0000; geom = new THREE.SphereGeometry(0.3, 8, 8); }
-     else if (modelType === 'box_gold') { color = 0xffd700; geom = new THREE.BoxGeometry(0.4, 0.4, 0.4); }
-     else { geom = new THREE.SphereGeometry(0.3, 8, 8); }
-    //  mat = new THREE.MeshStandardMaterial({ color: color, metalness: 0.3, roughness: 0.6 }); // Keep debug
+function createSimpleItemMesh(modelType = 'sphere_red') {
+     let geom;
+     const mat = activeMaterials.item; // Use active debug/normal material
+     if(modelType === 'sphere_red') geom = geometries.itemSphere;
+     else if (modelType === 'box_gold') geom = geometries.itemBox;
+     else geom = geometries.itemSphere; // Default
      const mesh = new THREE.Mesh(geom, mat);
-     mesh.position.y = PLAYER_RADIUS; // Place roughly at pickup height
+     mesh.position.y = PLAYER_RADIUS; // Default height
      mesh.castShadow = true;
      return mesh;
 }
-function createProjectileMesh() { /* ... same ... */
-    const geom = new THREE.SphereGeometry(PROJECTILE_RADIUS, 6, 6); // Lower poly
-    const mat = new THREE.MeshBasicMaterial({ color: 0xffff00 });
-    const mesh = new THREE.Mesh(geom, mat);
+function createProjectileMesh() {
+    const mat = activeMaterials.projectile; // Use active material
+    const mesh = new THREE.Mesh(geometries.projectile, mat);
     return mesh;
 }
+
 // --- Player Setup ---
 function initPlayer() {
     console.log("Initializing Player...");
     // Visual Mesh
     playerMesh = createPlayerMesh();
-    // Start position will be set by physics body sync
+    // Set initial position high to avoid spawning inside floor
+    playerMesh.position.set(0, PLAYER_HEIGHT + 1, 0);
     scene.add(playerMesh);
-    console.log("Player mesh added to scene.");
+    console.log("Player mesh added to scene at initial pos:", playerMesh.position);
 
     // Physics Body - Start at center of 0,0 cell, slightly above ground
-    const startX = 0 * ROOM_SIZE;
-    const startZ = 0 * ROOM_SIZE;
-    const startY = PLAYER_HEIGHT; // Start higher to ensure it settles onto ground
+    const startX = 0;
+    const startZ = 0;
+    const startY = PLAYER_HEIGHT * 1.5; // Start higher
     const playerShape = new CANNON.Sphere(PLAYER_RADIUS);
     playerBody = new CANNON.Body({
         mass: 70,
         shape: playerShape,
         position: new CANNON.Vec3(startX, startY, startZ),
         linearDamping: 0.95,
-        angularDamping: 1.0,
-        material: world.materials.find(m => m.name === "player") || new CANNON.Material("player") // Get or create material
+        angularDamping: 1.0, // Completely prevent angular rotation from physics
+        material: playerMaterial // Use defined material
     });
     playerBody.allowSleep = false;
     playerBody.addEventListener("collide", handlePlayerCollision);
     world.addBody(playerBody);
-    physicsBodies.push(playerBody); // Track body
+    physicsBodies.set(playerBody.id, playerBody); // Track body using Map
     console.log(`Player physics body added at ${startX}, ${startY}, ${startZ}`);
 
     // Add to sync list
@@ -314,84 +299,79 @@ function initPlayer() {
 // --- Map Generation ---
 function generateMap() {
     console.log("Generating Map...");
-    const wallPhysicsMaterial = world.materials.find(m => m.name === "wall") || new CANNON.Material("wall"); // Get or create material
-    const groundPhysicsMaterial = world.materials.find(m => m.name === "ground"); // Should exist from initPhysics
-
-    // Simplified: Only render a few cells around 0,0 for testing
-    const renderRadius = 1; // Render 0,0 and its immediate neighbours
-    for (let x = -renderRadius; x <= renderRadius; x++) {
-        for (let z = -renderRadius; z <= renderRadius; z++) {
-            const coordString = `${x},${z}`;
-            const data = gameData[coordString];
-
-            if (data) { // Only generate if data exists for this coord
-                console.log(`Generating cell: ${coordString}`);
-                const type = data.type || 'default';
-
-                // Create Floor Mesh
-                const floorMat = floorMaterials[type] || floorMaterials.default_floor;
-                const floorMesh = new THREE.Mesh(geometries.floor, floorMat);
-                floorMesh.rotation.x = -Math.PI / 2;
-                floorMesh.position.set(x * ROOM_SIZE, 0, z * ROOM_SIZE);
-                floorMesh.receiveShadow = true;
-                scene.add(floorMesh);
-
-                // Create Walls (Visual + Physics)
-                const features = data.features || [];
-                const wallDefs = [
-                    ['north', geometries.wallNS, 0, -0.5],
-                    ['south', geometries.wallNS, 0, 0.5],
-                    ['east', geometries.wallEW, 0.5, 0],
-                    ['west', geometries.wallEW, -0.5, 0],
-                ];
-
-                wallDefs.forEach(([dir, geom, xOff, zOff]) => {
-                    const doorFeature = `door_${dir}`;
-                    const pathFeature = `path_${dir}`;
-                    if (!features.includes(doorFeature) && !features.includes(pathFeature)) {
-                        const wallX = x * ROOM_SIZE + xOff * ROOM_SIZE;
-                        const wallZ = z * ROOM_SIZE + zOff * ROOM_SIZE;
-                        const wallY = WALL_HEIGHT / 2;
-
-                        // DEBUG Visual Wall
-                        const wallMesh = new THREE.Mesh(geom, materials.debug_wall); // Use debug material
-                        wallMesh.position.set(wallX, wallY, wallZ);
-                        wallMesh.castShadow = true;
-                        wallMesh.receiveShadow = true;
-                        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: wallPhysicsMaterial });
-                        world.addBody(wallBody);
-                        physicsBodies.push(wallBody);
-                    }
-                });
-
-                // Spawn Items & Monsters based on features
-                features.forEach(feature => {
-                     if (feature.startsWith('item_')) {
-                         const itemName = feature.substring(5).replace(/_/g, ' '); // Handle underscores
-                         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);
-                         if (monstersData[monsterType]) {
-                             spawnMonster(monsterType, x, z);
-                         } else { console.warn(`Monster feature found but no data for: ${monsterType}`); }
-                     }
-                     // Handle other visual features if needed
-                 });
-
-            } else {
-                 console.log(`No data for cell: ${coordString}, skipping.`);
-            }
-        }
+    const wallPhysicsMaterial = world.materials.find(m => m.name === "wall");
+    const groundPhysicsMaterial = world.materials.find(m => m.name === "ground");
+
+    // DEBUG: Only generate the starting cell "0,0"
+    const startCoord = "0,0";
+    const data = gameData[startCoord];
+    if (!data) {
+        console.error("CRITICAL: No gameData found for starting cell '0,0'!");
+        return;
     }
-    console.log("Map Generation Complete.");
+
+    const x = 0;
+    const z = 0;
+    const type = data.type || 'default';
+    console.log(`Generating START cell: ${startCoord} (Type: ${type})`);
+
+    // Create Floor Mesh
+    const floorMat = activeMaterials[`floor_${type}`] || activeMaterials.floor_default; // Use debug mats
+    const floorMesh = new THREE.Mesh(geometries.floor, floorMat);
+    floorMesh.rotation.x = -Math.PI / 2;
+    floorMesh.position.set(x * ROOM_SIZE, 0, z * ROOM_SIZE);
+    floorMesh.receiveShadow = true; // Floors should receive shadows
+    scene.add(floorMesh);
+    console.log(`Added floor at ${x},${z}`);
+
+    // Create Walls (Visual + Physics) for the single cell
+    const features = data.features || [];
+    const wallDefs = [
+        ['north', geometries.wallNS, 0, -0.5], ['south', geometries.wallNS, 0, 0.5],
+        ['east', geometries.wallEW, 0.5, 0], ['west', geometries.wallEW, -0.5, 0],
+    ];
+
+    wallDefs.forEach(([dir, geom, xOff, zOff]) => {
+        const doorFeature = `door_${dir}`; const pathFeature = `path_${dir}`;
+        if (!features.includes(doorFeature) && !features.includes(pathFeature)) {
+            const wallX = x * ROOM_SIZE + xOff * ROOM_SIZE;
+            const wallZ = z * ROOM_SIZE + zOff * ROOM_SIZE;
+            const wallY = WALL_HEIGHT / 2;
+
+            // Visual Wall (DEBUG)
+            const wallMesh = new THREE.Mesh(geom, activeMaterials.wall); // Use debug wall mat
+            wallMesh.position.set(wallX, wallY, wallZ);
+            wallMesh.castShadow = true; wallMesh.receiveShadow = true;
+            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: wallPhysicsMaterial });
+            world.addBody(wallBody);
+            physicsBodies.set(wallBody.id, wallBody); // Track it
+            // console.log(`Added ${dir} wall for cell ${x},${z}`);
+        } else {
+             console.log(`Skipping ${dir} wall for cell ${x},${z} due to feature.`);
+        }
+    });
+
+    // Spawn Items & Monsters based on features for the single cell
+    features.forEach(feature => {
+         if (feature.startsWith('item_')) {
+             const itemName = feature.substring(5).replace(/_/g, ' ');
+             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);
+             if (monstersData[monsterType]) spawnMonster(monsterType, x, z);
+             else console.warn(`Monster feature found but no data for: ${monsterType}`);
+         }
+     });
+
+    console.log("Map Generation Complete (Debug Mode - Single Cell).");
 }
 
+// --- Item/Monster Spawning (Simplified for Pickup 'F') ---
 function spawnItem(itemName, gridX, gridZ) {
     const itemData = itemsData[itemName];
     if (!itemData) return;
@@ -400,21 +380,21 @@ function spawnItem(itemName, gridX, gridZ) {
     const y = PLAYER_RADIUS; // Item height
 
     // Use DEBUG material
-    const mesh = new THREE.Mesh(geometries.sphere, materials.debug_item); // Simplified mesh
-    mesh.scale.set(0.6, 0.6, 0.6); // Make items smaller
+    const mesh = createSimpleItemMesh(itemData.model); // Use debug mat via create func
+    if (!mesh) return; // Safety check
     mesh.position.set(x, y, z);
-    mesh.userData = { type: 'item', name: itemName };
+    mesh.userData = { type: 'item', name: itemName }; // Store data on mesh
     mesh.castShadow = true;
     scene.add(mesh);
 
-    // Store item in game state WITHOUT physics body initially for F pickup
+    // Store item in game state WITHOUT physics body
     gameState.items.push({
-        id: THREE.MathUtils.generateUUID(), // Simple unique ID
+        id: mesh.uuid, // Use mesh UUID as item ID
         name: itemName,
         mesh: mesh,
         position: mesh.position // Store position for proximity check
     });
-    console.log(`Spawned item ${itemName} at ${gridX},${gridZ} (visual only)`);
+    console.log(`Spawned item ${itemName} at ${x.toFixed(1)}, ${y.toFixed(1)}, ${z.toFixed(1)} (visual only)`);
 }
 
 function spawnMonster(monsterType, gridX, gridZ) {
@@ -425,119 +405,110 @@ function spawnMonster(monsterType, gridX, gridZ) {
     const y = PLAYER_HEIGHT; // Start higher
 
     // Use DEBUG material
-    const mesh = createSimpleMonsterMesh(monsterData.model); // Assuming this uses debug mat now
-    mesh.position.set(x, y, z); // Set initial mesh pos
+    const mesh = createSimpleMonsterMesh(monsterData.model); // Uses debug mat via create func
+    if (!mesh) return; // Safety check
+    mesh.position.set(x, y, z); // Initial visual position
     mesh.userData = { type: 'monster', monsterType: monsterType };
     scene.add(mesh);
 
     // Physics Body
-    const shape = new CANNON.Sphere(PLAYER_RADIUS * 0.8); // Simple sphere collider
+    const shape = new CANNON.Sphere(PLAYER_RADIUS * 0.8);
     const body = new CANNON.Body({
-        mass: 10,
-        shape: shape,
-        position: new CANNON.Vec3(x, y, z),
-        linearDamping: 0.8,
-        angularDamping: 0.9,
+        mass: 10, shape: shape, position: new CANNON.Vec3(x, y, z),
+        linearDamping: 0.8, angularDamping: 0.9,
         material: world.materials.find(m => m.name === "monster") || new CANNON.Material("monster")
     });
     body.allowSleep = true;
+    // Store reference to mesh and HP on body's userData
     body.userData = { type: 'monster', monsterType: monsterType, mesh: mesh, hp: monsterData.hp };
     world.addBody(body);
 
     gameState.monsters.push({ id: body.id, type: monsterType, hp: monsterData.hp, body: body, mesh: mesh });
     meshesToSync.push({ mesh: mesh, body: body });
-    physicsBodies.push(body);
-    console.log(`Spawned monster ${monsterType} at ${gridX},${gridZ}`);
+    physicsBodies.set(body.id, body); // Use map for tracking
+    console.log(`Spawned monster ${monsterType} at ${x.toFixed(1)}, ${y.toFixed(1)}, ${z.toFixed(1)}`);
 }
 
 
-// --- Input Handling (QWEASDZXC + Jump + F + Space) ---
-function setupInputListeners() {
+// --- Input Handling (QWEASDZXC + Jump 'X' + F + Space) ---
+function setupInputListeners() { /* ... same ... */
     console.log("Setting up input listeners.");
-    window.addEventListener('keydown', (event) => {
-        keysPressed[event.key.toLowerCase()] = true;
-        keysPressed[event.code] = true; // Keep Space, Shift etc.
-        // Prevent default browser scroll on space/arrows
-        if (['space', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'].includes(event.code.toLowerCase())) {
-             event.preventDefault();
-         }
-    });
-    window.addEventListener('keyup', (event) => {
-        keysPressed[event.key.toLowerCase()] = false;
-        keysPressed[event.code] = false;
-    });
+    window.addEventListener('keydown', (event) => { keysPressed[event.key.toLowerCase()] = true; keysPressed[event.code] = true; if (['space', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright', 'keyx', 'keyf'].includes(event.code.toLowerCase())) { event.preventDefault(); }});
+    window.addEventListener('keyup', (event) => { keysPressed[event.key.toLowerCase()] = false; keysPressed[event.code] = false; });
 }
 
 function handleInput(deltaTime) {
     if (!playerBody) return;
 
     const moveSpeed = PLAYER_SPEED;
-    const diagonalSpeed = moveSpeed / Math.sqrt(2); // Adjust speed for diagonal
-
-    let moveX = 0;
-    let moveZ = 0;
-
-    // Forward/Backward (W/S)
-    if (keysPressed['w']) moveZ -= 1;
-    if (keysPressed['s']) moveZ += 1;
-
-    // Strafe (A/D)
-    if (keysPressed['a']) moveX -= 1;
-    if (keysPressed['d']) moveX += 1;
-
-    // Diagonal Forward (Q/E)
-    if (keysPressed['q']) { moveZ -= 1; moveX -= 1; }
-    if (keysPressed['e']) { moveZ -= 1; moveX += 1; }
-
-    // Diagonal Backward (Z/C)
-    if (keysPressed['z']) { moveZ += 1; moveX -= 1; }
-    if (keysPressed['c']) { moveZ += 1; moveX += 1; }
+    // Correct forward/backward/strafe directions relative to world axes
+    // Assume +Z is SOUTH, -Z is NORTH
+    // Assume +X is EAST, -X is WEST
+    let forceX = 0;
+    let forceZ = 0;
+
+    // Forward (-Z) / Backward (+Z)
+    if (keysPressed['w']) forceZ -= 1; // W = North = -Z
+    if (keysPressed['s']) forceZ += 1; // S = South = +Z
+
+    // Strafe Left (-X) / Right (+X)
+    if (keysPressed['a']) forceX -= 1; // A = West = -X
+    if (keysPressed['d']) forceX += 1; // D = East = +X
+
+    // Diagonals - combine basic directions
+    if (keysPressed['q']) { forceZ -= 0.707; forceX -= 0.707; } // Q = NW
+    if (keysPressed['e']) { forceZ -= 0.707; forceX += 0.707; } // E = NE
+    if (keysPressed['z']) { forceZ += 0.707; forceX -= 0.707; } // Z = SW
+    if (keysPressed['c']) { forceZ += 0.707; forceX += 0.707; } // C = SE
 
     // --- Calculate final velocity vector ---
-    const velocity = new CANNON.Vec3(0, playerBody.velocity.y, 0); // Preserve Y velocity for jump/gravity
-
-    // Normalize if moving
-    if (moveX !== 0 || moveZ !== 0) {
-        const moveVec = new THREE.Vector2(moveX, moveZ);
-        moveVec.normalize(); // Ensure consistent speed regardless of direction count
+    // We set velocity directly for more responsive control than forces
+    const targetVelocity = new CANNON.Vec3(0, playerBody.velocity.y, 0); // Preserve Y velocity
 
-        velocity.x = moveVec.x * moveSpeed;
-        velocity.z = moveVec.y * moveSpeed;
+    if (forceX !== 0 || forceZ !== 0) {
+        const moveVec = new THREE.Vector2(forceX, forceZ);
+        if (moveVec.lengthSq() > 1.0) { // Normalize only if combined magnitude > 1
+            moveVec.normalize();
+        }
+        targetVelocity.x = moveVec.x * moveSpeed;
+        targetVelocity.z = moveVec.y * moveSpeed;
 
-        // Make player mesh face movement direction
-        // NOTE: This rotation assumes +Z is backward, -Z is forward
-        const angle = Math.atan2(velocity.x, velocity.z); // atan2(x, z) gives angle from positive Z axis
+        // --- Rotation ---
+        // Rotate player mesh to face movement direction
+        // Calculate angle from positive Z axis (adjust if your model faces differently)
+        const angle = Math.atan2(targetVelocity.x, targetVelocity.z);
         const targetQuaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), angle);
-        // Smooth rotation (Slerp)
-        playerMesh.quaternion.slerp(targetQuaternion, 0.15); // Adjust 0.15 for faster/slower turning
+        // Slerp for smooth rotation
+        playerMesh.quaternion.slerp(targetQuaternion, 0.15); // Adjust 0.15 for responsiveness
 
     } else {
-        // Apply damping implicitly via Cannon setting, or force stop:
-        velocity.x = 0;
-        velocity.z = 0;
+        // No movement keys pressed - rely on linear damping to stop
+        // Or force stop X/Z velocity:
+         targetVelocity.x = 0;
+         targetVelocity.z = 0;
     }
 
-    playerBody.velocity.x = velocity.x;
-    playerBody.velocity.z = velocity.z;
-    // Y velocity is handled by gravity and jump impulse
-
-
-    // --- Jump (Shift or X) ---
-    // !! Basic jump - no ground check yet !!
-    if (keysPressed['shift'] || keysPressed['x']) {
-        // Simple check: only jump if Y velocity is near zero (crude ground check)
-        if (Math.abs(playerBody.velocity.y) < 0.1) {
-             console.log("Attempting Jump!");
-             playerBody.applyImpulse(new CANNON.Vec3(0, PLAYER_JUMP_FORCE, 0), playerBody.position);
+    playerBody.velocity.x = targetVelocity.x;
+    playerBody.velocity.z = targetVelocity.z;
+    // Y velocity is controlled by gravity + jump impulse
+
+    // --- Jump (X) ---
+    if (keysPressed['x'] || keysPressed['keyx']) { // Check code too
+        // !! Basic jump - Needs ground check via raycast or contact materials !!
+        // Add a simple cooldown or only allow if Y velocity is low
+         if (Math.abs(playerBody.velocity.y) < 0.5) { // Crude check if mostly grounded
+             console.log("JUMP!");
+             addLog("Jump!", "info");
+             // Apply impulse upwards
+             playerBody.applyImpulse(new CANNON.Vec3(0, PLAYER_JUMP_IMPULSE, 0), playerBody.position);
         }
-        keysPressed['shift'] = false; // Consume jump input
-        keysPressed['x'] = false;
+        keysPressed['x'] = false; keysPressed['keyx'] = false; // Consume jump input
     }
 
     // --- Pickup (F) ---
-    if (keysPressed['f']) {
+    if (keysPressed['f'] || keysPressed['keyf']) {
         pickupNearbyItem();
-        keysPressed['f'] = false; // Consume pickup input
+        keysPressed['f'] = false; keysPressed['keyf'] = false; // Consume pickup input
     }
 
     // --- Fire (Space) ---
@@ -552,299 +523,295 @@ function pickupNearbyItem() {
     if (!playerBody) return;
     const playerPos = playerBody.position;
     let pickedUp = false;
+    let closestItemIndex = -1;
+    let minDistanceSq = PICKUP_RADIUS_SQ; // Use squared distance
 
-    for (let i = gameState.items.length - 1; i >= 0; i--) {
+    // Find the closest item within radius
+    for (let i = 0; i < gameState.items.length; i++) {
         const item = gameState.items[i];
-        const itemPos = item.position; // Using mesh position as items have no physics body now
-        const distance = playerPos.distanceTo(itemPos);
-
-        if (distance < PICKUP_RADIUS) {
-            if (!gameState.inventory.includes(item.name)) {
-                gameState.inventory.push(item.name);
-                addLog(`Picked up ${item.name}!`, "pickup");
-                updateInventoryDisplay();
-
-                // Remove item visually
-                scene.remove(item.mesh);
-                // Remove from game state list
-                gameState.items.splice(i, 1);
-                pickedUp = true;
-                break; // Pick up only one item per key press
-            }
+        const distanceSq = playerPos.distanceSquared(item.position);
+        if (distanceSq < minDistanceSq) {
+            minDistanceSq = distanceSq;
+            closestItemIndex = i;
         }
     }
+
+    // Pick up the closest item if found
+    if (closestItemIndex > -1) {
+        const item = gameState.items[closestItemIndex];
+        if (!gameState.inventory.includes(item.name)) {
+            gameState.inventory.push(item.name);
+            addLog(`Picked up ${item.name}!`, "pickup");
+            updateInventoryDisplay();
+
+            // Remove item visually and from state
+            if(item.mesh.parent) scene.remove(item.mesh);
+            gameState.items.splice(closestItemIndex, 1);
+            pickedUp = true;
+        } else {
+             addLog(`Already have ${item.name}.`, "info");
+        }
+    }
+
     if (!pickedUp) {
         addLog("Nothing nearby to pick up.", "info");
     }
 }
 
 
-// --- Combat (Keep Projectile Logic) ---
-function fireProjectile() { /* ... same as before ... */
+// --- Combat (Projectile logic remains similar) ---
+function fireProjectile() {
     if (!playerBody || !playerMesh) return;
     addLog("Pew!", "combat");
     const projectileMesh = createProjectileMesh();
     const projectileShape = new CANNON.Sphere(PROJECTILE_RADIUS);
     const projectileBody = new CANNON.Body({ mass: 0.1, shape: projectileShape, linearDamping: 0.01, angularDamping: 0.01 });
     projectileBody.addEventListener("collide", handleProjectileCollision);
+
+    // Calculate start position and velocity based on player's *current* rotation
     const offsetDistance = PLAYER_RADIUS + PROJECTILE_RADIUS + 0.1;
-    const direction = new THREE.Vector3(0, 0, -1); // Base direction -Z is forward
-    direction.applyQuaternion(playerMesh.quaternion);
+    const direction = new THREE.Vector3(0, 0, 1); // Base direction +Z
+    direction.applyQuaternion(playerMesh.quaternion); // Rotate based on player mesh
+
     const startPos = new CANNON.Vec3().copy(playerBody.position).vadd(
-        new CANNON.Vec3(direction.x, 0, direction.z).scale(offsetDistance)
+        new CANNON.Vec3(direction.x, 0, direction.z).scale(offsetDistance) // Offset horizontally
     );
-    startPos.y = playerBody.position.y + PLAYER_HEIGHT * 0.3; // Fire from mid-height approx
+    // Adjust start Y based on player body center + visual model height
+    startPos.y = playerBody.position.y; // Fire from player center height
+
     projectileBody.position.copy(startPos);
     projectileMesh.position.copy(startPos);
+
+    // Velocity in player facing direction
     projectileBody.velocity = new CANNON.Vec3(direction.x, 0, direction.z).scale(PROJECTILE_SPEED);
+
     scene.add(projectileMesh);
     world.addBody(projectileBody);
-    const projectileData = { mesh: projectileMesh, body: projectileBody, lifetime: 3.0 };
+    const projectileData = { mesh: projectileMesh, body: projectileBody, lifetime: 2.0 }; // Shorter lifetime
     meshesToSync.push(projectileData);
     projectiles.push(projectileData);
-    physicsBodies.push(projectileBody);
-    projectileBody.userData = { type: 'projectile', mesh: projectileMesh, data: projectileData };
-    projectileMesh.userData = { type: 'projectile', body: projectileBody, data: projectileData };
+    physicsBodies.set(projectileBody.id, projectileBody); // Track
+    projectileBody.userData = { type: 'projectile', data: projectileData };
+    projectileMesh.userData = { type: 'projectile', data: projectileData }; // No body ref needed on mesh
 }
 
 // --- Collision Handling ---
-function handlePlayerCollision(event) { /* ... same as before (but item part is unused now) ... */
+function handlePlayerCollision(event) {
     const otherBody = event.body;
-    if (!otherBody || !otherBody.userData) return; // Body might be removed already
+    if (!otherBody || !otherBody.userData || !playerBody) return;
 
-    // Item pickup handled by 'F' key now.
-
-    // Player <-> Monster Collision
+    // Player <-> Monster (Example: Simple damage, could add knockback)
     if (otherBody.userData.type === 'monster') {
-        // Cooldown for taking damage? Needs state tracking.
-        // Simple damage for now:
-        gameState.stats.hp -= 1;
-        addLog(`Hit by ${otherBody.userData.monsterType || 'monster'}! HP: ${gameState.stats.hp}`, "combat");
-        updateStatsDisplay();
-         if (gameState.stats.hp <= 0) { gameOver("Defeated by a monster!"); }
+        // Check for cooldown before applying damage again?
+        console.log("Player collided with monster", otherBody.id);
+        // gameState.stats.hp -= 1;
+        // addLog(`Hit by ${otherBody.userData.monsterType || 'monster'}! HP: ${gameState.stats.hp}`, "combat");
+        // updateStatsDisplay();
+        // if (gameState.stats.hp <= 0) { gameOver("Defeated by a monster!"); }
+         // Apply small impulse away from monster
+         const impulse = playerBody.position.vsub(otherBody.position).unit().scale(20); // Knockback force
+         playerBody.applyImpulse(impulse, playerBody.position);
     }
-     // Could add other collision handlers (player hitting wall hard, etc.)
+     // Player <-> Wall (Handled by physics engine)
+     // Player <-> Item (Handled by 'F' key)
 }
 
-function handleProjectileCollision(event) { /* ... same as before ... */
+function handleProjectileCollision(event) {
     const projectileBody = event.target;
     const otherBody = event.body;
-    if (!projectileBody || !projectileBody.userData || !otherBody || !otherBody.userData) return;
+    if (!projectileBody?.userData || !otherBody?.userData) return; // Null checks
 
     const projectileData = projectileBody.userData.data;
+    let shouldRemoveProjectile = true; // Assume removal unless hitting player
 
     if (otherBody.userData.type === 'monster') {
         const monsterId = otherBody.id;
         const monsterIndex = gameState.monsters.findIndex(m => m.id === monsterId);
         if (monsterIndex > -1) {
              const monster = gameState.monsters[monsterIndex];
-             const damage = gameState.stats.strength;
+             const damage = gameState.stats.strength + Math.floor(Math.random() * 3); // Add randomness
              monster.hp -= damage;
-             otherBody.userData.hp = monster.hp; // Update hp in body too
+             otherBody.userData.hp = monster.hp;
              addLog(`Hit ${otherBody.userData.monsterType} for ${damage} damage! (HP: ${monster.hp})`, "combat");
+
+             // Apply impulse to monster
+             const impulseDir = projectileBody.velocity.unit();
+             otherBody.applyImpulse(impulseDir.scale(damage * 5), projectileBody.position); // Knockback scales with damage
+
+
              if (monster.hp <= 0) {
                  addLog(`Defeated ${otherBody.userData.monsterType}!`, "info");
-                 // Schedule removal after physics step if needed, direct removal can be tricky
-                 scene.remove(monster.mesh);
-                 world.removeBody(monster.body);
-                 meshesToSync = meshesToSync.filter(sync => sync.body.id !== monster.body.id);
-                 physicsBodies = physicsBodies.filter(body => body.id !== monster.body.id);
-                 gameState.monsters.splice(monsterIndex, 1);
+                 // Safely remove monster after physics step using setTimeout
+                 setTimeout(() => {
+                    if(monster.mesh.parent) scene.remove(monster.mesh);
+                    if(world.bodies.includes(monster.body)) world.removeBody(monster.body);
+                    meshesToSync = meshesToSync.filter(sync => sync.body.id !== monster.body.id);
+                    physicsBodies.delete(monster.body.id);
+                    gameState.monsters = gameState.monsters.filter(m => m.id !== monsterId);
+                 }, 0);
              }
         }
+    } else if (otherBody === playerBody) {
+        shouldRemoveProjectile = false; // Don't destroy projectile if it hits the player who fired it
+         console.log("Projectile hit player - ignored");
+    } else if (otherBody.mass === 0) {
+         // Hit a static object like a wall
+         console.log("Projectile hit wall/static");
+         // Optional: Add impact effect
     }
 
-    // Remove projectile immediately after any valid collision (except maybe player?)
-    if (otherBody !== playerBody) {
-        // Schedule removal might be safer if errors occur here
-        removeProjectile(projectileData);
+
+    if (shouldRemoveProjectile) {
+        // Schedule removal might be safer than immediate
+         setTimeout(() => removeProjectile(projectileData), 0);
     }
 }
 
-function removeProjectile(projectileData) { /* ... same as before ... */
+function removeProjectile(projectileData) {
     if (!projectileData) return;
     const index = projectiles.indexOf(projectileData);
-    if (index === -1) return; // Already removed
+    if (index === -1) return;
 
-    // Check if objects still exist before removing
-    if(projectileData.mesh.parent) scene.remove(projectileData.mesh);
-    // Check if body is still in world before removing
-    if (world.bodies.includes(projectileData.body)) world.removeBody(projectileData.body);
+    if (projectileData.mesh?.parent) scene.remove(projectileData.mesh);
+    if (projectileData.body && world.bodies.includes(projectileData.body)) world.removeBody(projectileData.body);
 
-    meshesToSync = meshesToSync.filter(sync => sync.body && sync.body.id !== projectileData.body.id);
-    physicsBodies = physicsBodies.filter(body => body && body.id !== projectileData.body.id);
+    meshesToSync = meshesToSync.filter(sync => sync.body?.id !== projectileData.body?.id);
+    if (projectileData.body) physicsBodies.delete(projectileData.body.id);
     projectiles.splice(index, 1);
 }
 
+
 // --- Monster AI ---
-function updateMonsters(deltaTime) { /* ... Mostly same as before ... */
-     const agroRangeSq = (ROOM_SIZE * 1.5) ** 2;
-     if(!playerBody) return; // Need player position
+function updateMonsters(deltaTime) {
+     const agroRangeSq = (ROOM_SIZE * 2) ** 2; // Increased range
+     if(!playerBody) return;
 
      gameState.monsters.forEach(monster => {
-          if (!monster || !monster.body) return; // Skip if monster removed
+          if (!monster || !monster.body || monster.hp <= 0) return; // Skip dead or removed monsters
+
          const monsterPos = monster.body.position;
          const playerPos = playerBody.position;
          const distanceSq = playerPos.distanceSquared(monsterPos);
 
-         if (distanceSq < agroRangeSq) {
+         if (distanceSq < agroRangeSq) { // If player is close
              const direction = playerPos.vsub(monsterPos);
-             direction.y = 0;
-             if (direction.lengthSquared() > 0.1) {
+             direction.y = 0; // Ignore height difference for movement plan
+             if (distanceSq > (PLAYER_RADIUS * 2)**2 && direction.lengthSquared() > 0.1) { // If not too close and direction is valid
                  direction.normalize();
                  const monsterData = monstersData[monster.type];
-                 const speed = monsterData ? monsterData.speed : 1;
-                 // Apply force instead of setting velocity for more 'physical' movement
-                 // monster.body.applyForce(direction.scale(speed * monster.body.mass * 0.5), monsterPos); // Adjust force multiplier
-                 // OR setting velocity is simpler for basic chase:
+                 const speed = monsterData?.speed || 1;
+
+                  // Apply velocity for chasing
                   monster.body.velocity.x = direction.x * speed;
                   monster.body.velocity.z = direction.z * speed;
 
                   // Rotation
                   const angle = Math.atan2(direction.x, direction.z);
                   const targetQuaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), angle);
-                  monster.mesh.quaternion.slerp(targetQuaternion, 0.1); // Smooth turn
-             } else { monster.body.velocity.x = 0; monster.body.velocity.z = 0;} // Stop if close
-         } else { // Stop if far
+                  monster.mesh.quaternion.slerp(targetQuaternion, 0.1);
+             } else { // Too close or direction invalid, stop horizontal movement
+                  monster.body.velocity.x = 0;
+                  monster.body.velocity.z = 0;
+                  // TODO: Add attack logic here if close enough
+             }
+         } else { // Player too far, stop moving
               monster.body.velocity.x = 0;
               monster.body.velocity.z = 0;
          }
+         // Wake up body if needed (should be awake if chasing)
+         if(monster.body.sleepState === CANNON.Body.SLEEPING) monster.body.wakeUp();
      });
  }
 
-
-// --- UI Update ---
-function updateUI() { /* ... same as before ... */
-    updateStatsDisplay();
-    updateInventoryDisplay();
-}
-function updateStatsDisplay() { /* ... same as before ... */
-    let statsHTML = '';
-    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;
+// --- UI Update Functions ---
+function updateUI() { updateStatsDisplay(); updateInventoryDisplay(); }
+function updateStatsDisplay() { /* ... same ... */
+    let statsHTML = ''; 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() { /* ... same as before ... */
-    let inventoryHTML = '';
-    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>`; }); }
-    inventoryElement.innerHTML = inventoryHTML;
+function updateInventoryDisplay() { /* ... same ... */
+    let inventoryHTML = ''; 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>`; }); } inventoryElement.innerHTML = inventoryHTML;
 }
-function addLog(message, type = "info") { /* ... same as before ... */
-    const p = document.createElement('p');
-    p.classList.add(type);
-    p.textContent = `[${new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })}] ${message}`; // Add timestamp
-    logElement.appendChild(p);
-    logElement.scrollTop = logElement.scrollHeight;
+function addLog(message, type = "info") { /* ... same ... */
+    const p = document.createElement('p'); p.classList.add(type); p.textContent = `[${new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })}] ${message}`; logElement.appendChild(p); logElement.scrollTop = logElement.scrollHeight;
 }
 
-
 // --- Game Over ---
-function gameOver(reason) {
-     addLog(`GAME OVER: ${reason}`, "error");
-     console.log("Game Over:", reason);
+function gameOver(reason) { /* ... same ... */
+     addLog(`GAME OVER: ${reason}`, "error"); console.log("Game Over:", reason);
      gameLoopActive = false; // Stop the game loop
-     // Optional: Show a restart button or overlay
-     const restartButton = document.createElement('button');
-     restartButton.textContent = "RESTART GAME";
-     restartButton.style.position = 'absolute';
-     restartButton.style.top = '50%';
-     restartButton.style.left = '50%';
-     restartButton.style.transform = 'translate(-50%, -50%)';
-     restartButton.style.padding = '20px 40px';
-     restartButton.style.fontSize = '2em';
-     restartButton.style.cursor = 'pointer';
-     restartButton.style.zIndex = '1000';
-     restartButton.onclick = () => {
-         // Clean up restart button if exists
-         const oldButton = document.getElementById('restart-button');
-         if (oldButton) oldButton.remove();
-         init(); // Re-initialize the game
-     };
-     restartButton.id = 'restart-button'; // Assign ID for potential removal
-     sceneContainer.appendChild(restartButton); // Add button over the scene
+     const restartButton = document.createElement('button'); restartButton.textContent = "RESTART GAME"; restartButton.style.cssText = `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px 40px; font-size: 2em; cursor: pointer; z-index: 1000; background-color: #ffc107; border: none; border-radius: 5px; color: #333; font-family: 'Courier New', monospace;`;
+     restartButton.onclick = () => { if (restartButton.parentNode) restartButton.parentNode.removeChild(restartButton); init(); }; // Re-initialize
+     sceneContainer.appendChild(restartButton);
 }
 
-
 // --- Main Game Loop ---
-let lastTime = 0;
-function animate(time) {
-    if (!gameLoopActive) return; // Stop loop if game over or paused
-
-    animationFrameId = requestAnimationFrame(animate); // Store ID to potentially cancel
-
-    const currentTime = performance.now(); // Use performance.now for higher precision
-    const deltaTime = (currentTime - lastTime) * 0.001; // Seconds
-    lastTime = currentTime;
-
-    // Avoid spiral of death on tab-out or large lag spikes
-    const dtClamped = Math.min(deltaTime, 1 / 30); // Clamp to max 30 FPS step
-
-    if (!world || !playerBody) return; // Exit if physics/player not ready
+let lastTimestamp = 0;
+function animate(timestamp) {
+    if (!gameLoopActive) return;
+    animationFrameId = requestAnimationFrame(animate);
+
+    const deltaTime = (timestamp - lastTimestamp) * 0.001;
+    lastTimestamp = timestamp;
+    const dtClamped = Math.min(deltaTime, 1 / 20); // Clamp delta time (max 20 FPS step)
+
+    if (!world || !playerBody || !scene || !camera || !renderer) {
+        console.error("Core component missing, stopping loop.");
+        gameLoopActive = false;
+        return;
+    }
 
-    // 1. Handle Input
+    // 1. Input
     handleInput(dtClamped);
 
-    // 2. Update AI
+    // 2. AI
     updateMonsters(dtClamped);
 
-    // 3. Step Physics World
-    try {
-         world.step(dtClamped); // Use clamped delta time
-    } catch (e) {
-         console.error("Physics step error:", e);
-         // Potentially pause or handle error state
-    }
-
+    // 3. Physics Step
+    try { world.step(dtClamped); }
+    catch (e) { console.error("Physics step error:", e); gameLoopActive = false; return; } // Stop loop on error
 
-    // 4. Update Projectiles
+    // 4. Projectiles Update
     for (let i = projectiles.length - 1; i >= 0; i--) {
         const p = projectiles[i];
-        if (p) { // Check if projectile still exists
-             p.lifetime -= dtClamped;
-             if (p.lifetime <= 0) {
-                 removeProjectile(p);
-             }
-        }
+        if (p) { p.lifetime -= dtClamped; if (p.lifetime <= 0) removeProjectile(p); }
     }
 
-    // 5. Sync Visuals with Physics
+    // 5. Sync Visuals
     meshesToSync.forEach(item => {
-        // Ensure body and mesh still exist before syncing
-        if (item && item.body && item.mesh && item.mesh.parent) {
+        if (item?.body && item?.mesh && item.mesh.parent) { // Check existence
             item.mesh.position.copy(item.body.position);
             item.mesh.quaternion.copy(item.body.quaternion);
-        } else {
-            // Clean up entries for objects that might have been removed improperly
-             console.warn("Attempted to sync missing body/mesh pair.");
-             // Maybe remove this entry from meshesToSync here? Needs careful handling.
         }
     });
 
     // 6. Update Camera
-    if (playerBody) {
+    if (playerBody && camera) {
          const targetCameraPos = new THREE.Vector3(
              playerBody.position.x,
              CAMERA_Y_OFFSET,
-             playerBody.position.z + CAMERA_Y_OFFSET * 0.5 // Adjust Z offset based on height for better angle
+             playerBody.position.z // Look straight down from above player
          );
-         camera.position.lerp(targetCameraPos, 0.08); // Smoother follow
-
-         const lookAtPos = new THREE.Vector3(playerBody.position.x, 0, playerBody.position.z);
-         camera.lookAt(lookAtPos);
+         camera.position.lerp(targetCameraPos, 0.1); // Smooth follow
+         // Camera already looking down due to initial setup / rotation
+         // camera.lookAt(playerBody.position.x, 0, playerBody.position.z); // Keep looking at player's feet
     }
 
+    // 7. Physics Debugger (Optional)
+    // if (cannonDebugger) cannonDebugger.update();
 
-    // 7. Physics Debugger Update (Optional)
-    // if (cannonDebugger) {
-    //     cannonDebugger.update();
-    // }
-
-    // 8. Render Scene
+    // 8. Render
     renderer.render(scene, camera);
+}
 
+// --- Window Resize ---
+function onWindowResize() {
+    if (!renderer || !camera) return;
+    const width = sceneContainer.clientWidth;
+    const height = sceneContainer.clientHeight;
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+    renderer.setSize(width, height);
+    console.log("Resized");
 }
 
 // --- Start Game ---