Show registration as closed if it's set to the 'Closed' type. Happens…

… on game card mouseover and on the game page.

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

@@ -20,23 +20,33 @@
       </div>
 
       <div class="lead mt-4">Registration</div>
-      <div class="row px-2 mx-0 border-top border-dark">
+      <div *ngIf="isRegistrationOpen" class="row px-2 mx-0 border-top border-dark">
         <div class="col-6 p-2 font-weight-bold">Opens</div>
         <div class="col-6 p-2">{{game.registrationOpen | shorttime:true}}</div>
       </div>
-      <div class="row px-2 mx-0 border-top border-dark">
+      <div *ngIf="isRegistrationOpen" class="row px-2 mx-0 border-top border-dark">
         <div class="col-6 p-2 font-weight-bold">Closes</div>
         <div class="col-6 p-2">{{game.registrationClose | shorttime:true}}</div>
       </div>
       <div class="row px-2 mx-0 border-top border-dark">
         <div class="col-6 p-2 font-weight-bold">Access</div>
-        <div class="col-6 p-2 text-capitalize">{{game.registrationType}}</div>
+
+        <div *ngIf="isRegistrationOpen; else registrationClosed" class="col-6 p-2 text-capitalize">
+          {{ game.registrationType }}
+        </div>
       </div>
       <div class="row px-2 mx-0 border-top border-dark">
         <div class="col-6 p-2 font-weight-bold">Team Size</div>
-        <div class="col-6 p-2">{{game.allowTeam ? (game.minTeamSize || 1)+" - "+(game.maxTeamSize || 1) : "Individual"}}</div>
+        <div class="col-6 p-2">{{game.allowTeam ? (game.minTeamSize || 1)+" - "+(game.maxTeamSize || 1) : "Individual"}}
+        </div>
       </div>
 
     </div>
   </div>
 </ng-container>
+
+<ng-template #registrationClosed>
+  <div class="col-6 p-2">
+    Registration hasn't opened for this game yet. Check back soon!
+  </div>
+</ng-template>

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

@@ -2,9 +2,7 @@
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
 import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Game } from '../../api/game-models';
