cryptide_project/src/Components/GraphContainer.tsx

@@ -27,6 +27,7 @@ interface MyGraphComponentProps {
   handleShowTurnBar: (shouldShowTurnBar: boolean) => void
   handleTurnBarTextChange: (newTurnBarText: string) => void
   changecptTour: (newcptTour : number) => void
+  addToHistory: (message : string) => void
   solo : boolean
 }
 
@@ -36,14 +37,14 @@ let first = true
 let askedWrong = false
 let cptTour: number = 0
 
-const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, changecptTour, solo}) => {
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, changecptTour, addToHistory, solo}) => {
 
   const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, onlyFalse, setOnlyFalseData } = useGame();
 
   const params = new URLSearchParams(window.location.search);
   
 
-
+  let firstlap = true;
   let playerIndex: number = turnPlayerIndex
   let index = 0
   for (let i=0; i<players.length; i++){
@@ -118,6 +119,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
           playerIndex = newPlayerIndex
           if (!node.label.includes(colorToEmoji(color, works))){
             networkData.nodes.update({id: id, label: node.label + colorToEmoji(color, works)})
+            addToHistory("qq1 à mis un " + colorToEmoji(color, works))
           }
           if (playerIndex === thisPlayerIndex){
             handleTurnBarTextChange("À vous de jouer")
@@ -182,6 +184,12 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         
       })
     }
+    else {
+      if (firstlap){
+        addToHistory("<----- [Tour " + 1  +"/"+networkData.nodes.length + "] ----->");
+        firstlap = false;
+      }
+    }
     
 
 
@@ -215,6 +223,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       
       if(params.nodes.length > 0){
         setNodeIdData(params.nodes[0])
+        // addToHistory("Le joueur a cliqué") //! TEST DEBUG
         if (!solo){
           if (askedWrong){
             const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0])
@@ -253,7 +262,12 @@ 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
+
+            //TODO METTRE LA WIN CONDITION ICI AVEC LE MERGE
             cptTour ++; // On Incrémente le nombre de tour du joueur
+            const tour = cptTour+1;
+            addToHistory("<----- [Tour " + tour  +"/"+networkData.nodes.length + "] ----->");
             changecptTour(cptTour); // On le transmet a la page précédente avec la fonction
           }
         }

cryptide_project/src/Pages/InGame.css

@@ -118,3 +118,24 @@
     columns: 2 auto;
     grid-row: 2;
 } */
+
+/** Historique*/
+
+.historique{
+    position: absolute;
+    z-index: 1;
+    bottom: 2%;
+    left: 2%;
+
+    display: flex;
+    flex-direction: column;
+    /* justify-content: end; */
+
+    padding: 15px 25px;
+    background-color: #d9d9d9;
+    border-radius: 15px;
+
+    height: 250px;
+    width: 20%;
+    overflow-y:auto;
+}

cryptide_project/src/Pages/InGame.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Switch from "react-switch";
 
 /* Style */
@@ -53,6 +53,23 @@ const InGame = ({locale, changeLocale}) => {
     IsSolo=false
   }
 
+  //* Historique
+  const [history, setHistory] = useState<string[]>([]);
+
+  // Fonction pour ajouter un élément à l'historique
+  const addToHistory = (message: string) => {
+    setHistory(prevHistory => [...prevHistory, message]);
+  };
+  
+  useEffect(() => {
+    const historyContainer = document.getElementById('history-container');
+    if (historyContainer) {
+      historyContainer.scrollTop = historyContainer.scrollHeight;
+    }
+  }, [history]);
+
+
+
 
   const [showChoiceBar, setShowChoiceBar] = useState(false);
   const [showTurnBar, setShowTurnBar] = useState(false);
@@ -135,7 +152,12 @@ const InGame = ({locale, changeLocale}) => {
       <div id="mainDiv">
         {showTurnBar && <TurnBar text={turnBarText}/>}
         <div id='graphDiv'>
-          <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} handleTurnBarTextChange={handleTurnBarTextChange} changecptTour={changecptTour} solo={IsSolo} />
+          <GraphContainer onNodeClick={handleNodeClick} 
+                          handleShowTurnBar={handleShowTurnBar} 
+                          handleTurnBarTextChange={handleTurnBarTextChange} 
+                          changecptTour={changecptTour} 
+                          addToHistory={addToHistory}
+                          solo={IsSolo} />
         </div>
 
 
@@ -144,7 +166,7 @@ const InGame = ({locale, changeLocale}) => {
                 backgroundColor: theme.colors.tertiary,
                 borderColor: theme.colors.secondary
             }}>
-              Tour : {cptTour}
+              Coups : {cptTour}
             </div>
           ) : (
             <div className='playerlistDiv'>
@@ -161,6 +183,12 @@ const InGame = ({locale, changeLocale}) => {
         }
         
         
+        <div className='historique' id="history-container">
+            {history.map((item, index) => (
+                <div key={index}>{item}</div>
+            ))}
+        </div>
+
         <div className='paramDiv'>
           <button className='button'
             style={{