NowChess-Frontend/src/app/pages/game/game.component.html

<main class="game-shell" [class.theme-dark]="isDarkMode">
  <app-promotion-dialog [isOpen]="facade.isPromotionDialogOpen" (promotionSelected)="facade.onPromotionSelected($event)"
    (closed)="facade.onPromotionClosed()" />

  <section class="game-card">
    <header class="mb-3">
      <a routerLink="/" class="back-link">Back</a>
      <h1 class="mb-2">1 vs 1 Game</h1>
      <p class="meta mb-0">Game ID: <strong>{{ facade.gameId }}</strong></p>
    </header>

    @if (facade.loading) {
    <p>Loading game state...</p>
    } @else if (facade.state) {
    @if (facade.isGameFinished && facade.gameCompletionMessage) {
    <div class="game-completion-alert alert alert-success mb-3">
      <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
      <p class="completion-subtitle mb-0">
        <a routerLink="/" class="completion-link">Start a new game</a>
      </p>
    </div>
    }
    @if (facade.isGameFinished && facade.gameCompletionMessage) {
    <div class="game-completion-alert alert alert-success mb-3">
      <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
      <p class="completion-subtitle mb-0">
        <a routerLink="/" class="completion-link">Start a new game</a>
      </p>
    </div>
    }
    <div class="container-fluid">
      <div class="row g-3">
        <!-- Left Sidebar - Dummy Timers -->
        <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
          <section class="timer-card">
            <h2>Timers</h2>
            <div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
              <p class="timer-label">White</p>
              <p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
            </div>
            <div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
              <p class="timer-label">Black</p>
              <p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
            </div>
          </section>
        </div>

        <!-- Center - Chess Board -->
        <div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
          <section class="center-column d-flex flex-column h-100">
            <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
              <app-chess-board [fen]="facade.state.fen" [selectedSquare]="facade.selectedSquare"
                [highlightedSquares]="facade.highlightedSquares" [boardTheme]="boardTheme"
                (squareSelected)="facade.onBoardSquareSelected($event)" />
            </div>

            <section class="top-section">
              <section class="board-theme-card" aria-label="Board design chooser">
                <h3>Board Design</h3>
                <div class="board-theme-group" role="radiogroup" aria-label="Board design">
                  <label class="board-theme-option">
                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'arabian'"
                      (change)="setBoardTheme('arabian')" />
                    <span>Arabian</span>
                  </label>

                  <label class="board-theme-option">
                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'classic'"
                      (change)="setBoardTheme('classic')" />
                    <span>Classic</span>
                  </label>
                </div>
              </section>

              <app-input-card label="Play move (UCI)" placeholder="e2e4" buttonLabel="Send Move" inputType="input"
                [value]="facade.moveInput" cardClass="move-card" hintText="Click your piece to highlight legal targets."
                (valueChange)="facade.moveInput = $event" (buttonClick)="facade.submitMove()" />
            </section>
          </section>
        </div>

        <!-- Right Sidebar - Export -->
        <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
          <section class="history-card">
            <h2>Move History</h2>

            @if (facade.state.moves.length === 0) {
            <p class="history-empty">No moves yet.</p>
            } @else {
            <ol class="history-list">
              @for (move of facade.state.moves; track $index) {
              <li>
                <span class="history-number">{{ $index + 1 }}.</span>
                <span class="history-move">{{ move }}</span>
              </li>
              }
            </ol>
            }
          </section>

          <section class="export-card">
            <h2>Export</h2>
            <div class="export-mode-group" role="radiogroup" aria-label="Export mode">
              <label class="export-mode-option">
                <input type="radio" name="exportType" [checked]="exportType === 'fen'"
                  (change)="setExportType('fen')" />
                <span>FEN</span>
              </label>
              <label class="export-mode-option">
                <input type="radio" name="exportType" [checked]="exportType === 'pgn'"
                  (change)="setExportType('pgn')" />
                <span>PGN</span>
              </label>
            </div>

            <textarea class="export-text" [value]="exportValue"
              [placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'" rows="8"
              readonly></textarea>

            <button type="button" class="app-btn w-100" (click)="completeExport()">Done</button>

            @if (exportNotice) {
            <p class="export-note">{{ exportNotice }}</p>
            }
          </section>
        </div>
      </div>
    </div>
    }

    @if (facade.errorMessage) {
    <p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
    }
  </section>
</main>