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 = new WebSocket(`wss://${window.location.host}/ws`); | |
| // Capture mouse movements and clicks | |
| canvas.addEventListener("mousemove", function (event) { | |
| let rect = canvas.getBoundingClientRect(); | |
| let x = event.clientX - rect.left; | |
| let y = event.clientY - rect.top; | |
| socket.send(JSON.stringify({ | |
| "action_type": "move", | |
| "mouse_position": [x, y] | |
| })); | |
| }); | |
| canvas.addEventListener("click", function (event) { | |
| let rect = canvas.getBoundingClientRect(); | |
| let x = event.clientX - rect.left; | |
| let y = event.clientY - rect.top; | |
| socket.send(JSON.stringify({ | |
| "action_type": "left_click", | |
| "mouse_position": [x, y] | |
| })); | |
| }); | |
| // Receive predicted frames and render them on the canvas | |
| socket.onmessage = function (event) { | |
| ctx.fillStyle = "black"; // Placeholder rendering | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| }; | |
| </script> | |
| </body> | |
| </html> |