closes #69

LandOfTheRair · Aug 24, 2024 · 567be7e · 567be7e
1 parent 0567691
commit 567be7e
Show file tree

Hide file tree

Showing 19 changed files with 851 additions and 8 deletions.
diff --git a/src/app/app.icons.ts b/src/app/app.icons.ts
@@ -11,6 +11,7 @@ import {
   heroFaceSmile,
   heroFire,
   heroInformationCircle,
+  heroMagnifyingGlass,
   heroMinus,
   heroPencil,
   heroPlus,
@@ -34,4 +35,5 @@ export const appIcons = {
   heroFire,
   heroArrowTurnLeftUp,
   heroArrowTurnRightDown,
+  heroMagnifyingGlass,
 };
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -26,6 +26,7 @@
 
             <li class="menu-title"><a>Mod Testing</a></li>
             <li><a (click)="closeMenu()" target="_blank" href="https://rair.land/docs/modkit/">Help</a></li>
+            <li><a (click)="closeMenu(); pinpointService.togglePinpointing()">Pinpoint...</a></li>
             <li>
               <a (click)="closeMenu(); debugService.toggleDebug()">Debug Mode {{ debugService.isDebug() ? '☑' : '☐'
                 }}</a>
@@ -59,6 +60,17 @@
   </div>
 </div>
 
+} @else if(pinpointService.isPinpointing()) {
+<div class="root-body">
+  <div class="root-content p-3">
+    <div class="card bg-base-100 w-full shadow-xl">
+      <div class="card-body">
+        <app-pinpoint></app-pinpoint>
+      </div>
+    </div>
+  </div>
+</div>
+
 } @else {
 <div class="root-body">
   <div role="tablist" class="tabs tabs-boxed rounded-none flex flex-wrap">

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -13,6 +13,7 @@ import { formatMod } from '../helpers/exporter';
 import { DebugService } from '../services/debug.service';
 import { ElectronService } from '../services/electron.service';
 import { ModService } from '../services/mod.service';
+import { PinpointService } from '../services/pinpoint.service';
 
 @Component({
   selector: 'app-home',
@@ -21,6 +22,7 @@ import { ModService } from '../services/mod.service';
 })
 export class HomeComponent {
   private localStorage = inject(LocalStorageService);
+  public pinpointService = inject(PinpointService);
   public debugService = inject(DebugService);
   public electronService = inject(ElectronService);
   public modService = inject(ModService);

diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
@@ -10,6 +10,7 @@ import { AgGridModule } from 'ag-grid-angular';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxFloatUiModule } from 'ngx-float-ui';
 
+import { PinpointComponent } from '../pinpoint/pinpoint.component';
 import { SharedModule } from '../shared/shared.module';
 import { CoresEditorComponent } from '../tabs/cores/cores-editor/cores-editor.component';
 import { CoresComponent } from '../tabs/cores/cores.component';
@@ -60,6 +61,7 @@ import { HomeComponent } from './home.component';
     TraitTreesEditorComponent,
     StemsComponent,
     StemsEditorComponent,
+    PinpointComponent,
   ],
   imports: [
     CommonModule,
@@ -80,6 +82,7 @@ import { HomeComponent } from './home.component';
     TraitTreesEditorComponent,
     StemsComponent,
     StemsEditorComponent,
+    PinpointComponent,
   ],
 })
 export class HomeModule {}
