cryptide_project/src/Components/GraphContainer.tsx

@@ -25,9 +25,11 @@ 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
+  setPlayerIndex: (playerIndex: number) => void
 }
 
 let lastAskingPlayer = 0
@@ -44,10 +46,12 @@ let cptHistory = 0
 let lastNodes: NodePerson[] = []
 let cptEndgame = 0
 let firstEnigme = true
+let firstIndex = 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, setPlayerIndex}) => {
   let cptTour: number = 0
 
   //* Gestion du temps :
@@ -117,6 +121,11 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
   }, [showLast])
 
   let playerIndex: number = turnPlayerIndex
+
+  if (firstIndex){
+    firstIndex=false
+    setPlayerIndex(playerIndex)
+  }
   let index = 0
   for (let i=0; i<players.length; i++){
     if(players[i].id == socket.id){
@@ -292,16 +301,26 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
 
     if (isDaily){
       setNetworkEnigme(dailyEnigme)
-      dailyEnigme.forEach((pairs, index) => {
+      if (!isEasy){
-        pairs.forEach((pair) => {
+        dailyEnigme.forEach((pairs, index) => {
-          const i = indices.findIndex((indice) => pair.first.getId() === indice.getId())
+          pairs.forEach((pair) => {
-          const node = networkData.nodes.get().find((n) => index == n.id)
+            const i = indices.findIndex((indice) => pair.first.getId() === indice.getId())
-          if (node != undefined){
+            const node = networkData.nodes.get().find((n) => index == n.id)
-            networkData.nodes.update({id: node.id, label: node.label + positionToEmoji(i, pair.second)})
+            if (node != undefined){
-            const test = networkData.nodes.get().find((n) => index == n.id)
+              networkData.nodes.update({id: node.id, label: node.label + positionToEmoji(i, pair.second)})
-          }
+            }
-        })
+          })
-      });
+        });
+      }
+      else{
+        if (firstHistory){
+          firstHistory=false
+          indices.forEach((indice, index) => {
+            addToHistory("Indice " + positionToEmoji(index, true) + " : " + indice.ToString("fr"))
+          })
+        }
+        
+      }
     }
 
     socket.on("reset graph", () => {
@@ -337,6 +356,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         if (node!=undefined){
           onNodeClick(false)
           playerIndex = newPlayerIndex
+          setPlayerIndex(playerIndex)
           if (mapIndexPersons.get(askedIndex)?.find((p) => p.getId() == id) == undefined){
             const p = personNetwork.getPersons().find((p)=> p.getId() == id)
             const tab = mapIndexPersons.get(askedIndex)
@@ -438,7 +458,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,7 +532,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         askedWrong=false
         askedWrongBot=false
         endgame = true
-  
+        firstHistory=true
         try{
           if(isLoggedIn){
             if(!solo){

cryptide_project/src/Components/PersonStatus.tsx

@@ -17,37 +17,62 @@ interface PlayerStatusProps {
     setPlayerTouched: (newPlayerTouch: number) => void;
     playerTouched: number
     showCircle: boolean
+    playerIndex: number
   }
   let touchedPlayer = -1
 
 //@ts-ignore
-const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle}) => {
+const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle, playerIndex}) => {
     const theme=useTheme();
-    const {players} = useGame()
+    const {players, actualPlayerIndex} = useGame()
     if (players[index] instanceof Bot){
         img = BotImg
     }
 
+    const [buffer, setBuffer] = useState("")
+
     const [touchedPlayer, setTouchedPlayer] = useState(-2)
     useEffect(() =>{
         setTouchedPlayer(playerTouched)
     }, [playerTouched])
+
+    let IsActualPlayer = index != actualPlayerIndex
+
+    useEffect(() => {
+        if (playerIndex===index){
+            setBuffer('solid 1px green')
+        }
+        else{
+            setBuffer('')
+        }
+    }, [playerIndex])
+    
+    function onTouch(){
+        if (IsActualPlayer){
+            setPlayerTouched(index)
+        }
+    }
+    
     return (
-        <div className='centerDivV' onClick={() => setPlayerTouched(index)}>
+        <div style={{border:buffer}}>
-            <img src={img} alt="player" height="60" width="60"/>
+            <div className='centerDivV' onClick={() => onTouch()}>
-            <h5>{name}</h5>
+                <img src={img} alt="player" height="60" width="60"/>
-            
+                <h5>{name}</h5>      
-            {(touchedPlayer == index && showCircle) ?(
+
-                <div className='statusDiv' style={{ backgroundColor: "gold" }}>
+                {IsActualPlayer && (      
-                    <img src={state} alt="state" height="30" width="30"/>
+                    (touchedPlayer == index && showCircle) ?(
-                </div>
+                        <div className='statusDiv' style={{ backgroundColor: "gold" }}>
-            ): showCircle &&
+                            <img src={state} alt="state" height="30" width="30"/>
-            (
+                        </div>
-                <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
+                    ): showCircle &&
-                    <img src={state} alt="state" height="30" width="30"/>
+                    (
-                </div>
+                        <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
-            )  }
+                            <img src={state} alt="state" height="30" width="30"/>
-            
+                        </div>
+                    )
+                )}
+                
+            </div>
         </div>
     );
 }

cryptide_project/src/Components/PlayerList.tsx

@@ -14,9 +14,10 @@ interface PlayerListProps {
     players: Player[];
     playerTouched: number
     setPlayerTouched: (newPlayerTouch: number) => void;
-  }
+    playerIndex: number
+}
 
-const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched}) => {
+const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched, playerIndex}) => {
     const theme = useTheme();
 
     return (
@@ -25,7 +26,18 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                 {
                     //@ts-ignore
                     players.map((player, index) => (
-                        player.id!=socket.id && <PersonStatus img={player.profilePicture} state={Person} key={index} name={player.pseudo + " " + colorToEmoji(positionToColor(index), true)} playerTouched={playerTouched} setPlayerTouched={setPlayerTouched} index={index} showCircle={true}/>
+                        //player.id!=socket.id && 
+                        <PersonStatus img={player.profilePicture} 
+                                                    state={Person} 
+                                                    key={index} 
+                                                    name={player.pseudo 
+                                                    + " " + 
+                                                    colorToEmoji(positionToColor(index), true)} 
+                                                    playerTouched={playerTouched} 
+                                                    setPlayerTouched={setPlayerTouched} 
+                                                    index={index} 
+                                                    showCircle={true}
+                                                    playerIndex={playerIndex}/>
                     ))
                 }
             </div>

cryptide_project/src/Pages/EndGame.tsx

@@ -98,7 +98,7 @@ function EndGame() {
                                 <div className="playerContainer" key={index}>
                                     {player.id !== winner?.id && (
                                         <div>
-                                            <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} showCircle={false}/>
+                                            <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} playerIndex={-2} showCircle={false}/>
                                             <h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
                                         </div>
                                     )}

cryptide_project/src/Pages/InGame.tsx

@@ -72,6 +72,11 @@ 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)
@@ -100,6 +105,8 @@ const InGame = ({locale, changeLocale}) => {
   const [showTurnBar, setShowTurnBar] = useState(false);
   const [turnBarText, setTurnBarText] = useState("");
   const [playerTouched, setPlayerTouched] = useState(-2)
+  const [playerIndex, setPlayerIndex] = useState(-2)
+
 
   const [network, setNetwork] = useState<Network | null>(null)
   const [networkEnigme, setNetworkEnigme] = useState<Map<number, Pair<Indice, boolean>[]> | null>(null)
@@ -129,6 +136,10 @@ const InGame = ({locale, changeLocale}) => {
     setTurnBarText(newTurnBarText)
   }
 
+  const setPlayerIndexData = (playerIndex: number) => {
+    setPlayerIndex(playerIndex)
+  }
+
   const generateTEX = async () => {
     if (network != null && personNetwork != null && person != null){
 
@@ -258,11 +269,13 @@ const InGame = ({locale, changeLocale}) => {
                           addToHistory={addToHistory}
                           solo={IsSolo} 
                           isDaily={isDaily} 
+                          isEasy={isEasy}
                           setPlayerTouched={handleSetPlayerTouched} 
                           playerTouched={playerTouched}
                           setNetwork={setNetworkData}
                           setNetworkEnigme={setNetworkEnigmeData}
-                          showLast={showLast}/>
+                          showLast={showLast}
+                          setPlayerIndex={setPlayerIndexData}/>
         </div>
 
 
@@ -275,7 +288,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>
@@ -391,7 +404,7 @@ const InGame = ({locale, changeLocale}) => {
 
           { !IsSolo &&
             <div className='playerlistDiv'>
-              <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} />
+              <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex}/>
             </div>
           }
 

cryptide_project/src/Pages/Lobby.tsx

@@ -42,13 +42,19 @@ import { socket } from "../SocketConfig";
 import { random } from 'lodash';
 import SessionService from '../services/SessionService';
 
-
 let gameStarted = false
 
 function Lobby() {
     const theme=useTheme();
     const navigate = useNavigate();
     
+    const [enteredNumber, setEnteredNumber] = useState(20);
+
+    //@ts-ignore
+    const handleNumberChange = (event) => {
+        const newNumber = Math.max(20, Math.min(60, parseInt(event.target.value, 10)));
+        setEnteredNumber(newNumber);
+    };
 
     const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setTurnPlayerIndexData, setRoomData } = useGame();
     
@@ -146,7 +152,7 @@ function Lobby() {
 
 
     function StartGame(){
-        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, 30)
+        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, enteredNumber)
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
@@ -214,6 +220,19 @@ function Lobby() {
                     </button>
                 </center> */}
 
+                <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>
+
+
                 <div className='centerDivH'>
                     <button className='button' onClick={StartGame}
                         style={{ 

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';
@@ -28,6 +28,13 @@ 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 +42,9 @@ function Play() {
     const {isLoggedIn, login, user, setUserData, manager } = useAuth();
     const {setDailyEnigmeData} = useGame()
 
+    const target = useRef(null);
+
+
     useEffect(() => {
         const fetchUserInformation = async () => {
             try {
@@ -124,17 +134,11 @@ 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){
-            first = false
-            const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
-            setDailyEnigmeData(map)
-        }
-        navigate('/game?solo=true&daily=true');
     }
     
 
@@ -160,6 +164,49 @@ 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 
+        //todo différencier les deux
+        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 +229,29 @@ 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>
                     

package.json

@@ -0,0 +1 @@
+{}