Add double-tap and press-and-hold shortcuts to the seats

Folding someone meant opening their editor, finding the Fold box, ticking it,
and dismissing the sheet — four interactions for the thing that happens most
often in a hand.

Double-tap a seat to fold, and again to put them back. Press and hold for a
quick menu of everything else you do to one player: fold, all-in, sit out or
deal in, hand them the button, or open the full editor. Both are undoable the
same way the header buttons are, because a gesture is easier to fire by
accident than a button.

The single tap now waits out the double-tap window before opening the editor —
a fifth of a second of latency on opening a form, in exchange for a fold that
doesn't also fling a sheet up over the table. A press that moves is a drag, so
the hold is cancelled and swapping seats still works, and the puck shrinks
slightly while held so a press that's being counted looks different from one
that's being ignored.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
This commit is contained in:
2026-08-31 21:54:56 -06:00
co-authored by Claude Sonnet 5
parent 0759d89d13
commit dabf1100c9
5 changed files with 354 additions and 13 deletions
+99 -1
View File
@@ -238,7 +238,12 @@ body {
cursor: grab;
z-index: 1;
text-align: center;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
/* A long press on a phone otherwise selects the player's name or raises the
system callout menu instead of ours. */
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.seat.dragging {
@@ -518,6 +523,99 @@ body {
font-weight: 400;
}
/* ---------- Seat long-press menu ---------- */
/* Held down, before the menu opens — the only feedback that a press is being
counted rather than ignored. */
.seat.seatPressing {
transform: translate(-50%, -50%) scale(0.94);
}
#seatMenuOverlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.72);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 96;
}
#seatMenuOverlay[hidden] {
display: none;
}
#seatMenuSheet {
width: 100%;
max-width: 420px;
background: linear-gradient(180deg, #242424, #1a1a1a);
border: 1px solid #3a3a3a;
border-bottom: none;
border-radius: 16px 16px 0 0;
padding: 0.35rem 0.9rem calc(1rem + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.65);
}
.seatMenuHeader {
margin-bottom: 0.8rem;
}
.seatMenuHeader h2 {
margin: 0;
font-size: 1.05rem;
font-weight: 500;
color: #f5f5f5;
}
#seatMenuSubtitle {
color: #9a9a9a;
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
}
#seatMenuActions {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-bottom: 0.6rem;
}
.seatMenuBtn {
width: 100%;
min-height: 52px;
border-radius: 11px;
border: 1px solid #3a3a3a;
background: linear-gradient(180deg, #2e2e2e, #232323);
color: #eee;
font-family: inherit;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.12s ease;
}
.seatMenuBtn:hover {
border-color: #4a4a4a;
background: linear-gradient(180deg, #383838, #2a2a2a);
}
.seatMenuBtn.menuDanger {
background: linear-gradient(180deg, #3d1f1f, #2c1515);
border-color: #5b2626;
color: #ffd6d6;
}
.seatMenuBtn.menuAccent {
background: linear-gradient(180deg, #3a2f18, #241d0f);
border-color: #a9782f;
color: #f0d9a8;
}
#seatMenuCancelBtn {
width: 100%;
justify-content: center;
min-height: 48px;
}
/* ---------- Card picker ---------- */
#cardPickerOverlay {