Merge pull request #38 from colecrouter/dnd

colecrouter · Nov 22, 2024 · 18943d5 · 18943d5
2 parents 5c0e805 + 607197a
commit 18943d5
Show file tree

Hide file tree

Showing 12 changed files with 229 additions and 206 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
 		"@sveltejs/adapter-static": "^3.0.6",
 		"@sveltejs/kit": "^2.7.3",
 		"@testing-library/svelte": "^5.2.4",
+		"@thisux/sveltednd": "^0.0.16",
 		"@total-typescript/ts-reset": "^0.5.1",
 		"@types/node": "^18.19.59",
 		"@types/wicg-file-system-access": "^2020.9.6",
@@ -37,4 +38,4 @@
 		"vitest": "^2.1.4"
 	},
 	"type": "module"
-}
+}
diff --git a/src/lib/proxies/Inventory.ts b/src/lib/proxies/Inventory.ts
@@ -23,11 +23,13 @@ export class Inventory {
         return new Item(raw);
     }
 
-    setItem(index: ParentIndex, value: Item) {
+    setItem(index: ParentIndex, value: Item | undefined) {
         if (typeof index === "number") {
-            this.raw.items.Item[index] = value.raw;
+            // @ts-expect-error
+            this.raw.items.Item[index] = value ? value.raw : nil;
         } else {
-            this.raw[index] = value.raw;
+            // @ts-expect-error
+            this.raw[index] = value ? value.raw : nil;
         }
     }
 

diff --git a/src/routes/(edit)/inventory/+page.svelte b/src/routes/(edit)/inventory/+page.svelte
@@ -1,18 +1,45 @@
 <script lang="ts">
     import { ItemData } from "$lib/ItemData";
     import type { ParentIndex } from "$lib/ItemParentIndex";
-    // biome-ignore lint/style/useImportType: bug(?) static method being used below
     import { Item } from "$lib/proxies/Item";
     import { saveManager } from "$lib/save.svelte";
     import UiContainer from "$lib/ui/UIContainer.svelte";
+    import {
+        type DragDropState,
+        draggable,
+        droppable,
+    } from "@thisux/sveltednd";
     import CharacterView from "./CharacterView.svelte";
+    import ItemSlot from "./ItemSlot.svelte";
+    import ItemSprite from "./ItemSprite.svelte";
     import ItemView from "./ItemView.svelte";
-    import SmallItem from "./SmallItem.svelte";
 
-    let selectedItem: Item | undefined = $state();
-    let selectedIndex: ParentIndex = $state(0);
     const save = saveManager.save;
     if (!save) throw new Error("No save data found");
+    let selectedIndex: ParentIndex = $state(0);
+    let selectedItem = $derived(save.player.inventory.getItem(selectedIndex));
+
+    function handleDrop(state: DragDropState) {
+        if (!save) return;
+        const { sourceContainer, targetContainer } = state;
+
+        const sourceIndex = Number(sourceContainer);
+        const targetIndex = Number(targetContainer);
+        const currentItem = save.player.inventory.getItem(sourceIndex);
+        const swappingItem = save.player.inventory.getItem(targetIndex);
+
+        if (targetContainer && sourceContainer) {
+            save.player.inventory.setItem(sourceIndex, swappingItem);
+            save.player.inventory.setItem(targetIndex, currentItem);
+        }
+
+        selectedIndex = targetIndex;
+    }
+
+    function handleClick(index: number) {
+        if (!save) return;
+        selectedIndex = index;
+    }
 </script>
 
 <!-- Data list for adding new items -->
@@ -27,24 +54,44 @@
     <UiContainer>
         <div class="item-grid">
             {#each save.player.inventory.items as item, index}
-                <SmallItem
-                    {item}
-                    {index}
-                    bind:selectedItem
-                    bind:selectedIndex
-                />
+                <div
+                    use:droppable={{
+                        container: index.toString(),
+                        callbacks: {
+                            onDrop: handleDrop,
+                        },
+                    }}
+                    onclick={() => handleClick(index)}
+                    role="gridcell"
+                    tabindex="0"
+                    onkeydown={(e) => {
+                        if (e.key === "Enter") handleClick(index);
+                    }}
+                    data-testid={`slot-${index}`}
+                >
+                    <ItemSlot
+                        data-testid={`item-${index}`}
+                        active={index === selectedIndex}
+                    >
+                        <div
+                            use:draggable={{
+                                container: index.toString(),
+                                dragData: "asd",
+                            }}
+                            data-testid={`draggable-${index}`}
+                        >
+                            <ItemSprite {item} />
+                        </div>
+                    </ItemSlot>
+                </div>
             {/each}
         </div>
     </UiContainer>
 
     <!-- Character View -->
     <UiContainer>
         {#if save.player}
-            <CharacterView
-                player={save.player}
-                bind:selectedIndex
-                bind:selectedItem
-            />
+            <CharacterView player={save.player} bind:selectedIndex />
         {/if}
     </UiContainer>
 
@@ -56,11 +103,9 @@
             createItem={(item) => {
                 const newItem = Item.fromName(item);
                 save.player.inventory.setItem(selectedIndex, newItem);
-                selectedItem = newItem;
             }}
             deleteItem={() => {
                 save.player.inventory.deleteItem(selectedIndex);
-                selectedItem = undefined; // Clear the editor
             }}
         />
     </UiContainer>
@@ -73,8 +118,4 @@
         grid-auto-rows: 32px;
         grid-template-rows: 48px auto auto;
     }
-
-    :global([type="number"]) {
-        width: 6em;
-    }
 </style>
diff --git a/src/routes/(edit)/inventory/BigItem.svelte b/src/routes/(edit)/inventory/BigItem.svelte
diff --git a/src/routes/(edit)/inventory/CharacterView.svelte b/src/routes/(edit)/inventory/CharacterView.svelte
@@ -1,66 +1,44 @@
 <script lang="ts">
     import type { ParentIndex } from "$lib/ItemParentIndex";
     import type { Farmer } from "$lib/proxies/Farmer";
-    import type { Item } from "$lib/proxies/Item";
     import Preview from "../appearance/Preview.svelte";
-    import SmallItem from "./SmallItem.svelte";
-
+    import ItemSlot from "./ItemSlot.svelte";
+    import ItemSprite from "./ItemSprite.svelte";
     interface Props {
         player: Farmer;
-        selectedItem: Item | undefined;
         selectedIndex: ParentIndex;
     }
 
-    let {
-        player = $bindable(),
-        selectedItem = $bindable(),
-        selectedIndex = $bindable(),
-    }: Props = $props();
+    let { player = $bindable(), selectedIndex = $bindable() }: Props = $props();
+
+    function handleClick(index: ParentIndex) {
+        selectedIndex = index;
+    }
 </script>
 
+{#snippet slot(index: ParentIndex)}
+    <ItemSlot
+        data-testid={`item-${index}`}
+        onclick={() => handleClick(index)}
+        active={selectedIndex === index}
+    >
+        <ItemSprite item={player.inventory.getItem(index)} />
+    </ItemSlot>
+{/snippet}
+
 <div class="character-details">
     <div class="character-inner">
         <div class="character-group">
             <div class="character-armor">
-                <SmallItem
-                    item={player.inventory.leftRing}
-                    index={"leftRing"}
-                    bind:selectedItem
-                    bind:selectedIndex
-                />
-                <SmallItem
-                    item={player.inventory.rightRing}
-                    index={"rightRing"}
-                    bind:selectedItem
-                    bind:selectedIndex
-                />
-                <SmallItem
-                    item={player.inventory.boots}
-                    index={"boots"}
-                    bind:selectedItem
-                    bind:selectedIndex
-                />
+                {@render slot("leftRing")}
+                {@render slot("rightRing")}
+                {@render slot("boots")}
             </div>
             <Preview {player} />
             <div class="character-armor">
-                <SmallItem
-                    item={player.inventory.hat}
-                    index={"hat"}
-                    bind:selectedItem
-                    bind:selectedIndex
-                />
-                <SmallItem
-                    item={player.inventory.shirt}
-                    index={"shirtItem"}
-                    bind:selectedItem
-                    bind:selectedIndex
-                />
-                <SmallItem
-                    item={player.inventory.pants}
-                    index={"pantsItem"}
-                    bind:selectedItem
-                    bind:selectedIndex
-                />
+                {@render slot("hat")}
+                {@render slot("shirtItem")}
+                {@render slot("pantsItem")}
             </div>
         </div>
 
@@ -123,4 +101,8 @@
     .character-info > label {
         display: block;
     }
+
+    input[type="number"] {
+        width: 6em;
+    }
 </style>
diff --git a/src/routes/(edit)/inventory/Item.css b/src/routes/(edit)/inventory/Item.css