feat: 1vs BOT

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

@@ -142,3 +142,69 @@ p {
     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;
+}
+
+.difficulty-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

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

@@ -4,11 +4,28 @@
     <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>

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

@@ -15,6 +15,7 @@ import { GameApiService } from '../../services/game-api.service';
 export class WelcomeComponent {
   creating = false;
   errorMessage = '';
+  showDifficultySelector = false;
 
   constructor(
     private readonly router: Router,
@@ -41,4 +42,31 @@ 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.errorMessage = '';
+  }
 }