closes #27

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>

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;
+  });
+}

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 {}

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>
 

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>
 

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>

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>