GCD & LCM 計算器技術實作 GCD & LCM Calculator Implementation

/**
 * GCD & LCM Calculator - Core Implementation
 * GCD & LCM 計算器 - 核心實作
 * 
 * A professional tool for calculating Greatest Common Divisor and Least Common Multiple
 * 用於計算最大公約數和最小公倍數的專業工具
 */
class GCDLCMCalculator {
    constructor() {
        // 當前語言設定 / Current language setting
        this.currentLanguage = 'zh';
        
        // 完整的雙語翻譯字典 / Complete bilingual translation dictionary
        this.translations = {
            zh: {
                title: 'GCD & LCM 計算器',
                subtitle: '計算兩個正整數的最大公約數與最小公倍數',
                inputA: '輸入數字 A：',
                inputB: '輸入數字 B：',
                calculate: '🧮 計算',
                clear: '❌ 清除',
                copy: '📋 複製結果',
                gcdLabel: '最大公約數 (GCD)：',
                lcmLabel: '最小公倍數 (LCM)：',
                formulaLabel: '計算式：',
                algorithmTitle: '🧠 算法說明',
                algorithmDesc: '使用歐幾里得算法計算最大公約數，並通過 LCM(a,b) = (a×b)/GCD(a,b) 公式計算最小公倍數',
                errors: {
                    empty: '請輸入兩個數字',
                    notInteger: '請輸入正整數',
                    notPositive: '僅接受正整數 (>0)',
                    invalid: '請輸入有效數字'
                },
                copied: '結果已複製到剪貼簿！'
            },
            en: {
                title: 'GCD & LCM Calculator',
                subtitle: 'Calculate Greatest Common Divisor and Least Common Multiple of two positive integers',
                inputA: 'Enter Number A:',
                inputB: 'Enter Number B:',
                calculate: '🧮 Calculate',
                clear: '❌ Clear',
                copy: '📋 Copy Result',
                gcdLabel: 'Greatest Common Divisor (GCD):',
                lcmLabel: 'Least Common Multiple (LCM):',
                formulaLabel: 'Formula:',
                algorithmTitle: '🧠 Algorithm',
                algorithmDesc: 'Using Euclidean algorithm for GCD calculation and LCM(a,b) = (a×b)/GCD(a,b) formula for LCM',
                errors: {
                    empty: 'Please enter both numbers',
                    notInteger: 'Please enter positive integers',
                    notPositive: 'Only positive integers allowed (>0)',
                    invalid: 'Please enter valid numbers'
                },
                copied: 'Result copied to clipboard!'
            }
        };
        
        // 初始化工具 / Initialize tool
        this.init();
    }
    
    /**
     * 初始化方法
     * Initialization method
     */
    init() {
        // 設置全域語言監聽器 / Setup global language listener
        this.setupGlobalLanguageListener();
        
        // 設置事件監聽器 / Setup event listeners
        this.setupEventListeners();
        
        // 更新語言顯示 / Update language display
        this.updateLanguage();
    }
}

/**
 * 設置全域語言監聽器
 * Setup global language listener
 */
setupGlobalLanguageListener() {
    // 監聽語言切換事件 / Listen for language change events
    window.addEventListener('languageChanged', (event) => {
        this.currentLanguage = event.detail.language;
        this.updateLanguage();
    });
    
    // 檢查全域語言設定 / Check global language setting
    const checkGlobalLanguage = () => {
        if (window.globalI18n) {
            this.currentLanguage = window.globalI18n.currentLanguage;
            this.updateLanguage();
            return true;
        }
        return false;
    };
    
    // 如果全域語言系統尚未載入，延遲檢查 / If global language system not loaded, delay check
    if (!checkGlobalLanguage()) {
        setTimeout(() => {
            checkGlobalLanguage();
        }, 100);
    }
}

/**
 * 更新語言顯示
 * Update language display
 */
updateLanguage() {
    const t = this.translations[this.currentLanguage];
    
    // 更新所有帶有 data-i18n 屬性的元素 / Update all elements with data-i18n attributes
    document.querySelectorAll('[data-i18n]').forEach(element => {
        const key = element.getAttribute('data-i18n');
        if (t[key]) {
            element.textContent = t[key];
        }
    });
    
    // 更新 placeholder 屬性 / Update placeholder attributes
    document.getElementById('numberA').placeholder = this.currentLanguage === 'zh' ? '12' : '12';
    document.getElementById('numberB').placeholder = this.currentLanguage === 'zh' ? '18' : '18';
}

