User:Jono Bean/common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* Lorekeeper Standalone Terminal v3 - Failsafe ES5 */
(function() {
    var checkCount = 0;
    var initTimer = setInterval(function() {
        checkCount++;
        if (document.body) {
            clearInterval(initTimer);
            setupLore();
        }
        if (checkCount > 100) clearInterval(initTimer); // Stop trying after 10s
    }, 100);

    function setupLore() {
        if (document.getElementById('lore-terminal-btn')) return;

        // 1. Create Floating Button
        var btn = document.createElement('div');
        btn.id = 'lore-terminal-btn';
        btn.innerHTML = '✨'; // Sparkles icon
        btn.setAttribute('style', 'position:fixed !important; bottom:20px !important; right:20px !important; width:60px !important; height:60px !important; background:#8b5cf6 !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:30px !important; cursor:pointer !important; box-shadow:0 10px 25px rgba(0,0,0,0.5) !important; z-index:999999 !important; border:2px solid #fff !important;');

        // 2. Create Box
        var box = document.createElement('div');
        box.id = 'lore-terminal-box';
        box.setAttribute('style', 'position:fixed !important; bottom:90px !important; right:20px !important; width:380px !important; height:550px !important; background:#0f0f14 !important; border:2px solid #8b5cf6 !important; border-radius:15px !important; display:none; flex-direction:column !important; box-shadow:0 20px 50px rgba(0,0,0,0.8) !important; z-index:999999 !important; color:#fff !important; font-family:sans-serif !important;');
        
        box.innerHTML = 
            '<div style="padding:15px; border-bottom:1px solid #333; display:flex; justify-content:space-between; align-items:center;">' +
                '<b style="color:#a78bfa">Lorekeeper Terminal</b>' +
                '<span id="lore-close" style="cursor:pointer; padding:5px;">&times;</span>' +
            '</div>' +
            '<div id="lore-chat" style="flex:1; overflow-y:auto; padding:15px; font-size:13px; line-height:1.4;">' +
                '<div style="background:#1a1a24; padding:10px; border-radius:8px; margin-bottom:10px;">The archives are ready. What is your inquiry?</div>' +
            '</div>' +
            '<div style="padding:15px; border-top:1px solid #333; display:flex;">' +
                '<input id="lore-input" type="text" style="flex:1; background:#000; color:#fff; border:1px solid #444; padding:8px; border-radius:5px; outline:none;">' +
                '<button id="lore-send" style="margin-left:5px; background:#8b5cf6; color:#fff; border:none; padding:8px 15px; border-radius:5px; cursor:pointer;">Ask</button>' +
            '</div>';

        document.body.appendChild(btn);
        document.body.appendChild(box);

        // Logic
        btn.onclick = function() {
            box.style.display = (box.style.display == 'none') ? 'flex' : 'none';
        };
        document.getElementById('lore-close').onclick = function() { box.style.display = 'none'; };

        var input = document.getElementById('lore-input');
        var chat = document.getElementById('lore-chat');

        document.getElementById('lore-send').onclick = function() {
            var val = input.value.trim();
            if (!val) return;
            input.value = '';

            var uMsg = document.createElement('div');
            uMsg.style.cssText = 'margin-bottom:10px; background:#8b5cf6; padding:8px; border-radius:8px; align-self:flex-end;';
            uMsg.innerText = val;
            chat.appendChild(uMsg);

            var aMsg = document.createElement('div');
            aMsg.style.cssText = 'margin-bottom:10px; background:#222; padding:10px; border-radius:8px; border-left:3px solid #8b5cf6;';
            aMsg.innerText = 'Consulting the records...';
            chat.appendChild(aMsg);

            // Using simple AJAX for compatibility
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://npc-forge--npc-forge-qh4gc.asia-southeast1.hosted.app/api/askLore", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        try {
                            var response = JSON.parse(xhr.responseText);
                            aMsg.innerText = response.text || response.data.text;
                        } catch(e) { aMsg.innerText = "Error parsing response."; }
                    } else {
                        aMsg.innerText = "API Error: " + xhr.status;
                    }
                }
            };
            xhr.send(JSON.stringify({ prompt: val }));
        };
    }
})();