Merge pull request #26 from Gui25Reis/feat/game-room

Added new Features
Gui25Reis · Nov 19, 2021 · dd75529 · dd75529
2 parents 6161867 + 8a0f150
commit dd75529
Show file tree

Hide file tree

Showing 29 changed files with 488 additions and 1,075 deletions.
diff --git a/src/assets/Background/fundo.svg b/src/assets/Background/fundo.svg
diff --git a/src/assets/cardBack.png b/src/assets/cardBack.png
diff --git a/src/assets/catapimba.png b/src/assets/catapimba.png
diff --git a/src/assets/mesa.svg b/src/assets/mesa.svg
diff --git a/src/components/MiniCard.js b/src/components/MiniCard.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import '../styles/minicard.css';
+import '../sass/app.css'
 
 const MiniCard = (props) => {
     return(

diff --git a/src/components/card.js b/src/components/card.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import '../styles/card.css';
+import '../sass/app.css'
 
 const Card = (props) => {
     return(

diff --git a/src/components/player.js b/src/components/player.js
@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 
-import '../styles/player.css';
+import '../sass/app.css'
 import playerCard from '../assets/Usuario/Usuario.png';
+import cardBack from '../assets/cardBack.png';
 
 const Player = (props) => {
     const [numbers] = useState(Array(props.life).fill("❤️")) 
+    const [usePlayer] = useState(props.player)
 
     const listItems = () => {
         if(numbers.length === 0){
@@ -18,16 +20,51 @@ const Player = (props) => {
             <div className="playerslives" id="life">
                 {numbers.map((life, index) => <p key={index}> {life} </p>)} 
             </div>
-        );  
+        );
+    }
+
+    const playerOff = (param) => {
+        return(
+            <div className="playerOffline" >
+                {/* <p className="playerNameOff">{param.name}</p> */}
+                <div className="playerProfileOff" >
+                    <img 
+                        className="playerImageOff" 
+                        src={playerCard} 
+                        alt="imagem dos jogadores" 
+                        draggable="false"
+                    >
+                    </img>
+                </div>
+                {/* {listItems()} */}
+            </div>
+        )
+    }
+
+
+    const playerOn = (param) => {
+        return(
+            <div className="player" >
+                <p className="playerName">{param.name}</p>
+                <div className="playerProfile" >
+                    <img 
+                        className="playerImage" 
+                        src={playerCard} 
+                        alt="imagem dos jogadores" 
+                        draggable="false"
+                        style={param.host === true ? {borderColor: "#41d4b0"} : {borderColor: "#1c0c16"}}>
+                    </img>
+                    <div className="cardsNumbers">
+                        <img className="cardsBack" src={cardBack} alt="costas da carta" draggable="false"></img>
+                        <p>{param.cards === undefined ? "0" : param.cards}</p>
+                    </div>
+                </div>
+                {listItems()}
+            </div>
+        )
     }
     return (
-        <div className="player" >
-            <p>{props.name}</p>
-            <img src={playerCard} alt="imagem dos jogadores" draggable="false"></img>
-            {listItems()}
-
-        </div>
-
+        usePlayer ? playerOn(props) : playerOff(props)
     );
 }
 

diff --git a/src/game/Create.js b/src/game/Create.js
@@ -39,7 +39,7 @@ function Create() {
                     </div>
                 </div>
                 <div className="menuButtons">
-                    <Link to="/menu">
+                    <Link to="/">
                         <button className="back">Voltar</button>
                     </Link>
 

diff --git a/src/game/Menu.js b/src/game/Menu.js
@@ -6,7 +6,7 @@ import {
 } from 'react-router-dom';
 
 import '../sass/app.css'
-import "../styles/fonts.css";
+// import "../styles/fonts.css";
 
 const Menu = () => {
   const [isNameFocused, setIsNameFocused] = useState(false);
@@ -61,7 +61,7 @@ const Menu = () => {
         onBlur={handleInputBlur}
         onInput={handleInputChange}
         onKeyDownCapture={handleKeyDown}
-        style = {isNameFocused ? {backgroundColor: "#83bfe2"} : {}}
+        style = {isNameFocused ? {backgroundColor: '#e1c78e'} : {}}
       />
       <div id="rooms"> 
         <Link to="/create">
@@ -85,14 +85,14 @@ const Menu = () => {
             onBlur={handleInputBlur}
             onInput={handleInputChange}
             onKeyDownCapture={handleKeyDown}
-            style = {isCodeFocused ? {backgroundColor: "#83bfe2"} : {}}
+            style = {isCodeFocused ? {backgroundColor: "#e1c78e"} : {}}
           />
           <Link to={code === 5 && name > 0 ? "/game" : '#'}> 
             <input 
               type="submit"
               id = "pointerButton"
               value = "➜"
-              style = {code === 5 ? {cursor: 'pointer', color: "#000", fontWeight: "bold"} : {color: "#757575"}} 
+              style = {code === 5 ? {cursor: 'pointer', color: "#000", fontWeight: "#1c0c16"} : {color: "#757575"}} 
             > 
             </input>
           </Link>

diff --git a/src/game/game.js b/src/game/game.js
@@ -169,34 +169,34 @@ const Game = () => {
                 </div>          
 
                 <div id="player0">
-                   <Player name="NomeDoJogador" life={3} />
+                   <Player player={true} host={true} name="NomeDoJogador" life={3} cards="4" />
                 </div>
                 <div id="player1">
-                    <Player name="NomeDoJogador" life={3} />
+                    <Player player={true} name="NomeDoJogador" life={3} cards="5" />
                 </div>
                 <div id="player2">
-                    <Player name="NomeDoJogador" life={3} />
+                    <Player player={true} name="NomeDoJogador" life={3} cards="4" />
                 </div>
                 <div id="player3">
-                    <Player name="NomeDoJogador" life={3} />
+                    <Player player={true} name="NomeDoJogador" life={3} cards="4" />
                 </div>
                 <div id="player4">
-                    <Player name="NomeDoJogador" life={3} />
+                    <Player player={true} name="NomeDoJogador" life={3} cards="4" />
                 </div>
                 <div id="player5">
-                    <Player name="NomeDoJogador" life={3} />
+                    <Player player={true} name="NomeDoJogador" life={3} cards="4" />
                 </div>
                 <div id="player6">
-                    <Player name="NomeDoJogador" life={3} />
+                    <Player player={true} name="NomeDoJogador" life={3} cards="3" />
                 </div>        
                 <div id="player7">
-                    <Player name="NomeDoJogador" life={3} />
+                    <Player player={false} name="NomeDoJogador" life={3} cards="3" />
                 </div>
                 <div id="player8">
-                    <Player name="NomeDoJogador" life={3} />
+                    <Player player={true} name="NomeDoJogador" life={3} cards="4" />
                 </div>
                 <div id="player9">
-                   <Player name="NomeDoJogaddor" life={3} />
+                   <Player player={true} name="NomeDoJogaddor" life={3} cards="4" />
                 </div>
             </div>
 

diff --git a/src/index.js b/src/index.js
@@ -6,7 +6,7 @@ import {
   Route,
 } from 'react-router-dom';
 
-import './styles/index.css';
+// import './styles/index.css';
 
 import Create from './game/Create.js'
 import Menu from './game/Menu.js';