{% extends "base_app.html" %} {% set active_page = 'play' %} {% block title
%}Play{% endblock %} {% block content %}
<section class="play-page">
  <article class="panel" id="setup-panel">
    <h1>Play</h1>
    <p class="muted">Create a code game or join one from a friend.</p>

    <h3>Time control</h3>
    <div class="chip-row" id="time-mode-row">
      <button class="chip" type="button" data-time-mode="1+0">1 + 0</button>
      <button class="chip" type="button" data-time-mode="3+2">3 + 2</button>
      <button class="chip active" type="button" data-time-mode="10+0">
        10 + 0
      </button>
      <button class="chip" type="button" data-time-mode="15+10">15 + 10</button>
    </div>

    <h3>Play as</h3>
    <div class="chip-row" id="play-as-row">
      <button class="chip" type="button" data-play-as="w">White</button>
      <button class="chip" type="button" data-play-as="b">Black</button>
      <button class="chip active" type="button" data-play-as="r">Random</button>
    </div>

    <div class="cta-row">
      <button class="btn btn-primary" type="button" id="create-code-btn">
        Create game code
      </button>
    </div>

    <h3>Join by code</h3>
    <div class="join-row">
      <input
        type="text"
        id="join-code-input"
        maxlength="6"
        placeholder="ABC123"
      />
      <button class="btn btn-secondary" type="button" id="join-code-btn">
        Join
      </button>
    </div>
  </article>

  <article class="panel hidden" id="waiting-panel">
    <h2>Lobby</h2>
    <p class="muted">Share this code with your friend.</p>
    <div class="code-badge" id="code-value">------</div>

    <div class="waiting-meta">
      <p>
        <strong>Opponent:</strong> <span id="opponent-value">Waiting...</span>
      </p>
      <p>
        <strong>Status:</strong>
        <span id="lobby-status">Waiting for opponent to join...</span>
      </p>
    </div>

    <div class="cta-row">
      <button class="btn btn-secondary" type="button" id="copy-code-btn">
        Copy code
      </button>
      <button class="btn btn-primary" type="button" id="ready-btn">
        Ready
      </button>
    </div>
  </article>

  <section class="game-stage hidden" id="game-stage">
    <article class="panel board-panel">
      <div class="player-strip" id="opponent-strip">
        <div class="player-main">
          <span class="player-name" id="opponent-name-strip">Opponent</span>
          <span class="player-time" id="opponent-time-value">--:--</span>
        </div>
        <div class="player-meta">
          <span class="capture-strip" id="opponent-captured-strip"></span>
          <span class="material-pill" id="opponent-material-strip">=</span>
        </div>
      </div>

      <canvas
        id="chess-canvas"
        width="640"
        height="640"
        aria-label="Chess board"
      ></canvas>

      <div class="player-strip" id="my-strip">
        <div class="player-main">
          <span class="player-name" id="my-name-strip">You</span>
          <span class="player-time" id="my-time-value">--:--</span>
        </div>
        <div class="player-meta">
          <span class="capture-strip" id="my-captured-strip"></span>
          <span class="material-pill" id="my-material-strip">=</span>
        </div>
      </div>
    </article>

    <article class="panel game-sidebar">
      <h2>Match</h2>
      <p><strong>You are:</strong> <span id="color-value">-</span></p>
      <p><strong>Turn:</strong> <span id="turn-value">-</span></p>
      <p class="muted" id="play-status">Game not started.</p>

      <h3>Moves</h3>
      <div class="move-list-wrap">
        <table class="move-table">
          <thead>
            <tr>
              <th>#</th>
              <th>White</th>
              <th>Black</th>
            </tr>
          </thead>
          <tbody id="move-list-body"></tbody>
        </table>
      </div>

      <div class="cta-row">
        <button class="btn btn-secondary" type="button" id="offer-draw-btn">
          Offer draw
        </button>
        <button class="btn btn-secondary" type="button" id="resign-btn">
          Resign
        </button>
      </div>
    </article>
  </section>
</section>

<div class="play-modal hidden" id="play-modal" role="dialog" aria-modal="true">
  <div class="play-modal-card">
    <h3 id="play-modal-title">Notice</h3>
    <p id="play-modal-text" class="muted"></p>
    <div class="cta-row" id="play-modal-actions"></div>
  </div>
</div>
{% endblock %} {% block extra_scripts %}
<script src="{{ url_for('static', filename='socket.io/socket.io.js') }}"></script>
<script
  type="module"
  src="{{ url_for('static', filename='js/play.js') }}"
></script>
{% endblock %}