|
|
| Line 1: |
Line 1: |
| /* Lorekeeper Standalone Terminal v7 - Failsafe Carzala Theme */ | | /* Lorekeeper Widget Loader - Advanced Version */ |
| (function() { | | (function() { |
| var checkCount = 0; | | var username = mw.config.get('wgUserName'); |
| var initTimer = setInterval(function() { | | var iframeUrl = 'https://npc-forge-qh4gc.web.app/lore?isWidget=true'; |
| if (document.body) {
| | if (username) { |
| clearInterval(initTimer);
| | iframeUrl += '&user=' + encodeURIComponent(username); |
| setupLore();
| | } |
| }
| |
| if (checkCount++ > 100) clearInterval(initTimer); | |
| }, 100); | |
|
| |
|
| function setupLore() { | | // Create a container that doesn't block the Wiki |
| if (document.getElementById('lore-terminal-btn')) return;
| | var widgetContainer = document.createElement('div'); |
| | widgetContainer.id = 'lorekeeper-widget-container'; |
| | widgetContainer.style.cssText = 'position:fixed; bottom:0; right:0; z-index:99999; pointer-events:none; transition: width 0.3s ease;'; |
| | widgetContainer.style.width = '600px'; // Wide enough for the compact view + padding |
| | widgetContainer.style.height = '800px'; |
|
| |
|
| // 1. Compatible Style Injection
| | var iframe = document.createElement('iframe'); |
| var css =
| | iframe.src = iframeUrl; |
| '#lore-chat::-webkit-scrollbar { width: 5px; }' +
| | iframe.style.cssText = 'width:100%; height:100%; border:none; background:transparent; pointer-events:auto;'; |
| '#lore-chat::-webkit-scrollbar-thumb { background: #f97316; border-radius: 10px; }' +
| | iframe.setAttribute('allow', 'clipboard-write'); // For links/sharing later |
| '.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-user { background: #f97316; color: #000; align-self: flex-end; margin-left: 35px; border-bottom-right-radius: 4px; text-align: right; }' +
| |
| '.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';
| |
| if (style.styleSheet) style.styleSheet.cssText = css;
| |
| else style.appendChild(document.createTextNode(css));
| |
| document.getElementsByTagName('head')[0].appendChild(style);
| |
|
| |
|
| // 2. The Button (Seagate Style)
| | widgetContainer.appendChild(iframe); |
| var btn = document.createElement('div');
| | document.body.appendChild(widgetContainer); |
| btn.id = 'lore-terminal-btn';
| |
| btn.innerHTML = '✨'; // Sparkles
| |
| 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 (Duchy of Carzala Theme)
| | // ? NEW: Listen for the widget telling the Wiki to "Grow" |
| var box = document.createElement('div');
| | window.addEventListener('message', function(event) { |
| box.id = 'lore-terminal-box';
| | if (event.origin !== 'https://npc-forge-qh4gc.web.app') return; |
| box.setAttribute('style', 'position:fixed !important; bottom:105px !important; right:25px !important; width:400px !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;');
| | if (event.data.type === 'lorekeeper-resize') { |
|
| | widgetContainer.style.width = event.data.width + 'px'; |
| 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;">Seagate Archives - Carzala</small></div>' +
| |
| '<span id="lore-close" style="cursor:pointer; font-size:24px; opacity:0.5; color:#f97316;">×</span>' +
| |
| '</div>' +
| |
| '<div id="lore-chat" style="flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:5px; background:#1a0d09;">' +
| |
| '<div class="lore-msg lore-ai">Greetings, Traveler. I am the Scribe of Seagate. What history of <b>Carzala</b> shall we unearth?</div>' +
| |
| '</div>' +
| |
| '<div style="padding:15px; background:rgba(0,0,0,0.3); border-top:1px solid #412a23; display:flex; gap:10px;">' +
| |
| '<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 Carzala records...";
| |
| chat.appendChild(aMsg);
| |
| | |
| // API Call (using compatible XHR)
| |
| 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 = "Connection to Seagate failed (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(); };
| |
| }
| |
| })(); | | })(); |
