30 lines
797 B
JavaScript
30 lines
797 B
JavaScript
import { io } from "socket.io-client";
|
|
|
|
const socket = io();
|
|
|
|
function loadImg(url) {
|
|
const img_url = url;
|
|
const img = new Image();
|
|
img.src = img_url;
|
|
return new Promise((resolve, reject) => {
|
|
img.onload = () => { resolve(img); };
|
|
img.onerror = (err) => { reject(err); };
|
|
});
|
|
}
|
|
|
|
const imgs = {};
|
|
|
|
async function loadAssets() {
|
|
imgs.basic = await loadImg(new URL('assets/basic.svg', import.meta.url));
|
|
}
|
|
|
|
await loadAssets();
|
|
|
|
const cvs = document.querySelector("#board");
|
|
const ctx = cvs.getContext("2d");
|
|
|
|
socket.on("update",(tank_info) => {
|
|
document.querySelector("#raw-info").innerHTML = JSON.stringify(tank_info);
|
|
ctx.clearRect(0, 0, cvs.width, cvs.height);
|
|
ctx.drawImage(imgs.basic, tank_info.position.x, tank_info.position.y, 100, 100);
|
|
}); |