add base editor component, stat input, item swap utilities

angular.json

@@ -34,6 +34,7 @@
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
+              "node_modules/ngx-float-ui/css/theme-dark.css",
               "node_modules/@ng-select/ng-select/themes/default.theme.css",
               "node_modules/@ngxpert/hot-toast/src/styles/styles.scss",
               "node_modules/@sweetalert2/theme-dark/dark.scss",

package.json

@@ -40,6 +40,7 @@
     "@sweetalert2/theme-dark": "5.0.17",
     "ag-grid-angular": "32.0.2",
     "lodash": "4.17.21",
+    "ngx-float-ui": "18.0.1",
     "ngx-webstorage": "18.0.0",
     "rxjs": "7.8.1",
     "tslib": "2.6.2",

src/app/helpers/constants.ts

@@ -1,4 +1,5 @@
 import { sortBy } from 'lodash';
+import { StatBlock } from '../../interfaces';
 
 export const coreStats = sortBy(
   [
@@ -257,7 +258,7 @@ export const itemTypes = [
   'Wand',
 ];
 
-export const typePropSets: Record<string, any[]> = {
+export const typePropSets: Record<string, string[]> = {
   Arrow: ['shots', 'tier', 'damageClass'],
   Bottle: ['ounces'],
   Box: ['containedItems'],
@@ -266,9 +267,13 @@ export const typePropSets: Record<string, any[]> = {
   Book: ['bookPages', 'bookItemFilter', 'bookFindablePages'],
   Trap: ['trapUses'],
   Scroll: ['bookPage'],
+  Twig: ['type'],
 };
 
-export const typePropDefaults: Record<string, any> = {
+export const typePropDefaults: Record<
+  string,
+  Record<string, number | string | boolean | Partial<StatBlock>>
+> = {
   Arrow: { shots: 1000, tier: 1, damageClass: 'physical' },
   Bottle: { ounces: 1 },
   Food: { ounces: 1 },
@@ -278,7 +283,10 @@ export const typePropDefaults: Record<string, any> = {
   Twig: { type: 'Staff' },
 };
 
-const typePropPrimarySecondary: Record<string, any> = {
+export const typePropPrimarySecondary: Record<
+  string,
+  { p: string; s?: string }
+> = {
   Axe: { p: 'Axe' },
   Blunderbuss: { p: 'Ranged', s: 'Twohanded' },
   Broadsword: { p: 'Sword' },
@@ -359,8 +367,9 @@ weaponClasses.forEach((weaponType) => {
   }
 
   if (['Shield', 'Saucer'].includes(weaponType)) {
-    typePropDefaults[weaponType].stats.accuracy = 0;
-    typePropDefaults[weaponType].stats.mitigation = 5;
+    typePropSets[weaponType].push('stats');
+    (typePropDefaults[weaponType].stats as Partial<StatBlock>).accuracy = 0;
+    (typePropDefaults[weaponType].stats as Partial<StatBlock>).mitigation = 5;
     typePropDefaults[weaponType].tier = 1;
   }
 
@@ -428,11 +437,13 @@ armorClasses.forEach((armorType) => {
   }
 
   if (['Tunic', 'Fur', 'Scaleplate'].includes(armorType)) {
-    typePropDefaults[armorType].stats.mitigation = 10;
+    typePropSets[armorType].push('stats');
+    (typePropDefaults[armorType].stats as Partial<StatBlock>).mitigation = 10;
   }
 
   if (['Fullplate', 'Breastplate'].includes(armorType)) {
-    typePropDefaults[armorType].stats.mitigation = 25;
+    typePropSets[armorType].push('stats');
+    (typePropDefaults[armorType].stats as Partial<StatBlock>).mitigation = 25;
     typePropDefaults[armorType].isHeavy = true;
   }
 

src/app/home/home.module.ts

@@ -5,6 +5,11 @@ import { HomeRoutingModule } from './home-routing.module';
 
 import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import { AgGridModule } from 'ag-grid-angular';
+import {
+  NgxFloatUiModule,
+  NgxFloatUiPlacements,
+  NgxFloatUiTriggers,
+} from 'ngx-float-ui';
 import { SharedModule } from '../shared/shared.module';
 import { DialogsComponent } from '../tabs/dialogs/dialogs.component';
 import { DroptablesComponent } from '../tabs/droptables/droptables.component';
@@ -36,6 +41,11 @@ import { HomeComponent } from './home.component';
     HomeRoutingModule,
     SweetAlert2Module,
     AgGridModule,
+    NgxFloatUiModule.forRoot({
+      trigger: NgxFloatUiTriggers.hover,
+      showDelay: 500,
+      placement: NgxFloatUiPlacements.TOPEND,
+    }),
   ],
 })
 export class HomeModule {}

src/app/shared/components/editor-base/editor-base.component.ts

@@ -0,0 +1,35 @@
+import { Component, model, output, signal } from '@angular/core';
+
+type Tab = { name: string };
+
+@Component({
+  selector: 'app-editor-base',
+  templateUrl: './editor-base.component.html',
+  styleUrl: './editor-base.component.scss',
+})
+export class EditorBaseComponent<T> {
+  public readonly tabs: Tab[] = [];
+
+  public activeTab = signal<number>(0);
+
+  public editing = model.required<T>();
+
+  public goBack = output<void>();
+  public save = output<T>();
+
+  public changeTab(tab: number) {
+    this.activeTab.set(tab);
+  }
+
+  public update(key: keyof T, value: any) {
+    this.editing.update((editing) => ({ ...editing, [key]: value }));
+  }
+
+  doBack() {
+    this.goBack.emit();
+  }
+
+  doSave() {
+    this.save.emit(this.editing());
+  }
+}

src/app/shared/components/input-itemclass/input-itemclass.component.html

@@ -1,6 +1,7 @@
 <div class="relative">
-  <ng-select class="form-control" [items]="values" bindLabel="value" bindValue="value" groupBy="category"
-    [(ngModel)]="itemClass" placeholder="Select item type..."></ng-select>
+  <ng-select class="form-control" [clearable]="false" [items]="values" bindLabel="value" bindValue="value"
+    groupBy="category" [(ngModel)]="itemClass" placeholder="Select item type..."
+    (change)="change.emit($event.value)"></ng-select>
 
   <app-input-floating-label>{{ label() }}</app-input-floating-label>
 </div>

src/app/shared/components/input-itemclass/input-itemclass.component.ts

@@ -1,4 +1,4 @@
-import { Component, input, model } from '@angular/core';
+import { Component, input, model, output } from '@angular/core';
 import {
   ArmorClass,
   ItemClassType,
@@ -14,6 +14,7 @@ import {
 export class InputItemclassComponent {
   public itemClass = model.required<ItemClassType>();
   public label = input<string>('Type');
+  public change = output<ItemClassType>();
 
   public values = [
     ...Object.values(WeaponClass).map((c) => ({

src/app/shared/components/input-stat/input-stat.component.html

@@ -0,0 +1,6 @@
+<div class="relative">
+  <ng-select class="form-control" [items]="values" [(ngModel)]="stat" placeholder="Select stat"
+    (change)="change.emit($event)"></ng-select>
+
+  <app-input-floating-label>Stat</app-input-floating-label>
+</div>

src/app/shared/components/input-stat/input-stat.component.ts

@@ -0,0 +1,18 @@
+import { Component, model, output } from '@angular/core';
+import { ItemClassType, StatType } from '../../../../interfaces';
+import { coreStats, extraStats } from '../../../helpers';
+
+@Component({
+  selector: 'app-input-stat',
+  templateUrl: './input-stat.component.html',
+  styleUrl: './input-stat.component.scss',
+})
+export class InputStatComponent {
+  public stat = model.required<StatType>();
+  public change = output<ItemClassType>();
+
+  public values = [
+    ...coreStats.map((x) => x.stat),
+    ...extraStats.map((x) => x.stat),
+  ];
+}

src/app/shared/shared.module.ts

@@ -14,6 +14,8 @@ import { InputSpriteComponent } from './components/input-sprite/input-sprite.com
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
 import { SpriteComponent } from './components/sprite/sprite.component';
 import { WebviewDirective } from './directives/';
+import { InputStatComponent } from './components/input-stat/input-stat.component';
+import { EditorBaseComponent } from './components/editor-base/editor-base.component';
 
 @NgModule({
   declarations: [
@@ -27,6 +29,8 @@ import { WebviewDirective } from './directives/';
     CellButtonsComponent,
     CellSpriteComponent,
     HeaderButtonsComponent,
+    InputStatComponent,
+    EditorBaseComponent,
   ],
   imports: [CommonModule, FormsModule, NgSelectModule, SweetAlert2Module],
   exports: [
@@ -40,6 +44,8 @@ import { WebviewDirective } from './directives/';
     CellButtonsComponent,
     CellSpriteComponent,
     HeaderButtonsComponent,
+    InputStatComponent,
+    EditorBaseComponent,
   ],
 })
 export class SharedModule {}