Replace native confirm() with an in-site confirmation dialog

Add App.confirm() in common.js: a promise-based dialog styled like the
site's modals, with a title, multi-line message and custom button labels.
Destructive actions use a red OK button and focus Cancel by default;
Escape and backdrop clicks cancel, and Tab stays inside the dialog.

Use it for folding when a check is possible, leaving the table,
confirming showdown winners and deleting tables from the lobby. After the
dialog closes, re-check that the action is still valid (turn not passed,
pot not already awarded, table still listed) before sending it.

Also add a "poker-test" launch config that runs on port 4672 with the
example keys from .env.example, for local browser testing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
agomizi1cmandClaude Opus 5.5 committed 2026-10-20 00:34:43 +09:00
1 parent d89ce1dd30
commit 680aa20d30
5 files changed
+122 -11

No files matched your search

+14
View File
@@ -526,6 +526,20 @@ body.table-page {
.modal { background: var(--bg-deep); border-radius: var(--radius); padding: 20px; width: 100%; max-width: 380px; }
.modal h2 { font-size: 18px; margin-bottom: 4px; }
/* 確認ダイアログ(App.confirm)。接続切れの帯やレビューのモーダルより手前に出す */
.confirm-backdrop { z-index: 40; animation: confirm-fade 0.12s ease-out; }
.confirm-modal { max-width: 340px; border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); animation: confirm-pop 0.14s ease-out; }
.confirm-title { margin-bottom: 8px; }
.confirm-message { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.confirm-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.confirm-buttons .btn { padding: 12px 8px; font-size: 16px; white-space: normal; }
.confirm-buttons .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@keyframes confirm-fade { from { opacity: 0; } }
@keyframes confirm-pop { from { opacity: 0; transform: scale(0.94); } }
@media (prefers-reduced-motion: reduce) {
.confirm-backdrop, .confirm-modal { animation: none; }
}
.toast {
position: fixed;
left: 50%;