Merge branch 'demo_bourges' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into demo_bourges

cryptide_project/social_graph.sh

@@ -1,5 +1,6 @@
 #!/bin/sh 
 
+npm install --force
 
 if lsof -Pi :3000 -sTCP:LISTEN -t >/dev/null; then
   # Tuer le processus associé au port

cryptide_project/src/Components/GraphContainer.tsx

@@ -28,6 +28,7 @@ interface MyGraphComponentProps {
   isEasy: boolean
   setNetwork: (network: Network) => void
   showLast: boolean
+  setPlayerIndex: (playerIndex: number) => void
   setNetworkEnigme: (networkEnigme: Map<number, Pair<Indice, boolean>[]>) => void
 }
 
@@ -45,11 +46,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, setNetworkEnigme}) => {
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setPlayerIndex, setNetworkEnigme}) => {
   let cptTour: number = 0
 
   //* Gestion du temps :
@@ -119,6 +121,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){
@@ -348,6 +355,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)
@@ -579,7 +587,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         }
         if (a==indices.length){
           //networkData.nodes.update({id: p.getId(), label: p.getName() + "\n🔵"})
-          console.log(p)
+          //console.log(p)
         }
         
       });
@@ -749,7 +757,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
               }
               index++
             }
-            addToHistory(person.getName() + " n'est pas le tueur !"); //TODO préciser le nombre d'indice qu'il a de juste
+            addToHistory(person.getName() + " n'est pas le coupable !"); //TODO préciser le nombre d'indice qu'il a de juste
 
             cptTour ++; // On Incrémente le nombre de tour du joueur
             const tour = cptTour+1;

cryptide_project/src/Components/NavBar.tsx

@@ -32,9 +32,6 @@ function AppNavbar({changeLocale}) {
 
     const navigate = useNavigate();
 
-    useEffect(() => {
-        console.log(user)
-    }, [user])
 
     function navigateToProfile(){
         navigate("/profile")

cryptide_project/src/Components/PersonStatus.tsx

@@ -17,37 +17,62 @@ interface PlayerStatusProps {
     setPlayerTouched: (newPlayerTouch: number) => void;
     playerTouched: number
     showCircle: boolean
+    playerIndex: number
   }
   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, 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 IsActualPlayer = index != actualPlayerIndex
+
+    useEffect(() => {
+        if (playerIndex===index){
+            setBuffer('solid 1px green')
+        }
+        else{
+            setBuffer('')
+        }
+    }, [playerIndex])
+    
+    function onTouch(){
+        if (IsActualPlayer){
+            setPlayerTouched(index)
+        }
+    }
+    
     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={() => onTouch()}>
+                <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>
     );
 }

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 (
@@ -25,7 +26,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}
+                                                    playerIndex={playerIndex}/>
                     ))
                 }
             </div>

cryptide_project/src/Pages/EndGame.tsx

@@ -68,8 +68,6 @@ function EndGame() {
     }
     const theme = useTheme();
 
