From 0e88befa3e8e2d18cd98bca334cf5b15c72c1c6f Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Tue, 28 Nov 2023 15:07:41 +0100
Subject: [PATCH 1/2] gestion des la liste de player :zap:

---
 .../src/Components/PersonStatus.tsx           | 43 ++++++++++++-------
 .../src/Components/PlayerList.tsx             | 15 ++++++-
 cryptide_project/src/Pages/EndGame.tsx        |  2 +-
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/cryptide_project/src/Components/PersonStatus.tsx b/cryptide_project/src/Components/PersonStatus.tsx
index a66429d..c2902c8 100644
--- a/cryptide_project/src/Components/PersonStatus.tsx
+++ b/cryptide_project/src/Components/PersonStatus.tsx
@@ -17,11 +17,12 @@ interface PlayerStatusProps {
     setPlayerTouched: (newPlayerTouch: number) => void;
     playerTouched: number
     showCircle: boolean
+    IsActualPlayer : boolean
   }
   let touchedPlayer = -1
 
 //@ts-ignore
-const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle}) => {
+const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle, IsActualPlayer}) => {
     const theme=useTheme();
     const {players} = useGame()
     if (players[index] instanceof Bot){
@@ -32,22 +33,32 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
     useEffect(() =>{
         setTouchedPlayer(playerTouched)
     }, [playerTouched])
+
+    let isCurrentPlayer = true
+    let buffer = ''
+    if (isCurrentPlayer){
+        buffer = 'solid 1px green'
+    }
     return (
-        <div className='centerDivV' onClick={() => setPlayerTouched(index)}>
-            <img src={img} alt="player" height="60" width="60"/>
-            <h5>{name}</h5>
-            
-            {(touchedPlayer == index && showCircle) ?(
-                <div className='statusDiv' style={{ backgroundColor: "gold" }}>
-                    <img src={state} alt="state" height="30" width="30"/>
-                </div>
-            ): showCircle &&
-            (
-                <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
-                    <img src={state} alt="state" height="30" width="30"/>
-                </div>
-            )  }
-            
+        <div style={{border:buffer}}>
+            <div className='centerDivV' onClick={() => setPlayerTouched(index)}>
+                <img src={img} alt="player" height="60" width="60"/>
+                <h5>{name}</h5>      
+
+                {IsActualPlayer && (      
+                    (touchedPlayer == index && showCircle) ?(
+                        <div className='statusDiv' style={{ backgroundColor: "gold" }}>
+                            <img src={state} alt="state" height="30" width="30"/>
+                        </div>
+                    ): showCircle &&
+                    (
+                        <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
+                            <img src={state} alt="state" height="30" width="30"/>
+                        </div>
+                    )
+                )}
+                
+            </div>
         </div>
     );
 }
diff --git a/cryptide_project/src/Components/PlayerList.tsx b/cryptide_project/src/Components/PlayerList.tsx
index 3dc36d7..7018e3b 100644
--- a/cryptide_project/src/Components/PlayerList.tsx
+++ b/cryptide_project/src/Components/PlayerList.tsx
@@ -14,7 +14,7 @@ interface PlayerListProps {
     players: Player[];
     playerTouched: number
     setPlayerTouched: (newPlayerTouch: number) => void;
-  }
+}
 
 const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched}) => {
     const theme = useTheme();
@@ -25,7 +25,18 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                 {
                     //@ts-ignore
                     players.map((player, index) => (
-                        player.id!=socket.id && <PersonStatus img={player.profilePicture} state={Person} key={index} name={player.pseudo + " " + colorToEmoji(positionToColor(index), true)} playerTouched={playerTouched} setPlayerTouched={setPlayerTouched} index={index} showCircle={true}/>
+                        //player.id!=socket.id && 
+                        <PersonStatus img={player.profilePicture} 
+                                                    state={Person} 
+                                                    key={index} 
+                                                    name={player.pseudo 
+                                                    + " " + 
+                                                    colorToEmoji(positionToColor(index), true)} 
+                                                    playerTouched={playerTouched} 
+                                                    setPlayerTouched={setPlayerTouched} 
+                                                    index={index} 
+                                                    showCircle={true}
+                                                    IsActualPlayer={player.id!=socket.id}/>
                     ))
                 }
             </div>
diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx
index e695e8d..5d89576 100644
--- a/cryptide_project/src/Pages/EndGame.tsx
+++ b/cryptide_project/src/Pages/EndGame.tsx
@@ -98,7 +98,7 @@ function EndGame() {
                                 <div className="playerContainer" key={index}>
                                     {player.id !== winner?.id && (
                                         <div>
-                                            <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} showCircle={false}/>
+                                            <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} IsActualPlayer={false} showCircle={false}/>
                                             <h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
                                         </div>
                                     )}

