Rebuild the UI in an Apple style with spring-driven motion
Replace the look of every page (key, lobby, create, table, range, review) with light/dark semantic colors, translucent materials, iOS-style grouped lists and system typography. Add fluid.js, a small spring engine with interruptible, velocity-aware animations, and use it for draggable bottom sheets, sliding segmented controls, a custom bet slider with rubber-banding, swipe-to-delete in the lobby, and dealt/flipped cards. Seats and cards are now reused between renders so animations are not cut off. Honors reduced motion, reduced transparency and increased contrast. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
agomizi1cmandClaude Opus 5.5 committed
1 parent
d5ef2d310f
commit
c3fbfdd12e
18 files changed
+4877
-1278
No files matched your search
+51
-29
@@ -38,21 +38,25 @@
|
||||
return '$' + Number(n).toLocaleString('en-US');
|
||||
}
|
||||
|
||||
// 上から降りてきて、少ししたら同じ道を上へ戻る通知
|
||||
let toastTimer;
|
||||
function toast(msg) {
|
||||
let el = document.querySelector('.toast');
|
||||
if (!el) {
|
||||
el = document.createElement('div');
|
||||
el.className = 'toast';
|
||||
el.setAttribute('role', 'status');
|
||||
el.setAttribute('aria-live', 'polite');
|
||||
document.body.appendChild(el);
|
||||
void el.offsetWidth; // 最初の1回も画面の外から動かす
|
||||
}
|
||||
el.textContent = msg;
|
||||
el.hidden = false;
|
||||
el.classList.add('show');
|
||||
clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => { el.hidden = true; }, 2500);
|
||||
toastTimer = setTimeout(() => el.classList.remove('show'), 2600);
|
||||
}
|
||||
|
||||
// ブラウザ標準の confirm() の代わりの確認ダイアログ。OK なら true で解決する。
|
||||
// ブラウザ標準の confirm() の代わりの確認ダイアログ（iOS のアラートの形）。OK なら true で解決する。
|
||||
// opts: { title, message（改行可）, ok, cancel, danger（OK を赤にする） }
|
||||
// 新しいダイアログを開くと、開いていたものはキャンセル扱いで閉じる
|
||||
let closeConfirm = null;
|
||||
@@ -61,22 +65,24 @@
|
||||
if (closeConfirm) closeConfirm(false);
|
||||
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'modal-backdrop confirm-backdrop';
|
||||
backdrop.className = 'alert-backdrop';
|
||||
backdrop.innerHTML =
|
||||
'<div class="modal confirm-modal" role="alertdialog" aria-modal="true">' +
|
||||
(o.title ? '<h2 class="confirm-title"></h2>' : '') +
|
||||
'<p class="confirm-message"></p>' +
|
||||
'<div class="confirm-buttons">' +
|
||||
'<button type="button" class="btn btn-dark" data-confirm="cancel"></button>' +
|
||||
`<button type="button" class="btn ${o.danger ? 'btn-red' : 'btn-orange'}" data-confirm="ok"></button>` +
|
||||
'<div class="alert" role="alertdialog" aria-modal="true">' +
|
||||
'<div class="alert-body">' +
|
||||
(o.title ? '<h2 class="alert-title"></h2>' : '') +
|
||||
'<p class="alert-message"></p>' +
|
||||
'</div>' +
|
||||
'<div class="alert-buttons">' +
|
||||
'<button type="button" class="alert-btn" data-confirm="cancel"></button>' +
|
||||
`<button type="button" class="alert-btn ${o.danger ? 'destructive' : 'default'}" data-confirm="ok"></button>` +
|
||||
'</div></div>';
|
||||
const dialog = backdrop.firstChild;
|
||||
const msgEl = dialog.querySelector('.confirm-message');
|
||||
const msgEl = dialog.querySelector('.alert-message');
|
||||
msgEl.textContent = o.message || '';
|
||||
msgEl.id = 'confirm-message-' + randomHex(4);
|
||||
dialog.setAttribute('aria-describedby', msgEl.id);
|
||||
if (o.title) {
|
||||
const titleEl = dialog.querySelector('.confirm-title');
|
||||
const titleEl = dialog.querySelector('.alert-title');
|
||||
titleEl.textContent = o.title;
|
||||
titleEl.id = 'confirm-title-' + randomHex(4);
|
||||
dialog.setAttribute('aria-labelledby', titleEl.id);
|
||||
@@ -86,13 +92,24 @@
|
||||
okBtn.textContent = o.ok || 'OK';
|
||||
cancelBtn.textContent = o.cancel || 'キャンセル';
|
||||
|
||||
// 現れるときは少し大きい所から縮み、消えるときはその場で薄くなる
|
||||
let closing = false;
|
||||
const appear = new Fluid.Spring(0, { precision: 0.002 });
|
||||
appear.onUpdate = (v) => {
|
||||
backdrop.style.setProperty('--appear', v.toFixed(3));
|
||||
dialog.style.opacity = v >= 1 ? '' : v.toFixed(3);
|
||||
dialog.style.transform = closing || Fluid.reducedMotion() ? '' : `scale(${(1.12 - 0.12 * v).toFixed(4)})`;
|
||||
};
|
||||
|
||||
const prevFocus = document.activeElement;
|
||||
return new Promise((resolve) => {
|
||||
function close(result) {
|
||||
if (closeConfirm !== close) return;
|
||||
closeConfirm = null;
|
||||
closing = true;
|
||||
document.removeEventListener('keydown', onKey, true);
|
||||
backdrop.remove();
|
||||
backdrop.style.pointerEvents = 'none';
|
||||
appear.to(0, { damping: 1, response: 0.2, allowReduced: true, onRest: () => backdrop.remove() });
|
||||
if (prevFocus && prevFocus.focus && document.contains(prevFocus)) prevFocus.focus();
|
||||
resolve(result);
|
||||
}
|
||||
@@ -109,15 +126,18 @@
|
||||
okBtn.addEventListener('click', () => close(true));
|
||||
cancelBtn.addEventListener('click', () => close(false));
|
||||
// 背景を押したらキャンセル（ダイアログ内から背景へのドラッグは除く）
|
||||
let downOnBackdrop = false;
|
||||
backdrop.addEventListener('pointerdown', (e) => {
|
||||
backdrop.dataset.downOnBackdrop = e.target === backdrop ? '1' : '';
|
||||
downOnBackdrop = e.target === backdrop;
|
||||
});
|
||||
backdrop.addEventListener('click', (e) => {
|
||||
if (e.target === backdrop && backdrop.dataset.downOnBackdrop) close(false);
|
||||
if (e.target === backdrop && downOnBackdrop) close(false);
|
||||
});
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
closeConfirm = close;
|
||||
document.body.appendChild(backdrop);
|
||||
appear.set(0);
|
||||
appear.to(1, { damping: 1, response: 0.3, allowReduced: true });
|
||||
// 危険な操作はうっかり Enter で確定しないようキャンセルにフォーカスする
|
||||
(o.danger ? cancelBtn : okBtn).focus();
|
||||
});
|
||||
@@ -161,24 +181,26 @@
|
||||
}
|
||||
|
||||
function showCopyDialog(text) {
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'modal-backdrop confirm-backdrop';
|
||||
backdrop.innerHTML =
|
||||
'<div class="modal copy-modal" role="dialog" aria-modal="true">' +
|
||||
'<h2 class="confirm-title">コピーしてください</h2>' +
|
||||
const root = document.createElement('div');
|
||||
root.className = 'sheet-backdrop';
|
||||
root.hidden = true;
|
||||
root.innerHTML =
|
||||
'<div class="sheet" role="dialog" aria-modal="true" aria-label="コピーしてください" tabindex="-1">' +
|
||||
'<div class="sheet-header" data-sheet-drag><span class="sheet-grabber" aria-hidden="true"></span>' +
|
||||
'<h2 class="sheet-title">コピーしてください</h2></div>' +
|
||||
'<div class="sheet-scroll">' +
|
||||
'<p class="hint">自動でコピーできませんでした。下の文章を全選択してコピーしてください。</p>' +
|
||||
'<textarea class="copy-text" readonly></textarea>' +
|
||||
'<button type="button" class="btn btn-dark copy-close">閉じる</button>' +
|
||||
'</div>' +
|
||||
'<div class="sheet-footer"><button type="button" class="btn btn-lg btn-block copy-close">閉じる</button></div>' +
|
||||
'</div>';
|
||||
const area = backdrop.querySelector('textarea');
|
||||
const area = root.querySelector('textarea');
|
||||
area.value = text;
|
||||
const close = () => backdrop.remove();
|
||||
backdrop.querySelector('.copy-close').addEventListener('click', close);
|
||||
backdrop.addEventListener('click', (e) => {
|
||||
if (e.target === backdrop) close();
|
||||
});
|
||||
document.body.appendChild(backdrop);
|
||||
area.focus();
|
||||
document.body.appendChild(root);
|
||||
const sheet = Fluid.Sheet(root, { onClosed: () => root.remove() });
|
||||
root.querySelector('.copy-close').addEventListener('click', () => sheet.close());
|
||||
sheet.open();
|
||||
area.focus({ preventScroll: true });
|
||||
area.select();
|
||||
area.scrollTop = 0; // select() で末尾までスクロールするので先頭に戻す
|
||||
}
|
||||
|
||||
+12
-10
@@ -16,8 +16,8 @@
|
||||
const timerInput = $('timer');
|
||||
const intervalInput = $('interval');
|
||||
const scheduleEl = $('schedule');
|
||||
const modeHint = $('mode-hint');
|
||||
const cpuOptions = $('cpu-options');
|
||||
const intervalRow = $('interval-row');
|
||||
const blindHint = $('blind-hint');
|
||||
const errorEl = $('error');
|
||||
const submitBtn = $('submit');
|
||||
@@ -49,7 +49,7 @@
|
||||
const stack = int(stackInput);
|
||||
const bb = int(bbInput);
|
||||
if (blindsTouched && stack > 0 && bb > 0) {
|
||||
blindHint.innerHTML = `開始スタック = ${Math.floor(stack / bb)} BB ・ <a href="#" id="reset-blinds" class="link-gold">おすすめに戻す</a>`;
|
||||
blindHint.innerHTML = `開始スタック = ${Math.floor(stack / bb)} BB ・ <a href="#" id="reset-blinds" class="link">おすすめに戻す</a>`;
|
||||
} else {
|
||||
blindHint.textContent = 'スタックに合わせて自動設定（BB ≒ スタックの1/100）';
|
||||
}
|
||||
@@ -60,6 +60,7 @@
|
||||
const bb = int(bbInput);
|
||||
const on = timerInput.checked;
|
||||
intervalInput.disabled = !on;
|
||||
setOpen(intervalRow, on);
|
||||
scheduleEl.hidden = !on || !(sb > 0 && bb > sb);
|
||||
if (scheduleEl.hidden) return;
|
||||
const mins = int(intervalInput) > 0 ? int(intervalInput) : 0;
|
||||
@@ -68,18 +69,17 @@
|
||||
.join('');
|
||||
}
|
||||
|
||||
const MODE_HINTS = {
|
||||
chips: '実物のカードで遊び、サイトはチップだけを管理。ショーダウンの勝者はホストが選ぶ',
|
||||
friends: '各自のスマホに手札が配られ、勝敗とポットの分配は自動',
|
||||
cpu: 'CPU と対戦（友達も空いている席に参加できる）。カードの配布・勝敗の判定は自動',
|
||||
review: 'あなたと CPU だけで対戦（友達は入れない）。ハンドごとにハンドレンジの色・行動の点数を表示し、対局全体の成績も振り返れる',
|
||||
};
|
||||
const radioValue = (name) => (form.querySelector(`input[name="${name}"]:checked`) || {}).value;
|
||||
|
||||
// 行の開け閉め（高さはばねで変わる）。閉じている間はフォーカスも届かないようにする
|
||||
function setOpen(el, open) {
|
||||
el.classList.toggle('collapsed', !open);
|
||||
el.inert = !open;
|
||||
}
|
||||
|
||||
function updateMode() {
|
||||
const mode = radioValue('mode');
|
||||
modeHint.textContent = MODE_HINTS[mode] || '';
|
||||
cpuOptions.hidden = mode !== 'cpu' && mode !== 'review';
|
||||
setOpen(cpuOptions, mode === 'cpu' || mode === 'review');
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
@@ -110,6 +110,8 @@
|
||||
intervalInput.addEventListener('input', refresh);
|
||||
form.querySelectorAll('input[type="radio"]').forEach((el) => el.addEventListener('change', refresh));
|
||||
$('reroll').addEventListener('click', suggestName);
|
||||
Fluid.Segmented(form.querySelector('.segmented.numbers'));
|
||||
Fluid.navBar($('nav'), $('large-title'));
|
||||
|
||||
function validate() {
|
||||
const name = nameInput.value.trim();
|
||||
|
||||
@@ -0,0 +1,542 @@
|
||||
// 動きと手ざわりの共通部品。
|
||||
// Apple の "Designing Fluid Interfaces"（WWDC 2018）の考え方をウェブで使える形にしたもの:
|
||||
// - Spring: 減衰比（damping）と応答（response, 秒）で決めるばね。途中で目標が変わっても、
|
||||
// 画面上のいまの位置と速度から続くので、動いている最中につかんだり戻したりできる
|
||||
// - VelocityTracker / project / rubberband: 指の速度・勢いから止まる位置の先読み・端での抵抗
|
||||
// - Sheet: 下から出るシート（つまみを下へ払うと閉じる）
|
||||
// - Segmented: つまみが滑るセグメント（つまみをドラッグしても選べる）
|
||||
// - presence / countTo / shake / haptic / navBar: 出し入れ・数字の変化・揺れ・振動・ナビゲーションバー
|
||||
// CSP でインラインスタイルを禁止しているので、動きはすべて CSSOM（el.style）で付ける
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
const reducedMotion = () => motionQuery.matches;
|
||||
const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
|
||||
|
||||
// ---------- ばね ----------
|
||||
const running = new Set();
|
||||
let frame = 0;
|
||||
let lastTime = 0;
|
||||
|
||||
function tick(now) {
|
||||
// タブが裏にあった後などに大きく飛ばないよう、1フレームは最大 50ms として進める
|
||||
const dt = clamp((now - lastTime) / 1000, 0, 0.05);
|
||||
lastTime = now;
|
||||
for (const s of [...running]) s.step(dt);
|
||||
frame = running.size ? requestAnimationFrame(tick) : 0;
|
||||
}
|
||||
|
||||
class Spring {
|
||||
// opts: { damping, response, precision（止まったとみなす差）, onUpdate(value) }
|
||||
constructor(value = 0, opts = {}) {
|
||||
this.value = value;
|
||||
this.target = value;
|
||||
this.velocity = 0;
|
||||
this.precision = opts.precision || 0.01;
|
||||
this.onUpdate = opts.onUpdate || null;
|
||||
this.onRest = null;
|
||||
this.configure(opts.damping ?? 1, opts.response ?? 0.4);
|
||||
}
|
||||
|
||||
// 質量 1 のばねに直す: 硬さ = (2π / response)²、抵抗 = 4π · damping / response
|
||||
// damping 1 = 行き過ぎずに止まる、1 未満 = 少し弾む
|
||||
configure(damping, response) {
|
||||
this.damping = damping;
|
||||
this.response = response;
|
||||
this.stiffness = ((2 * Math.PI) / response) ** 2;
|
||||
this.friction = (4 * Math.PI * damping) / response;
|
||||
}
|
||||
|
||||
get animating() {
|
||||
return running.has(this);
|
||||
}
|
||||
|
||||
// 目標へ動かす。いまの値と速度から続ける（velocity を渡すと指の速さを引き継ぐ）。
|
||||
// 視差効果を減らす設定のときはすぐに目標の値にする（allowReduced: 透明度など、そのままでよい動き）
|
||||
to(target, opts = {}) {
|
||||
if (opts.damping != null || opts.response != null) {
|
||||
this.configure(opts.damping ?? this.damping, opts.response ?? this.response);
|
||||
}
|
||||
if (opts.velocity != null) this.velocity = opts.velocity;
|
||||
this.target = target;
|
||||
this.onRest = opts.onRest || null;
|
||||
if (reducedMotion() && !opts.allowReduced) {
|
||||
this.set(target);
|
||||
this.rest();
|
||||
return this;
|
||||
}
|
||||
running.add(this);
|
||||
if (!frame) {
|
||||
lastTime = performance.now();
|
||||
frame = requestAnimationFrame(tick);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
// すぐにその値にする（ドラッグ中に指へ 1:1 で付いていくときもこれ）
|
||||
set(value) {
|
||||
running.delete(this);
|
||||
this.value = this.target = value;
|
||||
this.velocity = 0;
|
||||
if (this.onUpdate) this.onUpdate(value);
|
||||
return this;
|
||||
}
|
||||
|
||||
// 画面上のいまの位置で止める（動いている最中につかんだとき）
|
||||
stop() {
|
||||
running.delete(this);
|
||||
this.target = this.value;
|
||||
this.velocity = 0;
|
||||
this.onRest = null;
|
||||
return this;
|
||||
}
|
||||
|
||||
step(dt) {
|
||||
// 硬いばねでも発散しないよう 1/240 秒刻みで積分する
|
||||
const n = Math.max(1, Math.ceil(dt * 240));
|
||||
const h = dt / n;
|
||||
for (let i = 0; i < n; i++) {
|
||||
const force = -this.stiffness * (this.value - this.target) - this.friction * this.velocity;
|
||||
this.velocity += force * h;
|
||||
this.value += this.velocity * h;
|
||||
}
|
||||
const settled =
|
||||
Math.abs(this.value - this.target) < this.precision && Math.abs(this.velocity) < this.precision * 10;
|
||||
if (settled) {
|
||||
this.value = this.target;
|
||||
this.velocity = 0;
|
||||
running.delete(this);
|
||||
}
|
||||
if (this.onUpdate) this.onUpdate(this.value);
|
||||
if (settled) this.rest();
|
||||
}
|
||||
|
||||
rest() {
|
||||
const fn = this.onRest;
|
||||
this.onRest = null;
|
||||
if (fn) fn();
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 指の動き ----------
|
||||
// 直近 100ms の位置から速度（px/秒）を求める。離す直前に指を止めていれば速度は 0 になる
|
||||
class VelocityTracker {
|
||||
constructor() {
|
||||
this.samples = [];
|
||||
}
|
||||
reset() {
|
||||
this.samples.length = 0;
|
||||
}
|
||||
add(x, y, t = performance.now()) {
|
||||
this.samples.push({ x, y, t });
|
||||
while (this.samples.length > 2 && t - this.samples[0].t > 100) this.samples.shift();
|
||||
}
|
||||
velocity() {
|
||||
const s = this.samples;
|
||||
if (s.length < 2) return { x: 0, y: 0 };
|
||||
const a = s[0];
|
||||
const b = s[s.length - 1];
|
||||
const dt = (b.t - a.t) / 1000;
|
||||
return dt > 0 ? { x: (b.x - a.x) / dt, y: (b.y - a.y) / dt } : { x: 0, y: 0 };
|
||||
}
|
||||
}
|
||||
|
||||
// 勢いで進む距離（スクロールの減速と同じ指数関数の形）。0.998 = 普通、0.99 = 早く止まる
|
||||
function project(velocity, decelerationRate = 0.998) {
|
||||
return ((velocity / 1000) * decelerationRate) / (1 - decelerationRate);
|
||||
}
|
||||
|
||||
// 端を越えた分は、越えるほど付いてこなくなる（いきなり止めない）
|
||||
function rubberband(overshoot, dimension, constant = 0.55) {
|
||||
return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
|
||||
}
|
||||
|
||||
const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), textarea, select, [tabindex]:not([tabindex="-1"])';
|
||||
|
||||
function trapFocus(box, e) {
|
||||
const list = [...box.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null);
|
||||
if (!list.length) return;
|
||||
const first = list[0];
|
||||
const last = list[list.length - 1];
|
||||
if (!box.contains(document.activeElement)) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
} else if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- シート ----------
|
||||
// root は背景（.sheet-backdrop）、中に .sheet。
|
||||
// [data-sheet-drag]（つまみ・見出し）をつかむと指に 1:1 で付いてくる。離したときは速度から止まる位置を
|
||||
// 先読みし、シートの半分より下なら閉じる（閉じる途中でつかみ直すこともできる）。
|
||||
// opts: { dismissible（false なら閉じられない）, focus（開いたときにフォーカスする要素のセレクタ）, onClose, onClosed }
|
||||
function Sheet(root, opts = {}) {
|
||||
const sheet = root.querySelector('.sheet');
|
||||
const dismissible = opts.dismissible !== false;
|
||||
const y = new Spring(0, { precision: 0.5 });
|
||||
const tracker = new VelocityTracker();
|
||||
let height = 0;
|
||||
let isOpen = false;
|
||||
let prevFocus = null;
|
||||
let drag = null;
|
||||
let downOnBackdrop = false;
|
||||
|
||||
const measure = () => {
|
||||
height = sheet.offsetHeight + 24; // 影まで画面の外へ出す
|
||||
};
|
||||
|
||||
y.onUpdate = (v) => {
|
||||
sheet.style.transform = v ? `translate3d(0, ${v.toFixed(2)}px, 0)` : '';
|
||||
root.style.setProperty('--sheet-progress', height ? clamp(1 - v / height, 0, 1).toFixed(3) : '1');
|
||||
};
|
||||
|
||||
function onKey(e) {
|
||||
if (e.key === 'Escape' && dismissible) {
|
||||
e.preventDefault();
|
||||
close();
|
||||
} else if (e.key === 'Tab') {
|
||||
trapFocus(sheet, e);
|
||||
}
|
||||
}
|
||||
|
||||
function open() {
|
||||
if (isOpen) return;
|
||||
isOpen = true;
|
||||
if (root.hidden) {
|
||||
root.hidden = false;
|
||||
measure();
|
||||
y.set(height);
|
||||
}
|
||||
y.to(0, { damping: 1, response: 0.38 });
|
||||
prevFocus = document.activeElement;
|
||||
document.addEventListener('keydown', onKey);
|
||||
const target = opts.focus ? sheet.querySelector(opts.focus) : null;
|
||||
(target || sheet).focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
function close(velocity) {
|
||||
if (!isOpen) return;
|
||||
isOpen = false;
|
||||
document.removeEventListener('keydown', onKey);
|
||||
measure();
|
||||
y.to(height, {
|
||||
damping: 1,
|
||||
response: 0.3,
|
||||
velocity: typeof velocity === 'number' ? velocity : undefined,
|
||||
onRest: () => {
|
||||
if (isOpen) return;
|
||||
root.hidden = true;
|
||||
if (opts.onClosed) opts.onClosed();
|
||||
},
|
||||
});
|
||||
if (prevFocus && prevFocus.focus && document.contains(prevFocus)) prevFocus.focus({ preventScroll: true });
|
||||
if (opts.onClose) opts.onClose();
|
||||
}
|
||||
|
||||
root.addEventListener('pointerdown', (e) => {
|
||||
downOnBackdrop = e.target === root;
|
||||
});
|
||||
root.addEventListener('click', (e) => {
|
||||
if (dismissible && e.target === root && downOnBackdrop) close();
|
||||
});
|
||||
|
||||
sheet.addEventListener('pointerdown', (e) => {
|
||||
if (!dismissible || root.hidden || (e.pointerType === 'mouse' && e.button !== 0)) return;
|
||||
if (!e.target.closest('[data-sheet-drag]')) return;
|
||||
drag = { id: e.pointerId, x: e.clientX, y: e.clientY, origin: 0, active: false };
|
||||
tracker.reset();
|
||||
tracker.add(e.clientX, e.clientY, e.timeStamp);
|
||||
});
|
||||
sheet.addEventListener('pointermove', (e) => {
|
||||
if (!drag || e.pointerId !== drag.id) return;
|
||||
tracker.add(e.clientX, e.clientY, e.timeStamp);
|
||||
if (!drag.active) {
|
||||
const dx = e.clientX - drag.x;
|
||||
const dy = e.clientY - drag.y;
|
||||
if (Math.hypot(dx, dy) < 8) return;
|
||||
if (Math.abs(dx) > Math.abs(dy)) {
|
||||
drag = null;
|
||||
return;
|
||||
}
|
||||
// ここで初めてつかむ。動いている最中なら画面上のいまの位置から
|
||||
drag.active = true;
|
||||
drag.y = e.clientY;
|
||||
y.stop();
|
||||
drag.origin = y.value;
|
||||
measure();
|
||||
sheet.setPointerCapture(e.pointerId);
|
||||
sheet.classList.add('dragging');
|
||||
if (!isOpen) {
|
||||
isOpen = true;
|
||||
document.addEventListener('keydown', onKey);
|
||||
}
|
||||
}
|
||||
const raw = drag.origin + (e.clientY - drag.y);
|
||||
y.set(raw < 0 ? -rubberband(-raw, height) : raw);
|
||||
});
|
||||
const end = (e) => {
|
||||
if (!drag || e.pointerId !== drag.id) return;
|
||||
const wasActive = drag.active;
|
||||
drag = null;
|
||||
sheet.classList.remove('dragging');
|
||||
if (!wasActive) return;
|
||||
tracker.add(e.clientX, e.clientY, e.timeStamp);
|
||||
const v = tracker.velocity().y;
|
||||
if (e.type !== 'pointercancel' && y.value + project(v) > height * 0.5) close(v);
|
||||
// 払った勢いがあるので少しだけ弾ませて戻す
|
||||
else y.to(0, { damping: 0.8, response: 0.3, velocity: v });
|
||||
};
|
||||
sheet.addEventListener('pointerup', end);
|
||||
sheet.addEventListener('pointercancel', end);
|
||||
|
||||
return {
|
||||
open,
|
||||
close,
|
||||
get isOpen() {
|
||||
return isOpen;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// ---------- セグメント ----------
|
||||
// container の子（label > input[type=radio] か、.active の付いた button）を選ぶつまみを滑らせる。
|
||||
// 選ばれている所を押すとつまみが少し縮み、そのまま横へドラッグすると指に付いてくる。
|
||||
// 離すと速度から止まる位置を先読みして、一番近い選択肢を選ぶ
|
||||
function Segmented(container) {
|
||||
const thumb = document.createElement('span');
|
||||
thumb.className = 'segmented-thumb';
|
||||
thumb.setAttribute('aria-hidden', 'true');
|
||||
container.prepend(thumb);
|
||||
container.classList.add('has-thumb');
|
||||
|
||||
const x = new Spring(0, { precision: 0.1 });
|
||||
const w = new Spring(0, { precision: 0.1 });
|
||||
const press = new Spring(1, { precision: 0.001 });
|
||||
const tracker = new VelocityTracker();
|
||||
let placed = false;
|
||||
let drag = null;
|
||||
let suppressClick = false;
|
||||
|
||||
const paint = () => {
|
||||
thumb.style.width = `${w.value.toFixed(2)}px`;
|
||||
thumb.style.transform = `translate3d(${x.value.toFixed(2)}px, 0, 0) scale(${press.value.toFixed(4)})`;
|
||||
};
|
||||
x.onUpdate = w.onUpdate = press.onUpdate = paint;
|
||||
|
||||
const items = () => [...container.children].filter((el) => el !== thumb && !el.hidden);
|
||||
const isSelected = (el) =>
|
||||
el.matches('label') ? Boolean(el.querySelector('input:checked')) : el.classList.contains('active');
|
||||
const center = (el) => el.offsetLeft + el.offsetWidth / 2;
|
||||
|
||||
function sync(animate = true) {
|
||||
if (drag && drag.active) return;
|
||||
const el = items().find(isSelected);
|
||||
thumb.hidden = !el;
|
||||
if (!el || !el.offsetWidth) return; // 非表示の間は測れない（表示されたら ResizeObserver で合わせる）
|
||||
if (animate && placed) {
|
||||
if (x.target !== el.offsetLeft) x.to(el.offsetLeft, { damping: 1, response: 0.32 });
|
||||
if (w.target !== el.offsetWidth) w.to(el.offsetWidth, { damping: 1, response: 0.32 });
|
||||
} else {
|
||||
x.set(el.offsetLeft);
|
||||
w.set(el.offsetWidth);
|
||||
}
|
||||
placed = true;
|
||||
}
|
||||
|
||||
function select(el) {
|
||||
if (isSelected(el)) return;
|
||||
if (el.matches('label')) {
|
||||
const input = el.querySelector('input');
|
||||
input.checked = true;
|
||||
input.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
} else {
|
||||
el.click();
|
||||
}
|
||||
}
|
||||
|
||||
container.addEventListener('pointerdown', (e) => {
|
||||
if (e.pointerType === 'mouse' && e.button !== 0) return;
|
||||
const el = items().find((i) => i.contains(e.target));
|
||||
if (!el || !isSelected(el)) return;
|
||||
drag = { id: e.pointerId, x: e.clientX, origin: 0, active: false };
|
||||
tracker.reset();
|
||||
tracker.add(e.clientX, 0, e.timeStamp);
|
||||
press.to(0.95, { damping: 1, response: 0.2 });
|
||||
});
|
||||
container.addEventListener('pointermove', (e) => {
|
||||
if (!drag || e.pointerId !== drag.id) return;
|
||||
tracker.add(e.clientX, 0, e.timeStamp);
|
||||
if (!drag.active) {
|
||||
if (Math.abs(e.clientX - drag.x) < 6) return;
|
||||
drag.active = true;
|
||||
drag.x = e.clientX;
|
||||
x.stop();
|
||||
drag.origin = x.value;
|
||||
container.setPointerCapture(e.pointerId);
|
||||
}
|
||||
const list = items();
|
||||
const last = list[list.length - 1];
|
||||
const min = list[0].offsetLeft;
|
||||
const max = last.offsetLeft + last.offsetWidth - w.value;
|
||||
let raw = drag.origin + (e.clientX - drag.x);
|
||||
if (raw < min) raw = min - rubberband(min - raw, container.offsetWidth);
|
||||
else if (raw > max) raw = max + rubberband(raw - max, container.offsetWidth);
|
||||
x.set(raw);
|
||||
});
|
||||
const end = (e) => {
|
||||
if (!drag || e.pointerId !== drag.id) return;
|
||||
const wasActive = drag.active;
|
||||
drag = null;
|
||||
press.to(1, { damping: 1, response: 0.25 });
|
||||
if (!wasActive) return;
|
||||
suppressClick = true;
|
||||
setTimeout(() => {
|
||||
suppressClick = false;
|
||||
}, 0);
|
||||
tracker.add(e.clientX, 0, e.timeStamp);
|
||||
const v = tracker.velocity().x;
|
||||
const aim = x.value + w.value / 2 + project(v, 0.99);
|
||||
const best = items().reduce((a, b) => (Math.abs(center(b) - aim) < Math.abs(center(a) - aim) ? b : a));
|
||||
x.to(best.offsetLeft, { damping: 0.8, response: 0.3, velocity: v });
|
||||
w.to(best.offsetWidth, { damping: 1, response: 0.3 });
|
||||
select(best);
|
||||
};
|
||||
container.addEventListener('pointerup', end);
|
||||
container.addEventListener('pointercancel', end);
|
||||
// ドラッグで選んだ後のクリックで、指を離した所の選択肢まで選ばれないように
|
||||
container.addEventListener(
|
||||
'click',
|
||||
(e) => {
|
||||
if (!suppressClick) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
},
|
||||
true
|
||||
);
|
||||
container.addEventListener('change', () => sync());
|
||||
// ボタンの .active はクリックの処理で付け替わるので、描画の直前に合わせる
|
||||
container.addEventListener('click', () => requestAnimationFrame(() => sync()));
|
||||
if ('ResizeObserver' in window) new ResizeObserver(() => sync(false)).observe(container);
|
||||
sync(false);
|
||||
|
||||
return { update: sync };
|
||||
}
|
||||
|
||||
// ---------- 出し入れ ----------
|
||||
// 要素を少し小さく透明な所からばねで出し、消すときは同じ道を戻る（hidden は消え終わってから付ける）。
|
||||
// from: { scale, y }。視差効果を減らす設定では透明度だけ変える
|
||||
function presence(el, show, from = {}) {
|
||||
let p = el._presence;
|
||||
if (!p) {
|
||||
p = el._presence = new Spring(show ? 1 : 0, { precision: 0.002 });
|
||||
el.hidden = !show;
|
||||
}
|
||||
const scale = from.scale ?? 0.96;
|
||||
const dy = from.y ?? 8;
|
||||
p.onUpdate = (v) => {
|
||||
el.style.opacity = v >= 1 ? '' : v.toFixed(3);
|
||||
el.style.transform =
|
||||
v >= 1 || reducedMotion()
|
||||
? ''
|
||||
: `translate3d(0, ${((1 - v) * dy).toFixed(2)}px, 0) scale(${(scale + (1 - scale) * v).toFixed(4)})`;
|
||||
};
|
||||
if (show) {
|
||||
if (el.hidden) {
|
||||
el.hidden = false;
|
||||
p.set(0);
|
||||
}
|
||||
if (p.target !== 1) p.to(1, { damping: 1, response: 0.32, allowReduced: true });
|
||||
} else if (!el.hidden && p.target !== 0) {
|
||||
p.to(0, {
|
||||
damping: 1,
|
||||
response: 0.22,
|
||||
allowReduced: true,
|
||||
onRest: () => {
|
||||
el.hidden = true;
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 数字をばねで変える（ポット・スタックなど）
|
||||
function countTo(el, value, format) {
|
||||
const show = (v) => {
|
||||
el.textContent = format(Math.round(v));
|
||||
};
|
||||
let s = el._count;
|
||||
if (!s) {
|
||||
s = el._count = new Spring(value, { precision: 0.5 });
|
||||
s.onUpdate = show;
|
||||
show(value);
|
||||
return;
|
||||
}
|
||||
s.onUpdate = show;
|
||||
if (s.target !== value) s.to(value, { damping: 1, response: 0.5 });
|
||||
}
|
||||
|
||||
// 横に揺らす（鍵の入力ミスなど）。勢いを与えて、減衰するばねに任せる
|
||||
function shake(el) {
|
||||
if (reducedMotion()) return;
|
||||
let s = el._shake;
|
||||
if (!s) {
|
||||
s = el._shake = new Spring(0, { precision: 0.05 });
|
||||
s.onUpdate = (v) => {
|
||||
el.style.transform = v ? `translate3d(${v.toFixed(2)}px, 0, 0)` : '';
|
||||
};
|
||||
}
|
||||
s.to(0, { damping: 0.22, response: 0.26, velocity: -320 });
|
||||
}
|
||||
|
||||
// 振動（対応している端末だけ。画面に触れる前は振動できない）
|
||||
function haptic(pattern = 10) {
|
||||
try {
|
||||
const touched = !navigator.userActivation || navigator.userActivation.hasBeenActive;
|
||||
if (navigator.vibrate && touched) navigator.vibrate(pattern);
|
||||
} catch {
|
||||
/* 振動できない環境 */
|
||||
}
|
||||
}
|
||||
|
||||
// ナビゲーションバー: 中身が下に潜り込んだら半透明の素材と境目のぼかしを出し、
|
||||
// 大きな見出しが隠れたらバーの中に小さな見出しを出す
|
||||
function navBar(nav, largeTitle) {
|
||||
if (!nav) return;
|
||||
const update = () => nav.classList.toggle('scrolled', window.scrollY > 2);
|
||||
update();
|
||||
window.addEventListener('scroll', update, { passive: true });
|
||||
const inline = nav.querySelector('.nav-title');
|
||||
if (!largeTitle || !inline) return;
|
||||
const mirror = () => {
|
||||
inline.textContent = largeTitle.textContent;
|
||||
};
|
||||
mirror();
|
||||
new MutationObserver(mirror).observe(largeTitle, { childList: true, characterData: true, subtree: true });
|
||||
if ('IntersectionObserver' in window) {
|
||||
new IntersectionObserver(([entry]) => nav.classList.toggle('show-title', !entry.isIntersecting), {
|
||||
rootMargin: `-${nav.offsetHeight}px 0px 0px 0px`,
|
||||
}).observe(largeTitle);
|
||||
}
|
||||
}
|
||||
|
||||
window.Fluid = {
|
||||
Spring,
|
||||
VelocityTracker,
|
||||
project,
|
||||
rubberband,
|
||||
clamp,
|
||||
reducedMotion,
|
||||
Sheet,
|
||||
Segmented,
|
||||
presence,
|
||||
countTo,
|
||||
shake,
|
||||
haptic,
|
||||
navBar,
|
||||
};
|
||||
})();
|
||||
+12
-3
@@ -16,12 +16,18 @@
|
||||
|
||||
const value = () => inputs.map((i) => i.value).join('');
|
||||
|
||||
// 数字が入った枠は小さく弾む（空に戻ったら印を外す）
|
||||
function markFilled() {
|
||||
for (const i of inputs) i.classList.toggle('filled', Boolean(i.value));
|
||||
}
|
||||
|
||||
function fill(digits, from) {
|
||||
let i = from;
|
||||
for (const d of digits) {
|
||||
if (i >= inputs.length) break;
|
||||
inputs[i++].value = d;
|
||||
}
|
||||
markFilled();
|
||||
inputs[Math.min(i, inputs.length - 1)].focus();
|
||||
if (value().length === 6) submit();
|
||||
}
|
||||
@@ -31,11 +37,13 @@
|
||||
const digits = input.value.replace(/\D/g, '');
|
||||
input.value = '';
|
||||
if (digits) fill(digits, idx);
|
||||
else markFilled();
|
||||
errorEl.textContent = '';
|
||||
});
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Backspace' && !input.value && idx > 0) {
|
||||
inputs[idx - 1].value = '';
|
||||
markFilled();
|
||||
inputs[idx - 1].focus();
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'ArrowLeft' && idx > 0) {
|
||||
@@ -68,10 +76,11 @@
|
||||
location.replace(App.safeNext(next));
|
||||
} catch (err) {
|
||||
errorEl.textContent = err.message;
|
||||
box.classList.remove('shake');
|
||||
void box.offsetWidth;
|
||||
box.classList.add('shake');
|
||||
// 揺れと振動は同じ瞬間に（どちらも「違う」の合図）
|
||||
Fluid.shake(box);
|
||||
Fluid.haptic([18, 50, 18]);
|
||||
inputs.forEach((i) => { i.value = ''; });
|
||||
markFilled();
|
||||
inputs[0].focus();
|
||||
} finally {
|
||||
busy = false;
|
||||
|
||||
+185
-34
@@ -6,6 +6,9 @@
|
||||
const nameError = document.getElementById('name-error');
|
||||
const listEl = document.getElementById('list');
|
||||
const countEl = document.getElementById('count');
|
||||
const footerEl = document.getElementById('list-footer');
|
||||
|
||||
Fluid.navBar(document.getElementById('nav'), document.getElementById('large-title'));
|
||||
|
||||
nameInput.value = Store.name;
|
||||
nameInput.addEventListener('input', () => {
|
||||
@@ -25,13 +28,12 @@
|
||||
let admin = false;
|
||||
let tables = null;
|
||||
|
||||
// 管理者だけにハンドレンジ学習・CPU戦のレビューへのリンクとテーブルの削除ボタンを出す
|
||||
// 管理者だけにハンドレンジ学習・CPU戦のレビューへのリンクとテーブルの削除（左へスワイプ）を出す
|
||||
// （ページ・API 自体もサーバ側で管理者以外は 404）
|
||||
App.api('GET', '/api/me')
|
||||
.then((me) => {
|
||||
admin = Boolean(me.admin);
|
||||
document.getElementById('range-link').hidden = !admin;
|
||||
document.getElementById('review-link').hidden = !admin;
|
||||
document.getElementById('admin-group').hidden = !admin;
|
||||
if (tables) render(tables);
|
||||
})
|
||||
.catch(() => {});
|
||||
@@ -58,56 +60,205 @@
|
||||
ok: '削除する',
|
||||
danger: true,
|
||||
});
|
||||
if (!ok || !document.contains(btn)) return;
|
||||
const row = btn.closest('.swipe-row');
|
||||
if (!ok || !document.contains(btn)) {
|
||||
if (row && row.swipe) row.swipe.close();
|
||||
return;
|
||||
}
|
||||
btn.disabled = true;
|
||||
App.api('DELETE', '/api/tables/' + encodeURIComponent(id))
|
||||
.then(() => App.toast('テーブルを削除しました'))
|
||||
.catch((err) => {
|
||||
btn.disabled = false;
|
||||
if (row && row.swipe) row.swipe.close();
|
||||
App.toast(err.message);
|
||||
});
|
||||
}
|
||||
|
||||
const MODE_LABEL = { chips: '💰 キャッシュオンリー', friends: '🃏 友人戦', cpu: '🤖 CPU戦', review: '📝 レビュー付きCPU戦' };
|
||||
const ICON = {
|
||||
chips:
|
||||
'<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="12" cy="7" rx="7" ry="3"/><path d="M5 7v5c0 1.7 3.1 3 7 3s7-1.3 7-3V7"/><path d="M5 12v5c0 1.7 3.1 3 7 3s7-1.3 7-3v-5"/></svg>',
|
||||
cards:
|
||||
'<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 5.2l-3.9.7a2 2 0 0 0-1.6 2.3l1.8 10a2 2 0 0 0 2.3 1.6l1.4-.3"/><rect x="10.5" y="3.5" width="10" height="15" rx="2"/></svg>',
|
||||
cpu:
|
||||
'<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2.5"/><rect x="9.5" y="9.5" width="5" height="5" rx="1"/><path d="M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3"/></svg>',
|
||||
review:
|
||||
'<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>',
|
||||
person: '<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4.5 20a7.5 7.5 0 0 1 15 0"/></svg>',
|
||||
clock: '<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>',
|
||||
trash:
|
||||
'<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M4.5 7h15M9.5 7V4.5h5V7"/><path d="M6.5 7l1 12a2 2 0 0 0 2 1.8h5a2 2 0 0 0 2-1.8l1-12M10.5 11v6M13.5 11v6"/></svg>',
|
||||
};
|
||||
|
||||
function phaseBadge(t) {
|
||||
if (t.paused) return '<span class="badge paused">PAUSED</span>';
|
||||
if (t.phase === 'WAITING') return '<span class="badge">WAITING</span>';
|
||||
return '<span class="badge live">PLAYING</span>';
|
||||
const MODE = {
|
||||
chips: { label: 'キャッシュオンリー', icon: 'chips', tone: 'green' },
|
||||
friends: { label: '友人戦', icon: 'cards', tone: 'blue' },
|
||||
cpu: { label: 'CPU戦', icon: 'cpu', tone: 'indigo' },
|
||||
review: { label: 'レビュー付きCPU戦', icon: 'review', tone: 'orange' },
|
||||
};
|
||||
|
||||
function statusHtml(t) {
|
||||
if (t.paused) return '<span class="status paused">一時停止中</span>';
|
||||
if (t.phase === 'WAITING') return '<span class="status waiting">待機中</span>';
|
||||
return '<span class="status live">プレイ中</span>';
|
||||
}
|
||||
|
||||
function rowHtml(t) {
|
||||
const m = MODE[t.mode] || MODE.chips;
|
||||
const full = t.playerCount >= t.maxSeats;
|
||||
const timer = t.timerEnabled ? `${t.intervalMin}分` : 'なし';
|
||||
return `
|
||||
<span class="cell-icon tone-${m.tone}">${ICON[m.icon]}</span>
|
||||
<span class="table-row-main">
|
||||
<span class="name">${esc(t.name)}</span>
|
||||
<span class="table-row-meta">${statusHtml(t)}<span>${m.label}</span></span>
|
||||
<span class="table-row-meta">
|
||||
<span class="meta-item">${ICON.person}${t.playerCount}/${t.maxSeats}</span>
|
||||
<span>Lv.${t.level} ${chips(t.smallBlind)}/${chips(t.bigBlind)}</span>
|
||||
<span>開始 ${chips(t.startingStack)}</span>
|
||||
<span class="meta-item">${ICON.clock}${timer}</span>
|
||||
</span>
|
||||
</span>
|
||||
<button type="button" class="btn-get" data-join="${esc(t.id)}" ${full ? 'title="満席（観戦のみ）"' : ''}>${full ? '観戦' : '参加'}</button>`;
|
||||
}
|
||||
|
||||
// ---------- 左へスワイプして削除（管理者） ----------
|
||||
// 行は指に 1:1 で付いてきて、削除ボタンの幅を越えるとゴムのように抵抗する。
|
||||
// 離したときは速度から止まる位置を先読みし、半分を越えていれば開いたまま止める
|
||||
const ACTION_WIDTH = 88;
|
||||
let openRow = null;
|
||||
|
||||
function attachSwipe(row) {
|
||||
const content = row.querySelector('.table-row');
|
||||
const action = row.querySelector('.swipe-action');
|
||||
const x = new Fluid.Spring(0, { precision: 0.2 });
|
||||
const tracker = new Fluid.VelocityTracker();
|
||||
let drag = null;
|
||||
let suppressClick = false;
|
||||
|
||||
x.onUpdate = (v) => {
|
||||
content.style.transform = v ? `translate3d(${v.toFixed(2)}px, 0, 0)` : '';
|
||||
row.style.setProperty('--reveal', Fluid.clamp(-v / ACTION_WIDTH, 0, 1).toFixed(3));
|
||||
};
|
||||
const settle = (open, velocity) => {
|
||||
x.to(open ? -ACTION_WIDTH : 0, { damping: velocity ? 0.8 : 1, response: 0.3, velocity });
|
||||
if (open) openRow = row;
|
||||
else if (openRow === row) openRow = null;
|
||||
};
|
||||
row.swipe = { close: () => settle(false) };
|
||||
|
||||
content.addEventListener('pointerdown', (e) => {
|
||||
if (!admin || (e.pointerType === 'mouse' && e.button !== 0)) return;
|
||||
drag = { id: e.pointerId, x: e.clientX, y: e.clientY, origin: 0, active: false };
|
||||
tracker.reset();
|
||||
tracker.add(e.clientX, e.clientY, e.timeStamp);
|
||||
});
|
||||
content.addEventListener('pointermove', (e) => {
|
||||
if (!drag || e.pointerId !== drag.id) return;
|
||||
tracker.add(e.clientX, e.clientY, e.timeStamp);
|
||||
if (!drag.active) {
|
||||
const dx = e.clientX - drag.x;
|
||||
const dy = e.clientY - drag.y;
|
||||
if (Math.hypot(dx, dy) < 10) return;
|
||||
// 縦の動きはページのスクロールに任せる
|
||||
if (Math.abs(dy) > Math.abs(dx)) {
|
||||
drag = null;
|
||||
return;
|
||||
}
|
||||
drag.active = true;
|
||||
drag.x = e.clientX;
|
||||
x.stop();
|
||||
drag.origin = x.value;
|
||||
content.setPointerCapture(e.pointerId);
|
||||
if (openRow && openRow !== row) openRow.swipe.close();
|
||||
}
|
||||
let raw = drag.origin + (e.clientX - drag.x);
|
||||
if (raw > 0) raw = Fluid.rubberband(raw, row.offsetWidth);
|
||||
else if (raw < -ACTION_WIDTH) raw = -ACTION_WIDTH - Fluid.rubberband(-ACTION_WIDTH - raw, row.offsetWidth);
|
||||
x.set(raw);
|
||||
});
|
||||
const end = (e) => {
|
||||
if (!drag || e.pointerId !== drag.id) return;
|
||||
const wasActive = drag.active;
|
||||
drag = null;
|
||||
if (!wasActive) return;
|
||||
suppressClick = true;
|
||||
setTimeout(() => {
|
||||
suppressClick = false;
|
||||
}, 0);
|
||||
tracker.add(e.clientX, e.clientY, e.timeStamp);
|
||||
const v = tracker.velocity().x;
|
||||
settle(x.value + Fluid.project(v) < -ACTION_WIDTH / 2, v);
|
||||
};
|
||||
content.addEventListener('pointerup', end);
|
||||
content.addEventListener('pointercancel', end);
|
||||
content.addEventListener(
|
||||
'click',
|
||||
(e) => {
|
||||
// スワイプの後のクリックや、開いている行のタップ（参加ボタン以外）は「閉じる」だけにする
|
||||
const tapOnOpenRow = openRow === row && !e.target.closest('[data-join]');
|
||||
if (!suppressClick && !tapOnOpenRow) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!suppressClick) row.swipe.close();
|
||||
},
|
||||
true
|
||||
);
|
||||
// キーボードでは削除ボタンにフォーカスが来たら開く
|
||||
action.addEventListener('focus', () => settle(true));
|
||||
action.addEventListener('blur', () => settle(false));
|
||||
}
|
||||
|
||||
document.addEventListener('pointerdown', (e) => {
|
||||
if (openRow && !openRow.contains(e.target)) openRow.swipe.close();
|
||||
});
|
||||
|
||||
// ---------- 一覧（行は使い回す。スワイプの途中で作り直さない） ----------
|
||||
const rows = new Map();
|
||||
|
||||
function rowEl(id) {
|
||||
let row = rows.get(id);
|
||||
if (row) return row;
|
||||
row = document.createElement('div');
|
||||
row.className = 'swipe-row';
|
||||
row.innerHTML = `<button type="button" class="swipe-action" data-delete="${esc(id)}">${ICON.trash}<span>削除</span></button><div class="table-row"></div>`;
|
||||
attachSwipe(row);
|
||||
rows.set(id, row);
|
||||
return row;
|
||||
}
|
||||
|
||||
function render(list) {
|
||||
tables = list;
|
||||
countEl.textContent = tables.length ? `${tables.length} テーブル` : '';
|
||||
footerEl.hidden = !admin || !tables.length;
|
||||
if (!tables.length) {
|
||||
rows.clear();
|
||||
openRow = null;
|
||||
listEl.innerHTML = '<div class="empty">開催中のテーブルはありません。<br>テーブルを作成して友達を招待しよう。</div>';
|
||||
return;
|
||||
}
|
||||
listEl.innerHTML = tables
|
||||
.map((t) => {
|
||||
const full = t.playerCount >= t.maxSeats;
|
||||
const timer = t.timerEnabled ? `⏱ ${t.intervalMin}分` : '⏱ なし';
|
||||
return `
|
||||
<div class="table-item">
|
||||
<div class="info">
|
||||
<div class="name">${esc(t.name)}${phaseBadge(t)}</div>
|
||||
<div class="meta">
|
||||
<span>👤 <b>${t.playerCount}/${t.maxSeats}</b></span>
|
||||
<span>開始 <b>${chips(t.startingStack)}</b></span>
|
||||
<span class="gold">Lv.${t.level} <b class="gold">${chips(t.smallBlind)}/${chips(t.bigBlind)}</b></span>
|
||||
<span>${timer}</span>
|
||||
<span>${MODE_LABEL[t.mode] || ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
${admin ? `<button class="btn btn-red btn-sm" data-delete="${esc(t.id)}" title="テーブルを削除">削除</button>` : ''}
|
||||
<button class="btn btn-blue btn-sm" data-join="${esc(t.id)}" ${full ? 'title="満席（観戦のみ）"' : ''}>
|
||||
${full ? '観戦' : '参加'}
|
||||
</button>
|
||||
</div>
|
||||
</div>`;
|
||||
})
|
||||
.join('');
|
||||
const empty = listEl.querySelector('.empty');
|
||||
if (empty) empty.remove();
|
||||
const ids = new Set(tables.map((t) => t.id));
|
||||
for (const [id, row] of rows) {
|
||||
if (ids.has(id)) continue;
|
||||
if (openRow === row) openRow = null;
|
||||
row.remove();
|
||||
rows.delete(id);
|
||||
}
|
||||
tables.forEach((t, i) => {
|
||||
const row = rowEl(t.id);
|
||||
const html = rowHtml(t);
|
||||
const content = row.querySelector('.table-row');
|
||||
if (content.html !== html) {
|
||||
content.html = html;
|
||||
content.innerHTML = html;
|
||||
}
|
||||
const action = row.querySelector('.swipe-action');
|
||||
action.hidden = !admin;
|
||||
action.tabIndex = admin ? 0 : -1;
|
||||
if (listEl.children[i] !== row) listEl.insertBefore(row, listEl.children[i] || null);
|
||||
});
|
||||
}
|
||||
|
||||
const socket = App.connectSocket();
|
||||
|
||||
+2748
-703
File diff suppressed because it is too large.
Load diff
+357
-150
@@ -1,5 +1,6 @@
|
||||
// プレイ画面: サーバから受け取ったテーブル状態を描画し、アクションを送る
|
||||
// カード機能がオフのテーブルではカードは実物で配るので、ここで扱うのはチップのやり取りだけ
|
||||
// 席・場札・手札の要素は使い回し、変わった所だけ書き換える（配る・めくるなどの動きを途中で作り直さない）
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
@@ -7,10 +8,9 @@
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const tableId = decodeURIComponent(location.pathname.split('/').pop());
|
||||
|
||||
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>';
|
||||
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' };
|
||||
@@ -22,26 +22,31 @@
|
||||
let raising = false;
|
||||
let raiseValue = 0;
|
||||
let wasMyTurn = false;
|
||||
let seenBoard = ''; // 新しくめくられたカードだけアニメーションする
|
||||
let seenHand = 0;
|
||||
let seenHand = 0; // 新しいハンドの手札だけ配る動きを付ける
|
||||
// ショーダウンの勝者選択（ポットごとの席番号の Set）
|
||||
let awardKey = '';
|
||||
let awardSel = [];
|
||||
let seenReview = 0; // 自動で開いたレビューのハンド番号（レビュー付きCPU戦）
|
||||
let reviewKey = '';
|
||||
|
||||
const reviewSheet = Fluid.Sheet($('review-modal'));
|
||||
const nameSheet = Fluid.Sheet($('name-modal'), { dismissible: false, focus: '#name-input' });
|
||||
|
||||
// ---------- 名前 ----------
|
||||
function ensureName() {
|
||||
if (Store.name) return connect();
|
||||
$('name-modal').hidden = false;
|
||||
$('name-input').focus();
|
||||
nameSheet.open();
|
||||
}
|
||||
$('name-form').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const name = $('name-input').value.trim();
|
||||
if (!name) return $('name-input').classList.add('invalid');
|
||||
if (!name) {
|
||||
$('name-input').classList.add('invalid');
|
||||
Fluid.shake($('name-input'));
|
||||
return;
|
||||
}
|
||||
Store.name = name;
|
||||
$('name-modal').hidden = true;
|
||||
nameSheet.close();
|
||||
connect();
|
||||
});
|
||||
|
||||
@@ -102,6 +107,7 @@
|
||||
}
|
||||
$('main').hidden = true;
|
||||
$('action-bar').hidden = true;
|
||||
reviewSheet.close();
|
||||
$('not-found').hidden = false;
|
||||
// 自分から切断するので「接続が切れました」は出さない
|
||||
if (socket) {
|
||||
@@ -114,6 +120,14 @@
|
||||
|
||||
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>`;
|
||||
@@ -121,6 +135,30 @@
|
||||
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
|
||||
@@ -128,29 +166,34 @@
|
||||
: null;
|
||||
}
|
||||
|
||||
// 場札: 5つの枠を使い回し、新しく出たカードだけめくる（フロップは少しずつずらして）
|
||||
function renderBoard(s) {
|
||||
const el = $('board');
|
||||
const h = s.hand;
|
||||
el.hidden = !s.cardsEnabled;
|
||||
if (!s.cardsEnabled) return;
|
||||
if (!h) {
|
||||
el.innerHTML = '';
|
||||
return;
|
||||
if (!el.slots) {
|
||||
el.innerHTML = '<span class="pcard slot"></span>'.repeat(5);
|
||||
el.slots = ['', '', '', '', ''];
|
||||
}
|
||||
const [seenNo, seenLen] = seenBoard.split(':').map(Number);
|
||||
const oldLen = seenNo === h.number ? seenLen : 0;
|
||||
const best = winningCards(h);
|
||||
let html = '';
|
||||
let fresh = 0;
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const c = h.board[i];
|
||||
if (!c) {
|
||||
html += '<span class="pcard slot"></span>';
|
||||
continue;
|
||||
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 cls = [i >= oldLen ? 'deal' : '', best ? (best.has(c) ? 'hl' : 'dim') : ''].join(' ');
|
||||
html += cardHtml(c, cls);
|
||||
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');
|
||||
}
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
// ---------- 描画 ----------
|
||||
@@ -165,14 +208,14 @@
|
||||
$('table-name').textContent = s.name;
|
||||
|
||||
$('level').textContent = `Lv.${s.level}`;
|
||||
$('blinds').textContent = `SB: ${chips(s.smallBlind)} / BB: ${chips(s.bigBlind)}`;
|
||||
$('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}分毎）`
|
||||
? `次 ${chips(s.nextBlinds.smallBlind)} / ${chips(s.nextBlinds.bigBlind)}（${s.timer.intervalMin}分毎）`
|
||||
: 'ブラインドタイマーなし';
|
||||
$('stack-info').textContent = `開始スタック ${chips(s.startingStack)}`;
|
||||
|
||||
// 中央
|
||||
$('pot').textContent = chips(h ? h.potTotal : 0);
|
||||
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);
|
||||
@@ -187,7 +230,6 @@
|
||||
$('start').disabled = eligible < 2;
|
||||
$('start').title = eligible < 2 ? '2人以上で開始できます' : '';
|
||||
$('pause').hidden = !s.started;
|
||||
$('pause').textContent = s.paused ? '▶' : '⏸';
|
||||
$('pause').title = s.paused ? '再開' : '一時停止';
|
||||
$('pause').setAttribute('aria-label', $('pause').title);
|
||||
$('pause').classList.toggle('paused', s.paused);
|
||||
@@ -199,20 +241,18 @@
|
||||
$('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);
|
||||
renderReview(s);
|
||||
renderTimer();
|
||||
|
||||
// 自分の番になったら知らせる（タップ前は振動できない）
|
||||
const tapped = !navigator.userActivation || navigator.userActivation.hasBeenActive;
|
||||
if (myTurn && !wasMyTurn && navigator.vibrate && tapped) navigator.vibrate(80);
|
||||
// 自分の番になったら知らせる
|
||||
if (myTurn && !wasMyTurn) Fluid.haptic(80);
|
||||
wasMyTurn = myTurn;
|
||||
if (h) {
|
||||
seenBoard = `${h.number}:${h.board.length}`;
|
||||
seenHand = h.number;
|
||||
}
|
||||
if (h) seenHand = h.number;
|
||||
}
|
||||
|
||||
function renderResult(s) {
|
||||
@@ -222,17 +262,60 @@
|
||||
el.hidden = true;
|
||||
return;
|
||||
}
|
||||
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>`;
|
||||
})
|
||||
.join('');
|
||||
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;
|
||||
@@ -240,84 +323,98 @@
|
||||
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 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 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();
|
||||
|
||||
const container = $('seats');
|
||||
$('felt-area').classList.toggle('crowded', n >= 7); // 7人以上は小さめに表示
|
||||
$('felt-area').classList.toggle('with-cards', s.cardsEnabled);
|
||||
container.innerHTML = ordered
|
||||
.map((p, idx) => {
|
||||
const classes = ['seat'];
|
||||
if (p.seat === s.mySeat) classes.push('me');
|
||||
if (p.bot) classes.push('bot');
|
||||
if (!p.connected) classes.push('offline');
|
||||
if (p.inHand && p.folded) classes.push('folded');
|
||||
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');
|
||||
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 markers = h
|
||||
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('')
|
||||
: '';
|
||||
: ''
|
||||
);
|
||||
|
||||
// 手札（自分と公開された人は表、それ以外は裏）
|
||||
let cards = '';
|
||||
if (s.cardsEnabled && p.inHand && (!p.folded || p.cards)) {
|
||||
const deal = h.number !== seenHand ? 'deal' : '';
|
||||
const list = p.cards || [null, null];
|
||||
const mark = (c) => (best && c ? (best.has(c) ? 'hl' : 'dim') : p.folded ? 'dim' : '');
|
||||
cards = `<div class="hole">${list.map((c) => cardHtml(c, `${deal} ${mark(c)}`)).join('')}</div>`;
|
||||
}
|
||||
// 手札（自分と公開された人は表、それ以外は裏）
|
||||
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' : ''));
|
||||
|
||||
// ベット（中央寄り）・獲得額
|
||||
const below = Math.sin(angles[idx]) <= 0.35;
|
||||
let bet = '';
|
||||
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 && !(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);
|
||||
|
||||
let tag = '';
|
||||
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>';
|
||||
}
|
||||
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);
|
||||
|
||||
return `
|
||||
<div class="${classes.join(' ')}">
|
||||
<div class="avatar">${p.bot ? BOT_SVG : AVATAR_SVG}${markers}${cards}</div>
|
||||
<div class="nameplate">
|
||||
${tag}
|
||||
<div class="pname">${esc(p.name)}</div>
|
||||
<div class="pstack">${p.allIn && !finished ? 'ALL-IN' : chips(p.stack)}</div>
|
||||
${p.handName && p.seat !== s.mySeat ? `<div class="phand">${esc(p.handName)}</div>` : ''}
|
||||
${p.connected ? '' : '<div class="offline-tag">オフライン</div>'}
|
||||
</div>
|
||||
${bet}
|
||||
</div>`;
|
||||
})
|
||||
.join('');
|
||||
|
||||
// 位置は CSSOM で設定（CSP で style 属性を禁止しているため）
|
||||
[...container.children].forEach((el, i) => {
|
||||
el.style.left = `${(50 + 38 * Math.cos(angles[i])).toFixed(2)}%`;
|
||||
el.style.top = `${(50 + 41 * Math.sin(angles[i])).toFixed(2)}%`;
|
||||
// ベット（中央寄り）・獲得額
|
||||
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;
|
||||
|
||||
$('my-stack').textContent = chips(m.stack);
|
||||
Fluid.countTo($('my-stack'), m.stack, chips);
|
||||
const net = m.net;
|
||||
$('my-net').textContent = `収支 ${net > 0 ? '+' : net < 0 ? '−' : '±'}${chips(Math.abs(net))}`;
|
||||
$('my-net').className = net > 0 ? 'plus' : net < 0 ? 'minus' : '';
|
||||
@@ -326,11 +423,16 @@
|
||||
|
||||
$('my-cards').hidden = !s.cardsEnabled;
|
||||
if (s.cardsEnabled) {
|
||||
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('')
|
||||
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;
|
||||
|
||||
@@ -352,8 +454,10 @@
|
||||
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', Boolean(o) || (awaiting && m.canAward));
|
||||
$('status-line').classList.toggle('my-turn', myMove);
|
||||
$('action-bar').classList.toggle('my-turn', myMove && !s.paused);
|
||||
|
||||
// ショーダウンの勝者選択
|
||||
const awarding = awaiting && m.canAward && !s.paused;
|
||||
@@ -371,8 +475,8 @@
|
||||
$('rebuy').textContent = `リバイ（${chips(s.startingStack)}）`;
|
||||
$('actions').hidden = alt || raising || awarding || reviewWaiting;
|
||||
$('raise-actions').hidden = alt || !raising;
|
||||
$('raise-panel').hidden = alt || !raising;
|
||||
$('status-line').hidden = raising;
|
||||
// レイズ額のパネルはレイズボタンから出て、閉じるときはボタンへ戻る
|
||||
Fluid.presence($('raise-panel'), !alt && raising, { scale: 0.86, y: 28 });
|
||||
|
||||
const fold = $('act-fold');
|
||||
const call = $('act-call');
|
||||
@@ -408,7 +512,7 @@
|
||||
const l = r.last;
|
||||
const h = l.hero;
|
||||
const pre = l.preflop.length
|
||||
? l.preflop
|
||||
? `<div class="rv-items">${l.preflop
|
||||
.map(
|
||||
(j) => `
|
||||
<div class="rv-item">${markHtml(j.mark)}<div>
|
||||
@@ -417,7 +521,7 @@
|
||||
${j.equity != null ? `<div class="rv-sub">推定勝率 ${j.equity}%（コールに必要 ${j.need}%）</div>` : ''}
|
||||
</div></div>`
|
||||
)
|
||||
.join('')
|
||||
.join('')}</div>`
|
||||
: '<div class="rv-sub">プリフロップで判断する場面はありませんでした</div>';
|
||||
const post = l.decisions
|
||||
.map(
|
||||
@@ -449,7 +553,7 @@
|
||||
</div>
|
||||
<div class="rv-streets">${scores}</div>
|
||||
<div class="rv-section">プリフロップ（ハンドレンジ）</div>${pre}
|
||||
${post ? `<div class="rv-section">フロップ以降（期待値の目安）</div>${post}` : ''}
|
||||
${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>`;
|
||||
}
|
||||
@@ -458,7 +562,7 @@
|
||||
const r = s.review;
|
||||
$('review-open').hidden = !(r && r.last);
|
||||
if (!r || !r.last) {
|
||||
$('review-modal').hidden = true;
|
||||
reviewSheet.close();
|
||||
return;
|
||||
}
|
||||
$('review-link').href = r.sessionId ? `/review?s=${encodeURIComponent(r.sessionId)}` : '/review';
|
||||
@@ -471,7 +575,7 @@
|
||||
// 新しいハンドのレビューが届いたら自動で開く
|
||||
if (r.last.number !== seenReview) {
|
||||
seenReview = r.last.number;
|
||||
if (r.waiting) $('review-modal').hidden = false;
|
||||
if (r.waiting) reviewSheet.open();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -486,15 +590,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
const openReview = () => { $('review-modal').hidden = false; };
|
||||
const openReview = () => reviewSheet.open();
|
||||
$('review-open').addEventListener('click', openReview);
|
||||
$('review-show').addEventListener('click', openReview);
|
||||
$('review-close').addEventListener('click', () => { $('review-modal').hidden = true; });
|
||||
$('review-modal').addEventListener('click', (e) => {
|
||||
if (e.target === $('review-modal')) $('review-modal').hidden = true;
|
||||
});
|
||||
$('review-close').addEventListener('click', () => reviewSheet.close());
|
||||
const nextHand = () => {
|
||||
$('review-modal').hidden = true;
|
||||
reviewSheet.close();
|
||||
emit('table:next');
|
||||
};
|
||||
$('review-copy').addEventListener('click', () => copyHandPrompt(state && state.review));
|
||||
@@ -509,18 +610,21 @@
|
||||
// 参加者が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('');
|
||||
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;
|
||||
@@ -580,20 +684,56 @@
|
||||
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);
|
||||
|
||||
const fracOf = (o, v) => (o.maxRaiseTo > o.minRaiseTo ? (v - o.minRaiseTo) / (o.maxRaiseTo - o.minRaiseTo) : 1);
|
||||
// SB 単位に丸める（最大はオールイン額そのまま）
|
||||
function valueAt(o, f) {
|
||||
if (f >= 1) return o.maxRaiseTo;
|
||||
const unit = Math.max(1, state.smallBlind);
|
||||
const raw = o.minRaiseTo + f * (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 range = $('raise-range');
|
||||
range.min = o.minRaiseTo;
|
||||
range.max = o.maxRaiseTo;
|
||||
range.step = 1;
|
||||
range.value = 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);
|
||||
for (const b of $('presets').children) {
|
||||
b.classList.toggle('active', presetValue(o, b.dataset.preset) === raiseValue);
|
||||
}
|
||||
$('raise-meta').textContent = state.bigBlind > 0 ? `${formatBB(raiseValue / state.bigBlind)} BB` : '';
|
||||
const allIn = raiseValue >= o.maxRaiseTo;
|
||||
$('raise-confirm').textContent = allIn
|
||||
? `All-in ${chips(raiseValue)}`
|
||||
@@ -601,6 +741,85 @@
|
||||
$('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 () => {
|
||||
@@ -629,6 +848,7 @@
|
||||
if (o.minRaiseTo >= o.maxRaiseTo) return sendAction('raise', o.maxRaiseTo); // オールインしかない
|
||||
raising = true;
|
||||
raiseValue = o.minRaiseTo;
|
||||
knob.set(0);
|
||||
render();
|
||||
});
|
||||
$('raise-cancel').addEventListener('click', () => {
|
||||
@@ -642,21 +862,7 @@
|
||||
$('presets').addEventListener('click', (e) => {
|
||||
const b = e.target.closest('[data-preset]');
|
||||
const o = options();
|
||||
if (!b || !o) return;
|
||||
raiseValue = presetValue(o, b.dataset.preset);
|
||||
$('raise-amount').value = raiseValue;
|
||||
renderRaisePanel(o);
|
||||
});
|
||||
$('raise-range').addEventListener('input', (e) => {
|
||||
const o = options();
|
||||
if (!o) return;
|
||||
// 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;
|
||||
raiseValue = clampRaise(o, v);
|
||||
$('raise-amount').value = raiseValue;
|
||||
renderRaisePanel(o);
|
||||
if (b && o) setRaise(o, presetValue(o, b.dataset.preset));
|
||||
});
|
||||
$('raise-amount').addEventListener('input', (e) => {
|
||||
const o = options();
|
||||
@@ -724,16 +930,17 @@
|
||||
});
|
||||
|
||||
// iOS Safari は CSS だけではページのスクロール・引っ張り（バウンス）を止められないので、
|
||||
// 1本指のドラッグを止める。スライダーと、中身がはみ出している操作エリアは除く。
|
||||
// 1本指のドラッグを止める。スライダーと、中身がはみ出しているシート・勝者選択は除く。
|
||||
// 2本指（ピンチ拡大）はアクセシビリティのため止めない。
|
||||
document.addEventListener(
|
||||
'touchmove',
|
||||
(e) => {
|
||||
if (e.touches.length !== 1) return;
|
||||
const t = e.target;
|
||||
if (t.closest && t.closest('input[type="range"]')) return;
|
||||
const bar = t.closest && (t.closest('.action-bar') || t.closest('.review-modal'));
|
||||
if (bar && bar.scrollHeight > bar.clientHeight) return;
|
||||
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 }
|
||||
|
||||
Reference in new issue
Block a user