agomizi1cm/Poker
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switch to chips-only play: real cards at the table, winners picked on screen

Browse Source 
- Remove the deck, hole cards, board, hand evaluator and reveal logic
  (cards are dealt physically; the site only tracks bets, pots and stacks)
- Showdown now waits for a winner per pot (main/side), chosen by a player
  still in the hand or the host; multiple winners split the pot
- All-in with no further betting goes straight to showdown
- Remove the 30s action clock / auto sit-out (everyone is at the same table)
- UI: winner picker panel (main winner auto-fills side pots), compact table

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
agomizi1cmandClaude Opus 5.5 committed 2026-10-15 17:46:10 +09:00
1 parent 8de55f7ca5
commit b5d84e5f65
11 files changed
+408 -605
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/assets/table.js
+100 -112
View File
@@ -1,4 +1,5 @@
// プレイ画面: サーバから受け取ったテーブル状態を描画し、アクションを送る
// カードは実物で配るので、ここで扱うのはチップのやり取りだけ
(function () {
'use strict';
@@ -8,19 +9,18 @@
const AVATAR_SVG =
'<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4.5"/><path d="M3 21c0-4.4 4-7.5 9-7.5s9 3.1 9 7.5z"/></svg>';
// U+FE0E: iOS で絵文字として描画されないように
const SUIT_SYMBOL = { s: '♠︎', h: '♥︎', d: '♦︎', c: '♣︎' };
const ACTION_LABEL = { FOLD: 'Fold', CHECK: 'Check', CALL: 'Call', BET: 'Bet', RAISE: 'Raise', ALLIN: 'All-in' };
let socket = null;
let state = null;
let clockOffset = 0; // serverNow - clientNow
let pending = false; // アクション送信中（連打防止）
let pending = false; // 送信中（連打防止）
let raising = false;
let raiseValue = 0;
let seenBoard = ''; // 新しくめくられたカードだけアニメーションする
let seenHand = 0;
let wasMyTurn = false;
// ショーダウンの勝者選択（ポットごとの席番号の Set）
let awardKey = '';
let awardSel = [];
// ---------- 名前 ----------
function ensureName() {
@@ -65,7 +65,7 @@
});
}
function emit(event, payload, onDone) {
function emit(event, payload) {
if (!socket) return;
socket.emit(event, payload || null, (res) => {
if (res && !res.ok) {
@@ -73,7 +73,6 @@
toast(res.error === 'NOT_FOUND' ? 'テーブルが見つかりません' : res.error);
if (state) render();
}
if (onDone) onDone(res);
});
}
@@ -92,24 +91,14 @@
if (socket) socket.disconnect();
}
// ---------- カード ----------
function cardHtml(c, extra = '') {
if (typeof c !== 'string' || !/^[2-9TJQKA][shdc]$/.test(c)) return `<span class="card back ${extra}"></span>`;
const rank = c[0] === 'T' ? '10' : c[0];
return `<span class="card suit-${c[1]} ${extra}" data-card="${c}"><b>${rank}</b><i>${SUIT_SYMBOL[c[1]]}</i></span>`;
}
// ショーダウンで勝った5枚
function winningCards(h) {
return h && h.finished && h.showdown && h.results && h.results[0] ? new Set(h.results[0].bestCards) : null;
}
const nameOf = (seat) => (state.seats[seat] ? state.seats[seat].name : '退席者');
// ---------- 描画 ----------
function render() {
const s = state;
const h = s.hand;
const me = s.mySeat >= 0 ? s.seats[s.mySeat] : null;
const myTurn = Boolean(s.me && s.me.options);
const myTurn = Boolean(s.me && (s.me.options || (s.me.canAward && !s.paused)));
$('main').hidden = false;
document.title = `${myTurn ? '▶ ' : ''}${s.name} - Hold'em Night`;
@@ -126,8 +115,8 @@
$('pot').textContent = chips(h ? h.potTotal : 0);
$('phase').textContent = s.paused ? 'PAUSED' : App.PHASE_LABELS[s.phase] || s.phase;
$('phase').parentElement.classList.toggle('paused', s.paused);
$('phase').parentElement.classList.toggle('showdown', s.phase === 'SHOWDOWN' && !s.paused);
$('hand-no').textContent = s.handNumber ? `#${s.handNumber}` : '';
renderBoard(h);
renderResult(s);
// ホスト操作
@@ -152,36 +141,10 @@
if (me) renderActionBar(s, me);
renderTimer();
// 自分の番になったら知らせる
// 自分の番になったら知らせる（タップ前は振動できない）
const tapped = !navigator.userActivation || navigator.userActivation.hasBeenActive;
if (myTurn && !wasMyTurn && navigator.vibrate && tapped) navigator.vibrate(80);
wasMyTurn = myTurn;
if (h) {
seenBoard = `${h.number}:${h.board.length}`;
seenHand = h.number;
}
}
function renderBoard(h) {
const el = $('board');
if (!h) {
el.innerHTML = '';
return;
}
const [seenNo, seenLen] = seenBoard.split(':').map(Number);
const oldLen = seenNo === h.number ? seenLen : 0;
const best = winningCards(h);
let html = '';
for (let i = 0; i < 5; i++) {
const c = h.board[i];
if (!c) {
html += '<span class="card slot"></span>';
continue;
}
const cls = [i >= oldLen ? 'deal' : '', best ? (best.has(c) ? 'hl' : 'dim') : ''].join(' ');
html += cardHtml(c, cls);
}
el.innerHTML = html;
}
function renderResult(s) {
@@ -191,13 +154,11 @@
el.hidden = true;
return;
}
const nameOf = (seat) => (s.seats[seat] ? s.seats[seat].name : '退席者');
el.innerHTML = h.results
.map((r, i) => {
const label = h.results.length > 1 ? `<span class="pot-tag">${i === 0 ? 'メイン' : 'サイド'}</span>` : '';
const who = r.winners.map((w) => esc(nameOf(w))).join('・');
const hand = r.handName ? `<span class="rhand">${esc(r.handName)}</span>` : '';
return `<div>${label}<b>${who}</b> +${chips(r.amount)} ${hand}</div>`;
return `<div>${label}<b>${who}</b> +${chips(r.amount)}</div>`;
})
.join('');
el.hidden = false;
@@ -210,20 +171,21 @@
const startIdx = Math.max(0, occupied.findIndex((p) => p.seat === s.mySeat));
const ordered = occupied.slice(startIdx).concat(occupied.slice(0, startIdx));
const n = ordered.length;
const best = winningCards(h);
const angles = ordered.map((_, i) => Math.PI / 2 + (i * 2 * Math.PI) / Math.max(n, 1));
const showdown = s.phase === 'SHOWDOWN';
const finished = Boolean(h && h.finished);
const container = $('seats');
$('felt-area').classList.toggle('crowded', n >= 7); // 7人以上は小さめに表示
container.innerHTML = ordered
.map((p, idx) => {
const classes = ['seat'];
const isTurn = s.turn && s.turn.seat === p.seat;
if (p.seat === s.mySeat) classes.push('me');
if (!p.connected) classes.push('offline');
if (p.inHand && p.folded) classes.push('folded');
if (isTurn) classes.push('turn');
if (h && h.finished && p.won > 0) classes.push('winner');
if (s.toAct === p.seat) classes.push('turn');
if (showdown && p.inHand && !p.folded) classes.push('contender');
if (finished && p.won > 0) classes.push('winner');
if (p.sittingOut && !p.inHand) classes.push('away');
const markers = h
@@ -234,24 +196,14 @@
].join('')
: '';
// 手札（自分と公開された人は表、それ以外は裏）
let cards = '';
if (p.inHand && (!p.folded || p.cards)) {
const deal = h.number !== seenHand ? 'deal' : '';
const list = p.cards || [null, null];
cards = `<div class="hole">${list
.map((c) => cardHtml(c, [deal, best && c ? (best.has(c) ? 'hl' : 'dim') : ''].join(' ')))
.join('')}</div>`;
}
// ベット（中央寄り）・獲得額
const below = Math.sin(angles[idx]) <= 0.35;
let bet = '';
if (h && h.finished && p.won > 0) bet = `<div class="bet win ${below ? 'below' : 'above'}">+${chips(p.won)}</div>`;
if (finished && p.won > 0) bet = `<div class="bet win ${below ? 'below' : 'above'}">+${chips(p.won)}</div>`;
else if (p.bet > 0) bet = `<div class="bet ${below ? 'below' : 'above'}">${chips(p.bet)}</div>`;
let tag = '';
if (p.last && !(h && h.finished && p.won > 0)) {
if (p.last && !(finished && p.won > 0)) {
tag = `<div class="act-tag tag-${p.last.type.toLowerCase()}">${ACTION_LABEL[p.last.type] || ''}</div>`;
} else if (p.sittingOut && !p.inHand) {
tag = '<div class="act-tag tag-away">離席中</div>';
@@ -259,14 +211,12 @@
return `
<div class="${classes.join(' ')}">
<div class="avatar">${AVATAR_SVG}${markers}${cards}</div>
<div class="avatar">${AVATAR_SVG}${markers}</div>
<div class="nameplate">
${tag}
<div class="pname">${esc(p.name)}</div>
<div class="pstack">${p.allIn && !(h && h.finished) ? 'ALL-IN' : chips(p.stack)}</div>
${p.handName && p.seat !== s.mySeat ? `<div class="phand">${esc(p.handName)}</div>` : ''}
<div class="pstack">${p.allIn && !finished ? 'ALL-IN' : chips(p.stack)}</div>
${p.connected ? '' : '<div class="offline-tag">オフライン</div>'}
${isTurn ? '<div class="seat-timer"><i></i></div>' : ''}
</div>
${bet}
</div>`;
@@ -289,40 +239,38 @@
const net = m.net;
$('my-net').textContent = `収支 ${net > 0 ? '+' : net < 0 ? '−' : '±'}${chips(Math.abs(net))}`;
$('my-net').className = net > 0 ? 'plus' : net < 0 ? 'minus' : '';
$('my-hand').textContent = seat.handName || '';
const myCards = seat.inHand && seat.cards ? seat.cards : null;
const best = winningCards(h);
$('my-cards').innerHTML = myCards
? myCards.map((c) => cardHtml(c, [seat.folded ? 'dim' : '', best && best.has(c) ? 'hl' : ''].join(' '))).join('')
: '<span class="card slot"></span><span class="card slot"></span>';
$('my-bet').textContent = seat.inHand && seat.bet > 0 ? `ベット中 ${chips(seat.bet)}` : '';
$('sit-out').hidden = m.sittingOut;
// 状況
const awaiting = Boolean(h && h.pots && !h.finished);
let status = '';
if (!s.started) status = s.isHost ? '2人以上揃ったら START を押してください' : 'ホストの開始を待っています';
else if (s.paused) status = '一時停止中';
else if (m.sittingOut) status = '離席中です。復帰すると次のハンドから参加します';
else if (m.canRebuy) status = 'チップがなくなりました';
else if (o) status = o.canCheck ? 'あなたの番です' : `あなたの番です（コール ${chips(o.toCall)}）`;
else if (h && !h.finished && s.turn) status = `${(s.seats[s.turn.seat] || {}).name || ''} の番です`;
else if (awaiting) status = m.canAward ? 'カードを見せ合って、勝った人を選んでください' : '勝者の選択を待っています';
else if (h && !h.finished && s.toAct != null) status = `${nameOf(s.toAct)} の番です`;
else if (h && !h.finished && !seat.inHand) status = '次のハンドから参加します';
else if (h && !h.finished && !s.turn) status = 'オールイン — 残りのカードをめくります';
else if (h && h.finished) status = '次のハンドを準備中…';
else if (!h) status = '参加者を待っています（2人以上で再開）';
$('status-line').textContent = status;
$('status-line').classList.toggle('my-turn', Boolean(o));
$('status-line').classList.toggle('my-turn', Boolean(o) || (awaiting && m.canAward));
// ショーダウンの勝者選択
const awarding = awaiting && m.canAward && !s.paused;
$('award-panel').hidden = !awarding;
if (awarding) renderAwardPanel(h.pots);
// ボタン
const alt = m.sittingOut || m.canRebuy;
const alt = (m.sittingOut || m.canRebuy) && !awarding;
if (!o) raising = false;
$('alt-actions').hidden = !alt;
$('sit-in').hidden = !m.sittingOut;
$('rebuy').hidden = !m.canRebuy;
$('rebuy').textContent = `リバイ（${chips(s.startingStack)}）`;
if (!o) raising = false;
$('actions').hidden = alt || raising;
$('actions').hidden = alt || raising || awarding;
$('raise-actions').hidden = alt || !raising;
$('raise-panel').hidden = alt || !raising;
$('status-line').hidden = raising;
@@ -347,6 +295,63 @@
if (raising) renderRaisePanel(o);
}
// ---------- 勝者選択 ----------
function renderAwardPanel(pots) {
const key = `${state.handNumber}:${JSON.stringify(pots)}`;
if (key !== awardKey) {
awardKey = key;
// 参加者が1人だけのポットは最初から選んでおく
awardSel = pots.map((p) => new Set(p.eligible.length === 1 ? p.eligible : []));
}
$('award-pots').innerHTML = pots
.map((p, i) => {
const title = pots.length === 1 ? 'ポット' : i === 0 ? 'メインポット' : `サイドポット${pots.length > 2 ? i : ''}`;
const names = p.eligible
.map(
(seat) =>
`<button type="button" class="btn btn-sm pick${awardSel[i].has(seat) ? ' on' : ''}" data-pot="${i}" data-seat="${seat}">${esc(nameOf(seat))}</button>`
)
.join('');
return `<div class="award-pot"><div class="award-title">${title} <b>${chips(p.amount)}</b></div><div class="picks">${names}</div></div>`;
})
.join('');
const ready = awardSel.every((set) => set.size > 0);
const split = awardSel.some((set) => set.size > 1);
$('award-confirm').disabled = !ready || pending;
$('award-confirm').textContent = split ? '山分けで確定' : '確定';
}
$('award-pots').addEventListener('click', (e) => {
const b = e.target.closest('[data-pot]');
if (!b || !state || !state.hand || !state.hand.pots) return;
const i = Number(b.dataset.pot);
const seat = Number(b.dataset.seat);
const set = awardSel[i];
if (set.has(seat)) set.delete(seat);
else {
set.add(seat);
// メインで勝った人は、まだ決めていないサイドポットでも勝っているはず
state.hand.pots.forEach((p, j) => {
if (j > i && awardSel[j].size === 0 && p.eligible.includes(seat)) awardSel[j].add(seat);
});
}
renderAwardPanel(state.hand.pots);
});
$('award-confirm').addEventListener('click', () => {
if (pending || !awardSel.every((set) => set.size > 0)) return;
const winners = awardSel.map((set) => [...set]);
const names = winners.map((w) => w.map(nameOf).join('・'));
const msg =
names.length === 1
? `${names[0]} の勝ちで確定しますか？`
: names.map((n, i) => `${i === 0 ? 'メイン' : 'サイド'}: ${n}`).join('\n') + '\nで確定しますか？';
if (!confirm(msg)) return;
pending = true;
emit('table:award', { winners });
render();
});
// ---------- レイズ ----------
function presetValue(o, kind) {
const h = state.hand;
@@ -427,7 +432,7 @@
$('raise-range').addEventListener('input', (e) => {
const o = options();
if (!o) return;
// BB 単位に丸める（最大はオールイン額そのまま）
// SB 単位に丸める（最大はオールイン額そのまま）
const unit = Math.max(1, state.smallBlind);
let v = Number(e.target.value);
if (v < o.maxRaiseTo) v = o.minRaiseTo + Math.round((v - o.minRaiseTo) / unit) * unit;
@@ -447,48 +452,31 @@
if (o) $('raise-amount').value = clampRaise(o, raiseValue);
});
// ---------- タイマー ----------
// ---------- ブラインドタイマー ----------
function renderTimer() {
if (!state) return;
const el = $('timer');
const t = state.timer;
const now = Date.now() + clockOffset;
el.classList.toggle('paused', state.paused);
if (!t.enabled) {
el.textContent = state.paused ? '⏸' : '';
} else {
const remaining = t.running ? t.endsAt - now : t.remainingMs;
const sec = Math.max(0, Math.ceil(remaining / 1000));
const time = `${Math.floor(sec / 60)}:${String(sec % 60).padStart(2, '0')}`;
el.textContent = state.paused ? `⏸ ${time}` : time;
el.classList.toggle('warn', t.running && sec <= 60);
}
// 手番の残り時間
const turn = state.turn;
const ratio = turn ? Math.max(0, Math.min(1, (turn.endsAt != null ? turn.endsAt - now : turn.remainingMs) / turn.totalMs)) : 0;
const width = `${(ratio * 100).toFixed(1)}%`;
const bar = document.querySelector('.seat.turn .seat-timer i');
if (bar) {
bar.style.width = width;
bar.classList.toggle('low', ratio < 0.3);
}
const mine = Boolean(turn && turn.seat === state.mySeat);
$('turn-progress').hidden = !mine;
if (mine) {
$('turn-bar').style.width = width;
$('turn-bar').classList.toggle('low', ratio < 0.3);
return;
}
const remaining = t.running ? t.endsAt - (Date.now() + clockOffset) : t.remainingMs;
const sec = Math.max(0, Math.ceil(remaining / 1000));
const time = `${Math.floor(sec / 60)}:${String(sec % 60).padStart(2, '0')}`;
el.textContent = state.paused ? `⏸ ${time}` : time;
el.classList.toggle('warn', t.running && sec <= 60);
}
setInterval(renderTimer, 200);
setInterval(renderTimer, 250);
// ---------- その他の操作 ----------
$('start').addEventListener('click', () => emit('table:start'));
$('pause').addEventListener('click', () => emit('table:pause'));
$('sit-out').addEventListener('click', () => emit('table:sitOut'));
$('take-seat').addEventListener('click', () => join(true));
$('sit-in').addEventListener('click', () => emit('table:sitIn'));
$('rebuy').addEventListener('click', () => emit('table:rebuy'));
$('take-seat').addEventListener('click', () => join(true));
$('leave').addEventListener('click', () => {
const me = state && state.mySeat >= 0 ? state.seats[state.mySeat] : null;