v3.17.2 (#176)

* Fixed an issue that caused the player context menu to hide the 'start session' and 'ready player' options in some cases. * Wrap active teams modal * Add admin 'allow public scoreboard' flag. Swapped the old scoreboard for the new one by default. * Styling for logged-in player's team/user on the scoreboard
cmu-sei · Mar 18, 2024 · 19345d1 · 19345d1
1 parent a84634d
commit 19345d1
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 48 deletions.
diff --git a/...ameboard-ui/src/app/admin/components/active-teams-modal/active-teams-modal.component.html b/...ameboard-ui/src/app/admin/components/active-teams-modal/active-teams-modal.component.html
@@ -10,7 +10,7 @@ <h2 class="modal-title">Active Competitive Teams &amp; Players</h2>
     <div class="modal-body" *ngIf="!isWorking; else loading">
         <ng-container *ngIf="teams.length; else noTeams">
             <div class="teams-container">
-                <ul class="d-flex">
+                <ul class="d-flex flex-wrap">
                     <li *ngFor="let team of teams" class="card team-card my-3 mr-3">
                         <div class="card-body">
                             <h5 class="overflow-ellipsis">

diff --git a/...i/src/app/admin/components/team-admin-context-menu/team-admin-context-menu.component.html b/...i/src/app/admin/components/team-admin-context-menu/team-admin-context-menu.component.html
@@ -20,7 +20,7 @@
                 Manual Bonuses
             </button>
         </li>
-        <ng-container *ngIf="!isSyncStartGame && !hasStartedSession">
+        <ng-container *ngIf="!isSyncStartGame || !hasStartedSession">
             <li class="divider dropdown-divider"></li>
             <li role="menuitem" *ngIf="!isSyncStartGame; else syncStartGameItems">
                 <button class="dropdown-item btn btn-warning" (click)="handleStartSession(player)">
@@ -40,12 +40,6 @@
                 Reset Session &amp; Unenroll
             </button>
         </li>
-        <ng-template #unenroll>
-            <li role="menuitem">
-                <button type="button" class="dropdown-item btn btn-danger"
-                    (click)="unenrollRequest.emit(player)">Unenroll</button>
-            </li>
-        </ng-template>
     </ul>
 </div>
 
@@ -58,3 +52,10 @@
         </strong>
     </button>
 </ng-template>
+
+<ng-template #unenroll>
+    <li role="menuitem">
+        <button type="button" class="dropdown-item btn btn-danger"
+            (click)="unenrollRequest.emit(player)">Unenroll</button>
+    </li>
+</ng-template>
diff --git a/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.html b/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.html
@@ -30,6 +30,12 @@ <h1 class="mb-0">
     <div [hidden]="viewing!==1" class="row mb-4">
       <!-- left (form) -->
       <div class="col-lg-6 col-sm-12">
+        <div class="form-group pb-0 pt-1">
+          <label for="name-input">Name</label>
+          <input type="text" class="form-control" id="name-input" name="name" [(ngModel)]="game.name">
+          <small>event name (i.e. Open, Semis, Finals)</small>
+        </div>
+
         <div class="form-group pb-0 pt-1">
           <label class="mb-0" for="hidden-toggle">Publish</label>
           <div class="form-control auto-h d-flex align-items-center">
@@ -50,12 +56,6 @@ <h1 class="mb-0">
           <small>short, unique key distinguishing <em>this</em> event</small>
         </div>
 
-        <div class="form-group pb-0 pt-1">
-          <label for="name-input">Name</label>
-          <input type="text" class="form-control" id="name-input" name="name" [(ngModel)]="game.name">
-          <small>event name (i.e. Open, Semis, Finals)</small>
-        </div>
-
         <div class="form-group pb-0 pt-1">
           <label for="competition-input">Series</label>
           <input type="text" list="competition-list" class="form-control" id="competition-input" name="competition"
@@ -402,7 +402,7 @@ <h4>Execution</h4>
         </div>
 
         <div class="form-group pb-0 pt-1">
-          <label class="mb-0" for="reset-toggle">Allow Late Starts</label>
+          <label class="mb-0" for="late-start-toggle">Allow Late Starts</label>
           <div class="form-control auto-h d-flex align-items-center">
             <label>Forbidden</label>
             <label class="btn text-info" btnCheckbox tabindex="0" [ngModelOptions]="{updateOn: 'change'}"
@@ -414,6 +414,21 @@ <h4>Execution</h4>
           </div>
           <small>allows players to start within a session length of the execution period end</small>
         </div>
+
+        <div class="form-group pb-0 pt-1">
+          <label class="mb-0" for="public-scoreboard-toggle">Allow Public Scoreboard Access</label>
+          <div class="form-control auto-h d-flex align-items-center">
+            <label>Forbidden</label>
+            <label class="btn text-info" btnCheckbox tabindex="0" [ngModelOptions]="{updateOn: 'change'}"
+              id="public-scoreboard-toggle" name="allowPublicScoreboardAccess"
+              [(ngModel)]="game.allowPublicScoreboardAccess">
+              <fa-icon *ngIf="!game.allowPublicScoreboardAccess" [icon]="fa.toggleOff" size="lg"></fa-icon>
+              <fa-icon *ngIf="game.allowPublicScoreboardAccess" [icon]="fa.toggleOn" size="lg"></fa-icon>
+            </label>
+            <label>Allowed</label>
+          </div>
+          <small>allows players to view the complete scoreboard after the game ends</small>
+        </div>
       </div>
 
       <div class="col-lg-6 col-sm-12">

diff --git a/projects/gameboard-ui/src/app/api/game-models.ts b/projects/gameboard-ui/src/app/api/game-models.ts
@@ -36,14 +36,15 @@ export interface GameDetail {
   gamespaceLimitPerSession: number;
   isPublished: boolean;
   requireSponsoredTeam: boolean;
-  allowPreview: boolean;
   externalGameClientUrl?: string;
   externalGameTeamExtendedEndpoint?: string;
   externalGameStartupEndpoint?: string;
   requireSynchronizedStart: boolean;
   requireTeam: boolean;
   showOnHomePageInPracticeMode: boolean;
   allowLateStart: boolean;
+  allowPreview: boolean;
+  allowPublicScoreboardAccess: boolean;
   allowTeam: boolean;
   allowReset: boolean;
   playerMode: PlayerMode;

diff --git a/projects/gameboard-ui/src/app/game/components/scoreboard/scoreboard.component.html b/projects/gameboard-ui/src/app/game/components/scoreboard/scoreboard.component.html
@@ -6,7 +6,7 @@
         everyone with points on the board!
     </alert>
     <table *ngIf="scoreboardData.teams.length; else noScore" class="table table-striped gameboard-table w-100"
-        [class.advanced-players-highlight]="hasAdvancedPlayers" [class.table-hover]="!isLive">
+        [class.advanced-players-highlight]="hasAdvancedPlayers" [class.table-hover]="canViewAllScores">
         <col class="width-5">
         <col class="width-50">
         <col>
@@ -49,14 +49,16 @@
 </ng-template>
 
 <ng-template #noScore>
-    <div class="no-score gray-text text-center">
+    <div class="no-score text-muted text-center">
         No one's scored in this game yet.
     </div>
 </ng-template>
 
 <ng-template #team let-teamScore>
-    <tr class="data-row" [class.cursor-pointer]="!isLive" [class.is-advanced]="teamScore.isAdvancedToNextRound"
-        [class.is-not-advanced]="!teamScore.isAdvancedToNextRound" (click)="!isLive && handleRowClick(teamScore)">
+    <tr class="data-row" [class.cursor-pointer]="teamScore.userCanAccessScoreDetail"
+        [class.is-advanced]="teamScore.isAdvancedToNextRound" [class.is-not-advanced]="!teamScore.isAdvancedToNextRound"
+        [class.user-team-score-row]="teamScore.userIsOnTeam"
+        (click)="teamScore.userCanAccessScoreDetail && handleRowClick(teamScore)">
         <td>
             <div class="team-rank d-flex flex-column justify-content-center align-items-center">
                 {{ teamScore.score.rank }}
@@ -97,7 +99,7 @@
                 {{ teamScore.score.cumulativeTimeMs | msToDuration }}
             </div>
         </td>
-        <td class="text-center" [tooltip]="teamScore.score | scoreToTooltip:isLive">
+        <td class="text-center" [tooltip]="teamScore.userCanAccessScoreDetail && teamScore.score | scoreToTooltip">
             <span class="score text-center"
                 [class.text-info]="teamScore.score.scoreOverall != teamScore.score.scoreChallenge">
                 {{ teamScore.score.scoreOverall }}

diff --git a/projects/gameboard-ui/src/app/game/components/scoreboard/scoreboard.component.scss b/projects/gameboard-ui/src/app/game/components/scoreboard/scoreboard.component.scss
@@ -25,6 +25,11 @@ thead {
   text-transform: uppercase;
 }
 
+.user-team-score-row {
+  background-color: $gray-400 !important;
+  color: $gray-900;
+}
+
 .challenge-count {
   font-size: 1.5rem;
 }

diff --git a/projects/gameboard-ui/src/app/game/components/scoreboard/scoreboard.component.ts b/projects/gameboard-ui/src/app/game/components/scoreboard/scoreboard.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Subscription, firstValueFrom, interval, map } from 'rxjs';
 import { ScoringService } from '@/services/scoring/scoring.service';
 import { ScoreboardData, ScoreboardDataTeam } from '@/services/scoring/scoring.models';
@@ -12,13 +12,14 @@ import { UnsubscriberService } from '@/services/unsubscriber.service';
   styleUrls: ['./scoreboard.component.scss'],
   providers: [UnsubscriberService]
 })
