mirror of
https://github.com/mizanxali/uno-online
synced 2024-11-05 02:35:26 +00:00
Massive styling changes
This commit is contained in:
parent
23afc4cde3
commit
35285680d0
@ -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
BIN
client/src/assets/backgrounds/bg0.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 522 KiB |
BIN
client/src/assets/backgrounds/bg1.png
Normal file
BIN
client/src/assets/backgrounds/bg1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 297 KiB |
BIN
client/src/assets/backgrounds/bg2.png
Normal file
BIN
client/src/assets/backgrounds/bg2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 299 KiB |
BIN
client/src/assets/backgrounds/bg3.png
Normal file
BIN
client/src/assets/backgrounds/bg3.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 294 KiB |
BIN
client/src/assets/backgrounds/bg4.png
Normal file
BIN
client/src/assets/backgrounds/bg4.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 311 KiB |
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user