Spaces:

awacke1
/

Happy-Valley-Game

Sleeping

App Files Files Community

awacke1 commited on Apr 5

Commit

84a18e0

verified ·

1 Parent(s): c4d7d14

Update index.html

Browse files

Files changed (1) hide show

index.html +216 -186

index.html CHANGED Viewed

@@ -1,11 +1,10 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Three.js Shared World</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
-        /* No Save button needed here anymore */
     </style>
     </head>
 <body>
@@ -21,20 +20,30 @@
     <script type="module">
         import * as THREE from 'three';
-        let scene, camera, renderer, groundMesh = null, playerMesh;
         let raycaster, mouse;
         const keysPressed = {};
         const playerSpeed = 0.15;
         let newlyPlacedObjects = []; // Track objects added THIS session for saving
         // --- Session Storage Key ---
-        const SESSION_STORAGE_KEY = 'unsavedWorldBuilderState';
         // --- Access State from Streamlit ---
         const allInitialObjects = window.ALL_INITIAL_OBJECTS || [];
         const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
         const plotWidth = window.PLOT_WIDTH || 50.0;
-        const nextPlotXOffset = window.NEXT_PLOT_X_OFFSET || 0.0; // Where the next plot starts
         function init() {
@@ -42,13 +51,13 @@
             scene.background = new THREE.Color(0xabcdef);
             const aspect = window.innerWidth / window.innerHeight;
-            camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 2000); // Increase far plane
             camera.position.set(0, 15, 20);
             camera.lookAt(0, 0, 0);
             scene.add(camera);
             setupLighting();
-            setupGround(); // Ground needs to be potentially very wide now
             setupPlayer();
             raycaster = new THREE.Raycaster();
@@ -60,10 +69,8 @@
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.body.appendChild(renderer.domElement);
-            loadInitialObjects(); // Load ALL objects passed from Python
-            // *** ADDED: Restore unsaved state from sessionStorage ***
-            restoreUnsavedState();
             // Event Listeners
             document.addEventListener('mousemove', onMouseMove, false);
@@ -71,14 +78,13 @@
             window.addEventListener('resize', onWindowResize, false);
             document.addEventListener('keydown', onKeyDown);
             document.addEventListener('keyup', onKeyUp);
-            // No save button listener needed here
-            // Define global functions needed by Python/streamlit-js-eval
             window.teleportPlayer = teleportPlayer;
-            window.getSaveData = getSaveData;
             window.resetNewlyPlacedObjects = resetNewlyPlacedObjects;
-            console.log("Three.js Initialized. Ready for commands.");
             animate();
         }
@@ -86,57 +92,74 @@
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
             const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
-            directionalLight.position.set(50, 100, 75); // Adjust light position for wider world
             directionalLight.castShadow = true;
-            directionalLight.shadow.mapSize.width = 2048*2; // Larger shadow map maybe needed
-            directionalLight.shadow.mapSize.height = 2048*2;
             directionalLight.shadow.camera.near = 0.5;
-            directionalLight.shadow.camera.far = 500; // Increase shadow distance
-            // Adjust shadow camera frustum dynamically later if needed, make it wide for now
-            directionalLight.shadow.camera.left = -100;
-            directionalLight.shadow.camera.right = 100;
-            directionalLight.shadow.camera.top = 100;
-            directionalLight.shadow.camera.bottom = -100;
             directionalLight.shadow.bias = -0.001;
             scene.add(directionalLight);
         }
-        function setupGround() { /* ... unchanged ... */
-            const groundWidth = Math.max(plotWidth, nextPlotXOffset + plotWidth);
-            const groundDepth = 50;
-            const groundGeometry = new THREE.PlaneGeometry(groundWidth, groundDepth);
-            const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x55aa55, roughness: 0.9, metalness: 0.1 });
-            groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
             groundMesh.rotation.x = -Math.PI / 2;
             groundMesh.position.y = -0.05;
-            groundMesh.position.x = (groundWidth / 2.0) - (plotWidth / 2.0) ;
             groundMesh.receiveShadow = true;
             scene.add(groundMesh);
