Allow viewing of the game screen for practice mode games

cmu-sei · Dec 16, 2024 · 1c2298c · 1c2298c
1 parent 9c42789
commit 1c2298c
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 22 deletions.
diff --git a/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.html b/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.html
@@ -61,23 +61,25 @@ <h2 class="d-inline">Certificate</h2>
       <!-- if auth'd -->
       <ng-container *ngIf="!!ctx.user.id">
 
-        <!-- if enrolled -->
-        <ng-container *ngIf="!!ctx.player.id && ctx.player.session">
-          <div class="col panel">
-            <h2>Status</h2>
-            <app-player-session [ctx$]="ctx$!" (onSessionStart)="onSessionStarted($event)"
-              (onSessionReset)="onSessionReset($event)"></app-player-session>
-          </div>
-        </ng-container>
+        <ng-container *ngIf="!ctx.game.isPracticeMode; else practiceMode">
+          <!-- if enrolled -->
+          <ng-container *ngIf="!!ctx.player.id && ctx.player.session">
+            <div class="col panel">
+              <h2>Status</h2>
+              <app-player-session [ctx$]="ctx$!" (onSessionStart)="onSessionStarted($event)"
+                (onSessionReset)="onSessionReset($event)"></app-player-session>
+            </div>
+          </ng-container>
 
-        <!-- if session hasn't started -->
-        <ng-container
-          *ngIf="(!ctx.game.registration.isAfter || (canAdminEnroll$ | async)) && (!ctx.player.id || !ctx.player.session || ctx.player.session.isBefore)">
-          <div class="col panel">
-            <h2>Enrollment</h2>
-            <app-player-enroll [ctx]="ctx" (onEnroll)="onEnroll($event)"
-              (onUnenroll)="onUnenroll($event)"></app-player-enroll>
-          </div>
+          <!-- if session hasn't started -->
+          <ng-container
+            *ngIf="(!ctx.game.registration.isAfter || (canAdminEnroll$ | async)) && (!ctx.player.id || !ctx.player.session || ctx.player.session.isBefore)">
+            <div class="col panel">
+              <h2>Enrollment</h2>
+              <app-player-enroll [ctx]="ctx" (onEnroll)="onEnroll($event)"
+                (onUnenroll)="onUnenroll($event)"></app-player-enroll>
+            </div>
+          </ng-container>
         </ng-container>
       </ng-container>
 
@@ -118,3 +120,17 @@ <h2>Feedback</h2>
 
   <app-spinner></app-spinner>
 </ng-template>
+
+<ng-template #practiceMode>
+  <div class="col panel">
+    <h2>Practice Mode</h2>
+
+    <div class="card p-4">
+      <p class="text-muted">
+        This game is now in Practice mode. If you want to try your hand
+        at its challenges, head over to the
+        <a [href]="practiceUrl">Practice Area</a>.
+      </p>
+    </div>
+  </div>
+</ng-template>
diff --git a/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.ts b/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.ts
@@ -47,6 +47,7 @@ export class GamePageComponent implements OnDestroy {
   protected fa = fa;
   protected isExternalGame = false;
   protected player$ = new BehaviorSubject<Player | null>(null);
+  protected practiceUrl = "";
 
   private hubEventsSubcription: Subscription;
   private localUserSubscription: Subscription;
@@ -79,6 +80,7 @@ export class GamePageComponent implements OnDestroy {
       tap(g => this.ctxIds.gameId = g.id),
       tap(g => this.isExternalGame = g.mode == "external"),
       tap(g => this.titleService.set(g.name)),
+      tap(g => this.practiceUrl = this.routerService.getPracticeAreaUrl(g.id).toString()),
     );
 
     this.localUserSubscription = combineLatest([

diff --git a/projects/gameboard-ui/src/app/home/landing/landing.component.html b/projects/gameboard-ui/src/app/home/landing/landing.component.html
@@ -108,7 +108,7 @@ <h5 class="mb-0 font-weight-bold">Competition<fa-icon [icon]="faGamepad" class="
           <p class="mb-0 pb-0" *ngIf="game.session.isAfter">Ended {{game.gameEnd | ago}}</p>
           <button class="btn btn-outline-success btn-lg mx-1 mt-4 open-button" (click)="selected(game)">
             <h2 class="p-0 m-0 font-weight-bold">
-              {{ game.isPracticeMode ? "Practice" : "Open Game" }}
+              Open Game
             </h2>
           </button>
         </div>

diff --git a/projects/gameboard-ui/src/app/home/landing/landing.component.ts b/projects/gameboard-ui/src/app/home/landing/landing.component.ts
@@ -66,11 +66,7 @@ export class LandingComponent {
   }
 
   selected(game: Game | BoardGame): void {
-    if (game.isPracticeMode) {
-      this.routerService.toPracticeAreaWithSearch(game.id);
-    } else {
-      this.router.navigate(['/game', game.id]);
-    }
+    this.router.navigate(['/game', game.id]);
   }
 
   on(g: Game): void {