From 3093754bd4e909de6237e316694554c5bbfcd66a Mon Sep 17 00:00:00 2001
From: sepia <soerxpso@gmail.com>
Date: Mon, 21 Jul 2025 22:54:03 -0500
Subject: [PATCH] Add resign button

---
 index.html                         |  6 ++--
 public/scripts/send-ws-messages.js |  6 ++++
 public/style.css                   | 48 ++++++++++++++++++++----------
 src/game/game-instance.ts          |  6 ++++
 src/messages.ts                    |  2 --
 src/web-socket-handler.tsx         | 39 +++++++++++++++++++-----
 6 files changed, 79 insertions(+), 28 deletions(-)
diff --git a/index.html b/index.html
index cf8b8c7..e68ffce 100644
--- a/index.html
+++ b/index.html
@@ -18,9 +18,9 @@
   </head>
   <body>
     <div id="game-container" hx-ext="ws">
-      <div id="title-box" class="title-box"></div>
-      <div id="game-board" class="game-board-grid"></div>
-      <div id="messages"></div>
+      <div id="title-box"></div>
+      <div id="game-board"></div>
+      <div id="button-box"></div>
     </div>
     <div id="game-link-container">
       <button id="copy-link-button" onclick="copyGameLink()">
diff --git a/public/scripts/send-ws-messages.js b/public/scripts/send-ws-messages.js
index 5d67d41..141955f 100644
--- a/public/scripts/send-ws-messages.js
+++ b/public/scripts/send-ws-messages.js
@@ -3,11 +3,17 @@ document.addEventListener('htmx:wsConfigSend', function (e) {
     const row = parseInt(e.target.dataset.row);
     const col = parseInt(e.target.dataset.col);
 
+    console.log(e.target.id);
+
     // Set the custom JSON data
     e.detail.parameters = {
       type: 'make_move',
       row: row,
       col: col,
     };
+  } else if (e.target.id == 'resign-button') {
+    e.detail.parameters = {
+      type: 'resign'
+    };
   }
 });
diff --git a/public/style.css b/public/style.css
index f17216a..7bdef16 100644
--- a/public/style.css
+++ b/public/style.css
@@ -102,7 +102,7 @@ body {
   padding-bottom: 0.25em;
 }
 
-.game-board-grid {
+#game-board {
   position: relative;
   width: calc(14 * 30px);
   height: calc(14 * 30px);
@@ -110,7 +110,7 @@ body {
   border: 2px solid var(--color-neutral-700);
 }
 
-.game-board-grid::before {
+#game-board::before {
   content: '';
   position: absolute;
   top: 0;
@@ -221,8 +221,15 @@ body {
   margin-top: 20px;
 }
 
-#copy-link-button {
-  position: absolute;
+img.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+}
+
+button {
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -230,27 +237,38 @@ body {
   padding: 8px 15px;
   border-radius: 5px;
   white-space: nowrap;
-}
-
-#copy-link-button {
-  background-color: var(--color-primary);
-  color: var(--color-on-primary);
   border: none;
   cursor: pointer;
   gap: 8px;
   font-size: 1em;
 }
 
-#copy-link-button:hover {
+button:hover {
   background-color: var(--color-primary-light);
 }
 
+#button-box {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+#resign-button {
+  background-color: var(--color-error);
+  color: var(--color-on-primary);
+}
+
+#resign-button:hover {
+  background-color: var(--color-error-light);
+}
+
+#copy-link-button {
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+}
+
 #copy-link-button.copied-state {
   background-color: var(--color-success);
 }
 
-img.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
-}
diff --git a/src/game/game-instance.ts b/src/game/game-instance.ts
index 8e48a3c..b138bd1 100644
--- a/src/game/game-instance.ts
+++ b/src/game/game-instance.ts
@@ -76,6 +76,12 @@ export class GomokuGame {
     return { success: true };
   }
 
+  public resign(resigningPlayerColor: PlayerColor) {
+    this.winnerColor = resigningPlayerColor === 'white' ? 'black' : 'white';
+    this.status = 'finished';
+    this.currentPlayerColor = null;
+  }
+
   private checkWin(row: number, col: number, color: PlayerColor): boolean {
     const directions = [
       [1, 0], // vertical
diff --git a/src/messages.ts b/src/messages.ts
index 48d9081..22d0b1d 100644
--- a/src/messages.ts
+++ b/src/messages.ts
@@ -1,7 +1,5 @@
 export interface Message {
   type: 'make_move' | 'resign';
-  gameId: string;
-  playerId: string;
 }
 
 export interface MakeMoveMessage extends Message {
diff --git a/src/web-socket-handler.tsx b/src/web-socket-handler.tsx
index b0aaaf4..42b7018 100644
--- a/src/web-socket-handler.tsx
+++ b/src/web-socket-handler.tsx
@@ -118,8 +118,12 @@ class GameServer {
   }
 
   public broadcastButtonsToPlayer(conn: PlayerConnection) {
-    // TODO
-      console.log(`Sent buttons for game ${this.id} to player ${conn.id}`);
+    let buttonsHtml;
+    if (this.gomoku.status == 'playing' && this.getPlayerColor(conn)) {
+      buttonsHtml = <button id="resign-button" ws-send="click">Resign</button>;
+    }
+    conn.ws.send(<div id="button-box">{buttonsHtml}</div>);
+    console.log(`Sent buttons for game ${this.id} to player ${conn.id}`);
   }
 
   private playerTag(playerId: string, color: PlayerColor) {
@@ -136,6 +140,9 @@ class GameServer {
       return;
     }
 
+    console.log(
+      `Handling ${message.type} message in game ${this.id} from player ${conn.id}: ${JSON.stringify(message)}`,
+    );
     switch (message.type) {
       case 'make_move': {
         this.handleMakeMove(conn, message as MakeMoveMessage);
@@ -159,9 +166,6 @@ class GameServer {
   }
 
   private handleMakeMove(conn: PlayerConnection, message: MakeMoveMessage): void {
-    console.log(
-      `Handling make_move message in game ${this.id} from player ${conn.id}: ${{ message }}`,
-    );
     const { row, col } = message;
 
     var playerColor;
@@ -180,7 +184,6 @@ class GameServer {
 
     const stateBeforeMove = this.gomoku.status;
     const result = this.gomoku.makeMove(playerColor, row, col);
-    console.log(result);
     if (result.success) {
       this.broadcastBoard();
       this.broadcastTitle();
@@ -196,8 +199,28 @@ class GameServer {
     }
   }
 
-  private handleResignation(conn: PlayerConnection, _message: ResignationMessage): void {
-    // TODO
+  private handleResignation(conn: PlayerConnection, message: ResignationMessage): void {
+    console.log(
+      `Handling resign message in game ${this.id} from player ${conn.id}: ${{ message }}`,
+    );
+
+    if (this.gomoku.status !== 'playing') {
+      conn.sendMessage('error', 'You can only resign from an active game.');
+      return;
+    }
+
+    const resigningPlayerColor = this.getPlayerColor(conn);
+    if (!resigningPlayerColor) {
+      conn.sendMessage('error', 'You are not a player in this game.');
+      return;
+    }
+
+    this.gomoku.resign(resigningPlayerColor);
+    this.broadcastBoard();
+    this.broadcastTitle();
+    this.broadcastButtons();
+
+    console.log(`Player ${conn.id} resigned from game ${this.id}`);
   }
 }
 
