Performance and Keystrokes/Mouse Display in JS

// Advanced Performance Monitor with Movable UI
// Usage: Copy this entire script into your browser's console and press Enter

(function() {
  // Configuration
  const config = {
    keysToShow: ['KeyW', 'KeyA', 'KeyS', 'KeyD', 'ShiftLeft', 'ControlLeft', 'KeyQ', 'KeyZ', 'KeyX', 'KeyC', 'KeyV', 'KeyF', 'Digit1', 'Digit2', 'Digit3', 'Digit4', 'Digit5', 'Digit6'],
    keyboardLayout: {
      row1: ['Digit1', 'Digit2', 'Digit3', 'Digit4', 'Digit5', 'Digit6'],
      row2: ['KeyQ', 'KeyW', 'KeyE', 'KeyF'],
      row3: ['KeyA', 'KeyS', 'KeyD'],
      row4: ['KeyZ', 'KeyX', 'KeyC', 'KeyV'],
      modifiers: ['ShiftLeft', 'ControlLeft']
    },
    keyLabels: {
      'KeyW': 'W', 'KeyA': 'A', 'KeyS': 'S', 'KeyD': 'D',
      'ShiftLeft': 'SHIFT', 'ControlLeft': 'CTRL',
      'KeyQ': 'Q', 'KeyZ': 'Z', 'KeyX': 'X', 'KeyC': 'C', 'KeyV': 'V', 'KeyF': 'F',
      'Digit1': '1', 'Digit2': '2', 'Digit3': '3', 'Digit4': '4', 'Digit5': '5', 'Digit6': '6'
    },
    toggleUIKey: 'Home',
    lockUnlockKey: 'End'
  };

  // State
  let locked = true;
  let uiVisible = true;
  let activeModules = {
    keyboard: true,
    mouse: true,
    mouseCoords: true,
    fps: true,
    ping: true
  };

  // Create styles
  const styleEl = document.createElement('style');
  styleEl.textContent = `
    .perf-monitor-module {
      position: fixed;
      background-color: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      font-family: monospace;
      z-index: 9999;
      min-width: 120px;
      user-select: none;
      transition: border 0.3s;
    }
    .perf-monitor-module.unlocked {
      border: 1px solid #666;
      cursor: move;
    }
    .perf-monitor-module.locked {
      border: 1px solid transparent;
    }
    .perf-monitor-title {
      font-weight: bold;
      border-bottom: 1px solid #666;
      margin-bottom: 5px;
      padding-bottom: 2px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .perf-monitor-close {
      cursor: pointer;
      color: #ff6666;
      font-size: 16px;
      line-height: 14px;
    }
    .perf-keyboard {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .perf-keyboard-row {
      display: flex;
      gap: 5px;
      justify-content: center;
    }
    .perf-key {
      border: 1px solid #666;
      border-radius: 3px;
      padding: 5px;
      min-width: 20px;
      text-align: center;
      background-color: #333;
      box-shadow: 0 2px 0 #222;
      transition: all 0.1s;
    }
    .perf-key.active {
      background-color: #80ff80;
      color: #000;
      transform: translateY(2px);
      box-shadow: 0 0 0 #222;
    }
    .perf-modifiers {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
    }
    .perf-mouse-display {
      width: 80px;
      height: 120px;
      background-color: #333;
      border-radius: 40px;
      position: relative;
      margin: 10px auto;
      overflow: hidden;
    }
    .perf-mouse-button {
      position: absolute;
      width: 40px;
      height: 30px;
      background-color: #444;
      border-radius: 5px 5px 0 0;
      transition: all 0.1s;
    }
    .perf-mouse-button.left {
      left: 0;
      top: 0;
    }
    .perf-mouse-button.right {
      right: 0;
      top: 0;
    }
    .perf-mouse-button.active {
      background-color: #80ff80;
    }
    .perf-mouse-wheel {
      position: absolute;
      width: 10px;
      height: 15px;
      background-color: #666;
      left: 50%;
      top: 15px;
      transform: translateX(-50%);
      border-radius: 5px;
    }
    .perf-config-panel {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.9);
      padding: 20px;
      border-radius: 5px;
      z-index: 10000;
      min-width: 300px;
    }
    .perf-config-title {
      font-size: 16px;
      margin-bottom: 15px;
      text-align: center;
    }
    .perf-config-option {
      margin-bottom: 10px;
    }
    .perf-config-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    .perf-config-button {
      background: #333;
      border: 1px solid #666;
      color: white;
      padding: 5px 10px;
      cursor: pointer;
      border-radius: 3px;
    }
  `;
  document.head.appendChild(styleEl);

  // Create modules
  function createModule(id, title, initialX, initialY) {
    const module = document.createElement('div');
    module.className = `perf-monitor-module ${locked ? 'locked' : 'unlocked'}`;
    module.id = id;
    module.style.left = `${initialX}px`;
    module.style.top = `${initialY}px`;

    const titleBar = document.createElement('div');
    titleBar.className = 'perf-monitor-title';
    titleBar.innerHTML = `${title} <span class="perf-monitor-close">×</span>`;

    const content = document.createElement('div');
    content.className = 'perf-monitor-content';

    module.appendChild(titleBar);
    module.appendChild(content);
    document.body.appendChild(module);

    // Make module draggable
    let isDragging = false;
    let offsetX, offsetY;

    titleBar.addEventListener('mousedown', (e) => {
      if (locked) return;
      isDragging = true;
      offsetX = e.clientX - module.getBoundingClientRect().left;
      offsetY = e.clientY - module.getBoundingClientRect().top;
    });

    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      module.style.left = `${e.clientX - offsetX}px`;
      module.style.top = `${e.clientY - offsetY}px`;
    });

    document.addEventListener('mouseup', () => {
      isDragging = false;
    });

    // Close button
    const closeBtn = titleBar.querySelector('.perf-monitor-close');
    closeBtn.addEventListener('click', () => {
      const moduleId = module.id.replace('perf-monitor-', '');
      activeModules[moduleId] = false;
      module.style.display = 'none';
    });

    return content;
  }

  // Create modules
  let keyboardModule, mouseModule, mouseCoordsModule, fpsModule, pingModule;

  function createModules() {
    // Create keyboard module (top right)
    if (activeModules.keyboard) {
      keyboardModule = createModule('perf-monitor-keyboard', 'Keyboard', window.innerWidth - 240, 20);
      keyboardModule.innerHTML = `<div class="perf-keyboard"></div>`;
      renderKeyboard();
    }

    // Create mouse visual module (below keyboard)
    if (activeModules.mouse) {
      mouseModule = createModule('perf-monitor-mouse', 'Mouse', window.innerWidth - 180, 220);
      mouseModule.innerHTML = `
        <div class="perf-mouse-display">
          <div class="perf-mouse-button left"></div>
          <div class="perf-mouse-button right"></div>
          <div class="perf-mouse-wheel"></div>
        </div>
        <div class="perf-mouse-clicks">
          Clicks: L: 0 | R: 0
        </div>
      `;
    }

    // Create mouse coordinates module (bottom left)
    if (activeModules.mouseCoords) {
      mouseCoordsModule = createModule('perf-monitor-mouseCoords', 'Mouse Position', 20, window.innerHeight - 100);
      mouseCoordsModule.innerHTML = 'X: 0, Y: 0';
    }

    // Create FPS module (top left)
    if (activeModules.fps) {
      fpsModule = createModule('perf-monitor-fps', 'FPS', 20, 20);
      fpsModule.innerHTML = '0 FPS';
    }

    // Create ping module (top left, below FPS)
    if (activeModules.ping) {
      pingModule = createModule('perf-monitor-ping', 'Ping', 20, 100);
      pingModule.innerHTML = 'Ping: ---ms';
    }
  }

  // Render keyboard
  function renderKeyboard() {
    if (!activeModules.keyboard) return;

    const keyboardEl = keyboardModule.querySelector('.perf-keyboard');
    keyboardEl.innerHTML = '';

    // Create rows
    Object.keys(config.keyboardLayout).forEach(rowKey => {
      if (rowKey === 'modifiers') return;

      const rowEl = document.createElement('div');
      rowEl.className = 'perf-keyboard-row';

      config.keyboardLayout[rowKey].forEach(keyCode => {
        if (!config.keysToShow.includes(keyCode)) return;

        const keyEl = document.createElement('div');
        keyEl.className = 'perf-key';
        keyEl.dataset.keyCode = keyCode;
        keyEl.textContent = config.keyLabels[keyCode] || keyCode;
        rowEl.appendChild(keyEl);
      });

      keyboardEl.appendChild(rowEl);
    });

    // Create modifiers
    const modifiersEl = document.createElement('div');
    modifiersEl.className = 'perf-modifiers';

    config.keyboardLayout.modifiers.forEach(keyCode => {
      if (!config.keysToShow.includes(keyCode)) return;

      const keyEl = document.createElement('div');
      keyEl.className = 'perf-key';
      keyEl.dataset.keyCode = keyCode;
      keyEl.textContent = config.keyLabels[keyCode] || keyCode;
      keyEl.style.width = '60px';
      modifiersEl.appendChild(keyEl);
    });

    keyboardEl.appendChild(modifiersEl);
  }

  // Keyboard tracking
  const keyState = {};

  document.addEventListener('keydown', (e) => {
    if (e.code === config.toggleUIKey) {
      toggleUI();
      return;
    }

    if (e.code === config.lockUnlockKey) {
      toggleLock();
      return;
    }

    keyState[e.code] = true;
    updateKeyboard();
  });

  document.addEventListener('keyup', (e) => {
    keyState[e.code] = false;
    updateKeyboard();
  });

  function updateKeyboard() {
    if (!activeModules.keyboard) return;

    document.querySelectorAll('.perf-key').forEach(keyEl => {
      const keyCode = keyEl.dataset.keyCode;
      if (keyState[keyCode]) {
        keyEl.classList.add('active');
      } else {
        keyEl.classList.remove('active');
      }
    });
  }

  // Mouse tracking
  let mouseX = 0;
  let mouseY = 0;
  let mouseClicks = { left: 0, right: 0 };
  let mouseButtonsState = { left: false, right: false };

  document.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
    updateMouseCoords();
  });

  document.addEventListener('mousedown', (e) => {
    if (e.button === 0) {
      mouseClicks.left++;
      mouseButtonsState.left = true;
    } else if (e.button === 2) {
      mouseClicks.right++;
      mouseButtonsState.right = true;
    }
    updateMouse();
  });

  document.addEventListener('mouseup', (e) => {
    if (e.button === 0) {
      mouseButtonsState.left = false;
    } else if (e.button === 2) {
      mouseButtonsState.right = false;
    }
    updateMouse();
  });

  function updateMouseCoords() {
    if (!activeModules.mouseCoords) return;
    mouseCoordsModule.innerHTML = `X: ${mouseX}, Y: ${mouseY}`;
  }

  function updateMouse() {
    if (!activeModules.mouse) return;

    const leftBtn = mouseModule.querySelector('.perf-mouse-button.left');
    const rightBtn = mouseModule.querySelector('.perf-mouse-button.right');
    const clicksEl = mouseModule.querySelector('.perf-mouse-clicks');

    if (mouseButtonsState.left) {
      leftBtn.classList.add('active');
    } else {
      leftBtn.classList.remove('active');
    }

    if (mouseButtonsState.right) {
      rightBtn.classList.add('active');
    } else {
      rightBtn.classList.remove('active');
    }

    clicksEl.textContent = `Clicks: L: ${mouseClicks.left} | R: ${mouseClicks.right}`;
  }

  // FPS tracking
  let frameCount = 0;
  let lastFrameTime = performance.now();
  let fps = 0;

  function updateFPS() {
    frameCount++;
    const now = performance.now();
    const delta = now - lastFrameTime;

    if (delta >= 1000) {
      fps = Math.round((frameCount * 1000) / delta);
      frameCount = 0;
      lastFrameTime = now;
      displayFPS();
    }

    requestAnimationFrame(updateFPS);
  }

  function displayFPS() {
    if (!activeModules.fps) return;

    const color = fps > 50 ? '#80ff80' : fps > 30 ? '#ffff80' : '#ff8080';
    fpsModule.innerHTML = `<span style="color: ${color}">${fps} FPS</span>`;
  }

  // Ping tracking
  let pingHistory = [];
  const MAX_PING_HISTORY = 5;
  let pingInterval;

  function measurePing() {
    if (!activeModules.ping) return;

    const start = performance.now();

    fetch('/favicon.ico', {
      method: 'HEAD',
      cache: 'no-store'
    })
    .then(() => {
      const pingTime = Math.round(performance.now() - start);
      pingHistory.unshift(pingTime);
      if (pingHistory.length > MAX_PING_HISTORY) {
        pingHistory.pop();
      }
      displayPing();
    })
    .catch(() => {
      pingHistory.unshift(-1); // Error
      if (pingHistory.length > MAX_PING_HISTORY) {
        pingHistory.pop();
      }
      displayPing();
    });
  }

  function displayPing() {
    if (!activeModules.ping) return;

    const currentPing = pingHistory[0];
    const avgPing = pingHistory.filter(p => p >= 0).reduce((sum, p) => sum + p, 0) /
                    pingHistory.filter(p => p >= 0).length || 0;

    let color = '#80ff80';
    if (currentPing > 100) color = '#ffff80';
    if (currentPing > 200) color = '#ff8080';
    if (currentPing < 0) color = '#ff0000';

    pingModule.innerHTML = `
      <div>Current: <span style="color: ${color}">${currentPing < 0 ? 'ERR' : currentPing + 'ms'}</span></div>
      <div>Avg: ${Math.round(avgPing)}ms</div>
    `;
  }

  // Toggle UI
  function toggleUI() {
    if (uiVisible) {
      showConfigPanel();
    } else {
      document.querySelectorAll('.perf-monitor-module').forEach(module => {
        const moduleId = module.id.replace('perf-monitor-', '');
        if (activeModules[moduleId]) {
          module.style.display = 'block';
        }
      });
      uiVisible = true;
    }
  }

  // Toggle lock/unlock
  function toggleLock() {
    locked = !locked;
    document.querySelectorAll('.perf-monitor-module').forEach(module => {
      if (locked) {
        module.classList.remove('unlocked');
        module.classList.add('locked');
      } else {
        module.classList.remove('locked');
        module.classList.add('unlocked');
      }
    });

    // Notification
    showNotification(locked ? 'UI Locked' : 'UI Unlocked');
  }

  // Show notification
  function showNotification(message) {
    const notification = document.createElement('div');
    notification.style.cssText = `
      position: fixed;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      font-family: monospace;
      z-index: 10001;
    `;
    notification.textContent = message;
    document.body.appendChild(notification);

    setTimeout(() => {
      notification.style.opacity = '0';
      notification.style.transition = 'opacity 0.5s';
      setTimeout(() => document.body.removeChild(notification), 500);
    }, 1500);
  }

  // Configuration panel
  function showConfigPanel() {
    uiVisible = false;

    // Hide all modules
    document.querySelectorAll('.perf-monitor-module').forEach(module => {
      module.style.display = 'none';
    });

    // Create config panel
    const configPanel = document.createElement('div');
    configPanel.className = 'perf-config-panel';
    configPanel.innerHTML = `
      <div class="perf-config-title">Performance Monitor Settings</div>

      <div class="perf-config-option">
        <label>
          <input type="checkbox" id="perf-config-keyboard" ${activeModules.keyboard ? 'checked' : ''}>
          Keyboard Display
        </label>
      </div>

      <div class="perf-config-option">
        <label>
          <input type="checkbox" id="perf-config-mouse" ${activeModules.mouse ? 'checked' : ''}>
          Mouse Display
        </label>
      </div>

      <div class="perf-config-option">
        <label>
          <input type="checkbox" id="perf-config-mouseCoords" ${activeModules.mouseCoords ? 'checked' : ''}>
          Mouse Coordinates
        </label>
      </div>

      <div class="perf-config-option">
        <label>
          <input type="checkbox" id="perf-config-fps" ${activeModules.fps ? 'checked' : ''}>
          FPS Counter
        </label>
      </div>

      <div class="perf-config-option">
        <label>
          <input type="checkbox" id="perf-config-ping" ${activeModules.ping ? 'checked' : ''}>
          Ping Monitor
        </label>
      </div>

      <div class="perf-config-buttons">
        <button class="perf-config-button" id="perf-config-save">Save</button>
        <button class="perf-config-button" id="perf-config-cancel">Cancel</button>
        <button class="perf-config-button" id="perf-config-reset">Reset Positions</button>
      </div>
    `;
    document.body.appendChild(configPanel);

    // Event listeners
    configPanel.querySelector('#perf-config-save').addEventListener('click', () => {
      activeModules.keyboard = configPanel.querySelector('#perf-config-keyboard').checked;
      activeModules.mouse = configPanel.querySelector('#perf-config-mouse').checked;
      activeModules.mouseCoords = configPanel.querySelector('#perf-config-mouseCoords').checked;
      activeModules.fps = configPanel.querySelector('#perf-config-fps').checked;
      activeModules.ping = configPanel.querySelector('#perf-config-ping').checked;

      // Remove all existing modules
      document.querySelectorAll('.perf-monitor-module').forEach(module => {
        document.body.removeChild(module);
      });

      // Create new modules
      createModules();

      document.body.removeChild(configPanel);
      uiVisible = true;
    });

    configPanel.querySelector('#perf-config-cancel').addEventListener('click', () => {
      document.body.removeChild(configPanel);

      // Show modules again
      document.querySelectorAll('.perf-monitor-module').forEach(module => {
        const moduleId = module.id.replace('perf-monitor-', '');
        if (activeModules[moduleId]) {
          module.style.display = 'block';
        }
      });

      uiVisible = true;
    });

    configPanel.querySelector('#perf-config-reset').addEventListener('click', () => {
      // Remove all existing modules
      document.querySelectorAll('.perf-monitor-module').forEach(module => {
        document.body.removeChild(module);
      });

      // Create new modules with default positions
      createModules();

      document.body.removeChild(configPanel);
      uiVisible = true;
    });
  }

  // Initialize
  createModules();
  updateKeyboard();
  updateMouse();
  updateMouseCoords();
  updateFPS();

  // Ping every 2 seconds
  measurePing();
  pingInterval = setInterval(measurePing, 2000);

  // Add context menu prevention
  document.addEventListener('contextmenu', (e) => {
    const isMonitorElement = e.target.closest('.perf-monitor-module, .perf-config-panel');
    if (isMonitorElement) {
      e.preventDefault();
    }
  });

  console.log('Advanced Performance Monitor started!');
  console.log('Press Home to toggle UI visibility/settings');
  console.log('Press End to lock/unlock UI elements');
})();