Synchronize grid between the two players

client.mts

@@ -1,45 +1,59 @@
+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);
-
-			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 ry = y + y * 100;
-					ctx.fillStyle = "red";
-					ctx.fillRect(rx, ry, 90, 90);
-					
-					ws.send(JSON.stringify({x, y}));
-				}
-			});
-		}
-	}
+    console.log("connected to server");
+    if (canvas) {
+        if (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 msg: Request = { x, y };
+                    ws.send(JSON.stringify(msg));
+                }
+            });
+        }
+    }
 };
 
 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){
-	for (let y = 0; y < 3; ++y) {
-		for (let x = 0; x < 3; ++x) {
-			ctx.fillStyle = "green";
-			const rx = x + x * 100;
-			const ry = y + y * 100;
-			ctx.fillRect(rx, ry, 90, 90);
-		}
-	}
+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) => {
-	id += 1;
-	if (id > 1) {
-		throw new Error("too many players");
-	}
+wss.on("connection", (ws) => {
+    id += 1;
+    if (id > 1) {
+        throw new Error("too many players");
+    }
 
-	clients.push(ws);
-	ws.send("bonjour" + id);
-	console.log(`player #${id} connected`);
+    clients.push(ws);
+    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();
-        console.log(`message from client : ${message}`);
-		if (id == 0) {
-			clients[1].send("coucou");
-		} else {
-			clients[0].send("coucou");
-		}
+        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,
+            }
+            c.send(JSON.stringify(msg));
+        }
     });
 });
-
-