Create app.py

app.py

@@ -0,0 +1,661 @@
+import streamlit as st
+import streamlit.components.v1 as components
+import asyncio
+import websockets
+import uuid
+import os
+import random
+import time
+import hashlib
+from datetime import datetime
+import pytz
+import nest_asyncio
+import edge_tts
+from audio_recorder_streamlit import audio_recorder
+
+# Patch asyncio for nesting
+nest_asyncio.apply()
+
+# Page Config
+st.set_page_config(page_title="Galaxian Snake 3D Multiplayer", layout="wide")
+
+st.title("Galaxian Snake 3D Multiplayer")
+st.write("Navigate a 3D city with others, eat food, and chat in real-time!")
+
+# Sliders for container size
+max_width = min(1200, st.session_state.get('window_width', 1200))
+max_height = min(1600, st.session_state.get('window_height', 1600))
+
+col1, col2 = st.columns(2)
+with col1:
+    container_width = st.slider("Container Width (px)", 300, max_width, 768, step=50)
+with col2:
+    container_height = st.slider("Container Height (px)", 400, max_height, 1024, step=50)
+
+# Session State Initialization
+def init_session_state():
+    defaults = {
+        'server_running': False, 'server_task': None, 'active_connections': {},
+        'chat_history': [], 'last_chat_update': 0, 'username': None,
+        'tts_voice': "en-US-AriaNeural", 'audio_cache': {}
+    }
+    for k, v in defaults.items():
+        if k not in st.session_state:
+            st.session_state[k] = v
+
+init_session_state()
+
+# Usernames and Voices
+FUN_USERNAMES = {
+    "CosmicJester 🌌": "en-US-AriaNeural",
+    "PixelPanda 🐼": "en-US-JennyNeural",
+    "QuantumQuack 🦆": "en-GB-SoniaNeural",
+    "StellarSquirrel 🐿️": "en-AU-NatashaNeural",
+    "GizmoGuru ⚙️": "en-CA-ClaraNeural",
+    "NebulaNinja 🌠": "en-US-GuyNeural",
+}
+
+if not st.session_state.username:
+    st.session_state.username = random.choice(list(FUN_USERNAMES.keys()))
+    st.session_state.tts_voice = FUN_USERNAMES[st.session_state.username]
+
+# Chat File
+CHAT_FILE = "chat_logs/global_chat.md"
+os.makedirs("chat_logs", exist_ok=True)
+if not os.path.exists(CHAT_FILE):
+    with open(CHAT_FILE, 'a') as f:
+        f.write("# Multiplayer Snake Chat\n\nWelcome to the cosmic city! 🎤\n")
+
+# Audio Processing
+async def async_edge_tts_generate(text, voice, username):
+    cache_key = f"{text[:100]}_{voice}"
+    if cache_key in st.session_state['audio_cache']:
+        return st.session_state['audio_cache'][cache_key]
+    filename = f"audio_logs/{datetime.now().strftime('%Y%m%d_%H%M%S')}-by-{username}-{hashlib.md5(text.encode()).hexdigest()[:8]}.mp3"
+    os.makedirs("audio_logs", exist_ok=True)
+    communicate = edge_tts.Communicate(text, voice)
+    await communicate.save(filename)
+    if os.path.exists(filename) and os.path.getsize(filename) > 0:
+        st.session_state['audio_cache'][cache_key] = filename
+        return filename
+    return None
+
+def play_and_download_audio(file_path):
+    if file_path and os.path.exists(file_path):
+        with open(file_path, "rb") as f:
+            audio_bytes = f.read()
+        st.audio(audio_bytes, format="audio/mp3")
+        b64 = base64.b64encode(audio_bytes).decode()
+        st.markdown(f'<a href="data:audio/mpeg;base64,{b64}" download="{os.path.basename(file_path)}">🎵 Download {os.path.basename(file_path)}</a>', unsafe_allow_html=True)
+
+# WebSocket Handling
+async def websocket_handler(websocket, path):
+    client_id = str(uuid.uuid4())
+    room_id = "snake_chat"
+    if room_id not in st.session_state.active_connections:
+        st.session_state.active_connections[room_id] = {}
+    st.session_state.active_connections[room_id][client_id] = websocket
+    username = st.session_state.username
+    await broadcast_message(f"System|{username} has joined the game!", room_id)
+    try:
+        async for message in websocket:
+            if '|' in message:
+                sender, content = message.split('|', 1)
+                await save_chat_entry(sender, content)
+            else:
+                await websocket.send("ERROR|Message format: username|content")
+    except websockets.ConnectionClosed:
+        await broadcast_message(f"System|{username} has left the game!", room_id)
+    finally:
+        if room_id in st.session_state.active_connections and client_id in st.session_state.active_connections[room_id]:
+            del st.session_state.active_connections[room_id][client_id]
+
+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 run_websocket_server():
+    if not st.session_state.get('server_running', False):
+        server = await websockets.serve(websocket_handler, '0.0.0.0', 8765)
+        st.session_state['server_running'] = True
+        await server.wait_closed()
+
+def start_websocket_server():
+    loop = asyncio.new_event_loop()
+    asyncio.set_event_loop(loop)
+    loop.run_until_complete(run_websocket_server())
+
+# Chat Functions
+async def save_chat_entry(username, message):
+    central = pytz.timezone('US/Central')
+    timestamp = datetime.now(central).strftime("%Y-%m-%d %H:%M:%S")
+    entry = f"[{timestamp}] {username}: {message}"
+    with open(CHAT_FILE, 'a') as f:
+        f.write(f"{entry}\n")
+    audio_file = await async_edge_tts_generate(message, FUN_USERNAMES.get(username, "en-US-AriaNeural"), username)
+    if audio_file:
+        play_and_download_audio(audio_file)
+    await broadcast_message(f"{username}|{message}", "snake_chat")
+    st.session_state.chat_history.append(entry)
+    st.session_state.last_chat_update = time.time()
+
+async def load_chat():
+    with open(CHAT_FILE, 'r') as f:
+        content = f.read().strip()
+    return content.split('\n')
+
+# Game HTML
+html_code = f"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Galaxian Snake 3D Multiplayer</title>
+    <style>
+        body {{ margin: 0; overflow: hidden; font-family: Arial, sans-serif; }}
+        #gameContainer {{ width: {container_width}px; height: {container_height}px; 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;
+        }}
+        .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: 200px; 
+            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>Galaxian Snake 3D</h2>
+            <div id="players">Players: 1</div>
+            <div id="score">Score: 0</div>
+            <div id="length">Length: 3</div>
+            <div id="leaderboard"></div>
+        </div>
+        <div id="chatBox"></div>
+        <div class="controls">
+            <p>Controls: W/A/S/D or Arrow Keys to move</p>
+            <p>Eat yellow cubes to grow and score!</p>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        // Game variables
+        let score = 0, players = {{}}, foodItems = [], lSysCreatures = [], quineAgents = [], buildings = [];
+        let snake = [], moveDir = new THREE.Vector3(1, 0, 0), moveCounter = 0, moveInterval = 0.1;
+        const initialLength = 3, playerName = "{st.session_state.username}";
+        const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
+        let ws = new WebSocket('ws://localhost:8765');
+
+        // Scene setup
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, {container_width} / {container_height}, 0.1, 1000);
+        camera.position.set(0, 20, 30);
+        const renderer = new THREE.WebGLRenderer({{ antialias: true }});
+        renderer.setSize({container_width}, {container_height});
+        renderer.shadowMap.enabled = true;
+        document.getElementById('gameContainer').appendChild(renderer.domElement);
+
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
+        scene.add(ambientLight);
+        const sunLight = new THREE.DirectionalLight(0xffddaa, 0.8);
+        sunLight.castShadow = true;
+        sunLight.shadow.mapSize.width = 2048;
+        sunLight.shadow.mapSize.height = 2048;
+        sunLight.shadow.camera.near = 1;
+        sunLight.shadow.camera.far = 500;
+        sunLight.shadow.camera.left = -100;
+        sunLight.shadow.camera.right = 100;
+        sunLight.shadow.camera.top = 100;
+        sunLight.shadow.camera.bottom = -100;
+        scene.add(sunLight);
+
+        // Ground
+        const textureLoader = new THREE.TextureLoader();
+        const groundGeometry = new THREE.PlaneGeometry(200, 200);
+        const groundMaterial = new THREE.MeshStandardMaterial({{ 
+            color: 0x1a5e1a, roughness: 0.8, metalness: 0.2,
+            bumpMap: textureLoader.load('https://threejs.org/examples/textures/terrain/grasslight-big-nm.jpg'),
+            bumpScale: 0.1
+        }});
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.receiveShadow = true;
+        scene.add(ground);
+
+        // Building rules
+        const buildingColors = [0x888888, 0x666666, 0x999999, 0xaaaaaa, 0x555555, 0x334455, 0x445566, 0x223344, 0x556677, 0x667788, 0x993333, 0x884422, 0x553333, 0x772222, 0x664433];
+        const buildingRules = [
+            {{name: "Colonial", axiom: "A", rules: {{"A": "B[+F][-F]", "B": "F[-C][+C]F", "C": "D[-E][+E]", "D": "F[+F][-F]F", "E": "F[-F][+F]"}}, iterations: 2, baseHeight: 10, baseWidth: 6, baseDepth: 6, angle: Math.PI/6, probability: 0.2}},
+            {{name: "Victorian", axiom: "A", rules: {{"A": "B[+C][-C][/D][\\\\D]", "B": "F[+F][-F][/F][\\\\F]", "C": "F[++F][--F]", "D": "F[+\\\\F][-\\\\F]"}}, iterations: 3, baseHeight: 15, baseWidth: 5, baseDepth: 5, angle: Math.PI/5, probability: 0.15}},
+            {{name: "Modern", axiom: "A", rules: {{"A": "B[+B][-B]", "B": "F[/C][\\\\C]", "C": "F"}}, iterations: 2, baseHeight: 20, baseWidth: 8, baseDepth: 8, angle: Math.PI/2, probability: 0.25}},
+            {{name: "Skyscraper", axiom: "A", rules: {{"A": "FB[+C][-C]", "B": "FB", "C": "F[+F][-F]"}}, iterations: 4, baseHeight: 30, baseWidth: 10, baseDepth: 10, angle: Math.PI/8, probability: 0.15}},
+            {{name: "Simple", axiom: "F", rules: {{"F": "F[+F][-F]"}}, iterations: 1, baseHeight: 8, baseWidth: 6, baseDepth: 6, angle: Math.PI/4, probability: 0.25}}
+        ];
+
+        function interpretLSystem(rule, position, rotation) {{
+            let currentString = rule.axiom;
+            for (let i = 0; i < rule.iterations; i++) {{
+                let newString = "";
+                for (let j = 0; j < currentString.length; j++) {{
+                    newString += rule.rules[currentString[j]] || currentString[j];
+                }}
+                currentString = newString;
+            }}
+            
+            let buildingGroup = new THREE.Group();
+            buildingGroup.position.copy(position);
+            const stack = [];
+            let currentPosition = new THREE.Vector3(0, 0, 0);
+            let currentRotation = rotation || new THREE.Euler();
+            let scale = new THREE.Vector3(1, 1, 1);
+            const color = buildingColors[Math.floor(Math.random() * buildingColors.length)];
+            const material = new THREE.MeshStandardMaterial({{color: color, roughness: 0.7, metalness: 0.2}});
+            
+            for (let i = 0; i < currentString.length; i++) {{
+                const char = currentString[i];
+                switch (char) {{
+                    case 'F':
+                        const width = rule.baseWidth * (0.5 + Math.random() * 0.5) * scale.x;
+                        const height = rule.baseHeight * (0.5 + Math.random() * 0.5) * scale.y;
+                        const depth = rule.baseDepth * (0.5 + Math.random() * 0.5) * scale.z;
+                        const geometry = new THREE.BoxGeometry(width, height, depth);
+                        const buildingPart = new THREE.Mesh(geometry, material);
+                        buildingPart.position.copy(currentPosition);
+                        buildingPart.position.y += height / 2;
+                        buildingPart.rotation.copy(currentRotation);
+                        buildingPart.castShadow = true;
+                        buildingPart.receiveShadow = true;
+                        buildingGroup.add(buildingPart);
+                        const direction = new THREE.Vector3(0, height, 0);
+                        direction.applyEuler(currentRotation);
+                        currentPosition.add(direction);
+                        break;
+                    case '+': currentRotation.y += rule.angle; break;
+                    case '-': currentRotation.y -= rule.angle; break;
+                    case '/': currentRotation.x += rule.angle; break;
+                    case '\\\\': currentRotation.x -= rule.angle; break;
+                    case '^': currentRotation.z += rule.angle; break;
+                    case '&': currentRotation.z -= rule.angle; break;
+                    case '[': stack.push({{position: currentPosition.clone(), rotation: currentRotation.clone(), scale: scale.clone()}}); break;
+                    case ']': if (stack.length > 0) {{ const state = stack.pop(); currentPosition = state.position; currentRotation = state.rotation; scale = state.scale; }} break;
+                    case '>': scale.multiplyScalar(1.2); break;
+                    case '<': scale.multiplyScalar(0.8); break;
+                }}
+            }}
+            return buildingGroup;
+        }}
+
+        function createCity() {{
+            const citySize = 5, spacing = 15;
+            for (let x = -citySize; x <= citySize; x++) {{
+                for (let z = -citySize; z <= citySize; z++) {{
+                    if (Math.random() < 0.2) continue;
+                    const position = new THREE.Vector3(x * spacing + (Math.random() * 2 - 1), 0, z * spacing + (Math.random() * 2 - 1));
+                    let selectedRule, random = Math.random(), cumulativeProbability = 0;
+                    for (const rule of buildingRules) {{
+                        cumulativeProbability += rule.probability;
+                        if (random <= cumulativeProbability) {{ selectedRule = rule; break; }}
+                    }}
+                    if (!selectedRule) selectedRule = buildingRules[0];
+                    const building = interpretLSystem(selectedRule, position, new THREE.Euler());
+                    scene.add(building);
+                    buildings.push(building);
+                    if (Math.random() > 0.7) spawnLSysCreature(building.position);
+                }}
+            }}
+            const roadWidth = 8, roadColor = 0x333333;
+            for (let x = -citySize; x <= citySize; x++) {{
+                const road = new THREE.Mesh(
+                    new THREE.PlaneGeometry(roadWidth, citySize * 2 * spacing + roadWidth),
+                    new THREE.MeshStandardMaterial({{color: roadColor, roughness: 0.9, metalness: 0.1}})
+                );
+                road.rotation.x = -Math.PI / 2;
+                road.position.set(x * spacing, 0.01, 0);
+                scene.add(road);
+            }}
+            for (let z = -citySize; z <= citySize; z++) {{
+                const road = new THREE.Mesh(
+                    new THREE.PlaneGeometry(citySize * 2 * spacing + roadWidth, roadWidth),
+                    new THREE.MeshStandardMaterial({{color: roadColor, roughness: 0.9, metalness: 0.1}})
+                );
+                road.rotation.x = -Math.PI / 2;
+                road.position.set(0, 0.01, z * spacing);
+                scene.add(road);
+            }}
+        }}
+
+        function evolveCity() {{
+            if (Math.random() < 0.1) {{ // 10% chance to evolve per frame
+                const citySize = 5, spacing = 15;
+                const x = (Math.random() * 2 - 1) * citySize * spacing;
+                const z = (Math.random() * 2 - 1) * citySize * spacing;
+                const position = new THREE.Vector3(x, 0, z);
+                let selectedRule = buildingRules[Math.floor(Math.random() * buildingRules.length)];
+                const building = interpretLSystem(selectedRule, position, new THREE.Euler());
+                scene.add(building);
+                buildings.push(building);
+            }}
+        }}
+
+        function spawnFood() {{
+            const citySize = 5, spacing = 15;
+            if (foodItems.length < 10) {{
+                const food = new THREE.Mesh(
+                    new THREE.BoxGeometry(1, 1, 1),
+                    new THREE.MeshStandardMaterial({{color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.5, transparent: true, opacity: 0.8}})
+                );
+                const x = (Math.random() * 2 - 1) * citySize * spacing;
+                const z = (Math.random() * 2 - 1) * citySize * spacing;
+                food.position.set(x, 0.5, z);
+                foodItems.push(food);
+                scene.add(food);
+            }}
+        }}
+
+        function spawnLSysCreature(position) {{
+            const lSys = {{
+                axiom: "F",
+                rules: {{"F": "F[+F]F[-F]F"}},
+                angle: 25 * Math.PI / 180,
+                length: 2,
+                iterations: 2
+            }};
+            let turtleString = lSys.axiom;
+            for (let j = 0; j < lSys.iterations; j++) {{
+                turtleString = turtleString.split('').map(c => lSys.rules[c] || c).join('');
+            }}
+            const creature = new THREE.Group();
+            let stack = [], pos = position.clone(), dir = new THREE.Vector3(0, lSys.length, 0);
+            const material = new THREE.MeshStandardMaterial({{color: 0x0000ff}});
+
+            for (let char of turtleString) {{
+                if (char === 'F') {{
+                    const segment = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.1, lSys.length, 8), material);
+                    segment.position.copy(pos).add(dir.clone().multiplyScalar(0.5));
+                    segment.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize());
+                    creature.add(segment);
+                    pos.add(dir);
+                }} else if (char === '+') {{
+                    dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), lSys.angle);
+                }} else if (char === '-') {{
+                    dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), -lSys.angle);
+                }} else if (char === '[') {{
+                    stack.push({{ pos: pos.clone(), dir: dir.clone() }});
+                }} else if (char === ']') {{
+                    const state = stack.pop();
+                    pos = state.pos;
+                    dir = state.dir;
+                }}
+            }}
+            creature.position.copy(position);
+            lSysCreatures.push(creature);
+            scene.add(creature);
+            sendQuineAgent(creature);
+        }}
+
+        function sendQuineAgent(sender) {{
+            const agent = new THREE.Mesh(
+                new THREE.SphereGeometry(0.3, 16, 16),
+                new THREE.MeshStandardMaterial({{color: 0x00ffff, emissive: 0x00ffff, emissiveIntensity: 0.5}})
+            );
+            agent.position.copy(sender.position).add(new THREE.Vector3(0, 5, 0));
+            agent.userData = {{
+                origin: sender.position.clone(),
+                angle: Math.random() * Math.PI * 2,
+                speed: 0.5 + Math.random() * 0.5,
+                radius: 3 + Math.random() * 2,
+                ttl: 5
+            }};
+            quineAgents.push(agent);
+            scene.add(agent);
+        }}
+
+        function resetSnake() {{
+            snake.forEach(seg => scene.remove(seg));
+            snake = [];
+            const snakeMaterial = new THREE.MeshStandardMaterial({{color: 0x00ff00}});
+            for (let i = 0; i < initialLength; i++) {{
+                const segment = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16), snakeMaterial);
+                segment.position.set(-i * 1.2, 0.5, 0);
+                segment.castShadow = true;
+                snake.push(segment);
+                scene.add(segment);
+            }}
+            moveDir.set(1, 0, 0);
+            players[playerName] = {{ snake: snake, score: 0, length: initialLength }};
+        }}
+
+        // Controls
+        const keys = {{w: false, a: false, s: false, d: false}};
+        document.addEventListener('keydown', (event) => {{
+            switch (event.key.toLowerCase()) {{
+                case 'w': case 'arrowup': keys.w = true; break;
+                case 'a': case 'arrowleft': keys.a = true; break;
+                case 's': case 'arrowdown': keys.s = true; break;
+                case 'd': case 'arrowright': keys.d = true; break;
+            }}
+        }});
+        document.addEventListener('keyup', (event) => {{
+            switch (event.key.toLowerCase()) {{
+                case 'w': case 'arrowup': keys.w = false; break;
+                case 'a': case 'arrowleft': keys.a = false; break;
+                case 's': case 'arrowdown': keys.s = false; break;
+                case 'd': case 'arrowright': keys.d = false; break;
+            }}
+        }});
+
+        function updateSnake(delta) {{
+            moveCounter += delta;
+            if (moveCounter < moveInterval) return;
+            moveCounter = 0;
+
+            if (keys.w && moveDir.z !== 1) moveDir.set(0, 0, -1);
+            else if (keys.s && moveDir.z !== -1) moveDir.set(0, 0, 1);
+            else if (keys.a && moveDir.x !== 1) moveDir.set(-1, 0, 0);
+            else if (keys.d && moveDir.x !== -1) moveDir.set(1, 0, 0);
+
+            const head = snake[0];
+            const newHead = new THREE.Mesh(head.geometry, head.material);
+            newHead.position.copy(head.position).add(moveDir.clone().multiplyScalar(1));
+            newHead.castShadow = true;
+
+            if (Math.abs(newHead.position.x) > 75 || Math.abs(newHead.position.z) > 75) {{
+                resetSnake();
+                return;
+            }}
+
+            for (let i = 1; i < snake.length; i++) {{
+                if (newHead.position.distanceTo(snake[i].position) < 0.9) {{
+                    resetSnake();
+                    return;
+                }}
+            }}
+
+            for (const building of buildings) {{
+                building.traverse((child) => {{
+                    if (child.isMesh) {{
+                        const buildingBox = new THREE.Box3().setFromObject(child);
+                        const headPos = newHead.position.clone();
+                        if (headPos.x + 0.5 > buildingBox.min.x && headPos.x - 0.5 < buildingBox.max.x &&
+                            headPos.z + 0.5 > buildingBox.min.z && headPos.z - 0.5 < buildingBox.max.z) {{
+                            resetSnake();
+                            return;
+                        }}
+                    }}
+                }});
+            }}
+
+            snake.unshift(newHead);
+            scene.add(newHead);
+
+            for (let i = foodItems.length - 1; i >= 0; i--) {{
+                if (newHead.position.distanceTo(foodItems[i].position) < 1) {{
+                    scene.remove(foodItems[i]);
+                    foodItems.splice(i, 1);
+                    spawnFood();
+                    if (Math.random() > 0.8) spawnLSysCreature(newHead.position.clone());
+                    score += 2;
+                    players[playerName].score = score;
+                    players[playerName].length = snake.length;
+                    updateUI();
+                    break;
+                }} else {{
+                    const tail = snake.pop();
+                    scene.remove(tail);
+                }}
+            }}
+
+            for (let creature of lSysCreatures) {{
+                if (newHead.position.distanceTo(creature.position) < 2) {{
+                    resetSnake();
+                    return;
+                }}
+            }}
+
+            const headPos = newHead.position;
+            camera.position.set(headPos.x, headPos.y + 20, headPos.z + 30);
+            camera.lookAt(headPos);
+        }}
+
+        function updateQuineAgents(delta) {{
+            for (let i = quineAgents.length - 1; i >= 0; i--) {{
+                const agent = quineAgents[i];
+                agent.userData.ttl -= delta;
+                if (agent.userData.ttl <= 0) {{
+                    scene.remove(agent);
+                    quineAgents.splice(i, 1);
+                    continue;
+                }}
+                agent.userData.angle += agent.userData.speed * delta;
+                const offsetX = Math.cos(agent.userData.angle) * agent.userData.radius;
+                const offsetZ = Math.sin(agent.userData.angle) * agent.userData.radius;
+                agent.position.set(
+                    agent.userData.origin.x + offsetX,
+                    agent.userData.origin.y + 5 + Math.sin(Date.now() * 0.001 * agent.userData.speed) * 0.5,
+                    agent.userData.origin.z + offsetZ
+                );
+            }}
+        }}
+
+        // Sun cycle
+        let cycleTime = 0;
+        function updateLighting(delta) {{
+            cycleTime += delta;
+            const cycleDuration = 120;
+            const angle = (cycleTime / cycleDuration) * Math.PI * 2;
+            sunLight.position.set(Math.cos(angle) * 100, Math.sin(angle) * 100, Math.sin(angle) * 50);
+            sunLight.intensity = Math.max(0, Math.sin(angle)) * 0.8;
+            const dayColor = new THREE.Color(0x87CEEB);
+            const nightColor = new THREE.Color(0x001133);
+            scene.background = dayColor.clone().lerp(nightColor, Math.max(0, -Math.sin(angle)));
+        }}
+
+        function updateUI() {{
+            document.getElementById('players').textContent = `Players: ${{Object.keys(players).length}}`;
+            document.getElementById('score').textContent = `Score: ${{score}}`;
+            document.getElementById('length').textContent = `Length: ${{snake.length}}`;
+            document.getElementById('leaderboard').innerHTML = highScores.map(s => `<p>${{s.name}}: ${{s.score}}</p>`).join('');
+        }}
+
+        // WebSocket chat
+        ws.onmessage = function(event) {{
+            const [sender, message] = event.data.split('|');
+            const chatBox = document.getElementById('chatBox');
+            chatBox.innerHTML += `<p>${{sender}}: ${{message}}</p>`;
+            chatBox.scrollTop = chatBox.scrollHeight;
+        }};
+
+        ws.onopen = function() {{
+            console.log('Connected to WebSocket server');
+        }};
+
+        ws.onerror = function(error) {{
+            console.error('WebSocket error:', error);
+        }};
+
+        ws.onclose = function() {{
+            console.log('Disconnected from WebSocket server');
+        }};
+
+        // Game loop
+        let lastTime = performance.now();
+        function animate() {{
+            requestAnimationFrame(animate);
+            const currentTime = performance.now();
+            const delta = (currentTime - lastTime) / 1000;
+            lastTime = currentTime;
+
+            updateSnake(delta);
+            updateQuineAgents(delta);
+            updateLighting(delta);
+            evolveCity();
+            spawnFood();
+            updateUI();
+
+            renderer.render(scene, camera);
+        }}
+
+        // Initialize
+        resetSnake();
+        createCity();
+        spawnFood();
+        animate();
+    </script>
+</body>
+</html>
+"""
+
+# Render the HTML component
+components.html(html_code, width=container_width, height=container_height)
+
+# Chat Interface
+st.sidebar.title(f"Chat as {st.session_state.username}")
+chat_content = asyncio.run(load_chat())
+chat_container = st.sidebar.container()
+with chat_container:
+    st.code("\n".join(chat_content), language="python")
+
+message = st.sidebar.text_input("Message", key="chat_input")
+if message and st.sidebar.button("Send 🚀"):
+    asyncio.run(save_chat_entry(st.session_state.username, message))
+
+audio_bytes = audio_recorder()
+if audio_bytes:
+    with open("temp_audio.wav", "wb") as f:
+        f.write(audio_bytes)
+    # Here you would typically transcribe the audio, but for simplicity, we'll simulate a message
+    message = "Voice message received"
+    asyncio.run(save_chat_entry(st.session_state.username, message))
+
+# Start WebSocket Server
+if not st.session_state.get('server_task'):
+    st.session_state.server_task = threading.Thread(target=start_websocket_server, daemon=True)
+    st.session_state.server_task.start()
+
+st.sidebar.write("""
+### How to Play
+- **W/A/S/D or Arrow Keys**: Move your snake
+- Eat yellow cubes to grow and score
+- City evolves with new buildings over time
+- Chat with other players in real-time
+""")