Merge branch 'Server'

cryptide_project/server/server.js

@@ -48,15 +48,23 @@ io.on('connection', (socket) => {
   })
 
   socket.on("lobby created", () =>{
-    io.to(socket.id).emit("lobby created", 134)
+    io.to(socket.id).emit("lobby created", Math.floor(Math.random() * 10000))
   })
 
   socket.on("already asked", (nodeId, askingPlayer, askedPlayer) =>{
     io.to(askingPlayer.id).emit("already asked", nodeId, askedPlayer)
   })
 
-  socket.on("ask player", (nodeId, playerId, askingPlayer) =>{
-    io.to(playerId).emit("asked", nodeId, askingPlayer)
+  socket.on("ask player", (nodeId, playerId, askingPlayer, askingPlayerIndex) =>{
+    io.to(playerId).emit("asked", nodeId, askingPlayer, askingPlayerIndex)
+  })
+
+  socket.on("asked all 1by1", (id, playerId) =>{
+    io.to(playerId).emit("asked all", id)
+  })
+
+  socket.on("asked wrong", (askingPlayer) =>{
+    io.to(askingPlayer.id).emit("asked wrong")
   })
 
   socket.on("disconnect", () =>{

cryptide_project/src/App.tsx

@@ -78,7 +78,7 @@ function App() {
                 <Route path="/endgame" element={<EndGame/>} />
                 <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>} />
                 <Route path="/info" element={<InfoPage/>} />
-      </Routes>
+              </Routes>
             </BrowserRouter>
           </ThemeProvider>
         </IntlProvider>

cryptide_project/src/Components/ChoiceBar.tsx

@@ -13,11 +13,11 @@ const ChoiceBar = () => {
 
   function askPlayer(playerId: string){
     if (nodeId !== null){
-      socket.emit("ask player", nodeId, playerId, players.find((p) => p.id === socket.id))
+      socket.emit("ask player", nodeId, playerId, players.find((p) => p.id === socket.id, actualPlayerIndex))
     }
   }
 
-  function askEveryone(){
+  async function askEveryone(){
     if (nodeId !== null){
       const person = personNetwork?.getPersons().find((p) => p.getId() == nodeId)
       if (person != undefined){
@@ -36,6 +36,8 @@ const ChoiceBar = () => {
             }
             const tester = IndiceTesterFactory.Create(indices[playerIndex])
             const works = tester.Works(person)
+            await delay(500);
+            socket.emit("asked all 1by1", person.getId(), players[playerIndex].id)
             socket.emit("node checked", nodeId, works, positionToColor(playerIndex), room, nextPlayerIndex)
             if(!works){
               return
@@ -47,11 +49,15 @@ const ChoiceBar = () => {
     }
   }
 
+  function delay(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
   return (
     <div className="choice-bar-container">
       <h3 className="choice-bar-heading">Quel joueur voulez-vous interroger ?</h3>
       <div>
-      <button className="choice-bar-button" onClick={() => askEveryone()} style={{ backgroundColor: theme.colors.primary }}>Tout le monde</button>
+      <button className="choice-bar-button" onClick={async () => await askEveryone()} style={{ backgroundColor: theme.colors.primary }}>Tout le monde</button>
         {players.map((player, index) => (
           player.id !== socket.id &&
           <button key={index} className="choice-bar-button" onClick={() => askPlayer(player.id)} style={{ backgroundColor: theme.colors.primary }}>

cryptide_project/src/Components/GraphContainer.tsx

@@ -25,15 +25,17 @@ import { colorToEmoji, positionToColor } from "../ColorHelper";
 interface MyGraphComponentProps {
   onNodeClick: (shouldShowChoiceBar: boolean) => void;
   handleShowTurnBar: (shouldShowTurnBar: boolean) => void
+  handleTurnBarTextChange: (newTurnBarText: string) => void
 }
 
 let lastAskingPlayer = 0
 let lastNodeId = -1
 let first = true
+let askedWrong = false
 
-const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar}) => {
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange}) => {
 
-  const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex } = useGame();
+  const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, onlyFalse, setOnlyFalseData } = useGame();
 
   let playerIndex: number = turnPlayerIndex
   let index = 0
@@ -50,7 +52,9 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     first = false
     setActualPlayerIndexData(index)
     if (playerIndex == thisPlayerIndex){
+      handleTurnBarTextChange("À vous de jouer")
       handleShowTurnBar(true)
+
     }
     indices.forEach(i => {
       console.log(i.ToString("en"))
@@ -96,20 +100,27 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     const networkData = { nodes: nodes, edges: graph.edges };
     const network = new Network(container, networkData, initialOptions);
 
-    
+    socket.on("asked all", (id) =>{
+      const pers = personNetwork.getPersons().find((p) => p.getId() == id)
+      if (pers!=undefined){
+        askedPersons.push(pers)
+      }
+    })
     
     socket.on("node checked",(id, works, color, newPlayerIndex) => {
       const node = nodes.get().find((n) => id == n.id)
       if (node!=undefined){
         onNodeClick(false)
         playerIndex = newPlayerIndex
-        networkData.nodes.update({id: id, label: node.label + colorToEmoji(color, works)})
+        if (!node.label.includes(colorToEmoji(color, works))){
+          networkData.nodes.update({id: id, label: node.label + colorToEmoji(color, works)})
+        }
         if (playerIndex === thisPlayerIndex){
+          handleTurnBarTextChange("À vous de jouer")
           handleShowTurnBar(true)
         }
         else{
           handleShowTurnBar(false)
-          console.log("je passe bien ici ?????")
         }
       }
       lastAskingPlayer = 0
@@ -120,8 +131,16 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       console.log("player: " + askedPlayer + " already asked on node " + nodeId)
     })
 
+    socket.on("asked wrong", () =>{
+      setOnlyFalseData(true)
+      askedWrong = true
+      handleShowTurnBar(true)
+      handleTurnBarTextChange("Mauvais choix, posez un carré !")
+    })
+
 
-    socket.on("asked", (nodeId, askingPlayer) => {
+    socket.on("asked", (nodeId, askingPlayer, askingPlayerIndex) => {
+      console.log(askingPlayerIndex)
       if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){
         lastAskingPlayer = askingPlayer.id
         lastNodeId = nodeId
@@ -136,6 +155,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
             const node = nodes.get().find((n) => nodeId == n.id)
             if (node != undefined && indice != null){
               var tester = IndiceTesterFactory.Create(indice)
+              let maybe = thisPlayerIndex
               playerIndex = playerIndex + 1
               if(playerIndex == players.length){
                 playerIndex = 0
@@ -144,7 +164,12 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                 socket.emit("node checked", nodeId, true, positionToColor(thisPlayerIndex), room, playerIndex)
               }
               else{
-                socket.emit("node checked", nodeId, false, positionToColor(thisPlayerIndex), room, playerIndex)
+                maybe = maybe - 1
+                if(maybe == 0){
+                  maybe = players.length - 1
+                }
+                socket.emit("node checked", nodeId, false, positionToColor(thisPlayerIndex), room, maybe)
+                socket.emit("asked wrong", askingPlayer, room)
               }
             }
           }     
@@ -184,9 +209,26 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       
       if(params.nodes.length > 0){
         setNodeIdData(params.nodes[0])
-
         // Renvoyer un true pour afficher la choice bar
-        if (thisPlayerIndex == playerIndex){
+        if (askedWrong){
+          console.log(askedWrong)
+          const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0])
+          if (person !== undefined && indice !== null){
+            const tester = IndiceTesterFactory.Create(indice)
+            if (!tester.Works(person) && !askedPersons.includes(person)){
+              console.log(playerIndex)
+              playerIndex = thisPlayerIndex + 1
+              if(playerIndex == players.length){
+                playerIndex = 0
+              }
+              socket.emit("node checked", params.nodes[0], false, positionToColor(thisPlayerIndex), room, playerIndex)
+              askedPersons.push(person)
+              askedWrong = false
+            }
+          }
+          
+        }
+        else if (thisPlayerIndex == playerIndex){
           onNodeClick(true)
         }
         else{

cryptide_project/src/Components/NavBar.tsx

@@ -20,6 +20,8 @@ import ReactCountryFlag from "react-country-flag"
 
 /* Style */
 import './NavBar.css';
+
+/* Style */
 import { useTheme } from '../Style/ThemeContext';
 
 // @ts-ignore

cryptide_project/src/Components/PlayerList.tsx

@@ -1,5 +1,6 @@
 
 import React from 'react';
+import { colorToEmoji, positionToColor } from '../ColorHelper';
 import PersonStatus from './PersonStatus';
 
 //@ts-ignore
@@ -9,7 +10,7 @@ function PlayerList({ players }) {
             {
                 //@ts-ignore
                 players.map((player, index) => (
-                    <PersonStatus key={index} state={player.state} name={player.name} />
+                    <PersonStatus key={index} state={player.state} name={player.name + " " + colorToEmoji(positionToColor(index), true)} />
                 ))
             }
         </div>

cryptide_project/src/Components/TurnBar.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 import { useTheme } from "../Style/ThemeContext";
 
-const TurnBar = () => {
+interface TurnBarProps{
+    text: string
+}
+
+const TurnBar: React.FC<TurnBarProps> = ({text})=> {
     const theme = useTheme();
     return (
         <div className='upperInfo' 
@@ -9,7 +13,7 @@ const TurnBar = () => {
                 borderColor: theme.colors.secondary
             }}>
             {/* texte changeable et a traduire */}
-            <p>Dummy, à vous de jouer !</p>
+            <p>{text}</p>
         </div>
     );
   };

cryptide_project/src/Contexts/GameContext.tsx

@@ -15,6 +15,7 @@ interface GameContextProps {
   actualPlayerIndex: number;
   turnPlayerIndex: number;
   room: string;
+  onlyFalse: boolean
   setIndicesData: (newIndices: Indice[]) => void;
   setIndiceData: (newIndice: Indice) => void;
   setPersonData: (newPerson: Person) => void;
@@ -25,6 +26,7 @@ interface GameContextProps {
   setActualPlayerIndexData: (newActualPlayerIndex: number) => void;
   setTurnPlayerIndexData: (newTurnPlayerIndex: number) => void;
   setRoomData: (newRoom: string) => void;
+  setOnlyFalseData: (newOnlyFalse: boolean) => void
 }
 
 const GameContext = createContext<GameContextProps | undefined>(undefined);
@@ -44,6 +46,7 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
   const [actualPlayerIndex, setActualPlayerIndex] = useState<number>(-1)
   const [turnPlayerIndex, setTurnPlayerIndex] = useState<number>(-1)
   const [room, setRoom] = useState<string>("")
+  const [onlyFalse, setOnlyFalse] = useState<boolean>(false)
 
 
   const setIndicesData = (newIndices: Indice[]) => {
@@ -87,8 +90,12 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
     setRoom(newRoom)
   }
 
+  const setOnlyFalseData = (newOnlyFalse: boolean) =>{
+    setOnlyFalse(newOnlyFalse)
+  }
+
   return (
-    <GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData }}>
+    <GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData, onlyFalse, setOnlyFalseData }}>
       {children}
     </GameContext.Provider>
   );

cryptide_project/src/Pages/InGame.tsx

@@ -42,7 +42,7 @@ const InGame = ({locale, changeLocale}) => {
 
     const [showChoiceBar, setShowChoiceBar] = useState(false);
     const [showTurnBar, setShowTurnBar] = useState(false);
-
+    const [turnBarText, setTurnBarText] = useState("");
   
     const handleNodeClick = (shouldShowChoiceBar: boolean) => {
       setShowChoiceBar(shouldShowChoiceBar);
@@ -52,6 +52,10 @@ const InGame = ({locale, changeLocale}) => {
     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 ?
@@ -108,9 +112,9 @@ const InGame = ({locale, changeLocale}) => {
 
     return (
       <div id="mainDiv">
-        {showTurnBar && <TurnBar/>}
+        {showTurnBar && <TurnBar text={turnBarText}/>}
         <div id='graphDiv'>
-          <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} />
+          <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} handleTurnBarTextChange={handleTurnBarTextChange} />
         </div>
 
         <div className='playerlistDiv'>

cryptide_project/src/Pages/Lobby.tsx

@@ -28,20 +28,6 @@ import Player from '../model/Player';
 
 function Lobby() {
     const theme=useTheme();
-    
-    const [codeShowed, setCodeShowed] = useState(true);
-
-    const playerslst = [
-        { pdp: Person, name: "Dummy (vous)", id: 1 },
-        { pdp: Person, name: "Dummy2)", id: 1 },
-        //{ pdp: Bot, name: "Boat", id: 2 },
-        // { pdp: Bot, name: "Bot-tom", id: 3 },
-    ];
-
-    while (playerslst.length < 3) {
-        playerslst.push({ pdp: Bot, name: "BotAdded", id: playerslst.length + 1 });
-    }
-
     const navigate = useNavigate();
 
 
@@ -97,6 +83,9 @@ function Lobby() {
         setPlayersData(tab.map((p: any) => new Player(p.id, p.name)))
     })
 
+    const [codeShowed, setCodeShowed] = useState(true);
+
+
     function StartGame(){
         const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, 30)
         setPersonData(choosenPerson)

cryptide_project/src/Pages/Play.tsx

@@ -48,12 +48,12 @@ function Play() {
         
       }, []);  // Aucune dépendance ici
 
-    useEffect(() => {
+      useEffect(() => {
         if (room !== null) {
-            const nouvelleURL = `/lobby?room=${room}`;
-        navigate(nouvelleURL);
+          const nouvelleURL = `/lobby?room=${room}`;
+          navigate(nouvelleURL);
         }
-    }, [room, navigate]);
+      }, [room, navigate]);