closes #10

src/app/app.module.ts

@@ -52,5 +52,6 @@ import { AppComponent } from './app.component';
       withLocalStorage()
     ),
   ],
+  exports: [],
 })
 export class AppModule {}

src/app/helpers/droptable.ts

@@ -0,0 +1,11 @@
+import { IDroptable } from '../../interfaces';
+
+export const defaultDroptable: () => IDroptable = () => ({
+  isGlobal: false,
+  mapName: null as unknown as string,
+  maxChance: 0,
+  noLuckBonus: false,
+  regionName: null as unknown as string,
+  requireHoliday: null as unknown as string,
+  result: null as unknown as string,
+});

src/app/home/home.component.html

@@ -50,7 +50,7 @@
     @for(tab of tabOrder; track tab.name) {
     <a role="tab" class="tab" [class.tab-disabled]="!electronService.isLoaded()"
       [class.tab-active]="activeTab() === tab.name" (click)="changeTab(tab.name)">{{ tab.name
-      }}</a>
+      }} ({{ tab.count() }})</a>
     }
 
   </div>

src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
 import { LocalStorageService } from 'ngx-webstorage';
 import { ElectronService } from '../services/electron.service';
 import { ModService } from '../services/mod.service';
@@ -16,14 +16,32 @@ export class HomeComponent {
   public activeTab = signal<string>('Maps');
 
   public tabOrder = [
-    { name: 'Maps' },
-    { name: 'Items' },
-    { name: 'NPCs' },
-    { name: 'Droptables' },
-    { name: 'Recipes' },
-    { name: 'Spawners' },
-    { name: 'Dialogs' },
-    { name: 'Quests' },
+    { name: 'Maps', count: computed(() => this.modService.mod().maps.length) },
+    {
+      name: 'Items',
+      count: computed(() => this.modService.mod().items.length),
+    },
+    { name: 'NPCs', count: computed(() => this.modService.mod().npcs.length) },
+    {
+      name: 'Droptables',
+      count: computed(() => this.modService.mod().drops.length),
+    },
+    {
+      name: 'Recipes',
+      count: computed(() => this.modService.mod().recipes.length),
+    },
+    {
+      name: 'Spawners',
+      count: computed(() => this.modService.mod().spawners.length),
+    },
+    {
+      name: 'Dialogs',
+      count: computed(() => this.modService.mod().dialogs.length),
+    },
+    {
+      name: 'Quests',
+      count: computed(() => this.modService.mod().quests.length),
+    },
   ];
 
   constructor() {

src/app/home/home.module.ts

@@ -8,6 +8,7 @@ import { AgGridModule } from 'ag-grid-angular';
 import { NgxFloatUiModule } from 'ngx-float-ui';
 import { SharedModule } from '../shared/shared.module';
 import { DialogsComponent } from '../tabs/dialogs/dialogs.component';
+import { DroptablesEditorComponent } from '../tabs/droptables/droptables-editor/droptables-editor.component';
 import { DroptablesComponent } from '../tabs/droptables/droptables.component';
 import { ItemsEditorComponent } from '../tabs/items/items-editor/items-editor.component';
 import { ItemsComponent } from '../tabs/items/items.component';
@@ -23,6 +24,7 @@ import { HomeComponent } from './home.component';
     HomeComponent,
     DialogsComponent,
     DroptablesComponent,
+    DroptablesEditorComponent,
     ItemsComponent,
     ItemsEditorComponent,
     MapsComponent,

src/app/services/electron.service.ts

@@ -1,6 +1,6 @@
 import { effect, inject, Injectable, signal } from '@angular/core';
 
-import { IModKit } from '../../interfaces';
+import { IEditorMap, IModKit } from '../../interfaces';
 import { ModService } from './mod.service';
 import { NotifyService } from './notify.service';
 
@@ -49,8 +49,8 @@ export class ElectronService {
       this.notifyService[type as keyof NotifyService]({ message: text });
     });
 
-    window.api.receive('newmap', (mapData) => {
-      this.modService.addMap(mapData as { name: string; map: any });
+    window.api.receive('newmap', (mapData: IEditorMap) => {
+      this.modService.addMap(mapData);
     });
 
     window.api.receive('renamemap', (nameData) => {

src/app/services/mod.service.ts

@@ -1,6 +1,11 @@
 import { computed, effect, inject, Injectable, signal } from '@angular/core';
 import { LocalStorageService } from 'ngx-webstorage';
-import { IItemDefinition, IModKit } from '../../interfaces';
+import {
+  IDroptable,
+  IEditorMap,
+  IItemDefinition,
+  IModKit,
+} from '../../interfaces';
 
 export function defaultModKit(): IModKit {
   return {
@@ -32,6 +37,9 @@ export class ModService {
   public modName = computed(() => this.mod().meta.name);
   public modAuthor = computed(() => this.mod().meta.author);
 
+  public availableItems = computed(() => this.mod().items);
+  public availableMaps = computed(() => this.mod().maps);
+
   public json = signal<Record<string, any>>({});
 
   constructor() {
@@ -101,12 +109,12 @@ export class ModService {
     });
   }
 
-  public importMap(incomingMap: { name: string; map: any }) {
+  public importMap(incomingMap: IEditorMap) {
     this.addMap(incomingMap);
     window.api.send('ENSURE_MAP', { ...incomingMap });
   }
 
-  public addMap(incomingMap: { name: string; map: any }) {
+  public addMap(incomingMap: IEditorMap) {
     if (incomingMap.name === 'Template') return;
 
     const mod = this.mod();
@@ -160,7 +168,7 @@ export class ModService {
     this.updateMod(mod);
   }
 
-  public removeMap(removeMap: { name: string; map: any }) {
+  public removeMap(removeMap: IEditorMap) {
     const mod = this.mod();
     const existingMap = mod.maps.findIndex((x) => x.name === removeMap.name);
     if (existingMap !== -1) {
@@ -194,4 +202,29 @@ export class ModService {
 
     this.updateMod(mod);
   }
+
+  // droptable functions
+  public addDroptable(item: IDroptable) {
+    const mod = this.mod();
+    mod.drops.push(item);
+
+    this.updateMod(mod);
+  }
+
+  public editDroptable(oldItem: IDroptable, newItem: IDroptable) {
+    const mod = this.mod();
+    const foundItemIdx = mod.drops.findIndex((i) => i === oldItem);
+    if (foundItemIdx === -1) return;
+
+    mod.drops[foundItemIdx] = newItem;
+
+    this.updateMod(mod);
+  }
+
+  public removeDroptable(item: IDroptable) {
+    const mod = this.mod();
+    mod.drops = mod.drops.filter((i) => i !== item);
+
+    this.updateMod(mod);
+  }
 }

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

@@ -1 +1 @@
-<app-sprite [type]="params.type" [sprite]="params.data.sprite"></app-sprite>
+<app-sprite [type]="params.type" [sprite]="spriteId()"></app-sprite>

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

@@ -1,13 +1,27 @@
-import { Component } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
+import { ModService } from '../../../services/mod.service';
 
 @Component({
   selector: 'app-cell-sprite',
   templateUrl: './cell-sprite.component.html',
   styleUrl: './cell-sprite.component.scss',
 })
 export class CellSpriteComponent implements ICellRendererAngularComp {
+  private modService = inject(ModService);
+  public spriteId = computed(() => {
+    const allItems = this.modService.availableItems();
+
+    if (this.params.fromResult) {
+      return (
+        allItems.find((f) => f.name === this.params.data.result)?.sprite ?? -1
+      );
+    }
+
+    return this.params.data.sprite as number;
+  });
+
   public params!: any;
 
   agInit(params: ICellRendererParams) {

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

@@ -0,0 +1,23 @@
+<div class="relative">
+  <ng-select class="form-control" [items]="values()" [bindValue]="'value'" [(ngModel)]="holiday"
+    placeholder="Select holiday..." (change)="change.emit($event?.value)">
+
+    <ng-template ng-label-tmp let-item="item">
+      <div class="text-white">
+        {{ item.value }}
+      </div>
+    </ng-template>
+
+    <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-holiday/input-holiday.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-holiday',
+  templateUrl: './input-holiday.component.html',
+  styleUrl: './input-holiday.component.scss',
+})
+export class InputHolidayComponent {
+  private electronService = inject(ElectronService);
+  private modService = inject(ModService);
+
+  public holiday = model.required<string>();
+  public label = input<string>('Holiday');
+  public change = output<string>();
+
+  public values = computed(() => {
+    const holidayObj = this.modService.json()['holidaydescs'] as Record<
+      string,
+      any
+    >;
+    return Object.keys(holidayObj ?? {})
+      .sort()
+      .map((t) => ({
+        value: t,
+        desc: holidayObj[t].duration ?? 'No description',
+      }));
+  });
+
+  constructor() {
+    this.electronService.requestJSON('holidaydescs');
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+import { Component, computed, inject, model, output } from '@angular/core';
+import { uniq } from 'lodash';
+import { ModService } from '../../../services/mod.service';
+
+@Component({
+  selector: 'app-input-map',
+  templateUrl: './input-map.component.html',
+  styleUrl: './input-map.component.scss',
+})
+export class InputMapComponent {
+  private modService = inject(ModService);
+
+  public map = model.required<string>();
+  public change = output<string>();
+
+  public values = computed(() =>
+    uniq(this.modService.mod().maps.map((m) => m.name)).sort()
+  );
+}

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

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

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

@@ -0,0 +1,21 @@
+import { Component, computed, inject, model, output } from '@angular/core';
+import { uniq } from 'lodash';
+import { ModService } from '../../../services/mod.service';
+
+@Component({
+  selector: 'app-input-region',
+  templateUrl: './input-region.component.html',
+  styleUrl: './input-region.component.scss',
+})
+export class InputRegionComponent {
+  private modService = inject(ModService);
+
+  public region = model.required<string>();
+  public change = output<string>();
+
+  public values = computed(() =>
+    uniq(
+      this.modService.mod().maps.map((m) => m.map.properties.region as string)
+    ).sort()
+  );
+}

src/app/shared/shared.module.ts

@@ -25,6 +25,9 @@ import { InputTraitComponent } from './components/input-trait/input-trait.compon
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
 import { SpriteComponent } from './components/sprite/sprite.component';
 import { WebviewDirective } from './directives/';
+import { InputMapComponent } from './components/input-map/input-map.component';
+import { InputRegionComponent } from './components/input-region/input-region.component';
+import { InputHolidayComponent } from './components/input-holiday/input-holiday.component';
 
 @NgModule({
   declarations: [
@@ -47,6 +50,9 @@ import { WebviewDirective } from './directives/';
     InputClassComponent,
     EditorViewTableComponent,
     EditorBaseTableComponent,
+    InputMapComponent,
+    InputRegionComponent,
+    InputHolidayComponent,
   ],
   imports: [
     CommonModule,
@@ -76,6 +82,9 @@ import { WebviewDirective } from './directives/';
     InputClassComponent,
     EditorViewTableComponent,
     EditorBaseTableComponent,
+    InputMapComponent,
+    InputRegionComponent,
+    InputHolidayComponent,
   ],
 })
 export class SharedModule {}