closes #14

package.json

@@ -37,11 +37,14 @@
     "@ng-icons/heroicons": "29.3.0",
     "@ng-select/ng-select": "13.5.2",
     "@ngneat/overview": "6.0.0",
+    "@ngstack/code-editor": "8.0.0",
     "@ngxpert/hot-toast": "3.0.0",
     "@sweetalert2/ngx-sweetalert2": "12.4.0",
     "@sweetalert2/theme-dark": "5.0.17",
     "ag-grid-angular": "32.0.2",
+    "js-yaml": "4.1.0",
     "lodash": "4.17.21",
+    "monaco-editor": "0.50.0",
     "ngx-float-ui": "18.0.1",
     "ngx-webstorage": "18.0.0",
     "rxjs": "7.8.1",
@@ -60,6 +63,7 @@
     "@angular/cli": "18.1.3",
     "@angular/compiler-cli": "18.1.3",
     "@tailwindcss/forms": "0.5.7",
+    "@types/js-yaml": "4.0.9",
     "@types/lodash": "4.17.7",
     "@types/node": "20.12.7",
     "@types/uuid": "10.0.0",

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { HomeModule } from './home/home.module';
 
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core';
+import { CodeEditorModule } from '@ngstack/code-editor';
 import { provideHotToastConfig } from '@ngxpert/hot-toast';
 import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import {
@@ -48,6 +49,7 @@ import { appIcons } from './app.icons';
     NgIconsModule.withIcons({
       ...appIcons,
     }),
+    CodeEditorModule.forRoot(),
   ],
   providers: [
     provideHttpClient(withInterceptorsFromDi()),

src/app/helpers/dialog.ts

@@ -0,0 +1,48 @@
+import { INPCScript } from '../../interfaces';
+import { id } from './id';
+
+export const defaultNPCScript: () => INPCScript = () => ({
+  _id: id(),
+  tag: undefined as unknown as string,
+  name: '',
+  affiliation: '',
+  hostility: 'Never',
+  allegiance: 'Adventurers',
+  alignment: 'neutral',
+  level: 1,
+  hp: {
+    min: 100000,
+    max: 100000,
+  },
+  mp: {
+    min: 10000,
+    max: 10000,
+  },
+  otherStats: {},
+  usableSkills: [],
+  items: {
+    equipment: {
+      rightHand: undefined as unknown as string,
+      leftHand: undefined as unknown as string,
+      head: undefined as unknown as string,
+      neck: undefined as unknown as string,
+      ear: undefined as unknown as string,
+      waist: undefined as unknown as string,
+      wrists: undefined as unknown as string,
+      ring1: undefined as unknown as string,
+      ring2: undefined as unknown as string,
+      hands: undefined as unknown as string,
+      feet: undefined as unknown as string,
+      armor: undefined as unknown as string,
+      robe1: undefined as unknown as string,
+      robe2: undefined as unknown as string,
+      trinket: undefined as unknown as string,
+      potion: undefined as unknown as string,
+      ammo: undefined as unknown as string,
+    },
+  },
+  dialog: {
+    keyword: {},
+  },
+  behaviors: [],
+});

src/app/home/home.component.html

@@ -50,9 +50,9 @@
 <div class="root-body">
   <div role="tablist" class="tabs tabs-boxed rounded-none">
 
-    @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
+    @for(tab of tabOrder; track tab.name; let i = $index) {
+    <a role="tab" class="tab" [class.tab-disabled]="!electronService.isLoaded()" [class.tab-active]="activeTab() === i"
+      (click)="changeTab(i)">{{ tab.name
       }} ({{ tab.count() }})</a>
     }
 
@@ -73,35 +73,35 @@
     <div class="card bg-base-100 w-full shadow-xl">
       <div class="card-body">
         @switch (activeTab()) {
-        @case ('Maps') {
+        @case (0) {
         <app-maps class="h-full"></app-maps>
         }
 
-        @case ('Items') {
+        @case (1) {
         <app-items class="h-full"></app-items>
         }
 
-        @case ('NPCs') {
+        @case (2) {
         <app-npcs class="h-full"></app-npcs>
         }
 
-        @case ('Droptables') {
+        @case (3) {
         <app-droptables class="h-full"></app-droptables>
         }
 
-        @case ('Recipes') {
+        @case (4) {
         <app-recipes class="h-full"></app-recipes>
         }
 
-        @case ('Spawners') {
+        @case (5) {
         <app-spawners class="h-full"></app-spawners>
         }
 
-        @case ('Dialogs') {
+        @case (6) {
         <app-dialogs class="h-full"></app-dialogs>
         }
 
-        @case ('Quests') {
+        @case (7) {
         <app-quests class="h-full"></app-quests>
         }
 

src/app/home/home.component.ts

@@ -15,7 +15,7 @@ export class HomeComponent {
   public electronService = inject(ElectronService);
   public modService = inject(ModService);
 
-  public activeTab = signal<string>('Maps');
+  public activeTab = signal<number>(0);
 
   public tabOrder = [
     { name: 'Maps', count: computed(() => this.modService.mod().maps.length) },
@@ -47,11 +47,11 @@ export class HomeComponent {
   ];
 
   constructor() {
-    const lastTab = (this.localStorage.retrieve('lasttab') as string) || 'Maps';
+    const lastTab = (this.localStorage.retrieve('lasttab') as number) ?? 0;
     this.activeTab.set(lastTab);
   }
 
-  changeTab(newTab: string) {
+  changeTab(newTab: number) {
     this.activeTab.set(newTab);
 
     this.localStorage.store('lasttab', newTab);

src/app/home/home.module.ts

@@ -4,10 +4,12 @@ import { NgModule } from '@angular/core';
 import { HomeRoutingModule } from './home-routing.module';
 
 import { NgIconsModule } from '@ng-icons/core';
+import { CodeEditorModule } from '@ngstack/code-editor';
 import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import { AgGridModule } from 'ag-grid-angular';
 import { NgxFloatUiModule } from 'ngx-float-ui';
 import { SharedModule } from '../shared/shared.module';
+import { DialogsEditorComponent } from '../tabs/dialogs/dialogs-editor/dialogs-editor.component';
 import { DialogsComponent } from '../tabs/dialogs/dialogs.component';
 import { DroptablesEditorComponent } from '../tabs/droptables/droptables-editor/droptables-editor.component';
 import { DroptablesComponent } from '../tabs/droptables/droptables.component';
@@ -16,13 +18,13 @@ import { ItemsComponent } from '../tabs/items/items.component';
 import { MapsComponent } from '../tabs/maps/maps.component';
 import { NpcsEditorComponent } from '../tabs/npcs/npcs-editor/npcs-editor.component';
 import { NpcsComponent } from '../tabs/npcs/npcs.component';
+import { QuestsEditorComponent } from '../tabs/quests/quests-editor/quests-editor.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 { SpawnersEditorComponent } from '../tabs/spawners/spawners-editor/spawners-editor.component';
 import { SpawnersComponent } from '../tabs/spawners/spawners.component';
 import { HomeComponent } from './home.component';
-import { SpawnersEditorComponent } from '../tabs/spawners/spawners-editor/spawners-editor.component';
-import { QuestsEditorComponent } from '../tabs/quests/quests-editor/quests-editor.component';
 
 @NgModule({
   declarations: [
@@ -41,6 +43,7 @@ import { QuestsEditorComponent } from '../tabs/quests/quests-editor/quests-edito
     NpcsEditorComponent,
     SpawnersEditorComponent,
     QuestsEditorComponent,
+    DialogsEditorComponent,
   ],
   imports: [
     CommonModule,
@@ -50,7 +53,8 @@ import { QuestsEditorComponent } from '../tabs/quests/quests-editor/quests-edito
     AgGridModule,
     NgxFloatUiModule,
     NgIconsModule,
+    CodeEditorModule,
   ],
-  exports: [NpcsEditorComponent, SpawnersEditorComponent, QuestsEditorComponent],
+  exports: [],
 })
 export class HomeModule {}

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

@@ -20,7 +20,7 @@ type ItemModel = { category: string; data: IItemDefinition; value: string };
 export class InputItemComponent implements OnInit {
   private modService = inject(ModService);
 
-  public item = model.required<IItemDefinition | undefined>();
+  public item = model<IItemDefinition | undefined>();
   public label = input<string>('Item');
   public defaultValue = input<string>();
   public change = output<string>();

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

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

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

@@ -0,0 +1,28 @@
+import { Component, computed, inject, model, output } from '@angular/core';
+import { ModService } from '../../../services/mod.service';
+
+@Component({
+  selector: 'app-input-mapnpc',
+  templateUrl: './input-mapnpc.component.html',
+  styleUrl: './input-mapnpc.component.scss',
+})
+export class InputMapnpcComponent {
+  private modService = inject(ModService);
+
+  public tag = model.required<string | undefined>();
+  public change = output<string>();
+
+  public values = computed(() => {
+    const maps = this.modService.availableMaps();
+    return [
+      ...new Set(
+        maps.flatMap(
+          (m) =>
+            m.map.layers[9].objects.map(
+              (npc: any) => npc.properties.tag as string
+            ) as string
+        )
+      ),
+    ].sort();
+  });
+}

src/app/shared/shared.module.ts

@@ -42,6 +42,7 @@ import { InputSfxComponent } from './components/input-sfx/input-sfx.component';
 import { InputNpcComponent } from './components/input-npc/input-npc.component';
 import { InputQuesttypeComponent } from './components/input-questtype/input-questtype.component';
 import { InputQuestrewardComponent } from './components/input-questreward/input-questreward.component';
+import { InputMapnpcComponent } from './components/input-mapnpc/input-mapnpc.component';
 
 @NgModule({
   declarations: [
@@ -80,6 +81,7 @@ import { InputQuestrewardComponent } from './components/input-questreward/input-
     InputNpcComponent,
     InputQuesttypeComponent,
     InputQuestrewardComponent,
+    InputMapnpcComponent,
   ],
   imports: [
     CommonModule,
@@ -126,6 +128,7 @@ import { InputQuestrewardComponent } from './components/input-questreward/input-
     InputNpcComponent,
     InputQuesttypeComponent,
     InputQuestrewardComponent,
+    InputMapnpcComponent,
   ],
 })
 export class SharedModule {}