Update index.html

index.html

@@ -1,818 +1,548 @@
-import * as THREE from 'three';
-import * as CANNON from 'cannon-es';
-// import CannonDebugger from 'cannon-es-debugger'; // Keep commented for now
-
-// --- DOM Elements ---
-const sceneContainer = document.getElementById('scene-container');
-const statsElement = document.getElementById('stats-display');
-const inventoryElement = document.getElementById('inventory-display');
-const logElement = document.getElementById('log-display');
-
-// --- Config ---
-const ROOM_SIZE = 10;
-const WALL_HEIGHT = 3; // Slightly shorter walls
-const WALL_THICKNESS = 0.5;
-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_JUMP_IMPULSE = 7; // Impulse force for jump
-const PROJECTILE_SPEED = 15;
-const PROJECTILE_RADIUS = 0.2;
-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 = []; // Holds { mesh: THREE.Mesh, body: CANNON.Body }
-const projectiles = []; // Holds { mesh, body, lifetime }
-let axesHelper;
-
-// --- Physics Setup ---
-let world;
-let playerBody;
-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;
-let selectedTool = null; // For building tools later
-
-// --- 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" },
-    "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"},
-    "1,0": { type: 'plains', features: ['door_west'], name: "East Plains"},
-    "-1,0": { type: 'plains', features: ['door_east'], name: "West Plains"},
-};
-
-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 = { // Add 'name'
-    "goblin": { name: "Goblin", hp: 15, attack: 4, defense: 1, speed: 2.5, model: 'capsule_green', xp: 5 },
-};
-
-// --- Materials and Geometries (Defined once) ---
-// 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
-};
-// 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),
-    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),
-};
-
-
-// --- Initialization ---
-
-function init() {
-    console.log("--- Initializing Game ---");
-    // 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.clear(); // Clear the map
-
-    // Clear previous scene if restarting
-    if (scene) {
-        while (scene.children.length > 0) scene.remove(scene.children[0]);
-    } else {
-        scene = new THREE.Scene(); // Create scene only if it doesn't exist
-    }
-    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);
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Shared World Builder</title>
+    <style>
+        body { margin: 0; overflow: hidden; }
+        canvas { display: block; }
+    </style>
+    </head>
+<body>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three@0.163.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+            }
         }
