From 3fb5a514b28a15d34d817679a6438fde857033f1 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Wed, 29 Nov 2023 10:45:51 +0100
Subject: [PATCH] merge manuel de demo et master

---
 .../src/Components/GraphContainer.tsx         | 42 +++++---
 cryptide_project/src/Pages/InGame.tsx         |  9 +-
 cryptide_project/src/Pages/Lobby.css          | 25 +++++
 cryptide_project/src/Pages/Lobby.tsx          | 27 ++---
 cryptide_project/src/Pages/Play.tsx           | 99 ++++++++++++++++---
 5 files changed, 163 insertions(+), 39 deletions(-)

diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx
index ae976d7..83363af 100644
--- a/cryptide_project/src/Components/GraphContainer.tsx
+++ b/cryptide_project/src/Components/GraphContainer.tsx
@@ -25,6 +25,7 @@ interface MyGraphComponentProps {
   addToHistory: (message : string) => void
   solo : boolean
   isDaily : boolean
+  isEasy: boolean
   setNetwork: (network: Network) => void
   showLast: boolean
   setNetworkEnigme: (networkEnigme: Map<number, Pair<Indice, boolean>[]>) => void
@@ -45,9 +46,9 @@ let lastNodes: NodePerson[] = []
 let cptEndgame = 0
 let firstEnigme = true
 let endgame= false
+let firstHistory = true
 
-
-const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, addToHistory, showLast, setNetwork, setNetworkEnigme}) => {
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme}) => {
   let cptTour: number = 0
 
   //* Gestion du temps :
@@ -291,18 +292,28 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     setNetwork(network)
 
     if (isDaily){
-      setNetworkEnigme(dailyEnigme)
-      dailyEnigme.forEach((pairs, index) => {
-        pairs.forEach((pair) => {
-          const i = indices.findIndex((indice) => pair.first.getId() === indice.getId())
-          const node = networkData.nodes.get().find((n) => index == n.id)
-          if (node != undefined){
-            networkData.nodes.update({id: node.id, label: node.label + positionToEmoji(i, pair.second)})
-            const test = networkData.nodes.get().find((n) => index == n.id)
-          }
-        })
-      });
+      if(!isEasy){
+        // setNetworkEnigme(dailyEnigme)
+        dailyEnigme.forEach((pairs, index) => {
+          pairs.forEach((pair) => {
+            const i = indices.findIndex((indice) => pair.first.getId() === indice.getId())
+            const node = networkData.nodes.get().find((n) => index == n.id)
+            if (node != undefined){
+              networkData.nodes.update({id: node.id, label: node.label + positionToEmoji(i, pair.second)})
+              // const test = networkData.nodes.get().find((n) => index == n.id)
+            }
+          })
+        });
+      }
+      else{
+        if (firstHistory){
+          firstHistory=false
+          indices.forEach((indice, index) => {
+            addToHistory("Indice " + positionToEmoji(index, true) + " : " + indice.ToString("fr"))
+          })
+        }
     }
+  }
 
     socket.on("reset graph", () => {
       console.log("reset graph")
@@ -438,7 +449,9 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     else {
       if (firstLap){
         firstLap=false
-        addToHistory("<----- [Tour " + 1  +"/"+networkData.nodes.length + "] ----->");
+        if (!isDaily){
+          addToHistory("<----- [Tour " + 1  +"/"+networkData.nodes.length + "] ----->");
+        }
       }
     }
     
@@ -510,6 +523,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         askedWrong=false
         askedWrongBot=false
         endgame = true
+        firstHistory=true
   
         try{
           if(isLoggedIn){
diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx
index 7359bad..0880b27 100644
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/cryptide_project/src/Pages/InGame.tsx
@@ -72,6 +72,12 @@ const InGame = ({locale, changeLocale}) => {
     isDaily=false
   }
 
+  let isEasy: boolean = true
+  const isEasytmp = params.get('easy');
+  if (isEasytmp == "false"){
+    isEasy=false
+  }
+
   //* Historique
   const [history, setHistory] = useState<string[]>([]);
   const [showLast, setShowLast] = useState(false)
@@ -258,6 +264,7 @@ const InGame = ({locale, changeLocale}) => {
                           addToHistory={addToHistory}
                           solo={IsSolo} 
                           isDaily={isDaily} 
+                          isEasy={isEasy}
                           setPlayerTouched={handleSetPlayerTouched} 
                           playerTouched={playerTouched}
                           setNetwork={setNetworkData}
@@ -275,7 +282,7 @@ const InGame = ({locale, changeLocale}) => {
             </div>
         }
         
-        {!isDaily &&
+        {(!isDaily || (isDaily && isEasy)) &&
           <div className='historique' id="history-container">
               {history.map((item, index) => (
                   <div key={index}>{item}</div>
diff --git a/cryptide_project/src/Pages/Lobby.css b/cryptide_project/src/Pages/Lobby.css
index 0428a83..5fbe13c 100644
--- a/cryptide_project/src/Pages/Lobby.css
+++ b/cryptide_project/src/Pages/Lobby.css
@@ -69,4 +69,29 @@
 
 .lobbyR *{
     margin: 20px 10px;
+}
+
+.valuebutton{
+    border-radius: 90px;
+    width: 50px;
+    height: 50px;
+    background-color: #fff;
+}
+
+.nbNodeDiv{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    border: solid 2px whitesmoke;
+    border-radius: 15px;
+    
+    background-color: white;
+
+    width: 70%;
+}
+
+.nbNodeDiv div {
+    display: flex;
+    justify-content: center;
 }
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx
index 1bef7b7..25c8ab5 100644
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/cryptide_project/src/Pages/Lobby.tsx
@@ -273,20 +273,25 @@ function Lobby() {
                         )}
                     </Overlay>
 
-                <div>
-                    <label htmlFor="numberInput">Séléctionner le nombre de noeud (entre 20 et 60) :</label>
-                    <input
-                        type="number"
-                        id="numberInput"
-                        value={enteredNumber}
-                        onChange={handleNumberChange}
-                        min={20}
-                        max={60}/>
-                    <p>La valeur saisie : {enteredNumber}</p>
+                <div className='nbNodeDiv'>
+                    <label htmlFor="numberInput">Sélectionner le nombre de noeud (entre 20 et 60) :</label>
+                    <div>
+                        <button className='valuebutton' onClick={() => { if (enteredNumber>20) setEnteredNumber(enteredNumber-1)}}
+                            style={{borderColor:theme.colors.secondary}}> - </button>
+                        <input
+                            // type="number"
+                            id="numberInput"
+                            disabled
+                            value={ "Nombre de noeuds : " + enteredNumber}
+                            onChange={handleNumberChange}
+                            min={20}
+                            max={60}/>
+                        <button className='valuebutton' onClick={() => { if (enteredNumber<60) setEnteredNumber(enteredNumber+1)}}
+                            style={{borderColor:theme.colors.secondary}}> + </button>
+                    </div>
                 </div>
 
 
-
                     <button className='button' onClick={StartGame}
                         style={{ 
                             backgroundColor: theme.colors.tertiary,
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx
index 03c5ddf..814ea24 100644
--- a/cryptide_project/src/Pages/Play.tsx
+++ b/cryptide_project/src/Pages/Play.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 /* Context */
 import { useAuth } from '../Contexts/AuthContext';
@@ -27,6 +27,10 @@ import Stub from '../model/Stub';
 
 import SessionService from '../services/SessionService';
 import { loadImageAsync } from '../ImageHelper';
+import { Overlay, ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+
 
 function Play() {
     let first = true
@@ -35,6 +39,8 @@ function Play() {
     const {isLoggedIn, login, user, setUserData, manager } = useAuth();
     const {setDailyEnigmeData} = useGame()
 
+    const target = useRef(null);
+
     useEffect(() => {
         const fetchUserInformation = async () => {
             try {
@@ -124,17 +130,22 @@ function Play() {
 
     
     function launchEngimeJour(){
-        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
-        setPersonData(choosenPerson)
-        setPersonNetworkData(networkPerson)
-        setIndicesData(choosenIndices)
-        setIndicesData(choosenIndices)
-        if (first){
-            first = false
-            const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
-            setDailyEnigmeData(map)
-        }
-        navigate('/game?solo=true&daily=true');
+        //* overlay
+        
+        if (!showOverlay)setShowOverlay(true)
+        else setShowOverlay(true)
+        
+        // const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
+        // setPersonData(choosenPerson)
+        // setPersonNetworkData(networkPerson)
+        // setIndicesData(choosenIndices)
+        // setIndicesData(choosenIndices)
+        // if (first){
+        //     first = false
+        //     const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
+        //     setDailyEnigmeData(map)
+        // }
+        // navigate('/game?solo=true&daily=true');
     }
     
 
@@ -160,6 +171,47 @@ function Play() {
         }
     }, [room, navigate]);
 
+
+    const [showOverlay, setShowOverlay] = useState(false);
+    const [selectedDifficulty, setSelectedDifficulty] = useState(null);
+
+    //@ts-ignore
+    const handleDifficultyChange = (value) => {
+        setSelectedDifficulty(value);
+    };
+
+    const handleStartEasyGame = () => {
+
+        //* Mode facile 
+        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
+        setPersonData(choosenPerson)
+        setPersonNetworkData(networkPerson)
+        setIndicesData(choosenIndices)
+        setIndicesData(choosenIndices)
+        navigate('/game?solo=true&daily=true&easy=true');
+        setShowOverlay(false);
+    };
+
+    const handleStartHardGame = () => {
+        //* Mode difficile
+
+        //todo différencier les deux
+        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
+        setPersonData(choosenPerson)
+        setPersonNetworkData(networkPerson)
+        setIndicesData(choosenIndices)
+        setIndicesData(choosenIndices)
+        if (first){
+            first = false
+            const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
+            setDailyEnigmeData(map)
+        }
+        navigate('/game?solo=true&daily=true&easy=false');
+        setShowOverlay(false);
+    };
+
+
+
     return (
 
         <div className="MainContainer">
@@ -182,7 +234,28 @@ function Play() {
                 </div>
                 <div className='buttonGroupVertical'>
                     <button onClick={launchMastermind} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
-                    <button onClick={launchEngimeJour} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Résoudre une énigme</button>
+                    <button ref={target} onClick={launchEngimeJour} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Résoudre une énigme</button>
+                    <Overlay show={showOverlay} target={target.current} placement="bottom" rootClose={true} rootCloseEvent='click'>
+                        {({ placement, arrowProps, show: _show, popper, ...props }) => (
+                            <div
+                                {...props}
+                                style={{
+                                    backgroundColor: theme.colors.secondary,
+                                    padding: '2px 10px',
+                                    borderRadius: 3,
+                                    ...props.style,
+                                }}>
+
+                                <ButtonGroup aria-label="difficulty">
+                                    <Button onClick={handleStartEasyGame}>Facile</Button>
+                                    <Button onClick={handleStartHardGame}>Difficile</Button>
+                                </ButtonGroup>
+                            </div>
+                        )}
+                    </Overlay>
+
+
+
                     <button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
                     <button  className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>