Implement Texas Hold'em play: dealing, betting, side pots, showdown
- Hand engine (server/hand.js): crypto-shuffled deck kept server-side, blinds (heads-up button = SB), min-raise rules incl. incomplete all-in, uncalled bet refunds, side pots, split pots, all-in runout - Hand evaluator (server/cards.js) and node:test suite (npm test) - Table flow: hands auto-continue after host START, 30s action clock (timeout = check/fold + sit out), sit out / sit in, rebuy, mid-hand leave folds and keeps the seat reserved until the hand ends, pause freezes all clocks - Only each player's own hole cards are sent until a showdown/runout reveal; all actions validated server-side - Play UI: board, hole cards, bets, action tags, turn timer, raise panel with presets, showdown results with winning cards highlighted, compact 7+ layout - Remove the host crown and the temporary "next phase" control Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
agomizi1cmandClaude Opus 5.5 committed
1 parent
b2c91062f1
commit
8de55f7ca5
12 files changed
+1648
-167
No files matched your search
+201
-18
@@ -320,7 +320,7 @@ input.invalid { border-color: var(--red); }
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
margin: 8px 0;
|
||||
margin: 30px 0 26px;
|
||||
}
|
||||
.felt {
|
||||
position: absolute;
|
||||
@@ -356,7 +356,7 @@ input.invalid { border-color: var(--red); }
|
||||
padding: 5px 14px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.hand-no { font-size: 11px; color: rgba(0, 0, 0, 0.45); font-weight: 700; margin-top: 2px; }
|
||||
.phase .hand-no { margin-left: 8px; font-size: 11px; opacity: 0.6; letter-spacing: 0; }
|
||||
|
||||
.seat {
|
||||
position: absolute;
|
||||
@@ -386,8 +386,8 @@ input.invalid { border-color: var(--red); }
|
||||
background: rgba(10, 30, 20, 0.88);
|
||||
border-radius: 10px;
|
||||
padding: 4px 8px;
|
||||
min-width: 84px;
|
||||
max-width: 92px;
|
||||
min-width: 80px;
|
||||
max-width: 88px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
@@ -411,11 +411,12 @@ input.invalid { border-color: var(--red); }
|
||||
justify-content: center;
|
||||
border: 2px solid #222;
|
||||
}
|
||||
.chip-marker.dealer { background: #fff; color: #111; top: -4px; right: -8px; }
|
||||
.chip-marker.dealer { background: #fff; color: #111; top: 22px; right: -16px; z-index: 2; }
|
||||
.blind-marker {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -10px;
|
||||
top: 26px;
|
||||
left: -20px;
|
||||
z-index: 2;
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
padding: 2px 5px;
|
||||
@@ -424,34 +425,43 @@ input.invalid { border-color: var(--red); }
|
||||
}
|
||||
.blind-marker.sb { background: #7fd3ff; }
|
||||
.blind-marker.bb { background: var(--gold); }
|
||||
.host-mark { position: absolute; bottom: -2px; right: -6px; font-size: 14px; }
|
||||
.offline-tag { font-size: 10px; color: var(--muted); }
|
||||
|
||||
.spectator-note {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
background: #161c19;
|
||||
padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
|
||||
}
|
||||
.action-bar .inner { max-width: 480px; margin: 0 auto; }
|
||||
.my-stack {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.my-stack .wallet { color: var(--gold); font-size: 22px; }
|
||||
.my-stack .wallet { color: var(--gold); font-size: 18px; }
|
||||
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||||
.actions .btn { background: #555; color: #bbb; font-size: 18px; }
|
||||
.actions.raising { grid-template-columns: 1fr 2fr; }
|
||||
.actions.single { grid-template-columns: 1fr; }
|
||||
.actions .btn { font-size: 16px; padding: 14px 4px; white-space: normal; line-height: 1.15; min-height: 52px; }
|
||||
.act-fold, .act-call, .act-raise { background: #555; color: #bbb; }
|
||||
.act-fold:not(:disabled) { background: #5d646b; color: #fff; }
|
||||
.act-call:not(:disabled) { background: var(--blue); color: #fff; }
|
||||
.act-raise:not(:disabled) { background: var(--orange); color: #fff; }
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
@@ -469,7 +479,7 @@ input.invalid { border-color: var(--red); }
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 160px;
|
||||
bottom: 210px;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
color: #fff;
|
||||
@@ -499,6 +509,179 @@ input.invalid { border-color: var(--red); }
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
/* ---------- カード ---------- */
|
||||
.card {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
width: 28px;
|
||||
height: 40px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
transition: filter 0.2s;
|
||||
}
|
||||
.card b { font-size: 15px; letter-spacing: -0.05em; }
|
||||
.card i { font-style: normal; font-size: 13px; margin-top: 1px; }
|
||||
.suit-s { color: #1a1a1a; }
|
||||
.suit-h { color: #d62839; }
|
||||
.suit-d { color: #1f6fd1; }
|
||||
.suit-c { color: #16884a; }
|
||||
.card.back {
|
||||
background: repeating-linear-gradient(45deg, #c0392b 0 3px, #a93226 3px 6px);
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
.card.slot { background: rgba(0, 0, 0, 0.12); box-shadow: none; border: 1px dashed rgba(255, 255, 255, 0.3); }
|
||||
.card.deal { animation: deal 0.35s ease-out both; }
|
||||
@keyframes deal {
|
||||
from { opacity: 0; transform: translateY(-10px) scale(0.8); }
|
||||
}
|
||||
.card.dim { filter: brightness(0.5); }
|
||||
.card.hl { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(246, 199, 68, 0.8); }
|
||||
|
||||
.board { display: flex; gap: 3px; margin-top: 8px; min-height: 40px; }
|
||||
|
||||
.hole {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
z-index: 1;
|
||||
}
|
||||
.hole .card { width: 25px; height: 35px; border-radius: 4px; }
|
||||
.hole .card b { font-size: 13px; }
|
||||
.hole .card i { font-size: 11px; }
|
||||
.hole .card.back { border-width: 1.5px; }
|
||||
|
||||
/* ---------- 席の状態 ---------- */
|
||||
.seat.folded .avatar, .seat.folded .nameplate { opacity: 0.45; }
|
||||
.seat.away .avatar { opacity: 0.4; }
|
||||
.seat.turn .avatar {
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 0 0 3px rgba(246, 199, 68, 0.35), 0 0 18px rgba(246, 199, 68, 0.7);
|
||||
}
|
||||
.seat.winner .nameplate { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(246, 199, 68, 0.6); }
|
||||
.nameplate .phand {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--gold);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.seat-timer { height: 3px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; margin-top: 3px; overflow: hidden; }
|
||||
.seat-timer i, .turn-progress i { display: block; height: 100%; width: 100%; background: var(--green); transition: width 0.2s linear; }
|
||||
.seat-timer i.low, .turn-progress i.low { background: var(--red); }
|
||||
|
||||
.act-tag {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
padding: 1px 7px;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
z-index: 2;
|
||||
}
|
||||
.tag-fold { background: #555; color: #ccc; }
|
||||
.tag-check { background: #3b7dd8; }
|
||||
.tag-call { background: #2e9e5b; }
|
||||
.tag-bet, .tag-raise { background: #e67e22; }
|
||||
.tag-allin { background: var(--red); }
|
||||
.tag-away { background: #444; color: #bbb; }
|
||||
|
||||
.bet {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: var(--gold);
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px 2px 4px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
z-index: 3;
|
||||
}
|
||||
.bet::before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--gold);
|
||||
border: 2px dashed #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bet.above { bottom: calc(100% + 20px); }
|
||||
.bet.below { top: calc(100% + 4px); }
|
||||
.bet.win { background: var(--gold); color: #111; padding: 2px 8px; }
|
||||
.bet.win::before { display: none; }
|
||||
|
||||
.phase.paused { background: var(--red); }
|
||||
.result {
|
||||
margin-top: 6px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 8px;
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
text-align: center;
|
||||
max-width: 94%;
|
||||
}
|
||||
.result b { color: var(--gold); }
|
||||
.result .rhand { color: #fff; opacity: 0.85; }
|
||||
.pot-tag { font-size: 9px; background: rgba(255, 255, 255, 0.2); padding: 0 4px; border-radius: 4px; margin-right: 4px; }
|
||||
|
||||
/* 7人以上 */
|
||||
.felt-area.crowded { min-height: 470px; }
|
||||
.crowded .seat { width: 80px; }
|
||||
.crowded .avatar { width: 46px; height: 46px; }
|
||||
.crowded .avatar svg { width: 22px; height: 22px; }
|
||||
.crowded .nameplate { min-width: 72px; max-width: 80px; padding: 3px 6px; }
|
||||
.crowded .nameplate .pname { font-size: 11px; }
|
||||
.crowded .nameplate .pstack { font-size: 12px; }
|
||||
.crowded .hole { top: -12px; }
|
||||
.crowded .hole .card { width: 20px; height: 28px; }
|
||||
.crowded .hole .card b { font-size: 11px; }
|
||||
.crowded .hole .card i { font-size: 9px; }
|
||||
.crowded .chip-marker.dealer { top: 14px; }
|
||||
.crowded .blind-marker { top: 18px; }
|
||||
|
||||
/* ---------- 自分の操作エリア ---------- */
|
||||
.turn-progress { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255, 255, 255, 0.08); }
|
||||
.me-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
|
||||
.my-cards { display: flex; gap: 4px; flex: none; }
|
||||
.my-cards .card { width: 42px; height: 58px; border-radius: 6px; }
|
||||
.my-cards .card b { font-size: 22px; }
|
||||
.my-cards .card i { font-size: 19px; }
|
||||
.me-info { flex: 1; min-width: 0; }
|
||||
.me-sub { font-size: 12px; color: var(--muted); display: flex; gap: 8px; margin-top: 3px; white-space: nowrap; }
|
||||
.me-sub .my-hand { color: var(--gold); font-weight: 800; }
|
||||
.me-sub .plus { color: var(--green); }
|
||||
.me-sub .minus { color: var(--red); }
|
||||
.status-line { text-align: center; font-size: 12px; color: var(--muted); margin-bottom: 8px; min-height: 16px; }
|
||||
.status-line.my-turn { color: var(--gold); font-weight: 800; }
|
||||
.raise-panel { margin-bottom: 8px; }
|
||||
.presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
|
||||
.presets .btn { padding: 8px 0; font-size: 13px; }
|
||||
.presets .btn.active { background: var(--orange); color: #111; }
|
||||
.raise-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
|
||||
.raise-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--orange); height: 28px; }
|
||||
.raise-row input[type="number"] { width: 100px; flex: none; font-size: 16px; padding: 8px 10px; }
|
||||
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
/* ---------- ユーティリティ（CSP で style 属性を使わないため） ---------- */
|
||||
|
||||
Reference in new issue
Block a user