dave/uno-online
1
0
Fork 0
forked from Github/uno-online
Code Issues Pull Requests Projects Releases Wiki Activity

Added sound effects

Browse Source
This commit is contained in:
Mizanali Panjwani 2021-02-26 01:48:13 +05:30
parent 1131849648
commit 3371e31ca1
11 changed files with 92 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/package-lock.json generated
View File

@ -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",

3
client/package.json
View File

@ -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",

BIN
client/src/assets/sounds/draw2-sound.mp3 Normal file
View File

Binary file not shown.

BIN
client/src/assets/sounds/draw4-sound.mp3 Normal file
View File

Binary file not shown.

BIN
client/src/assets/sounds/game-over-sound.mp3 Normal file
View File

Binary file not shown.

BIN
client/src/assets/sounds/shuffling-cards-1.mp3 Normal file
View File

Binary file not shown.

BIN
client/src/assets/sounds/skip-sound.mp3 Normal file
View File

Binary file not shown.

BIN
client/src/assets/sounds/uno-sound-1.mp3 Normal file
View File

Binary file not shown.

BIN
client/src/assets/sounds/uno-sound.mp3 Normal file
View File

Binary file not shown.

BIN
client/src/assets/sounds/wild-sound.mp3 Normal file
View File

Binary file not shown.

80
client/src/components/Game.js
View File

@ -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}>