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:
1 parent
d89ce1dd30
commit
680aa20d30
5 files changed
+122
-11
No files matched your search
@@ -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%;
|
||||
|
||||
Reference in new issue
Block a user