-            console.log(`Ground setup with width: ${groundWidth} centered near x=0`);
         }
         function setupPlayer() { /* ... unchanged ... */
             const playerGeo = new THREE.CapsuleGeometry(0.4, 0.8, 4, 8);
             const playerMat = new THREE.MeshStandardMaterial({ color: 0x0000ff, roughness: 0.6 });
             playerMesh = new THREE.Mesh(playerGeo, playerMat);
-            playerMesh.position.set(2, 0.4 + 0.8/2, 5); // Start near origin (x=2 to be slightly in first plot)
-            playerMesh.castShadow = true;
-            playerMesh.receiveShadow = true;
             scene.add(playerMesh);
         }
-        function loadInitialObjects() {
             console.log(`Loading ${allInitialObjects.length} initial objects from Python.`);
-            allInitialObjects.forEach(objData => {
-                createAndPlaceObject(objData, false); // Use helper, false=don't add to newlyPlaced
-            });
-             console.log("Finished loading initial objects.");
         }
-        // --- NEW: Helper to create/place objects from data ---
-        function createAndPlaceObject(objData, isNewObject) {
              let loadedObject = null;
-             // Need to deserialize object based on 'type' field from CSV/Storage
              switch (objData.type) {
                  case "Simple House": loadedObject = createSimpleHouse(); break;
                  case "Tree": loadedObject = createTree(); break;
@@ -144,182 +167,133 @@
                  case "Fence Post": loadedObject = createFencePost(); break;
                  default: console.warn("Unknown object type in data:", objData.type); break;
              }
              if (loadedObject) {
-                 // Position depends on whether it's from initial load (world) or storage (world)
-                 // or potentially relative if storage format changes (keep world for now)
                  if (objData.position && objData.position.x !== undefined) {
                      loadedObject.position.set(objData.position.x, objData.position.y, objData.position.z);
-                 } else if (objData.pos_x !== undefined) { // Handle CSV loaded format too
                       loadedObject.position.set(objData.pos_x, objData.pos_y, objData.pos_z);
                  }
-                 // Apply rotation
-                 if (objData.rotation) { // Format from storage/newlyPlaced
                      loadedObject.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
-                 } else if (objData.rot_x !== undefined) { // Format from CSV
                      loadedObject.rotation.set(objData.rot_x, objData.rot_y, objData.rot_z, objData.rot_order || 'XYZ');
                  }
-                 // Assign unique ID if it has one, else use the one generated by createObjectBase
                  loadedObject.userData.obj_id = objData.obj_id || loadedObject.userData.obj_id;
                  scene.add(loadedObject);
-                 if (isNewObject) {
-                      // Only add to this array if it's being placed now or restored from session
-                      newlyPlacedObjects.push(loadedObject);
-                 }
-                 return loadedObject; // Return the mesh/group
             }
             return null;
         }
-        // --- NEW: Save/Load/Clear Unsaved State using sessionStorage ---
-        function saveUnsavedState() {
             try {
-                const stateToSave = newlyPlacedObjects.map(obj => ({
-                     obj_id: obj.userData.obj_id,
-                     type: obj.userData.type,
-                     position: { x: obj.position.x, y: obj.position.y, z: obj.position.z },
-                     rotation: { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order }
-                 }));
                 sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave));
                 console.log(`Saved ${stateToSave.length} unsaved objects to sessionStorage.`);
-            } catch (e) {
-                console.error("Error saving state to sessionStorage:", e);
-            }
         }
-        function restoreUnsavedState() {
              try {
                 const savedState = sessionStorage.getItem(SESSION_STORAGE_KEY);
                 if (savedState) {
                     console.log("Found unsaved state in sessionStorage. Restoring...");
                     const objectsToRestore = JSON.parse(savedState);
                     if (Array.isArray(objectsToRestore)) {
-                         // Clear existing newlyPlaced array before restoring
-                         newlyPlacedObjects = [];
-                         let count = 0;
-                         objectsToRestore.forEach(objData => {
-                              // Create object, add to scene, AND add to newlyPlacedObjects array
-                              if(createAndPlaceObject(objData, true)) {
-                                 count++;
-                              }
-                         });
                          console.log(`Restored ${count} objects.`);
                     }
-                } else {
-                     console.log("No unsaved state found in sessionStorage.");
-                }
-            } catch (e) {
-                console.error("Error restoring state from sessionStorage:", e);
-                 // Clear potentially corrupted storage
-                 sessionStorage.removeItem(SESSION_STORAGE_KEY);
-            }
         }
