diff --git a/client/src/App.css b/client/src/App.css index 246d35e..2d535aa 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -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; } \ No newline at end of file diff --git a/client/src/assets/backgrounds/bg0.png b/client/src/assets/backgrounds/bg0.png deleted file mode 100644 index 749b7b3..0000000 Binary files a/client/src/assets/backgrounds/bg0.png and /dev/null differ diff --git a/client/src/assets/backgrounds/bg1.png b/client/src/assets/backgrounds/bg1.png deleted file mode 100644 index 60522bf..0000000 Binary files a/client/src/assets/backgrounds/bg1.png and /dev/null differ diff --git a/client/src/assets/backgrounds/bg2.png b/client/src/assets/backgrounds/bg2.png deleted file mode 100644 index 37ffb1b..0000000 Binary files a/client/src/assets/backgrounds/bg2.png and /dev/null differ diff --git a/client/src/assets/backgrounds/bg3.png b/client/src/assets/backgrounds/bg3.png deleted file mode 100644 index 498ac74..0000000 Binary files a/client/src/assets/backgrounds/bg3.png and /dev/null differ diff --git a/client/src/assets/backgrounds/bg4.png b/client/src/assets/backgrounds/bg4.png deleted file mode 100644 index 66d06d9..0000000 Binary files a/client/src/assets/backgrounds/bg4.png and /dev/null differ diff --git a/client/src/assets/backgrounds/bgB.png b/client/src/assets/backgrounds/bgB.png new file mode 100644 index 0000000..a4749e0 Binary files /dev/null and b/client/src/assets/backgrounds/bgB.png differ diff --git a/client/src/assets/backgrounds/bgG.png b/client/src/assets/backgrounds/bgG.png new file mode 100644 index 0000000..960308b Binary files /dev/null and b/client/src/assets/backgrounds/bgG.png differ diff --git a/client/src/assets/backgrounds/bgR.png b/client/src/assets/backgrounds/bgR.png new file mode 100644 index 0000000..c61bbec Binary files /dev/null and b/client/src/assets/backgrounds/bgR.png differ diff --git a/client/src/assets/backgrounds/bgY.png b/client/src/assets/backgrounds/bgY.png new file mode 100644 index 0000000..d8a5660 Binary files /dev/null and b/client/src/assets/backgrounds/bgY.png differ diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png new file mode 100644 index 0000000..737b80c Binary files /dev/null and b/client/src/assets/logo.png differ diff --git a/client/src/components/Game.js b/client/src/components/Game.js index 31b7e7c..6f30a48 100644 --- a/client/src/components/Game.js +++ b/client/src/components/Game.js @@ -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 ( -
+
{(!roomFull) ? <>
-

Logo here

+

Game Code: {room}

-
changeBackgroundColor(0)} className='square color0' />
changeBackgroundColor(1)} className='square color1' />
changeBackgroundColor(2)} className='square color2' />
changeBackgroundColor(3)} className='square color3' />
changeBackgroundColor(4)} className='square color4' />
{users.length===1 && currentUser === 'Player 2' &&

Player 1 has left the game.

} @@ -1207,10 +1184,11 @@ const Game = (props) => { {gameOver ?
{winner !== '' && <>

GAME OVER

{winner} wins!

}
:
{currentUser === 'Player 1' && <> -
- {turn==='Player 2' &&

Waiting for Player 2 to play!

} -
+ + {turn==='Player 2' &&

Waiting for Player 2 to play!

} +
+

Player 1

{player1Deck.map((item, i) => ( { src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default} /> } - +

+

Player 2

{player2Deck.map((item, i) => ( {
} {currentUser === 'Player 2' && <> + {turn==='Player 1' &&

Waiting for Player 1 to play!

} +
+

Player 1

{player1Deck.map((item, i) => ( { src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default} /> } - +

+

Player 2

{player2Deck.map((item, i) => ( { onClick={() => onCardPlayedHandler(item)} src={require(`../assets/cards-front/${item}.png`).default} /> - ))} + ))}
}
}