version 0.1

3 files changed, 83 insertions, 32 deletions

diff --git a/src/components/CardThumb.svelte b/src/components/CardThumb.svelte
index c2fefc8..4c41f2d 100644
--- a/src/components/CardThumb.svelte
+++ b/src/components/CardThumb.svelte
@@ -1,21 +1,27 @@
-<script lang="ts">
+<script lang="js">
 
-import {setLeftPanelCard} from '../control/left_panel';
+    import {setLeftPanelCard} from '../control/left_panel';
 
-let {id} = $props();
+    let {id, area} = $props();
 
-function onhover() {
-    setLeftPanelCard(id); 
-}
+    function onhover() {
+        setLeftPanelCard(id); 
+    }
+
+    function onDragStart(e) {
+        e.dataTransfer.setData('text', JSON.stringify({id, area}))
+    }
 
 </script>
 
 {#if id}
     <img
+        draggable="true"
         onmouseover={onhover}
         onfocus={onhover}
+        ondragstart={onDragStart}
         height="100%"
-        src="https://cdn.233.momobako.com/ygopro/pics/{id}.jpg!half"
+        src="https://cdn.233.momobako.com/ygopro/pics/{id}.jpg"
         alt="yugioh card {id}"
     />
 {/if}
diff --git a/src/components/MainPanel.svelte b/src/components/MainPanel.svelte
index 5cef824..f9f0d74 100644
--- a/src/components/MainPanel.svelte
+++ b/src/components/MainPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="js">
     import CardThumb from './CardThumb.svelte';
-    import { deck, setDeck } from '../control/deck';
+    import { deck, setDeck, deckOps } from '../control/deck';
     import {
         parseYdk,
         genYdk,
@@ -31,19 +31,60 @@
         downloadStringAsFile('mydeck.ydk', deckString)
     }
 
+    function copyDeck() {
+        let deckString = genYdk($deck);
+        navigator.clipboard.writeText(deckString)
+            .then(() => {
+              alert('YDK卡组码已复制到剪贴板');
+            })
+            .catch(err => {
+              alert("失败！");
+            });
+    }
+
     function shareDeck() {
         let url = window.location.href;
         url = url.split('#')[0]
         url = url + '#' + genYdke($deck);
         navigator.clipboard.writeText(url)
             .then(() => {
-              alert('分享链接已复制到剪贴板')
+              alert('分享链接已复制到剪贴板');
             })
             .catch(err => {
               alert("失败！");
             });
     }
 
+    function onDrop(to, event) {
+        event.preventDefault();
+        const data = JSON.parse(event.dataTransfer.getData('text'));
+        let from = data.area;
+        if (from === 'search') {
+            if (to === 'main') {
+                deckOps.add2main(data.id);
+            } else if (to === 'side') {
+                deckOps.add2side(data.id);
+            } 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);
+            }
+        }
+    }
+
+
 </script>
 
 <input bind:this={fileInput} style="display:none;" onchange={loadDeck} type="file" class="file-input" accept=".ydk" />
@@ -52,35 +93,36 @@
     <div class="control-bar">
         <button class="btn" onclick={openDeck}>打开</button>
         <button class="btn" onclick={saveDeck}>保存</button>
+        <button class="btn" onclick={copyDeck}>复制到剪贴板</button>
         <button class="btn" onclick={shareDeck}>分享</button>
     </div>
     <div class="deck-section">
         <div class="deck-group">
             <h3>主卡组（{$deck.main.length}）</h3>
-            <div class="card-grid main-deck">
+            <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} />
+                        <CardThumb id={card} area="main" />
                     </div>
                 {/each}
             </div>
         </div>
         <div class="deck-group">
             <h3>额外卡组（{$deck.extra.length}）</h3>
-            <div class="card-grid extra-deck">
+            <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} />
+                        <CardThumb id={card} area="extra" />
                     </div>
                 {/each}
             </div>
         </div>
         <div class="deck-group">
             <h3>副卡组（{$deck.side.length}）</h3>
-            <div class="card-grid side-deck">
+            <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} />
+                        <CardThumb id={card} area="side" />
                     </div>
                 {/each}
             </div>
diff --git a/src/components/RightPanel.svelte b/src/components/RightPanel.svelte
index 062e33c..03cc272 100644
--- a/src/components/RightPanel.svelte
+++ b/src/components/RightPanel.svelte
@@ -1,31 +1,34 @@
 <script lang="js">
     import CardThumb from './CardThumb.svelte';
-    import { resultCards } from '../control/search'
-
-    function onPrevPage() {
+    import { changeInput, showingCards, onPrevPage, onNextPage } from '../control/search'
+    import { deckOps } from '../control/deck';
 
+    function onChange(event) {
+        changeInput(event.target.value);
     }
 
-    function onNextPage() {
-        
+    function onDrop(event) {
+        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);
+        }
     }
 </script>
 
-<div class="right-panel">
+<div class="right-panel" role="region" ondragover={(e)=>e.preventDefault()} ondrop={onDrop}>
     <div class="search-bar">
-        <input type="text" placeholder="搜索卡牌...">
+        <input type="text" placeholder="搜索卡牌..." oninput={onChange}>
     </div>
     <div class="card-list">
-        {#if $resultCards.length > 0}
-            <div class="card-item">
-                {#each $resultCards as card}
-                    <div class="card-thumbnail">
-                        <CardThumb id= {card.id} />
-                    </div>
-                    <span>{card.name}</span>
-                {/each}
-            </div>
-        {/if}
+           {#each $showingCards as card}
+               <div class="card-item">
+                   <div class="card-thumbnail">
+                       <CardThumb id= {card.id} area="search" />
+                   </div>
+                   <span>{card.name}</span>
+               </div>
+           {/each}
     </div>
     <div class="pagination">
         <button class="page-btn" onclick={onPrevPage}>上一页</button>