diff --git a/cryptide_project/DB/socialgraph.db b/cryptide_project/DB/socialgraph.db index 223f093..a2e8950 100644 Binary files a/cryptide_project/DB/socialgraph.db and b/cryptide_project/DB/socialgraph.db differ diff --git a/cryptide_project/src/AdressSetup.ts b/cryptide_project/src/AdressSetup.ts index b1722ea..da5fce5 100644 --- a/cryptide_project/src/AdressSetup.ts +++ b/cryptide_project/src/AdressSetup.ts @@ -1,8 +1,6 @@ -// const ADRESSE_WEBSERVER = "http://172.20.10.4:3002" -// const ADRESSE_DBSERVER = "http://172.20.10.4:3003" const ADRESSE_WEBSERVER = "http://localhost:3002" -const ADRESSE_DBSERVER = "http://localhost:3003" +const ADRESSE_DBSERVER = "http://localhost:3003" const tmp = ADRESSE_DBSERVER const tmp2 = ADRESSE_WEBSERVER diff --git a/cryptide_project/src/Components/PersonStatus.tsx b/cryptide_project/src/Components/PersonStatus.tsx index 54b2139..e4ea131 100644 --- a/cryptide_project/src/Components/PersonStatus.tsx +++ b/cryptide_project/src/Components/PersonStatus.tsx @@ -37,7 +37,7 @@ const PersonStatus: React.FC = ({img = Person, state= Person, img = BotImg } - const [buffer, setBuffer] = useState("") + const [buffer, setBuffer] = useState('50%') const [touchedPlayer, setTouchedPlayer] = useState(-2) useEffect(() =>{ @@ -48,10 +48,10 @@ const PersonStatus: React.FC = ({img = Person, state= Person, useEffect(() => { if (playerIndex===index){ - setBuffer('solid 3px green') + setBuffer('5px') } else{ - setBuffer('') + setBuffer('50%') } }, [playerIndex]) @@ -71,7 +71,7 @@ const PersonStatus: React.FC = ({img = Person, state= Person, }; const circleStyle: React.CSSProperties = { backgroundColor: touchedPlayer == index && showCircle ? 'gold' : positionToColor(index), // Changement de la couleur en fonction de la condition - borderRadius: '50%', + borderRadius: buffer, width: '80px', height: '80px', display: 'flex', @@ -84,7 +84,7 @@ const PersonStatus: React.FC = ({img = Person, state= Person, const circleStyleInt: React.CSSProperties = { backgroundColor:'white', - borderRadius: '50%', + borderRadius: buffer, width: '70px', height: '70px', display: 'flex', @@ -111,8 +111,8 @@ const PersonStatus: React.FC = ({img = Person, state= Person, {/* */} -
-
{actualPlayerIndex !== index ? (name.substring(0, name.length - 2).length > 7 ? name.substring(0, name.length - 2).substring(0, 7) + '...' : name) : 'vous'}
+
+
{actualPlayerIndex !== index ? (name.substring(0, name.length - 2).length > 7 ? name.substring(0, name.length - 2).substring(0, 7) + '...' : name.substring(0, name.length - 2)) : 'vous'}
); diff --git a/cryptide_project/src/Components/TutorialGraph.tsx b/cryptide_project/src/Components/TutorialGraph.tsx index d8de1b3..e2602c3 100644 --- a/cryptide_project/src/Components/TutorialGraph.tsx +++ b/cryptide_project/src/Components/TutorialGraph.tsx @@ -24,50 +24,51 @@ import {basePath} from "../AdressSetup" import PersonNetwork from "../model/PersonsNetwork"; interface TutorialGraphProps { - onNodeClick: (shouldShowChoiceBar: boolean) => void; - handleShowTurnBar: (shouldShowTurnBar: boolean) => void - handleTurnBarTextChange: (newTurnBarText: string) => void - setPlayerTouched: (newPlayerTouch: number) => void; - playerTouched: number - changecptTour: (newcptTour : number) => void - addToHistory: (message : string) => void - solo : boolean - isDaily : boolean - isEasy: boolean setNetwork: (network: Network) => void showLast: boolean - setNetworkEnigme: (networkEnigme: Map[]>) => void - askedWrong: boolean - setAskedWrong: (askedWrong: boolean) => void setPlayerIndex: (playerIndex: number) => void - importToPdf: boolean - setImportToPdf: (imp: boolean) => void - importToJSON: boolean - setImportToJSON: (imp: boolean) => void + handleShowTurnBar: (bool: boolean) => void + handleTurnBarTextChange: (text: string) => void + addToHistory: (text: string) => void + setPlayerTouched: (playerIndex: number) => void + playerTouched: number + tutoStep: number + setTutoStep: (step: number) => void } let lastNodes: NodePerson[] = [] let firstIndex = true +let first = true +let touchedPlayer = -1 +let stepTuto = -1 + -const TutorialGraph: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON}) => { +const TutorialGraph: React.FC = ({showLast, setNetwork, setPlayerIndex, handleShowTurnBar, handleTurnBarTextChange, addToHistory, setPlayerTouched, playerTouched, tutoStep, setTutoStep}) => { let cptTour: number = 0 //* Gestion du temps : let initMtn = 0 const {isLoggedIn, user, manager} = useAuth(); - const {setIndiceData} = useGame(); + const {setIndiceData, setActualPlayerIndexData} = useGame(); const params = new URLSearchParams(window.location.search); const navigate = useNavigate(); const [lastIndex, setLastIndex] = useState(-1) - /* + + if (first){ + first = false + setActualPlayerIndexData(0) + handleTurnBarTextChange("C'est à vous de jouer !") + handleShowTurnBar(true) + } + useEffect(() =>{ touchedPlayer=playerTouched - console.log(playerTouched) + /* if (touchedPlayer == -1){ if (!askedWrongLocal){ socket.emit("put correct background", socket.id) @@ -82,9 +83,13 @@ const TutorialGraph: React.FC = ({onNodeClick, handleShowTur else if(touchedPlayer == players.length){ socket.emit("put imossible grey", socket.id) } + */ }, [playerTouched]) - */ + useEffect(() => { + stepTuto = tutoStep + }, [tutoStep]) + useEffect(() => { const tab: NodePerson[] = [] @@ -118,13 +123,15 @@ const TutorialGraph: React.FC = ({onNodeClick, handleShowTur const personNetwork = JSONParser.JSONToNetwork(JSON.stringify(jsonGraph)) const indices = JSONParser.JSONToIndices(jsonIndice) + console.log(indices) + setIndiceData(indices[0]) if (personNetwork == null){ return } const graph = GraphCreator.CreateGraph(personNetwork) - const nodes = graph.nodesPerson; + const nodes = new DataSet(graph.nodesPerson); let n = graph.nodesPerson; @@ -172,6 +179,11 @@ const TutorialGraph: React.FC = ({onNodeClick, handleShowTur network.stabilize(); setNetwork(network) + network.on("click", async (params) => { + + if(params.nodes.length > 0){ + } + }); network.on("dragging", (params) => { if (params.nodes.length > 0) { @@ -180,7 +192,24 @@ const TutorialGraph: React.FC = ({onNodeClick, handleShowTur network.setOptions(initialOptions); setNetwork(network) } - }); + }); + + network.on("click", async (params) => { + if(params.nodes.length > 0){ + if (stepTuto === 0 && touchedPlayer === 1){ + const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0]) + const pers = personNetwork.getPersons().find((p) => p.getId() === node?.id) + if (node !== undefined && pers !== undefined && pers.getName() === "Violet"){ + networkData.nodes.update({id: params.nodes[0], label: node.label + positionToEmoji(1, true)}) + setTutoStep(1) + } + } + } + else{ + setPlayerTouched(-1) + } + }); + }, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu diff --git a/cryptide_project/src/Pages/Tutorial.tsx b/cryptide_project/src/Pages/Tutorial.tsx index f25f4f9..308f6a6 100644 --- a/cryptide_project/src/Pages/Tutorial.tsx +++ b/cryptide_project/src/Pages/Tutorial.tsx @@ -18,6 +18,8 @@ import MGlass from "../res/icon/magnifying-glass.png"; import Reset from "../res/icon/reset.png"; import Oeye from "../res/icon/eye.png"; import Ceye from "../res/icon/hidden.png"; +import ImgBot from "../res/img/bot.png"; + import ava from "../res/img/tuto/tuto-ava.png"; /* nav */ @@ -39,19 +41,22 @@ import Pair from '../model/Pair'; import Indice from '../model/Indices/Indice'; import {basePath} from "../AdressSetup" import TutorialGraph from '../Components/TutorialGraph'; -import JSZip from 'jszip'; +import { useAuth } from '../Contexts/AuthContext'; +import EasyBot from '../model/EasyBot'; let cptNavigation = 0 //@ts-ignore const Tutorial = ({locale, changeLocale}) => { + const {personNetwork, person, indices, players, setPlayersData, indice, actualPlayerIndex} = useGame() + const {user} = useAuth() + const theme = useTheme(); const navigate = useNavigate() - const params = new URLSearchParams(window.location.search); const navigationType = useNavigationType() cptNavigation++ @@ -62,32 +67,17 @@ const Tutorial = ({locale, changeLocale}) => { } } - //* Gestion solo - let IsSolo: boolean = true - const solotmp = params.get('solo'); - if (solotmp == "false"){ - IsSolo=false - } - - //* Gestion daily - let isDaily: boolean = true - const isDailytmp = params.get('daily'); - if (isDailytmp == "false"){ - isDaily=false - } - - - let isEasy: boolean = true - const isEasytmp = params.get('easy'); - if (isEasytmp == "false"){ - isEasy=false - } //* Historique const [history, setHistory] = useState([]); const [showLast, setShowLast] = useState(false) const [askedWrong, setAskedWrong] = useState(false) const [importToPdf, setImportToPdf] = useState(false) const [importToJSON, setImportToJSON] = useState(false) + const [tutoStep, setTutoStep] = useState(0) + + const setTutoStepData = (step: number) => { + setTutoStep(step) + } const setImportToJSONData = (imp: boolean) => { setImportToJSON(imp) @@ -118,8 +108,14 @@ const Tutorial = ({locale, changeLocale}) => { } }, [history]); + useEffect(() => { + if (user == null){ + return + } + setPlayersData([user, new EasyBot("Bot1", "Bot1", ImgBot), new EasyBot("Bot2", "Bot2", ImgBot)]) + }, []) + - const {personNetwork, person, indices} = useGame() const [showChoiceBar, setShowChoiceBar] = useState(false); const [showTurnBar, setShowTurnBar] = useState(false); @@ -160,46 +156,7 @@ const Tutorial = ({locale, changeLocale}) => { setPlayerIndex(playerIndex) } - const generateTEX = async () => { - if (network != null && personNetwork != null && person != null){ - - const zip = new JSZip(); - - if (isDaily && networkEnigme != null){ - const tex = generateLatexCodeEnigme(personNetwork, person, indices, network, networkEnigme) - const blob = new Blob([tex], { type: 'application/x-latex;charset=utf-8' }); - zip.file('socialGraph.tex', tex); - } - else{ - const tex = generateLatexCode(personNetwork, person, indices, network) - const blob = new Blob([tex], { type: 'application/x-latex;charset=utf-8' }); - zip.file('socialGraph.tex', tex); - } - - const imageNames = ['ballon-de-basket.png', 'ballon-de-foot.png', "baseball.png", "bowling.png", "tennis.png"]; // Liste des noms de fichiers d'images - const imagesFolder = 'Script'; - - for (const imageName of imageNames) { - const imageUrl = process.env.PUBLIC_URL + `/${imagesFolder}/${imageName}`; - const response = await fetch(imageUrl); - - if (response.ok) { - const imageBlob = await response.blob(); - zip.file(`${imageName}`, imageBlob); - } else { - console.error(`Erreur de chargement de l'image ${imageName}`); - } - } - - const content = await zip.generateAsync({ type: 'blob' }); - - // Enregistre l'archive en tant que fichier - saveAs(content, 'social_graph.zip'); - - // Utiliser FileSaver pour télécharger le fichier - } - } - + const resetGraph = () => { setisLoading(true); socket.emit("reset graph", socket.id) @@ -264,7 +221,6 @@ const Tutorial = ({locale, changeLocale}) => { const [SwitchEnabled, setSwitchEnabled] = useState(false) const allIndices = Stub.GenerateIndice() - const { indice, players, actualPlayerIndex} = useGame(); const nbPlayer = players.length; const navdeduc = 'deduc?actualId=' + actualPlayerIndex + '&nbPlayer=' + nbPlayer; @@ -282,36 +238,37 @@ const Tutorial = ({locale, changeLocale}) => {
{showTurnBar && }
- + setPlayerIndex={setPlayerIndexData}/>
- - {(!isDaily || (isDaily && isEasy)) && -
- {history.map((item, index) => ( -
{item}
- ))} -
- } +
+ {history.map((item, index) => ( +
{item}
+ ))} +
+ + +
+ +
+ +
- {!IsSolo && } +
- { !IsSolo && -
- -
- } +{/* + + + Joueurs +

Il y a {players.length} joueurs

+ + + + + + */} + + +
+ +
+