Poker/public/table.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#eceef1">
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#070c0a">
  <meta name="robots" content="noindex, nofollow">
  <title>テーブル - Hold'em Night</title>
  <link rel="icon" href="/assets/favicon.ico">
  <link rel="stylesheet" href="/assets/style.css">
</head>
<body class="page-table">
  <div class="conn-lost" id="conn-lost" role="status" hidden><span class="spinner" aria-hidden="true"></span>接続が切れました。再接続中…</div>

  <main class="table-main" id="main" hidden>
    <header class="table-bar">
      <button class="glass-btn" id="leave" aria-label="退席する" title="退席する">
        <svg class="i icon-leave" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h3.5A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5H14"/><path d="M10 8l-4 4 4 4M6 12h9"/></svg>
        <svg class="i icon-back" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg>
      </button>
      <h1 id="table-name"></h1>
      <!-- ホストだけに表示 -->
      <span class="host-controls" id="host-controls" hidden>
        <button class="btn btn-tint btn-sm" id="start">START</button>
        <button class="glass-btn" id="pause" aria-label="一時停止" title="一時停止">
          <svg class="i i-fill icon-pause" viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="5" width="4" height="14" rx="1.3"/><rect x="13.5" y="5" width="4" height="14" rx="1.3"/></svg>
          <svg class="i i-fill icon-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.6v12.8a1 1 0 0 0 1.5.86l10.2-6.4a1 1 0 0 0 0-1.72L9.5 4.74A1 1 0 0 0 8 5.6z"/></svg>
        </button>
        <button class="glass-btn" id="seating-open" aria-label="席順を変更" title="席順を変更">
          <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M7.5 20V5M4 8.5L7.5 5 11 8.5M16.5 4v15M13 15.5l3.5 3.5 3.5-3.5"/></svg>
          <span class="glass-dot" id="seating-dot" hidden></span>
        </button>
      </span>
      <!-- レビュー付きCPU戦のみ -->
      <button class="glass-btn" id="review-open" aria-label="直前のハンドのレビュー" title="直前のハンドのレビュー" hidden>
        <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>
      </button>
      <button class="glass-btn" id="ranking-open" aria-label="ランキング" title="ランキング">
        <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 4h8v5a4 4 0 0 1-8 0z"/><path d="M8 5.5H5.5v1A3 3 0 0 0 8 9.5M16 5.5h2.5v1A3 3 0 0 1 16 9.5M12 13v3.5M8.5 20h7M9.5 20l.5-3.5h4l.5 3.5"/></svg>
      </button>
      <button class="glass-btn" id="share" aria-label="サイトのリンクをコピー" title="サイトのリンクをコピー">
        <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2"/><path d="M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2"/></svg>
      </button>
    </header>

    <div class="level-bar">
      <span class="lv" id="level"></span>
      <span class="blinds" id="blinds"></span>
      <span class="timer" id="timer"></span>
    </div>
    <div class="level-sub">
      <span id="next-blinds"></span>
      <span id="stack-info"></span>
    </div>

    <div class="felt-area" id="felt-area">
      <div class="rail">
        <div class="felt">
          <div class="pot-label">POT</div>
          <div class="pot" id="pot">$0</div>
          <div class="board" id="board" hidden></div>
          <div class="phase"><span id="phase">WAITING</span><span class="hand-no" id="hand-no"></span></div>
          <div class="result" id="result" hidden></div>
        </div>
      </div>
      <div id="seats"></div>
    </div>

    <div class="spectator-note" id="spectator-note" hidden>
      <span id="spectator-text">満席のため観戦中です</span>
      <button class="btn btn-tint btn-sm" id="take-seat" hidden>空席に座る</button>
    </div>
  </main>

  <section class="action-bar" id="action-bar" hidden>
    <div class="inner">
      <div class="me-row">
        <div class="my-cards" id="my-cards" hidden></div>
        <div class="me-info">
          <div class="my-stack" id="my-stack">$0</div>
          <div class="me-sub"><span class="my-hand" id="my-hand"></span><span id="my-net"></span><span class="my-bet" id="my-bet"></span></div>
        </div>
        <button class="btn btn-sm" id="sit-out" title="次のハンドから参加しません">離席</button>
      </div>

      <div class="status-line" id="status-line" aria-live="polite"></div>

      <div class="award-panel" id="award-panel" hidden>
        <div class="award-pots" id="award-pots"></div>
        <button class="btn btn-tint btn-lg btn-block" id="award-confirm" disabled>確定</button>
      </div>

      <div class="actions" id="actions">
        <button class="btn act-fold" id="act-fold" disabled>Fold</button>
        <button class="btn act-call" id="act-call" disabled>Check</button>
        <button class="btn act-raise" id="act-raise" disabled>Raise</button>
      </div>
      <div class="actions single" id="next-actions" hidden>
        <button class="btn" id="review-show" hidden>レビュー</button>
        <button class="btn btn-tint" id="next-hand">次のハンドへ</button>
      </div>
      <div class="actions single" id="alt-actions" hidden>
        <button class="btn btn-tint" id="sit-in">復帰する</button>
        <button class="btn btn-blue" id="rebuy">リバイ</button>
      </div>
    </div>
  </section>

  <div class="center-message" id="not-found" hidden>
    <div class="badge-icon" aria-hidden="true"><svg class="i" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.5v.01"/></svg></div>
    <h2 id="not-found-title">テーブルが見つかりません</h2>
    <p id="not-found-text">終了したか、URLが間違っている可能性があります。</p>
    <a class="btn btn-tint btn-lg" href="/">ロビーへ戻る</a>
  </div>

  <!-- ベット/レイズ額（Bet・Raise ボタンで下から出るシート。つまみを下へ払うと閉じる）。
       候補はプリフロップのオープン・3bet・4bet、フロップ以降のベット・レイズで入れ替わる -->
  <div class="sheet-backdrop bet-backdrop" id="bet-modal" hidden>
    <div class="sheet bet-sheet" role="dialog" aria-modal="true" aria-labelledby="bet-title" tabindex="-1">
      <div class="sheet-header bet-header" data-sheet-drag>
        <span class="sheet-grabber" aria-hidden="true"></span>
        <div class="bet-heading">
          <h2 class="sheet-title" id="bet-title">Raise</h2>
          <span class="bet-context" id="bet-context"></span>
        </div>
      </div>
      <div class="bet-body">
        <div class="bet-amount-row">
          <label class="raise-value"><span class="cur" aria-hidden="true">$</span><input type="number" class="raise-amount" id="raise-amount" inputmode="numeric" aria-label="ベット額"></label>
          <div class="raise-meta"><b id="raise-bb"></b><span id="raise-ratio"></span></div>
        </div>
        <div class="bet-presets" id="presets"></div>
        <div class="bet-adjust">
          <button type="button" class="step-btn" id="raise-minus" aria-label="1BB 減らす">
            <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 12h12"/></svg>
          </button>
          <div class="bet-slider" id="raise-range" role="slider" tabindex="0" aria-label="ベット額">
            <div class="bet-track"><div class="bet-fill"></div></div>
            <div class="bet-thumb"></div>
          </div>
          <button type="button" class="step-btn" id="raise-plus" aria-label="1BB 増やす">
            <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6v12M6 12h12"/></svg>
          </button>
        </div>
        <div class="bet-ends">
          <button type="button" class="end-btn" id="raise-min">Min <span id="raise-min-amt"></span></button>
          <button type="button" class="end-btn allin" id="raise-max">All-in <span id="raise-max-amt"></span></button>
        </div>
      </div>
      <div class="sheet-footer">
        <div class="btn-row">
          <button type="button" class="btn btn-lg" id="raise-cancel">戻る</button>
          <button type="button" class="btn btn-lg act-raise" id="raise-confirm">Raise</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 席順の変更（ホストのみ・画面の中央に出るポップアップ）。自分から時計回りの並びを、行をつかんで並べ替える -->
  <div class="popup-backdrop" id="seating-modal" hidden>
    <div class="popup seating-popup" role="dialog" aria-modal="true" aria-labelledby="seating-title" tabindex="-1">
      <div class="popup-header">
        <h2 class="sheet-title" id="seating-title">席順を変更</h2>
      </div>
      <div class="sheet-scroll">
        <div class="seating-preview" id="seating-preview" aria-hidden="true"><div class="seating-felt"></div></div>
        <div class="seating-tools">
          <p class="hint" id="seating-note">右端のつまみをつかんで並べ替えます。上から時計回り（あなたの左隣から）に座ります。</p>
          <button type="button" class="btn btn-sm" id="seating-shuffle">
            <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h3.5c4.5 0 4.5 10 9 10H20M4 17h3.5c1.6 0 2.6-1.2 3.4-2.8M13.1 9.8C13.9 8.2 14.9 7 16.5 7H20M17.5 4.5 20 7l-2.5 2.5M17.5 14.5 20 17l-2.5 2.5"/></svg>シャッフル
          </button>
        </div>
        <ol class="list seating-list" id="seating-list"></ol>
        <p class="hint seating-pending" id="seating-pending" hidden></p>
      </div>
      <div class="sheet-footer">
        <div class="btn-row">
          <button type="button" class="btn btn-lg" id="seating-cancel">キャンセル</button>
          <button type="button" class="btn btn-tint btn-lg" id="seating-save">この順に座る</button>
        </div>
      </div>
    </div>
  </div>

  <!-- テーブル内のランキング（スタック順・収支順を切り替える） -->
  <div class="sheet-backdrop" id="ranking-modal" hidden>
    <div class="sheet ranking-sheet" role="dialog" aria-modal="true" aria-labelledby="ranking-title" tabindex="-1">
      <div class="sheet-header" data-sheet-drag>
        <span class="sheet-grabber" aria-hidden="true"></span>
        <h2 class="sheet-title" id="ranking-title">ランキング</h2>
      </div>
      <div class="sheet-scroll">
        <div class="segmented" id="ranking-tabs" aria-label="並べ替え">
          <button type="button" class="seg-btn active" data-rank="stack" aria-pressed="true">スタック</button>
          <button type="button" class="seg-btn" data-rank="net" aria-pressed="false">収支</button>
        </div>
        <ol class="list ranking-list mt-12" id="ranking-list"></ol>
        <p class="hint ranking-note" id="ranking-note"></p>
      </div>
      <div class="sheet-footer">
        <button type="button" class="btn btn-lg btn-block" id="ranking-close">閉じる</button>
      </div>
    </div>
  </div>

  <!-- 直前のハンドのレビュー（下から出るシート。つまみを下へ払うと閉じる） -->
  <div class="sheet-backdrop" id="review-modal" hidden>
    <div class="sheet review-sheet" role="dialog" aria-modal="true" aria-labelledby="review-title" tabindex="-1">
      <div class="sheet-header" data-sheet-drag>
        <span class="sheet-grabber" aria-hidden="true"></span>
        <h2 class="sheet-title" id="review-title">ハンドのレビュー</h2>
      </div>
      <div class="sheet-scroll">
        <div id="review-body"></div>
        <button type="button" class="btn btn-block mt-12" id="review-copy">
          <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 3.5l1.6 4.4L16 9.5l-4.4 1.6L10 15.5l-1.6-4.4L4 9.5l4.4-1.6z"/><path d="M18 14l.8 2.2L21 17l-2.2.8L18 20l-.8-2.2L15 17l2.2-.8z"/></svg>AIに質問する用にコピー
        </button>
        <div class="list mt-12">
          <a class="cell cell-link" id="review-link" href="/review">
            <span class="cell-title">対局全体のレビュー<span class="cell-sub">点数表・成績・リプレイ</span></span>
            <svg class="i chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg>
          </a>
        </div>
      </div>
      <div class="sheet-footer">
        <div class="btn-row">
          <button type="button" class="btn btn-lg" id="review-close">閉じる</button>
          <button type="button" class="btn btn-tint btn-lg" id="review-modal-next">次のハンドへ</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 名前の入力（閉じられないシート） -->
  <div class="sheet-backdrop" id="name-modal" hidden>
    <form class="sheet sheet-form" id="name-form" role="dialog" aria-modal="true" aria-labelledby="name-title" tabindex="-1">
      <h2 class="sheet-title" id="name-title">名前を入力</h2>
      <p class="hint mt-8">テーブルで表示される名前です</p>
      <input id="name-input" class="field mt-12" type="text" maxlength="12" placeholder="例: とらのすけ" autocomplete="nickname" aria-labelledby="name-title">
      <button class="btn btn-tint btn-lg btn-block mt-12" type="submit">参加する</button>
    </form>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="/assets/fluid.js"></script>
  <script src="/assets/common.js"></script>
  <script src="/assets/table.js"></script>
</body>
</html>