1
0
mirror of https://github.com/mizanxali/uno-online synced 2024-11-05 02:35:26 +00:00

Improvements

This commit is contained in:
Mizanali Panjwani 2021-03-02 17:07:28 +05:30
parent bd37bc88d3
commit 5b679221ef
3 changed files with 12 additions and 65 deletions

View File

@ -1 +1 @@
Online multiplayer card game.
Two player online game of UNO.

View File

@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
content="Two player online game of UNO."
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>UNO Online</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>

View File

@ -185,7 +185,6 @@ const Game = (props) => {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update turn, currentColor and currentNumber
const removeIndex = player1Deck.indexOf(played_card)
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player1Deck.length===2 && !isUnoButtonPressed) {
@ -195,11 +194,9 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const updatedPlayer1Deck = [...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)]
updatedPlayer1Deck.push(drawCard1)
updatedPlayer1Deck.push(drawCard2)
!isSoundMuted && playShufflingSound()
//send new state to server
socket.emit('updateGameState', {
@ -231,7 +228,6 @@ const Game = (props) => {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//then update turn, currentColor and currentNumber
const removeIndex = player2Deck.indexOf(played_card)
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player2Deck.length===2 && !isUnoButtonPressed) {
@ -241,11 +237,9 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const updatedPlayer2Deck = [...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)]
updatedPlayer2Deck.push(drawCard1)
updatedPlayer2Deck.push(drawCard2)
!isSoundMuted && playShufflingSound()
//send new state to server
socket.emit('updateGameState', {
@ -282,7 +276,6 @@ const Game = (props) => {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update turn, currentColor and currentNumber
const removeIndex = player1Deck.indexOf(played_card)
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player1Deck.length===2 && !isUnoButtonPressed) {
@ -292,11 +285,9 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const updatedPlayer1Deck = [...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)]
updatedPlayer1Deck.push(drawCard1)
updatedPlayer1Deck.push(drawCard2)
!isSoundMuted && playShufflingSound()
//send new state to server
socket.emit('updateGameState', {
@ -337,11 +328,9 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const updatedPlayer2Deck = [...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)]
updatedPlayer2Deck.push(drawCard1)
updatedPlayer2Deck.push(drawCard2)
!isSoundMuted && playShufflingSound()
//send new state to server
socket.emit('updateGameState', {
@ -388,7 +377,6 @@ const Game = (props) => {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber
const removeIndex = player1Deck.indexOf(played_card)
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player1Deck.length===2 && !isUnoButtonPressed) {
@ -398,11 +386,9 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const updatedPlayer1Deck = [...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)]
updatedPlayer1Deck.push(drawCard1)
updatedPlayer1Deck.push(drawCard2)
!isSoundMuted && playSkipCardSound()
//send new state to server
socket.emit('updateGameState', {
@ -432,7 +418,6 @@ const Game = (props) => {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber
const removeIndex = player2Deck.indexOf(played_card)
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player2Deck.length===2 && !isUnoButtonPressed) {
@ -442,11 +427,9 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const updatedPlayer2Deck = [...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)]
updatedPlayer2Deck.push(drawCard1)
updatedPlayer2Deck.push(drawCard2)
!isSoundMuted && playSkipCardSound()
//send new state to server
socket.emit('updateGameState', {
@ -481,7 +464,6 @@ const Game = (props) => {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = player1Deck.indexOf(played_card)
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player1Deck.length===2 && !isUnoButtonPressed) {
@ -491,11 +473,9 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const updatedPlayer1Deck = [...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)]
updatedPlayer1Deck.push(drawCard1)
updatedPlayer1Deck.push(drawCard2)
!isSoundMuted && playSkipCardSound()
//send new state to server
socket.emit('updateGameState', {
@ -525,7 +505,6 @@ const Game = (props) => {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = player2Deck.indexOf(played_card)
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player2Deck.length===2 && !isUnoButtonPressed) {
@ -535,11 +514,9 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const updatedPlayer2Deck = [...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)]
updatedPlayer2Deck.push(drawCard1)
updatedPlayer2Deck.push(drawCard2)
!isSoundMuted && playSkipCardSound()
//send new state to server
socket.emit('updateGameState', {
@ -590,7 +567,6 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player1Deck.length===2 && !isUnoButtonPressed) {
@ -598,7 +574,6 @@ const Game = (props) => {
//pull out last two elements from drawCardPile
const drawCard1X = copiedDrawCardPileArray.pop()
const drawCard2X = copiedDrawCardPileArray.pop()
const updatedPlayer1Deck = [...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)]
updatedPlayer1Deck.push(drawCard1X)
updatedPlayer1Deck.push(drawCard2X)
@ -641,7 +616,6 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player2Deck.length===2 && !isUnoButtonPressed) {
@ -649,11 +623,9 @@ const Game = (props) => {
//pull out last two elements from drawCardPile
const drawCard1X = copiedDrawCardPileArray.pop()
const drawCard2X = copiedDrawCardPileArray.pop()
const updatedPlayer2Deck = [...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)]
updatedPlayer2Deck.push(drawCard1X)
updatedPlayer2Deck.push(drawCard2X)
!isSoundMuted && playDraw2CardSound()
//send new state to server
socket.emit('updateGameState', {
@ -697,7 +669,6 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player1Deck.length===2 && !isUnoButtonPressed) {
@ -705,11 +676,9 @@ const Game = (props) => {
//pull out last two elements from drawCardPile
const drawCard1X = copiedDrawCardPileArray.pop()
const drawCard2X = copiedDrawCardPileArray.pop()
const updatedPlayer1Deck = [...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)]
updatedPlayer1Deck.push(drawCard1X)
updatedPlayer1Deck.push(drawCard2X)
!isSoundMuted && playDraw2CardSound()
//send new state to server
socket.emit('updateGameState', {
@ -748,7 +717,6 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player2Deck.length===2 && !isUnoButtonPressed) {
@ -756,11 +724,9 @@ const Game = (props) => {
//pull out last two elements from drawCardPile
const drawCard1X = copiedDrawCardPileArray.pop()
const drawCard2X = copiedDrawCardPileArray.pop()
const updatedPlayer2Deck = [...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)]
updatedPlayer2Deck.push(drawCard1X)
updatedPlayer2Deck.push(drawCard2X)
!isSoundMuted && playDraw2CardSound()
//send new state to server
socket.emit('updateGameState', {
@ -805,7 +771,6 @@ const Game = (props) => {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
const removeIndex = player1Deck.indexOf(played_card)
//then update turn, currentColor and currentNumber
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player1Deck.length===2 && !isUnoButtonPressed) {
@ -815,11 +780,9 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const updatedPlayer1Deck = [...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)]
updatedPlayer1Deck.push(drawCard1)
updatedPlayer1Deck.push(drawCard2)
!isSoundMuted && playWildCardSound()
//send new state to server
socket.emit('updateGameState', {
@ -835,7 +798,6 @@ const Game = (props) => {
}
else {
!isSoundMuted && playWildCardSound()
//send new state to server
socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck),
@ -854,7 +816,6 @@ const Game = (props) => {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
const removeIndex = player2Deck.indexOf(played_card)
//then update turn, currentColor and currentNumber
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player2Deck.length===2 && !isUnoButtonPressed) {
@ -864,12 +825,10 @@ const Game = (props) => {
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const updatedPlayer2Deck = [...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)]
updatedPlayer2Deck.push(drawCard1)
updatedPlayer2Deck.push(drawCard2)
!isSoundMuted && playWildCardSound()
//send new state to server
socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck),
@ -884,7 +843,6 @@ const Game = (props) => {
}
else {
!isSoundMuted && playWildCardSound()
//send new state to server
socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck),
@ -916,7 +874,6 @@ const Game = (props) => {
const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop()
//then update currentColor and currentNumber - turn will remain same
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player1Deck.length===2 && !isUnoButtonPressed) {
@ -924,13 +881,10 @@ const Game = (props) => {
//pull out last two elements from drawCardPile
const drawCard1X = copiedDrawCardPileArray.pop()
const drawCard2X = copiedDrawCardPileArray.pop()
const updatedPlayer1Deck = [...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)]
updatedPlayer1Deck.push(drawCard1X)
updatedPlayer1Deck.push(drawCard2X)
!isSoundMuted && playDraw4CardSound()
//send new state to server
socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck),
@ -945,7 +899,6 @@ const Game = (props) => {
}
else {
!isSoundMuted && playDraw4CardSound()
//send new state to server
socket.emit('updateGameState', {
gameOver: checkGameOver(player1Deck),
@ -974,7 +927,6 @@ const Game = (props) => {
const drawCard4 = copiedDrawCardPileArray.pop()
//then update currentColor and currentNumber - turn will remain same
!isSoundMuted && playDraw4CardSound()
//send new state to server
socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck),
@ -986,7 +938,6 @@ const Game = (props) => {
currentNumber: 600,
drawCardPile: [...copiedDrawCardPileArray]
})
//if two cards remaining check if player pressed UNO button
//if not pressed add 2 cards as penalty
if(player2Deck.length===2 && !isUnoButtonPressed) {
@ -994,13 +945,10 @@ const Game = (props) => {
//pull out last two elements from drawCardPile
const drawCard1X = copiedDrawCardPileArray.pop()
const drawCard2X = copiedDrawCardPileArray.pop()
const updatedPlayer2Deck = [...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)]
updatedPlayer2Deck.push(drawCard1X)
updatedPlayer2Deck.push(drawCard2X)
!isSoundMuted && playDraw4CardSound()
//send new state to server
socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck),
@ -1015,7 +963,6 @@ const Game = (props) => {
}
else {
!isSoundMuted && playDraw4CardSound()
//send new state to server
socket.emit('updateGameState', {
gameOver: checkGameOver(player2Deck),
@ -1258,16 +1205,17 @@ const Game = (props) => {
{gameOver ? <div>{winner !== '' && <><h1>GAME OVER</h1><h2>{winner} wins!</h2></>}</div> :
<div>
{currentUser === 'Player 1' && <>
<div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}>
<p className='playerDeckText'>Player 1</p>
{player1Deck.map((item, i) => (
<div className='player2Deck' style={{pointerEvents: 'none'}}>
<p className='playerDeckText'>Player 2</p>
{player2Deck.map((item, i) => (
<img
key={i}
className='Card'
onClick={() => onCardPlayedHandler(item)}
src={require(`../assets/cards-front/${item}.png`).default}
src={require(`../assets/card-back.png`).default}
/>
))}
{turn==='Player 2' && <Spinner />}
</div>
<br />
<div className='middleInfo' style={turn === 'Player 2' ? {pointerEvents: 'none'} : null}>
@ -1283,17 +1231,16 @@ const Game = (props) => {
}}>UNO</button>
</div>
<br />
<div className='player2Deck' style={{pointerEvents: 'none'}}>
<p className='playerDeckText'>Player 2</p>
{player2Deck.map((item, i) => (
<div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}>
<p className='playerDeckText'>Player 1</p>
{player1Deck.map((item, i) => (
<img
key={i}
className='Card'
onClick={() => onCardPlayedHandler(item)}
src={require(`../assets/card-back.png`).default}
src={require(`../assets/cards-front/${item}.png`).default}
/>
))}
{turn==='Player 2' && <Spinner />}
</div> </> }
{currentUser === 'Player 2' && <>