From ba9115555c31b56a9c2f224ed4828bcaa1615293 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Tue, 5 Dec 2023 15:53:29 +0100 Subject: [PATCH] ajout du nouvelle affichage de joueur pendant la partie, ainsi que la gestion de cette derniere. de plus, gestion des noms trop grand pour celle ci :boom: --- .../src/Components/PersonStatus.tsx | 99 ++++++++++++++---- .../src/Components/PlayerList.tsx | 69 ++++++------ cryptide_project/src/Pages/InGame.css | 4 +- cryptide_project/src/Style/Global.css | 12 +++ cryptide_project/src/server/db/socialgraph.db | Bin 28672 -> 28672 bytes 5 files changed, 126 insertions(+), 58 deletions(-) diff --git a/cryptide_project/src/Components/PersonStatus.tsx b/cryptide_project/src/Components/PersonStatus.tsx index 4bf7415..54b2139 100644 --- a/cryptide_project/src/Components/PersonStatus.tsx +++ b/cryptide_project/src/Components/PersonStatus.tsx @@ -7,8 +7,14 @@ import { useTheme } from '../Style/ThemeContext'; /* Ressources */ import Person from '../res/img/Person.png' import BotImg from '../res/img/bot.png' -import { useGame } from '../Contexts/GameContext'; + +/* Model */ import Bot from '../model/Bot'; + +/* Context */ +import { useGame } from '../Contexts/GameContext'; +import { positionToColor } from '../ColorHelper'; + interface PlayerStatusProps { img: any state: any @@ -19,8 +25,9 @@ interface PlayerStatusProps { showCircle: boolean playerIndex: number askedWrong: boolean - } - let touchedPlayer = -1 +} + +let touchedPlayer = -1 //@ts-ignore const PersonStatus: React.FC = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle, playerIndex, askedWrong}) => { @@ -41,7 +48,7 @@ const PersonStatus: React.FC = ({img = Person, state= Person, useEffect(() => { if (playerIndex===index){ - setBuffer('solid 1px green') + setBuffer('solid 3px green') } else{ setBuffer('') @@ -52,31 +59,79 @@ const PersonStatus: React.FC = ({img = Person, state= Person, if (IsActualPlayer && !askedWrong){ setPlayerTouched(index) setTouchedPlayer(index) + //setIsClicked(!isClicked); } } + + //* Code pour le cercle + + //const [isClicked, setIsClicked] = useState(false); // État du bouton, par défaut false + const handleClick = () => { + onTouch(); + }; + const circleStyle: React.CSSProperties = { + backgroundColor: touchedPlayer == index && showCircle ? 'gold' : positionToColor(index), // Changement de la couleur en fonction de la condition + borderRadius: '50%', + width: '80px', + height: '80px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + position: 'relative', + objectFit: 'cover' + }; + + const circleStyleInt: React.CSSProperties = { + + backgroundColor:'white', + borderRadius: '50%', + width: '70px', + height: '70px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + position: 'relative', + objectFit: 'cover' + } + + const imageStyle: React.CSSProperties = { + borderRadius: '50%', + width: '60px', + height: '60px', + objectFit: 'cover', // image est ajustée pour couvrir le cercle + position: 'relative', + }; return ( -
-
onTouch()}> - player -
{name}
- - {IsActualPlayer && ( - (touchedPlayer == index && showCircle) ?( -
- state -
- ): showCircle && - ( -
- state -
- ) - )} - +
+ {/*
*/} +
handleClick()}> +
+ player +
+ {/*
*/} +
+
+
{actualPlayerIndex !== index ? (name.substring(0, name.length - 2).length > 7 ? name.substring(0, name.length - 2).substring(0, 7) + '...' : name) : 'vous'}
); } export default PersonStatus; + + + + +// {IsActualPlayer && ( +// (touchedPlayer == index && showCircle) ?( +//
+// state +//
+// ): showCircle && +// ( +//
+// state +//
+// ) +// )} \ No newline at end of file diff --git a/cryptide_project/src/Components/PlayerList.tsx b/cryptide_project/src/Components/PlayerList.tsx index 6d0da30..856d73d 100644 --- a/cryptide_project/src/Components/PlayerList.tsx +++ b/cryptide_project/src/Components/PlayerList.tsx @@ -29,23 +29,23 @@ const PlayerList: React.FC = ({ players, playerTouched, setPlay return (
-
+
{ //@ts-ignore players.map((player, index) => ( //player.id!=socket.id && + state={Person} + key={index} + name={player.pseudo + + " " + + positionToEmoji(index, true)} + playerTouched={playerTouched} + setPlayerTouched={setPlayerTouched} + index={index} + showCircle={true} + playerIndex={playerIndex} + askedWrong={askedWrong}/> )) }
@@ -56,28 +56,29 @@ const PlayerList: React.FC = ({ players, playerTouched, setPlay alignItems:"center", margin: 10 }}> - {(playerTouched == players.length) - ?( - - ): - ( - - ) - } + + {(playerTouched == players.length) + ?( + + ): + ( + + ) + }
diff --git a/cryptide_project/src/Pages/InGame.css b/cryptide_project/src/Pages/InGame.css index 81b99e3..c215dff 100644 --- a/cryptide_project/src/Pages/InGame.css +++ b/cryptide_project/src/Pages/InGame.css @@ -72,8 +72,8 @@ .playerlistDiv{ position: absolute; z-index: 1; - left: 10px; - top :50px; + left: 30px; + top : 30px; } .nbLaps{ /*nombre de tour*/ diff --git a/cryptide_project/src/Style/Global.css b/cryptide_project/src/Style/Global.css index 388b659..f97cf30 100644 --- a/cryptide_project/src/Style/Global.css +++ b/cryptide_project/src/Style/Global.css @@ -59,6 +59,16 @@ justify-content: center; } +.playerNameDisplay{ + display: flex; + align-items: center; + justify-content: center; + background-color:#fff; + border: solid 3px #0064E0; + border-radius: 15px; + width: 100%; +} + /**Form**/ .form-container { /* background-color: #D7D4C6; */ @@ -74,6 +84,8 @@ form{ columns: 2 auto; } + + /* LeaderBoard */ .LeaderBoardiv{ border: solid; diff --git a/cryptide_project/src/server/db/socialgraph.db b/cryptide_project/src/server/db/socialgraph.db index 9d9edd5cb064c69a20f6a3ba7d3bab72f0e4de64..b1d3383de7be3ace660bfabbbc2e2c75ed4f517a 100644 GIT binary patch delta 401 zcmZp8z}WDBae_4CE+EUqrLx&j;2&pwi8v<%uVW*tF(YGQ zRccX5Woc%9L1A%9T6#uSc1~`2MRHkEo{CYDilKpuk#}HNvTtZ$a7vb6glA>4p+{t> zerZuzkcn52uTe;me@U8glDC&*VwPS~NNKQPqHCmoxRHU8v96(!u7Rn7p^25TnU#^5 zuyB$X&{kQXt(zB1C9?AI^V>4;pWu(-f6w2-Z@XDQL7QJ*j@c29i^M0#=&#`5=TTzd zx8hOS%w-_PQb;=BwD z4E+3gli34gnfUWI3p#l4bFvGwF>r8jFp5tukMCvX=P#Jdo&c0B0LpqnWH~uGfwGnP F?EuyeZOH%t delta 148 zcmV;F0Biq%-~oW(0gxL3j*%Qg0gka?qz?lQ3YwD#5FN8IAa)9~ni^^a3=R)m01wCy zTo3OLgtHPLD-V&7A(LD$s0I!UWB?C3vkWj643UsT1wjOX1p$+-8a%V5JTDUg5|h&m&KvfTud2fe> CPbsbd