Vibrate the device on game lost (#454)

* vibrate on lost

* add preference in setting view

* move to constants, slight naming change

src/services/preact-canvas/components/game/index.tsx

@@ -20,6 +20,7 @@ import { bind } from "src/utils/bind";
 import { GameChangeCallback } from "../..";
 import { StateChange } from "../../../../gamelogic";
 import { Cell, PlayMode } from "../../../../gamelogic/types";
+import { vibrationLength } from "../../../../utils/constants";
 import initFocusHandling from "../../../../utils/focus-visible";
 import { isFeaturePhone } from "../../../../utils/static-display";
 import Board from "../board";
@@ -47,6 +48,7 @@ export interface Props {
   toRevealTotal: number;
   useMotion: boolean;
   bestTime?: number;
+  useVibration: boolean;
 }
 
 interface State {
@@ -186,6 +188,9 @@ export default class Game extends Component<Props, State> {
       this._tryAgainBtn
     ) {
       this._tryAgainBtn.focus();
+      if (this.props.useVibration) {
+        navigator.vibrate(vibrationLength);
+      }
     }
   }
 

src/services/preact-canvas/components/settings/index.tsx

@@ -35,6 +35,8 @@ interface Props {
   disableAnimationBtn: boolean;
   texturePromise: Promise<any>;
   supportsSufficientWebGL: boolean;
+  useVibration: boolean;
+  onVibrationPrefChange: () => void;
 }
 
 interface State {}
@@ -48,7 +50,9 @@ export default class Settings extends Component<Props, State> {
     motion,
     texturePromise,
     supportsSufficientWebGL,
-    disableAnimationBtn
+    disableAnimationBtn,
+    useVibration,
+    onVibrationPrefChange
   }: Props) {
     const closeBtn = isFeaturePhone ? (
       <button
@@ -87,6 +91,12 @@ export default class Settings extends Component<Props, State> {
             >
               Animations {motion ? "on" : "off"}
             </button>
+            <button
+              class={useVibration ? btnOnStyle : btnOffStyle}
+              onClick={onVibrationPrefChange}
+            >
+              Vibrate {useVibration ? "on" : "off"}
+            </button>
             <About
               motion={motion}
               texturePromise={texturePromise}

src/services/preact-canvas/index.tsx

@@ -98,6 +98,7 @@ interface State {
   motionPreference: boolean;
   gameInPlay: boolean;
   allowIntroAnim: boolean;
+  vibrationPreference: boolean;
 }
 
 export type GameChangeCallback = (stateChange: GameStateChange) => void;
@@ -123,7 +124,8 @@ export default class Root extends Component<Props, State> {
     settingsOpen: false,
     motionPreference: true,
     gameInPlay: false,
-    allowIntroAnim: true
+    allowIntroAnim: true,
+    vibrationPreference: true
   };
   private previousFocus: HTMLElement | null = null;
 
@@ -144,7 +146,8 @@ export default class Root extends Component<Props, State> {
       lazyImport!.initOffline();
 
       this.setState({
-        motionPreference: await lazyImport!.shouldUseMotion()
+        motionPreference: await lazyImport!.shouldUseMotion(),
+        vibrationPreference: await lazyImport!.getVibrationPreference()
       });
     });
 
@@ -220,7 +223,8 @@ export default class Root extends Component<Props, State> {
       motionPreference,
       gameInPlay,
       bestTime,
-      allowIntroAnim
+      allowIntroAnim,
+      vibrationPreference
     }: State
   ) {
     let mainComponent: VNode;
@@ -242,6 +246,8 @@ export default class Root extends Component<Props, State> {
                 }
                 supportsSufficientWebGL={lazyImport!.supportsSufficientWebGL}
                 texturePromise={texturePromise}
+                useVibration={vibrationPreference}
+                onVibrationPrefChange={this._onVibrationPrefChange}
               />
             )}
           />
@@ -272,6 +278,7 @@ export default class Root extends Component<Props, State> {
               onDangerModeChange={this._onDangerModeChange}
               useMotion={motionPreference}
               bestTime={bestTime}
+              useVibration={vibrationPreference}
             />
           )}
         />
@@ -348,6 +355,14 @@ export default class Root extends Component<Props, State> {
     setMotionPreference(motionPreference);
   }
 
+  @bind
+  private async _onVibrationPrefChange() {
+    const vibrationPreference = !this.state.vibrationPreference;
+    this.setState({ vibrationPreference });
+    const { setVibrationPreference } = await lazyImportReady;
+    setVibrationPreference(vibrationPreference);
+  }
+
   @bind
   private _onDangerModeChange(dangerMode: boolean) {
     this.setState({ dangerMode });

src/services/preact-canvas/lazy-load.ts

@@ -22,6 +22,10 @@ import {
   setMotionPreference,
   shouldUseMotion
 } from "../state/motion-preference";
+import {
+  getVibrationPreference,
+  setVibrationPreference
+} from "../state/vibration-preference";
 
 export {
   supportsSufficientWebGL,
@@ -36,5 +40,7 @@ export {
   lazyGenerateTextures,
   setMotionPreference,
   getMotionPreference,
-  shouldUseMotion
+  shouldUseMotion,
+  getVibrationPreference,
+  setVibrationPreference
 };

src/services/state/vibration-preference.ts

@@ -0,0 +1,21 @@
+import { get, set } from "idb-keyval";
+
+const DEFAULT: boolean = true;
+
+/**
+ * Set vibration preference (true means will vibrate)
+ *
+ * @param vibrate
+ */
+export async function setVibrationPreference(vibrate: boolean): Promise<void> {
+  await set("vibrate", vibrate);
+}
+
+export async function getVibrationPreference(): Promise<boolean> {
+  const vibrate = await get("vibrate");
+  if (typeof vibrate === "boolean") {
+    return vibrate;
+  }
+  // if no value is assigned to "vibrate", return default value
+  return DEFAULT;
+}

src/utils/constants.ts

@@ -28,3 +28,5 @@ export const forceMotionMode =
     : forceMotionParam === "1"
     ? true
     : undefined;
+
+export const vibrationLength = 300;