Add sound to actions

src/gameComponents/useGameItemActions.js

@@ -9,6 +9,7 @@ import {
   randInt,
   uid,
   getItemElement,
+  playAudio,
 } from "../utils";
 
 import RotateActionForm from "./forms/RotateActionForm";
@@ -28,6 +29,10 @@ import shuffleIcon from "../media/images/shuffle.svg";
 import tapIcon from "../media/images/tap.svg";
 import rollIcon from "../media/images/rolling-dices.svg";
 
+import flipAudio from "../media/audio/flip.wav?url";
+import rollAudio from "../media/audio/roll.wav?url";
+import shuffleAudio from "../media/audio/shuffle.wav?url";
+
 import useLocalStorage from "../hooks/useLocalStorage";
 
 export const useGameItemActions = () => {
@@ -264,6 +269,8 @@ export const useGameItemActions = () => {
         }
       };
       simulateRoll(100);
+
+      playAudio(rollAudio, 0.4);
     },
     [batchUpdateItems, getItemListOrSelected]
   );
@@ -278,6 +285,8 @@ export const useGameItemActions = () => {
       });
       const shuffledItems = shuffleArray([...ids]);
       swapItems(ids, shuffledItems);
+
+      playAudio(shuffleAudio, 0.5);
     },
     [getItemListOrSelected, swapItems]
   );
@@ -354,6 +363,7 @@ export const useGameItemActions = () => {
       if (reverseOrder) {
         reverseItemsOrder(itemIds);
       }
+      playAudio(flipAudio, 0.2);
     },
     [batchUpdateItems, reverseItemsOrder]
   );

src/utils/index.js

@@ -86,3 +86,32 @@ export const objectDiff = (o1, o2) => {
 
   return result;
 };
+
+export const retry = (fn, condition, delay) => {
+  if (condition()) {
+    setTimeout(() => retry(fn, condition, delay), delay);
+  } else {
+    fn();
+  }
+};
+
+const audioFiles = {};
+
+export const preloadAudio = (urls) => {
+  urls.forEach((url) => {
+    if (!audioFiles[url]) {
+      audioFiles[url] = new Audio(url);
+    }
+  });
+};
+
+export const playAudio = (url, volume = 1) => {
+  if (!audioFiles[url]) {
+    audioFiles[url] = new Audio(url);
+  }
+
+  audioFiles[url].pause();
+  audioFiles[url].currentTime = 0;
+  audioFiles[url].volume = volume;
+  audioFiles[url].play();
+};

src/views/BoardView/BoardView.jsx

@@ -16,6 +16,11 @@ import { MediaLibraryProvider, ImageDropNPaste } from "../../mediaLibrary";
 import HintOnLockedItem from "./HintOnLockedItem";
 import useGlobalConf from "../../hooks/useGlobalConf";
 
+import flipAudio from "../../media/audio/flip.wav?url";
+import rollAudio from "../../media/audio/roll.wav?url";
+import shuffleAudio from "../../media/audio/shuffle.wav?url";
+import { preloadAudio } from "../../utils";
+
 export const BoardView = ({
   mediaLibraries,
   edit: editMode,
@@ -39,6 +44,8 @@ export const BoardView = ({
     return currentBackground.getStyle(boardConfig.bgConf);
   }, [boardConfig.bgConf, boardConfig.bgType]);
 
+  React.useEffect(() => preloadAudio([flipAudio, shuffleAudio, rollAudio]), []);
+
   return (
     <MediaLibraryProvider libraries={mediaLibraries}>
       <ImageDropNPaste>