v3.17.1

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

@@ -20,9 +20,9 @@ import { ChallengeObserverComponent } from './challenge-observer/challenge-obser
 import { ChallengeReportComponent } from './challenge-report/challenge-report.component';
 import { ChallengeSpecEditorComponent } from './components/challenge-spec-editor/challenge-spec-editor.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { DeploymentAdminTeamContextMenuComponent } from './components/deployment-admin-team-context-menu/deployment-admin-team-context-menu.component';
 import { ExternalGameAdminComponent } from './components/external-game-admin/external-game-admin.component';
 import { ExternalGameAdminPlayerContextMenuComponent } from './components/external-game-admin-player-context-menu/external-game-admin-player-context-menu.component';
+import { ExternalGameAdminTeamContextMenuComponent } from './components/external-game-admin-team-context-menu/external-game-admin-team-context-menu.component';
 import { ExternalGamePlayerStatusToStatusLightPipe } from './pipes/external-game-player-status-to-status-light.pipe';
 import { ExternalTeamToChallengeCreatedPipe } from './pipes/external-team-to-challenge-created.pipe';
 import { ExternalTeamChallengesToIsPredeployablePipe } from './pipes/external-team-challenges-to-is-predeployable.pipe';
@@ -61,6 +61,7 @@ import { FeedbackEditorComponent } from './components/feedback-editor/feedback-e
 import { ExtendTeamsModalComponent } from './components/extend-teams-modal/extend-teams-modal.component';
 import { ActiveTeamsModalComponent } from './components/active-teams-modal/active-teams-modal.component';
 import { AdminEnrollTeamModalComponent } from './components/admin-enroll-team-modal/admin-enroll-team-modal.component';