/**
 * 設置事件監聽器
 * Setup event listeners
 */
setupEventListeners() {
    // 獲取 DOM 元素 / Get DOM elements
    const calculateBtn = document.getElementById('calculateBtn');
    const clearBtn = document.getElementById('clearBtn');
    const copyBtn = document.getElementById('copyBtn');
    const numberA = document.getElementById('numberA');
    const numberB = document.getElementById('numberB');
    
    // 按鈕點擊事件 / Button click events
    calculateBtn.addEventListener('click', () => this.calculate());
    clearBtn.addEventListener('click', () => this.clearInputs());
    copyBtn.addEventListener('click', () => this.copyResults());
    
    // Enter 鍵支援 / Enter key support
    [numberA, numberB].forEach(input => {
        input.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                this.calculate();
            }
        });
    });
    
    // 輸入時清除錯誤狀態 / Clear error state on input
    [numberA, numberB].forEach(input => {
        input.addEventListener('input', () => {
            this.clearError();
            input.classList.remove('error');
        });
    });
}

/**
 * 歐幾里得算法計算最大公約數 (GCD)
 * Euclidean algorithm for calculating Greatest Common Divisor (GCD)
 * 
 * 時間複雜度: O(log min(a, b))
 * Time complexity: O(log min(a, b))
 * 
 * 算法步驟:
 * 1. 如果 b = 0，則 GCD(a, b) = a
 * 2. 否則，GCD(a, b) = GCD(b, a mod b)
 * 3. 重複步驟 2 直到 b = 0
 */
gcd(a, b) {
    // 輾轉相除法 / Division algorithm
    while (b !== 0) {
        let temp = b;
        b = a % b;
        a = temp;
    }
    return a;
}

/**
 * 計算最小公倍數 (LCM)
 * Calculate Least Common Multiple (LCM)
 * 
 * 使用數學關係式: LCM(a, b) = |a × b| / GCD(a, b)
 * Using mathematical relationship: LCM(a, b) = |a × b| / GCD(a, b)
 * 
 * 這個公式基於以下數學定理:
 * This formula is based on the mathematical theorem:
 * 對於任意兩個正整數 a 和 b:
 * For any two positive integers a and b:
 * a × b = GCD(a, b) × LCM(a, b)
 */
lcm(a, b) {
    return Math.abs(a * b) / this.gcd(a, b);
}

/**
 * 輸入驗證系統
 * Input validation system
 */
validateInputs() {
    const numberA = document.getElementById('numberA').value.trim();
    const numberB = document.getElementById('numberB').value.trim();
    const t = this.translations[this.currentLanguage];
    
    // 檢查輸入是否為空 / Check if inputs are empty
    if (!numberA || !numberB) {
        return { valid: false, message: t.errors.empty };
    }
    
    // 轉換為數字 / Convert to numbers
    const a = Number(numberA);
    const b = Number(numberB);
    
    // 檢查是否為有效數字 / Check if valid numbers
    if (isNaN(a) || isNaN(b)) {
        return { valid: false, message: t.errors.invalid };
    }
    
    // 檢查是否為整數 / Check if integers
    if (!Number.isInteger(a) || !Number.isInteger(b)) {
        return { valid: false, message: t.errors.notInteger };
    }
    
    // 檢查是否為正數 / Check if positive
    if (a <= 0 || b <= 0) {
        return { valid: false, message: t.errors.notPositive };
    }
    
    return { valid: true, a, b };
}

/**
 * 計算主函數
 * Main calculation function
 */
calculate() {
    // 清除之前的錯誤 / Clear previous errors
    this.clearError();
    
    // 執行輸入驗證 / Perform input validation
    const validation = this.validateInputs();
    
    if (!validation.valid) {
        this.showError(validation.message);
        return;
    }
    
    const { a, b } = validation;
    
    try {
        // 計算 GCD 和 LCM / Calculate GCD and LCM
        const gcdResult = this.gcd(a, b);
        const lcmResult = this.lcm(a, b);
        
        // 顯示結果 / Display results
        this.displayResults(a, b, gcdResult, lcmResult);
        
    } catch (error) {
        this.showError(this.translations[this.currentLanguage].errors.invalid);
    }
}

/**
 * 顯示錯誤訊息
 * Show error message
 */
showError(message) {
    const errorElement = document.getElementById('errorMessage');
    errorElement.textContent = message;
    errorElement.classList.remove('hidden');
    
    // 標記輸入框為錯誤狀態 / Mark inputs as error state
    document.getElementById('numberA').classList.add('error');
    document.getElementById('numberB').classList.add('error');
}