-        function clearUnsavedState() {
             sessionStorage.removeItem(SESSION_STORAGE_KEY);
-            newlyPlacedObjects = []; // Clear the array in memory too
             console.log("Cleared unsaved state from memory and sessionStorage.");
         }
-        // --- Object Creation Functions (MUST add userData.type and obj_id) ---
-        function createObjectBase(type) { // Helper to assign common data
-             const obj = { userData: { type: type, obj_id: THREE.MathUtils.generateUUID() } };
-             return obj;
         }
-         function createSimpleHouse() { /* ... unchanged, uses createObjectBase ... */
-            const base = createObjectBase("Simple House");
-            const group = new THREE.Group(); Object.assign(group, base);
-            const mainMaterial = new THREE.MeshStandardMaterial({ color: 0xffccaa, roughness: 0.8 });
-            const roofMaterial = new THREE.MeshStandardMaterial({ color: 0xaa5533, roughness: 0.7 });
-            const baseMesh = new THREE.Mesh(new THREE.BoxGeometry(2, 1.5, 2.5), mainMaterial);
-            baseMesh.position.y = 1.5 / 2; baseMesh.castShadow = true; baseMesh.receiveShadow = true; group.add(baseMesh);
-            const roof = new THREE.Mesh(new THREE.ConeGeometry(1.8, 1, 4), roofMaterial);
-            roof.position.y = 1.5 + 1 / 2; roof.rotation.y = Math.PI / 4; roof.castShadow = true; roof.receiveShadow = true; group.add(roof);
-            return group;
          }
-         function createTree() { /* ... unchanged, uses createObjectBase ... */
-            const base = createObjectBase("Tree"); const group = new THREE.Group(); Object.assign(group, base);
-            const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.9 });
-            const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22, roughness: 0.8 });
-            const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.4, 2, 8), trunkMaterial);
-            trunk.position.y = 2 / 2; trunk.castShadow = true; trunk.receiveShadow = true; group.add(trunk);
-            const leaves = new THREE.Mesh(new THREE.IcosahedronGeometry(1.2, 0), leavesMaterial);
-            leaves.position.y = 2 + 0.8; leaves.castShadow = true; leaves.receiveShadow = true; group.add(leaves);
-            return group;
          }
-         function createRock() { /* ... unchanged, uses createObjectBase ... */
-             const base = createObjectBase("Rock");
-             const rockMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.8, metalness: 0.1 });
-             const rock = new THREE.Mesh(new THREE.IcosahedronGeometry(0.7, 0), rockMaterial); Object.assign(rock, base);
-             rock.position.y = 0.7 / 2; rock.rotation.x = Math.random() * Math.PI; rock.rotation.y = Math.random() * Math.PI;
-             rock.castShadow = true; rock.receiveShadow = true;
-             return rock;
          }
-         function createFencePost() { /* ... unchanged, uses createObjectBase ... */
-             const base = createObjectBase("Fence Post");
-             const postMaterial = new THREE.MeshStandardMaterial({ color: 0xdeb887, roughness: 0.9 });
-             const post = new THREE.Mesh(new THREE.BoxGeometry(0.2, 1.5, 0.2), postMaterial); Object.assign(post, base);
-             post.position.y = 1.5 / 2; post.castShadow = true; post.receiveShadow = true;
-             return post;
          }
         // --- Event Handlers ---
         function onMouseMove(event) { /* ... unchanged ... */
             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         }
