Spaces:
Sleeping
Sleeping
| 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 2D Multiplayer", layout="wide") | |
| st.title("Galaxian Snake 2D Multiplayer") | |
| st.write("Navigate a top-down 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, '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 start_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 | |
| st.session_state['server'] = server | |
| await asyncio.Future() # Run forever until cancelled | |
| # 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 with Debugging | |
| 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 2D Multiplayer</title> | |
| <style> | |
| body {{ margin: 0; overflow: hidden; font-family: Arial, sans-serif; }} | |
| #gameContainer {{ width: {container_width}px; height: {container_height}px; position: relative; background: #000; }} | |
| 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; | |
| }} | |
| #debug {{ position: absolute; top: 10px; right: 10px; color: white; }} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="gameContainer"> | |
| <div class="ui-container"> | |
| <h2>Galaxian Snake 2D</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 id="debug"></div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script> | |
| try {{ | |
| console.log('Starting game initialization...'); | |
| // Game variables | |
| let score = 0, players = {{}}, foodItems = [], lSysCreatures = [], quineAgents = [], buildings = [], lights = []; | |
| 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'); | |
| const debug = document.getElementById('debug'); | |
| // Scene setup | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, {container_width} / {container_height}, 0.1, 1000); | |
| camera.position.set(0, 50, 0); // Lowered from 100 to ensure visibility | |
| camera.lookAt(0, 0, 0); | |
| console.log('Camera initialized at:', camera.position); | |
| const renderer = new THREE.WebGLRenderer({{ antialias: true }}); | |
| renderer.setSize({container_width}, {container_height}); | |
| renderer.shadowMap.enabled = true; | |
| document.getElementById('gameContainer').appendChild(renderer.domElement); | |
| console.log('Renderer initialized with size:', {container_width}, {container_height}); | |
| // Lighting | |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.3); // Increased for visibility | |
| scene.add(ambientLight); | |
| console.log('Ambient light added'); | |
| // Ground | |
| const textureLoader = new THREE.TextureLoader(); | |
| const groundGeometry = new THREE.PlaneGeometry(100, 100); // Reduced size for tighter view | |
| 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); | |
| console.log('Ground added at y=0'); | |
| // Building rules | |
| const buildingColors = [0x888888, 0x666666, 0x999999]; | |
| const buildingRules = [ | |
| {{name: "Simple", axiom: "F", rules: {{"F": "F[+F][-F]"}}, iterations: 1, baseHeight: 5, baseWidth: 4, baseDepth: 4, angle: Math.PI/4, probability: 1}} | |
| ]; | |
| 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 * scale.x; | |
| const height = rule.baseHeight * scale.y; | |
| const depth = rule.baseDepth * 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 = 2, spacing = 15; // Smaller city for debugging | |
| for (let x = -citySize; x <= citySize; x++) {{ | |
| for (let z = -citySize; z <= citySize; z++) {{ | |
| if (Math.random() < 0.5) continue; // Fewer buildings | |
| const position = new THREE.Vector3(x * spacing, 0, z * spacing); | |
| const building = interpretLSystem(buildingRules[0], position, new THREE.Euler()); | |
| scene.add(building); | |
| buildings.push(building); | |
| console.log('Building added at:', position); | |
| }} | |
| }} | |
| const roadWidth = 4; | |
| for (let x = -citySize; x <= citySize; x++) {{ | |
| const road = new THREE.Mesh( | |
| new THREE.PlaneGeometry(roadWidth, citySize * 2 * spacing + roadWidth), | |
| new THREE.MeshStandardMaterial({{color: 0x333333}}) | |
| ); | |
| 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: 0x333333}}) | |
| ); | |
| road.rotation.x = -Math.PI / 2; | |
| road.position.set(0, 0.01, z * spacing); | |
| scene.add(road); | |
| }} | |
| for (let x = -citySize; x <= citySize; x++) {{ | |
| for (let z = -citySize; z <= citySize; z++) {{ | |
| const light = new THREE.PointLight(0xffff99, 1, 20); | |
| light.position.set(x * spacing, 5, z * spacing); | |
| light.castShadow = true; | |
| scene.add(light); | |
| lights.push(light); | |
| console.log('Light added at:', light.position); | |
| }} | |
| }} | |
| }} | |
| function evolveCity() {{ | |
| // Simplified for debugging | |
| }} | |
| function spawnFood() {{ | |
| if (foodItems.length < 5) {{ | |
| const food = new THREE.Mesh( | |
| new THREE.BoxGeometry(1, 1, 1), | |
| new THREE.MeshStandardMaterial({{color: 0xffff00}}) | |
| ); | |
| const x = (Math.random() * 30) - 15; | |
| const z = (Math.random() * 30) - 15; | |
| food.position.set(x, 0.5, z); | |
| foodItems.push(food); | |
| scene.add(food); | |
| console.log('Food spawned at:', food.position); | |
| }} | |
| }} | |
| 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 }}; | |
| console.log('Snake reset at:', snake[0].position); | |
| }} | |
| // 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) > 50 || Math.abs(newHead.position.z) > 50) {{ | |
| 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(); | |
| score += 2; | |
| players[playerName].score = score; | |
| players[playerName].length = snake.length; | |
| updateUI(); | |
| break; | |
| }} else {{ | |
| const tail = snake.pop(); | |
| scene.remove(tail); | |
| }} | |
| }} | |
| }} | |
| function updateLighting(delta) {{ | |
| lights.forEach(light => light.intensity = 1); // Fixed for debugging | |
| scene.background = new THREE.Color(0x87CEEB); // Fixed sky color | |
| }} | |
| function updateUI() {{ | |
| document.getElementById('players').textContent = `Players: ${{Object.keys(players).length}}`; | |
| document.getElementById('score').textContent = `Score: ${{score}}`; | |
| document.getElementById('length').textContent = `Length: ${{snake.length}}`; | |
| debug.innerHTML = `Scene objects: ${{scene.children.length}}<br>Buildings: ${{buildings.length}}<br>Snake: ${{snake.length}}`; | |
| }} | |
| // 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); | |
| updateLighting(delta); | |
| spawnFood(); | |
| updateUI(); | |
| renderer.render(scene, camera); | |
| }} | |
| // Initialize | |
| resetSnake(); | |
| createCity(); | |
| spawnFood(); | |
| animate(); | |
| console.log('Game initialized'); | |
| }} catch (e) {{ | |
| console.error('Error in game initialization:', e); | |
| document.getElementById('debug').innerHTML = 'Error: ' + e.message; | |
| }} | |
| </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) | |
| message = "Voice message received" | |
| asyncio.run(save_chat_entry(st.session_state.username, message)) | |
| # Start WebSocket Server in Main Event Loop | |
| async def main_async(): | |
| if not st.session_state.get('server_running', False): | |
| await start_websocket_server() | |
| # Run the WebSocket server in the main event loop | |
| loop = asyncio.get_event_loop() | |
| if not st.session_state.get('server_running', False): | |
| loop.run_until_complete(main_async()) | |
| st.sidebar.write(""" | |
| ### How to Play | |
| - **W/A/S/D or Arrow Keys**: Move your snake | |
| - Eat yellow cubes to grow and score | |
| - City has buildings and lights at intersections | |
| - Chat with other players in real-time | |
| """) |