mise en place du mode Mastermind quasi fonctionnel ! 🍱

cryptide_project/src/Components/ColoredIndices.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../Style/Global.css';
+import { FormattedMessage } from 'react-intl';
+
+import { useTheme } from '../Style/ThemeContext';
+
+//@ts-ignore
+function ColoredIndices({ letter, color}) {
+    
+    const theme = useTheme();
+
+    // const mystyle = {
+    //     backgroundColor: "#0064E0",
+    // };
+
+    return (
+    <div className='centerDivH' style={{ backgroundColor: theme.colors.primary }}>
+        <img src={letter} alt="Indice Letter"/>
+    </div>
+    );
+}
+
+export default ColoredIndices;

cryptide_project/src/Components/GraphContainer.tsx

@@ -26,21 +26,22 @@ interface MyGraphComponentProps {
   onNodeClick: (shouldShowChoiceBar: boolean) => void;
   handleShowTurnBar: (shouldShowTurnBar: boolean) => void
   handleTurnBarTextChange: (newTurnBarText: string) => void
+  changecptTour: (newcptTour : number) => void
+  solo : boolean
 }
 
 let lastAskingPlayer = 0
 let lastNodeId = -1
 let first = true
 let askedWrong = false
-let solo: boolean = true
+let cptTour: number = 0
 
-
-const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange}) => {
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, changecptTour, solo}) => {
 
   const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, onlyFalse, setOnlyFalseData } = useGame();
 
   const params = new URLSearchParams(window.location.search);
-  const solotmp = params.get('solo');
+  
 
 
   let playerIndex: number = turnPlayerIndex
@@ -53,12 +54,9 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
   }
   let thisPlayerIndex = index
   
-
+  
   if (first){
     first = false
-    if (solotmp == "false"){
-      solo=false
-    }
     if (!solo){
       setActualPlayerIndexData(index)
       if (playerIndex == thisPlayerIndex){
@@ -213,7 +211,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
           }
       });
 
