Replace the browser confirm boxes with undo and in-page dialogs

Three system confirm() dialogs sat in the middle of dealing. The worst was on Next Hand — the most-pressed button in a session, asking "are you sure?" every single time, stealing focus and, on a phone, taking over the screen. Next Hand now just happens, and a toast says where the button landed with an Undo beside it for the few seconds anyone would notice a misclick. The same undo covers the pot wizard, which is the more valuable case: paying the wrong player is a real mistake, and rolling it back restores the hand history entry and the session standings along with the seats. The snapshot is in-memory only — an undo is for the mistake you just made, not one from last night. The two genuinely destructive actions keep a confirmation, but as an in-page dialog that matches the table instead of the browser's own: Escape or the backdrop cancels, Enter confirms, and on a phone the buttons go full width with Cancel nearest the thumb. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
2026-08-31 18:22:50 -06:00
parent a39675f975
commit d01c67fc45
4 changed files with 329 additions and 12 deletions
@@ -0,0 +1,115 @@
+// Toasts and confirmation dialogs, so the table never has to fall back on the
+// browser's own alert boxes. A system confirm() steals focus, looks nothing like
+// the rest of the page, and on a phone it's a full-screen interruption — all of
+// which is a bad trade for a dealer trying to keep a game moving.
+
+// A short-lived message at the bottom of the screen, optionally with one action
+// (in practice: Undo). Only one is ever on screen; a second replaces the first.
+const Toast = {
+    DEFAULT_DURATION_MS: 8000,
+    timer: null,
+
+    show(message, options = {}) {
+        const host = document.getElementById("toastHost");
+        if (!host) return;
+
+        this.dismiss();
+
+        const toast = document.createElement("div");
+        toast.className = "toast";
+        toast.setAttribute("role", "status");
+
+        const text = document.createElement("span");
+        text.className = "toastText";
+        text.textContent = message;
+        toast.appendChild(text);
+
+        if (options.actionLabel && options.onAction) {
+            const action = document.createElement("button");
+            action.type = "button";
+            action.className = "toastAction";
+            action.textContent = options.actionLabel;
+            action.addEventListener("click", () => {
+                this.dismiss();
+                options.onAction();
+            });
+            toast.appendChild(action);
+        }
+
+        const close = document.createElement("button");
+        close.type = "button";
+        close.className = "toastClose";
+        close.setAttribute("aria-label", "Dismiss");
+        close.textContent = "✕";
+        close.addEventListener("click", () => this.dismiss());
+        toast.appendChild(close);
+
+        host.appendChild(toast);
+        // Next frame, so the entrance transition actually runs.
+        requestAnimationFrame(() => toast.classList.add("toastVisible"));
+
+        this.timer = setTimeout(
+            () => this.dismiss(),
+            options.duration || this.DEFAULT_DURATION_MS
+        );
+    },
+
+    dismiss() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+        const host = document.getElementById("toastHost");
+        if (host) host.innerHTML = "";
+    },
+};
+
+// Styled stand-in for confirm(). Resolves true if the dealer goes through with it.
+const Dialog = {
+    confirm({ title, message, confirmLabel = "Confirm", cancelLabel = "Cancel", danger = false }) {
+        return new Promise(resolve => {
+            const overlay = document.getElementById("confirmOverlay");
+            const modal = overlay.querySelector("#confirmModal");
+            overlay.querySelector("#confirmTitle").textContent = title;
+            overlay.querySelector("#confirmMessage").textContent = message;
+
+            const confirmBtn = overlay.querySelector("#confirmAcceptBtn");
+            const cancelBtn = overlay.querySelector("#confirmCancelBtn");
+            confirmBtn.textContent = confirmLabel;
+            cancelBtn.textContent = cancelLabel;
+            confirmBtn.classList.toggle("holdemBtnDanger", danger);
+            confirmBtn.classList.toggle("holdemBtnAccent", !danger);
+
+            const finish = result => {
+                overlay.hidden = true;
+                confirmBtn.removeEventListener("click", onAccept);
+                cancelBtn.removeEventListener("click", onCancel);
+                overlay.removeEventListener("click", onBackdrop);
+                document.removeEventListener("keydown", onKey);
+                resolve(result);
+            };
+            const onAccept = () => finish(true);
+            const onCancel = () => finish(false);
+            const onBackdrop = e => {
+                if (e.target === overlay) finish(false);
+            };
+            const onKey = e => {
+                if (e.key === "Escape") finish(false);
+                if (e.key === "Enter") finish(true);
+            };
+
+            confirmBtn.addEventListener("click", onAccept);
+            cancelBtn.addEventListener("click", onCancel);
+            overlay.addEventListener("click", onBackdrop);
+            document.addEventListener("keydown", onKey);
+
+            overlay.hidden = false;
+            modal.focus();
+            confirmBtn.focus();
+        });
+    },
+};
+
+if (typeof module !== "undefined" && module.exports) {
+    module.exports = { Toast, Dialog };
+}
@@ -8,6 +8,29 @@ document.addEventListener("DOMContentLoaded", () => {

    Render.mount(state, hooks);

+    // Moving to the next hand used to ask "are you sure?" every single time —
+    // the most-pressed button in a session, gated behind a system dialog. It now
+    // just happens, and the toast offers the way back for the few seconds anyone
+    // would notice a misclick. The snapshot is deliberately in-memory only: an
+    // undo is for the mistake you just made, not one from last night's session.
+    const runUndoable = (message, mutate) => {
+        const snapshot = JSON.parse(JSON.stringify(state));
+        mutate();
+        hooks.save(state);
+        Render.renderAll();
+
+        Toast.show(message, {
+            actionLabel: "Undo",
+            onAction: () => {
+                Object.keys(state).forEach(key => delete state[key]);
+                Object.assign(state, snapshot);
+                hooks.save(state);
+                Render.renderAll();
+                Toast.show("Undone.", { duration: 2500 });
+            },
+        });
+    };
+
    document.getElementById("seatCountInput").addEventListener("change", e => {
        HoldemState.resizeSeats(state, Number(e.target.value));
        hooks.save(state);
@@ -49,25 +72,40 @@ document.addEventListener("DOMContentLoaded", () => {
    });

    document.getElementById("nextHandBtn").addEventListener("click", () => {
-        if (!confirm("Start the next hand? This moves the button, clears cards and chip counts for every seat.")) return;
-        HoldemState.startNextHand(state);
-        hooks.save(state);
-        Render.renderAll();
+        // startNextHand moves the button on by one; say where it landed so the
+        // dealer can confirm the rotation without hunting for the badge.
+        const nextDealer = HoldemState.nextSeatIndex(state, state.dealerSeatIndex, 1);
+        const where = state.dedicatedDealer
+            ? `small blind on seat ${HoldemState.nextSeatIndex(state, nextDealer, 1) + 1}`
+            : `button on seat ${nextDealer + 1}`;
+
+        runUndoable(`Next hand — ${where}. Cards and chip counts cleared.`, () =>
+            HoldemState.startNextHand(state)
+        );
    });

-    document.getElementById("resetTableBtn").addEventListener("click", () => {
-        if (!confirm("Reset the whole table? This clears every seat, chip legend and note.")) return;
+    document.getElementById("resetTableBtn").addEventListener("click", async () => {
+        const ok = await Dialog.confirm({
+            title: "Reset the whole table?",
+            message: "Every seat, chip colour and note goes back to defaults. The hand history and session standings are cleared too.",
+            confirmLabel: "Reset table",
+            danger: true,
+        });
+        if (!ok) return;
+
        HoldemState.clear();
        Object.assign(state, HoldemState.createDefault());
        Render.mount(state, hooks);
+        Toast.show("Table reset.", { duration: 2500 });
    });

    document.getElementById("resolvePotBtn").addEventListener("click", () => {
        PotWizard.open(state, payouts => {
-            if (payouts.length > 0) HoldemState.recordHand(state, payouts);
-            HoldemState.startNextHand(state);
-            hooks.save(state);
-            Render.renderAll();
+            const paid = payouts.map(p => `${p.label} ${Money.format(p.amount)}`).join(", ");
+            runUndoable(paid ? `Paid ${paid}.` : "Hand closed with nothing to pay out.", () => {
+                if (payouts.length > 0) HoldemState.recordHand(state, payouts);
+                HoldemState.startNextHand(state);
+            });
        });
    });

@@ -78,11 +116,19 @@ document.addEventListener("DOMContentLoaded", () => {
        if (e.target.id === "potWizardOverlay") PotWizard.close();
    });

-    document.getElementById("clearHistoryBtn").addEventListener("click", () => {
-        if (!confirm("Clear the hand history and reset the hand counter to 1? This can't be undone.")) return;
+    document.getElementById("clearHistoryBtn").addEventListener("click", async () => {
+        const ok = await Dialog.confirm({
+            title: "Clear the hand history?",
+            message: "This wipes every logged hand and the session standings, and puts the hand counter back to #1. Export first if anyone might want the numbers.",
+            confirmLabel: "Clear history",
+            danger: true,
+        });
+        if (!ok) return;
+
        HoldemState.clearHistory(state);
        hooks.save(state);
        Render.renderAll();
+        Toast.show("Hand history cleared.", { duration: 2500 });
    });

    document.getElementById("exportHistoryBtn").addEventListener("click", () => {