Add colors to keymap zones on monkeytype.com

monkeytype_keymap_colors.user.js

// ==UserScript==
// @name         Monkeytype Keymap Colors
// @namespace    http://tampermonkey.net/
// @version      2024-09-29
// @description  Adds colors to keymap zones on monkeytype.com
// @author       alexchexes
// @updateURL    https://gist.github.com/alexchexes/498c069fa994b7d76d8bcc1f7c144629/raw/monkeytype_keymap_colors.user.js
// @downloadURL  https://gist.github.com/alexchexes/498c069fa994b7d76d8bcc1f7c144629/raw/monkeytype_keymap_colors.user.js
// @match        https://monkeytype.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=monkeytype.com
// @grant        none
// ==/UserScript==

/*----------------------------------------*
I wonder why the most popular touch-typing tool doesn't have any kind of keymap color guides, which are a must-have for beginners or near-beginners.

I've created a simple userscript for myself that generates CSS to color and highlight the keymap in one of three styles of your choice.

I’d love to see this implemented as a standard feature.

A couple of notes:

1. The color choices are deliberate. Although other people might be used to differently colored keys in other tools (to address this, it would be useful to add the ability to customize colors in the settings), the current selection works well as mnemonic aids:
- Pink (lavender) for the pinky finger. This works for English speakers, but for others, pink may also stereotypically represent a "girly" color and might be associated with cute, small things. Stupid as it sounds, this mnemonic could work well.
- Gold (orange/yellow) for the ring finger, since rings are often gold. Works at least for Western culture.
- Red for the middle finger because you probably shouldn’t show your middle finger to people.
- The left and right index fingers are the brightest (lime and cyan, or green and blue), as these are the most convenient fingers to use. For many, green and blue are the most appealing colors, and they follow the order of RGB.
2. My solution is based on this Stylus style: https://userstyles.world/style/17547/monkeytype-keymap-color
If my version is used, half the credit should go to the author of that style, as they saved me the time I would have spent matching class names with fingers.
*----------------------------------------*/


/*---------------------------------------*
*          CHANGE THE MODE HERE          *
*----------------------------------------*/
const MODE = 'background';
// const MODE = 'outline';
// const MODE = 'combined';



