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

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 pendingEvts: Point[] = [];
let myId: number | null = null; let myId: number | null = null;
let mySymbol: "x" | "o" | null = null; let mySymbol: "x" | "o" | null = null;
let canvasMsg: string = "Offline"; let canvasMsg: string = "Offline...";
function drawGridBackground(ctx: CanvasRenderingContext2D, origin: Point) { function drawGridBackground(ctx: CanvasRenderingContext2D, origin: Point) {
ctx.strokeStyle = "white"; ctx.strokeStyle = "white";
@ -50,13 +50,12 @@ function drawGridBackground(ctx: CanvasRenderingContext2D, origin: Point) {
ctx.stroke(); ctx.stroke();
} }
function resizeCanvas(ctx: CanvasRenderingContext2D) { function resizeCanvas(ctx: CanvasRenderingContext2D) {
ctx.canvas.width = window.innerWidth; ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight; ctx.canvas.height = window.innerHeight;
ctx.clearRect(0, 0, ctx.canvas.height, ctx. canvas.width);
} }
function coordToGridIndex(origin: Point, clientPos: Point): [number, number] | undefined { function coordToGridIndex(origin: Point, clientPos: Point): [number, number] | undefined {
// Coord relative to origin of the grid (origin) // Coord relative to origin of the grid (origin)
const pt = { x: clientPos.x - origin.x, y: clientPos.y - origin.y }; 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) { function updateGridState(ctx: CanvasRenderingContext2D, time: number, gridOrigin: Point) {
for (let y = 0; y < 3; ++y) { for (let y = 0; y < 3; ++y) {
for (let x = 0; x < 3; ++x) { for (let x = 0; x < 3; ++x) {
const shape = grid[y*3+x] const shape = grid[y*3+x];
if (shape) { if (shape) {
if (shape.time === null) { if (shape.time === null) {
shape.time = time; shape.time = time;
@ -164,7 +163,7 @@ function update(ctx: CanvasRenderingContext2D, time: number, ws: WebSocket) {
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.font = "24px sans-serif"; ctx.font = "24px sans-serif";
ctx.fillText(canvasMsg, 10, 30); ctx.fillText(canvasMsg, gridOrigin.x, gridOrigin.y - 50);
drawGridBackground(ctx, gridOrigin); drawGridBackground(ctx, gridOrigin);
handlePendingEvts(ws, gridOrigin); handlePendingEvts(ws, gridOrigin);
@ -188,7 +187,7 @@ function init() {
// websocket stuff // websocket stuff
ws.onopen = (e) => { ws.onopen = (e) => {
console.log("connected to websocket"); console.log("connected to websocket server");
}; };
ws.onmessage = (evt) => { 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)); 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"; return clients[0].symbol === "o" ? "x" : "o";
} }
wss.on("connection", (ws) => { wss.on("connection", (ws, req) => {
id += 1; id += 1;
if (clients.length == 2) { if (clients.length === 2) {
console.log("too many players"); console.log("too many players");
ws.close(); ws.close();
return; return;
@ -40,14 +40,15 @@ wss.on("connection", (ws) => {
} }
clients.push({id, ws, symbol}); clients.push({id, ws, symbol});
ws.send(JSON.stringify(helloMsg)); 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) => { ws.addEventListener("message", (event: MessageEvent) => {
const message = JSON.parse(event.data as string); const message = JSON.parse(event.data as string);
const {x, y} = message; const {x, y} = message;
const player = clients.find(x => x.ws === ws); const player = clients.find(x => x.ws === ws);
if (!player) throw new Error("player not found"); 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) { if (!currentPlayer) {
currentPlayer = player; currentPlayer = player;
@ -103,11 +104,12 @@ wss.on("connection", (ws) => {
}); });
ws.on("close", (code: number) => { ws.on("close", (code: number) => {
console.log(`player disconnected. Resetting game. code: ${code}`);
clients = clients.filter(x => x.ws.readyState !== 3); // 3 == CLOSED clients = clients.filter(x => x.ws.readyState !== 3); // 3 == CLOSED
console.log(`player disconnected. Resetting game. Total clients ${clients.length}`);
// reset game state // 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; currentPlayer = undefined;
endGame = false;
for (const c of clients) { for (const c of clients) {
c.ws.send(JSON.stringify({ c.ws.send(JSON.stringify({
kind: "reset" kind: "reset"