Spaces:
Runtime error
Runtime error
File size: 3,457 Bytes
c575e18 19b663b c59c4c4 19b663b f70fe7a 19b663b c59c4c4 19b663b f70fe7a 19b663b c59c4c4 19b663b f70fe7a 19b663b c575e18 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<!DOCTYPE html>
<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> |