spring.js

document.addEventListener('DOMContentLoaded', function() {
    // 檢查是否有玩家資料
    const currentPlayerId = localStorage.getItem('currentPlayerId');
    
    // 如果沒有玩家資料，重定向到首頁
    if (!currentPlayerId) {
        alert('請先登入遊戲！');
        window.location.href = 'index.html';
        return;
    }
    
    // 獲取DOM元素
    const storySection = document.getElementById('story-section');
    const quizSection = document.getElementById('quiz-section');
    const completionSection = document.getElementById('completion-section');
    const startChallengeBtn = document.getElementById('start-challenge');
    const questionText = document.getElementById('question-text');
    const optionsContainer = document.getElementById('options-container');
    const nextQuestionBtn = document.getElementById('next-question');
    const backToMapBtn = document.getElementById('back-to-map');
    const progressCount = document.getElementById('progress-count');
    const progressFill = document.getElementById('progress-fill');
    const scoreDisplay = document.getElementById('score-display');
    const finalScore = document.getElementById('final-score');
    const starsDisplay = document.getElementById('stars-display');
    
    // 遊戲狀態
    let currentQuestionIndex = 0;
    let score = 0;
    let totalQuestions = 6; // 改為6題
    let questions = [];
    let startTime = Date.now();
    
    // 生成平方題目 - 使用固定題目
    function generateQuestions() {
        questions = [
            {
                question: "8 的平方是多少？",
                options: [56, 64, 72, 81],
                correctAnswer: 64
            },
            {
                question: "哪個數的平方是 121？",
                options: [10, 11, 12, 13],
                correctAnswer: 11
            },
            {
                question: "5 的平方是多少？",
                options: [20, 30, 25, 35],
                correctAnswer: 25
            },
            {
                question: "哪個數的平方是 36？",
                options: [6, 7, 5, 8],
                correctAnswer: 6
            },
            {
                question: "12 的平方是多少？",
                options: [124, 132, 144, 154],
                correctAnswer: 144
            },
            {
                question: "哪個數的平方是 49？",
                options: [6, 8, 7, 9],
                correctAnswer: 7
            }
        ];
    }
    
    // 顯示當前題目
    function showQuestion() {
        if (currentQuestionIndex >= questions.length) {
            showCompletion();
            return;
        }
        
        const question = questions[currentQuestionIndex];
        questionText.textContent = question.question;
        
        // 清空選項容器
        optionsContainer.innerHTML = '';
        
        // 創建選項按鈕
        question.options.forEach((option, index) => {
            const button = document.createElement('button');
            button.textContent = option;
            button.className = 'option-btn';
            button.addEventListener('click', () => selectAnswer(option, button));
            optionsContainer.appendChild(button);
        });
        
        // 更新進度
        updateProgress();
        
        // 隱藏下一題按鈕
        if (nextQuestionBtn) {
            nextQuestionBtn.style.display = 'none';
        }
    }
    
    // 選擇答案
    function selectAnswer(selectedAnswer, buttonElement) {
        const question = questions[currentQuestionIndex];
        const isCorrect = selectedAnswer === question.correctAnswer;
        
        // 禁用所有選項按鈕
        const allButtons = optionsContainer.querySelectorAll('.option-btn');
        allButtons.forEach(btn => btn.disabled = true);
        
        // 標記正確和錯誤答案
        allButtons.forEach(btn => {
            if (parseInt(btn.textContent) === question.correctAnswer) {
                btn.classList.add('correct');
                btn.style.backgroundColor = '#4CAF50';
                btn.style.color = 'white';
            } else if (btn === buttonElement && !isCorrect) {
                btn.classList.add('incorrect');
                btn.style.backgroundColor = '#f44336';
                btn.style.color = 'white';
            }
        });
        
        if (isCorrect) {
            score++;
            // 播放正確音效
            const correctAudio = new Audio('bingo.mp3');
            correctAudio.play().catch(e => console.log('音效播放失敗:', e));
        } else {
            // 播放錯誤音效
            const wrongAudio = new Audio('wrong.mp3');
            wrongAudio.play().catch(e => console.log('音效播放失敗:', e));
        }
        
        // 更新分數顯示
        updateScore();
        
        // 顯示下一題按鈕
        if (nextQuestionBtn) {
            nextQuestionBtn.style.display = 'block';
        }
    }
    
    // 更新進度
    function updateProgress() {
        const progress = ((currentQuestionIndex + 1) / totalQuestions) * 100;
        if (progressFill) {
            progressFill.style.width = progress + '%';
        }
        if (progressCount) {
            progressCount.textContent = currentQuestionIndex + 1;
        }
    }
    
    // 更新分數
    function updateScore() {
        if (scoreDisplay) {
            scoreDisplay.textContent = `分數：${score}/${currentQuestionIndex + 1}`;
        }
    }
    
    // 下一題
    function nextQuestion() {
        currentQuestionIndex++;
        showQuestion();
    }
    
    // 顯示完成畫面
    function showCompletion() {
        const endTime = Date.now();
        const completionTime = Math.round((endTime - startTime) / 1000);
        
        if (quizSection) quizSection.style.display = 'none';
        if (completionSection) completionSection.style.display = 'block';
        
        // 計算星級
        const percentage = (score / totalQuestions) * 100;
        let stars = 0;
        if (percentage >= 90) stars = 3;
        else if (percentage >= 70) stars = 2;
        else if (percentage >= 50) stars = 1;
        
        // 顯示最終分數和星級
        if (finalScore) {
            finalScore.textContent = `最終分數：${score}/${totalQuestions} (${percentage.toFixed(1)}%)`;
        }
        
        // 顯示星星
        if (starsDisplay) {
            let starsHTML = '';
            for (let i = 0; i < 3; i++) {
                if (i < stars) {
                    starsHTML += '<span class="star filled">★</span>';
                } else {
                    starsHTML += '<span class="star">☆</span>';
                }
            }
            starsDisplay.innerHTML = starsHTML;
        }
        
        // 保存進度
        saveProgress(stars, score, completionTime);
        
        // 檢查成就
        if (window.achievementSystem) {
            const gameState = {
                currentTrial: 'spring',
                totalStars: stars,
                completedTrials: {
                    spring: {
                        score: score,
                        stars: stars,
                        challengesCompleted: 1,
                        noErrors: score === totalQuestions,
                        completionTime: completionTime,
                        firstAttemptAllThreeStars: stars === 3
                    }
                }
            };
            window.achievementSystem.checkAllAchievements(gameState);
        }
    }
    
    // 保存進度
    function saveProgress(stars, score, completionTime) {
        const currentPlayerId = localStorage.getItem('currentPlayerId');
        if (!currentPlayerId) return;
        
        // 獲取現有進度
        let gameProgress = JSON.parse(localStorage.getItem(`gameProgress_${currentPlayerId}`)) || {};
        
        // 更新平方之泉進度
        if (!gameProgress.spring || gameProgress.spring.stars < stars) {
            gameProgress.spring = {
                completed: true,
                stars: stars,
                score: score,
                completionTime: completionTime,
                completedAt: new Date().toISOString()
            };
        }
        
        // 保存進度
        localStorage.setItem(`gameProgress_${currentPlayerId}`, JSON.stringify(gameProgress));
        
        console.log('平方之泉進度已保存:', gameProgress.spring);
    }
    
    // 開始挑戰按鈕事件
    if (startChallengeBtn) {
        startChallengeBtn.addEventListener('click', function() {
            console.log('開始平方之泉挑戰');
            if (storySection) storySection.style.display = 'none';
            if (quizSection) quizSection.style.display = 'block';
            
            // 生成題目並開始
            generateQuestions();
            currentQuestionIndex = 0;
            score = 0;
            startTime = Date.now();
            showQuestion();
        });
    }
    
    // 下一題按鈕事件
    if (nextQuestionBtn) {
        nextQuestionBtn.addEventListener('click', nextQuestion);
    }
    
    // 返回地圖按鈕事件
    if (backToMapBtn) {
        backToMapBtn.addEventListener('click', function() {
            window.location.href = 'kingdom_map.html';
        });
    }
    
    // 前往下一試煉按鈕事件
    const nextTrialBtn = document.getElementById('next-trial');
    if (nextTrialBtn) {
        nextTrialBtn.addEventListener('click', function() {
            window.location.href = 'valley.html';
        });
    }
    
    // 音樂控制
    const bgmAudio = document.getElementById('bgm');
    const toggleBgmBtn = document.getElementById('toggle-bgm');
    
    if (bgmAudio && toggleBgmBtn) {
        // 檢查是否有保存的音樂狀態
        const musicPlaying = localStorage.getItem('musicPlaying') === 'true';
        const musicTime = parseFloat(localStorage.getItem('musicTime') || '0');
        
        if (musicPlaying) {
            bgmAudio.currentTime = musicTime;
            bgmAudio.play().catch(e => console.log('自動播放被阻止:', e));
            toggleBgmBtn.textContent = '音樂關';
        } else {
            toggleBgmBtn.textContent = '音樂開';
        }
        
        // 音樂開關按鈕
        toggleBgmBtn.addEventListener('click', function() {
            if (bgmAudio.paused) {
                bgmAudio.play().then(() => {
                    toggleBgmBtn.textContent = '音樂關';
                    localStorage.setItem('musicPlaying', 'true');
                }).catch(e => console.log('播放失敗:', e));
            } else {
                bgmAudio.pause();
                toggleBgmBtn.textContent = '音樂開';
                localStorage.setItem('musicPlaying', 'false');
            }
        });
        
        // 保存音樂播放時間
        bgmAudio.addEventListener('timeupdate', function() {
            localStorage.setItem('musicTime', bgmAudio.currentTime.toString());
        });
    }
    
    // 初始化顯示
    if (storySection) storySection.style.display = 'block';
    if (quizSection) quizSection.style.display = 'none';
    if (completionSection) completionSection.style.display = 'none';
});