4 files changed, 47 insertions, 13 deletions
diff --git a/src/components/CardThumb.svelte b/src/components/CardThumb.svelte
index 6dcefd2..f733b32 100644
--- a/src/components/CardThumb.svelte
+++ b/src/components/CardThumb.svelte
@@ -1,12 +1,24 @@
 <script lang="ts">
-    let {id} = $props()
+
+import {setLeftPanelCard} from '../control/left_panel.svelte.js';
+
+let {id} = $props();
+
+function onhover() {
+    setLeftPanelCard(id); 
+}
+
 </script>
 
-<div class="card-thumbnail">
-    {#if id}
-        <img height="100%" src="https://cdn.233.momobako.com/ygopro/pics/{id}.jpg!half" alt="yugioh card {id}">
-    {/if}
-</div>
+{#if id}
+    <img
+        onmouseover={onhover}
+        onfocus={onhover}
+        height="100%"
+        src="https://cdn.233.momobako.com/ygopro/pics/{id}.jpg!half"
+        alt="yugioh card {id}"
+    />
+{/if}
 
 <style>
 
diff --git a/src/components/LeftPanel.svelte b/src/components/LeftPanel.svelte
index e05f42d..c782d8b 100644
--- a/src/components/LeftPanel.svelte
+++ b/src/components/LeftPanel.svelte
@@ -1,17 +1,21 @@
-<script lang="ts">
-    let leftPanelCardId = $state();
-    let leftPanelCardDesc = $state("");
+<script lang="js">
+
+import {
+    leftPanelCardId,
+    leftPanelCardDesc,
+} from '../control/left_panel.svelte'
+
 </script>
 
 <div class="left-panel">
     <div class="card-preview">
         <div class="card-image-large">
-            {#if leftPanelCardId}
-                <img height="100%" src="https://cdn.233.momobako.com/ygopro/pics/{leftPanelCardId}.jpg" alt="card img">
+            {#if $leftPanelCardId}
+                <img height="100%" src="https://cdn.233.momobako.com/ygopro/pics/{$leftPanelCardId}.jpg" alt="card img">
             {/if}
         </div>
         <div class="card-description">
-            <pre>{leftPanelCardDesc}</pre>
+            <pre class="card-desc-text">{$leftPanelCardDesc}</pre>
         </div>
     </div>
 </div>
@@ -37,4 +41,9 @@
     font-size: 14px;
 }
 
+.card-desc-text {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+}
+
 </style>
diff --git a/src/components/MainPanel.svelte b/src/components/MainPanel.svelte
index 10f18d8..158a6b2 100644
--- a/src/components/MainPanel.svelte
+++ b/src/components/MainPanel.svelte
@@ -20,6 +20,9 @@ let sideNum = $derived(sideDeck.length);
         <div class="deck-group">
             <h3>主卡组（{mainNum}）</h3>
             <div class="card-grid main-deck">
+                    <div class="card-grid-thumb">
+                        <CardThumb id="89631139" />
+                    </div>
                 {#each mainDeck as card}
                     <div class="card-grid-thumb">
                         <CardThumb id={card} />
diff --git a/src/components/RightPanel.svelte b/src/components/RightPanel.svelte
index d0480fe..5ede942 100644
--- a/src/components/RightPanel.svelte
+++ b/src/components/RightPanel.svelte
@@ -14,7 +14,9 @@ let cardList = $state([]);
         {#if cardList.length > 0}
             <div class="card-item">
                 {#each cardList as card}
-                    <CardThumb id= {card.id} />
+                    <div class="card-thumbnail">
+                        <CardThumb id= {card.id} />
+                    </div>
                     <span>{card.name}</span>
                 {/each}
             </div>
@@ -76,4 +78,12 @@ let cardList = $state([]);
     cursor: pointer;
 }
 
+.card-thumbnail {
+    width: 50px;
+    height: 70px;
+    background-color: #eee;
+    margin-right: 10px;
+    border-radius: 3px;
+}
+
 </style>