merge manuel de demo et master

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, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme}) => {
-const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, 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)
+      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)
+              // 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,9 +449,11 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     else {
       if (firstLap){
         firstLap=false
+        if (!isDaily){
           addToHistory("<----- [Tour " + 1  +"/"+networkData.nodes.length + "] ----->");
         }
       }
+    }
     
 
     socket.on("put correct background", () =>{
@@ -510,6 +523,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         askedWrong=false
         askedWrongBot=false
         endgame = true
+        firstHistory=true
   
         try{
           if(isLoggedIn){

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>

cryptide_project/src/Pages/Lobby.css

@@ -70,3 +70,28 @@
 .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;
+}

cryptide_project/src/Pages/Lobby.tsx

@@ -273,18 +273,23 @@ function Lobby() {
                         )}
                     </Overlay>
 
+                <div className='nbNodeDiv'>
+                    <label htmlFor="numberInput">Sélectionner le nombre de noeud (entre 20 et 60) :</label>
                     <div>
-                    <label htmlFor="numberInput">Séléctionner le nombre de noeud (entre 20 et 60) :</label>
+                        <button className='valuebutton' onClick={() => { if (enteredNumber>20) setEnteredNumber(enteredNumber-1)}}
+                            style={{borderColor:theme.colors.secondary}}> - </button>
                         <input
-                        type="number"
+                            // type="number"
                             id="numberInput"
-                        value={enteredNumber}
+                            disabled
+                            value={ "Nombre de noeuds : " + enteredNumber}
                             onChange={handleNumberChange}
                             min={20}
                             max={60}/>
-                    <p>La valeur saisie : {enteredNumber}</p>
+                        <button className='valuebutton' onClick={() => { if (enteredNumber<60) setEnteredNumber(enteredNumber+1)}}
+                            style={{borderColor:theme.colors.secondary}}> + </button>
+                    </div>
                 </div>
-
 
 
                     <button className='button' onClick={StartGame}

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)
+        //* overlay
-        setPersonData(choosenPerson)
+        
-        setPersonNetworkData(networkPerson)
+        if (!showOverlay)setShowOverlay(true)
-        setIndicesData(choosenIndices)
+        else setShowOverlay(true)
-        setIndicesData(choosenIndices)
+        
-        if (first){
+        // const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
-            first = false
+        // setPersonData(choosenPerson)
-            const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
+        // setPersonNetworkData(networkPerson)
-            setDailyEnigmeData(map)
+        // setIndicesData(choosenIndices)
-        }
+        // setIndicesData(choosenIndices)
-        navigate('/game?solo=true&daily=true');
+        // 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>