feat: join pervious game added

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

@@ -7,10 +7,10 @@
 .board-grid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  border: 2px solid #5A2C28;
+  border: var(--border-width) solid var(--color-border);
-  border-radius: 10px 10px 0 0;
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
   overflow: hidden;
-  background: #5A2C28;
+  background: var(--color-text-primary);
 }
 
 .square {
@@ -41,12 +41,13 @@
   width: 28%;
   height: 28%;
   border-radius: 50%;
-  background: rgba(193, 158, 245, 0.75);
+  background: var(--color-secondary-purple);
-  border: 2px solid #5A2C28;
+  opacity: 0.75;
+  border: var(--border-width) solid var(--color-border);
 }
 
 .square.selected {
-  outline: 3px solid #BA6D4B;
+  outline: 3px solid var(--color-primary);
   outline-offset: -3px;
 }
 
@@ -55,7 +56,7 @@
   width: 100%;
   display: block;
   object-fit: fill;
-  border: 2px solid #5A2C28;
+  border: var(--border-width) solid var(--color-border);
   border-top: 0;
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
 }

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

@@ -1,6 +1,6 @@
 .piece {
   width: clamp(50px, 11cqh, 160px);
-  height: clamp(50px, 11cqh, 160px);
+  height: clamp(40px, 8cqh, 120px);
   display: block;
   object-fit: contain;
   pointer-events: none;

src/app/components/input-card/input-card.component.css

@@ -0,0 +1,63 @@
+.input-card {
+  background: var(--color-bg-card);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-lg-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-lg-gap);
+}
+
+.move-card {
+  padding: var(--size-sm-padding);
+  gap: var(--size-sm-gap);
+}
+
+.move-card input {
+  min-height: 45px;
+  padding: var(--size-md-padding);
+}
+
+.input-card label {
+  color: var(--color-text-primary);
+  font-weight: 700;
+  margin-bottom: var(--size-xs);
+}
+
+.input-card textarea {
+  resize: vertical;
+  height: 40px;
+  background-color:lightcyan;
+  border: 3px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+}
+
+.input-card input {
+  min-width: unset;
+  background-color:lightcyan;
+    border: 3px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+
+}
+
+.input-card .btn {
+  border: var(--button-border);
+  border-radius: var(--border-radius-sm);
+  background: var(--color-bg-button);
+  color: var(--color-text-primary);
+  padding: var(--button-padding);
+  cursor: pointer;
+  font-weight: 600;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.input-card .btn:hover {
+  background: var(--color-bg-button-hover);
+  color: var(--color-text-button-hover);
+}
+
+.hint-text {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: 0.9rem;
+}

src/app/components/input-card/input-card.component.html

@@ -0,0 +1,31 @@
+<section [ngClass]="['input-card', cardClass]">
+  <label>{{ label }}</label>
+
+  @if (inputType === 'textarea') {
+    <textarea
+      #textareaInput
+      [placeholder]="placeholder"
+      [value]="value"
+      [rows]="rows"
+      (input)="onValueChange(textareaInput.value)"
+      class="form-input"
+    ></textarea>
+  } @else {
+    <input
+      #textInput
+      type="text"
+      [placeholder]="placeholder"
+      [value]="value"
+      (input)="onValueChange(textInput.value)"
+      class="form-input"
+    />
+  }
+
+  <button type="button" class="btn w-100" (click)="onButtonClick()">
+    {{ buttonLabel }}
+  </button>
+
+  @if (hintText) {
+    <p class="hint-text">{{ hintText }}</p>
+  }
+</section>

src/app/components/input-card/input-card.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-input-card',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './input-card.component.html',
+  styleUrl: './input-card.component.css',
+})
+export class InputCardComponent {
+  @Input() label: string = '';
+  @Input() placeholder: string = '';
+  @Input() buttonLabel: string = 'Send';
+  @Input() inputType: 'input' | 'textarea' = 'input';
+  @Input() value: string = '';
+  @Input() cardClass: string = '';
+  @Input() hintText: string = '';
+  @Input() rows: number = 4;
+
+  @Output() valueChange = new EventEmitter<string>();
+  @Output() buttonClick = new EventEmitter<void>();
+
+  onValueChange(newValue: string): void {
+    this.value = newValue;
+    this.valueChange.emit(newValue);
+  }
+
+  onButtonClick(): void {
+    this.buttonClick.emit();
+  }
+}

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

