closes #11. add ids to everything for easier editor experience. add d…

…ebug view so json blobs can exist without causing ux problems long term.

package.json

@@ -44,6 +44,7 @@
     "ngx-webstorage": "18.0.0",
     "rxjs": "7.8.1",
     "tslib": "2.6.2",
+    "uuid": "10.0.0",
     "zone.js": "0.14.4"
   },
   "devDependencies": {
@@ -59,6 +60,7 @@
     "@tailwindcss/forms": "0.5.7",
     "@types/lodash": "4.17.7",
     "@types/node": "20.12.7",
+    "@types/uuid": "10.0.0",
     "@typescript-eslint/eslint-plugin": "7.7.1",
     "@typescript-eslint/parser": "7.7.1",
     "autoprefixer": "10.4.20",

src/app/helpers/droptable.ts

@@ -1,6 +1,8 @@
 import { IDroptable } from '../../interfaces';
+import { id } from './id';
 
 export const defaultDroptable: () => IDroptable = () => ({
+  _id: id(),
   isGlobal: false,
   mapName: null as unknown as string,
   maxChance: 0,

src/app/helpers/id.ts

@@ -0,0 +1,5 @@
+import { v7 as uuid } from 'uuid';
+
+export function id(): string {
+  return uuid() as string;
+}

src/app/helpers/index.ts

@@ -1,2 +1,4 @@
 export * from './constants';
+export * from './droptable';
 export * from './item';
+export * from './recipe';

src/app/helpers/item.ts

@@ -1,10 +1,12 @@
-import { IItemDefinition } from '../../interfaces';
+import { IItemDefinition, ItemClassType } from '../../interfaces';
+import { id } from './id';
 
 export const defaultItem: () => IItemDefinition = () => ({
+  _id: id(),
   sprite: 0,
   quality: 0,
   name: '',
-  itemClass: undefined as any,
+  itemClass: undefined as unknown as ItemClassType,
   maxUpgrades: 0,
   value: 1,
   sellValue: 0,
@@ -13,20 +15,33 @@ export const defaultItem: () => IItemDefinition = () => ({
   stats: {},
   randomStats: {},
   type: 'Martial',
-  secondaryType: undefined as any,
+  secondaryType: undefined as unknown as string,
   succorInfo: undefined,
   cosmetic: { name: '' },
   containedItems: [],
-  trait: { name: '', level: 0 },
+  trait: { name: undefined as unknown as string, level: 0 },
   randomTrait: { name: [], level: { min: 0, max: 0 } },
   useEffect: {
-    name: '',
+    name: undefined as unknown as string,
     potency: 0,
     duration: 0,
     extra: { statChanges: {}, tooltip: '', message: '' },
   },
-  strikeEffect: { name: '', potency: 0, duration: 0, chance: 0 },
-  breakEffect: { name: '', potency: 0, duration: 0 },
-  equipEffect: { name: '', potency: 0, duration: 0 },
+  strikeEffect: {
+    name: undefined as unknown as string,
+    potency: 0,
+    duration: 0,
+    chance: 0,
+  },
+  breakEffect: {
+    name: undefined as unknown as string,
+    potency: 0,
+    duration: 0,
+  },
+  equipEffect: {
+    name: undefined as unknown as string,
+    potency: 0,
+    duration: 0,
+  },
   requirements: { baseClass: undefined, level: 0 },
 });

src/app/helpers/recipe.ts

@@ -0,0 +1,22 @@
+import { IRecipe, TradeskillType } from '../../interfaces';
+import { id } from './id';
+
+export const defaultRecipe: () => IRecipe = () => ({
+  _id: id(),
+  category: '',
+  item: '',
+  maxSkillForGains: 0,
+  name: '',
+  recipeType: undefined as unknown as TradeskillType,
+  requireSkill: 0,
+  skillGained: 1,
+  xpGained: 1,
+  copySkillToPotency: false,
+  ingredients: [],
+  ozIngredients: [],
+  potencyScalar: 0,
+  requireClass: [],
+  requireLearn: false,
+  requireSpell: undefined as unknown as string,
+  transferOwnerFrom: '',
+});

src/app/home/home.component.html

@@ -26,6 +26,9 @@
 
             <li class="menu-title"><a>Mod Testing</a></li>
             <li><a target="_blank" href="https://rair.land/docs/modkit/">Help</a></li>
+            <li>
+              <a (click)="debugService.toggleDebug()">Debug Mode {{ debugService.isDebug() ? '☑' : '☐' }}</a>
+            </li>
             <li><a (click)="electronService.send('DOWNLOAD_MONGO')">Install MongoDB...</a></li>
             <li><a (click)="electronService.send('DOWNLOAD_RAIR')">Install Rair Server...</a></li>
             <li><a>Test Mod!</a></li>

src/app/home/home.component.ts

@@ -1,5 +1,6 @@
 import { Component, computed, inject, signal } from '@angular/core';
 import { LocalStorageService } from 'ngx-webstorage';
+import { DebugService } from '../services/debug.service';
 import { ElectronService } from '../services/electron.service';
 import { ModService } from '../services/mod.service';
 
@@ -10,6 +11,7 @@ import { ModService } from '../services/mod.service';
 })
 export class HomeComponent {
   private localStorage = inject(LocalStorageService);
+  public debugService = inject(DebugService);
   public electronService = inject(ElectronService);
   public modService = inject(ModService);
 

src/app/home/home.module.ts

@@ -15,6 +15,7 @@ import { ItemsComponent } from '../tabs/items/items.component';
 import { MapsComponent } from '../tabs/maps/maps.component';
 import { NpcsComponent } from '../tabs/npcs/npcs.component';
 import { QuestsComponent } from '../tabs/quests/quests.component';
+import { RecipesEditorComponent } from '../tabs/recipes/recipes-editor/recipes-editor.component';
 import { RecipesComponent } from '../tabs/recipes/recipes.component';
 import { SpawnersComponent } from '../tabs/spawners/spawners.component';
 import { HomeComponent } from './home.component';
@@ -31,6 +32,7 @@ import { HomeComponent } from './home.component';
     NpcsComponent,
     QuestsComponent,
     RecipesComponent,
+    RecipesEditorComponent,
     SpawnersComponent,
   ],
   imports: [

src/app/services/debug.service.ts

@@ -0,0 +1,20 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { LocalStorageService } from 'ngx-webstorage';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DebugService {
+  private localStorage = inject(LocalStorageService);
+
+  public isDebug = signal<boolean>(false);
+
+  public toggleDebug() {
+    this.isDebug.set(!this.isDebug());
+    this.localStorage.store('debug', this.isDebug());
+  }
+
+  constructor() {
+    this.isDebug.set(!!this.localStorage.retrieve('debug'));
+  }
+}

src/app/services/mod.service.ts

@@ -5,6 +5,7 @@ import {
   IEditorMap,
   IItemDefinition,
   IModKit,
+  IRecipe,
 } from '../../interfaces';
 
 export function defaultModKit(): IModKit {
@@ -188,7 +189,7 @@ export class ModService {
 
   public editItem(oldItem: IItemDefinition, newItem: IItemDefinition) {
     const mod = this.mod();
-    const foundItemIdx = mod.items.findIndex((i) => i.name === oldItem.name);
+    const foundItemIdx = mod.items.findIndex((i) => i._id === oldItem._id);
     if (foundItemIdx === -1) return;
 
     mod.items[foundItemIdx] = newItem;
@@ -203,6 +204,11 @@ export class ModService {
     this.updateMod(mod);
   }
 
+  public findItemByName(itemName: string): IItemDefinition | undefined {
+    const items = this.availableItems();
+    return items.find((i) => i.name === itemName);
+  }
+
   // droptable functions
   public addDroptable(item: IDroptable) {
     const mod = this.mod();
@@ -213,7 +219,7 @@ export class ModService {
 
   public editDroptable(oldItem: IDroptable, newItem: IDroptable) {
     const mod = this.mod();
-    const foundItemIdx = mod.drops.findIndex((i) => i === oldItem);
+    const foundItemIdx = mod.drops.findIndex((i) => i._id === oldItem._id);
     if (foundItemIdx === -1) return;
 
     mod.drops[foundItemIdx] = newItem;
@@ -227,4 +233,29 @@ export class ModService {
 
     this.updateMod(mod);
   }
+
+  // recipe functions
+  public addRecipe(item: IRecipe) {
+    const mod = this.mod();
+    mod.recipes.push(item);
+
+    this.updateMod(mod);
+  }
+
+  public editRecipe(oldItem: IRecipe, newItem: IRecipe) {
+    const mod = this.mod();
+    const foundItemIdx = mod.recipes.findIndex((i) => i._id === oldItem._id);
+    if (foundItemIdx === -1) return;
+
+    mod.recipes[foundItemIdx] = newItem;
+
+    this.updateMod(mod);
+  }
+
+  public removeRecipe(item: IRecipe) {
+    const mod = this.mod();
+    mod.recipes = mod.recipes.filter((i) => i !== item);
+
+    this.updateMod(mod);
+  }
 }

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

@@ -19,6 +19,12 @@ export class CellSpriteComponent implements ICellRendererAngularComp {
       );
     }
 
+    if (this.params.fromItem) {
+      return (
+        allItems.find((f) => f.name === this.params.data.item)?.sprite ?? -1
+      );
+    }
+
     return this.params.data.sprite as number;
   });
 

src/app/shared/components/debug-view/debug-view.component.html

@@ -0,0 +1,6 @@
+@if(debugService.isDebug()) {
+<hr class="mt-3">
+<pre>
+<ng-content></ng-content>
+</pre>
+}

src/app/shared/components/debug-view/debug-view.component.ts

@@ -0,0 +1,11 @@
+import { Component, inject } from '@angular/core';
+import { DebugService } from '../../../services/debug.service';
+
+@Component({
+  selector: 'app-debug-view',
+  templateUrl: './debug-view.component.html',
+  styleUrl: './debug-view.component.scss',
+})
+export class DebugViewComponent {
+  public debugService = inject(DebugService);
+}

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

@@ -7,6 +7,9 @@ import {
   signal,
 } from '@angular/core';
 import { LocalStorageService } from 'ngx-webstorage';
+import { HasIdentification } from '../../../../interfaces';
+import { id } from '../../../helpers/id';
+import { ModService } from '../../../services/mod.service';
 
 type Tab = { name: string };
 
@@ -15,8 +18,11 @@ type Tab = { name: string };
   templateUrl: './editor-base.component.html',
   styleUrl: './editor-base.component.scss',
 })
-export class EditorBaseComponent<T> implements OnInit {
+export class EditorBaseComponent<T extends HasIdentification>
+  implements OnInit
+{
   private localStorage = inject(LocalStorageService);
+  public modService = inject(ModService);
 
   public readonly key: string = '';
   public readonly tabs: Tab[] = [];
@@ -37,8 +43,23 @@ export class EditorBaseComponent<T> implements OnInit {
     this.editing.update((editing) => ({ ...editing, [key]: value }));
   }
 
+  public updateArray(key: keyof T, idx: number, value: any) {
+    this.editing.update((editing) => {
+      const arr = editing[key] as Array<any>;
+      arr[idx] = value;
+      return editing;
+    });
+  }
+
   ngOnInit() {
     this.initTabs();
+
+    const editing = this.editing();
+    if (!editing._id) {
+      editing._id = id();
+    }
+
+    this.editing.set(editing);
   }
 
   private initTabs() {

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>
+  <ng-select class="form-control" [items]="values" [(ngModel)]="damageClass" placeholder="Select damage class..."
+    (change)="change.emit($event)"></ng-select>
 
   <app-input-floating-label>Damage Class</app-input-floating-label>
 </div>