Fixed an issue that caused the 'time remaining' count on the gameboar…

…d page to show zero on initial page load.
cmu-sei · Oct 30, 2023 · 507cdaa · 507cdaa
1 parent b17da99
commit 507cdaa
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 26 deletions.
diff --git a/projects/gameboard-ui/src/app/admin/challenge-browser/challenge-browser.component.ts b/projects/gameboard-ui/src/app/admin/challenge-browser/challenge-browser.component.ts
@@ -1,7 +1,7 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { faArrowLeft, faEllipsisV, faInfoCircle, faSearch, faSyncAlt, faCircle } from '@fortawesome/free-solid-svg-icons';
 import { BehaviorSubject, interval, merge, Observable } from 'rxjs';
@@ -16,16 +16,14 @@ import { ChallengesService } from '@/api/challenges.service';
   templateUrl: './challenge-browser.component.html',
   styleUrls: ['./challenge-browser.component.scss']
 })
-export class ChallengeBrowserComponent implements OnInit {
+export class ChallengeBrowserComponent {
   refresh$ = new BehaviorSubject<boolean>(true);
   challenges$: Observable<ChallengeSummary[]>;
   challenges: ChallengeSummary[] = [];
   archived$: Observable<ChallengeSummary[]>;
   archiveMap = new Map<string, ChallengeSummary>(); // alternative to calling `/audit` endpoint
   search: Search = { term: '', take: 100 };
   selected?: ChallengeSummary;
-  // audited$: Observable<any>;
-  // auditing$ = new Subject<ChallengeSummary>();
   selectedAudit!: any;
   errors: any[] = [];
 
@@ -80,17 +78,6 @@ export class ChallengeBrowserComponent implements OnInit {
         });
       }),
     );
-
-    // this.audited$ = this.auditing$.pipe(
-    //   debounceTime(500),
-    //   distinctUntilChanged(),
-    //   switchMap(c => api.audit(c.id)),
-    //   tap(r => this.selectedAudit = r)
-    // );
-
-  }
-
-  ngOnInit(): void {
   }
 
   select(c: ChallengeSummary): void {

diff --git a/...ore/components/gameboard-performance-summary/gameboard-performance-summary.component.html b/...ore/components/gameboard-performance-summary/gameboard-performance-summary.component.html
@@ -4,7 +4,7 @@
             *ngIf="ctx.player.session && !ctx.player.session.isBefore && (ctx.player.session.isAfter || ((countdown$ | async) || 0 ) <= 0)">Game
             Over
         </span>
-        <span *ngIf="ctx.player.session?.isDuring">Time Remaining:
+        <span *ngIf="ctx.player.session?.isDuring && (countdown$ | async)">Time Remaining:
             <span class="font-weight-bold" [class]="(countdown$ | async) || 0 | countdowncolor">
                 {{ (countdown$ | async) || 0 | countdown }}
             </span>

diff --git a/projects/gameboard-ui/src/app/core/pipes/countdown.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/countdown.pipe.ts
@@ -15,7 +15,7 @@ export class CountdownPipe implements PipeTransform {
 
   transform(value?: number): string {
     if (!value || value < 0) {
-      return "0";
+      return "--";
     }
 
     const days = Math.floor(value / 1000 / 60 / 60 / 24);

diff --git a/projects/gameboard-ui/src/app/game/player-session/player-session.component.html b/projects/gameboard-ui/src/app/game/player-session/player-session.component.html
@@ -20,12 +20,14 @@
           <div class="d-flex text-info card-text">
             <div>
               <span *ngIf="ctx.player.session?.isAfter">Session ended </span>
-              <span *ngIf="ctx.player.session?.isDuring">Time Remaining: </span>
+              <span *ngIf="ctx.player.session?.isDuring && (timeRemainingMs$ | async)">
+                Time Remaining:
+              </span>
             </div>
 
-            <div *ngIf="ctx.player.session?.isDuring && (timeRemainings$ | async)"
-              [class]="'ml-2 ' + (((timeRemainings$ | async) || 0) | countdowncolor)">
-              {{ ((timeRemainings$ | async) || 0) | countdown }}
+            <div *ngIf="ctx.player.session?.isDuring && hasTimeRemaining"
+              [class]="'ml-2 ' + (((timeRemainingMs$ | async) || 0) | countdowncolor)">
+              {{ ((timeRemainingMs$ | async) || 0) | countdown }}
             </div>
             <div class="spacer"></div>
 

diff --git a/projects/gameboard-ui/src/app/game/player-session/player-session.component.ts b/projects/gameboard-ui/src/app/game/player-session/player-session.component.ts
@@ -39,9 +39,9 @@ export class PlayerSessionComponent implements OnDestroy {
   protected performanceSummaryViewModel$ = new BehaviorSubject<GameboardPerformanceSummaryViewModel | undefined>(undefined);
 
   protected canAdminStart = false;
-  protected countdown$ = new Observable<{ hours: number, minutes: number, seconds: number }>();
+  protected hasTimeRemaining = false;
   protected performanceSummaryViewModel?: GameboardPerformanceSummaryViewModel;
-  protected timeRemainings$?: Observable<number>;
+  protected timeRemainingMs$?: Observable<number>;
 
   constructor(
     private api: PlayerService,
@@ -98,12 +98,13 @@ export class PlayerSessionComponent implements OnDestroy {
       // set up countdown
       tap(ctx => {
         if (ctx?.player.session)
-          this.timeRemainings$ = interval(1000).pipe(
-            map(() => (ctx.player.session!.endDate.getTime() - Date.now()))
+          this.timeRemainingMs$ = interval(1000).pipe(
+            map(() => (ctx.player.session!.endDate.getTime() - Date.now())),
+            tap(remainingMs => this.hasTimeRemaining = remainingMs > 0)
           );
 
         else
-          this.timeRemainings$ = of(0);
+          this.timeRemainingMs$ = of(0);
       })
     ).subscribe();
   }