-import { GameService } from '../../api/game.service';
+import { Game, GameRegistrationType } from '../../api/game-models';
 
 @Component({
   selector: 'app-game-info',
@@ -14,19 +12,12 @@ import { GameService } from '../../api/game.service';
 export class GameInfoComponent implements OnInit {
   @Input() game!: Game;
 
-  // game$!: Observable<Game>;
-
-  constructor (
-    route: ActivatedRoute,
-    api: GameService
-  ) {
-    // if (!route.parent){ return; }
-    // this.game$ = route.parent.params.pipe(
-    //   switchMap(p => api.retrieve(p.id)),
-    // );
-  }
+  protected isRegistrationOpen = false;
 
   ngOnInit(): void {
-  }
+    if (!this.game)
+      return;
 
+    this.isRegistrationOpen = this.game.registrationType != GameRegistrationType.none;
+  }
 }

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

@@ -5,7 +5,7 @@
   <div class="card" *ngIf="ctx">
     <div class="card-body">
 
-      <div class="text-info card-text mb-2">
+      <div class="text-info card-text mb-2" *ngIf="isRegistrationOpen">
         <span *ngIf="ctx.game.registration.isBefore">Enrollment opens in </span>
         <span *ngIf="ctx.game.registration.isDuring">Enrollment closes in </span>
         <span *ngIf="ctx.game.registration.isAfter">Enrollment is closed </span>
@@ -55,8 +55,8 @@
               *ngIf="ctxDelayed$ | async as delay; else loading">
               <div class="text-center"
                 *ngIf="!!(ctx.user.name && hasSelectedSponsor) && ctx.game.registration.isDuring">
-                <app-confirm-button btnClass="btn btn-primary btn-lg mr-4"
-                  (confirm)="handleEnroll(ctx.user.id, ctx.game.id)">
+                <app-confirm-button btnClass="btn btn-primary btn-lg mr-4" [disabled]="!isRegistrationOpen"
+                  [tooltip]="enrollTooltip" (confirm)="handleEnroll(ctx.user.id, ctx.game.id)">
                   <fa-icon [icon]="faEdit"></fa-icon>
                   <span>Enroll</span>
                 </app-confirm-button>

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

@@ -14,6 +14,7 @@ import { UserService as LocalUserService } from '../../utility/user.service';
 import { UserService } from '@/api/user.service';
 import { ClipboardService } from '@/utility/services/clipboard.service';
 import { ToastService } from '@/utility/services/toast.service';
+import { GameRegistrationType } from '@/api/game-models';
 
 @Component({
   selector: 'app-player-enroll',
@@ -39,10 +40,12 @@ export class PlayerEnrollComponent implements OnInit, OnDestroy {
   protected canStandardEnroll = false;
   protected disallowedName: string | null = null;
   protected disallowedReason: string | null = null;
+  protected enrollTooltip = "";
   protected hasSelectedSponsor = false;
   protected managerRole = PlayerRole.manager;
   protected isEnrolled$: Observable<boolean>;
   protected isManager$ = new Subject<boolean>();
+  protected isRegistrationOpen = false;
   protected hasTeammates$: Observable<boolean> = of(false);
   protected unenrollTooltip?: string;
   private hubSub?: Subscription;
@@ -68,6 +71,8 @@ export class PlayerEnrollComponent implements OnInit, OnDestroy {
         ctx.player.session = new TimeWindow(ctx.player?.sessionBegin, ctx.player?.sessionEnd);
         ctx.game.session = new TimeWindow(ctx.game?.gameStart, ctx.game?.gameEnd);
         ctx.game.registration = new TimeWindow(ctx.game?.registrationOpen, ctx.game?.registrationClose);
+        this.isRegistrationOpen = ctx.game.registrationType !== GameRegistrationType.none;
+        this.enrollTooltip = this.isRegistrationOpen ? "" : "Registration is currently closed for this game.";
       }),
       tap((gc) => {
         if (gc.player.nameStatus && gc.player.nameStatus != 'pending') {

projects/gameboard-ui/src/app/home/home.module.ts

@@ -16,6 +16,7 @@ import { LoginPageComponent } from './login-page/login-page.component';
 import { MarkdownModule } from 'ngx-markdown';
 import { FormsModule } from '@angular/forms';
 import { TocPageComponent } from './toc-page/toc-page.component';
+import { RegistrationTypeToIsOpenPipe } from './pipes/registration-type-to-is-open.pipe';
 
 @NgModule({
   declarations: [
@@ -26,6 +27,7 @@ import { TocPageComponent } from './toc-page/toc-page.component';
     ForbiddenComponent,
     LoginPageComponent,
     TocPageComponent,
+    RegistrationTypeToIsOpenPipe,
   ],
   imports: [
     CommonModule,

projects/gameboard-ui/src/app/home/landing/landing.component.html

@@ -75,9 +75,11 @@ <h3 class="mb-0 pb-0">
       <div class="overlay py-4 px-4 d-flex" *ngIf="hot===game">
         <div class="rounded text-center py-3 px-2 mx-3 my-auto w-100">
           <h5 class="mb-0 font-weight-bold">Registration<fa-icon [icon]="faUserPlus" class="ml-2"></fa-icon></h5>
-          <p *ngIf="game.registration.isBefore">Opens in {{game.registrationOpen | until}}</p>
-          <p *ngIf="game.registration.isDuring">Closes in {{game.registrationClose | until}}</p>
-          <p *ngIf="game.registration.isAfter">Closed {{game.registrationClose | ago}}</p>
+          <ng-container *ngIf="game.registrationType | registrationTypeToIsOpen; else registrationClosed">
+            <p *ngIf="game.registration.isBefore">Opens in {{game.registrationOpen | until}}</p>
+            <p *ngIf="game.registration.isDuring">Closes in {{game.registrationClose | until}}</p>
+            <p *ngIf="game.registration.isAfter">Closed {{game.registrationClose | ago}}</p>
+          </ng-container>
           <h5 class="mb-0 font-weight-bold">Competition<fa-icon [icon]="faGamepad" class="ml-2"></fa-icon></h5>
           <p class="mb-0 pb-0" *ngIf="game.session.isBefore">Starts in {{game.gameStart | until}}</p>
           <p class="mb-0 pb-0" *ngIf="game.session.isDuring">Ends in {{game.gameEnd | until}}</p>
@@ -91,6 +93,10 @@ <h2 class="p-0 m-0 font-weight-bold">Open Game</h2>
   </div>
 </ng-template>
 
+<ng-template #registrationClosed>
+  <p><em>Closed</em></p>
+</ng-template>
+
 <ng-template #loading>
   <div class="text-center">
     <app-spinner></app-spinner>

projects/gameboard-ui/src/app/home/pipes/registration-type-to-is-open.pipe.ts

@@ -0,0 +1,14 @@
+import { GameRegistrationType } from '@/api/game-models';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'registrationTypeToIsOpen' })
+export class RegistrationTypeToIsOpenPipe implements PipeTransform {
+
+  transform(type: GameRegistrationType): boolean {
+    if (!type)
+      return false;
+
+    return type !== GameRegistrationType.none;
+  }
+
+}