Github/uno-online
1
0
Fork 1
mirror of https://github.com/mizanxali/uno-online synced 2024-12-25 18:42:56 +00:00
Code Issues Projects Releases Wiki Activity

Massive styling changes

Browse Source
This commit is contained in:
Mizanali Panjwani 2021-02-24 01:08:02 +05:30
parent 23afc4cde3
commit 35285680d0
8 changed files with 158 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
client/src/App.css
View File

@ -2,9 +2,109 @@
text-align: center;
}
.card {
border: 1px solid black;
padding: 20px;
margin: 20px;
a {
color: white;
}
.Game {
background-size: cover;
margin: 0;
height: 100vh;
}
.backgroundColor0 {
background-image: url('./assets/backgrounds/bg0.png');
}
.backgroundColor1 {
background-image: url('./assets/backgrounds/bg1.png');
}
.backgroundColor2 {
background-image: url('./assets/backgrounds/bg2.png');
}
.backgroundColor3 {
background-image: url('./assets/backgrounds/bg3.png');
}
.backgroundColor4 {
background-image: url('./assets/backgrounds/bg4.png');
}
.Card {
width: 6rem;
margin: 2px;
cursor: pointer;
}
.topInfo {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 60px;
}
.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;
}
.topInfoText {
color: white;
font-size: 2rem;
margin: 0;
}
.waitingForPlayer {
height: 80px;
font-size: 1.5rem;
}
.player1Deck>img {
transition: transform 350ms;
}
.player1Deck>img:hover {
transform: scale(1.08);
opacity: 1;
}
.player2Deck>img {
transition: transform 350ms;
}
.player2Deck>img:hover {
transform: scale(1.08);
opacity: 1;
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 522 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 299 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 294 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 KiB

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

@ -31,7 +31,6 @@ const Game = (props) => {
"transports" : ["websocket"]
}
socket = io.connect(ENDPOINT, connectionOptions)
console.log(socket);
socket.emit('join', {room: room}, (error) => {
if(error)
@ -143,7 +142,18 @@ const Game = (props) => {
const checkWinner = (arr, 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
const onCardPlayedHandler = (played_card) => {
//extract player who played the card
const cardPlayedBy = turn
@ -703,91 +713,99 @@ const Game = (props) => {
}
return (
<>
<div className='Game backgroundColor0'>
{(!roomFull) ? <>
<h1>Game Code: {room}</h1>
{users.length===1 && currentUser === 'Player 2' && <h1>Player 1 has left the game</h1> }
<div className='topInfo'>
<h1>Logo here</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>
{users.length===1 && currentUser === 'Player 1' && <h1>Waiting for Player 2</h1> }
{users.length===1 && currentUser === 'Player 2' && <h1 className='topInfoText'>Player 1 has left the game.</h1> }
{users.length===1 && currentUser === 'Player 1' && <h1 className='topInfoText'>Waiting for Player 2 to join the game.</h1> }
{users.length===2 && <>
{gameOver ? <div>{winner !== '' && <><h1>GAME OVER</h1><h2>{winner} wins!</h2></>}</div> :
<div className='Game'>
<h1>Turn: {turn}</h1>
<div>
{currentUser === 'Player 1' && <>
<div className='waitingForPlayer'>
{turn==='Player 2' && <h1 className='topInfoText'>Waiting for Player 2 to play!</h1>}
</div>
<div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}>
{player1Deck.map((item) => (
{player1Deck.map((item, i) => (
<img
key={i}
className='Card'
onClick={() => onCardPlayedHandler(item)}
src={require(`../assets/cards-front/${item}.png`).default}
width='100px'
/>
))}
<button onClick={onCardDrawnHandler}>DRAW CARD</button>
</div>
<hr />
<br />
<div>
{playedCardsPile && playedCardsPile.length>0 &&
<img
className='Card'
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
width='100px'
/> }
<button disabled={turn !== 'Player 1'} onClick={onCardDrawnHandler}>DRAW CARD</button>
</div>
<hr />
<br />
<div className='player2Deck' style={{pointerEvents: 'none'}}>
{player2Deck.map((item) => (
{player2Deck.map((item, i) => (
<img
key={i}
className='Card'
onClick={() => onCardPlayedHandler(item)}
src={require(`../assets/card-back.png`).default}
width='100px'
/>
))}
<button onClick={onCardDrawnHandler}>DRAW CARD</button>
</div> </> }
{currentUser === 'Player 2' && <>
{turn==='Player 1' && <h1>Waiting for Player 1 to play!</h1>}
<div className='player1Deck' style={{pointerEvents: 'none'}}>
{player1Deck.map((item) => (
{player1Deck.map((item, i) => (
<img
key={i}
className='Card'
onClick={() => onCardPlayedHandler(item)}
src={require(`../assets/card-back.png`).default}
width='100px'
/>
))}
<button onClick={onCardDrawnHandler}>DRAW CARD</button>
</div>
<hr />
<br />
<div>
{playedCardsPile && playedCardsPile.length>0 &&
<img
className='Card'
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
width='100px'
/> }
<button disabled={turn !== 'Player 2'} onClick={onCardDrawnHandler}>DRAW CARD</button>
</div>
<hr />
<br />
<div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
{player2Deck.map((item) => (
{player2Deck.map((item, i) => (
<img
key={i}
className='Card'
onClick={() => onCardPlayedHandler(item)}
src={require(`../assets/cards-front/${item}.png`).default}
width='100px'
/>
))}
<button onClick={onCardDrawnHandler}>DRAW CARD</button>
))}
</div> </> }
</div> }
</> }
</> : <h1>Room full</h1> }
</> : <h1 style={{margin: '0'}}>Room full</h1> }
<hr />
<a href='/'>Home</a>
</>
<br />
<a href='/'>Forfeit Game</a>
</div>
)
}

11
client/src/index.css
View File

@ -1,13 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500;1,600&display=swap');
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}