Internet Roadtrip - Smaller Wheel Click Area

README.md

Smaller Wheel Click Area for Internet Roadtrip

How to install

1. Install a browser extension to install userscripts (GreaseMonkey, TamperMonkey, ViolentMonkey, etc.)

   ❗ If you are on a Chromium-based browser (like Google Chrome), you may need to enable Developer Mode. Without this, this userscript may not work! Other browsers, like Firefox, don't have this problem.

   Follow this guide to do learn how to enable Developer Mode.

2. Click on the Raw below (not the one above this)

3. Install userscript

4. Reload Internet Roadtrip tab

Internet Roadtrip - Smaller Wheel Click Area.user.js

// ==UserScript==
// @name        Internet Roadtrip - Smaller Wheel Click Area
// @namespace   me.netux.site/user-scripts/internet-roadtrip/smaller-wheel-click-area
// @match       https://neal.fun/internet-roadtrip/*
// @grant       none
// @version     1.0.1
// @author      Netux
// @run-at      document-end
// ==/UserScript==

(async () => {
  const waitForWheelEl = new Promise((resolve) => {
    const interval = setInterval(() => {
      const wheelEl = document.querySelector('.wheel');

      if (!wheelEl) {
        return;
      }

      clearInterval(interval);
      resolve(wheelEl);
    }, 100);
  });

  const wheelEl = await waitForWheelEl;
  wheelEl.classList.add('wheel--click-area');

  const styleEl = document.createElement('style');
  styleEl.textContent = `
  .wheel--click-area {
    cursor: pointer;
    clip-path: ellipse(27% 19% at 50% 50%);
    user-select: none;

    &:hover {
      filter: brightness(1.5);
    }
  }

  .wheel--visual-copy {
    width: ${wheelEl.width}px;
    height: ${wheelEl.height}px;
    background-image: url("${wheelEl.src}");
    background-size: contain;
    pointer-events: none;
  }
  `;
  document.head.appendChild(styleEl);

  const wheelCopyEl = document.createElement('div');
  wheelCopyEl.className = 'wheel wheel--visual-copy';
  wheelEl.parentElement.insertBefore(wheelCopyEl, wheelEl);

  requestAnimationFrame(function updateWheelCopyStyles() {
    wheelCopyEl.style.transform = wheelEl.style.transform;

    requestAnimationFrame(updateWheelCopyStyles);
  })
})()