StreamlitScroller

Running

App Files Files Community

awacke1 commited on 6 days ago

Commit

5b479a3

verified ·

1 Parent(s): cc49b29

Update app.py

Browse files

Files changed (1) hide show

app.py +277 -440

app.py CHANGED Viewed

@@ -1,441 +1,278 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Three.js Infinite World</title>
-    <style>
-        body { margin: 0; overflow: hidden; }
-        canvas { display: block; }
-    </style>
-    <!-- New: Polling function for game state -->
-    <script>
-        // Poll the shared game state every 5 seconds (for demonstration)
-        function pollGameState() {
-            console.log("Polling updated game state:", window.GAME_STATE);
-            // Here you could update the scene based on the new state.
         }
-        setInterval(pollGameState, 5000);
-    </script>
-</head>
-<body>
-    <script type="importmap">
-        {
-            "imports": {
-                "three": "https://unpkg.com/[email protected]/build/three.module.js",
-                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
-            }
-        }
-    </script>
-    <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();
-        const groundMeshes = {}; // Store ground mesh references
-        // --- Session Storage Key ---
-        const SESSION_STORAGE_KEY = 'unsavedInfiniteWorldState';
-        // --- Injected State from Streamlit ---
-        const allInitialObjects = window.ALL_INITIAL_OBJECTS || [];
-        const plotsMetadata = window.PLOTS_METADATA || [];
-        const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
-        const plotWidth = window.PLOT_WIDTH || 50.0;
-        const plotDepth = window.PLOT_DEPTH || 50.0;
-        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
-        });
-        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, 4000);
-            camera.position.set(0, 15, 20);
-            camera.lookAt(0, 0, 0);
-            scene.add(camera);
-            setupLighting();
-            setupInitialGround();
-            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);
-            loadInitialObjects();
-            restoreUnsavedState();
-            // Event Listeners
-            document.addEventListener('mousemove', onMouseMove, false);
-            document.addEventListener('click', onDocumentClick, false);
-            window.addEventListener('resize', onWindowResize, false);
-            document.addEventListener('keydown', onKeyDown);
-            document.addEventListener('keyup', onKeyUp);
-            // Define functions callable by Streamlit
-            window.teleportPlayer = teleportPlayer;
-            window.getSaveDataAndPosition = getSaveDataAndPosition;
-            window.resetNewlyPlacedObjects = resetNewlyPlacedObjects;
-            console.log("Three.js Initialized. World ready.");
-            animate();
-        }
-        function setupLighting() {
-            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);
-            directionalLight.castShadow = true;
-            directionalLight.shadow.mapSize.width = 4096;
-            directionalLight.shadow.mapSize.height = 4096;
-            directionalLight.shadow.camera.near = 0.5;
-            directionalLight.shadow.camera.far = 500;
-            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() {
-            console.log(`Setting up initial ground for ${plotsMetadata.length} plots.`);
-            plotsMetadata.forEach(plot => {
-                createGroundPlane(plot.grid_x, plot.grid_z, false);
-            });
-            if (plotsMetadata.length === 0) {
-                createGroundPlane(0, 0, false);
-            }
-        }
-        function createGroundPlane(gridX, gridZ, isPlaceholder) {
-            const gridKey = `${gridX}_${gridZ}`;
-            if (groundMeshes[gridKey]) return;
-            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;
-            groundMesh.position.x = gridX * plotWidth + plotWidth / 2.0;
-            groundMesh.position.z = gridZ * plotDepth + plotDepth / 2.0;
-            groundMesh.receiveShadow = true;
-            groundMesh.userData.gridKey = gridKey;
-            scene.add(groundMesh);
-            groundMeshes[gridKey] = groundMesh;
-            if (isPlaceholder) placeholderPlots.add(gridKey);
-        }
-        function setupPlayer() {
-            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);
-            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); });
-            console.log("Finished loading initial objects.");
-        }
-        function createAndPlaceObject(objData, isNewObject) {
-            let loadedObject = null;
-            switch (objData.type) {
-                case "Simple House": loadedObject = createSimpleHouse(); break;
-                case "Tree": loadedObject = createTree(); break;
-                case "Rock": loadedObject = createRock(); 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() {
-            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)) {
-                        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() {
-            sessionStorage.removeItem(SESSION_STORAGE_KEY);
-            newlyPlacedObjects = [];
-            console.log("Cleared unsaved state from memory and sessionStorage.");
-        }
-        function createObjectBase(type) {
-            return { userData: { type: type, obj_id: THREE.MathUtils.generateUUID() } };
-        }
-        function createSimpleHouse() {
-            const base = createObjectBase("Simple House");
-            const group = new THREE.Group();
-            Object.assign(group, base);
-            const mat1 = new THREE.MeshStandardMaterial({color:0xffccaa, roughness:0.8});
-            const 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() {
-            const base = createObjectBase("Tree");
-            const group = new THREE.Group();
-            Object.assign(group, base);
-            const mat1 = new THREE.MeshStandardMaterial({color:0x8B4513, roughness:0.9});
-            const 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() {
-            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() {
-            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;
-        }
-        function onMouseMove(event) {
-            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-        }
-        function onDocumentClick(event) {
-            if (selectedObjectType === "None") 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;
-                let newObjectToPlace = null;
-                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) {
-                    newObjectToPlace.position.copy(intersectPoint);
-                    newObjectToPlace.position.y += 0.01;
-                    scene.add(newObjectToPlace);
-                    newlyPlacedObjects.push(newObjectToPlace);
-                    saveUnsavedState();
-                    console.log(`Placed new ${selectedObjectType}. Total unsaved: ${newlyPlacedObjects.length}`);
-                }
-            }
-        }
-        function onKeyDown(event) { keysPressed[event.code] = true; }
-        function onKeyUp(event) { keysPressed[event.code] = false; }
-        function teleportPlayer(targetX, targetZ) {
-            console.log(`JS teleportPlayer called with targetX: ${targetX}, targetZ: ${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 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 {
-                    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);
-        }
-        function resetNewlyPlacedObjects() {
-            console.log(`JS resetNewlyPlacedObjects called.`);
-            clearUnsavedState();
-        }
-        function updatePlayerMovement() {
-            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);
-                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.4 + 0.8/2);
-                checkAndExpandGround();
-            }
-        }
-        function checkAndExpandGround() {
-            if (!playerMesh) return;
-            const currentGridX = Math.floor(playerMesh.position.x / plotWidth);
-            const currentGridZ = Math.floor(playerMesh.position.z / plotDepth);
-            for (let dx = -1; dx <= 1; dx++) {
-                for (let dz = -1; dz <= 1; dz++) {
-                    if (dx === 0 && dz === 0) continue;
-                    const checkX = currentGridX + dx;
-                    const checkZ = currentGridZ + dz;
-                    const gridKey = `${checkX}_${checkZ}`;
-                    if (!groundMeshes[gridKey]) {
-                        const isSavedPlot = plotsMetadata.some(plot => plot.grid_x === checkX && plot.grid_z === checkZ);
-                        if (!isSavedPlot) {
-                            createGroundPlane(checkX, checkZ, true);
-                        }
-                    }
-                }
-            }
-        }
-        function updateCamera() {
-            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);
-        }
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-        function animate() {
-            requestAnimationFrame(animate);
-            updatePlayerMovement();
-            updateCamera();
-            renderer.render(scene, camera);
-        }
-        init();
-    </script>
-</body>
-</html>

+# app.py
+import streamlit as st
+import streamlit.components.v1 as components
+import os
+import json
+import pandas as pd
+import uuid
+import math
+import time
+# Import our GameState class
+from gamestate import GameState
+# --- Constants ---
+SAVE_DIR = "saved_worlds"
+PLOT_WIDTH = 50.0  # Width of each plot in 3D space
+PLOT_DEPTH = 50.0  # Depth of each plot
+CSV_COLUMNS = ['obj_id', 'type', 'pos_x', 'pos_y', 'pos_z', 'rot_x', 'rot_y', 'rot_z', 'rot_order']
+# --- Ensure Save Directory Exists ---
+os.makedirs(SAVE_DIR, exist_ok=True)
+@st.cache_data(ttl=3600)
+def load_plot_metadata():
+    """Scans SAVE_DIR for plot files and returns metadata."""
+    plots = []
+    try:
+        plot_files = [f for f in os.listdir(SAVE_DIR) if f.endswith(".csv") and f.startswith("plot_X")]
+    except FileNotFoundError:
+        st.error(f"Save directory '{SAVE_DIR}' not found.")
+        return []
+    except Exception as e:
+        st.error(f"Error listing save directory '{SAVE_DIR}': {e}")
+        return []
+    parsed_plots = []
+    for filename in plot_files:
+        try:
+            parts = filename[:-4].split('_')  # Remove .csv
+            grid_x = int(parts[1][1:])  # After 'X'
+            grid_z = int(parts[2][1:])  # After 'Z'
+            plot_name = " ".join(parts[3:]) if len(parts) > 3 else f"Plot ({grid_x},{grid_z})"
+            parsed_plots.append({
+                'id': filename[:-4],
+                'filename': filename,
+                'grid_x': grid_x,
+                'grid_z': grid_z,
+                'name': plot_name,
+                'x_offset': grid_x * PLOT_WIDTH,
+                'z_offset': grid_z * PLOT_DEPTH
+            })
+        except (IndexError, ValueError):
+            st.warning(f"Could not parse grid coordinates from filename: {filename}. Skipping.")
+            continue
+    parsed_plots.sort(key=lambda p: (p['grid_x'], p['grid_z']))
+    return parsed_plots
+def load_plot_objects(filename, x_offset, z_offset):
+    """Loads objects from a CSV file and applies world offsets."""
+    file_path = os.path.join(SAVE_DIR, filename)
+    objects = []
+    try:
+        df = pd.read_csv(file_path)
+        if not all(col in df.columns for col in ['type', 'pos_x', 'pos_y', 'pos_z']):
+            st.warning(f"CSV '{filename}' missing essential columns. Skipping.")
+            return []
+        df['obj_id'] = df.get('obj_id', pd.Series([str(uuid.uuid4()) for _ in range(len(df))]))
+        for col, default in [('rot_x', 0.0), ('rot_y', 0.0), ('rot_z', 0.0), ('rot_order', 'XYZ')]:
+            if col not in df.columns:
+                df[col] = default
+        for _, row in df.iterrows():
+            obj_data = row.to_dict()
+            obj_data['pos_x'] += x_offset
+            obj_data['pos_z'] += z_offset
+            objects.append(obj_data)
+        return objects
+    except FileNotFoundError:
+        st.error(f"File not found during object load: {filename}")
+        return []
+    except pd.errors.EmptyDataError:
+        return []
+    except Exception as e:
+        st.error(f"Error loading objects from {filename}: {e}")
+        return []
+def save_plot_data(filename, objects_data_list, plot_x_offset, plot_z_offset):
+    """Saves object data list to a CSV file, making positions relative to the plot origin."""
+    file_path = os.path.join(SAVE_DIR, filename)
+    relative_objects = []
+    if not isinstance(objects_data_list, list):
+        st.error("Invalid data format received for saving (expected a list).")
+        return False
+    for obj in objects_data_list:
+        pos = obj.get('position', {})
+        rot = obj.get('rotation', {})
+        obj_type = obj.get('type', 'Unknown')
+        obj_id = obj.get('obj_id', str(uuid.uuid4()))
+        if not all(k in pos for k in ['x', 'y', 'z']) or obj_type == 'Unknown':
+            print(f"Skipping malformed object during save prep: {obj}")
+            continue
+        relative_obj = {
+            'obj_id': obj_id, 'type': obj_type,
+            'pos_x': pos.get('x', 0.0) - plot_x_offset,
+            'pos_y': pos.get('y', 0.0),
+            'pos_z': pos.get('z', 0.0) - plot_z_offset,
+            'rot_x': rot.get('_x', 0.0), 'rot_y': rot.get('_y', 0.0),
+            'rot_z': rot.get('_z', 0.0), 'rot_order': rot.get('_order', 'XYZ')
         }
+        relative_objects.append(relative_obj)
+    try:
+        df = pd.DataFrame(relative_objects, columns=CSV_COLUMNS)
+        df.to_csv(file_path, index=False)
+        st.success(f"Saved {len(relative_objects)} objects to {filename}")
+        return True
+    except Exception as e:
+        st.error(f"Failed to save plot data to {filename}: {e}")
+        return False
+# --- Initialize GameState Singleton ---
+@st.cache_resource
+def get_game_state():
+    # This instance is shared across all sessions and reruns.
+    return GameState(save_dir=SAVE_DIR, csv_filename="world_state.csv")
+game_state = get_game_state()
+# --- Page Config ---
+st.set_page_config(page_title="Infinite World Builder", layout="wide")
+# --- Session State Initialization ---
+if 'selected_object' not in st.session_state:
+    st.session_state.selected_object = 'None'
+if 'new_plot_name' not in st.session_state:
+    st.session_state.new_plot_name = ""
+if 'js_save_data_result' not in st.session_state:
+    st.session_state.js_save_data_result = None
+plots_metadata = load_plot_metadata()
+all_initial_objects = []
+for plot in plots_metadata:
+    all_initial_objects.extend(load_plot_objects(plot['filename'], plot['x_offset'], plot['z_offset']))
+# --- Sidebar ---
+with st.sidebar:
+    st.title("🏗️ World Controls")
+    st.header("Navigation (Plots)")
+    st.caption("Click to teleport player to a plot.")
+    max_cols = 2
+    cols = st.columns(max_cols)
+    col_idx = 0
+    sorted_plots_for_nav = sorted(plots_metadata, key=lambda p: (p['grid_x'], p['grid_z']))
+    for plot in sorted_plots_for_nav:
+        button_label = f"➡️ {plot.get('name', plot['id'])} ({plot['grid_x']},{plot['grid_z']})"
+        if cols[col_idx].button(button_label, key=f"nav_{plot['id']}"):
+            target_x = plot['x_offset']
+            target_z = plot['z_offset']
+            try:
+                js_code = f"teleportPlayer({target_x + PLOT_WIDTH/2}, {target_z + PLOT_DEPTH/2});"
+                from streamlit_js_eval import streamlit_js_eval
+                streamlit_js_eval(js_code=js_code, key=f"teleport_{plot['id']}")
+            except Exception as e:
+                st.error(f"Failed to send teleport command: {e}")
+        col_idx = (col_idx + 1) % max_cols
+    st.markdown("---")
+    st.header("Place Objects")
+    object_types = ["None", "Simple House", "Tree", "Rock", "Fence Post"]
+    current_object_index = object_types.index(st.session_state.selected_object) if st.session_state.selected_object in object_types else 0
+    selected_object_type_widget = st.selectbox("Select Object:", options=object_types, index=current_object_index, key="selected_object_widget")
+    if selected_object_type_widget != st.session_state.selected_object:
+         st.session_state.selected_object = selected_object_type_widget
+    st.markdown("---")
+    st.header("Save Work")
+    st.caption("Saves newly placed objects to the current plot. A new plot file is created for new areas.")
+    if st.button("💾 Save Current Work", key="save_button"):
+        from streamlit_js_eval import streamlit_js_eval
+        js_get_data_code = "getSaveDataAndPosition();"
+        streamlit_js_eval(js_code=js_get_data_code, key="js_save_processor")
+        st.rerun()
+# --- Process Save Data from JS ---
+save_data_from_js = st.session_state.get("js_save_processor", None)
+if save_data_from_js is not None:
+    st.info("Received save data from client...")
+    save_processed_successfully = False
+    try:
+        payload = json.loads(save_data_from_js) if isinstance(save_data_from_js, str) else save_data_from_js
+        if isinstance(payload, dict) and 'playerPosition' in payload and 'objectsToSave' in payload:
+            player_pos = payload['playerPosition']
+            objects_to_save = payload['objectsToSave']
+            if isinstance(objects_to_save, list):
+                target_grid_x = math.floor(player_pos.get('x', 0.0) / PLOT_WIDTH)
+                target_grid_z = math.floor(player_pos.get('z', 0.0) / PLOT_DEPTH)
+                target_filename = f"plot_X{target_grid_x}_Z{target_grid_z}.csv"
+                target_plot_x_offset = target_grid_x * PLOT_WIDTH
+                target_plot_z_offset = target_grid_z * PLOT_DEPTH
+                st.write(f"Attempting to save plot: {target_filename} (Player at: x={player_pos.get('x', 0):.1f}, z={player_pos.get('z', 0):.1f})")
+                is_new_plot_file = not os.path.exists(os.path.join(SAVE_DIR, target_filename))
+                save_ok = save_plot_data(target_filename, objects_to_save, target_plot_x_offset, target_plot_z_offset)
+                if save_ok:
+                    load_plot_metadata.clear()  # Clear cache so metadata reloads
+                    try:
+                        from streamlit_js_eval import streamlit_js_eval
+                        streamlit_js_eval(js_code="resetNewlyPlacedObjects();", key="reset_js_state")
+                    except Exception as js_e:
+                        st.warning(f"Could not reset JS state after save: {js_e}")
+                    if is_new_plot_file:
+                        st.success(f"New plot created and saved: {target_filename}")
+                    else:
+                        st.success(f"Updated existing plot: {target_filename}")
+                    # Update shared game state with new objects from this session
+                    game_state.update_state(objects_to_save)
+                    save_processed_successfully = True
+                else:
+                    st.error(f"Failed to save plot data to file: {target_filename}")
+            else:
+                st.error("Invalid 'objectsToSave' format received (expected list).")
+        else:
+            st.error("Invalid save payload structure received from client.")
+    except json.JSONDecodeError:
+        st.error("Failed to decode save data from client.")
+    except Exception as e:
+        st.error(f"Error processing save: {e}")
+    st.session_state.js_save_processor = None
+    if save_processed_successfully:
+        st.rerun()
+# --- Main Area ---
+st.header("Infinite Shared 3D World")
+st.caption("Move to empty areas to expand the world. Use the sidebar 'Save' to store your work.")
+# Inject state into JS—including the shared GAME_STATE from our GameState singleton.
+injected_state = {
+    "ALL_INITIAL_OBJECTS": all_initial_objects,
+    "PLOTS_METADATA": plots_metadata,
+    "SELECTED_OBJECT_TYPE": st.session_state.selected_object,
+    "PLOT_WIDTH": PLOT_WIDTH,
+    "PLOT_DEPTH": PLOT_DEPTH,
+    "GAME_STATE": game_state.get_state()
+}
+html_file_path = 'index.html'
+html_content_with_state = None
+try:
+    with open(html_file_path, 'r', encoding='utf-8') as f:
+        html_template = f.read()
+    js_injection_script = f"""
+<script>
+    window.ALL_INITIAL_OBJECTS = {json.dumps(injected_state["ALL_INITIAL_OBJECTS"])};
+    window.PLOTS_METADATA = {json.dumps(injected_state["PLOTS_METADATA"])};
+    window.SELECTED_OBJECT_TYPE = {json.dumps(injected_state["SELECTED_OBJECT_TYPE"])};
+    window.PLOT_WIDTH = {json.dumps(injected_state["PLOT_WIDTH"])};
+    window.PLOT_DEPTH = {json.dumps(injected_state["PLOT_DEPTH"])};
+    window.GAME_STATE = {json.dumps(injected_state["GAME_STATE"])};
+    console.log("Streamlit State Injected:", {{
+        selectedObject: window.SELECTED_OBJECT_TYPE,
+        initialObjectsCount: window.ALL_INITIAL_OBJECTS ? window.ALL_INITIAL_OBJECTS.length : 0,
+        plotCount: window.PLOTS_METADATA ? window.PLOTS_METADATA.length : 0,
+        gameStateObjects: window.GAME_STATE ? window.GAME_STATE.length : 0
+    }});
+</script>
+"""
+    html_content_with_state = html_template.replace('</head>', js_injection_script + '\n</head>', 1)
+    components.html(html_content_with_state, height=750, scrolling=False)
+except FileNotFoundError:
+    st.error(f"CRITICAL ERROR: Could not find the file '{html_file_path}'.")
+    st.warning(f"Make sure `{html_file_path}` is in the same directory as `app.py` and `{SAVE_DIR}` exists.")
+except Exception as e:
+    st.error(f"An critical error occurred during HTML preparation or component rendering: {e}")
+    st.exception(e)