-        function onDocumentClick(event) {
-             if (selectedObjectType === "None" || !groundMesh) return;
-            raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObject(groundMesh); // Intersect ground ONLY
-            if (intersects.length > 0) {
-                const intersectPoint = intersects[0].point;
-                let newObjectToPlace = null; // Use a different name to avoid confusion
-                switch (selectedObjectType) {
                     case "Simple House": newObjectToPlace = createSimpleHouse(); break;
                     case "Tree": newObjectToPlace = createTree(); break;
                     case "Rock": newObjectToPlace = createRock(); break;
                     case "Fence Post": newObjectToPlace = createFencePost(); break;
                     default: return;
-                }
-                if (newObjectToPlace) {
-                    // Position in WORLD coordinates where clicked
-                    newObjectToPlace.position.copy(intersectPoint);
-                    // Adjust Y based on object's geometry center if needed
-                    // (Create functions mostly handle placing base at y=0)
-                    scene.add(newObjectToPlace);
-                    newlyPlacedObjects.push(newObjectToPlace); // Add to list for saving
-                    // *** ADDED: Save state to sessionStorage immediately after placing ***
-                    saveUnsavedState();
-                    console.log(`Placed new ${selectedObjectType}. Total unsaved: ${newlyPlacedObjects.length}`);
-                }
-            }
         }
         function onKeyDown(event) { keysPressed[event.code] = true; }
         function onKeyUp(event) { keysPressed[event.code] = false; }
         // --- Functions called by Python via streamlit-js-eval ---
-        function teleportPlayer(targetX) { /* ... unchanged ... */
-            console.log("JS teleportPlayer called with targetX:", targetX);
             if (playerMesh) {
-                playerMesh.position.x = targetX + 2.0;
-                playerMesh.position.z = 5.0;
                  const offset = new THREE.Vector3(0, 15, 20);
                  const targetPosition = playerMesh.position.clone().add(offset);
                  camera.position.copy(targetPosition);
@@ -328,22 +302,27 @@
             } else { console.error("Player mesh not found for teleport."); }
         }
-        function getSaveData() { // Called by Python when save button is clicked
-             console.log(`JS getSaveData called. Returning ${newlyPlacedObjects.length} new objects.`);
-             // Prepare data in the format Python expects (world positions)
              const objectsToSave = newlyPlacedObjects.map(obj => {
                  if (!obj.userData || !obj.userData.type) { return null; }
                  const rotation = { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order };
-                 return {
-                     obj_id: obj.userData.obj_id,
-                     type: obj.userData.type,
                      position: { x: obj.position.x, y: obj.position.y, z: obj.position.z },
                      rotation: rotation
                  };
              }).filter(obj => obj !== null);
-             console.log("Prepared data for saving:", objectsToSave);
-             return JSON.stringify(objectsToSave); // Return as JSON string
         }
         function resetNewlyPlacedObjects() { // Called by Python AFTER successful save
@@ -353,24 +332,75 @@
         // --- Animation Loop ---
-        function updatePlayerMovement() { /* ... unchanged ... */
-             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) {
-                 moveDirection.normalize().multiplyScalar(playerSpeed);
-                  playerMesh.position.add(moveDirection);
-                  playerMesh.position.y = Math.max(playerMesh.position.y, 0.4 + 0.8/2);
-             }
         }
         function updateCamera() { /* ... unchanged ... */
             if (!playerMesh) return;
-            const offset = new THREE.Vector3(0, 15, 20);
             const targetPosition = playerMesh.position.clone().add(offset);
             camera.position.lerp(targetPosition, 0.08);
             camera.lookAt(playerMesh.position);
@@ -384,7 +414,7 @@
         function animate() {
             requestAnimationFrame(animate);
-            updatePlayerMovement();
             updateCamera();
             renderer.render(scene, camera);
         }

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Three.js Infinite World</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
     </style>
     </head>
 <body>
     <script type="module">
         import * as THREE from 'three';
+        let scene, camera, renderer, playerMesh;
         let raycaster, mouse;
         const keysPressed = {};
         const playerSpeed = 0.15;
         let newlyPlacedObjects = []; // Track objects added THIS session for saving
+        const placeholderPlots = new Set(); // Track visually created placeholder grounds: 'x_z' string key
+        const groundMeshes = {}; // Store references to ground meshes: 'x_z' string key -> mesh
         // --- Session Storage Key ---
+        const SESSION_STORAGE_KEY = 'unsavedInfiniteWorldState';
         // --- Access State from Streamlit ---
         const allInitialObjects = window.ALL_INITIAL_OBJECTS || [];
+        const plotsMetadata = window.PLOTS_METADATA || []; // List of saved plot info
         const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
         const plotWidth = window.PLOT_WIDTH || 50.0;
+        const plotDepth = window.PLOT_DEPTH || 50.0; // Use plot depth
+        const groundMaterial = new THREE.MeshStandardMaterial({ // Reusable material
+             color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide
+        });
+        const placeholderGroundMaterial = new THREE.MeshStandardMaterial({ // Dimmer for placeholders
+             color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide
+        });
         function init() {
             scene.background = new THREE.Color(0xabcdef);
             const aspect = window.innerWidth / window.innerHeight;
+            camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 4000); // Increase far plane more
             camera.position.set(0, 15, 20);
             camera.lookAt(0, 0, 0);
             scene.add(camera);
             setupLighting();
+            setupInitialGround(); // Setup ground for existing plots ONLY initially
             setupPlayer();
             raycaster = new THREE.Raycaster();
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.body.appendChild(renderer.domElement);
+            loadInitialObjects();
+            restoreUnsavedState(); // Restore unsaved objects after initial load
             // Event Listeners
             document.addEventListener('mousemove', onMouseMove, false);
             window.addEventListener('resize', onWindowResize, false);
             document.addEventListener('keydown', onKeyDown);
             document.addEventListener('keyup', onKeyUp);
+            // Define global functions needed by Python
             window.teleportPlayer = teleportPlayer;
+            window.getSaveDataAndPosition = getSaveDataAndPosition; // Renamed JS function
             window.resetNewlyPlacedObjects = resetNewlyPlacedObjects;
+            console.log("Three.js Initialized. World ready.");
             animate();
         }
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
             const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
