fscalc/webroot/js/calculator.js

// Hex calculator functionality

export class Calculator {
    constructor() {
        this.state = {
            currentValue: 0,
            previousValue: 0,
            operation: null,
            waitingForOperand: false
        };
    }

    updateDisplay() {
        const value = Math.max(0, Math.min(Math.floor(this.state.currentValue), Number.MAX_SAFE_INTEGER));

        const hexStr = '0x' + value.toString(16).toUpperCase();
        const decStr = value.toString(10);
        const binStr = '0b' + value.toString(2);

        // Update all calculator displays (for current active tab)
        const inputs = document.querySelectorAll('[id*="calcInput"]');
        const hexElements = document.querySelectorAll('[id*="hexValue"]');
        const decElements = document.querySelectorAll('[id*="decValue"]');
        const binElements = document.querySelectorAll('[id*="binValue"]');

        inputs.forEach(input => input.value = hexStr);
        hexElements.forEach(el => el.textContent = hexStr);
        decElements.forEach(el => el.textContent = decStr);
        binElements.forEach(el => el.textContent = binStr);
    }

    input(digit) {
        if (this.state.waitingForOperand) {
            this.state.currentValue = 0;
            this.state.waitingForOperand = false;
        }

        const digitValue = parseInt(digit, 16);
        if (isNaN(digitValue)) return;

        const newValue = this.state.currentValue * 16 + digitValue;
        if (newValue <= Number.MAX_SAFE_INTEGER && newValue >= 0) {
            this.state.currentValue = newValue;
        }

        this.updateDisplay();
    }

    operation(operation) {
        if (this.state.previousValue !== 0 && !this.state.waitingForOperand) {
            this.equals(false);
        }

        this.state.previousValue = this.state.currentValue;
        this.state.operation = operation;
        this.state.waitingForOperand = true;
    }

    equals(updateDisplay = true) {
        if (this.state.operation && this.state.previousValue !== null) {
            const prev = Math.floor(this.state.previousValue);
            const curr = Math.floor(this.state.currentValue);

            try {
                let result = 0;
                switch (this.state.operation) {
                    case '+':
                        result = prev + curr;
                        break;
                    case '-':
                        result = prev - curr;
                        break;
                    case '*':
                        result = prev * curr;
                        break;
                    case '/':
                        if (curr === 0) {
                            alert('Division durch Null!');
                            return;
                        }
                        result = Math.floor(prev / curr);
                        break;
                    case 'MOD':
                        if (curr === 0) {
                            alert('Modulo durch Null!');
                            return;
                        }
                        result = prev % curr;
                        break;
                }

                this.state.currentValue = Math.max(0, Math.min(result, Number.MAX_SAFE_INTEGER));

            } catch (error) {
                alert('Berechnungsfehler: ' + error.message);
                this.state.currentValue = 0;
            }

            this.state.operation = null;
            this.state.previousValue = 0;
            this.state.waitingForOperand = true;
        }

        if (updateDisplay) {
            this.updateDisplay();
        }
    }

    clear() {
        this.state.currentValue = 0;
        this.state.previousValue = 0;
        this.state.operation = null;
        this.state.waitingForOperand = false;
        this.updateDisplay();
    }

    backspace() {
        if (!this.state.waitingForOperand) {
            this.state.currentValue = Math.floor(this.state.currentValue / 16);
            this.updateDisplay();
        }
    }

