From 4285f6aa1b6c3781a04ccecca1766ac68677b99f Mon Sep 17 00:00:00 2001
From: Unrud <unrud@outlook.com>
Date: Tue, 25 Apr 2023 01:38:51 +0200
Subject: [PATCH] Add visual and vibration feedback to buttons

---
 webdata/app/compat.mjs |  6 ++++++
 webdata/app/ui.mjs     | 11 +++++++++++
 webdata/main.css       |  6 ++++++
 3 files changed, 23 insertions(+)

diff --git a/webdata/app/compat.mjs b/webdata/app/compat.mjs
index e9328a9..8a26833 100644
--- a/webdata/app/compat.mjs
+++ b/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);
+    }
+};
diff --git a/webdata/app/ui.mjs b/webdata/app/ui.mjs
index f77d627..18c69de 100644
--- a/webdata/app/ui.mjs
+++ b/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
diff --git a/webdata/main.css b/webdata/main.css
index 78a3b6b..bf66d6a 100644
--- a/webdata/main.css
+++ b/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,