Update app.py

app.py

@@ -20,7 +20,7 @@ nest_asyncio.apply()
 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!")
+st.write("Navigate a 3D city with continuous motion, eat food, and chat in real-time!")
 
 # Sliders for container size
 max_width = min(1200, st.session_state.get('window_width', 1200))
@@ -127,7 +127,7 @@ async def start_websocket_server():
         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
+        await asyncio.Future()
 
 # Chat Functions
 async def save_chat_entry(username, message):
@@ -157,8 +157,8 @@ html_code = f"""
     <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; background: #000; }}
+        body {{ margin: 0; overflow: hidden; font-family: Arial, sans-serif; background: #000; }}
+        #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;
@@ -184,11 +184,10 @@ html_code = f"""
             <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>Controls: W/A/S/D or Arrow Keys to steer</p>
             <p>Eat yellow cubes to grow and score!</p>
         </div>
         <div id="debug"></div>
@@ -198,18 +197,16 @@ html_code = f"""
     <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.05; // Faster movement
-            const initialLength = 3, playerName = "{st.session_state.username}";
-            const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
+            let score = 0, players = {{}}, foodItems = [], buildings = [];
+            let snake, moveLeft = false, moveRight = false, moveUp = false, moveDown = false;
+            const playerName = "{st.session_state.username}";
             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, 15, 20); // Lower, closer camera
+            camera.position.set(0, 15, 20);
             console.log('Camera initialized at:', camera.position);
 
             const renderer = new THREE.WebGLRenderer({{ antialias: true }});
@@ -229,7 +226,7 @@ html_code = f"""
 
             // Ground
             const textureLoader = new THREE.TextureLoader();
-            const groundGeometry = new THREE.PlaneGeometry(200, 200);
+            const groundGeometry = new THREE.PlaneGeometry(200, 1000); // Long scrolling ground
             const groundMaterial = new THREE.MeshStandardMaterial({{ 
                 color: 0x1a5e1a,
                 bumpMap: textureLoader.load('https://threejs.org/examples/textures/terrain/grasslight-big-nm.jpg'),
@@ -238,9 +235,20 @@ html_code = f"""
             const ground = new THREE.Mesh(groundGeometry, groundMaterial);
             ground.rotation.x = -Math.PI / 2;
             ground.receiveShadow = true;
+            ground.position.z = -500; // Start far back
             scene.add(ground);
             console.log('Ground added');
 
+            // Player (Snake Head)
+            const snakeGeometry = new THREE.BoxGeometry(1, 1, 1);
+            const snakeMaterial = new THREE.MeshPhongMaterial({{ color: 0x00ff00 }});
+            snake = new THREE.Mesh(snakeGeometry, snakeMaterial);
+            snake.position.set(0, 0.5, 0);
+            snake.castShadow = true;
+            scene.add(snake);
+            players[playerName] = {{ snake: snake, score: 0, length: 1 }};
+            console.log('Snake initialized at:', snake.position);
+
             // Building rules
             const buildingColors = [0x888888, 0x666666, 0x999999];
             const buildingRules = [
@@ -294,36 +302,18 @@ html_code = f"""
                 return buildingGroup;
             }}
 
-            function createCity() {{
-                const citySize = 3, spacing = 20; // Wider spacing
-                for (let x = -citySize; x <= citySize; x++) {{
-                    for (let z = -citySize; z <= citySize; z++) {{
-                        if (Math.random() < 0.7) 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 at:', position);
-                    }}
-                }}
-                const roadWidth = 12; // Wider roads
-                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}})
+            function spawnBuildings() {{
+                const cityWidth = 40, cityDepth = -1000;
+                for (let i = buildings.length; i < 20; i++) {{
+                    const position = new THREE.Vector3(
+                        Math.random() * cityWidth - cityWidth / 2,
+                        0,
+                        cityDepth + Math.random() * 1000
                     );
-                    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);
+                    const building = interpretLSystem(buildingRules[0], position, new THREE.Euler());
+                    buildings.push(building);
+                    scene.add(building);
+                    console.log('Building at:', position);
                 }}
             }}
 
