AHC のビジュアライザをキーボードで操作できるようにするやつ

ahc-visualizer-userscript.js

(function () {
	"use strict";
	let lastNumberTypedAt = 0;
	let pressedNumbers = "";
	document.addEventListener("keydown", (e) => {
		// return if option key is pressed
		if (e.altKey || e.ctrlKey || e.metaKey) {
			return;
		}

		let fs = document.getElementById("fileSelect");
		let bar = document.getElementById("t_bar");
		let play = document.getElementById("play");
		if (fs && fs.options.length > 0) {
			// is key a number?
			let number = parseInt(e.key);
			if (!isNaN(number)) {
				if (Date.now() - lastNumberTypedAt > 1000) {
					// reset if it's been a while
					pressedNumbers = "";
				}
				// append number
				pressedNumbers += number;
				while (pressedNumbers.startsWith("0") && pressedNumbers.length > 1) {
					pressedNumbers = pressedNumbers.slice(1);
				}
				lastNumberTypedAt = Date.now();
			}

			// if enter key is pressed, jump to the file number
			if (e.code == "Enter" && pressedNumbers.length > 0 && Date.now() - lastNumberTypedAt < 1000) {
				e.preventDefault();
				let num = parseInt(pressedNumbers);
				// choose the option with the number
				for (let i = 0; i < fs.options.length; i++) {
					const value = fs.options[i].value;
					// extract a number from the value with regex
					const match = value.match(/\d+/);
					if (!match) continue;
					// remove leading zeros and compare
					if (parseInt(match[0]) == num) {
						fs.selectedIndex = i;
						fs.onchange({ target: fs });
						break;
					}
				}
				pressedNumbers = "";
			}

			if ((e.code == "ArrowUp" || e.code == "KeyW") && fs.selectedIndex > 0) {
				e.preventDefault();
				fs.selectedIndex--;
				fs.onchange({ target: fs });
			}
			if ((e.code == "ArrowDown" || e.code == "KeyS") && fs.selectedIndex < fs.options.length - 1) {
				e.preventDefault();
				fs.selectedIndex++;
				fs.onchange({ target: fs });
			}
		}
		if (e.code == "ArrowLeft" || e.code == "KeyA") {
			e.preventDefault();
			bar.valueAsNumber--;
			bar.value = bar.valueAsNumber;
			bar.dispatchEvent(new Event("input"));

			let evt = document.createEvent("HTMLEvents");
			evt.initEvent("change", false, true);
			bar.dispatchEvent(evt);
		}
		if (e.code == "ArrowRight" || e.code == "KeyD") {
			e.preventDefault();
			bar.valueAsNumber++;
			bar.value = bar.valueAsNumber;
			bar.dispatchEvent(new Event("input"));

			let evt = document.createEvent("HTMLEvents");
			evt.initEvent("change", false, true);
			bar.dispatchEvent(evt);
		}
		if (e.code == "KeyQ") {
			e.preventDefault();
			bar.valueAsNumber = 0;
			bar.value = bar.valueAsNumber;
			bar.dispatchEvent(new Event("input"));

			let evt = document.createEvent("HTMLEvents");
			evt.initEvent("change", false, true);
			bar.dispatchEvent(evt);
		}
		if (e.code == "KeyE") {
			e.preventDefault();
			bar.valueAsNumber = 100000;
			bar.value = bar.valueAsNumber;
			bar.dispatchEvent(new Event("input"));

			let evt = document.createEvent("HTMLEvents");
			evt.initEvent("change", false, true);
			bar.dispatchEvent(evt);
		}
		if (e.code == "Space") {
			e.preventDefault();
			play.focus();
			play.click();
		}
	});
})();