From 5a5bfccf2ac5bedf50ee51d49c8a5616b29c71fc Mon Sep 17 00:00:00 2001
From: kat <k.lukens@gmail.com>
Date: Sat, 13 Jun 2026 21:51:18 -0600
Subject: [PATCH 1/2] move spin button to popup

---
 static/html/tmpl.game.html  | 11 +++++++++++
 static/html/tmpl.table.html |  8 +-------
 static/js/dialogs.js        | 24 ++++++++++++++++++++++++
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/static/html/tmpl.game.html b/static/html/tmpl.game.html
index 9e11c22..b983985 100644
--- a/static/html/tmpl.game.html
+++ b/static/html/tmpl.game.html
@@ -144,6 +144,17 @@ <h2>Verdict</h2>
       </div>
     </dialog>
 
+    <dialog id="spin-dialog">
+      <div class="dialog-body stack stack-centered">
+        <h2>Your turn!</h2>
+        <button class="button-teal"
+          hx-post="/{{ .Game.ID }}/action/spin" hx-swap="none"
+          data-close-on-success="spin-dialog">
+          spin
+        </button>
+      </div>
+    </dialog>
+
     <dialog id="newcard-dialog">
       <div class="dialog-body stack stack-centered">
         <h2>new rule</h2>
diff --git a/static/html/tmpl.table.html b/static/html/tmpl.table.html
index c0b3506..5fa99fc 100644
--- a/static/html/tmpl.table.html
+++ b/static/html/tmpl.table.html
@@ -39,7 +39,7 @@
     {{ end }}
   </div>
 {{- else -}}
-  <div class="table-bar" data-awaiting-ack="{{ $.AwaitingAck }}" data-initiative="{{ $.Game.InitiativeCurrent.Int32 }}" data-modifier-pending="{{ if and (eq $.Game.StateName "pending") $isTurn }}true{{ end }}">
+  <div class="table-bar" data-awaiting-ack="{{ $.AwaitingAck }}" data-initiative="{{ $.Game.InitiativeCurrent.Int32 }}" data-modifier-pending="{{ if and (eq $.Game.StateName "pending") $isTurn }}true{{ end }}" {{ if and (eq $.Game.StateName "turn") $isTurn (not $.AwaitingAck) }}data-spin-available{{ end }}>
     {{ if not $isHost }}
       <button class="button-teal"
         hx-post="/{{ $gid }}/action/acknowledge"
@@ -47,12 +47,6 @@
         {{ if not (and (eq $.Game.StateName "turn") $isTurn $.AwaitingAck) }}disabled{{ end }}>
         end turn
       </button>
-      <button class="button-teal"
-        hx-post="/{{ $gid }}/action/spin"
-        hx-swap="none"
-        {{ if not (and (eq $.Game.StateName "turn") $isTurn (not $.AwaitingAck)) }}disabled{{ end }}>
-        spin
-      </button>
     {{ end }}
     {{ if $isHost }}
       <button class="button-action"
diff --git a/static/js/dialogs.js b/static/js/dialogs.js
index fb0588c..e097db5 100644
--- a/static/js/dialogs.js
+++ b/static/js/dialogs.js
@@ -132,6 +132,30 @@
   }
   document.body.addEventListener("newCard", showNewCard);
 
+  var lastSpinInitiative = null;
+  var spinDialog = document.getElementById("spin-dialog");
+  if (spinDialog) {
+    spinDialog.addEventListener("cancel", function (e) {
+      e.preventDefault();
+    });
+  }
+  document.body.addEventListener("htmx:afterSettle", function (e) {
+    if (!e.target || e.target.id !== "table") return;
+    var bar = document.querySelector(".table-bar");
+    if (!bar || !spinDialog) return;
+    var available = bar.hasAttribute("data-spin-available");
+    var initiative = bar.dataset.initiative;
+    if (available) {
+      if (initiative !== lastSpinInitiative) {
+        lastSpinInitiative = initiative;
+        if (!spinDialog.open) spinDialog.showModal();
+      }
+    } else {
+      lastSpinInitiative = null;
+      if (spinDialog.open) spinDialog.close();
+    }
+  });
+
   var newcardInitiative = null;
   document.body.addEventListener("newCard", function () {
     var bar = document.querySelector(".table-bar");

From 7ba31ba3abe5c7b8e9f3e3bf49360910d8db05d7 Mon Sep 17 00:00:00 2001
From: kat <k.lukens@gmail.com>
Date: Sat, 13 Jun 2026 21:56:46 -0600
Subject: [PATCH 2/2] spin that wheel

---
 static/html/tmpl.game.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/html/tmpl.game.html b/static/html/tmpl.game.html
index b983985..b325ee7 100644
--- a/static/html/tmpl.game.html
+++ b/static/html/tmpl.game.html
@@ -146,7 +146,7 @@ <h2>Verdict</h2>
 
     <dialog id="spin-dialog">
       <div class="dialog-body stack stack-centered">
-        <h2>Your turn!</h2>
+        <h2>Spin that wheel!</h2>
         <button class="button-teal"
           hx-post="/{{ .Game.ID }}/action/spin" hx-swap="none"
           data-close-on-success="spin-dialog">