Fix vibration

frontend/src/index.html

@@ -63,15 +63,6 @@
 
     <div id="settings-container">
       <section id="settings">
-        <label for="enable-vibration">
-          <input id="enable-vibration" type="checkbox" />
-          <img
-            title="Enable vibration on mobile"
-            alt="vibrating mobile"
-            src="../static/vibrate.svg"
-          />
-        </label>
-
         <label for="enable-sounds">
           <input id="enable-sounds" type="checkbox" />
           <img
@@ -86,6 +77,15 @@
           <img title="Enable music" alt="music note" src="../static/music.svg" />
         </label>
 
+        <label for="enable-vibration">
+          <input id="enable-vibration" type="checkbox" />
+          <img
+            title="Enable vibration on mobile"
+            alt="vibrating mobile"
+            src="../static/vibrate.svg"
+          />
+        </label>
+
         <img
           title="Exit from current game"
           id="logout"

frontend/src/index.ts

@@ -28,6 +28,7 @@ import { OptionsHandler } from './scripts/options-handler';
 import { hide } from './scripts/helper/hide';
 import { show } from './scripts/helper/show';
 import { SoundHandler, Sounds } from './scripts/sound-handler';
+import { VibrationHandler } from './scripts/vibration-handler';
 
 glMatrix.setMatrixArrayType(Array);
 
@@ -122,6 +123,10 @@ const main = async () => {
     };
     document.addEventListener('click', firstClickListener);
 
+    if (!VibrationHandler.isVibrationEnabledHeuristics) {
+      hide(document.querySelector("label[for='enable-vibration']") as HTMLElement, true);
+    }
+
     handleFullScreen(minimize, maximize);
     toggleSettingsButton.addEventListener('click', toggleSettings);
 

frontend/src/scripts/vibration-handler.ts

@@ -2,8 +2,16 @@ import { OptionsHandler } from './options-handler';
 
 export abstract class VibrationHandler {
   public static vibrate(time: number): void {
-    if (OptionsHandler.options.vibrationEnabled) {
+    if (OptionsHandler.options.vibrationEnabled && this.isVibrationEnabled) {
-      navigator?.vibrate(time);
+      navigator.vibrate(time);
     }
   }
+
+  public static get isVibrationEnabled(): boolean {
+    return 'vibrate' in navigator;
+  }
+
+  public static get isVibrationEnabledHeuristics(): boolean {
+    return this.isVibrationEnabled && 'ontouchstart' in window;
+  }
 }