finish tab 2 for items

app/handlers/json.ts

@@ -1 +1,13 @@
-export function loadJSON(json: any) {}
+import * as fs from 'fs-extra';
+
+import { baseUrl } from '../helpers';
+
+export function loadJSON(json: any) {
+  const file = `${baseUrl}/resources/json/${json}.json`;
+
+  if (!fs.existsSync(file)) {
+    throw new Error(`Attempting to load invalid or absent JSON: ${json}`);
+  }
+
+  return fs.readJsonSync(file);
+}

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

@@ -1,4 +1,12 @@
-import { Component, model, output, signal } from '@angular/core';
+import {
+  Component,
+  inject,
+  model,
+  OnInit,
+  output,
+  signal,
+} from '@angular/core';
+import { LocalStorageService } from 'ngx-webstorage';
 
 type Tab = { name: string };
 
@@ -7,7 +15,10 @@ type Tab = { name: string };
   templateUrl: './editor-base.component.html',
   styleUrl: './editor-base.component.scss',
 })
-export class EditorBaseComponent<T> {
+export class EditorBaseComponent<T> implements OnInit {
+  private localStorage = inject(LocalStorageService);
+
+  public readonly key: string = '';
   public readonly tabs: Tab[] = [];
 
   public activeTab = signal<number>(0);
@@ -19,12 +30,24 @@ export class EditorBaseComponent<T> {
 
   public changeTab(tab: number) {
     this.activeTab.set(tab);
+    this.localStorage.store(`${this.key}-tabs`, tab);
   }
 
   public update(key: keyof T, value: any) {
     this.editing.update((editing) => ({ ...editing, [key]: value }));
   }
 
+  ngOnInit() {
+    this.initTabs();
+  }
+
+  private initTabs() {
+    const oldTab = +this.localStorage.retrieve(`${this.key}-tabs`);
+    if (oldTab) {
+      this.activeTab.set(oldTab);
+    }
+  }
+
   doBack() {
     this.goBack.emit();
   }

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

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

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

@@ -0,0 +1,21 @@
+import { Component, input, model, output } from '@angular/core';
+import { BaseClassType } from '../../../../interfaces';
+
+@Component({
+  selector: 'app-input-class',
+  templateUrl: './input-class.component.html',
+  styleUrl: './input-class.component.scss',
+})
+export class InputClassComponent {
+  public playerClass = model.required<BaseClassType | undefined>();
+  public label = input<string>('Class');
+  public change = output<BaseClassType | undefined>();
+
+  public values: BaseClassType[] = [
+    'Mage',
+    'Thief',
+    'Healer',
+    'Warrior',
+    'Traveller',
+  ];
+}

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

@@ -1,6 +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>
+    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-effect/input-effect.component.html

@@ -0,0 +1,17 @@
+<div class="relative">
+  <ng-select class="form-control" [items]="values()" [(ngModel)]="effect" placeholder="Select effect..."
+    (change)="change.emit($event?.value)">
+
+    <ng-template ng-option-tmp let-item="item">
+      <div class="relative">
+        <div class="text-white">
+          {{ item.value }}
+        </div>
+
+        <p class="text-white text-sm italic">{{ item.desc }}</p>
+      </div>
+    </ng-template>
+  </ng-select>
+
+  <app-input-floating-label>{{ label() }}</app-input-floating-label>
+</div>

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

@@ -0,0 +1,41 @@
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { ElectronService } from '../../../services/electron.service';
+import { ModService } from '../../../services/mod.service';
+
+@Component({
+  selector: 'app-input-effect',
+  templateUrl: './input-effect.component.html',
+  styleUrl: './input-effect.component.scss',
+})
+export class InputEffectComponent {
+  private electronService = inject(ElectronService);
+  private modService = inject(ModService);
+
+  public effect = model.required<string>();
+  public label = input<string>('Effect');
+  public change = output<string>();
+
+  public values = computed(() => {
+    const effectObj = this.modService.json()['effect-data'] as Record<
+      string,
+      any
+    >;
+    return Object.keys(effectObj ?? {})
+      .sort()
+      .map((t) => ({
+        value: t,
+        desc: effectObj[t].tooltip?.desc ?? 'No description',
+      }));
+  });
+
+  constructor() {
+    this.electronService.requestJSON('effect-data');
+  }
+}

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

@@ -1,7 +1,7 @@
 <div class="relative">
   <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>
+    (change)="change.emit($event?.value)"></ng-select>
 
   <app-input-floating-label>{{ label() }}</app-input-floating-label>
 </div>

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

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

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

@@ -1,4 +1,4 @@
-import { Component, input, model } from '@angular/core';
+import { Component, input, model, output } from '@angular/core';
 import { Skill } from '../../../../interfaces';
 
 @Component({
@@ -9,6 +9,7 @@ import { Skill } from '../../../../interfaces';
 export class InputSkillComponent {
   public skill = model.required<string>();
   public label = input<string>('Skill');
+  public change = output<string>();
 
   public values = [...Object.keys(Skill)];
 }

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

@@ -0,0 +1,17 @@
+<div class="relative">
+  <ng-select class="form-control" [items]="values()" [(ngModel)]="trait" bindLabel="value" bindValue="value"
+    placeholder="Select trait..." (change)="change.emit($event)">
+
+    <ng-template ng-option-tmp let-item="item">
+      <div class="relative">
+        <div class="text-white">
+          {{ item.value }}
+        </div>
+
+        <p class="text-white text-sm italic">{{ item.desc }}</p>
+      </div>
+    </ng-template>
+  </ng-select>
+
+  <app-input-floating-label>{{ label() }}</app-input-floating-label>
+</div>

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

@@ -0,0 +1,35 @@
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { ElectronService } from '../../../services/electron.service';
+import { ModService } from '../../../services/mod.service';
+
+@Component({
+  selector: 'app-input-trait',
+  templateUrl: './input-trait.component.html',
+  styleUrl: './input-trait.component.scss',
+})
+export class InputTraitComponent {
+  private electronService = inject(ElectronService);
+  private modService = inject(ModService);
+
+  public trait = model.required<string>();
+  public label = input<string>('Trait');
+  public change = output<string>();
+
+  public values = computed(() => {
+    const traitObj = this.modService.json()['traits'] as Record<string, any>;
+    return Object.keys(traitObj ?? {})
+      .sort()
+      .map((t) => ({ value: t, desc: traitObj[t].desc ?? 'No description' }));
+  });
+
+  constructor() {
+    this.electronService.requestJSON('traits');
+  }
+}

src/app/shared/shared.module.ts

@@ -18,6 +18,9 @@ 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';
+import { InputEffectComponent } from './components/input-effect/input-effect.component';
+import { InputTraitComponent } from './components/input-trait/input-trait.component';
+import { InputClassComponent } from './components/input-class/input-class.component';
 
 @NgModule({
   declarations: [
@@ -35,6 +38,9 @@ import { InputItemComponent } from './components/input-item/input-item.component
     EditorBaseComponent,
     InputDamageclassComponent,
     InputItemComponent,
+    InputEffectComponent,
+    InputTraitComponent,
+    InputClassComponent,
   ],
   imports: [CommonModule, FormsModule, NgSelectModule, SweetAlert2Module],
   exports: [
@@ -52,6 +58,9 @@ import { InputItemComponent } from './components/input-item/input-item.component
     EditorBaseComponent,
     InputDamageclassComponent,
     InputItemComponent,
+    InputEffectComponent,
+    InputTraitComponent,
+    InputClassComponent,
   ],
 })
 export class SharedModule {}

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

@@ -338,11 +338,116 @@
 }
 
 @case (1) {
+<div class="flex flex-row gap-2">
+  <div class="form-column">
+    <div class="form-row">
+      <app-input-trait [(trait)]="editingData.trait!.name" label="Trait"></app-input-trait>
+    </div>
+
+    <div class="form-row">
+      <app-input-floating-label>Trait Level</app-input-floating-label>
+      <input [(ngModel)]="editingData.trait!.level" type="number" min="0" placeholder="Enter level..."
+        class="form-input" />
+    </div>
+
+  </div>
+
+  <div class="form-column">
+    <div class="form-row">
+      <app-input-effect [effect]="editingData.useEffect!.name" (change)="editingData.useEffect!.name = $event"
+        label="Use Effect"></app-input-effect>
+    </div>
+
+    <div class="form-row">
+      <app-input-floating-label>Use Potency</app-input-floating-label>
+      <input [(ngModel)]="editingData.useEffect!.potency" type="number" min="0" placeholder="Enter potency..."
+        class="form-input" />
+    </div>
+
+    <div class="form-row">
+      <app-input-floating-label>Use Duration</app-input-floating-label>
+      <input [(ngModel)]="editingData.useEffect!.duration" type="number" min="-1" placeholder="Enter duration..."
+        class="form-input" />
+    </div>
+
+    <div class="form-row">
+      <label class="label cursor-pointer" floatUi="Whether or not the effect can be applied via Thief Apply.">
+        <input type="checkbox" [(ngModel)]="editingData.useEffect!.canApply" class="checkbox" />
+        <span class="label-text">Can Apply Use Effect Via Thief Apply</span>
+      </label>
+    </div>
+
+    <hr class="my-4">
+
+    <div class="form-row">
+      <app-input-effect [effect]="editingData.strikeEffect!.name" (change)="editingData.strikeEffect!.name = $event"
+        label="Strike Effect"></app-input-effect>
+    </div>
+
+    <div class="form-row">
+      <app-input-floating-label>Strike Potency</app-input-floating-label>
+      <input [(ngModel)]="editingData.strikeEffect!.potency" type="number" min="0" placeholder="Enter potency..."
+        class="form-input" />
+    </div>
+
+    <div class="form-row">
+      <app-input-floating-label>Strike Duration</app-input-floating-label>
+      <input [(ngModel)]="editingData.strikeEffect!.duration" type="number" min="-1" placeholder="Enter duration..."
+        class="form-input" />
+    </div>
+
+    <div class="form-row">
+      <app-input-floating-label>Strike Chance</app-input-floating-label>
+      <input [(ngModel)]="editingData.strikeEffect!.chance" type="number" min="0" max="100"
+        placeholder="Enter chance..." class="form-input" />
+    </div>
+
+    <hr class="my-4">
+
+    <div class="form-row">
+      <app-input-effect [effect]="editingData.equipEffect!.name" (change)="editingData.equipEffect!.name = $event"
+        label="Equip Effect"></app-input-effect>
+    </div>
+
+    <div class="form-row">
+      <app-input-floating-label>Equip Potency</app-input-floating-label>
+      <input [(ngModel)]="editingData.equipEffect!.potency" type="number" min="0" placeholder="Enter potency..."
+        class="form-input" />
+    </div>
+
+    <hr class="my-4">
+
+    <div class="form-row">
+      <app-input-effect [effect]="editingData.breakEffect!.name" (change)="editingData.breakEffect!.name = $event"
+        label="Break Effect"></app-input-effect>
+    </div>
+
+    <div class="form-row">
+      <app-input-floating-label>Break Potency</app-input-floating-label>
+      <input [(ngModel)]="editingData.breakEffect!.potency" type="number" min="0" placeholder="Enter potency..."
+        class="form-input" />
+    </div>
+  </div>
 
+  <div class="form-column">
+    <div class="form-row">
+      <app-input-class [(playerClass)]="editingData.requirements!.baseClass" label="Required Class"></app-input-class>
+    </div>
+
+    <div class="form-row">
+      <app-input-floating-label>Required Level</app-input-floating-label>
+      <input [(ngModel)]="editingData.requirements!.level" type="number" min="0" placeholder="Enter required level..."
+        class="form-input" />
+    </div>
+  </div>
+</div>
 }
 
 @case (2) {
-
+<div class="flex flex-row gap-2">
+  <div class="form-column">
+  </div>
+</div>
 }
 }