-export class ScoreboardComponent implements OnChanges {
+export class ScoreboardComponent implements OnInit {
   @Input() gameId?: string;
 
+  protected canViewAllScores = false;
   protected cumulativeTimeTooltip = "Cumulative Time is only used for tiebreaking purposes. When a challenge is started, a timer tracks how long it takes to solve that challenge. The sum time of all successfully solved challenges is the value in this column.";
   protected hasAdvancedPlayers = false;
-  protected isLoading = true;
   protected isLive = false;
+  protected isLoading = true;
   protected isTeamGame = false;
   protected scoreboardData: ScoreboardData | null = null;
   protected advancingTeams: ScoreboardDataTeam[] = [];
@@ -28,17 +29,19 @@ export class ScoreboardComponent implements OnChanges {
 
   constructor(
     private modalConfirmService: ModalConfirmService,
-    private scoreService: ScoringService) { }
+    private scoreService: ScoringService,
+    private unsub: UnsubscriberService) { }
 
-  async ngOnChanges(changes: SimpleChanges): Promise<void> {
-    if (changes?.gameId && this.gameId) {
-      this.loadGame(this.gameId);
-    }
+  async ngOnInit() {
+    if (!this.gameId)
+      throw new Error("Couldn't resolve the gameId.");
+
+    await this.loadGame(this.gameId);
   }
 
   protected handleRowClick(teamData: ScoreboardDataTeam) {
-    // we don't show the details while the competition is ongoing
-    if (this.isLive) return;
+    if (!teamData.userCanAccessScoreDetail)
+      return;
 
     this.modalConfirmService.openComponent<ScoreboardTeamDetailModalComponent>({
       content: ScoreboardTeamDetailModalComponent,
@@ -66,7 +69,6 @@ export class ScoreboardComponent implements OnChanges {
 
     if (this.scoreboardData.game.isLiveUntil) {
       this.isLive = true;
-
       this.liveGameSub = interval(60000).subscribe(_ => {
         this.loadGame(gameId);
       });

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
@@ -83,8 +83,8 @@ <h2>Info</h2>
       </div>
     </div>
 
-    <div class="row">
-      <div class="col scoreboard">
+    <div class="row align-items-center justify-content-center">
+      <div class="col-12 page-width scoreboard">
         <h2 id="scoreboard" class="text-center my-4">
           <span>Scoreboard</span>&nbsp;&nbsp;
           <a [routerLink]="['../', 'scores', ctx.game.id]">
@@ -93,7 +93,7 @@ <h2 id="scoreboard" class="text-center my-4">
             </small>
           </a>
         </h2>
-        <app-scoreboard-table [id]="ctx.game.id" [live]="ctx.game.session.isDuring"></app-scoreboard-table>
+        <app-scoreboard [gameId]="ctx.game.id"></app-scoreboard>
       </div>
       <div class="col-xl-5 pr-5 my-4"
         *ngIf="ctx.game.feedbackTemplate?.game?.length && (!ctx.player.session?.isBefore)">

diff --git a/projects/gameboard-ui/src/app/game/pages/scoreboard-page/scoreboard-page.component.html b/projects/gameboard-ui/src/app/game/pages/scoreboard-page/scoreboard-page.component.html
@@ -16,16 +16,16 @@ <h1 class="text-success mx-4">
       <div class="col-12 scoreboard">
         <h2 id="scoreboard" class="text-center my-4">Scoreboard</h2>
         <div *ngIf="isAdmin" class="row">
-          <input type="checkbox" id="isNewScoreboard" name="isNewScoreboard" [(ngModel)]="isNewScoreboard" />
-          <label for="isNewScoreboard">Use new scoreboard</label>
+          <input type="checkbox" id="isOldScoreboard" name="isOldScoreboard" [(ngModel)]="isOldScoreboard" />
+          <label for="isOldScoreboard">Use old scoreboard</label>
         </div>
-        <app-scoreboard-table *ngIf="!isNewScoreboard" [id]="game.id"
+        <app-scoreboard-table *ngIf="isOldScoreboard" [id]="game.id"
           [live]="game.session.isDuring"></app-scoreboard-table>
       </div>
     </div>
   </div>
 
-  <div class="d-flex align-items-center justify-content-center" *ngIf="isNewScoreboard">
+  <div class="d-flex align-items-center justify-content-center w-100" *ngIf="!isOldScoreboard">
     <app-scoreboard class="page-width" [gameId]="game.id"></app-scoreboard>
   </div>
 </ng-container>

diff --git a/projects/gameboard-ui/src/app/game/pages/scoreboard-page/scoreboard-page.component.ts b/projects/gameboard-ui/src/app/game/pages/scoreboard-page/scoreboard-page.component.ts
@@ -20,7 +20,7 @@ import { UnsubscriberService } from '@/services/unsubscriber.service';
 export class ScoreboardPageComponent {
   game$: Observable<Game>;
   isAdmin = false;
-  isNewScoreboard = false;
+  isOldScoreboard = false;
 
   constructor(
     route: ActivatedRoute,
@@ -39,7 +39,7 @@ export class ScoreboardPageComponent {
       localUser.user$.subscribe(u => {
         if (!u) {
           this.isAdmin = false;
-          this.isNewScoreboard = false;
+          this.isOldScoreboard = false;
           return;
         }
 

diff --git a/projects/gameboard-ui/src/app/game/pipes/score-to-tooltip.pipe.ts b/projects/gameboard-ui/src/app/game/pipes/score-to-tooltip.pipe.ts
@@ -3,12 +3,10 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({ name: 'scoreToTooltip' })
 export class ScoreToTooltipPipe implements PipeTransform {
-
-  transform(value: DenormalizedTeamScore, gameIsLive: boolean): string {
+  transform(value: DenormalizedTeamScore): string {
     if (!value || value.scoreOverall === 0 || value.scoreOverall === value.scoreChallenge)
       return "";
 
-    const clickPrompt = gameIsLive ? "" : " (Click for details)";
-    return `${value.scoreChallenge} + ${(value.scoreAdvanced || 0) + value.scoreAutoBonus + value.scoreManualBonus} bonus${clickPrompt}`;
+    return `${value.scoreChallenge} + ${(value.scoreAdvanced || 0) + value.scoreAutoBonus + value.scoreManualBonus} bonus (click for details)`;
   }
 }
diff --git a/projects/gameboard-ui/src/app/services/scoring/scoring.models.ts b/projects/gameboard-ui/src/app/services/scoring/scoring.models.ts
@@ -151,10 +151,13 @@ export interface ScoreboardDataGame {
 }
 
 export interface ScoreboardDataTeam {
+    id: string;
     isAdvancedToNextRound: boolean;
     players: PlayerWithSponsor[];
     score: DenormalizedTeamScore;
     sessionEnds?: DateTime;
+    userCanAccessScoreDetail: boolean;
+    userIsOnTeam: boolean;
 }
 
 export interface DenormalizedTeamScore {

diff --git a/projects/gameboard-ui/src/app/services/scoring/scoring.service.ts b/projects/gameboard-ui/src/app/services/scoring/scoring.service.ts
@@ -45,7 +45,6 @@ export class ScoringService {
         return s;
 
       s.game.isLiveUntil = this.apiDateTime.toDateTime(s.game.isLiveUntil as any) as DateTime;
-
       return s;
     }));
   }

diff --git a/projects/gameboard-ui/src/styles.scss b/projects/gameboard-ui/src/styles.scss
@@ -312,8 +312,8 @@ th[align="left"] {
 }
 
 .page-width {
-  width: 1380px;
-  max-width: 100%;
+  max-width: 1380px;
+  width: 100%;
 }
 
 .page-min-height {