Dominoguy's Ultra Stable HUD (Richard Version)

// ============================================================
// FINAL ULTRA STABLE HUD + CHAT + LOGGING (TABBED + SAFE ADMIN + /YT + HUD LINES + JOIN/LEAVE TOGGLE + CLEAN CLOSE)
// ============================================================

let msgListener = null;
let chatObserver = null;
let joinLeaveInterval = null;

// ---------------- CONFIG ----------------
const HUD_CONFIG = {
  storageKey: "ultraCommandHudPosition",
  historyLimit: 100,
  owners: ["richardelta","richardlab"],
  adminNicks: [this.owners,"dominoguy_","haster","bzuki","mangojansapascual"/*mango catalan :trol:*/,"penthexium56","falling23"].flat(),
  joinLeaveKey: "ultraCommandHudJL" // toggle state storage
};

// ---------------- Utilities ----------------
function getCmd(str) { return str.split(" ")[0]; }
function getImpArr(str) { return str.split(" ").slice(1); }
function getImp(str) { return getImpArr(str).join(" "); }

// ✅ LOCAL ADMIN CHECK
function isAdmin(nick) { return HUD_CONFIG.adminNicks.includes(nick); }
function isOwner(nick) { return HUD_CONFIG.owners.includes(nick); }

// ---------------- CHAT LOG STORAGE ----------------
let chatLog = [];

// ============================================================
// CREATE HUD
// ============================================================
const hud = document.createElement("div");
hud.style.position = "fixed";
hud.style.width = "360px";
hud.style.height = "440px";
hud.style.background = "rgba(18,18,18,0.97)";
hud.style.color = "#fff";
hud.style.fontFamily = "Times New Roman";
hud.style.borderRadius = "13px";
hud.style.boxShadow = "0 0 30px rgba(0,0,0,0.7)";
hud.style.zIndex = "999999";
hud.style.display = "flex";
hud.style.flexDirection = "column";
hud.style.overflow = "hidden";

// Restore position
const saved = JSON.parse(localStorage.getItem(HUD_CONFIG.storageKey));
if (saved && saved.left && saved.top) {
    hud.style.left = saved.left;
    hud.style.top = saved.top;
} else {
    hud.style.top = "100px";
    hud.style.right = "40px";
}

// ---------------- HEADER ----------------
const header = document.createElement("div");
header.style.background = "#111";
header.style.padding = "6px";
header.style.cursor = "move";
header.style.display = "flex";
header.style.justifyContent = "space-between";
header.style.alignItems = "center";
header.style.fontWeight = "bold";
header.textContent = "Made by DG_, Verison by Richard";

// Buttons wrapper
const btnWrap = document.createElement("div");
function makeBtn(txt) {
    const b = document.createElement("button");
    b.textContent = txt;
    b.style.background = "#222";
    b.style.color = "#fff";
    b.style.border = "none";
    b.style.cursor = "pointer";
    b.style.width = "24px";
    b.style.height = "24px";
    b.style.borderRadius = "6px";
    b.style.marginLeft = "4px";
    return b;
}

const minBtn = makeBtn("–");
const closeBtn = makeBtn("×");
btnWrap.appendChild(minBtn);
btnWrap.appendChild(closeBtn);

// ---------------- JOIN/LEAVE TOGGLE ----------------
let showJoinLeave = JSON.parse(localStorage.getItem(HUD_CONFIG.joinLeaveKey)) ?? true;

const joinLeaveToggle = document.createElement("button");
joinLeaveToggle.textContent = showJoinLeave ? "JL: ON" : "JL: OFF";
joinLeaveToggle.style.background = "#222";
joinLeaveToggle.style.color = "#fff";
joinLeaveToggle.style.border = "none";
joinLeaveToggle.style.cursor = "pointer";
joinLeaveToggle.style.padding = "4px 6px";
joinLeaveToggle.style.borderRadius = "6px";
joinLeaveToggle.style.marginLeft = "4px";

joinLeaveToggle.onclick = () => {
    showJoinLeave = !showJoinLeave;
    joinLeaveToggle.textContent = showJoinLeave ? "JL: ON" : "JL: OFF";
    localStorage.setItem(HUD_CONFIG.joinLeaveKey, JSON.stringify(showJoinLeave));
};

btnWrap.appendChild(joinLeaveToggle);
header.appendChild(btnWrap);
hud.appendChild(header);

