☰

Keystroke overlay

Keys overlay for game inputs in TankTrouble

// ==UserScript==
// @name        Keystroke overlay
// @author      commander
// @description Keys overlay for game inputs in TankTrouble
// @namespace   https://github.com/asger-finding/tanktrouble-userscripts
// @version     0.0.3
// @license     GPL-3.0
// @match       https://tanktrouble.com/*
// @match       https://beta.tanktrouble.com/*
// @exclude     *://classic.tanktrouble.com/
// @run-at      document-idle
// @grant       GM_addStyle
// @noframes
// ==/UserScript==

GM_addStyle(`
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@700&display=swap&text=%E2%86%91%E2%86%93%E2%86%90%E2%86%92_');
	 
.keystrokes-hold {
	transform: skewX(-6deg);
	display: grid;
	grid-template: "shoot up ." "left down right";
	position: fixed;
	user-select: none;
	column-gap: 0.25rem;
	row-gap: 0.25rem;
	bottom: 8px;
	right: 7px;
	z-index: 2147483647;
}
#keystrokes-arrowKeys.keystrokes-hold {
	grid-template: ". . up ." "shoot left down right" auto / 120px;
}
.keystrokes-hold .key {
	background: #ececec;
	color: #6e6e6e;
	font-family: 'Source Code Pro', monospace;
	font-size: 1.875rem;
	font-weight: bold;
	border: 1.5px solid #aaaaaa;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
}
#keystrokes-arrowKeys.keystrokes-hold .key {
	min-height: calc(2.5rem - 5px);
	padding-bottom: 5px;
}
.keystrokes-hold .key-up { grid-area: up; }
.keystrokes-hold .key-left { grid-area: left; }
.keystrokes-hold .key-down { grid-area: down; }
.keystrokes-hold .key-right { grid-area: right; }
.keystrokes-hold .key-shoot { grid-area: shoot; }
.keystrokes-hold .key.active {
	background-color: #d2d2d2;
	color: #232323;
}
`);

const keycodes = {};

/**
 * Create HTML elements for the input overlays
 * from all keyboard input entries
 */
const createInputOverlays = () => {
	const order = ['up', 'down', 'left', 'right', 'shoot'];

	// Character dictonary for special characters
	const characterDict = {
		// Arrow up
		38: '↑',

		// Arrow down
		40: '↓',

		// Arrow left
		37: '←',

		// Arrow right
		39: '→',

		// Space
		32: '_'
	};

	/**
	 * Create an input overlay element from an input set and append it to body
	 * @param inputSetId Identifier for the input set
	 * @param input Input details and keycodes
	 */
	const createKeys = (inputSetId, input) => {
		const keysWrapper = $(`<div id="keystrokes-${ inputSetId }" class="keystrokes-hold"></div>`);

		const keys = Object.values(input.data).map((key, index) => {
			let character = String.fromCharCode(key);
			if (!/[a-zA-Z]/u.test(character) && key in characterDict) character = characterDict[key];

			const element = $(`<div class="key key-${ order[index] }">${character}</div>`);

			keycodes[key] = element;

			return element;
		});
		keysWrapper.append(keys);
		keysWrapper.hide();

		$(document.documentElement).append(keysWrapper);
	};

	for (const [inputSetId, input] of Object.entries(Inputs._inputSets)) {
		const { type } = input;
		if (type === 'keyboard') createKeys(inputSetId, input);
	}
};

Inputs._inputSetsInUse = new Proxy(Inputs._inputSetsInUse, {
	set(target, key, value) {
		target[key] = value;

		$('.keystrokes-hold').hide();
		let [priority] = Object.keys(target);
		if (priority === 'mouse') [, priority] = Object.keys(target);
		if (priority) $(`#keystrokes-${ priority}`).show();
	},
	deleteProperty(target, key) {
		const result = delete target[key];
		if (!Object.keys(target).length) $('.keystrokes-hold').hide();

		return result;
	}
});

document.addEventListener('keydown', ({ keyCode }) => GameManager.getGame()?.input.enabled && keycodes[keyCode]?.addClass('active'));
document.addEventListener('keyup', ({ keyCode }) => keycodes[keyCode]?.removeClass('active'));

createInputOverlays();