diff --git a/src/app/pinpoint/pinpoint.component.html b/src/app/pinpoint/pinpoint.component.html
@@ -0,0 +1,215 @@
+<div role="tablist" class="tabs tabs-boxed rounded-none">
+
+  @for(tab of tabOrder; track tab.name; let i = $index) {
+  <a role="tab" class="tab" [class.tab-active]="pinpointService.activePinpointTab() === i"
+    (click)="pinpointService.activePinpointTab.set(i)">
+    {{ tab.name }}
+  </a>
+  }
+
+  <div class="tab flex flex-row justify-end">
+    <button class="btn-sm btn btn-success mr-3" (click)="pinpointService.togglePinpointing()">Done</button>
+  </div>
+
+</div>
+
+
+@switch (pinpointService.activePinpointTab()) {
+@case (0) {
+<div class="flex flex-row gap-2 mb-3">
+  <div class="form-column">
+    <div class="form-row">
+      <app-input-map [(map)]="pinpointService.pinpointMap"></app-input-map>
+    </div>
+  </div>
+</div>
+
+<div class="flex flex-row gap-2 flex-wrap w-full">
+  @for(entry of pinpointService.mapInformation(); track $index) {
+  <div class="xl:w-[45%] 2xl:w-[30%]">
+    <div class="flex flex-row">
+      @if(entry.npcName) {
+      <span class="ml-1">
+        <app-sprite-with-inline-name [type]="'creatures'" [name]="entry.npcName"></app-sprite-with-inline-name>
+      </span>
+      } @else {
+      <span class="ml-1">
+        {{ entry.originName }}
+      </span>
+      }
+
+      <span class="ml-1">
+        ➡️
+      </span>
+
+      @if(entry.itemName) {
+      <span class="ml-1">
+        <app-sprite-with-inline-name [type]="'items'" [name]="entry.itemName"></app-sprite-with-inline-name>
+      </span>
+      }
+
+      @if(entry.chance !== -1 && entry.maxChance !== -1) {
+      <span class="ml-1">
+        ({{ entry.chance }}/{{ entry.maxChance }})
+      </span>
+      }
+    </div>
+  </div>
+  }
+</div>
+}
+
+@case (1) {
+<div class="flex flex-row gap-2 mb-3">
+  <div class="form-column">
+    <div class="form-row">
+      <app-input-item (change)="pinpointService.searchItem($event)"
+        [defaultValue]="pinpointService.pinpointItem()"></app-input-item>
+    </div>
+  </div>
+</div>
+
+<div class="flex flex-row gap-2">
+
+  @let itemInfo = pinpointService.itemInformation();
+
+  @if(itemInfo.length === 0) {
+  <div class="flex flex-row gap-2 flex-wrap w-full">
+    <div class="form-column">
+      <div class="form-row">
+        <p>No usages of this item could be found. It may be a lore item that wasn't added to a drop table, or it might
+          be
+          used in NPC dialog (which is not fully searchable).</p>
+      </div>
+    </div>
+  </div>
+  }
+
+  <div class="flex flex-row gap-2 flex-wrap w-full">
+    @for(entry of itemInfo; track $index) {
+    <div class="xl:w-[45%] 2xl:w-[30%]">
+      <div class="flex flex-row">
+
+        @if(entry.npcName) {
+        <span class="ml-1">
+          <app-sprite-with-inline-name [type]="'creatures'" [name]="entry.npcName"></app-sprite-with-inline-name>
+        </span>
+        }
+
+        @if(entry.containingItemName) {
+        <span class="ml-1">
+          <app-sprite-with-inline-name [type]="'items'" [name]="entry.containingItemName"></app-sprite-with-inline-name>
+        </span>
+        }
+
+        @if(entry.recipeName) {
+        <span class="ml-1">
+          RECIPE: {{ entry.recipeName }}
+        </span>
+        }
+
+        @if(entry.questName) {
+        <span class="ml-1">
+          QUEST: {{ entry.questName }}
+        </span>
+        }
+
+        @if(entry.droptableName) {
+        <span class="ml-1">
+          DROPS: {{ entry.droptableName }}
+        </span>
+        }
+
+        @if(entry.npcScriptName) {
+        <span class="ml-1">
+          SCRIPT: {{ entry.npcScriptName }}
+        </span>
+        }
+
+        <span class="ml-1">
+          {{ entry.extraDescription }}
+        </span>
+      </div>
+    </div>
+    }
+  </div>
+</div>
+}
+
+@case (2) {
+<div class="flex flex-row gap-2 mb-3">
+  <div class="form-column">
+    <div class="form-row">
+      <app-input-npc (change)="pinpointService.searchNPC($event)"
+        [defaultValue]="pinpointService.pinpointNPC()"></app-input-npc>
+    </div>
+  </div>
+</div>
+
+<div class="flex flex-row gap-2">
+  @let npcInfo = pinpointService.npcInformation();
+
+  <div class="form-column">
+
+    @if(npcInfo.uses.length === 0) {
+    <div class="flex flex-row gap-2 flex-wrap w-full">
+      <div class="form-column">
+        <div class="form-row">
+          <p>No usages of this NPC could be found. It may be a special event NPC.</p>
+        </div>
+      </div>
+    </div>
+    }
+
+    <div class="flex flex-row gap-2 flex-wrap w-full">
+      @for(entry of npcInfo.uses; track $index) {
+      <div class="w-full">
+        <div class="flex flex-row">
+          @if(entry.questName) {
+          <span class="ml-1">QUEST {{ entry.questName }}</span>
+          }
+
+          @if(entry.spawnerName) {
+          <span class="ml-1">SPAWNER {{ entry.spawnerName }}</span>
+          }
+
+          @if(entry.extraDescription) {
+          <span class="ml-1">{{ entry.extraDescription }}</span>
+          }
+        </div>
+      </div>
+      }
+    </div>
+  </div>
+
+  <div class="form-column">
+    <div class="flex flex-row gap-2 flex-wrap w-full">
+      @for(entry of npcInfo.drops; track $index) {
+      <div class="w-[45%]">
+        <div class="flex flex-row">
+          <span>
+            <app-sprite-with-inline-name [type]="'items'" [name]="entry.result"></app-sprite-with-inline-name>
+          </span>
+
+          @let maxChance = entry.maxChance ?? 1;
+          <span class="ml-1">
+            @if(entry.chance === -1) {
+            (100%)
+            }
+
+            @else if(entry.chance < maxChance) { <!-- -->
+              ({{ entry.chance / maxChance | percent:'1.0-5' }})
+              }
+
+              @else {
+              (100% if equipped)
+              }
+          </span>
+        </div>
+      </div>
+      }
+    </div>
+  </div>
+</div>
+}
+}
diff --git a/src/app/pinpoint/pinpoint.component.scss b/src/app/pinpoint/pinpoint.component.scss
diff --git a/src/app/pinpoint/pinpoint.component.ts b/src/app/pinpoint/pinpoint.component.ts
@@ -0,0 +1,26 @@
+import { Component, inject } from '@angular/core';
+import { PinpointService } from '../services/pinpoint.service';
+
+@Component({
+  selector: 'app-pinpoint',
+  templateUrl: './pinpoint.component.html',
+  styleUrl: './pinpoint.component.scss',
+})
+export class PinpointComponent {
+  public pinpointService = inject(PinpointService);
+
+  public tabOrder = [
+    {
+      name: 'Map',
+    },
+    {
+      name: 'Item',
+    },
+    {
+      name: 'NPC',
+    },
+    {
+      name: 'Spawner',
+    },
+  ];
+}