script.js

class FortuneGame {
    constructor() {
        this.initializeElements();
        this.bindEvents();
        this.fortuneTemplates = this.initializeTemplates();
    }

    initializeElements() {
        this.questionInput = document.getElementById('question');
        this.styleSelect = document.getElementById('style');
        this.drawButton = document.getElementById('drawLot');
        this.loadingDiv = document.getElementById('loading');
        this.resultDiv = document.getElementById('result');
        this.fortuneText = document.getElementById('fortuneText');
        this.drawAgainButton = document.getElementById('drawAgain');
    }

    bindEvents() {
        this.drawButton.addEventListener('click', () => this.drawFortune());
        this.drawAgainButton.addEventListener('click', () => this.resetGame());
    }

    initializeTemplates() {
        return {
            traditional: {
                prefix: ['天機不可洩露，然神明慈悲，為汝指點迷津：', '古人云，命由天定，運由己造：', '觀汝面相，神明有言：'],
                patterns: [
                    '山重水複疑無路，柳暗花明又一村。{question}之事，需耐心等待，時機成熟自有轉機。',
                    '塞翁失馬，焉知非福。{question}雖有波折，然禍福相依，終將苦盡甘來。',
                    '天將降大任於斯人也，必先苦其心志。{question}之困頓，乃上天之考驗，堅持必有收穫。',
                    '水滴石穿，非一日之功。{question}需循序漸進，莫急躁，穩紮穩打方能成功。'
                ],
                suffix: ['願汝謹記在心，行善積德，自有福報。', '此乃天意，順應自然，必有佳音。', '神明護佑，心誠則靈。']
            },
            modern: {
                prefix: ['AI 神明上線啦！讓我來分析一下：', '現代神明表示：', '根據大數據分析（誤）：'],
                patterns: [
                    '關於{question}，我的建議是：先喝杯咖啡冷靜一下，然後該幹嘛幹嘛，船到橋頭自然直！',
                    '{question}這件事啊，就像網路購物一樣，有時候需要等待配送，急也沒用，不如先追個劇？',
                    '對於{question}，我想說：人生就像寫程式，遇到 bug 是正常的，debug 一下就好了！',
                    '{question}讓你煩惱？別擔心，就算是 AI 也會當機，何況是人生呢？重開機試試看！'
                ],
                suffix: ['記住，保持幽默感比什麼都重要！', '以上建議僅供參考，如有雷同純屬巧合 😄', '祝你好運，記得給五星好評！']
            },
            wise: {
                prefix: ['智者曰：', '哲人有言：', '深思之後，吾有所悟：'],
                patterns: [
                    '關於{question}，真正的答案不在外求，而在內心。靜下心來聆聽自己的聲音，你已經知道該怎麼做了。',
                    '{question}如同人生的一面鏡子，反映的是你內心的狀態。改變心境，外在世界也會隨之改變。',
                    '面對{question}，記住：每個挑戰都是成長的機會，每個困難都是智慧的養分。',
                    '{question}教會你的，不只是解決問題的方法，更是面對未知的勇氣和智慧。'
                ],
                suffix: ['願你在人生的道路上，既有勇氣面對挑戰，也有智慧享受過程。', '真正的智慧，是知道什麼時候該堅持，什麼時候該放下。', '記住，你比你想像的更強大。']
            },
            encouraging: {
                prefix: ['親愛的朋友，', '溫暖的神明想對你說：', '請相信，'],
                patterns: [
                    '關於{question}，我看到了你的努力和堅持。雖然現在可能還看不到結果，但每一步都在為美好的未來鋪路。',
                    '{question}讓你感到不安，這很正常。但請記住，你已經比昨天的自己更勇敢了，這就是最大的進步。',
                    '面對{question}，你並不孤單。每個人都有自己的節奏，不要和別人比較，專注於自己的成長就好。',
                    '{question}或許讓你感到迷茫，但迷茫也是人生的一部分。在這個過程中，你正在成為更好的自己。'
                ],
                suffix: ['你值得所有美好的事物，請對自己溫柔一點。', '相信自己，你擁有克服一切困難的力量。', '無論何時，都要記得愛自己，你是獨一無二的。']
            }
        };
    }

    async drawFortune() {
        const question = this.questionInput.value.trim();
        if (!question) {
            alert('請先輸入你想問的問題喔！');
            return;
        }

        this.showLoading();
        
        // 模擬 AI 處理時間
        await this.delay(2000 + Math.random() * 2000);
        
        const fortune = this.generateFortune(question);
        this.showResult(fortune);
    }

    generateFortune(question) {
        const style = this.styleSelect.value;
        const template = this.fortuneTemplates[style];
        
        const prefix = this.getRandomItem(template.prefix);
        const pattern = this.getRandomItem(template.patterns);
        const suffix = this.getRandomItem(template.suffix);
        
        const mainText = pattern.replace('{question}', question);
        
        return `${prefix}\n\n${mainText}\n\n${suffix}`;
    }

    getRandomItem(array) {
        return array[Math.floor(Math.random() * array.length)];
    }

    showLoading() {
        this.drawButton.style.display = 'none';
        this.resultDiv.classList.add('hidden');
        this.loadingDiv.classList.remove('hidden');
    }

    showResult(fortune) {
        this.loadingDiv.classList.add('hidden');
        this.fortuneText.textContent = fortune;
        this.resultDiv.classList.remove('hidden');
    }

    resetGame() {
        this.resultDiv.classList.add('hidden');
        this.drawButton.style.display = 'block';
        this.questionInput.value = '';
    }

    delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}

// 初始化遊戲
document.addEventListener('DOMContentLoaded', () => {
    new FortuneGame();
});

// 添加一些互動效果
document.addEventListener('DOMContentLoaded', () => {
    // 添加飄落的花瓣效果
    createFloatingElements();
});

function createFloatingElements() {
    const elements = ['🌸', '🍃', '✨', '🎋'];
    
    setInterval(() => {
        if (Math.random() < 0.3) {
            const element = document.createElement('div');
            element.textContent = elements[Math.floor(Math.random() * elements.length)];
            element.style.position = 'fixed';
            element.style.left = Math.random() * 100 + 'vw';
            element.style.top = '-50px';
            element.style.fontSize = '20px';
            element.style.pointerEvents = 'none';
            element.style.zIndex = '1000';
            element.style.animation = `fall ${3 + Math.random() * 3}s linear forwards`;
            
            document.body.appendChild(element);
            
            setTimeout(() => {
                element.remove();
            }, 6000);
        }
    }, 1000);
}

// 添加 CSS 動畫
const style = document.createElement('style');
style.textContent = `
    @keyframes fall {
        to {
            transform: translateY(100vh) rotate(360deg);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);