Massive styling changes

client/src/App.css

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

client/src/components/Game.js

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

client/src/index.css

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