impl left panel and card thumbnail

1 files changed, 15 insertions, 6 deletions

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>