优化结果

InfoGenie-frontend/public/60sapi/娱乐消遣/随机运势/js/script.js

@@ -0,0 +1,170 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const getFortuneBtn = document.getElementById('get-fortune-btn');
+    const fortuneCard = document.getElementById('fortune-card');
+    const fortuneContent = fortuneCard.querySelector('.fortune-content');
+    const luckDescElem = document.getElementById('luck-desc');
+    const luckTipElem = document.getElementById('luck-tip');
+    const fortuneSummaryElem = document.getElementById('fortune-summary');
+    const luckyColorElem = document.getElementById('lucky-color');
+    const luckyNumberElem = document.getElementById('lucky-number');
+    const loadingSpinner = fortuneCard.querySelector('.loading-spinner');
+    const tarotCardContainer = document.getElementById('tarot-card');
+    const tarotNameElem = document.getElementById('tarot-name');
+    const tarotInterpretationElem = document.getElementById('tarot-interpretation');
+
+    const apiBaseUrls = [
+        "https://60s.api.shumengya.top",
+    ];
+    const apiPath = "/v2/luck";
+
+    const mantras = [
+        "顺其自然，皆是美好。",
+        "相信直觉，它知道方向。",
+        "每一次呼吸都是新的开始。",
+        "心怀感恩，好运自来。",
+        "拥抱变化，发现惊喜。",
+        "你的能量，超乎想象。",
+        "保持微笑，宇宙会回应你。"
+    ];
+
+    const tarotDeck = [
+        { name: "愚者", interpretation: "新的开始，无限的潜力，天真和自由。勇敢地迈出第一步。" },
+        { name: "魔术师", interpretation: "创造力，意志力，显化。你拥有实现目标所需的一切资源。" },
+        { name: "女祭司", interpretation: "直觉，潜意识，神秘。倾听你内心的声音，智慧在你之内。" },
+        { name: "皇后", interpretation: "丰饶，母性，创造。享受生活的美好，与自然和谐相处。" },
+        { name: "皇帝", interpretation: "权威，结构，控制。建立秩序和纪律，掌控你的生活。" },
+        { name: "教皇", interpretation: "传统，信仰，灵性指导。寻求智慧和知识，遵循传统。" },
+        { name: "恋人", interpretation: "爱，和谐，选择。做出与你内心价值观一致的决定。" },
+        { name: "战车", interpretation: "胜利，决心，控制。以坚定的意志力克服障碍，勇往直前。" },
+        { name: "力量", interpretation: "勇气，内在力量，同情。用温柔和耐心驯服内心的野兽。" },
+        { name: "隐士", interpretation: "内省，孤独，寻求真理。花时间独处，向内寻求答案。" },
+        { name: "命运之轮", interpretation: "变化，命运，转折点。生活总在变化，顺应潮流。" },
+        { name: "正义", interpretation: "公平，真理，因果。为你的行为负责，寻求平衡。" },
+        { name: "倒吊人", interpretation: "新的视角，顺从，牺牲。放手，从不同的角度看问题。" },
+        { name: "死神", interpretation: "结束，转变，新生。一个周期的结束是另一个周期的开始。" },
+        { name: "节制", interpretation: "平衡，和谐，耐心。融合对立的力量，找到中间道路。" },
+        { name: "恶魔", interpretation: "束缚，物质主义，诱惑。认识到你的束缚，并寻求解放。" },
+        { name: "塔", interpretation: "突变，启示，解放。旧的结构正在崩塌，为新的结构让路。" },
+        { name: "星星", interpretation: "希望，灵感，平静。在黑暗之后，总有希望的曙光。" },
+        { name: "月亮", interpretation: "幻觉，恐惧，潜意识。面对你的恐惧，相信你的直觉。" },
+        { name: "太阳", interpretation: "成功，喜悦，活力。拥抱光明，享受生活的乐趣。" },
+        { name: "审判", interpretation: "觉醒，重生，评估。一个反思和更新的时刻。" },
+        { name: "世界", interpretation: "完成，整合，成就。一个旅程的成功结束，庆祝你的成就。" }
+    ];
+
+    let currentApiIndex = 0;
+
+    const showLoading = (isLoading) => {
+        if (isLoading) {
+            fortuneContent.classList.remove('visible');
+            loadingSpinner.classList.add('visible');
+        } else {
+            loadingSpinner.classList.remove('visible');
+            setTimeout(() => {
+                fortuneContent.classList.add('visible');
+            }, 100);
+        }
+    };
+
+    const fetchFortune = async () => {
+        showLoading(true);
+        tarotCardContainer.classList.remove('flipped'); // Reset card on new fetch
+        
+        try {
+            const url = apiBaseUrls[currentApiIndex] + apiPath;
+            const response = await fetch(url, { timeout: 5000 });
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            const data = await response.json();
+
+            if (data.code === 200 && data.data) {
+                updateFortune(data.data);
+                drawTarotCard(); // Draw a tarot card on success
+            } else {
+                throw new Error('Invalid data format');
+            }
+        } catch (error) {
+            console.error(`API error with ${apiBaseUrls[currentApiIndex]}:`, error);
+            currentApiIndex = (currentApiIndex + 1) % apiBaseUrls.length;
+            if (currentApiIndex !== 0) {
+                fetchFortune(); // Try next API
+            } else {
+                displayError();
+            }
+        }
+    };
+
+    const updateFortune = (data) => {
+        luckDescElem.textContent = data.luck_desc || '运势';
+        luckTipElem.textContent = data.luck_tip || '今日运势平平，保持好心情。';
+
+        // Generate and display additional details
+        fortuneSummaryElem.textContent = mantras[Math.floor(Math.random() * mantras.length)];
+        luckyColorElem.style.backgroundColor = `#${Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')}`;
+        luckyNumberElem.textContent = Math.floor(Math.random() * 100);
+
+        showLoading(false);
+    };
+
+    const displayError = () => {
+        luckDescElem.textContent = '占卜失败';
+        luckTipElem.textContent = '无法连接到星辰之力，请稍后再试。';
+        fortuneSummaryElem.textContent = '---';
+        luckyColorElem.style.backgroundColor = 'transparent';
+        luckyNumberElem.textContent = '-';
+        showLoading(false);
+        tarotNameElem.textContent = '指引中断';
+        tarotInterpretationElem.textContent = '星辰之力暂时无法连接。';
+        tarotCardContainer.classList.add('flipped'); // Show error on card
+    };
+
+    const drawTarotCard = () => {
+        const card = tarotDeck[Math.floor(Math.random() * tarotDeck.length)];
+        tarotNameElem.textContent = card.name;
+        tarotInterpretationElem.textContent = card.interpretation;
+        
+        // Flip the card after a short delay to allow the main content to appear
+        setTimeout(() => {
+            tarotCardContainer.classList.add('flipped');
+        }, 500);
+    };
+
+    const createSideDecorations = () => {
+        const leftContainer = document.querySelector('.left-decor');
+        const rightContainer = document.querySelector('.right-decor');
+        if (!leftContainer || !rightContainer) return;
+
+        const symbols = ['✧', '✦', '☾', '✶', '✵', '✩', '✨'];
+        const symbolCount = 15; // Number of symbols per side
+
+        const createSymbols = (container) => {
+            for (let i = 0; i < symbolCount; i++) {
+                const symbol = document.createElement('span');
+                symbol.classList.add('decor-symbol');
+                symbol.textContent = symbols[Math.floor(Math.random() * symbols.length)];
+
+                // Randomize properties for a more natural look
+                symbol.style.top = `${Math.random() * 90}vh`;
+                symbol.style.left = `${Math.random() * 80}%`;
+                symbol.style.fontSize = `${Math.random() * 20 + 10}px`;
+                symbol.style.animationDelay = `${Math.random() * 20}s`;
+                symbol.style.animationDuration = `${Math.random() * 20 + 15}s`; // Duration between 15s and 35s
+
+                container.appendChild(symbol);
+            }
+        };
+
+        createSymbols(leftContainer);
+        createSymbols(rightContainer);
+    };
+
+    getFortuneBtn.addEventListener('click', fetchFortune);
+    tarotCardContainer.addEventListener('click', () => {
+        tarotCardContainer.classList.toggle('flipped');
+    });
+
+    // Initial actions on page load
+    fetchFortune();
+    createSideDecorations();
+});