swap traits when using the editor if it exists in the tree to make it…

… more usable.
LandOfTheRair · Sep 9, 2024 · 1dde4e5 · 1dde4e5
1 parent 9170040
commit 1dde4e5
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/src/app/shared/components/input-trait/input-trait.component.html b/src/app/shared/components/input-trait/input-trait.component.html
@@ -1,6 +1,6 @@
 <div class="relative">
   <ng-select class="form-control" [items]="values()" [(ngModel)]="trait" bindLabel="value" bindValue="value"
-    placeholder="Select trait..." (change)="change.emit($event)">
+    placeholder="Select trait..." (change)="change.emit($event?.value)">
 
     <ng-template ng-option-tmp let-item="item">
       <div class="relative">
@@ -14,4 +14,4 @@
   </ng-select>
 
   <app-input-floating-label>{{ label() }}</app-input-floating-label>
-</div>
+</div>
diff --git a/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.html b/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.html
@@ -88,11 +88,13 @@
 }
 
 @default {
-@let tree = editingData.data.trees[editingData.data.treeOrder[activeTab() - 1]].tree;
+@let treeName = editingData.data.treeOrder[activeTab() - 1];
+@let treeTab = editingData.data.trees[treeName];
+@let tree = treeTab.tree;
 
-@for(row of tree; track $index) {
+@for(row of tree; let rowIndex = $index; track $index) {
 <div class="flex flex-row">
-  @for(col of tree[$index].traits; track $index + ' ' + col.name) {
+  @for(col of tree[$index].traits; let colIndex = $index;track $index + ' ' + col.name) {
   <div class="flex-1">
     <div class="flex flex-col p-4">
       <div class="flex items-center justify-center">
@@ -109,7 +111,8 @@
       </div>
 
       <div class="form-row">
-        <app-input-trait [(trait)]="col.name" label="Trait" [allowSpells]="true"></app-input-trait>
+        <app-input-trait [trait]="col.name" label="Trait" [allowSpells]="true"
+          (change)="changeTrait($event, tree, treeName, rowIndex, colIndex)"></app-input-trait>
       </div>
 
       <div class="form-row">

diff --git a/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.ts b/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.ts
@@ -157,6 +157,46 @@ export class TraitTreesEditorComponent
       );
   }
 
+  changeTrait(
+    $event: string | undefined,
+    tree: ITraitTreeRow[],
+    treeName: string,
+    row: number,
+    col: number
+  ): void {
+    this.editing.update(() => {
+      const newTree = structuredClone(this.editing());
+
+      let oldTraitValue: ITraitTreeRowTrait | undefined;
+      let oldTraitRow = -1;
+      let oldTraitCol = -1;
+
+      newTree.data.trees[treeName].tree.forEach((traitRow, ri) => {
+        traitRow.traits.forEach((trait, ci) => {
+          if (trait.name !== $event || (ci === col && ri === row)) return;
+
+          oldTraitValue = trait;
+          oldTraitCol = ci;
+          oldTraitRow = ri;
+        });
+      });
+
+      if (oldTraitValue) {
+        const curTraitValue = tree[row].traits[col];
+
+        newTree.data.trees[treeName].tree[row].traits[col] = oldTraitValue;
+        newTree.data.trees[treeName].tree[oldTraitRow].traits[oldTraitCol] =
+          curTraitValue;
+      } else {
+        newTree.data.trees[treeName].tree[row].traits[col].name = $event ?? '';
+        newTree.data.trees[treeName].tree[row].traits[col].maxLevel = 1;
+        newTree.data.trees[treeName].tree[row].traits[col].requires = '';
+      }
+
+      return newTree;
+    });
+  }
+
   public doSave() {
     const item = this.editing();