thib8956/tic-tac-toe-ws
1
0
Fork 0
mirror of https://github.com/thib8956/tic-tac-toe-ws.git synced 2024-11-17 01:16:33 +00:00
Code

log client address
Some checks failed
Build and Deploy / build (push) Has been cancelled
Details
Build and Deploy / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Thibaud Gasser 2024-09-25 22:30:03 +02:00
parent c9157e83ef
commit 797a32c00a
2 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client.ts
View File

@ -31,7 +31,7 @@ let grid: Cell[] = new Array(9);
let pendingEvts: Point[] = [];
let myId: number | null = null;
let mySymbol: "x" | "o" | null = null;
let canvasMsg: string = "Offline";
let canvasMsg: string = "Offline...";
function drawGridBackground(ctx: CanvasRenderingContext2D, origin: Point) {
ctx.strokeStyle = "white";
@ -50,13 +50,12 @@ function drawGridBackground(ctx: CanvasRenderingContext2D, origin: Point) {
ctx.stroke();
}
function resizeCanvas(ctx: CanvasRenderingContext2D) {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.clearRect(0, 0, ctx.canvas.height, ctx. canvas.width);
}
function coordToGridIndex(origin: Point, clientPos: Point): [number, number] | undefined {
// Coord relative to origin of the grid (origin)
const pt = { x: clientPos.x - origin.x, y: clientPos.y - origin.y };
@ -129,7 +128,7 @@ function gridIndexToCoords(gridOrigin: Point, x: number, y: number): Point {
function updateGridState(ctx: CanvasRenderingContext2D, time: number, gridOrigin: Point) {
for (let y = 0; y < 3; ++y) {
for (let x = 0; x < 3; ++x) {
const shape = grid[y*3+x]
const shape = grid[y*3+x];
if (shape) {
if (shape.time === null) {
shape.time = time;
@ -164,7 +163,7 @@ function update(ctx: CanvasRenderingContext2D, time: number, ws: WebSocket) {
ctx.fillStyle = "white";
ctx.font = "24px sans-serif";
ctx.fillText(canvasMsg, 10, 30);
ctx.fillText(canvasMsg, gridOrigin.x, gridOrigin.y - 50);
drawGridBackground(ctx, gridOrigin);
handlePendingEvts(ws, gridOrigin);
@ -188,7 +187,7 @@ function init() {
// websocket stuff
ws.onopen = (e) => {
console.log("connected to websocket");
console.log("connected to websocket server");
};
ws.onmessage = (evt) => {
@ -238,7 +237,7 @@ function init() {
}
};
//window.addEventListener('resize', () => resizeCanvas(ctx));
window.addEventListener('resize', () => resizeCanvas(ctx));
window.requestAnimationFrame(t => update(ctx, t, ws));
}

14
server.ts
View File

@ -25,9 +25,9 @@ function getPlayerSymbol(): "o" | "x" {
return clients[0].symbol === "o" ? "x" : "o";
}
wss.on("connection", (ws) => {
wss.on("connection", (ws, req) => {
id += 1;
if (clients.length == 2) {
if (clients.length === 2) {
console.log("too many players");
ws.close();
return;
@ -40,14 +40,15 @@ wss.on("connection", (ws) => {
}
clients.push({id, ws, symbol});
ws.send(JSON.stringify(helloMsg));
console.log(`player #${id} connected`);
const addr = req.headers["x-forwarded-for"] || req.socket.remoteAddress;
console.log(`player #${id} connected with address ${addr}. total clients ${clients.length}`);
ws.addEventListener("message", (event: MessageEvent) => {
const message = JSON.parse(event.data as string);
const {x, y} = message;
const player = clients.find(x => x.ws === ws);
if (!player) throw new Error("player not found");
console.log(message, player!.id, currentPlayer?.id);
console.log("received message", message, "player", player!.id, "currentPlayer", currentPlayer?.id);
if (!currentPlayer) {
currentPlayer = player;
@ -103,11 +104,12 @@ wss.on("connection", (ws) => {
});
ws.on("close", (code: number) => {
console.log(`player disconnected. Resetting game. code: ${code}`);
clients = clients.filter(x => x.ws.readyState !== 3); // 3 == CLOSED
console.log(`player disconnected. Resetting game. Total clients ${clients.length}`);
// reset game state
grid = [0, 0, 0, 0, 0, 0, 0, 0, 0]
grid = [0, 0, 0, 0, 0, 0, 0, 0, 0];
currentPlayer = undefined;
endGame = false;
for (const c of clients) {
c.ws.send(JSON.stringify({
kind: "reset"