From 5f503b39bbdec422ac6fdc4c01cc956877c66ec5 Mon Sep 17 00:00:00 2001 From: Ben Stein Date: Tue, 22 Jul 2025 16:36:35 -0400 Subject: [PATCH 01/34] Initial work on challenge collections (admin side only) --- package-lock.json | 8 +- package.json | 2 +- .../src/app/admin/admin.module.ts | 16 +- .../games-table-view.component.ts | 32 +-- .../observe-view/observe-view.component.ts | 2 +- .../challenge-group-list.component.html | 43 +++ .../challenge-group-list.component.scss | 11 + .../challenge-group-list.component.ts | 84 ++++++ ...allenge-group-upsert-dialog.component.html | 60 +++++ ...allenge-group-upsert-dialog.component.scss | 7 + ...challenge-group-upsert-dialog.component.ts | 96 +++++++ .../challenge-group.component.html | 246 ++++++++++++++++++ .../challenge-group.component.scss | 46 ++++ .../challenge-group.component.ts | 217 +++++++++++++++ .../practice-content.component.html | 1 + .../practice-content.component.scss | 13 + .../practice-content.component.ts | 11 + .../admin/practice/practice.component.html | 9 +- .../gameboard-ui/src/app/app.component.html | 3 + projects/gameboard-ui/src/app/app.module.ts | 2 + .../console-page/console-page.component.html | 4 +- .../console-page/console-page.component.scss | 6 +- .../console-page/console-page.component.ts | 11 +- .../consoles/pipes/console-id-to-url.pipe.ts | 1 - .../gameboard-ui/src/app/core/core.module.ts | 4 +- .../core/directives/autofocus.directive.ts | 4 +- .../core/pipes/markdown-placeholder.pipe.ts | 2 +- .../src/app/core/pipes/pluralizer.pipe.ts | 5 +- .../src/app/core/pipes/relative-image.pipe.ts | 8 +- .../feedback-template-picker.component.ts | 22 +- ...-session-availability-warning.component.ts | 18 +- .../gameboard-ui/src/app/game/game.module.ts | 2 + .../app-layout/app-layout.component.html | 2 - .../app-layout/app-layout.component.ts | 36 +-- .../challenge-group-card.component.html | 20 ++ .../challenge-group-card.component.scss | 28 ++ .../challenge-group-card.component.ts | 19 ++ ...ice-challenge-state-summary.component.html | 8 +- .../pipes/challenge-group-card-image.pipe.ts | 16 ++ .../gameboard-ui/src/app/prac/prac.module.ts | 1 + .../src/app/prac/practice.models.ts | 82 +++++- ...sponsor-challenge-performance.component.ts | 8 +- .../src/app/reports/reports.module.ts | 4 + .../src/app/services/practice.service.ts | 43 ++- .../src/app/services/router.service.ts | 18 +- .../components/spinner/spinner.component.ts | 16 +- .../admin-system-notifications.component.ts | 12 +- .../system-notifications.module.ts | 7 +- .../game-card/game-card.component.ts | 10 +- .../src/app/utility/utility.module.ts | 4 + .../practice-challenge-group/default-card.svg | 101 +++++++ projects/gameboard-ui/src/styles.scss | 8 + .../src/tools/object-tools.lib.ts | 31 +++ tsconfig.json | 14 +- 54 files changed, 1333 insertions(+), 151 deletions(-) create mode 100644 projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.html create mode 100644 projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.scss create mode 100644 projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.ts create mode 100644 projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.html create mode 100644 projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.scss create mode 100644 projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.ts create mode 100644 projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.html create mode 100644 projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.scss create mode 100644 projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.ts create mode 100644 projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.html create mode 100644 projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.scss create mode 100644 projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.ts create mode 100644 projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.html create mode 100644 projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.scss create mode 100644 projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.ts create mode 100644 projects/gameboard-ui/src/app/prac/pipes/challenge-group-card-image.pipe.ts create mode 100644 projects/gameboard-ui/src/assets/img/practice-challenge-group/default-card.svg diff --git a/package-lock.json b/package-lock.json index fed78cfcb..32f71395f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@angular/platform-browser": "^19.2.14", "@angular/platform-browser-dynamic": "^19.2.14", "@angular/router": "^19.2.14", - "@cmusei/console-forge": "^0.19.1", + "@cmusei/console-forge": "^0.20.1", "@fortawesome/angular-fontawesome": "^1.0.0", "@fortawesome/fontawesome-svg-core": "^6.7.2", "@fortawesome/free-brands-svg-icons": "^6.7.2", @@ -3760,9 +3760,9 @@ "optional": true }, "node_modules/@cmusei/console-forge": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/@cmusei/console-forge/-/console-forge-0.19.1.tgz", - "integrity": "sha512-TgDsBX2r35HerMCxrIimvlcDPzEfOUUQxNdVCqiZaq84dpyxPBCeVBp5VIi47Oy7+UYprpHmxRWoUGmVzpB3hw==", + "version": "0.20.1", + "resolved": "https://registry.npmjs.org/@cmusei/console-forge/-/console-forge-0.20.1.tgz", + "integrity": "sha512-1Y70eji4Z0PZpnNi4sPHhOthsAr0KH313OjbHam+mpLDl7Bw0KG4IirHJ2+ImtGEtSfhL+eR079V03B5zXLw7g==", "dependencies": { "@picocss/pico": "^2.1.1", "tslib": "^2.3.0" diff --git a/package.json b/package.json index f4ed06efd..a507379b4 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@angular/platform-browser": "^19.2.14", "@angular/platform-browser-dynamic": "^19.2.14", "@angular/router": "^19.2.14", - "@cmusei/console-forge": "^0.19.1", + "@cmusei/console-forge": "^0.20.1", "@fortawesome/angular-fontawesome": "^1.0.0", "@fortawesome/fontawesome-svg-core": "^6.7.2", "@fortawesome/free-brands-svg-icons": "^6.7.2", diff --git a/projects/gameboard-ui/src/app/admin/admin.module.ts b/projects/gameboard-ui/src/app/admin/admin.module.ts index 5daac0367..022bf1ac7 100644 --- a/projects/gameboard-ui/src/app/admin/admin.module.ts +++ b/projects/gameboard-ui/src/app/admin/admin.module.ts @@ -98,6 +98,10 @@ import { StatusLightComponent } from '@/core/components/status-light/status-ligh import { ConsoleTileComponent } from '@cmusei/console-forge'; import { PracticeObserveComponent } from './practice/practice-observe/practice-observe.component'; import { ObserveViewComponent } from './components/observe-view/observe-view.component'; +import { PracticeContentComponent } from './practice/practice-content/practice-content.component'; +import { PluralizerPipe } from '@/core/pipes/pluralizer.pipe'; +import { ChallengeGroupComponent } from './practice/challenge-group/challenge-group.component'; +import { ChallengeGroupListComponent } from './practice/challenge-group-list/challenge-group-list.component'; @NgModule({ declarations: [ @@ -193,9 +197,18 @@ import { ObserveViewComponent } from './components/observe-view/observe-view.com }, { path: "practice", component: PracticeComponent, children: [ + { + path: "content", + component: PracticeContentComponent, + title: "Practice Content", + children: [ + { path: "", component: ChallengeGroupListComponent, title: "Practice Content", pathMatch: "full" }, + { path: "group/:id", component: ChallengeGroupComponent, title: "Challenge Group" } + ] + }, { path: "settings", component: PracticeSettingsComponent, title: "Practice Settings" }, { path: "observe", component: PracticeObserveComponent, title: "Practice Observe" }, - { path: "", pathMatch: "full", redirectTo: "settings" }, + { path: "", pathMatch: "full", redirectTo: "content" }, ] }, { path: 'registrar/sponsors', component: SponsorBrowserComponent, title: "Sponsors | Admin" }, @@ -233,6 +246,7 @@ import { ObserveViewComponent } from './components/observe-view/observe-view.com MarkdownPlaceholderPipe, ObserveViewComponent, PackageUploadComponent, + PluralizerPipe, SafeUrlPipe, SessionExtensionGameEndWarningComponent, SpinnerComponent, diff --git a/projects/gameboard-ui/src/app/admin/components/games-table-view/games-table-view.component.ts b/projects/gameboard-ui/src/app/admin/components/games-table-view/games-table-view.component.ts index 8c6b029d2..1f22310aa 100644 --- a/projects/gameboard-ui/src/app/admin/components/games-table-view/games-table-view.component.ts +++ b/projects/gameboard-ui/src/app/admin/components/games-table-view/games-table-view.component.ts @@ -1,29 +1,31 @@ import { Component, inject, input, output } from '@angular/core'; +import { Router } from '@angular/router'; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { firstValueFrom } from 'rxjs'; +import { GameToGameCenterLinkPipe } from '@/admin/pipes/game-to-game-center-link.pipe'; import { Game, ListGamesResponseGame } from '@/api/game-models'; import { CoreModule } from '@/core/core.module'; import { GameToMetadataTextPipe } from '@/core/pipes/game-to-metadata-text.pipe'; -import { fa } from "@/services/font-awesome.service"; import { GameInfoBubblesComponent } from '@/standalone/games/components/game-info-bubbles/game-info-bubbles.component'; -import { GameToGameCenterLinkPipe } from '@/admin/pipes/game-to-game-center-link.pipe'; import { GameService } from '@/api/game.service'; -import { RouterService } from '@/services/router.service'; import { ThemeBgDirective } from '@/core/directives/theme-bg.directive'; -import { Router } from '@angular/router'; +import { PluralizerPipe } from '@/core/pipes/pluralizer.pipe'; +import { fa } from "@/services/font-awesome.service"; +import { RouterService } from '@/services/router.service'; @Component({ - selector: 'app-games-table-view', - templateUrl: './games-table-view.component.html', - styleUrl: './games-table-view.component.scss', - imports: [ - BsDropdownModule, - CoreModule, - GameInfoBubblesComponent, - GameToGameCenterLinkPipe, - GameToMetadataTextPipe, - ThemeBgDirective - ] + selector: 'app-games-table-view', + templateUrl: './games-table-view.component.html', + styleUrl: './games-table-view.component.scss', + imports: [ + BsDropdownModule, + CoreModule, + GameInfoBubblesComponent, + GameToGameCenterLinkPipe, + GameToMetadataTextPipe, + PluralizerPipe, + ThemeBgDirective + ] }) export class GamesTableViewComponent { cloneRequest = output(); diff --git a/projects/gameboard-ui/src/app/admin/components/observe-view/observe-view.component.ts b/projects/gameboard-ui/src/app/admin/components/observe-view/observe-view.component.ts index 0967b9476..551fce5da 100644 --- a/projects/gameboard-ui/src/app/admin/components/observe-view/observe-view.component.ts +++ b/projects/gameboard-ui/src/app/admin/components/observe-view/observe-view.component.ts @@ -116,7 +116,7 @@ export class ObserveViewComponent { credentials: { accessTicket: console.accessTicket }, url: console.url }; - const consoleAppUrl = this.routerService.buildVmConsoleUrl(console.consoleId.challengeId, console.consoleId.name).toString(); + const consoleAppUrl = this.routerService.buildVmConsoleUrl(console.consoleId.challengeId, console.consoleId.name, false, true).toString(); if (teamsToPush.has(console.team.id)) { teamsToPush.get(console.team.id)!.consoles.push({ diff --git a/projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.html b/projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.html new file mode 100644 index 000000000..d06e39a1b --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.html @@ -0,0 +1,43 @@ + + +
+ +
+ +@if (existingGroupsResource.isLoading()) +{ +Loading challenge groups... +} +@else if (!existingGroups()?.length) +{ +
+
+ No collections yet. Hit the "Add Collection" button to start structuring your challenges into handy + collections! +
+} + +
+ @for (group of existingGroups(); track group.id) + { + +
+ + View + + + +
+ + } +
+ + + + diff --git a/projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.scss b/projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.scss new file mode 100644 index 000000000..1e8542883 --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.scss @@ -0,0 +1,11 @@ +.practice-content-container { + align-items: stretch; + flex-wrap: wrap; + gap: 1rem; +} + +app-challenge-group-card { + display: block; + height: auto; + flex: 0 0 30%; +} diff --git a/projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.ts b/projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.ts new file mode 100644 index 000000000..e62203b0e --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/challenge-group-list/challenge-group-list.component.ts @@ -0,0 +1,84 @@ +import { CoreModule } from '@/core/core.module'; +import { ChallengeGroupCardComponent } from '@/prac/components/challenge-group-card/challenge-group-card.component'; +import { CreatePracticeChallengeGroupRequest, ListChallengeGroupsResponseGroup, UpdateChallengeGroupRequest } from '@/prac/practice.models'; +import { fa } from '@/services/font-awesome.service'; +import { ModalConfirmService } from '@/services/modal-confirm.service'; +import { PracticeService } from '@/services/practice.service'; +import { ErrorDivComponent } from '@/standalone/core/components/error-div/error-div.component'; +import { SpinnerComponent } from '@/standalone/core/components/spinner/spinner.component'; +import { Component, computed, inject, model, resource, TemplateRef, viewChild } from '@angular/core'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; +import { ChallengeGroupUpsertDialogComponent, UpsertChallengeGroup } from '../challenge-group-upsert-dialog/challenge-group-upsert-dialog.component'; + +@Component({ + selector: 'app-challenge-group-list', + imports: [ + FontAwesomeModule, + CoreModule, + ChallengeGroupCardComponent, + ChallengeGroupUpsertDialogComponent, + SpinnerComponent, + ErrorDivComponent + ], + templateUrl: './challenge-group-list.component.html', + styleUrl: './challenge-group-list.component.scss' +}) +export class ChallengeGroupListComponent { + private readonly modalService = inject(ModalConfirmService); + private readonly practiceService = inject(PracticeService); + + protected errors: any[] = []; + protected fa = fa; + protected editGroup = model(); + protected existingGroupsResource = resource({ + loader: () => this.practiceService.challengeGroupList() + }); + protected existingGroups = computed(() => this.existingGroupsResource.value()); + protected readonly upsertGroupModalTemplate = viewChild>("upsertGroupModal"); + + protected handleOpenCreateDialog() { + if (!this.upsertGroupModalTemplate()) { + this.errors.push("Couldn't resolve the group dialog."); + } + + this.editGroup.update(() => undefined); + this.modalService.openTemplate(this.upsertGroupModalTemplate()!); + } + + protected handleOpenDeleteDialog(group: ListChallengeGroupsResponseGroup) { + const subcollectionsText = group.childGroups.length > 0 ? " Its subcollections will also be deleted." : ""; + + this.modalService.openConfirm({ + title: "Delete Collection", + subtitle: group.name, + bodyContent: `Are you sure you want to delete the collection **${group.name}**?${subcollectionsText}\n\nAny challenges it contains will still be available in the Practice Area.`, + renderBodyAsMarkdown: true, + onConfirm: async () => { + await this.practiceService.challengeGroupDelete(group.id); + this.existingGroupsResource.reload(); + } + }); + } + + protected handleOpenEditDialog(group: ListChallengeGroupsResponseGroup) { + if (!this.upsertGroupModalTemplate()) { + this.errors.push("Couldn't resolve the group dialog."); + } + + this.editGroup.update(() => ({ + ...group, + previousImageUrl: group.imageUrl, + })); + this.modalService.openTemplate(this.upsertGroupModalTemplate()!); + } + + protected async handleGroupSaved(value: CreatePracticeChallengeGroupRequest | UpdateChallengeGroupRequest) { + this.errors = []; + try { + this.existingGroupsResource.reload(); + } + catch (err) { + this.errors.push(err); + } + } +} diff --git a/projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.html b/projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.html new file mode 100644 index 000000000..e0d1d8f17 --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.html @@ -0,0 +1,60 @@ + + + +
+
+ + +
+ +
+ + +
+ +
+ + + + +
+ +
+ +
+ @if (previewImageUrl()) + { + Uploaded image (for group card) + } + @else if (isEditing() && !this.previewImageUrl() && this.upsertGroupForm.value.previousImageUrl) + { + + } +
+ +
+ +
+ +
+
+
+ +
+ + +
+
+ diff --git a/projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.scss b/projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.scss new file mode 100644 index 000000000..c05f51e35 --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.scss @@ -0,0 +1,7 @@ +.preview-group-card-image { + max-height: 200px; +} + +input[type="checkbox"] { + text-align: left; +} diff --git a/projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.ts b/projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.ts new file mode 100644 index 000000000..bbd38b256 --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/challenge-group-upsert-dialog/challenge-group-upsert-dialog.component.ts @@ -0,0 +1,96 @@ +import { Component, computed, effect, inject, input, output, resource, signal } from '@angular/core'; +import { FormGroup, FormControl, Validators } from '@angular/forms'; +import { CoreModule } from '@/core/core.module'; +import { MarkdownPlaceholderPipe } from '@/core/pipes/markdown-placeholder.pipe'; +import { CreatePracticeChallengeGroupRequest, UpdateChallengeGroupRequest } from '@/prac/practice.models'; +import { PracticeService } from '@/services/practice.service'; +import { ErrorDivComponent } from '@/standalone/core/components/error-div/error-div.component'; +import { RelativeImagePipe } from '@/core/pipes/relative-image.pipe'; + +export interface UpsertChallengeGroup { + id: string; + name: string; + description: string; + isFeatured: boolean; + previousImageUrl?: string; + parentGroupId?: string; +} + +@Component({ + selector: 'app-challenge-group-upsert-dialog', + imports: [ + CoreModule, + ErrorDivComponent, + MarkdownPlaceholderPipe, + RelativeImagePipe + ], + templateUrl: './challenge-group-upsert-dialog.component.html', + styleUrl: './challenge-group-upsert-dialog.component.scss' +}) +export class ChallengeGroupUpsertDialogComponent { + public group = input>(); + public saved = output(); + + private readonly practiceService = inject(PracticeService); + protected errors: any[] = []; + protected readonly isEditing = computed(() => !!this.upsertGroupForm.value.id); + protected previewImageUrl = signal(null); + protected upsertGroupForm = new FormGroup({ + id: new FormControl(""), + name: new FormControl("", Validators.required), + description: new FormControl("", Validators.required), + isFeatured: new FormControl(false), + image: new FormControl(null), + parentGroupId: new FormControl(null), + previousImageUrl: new FormControl(""), + }); + protected existingGroupsResource = resource({ loader: () => this.practiceService.challengeGroupList() }); + protected existingGroups = computed(() => this.existingGroupsResource.value()); + + constructor() { + effect(() => { + // incoming edit request + const group = this.group(); + if (group) { + this.upsertGroupForm.patchValue(group); + this.previewImageUrl.update(() => null); + } + }); + } + + protected async handleConfirm() { + this.errors = []; + + try { + if (this.upsertGroupForm.value.id) { + await this.practiceService.challengeGroupUpdate(this.upsertGroupForm.value as UpdateChallengeGroupRequest); + this.saved.emit(this.upsertGroupForm.value as UpdateChallengeGroupRequest); + } else { + await this.practiceService.challengeGroupCreate(this.upsertGroupForm.value as CreatePracticeChallengeGroupRequest); + this.saved.emit(this.upsertGroupForm.value as CreatePracticeChallengeGroupRequest); + } + this.existingGroupsResource.reload(); + } + catch (err) { + this.errors.push(err); + } + } + + protected handleImagePicked(event: Event) { + const inputElement = event?.target as HTMLInputElement; + if (!inputElement || !inputElement.files) { + this.previewImageUrl.update(() => null); + this.upsertGroupForm.patchValue({ image: null }); + return; + } + + const file = inputElement.files[0]; + this.previewImageUrl.update(() => URL.createObjectURL(file)); + this.upsertGroupForm.patchValue({ image: file || null }); + } + + protected handleRevertToDefaultImage() { + this.upsertGroupForm.patchValue({ image: null, previousImageUrl: null }); + this.previewImageUrl.update(() => null); + } +} diff --git a/projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.html b/projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.html new file mode 100644 index 000000000..5230bf035 --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.html @@ -0,0 +1,246 @@ +@if(groupResource.isLoading()) +{ +Loading group... +} + +@if (groupResource.hasValue()) +{ +
+
+
+
+ « Back to all challenge collections +
+ + @if (groupResource.value().parentGroup?.id) + { +
+ + « Back to + {{ groupResource.value().parentGroup?.name }} + +
+ } + + + + + + +
+
+ +
+ + @if (canAddSubCollections()) + { + @if(groupResource.value().childGroups.length == 0 && groupResource.value().group.challenges.length == 0) + { + +
About challenge collections
+ + A collection can technically contain both subcollections and challenges. In + practice, we recommend choosing one or the other. For example, you add all the challenges from a specific + event to this collection, or you might instead create subcollections by difficulty (e.g. "Easy", "Medium", + and "Hard") which contain the challenges. + + } +
+

Subcollections

+ + @if (groupResource.value().childGroups.length) + { +
+ +
+
+ @for (childGroup of groupResource.value().childGroups; track childGroup.id) + { + +
+ {{ childGroup.challenges.length }} {{ "challenge" | pluralizer:childGroup.challenges.length }} +
+ View + + + + } +
+ } + @else + { +
+ This collection doesn't have any subcollections. + Add one now! +
+ } +
+ } + +
+

+ Challenges + {{ groupResource.value().group.challenges.length ? " (" + groupResource.value().group.challenges.length + + ")" : "" + }} +

+ + @if (groupResource.value().group.challenges.length) + { +
+ +
+ +
+
+ } + @else + { +
+ This collection doesn't have any challenges yet. + Add some now! +
+ } + + @for (childGroup of groupResource.value().childGroups; track childGroup.id) + { +
+
+ } +
+
+
+} + + + + +
+
+ + +
+
+ + +
+ + @if (gamesResource.value()?.length) + { +
+ + +
+ } +
+ + @if (addChallengesByValue() === "challenge") + { + + NOTE: To be available in the Practice Area, a challenge's game must be in Practice Mode. + + + } + @else if (addChallengesByValue() === "tag") + { + + } + @else if (addChallengesByValue() === "game") + { + + } + + + + + + + + + + + + +
+ {{ context.group.name }} header image +
{{ context.isThisGroup ? "In this collection" : context.group.name }}
+
+ + @if (context.group.challenges.length) + { + + + + + + + + + + @for (challenge of context.group.challenges; track challenge.id) + { + + + + + + + } + +
ChallengeTimes Launched/CompletedLast Launch + +
{{ challenge.name }}{{ challenge.countLaunched }} / {{ challenge.countCompleted }}{{ challenge.lastLaunched | friendlyDateAndTime }} + +
+ } + @else + { +
+ This subcollection doesn't have any challenges. +
+ } + diff --git a/projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.scss b/projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.scss new file mode 100644 index 000000000..896f58c8b --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.scss @@ -0,0 +1,46 @@ +@import "../../../../scss/variables"; + +.main-group-card { + width: 300px; +} + +app-challenge-group-card { + display: block; +} + +.child-groups-container app-challenge-group-card { + width: 30%; +} + +.layout-container { + display: flex; + gap: 1.5rem; + + .quasi-sidebar { + flex: 0 1 auto; + + .quasi-sidebar-content { + top: 14px; + position: sticky; + } + } +} + +.group-challenges-header { + background-color: $body-bg; + + img { + aspect-ratio: 16/9; + max-height: 3rem; + object-fit: cover; + } + + h5 { + margin: 0; + padding: 0; + } +} + +.challenge-title-cell { + width: 40%; +} diff --git a/projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.ts b/projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.ts new file mode 100644 index 000000000..f4e893530 --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/challenge-group/challenge-group.component.ts @@ -0,0 +1,217 @@ +import { Component, computed, effect, inject, model, resource, signal, TemplateRef, viewChild } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; +import { ActivatedRoute, Router } from '@angular/router'; +import { firstValueFrom, map } from 'rxjs'; +import { CoreModule } from '@/core/core.module'; +import { PracticeService } from '@/services/practice.service'; +import { SpinnerComponent } from '@/standalone/core/components/spinner/spinner.component'; +import { ModalConfirmService } from '@/services/modal-confirm.service'; +import { ChallengesAddToGroupRequest, GetPracticeChallengeGroupResponseChallenge, GetPracticeChallengeGroupResponseGroup, PracticeChallengeView } from '@/prac/practice.models'; +import { ChallengeGroupCardComponent } from '@/prac/components/challenge-group-card/challenge-group-card.component'; +import { fa } from '@/services/font-awesome.service'; +import { AppTitleService } from '@/services/app-title.service'; +import { ChallengeGroupUpsertDialogComponent, UpsertChallengeGroup } from '../challenge-group-upsert-dialog/challenge-group-upsert-dialog.component'; +import { PluralizerPipe } from '@/core/pipes/pluralizer.pipe'; +import { ChallengeGroupCardImagePipe } from '@/prac/pipes/challenge-group-card-image.pipe'; +import { GameService } from '@/api/game.service'; +import { PlayerMode } from '@/api/player-models'; +import { SimpleEntity } from '@/api/models'; +import { ToastService } from '@/utility/services/toast.service'; + +@Component({ + selector: 'app-challenge-group', + imports: [ + CoreModule, + ChallengeGroupCardComponent, + ChallengeGroupCardImagePipe, + ChallengeGroupUpsertDialogComponent, + PluralizerPipe, + SpinnerComponent, + ], + templateUrl: './challenge-group.component.html', + styleUrl: './challenge-group.component.scss' +}) +export class ChallengeGroupComponent { + private readonly activeRoute = inject(ActivatedRoute); + private readonly gamesService = inject(GameService); + private readonly groupId = toSignal(this.activeRoute.paramMap.pipe(map(p => p.get("id")))); + private readonly modalService = inject(ModalConfirmService); + private readonly practiceService = inject(PracticeService); + private readonly router = inject(Router); + private readonly title = inject(AppTitleService); + private readonly toasts = inject(ToastService); + + protected readonly addChallengeModalTemplate = viewChild>("addChallengeModal"); + protected readonly addChildGroupModalTemplate = viewChild>("addChildGroupModal"); + protected readonly editGroupModalTemplate = viewChild>("editGroupModal"); + + protected readonly challengesResource = resource({ loader: async () => this.practiceService.challengesList() }); + protected readonly gamesResource = resource({ + loader: async () => { + return firstValueFrom(this.gamesService.list().pipe( + map(games => games + .filter(g => g.playerMode == PlayerMode.practice) + .map(g => ({ id: g.id, name: g.name } as SimpleEntity)) + .sort((a, b) => a.name.localeCompare(b.name)) + ) + )); + } + }); + protected readonly groupResource = resource({ + request: () => ({ id: this.groupId() }), + loader: ({ request }) => this.practiceService.challengeGroupGet(request.id!) + }); + protected readonly settingsResource = resource({ loader: () => firstValueFrom(this.practiceService.getSettings()) }); + + protected readonly addChallengesByValue = model<"challenge" | "game" | "tag">("challenge"); + protected readonly canAddSubCollections = computed(() => !this.groupResource.value()?.parentGroup); + protected readonly challenges = computed(() => { + // the API will reject duplicates, but hide any challenges already in the group + const challenges = this.challengesResource.value(); + const group = this.groupResource.value(); + + if (!challenges?.length) { + return []; + } + + return challenges.filter(c => group?.group.challenges.map(c => c.id).indexOf(c.id) === -1); + }); + protected readonly creatingChildGroup = computed(() => ({ parentGroupId: this.group()?.id })); + protected readonly editingGroup = signal(undefined); + protected readonly fa = fa; + protected readonly group = computed(() => this.groupResource.value()?.group); + protected readonly selectedChallenge = model(); + protected readonly selectedGame = model(); + protected readonly selectedTag = model(); + protected readonly tags = computed(() => { + const settings = this.settingsResource.value(); + return settings?.suggestedSearches?.sort() || []; + }); + + constructor() { + // need to update the title based on the groupResource + effect(() => { + const group = this.groupResource.value(); + this.title.set(group?.group.name || "Practice Challenge Group"); + }); + + // when challenges, games, and tags are loaded, automatically select the first one (so the add from x dropdowns + // aren't blank) + effect(() => { + const challenges = this.challengesResource.value(); + if (challenges?.length) { + this.selectedChallenge.update(() => challenges[0]); + } + }); + effect(() => { + const games = this.gamesResource.value(); + if (games?.length) { + this.selectedGame.update(() => games[0]); + } + }); + effect(() => { + const tags = this.tags(); + if (tags.length) { + this.selectedTag.update(() => tags[0]); + } + }); + } + + protected async handleAddChallenges() { + if (!this.groupId()) { + throw new Error("Can't resolve the groupId."); + } + + const addChallengesRequest: ChallengesAddToGroupRequest = {}; + switch (this.addChallengesByValue()) { + case "challenge": + addChallengesRequest.addBySpecIds = [this.selectedChallenge()!.id]; + break; + case "game": + addChallengesRequest.addByGameId = this.selectedGame()!.id; + break; + case "tag": + addChallengesRequest.addByTag = this.selectedTag(); + break; + } + + const addedSpecIds = await this.practiceService.challengesAddToGroup(this.groupId()!, addChallengesRequest); + this.toasts.showMessage(`Added **${addedSpecIds.addedChallengeSpecIds.length} challenges** to the **${this.group()?.name || ""}** group.`); + this.groupResource.reload(); + } + + protected handleOpenAddSubCollectionModal() { + if (!this.addChildGroupModalTemplate()) { + throw new Error("Couldn't resolve the template."); + } + + this.modalService.openTemplate(this.addChildGroupModalTemplate()!); + } + + protected handleOpenEditCollectionModal(group: GetPracticeChallengeGroupResponseGroup, parentGroupId?: string) { + if (!this.editGroupModalTemplate()) { + throw new Error("Couldn't resolve the template."); + } + + this.editingGroup.update(() => { + return { + ...group, + parentGroupId: parentGroupId, + previousImageUrl: group.imageUrl + }; + }); + + this.modalService.openTemplate(this.editGroupModalTemplate()!); + } + + protected handleDeleteCollectionModal(group: GetPracticeChallengeGroupResponseGroup, hasChildGroups: boolean) { + const childGroupsText = !hasChildGroups ? "" : " Its subcollections will also be deleted."; + this.modalService.openConfirm({ + title: "Delete Collection", + subtitle: group.name, + bodyContent: `Are you sure you want to delete the collection **${group.name}**?${childGroupsText}\n\nChallenges in the collection will still be available in the Practice Area.`, + renderBodyAsMarkdown: true, + onConfirm: async () => { + await this.practiceService.challengeGroupDelete(group.id); + + if (group.id === this.groupResource.value()?.group?.id) { + // if the deleted group is this page's group, return to the group list screen + this.router.navigateByUrl("/admin/practice/content"); + } else { + // otherwise, just reload + this.groupResource.reload(); + } + } + }); + } + + protected handleGroupSaved() { + this.groupResource.reload(); + } + + protected handleOpenAddChallengeModal() { + if (!this.addChallengeModalTemplate()) { + throw new Error("Couldn't resolve the modal."); + } + + this.modalService.openTemplate(this.addChallengeModalTemplate()!); + } + + protected handleOpenRemoveChallengeModal(groupId: string, challenge: GetPracticeChallengeGroupResponseChallenge) { + if (!this.groupId()) { + throw new Error("Can't resolve the groupId."); + } + + this.modalService.openConfirm({ + title: "Remove Challenge", + subtitle: this.groupResource.value()?.group?.name, + bodyContent: `Remove **${challenge.name}** from this collection? (It'll still be available in the Practice Area.)`, + onConfirm: async () => { + await this.practiceService.challengesRemoveFromGroup({ challengeGroupId: groupId, challengeSpecIds: [challenge.id] }); + this.groupResource.reload(); + }, + confirmButtonText: "Remove", + renderBodyAsMarkdown: true + }); + } +} diff --git a/projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.html b/projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.html new file mode 100644 index 000000000..0680b43f9 --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.html @@ -0,0 +1 @@ + diff --git a/projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.scss b/projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.scss new file mode 100644 index 000000000..d84031e09 --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.scss @@ -0,0 +1,13 @@ +.practice-content-container { + flex-wrap: wrap; + gap: 1rem; +} + +app-challenge-group-card { + display: block; + flex: 0 0 30%; +} + +.preview-group-card-image { + max-height: 200px; +} diff --git a/projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.ts b/projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.ts new file mode 100644 index 000000000..481b94d1a --- /dev/null +++ b/projects/gameboard-ui/src/app/admin/practice/practice-content/practice-content.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; + +@Component({ + selector: 'app-practice-content', + imports: [RouterOutlet], + templateUrl: './practice-content.component.html', + styleUrl: './practice-content.component.scss' +}) +export class PracticeContentComponent { +} diff --git a/projects/gameboard-ui/src/app/admin/practice/practice.component.html b/projects/gameboard-ui/src/app/admin/practice/practice.component.html index b6dd30b04..6e86768ca 100644 --- a/projects/gameboard-ui/src/app/admin/practice/practice.component.html +++ b/projects/gameboard-ui/src/app/admin/practice/practice.component.html @@ -8,8 +8,8 @@

Practice Area

diff --git a/projects/gameboard-ui/src/app/app.component.html b/projects/gameboard-ui/src/app/app.component.html index bab4cea07..3a44da804 100644 --- a/projects/gameboard-ui/src/app/app.component.html +++ b/projects/gameboard-ui/src/app/app.component.html @@ -1,5 +1,8 @@
+ + +
diff --git a/projects/gameboard-ui/src/app/app.module.ts b/projects/gameboard-ui/src/app/app.module.ts index ad7f717d8..a209fc45f 100644 --- a/projects/gameboard-ui/src/app/app.module.ts +++ b/projects/gameboard-ui/src/app/app.module.ts @@ -36,6 +36,7 @@ import { markedOptionsFactory } from './core/config/marked.config'; import { MarkdownModule, MARKED_OPTIONS, provideMarkdown } from 'ngx-markdown'; import { ThemeBgDirective } from './core/directives/theme-bg.directive'; import { environment } from '../environments/environment'; +import { MessageBoardComponent } from './utility/components/message-board/message-board.component'; @NgModule({ declarations: [ @@ -60,6 +61,7 @@ import { environment } from '../environments/environment'; ProgressbarModule.forRoot(), // standalones + MessageBoardComponent, ThemeBgDirective, UserNavItemComponent ], diff --git a/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.html b/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.html index b31d05f2f..06a71862d 100644 --- a/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.html +++ b/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.html @@ -12,7 +12,7 @@ }
-
+
@if (expiresAt()) {
@@ -22,7 +22,7 @@ @if(consoleIsViewOnly()) { -
+
View Only
} diff --git a/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.scss b/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.scss index 69b035d46..8e78084f1 100644 --- a/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.scss +++ b/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.scss @@ -33,11 +33,15 @@ cf-console { background-color: rgba(0, 0, 0, 0.4); padding: 8px; font-size: 2rem; + text-align: center; } .is-view-only { + border: 2px solid red; + } + + .view-only-warning { background-color: red; - border-radius: 6px; color: #fff; flex: 0 1 auto; font-weight: bold; diff --git a/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.ts b/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.ts index 2628450ea..f86acdf78 100644 --- a/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.ts +++ b/projects/gameboard-ui/src/app/consoles/components/console-page/console-page.component.ts @@ -1,8 +1,7 @@ -import { AfterViewInit, Component, effect, HostListener, inject, model, signal, Signal, viewChild } from '@angular/core'; +import { AfterViewInit, Component, HostListener, inject, model, signal, Signal, viewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { toSignal } from "@angular/core/rxjs-interop"; import { ConsoleComponent, ConsoleComponentConfig, ConsoleConnectionStatus } from "@cmusei/console-forge"; -import { DateTime } from 'luxon'; import { interval, map } from 'rxjs'; import { UserActivityListenerComponent } from '../user-activity-listener/user-activity-listener.component'; import { ConsolesService } from '@/api/consoles.service'; @@ -48,6 +47,12 @@ export class ConsolePageComponent implements AfterViewInit { protected readonly consoleIsViewOnly = model(false); protected readonly enableActivityListener = toSignal(this.route.queryParamMap.pipe(map(qps => qps?.get("l") === "true"))); + // NOTE: this query param doesn't solely dictate whether the user can interact with the console - they still have to have logical permission to do that + // (expressed in the "isViewOnly" property of the response from the API below). This param just forces view-only even if the user _could_ + // interact with this console otherwise (say, if they opened it from the admin observe mode, but it's their own console they're observing.) This forces + // the user to intentionally interact with a player-facing console in order to start messing with it. + protected readonly forceViewOnly = toSignal(this.route.queryParamMap.pipe(map(qps => qps?.get("viewOnly") === "true"))); + // we have to wrap the value in an RXJS timer thing to get it to count down correctly (we should maybe reevaluate the countdown pipe) private _expiresAtTimestamp?: number; protected expiresAt = toSignal(interval(1000).pipe(map(() => { @@ -104,7 +109,7 @@ export class ConsolePageComponent implements AfterViewInit { const consoleState = consoleData.consoleState; this.title.set(`${consoleState.id.name} :: Console${consoleData.isViewOnly ? ' [view only]' : ''}`); - this.consoleIsViewOnly.update(() => consoleData.isViewOnly); + this.consoleIsViewOnly.update(() => !!this.forceViewOnly() || consoleData.isViewOnly); this._expiresAtTimestamp = consoleData.expiresAt?.toMillis(); this.consoleConfig.update(() => ({ diff --git a/projects/gameboard-ui/src/app/consoles/pipes/console-id-to-url.pipe.ts b/projects/gameboard-ui/src/app/consoles/pipes/console-id-to-url.pipe.ts index d9ac553af..345b3db51 100644 --- a/projects/gameboard-ui/src/app/consoles/pipes/console-id-to-url.pipe.ts +++ b/projects/gameboard-ui/src/app/consoles/pipes/console-id-to-url.pipe.ts @@ -1,6 +1,5 @@ import { ConsoleId } from '@/api/consoles.models'; import { inject, Pipe, PipeTransform } from '@angular/core'; -import { UrlTree } from '@angular/router'; import { RouterService } from '@/services/router.service'; @Pipe({ name: 'consoleIdToUrl' }) diff --git a/projects/gameboard-ui/src/app/core/core.module.ts b/projects/gameboard-ui/src/app/core/core.module.ts index 0bf1110ab..5ac7de005 100644 --- a/projects/gameboard-ui/src/app/core/core.module.ts +++ b/projects/gameboard-ui/src/app/core/core.module.ts @@ -181,9 +181,7 @@ const PUBLIC_DECLARATIONS = [ FriendlyTimePipe, MinPipe, ModalContentComponent, - PluralizerPipe, RenderLinksInTextComponent, - RelativeImagePipe, RelativeToAbsoluteHrefPipe, RelativeUrlsPipe, SelectPagerComponent, @@ -248,6 +246,8 @@ const RELAYED_MODULES = [ // standalones CountdownPipe, IfHasPermissionDirective, + PluralizerPipe, + RelativeImagePipe, SpinnerComponent, StringArrayJoinPipe, ToSupportCodePipe diff --git a/projects/gameboard-ui/src/app/core/directives/autofocus.directive.ts b/projects/gameboard-ui/src/app/core/directives/autofocus.directive.ts index 7386a2fd1..a5bec13dc 100644 --- a/projects/gameboard-ui/src/app/core/directives/autofocus.directive.ts +++ b/projects/gameboard-ui/src/app/core/directives/autofocus.directive.ts @@ -1,8 +1,8 @@ import { AfterViewInit, Directive, ElementRef } from '@angular/core'; @Directive({ - selector: '[appAutofocus]', - standalone: false + selector: '[appAutofocus]', + standalone: false }) export class AutofocusDirective implements AfterViewInit { constructor(private ref: ElementRef) { } diff --git a/projects/gameboard-ui/src/app/core/pipes/markdown-placeholder.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/markdown-placeholder.pipe.ts index 01c026bd9..25495bd7f 100644 --- a/projects/gameboard-ui/src/app/core/pipes/markdown-placeholder.pipe.ts +++ b/projects/gameboard-ui/src/app/core/pipes/markdown-placeholder.pipe.ts @@ -5,7 +5,7 @@ import { Pipe, PipeTransform } from '@angular/core'; standalone: true }) export class MarkdownPlaceholderPipe implements PipeTransform { - transform(header: string): string { + transform(header?: string): string { const paragraphs: string[] = []; if (header) { diff --git a/projects/gameboard-ui/src/app/core/pipes/pluralizer.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/pluralizer.pipe.ts index 80c2bca93..39fae160e 100644 --- a/projects/gameboard-ui/src/app/core/pipes/pluralizer.pipe.ts +++ b/projects/gameboard-ui/src/app/core/pipes/pluralizer.pipe.ts @@ -1,9 +1,6 @@ import { Pipe, PipeTransform } from '@angular/core'; -@Pipe({ - name: 'pluralizer', - standalone: false -}) +@Pipe({ name: 'pluralizer' }) export class PluralizerPipe implements PipeTransform { transform(label: string, count: number = 0, addE: boolean = false): string { if (!label) diff --git a/projects/gameboard-ui/src/app/core/pipes/relative-image.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/relative-image.pipe.ts index fa4e03971..14a71ef11 100644 --- a/projects/gameboard-ui/src/app/core/pipes/relative-image.pipe.ts +++ b/projects/gameboard-ui/src/app/core/pipes/relative-image.pipe.ts @@ -1,16 +1,14 @@ import { ConfigService } from '@/utility/config.service'; import { Pipe, PipeTransform } from '@angular/core'; -@Pipe({ - name: 'relativeImage', - standalone: false -}) +@Pipe({ name: 'relativeImage' }) export class RelativeImagePipe implements PipeTransform { constructor(private config: ConfigService) { } transform(value?: string): string | null { - if (!value) + if (!value) { return value || null; + } return `${this.config.imagehost}/${value}`; } diff --git a/projects/gameboard-ui/src/app/feedback/components/feedback-template-picker/feedback-template-picker.component.ts b/projects/gameboard-ui/src/app/feedback/components/feedback-template-picker/feedback-template-picker.component.ts index 5ba07334c..06eb56989 100644 --- a/projects/gameboard-ui/src/app/feedback/components/feedback-template-picker/feedback-template-picker.component.ts +++ b/projects/gameboard-ui/src/app/feedback/components/feedback-template-picker/feedback-template-picker.component.ts @@ -10,6 +10,7 @@ import { ModalConfirmService } from '@/services/modal-confirm.service'; import { ToastService } from '@/utility/services/toast.service'; import { FeedbackSubmissionFormComponent } from "../feedback-submission-form/feedback-submission-form.component"; import { UnsubscriberService } from '@/services/unsubscriber.service'; +import { PluralizerPipe } from '@/core/pipes/pluralizer.pipe'; interface UpsertFeedbackTemplateForm { id: string | null | undefined; @@ -19,16 +20,17 @@ interface UpsertFeedbackTemplateForm { } @Component({ - selector: 'app-feedback-template-picker', - imports: [ - CommonModule, - ReactiveFormsModule, - FontAwesomeModule, - CoreModule, - FeedbackSubmissionFormComponent - ], - templateUrl: './feedback-template-picker.component.html', - styleUrls: ['./feedback-template-picker.component.scss'] + selector: 'app-feedback-template-picker', + imports: [ + CommonModule, + ReactiveFormsModule, + FontAwesomeModule, + CoreModule, + FeedbackSubmissionFormComponent, + PluralizerPipe + ], + templateUrl: './feedback-template-picker.component.html', + styleUrls: ['./feedback-template-picker.component.scss'] }) export class FeedbackTemplatePickerComponent implements OnInit { @Input() labelText?: string; diff --git a/projects/gameboard-ui/src/app/game/components/game-session-availability-warning/game-session-availability-warning.component.ts b/projects/gameboard-ui/src/app/game/components/game-session-availability-warning/game-session-availability-warning.component.ts index eaa64c099..529dec716 100644 --- a/projects/gameboard-ui/src/app/game/components/game-session-availability-warning/game-session-availability-warning.component.ts +++ b/projects/gameboard-ui/src/app/game/components/game-session-availability-warning/game-session-availability-warning.component.ts @@ -5,16 +5,18 @@ import { UnsubscriberService } from '@/services/unsubscriber.service'; import { interval, startWith } from 'rxjs'; import { GameSessionAvailibilityResponse } from '@/api/game-models'; import { CoreModule } from '@/core/core.module'; +import { PluralizerPipe } from '@/core/pipes/pluralizer.pipe'; @Component({ - selector: 'app-game-session-availability-warning', - imports: [ - CommonModule, - CoreModule, - ], - providers: [UnsubscriberService], - templateUrl: './game-session-availability-warning.component.html', - styleUrls: ['./game-session-availability-warning.component.scss'] + selector: 'app-game-session-availability-warning', + imports: [ + CommonModule, + CoreModule, + PluralizerPipe, + ], + providers: [UnsubscriberService], + templateUrl: './game-session-availability-warning.component.html', + styleUrls: ['./game-session-availability-warning.component.scss'] }) export class GameSessionAvailabilityWarningComponent implements OnInit, OnDestroy { @Input() game?: { id: string; sessionAvailabilityWarningThreshold?: number }; diff --git a/projects/gameboard-ui/src/app/game/game.module.ts b/projects/gameboard-ui/src/app/game/game.module.ts index fe9fda478..817d11ea4 100644 --- a/projects/gameboard-ui/src/app/game/game.module.ts +++ b/projects/gameboard-ui/src/app/game/game.module.ts @@ -43,6 +43,7 @@ import { GameSessionAvailabilityWarningComponent } from "./components/game-sessi import { CountdownPipe } from '@/core/pipes/countdown.pipe'; import { VmLinkComponent } from '@/standalone/games/components/vm-link/vm-link.component'; import { ConsoleIdToUrlPipe } from '@/consoles/pipes/console-id-to-url.pipe'; +import { PluralizerPipe } from '@/core/pipes/pluralizer.pipe'; const MODULE_DECLARATIONS = [ ContinueToGameboardButtonComponent, @@ -90,6 +91,7 @@ const MODULE_DECLARATIONS = [ CountdownPipe, ErrorDivComponent, FeedbackSubmissionFormComponent, + PluralizerPipe, SafeUrlPipe, SpinnerComponent, FeedbackSubmissionFormComponent, diff --git a/projects/gameboard-ui/src/app/layouts/app-layout/app-layout.component.html b/projects/gameboard-ui/src/app/layouts/app-layout/app-layout.component.html index a216741a7..8e236a568 100644 --- a/projects/gameboard-ui/src/app/layouts/app-layout/app-layout.component.html +++ b/projects/gameboard-ui/src/app/layouts/app-layout/app-layout.component.html @@ -9,8 +9,6 @@
- -
diff --git a/projects/gameboard-ui/src/app/layouts/app-layout/app-layout.component.ts b/projects/gameboard-ui/src/app/layouts/app-layout/app-layout.component.ts index 1415de37d..fd002b8f7 100644 --- a/projects/gameboard-ui/src/app/layouts/app-layout/app-layout.component.ts +++ b/projects/gameboard-ui/src/app/layouts/app-layout/app-layout.component.ts @@ -10,33 +10,23 @@ import { MessageBoardComponent } from '@/utility/components/message-board/messag import { LayoutService } from '@/utility/layout.service'; @Component({ - selector: 'app-app-layout', - imports: [ - // angular dependencies - CommonModule, - RouterModule, - // gb dependencies - AppNavComponent, - GameboardSignalRHubsComponent, - MessageBoardComponent, - SponsorSelectBannerComponent, - SystemNotificationsModule, - ], - templateUrl: './app-layout.component.html', - styleUrl: './app-layout.component.scss' + selector: 'app-app-layout', + imports: [ + // angular dependencies + CommonModule, + RouterModule, + // gb dependencies + AppNavComponent, + GameboardSignalRHubsComponent, + SponsorSelectBannerComponent, + ], + templateUrl: './app-layout.component.html', + styleUrl: './app-layout.component.scss' }) export class AppLayoutComponent { // services private readonly layoutService = inject(LayoutService); // state - protected stickyMenu$: Observable; - - constructor() { - this.stickyMenu$ = this.layoutService.stickyMenu$; - } - - ngOnInit() { - - } + protected stickyMenu$: Observable = this.layoutService.stickyMenu$; } diff --git a/projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.html b/projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.html new file mode 100644 index 000000000..b48c3436a --- /dev/null +++ b/projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.html @@ -0,0 +1,20 @@ +
+ @if (challengeGroup().isFeatured) + { +
+ Featured +
+ } + + + +
+

{{ challengeGroup().name }}

+

+
+ +
+ +
+
diff --git a/projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.scss b/projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.scss new file mode 100644 index 000000000..881158d28 --- /dev/null +++ b/projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.scss @@ -0,0 +1,28 @@ +.card { + height: 100%; +} + +img { + aspect-ratio: 16/9; + object-fit: cover; + height: 240px; +} + +.card-header { + font-weight: bold; + text-transform: uppercase; +} + +.card-text, +.card-text * { + display: -webkit-box; + line-clamp: 2; + overflow: hidden; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + text-overflow: ellipsis; +} + +.card-body { + flex: 1 0 auto !important; +} diff --git a/projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.ts b/projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.ts new file mode 100644 index 000000000..51f6f27b7 --- /dev/null +++ b/projects/gameboard-ui/src/app/prac/components/challenge-group-card/challenge-group-card.component.ts @@ -0,0 +1,19 @@ +import { AsyncPipe } from '@angular/common'; +import { Component, input } from '@angular/core'; +import { MarkdownPipe } from 'ngx-markdown'; +import { PracticeChallengeGroupDto } from '@/prac/practice.models'; +import { ChallengeGroupCardImagePipe } from '@/prac/pipes/challenge-group-card-image.pipe'; + +@Component({ + selector: 'app-challenge-group-card', + imports: [ + AsyncPipe, + ChallengeGroupCardImagePipe, + MarkdownPipe, + ], + templateUrl: './challenge-group-card.component.html', + styleUrl: './challenge-group-card.component.scss' +}) +export class ChallengeGroupCardComponent { + challengeGroup = input.required(); +} diff --git a/projects/gameboard-ui/src/app/prac/components/practice-challenge-state-summary/practice-challenge-state-summary.component.html b/projects/gameboard-ui/src/app/prac/components/practice-challenge-state-summary/practice-challenge-state-summary.component.html index 6fa0c2144..525aa6083 100644 --- a/projects/gameboard-ui/src/app/prac/components/practice-challenge-state-summary/practice-challenge-state-summary.component.html +++ b/projects/gameboard-ui/src/app/prac/components/practice-challenge-state-summary/practice-challenge-state-summary.component.html @@ -18,15 +18,11 @@ - - + Score + Time Remaining - - Score - Time Remaining - {{activeChallenge.scoreAndAttemptsState.score}} diff --git a/projects/gameboard-ui/src/app/prac/pipes/challenge-group-card-image.pipe.ts b/projects/gameboard-ui/src/app/prac/pipes/challenge-group-card-image.pipe.ts new file mode 100644 index 000000000..f60374ea6 --- /dev/null +++ b/projects/gameboard-ui/src/app/prac/pipes/challenge-group-card-image.pipe.ts @@ -0,0 +1,16 @@ +import { inject, Pipe, PipeTransform } from '@angular/core'; +import { ConfigService } from '@/utility/config.service'; + +@Pipe({ name: 'challengeGroupCardImage' }) +export class ChallengeGroupCardImagePipe implements PipeTransform { + private readonly configService = inject(ConfigService); + private readonly defaultCardImage = "/assets/img/practice-challenge-group/default-card.svg"; + + transform(value?: string): string { + if (!value) { + return this.defaultCardImage; + } + + return `${this.configService.imagehost}/${value}`; + } +} diff --git a/projects/gameboard-ui/src/app/prac/prac.module.ts b/projects/gameboard-ui/src/app/prac/prac.module.ts index 8808a875d..7e5a0eba8 100644 --- a/projects/gameboard-ui/src/app/prac/prac.module.ts +++ b/projects/gameboard-ui/src/app/prac/prac.module.ts @@ -57,6 +57,7 @@ import { UserPracticeSummaryComponent } from './components/user-practice-summary ErrorDivComponent, InfoBubbleComponent, PlayComponent, + PluralizerPipe, SpinnerComponent, ToPracticeCertificateLinkPipe, UserPracticeSummaryComponent diff --git a/projects/gameboard-ui/src/app/prac/practice.models.ts b/projects/gameboard-ui/src/app/prac/practice.models.ts index 2348a6a2e..0f760dae5 100644 --- a/projects/gameboard-ui/src/app/prac/practice.models.ts +++ b/projects/gameboard-ui/src/app/prac/practice.models.ts @@ -1,6 +1,84 @@ -import { GameCardContext } from "@/api/game-models"; -import { PagedArray, Search, TimestampRange } from "@/api/models"; import { DateTime } from "luxon"; +import { GameCardContext } from "@/api/game-models"; +import { PagedArray, Search, SimpleEntity, TimestampRange } from "@/api/models"; + +export interface ChallengesAddToGroupRequest { + addBySpecIds?: string[]; + addByGameId?: string; + addByTag?: string; +} + +export interface ChallengesAddToGroupResponse { + addedChallengeSpecIds: string[]; +} + +export interface CreatePracticeChallengeGroupRequest { + name: string; + description: string; + image?: File; + isFeatured: boolean; + parentGroupId?: string; +} + +export interface GetPracticeChallengeGroupResponse { + group: GetPracticeChallengeGroupResponseGroup; + parentGroup?: SimpleEntity; + childGroups: GetPracticeChallengeGroupResponseGroup[]; +} + +export interface GetPracticeChallengeGroupResponseChallenge { + id: string; + name: string; + countCompleted: number; + countLaunched: number; + lastLaunched?: DateTime; +} + +export interface GetPracticeChallengeGroupResponseGroup { + id: string; + name: string; + description: string; + imageUrl: string; + isFeatured: boolean; + challenges: GetPracticeChallengeGroupResponseChallenge[]; +} + +export interface PracticeChallengeGroupDto { + id: string; + name: string; + description: string; + imageUrl?: string; + isFeatured: boolean; + parentGroupId?: string; +} + +export interface ListChallengesRequest { + searchTerm?: string; +} + +export interface ListChallengeGroupsResponse { + groups: ListChallengeGroupsResponseGroup[]; +} + +export interface ListChallengeGroupsResponseGroup { + id: string; + name: string; + description: string; + challengeCount: number; + imageUrl?: string; + isFeatured: boolean; + parentGroupId?: string; + childGroups: ListChallengeGroupsResponseGroup[] +} + +export interface UpdateChallengeGroupRequest { + id: string; + name: string; + description: string; + image?: File; + isFeatured: boolean; + parentGroupId?: string; +} export interface SearchPracticeChallengesRequest { filter: Search; diff --git a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/sponsor-challenge-performance/sponsor-challenge-performance.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/sponsor-challenge-performance/sponsor-challenge-performance.component.ts index 7f958bb3f..564ee5510 100644 --- a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/sponsor-challenge-performance/sponsor-challenge-performance.component.ts +++ b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/sponsor-challenge-performance/sponsor-challenge-performance.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; +import { BsModalRef } from 'ngx-bootstrap/modal'; import { PracticeModeReportSponsorPerformance } from '../practice-mode-report.models'; import { SimpleEntity } from '@/api/models'; -import { BsModalRef } from 'ngx-bootstrap/modal'; export interface SponsorChallengePerformanceModalContext extends Partial { challenge: SimpleEntity; @@ -9,9 +9,9 @@ export interface SponsorChallengePerformanceModalContext extends Partial { - return this.http.get(this.apiUrl.build('/practice/games')); + public async challengeGroupCreate(request: CreatePracticeChallengeGroupRequest): Promise { + const asFormData = toFormData(request, "request"); + return await firstValueFrom(this.http.post(this.apiUrl.build("practice/challenge-group"), asFormData)); } - public searchChallenges(request: SearchPracticeChallengesRequest): Observable { - return this.http.get(this.apiUrl.build('/practice', { ...request.filter, userProgress: request.userProgress })); + public challengeGroupDelete(id: string): Promise { + return firstValueFrom(this.http.delete(this.apiUrl.build(`practice/challenge-group/${id}`))); + } + + public async challengeGroupGet(id: string): Promise { + return await firstValueFrom(this.http.get(this.apiUrl.build(`practice/challenge-group/${id}`))); + } + + public async challengeGroupList(): Promise { + const response = await firstValueFrom(this.http.get(this.apiUrl.build("practice/challenge-group/list"))); + return response.groups; + } + + public async challengeGroupUpdate(request: UpdateChallengeGroupRequest): Promise { + const asFormData = toFormData(request, "request"); + return await firstValueFrom(this.http.put(this.apiUrl.build("practice/challenge-group"), asFormData)); + } + + public async challengesAddToGroup(challengeGroupId: string, request: ChallengesAddToGroupRequest): Promise { + return await firstValueFrom(this.http.post(this.apiUrl.build(`practice/challenge-group/${challengeGroupId}/challenges`), request)); + } + + public async challengesRemoveFromGroup(request: { challengeGroupId: string, challengeSpecIds: string[] }): Promise { + return await firstValueFrom(this.http.delete(this.apiUrl.build(`practice/challenge-group/${request.challengeGroupId}/challenges`), { body: { challengeSpecIds: request.challengeSpecIds } })); + } + + public challengesList(request?: ListChallengesRequest): Promise { + return firstValueFrom(this.http.get(this.apiUrl.build("practice/challenge/list", request))); + } + + public searchChallenges(request?: SearchPracticeChallengesRequest): Observable { + return this.http.get(this.apiUrl.build('/practice', { ...request?.filter, userProgress: request?.userProgress })); } private async updateIsEnabled() { diff --git a/projects/gameboard-ui/src/app/services/router.service.ts b/projects/gameboard-ui/src/app/services/router.service.ts index 8884f687f..82a4e7be0 100644 --- a/projects/gameboard-ui/src/app/services/router.service.ts +++ b/projects/gameboard-ui/src/app/services/router.service.ts @@ -1,13 +1,12 @@ -import { Injectable, OnDestroy } from '@angular/core'; +import { Injectable, } from '@angular/core'; import { NavigationEnd, ActivatedRoute, Params, Router, UrlTree } from '@angular/router'; -import { Subscription, filter } from 'rxjs'; +import { filter } from 'rxjs'; import { ReportKey } from '@/reports/reports-models'; import { PlayerMode } from '@/api/player-models'; import { ConfigService } from '@/utility/config.service'; import { UserService as LocalUser } from '@/utility/user.service'; import { slug } from "@/../tools/functions"; import { GameCenterTab } from '@/admin/components/game-center/game-center.models'; -import { SimpleEntity } from '@/api/models'; import { ObjectService } from './object.service'; export interface QueryParamsUpdate { @@ -16,9 +15,7 @@ export interface QueryParamsUpdate { } @Injectable({ providedIn: 'root' }) -export class RouterService implements OnDestroy { - private _navEndSub?: Subscription; - +export class RouterService { constructor( private config: ConfigService, private localUser: LocalUser, @@ -143,7 +140,7 @@ export class RouterService implements OnDestroy { return this.router.navigateByUrl(this.router.parseUrl(`/support/tickets/${highlightTicketKey}`)); } - public buildVmConsoleUrl(challengeId: string, vmName: string, isPractice = false) { + public buildVmConsoleUrl(challengeId: string, vmName: string, enableActivityListener = false, forceViewOnly = false) { if (!vmName || !challengeId) { throw new Error(`Can't launch a VM console without a challengeId.`); } @@ -153,7 +150,8 @@ export class RouterService implements OnDestroy { fullscreen: true, challengeId, console: vmName, - l: isPractice ? true : undefined + l: enableActivityListener ? true : undefined, + viewOnly: forceViewOnly ? true : undefined } }); } @@ -230,8 +228,4 @@ export class RouterService implements OnDestroy { private buildAppUrlWithQueryParams(queryParams: any, ...urlBits: string[]) { return this.router.createUrlTree([this.config.basehref || "", ...urlBits], { queryParams: { ...queryParams } }); } - - ngOnDestroy(): void { - this._navEndSub?.unsubscribe(); - } } diff --git a/projects/gameboard-ui/src/app/standalone/core/components/spinner/spinner.component.ts b/projects/gameboard-ui/src/app/standalone/core/components/spinner/spinner.component.ts index a94728717..1f74bca61 100644 --- a/projects/gameboard-ui/src/app/standalone/core/components/spinner/spinner.component.ts +++ b/projects/gameboard-ui/src/app/standalone/core/components/spinner/spinner.component.ts @@ -5,9 +5,9 @@ import { CommonModule } from '@angular/common'; import { Component, input } from '@angular/core'; @Component({ - selector: 'app-spinner', - imports: [CommonModule], - template: ` + selector: 'app-spinner', + imports: [CommonModule], + template: `