Added sound effects

client/package-lock.json

@@ -7079,6 +7079,11 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
       "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
     },
+    "howler": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.1.tgz",
+      "integrity": "sha512-0iIXvuBO/81CcrQ/HSSweYmbT50fT2mIc9XMFb+kxIfk2pW/iKzDbX1n3fZmDXMEIpYvyyfrB+gXwPYSDqUxIQ=="
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -14940,6 +14945,14 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-sound": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/use-sound/-/use-sound-2.0.1.tgz",
+      "integrity": "sha512-wNwnyIOe8QPDQgWRZd3PqVEJ9BpLO+VJX+EpQSb6EvvjblHhnYMD7WIOTQ4hgloC2jC7Az6FhclHilC441De7A==",
+      "requires": {
+        "howler": "^2.1.3"
+      }
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",

client/package.json

@@ -11,7 +11,8 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
-    "socket.io-client": "^3.1.1"
+    "socket.io-client": "^3.1.1",
+    "use-sound": "^2.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/components/Game.js

@@ -3,8 +3,16 @@ import PACK_OF_CARDS from '../utils/packOfCards'
 import shuffleArray from '../utils/shuffleArray'
 import io from 'socket.io-client'
 import queryString from 'query-string'
-import { Redirect } from 'react-router-dom'
 import Spinner from './Spinner'
+import useSound from 'use-sound'
+
+import unoSound from '../assets/sounds/uno-sound.mp3'
+import shufflingSound from '../assets/sounds/shuffling-cards-1.mp3'
+import skipCardSound from '../assets/sounds/skip-sound.mp3'
+import draw2CardSound from '../assets/sounds/draw2-sound.mp3'
+import wildCardSound from '../assets/sounds/wild-sound.mp3'
+import draw4CardSound from '../assets/sounds/draw4-sound.mp3'
+import gameOverSound from '../assets/sounds/game-over-sound.mp3'
 
 //NUMBER CODES FOR ACTION CARDS
 //SKIP - 404
