draw basic tank

client/index.js

@@ -2,6 +2,29 @@ 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);
 });