feat: move history, export import fixed, timer added

src/app/pages/game/game.component.html

@@ -25,18 +25,19 @@
       }
       <div class="container-fluid">
         <div class="row g-3">
-          <!-- Left Sidebar - FEN Import -->
+          <!-- Left Sidebar - Dummy Timers -->
           <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
-            <app-input-card
-              label="Import FEN"
-              placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
-              buttonLabel="Load FEN"
-              inputType="textarea"
-              [value]="facade.fenInput"
-              cardClass="fen-card"
-              (valueChange)="facade.fenInput = $event"
-              (buttonClick)="facade.importFen()"
-            />
+            <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 -->
@@ -67,18 +68,62 @@
             </section>
           </div>
 
-          <!-- Right Sidebar - PGN Import -->
+          <!-- Right Sidebar - Export -->
           <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
-            <app-input-card
-              label="Import PGN"
-              placeholder="1. e4 e5 2. Nf3 Nc6 *"
-              buttonLabel="Load PGN"
-              inputType="textarea"
-              [value]="facade.pgnInput"
-              cardClass="pgn-card"
-              (valueChange)="facade.pgnInput = $event"
-              (buttonClick)="facade.importPgn()"
-            />
+            <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="export-button" (click)="completeExport()">Done</button>
+
+              @if (exportNotice) {
+                <p class="export-note">{{ exportNotice }}</p>
+              }
+            </section>
           </div>
         </div>
       </div>