closes #8

src/app/app.icons.ts

@@ -1,8 +1,11 @@
 import {
   heroArrowDownOnSquare,
+  heroArrowPathRoundedSquare,
   heroArrowsRightLeft,
   heroDocumentDuplicate,
   heroDocumentText,
+  heroFaceFrown,
+  heroFaceSmile,
   heroMinus,
   heroPencil,
   heroPlus,
@@ -18,4 +21,7 @@ export const appIcons = {
   heroMinus,
   heroTrash,
   heroArrowsRightLeft,
+  heroFaceFrown,
+  heroFaceSmile,
+  heroArrowPathRoundedSquare,
 };

src/app/helpers/npc.ts

@@ -69,12 +69,16 @@ export const defaultNPC: () => INPCDefinition = () => ({
     spawn: {
       messages: [''],
       sfx: {
-        name: '',
+        name: undefined as unknown as string,
         maxChance: 0,
       },
     },
     combat: {
       messages: [],
+      sfx: {
+        name: undefined as unknown as string,
+        maxChance: 0,
+      },
     },
   },
   items: {
@@ -100,6 +104,20 @@ export const defaultNPC: () => INPCDefinition = () => ({
       ammo: [],
     },
   },
+  allegianceReputation: {
+    Adventurers: 0,
+    Enemy: 0,
+    GM: 0,
+    NaturalResource: 0,
+    None: 0,
+    Pirates: 0,
+    Royalty: 0,
+    Townsfolk: 0,
+    Underground: 0,
+    Wilderness: 0,
+  },
   repMod: [],
   skills: {},
+  summonSkillModifiers: {},
+  summonStatModifiers: {},
 });

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

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

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

@@ -0,0 +1,14 @@
+import { Component, model, output } from '@angular/core';
+import { ItemSlot, ItemSlotType } from '../../../../interfaces';
+
+@Component({
+  selector: 'app-input-itemslot',
+  templateUrl: './input-itemslot.component.html',
+  styleUrl: './input-itemslot.component.scss',
+})
+export class InputItemslotComponent {
+  public itemSlot = model.required<string | undefined>();
+  public change = output<ItemSlotType>();
+
+  public values = [...Object.values(ItemSlot).sort()];
+}

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

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

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

@@ -0,0 +1,52 @@
+import { Component, input, model, output } from '@angular/core';
+
+@Component({
+  selector: 'app-input-sfx',
+  templateUrl: './input-sfx.component.html',
+  styleUrl: './input-sfx.component.scss',
+})
+export class InputSfxComponent {
+  public sfx = model.required<string | undefined>();
+  public change = output<string>();
+
+  public label = input<string>('SFX');
+
+  public values = [
+    'combat-block-armor',
+    'combat-block-weapon',
+    'combat-die',
+    'combat-hit-melee',
+    'combat-hit-spell',
+    'combat-kill',
+    'combat-miss',
+    'combat-special-blunderbuss',
+
+    'env-door-close',
+    'env-door-open',
+    'env-stairs',
+
+    'monster-bear',
+    'monster-bird',
+    'monster-dragon',
+    'monster-ghost',
+    'monster-goblin',
+    'monster-rocks',
+    'monster-skeleton',
+    'monster-turkey',
+    'monster-wolf',
+
+    'spell-aoe-fire',
+    'spell-aoe-frost',
+    'spell-buff-magical',
+    'spell-buff',
+    'spell-buff-physical',
+    'spell-buff-protection',
+    'spell-conjure',
+    'spell-debuff-give',
+    'spell-debuff-receive',
+    'spell-heal',
+    'spell-sight-effect',
+    'spell-special-revive',
+    'spell-special-teleport',
+  ];
+}

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

@@ -7,7 +7,7 @@ import { Skill } from '../../../../interfaces';
   styleUrl: './input-skill.component.scss',
 })
 export class InputSkillComponent {
-  public skill = model.required<string>();
+  public skill = model.required<string | undefined>();
   public label = input<string>('Skill');
   public change = output<string>();
 

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

@@ -2,5 +2,5 @@
   <ng-select class="form-control" [items]="values()" [(ngModel)]="stat" placeholder="Select stat..."
     (change)="change.emit($event)"></ng-select>
 
-  <app-input-floating-label>Stat</app-input-floating-label>
+  <app-input-floating-label>{{ label() }}</app-input-floating-label>
 </div>

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

@@ -9,6 +9,7 @@ import { coreStats, extraStats } from '../../../helpers';
 })
 export class InputStatComponent {
   public stat = model.required<StatType | undefined>();
+  public label = input<string>('Stat');
   public change = output<ItemClassType>();
   public allowCore = input<boolean>(true);
   public allowExtra = input<boolean>(true);

src/app/shared/shared.module.ts

@@ -37,6 +37,8 @@ import { InputHostilityComponent } from './components/input-hostility/input-host
 import { InputAllegianceComponent } from './components/input-allegiance/input-allegiance.component';
 import { InputCategoryComponent } from './components/input-category/input-category.component';
 import { InputChallengeratingComponent } from './components/input-challengerating/input-challengerating.component';
+import { InputItemslotComponent } from './components/input-itemslot/input-itemslot.component';
+import { InputSfxComponent } from './components/input-sfx/input-sfx.component';
 
 @NgModule({
   declarations: [
@@ -70,6 +72,8 @@ import { InputChallengeratingComponent } from './components/input-challengeratin
     InputAllegianceComponent,
     InputCategoryComponent,
     InputChallengeratingComponent,
+    InputItemslotComponent,
+    InputSfxComponent,
   ],
   imports: [
     CommonModule,
@@ -111,6 +115,8 @@ import { InputChallengeratingComponent } from './components/input-challengeratin
     InputAllegianceComponent,
     InputCategoryComponent,
     InputChallengeratingComponent,
+    InputItemslotComponent,
+    InputSfxComponent,
   ],
 })
 export class SharedModule {}

src/app/tabs/items/items-editor/items-editor.component.html

@@ -160,7 +160,7 @@
         </div>
       </div>
 
-      <div class="form-column">
+      <div class="form-column button-column">
         <div class="form-row w-full flex justify-end">
           <button class="btn btn-accent btn-sm" [disabled]="!currentStat() || doesItemHaveCurrentStat()"
             (click)="addStat(currentStat())">
@@ -277,7 +277,7 @@
         </div>
       </div>
 
-      <div class="form-column">
+      <div class="form-column button-column">
         <div class="form-row w-full flex justify-end">
           <button class="btn btn-accent btn-sm" (click)="addContainedItem()" [disabled]="!currentItem()">
             <ng-icon name="heroPlus"></ng-icon>
@@ -301,7 +301,7 @@
         </div>
       </div>
 
-      <div class="form-column">
+      <div class="form-column button-column">
         <div class="form-row w-full flex justify-end">
           <button class="ml-1 btn btn-error btn-sm" (click)="removeContainedItem($index)">
             <ng-icon name="heroMinus"></ng-icon>