Update app.py

app.py

@@ -26,7 +26,9 @@ import pandas as pd
 # Patch asyncio for nesting
 nest_asyncio.apply()
 
-# Page Config
+# -----------------------------
+# Page and Game Configuration
+# -----------------------------
 st.set_page_config(
     layout="wide",
     page_title="Rocky Mountain Quest 3D 🏔️🎮",
@@ -39,7 +41,6 @@ st.set_page_config(
     }
 )
 
-# Game Config
 GAME_NAME = "Rocky Mountain Quest 3D 🏔️🎮"
 START_LOCATION = "Trailhead Camp ⛺"
 EDGE_TTS_VOICES = [
@@ -67,7 +68,9 @@ PRAIRIE_LOCATIONS = {
     "Wyoming Spring Creek": (41.6666, -106.6666)
 }
 
-# Directories and Files
+# -----------------------------
+# Directories and File Paths
+# -----------------------------
 for d in ["chat_logs", "audio_logs"]:
     os.makedirs(d, exist_ok=True)
 CHAT_DIR = "chat_logs"
@@ -76,104 +79,46 @@ STATE_FILE = "user_state.txt"
 CHAT_FILE = os.path.join(CHAT_DIR, "quest_log.md")
 GAME_STATE_FILE = "game_state.json"
 
-# Cached Game State as "Resource"
-@st.cache_resource
-def load_game_state(_timestamp):
-    if os.path.exists(GAME_STATE_FILE):
-        with open(GAME_STATE_FILE, 'r') as f:
-            state = json.load(f)
-    else:
-        state = {
-            "players": {},
-            "treasures": [
-                {"id": str(uuid.uuid4()), "x": random.uniform(-40, 40), "z": random.uniform(-40, 40)}
-                for _ in range(5)
-            ],
-            "world_objects": [],
-            "history": []
-        }
-        with open(GAME_STATE_FILE, 'w') as f:
-            json.dump(state, f)
-    return state
-
-def update_game_state(state):
-    state["timestamp"] = os.path.getmtime(GAME_STATE_FILE) if os.path.exists(GAME_STATE_FILE) else time.time()
-    with open(GAME_STATE_FILE, 'w') as f:
-        json.dump(state, f)
-    load_game_state.clear()
-    return load_game_state(time.time())
-
-def reset_game_state():
-    state = {
-        "players": {},
-        "treasures": [
-            {"id": str(uuid.uuid4()), "x": random.uniform(-40, 40), "z": random.uniform(-40, 40)}
-            for _ in range(5)
-        ],
-        "world_objects": [],
-        "history": []
-    }
-    return update_game_state(state)
-
-# Precompute player's attributes for the 3D scene.
-player_color = None
-player_shape = None
-
-# Define PlayerAgent class
-class PlayerAgent:
-    def __init__(self, username, char_data):
-        self.username = username
-        self.x = random.uniform(-20, 20)
-        self.z = random.uniform(-40, 40)
-        self.color = char_data["color"]
-        self.shape = char_data["shape"]
-        self.score = 0
-        self.treasures = 0
-        self.last_active = time.time()
-        self.voice = char_data["voice"]
-
-    def to_dict(self):
-        return {
-            "username": self.username,
-            "x": self.x,
-            "z": self.z,
-            "color": self.color,
-            "shape": self.shape,
-            "score": self.score,
-            "treasures": self.treasures,
-            "last_active": self.last_active
-        }
-
-    def update_from_message(self, message):
-        if '|' in message:
-            _, content = message.split('|', 1)
-            if content.startswith("MOVE:"):
-                _, x, z = content.split(":")
-                self.x, self.z = float(x), float(z)
-                self.last_active = time.time()
-            elif content.startswith("SCORE:"):
-                self.score = int(content.split(":")[1])
-                self.last_active = time.time()
-            elif content.startswith("TREASURE:"):
-                self.treasures = int(content.split(":")[1])
-                self.last_active = time.time()
-
-# Helpers for chat logging and TTS generation
-def log_chat_history(username, message, is_markdown=False):
-    timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-    if is_markdown:
-        entry = f"[{timestamp}] {username}:\n```markdown\n{message}\n```"
-    else:
-        entry = f"[{timestamp}] {username}: {message}"
-    md_file = create_file(entry, username, "md")
-    with open(CHAT_FILE, 'a') as f:
-        f.write(f"{entry}\n")
-    return entry
-
-async def generate_chat_audio(username, message, voice):
-    audio_file = await async_edge_tts_generate(message, voice, username)
-    return audio_file
+# -----------------------------
+# Utility Functions
+# -----------------------------
+def format_timestamp(username=""):
+    now = datetime.now(pytz.timezone('US/Central')).strftime("%m%d%Y-%I%M-%p")
+    return f"{now}-by-{username}"
+
+def clean_text_for_tts(text):
+    return re.sub(r'[#*!\[\]]+', '', ' '.join(text.split()))[:200] or "No text"
+
+def generate_filename(prompt, username, file_type="md"):
+    timestamp = format_timestamp(username)
+    cleaned_prompt = clean_text_for_tts(prompt)[:50].replace(" ", "_")
+    return f"{cleaned_prompt}_{timestamp}.{file_type}"
+
+def create_file(prompt, username, file_type="md"):
+    filename = generate_filename(prompt, username, file_type)
+    with open(filename, 'w', encoding='utf-8') as f:
+        f.write(prompt)
+    return filename
+
+def get_download_link(file, file_type="mp3"):
+    with open(file, "rb") as f:
+        b64 = base64.b64encode(f.read()).decode()
+    mime_types = {"mp3": "audio/mpeg", "md": "text/markdown"}
+    return f'<a href="data:{mime_types.get(file_type, "application/octet-stream")};base64,{b64}" download="{os.path.basename(file)}">{FILE_EMOJIS.get(file_type, "📥")} {os.path.basename(file)}</a>'
+
+def save_username(username):
+    with open(STATE_FILE, 'w') as f:
+        f.write(username)
+
+def load_username():
+    if os.path.exists(STATE_FILE):
+        with open(STATE_FILE, 'r') as f:
+            return f.read().strip()
+    return None
 
+# -----------------------------
+# Audio and Chat Processing Functions
+# -----------------------------
 async def async_edge_tts_generate(text, voice, username):
     cache_key = f"{text[:100]}_{voice}"
     if cache_key in st.session_state['audio_cache']:
@@ -192,17 +137,17 @@ def play_and_download_audio(file_path):
         st.audio(file_path, start_time=0)
         st.markdown(get_download_link(file_path), unsafe_allow_html=True)
 
-async def broadcast_message(message, room_id):
-    if room_id in st.session_state.active_connections:
-        disconnected = []
-        for client_id, ws in st.session_state.active_connections[room_id].items():
-            try:
-                await ws.send(message)
-            except websockets.ConnectionClosed:
-                disconnected.append(client_id)
-        for client_id in disconnected:
-            if client_id in st.session_state.active_connections[room_id]:
-                del st.session_state.active_connections[room_id][client_id]
+def log_chat_history(username, message, is_markdown=False):
+    timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+    entry = f"[{timestamp}] {username}: {message}" if not is_markdown else f"[{timestamp}] {username}:\n```markdown\n{message}\n```"
+    md_file = create_file(entry, username, "md")
+    with open(CHAT_FILE, 'a') as f:
+        f.write(f"{entry}\n")
+    return entry
+
+async def generate_chat_audio(username, message, voice):
+    audio_file = await async_edge_tts_generate(message, voice, username)
+    return audio_file
 
 async def save_chat_entry(username, message, voice, is_markdown=False):
     if not message.strip() or message == st.session_state.get('last_transcript', ''):
@@ -240,6 +185,9 @@ async def load_chat():
         content = f.read().strip()
     return content.split('\n')
 
+# -----------------------------
+# Session State Initialization
+# -----------------------------
 def init_session_state():
     defaults = {
         'server_running': False, 'server_task': None, 'active_connections': {},
@@ -275,7 +223,21 @@ def init_session_state():
 
 init_session_state()
 
-# WebSocket Handler and Related Functions
+# -----------------------------
+# WebSocket and Multiplayer Functions
+# -----------------------------
+async def broadcast_message(message, room_id):
+    if room_id in st.session_state.active_connections:
+        disconnected = []
+        for client_id, ws in st.session_state.active_connections[room_id].items():
+            try:
+                await ws.send(message)
+            except websockets.ConnectionClosed:
+                disconnected.append(client_id)
+        for client_id in disconnected:
+            if client_id in st.session_state.active_connections[room_id]:
+                del st.session_state.active_connections[room_id][client_id]
+
 async def websocket_handler(websocket, path):
     client_id = str(uuid.uuid4())
     room_id = "quest"
@@ -379,9 +341,12 @@ async def perform_arxiv_search(query, username):
     )[0]
     result = f"📚 Ancient Rocky Knowledge:\n{refs}"
     voice = next(c["voice"] for c in EDGE_TTS_VOICES if c["name"] == username)
-    md_file, audio_file = await save_chat_entry(username, result, voice, True)
-    return md_file, audio_file
+    entry, audio_file = await save_chat_entry(username, result, voice, True)
+    return entry, audio_file
 
+# -----------------------------
+# Sidebar Functions
+# -----------------------------
 def update_marquee_settings_ui():
     st.sidebar.markdown("### 🎯 Marquee Settings")
     cols = st.sidebar.columns(2)
@@ -420,277 +385,279 @@ def log_performance_metrics():
             percentage = (duration / total_time) * 100
             st.sidebar.write(f"**{operation}:** {duration:.2f}s ({percentage:.1f}%)")
 
-# ---------------------------
-# Enhanced 3D Game HTML
-# ---------------------------
-# Use precomputed player_color and player_shape in the JS code.
+# -----------------------------
+# Enhanced 3D World HTML
+# -----------------------------
+# Precomputed player_color and player_shape are used for correct interpolation.
 rocky_map_html = f"""
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{GAME_NAME}</title>
-    <style>
-        body {{ margin: 0; overflow: hidden; font-family: Arial, sans-serif; background: #000; }}
-        #gameContainer {{ width: 800px; height: 600px; position: relative; }}
-        canvas {{ width: 100%; height: 100%; display: block; }}
-        .ui-container {{
-            position: absolute; top: 10px; left: 10px; color: white;
-            background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px;
-            user-select: none;
-        }}
-        .leaderboard {{
-            position: absolute; top: 10px; left: 50%; transform: translateX(-50%); color: white;
-            background-color: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 5px;
-            text-align: center;
-        }}
-        .controls {{
-            position: absolute; bottom: 10px; left: 10px; color: white;
-            background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px;
-        }}
-        #chatBox {{
-            position: absolute; bottom: 60px; left: 10px; width: 300px; height: 150px;
-            background: rgba(0, 0, 0, 0.7); color: white; padding: 10px;
-            border-radius: 5px; overflow-y: auto;
-        }}
-    </style>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{GAME_NAME}</title>
+  <style>
+    body {{ margin: 0; overflow: hidden; font-family: Arial, sans-serif; background: #000; }}
+    #gameContainer {{ width: 800px; height: 600px; position: relative; }}
+    canvas {{ width: 100%; height: 100%; display: block; }}
+    .ui-container {{
+      position: absolute; top: 10px; left: 10px; color: white;
+      background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px;
+      user-select: none;
+    }}
+    .leaderboard {{
+      position: absolute; top: 10px; left: 50%; transform: translateX(-50%); color: white;
+      background-color: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 5px;
+      text-align: center;
+    }}
+    .controls {{
+      position: absolute; bottom: 10px; left: 10px; color: white;
+      background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px;
+    }}
+    #chatBox {{
+      position: absolute; bottom: 60px; left: 10px; width: 300px; height: 150px;
+      background: rgba(0, 0, 0, 0.7); color: white; padding: 10px;
+      border-radius: 5px; overflow-y: auto;
+    }}
+  </style>
 </head>
 <body>
-    <div id="gameContainer">
-        <div class="ui-container">
-            <h2>{GAME_NAME}</h2>
-            <div id="score">Score: 0</div>
-            <div id="treasures">Treasures: 0</div>
-            <div id="timeout">Timeout: 60s</div>
-        </div>
-        <div class="leaderboard" id="leaderboard">Leaderboard</div>
-        <div id="chatBox"></div>
-        <div class="controls">
-            <p>Controls: WASD/Arrows to move, Space to collect treasure</p>
-            <p>Chat to add world features!</p>
-        </div>
+  <div id="gameContainer">
+    <div class="ui-container">
+      <h2>{GAME_NAME}</h2>
+      <div id="score">Score: 0</div>
+      <div id="treasures">Treasures: 0</div>
+      <div id="timeout">Timeout: 60s</div>
     </div>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script>
-        const playerName = "{st.session_state.username}";
-        let ws = new WebSocket('ws://localhost:8765');
-        const scene = new THREE.Scene();
-        const camera = new THREE.PerspectiveCamera(75, 800/600, 0.1, 1000);
-        camera.position.set(0, 50, 50);
-        camera.lookAt(0, 0, 0);
-
-        const renderer = new THREE.WebGLRenderer({{ antialias: true }});
-        renderer.setSize(800, 600);
-        document.getElementById('gameContainer').appendChild(renderer.domElement);
-
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-        scene.add(ambientLight);
-        const sunLight = new THREE.DirectionalLight(0xffddaa, 1);
-        sunLight.position.set(50, 50, 50);
-        sunLight.castShadow = true;
-        scene.add(sunLight);
-
-        const groundGeometry = new THREE.PlaneGeometry(100, 100);
-        const groundMaterial = new THREE.MeshStandardMaterial({{ color: 0x228B22 }});
-        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
-        ground.rotation.x = -Math.PI/2;
-        ground.receiveShadow = true;
-        scene.add(ground);
-
-        // Fluid movement variables (you can adjust acceleration/friction as needed)
-        let velocity = new THREE.Vector2(0, 0);
-        const acceleration = 50;
-        const friction = 5;
-
-        let xPos = 0, zPos = 0;
-        const shapeGeometries = {{
-            "sphere": new THREE.SphereGeometry(1, 16, 16),
-            "cube": new THREE.BoxGeometry(2, 2, 2),
-            "cylinder": new THREE.CylinderGeometry(1, 1, 2, 16),
-            "cone": new THREE.ConeGeometry(1, 2, 16),
-            "torus": new THREE.TorusGeometry(1, 0.4, 16, 100),
-            "dodecahedron": new THREE.DodecahedronGeometry(1),
-            "octahedron": new THREE.OctahedronGeometry(1),
-            "tetrahedron": new THREE.TetrahedronGeometry(1),
-            "icosahedron": new THREE.IcosahedronGeometry(1)
-        }};
-        const playerMaterial = new THREE.MeshPhongMaterial({{ color: {player_color} }});
-        const playerMesh = new THREE.Mesh(shapeGeometries["{player_shape}"], playerMaterial);
-        playerMesh.position.set(xPos, 1, zPos);
-        playerMesh.castShadow = true;
-        scene.add(playerMesh);
-
-        let score = 0, treasureCount = 0;
-        let lastActive = performance.now()/1000;
-        let moveLeft = false, moveRight = false, moveUp = false, moveDown = false, collect = false;
-
-        document.addEventListener('keydown', (event) => {{
-            switch(event.code) {{
-                case 'ArrowLeft': case 'KeyA': moveLeft = true; break;
-                case 'ArrowRight': case 'KeyD': moveRight = true; break;
-                case 'ArrowUp': case 'KeyW': moveUp = true; break;
-                case 'ArrowDown': case 'KeyS': moveDown = true; break;
-                case 'Space': collect = true; break;
-            }}
-            lastActive = performance.now()/1000;
-        }});
-        document.addEventListener('keyup', (event) => {{
-            switch(event.code) {{
-                case 'ArrowLeft': case 'KeyA': moveLeft = false; break;
-                case 'ArrowRight': case 'KeyD': moveRight = false; break;
-                case 'ArrowUp': case 'KeyW': moveUp = false; break;
-                case 'ArrowDown': case 'KeyS': moveDown = false; break;
-                case 'Space': collect = false; break;
-            }}
-        }});
-
-        function updatePlayer(delta) {{
-            if(moveLeft) velocity.x -= acceleration * delta;
-            if(moveRight) velocity.x += acceleration * delta;
-            if(moveUp) velocity.y -= acceleration * delta;
-            if(moveDown) velocity.y += acceleration * delta;
-            velocity.x -= velocity.x * friction * delta;
-            velocity.y -= velocity.y * friction * delta;
-            xPos += velocity.x * delta;
-            zPos += velocity.y * delta;
-            xPos = Math.max(-40, Math.min(40, xPos));
-            zPos = Math.max(-40, Math.min(40, zPos));
-            playerMesh.position.set(xPos, 1, zPos);
-            ws.send(`${{playerName}}|MOVE:${{xPos}}:${{zPos}}`);
-            if(collect) {{
-                for(let i = treasures.length - 1; i >= 0; i--) {{
-                    if(playerMesh.position.distanceTo(treasures[i].position) < 2) {{
-                        const id = Object.keys(treasureMeshes).find(key => treasureMeshes[key] === treasures[i]);
-                        scene.remove(treasures[i]);
-                        treasures.splice(i, 1);
-                        delete treasureMeshes[id];
-                        score += 50;
-                        treasureCount += 1;
-                        ws.send(`${{playerName}}|SCORE:${{score}}`);
-                        ws.send(`${{playerName}}|TREASURE:${{treasureCount}}`);
-                    }}
-                }}
-            }}
-            camera.position.lerp(new THREE.Vector3(xPos, 50, zPos + 50), 0.1);
-            camera.lookAt(new THREE.Vector3(xPos, 0, zPos));
-            document.getElementById('timeout').textContent = `Timeout: ${{Math.max(0, (60 - (performance.now()/1000 - lastActive)).toFixed(0))}}s`;
-            document.getElementById('score').textContent = `Score: $${{score}}`;
-            document.getElementById('treasures').textContent = `Treasures: $${{treasureCount}}`;
+    <div class="leaderboard" id="leaderboard">Leaderboard</div>
+    <div id="chatBox"></div>
+    <div class="controls">
+      <p>Controls: WASD/Arrows to move, Space to collect treasure</p>
+      <p>Chat to add world features!</p>
+    </div>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+  <script>
+    const playerName = "{st.session_state.username}";
+    let ws = new WebSocket('ws://localhost:8765');
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, 800/600, 0.1, 1000);
+    camera.position.set(0, 50, 50);
+    camera.lookAt(0, 0, 0);
+
+    const renderer = new THREE.WebGLRenderer({{ antialias: true }});
+    renderer.setSize(800, 600);
+    document.getElementById('gameContainer').appendChild(renderer.domElement);
+
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    scene.add(ambientLight);
+    const sunLight = new THREE.DirectionalLight(0xffddaa, 1);
+    sunLight.position.set(50, 50, 50);
+    sunLight.castShadow = true;
+    scene.add(sunLight);
+
+    const groundGeometry = new THREE.PlaneGeometry(100, 100);
+    const groundMaterial = new THREE.MeshStandardMaterial({{ color: 0x228B22 }});
+    const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+    ground.rotation.x = -Math.PI/2;
+    ground.receiveShadow = true;
+    scene.add(ground);
+
+    let velocity = new THREE.Vector2(0, 0);
+    const acceleration = 50;
+    const friction = 5;
+
+    let xPos = 0, zPos = 0;
+    const shapeGeometries = {{
+      "sphere": new THREE.SphereGeometry(1, 16, 16),
+      "cube": new THREE.BoxGeometry(2, 2, 2),
+      "cylinder": new THREE.CylinderGeometry(1, 1, 2, 16),
+      "cone": new THREE.ConeGeometry(1, 2, 16),
+      "torus": new THREE.TorusGeometry(1, 0.4, 16, 100),
+      "dodecahedron": new THREE.DodecahedronGeometry(1),
+      "octahedron": new THREE.OctahedronGeometry(1),
+      "tetrahedron": new THREE.TetrahedronGeometry(1),
+      "icosahedron": new THREE.IcosahedronGeometry(1)
+    }};
+    const playerMaterial = new THREE.MeshPhongMaterial({{ color: {player_color} }});
+    const playerMesh = new THREE.Mesh(shapeGeometries["{player_shape}"], playerMaterial);
+    playerMesh.position.set(xPos, 1, zPos);
+    playerMesh.castShadow = true;
+    scene.add(playerMesh);
+
+    let score = 0, treasureCount = 0;
+    let lastActive = performance.now()/1000;
+    let moveLeft = false, moveRight = false, moveUp = false, moveDown = false, collect = false;
+
+    document.addEventListener('keydown', (event) => {{
+      switch(event.code) {{
+        case 'ArrowLeft': case 'KeyA': moveLeft = true; break;
+        case 'ArrowRight': case 'KeyD': moveRight = true; break;
+        case 'ArrowUp': case 'KeyW': moveUp = true; break;
+        case 'ArrowDown': case 'KeyS': moveDown = true; break;
+        case 'Space': collect = true; break;
+      }}
+      lastActive = performance.now()/1000;
+    }});
+    document.addEventListener('keyup', (event) => {{
+      switch(event.code) {{
+        case 'ArrowLeft': case 'KeyA': moveLeft = false; break;
+        case 'ArrowRight': case 'KeyD': moveRight = false; break;
+        case 'ArrowUp': case 'KeyW': moveUp = false; break;
+        case 'ArrowDown': case 'KeyS': moveDown = false; break;
+        case 'Space': collect = false; break;
+      }}
+    }});
+
+    function updatePlayer(delta) {{
+      if(moveLeft) velocity.x -= acceleration * delta;
+      if(moveRight) velocity.x += acceleration * delta;
+      if(moveUp) velocity.y -= acceleration * delta;
+      if(moveDown) velocity.y += acceleration * delta;
+      velocity.x -= velocity.x * friction * delta;
+      velocity.y -= velocity.y * friction * delta;
+      xPos += velocity.x * delta;
+      zPos += velocity.y * delta;
+      xPos = Math.max(-40, Math.min(40, xPos));
+      zPos = Math.max(-40, Math.min(40, zPos));
+      playerMesh.position.set(xPos, 1, zPos);
+      ws.send(`${{playerName}}|MOVE:${{xPos}}:${{zPos}}`);
+      if(collect) {{
+        for(let i = treasures.length - 1; i >= 0; i--) {{
+          if(playerMesh.position.distanceTo(treasures[i].position) < 2) {{
+            const id = Object.keys(treasureMeshes).find(key => treasureMeshes[key] === treasures[i]);
+            scene.remove(treasures[i]);
+            treasures.splice(i, 1);
+            delete treasureMeshes[id];
+            score += 50;
+            treasureCount += 1;
+            ws.send(`${{playerName}}|SCORE:${{score}}`);
+            ws.send(`${{playerName}}|TREASURE:${{treasureCount}}`);
+          }}
         }}
-
-        function updatePlayers(playerData) {{
-            playerData.forEach(player => {{
-                if(!playerMeshes[player.username]) {{
-                    const geometry = shapeGeometries[player.shape] || new THREE.BoxGeometry(2, 2, 2);
-                    const material = new THREE.MeshPhongMaterial({{ color: player.color }});
-                    const mesh = new THREE.Mesh(geometry, material);
-                    mesh.castShadow = true;
-                    scene.add(mesh);
-                    playerMeshes[player.username] = mesh;
-                }}
-                const mesh = playerMeshes[player.username];
-                mesh.position.set(player.x, 1, player.z);
-                players[player.username] = {{ mesh: mesh, score: player.score, treasures: player.treasures }};
-                if(player.username === playerName) {{
-                    xPos = player.x;
-                    zPos = player.z;
-                    score = player.score;
-                    treasureCount = player.treasures;
-                    playerMesh.position.set(xPos, 1, zPos);
-                }}
-            }});
-            document.getElementById('players').textContent = `Players: ${{Object.keys(playerMeshes).length}}`;
-            const leaderboard = playerData.sort((a, b) => b.score - a.score)
-                .map(p => `${{p.username}}: $${{p.score}}`)
-                .join('<br>');
-            document.getElementById('leaderboard').innerHTML = `Leaderboard<br>${{leaderboard}}`;
+      }}
+      camera.position.lerp(new THREE.Vector3(xPos, 50, zPos+50), 0.1);
+      camera.lookAt(new THREE.Vector3(xPos, 0, zPos));
+      document.getElementById('timeout').textContent = `Timeout: ${{Math.max(0, (60 - (performance.now()/1000 - lastActive)).toFixed(0))}}s`;
+      document.getElementById('score').textContent = `Score: $${{score}}`;
+      document.getElementById('treasures').textContent = `Treasures: $${{treasureCount}}`;
+    }}
+
+    function updatePlayers(playerData) {{
+      playerData.forEach(player => {{
+        if(!playerMeshes[player.username]) {{
+          const geometry = shapeGeometries[player.shape] || new THREE.BoxGeometry(2, 2, 2);
+          const material = new THREE.MeshPhongMaterial({{ color: player.color }});
+          const mesh = new THREE.Mesh(geometry, material);
+          mesh.castShadow = true;
+          scene.add(mesh);
+          playerMeshes[player.username] = mesh;
         }}
-
-        function updateTreasures(treasureData) {{
-            treasureData.forEach(t => {{
-                if(!treasureMeshes[t.id]) {{
-                    const treasure = new THREE.Mesh(
-                        new THREE.SphereGeometry(1, 8, 8),
-                        new THREE.MeshPhongMaterial({{ color: 0xffff00 }})
-                    );
-                    treasure.position.set(t.x, 1, t.z);
-                    treasure.castShadow = true;
-                    treasureMeshes[t.id] = treasure;
-                    treasures.push(treasure);
-                    scene.add(treasure);
-                }} else {{
-                    treasureMeshes[t.id].position.set(t.x, 1, t.z);
-                }}
-            }});
-            Object.keys(treasureMeshes).forEach(id => {{
-                if(!treasureData.some(t => t.id === id)) {{
-                    scene.remove(treasureMeshes[id]);
-                    treasures = treasures.filter(t => t !== treasureMeshes[id]);
-                    delete treasureMeshes[id];
-                }}
-            }});
+        const mesh = playerMeshes[player.username];
+        mesh.position.set(player.x, 1, player.z);
+        players[player.username] = {{ mesh: mesh, score: player.score, treasures: player.treasures }};
+        if(player.username === playerName) {{
+          xPos = player.x;
+          zPos = player.z;
+          score = player.score;
+          treasureCount = player.treasures;
+          playerMesh.position.set(xPos, 1, zPos);
         }}
-
-        function updateWorldObjects(objectData) {{
-            objectData.forEach(obj => {{
-                if(!worldObjectMeshes[obj.type + obj.x + obj.z]) {{
-                    const geometry = shapeGeometries[obj.shape] || new THREE.BoxGeometry(2, 2, 2);
-                    const material = new THREE.MeshPhongMaterial({{ color: obj.color }});
-                    const objMesh = new THREE.Mesh(geometry, material);
-                    objMesh.position.set(obj.x, 1, obj.z);
-                    objMesh.castShadow = true;
-                    worldObjectMeshes[obj.type + obj.x + obj.z] = objMesh;
-                    worldObjects.push(objMesh);
-                    scene.add(objMesh);
-                }}
-            }});
+      }});
+      document.getElementById('players').textContent = `Players: ${{Object.keys(playerMeshes).length}}`;
+      const leaderboard = playerData.sort((a, b) => b.score - a.score)
+        .map(p => `${{p.username}}: $${{p.score}}`)
+        .join('<br>');
+      document.getElementById('leaderboard').innerHTML = `Leaderboard<br>${{leaderboard}}`;
+    }}
+
+    function updateTreasures(treasureData) {{
+      treasureData.forEach(t => {{
+        if(!treasureMeshes[t.id]) {{
+          const treasure = new THREE.Mesh(
+            new THREE.SphereGeometry(1, 8, 8),
+            new THREE.MeshPhongMaterial({{ color: 0xffff00 }})
+          );
+          treasure.position.set(t.x, 1, t.z);
+          treasure.castShadow = true;
+          treasureMeshes[t.id] = treasure;
+          treasures.push(treasure);
+          scene.add(treasure);
+        }} else {{
+          treasureMeshes[t.id].position.set(t.x, 1, t.z);
         }}
-
-        ws.onmessage = function(event) {{
-            const data = event.data;
-            if(data.startsWith('MAP_UPDATE:')) {{
-                const playerData = JSON.parse(data.split('MAP_UPDATE:')[1]);
-                updatePlayers(playerData);
-            }} else if(data.startsWith('CHAT_UPDATE:')) {{
-                const chatData = JSON.parse(data.split('CHAT_UPDATE:')[1]);
-                const chatBox = document.getElementById('chatBox');
-                chatBox.innerHTML = chatData.map(line => `<p>${{line}}</p>`).join('');
-                chatBox.scrollTop = chatBox.scrollHeight;
-            }} else if(data.startsWith('GAME_STATE:')) {{
-                const gameState = JSON.parse(data.split('GAME_STATE:')[1]);
-                updatePlayers(gameState.players);
-                updateTreasures(gameState.treasures);
-                updateWorldObjects(gameState.world_objects);
-            }} else if(!data.startsWith('PRAIRIE_UPDATE:')) {{
-                const [sender, message] = data.split('|');
-                const chatBox = document.getElementById('chatBox');
-                chatBox.innerHTML += `<p>${{sender}}: ${{message}}</p>`;
-                chatBox.scrollTop = chatBox.scrollHeight;
-            }}
-        }};
-
-        let lastTime = performance.now();
-        function animate() {{
-            requestAnimationFrame(animate);
-            const currentTime = performance.now();
-            const delta = (currentTime - lastTime) / 1000;
-            lastTime = currentTime;
-            updatePlayer(delta);
-            treasures.forEach(t => t.rotation.y += delta);
-            worldObjects.forEach(o => o.rotation.y += delta * 0.5);
-            renderer.render(scene, camera);
+      }});
+      Object.keys(treasureMeshes).forEach(id => {{
+        if(!treasureData.some(t => t.id === id)) {{
+          scene.remove(treasureMeshes[id]);
+          treasures = treasures.filter(t => t !== treasureMeshes[id]);
+          delete treasureMeshes[id];
+        }}
+      }});
+    }}
+
+    function updateWorldObjects(objectData) {{
+      objectData.forEach(obj => {{
+        if(!worldObjectMeshes[obj.type + obj.x + obj.z]) {{
+          const geometry = shapeGeometries[obj.shape] || new THREE.BoxGeometry(2, 2, 2);
+          const material = new THREE.MeshPhongMaterial({{ color: obj.color }});
+          const objMesh = new THREE.Mesh(geometry, material);
+          objMesh.position.set(obj.x, 1, obj.z);
+          objMesh.castShadow = true;
+          worldObjectMeshes[obj.type + obj.x + obj.z] = objMesh;
+          worldObjects.push(objMesh);
+          scene.add(objMesh);
         }}
-        animate();
-    </script>
+      }});
+    }}
+
+    ws.onmessage = function(event) {{
+      const data = event.data;
+      if(data.startsWith('MAP_UPDATE:')) {{
+        const playerData = JSON.parse(data.split('MAP_UPDATE:')[1]);
+        updatePlayers(playerData);
+      }} else if(data.startsWith('CHAT_UPDATE:')) {{
+        const chatData = JSON.parse(data.split('CHAT_UPDATE:')[1]);
+        const chatBox = document.getElementById('chatBox');
+        chatBox.innerHTML = chatData.map(line => `<p>${{line}}</p>`).join('');
+        chatBox.scrollTop = chatBox.scrollHeight;
+      }} else if(data.startsWith('GAME_STATE:')) {{
+        const gameState = JSON.parse(data.split('GAME_STATE:')[1]);
+        updatePlayers(gameState.players);
+        updateTreasures(gameState.treasures);
+        updateWorldObjects(gameState.world_objects);
+      }} else if(!data.startsWith('PRAIRIE_UPDATE:')) {{
+        const [sender, message] = data.split('|');
+        const chatBox = document.getElementById('chatBox');
+        chatBox.innerHTML += `<p>${{sender}}: ${{message}}</p>`;
+        chatBox.scrollTop = chatBox.scrollHeight;
+      }}
+    }};
+
+    let lastTime = performance.now();
+    function animate() {{
+      requestAnimationFrame(animate);
+      const currentTime = performance.now();
+      const delta = (currentTime - lastTime) / 1000;
+      lastTime = currentTime;
+      updatePlayer(delta);
+      treasures.forEach(t => t.rotation.y += delta);
+      worldObjects.forEach(o => o.rotation.y += delta * 0.5);
+      renderer.render(scene, camera);
+    }}
+    animate();
+  </script>
 </body>
 </html>
 """
 
+# -----------------------------
+# Main Application
+# -----------------------------
 def main():
     st.markdown(f"<h2 style='text-align: center;'>Welcome, {st.session_state.username}!</h2>", unsafe_allow_html=True)
-    # Display Chat Input above the Quest Log
+    # Chat Input
     message = st.text_input(f"🗨️ Chat as {st.session_state.username}:", placeholder="Type to chat or add world features! 🌲", key="chat_input")
     if st.button("🌟 Send"):
         if message:
@@ -701,7 +668,7 @@ def main():
             st.session_state.last_activity = time.time()
             st.success(f"🌄 +10 points! New Score: ${st.session_state.score}")
 
-    # Display Quest Log as a code block with Python formatting and line numbers
+    # Display Quest Log as a Python code block (with line numbers if supported)
     chat_content = asyncio.run(load_chat())
     st.code("\n".join(chat_content[-10:]), language="python")