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
@@ -210,6 +210,19 @@
    </div>
 </template>

+<div id="toastHost" aria-live="polite"></div>
+
+<div id="confirmOverlay" hidden>
+    <div id="confirmModal" role="alertdialog" aria-labelledby="confirmTitle" aria-describedby="confirmMessage" tabindex="-1">
+        <h2 id="confirmTitle"></h2>
+        <p id="confirmMessage"></p>
+        <div class="confirmActions">
+            <button id="confirmCancelBtn" class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
+            <button id="confirmAcceptBtn" class="holdemBtn holdemBtnDanger" type="button">Confirm</button>
+        </div>
+    </div>
+</div>
+
 <div id="potWizardOverlay" hidden>
    <div id="potWizardModal">
        <div class="potWizardHeader">
@@ -226,6 +239,7 @@

@section Scripts {
    <script src="~/js/casino/holdem/money.js?v=@ViewData["cssVersion"]"></script>
+    <script src="~/js/casino/holdem/feedback.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/casino/holdem/potCalculator.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/casino/holdem/state.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/casino/holdem/render.js?v=@ViewData["cssVersion"]"></script>
@@ -753,6 +753,135 @@ body {

 /* ---------- Pot wizard ---------- */

+/* ---------- Toasts ---------- */
+
+#toastHost {
+    position: fixed;
+    left: 50%;
+    bottom: 1.25rem;
+    transform: translateX(-50%);
+    z-index: 80;
+    width: min(560px, calc(100vw - 1.5rem));
+    pointer-events: none;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: linear-gradient(180deg, #2b2b2b, #202020);
+    border: 1px solid #414141;
+    border-left: 3px solid #d8b46a;
+    border-radius: 10px;
+    padding: 0.7rem 0.8rem 0.7rem 0.9rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
+    pointer-events: auto;
+    opacity: 0;
+    transform: translateY(12px);
+    transition: opacity 0.18s ease, transform 0.18s ease;
+}
+
+.toast.toastVisible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.toastText {
+    flex: 1;
+    min-width: 0;
+    color: #e9e9e9;
+    font-size: 0.85rem;
+    line-height: 1.35;
+}
+
+.toastAction {
+    flex: none;
+    min-height: 38px;
+    padding: 0.35rem 0.9rem;
+    border-radius: 8px;
+    border: 1px solid #d8b46a;
+    background: rgba(216, 180, 106, 0.12);
+    color: #f0d9a8;
+    font-size: 0.85rem;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+}
+
+.toastAction:hover {
+    background: rgba(216, 180, 106, 0.22);
+}
+
+.toastClose {
+    flex: none;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: none;
+    background: transparent;
+    color: #888;
+    font-size: 0.8rem;
+    font-family: inherit;
+    cursor: pointer;
+}
+
+.toastClose:hover {
+    background: #333;
+    color: #ddd;
+}
+
+/* ---------- Confirmation dialog ---------- */
+
+#confirmOverlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.72);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 90;
+    padding: 1.5rem;
+}
+
+#confirmOverlay[hidden] {
+    display: none;
+}
+
+#confirmModal {
+    background: #1e1e1e;
+    border: 1px solid #3a3a3a;
+    border-radius: 12px;
+    width: 100%;
+    max-width: 420px;
+    padding: 1.3rem 1.4rem 1.2rem;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+    outline: none;
+}
+
+#confirmTitle {
+    margin: 0 0 0.5rem;
+    font-size: 1.05rem;
+    font-weight: 500;
+    color: #f5f5f5;
+}
+
+#confirmMessage {
+    margin: 0 0 1.2rem;
+    color: #a5a5a5;
+    font-size: 0.85rem;
+    line-height: 1.5;
+}
+
+.confirmActions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.6rem;
+}
+
+.confirmActions .holdemBtn {
+    min-height: 44px;
+}
+
 #potWizardOverlay {
    position: fixed;
    inset: 0;
@@ -1053,4 +1182,17 @@ body {
        min-height: 44px;
        margin-top: 0.4rem;
    }
+
+    .toastAction {
+        min-height: 44px;
+    }
+
+    .confirmActions {
+        flex-direction: column-reverse;
+    }
+
+    .confirmActions .holdemBtn {
+        width: 100%;
+        justify-content: center;
+    }
 }
@@ -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 => {
+            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);
-            hooks.save(state);
-            Render.renderAll();
+            });
        });
    });

@@ -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", () => {