impl left panel and card thumbnail

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>
 

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>

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} />

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>

src/control/left_panel.svelte.js

@@ -0,0 +1,45 @@
+import { writable } from 'svelte/store';
+
+let leftPanelCardId = writable('');
+let leftPanelCardDesc = writable('');
+
+let curVersion = 0;
+let descCache = new Map();
+
+function setLeftPanelCard(id) {
+    leftPanelCardId.set(id);
+    curVersion += 1;
+    leftPanelCardDesc.set('...');
+    let ver = curVersion;
+    setDesc(ver, id);
+}
+
+function setDesc(version, id) {
+    if (descCache.has(id)) {
+        leftPanelCardDesc.set(descCache.get(id));
+        return;
+    }
+    let descUrl = 'https://oss.nebula.moe/ygo-card-text/' + id + '.txt';
+    fetch(descUrl)
+        .then((response) => {
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.text(); // 将响应解析为文本
+        })
+        .then((desc) => {
+            descCache.set(id, desc);
+            if (version === curVersion) {
+                leftPanelCardDesc.set(desc);
+            }
+        })
+        .catch((error) => {
+            console.error('Error fetching the file:', error);
+        });
+}
+
+export {
+    leftPanelCardId,
+    leftPanelCardDesc,
+    setLeftPanelCard,
+};

tsconfig.app.json

@@ -12,7 +12,7 @@
      * of JS in `.svelte` files.
      */
     "allowJs": true,
-    "checkJs": true,
+    "checkJs": false,
     "isolatedModules": true,
     "moduleDetection": "force"
   },