User:Jono Bean/common.js: Difference between revisions

From DQWiki
Jump to navigationJump to search
mNo edit summary
mNo edit summary
Line 1: Line 1:
/* Lorekeeper Standalone Terminal v6 - Royal Brown Theme */
/* Lorekeeper Standalone Terminal v6.1 - Royal Carzala Theme */
(function() {
(function() {
     var checkCount = 0;
     var checkCount = 0;
Line 10: Line 10:
         if (document.getElementById('lore-terminal-btn')) return;
         if (document.getElementById('lore-terminal-btn')) return;


        // 1. Earthy RPG Style CSS
         var css =  
         var css =  
             '#lore-chat::-webkit-scrollbar { width: 5px; }' +
             '#lore-chat::-webkit-scrollbar { width: 5px; }' +
             '#lore-chat::-webkit-scrollbar-thumb { background: #f97316; border-radius: 10px; }' +
             '#lore-chat::-webkit-scrollbar-thumb { background: #f97316; border-radius: 10px; }' +
             '.lore-msg { margin-bottom: 12px; padding: 12px 16px; border-radius: 15px; font-size: 14px; line-height: 1.5; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }' +
             '.lore-msg { margin-bottom: 12px; padding: 12px 16px; border-radius: 15px; font-size: 14px; line-height: 1.5; }' +
             '.lore-user { background: #f97316; color: #000; align-self: flex-end; margin-left: 35px; border-bottom-right-radius: 4px; font-weight: 500; }' +
             '.lore-user { background: #f97316; color: #000; align-self: flex-end; margin-left: 35px; border-bottom-right-radius: 4px; font-weight: 500; }' +
             '.lore-ai { background: #24140e; color: #f7f3e8; align-self: flex-start; margin-right: 35px; border-left: 4px solid #f97316; border-bottom-left-radius: 4px; }' +
             '.lore-ai { background: #24140e; color: #f7f3e8; align-self: flex-start; margin-right: 35px; border-left: 4px solid #f97316; border-bottom-left-radius: 4px; }';
            '.lore-ai b { color: #f97316; }';
          
          
         var style = document.createElement('style');
         var style = document.createElement('style');
Line 24: Line 22:
         document.head.appendChild(style);
         document.head.appendChild(style);


        // 2. The Button (Dark Brown w/ Orange Border)
         var btn = document.createElement('div');
         var btn = document.createElement('div');
         btn.id = 'lore-terminal-btn';
         btn.id = 'lore-terminal-btn';
         btn.innerHTML = '✨';
         btn.innerHTML = '✨';
         btn.setAttribute('style', 'position:fixed !important; bottom:25px !important; right:25px !important; width:65px !important; height:65px !important; background:#2d140e !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:32px !important; cursor:pointer !important; box-shadow:0 10px 30px rgba(0,0,0,0.6) !important; z-index:9999999 !important; border:3px solid #f97316 !important; transition: transform 0.2s ease;');
         btn.setAttribute('style', 'position:fixed !important; bottom:25px !important; right:25px !important; width:65px !important; height:65px !important; background:#2d140e !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:32px !important; cursor:pointer !important; box-shadow:0 10px 30px rgba(0,0,0,0.6) !important; z-index:9999999 !important; border:3px solid #f97316 !important;');


        // 3. The Chat Box (Matched to App Colors)
         var box = document.createElement('div');
         var box = document.createElement('div');
         box.id = 'lore-terminal-box';
         box.id = 'lore-terminal-box';
         box.setAttribute('style', 'position:fixed !important; bottom:105px !important; right:25px !important; width:420px !important; height:620px !important; background:#1a0d09 !important; border:1px solid #412a23 !important; border-radius:24px !important; display:none; flex-direction:column !important; box-shadow:0 30px 80px rgba(0,0,0,0.9) !important; z-index:9999999 !important; color:#f7f3e8 !important; font-family:serif !important; overflow:hidden;');
         box.setAttribute('style', 'position:fixed !important; bottom:105px !important; right:25px !important; width:410px !important; height:600px !important; background:#1a0d09 !important; border:1px solid #412a23 !important; border-radius:24px !important; display:none; flex-direction:column !important; box-shadow:0 30px 80px rgba(0,0,0,0.9) !important; z-index:9999999 !important; color:#f7f3e8 !important; font-family:serif !important; overflow:hidden;');
          
          
         box.innerHTML =  
         box.innerHTML =  
             '<div style="padding:18px 20px; border-bottom:1px solid #412a23; background:rgba(249,115,22,0.05); display:flex; justify-content:space-between; align-items:center;">' +
             '<div style="padding:18px 20px; border-bottom:1px solid #412a23; background:rgba(249,115,22,0.05); display:flex; justify-content:space-between; align-items:center;">' +
                 '<div><b style="color:#f97316; font-size:16px; letter-spacing:1px; text-transform:uppercase;">Archives</b><br><small style="opacity:0.6; font-size:10px;">Kingdom of the West</small></div>' +
                 '<div><b style="color:#f97316; font-size:16px; letter-spacing:1px; text-transform:uppercase;">Lorekeeper</b><br><small style="opacity:0.6; font-size:10px;">Duchy of Carzala - Seagate Archives</small></div>' +
                 '<span id="lore-close" style="cursor:pointer; font-size:24px; opacity:0.5; color:#f97316;">&times;</span>' +
                 '<span id="lore-close" style="cursor:pointer; font-size:24px; opacity:0.5; color:#f97316;">&times;</span>' +
             '</div>' +
             '</div>' +
             '<div id="lore-chat" style="flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; background:#1a0d09;">' +
             '<div id="lore-chat" style="flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; background:#1a0d09;">' +
                 '<div class="lore-msg lore-ai">Greetings, Traveler. I am the Lorekeeper. What history shall we unearth today?</div>' +
                 '<div class="lore-msg lore-ai">Greetings, Traveler. I am the Scribe of the Seagate Archives. What knowledge of <b>Carzala</b> do you seek today?</div>' +
             '</div>' +
             '</div>' +
             '<div style="padding:18px; background:rgba(0,0,0,0.3); border-top:1px solid #412a23; display:flex; gap:10px;">' +
             '<div style="padding
                '<input id="lore-input" placeholder="Consult the scrolls..." style="flex:1; background:#000; border:1px solid #412a23; padding:12px; border-radius:12px; color:#f7f3e8; outline:none; font-size:14px;">' +
                '<button id="lore-send" style="background:#f97316; color:#000; border:none; padding:10px 20px; border-radius:10px; cursor:pointer; font-weight:bold;">ASK</button>' +
            '</div>';
 
        document.body.appendChild(btn);
        document.body.appendChild(box);
 
        var input = document.getElementById('lore-input');
        var chat = document.getElementById('lore-chat');
 
        btn.onclick = function() { box.style.display = (box.style.display == 'none') ? 'flex' : 'none'; };
        document.getElementById('lore-close').onclick = function() { box.style.display = 'none'; };
 
        document.getElementById('lore-send').onclick = function() {
            var val = input.value.trim();
            if (!val) return;
            input.value = '';
 
            var uMsg = document.createElement('div');
            uMsg.className = 'lore-msg lore-user';
            uMsg.innerText = val;
            chat.appendChild(uMsg);
            chat.scrollTop = chat.scrollHeight;
 
            var aMsg = document.createElement('div');
            aMsg.className = 'lore-msg lore-ai';
            aMsg.innerText = "Consulting the royal records...";
            chat.appendChild(aMsg);
 
            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 || "The archives are silent on this matter.";
                        } catch(e) { aMsg.innerText = "Failed to parse the scribe scrolls."; }
                    } else { aMsg.innerText = "The connection to the archives has been severed (Status " + xhr.status + ")."; }
                    chat.scrollTop = chat.scrollHeight;
                }
            };
            xhr.send(JSON.stringify({ prompt: val }));
        };
        input.onkeydown = function(e) { if (e.keyCode === 13) document.getElementById('lore-send').click(); };
    }
})();

