Add shortcut for vibration

pmanikas · Nov 22, 2024 · f62720b · f62720b
1 parent 06f4ce7
commit f62720b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/app.ts b/src/app.ts
@@ -180,6 +180,10 @@ class GamepadController {
         requestAnimationFrame(this.gameLoop.bind(this));
     }
 
+    private vibrateOnVKeyPress(event: KeyboardEvent): void {
+        if (event.key === "v")  this.vibrate();
+    }
+
     private initializeVibration(gamepad: Gamepad): void {
         if (!gamepad.vibrationActuator) return;
 
@@ -190,10 +194,11 @@ class GamepadController {
 
         Object.assign(vibrateButton, {
             className: "vibrate-button",
-            textContent: "Vibrate"
+            textContent: "Vibrate (V)"
         });
 
         vibrateButton.addEventListener("click", () => this.vibrate(GamepadController.DEFAULT_VIBRATION_DURATION));
+        document.addEventListener("keyup", (event) => this.vibrateOnVKeyPress(event));
 
         document.body.appendChild(vibrateButton);
         this.vibrate(GamepadController.DEFAULT_VIBRATION_DURATION);
@@ -224,6 +229,7 @@ class GamepadController {
         this.elements.svgContainer.innerHTML = "";
         this.elements.detectingScreen.classList.add("active");
         document.querySelector(".vibrate-button")?.remove();
+        document.removeEventListener("keyup", (event) => this.vibrateOnVKeyPress(event));
     }
 }
 

diff --git a/src/assets/styles/styles.css b/src/assets/styles/styles.css
@@ -86,10 +86,12 @@ body {
 
 .vibrate-button {
     display: block;
+    height: 40px;
     background-color: var(--c-primary);
     color: var(--c-secondary);
     padding: calc(var(--s-base) / 2);
     border: 1px solid var(--c-secondary);
+    border-bottom-width: 3px;
     border-radius: var(--border-radius);
     cursor: pointer;
     box-shadow: 0 0 10px var(--shadow);
@@ -99,6 +101,11 @@ body {
     background-color: var(--c-primary-faded);
 }
 
+.vibrate-button:active, .vibrate-button.active {
+    border-bottom-width: 1px;
+    transform: scaleY(0.95)
+}
+
 .vibrate {
     animation: vibrate 0.1s linear infinite;
 }