From 5d91c8c499ee3c08c459040b082e62cb1dafb03e Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Wed, 15 Nov 2023 14:18:36 +0100
Subject: [PATCH] ajout de l'historique, en attente du merge pour pouvoir
 continuer les ajout dans les logs et la fusion avec la liste de joueur.
 :loud_sound:

---
 .../src/Components/GraphContainer.tsx         | 18 ++++++++--
 cryptide_project/src/Pages/InGame.css         | 23 ++++++++++++-
 cryptide_project/src/Pages/InGame.tsx         | 34 +++++++++++++++++--
 3 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx
index 797c788..dea0531 100644
--- a/cryptide_project/src/Components/GraphContainer.tsx
+++ b/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
           }
         }
diff --git a/cryptide_project/src/Pages/InGame.css b/cryptide_project/src/Pages/InGame.css
index 600710e..e7d8652 100644
--- a/cryptide_project/src/Pages/InGame.css
+++ b/cryptide_project/src/Pages/InGame.css
@@ -117,4 +117,25 @@
 /* #playerCanvasBody{
     columns: 2 auto;
     grid-row: 2;
-} */
\ No newline at end of file
+} */
+
+/** 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;
+}
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx
index 8a90482..1129b4c 100644
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/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 */
@@ -50,6 +50,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);
@@ -132,7 +149,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>
 
 
@@ -141,7 +163,7 @@ const InGame = ({locale, changeLocale}) => {
                 backgroundColor: theme.colors.primary,
                 borderColor: theme.colors.secondary
             }}>
-              Tour : {cptTour}
+              Coups : {cptTour}
             </div>
           ) : (
             <div className='playerlistDiv'>
@@ -157,6 +179,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'