mirror of
https://github.com/mizanxali/uno-online
synced 2024-11-05 10:45:25 +00:00
Styling updates
This commit is contained in:
parent
11055dff55
commit
1131849648
@ -6,6 +6,7 @@ a {
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Homepage */
|
||||||
.Homepage {
|
.Homepage {
|
||||||
background-image: url('./assets/Landing-Page.gif');
|
background-image: url('./assets/Landing-Page.gif');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
@ -15,15 +16,38 @@ a {
|
|||||||
|
|
||||||
.homepage-menu {
|
.homepage-menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 100px;
|
top: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.homepage-form {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homepage-form>h1 {
|
||||||
|
margin: 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homepage-join {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homepage-join>input {
|
||||||
|
font-size: 15px;
|
||||||
|
width: 150px;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Game.js parent div */
|
||||||
.Game {
|
.Game {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Game.js Background */
|
||||||
.backgroundColorR {
|
.backgroundColorR {
|
||||||
background-image: url('./assets/backgrounds/bgR.png');
|
background-image: url('./assets/backgrounds/bgR.png');
|
||||||
}
|
}
|
||||||
@ -40,12 +64,14 @@ a {
|
|||||||
background-image: url('./assets/backgrounds/bgY.png');
|
background-image: url('./assets/backgrounds/bgY.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* UNO Cards */
|
||||||
.Card {
|
.Card {
|
||||||
width: 6rem;
|
width: 6rem;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Game.js Top Row */
|
||||||
.topInfo {
|
.topInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -61,23 +87,17 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.topInfo>h1 {
|
.topInfo>h1 {
|
||||||
color: white;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
padding-top: 2%;
|
padding-top: 2%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topInfoText {
|
.topInfoText {
|
||||||
color: white;
|
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
.waitingForPlayer {
|
|
||||||
height: 80px;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
} */
|
|
||||||
|
|
||||||
|
/* Player Decks */
|
||||||
.player1Deck {
|
.player1Deck {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -109,7 +129,162 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.playerDeckText {
|
.playerDeckText {
|
||||||
color: white;
|
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
margin: 0 20px;
|
margin: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Game.js Middle Row */
|
||||||
|
.middleInfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middleInfo>button {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Game Buttons */
|
||||||
|
.game-button {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none !important;
|
||||||
|
outline: none !important;
|
||||||
|
font-family: 'Carter One', sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.5em;
|
||||||
|
letter-spacing: .1em;
|
||||||
|
text-shadow: 2px 2px 1px #0066a2, -2px 2px 1px #0066a2, 2px -2px 1px #0066a2, -2px -2px 1px #0066a2, 0px 2px 1px #0066a2, 0px -2px 1px #0066a2, 0px 4px 1px #004a87, 2px 4px 1px #004a87, -2px 4px 1px #004a87;
|
||||||
|
border: none;
|
||||||
|
margin: 15px 15px 30px;
|
||||||
|
background: repeating-linear-gradient( 45deg, #3ebbf7, #3ebbf7 5px, #45b1f4 5px, #45b1f4 10px);
|
||||||
|
border-bottom: 3px solid rgba(16, 91, 146, 0.5);
|
||||||
|
border-top: 3px solid rgba(255,255,255,.3);
|
||||||
|
color: #fff !important;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 15px 10px;
|
||||||
|
box-shadow: 0 6px 0 #266b91, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #12517d, 0 12px 0 5px #1a6b9a, 0 15px 0 5px #0c405e, 0 15px 1px 6px rgba(0,0,0,.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-button:hover {
|
||||||
|
top:2px;
|
||||||
|
box-shadow: 0 4px 0 #266b91, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #12517d, 0 10px 0 5px #1a6b9a, 0 13px 0 5px #0c405e, 0 13px 1px 6px rgba(0,0,0,.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-button::before {
|
||||||
|
content: '';
|
||||||
|
height: 10%;
|
||||||
|
position: absolute;
|
||||||
|
width: 40%;
|
||||||
|
background: #fff;
|
||||||
|
right: 13%;
|
||||||
|
top: -3%;
|
||||||
|
border-radius: 99px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-button::after {
|
||||||
|
content: '';
|
||||||
|
height: 10%;
|
||||||
|
position: absolute;
|
||||||
|
width: 5%;
|
||||||
|
background: #fff;
|
||||||
|
right: 5%;
|
||||||
|
top: -3%;
|
||||||
|
border-radius: 99px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-button.orange {
|
||||||
|
background: repeating-linear-gradient( 45deg, #ffc800, #ffc800 5px, #ffc200 5px, #ffc200 10px);
|
||||||
|
box-shadow: 0 6px 0 #b76113, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #75421f, 0 12px 0 5px #8a542b, 0 15px 0 5px #593116, 0 15px 1px 6px rgba(0,0,0,.3);
|
||||||
|
border-bottom: 3px solid rgba(205, 102, 0, 0.5);
|
||||||
|
text-shadow: 2px 2px 1px #e78700, -2px 2px 1px #e78700, 2px -2px 1px #e78700, -2px -2px 1px #e78700, 0px 2px 1px #e78700, 0px -2px 1px #e78700, 0px 4px 1px #c96100, 2px 4px 1px #c96100, -2px 4px 1px #c96100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-button.orange:hover {
|
||||||
|
top:2px;
|
||||||
|
box-shadow: 0 4px 0 #b76113, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #75421f, 0 10px 0 5px #8a542b, 0 13px 0 5px #593116, 0 13px 1px 6px rgba(0,0,0,.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-button.red {
|
||||||
|
background: repeating-linear-gradient( 45deg, #ff4f4c, #ff4f4c 5px, #ff4643 5px, #ff4643 10px);
|
||||||
|
box-shadow: 0 6px 0 #ae2725, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #831614, 0 12px 0 5px #a33634, 0 15px 0 5px #631716, 0 15px 1px 6px rgba(0,0,0,.3);
|
||||||
|
border-bottom: 3px solid rgba(160, 25, 23, 0.5);
|
||||||
|
text-shadow: 2px 2px 1px #d72d21, -2px 2px 1px #d72d21, 2px -2px 1px #d72d21, -2px -2px 1px #d72d21, 0px 2px 1px #d72d21, 0px -2px 1px #d72d21, 0px 4px 1px #930704, 2px 4px 1px #930704, -2px 4px 1px #930704;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-button.red:hover {
|
||||||
|
top:2px;
|
||||||
|
box-shadow: 0 4px 0 #ae2725, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #831614, 0 10px 0 5px #a33634, 0 13px 0 5px #631716, 0 13px 1px 6px rgba(0,0,0,.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-button.green {
|
||||||
|
background: repeating-linear-gradient( 45deg, #54d440, #54d440 5px, #52cc3f 5px, #52cc3f 10px);
|
||||||
|
box-shadow: 0 6px 0 #348628, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #2a6d20, 0 12px 0 5px #39822e, 0 15px 0 5px #1d4c16, 0 15px 1px 6px rgba(0,0,0,.3);
|
||||||
|
border-bottom: 3px solid rgba(40, 117, 29, 0.5);
|
||||||
|
text-shadow: 2px 2px 1px #348628, -2px 2px 1px #348628, 2px -2px 1px #348628, -2px -2px 1px #348628, 0px 2px 1px #348628, 0px -2px 1px #348628, 0px 4px 1px #1d4c16, 2px 4px 1px #1d4c16, -2px 4px 1px #1d4c16;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-button.green:hover {
|
||||||
|
top:2px;
|
||||||
|
box-shadow: 0 4px 0 #348628, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #2a6d20, 0 10px 0 5px #39822e, 0 13px 0 5px #1d4c16, 0 13px 1px 6px rgba(0,0,0,.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Spinner */
|
||||||
|
.loader,
|
||||||
|
.loader:before,
|
||||||
|
.loader:after {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 2.5em;
|
||||||
|
height: 2.5em;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
-webkit-animation: load7 1.8s infinite ease-in-out;
|
||||||
|
animation: load7 1.8s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
.loader {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 5px;
|
||||||
|
margin: 0 50px 0 50px;
|
||||||
|
position: relative;
|
||||||
|
text-indent: -9999em;
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
-ms-transform: translateZ(0);
|
||||||
|
transform: translateZ(0);
|
||||||
|
-webkit-animation-delay: -0.16s;
|
||||||
|
animation-delay: -0.16s;
|
||||||
|
}
|
||||||
|
.loader:before,
|
||||||
|
.loader:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.loader:before {
|
||||||
|
left: -3.5em;
|
||||||
|
-webkit-animation-delay: -0.32s;
|
||||||
|
animation-delay: -0.32s;
|
||||||
|
}
|
||||||
|
.loader:after {
|
||||||
|
left: 3.5em;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes load7 {
|
||||||
|
0%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 2.5em 0 -1.3em;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
box-shadow: 0 2.5em 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes load7 {
|
||||||
|
0%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 2.5em 0 -1.3em;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
box-shadow: 0 2.5em 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -4,6 +4,7 @@ import shuffleArray from '../utils/shuffleArray'
|
|||||||
import io from 'socket.io-client'
|
import io from 'socket.io-client'
|
||||||
import queryString from 'query-string'
|
import queryString from 'query-string'
|
||||||
import { Redirect } from 'react-router-dom'
|
import { Redirect } from 'react-router-dom'
|
||||||
|
import Spinner from './Spinner'
|
||||||
|
|
||||||
//NUMBER CODES FOR ACTION CARDS
|
//NUMBER CODES FOR ACTION CARDS
|
||||||
//SKIP - 404
|
//SKIP - 404
|
||||||
@ -1167,7 +1168,7 @@ const Game = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`Game backgroundColor${currentColor}`}>
|
<div className={`Game backgroundColorR backgroundColor${currentColor}`}>
|
||||||
{(!roomFull) ? <>
|
{(!roomFull) ? <>
|
||||||
|
|
||||||
<div className='topInfo'>
|
<div className='topInfo'>
|
||||||
@ -1184,9 +1185,6 @@ 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' && <>
|
||||||
|
|
||||||
{turn==='Player 2' && <h1>Waiting for Player 2 to play!</h1>}
|
|
||||||
|
|
||||||
<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>
|
<p className='playerDeckText'>Player 1</p>
|
||||||
{player1Deck.map((item, i) => (
|
{player1Deck.map((item, i) => (
|
||||||
@ -1199,14 +1197,14 @@ const Game = (props) => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<div>
|
<div className='middleInfo' style={turn === 'Player 2' ? {pointerEvents: 'none'} : null}>
|
||||||
|
<button className='game-button' disabled={turn !== 'Player 1'} onClick={onCardDrawnHandler}>DRAW CARD</button>
|
||||||
{playedCardsPile && playedCardsPile.length>0 &&
|
{playedCardsPile && playedCardsPile.length>0 &&
|
||||||
<img
|
<img
|
||||||
className='Card'
|
className='Card'
|
||||||
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 className='game-button orange' disabled={turn !== 'Player 1'} 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'}}>
|
||||||
@ -1219,12 +1217,10 @@ const Game = (props) => {
|
|||||||
src={require(`../assets/card-back.png`).default}
|
src={require(`../assets/card-back.png`).default}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
{turn==='Player 2' && <Spinner />}
|
||||||
</div> </> }
|
</div> </> }
|
||||||
|
|
||||||
{currentUser === 'Player 2' && <>
|
{currentUser === 'Player 2' && <>
|
||||||
|
|
||||||
{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>
|
<p className='playerDeckText'>Player 1</p>
|
||||||
{player1Deck.map((item, i) => (
|
{player1Deck.map((item, i) => (
|
||||||
@ -1235,16 +1231,17 @@ const Game = (props) => {
|
|||||||
src={require(`../assets/card-back.png`).default}
|
src={require(`../assets/card-back.png`).default}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
{turn==='Player 1' && <Spinner />}
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<div>
|
<div className='middleInfo' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
|
||||||
|
<button className='game-button' disabled={turn !== 'Player 2'} onClick={onCardDrawnHandler}>DRAW CARD</button>
|
||||||
{playedCardsPile && playedCardsPile.length>0 &&
|
{playedCardsPile && playedCardsPile.length>0 &&
|
||||||
<img
|
<img
|
||||||
className='Card'
|
className='Card'
|
||||||
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 className='game-button orange' disabled={turn !== 'Player 2'} 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}>
|
||||||
@ -1259,13 +1256,11 @@ const Game = (props) => {
|
|||||||
))}
|
))}
|
||||||
</div> </> }
|
</div> </> }
|
||||||
</div> }
|
</div> }
|
||||||
|
|
||||||
</> }
|
</> }
|
||||||
|
|
||||||
</> : <h1>Room full</h1> }
|
</> : <h1>Room full</h1> }
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
<a href='/'>Quit</a>
|
<a href='/'><button class="game-button red">QUIT</button></a>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -8,11 +8,17 @@ const Homepage = () => {
|
|||||||
return (
|
return (
|
||||||
<div className='Homepage'>
|
<div className='Homepage'>
|
||||||
<div className='homepage-menu'>
|
<div className='homepage-menu'>
|
||||||
<h1>UNO</h1>
|
<img src={require('../assets/logo.png').default} width='200px' />
|
||||||
<div><input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} /></div>
|
<div className='homepage-form'>
|
||||||
<Link to={`/play?roomCode=${roomCode}`}><button>JOIN GAME</button></Link>
|
<div className='homepage-join'>
|
||||||
|
<input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
|
||||||
|
<Link to={`/play?roomCode=${roomCode}`}><button class="game-button green">JOIN GAME</button></Link>
|
||||||
|
</div>
|
||||||
<h1>OR</h1>
|
<h1>OR</h1>
|
||||||
<Link to={`/play?roomCode=${randomCodeGenerator(5)}`}><button>CREATE GAME</button></Link>
|
<div className='homepage-create'>
|
||||||
|
<Link to={`/play?roomCode=${randomCodeGenerator(5)}`}><button class="game-button orange">CREATE GAME</button></Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
9
client/src/components/Spinner.js
Normal file
9
client/src/components/Spinner.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const Spinner = () => {
|
||||||
|
return (
|
||||||
|
<div className="loader">Loading...</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Spinner
|
@ -1,4 +1,4 @@
|
|||||||
@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');
|
@import url('https://fonts.googleapis.com/css?family=Carter+One');
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -7,7 +7,8 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: 'Montserrat', sans-serif;
|
font-family: 'Carter One', sans-serif;
|
||||||
|
color: white;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user