From d2214d7d6ff627cd0a81453b5e19e05a81808b0d Mon Sep 17 00:00:00 2001 From: Thomas Chazot Date: Wed, 22 Nov 2023 08:46:43 +0100 Subject: [PATCH] script marche correctement --- cryptide_project/Script/LatexScript.tsx | 167 ------------------ .../src/Components/GraphContainer.tsx | 6 +- cryptide_project/src/Pages/InGame.tsx | 30 +++- cryptide_project/src/Script/LatexScript.tsx | 95 ++++++++++ cryptide_project/src/Script/graph.tex | 131 ++++++++++++++ cryptide_project/src/Translations/en.json | 4 +- cryptide_project/src/Translations/fr.json | 4 +- 7 files changed, 261 insertions(+), 176 deletions(-) delete mode 100644 cryptide_project/Script/LatexScript.tsx create mode 100644 cryptide_project/src/Script/LatexScript.tsx create mode 100644 cryptide_project/src/Script/graph.tex diff --git a/cryptide_project/Script/LatexScript.tsx b/cryptide_project/Script/LatexScript.tsx deleted file mode 100644 index aed90de..0000000 --- a/cryptide_project/Script/LatexScript.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import PersonNetwork from "../src/model/PersonsNetwork"; -import Person from "../src/model/Person"; -import GenerateNetwork from "../src/model/NetworkGenerator"; -import NetworkGenerator from "../src/model/NetworkGenerator"; - -import fs from 'fs'; -import Stub from "../src/model/Stub"; -import GameCreator from "../src/model/GameCreator"; -import Indice from "../src/model/Indices/Indice"; -import { SportToString } from "../src/model/EnumExtender"; -import GraphCreator from "../src/model/Graph/GraphCreator"; -import { DataSet, Network } from "vis-network"; - -function generateLatexCode(personsNet : PersonNetwork, choosenPerson : Person, choosenIndices : Indice[]) { - let latexCode = ""; - - - //*Setup - latexCode += "\\documentclass[11pt]{article}\n" - latexCode += "\\usepackage{fullpage}\n" - latexCode += "\\usepackage{times}\n" - latexCode += "\\usepackage{tikz}\n" - latexCode += "\\usepackage{paralist}\n" - - latexCode += "\\usetikzlibrary {shapes.multipart}\n" - - latexCode += "\\newcommand{\\Basketball}{\\includegraphics[width=.5cm]{ballon-de-basket.png}}\n" - latexCode += "\\newcommand{\\Football}{\\includegraphics[width=.4cm]{ballon-de-foot.png}}\n" - latexCode += "\\newcommand{\\Bowling}{\\includegraphics[width=.5cm]{bowling.png}}\n" - latexCode += "\\newcommand{\\Baseball}{\\includegraphics[width=.5cm]{baseball.png}}\n" - latexCode += "\\newcommand{\\Tennis}{\\includegraphics[width=.5cm]{tennis.png}}\n" - - - //** Header - latexCode+= "\\begin{document}\n" - latexCode+= "\\thispagestyle{empty}\n" - latexCode+= "Voici le graphe de SocialGraphe\n" - latexCode+= "\\begin{center}\n" - latexCode+= "\\begin{tikzpicture}[scale=.9]\n" - - - //? Coordonnée en position. - //! marche pas - // const graph = GraphCreator.CreateGraph(personsNet) - - // const container = document.getElementById('graph-container'); - // if (!container) { - // console.error("Container not found"); - // return; - // } - // // Charger les données dans le graph - // const nodes = new DataSet(graph.nodesPerson); - - // // Configuration des options du Graphe - // const initialOptions = { - // layout: { - // improvedLayout: true, - // hierarchical: { - // enabled: false, - // direction: 'LR', // LR (Left to Right) ou autre selon votre préférence - // sortMethod: 'hubsize' - // } - // }, - // physics: { - // enabled: true, - // barnesHut: { - // gravitationalConstant: -1000, - // springConstant: 0.001, - // springLength: 100 - // } - // } - // }; - - // const networkData = { nodes: nodes, edges: graph.edges }; - // const network = new Network(container, networkData, initialOptions); - - - personsNet.getPersons().forEach((person, index) => { - - - // //? Coordonnée en forme de grille. - const xCoordinate = index % 5; - const yCoordinate = Math.floor(index / 5); - const scaledX = xCoordinate * 4; - const scaledY = yCoordinate * 4; - - latexCode += ` \\node[draw, circle split] (${person.getId()}) at (${scaledX},${scaledY}) { ${person.getName()} \\nodepart{lower}`; - - - - //? Coordonnée en position. - //! marche pas - // var nodesData = network.getPositions(); - // // for (var nodeId in nodesData) { - // // if (nodesData.hasOwnProperty(nodeId)) { - // // var position = nodesData[nodeId]; - // // console.log("Nœud " + nodeId + " - Position : x = " + position.x + ", y = " + position.y); - // // } - // // } - // // latexCode += ` \\node[draw, circle split] (${person.getId()}) at (${x},${y}) { ${person.getName()} \\nodepart{lower}`; //x et y de la position - - // // Obtenir les coordonnées du nœud - // const nodeId = person.getId().toString(); - // const position = nodesData[nodeId]; - // if (position) { - // const x = position.x.toFixed(2); // Arrondir à 2 décimales - // const y = position.y.toFixed(2); - - // latexCode += ` \\node[draw, circle split] (${person.getId()}) at (${x},${y}) { ${person.getName()} \\nodepart{lower}`; - - // person.getSports().forEach((sport) => { latexCode += ` \\${SportToString(sport, 'fr')}{}` }); - // latexCode += "};\n"; - // } else { - // console.error(`Les coordonnées du nœud ${nodeId} ne sont pas disponibles.`); - // } - - - person.getSports().forEach((sport) => { latexCode += ` \\${SportToString(sport, 'fr')}{}`}) - latexCode += "};\n"; - }); - - personsNet.getPersons().forEach((person) => { - person.getFriends().forEach((friend) => { - latexCode += ` \\draw (${person.getId()}) -- (${friend.getId()});\n`; - }); - console.log(person.getFriends().length); - }); - - latexCode += "\\end{tikzpicture}\n"; - latexCode += "\\end{center}\n"; - - //* Zone d'énoncé : - - latexCode += "\n\n\\paragraph{Première énigme}\n" - - - latexCode += "Trouver qui est le coupable avec les indices suivants.\n" - latexCode += "\\begin{compactitem}\n" - - - choosenIndices.forEach((indice, index) => { - - latexCode += `\\item Indice ${index + 1} : ${indice.ToString('fr')}.\n` - }) - latexCode += "\\end{compactitem}\n" - - //* Solution - latexCode += "% Solution : " + choosenPerson.getName() + "\n"; - - - latexCode += "\\end{document}\n" - return latexCode; -} - - -const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(4, 30); -const latexCode = generateLatexCode(networkPerson, choosenPerson, choosenIndices); - - -const filePath = './graph.tex'; -if (typeof latexCode === 'undefined') { - console.log('Variable is undefined'); -} -else{ - fs.writeFileSync(filePath, latexCode, 'utf-8'); -} -console.log(`Le code LaTeX a été enregistré dans le fichier : ${filePath}`); diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index 415c419..21b39b5 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -33,6 +33,7 @@ interface MyGraphComponentProps { changecptTour: (newcptTour : number) => void addToHistory: (message : string) => void solo : boolean + setNetwork: (network: Network) => void } let lastAskingPlayer = 0 @@ -50,7 +51,7 @@ let firstLap = true let cptHistory = 0 -const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, addToHistory}) => { +const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, addToHistory, setNetwork}) => { let cptTour: number = 0 const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData } = useGame(); @@ -237,6 +238,8 @@ let cptTour: number = 0 const networkData = { nodes: nodes, edges: graph.edges }; const network = new Network(container, networkData, initialOptions); + setNetwork(network) + if (!solo){ socket.on("asked all", (id) =>{ const pers = personNetwork.getPersons().find((p) => p.getId() == id) @@ -435,6 +438,7 @@ let cptTour: number = 0 // Un nœud a été cliqué initialOptions.physics.enabled = false; network.setOptions(initialOptions); + setNetwork(network) } }); diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index 65f525a..4b54565 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -37,6 +37,8 @@ import Color from '../model/Color'; import { useGame } from '../Contexts/GameContext'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { NavLink } from 'react-router-dom'; +import { Network } from 'vis-network'; +import generateLatexCode from '../Script/LatexScript'; //@ts-ignore const InGame = ({locale, changeLocale}) => { @@ -69,13 +71,19 @@ const InGame = ({locale, changeLocale}) => { }, [history]); - + const {personNetwork, person, indices} = useGame() const [showChoiceBar, setShowChoiceBar] = useState(false); const [showTurnBar, setShowTurnBar] = useState(false); const [turnBarText, setTurnBarText] = useState(""); const [playerTouched, setPlayerTouched] = useState(-2) + const [network, setNetwork] = useState(null) + + const setNetworkData = (network: Network) => { + setNetwork(network) + } + const handleNodeClick = (shouldShowChoiceBar: boolean) => { setShowChoiceBar(shouldShowChoiceBar); }; @@ -93,6 +101,12 @@ const InGame = ({locale, changeLocale}) => { setTurnBarText(newTurnBarText) } + const generateTEX = () => { + if (network != null && personNetwork != null && person != null){ + generateLatexCode(personNetwork, person, indices, network) + } + } + /* 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 ? @@ -149,7 +163,7 @@ const InGame = ({locale, changeLocale}) => { }; const [SwitchEnabled, setSwitchEnabled] = useState(false) - const indices = Stub.GenerateIndice() + const allIndices = Stub.GenerateIndice() const { indice, players } = useGame(); @@ -164,7 +178,8 @@ const InGame = ({locale, changeLocale}) => { addToHistory={addToHistory} solo={IsSolo} setPlayerTouched={handleSetPlayerTouched} - playerTouched={playerTouched}/> + playerTouched={playerTouched} + setNetwork={setNetworkData}/> @@ -194,7 +209,6 @@ const InGame = ({locale, changeLocale}) => { paramètres -
{/* //? redirection impossible apparament (securité des navigateur @@ -229,6 +243,14 @@ const InGame = ({locale, changeLocale}) => { }}> indice + +
{/* diff --git a/cryptide_project/src/Script/LatexScript.tsx b/cryptide_project/src/Script/LatexScript.tsx new file mode 100644 index 0000000..dbd7352 --- /dev/null +++ b/cryptide_project/src/Script/LatexScript.tsx @@ -0,0 +1,95 @@ +import PersonNetwork from "../model/PersonsNetwork"; +import Person from "../model/Person"; +import GenerateNetwork from "../model/NetworkGenerator"; +import NetworkGenerator from "../model/NetworkGenerator"; + +import fs from 'fs'; +import Stub from "../model/Stub"; +import GameCreator from "../model/GameCreator"; +import Indice from "../model/Indices/Indice"; +import { ColorToString, SportToString } from "../model/EnumExtender"; +import GraphCreator from "../model/Graph/GraphCreator"; +import { DataSet, Network } from "vis-network"; + +function generateLatexCode(personsNet : PersonNetwork, choosenPerson : Person, choosenIndices : Indice[], network: Network) { + let latexCode = ""; + + + //*Setup + latexCode += "\\documentclass[11pt]{article}\n" + latexCode += "\\usepackage{fullpage}\n" + latexCode += "\\usepackage{times}\n" + latexCode += "\\usepackage{tikz}\n" + latexCode += "\\usepackage{paralist}\n" + latexCode += "\\usepackage{geometry}\n" + + latexCode += "\\usetikzlibrary {shapes.multipart}\n" + latexCode += "\\geometry{margin=0.5cm}\n" + latexCode += "\\newcommand{\\Basketball}{\\includegraphics[width=.5cm]{ballon-de-basket.png}}\n" + latexCode += "\\newcommand{\\Football}{\\includegraphics[width=.4cm]{ballon-de-foot.png}}\n" + latexCode += "\\newcommand{\\Bowling}{\\includegraphics[width=.5cm]{bowling.png}}\n" + latexCode += "\\newcommand{\\Baseball}{\\includegraphics[width=.5cm]{baseball.png}}\n" + latexCode += "\\newcommand{\\Tennis}{\\includegraphics[width=.5cm]{tennis.png}}\n" + + + //** Header + latexCode+= "\\begin{document}\n" + latexCode+= "\\thispagestyle{empty}\n" + latexCode+= "Voici le graphe de SocialGraphe\n" + latexCode+= "\\begin{center}\n" + latexCode+= "\\begin{tikzpicture}[scale=.17]\n" + + + personsNet.getPersons().forEach((person, index) => { + + var nodesData = network.getPositions(); + // Obtenir les coordonnées du nœud + const nodeId = person.getId().toString(); + const position = nodesData[nodeId]; + if (position) { + const x = (position.x / 9).toFixed(2); // Arrondir à 2 décimales + const y = (position.y / 9).toFixed(2); + + latexCode += ` \\node[draw, circle split, align=center] (${person.getId()}) at (${x},${y}) { ${person.getName()} \\\\ ${person.getAge()} \\nodepart{lower}`; + latexCode += `${ColorToString(person.getColor(), "fr")} \\\\` + person.getSports().forEach((sport) => { latexCode += ` \\${SportToString(sport, 'fr')}{}` }); + latexCode += "};\n"; + } else { + console.error(`Les coordonnées du nœud ${nodeId} ne sont pas disponibles.`); + } + }); + + personsNet.getPersons().forEach((person) => { + person.getFriends().forEach((friend) => { + latexCode += ` \\draw (${person.getId()}) -- (${friend.getId()});\n`; + }); + console.log(person.getFriends().length); + }); + + latexCode += "\\end{tikzpicture}\n"; + latexCode += "\\end{center}\n"; + + //* Zone d'énoncé : + + latexCode += "\n\n\\paragraph{Première énigme}\n" + + + latexCode += "Trouver qui est le coupable avec les indices suivants.\n" + latexCode += "\\begin{compactitem}\n" + + + choosenIndices.forEach((indice, index) => { + + latexCode += `\\item Indice ${index + 1} : ${indice.ToString('fr')}.\n` + }) + latexCode += "\\end{compactitem}\n" + + //* Solution + latexCode += "% Solution : " + choosenPerson.getName() + "\n"; + + latexCode += "\\end{document}\n" + + console.log(latexCode) +} + +export default generateLatexCode \ No newline at end of file diff --git a/cryptide_project/src/Script/graph.tex b/cryptide_project/src/Script/graph.tex new file mode 100644 index 0000000..c1e5454 --- /dev/null +++ b/cryptide_project/src/Script/graph.tex @@ -0,0 +1,131 @@ +\documentclass[11pt]{article} +\usepackage{fullpage} +\usepackage{times} +\usepackage{tikz} +\usepackage{paralist} +\usetikzlibrary {shapes.multipart} +\newcommand{\Basketball}{\includegraphics[width=.5cm]{ballon-de-basket.png}} +\newcommand{\Football}{\includegraphics[width=.4cm]{ballon-de-foot.png}} +\newcommand{\Bowling}{\includegraphics[width=.5cm]{bowling.png}} +\newcommand{\Baseball}{\includegraphics[width=.5cm]{baseball.png}} +\newcommand{\Tennis}{\includegraphics[width=.5cm]{tennis.png}} +\begin{document} +\thispagestyle{empty} +Voici le graphe de SocialGraphe +\begin{center} +\begin{tikzpicture}[scale=.17] + \node[draw, circle split] (0) at (17.56,12.89) { Noah \nodepart{lower} \Bowling{}}; + \node[draw, circle split] (1) at (10.33,-12.44) { Victoria \nodepart{lower} \Baseball{} \Basketball{}}; + \node[draw, circle split] (2) at (47.11,-11.56) { Ava \nodepart{lower} \Tennis{} \Football{}}; + \node[draw, circle split] (3) at (42.89,9.67) { Joseph \nodepart{lower} \Tennis{}}; + \node[draw, circle split] (4) at (-35.44,-31.89) { Daniel \nodepart{lower} \Basketball{} \Football{} \Bowling{}}; + \node[draw, circle split] (5) at (35.44,-45.00) { Violet \nodepart{lower} \Baseball{}}; + \node[draw, circle split] (6) at (-14.56,49.78) { Aurora \nodepart{lower} \Bowling{} \Baseball{} \Basketball{}}; + \node[draw, circle split] (7) at (-5.44,-4.78) { Stella \nodepart{lower} \Tennis{} \Football{}}; + \node[draw, circle split] (8) at (-28.22,-11.44) { Brayden \nodepart{lower} \Football{} \Baseball{}}; + \node[draw, circle split] (9) at (-25.56,25.22) { Sophia \nodepart{lower} \Bowling{} \Basketball{}}; + \node[draw, circle split] (10) at (-34.67,-52.11) { Aurora \nodepart{lower} \Tennis{}}; + \node[draw, circle split] (11) at (-9.22,-58.67) { Grace \nodepart{lower} \Football{} \Bowling{}}; + \node[draw, circle split] (12) at (-14.67,-20.56) { William \nodepart{lower} \Baseball{} \Basketball{} \Tennis{}}; + \node[draw, circle split] (13) at (-53.22,-11.00) { Connor \nodepart{lower} \Basketball{} \Football{}}; + \node[draw, circle split] (14) at (17.33,35.44) { Amelia \nodepart{lower} \Tennis{} \Bowling{}}; + \node[draw, circle split] (15) at (45.00,33.33) { Riley \nodepart{lower} \Baseball{}}; + \node[draw, circle split] (16) at (-6.00,32.67) { Carter \nodepart{lower} \Tennis{} \Bowling{}}; + \node[draw, circle split] (17) at (30.11,32.78) { Nathan \nodepart{lower} \Baseball{} \Basketball{}}; + \node[draw, circle split] (18) at (-1.33,-23.89) { Noah \nodepart{lower} \Football{} \Football{}}; + \node[draw, circle split] (19) at (25.11,-3.11) { Ryan \nodepart{lower} \Bowling{} \Tennis{}}; + \node[draw, circle split] (20) at (-1.33,6.33) { Isabella \nodepart{lower} \Baseball{}}; + \node[draw, circle split] (21) at (15.00,-41.78) { Alexander \nodepart{lower} \Basketball{} \Bowling{} \Baseball{}}; + \node[draw, circle split] (22) at (2.67,22.56) { Emily \nodepart{lower} \Football{}}; + \node[draw, circle split] (23) at (26.33,-22.56) { Matthew \nodepart{lower} \Basketball{} \Tennis{}}; + \node[draw, circle split] (24) at (-45.11,8.44) { Aurora \nodepart{lower} \Basketball{}}; + \node[draw, circle split] (25) at (-2.00,-44.00) { Mia \nodepart{lower} \Tennis{} \Bowling{} \Baseball{}}; + \node[draw, circle split] (26) at (-8.78,11.67) { Liam \nodepart{lower} \Football{}}; + \node[draw, circle split] (27) at (-20.89,5.00) { Henry \nodepart{lower} \Basketball{} \Football{}}; + \node[draw, circle split] (28) at (-0.56,66.00) { Aiden \nodepart{lower} \Tennis{} \Baseball{}}; + \node[draw, circle split] (29) at (-45.67,31.67) { Nora \nodepart{lower} \Bowling{} \Basketball{}}; + \draw (0) -- (19); + \draw (0) -- (14); + \draw (0) -- (20); + \draw (0) -- (3); + \draw (0) -- (17); + \draw (1) -- (19); + \draw (1) -- (21); + \draw (1) -- (12); + \draw (1) -- (23); + \draw (2) -- (19); + \draw (2) -- (23); + \draw (3) -- (0); + \draw (3) -- (15); + \draw (4) -- (12); + \draw (4) -- (8); + \draw (5) -- (23); + \draw (6) -- (16); + \draw (6) -- (28); + \draw (7) -- (26); + \draw (7) -- (8); + \draw (7) -- (18); + \draw (8) -- (4); + \draw (8) -- (7); + \draw (8) -- (13); + \draw (8) -- (27); + \draw (9) -- (26); + \draw (9) -- (29); + \draw (9) -- (16); + \draw (10) -- (11); + \draw (11) -- (10); + \draw (11) -- (25); + \draw (12) -- (1); + \draw (12) -- (4); + \draw (13) -- (8); + \draw (14) -- (0); + \draw (14) -- (16); + \draw (15) -- (3); + \draw (16) -- (6); + \draw (16) -- (9); + \draw (16) -- (14); + \draw (16) -- (26); + \draw (17) -- (0); + \draw (18) -- (7); + \draw (18) -- (21); + \draw (18) -- (25); + \draw (18) -- (23); + \draw (19) -- (0); + \draw (19) -- (1); + \draw (19) -- (2); + \draw (20) -- (0); + \draw (20) -- (27); + \draw (20) -- (22); + \draw (21) -- (1); + \draw (21) -- (18); + \draw (22) -- (20); + \draw (23) -- (1); + \draw (23) -- (2); + \draw (23) -- (5); + \draw (23) -- (18); + \draw (24) -- (27); + \draw (24) -- (29); + \draw (25) -- (11); + \draw (25) -- (18); + \draw (26) -- (7); + \draw (26) -- (9); + \draw (26) -- (16); + \draw (27) -- (8); + \draw (27) -- (20); + \draw (27) -- (24); + \draw (28) -- (6); + \draw (29) -- (9); + \draw (29) -- (24); +\end{tikzpicture} +\end{center} + + +\paragraph{Première énigme} +Trouver qui est le coupable avec les indices suivants. +\begin{compactitem} +\item Indice 1 : Le suspect a ou a plus de 30 ans. +\item Indice 2 : Le suspect a les cheveux Noir ou Roux . +\item Indice 3 : Le suspect 3 amis. +\end{compactitem} +% Solution : Ryan +\end{document} \ No newline at end of file diff --git a/cryptide_project/src/Translations/en.json b/cryptide_project/src/Translations/en.json index b462ccd..0766578 100644 --- a/cryptide_project/src/Translations/en.json +++ b/cryptide_project/src/Translations/en.json @@ -42,11 +42,11 @@ "and": "and", "or": "or", - "or_sport": "and/or", + "or_sport": "or", "age_indice_start": "The suspect is between", - "age_indice_more_start": "The suspect is older than or", + "age_indice_more_start": "The suspect is at least", "age_indice_end": "years old", "color_edges_start": "The suspect has at least one friend with", diff --git a/cryptide_project/src/Translations/fr.json b/cryptide_project/src/Translations/fr.json index a60b340..393059e 100644 --- a/cryptide_project/src/Translations/fr.json +++ b/cryptide_project/src/Translations/fr.json @@ -42,10 +42,10 @@ "and": "et", "or": "ou", - "or_sport": "et/ou du", + "or_sport": "ou du", "age_indice_start": "Le suspect a entre", - "age_indice_more_start": "Le suspect a ou a plus de", + "age_indice_more_start": "Le suspect a au moins", "age_indice_end": "ans", "color_edges_start": "Le suspect a au moins un ami avec les cheveux",