@@ -1,38 +1,38 @@
 .game-shell {
   min-height: 100dvh;
-  padding: clamp(0.75rem, 2vw, 1.5rem);
+  padding: clamp(var(--size-md), 2vw, var(--size-xl));
 }
 
 .game-card {
   max-width: 1400px;
   margin: 0 auto;
-  background: #F3C8A0;
+  background: var(--color-bg-main);
-  border: 2px solid #5A2C28;
+  border: var(--border-width) solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--border-radius-lg);
-  padding: clamp(1rem, 2vw, 1.5rem);
+  padding: clamp(var(--size-lg), 2vw, var(--size-xl));
-  box-shadow: 0 8px 24px rgba(90, 44, 40, 0.2);
+  box-shadow: var(--shadow-md);
 }
 
 header {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--size-xl);
 }
 
 h1,
 h2 {
-  color: #5A2C28;
+  color: var(--color-text-primary);
-  margin: 0 0 0.5rem;
+  margin: 0 0 var(--size-md);
-  font-size: clamp(1.5rem, 4vw, 2rem);
+  font-size: var(--heading-h1);
 }
 
 .meta {
-  color: #5A2C28;
+  color: var(--color-text-primary);
   font-size: 0.95rem;
 }
 
 .back-link {
   display: inline-block;
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--size-sm);
-  color: #5A2C28;
+  color: var(--color-text-primary);
   text-decoration: none;
   font-weight: 600;
 }
@@ -42,25 +42,19 @@ h2 {
 }
 
 .top-section {
-  background: #F3C8A0;
+  display: grid;
-  padding: 0.75rem;
+  gap: var(--size-md);
-  border-radius: 8px;
+  margin-top: var(--size-sm);
-  border: 1px solid #5A2C28;
+  flex: 0 0 auto;
 }
 
