From e7b0dfb9b4a3018be4333a7e86d1c95a6b8dc2b2 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Thu, 14 Dec 2023 11:27:10 +0100 Subject: [PATCH] =?UTF-8?q?mise=20en=20place=20de=20la=20traducton=20sur?= =?UTF-8?q?=20les=20pages=20de=20jeu=20et=20sur=20la=20premi=C3=A8re=20par?= =?UTF-8?q?tie=20du=20tuto=20:memo:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Components/GraphContainer.tsx | 20 ++-- cryptide_project/src/Components/TurnBar.tsx | 1 - .../src/Components/TutorialGraph.tsx | 10 +- cryptide_project/src/Pages/InGame.tsx | 8 +- cryptide_project/src/Pages/Tutorial.tsx | 93 ++++++++++--------- cryptide_project/src/Translations/en.json | 16 +++- cryptide_project/src/Translations/fr.json | 87 ++++++++++++++++- 7 files changed, 169 insertions(+), 66 deletions(-) diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index a664541..78a90ed 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -21,6 +21,7 @@ import { json } from "body-parser"; import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'; import {basePath} from "../AdressSetup" +import { useIntl } from "react-intl"; interface MyGraphComponentProps { onNodeClick: (shouldShowChoiceBar: boolean) => void; @@ -88,6 +89,11 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS //* Gestion du temps : let initMtn = 0 + + //* traduction + const intl = useIntl(); + + const {isLoggedIn, user, manager} = useAuth(); const { indices, indice, person, personNetwork, setNodeIdData, players, setPlayersData, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData, dailyEnigme, setNbCoupData, settempsData, setNetworkDataData, setSeedData, nodesC, temps} = useGame(); const params = new URLSearchParams(window.location.search); @@ -319,8 +325,8 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS }) } setActualPlayerIndexData(index) - if (playerIndex == actualPlayerIndex){ - handleTurnBarTextChange("À vous de jouer") + if (playerIndex == actualPlayerIndex){ + handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' })) handleShowTurnBar(true) } } @@ -513,7 +519,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS setPlayerIndex(playerIndex) setLastIndex(playerIndex) if (playerIndex===actualPlayerIndex){ - handleTurnBarTextChange("À vous de jouer") + handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' })) handleShowTurnBar(true) } } @@ -534,7 +540,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS setPlayerIndex(index) setLastIndex(index) if (actualPlayerIndex==index){ - handleTurnBarTextChange("À vous de jouer") + handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' })) handleShowTurnBar(true) } }) @@ -602,7 +608,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS } if (playerIndex === actualPlayerIndex){ - handleTurnBarTextChange("À vous de jouer") + handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' })) handleShowTurnBar(true) } else{ @@ -647,7 +653,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS setAskedWrong(true) askedWrongBot=true handleShowTurnBar(true) - handleTurnBarTextChange("Mauvais choix, posez un carré !") + handleTurnBarTextChange(intl.formatMessage({ id: 'game.wrong' })) touchedPlayer = actualPlayerIndex putGreyBackgroud() } @@ -669,7 +675,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS setPlayerIndex(playerIndex) setLastIndex(playerIndex) if (playerIndex === actualPlayerIndex){ - handleTurnBarTextChange("À vous de jouer") + handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' })) handleShowTurnBar(true) } else{ diff --git a/cryptide_project/src/Components/TurnBar.tsx b/cryptide_project/src/Components/TurnBar.tsx index 53df6d4..d72d03c 100644 --- a/cryptide_project/src/Components/TurnBar.tsx +++ b/cryptide_project/src/Components/TurnBar.tsx @@ -12,7 +12,6 @@ const TurnBar: React.FC = ({text})=> { style={{ borderColor: theme.colors.secondary }}> - {/* texte changeable et a traduire */}

{text}

); diff --git a/cryptide_project/src/Components/TutorialGraph.tsx b/cryptide_project/src/Components/TutorialGraph.tsx index c9190d1..12317b7 100644 --- a/cryptide_project/src/Components/TutorialGraph.tsx +++ b/cryptide_project/src/Components/TutorialGraph.tsx @@ -22,6 +22,7 @@ import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'; import {basePath} from "../AdressSetup" import PersonNetwork from "../model/PersonsNetwork"; +import { useIntl } from "react-intl"; interface TutorialGraphProps { setNetwork: (network: Network) => void @@ -53,6 +54,9 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP //* Gestion du temps : let initMtn = 0 + //* traduction + const intl = useIntl(); + const {isLoggedIn, user, manager} = useAuth(); const {setIndiceData, setIndicesData, setActualPlayerIndexData, setWinnerData, setPlayersData, setNetworkDataData, setPersonData} = useGame(); const params = new URLSearchParams(window.location.search); @@ -63,7 +67,7 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP if (first){ first = false setActualPlayerIndexData(0) - handleTurnBarTextChange("C'est à vous de jouer !") + handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' })) handleShowTurnBar(true) } @@ -234,7 +238,7 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP nodes.update({id: node.id, label: node.label + positionToEmoji(2, false)}) setPlayerTouched(-1) displayModalstep(2); - handleTurnBarTextChange("Mauvais choix, posez un carré !") + handleTurnBarTextChange(intl.formatMessage({ id: 'game.wrong' })) const tabGrey = [7, 0, 4, 1, 8] for (const id of tabGrey){ const node = nodes.get().find((n: NodePerson) => n.id === id) @@ -272,7 +276,7 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP if (node4 === undefined)return; nodes.update({id: node4.id, label: node4.label + positionToEmoji(2, false)}) setPlayerIndex(0) - handleTurnBarTextChange("A vous de jouer !") + handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' })) handleShowTurnBar(true) setTutoStep(3) displayModalstep(3); diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index 8fb887e..0c533e9 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -375,7 +375,7 @@ const InGame = ({locale, changeLocale}) => { backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary }}> - : {cptTour} + : {cptTour} } @@ -500,7 +500,7 @@ const InGame = ({locale, changeLocale}) => { backdrop={false} style={{ height: '20%', width: '25%', top: '60vh' }}> - Indice + {indice?.ToString(locale)} @@ -515,12 +515,12 @@ const InGame = ({locale, changeLocale}) => { placement='top' style={{height: '30%', width: '30%', left: '70%' }}> - param Paramètres + param diff --git a/cryptide_project/src/Pages/Tutorial.tsx b/cryptide_project/src/Pages/Tutorial.tsx index 113f51e..1d9637c 100644 --- a/cryptide_project/src/Pages/Tutorial.tsx +++ b/cryptide_project/src/Pages/Tutorial.tsx @@ -56,6 +56,7 @@ import TutorialGraph from '../Components/TutorialGraph'; import { useAuth } from '../Contexts/AuthContext'; import EasyBot from '../model/EasyBot'; import { set } from 'lodash'; +import { FormattedMessage } from 'react-intl'; let cptNavigation = 0 @@ -362,7 +363,7 @@ const Tutorial = ({locale, changeLocale}) => { */} - Les règles du jeu + - Ce bouton vous mène à la page d'information du jeu, avec toutes les règles du jeu, que ce soit les objectifs, les indices, le déroulement, etc. + @@ -540,9 +541,9 @@ const Tutorial = ({locale, changeLocale}) => { - L'indice + - Ce bouton vous permet d'afficher votre indice personnel, gardez le secret ! Il s'agit de votre meilleur atout pour gagner. + @@ -552,13 +553,13 @@ const Tutorial = ({locale, changeLocale}) => { - Place à la pratique ! + - Bien joué ! Vous avez maintenanttoutes les bases d'un veritable détéctive. +
- Vous allez à présent avoir un exercice pratique pour la résolution d'une enquête, au côté de ces très chère Batman et Scooby-Doo. +
- Cliquer sur "Poursuivre" pour commencer votre première partie. + @@ -569,11 +570,11 @@ const Tutorial = ({locale, changeLocale}) => {
- +
- { step != -1 && ()} - { step === 6 ? () : - } + { step != -1 && ()} + { step === 6 ? () : + } @@ -586,25 +587,25 @@ const Tutorial = ({locale, changeLocale}) => { size="lg" style={{ maxHeight: '100vh'}}> - Tutoriel + - Premier pas + - Bienvenue dans cette seconde partie, où nous allons apprendre le déroulé d'une veritable enquête. +
- Dans un premier temps, sélectionnez le joueur Scooby-Doo et questionnez le à propos du suspect nommé Violet en cliquant sur cette dernière. + Scooby-DooViolet - + @@ -616,7 +617,7 @@ const Tutorial = ({locale, changeLocale}) => { size="lg" style={{ maxHeight: '100vh'}}> - Tutoriel + {step === 0 && ( @@ -685,7 +686,7 @@ const Tutorial = ({locale, changeLocale}) => { size="lg" style={{ maxHeight: '100vh'}}> - Tutoriel + diff --git a/cryptide_project/src/Translations/en.json b/cryptide_project/src/Translations/en.json index 9d9756e..f79839d 100644 --- a/cryptide_project/src/Translations/en.json +++ b/cryptide_project/src/Translations/en.json @@ -26,6 +26,11 @@ "sign_up":" Sign up ", "log_out":" Log out ", + "indice":"Hint", + "param":"Settings", + "sfx":"Activate SFX", + "aide":"Help", + "join" : "Join", "create_room" : "Create room", "play_solo" : "Single player", @@ -72,7 +77,9 @@ "navbar.presentation":"Presentation", "navbar.info":"Information", - "round" : "Round", + "turn" : "Round", + "square":"square", + "round":"round", "play.jouerseul": "Play alone", "play.enigme": "Solve an enigma", @@ -113,7 +120,8 @@ "lobby.nbNode": "Select the number of nodes (between 20 and 60)", "lobby.start": "Start the game!", - + "game.yourTurn":"It's your turn !", + "game.wrong":"Wrong choice, put a square !", "informations" : "Information", "info.intro.title":"Introduction to the game :", @@ -202,5 +210,7 @@ "info.mdj.enigme.medium": "Intermediate Enigma", "info.mdj.enigme.medium.txt": "In this game mode, you don't have access to clues, but you have just enough information about some suspects to be able to guess the culprit. This information will help you guess the clues, and the culprit is the suspect for whom all the clues match. If you select the wrong suspect, don't worry! You'll have information about that suspect, making it easier for you to find the culprit. The goal is to find the culprit in the minimum number of guesses.", "info.mdj.enigme.hard": "Hard Enigma", - "info.mdj.enigme.hard.txt": "This final variant is similar to the intermediate enigma; however, you must find the culprit on the first try, or you lose! It's up to you to play! The goal is to find the culprit in the minimum amount of time." + "info.mdj.enigme.hard.txt": "This final variant is similar to the intermediate enigma; however, you must find the culprit on the first try, or you lose! It's up to you to play! The goal is to find the culprit in the minimum amount of time.", + + "tutorial.title": "Tutorial" } \ No newline at end of file diff --git a/cryptide_project/src/Translations/fr.json b/cryptide_project/src/Translations/fr.json index c79cfc2..3cb819a 100644 --- a/cryptide_project/src/Translations/fr.json +++ b/cryptide_project/src/Translations/fr.json @@ -26,6 +26,13 @@ "sign_up":" S'inscrire ", "log_out":" Se déconnecter ", + "indice":"Indice", + "param":"Paramètres", + "sfx":"Activer les SFX", + + "aide":"Aide", + + "majUn":"Un", "join" : "Rejoindre", "create_room" : "Créer une partie", @@ -77,7 +84,22 @@ "weak" : "Faible", "none" : "Aucun", - "round" : "Tour", + "turn" : "Tour", + "square":"carré", + "round":"rond", + + "step" : "Étape", + "previous" : "Précédent", + "next" : "Suivant", + "continue" : "Poursuivre", + "compris":"Compris !", + "close" : "Fermer", + + + "color.green":"Vert", + "color.blue":"Bleu", + "color.red":"Rouge", + "color.yellow":"Jaune", "play.jouerseul": "Jouer seul", "play.enigme": "Résoudre une énigme", @@ -119,6 +141,8 @@ "lobby.start" : "Démarrer la partie !", + "game.yourTurn":"À vous de jouer !", + "game.wrong":"Mauvais choix, posez un carré !", "informations" : "Informations", "info.intro.title":"Introduction au jeu :", @@ -208,5 +232,64 @@ "info.mdj.enigme.medium":"L'énigme intermédiaire", "info.mdj.enigme.medium.txt":"Dans ce mode de jeu, vous n'avez pas accès au indice, mais vous avez juste assez d'informations sur certains suspects pour pouvoir deviner le coupable. Ces informations vont vous permettre de deviner les indices, et le coupable est le suspect pour lequel tous les indices correspondent. Si jamais vous sélectionnez le mauvais suspect, pas de panique ! Vous aurez les informations relatives à ce dernier, ce qui vous facilitera le travail pour trouver le coupable. L'objectif est donc de trouver le coupable en un minimum de coup.", "info.mdj.enigme.hard":"L'énigme difficile", - "info.mdj.enigme.hard.txt":"Cette dernière variante est similaire à l'énigme intermédiaire, cependant, il faudra trouver du premier coup sinon, vous aurez perdu ! À vous de jouer ! L'objectif est donc de trouver le coupable en un minimum de temps." + "info.mdj.enigme.hard.txt":"Cette dernière variante est similaire à l'énigme intermédiaire, cependant, il faudra trouver du premier coup sinon, vous aurez perdu ! À vous de jouer ! L'objectif est donc de trouver le coupable en un minimum de temps.", + + "tutorial.title":"Tutoriel", + "tuto.title.1":"Bienvenue dans SocialGraph !", + "tuto.txt.1.1":"Vous incarnez un détective assoiffé de gloire, confronté à un crime.", + "tuto.txt.1.2":"Cependant, d'autres enquêteurs sont également sur le coup, tous cherchant à décrocher le titre de meilleur détective du monde.", + "tuto.txt.1.3":"Chacun possède un indice crucial pour identifier le coupable, il va falloir déduire l'indice de vos concurrents si vous souhaitez l'emporter !", + "tuto.txt.1.4":"Interrogez vos concurrents pour obtenir des réponses par oui ou non, mais méfiez-vous, un refus a des conséquences.", + "tuto.txt.1.5":"Soyez le premier à déduire les indices des autres et à trouver le coupable pour remporter la reconnaissance tant convoitée.", + "tuto.txt.1.6":"Si vous avez le moindre doute, cliquer sur le bouton 'aide' pour afficher l'étape actuel du tuto", + + "tuto.title.2":"Les Suspects", + "tuto.txt.2.1":"Voici comment est représenté un suspect, chaque suspect possède différentes caractéristiques, que ce soit leur nom, âge, sport et leur couleur de cheveux.", + "tuto.txt.2.2":"Par exemple, ici, nous avons ", + "tuto.txt.2.2.1":", qui a ", + "tuto.txt.2.2.2":", qui pratique du ", + "tuto.txt.2.2.3":" et du ", + "tuto.txt.2.2.4":", qui a les cheveux ", + "tuto.txt.2.2.5":" et qui possède ", + + "tuto.title.3":"Les indices", + "tuto.txt.3.1":"Dans ce jeu, chaque détective possède un indice, qui permet d'identifier une caractéristique du coupable, votre indice est le suivant :", + "tuto.txt.3.2":"Le suspect a entre 20 et 29 ans", + + "tuto.title.4":"Les Détectives", + "tuto.txt.4.1":"Il est possible de voir les détectives sur le côté gauche de l'écran, ils sont représentés par des cercles de couleurs différentes. Le contour carré signifie que ce détective est en pleine réflexion.", + "tuto.txt.4.2":"Pour interroger un détective à propos d'un suspect, il suffit de le sélectionner, puis de cliquer sur le suspect que vous souhaitez. Il vous répondra donc ce qu'il pense de ce suspect selon son indice.", + + "tuto.title.5":"Les réponses", + "tuto.txt.5.1":"Les détéctives vous répondrons que par des ronds ou des carrés de leur couleur.", + "tuto.txt.5.2":" signifie que son indice innocente le suspect", + "tuto.txt.5.3":" signifie que son indice peut incréminer le suspect", + "tuto.txt.5.4":"Par exemple, ici :", + "tuto.txt.5.5.1":"l'indice du détéctive Scooby-Doo ", + "tuto.txt.5.5.2":" permet d'innocenter Logan", + "tuto.txt.5.6":"Eleanor peut être suspectée par l'indice du détective Batman ", + "tuto.txt.5.7.1":"Evelyn est innocentée par l'indice de ", + "tuto.txt.5.7.2":"3 détéctive différents", + + "tuto.title.6":"Les règles du jeu", + "tuto.txt.6.1.1":"Ce bouton vous mène à la page d'", + "tuto.txt.6.1.2":"information du jeu", + "tuto.txt.6.1.3":", avec toutes les règles du jeu, que ce soit les objectifs, les indices, le déroulement, etc.", + + "tuto.title.7":"L'indice", + "tuto.txt.7.1":"Ce bouton vous permet d'afficher votre indice personnel, gardez le secret ! Il s'agit de votre meilleur atout pour gagner.", + + "tuto.title.8":"Place à la pratique !", + "tuto.txt.8.1":"Bien joué ! Vous avez maintenanttoutes les bases d'un veritable détéctive.", + "tuto.txt.8.2":"Vous allez à présent avoir un exercice pratique pour la résolution d'une enquête, au côté de ces très chère Batman et Scooby-Doo.", + "tuto.txt.8.3":"Cliquer sur 'Poursuivre' pour commencer votre première partie.", + + + "tuto.title.9":"Premier pas", + "tuto.txt.9.1":"Bienvenue dans cette seconde partie, où nous allons apprendre le déroulé d'une veritable enquête.", + "tuto.txt.9.2.1":"Dans un premier temps, sélectionnez le joueur ", + "tuto.txt.9.2.2":" et questionnez le à propos du suspect nommé ", + "tuto.txt.9.2.3":" en cliquant sur cette dernière.", + } +