InfoGenie/InfoGenie-frontend/public/toolbox/学习工具/计算机英语词汇学习/app.js

// 计算机英语词汇学习应用
class VocabularyApp {
    constructor() {
        this.vocabulary = vocabularyData;
        this.currentIndex = 0;
        this.learningMode = 'sequential'; // sequential, random, reverse
        this.randomIndices = [];
        this.history = [];
        
        this.initializeElements();
        this.initializeEventListeners();
        this.initializeApp();
    }
    
    initializeElements() {
        // 获取DOM元素
        this.elements = {
            wordNumber: document.getElementById('wordNumber'),
            englishWord: document.getElementById('englishWord'),
            phonetic: document.getElementById('phonetic'),
            wordType: document.getElementById('wordType'),
            chineseMeaning: document.getElementById('chineseMeaning'),
            currentIndex: document.getElementById('currentIndex'),
            totalWords: document.getElementById('totalWords'),
            prevBtn: document.getElementById('prevBtn'),
            nextBtn: document.getElementById('nextBtn'),
            sequentialMode: document.getElementById('sequentialMode'),
            randomMode: document.getElementById('randomMode'),
            reverseMode: document.getElementById('reverseMode')
        };
    }
    
    initializeEventListeners() {
        // 模式切换按钮
        this.elements.sequentialMode.addEventListener('click', () => this.setLearningMode('sequential'));
        this.elements.randomMode.addEventListener('click', () => this.setLearningMode('random'));
        this.elements.reverseMode.addEventListener('click', () => this.setLearningMode('reverse'));
        
        // 绑定按钮事件
        this.elements.prevBtn.addEventListener('click', () => this.previousWord());
        this.elements.nextBtn.addEventListener('click', () => this.nextWord());
        
        // 键盘快捷键
        document.addEventListener('keydown', (e) => this.handleKeyPress(e));
    }
    
    initializeApp() {
        // 设置总词汇数
        this.elements.totalWords.textContent = this.vocabulary.length;
        
        // 生成随机索引数组
        this.generateRandomIndices();
        
        // 显示第一个词汇
        this.displayCurrentWord();
        
        // 更新按钮状态
        this.updateButtonStates();
    }
    
    generateRandomIndices() {
        // 生成随机索引数组
        this.randomIndices = Array.from({length: this.vocabulary.length}, (_, i) => i);
        
        // Fisher-Yates 洗牌算法
        for (let i = this.randomIndices.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [this.randomIndices[i], this.randomIndices[j]] = [this.randomIndices[j], this.randomIndices[i]];
        }
    }
    
    setLearningMode(mode) {
        this.learningMode = mode;
        
        // 更新按钮样式
        document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
        this.elements[mode + 'Mode'].classList.add('active');
        
        // 重置当前索引
        this.currentIndex = 0;
        this.history = [];
        
        // 如果是随机模式，重新生成随机索引
        if (mode === 'random') {
            this.generateRandomIndices();
        }
        
        // 显示当前词汇
        this.displayCurrentWord();
        this.updateButtonStates();
    }
    
    getCurrentWordIndex() {
        switch (this.learningMode) {
            case 'sequential':
                return this.currentIndex;
            case 'random':
                return this.randomIndices[this.currentIndex];
            case 'reverse':
                return this.vocabulary.length - 1 - this.currentIndex;
            default:
                return this.currentIndex;
        }
    }
    
    displayCurrentWord() {
        const wordIndex = this.getCurrentWordIndex();
        const word = this.vocabulary[wordIndex];
        
        if (word) {
            this.elements.wordNumber.textContent = word.id;
            this.elements.englishWord.textContent = word.word;
            this.elements.phonetic.textContent = word.phonetic;
            this.elements.wordType.textContent = word.type;
            this.elements.chineseMeaning.textContent = word.meaning;
            this.elements.currentIndex.textContent = this.currentIndex + 1;
            
            // 添加动画效果
            this.addDisplayAnimation();
        }
    }
    
