Add admin-only CPU tables with per-hand reviews

A new table type, "review" (レビュー付きCPU戦), can only be created by
admins. Only the creator and CPUs sit there: friends cannot join, and the
table is hidden from non-admin lobbies. After every hand a review opens,
and the next hand waits until the creator presses "次のハンドへ".

- Preflop: shows which color of the registered hand range the hole cards
  are and whether the action followed it. With no entrant before you,
  open with the color for the number of players still to act; facing an
  entrant, estimate their range from their position, call one color
  above it and raise two above. Purple ranks just below white (SB only).
- Flop onward: equity vs ranges estimated from those colors (narrowed by
  later bets/calls) gives a rough EV per option. The score is the EV lost
  against the best option, relative to the pot. It is a guide, not GTO.
- Also: pot-odds call check, all-in equity and luck-adjusted P&L,
  VPIP/PFR/3bet/Cbet/WTSD/W$SD/AF, per-color and per-position compliance,
  habits to watch, worst-5 hands, a P&L chart and a step-by-step replay
  on the admin-only /review page.

Hand now logs every action for the review. The range data moves to
admin/range-data.js, shared by the range page and the server. Reviews are
saved under data/reviews/ (newest 50 sessions). Admin scripts and CSS are
no longer cached for a day, so updates show up immediately.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/assets/create.js

@@ -72,13 +72,14 @@
     chips: '実物のカードで遊び、サイトはチップだけを管理。ショーダウンの勝者はホストが選ぶ',
     friends: '各自のスマホに手札が配られ、勝敗とポットの分配は自動',
     cpu: 'CPU と対戦（友達も空いている席に参加できる）。カードの配布・勝敗の判定は自動',
+    review: 'あなたと CPU だけで対戦（友達は入れない）。ハンドごとにハンドレンジの色・行動の点数を表示し、対局全体の成績も振り返れる',
   };
   const radioValue = (name) => (form.querySelector(`input[name="${name}"]:checked`) || {}).value;
 
   function updateMode() {
     const mode = radioValue('mode');
     modeHint.textContent = MODE_HINTS[mode] || '';
-    cpuOptions.hidden = mode !== 'cpu';
+    cpuOptions.hidden = mode !== 'cpu' && mode !== 'review';
   }
 
   function refresh() {
@@ -156,6 +157,11 @@
     }
   });
 
+  // レビュー付きCPU戦は管理者だけが作れる（サーバでも確認する）
+  api('GET', '/api/me')
+    .then((me) => { $('review-mode').hidden = !me.admin; })
+    .catch(() => {});
+
   applyDefaultBlinds();
   refresh();
   suggestName();

public/assets/lobby.js

@@ -22,9 +22,12 @@
     return false;
   }
 
-  // 管理者だけにハンドレンジ学習へのリンクを出す（ページ自体もサーバ側で管理者以外は 404）
+  // 管理者だけにハンドレンジ学習・CPU戦のレビューへのリンクを出す（ページ自体もサーバ側で管理者以外は 404）
   App.api('GET', '/api/me')
-    .then((me) => { document.getElementById('range-link').hidden = !me.admin; })
+    .then((me) => {
+      document.getElementById('range-link').hidden = !me.admin;
+      document.getElementById('review-link').hidden = !me.admin;
+    })
     .catch(() => {});
 
   document.getElementById('create').addEventListener('click', () => {
@@ -36,7 +39,7 @@
     if (btn && requireName()) location.href = '/table/' + encodeURIComponent(btn.dataset.join);
   });
 
