MediaWiki:Gadget-hero-comparison.js: Difference between revisionsGive feedback

/**
 * Hero Comparison Table – interactive controls.
 * Adds Boons / Bonus Spirit Power inputs that recalculate hero stats in real time,
 * expandable alt‑fire sub‑rows for heroes with alternate firing modes,
 * and a button to show/hide all alt‑fire rows at once.
 */
(function() {
    'use strict';
    
    if (!document.getElementById('hero-comparison-container')) return;
    
    const TABLE_ID = 'hero-comparison-table';
    
    function roundToSigFigs(num, sig) {
        if (num === 0 || !isFinite(num)) return 0;
        const d = Math.ceil(Math.log10(Math.abs(num)));
        const power = sig - d;
        const magnitude = Math.pow(10, power);
        const rounded = Math.round(num * magnitude) / magnitude;
        return parseFloat(rounded.toPrecision(sig));
    }
    
    function calculateLinearStat(cell, spiritPower, powerIncreases) {
        if (!cell) return 0;
        const baseRaw = cell.dataset.base;
        if (baseRaw === "true" || baseRaw === "false") return baseRaw;
        const base = parseFloat(baseRaw || 0);
        const spiritScale = parseFloat(cell.dataset.spiritScale || 0);
        const levelScale = parseFloat(cell.dataset.levelScale || 0);
        const innateSpiritScale = parseFloat(cell.dataset.innateSpiritScale || 0);
        let value = base;
        if (levelScale && powerIncreases > 0) {
            value = base + (powerIncreases * levelScale);
        }
        const innateSpirit = powerIncreases * innateSpiritScale;
        const totalSpirit = innateSpirit + spiritPower;
        if (spiritScale && totalSpirit > 0) {
            value += totalSpirit * spiritScale;
        }
        return value;
    }
    
    function calculateStat(cell, spiritPower, powerIncreases) {
        return calculateLinearStat(cell, spiritPower, powerIncreases);
    }
    
    function toggleAltFireRow(heroKey) {
        const subRow = document.querySelector(`tr.alt-fire-sub[data-parent="${heroKey}"]`);
        if (!subRow) return;
        subRow.classList.toggle('visible');
        const toggleLink = document.querySelector(`a.toggle-alt-fire[data-hero-key="${heroKey}"]`);
        if (toggleLink) toggleLink.textContent = subRow.classList.contains('visible') ? '−' : '+';
    }
    
    const flashTimeouts = new Map();
    function forceResetDisplay() {
        const table = document.getElementById(TABLE_ID);
        if (!table) return;
        table.querySelectorAll('td[data-base]').forEach((cell, index) => {
            const numSpan = cell.querySelector('.stat-num');
            if (!numSpan) return;
            const baseVal = cell.dataset.base;
            numSpan.textContent = baseVal;
            cell.setAttribute('data-sort-value', baseVal);
            if (window.jQuery) jQuery(cell).data('sortValue', baseVal);
            numSpan.classList.remove('stat-changed');
            numSpan.removeAttribute('style');
            if (flashTimeouts.has(index)) { clearTimeout(flashTimeouts.get(index)); flashTimeouts.delete(index); }
        });
    }
    
    function updateTable(spiritPower, powerIncreases, isReset) {
        const table = document.getElementById(TABLE_ID);
        if (!table) return;
    
        if (isReset || (spiritPower === 0 && powerIncreases === 0)) {
            forceResetDisplay();
            if (window.jQuery) jQuery(table).trigger('update');
            return;
        }
    
        const cells = table.querySelectorAll('td[data-base]');
        cells.forEach((cell, index) => {
            const numSpan = cell.querySelector('.stat-num');
            if (!numSpan) return;
    
            const newValue = calculateStat(cell, spiritPower, powerIncreases);
            const baseRaw = cell.dataset.base;
    
            // Only update if the underlying numeric value has genuinely changed
            let hasNumericChange = false;
            if (baseRaw === "true" || baseRaw === "false") {
                hasNumericChange = (String(newValue) !== baseRaw);
            } else {
                const baseVal = parseFloat(baseRaw || 0);
                const newValNum = (typeof newValue === 'number') ? newValue : parseFloat(newValue);
                hasNumericChange = Math.abs(newValNum - baseVal) > 0.001;
            }
    
            if (!hasNumericChange) return;
    
            const displayValue = (typeof newValue === 'number')
                ? roundToSigFigs(newValue, 4)
                : newValue;
    
            // Skip update if the displayed text would be unchanged
            const currentText = numSpan.textContent.trim();
            if (currentText === String(displayValue)) return;
    
            numSpan.textContent = displayValue;
            cell.setAttribute('data-sort-value', displayValue);
            if (window.jQuery) jQuery(cell).data('sortValue', displayValue);
    
            // Brief green flash to draw attention to changed values
            if (flashTimeouts.has(index)) {
                clearTimeout(flashTimeouts.get(index));
                flashTimeouts.delete(index);
            }
            numSpan.classList.add('stat-changed');
            numSpan.style.transition = 'none';
            numSpan.style.color = '#4CAF50';
            const timeoutId = setTimeout(() => {
                if (numSpan.parentElement) {
                    numSpan.style.transition = 'color 0.3s ease';
                    numSpan.style.color = '';
                }
                flashTimeouts.delete(index);
            }, 150);
            flashTimeouts.set(index, timeoutId);
        });
    
        if (window.jQuery) jQuery(table).trigger('update');
    }
    
    function createControls() {
        const container = document.getElementById('hero-comparison-container');
        if (!container || document.getElementById('hero-controls')) return;
        const maxPower = parseInt(container.dataset.maxPower) || 25;
        const maxSpirit = parseInt(container.dataset.maxSpirit) || 500;
        container.insertAdjacentHTML('afterbegin', `
            <div id="hero-controls">
                <label class="hero-control-label">
                    <span class="hero-label-boons">Boons:</span>
                    <input type="number" id="hero-input-power" min="0" max="${maxPower}" value="0">
                </label>
                <label class="hero-control-label">
                    <span class="hero-label-spirit">Bonus Spirit Power:</span>
                    <input type="number" id="hero-input-spirit" min="0" max="${maxSpirit}" value="0" step="10">
                </label>
                <button id="hero-reset-btn">Reset</button>
                <button id="hero-max-btn">Max Boons</button>
                <button id="hero-toggle-all-alt">Show Alt‑Fire</button>
                <span class="hero-control-note">Values update automatically</span>
            </div>
        `);
        const powerInput = document.getElementById('hero-input-power');
        const spiritInput = document.getElementById('hero-input-spirit');
        const resetBtn = document.getElementById('hero-reset-btn');
        const maxBtn = document.getElementById('hero-max-btn');
        let updateTimeout;
        const scheduleUpdate = () => {
            clearTimeout(updateTimeout);
            updateTimeout = setTimeout(() => {
                const power = Math.min(parseInt(powerInput.value) || 0, maxPower);
                const spirit = Math.min(parseInt(spiritInput.value) || 0, maxSpirit);
                if (powerInput.value > maxPower) powerInput.value = maxPower;
                if (spiritInput.value > maxSpirit) spiritInput.value = maxSpirit;
                updateTable(spirit, power);
            }, 50);
        };
        powerInput.addEventListener('input', scheduleUpdate);
        spiritInput.addEventListener('input', scheduleUpdate);
        resetBtn.addEventListener('click', () => { powerInput.value = 0; spiritInput.value = 0; updateTable(0, 0, true); });
        maxBtn.addEventListener('click', () => { powerInput.value = maxPower; updateTable(parseInt(spiritInput.value) || 0, maxPower); });
        powerInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') scheduleUpdate(); });
        spiritInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') scheduleUpdate(); });
    
        // Toggle all alt‑fire sub‑rows at once
        let allExpanded = false;
        const toggleAllBtn = document.getElementById('hero-toggle-all-alt');
        if (toggleAllBtn) {
            toggleAllBtn.addEventListener('click', () => {
                const rows = document.querySelectorAll('tr.alt-fire-sub');
                const links = document.querySelectorAll('a.toggle-alt-fire');
                if (allExpanded) {
                    rows.forEach(row => row.classList.remove('visible'));
                    links.forEach(link => link.textContent = '+');
                    toggleAllBtn.textContent = 'Show Alt‑Fire';
                    allExpanded = false;
                } else {
                    rows.forEach(row => row.classList.add('visible'));
                    links.forEach(link => link.textContent = '−');
                    toggleAllBtn.textContent = 'Hide Alt‑Fire';
                    allExpanded = true;
                }
            });
        }
    }
    
    function enhanceToggleLinks() {
        document.querySelectorAll('a[href^="#alt-fire-"]').forEach(link => {
            link.classList.add('toggle-alt-fire');
            const heroKey = link.getAttribute('href').replace('#alt-fire-', '');
            link.setAttribute('data-hero-key', heroKey);
            link.setAttribute('title', 'Show alt‑fire weapon stats');
        });
    }
    
    function attachToggleListeners() {
        const table = document.getElementById(TABLE_ID);
        if (!table) return;
        table.addEventListener('click', function(e) {
            const link = e.target.closest('a[href^="#alt-fire-"]');
            if (link) {
                e.preventDefault();
                const heroKey = link.getAttribute('href').replace('#alt-fire-', '');
                toggleAltFireRow(heroKey);
            }
        });
    }
    
    createControls();
    enhanceToggleLinks();
    attachToggleListeners();
    
    if (window.jQuery) {
        $(document).on('tabberchange', () => { setTimeout(() => { createControls(); enhanceToggleLinks(); attachToggleListeners(); }, 100); });
    }
})();