-    }
-
-    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: X, Attack: Space, Pickup: F", "info");
-    console.log("--- Initialization Complete ---");
-
-    if (animationFrameId) cancelAnimationFrame(animationFrameId);
-    gameLoopActive = true;
-    animate();
-}
-
-function initThreeJS() {
-    console.log("Initializing Three.js...");
-    const aspect = sceneContainer.clientWidth / sceneContainer.clientHeight;
-    camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 1000);
-    // 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;
-    sceneContainer.appendChild(renderer.domElement);
-
-    // Lighting
-    scene.add(new THREE.AmbientLight(0xffffff, 0.7)); // Brighter ambient for debug
-    const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
-    dirLight.position.set(10, 30, 20); // Angled light
-    dirLight.castShadow = true;
-    dirLight.shadow.mapSize.width = 1024;
-    dirLight.shadow.mapSize.height = 1024;
-    scene.add(dirLight);
-
-    // Axes Helper
-    axesHelper = new THREE.AxesHelper(ROOM_SIZE * 0.5);
-    axesHelper.position.set(0, 0.01, 0);
-    scene.add(axesHelper);
-    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) });
-    world.broadphase = new CANNON.SAPBroadphase(world);
-    world.allowSleep = true;
-
-    // Define materials
-    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 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.set(groundBody.id, groundBody); // Track it
-
-    // 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 });
-
-    world.addContactMaterial(playerGround);
-    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 }); console.log("Debugger Init."); }
-    // catch (e) { console.error("Failed CannonDebugger.", e); }
-}
-
-// --- Primitive Assembly Functions ---
-function createPlayerMesh() {
-    const group = new THREE.Group();
-    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 head = new THREE.Mesh(geometries.playerSphere, bodyMat);
-    head.position.y = PLAYER_HEIGHT - PLAYER_RADIUS; head.castShadow = true;
-    group.add(body); group.add(head);
-    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);
-    // 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') {
-    const group = new THREE.Group();
-    const mat = activeMaterials.monster; // Use active debug/normal material
-    if (modelType === 'capsule_green') {
-        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 { /* Add other monster types if needed */ }
-    group.traverse(child => { if (child.isMesh) child.castShadow = true; });
-    group.position.set(0, 0, 0); // Position set by sync
-    return group;
-}
-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; // Default height
-     mesh.castShadow = true;
-     return mesh;
-}
-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();
-    // 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 at initial pos:", playerMesh.position);
-
-    // Physics Body - Start at center of 0,0 cell, slightly above 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, // Completely prevent angular rotation from physics
-        material: playerMaterial // Use defined material
-    });
-    playerBody.allowSleep = false;
-    playerBody.addEventListener("collide", handlePlayerCollision);
-    world.addBody(playerBody);
-    physicsBodies.set(playerBody.id, playerBody); // Track body using Map
-    console.log(`Player physics body added at ${startX}, ${startY}, ${startZ}`);
-
-    // Add to sync list
-    meshesToSync.push({ mesh: playerMesh, body: playerBody });
-    console.log("Player added to sync list.");
-}
-
-// --- Map Generation ---
-function generateMap() {
-    console.log("Generating Map...");
-    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;
-    }
-
-    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.`);
+    </script>
+
+    <script type="module">
+        import * as THREE from 'three';
+
+        let scene, camera, renderer, playerMesh;
+        let raycaster, mouse;
+        const keysPressed = {};
+        const playerSpeed = 0.15;
+
+        // --- World State (Managed by Server via WebSocket) ---
+        const worldObjects = new Map(); // Map<obj_id, THREE.Object3D>
+        const groundMeshes = {}; // Map<gridKey, THREE.Mesh>
+
+        // --- WebSocket ---
+        let socket = null;
+        let connectionRetries = 0;
+        const MAX_RETRIES = 5;
+
+        // --- Access State from Streamlit (Injected) ---
+        const myUsername = window.USERNAME || `User_${Math.random().toString(36).substring(2, 6)}`;
+        const websocketUrl = window.WEBSOCKET_URL || "ws://localhost:8765";
+        let selectedObjectType = window.SELECTED_OBJECT_TYPE || "None"; // Can be updated
+        const plotWidth = window.PLOT_WIDTH || 50.0;
+        const plotDepth = window.PLOT_DEPTH || 50.0;
+
+        // --- Materials ---
+        const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide });
+        const placeholderGroundMaterial = new THREE.MeshStandardMaterial({ color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide });
+        // Basic material cache/reuse
+        const objectMaterials = {
+            'wood': new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.9 }),
+            'leaf': new THREE.MeshStandardMaterial({ color: 0x228B22, roughness: 0.8 }),
+            'stone': new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.8, metalness: 0.1 }),
+            'house_wall': new THREE.MeshStandardMaterial({ color: 0xffccaa, roughness: 0.8 }),
+            'house_roof': new THREE.MeshStandardMaterial({ color: 0xaa5533, roughness: 0.7 }),
+            'brick': new THREE.MeshStandardMaterial({ color: 0x9B4C43, roughness: 0.85 }),
+            'metal': new THREE.MeshStandardMaterial({ color: 0xcccccc, roughness: 0.4, metalness: 0.8 }),
+            'gem': new THREE.MeshStandardMaterial({ color: 0x4FFFFF, roughness: 0.1, metalness: 0.2, transparent: true, opacity: 0.8 }),
+            'light': new THREE.MeshBasicMaterial({ color: 0xFFFF88 }), // For light sources
+            // Add more reusable materials
+        };
+
+
+        function init() {
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0xabcdef);
+
+            const aspect = window.innerWidth / window.innerHeight;
+            camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 5000); // Increased far plane
+            camera.position.set(plotWidth / 2, 15, plotDepth / 2 + 20);
+            camera.lookAt(plotWidth/2, 0, plotDepth/2);
+            scene.add(camera);
+
+            setupLighting();
+            // Don't setup initial ground here, wait for WebSocket initial state? Or create base?
+            createGroundPlane(0, 0, false); // Create the origin ground at least
+            setupPlayer();
+
+            raycaster = new THREE.Raycaster();
+            mouse = new THREE.Vector2();
+
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            document.body.appendChild(renderer.domElement);
+
+            // --- Initialize WebSocket Connection ---
+            connectWebSocket();
+
+            // Event Listeners
+            document.addEventListener('mousemove', onMouseMove, false);
+            document.addEventListener('click', onDocumentClick, false); // Place object
+            window.addEventListener('resize', onWindowResize, false);
+            document.addEventListener('keydown', onKeyDown);
+            document.addEventListener('keyup', onKeyUp);
+
+            // --- Define global functions needed by Python ---
+            window.teleportPlayer = teleportPlayer;
+            // Removed getSaveDataAndPosition - saving now server-side via WS
+            // Removed resetNewlyPlacedObjects - no longer needed
+            window.updateSelectedObjectType = updateSelectedObjectType; // Still needed
+
+            console.log(`Three.js Initialized for user: ${myUsername}. Connecting to ${websocketUrl}...`);
+            animate();
         }
-    });
-
-    // 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;
-    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; // Item height
-
-    // Use DEBUG material
-    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 }; // Store data on mesh
-    mesh.castShadow = true;
-    scene.add(mesh);
-
-    // Store item in game state WITHOUT physics body
-    gameState.items.push({
-        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 ${x.toFixed(1)}, ${y.toFixed(1)}, ${z.toFixed(1)} (visual only)`);
-}
-
-function spawnMonster(monsterType, gridX, gridZ) {
-    const monsterData = monstersData[monsterType];
-    if (!monsterData) 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_HEIGHT; // Start higher
-
-    // Use DEBUG material
-    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);
-    const body = new CANNON.Body({
-        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.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 '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; 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;
-    // 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 ---
-    // We set velocity directly for more responsive control than forces
-    const targetVelocity = new CANNON.Vec3(0, playerBody.velocity.y, 0); // Preserve Y velocity
-
-    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;
-
-        // --- 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);
-        // Slerp for smooth rotation
-        playerMesh.quaternion.slerp(targetQuaternion, 0.15); // Adjust 0.15 for responsiveness
-
-    } else {
-        // 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 = 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);
+
+        // --- WebSocket Logic ---
+        function connectWebSocket() {
+            console.log("Attempting WebSocket connection...");
+            socket = new WebSocket(websocketUrl);
+
+            socket.onopen = () => {
+                console.log("WebSocket connection established.");
+                connectionRetries = 0;
+                // Request initial state? Server sends it automatically now.
+                // socket.send(JSON.stringify({ type: "request_initial_state" }));
+            };
+
+            socket.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    // console.log("WebSocket message received:", data); // Debugging
+                    handleWebSocketMessage(data);
+                } catch (e) {
+                    console.error("Failed to parse WebSocket message:", event.data, e);
+                }
+            };
+
+            socket.onerror = (error) => {
+                console.error("WebSocket error:", error);
+                // Consider showing an error message to the user in Streamlit?
+            };
+
+            socket.onclose = (event) => {
+                console.warn(`WebSocket connection closed. Code: ${event.code}, Reason: ${event.reason}. Clean: ${event.wasClean}`);
+                socket = null;
+                // Implement reconnection strategy
+                if (connectionRetries < MAX_RETRIES) {
+                    connectionRetries++;
+                    const delay = Math.pow(2, connectionRetries) * 1000; // Exponential backoff
+                    console.log(`Attempting reconnection in ${delay / 1000}s...`);
+                    setTimeout(connectWebSocket, delay);
+                } else {
+                    console.error("WebSocket reconnection failed after max retries.");
+                    // Inform user connection lost - maybe via Streamlit call?
+                }
+            };
         }
