Keystrokes

(() => {
  if (window.__miniKeystrokesLoaded) {
    console.log("Mini Keystrokes already loaded.");
    return;
  }
  window.__miniKeystrokesLoaded = true;

  const SETTINGS = {
    scale: 1,
    right: 16,
    bottom: 16,
    keySize: 42,
    gap: 4,
    bg: "rgba(175,175,175,0.88)",
    bgPressed: "rgba(225,225,225,0.96)",
    border: "rgba(85,85,85,0.95)",
    text: "#ffffff",
    shadow: "rgba(0,0,0,0.38)",
    zIndex: 999999
  };

  const style = document.createElement("style");
  style.id = "mini-keystrokes-style";
  style.textContent = `
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

    #mini-keystrokes {
      position: fixed;
      right: ${SETTINGS.right}px;
      bottom: ${SETTINGS.bottom}px;
      z-index: ${SETTINGS.zIndex};
      user-select: none;
      transform: scale(${SETTINGS.scale});
      transform-origin: bottom right;
      image-rendering: pixelated;
      cursor: move;
    }

    #mini-keystrokes * {
      box-sizing: border-box;
      font-family: 'Press Start 2P', monospace;
    }

    .mk-row {
      display: flex;
      justify-content: center;
      gap: ${SETTINGS.gap}px;
      margin-bottom: ${SETTINGS.gap}px;
    }

    .mk-key, .mk-mouse, .mk-space {
      background: ${SETTINGS.bg};
      border: 2px solid ${SETTINGS.border};
      color: ${SETTINGS.text};
      text-shadow: 1.5px 1.5px 0 ${SETTINGS.shadow};
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.05s ease;
      box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.22),
        inset 0 -2px 0 rgba(0,0,0,0.16),
        0 1px 0 rgba(0,0,0,0.18);
      border-radius: 2px;
    }

    .mk-key {
      width: ${SETTINGS.keySize}px;
      height: ${SETTINGS.keySize}px;
      font-size: 13px;
      letter-spacing: 0.5px;
    }

    .mk-mouse {
      width: 62px;
      height: ${SETTINGS.keySize}px;
      flex-direction: column;
      font-size: 10px;
      line-height: 1;
      padding-top: 2px;
    }

    .mk-mouse .cps {
      font-size: 8px;
      margin-top: 4px;
      opacity: 0.96;
      letter-spacing: 0.3px;
    }

    .mk-space {
      width: 128px;
      height: 12px;
    }

    .mk-pressed {
      background: ${SETTINGS.bgPressed} !important;
      transform: translateY(1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 1px 0 rgba(0,0,0,0.12);
      filter: brightness(1.06);
    }

    .mk-hidden {
      display: none !important;
    }
  `;
  document.head.appendChild(style);

  const box = document.createElement("div");
  box.id = "mini-keystrokes";

  box.innerHTML = `
    <div class="mk-row">
      <div class="mk-key" id="mk-W">W</div>
    </div>
    <div class="mk-row">
      <div class="mk-key" id="mk-A">A</div>
      <div class="mk-key" id="mk-S">S</div>
      <div class="mk-key" id="mk-D">D</div>
    </div>
    <div class="mk-row">
      <div class="mk-mouse" id="mk-LMB">
        <div>LMB</div>
        <div class="cps" id="mk-LMB-cps">0 CPS</div>
      </div>
      <div class="mk-mouse" id="mk-RMB">
        <div>RMB</div>
        <div class="cps" id="mk-RMB-cps">0 CPS</div>
      </div>
    </div>
    <div class="mk-row">
      <div class="mk-space" id="mk-SPACE"></div>
    </div>
  `;

  document.body.appendChild(box);

  const keyMap = {
    KeyW: "mk-W",
    KeyA: "mk-A",
    KeyS: "mk-S",
    KeyD: "mk-D",
    Space: "mk-SPACE"
  };

  function press(id, state) {
    const el = document.getElementById(id);
    if (el) el.classList.toggle("mk-pressed", state);
  }

  document.addEventListener("keydown", (e) => {
    if (e.code === "ShiftRight" && !e.repeat) {
      box.classList.toggle("mk-hidden");
      return;
    }

    if (keyMap[e.code]) {
      press(keyMap[e.code], true);
    }
  });

  document.addEventListener("keyup", (e) => {
    if (keyMap[e.code]) {
      press(keyMap[e.code], false);
    }
  });

  let lmbClicks = [];
  let rmbClicks = [];

  function updateCPS() {
    const now = Date.now();
    lmbClicks = lmbClicks.filter(t => now - t < 1000);
    rmbClicks = rmbClicks.filter(t => now - t < 1000);

    document.getElementById("mk-LMB-cps").textContent = `${lmbClicks.length} CPS`;
    document.getElementById("mk-RMB-cps").textContent = `${rmbClicks.length} CPS`;
  }

  document.addEventListener("mousedown", (e) => {
    if (e.button === 0) {
      lmbClicks.push(Date.now());
      press("mk-LMB", true);
      updateCPS();
    }
    if (e.button === 2) {
      rmbClicks.push(Date.now());
      press("mk-RMB", true);
      updateCPS();
    }
  });

  document.addEventListener("mouseup", (e) => {
    if (e.button === 0) press("mk-LMB", false);
    if (e.button === 2) press("mk-RMB", false);
  });

  setInterval(updateCPS, 100);

  // Drag system
  let dragging = false;
  let offsetX = 0;
  let offsetY = 0;

  box.addEventListener("mousedown", (e) => {
    if (!e.target.closest(".mk-key, .mk-mouse, .mk-space")) return;
    dragging = true;
    const rect = box.getBoundingClientRect();
    offsetX = e.clientX - rect.left;
    offsetY = e.clientY - rect.top;
    e.preventDefault();
  });

  document.addEventListener("mousemove", (e) => {
    if (!dragging) return;
    box.style.right = "auto";
    box.style.left = `${e.clientX - offsetX}px`;
    box.style.top = `${e.clientY - offsetY}px`;
    box.style.bottom = "auto";
  });

  document.addEventListener("mouseup", () => {
    dragging = false;
  });

  window.removeMiniKeystrokes = () => {
    document.getElementById("mini-keystrokes")?.remove();
    document.getElementById("mini-keystrokes-style")?.remove();
    delete window.__miniKeystrokesLoaded;
    console.log("Mini Keystrokes removed.");
  };

  console.log("Mini Bloxd.io Keystrokes loaded! Bottom Right | Right Shift = Show/Hide");
})();