WIP

momentum-mod · Mar 11, 2024 · 1b90d9d · 1b90d9d
1 parent b7ba0a9
commit 1b90d9d
Show file tree

Hide file tree

Showing 33 changed files with 700 additions and 469 deletions.
diff --git a/...app/components/map-forms/map-test-invite-selection/map-test-invite-selection.component.ts b/...app/components/map-forms/map-test-invite-selection/map-test-invite-selection.component.ts
@@ -1,12 +1,9 @@
 import { Component, forwardRef, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import {
-  MAX_TEST_INVITES,
-  User
-} from '../../../../../../../libs/constants/src';
+import { MAX_TEST_INVITES, User } from '@momentum/constants';
 import { NgClass } from '@angular/common';
 import { UserSearchComponent } from '../../search/user-search/user-search.component';
-import { TooltipDirective } from '../../../directives';
+import { SpinnerDirective, TooltipDirective } from '../../../directives';
 import { AvatarComponent } from '../../avatar/avatar.component';
 import { UserComponent } from '../../user/user.component';
 
@@ -26,7 +23,8 @@ import { UserComponent } from '../../user/user.component';
     UserSearchComponent,
     TooltipDirective,
     AvatarComponent,
-    UserComponent
+    UserComponent,
+    SpinnerDirective
   ]
 })
 export class MapTestInviteSelectionComponent implements ControlValueAccessor {

diff --git a/apps/frontend/src/app/directives/font-size-lerp.directive.ts b/apps/frontend/src/app/directives/font-size-lerp.directive.ts
@@ -0,0 +1,35 @@
+import { Directive, HostBinding, Input, OnChanges } from '@angular/core';
+
+/**
+ * Doing this automatically is so annoying, and requires fucking with the DOM
+ * more than I like.
+ *
+ * There's some Angular directives out there that supposedly do it, but
+ * I couldn't get them working, and I don't like doing this kind of dynamic
+ * sizing anyway.
+ *
+ * https://github.com/sollenne/angular-fittext
+ * https://github.com/thisloke/ng2-fittext
+ */
+@Directive({ selector: '[fontSizeLerp]', standalone: true })
+export class FontSizeLerpDirective implements OnChanges {
+  @Input('fontSizeLerp') options: {
+    chars: number;
+    maxChars: number;
+    startAt: number;
+    baseRem: number;
+    minRem: number;
+  };
+
+  @HostBinding('style.font-size') fontSize: string;
+
+  ngOnChanges() {
+    const { chars, maxChars, startAt, baseRem, minRem } = this.options;
+    let val = baseRem;
+    if (chars > startAt) {
+      const k = (chars - startAt) / (maxChars - startAt);
+      val -= (baseRem - minRem) * k;
+    }
+    this.fontSize = `${val}rem`;
+  }
+}
diff --git a/apps/frontend/src/app/directives/spinner.directive.ts b/apps/frontend/src/app/directives/spinner.directive.ts
@@ -10,8 +10,14 @@ import {
 } from '@angular/core';
 import { SpinnerComponent } from '../components';
 
-// Based off of Nebular directive
-// https://github.com/akveo/nebular/blob/master/src/framework/theme/components/spinner/spinner.directive.ts
+/*
+ * Shows an m-spinner component when the directive input value is `true`.
+ * Note: this will override the `position` property of the element it's applied
+ * to to `relative`.
+ *
+ * Based off of Nebular directive
+ * https://github.com/akveo/nebular/blob/master/src/framework/theme/components/spinner/spinner.directive.ts
+ */
 @Directive({ selector: '[mSpinner]', standalone: true })
 export class SpinnerDirective implements OnInit {
   spinner: ComponentRef<SpinnerComponent>;
@@ -33,6 +39,8 @@ export class SpinnerDirective implements OnInit {
   ngOnInit() {
     this.spinner = this.vcRef.createComponent(SpinnerComponent);
     this.spinner.changeDetectorRef.detectChanges();
+    (this.directiveElement.nativeElement as HTMLElement).style.position =
+      'relative';
     this.renderer.appendChild(
       this.directiveElement.nativeElement,
       this.spinner.location.nativeElement

diff --git a/apps/frontend/src/app/icons/packs/material-design-icons.icons.ts b/apps/frontend/src/app/icons/packs/material-design-icons.icons.ts
@@ -51,9 +51,9 @@ export {
   mdiChartBoxOutline,
   mdiHome,
   mdiNewspaperVariant,
-  mdiCloudUploadOutline,
   mdiRunFast,
   mdiBookOpenVariant,
+  mdiTestTube,
   mdiShieldCrownOutline,
   mdiAsterisk,
   mdiFileUpload,

diff --git a/apps/frontend/src/app/pages/maps/map-edit/map-edit.component.html b/apps/frontend/src/app/pages/maps/map-edit/map-edit.component.html
@@ -1,5 +1,5 @@
 <m-card-header titleSize="5" title="Edit Map">
-  <button class="m-btn -mb-4" [routerLink]="'/maps/' + map?.name">Return to Map</button>
+  <button class="btn -mb-4" [routerLink]="'/maps/' + map?.name">Return to Map</button>
 </m-card-header>
 
 <!-- Using `display: none` instead of ngIf to hide stuff as this component
@@ -9,10 +9,10 @@
   [formGroup]="versionForm"
   (ngSubmit)="submitVersionForm()"
   [mSpinner]="loading"
-  class="m-card m-card--fancy my-8 flex-col"
+  class="card card--fancy my-8 flex-col"
   [ngClass]="isSubmitter ? '!flex' : '!hidden'"
 >
-  <div class="m-card-title -mt-10 mb-2 text-5xl">Submit New Version</div>
+  <div class="card-title -mt-10 mb-2 text-5xl">Submit New Version</div>
   <div class="flex gap-4">
     <div class="flex w-1/3 grow flex-col gap-2">
       <div class="prose">
@@ -28,9 +28,9 @@
       </div>
       <div class="mt-auto flex items-center justify-end gap-2 self-end">
         <span class="text-lg">Reset leaderboards</span>
-        <input type="checkbox" class="m-checkbox" [formControl]="resetLbs" />
+        <input type="checkbox" class="checkbox" [formControl]="resetLbs" />
       </div>
-      <button type="submit" class="m-btn m-btn-green self-end" [disabled]="loading || versionForm.pristine || versionForm.invalid">
+      <button type="submit" class="btn btn-green self-end" [disabled]="loading || versionForm.pristine || versionForm.invalid">
         Submit
       </button>
     </div>
@@ -39,7 +39,7 @@
         <p class="text-lg">Changelog</p>
         <span class="text-sm italic text-gray-200">Required</span>
       </div>
-      <textarea class="m-textinput m-textinput-validated mb-2 w-full" rows="8" [formControl]="changelog"></textarea>
+      <textarea class="textinput textinput-validated mb-2 w-full" rows="8" [formControl]="changelog"></textarea>
       <div class="flex gap-4">
         <m-file-upload class="grow" [formControl]="bsp" typeName="BSP" acceptExtensions=".bsp" icon="land-plots" />
         <m-file-upload class="grow" [formControl]="zon" typeName=".zon.json" icon="vector-polygon" acceptExtensions=".zon.json" />
@@ -49,7 +49,9 @@
   </div>
   @if (FormUtils.groupIsActuallyInvalid(versionForm)) {
     <div class="mt-4">
-      <p class="my-auto block rounded bg-black bg-opacity-25 px-4 py-2 font-mono text-sm">Error: {{ getErrors(versionForm) | json }}</p>
+      <p class="my-auto block rounded bg-black bg-opacity-25 px-4 py-2 font-mono text-sm">
+        Error: {{ FormUtils.getAllErrors(versionForm) | json }}
+      </p>
     </div>
   }
   @if (isUploading) {
@@ -60,15 +62,15 @@
 
 <fieldset
   [mSpinner]="loading"
-  class="m-card m-card--fancy my-8 flex-col gap-4"
+  class="card card--fancy my-8 flex-col gap-4"
   [ngClass]="isSubmitter && map.status === MapStatusNew.PRIVATE_TESTING ? '!flex' : '!hidden'"
 >
-  <legend class="m-card-title text-5xl">Invite Testers</legend>
+  <legend class="card-title text-5xl">Invite Testers</legend>
   <m-map-test-invite-selection [formControl]="testInviteForm" />
   <button
     type="button"
     (click)="submitTestInviteForm()"
-    class="m-btn m-btn-green self-end"
+    class="btn btn-green self-end"
     [disabled]="loading || testInviteForm.pristine || testInviteForm.invalid"
   >
     Update Invites
@@ -79,17 +81,17 @@
   [formGroup]="mainForm"
   (ngSubmit)="submitMainForm()"
   [mSpinner]="loading"
-  class="m-card m-card--fancy my-8 flex-col gap-8"
+  class="card card--fancy my-8 flex-col gap-8"
   [ngClass]="isAdmin || isMod || isSubmitter ? '!flex' : '!hidden'"
 >
-  <p class="m-card-title -mb-4 -mt-9 text-5xl">Update Map</p>
+  <p class="card-title -mb-4 -mt-9 text-5xl">Update Map</p>
 
-  <fieldset class="m-card-inset flex flex-col" [ngClass]="isAdmin || isMod || isSubmitter ? '!flex' : '!hidden'">
+  <fieldset class="card-inset flex flex-col" [ngClass]="isAdmin || isMod || isSubmitter ? '!flex' : '!hidden'">
     <legend class="font-display text-4xl font-bold">Details</legend>
     <m-map-details-form [formGroup]="details" [isModOrAdmin]="isAdmin || isMod" />
   </fieldset>
 
-  <fieldset class="m-card-inset flex flex-col" [ngClass]="isAdmin || isMod || isSubmitter ? '!flex' : '!hidden'">
+  <fieldset class="card-inset flex flex-col" [ngClass]="isAdmin || isMod || isSubmitter ? '!flex' : '!hidden'">
     <legend class="font-display text-4xl font-bold">Images</legend>
     <m-map-image-selection [formControlPassthrough]="images" icon="image-multiple-outline" [previewFullscreenBackground]="true" />
     @if (images.errors?.['required'] && images.dirty) {
@@ -114,16 +116,16 @@
     }
   </fieldset>
 
-  <fieldset class="m-card-inset flex flex-col" [ngClass]="isAdmin || isMod || isSubmitter ? '!flex' : '!hidden'">
+  <fieldset class="card-inset flex flex-col" [ngClass]="isAdmin || isMod || isSubmitter ? '!flex' : '!hidden'">
     <legend class="font-display text-4xl font-bold">Credits</legend>
     <m-map-credits-selection class="grid h-full min-h-[24rem] gap-4 md:grid-cols-1 lg:grid-cols-4" [formControl]="credits" />
   </fieldset>
 
-  <fieldset class="m-card-inset flex flex-col" [ngClass]="isSubmitter ? '!block' : '!hidden'">
+  <fieldset class="card-inset flex flex-col" [ngClass]="isSubmitter ? '!block' : '!hidden'">
     <legend class="font-display text-4xl font-bold">Leaderboards</legend>
     <m-map-leaderboards-selection [formControl]="suggestions" />
     @if (suggestions.dirty && suggestions.errors) {
-      <p class="mb-1 ml-auto text-right text-lg text-red-400"><b>Error: </b>{{ suggestions.errors['error'] }}</p>
+      <p class="my-2 ml-auto text-right text-lg text-red-400"><b>Error: </b>{{ suggestions.errors['error'] }}</p>
     } @else if (suggestions.pristine && suggestions.errors) {
       <p class="mb-1 ml-auto text-right text-lg text-red-400">
         <span class="font-medium"
@@ -133,18 +135,18 @@
     }
   </fieldset>
 
-  <fieldset class="m-card-inset flex flex-col gap-2">
+  <fieldset class="card-inset flex flex-col gap-2">
     <legend class="font-display text-4xl font-bold">Status Update</legend>
     <m-map-status-form [formGroup]="statusChange" [map]="map" [sub]="isSubmitter" [adm]="isAdmin" [mod]="isMod" [rev]="isReviewer" />
   </fieldset>
 
   <div class="-mt-4 flex gap-4">
     @if (mainForm.invalid) {
-      <p class="my-auto block rounded bg-black bg-opacity-25 px-4 py-2 font-mono text-sm">Error: {{ getErrors(mainForm) | json }}</p>
+      <p class="my-auto block rounded bg-black bg-opacity-25 px-4 py-2 font-mono text-sm">
+        Error: {{ FormUtils.getAllErrors(mainForm) | json }}
+      </p>
     }
-    <button class="m-btn m-btn-green ml-auto" type="submit" [disabled]="loading || mainForm.pristine || mainForm.invalid">
-      Update Map
-    </button>
+    <button class="btn btn-green ml-auto" type="submit" [disabled]="loading || mainForm.pristine || mainForm.invalid">Update Map</button>
   </div>
 </form>