+            directionalLight.position.set(50, 150, 100); // Higher and angled light
             directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 4096; // Increase shadow map size
+            directionalLight.shadow.mapSize.height = 4096;
             directionalLight.shadow.camera.near = 0.5;
+            directionalLight.shadow.camera.far = 500;
+            // Dynamic frustum needed for large worlds, but keep wide for now
+            directionalLight.shadow.camera.left = -150;
+            directionalLight.shadow.camera.right = 150;
+            directionalLight.shadow.camera.top = 150;
+            directionalLight.shadow.camera.bottom = -150;
             directionalLight.shadow.bias = -0.001;
             scene.add(directionalLight);
         }
+        function setupInitialGround() {
+            // Create ground ONLY for plots defined in plotsMetadata
+            console.log(`Setting up initial ground for ${plotsMetadata.length} plots.`);
+            plotsMetadata.forEach(plot => {
+                createGroundPlane(plot.grid_x, plot.grid_z, false); // false = not a placeholder
+            });
+             // Create a small initial ground at 0,0 if no plots exist yet
+             if (plotsMetadata.length === 0) {
+                  createGroundPlane(0, 0, false);
+             }
+        }
+        // *** NEW: Function to create a ground plane for a specific grid cell ***
+        function createGroundPlane(gridX, gridZ, isPlaceholder) {
+            const gridKey = `${gridX}_${gridZ}`;
+            if (groundMeshes[gridKey]) return; // Don't recreate if it exists
+            console.log(`Creating ${isPlaceholder ? 'placeholder' : 'initial'} ground at ${gridX}, ${gridZ}`);
+            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;
+            // Position the center of the plane correctly
+            groundMesh.position.x = gridX * plotWidth + plotWidth / 2.0;
+            groundMesh.position.z = gridZ * plotDepth + plotDepth / 2.0;
             groundMesh.receiveShadow = true;
+            groundMesh.userData.gridKey = gridKey; // Store key for potential removal/update
             scene.add(groundMesh);
+            groundMeshes[gridKey] = groundMesh; // Store reference
+            if (isPlaceholder) {
+                 placeholderPlots.add(gridKey); // Track placeholders
+            }
         }
         function setupPlayer() { /* ... unchanged ... */
             const playerGeo = new THREE.CapsuleGeometry(0.4, 0.8, 4, 8);
             const playerMat = new THREE.MeshStandardMaterial({ color: 0x0000ff, roughness: 0.6 });
             playerMesh = new THREE.Mesh(playerGeo, playerMat);
+            playerMesh.position.set(plotWidth / 2, 0.4 + 0.8/2, plotDepth/2); // Start in center of 0,0 plot
+            playerMesh.castShadow = true; playerMesh.receiveShadow = true;
             scene.add(playerMesh);
         }