-        keysPressed['x'] = false; keysPressed['keyx'] = false; // Consume jump input
-    }
-
-    // --- Pickup (F) ---
-    if (keysPressed['f'] || keysPressed['keyf']) {
-        pickupNearbyItem();
-        keysPressed['f'] = false; keysPressed['keyf'] = false; // Consume pickup input
-    }
-
-    // --- Fire (Space) ---
-    if (keysPressed['space']) {
-        fireProjectile();
-        keysPressed['space'] = false; // Consume fire input
-    }
-}
-
-// --- Interaction Logic ---
-function pickupNearbyItem() {
-    if (!playerBody) return;
-    const playerPos = playerBody.position;
-    let pickedUp = false;
-    let closestItemIndex = -1;
-    let minDistanceSq = PICKUP_RADIUS_SQ; // Use squared distance
-
-    // Find the closest item within radius
-    for (let i = 0; i < gameState.items.length; i++) {
-        const item = gameState.items[i];
-        const distanceSq = playerPos.distanceSquared(item.position);
-        if (distanceSq < minDistanceSq) {
-            minDistanceSq = distanceSq;
-            closestItemIndex = i;
+
+        function sendWebSocketMessage(type, payload) {
+            if (socket && socket.readyState === WebSocket.OPEN) {
+                const message = JSON.stringify({ type, payload });
+                socket.send(message);
+            } else {
+                console.warn("WebSocket not open. Message not sent:", type, payload);
+                // Optionally queue messages to send on reconnect?
+            }
         }
-    }
-
-    // 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");
+
+        function handleWebSocketMessage(data) {
+            const { type, payload } = data;
+
+            switch (type) {
+                case "initial_state":
+                    console.log(`Received initial world state with ${Object.keys(payload).length} objects.`);
+                    // Clear existing objects (except player?) before loading initial state
+                    clearWorldObjects();
+                    for (const obj_id in payload) {
+                        createAndPlaceObject(payload[obj_id], false); // false = not newly placed
+                    }
+                    // Setup ground based on loaded objects' positions? Or separate metadata needed?
+                    // For now, rely on dynamic ground expansion.
+                    break;
+                case "object_placed":
+                     console.log(`Object placed by ${payload.username}:`, payload.object_data);
+                     // Add or update the object in the scene
+                     createAndPlaceObject(payload.object_data, false); // false = not newly placed by *this* client
+                     break;
+                case "object_deleted":
+                    console.log(`Object deleted by ${payload.username}:`, payload.obj_id);
+                    removeObjectById(payload.obj_id);
+                    break;
+                case "user_join":
+                     console.log(`User joined: ${payload.username} (${payload.id})`);
+                     // Optionally display user join message in chat tab or 3D world?
+                     break;
+                case "user_leave":
+                     console.log(`User left: ${payload.username} (${payload.id})`);
+                     // Optionally display user leave message
+                     break;
+                case "user_rename":
+                     console.log(`User ${payload.old_username} is now ${payload.new_username}`);
+                     break;
+                 case "chat_message":
+                      console.log(`Chat from ${payload.username}: ${payload.message}`);
+                      // Handle displaying chat in the Streamlit Chat tab (Python side handles this)
+                      break;
+                // Add handlers for other message types
+                default:
+                    console.warn("Received unknown WebSocket message type:", type);
+            }
         }
-    }
-
-    if (!pickedUp) {
-        addLog("Nothing nearby to pick up.", "info");
-    }
-}
-
-
-// --- 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
-    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) // Offset horizontally
-    );
-    // 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: 2.0 }; // Shorter lifetime
-    meshesToSync.push(projectileData);
-    projectiles.push(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) {
-    const otherBody = event.body;
-    if (!otherBody || !otherBody.userData || !playerBody) return;
-
-    // Player <-> Monster (Example: Simple damage, could add knockback)
-    if (otherBody.userData.type === '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);
-    }
-     // Player <-> Wall (Handled by physics engine)
-     // Player <-> Item (Handled by 'F' key)
-}
-
-function handleProjectileCollision(event) {
-    const projectileBody = event.target;
-    const otherBody = event.body;
-    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 + Math.floor(Math.random() * 3); // Add randomness
-             monster.hp -= damage;
-             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");
-                 // 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);
+
+        function clearWorldObjects() {
+             console.log("Clearing existing world objects...");
+             for (const [obj_id, mesh] of worldObjects.entries()) {
+                 scene.remove(mesh);
+                 // Optional: Dispose geometry/material for memory management
+                 // disposeObject3D(mesh);
              }
+             worldObjects.clear();
+             // Also clear ground meshes? Or keep them? Keep for now.
         }
-    } 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
-    }
-
-
-    if (shouldRemoveProjectile) {
-        // Schedule removal might be safer than immediate
-         setTimeout(() => removeProjectile(projectileData), 0);
-    }
-}
-
-function removeProjectile(projectileData) {
-    if (!projectileData) return;
-    const index = projectiles.indexOf(projectileData);
-    if (index === -1) return;
-
-    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?.id !== projectileData.body?.id);
-    if (projectileData.body) physicsBodies.delete(projectileData.body.id);
-    projectiles.splice(index, 1);
-}
-
-
-// --- Monster AI ---
-function updateMonsters(deltaTime) {
-     const agroRangeSq = (ROOM_SIZE * 2) ** 2; // Increased range
-     if(!playerBody) return;
-
-     gameState.monsters.forEach(monster => {
-          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 player is close
-             const direction = playerPos.vsub(monsterPos);
-             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?.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);
-             } 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
+
+        function removeObjectById(obj_id) {
+             if (worldObjects.has(obj_id)) {
+                  const mesh = worldObjects.get(obj_id);
+                  scene.remove(mesh);
+                  // disposeObject3D(mesh); // Optional cleanup
+                  worldObjects.delete(obj_id);
+                  console.log(`Removed object ${obj_id} from scene.`);
+             } else {
+                  console.warn(`Attempted to remove non-existent object ID: ${obj_id}`);
              }
-         } else { // Player too far, stop moving
-              monster.body.velocity.x = 0;
-              monster.body.velocity.z = 0;
+        }
+
+        // --- Standard Setup Functions ---
+        function setupLighting() { /* ... (Keep as before) ... */
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); directionalLight.position.set(75, 150, 100); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 10; directionalLight.shadow.camera.far = 400; directionalLight.shadow.camera.left = -150; directionalLight.shadow.camera.right = 150; directionalLight.shadow.camera.top = 150; directionalLight.shadow.camera.bottom = -150; directionalLight.shadow.bias = -0.002; scene.add(directionalLight);
+            const hemiLight = new THREE.HemisphereLight( 0xabcdef, 0x55aa55, 0.5 ); scene.add( hemiLight );
+        }
+        function setupPlayer() { /* ... (Keep as before) ... */
+             const playerGeo = new THREE.CapsuleGeometry(0.4, 0.8, 4, 8); const playerMat = new THREE.MeshStandardMaterial({ color: 0x0055ff, roughness: 0.6 }); playerMesh = new THREE.Mesh(playerGeo, playerMat); playerMesh.position.set(plotWidth / 2, 0.8, plotDepth / 2); playerMesh.castShadow = true; playerMesh.receiveShadow = false; scene.add(playerMesh);
          }
