Create app.py

app.py

@@ -0,0 +1,572 @@
+import pygame
+import numpy as np
+from flask import Flask, Response, render_template_string
+from flask_sock import Sock
+import time
+import os
+import cv2
+import threading
+import json
+import base64
+from PIL import Image
+import io
+
+# Initialize Pygame headlessly
+os.environ['SDL_VIDEODRIVER'] = 'dummy'
+pygame.init()
+
+try:
+    pygame.mixer.init(frequency=44100, size=-16, channels=2)
+    print("✅ Audio mixer initialized")
+except Exception as e:
+    print(f"⚠️ Audio mixer not available: {e}")
+
+app = Flask(__name__)
+sock = Sock(app)
+
+class ShaderRenderer:
+    def __init__(self, width=640, height=480):
+        self.width = width
+        self.height = height
+        self.mouse_x = width // 2
+        self.mouse_y = height // 2
+        self.start_time = time.time()
+        self.surface = pygame.Surface((width, height))
+        self.frame_count = 0
+        self.last_frame_time = time.time()
+        self.fps = 0
+        self.button_clicked = False
+        self.sound_source = 'none'
+        
+    def set_mouse(self, x, y):
+        self.mouse_x = max(0, min(self.width, x))
+        self.mouse_y = max(0, min(self.height, y))
+    
+    def handle_click(self, x, y):
+        button_rect = pygame.Rect(self.width-200, 120, 180, 40)
+        if button_rect.collidepoint(x, y):
+            self.button_clicked = not self.button_clicked
+            return True
+        return False
+    
+    def render_frame(self):
+        t = time.time() - self.start_time
+        
+        # Calculate FPS
+        self.frame_count += 1
+        if time.time() - self.last_frame_time > 1.0:
+            self.fps = self.frame_count
+            self.frame_count = 0
+            self.last_frame_time = time.time()
+        
+        # Clear
+        self.surface.fill((20, 20, 30))
+        font = pygame.font.Font(None, 24)
+        
+        # Draw TOP marker
+        pygame.draw.rect(self.surface, (255, 100, 100), (10, 10, 100, 30))
+        text = font.render("TOP", True, (255, 255, 255))
+        self.surface.blit(text, (20, 15))
+        
+        # Draw BOTTOM marker
+        pygame.draw.rect(self.surface, (100, 255, 100), (10, self.height-40, 100, 30))
+        text = font.render("BOTTOM", True, (0, 0, 0))
+        self.surface.blit(text, (20, self.height-35))
+        
+        # Draw CLOCK
+        current_time = time.time()
+        seconds = int(current_time) % 60
+        hundredths = int((current_time * 100) % 100)
+        time_str = f"{seconds:02d}.{hundredths:02d}s"
+        clock_text = font.render(time_str, True, (0, 255, 255))
+        self.surface.blit(clock_text, (self.width-150, 40))
+        
+        # Draw BUTTON
+        button_rect = pygame.Rect(self.width-200, 120, 180, 40)
+        mouse_over = button_rect.collidepoint(self.mouse_x, self.mouse_y)
+        
+        if self.button_clicked:
+            button_color = (0, 200, 0)
+        elif mouse_over:
+            button_color = (100, 100, 200)
+        else:
+            button_color = (80, 80, 80)
+            
+        pygame.draw.rect(self.surface, button_color, button_rect)
+        pygame.draw.rect(self.surface, (200, 200, 200), button_rect, 2)
+        
+        btn_text = "✅ CLICKED!" if self.button_clicked else "🔘 CLICK ME"
+        text_surf = font.render(btn_text, True, (255, 255, 255))
+        text_rect = text_surf.get_rect(center=button_rect.center)
+        self.surface.blit(text_surf, text_rect)
+        
+        # Draw circle
+        circle_size = 30 + int(20 * np.sin(t * 2))
+        if self.sound_source == 'pygame':
+            color = (100, 255, 100)
+        elif self.sound_source == 'browser':
+            color = (100, 100, 255)
+        else:
+            color = (255, 100, 100)
+            
+        pygame.draw.circle(self.surface, color, 
+                         (self.mouse_x, self.mouse_y), circle_size)
+        
+        # Draw grid
+        for x in range(0, self.width, 50):
+            alpha = int(40 + 20 * np.sin(x * 0.1 + t))
+            pygame.draw.line(self.surface, (alpha, alpha, 50), 
+                           (x, 0), (x, self.height))
+        for y in range(0, self.height, 50):
+            alpha = int(40 + 20 * np.cos(y * 0.1 + t))
+            pygame.draw.line(self.surface, (alpha, alpha, 50), 
+                           (0, y), (self.width, y))
+        
+        # FPS counter
+        fps_text = font.render(f"FPS: {self.fps}", True, (255, 255, 0))
+        self.surface.blit(fps_text, (self.width-150, self.height-60))
+        
+        return pygame.image.tostring(self.surface, 'RGB')
+    
+    def get_frame_jpeg(self, quality=70):
+        """Return frame as JPEG bytes"""
+        frame = self.render_frame()
+        img = np.frombuffer(frame, dtype=np.uint8).reshape((self.height, self.width, 3))
+        img = cv2.cvtColor(img, cv2.COLOR_RGB2BGR)
+        _, jpeg = cv2.imencode('.jpg', img, [cv2.IMWRITE_JPEG_QUALITY, quality])
+        return jpeg.tobytes()
+
+renderer = ShaderRenderer()
+
+# Single WebSocket for everything
+@sock.route('/ws')
+def websocket(ws):
+    """One WebSocket to rule them all - video + interactions"""
+    print("🟢 Client connected")
+    running = True
+    
+    # Video streaming thread
+    def video_stream():
+        while running:
+            try:
+                # Get frame as JPEG
+                frame = renderer.get_frame_jpeg(quality=70)
+                
+                # Send as binary with a 6-byte header 'FRAME:'
+                # This helps client identify what type of data it is
+                header = b'FRAME:'
+                ws.send(header + frame)
+                
+                time.sleep(1/30)  # 30fps max
+            except:
+                break
+    
+    # Start video thread
+    video_thread = threading.Thread(target=video_stream, daemon=True)
+    video_thread.start()
+    
+    # Handle incoming messages (interactions)
+    try:
+        while True:
+            message = ws.receive()
+            if not message:
+                continue
+            
+            # Parse JSON message
+            try:
+                data = json.loads(message)
+                
+                if data['type'] == 'mouse':
+                    renderer.set_mouse(data['x'], data['y'])
+                    
+                elif data['type'] == 'click':
+                    renderer.handle_click(data['x'], data['y'])
+                    
+                elif data['type'] == 'sound':
+                    renderer.sound_source = data['source']
+                    
+                # Optional: Send confirmation or state back
+                ws.send(json.dumps({
+                    'type': 'state',
+                    'button': renderer.button_clicked,
+                    'sound': renderer.sound_source
+                }))
+                
+            except json.JSONDecodeError:
+                print(f"Invalid JSON: {message}")
+                
+    except Exception as e:
+        print(f"Connection error: {e}")
+    finally:
+        running = False
+        print("🔴 Client disconnected")
+
+@app.route('/')
+def index():
+    return render_template_string('''
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <title>🎮 Pygame + WebSocket Only</title>
+        <style>
+            body {
+                margin: 0;
+                background: #0a0a0a;
+                color: white;
+                font-family: 'Segoe UI', Arial, sans-serif;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-height: 100vh;
+            }
+            .container {
+                max-width: 900px;
+                padding: 20px;
+                text-align: center;
+            }
+            h1 { color: #4CAF50; margin-bottom: 20px; }
+            h1 small { font-size: 14px; color: #666; display: block; }
+            
+            .video-container {
+                background: #000;
+                border-radius: 12px;
+                padding: 5px;
+                margin: 20px 0;
+                box-shadow: 0 0 30px rgba(76, 175, 80, 0.2);
+                position: relative;
+            }
+            
+            canvas {
+                width: 100%;
+                max-width: 640px;
+                height: auto;
+                border-radius: 8px;
+                display: block;
+                margin: 0 auto;
+                background: #111;
+                cursor: crosshair;
+            }
+            
+            .mouse-coords {
+                position: absolute;
+                bottom: 10px;
+                left: 10px;
+                background: rgba(0,0,0,0.7);
+                color: #4CAF50;
+                padding: 5px 10px;
+                border-radius: 20px;
+                font-family: monospace;
+                font-size: 14px;
+                pointer-events: none;
+                z-index: 10;
+            }
+            
+            .controls {
+                background: #1a1a1a;
+                border-radius: 12px;
+                padding: 20px;
+                margin-top: 20px;
+            }
+            
+            .sound-buttons {
+                display: flex;
+                gap: 10px;
+                justify-content: center;
+                margin: 20px 0;
+                flex-wrap: wrap;
+            }
+            
+            button {
+                background: #333;
+                color: white;
+                border: none;
+                padding: 12px 24px;
+                font-size: 16px;
+                border-radius: 8px;
+                cursor: pointer;
+                transition: all 0.3s;
+                min-width: 100px;
+                font-weight: bold;
+                border: 1px solid #444;
+            }
+            
+            button:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            }
+            
+            button.active {
+                background: #4CAF50;
+                border-color: #4CAF50;
+                box-shadow: 0 0 20px #4CAF50;
+            }
+            
+            .status-panel {
+                background: #222;
+                border-radius: 8px;
+                padding: 15px;
+                margin-top: 20px;
+                display: flex;
+                justify-content: space-around;
+                flex-wrap: wrap;
+                gap: 15px;
+            }
+            
+            .status-item {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+            }
+            
+            .status-label {
+                color: #888;
+                font-size: 14px;
+            }
+            
+            .status-value {
+                background: #333;
+                padding: 5px 12px;
+                border-radius: 20px;
+                font-size: 14px;
+                font-weight: bold;
+            }
+            
+            .badge {
+                padding: 5px 10px;
+                border-radius: 20px;
+                background: #333;
+            }
+            
+            .badge.green { background: #4CAF50; }
+            .badge.red { background: #ff4444; }
+            .badge.blue { background: #2196F3; }
+            
+            .info-text {
+                color: #666;
+                font-size: 12px;
+                margin-top: 15px;
+                border-top: 1px solid #333;
+                padding-top: 15px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <h1>🎮 Pygame + WebSocket Only <small>Zero HTTP API Calls</small></h1>
+            
+            <div class="video-container">
+                <canvas id="canvas" width="640" height="480"></canvas>
+                <div id="mouseCoords" class="mouse-coords">X: 320, Y: 240</div>
+            </div>
+            
+            <div class="controls">
+                <h3>🔊 Sound Source</h3>
+                <div class="sound-buttons">
+                    <button id="btnNone" onclick="setSound('none')" class="active">🔇 None</button>
+                    <button id="btnPygame" onclick="setSound('pygame')">🎮 Pygame</button>
+                    <button id="btnBrowser" onclick="setSound('browser')">🌐 Browser</button>
+                </div>
+                
+                <div class="status-panel">
+                    <div class="status-item">
+                        <span class="status-label">WebSocket:</span>
+                        <span id="wsStatus" class="status-value">🟢 Connected</span>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-label">Button:</span>
+                        <span id="buttonState" class="status-value">⚪ Off</span>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-label">Frames:</span>
+                        <span id="frameCounter" class="status-value">0</span>
+                    </div>
+                </div>
+                
+                <div class="info-text">
+                    ⚡ Single WebSocket connection • Video + Mouse + Clicks • Zero polling • 30fps
+                </div>
+            </div>
+        </div>
+        
+        <audio id="browserAudio" loop style="display:none;">
+            <source src="/static/sound.mp3" type="audio/mpeg">
+        </audio>
+        
+        <script>
+            const canvas = document.getElementById('canvas');
+            const ctx = canvas.getContext('2d');
+            const browserAudio = document.getElementById('browserAudio');
+            
+            let frameCount = 0;
+            let lastFrameTime = performance.now();
+            let fps = 0;
+            
+            // WebSocket connection
+            const ws = new WebSocket((location.protocol === 'https:' ? 'wss:' : 'ws:') + '//' + window.location.host + '/ws');
+            ws.binaryType = 'arraybuffer';
+            
+            // Connection status
+            ws.onopen = () => {
+                document.getElementById('wsStatus').innerHTML = '🟢 Connected';
+                document.getElementById('wsStatus').className = 'status-value';
+            };
+            
+            ws.onclose = () => {
+                document.getElementById('wsStatus').innerHTML = '🔴 Disconnected';
+                document.getElementById('wsStatus').className = 'status-value';
+            };
+            
+            // Handle incoming messages (video frames + state updates)
+            ws.onmessage = (event) => {
+                if (event.data instanceof ArrayBuffer) {
+                    // Video frame
+                    const data = new Uint8Array(event.data);
+                    const header = new TextDecoder().decode(data.slice(0, 6));
+                    
+                    if (header === 'FRAME:') {
+                        // Extract JPEG data
+                        const jpegData = data.slice(6);
+                        
+                        // Convert to blob and create image
+                        const blob = new Blob([jpegData], {type: 'image/jpeg'});
+                        const url = URL.createObjectURL(blob);
+                        
+                        const img = new Image();
+                        img.onload = () => {
+                            ctx.drawImage(img, 0, 0, 640, 480);
+                            URL.revokeObjectURL(url);
+                            
+                            // Update frame counter
+                            frameCount++;
+                            document.getElementById('frameCounter').innerHTML = frameCount;
+                            
+                            // Calculate FPS occasionally
+                            const now = performance.now();
+                            if (now - lastFrameTime > 1000) {
+                                fps = frameCount;
+                                frameCount = 0;
+                                lastFrameTime = now;
+                            }
+                        };
+                        img.src = url;
+                    }
+                } else {
+                    // JSON message (state updates)
+                    try {
+                        const data = JSON.parse(event.data);
+                        if (data.type === 'state') {
+                            // Update button state from server
+                            document.getElementById('buttonState').innerHTML = 
+                                data.button ? '✅ Clicked' : '⚪ Off';
+                        }
+                    } catch (e) {
+                        console.log('Received:', event.data);
+                    }
+                }
+            };
+            
+            // Mouse tracking (throttled)
+            let mouseTimer;
+            canvas.addEventListener('mousemove', (e) => {
+                const rect = canvas.getBoundingClientRect();
+                const scaleX = canvas.width / rect.width;
+                const scaleY = canvas.height / rect.height;
+                
+                const x = Math.round((e.clientX - rect.left) * scaleX);
+                const y = Math.round((e.clientY - rect.top) * scaleY);
+                
+                // Clamp to canvas boundaries
+                const clampedX = Math.max(0, Math.min(640, x));
+                const clampedY = Math.max(0, Math.min(480, y));
+                
+                document.getElementById('mouseCoords').innerHTML = `X: ${clampedX}, Y: ${clampedY}`;
+                
+                // Throttle to 30fps
+                if (mouseTimer) clearTimeout(mouseTimer);
+                mouseTimer = setTimeout(() => {
+                    if (ws.readyState === WebSocket.OPEN) {
+                        ws.send(JSON.stringify({
+                            type: 'mouse',
+                            x: clampedX,
+                            y: clampedY
+                        }));
+                    }
+                }, 33);
+            });
+            
+            // Click handling
+            canvas.addEventListener('click', (e) => {
+                const rect = canvas.getBoundingClientRect();
+                const scaleX = canvas.width / rect.width;
+                const scaleY = canvas.height / rect.height;
+                
+                const x = Math.round((e.clientX - rect.left) * scaleX);
+                const y = Math.round((e.clientY - rect.top) * scaleY);
+                
+                if (ws.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({
+                        type: 'click',
+                        x: x,
+                        y: y
+                    }));
+                }
+            });
+            
+            // Sound handling
+            function setSound(source) {
+                // Update UI
+                document.getElementById('btnNone').className = source === 'none' ? 'active' : '';
+                document.getElementById('btnPygame').className = source === 'pygame' ? 'active' : '';
+                document.getElementById('btnBrowser').className = source === 'browser' ? 'active' : '';
+                
+                // Handle browser audio
+                if (source === 'browser') {
+                    browserAudio.play().catch(e => console.log('Audio error:', e));
+                } else {
+                    browserAudio.pause();
+                    browserAudio.currentTime = 0;
+                }
+                
+                // Send to server
+                if (ws.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({
+                        type: 'sound',
+                        source: source
+                    }));
+                }
+            }
+            
+            // Clean up on page unload
+            window.addEventListener('beforeunload', () => {
+                ws.close();
+            });
+        </script>
+    </body>
+    </html>
+    ''')
+
+@app.route('/static/sound.mp3')
+def serve_sound():
+    """Serve sound file for browser playback"""
+    if os.path.exists('sound.mp3'):
+        with open('sound.mp3', 'rb') as f:
+            return Response(f.read(), mimetype='audio/mpeg')
+    return 'Sound not found', 404
+
+if __name__ == '__main__':
+    print("\n" + "="*70)
+    print("🎮 Pygame + WebSocket Only")
+    print("="*70)
+    print("🔌 Single WebSocket for everything:")
+    print("   • Video streaming (30fps JPEG)")
+    print("   • Mouse tracking")
+    print("   • Click handling")
+    print("   • Sound control")
+    print("📡 Zero HTTP API calls")
+    print("🖱️ Interactive button inside Pygame")
+    print("⏱️ Live clock display")
+    print("\n🌐 Main page: /")
+    print("="*70 + "\n")
+    
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=False, threaded=True)