User:Stumblean/common.js

(function () {
    const iconURL = "https://files.catbox.moe/wk78nl.jpg";

    const menu = document.createElement("div");
    menu.id = "mahitoMenu";
    Object.assign(menu.style, {
        position: "fixed",
        top: "20px",
        right: "20px",
        padding: "10px",
        backgroundColor: "#111",
        color: "#fff",
        border: "2px solid #666",
        zIndex: "9999",
        fontFamily: "monospace",
        borderRadius: "10px",
        boxShadow: "0 0 10px rgba(0,0,0,0.5)",
        userSelect: "none",
        touchAction: "none"
    });

    const header = document.createElement("div");
    Object.assign(header.style, {
        cursor: "grab",
        display: "flex",
        alignItems: "center",
        marginBottom: "8px",
        gap: "6px"
    });

    // Replace title with catbox image
    const icon = document.createElement("img");
    icon.src = iconURL;
    icon.width = 10;
    icon.height = 10;
    icon.alt = "Mahito";
    icon.style.borderRadius = "2px";
    header.appendChild(icon);

    menu.appendChild(header);

    const content = document.createElement("div");
    const openBtn = document.createElement("button");
    openBtn.textContent = "Open Explanation";
    Object.assign(openBtn.style, {
        background: "#444",
        color: "#fff",
        border: "none",
        padding: "5px 10px",
        cursor: "pointer"
    });
    openBtn.onclick = () => console.log("Open Explanation clicked");
    content.appendChild(openBtn);

    menu.appendChild(content);
    document.body.appendChild(menu);

    // Dragging logic (mouse + touch)
    let isDragging = false, offsetX = 0, offsetY = 0;

    function startDrag(x, y) {
        isDragging = true;
        const rect = menu.getBoundingClientRect();
        offsetX = x - rect.left;
        offsetY = y - rect.top;
        menu.style.right = "auto";
    }

    function doDrag(x, y) {
        if (isDragging) {
            menu.style.left = (x - offsetX) + "px";
            menu.style.top = (y - offsetY) + "px";
        }
    }

    function stopDrag() {
        isDragging = false;
    }

    // Mouse events
    header.addEventListener("mousedown", e => {
        startDrag(e.clientX, e.clientY);
        e.preventDefault();
    });
    document.addEventListener("mousemove", e => doDrag(e.clientX, e.clientY));
    document.addEventListener("mouseup", stopDrag);

    // Touch events
    header.addEventListener("touchstart", e => {
        const touch = e.touches[0];
        startDrag(touch.clientX, touch.clientY);
        e.preventDefault();
    });
    document.addEventListener("touchmove", e => {
        if (!isDragging) return;
        const touch = e.touches[0];
        doDrag(touch.clientX, touch.clientY);
    });
    document.addEventListener("touchend", stopDrag);
})();