Poker/public/table.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#24493b">
  <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="table-page">
  <div class="conn-lost" id="conn-lost" hidden>接続が切れました。再接続中…</div>

  <main class="wrap" id="main" hidden>
    <div class="table-header">
      <button class="icon-btn leave" id="leave" aria-label="退席する" title="退席する">⏏</button>
      <h1 id="table-name"></h1>
      <!-- ホストだけに表示 -->
      <span class="host-controls" id="host-controls" hidden>
        <button class="btn btn-green btn-sm" id="start">START</button>
        <button class="icon-btn" id="pause" aria-label="一時停止" title="一時停止">⏸</button>
      </span>
      <!-- レビュー付きCPU戦のみ -->
      <button class="icon-btn" id="review-open" aria-label="直前のハンドのレビュー" title="直前のハンドのレビュー" hidden>📝</button>
      <button class="icon-btn" id="share" aria-label="サイトのリンクをコピー" title="サイトのリンクをコピー">🔗</button>
    </div>

    <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="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 id="seats"></div>
    </div>

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

  <div 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"><span class="wallet">👛</span><span id="my-stack">$0</span></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-ghost btn-sm" id="sit-out" title="次のハンドから参加しません">離席</button>
      </div>

      <div class="status-line" id="status-line"></div>

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

      <div class="raise-panel" id="raise-panel" hidden>
        <div class="presets" id="presets">
          <button class="btn btn-dark btn-sm" data-preset="min">Min</button>
          <button class="btn btn-dark btn-sm" data-preset="half">½</button>
          <button class="btn btn-dark btn-sm" data-preset="threeq">¾</button>
          <button class="btn btn-dark btn-sm" data-preset="pot">Pot</button>
          <button class="btn btn-dark btn-sm" data-preset="max">All-in</button>
        </div>
        <div class="raise-row">
          <input type="range" id="raise-range" aria-label="レイズ額">
          <input type="number" id="raise-amount" inputmode="numeric" aria-label="レイズ額">
        </div>
      </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 raising" id="raise-actions" hidden>
        <button class="btn btn-dark" id="raise-cancel">戻る</button>
        <button class="btn act-raise" id="raise-confirm">Raise</button>
      </div>
      <div class="actions raising" id="review-actions" hidden>
        <button class="btn btn-dark" id="review-show">レビュー</button>
        <button class="btn btn-orange" id="review-next">次のハンドへ</button>
      </div>
      <div class="actions single" id="alt-actions" hidden>
        <button class="btn btn-orange" id="sit-in">復帰する</button>
        <button class="btn btn-blue" id="rebuy">リバイ</button>
      </div>
    </div>
  </div>

  <div class="center-message" id="not-found" hidden>
    <h2 id="not-found-title">テーブルが見つかりません</h2>
    <p id="not-found-text">終了したか、URLが間違っている可能性があります。</p>
    <a class="btn btn-blue" href="/">ロビーへ戻る</a>
  </div>

  <div class="modal-backdrop" id="review-modal" hidden>
    <div class="modal review-modal" role="dialog" aria-labelledby="review-title">
      <h2 id="review-title">ハンドのレビュー</h2>
      <div id="review-body"></div>
      <div class="review-buttons">
        <button type="button" class="btn btn-dark" id="review-close">閉じる</button>
        <button type="button" class="btn btn-orange" id="review-modal-next">次のハンドへ</button>
      </div>
      <a class="link-gold review-link" id="review-link" href="/review" target="_blank" rel="noopener">対局全体のレビュー（点数表・成績・リプレイ）→</a>
    </div>
  </div>

  <div class="modal-backdrop" id="name-modal" hidden>
    <form class="modal" id="name-form">
      <h2>名前を入力</h2>
      <p class="hint">テーブルで表示される名前です</p>
      <input id="name-input" type="text" maxlength="12" placeholder="例: とらのすけ" class="mt-12" autocomplete="nickname">
      <button class="btn btn-orange btn-block mt-12" type="submit">参加する</button>
    </form>
  </div>

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