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 = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, changecptTour, solo}) => { +const MyGraphComponent: React.FC = ({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 = ({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 = ({onNodeClick, handleS }) } + else { + if (firstlap){ + addToHistory("<----- [Tour " + 1 +"/"+networkData.nodes.length + "] ----->"); + firstlap = false; + } + } @@ -215,6 +223,7 @@ const MyGraphComponent: React.FC = ({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 = ({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 04bed07..654e21f 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 baf2d74..25bd894 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 */ @@ -53,6 +53,23 @@ const InGame = ({locale, changeLocale}) => { IsSolo=false } + //* Historique + const [history, setHistory] = useState([]); + + // 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}) => {
{showTurnBar && }
- +
@@ -144,7 +166,7 @@ const InGame = ({locale, changeLocale}) => { backgroundColor: theme.colors.tertiary, borderColor: theme.colors.secondary }}> - Tour : {cptTour} + Coups : {cptTour}
) : (
@@ -160,6 +182,12 @@ const InGame = ({locale, changeLocale}) => { ) } + +
+ {history.map((item, index) => ( +
{item}
+ ))} +