Refactor button box code a bit, and fix color of copy game link icon

index.html

@@ -24,11 +24,9 @@
     </div>
     <div id="game-link-container">
       <button id="copy-link-button" onclick="copyGameLink()">
-        <img
-          src="/icons/clipboard-copy.svg"
-          alt="Copy Game Link"
-          class="icon"
-        />
+        <svg class="icon" alt="Copy">
+          <use href="/icons/clipboard-copy.svg"></use>
+        </svg>
         <span id="copy-link-text">Click to copy game link!</span>
       </button>
     </div>

public/scripts/copy-game-link.js

@@ -14,12 +14,12 @@ function copyGameLink() {
         clearTimeout(window.copyButtonTimeoutId);
       }
 
-      copyLinkButton.querySelector('img').src = '/icons/copy-success.svg';
+      copyLinkButton.querySelector('use').href = '/icons/copy-success.svg';
       copyLinkText.textContent = 'Game link copied!';
       copyLinkButton.classList.add('copied-state');
 
       window.copyButtonTimeoutId = setTimeout(() => {
-        copyLinkButton.querySelector('img').src = originalIconSrc;
+        copyLinkButton.querySelector('use').href = originalIconSrc;
         copyLinkText.textContent = originalTextContent;
         copyLinkButton.classList.remove('copied-state');
         window.copyButtonTimeoutId = null;

public/scripts/handle-redirects.js

@@ -1,4 +1,5 @@
 document.addEventListener('htmx:wsAfterMessage', function (e) {
+  console.log(e.detail.message);
   const message = JSON.parse(e.detail.message);
   if (message.type === 'redirect_to_game') {
     window.location.href = '/?gameId=' + message.gameId;

public/style.css

@@ -221,9 +221,9 @@ body {
   margin-top: 20px;
 }
 
-img.icon {
-  width: 1em;
-  height: 1em;
+.icon {
+  width: 1.4em;
+  height: 1.4em;
   vertical-align: middle;
 }
 
@@ -249,6 +249,8 @@ button:hover {
 
 #button-box {
   display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   justify-content: center;
   gap: 10px;
   margin-top: 20px;

src/web-socket-handler.tsx

@@ -139,90 +139,94 @@ class GameServer {
   }
 
   public broadcastButtonsToPlayer(conn: PlayerConnection) {
-    let buttonsHtml;
+    const buttons: JSX.Element[] = [];
+
     if (this.gomoku.status == 'playing' && this.getPlayerColor(conn)) {
       if (this.takebackRequesterId) {
         if (this.takebackRequesterId === conn.id) {
-          buttonsHtml = (
+          buttons.push(
             <button id="cancel-takeback-request-button" ws-send="click">
               Cancel Takeback Request
-            </button>
+            </button>,
           );
         } else {
-          buttonsHtml = (
-            <div>
+          buttons.push(
             <button id="accept-takeback-button" ws-send="click">
               Accept Takeback
-              </button>
+            </button>,
+          );
+          buttons.push(
             <button id="decline-takeback-button" ws-send="click">
               Decline Takeback
-              </button>
-            </div>
+            </button>,
           );
         }
       } else if (this.drawRequesterId) {
         if (this.drawRequesterId === conn.id) {
-          buttonsHtml = (
+          buttons.push(
             <button id="cancel-draw-request-button" ws-send="click">
               Cancel Draw Request
-            </button>
+            </button>,
           );
         } else {
-          buttonsHtml = (
-            <div>
+          buttons.push(
             <button id="accept-draw-button" ws-send="click">
               Accept Draw
-              </button>
+            </button>,
+          );
+          buttons.push(
             <button id="decline-draw-button" ws-send="click">
               Decline Draw
-              </button>
-            </div>
+            </button>,
           );
         }
       } else {
-        buttonsHtml = (
-          <div>
+        buttons.push(
           <button id="resign-button" ws-send="click">
             Resign
-            </button>
+          </button>,
+        );
+        buttons.push(
           <button id="takeback-button" ws-send="click">
             Takeback
-            </button>
+          </button>,
+        );
+        buttons.push(
           <button id="draw-button" ws-send="click">
             Draw
-            </button>
-          </div>
+          </button>,
         );
       }
     } else if (this.gomoku.status === 'finished') {
       if (this.rematchRequesterId) {
         if (this.rematchRequesterId === conn.id) {
-          buttonsHtml = (
+          buttons.push(
             <button id="cancel-rematch-request-button" ws-send="click">
               Cancel Rematch Request
-            </button>
+            </button>,
           );
         } else {
-          buttonsHtml = (
-            <div>
+          buttons.push(
             <button id="accept-rematch-button" ws-send="click">
               Accept Rematch
-              </button>
+            </button>,
+          );
+          buttons.push(
             <button id="decline-rematch-button" ws-send="click">
               Decline Rematch
-              </button>
-            </div>
+            </button>,
           );
         }
       } else {
-        buttonsHtml = (
+        buttons.push(
           <button id="rematch-button" ws-send="click">
             Rematch
-          </button>
+          </button>,
         );
       }
     }
-    conn.ws.send(<div id="button-box">{buttonsHtml}</div>);
+
+    conn.ws.send(<div id="button-box">{buttons}</div>);
     console.log(`Sent buttons for game ${this.id} to player ${conn.id}`);
   }