-    network.on("click", (params) => {
+    network.on("click", async (params) => {
       
       if(params.nodes.length > 0){
         setNodeIdData(params.nodes[0])
@@ -240,17 +238,23 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
             onNodeClick(false)
           }
         }
-        else{
+        else{ // si solo -> Mastermind
           const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) //person sélectionnée
           if (person != undefined){
-            indices.forEach(async (i, index) =>{
+            let index = 0;
+            // indices.forEach(async (i, index) =>{
+            for(const i of indices){
               const tester = IndiceTesterFactory.Create(i)
               const test = tester.Works(person)
               const node = nodes.get().find((n) => params.nodes[0] == n.id)
               if (node!=undefined){
                 networkData.nodes.update({id: params.nodes[0], label: node.label + colorToEmoji(positionToColor(index), test)})
+                await delay(500);
               }
-            })
+              index ++;
+            }
+            cptTour ++; // On Incrémente le nombre de tour du joueur
+            changecptTour(cptTour); // On le transmet a la page précédente avec la fonction
           }
         }
       }

cryptide_project/src/Pages/InGame.css

@@ -60,6 +60,22 @@
     top :50px;
 }
 
+.nbLaps{ /*nombre de tour*/
+    position: absolute;
+    z-index: 1;
+    left: 10px;
+    top :50px;
+
+    margin: 10px 20px;
+    padding: 20px;
+    border-radius: 15px;
+    border: solid 2px;
+
+    font-size: 30px;
+    color: #fff;
+}
+
+
 #endgamebutton{
     position: absolute;
     z-index: 1;

cryptide_project/src/Pages/InGame.tsx

@@ -10,6 +10,7 @@ import ChoiceBar from '../Components/ChoiceBar';
 import ButtonImgNav from '../Components/ButtonImgNav';
 import PersonStatus from '../Components/PersonStatus';
 import PlayerList from '../Components/PlayerList';
+import TurnBar from '../Components/TurnBar';
 
 /* Icon */
 import Leave from "../res/icon/leave.png";
@@ -32,45 +33,62 @@ import { HiLanguage } from 'react-icons/hi2';
 import { Nav, NavDropdown } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
 import Color from '../model/Color';
-import TurnBar from '../Components/TurnBar';
 import { useGame } from '../Contexts/GameContext';
 
 //@ts-ignore
 const InGame = ({locale, changeLocale}) => {
-
+  
   const theme = useTheme();
-
-    const [showChoiceBar, setShowChoiceBar] = useState(false);
-    const [showTurnBar, setShowTurnBar] = useState(false);
-    const [turnBarText, setTurnBarText] = useState("");
   
-    const handleNodeClick = (shouldShowChoiceBar: boolean) => {
-      setShowChoiceBar(shouldShowChoiceBar);
-    };
   
+  const params = new URLSearchParams(window.location.search);
+  
+  //* Gestion solo
+  let IsSolo: boolean = true
+  const solotmp = params.get('solo');
+  if (solotmp == "false"){
+    IsSolo=false
+  }
 
-    const handleShowTurnBar = (shouldShowTurnBar: boolean) => {
-      setShowTurnBar(shouldShowTurnBar);
-    };
-    
-    const handleTurnBarTextChange = (newTurnBarText: string) =>{
-      setTurnBarText(newTurnBarText)
-    }
-
-    /* offcanvas */
-    //? faire une fonction pour close et show en fonction de l'etat du canva ?
-    //? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ?
-    const [show, setShow] = useState(false);
-    const handleClose = () => setShow(false);
-    const handleShow = () => setShow(true);
-
-    const [showP, setShowP] = useState(false);
-    const handleCloseP = () => setShowP(false);
-    const handleShowP = () => setShowP(true);
+
+  const [showChoiceBar, setShowChoiceBar] = useState(false);
+  const [showTurnBar, setShowTurnBar] = useState(false);
+  const [turnBarText, setTurnBarText] = useState("");
+
+  const handleNodeClick = (shouldShowChoiceBar: boolean) => {
+    setShowChoiceBar(shouldShowChoiceBar);
+  };
+
+
+  const handleShowTurnBar = (shouldShowTurnBar: boolean) => {
+    setShowTurnBar(shouldShowTurnBar);
+  };
   
-    const [showS, setShowS] = useState(false);
-    const handleCloseS = () => setShowS(false);
-    const handleShowS = () => setShowS(true);
+  const handleTurnBarTextChange = (newTurnBarText: string) =>{
+    setTurnBarText(newTurnBarText)
+  }
+
+  /* offcanvas */
+  //? faire une fonction pour close et show en fonction de l'etat du canva ?
+  //? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ?
+  const [show, setShow] = useState(false);
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  const [showP, setShowP] = useState(false);
+  const handleCloseP = () => setShowP(false);
+  const handleShowP = () => setShowP(true);
+
+  const [showS, setShowS] = useState(false);
+  const handleCloseS = () => setShowS(false);
+  const handleShowS = () => setShowS(true);
+
+  const [cptTour, setcptTour] = useState(0);
+
+  //@ts-ignore
+  const changecptTour = (newcptTour) => {
+    setcptTour(newcptTour);
+  };
   
     const handleChange = () => {
       if (show){
@@ -114,19 +132,31 @@ const InGame = ({locale, changeLocale}) => {
       <div id="mainDiv">
         {showTurnBar && <TurnBar text={turnBarText}/>}
         <div id='graphDiv'>
-          <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} handleTurnBarTextChange={handleTurnBarTextChange} />
+          <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} handleTurnBarTextChange={handleTurnBarTextChange} changecptTour={changecptTour} solo={IsSolo} />
         </div>
 
-        <div className='playerlistDiv'>
-          <button className='button' 
-            style={{ 
+
+        {IsSolo ? (
+            <div className='nbLaps' style={{ 
                 backgroundColor: theme.colors.primary,
                 borderColor: theme.colors.secondary
-            }}
-            onClick={handleChangeP}>
-            Players
-          </button>
-        </div>
+            }}>
+              Tour : {cptTour}
+            </div>
+          ) : (
+            <div className='playerlistDiv'>
+              <button className='button' 
+                style={{ 
+                    backgroundColor: theme.colors.primary,
+                    borderColor: theme.colors.secondary
+                }}
+                onClick={handleChangeP}>
+                Players
+              </button>
+            </div>
+          )
+        }
+        
 
         <div className='paramDiv'>
           <button className='button'

cryptide_project/src/Pages/SoloGame.tsx

@@ -109,7 +109,7 @@ const SoloGame = ({locale, changeLocale}) => {
         <div id="mainDiv">
             <TurnBar text="je suis dans la page solo"/>
             <div id='graphDiv'>
-                <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} FromSolo={true}/>
+                {/* <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} FromSolo={true}/> */}
             </div>
 
             <div className='nbLaps' style={{ 

cryptide_project/src/SocketConfig.ts

@@ -1,6 +1,6 @@
 import { io } from "socket.io-client";
 
 
-const socket = io("http://localhost:3002");
+const socket = io("http://127.20.10.4:3002");
 
 export {socket}

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "Cryptid",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}