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

Added sound controls

Browse Source
This commit is contained in:
Mizanali Panjwani 2021-02-26 19:20:42 +05:30
parent 3371e31ca1
commit c8e57c05bf
2 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/public/index.html
View File

@ -25,6 +25,8 @@
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>React App</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

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

@ -67,6 +67,8 @@ const Game = (props) => {
const [drawCardPile, setDrawCardPile] = useState([]) const [drawCardPile, setDrawCardPile] = useState([])
const [isUnoButtonPressed, setUnoButtonPressed] = useState(false) const [isUnoButtonPressed, setUnoButtonPressed] = useState(false)
const [isSoundMuted, setSoundMuted] = useState(false)
const [isMusicMuted, setMusicMuted] = useState(false)
const [playUnoSound] = useSound(unoSound) const [playUnoSound] = useSound(unoSound)
const [playShufflingSound] = useSound(shufflingSound) const [playShufflingSound] = useSound(shufflingSound)
@ -135,6 +137,7 @@ const Game = (props) => {
socket.on('updateGameState', ({ gameOver, winner, turn, player1Deck, player2Deck, currentColor, currentNumber, playedCardsPile, drawCardPile }) => { socket.on('updateGameState', ({ gameOver, winner, turn, player1Deck, player2Deck, currentColor, currentNumber, playedCardsPile, drawCardPile }) => {
gameOver && setGameOver(gameOver) gameOver && setGameOver(gameOver)
gameOver===true && playGameOverSound()
winner && setWinner(winner) winner && setWinner(winner)
turn && setTurn(turn) turn && setTurn(turn)
player1Deck && setPlayer1Deck(player1Deck) player1Deck && setPlayer1Deck(player1Deck)
@ -197,7 +200,7 @@ const Game = (props) => {
updatedPlayer1Deck.push(drawCard1) updatedPlayer1Deck.push(drawCard1)
updatedPlayer1Deck.push(drawCard2) updatedPlayer1Deck.push(drawCard2)
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck), gameOver: checkGameOver(player1Deck),
@ -211,7 +214,7 @@ const Game = (props) => {
}) })
} }
else { else {
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck), gameOver: checkGameOver(player1Deck),
@ -243,7 +246,7 @@ const Game = (props) => {
updatedPlayer2Deck.push(drawCard1) updatedPlayer2Deck.push(drawCard1)
updatedPlayer2Deck.push(drawCard2) updatedPlayer2Deck.push(drawCard2)
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck), gameOver: checkGameOver(player2Deck),
@ -257,7 +260,7 @@ const Game = (props) => {
}) })
} }
else { else {
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck), gameOver: checkGameOver(player2Deck),
@ -294,7 +297,7 @@ const Game = (props) => {
updatedPlayer1Deck.push(drawCard1) updatedPlayer1Deck.push(drawCard1)
updatedPlayer1Deck.push(drawCard2) updatedPlayer1Deck.push(drawCard2)
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck), gameOver: checkGameOver(player1Deck),
@ -308,7 +311,7 @@ const Game = (props) => {
}) })
} }
else { else {
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck), gameOver: checkGameOver(player1Deck),
@ -339,7 +342,7 @@ const Game = (props) => {
updatedPlayer2Deck.push(drawCard1) updatedPlayer2Deck.push(drawCard1)
updatedPlayer2Deck.push(drawCard2) updatedPlayer2Deck.push(drawCard2)
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck), gameOver: checkGameOver(player2Deck),
@ -353,7 +356,7 @@ const Game = (props) => {
}) })
} }
else { else {
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck), gameOver: checkGameOver(player2Deck),
@ -600,7 +603,7 @@ const Game = (props) => {
updatedPlayer1Deck.push(drawCard1X) updatedPlayer1Deck.push(drawCard1X)
updatedPlayer1Deck.push(drawCard2X) updatedPlayer1Deck.push(drawCard2X)
playDraw2CardSound() !isSoundMuted && playDraw2CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck), gameOver: checkGameOver(player1Deck),
@ -614,7 +617,7 @@ const Game = (props) => {
}) })
} }
else { else {
playDraw2CardSound() !isSoundMuted && playDraw2CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck), gameOver: checkGameOver(player1Deck),
@ -651,7 +654,7 @@ const Game = (props) => {
updatedPlayer2Deck.push(drawCard1X) updatedPlayer2Deck.push(drawCard1X)
updatedPlayer2Deck.push(drawCard2X) updatedPlayer2Deck.push(drawCard2X)
playDraw2CardSound() !isSoundMuted && playDraw2CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck), gameOver: checkGameOver(player2Deck),
@ -665,7 +668,7 @@ const Game = (props) => {
}) })
} }
else { else {
playDraw2CardSound() !isSoundMuted && playDraw2CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck), gameOver: checkGameOver(player2Deck),
@ -707,7 +710,7 @@ const Game = (props) => {
updatedPlayer1Deck.push(drawCard1X) updatedPlayer1Deck.push(drawCard1X)
updatedPlayer1Deck.push(drawCard2X) updatedPlayer1Deck.push(drawCard2X)
playDraw2CardSound() !isSoundMuted && playDraw2CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck), gameOver: checkGameOver(player1Deck),
@ -721,7 +724,7 @@ const Game = (props) => {
}) })
} }
else { else {
playDraw2CardSound() !isSoundMuted && playDraw2CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck), gameOver: checkGameOver(player1Deck),
@ -758,7 +761,7 @@ const Game = (props) => {
updatedPlayer2Deck.push(drawCard1X) updatedPlayer2Deck.push(drawCard1X)
updatedPlayer2Deck.push(drawCard2X) updatedPlayer2Deck.push(drawCard2X)
playDraw2CardSound() !isSoundMuted && playDraw2CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck), gameOver: checkGameOver(player2Deck),
@ -772,7 +775,7 @@ const Game = (props) => {
}) })
} }
else { else {
playDraw2CardSound() !isSoundMuted && playDraw2CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck), gameOver: checkGameOver(player2Deck),
@ -817,7 +820,7 @@ const Game = (props) => {
updatedPlayer1Deck.push(drawCard1) updatedPlayer1Deck.push(drawCard1)
updatedPlayer1Deck.push(drawCard2) updatedPlayer1Deck.push(drawCard2)
playWildCardSound() !isSoundMuted && playWildCardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck), gameOver: checkGameOver(player1Deck),
@ -831,7 +834,7 @@ const Game = (props) => {
}) })
} }
else { else {
playWildCardSound() !isSoundMuted && playWildCardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
@ -865,7 +868,7 @@ const Game = (props) => {
const updatedPlayer2Deck = [...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)] const updatedPlayer2Deck = [...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)]
updatedPlayer2Deck.push(drawCard1) updatedPlayer2Deck.push(drawCard1)
updatedPlayer2Deck.push(drawCard2) updatedPlayer2Deck.push(drawCard2)
playWildCardSound() !isSoundMuted && playWildCardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
@ -880,7 +883,7 @@ const Game = (props) => {
}) })
} }
else { else {
playWildCardSound() !isSoundMuted && playWildCardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
@ -926,7 +929,7 @@ const Game = (props) => {
updatedPlayer1Deck.push(drawCard1X) updatedPlayer1Deck.push(drawCard1X)
updatedPlayer1Deck.push(drawCard2X) updatedPlayer1Deck.push(drawCard2X)
playDraw4CardSound() !isSoundMuted && playDraw4CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
@ -941,7 +944,7 @@ const Game = (props) => {
}) })
} }
else { else {
playDraw4CardSound() !isSoundMuted && playDraw4CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
@ -970,7 +973,7 @@ const Game = (props) => {
const drawCard3 = copiedDrawCardPileArray.pop() const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop() const drawCard4 = copiedDrawCardPileArray.pop()
//then update currentColor and currentNumber - turn will remain same //then update currentColor and currentNumber - turn will remain same
playDraw4CardSound() !isSoundMuted && playDraw4CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
@ -996,7 +999,7 @@ const Game = (props) => {
updatedPlayer2Deck.push(drawCard1X) updatedPlayer2Deck.push(drawCard1X)
updatedPlayer2Deck.push(drawCard2X) updatedPlayer2Deck.push(drawCard2X)
playDraw4CardSound() !isSoundMuted && playDraw4CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
@ -1011,7 +1014,7 @@ const Game = (props) => {
}) })
} }
else { else {
playDraw4CardSound() !isSoundMuted && playDraw4CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
@ -1046,7 +1049,7 @@ const Game = (props) => {
let numberOfDrawnCard = drawCard.charAt(0) let numberOfDrawnCard = drawCard.charAt(0)
if(colorOfDrawnCard === currentColor && (drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY')) { if(colorOfDrawnCard === currentColor && (drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY')) {
alert(`You drew ${drawCard}. It was played for you.`) alert(`You drew ${drawCard}. It was played for you.`)
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)], playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@ -1063,7 +1066,7 @@ const Game = (props) => {
//pull out last two elements from it //pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop() const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop() const drawCard2 = copiedDrawCardPileArray.pop()
playDraw2CardSound() !isSoundMuted && playDraw2CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)], playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@ -1077,7 +1080,7 @@ const Game = (props) => {
alert(`You drew ${drawCard}. It was played for you.`) alert(`You drew ${drawCard}. It was played for you.`)
//ask for new color //ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)') const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
playWildCardSound() !isSoundMuted && playWildCardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
turn: 'Player 2', turn: 'Player 2',
@ -1099,7 +1102,7 @@ const Game = (props) => {
const drawCard2 = copiedDrawCardPileArray.pop() const drawCard2 = copiedDrawCardPileArray.pop()
const drawCard3 = copiedDrawCardPileArray.pop() const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop() const drawCard4 = copiedDrawCardPileArray.pop()
playDraw4CardSound() !isSoundMuted && playDraw4CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)], playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@ -1112,7 +1115,7 @@ const Game = (props) => {
//if not action card - check if drawn card is playable //if not action card - check if drawn card is playable
else if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) { else if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) {
alert(`You drew ${drawCard}. It was played for you.`) alert(`You drew ${drawCard}. It was played for you.`)
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
turn: 'Player 2', turn: 'Player 2',
@ -1124,8 +1127,7 @@ const Game = (props) => {
} }
//else add the drawn card to player1's deck //else add the drawn card to player1's deck
else { else {
alert(`You drew ${drawCard}.`) !isSoundMuted && playShufflingSound()
playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
turn: 'Player 2', turn: 'Player 2',
@ -1145,7 +1147,7 @@ const Game = (props) => {
let numberOfDrawnCard = drawCard.charAt(0) let numberOfDrawnCard = drawCard.charAt(0)
if(colorOfDrawnCard === currentColor && (drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY')) { if(colorOfDrawnCard === currentColor && (drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY')) {
alert(`You drew ${drawCard}. It was played for you.`) alert(`You drew ${drawCard}. It was played for you.`)
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)], playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@ -1162,7 +1164,7 @@ const Game = (props) => {
//pull out last two elements from it //pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop() const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop() const drawCard2 = copiedDrawCardPileArray.pop()
playDraw2CardSound() !isSoundMuted && playDraw2CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)], playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@ -1176,7 +1178,7 @@ const Game = (props) => {
alert(`You drew ${drawCard}. It was played for you.`) alert(`You drew ${drawCard}. It was played for you.`)
//ask for new color //ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)') const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
playWildCardSound() !isSoundMuted && playWildCardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
turn: 'Player 1', turn: 'Player 1',
@ -1198,7 +1200,7 @@ const Game = (props) => {
const drawCard2 = copiedDrawCardPileArray.pop() const drawCard2 = copiedDrawCardPileArray.pop()
const drawCard3 = copiedDrawCardPileArray.pop() const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop() const drawCard4 = copiedDrawCardPileArray.pop()
playDraw4CardSound() !isSoundMuted && playDraw4CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)], playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)],
@ -1211,7 +1213,7 @@ const Game = (props) => {
//if not action card - check if drawn card is playable //if not action card - check if drawn card is playable
else if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) { else if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) {
alert(`You drew ${drawCard}. It was played for you.`) alert(`You drew ${drawCard}. It was played for you.`)
playShufflingSound() !isSoundMuted && playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
turn: 'Player 1', turn: 'Player 1',
@ -1223,8 +1225,7 @@ const Game = (props) => {
} }
//else add the drawn card to player2's deck //else add the drawn card to player2's deck
else { else {
alert(`You drew ${drawCard}.`) !isSoundMuted && playShufflingSound()
playShufflingSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
turn: 'Player 1', turn: 'Player 1',
@ -1242,6 +1243,10 @@ const Game = (props) => {
<div className='topInfo'> <div className='topInfo'>
<img src={require('../assets/logo.png').default} /> <img src={require('../assets/logo.png').default} />
<h1>Game Code: {room}</h1> <h1>Game Code: {room}</h1>
<span>
<button className='game-button green' onClick={() => setSoundMuted(!isSoundMuted)}>{isSoundMuted ? <span class="material-icons">volume_off</span> : <span class="material-icons">volume_up</span>}</button>
<button className='game-button green' onClick={() => setMusicMuted(!isMusicMuted)}>{isMusicMuted ? <span class="material-icons">music_off</span> : <span class="material-icons">music_note</span>}</button>
</span>
</div> </div>
{users.length===1 && currentUser === 'Player 2' && <h1 className='topInfoText'>Player 1 has left the game.</h1> } {users.length===1 && currentUser === 'Player 2' && <h1 className='topInfoText'>Player 1 has left the game.</h1> }