Power Calculator HUD v.1.3

(function() {
    if (document.getElementById('win95Hud')) return;

    function loadDecimal(callback) {
        if (window.Decimal) return callback(true);
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/decimal.min.js';
        script.onload = () => callback(true);
        script.onerror = () => { alert('Failed to load Decimal.js'); callback(false); };
        document.head.appendChild(script);
    }

    loadDecimal(() => {
        const hud = document.createElement('div');
        hud.id = 'win95Hud';
        Object.assign(hud.style, {
            position: 'fixed',
            top: '50px',
            left: '50px',
            width: '480px',
            background: '#C0C0C0',
            border: '2px solid #808080',
            zIndex: '99999',
            fontFamily: 'Tahoma, Geneva, sans-serif',
            userSelect: 'none',
            boxShadow: '4px 4px 0 #000',
            display: 'flex',
            flexDirection: 'column',
            resize: 'both',
            overflow: 'hidden'
        });

        // Title bar
        const titleBar = document.createElement('div');
        Object.assign(titleBar.style, {
            background: '#000080',
            color: '#fff',
            padding: '2px',
            display: 'flex',
            alignItems: 'center',
            cursor: 'move',
            justifyContent: 'space-between'
        });

        const titleText = document.createElement('span');
        titleText.innerText = 'Power Calc';
        const icon = document.createElement('span');
        Object.assign(icon.style, {
            width: '12px',
            height: '12px',
            marginRight: '4px',
            background: '#fff',
            border: '1px solid #000',
            display: 'inline-block'
        });
        titleText.prepend(icon);
        titleBar.appendChild(titleText);

        const btnContainer = document.createElement('div');
        btnContainer.style.display = 'flex';
        btnContainer.style.alignItems = 'center';
        btnContainer.style.justifyContent = 'flex-end';
        btnContainer.style.gap = '0px';
        btnContainer.style.marginRight = '2px';

        const minimizeBtn = document.createElement('button');
        const closeBtn = document.createElement('button');
        minimizeBtn.innerText = '_';
        closeBtn.innerText = 'X';

        [minimizeBtn, closeBtn].forEach(btn => {
            Object.assign(btn.style, {
                width: '20px',
                height: '18px',
                padding: '0',
                margin: '0',
                fontWeight: 'bold',
                fontSize: '12px',
                textAlign: 'center',
                cursor: 'pointer',
                background: '#C0C0C0',
                border: '2px outset #fff',
                lineHeight: '14px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                userSelect: 'none'
            });
            btn.onmousedown = () => btn.style.border = '2px inset #fff';
            btn.onmouseup = btn.onmouseleave = () => btn.style.border = '2px outset #fff';
        });

        btnContainer.appendChild(minimizeBtn);
        btnContainer.appendChild(closeBtn);
        titleBar.appendChild(btnContainer);
        hud.appendChild(titleBar);

        // Content
        const content = document.createElement('div');
        Object.assign(content.style, {
            padding: '8px',
            display: 'flex',
            flexDirection: 'column',
            gap: '6px'
        });

        function createNumberInput(labelText, id, def = '0') {
            const c = document.createElement('div');
            c.style.display = 'flex';
            c.style.alignItems = 'center';
            c.style.gap = '4px';
            const l = document.createElement('label');
            l.innerText = labelText;
            const i = document.createElement('input');
            i.type = 'text';
            i.id = id;
            i.value = def;
            Object.assign(i.style, {
                width: '100px',
                border: '2px inset #fff'
            });
            c.append(l, i);
            return c;
        }

        content.appendChild(createNumberInput('Base (a):', 'win95Base', '2'));
        content.appendChild(createNumberInput('Start (b):', 'win95Exp', '1'));
        content.appendChild(createNumberInput('Iterations (n):', 'win95Iter', '1'));

        // Notation selector
        const notationWrap = document.createElement('div');
        notationWrap.style.display = 'flex';
        notationWrap.style.alignItems = 'center';
        notationWrap.style.gap = '4px';

        const notationLabel = document.createElement('label');
        notationLabel.innerText = 'Notation:';

        const notationSelect = document.createElement('select');
        notationSelect.id = 'win95Notation';
        [
            'Scientific',
            'Scientific (comma)',
            'Engineering',
            'Power Tower',
            'Knuth ↑',
            'Knuth ↑↑↑',
            'Knuth ↑↑↑↑',
            'Knuth ↑^k',
            'Log Height',
            'Conway →',
            'Exp Tower',
            'Super-log10',
            'Tetrational Height',
            'Arrow Chain Extended',
            'Graham ↑^k',
            'Reciprocal Log',
            'Illions',
            'Metric Prefix',
            'Binary',
            'Hexadecimal',
            'Factorial !',
            'Double Factorial !!',
            'Triple Factorial !!!',
            'Superfactorial sf(n)',
            'Ackermann A(m,n)',
            'Nested Exp Exp_n'
        ].forEach(n => {
            const o = document.createElement('option');
            o.value = n;
            o.innerText = n;
            notationSelect.appendChild(o);
        });

        notationWrap.append(notationLabel, notationSelect);
        content.appendChild(notationWrap);

        const calcBtn = document.createElement('button');
        calcBtn.innerText = 'Calculate';
        calcBtn.style.border = '2px outset #fff';
        content.appendChild(calcBtn);

        const resultBox = document.createElement('div');
        Object.assign(resultBox.style, {
            minHeight: '20px',
            background: '#fff',
            border: '2px inset #fff',
            padding: '2px',
            fontFamily: 'monospace'
        });
        content.appendChild(resultBox);

        const historyContainer = document.createElement('div');
        Object.assign(historyContainer.style, {
            maxHeight: '100px',
            overflowY: 'auto',
            background: '#e0e0e0',
            border: '2px inset #fff',
            padding: '2px',
            fontFamily: 'monospace'
        });
        content.appendChild(historyContainer);

        hud.appendChild(content);
        document.body.appendChild(hud);

        // Drag
        let ox, oy, drag = false;
        titleBar.onmousedown = e => {
            drag = true;
            ox = hud.offsetLeft - e.clientX;
            oy = hud.offsetTop - e.clientY;
        };
        document.onmouseup = () => drag = false;
        document.onmousemove = e => {
            if (!drag) return;
            hud.style.left = e.clientX + ox + 'px';
            hud.style.top = e.clientY + oy + 'px';
        };

        closeBtn.onclick = () => hud.remove();
        minimizeBtn.onclick = () => { content.style.display = content.style.display==='none'?'flex':'none'; };

        const history = [];
        let memory = null;

        // Formatting helpers (Illions, Metric, Binary, Hex, Factorials)
        function formatIllions(dec) {
            if (!dec.isFinite()) return 'Infinity';
            const illions = ['', 'million','billion','trillion','quadrillion','quintillion','sextillion','septillion','octillion','nonillion','decillion','undecillion','duodecillion','tredecillion','quattuordecillion','quindecillion','sexdecillion','septendecillion','octodecillion','novemdecillion','vigintillion','centillion'];
            const log10 = dec.log(10);
            if (log10.lt(6)) return dec.toFixed();
            const idx = Math.min(illions.length-1, log10.div(3).floor().sub(1).toNumber());
            const scale = Decimal.pow(10,(idx+1)*3);
            const mantissa = dec.div(scale);
            return `${mantissa.toFixed(3)} ${illions[idx]}`;
        }

        function formatMetricPrefix(dec) {
            if (!dec.isFinite()) return 'Infinity';
            const prefixes = ['', 'kilo','mega','giga','tera','peta','exa','zetta','yotta','ronna','quetta'];
            const log10 = dec.log(10);
            if (log10.lt(3)) return dec.toFixed();
            const idx = Math.min(prefixes.length-1, Math.floor(log10.div(3).toNumber()));
            const scale = Decimal.pow(10, idx*3);
            const mantissa = dec.div(scale);
            return `${mantissa.toFixed(3)} ${prefixes[idx]}`;
        }

        function factorialSymbolic(n) { return n<21?new Decimal(n).factorial().toString():`${n}!`; }
        function doubleFactorialSymbolic(n){ return n<21?`${n}!!`: `${n}!!`; }
        function tripleFactorialSymbolic(n){ return n<21?`${n}!!!`: `${n}!!!`; }
        function superfactorialSymbolic(n){ return n<21?Array.from({length:n},(_,i)=>new Decimal(i+1).pow(i+1)).reduce((a,b)=>a.mul(b),new Decimal(1)).toString():`sf(${n})`; }
        function ackermannSymbolic(m,n){ return `A(${m},${n})`; }

        function formatNotation(result,a,b,n,notation,infinite=false){
            if(infinite) return `${notation} overflow`;
            switch(notation){
                case 'Scientific': return result.toExponential(10);
                case 'Scientific (comma)': return result.toExponential(0).replace(/\B(?=(\d{3})+(?!\d))/g,',');
                case 'Engineering': { const exp = Decimal.floor(result.log(10).div(3)).mul(3); return result.div(Decimal.pow(10,exp)).toFixed(3)+'E'+exp.toString();}
                case 'Power Tower': return `${a} ↑↑ ${n} (start=${b})\n≈ ${result.toExponential(6)}`;
                case 'Knuth ↑': return `${a} ↑↑ ${n}\n≈ ${result.toExponential(6)}`;
                case 'Knuth ↑↑↑': return `${a} ↑↑↑ ${n} (symbolic)`;
                case 'Knuth ↑↑↑↑': return `${a} ↑↑↑↑ ${n} (symbolic)`;
                case 'Knuth ↑^k': return `${a} ↑^k ${n} (symbolic)`;
                case 'Log Height': return `log10(result) ≈ ${result.log(10).toFixed(6)}`;
                case 'Conway →': return `${a} → ${n} → ${b}`;
                case 'Exp Tower': return `${a}^( ${a}^( ... ^${b}) ) with ${n} layers`;
                case 'Super-log10': return `slog10 ≈ ${Math.log10(result.log(10).toNumber()).toFixed(6)}`;
                case 'Tetrational Height': return `${a} ↑↑ ${n} → height ${result.log(10).toFixed(6)}`;
                case 'Arrow Chain Extended': return `${a} → ${n} → ${b} → extended`;
                case 'Graham ↑^k': return `${a} ↑^k ${n}`;
                case 'Reciprocal Log': return `1 / 10^(${result.log(10).toFixed(6)})`;
                case 'Illions': return formatIllions(result);
                case 'Metric Prefix': return formatMetricPrefix(result);
                case 'Binary': return !result.isFinite()?'2^∞':'2^'+(result.log(2).gt('1e15')?result.log(2).toExponential(3):result.log(2).toFixed(3));
                case 'Hexadecimal': return !result.isFinite()?'16^∞':(result.log(16).gt('1e15')?'16^'+result.log(16).toExponential(3):result.toNumber().toString(16));
                case 'Factorial !': return factorialSymbolic(b);
                case 'Double Factorial !!': return doubleFactorialSymbolic(b);
                case 'Triple Factorial !!!': return tripleFactorialSymbolic(b);
                case 'Superfactorial sf(n)': return superfactorialSymbolic(n);
                case 'Ackermann A(m,n)': return ackermannSymbolic(a,b);
                case 'Nested Exp Exp_n': return `Exp_${n}(${a},${b})`;
            }
            return result.toExponential(6);
        }

        function calculate(){
            let a,b,n;
            try{ a=new Decimal(win95Base.value); b=new Decimal(win95Exp.value); n=parseInt(win95Iter.value,10);}catch{return alert('Invalid input');}
            if(!Number.isInteger(n)||n<1) return alert('Iterations must be positive integer');
            if(n>1000) return alert('Iteration cap: 1000');

            const notation = win95Notation.value;
            let result = b;
            let i=1;
            let infinite=false;
            const chunkSize = 5;
            resultBox.innerText='Calculating...';

            function nextChunk(){
                for(let j=0;j<chunkSize && i<=n;j++,i++){
                    try{ result=a.pow(result); if(!result.isFinite()){infinite=true; finish(result); return;} }
                    catch{infinite=true; finish(result); return;}
                }
                if(i<=n){
                    resultBox.innerText=`Iteration ${i-1}/${n} complete...`;
                    requestAnimationFrame(nextChunk);
                }else finish(result);
            }

            function finish(finalResult){
                const display=formatNotation(finalResult,a,b,n,notation,infinite);
                resultBox.innerText=display;
                history.unshift(display.replace(/\n/g,' '));
                if(history.length>10) history.pop();
                historyContainer.innerHTML=history.join('<br>');
            }

            nextChunk();
        }

        // Memory buttons
        const memoryContainer = document.createElement('div');
        memoryContainer.style.display='flex';
        memoryContainer.style.gap='4px';
        const memoryStore=document.createElement('button'); memoryStore.innerText='MS';
        const memoryRecall=document.createElement('button'); memoryRecall.innerText='MR';
        const memoryClear=document.createElement('button'); memoryClear.innerText='MC';
        [memoryStore,memoryRecall,memoryClear].forEach(btn=>{
            Object.assign(btn.style,{border:'2px outset #fff',padding:'2px',cursor:'pointer',background:'#C0C0C0',fontWeight:'bold'});
            btn.onmousedown=()=>btn.style.border='2px inset #fff';
            btn.onmouseup=btn.onmouseleave=()=>btn.style.border='2px outset #fff';
            memoryContainer.appendChild(btn);
        });
        content.appendChild(memoryContainer);
        memoryStore.onclick=()=>{memory=resultBox.innerText.split('\n')[1]||resultBox.innerText;};
        memoryRecall.onclick=()=>{if(memory) win95Base.value=memory;};
        memoryClear.onclick=()=>{memory=null;};

        // Keyboard shortcuts
        ['win95Base','win95Exp','win95Iter'].forEach(id=>{
            const input=document.getElementById(id);
            input.addEventListener('keydown',e=>{
                if(e.key==='Enter') calculate();
                if(e.key==='ArrowUp'){try{input.value=new Decimal(input.value).add(1).toString();}catch{} e.preventDefault();}
                if(e.key==='ArrowDown'){try{input.value=new Decimal(input.value).sub(1).toString();}catch{} e.preventDefault();}
                if(e.key==='Escape') hud.remove();
            });
        });

        calcBtn.onclick=calculate;
    });
})();