野口煌陽andClaude Opus 5.5
f64c502086
Previously only the review CPU table paused after each hand; cash-only, friends and CPU tables moved on automatically after a short delay. Now every table keeps the result on screen until the host presses 次のハンドへ, and the next hand is dealt right away. If the host has left, the new host presses it; with no human seated the table still advances on its own. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1491 lines
62 KiB
JavaScript
1491 lines
62 KiB
JavaScript
// プレイ画面: サーバから受け取ったテーブル状態を描画し、アクションを送る
|
||
// カード機能がオフのテーブルではカードは実物で配るので、ここで扱うのはチップのやり取りだけ
|
||
// 席・場札・手札の要素は使い回し、変わった所だけ書き換える（配る・めくるなどの動きを途中で作り直さない）
|
||
(function () {
|
||
'use strict';
|
||
|
||
const { Store, esc, chips, toast } = App;
|
||
const $ = (id) => document.getElementById(id);
|
||
const tableId = decodeURIComponent(location.pathname.split('/').pop());
|
||
|
||
const BOT_SVG =
|
||
'<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="11" y="1.5" width="2" height="3.5" rx="1"/><circle cx="12" cy="1.8" r="1.6"/><path d="M5 7.5A2.5 2.5 0 0 1 7.5 5h9A2.5 2.5 0 0 1 19 7.5v7a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 5 14.5zM9 9.2a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2zm6 0a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2zM2 9.5h2v4H2zm18 0h2v4h-2zM7 18.5h10a3 3 0 0 1 3 3V23H4v-1.5a3 3 0 0 1 3-3z"/></svg>';
|
||
const CHECK_SVG = '<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></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 raising = false;
|
||
let raiseValue = 0;
|
||
let wasMyTurn = false;
|
||
let seenHand = 0; // 新しいハンドの手札だけ配る動きを付ける
|
||
// ショーダウンの勝者選択（ポットごとの席番号の Set）
|
||
let awardKey = '';
|
||
let awardSel = [];
|
||
let seenReview = 0; // 自動で開いたレビューのハンド番号（レビュー付きCPU戦）
|
||
let reviewKey = '';
|
||
|
||
const reviewSheet = Fluid.Sheet($('review-modal'));
|
||
const rankingSheet = Fluid.Sheet($('ranking-modal'));
|
||
const seatingPopup = Fluid.Popup($('seating-modal'));
|
||
const nameSheet = Fluid.Sheet($('name-modal'), { dismissible: false, focus: '#name-input' });
|
||
// 払って閉じた・背景を押した・Esc のときも「戻る」と同じ
|
||
const betSheet = Fluid.Sheet($('bet-modal'), {
|
||
focus: '#raise-range',
|
||
onClose: () => {
|
||
if (!raising) return;
|
||
raising = false;
|
||
render();
|
||
},
|
||
});
|
||
|
||
// ---------- 名前 ----------
|
||
function ensureName() {
|
||
if (Store.name) return connect();
|
||
nameSheet.open();
|
||
}
|
||
$('name-form').addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const name = $('name-input').value.trim();
|
||
if (!name) {
|
||
$('name-input').classList.add('invalid');
|
||
Fluid.shake($('name-input'));
|
||
return;
|
||
}
|
||
Store.name = name;
|
||
nameSheet.close();
|
||
connect();
|
||
});
|
||
|
||
// ---------- 通信 ----------
|
||
function connect() {
|
||
socket = App.connectSocket();
|
||
socket.on('connect', () => {
|
||
$('conn-lost').hidden = true;
|
||
join();
|
||
});
|
||
socket.on('disconnect', () => { $('conn-lost').hidden = false; });
|
||
socket.on('connect_error', () => { $('conn-lost').hidden = false; });
|
||
socket.on('table:closed', (p) => showNotFound(true, p && p.reason));
|
||
socket.on('table:state', (s) => {
|
||
state = s;
|
||
pending = false;
|
||
clockOffset = s.serverNow - Date.now();
|
||
render();
|
||
});
|
||
}
|
||
|
||
function join(manual) {
|
||
socket.emit('table:join', { tableId, token: Store.token, name: Store.name }, (res) => {
|
||
if (res && res.ok) {
|
||
if (res.seat < 0 && manual) toast('空いている席がありません');
|
||
return;
|
||
}
|
||
if (res && res.error === 'NOT_FOUND') return showNotFound();
|
||
toast('参加できませんでした: ' + ((res && res.error) || '不明なエラー'));
|
||
});
|
||
}
|
||
|
||
function emit(event, payload) {
|
||
if (!socket) return;
|
||
socket.emit(event, payload || null, (res) => {
|
||
if (res && !res.ok) {
|
||
pending = false;
|
||
toast(res.error === 'NOT_FOUND' ? 'テーブルが見つかりません' : res.error);
|
||
if (state) render();
|
||
}
|
||
});
|
||
}
|
||
|
||
function sendAction(type, amount) {
|
||
if (pending) return;
|
||
pending = true;
|
||
raising = false;
|
||
emit('table:action', { type, amount });
|
||
render();
|
||
}
|
||
|
||
// closed: プレイヤーが全員退席してテーブルが閉じられた
|
||
function showNotFound(closed, reason) {
|
||
if (closed) {
|
||
$('not-found-title').textContent = 'テーブルが終了しました';
|
||
$('not-found-text').textContent =
|
||
reason === 'deleted' ? '管理者がテーブルを削除しました。' : 'プレイヤーが全員退席したため、テーブルを閉じました。';
|
||
}
|
||
$('main').hidden = true;
|
||
$('action-bar').hidden = true;
|
||
reviewSheet.close();
|
||
rankingSheet.close();
|
||
seatingPopup.close();
|
||
raising = false;
|
||
betSheet.close();
|
||
$('not-found').hidden = false;
|
||
// 自分から切断するので「接続が切れました」は出さない
|
||
if (socket) {
|
||
socket.off('disconnect');
|
||
socket.off('connect_error');
|
||
socket.disconnect();
|
||
}
|
||
$('conn-lost').hidden = true;
|
||
}
|
||
|
||
const nameOf = (seat) => (state.seats[seat] ? state.seats[seat].name : '退席者');
|
||
|
||
// 中身が変わったときだけ書き換える（書き換えたら true）。key を変えると同じ中身でも書き換える
|
||
function patch(el, html, key = html) {
|
||
if (el.patchKey === key) return false;
|
||
el.patchKey = key;
|
||
el.innerHTML = html;
|
||
return true;
|
||
}
|
||
|
||
// ---------- カード（カード機能ありのテーブルのみ） ----------
|
||
function cardHtml(c, extra = '') {
|
||
if (typeof c !== 'string' || !/^[2-9TJQKA][shdc]$/.test(c)) return `<span class="pcard back ${extra}"></span>`;
|
||
const rank = c[0] === 'T' ? '10' : c[0];
|
||
return `<span class="pcard suit-${c[1]} ${extra}"><b>${rank}</b><i>${SUIT_SYMBOL[c[1]]}</i></span>`;
|
||
}
|
||
|
||
function cardNode(c) {
|
||
const t = document.createElement('template');
|
||
t.innerHTML = c ? cardHtml(c) : '<span class="pcard slot"></span>';
|
||
return t.content.firstElementChild;
|
||
}
|
||
|
||
// 入れたばかりのカードに動きを付ける。delay(i): i 枚目を何ms遅らせるか（1枚ずつ配る・めくる）
|
||
function animateCards(container, cls, delay) {
|
||
[...container.children].forEach((card, i) => {
|
||
if (card.classList.contains('slot')) return;
|
||
card.classList.add(cls);
|
||
card.style.animationDelay = `${Math.round(delay(i))}ms`;
|
||
});
|
||
}
|
||
|
||
// 勝った5枚を強調し、それ以外を暗くする（カードは作り直さず印だけ付け替える）
|
||
function markCards(container, list, markOf) {
|
||
[...container.children].forEach((node, i) => {
|
||
const m = list[i] ? markOf(list[i]) : '';
|
||
node.classList.toggle('hl', m === 'hl');
|
||
node.classList.toggle('dim', m === 'dim');
|
||
});
|
||
}
|
||
|
||
// ショーダウンで勝った5枚（メインポット）
|
||
function winningCards(h) {
|
||
return h && h.finished && h.showdown && h.results && h.results[0] && h.results[0].bestCards
|
||
? new Set(h.results[0].bestCards)
|
||
: null;
|
||
}
|
||
|
||
// 場札: 5つの枠を使い回し、新しく出たカードだけめくる（フロップは少しずつずらして）
|
||
function renderBoard(s) {
|
||
const el = $('board');
|
||
const h = s.hand;
|
||
el.hidden = !s.cardsEnabled;
|
||
if (!s.cardsEnabled) return;
|
||
if (!el.slots) {
|
||
el.innerHTML = '<span class="pcard slot"></span>'.repeat(5);
|
||
el.slots = ['', '', '', '', ''];
|
||
}
|
||
const best = winningCards(h);
|
||
let fresh = 0;
|
||
for (let i = 0; i < 5; i++) {
|
||
const c = (h && h.board[i]) || '';
|
||
if (el.slots[i] !== c) {
|
||
el.slots[i] = c;
|
||
const next = cardNode(c);
|
||
if (c) {
|
||
next.classList.add('flip-in');
|
||
next.style.animationDelay = `${fresh++ * 90}ms`;
|
||
}
|
||
el.children[i].replaceWith(next);
|
||
}
|
||
const node = el.children[i];
|
||
const mark = c && best ? (best.has(c) ? 'hl' : 'dim') : '';
|
||
node.classList.toggle('hl', mark === 'hl');
|
||
node.classList.toggle('dim', mark === 'dim');
|
||
}
|
||
}
|
||
|
||
// ---------- 描画 ----------
|
||
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 || (s.me.canAward && !s.paused)));
|
||
|
||
$('main').hidden = false;
|
||
document.title = `${myTurn ? '▶ ' : ''}${s.name} - Hold'em Night`;
|
||
$('table-name').textContent = s.name;
|
||
|
||
$('level').textContent = `Lv.${s.level}`;
|
||
$('blinds').textContent = `SB ${chips(s.smallBlind)} / BB ${chips(s.bigBlind)}`;
|
||
$('next-blinds').textContent = s.timer.enabled
|
||
? `次 ${chips(s.nextBlinds.smallBlind)} / ${chips(s.nextBlinds.bigBlind)}（${s.timer.intervalMin}分毎）`
|
||
: 'ブラインドタイマーなし';
|
||
$('stack-info').textContent = `開始スタック ${chips(s.startingStack)}`;
|
||
|
||
// 中央
|
||
Fluid.countTo($('pot'), h ? h.potTotal : 0, chips);
|
||
$('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(s);
|
||
renderResult(s);
|
||
|
||
// ホスト操作
|
||
$('host-controls').hidden = !s.isHost;
|
||
const eligible = s.seats.filter((p) => p && !p.sittingOut && p.stack > 0).length;
|
||
$('start').hidden = s.started;
|
||
$('start').disabled = eligible < 2;
|
||
$('start').title = eligible < 2 ? '2人以上で開始できます' : '';
|
||
$('pause').hidden = !s.started;
|
||
$('pause').title = s.paused ? '再開' : '一時停止';
|
||
$('pause').setAttribute('aria-label', $('pause').title);
|
||
$('pause').classList.toggle('paused', s.paused);
|
||
const seated = s.seats.filter(Boolean).length;
|
||
$('seating-open').disabled = seated < 3; // 2人までは並びが1通り
|
||
$('seating-open').title = seated < 3 ? '3人以上で席順を変えられます' : '席順を変更';
|
||
$('seating-dot').hidden = !s.pendingSeating;
|
||
|
||
// 自分
|
||
$('action-bar').hidden = !me;
|
||
$('spectator-note').hidden = Boolean(me);
|
||
const hasFreeSeat = s.seats.some((p) => !p);
|
||
$('take-seat').hidden = Boolean(me) || !hasFreeSeat;
|
||
$('spectator-text').textContent = hasFreeSeat ? '観戦中です' : '満席のため観戦中です';
|
||
$('leave').title = me ? '退席する' : 'ロビーへ戻る';
|
||
$('leave').setAttribute('aria-label', $('leave').title);
|
||
$('leave').classList.toggle('spectator', !me);
|
||
|
||
renderSeats(s);
|
||
if (me) renderActionBar(s, me);
|
||
else betSheet.close();
|
||
renderReview(s);
|
||
if (rankingSheet.isOpen) renderRanking(s);
|
||
if (seatingPopup.isOpen) syncSeating(s);
|
||
renderTimer();
|
||
|
||
// 自分の番になったら知らせる
|
||
if (myTurn && !wasMyTurn) Fluid.haptic(80);
|
||
wasMyTurn = myTurn;
|
||
if (h) seenHand = h.number;
|
||
}
|
||
|
||
function renderResult(s) {
|
||
const el = $('result');
|
||
const h = s.hand;
|
||
if (!h || !h.finished || !h.results) {
|
||
el.hidden = true;
|
||
return;
|
||
}
|
||
patch(
|
||
el,
|
||
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>`;
|
||
})
|
||
.join('')
|
||
);
|
||
el.hidden = false;
|
||
}
|
||
|
||
// ---------- 席 ----------
|
||
const seatEls = new Map(); // 席番号 → 要素
|
||
|
||
function seatEl(no) {
|
||
let el = seatEls.get(no);
|
||
if (el) return el;
|
||
el = document.createElement('div');
|
||
el.className = 'seat entering';
|
||
el.innerHTML =
|
||
'<div class="avatar"><span class="face"></span><span class="markers"></span><span class="hole"></span></div>' +
|
||
'<div class="nameplate"><span class="tag-slot"></span><span class="pname"></span><span class="pstack"></span><span class="pnote"></span></div>' +
|
||
'<span class="bet-slot"></span>';
|
||
const q = (sel) => el.querySelector(sel);
|
||
el.parts = {
|
||
avatar: q('.avatar'),
|
||
face: q('.face'),
|
||
markers: q('.markers'),
|
||
hole: q('.hole'),
|
||
tag: q('.tag-slot'),
|
||
name: q('.pname'),
|
||
stack: q('.pstack'),
|
||
note: q('.pnote'),
|
||
bet: q('.bet-slot'),
|
||
};
|
||
el.addEventListener('animationend', (e) => {
|
||
if (e.target === el) el.classList.remove('entering');
|
||
});
|
||
seatEls.set(no, el);
|
||
$('seats').append(el);
|
||
return el;
|
||
}
|
||
|
||
// 名前の頭文字と、名前から決まる色（同じ名前なら毎回同じ色）
|
||
const initialOf = (name) => [...String(name).trim()][0] || '?';
|
||
function hueOf(name) {
|
||
let h = 0;
|
||
for (const ch of String(name)) h = (h * 31 + ch.codePointAt(0)) % 360;
|
||
return h;
|
||
}
|
||
|
||
// 着席者を楕円上に配置。自分が一番下、そこから時計回り。
|
||
function renderSeats(s) {
|
||
const h = s.hand;
|
||
const occupied = s.seats.filter(Boolean);
|
||
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 showdown = s.phase === 'SHOWDOWN';
|
||
const finished = Boolean(h && h.finished);
|
||
const best = winningCards(h);
|
||
const newHand = Boolean(h && h.number !== seenHand);
|
||
const area = $('felt-area');
|
||
area.classList.toggle('crowded', n >= 7); // 7人以上は小さめに表示
|
||
area.classList.toggle('with-cards', s.cardsEnabled);
|
||
const live = new Set();
|
||
|
||
ordered.forEach((p, idx) => {
|
||
live.add(p.seat);
|
||
const el = seatEl(p.seat);
|
||
const q = el.parts;
|
||
const angle = Math.PI / 2 + (idx * 2 * Math.PI) / Math.max(n, 1);
|
||
const left = 50 + 38 * Math.cos(angle);
|
||
const top = 50 + 41 * Math.sin(angle);
|
||
// 位置は CSSOM で設定（CSP で style 属性を禁止しているため）
|
||
el.style.left = `${left.toFixed(2)}%`;
|
||
el.style.top = `${top.toFixed(2)}%`;
|
||
// 配るカードはテーブルの中央（山札）から飛んでくる
|
||
el.style.setProperty('--deal-x', `${(((50 - left) / 100) * area.clientWidth).toFixed(1)}px`);
|
||
el.style.setProperty('--deal-y', `${(((50 - top) / 100) * area.clientHeight).toFixed(1)}px`);
|
||
|
||
const set = (cls, on) => el.classList.toggle(cls, Boolean(on));
|
||
set('me', p.seat === s.mySeat);
|
||
set('bot', p.bot);
|
||
set('offline', !p.connected);
|
||
set('folded', p.inHand && p.folded);
|
||
set('turn', s.toAct === p.seat);
|
||
set('contender', showdown && p.inHand && !p.folded);
|
||
set('winner', finished && p.won > 0);
|
||
set('away', p.sittingOut && !p.inHand);
|
||
|
||
patch(q.face, p.bot ? BOT_SVG : `<span class="mono">${esc(initialOf(p.name))}</span>`);
|
||
q.avatar.style.setProperty('--hue', hueOf(p.name));
|
||
|
||
patch(
|
||
q.markers,
|
||
h
|
||
? [
|
||
p.seat === h.button ? '<span class="chip-marker dealer" title="ディーラーボタン">D</span>' : '',
|
||
p.seat === h.sbSeat ? '<span class="blind-marker sb">SB</span>' : '',
|
||
p.seat === h.bbSeat ? '<span class="blind-marker bb">BB</span>' : '',
|
||
].join('')
|
||
: ''
|
||
);
|
||
|
||
// 手札（自分と公開された人は表、それ以外は裏）
|
||
const list = s.cardsEnabled && h && p.inHand && (!p.folded || p.cards) ? p.cards || [null, null] : [];
|
||
const hadBacks = Boolean(q.hole.querySelector('.back'));
|
||
if (patch(q.hole, list.map((c) => cardHtml(c)).join(''), `${h ? h.number : 0}|${list.join()}`) && list.length) {
|
||
// 新しいハンドは中央から1人1枚ずつ2周配り、ショーダウンで公開された手札はめくる
|
||
if (newHand) animateCards(q.hole, 'deal', (i) => (i * n + idx) * 55);
|
||
else if (hadBacks && !q.hole.querySelector('.back')) animateCards(q.hole, 'flip-in', (i) => i * 90);
|
||
}
|
||
markCards(q.hole, list, (c) => (best ? (best.has(c) ? 'hl' : 'dim') : p.folded ? 'dim' : ''));
|
||
|
||
let tag = '';
|
||
if (p.last && !(finished && p.won > 0)) {
|
||
tag = `<span class="act-tag tag-${p.last.type.toLowerCase()}">${ACTION_LABEL[p.last.type] || ''}</span>`;
|
||
} else if (p.sittingOut && !p.inHand) {
|
||
tag = '<span class="act-tag tag-away">離席中</span>';
|
||
}
|
||
patch(q.tag, tag);
|
||
|
||
q.name.textContent = p.name;
|
||
q.stack.textContent = p.allIn && !finished ? 'ALL-IN' : chips(p.stack);
|
||
q.note.textContent = !p.connected ? 'オフライン' : p.handName && p.seat !== s.mySeat ? p.handName : '';
|
||
q.note.classList.toggle('offline', !p.connected);
|
||
|
||
// ベット（中央寄り）・獲得額
|
||
const side = Math.sin(angle) <= 0.35 ? 'below' : 'above';
|
||
let bet = '';
|
||
if (finished && p.won > 0) bet = `<span class="bet win ${side}">+${chips(p.won)}</span>`;
|
||
else if (p.bet > 0) bet = `<span class="bet ${side}">${chips(p.bet)}</span>`;
|
||
patch(q.bet, bet);
|
||
});
|
||
|
||
for (const [no, el] of seatEls) {
|
||
if (live.has(no)) continue;
|
||
el.remove();
|
||
seatEls.delete(no);
|
||
}
|
||
}
|
||
|
||
// ---------- 自分の操作エリア ----------
|
||
function renderActionBar(s, seat) {
|
||
const m = s.me;
|
||
const h = s.hand;
|
||
const o = m.options;
|
||
|
||
Fluid.countTo($('my-stack'), m.stack, chips);
|
||
// 収支は設定で消せる（この端末だけ）
|
||
const net = Store.showNet ? m.net : null;
|
||
$('my-net').textContent = net == null ? '' : `収支 ${net > 0 ? '+' : net < 0 ? '−' : '±'}${chips(Math.abs(net))}`;
|
||
$('my-net').className = net > 0 ? 'plus' : net < 0 ? 'minus' : '';
|
||
$('my-bet').textContent = seat.inHand && seat.bet > 0 ? `ベット中 ${chips(seat.bet)}` : '';
|
||
$('my-hand').textContent = (seat.inHand && seat.handName) || '';
|
||
|
||
$('my-cards').hidden = !s.cardsEnabled;
|
||
if (s.cardsEnabled) {
|
||
const el = $('my-cards');
|
||
const myCards = seat.inHand && seat.cards ? seat.cards : [];
|
||
const base = myCards.length
|
||
? myCards.map((c) => cardHtml(c)).join('')
|
||
: '<span class="pcard slot"></span><span class="pcard slot"></span>';
|
||
if (patch(el, base, `${h ? h.number : 0}|${myCards.join()}`) && myCards.length) {
|
||
animateCards(el, 'deal', (i) => 120 + i * 140);
|
||
}
|
||
const best = winningCards(h);
|
||
markCards(el, myCards, (c) => (best && best.has(c) ? 'hl' : seat.folded ? 'dim' : ''));
|
||
}
|
||
$('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 (s.awaitingNext && s.isHost) {
|
||
status = s.review ? 'レビューを確認したら「次のハンドへ」を押してください' : '「次のハンドへ」を押すと次のハンドを始めます';
|
||
}
|
||
else if (m.sittingOut) status = '離席中です。復帰すると次のハンドから参加します';
|
||
else if (m.canRebuy) status = 'チップがなくなりました';
|
||
else if (s.awaitingNext) status = 'ホストが次のハンドを始めるのを待っています';
|
||
else if (o) status = o.canCheck ? 'あなたの番です' : `あなたの番です（コール ${chips(o.toCall)}）`;
|
||
else if (awaiting) status = m.canAward ? 'カードを見せ合って、勝った人を選んでください' : 'ホストが勝者を選んでいます';
|
||
else if (h && !h.finished && s.toAct != null) {
|
||
const actor = s.seats[s.toAct];
|
||
status = actor && actor.bot ? `${actor.name}（CPU）が考えています…` : `${nameOf(s.toAct)} の番です`;
|
||
}
|
||
else if (h && !h.finished && h.runout) status = 'オールイン — 残りのカードをめくります';
|
||
else if (h && !h.finished && !seat.inHand) status = '次のハンドから参加します';
|
||
else if (h && h.finished) status = '次のハンドを準備中…';
|
||
else if (!h) status = '参加者を待っています（2人以上で再開）';
|
||
const myMove = Boolean(o) || (awaiting && m.canAward);
|
||
$('status-line').textContent = status;
|
||
$('status-line').classList.toggle('my-turn', myMove);
|
||
$('action-bar').classList.toggle('my-turn', myMove && !s.paused);
|
||
|
||
// ショーダウンの勝者選択
|
||
const awarding = awaiting && m.canAward && !s.paused;
|
||
$('award-panel').hidden = !awarding;
|
||
if (awarding) renderAwardPanel(h.pots);
|
||
|
||
// ボタン
|
||
// ハンドが終わったら、ホストが「次のハンドへ」を押すまで待つ（レビュー付きCPU戦はレビューも開ける）
|
||
const nexting = Boolean(s.awaitingNext && s.isHost && !s.paused);
|
||
const alt = (m.sittingOut || m.canRebuy) && !awarding;
|
||
if (!o) raising = false;
|
||
$('next-actions').hidden = !nexting;
|
||
$('next-actions').classList.toggle('raising', Boolean(s.review));
|
||
$('next-actions').classList.toggle('single', !s.review);
|
||
$('review-show').hidden = !s.review;
|
||
$('alt-actions').hidden = !alt;
|
||
$('sit-in').hidden = !m.sittingOut;
|
||
$('rebuy').hidden = !m.canRebuy;
|
||
$('rebuy').textContent = `リバイ（${chips(s.startingStack)}）`;
|
||
$('actions').hidden = alt || awarding || nexting;
|
||
if (raising && o && !alt) {
|
||
renderRaisePanel(o);
|
||
betSheet.open();
|
||
} else {
|
||
raising = false;
|
||
betSheet.close();
|
||
}
|
||
|
||
const fold = $('act-fold');
|
||
const call = $('act-call');
|
||
const raise = $('act-raise');
|
||
fold.disabled = call.disabled = raise.disabled = !o || pending;
|
||
if (!o) {
|
||
call.textContent = 'Check';
|
||
raise.textContent = 'Raise';
|
||
return;
|
||
}
|
||
call.textContent = o.canCheck ? 'Check' : o.toCall >= m.stack ? `All-in ${chips(o.toCall)}` : `Call ${chips(o.toCall)}`;
|
||
raise.disabled = pending || !o.canRaise;
|
||
raise.textContent = !o.canRaise
|
||
? o.isBet ? 'Bet' : 'Raise'
|
||
: o.minRaiseTo >= o.maxRaiseTo
|
||
? `All-in ${chips(o.maxRaiseTo)}`
|
||
: o.isBet ? 'Bet' : 'Raise';
|
||
}
|
||
|
||
// ---------- レビュー（レビュー付きCPU戦の作成者のみ） ----------
|
||
const STREETS = ['PREFLOP', 'FLOP', 'TURN', 'RIVER'];
|
||
const STREET_LABEL = { PREFLOP: 'プリフロップ', FLOP: 'フロップ', TURN: 'ターン', RIVER: 'リバー' };
|
||
const STREET_SHORT = { PREFLOP: 'PF', FLOP: 'Flop', TURN: 'Turn', RIVER: 'River' };
|
||
const KIND_LABEL = { fold: 'フォールド', check: 'チェック', call: 'コール', raise: 'レイズ' };
|
||
const MARK_CLASS = { '◎': 'great', '○': 'good', '△': 'warn', '✕': 'bad' };
|
||
const optionLabel = (o) => (o.kind === 'raise' ? `ベット/レイズ ${chips(o.to)}` : KIND_LABEL[o.kind]);
|
||
const signed = (n) => (n > 0 ? '+' : n < 0 ? '−' : '±') + chips(Math.abs(n));
|
||
const markHtml = (m) => `<span class="rv-mark ${MARK_CLASS[m] || ''}">${m}</span>`;
|
||
|
||
function reviewHtml(r) {
|
||
const l = r.last;
|
||
const h = l.hero;
|
||
const pre = l.preflop.length
|
||
? `<div class="rv-items">${l.preflop
|
||
.map(
|
||
(j) => `
|
||
<div class="rv-item">${markHtml(j.mark)}<div>
|
||
<div>${esc(j.situation)}</div>
|
||
<div class="rv-sub">推奨 <b>${KIND_LABEL[j.recommended]}</b> ／ あなた <b>${KIND_LABEL[j.actual]}</b> — ${esc(j.label)}</div>
|
||
${j.equity != null ? `<div class="rv-sub">推定勝率 ${j.equity}%（コールに必要 ${j.need}%）</div>` : ''}
|
||
</div></div>`
|
||
)
|
||
.join('')}</div>`
|
||
: '<div class="rv-sub">プリフロップで判断する場面はありませんでした</div>';
|
||
const post = l.decisions
|
||
.map(
|
||
(d) => `
|
||
<div class="rv-item">${markHtml(d.mark)}<div>
|
||
<div><b>${STREET_LABEL[d.street]}</b> ${optionLabel(d.actual)} <span class="rv-score">${d.score}点</span></div>
|
||
<div class="rv-sub">推定勝率 ${d.equity}%${d.need != null ? `（コールに必要 ${d.need}%）` : ''}${
|
||
d.lossBB > 0 ? ` ・ 最善は ${optionLabel(d.best)}（${d.lossBB}BB 損）` : ' ・ 最善の選択'
|
||
}</div>
|
||
</div></div>`
|
||
)
|
||
.join('');
|
||
const scores = STREETS.map((st) => {
|
||
const v = l.streetScores[st];
|
||
return `<div class="rv-street"><span>${STREET_SHORT[st]}</span><b>${v == null ? '—' : v}</b></div>`;
|
||
}).join('');
|
||
const a = h.allIn;
|
||
const allIn = a
|
||
? `<div class="rv-section">オールイン</div>
|
||
<div class="rv-sub">${STREET_LABEL[a.street]}でオールインした時点の勝率 <b>${a.equity}%</b> → 期待値 ${chips(a.ev)} ／ 実際 ${chips(a.won)}（運 ${signed(a.won - a.ev)}）</div>`
|
||
: '';
|
||
return `
|
||
<div class="rv-head">
|
||
<div class="rv-cards">${h.cards.map((c) => cardHtml(c)).join('')}</div>
|
||
<div>
|
||
<div class="rv-hand"><b>${esc(h.key)}</b> <span class="rv-color cat-${esc(h.color)}">${esc(h.colorName)}</span></div>
|
||
<div class="rv-sub">${esc(h.colorLabel)} ・ ${esc(h.position)} ・ ハンド #${l.number}</div>
|
||
</div>
|
||
</div>
|
||
<div class="rv-streets">${scores}</div>
|
||
<div class="rv-section">プリフロップ（ハンドレンジ）</div>${pre}
|
||
${post ? `<div class="rv-section">フロップ以降（期待値の目安）</div><div class="rv-items">${post}</div>` : ''}
|
||
${allIn}
|
||
<div class="rv-foot">このハンドの収支 ${signed(h.net)} ・ 平均 ${r.average == null ? '—' : r.average}点（${r.hands}ハンド）</div>`;
|
||
}
|
||
|
||
function renderReview(s) {
|
||
const r = s.review;
|
||
$('review-open').hidden = !(r && r.last);
|
||
if (!r || !r.last) {
|
||
reviewSheet.close();
|
||
return;
|
||
}
|
||
// 同じタブで開き、レビューの画面の「テーブル」で戻ってこられるようにテーブルIDを渡す
|
||
const back = `t=${encodeURIComponent(tableId)}`;
|
||
$('review-link').href = r.sessionId ? `/review?s=${encodeURIComponent(r.sessionId)}&${back}` : `/review?${back}`;
|
||
const waiting = Boolean(s.awaitingNext && s.isHost);
|
||
$('review-modal-next').hidden = !waiting;
|
||
const key = JSON.stringify(r);
|
||
if (key !== reviewKey) {
|
||
reviewKey = key;
|
||
$('review-body').innerHTML = reviewHtml(r);
|
||
}
|
||
// 新しいハンドのレビューが届いたら自動で開く
|
||
if (r.last.number !== seenReview) {
|
||
seenReview = r.last.number;
|
||
if (waiting) reviewSheet.open();
|
||
}
|
||
}
|
||
|
||
// 直前のハンドの状況を、AI に貼り付けて質問できる文章にしてコピーする
|
||
async function copyHandPrompt(r) {
|
||
if (!r || !r.sessionId || !r.last) return;
|
||
const url = `/api/reviews/${encodeURIComponent(r.sessionId)}/hands/${r.last.number}/prompt`;
|
||
try {
|
||
if (await App.copyText(() => App.api('GET', url).then((d) => d.text))) toast('コピーしました。AI のチャットに貼り付けて質問できます');
|
||
} catch (err) {
|
||
toast(err.message);
|
||
}
|
||
}
|
||
|
||
const openReview = () => reviewSheet.open();
|
||
$('review-open').addEventListener('click', openReview);
|
||
$('review-show').addEventListener('click', openReview);
|
||
$('review-close').addEventListener('click', () => reviewSheet.close());
|
||
const nextHand = () => {
|
||
reviewSheet.close();
|
||
emit('table:next');
|
||
};
|
||
$('review-copy').addEventListener('click', () => copyHandPrompt(state && state.review));
|
||
$('next-hand').addEventListener('click', nextHand);
|
||
$('review-modal-next').addEventListener('click', nextHand);
|
||
|
||
// ---------- ランキング（スタック順・収支順を切り替える） ----------
|
||
// スタックはまだ降りていない人がこのハンドで出した額を含む（ベットのたびに順位が揺れないように）。
|
||
// 収支は持っているチップ − バイインの合計（リバイを含む）。同じ値は同じ順位
|
||
const RANK_STORE = 'poker.rankBy';
|
||
let rankBy = 'stack';
|
||
try {
|
||
if (localStorage.getItem(RANK_STORE) === 'net') rankBy = 'net';
|
||
} catch { /* プライベートモード等 */ }
|
||
const rankRows = new Map(); // 席番号 → 行。並びが変わっても行は使い回し、元の位置から滑らせる
|
||
const RANK_NOTE = {
|
||
stack: 'ハンド中は、まだ降りていない人がこのハンドで出したチップも含めています。',
|
||
net: '収支 = 持っているチップ − バイインの合計（リバイを含む）',
|
||
};
|
||
|
||
// 収支を表示しない設定のときはスタック順だけ
|
||
const rankMode = () => (Store.showNet ? rankBy : 'stack');
|
||
|
||
function rankingEntries(s) {
|
||
const key = rankMode() === 'net' ? 'net' : 'held';
|
||
const list = s.seats.filter(Boolean).sort((a, b) => b[key] - a[key] || a.seat - b.seat);
|
||
let rank = 0;
|
||
return list.map((p, i) => {
|
||
if (i === 0 || p[key] !== list[i - 1][key]) rank = i + 1;
|
||
return { p, rank, value: p[key] };
|
||
});
|
||
}
|
||
|
||
// 並べ替えられる行（縦の位置をばねで動かす）
|
||
function movableRow(className) {
|
||
const el = document.createElement('li');
|
||
el.className = className;
|
||
el.y = new Fluid.Spring(0, { precision: 0.3 });
|
||
el.y.onUpdate = (v) => {
|
||
el.style.transform = v ? `translate3d(0, ${v.toFixed(2)}px, 0)` : '';
|
||
};
|
||
return el;
|
||
}
|
||
const rowTops = (rows) => new Map([...rows].map((el) => [el, el.getBoundingClientRect().top]));
|
||
// 並べ替えた行を、画面上の元の位置（before: 行 → 並べ替える前の top）からばねで新しい位置へ
|
||
function slideFrom(before) {
|
||
for (const [el, top] of before) {
|
||
if (!el.isConnected) continue;
|
||
const offset = top - (el.getBoundingClientRect().top - el.y.value);
|
||
if (Math.abs(offset - el.y.value) < 0.5) continue;
|
||
el.y.set(offset);
|
||
el.y.to(0, { damping: 0.86, response: 0.42 });
|
||
}
|
||
}
|
||
|
||
function rankRow(seat) {
|
||
let el = rankRows.get(seat);
|
||
if (el) return el;
|
||
el = movableRow('cell rank-row');
|
||
rankRows.set(seat, el);
|
||
return el;
|
||
}
|
||
|
||
function renderRanking(s) {
|
||
const listEl = $('ranking-list');
|
||
const empty = listEl.querySelector('.empty');
|
||
if (empty) empty.remove();
|
||
const before = rowTops(rankRows.values());
|
||
const live = new Set();
|
||
rankingEntries(s).forEach(({ p, rank, value }, i) => {
|
||
live.add(p.seat);
|
||
const el = rankRow(p.seat);
|
||
const sub = [p.seat === s.mySeat && 'あなた', p.bot && 'CPU', p.sittingOut && '離席中', !p.connected && 'オフライン']
|
||
.filter(Boolean)
|
||
.join(' ・ ');
|
||
const net = rankMode() === 'net';
|
||
patch(
|
||
el,
|
||
`<span class="rank-no${rank <= 3 ? ` top-${rank}` : ''}">${rank}</span>` +
|
||
`<span class="rank-avatar${p.bot ? ' bot' : ''}">${p.bot ? BOT_SVG : esc(initialOf(p.name))}</span>` +
|
||
`<span class="cell-title">${esc(p.name)}${sub ? `<span class="cell-sub">${sub}</span>` : ''}</span>` +
|
||
`<span class="rank-value${net ? (value > 0 ? ' plus' : value < 0 ? ' minus' : '') : ''}">${net ? signed(value) : chips(value)}</span>`
|
||
);
|
||
el.style.setProperty('--hue', hueOf(p.name));
|
||
el.classList.toggle('me', p.seat === s.mySeat);
|
||
if (listEl.children[i] !== el) listEl.insertBefore(el, listEl.children[i] || null);
|
||
});
|
||
for (const [seat, el] of rankRows) {
|
||
if (live.has(seat)) continue;
|
||
el.remove();
|
||
rankRows.delete(seat);
|
||
}
|
||
slideFrom(before); // 順位が変わった行は元の位置から滑らせる
|
||
$('ranking-tabs').hidden = !Store.showNet;
|
||
$('ranking-note').textContent = RANK_NOTE[rankMode()];
|
||
if (!s.seats.some(Boolean)) listEl.innerHTML = '<li class="empty">まだ誰も座っていません</li>';
|
||
}
|
||
|
||
Fluid.Segmented($('ranking-tabs'));
|
||
function syncRankTabs() {
|
||
for (const b of $('ranking-tabs').querySelectorAll('[data-rank]')) {
|
||
const on = b.dataset.rank === rankBy;
|
||
b.classList.toggle('active', on);
|
||
b.setAttribute('aria-pressed', String(on));
|
||
}
|
||
}
|
||
syncRankTabs();
|
||
$('ranking-tabs').addEventListener('click', (e) => {
|
||
const b = e.target.closest('[data-rank]');
|
||
if (!b || b.dataset.rank === rankBy) return;
|
||
rankBy = b.dataset.rank;
|
||
try {
|
||
localStorage.setItem(RANK_STORE, rankBy);
|
||
} catch { /* プライベートモード等 */ }
|
||
syncRankTabs();
|
||
Fluid.haptic(6);
|
||
if (state) renderRanking(state);
|
||
});
|
||
$('ranking-open').addEventListener('click', () => {
|
||
if (!state) return;
|
||
renderRanking(state); // 中身を入れてから開く（シートの高さを測るため）
|
||
rankingSheet.open();
|
||
});
|
||
$('ranking-close').addEventListener('click', () => rankingSheet.close());
|
||
|
||
// ---------- 席順の変更（ホストのみ） ----------
|
||
// 席の並びは輪なので、自分を一番上に固定し、その下に左隣から時計回りの順で並べる（テーブルの画面と同じ向き）。
|
||
// 行は右端のつまみをつかむと指に付いてきて、ほかの行がよける。キーボードではつまみにフォーカスして ↑↓。
|
||
// ハンド中に決めた席順は次のハンドの始めにサーバが並べ替える
|
||
const HANDLE_SVG = '<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 8h14M5 12h14M5 16h14"/></svg>';
|
||
let seatMe = -1; // 自分の席（観戦中のホストは -1）
|
||
let seatOrder = []; // 自分以外の席番号（左隣から時計回り）
|
||
let seatNames = new Map(); // 席番号 → 名前（開いている間に席番号が振り直されたか確かめる）
|
||
let seatDrag = null;
|
||
const seatRows = new Map(); // 席番号 → 行
|
||
const previewDots = new Map(); // 席番号 → プレビューの点
|
||
|
||
const occupiedSeats = (s) => s.seats.filter(Boolean).map((p) => p.seat);
|
||
const seatingList = () => (seatMe >= 0 ? [seatMe] : []).concat(seatOrder);
|
||
|
||
// いまの並び（次のハンドからの席順が決めてあればそれ）を、自分から時計回りに読み込む
|
||
function loadSeating(s) {
|
||
const occupied = occupiedSeats(s);
|
||
const pending = s.pendingSeating;
|
||
const base = pending
|
||
? pending.filter((i) => occupied.includes(i)).concat(occupied.filter((i) => !pending.includes(i)))
|
||
: occupied;
|
||
const k = base.indexOf(s.mySeat);
|
||
seatMe = k >= 0 ? s.mySeat : -1;
|
||
seatOrder = k >= 0 ? base.slice(k + 1).concat(base.slice(0, k)) : base;
|
||
seatNames = new Map(occupied.map((i) => [i, s.seats[i].name]));
|
||
}
|
||
|
||
// 開いている間に座った人は最後に加え、いなくなった人は外す（並べた順は崩さない）。
|
||
// 次のハンドで席番号が振り直されたら読み込み直す
|
||
function syncSeating(s) {
|
||
if (!s.isHost) return seatingPopup.close();
|
||
if (seatDrag) return;
|
||
const occupied = occupiedSeats(s);
|
||
const renumbered =
|
||
(seatMe >= 0 && s.mySeat !== seatMe) || [...seatNames].some(([i, name]) => s.seats[i] && s.seats[i].name !== name);
|
||
if (renumbered) {
|
||
loadSeating(s);
|
||
toast('席が並べ替わったので、いまの席順を読み込み直しました');
|
||
} else {
|
||
const kept = seatOrder.filter((i) => occupied.includes(i));
|
||
const added = occupied.filter((i) => i !== seatMe && !kept.includes(i));
|
||
seatOrder = kept.concat(added);
|
||
for (const i of added) seatNames.set(i, s.seats[i].name);
|
||
}
|
||
renderSeating(rowTops(seatRows.values()));
|
||
}
|
||
|
||
function seatRow(seat) {
|
||
let el = seatRows.get(seat);
|
||
if (el) return el;
|
||
el = movableRow('cell seat-row');
|
||
el.dataset.seat = seat;
|
||
seatRows.set(seat, el);
|
||
return el;
|
||
}
|
||
|
||
function whereText(seat) {
|
||
if (seat === seatMe) return 'あなた';
|
||
const k = seatOrder.indexOf(seat);
|
||
const n = seatOrder.length;
|
||
if (seatMe < 0) return `${k + 1}番目`;
|
||
if (n === 1) return 'あなたの隣';
|
||
if (k === 0) return 'あなたの左隣';
|
||
if (k === n - 1) return 'あなたの右隣';
|
||
return `あなたから時計回りに${k + 1}人目`;
|
||
}
|
||
|
||
// before: 並べ替える前の行の位置（渡すと元の位置から滑らせる）
|
||
function renderSeating(before) {
|
||
const s = state;
|
||
const list = $('seating-list');
|
||
const seats = seatingList().filter((i) => s.seats[i]);
|
||
seats.forEach((seat, i) => {
|
||
const p = s.seats[seat];
|
||
const mine = seat === seatMe;
|
||
const sub = [whereText(seat), p.bot && 'CPU', p.sittingOut && '離席中'].filter(Boolean).join(' ・ ');
|
||
const el = seatRow(seat);
|
||
patch(
|
||
el,
|
||
`<span class="rank-avatar${p.bot ? ' bot' : ''}">${p.bot ? BOT_SVG : esc(initialOf(p.name))}</span>` +
|
||
`<span class="cell-title">${esc(p.name)}<span class="cell-sub">${sub}</span></span>` +
|
||
(mine
|
||
? '<span class="seat-pin">固定</span>'
|
||
: `<button type="button" class="seat-handle" aria-label="${esc(p.name)}の席を移動（↑↓キーで並べ替え）">${HANDLE_SVG}</button>`)
|
||
);
|
||
el.style.setProperty('--hue', hueOf(p.name));
|
||
el.classList.toggle('me', mine);
|
||
if (list.children[i] !== el) list.insertBefore(el, list.children[i] || null);
|
||
});
|
||
for (const [seat, el] of seatRows) {
|
||
if (seats.includes(seat)) continue;
|
||
el.remove();
|
||
seatRows.delete(seat);
|
||
}
|
||
if (before) slideFrom(before);
|
||
|
||
const note = $('seating-pending');
|
||
note.hidden = !s.hand && !s.pendingSeating;
|
||
note.textContent = s.hand
|
||
? 'ハンドの途中なので、次のハンドの始めに並べ替えます。'
|
||
: 'まだ反映していない席順があります。';
|
||
renderSeatingPreview(seats);
|
||
}
|
||
|
||
// 小さなテーブル: 自分が一番下で時計回り（テーブルの画面と同じ）。点は新しい位置へ滑る
|
||
function renderSeatingPreview(seats) {
|
||
const box = $('seating-preview');
|
||
const n = seats.length;
|
||
seats.forEach((seat, idx) => {
|
||
const p = state.seats[seat];
|
||
let dot = previewDots.get(seat);
|
||
if (!dot) {
|
||
dot = document.createElement('span');
|
||
dot.className = 'seating-dot';
|
||
dot.innerHTML = '<span class="rank-avatar"></span><span class="seating-name"></span>';
|
||
previewDots.set(seat, dot);
|
||
box.append(dot);
|
||
}
|
||
const angle = Math.PI / 2 + (idx * 2 * Math.PI) / Math.max(n, 1);
|
||
dot.style.left = `${(50 + 40 * Math.cos(angle)).toFixed(2)}%`;
|
||
dot.style.top = `${(50 + 36 * Math.sin(angle)).toFixed(2)}%`;
|
||
dot.style.setProperty('--hue', hueOf(p.name));
|
||
dot.classList.toggle('me', seat === seatMe);
|
||
const face = dot.firstChild;
|
||
face.classList.toggle('bot', p.bot);
|
||
patch(face, p.bot ? BOT_SVG : esc(initialOf(p.name)));
|
||
dot.lastChild.textContent = seat === seatMe ? 'あなた' : p.name;
|
||
});
|
||
for (const [seat, dot] of previewDots) {
|
||
if (seats.includes(seat)) continue;
|
||
dot.remove();
|
||
previewDots.delete(seat);
|
||
}
|
||
}
|
||
|
||
function moveSeat(from, to) {
|
||
const before = rowTops(seatRows.values());
|
||
if (from !== to) {
|
||
const [seat] = seatOrder.splice(from, 1);
|
||
seatOrder.splice(to, 0, seat);
|
||
}
|
||
renderSeating(before);
|
||
}
|
||
|
||
const seatingListEl = $('seating-list');
|
||
seatingListEl.addEventListener('pointerdown', (e) => {
|
||
const handle = e.target.closest('.seat-handle');
|
||
if (!handle || seatDrag || (e.pointerType === 'mouse' && e.button !== 0)) return;
|
||
const row = handle.closest('[data-seat]');
|
||
const seat = Number(row.dataset.seat);
|
||
e.preventDefault();
|
||
handle.setPointerCapture(e.pointerId);
|
||
row.y.stop();
|
||
const from = seatOrder.indexOf(seat);
|
||
seatDrag = { id: e.pointerId, seat, row, from, to: from, y0: e.clientY - row.y.value, h: row.offsetHeight };
|
||
row.classList.add('dragging');
|
||
Fluid.haptic(8);
|
||
});
|
||
seatingListEl.addEventListener('pointermove', (e) => {
|
||
const d = seatDrag;
|
||
if (!d || e.pointerId !== d.id) return;
|
||
const n = seatOrder.length;
|
||
// 端より先へはゴムのように抵抗する
|
||
const min = -d.from * d.h;
|
||
const max = (n - 1 - d.from) * d.h;
|
||
let dy = e.clientY - d.y0;
|
||
if (dy < min) dy = min - Fluid.rubberband(min - dy, d.h * 2);
|
||
else if (dy > max) dy = max + Fluid.rubberband(dy - max, d.h * 2);
|
||
d.row.y.set(dy);
|
||
const to = Fluid.clamp(Math.round(d.from + dy / d.h), 0, n - 1);
|
||
if (to !== d.to) {
|
||
d.to = to;
|
||
Fluid.haptic(6);
|
||
}
|
||
// 間の行は1行ぶんよける
|
||
seatOrder.forEach((seat, j) => {
|
||
if (seat === d.seat) return;
|
||
const shift = d.from < j && j <= d.to ? -d.h : d.to <= j && j < d.from ? d.h : 0;
|
||
const el = seatRows.get(seat);
|
||
if (el && el.y.target !== shift) el.y.to(shift, { damping: 1, response: 0.28 });
|
||
});
|
||
});
|
||
const dropSeat = (e) => {
|
||
const d = seatDrag;
|
||
if (!d || e.pointerId !== d.id) return;
|
||
seatDrag = null;
|
||
d.row.classList.remove('dragging');
|
||
moveSeat(d.from, e.type === 'pointercancel' ? d.from : d.to);
|
||
};
|
||
seatingListEl.addEventListener('pointerup', dropSeat);
|
||
seatingListEl.addEventListener('pointercancel', dropSeat);
|
||
seatingListEl.addEventListener('keydown', (e) => {
|
||
const handle = e.target.closest('.seat-handle');
|
||
const dir = e.key === 'ArrowUp' ? -1 : e.key === 'ArrowDown' ? 1 : 0;
|
||
if (!handle || !dir) return;
|
||
e.preventDefault();
|
||
const seat = Number(handle.closest('[data-seat]').dataset.seat);
|
||
const from = seatOrder.indexOf(seat);
|
||
if (from + dir < 0 || from + dir >= seatOrder.length) return;
|
||
moveSeat(from, from + dir);
|
||
const again = seatRows.get(seat).querySelector('.seat-handle');
|
||
if (again) again.focus();
|
||
});
|
||
|
||
$('seating-shuffle').addEventListener('click', () => {
|
||
const before = rowTops(seatRows.values());
|
||
const r = new Uint32Array(seatOrder.length);
|
||
crypto.getRandomValues(r);
|
||
for (let i = seatOrder.length - 1; i > 0; i--) {
|
||
const j = r[i] % (i + 1);
|
||
[seatOrder[i], seatOrder[j]] = [seatOrder[j], seatOrder[i]];
|
||
}
|
||
Fluid.haptic(10);
|
||
renderSeating(before);
|
||
});
|
||
$('seating-open').addEventListener('click', () => {
|
||
if (!state || !state.isHost) return;
|
||
loadSeating(state);
|
||
renderSeating(null);
|
||
seatingPopup.open();
|
||
});
|
||
$('seating-cancel').addEventListener('click', () => seatingPopup.close());
|
||
$('seating-save').addEventListener('click', () => {
|
||
if (!socket || !state) return;
|
||
const later = Boolean(state.hand); // ハンドがある間（結果の表示中を含む）は次のハンドから
|
||
const btn = $('seating-save');
|
||
btn.disabled = true;
|
||
socket.emit('table:seating', { order: seatingList() }, (res) => {
|
||
btn.disabled = false;
|
||
if (!res || !res.ok) {
|
||
toast((res && res.error) || '席順を変更できませんでした');
|
||
if (state) syncSeating(state);
|
||
return;
|
||
}
|
||
seatingPopup.close();
|
||
toast(later ? '次のハンドから新しい席順になります' : '席順を変更しました');
|
||
});
|
||
});
|
||
|
||
// ---------- 勝者選択 ----------
|
||
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 : []));
|
||
}
|
||
patch(
|
||
$('award-pots'),
|
||
pots
|
||
.map((p, i) => {
|
||
const title = pots.length === 1 ? 'ポット' : i === 0 ? 'メインポット' : `サイドポット${pots.length > 2 ? i : ''}`;
|
||
const names = p.eligible
|
||
.map((seat) => {
|
||
const on = awardSel[i].has(seat);
|
||
return `<button type="button" class="pick${on ? ' on' : ''}" aria-pressed="${on}" data-pot="${i}" data-seat="${seat}">${CHECK_SVG}${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', async () => {
|
||
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で確定しますか？';
|
||
const ok = await App.confirm({ title: '勝者の確定', message: msg, ok: '確定する' });
|
||
// 確認中に他の人が確定した・ハンドが終わった場合は送らない
|
||
if (!ok || pending || $('award-panel').hidden) return;
|
||
pending = true;
|
||
emit('table:award', { winners });
|
||
render();
|
||
});
|
||
|
||
// ---------- レイズ ----------
|
||
// 場面ごとの額の候補。プリフロップはオープン（BB の何倍）・3bet 以降（相手の額の何倍）、
|
||
// フロップ以降はベット（ポットの何割）・レイズ（相手のベットの何倍）。
|
||
// ポットの何割は「コールしたあとのポット」に対する額を上乗せする（ポットレイズと同じ考え方）。
|
||
// def は開いたときに選んでおく候補
|
||
function betContext(o) {
|
||
const h = state.hand;
|
||
const bb = state.bigBlind;
|
||
const cur = h.currentBet;
|
||
const potAfterCall = h.potTotal + o.toCall;
|
||
const pot = (f) => cur + potAfterCall * f;
|
||
const times = (x) => ({ label: `${x}x`, to: cur * x });
|
||
const potPreset = { label: 'Pot', to: pot(1) };
|
||
|
||
if (h.street === 'PREFLOP') {
|
||
const r = h.raises || 0;
|
||
if (r === 0) {
|
||
// リンプした人がいれば 1人につき 1BB 足す
|
||
const limpers = Object.entries(h.players).filter(
|
||
([seat, p]) => Number(seat) !== h.bbSeat && !p.folded && p.bet >= cur
|
||
).length;
|
||
return {
|
||
title: limpers ? 'アイソレート' : 'オープン',
|
||
note: limpers ? `リンプ ${limpers}人（+${limpers}BB）` : '',
|
||
presets: [2, 2.5, 3, 4].map((x) => ({ label: `${x + limpers}BB`, to: (x + limpers) * bb })).concat(potPreset),
|
||
def: limpers ? 2 : 1,
|
||
};
|
||
}
|
||
const xs = r === 1 ? [2.5, 3, 4] : r === 2 ? [2.2, 2.5, 3] : [2, 2.5];
|
||
return {
|
||
title: `${r + 2}bet`,
|
||
note: `相手 ${chips(cur)}`,
|
||
presets: xs.map(times).concat(potPreset),
|
||
def: 1,
|
||
};
|
||
}
|
||
if (o.isBet) {
|
||
return {
|
||
title: 'ベット',
|
||
note: '',
|
||
presets: [
|
||
{ label: '33%', to: pot(1 / 3) },
|
||
{ label: '50%', to: pot(1 / 2) },
|
||
{ label: '75%', to: pot(3 / 4) },
|
||
potPreset,
|
||
{ label: '150%', to: pot(1.5) },
|
||
],
|
||
def: 1,
|
||
};
|
||
}
|
||
return {
|
||
title: (h.raises || 0) >= 2 ? 'リレイズ' : 'レイズ',
|
||
note: `相手 ${chips(cur)}`,
|
||
presets: [2.5, 3, 4].map(times).concat(potPreset),
|
||
def: 1,
|
||
};
|
||
}
|
||
|
||
// 候補の額を出せる範囲に収める（SB 単位に丸めるとブラインドが小さいうちは 50% が 57% になったりするので 1 単位）。
|
||
// 最小に届かない候補は押せない。オールインを超える候補は最初の 1つだけ All-in として残す。
|
||
// 左から額の小さい順に並べる（Pot が 4BB より小さいこともある）。def は並べ替える前の番号
|
||
function betPresets(o, ctx) {
|
||
let allInShown = false;
|
||
return ctx.presets
|
||
.map((p, i) => ({ label: p.label, raw: Math.round(p.to), def: i === ctx.def }))
|
||
.sort((a, b) => a.raw - b.raw)
|
||
.map((p) => {
|
||
const to = clampRaise(o, p.raw);
|
||
const allIn = to >= o.maxRaiseTo;
|
||
const disabled = p.raw < o.minRaiseTo || (allIn && allInShown);
|
||
if (allIn) allInShown = true;
|
||
return { label: p.label, to, allIn, disabled, def: p.def };
|
||
});
|
||
}
|
||
|
||
function clampRaise(o, v) {
|
||
if (!Number.isFinite(v)) return o.minRaiseTo;
|
||
return Math.min(o.maxRaiseTo, Math.max(o.minRaiseTo, Math.round(v)));
|
||
}
|
||
|
||
// ベット額のスライダー: つまみはつかんだ位置のまま指に付いてくる。溝を押せばそこへ飛ぶ。
|
||
// 端を越えて引っぱるとゴムのように抵抗し、離すと端へ戻る
|
||
const slider = $('raise-range');
|
||
const sliderThumb = slider.querySelector('.bet-thumb');
|
||
const sliderFill = slider.querySelector('.bet-fill');
|
||
const THUMB = 28;
|
||
const knob = new Fluid.Spring(0, { precision: 0.0005 }); // つまみの位置（0 = 最小、1 = オールイン）
|
||
const sliderTracker = new Fluid.VelocityTracker();
|
||
let sliderDrag = null;
|
||
|
||
function paintKnob(f) {
|
||
const w = slider.clientWidth;
|
||
if (!w) return;
|
||
const x = f * (w - THUMB);
|
||
sliderThumb.style.transform = `translate3d(${x.toFixed(2)}px, 0, 0)`;
|
||
sliderFill.style.transform = `scaleX(${Fluid.clamp((x + THUMB / 2) / w, 0, 1).toFixed(4)})`;
|
||
}
|
||
knob.onUpdate = paintKnob;
|
||
if ('ResizeObserver' in window) new ResizeObserver(() => paintKnob(knob.value)).observe(slider);
|
||
|
||
// つまみの位置と額は 2乗の関係にする（スタックが深くても、よく使う小さい額を細かく選べるように）
|
||
const CURVE = 2;
|
||
const fracOf = (o, v) =>
|
||
o.maxRaiseTo > o.minRaiseTo ? Fluid.clamp((v - o.minRaiseTo) / (o.maxRaiseTo - o.minRaiseTo), 0, 1) ** (1 / CURVE) : 1;
|
||
// SB 単位に丸める（最大はオールイン額そのまま）
|
||
function valueAt(o, f) {
|
||
if (f >= 1) return o.maxRaiseTo;
|
||
const unit = Math.max(1, state.smallBlind);
|
||
const raw = o.minRaiseTo + f ** CURVE * (o.maxRaiseTo - o.minRaiseTo);
|
||
return clampRaise(o, o.minRaiseTo + Math.round((raw - o.minRaiseTo) / unit) * unit);
|
||
}
|
||
const formatBB = (x) => (Math.round(x * 10) / 10).toLocaleString('en-US');
|
||
|
||
function renderRaisePanel(o) {
|
||
raiseValue = clampRaise(o, raiseValue);
|
||
const amount = $('raise-amount');
|
||
if (document.activeElement !== amount) amount.value = raiseValue;
|
||
amount.min = o.minRaiseTo;
|
||
amount.max = o.maxRaiseTo;
|
||
slider.setAttribute('aria-valuemin', o.minRaiseTo);
|
||
slider.setAttribute('aria-valuemax', o.maxRaiseTo);
|
||
slider.setAttribute('aria-valuenow', raiseValue);
|
||
slider.setAttribute('aria-valuetext', chips(raiseValue));
|
||
// 指で動かしている間は指の位置を優先する。それ以外（プリセット・数字の入力）はばねで滑らせる
|
||
if (!sliderDrag) {
|
||
const f = fracOf(o, raiseValue);
|
||
if (knob.target !== f) knob.to(f, { damping: 1, response: 0.3 });
|
||
}
|
||
paintKnob(knob.value);
|
||
|
||
const h = state.hand;
|
||
const ctx = betContext(o);
|
||
$('bet-title').textContent = ctx.title;
|
||
$('bet-context').textContent = [`ポット ${chips(h.potTotal)}`, ctx.note].filter(Boolean).join(' · ');
|
||
const presets = betPresets(o, ctx);
|
||
patch(
|
||
$('presets'),
|
||
presets
|
||
.map(
|
||
(p) =>
|
||
`<button type="button" class="chip-btn${p.allIn ? ' allin' : ''}" data-to="${p.to}"${p.disabled ? ' disabled' : ''}>` +
|
||
`<b>${esc(p.label)}</b><span>${p.disabled ? '—' : p.allIn ? 'All-in' : chips(p.to)}</span></button>`
|
||
)
|
||
.join('')
|
||
);
|
||
// 同じ額の候補が 2つあっても光らせるのは 1つだけ
|
||
let lit = false;
|
||
for (const b of $('presets').children) {
|
||
const on = !lit && !b.disabled && Number(b.dataset.to) === raiseValue;
|
||
if (on) lit = true;
|
||
b.classList.toggle('active', on);
|
||
}
|
||
$('raise-min-amt').textContent = chips(o.minRaiseTo);
|
||
$('raise-max-amt').textContent = chips(o.maxRaiseTo);
|
||
$('raise-min').classList.toggle('active', raiseValue === o.minRaiseTo);
|
||
$('raise-max').classList.toggle('active', raiseValue === o.maxRaiseTo);
|
||
$('raise-minus').disabled = raiseValue <= o.minRaiseTo;
|
||
$('raise-plus').disabled = raiseValue >= o.maxRaiseTo;
|
||
|
||
$('raise-bb').textContent = state.bigBlind > 0 ? `${formatBB(raiseValue / state.bigBlind)} BB` : '';
|
||
// 相手の額の何倍か（オープン以外のプリフロップとレイズ）、ポットの何％か（ベット）
|
||
let ratio = '';
|
||
if (o.isBet) ratio = h.potTotal > 0 ? `ポットの ${Math.round((raiseValue / h.potTotal) * 100)}%` : '';
|
||
else if (h.street !== 'PREFLOP' || h.raises > 0) ratio = `${formatBB(raiseValue / h.currentBet)}x`;
|
||
$('raise-ratio').textContent = ratio;
|
||
const allIn = raiseValue >= o.maxRaiseTo;
|
||
$('raise-confirm').textContent = allIn
|
||
? `All-in ${chips(raiseValue)}`
|
||
: `${o.isBet ? 'Bet' : 'Raise to'} ${chips(raiseValue)}`;
|
||
$('raise-confirm').disabled = pending;
|
||
}
|
||
|
||
function setRaise(o, v) {
|
||
raiseValue = clampRaise(o, v);
|
||
$('raise-amount').value = raiseValue;
|
||
renderRaisePanel(o);
|
||
}
|
||
|
||
function dragKnob(e, animate) {
|
||
const d = sliderDrag;
|
||
const o = options();
|
||
if (!d || !o) return;
|
||
const span = d.width - THUMB;
|
||
let px = e.clientX - d.left - d.grab;
|
||
if (px < 0) px = -Fluid.rubberband(-px, span);
|
||
else if (px > span) px = span + Fluid.rubberband(px - span, span);
|
||
const f = span > 0 ? px / span : 1;
|
||
if (animate) knob.to(f, { damping: 1, response: 0.25 });
|
||
else knob.set(f);
|
||
const before = raiseValue;
|
||
raiseValue = valueAt(o, Fluid.clamp(f, 0, 1));
|
||
if (raiseValue === before) return;
|
||
// 端（最小・オールイン）に着いた瞬間だけ軽く振動する
|
||
if (raiseValue === o.maxRaiseTo || raiseValue === o.minRaiseTo) Fluid.haptic(8);
|
||
$('raise-amount').value = raiseValue;
|
||
renderRaisePanel(o);
|
||
}
|
||
|
||
slider.addEventListener('pointerdown', (e) => {
|
||
const o = options();
|
||
if (!o || (e.pointerType === 'mouse' && e.button !== 0)) return;
|
||
e.preventDefault();
|
||
slider.focus({ preventScroll: true });
|
||
slider.setPointerCapture(e.pointerId);
|
||
knob.stop();
|
||
const rect = slider.getBoundingClientRect();
|
||
const thumbLeft = rect.left + knob.value * (rect.width - THUMB);
|
||
const onThumb = e.clientX >= thumbLeft - 8 && e.clientX <= thumbLeft + THUMB + 8;
|
||
sliderDrag = {
|
||
id: e.pointerId,
|
||
left: rect.left,
|
||
width: rect.width,
|
||
grab: onThumb ? e.clientX - thumbLeft : THUMB / 2,
|
||
};
|
||
sliderTracker.reset();
|
||
sliderTracker.add(e.clientX, 0, e.timeStamp);
|
||
slider.classList.add('active');
|
||
if (!onThumb) dragKnob(e, true);
|
||
});
|
||
slider.addEventListener('pointermove', (e) => {
|
||
if (!sliderDrag || e.pointerId !== sliderDrag.id) return;
|
||
sliderTracker.add(e.clientX, 0, e.timeStamp);
|
||
dragKnob(e, false);
|
||
});
|
||
const releaseKnob = (e) => {
|
||
if (!sliderDrag || e.pointerId !== sliderDrag.id) return;
|
||
const span = sliderDrag.width - THUMB;
|
||
sliderDrag = null;
|
||
slider.classList.remove('active');
|
||
const o = options();
|
||
if (!o) return;
|
||
sliderTracker.add(e.clientX, 0, e.timeStamp);
|
||
// 端を越えていたら、離したときの速さを引き継いで端へ戻る
|
||
const out = knob.value < 0 || knob.value > 1;
|
||
const velocity = out && span > 0 ? sliderTracker.velocity().x / span : 0;
|
||
knob.to(fracOf(o, raiseValue), { damping: 1, response: 0.3, velocity });
|
||
};
|
||
slider.addEventListener('pointerup', releaseKnob);
|
||
slider.addEventListener('pointercancel', releaseKnob);
|
||
slider.addEventListener('keydown', (e) => {
|
||
const o = options();
|
||
if (!o) return;
|
||
const unit = Math.max(1, state.bigBlind);
|
||
const step = { ArrowRight: unit, ArrowUp: unit, ArrowLeft: -unit, ArrowDown: -unit, PageUp: unit * 5, PageDown: -unit * 5 }[e.key];
|
||
if (e.key === 'Home') setRaise(o, o.minRaiseTo);
|
||
else if (e.key === 'End') setRaise(o, o.maxRaiseTo);
|
||
else if (step) setRaise(o, raiseValue + step);
|
||
else return;
|
||
e.preventDefault();
|
||
});
|
||
|
||
const options = () => (state && state.me && state.me.options) || null;
|
||
|
||
$('act-fold').addEventListener('click', async () => {
|
||
const o = options();
|
||
if (!o) return;
|
||
if (o.canCheck) {
|
||
const ok = await App.confirm({
|
||
title: 'フォールドしますか？',
|
||
message: 'いまはチップを出さずにチェックできます。',
|
||
ok: 'フォールド',
|
||
cancel: 'やめる',
|
||
danger: true,
|
||
});
|
||
// 確認中に手番が過ぎていたら何もしない
|
||
if (!ok || !options()) return;
|
||
}
|
||
sendAction('fold');
|
||
});
|
||
$('act-call').addEventListener('click', () => {
|
||
const o = options();
|
||
if (o) sendAction(o.canCheck ? 'check' : 'call');
|
||
});
|
||
$('act-raise').addEventListener('click', () => {
|
||
const o = options();
|
||
if (!o || !o.canRaise) return;
|
||
if (o.minRaiseTo >= o.maxRaiseTo) return sendAction('raise', o.maxRaiseTo); // オールインしかない
|
||
// 場面のよくある額（オープン 2.5BB・3bet 3x・ベット 50% など）を選んだ状態で開く
|
||
const ctx = betContext(o);
|
||
const presets = betPresets(o, ctx);
|
||
const def = presets.find((p) => p.def && !p.disabled) || presets.find((p) => !p.disabled);
|
||
raising = true;
|
||
raiseValue = def ? def.to : o.minRaiseTo;
|
||
knob.set(fracOf(o, raiseValue));
|
||
render();
|
||
});
|
||
$('raise-cancel').addEventListener('click', () => {
|
||
raising = false;
|
||
render();
|
||
});
|
||
$('raise-confirm').addEventListener('click', () => {
|
||
const o = options();
|
||
if (o) sendAction('raise', clampRaise(o, raiseValue));
|
||
});
|
||
$('presets').addEventListener('click', (e) => {
|
||
const b = e.target.closest('[data-to]');
|
||
const o = options();
|
||
if (!b || b.disabled || !o) return;
|
||
Fluid.haptic(6);
|
||
setRaise(o, Number(b.dataset.to));
|
||
});
|
||
$('raise-min').addEventListener('click', () => {
|
||
const o = options();
|
||
if (o) setRaise(o, o.minRaiseTo);
|
||
});
|
||
$('raise-max').addEventListener('click', () => {
|
||
const o = options();
|
||
if (o) setRaise(o, o.maxRaiseTo);
|
||
});
|
||
|
||
// −/+: 1BB ずつ。押し続けると少し待ってから連続で、だんだん速く動く
|
||
function stepper(btn, dir) {
|
||
let timer = null;
|
||
let count = 0;
|
||
const step = () => {
|
||
const o = options();
|
||
if (!o) return stop();
|
||
const before = raiseValue;
|
||
setRaise(o, raiseValue + dir * Math.max(1, state.bigBlind));
|
||
if (raiseValue === before) return stop();
|
||
if (raiseValue === o.maxRaiseTo || raiseValue === o.minRaiseTo) Fluid.haptic(8);
|
||
};
|
||
const stop = () => {
|
||
clearTimeout(timer);
|
||
timer = null;
|
||
};
|
||
const repeat = () => {
|
||
step();
|
||
count++;
|
||
if (timer) timer = setTimeout(repeat, count < 6 ? 140 : count < 20 ? 70 : 35);
|
||
};
|
||
btn.addEventListener('pointerdown', (e) => {
|
||
if (e.pointerType === 'mouse' && e.button !== 0) return;
|
||
e.preventDefault(); // 長押しで文字選択・メニューが出ないように
|
||
step();
|
||
count = 0;
|
||
timer = setTimeout(repeat, 380);
|
||
});
|
||
for (const type of ['pointerup', 'pointerleave', 'pointercancel']) btn.addEventListener(type, stop);
|
||
// キーボード（Enter / Space）から押されたとき
|
||
btn.addEventListener('click', (e) => {
|
||
if (e.detail === 0) step();
|
||
});
|
||
}
|
||
stepper($('raise-minus'), -1);
|
||
stepper($('raise-plus'), 1);
|
||
$('raise-amount').addEventListener('input', (e) => {
|
||
const o = options();
|
||
const v = Number(e.target.value);
|
||
if (!o || !Number.isFinite(v) || v <= 0) return;
|
||
raiseValue = clampRaise(o, v);
|
||
renderRaisePanel(o);
|
||
});
|
||
$('raise-amount').addEventListener('blur', () => {
|
||
const o = options();
|
||
if (o) $('raise-amount').value = clampRaise(o, raiseValue);
|
||
});
|
||
|
||
// ---------- ブラインドタイマー ----------
|
||
function renderTimer() {
|
||
if (!state) return;
|
||
const el = $('timer');
|
||
const t = state.timer;
|
||
el.classList.toggle('paused', state.paused);
|
||
if (!t.enabled) {
|
||
el.textContent = state.paused ? '⏸' : '';
|
||
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, 250);
|
||
|
||
// ---------- その他の操作 ----------
|
||
$('start').addEventListener('click', () => emit('table:start'));
|
||
$('pause').addEventListener('click', () => emit('table:pause'));
|
||
$('sit-out').addEventListener('click', () => emit('table:sitOut'));
|
||
$('sit-in').addEventListener('click', () => emit('table:sitIn'));
|
||
$('rebuy').addEventListener('click', () => emit('table:rebuy'));
|
||
$('take-seat').addEventListener('click', () => join(true));
|
||
|
||
$('leave').addEventListener('click', async () => {
|
||
const me = state && state.mySeat >= 0 ? state.seats[state.mySeat] : null;
|
||
if (!me) return (location.href = '/');
|
||
const inHand = state.hand && !state.hand.finished && me.inHand && !me.folded;
|
||
const msg = inHand
|
||
? 'ハンドの途中です。退席するとフォールドになり、チップは失われます。'
|
||
: '退席するとチップは失われます。';
|
||
const ok = await App.confirm({ title: 'テーブルから退席しますか？', message: msg, ok: '退席する', danger: true });
|
||
if (!ok) return;
|
||
socket.emit('table:leave', null, () => { location.href = '/'; });
|
||
});
|
||
|
||
$('share').addEventListener('click', async () => {
|
||
const url = location.origin + '/';
|
||
try {
|
||
await navigator.clipboard.writeText(url);
|
||
} catch {
|
||
const ta = document.createElement('textarea');
|
||
ta.value = url;
|
||
document.body.appendChild(ta);
|
||
ta.select();
|
||
document.execCommand('copy');
|
||
ta.remove();
|
||
}
|
||
toast('サイトのリンクをコピーしました');
|
||
});
|
||
|
||
// iOS Safari は CSS だけではページのスクロール・引っ張り（バウンス）を止められないので、
|
||
// 1本指のドラッグを止める。スライダーと、中身がはみ出しているシート・勝者選択は除く。
|
||
// 2本指（ピンチ拡大）はアクセシビリティのため止めない。
|
||
document.addEventListener(
|
||
'touchmove',
|
||
(e) => {
|
||
if (e.touches.length !== 1) return;
|
||
const t = e.target;
|
||
if (!t.closest) return;
|
||
if (t.closest('.bet-slider')) return;
|
||
const box = t.closest('.sheet-scroll') || t.closest('.award-pots') || t.closest('.copy-text');
|
||
if (box && box.scrollHeight > box.clientHeight) return;
|
||
if (e.cancelable) e.preventDefault();
|
||
},
|
||
{ passive: false }
|
||
);
|
||
|
||
ensureName();
|
||
})();
|