    addDisplayAnimation() {
        const card = document.querySelector('.vocabulary-card');
        card.style.transform = 'scale(0.95)';
        card.style.opacity = '0.7';
        
        setTimeout(() => {
            card.style.transform = 'scale(1)';
            card.style.opacity = '1';
        }, 100);
    }
    
    nextWord() {
        // 记录当前位置到历史
        this.history.push(this.currentIndex);
        
        // 移动到下一个词汇
        if (this.currentIndex < this.vocabulary.length - 1) {
            this.currentIndex++;
        } else {
            // 到达末尾，根据模式处理
            if (this.learningMode === 'random') {
                // 随机模式：重新洗牌
                this.generateRandomIndices();
                this.currentIndex = 0;
            } else {
                // 顺序或逆序模式：回到开头
                this.currentIndex = 0;
            }
        }
        
        this.displayCurrentWord();
        this.updateButtonStates();
    }
    
    previousWord() {
        if (this.history.length > 0) {
            // 从历史记录中恢复
            this.currentIndex = this.history.pop();
        } else if (this.currentIndex > 0) {
            // 简单向前移动
            this.currentIndex--;
        } else {
            // 在开头时，跳到末尾
            this.currentIndex = this.vocabulary.length - 1;
        }
        
        this.displayCurrentWord();
        this.updateButtonStates();
    }
    
    updateButtonStates() {
        // 更新上一个按钮状态
        const canGoPrevious = this.history.length > 0 || this.currentIndex > 0;
        this.elements.prevBtn.disabled = !canGoPrevious;
        
        // 更新下一个按钮状态（总是可用）
        this.elements.nextBtn.disabled = false;
    }
    

    
    handleKeyPress(e) {
        switch (e.key) {
            case 'ArrowLeft':
                e.preventDefault();
                this.previousWord();
                break;
            case 'ArrowRight':
            case ' ': // 空格键
                e.preventDefault();
                this.nextWord();
                break;
            case '1':
                this.setLearningMode('sequential');
                break;
            case '2':
                this.setLearningMode('random');
                break;
            case '3':
                this.setLearningMode('reverse');
                break;
        }
    }
    
    // 获取学习统计信息
    getStats() {
        return {
            totalWords: this.vocabulary.length,
            currentPosition: this.currentIndex + 1,
            learningMode: this.learningMode,
            historyLength: this.history.length
        };
    }
}

// 页面加载完成后初始化应用
document.addEventListener('DOMContentLoaded', () => {
    window.vocabularyApp = new VocabularyApp();
    
    // 添加一些用户提示
    console.log('计算机英语词汇学习应用已启动！');
    console.log('快捷键提示：');
    console.log('← 上一个词汇');
    console.log('→ 或 空格 下一个词汇');
    console.log('1 顺序模式');
    console.log('2 随机模式');
    console.log('3 逆序模式');
});

// 防止页面刷新时丢失进度（可选功能）
window.addEventListener('beforeunload', () => {
    if (window.vocabularyApp) {
        const stats = window.vocabularyApp.getStats();
        localStorage.setItem('vocabularyProgress', JSON.stringify({
            currentIndex: window.vocabularyApp.currentIndex,
            learningMode: window.vocabularyApp.learningMode,
            timestamp: Date.now()
        }));
    }
});

// 页面加载时恢复进度（可选功能）
window.addEventListener('load', () => {
    const savedProgress = localStorage.getItem('vocabularyProgress');
    if (savedProgress && window.vocabularyApp) {
        try {
            const progress = JSON.parse(savedProgress);
            // 只在24小时内的进度才恢复
            if (Date.now() - progress.timestamp < 24 * 60 * 60 * 1000) {
                window.vocabularyApp.setLearningMode(progress.learningMode);
                window.vocabularyApp.currentIndex = progress.currentIndex;
                window.vocabularyApp.displayCurrentWord();
                window.vocabularyApp.updateButtonStates();
            }
        } catch (e) {
            console.log('无法恢复学习进度');
        }
    }
});