v3.10.2

projects/gameboard-ui/src/app/api/user.service.ts

@@ -82,6 +82,12 @@ export class UserService {
     return this.http.put<void>(`${this.url}/user/login`, {});
   }
 
+  public canEnrollAndPlayOutsideExecutionWindow(user: ApiUser) {
+    return user && (
+      user.isAdmin || user.isTester || user.isRegistrar
+    );
+  }
+
   private mapToTree(list: string[]): TreeNode {
     const root: TreeNode = { name: '', path: `${this.config.apphost}doc`, folders: [], files: [] };
     list.forEach(f => {

projects/gameboard-ui/src/app/core/components/gameboard-performance-summary/gameboard-performance-summary.component.html

@@ -1,9 +1,13 @@
 <div class="gameboard-performance-summary-component" *ngIf="ctx; else loading">
     <div class="text-info card-text mb-2">
-        <span *ngIf="ctx.player.session?.isAfter || ((countdown$ | async) || 0 ) <= 0">Game Over </span>
-        <span *ngIf="ctx.player.session?.isDuring">Time Remaining: </span>
-        <span class="font-weight-bold" [class]="(countdown$ | async) || 0 | countdowncolor">
-            {{ (countdown$ | async) || 0 | countdown }}
+        <span
+            *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 class="font-weight-bold" [class]="(countdown$ | async) || 0 | countdowncolor">
+                {{ (countdown$ | async) || 0 | countdown }}
+            </span>
         </span>
     </div>
     <table class="table mt-2 text-center">

projects/gameboard-ui/src/app/game/game-page/game-page.component.html

@@ -61,7 +61,7 @@ <h2>Status</h2>
 
         <!-- if not session start -->
         <ng-container
-          *ngIf="(ctx.user.isDesigner || !ctx.game.registration.isAfter) && (!ctx.player.id || !ctx.player.session || ctx.player.session.isBefore)">
+          *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)"

projects/gameboard-ui/src/app/game/game-page/game-page.component.ts

@@ -4,14 +4,12 @@
 import { Component, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { faCaretDown, faCaretRight, faExternalLinkAlt, faListOl } from '@fortawesome/free-solid-svg-icons';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { BehaviorSubject, combineLatest, merge, Observable, of, Subject, Subscription } from 'rxjs';
+import { BehaviorSubject, combineLatest, merge, Observable, Subscription } from 'rxjs';
 import { filter, first, map, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiUser, PlayerRole } from '../../api/user-models';
 import { GameService } from '../../api/game.service';
 import { GameContext } from '../../api/models';
-import { HubEvent, HubEventAction, HubState, NotificationService } from '../../services/notification.service';
-import { ModalConfirmComponent } from '../../core/components/modal/modal-confirm.component';
+import { HubEvent, HubEventAction, NotificationService } from '../../services/notification.service';
 import { Player, TimeWindow } from '../../api/player-models';
 import { PlayerService } from '../../api/player.service';
 import { UserService as LocalUserService } from '../../utility/user.service';
@@ -21,6 +19,7 @@ import { BoardPlayer } from '../../api/board-models';
 import { BoardService } from '../../api/board.service';
 import { GameHubService } from '../../services/signalR/game-hub.service';
 import { ModalConfirmService } from '@/services/modal-confirm.service';
+import { UserService } from '@/api/user.service';
 
 @Component({
   selector: 'app-game-page',
@@ -37,11 +36,11 @@ export class GamePageComponent implements OnDestroy {
   minDate = new Date(0);
 
   protected boardPlayer?: BoardPlayer;
+  protected canAdminEnroll$: Observable<boolean>;
   protected ctxIds: { userId?: string, gameId: string, playerId?: string } = { userId: '', gameId: '' };
   protected playerSubject$ = new BehaviorSubject<Player | undefined>(undefined);
 
   private isExternalGame = false;
-  private isSyncStartReady = false;
   private syncStartChangedSubscription?: Subscription;
   private syncStartGameStartedSubscription?: Subscription;
   private hubEventsSubcription: Subscription;
@@ -50,18 +49,20 @@ export class GamePageComponent implements OnDestroy {
   constructor(
     router: Router,
     route: ActivatedRoute,
+    apiGame: GameService,
     apiBoards: BoardService,
     apiPlayer: PlayerService,
     localUser: LocalUserService,
+    userService: UserService,
     private hub: NotificationService,
-    private apiGame: GameService,
     private gameHubService: GameHubService,
     private modalConfirmService: ModalConfirmService,
     private windowService: WindowService
   ) {
     const user$ = localUser.user$.pipe(
       map(u => !!u ? u : {} as ApiUser)
     );
+    this.canAdminEnroll$ = localUser.user$.pipe(map(u => !!u && userService.canEnrollAndPlayOutsideExecutionWindow(u)));
 
     const game$ = route.params.pipe(
       filter(p => !!p.id),
@@ -72,10 +73,6 @@ export class GamePageComponent implements OnDestroy {
         this.syncStartChangedSubscription?.unsubscribe();
 
         if (g.requireSynchronizedStart) {
-          this.syncStartChangedSubscription = this.gameHubService.syncStartChanged$.subscribe(state => {
-            this.isSyncStartReady = state.isReady;
-          });
-
           this.syncStartGameStartedSubscription = this.gameHubService.syncStartGameStarted$.subscribe(startState => {
             if (startState) {
               router.navigateByUrl(`/game/${startState.game.id}/sync-start`);
@@ -106,7 +103,7 @@ export class GamePageComponent implements OnDestroy {
           )
         );
       })
-    ).subscribe(done => {
+    ).subscribe(() => {
       const currentPlayer = this.playerSubject$.getValue();
       if (!currentPlayer?.id) {
         this.boardPlayer = undefined;

projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.html

@@ -1,6 +1,5 @@
 <!-- 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. -->
-
 <ng-container *ngIf="ctx$ | async as ctx; else loading">
 
   <div class="card" *ngIf="ctx">
@@ -16,7 +15,7 @@
       <app-error-div [errors]="errors"></app-error-div>
 
       <!-- not yet enrolled -->
-      <ng-container *ngIf="!ctx.player.id">
+      <ng-container *ngIf="!(isEnrolled$ | async)">
         <div *ngIf="!ctx.user.name || !ctx.user.sponsor">
           Ready to play? Before you do, you'll need to visit your
           <a [routerLink]="['/profile']">profile</a> to...
@@ -27,7 +26,7 @@
           </ul>
         </div>
 
-        <ng-container *ngIf="!!(ctx.user.name && ctx.user.sponsor) && ctx.game.registration.isDuring">
+        <ng-container *ngIf="!!(ctx.user.name && ctx.user.sponsor) && (canAdminEnroll || canStandardEnroll)">
           <!-- team -->
           <div *ngIf="ctx.game.allowTeam">
             <p>
@@ -50,22 +49,19 @@
             <markdown [data]="ctx.game.registrationMarkdown"></markdown>
           </div>
         </ng-container>
-      </ng-container>
 
-      <!-- enrollment controls -->
-      <ng-container *ngIf="!ctx.player.id">
+        <!-- enrollment controls -->
         <div class="d-flex align-items-center justify-content-center mt-5"
           *ngIf="ctxDelayed$ | async as delay; else loading">
-          <div class="text-center" *ngIf="!!(ctx.user.name && ctx.user.sponsor) && ctx.game.registration.isDuring">
+          <div *ngIf="canStandardEnroll" class="text-center">
             <app-confirm-button btnClass="btn btn-primary btn-lg mr-4"
               (confirm)="handleEnroll(ctx.user.id, ctx.game.id)">
               <fa-icon [icon]="faEdit"></fa-icon>
               <span>Enroll</span>
             </app-confirm-button>
           </div>
 
-          <div *ngIf="ctx.user.isTester || (ctx.user.isRegistrar && !ctx.game.registration.isDuring)"
-            class="text-center">
+          <div *ngIf="canAdminEnroll" class="text-center">
             <app-confirm-button btnClass="btn btn-warning btn-lg" (confirm)="handleEnroll(ctx.user.id, ctx.game.id)">
               <fa-icon [icon]="faEdit"></fa-icon>
               <span>Admin Enroll</span>
@@ -77,7 +73,8 @@
       </ng-container>
 
       <!-- already enrolled -->
-      <ng-container *ngIf="!!ctx.player.id && ctx.player.session?.isBefore && ctx.game.registration.isDuring">
+      <ng-container
+        *ngIf="(isEnrolled$ | async) && ctx.player.session?.isBefore && (ctx.game.registration.isDuring || canAdminEnroll)">
         <div *ngIf="isManager$ | async" class="form-group mb-0">
           <ng-container *ngIf="ctx.player.name !== ctx.player.approvedName">
             <ng-container *ngIf="ctx.player.nameStatus == 'pending' && ctx.player.name != disallowedName">
@@ -114,8 +111,7 @@
 
         <!--In team games before we start, managers can generate invitations and rename the team-->
         <!--Non-managers can leave for different teams-->
-
-        <ng-container *ngIf="ctx.game.allowTeam && !ctx.player.session?.isDuring">
+        <ng-container *ngIf="ctx.game.allowTeam">
           <div class="form-group d-flex flex-column">
             <div class="mb-2" *ngIf="(isManager$ | async) || !(hasTeammates$ | async)">
               <span class="lead">Manager</span>, generate an invitation for your teammates.<br />
@@ -148,27 +144,26 @@
             </div>
           </ng-container>
         </ng-container>
-      </ng-container>
 
-      <!-- unenroll -->
-      <div
-        *ngIf="ctx.player.id && (!ctx.player.session || ctx.player.session.isBefore) && (!ctx.game.registration.isAfter || ctx.user.isTester)"
-        class="form-group text-center">
-        <div class="tooltip-holder" [tooltip]="unenrollTooltip" container="body" placement="top">
-          <app-confirm-button btnClass="btn btn-danger btn" (confirm)="handleUnenroll(ctx.player)"
-            [disabled]="!!unenrollTooltip">
-            <fa-icon [icon]="faTrash"></fa-icon>
-            <span>Unenroll</span>
-          </app-confirm-button>
-        </div>
+        <!-- unenroll -->
+        <div
+          *ngIf="(!ctx.player.session || ctx.player.session.isBefore) && (!ctx.game.registration.isAfter || ctx.user.isTester)"
+          class="form-group text-center">
+          <div class="tooltip-holder" [tooltip]="unenrollTooltip" container="body" placement="top">
+            <app-confirm-button btnClass="btn btn-danger btn" (confirm)="handleUnenroll(ctx.player)"
+              [disabled]="!!unenrollTooltip">
+              <fa-icon [icon]="faTrash"></fa-icon>
+              <span>Unenroll</span>
+            </app-confirm-button>
+          </div>
 
-        <ng-template *ngIf="!unenrollTooltip">
-          <p class="small">
-            You can unenroll either the enrollment period ends or your game session
-            starts.
-          </p>
-        </ng-template>
-      </div>
+          <ng-template *ngIf="!unenrollTooltip">
+            <p class="small">
+              You can unenroll until either the enrollment period ends or your game session starts.
+            </p>
+          </ng-template>
+        </div>
+      </ng-container>
     </div>
   </div>
 </ng-container>
@@ -178,3 +173,13 @@
     <app-spinner></app-spinner>
   </div>
 </ng-template>
+
+<ng-template #setNameAndSponsor let-user>
+  Ready to play? Before you do, you'll need to visit your
+  <a [routerLink]="['/profile']">profile</a> to...
+
+  <ul class="profile-validation">
+    <li *ngIf="!user.name">Make sure you've entered your name</li>
+    <li *ngIf="!user.sponsor">Select your sponsor</li>
+  </ul>
+</ng-template>

projects/gameboard-ui/src/app/game/player-enroll/player-enroll.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, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { faCopy, faEdit, faPaste, faTrash, faUser } from '@fortawesome/free-solid-svg-icons';
 import { Observable, of, Subject, Subscription, timer } from 'rxjs';
 import { finalize, map, tap, delay, first } from 'rxjs/operators';
@@ -10,7 +10,8 @@ import { HubPlayer, NewPlayer, Player, PlayerEnlistment, PlayerRole, TeamInvitat
 import { PlayerService } from '../../api/player.service';
 import { ConfigService } from '../../utility/config.service';
 import { NotificationService } from '../../services/notification.service';
-import { UserService } from '../../utility/user.service';
+import { UserService as LocalUserService } from '../../utility/user.service';
+import { UserService } from '@/api/user.service';
 
 @Component({
   selector: 'app-player-enroll',
@@ -31,9 +32,12 @@ export class PlayerEnrollComponent implements OnInit, OnDestroy {
   ctx$: Observable<GameContext>;
   ctxDelayed$: Observable<GameContext>;
 
-  disallowedName: string | null = null;
-  disallowedReason: string | null = null;
+  protected canAdminEnroll = false;
+  protected canStandardEnroll = false;
+  protected disallowedName: string | null = null;
+  protected disallowedReason: string | null = null;
   protected managerRole = PlayerRole.manager;
+  protected isEnrolled$: Observable<boolean>;
   protected isManager$ = new Subject<boolean>();
   protected hasTeammates$: Observable<boolean> = of(false);
   protected unenrollTooltip?: string;
@@ -49,7 +53,8 @@ export class PlayerEnrollComponent implements OnInit, OnDestroy {
     private api: PlayerService,
     private config: ConfigService,
     private hubService: NotificationService,
-    private localUser: UserService
+    private localUserService: LocalUserService,
+    private userService: UserService
   ) {
     this.ctx$ = timer(0, 1000).pipe(
       map(i => this.ctx),
@@ -65,6 +70,23 @@ export class PlayerEnrollComponent implements OnInit, OnDestroy {
             this.disallowedReason = gc.player.nameStatus;
           }
         }
+      }),
+      tap(ctx => {
+        const localUser = this.localUserService.user$.value;
+        const hasPlayerSession = (!!ctx.player.id && !!ctx.player.session && !ctx.player.session.isBefore);
+
+        this.canAdminEnroll = !!localUser && !hasPlayerSession &&
+          (
+            this.ctx.game.registration.isDuring ||
+            this.userService.canEnrollAndPlayOutsideExecutionWindow(localUser)
+          );
+
+        this.canStandardEnroll = !!localUser && !hasPlayerSession &&
+          ctx.game.registration.isDuring && (
+            !ctx.player.id ||
+            !ctx.player.session ||
+            ctx.player.session?.isBefore
+          );
       })
     );
 
@@ -73,6 +95,7 @@ export class PlayerEnrollComponent implements OnInit, OnDestroy {
       delay(this.delayMs)
     );
 
+    this.isEnrolled$ = this.ctx$.pipe(map(ctx => !!ctx.player.id));
     this.hasTeammates$ = this.hubService.actors$.pipe(map(actors => actors.length > 1));
   }
 

projects/gameboard-ui/src/app/game/player-session/player-session.component.html

@@ -55,7 +55,8 @@
 
       <app-error-div [errors]="errors"></app-error-div>
 
-      <ng-container *ngIf="ctx.player.session && ctx.player.session.isBefore && ctx.game.session.isDuring">
+      <ng-container
+        *ngIf="ctx.player.session && ctx.player.session.isBefore && (ctx.game.session.isDuring || canAdminStart)">
         <app-session-start-controls [ctx]="ctx" (onRequestStart)="handleStart(ctx.player)"></app-session-start-controls>
 
         <div class="card-text" *ngIf="!isDoubleChecking && !ctx.game.requireSynchronizedStart">