From 365c471cfea10e781b87a63e5b6b4e28a17e2bfc Mon Sep 17 00:00:00 2001
From: Mistivia <i@mistivia.com>
Date: Wed, 5 Feb 2025 15:39:41 +0800
Subject: impl main panel

---
 src/components/CardThumb.svelte  | 10 ++-------
 src/components/LeftPanel.svelte  |  7 ++++--
 src/components/MainPanel.svelte  | 47 ++++++++++++++++++++++++---------------
 src/control/deck.js              | 13 +++++++++++
 src/control/deck.svelte.js       |  0
 src/control/left_panel.js        | 45 +++++++++++++++++++++++++++++++++++++
 src/control/left_panel.svelte.js | 45 -------------------------------------
 src/utils.js                     | 48 ++++++++++++++++++++++++++++++++++++++++
 8 files changed, 142 insertions(+), 73 deletions(-)
 create mode 100644 src/control/deck.js
 delete mode 100644 src/control/deck.svelte.js
 create mode 100644 src/control/left_panel.js
 delete mode 100644 src/control/left_panel.svelte.js

diff --git a/src/components/CardThumb.svelte b/src/components/CardThumb.svelte
index f733b32..c2fefc8 100644
--- a/src/components/CardThumb.svelte
+++ b/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>
diff --git a/src/components/LeftPanel.svelte b/src/components/LeftPanel.svelte
index c782d8b..f5d2fa8 100644
--- a/src/components/LeftPanel.svelte
+++ b/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>
diff --git a/src/components/MainPanel.svelte b/src/components/MainPanel.svelte
index 158a6b2..a65300d 100644
--- a/src/components/MainPanel.svelte
+++ b/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>
diff --git a/src/control/deck.js b/src/control/deck.js
new file mode 100644
index 0000000..328e106
--- /dev/null
+++ b/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,
+};
+
diff --git a/src/control/deck.svelte.js b/src/control/deck.svelte.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/control/left_panel.js b/src/control/left_panel.js
new file mode 100644
index 0000000..898d8af
--- /dev/null
+++ b/src/control/left_panel.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,
+};
diff --git a/src/control/left_panel.svelte.js b/src/control/left_panel.svelte.js
deleted file mode 100644
index 7c52e2f..0000000
--- a/src/control/left_panel.svelte.js
+++ /dev/null
@@ -1,45 +0,0 @@
-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,
-};
diff --git a/src/utils.js b/src/utils.js
index e69de29..05e519d 100644
--- a/src/utils.js
+++ b/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,
+};
-- 
cgit v1.0