+        function loadInitialObjects() { /* ... unchanged, uses createAndPlaceObject ... */
             console.log(`Loading ${allInitialObjects.length} initial objects from Python.`);
+            allInitialObjects.forEach(objData => { createAndPlaceObject(objData, false); });
+            console.log("Finished loading initial objects.");
         }
+        function createAndPlaceObject(objData, isNewObject) { /* ... unchanged ... */
              let loadedObject = null;
              switch (objData.type) {
                  case "Simple House": loadedObject = createSimpleHouse(); break;
                  case "Tree": loadedObject = createTree(); break;
                  case "Fence Post": loadedObject = createFencePost(); break;
                  default: console.warn("Unknown object type in data:", objData.type); break;
              }
              if (loadedObject) {
                  if (objData.position && objData.position.x !== undefined) {
                      loadedObject.position.set(objData.position.x, objData.position.y, objData.position.z);
+                 } else if (objData.pos_x !== undefined) {
                       loadedObject.position.set(objData.pos_x, objData.pos_y, objData.pos_z);
                  }
+                 if (objData.rotation) {
                      loadedObject.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
+                 } else if (objData.rot_x !== undefined) {
                      loadedObject.rotation.set(objData.rot_x, objData.rot_y, objData.rot_z, objData.rot_order || 'XYZ');
                  }
                  loadedObject.userData.obj_id = objData.obj_id || loadedObject.userData.obj_id;
                  scene.add(loadedObject);
+                 if (isNewObject) { newlyPlacedObjects.push(loadedObject); }
+                 return loadedObject;
             }
             return null;
         }
+        function saveUnsavedState() { /* ... unchanged ... */
             try {
+                const stateToSave = newlyPlacedObjects.map(obj => ({ obj_id: obj.userData.obj_id, type: obj.userData.type, position: { x: obj.position.x, y: obj.position.y, z: obj.position.z }, rotation: { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order } }));
                 sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave));
                 console.log(`Saved ${stateToSave.length} unsaved objects to sessionStorage.`);
+            } catch (e) { console.error("Error saving state to sessionStorage:", e); }
         }
+        function restoreUnsavedState() { /* ... unchanged ... */
              try {
                 const savedState = sessionStorage.getItem(SESSION_STORAGE_KEY);
                 if (savedState) {
                     console.log("Found unsaved state in sessionStorage. Restoring...");
                     const objectsToRestore = JSON.parse(savedState);
                     if (Array.isArray(objectsToRestore)) {
+                         newlyPlacedObjects = []; let count = 0;
+                         objectsToRestore.forEach(objData => { if(createAndPlaceObject(objData, true)) { count++; } });
                          console.log(`Restored ${count} objects.`);
                     }
+                } else { console.log("No unsaved state found in sessionStorage."); }
+            } catch (e) { console.error("Error restoring state from sessionStorage:", e); sessionStorage.removeItem(SESSION_STORAGE_KEY); }
         }
+        function clearUnsavedState() { /* ... unchanged ... */
             sessionStorage.removeItem(SESSION_STORAGE_KEY);
+            newlyPlacedObjects = [];
             console.log("Cleared unsaved state from memory and sessionStorage.");
         }
+        function createObjectBase(type) { /* ... unchanged ... */
+             return { userData: { type: type, obj_id: THREE.MathUtils.generateUUID() } };
         }
+        function createSimpleHouse() { /* ... unchanged ... */
+            const base = createObjectBase("Simple House"); const group = new THREE.Group(); Object.assign(group, base);
+            const mat1=new THREE.MeshStandardMaterial({color:0xffccaa,roughness:0.8}), mat2=new THREE.MeshStandardMaterial({color:0xaa5533,roughness:0.7});
+            const m1=new THREE.Mesh(new THREE.BoxGeometry(2,1.5,2.5),mat1); m1.position.y=1.5/2;m1.castShadow=true;m1.receiveShadow=true;group.add(m1);
+            const m2=new THREE.Mesh(new THREE.ConeGeometry(1.8,1,4),mat2); m2.position.y=1.5+1/2;m2.rotation.y=Math.PI/4;m2.castShadow=true;m2.receiveShadow=true;group.add(m2); return group;
          }