@@ -333,120 +323,79 @@ html_code = f"""
                         new THREE.BoxGeometry(1, 1, 1),
                         new THREE.MeshStandardMaterial({{color: 0xffff00}})
                     );
-                    const x = (Math.random() * 60) - 30;
-                    const z = (Math.random() * 60) - 30;
-                    food.position.set(x, 0.5, z);
+                    food.position.set(
+                        Math.random() * 40 - 20,
+                        Math.random() * 10,
+                        -1000
+                    );
                     foodItems.push(food);
                     scene.add(food);
                     console.log('Food 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;
+                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;
                 }}
             }});
             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;
+                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;
                 }}
             }});
 
-            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(2)); // Faster step
-                newHead.castShadow = true;
-
-                if (Math.abs(newHead.position.x) > 100 || Math.abs(newHead.position.z) > 100) {{
-                    resetSnake();
-                    return;
-                }}
-
-                for (let i = 1; i < snake.length; i++) {{
-                    if (newHead.position.distanceTo(snake[i].position) < 0.9) {{
-                        resetSnake();
-                        return;
+            function updatePlayer(delta) {{
+                const speed = 10;
+                if (moveLeft && snake.position.x > -20) snake.position.x -= speed * delta;
+                if (moveRight && snake.position.x < 20) snake.position.x += speed * delta;
+                if (moveUp && snake.position.y < 15) snake.position.y += speed * delta;
+                if (moveDown && snake.position.y > 0.5) snake.position.y -= speed * delta;
+
+                // Continuous forward motion
+                const forwardSpeed = 20;
+                buildings.forEach(building => {{
+                    building.position.z += forwardSpeed * delta;
+                    if (building.position.z > 20) {{
+                        building.position.z = -1000;
+                        building.position.x = Math.random() * 40 - 20;
                     }}
-                }}
-
-                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]);
+                    if (snake.position.distanceTo(building.position) < 5) {{
+                        snake.position.set(0, 0.5, 0); // Reset on collision
+                    }}
+                }});
+                foodItems.forEach((food, i) => {{
+                    food.position.z += forwardSpeed * delta;
+                    if (food.position.z > 20) {{
+                        scene.remove(food);
                         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);
                     }}
-                }}
+                    if (snake.position.distanceTo(food.position) < 1) {{
+                        scene.remove(food);
+                        foodItems.splice(i, 1);
+                        score += 10;
+                        players[playerName].length += 1;
+                        spawnFood();
+                    }}
+                }});
 
-                const headPos = newHead.position;
-                camera.position.set(headPos.x, 15, headPos.z + 20); // Closer chase cam
-                camera.lookAt(headPos);
+                camera.position.set(snake.position.x, snake.position.y + 15, snake.position.z + 20);
+                camera.lookAt(snake.position);
             }}
 
             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: ${{scene.children.length}}<br>Buildings: ${{buildings.length}}<br>Snake: ${{snake.length}}`;
+                document.getElementById('length').textContent = `Length: ${{players[playerName].length}}`;
+                debug.innerHTML = `Scene: ${{scene.children.length}}<br>Buildings: ${{buildings.length}}<br>Food: ${{foodItems.length}}`;
             }}
 
             // WebSocket chat
@@ -469,7 +418,7 @@ html_code = f"""
                 const delta = (currentTime - lastTime) / 1000;
                 lastTime = currentTime;
 
-                updateSnake(delta);
+                updatePlayer(delta);
                 spawnFood();
                 updateUI();
 
@@ -477,8 +426,7 @@ html_code = f"""
             }}
 
             // Initialize
-            resetSnake();
-            createCity();
+            spawnBuildings();
             spawnFood();
             animate();
             console.log('Game initialized');
@@ -523,8 +471,8 @@ if not st.session_state.get('server_running', False):
 
 st.sidebar.write("""
 ### How to Play
-- **W/A/S/D or Arrow Keys**: Move your snake
+- **W/A/S/D or Arrow Keys**: Steer the snake (up/down/left/right)
 - Eat yellow cubes to grow and score
-- Wider roads and fewer buildings for easier movement
+- World moves continuously toward you
 - Chat with other players in real-time
 """)