From 213d8097f015cc2be3698704bd6c663dd74736f1 Mon Sep 17 00:00:00 2001
From: Thomas Chazot <tchazot63@gmail.com>
Date: Tue, 28 Nov 2023 15:51:43 +0100
Subject: [PATCH 2/2] =?UTF-8?q?joueur=20choisi=20affich=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Components/GraphContainer.tsx         | 10 ++++++-
 .../src/Components/PersonStatus.tsx           | 30 ++++++++++++++-----
 .../src/Components/PlayerList.tsx             |  5 ++--
 cryptide_project/src/Pages/EndGame.tsx        |  2 +-
 cryptide_project/src/Pages/InGame.tsx         | 11 +++++--
 5 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx
index 44c8aa5..4aa7d07 100644
--- a/cryptide_project/src/Components/GraphContainer.tsx
+++ b/cryptide_project/src/Components/GraphContainer.tsx
@@ -26,6 +26,7 @@ interface MyGraphComponentProps {
   isEasy: boolean
   setNetwork: (network: Network) => void
   showLast: boolean
+  setPlayerIndex: (playerIndex: number) => void
 }
 
 let lastAskingPlayer = 0
@@ -42,11 +43,12 @@ let cptHistory = 0
 let lastNodes: NodePerson[] = []
 let cptEndgame = 0
 let firstEnigme = true
+let firstIndex = true
 let endgame= false
 let firstHistory = true
 
 
-const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork}) => {
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setPlayerIndex}) => {
   let cptTour: number = 0
 
   //* Gestion du temps :
@@ -116,6 +118,11 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
   }, [showLast])
 
   let playerIndex: number = turnPlayerIndex