+         function createTree() { /* ... unchanged ... */
+            const base=createObjectBase("Tree"); const group=new THREE.Group(); Object.assign(group,base);
+            const mat1=new THREE.MeshStandardMaterial({color:0x8B4513,roughness:0.9}), mat2=new THREE.MeshStandardMaterial({color:0x228B22,roughness:0.8});
+            const m1=new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.4,2,8),mat1); m1.position.y=1; m1.castShadow=true;m1.receiveShadow=true;group.add(m1);
+            const m2=new THREE.Mesh(new THREE.IcosahedronGeometry(1.2,0),mat2); m2.position.y=2.8; m2.castShadow=true;m2.receiveShadow=true;group.add(m2); return group;
          }
+         function createRock() { /* ... unchanged ... */
+             const base=createObjectBase("Rock"); const mat=new THREE.MeshStandardMaterial({color:0xaaaaaa,roughness:0.8,metalness:0.1});
+             const rock=new THREE.Mesh(new THREE.IcosahedronGeometry(0.7,0),mat); Object.assign(rock,base);
+             rock.position.y=0.35; rock.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, 0); rock.castShadow=true;rock.receiveShadow=true; return rock;
          }
+         function createFencePost() { /* ... unchanged ... */
+             const base=createObjectBase("Fence Post"); const mat=new THREE.MeshStandardMaterial({color:0xdeb887,roughness:0.9});
+             const post=new THREE.Mesh(new THREE.BoxGeometry(0.2,1.5,0.2),mat); Object.assign(post,base);
+             post.position.y=0.75; post.castShadow=true;post.receiveShadow=true; return post;
          }
         // --- Event Handlers ---
         function onMouseMove(event) { /* ... unchanged ... */
             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         }
+        function onDocumentClick(event) { // Place object and save state
+             if (selectedObjectType === "None") return;
+             // Determine ground mesh to intersect (could be multiple now)
+             const groundCandidates = Object.values(groundMeshes);
+             if (groundCandidates.length === 0) return; // No ground to place on
+             raycaster.setFromCamera(mouse, camera);
+             // Intersect ALL ground meshes
+             const intersects = raycaster.intersectObjects(groundCandidates);
+             if (intersects.length > 0) {
+                 // Intersect point is on the specific ground mesh clicked
+                 const intersectPoint = intersects[0].point;
+                 let newObjectToPlace = null;
+                 switch (selectedObjectType) { /* ... create object ... */
                     case "Simple House": newObjectToPlace = createSimpleHouse(); break;
                     case "Tree": newObjectToPlace = createTree(); break;
                     case "Rock": newObjectToPlace = createRock(); break;
                     case "Fence Post": newObjectToPlace = createFencePost(); break;
                     default: return;
+                 }
+                 if (newObjectToPlace) {
+                     newObjectToPlace.position.copy(intersectPoint);
+                     // Adjust Y position if needed based on object geometry origin
+                     // Base objects on y=0 in create functions for simplicity
+                     if(newObjectToPlace.geometry?.type.includes("Geometry")){ // Adjust Y so base is on ground
+                          newObjectToPlace.position.y += 0.01; // Slight offset above ground
+                     } else if (newObjectToPlace.type === "Group") {
+                          newObjectToPlace.position.y += 0.01; // Assume group base is near 0
+                     }
+                     scene.add(newObjectToPlace);
+                     newlyPlacedObjects.push(newObjectToPlace);
+                     saveUnsavedState(); // Save to sessionStorage immediately
+                     console.log(`Placed new ${selectedObjectType}. Total unsaved: ${newlyPlacedObjects.length}`);
+                 }
+             }
         }
         function onKeyDown(event) { keysPressed[event.code] = true; }
         function onKeyUp(event) { keysPressed[event.code] = false; }
         // --- Functions called by Python via streamlit-js-eval ---
+        function teleportPlayer(targetX, targetZ) { // Now accepts Z coordinate
+            console.log(`JS teleportPlayer called with targetX: ${targetX}, targetZ: ${targetZ}`);
             if (playerMesh) {
+                // Teleport near center of the target plot
+                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);
             } else { console.error("Player mesh not found for teleport."); }
         }
