the landing page now calls-to-action for the practice area if there a…

…ren't any upcoming games.

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

@@ -55,16 +55,18 @@ <h2>Live!</h2>
   <div class="col-12 mx-0 px-0">
     <h2>Upcoming Games</h2>
   </div>
-  <ng-container *ngFor="let group of future">
-    <div class="col-12 mt-2 mb-0 pb-0 mx-0 pl-1">
-      <h3 class="mb-0 pb-0">
-        <span class="badge badge-dark group-badge text-white p-2">{{group.monthName}} {{group.year}}</span>
-        <span class="ml-3 align-self-center group-count">{{group.games.length}}</span>
-        <div class="border-dark my-3 group-line"></div>
-      </h3>
-    </div>
-    <ng-container *ngFor="let game of group.games">
-      <ng-container *ngTemplateOutlet="gameWrapper;context: {game: game}"></ng-container>
+  <ng-container *ngIf="future.length; else noUpcoming">
+    <ng-container *ngFor="let group of future">
+      <div class="col-12 mt-2 mb-0 pb-0 mx-0 pl-1">
+        <h3 class="mb-0 pb-0">
+          <span class="badge badge-dark group-badge text-white p-2">{{group.monthName}} {{group.year}}</span>
+          <span class="ml-3 align-self-center group-count">{{group.games.length}}</span>
+          <div class="border-dark my-3 group-line"></div>
+        </h3>
+      </div>
+      <ng-container *ngFor="let game of group.games">
+        <ng-container *ngTemplateOutlet="gameWrapper;context: {game: game}"></ng-container>
+      </ng-container>
     </ng-container>
   </ng-container>
 </div>
@@ -141,3 +143,13 @@ <h2 class="p-0 m-0 font-weight-bold">
     <app-spinner>Loading games...</app-spinner>
   </div>
 </ng-template>
+
+<ng-template #noUpcoming>
+  <div class="text-muted text-center my-2">
+    No games coming up (for now). Check back soon!
+    <span *ngIf="practiceAreaRoute">
+      If you want to sharpen your skills while you're waiting, why not head over
+      to the <a [routerLink]="practiceAreaRoute">Practice Area</a>?
+    </span>
+  </div>
+</ng-template>

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

@@ -1,8 +1,8 @@
 // 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 } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, inject, OnInit } from '@angular/core';
+import { Router, UrlTree } from '@angular/router';
 import { faGamepad, faPlusSquare, faSearch, faUserPlus } from '@fortawesome/free-solid-svg-icons';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { debounceTime, switchMap, tap } from 'rxjs/operators';
@@ -11,13 +11,16 @@ import { Game, GameGroup } from '../../api/game-models';
 import { GameService } from '../../api/game.service';
 import { RouterService } from '@/services/router.service';
 import { fa } from '@/services/font-awesome.service';
+import { PracticeService } from '@/services/practice.service';
 
 @Component({
   selector: 'app-landing',
   templateUrl: './landing.component.html',
   styleUrls: ['./landing.component.scss']
 })
-export class LandingComponent {
+export class LandingComponent implements OnInit {
+  private practiceService = inject(PracticeService);
+
   refresh$ = new BehaviorSubject<any>(true);
   featured$: Observable<Game[]>;
   ongoing$: Observable<Game[]>;
@@ -36,6 +39,8 @@ export class LandingComponent {
   showSearchBar = false;
   searchText = "";
 
+  protected practiceAreaRoute?: UrlTree;
+
   constructor(
     private router: Router,
     private routerService: RouterService,
@@ -67,6 +72,11 @@ export class LandingComponent {
     );
   }
 
+  public async ngOnInit(): Promise<void> {
+    if (await this.practiceService.isEnabled())
+      this.practiceAreaRoute = this.routerService.getPracticeAreaUrl();
+  }
+
   selected(game: Game | BoardGame): void {
     this.router.navigate(['/game', game.id]);
   }