(function() {
	window.addEventListener('load', function() {
		const colors = {
			pinky: '#b460ff',
			ring: '#ffc107',
			middle: '#ff387c',
			Lindex: '#0f0',
			Rindex: '#00abff',
			special: '#ffffffc2', // space
		};


		const selectors = {
			pinky: [
				/* Left pinky */
				`[data-key='\`~']`,
				`[data-key='1!']`,
				`[data-key='qQ']`,
				`[data-key='aA']`,
				`[data-key='zZ']`,
				/* Right pinky */
				`[data-key='0)']`,
				`[data-key='-_']`,
				`[data-key='=+']`,
				`[data-key='pP']`,
				`[data-key='[{']`,
				`[data-key=']}']`,
				`[data-key="'\\""]`,
				`[data-key="/?"]`,
				`[data-key=";:"]`,
				/* Left pinky RUSSIAN */
				`[data-key='ёЁ']`,
				`[data-key='1!']`,
				`[data-key='йЙ']`,
				`[data-key='фФ']`,
				`[data-key='яЯ']`,
				/* Right pinky RUSSIAN */
				`[data-key='0)']`,
				`[data-key='-_']`,
				`[data-key='=+']`,
				`[data-key="зЗ"]`,
				`[data-key="хХ"]`,
				`[data-key="ъЪ"]`,
				`[data-key="жЖ"]`,
				`[data-key="эЭ"]`,
				`[data-key=".,"]`,
			],
			ring: [
				/* Left ring finger */
				`[data-key='2@']`,
				`[data-key='wW']`,
				`[data-key='sS']`,
				`[data-key='xX']`,
				/* Right ring finger */
				`[data-key='9(']`,
				`[data-key='oO']`,
				`[data-key='lL']`,
				`[data-key='.>']`,
				/* Left ring finger RUSSIAN */
				`[data-key="2\\""]`,
				`[data-key="цЦ"]`,
				`[data-key="ыЫ"]`,
				`[data-key="чЧ"]`,
				/* Right ring finger RUSSIAN */
				`[data-key='9(']`,
				`[data-key="щЩ"]`,
				`[data-key="дД"]`,
				`[data-key="юЮ"]`,
			],
			middle: [
				/* Left middle finger */
				`[data-key='3#']`,
				`[data-key='eE']`,
				`[data-key='dD']`,
				`[data-key='cC']`,
				/* Right midle finger */
				`[data-key='8*']`,
				`[data-key='iI']`,
				`[data-key='kK']`,
				`[data-key=',<']`,
				/* Left middle finger RUSSIAN */
				`[data-key="3№"]`,
				`[data-key="уУ"]`,
				`[data-key="вВ"]`,
				`[data-key="сС"]`,
				/* Right midle finger RUSSIAN */
				`[data-key='8*']`,
				`[data-key="шШ"]`,
				`[data-key="лЛ"]`,
				`[data-key="бБ"]`,
			],
			Lindex: [
				/* Left index */
				`[data-key='4$']`,
				`[data-key='5%']`,
				`[data-key='rR']`,
				`[data-key='tT']`,
				`[data-key='fF']`,
				`[data-key='gG']`,
				`[data-key='vV']`,
				`[data-key='bB']`,
				/* Left index RUSSIAN */
				`[data-key="4;"]`,
				`[data-key="5%"]`,
				`[data-key='кК']`,
				`[data-key='еЕ']`,
				`[data-key="аА"]`,
				`[data-key="пП"]`,
				`[data-key="мМ"]`,
				`[data-key="иИ"]`,
			],
			Rindex: [
				/* Right index */
				`[data-key='7&']`,
				`[data-key='6^']`,
				`[data-key='uU']`,
				`[data-key='yY']`,
				`[data-key='jJ']`,
				`[data-key='hH']`,
				`[data-key='mM']`,
				`[data-key='nN']`,
				/* Right index RUSSIAN */
				`[data-key="6:"]`,
				`[data-key="7?"]`,
				`[data-key="нН"]`,
				`[data-key="гГ"]`,
				`[data-key="рР"]`,
				`[data-key="оО"]`,
				`[data-key="тТ"]`,
				`[data-key="ьЬ"]`,
			],
		};

		let css = ``;

		for (const finger in selectors) {
			if (Object.prototype.hasOwnProperty.call(selectors, finger)) {
				const fingerSelectors = selectors[finger];
				css += fingerSelectors.join(',\n');
				css += ` {
					color: ${colors[finger]} !important;
					border-color: ${colors[finger]} !important;
				`;

				if (MODE === 'combined') {
					css += `border: 1px solid !important`;
				}

				css += `}\n`;
				
				if (MODE !== 'outline') {
					css += fingerSelectors.join('.activeKey,\n');
					css += `.activeKey {
						background-color: ${colors[finger]} !important;
					}\n`;
				}
			}
		}

		if (MODE === 'outline') {
			css += `
				.activeKey {
					background-color: #00000030 !important;
					border: 2px solid !important;
				}
				
				.keymapKey.keySpace {
					border-color: ${colors.special} !important;
				}
			`;
		} else {
			// MODE === 'background'
			css += `
				.activeKey {
					color: #000000c4 !important;
				}
				
				.keymapKey.keySpace.activeKey {
					background-color: ${colors.special} !important;
				}
			`;
		}

		// reduce blur when unfocused
		css += `
			#words.blurred {
				opacity: .6;
				filter: blur(1px);
				-webkit-filter: blur(1px);
			}
		`;
		
		// normalize other colors so that letters visible on any theme
		css += `
			#keymap .keymapKey {
				background-color: #00000030;
			}
		`;

		const styleSheet = document.createElement('style');
		styleSheet.classList.add('_us_styles');
		styleSheet.innerHTML = css;
		document.head.appendChild(styleSheet);
	});
})();