mirror of
https://github.com/mizanxali/uno-online
synced 2024-11-05 02:35:26 +00:00
Styling updates
This commit is contained in:
Mizanali Panjwani
parent
eacd8e0001
commit
11055dff55
@ -24,24 +24,20 @@ a {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.backgroundColor0 {
|
||||
background-image: url('./assets/backgrounds/bg0.png');
|
||||
.backgroundColorR {
|
||||
background-image: url('./assets/backgrounds/bgR.png');
|
||||
}
|
||||
|
||||
.backgroundColor1 {
|
||||
background-image: url('./assets/backgrounds/bg1.png');
|
||||
.backgroundColorG {
|
||||
background-image: url('./assets/backgrounds/bgG.png');
|
||||
}
|
||||
|
||||
.backgroundColor2 {
|
||||
background-image: url('./assets/backgrounds/bg2.png');
|
||||
.backgroundColorB {
|
||||
background-image: url('./assets/backgrounds/bgB.png');
|
||||
}
|
||||
|
||||
.backgroundColor3 {
|
||||
background-image: url('./assets/backgrounds/bg3.png');
|
||||
}
|
||||
|
||||
.backgroundColor4 {
|
||||
background-image: url('./assets/backgrounds/bg4.png');
|
||||
.backgroundColorY {
|
||||
background-image: url('./assets/backgrounds/bgY.png');
|
||||
}
|
||||
|
||||
.Card {
|
||||
@ -55,41 +51,20 @@ a {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 60px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.topInfo>img {
|
||||
width: 7%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.topInfo>h1 {
|
||||
color: white;
|
||||
margin-top: 10px;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.square {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
margin: 20px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.color0 {
|
||||
background-color: #8e251d;
|
||||
}
|
||||
|
||||
.color1 {
|
||||
background-color: #48406a;
|
||||
}
|
||||
|
||||
.color2 {
|
||||
background-color: #406a4b;
|
||||
}
|
||||
|
||||
.color3 {
|
||||
background-color: #40686a;
|
||||
}
|
||||
|
||||
.color4 {
|
||||
background-color: #23873f;
|
||||
padding-top: 2%;
|
||||
}
|
||||
|
||||
.topInfoText {
|
||||
@ -97,10 +72,16 @@ a {
|
||||
font-size: 2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
.waitingForPlayer {
|
||||
height: 80px;
|
||||
font-size: 1.5rem;
|
||||
} */
|
||||
|
||||
.player1Deck {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player1Deck>img {
|
||||
@ -112,6 +93,12 @@ a {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.player2Deck {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player2Deck>img {
|
||||
transition: transform 350ms;
|
||||
}
|
||||
@ -119,4 +106,10 @@ a {
|
||||
.player2Deck>img:hover {
|
||||
transform: scale(1.08);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.playerDeckText {
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
margin: 0 20px;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 522 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 297 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 299 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 294 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 311 KiB |
BIN
client/src/assets/backgrounds/bgB.png
Normal file
BIN
client/src/assets/backgrounds/bgB.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 593 KiB |
BIN
client/src/assets/backgrounds/bgG.png
Normal file
BIN
client/src/assets/backgrounds/bgG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 617 KiB |
BIN
client/src/assets/backgrounds/bgR.png
Normal file
BIN
client/src/assets/backgrounds/bgR.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 514 KiB |
BIN
client/src/assets/backgrounds/bgY.png
Normal file
BIN
client/src/assets/backgrounds/bgY.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 738 KiB |
BIN
client/src/assets/logo.png
Normal file
BIN
client/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
@ -116,8 +116,7 @@ const Game = (props) => {
|
||||
setDrawCardPile(drawCardPile)
|
||||
})
|
||||
|
||||
socket.on('updateGameState', ({ isUnoButtonPressed, gameOver, winner, turn, player1Deck, player2Deck, currentColor, currentNumber, playedCardsPile, drawCardPile }) => {
|
||||
isUnoButtonPressed && setUnoButtonPressed(isUnoButtonPressed)
|
||||
socket.on('updateGameState', ({ gameOver, winner, turn, player1Deck, player2Deck, currentColor, currentNumber, playedCardsPile, drawCardPile }) => {
|
||||
gameOver && setGameOver(gameOver)
|
||||
winner && setWinner(winner)
|
||||
turn && setTurn(turn)
|
||||
@ -127,6 +126,7 @@ const Game = (props) => {
|
||||
currentNumber && setCurrentNumber(currentNumber)
|
||||
playedCardsPile && setPlayedCardsPile(playedCardsPile)
|
||||
drawCardPile && setDrawCardPile(drawCardPile)
|
||||
setUnoButtonPressed(false)
|
||||
})
|
||||
|
||||
socket.on("roomData", ({ users }) => {
|
||||
@ -147,16 +147,6 @@ const Game = (props) => {
|
||||
return arr.length === 1 ? player : ''
|
||||
}
|
||||
|
||||
const changeBackgroundColor = (id) => {
|
||||
const backgroundColorIds = [0, 1, 2, 3, 4]
|
||||
const newBackgroundColorIds = backgroundColorIds.filter(item => item!=id)
|
||||
const gameDiv = document.querySelector('.Game')
|
||||
newBackgroundColorIds.forEach(item => {
|
||||
gameDiv.classList.remove(`backgroundColor${item}`)
|
||||
})
|
||||
gameDiv.classList.add(`backgroundColor${id}`)
|
||||
}
|
||||
|
||||
//driver functions
|
||||
const onCardPlayedHandler = (played_card) => {
|
||||
//extract player who played the card
|
||||
@ -179,7 +169,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//make a copy of drawCardPile array
|
||||
const copiedDrawCardPileArray = [...drawCardPile]
|
||||
//pull out last two elements from it
|
||||
@ -192,7 +182,6 @@ const Game = (props) => {
|
||||
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
turn: 'Player 2',
|
||||
@ -206,7 +195,6 @@ const Game = (props) => {
|
||||
else {
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
turn: 'Player 2',
|
||||
@ -225,7 +213,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//make a copy of drawCardPile array
|
||||
const copiedDrawCardPileArray = [...drawCardPile]
|
||||
//pull out last two elements from it
|
||||
@ -274,7 +262,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//make a copy of drawCardPile array
|
||||
const copiedDrawCardPileArray = [...drawCardPile]
|
||||
//pull out last two elements from it
|
||||
@ -287,7 +275,6 @@ const Game = (props) => {
|
||||
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
turn: 'Player 2',
|
||||
@ -301,7 +288,6 @@ const Game = (props) => {
|
||||
else {
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
turn: 'Player 2',
|
||||
@ -319,7 +305,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//make a copy of drawCardPile array
|
||||
const copiedDrawCardPileArray = [...drawCardPile]
|
||||
//pull out last two elements from it
|
||||
@ -378,7 +364,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//make a copy of drawCardPile array
|
||||
const copiedDrawCardPileArray = [...drawCardPile]
|
||||
//pull out last two elements from it
|
||||
@ -391,7 +377,6 @@ const Game = (props) => {
|
||||
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||
@ -404,7 +389,6 @@ const Game = (props) => {
|
||||
else {
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||
@ -422,7 +406,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//make a copy of drawCardPile array
|
||||
const copiedDrawCardPileArray = [...drawCardPile]
|
||||
//pull out last two elements from it
|
||||
@ -469,7 +453,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//make a copy of drawCardPile array
|
||||
const copiedDrawCardPileArray = [...drawCardPile]
|
||||
//pull out last two elements from it
|
||||
@ -482,7 +466,6 @@ const Game = (props) => {
|
||||
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||
@ -495,7 +478,6 @@ const Game = (props) => {
|
||||
else {
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||
@ -513,7 +495,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//make a copy of drawCardPile array
|
||||
const copiedDrawCardPileArray = [...drawCardPile]
|
||||
//pull out last two elements from it
|
||||
@ -576,7 +558,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//pull out last two elements from drawCardPile
|
||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||
@ -587,7 +569,6 @@ const Game = (props) => {
|
||||
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||
@ -601,7 +582,6 @@ const Game = (props) => {
|
||||
else {
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||
@ -627,7 +607,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//pull out last two elements from drawCardPile
|
||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||
@ -681,7 +661,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//pull out last two elements from drawCardPile
|
||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||
@ -692,7 +672,6 @@ const Game = (props) => {
|
||||
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||
@ -706,7 +685,6 @@ const Game = (props) => {
|
||||
else {
|
||||
//send new state to server
|
||||
socket.emit('updateGameState', {
|
||||
isUnoButtonPressed: false,
|
||||
gameOver: checkGameOver(player1Deck),
|
||||
winner: checkWinner(player1Deck, 'Player 1'),
|
||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||
@ -732,7 +710,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//pull out last two elements from drawCardPile
|
||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||
@ -787,7 +765,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//make a copy of drawCardPile array
|
||||
const copiedDrawCardPileArray = [...drawCardPile]
|
||||
//pull out last two elements from it
|
||||
@ -833,7 +811,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//make a copy of drawCardPile array
|
||||
const copiedDrawCardPileArray = [...drawCardPile]
|
||||
//pull out last two elements from it
|
||||
@ -892,7 +870,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//pull out last two elements from drawCardPile
|
||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||
@ -956,7 +934,7 @@ const Game = (props) => {
|
||||
//if two cards remaining check if player pressed UNO button
|
||||
//if not pressed add 2 cards as penalty
|
||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
||||
alert('Oops! You forgot to press UNO')
|
||||
alert('Oops! You forgot to press UNO. You drew 2 cards as penalty.')
|
||||
//pull out last two elements from drawCardPile
|
||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||
@ -1189,13 +1167,12 @@ const Game = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='Game backgroundColor0'>
|
||||
<div className={`Game backgroundColor${currentColor}`}>
|
||||
{(!roomFull) ? <>
|
||||
|
||||
<div className='topInfo'>
|
||||
<h1>Logo here</h1>
|
||||
<img src={require('../assets/logo.png').default} />
|
||||
<h1>Game Code: {room}</h1>
|
||||
<div><div onClick={() => changeBackgroundColor(0)} className='square color0' /><div onClick={() => changeBackgroundColor(1)} className='square color1' /><div onClick={() => changeBackgroundColor(2)} className='square color2' /><div onClick={() => changeBackgroundColor(3)} className='square color3' /><div onClick={() => changeBackgroundColor(4)} className='square color4' /></div>
|
||||
</div>
|
||||
|
||||
{users.length===1 && currentUser === 'Player 2' && <h1 className='topInfoText'>Player 1 has left the game.</h1> }
|
||||
@ -1207,10 +1184,11 @@ const Game = (props) => {
|
||||
{gameOver ? <div>{winner !== '' && <><h1>GAME OVER</h1><h2>{winner} wins!</h2></>}</div> :
|
||||
<div>
|
||||
{currentUser === 'Player 1' && <>
|
||||
<div className='waitingForPlayer'>
|
||||
{turn==='Player 2' && <h1 className='topInfoText'>Waiting for Player 2 to play!</h1>}
|
||||
</div>
|
||||
|
||||
{turn==='Player 2' && <h1>Waiting for Player 2 to play!</h1>}
|
||||
|
||||
<div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}>
|
||||
<p className='playerDeckText'>Player 1</p>
|
||||
{player1Deck.map((item, i) => (
|
||||
<img
|
||||
key={i}
|
||||
@ -1228,10 +1206,11 @@ const Game = (props) => {
|
||||
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
|
||||
/> }
|
||||
<button disabled={turn !== 'Player 1'} onClick={onCardDrawnHandler}>DRAW CARD</button>
|
||||
<button onClick={() => setUnoButtonPressed(!isUnoButtonPressed)}>UNO</button>
|
||||
<button disabled={turn !== 'Player 1'} onClick={() => setUnoButtonPressed(!isUnoButtonPressed)}>UNO</button>
|
||||
</div>
|
||||
<br />
|
||||
<div className='player2Deck' style={{pointerEvents: 'none'}}>
|
||||
<p className='playerDeckText'>Player 2</p>
|
||||
{player2Deck.map((item, i) => (
|
||||
<img
|
||||
key={i}
|
||||
@ -1243,8 +1222,11 @@ const Game = (props) => {
|
||||
</div> </> }
|
||||
|
||||
{currentUser === 'Player 2' && <>
|
||||
|
||||
{turn==='Player 1' && <h1>Waiting for Player 1 to play!</h1>}
|
||||
|
||||
<div className='player1Deck' style={{pointerEvents: 'none'}}>
|
||||
<p className='playerDeckText'>Player 1</p>
|
||||
{player1Deck.map((item, i) => (
|
||||
<img
|
||||
key={i}
|
||||
@ -1262,10 +1244,11 @@ const Game = (props) => {
|
||||
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
|
||||
/> }
|
||||
<button disabled={turn !== 'Player 2'} onClick={onCardDrawnHandler}>DRAW CARD</button>
|
||||
<button onClick={() => setUnoButtonPressed(!isUnoButtonPressed)}>UNO</button>
|
||||
<button disabled={turn !== 'Player 2'} onClick={() => setUnoButtonPressed(!isUnoButtonPressed)}>UNO</button>
|
||||
</div>
|
||||
<br />
|
||||
<div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
|
||||
<p className='playerDeckText'>Player 2</p>
|
||||
{player2Deck.map((item, i) => (
|
||||
<img
|
||||
key={i}
|
||||
@ -1273,7 +1256,7 @@ const Game = (props) => {
|
||||
onClick={() => onCardPlayedHandler(item)}
|
||||
src={require(`../assets/cards-front/${item}.png`).default}
|
||||
/>
|
||||
))}
|
||||
))}
|
||||
</div> </> }
|
||||
</div> }
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user