diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/CardThumb.svelte | 10 | ||||
| -rw-r--r-- | src/components/LeftPanel.svelte | 7 | ||||
| -rw-r--r-- | src/components/MainPanel.svelte | 47 |
3 files changed, 36 insertions, 28 deletions
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> |