Added functionality to display effects for the kingdom

public/styles/kingdom-sheet.css

···
 .kmhb-checkbox {
     display: inline;
     float: right;
+}
+
+.kmhb-effects-container {
+    width: 75%;
+    margin: 0 auto;
+}
+
+.kmhb-effects-container h4 {
+    margin-top: 1rem;
+}
+
+.kmhb-effect-name {
+    display: inline;
+    margin: 0;
+}
+
+.kmhb-effect-control {
+    float: right;
+    position: relative;
+    right: 0;
+    border: 0;
+    top: -5px;
+}
+
+.kmhb-effect {
+    margin: 1em 0;
 }

src/kingdom.ts

···
  * @property {number} level - The level of the Kingdom
  * @property {number} xp - The amount of experience points the Kingdom has
  * @property {Record<string, boolean>} activities - Whether or not activities are enabled; if a value isn't found, it should default to `true`
- * @property {any} effects - The effects in the Kingdom; I can't actively link to EffectPF2E, but that is what is stored in here
+ * @property {any[]} effects - The effects in the Kingdom
  */
 export interface Kingdom {
     name: string;
···
     isFame: boolean;
     activities: Record<string, boolean>;
     atWar: boolean;
-    effects: any[]
+    effects: { name: string, slug: string, description: string, rules: any[] }[]
 }
 
 export function createKingdom(): Kingdom {

src/svelte/tabs/effects.svelte

···
 <script lang="ts">
     import type { KingdomActor } from "../../global";
+    import { deleteArrayElement, enrichAndLocalize, enrichText, kmLocalize } from "../../utils";
+    import { socket } from "../../socket";
 
     let { actor }: { actor: KingdomActor } = $props();
+
+    function effectDrop(event: DragEvent): void {
+        event.preventDefault();
+        const data: string | undefined = event.dataTransfer?.getData("text/plain");
+
+        if (data === undefined) {
+            return;
+        }
+
+        let dropped: { type: string, uuid: string };
+
+        try {
+            dropped = JSON.parse(data);
+        } catch {
+            return;
+        }
+
+        if (dropped.type !== "Item") {
+            return;
+        }
+
+        fromUuid(dropped.uuid).then((effect: any): void => {
+            console.log(effect);
+            const currentEffects = actor.getFlag("kingdom-homebrew", "effects") as any[];
+            currentEffects.push({ rules: effect.system.rules, name: effect.name, description: effect.system.description.value, slug: effect.system.slug });
+            socket!.executeAsGM("updateKingdomValue", "effects", actor, currentEffects);
+        });
+    }
+
+    function deleteEffect(event: Event): void {
+        const index: number = parseInt((event.target as HTMLButtonElement).dataset.index!);
+        const array = actor.getFlag("kingdom-homebrew", "effects") as any[];
+        deleteArrayElement(array, index);
+        socket!.executeAsGM("updateKingdomValue", "effects", actor, array);
+    }
 </script>
 
-<p>effects</p>
+<div class="kmhb-effects-container" ondragover={(ev: Event): void => ev.preventDefault()} role="form" ondrop={effectDrop}>
+    <h4>{kmLocalize("sheet", "tab", "effects")}</h4>
+    {#each actor.getFlag("kingdom-homebrew", "effects") as effect, index}
+        <div class="kmhb-effect">
+            <h5 class="kmhb-effect-name" id={`kmhb-${effect.slug}`}>{effect.name}</h5>
+            <button class="kmhb-effect-control" data-tooltip="PF2E.DeleteItemTitle" aria-labelledby={`kmhb-${effect.slug}`} data-index={index} onclick={deleteEffect}>
+                <i class="fa-solid fa-fw fa-trash"></i>
+            </button>
+            {@html await enrichText(effect.description, false)}
+        </div>
+    {/each}
+</div>

src/utils.ts

···
     } else {
         return levelDcs.get(level)!;
     }
+}
+
+export function deleteArrayElement(array: any[], index: number): void {
+    if (index > -1) {
+        array.splice(index, 1);
+    }
 }