    setupEventListeners() {
        // Button clicks
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('calc-btn')) {
                const action = e.target.getAttribute('onclick');
                if (action) {
                    // Parse the onclick attribute to determine the action
                    if (action.includes('calcInput')) {
                        const match = action.match(/calcInput\('([^']+)'\)/);
                        if (match) this.input(match[1]);
                    } else if (action.includes('calcOperation')) {
                        const match = action.match(/calcOperation\('([^']+)'\)/);
                        if (match) this.operation(match[1]);
                    } else if (action.includes('calcEquals')) {
                        this.equals();
                    } else if (action.includes('calcClear')) {
                        this.clear();
                    } else if (action.includes('calcBackspace')) {
                        this.backspace();
                    }
                }
            }
        });

        // Keyboard support
        document.addEventListener('keydown', (e) => {
            if (e.target.tagName === 'INPUT' && !e.target.readOnly) return;

            const key = e.key.toUpperCase();

            if (/^[0-9A-F]$/.test(key)) {
                e.preventDefault();
                this.input(key);
            } else if (key === '+') {
                e.preventDefault();
                this.operation('+');
            } else if (key === '-') {
                e.preventDefault();
                this.operation('-');
            } else if (key === '*') {
                e.preventDefault();
                this.operation('*');
            } else if (key === '/') {
                e.preventDefault();
                this.operation('/');
            } else if (key === 'ENTER' || key === '=') {
                e.preventDefault();
                this.equals();
            } else if (key === 'ESCAPE' || key === 'C') {
                e.preventDefault();
                this.clear();
            } else if (key === 'BACKSPACE') {
                e.preventDefault();
                this.backspace();
            }
        });
    }

    generateHTML() {
        return `
            <div class="calculator-container">
                <div class="calc-display">
                    <div class="calc-input">
                        <input type="text" id="calcInput" placeholder="0x0" readonly>
                    </div>
                    <div class="calc-conversions">
                        <div class="conversion-row">
                            <span class="conv-label">HEX:</span>
                            <span class="conv-value" id="hexValue">0x0</span>
                        </div>
                        <div class="conversion-row">
                            <span class="conv-label">DEC:</span>
                            <span class="conv-value" id="decValue">0</span>
                        </div>
                        <div class="conversion-row">
                            <span class="conv-label">BIN:</span>
                            <span class="conv-value" id="binValue">0b0</span>
                        </div>
                    </div>
                </div>
                <div class="calc-buttons">
                    <div class="calc-row">
                        <button class="calc-btn number" onclick="calcInput('A')">A</button>
                        <button class="calc-btn number" onclick="calcInput('B')">B</button>
                        <button class="calc-btn number" onclick="calcInput('C')">C</button>
                        <button class="calc-btn number" onclick="calcInput('D')">D</button>
                        <button class="calc-btn clear" onclick="calcClear()">C</button>
                    </div>
                    <div class="calc-row">
                        <button class="calc-btn number" onclick="calcInput('E')">E</button>
                        <button class="calc-btn number" onclick="calcInput('F')">F</button>
                        <button class="calc-btn number" onclick="calcInput('7')">7</button>
                        <button class="calc-btn number" onclick="calcInput('8')">8</button>
                        <button class="calc-btn operation" onclick="calcOperation('/')">/</button>
                    </div>
                    <div class="calc-row">
                        <button class="calc-btn number" onclick="calcInput('4')">4</button>
                        <button class="calc-btn number" onclick="calcInput('5')">5</button>
                        <button class="calc-btn number" onclick="calcInput('6')">6</button>
                        <button class="calc-btn operation" onclick="calcOperation('*')">*</button>
                        <button class="calc-btn operation" onclick="calcOperation('MOD')">MOD</button>
                    </div>
                    <div class="calc-row">
                        <button class="calc-btn number" onclick="calcInput('1')">1</button>
                        <button class="calc-btn number" onclick="calcInput('2')">2</button>
                        <button class="calc-btn number" onclick="calcInput('3')">3</button>
                        <button class="calc-btn operation" onclick="calcOperation('-')">-</button>
                        <button class="calc-btn operation" onclick="calcOperation('+')">+</button>
                    </div>
                    <div class="calc-row">
                        <button class="calc-btn number wide" onclick="calcInput('0')">0</button>
                        <button class="calc-btn number" onclick="calcInput('9')">9</button>
                        <button class="calc-btn backspace" onclick="calcBackspace()">⌫</button>
                        <button class="calc-btn equals" onclick="calcEquals()">=</button>
                    </div>
                </div>
            </div>
        `;
    }
}