Domino.OS (w.i.p) based off of e.g_OS

(() => {
    /* ------------------ GLOBAL FADE-IN/FADE-OUT STYLES ------------------ */
    const style = document.createElement('style');
    style.textContent = `
        .fade-window {
            opacity: 0;
            transition: opacity 0.25s ease-in-out;
        }
        .fade-show {
            opacity: 1 !important;
        }
        .fade-hide {
            opacity: 0 !important;
        }
    `;
    document.head.appendChild(style);

    // ----- Persistence bootstrap -----
    if (!localStorage.os) localStorage.os = "{}";

    // ----- Constants -----
    const SCREEN_WIDTH = 32;
    const SCREEN_HEIGHT = 16;

    // ----- State -----
    let selected = null;
    let page = 1;
    let minimized = false;

    let pixelGrid = Array.from({ length: SCREEN_HEIGHT }, () => Array(SCREEN_WIDTH).fill('#00ff00'));
    let currentColor = '#00ff00'; // default drawing color

    // ----- Main HUD (QBasic style) -----
    const hud = document.createElement('div');
    hud.style.position = 'fixed';
    hud.style.top = '20px';
    hud.style.left = '20px';
    hud.style.width = '550px';
    hud.style.height = '450px';
    hud.style.background = localStorage.e_gOS_hudColor || '#C0C0C0';
    hud.style.border = '2px outset #808080';
    hud.style.fontFamily = 'monospace';
    hud.style.color = localStorage.e_gOS_textColor || '#0F0';
    hud.style.zIndex = 999999;
    hud.style.resize = 'both';
    hud.style.overflow = 'auto';

    /* APPLY FADE-IN */
    hud.classList.add("fade-window");
    setTimeout(() => hud.classList.add("fade-show"), 10);

    document.body.appendChild(hud);

    // ----------------------------------------------------------------------
    // Everything from here down is your original code, with fade logic added
    // ----------------------------------------------------------------------

    // Header
    const header = document.createElement('div');
    header.style.width = '100%';
    header.style.height = '20px';
    header.style.background = '#000080';
    header.style.color = '#FFFFFF';
    header.style.fontWeight = 'bold';
    header.style.borderBottom = '2px solid #808080';
    header.style.cursor = 'move';
    header.style.userSelect = 'none';
    header.style.display = 'flex';
    header.style.alignItems = 'center';
    header.style.justifyContent = 'space-between';
    header.style.padding = '0 5px';
    hud.appendChild(header);

    const title = document.createElement('span');
    title.innerText = 'e_g.OS HUD';
    header.appendChild(title);

    const controls = document.createElement('div');
    header.appendChild(controls);

    // Minimize button
    const minimizeBtn = document.createElement('button');
    minimizeBtn.innerText = '_';
    minimizeBtn.title = 'Minimize';
    minimizeBtn.style.marginRight = '5px';
    minimizeBtn.style.fontSize = '12px';
    minimizeBtn.style.padding = '0 4px';
    minimizeBtn.style.width = '20px';
    minimizeBtn.style.background = '#C0C0C0';
    minimizeBtn.style.border = '2px outset #808080';
    minimizeBtn.style.color = '#000';
    minimizeBtn.style.cursor = 'pointer';
    controls.appendChild(minimizeBtn);

    // Close button (with fade-out)
    const closeBtn = document.createElement('button');
    closeBtn.innerText = 'X';
    closeBtn.title = 'Close';
    closeBtn.style.fontSize = '12px';
    closeBtn.style.padding = '0 4px';
    closeBtn.style.width = '20px';
    closeBtn.style.background = '#C0C0C0';
    closeBtn.style.border = '2px outset #808080';
    closeBtn.style.color = '#000';
    closeBtn.style.cursor = 'pointer';
    controls.appendChild(closeBtn);

    closeBtn.addEventListener('click', () => {
        hud.classList.remove("fade-show");
        hud.classList.add("fade-hide");
        setTimeout(() => {
            if (hud.parentNode) hud.parentNode.removeChild(hud);
        }, 250);
    });

    // Pre (splash + messages)
    const pre = document.createElement('pre');
    pre.style.margin = '0';
    pre.style.whiteSpace = 'pre-wrap';
    pre.style.background = '#FFFFFF';
    pre.style.border = '2px inset #808080';
    pre.style.color = localStorage.e_gOS_textColor || '#0F0';
    hud.appendChild(pre);

    // Text editor
    const editor = document.createElement('textarea');
    editor.style.width = '100%';
    editor.style.height = '120px';
    editor.style.display = 'none';
    editor.style.background = '#FFFFFF';
    editor.style.color = localStorage.e_gOS_textColor || '#000';
    editor.style.fontFamily = 'monospace';
    editor.style.border = '2px inset #808080';
    editor.style.resize = 'none';
    hud.appendChild(editor);

    // Canvas
    const canvas = document.createElement('canvas');
    canvas.width = SCREEN_WIDTH * 15;
    canvas.height = SCREEN_HEIGHT * 15;
    canvas.style.display = 'none';
    canvas.style.marginTop = '5px';
    canvas.style.border = '2px inset #808080';
    hud.appendChild(canvas);
    const ctx = canvas.getContext('2d');

    // Palette
    const paletteDiv = document.createElement('div');
    paletteDiv.style.display = 'none';
    paletteDiv.style.marginTop = '5px';
    hud.appendChild(paletteDiv);

    // Buttons area
    const buttonsDiv = document.createElement('div');
    buttonsDiv.style.marginTop = '5px';
    hud.appendChild(buttonsDiv);

    // Helper: create a HUD-style button
    function createButton(label, onClick) {
        const btn = document.createElement('button');
        btn.innerText = label;
        btn.style.marginRight = '5px';
        btn.style.background = '#C0C0C0';
        btn.style.border = '2px outset #808080';
        btn.style.color = '#000';
        btn.style.fontSize = '12px';
        btn.style.cursor = 'pointer';
        btn.addEventListener('click', onClick);
        buttonsDiv.appendChild(btn);
    }

    function renderButtons(labels, callbacks) {
        buttonsDiv.innerHTML = '';
        labels.forEach((label, idx) => createButton(label, callbacks[idx]));
    }

    /* ---------------- Dragging HUD ---------------- */
    let isDragging = false, offsetX = 0, offsetY = 0;
    header.addEventListener('mousedown', e => {
        if (e.target === minimizeBtn || e.target === closeBtn) return;
        isDragging = true;
        offsetX = e.clientX - hud.offsetLeft;
        offsetY = e.clientY - hud.offsetTop;
    });
    document.addEventListener('mouseup', () => isDragging = false);
    document.addEventListener('mousemove', e => {
        if (isDragging) {
            hud.style.left = (e.clientX - offsetX) + 'px';
            hud.style.top = (e.clientY - offsetY) + 'px';
        }
    });

    // MINIMIZE
    minimizeBtn.addEventListener('click', () => {
        minimized = !minimized;
        pre.style.display = minimized ? 'none' : 'block';
        editor.style.display = minimized ? 'none' : editor.style.display;
        canvas.style.display = minimized ? 'none' : canvas.style.display;
        paletteDiv.style.display = minimized ? 'none' : paletteDiv.style.display;
        buttonsDiv.style.display = minimized ? 'none' : 'block';
        hud.style.height = minimized ? '40px' : '450px';
    });

    /* ---------------- Canvas Logic ---------------- */
    function renderCanvas() {
        for (let y = 0; y < SCREEN_HEIGHT; y++) {
            for (let x = 0; x < SCREEN_WIDTH; x++) {
                ctx.fillStyle = pixelGrid[y][x];
                ctx.fillRect(x * 15, y * 15, 15, 15);
            }
        }
    }

    function setupCanvasMouse() {
        paletteDiv.style.display = 'block';
        renderCanvas();

        let isDrawing = false;
        function drawPixel(e) {
            const rect = canvas.getBoundingClientRect();
            const x = Math.floor((e.clientX - rect.left) / 15);
            const y = Math.floor((e.clientY - rect.top) / 15);
            if (x >= 0 && x < SCREEN_WIDTH && y >= 0 && y < SCREEN_HEIGHT) {
                pixelGrid[y][x] = currentColor;
                renderCanvas();
            }
        }

        canvas.addEventListener('mousedown', e => {
            isDrawing = true;
            drawPixel(e);
        });
        canvas.addEventListener('mousemove', e => {
            if (isDrawing) drawPixel(e);
        });
        document.addEventListener('mouseup', () => { isDrawing = false; });
    }

    function setupPalette() {
        paletteDiv.style.display = 'block';
        paletteDiv.innerHTML = '';
        const colors = [
            '#FF0000', '#00FF00', '#0000FF', '#FFFF00',
            '#FF00FF', '#00FFFF', '#FFFFFF', '#000000',
            '#888888', '#FFA500'
        ];
        colors.forEach(c => {
            const swatch = document.createElement('div');
            swatch.style.display = 'inline-block';
            swatch.style.width = '20px';
            swatch.style.height = '20px';
            swatch.style.marginRight = '2px';
            swatch.style.background = c;
            swatch.style.cursor = 'pointer';
            swatch.style.border = '1px solid #808080';
            swatch.addEventListener('click', () => { currentColor = c; });
            paletteDiv.appendChild(swatch);
        });
    }

    /* ---------------- HOME SCREEN ---------------- */
    function gohome() {
        editor.style.display = 'none';
        canvas.style.display = 'none';
        pre.style.display = 'none';
        paletteDiv.style.display = 'none';

        const oldList = hud.querySelector('#file-list');
        if (oldList) hud.removeChild(oldList);

        const listDiv = document.createElement('div');
        listDiv.id = 'file-list';
        listDiv.style.marginTop = '5px';
        listDiv.style.background = '#FFFFFF';
        listDiv.style.border = '2px inset #808080';
        hud.appendChild(listDiv);

        const files = Object.keys(JSON.parse(localStorage.os));
        const pageFiles = files.slice((page - 1) * 14, page * 14);
        pageFiles.forEach(filename => {
            const fileBtn = document.createElement('div');
            fileBtn.innerText = filename;
            fileBtn.style.cursor = 'pointer';
            fileBtn.style.color = '#000';
            fileBtn.style.padding = '2px 0';
            fileBtn.addEventListener('click', () => {
                selected = filename;
                readFile();
            });
            listDiv.appendChild(fileBtn);
        });

        renderButtons(['Create File', 'Page+', 'Page-', 'Options'], [
            createFilePrompt,
            () => { page++; gohome(); },
            () => { page = Math.max(1, page - 1); gohome(); },
            showOptionsMenu
        ]);
    }

    /* ---------------- FILE DELETION ---------------- */
    function deleteFile() {
        if (!selected) return;
        if (!confirm(`Delete "${selected}"?`)) return;
        const os = JSON.parse(localStorage.os);
        delete os[selected];
        localStorage.os = JSON.stringify(os);
        selected = null;
        gohome();
    }

    /* ---------------- CREATE FILE MODAL + FADE ---------------- */
    function createModalBase(titleText, width = "300px") {
        const modal = document.createElement('div');
        modal.style.position = 'fixed';
        modal.style.top = '50%';
        modal.style.left = '50%';
        modal.style.transform = 'translate(-50%, -50%)';
        modal.style.width = width;
        modal.style.background = '#C0C0C0';
        modal.style.border = '2px outset #808080';
        modal.style.zIndex = 1000000;
        modal.style.padding = '10px';
        modal.style.fontFamily = 'monospace';

        // fade-in
        modal.classList.add("fade-window");
        setTimeout(() => modal.classList.add("fade-show"), 10);

        // HEADER
        const header = document.createElement('div');
        header.style.display = 'flex';
        header.style.justifyContent = 'space-between';
        header.style.alignItems = 'center';
        header.style.background = '#000080';
        header.style.color = '#fff';
        header.style.fontWeight = 'bold';
        header.style.padding = '2px 5px';
        header.style.borderBottom = '2px solid #808080';
        header.style.cursor = 'move';
        modal.appendChild(header);

        const title = document.createElement('span');
        title.innerText = titleText;
        header.appendChild(title);

        const closeBtn = document.createElement('button');
        closeBtn.innerText = 'X';
        closeBtn.style.background = '#C0C0C0';
        closeBtn.style.border = '2px outset #808080';
        closeBtn.style.color = '#000';
        closeBtn.style.cursor = 'pointer';
        closeBtn.style.fontSize = '12px';
        closeBtn.style.padding = '0 4px';
        closeBtn.style.width = '20px';
        closeBtn.addEventListener('click', () => {
            modal.classList.remove("fade-show");
            modal.classList.add("fade-hide");
            setTimeout(() => modal.remove(), 250);
        });
        header.appendChild(closeBtn);

        // drag logic
        let dragging = false, dx = 0, dy = 0;
        header.addEventListener('mousedown', e => {
            if (e.target === closeBtn) return;
            dragging = true;
            const r = modal.getBoundingClientRect();
            dx = e.clientX - r.left;
            dy = e.clientY - r.top;
        });

        document.addEventListener('mousemove', e => {
            if (dragging) {
                modal.style.left = `${e.clientX - dx}px`;
                modal.style.top = `${e.clientY - dy}px`;
                modal.style.transform = "none";
            }
        });

        document.addEventListener('mouseup', () => dragging = false);

        document.body.appendChild(modal);
        return modal;
    }

    function createFilePrompt() {
        const modal = createModalBase("Create New File");

        const input = document.createElement('input');
        input.type = 'text';
        input.placeholder = 'Enter file name (txt, png, ran)';
        input.style.width = '100%';
        input.style.marginTop = '10px';
        input.style.padding = '2px';
        modal.appendChild(input);

        const btnDiv = document.createElement('div');
        btnDiv.style.marginTop = '10px';
        btnDiv.style.textAlign = 'right';
        modal.appendChild(btnDiv);

        const createBtn = document.createElement('button');
        createBtn.innerText = 'Create';
        createBtn.style.background = '#C0C0C0';
        createBtn.style.border = '2px outset #808080';
        createBtn.style.color = '#000';
        createBtn.style.cursor = 'pointer';

        createBtn.addEventListener('click', () => {
            const name = input.value.trim();
            if (!name) return alert("Enter a name.");
            createFile(name);

            modal.classList.remove("fade-show");
            modal.classList.add("fade-hide");
            setTimeout(() => modal.remove(), 250);
        });

        btnDiv.appendChild(createBtn);

        input.focus();
    }

    /* ---------------- RENAME MODAL (WITH FADE) ---------------- */
    function renameFile() {
        if (!selected) return;

        const modal = createModalBase("Rename File");

        const input = document.createElement('input');
        input.type = 'text';
        input.value = selected;
        input.style.width = '100%';
        input.style.marginTop = '10px';
        input.style.padding = '2px';
        modal.appendChild(input);

        const btnDiv = document.createElement('div');
        btnDiv.style.marginTop = '10px';
        btnDiv.style.textAlign = 'right';
        modal.appendChild(btnDiv);

        const renameBtn = document.createElement('button');
        renameBtn.innerText = 'Rename';
        renameBtn.style.background = '#C0C0C0';
        renameBtn.style.border = '2px outset #808080';
        renameBtn.style.color = '#000';
        renameBtn.style.cursor = 'pointer';

        renameBtn.addEventListener('click', () => {
            const newName = input.value.trim();
            if (!newName || newName === selected) return;

            const os = JSON.parse(localStorage.os);
            if (os[newName]) return alert("File already exists.");

            os[newName] = os[selected];
            delete os[selected];
            localStorage.os = JSON.stringify(os);

            selected = newName;
            readFile();

            modal.classList.remove("fade-show");
            modal.classList.add("fade-hide");
            setTimeout(() => modal.remove(), 250);
        });

        btnDiv.appendChild(renameBtn);

        input.focus();
    }

    /* ---------------- READ FILE ---------------- */
    function readFile() {
        if (!selected) return;

        const os = JSON.parse(localStorage.os);
        let val = os[selected];

        editor.style.display = 'none';
        canvas.style.display = 'none';
        pre.style.display = 'none';
        paletteDiv.style.display = 'none';

        if (selected.endsWith('.txt')) {
            editor.value = val;
            editor.style.display = 'block';
            renderButtons(['Save', 'Home', 'Delete', 'Rename'], [saveFile, gohome, deleteFile, renameFile]);
        }

        else if (selected.endsWith('.ran')) {
            if (!Array.isArray(val) || !Array.isArray(val[0])) {
                const grid = Array.from({ length: SCREEN_HEIGHT }, () =>
                    Array.from({ length: SCREEN_WIDTH }, () =>
                        `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`
                    )
                );
                os[selected] = grid;
                localStorage.os = JSON.stringify(os);
                val = grid;
            }

            pixelGrid = val.map(r => r.slice());
            canvas.style.display = 'block';
            renderCanvas();
            setupCanvasMouse();
            setupPalette();
            renderButtons(['Save', 'Home', 'Delete', 'Rename'], [saveCanvasFile, gohome, deleteFile, renameFile]);
        }

        else if (selected.match(/\.(png|jpg|jpeg)$/)) {
            if (Array.isArray(val) && Array.isArray(val[0]))
                pixelGrid = val.map(r => r.slice());
            else
                pixelGrid = Array.from({ length: SCREEN_HEIGHT }, () => Array(SCREEN_WIDTH).fill('#000000'));

            canvas.style.display = 'block';
            renderCanvas();
            setupCanvasMouse();
            setupPalette();
            renderButtons(['Save', 'Home', 'Delete', 'Rename'], [saveCanvasFile, gohome, deleteFile, renameFile]);
        }

        else {
            pre.style.display = 'block';
            pre.textContent = "Cannot display file.";
            renderButtons(['Home', 'Delete'], [gohome, deleteFile]);
        }
    }

    /* ---------------- CREATE FILE ---------------- */
    function createFile(name) {
        const os = JSON.parse(localStorage.os);

        if (!os[name]) {
            if (name.endsWith('.txt')) os[name] = "empty";
            else if (name.endsWith('.ran')) os[name] = 1;
            else os[name] = Array.from({ length: SCREEN_HEIGHT }, () =>
                Array(SCREEN_WIDTH).fill('#000000')
            );
            localStorage.os = JSON.stringify(os);
        }

        selected = name;
        readFile();
    }

    /* ---------------- SAVE FUNCS ---------------- */
    function saveFile() {
        const os = JSON.parse(localStorage.os);
        os[selected] = editor.value;
        localStorage.os = JSON.stringify(os);
        readFile();
    }

    function saveCanvasFile() {
        const os = JSON.parse(localStorage.os);
        os[selected] = pixelGrid.map(r => r.slice());
        localStorage.os = JSON.stringify(os);
        readFile();
    }

    /* ---------------- OPTIONS MENU (WITH FADE) ---------------- */
    function showOptionsMenu() {
        const modal = createModalBase("Options", "400px");

        const content = document.createElement('div');
        content.style.marginTop = '10px';
        modal.appendChild(content);

        function addLabelInput(labelText, type, val) {
            const l = document.createElement('label');
            l.textContent = labelText;
            l.style.display = 'block';
            l.style.marginTop = '5px';
            content.appendChild(l);

            const i = document.createElement('input');
            i.type = type;
            i.value = val;
            if (type === 'number') i.style.width = '100%';
            content.appendChild(i);
            return i;
        }

        const splashInput = addLabelInput('Splash Screen Text:', 'text', localStorage.e_gOS_splash || "Welcome to e_g.OS HUD Mode!");
        const barWidthInput = addLabelInput('Progress Bar Width:', 'number', localStorage.e_gOS_barWidth || 30);
        const hudColorInput = addLabelInput('HUD Background Color:', 'color', localStorage.e_gOS_hudColor || '#C0C0C0');
        const barColorInput = addLabelInput('Progress Bar Color:', 'color', localStorage.e_gOS_barColor || '#00FF00');
        const textColorInput = addLabelInput('Text Color:', 'color', localStorage.e_gOS_textColor || '#0F0');
        const typingSpeedInput = addLabelInput('Typing Speed (ms per char):', 'number', localStorage.e_gOS_typingSpeed || 50);

        const btnDiv = document.createElement('div');
        btnDiv.style.marginTop = '10px';
        btnDiv.style.textAlign = 'right';
        modal.appendChild(btnDiv);

        const saveBtn = document.createElement('button');
        saveBtn.innerText = 'Save';
        saveBtn.style.background = '#C0C0C0';
        saveBtn.style.border = '2px outset #808080';
        saveBtn.style.color = '#000';
        saveBtn.style.cursor = 'pointer';

        saveBtn.addEventListener('click', () => {
            localStorage.e_gOS_splash = splashInput.value;
            localStorage.e_gOS_barWidth = parseInt(barWidthInput.value) || 30;
            localStorage.e_gOS_hudColor = hudColorInput.value;
            localStorage.e_gOS_barColor = barColorInput.value;
            localStorage.e_gOS_textColor = textColorInput.value;
            localStorage.e_gOS_typingSpeed = parseInt(typingSpeedInput.value) || 50;

            hud.style.background = hudColorInput.value;
            pre.style.color = textColorInput.value;

            modal.classList.remove("fade-show");
            modal.classList.add("fade-hide");
            setTimeout(() => modal.remove(), 250);
        });

        btnDiv.appendChild(saveBtn);
    }

    /* ---------------- SPLASH SCREEN ---------------- */
    function start() {
        pre.style.display = 'block';
        pre.style.color = localStorage.e_gOS_textColor || '#0F0';

        const text = localStorage.e_gOS_splash || "Welcome to e_g.OS HUD Mode!\n";
        const barW = parseInt(localStorage.e_gOS_barWidth) || 30;
        const barColor = localStorage.e_gOS_barColor || '#00FF00';
        const speed = parseInt(localStorage.e_gOS_typingSpeed) || 50;

        let typed = 0;
        let prog = 0;
        let cursorBlink = true;

        function escapeHtml(s) {
            return s.replace(/[&<>"']/g, m => ({
                '&': '&amp;', '<': '&lt;', '>': '&gt;',
                '"': '&quot;', "'": '&#39;'
            }[m]));
        }

        function renderBar() {
            const bar = "█".repeat(prog) + " ".repeat(barW - prog);
            const cursor = cursorBlink ? "_" : " ";
            pre.innerHTML =
                escapeHtml(text.slice(0, typed)) +
                `<span style="color:${barColor}">[${bar}]</span>` +
                cursor;

            cursorBlink = !cursorBlink;
        }

        const typingInterval = setInterval(() => {
            if (typed < text.length) {
                typed++;
                renderBar();
            } else {
                clearInterval(typingInterval);

                const progressInterval = setInterval(() => {
                    if (prog < barW) {
                        prog++;
                        renderBar();
                    } else {
                        clearInterval(progressInterval);
                        pre.innerHTML =
                            escapeHtml(text) +
                            `<span style="color:${barColor}">[${"█".repeat(barW)}]</span>`;

                        setTimeout(gohome, 300);
                    }
                }, 100);
            }
        }, Math.max(10, speed));
    }

    /* ---------------- INIT ---------------- */
    function init() {
        hud.style.background = localStorage.e_gOS_hudColor || hud.style.background;
        pre.style.color = localStorage.e_gOS_textColor || pre.style.color;

        if (!window.e_gOS) window.e_gOS = { gohome, readFile, createFile };
        start();
    }

    init();

})();