From 959111b91675ed8e84f4f21509399d17e88c5295 Mon Sep 17 00:00:00 2001
From: Kyle Kemp <kyle@seiyria.com>
Date: Thu, 15 Aug 2024 10:14:08 -0500
Subject: [PATCH] closes #27

---
 .../sprite-with-inline-name.component.html    |  5 +++
 .../sprite-with-inline-name.component.scss    |  0
 .../sprite-with-inline-name.component.ts      | 32 +++++++++++++++++++
 src/app/shared/shared.module.ts               |  3 ++
 .../droptables-editor.component.html          |  2 +-
 .../items-editor/items-editor.component.html  |  2 +-
 .../quests-editor.component.html              |  4 +--
 .../spawners-editor.component.html            |  2 +-
 8 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.html
 create mode 100644 src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.scss
 create mode 100644 src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.ts

diff --git a/src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.html b/src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.html
new file mode 100644
index 0000000..557e756
--- /dev/null
+++ b/src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.html
@@ -0,0 +1,5 @@
+<div class="flex relative">
+  <app-sprite class="absolute -top-5 -left-5" [scale]="0.5" [type]="type()" [sprite]="sprite()"></app-sprite>
+
+  <span class="ml-7">{{ name() }}</span>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.scss b/src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.ts b/src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.ts
new file mode 100644
index 0000000..c2b2b6d
--- /dev/null
+++ b/src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.ts
@@ -0,0 +1,32 @@
+import { Component, computed, inject, input } from '@angular/core';
+import { ModService } from '../../../services/mod.service';
+
+@Component({
+  selector: 'app-sprite-with-inline-name',
+  templateUrl: './sprite-with-inline-name.component.html',
+  styleUrl: './sprite-with-inline-name.component.scss',
+})
+export class SpriteWithInlineNameComponent {
+  private modService = inject(ModService);
+
+  public name = input.required<string>();
+  public type = input.required<'items' | 'creatures'>();
+
+  public sprite = computed(() => {
+    const mod = this.modService.mod();
+    const name = this.name();
+    const type = this.type();
+
+    if (type === 'items') {
+      const foundItem = mod.items.find((i) => i.name === name);
+      return foundItem?.sprite ?? -1;
+    }
+
+    if (type === 'creatures') {
+      const foundNpc = mod.npcs.find((i) => i.npcId === name);
+      return foundNpc?.sprite[0] ?? -1;
+    }
+
+    return -1;
+  });
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 0bfd336..2afe97d 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -43,6 +43,7 @@ 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';
+import { SpriteWithInlineNameComponent } from './components/sprite-with-inline-name/sprite-with-inline-name.component';
 
 @NgModule({
   declarations: [
@@ -82,6 +83,7 @@ import { InputMapnpcComponent } from './components/input-mapnpc/input-mapnpc.com
     InputQuesttypeComponent,
     InputQuestrewardComponent,
     InputMapnpcComponent,
+    SpriteWithInlineNameComponent,
   ],
   imports: [
     CommonModule,
@@ -129,6 +131,7 @@ import { InputMapnpcComponent } from './components/input-mapnpc/input-mapnpc.com
     InputQuesttypeComponent,
     InputQuestrewardComponent,
     InputMapnpcComponent,
+    SpriteWithInlineNameComponent,
   ],
 })
 export class SharedModule {}
diff --git a/src/app/tabs/droptables/droptables-editor/droptables-editor.component.html b/src/app/tabs/droptables/droptables-editor/droptables-editor.component.html
index 9ab921d..56d094e 100644
--- a/src/app/tabs/droptables/droptables-editor/droptables-editor.component.html
+++ b/src/app/tabs/droptables/droptables-editor/droptables-editor.component.html
@@ -55,7 +55,7 @@
     <div class="form-row split">
       <div class="form-column">
         <div class="form-row">
-          {{ drop.result }}
+          <app-sprite-with-inline-name [name]="drop.result" type="items"></app-sprite-with-inline-name>
         </div>
       </div>
 
diff --git a/src/app/tabs/items/items-editor/items-editor.component.html b/src/app/tabs/items/items-editor/items-editor.component.html
index 90b720c..90a0e4d 100644
--- a/src/app/tabs/items/items-editor/items-editor.component.html
+++ b/src/app/tabs/items/items-editor/items-editor.component.html
@@ -290,7 +290,7 @@
     <div class="form-row split">
       <div class="form-column">
         <div class="form-row pl-1">
-          {{ item.result }}
+          <app-sprite-with-inline-name [name]="item.result" type="items"></app-sprite-with-inline-name>
         </div>
       </div>
 
diff --git a/src/app/tabs/quests/quests-editor/quests-editor.component.html b/src/app/tabs/quests/quests-editor/quests-editor.component.html
index fe537c1..a10728c 100644
--- a/src/app/tabs/quests/quests-editor/quests-editor.component.html
+++ b/src/app/tabs/quests/quests-editor/quests-editor.component.html
@@ -142,7 +142,7 @@
     <div class="form-row split">
       <div class="form-column">
         <div class="form-row">
-          {{ npc }}
+          <app-sprite-with-inline-name [name]="npc" type="creatures"></app-sprite-with-inline-name>
         </div>
       </div>
 
@@ -219,4 +219,4 @@
 
 <app-debug-view>
   {{ editingData | json }}
-</app-debug-view>
+</app-debug-view>
\ No newline at end of file
diff --git a/src/app/tabs/spawners/spawners-editor/spawners-editor.component.html b/src/app/tabs/spawners/spawners-editor/spawners-editor.component.html
index c696486..ea348b5 100644
--- a/src/app/tabs/spawners/spawners-editor/spawners-editor.component.html
+++ b/src/app/tabs/spawners/spawners-editor/spawners-editor.component.html
@@ -231,7 +231,7 @@
     <div class="form-row split">
       <div class="form-column">
         <div class="form-row">
-          {{ npc.result }}
+          <app-sprite-with-inline-name [name]="npc.result" type="creatures"></app-sprite-with-inline-name>
         </div>
       </div>