Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Simulator</title> | |
| </head> | |
| <body> | |
| <canvas id="displayCanvas" width="800" height="600"></canvas> | |
| <script> | |
| const canvas = document.getElementById('displayCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| let socket; | |
| let isConnected = false; | |
| function connect() { | |
| socket = new WebSocket(`wss://${window.location.host}/ws`); | |
| socket.onopen = function(event) { | |
| console.log("WebSocket connection established"); | |
| isConnected = true; | |
| }; | |
| socket.onclose = function(event) { | |
| console.log("WebSocket connection closed. Attempting to reconnect..."); | |
| isConnected = false; | |
| setTimeout(connect, 3000); // Attempt to reconnect after 3 seconds | |
| }; | |
| socket.onerror = function(error) { | |
| console.error("WebSocket error:", error); | |
| }; | |
| // Receive predicted frames and render them on the canvas | |
| socket.onmessage = function (event) { | |
| // Parse the received JSON data | |
| const data = JSON.parse(event.data); | |
| if (data.image) { | |
| // Create an image object from the base64 encoded string | |
| const img = new Image(); | |
| img.onload = function() { | |
| ctx.drawImage(img, 0, 0, canvas.width, canvas.height); | |
| }; | |
| img.src = 'data:image/png;base64,' + data.image; | |
| } | |
| }; | |
| } | |
| // Initial connection | |
| connect(); | |
| let lastSentPosition = null; | |
| let lastSentTime = 0; | |
| const SEND_INTERVAL = 50; // Send updates every 50ms | |
| function sendMousePosition(x, y, forceUpdate = false) { | |
| const currentTime = Date.now(); | |
| if (forceUpdate || !lastSentPosition || currentTime - lastSentTime >= SEND_INTERVAL) { | |
| socket.send(JSON.stringify({ | |
| "action_type": "move", | |
| "mouse_position": [x, y] | |
| })); | |
| lastSentPosition = { x, y }; | |
| lastSentTime = currentTime; | |
| } | |
| } | |
| // Capture mouse movements and clicks | |
| canvas.addEventListener("mousemove", function (event) { | |
| if (!isConnected) return; | |
| let rect = canvas.getBoundingClientRect(); | |
| let x = event.clientX - rect.left; | |
| let y = event.clientY - rect.top; | |
| // Client-side prediction | |
| ctx.beginPath(); | |
| ctx.moveTo(lastSentPosition ? lastSentPosition.x : x, lastSentPosition ? lastSentPosition.y : y); | |
| ctx.lineTo(x, y); | |
| ctx.stroke(); | |
| sendMousePosition(x, y); | |
| }); | |
| canvas.addEventListener("click", function (event) { | |
| if (!isConnected) return; | |
| let rect = canvas.getBoundingClientRect(); | |
| let x = event.clientX - rect.left; | |
| let y = event.clientY - rect.top; | |
| sendMousePosition(x, y, true); | |
| socket.send(JSON.stringify({ | |
| "action_type": "left_click", | |
| "mouse_position": [x, y] | |
| })); | |
| }); | |
| </script> | |
| </body> | |
| </html> |