MediaWiki:Gadget-AnimatedCursorFollower.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * Animated Cursor Follower
 * WalkScape Wiki mouse-following pets.
 */

(function () {
	'use strict';

	const CONFIG = {
		scale: 1.5,
		speed: 0.5,
		offsetX: 30,
		offsetY: 30
	};

	const state = {
		targetX: window.innerWidth / 2,
		targetY: window.innerHeight / 2,
		currentX: window.innerWidth / 2,
		currentY: window.innerHeight / 2,
		facingRight: true,
		reqId: null
	};

	function mountPet(sourceNode) {
		const pet = sourceNode.cloneNode(true);

		const styles = window.getComputedStyle(sourceNode);

		const frameSize =
			parseInt(styles.getPropertyValue('--frame') || 48, 10);

		const centerOffset =
			(frameSize * CONFIG.scale) / 2;

		pet.style.setProperty(
			'--scale',
			String(CONFIG.scale)
		);

		Object.assign(pet.style, {
			position: 'fixed',
			top: '0',
			left: '0',
			pointerEvents: 'none',
			zIndex: '99999',
			margin: '0',
			willChange: 'transform',
			transition: 'none'
		});

		document.body.appendChild(pet);

		function render() {
			state.currentX +=
				(state.targetX - state.currentX) *
				CONFIG.speed;

			state.currentY +=
				(state.targetY - state.currentY) *
				CONFIG.speed;

			if (state.targetX > state.currentX + 1) {
				state.facingRight = true;
			} else if (
				state.targetX < state.currentX - 1
			) {
				state.facingRight = false;
			}

			const scaleX =
				state.facingRight ? 1 : -1;

			pet.style.transform =
				`translate3d(` +
				`${state.currentX - centerOffset}px, ` +
				`${state.currentY - centerOffset}px, 0)` +
				` scaleX(${scaleX})`;

			state.reqId =
				requestAnimationFrame(render);
		}

		document.addEventListener(
			'mousemove',
			function (e) {
				state.targetX =
					e.clientX + CONFIG.offsetX;

				state.targetY =
					e.clientY + CONFIG.offsetY;
			},
			{ passive: true }
		);

		document.addEventListener(
			'mouseleave',
			function () {
				cancelAnimationFrame(
					state.reqId
				);
			}
		);

		document.addEventListener(
			'mouseenter',
			function () {
				render();
			}
		);

		render();
	}

	function init() {
		const sprite =
			document.querySelector(
				'span.ws-sprite'
			);

		if (!sprite) {
			setTimeout(init, 500);
			return;
		}

		mountPet(sprite);
	}

	mw.loader.using(
		['mediawiki.util'],
		function () {
			$(window).on(
				'load',
				function () {
					setTimeout(init, 1000);
				}
			);
		}
	);

}());