StreamlitGalaxianSnakeGame

Running

App Files Files Community

awacke1 commited on Mar 10

Commit

81bd88c

verified ·

1 Parent(s): e288c59

Update app.py

Browse files

Files changed (1) hide show

app.py +26 -39

app.py CHANGED Viewed

@@ -17,10 +17,10 @@ from audio_recorder_streamlit import audio_recorder
 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))
@@ -159,7 +159,7 @@ html_code = f"""
 <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; }}
@@ -183,7 +183,7 @@ html_code = f"""
 <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>
@@ -199,7 +199,7 @@ html_code = f"""
     <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')) || [];
@@ -208,26 +208,16 @@ html_code = f"""
         // 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();
@@ -342,6 +332,16 @@ html_code = f"""
                 road.position.set(0, 0.01, z * spacing);
                 scene.add(road);
             }}
         }}
         function evolveCity() {{
@@ -531,10 +531,6 @@ html_code = f"""
                     return;
                 }}
             }}
-            const headPos = newHead.position;
-            camera.position.set(headPos.x, headPos.y + 20, headPos.z + 30);
-            camera.lookAt(headPos);
         }}
         function updateQuineAgents(delta) {{
@@ -557,14 +553,14 @@ html_code = f"""
             }}
         }}
-        // 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)));
@@ -585,17 +581,9 @@ html_code = f"""
             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();
@@ -643,7 +631,6 @@ 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))
@@ -656,6 +643,6 @@ 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
 """)

 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))
 <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; }}
 <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>
     <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 = [], 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')) || [];
         // Scene setup
         const scene = new THREE.Scene();
         const camera = new THREE.PerspectiveCamera(75, {container_width} / {container_height}, 0.1, 1000);
+        camera.position.set(0, 100, 0); // Top-down view
+        camera.lookAt(0, 0, 0); // Looking straight down
         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.1); // Dim ambient for night effect
         scene.add(ambientLight);
         // Ground
         const textureLoader = new THREE.TextureLoader();
                 road.position.set(0, 0.01, z * spacing);
                 scene.add(road);
             }}
+            // Add city lights at intersections
+            for (let x = -citySize; x <= citySize; x++) {{
+                for (let z = -citySize; z <= citySize; z++) {{
+                    const light = new THREE.PointLight(0xffff99, 1, 20); // Yellowish light, intensity 1, distance 20
+                    light.position.set(x * spacing, 5, z * spacing); // 5 units above ground
+                    light.castShadow = true;
+                    scene.add(light);
+                    lights.push(light);
+                }}
+            }}
         }}
         function evolveCity() {{
                     return;
                 }}
             }}
         }}
         function updateQuineAgents(delta) {{
             }}
         }}
+        // Lighting cycle
         let cycleTime = 0;
         function updateLighting(delta) {{
             cycleTime += delta;
             const cycleDuration = 120;
             const angle = (cycleTime / cycleDuration) * Math.PI * 2;
+            const intensity = Math.max(0, Math.sin(angle)) * 0.5 + 0.5; // Varies between 0.5 and 1
+            lights.forEach(light => light.intensity = intensity);
             const dayColor = new THREE.Color(0x87CEEB);
             const nightColor = new THREE.Color(0x001133);
             scene.background = dayColor.clone().lerp(nightColor, Math.max(0, -Math.sin(angle)));
             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();
 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))
 ### 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 and lights at intersections
 - Chat with other players in real-time
 """)