Spaces:

OrbitMC
/

yt

Sleeping

App Files Files Community

OrbitMC commited on Jan 19

Commit

cc962ce

verified ·

1 Parent(s): 69ee610

Update app.py

Browse files

Files changed (1) hide show

app.py +448 -360

app.py CHANGED Viewed

@@ -4,432 +4,520 @@ eventlet.monkey_patch()
 from flask import Flask, render_template_string, request
 from flask_socketio import SocketIO, emit
 import random
-import math
 import time
-from threading import Lock
-# --- CONFIGURATION ---
-WIDTH, HEIGHT = 2000, 2000  # Virtual world size
-BaseSpeed = 5
-Friction = 0.96  # Slippery space physics
-MaxSpeed = 15
-ArenaShrinkRate = 0.5 # Pixels per tick
-# --- APP SETUP ---
 app = Flask(__name__)
-app.config['SECRET_KEY'] = 'secret!'
 socketio = SocketIO(app, async_mode='eventlet', cors_allowed_origins='*')
 # --- GAME STATE ---
-thread = None
-thread_lock = Lock()
-game_active = True
-# Data structures
-players = {} # {sid: {x, y, r, color, name, vx, vy, score, dead}}
-food = []    # [{x, y, r, color}]
-arena_radius = 1000
-start_time = time.time()
-# --- HTML/JS CLIENT ---
-# We embed the HTML here to keep it 1 file.
 HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Orbit Bumpers</title>
     <style>
