add analog lt&rt on default non-distance layout

Californ1a · Sep 27, 2019 · bf42b52 · bf42b52
1 parent ec331de
commit bf42b52
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/src/assets/js/distplay-distance.js b/src/assets/js/distplay-distance.js
@@ -12,7 +12,7 @@ function loop() {
 	const gamepads = navigator.getGamepads();
 	if (gamepads[0]) {
 		const gp = gamepads[0];
-		check.buttons(gp.buttons, map);
+		check.buttons(gp.buttons, map, 1);
 		check.sticks(gp.axes, map, 23, 20, 268, 20);
 	}
 	window.requestAnimationFrame(loop);

diff --git a/src/assets/js/util/check.js b/src/assets/js/util/check.js
@@ -28,16 +28,30 @@ function dpadOpposite(ele, map) {
 	return opposite;
 }
 
-function checkButtons(buttons, map) {
+function checkButtons(buttons, map, type) {
 	for (let i = 0; i < Object.keys(mappings).length; i++) {
 		const ele = map.get(i);
 		if (ele && buttons[i].pressed) {
-			setPressed(ele);
+			if (ele.name.match(/^rt|lt$/i) && !type) {
+				ele.element.style.width = `${buttons[i].value*70}px`;
+				if (ele.name === "lt") {
+					ele.element.style.left = `${80-buttons[i].value*70}px`;
+				}
+			} else {
+				setPressed(ele);
+			}
 			if (ele.name.match(/^dup|ddown|dleft|dright$/i)) {
 				rmPressed(dpadOpposite(ele, map));
 			}
 		} else if (ele) {
-			rmPressed(ele);
+			if (ele.name.match(/^rt|lt$/i) && !type) {
+				ele.element.style.width = "0";
+				// if (ele.name === "lt") {
+				// 	ele.element.style.left = "auto";
+				// }
+			} else {
+				rmPressed(ele);
+			}
 		}
 	}
 }

diff --git a/src/distplay.html b/src/distplay.html
@@ -15,8 +15,15 @@
 	<div id="rs" class="stick" style="position: absolute; top: 52px; left: 278px"></div>
 	<!-- Bumpers and triggers -->
 	<div class="btnswrapper">
-		<div id="lt" class="button" style="position: absolute; top: 12px; left: 10px">LT</div>
-		<div id="rt" class="button" style="position: absolute; top: 12px; left: 275px">RT</div>
+		<div id="ltback" class="unpressed button" style="position: absolute; top: 12px; left: 10px; z-index: -1"></div>
+		<div id="lt" class="pressed button" style="position: absolute; top: 12px; left: 10px; width: 0; z-index: 0"></div>
+		<div id="lttext" class="button" style="position: absolute; top: 12px; left: 10px; z-index: 1; background: none">LT</div>
+		<div id="rtback" class="unpressed button" style="position: absolute; top: 12px; left: 275px; z-index: -1"></div>
+		<div id="rt" class="pressed button" style="position: absolute; top: 12px; left: 275px; width: 0; z-index: 0"></div>
+		<div id="rttext" class="button" style="position: absolute; top: 12px; left: 275px; z-index: 1; background: none">RT</div>
+
+		<!-- <div id="lt" class="button" style="position: absolute; top: 12px; left: 10px">LT</div>
+		<div id="rt" class="button" style="position: absolute; top: 12px; left: 275px">RT</div> -->
 		<div id="lb" class="bumper" style="position: absolute; top: 12px; left: 85px">LB</div>
 		<div id="rb" class="bumper" style="position: absolute; top: 12px; left: 180px">RB</div>
 		<!-- Dpad -->