From 621d2489e4bd0600c6d13517b6823bae2f687e07 Mon Sep 17 00:00:00 2001 From: Thibaud Date: Wed, 4 Sep 2024 14:25:37 +0200 Subject: [PATCH] Synchronize grid between the two players --- client.mts | 82 ++++++++++++++++++++++++++++++++---------------------- common.mts | 16 +++++++++++ server.mts | 43 +++++++++++++++------------- 3 files changed, 88 insertions(+), 53 deletions(-) create mode 100644 common.mts diff --git a/client.mts b/client.mts index b4e96ad..04f0800 100644 --- a/client.mts +++ b/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); + } + } + } } diff --git a/common.mts b/common.mts new file mode 100644 index 0000000..08b28d5 --- /dev/null +++ b/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[] +} + diff --git a/server.mts b/server.mts index 628b7c0..fddc90e 100644 --- a/server.mts +++ b/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)); + } }); }); - -