-        body { margin: 0; overflow: hidden; background: #0b0b14; font-family: 'Segoe UI', Tahoma, sans-serif; color: white; touch-action: none; }
-        #loginOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; }
-        input { padding: 15px; font-size: 20px; border-radius: 30px; border: none; outline: none; text-align: center; margin-bottom: 20px; width: 80%; max-width: 300px; }
-        button { padding: 15px 40px; font-size: 20px; border-radius: 30px; border: none; cursor: pointer; background: #ff0055; color: white; font-weight: bold; transition: transform 0.1s; }
-        button:active { transform: scale(0.95); }
-        #uiLayer { position: absolute; top: 10px; left: 10px; pointer-events: none; z-index: 5; }
-        #leaderboard { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 10px; pointer-events: none; text-align: right; }
-        #deathScreen { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
-        h1 { margin: 0; text-shadow: 0 0 10px #ff0055; }
     </style>
 </head>
 <body>
-    <div id="loginOverlay">
-        <h1>ORBIT BUMPERS</h1>
-        <p>Knock them out. Eat stars. Don't fall.</p>
-        <input type="text" id="usernameInput" placeholder="Enter Nickname" maxlength="10">
-        <button onclick="startGame()">BOOST!</button>
     </div>
-    <div id="uiLayer">
-        Score: <span id="scoreVal">0</span> | Mass: <span id="massVal">20</span>
-    </div>
-    <div id="leaderboard">
-        <b>TOP ORBITS</b><br>
-        <div id="lbContent"></div>
-    </div>
-    <div id="deathScreen">
-        <h1 style="font-size: 50px; color: red;">ELIMINATED</h1>
-        <p>Refresh to rejoin</p>
-    </div>
-    <canvas id="gameCanvas"></canvas>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
-    <script>
-        const socket = io();
-        const canvas = document.getElementById('gameCanvas');
-        const ctx = canvas.getContext('2d');
-        let width, height;
-        let mySocketId = null;
-        let camX = 0, camY = 0;
-        let gameState = { players: {}, food: [], arena_r: 1000 };
-        let particles = [];
-        // --- AUDIO SYSTEM (Synth) ---
-        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-        function playSound(type) {
-            if (audioCtx.state === 'suspended') audioCtx.resume();
-            const osc = audioCtx.createOscillator();
-            const gain = audioCtx.createGain();
-            osc.connect(gain);
-            gain.connect(audioCtx.destination);
-            const now = audioCtx.currentTime;
-            if (type === 'bump') {
-                osc.type = 'square';
-                osc.frequency.setValueAtTime(150, now);
-                osc.frequency.exponentialRampToValueAtTime(40, now + 0.2);
-                gain.gain.setValueAtTime(0.1, now);
-                gain.gain.exponentialRampToValueAtTime(0.01, now + 0.2);
-                osc.start(now);
-                osc.stop(now + 0.2);
-            } else if (type === 'eat') {
-                osc.type = 'sine';
-                osc.frequency.setValueAtTime(600, now);
-                osc.frequency.exponentialRampToValueAtTime(1200, now + 0.1);
-                gain.gain.setValueAtTime(0.05, now);
-                gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
-                osc.start(now);
-                osc.stop(now + 0.1);
-            } else if (type === 'dash') {
-                osc.type = 'triangle';
-                osc.frequency.setValueAtTime(200, now);
-                osc.frequency.linearRampToValueAtTime(100, now + 0.3);
-                gain.gain.setValueAtTime(0.1, now);
-                gain.gain.linearRampToValueAtTime(0, now + 0.3);
-                osc.start(now);
-                osc.stop(now + 0.3);
-            }
         }
-        // --- RESIZE HANDLING ---
-        function resize() {
-            width = window.innerWidth;
-            height = window.innerHeight;
-            canvas.width = width;
-            canvas.height = height;
         }
-        window.addEventListener('resize', resize);
-        resize();
-        // --- CONTROLS ---
-        let mouseX = width/2, mouseY = height/2;
-        // PC
-        window.addEventListener('mousemove', (e) => {
-            mouseX = e.clientX;
-            mouseY = e.clientY;
-        });
-        window.addEventListener('mousedown', () => {
-            sendInput(true);
-        });
-        window.addEventListener('mouseup', () => {
-            sendInput(false);
-        });
-        // Mobile
-        window.addEventListener('touchstart', (e) => {
-            mouseX = e.touches[0].clientX;
-            mouseY = e.touches[0].clientY;
-            sendInput(true);
-        });
-        window.addEventListener('touchend', () => {
-            sendInput(false);
-        });
-        window.addEventListener('touchmove', (e) => {
-            mouseX = e.touches[0].clientX;
-            mouseY = e.touches[0].clientY;
-            e.preventDefault();
-        }, {passive: false});
-        function sendInput(boosting) {
-            if(!mySocketId || !gameState.players[mySocketId]) return;
-            // Calculate angle relative to center of screen (player is always center)
-            const dx = mouseX - width/2;
-            const dy = mouseY - height/2;
-            const angle = Math.atan2(dy, dx);
-            socket.emit('input', { angle: angle, boost: boosting });
-            if(boosting) playSound('dash');
         }
-        function startGame() {
-            const name = document.getElementById('usernameInput').value || "Unknown";
-            document.getElementById('loginOverlay').style.display = 'none';
-            socket.emit('join', { name: name });
-            // Start bg music loop? (Browser policy prevents auto-audio, handled by clicks)
         }
-        // --- SOCKET EVENTS ---
-        socket.on('connect', () => { mySocketId = socket.id; });
-        socket.on('game_update', (data) => {
-            gameState = data;
-            // Handle My Player Specifics
-            if (gameState.players[mySocketId]) {
-                const me = gameState.players[mySocketId];
-                camX = me.x;
-                camY = me.y;
-                document.getElementById('scoreVal').innerText = me.score;
-                document.getElementById('massVal').innerText = Math.floor(me.r);
-            } else if (mySocketId) {
-                // I died
-               // document.getElementById('deathScreen').style.display = 'block';
-            }
-            updateLeaderboard();
-        });
-        socket.on('sound_event', (data) => {
-            playSound(data.type);
         });
-        // --- RENDER LOOP ---
-        function draw() {
-            ctx.fillStyle = '#0b0b14'; // Background
-            ctx.fillRect(0, 0, width, height);
-            ctx.save();
-            // Camera follow logic
-            ctx.translate(width/2 - camX, height/2 - camY);
-            // 1. Draw Arena Boundary
-            ctx.beginPath();
-            ctx.arc(0, 0, gameState.arena_r, 0, Math.PI * 2);
-            ctx.strokeStyle = '#ff0055';
-            ctx.lineWidth = 20;
-            ctx.stroke();
-            // Grid lines inside
-            ctx.strokeStyle = 'rgba(255,255,255,0.05)';
-            ctx.lineWidth = 2;
-            for(let i=-2000; i<2000; i+=100) {
-                ctx.beginPath(); ctx.moveTo(i, -2000); ctx.lineTo(i, 2000); ctx.stroke();
-                ctx.beginPath(); ctx.moveTo(-2000, i); ctx.lineTo(2000, i); ctx.stroke();
-            }
-            // 2. Draw Food
-            gameState.food.forEach(f => {
-                ctx.beginPath();
-                ctx.arc(f.x, f.y, f.r, 0, Math.PI*2);
-                ctx.fillStyle = f.color;
-                ctx.shadowBlur = 10;
-                ctx.shadowColor = f.color;
-                ctx.fill();
-                ctx.shadowBlur = 0;
-            });
-            // 3. Draw Players
-            for (let id in gameState.players) {
-                const p = gameState.players[id];
-                if(p.dead) continue;
-                // Body
-                ctx.beginPath();
-                ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
-                ctx.fillStyle = p.color;
-                ctx.fill();
-                // Border (white if it's me)
-                ctx.lineWidth = 3;
-                ctx.strokeStyle = (id === mySocketId) ? '#ffffff' : 'rgba(0,0,0,0.3)';
-                ctx.stroke();
-                // Name
-                ctx.fillStyle = 'white';
-                ctx.font = 'bold 14px Arial';
-                ctx.textAlign = 'center';
-                ctx.fillText(p.name, p.x, p.y - p.r - 10);
             }
-            ctx.restore();
-            requestAnimationFrame(draw);
         }
-        function updateLeaderboard() {
-            const sorted = Object.values(gameState.players).sort((a,b) => b.score - a.score).slice(0, 5);
-            let html = "";
-            sorted.forEach(p => {
-                html += `<div><span style="color:${p.color}">●</span> ${p.name}: ${p.score}</div>`;
-            });
-            document.getElementById('lbContent').innerHTML = html;
         }
         draw();
-    </script>
 </body>
 </html>
 """
-# --- BACKEND LOGIC ---
-def init_food():
-    # Spawn 50 random food pellets
-    for _ in range(50):
-        food.append({
-            'x': random.randint(-1000, 1000),
-            'y': random.randint(-1000, 1000),
-            'r': random.randint(3, 6),
-            'color': random.choice(['#0ff', '#ff0', '#f0f', '#0f0'])
-        })
-init_food()
 @app.route('/')
 def index():
     return render_template_string(HTML_TEMPLATE)
 @socketio.on('join')
-def handle_join(data):
-    # Spawn player
-    angle = random.uniform(0, math.pi * 2)
-    dist = random.uniform(0, 500)
     players[request.sid] = {
-        'x': math.cos(angle) * dist,
-        'y': math.sin(angle) * dist,
-        'r': 20,
-        'color': f'hsl({random.randint(0,360)}, 70%, 50%)',
-        'name': data.get('name', 'Guest')[:10],
-        'vx': 0,
-        'vy': 0,
-        'score': 0,
-        'boost': False,
-        'angle_input': 0,
-        'dead': False
     }
-    emit('game_update', get_state(), broadcast=True)
-@socketio.on('input')
-def handle_input(data):
     if request.sid in players:
         p = players[request.sid]
-        if not p['dead']:
-            p['angle_input'] = data['angle']
-            p['boost'] = data['boost']
 @socketio.on('disconnect')
-def handle_disconnect():
     if request.sid in players:
         del players[request.sid]
-def get_state():
-    return {'players': players, 'food': food, 'arena_r': arena_radius}
-def game_loop():
-    global arena_radius
     while True:
-        socketio.sleep(0.016) # ~60 FPS
-        # Shrink Arena Logic (Battle Royale)
-        if arena_radius > 200:
-            arena_radius -= 0.1
-        # Replenish food
-        if len(food) < 50:
-             food.append({
-                'x': random.randint(int(-arena_radius), int(arena_radius)),
-                'y': random.randint(int(-arena_radius), int(arena_radius)),
-                'r': random.randint(3, 6),
-                'color': random.choice(['#0ff', '#ff0', '#f0f', '#0f0'])
-            })
-        for sid, p in players.items():
-            if p['dead']: continue
-            # 1. Physics Movement
-            # Acceleration based on input
-            accel = 0.5
-            if p['boost']: accel = 1.5 # Boost speed
-            # Simple trigonometry for direction
-            if p['boost']:
-                p['vx'] += math.cos(p['angle_input']) * accel
-                p['vy'] += math.sin(p['angle_input']) * accel
-            # Friction (Drag)
-            p['vx'] *= Friction
-            p['vy'] *= Friction
-            # Apply Position
-            p['x'] += p['vx']
-            p['y'] += p['vy']
-            # 2. Arena Boundary Check (Death)
-            dist_from_center = math.sqrt(p['x']**2 + p['y']**2)
-            if dist_from_center > arena_radius:
-                p['dead'] = True
-                socketio.emit('sound_event', {'type': 'bump'}, to=sid) # Play death sound locally
-                continue
-            # 3. Eat Food
-            # Iterate backwards to remove safely
-            for i in range(len(food)-1, -1, -1):
-                f = food[i]
-                dx = p['x'] - f['x']
-                dy = p['y'] - f['y']
-                dist = math.sqrt(dx*dx + dy*dy)
-                if dist < p['r'] + f['r']:
-                    p['r'] += 0.5 # Grow
-                    p['score'] += 10
-                    if p['r'] > 60: p['r'] = 60 # Max size cap
-                    food.pop(i)
-                    socketio.emit('sound_event', {'type': 'eat'}, to=sid)
-            # 4. Player vs Player Collision (Bumping)
-            for other_sid, other in players.items():
-                if sid == other_sid or other['dead']: continue
-                dx = other['x'] - p['x']
-                dy = other['y'] - p['y']
-                dist = math.sqrt(dx*dx + dy*dy)
-                min_dist = p['r'] + other['r']
-                if dist < min_dist:
-                    # Physics: Elastic Collision response
-                    angle = math.atan2(dy, dx)
-                    force = 15 # Bounce force
-                    # Push them apart immediately (anti-stick)
-                    overlap = min_dist - dist
-                    p['x'] -= math.cos(angle) * overlap/2
-                    p['y'] -= math.sin(angle) * overlap/2
-                    other['x'] += math.cos(angle) * overlap/2
-                    other['y'] += math.sin(angle) * overlap/2
-                    # Swap Momentum roughly
-                    p['vx'] -= math.cos(angle) * force
-                    p['vy'] -= math.sin(angle) * force
-                    other['vx'] += math.cos(angle) * force
-                    other['vy'] += math.sin(angle) * force
-                    socketio.emit('sound_event', {'type': 'bump'})
-        socketio.emit('game_update', get_state())
-# Start Game Thread
-with thread_lock:
-    if thread is None:
-        thread = socketio.start_background_task(game_loop)
 if __name__ == '__main__':
     socketio.run(app, host='0.0.0.0', port=7860)

 from flask import Flask, render_template_string, request
 from flask_socketio import SocketIO, emit
 import random
 import time
+# --- SERVER CONFIGURATION ---
+WIDTH = 375
+HEIGHT = 812
 app = Flask(__name__)
+app.config['SECRET_KEY'] = 'jungle_jump_secret'
 socketio = SocketIO(app, async_mode='eventlet', cors_allowed_origins='*')
 # --- GAME STATE ---
+players = {} # {sid: {name, x, y, score, faceRight, vx}}
+platforms = [] # Shared map
+highest_y_generated = HEIGHT
+# Generate initial world (Start with 100 platforms)
+def generate_platform(y_pos):
+    # REMOVED 'break' type as requested
+    p_type = 'normal'
+    vx = 0
+    # Small chance for moving platform
+    if random.random() < 0.2:
+        vx = 2 if random.random() > 0.5 else -2
+    return {
+        'id': int(time.time() * 1000) + random.randint(0,1000),
+        'x': random.random() * (WIDTH - 60),
+        'y': y_pos,
+        'w': 60,
+        'h': 15,
+        'type': p_type,
+        'vx': vx,
+        'broken': False
+    }
+def init_world():
+    global platforms, highest_y_generated
+    platforms = []
+    # Base platform
+    platforms.append({'id': 0, 'x': WIDTH/2 - 30, 'y': HEIGHT - 150, 'w': 60, 'h': 15, 'type': 'normal', 'vx': 0, 'broken': False})
+    # Generate up
+    y = HEIGHT - 250
+    for _ in range(200): # Pre-generate 200 platforms
+        platforms.append(generate_platform(y))
+        y -= (80 + random.random() * 40)
+    highest_y_generated = y
+init_world()
+# --- HTML TEMPLATE (Your Game Code Modified) ---
 HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Jungle Jump Multiplayer</title>
     <style>
+        body { margin: 0; background-color: #222; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Comic Sans MS', cursive, sans-serif; touch-action: none; user-select: none; }
+        #gameContainer { position: relative; width: 100%; height: 100%; max-width: 50vh; aspect-ratio: 9/16; background: #659d33; box-shadow: 0 0 20px rgba(0,0,0,0.5); overflow: hidden; }
+        canvas { display: block; width: 100%; height: 100%; }
+        /* UI Overlays */
+        #loginScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 20; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; }
+        #loginScreen input { padding: 15px; font-size: 20px; border-radius: 10px; border: none; text-align: center; margin-bottom: 20px; }
+        #loginScreen button { padding: 15px 30px; font-size: 20px; background: #d8c222; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; }
+        #leaderboard { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 8px; color: white; font-size: 12px; pointer-events: none; z-index: 5; }
+        #score { position: absolute; top: 20px; right: 20px; font-size: 28px; font-weight: bold; color: #000; text-shadow: 1px 1px 0px rgba(255,255,255,0.5); z-index: 5; }
+        #gameOverScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; flex-direction: column; justify-content: center; align-items: center; color: white; z-index: 10; }
+        #gameOverScreen h1 { font-size: 40px; color: #d8c222; margin-bottom: 10px; }
+        #restartBtn { padding: 15px 40px; font-size: 24px; background: #d8c222; border: 4px solid #000; border-radius: 15px; cursor: pointer; font-weight: bold; }
     </style>
 </head>
 <body>
+<div id="gameContainer">
+    <canvas id="gameCanvas"></canvas>
+    <div id="loginScreen">
+        <h1>JUNGLE JUMP ONLINE</h1>
+        <input type="text" id="usernameInput" placeholder="Enter Name" maxlength="10">
+        <button onclick="startGame()">JOIN GAME</button>
     </div>
+    <div id="leaderboard">Loading...</div>
+    <div id="score">0</div>
+    <div id="gameOverScreen">
+        <h1>GAME OVER</h1>
+        <p id="finalScore" style="font-size: 24px; margin-bottom: 30px;">Score: 0</p>
+        <button id="restartBtn">Try Again</button>
+    </div>
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+<script>
+    // --- COOKIE HELPERS ---
+    function setCookie(cname, cvalue, exdays) {
+        const d = new Date();
+        d.setTime(d.getTime() + (exdays*24*60*60*1000));
+        let expires = "expires="+ d.toUTCString();
+        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+    }
+    function getCookie(cname) {
+        let name = cname + "=";
+        let decodedCookie = decodeURIComponent(document.cookie);
+        let ca = decodedCookie.split(';');
+        for(let i = 0; i <ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) == ' ') { c = c.substring(1); }
+            if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
+        }
+        return "";
+    }
+    // --- SETUP ---
+    const socket = io();
+    const canvas = document.getElementById('gameCanvas');
+    const ctx = canvas.getContext('2d', { alpha: false });
+    const GAME_W = 375;
+    const GAME_H = 812;
+    // Load Username
+    const savedName = getCookie("username");
+    if(savedName) document.getElementById('usernameInput').value = savedName;
+    let gameState = 'LOGIN';
+    let myId = null;
+    let score = 0;
+    let cameraY = 0;
+    // Entities
+    let platforms = []; // Synced from server
+    let otherPlayers = {}; // {id: {x,y,vx...}}
+    const player = {
+        x: GAME_W / 2 - 20,
+        y: GAME_H - 200,
+        w: 40, h: 40,
+        vx: 0, vy: 0,
+        faceRight: true,
+        dead: false
+    };
+    const keys = { left: false, right: false };
+    const GRAVITY = 0.4;
+    const JUMP_FORCE = -11.5;
+    const MOVEMENT_SPEED = 6.5;
+    // --- SOCKET LISTENERS ---
+    socket.on('connect', () => { myId = socket.id; });
+    socket.on('world_data', (data) => {
+        // Initial map load or refresh
+        platforms = data.platforms;
+    });
+    socket.on('game_update', (data) => {
+        // Update other players
+        otherPlayers = data.players;
+        // Update dynamic platforms (moving ones)
+        if(data.platforms) {
+            // Merge new platforms or update existing positions
+            data.platforms.forEach(srvPlat => {
+                const idx = platforms.findIndex(p => p.id === srvPlat.id);
+                if(idx !== -1) {
+                    platforms[idx].x = srvPlat.x; // Update position of moving plats
+                } else {
+                    platforms.push(srvPlat); // Add new
+                }
+            });
+            // Cleanup old platforms locally to save memory
+            platforms = platforms.filter(p => p.y > cameraY - 100);
         }
+        // Update Leaderboard
+        let lbHtml = "<b>TOP JUMPERS</b><br>";
+        let sorted = Object.values(otherPlayers).sort((a,b) => b.score - a.score).slice(0,5);
+        sorted.forEach(p => {
+            lbHtml += `${p.name}: ${p.score}<br>`;
+        });
+        document.getElementById('leaderboard').innerHTML = lbHtml;
+    });
+    function startGame() {
+        const name = document.getElementById('usernameInput').value || "Guest";
+        setCookie("username", name, 30); // Save for 30 days
+        document.getElementById('loginScreen').style.display = 'none';
+        socket.emit('join', { name: name });
+        initGame();
+    }
+    function initGame() {
+        score = 0;
+        cameraY = 0;
+        player.x = GAME_W / 2 - 20;
+        player.y = GAME_H - 250;
+        player.vx = 0;
+        player.vy = 0;
+        player.dead = false;
+        document.getElementById('gameOverScreen').style.display = 'none';
+        document.getElementById('score').innerText = 0;
+        gameState = 'PLAYING';
+        requestAnimationFrame(gameLoop);
+    }
+    // --- DRAWING (Reused & Adapted) ---
+    function drawDoodler(x, y, w, h, facingRight, isMe, name) {
+        ctx.save();
+        ctx.translate(x + w/2, y + h/2);
+        if (!facingRight) ctx.scale(-1, 1);
+        // Legs
+        ctx.strokeStyle = '#000';
+        ctx.lineWidth = 3;
+        ctx.beginPath();
+        ctx.moveTo(-10, 15); ctx.lineTo(-12, 22);
+        ctx.moveTo(10, 15); ctx.lineTo(12, 22);
+        ctx.stroke();
+        // Body color
+        ctx.fillStyle = isMe ? '#d8c222' : 'rgba(200, 100, 100, 0.8)'; // Others are reddish
+        ctx.beginPath();
+        ctx.moveTo(-15, -10); ctx.lineTo(-15, 15);
+        ctx.quadraticCurveTo(0, 20, 15, 15); ctx.lineTo(15, -10);
+        ctx.quadraticCurveTo(0, -20, -15, -10);
+        ctx.fill();
+        ctx.stroke();
+        // Snout
+        ctx.beginPath(); ctx.rect(12, -8, 12, 12); ctx.fill(); ctx.stroke();
+        // Eye
+        ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(8, -5, 6, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
+        ctx.fillStyle = '#000'; ctx.beginPath(); ctx.arc(10, -5, 2, 0, Math.PI * 2); ctx.fill();
+        // Backpack
+        ctx.strokeStyle = '#5c6b1f';
+        ctx.beginPath(); ctx.moveTo(-14, 5); ctx.lineTo(14, 5); ctx.stroke();
+        ctx.restore();
+        // Draw Name Tag
+        if (name) {
+            ctx.fillStyle = isMe ? '#ffff00' : '#ffffff';
+            ctx.font = 'bold 12px Arial';
+            ctx.textAlign = 'center';
+            ctx.fillText(name, x + w/2, y - 15);
         }
+    }
+    function drawPlatform(p) {
+        // Only draw if visible
+        if (p.y > cameraY + GAME_H || p.y < cameraY - 50) return;
+        let color = '#76c442'; // Green (Normal)
+        let detailColor = '#9fe060';
+        if (p.vx !== 0) { color = '#4287c4'; detailColor = '#60a9e0'; } // Blue (Moving)
+        ctx.save();
+        // Adjust for Camera
+        const drawY = p.y - cameraY;
+        ctx.fillStyle = color;
+        ctx.strokeStyle = '#000';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.roundRect(p.x, drawY, p.w, p.h, 6);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = detailColor;
+        ctx.beginPath();
+        ctx.roundRect(p.x + 3, drawY + 2, p.w - 6, p.h/2 - 2, 3);
+        ctx.fill();
+        ctx.restore();
+    }
+    function drawBackground() {
+        ctx.fillStyle = '#659d33';
+        ctx.fillRect(0, 0, GAME_W, GAME_H);
+        // Grid Effect
+        ctx.strokeStyle = 'rgba(0, 30, 0, 0.05)';
+        ctx.lineWidth = 2;
+        const gridSize = 40;
+        const offset = Math.floor(cameraY) % gridSize;
+        ctx.beginPath();
+        for(let x = 0; x <= GAME_W; x += gridSize) { ctx.moveTo(x, 0); ctx.lineTo(x, GAME_H); }
+        for(let y = -offset; y <= GAME_H; y += gridSize) { ctx.moveTo(0, y); ctx.lineTo(GAME_W, y); }
+        ctx.stroke();
+    }
+    // --- GAME LOOP ---
+    function update() {
+        if (gameState !== 'PLAYING') return;
+        // Input
+        if (keys.left) player.vx = -MOVEMENT_SPEED;
+        else if (keys.right) player.vx = MOVEMENT_SPEED;
+        else player.vx *= 0.8;
+        player.x += player.vx;
+        if (player.x + player.w < 0) player.x = GAME_W;
+        if (player.x > GAME_W) player.x = -player.w;
+        if (player.vx > 0.5) player.faceRight = true;
+        if (player.vx < -0.5) player.faceRight = false;
+        player.vy += GRAVITY;
+        player.y += player.vy;
+        // Camera Logic (Player never goes above 45% of screen)
+        const threshold = cameraY + (GAME_H * 0.45);
+        if (player.y < threshold) {
+            let diff = threshold - player.y;
+            cameraY -= diff; // Camera goes UP (Y decreases)
+            score += Math.floor(diff/2);
+            document.getElementById('score').innerText = score;
         }
+        // Platform Collision
+        if (player.vy > 0) {
+            platforms.forEach(p => {
+                if (player.x + player.w > p.x + 5 && player.x < p.x + p.w - 5 &&
+                    player.y + player.h > p.y && player.y + player.h < p.y + p.h + 10) {
+                    player.vy = JUMP_FORCE;
+                }
+            });
         }
+        // Death
+        if (player.y > cameraY + GAME_H) {
+            player.dead = true;
+            gameState = 'GAMEOVER';
+            document.getElementById('finalScore').innerText = "Score: " + score;
+            document.getElementById('gameOverScreen').style.display = 'flex';
+            socket.emit('player_died');
+        }
+        // Send Update to Server (Rate limited by frame, could be throttled)
+        socket.emit('update', {
+            x: player.x,
+            y: player.y,
+            vx: player.vx,
+            faceRight: player.faceRight,
+            score: score
         });
+    }
+    function draw() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        drawBackground();
+        // Draw Platforms
+        platforms.forEach(drawPlatform);
+        // Draw Other Players
+        for (let id in otherPlayers) {
+            if(id === myId) continue;
+            const p = otherPlayers[id];
+            // Only draw if on screen
+            if (p.y > cameraY - 50 && p.y < cameraY + GAME_H + 50) {
+                drawDoodler(p.x, p.y - cameraY, 40, 40, p.faceRight, false, p.name);
             }
         }
+        // Draw Me
+        if (gameState !== 'GAMEOVER') {
+            drawDoodler(player.x, player.y - cameraY, player.w, player.h, player.faceRight, true, "YOU");
         }
+    }
+    function gameLoop() {
+        update();
         draw();
+        if(gameState !== 'GAMEOVER' || gameState === 'LOGIN') {
+            requestAnimationFrame(gameLoop);
+        }
+    }
+    // --- INPUT ---
+    window.addEventListener('keydown', e => {
+        if (e.code === 'ArrowLeft') keys.left = true;
+        if (e.code === 'ArrowRight') keys.right = true;
+    });
+    window.addEventListener('keyup', e => {
+        if (e.code === 'ArrowLeft') keys.left = false;
+        if (e.code === 'ArrowRight') keys.right = false;
+    });
+    // Touch
+    canvas.addEventListener('touchstart', e => {
+        e.preventDefault();
+        const rect = canvas.getBoundingClientRect();
+        const t = e.touches[0];
+        const x = (t.clientX - rect.left) * (GAME_W / rect.width);
+        if (x < GAME_W / 2) { keys.left = true; keys.right = false; }
+        else { keys.right = true; keys.left = false; }
+    }, {passive: false});
+    canvas.addEventListener('touchend', e => {
+        e.preventDefault();
+        keys.left = false; keys.right = false;
+    });
+    document.getElementById('restartBtn').addEventListener('click', initGame);
+    // Resize
+    function resize() {
+        canvas.width = GAME_W;
+        canvas.height = GAME_H;
+    }
+    window.addEventListener('resize', resize);
+    resize();
+</script>
 </body>
 </html>
 """
+# --- FLASK ROUTES & EVENTS ---
 @app.route('/')
 def index():
     return render_template_string(HTML_TEMPLATE)
 @socketio.on('join')
+def on_join(data):
     players[request.sid] = {
+        'name': data.get('name', 'Guest'),
+        'x': WIDTH/2, 'y': HEIGHT - 200,
+        'vx': 0, 'score': 0, 'faceRight': True
     }
+    # Send current platforms to new user
+    emit('world_data', {'platforms': platforms})
+@socketio.on('update')
+def on_update(data):
     if request.sid in players:
         p = players[request.sid]
+        p.update(data)
+        # Infinite Level Generation Logic
+        # If a player goes high enough, generate more platforms
+        # Note: Player Y coordinate gets smaller as they go up (0 is top)
+        global highest_y_generated
+        if p['y'] < highest_y_generated + 800: # Buffer
+            for _ in range(10):
+                new_plat = generate_platform(highest_y_generated - (80 + random.random()*40))
+                platforms.append(new_plat)
+                highest_y_generated = new_plat['y']
+            # Keep platforms array size manageable (remove very old ones)
+            # Find the lowest player
+            lowest_y = max(pl['y'] for pl in players.values())
+            # Remove platforms 1000 pixels below the lowest player
+            # (In a real production app, be more careful here, but this works for jam code)
+            # global platforms
+            # platforms = [plat for plat in platforms if plat['y'] < lowest_y + 1000]
+@socketio.on('player_died')
+def on_died():
+    if request.sid in players:
+        # We don't delete them, just stop updating or reset score?
+        # For now, client handles reset, we just keep tracking
+        players[request.sid]['score'] = 0
 @socketio.on('disconnect')
+def on_disconnect():
     if request.sid in players:
         del players[request.sid]
+# Server Loop to broadcast state
+def server_loop():
     while True:
+        socketio.sleep(0.05) # 20 ticks per second
+        # Update moving platforms
+        for p in platforms:
+            if p['vx'] != 0:
+                p['x'] += p['vx']
+                if p['x'] < 0 or p['x'] + p['w'] > WIDTH:
+                    p['vx'] *= -1
+        # Broadcast state
+        socketio.emit('game_update', {
+            'players': players,
+            'platforms': [p for p in platforms if p['vx'] != 0] # Optim: Only send moving plats updates?
+            # Actually, for simplicity/sync, let's send players and rely on initial map for statics.
+            # But new plats need to be sent.
+            # For this simple version, let's just send the whole relevant chunk or just players + moving plats.
+        })
+        # To ensure new platforms are seen, we periodically send the top chunk
+        # Or better: The client simply requests/receives updates.
+        # For simplicity in this specific "One File" constraint:
+        socketio.emit('game_update', {
+            'players': players,
+            'platforms': platforms[-20:] # Send the newest 20 platforms constantly to ensure sync
+        })
+socketio.start_background_task(server_loop)
 if __name__ == '__main__':
     socketio.run(app, host='0.0.0.0', port=7860)