Hugging Face's logo

Spaces:
Fraser
/
piclets
Running

App Files Community
piclets
File size: 2,364 Bytes 
ce29375
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21805fd
 
ce29375
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<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}
  role="region"
  aria-label="Roster slot {position + 1}"
>
  {#if piclet}
    <DraggablePicletCard 
      instance={piclet}
      {size}
      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>