-.move-form {
+.move-card {
-  align-items: center;
+  padding: var(--size-lg-padding);
 }
 
-.move-form label {
+.move-card .btn {
-  color: #5A2C28;
+  align-self: flex-start;
-  font-weight: 600;
+  width: auto;
-  white-space: nowrap;
-}
-
-.board-hint {
-  color: #5A2C28;
-  margin: 0;
 }
 
 .center-column {
@@ -68,72 +62,22 @@ h2 {
 }
 
 .board-section {
-  background: #B9DAD1;
+  background: var(--color-bg-board);
-  border: 2px solid #5A2C28;
+  border: var(--border-width) solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--border-radius-md);
-  padding: clamp(0.5rem, 1vw, 1rem);
+  padding: clamp(var(--size-sm), 1vw, var(--size-lg));
   min-height: 400px;
   container-type: size;
 }
 
-.import-card {
-  background: #E1EAA9;
-  border: 2px solid #5A2C28;
-  border-radius: 10px;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.import-card label {
-  color: #5A2C28;
-  font-weight: 700;
-  margin-bottom: 0.25rem;
-}
-
-.import-card textarea {
-  border: 2px solid #5A2C28;
-  border-radius: 8px;
-  background: #B9DAD1;
-  padding: 0.6rem 0.75rem;
-  resize: vertical;
-  min-height: 100px;
-  font-family: inherit;
-}
-
-.import-card input {
-  border: 2px solid #5A2C28;
-  border-radius: 8px;
-  background: #B9DAD1;
-  padding: 0.6rem 0.75rem;
-  font-family: inherit;
-}
-
-.btn {
-  border: 2px solid #5A2C28;
-  border-radius: 8px;
-  background: #C19EF5;
-  color: #5A2C28;
-  padding: 0.6rem 1rem;
-  cursor: pointer;
-  font-weight: 600;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-.btn:hover {
-  background: #BA6D4B;
-  color: #F3C8A0;
-}
-
 .alert {
-  border-radius: 8px;
+  border-radius: var(--border-radius-sm);
-  border: 2px solid #5A2C28;
+  border: var(--border-width) solid var(--color-border);
 }
 
 @media (max-width: 991px) {
   .game-card {
-    padding: clamp(0.75rem, 1.5vw, 1rem);
+    padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
   }
 
   .board-section {
@@ -142,26 +86,26 @@ h2 {
 
   h1,
   h2 {
-    font-size: clamp(1.25rem, 3vw, 1.75rem);
+    font-size: var(--heading-h1-tablet);
   }
 }
 
 @media (max-width: 768px) {
   .game-shell {
-    padding: clamp(0.5rem, 1.5vw, 1rem);
+    padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
   }
 
   .game-card {
-    padding: clamp(0.5rem, 1vw, 0.75rem);
+    padding: clamp(var(--size-sm), 1vw, var(--size-md));
   }
 
   header {
-    margin-bottom: 1rem;
+    margin-bottom: var(--size-lg);
   }
 
   h1,
   h2 {
-    font-size: 1.25rem;
+    font-size: var(--heading-h1-mobile);
   }
 
   .meta {
@@ -169,61 +113,31 @@ h2 {
   }
 
   .top-section {
-    padding: 0.5rem;
+    gap: var(--size-xs);
-    margin-bottom: 0.75rem;
+    margin-bottom: var(--size-xs);
-  }
-
-  .move-form {
-    flex-wrap: wrap;
-  }
-
-  .move-form label {
-    flex-basis: 100%;
-    margin-bottom: 0.5rem;
   }
 
   .board-section {
     min-height: 300px;
   }
-
-  .import-card {
-    padding: 0.75rem;
-    gap: 0.5rem;
-  }
-
-  .import-card label {
-    font-size: 0.9rem;
-  }
-
-  .import-card textarea,
-  .import-card input {
-    min-height: 70px;
-    font-size: 0.9rem;
-    padding: 0.5rem;
-  }
-
-  .btn {
-    padding: 0.5rem 0.75rem;
-    font-size: 0.9rem;
-  }
 }
 
 @media (max-width: 480px) {
   .game-shell {
-    padding: 0.5rem;
+    padding: var(--size-sm);
   }
 
   .game-card {
-    padding: 0.5rem;
+    padding: var(--size-sm);
-    border-radius: 8px;
+    border-radius: var(--border-radius-md);
   }
 
   header {
-    margin-bottom: 0.75rem;
+    margin-bottom: var(--size-md);
   }
 
   h1 {
-    font-size: 1.1rem;
+    font-size: var(--heading-h1-small);
   }
 
   .meta {
@@ -231,23 +145,11 @@ h2 {
   }
 
   .top-section {
-    padding: 0.4rem;
+    gap: var(--size-xs-gap);
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--size-xs);
   }
 
   .board-section {
     min-height: 250px;
   }
-
-  .import-card {
-    padding: 0.5rem;
-    gap: 0.35rem;
-  }
-
-  .import-card textarea,
-  .import-card input {
-    min-height: 50px;
-    font-size: 0.8rem;
-    padding: 0.4rem;
-  }
 }

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

@@ -13,37 +13,21 @@
         <div class="row g-3">
           <!-- Left Sidebar - FEN Import -->
           <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
-            <aside class="import-card fen-card h-100">
+            <app-input-card
-              <label for="fenImport">Import FEN</label>
+              label="Import FEN"
-              <textarea
+              placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
-                id="fenImport"
+              buttonLabel="Load FEN"
-                name="fenImport"
+              inputType="textarea"
-                [(ngModel)]="facade.fenInput"
+              [value]="facade.fenInput"
-                rows="4"
+              cardClass="fen-card"
-                placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
+              (valueChange)="facade.fenInput = $event"
-              ></textarea>
+              (buttonClick)="facade.importFen()"
-              <button type="button" class="btn w-100" (click)="facade.importFen()">Load FEN</button>
+            />
-            </aside>
           </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="top-section mb-3">
-                <form class="move-form d-flex flex-wrap gap-2 mb-2" (ngSubmit)="facade.submitMove()">
-                  <label for="uciMove" class="form-label mb-0">Play move (UCI)</label>
-                  <input 
-                    id="uciMove" 
-                    name="uciMove" 
-                    class="form-control flex-grow-1"
-                    [(ngModel)]="facade.moveInput" 
-                    placeholder="e2e4" 
-                  />
-                  <button type="submit" class="btn">Send Move</button>
-                </form>
-                <p class="board-hint small mb-0">Click your piece to highlight legal targets.</p>
-              </div>
-
               <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
                 <app-chess-board
                   [fen]="facade.state.fen"
@@ -52,22 +36,35 @@
                   (squareSelected)="facade.onBoardSquareSelected($event)"
                 />
               </div>
+
+              <section class="top-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 - PGN Import -->
           <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
-            <aside class="import-card pgn-card h-100">
+            <app-input-card
-              <label for="pgnImport">Import PGN</label>
+              label="Import PGN"
-              <textarea
+              placeholder="1. e4 e5 2. Nf3 Nc6 *"
-                id="pgnImport"
+              buttonLabel="Load PGN"
-                name="pgnImport"
+              inputType="textarea"
-                [(ngModel)]="facade.pgnInput"
+              [value]="facade.pgnInput"
-                rows="4"
+              cardClass="pgn-card"
-                placeholder="1. e4 e5 2. Nf3 Nc6 *"
+              (valueChange)="facade.pgnInput = $event"
-              ></textarea>
+              (buttonClick)="facade.importPgn()"
-              <button type="button" class="btn w-100" (click)="facade.importPgn()">Load PGN</button>
+            />
-            </aside>
           </div>
         </div>
       </div>

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

@@ -4,12 +4,13 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
+import { InputCardComponent } from '../../components/input-card/input-card.component';
 import { GameFacade } from './game.facade';
 
 @Component({
   selector: 'app-game',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink, ChessBoardComponent],
+  imports: [CommonModule, FormsModule, RouterLink, ChessBoardComponent, InputCardComponent],
   providers: [GameFacade],
   templateUrl: './game.component.html',
   styleUrl: './game.component.css'

src/app/pages/game/game.facade.ts

@@ -1,7 +1,7 @@
 import { DestroyRef, Injectable, OnDestroy, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { interval, startWith, Subscription, switchMap } from 'rxjs';
+import { interval, startWith, Subscription, switchMap, delay } from 'rxjs';
 import { getPieceAtSquare, isPieceColor } from '../../core/chess/fen.utils';
 import { getErrorMessage } from '../../core/http/error-message.util';
 import { GameFull, GameState, GameStreamEvent, LegalMove } from '../../models/game.models';
@@ -25,16 +25,37 @@ export class GameFacade implements OnDestroy {
   private readonly destroyRef = inject(DestroyRef);
   private streamSubscription: Subscription | null = null;
   private pollSubscription: Subscription | null = null;
+  private botMoveSubscription: Subscription | null = null;
 
   ngOnDestroy(): void {
     this.streamSubscription?.unsubscribe();
     this.pollSubscription?.unsubscribe();
+    this.botMoveSubscription?.unsubscribe();
   }
 
   get state(): GameState | null {
     return this.game?.state ?? null;
   }
 
+  private isBotPlayer(playerId: string): boolean {
+    return playerId.startsWith('bot-');
+  }
+
+  private isPlayingAgainstBot(): boolean {
+    if (!this.game) {
+      return false;
+    }
+    return this.isBotPlayer(this.game.white.id) || this.isBotPlayer(this.game.black.id);
+  }
+
+  private isCurrentPlayerBot(): boolean {
+    if (!this.game || !this.state) {
+      return false;
+    }
+    const currentPlayer = this.state.turn === 'white' ? this.game.white : this.game.black;
+    return this.isBotPlayer(currentPlayer.id);
+  }
+
   setGameId(gameId: string): void {
     this.gameId = gameId;
     this.loadGame();
@@ -94,6 +115,7 @@ export class GameFacade implements OnDestroy {
           }
           this.moveInput = '';
           this.clearSelection();
+          this.tryMakeBotMove();
         },
         error: (error) => {
           this.errorMessage = getErrorMessage(error, 'Move rejected.');
@@ -153,6 +175,7 @@ export class GameFacade implements OnDestroy {
     this.clearSelection();
     this.streamSubscription?.unsubscribe();
     this.pollSubscription?.unsubscribe();
+    this.botMoveSubscription?.unsubscribe();
     this.pollSubscription = null;
 
     this.gameApi
@@ -163,6 +186,7 @@ export class GameFacade implements OnDestroy {
           this.game = game;
           this.loading = false;
           this.startStream();
+          this.tryMakeBotMove();
         },
         error: (error) => {
           this.errorMessage = getErrorMessage(error, `Could not load game ${this.gameId}.`);
@@ -205,6 +229,7 @@ export class GameFacade implements OnDestroy {
           this.game = game;
           if (previousMoves !== game.state.moves.join(',')) {
             this.clearSelection();
+            this.tryMakeBotMove();
           }
         }
       });
@@ -214,6 +239,7 @@ export class GameFacade implements OnDestroy {
     if (event.type === 'gameFull') {
       this.game = event.game;
       this.clearSelection();
+      this.tryMakeBotMove();
       return;
     }
 
@@ -222,6 +248,7 @@ export class GameFacade implements OnDestroy {
       this.game = { ...this.game, state: event.state };
       if (event.state.moves.length !== moveCountBefore) {
         this.clearSelection();
+        this.tryMakeBotMove();
       }
       return;
     }
@@ -231,6 +258,45 @@ export class GameFacade implements OnDestroy {
     }
   }
 
+  private tryMakeBotMove(): void {
+    if (!this.isPlayingAgainstBot() || !this.isCurrentPlayerBot() || !this.state) {
+      return;
+    }
+
+    this.botMoveSubscription?.unsubscribe();
+    this.botMoveSubscription = this.gameApi
+      .getLegalMoves(this.gameId)
+      .pipe(
+        delay(1000),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe({
+        next: (response) => {
+          if (response.moves.length === 0) {
+            return;
+          }
+          const botMove = response.moves[Math.floor(Math.random() * response.moves.length)];
+          this.gameApi
+            .makeMove(this.gameId, botMove.uci)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+              next: (state) => {
+                if (this.game) {
+                  this.game = { ...this.game, state };
+                }
+                this.clearSelection();
+              },
+              error: (error) => {
+                this.errorMessage = getErrorMessage(error, 'Bot move failed.');
+              }
+            });
+        },
+        error: () => {
+          this.errorMessage = 'Could not get legal moves for bot move.';
+        }
+      });
+  }
+
   private clearSelection(): void {
     this.selectedSquare = null;
     this.selectedSquareMoves = [];

src/app/pages/welcome/welcome.component.css

@@ -2,98 +2,99 @@
   min-height: 100vh;
   display: grid;
   place-items: center;
-  padding: 2rem;
+  padding: var(--size-xl);
 }
 
 .welcome-card {
   width: min(900px, 100%);
-  border-radius: 12px;
+  border-radius: var(--border-radius-lg);
-  border: 2px solid #5A2C28;
+  border: var(--border-width) solid var(--color-border);
-  background: #F3C8A0;
+  background: var(--color-bg-main);
-  padding: 2rem;
+  padding: var(--size-xl-padding);
-  box-shadow: 0 8px 24px rgba(90, 44, 40, 0.2);
+  box-shadow: var(--shadow-md);
 }
 
 h1 {
-  margin: 0 0 0.25rem;
+  margin: 0 0 var(--size-xs);
-  color: #5A2C28;
+  color: var(--color-text-primary);
+  font-size: var(--heading-h1);
 }
 
 p {
-  margin: 0 0 1.25rem;
+  margin: 0 0 var(--size-lg);
 }
 
 .mode-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1rem;
+  gap: var(--size-xl-gap);
 }
 
 .mode {
-  border: 2px solid #5A2C28;
+  border: var(--border-width) solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--border-radius-md);
-  padding: 1rem;
+  padding: var(--size-lg-padding);
   text-align: left;
   display: grid;
-  gap: 0.25rem;
+  gap: var(--size-xs);
 }
 
 .mode span {
   font-size: 1.15rem;
-  color: #5A2C28;
+  color: var(--color-text-primary);
 }
 
 .mode small {
-  color: #5A2C28;
+  color: var(--color-text-primary);
   opacity: 0.9;
 }
 
 .mode-active {
-  background: #B9DAD1;
+  background: var(--color-secondary-mint);
   cursor: pointer;
 }
 
 .mode-active:hover:enabled {
-  background: #B9C2DA;
+  background: var(--color-secondary-blue);
 }
 
 .mode-disabled {
-  background: #E1EAA9;
+  background: var(--color-bg-card);
   opacity: 0.75;
 }
 
 .error {
-  color: #5A2C28;
+  color: var(--color-text-primary);
   font-weight: 700;
-  margin-top: 1rem;
+  margin-top: var(--size-xl);
 }
 
 @media (max-width: 768px) {
   .welcome-shell {
-    padding: 1rem;
+    padding: var(--size-lg);
   }
 
   .welcome-card {
-    padding: 1.5rem;
+    padding: var(--size-xl);
   }
 
   h1 {
-    font-size: 1.5rem;
+    font-size: var(--heading-h1-mobile);
   }
 
   p {
     font-size: 0.875rem;
-    margin: 0 0 1rem;
+    margin: 0 0 var(--size-lg);
   }
 
   .mode-grid {
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    gap: 0.75rem;
+    gap: var(--size-md-gap);
   }
 
   .mode {
-    padding: 0.75rem;
+    padding: var(--size-md-padding);
-    gap: 0.15rem;
+    gap: var(--size-xs-gap);
   }
 
   .mode span {
@@ -111,22 +112,22 @@ p {
 
 @media (max-width: 480px) {
   .welcome-shell {
-    padding: 0.5rem;
+    padding: var(--size-sm);
   }
 
   .welcome-card {
-    padding: 1rem;
+    padding: var(--size-lg-padding);
-    border-radius: 8px;
+    border-radius: var(--border-radius-md);
   }
 
   h1 {
-    font-size: 1.25rem;
+    font-size: var(--heading-h1-small);
-    margin: 0 0 0.15rem;
+    margin: 0 0 var(--size-xs);
   }
 
   p {
     font-size: 0.8rem;
-    margin: 0 0 0.75rem;
+    margin: 0 0 var(--size-md);
   }
 
   .mode-grid {
@@ -134,10 +135,163 @@ p {
   }
 
   .mode {
-    padding: 0.65rem;
+    padding: var(--size-md-padding);
   }
 
   .mode span {
     font-size: 0.95rem;
   }
 }
+
+.difficulty-selector {
+  grid-column: 1 / -1;
+  background: var(--color-bg-card);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-lg-padding);
+  margin: var(--size-md) 0;
+}
+
+.difficulty-selector p {
+  margin: 0 0 var(--size-md);
+  font-weight: 600;
+}
+
+.difficulty-buttons {
+  display: flex;
+  gap: var(--size-md-gap);
+  flex-wrap: wrap;
+}
+
+.difficulty-btn {
+  flex: 1;
+  min-width: 80px;
+  padding: var(--size-md-padding);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.difficulty-btn.easy {
+  background: var(--color-success-light, #d4edda);
+  color: var(--color-text-primary);
+}
+
+.difficulty-btn.easy:hover:enabled {
+  background: var(--color-success, #28a745);
+  color: white;
+}
+
+.difficulty-btn.medium {
+  background: var(--color-warning-light, #fff3cd);
+  color: var(--color-text-primary);
+}
+
+.difficulty-btn.medium:hover:enabled {
+  background: var(--color-warning, #ffc107);
+  color: var(--color-text-primary);
+}
+
+.difficulty-btn.hard {
+  background: var(--color-danger-light, #f8d7da);
+  color: var(--color-text-primary);
+}
+
+.difficulty-btn.hard:hover:enabled {
+  background: var(--color-danger, #dc3545);
+  color: white;
+}
+
+.join-game-form {
+  grid-column: 1 / -1;
+  background: var(--color-bg-card);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-lg-padding);
+  margin: var(--size-md) 0;
+}
+
+.join-game-form p {
+  margin: 0 0 var(--size-md);
+  font-weight: 600;
+}
+
+.join-game-input-group {
+  display: flex;
+  gap: var(--size-md-gap);
+  flex-wrap: wrap;
+}
+
+.join-game-input {
+  flex: 1;
+  min-width: 150px;
+  padding: var(--size-md-padding);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  background: white;
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: 1rem;
+  transition: border-color 0.3s ease;
+}
+
+.join-game-input:focus {
+  outline: none;
+  border-color: var(--color-secondary-mint);
+  box-shadow: 0 0 0 3px rgba(185, 218, 209, 0.2);
+}
+
+.join-game-input:disabled {
+  background: var(--color-bg-card);
+  opacity: 0.6;
+}
+
+.join-game-btn {
+  padding: var(--size-md-padding) var(--size-lg);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+}
+
+.join-game-btn.join {
+  background: var(--color-secondary-mint);
+  color: var(--color-text-primary);
+}
+
+.join-game-btn.join:hover:enabled {
+  background: var(--color-secondary-blue);
+}
+
+.join-game-btn.join:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.join-game-btn.cancel {
+  background: var(--color-bg-card);
+  color: var(--color-text-primary);
+}
+
+.join-game-btn.cancel:hover:enabled {
+  background: var(--color-border);
+}
+
+.join-game-btn.cancel:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.difficulty-btn.hard:hover:enabled {
+  background: var(--color-danger, #dc3545);
+  color: white;
+}
+
+.difficulty-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

src/app/pages/welcome/welcome.component.html

@@ -4,22 +4,71 @@
     <p>Pick a mode to begin.</p>
 
     <div class="mode-grid">
-      <button type="button" class="mode mode-disabled" disabled>
+      <button type="button" class="mode mode-active" (click)="toggleDifficultySelector()" [disabled]="creating">
         <span>Bot</span>
-        <small>Coming soon</small>
+        <small>{{ creating ? 'Creating game...' : 'Choose difficulty' }}</small>
       </button>
 
+      @if (showDifficultySelector) {
+        <div class="difficulty-selector">
+          <p>Select difficulty:</p>
+          <div class="difficulty-buttons">
+            <button type="button" class="difficulty-btn easy" (click)="startVsBot('easy')" [disabled]="creating">
+              Easy
+            </button>
+            <button type="button" class="difficulty-btn medium" (click)="startVsBot('medium')" [disabled]="creating">
+              Medium
+            </button>
+            <button type="button" class="difficulty-btn hard" (click)="startVsBot('hard')" [disabled]="creating">
+              Hard
+            </button>
+          </div>
+        </div>
+      }
+
       <button type="button" class="mode mode-active" (click)="startOneVsOne()" [disabled]="creating">
         <span>1 vs 1</span>
         <small>{{ creating ? 'Creating game...' : 'Start now' }}</small>
       </button>
 
-      <button type="button" class="mode mode-disabled" disabled>
+      <button type="button" class="mode mode-active" (click)="toggleJoinGameForm()" [disabled]="joiningGame">
-        <span>Future Technique</span>
+        <span>Join Game</span>
-        <small>Placeholder</small>
+        <small>{{ joiningGame ? 'Joining...' : 'Enter game ID' }}</small>
       </button>
     </div>
 
+    @if (showJoinGameForm) {
+      <div class="join-game-form">
+        <p>Enter the game ID:</p>
+        <div class="join-game-input-group">
+          <input
+            type="text"
+            class="join-game-input"
+            [(ngModel)]="gameIdInput"
+            placeholder="Paste game ID here"
+            [disabled]="joiningGame"
+            (keyup.enter)="joinGame()"
+          />
+          <button
+            type="button"
+            class="join-game-btn join"
+            (click)="joinGame()"
+            [disabled]="joiningGame || !gameIdInput.trim()"
+          >
+            {{ joiningGame ? 'Joining...' : 'Join' }}
+          </button>
+          <button
+            type="button"
+            class="join-game-btn cancel"
+            (click)="clearJoinGameForm()"
+            [disabled]="joiningGame"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    }
+
     @if (errorMessage) {
       <p class="error">{{ errorMessage }}</p>
     }

src/app/pages/welcome/welcome.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { finalize } from 'rxjs';
 import { getErrorMessage } from '../../core/http/error-message.util';
@@ -8,13 +9,17 @@ import { GameApiService } from '../../services/game-api.service';
 @Component({
   selector: 'app-welcome',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, FormsModule],
   templateUrl: './welcome.component.html',
   styleUrl: './welcome.component.css'
 })
 export class WelcomeComponent {
   creating = false;
   errorMessage = '';
+  showDifficultySelector = false;
+  showJoinGameForm = false;
+  gameIdInput = '';
+  joiningGame = false;
 
   constructor(
     private readonly router: Router,
@@ -41,4 +46,66 @@ export class WelcomeComponent {
         }
       });
   }
+
+  startVsBot(difficulty: 'easy' | 'medium' | 'hard'): void {
+    if (this.creating) {
+      return;
+    }
+
+    this.errorMessage = '';
+    this.creating = true;
+    this.showDifficultySelector = false;
+
+    this.gameApi
+      .createGameVsBot(difficulty)
+      .pipe(finalize(() => (this.creating = false)))
+      .subscribe({
+        next: (game) => {
+          void this.router.navigate(['/game', game.gameId]);
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Unable to create a game against bot.');
+        }
+      });
+  }
+
+  toggleDifficultySelector(): void {
+    this.showDifficultySelector = !this.showDifficultySelector;
+    this.showJoinGameForm = false;
+    this.errorMessage = '';
+  }
+
+  toggleJoinGameForm(): void {
+    this.showJoinGameForm = !this.showJoinGameForm;
+    this.showDifficultySelector = false;
+    this.errorMessage = '';
+    this.gameIdInput = '';
+  }
+
+  joinGame(): void {
+    if (this.joiningGame || !this.gameIdInput.trim()) {
+      return;
+    }
+
+    this.errorMessage = '';
+    this.joiningGame = true;
+
+    this.gameApi
+      .getGame(this.gameIdInput.trim())
+      .pipe(finalize(() => (this.joiningGame = false)))
+      .subscribe({
+        next: (game) => {
+          void this.router.navigate(['/game', game.gameId]);
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
+        }
+      });
+  }
+
+  clearJoinGameForm(): void {
+    this.showJoinGameForm = false;
+    this.gameIdInput = '';
+    this.errorMessage = '';
+  }
 }

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

@@ -7,7 +7,8 @@ import {
   GameFull,
   GameState,
   GameStreamEvent,
-  LegalMovesResponse
+  LegalMovesResponse,
+  PlayerInfo
 } from '../models/game.models';
 
 @Injectable({ providedIn: 'root' })
@@ -21,6 +22,25 @@ export class GameApiService {
     return this.http.post<GameFull>(`${this.apiBase}/api/board/game`, {});
   }
 
+  createGameVsBot(difficulty: 'easy' | 'medium' | 'hard' = 'medium'): Observable<GameFull> {
+    const playerColor = Math.random() > 0.5 ? 'white' : 'black';
+    const playerInfo: PlayerInfo = {
+      id: `player-${Date.now()}`,
+      displayName: 'You'
+    };
+    const botInfo: PlayerInfo = {
+      id: `bot-${difficulty}`,
+      displayName: `Bot (${difficulty})`
+    };
+
+    const payload =
+      playerColor === 'white'
+        ? { white: playerInfo, black: botInfo }
+        : { white: botInfo, black: playerInfo };
+
+    return this.http.post<GameFull>(`${this.apiBase}/api/board/game`, payload);
+  }
+
   getGame(gameId: string): Observable<GameFull> {
     return this.http.get<GameFull>(`${this.apiBase}/api/board/game/${gameId}`);
   }

src/styles-variables.css

@@ -0,0 +1,94 @@
+/* ========================================
+   COLOR VARIABLES - Semantic Naming
+   ======================================== */
+
+:root {
+  /* Primary Colors */
+  --color-primary: #BA6D4B;
+  --color-primary-dark: #5A2C28;
+  --color-primary-light: #F3C8A0;
+
+  /* Secondary Colors */
+  --color-secondary-mint: #B9DAD1;
+  --color-secondary-blue: #B9C2DA;
+  --color-secondary-purple: #C19EF5;
+  --color-secondary-lime: #E1EAA9;
+
+  /* Functional Colors */
+  --color-bg-main: #F3C8A0;
+  --color-bg-board: #B9DAD1;
+  --color-bg-card: #E1EAA9;
+  --color-bg-input: #B9DAD1;
+  --color-bg-input-focus: #B9C2DA;
+  --color-bg-button: #C19EF5;
+  --color-bg-button-hover: #BA6D4B;
+
+  --color-text-primary: #5A2C28;
+  --color-text-button-hover: #F3C8A0;
+  --color-border: #5A2C28;
+
+  /* ========================================
+     TYPOGRAPHY SIZES
+     ======================================== */
+
+  /* Header Sizes */
+  --heading-h1: clamp(1.5rem, 4vw, 2rem);
+  --heading-h1-tablet: clamp(1.25rem, 3vw, 1.75rem);
+  --heading-h1-mobile: 1.25rem;
+  --heading-h1-small: 1.1rem;
+
+  --heading-h2: clamp(1.5rem, 4vw, 2rem);
+
+  /* ========================================
+     SPACING SIZES (XS, SM, MD, LG, XL)
+     ======================================== */
+
+  /* Extra Small - Minimal spacing */
+  --size-xs: 0.25rem;
+  --size-xs-padding: 0.4rem;
+  --size-xs-gap: 0.15rem;
+
+  /* Small - Compact spacing */
+  --size-sm: 0.5rem;
+  --size-sm-padding: 0.5rem;
+  --size-sm-gap: 0.35rem;
+
+  /* Medium - Default spacing */
+  --size-md: 0.75rem;
+  --size-md-padding: 0.6rem 0.75rem;
+  --size-md-gap: 0.5rem;
+
+  /* Large - Generous spacing */
+  --size-lg: 1rem;
+  --size-lg-padding: 1rem;
+  --size-lg-gap: 0.75rem;
+
+  /* Extra Large - Maximum spacing */
+  --size-xl: 1.5rem;
+  --size-xl-padding: 1.5rem;
+  --size-xl-gap: 1rem;
+
+  /* ========================================
+     BORDER & RADIUS
+     ======================================== */
+  --border-width: 2px;
+  --border-radius-sm: 8px;
+  --border-radius-md: 10px;
+  --border-radius-lg: 12px;
+
+  /* ========================================
+     FORM ELEMENTS
+     ======================================== */
+  --form-input-padding: 0.6rem 0.75rem;
+  --form-input-border: var(--border-width) solid var(--color-border);
+  --form-input-radius: var(--border-radius-md);
+
+  --button-padding: 0.6rem 1rem;
+  --button-border: var(--border-width) solid var(--color-border);
+  --button-radius: var(--border-radius-sm);
+
+  /* ========================================
+     SHADOWS
+     ======================================== */
+  --shadow-md: 0 8px 24px rgba(90, 44, 40, 0.2);
+}

src/styles.css

@@ -1,15 +1,6 @@
+@import 'styles-variables.css';
 @import 'bootstrap/dist/css/bootstrap.min.css';
 
-:root {
-  --warm-primary: #BA6D4B;
-  --warm-dark: #5A2C28;
-  --warm-light: #F3C8A0;
-  --cool-mint: #B9DAD1;
-  --cool-blue: #B9C2DA;
-  --cool-purple: #C19EF5;
-  --cool-lime: #E1EAA9;
-}
-
 * {
   box-sizing: border-box;
 }
@@ -19,8 +10,8 @@ body {
   margin: 0;
   min-height: 100%;
   font-family: "Comic Sans MS", "Comic Sans", cursive;
-  background: linear-gradient(160deg, var(--warm-light), var(--cool-mint));
+  background: linear-gradient(160deg, var(--color-primary-light), var(--color-secondary-mint));
-  color: var(--warm-dark);
+  color: var(--color-text-primary);
 }
 
 button,