finish core stats tab for items

src/app/helpers/item.ts

@@ -9,6 +9,7 @@ export const defaultItem: () => IItemDefinition = () => ({
   value: 1,
   sellValue: 0,
   desc: 'an item',
+  damageClass: 'physical',
   stats: {},
   randomStats: {},
   type: 'Martial',

src/app/services/mod.service.ts

@@ -124,10 +124,10 @@ export class ModService {
 
   public editItem(oldItem: IItemDefinition, newItem: IItemDefinition) {
     const mod = this.mod();
-    const foundItem = mod.items.find((i) => i.name === oldItem.name);
-    if (!foundItem) return;
+    const foundItemIdx = mod.items.findIndex((i) => i.name === oldItem.name);
+    if (foundItemIdx === -1) return;
 
-    Object.assign(foundItem, newItem);
+    mod.items[foundItemIdx] = newItem;
 
     this.updateMod(mod);
   }

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

@@ -30,6 +30,7 @@ export class EditorBaseComponent<T> {
   }
 
   doSave() {
+    console.log('[SAVE DATA]', this.editing());
     this.save.emit(this.editing());
   }
 }

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

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

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

@@ -0,0 +1,14 @@
+import { Component, model, output } from '@angular/core';
+import { DamageClass, DamageClassType } from '../../../../interfaces';
+
+@Component({
+  selector: 'app-input-damageclass',
+  templateUrl: './input-damageclass.component.html',
+  styleUrl: './input-damageclass.component.scss',
+})
+export class InputDamageclassComponent {
+  public damageClass = model.required<DamageClassType>();
+  public change = output<DamageClass>();
+
+  public values = [...Object.values(DamageClass)];
+}

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

@@ -0,0 +1,29 @@
+<div class="relative">
+  <ng-select class="form-control" [items]="values()" bindValue="data" groupBy="category" [(ngModel)]="item"
+    placeholder="Select item..." (change)="change.emit($event.value)">
+
+    <ng-template ng-label-tmp let-item="item">
+      <div class="relative">
+        @if(item.data) {
+        <app-sprite class="absolute -top-5 -left-5" [scale]="0.5" [type]="'items'"
+          [sprite]="item.data.sprite"></app-sprite>
+        }
+        <div class="ml-7 text-white">
+          {{ item.data.name }}
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template ng-option-tmp let-item="item">
+      <div class="relative">
+        <app-sprite class="absolute -top-5 -left-7" [scale]="0.5" [type]="'items'"
+          [sprite]="item.data.sprite"></app-sprite>
+        <div class="ml-5 text-white">
+          {{ item.data.name }}
+        </div>
+      </div>
+    </ng-template>
+  </ng-select>
+
+  <app-input-floating-label>Item</app-input-floating-label>
+</div>

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

@@ -0,0 +1,27 @@
+import { Component, computed, inject, model, output } from '@angular/core';
+import { IItemDefinition } from '../../../../interfaces';
+import { ModService } from '../../../services/mod.service';
+
+@Component({
+  selector: 'app-input-item',
+  templateUrl: './input-item.component.html',
+  styleUrl: './input-item.component.scss',
+})
+export class InputItemComponent {
+  private modService = inject(ModService);
+
+  public item = model.required<IItemDefinition | undefined>();
+  public change = output<string>();
+
+  public values = computed(() => {
+    const mod = this.modService.mod();
+
+    return [
+      ...mod.items.map((i) => ({
+        category: 'My Mod Items',
+        data: i,
+        value: i.name,
+      })),
+    ];
+  });
+}

src/app/shared/components/sprite/sprite.component.html

@@ -1,2 +1,2 @@
 <img [src]="'file://./resources/maps/__assets/spritesheets/' + type() + '.png'" class="sprite"
-  [style.object-position]="objectPosition()" />
+  [style.object-position]="objectPosition()" [style.transform]="'scale(' + scale() + ')'" />

src/app/shared/components/sprite/sprite.component.ts

@@ -15,6 +15,8 @@ const divisors: Record<SpriteType, number> = {
 export class SpriteComponent {
   public sprite = input.required<number>();
   public type = input.required<'items' | 'creatures'>();
+  public scale = input<number>(1);
+
   public size = computed(() => divisors[this.type()]);
 
   public objectPosition = computed(() => {

src/app/shared/shared.module.ts

@@ -16,6 +16,8 @@ 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';
+import { InputDamageclassComponent } from './components/input-damageclass/input-damageclass.component';
+import { InputItemComponent } from './components/input-item/input-item.component';
 
 @NgModule({
   declarations: [
@@ -31,6 +33,8 @@ import { EditorBaseComponent } from './components/editor-base/editor-base.compon
     HeaderButtonsComponent,
     InputStatComponent,
     EditorBaseComponent,
+    InputDamageclassComponent,
+    InputItemComponent,
   ],
   imports: [CommonModule, FormsModule, NgSelectModule, SweetAlert2Module],
   exports: [
@@ -46,6 +50,8 @@ import { EditorBaseComponent } from './components/editor-base/editor-base.compon
     HeaderButtonsComponent,
     InputStatComponent,
     EditorBaseComponent,
+    InputDamageclassComponent,
+    InputItemComponent,
   ],
 })
 export class SharedModule {}

src/app/tabs/items/items-editor/items-editor.component.html

@@ -162,7 +162,7 @@
 
       <div class="form-column">
         <div class="form-row w-full flex justify-end">
-          <button class="btn btn-secondary btn-sm" [disabled]="!currentStat() || doesItemHaveCurrentStat()"
+          <button class="btn btn-accent btn-sm" [disabled]="!currentStat() || doesItemHaveCurrentStat()"
             (click)="addStat(currentStat())">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="size-6">
@@ -224,7 +224,115 @@
   </div>
 
   <div class="form-column">
-    {{ extraProps() | json }}
+    @for(prop of extraProps(); track $index) {
+
+    @switch(propTypes[prop]) {
+    @case('string') {
+    <div class="form-row">
+      <app-input-floating-label>{{ prop }}</app-input-floating-label>
+      <input [(ngModel)]="editingData[prop]" type="text" placeholder="Pick..." class="form-input" />
+    </div>
+    }
+
+    @case('number') {
+    <div class="form-row">
+      <app-input-floating-label>{{ prop }}</app-input-floating-label>
+      <input [(ngModel)]="editingData[prop]" type="number" min="0" placeholder="Pick..." class="form-input" />
+    </div>
+    }
+
+    @case('boolean') {
+    <div class="form-row">
+      <label class="label cursor-pointer">
+        <input type="checkbox" [(ngModel)]="editingData[prop]" class="checkbox" />
+        <span class="label-text">{{ prop }}</span>
+      </label>
+    </div>
+    }
+
+    @case('damageClass') {
+    <div class="form-row">
+      <app-input-damageclass [(damageClass)]="editingData.damageClass"></app-input-damageclass>
+    </div>
+    }
+
+    @case('succorInfo') {
+    <div class="form-row split">
+      <div class="form-column">
+        <div class="form-row">
+          <app-input-floating-label>Succor Map</app-input-floating-label>
+          <input [(ngModel)]="editingData.succorInfo!.map" type="text" placeholder="Pick..." class="form-input" />
+        </div>
+      </div>
+      <div class="form-column">
+        <div class="form-row">
+          <app-input-floating-label>Succor X</app-input-floating-label>
+          <input [(ngModel)]="editingData.succorInfo!.x" type="number" placeholder="Pick..." class="form-input" />
+        </div>
+      </div>
+      <div class="form-column">
+        <div class="form-row">
+          <app-input-floating-label>Succor Y</app-input-floating-label>
+          <input [(ngModel)]="editingData.succorInfo!.y" type="number" placeholder="Pick..." class="form-input" />
+        </div>
+      </div>
+    </div>
+    }
+
+    @case('containedItems') {
+    <div class="form-row split">
+      <div class="form-column">
+        <div class="form-row">
+          <app-input-item [(item)]="currentItem"></app-input-item>
+        </div>
+      </div>
+
+      <div class="form-column">
+        <div class="form-row w-full flex justify-end">
+          <button class="btn btn-accent btn-sm" (click)="addContainedItem()" [disabled]="!currentItem()">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+              stroke="currentColor" class="size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    @for(item of editingData.containedItems; track $index) {
+    <div class="form-row split">
+      <div class="form-column">
+        <div class="form-row pl-1">
+          {{ item.result }}
+        </div>
+      </div>
+
+      <div class="form-column">
+        <div class="form-row">
+          <app-input-floating-label>Roll Chance</app-input-floating-label>
+          <input [(ngModel)]="item.chance" type="number" placeholder="Enter chance..." class="form-input" />
+        </div>
+      </div>
+
+      <div class="form-column">
+        <div class="form-row w-full flex justify-end">
+          <button class="ml-1 btn btn-error btn-sm" (click)="removeContainedItem($index)">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+              stroke="currentColor" class="size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    }
+    }
+
+    @default {
+    {{ prop }} ({{ propTypes[prop] }}) has no editor.
+    }
+    }
+    }
   </div>
 </div>
 }