Add visual and vibration feedback to buttons

webdata/app/compat.mjs

@@ -74,3 +74,9 @@ export const addPointerlockchangeEventListener = (listener) => {
         document.addEventListener("pointerlockchange", listener);
     }
 };
+
+export const vibrate = (pattern) => {
+    if (navigator.vibrate) {
+        navigator.vibrate(pattern);
+    }
+};

webdata/app/ui.mjs

@@ -23,7 +23,9 @@ import Touchpad from "./touchpad.mjs";
 import * as compat from "./compat.mjs";
 
 const IGNORE_CLICK_AFTER_TOUCH_DURATION = 1000; // milliseconds
+const CLICK_VIBRATION_PATTERN = [10];
 
+const buttons = document.querySelectorAll("button");
 const scenes = document.querySelectorAll("body > .scene");
 const openingScene = document.getElementById("opening");
 const closedScene = document.getElementById("closed");
@@ -60,6 +62,9 @@ export default class UI {
         window.addEventListener("popstate", () => { this.#update(); });
         compat.addFullscreenchangeEventListener(() => { this.#update(); });
         compat.addPointerlockchangeEventListener(() => { this.#update(); });
+        for (const button of buttons) {
+            button.addEventListener("click", this.#handleButtonClick.bind(this));
+        }
         this.#update();
     }
 
@@ -95,6 +100,12 @@ export default class UI {
         sessionStorage.setItem("text-input", textInput.value);
     }
 
+    #handleButtonClick(event) {
+        event.target.classList.add("click");
+        setTimeout(() => event.target.classList.remove("click"), 0);
+        compat.vibrate(CLICK_VIBRATION_PATTERN);
+    }
+
     #handleSendText() {
         if (textInput.value) {
             // normalize line endings

webdata/main.css

@@ -86,12 +86,18 @@ button {
     font-family: "icon";
     overflow: hidden;
     cursor: pointer;
+    transition: box-shadow 0.2s ease-out;
 }
 
 button:focus {
     outline: none;
 }
 
+button.click {
+    box-shadow: 0 0 1rem white inset;
+    transition: none;
+}
+
 button.top,
 button.bottom,
 button.left,