add loading page

.gitignore

@@ -24,4 +24,5 @@ dist-ssr
 *.sw?
 
 data/cards.json
+data/card_db.json
 deploy.sh

data/build-card-info.py

@@ -25,7 +25,5 @@ def convert(card):
 for k in j:
     outData[j[k]['id']] = convert(j[k])
 
-outStr = 'export const cardDb = ' + json.dumps(outData) + ';'
-
-with open('../src/data/cardDb.js', 'w') as fp:
-    fp.write(outStr)
+with open('./card_db.json', 'w') as fp:
+    fp.write(json.dumps(outData))

src/App.svelte

@@ -3,10 +3,12 @@
 import LeftPanel from './components/LeftPanel.svelte';
 import RightPanel from './components/RightPanel.svelte';
 import MainPanel from './components/MainPanel.svelte';
+import Loading from './components/Loading.svelte';
 
 </script>
 
 <LeftPanel />
 <MainPanel />
 <RightPanel />
+<Loading />
 

src/components/Loading.svelte

@@ -0,0 +1,52 @@
+<script>
+    import { isLoading } from '../control/loading';
+</script>
+
+{#if $isLoading}
+    <div id="loading">
+        <div class="loading-content">
+            <div class="loading-spinner"></div>
+            <br>
+            <p>加载中...</p>
+        </div>
+    </div>
+{/if}
+
+
+<style>
+    /* 全屏 loading 样式 */
+    #loading {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.9); /* 半透明背景 */
+        z-index: 9999; /* 确保在最前面 */
+        display: block; /* 默认隐藏 */
+    }
+
+    /* loading 内容区域 */
+    .loading-content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+    }
+
+    /* loading 动画 */
+    .loading-spinner {
+        width: 50px;
+        height: 50px;
+        border: 5px solid #f3f3f3;
+        border-top: 5px solid #3498db;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>

src/components/MainPanel.svelte

@@ -28,7 +28,7 @@
 
     function saveDeck() {
         let deckString = genYdk($deck);
-        downloadStringAsFile('mydeck.ydk', deckString)
+        downloadStringAsFile(deckString)
     }
 
     function copyDeck() {
@@ -163,7 +163,6 @@
 }
 
 .card-grid-thumb {
-    background-color: #eee;
     aspect-ratio: 1/1.4;
     border-radius: 5px;
 }

src/control/deck.js

@@ -1,11 +1,12 @@
 import { writable } from "svelte/store";
 import { parseYdke } from '../utils';
-import { cardDb } from '../data/cardDb';
+import { getCardDb } from '../data/cardDb';
 
 let deck = writable({main: [], extra: [], side: []});
 let deckState = {main: [], extra: [], side: []};
 
 function sanitizeDeck(deck) {
+    let cardDb = getCardDb();
     let ret = [];
     for (let id of deck) {
         if (cardDb[id] !== undefined) {
@@ -53,6 +54,7 @@ let deckOps = {
         }
     },
     "move": (from, to, fromIdx, toIdx) => {
+        let cardDb = getCardDb();
         let id = deckState[from][fromIdx];
         if (cardDb[id].isExtra && to === 'main') return;
         if (!cardDb[id].isExtra && to === 'extra') return;
@@ -62,6 +64,7 @@ let deckOps = {
         setDeck(deckState);
     },
     "add2extra": (id, targetIdx) => {
+        let cardDb = getCardDb();
         if (!cardDb[id].isExtra) return;
         let d = deckState;
         if (canAdd(d, id)) {
@@ -74,6 +77,7 @@ let deckOps = {
         }
     },
     "add2main": (id, targetIdx) => {
+        let cardDb = getCardDb();
         console.log(targetIdx);
         if (cardDb[id].isExtra) return;
         let d = deckState;
@@ -117,11 +121,10 @@ function initDeck() {
     }
 }
 
-initDeck();
-
 export {
     deck,
     setDeck,
     deckOps,
+    initDeck,
 };
 

src/control/left_panel.js

@@ -9,7 +9,7 @@ let descCache = new Map();
 function setLeftPanelCard(id) {
     leftPanelCardId.set(id);
     curVersion += 1;
-    leftPanelCardDesc.set('...');
+    leftPanelCardDesc.set('加载中...');
     let ver = curVersion;
     setDesc(ver, id);
 }

src/control/loading.js

@@ -0,0 +1,29 @@
+import { writable } from 'svelte/store';
+import { initSearch } from './search';
+import { initDeck } from './deck';
+import { setCardDb } from '../data/cardDb';
+
+let isLoading = writable(true);
+
+async function fetchCardDb() {
+    try {
+        const response = await fetch("https://121.40.137.206/ygo-deck-builder/card_db.json");
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+        setCardDb(data);
+    } catch (error) {
+        alert("加载失败！请刷新重试");
+        return;
+    }
+    isLoading.set(false);
+    initDeck();
+    initSearch();
+}
+
+fetchCardDb();
+
+export {
+    isLoading,
+};

src/control/search.js

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import { cardDb } from '../data/cardDb';
+import { getCardDb} from '../data/cardDb';
 
 let showingCards = writable([]);
 let resultCards = [];
@@ -18,6 +18,7 @@ function changeInput(query) {
 }
 
 function doSearch(ver, query) {
+    let cardDb = getCardDb();
     let result = [];
     for (let key in cardDb) {
         if (ver !== curVer) {
@@ -50,7 +51,9 @@ function doSearch(ver, query) {
     showCards();
 }
 
-doSearch(curVer, "");
+function initSearch() {
+    doSearch(curVer, "");
+}
 
 function onPrevPage() {
     if (curPage > 0) {
@@ -72,4 +75,5 @@ export {
     onPrevPage,
     onNextPage,
     showingCards,
+    initSearch,
 };

src/utils.js

@@ -42,15 +42,14 @@ function genYdk(deck) {
     return ydkContent;
 }
 
-function downloadStringAsFile(filename, text) {
+function downloadStringAsFile(text) {
     const blob = new Blob([text], { type: 'text/plain' });
+    let filename= `ygodeck_${Date.now()}.ydk`;
     const link = document.createElement('a');
     link.href = URL.createObjectURL(blob);
     link.download = filename;
     document.body.appendChild(link);
-
     link.click();
-
     document.body.removeChild(link);
     URL.revokeObjectURL(link.href);
 }