Styling updates
@ -24,24 +24,20 @@ a {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundColor0 {
|
.backgroundColorR {
|
||||||
background-image: url('./assets/backgrounds/bg0.png');
|
background-image: url('./assets/backgrounds/bgR.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundColor1 {
|
.backgroundColorG {
|
||||||
background-image: url('./assets/backgrounds/bg1.png');
|
background-image: url('./assets/backgrounds/bgG.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundColor2 {
|
.backgroundColorB {
|
||||||
background-image: url('./assets/backgrounds/bg2.png');
|
background-image: url('./assets/backgrounds/bgB.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundColor3 {
|
.backgroundColorY {
|
||||||
background-image: url('./assets/backgrounds/bg3.png');
|
background-image: url('./assets/backgrounds/bgY.png');
|
||||||
}
|
|
||||||
|
|
||||||
.backgroundColor4 {
|
|
||||||
background-image: url('./assets/backgrounds/bg4.png');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Card {
|
.Card {
|
||||||
@ -55,41 +51,20 @@ a {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 60px;
|
padding: 0 60px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topInfo>img {
|
||||||
|
width: 7%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topInfo>h1 {
|
.topInfo>h1 {
|
||||||
color: white;
|
color: white;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
padding-top: 2%;
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.topInfoText {
|
.topInfoText {
|
||||||
@ -97,10 +72,16 @@ a {
|
|||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
.waitingForPlayer {
|
.waitingForPlayer {
|
||||||
height: 80px;
|
height: 80px;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.player1Deck {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player1Deck>img {
|
.player1Deck>img {
|
||||||
@ -112,6 +93,12 @@ a {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.player2Deck {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.player2Deck>img {
|
.player2Deck>img {
|
||||||
transition: transform 350ms;
|
transition: transform 350ms;
|
||||||
}
|
}
|
||||||
@ -119,4 +106,10 @@ a {
|
|||||||
.player2Deck>img:hover {
|
.player2Deck>img:hover {
|
||||||
transform: scale(1.08);
|
transform: scale(1.08);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerDeckText {
|
||||||
|
color: white;
|
||||||
|
font-size: 2rem;
|
||||||
|
margin: 0 20px;
|
||||||
}
|
}
|
Before Width: | Height: | Size: 522 KiB |
Before Width: | Height: | Size: 297 KiB |
Before Width: | Height: | Size: 299 KiB |
Before Width: | Height: | Size: 294 KiB |
Before Width: | Height: | Size: 311 KiB |
BIN
client/src/assets/backgrounds/bgB.png
Normal file
After Width: | Height: | Size: 593 KiB |
BIN
client/src/assets/backgrounds/bgG.png
Normal file
After Width: | Height: | Size: 617 KiB |
BIN
client/src/assets/backgrounds/bgR.png
Normal file
After Width: | Height: | Size: 514 KiB |
BIN
client/src/assets/backgrounds/bgY.png
Normal file
After Width: | Height: | Size: 738 KiB |
BIN
client/src/assets/logo.png
Normal file
After Width: | Height: | Size: 167 KiB |
@ -116,8 +116,7 @@ const Game = (props) => {
|
|||||||
setDrawCardPile(drawCardPile)
|
setDrawCardPile(drawCardPile)
|
||||||
})
|
})
|
||||||
|
|
||||||
socket.on('updateGameState', ({ isUnoButtonPressed, gameOver, winner, turn, player1Deck, player2Deck, currentColor, currentNumber, playedCardsPile, drawCardPile }) => {
|
socket.on('updateGameState', ({ gameOver, winner, turn, player1Deck, player2Deck, currentColor, currentNumber, playedCardsPile, drawCardPile }) => {
|
||||||
isUnoButtonPressed && setUnoButtonPressed(isUnoButtonPressed)
|
|
||||||
gameOver && setGameOver(gameOver)
|
gameOver && setGameOver(gameOver)
|
||||||
winner && setWinner(winner)
|
winner && setWinner(winner)
|
||||||
turn && setTurn(turn)
|
turn && setTurn(turn)
|
||||||
@ -127,6 +126,7 @@ const Game = (props) => {
|
|||||||
currentNumber && setCurrentNumber(currentNumber)
|
currentNumber && setCurrentNumber(currentNumber)
|
||||||
playedCardsPile && setPlayedCardsPile(playedCardsPile)
|
playedCardsPile && setPlayedCardsPile(playedCardsPile)
|
||||||
drawCardPile && setDrawCardPile(drawCardPile)
|
drawCardPile && setDrawCardPile(drawCardPile)
|
||||||
|
setUnoButtonPressed(false)
|
||||||
})
|
})
|
||||||
|
|
||||||
socket.on("roomData", ({ users }) => {
|
socket.on("roomData", ({ users }) => {
|
||||||
@ -147,16 +147,6 @@ const Game = (props) => {
|
|||||||
return arr.length === 1 ? player : ''
|
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
|
//driver functions
|
||||||
const onCardPlayedHandler = (played_card) => {
|
const onCardPlayedHandler = (played_card) => {
|
||||||
//extract player who played the 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 two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//make a copy of drawCardPile array
|
||||||
const copiedDrawCardPileArray = [...drawCardPile]
|
const copiedDrawCardPileArray = [...drawCardPile]
|
||||||
//pull out last two elements from it
|
//pull out last two elements from it
|
||||||
@ -192,7 +182,6 @@ const Game = (props) => {
|
|||||||
|
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
turn: 'Player 2',
|
turn: 'Player 2',
|
||||||
@ -206,7 +195,6 @@ const Game = (props) => {
|
|||||||
else {
|
else {
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
turn: 'Player 2',
|
turn: 'Player 2',
|
||||||
@ -225,7 +213,7 @@ const Game = (props) => {
|
|||||||
//if two cards remaining check if player pressed UNO button
|
//if two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//make a copy of drawCardPile array
|
||||||
const copiedDrawCardPileArray = [...drawCardPile]
|
const copiedDrawCardPileArray = [...drawCardPile]
|
||||||
//pull out last two elements from it
|
//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 two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//make a copy of drawCardPile array
|
||||||
const copiedDrawCardPileArray = [...drawCardPile]
|
const copiedDrawCardPileArray = [...drawCardPile]
|
||||||
//pull out last two elements from it
|
//pull out last two elements from it
|
||||||
@ -287,7 +275,6 @@ const Game = (props) => {
|
|||||||
|
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
turn: 'Player 2',
|
turn: 'Player 2',
|
||||||
@ -301,7 +288,6 @@ const Game = (props) => {
|
|||||||
else {
|
else {
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
turn: 'Player 2',
|
turn: 'Player 2',
|
||||||
@ -319,7 +305,7 @@ const Game = (props) => {
|
|||||||
//if two cards remaining check if player pressed UNO button
|
//if two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//make a copy of drawCardPile array
|
||||||
const copiedDrawCardPileArray = [...drawCardPile]
|
const copiedDrawCardPileArray = [...drawCardPile]
|
||||||
//pull out last two elements from it
|
//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 two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//make a copy of drawCardPile array
|
||||||
const copiedDrawCardPileArray = [...drawCardPile]
|
const copiedDrawCardPileArray = [...drawCardPile]
|
||||||
//pull out last two elements from it
|
//pull out last two elements from it
|
||||||
@ -391,7 +377,6 @@ const Game = (props) => {
|
|||||||
|
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||||
@ -404,7 +389,6 @@ const Game = (props) => {
|
|||||||
else {
|
else {
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
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 two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//make a copy of drawCardPile array
|
||||||
const copiedDrawCardPileArray = [...drawCardPile]
|
const copiedDrawCardPileArray = [...drawCardPile]
|
||||||
//pull out last two elements from it
|
//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 two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//make a copy of drawCardPile array
|
||||||
const copiedDrawCardPileArray = [...drawCardPile]
|
const copiedDrawCardPileArray = [...drawCardPile]
|
||||||
//pull out last two elements from it
|
//pull out last two elements from it
|
||||||
@ -482,7 +466,6 @@ const Game = (props) => {
|
|||||||
|
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||||
@ -495,7 +478,6 @@ const Game = (props) => {
|
|||||||
else {
|
else {
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
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 two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//make a copy of drawCardPile array
|
||||||
const copiedDrawCardPileArray = [...drawCardPile]
|
const copiedDrawCardPileArray = [...drawCardPile]
|
||||||
//pull out last two elements from it
|
//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 two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//pull out last two elements from drawCardPile
|
||||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||||
@ -587,7 +569,6 @@ const Game = (props) => {
|
|||||||
|
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||||
@ -601,7 +582,6 @@ const Game = (props) => {
|
|||||||
else {
|
else {
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
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 two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//pull out last two elements from drawCardPile
|
||||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||||
@ -681,7 +661,7 @@ const Game = (props) => {
|
|||||||
//if two cards remaining check if player pressed UNO button
|
//if two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//pull out last two elements from drawCardPile
|
||||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||||
@ -692,7 +672,6 @@ const Game = (props) => {
|
|||||||
|
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
||||||
@ -706,7 +685,6 @@ const Game = (props) => {
|
|||||||
else {
|
else {
|
||||||
//send new state to server
|
//send new state to server
|
||||||
socket.emit('updateGameState', {
|
socket.emit('updateGameState', {
|
||||||
isUnoButtonPressed: false,
|
|
||||||
gameOver: checkGameOver(player1Deck),
|
gameOver: checkGameOver(player1Deck),
|
||||||
winner: checkWinner(player1Deck, 'Player 1'),
|
winner: checkWinner(player1Deck, 'Player 1'),
|
||||||
playedCardsPile: [...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)],
|
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 two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//pull out last two elements from drawCardPile
|
||||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||||
@ -787,7 +765,7 @@ const Game = (props) => {
|
|||||||
//if two cards remaining check if player pressed UNO button
|
//if two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//make a copy of drawCardPile array
|
||||||
const copiedDrawCardPileArray = [...drawCardPile]
|
const copiedDrawCardPileArray = [...drawCardPile]
|
||||||
//pull out last two elements from it
|
//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 two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//make a copy of drawCardPile array
|
||||||
const copiedDrawCardPileArray = [...drawCardPile]
|
const copiedDrawCardPileArray = [...drawCardPile]
|
||||||
//pull out last two elements from it
|
//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 two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player1Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//pull out last two elements from drawCardPile
|
||||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||||
@ -956,7 +934,7 @@ const Game = (props) => {
|
|||||||
//if two cards remaining check if player pressed UNO button
|
//if two cards remaining check if player pressed UNO button
|
||||||
//if not pressed add 2 cards as penalty
|
//if not pressed add 2 cards as penalty
|
||||||
if(player2Deck.length===2 && !isUnoButtonPressed) {
|
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
|
//pull out last two elements from drawCardPile
|
||||||
const drawCard1X = copiedDrawCardPileArray.pop()
|
const drawCard1X = copiedDrawCardPileArray.pop()
|
||||||
const drawCard2X = copiedDrawCardPileArray.pop()
|
const drawCard2X = copiedDrawCardPileArray.pop()
|
||||||
@ -1189,13 +1167,12 @@ const Game = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='Game backgroundColor0'>
|
<div className={`Game backgroundColor${currentColor}`}>
|
||||||
{(!roomFull) ? <>
|
{(!roomFull) ? <>
|
||||||
|
|
||||||
<div className='topInfo'>
|
<div className='topInfo'>
|
||||||
<h1>Logo here</h1>
|
<img src={require('../assets/logo.png').default} />
|
||||||
<h1>Game Code: {room}</h1>
|
<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>
|
</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> }
|
||||||
@ -1207,10 +1184,11 @@ const Game = (props) => {
|
|||||||
{gameOver ? <div>{winner !== '' && <><h1>GAME OVER</h1><h2>{winner} wins!</h2></>}</div> :
|
{gameOver ? <div>{winner !== '' && <><h1>GAME OVER</h1><h2>{winner} wins!</h2></>}</div> :
|
||||||
<div>
|
<div>
|
||||||
{currentUser === 'Player 1' && <>
|
{currentUser === 'Player 1' && <>
|
||||||
<div className='waitingForPlayer'>
|
|
||||||
{turn==='Player 2' && <h1 className='topInfoText'>Waiting for Player 2 to play!</h1>}
|
{turn==='Player 2' && <h1>Waiting for Player 2 to play!</h1>}
|
||||||
</div>
|
|
||||||
<div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}>
|
<div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}>
|
||||||
|
<p className='playerDeckText'>Player 1</p>
|
||||||
{player1Deck.map((item, i) => (
|
{player1Deck.map((item, i) => (
|
||||||
<img
|
<img
|
||||||
key={i}
|
key={i}
|
||||||
@ -1228,10 +1206,11 @@ const Game = (props) => {
|
|||||||
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
|
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
|
||||||
/> }
|
/> }
|
||||||
<button disabled={turn !== 'Player 1'} onClick={onCardDrawnHandler}>DRAW CARD</button>
|
<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>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<div className='player2Deck' style={{pointerEvents: 'none'}}>
|
<div className='player2Deck' style={{pointerEvents: 'none'}}>
|
||||||
|
<p className='playerDeckText'>Player 2</p>
|
||||||
{player2Deck.map((item, i) => (
|
{player2Deck.map((item, i) => (
|
||||||
<img
|
<img
|
||||||
key={i}
|
key={i}
|
||||||
@ -1243,8 +1222,11 @@ const Game = (props) => {
|
|||||||
</div> </> }
|
</div> </> }
|
||||||
|
|
||||||
{currentUser === 'Player 2' && <>
|
{currentUser === 'Player 2' && <>
|
||||||
|
|
||||||
{turn==='Player 1' && <h1>Waiting for Player 1 to play!</h1>}
|
{turn==='Player 1' && <h1>Waiting for Player 1 to play!</h1>}
|
||||||
|
|
||||||
<div className='player1Deck' style={{pointerEvents: 'none'}}>
|
<div className='player1Deck' style={{pointerEvents: 'none'}}>
|
||||||
|
<p className='playerDeckText'>Player 1</p>
|
||||||
{player1Deck.map((item, i) => (
|
{player1Deck.map((item, i) => (
|
||||||
<img
|
<img
|
||||||
key={i}
|
key={i}
|
||||||
@ -1262,10 +1244,11 @@ const Game = (props) => {
|
|||||||
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
|
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
|
||||||
/> }
|
/> }
|
||||||
<button disabled={turn !== 'Player 2'} onClick={onCardDrawnHandler}>DRAW CARD</button>
|
<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>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
|
<div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
|
||||||
|
<p className='playerDeckText'>Player 2</p>
|
||||||
{player2Deck.map((item, i) => (
|
{player2Deck.map((item, i) => (
|
||||||
<img
|
<img
|
||||||
key={i}
|
key={i}
|
||||||
@ -1273,7 +1256,7 @@ const Game = (props) => {
|
|||||||
onClick={() => onCardPlayedHandler(item)}
|
onClick={() => onCardPlayedHandler(item)}
|
||||||
src={require(`../assets/cards-front/${item}.png`).default}
|
src={require(`../assets/cards-front/${item}.png`).default}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div> </> }
|
</div> </> }
|
||||||
</div> }
|
</div> }
|
||||||
|
|
||||||
|