/**
 * 顯示計算結果
 * Display calculation results
 */
displayResults(a, b, gcd, lcm) {
    // 更新結果顯示 / Update result display
    document.getElementById('gcdResult').textContent = gcd;
    document.getElementById('lcmResult').textContent = lcm;
    document.getElementById('formulaResult').textContent = `GCD(${a},${b}) = ${gcd}, LCM(${a},${b}) = ${lcm}`;
    
    // 顯示結果區域和複製按鈕 / Show result area and copy button
    document.getElementById('resultsSection').classList.remove('hidden');
    document.getElementById('copyBtn').classList.remove('hidden');
}

/**
 * 複製結果到剪貼簿
 * Copy results to clipboard
 */
async copyResults() {
    const gcd = document.getElementById('gcdResult').textContent;
    const lcm = document.getElementById('lcmResult').textContent;
    const formula = document.getElementById('formulaResult').textContent;
    
    // 組合複製文字 / Combine copy text
    const copyText = `${formula}\nGCD: ${gcd}\nLCM: ${lcm}`;
    
    try {
        // 使用 Clipboard API 複製 / Use Clipboard API to copy
        await navigator.clipboard.writeText(copyText);
        
        // 顯示複製成功反饋 / Show copy success feedback
        const originalText = document.getElementById('copyBtn').textContent;
        document.getElementById('copyBtn').textContent = this.translations[this.currentLanguage].copied;
        
        // 2秒後恢復按鈕文字 / Restore button text after 2 seconds
        setTimeout(() => {
            document.getElementById('copyBtn').textContent = originalText;
        }, 2000);
        
    } catch (err) {
        console.error('複製失敗:', err);
    }
}

/**
 * 清除所有輸入和結果
 * Clear all inputs and results
 */
clearInputs() {
    // 清除輸入值 / Clear input values
    document.getElementById('numberA').value = '';
    document.getElementById('numberB').value = '';
    
    // 隱藏結果和複製按鈕 / Hide results and copy button
    document.getElementById('resultsSection').classList.add('hidden');
    document.getElementById('copyBtn').classList.add('hidden');
    
    // 清除錯誤狀態 / Clear error state
    this.clearError();
    
    // 移除輸入框錯誤樣式 / Remove input error styling
    document.getElementById('numberA').classList.remove('error');
    document.getElementById('numberB').classList.remove('error');
}

/**
 * 清除錯誤訊息
 * Clear error message
 */
clearError() {
    document.getElementById('errorMessage').classList.add('hidden');
}

/**
 * GCD & LCM 計算器初始化
 * GCD & LCM Calculator initialization
 * 
 * 創建計算器實例並開始運行
 * Create calculator instance and start running
 */
new GCDLCMCalculator();

/**
 * 主要功能列表:
 * Main feature list:
 * 
 * 🧮 算法特性 / Algorithm Features:
 * - 歐幾里得算法 GCD 計算 / Euclidean algorithm GCD calculation
 * - 數學關係式 LCM 計算 / Mathematical relationship LCM calculation
 * - O(log min(a,b)) 時間複雜度 / O(log min(a,b)) time complexity
 * 
 * ✅ 驗證功能 / Validation Features:
 * - 空值檢查 / Empty value check
 * - 數字有效性驗證 / Number validity verification
 * - 整數檢查 / Integer check
 * - 正數限制 / Positive number constraint
 * 
 * 🎯 用戶體驗 / User Experience:
 * - Enter 鍵快速計算 / Enter key quick calculation
 * - 即時錯誤清除 / Real-time error clearing
 * - 視覺化錯誤標示 / Visual error indicators
 * - 詳細錯誤訊息 / Detailed error messages
 * 
 * 📋 實用功能 / Utility Features:
 * - 一鍵複製結果 / One-click result copying
 * - 完整結果格式化 / Complete result formatting
 * - 自動清理功能 / Auto cleanup function
 * 
 * 🌐 國際化 / Internationalization:
 * - 完整雙語支援 / Complete bilingual support
 * - 即時語言切換 / Real-time language switching
 * - 本地化錯誤訊息 / Localized error messages
 * 
 * 📱 響應式設計 / Responsive Design:
 * - 手機端適配 / Mobile adaptation
 * - 平板端優化 / Tablet optimization
 * - 桌面端完整功能 / Desktop full functionality
 */