thib8956/tic-tac-toe-ws
1
0
Fork 0
mirror of https://github.com/thib8956/tic-tac-toe-ws.git synced 2024-09-29 06:06:37 +00:00
Code

Synchronize grid between the two players

Browse Source
This commit is contained in:
Thibaud Gasser 2024-09-04 14:25:37 +02:00
parent 5ccbdb3194
commit 621d2489e4
3 changed files with 88 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
client.mts
View File

@ -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);
}
}
}
}

16
common.mts Normal file
View File

@ -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[]
}

43
server.mts
View File

@ -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));
}
});
});