// ============================================================
// TABS
// ============================================================
const tabBar = document.createElement("div");
tabBar.style.display = "flex";
tabBar.style.background = "#151515";

function makeTab(name) {
    const t = document.createElement("div");
    t.textContent = name;
    t.style.flex = "1";
    t.style.textAlign = "center";
    t.style.padding = "6px";
    t.style.cursor = "pointer";
    t.style.borderBottom = "2px solid transparent";
    t.addEventListener("mouseenter", () => t.style.background = "#1a1a1a");
    t.addEventListener("mouseleave", () => t.style.background = "#151515");
    return t;
}

const tabAll = makeTab("All");
const tabChat = makeTab("Chat");
const tabCmd = makeTab("Commands");

tabBar.appendChild(tabAll);
tabBar.appendChild(tabChat);
tabBar.appendChild(tabCmd);
hud.appendChild(tabBar);

function makeLogPanel() {
    const panel = document.createElement("div");
    panel.style.flex = "1";
    panel.style.padding = "8px";
    panel.style.overflowY = "auto";
    panel.style.fontSize = "13px";
    panel.style.display = "none";
    return panel;
}

const logAll = makeLogPanel();
const logChat = makeLogPanel();
const logCmd = makeLogPanel();

hud.appendChild(logAll);
hud.appendChild(logChat);
hud.appendChild(logCmd);

function activateTab(tab, panel) {
    [tabAll, tabChat, tabCmd].forEach(t => t.style.borderBottom = "2px solid transparent");
    [logAll, logChat, logCmd].forEach(p => p.style.display = "none");

    tab.style.borderBottom = "2px solid #00aaff";
    panel.style.display = "block";
}

tabAll.onclick = () => activateTab(tabAll, logAll);
tabChat.onclick = () => activateTab(tabChat, logChat);
tabCmd.onclick = () => activateTab(tabCmd, logCmd);

activateTab(tabAll, logAll);

// ============================================================
// INPUT
// ============================================================
const input = document.createElement("input");
input.type = "text";
input.placeholder = "Enter command...";
input.style.border = "none";
input.style.outline = "none";
input.style.padding = "8px";
input.style.background = "#222";
input.style.color = "#fff";
hud.appendChild(input);

