mobile cursor overlay

adds a visible cursor on mobile/ipad that moves + clicks

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey, Greasemonkey किंवा Violentmonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

You will need to install an extension such as Tampermonkey to install this script.

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey किंवा Violentmonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल..

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल..

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्क्रिप्ट व्यवस्थापक एक्स्टेंशन इंस्टॉल करावे लागेल.

(माझ्याकडे आधीच युझर स्क्रिप्ट व्यवस्थापक आहे, मला इंस्टॉल करू द्या!)

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

(माझ्याकडे आधीच युझर स्टाईल व्यवस्थापक आहे, मला इंस्टॉल करू द्या!)

// ==UserScript==
// @name         mobile cursor overlay
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  adds a visible cursor on mobile/ipad that moves + clicks
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Create cursor element
    const cursor = document.createElement("div");
    cursor.id = "mobileCursor";
    document.body.appendChild(cursor);

    // Cursor style
    const style = document.createElement("style");
    style.textContent = `
        #mobileCursor {
            position: fixed;
            width: 22px;
            height: 22px;
            border: 2px solid white;
            border-radius: 50%;
            pointer-events: none;
            z-index: 999999999;
            transform: translate(-50%, -50%);
            transition: transform 0.05s linear;
        }

        #mobileCursor.click {
            transform: translate(-50%, -50%) scale(1.25);
            border-color: yellow;
        }
    `;
    document.head.appendChild(style);

    let lastX = window.innerWidth / 2;
    let lastY = window.innerHeight / 2;

    // Move cursor with touch
    function moveCursor(x, y) {
        lastX = x;
        lastY = y;
        cursor.style.left = x + "px";
        cursor.style.top = y + "px";
    }

    // Touch move
    window.addEventListener("touchmove", (e) => {
        if (e.touches.length > 0) {
            const t = e.touches[0];
            moveCursor(t.clientX, t.clientY);
        }
    }, { passive: true });

    // Touch start (click animation)
    window.addEventListener("touchstart", (e) => {
        if (e.touches.length > 0) {
            const t = e.touches[0];
            moveCursor(t.clientX, t.clientY);
        }

        cursor.classList.add("click");
        setTimeout(() => cursor.classList.remove("click"), 80);
    }, { passive: true });

})();