☰

Keyboard Display Script

shows keyboard inputs on screen

目前為 2019-08-08 提交的版本，檢視 最新版本。

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