Styling updates

client/src/App.css

@@ -6,6 +6,7 @@ a {
   color: #ffffff;
 }
 
+/* Homepage */
 .Homepage {
   background-image: url('./assets/Landing-Page.gif');
   background-size: cover;
@@ -15,15 +16,38 @@ a {
 
 .homepage-menu {
   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 {
   background-size: cover;
   margin: 0;
   height: 100vh;
 }
 
+/* Game.js Background */
 .backgroundColorR {
   background-image: url('./assets/backgrounds/bgR.png');
 }
@@ -40,12 +64,14 @@ a {
   background-image: url('./assets/backgrounds/bgY.png');
 }
 
+/* UNO Cards */
 .Card {
   width: 6rem;
   margin: 2px;
   cursor: pointer;
 }
 
+/* Game.js Top Row */
 .topInfo {
   display: flex;
   flex-direction: row;
@@ -61,23 +87,17 @@ a {
 }
 
 .topInfo>h1 {
-  color: white;
   margin-top: 10px;
   font-size: 1.8rem;
   padding-top: 2%;
 }
 
 .topInfoText {
-  color: white;
   font-size: 2rem;
   margin: 0;
 }
-/* 
-.waitingForPlayer {
-  height: 80px;
-  font-size: 1.5rem;
-} */
 
+/* Player Decks */
 .player1Deck {
   display: flex;
   flex-direction: row;
@@ -109,7 +129,162 @@ a {
 }
 
 .playerDeckText {
-  color: white;
   font-size: 2rem;
   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;
+  }
+}

client/src/components/Game.js

@@ -4,6 +4,7 @@ import shuffleArray from '../utils/shuffleArray'
 import io from 'socket.io-client'
 import queryString from 'query-string'
 import { Redirect } from 'react-router-dom'
+import Spinner from './Spinner'
 
 //NUMBER CODES FOR ACTION CARDS
 //SKIP - 404
@@ -1167,7 +1168,7 @@ const Game = (props) => {
     }
     
     return (
-        <div className={`Game backgroundColor${currentColor}`}>
+        <div className={`Game backgroundColorR backgroundColor${currentColor}`}>
             {(!roomFull) ? <>
 
                 <div className='topInfo'>
@@ -1184,9 +1185,6 @@ const Game = (props) => {
                     {gameOver ? <div>{winner !== '' && <><h1>GAME OVER</h1><h2>{winner} wins!</h2></>}</div> :
                     <div>
                         {currentUser === 'Player 1' && <>    
-                        
-                        {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) => (
@@ -1199,14 +1197,14 @@ const Game = (props) => {
                             ))}
                         </div>
                         <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 &&
                             <img
                                 className='Card'
                                 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>
                         <br />
                         <div className='player2Deck' style={{pointerEvents: 'none'}}>
@@ -1219,12 +1217,10 @@ const Game = (props) => {
                                     src={require(`../assets/card-back.png`).default}
                                     />
                             ))}
+                            {turn==='Player 2' && <Spinner />}
                         </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) => (
@@ -1235,16 +1231,17 @@ const Game = (props) => {
                                     src={require(`../assets/card-back.png`).default}
                                     />
                             ))}
+                            {turn==='Player 1' && <Spinner />}
                         </div>
                         <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 &&
                             <img
                                 className='Card'
                                 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>
                         <br />
                         <div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
@@ -1259,13 +1256,11 @@ const Game = (props) => {
                             ))}
                         </div> </> }
                     </div> }
-
                 </> }
-
             </> : <h1>Room full</h1> }
 
             <br />
-            <a href='/'>Quit</a>
+            <a href='/'><button class="game-button red">QUIT</button></a>
         </div>
     )
 }

client/src/components/Homepage.js

@@ -8,11 +8,17 @@ const Homepage = () => {
     return (
         <div className='Homepage'>
             <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'>
-                <h1>OR</h1>
+                        <input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
-                <Link to={`/play?roomCode=${randomCodeGenerator(5)}`}><button>CREATE GAME</button></Link>
+                        <Link to={`/play?roomCode=${roomCode}`}><button class="game-button green">JOIN GAME</button></Link>
+                    </div>
+                    <h1>OR</h1>
+                    <div className='homepage-create'>
+                        <Link to={`/play?roomCode=${randomCodeGenerator(5)}`}><button class="game-button orange">CREATE GAME</button></Link>
+                    </div>
+                </div>
             </div>
         </div>
     )

client/src/components/Spinner.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Spinner = () => {
+    return (
+        <div className="loader">Loading...</div>
+    )
+}
+
+export default Spinner

client/src/index.css

@@ -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;
@@ -7,7 +7,8 @@
 
 body {
   margin: 0;
-  font-family: 'Montserrat', sans-serif;
+  font-family: 'Carter One', sans-serif;
+  color: white;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }