From 797a32c00a046226e18bf2a7cf4c7443730b7957 Mon Sep 17 00:00:00 2001
From: Thibaud <thibaud.gasser@gmx.com>
Date: Wed, 25 Sep 2024 22:30:03 +0200
Subject: [PATCH] log client address

---
 client.ts | 13 ++++++-------
 server.ts | 14 ++++++++------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/client.ts b/client.ts
index 9f6e35b..2eb87d5 100644
--- a/client.ts
+++ b/client.ts
@@ -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));
 }
 
diff --git a/server.ts b/server.ts
index 0c748d6..7e66e69 100644
--- a/server.ts
+++ b/server.ts
@@ -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"