-    console.log(winner)
-    console.log(indices)
     return (
         <div>
             {!IsSolo ? (
@@ -77,7 +75,7 @@ function EndGame() {
                     <div className="head">
                         <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
                             <h1>{winner?.pseudo} a gagné !</h1>
-                            <h3>Le tueur était <u>{person?.getName()}</u></h3>
+                            <h3>Le coupable était <u>{person?.getName()}</u></h3>
                         </header>
                     </div>
                     <div className='winner'>
@@ -93,7 +91,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} playerIndex={-2} showCircle={false}/>
                                             <h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
                                         </div>
                                     )}
@@ -114,7 +112,7 @@ function EndGame() {
                 <div className="head">
                             <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
                                 <h1>Vous avez gagné !</h1>
-                                <h3>Le tueur était <u>{person?.getName()}</u></h3>
+                                <h3>Le coupable était <u>{person?.getName()}</u></h3>
                             </header>
                 </div>
                 <div className='winner'>

cryptide_project/src/Pages/Home.tsx

@@ -47,7 +47,7 @@ function Home() {
                 <h2>Introduction</h2>
                 <p>
                     {/* <FormattedMessage id="home.histoire" /> */}
-                    Bienvenue dans notre jeu de déduction captivant, où l'intrigue et la malice se rejoignent dans une aventure palpitante ! Plongez-vous dans un monde de mystère et d'intrigue, où chaque interaction compte, et chaque indice vous rapproche de la vérité.Imaginez un graphique complexe où chaque sommet représente une personne, chaque axe une relation, et chaque détail compte. Vous êtes plongé dans un défi stimulant pour découvrir qui parmi ces individus est le mystérieux tueur. Chaque joueur détient un indice crucial, et seul le partage stratégique de ces indices vous mènera à la résolution du mystère. Explorez notre page de règles pour comprendre les subtilités du jeu, découvrez les indices qui peuvent vous guider, et élaborez des stratégies intelligentes pour identifier le coupable. Manipuler vos amis, afin d'être le premier à découvrir qui est le meurtrier ! Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans le graphe ? Que l'enquête commence !
+                    Bienvenue dans notre jeu de déduction captivant, où l'intrigue et la malice se rejoignent dans une aventure palpitante ! Plongez-vous dans un monde de mystère et d'intrigue, où chaque interaction compte, et chaque indice vous rapproche de la vérité.Imaginez un graphique complexe où chaque sommet représente une personne, chaque axe une relation, et chaque détail compte. Vous êtes plongé dans un défi stimulant pour découvrir qui parmi ces individus est le mystérieux coupable. Chaque joueur détient un indice crucial, et seul le partage stratégique de ces indices vous mènera à la résolution du mystère. Explorez notre page de règles pour comprendre les subtilités du jeu, découvrez les indices qui peuvent vous guider, et élaborez des stratégies intelligentes pour identifier le coupable. Manipuler vos amis, afin d'être le premier à découvrir qui est le meurtrier ! Êtes-vous prêt à relever le défi et à démasquer le coupable caché dans le graphe ? Que l'enquête commence !
                 </p>
             </div>
             <div>

cryptide_project/src/Pages/InGame.tsx

@@ -107,6 +107,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)
   const [networkEnigme, setNetworkEnigme] = useState<Map<number, Pair<Indice, boolean>[]> | null>(null)
@@ -136,6 +138,10 @@ const InGame = ({locale, changeLocale}) => {
     setTurnBarText(newTurnBarText)
   }
 
+  const setPlayerIndexData = (playerIndex: number) => {
+    setPlayerIndex(playerIndex)
+  }
+
   const generateTEX = async () => {
     if (network != null && personNetwork != null && person != null){
 
@@ -266,7 +272,8 @@ const InGame = ({locale, changeLocale}) => {
                           playerTouched={playerTouched}
                           setNetwork={setNetworkData}
                           setNetworkEnigme={setNetworkEnigmeData}
-                          showLast={showLast}/>
+                          showLast={showLast}
+                          setPlayerIndex={setPlayerIndexData}/>
         </div>
 
 
@@ -395,7 +402,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>
           }
 

cryptide_project/src/Pages/Play.tsx

@@ -119,14 +119,12 @@ function Play() {
         socket.emit("lobby created")
     }
 
-    useEffect(() => {
-        console.log(user)
-    }, [user])
 
     function launchMastermind(){
         const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
+        console.log(networkPerson)
         setIndicesData(choosenIndices)
         setIndicesData(choosenIndices)
         navigate('/game?solo=true&daily=false');

cryptide_project/src/Pages/Profile.tsx

@@ -84,7 +84,6 @@ const Profile = () => {
     // Verification de la phrase
     if (confirmationPhrase.toLowerCase() === 'supprimer mon compte') {
       console.log('Compte supprimé !');
-      console.log(user);
 
       if(user!= null){
         const pseudo = user.pseudo;

cryptide_project/src/Script/LatexScript.tsx

@@ -124,7 +124,7 @@ function generateLatexCodeEnigme(personsNet : PersonNetwork, choosenPerson : Per
     latexCode+= "\\begin{tikzpicture}[scale=.18]\n"
     
     
-    personsNet.getPersons().forEach((person, index) => {
+    personsNet.getPersons().sort().forEach((person, index) => {
 
         var nodesData = network.getPositions();
         // Obtenir les coordonnées du nœud

cryptide_project/src/model/NetworkGenerator.ts

@@ -17,7 +17,7 @@ class NetworkGenerator{
 
         const tabPerson: Person[] = []
 
-        const tabNames = json.names
+        const tabNames = [...json.names]
 
         /*
         let id = 0