Add resign button

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'
+    };
   }
 });

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;
-}