drag & drop

src/lib/components/Pages/Pictuary.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { getAllMonsters } from '$lib/db/monsters';
-  import { getAllPicletInstances, getRosterPiclets } from '$lib/db/piclets';
+  import { getAllPicletInstances, getRosterPiclets, moveToRoster, swapRosterPositions, moveToStorage } from '$lib/db/piclets';
   import type { Monster, PicletInstance } from '$lib/db/schema';
   import PicletCard from '../Piclets/PicletCard.svelte';
   import EmptySlotCard from '../Piclets/EmptySlotCard.svelte';
   import DiscoveredCard from '../Piclets/DiscoveredCard.svelte';
+  import DraggablePicletCard from '../Piclets/DraggablePicletCard.svelte';
+  import RosterSlot from '../Piclets/RosterSlot.svelte';
   
   let rosterPiclets: PicletInstance[] = $state([]);
   let storagePiclets: PicletInstance[] = $state([]);
   let discoveredMonsters: Monster[] = $state([]);
   let isLoading = $state(true);
+  let currentlyDragging: PicletInstance | null = $state(null);
   
   // Map roster positions for easy access
   let rosterMap = $derived(() => {
@@ -23,20 +26,15 @@
     return map;
   });
   
-  onMount(async () => {
+  async function loadPiclets() {
     try {
-      // Load all piclet instances
       const allInstances = await getAllPicletInstances();
       
-      // Separate roster and storage
       rosterPiclets = allInstances.filter(p => p.isInRoster);
       storagePiclets = allInstances.filter(p => !p.isInRoster);
       
-      // Load all discovered monsters (for now, all generated monsters)
-      // In a real game, this would track which monsters have been encountered
       const allMonsters = await getAllMonsters();
       
-      // Filter out monsters that have been caught (have instances)
       const caughtTypeIds = new Set(allInstances.map(p => p.typeId));
       discoveredMonsters = allMonsters.filter(m => 
         !caughtTypeIds.has(m.name.toLowerCase().replace(/\s+/g, '-'))
@@ -46,28 +44,64 @@
     } finally {
       isLoading = false;
     }
+  }
+  
+  onMount(() => {
+    loadPiclets();
   });
   
   function handleRosterClick(position: number) {
     const piclet = rosterMap().get(position);
     if (piclet) {
-      // TODO: Navigate to piclet detail page
       console.log('View piclet:', piclet);
     } else {
-      // TODO: Show add to roster dialog
       console.log('Add piclet to position:', position);
     }
   }
   
   function handleStorageClick(piclet: PicletInstance) {
-    // TODO: Navigate to piclet detail page
     console.log('View storage piclet:', piclet);
   }
   
   function handleDiscoveredClick(monster: Monster) {
-    // TODO: Navigate to discovered piclet detail page
     console.log('View discovered monster:', monster);
   }
+  
+  function handleDragStart(instance: PicletInstance) {
+    currentlyDragging = instance;
+  }
+  
+  function handleDragEnd() {
+    currentlyDragging = null;
+  }
+  
+  async function handleRosterDrop(position: number, dragData: any) {
+    if (!dragData.instanceId) return;
+    
+    try {
+      const draggedPiclet = [...rosterPiclets, ...storagePiclets].find(p => p.id === dragData.instanceId);
+      if (!draggedPiclet) return;
+      
+      const targetPiclet = rosterMap().get(position);
+      
+      if (dragData.fromRoster && targetPiclet) {
+        // Swap two roster positions
+        await swapRosterPositions(
+          dragData.instanceId,
+          dragData.fromPosition,
+          targetPiclet.id!,
+          position
+        );
+      } else {
+        // Move to roster (possibly replacing existing)
+        await moveToRoster(dragData.instanceId, position);
+      }
+      
+      await loadPiclets();
+    } catch (err) {
+      console.error('Failed to handle drop:', err);
+    }
+  }
 </script>
 
 <div class="pictuary-page">
@@ -99,18 +133,16 @@
         <h2>Roster</h2>
         <div class="roster-grid">
           {#each Array(6) as _, position}
-            {#if rosterMap().has(position)}
-              <PicletCard 
-                instance={rosterMap().get(position)!}
-                size={100}
-                onClick={() => handleRosterClick(position)}
-              />
-            {:else}
-              <EmptySlotCard 
-                size={100}
-                onClick={() => handleRosterClick(position)}
-              />
-            {/if}
+            <RosterSlot
+              {position}
+              piclet={rosterMap().get(position)}
+              size={100}
+              onDrop={handleRosterDrop}
+              onPicletClick={(piclet) => handleRosterClick(position)}
+              onEmptyClick={handleRosterClick}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+            />
           {/each}
         </div>
       </section>
@@ -126,10 +158,13 @@
           </div>
           <div class="horizontal-scroll">
             {#each storagePiclets.slice(0, 10) as piclet}
-              <PicletCard 
+              <DraggablePicletCard
                 instance={piclet}
                 size={100}
+                showDetails={true}
                 onClick={() => handleStorageClick(piclet)}
+                onDragStart={handleDragStart}
+                onDragEnd={handleDragEnd}
               />
             {/each}
           </div>

src/lib/components/Piclets/DraggablePicletCard.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import type { PicletInstance } from '$lib/db/schema';
+  import PicletCard from './PicletCard.svelte';
+  
+  interface Props {
+    instance: PicletInstance;
+    size?: number;
+    showDetails?: boolean;
+    onDragStart?: (instance: PicletInstance) => void;
+    onDragEnd?: () => void;
+    onClick?: () => void;
+  }
+  
+  let { instance, size = 100, showDetails = true, onDragStart, onDragEnd, onClick }: Props = $props();
+  
+  let isDragging = $state(false);
+  
+  function handleDragStart(e: DragEvent) {
+    isDragging = true;
+    
+    // Set drag data
+    e.dataTransfer!.effectAllowed = 'move';
+    e.dataTransfer!.setData('application/json', JSON.stringify({
+      instanceId: instance.id,
+      fromRoster: instance.isInRoster,
+      fromPosition: instance.rosterPosition
+    }));
+    
+    // Create a custom drag image
+    const dragImage = e.currentTarget as HTMLElement;
+    const clone = dragImage.cloneNode(true) as HTMLElement;
+    clone.style.transform = 'scale(1.1)';
+    clone.style.opacity = '0.8';
+    document.body.appendChild(clone);
+    e.dataTransfer!.setDragImage(clone, size / 2, size / 2);
+    setTimeout(() => document.body.removeChild(clone), 0);
+    
+    onDragStart?.(instance);
+  }
+  
+  function handleDragEnd() {
+    isDragging = false;
+    onDragEnd?.();
+  }
+</script>
+
+<div
+  draggable="true"
+  ondragstart={handleDragStart}
+  ondragend={handleDragEnd}
+  class="draggable-wrapper"
+  class:dragging={isDragging}
+>
+  <PicletCard {instance} {size} {showDetails} {onClick} />
+</div>
+
+<style>
+  .draggable-wrapper {
+    cursor: move;
+  }
+  
+  .draggable-wrapper.dragging {
+    opacity: 0.5;
+  }
+  
+  .draggable-wrapper.dragging :global(.piclet-card) {
+    transform: scale(0.9);
+  }
+</style>

src/lib/components/Piclets/EmptySlotCard.svelte

@@ -11,7 +11,7 @@
 <button 
   class="empty-slot"
   class:highlighted={isHighlighted}
-  style="width: {size}px; height: {size}px;"
+  style="width: {size}px; height: {size + 30}px;"
   onclick={onClick}
   type="button"
 >

src/lib/components/Piclets/RosterSlot.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import type { PicletInstance } from '$lib/db/schema';
+  import DraggablePicletCard from './DraggablePicletCard.svelte';
+  import EmptySlotCard from './EmptySlotCard.svelte';
+  
+  interface Props {
+    position: number;
+    piclet?: PicletInstance;
+    size?: number;
+    onDrop?: (position: number, dragData: any) => void;
+    onPicletClick?: (piclet: PicletInstance) => void;
+    onEmptyClick?: (position: number) => void;
+    onDragStart?: (instance: PicletInstance) => void;
+    onDragEnd?: () => void;
+  }
+  
+  let { 
+    position, 
+    piclet, 
+    size = 100, 
+    onDrop, 
+    onPicletClick, 
+    onEmptyClick,
+    onDragStart,
+    onDragEnd 
+  }: Props = $props();
+  
+  let isDragOver = $state(false);
+  let canAcceptDrop = $state(false);
+  
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    
+    // Check if we can accept the drop
+    const data = e.dataTransfer?.getData('application/json');
+    if (data) {
+      isDragOver = true;
+      canAcceptDrop = true;
+      e.dataTransfer!.dropEffect = 'move';
+    }
+  }
+  
+  function handleDragLeave() {
+    isDragOver = false;
+    canAcceptDrop = false;
+  }
+  
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    isDragOver = false;
+    canAcceptDrop = false;
+    
+    const data = e.dataTransfer?.getData('application/json');
+    if (data) {
+      const dragData = JSON.parse(data);
+      onDrop?.(position, dragData);
+    }
+  }
+  
+  function handleClick() {
+    if (piclet) {
+      onPicletClick?.(piclet);
+    } else {
+      onEmptyClick?.(position);
+    }
+  }
+</script>
+
+<div
+  class="roster-slot"
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+  class:drag-over={isDragOver}
+>
+  {#if piclet}
+    <DraggablePicletCard 
+      instance={piclet}
+      {size}
+      showDetails={false}
+      onClick={handleClick}
+      {onDragStart}
+      {onDragEnd}
+    />
+  {:else}
+    <EmptySlotCard 
+      {size}
+      isHighlighted={isDragOver && canAcceptDrop}
+      onClick={handleClick}
+    />
+  {/if}
+</div>
+
+<style>
+  .roster-slot {
+    position: relative;
+  }
+  
+  .roster-slot.drag-over::after {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    border: 2px solid #007bff;
+    border-radius: 16px;
+    background: rgba(0, 123, 255, 0.1);
+    pointer-events: none;
+  }
+</style>