version 0.1

1 files changed, 20 insertions, 17 deletions

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>