diff --git a/src/app.ts b/src/app.ts index 7cbbe10..532f322 100644 --- 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 index 11f5d7a..3202d6d 100644 --- 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; }