Update app.py

app.py

@@ -1,39 +1,87 @@
 # app.py
 import streamlit as st
 import streamlit.components.v1 as components
-import os # Used to construct the file path reliably
+import os
+import json # To safely embed the python variable into JS
 
-# --- 1. Set Page Configuration ---
-# This must be the first Streamlit command called
+# --- 1. Set Page Configuration (Set first!) ---
 st.set_page_config(
-    page_title="Three.js Game Viewer",
-    layout="wide"  # Set the layout to wide mode
+    page_title="Three.js Editor",
+    layout="wide"  # Use the full screen width
 )
 
-st.header("🎮 Basic Three.js Game Embed")
-st.caption("Displays the content of index.html below.")
+# --- Initialize Session State ---
+if 'selected_object' not in st.session_state:
+    st.session_state.selected_object = 'None' # Default selection
 
-# --- 2. Define the path to your HTML file ---
-# Assumes index.html is in the same directory as app.py
+# --- Sidebar Controls ---
+with st.sidebar:
+    st.title("🛠️ Controls & State")
+    st.caption("Select an object type and click on the ground in the main view to place it.")
+
+    # Define available object types (keys should ideally match JS functions/identifiers)
+    object_types = ["None", "Simple House", "Tree", "Rock", "Fence Post"] # Add more as needed
+
+    # Selectbox to choose object type - this updates session_state on change
+    selected = st.selectbox(
+        "Select Object to Place:",
+        options=object_types,
+        key='selected_object' # Link to session state key
+    )
+
+    st.write("---")
+    st.header("Current State:")
+    st.write(f"Selected Object Type: **{st.session_state.selected_object}**")
+    # Add more state tracking here later if needed
+    st.info("Use WASD/Arrows in the main view if player movement is enabled in JS.")
+
+
+# --- Main Area for the 3D View ---
+st.header("🏗️ Three.js Primitive Builder")
+
+# --- Load and Prepare HTML ---
 html_file_path = 'index.html'
 
-# --- 3. Read the HTML file ---
 try:
     with open(html_file_path, 'r', encoding='utf-8') as f:
-        html_content = f.read()
+        html_template = f.read()
+
+    # --- Inject Python state into JavaScript ---
+    # We'll add a script tag to set a global JS variable before the main script runs
+    js_injection_script = f"""
+<script>
+    // Set this global variable based on Streamlit state BEFORE the main script runs
+    window.SELECTED_OBJECT_TYPE = {json.dumps(st.session_state.selected_object)};
+    console.log("Streamlit selected object:", window.SELECTED_OBJECT_TYPE);
+</script>
+"""
+    # Insert the injection script just before the closing </head> or starting <script type="module">
+    # A simple approach: find the main script tag and insert before it.
+    # More robust: add a placeholder like in index.html
+    # For now, let's find the module script tag:
+    module_script_tag = '<script type="module">'
+    if module_script_tag in html_template:
+         # Inject our script right before the main module script
+         html_content_with_state = html_template.replace(
+             module_script_tag,
+             js_injection_script + "\n" + module_script_tag,
+             1 # Replace only the first occurrence
+        )
+    else:
+         # Fallback: inject before closing head (less ideal if script needs DOM)
+         html_content_with_state = html_template.replace('</head>', js_injection_script + '\n</head>', 1)
 
-    # --- 4. Embed the HTML into the Streamlit app ---
-    # Adjust the height as needed for your specific game view
+
+    # --- Embed HTML Component ---
     components.html(
-        html_content,
-        height=700, # You might need to adjust this value
-        scrolling=False # Set to True if your HTML content needs scrolling
+        html_content_with_state,
+        height=750, # Adjust height as needed
+        scrolling=False
     )
 
-    st.sidebar.info("Use WASD or Arrow Keys inside the frame above to move the cube.")
-
 except FileNotFoundError:
     st.error(f"Error: Could not find the file '{html_file_path}'.")
-    st.warning("Please make sure the `index.html` file (containing the Three.js code) is in the same directory as this `app.py` script.")
+    st.warning("Please make sure `index.html` is in the same directory as `app.py`.")
 except Exception as e:
-    st.error(f"An error occurred while reading or embedding the HTML file: {e}")
+    st.error(f"An error occurred: {e}")
+    st.exception(e) # Show full traceback for debugging