Github
/
uno-online
mirror of https://github.com/mizanxali/uno-online
1
0
Fork 1
Code Issues Projects Releases Wiki Activity

Styling updates

This commit is contained in:
Mizanali Panjwani 2021-02-25 13:53:36 +05:30
parent eacd8e0001
commit 11055dff55
12 changed files with 67 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
client/src/App.css
View File

@ -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;
}

BIN
client/src/assets/backgrounds/bg0.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 522 KiB

BIN
client/src/assets/backgrounds/bg1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 297 KiB

BIN
client/src/assets/backgrounds/bg2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 299 KiB

BIN
client/src/assets/backgrounds/bg3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 294 KiB

BIN
client/src/assets/backgrounds/bg4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 311 KiB

BIN
client/src/assets/backgrounds/bgB.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 KiB

BIN
client/src/assets/backgrounds/bgG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 617 KiB

BIN
client/src/assets/backgrounds/bgR.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 514 KiB

BIN
client/src/assets/backgrounds/bgY.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 738 KiB

BIN
client/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

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

@ -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> }