v3.9.0

package.json

@@ -33,7 +33,7 @@
     "marked": "^4.2.5",
     "ngx-bootstrap": "^10.1.0",
     "ngx-markdown": "^15.0.0",
-    "oidc-client": "^1.11.5",
+    "oidc-client-ts": "^2.2.2",
     "rxjs": "~6.6.0",
     "toastify-js": "^1.12.0",
     "tslib": "^2.1.0",
@@ -46,8 +46,8 @@
     "@angular/cli": "^15.0.4",
     "@angular/compiler-cli": "^15.0.4",
     "@types/jasmine": "^4.3.1",
-    "@types/marked": "^4.0.8",
     "@types/luxon": "^3.2.0",
+    "@types/marked": "^4.0.8",
     "@types/node": "^14.18.23",
     "@types/toastify-js": "^1.11.1",
     "jasmine-core": "~4.5.0",

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

@@ -39,6 +39,9 @@ import { UserApiKeysComponent } from './user-api-keys/user-api-keys.component';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { AlertModule } from 'ngx-bootstrap/alert';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { TeamAdminContextMenuComponent } from './components/team-admin-context-menu/team-admin-context-menu.component';
+import { ManageManualChallengeBonusesComponent } from './components/manage-manual-challenge-bonuses/manage-manual-challenge-bonuses.component';
+import { ManageManualChallengeBonusesModalComponent } from './components/manage-manual-challenge-bonuses-modal/manage-manual-challenge-bonuses-modal.component';
 
 @NgModule({
   declarations: [
@@ -66,6 +69,9 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
     PlayerNamesComponent,
     ParticipationReportComponent,
     UserApiKeysComponent,
+    TeamAdminContextMenuComponent,
+    ManageManualChallengeBonusesComponent,
+    ManageManualChallengeBonusesModalComponent
   ],
   imports: [
     CommonModule,

projects/gameboard-ui/src/app/admin/components/manage-manual-challenge-bonuses-modal/manage-manual-challenge-bonuses-modal.component.html

@@ -0,0 +1,18 @@
+<div class="manage-manual-challenge-bonuses-modal-component">
+    <div class="modal-header">
+        <h2 class="modal-title pull-left">
+            Manage Bonus Points for
+            <span class="text-info">{{ playerName }}</span> in
+            <span class="text-info">"{{ gameName }} "</span>
+        </h2>
+        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="close()">
+            <span aria-hidden="true" class="visually-hidden">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        <app-manage-manual-challenge-bonuses [teamId]="teamId"></app-manage-manual-challenge-bonuses>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-success" (click)="close()">Done</button>
+    </div>
+</div>

projects/gameboard-ui/src/app/admin/components/manage-manual-challenge-bonuses-modal/manage-manual-challenge-bonuses-modal.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+
+@Component({
+  selector: 'app-manage-manual-challenge-bonuses-modal',
+  templateUrl: './manage-manual-challenge-bonuses-modal.component.html',
+  styleUrls: ['./manage-manual-challenge-bonuses-modal.component.scss']
+})
+export class ManageManualChallengeBonusesModalComponent {
+  teamId!: string;
+  playerName!: string;
+  gameName!: string;
+
+  constructor(private bsModalService: BsModalService) { }
+
+  close() {
+    this.bsModalService.hide();
+  }
+}

projects/gameboard-ui/src/app/admin/components/manage-manual-challenge-bonuses/manage-manual-challenge-bonuses.component.html

@@ -0,0 +1,100 @@
+<div class="manage-manual-challenge-bonuses-component m-4" *ngIf="summary">
+    <table *ngIf="summary.challengeScoreSummaries.length" class="table table-striped border-bottom border-info">
+        <thead class="h5">
+            <th scope="col" width="50%">Challenge</th>
+            <th scope="col" width="10%"></th>
+            <th scope="col" width="10%">Base </th>
+            <th scope="col" width="10%">Bonus</th>
+            <th scope="col" width="15%">Total score</th>
+        </thead>
+        <tbody>
+            <tr *ngFor="let challengeSummary of summary.challengeScoreSummaries">
+                <td>
+                    <div class="points-breakdown">
+                        <h6>{{challengeSummary.spec.name}}</h6>
+
+                        <ul *ngIf="challengeSummary.manualBonuses.length" class="mt-2">
+                            <li *ngFor="let manualBonus of challengeSummary.manualBonuses">
+                                <div class="bonus-description">
+                                    {{ manualBonus.pointValue > 0 ? "+" : "-" }} {{ manualBonus.pointValue }}
+                                    for <strong>{{ manualBonus.description }}</strong>
+
+                                    <em>
+                                        ({{ manualBonus.enteredBy.name }},
+                                        {{ manualBonus.enteredOn | shortdate}} @
+                                        {{ manualBonus.enteredOn | friendlyTime }})
+                                    </em>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </td>
+                <td>
+                    <div class="challenge-title-spacer" *ngIf="challengeSummary.manualBonuses.length"></div>
+
+                    <div class="delete-bonus-button-container"
+                        *ngFor="let manualBonus of challengeSummary.manualBonuses">
+                        <button class="btn btn-sm btn-danger" type="button"
+                            (click)="handleDelete(manualBonus.id)">Delete</button>
+                    </div>
+                </td>
+                <td>
+                    <h6>{{ challengeSummary.scoreFromChallenge }}</h6>
+                </td>
+                <td>
+                    <h6>{{ challengeSummary.scoreFromManualBonuses }}</h6>
+                </td>
+                <td>
+                    <h6>{{ challengeSummary.totalScore }}</h6>
+                </td>
+            </tr>
+
+            <tr class="table-info h6">
+                <td></td>
+                <td></td>
+                <td>{{summary.challengesScore}}</td>
+                <td>{{summary.manualBonusesScore}}</td>
+                <td>{{summary.totalScore}}</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <ng-template #noBonuses>
+        <div class="text-secondary">
+            {{summary.team.name}} hasn't been awarded any bonuses for this game. To give them one, use the form below.
+        </div>
+    </ng-template>
+
+    <div class="add-bonus-container mt-5">
+        <h3 class="mt-3 mb-2">Add a bonus</h3>
+        <form #newBonusForm (submit)="onSubmit()" *ngIf="startedChallenges.length">
+            <div class="form-group w-100">
+                <select class="form-select form-select-lg w-100" name="challengeId"
+                    aria-label="Select challenge for bonus" [(ngModel)]="newChallengeBonusModel.challengeId" required>
+                    <option *ngFor="let challenge of startedChallenges" [value]="challenge.id">
+                        {{ challenge.name }}
+                    </option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="bonusDescription">Bonus description</label>
+                <input type="text" class="form-control" id="bonusDescription" name="bonusDescription"
+                    placeholder="Description for this bonus" required [(ngModel)]="newChallengeBonusModel.description">
+            </div>
+            <div class="form-group">
+                <label for="bonusValue">Points</label>
+                <input type="number" class="form-control" id="bonusValue" name="pointValue"
+                    placeholder="Points to award" min="1" [(ngModel)]="newChallengeBonusModel.pointValue">
+            </div>
+            <button type="submit" class="btn btn-primary"
+                [disabled]="!newChallengeBonusModel.challengeId || !newChallengeBonusModel.description || !newChallengeBonusModel.pointValue">
+                Add this bonus
+            </button>
+        </form>
+
+        <ng-template #noChallengesStarted>
+            <div class="no-challenges-started-message">Bonuses can only be added after a challenge has begun, and this
+                player/team hasn't started any yet.</div>
+        </ng-template>
+    </div>
+</div>

projects/gameboard-ui/src/app/admin/components/manage-manual-challenge-bonuses/manage-manual-challenge-bonuses.component.scss

@@ -0,0 +1,13 @@
+li {
+    line-height: 1.5rem;
+    list-style-type: circle;
+}
+
+.challenge-title-spacer {
+    height: 1.75rem;
+}
+
+.delete-bonus-button-container,
+li {
+    padding: 0.5rem 0;
+}

projects/gameboard-ui/src/app/admin/components/manage-manual-challenge-bonuses/manage-manual-challenge-bonuses.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { first } from 'rxjs/operators';
+import { SimpleEntity } from '../../../api/models';
+import { CreateManualChallengeBonus, TeamGameScoreSummary } from '../../../api/scoring-models';
+import { ScoringService } from '../../../services/scoring.service';
+
+@Component({
+  selector: 'app-manage-manual-challenge-bonuses',
+  templateUrl: './manage-manual-challenge-bonuses.component.html',
+  styleUrls: ['./manage-manual-challenge-bonuses.component.scss']
+})
+export class ManageManualChallengeBonusesComponent implements OnInit {
+  @Input() teamId!: string;
+
+  summary?: TeamGameScoreSummary;
+  startedChallenges: SimpleEntity[] = [];
+  challengesStarted = 0;
+
+  newChallengeBonusModel: CreateManualChallengeBonus = {
+    description: '',
+    challengeId: '',
+    pointValue: 1
+  }
+
+  constructor(private scoresService: ScoringService) { }
+
+  ngOnInit(): void {
+    this.loadSummary(this.teamId);
+  }
+
+  private loadSummary(teamId: string) {
+    this.scoresService.getTeamGameScore(teamId)
+      .pipe(first())
+      .subscribe(summary => {
+        this.summary = summary;
+        this.startedChallenges = this.summary.challengeScoreSummaries.filter(s => !!s.challenge).map(s => s.challenge);
+
+        this.newChallengeBonusModel = {
+          description: '',
+          challengeId: summary.challengeScoreSummaries.length ? summary.challengeScoreSummaries[0].challenge.id : '',
+          pointValue: 1
+        }
+      });
+  }
+
+  handleDelete(manualbonusId: string) {
+    this.scoresService.deleteManualBonus(manualbonusId)
+      .pipe(first())
+      .subscribe(() => this.loadSummary(this.teamId));
+  }
+
+  onSubmit() {
+    this.scoresService
+      .createManualChallengeBonus(this.newChallengeBonusModel)
+      .pipe(first())
+      .subscribe(_ => {
+        this.loadSummary(this.teamId);
+      });
+  }
+}

projects/gameboard-ui/src/app/admin/components/team-admin-context-menu/team-admin-context-menu.component.html

@@ -0,0 +1,35 @@
+<div class="btn-group" dropdown>
+    <button id="button-basic" dropdownToggle type="button" class="btn ctx-menu-button rounded-circle"
+        aria-controls="dropdown-basic">
+        <fa-icon [icon]="faService.ellipsisVertical" size="2x"></fa-icon>
+    </button>
+    <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
+        <li role="menuitem">
+            <button class="dropdown-item btn" (click)="onViewRequest.emit(player)">
+                {{ isViewing ? "Collapse" : "View" }}
+            </button>
+        </li>
+        <li role="menuitem">
+            <button class="dropdown-item btn" (click)="copy(player.id, 'player ID')">Copy player ID</button>
+        </li>
+        <li role="menuitem">
+            <button class="dropdown-item btn" (click)="copy(player.teamId, 'team ID')">Copy team ID</button>
+        </li>
+        <li role="menuitem">
+            <button class="dropdown-item btn" (click)="onBonusManageRequest.emit(player)">
+                Manage Challenge Bonuses
+            </button>
+        </li>
+        <li class="divider dropdown-divider"></li>
+        <li role="menuitem" *ngIf="isResettingSession; else unenroll">
+            <button class="dropdown-item btn btn-danger" (click)="onSessionResetRequest.emit(player)">Reset
+                Session</button>
+        </li>
+        <ng-template #unenroll>
+            <li role="menuitem">
+                <button type="button" class="dropdown-item btn btn-danger"
+                    (click)="onUnenrollRequest.emit(player)">Unenroll</button>
+            </li>
+        </ng-template>
+    </ul>
+</div>

projects/gameboard-ui/src/app/admin/components/team-admin-context-menu/team-admin-context-menu.component.scss

@@ -0,0 +1,8 @@
+.ctx-menu-button {
+    aspect-ratio: 1 / 1;
+}
+
+.btn-danger {
+    font-weight: bold;
+    color: red;
+}

projects/gameboard-ui/src/app/admin/components/team-admin-context-menu/team-admin-context-menu.component.ts

@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Player, TimeWindow } from '../../../api/player-models';
+import { FontAwesomeService } from '../../../services/font-awesome.service';
+import { GameSessionService } from '../../../services/game-session.service';
+import { ClipboardService } from '../../../utility/services/clipboard.service';
+import { ToastService } from '../../../utility/services/toast.service';
+
+@Component({
+  selector: 'app-team-admin-context-menu',
+  templateUrl: './team-admin-context-menu.component.html',
+  styleUrls: ['./team-admin-context-menu.component.scss']
+})
+export class TeamAdminContextMenuComponent implements OnInit {
+  @Input() public player!: Player;
+  @Input() isViewing = false;
+
+  @Output() onBonusManageRequest = new EventEmitter<Player>();
+  @Output() onSessionResetRequest = new EventEmitter<Player>();
+  @Output() onUnenrollRequest = new EventEmitter<Player>();
+  @Output() onViewRequest = new EventEmitter<Player>();
+
+  isResettingSession = false;
+
+  constructor(
+    private clipboardService: ClipboardService,
+    protected faService: FontAwesomeService,
+    private gameSessionService: GameSessionService,
+    private toastService: ToastService) { }
+
+  ngOnInit(): void {
+    this.isResettingSession = !this.gameSessionService.canUnenroll(this.player);
+  }
+
+  async copy(text: string, description: string) {
+    await this.clipboardService.copy(text);
+    this.toastService.showMessage(`Copied ${description} "${text}" to your clipboard.`)
+  }
+}