impl main panel

src/components/CardThumb.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 
-import {setLeftPanelCard} from '../control/left_panel.svelte.js';
+import {setLeftPanelCard} from '../control/left_panel';
 
 let {id} = $props();
 
@@ -22,12 +22,6 @@ function onhover() {
 
 <style>
 
-.card-thumbnail {
-    width: 50px;
-    height: 70px;
-    background-color: #eee;
-    margin-right: 10px;
-    border-radius: 3px;
-}
+
 
 </style>

src/components/LeftPanel.svelte

@@ -3,7 +3,7 @@
 import {
     leftPanelCardId,
     leftPanelCardDesc,
-} from '../control/left_panel.svelte'
+} from '../control/left_panel'
 
 </script>
 
@@ -29,7 +29,7 @@ import {
 }
 
 .card-image-large {
-    height: 400px;
+    height: 40vh;
     text-align: center;
     background-color: #ddd;
     margin-bottom: 20px;
@@ -39,11 +39,14 @@ import {
 .card-description {
     line-height: 1.6;
     font-size: 14px;
+    height: 55vh;
 }
 
 .card-desc-text {
+      height: 45vh; 
       white-space: pre-wrap;
       word-wrap: break-word;
+      overflow: auto;
 }
 
 </style>

src/components/MainPanel.svelte

@@ -1,29 +1,40 @@
-<script lang="ts">
+<script lang="js">
+    import CardThumb from './CardThumb.svelte';
+    import { deck, setDeck } from '../control/deck';
+    import { parseYdk } from '../utils'
 
-import CardThumb from './CardThumb.svelte';
+    let fileInput;
+    
+    let openDeck = () => {
+        fileInput.click();
+    };
 
-let mainDeck = $state([]);
-let extraDeck = $state([]);
-let sideDeck = $state([]);
-let mainNum = $derived(mainDeck.length);
-let extraNum = $derived(extraDeck.length);
-let sideNum = $derived(sideDeck.length);
+    let loadDeck = (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                let content = event.target.result;
+                setDeck(parseYdk(content));
+            };
+            reader.readAsText(file); 
+        }
+    };
 
 </script>
 
+<input bind:this={fileInput} style="display:none;" onchange={loadDeck} type="file" class="file-input" accept=".ydk" />
+
 <div class="middle-panel">
     <div class="control-bar">
-        <button class="btn">打开</button>
+        <button class="btn" onclick={openDeck}>打开</button>
         <button class="btn">保存</button>
     </div>
     <div class="deck-section">
         <div class="deck-group">
-            <h3>主卡组（{mainNum}）</h3>
+            <h3>主卡组（{$deck.main.length}）</h3>
             <div class="card-grid main-deck">
-                    <div class="card-grid-thumb">
-                        <CardThumb id="89631139" />
-                    </div>
-                {#each mainDeck as card}
+                {#each $deck.main as card}
                     <div class="card-grid-thumb">
                         <CardThumb id={card} />
                     </div>
@@ -31,9 +42,9 @@ let sideNum = $derived(sideDeck.length);
             </div>
         </div>
         <div class="deck-group">
-            <h3>额外卡组（{extraNum}）</h3>
+            <h3>额外卡组（{$deck.extra.length}）</h3>
             <div class="card-grid extra-deck">
-                {#each extraDeck as card}
+                {#each $deck.extra as card}
                     <div class="card-grid-thumb">
                         <CardThumb id={card} />
                     </div>
@@ -41,9 +52,9 @@ let sideNum = $derived(sideDeck.length);
             </div>
         </div>
         <div class="deck-group">
-            <h3>副卡组（{sideNum}）</h3>
+            <h3>副卡组（{$deck.side.length}）</h3>
             <div class="card-grid side-deck">
-                {#each sideDeck as card}
+                {#each deck.side as card}
                     <div class="card-grid-thumb">
                         <CardThumb id={card} />
                     </div>

src/control/deck.js

@@ -0,0 +1,13 @@
+import { writable } from "svelte/store";
+
+let deck = writable({main: [], extra: [], side: []});
+
+let setDeck = (d) => {
+    deck.set(d);
+};
+
+export {
+    deck,
+    setDeck,
+};
+

src/control/left_panel.svelte.js → src/control/left_panel.js

@@ -25,7 +25,7 @@ function setDesc(version, id) {
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
-            return response.text(); // 将响应解析为文本
+            return response.text(); 
         })
         .then((desc) => {
             descCache.set(id, desc);

src/utils.js

@@ -0,0 +1,48 @@
+function parseYdk(ydkContent) {
+    const lines = ydkContent.split('\n');
+    const deck = {
+        main: [],
+        extra: [],
+        side: [],
+    };
+    let currentSection = null;
+    for (const line of lines) {
+        const trimmedLine = line.trim();
+        if (!trimmedLine || trimmedLine.startsWith('#') && !['#main', '#extra'].includes(trimmedLine)) {
+            continue;
+        }
+        if (trimmedLine === '#main') {
+            currentSection = 'main';
+        } else if (trimmedLine === '#extra') {
+            currentSection = 'extra';
+        } else if (trimmedLine === '!side') {
+            currentSection = 'side';
+        } else if (currentSection) {
+            const cardId = parseInt(trimmedLine, 10);
+            if (!isNaN(cardId)) {
+                deck[currentSection].push(String(cardId));
+            }
+        }
+    }
+    return deck;
+}
+
+function genYdk(deck) {
+    let ydkContent = '#created by ygodeck.mistivia.com\n';
+
+    ydkContent += '#main\n';
+    ydkContent += deck.main.join('\n') + '\n';
+
+    ydkContent += '#extra\n';
+    ydkContent += deck.extra.join('\n') + '\n';
+
+    ydkContent += '!side\n';
+    ydkContent += deck.side.join('\n') + '\n';
+
+    return ydkContent;
+}
+
+export {
+    parseYdk,
+    genYdk,
+};