@@ -60,6 +68,14 @@ const Game = (props) => {
 
     const [isUnoButtonPressed, setUnoButtonPressed] = useState(false)
 
+    const [playUnoSound] = useSound(unoSound)
+    const [playShufflingSound] = useSound(shufflingSound)
+    const [playSkipCardSound] = useSound(skipCardSound)
+    const [playDraw2CardSound] = useSound(draw2CardSound)
+    const [playWildCardSound] = useSound(wildCardSound)
+    const [playDraw4CardSound] = useSound(draw4CardSound)
+    const [playGameOverSound] = useSound(gameOverSound)
+
     //runs once on component mount
     useEffect(() => {
         //shuffle PACK_OF_CARDS array
@@ -181,6 +197,7 @@ const Game = (props) => {
                             updatedPlayer1Deck.push(drawCard1)
                             updatedPlayer1Deck.push(drawCard2)
 
+                            playShufflingSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -194,6 +211,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playShufflingSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -225,6 +243,7 @@ const Game = (props) => {
                             updatedPlayer2Deck.push(drawCard1)
                             updatedPlayer2Deck.push(drawCard2)
 
+                            playShufflingSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -238,6 +257,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playShufflingSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -274,6 +294,7 @@ const Game = (props) => {
                             updatedPlayer1Deck.push(drawCard1)
                             updatedPlayer1Deck.push(drawCard2)
 
+                            playShufflingSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -287,6 +308,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playShufflingSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -317,6 +339,7 @@ const Game = (props) => {
                             updatedPlayer2Deck.push(drawCard1)
                             updatedPlayer2Deck.push(drawCard2)
 
+                            playShufflingSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -330,6 +353,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playShufflingSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -376,6 +400,7 @@ const Game = (props) => {
                             updatedPlayer1Deck.push(drawCard1)
                             updatedPlayer1Deck.push(drawCard2)
 
+                            playSkipCardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -388,6 +413,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playSkipCardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -418,6 +444,7 @@ const Game = (props) => {
                             updatedPlayer2Deck.push(drawCard1)
                             updatedPlayer2Deck.push(drawCard2)
 
+                            playSkipCardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -430,6 +457,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playSkipCardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -465,6 +493,7 @@ const Game = (props) => {
                             updatedPlayer1Deck.push(drawCard1)
                             updatedPlayer1Deck.push(drawCard2)
 
+                            playSkipCardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -477,6 +506,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playSkipCardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -507,6 +537,7 @@ const Game = (props) => {
                             updatedPlayer2Deck.push(drawCard1)
                             updatedPlayer2Deck.push(drawCard2)
 
+                            playSkipCardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -519,6 +550,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playSkipCardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -568,6 +600,7 @@ const Game = (props) => {
                             updatedPlayer1Deck.push(drawCard1X)
                             updatedPlayer1Deck.push(drawCard2X)
 
+                            playDraw2CardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -581,6 +614,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playDraw2CardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -617,6 +651,7 @@ const Game = (props) => {
                             updatedPlayer2Deck.push(drawCard1X)
                             updatedPlayer2Deck.push(drawCard2X)
 
+                            playDraw2CardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -630,6 +665,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playDraw2CardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -671,6 +707,7 @@ const Game = (props) => {
                             updatedPlayer1Deck.push(drawCard1X)
                             updatedPlayer1Deck.push(drawCard2X)
 
+                            playDraw2CardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -684,6 +721,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playDraw2CardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player1Deck),
@@ -720,6 +758,7 @@ const Game = (props) => {
                             updatedPlayer2Deck.push(drawCard1X)
                             updatedPlayer2Deck.push(drawCard2X)
 
+                            playDraw2CardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -733,6 +772,7 @@ const Game = (props) => {
                             })
                         }
                         else {
+                            playDraw2CardSound()
                             //send new state to server
                             socket.emit('updateGameState', {
                                 gameOver: checkGameOver(player2Deck),
@@ -777,6 +817,7 @@ const Game = (props) => {
                         updatedPlayer1Deck.push(drawCard1)
                         updatedPlayer1Deck.push(drawCard2)
 
+                        playWildCardSound()
                         //send new state to server
                         socket.emit('updateGameState', {
                             gameOver: checkGameOver(player1Deck),
@@ -790,6 +831,8 @@ const Game = (props) => {
                         })
                     }
                     else {
+                        playWildCardSound()
+
                         //send new state to server
                         socket.emit('updateGameState', {
                             gameOver: checkGameOver(player1Deck),
@@ -822,6 +865,7 @@ const Game = (props) => {
                         const updatedPlayer2Deck = [...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)]
                         updatedPlayer2Deck.push(drawCard1)
                         updatedPlayer2Deck.push(drawCard2)
+                        playWildCardSound()
 
                         //send new state to server
                         socket.emit('updateGameState', {
@@ -836,6 +880,8 @@ const Game = (props) => {
                         })
                     }
                     else {
+                        playWildCardSound()
+
                         //send new state to server
                         socket.emit('updateGameState', {
                             gameOver: checkGameOver(player2Deck),
@@ -880,6 +926,8 @@ const Game = (props) => {
                         updatedPlayer1Deck.push(drawCard1X)
                         updatedPlayer1Deck.push(drawCard2X)
 
+                        playDraw4CardSound()
+
                         //send new state to server
                         socket.emit('updateGameState', {
                             gameOver: checkGameOver(player1Deck),
@@ -893,6 +941,8 @@ const Game = (props) => {
                         })
                     }
                     else {
+                        playDraw4CardSound()
+
                         //send new state to server
                         socket.emit('updateGameState', {
                             gameOver: checkGameOver(player1Deck),
@@ -920,6 +970,8 @@ const Game = (props) => {
                     const drawCard3 = copiedDrawCardPileArray.pop()
                     const drawCard4 = copiedDrawCardPileArray.pop()
                     //then update currentColor and currentNumber - turn will remain same
+                    playDraw4CardSound()
+
                     //send new state to server
                     socket.emit('updateGameState', {
                         gameOver: checkGameOver(player2Deck),
@@ -944,6 +996,8 @@ const Game = (props) => {
                         updatedPlayer2Deck.push(drawCard1X)
                         updatedPlayer2Deck.push(drawCard2X)
 
+                        playDraw4CardSound()
+
                         //send new state to server
                         socket.emit('updateGameState', {
                             gameOver: checkGameOver(player2Deck),
@@ -957,6 +1011,8 @@ const Game = (props) => {
                         })
                     }
                     else {
+                        playDraw4CardSound()
+
                         //send new state to server
                         socket.emit('updateGameState', {
                             gameOver: checkGameOver(player2Deck),
@@ -990,6 +1046,7 @@ const Game = (props) => {
             let numberOfDrawnCard = drawCard.charAt(0)
             if(colorOfDrawnCard === currentColor && (drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY')) {
                 alert(`You drew ${drawCard}. It was played for you.`)
+                playShufflingSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@@ -1006,6 +1063,7 @@ const Game = (props) => {
                 //pull out last two elements from it
                 const drawCard1 = copiedDrawCardPileArray.pop()
                 const drawCard2 = copiedDrawCardPileArray.pop()
+                playDraw2CardSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@@ -1019,6 +1077,7 @@ const Game = (props) => {
                 alert(`You drew ${drawCard}. It was played for you.`)
                 //ask for new color
                 const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
+                playWildCardSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     turn: 'Player 2',
@@ -1040,6 +1099,7 @@ const Game = (props) => {
                 const drawCard2 = copiedDrawCardPileArray.pop()
                 const drawCard3 = copiedDrawCardPileArray.pop()
                 const drawCard4 = copiedDrawCardPileArray.pop()
+                playDraw4CardSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@@ -1052,6 +1112,7 @@ const Game = (props) => {
             //if not action card - check if drawn card is playable
             else if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) {
                 alert(`You drew ${drawCard}. It was played for you.`)
+                playShufflingSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     turn: 'Player 2',
@@ -1064,6 +1125,7 @@ const Game = (props) => {
             //else add the drawn card to player1's deck
             else {
                 alert(`You drew ${drawCard}.`)
+                playShufflingSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     turn: 'Player 2',
@@ -1083,6 +1145,7 @@ const Game = (props) => {
             let numberOfDrawnCard = drawCard.charAt(0)
             if(colorOfDrawnCard === currentColor && (drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY')) {
                 alert(`You drew ${drawCard}. It was played for you.`)
+                playShufflingSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@@ -1099,6 +1162,7 @@ const Game = (props) => {
                 //pull out last two elements from it
                 const drawCard1 = copiedDrawCardPileArray.pop()
                 const drawCard2 = copiedDrawCardPileArray.pop()
+                playDraw2CardSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@@ -1112,6 +1176,7 @@ const Game = (props) => {
                 alert(`You drew ${drawCard}. It was played for you.`)
                 //ask for new color
                 const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
+                playWildCardSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     turn: 'Player 1',
@@ -1133,6 +1198,7 @@ const Game = (props) => {
                 const drawCard2 = copiedDrawCardPileArray.pop()
                 const drawCard3 = copiedDrawCardPileArray.pop()
                 const drawCard4 = copiedDrawCardPileArray.pop()
+                playDraw4CardSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@@ -1145,6 +1211,7 @@ const Game = (props) => {
             //if not action card - check if drawn card is playable
             else if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) {
                 alert(`You drew ${drawCard}. It was played for you.`)
+                playShufflingSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     turn: 'Player 1',
@@ -1157,6 +1224,7 @@ const Game = (props) => {
             //else add the drawn card to player2's deck
             else {
                 alert(`You drew ${drawCard}.`)
+                playShufflingSound()
                 //send new state to server
                 socket.emit('updateGameState', {
                     turn: 'Player 1',
@@ -1204,7 +1272,10 @@ const Game = (props) => {
                                 className='Card'
                                 src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
                                 /> }
-                            <button className='game-button orange' disabled={turn !== 'Player 1'} onClick={() => setUnoButtonPressed(!isUnoButtonPressed)}>UNO</button>
+                            <button className='game-button orange' disabled={player1Deck.length !== 2} onClick={() => {
+                                setUnoButtonPressed(!isUnoButtonPressed)
+                                playUnoSound()
+                            }}>UNO</button>
                         </div>
                         <br />
                         <div className='player2Deck' style={{pointerEvents: 'none'}}>
@@ -1241,7 +1312,10 @@ const Game = (props) => {
                                 className='Card'
                                 src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
                                 /> }
-                            <button className='game-button orange' disabled={turn !== 'Player 2'} onClick={() => setUnoButtonPressed(!isUnoButtonPressed)}>UNO</button>
+                            <button className='game-button orange' disabled={player2Deck.length !== 2} onClick={() => {
+                                setUnoButtonPressed(!isUnoButtonPressed)
+                                playUnoSound()
+                            }}>UNO</button>
                         </div>
                         <br />
                         <div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>