support custom card order

3 files changed, 24 insertions, 35 deletions

diff --git a/src/components/CardThumb.svelte b/src/components/CardThumb.svelte
index be6af81..2f722a9 100644
--- a/src/components/CardThumb.svelte
+++ b/src/components/CardThumb.svelte
@@ -3,20 +3,21 @@
     import {setLeftPanelCard} from '../control/left_panel';
     import { cardImageUrl } from '../utils';
 
-    let {id, area} = $props();
+    let {id, area, idx} = $props();
 
     function onhover() {
         setLeftPanelCard(id); 
     }
 
     function onDragStart(e) {
-        e.dataTransfer.setData('text', JSON.stringify({id, area}))
+        e.dataTransfer.setData('text', JSON.stringify({id, area, idx}))
     }
 
 </script>
 
 {#if id}
     <img
+        style="margin:2px;"
         draggable="true"
         onmouseover={onhover}
         onfocus={onhover}
diff --git a/src/components/MainPanel.svelte b/src/components/MainPanel.svelte
index f9f0d74..2d89b68 100644
--- a/src/components/MainPanel.svelte
+++ b/src/components/MainPanel.svelte
@@ -55,32 +55,21 @@
             });
     }
 
-    function onDrop(to, event) {
+    function onDrop(to, event, targetIdx) {
         event.preventDefault();
+        event.stopPropagation();
         const data = JSON.parse(event.dataTransfer.getData('text'));
         let from = data.area;
         if (from === 'search') {
             if (to === 'main') {
-                deckOps.add2main(data.id);
+                deckOps.add2main(data.id, targetIdx);
             } else if (to === 'side') {
-                deckOps.add2side(data.id);
+                deckOps.add2side(data.id, targetIdx);
             } else if (to === 'extra') {
-                deckOps.add2extra(data.id);
-            }
-        } else if (from === 'main') {
-            if (to == 'side') {
-                deckOps.main2side(data.id);
-            }
-        } else if (from === 'extra') {
-            if (to == 'side') {
-                deckOps.extra2side(data.id);
-            }
-        } else if (from === 'side') {
-            if (to == 'main') {
-                deckOps.side2main(data.id);
-            } else if (to == 'extra') {
-                deckOps.side2extra(data.id);
+                deckOps.add2extra(data.id, targetIdx);
             }
+        } else {
+            deckOps.move(from, to, data.idx, targetIdx);
         }
     }
 
@@ -99,30 +88,30 @@
     <div class="deck-section">
         <div class="deck-group">
             <h3>主卡组（{$deck.main.length}）</h3>
-            <div role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("main", e)} class="card-grid main-deck">
-                {#each $deck.main as card}
-                    <div class="card-grid-thumb">
-                        <CardThumb id={card} area="main" />
+            <div role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("main", e, -1)} class="card-grid main-deck">
+                {#each $deck.main as card, i}
+                    <div class="card-grid-thumb" role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("main", e, i)}>
+                        <CardThumb id={card} idx={i} area="main" />
                     </div>
                 {/each}
             </div>
         </div>
         <div class="deck-group">
             <h3>额外卡组（{$deck.extra.length}）</h3>
-            <div role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("extra", e)} class="card-grid extra-deck">
-                {#each $deck.extra as card}
-                    <div class="card-grid-thumb">
-                        <CardThumb id={card} area="extra" />
+            <div role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("extra", e, -1)} class="card-grid extra-deck">
+                {#each $deck.extra as card, i}
+                    <div class="card-grid-thumb" role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("extra", e, i)}>
+                        <CardThumb id={card} idx={i} area="extra" />
                     </div>
                 {/each}
             </div>
         </div>
         <div class="deck-group">
             <h3>副卡组（{$deck.side.length}）</h3>
-            <div role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("side", e)} class="card-grid side-deck">
-                {#each $deck.side as card}
-                    <div class="card-grid-thumb">
-                        <CardThumb id={card} area="side" />
+            <div role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("side", e, -1)} class="card-grid side-deck">
+                {#each $deck.side as card, i}
+                    <div class="card-grid-thumb" role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("side", e, i)}>
+                        <CardThumb id={card} idx={i} area="side" />
                     </div>
                 {/each}
             </div>
@@ -165,7 +154,6 @@
 .card-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
-    gap: 5px;
     grid-auto-flow: dense;
     overflow-y: auto;
     padding: 10px;
diff --git a/src/components/RightPanel.svelte b/src/components/RightPanel.svelte
index 03cc272..c9904fa 100644
--- a/src/components/RightPanel.svelte
+++ b/src/components/RightPanel.svelte
@@ -11,7 +11,7 @@
         event.preventDefault();
         const data = JSON.parse(event.dataTransfer.getData('text'));
         if (data.area === 'main' || data.area === 'side' || data.area === 'extra') {
-            deckOps.deleteCard(data.area, data.id);
+            deckOps.deleteCard(data.area, data.idx);
         }
     }
 </script>
@@ -24,7 +24,7 @@
            {#each $showingCards as card}
                <div class="card-item">
                    <div class="card-thumbnail">
-                       <CardThumb id= {card.id} area="search" />
+                       <CardThumb id={card.id} idx={-1} area="search" />
                    </div>
                    <span>{card.name}</span>
                </div>