src/app/pages/challenges/challenges.component.html

@@ -46,6 +46,12 @@
                             Accept
                         </button>
                     </div>
+
+                    <div class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
+                        <button type="button" class="btn btn-accept" (click)="openGame(challenge)">
+                            Play
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -83,6 +89,12 @@
                             Cancel
                         </button>
                     </div>
+
+                    <div class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
+                        <button type="button" class="btn btn-accept" (click)="openGame(challenge)">
+                            Play
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>

src/app/pages/challenges/challenges.component.ts

@@ -88,10 +88,14 @@ export class ChallengesComponent implements OnInit, OnDestroy {
         this.challengeService.acceptChallenge(challenge.id)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
-                next: () => {
-                    this.challengeEventService.onChallengeAccepted(challenge);
+                next: (acceptedChallenge) => {
+                    this.challengeEventService.onChallengeAccepted(acceptedChallenge);
                     this.loadChallenges();
-                    // Navigate to game (if backend creates game automatically)
+                    if (acceptedChallenge.gameId) {
+                        void this.router.navigate(['/game', acceptedChallenge.gameId]);
+                    } else {
+                        this.errorMessage = 'Challenge accepted, but no game was created.';
+                    }
                 },
                 error: (error) => {
                     this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
@@ -130,6 +134,14 @@ export class ChallengesComponent implements OnInit, OnDestroy {
         void this.router.navigate(['/']);
     }
 
+    openGame(challenge: Challenge): void {
+        if (!challenge.gameId) {
+            this.errorMessage = 'Missing game id for this challenge.';
+            return;
+        }
+        void this.router.navigate(['/game', challenge.gameId]);
+    }
+
     getTimeControlDisplay(challenge: Challenge): string {
         const { limit, increment } = challenge.timeControl;
         if (!limit || !increment) {

src/app/services/challenge.service.ts

@@ -27,8 +27,8 @@ export class ChallengeService {
         );
     }
 
-    acceptChallenge(challengeId: string): Observable<void> {
-        return this.http.post<void>(
+    acceptChallenge(challengeId: string): Observable<Challenge> {
+        return this.http.post<Challenge>(
             `${this.challengeBaseUrl}/${challengeId}/accept`,
             {}
         );