fix: size of pieces and removed text view of the game state

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

@@ -1,6 +1,6 @@
 .board-shell {
-  width: min(100%, 82dvh, 760px);
+  --bottom-frame-height: clamp(18px, 4.5cqh, 40px);
-  max-width: calc(100dvw - 2rem);
+  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%;
+  width: clamp(40px, 9cqh, 130px);
-  height: 90%;
+  height: clamp(40px, 9cqh, 130px);
   display: block;
   object-fit: contain;
   pointer-events: none;

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

@@ -40,35 +40,9 @@ h2 {
 
 .top-section {
   display: grid;
-  gap: 0.75rem;
+  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  flex: 0 0 auto;
-}
-
-.state-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 0.75rem;
   margin-bottom: 0.5rem;
-}
+  flex: 0 0 auto;
-
-.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;
 }
 
 .move-form {
@@ -78,11 +52,17 @@ code {
   gap: 0.75rem;
 }
 
+.board-hint {
+  margin: 0;
+  color: #5A2C28;
+}
+
 .board-section {
   flex: 1 1 auto;
   min-height: 0;
   display: grid;
   place-items: center;
+  container-type: size;
   padding: clamp(0.35rem, 1vw, 0.75rem);
   border-radius: 10px;
   border: 2px solid #5A2C28;

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

@@ -10,29 +10,12 @@
       <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>
-
-          <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>
-
         <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>
 
       <section class="board-section">

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

@@ -19,7 +19,6 @@ export class GameComponent implements OnInit, OnDestroy {
   game: GameFull | null = null;
   errorMessage = '';
   moveInput = '';
-  legalMoves: LegalMove[] = [];
   loading = true;
   selectedSquare: string | null = null;
   highlightedSquares: string[] = [];
@@ -38,10 +37,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 +105,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.';
@@ -129,7 +123,6 @@ export class GameComponent implements OnInit, OnDestroy {
       next: (game) => {
         this.game = game;
         this.loading = false;
-        this.loadLegalMoves();
         this.startStream();
         this.startPolling();
       },
@@ -140,17 +133,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 +154,6 @@ export class GameComponent implements OnInit, OnDestroy {
           this.game = game;
           if (previousMoves !== game.state.moves.join(',')) {
             this.clearSelection();
-            this.loadLegalMoves();
           }
         }
       });
@@ -182,7 +163,6 @@ export class GameComponent implements OnInit, OnDestroy {
     if (event.type === 'gameFull') {
       this.game = event.game;
       this.clearSelection();
-      this.loadLegalMoves();
       return;
     }
 
@@ -192,7 +172,6 @@ export class GameComponent implements OnInit, OnDestroy {
       if (event.state.moves.length !== moveCountBefore) {
         this.clearSelection();
       }
-      this.loadLegalMoves();
       return;
     }