Make spin a popup

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>Spin that wheel!</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>

static/html/tmpl.table.html

@@ -39,20 +39,14 @@
     {{ 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"
         hx-swap="none"
         {{ 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"

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");