Upload 41 files

achievements.js

@@ -259,18 +259,18 @@ class AchievementSystem {
 
     // 將成就添加到待處理佇列
     addPendingAchievement(achievementId) {
-        let pendingAchievements = JSON.parse(localStorage.getItem(\'pendingAchievements\')) || [];
+        let pendingAchievements = JSON.parse(localStorage.getItem('pendingAchievements')) || [];
         if (!pendingAchievements.includes(achievementId)) {
             pendingAchievements.push(achievementId);
-            localStorage.setItem(\'pendingAchievements\', JSON.stringify(pendingAchievements));
+            localStorage.setItem('pendingAchievements', JSON.stringify(pendingAchievements));
             console.log(`成就 ${achievementId} 已添加到待處理佇列`);
         }
     }
 
     // 獲取並清除待處理成就
     getAndClearPendingAchievements() {
-        const pendingAchievements = JSON.parse(localStorage.getItem(\'pendingAchievements\')) || [];
-        localStorage.removeItem(\'pendingAchievements\');
+        const pendingAchievements = JSON.parse(localStorage.getItem('pendingAchievements')) || [];
+        localStorage.removeItem('pendingAchievements');
         return pendingAchievements;
     }
 
@@ -329,19 +329,19 @@ class AchievementSystem {
         `;
         
         // 播放音效
-        const audio = new Audio(\'ding.mp3\');
-        audio.play().catch(e => console.error(\'播放音效失敗:\', e));
+        const audio = new Audio('ding.mp3');
+        audio.play().catch(e => console.error('播放音效失敗:', e));
 
         // 添加到通知容器
         this.toastContainer.appendChild(toast);
 
         // 等待用戶點擊確認
         await new Promise(resolve => {
-            const confirmButton = document.createElement(\'button\');
-            confirmButton.textContent = \'確認\';
-            confirmButton.className = \'toast-confirm-button\';
+            const confirmButton = document.createElement('button');
+            confirmButton.textContent = '確認';
+            confirmButton.className = 'toast-confirm-button';
             toast.appendChild(confirmButton);
-            confirmButton.addEventListener(\'click\', resolve);
+            confirmButton.addEventListener('click', resolve);
         });
         toast.remove();
 
@@ -511,9 +511,7 @@ class AchievementSystem {
 // 當頁面載入完成後初始化成就系統
 document.addEventListener('DOMContentLoaded', () => {
     // 創建成就系統實例
-    document.addEventListener(\'DOMContentLoaded\', function() {
     window.achievementSystem = new AchievementSystem();
-});
     console.log('成就系統已掛載到全域 window 物件');
     
     // 測試用：添加模擬解鎖按鈕

script.js

@@ -23,9 +23,9 @@ async function loadPlayerData() {
             playerData.push(player);
         }
         
-        console.log(\'玩家資料載入成功:\', playerData);
+        console.log('玩家資料載入成功:', playerData);
     } catch (error) {
-        console.error(\'載入玩家資料失敗:\', error);
+        console.error('載入玩家資料失敗:', error);
     }
 }
 
@@ -49,396 +49,209 @@ function loadFromSaveCode(saveCode) {
         const playerId = data.id;
         const progress = data.progress;
         
-        // 檢查ID是否存在
-        const player = playerData.find(p => p.id === playerId);
-        if (!player) {
-            return { success: false, message: \'無效的玩家ID\' };
-        }
-        
-        // 儲存進度
+        // 將進度存入localStorage
         localStorage.setItem(`gameProgress_${playerId}`, JSON.stringify(progress));
-        localStorage.setItem(\'currentPlayerId\', playerId);
-        localStorage.setItem(\'playerName\', player.name);
-        localStorage.setItem(\'playerProfession\', player.profession);
+        localStorage.setItem('currentPlayerId', playerId);
         
-        return { success: true, player: player };
-    } catch (e) {
-        console.error(\"無效的存檔碼\", e);
-        return { success: false, message: \'無效的存檔碼格式\' };
+        return { success: true, playerId: playerId };
+    } catch (error) {
+        console.error('載入存檔失敗:', error);
+        return { success: false, error: '存檔格式錯誤' };
     }
 }
 
-// 遊戲狀態更新時檢查成就
-function checkAchievements() {
-    if (window.achievementSystem) {
-        // 獲取當前遊戲數據
-        const currentPlayerId = localStorage.getItem(\'currentPlayerId\');
-        if (!currentPlayerId) return;
-        
-        const gameProgressStr = localStorage.getItem(`gameProgress_${currentPlayerId}`);
-        if (!gameProgressStr) return;
-        
-        const gameProgress = JSON.parse(gameProgressStr);
-        
-        // 構建遊戲狀態
-        const gameState = {
-            // 基本信息
-            loginCount: parseInt(localStorage.getItem(\'loginCount\') || \'1\'),
-            prologueCompleted: localStorage.getItem(\'prologueCompleted\') === \'true\',
-            
-            // 試煉相關
-            visitedTrials: [],
-            completedTrials: {},
-            
-            // 其他統計
-            maxCorrectStreak: 0,
-            fastestTrialTime: 999,
-            fastestQuestionTime: 999,
-            retriesAfterFailure: 0,
-            lastTrialCompletionTime: new Date(),
-            lastTrialStartTime: new Date(),
-            
-            // 特殊條件
-            allThreeStarsSameDay: false,
-            firstAttemptAllThreeStars: false,
-            musicEnabledAllTrials: localStorage.getItem(\'musicPlaying\') === \'true\',
-            musicDisabledAllTrials: localStorage.getItem(\'musicPlaying\') === \'false\'
-        };
-        
-        // 填充試煉相關數據
-        if (gameProgress.completedTrials) {
-            for (const [trialName, trialData] of Object.entries(gameProgress.completedTrials)) {
-                if (trialData.score > 0) {
-                    gameState.visitedTrials.push(trialName);
-                    
-                    gameState.completedTrials[trialName] = {
-                        completed: trialData.completed,
-                        stars: trialData.stars,
-                        noErrors: trialData.noErrors
-                    };
-                }
+// 頁面載入完成後的初始化
+document.addEventListener('DOMContentLoaded', async function() {
+    console.log('DOM 載入完成，開始初始化...');
+    
+    // 載入玩家資料
+    await loadPlayerData();
+    
+    // 獲取所有按鈕元素
+    const startGameBtn = document.getElementById('start-game');
+    const loadGameBtn = document.getElementById('load-game');
+    const achievementsBtn = document.getElementById('achievements');
+    const exitGameBtn = document.getElementById('exit-game');
+    const toggleBgmBtn = document.getElementById('toggle-bgm');
+    
+    // 調試：檢查按鈕是否正確獲取
+    console.log('開始遊戲按鈕:', startGameBtn);
+    console.log('讀取進度按鈕:', loadGameBtn);
+    console.log('成就圖鑑按鈕:', achievementsBtn);
+    console.log('結束遊戲按鈕:', exitGameBtn);
+    console.log('音樂開關按鈕:', toggleBgmBtn);
+    
+    // 獲取模態框元素
+    const playerModal = document.getElementById('player-modal');
+    const loadModal = document.getElementById('load-modal');
+    const closeModalBtns = document.querySelectorAll('.close');
+    
+    // 調試：檢查模態框是否正確獲取
+    console.log('玩家選擇模態框:', playerModal);
+    console.log('讀取進度模態框:', loadModal);
+    console.log('關閉按鈕:', closeModalBtns);
+    
+    // 開始遊戲按鈕
+    if (startGameBtn) {
+        startGameBtn.addEventListener('click', function() {
+            console.log('點擊開始遊戲按鈕');
+            if (playerModal) {
+                playerModal.style.display = 'block';
+                populatePlayerList();
+            } else {
+                console.error('找不到玩家選擇模態框');
             }
-        }
-        
-        // 檢查成就
-        window.achievementSystem.checkAllAchievements(gameState);
+        });
+    } else {
+        console.error('找不到開始遊戲按鈕');
     }
-}
-
-// 在頁面載入時檢查成就
-loadPlayerData();
-
-// 玩家資料
-let playerData = [];
-
-// 載入CSV檔案
-async function loadPlayerData() {
-    try {
-        const response = await fetch(\'ID.csv\');
-        const data = await response.text();
-        
-        // 解析CSV        const rows = data.split("\n");
-        const headers = rows[0].split(",");
-        // 跳過標題行，處理每一行資料
-        for (let i = 1; i < rows.length; i++) {
-            if (rows[i].trim() === \'\') continue;
-            
-            const values = rows[i].split(\'\\
-\');
-            const player = {
-                id: values[0].trim(),
-                name: values[1].trim(),
-                profession: values[2].trim()
-            };
-            playerData.push(player);
-        }
-        
-        console.log(\'玩家資料載入成功:\', playerData);
-    } catch (error) {
-        console.error(\'載入玩家資料失敗:\', error);
+    
+    // 讀取進度按鈕
+    if (loadGameBtn) {
+        loadGameBtn.addEventListener('click', function() {
+            console.log('點擊讀取進度按鈕');
+            if (loadModal) {
+                loadModal.style.display = 'block';
+            } else {
+                console.error('找不到讀取進度模態框');
+            }
+        });
+    } else {
+        console.error('找不到讀取進度按鈕');
     }
-}
-
-// 支援跨裝置存檔的功能
-function generateSaveCode(playerId) {
-    const progress = localStorage.getItem(`gameProgress_${playerId}`);
-    if (progress) {
-        // 將遊戲進度轉為Base64編碼
-        return btoa(JSON.stringify({
-            id: playerId,
-            progress: JSON.parse(progress)
-        }));
+    
+    // 成就圖鑑按鈕
+    if (achievementsBtn) {
+        achievementsBtn.addEventListener('click', function() {
+            console.log('點擊成就圖鑑按鈕');
+            window.location.href = 'achievements.html';
+        });
+    } else {
+        console.error('找不到成就圖鑑按鈕');
     }
-    return null;
-}
-
-function loadFromSaveCode(saveCode) {
-    try {
-        // 解碼並解析存檔數據
-        const data = JSON.parse(atob(saveCode));
-        const playerId = data.id;
-        const progress = data.progress;
-        
-        // 檢查ID是否存在
-        const player = playerData.find(p => p.id === playerId);
-        if (!player) {
-            return { success: false, message: \'無效的玩家ID\' };
-        }
-        
-        // 儲存進度
-        localStorage.setItem(`gameProgress_${playerId}`, JSON.stringify(progress));
-        localStorage.setItem(\'currentPlayerId\', playerId);
-        localStorage.setItem(\'playerName\', player.name);
-        localStorage.setItem(\'playerProfession\', player.profession);
-        
-        return { success: true, player: player };
-    } catch (e) {
-        console.error(\"無效的存檔碼\", e);
-        return { success: false, message: \'無效的存檔碼格式\' };
+    
+    // 結束遊戲按鈕
+    if (exitGameBtn) {
+        exitGameBtn.addEventListener('click', function() {
+            console.log('點擊結束遊戲按鈕');
+            if (confirm('確定要結束遊戲嗎？')) {
+                window.close();
+            }
+        });
+    } else {
+        console.error('找不到結束遊戲按鈕');
     }
-}
-
-// 遊戲狀態更新時檢查成就
-function checkAchievements() {
-    if (window.achievementSystem) {
-        // 獲取當前遊戲數據
-        const currentPlayerId = localStorage.getItem(\'currentPlayerId\');
-        if (!currentPlayerId) return;
+    
+    // 關閉模態框
+    closeModalBtns.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            console.log('點擊關閉模態框按鈕');
+            const modal = btn.closest('.modal');
+            if (modal) {
+                modal.style.display = 'none';
+            }
+        });
+    });
+    
+    // 點擊模態框外部關閉
+    window.addEventListener('click', function(event) {
+        if (event.target.classList.contains('modal')) {
+            event.target.style.display = 'none';
+        }
+    });
+    
+    // 處理玩家選擇
+    function populatePlayerList() {
+        const playerList = document.getElementById('player-list');
+        if (!playerList) {
+            console.error('找不到玩家列表元素');
+            return;
+        }
         
-        const gameProgressStr = localStorage.getItem(`gameProgress_${currentPlayerId}`);
-        if (!gameProgressStr) return;
+        playerList.innerHTML = '';
         
-        const gameProgress = JSON.parse(gameProgressStr);
+        if (playerData.length === 0) {
+            playerList.innerHTML = '<p>正在載入玩家資料...</p>';
+            return;
+        }
         
-        // 構建遊戲狀態
-        const gameState = {
-            // 基本信息
-            loginCount: parseInt(localStorage.getItem(\'loginCount\') || \'1\'),
-            prologueCompleted: localStorage.getItem(\'prologueCompleted\') === \'true\',
+        playerData.forEach(function(player) {
+            const playerDiv = document.createElement('div');
+            playerDiv.className = 'player-option';
+            playerDiv.innerHTML = `
+                <h3>${player.name}</h3>
+                <p>職業：${player.profession}</p>
+                <p>ID：${player.id}</p>
+            `;
             
-            // 試煉相關
-            visitedTrials: [],
-            completedTrials: {},
-            
-            // 其他統計
-            maxCorrectStreak: 0,
-            fastestTrialTime: 999,
-            fastestQuestionTime: 999,
-            retriesAfterFailure: 0,
-            lastTrialCompletionTime: new Date(),
-            lastTrialStartTime: new Date(),
-            
-            // 特殊條件
-            allThreeStarsSameDay: false,
-            firstAttemptAllThreeStars: false,
-            musicEnabledAllTrials: localStorage.getItem(\'musicPlaying\') === \'true\',
-            musicDisabledAllTrials: localStorage.getItem(\'musicPlaying\') === \'false\'
-        };
-        
-        // 填充試煉相關數據
-        if (gameProgress.completedTrials) {
-            for (const [trialName, trialData] of Object.entries(gameProgress.completedTrials)) {
-                if (trialData.score > 0) {
-                    gameState.visitedTrials.push(trialName);
-                    
-                    gameState.completedTrials[trialName] = {
-                        completed: trialData.completed,
-                        stars: trialData.stars,
-                        noErrors: trialData.noErrors
-                    };
+            playerDiv.addEventListener('click', function() {
+                console.log('選擇玩家:', player);
+                localStorage.setItem('currentPlayerId', player.id);
+                localStorage.setItem('currentPlayerName', player.name);
+                localStorage.setItem('currentPlayerProfession', player.profession);
+                
+                // 檢查是否有存檔
+                const existingProgress = localStorage.getItem(`gameProgress_${player.id}`);
+                if (existingProgress) {
+                    if (confirm(`發現 ${player.name} 的存檔，是否繼續之前的進度？`)) {
+                        window.location.href = 'kingdom_map.html';
+                    } else {
+                        // 重新開始遊戲
+                        localStorage.removeItem(`gameProgress_${player.id}`);
+                        window.location.href = 'prologue.html';
+                    }
+                } else {
+                    // 新遊戲
+                    window.location.href = 'prologue.html';
                 }
-            }
-        }
-        
-        // 檢查成就
-        window.achievementSystem.checkAllAchievements(gameState);
-    }
-}
-
-// 在頁面載入時檢查成就
-document.addEventListener(\'DOMContentLoaded\', async function() {
-    await loadPlayerData();
-
-       // 獲取DOM元素
-    const startBtn = document.getElementById("start-btn");
-    console.log("startBtn:", startBtn);
-    const loadBtn = document.getElementById("load-btn");
-    console.log("loadBtn:", loadBtn);
-    const achievementsBtn = document.getElementById("achievements-btn");
-    console.log("achievementsBtn:", achievementsBtn);
-    const exitBtn = document.getElementById("exit-btn");
-    console.log("exitBtn:", exitBtn);
-    const idModal = document.getElementById("id-modal");
-    console.log("idModal:", idModal);
-    const welcomeModal = document.getElementById("welcome-modal");
-    console.log("welcomeModal:", welcomeModal);
-    const closeBtn = document.querySelector(".close-btn");
-    console.log("closeBtn:", closeBtn);
-    const closeWelcomeBtn = document.querySelector(".close-welcome-btn");
-    console.log("closeWelcomeBtn:", closeWelcomeBtn);
-    const confirmIdBtn = document.getElementById("confirm-id");
-    console.log("confirmIdBtn:", confirmIdBtn);
-    const playerIdInput = document.getElementById("player-id");
-    console.log("playerIdInput:", playerIdInput);
-    const idError = document.getElementById("id-error");
-    console.log("idError:", idError);
-    const welcomeMessage = document.getElementById("welcome-message");
-    console.log("welcomeMessage:", welcomeMessage);
-    const startAdventureBtn = document.getElementById("start-adventure");
-    console.log("startAdventureBtn:", startAdventureBtn);d(\'start-adventure\');
-
-    // 開始冒險按鈕點擊事件
-    if (startBtn) {
-        startBtn.addEventListener(\'click\', function() {
-            idModal.style.display = \'block\';
-            playerIdInput.value = \'\';
-            idError.style.display = \'none\';
-        });
-    }
-
-    // 關閉ID輸入彈窗
-    if (closeBtn) {
-        closeBtn.addEventListener(\'click\', function() {
-            idModal.style.display = \'none\';
-        });
-    }
-
-    // 關閉歡迎訊息彈窗
-    if (closeWelcomeBtn) {
-        closeWelcomeBtn.addEventListener(\'click\', function() {
-            welcomeModal.style.display = \'none\';
+            });
+            
+            playerList.appendChild(playerDiv);
         });
     }
-
-    // 點擊彈窗外部關閉彈窗
-    window.addEventListener(\'click\', function(event) {
-        if (event.target === idModal) {
-            idModal.style.display = \'none\';
-        }
-        if (event.target === welcomeModal) {
-            welcomeModal.style.display = \'none\';
-        }
-    });
-
-    // 確認ID按鈕點擊事件
-    if (confirmIdBtn) {
-        confirmIdBtn.addEventListener(\'click\', function() {
-            const inputId = playerIdInput.value.trim();
-
-            if (inputId === \'\') {
-                idError.textContent = \'請輸入ID\';
-                idError.style.display = \'block\';
+    
+    // 處理存檔碼載入
+    const loadSaveBtn = document.getElementById('load-save-btn');
+    const saveCodeInput = document.getElementById('save-code-input');
+    
+    if (loadSaveBtn && saveCodeInput) {
+        loadSaveBtn.addEventListener('click', function() {
+            const saveCode = saveCodeInput.value.trim();
+            if (!saveCode) {
+                alert('請輸入存檔碼');
                 return;
             }
-
-            // 在玩家資料中查找ID
-            const player = playerData.find(p => p.id === inputId);
-
-            if (player) {
-                // ID存在，顯示歡迎訊息
-                idModal.style.display = \'none\';
-
-                // 設置歡迎訊息
-                const message = `
-                    <p class=\"highlight\">🌟 歡迎你，${player.profession}──${player.name}！</p>
-                    <p>你被召喚至這個充滿數學魔力的世界，肩負起拯救「數學魔法王國」的重大使命。</p>
-                    <p>傳說中，唯有真正的數學勇者，才能重新喚醒古老的「平方之力」──這股支撐王國、對抗黑暗的關鍵能量。</p>
-                    <p>現在，時機已到。</p>
-                    <p>接下來，你將踏上三段神聖試煉之路，學會感知、轉換與展開的力量。</p>
-                    <p>前方的挑戰將磨練你的智慧與勇氣，</p>
-                    <p>但只要堅持到底，王國的未來將因你而重生！</p>
-                    <p>📜 任務即將開始，請準備好你的數學之心──</p>
-                    <p>點擊下方按鈕，開啟你的冒險旅程！</p>
-                `;
-
-                welcomeMessage.innerHTML = message;
-                welcomeModal.style.display = \'block\';
-
-                // 儲存玩家ID到localStorage，實現跨裝置存檔
-                localStorage.setItem(\'currentPlayerId\', player.id);
-                localStorage.setItem(\'playerName\', player.name);
-                localStorage.setItem(\'playerProfession\', player.profession);
-
-                // 初始化遊戲進度
-                if (!localStorage.getItem(`gameProgress_${player.id}`)) {
-                    const initialProgress = {
-                        completedTrials: {
-                            "平方之泉": {
-                                completed: false,
-                                score: 0,
-                                challengesCompleted: [false, false, false, false, false, false]
-                            },
-                            "變換山谷": {
-                                completed: false,
-                                score: 0,
-                                challengesCompleted: [false, false, false, false, false, false]
-                            },
-                            "展開之塔": {
-                                completed: false,
-                                score: 0,
-                                challengesCompleted: [false, false, false, false, false, false]
-                            }
-                        },
-                        lastSaved: new Date().toISOString()
-                    };
-
-                    localStorage.setItem(`gameProgress_${player.id}`, JSON.stringify(initialProgress));
-                }
-
-                // 解鎖首次登入成就
-                if (window.achievementSystem) {
-                    window.achievementSystem.unlockAchievement(\'journey_1\');
-                }
-
+            
+            const result = loadFromSaveCode(saveCode);
+            if (result.success) {
+                alert('存檔載入成功！');
+                window.location.href = 'kingdom_map.html';
             } else {
-                // ID不存在，顯示錯誤訊息
-                idError.textContent = \'找不到此ID，請確認後重新輸入\';
-                idError.style.display = \'block\';
+                alert('存檔載入失敗：' + result.error);
             }
         });
     }
-
-    // 開始冒險按鈕點擊事件（歡迎訊息後）
-    if (startAdventureBtn) {
-        startAdventureBtn.addEventListener(\'click\', function() {
-            welcomeModal.style.display = \'none\';
-            // 導向序章頁面
-            window.location.href = \'prologue.html\';
-        });
-    }
-
-    // 讀取進度按鈕點擊事件
-    if (loadBtn) {
-        loadBtn.addEventListener(\'click\', function() {
-            // 檢查是否有存檔
-            const currentPlayerId = localStorage.getItem(\'currentPlayerId\');
-            if (currentPlayerId) {
-                const playerName = localStorage.getItem(\'playerName\');
-                const playerProfession = localStorage.getItem(\'playerProfession\');
-
-                if (confirm(`檢測到 ${playerProfession}${playerName} 的存檔，是否繼續遊戲？`)) {
-                    // 直接進入序章頁面
-                    window.location.href = \'prologue.html\';
-                }
+    
+    // 處理存檔碼生成
+    const generateSaveBtn = document.getElementById('generate-save-btn');
+    const saveCodeOutput = document.getElementById('save-code-output');
+    
+    if (generateSaveBtn && saveCodeOutput) {
+        generateSaveBtn.addEventListener('click', function() {
+            const currentPlayerId = localStorage.getItem('currentPlayerId');
+            if (!currentPlayerId) {
+                alert('請先開始遊戲');
+                return;
+            }
+            
+            const saveCode = generateSaveCode(currentPlayerId);
+            if (saveCode) {
+                saveCodeOutput.value = saveCode;
+                alert('存檔碼已生成，請複製保存');
             } else {
-                alert(\'未找到存檔記錄，請先開始新遊戲。\');
+                alert('沒有找到遊戲進度');
             }
         });
     }
+});
 
-    // 成就圖鑑按鈕點擊事件
-    if (achievementsBtn) {
-        achievementsBtn.addEventListener(\'click\', function() {
-            window.location.href = \'achievements.html\';
-        });
-    }
-
-    // 遊戲結束按鈕點擊事件
-    if (exitBtn) {
-        exitBtn.addEventListener(\'click\', function() {
-            if (confirm(\'確定要結束遊戲嗎？\')) {
-                alert(\'感謝遊玩《數學魔法王國：平方之旅》！\');
-            }
-        });
-    }
-});