User:Stumblean/common.js

(function () {
  // Create toggle button with image icon
  const toggle = document.createElement("button");
  toggle.id = "delta-toggle";
  Object.assign(toggle.style, {
    position: "fixed",
    bottom: "20px",
    right: "20px",
    padding: "0",
    background: "#2b2b2b", // Matching menu background color
    border: "none",
    borderRadius: "12px", // Rounded square
    zIndex: 9998,
    cursor: "pointer",
  });

  const icon = document.createElement("img");
  icon.src = "https://files.catbox.moe/uodscw.png";
  icon.alt = "Delta";
  Object.assign(icon.style, {
    width: "48px",
    height: "48px",
    borderRadius: "12px",
    display: "block", // Removes small spacing around img inside button
  });
  toggle.appendChild(icon);

  // Create Delta menu
  const menu = document.createElement("div");
  menu.id = "delta-menu";
  Object.assign(menu.style, {
    display: "none",
    position: "fixed",
    bottom: "80px",
    right: "20px",
    width: "300px",
    background: "#2b2b2b",
    color: "#fff",
    borderRadius: "10px",
    padding: "15px",
    boxShadow: "0 0 10px rgba(0,0,0,0.5)",
    zIndex: 9999,
    fontFamily: "monospace",
    cursor: "move",
    userSelect: "none",
    touchAction: "none", // prevent default scrolling on touch drag
  });

  const title = document.createElement("div");
  title.textContent = "Delta Online";
  Object.assign(title.style, {
    textAlign: "center",
    fontSize: "18px",
    marginBottom: "10px",
  });

  const textarea = document.createElement("textarea");
  textarea.placeholder = "Enter JavaScript...";
  Object.assign(textarea.style, {
    width: "100%",
    height: "120px",
    background: "#1e1e1e",
    color: "#fff",
    border: "none",
    borderRadius: "6px",
    padding: "10px",
    resize: "none",
    boxSizing: "border-box",
    cursor: "auto",
    userSelect: "text",
  });

  const runBtn = document.createElement("button");
  runBtn.textContent = "Run Code";
  Object.assign(runBtn.style, {
    marginTop: "10px",
    width: "100%",
    padding: "10px",
    background: "#4caf50",
    color: "#fff",
    border: "none",
    borderRadius: "6px",
    cursor: "pointer",
  });

  runBtn.onclick = () => {
    try {
      eval(textarea.value);
    } catch (e) {
      alert("Error: " + e.message);
    }
  };

  toggle.onclick = () => {
    menu.style.display = menu.style.display === "none" ? "block" : "none";
  };

  // Drag functionality for mouse and touch
  let isDragging = false;
  let dragStartX = 0;
  let dragStartY = 0;
  let menuStartLeft = 0;
  let menuStartTop = 0;

  function dragStart(x, y) {
    isDragging = true;
    dragStartX = x;
    dragStartY = y;
    const rect = menu.getBoundingClientRect();
    menuStartLeft = rect.left;
    menuStartTop = rect.top;
  }

  function dragMove(x, y) {
    if (!isDragging) return;

    const dx = x - dragStartX;
    const dy = y - dragStartY;

    let newLeft = menuStartLeft + dx;
    let newTop = menuStartTop + dy;

    const winWidth = window.innerWidth;
    const winHeight = window.innerHeight;
    const menuRect = menu.getBoundingClientRect();

    if (newLeft < 0) newLeft = 0;
    if (newTop < 0) newTop = 0;
    if (newLeft + menuRect.width > winWidth) newLeft = winWidth - menuRect.width;
    if (newTop + menuRect.height > winHeight) newTop = winHeight - menuRect.height;

    menu.style.left = newLeft + "px";
    menu.style.top = newTop + "px";
    menu.style.bottom = "auto";
    menu.style.right = "auto";
  }

  function dragEnd() {
    isDragging = false;
  }

  // Mouse events
  menu.addEventListener("mousedown", (e) => {
    if (e.target === textarea || e.target === runBtn) return;
    dragStart(e.clientX, e.clientY);
    e.preventDefault();
  });
  document.addEventListener("mousemove", (e) => {
    dragMove(e.clientX, e.clientY);
  });
  document.addEventListener("mouseup", dragEnd);

  // Touch events
  menu.addEventListener("touchstart", (e) => {
    if (e.target === textarea || e.target === runBtn) return;
    const touch = e.touches[0];
    dragStart(touch.clientX, touch.clientY);
    e.preventDefault();
  });
  document.addEventListener("touchmove", (e) => {
    if (!isDragging) return;
    const touch = e.touches[0];
    dragMove(touch.clientX, touch.clientY);
  }, { passive: false });
  document.addEventListener("touchend", dragEnd);
  document.addEventListener("touchcancel", dragEnd);

  // Assemble menu content
  menu.appendChild(title);
  menu.appendChild(textarea);
  menu.appendChild(runBtn);
  document.body.appendChild(toggle);
  document.body.appendChild(menu);
})();