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);
});