closes #21

LandOfTheRair · Aug 15, 2024 · 68c5359 · 68c5359
1 parent ff97d6e
commit 68c5359
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 8 deletions.
diff --git a/src/app/tabs/items/items-editor/items-editor.component.html b/src/app/tabs/items/items-editor/items-editor.component.html
@@ -325,13 +325,83 @@
 <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 role="tablist" class="tabs tabs-boxed rounded-none mb-3">
+        @for(tab of traitSettings; let i = $index; track tab.name) {
+        <a role="tab" class="tab" [class.tab-active]="currentTraitTab() === tab.type"
+          (click)="changeTraitTab(tab.type)">
+          {{ tab.name }}
+        </a>
+        }
+      </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" />
+      @switch(currentTraitTab()) {
+      @case ('static') {
+      <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 class="form-row">
+        <app-input-trait [(trait)]="editingData.trait.name" label="Trait"></app-input-trait>
+      </div>
+      }
+
+      @case ('random') {
+      <div class="form-row split">
+        <div class="form-column">
+          <div class="form-row">
+            <app-input-floating-label>Min Random Trait Level</app-input-floating-label>
+            <input [(ngModel)]="editingData.randomTrait.level.min" type="number" min="0" placeholder="Enter level..."
+              class="form-input" />
+          </div>
+        </div>
+
+        <div class="form-column">
+          <div class="form-row">
+            <app-input-floating-label>Max Random Trait Level</app-input-floating-label>
+            <input [(ngModel)]="editingData.randomTrait.level.max" min="0" type="number" placeholder="Enter level..."
+              class="form-input" />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-row split">
+        <div class="form-column">
+          <div class="form-row">
+            <app-input-trait [(trait)]="currentTrait"></app-input-trait>
+          </div>
+        </div>
+
+        <div class="form-column button-column">
+          <div class="form-row w-full flex justify-end">
+            <button class="btn btn-accent btn-sm" [disabled]="!currentTrait() || hasTrait(currentTrait())"
+              (click)="addTrait(currentTrait())">
+              <ng-icon name="heroPlus"></ng-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      @for(traitName of editingData.randomTrait.name; track $index) {
+      <div class="form-row split">
+        <div class="form-column">
+          <div class="form-row">
+            {{ traitName }}
+          </div>
+        </div>
+
+        <div class="form-column button-column">
+          <div class="form-row w-full flex justify-end">
+            <button class="ml-1 btn btn-error btn-sm" (click)="removeTrait($index)">
+              <ng-icon name="heroMinus"></ng-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+      }
+      }
+      }
     </div>
 
   </div>
@@ -455,4 +525,4 @@
 
 <app-debug-view>
   {{ editingData | json }}
-</app-debug-view>
+</app-debug-view>
diff --git a/src/app/tabs/items/items-editor/items-editor.component.ts b/src/app/tabs/items/items-editor/items-editor.component.ts
@@ -21,6 +21,8 @@ type StatEdit = {
   set: number;
 };
 
+type TraitSetting = 'none' | 'static' | 'random';
+
 @Component({
   selector: 'app-items-editor',
   templateUrl: './items-editor.component.html',
@@ -37,6 +39,12 @@ export class ItemsEditorComponent
     { name: 'Miscellaneous' },
   ];
 
+  public readonly traitSettings: Array<{ name: string; type: TraitSetting }> = [
+    { name: 'No Trait', type: 'none' },
+    { name: 'Single Trait', type: 'static' },
+    { name: 'Random Trait', type: 'random' },
+  ];
+
   public readonly propTypes: Partial<
     Record<
       keyof IItemDefinition,
@@ -69,6 +77,8 @@ export class ItemsEditorComponent
 
   public currentItem = signal<IItemDefinition | undefined>(undefined);
   public currentStat = signal<StatType>('agi');
+  public currentTraitTab = signal<TraitSetting>('none');
+  public currentTrait = signal<string | undefined>(undefined);
   public allStatEdits = signal<StatEdit[]>([]);
 
   public canSave = computed(() => {
@@ -232,6 +242,14 @@ export class ItemsEditorComponent
         { stat, type: 'minmax', set: 0, ...value },
       ]);
     });
+
+    if (item.trait.name) {
+      this.currentTraitTab.set('static');
+    }
+
+    if (item.randomTrait.name.length > 0) {
+      this.currentTraitTab.set('random');
+    }
   }
 
   private extractSetStats(stats: StatBlock) {
@@ -330,6 +348,48 @@ export class ItemsEditorComponent
     }
   }
 
+  changeTraitTab(newTraitSetting: TraitSetting) {
+    this.currentTraitTab.set(newTraitSetting);
+
+    const item = this.editing();
+
+    if (newTraitSetting !== 'random') {
+      item.randomTrait = {
+        name: [],
+        level: { min: 0, max: 0 },
+      };
+    }
+
+    if (newTraitSetting !== 'static') {
+      item.trait = {
+        name: undefined as unknown as string,
+        level: 0,
+      };
+    }
+  }
+
+  addTrait(trait: string | undefined) {
+    if (!trait) return;
+
+    const item = this.editing();
+    item.randomTrait.name.push(trait);
+
+    this.editing.set(item);
+  }
+
+  hasTrait(trait: string | undefined) {
+    if (!trait) return false;
+
+    return this.editing().randomTrait.name.includes(trait);
+  }
+
+  removeTrait(index: number) {
+    const item = this.editing();
+    item.randomTrait.name.splice(index, 1);
+
+    this.editing.set(item);
+  }
+
   public doSave() {
     const item = this.editing();
     this.assignStats(item);

diff --git a/src/interfaces/item.ts b/src/interfaces/item.ts
@@ -61,7 +61,7 @@ export interface IGear {
   stats: StatBlock;
 
   // the trait on the item
-  trait?: IItemTrait;
+  trait: IItemTrait;
 }
 
 export interface IWeapon {