Add sound effects (#76)

* Rotate cards 90 deg

* Fixed formats (Prettier)

* Fix math calculations for layout

* Added Sounds

* Added sounds

* Sound Effects On Successful Set

* RotateSFX + FailSFX + Some Refactoring

* Formatting

* Trying to fix the conflict

* Trying to solve conflict #2

* Attribution + Naming convention

* Msg tab notification

* Revert "Msg tab notification"

This reverts commit e4bee487eea91ed04bf0104c0579fb81305bc794.

* Edit about

* Add volume toggle button, handled by React context

Co-authored-by: Eric Zhang <[email protected]>

Author: Hanaffi

package-lock.json

@@ -22,7 +22,8 @@
     "react-dom": "^16.14.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
-    "react-spring": "^8.0.27"
+    "react-spring": "^8.0.27",
+    "use-sound": "^2.0.1"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",

package.json

@@ -7,7 +7,7 @@ import CssBaseline from "@material-ui/core/CssBaseline";
 import { ThemeProvider } from "@material-ui/core/styles";
 
 import { generateColor, generateName } from "./util";
-import { UserContext, KeyboardContext } from "./context";
+import { UserContext, SettingsContext } from "./context";
 import useStorage from "./hooks/useStorage";
 import ConnectionsTracker from "./components/ConnectionsTracker";
 import WelcomeDialog from "./components/WelcomeDialog";
@@ -37,6 +37,7 @@ function App() {
     "keyboardLayout",
     "QWERTY"
   );
+  const [volume, setVolume] = useStorage("volume", "on");
 
   useEffect(() => {
     return firebase.auth().onAuthStateChanged((user) => {
@@ -120,8 +121,8 @@ function App() {
           <BannedPage time={user.banned} />
         ) : (
           <UserContext.Provider value={user}>
-            <KeyboardContext.Provider
-              value={[keyboardLayout, setKeyboardLayout]}
+            <SettingsContext.Provider
+              value={{ keyboardLayout, setKeyboardLayout, volume, setVolume }}
             >
               <ConnectionsTracker />
               <WelcomeDialog />
@@ -143,7 +144,7 @@ function App() {
                 <Route exact path="/profile/:id" component={ProfilePage} />
                 <Route component={NotFoundPage} />
               </Switch>
-            </KeyboardContext.Provider>
+            </SettingsContext.Provider>
           </UserContext.Provider>
         )}
       </BrowserRouter>

src/App.js

@@ -5,13 +5,15 @@ import Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
 import { lightGreen } from "@material-ui/core/colors";
 import { animated, useSprings } from "react-spring";
+import useSound from "use-sound";
 
 import { generateCards, standardLayouts } from "../util";
 import ResponsiveSetCard from "../components/ResponsiveSetCard";
 import useDimensions from "../hooks/useDimensions";
 import useKeydown from "../hooks/useKeydown";
 import useStorage from "../hooks/useStorage";
-import { KeyboardContext } from "../context";
+import { SettingsContext } from "../context";
+import layoutSfx from "../assets/layoutChangeSound.mp3";
 
 const gamePadding = 8;
 const cardArray = generateCards();
@@ -34,10 +36,12 @@ function Game({
     "orientation",
     "vertical"
   );
-  const keyboardLayout = standardLayouts[useContext(KeyboardContext)[0]];
+  const { keyboardLayout, volume } = useContext(SettingsContext);
+  const keyboardLayoutDesc = standardLayouts[keyboardLayout];
   const isHorizontal = cardOrientation === "horizontal";
   const isLandscape = layoutOrientation === "landscape";
   const [gameDimensions, gameEl] = useDimensions();
+  const [playLayout] = useSound(layoutSfx);
 
   let board = deck.slice(0, boardSize);
   const unplayed = deck.slice(boardSize);
@@ -155,8 +159,8 @@ function Game({
 
   // Keyboard shortcuts
   const shortcuts = isLandscape
-    ? keyboardLayout.horizontalLayout
-    : keyboardLayout.verticalLayout;
+    ? keyboardLayoutDesc.horizontalLayout
+    : keyboardLayoutDesc.verticalLayout;
   useKeydown((event) => {
     const { key } = event;
     if (key === "Escape") {
@@ -168,11 +172,13 @@ function Game({
       if (index < board.length) {
         onClick(board[index]);
       }
-    } else if (key.toLowerCase() === keyboardLayout.orientationChangeKey) {
+    } else if (key.toLowerCase() === keyboardLayoutDesc.orientationChangeKey) {
       event.preventDefault();
+      if (volume === "on") playLayout();
       setCardOrientation(isHorizontal ? "vertical" : "horizontal");
-    } else if (key.toLowerCase() === keyboardLayout.layoutChangeKey) {
+    } else if (key.toLowerCase() === keyboardLayoutDesc.layoutChangeKey) {
       event.preventDefault();
+      if (volume === "on") playLayout();
       setLayoutOrientation(isLandscape ? "portrait" : "landscape");
     }
   });

src/assets/failedSetSound.mp3

@@ -13,7 +13,7 @@ import DialogContentText from "@material-ui/core/DialogContentText";
 import { makeStyles } from "@material-ui/core/styles";
 
 import { standardLayouts } from "../util";
-import { KeyboardContext } from "../context";
+import { SettingsContext } from "../context";
 
 const useStyles = makeStyles({
   formControl: {
@@ -25,7 +25,7 @@ function KeyboardLayoutDialog(props) {
   const { open, onClose, title } = props;
   const classes = useStyles();
 
-  const [keyboardLayout, setKeyboardLayout] = useContext(KeyboardContext);
+  const { keyboardLayout, setKeyboardLayout } = useContext(SettingsContext);
 
   const handleChange = (event) => {
     setKeyboardLayout(event.target.value);

src/assets/layoutChangeSound.mp3

@@ -8,11 +8,13 @@ import Tooltip from "@material-ui/core/Tooltip";
 import Typography from "@material-ui/core/Typography";
 import IconButton from "@material-ui/core/IconButton";
 import SettingsIcon from "@material-ui/icons/Settings";
-import Brightness3Icon from "@material-ui/icons/Brightness3";
-import WbSunnyIcon from "@material-ui/icons/WbSunny";
+import Brightness4Icon from "@material-ui/icons/Brightness4";
+import Brightness7Icon from "@material-ui/icons/Brightness7";
+import VolumeOffIcon from "@material-ui/icons/VolumeOff";
+import VolumeUpIcon from "@material-ui/icons/VolumeUp";
 
 import firebase from "../firebase";
-import { UserContext } from "../context";
+import { UserContext, SettingsContext } from "../context";
 import User from "./User";
 import InternalLink from "./InternalLink";
 import PromptDialog from "./PromptDialog";
@@ -27,6 +29,7 @@ function Navbar({
   handleCustomColors,
 }) {
   const user = useContext(UserContext);
+  const settings = useContext(SettingsContext);
   const [anchorEl, setAnchorEl] = useState(null);
   const [changeName, setChangeName] = useState(false);
   const [changeColors, setChangeColors] = useState(false);
@@ -56,6 +59,10 @@ function Navbar({
     }
   }
 
+  function handleChangeVolume() {
+    settings.setVolume((volume) => (volume === "on" ? "off" : "on"));
+  }
+
   return (
     <AppBar position="relative" color="transparent" elevation={0}>
       <Toolbar variant="dense">
@@ -80,14 +87,25 @@ function Navbar({
             />
           </InternalLink>
         </Typography>
+        <IconButton color="inherit" onClick={handleChangeVolume}>
+          {settings.volume === "on" ? (
+            <Tooltip title="Mute">
+              <VolumeUpIcon />
+            </Tooltip>
+          ) : (
+            <Tooltip title="Unmute">
+              <VolumeOffIcon />
+            </Tooltip>
+          )}
+        </IconButton>
         <IconButton color="inherit" onClick={handleChangeTheme}>
           {themeType === "light" ? (
             <Tooltip title="Dark theme">
-              <Brightness3Icon />
+              <Brightness4Icon />
             </Tooltip>
           ) : (
             <Tooltip title="Light theme">
-              <WbSunnyIcon />
+              <Brightness7Icon />
             </Tooltip>
           )}
         </IconButton>

src/assets/successfulSetSound.mp3

@@ -2,4 +2,4 @@ import { createContext } from "react";
 
 export const UserContext = createContext(null);
 
-export const KeyboardContext = createContext(null);
+export const SettingsContext = createContext(null);

src/components/Game.js

@@ -51,6 +51,19 @@ function AboutPage() {
           .
         </Typography>
       </Paper>
+      <Paper style={{ padding: "1rem", maxWidth: 720, margin: "12px auto" }}>
+        <Typography variant="body2">
+          Sounds used from{" "}
+          <Link href="https://notificationsounds.com/terms-of-use">
+            notificationsounds.com
+          </Link>
+          &nbsp;are provided under a{" "}
+          <Link href="https://creativecommons.org/licenses/by/4.0/legalcode">
+            Creative Commons Attribution license
+          </Link>
+          .
+        </Typography>
+      </Paper>
       <Typography
         variant="body1"
         align="center"

src/components/KeyboardLayoutDialog.js

@@ -9,6 +9,7 @@ import Button from "@material-ui/core/Button";
 import Box from "@material-ui/core/Box";
 import Snackbar from "@material-ui/core/Snackbar";
 import { Redirect } from "react-router-dom";
+import useSound from "use-sound";
 
 import SnackContent from "../components/SnackContent";
 import firebase, { createGame, finishGame } from "../firebase";
@@ -21,7 +22,7 @@ import LoadingPage from "./LoadingPage";
 import GameSidebar from "../components/GameSidebar";
 import GameChat from "../components/GameChat";
 import DonateDialog from "../components/DonateDialog";
-import { UserContext } from "../context";
+import { SettingsContext, UserContext } from "../context";
 import {
   removeCard,
   checkSet,
@@ -30,6 +31,8 @@ import {
   computeState,
   hasHint,
 } from "../util";
+import foundSfx from "../assets/successfulSetSound.mp3";
+import failSfx from "../assets/failedSetSound.mp3";
 
 const useStyles = makeStyles((theme) => ({
   sideColumn: {
@@ -70,6 +73,7 @@ const useStyles = makeStyles((theme) => ({
 
 function GamePage({ match }) {
   const user = useContext(UserContext);
+  const { volume } = useContext(SettingsContext);
   const gameId = match.params.id;
   const classes = useStyles();
 
@@ -81,6 +85,8 @@ function GamePage({ match }) {
 
   const [game, loadingGame] = useFirebaseRef(`games/${gameId}`);
   const [gameData, loadingGameData] = useFirebaseRef(`gameData/${gameId}`);
+  const [playSuccess] = useSound(foundSfx);
+  const [playFail] = useSound(failSfx);
 
   // Reset card selection and number of hints on update to game data
   useEffect(() => {
@@ -214,12 +220,14 @@ function GamePage({ match }) {
           if (vals.length === 3) {
             if (checkSet(...vals)) {
               handleSet(vals);
+              if (volume === "on") playSuccess();
               setSnack({
                 open: true,
                 variant: "success",
                 message: "Found a set!",
               });
             } else {
+              if (volume === "on") playFail();
               setSnack({
                 open: true,
                 variant: "error",

src/components/Navbar.js

@@ -7,11 +7,11 @@ import Paper from "@material-ui/core/Paper";
 
 import InternalLink from "../components/InternalLink";
 import SetCard from "../components/SetCard";
-import { KeyboardContext } from "../context";
+import { SettingsContext } from "../context";
 import { standardLayouts } from "../util";
 
 function HelpPage() {
-  const [keyboardLayout] = useContext(KeyboardContext);
+  const { keyboardLayout } = useContext(SettingsContext);
 
   return (
     <Container>