+import { GameYamlImportModalComponent } from './components/game-yaml-import-modal/game-yaml-import-modal.component';
 
 @NgModule({
   declarations: [
@@ -72,9 +73,9 @@ import { AdminEnrollTeamModalComponent } from './components/admin-enroll-team-mo
     ChallengeReportComponent,
     ChallengeSpecEditorComponent,
     DashboardComponent,
-    DeploymentAdminTeamContextMenuComponent,
     ExternalGameAdminComponent,
     ExternalGameAdminPlayerContextMenuComponent,
+    ExternalGameAdminTeamContextMenuComponent,
     ExternalGamePlayerStatusToStatusLightPipe,
     ExternalSpecIdToChallengePipe,
     ExternalGamePlayerStatusToFriendlyPipe,
@@ -111,6 +112,7 @@ import { AdminEnrollTeamModalComponent } from './components/admin-enroll-team-mo
     ExtendTeamsModalComponent,
     ActiveTeamsModalComponent,
     AdminEnrollTeamModalComponent,
+    GameYamlImportModalComponent,
   ],
   imports: [
     CommonModule,

projects/gameboard-ui/src/app/admin/components/active-challenges-modal/active-challenges-modal.component.html

@@ -40,33 +40,32 @@ <h5 class="overflow-ellipsis">
                         </div>
                         <div class="card-footer d-flex align-items-center px-3">
                             <div class="flex-grow-1">
-                                <a [href]="'/support/tickets?search=' + challenge.id" target="_blank"
-                                    *ngIf="challenge.hasTickets" class="btn btn-warning"
+                                <a [href]="'support/tickets?search=' + challenge.id | relativeToAbsoluteHref"
+                                    target="_blank" *ngIf="challenge.hasTickets" class="btn btn-warning"
                                     tooltip="View open tickets for this challenge" placement="bottom">
                                     <fa-icon [icon]="fa.ticket" size="lg"></fa-icon>
                                 </a>
                             </div>
-                            <a [href]="'/admin/support?search=' + challenge.id | relativeToAbsoluteHref" target="_blank"
+                            <a [href]="'admin/support?search=' + challenge.id | relativeToAbsoluteHref" target="_blank"
                                 class="btn btn-info mr-2" tooltip="View this challenge's state" placement="bottom">
                                 <fa-icon [icon]="fa.barsStaggered" size="lg"></fa-icon>
                             </a>
 
-                            <a [href]="'/admin/registrar/' + spec.game.id + '?term=' + challenge.team.id"
+                            <a [href]="'admin/registrar/' + spec.game.id + '?term=' + challenge.team.id | relativeToAbsoluteHref"
                                 target="_blank" class="btn btn-info mr-2"
-                                [tooltip]="'View this ' + (spec.game.isTeamGame | thisOrThat:'team':'player') + '\'s session'"
+                                [tooltip]="'View this ' + (spec.game.isTeamGame ? 'team' : 'player') + '\'s session'"
                                 placement="bottom">
-                                <fa-icon [icon]="spec.game.isTeamGame | thisOrThat:fa.peopleGroup:fa.person"
-                                    size="lg"></fa-icon>
+                                <fa-icon [icon]="spec.game.isTeamGame ? fa.peopleGroup : fa.person" size="lg"></fa-icon>
                             </a>
 
-                            <a [href]="'/admin/observer/challenges/' + spec.game.id + '?search=' + challenge.id"
+                            <a [href]="'admin/observer/challenges/' + spec.game.id + '?search=' + challenge.id | relativeToAbsoluteHref"
                                 target="_blank" class="btn btn-info mr-2" tooltip="Observe this challenge"
                                 placement="bottom">
                                 <fa-icon [icon]="fa.eye" size="lg"></fa-icon>
                             </a>
 
-                            <a [href]="'/game/' + spec.game.id" target="_blank" class="btn btn-info"
-                                tooltip="View this game" placement="bottom">
+                            <a [href]="'game/' + spec.game.id | relativeToAbsoluteHref" target="_blank"
+                                class="btn btn-info" tooltip="View this game" placement="bottom">
                                 <fa-icon [icon]="fa.chessBoard" size="lg"></fa-icon>
                             </a>
                         </div>

projects/gameboard-ui/src/app/admin/components/active-teams-modal/active-teams-modal.component.html

@@ -42,37 +42,36 @@ <h6 class="game-link m-0">
                         </div>
                         <div class="card-footer d-flex align-items-center">
                             <div class="flex-grow-1">
-                                <a [href]="'/support/tickets?search=' + team.id" target="_blank" *ngIf="team.hasTickets"
+                                <a [href]="'support/tickets?search=' + team.id" target="_blank" *ngIf="team.hasTickets"
                                     class="btn btn-warning"
-                                    [tooltip]="'View open tickets for this ' + (team.game.isTeamGame | thisOrThat:'team':'player')"
+                                    [tooltip]="'View open tickets for this ' + (team.game.isTeamGame ? 'team' : 'player')"
                                     placement="bottom">
                                     <fa-icon [icon]="fa.ticket" size="lg"></fa-icon>
                                 </a>
                             </div>
-                            <a [href]="'/admin/support?search=' + team.id | relativeToAbsoluteHref" target="_blank"
+                            <a [href]="'admin/support?search=' + team.id | relativeToAbsoluteHref" target="_blank"
                                 class="btn btn-info mr-2"
-                                [tooltip]="'View challenge states for this ' + (team.game.isTeamGame | thisOrThat:'team':'player')"
+                                [tooltip]="'View challenge states for this ' + (team.game.isTeamGame ? 'team' : 'player')"
                                 placement="bottom">
                                 <fa-icon [icon]="fa.barsStaggered" size="lg"></fa-icon>
                             </a>
 
-                            <a [href]="'/admin/registrar/' + team.game.id + '?term=' + team.id" target="_blank"
-                                class="btn btn-info mr-2"
-                                [tooltip]="'View this ' + (team.game.isTeamGame | thisOrThat:'team':'player') + '\'s session'"
+                            <a [href]="'admin/registrar/' + team.game.id + '?term=' + team.id | relativeToAbsoluteHref"
+                                target="_blank" class="btn btn-info mr-2"
+                                [tooltip]="'View this ' + (team.game.isTeamGame ? 'team' : 'player') + '\'s session'"
                                 placement="bottom">
-                                <fa-icon [icon]="team.game.isTeamGame | thisOrThat:fa.peopleGroup:fa.person"
-                                    size="lg"></fa-icon>
+                                <fa-icon [icon]="team.game.isTeamGame ? fa.peopleGroup : fa.person" size="lg"></fa-icon>
                             </a>
 
-                            <a [href]="'/admin/observer/teams/' + team.game.id + '?search=' + team.id" target="_blank"
-                                class="btn btn-info mr-2"
-                                [tooltip]="'Observe this ' + (team.game.isTeamGame | thisOrThat:'team':'player')"
+                            <a [href]="'admin/observer/teams/' + team.game.id + '?search=' + team.id | relativeToAbsoluteHref"
+                                target="_blank" class="btn btn-info mr-2"
+                                [tooltip]="'Observe this ' + (team.game.isTeamGame ? 'team' : 'player')"
                                 placement="bottom">
                                 <fa-icon [icon]="fa.eye" size="lg"></fa-icon>
                             </a>
 
-                            <a [href]="'/game/' + team.game.id" target="_blank" class="btn btn-info"
-                                tooltip="View this game" placement="bottom">
+                            <a [href]="'game/' + team.game.id |relativeToAbsoluteHref" target="_blank"
+                                class="btn btn-info" tooltip="View this game" placement="bottom">
                                 <fa-icon [icon]="fa.chessBoard" size="lg"></fa-icon>
                             </a>
                         </div>

projects/gameboard-ui/src/app/admin/components/admin-enroll-team-modal/admin-enroll-team-modal.component.html

@@ -20,14 +20,15 @@ <h2 class="modal-title">Add {{isTeamGame ? "Team" : "Player"}}</h2>
         <div class="selection-container">
             <ul class="selection-list d-flex flex-wrap">
                 <li *ngFor="let user of selectedUsers" class="d-flex align-items-center mr-3 py-4 user-list-item">
-                    <app-avatar class="mr-2" [imageUrl]="user.sponsor | sponsorToLogoUri" [tooltip]="user.sponsor.name"
-                        size="tiny"></app-avatar>
-                    <div class="user-info">
+                    <app-avatar-chip [avatarImageUrl]="user.sponsor | sponsorToLogoUri"
+                        [avatarTooltip]="user.sponsor.name" (actionClick)="handleSelectedActionClick(user.id)"
+                        actionTooltip="Remove this player">
                         <div class="fs-11">{{ user.name }}</div>
-                        <div class="fs-08 link-button info-text" [appCopyOnClick]="user.id" tooltip="Copy this user ID">
+                        <div class="fs-08 link-button info-text" [appCopyOnClick]="user.id" tooltip="Copy this user ID"
+                            placement="bottom">
                             {{ user.id | slice:0:8 }}
                         </div>
-                    </div>
+                    </app-avatar-chip>
                 </li>
             </ul>
         </div>

projects/gameboard-ui/src/app/admin/components/admin-enroll-team-modal/admin-enroll-team-modal.component.ts

@@ -80,6 +80,10 @@ export class AdminEnrollTeamModalComponent implements OnInit {
     }
   }
 
+  protected handleSelectedActionClick(userId: string) {
+    this.selectedUsers = [...this.selectedUsers.filter(u => u.id != userId)];
+  }
+
   protected handleTypeaheadSelect(apiUserResult: TypeaheadMatch) {
     if (!this.selectedUsers.some(u => u.id === apiUserResult.item.id)) {
       this.selectedUsers.push(apiUserResult.item);

projects/gameboard-ui/src/app/admin/components/deployment-admin-team-context-menu/deployment-admin-team-context-menu.component.html → projects/gameboard-ui/src/app/admin/components/external-game-admin-team-context-menu/external-game-admin-team-context-menu.component.html

@@ -1,4 +1,4 @@
-|<div class="btn-group" *ngIf="team" dropdown>
+<div class="btn-group" *ngIf="team" dropdown>
     <button [id]="'external-game-admin-context-menu-' + team.id" dropdownToggle type="button"
         class="btn ctx-menu-button rounded-circle" aria-controls="dropdown-basic"
         tooltip="Additional actions for this team">

projects/gameboard-ui/src/app/admin/components/deployment-admin-team-context-menu/deployment-admin-team-context-menu.component.ts → projects/gameboard-ui/src/app/admin/components/external-game-admin-team-context-menu/external-game-admin-team-context-menu.component.ts

@@ -8,10 +8,9 @@ import { ToastService } from '@/utility/services/toast.service';
 
 @Component({
   selector: 'app-deployment-admin-team-context-menu',
-  templateUrl: './deployment-admin-team-context-menu.component.html',
-  styleUrls: ['./deployment-admin-team-context-menu.component.scss']
+  templateUrl: './external-game-admin-team-context-menu.component.html'
 })
-export class DeploymentAdminTeamContextMenuComponent {
+export class ExternalGameAdminTeamContextMenuComponent {
   @Input() team?: SimpleEntity;
   @Input() isReady = false;
   @Output() teamReadyStateToggled = new EventEmitter<{ teamId: string, isReady: boolean }>();

projects/gameboard-ui/src/app/admin/components/external-game-admin/external-game-admin.component.ts

@@ -5,7 +5,7 @@ import { DateTime } from 'luxon';
 import { fa } from '@/services/font-awesome.service';
 import { AppTitleService } from '@/services/app-title.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
-import { Observable, Subject, catchError, combineLatest, debounceTime, filter, firstValueFrom, map, tap, timer } from 'rxjs';
+import { Subject, combineLatest, debounceTime, filter, firstValueFrom, map, timer } from 'rxjs';
 import { ExternalGameService } from '@/services/external-game.service';
 import { ActivatedRoute } from '@angular/router';
 import { FriendlyDatesService } from '@/services/friendly-dates.service';

projects/gameboard-ui/src/app/admin/components/game-yaml-import-modal/game-yaml-import-modal.component.html

@@ -0,0 +1,17 @@
+<div class="game-yaml-import-modal-component">
+    <div class="modal-header">
+        <div class="headers modal-title pull-left">
+            <h2>Import Game YAML</h2>
+        </div>
+        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="handleClose()">
+            <span aria-hidden="true" class="visually-hidden">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        <textarea #yamlIn class="form-control font-fixed-width" rows="12" appAutofocus
+            placeholder="Paste your game's YAML configuration here. If you want to use another game's configuration as a starting point, you can copy it from its game card."></textarea>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-success" (click)="handleImportClick(yamlIn.value)">Import</button>
+    </div>
+</div>

projects/gameboard-ui/src/app/admin/components/game-yaml-import-modal/game-yaml-import-modal.component.ts

@@ -0,0 +1,42 @@
+import { NewGame } from '@/api/game-models';
+import { GameService } from '@/api/game.service';
+import { ModalConfirmService } from '@/services/modal-confirm.service';
+import { YamlService } from '@/services/yaml.service';
+import { Component } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-game-yaml-import-modal',
+  templateUrl: './game-yaml-import-modal.component.html',
+  styleUrls: ['./game-yaml-import-modal.component.scss']
+})
+export class GameYamlImportModalComponent {
+  onCreate?: (game: NewGame) => void | Promise<void>;
+  protected errors: any[] = [];
+
+  constructor(
+    private gameService: GameService,
+    private modalService: ModalConfirmService,
+    private yamlService: YamlService) { }
+
+  protected handleClose() {
+    this.modalService.hide();
+  }
+
+  protected async handleImportClick(yamlIn: string) {
+    this.errors = [];
+    try {
+      const game = this.yamlService.parse<NewGame>(yamlIn);
+      await firstValueFrom(this.gameService.create(game));
+
+      if (this.onCreate) {
+        await this.onCreate(game);
+      }
+    }
+    catch (err) {
+      this.errors.push(err);
+    }
+
+    this.modalService.hide();
+  }
+}

projects/gameboard-ui/src/app/admin/dashboard/dashboard.component.html

@@ -13,6 +13,11 @@
       (input)="typing($event)" aria-label="search term" aria-describedby="search-label"
       placeholder="Enter name, season, track, division, series, sponsor, key, mode, card text, or id">
   </div>
+</div>
+<div class="row">
+  <div class="col-12">
+    <app-error-div [errors]="errors"></app-error-div>
+  </div>
 
   <div *ngIf="tableView" class="col-4">
     <button class="btn btn-secondary btn-sm" (click)="create()">
@@ -34,25 +39,30 @@
     </div>
   </div>
 
-  <div class="component-errors">
-    <app-error-div [errors]="errors"></app-error-div>
-  </div>
-
   <ng-container *ngIf="games$ | async as games; else loading">
-
     <!-- Card view mode -->
     <ng-container *ngIf="!tableView">
       <div class="new-game-controls card col-3 my-3 bg-transparent d-flex flex-column align-items-center">
-        <button class=" btn btn-info flex-grow-1 w-100" (click)="create()">
+        <button class="btn btn-info flex-grow-1 w-100" (click)="create()">
           <fa-icon [icon]="faPlus"></fa-icon>
           <span>New Game</span>
         </button>
 
         <p class="mt-2">OR</p>
 
+        <button class="btn btn-info flex-grow-1 w-100" (click)="handleImportYamlClick()">
+          <fa-icon [icon]="fa.barsStaggered"></fa-icon>
+          <span>Import From YAML</span>
+        </button>
+
+        <p class="mt-2">OR</p>
+
         <app-dropzone class="d-flex flex-grow-1 w-100" (dropped)="dropped($event)">
-          <div class="dropzone-target h-100">
-            <pre class="overflow-hidden">Drag in a yaml game array</pre>
+          <div class="dropzone-target h-100 d-flex flex-column align-items-center justify-content-center">
+            <div class="text-center">
+              Upload or drop a YAML file
+              <em class="d-block fs-09 gray-text">(must be an array of games)</em>
+            </div>
           </div>
         </app-dropzone>
       </div>