☰

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