☰

Keyboard Display Script

shows keyboard inputs on screen

  1. // ==UserScript==
  2. // @name         Keyboard Display Script
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.25.4.5
  5. // @description  shows keyboard inputs on screen
  6. // @author       Oki and meppydc
  7. // @match        https://*.jstris.jezevec10.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. /**************************
  12.    Keyboard Display Script
  13. **************************/
  14. (function() {
  15.     window.addEventListener('load', function() {
  16.  
  17.         //Only display the keyboard if either in a Game or Replay
  18.         if (typeof Game != "undefined" || typeof Replayer != "undefined") {
  19.                 var nameR = Math.floor(Math.random() * (2 - 0 + 1) + 0)
  20.                 var names = ['jez', 'oki', 'mep']
  21.                 
  22.                 
  23.                 //positioning stuff: fiddle around with the positioning
  24.  
  25.                 //in game
  26.                 let gameLeft = -300
  27.                 let gameTop = 100
  28.  
  29.                 //replays
  30.                 let replayRight = 200
  31.                 let replayTop = 200
  32.  
  33.                 
  34.                 //names[nameR] is replacable with a string
  35.  
  36.             //labels are    0     1     2          3
  37.             var labels = ['180','SD', 'HD',      'CCW',
  38.                           //4     5     6     7    8    9
  39.                           'HL', 'CW', names[nameR], '<', 'v', '>']
  40.  
  41.             let kbdisplay = {left:7,right:9,sd:1,hd:2,ccw:3,cw:5,hold:4,180:0,reset:6,new:8}
  42.  
  43.             //each number here corresponds to the label of the corresponding number (ex: 180 is set to 0 so label 0 will be highlighted when 180 key is pressed
  44.             //make sure that each number in `kbdisplay` is unique and points to the right label
  45.  
  46.  
  47.             //don't scroll to the bottom
  48.  
  49.             //nothing important after
  50.             //          left right  sd hd ccw cw hold 180 reset new
  51.             //order is: [6,    8,   1,  2, 3,  5,  4,  0] (.22)
  52.             //order is: [7,    9,   8,  2, 5,  6,  1,  4] (.23)
  53.             //order is: [7,    9,   8,  2, 5,  6,  1,  4] (.24)
  54.             //order is: [7,    9,   8,  2, 5,  6,  1,  4,   0    3] (.24.1)
  55.             //order is: [7,    9,   8,  3, 5,  6,  2,  4,   0    1] (.24.2)
  56.             //0.25 added crap ton of variables, maybe use dictionary instead?
  57.             //0.25.1 enum
  58.  
  59.  
  60.             //var highlight = [[6,2],[8,2],[6,0],[8,0],[3,2],[5,2],[0,2],[2,2],[1,2],,[4,2]][this['actions'][this['ptr']]["a"]] //reference
  61.  
  62.  
  63.  
  64.  
  65.             if (typeof getParams != "function") {
  66.                 var getParams = a => {
  67.                     var params = a.slice(a.indexOf("(") + 1);
  68.                     params = params.substr(0, params.indexOf(")")).split(",");
  69.                     return params
  70.                 }
  71.             }
  72.             if (typeof trim != "function") {
  73.                 var trim = a => {
  74.                     a = a.slice(0, -1);
  75.                     a = a.substr(a.indexOf("{") + 1);
  76.                     return a
  77.                 }
  78.             }
  79.  
  80.             //Create the "keyboard holder". It's a div positioned where the keyboard will be, but it doesnt contain anything yet.
  81.             var kbhold = document.createElement("div");
  82.             kbhold.id = "keyboardHolder";
  83.             kbhold.style.position = "absolute"
  84.             //Im trying to position it relative to the main canvas (this doesnt really work well...)
  85.             kbhold.style.left = (myCanvas.getBoundingClientRect().left + gameLeft) + "px";
  86.             kbhold.style.top = (myCanvas.getBoundingClientRect().top + gameTop) + "px";
  87.  
  88.             //Helper method for keyboards in replays
  89.             if (typeof Replayer != "undefined" && typeof Game == "undefined") {
  90.                 Replayer["pressKey"] = function(num, type) {
  91.                     //console.log(num)
  92.                     //type: 0=release 1=down 2=press
  93.                     //Highlights the corresponding key
  94.                     //gets array of all "kbkey" classes and takes cell "num" and hightlights it
  95.                     document.getElementsByClassName("kbkey")[num].style.backgroundColor = type ? "lightgoldenrodyellow" : ""
  96.                     if (type == 2) {
  97.                         //from replay data you dont really know how long a key has been pressed. im using 100ms as a default
  98.                         setTimeout(x => {
  99.                             document.getElementsByClassName("kbkey")[num].style.backgroundColor = ""
  100.                         }, 20)
  101.                     }
  102.  
  103.                 }
  104.                 //positions the keyboard holder differently for replays (thanks to meppydc)
  105.                 kbhold.style.left = (myCanvas.getBoundingClientRect().right + replayRight) + "px";
  106.                 kbhold.style.top = (myCanvas.getBoundingClientRect().top + replayTop) + "px";
  107.             }
  108.  
  109.             document.body.appendChild(kbhold);
  110.  
  111.  
  112.             //(important)
  113.             //this is what is pasted into the keyboard holder and makes up the entire visual keyboard.
  114.             //(i decompressed and tidied it up a bit)
  115.             //basically it's a table consisting of 2 rows and 6 columns
  116.             //maybe read up on css tables if you wanna add new cells
  117.  
  118.             //nah
  119.  
  120.  
  121.             f = `
  122.  
  123. <style>
  124. #kbo {text-align:center;position: absolute;font-size:15px;}
  125. #kbo .tg {border-collapse:collapse;border-spacing:0;color:red;}
  126. #kbo .tg td{padding:10px 5px;border-style:solid;border-width:2px;}
  127. #kbo .tg th{padding:10px 5px;border-style:solid;border-width:2px;}
  128. #kbo .tg .tg-wp8o{border-color:#000000;border:inherit;}
  129. #kbo .tg .tg-tc3e{border-color:#34ff34;}
  130. #kbo .tg .tg-jy2k{border-color:#f8a102;}
  131. #kbo .tg .tg-p39m{border-color:#f8ff00;}
  132. #kbo .kbkey {background-color:black;}
  133. </style>
  134.  
  135. <div id=\"kbo\"><div id=\"kps\"></div>
  136. <table class=\"tg\">
  137. 	<tr>
  138. 		<td class=\"tg-tc3e kbkey\">${labels[0]}</td>
  139. 		<td class=\"tg-tc3e kbkey\">${labels[1]}</td>
  140. 		<td class=\"tg-tc3e kbkey\">${labels[2]}</td>
  141. 		<td class=\"tg-wp8o\"></td>
  142. 		<td class=\"tg-jy2k kbkey\">${labels[3]}</td>
  143. 		<td class=\"tg-wp8o\"></td>
  144. 	</tr>
  145. 	<tr>
  146. 		<td class=\"tg-p39m kbkey\">${labels[4]}</td>
  147. 		<td class=\"tg-p39m kbkey\">${labels[5]}</td>
  148. 		<td class=\"tg-p39m kbkey\">${labels[6]}</td>
  149. 		<td class=\"tg-jy2k kbkey\">${labels[7]}</td>
  150. 		<td class=\"tg-jy2k kbkey\">${labels[8]}</td>
  151. 		<td class=\"tg-jy2k kbkey\">${labels[9]}</td>
  152. 	</tr>
  153. </table>
  154. </div>
  155. `
  156.             keyboardHolder.innerHTML = f
  157.  
  158.             //keyboard if in game (not replays)********************************************************************************************************************************
  159.             if (typeof Game != "undefined") {
  160.  
  161.                 document['addEventListener']('keydown', press);
  162.                 document['addEventListener']('keyup', press);
  163.  
  164.                 function press(e) {
  165.                     if (~Game['set2ings'].indexOf(e.keyCode)) {
  166.  
  167.                         //lol
  168.  
  169.                         //console.log(Game['set2ings'])//displays the keycodes of your controls
  170.                         // left right sd hd ccw cw hold 180
  171.                         //(important)
  172.                         //listens to pressed keys and highlights the corresponsing div.
  173.                         //the magic array converts between the actions and the div that is highlighted.
  174.                         //If you change the order of the boxes, you might also have to adjust the numbers in this array
  175.                         //           left right sd hd ccw cw hold 180 reset new
  176.                         //order is: [6,    8,   1,  2, 3,  5,  4,  0] (.22 order)
  177.                         //order is: [7,    9,   8,  2, 5,  6,  1,  4] (.23 order)
  178.                         //order is: [7,    9,   8,  2, 5,  6,  1,  4] (.24 order)
  179.                         //order is: [7,    9,   8,  2, 5,  6,  1,  4,   0    3] (.24.1 order)
  180.                         //order is: [7,    9,   8,  3, 5,  6,  2,  4,   0    1] (.24.2 order)
  181.                         var corresponding = [kbdisplay.left, kbdisplay.right, kbdisplay.sd, kbdisplay.hd, kbdisplay.ccw, kbdisplay.cw, kbdisplay.hold, kbdisplay['180'], kbdisplay.reset, kbdisplay.new][Game['set2ings'].indexOf(e.keyCode)]
  182.                         document.getElementsByClassName("kbkey")[corresponding].style.backgroundColor = ["lightgoldenrodyellow", ""][+(e.type == "keyup")]
  183.                     }
  184.                 }
  185.  
  186.                 //This saves the settings array (which maps all actions in jstris to their keycodes) to a global variable for me to use (called Game['se2ings'])
  187.                 //resets every time a new game is started
  188.                 var set2ings = Game['prototype']['readyGo'].toString()
  189.                 set2ings = "Game['set2ings']=this.Settings.controls;" + trim(set2ings)
  190.                 Game['prototype']['readyGo'] = new Function(set2ings);
  191.  
  192.                 //calculates kps from kpp and pps and writes it into the kps element
  193.                 var updateTextBarFunc = Game['prototype']['updateTextBar'].toString()
  194.                 updateTextBarFunc = trim(updateTextBarFunc) + ";kps.innerHTML='KPS: '+(this.getKPP()*this.placedBlocks/this.clock).toFixed(2)"
  195.                 Game['prototype']['updateTextBar'] = new Function(updateTextBarFunc);
  196.             } else {
  197.  
  198.                 //else: we're in a replay********************************************************************************************************************************
  199.  
  200.                 var website = "jstris.jezevec10.com"
  201.                 var url = window.location.href
  202.                 var parts = url.split("/")
  203.  
  204.                 if (parts[3] == "replay" && parts[2].endsWith(website)) {
  205.  
  206.                     //making a web request for the sole purpose of getting the DAS that was used for the replay
  207.                     //(can be done more elegantly)
  208.                     fetch("https://" + parts[2] + "/replay/data?id=" + (parts.length == 6 ? (parts[5] + "&live=1") : (parts[4])))
  209.                         .then(function(response) {
  210.                             return response.json();
  211.                         })
  212.                         .then(function(jsonResponse) {
  213.                             var das = jsonResponse.c.das
  214.                             var playT = Replayer['prototype']['playUntilTime'].toString()
  215.                             var playTparams = getParams(playT);
  216.  
  217.  
  218.                             //going though the list of actions done in the replay, and translating that into the timings for highlighting the divs
  219.                             //i dont rememer how exactly i did this but it's not pretty
  220.                             var insert1 = `
  221. 			kps.innerHTML="KPS: "+(this.getKPP()*this.placedBlocks/(this.clock/1000)).toFixed(2)
  222. 			this["delayedActions"] = []
  223. 			for (var i = 0; i < this["actions"].length; i++) {
  224. 				var action = JSON.parse(JSON.stringify(this["actions"][i]));
  225. 				if(action.a == 2 || action.a == 3){
  226. 					action.t = (action.t-` + das + `)>0 ? (action.t-` + das + `) : 0
  227. 				}
  228. 				this["delayedActions"].push(action)
  229. 			}
  230.  
  231. 			this["delayedActions"].sort(function(a, b) {
  232.     			return a.t - b.t;
  233. 			});
  234.  
  235. 			var oldVals = [this["timer"],this["ptr"]]
  236.  
  237. 			while (` + playTparams[0] + ` >= this['delayedActions'][this['ptr']]['t']) {
  238. 			    if (this['ptr']) {
  239. 			        this['timer'] += (this['delayedActions'][this['ptr']]['t'] - this['delayedActions'][this['ptr'] - 1]['t']) / 1000
  240. 			    };
  241. 			    if(this['delayedActions'][this['ptr']]["a"] == 2){
  242. 			    	Replayer["pressKey"](${kbdisplay.left},1)
  243. 			    }
  244. 				if(this['delayedActions'][this['ptr']]["a"] == 3){
  245. 			    	Replayer["pressKey"](${kbdisplay.right},1)
  246. 			    }
  247.  
  248. 			    this['ptr']++;
  249. 			    if (this['delayedActions']['length'] === this['ptr']) {
  250. 			        this['reachedEnd'] = true;
  251. 			        break
  252. 			    }
  253. 			};
  254.  
  255. 			this["timer"] = oldVals[0]
  256. 			this["ptr"] = oldVals[1]`
  257.  
  258.  
  259.                             //this maps a specific action (this['actions'][this['ptr']]["a"]) to what to do with the divs
  260.                             //the list of what action code equals what action is in that one harddrop forum post
  261.                             //for example, if you DAS_LEFT then left will be held down.
  262.                             //You might also adjust the numbers here (the first number in the pairs. remap them the same as in the magic array)
  263.                             var insert2 = `
  264. 			var highlight = [[${kbdisplay.left},2],[${kbdisplay.right},2],[${kbdisplay.left},0],[${kbdisplay.right},0],[${kbdisplay.ccw},2],[${kbdisplay.cw},2],[${kbdisplay['180']},2],[${kbdisplay.hd},2],[${kbdisplay.sd},2],,[${kbdisplay.hold},2]][this['actions'][this['ptr']]["a"]]
  265. 			if(highlight){
  266. 				Replayer["pressKey"](...highlight)
  267. 			};
  268. 			`
  269.  
  270.                             playT = playT.replace(";", insert1 + ";")
  271.                             playT = playT.replace("1000};", "1000};" + insert2)
  272.                             Replayer['prototype']['playUntilTime'] = new Function(...playTparams, trim(playT));
  273.  
  274.                         //i hate myself - Oki
  275.                         //I heard jez whips Oki - meppydc
  276.                         //I hate myself as well once it stopped working when I did basically nothing - meppydc
  277.                         //typing var names sucks - meppydc
  278.                         //typos make me sad - meppydc
  279.                         });
  280.                 }
  281.             }
  282.         }
  283.     });
  284. })();