From e3466bda30406e6f442011208a5653fd4811e847 Mon Sep 17 00:00:00 2001
From: "Lala, Shahd" <Shahd.Lala@sybit.de>
Date: Tue, 5 May 2026 22:25:49 +0000
Subject: [PATCH] feat: game starts after accept

---
 .../pages/challenges/challenges.component.html | 12 ++++++++++++
 .../pages/challenges/challenges.component.ts   | 18 +++++++++++++++---
 src/app/services/challenge.service.ts          |  4 ++--
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/challenges/challenges.component.html b/src/app/pages/challenges/challenges.component.html
index 165ce70..7351234 100644
--- a/src/app/pages/challenges/challenges.component.html
+++ b/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>
diff --git a/src/app/pages/challenges/challenges.component.ts b/src/app/pages/challenges/challenges.component.ts
index 4db5b13..1044dd2 100644
--- a/src/app/pages/challenges/challenges.component.ts
+++ b/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) {
diff --git a/src/app/services/challenge.service.ts b/src/app/services/challenge.service.ts
index 5f7b809..7859923 100644
--- a/src/app/services/challenge.service.ts
+++ b/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`,
             {}
         );