closes #31

src/app/app.icons.ts

@@ -2,6 +2,7 @@ import {
   heroArrowDownOnSquare,
   heroArrowPathRoundedSquare,
   heroArrowsRightLeft,
+  heroArrowTopRightOnSquare,
   heroDocumentDuplicate,
   heroDocumentText,
   heroFaceFrown,
@@ -24,4 +25,5 @@ export const appIcons = {
   heroFaceFrown,
   heroFaceSmile,
   heroArrowPathRoundedSquare,
+  heroArrowTopRightOnSquare,
 };

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

@@ -1,12 +1,37 @@
 <div class="flex flex-row items-center">
 
-  <app-sprite class="w-16 mr-4 bg-gray-400 p-1" [sprite]="sprite()" [type]="type()"></app-sprite>
+  <app-sprite class="w-17 mr-4 bg-gray-400 p-1" [sprite]="sprite()" [type]="type()"></app-sprite>
 
-  <div class="relative">
+  <div class="relative flex">
+    <app-input-floating-label>Sprite</app-input-floating-label>
     <input class="flex-1" [(ngModel)]="sprite" min="0" [step]="step()" type="number" placeholder="Choose sprite..."
       class="input input-sm input-bordered w-full max-w-xs" />
 
-    <app-input-floating-label>Sprite</app-input-floating-label>
+    <button class="ml-1 btn btn-secondary btn-sm" (click)="changeIcon()">
+      <ng-icon name="heroArrowTopRightOnSquare"></ng-icon>
+    </button>
   </div>
 
 </div>
+
+<dialog #iconPicker class="modal">
+  <div class="modal-box w-11/12 max-w-5xl">
+    <h3 class="text-lg font-bold mb-2">Icon Picker</h3>
+
+    <div class="relative flex flex-wrap overflow-y-scroll max-h-[70vh]">
+      @for(icon of iconArray(); track $index) {
+      <app-sprite
+        class="bg-gray-400 p-1 flex-1 m-2 min-w-[70px] min-h-[70px] max-w-[70px] max-h-[70px] outline-2 outline-offset-2 hover:outline-dashed outline-primary"
+        [class.outline]="icon === pickerSprite()" [sprite]="icon" [type]="type()"
+        (click)="pickerSprite.set(icon)"></app-sprite>
+      }
+    </div>
+
+    <div class="modal-action mt-2">
+      <form method="dialog">
+        <button class="btn btn-sm">Close</button>
+        <button class="ml-2 btn btn-primary btn-sm" (click)="confirmNewIcon(pickerSprite())">Pick</button>
+      </form>
+    </div>
+  </div>
+</dialog>

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

@@ -1,4 +1,12 @@
-import { Component, computed, input, model } from '@angular/core';
+import {
+  Component,
+  computed,
+  ElementRef,
+  input,
+  model,
+  signal,
+  viewChild,
+} from '@angular/core';
 
 @Component({
   selector: 'app-input-sprite',
@@ -9,4 +17,29 @@ export class InputSpriteComponent {
   public sprite = model.required<number>();
   public type = input<'creatures' | 'items'>('items');
   public step = computed(() => (this.type() === 'creatures' ? 5 : 1));
+
+  public pickerSprite = signal<number>(0);
+
+  public iconPicker = viewChild<ElementRef<HTMLDialogElement>>('iconPicker');
+
+  public readonly maxSpriteCount = {
+    items: 1057,
+    creatures: 1875,
+  };
+
+  public iconArray = computed(() =>
+    Array(this.maxSpriteCount[this.type()])
+      .fill(0)
+      .map((_, i) => i)
+      .filter((i) => i % this.step() === 0)
+  );
+
+  changeIcon() {
+    this.pickerSprite.set(this.sprite());
+    this.iconPicker()?.nativeElement.showModal();
+  }
+
+  confirmNewIcon(newIcon: number) {
+    this.sprite.set(newIcon);
+  }
 }