+
+  if (firstIndex){
+    firstIndex=false
+    setPlayerIndex(playerIndex)
+  }
   let index = 0
   for (let i=0; i<players.length; i++){
     if(players[i].id == socket.id){
@@ -340,6 +347,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         if (node!=undefined){
           onNodeClick(false)
           playerIndex = newPlayerIndex
+          setPlayerIndex(playerIndex)
           if (mapIndexPersons.get(askedIndex)?.find((p) => p.getId() == id) == undefined){
             const p = personNetwork.getPersons().find((p)=> p.getId() == id)
             const tab = mapIndexPersons.get(askedIndex)
diff --git a/cryptide_project/src/Components/PersonStatus.tsx b/cryptide_project/src/Components/PersonStatus.tsx
index c2902c8..8658aa2 100644
--- a/cryptide_project/src/Components/PersonStatus.tsx
+++ b/cryptide_project/src/Components/PersonStatus.tsx
@@ -17,31 +17,45 @@ interface PlayerStatusProps {
     setPlayerTouched: (newPlayerTouch: number) => void;
     playerTouched: number
     showCircle: boolean
-    IsActualPlayer : boolean
+    playerIndex: number
   }
   let touchedPlayer = -1
 
 //@ts-ignore
-const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle, IsActualPlayer}) => {
+const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle, playerIndex}) => {
     const theme=useTheme();
-    const {players} = useGame()
+    const {players, actualPlayerIndex} = useGame()
     if (players[index] instanceof Bot){
         img = BotImg
     }
 
+    const [buffer, setBuffer] = useState("")
+
     const [touchedPlayer, setTouchedPlayer] = useState(-2)
     useEffect(() =>{
         setTouchedPlayer(playerTouched)
     }, [playerTouched])
 
-    let isCurrentPlayer = true
-    let buffer = ''
-    if (isCurrentPlayer){
-        buffer = 'solid 1px green'
+    let IsActualPlayer = index != actualPlayerIndex
+
+    useEffect(() => {
+        if (playerIndex===index){
+            setBuffer('solid 1px green')
+        }
+        else{
+            setBuffer('')
+        }
+    }, [playerIndex])
+    
+    function onTouch(){
+        if (IsActualPlayer){
+            setPlayerTouched(index)
+        }
     }
+    
     return (
         <div style={{border:buffer}}>
-            <div className='centerDivV' onClick={() => setPlayerTouched(index)}>
+            <div className='centerDivV' onClick={() => onTouch()}>
                 <img src={img} alt="player" height="60" width="60"/>
                 <h5>{name}</h5>      
 
diff --git a/cryptide_project/src/Components/PlayerList.tsx b/cryptide_project/src/Components/PlayerList.tsx
index 7018e3b..52e6f2d 100644
--- a/cryptide_project/src/Components/PlayerList.tsx
+++ b/cryptide_project/src/Components/PlayerList.tsx
@@ -14,9 +14,10 @@ interface PlayerListProps {
     players: Player[];
     playerTouched: number
     setPlayerTouched: (newPlayerTouch: number) => void;
+    playerIndex: number
 }
 
-const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched}) => {
+const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched, playerIndex}) => {
     const theme = useTheme();
 
     return (
@@ -36,7 +37,7 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                                                     setPlayerTouched={setPlayerTouched} 
                                                     index={index} 
                                                     showCircle={true}
-                                                    IsActualPlayer={player.id!=socket.id}/>
+                                                    playerIndex={playerIndex}/>
                     ))
                 }
             </div>
diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx
index 5d89576..1c24b76 100644
--- a/cryptide_project/src/Pages/EndGame.tsx
+++ b/cryptide_project/src/Pages/EndGame.tsx
@@ -98,7 +98,7 @@ function EndGame() {
                                 <div className="playerContainer" key={index}>
                                     {player.id !== winner?.id && (
                                         <div>
-                                            <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} IsActualPlayer={false} showCircle={false}/>
+                                            <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} playerIndex={-2} showCircle={false}/>
                                             <h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
                                         </div>
                                     )}
diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx
index a93af7a..7d1c015 100644
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/cryptide_project/src/Pages/InGame.tsx
@@ -102,6 +102,8 @@ const InGame = ({locale, changeLocale}) => {
   const [showTurnBar, setShowTurnBar] = useState(false);
   const [turnBarText, setTurnBarText] = useState("");
   const [playerTouched, setPlayerTouched] = useState(-2)
+  const [playerIndex, setPlayerIndex] = useState(-2)
+
 
   const [network, setNetwork] = useState<Network | null>(null)
 
@@ -126,6 +128,10 @@ const InGame = ({locale, changeLocale}) => {
     setTurnBarText(newTurnBarText)
   }
 
+  const setPlayerIndexData = (playerIndex: number) => {
+    setPlayerIndex(playerIndex)
+  }
+
   const generateTEX = () => {
     if (network != null && personNetwork != null && person != null){
       const tex = generateLatexCode(personNetwork, person, indices, network)
@@ -229,7 +235,8 @@ const InGame = ({locale, changeLocale}) => {
                           setPlayerTouched={handleSetPlayerTouched} 
                           playerTouched={playerTouched}
                           setNetwork={setNetworkData}
-                          showLast={showLast}/>
+                          showLast={showLast}
+                          setPlayerIndex={setPlayerIndexData}/>
         </div>
 
 
@@ -358,7 +365,7 @@ const InGame = ({locale, changeLocale}) => {
 
           { !IsSolo &&
             <div className='playerlistDiv'>
-              <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} />
+              <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex}/>
             </div>
           }