feat: initiative tracker now displays creature count

src/main.css

@@ -143,6 +143,7 @@
     display: flex;
     justify-content: center;
 }
+
 .creature-view-container .statblock .column {
     max-width: 400px;
     width: 100%;

src/svelte/App.svelte

@@ -225,7 +225,7 @@
                                 1
                             );
                             view.addCreatures(
-                                ...[...Array(number).keys()].map((k) =>
+                                [...Array(number).keys()].map((k) =>
                                     Creature.new(newCreature)
                                 )
                             );

src/svelte/Creature.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher, getContext } from "svelte";
 
-    import { setIcon } from "obsidian";
     import { DEFAULT_UNDEFINED } from "src/utils";
     import type { Creature } from "src/utils/creature";
     import type TrackerView from "src/view";
@@ -10,6 +9,10 @@
     import Status from "./Status.svelte";
 
     export let creature: Creature;
+    console.log(
+        "🚀 ~ file: Creature.svelte ~ line 12 ~ creature",
+        creature.number
+    );
     $: statuses = creature.status;
 
     const dispatch = createEventDispatcher();
@@ -21,6 +24,13 @@
     };
 
     let view = getContext<TrackerView>("view");
+
+    const name = () => {
+        if (creature.number > 0) {
+            return `${creature.name} ${creature.number}`;
+        }
+        return creature.name;
+    };
 </script>
 
 <td class="initiative-container" on:click={(e) => e.stopPropagation()}>
@@ -50,7 +60,7 @@
                         this.blur();
                         return;
                     }
-                }}>{creature.name}</span
+                }}>{name()}</span
             >
         {/if}
     </div>

src/svelte/CreatureControls.svelte

@@ -1,12 +1,6 @@
 <script lang="ts">
     import { ExtraButtonComponent, Menu } from "obsidian";
-    import {
-        DISABLE,
-        ENABLE,
-        MAPMARKER,
-        REMOVE,
-        TAG
-    } from "src/utils";
+    import { DISABLE, ENABLE, MAPMARKER, REMOVE, TAG } from "src/utils";
     import type { Creature } from "src/utils/creature";
     import type TrackerView from "src/view";
     import { createEventDispatcher } from "svelte";
@@ -21,6 +15,7 @@
             .setIcon("vertical-three-dots")
             .setTooltip("Actions");
         hamburger.extraSettingsEl.onclick = (evt) => {
+            evt.stopPropagation();
             const menu = new Menu(view.plugin.app);
             menu.addItem((item) => {
                 item.setIcon(TAG)

src/svelte/Table.svelte

@@ -6,13 +6,10 @@
     import { dndzone } from "svelte-dnd-action";
 
     import CreatureTemplate from "./Creature.svelte";
-    import { createEventDispatcher } from "svelte";
     import { Creature, getId } from "src/utils/creature";
     import { getContext } from "svelte";
     import type TrackerView from "src/view";
 
-    const dispatch = createEventDispatcher();
-
     export let creatures: Creature[] = [];
     export let state: boolean;
 
@@ -53,7 +50,7 @@
             }
         }
         items = e.detail.items;
-        view.creatures = items.map(({ creature }) => creature);
+        view.setCreatures(items.map(({ creature }) => creature));
     }
 
     const openView = (creature: Creature) => {

src/utils/creature.ts

@@ -34,6 +34,7 @@ export class Creature {
     id: string;
     xp: number;
     viewing: boolean = false;
+    number = 0;
     constructor(public creature: HomebrewCreature, initiative: number = 0) {
         this.name = creature.name;
         this._initiative =

src/view.ts

@@ -93,7 +93,7 @@ export default class TrackerView extends ItemView {
 
         this.plugin.combatant.render(creature);
     }
-    public creatures: Creature[] = [];
+    protected creatures: Creature[] = [];
 
     public state: boolean = false;
 
@@ -140,8 +140,7 @@ export default class TrackerView extends ItemView {
             this.newEncounter();
         }
         const { creatures, state, name } = initiativeState;
-        this.creatures = [...creatures.map((c) => Creature.fromJSON(c))];
-
+        this.setCreatures([...creatures.map((c) => Creature.fromJSON(c))]);
         this.name = name;
         if (name) {
             this.setAppState({
@@ -156,11 +155,12 @@ export default class TrackerView extends ItemView {
         });
     }
     private _addCreature(creature: Creature) {
-        this.creatures.push(creature);
+        this.addCreatures([creature], false);
+        /* this.creatures.push(creature);
 
         this.setAppState({
             creatures: this.ordered
-        });
+        }); */
     }
     get condensed() {
         if (this.condense) {
@@ -185,29 +185,51 @@ export default class TrackerView extends ItemView {
         return this.ordered.filter((c) => c.enabled);
     }
 
-    addCreatures(...creatures: Creature[]) {
-        for (let creature of creatures) {
+    addCreatures(creatures: Creature[], trigger = true) {
+        /* for (let creature of creatures) {
             this.creatures.push(creature);
-        }
+        } */
 
-        this.trigger("initiative-tracker:creatures-added", creatures);
+        this.setCreatures([...(this.creatures ?? []), ...(creatures ?? [])]);
+
+        if (trigger)
+            this.trigger("initiative-tracker:creatures-added", creatures);
 
         this.setAppState({
             creatures: this.ordered
         });
     }
 
     removeCreature(...creatures: Creature[]) {
-        for (let creature of creatures) {
-            this.creatures = this.creatures.filter((c) => c != creature);
-        }
+        this.setCreatures(this.creatures.filter((c) => !creatures.includes(c)));
 
         this.trigger("initiative-tracker:creatures-removed", creatures);
         this.setAppState({
             creatures: this.ordered
         });
     }
 
+    setCreatures(creatures: Creature[]) {
+        this.creatures = creatures;
+
+        for (let i = 0; i < this.creatures.length; i++) {
+            const creature = this.creatures[i];
+            if (
+                creature.player ||
+                this.creatures.filter((c) => c.name == creature.name).length ==
+                    1
+            ) {
+                continue;
+            }
+            if (creature.number > 0) continue;
+            const prior = this.creatures
+                .slice(0, i)
+                .filter((c) => c.name == creature.name)
+                .map((c) => c.number);
+            creature.number = prior.length ? Math.max(...prior) + 1 : 1;
+        }
+    }
+
     async newEncounter({
         name,
         players = true,
@@ -230,7 +252,7 @@ export default class TrackerView extends ItemView {
         } else {
             this.creatures = [];
         }
-        if (creatures) this.creatures = [...this.creatures, ...creatures];
+        if (creatures) this.setCreatures([...this.creatures, ...creatures]);
 
         this.name = name;
         if (name) {
@@ -391,6 +413,7 @@ export default class TrackerView extends ItemView {
         }
         if (name) {
             creature.name = name;
+            creature.number = 0;
         }
         if (hp) {
             creature.hp += Number(hp);