Revision as of 08:15, 25 February 2026

/* Lorekeeper Standalone Terminal v6.1 - Royal Carzala Theme */
(function() {
    var checkCount = 0;
    var initTimer = setInterval(function() {
        if (document.body) { clearInterval(initTimer); setupLore(); }
        if (checkCount++ > 100) clearInterval(initTimer);
    }, 100);

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

        var css = 
            '#lore-chat::-webkit-scrollbar { width: 5px; }' +
            '#lore-chat::-webkit-scrollbar-thumb { background: #f97316; border-radius: 10px; }' +
            '.lore-msg { margin-bottom: 12px; padding: 12px 16px; border-radius: 15px; font-size: 14px; line-height: 1.5; }' +
            '.lore-user { background: #f97316; color: #000; align-self: flex-end; margin-left: 35px; border-bottom-right-radius: 4px; font-weight: 500; }' +
            '.lore-ai { background: #24140e; color: #f7f3e8; align-self: flex-start; margin-right: 35px; border-left: 4px solid #f97316; border-bottom-left-radius: 4px; }';
        
        var style = document.createElement('style');
        style.type = 'text/css';
        style.appendChild(document.createTextNode(css));
        document.head.appendChild(style);

        var btn = document.createElement('div');
        btn.id = 'lore-terminal-btn';
        btn.innerHTML = '&#10024;';
        btn.setAttribute('style', 'position:fixed !important; bottom:25px !important; right:25px !important; width:65px !important; height:65px !important; background:#2d140e !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:32px !important; cursor:pointer !important; box-shadow:0 10px 30px rgba(0,0,0,0.6) !important; z-index:9999999 !important; border:3px solid #f97316 !important;');

        var box = document.createElement('div');
        box.id = 'lore-terminal-box';
        box.setAttribute('style', 'position:fixed !important; bottom:105px !important; right:25px !important; width:410px !important; height:600px !important; background:#1a0d09 !important; border:1px solid #412a23 !important; border-radius:24px !important; display:none; flex-direction:column !important; box-shadow:0 30px 80px rgba(0,0,0,0.9) !important; z-index:9999999 !important; color:#f7f3e8 !important; font-family:serif !important; overflow:hidden;');
        
        box.innerHTML = 
            '<div style="padding:18px 20px; border-bottom:1px solid #412a23; background:rgba(249,115,22,0.05); display:flex; justify-content:space-between; align-items:center;">' +
                '<div><b style="color:#f97316; font-size:16px; letter-spacing:1px; text-transform:uppercase;">Lorekeeper</b><br><small style="opacity:0.6; font-size:10px;">Duchy of Carzala - Seagate Archives</small></div>' +
                '<span id="lore-close" style="cursor:pointer; font-size:24px; opacity:0.5; color:#f97316;">&times;</span>' +
            '</div>' +
            '<div id="lore-chat" style="flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; background:#1a0d09;">' +
                '<div class="lore-msg lore-ai">Greetings, Traveler. I am the Scribe of the Seagate Archives. What knowledge of <b>Carzala</b> do you seek today?</div>' +
            '</div>' +
            '<div style="padding
Retrieved from ‘https://dq-nz.org/dqwiki/index.php?title=User:Jono_Bean/common.js&oldid=109025’