diff options
| -rw-r--r-- | src/components/CardThumb.svelte | 24 | ||||
| -rw-r--r-- | src/components/LeftPanel.svelte | 21 | ||||
| -rw-r--r-- | src/components/MainPanel.svelte | 3 | ||||
| -rw-r--r-- | src/components/RightPanel.svelte | 12 | ||||
| -rw-r--r-- | src/control/deck.svelte.js | 0 | ||||
| -rw-r--r-- | src/control/left_panel.svelte.js | 45 | ||||
| -rw-r--r-- | src/utils.js | 0 | ||||
| -rw-r--r-- | tsconfig.app.json | 2 |
8 files changed, 93 insertions, 14 deletions
diff --git a/src/components/CardThumb.svelte b/src/components/CardThumb.svelte index 6dcefd2..f733b32 100644 --- a/src/components/CardThumb.svelte +++ b/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> diff --git a/src/components/LeftPanel.svelte b/src/components/LeftPanel.svelte index e05f42d..c782d8b 100644 --- a/src/components/LeftPanel.svelte +++ b/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> diff --git a/src/components/MainPanel.svelte b/src/components/MainPanel.svelte index 10f18d8..158a6b2 100644 --- a/src/components/MainPanel.svelte +++ b/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} /> diff --git a/src/components/RightPanel.svelte b/src/components/RightPanel.svelte index d0480fe..5ede942 100644 --- a/src/components/RightPanel.svelte +++ b/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> diff --git a/src/control/deck.svelte.js b/src/control/deck.svelte.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/control/deck.svelte.js diff --git a/src/control/left_panel.svelte.js b/src/control/left_panel.svelte.js new file mode 100644 index 0000000..7c52e2f --- /dev/null +++ b/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, +}; diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/utils.js diff --git a/tsconfig.app.json b/tsconfig.app.json index 55a2f9b..550b03e 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -12,7 +12,7 @@ * of JS in `.svelte` files. */ "allowJs": true, - "checkJs": true, + "checkJs": false, "isolatedModules": true, "moduleDetection": "force" }, |