handle closing connections

client.mts

@@ -5,6 +5,8 @@ const grid = [0, 0, 0, 0, 0, 0, 0, 0, 0]
 const canvas = document.getElementById("game") as HTMLCanvasElement | null;
 const ctx = canvas?.getContext("2d") as CanvasRenderingContext2D | null;
 
+let myId: number | null = null;
+
 ws.onopen = (e) => {
     console.log("connected to server");
 
@@ -26,20 +28,25 @@ ws.onopen = (e) => {
 
 ws.onmessage = (evt) => {
     const msg: Message = JSON.parse(evt.data);
+    console.log(msg);
     switch (msg.kind) {
         case "hello": {
+            myId = (msg.data as Hello).id;
             const h1 = document.getElementById("title") as HTMLHeadingElement | null;
             if (h1) {
-                h1.innerText = `connected to server with id ${(msg.data as Hello).id}`
+                h1.innerText = `connected to server with id ${myId}`
             }
+            break;
         }
         case "update": {
             if (ctx) {
                 drawGrid(ctx, (msg.data as Response).grid);
             }
+            break;
         }
         default: {
             console.log(msg);
+            break;
         }
     }
 };
@@ -48,22 +55,15 @@ ws.onmessage = (evt) => {
 function drawGrid(ctx: CanvasRenderingContext2D, grid: number[]){
     for (let y = 0; y < 3; ++y) {
         for (let x = 0; x < 3; ++x) {
-            if (grid[y*3+x] == 0) {
-                ctx.fillStyle = "black";
-                const rx = x + x * 100;
-                const ry = y + y * 100;
-                ctx.fillRect(rx, ry, 90, 90);
-            } else if (grid[y*3+x] == 1) {
-                ctx.fillStyle = "green";
-                const rx = x + x * 100;
-                const ry = y + y * 100;
-                ctx.fillRect(rx, ry, 90, 90);
-            } else if (grid[y*3+x] == 2) {
-                ctx.fillStyle = "blue";
-                const rx = x + x * 100;
-                const ry = y + y * 100;
-                ctx.fillRect(rx, ry, 90, 90);
+            switch (grid[y*3+x]) {
+                case 0: ctx.fillStyle = "black"; break;
+                case myId: ctx.fillStyle = "green"; break;
+                default: ctx.fillStyle = "blue"; break;
             }
+
+            const rx = x + x * 100;
+            const ry = y + y * 100;
+            ctx.fillRect(rx, ry, 90, 90);
         }
     }
 }

server.mts

@@ -8,30 +8,45 @@ let grid = [0, 0, 0, 0, 0, 0, 0, 0, 0]
 
 console.log(`waiting for connection on ws://localhost:${port}`);
 
-let id = -1;
-let clients: WebSocket[] = [];
+interface Client {
+    id: number,
+    ws: WebSocket
+}
+
+let id = 1;
+let clients: Client[] = [];
 
 wss.on("connection", (ws) => {
     id += 1;
-    if (id > 1) {
-        throw new Error("too many players");
+    if (clients.length == 2) {
+        console.log("too many players");
+        ws.close();
+        return;
     }
 
-    clients.push(ws);
+    clients.push({id, ws});
     ws.send(JSON.stringify({kind: "hello", data: { id } as Hello}));
     console.log(`player #${id} connected`);
 
     ws.addEventListener("message", (event: any) => {
         const message = JSON.parse(event.data);
         const {x, y} = message;
-        const playerId = clients.indexOf(ws);
-        grid[y*3+x] = playerId + 1;
-        for (const c of clients) {
-            const msg: Message = {
-                kind: "update",
-                data: { grid } as Response,
+        const playerId = clients.find(x => x.ws === ws)?.id;
+        console.assert(playerId);
+        if (grid[y*3+x] === 0) {
+            grid[y*3+x] = playerId as number;
+            for (const c of clients) {
+                const msg: Message = {
+                    kind: "update",
+                    data: { grid } as Response,
+                }
+                c.ws.send(JSON.stringify(msg));
             }
-            c.send(JSON.stringify(msg));
         }
     });
+
+    ws.on("close", () => {
+        console.log(`player #${id} disconnected`);
+        clients = clients.filter(x => x.id !== id);
+    });
 });