From 365c471cfea10e781b87a63e5b6b4e28a17e2bfc Mon Sep 17 00:00:00 2001 From: Mistivia 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 @@ @@ -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; } 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 @@ - + +
- +
-

主卡组（{mainNum}）

+

主卡组（{$deck.main.length}）

-
- -
- {#each mainDeck as card} + {#each $deck.main as card}
@@ -31,9 +42,9 @@ let sideNum = $derived(sideDeck.length);
-

额外卡组（{extraNum}）

+

额外卡组（{$deck.extra.length}）

- {#each extraDeck as card} + {#each $deck.extra as card}
@@ -41,9 +52,9 @@ let sideNum = $derived(sideDeck.length);
-

副卡组（{sideNum}）

+

副卡组（{$deck.side.length}）

- {#each sideDeck as card} + {#each deck.side as card}
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