☰

Keystroke overlay

Keys overlay for game inputs in TankTrouble

目前为 2024-01-09 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        Keystroke overlay
  3. // @author      commander
  4. // @description Keys overlay for game inputs in TankTrouble
  5. // @namespace   https://github.com/asger-finding/tanktrouble-userscripts
  6. // @version     0.0.3
  7. // @license     GPL-3.0
  8. // @match       *://*.tanktrouble.com/*
  9. // @exclude     *://classic.tanktrouble.com/
  10. // @run-at      document-idle
  11. // @grant       GM_addStyle
  12. // @noframes
  13. // ==/UserScript==
  14.  
  15. GM_addStyle(`
  16. @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_');
  17. 	 
  18. .keystrokes-hold {
  19. 	transform: skewX(-6deg);
  20. 	display: grid;
  21. 	grid-template: "shoot up ." "left down right";
  22. 	position: fixed;
  23. 	user-select: none;
  24. 	column-gap: 0.25rem;
  25. 	row-gap: 0.25rem;
  26. 	bottom: 8px;
  27. 	right: 7px;
  28. 	z-index: 2147483647;
  29. }
  30. #keystrokes-arrowKeys.keystrokes-hold {
  31. 	grid-template: ". . up ." "shoot left down right" auto / 120px;
  32. }
  33. .keystrokes-hold .key {
  34. 	background: #ececec;
  35. 	color: #6e6e6e;
  36. 	font-family: 'Source Code Pro', monospace;
  37. 	font-size: 1.875rem;
  38. 	font-weight: bold;
  39. 	border: 1.5px solid #aaaaaa;
  40. 	border-radius: 5px;
  41. 	display: flex;
  42. 	justify-content: center;
  43. 	min-width: 2.5rem;
  44. 	min-height: 2.5rem;
  45. }
  46. #keystrokes-arrowKeys.keystrokes-hold .key {
  47. 	min-height: calc(2.5rem - 5px);
  48. 	padding-bottom: 5px;
  49. }
  50. .keystrokes-hold .key-up { grid-area: up; }
  51. .keystrokes-hold .key-left { grid-area: left; }
  52. .keystrokes-hold .key-down { grid-area: down; }
  53. .keystrokes-hold .key-right { grid-area: right; }
  54. .keystrokes-hold .key-shoot { grid-area: shoot; }
  55. .keystrokes-hold .key.active {
  56. 	background-color: #d2d2d2;
  57. 	color: #232323;
  58. }
  59. `);
  60.  
  61. const keycodes = {};
  62.  
  63. /**
  64.  * Create HTML elements for the input overlays
  65.  * from all keyboard input entries
  66.  */
  67. const createInputOverlays = () => {
  68. 	const order = ['up', 'down', 'left', 'right', 'shoot'];
  69.  
  70. 	// Character dictonary for special characters
  71. 	const characterDict = {
  72. 		// Arrow up
  73. 		38: '↑',
  74.  
  75. 		// Arrow down
  76. 		40: '↓',
  77.  
  78. 		// Arrow left
  79. 		37: '←',
  80.  
  81. 		// Arrow right
  82. 		39: '→',
  83.  
  84. 		// Space
  85. 		32: '_'
  86. 	};
  87.  
  88. 	/**
  89. 	 * Create an input overlay element from an input set and append it to body
  90. 	 * @param inputSetId Identifier for the input set
  91. 	 * @param input Input details and keycodes
  92. 	 */
  93. 	const createKeys = (inputSetId, input) => {
  94. 		const keysWrapper = $(`<div id="keystrokes-${ inputSetId }" class="keystrokes-hold"></div>`);
  95.  
  96. 		const keys = Object.values(input.data).map((key, index) => {
  97. 			let character = String.fromCharCode(key);
  98. 			if (!/[a-zA-Z]/u.test(character) && key in characterDict) character = characterDict[key];
  99.  
  100. 			const element = $(`<div class="key key-${ order[index] }">${character}</div>`);
  101.  
  102. 			keycodes[key] = element;
  103.  
  104. 			return element;
  105. 		});
  106. 		keysWrapper.append(keys);
  107. 		keysWrapper.hide();
  108.  
  109. 		$(document.documentElement).append(keysWrapper);
  110. 	};
  111.  
  112. 	for (const [inputSetId, input] of Object.entries(Inputs._inputSets)) {
  113. 		const { type } = input;
  114. 		if (type === 'keyboard') createKeys(inputSetId, input);
  115. 	}
  116. };
  117.  
  118. Inputs._inputSetsInUse = new Proxy(Inputs._inputSetsInUse, {
  119. 	set(target, key, value) {
  120. 		target[key] = value;
  121.  
  122. 		$('.keystrokes-hold').hide();
  123. 		let [priority] = Object.keys(target);
  124. 		if (priority === 'mouse') [, priority] = Object.keys(target);
  125. 		if (priority) $(`#keystrokes-${ priority}`).show();
  126. 	},
  127. 	deleteProperty(target, key) {
  128. 		const result = delete target[key];
  129. 		if (!Object.keys(target).length) $('.keystrokes-hold').hide();
  130.  
  131. 		return result;
  132. 	}
  133. });
  134.  
  135. document.addEventListener('keydown', ({ keyCode }) => GameManager.getGame()?.input.enabled && keycodes[keyCode]?.addClass('active'));
  136. document.addEventListener('keyup', ({ keyCode }) => keycodes[keyCode]?.removeClass('active'));
  137.  
  138. createInputOverlays();