From abbcdef16567c0918cd8a3c843bbfb769ef6d72c Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Thu, 7 Dec 2023 11:28:44 +0100 Subject: [PATCH 1/4] fix de l'emoji qui s'affiche pour les pseudos trop courts --- cryptide_project/DB/socialgraph.db | Bin 28672 -> 28672 bytes .../src/Components/PersonStatus.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/cryptide_project/DB/socialgraph.db b/cryptide_project/DB/socialgraph.db index 223f093c6153da6b6aa51a456c2f657c1c2a9f41..a2e895095d402eece0797772bc7b21f84ed399ab 100644 GIT binary patch delta 260 zcmZp8z}WDBae_4C?1?hYjI%c;bon!KPJZn#Da6hj!N9+S-;wVbUn`#q?1WhIeGiADxS#=3?^ zx(4P7h6Ywf=2phW5ghCcf*>1Y diff --git a/cryptide_project/src/Components/PersonStatus.tsx b/cryptide_project/src/Components/PersonStatus.tsx index 54b2139..4b6c5d2 100644 --- a/cryptide_project/src/Components/PersonStatus.tsx +++ b/cryptide_project/src/Components/PersonStatus.tsx @@ -112,7 +112,7 @@ 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'}
); From d97ed83ae4776690f9a293403382b907ca8c5982 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Thu, 7 Dec 2023 12:01:52 +0100 Subject: [PATCH 2/4] changement de l'interface du joueur actuel :art: --- cryptide_project/server/api/server.js | 2 +- cryptide_project/src/AdressSetup.ts | 4 ++-- cryptide_project/src/Components/PersonStatus.tsx | 12 ++++++------ 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/cryptide_project/server/api/server.js b/cryptide_project/server/api/server.js index e035cff..f511624 100644 --- a/cryptide_project/server/api/server.js +++ b/cryptide_project/server/api/server.js @@ -14,7 +14,7 @@ const port = 3003; // Middleware app.use(cors( { - origin: ["http://172.20.10.4:3000", "http://172.20.10.4:3000"], + origin: ["http://localhost:3000", "http://172.20.10.4:3000"], credentials: true } )); // Autoriser les requêtes cross-origin diff --git a/cryptide_project/src/AdressSetup.ts b/cryptide_project/src/AdressSetup.ts index cbfa6bc..da5fce5 100644 --- a/cryptide_project/src/AdressSetup.ts +++ b/cryptide_project/src/AdressSetup.ts @@ -1,6 +1,6 @@ -const ADRESSE_WEBSERVER = "http://172.20.10.4:3002" +const ADRESSE_WEBSERVER = "http://localhost:3002" -const ADRESSE_DBSERVER = "http://172.20.10.4: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 4b6c5d2..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,7 +111,7 @@ 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.substring(0, name.length - 2)) : 'vous'}
From 49f4beb2056ae4ff315c075bdd69bbad1e983b38 Mon Sep 17 00:00:00 2001 From: Thomas Chazot Date: Thu, 7 Dec 2023 12:57:58 +0100 Subject: [PATCH 3/4] =?UTF-8?q?d=C3=A9but=20tuto2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Components/TutorialGraph.tsx | 26 ++-- cryptide_project/src/Pages/Tutorial.tsx | 127 +++++------------- 2 files changed, 44 insertions(+), 109 deletions(-) diff --git a/cryptide_project/src/Components/TutorialGraph.tsx b/cryptide_project/src/Components/TutorialGraph.tsx index d8de1b3..74cf44f 100644 --- a/cryptide_project/src/Components/TutorialGraph.tsx +++ b/cryptide_project/src/Components/TutorialGraph.tsx @@ -24,26 +24,16 @@ 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[] = [] @@ -51,7 +41,7 @@ let firstIndex = true -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 : diff --git a/cryptide_project/src/Pages/Tutorial.tsx b/cryptide_project/src/Pages/Tutorial.tsx index 34e6073..79e5eba 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 JSZip from 'jszip'; /* nav */ @@ -39,18 +41,22 @@ import Pair from '../model/Pair'; import Indice from '../model/Indices/Indice'; import {basePath} from "../AdressSetup" import TutorialGraph from '../Components/TutorialGraph'; +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++ @@ -61,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) @@ -117,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); @@ -159,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) @@ -263,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; @@ -272,36 +229,24 @@ const Tutorial = ({locale, changeLocale}) => {
{showTurnBar && }
- + setPlayerIndex={setPlayerIndexData}/>
- - {(!isDaily || (isDaily && isEasy)) && -
- {history.map((item, index) => ( -
{item}
- ))} -
- } +
+ {history.map((item, index) => ( +
{item}
+ ))} +
+
- {!IsSolo && } +
{/* @@ -394,11 +339,11 @@ const Tutorial = ({locale, changeLocale}) => { */} - { !IsSolo && -
- -
- } + +
+ +
+ Date: Thu, 7 Dec 2023 13:45:30 +0100 Subject: [PATCH 4/4] step 1 --- .../src/Components/TutorialGraph.tsx | 51 ++++++++++++++++--- 1 file changed, 45 insertions(+), 6 deletions(-) diff --git a/cryptide_project/src/Components/TutorialGraph.tsx b/cryptide_project/src/Components/TutorialGraph.tsx index 74cf44f..e2602c3 100644 --- a/cryptide_project/src/Components/TutorialGraph.tsx +++ b/cryptide_project/src/Components/TutorialGraph.tsx @@ -38,6 +38,10 @@ interface TutorialGraphProps { let lastNodes: NodePerson[] = [] let firstIndex = true +let first = true +let touchedPlayer = -1 +let stepTuto = -1 + @@ -48,16 +52,23 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP 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) @@ -72,9 +83,13 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP else if(touchedPlayer == players.length){ socket.emit("put imossible grey", socket.id) } + */ }, [playerTouched]) - */ + useEffect(() => { + stepTuto = tutoStep + }, [tutoStep]) + useEffect(() => { const tab: NodePerson[] = [] @@ -108,13 +123,15 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP 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; @@ -162,6 +179,11 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP network.stabilize(); setNetwork(network) + network.on("click", async (params) => { + + if(params.nodes.length > 0){ + } + }); network.on("dragging", (params) => { if (params.nodes.length > 0) { @@ -170,7 +192,24 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP 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