Spaces:

OrbitMC
/

yt

Running

App Files Files Community

OrbitMC commited on Jan 19

Commit

69ee610

verified ·

1 Parent(s): 7250ed5

Update app.py

Browse files

Files changed (1) hide show

app.py +391 -624

app.py CHANGED Viewed

@@ -1,668 +1,435 @@
-from flask import Flask, render_template_string, request, send_file, jsonify
-import yt_dlp
-import os
-import uuid
-import threading
-import time
-import re
-app = Flask(__name__)
-# Directory for downloads
-DOWNLOAD_DIR = "/tmp/downloads"
-os.makedirs(DOWNLOAD_DIR, exist_ok=True)
-# HTML Template with Clean Responsive UI
 HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🎬 Media Downloader - MP4 & MP3</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            min-height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 20px;
-        }
-        .container {
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(20px);
-            border-radius: 24px;
-            padding: 40px;
-            max-width: 650px;
-            width: 100%;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .header {
-            text-align: center;
-            margin-bottom: 35px;
-        }
-        .logo {
-            font-size: 3.5rem;
-            margin-bottom: 15px;
-            animation: bounce 2s infinite;
-        }
-        @keyframes bounce {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-10px); }
-        }
-        h1 {
-            color: #fff;
-            font-size: 2rem;
-            font-weight: 700;
-            margin-bottom: 8px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .subtitle {
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 0.95rem;
-            font-weight: 300;
-        }
-        .input-section {
-            margin-bottom: 25px;
-        }
-        .input-wrapper {
-            position: relative;
-        }
-        .input-icon {
-            position: absolute;
-            left: 18px;
-            top: 50%;
-            transform: translateY(-50%);
-            font-size: 1.2rem;
-        }
-        input[type="text"] {
-            width: 100%;
-            padding: 18px 20px 18px 50px;
-            border: 2px solid rgba(255, 255, 255, 0.1);
-            border-radius: 16px;
-            background: rgba(255, 255, 255, 0.08);
-            color: #fff;
-            font-size: 1rem;
-            font-family: inherit;
-            transition: all 0.3s ease;
-        }
-        input[type="text"]:focus {
-            outline: none;
-            border-color: #667eea;
-            background: rgba(255, 255, 255, 0.12);
-            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
-        }
-        input[type="text"]::placeholder {
-            color: rgba(255, 255, 255, 0.4);
-        }
-        .btn-group {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-            margin-top: 25px;
-        }
-        .btn {
-            padding: 18px 28px;
-            border: none;
-            border-radius: 14px;
-            font-size: 1rem;
-            font-weight: 600;
-            font-family: inherit;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            position: relative;
-            overflow: hidden;
-        }
-        .btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: left 0.5s ease;
-        }
-        .btn:hover::before {
-            left: 100%;
-        }
-        .btn-mp4 {
-            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-            color: #fff;
-        }
-        .btn-mp3 {
-            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-            color: #fff;
-        }
-        .btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-        }
-        .btn:active {
-            transform: translateY(-1px);
-        }
-        .btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none !important;
-        }
-        .btn-icon {
-            font-size: 1.3rem;
-        }
-        .status {
-            margin-top: 25px;
-            padding: 18px 20px;
-            border-radius: 14px;
-            text-align: center;
-            font-weight: 500;
-            display: none;
-            animation: fadeIn 0.3s ease;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(-10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .status.loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 12px;
-            background: rgba(255, 193, 7, 0.15);
-            color: #ffc107;
-            border: 1px solid rgba(255, 193, 7, 0.3);
-        }
-        .status.success {
-            display: block;
-            background: rgba(76, 217, 100, 0.15);
-            color: #4cd964;
-            border: 1px solid rgba(76, 217, 100, 0.3);
-        }
-        .status.error {
-            display: block;
-            background: rgba(255, 59, 48, 0.15);
-            color: #ff3b30;
-            border: 1px solid rgba(255, 59, 48, 0.3);
-        }
-        .loader {
-            width: 22px;
-            height: 22px;
-            border: 3px solid rgba(255, 193, 7, 0.3);
-            border-radius: 50%;
-            border-top-color: #ffc107;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        .features {
-            margin-top: 35px;
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 15px;
-        }
-        .feature {
-            text-align: center;
-            padding: 20px 15px;
-            background: rgba(255, 255, 255, 0.03);
-            border-radius: 16px;
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            transition: all 0.3s ease;
-        }
-        .feature:hover {
-            background: rgba(255, 255, 255, 0.08);
-            transform: translateY(-3px);
-        }
-        .feature-icon {
-            font-size: 2rem;
-            margin-bottom: 10px;
-        }
-        .feature-title {
-            color: #fff;
-            font-weight: 600;
-            font-size: 0.9rem;
-            margin-bottom: 5px;
-        }
-        .feature-desc {
-            color: rgba(255, 255, 255, 0.5);
-            font-size: 0.75rem;
-        }
-        .info-bar {
-            margin-top: 30px;
-            padding: 15px 20px;
-            background: rgba(102, 126, 234, 0.1);
-            border-radius: 12px;
-            border: 1px solid rgba(102, 126, 234, 0.2);
-        }
-        .info-bar p {
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 0.85rem;
-            text-align: center;
-        }
-        .info-bar a {
-            color: #667eea;
-            text-decoration: none;
-        }
-        .supported-sites {
-            margin-top: 25px;
-            text-align: center;
-        }
-        .supported-sites p {
-            color: rgba(255, 255, 255, 0.5);
-            font-size: 0.8rem;
-            margin-bottom: 10px;
-        }
-        .site-badges {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 8px;
         }
-        .badge {
-            padding: 6px 12px;
-            background: rgba(255, 255, 255, 0.08);
-            border-radius: 20px;
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 0.75rem;
         }
-        @media (max-width: 600px) {
-            .container {
-                padding: 25px;
-            }
-            h1 {
-                font-size: 1.6rem;
-            }
-            .btn-group {
-                grid-template-columns: 1fr;
-            }
-            .features {
-                grid-template-columns: 1fr;
-            }
-            .logo {
-                font-size: 2.5rem;
             }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <div class="logo">🎬</div>
-            <h1>Media Downloader</h1>
-            <p class="subtitle">Download videos as MP4 or extract audio as MP3</p>
-        </div>
-        <div class="input-section">
-            <div class="input-wrapper">
-                <span class="input-icon">🔗</span>
-                <input type="text" id="url" placeholder="Paste video URL here..." autocomplete="off">
-            </div>
-        </div>
-        <div class="btn-group">
-            <button class="btn btn-mp4" onclick="download('mp4')" id="btn-mp4">
-                <span class="btn-icon">📹</span>
-                <span>Download MP4</span>
-            </button>
-            <button class="btn btn-mp3" onclick="download('mp3')" id="btn-mp3">
-                <span class="btn-icon">🎵</span>
-                <span>Download MP3</span>
-            </button>
-        </div>
-        <div id="status" class="status"></div>
-        <div class="features">
-            <div class="feature">
-                <div class="feature-icon">⚡</div>
-                <div class="feature-title">Fast</div>
-                <div class="feature-desc">Quick processing</div>
-            </div>
-            <div class="feature">
-                <div class="feature-icon">🎯</div>
-                <div class="feature-title">Quality</div>
-                <div class="feature-desc">Best available</div>
-            </div>
-            <div class="feature">
-                <div class="feature-icon">🔒</div>
-                <div class="feature-title">Secure</div>
-                <div class="feature-desc">No data stored</div>
-            </div>
-        </div>
-        <div class="supported-sites">
-            <p>Supported platforms:</p>
-            <div class="site-badges">
-                <span class="badge">YouTube</span>
-                <span class="badge">Twitter/X</span>
-                <span class="badge">Facebook</span>
-                <span class="badge">Instagram</span>
-                <span class="badge">TikTok</span>
-                <span class="badge">Vimeo</span>
-                <span class="badge">+1000 more</span>
-            </div>
-        </div>
-        <div class="info-bar">
-            <p>💡 Tip: Files are automatically deleted after download for your privacy</p>
-        </div>
-    </div>
-    <script>
-        async function download(format) {
-            const url = document.getElementById('url').value.trim();
-            const status = document.getElementById('status');
-            const btnMp4 = document.getElementById('btn-mp4');
-            const btnMp3 = document.getElementById('btn-mp3');
-            if (!url) {
-                showStatus('error', '❌ Please enter a valid URL');
-                shakeInput();
-                return;
-            }
-            // Basic URL validation
-            if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                showStatus('error', '❌ Please enter a valid URL starting with http:// or https://');
-                shakeInput();
-                return;
             }
-            // Disable buttons
-            btnMp4.disabled = true;
-            btnMp3.disabled = true;
-            // Show loading
-            showStatus('loading', 'Processing your request...');
-            try {
-                const response = await fetch('/download', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({ url: url, format: format })
-                });
-                if (!response.ok) {
-                    const error = await response.json();
-                    throw new Error(error.error || 'Download failed');
-                }
-                // Get filename from header
-                const contentDisposition = response.headers.get('Content-Disposition');
-                let filename = `download.${format}`;
-                if (contentDisposition) {
-                    const match = contentDisposition.match(/filename[^;=\\n]*=((['"]).*?\\2|[^;\\n]*)/);
-                    if (match && match[1]) {
-                        filename = match[1].replace(/['"]/g, '');
-                    }
-                }
-                // Download file
-                const blob = await response.blob();
-                const downloadUrl = window.URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = downloadUrl;
-                a.download = filename;
-                document.body.appendChild(a);
-                a.click();
-                window.URL.revokeObjectURL(downloadUrl);
-                a.remove();
-                showStatus('success', '✅ Download started successfully!');
-                document.getElementById('url').value = '';
-            } catch (error) {
-                showStatus('error', '❌ ' + error.message);
-            } finally {
-                btnMp4.disabled = false;
-                btnMp3.disabled = false;
             }
-        }
-        function showStatus(type, message) {
-            const status = document.getElementById('status');
-            status.className = 'status ' + type;
-            if (type === 'loading') {
-                status.innerHTML = '<div class="loader"></div><span>' + message + '</span>';
-            } else {
-                status.textContent = message;
-            }
         }
-        function shakeInput() {
-            const input = document.getElementById('url');
-            input.style.animation = 'shake 0.5s ease';
-            setTimeout(() => {
-                input.style.animation = '';
-            }, 500);
         }
-        // Add shake animation
-        const style = document.createElement('style');
-        style.textContent = `
-            @keyframes shake {
-                0%, 100% { transform: translateX(0); }
-                25% { transform: translateX(-10px); }
-                75% { transform: translateX(10px); }
-            }
-        `;
-        document.head.appendChild(style);
-        // Allow Enter key to trigger MP4 download
-        document.getElementById('url').addEventListener('keypress', function(e) {
-            if (e.key === 'Enter') {
-                download('mp4');
-            }
-        });
-        // Focus input on load
-        window.onload = function() {
-            document.getElementById('url').focus();
-        };
     </script>
 </body>
 </html>
 """
-def clean_filename(title):
-    """Clean filename to remove invalid characters"""
-    clean = re.sub(r'[<>:"/\\|?*]', '', title)
-    clean = re.sub(r'\s+', ' ', clean).strip()
-    return clean[:100] if len(clean) > 100 else clean
-def cleanup_old_files():
-    """Clean up files older than 5 minutes"""
-    try:
-        now = time.time()
-        for filename in os.listdir(DOWNLOAD_DIR):
-            filepath = os.path.join(DOWNLOAD_DIR, filename)
-            if os.path.isfile(filepath):
-                if now - os.path.getmtime(filepath) > 300:  # 5 minutes
-                    os.remove(filepath)
-    except Exception as e:
-        print(f"Cleanup error: {e}")
 @app.route('/')
 def index():
-    # Cleanup old files on each visit
-    threading.Thread(target=cleanup_old_files, daemon=True).start()
     return render_template_string(HTML_TEMPLATE)
-@app.route('/download', methods=['POST'])
-def download_video():
-    try:
-        data = request.get_json()
-        url = data.get('url', '').strip()
-        format_type = data.get('format', 'mp4')
-        if not url:
-            return jsonify({'error': 'URL is required'}), 400
-        # Validate URL format
-        if not url.startswith(('http://', 'https://')):
-            return jsonify({'error': 'Invalid URL format'}), 400
-        # Generate unique filename
-        unique_id = str(uuid.uuid4())[:8]
-        # Configure yt-dlp options
-        if format_type == 'mp3':
-            ydl_opts = {
-                'format': 'bestaudio/best',
-                'postprocessors': [{
-                    'key': 'FFmpegExtractAudio',
-                    'preferredcodec': 'mp3',
-                    'preferredquality': '192',
-                }],
-                'outtmpl': os.path.join(DOWNLOAD_DIR, f'{unique_id}.%(ext)s'),
-                'quiet': True,
-                'no_warnings': True,
-                'extract_flat': False,
-                'noplaylist': True,
-            }
-            expected_ext = 'mp3'
-        else:
-            ydl_opts = {
-                'format': 'best[ext=mp4]/bestvideo[ext=mp4]+bestaudio[ext=m4a]/best',
-                'outtmpl': os.path.join(DOWNLOAD_DIR, f'{unique_id}.%(ext)s'),
-                'quiet': True,
-                'no_warnings': True,
-                'noplaylist': True,
-                'merge_output_format': 'mp4',
-            }
-            expected_ext = 'mp4'
-        # Download the video/audio
-        with yt_dlp.YoutubeDL(ydl_opts) as ydl:
-            info = ydl.extract_info(url, download=True)
-            title = info.get('title', 'download')
-            clean_title = clean_filename(title)
-        # Find the downloaded file
-        file_path = None
-        possible_extensions = ['mp3'] if format_type == 'mp3' else ['mp4', 'webm', 'mkv', 'avi', 'mov']
-        for ext in possible_extensions:
-            potential_path = os.path.join(DOWNLOAD_DIR, f'{unique_id}.{ext}')
-            if os.path.exists(potential_path):
-                file_path = potential_path
-                expected_ext = ext
-                break
-        if not file_path or not os.path.exists(file_path):
-            return jsonify({'error': 'Failed to download file'}), 500
-        download_name = f'{clean_title}.{expected_ext}'
-        # Send file
-        response = send_file(
-            file_path,
-            as_attachment=True,
-            download_name=download_name,
-            mimetype='audio/mpeg' if format_type == 'mp3' else 'video/mp4'
-        )
-        # Schedule file deletion after sending
-        def delete_file_later():
-            time.sleep(30)
-            try:
-                if os.path.exists(file_path):
-                    os.remove(file_path)
-            except Exception as e:
-                print(f"Error deleting file: {e}")
-        threading.Thread(target=delete_file_later, daemon=True).start()
-        return response
-    except yt_dlp.utils.DownloadError as e:
-        error_msg = str(e)
-        if 'Private video' in error_msg:
-            return jsonify({'error': 'This video is private'}), 400
-        elif 'Video unavailable' in error_msg:
-            return jsonify({'error': 'Video is unavailable'}), 400
-        elif 'age' in error_msg.lower():
-            return jsonify({'error': 'Age-restricted content cannot be downloaded'}), 400
-        else:
-            return jsonify({'error': 'Failed to download. Please check the URL'}), 400
-    except Exception as e:
-        print(f"Error: {e}")
-        return jsonify({'error': 'An error occurred. Please try again'}), 500
-@app.route('/health')
-def health():
-    return jsonify({'status': 'healthy'})
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860, debug=False)

+import eventlet
+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)