feat: join pervious game added

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,7 +9,7 @@ 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'
 })
@@ -16,6 +17,9 @@ export class WelcomeComponent {
   creating = false;
   errorMessage = '';
   showDifficultySelector = false;
+  showJoinGameForm = false;
+  gameIdInput = '';
+  joiningGame = false;
 
   constructor(
     private readonly router: Router,
@@ -67,6 +71,41 @@ export class WelcomeComponent {
 
   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 = '';
   }
 }