fix: removed cache files

.gitignore

@@ -22,12 +22,8 @@ yarn-error.log
 
 # Visual Studio Code
 .vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
 .history/*
-
+.angualar/
 # Miscellaneous
 /.angular/cache
 .sass-cache/

src/app/components/chess-board/chess-board.component.css

@@ -1,6 +1,6 @@
 .board-shell {
-  width: min(100%, 82dvh, 760px);
-  max-width: calc(100dvw - 2rem);
+  --bottom-frame-height: clamp(18px, 4.5cqh, 40px);
+  width: min(98cqw, calc(98cqh - var(--bottom-frame-height)));
   margin: 0 auto;
 }
 
@@ -51,8 +51,10 @@
 }
 
 .board-bottom {
+  height: var(--bottom-frame-height);
   width: 100%;
   display: block;
+  object-fit: fill;
   border: 2px solid #5A2C28;
   border-top: 0;
   border-radius: 0 0 10px 10px;

src/app/components/chess-piece/chess-piece.component.css

@@ -1,6 +1,6 @@
 .piece {
-  width: 90%;
-  height: 90%;
+  width: clamp(40px, 9cqh, 130px);
+  height: clamp(40px, 9cqh, 130px);
   display: block;
   object-fit: contain;
   pointer-events: none;

src/app/pages/game/game.component.css

@@ -40,35 +40,24 @@ h2 {
 
 .top-section {
   display: grid;
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
   flex: 0 0 auto;
 }
 
-.state-grid {
+.content-layout {
+  flex: 1 1 auto;
+  min-height: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-template-columns: minmax(220px, 0.95fr) minmax(0, 2.4fr) minmax(220px, 0.95fr);
   gap: 0.75rem;
-  margin-bottom: 0.5rem;
 }
 
-.panel {
-  background: #B9C2DA;
-  border-radius: 10px;
-  border: 2px solid #5A2C28;
-  padding: 0.75rem;
-}
-
-.panel p {
-  margin: 0.3rem 0;
-}
-
-code {
-  display: block;
-  background: #E1EAA9;
-  border-radius: 8px;
-  padding: 0.5rem;
-  overflow-wrap: anywhere;
+.center-column {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .move-form {
@@ -78,11 +67,17 @@ code {
   gap: 0.75rem;
 }
 
+.board-hint {
+  margin: 0;
+  color: #5A2C28;
+}
+
 .board-section {
   flex: 1 1 auto;
-  min-height: 0;
+  min-height: 180px;
   display: grid;
   place-items: center;
+  container-type: size;
   padding: clamp(0.35rem, 1vw, 0.75rem);
   border-radius: 10px;
   border: 2px solid #5A2C28;
@@ -90,6 +85,22 @@ code {
   overflow: hidden;
 }
 
+.import-card {
+  background: #E1EAA9;
+  border: 2px solid #5A2C28;
+  border-radius: 10px;
+  padding: 0.65rem;
+  display: grid;
+  align-self: start;
+  align-content: start;
+  gap: 0.5rem;
+}
+
+.import-card label {
+  color: #5A2C28;
+  font-weight: 700;
+}
+
 input {
   border: 2px solid #5A2C28;
   border-radius: 10px;
@@ -98,6 +109,15 @@ input {
   min-width: 180px;
 }
 
+textarea {
+  border: 2px solid #5A2C28;
+  border-radius: 10px;
+  background: #B9DAD1;
+  padding: 0.6rem 0.75rem;
+  resize: vertical;
+  min-height: 80px;
+}
+
 button {
   border: 2px solid #5A2C28;
   border-radius: 10px;
@@ -117,3 +137,25 @@ button:hover {
   color: #5A2C28;
   font-weight: 700;
 }
+
+@media (max-width: 920px) {
+  .content-layout {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "center"
+      "fen"
+      "pgn";
+  }
+
+  .center-column {
+    grid-area: center;
+  }
+
+  .fen-card {
+    grid-area: fen;
+  }
+
+  .pgn-card {
+    grid-area: pgn;
+  }
+}

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

@@ -9,39 +9,50 @@
     @if (loading) {
       <p>Loading game state...</p>
     } @else if (state) {
-      <section class="top-section">
-        <div class="state-grid">
-          <div class="panel">
-            <h2>Status</h2>
-            <p>Turn: <strong>{{ state.turn }}</strong></p>
-            <p>Status: <strong>{{ state.status }}</strong></p>
-            <p>FEN:</p>
-            <code>{{ state.fen }}</code>
-          </div>
+      <section class="content-layout">
+        <aside class="import-card fen-card">
+          <label for="fenImport">Import FEN</label>
+          <textarea
+            id="fenImport"
+            name="fenImport"
+            [(ngModel)]="fenInput"
+            rows="4"
+            placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
+          ></textarea>
+          <button type="button" (click)="importFen()">Load FEN</button>
+        </aside>
 
-          <div class="panel">
-            <h2>Moves</h2>
-            <p>PGN: {{ state.pgn || 'No moves yet' }}</p>
-            <p>Played UCI: {{ state.moves.length ? state.moves.join(', ') : 'None' }}</p>
-            <p>Legal UCI: {{ legalMoveUciList.length ? legalMoveUciList.join(', ') : 'None' }}</p>
-            <p>Board: click your piece to highlight legal targets.</p>
-          </div>
-        </div>
+        <section class="center-column">
+          <section class="top-section">
+            <form class="move-form" (ngSubmit)="submitMove()">
+              <label for="uciMove">Play move (UCI)</label>
+              <input id="uciMove" name="uciMove" [(ngModel)]="moveInput" placeholder="e2e4" />
+              <button type="submit">Send Move</button>
+            </form>
+            <p class="board-hint">Click your piece to highlight legal targets.</p>
+          </section>
 
-        <form class="move-form" (ngSubmit)="submitMove()">
-          <label for="uciMove">Play move (UCI)</label>
-          <input id="uciMove" name="uciMove" [(ngModel)]="moveInput" placeholder="e2e4" />
-          <button type="submit">Send Move</button>
-        </form>
-      </section>
+          <section class="board-section">
+            <app-chess-board
+              [fen]="state.fen"
+              [selectedSquare]="selectedSquare"
+              [highlightedSquares]="highlightedSquares"
+              (squareSelected)="onBoardSquareSelected($event)"
+            />
+          </section>
+        </section>
 
-      <section class="board-section">
-        <app-chess-board
-          [fen]="state.fen"
-          [selectedSquare]="selectedSquare"
-          [highlightedSquares]="highlightedSquares"
-          (squareSelected)="onBoardSquareSelected($event)"
-        />
+        <aside class="import-card pgn-card">
+          <label for="pgnImport">Import PGN</label>
+          <textarea
+            id="pgnImport"
+            name="pgnImport"
+            [(ngModel)]="pgnInput"
+            rows="4"
+            placeholder="1. e4 e5 2. Nf3 Nc6 *"
+          ></textarea>
+          <button type="button" (click)="importPgn()">Load PGN</button>
+        </aside>
       </section>
     }
 

src/app/pages/game/game.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { interval, startWith, Subscription, switchMap } from 'rxjs';
 import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
 import { GameFull, GameState, GameStreamEvent, LegalMove } from '../../models/game.models';
@@ -19,7 +19,8 @@ export class GameComponent implements OnInit, OnDestroy {
   game: GameFull | null = null;
   errorMessage = '';
   moveInput = '';
-  legalMoves: LegalMove[] = [];
+  fenInput = '';
+  pgnInput = '';
   loading = true;
   selectedSquare: string | null = null;
   highlightedSquares: string[] = [];
@@ -31,6 +32,7 @@ export class GameComponent implements OnInit, OnDestroy {
 
   constructor(
     private readonly route: ActivatedRoute,
+    private readonly router: Router,
     private readonly gameApi: GameApiService
   ) {}
 
@@ -38,10 +40,6 @@ export class GameComponent implements OnInit, OnDestroy {
     return this.game?.state ?? null;
   }
 
-  get legalMoveUciList(): string[] {
-    return this.legalMoves.map((move) => move.uci);
-  }
-
   ngOnInit(): void {
     this.routeSubscription = this.route.paramMap.subscribe((paramMap) => {
       const id = paramMap.get('gameId');
@@ -110,7 +108,6 @@ export class GameComponent implements OnInit, OnDestroy {
         }
         this.moveInput = '';
         this.clearSelection();
-        this.loadLegalMoves();
       },
       error: (error: { error?: { message?: string } }) => {
         this.errorMessage = error.error?.message ?? 'Move rejected.';
@@ -118,6 +115,46 @@ export class GameComponent implements OnInit, OnDestroy {
     });
   }
 
+  importFen(): void {
+    const fen = this.fenInput.trim();
+    if (!fen) {
+      this.errorMessage = 'Please provide a FEN string.';
+      return;
+    }
+
+    this.errorMessage = '';
+    this.gameApi.importFen(fen).subscribe({
+      next: (game) => {
+        this.fenInput = '';
+        this.pgnInput = '';
+        void this.router.navigate(['/game', game.gameId]);
+      },
+      error: (error: { error?: { message?: string } }) => {
+        this.errorMessage = error.error?.message ?? 'FEN import failed.';
+      }
+    });
+  }
+
+  importPgn(): void {
+    const pgn = this.pgnInput.trim();
+    if (!pgn) {
+      this.errorMessage = 'Please provide a PGN string.';
+      return;
+    }
+
+    this.errorMessage = '';
+    this.gameApi.importPgn(pgn).subscribe({
+      next: (game) => {
+        this.pgnInput = '';
+        this.fenInput = '';
+        void this.router.navigate(['/game', game.gameId]);
+      },
+      error: (error: { error?: { message?: string } }) => {
+        this.errorMessage = error.error?.message ?? 'PGN import failed.';
+      }
+    });
+  }
+
   private loadGame(): void {
     this.loading = true;
     this.errorMessage = '';
@@ -129,7 +166,6 @@ export class GameComponent implements OnInit, OnDestroy {
       next: (game) => {
         this.game = game;
         this.loading = false;
-        this.loadLegalMoves();
         this.startStream();
         this.startPolling();
       },
@@ -140,17 +176,6 @@ export class GameComponent implements OnInit, OnDestroy {
     });
   }
 
-  private loadLegalMoves(): void {
-    this.gameApi.getLegalMoves(this.gameId).subscribe({
-      next: (response) => {
-        this.legalMoves = response.moves;
-      },
-      error: () => {
-        this.legalMoves = [];
-      }
-    });
-  }
-
   private startStream(): void {
     this.streamSubscription = this.gameApi.streamGame(this.gameId).subscribe({
       next: (event) => this.applyStreamEvent(event),
@@ -172,7 +197,6 @@ export class GameComponent implements OnInit, OnDestroy {
           this.game = game;
           if (previousMoves !== game.state.moves.join(',')) {
             this.clearSelection();
-            this.loadLegalMoves();
           }
         }
       });
@@ -182,7 +206,6 @@ export class GameComponent implements OnInit, OnDestroy {
     if (event.type === 'gameFull') {
       this.game = event.game;
       this.clearSelection();
-      this.loadLegalMoves();
       return;
     }
 
@@ -192,7 +215,6 @@ export class GameComponent implements OnInit, OnDestroy {
       if (event.state.moves.length !== moveCountBefore) {
         this.clearSelection();
       }
-      this.loadLegalMoves();
       return;
     }
 

src/app/services/game-api.service.ts

@@ -37,6 +37,14 @@ export class GameApiService {
     return this.http.get<LegalMovesResponse>(`${this.apiBase}/api/board/game/${gameId}/moves`, { params });
   }
 
+  importFen(fen: string): Observable<GameFull> {
+    return this.http.post<GameFull>(`${this.apiBase}/api/board/game/import/fen`, { fen });
+  }
+
+  importPgn(pgn: string): Observable<GameFull> {
+    return this.http.post<GameFull>(`${this.apiBase}/api/board/game/import/pgn`, { pgn });
+  }
+
   streamGame(gameId: string): Observable<GameStreamEvent> {
     return new Observable<GameStreamEvent>((observer) => {
       const wsUrl = `${this.wsBase}/api/board/game/${gameId}/stream`;