Update index.html

index.html

@@ -26,20 +26,15 @@
 
         let scene, camera, renderer;
         let raycaster, mouse;
-        let socket = null;
-        let connectionRetries = 0;
-        const MAX_RETRIES = 5;
+        let worldObjects = new Map();
+        let groundMeshes = {};
 
         // Access State from Streamlit
         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";
         const plotWidth = window.PLOT_WIDTH || 50.0;
         const plotDepth = window.PLOT_DEPTH || 50.0;
-
-        // World State
-        const worldObjects = new Map();
-        const groundMeshes = {};
+        const worldState = window.WORLD_STATE || { objects: {}, players: {} };
 
         // Materials
         const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide });
@@ -78,8 +73,6 @@
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.body.appendChild(renderer.domElement);
 
-            connectWebSocket();
-
             document.addEventListener('mousemove', onMouseMove, false);
             document.addEventListener('click', onDocumentClick, false);
             document.addEventListener('contextmenu', onRightClick, false);
@@ -87,7 +80,10 @@
 
             window.updateSelectedObjectType = updateSelectedObjectType;
 
-            console.log(`Three.js Initialized for user: ${myUsername}. Connecting to ${websocketUrl}...`);
+            // Initialize scene with world state
+            loadWorldState();
+
+            console.log(`Three.js Initialized for user: ${myUsername}`);
             animate();
         }
 
@@ -130,89 +126,17 @@
             return groundMesh;
         }
 
-        function connectWebSocket() {
-            console.log("Attempting WebSocket connection...");
-            socket = new WebSocket(websocketUrl);
-
-            socket.onopen = () => {
-                console.log("WebSocket connection established.");
-                connectionRetries = 0;
-            };
-
-            socket.onmessage = (event) => {
-                try {
-                    const data = JSON.parse(event.data);
-                    console.log("WebSocket message received:", data);
-                    handleWebSocketMessage(data);
-                } catch (e) {
-                    console.error("Failed to parse WebSocket message:", event.data, e);
-                }
-            };
-
-            socket.onerror = (error) => {
-                console.error("WebSocket error:", error);
-            };
-
-            socket.onclose = (event) => {
-                console.warn(`WebSocket connection closed. Code: ${event.code}, Reason: ${event.reason}. Clean: ${event.wasClean}`);
-                socket = null;
-                if (connectionRetries < MAX_RETRIES) {
-                    connectionRetries++;
-                    const delay = Math.pow(2, connectionRetries) * 1000;
-                    console.log(`Attempting reconnection in ${delay / 1000}s...`);
-                    setTimeout(connectWebSocket, delay);
-                } else {
-                    console.error("WebSocket reconnection failed after max retries.");
-                }
-            };
-        }
-
-        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);
+        function loadWorldState() {
+            clearWorldObjects();
+            const objects = worldState.objects || {};
+            for (const obj_id in objects) {
+                createAndPlaceObject(objects[obj_id], false);
             }
-        }
-
-        function handleWebSocketMessage(data) {
-            const { type, payload } = data;
-
-            switch (type) {
-                case "initial_state":
-                    console.log(`Received initial world state with ${Object.keys(payload).length} objects.`);
-                    clearWorldObjects();
-                    for (const obj_id in payload) {
-                        createAndPlaceObject(payload[obj_id], false);
-                    }
-                    break;
-                case "object_placed":
-                    console.log(`Object placed by ${payload.username}:`, payload.object_data);
-                    createAndPlaceObject(payload.object_data, false);
-                    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})`);
-                    break;
-                case "user_leave":
-                    console.log(`User left: ${payload.username} (${payload.id})`);
-                    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}`);
-                    break;
-                case "tool_selected":
-                    console.log(`Tool selected by ${payload.username}: ${payload.tool_type}`);
-                    selectedObjectType = payload.tool_type;
-                    break;
-                default:
-                    console.warn("Received unknown WebSocket message type:", type);
+            // Initialize player positions (visualize as markers)
+            const players = worldState.players || {};
+            for (const username in players) {
+                const pos = players[username].position;
+                createPlayerMarker(username, pos);
             }
         }
 
@@ -222,17 +146,22 @@
                 scene.remove(mesh);
             }
             worldObjects.clear();
+            // Clear player markers
+            scene.children.forEach(child => {
+                if (child.userData.isPlayerMarker) {
+                    scene.remove(child);
+                }
+            });
         }
 
-        function removeObjectById(obj_id) {
-            if (worldObjects.has(obj_id)) {
-                const mesh = worldObjects.get(obj_id);
-                scene.remove(mesh);
-                worldObjects.delete(obj_id);
-                console.log(`Removed object ${obj_id} from scene.`);
-            } else {
-                console.warn(`Attempted to remove non-existent object ID: ${obj_id}`);
-            }
+        function createPlayerMarker(username, position) {
+            const geometry = new THREE.SphereGeometry(0.3, 8, 8);
+            const material = new THREE.MeshBasicMaterial({ color: username === myUsername ? 0x0000ff : 0xff0000 });
+            const marker = new THREE.Mesh(geometry, material);
+            marker.position.set(position.x, position.y + 0.5, position.z);
+            marker.userData.isPlayerMarker = true;
+            marker.userData.username = username;
+            scene.add(marker);
         }
 
         function createAndPlaceObject(objData, isNewlyPlacedLocally) {
@@ -590,10 +519,11 @@
 
                 createAndPlaceObject(newObjData, true);
 
-                sendWebSocketMessage("place_object", {
-                    username: myUsername,
-                    object_data: newObjData
-                });
+                // Send place action to Streamlit
+                window.parent.postMessage({
+                    type: 'place_object',
+                    payload: { username: myUsername, object_data: newObjData }
+                }, '*');
             }
         }
 
@@ -605,10 +535,22 @@
             if (intersects.length > 0) {
                 const obj_id = intersects[0].object.userData.obj_id;
                 console.log(`Deleting object ${obj_id}`);
-                sendWebSocketMessage("delete_object", {
-                    username: myUsername,
-                    obj_id: obj_id
-                });
+                removeObjectById(obj_id);
+                window.parent.postMessage({
+                    type: 'delete_object',
+                    payload: { username: myUsername, obj_id: obj_id }
+                }, '*');
+            }
+        }
+
+        function removeObjectById(obj_id) {
+            if (worldObjects.has(obj_id)) {
+                const mesh = worldObjects.get(obj_id);
+                scene.remove(mesh);
+                worldObjects.delete(obj_id);
+                console.log(`Removed object ${obj_id} from scene.`);
+            } else {
+                console.warn(`Attempted to remove non-existent object ID: ${obj_id}`);
             }
         }
 
@@ -628,6 +570,16 @@
             renderer.render(scene, camera);
         }
 
+        // Listen for messages from Streamlit
+        window.addEventListener('message', (event) => {
+            const data = event.data;
+            if (data.type === 'place_object') {
+                createAndPlaceObject(data.payload.object_data, false);
+            } else if (data.type === 'delete_object') {
+                removeObjectById(data.payload.obj_id);
+            }
+        });
+
         init();
     </script>
 </body>