Upload 42 files

achievements.html

@@ -301,5 +301,96 @@
     </div>
 
     <script src="achievements.js"></script>
+    <script>
+        // 等待成就系統載入完成後再顯示成就
+        document.addEventListener('DOMContentLoaded', function() {
+            // 等待成就系統初始化
+            const waitForAchievementSystem = () => {
+                if (window.achievementSystem && window.achievementSystem.achievements.length > 0) {
+                    displayAchievements();
+                } else {
+                    setTimeout(waitForAchievementSystem, 100);
+                }
+            };
+            
+            setTimeout(waitForAchievementSystem, 500);
+        });
+        
+        function displayAchievements() {
+            const achievementSystem = window.achievementSystem;
+            if (!achievementSystem) {
+                console.error('成就系統未載入');
+                return;
+            }
+            
+            const achievementsContainer = document.getElementById('achievements-container');
+            if (!achievementsContainer) {
+                console.error('找不到成就容器');
+                return;
+            }
+            
+            // 清空容器
+            achievementsContainer.innerHTML = '';
+            
+            // 顯示成就
+            achievementSystem.achievements.forEach(achievement => {
+                const isUnlocked = achievementSystem.isAchievementUnlocked(achievement.id);
+                const achievementCard = createAchievementCard(achievement, isUnlocked);
+                achievementsContainer.appendChild(achievementCard);
+            });
+            
+            // 更新統計
+            updateAchievementStats();
+        }
+        
+        function createAchievementCard(achievement, isUnlocked) {
+            const card = document.createElement('div');
+            card.className = `achievement-card ${achievement.type || achievement.category} ${isUnlocked ? 'unlocked' : 'locked'}`;
+            
+            const icon = getAchievementIcon(achievement.type || achievement.category);
+            const title = isUnlocked ? achievement.title : '???';
+            const description = isUnlocked ? achievement.description : '尚未解鎖';
+            
+            card.innerHTML = `
+                <div class="achievement-icon">${icon}</div>
+                <div class="achievement-content">
+                    <h3 class="achievement-title">${title}</h3>
+                    <p class="achievement-description">${description}</p>
+                    ${isUnlocked ? `<div class="achievement-date">解鎖時間：${formatDate(window.achievementSystem.userAchievements[achievement.id]?.unlockedAt)}</div>` : ''}
+                </div>
+                <div class="achievement-status">
+                    ${isUnlocked ? '<span class="status-unlocked">✓</span>' : '<span class="status-locked">🔒</span>'}
+                </div>
+            `;
+            
+            return card;
+        }
+        
+        function getAchievementIcon(type) {
+            switch (type) {
+                case 'journey': return '🌟';
+                case 'trial': return '⚔️';
+                case 'secret': return '🔮';
+                default: return '🏆';
+            }
+        }
+        
+        function formatDate(dateString) {
+            if (!dateString) return '未知';
+            const date = new Date(dateString);
+            return date.toLocaleDateString('zh-TW');
+        }
+        
+        function updateAchievementStats() {
+            const achievementSystem = window.achievementSystem;
+            const unlockedCount = achievementSystem.getUnlockedCount();
+            const totalCount = achievementSystem.getTotalCount();
+            
+            const statsElement = document.querySelector('.achievement-stats');
+            if (statsElement) {
+                statsElement.textContent = `已解鎖：${unlockedCount}/${totalCount}`;
+            }
+        }
+    </script>
 </body>
 </html>

achievements.js

@@ -1,7 +1,7 @@
 // 成就系統類
 class AchievementSystem {
     constructor() {
-        this.achievements = [];
+        this.achievements = []; // 初始化為空陣列
         this.userAchievements = {};
         this.toastContainer = null;
         this.toastQueue = [];
@@ -21,13 +21,26 @@ class AchievementSystem {
     async loadAchievements() {
         try {
             const response = await fetch('achievements.json');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
             const data = await response.json();
-            this.achievements = data.achievements;
+            
+            // achievements.json 直接是陣列格式，不是 {achievements: [...]}
+            if (Array.isArray(data)) {
+                this.achievements = data;
+            } else if (data.achievements && Array.isArray(data.achievements)) {
+                this.achievements = data.achievements;
+            } else {
+                throw new Error('成就資料格式不正確');
+            }
+            
             console.log('成就資料載入成功:', this.achievements.length, '個成就');
         } catch (error) {
             console.error('載入成就資料失敗:', error);
             // 使用預設成就資料
             this.achievements = this.getDefaultAchievements();
+            console.log('使用預設成就資料:', this.achievements.length, '個成就');
         }
     }