+        // *** UPDATED: Send player position along with save data ***
+        function getSaveDataAndPosition() {
+             console.log(`JS getSaveDataAndPosition called. Found ${newlyPlacedObjects.length} new objects.`);
              const objectsToSave = newlyPlacedObjects.map(obj => {
                  if (!obj.userData || !obj.userData.type) { return null; }
                  const rotation = { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order };
+                 return { // Send WORLD positions
+                     obj_id: obj.userData.obj_id, type: obj.userData.type,
                      position: { x: obj.position.x, y: obj.position.y, z: obj.position.z },
                      rotation: rotation
                  };
              }).filter(obj => obj !== null);
+             const playerPos = playerMesh ? { x: playerMesh.position.x, y: playerMesh.position.y, z: playerMesh.position.z } : {x:0, y:0, z:0};
+             const payload = {
+                 playerPosition: playerPos,
+                 objectsToSave: objectsToSave
+             };
+             console.log("Prepared payload for saving:", payload);
+             return JSON.stringify(payload); // Return as JSON string
         }
         function resetNewlyPlacedObjects() { // Called by Python AFTER successful save
         // --- Animation Loop ---
+        function updatePlayerMovement() {
+            if (!playerMesh) return;
+            const moveDirection = new THREE.Vector3(0, 0, 0);
+            // Basic WASD movement
+            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) {
+                moveDirection.normalize().multiplyScalar(playerSpeed);
+                // Apply movement relative to camera direction for better control
+                 const forward = new THREE.Vector3();
+                 camera.getWorldDirection(forward);
+                 forward.y = 0; // Project onto XZ plane
+                 forward.normalize();
+                 const right = new THREE.Vector3().crossVectors(camera.up, forward).normalize(); // Get right vector
+                 const worldMove = new THREE.Vector3();
+                 worldMove.add(forward.multiplyScalar(-moveDirection.z)); // W/S -> Forward/Backward
+                 worldMove.add(right.multiplyScalar(-moveDirection.x)); // A/D -> Left/Right
+                 worldMove.normalize().multiplyScalar(playerSpeed);
+                 playerMesh.position.add(worldMove);
+                 // Basic ground clamping
+                 playerMesh.position.y = Math.max(playerMesh.position.y, 0.4 + 0.8/2); // Adjust based on capsule base
+                 // *** ADDED: Check for ground expansion ***
+                 checkAndExpandGround();
+            }
         }
+        // *** NEW: Check if player is near edge and create placeholder ground ***
+        function checkAndExpandGround() {
+            if (!playerMesh) return;
+            const currentGridX = Math.floor(playerMesh.position.x / plotWidth);
+            const currentGridZ = Math.floor(playerMesh.position.z / plotDepth);
+            // Check surrounding cells (Manhattan distance 1)
+            for (let dx = -1; dx <= 1; dx++) {
+                 for (let dz = -1; dz <= 1; dz++) {
+                      if (dx === 0 && dz === 0) continue; // Skip current cell
+                      const checkX = currentGridX + dx;
+                      const checkZ = currentGridZ + dz;
+                      const gridKey = `${checkX}_${checkZ}`;
+                      // Check if this grid cell already has ground (initial or placeholder)
+                      if (!groundMeshes[gridKey]) {
+                           // Check if this grid cell corresponds to a SAVED plot (from metadata)
+                           const isSavedPlot = plotsMetadata.some(plot => plot.grid_x === checkX && plot.grid_z === checkZ);
+                           // If it's NOT a saved plot, create a placeholder
+                           if (!isSavedPlot) {
+                                createGroundPlane(checkX, checkZ, true); // true = is placeholder
+                           }
+                           // If it IS a saved plot but somehow missing ground (error?), recreate it?
+                           // else { createGroundPlane(checkX, checkZ, false); } // Optional robustness
+                      }
+                 }
+            }
+        }
         function updateCamera() { /* ... unchanged ... */
             if (!playerMesh) return;
+            const offset = new THREE.Vector3(0, 15, 20); // Fixed offset for now
             const targetPosition = playerMesh.position.clone().add(offset);
             camera.position.lerp(targetPosition, 0.08);
             camera.lookAt(playerMesh.position);
         function animate() {
             requestAnimationFrame(animate);
+            updatePlayerMovement(); // Includes ground check now
             updateCamera();
             renderer.render(scene, camera);
         }