Synchronize grid between the two players

client.mts

@@ -1,26 +1,22 @@
+import { Request, Response, Message } from "common.mjs";
+
 const ws = new WebSocket("ws://localhost:1234");
+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;
 
 ws.onopen = (e) => {
     console.log("connected to server");
-
-	const canvas = document.getElementById("game") as HTMLCanvasElement | null;
-
     if (canvas) {
-		const ctx = canvas.getContext("2d") as CanvasRenderingContext2D | null;
         if (ctx) {
-			drawGrid(ctx);
+            drawGrid(ctx, grid);
-
             canvas.addEventListener("click", (evt: any) => {
                 const {clientX, clientY} = evt;
                 const x = Math.floor(clientX / 90);
                 const y = Math.floor(clientY / 90);
                 if (x < 3 && y < 3) {
-					const rx = x + x * 100;
+                    const msg: Request = { x, y };
-					const ry = y + y * 100;
+                    ws.send(JSON.stringify(msg));
-					ctx.fillStyle = "red";
-					ctx.fillRect(rx, ry, 90, 90);
-					
-					ws.send(JSON.stringify({x, y}));
                 }
             });
         }
@@ -28,17 +24,35 @@ ws.onopen = (e) => {
 };
 
 ws.onmessage = (evt) => {
-	console.log(evt.data);
+    const msg: Message = JSON.parse(evt.data);
+    if (ctx && msg.kind == "update") {
+        drawGrid(ctx, (msg.data as Response).grid);
+    }
+    else {
+        console.log(msg);
+    }
 };
 
 
-function drawGrid(ctx: CanvasRenderingContext2D){
+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);
+            }
         }
     }
 }

common.mts

@@ -0,0 +1,16 @@
+export type MessageKind = "hello" | "update";
+
+export interface Message {
+	kind: MessageKind,
+	data: Response | string,
+}
+
+export interface Request {
+	x: number,
+	y: number
+}
+
+export interface Response {
+	grid: number[]
+}
+

server.mts

@@ -1,32 +1,37 @@
-import { WebSocketServer } from "ws";
+import { Message, Response } from "common.mjs"
+import { WebSocket, WebSocketServer } from "ws";
 
 const port = 1234
 const wss = new WebSocketServer({ port });
 
+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 = [];
+let clients: WebSocket[] = [];
 
-wss.on("connection", (ws, req) => {
+wss.on("connection", (ws) => {
     id += 1;
     if (id > 1) {
         throw new Error("too many players");
     }
 
     clients.push(ws);
-	ws.send("bonjour" + id);
+    ws.send(JSON.stringify({kind: "hello", data: `player #${id} connected`} as any));
     console.log(`player #${id} connected`);
 
     ws.addEventListener("message", (event: any) => {
-        const message = event.data.toString();
+        const message = JSON.parse(event.data);
-        console.log(`message from client : ${message}`);
+        const {x, y} = message;
-		if (id == 0) {
+        const playerId = clients.indexOf(ws);
-			clients[1].send("coucou");
+        grid[y*3+x] = playerId + 1;
-		} else {
+        for (const c of clients) {
-			clients[0].send("coucou");
+            const msg: Message = {
+                kind: "update",
+                data: { grid } as Response,
+            }
+            c.send(JSON.stringify(msg));
         }
     });
 });
-
-