Upload 42 files

achievements.js

@@ -1,262 +1,126 @@
-/**
- * 數學魔法王國：成就系統
- * 負責讀取成就資料、管理成就狀態、顯示成就卡片與通知
- */
-
-// 成就系統主類別
+// 成就系統類
 class AchievementSystem {
     constructor() {
-        this.achievements = []; // 從JSON載入的成就資料
-        this.userAchievements = {}; // 使用者的成就進度
-        this.toastQueue = []; // 成就通知佇列
-        this.isProcessingToast = false; // 是否正在處理通知佇列
+        this.achievements = [];
+        this.userAchievements = {};
+        this.toastContainer = null;
+        this.toastQueue = [];
+        this.isProcessingToast = false;
         
-        // DOM元素
-        this.achievementsGrid = document.getElementById('achievements-grid');
-        this.achievementsStats = document.getElementById('achievements-stats');
-        this.tabButtons = document.querySelectorAll('.tab-button');
-        this.toastContainer = document.getElementById('toast-container') || this.createToastContainer();
-        this.backButton = document.getElementById('back-button');
+        // 載入成就資料
+        this.loadAchievements();
         
-        // 初始化
-        this.init();
+        // 載入用戶成就進度
+        this.loadUserAchievements();
         
-        console.log('成就系統建構完成');
-    }
-    
-    // 初始化成就系統
-    async init() {
-        try {
-            // 載入成就資料
-            await this.loadAchievements();
-            
-            // 載入使用者成就進度
-            this.loadUserProgress();
-            
-            // 如果在成就頁面，渲染成就卡片
-            if (this.achievementsGrid) {
-                // 渲染成就卡片
-                this.renderAchievements('all');
-                
-                // 更新成就統計
-                this.updateStats();
-                
-                // 設定分類標籤事件
-                this.setupTabEvents();
-                
-                // 設定返回按鈕事件
-                this.setupBackButton();
-            }
-            
-            console.log('成就系統初始化完成');
-        } catch (error) {
-            console.error('成就系統初始化失敗:', error);
-        }
-    }
-    
-    // 創建通知容器
-    createToastContainer() {
-        console.log('創建通知容器');
-        const toastContainer = document.createElement('div');
-        toastContainer.className = 'toast-container';
-        toastContainer.id = 'toast-container';
-        document.body.appendChild(toastContainer);
-        return toastContainer;
+        // 創建通知容器
+        this.createToastContainer();
     }
     
     // 載入成就資料
     async loadAchievements() {
         try {
             const response = await fetch('achievements.json');
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            this.achievements = await response.json();
+            const data = await response.json();
+            this.achievements = data.achievements;
             console.log('成就資料載入成功:', this.achievements.length, '個成就');
         } catch (error) {
             console.error('載入成就資料失敗:', error);
-            // 如果無法載入，使用空陣列
-            this.achievements = [];
+            // 使用預設成就資料
+            this.achievements = this.getDefaultAchievements();
         }
     }
     
-    // 載入使用者成就進度
-    loadUserProgress() {
-        try {
-            // 從localStorage讀取使用者成就進度
-            const savedProgress = localStorage.getItem('userAchievements');
-            this.userAchievements = savedProgress ? JSON.parse(savedProgress) : {};
-            
-            console.log('使用者成就進度載入成功', this.userAchievements);
-        } catch (error) {
-            console.error('載入使用者成就進度失敗:', error);
-            this.userAchievements = {};
-        }
+    // 預設成就資料
+    getDefaultAchievements() {
+        return [
+            {
+                "id": "first_login",
+                "title": "初次登入",
+                "description": "歡迎來到數學魔法王國！",
+                "category": "journey",
+                "conditions": [{"type": "login_count", "value": 1}]
+            },
+            {
+                "id": "prologue_complete",
+                "title": "序章完成",
+                "description": "完成遊戲序章",
+                "category": "journey",
+                "conditions": [{"type": "complete_prologue", "value": true}]
+            },
+            {
+                "id": "spring_complete",
+                "title": "平方感知者",
+                "description": "完成平方之泉試煉",
+                "category": "trial",
+                "conditions": [{"type": "complete_trial", "trial": "spring"}]
+            }
+        ];
     }
     
-    // ��存使用者成就進度
-    saveUserProgress() {
-        try {
-            localStorage.setItem('userAchievements', JSON.stringify(this.userAchievements));
-            console.log('使用者成就進度儲存成功');
-        } catch (error) {
-            console.error('儲存使用者成就進度失敗:', error);
+    // 載入用戶成就進度
+    loadUserAchievements() {
+        const currentPlayerId = localStorage.getItem('currentPlayerId');
+        if (currentPlayerId) {
+            const savedAchievements = localStorage.getItem(`achievements_${currentPlayerId}`);
+            if (savedAchievements) {
+                this.userAchievements = JSON.parse(savedAchievements);
+                console.log('使用者成就進度載入成功:', Object.keys(this.userAchievements).length, '個成就');
+            }
         }
     }
     
-    // 渲染成就卡片
-    renderAchievements(type = 'all') {
-        if (!this.achievementsGrid) return;
-        
-        // 清空成就網格
-        this.achievementsGrid.innerHTML = '';
-        
-        // 篩選成就
-        const filteredAchievements = type === 'all' 
-            ? this.achievements 
-            : this.achievements.filter(achievement => achievement.type === type);
-        
-        // 如果沒有成就，顯示提示訊息
-        if (filteredAchievements.length === 0) {
-            this.achievementsGrid.innerHTML = '<p class="no-achievements">此分類沒有成就</p>';
-            return;
+    // 保存用戶成就進度
+    saveUserAchievements() {
+        const currentPlayerId = localStorage.getItem('currentPlayerId');
+        if (currentPlayerId) {
+            localStorage.setItem(`achievements_${currentPlayerId}`, JSON.stringify(this.userAchievements));
+            console.log('使用者成就進度已保存');
         }
-        
-        // 渲染每個成就卡片
-        filteredAchievements.forEach(achievement => {
-            const userProgress = this.userAchievements[achievement.id] || { unlocked: false };
-            const isUnlocked = userProgress.unlocked;
-            
-            // 創建成就卡片
-            const card = document.createElement('div');
-            card.className = `achievement-card ${achievement.type}`;
-            if (!isUnlocked) {
-                card.classList.add('locked');
-            }
-            
-            // 設定成就圖示 (使用emoji)
-            let icon = '🏆';
-            switch (achievement.type) {
-                case 'journey':
-                    icon = '🧭';
-                    break;
-                case 'trial':
-                    icon = '⚔️';
-                    break;
-                case 'secret':
-                    icon = '🔮';
-                    break;
-            }
-                // 卡片內容
-            card.innerHTML = `
-                <div class="achievement-icon">${icon}</div>
-                <h3 class="achievement-title">${achievement.title}</h3>
-                <p class="achievement-description">${isUnlocked || achievement.type !== 'secret' ? achievement.description : '??????????????????'}</p>
-                ${isUnlocked && userProgress.unlockedAt ? 
-                    `<div class="achievement-unlock-time">解鎖於: ${userProgress.unlockedAt}</div>` : ''}
-                ${!isUnlocked ? '<div class="lock-icon">🔒</div>' : ''}
-            `;      
-            this.achievementsGrid.appendChild(card);
-        });
     }
     
-    // 更新成就統計
-    updateStats() {
-        if (!this.achievementsStats) return;
-        
-        const totalAchievements = this.achievements.length;
-        const unlockedAchievements = Object.values(this.userAchievements)
-            .filter(progress => progress.unlocked).length;
-        
-        this.achievementsStats.textContent = `已解鎖成就：${unlockedAchievements} / ${totalAchievements}`;
+    // 創建通知容器
+    createToastContainer() {
+        let container = document.getElementById('toast-container');
+        if (!container) {
+            container = document.createElement('div');
+            container.id = 'toast-container';
+            container.className = 'toast-container';
+            document.body.appendChild(container);
+        }
+        this.toastContainer = container;
+        return container;
     }
     
-    // 設定分類標籤事件
-    setupTabEvents() {
-        if (!this.tabButtons) return;
-        
-        this.tabButtons.forEach(button => {
-            button.addEventListener('click', () => {
-                // 移除所有標籤的active類別
-                this.tabButtons.forEach(btn => btn.classList.remove('active'));
-                
-                // 添加active類別到當前標籤
-                button.classList.add('active');
-                
-                // 獲取標籤類型並渲染對應成就
-                const type = button.dataset.type;
-                this.renderAchievements(type);
-            });
-        });
+    // 解鎖成就
+    unlockAchievement(achievementId) {
+        if (!this.userAchievements[achievementId]) {
+            this.userAchievements[achievementId] = {
+                unlocked: true,
+                unlockedAt: new Date().toISOString()
+            };
+            this.saveUserAchievements();
+            console.log(`成就 ${achievementId} 已解鎖`);
+            return true;
+        }
+        return false;
     }
     
-    // 設定返回按鈕事件
-    setupBackButton() {
-        if (!this.backButton) return;
-        
-        // 返回按鈕已在HTML中直接設定為連結到kingdom_map.html
+    // 檢查成就是否已解鎖
+    isAchievementUnlocked(achievementId) {
+        return this.userAchievements[achievementId]?.unlocked || false;
     }
     
-    // 檢查成就是否解鎖
-    checkAchievement(id) {
-        const achievement = this.achievements.find(a => a.id === id);
-        if (!achievement) return false;
-        
-        // 如果成就已經解鎖，直接返回true
-        if (this.userAchievements[id]?.unlocked) return true;
-        
-        // 根據成就類型和條件檢查是否解鎖
-        // 這裡需要根據實際遊戲邏輯實現
-        // 此處僅為示例，實際應用中需要根據遊戲狀態檢查
-        return false;
+    // 獲取已解鎖成就數量
+    getUnlockedCount() {
+        return Object.values(this.userAchievements).filter(a => a.unlocked).length;
     }
     
-    // 解鎖成就
-    unlockAchievement(id) {
-        console.log(`嘗試解鎖成就 ID: ${id}`);
-        
-        const achievement = this.achievements.find(a => a.id === id);
-        if (!achievement) {
-            console.error(`找不到ID為 ${id} 的成就`);
-            return;
-        }
-        
-        // 如果成就已經解鎖，不做任何事
-        if (this.userAchievements[id]?.unlocked) {
-            console.log(`成就 "${achievement.title}" 已經解鎖過了`);
-            return;
-        }
-        
-        // 設定成就為已解鎖
-        const now = new Date();
-        const formattedDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
-        
-        this.userAchievements[id] = {
-            unlocked: true,
-            unlockedAt: formattedDate
-        };
-        
-        // 儲存使用者成就進度
-        this.saveUserProgress();
-        
-        // 更新成就統計
-        this.updateStats();
-        
-        // 如果當前在成就頁面且顯示的是該成就所屬類型，重新渲染
-        if (this.achievementsGrid) {
-            const activeTab = document.querySelector('.tab-button.active')?.dataset.type;
-            if (activeTab === 'all' || activeTab === achievement.type) {
-                this.renderAchievements(activeTab);
-            }
-        }
-        
-        // 顯示成就解鎖通知
-        this.showAchievementToast(achievement);
-                console.log(`成就 \"${achievement.title}\" 已解鎖!`);
-        // 將解鎖的成就添加到待處理佇列
-        this.addPendingAchievement(achievement.id);
+    // 獲取總成就數量
+    getTotalCount() {
+        return this.achievements.length;
     }
-
+    
     // 將成就添加到待處理佇列
     addPendingAchievement(achievementId) {
         let pendingAchievements = JSON.parse(localStorage.getItem('pendingAchievements')) || [];
@@ -275,48 +139,29 @@ class AchievementSystem {
     }
 
     // 顯示成就解鎖通知
-    showAchievementToast(achievement) {
+    async showAchievementToast(achievement) {
         console.log(`顯示成就解鎖通知: ${achievement.title}`);
         
         // 確保通知容器存在
         if (!this.toastContainer) {
-            this.toastContainer = this.createToastContainer();
-        }
-        
-        // 將成就添加到通知佇列
-        this.toastQueue.push(achievement);
-        
-        // 如果沒有正在處理通知，開始處理
-        if (!this.isProcessingToast) {
-            this.processToastQueue();
-        }
-    }    
-    // 處理通知佇列
-    async processToastQueue() {
-        if (this.toastQueue.length === 0) {
-            this.isProcessingToast = false;
-            return;
+            this.toastContainer = document.getElementById('toast-container');
+            if (!this.toastContainer) {
+                console.error('找不到通知容器');
+                return;
+            }
         }
         
-        this.isProcessingToast = true;
-        const achievement = this.toastQueue.shift();
-        
         // 創建通知元素
         const toast = document.createElement('div');
-        toast.className = `toast ${achievement.type}`;
+        toast.className = `toast ${achievement.category}`;
         
-        // 設定成就圖示 (使用emoji)
+        // 根據成就類別設置圖標
         let icon = '🏆';
-        switch (achievement.type) {
-            case 'journey':
-                icon = '🧭';
-                break;
-            case 'trial':
-                icon = '⚔️';
-                break;
-            case 'secret':
-                icon = '🔮';
-                break;
+        switch (achievement.category) {
+            case 'journey': icon = '🌟'; break;
+            case 'trial': icon = '⚔️'; break;
+            case 'secret': icon = '🔮'; break;
+            default: icon = '🏆'; break;
         }
         
         // 通知內容
@@ -335,27 +180,44 @@ class AchievementSystem {
         // 添加到通知容器
         this.toastContainer.appendChild(toast);
 
-        // 等待用戶點擊確認
-        await new Promise(resolve => {
+        // 自動消失或等待用戶點擊
+        return new Promise(resolve => {
             const confirmButton = document.createElement('button');
             confirmButton.textContent = '確認';
             confirmButton.className = 'toast-confirm-button';
+            confirmButton.style.cssText = `
+                background: #ff8c00;
+                color: white;
+                border: none;
+                padding: 8px 16px;
+                border-radius: 4px;
+                cursor: pointer;
+                margin-top: 10px;
+                font-size: 14px;
+            `;
             toast.appendChild(confirmButton);
-            confirmButton.addEventListener('click', resolve);
+            
+            const handleConfirm = () => {
+                toast.remove();
+                resolve();
+            };
+            
+            confirmButton.addEventListener('click', handleConfirm);
+            
+            // 10秒後自動消失
+            setTimeout(() => {
+                if (toast.parentNode) {
+                    toast.remove();
+                    resolve();
+                }
+            }, 10000);
         });
-        toast.remove();
-
-        // 處理下一個通知
-        this.processToastQueue();
     }
-    
+
     // 檢查所有成就條件
     checkAllAchievements(gameState) {
         console.log('檢查所有成就條件', gameState);
         
-        // 這個方法應該在遊戲狀態更新時調用
-        // gameState 是遊戲當前狀態，包含玩家進度、分數等信息
-        
         this.achievements.forEach(achievement => {
             // 如果成就已經解鎖，跳過
             if (this.userAchievements[achievement.id]?.unlocked) return;
@@ -366,145 +228,71 @@ class AchievementSystem {
             if (isUnlocked) {
                 console.log(`成就 "${achievement.title}" 條件已滿足，準備解鎖`);
                 this.unlockAchievement(achievement.id);
+                // 將成就添加到待處理佇列，而不是立即顯示
+                this.addPendingAchievement(achievement.id);
             }
         });
     }
     
     // 檢查特定成就條件
     checkAchievementCondition(achievement, gameState) {
-        // 這個方法需要根據實際遊戲邏輯實現
-        // 此處僅為示例，實際應用中需要根據遊戲狀態檢查
-        
-        const { condition } = achievement;
-        let result = false;
-        
-        switch (condition.type) {
-            case 'login_count':
-                result = gameState.loginCount >= condition.value;
-                break;
-                
-            case 'complete_prologue':
-                result = gameState.prologueCompleted === condition.value;
-                break;
-                
-            case 'visit_all_trials':
-                result = gameState.visitedTrials && 
-                       gameState.visitedTrials.includes('平方之泉') && 
-                       gameState.visitedTrials.includes('變換山谷') && 
-                       gameState.visitedTrials.includes('展開之塔');
-                break;
-                
-            case 'complete_all_trials':
-                result = gameState.completedTrials && 
-                       gameState.completedTrials['平方之泉']?.completed && 
-                       gameState.completedTrials['變換山谷']?.completed && 
-                       gameState.completedTrials['展開之塔']?.completed;
-                break;
-                
-            case 'min_stars_all_trials':
-                result = gameState.completedTrials && 
-                       gameState.completedTrials['平方之泉']?.stars >= condition.value && 
-                       gameState.completedTrials['變換山谷']?.stars >= condition.value && 
-                       gameState.completedTrials['展開之塔']?.stars >= condition.value;
-                break;
-                
-            case 'all_trials_three_stars':
-                result = gameState.completedTrials && 
-                       gameState.completedTrials['平方之泉']?.stars === 3 && 
-                       gameState.completedTrials['變換山谷']?.stars === 3 && 
-                       gameState.completedTrials['展開之塔']?.stars === 3;
-                break;
-                
-            case 'consecutive_login_days':
-                result = gameState.consecutiveLoginDays >= condition.value;
-                break;
-                
-            case 'complete_trial':
-                result = gameState.completedTrials && 
-                       gameState.completedTrials[condition.value]?.completed;
-                break;
-                
-            case 'trial_stars':
-                result = gameState.completedTrials && 
-                       gameState.completedTrials[condition.value.trial]?.stars >= condition.value.stars;
-                break;
-                
-            case 'trial_no_errors':
-                result = gameState.completedTrials && 
-                       gameState.completedTrials[condition.value]?.noErrors;
-                break;
-                
-            case 'correct_streak':
-                result = gameState.maxCorrectStreak >= condition.value;
-                break;
-                
-            case 'trial_completion_time':
-                result = gameState.fastestTrialTime && 
-                       gameState.fastestTrialTime <= condition.value;
-                break;
-                
-            case 'question_answer_time':
-                result = gameState.fastestQuestionTime && 
-                       gameState.fastestQuestionTime <= condition.value;
-                break;
-                
-            case 'retry_after_failure':
-                result = gameState.retriesAfterFailure >= condition.value;
-                break;
-                
-            case 'complete_trial_after_time':
-                const currentHour = new Date().getHours();
-                const currentMinute = new Date().getMinutes();
-                result = gameState.lastTrialCompletionTime && 
-                       (currentHour > condition.value.hour || 
-                        (currentHour === condition.value.hour && currentMinute >= condition.value.minute));
-                break;
-                
-            case 'start_trial_before_time':
-                const startHour = new Date().getHours();
-                const startMinute = new Date().getMinutes();
-                result = gameState.lastTrialStartTime && 
-                       (startHour < condition.value.hour || 
-                        (startHour === condition.value.hour && startMinute < condition.value.minute));
-                break;
-                
-            case 'complete_all_trials_on_weekend':
-                const day = new Date().getDay();
-                result = gameState.completedTrials && 
-                       gameState.completedTrials['平方之泉']?.completed && 
-                       gameState.completedTrials['變換山谷']?.completed && 
-                       gameState.completedTrials['展開之塔']?.completed && 
-                       (day === 0 || day === 6); // 0是星期日，6是星期六
-                break;
-                
-            case 'all_three_stars_same_day':
-                result = gameState.allThreeStarsSameDay;
-                break;
-                
-            case 'first_attempt_all_three_stars':
-                result = gameState.firstAttemptAllThreeStars;
-                break;
-                
-            case 'music_enabled_all_trials':
-                result = gameState.musicEnabledAllTrials;
-                break;
-                
-            case 'music_disabled_all_trials':
-                result = gameState.musicDisabledAllTrials;
-                break;
-                
-            default:
-                result = false;
-                break;
+        if (!achievement.conditions || achievement.conditions.length === 0) {
+            return false;
         }
         
-        console.log(`檢查成就 "${achievement.title}" 條件: ${condition.type}, 結果: ${result}`);
-        return result;
-    }
-    
-    // 模擬解鎖成就 (僅用於測試)
-    simulateUnlock(id) {
-        this.unlockAchievement(id);
+        // 所有條件都必須滿足
+        return achievement.conditions.every(condition => {
+            let result = false;
+            
+            switch (condition.type) {
+                case 'login_count':
+                    result = gameState.loginCount >= condition.value;
+                    break;
+                    
+                case 'complete_prologue':
+                    result = gameState.prologueCompleted === condition.value;
+                    break;
+                    
+                case 'complete_trial':
+                    result = gameState.completedTrials && 
+                           gameState.completedTrials[condition.trial]?.completed;
+                    break;
+                    
+                case 'visit_all_trials':
+                    result = gameState.visitedTrials && 
+                           gameState.visitedTrials.includes('spring') && 
+                           gameState.visitedTrials.includes('valley') && 
+                           gameState.visitedTrials.includes('tower');
+                    break;
+                    
+                case 'complete_all_trials':
+                    result = gameState.completedTrials && 
+                           gameState.completedTrials.spring?.completed && 
+                           gameState.completedTrials.valley?.completed && 
+                           gameState.completedTrials.tower?.completed;
+                    break;
+                    
+                case 'min_stars_all_trials':
+                    result = gameState.completedTrials && 
+                           gameState.completedTrials.spring?.stars >= condition.value && 
+                           gameState.completedTrials.valley?.stars >= condition.value && 
+                           gameState.completedTrials.tower?.stars >= condition.value;
+                    break;
+                    
+                case 'all_trials_three_stars':
+                    result = gameState.completedTrials && 
+                           gameState.completedTrials.spring?.stars === 3 && 
+                           gameState.completedTrials.valley?.stars === 3 && 
+                           gameState.completedTrials.tower?.stars === 3;
+                    break;
+                    
+                default:
+                    console.warn(`未知的成就條件類型: ${condition.type}`);
+                    result = false;
+            }
+            
+            return result;
+        });
     }
 }
 
@@ -513,73 +301,5 @@ document.addEventListener('DOMContentLoaded', () => {
     // 創建成就系統實例
     window.achievementSystem = new AchievementSystem();
     console.log('成就系統已掛載到全域 window 物件');
-    
-    // 測試用：添加模擬解鎖按鈕
-    if (location.search.includes('debug=true')) {
-        const debugButton = document.createElement('button');
-        debugButton.textContent = '模擬解鎖成就';
-        debugButton.style.position = 'fixed';
-        debugButton.style.bottom = '20px';
-        debugButton.style.left = '20px';
-        debugButton.style.zIndex = '1000';
-        debugButton.addEventListener('click', () => {
-            // 隨機選擇一個未解鎖的成就
-            const unlockedIds = Object.keys(window.achievementSystem.userAchievements)
-                .filter(id => window.achievementSystem.userAchievements[id].unlocked);
-            
-            const availableAchievements = window.achievementSystem.achievements
-                .filter(a => !unlockedIds.includes(a.id));
-            
-            if (availableAchievements.length > 0) {
-                const randomIndex = Math.floor(Math.random() * availableAchievements.length);
-                const achievementToUnlock = availableAchievements[randomIndex];
-                window.achievementSystem.simulateUnlock(achievementToUnlock.id);
-                console.log(`模擬解鎖成就: ${achievementToUnlock.title}`);
-            } else {
-                console.log('沒有可解鎖的成就了');
-            }
-        });
-        document.body.appendChild(debugButton);
-    }
 });
 
-// 提供全域函數，方便在其他頁面調用
-window.unlockAchievement = function(id) {
-    if (window.achievementSystem) {
-        window.achievementSystem.unlockAchievement(id);
-    } else {
-        console.error('成就系統尚未初始化，無法解鎖成就');
-    }
-};
-
-window.checkAllAchievements = function(gameState) {
-    if (window.achievementSystem) {
-        window.achievementSystem.checkAllAchievements(gameState);
-    } else {
-        console.error('成就系統尚未初始化，無法檢查成就');
-    }
-};
-
-/**
- * 成就系統整合指南
- * 
- * 1. 在遊戲主頁添加成就按鈕，點擊後導向成就頁面：
- *    <button onclick="window.location.href='achievements.html'">成就圖鑑</button>
- * 
- * 2. 在遊戲狀態更新時檢查成就：
- *    // 構建遊戲狀態
- *    const gameState = {
- *      // 遊戲相關資料...
- *    };
- *    
- *    // 檢查成就
- *    if (window.achievementSystem) {
- *      window.achievementSystem.checkAllAchievements(gameState);
- *    }
- * 
- * 3. 手動解鎖特定成就：
- *    // 例如，當玩家首次登入時
- *    if (window.achievementSystem) {
- *      window.achievementSystem.unlockAchievement('journey_1');
- *    }
- */

achievements_old.js

@@ -0,0 +1,599 @@
+/**
+ * 數學魔法王國：成就系統
+ * 負責讀取成就資料、管理成就狀態、顯示成就卡片與通知
+ */
+
+// 成就系統主類別
+class AchievementSystem {
+    constructor() {
+        this.achievements = []; // 從JSON載入的成就資料
+        this.userAchievements = {}; // 使用者的成就進度
+        this.toastQueue = []; // 成就通知佇列
+        this.isProcessingToast = false; // 是否正在處理通知佇列
+        
+        // DOM元素
+        this.achievementsGrid = document.getElementById('achievements-grid');
+        this.achievementsStats = document.getElementById('achievements-stats');
+        this.tabButtons = document.querySelectorAll('.tab-button');
+        this.toastContainer = document.getElementById('toast-container') || this.createToastContainer();
+        this.backButton = document.getElementById('back-button');
+        
+        // 初始化
+        this.init();
+        
+        console.log('成就系統建構完成');
+    }
+    
+    // 初始化成就系統
+    async init() {
+        try {
+            // 載入成就資料
+            await this.loadAchievements();
+            
+            // 載入使用者成就進度
+            this.loadUserProgress();
+            
+            // 如果在成就頁面，渲染成就卡片
+            if (this.achievementsGrid) {
+                // 渲染成就卡片
+                this.renderAchievements('all');
+                
+                // 更新成就統計
+                this.updateStats();
+                
+                // 設定分類標籤事件
+                this.setupTabEvents();
+                
+                // 設定返回按鈕事件
+                this.setupBackButton();
+            }
+            
+            console.log('成就系統初始化完成');
+        } catch (error) {
+            console.error('成就系統初始化失敗:', error);
+        }
+    }
+    
+    // 創建通知容器
+    createToastContainer() {
+        console.log('創建通知容器');
+        const toastContainer = document.createElement('div');
+        toastContainer.className = 'toast-container';
+        toastContainer.id = 'toast-container';
+        document.body.appendChild(toastContainer);
+        return toastContainer;
+    }
+    
+    // 載入成就資料
+    async loadAchievements() {
+        try {
+            const response = await fetch('achievements.json');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            this.achievements = await response.json();
+            console.log('成就資料載入成功:', this.achievements.length, '個成就');
+        } catch (error) {
+            console.error('載入成就資料失敗:', error);
+            // 如果無法載入，使用空陣列
+            this.achievements = [];
+        }
+    }
+    
+    // 載入使用者成就進度
+    loadUserProgress() {
+        try {
+            // 從localStorage讀取使用者成就進度
+            const savedProgress = localStorage.getItem('userAchievements');
+            this.userAchievements = savedProgress ? JSON.parse(savedProgress) : {};
+            
+            console.log('使用者成就進度載入成功', this.userAchievements);
+        } catch (error) {
+            console.error('載入使用者成就進度失敗:', error);
+            this.userAchievements = {};
+        }
+    }
+    
+    // 儲存使用者成就進度
+    saveUserProgress() {
+        try {
+            localStorage.setItem('userAchievements', JSON.stringify(this.userAchievements));
+            console.log('使用者成就進度儲存成功');
+        } catch (error) {
+            console.error('儲存使用者成就進度失敗:', error);
+        }
+    }
+    
+    // 渲染成就卡片
+    renderAchievements(type = 'all') {
+        if (!this.achievementsGrid) return;
+        
+        // 清空成就網格
+        this.achievementsGrid.innerHTML = '';
+        
+        // 篩選成就
+        const filteredAchievements = type === 'all' 
+            ? this.achievements 
+            : this.achievements.filter(achievement => achievement.type === type);
+        
+        // 如果沒有成就，顯示提示訊息
+        if (filteredAchievements.length === 0) {
+            this.achievementsGrid.innerHTML = '<p class="no-achievements">此分類沒有成就</p>';
+            return;
+        }
+        
+        // 渲染每個成就卡片
+        filteredAchievements.forEach(achievement => {
+            const userProgress = this.userAchievements[achievement.id] || { unlocked: false };
+            const isUnlocked = userProgress.unlocked;
+            
+            // 創建成就卡片
+            const card = document.createElement('div');
+            card.className = `achievement-card ${achievement.type}`;
+            if (!isUnlocked) {
+                card.classList.add('locked');
+            }
+            
+            // 設定成就圖示 (使用emoji)
+            let icon = '🏆';
+            switch (achievement.type) {
+                case 'journey':
+                    icon = '🧭';
+                    break;
+                case 'trial':
+                    icon = '⚔️';
+                    break;
+                case 'secret':
+                    icon = '🔮';
+                    break;
+            }
+                // 卡片內容
+            card.innerHTML = `
+                <div class="achievement-icon">${icon}</div>
+                <h3 class="achievement-title">${achievement.title}</h3>
+                <p class="achievement-description">${isUnlocked || achievement.type !== 'secret' ? achievement.description : '??????????????????'}</p>
+                ${isUnlocked && userProgress.unlockedAt ? 
+                    `<div class="achievement-unlock-time">解鎖於: ${userProgress.unlockedAt}</div>` : ''}
+                ${!isUnlocked ? '<div class="lock-icon">🔒</div>' : ''}
+            `;      
+            this.achievementsGrid.appendChild(card);
+        });
+    }
+    
+    // 更新成就統計
+    updateStats() {
+        if (!this.achievementsStats) return;
+        
+        const totalAchievements = this.achievements.length;
+        const unlockedAchievements = Object.values(this.userAchievements)
+            .filter(progress => progress.unlocked).length;
+        
+        this.achievementsStats.textContent = `已解鎖成就：${unlockedAchievements} / ${totalAchievements}`;
+    }
+    
+    // 設定分類標籤事件
+    setupTabEvents() {
+        if (!this.tabButtons) return;
+        
+        this.tabButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                // 移除所有標籤的active類別
+                this.tabButtons.forEach(btn => btn.classList.remove('active'));
+                
+                // 添加active類別到當前標籤
+                button.classList.add('active');
+                
+                // 獲取標籤類型並渲染對應成就
+                const type = button.dataset.type;
+                this.renderAchievements(type);
+            });
+        });
+    }
+    
+    // 設定返回按鈕事件
+    setupBackButton() {
+        if (!this.backButton) return;
+        
+        // 返回按鈕已在HTML中直接設定為連結到kingdom_map.html
+    }
+    
+    // 檢查成就是否解鎖
+    checkAchievement(id) {
+        const achievement = this.achievements.find(a => a.id === id);
+        if (!achievement) return false;
+        
+        // 如果成就已經解鎖，直接返回true
+        if (this.userAchievements[id]?.unlocked) return true;
+        
+        // 根據成就類型和條件檢查是否解鎖
+        // 這裡需要根據實際遊戲邏輯實現
+        // 此處僅為示例，實際應用中需要根據遊戲狀態檢查
+        return false;
+    }
+    
+    // 解鎖成就
+    unlockAchievement(id) {
+        console.log(`嘗試解鎖成就 ID: ${id}`);
+        
+        const achievement = this.achievements.find(a => a.id === id);
+        if (!achievement) {
+            console.error(`找不到ID為 ${id} 的成就`);
+            return;
+        }
+        
+        // 如果成就已經解鎖，不做任何事
+        if (this.userAchievements[id]?.unlocked) {
+            console.log(`成就 "${achievement.title}" 已經解鎖過了`);
+            return;
+        }
+        
+        // 設定成就為已解鎖
+        const now = new Date();
+        const formattedDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
+        
+        this.userAchievements[id] = {
+            unlocked: true,
+            unlockedAt: formattedDate
+        };
+        
+        // 儲存使用者成就進度
+        this.saveUserProgress();
+        
+        // 更新成就統計
+        this.updateStats();
+        
+        // 如果當前在成就頁面且顯示的是該成就所屬類型，重新渲染
+        if (this.achievementsGrid) {
+            const activeTab = document.querySelector('.tab-button.active')?.dataset.type;
+            if (activeTab === 'all' || activeTab === achievement.type) {
+                this.renderAchievements(activeTab);
+            }
+        }
+        
+        // 顯示成就解鎖通知
+        this.showAchievementToast(achievement);
+                console.log(`成就 \"${achievement.title}\" 已解鎖!`);
+        // 將解鎖的成就添加到待處理佇列
+        this.addPendingAchievement(achievement.id);
+    }
+
+    // 將成就添加到待處理佇列
+    addPendingAchievement(achievementId) {
+        let pendingAchievements = JSON.parse(localStorage.getItem('pendingAchievements')) || [];
+        if (!pendingAchievements.includes(achievementId)) {
+            pendingAchievements.push(achievementId);
+            localStorage.setItem('pendingAchievements', JSON.stringify(pendingAchievements));
+            console.log(`成就 ${achievementId} 已添加到待處理佇列`);
+        }
+    }
+
+    // 獲取並清除待處理成就
+    getAndClearPendingAchievements() {
+        const pendingAchievements = JSON.parse(localStorage.getItem('pendingAchievements')) || [];
+        localStorage.removeItem('pendingAchievements');
+        return pendingAchievements;
+    }
+
+    // 顯示成就解鎖通知
+    showAchievementToast(achievement) {
+        console.log(`顯示成就解鎖通知: ${achievement.title}`);
+        
+        // 確保通知容器存在
+        if (!this.toastContainer) {
+            this.toastContainer = this.createToastContainer();
+        }
+        
+        // 將成就添加到通知佇列
+        this.toastQueue.push(achievement);
+        
+        // 如果沒有正在處理通知，開始處理
+        if (!this.isProcessingToast) {    // 顯示成就解鎖通知
+    async showAchievementToast(achievement) {
+        console.log(`顯示成就解鎖通知: ${achievement.title}`);
+        
+        // 確保通知容器存在
+        if (!this.toastContainer) {
+            this.toastContainer = document.getElementById('toast-container');
+            if (!this.toastContainer) {
+                console.error('找不到通知容器');
+                return;
+            }
+        }
+        
+        // 創建通知元素
+        const toast = document.createElement('div');
+        toast.className = `toast ${achievement.category}`;
+        
+        // 根據成就類別設置圖標
+        let icon = '🏆';
+        switch (achievement.category) {
+            case 'journey': icon = '🌟'; break;
+            case 'trial': icon = '⚔️'; break;
+            case 'secret': icon = '🔮'; break;
+            default: icon = '🏆'; break;
+        }
+        
+        // 通知內容
+        toast.innerHTML = `
+            <div class="toast-icon">${icon}</div>
+            <div class="toast-content">
+                <div class="toast-title">成就解鎖！</div>
+                <div>【${achievement.title}】：${achievement.description}</div>
+            </div>
+        `;
+        
+        // 播放音效
+        const audio = new Audio('ding.mp3');
+        audio.play().catch(e => console.error('播放音效失敗:', e));
+
+        // 添加到通知容器
+        this.toastContainer.appendChild(toast);
+
+        // 自動消失或等待用戶點擊
+        return new Promise(resolve => {
+            const confirmButton = document.createElement('button');
+            confirmButton.textContent = '確認';
+            confirmButton.className = 'toast-confirm-button';
+            confirmButton.style.cssText = `
+                background: #ff8c00;
+                color: white;
+                border: none;
+                padding: 8px 16px;
+                border-radius: 4px;
+                cursor: pointer;
+                margin-top: 10px;
+                font-size: 14px;
+            `;
+            toast.appendChild(confirmButton);
+            
+            const handleConfirm = () => {
+                toast.remove();
+                resolve();
+            };
+            
+            confirmButton.addEventListener('click', handleConfirm);
+            
+            // 10秒後自動消失
+            setTimeout(() => {
+                if (toast.parentNode) {
+                    toast.remove();
+                    resolve();
+                }
+            }, 10000);
+        });
+    }    // 檢查所有成就條件
+    checkAllAchievements(gameState) {
+        console.log('檢查所有成就條件', gameState);
+        
+        // 這個方法應該在遊戲狀態更新時調用
+        // gameState 是遊戲當前狀態，包含玩家進度、分數等信息
+        
+        this.achievements.forEach(achievement => {
+            // 如果成就已經解鎖，跳過
+            if (this.userAchievements[achievement.id]?.unlocked) return;
+            
+            // 根據成就條件檢查是否解鎖
+            const isUnlocked = this.checkAchievementCondition(achievement, gameState);
+            
+            if (isUnlocked) {
+                console.log(`成就 "${achievement.title}" 條件已滿足，準備解鎖`);
+                this.unlockAchievement(achievement.id);
+                // 將成就添加到待處理佇列，而不是立即顯示
+                this.addPendingAchievement(achievement.id);
+            }
+        });
+    }
+    
+    // 檢查特定成就條件
+    checkAchievementCondition(achievement, gameState) {
+        // 這個方法需要根據實際遊戲邏輯實現
+        // 此處僅為示例，實際應用中需要根據遊戲狀態檢查
+        
+        const { condition } = achievement;
+        let result = false;
+        
+        switch (condition.type) {
+            case 'login_count':
+                result = gameState.loginCount >= condition.value;
+                break;
+                
+            case 'complete_prologue':
+                result = gameState.prologueCompleted === condition.value;
+                break;
+                
+            case 'visit_all_trials':
+                result = gameState.visitedTrials && 
+                       gameState.visitedTrials.includes('平方之泉') && 
+                       gameState.visitedTrials.includes('變換山谷') && 
+                       gameState.visitedTrials.includes('展開之塔');
+                break;
+                
+            case 'complete_all_trials':
+                result = gameState.completedTrials && 
+                       gameState.completedTrials['平方之泉']?.completed && 
+                       gameState.completedTrials['變換山谷']?.completed && 
+                       gameState.completedTrials['展開之塔']?.completed;
+                break;
+                
+            case 'min_stars_all_trials':
+                result = gameState.completedTrials && 
+                       gameState.completedTrials['平方之泉']?.stars >= condition.value && 
+                       gameState.completedTrials['變換山谷']?.stars >= condition.value && 
+                       gameState.completedTrials['展開之塔']?.stars >= condition.value;
+                break;
+                
+            case 'all_trials_three_stars':
+                result = gameState.completedTrials && 
+                       gameState.completedTrials['平方之泉']?.stars === 3 && 
+                       gameState.completedTrials['變換山谷']?.stars === 3 && 
+                       gameState.completedTrials['展開之塔']?.stars === 3;
+                break;
+                
+            case 'consecutive_login_days':
+                result = gameState.consecutiveLoginDays >= condition.value;
+                break;
+                
+            case 'complete_trial':
+                result = gameState.completedTrials && 
+                       gameState.completedTrials[condition.value]?.completed;
+                break;
+                
+            case 'trial_stars':
+                result = gameState.completedTrials && 
+                       gameState.completedTrials[condition.value.trial]?.stars >= condition.value.stars;
+                break;
+                
+            case 'trial_no_errors':
+                result = gameState.completedTrials && 
+                       gameState.completedTrials[condition.value]?.noErrors;
+                break;
+                
+            case 'correct_streak':
+                result = gameState.maxCorrectStreak >= condition.value;
+                break;
+                
+            case 'trial_completion_time':
+                result = gameState.fastestTrialTime && 
+                       gameState.fastestTrialTime <= condition.value;
+                break;
+                
+            case 'question_answer_time':
+                result = gameState.fastestQuestionTime && 
+                       gameState.fastestQuestionTime <= condition.value;
+                break;
+                
+            case 'retry_after_failure':
+                result = gameState.retriesAfterFailure >= condition.value;
+                break;
+                
+            case 'complete_trial_after_time':
+                const currentHour = new Date().getHours();
+                const currentMinute = new Date().getMinutes();
+                result = gameState.lastTrialCompletionTime && 
+                       (currentHour > condition.value.hour || 
+                        (currentHour === condition.value.hour && currentMinute >= condition.value.minute));
+                break;
+                
+            case 'start_trial_before_time':
+                const startHour = new Date().getHours();
+                const startMinute = new Date().getMinutes();
+                result = gameState.lastTrialStartTime && 
+                       (startHour < condition.value.hour || 
+                        (startHour === condition.value.hour && startMinute < condition.value.minute));
+                break;
+                
+            case 'complete_all_trials_on_weekend':
+                const day = new Date().getDay();
+                result = gameState.completedTrials && 
+                       gameState.completedTrials['平方之泉']?.completed && 
+                       gameState.completedTrials['變換山谷']?.completed && 
+                       gameState.completedTrials['展開之塔']?.completed && 
+                       (day === 0 || day === 6); // 0是星期日，6是星期六
+                break;
+                
+            case 'all_three_stars_same_day':
+                result = gameState.allThreeStarsSameDay;
+                break;
+                
+            case 'first_attempt_all_three_stars':
+                result = gameState.firstAttemptAllThreeStars;
+                break;
+                
+            case 'music_enabled_all_trials':
+                result = gameState.musicEnabledAllTrials;
+                break;
+                
+            case 'music_disabled_all_trials':
+                result = gameState.musicDisabledAllTrials;
+                break;
+                
+            default:
+                result = false;
+                break;
+        }
+        
+        console.log(`檢查成就 "${achievement.title}" 條件: ${condition.type}, 結果: ${result}`);
+        return result;
+    }
+    
+    // 模擬解鎖成就 (僅用於測試)
+    simulateUnlock(id) {
+        this.unlockAchievement(id);
+    }
+}
+
+// 當頁面載入完成後初始化成就系統
+document.addEventListener('DOMContentLoaded', () => {
+    // 創建成就系統實例
+    window.achievementSystem = new AchievementSystem();
+    console.log('成就系統已掛載到全域 window 物件');
+    
+    // 測試用：添加模擬解鎖按鈕
+    if (location.search.includes('debug=true')) {
+        const debugButton = document.createElement('button');
+        debugButton.textContent = '模擬解鎖成就';
+        debugButton.style.position = 'fixed';
+        debugButton.style.bottom = '20px';
+        debugButton.style.left = '20px';
+        debugButton.style.zIndex = '1000';
+        debugButton.addEventListener('click', () => {
+            // 隨機選擇一個未解鎖的成就
+            const unlockedIds = Object.keys(window.achievementSystem.userAchievements)
+                .filter(id => window.achievementSystem.userAchievements[id].unlocked);
+            
+            const availableAchievements = window.achievementSystem.achievements
+                .filter(a => !unlockedIds.includes(a.id));
+            
+            if (availableAchievements.length > 0) {
+                const randomIndex = Math.floor(Math.random() * availableAchievements.length);
+                const achievementToUnlock = availableAchievements[randomIndex];
+                window.achievementSystem.simulateUnlock(achievementToUnlock.id);
+                console.log(`模擬解鎖成就: ${achievementToUnlock.title}`);
+            } else {
+                console.log('沒有可解鎖的成就了');
+            }
+        });
+        document.body.appendChild(debugButton);
+    }
+});
+
+// 提供全域函數，方便在其他頁面調用
+window.unlockAchievement = function(id) {
+    if (window.achievementSystem) {
+        window.achievementSystem.unlockAchievement(id);
+    } else {
+        console.error('成就系統尚未初始化，無法解鎖成就');
+    }
+};
+
+window.checkAllAchievements = function(gameState) {
+    if (window.achievementSystem) {
+        window.achievementSystem.checkAllAchievements(gameState);
+    } else {
+        console.error('成就系統尚未初始化，無法檢查成就');
+    }
+};
+
+/**
+ * 成就系統整合指南
+ * 
+ * 1. 在遊戲主頁添加成就按鈕，點擊後導向成就頁面：
+ *    <button onclick="window.location.href='achievements.html'">成就圖鑑</button>
+ * 
+ * 2. 在遊戲狀態更新時檢查成就：
+ *    // 構建遊戲狀態
+ *    const gameState = {
+ *      // 遊戲相關資料...
+ *    };
+ *    
+ *    // 檢查成就
+ *    if (window.achievementSystem) {
+ *      window.achievementSystem.checkAllAchievements(gameState);
+ *    }
+ * 
+ * 3. 手動解鎖特定成就：
+ *    // 例如，當玩家首次登入時
+ *    if (window.achievementSystem) {
+ *      window.achievementSystem.unlockAchievement('journey_1');
+ *    }
+ */

kingdom_map.js

@@ -1,16 +1,31 @@
 document.addEventListener('DOMContentLoaded', function() {
     // 檢查是否有玩家資料
     const currentPlayerId = localStorage.getItem('currentPlayerId');
-    const playerName = localStorage.getItem('playerName');
-    const playerProfession = localStorage.getItem('playerProfession');
     
     // 如果沒有玩家資料，重定向到首頁
-    if (!currentPlayerId || !playerName || !playerProfession) {
+    if (!currentPlayerId) {
         alert('請先登入遊戲！');
         window.location.href = 'index.html';
         return;
     }
     
+    // 檢查並顯示待處理的成就通知
+    if (window.achievementSystem) {
+        const pendingAchievements = window.achievementSystem.getAndClearPendingAchievements();
+        if (pendingAchievements.length > 0) {
+            console.log('發現待處理成就:', pendingAchievements);
+            // 延遲顯示成就通知，確保頁面完全載入
+            setTimeout(() => {
+                pendingAchievements.forEach(achievementId => {
+                    const achievement = window.achievementSystem.achievements.find(a => a.id === achievementId);
+                    if (achievement) {
+                        window.achievementSystem.showAchievementToast(achievement);
+                    }
+                });
+            }, 1000);
+        }
+    }
+    
     // 獲取DOM元素
     const springLocation = document.getElementById('spring-location');
     const valleyLocation = document.getElementById('valley-location');