-  const MODE_LABEL = { chips: '💰 キャッシュオンリー', friends: '🃏 友人戦', cpu: '🤖 CPU戦' };
+  const MODE_LABEL = { chips: '💰 キャッシュオンリー', friends: '🃏 友人戦', cpu: '🤖 CPU戦', review: '📝 レビュー付きCPU戦' };
 
   function phaseBadge(t) {
     if (t.paused) return '<span class="badge paused">PAUSED</span>';

public/assets/style.css

@@ -258,6 +258,7 @@ input.invalid { border-color: var(--red); }
 /* 選択肢を横に並べたラジオボタン（テーブルの種類・CPU の人数） */
 .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
 .segmented label { margin: 0; display: block; color: var(--text); }
+.segmented label[hidden] { display: none; }
 .segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
 .segmented span {
   display: flex;
@@ -790,3 +791,37 @@ body.table-page {
 .slash { flex: none !important; color: var(--muted); font-weight: 800; }
 label.switch { margin: 0; display: inline-block; }
 .link-gold { color: var(--gold); }
+
+/* ---------- レビュー付きCPU戦（ハンドごとのレビュー） ---------- */
+.review-modal { max-width: 440px; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
+.review-buttons { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 16px; }
+.review-buttons:has(> [hidden]) { grid-template-columns: 1fr; }
+.review-link { display: block; margin-top: 12px; font-size: 13px; text-align: center; }
+.rv-head { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
+.rv-cards { display: flex; gap: 3px; }
+.rv-hand { font-size: 20px; }
+.rv-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
+.rv-sub b { color: var(--text); }
+.rv-section { font-size: 12px; font-weight: 800; color: var(--gold); margin: 14px 0 6px; }
+.rv-item { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 6px 0; border-top: 1px solid var(--line); }
+.rv-mark { flex: none; width: 24px; text-align: center; font-weight: 900; font-size: 16px; }
+.rv-mark.great { color: var(--green); }
+.rv-mark.good { color: #8fd18f; }
+.rv-mark.warn { color: var(--orange); }
+.rv-mark.bad { color: var(--red); }
+.rv-score { color: var(--gold); font-weight: 800; font-size: 13px; }
+.rv-streets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
+.rv-street { background: var(--panel); border-radius: 10px; padding: 6px 4px; text-align: center; }
+.rv-street span { display: block; font-size: 11px; color: var(--muted); }
+.rv-street b { font-size: 18px; }
+.rv-foot { margin-top: 14px; font-size: 13px; color: var(--muted); }
+/* 登録してあるハンドレンジの色（レンジ表のデータとしての色なのでサイトの配色とは別） */
+.rv-color { display: inline-block; font-size: 13px; font-weight: 800; padding: 2px 8px; border-radius: 6px; vertical-align: middle; background: var(--c); color: var(--fg); }
+.rv-color.cat-purple { box-shadow: inset 0 0 0 2px #9b59d0; }
+.rv-color.cat-navy { --c: #20365d; --fg: #fff; box-shadow: inset 0 0 0 1px #4d6a9c; }
+.rv-color.cat-red { --c: #9e342e; --fg: #fff; }
+.rv-color.cat-yellow { --c: #ddb356; --fg: #14191f; }
+.rv-color.cat-green { --c: #4e8051; --fg: #101910; }
+.rv-color.cat-blue { --c: #6aa5c9; --fg: #14191f; }
+.rv-color.cat-white { --c: #f7f7f7; --fg: #222; }
+.rv-color.cat-gray, .rv-color.cat-purple { --c: #929292; --fg: #222; }

public/assets/table.js

@@ -27,6 +27,8 @@
   // ショーダウンの勝者選択（ポットごとの席番号の Set）
   let awardKey = '';
   let awardSel = [];
+  let seenReview = 0; // 自動で開いたレビューのハンド番号（レビュー付きCPU戦）
+  let reviewKey = '';
 
   // ---------- 名前 ----------
   function ensureName() {
@@ -199,6 +201,7 @@
 
     renderSeats(s);
     if (me) renderActionBar(s, me);
+    renderReview(s);
     renderTimer();
 
     // 自分の番になったら知らせる（タップ前は振動できない）
@@ -335,6 +338,7 @@
     let status = '';
     if (!s.started) status = s.isHost ? '2人以上揃ったら START を押してください' : 'ホストの開始を待っています';
     else if (s.paused) status = '一時停止中';
+    else if (s.review && s.review.waiting) status = 'レビューを確認したら「次のハンドへ」を押してください';
     else if (m.sittingOut) status = '離席中です。復帰すると次のハンドから参加します';
     else if (m.canRebuy) status = 'チップがなくなりました';
     else if (o) status = o.canCheck ? 'あなたの番です' : `あなたの番です（コール ${chips(o.toCall)}）`;
@@ -356,13 +360,15 @@
     if (awarding) renderAwardPanel(h.pots);
 
     // ボタン
-    const alt = (m.sittingOut || m.canRebuy) && !awarding;
+    const reviewWaiting = Boolean(s.review && s.review.waiting);
+    const alt = (m.sittingOut || m.canRebuy) && !awarding && !reviewWaiting;
     if (!o) raising = false;
+    $('review-actions').hidden = !reviewWaiting;
     $('alt-actions').hidden = !alt;
     $('sit-in').hidden = !m.sittingOut;
     $('rebuy').hidden = !m.canRebuy;
     $('rebuy').textContent = `リバイ（${chips(s.startingStack)}）`;
-    $('actions').hidden = alt || raising || awarding;
+    $('actions').hidden = alt || raising || awarding || reviewWaiting;
     $('raise-actions').hidden = alt || !raising;
     $('raise-panel').hidden = alt || !raising;
     $('status-line').hidden = raising;
@@ -387,6 +393,101 @@
     if (raising) renderRaisePanel(o);
   }
 
+  // ---------- レビュー（レビュー付き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
+      ? 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 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>${post}` : ''}
+      ${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) {
+      $('review-modal').hidden = true;
+      return;
+    }
+    $('review-link').href = r.sessionId ? `/review?s=${encodeURIComponent(r.sessionId)}` : '/review';
+    $('review-modal-next').hidden = !r.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 (r.waiting) $('review-modal').hidden = false;
+    }
+  }
+
+  const openReview = () => { $('review-modal').hidden = false; };
+  $('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;
+  });
+  const nextHand = () => {
+    $('review-modal').hidden = true;
+    emit('table:next');
+  };
+  $('review-next').addEventListener('click', nextHand);
+  $('review-modal-next').addEventListener('click', nextHand);
+
   // ---------- 勝者選択 ----------
   function renderAwardPanel(pots) {
     const key = `${state.handNumber}:${JSON.stringify(pots)}`;
@@ -605,7 +706,7 @@
       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');
+      const bar = t.closest && (t.closest('.action-bar') || t.closest('.review-modal'));
       if (bar && bar.scrollHeight > bar.clientHeight) return;
       if (e.cancelable) e.preventDefault();
     },