closes #72

src/app/helpers/spawner.ts

@@ -29,7 +29,7 @@ export const defaultSpawner: () => ISpawnerData = () => ({
   respectKnowledge: true,
   attributeAddChance: 0,
   shouldBeActive: false,
-  requireEvent: '',
+  requireEvent: undefined as unknown as string,
   maxSpawn: undefined,
   requireHoliday: undefined as unknown as string,
   _paths: '',

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

@@ -0,0 +1,23 @@
+<div class="relative">
+  <ng-select class="form-control" [items]="values()" [bindValue]="'value'" [(ngModel)]="gameEvent"
+    placeholder="Select game event..." (change)="change.emit($event?.value)" [searchFn]="search">
+
+    <ng-template ng-label-tmp let-item="item">
+      <div class="text-white">
+        {{ item.value }}
+      </div>
+    </ng-template>
+
+    <ng-template ng-option-tmp let-item="item">
+      <div class="relative">
+        <div class="text-white">
+          {{ item.value }}
+        </div>
+
+        <p class="text-white text-sm italic">{{ item.desc }}</p>
+      </div>
+    </ng-template>
+  </ng-select>
+
+  <app-input-floating-label>{{ label() }}</app-input-floating-label>
+</div>

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

@@ -0,0 +1,40 @@
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { ModService } from '../../../services/mod.service';
+
+@Component({
+  selector: 'app-input-gameevent',
+  templateUrl: './input-gameevent.component.html',
+  styleUrl: './input-gameevent.component.scss',
+})
+export class InputGameeventComponent {
+  private modService = inject(ModService);
+
+  public gameEvent = model.required<string | undefined>();
+  public label = input<string>('In-Game Event');
+  public change = output<string>();
+
+  public values = computed(() => {
+    const eventObj = this.modService
+      .mod()
+      .cores.find((c) => c.name === 'events')?.json as Record<string, any>;
+    if (!eventObj) return [];
+
+    return Object.keys(eventObj ?? {})
+      .sort()
+      .map((t) => ({
+        value: t,
+        desc: eventObj[t].description ?? 'No description',
+      }));
+  });
+
+  public search(term: string, item: { value: string }) {
+    return item.value.toLowerCase().includes(term.toLowerCase());
+  }
+}

src/app/shared/shared.module.ts

@@ -59,6 +59,7 @@ import { CellIconComponent } from './components/cell-icon/cell-icon.component';
 import { InputMacrotypeComponent } from './components/input-macrotype/input-macrotype.component';
 import { InputBufftypeComponent } from './components/input-bufftype/input-bufftype.component';
 import { EditStatobjectComponent } from './components/edit-statobject/edit-statobject.component';
+import { InputGameeventComponent } from './components/input-gameevent/input-gameevent.component';
 
 @NgModule({
   declarations: [
@@ -110,6 +111,7 @@ import { EditStatobjectComponent } from './components/edit-statobject/edit-stato
     InputMacrotypeComponent,
     InputBufftypeComponent,
     EditStatobjectComponent,
+    InputGameeventComponent,
   ],
   imports: [
     CommonModule,
@@ -172,6 +174,7 @@ import { EditStatobjectComponent } from './components/edit-statobject/edit-stato
     InputMacrotypeComponent,
     InputBufftypeComponent,
     EditStatobjectComponent,
+    InputGameeventComponent,
   ],
 })
 export class SharedModule {}

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

@@ -85,9 +85,7 @@
     <div class="form-row">
       <div class="form-column">
         <div class="form-row">
-          <app-input-floating-label>Required Event</app-input-floating-label>
-          <input [(ngModel)]="editingData.requireEvent" type="text" placeholder="Enter in-game event required..."
-            class="form-input" />
+          <app-input-gameevent [(gameEvent)]="editingData.requireEvent"></app-input-gameevent>
         </div>
       </div>
       <div class="form-column">