// ============================================================
// DOWNLOAD LOG
// ============================================================
const downloadBtn = document.createElement("button");
downloadBtn.textContent = "Download Log";
downloadBtn.style.background = "#222";
downloadBtn.style.color = "#fff";
downloadBtn.style.border = "none";
downloadBtn.style.cursor = "pointer";
downloadBtn.style.padding = "6px";
downloadBtn.style.borderRadius = "6px";
downloadBtn.onclick = () => {
    const blob = new Blob([chatLog.join("\n")], { type: "text/plain" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "chat_log.txt";
    a.click();
    URL.revokeObjectURL(url);
};
hud.appendChild(downloadBtn);

document.body.appendChild(hud);

// ============================================================
// DRAG SYSTEM
// ============================================================
let dragging = false, offsetX = 0, offsetY = 0;
header.addEventListener("mousedown", e => {
    dragging = true;
    offsetX = e.clientX - hud.offsetLeft;
    offsetY = e.clientY - hud.offsetTop;
});
document.addEventListener("mousemove", e => {
    if (!dragging) return;
    hud.style.left = (e.clientX - offsetX) + "px";
    hud.style.top = (e.clientY - offsetY) + "px";
    hud.style.right = "auto";
});
document.addEventListener("mouseup", () => {
    if (dragging) {
        localStorage.setItem(HUD_CONFIG.storageKey, JSON.stringify({ left: hud.style.left, top: hud.style.top }));
    }
    dragging = false;
});

// ============================================================
// MINIMIZE / CLOSE FIX
// ============================================================
let hudCollapsed = false;
minBtn.onclick = () => {
    if (!hudCollapsed) {
        hud.dataset.prevHeight = hud.style.height;
        hud.style.height = "40px";
        tabBar.style.display = "none";
        logAll.style.display = "none";
        logChat.style.display = "none";
        logCmd.style.display = "none";
        input.style.display = "none";
        downloadBtn.style.display = "none";
        hudCollapsed = true;
    } else {
        hud.style.height = hud.dataset.prevHeight || "440px";
        tabBar.style.display = "flex";
        const activePanel = logAll.style.display === "block" ? [tabAll, logAll] :
                            logChat.style.display === "block" ? [tabChat, logChat] : [tabCmd, logCmd];
        activateTab(activePanel[0], activePanel[1]);
        input.style.display = "block";
        downloadBtn.style.display = "block";
        input.focus();
        hudCollapsed = false;
    }
};

closeBtn.onclick = () => {
    hud.remove();
    if (msgListener) { w.off("msg", msgListener); msgListener = null; }
    if (chatObserver) { chatObserver.disconnect(); chatObserver = null; }
    if (joinLeaveInterval) { clearInterval(joinLeaveInterval); joinLeaveInterval = null; }
    w.chat.send("Bot stopped.");
};

// ============================================================
// LOGGING FUNCTION
// ============================================================
function hudLog(text, type = "all") {
    function append(panel) {
        const line = document.createElement("div");
        line.textContent = text;
        panel.appendChild(line);
        panel.scrollTop = panel.scrollHeight;
    }
    append(logAll);
    if (type === "chat") append(logChat);
    if (type === "cmd") append(logCmd);
    chatLog.push(text);
}

// ============================================================
// HUD LINES SYSTEM (NO TOAST)
// ============================================================
const HUD_LINES = 5;        // max visible lines
const HUD_LIFETIME = 8000; // ms before line expires

let hudLines = [];
let lastCursors = new Map();
let initialized = false;

function pushHUD(text) {
  hudLines.push({ text, time: Date.now() });
  if (hudLines.length > HUD_LINES) hudLines.shift();
}

// clean up expired lines periodically
let hudLinesCleanup = setInterval(() => {
  const now = Date.now();
  hudLines = hudLines.filter(l => now - l.time < HUD_LIFETIME);
}, 500);

// ============================================================
// TRACK JOINS / LEAVES
// ============================================================
joinLeaveInterval = setInterval(() => {
  const nowMap = new Map(w.cursors);

  if (initialized && showJoinLeave) {
    for (const [id, c] of nowMap) {
      if (!lastCursors.has(id)) {
        pushHUD(`→ ${c.n || "Anon "+id} | Joined or went to this wall.`);
        hudLog(`→ ${c.n || "Anon "+id} | Joined or went to this wall.`, "chat");
      }
    }

    for (const [id, c] of lastCursors) {
      if (!nowMap.has(id)) {
        pushHUD(`← ${c.n || "Anon "+id} | Left or went to another wall.`);
        hudLog(`← ${c.n || "Anon "+id} | Left or went to another wall.`, "chat");
      }
    }
  } else if (!initialized) {
    initialized = true;
  }

  lastCursors = nowMap;
}, 1000);

// ============================================================
// COMMAND SYSTEM
// ============================================================
const commands = [
    "dg:warp", "dg:tp", "dg:users", "dg:changetheme",
    "dg:whereis", "dg:whereisid", "dg:help", "dg.admin:sethudcolor", "dg.owner:shutdown", "dg:time", "dg:yt", "dg:getid", "dg:getcursorid"
];

function executeCommand(message, fromChat = false) {
    const cursors = Object.fromEntries(w.cursors);
    const cmd = getCmd(message).toLowerCase();
    const inputsArr = getImpArr(message);
    const inputs = getImp(message);

    function output(text) {
        hudLog(text, "cmd");
        pushHUD(text);
        if (!fromChat) w.chat.send("[Log] " + text);
    }
    function hudThrow(text) {
        hudLog(text, "cmd");
        pushHUD("<span style=\"color:#F00\">"+text+"</span>");
        if (!fromChat) w.chat.send("<start #f00>[Error]<end> " + text);
    }

    switch (cmd) {
        case "dg:help":
            output("Commands: " + commands.join(", "));
            break;
        case "dg:getid":
            if (!inputs) { output("Syntax: dg:getid <username>"); break; }
            const userObj = Object.values(cursors).find(c => c.n?.toLowerCase() === inputs.toLowerCase());
            if (!userObj) { output("User not found."); break; }
            const possibleId = userObj.aid ?? userObj.userId ?? userObj.accountId ?? userObj._id ?? userObj.id ?? null;
            if (!possibleId) { output("Anon ID not available client-side."); break; }
            output(`${userObj.n}'s anon id is ${possibleId}`);
            break;
        case "dg:getcursorid":
            if (!inputs) { output("Syntax: dg:getcursorid <username>"); break; }
            const cursorUser = Object.values(cursors).find(c => c.n?.toLowerCase() === inputs.toLowerCase());
            if (!cursorUser) { output("User not found."); break; }
            output(`${cursorUser.n}'s cursor id is ${cursorUser.id}`);
            break;
        case "dg:warp":
            if (!inputs) output("Syntax: dg:warp <wall>");
            else { w.goto(inputs); output("Warped to /" + inputs); }
            break;
        case "dg.owner:shutdown":
            if (!isOwner()) hudThrow("You are not the owner.")
            closeBtn.onclick();
            break;
        case "dg:tp":
            if (inputsArr.length < 2 || isNaN(inputsArr[0]) || isNaN(inputsArr[1]))
                output("Syntax: dg:tp <x> <y>");
            else {
                const x = Number(inputsArr[0]);
                const y = Number(inputsArr[1]);
                w.tp(x, -y);
                output(`Teleported to ${x}, ${y}`);
            }
            break;
        case "dg:users":
            output("Users: " + Object.values(cursors).map(c => c.n || c.id).join(", "));
            break;
        case "dg:time":
            output("Current time: " + new Date().toString());
            break;
        case "dg:changetheme":
            if (inputsArr.length < 2)
                output("Syntax: dg:changeTheme <primary> <secondary>");
            else {
                w.changeTheme(2);
                w.setPrimaryColor(inputsArr[0]);
                w.setSecondaryColor(inputsArr[1]);
                output("Theme changed.");
            }
            break;
        case "dg:whereis":
            if (!inputs) { output("Syntax: dg:whereIs <username>"); break; }
            const user = Object.values(cursors).find(c => c.n === inputs);
            output(user ? `${inputs} at ${user.l[0]}, ${-user.l[1]}` : "User not found.");
            break;
        case "dg:whereisid":
            if (!inputs) { output("Syntax: dg:whereIsId <id>"); break; }
            const u = cursors[inputs];
            output(u ? `ID ${inputs} at ${u.l[0]}, ${-u.l[1]}` : "ID not found.");
            break;
        case "dg.admin:sethudcolor":
            if (!isAdmin()) { hudThrow("Admin only."); break; }
            if (!inputs) output("Syntax: dg.admin:sethudcolor <color>");
            else { hud.style.background = inputs; output("HUD color changed."); }
            break;
        case "dg:yt":
            if (!inputs) { output("Syntax: dg:yt <channel URL>"); break; }
            output("Fetching stats for " + inputs + "...");
            const proxy = "https://api.allorigins.win/raw?url=";
            const url = encodeURIComponent(inputs);
            fetch(proxy + url)
                .then(res => res.text())
                .then(html => {
                    const match = html.match(/ytInitialData\s*=\s*(\{.*?\});/s);
                    if (!match) throw new Error("ytInitialData not found");
                    const json = JSON.parse(match[1]);
                    const header = json?.header?.c4TabbedHeaderRenderer || json?.header?.pageHeaderRenderer;
                    const subs = header?.subscriberCountText?.simpleText || "Hidden";
                    const videos = header?.videosCountText?.runs?.[0]?.text || header?.videosCountText?.simpleText || "N/A";
                    const views = header?.viewCountText?.simpleText || "N/A";
                    hudLog(`[BOT] Stats for ${inputs}: ${subs} subscribers - ${videos} videos - ${views}`, "cmd");
                    pushHUD(`[BOT] Stats: ${subs} subs, ${videos} vids, ${views} views`);
                })
                .catch(err => {
                    hudLog("[CLIENT] Failed to fetch stats: " + err.message, "cmd");
                    pushHUD("[CLIENT] Failed to fetch stats");
                });
            break;
    }
}

// ============================================================
// INPUT HANDLER
// ============================================================
input.addEventListener("keydown", e => {
    if (e.key === "Enter") {
        const value = input.value.trim();
        if (!value.startsWith("/")) return;
        executeCommand(value, false);
        input.value = "";
    }
});

// ============================================================
// CHAT LISTENER
// ============================================================
msgListener = d => {
  if (d.msg.toLowerCase().startsWith("dg:")||
        d.msg.toLowerCase().startsWith("dg.admin:")||
        d.msg.toLowerCase().startsWith("dg.owner:")) executeCommand(d.msg, true);
  else {
    hudLog(`${d.nick}: ${d.msg}`, "chat");
    pushHUD(`${d.nick}: ${d.msg}`);
  }
};
w.on("msg", msgListener);