Affichage question lors d'un clic sur node

cryptide_project/src/Components/ChoiceBar.css

@@ -0,0 +1,22 @@
+.choice-bar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.choice-bar-heading {
+    font-size: 1.5em;
+    color: #333;
+}
+
+.choice-bar-button {
+    margin: 5px;
+    padding: 10px;
+    background-color: lightseagreen;
+    color: #fff;
+    border: 2px solid grey;
+    border-radius: 5px;
+    cursor: pointer;
+}
+  

cryptide_project/src/Components/ChoiceBar.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import './ChoiceBar.css';
+
+const ChoiceBar = () => {
+  const players = ['Player1', 'Player2', 'Player3']; 
+
+  return (
+    <div className="choice-bar-container">
+      <h3 className="choice-bar-heading">Quel joueur voulez-vous interroger ?</h3>
+      <div>
+        {players.map((player, index) => (
+          <button key={index} className="choice-bar-button">
+            {player}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ChoiceBar;

cryptide_project/src/Components/GraphContainer.css

@@ -1,6 +1,6 @@
 #graph-container {
     width: 100%;
-    height: 80vh;
+    height: 75vh;
     display: flex;
     flex-direction: column;
     align-items: center;

cryptide_project/src/Components/GraphContainer.tsx

@@ -6,6 +6,7 @@ import IndiceChooser from "../source/IndiceChooser";
 import NetworkGenerator from "../source/NetworkGenerator";
 import Stub from "../source/Stub";
 import "./GraphContainer.css";
+import NodePerson from "../source/Graph/NodePerson";
 
 const edgesCreator = new EdgesCreator()
 
@@ -27,8 +28,11 @@ const graph = GraphCreator.CreateGraph(network)
 console.log(network)
 console.log(graph)
 
+interface MyGraphComponentProps {
+  onNodeClick: (shouldShowChoiceBar: boolean) => void;
+}
 
-const MyGraphComponent = () => {
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick}) => {
   useEffect(() => {
     const container = document.getElementById('graph-container');
     if (!container) {
@@ -71,6 +75,16 @@ const MyGraphComponent = () => {
         }
     });
 
+    network.on("click", (params) => {
+      if(params.nodes.length > 0){
+        // Renvoyer un true pour afficher la choice bar
+        onNodeClick(true)
+      }
+      else{
+        // Renvoyer un false pour cacher la choice bar
+        onNodeClick(false)
+      }
+    });
   }, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu
 
   return (

cryptide_project/src/Pages/InGame.tsx

@@ -1,8 +1,23 @@
-import React from "react";
-import GraphContainer from "../Components/GraphContainer";
+import React, { useState } from 'react';
+import GraphContainer from '../Components/GraphContainer';
+import ChoiceBar from '../Components/ChoiceBar';
 
-export default function InGame() {
+const InGame = () => {
+    const [showChoiceBar, setShowChoiceBar] = useState(false);
+  
+    const handleNodeClick = (shouldShowChoiceBar: boolean) => {
+      setShowChoiceBar(shouldShowChoiceBar);
+    };
+  
     return (
-        <GraphContainer />
+      <div>
+        <GraphContainer onNodeClick={handleNodeClick} />
+        <div id="bottom-container">
+            {showChoiceBar && <ChoiceBar />}
+        </div>
+      </div>
     );
-}
+  };
+  
+
+export default InGame;