-         // Wake up body if needed (should be awake if chasing)
-         if(monster.body.sleepState === CANNON.Body.SLEEPING) monster.body.wakeUp();
-     });
- }
-
-// --- 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 ... */
-    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 ... */
-    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) { /* ... same ... */
-     addLog(`GAME OVER: ${reason}`, "error"); console.log("Game Over:", reason);
-     gameLoopActive = false; // Stop the game loop
-     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 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. Input
-    handleInput(dtClamped);
-
-    // 2. AI
-    updateMonsters(dtClamped);
-
-    // 3. Physics Step
-    try { world.step(dtClamped); }
-    catch (e) { console.error("Physics step error:", e); gameLoopActive = false; return; } // Stop loop on error
-
-    // 4. Projectiles Update
-    for (let i = projectiles.length - 1; i >= 0; i--) {
-        const p = projectiles[i];
-        if (p) { p.lifetime -= dtClamped; if (p.lifetime <= 0) removeProjectile(p); }
-    }
-
-    // 5. Sync Visuals
-    meshesToSync.forEach(item => {
-        if (item?.body && item?.mesh && item.mesh.parent) { // Check existence
-            item.mesh.position.copy(item.body.position);
-            item.mesh.quaternion.copy(item.body.quaternion);
+        function createGroundPlane(gridX, gridZ, isPlaceholder) { /* ... (Keep as before) ... */
+            const gridKey = `${gridX}_${gridZ}`; if (groundMeshes[gridKey]) return groundMeshes[gridKey];
+            const groundGeometry = new THREE.PlaneGeometry(plotWidth, plotDepth); const material = isPlaceholder ? placeholderGroundMaterial : groundMaterial; const groundMesh = new THREE.Mesh(groundGeometry, material); groundMesh.rotation.x = -Math.PI / 2; groundMesh.position.y = -0.05; groundMesh.position.x = gridX * plotWidth + plotWidth / 2.0; groundMesh.position.z = gridZ * plotDepth + plotDepth / 2.0; groundMesh.receiveShadow = true; groundMesh.userData.gridKey = gridKey; groundMesh.userData.isPlaceholder = isPlaceholder; scene.add(groundMesh); groundMeshes[gridKey] = groundMesh; return groundMesh;
+         }
+
+        // --- Object Creation & Placement (Modified for WebSocket & New Primitives) ---
+
+        // Central function to add/update objects based on data
+        function createAndPlaceObject(objData, isNewlyPlacedLocally) { // isNewlyPlacedLocally not really used now
+            if (!objData || !objData.obj_id || !objData.type) {
+                console.warn("Invalid object data:", objData);
+                return null;
+            }
+
+            // Check if object already exists (update vs create)
+            let mesh = worldObjects.get(objData.obj_id);
+            let isNew = false;
+
+            if (mesh) {
+                 // Update existing mesh position/rotation if different
+                 if (mesh.position.distanceToSquared(objData.position) > 0.001) {
+                      mesh.position.set(objData.position.x, objData.position.y, objData.position.z);
+                 }
+                 if (objData.rotation && (
+                      Math.abs(mesh.rotation.x - objData.rotation._x) > 0.01 ||
+                      Math.abs(mesh.rotation.y - objData.rotation._y) > 0.01 ||
+                      Math.abs(mesh.rotation.z - objData.rotation._z) > 0.01 )) {
+                       mesh.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
+                 }
+                 // Could add logic here to update geometry/material if type changes? Unlikely.
+                 // console.log(`Updated object ${objData.obj_id}`);
+            } else {
+                 // Create new mesh
+                 mesh = createPrimitiveMesh(objData.type); // Use the new factory function
+                 if (!mesh) return null; // Failed to create mesh type
+
+                 isNew = true;
+                 mesh.userData.obj_id = objData.obj_id; // Assign ID from data
+                 mesh.userData.type = objData.type;
+                 mesh.position.set(objData.position.x, objData.position.y, objData.position.z);
+                 if (objData.rotation) {
+                     mesh.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
+                 }
+
+                 scene.add(mesh);
+                 worldObjects.set(objData.obj_id, mesh); // Add to our map
+                 // console.log(`Created new object ${objData.obj_id} (${objData.type})`);
+            }
+            return mesh;
         }
-    });
-
-    // 6. Update Camera
-    if (playerBody && camera) {
-         const targetCameraPos = new THREE.Vector3(
-             playerBody.position.x,
-             CAMERA_Y_OFFSET,
-             playerBody.position.z // Look straight down from above player
-         );
-         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();
-
-    // 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 ---
-init();
+
+        // Factory function for creating meshes based on type name
+        function createPrimitiveMesh(type) {
+            let mesh = null;
+            let geometry, material, material2; // Declare vars
+
+            // Use reusable materials where possible
+            const wood = objectMaterials.wood;
+            const leaf = objectMaterials.leaf;
+            const stone = objectMaterials.stone;
+            const house_wall = objectMaterials.house_wall;
+            const house_roof = objectMaterials.house_roof;
+            const brick = objectMaterials.brick;
+            const metal = objectMaterials.metal;
+            const gem = objectMaterials.gem;
+            const lightMat = objectMaterials.light;
+
+            try { // Wrap in try-catch for safety if geometry fails
+                switch(type) {
+                    // --- Original Primitives ---
+                    case "Tree":
+                        mesh = new THREE.Group();
+                        geometry = new THREE.CylinderGeometry(0.3, 0.4, 2, 8); material = wood;
+                        const trunk = new THREE.Mesh(geometry, material); trunk.position.y = 1; trunk.castShadow=true; trunk.receiveShadow=true; mesh.add(trunk);
+                        geometry = new THREE.IcosahedronGeometry(1.2, 0); material = leaf;
+                        const canopy = new THREE.Mesh(geometry, material); canopy.position.y = 2.8; canopy.castShadow=true; canopy.receiveShadow=false; mesh.add(canopy);
+                        break;
+                    case "Rock":
+                        geometry = new THREE.IcosahedronGeometry(0.7, 1); material = stone;
+                        // Optional: Deform geometry slightly (can be slow if done often)
+                        mesh = new THREE.Mesh(geometry, material); mesh.castShadow = true; mesh.receiveShadow = true;
+                        mesh.scale.set(1, Math.random()*0.4 + 0.8, 1); // Vary shape slightly
+                        break;
+                    case "Simple House":
+                        mesh = new THREE.Group();
+                        geometry = new THREE.BoxGeometry(2, 1.5, 2.5); material = house_wall;
+                        const body = new THREE.Mesh(geometry, material); body.position.y = 0.75; body.castShadow = true; body.receiveShadow = true; mesh.add(body);
+                        geometry = new THREE.ConeGeometry(1.8, 1, 4); material = house_roof;
+                        const roof = new THREE.Mesh(geometry, material); roof.position.y = 1.5 + 0.5; roof.rotation.y = Math.PI / 4; roof.castShadow = true; roof.receiveShadow = false; mesh.add(roof);
+                        break;
+                    case "Fence Post": // Keep original simple fence post
+                        geometry = new THREE.BoxGeometry(0.2, 1.5, 0.2); material = wood;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.75; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+
+                    // --- New Primitives ---
+                    case "Pine Tree": // Example: Cone for canopy
+                        mesh = new THREE.Group();
+                        geometry = new THREE.CylinderGeometry(0.2, 0.3, 2.5, 8); material = wood;
+                        const pineTrunk = new THREE.Mesh(geometry, material); pineTrunk.position.y = 1.25; pineTrunk.castShadow=true; pineTrunk.receiveShadow=true; mesh.add(pineTrunk);
+                        geometry = new THREE.ConeGeometry(1, 2.5, 8); material = leaf;
+                        const pineCanopy = new THREE.Mesh(geometry, material); pineCanopy.position.y = 2.5 + (2.5/2) - 0.5; pineCanopy.castShadow=true; pineCanopy.receiveShadow=false; mesh.add(pineCanopy);
+                        break;
+                    case "Brick Wall": // Simple box with brick color
+                        geometry = new THREE.BoxGeometry(3, 2, 0.3); material = brick;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 1; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Sphere":
+                        geometry = new THREE.SphereGeometry(0.8, 16, 12); material = metal;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.8; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Cube": // Simple cube
+                        geometry = new THREE.BoxGeometry(1, 1, 1); material = stone; // Re-use stone
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.5; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Cylinder":
+                        geometry = new THREE.CylinderGeometry(0.5, 0.5, 1.5, 16); material = metal;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.75; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Cone":
+                        geometry = new THREE.ConeGeometry(0.6, 1.2, 16); material = house_roof; // Re-use roof
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.6; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Torus": // Donut shape
+                        geometry = new THREE.TorusGeometry(0.6, 0.2, 8, 24); material = gem; // Use gem material
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.7; mesh.castShadow = true; mesh.receiveShadow = true;
+                         mesh.rotation.x = Math.PI / 2; // Stand it up
+                        break;
+                    case "Mushroom":
+                         mesh = new THREE.Group();
+                         geometry = new THREE.CylinderGeometry(0.15, 0.1, 0.6, 8); material = house_wall; // Cream stem
+                         const stem = new THREE.Mesh(geometry, material); stem.position.y = 0.3; stem.castShadow = true; stem.receiveShadow = true; mesh.add(stem);
+                         geometry = new THREE.SphereGeometry(0.4, 16, 8, 0, Math.PI * 2, 0, Math.PI / 2); material = house_roof; // Red cap
+                         const cap = new THREE.Mesh(geometry, material); cap.position.y = 0.6; cap.castShadow = true; cap.receiveShadow = false; mesh.add(cap);
+                         break;
+                    case "Cactus": // Simple segmented cactus
+                        mesh = new THREE.Group(); material = leaf; // Green material
+                        geometry = new THREE.CylinderGeometry(0.3, 0.3, 1.5, 8);
+                        const main = new THREE.Mesh(geometry, material); main.position.y = 0.75; main.castShadow = true; main.receiveShadow = true; mesh.add(main);
+                        geometry = new THREE.CylinderGeometry(0.2, 0.2, 0.8, 8);
+                        const arm1 = new THREE.Mesh(geometry, material); arm1.position.set(0.3, 1, 0); arm1.rotation.z = Math.PI / 4; arm1.castShadow = true; arm1.receiveShadow = true; mesh.add(arm1);
+                        const arm2 = new THREE.Mesh(geometry, material); arm2.position.set(-0.3, 0.8, 0); arm2.rotation.z = -Math.PI / 4; arm2.castShadow = true; arm2.receiveShadow = true; mesh.add(arm2);
+                        break;
+                    case "Campfire":
+                         mesh = new THREE.Group();
+                         material = wood; geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.8, 5);
+                         const log1 = new THREE.Mesh(geometry, material); log1.rotation.x = Math.PI/2; log1.position.set(0, 0.1, 0.2); mesh.add(log1);
+                         const log2 = new THREE.Mesh(geometry, material); log2.rotation.set(Math.PI/2, 0, Math.PI/3); log2.position.set(0.2*Math.cos(Math.PI/6), 0.1, -0.2*Math.sin(Math.PI/6)); mesh.add(log2);
+                         const log3 = new THREE.Mesh(geometry, material); log3.rotation.set(Math.PI/2, 0, -Math.PI/3); log3.position.set(-0.2*Math.cos(Math.PI/6), 0.1, -0.2*Math.sin(Math.PI/6)); mesh.add(log3);
+                         material2 = lightMat; geometry = new THREE.ConeGeometry(0.2, 0.5, 8); // Simple flame
+                         const flame = new THREE.Mesh(geometry, material2); flame.position.y = 0.35; mesh.add(flame);
+                         // Add shadows later if needed
+                         break;
+                    case "Star":
+                         geometry = new THREE.SphereGeometry(0.5, 4, 2); // Low poly sphere looks star-like
+                         material = lightMat;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 1;
+                         break;
+                    case "Gem":
+                         geometry = new THREE.OctahedronGeometry(0.6, 0); material = gem;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.6; mesh.castShadow = true; mesh.receiveShadow = true;
+                         break;
+                    case "Tower": // Simple cylinder tower
+                         geometry = new THREE.CylinderGeometry(1, 1.2, 5, 8); material = stone;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 2.5; mesh.castShadow = true; mesh.receiveShadow = true;
+                         break;
+                    case "Barrier": // Simple box barrier
+                         geometry = new THREE.BoxGeometry(2, 0.5, 0.5); material = metal;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.25; mesh.castShadow = true; mesh.receiveShadow = true;
+                         break;
+                     case "Fountain": // Placeholder: Tiered cylinders
+                          mesh = new THREE.Group(); material = stone;
+                          geometry = new THREE.CylinderGeometry(1.5, 1.5, 0.3, 16);
+                          const baseF = new THREE.Mesh(geometry, material); baseF.position.y = 0.15; mesh.add(baseF);
+                          geometry = new THREE.CylinderGeometry(0.8, 0.8, 0.5, 16);
+                          const midF = new THREE.Mesh(geometry, material); midF.position.y = 0.3+0.25; mesh.add(midF);
+                           geometry = new THREE.CylinderGeometry(0.4, 0.4, 0.7, 16);
+                          const topF = new THREE.Mesh(geometry, material); topF.position.y = 0.8+0.35; mesh.add(topF);
+                          mesh.castShadow = true; mesh.receiveShadow = true; // Apply to group?
+                          break;
+                     case "Lantern":
+                          mesh = new THREE.Group(); material = metal;
+                          geometry = new THREE.BoxGeometry(0.4, 0.6, 0.4);
+                          const bodyL = new THREE.Mesh(geometry, material); bodyL.position.y = 0.3; mesh.add(bodyL);
+                           geometry = new THREE.SphereGeometry(0.15); material2 = lightMat;
+                          const lightL = new THREE.Mesh(geometry, material2); lightL.position.y = 0.3; mesh.add(lightL);
+                           mesh.castShadow = true; // Group casts shadow?
+                           break;
+                     case "Sign Post":
+                           mesh = new THREE.Group(); material = wood;
+                           geometry = new THREE.CylinderGeometry(0.05, 0.05, 1.8, 8);
+                           const postS = new THREE.Mesh(geometry, material); postS.position.y = 0.9; mesh.add(postS);
+                           geometry = new THREE.BoxGeometry(0.8, 0.4, 0.05);
+                           const signS = new THREE.Mesh(geometry, material); signS.position.y = 1.5; mesh.add(signS);
+                           mesh.castShadow = true; mesh.receiveShadow = true;
+                           break;
+
+
+                    default:
+                        console.warn("Unknown primitive type for mesh creation:", type);
+                        return null; // Return null if type not found
+                }
+            } catch (e) {
+                console.error(`Error creating geometry/mesh for type ${type}:`, e);
+                return null;
+            }
+
+            // Common post-creation steps (if mesh created)
+            if (mesh) {
+                // Set default userData structure (will be overwritten by createAndPlaceObject)
+                mesh.userData = { type: type };
+                // Ensure position is defaulted reasonably if created standalone
+                if (!mesh.position.y && mesh.geometry) {
+                     mesh.geometry.computeBoundingBox();
+                     mesh.position.y = (mesh.geometry.boundingBox.max.y - mesh.geometry.boundingBox.min.y) / 2;
+                }
+            }
+            return mesh;
+        }
+
+
+        // --- Event Handlers ---
+        function onMouseMove(event) { /* ... (Keep as before) ... */
+             mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+        }
+
+        function onDocumentClick(event) {
+            if (selectedObjectType === "None" || !selectedObjectType) return;
+
+            const groundCandidates = Object.values(groundMeshes);
+            if (groundCandidates.length === 0) return;
+
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(groundCandidates);
+
+            if (intersects.length > 0) {
+                const intersectPoint = intersects[0].point;
+
+                // Prepare object data for the server
+                const newObjData = {
+                    obj_id: THREE.MathUtils.generateUUID(), // Generate unique ID client-side
+                    type: selectedObjectType,
+                    position: { x: intersectPoint.x, y: 0, z: intersectPoint.z }, // Base position on ground
+                    rotation: { _x: 0, _y: Math.random() * Math.PI * 2, _z: 0, _order: 'XYZ' } // Random Y rotation
+                };
+
+                // Adjust Y position based on object type AFTER getting the type
+                // This should ideally use the geometry's bounding box, but hardcoding for now
+                const tempMesh = createPrimitiveMesh(selectedObjectType); // Create temporarily to get height? Costly.
+                if (tempMesh && tempMesh.geometry) {
+                    tempMesh.geometry.computeBoundingBox();
+                    const height = tempMesh.geometry.boundingBox.max.y - tempMesh.geometry.boundingBox.min.y;
+                    // Assume origin is at the center Y for most default geometries
+                    newObjData.position.y = (height / 2) + intersectPoint.y + 0.01; // Place base slightly above ground
+                } else {
+                     // Fallback if mesh creation failed or no geometry
+                     newObjData.position.y = 0.5 + intersectPoint.y; // Default lift
+                }
+
+                console.log(`Placing ${selectedObjectType} (${newObjData.obj_id}) at`, newObjData.position);
+
+                // 1. Add object visually immediately (Optimistic Update)
+                createAndPlaceObject(newObjData, true); // Mark as locally placed initially? Not needed now.
+
+                // 2. Send placement message to server via WebSocket
+                sendWebSocketMessage("place_object", {
+                     username: myUsername,
+                     object_data: newObjData
+                 });
+
+                // 3. No need for local saving (sessionStorage) anymore
+            }
+        }
+
+        function onKeyDown(event) { /* ... (Keep as before) ... */ keysPressed[event.code] = true; }
+        function onKeyUp(event) { /* ... (Keep as before) ... */ keysPressed[event.code] = false; }
+        function onWindowResize() { /* ... (Keep as before) ... */ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }
+
+        // --- Functions called by Python ---
+        function teleportPlayer(targetX, targetZ) { /* ... (Keep as before) ... */
+             console.log(`JS teleportPlayer called: x=${targetX}, z=${targetZ}`); if (playerMesh) { playerMesh.position.x = targetX; playerMesh.position.z = targetZ; const offset = new THREE.Vector3(0, 15, 20); const targetPosition = playerMesh.position.clone().add(offset); camera.position.copy(targetPosition); camera.lookAt(playerMesh.position); console.log("Player teleported to:", playerMesh.position); } else { console.error("Player mesh not found for teleport."); }
+        }
+        function updateSelectedObjectType(newType) { // Renamed from previous attempt
+             console.log("JS updateSelectedObjectType received:", newType);
+             selectedObjectType = newType;
+             // Optionally provide visual feedback (e.g., change cursor)
+        }
+
+        // --- Animation Loop & Helpers ---
+        function updatePlayerMovement() { /* ... (Keep as before, includes checkAndExpandGroundVisuals) ... */
+             if (!playerMesh) return; const moveDirection = new THREE.Vector3(0, 0, 0); if (keysPressed['KeyW'] || keysPressed['ArrowUp']) moveDirection.z -= 1; if (keysPressed['KeyS'] || keysPressed['ArrowDown']) moveDirection.z += 1; if (keysPressed['KeyA'] || keysPressed['ArrowLeft']) moveDirection.x -= 1; if (keysPressed['KeyD'] || keysPressed['ArrowRight']) moveDirection.x += 1;
+             if (moveDirection.lengthSq() > 0) { const forward = new THREE.Vector3(); camera.getWorldDirection(forward); forward.y = 0; forward.normalize(); const right = new THREE.Vector3().crossVectors(camera.up, forward).normalize(); const worldMove = new THREE.Vector3(); worldMove.add(forward.multiplyScalar(-moveDirection.z)); worldMove.add(right.multiplyScalar(-moveDirection.x)); worldMove.normalize().multiplyScalar(playerSpeed); playerMesh.position.add(worldMove); playerMesh.position.y = Math.max(playerMesh.position.y, 0.8); checkAndExpandGroundVisuals(); }
+        }
+        function checkAndExpandGroundVisuals() { /* ... (Keep as before) ... */
+             if (!playerMesh) return; const currentGridX = Math.floor(playerMesh.position.x / plotWidth); const currentGridZ = Math.floor(playerMesh.position.z / plotDepth); const viewDistanceGrids = 3; // Expand further?
+             for (let dx = -viewDistanceGrids; dx <= viewDistanceGrids; dx++) { for (let dz = -viewDistanceGrids; dz <= viewDistanceGrids; dz++) { const checkX = currentGridX + dx; const checkZ = currentGridZ + dz; const gridKey = `${checkX}_${checkZ}`; if (!groundMeshes[gridKey]) { createGroundPlane(checkX, checkZ, true); } } }
+        }
+        function updateCamera() { /* ... (Keep as before) ... */
+             if (!playerMesh) return; const offset = new THREE.Vector3(0, 12, 18); const targetPosition = playerMesh.position.clone().add(offset); camera.position.lerp(targetPosition, 0.08); const lookAtTarget = playerMesh.position.clone().add(new THREE.Vector3(0, 0.5, 0)); camera.lookAt(lookAtTarget);
+        }
+
+        function animate() {
+            requestAnimationFrame(animate);
+            updatePlayerMovement();
+            updateCamera();
+            renderer.render(scene, camera);
+        }
+
+        // --- Start ---
+        init();
+
+    </script>
+</body>
+</html>