diff --git a/cryptide_project/package-lock.json b/cryptide_project/package-lock.json index cc48819..87b4528 100644 --- a/cryptide_project/package-lock.json +++ b/cryptide_project/package-lock.json @@ -16,6 +16,7 @@ "react-bootstrap": "^2.9.1", "react-dom": "^18.2.0", "react-icons": "^4.11.0", + "react-intl": "^6.5.2", "react-router-dom": "^6.18.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" @@ -2495,6 +2496,92 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@formatjs/ecma402-abstract": { + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.3.tgz", + "integrity": "sha512-2Q4hmKQ6CM30mRG/YMdSBW8LXf32BfuOb1FZgG+uVWPC/SQMoiVFz5JaeOukt96v6TZ4ddE+bHCmd611PW38QA==", + "dependencies": { + "@formatjs/intl-localematcher": "0.5.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/fast-memoize": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz", + "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==", + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/icu-messageformat-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.1.tgz", + "integrity": "sha512-ErnXyRdk8AlpGcKskKVYn23aAlWXhI1kt5ek2o3pJwVeMTcrosSESQ8baztdTtJjfQHlB4NBeocfRA5C6DKv2g==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.17.3", + "@formatjs/icu-skeleton-parser": "1.6.3", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/icu-skeleton-parser": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.6.3.tgz", + "integrity": "sha512-Viggz4Pic7oC4uR8z2VroL8H9boiUTTB0TqEsiRb6DHZv7QEcg1BoVQZBkBdLmvxhBS7nwBNrTdbaiW8GOV58Q==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.17.3", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/intl": { + "version": "2.9.6", + "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.9.6.tgz", + "integrity": "sha512-pHvVycu4g1S8zsZhYm0naf/ODCsDXHw00ITMMUM9TK9MYa8zGkf4W5gdItVbUX7elYN3JdDwp0d5fLNBBljhgQ==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.17.3", + "@formatjs/fast-memoize": "2.2.0", + "@formatjs/icu-messageformat-parser": "2.7.1", + "@formatjs/intl-displaynames": "6.6.2", + "@formatjs/intl-listformat": "7.5.1", + "intl-messageformat": "10.5.5", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "typescript": "5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@formatjs/intl-displaynames": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.6.2.tgz", + "integrity": "sha512-8wenvLpInbVEPoVDHiG1QC/dE16io3fptVanMr2jKUqr3938UziygflnUqPlG7U6AHRbU7geCFthfZt8x2NpsA==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.17.3", + "@formatjs/intl-localematcher": "0.5.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/intl-listformat": { + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.5.1.tgz", + "integrity": "sha512-J6heE28cikJ2cUZ7Mvmets418lE96k5OcbgDYQkXDFHVbRnUKCHQwRAXKRCPFEGDrEmcvtqUj7NmZEJYbsJdqQ==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.17.3", + "@formatjs/intl-localematcher": "0.5.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/intl-localematcher": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.0.tgz", + "integrity": "sha512-K1Xpg/8oyfCMxisJQa/fILoeoeyndcM0wcN8QiNG/uM5OAe1BcO1+2yd0gIboDI2tRJEsUi/sSBEYPbgkIdq4A==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", @@ -3845,25 +3932,6 @@ "tslib": "^2.4.0" } }, - "node_modules/@testing-library/dom": { - "version": "9.3.3", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz", - "integrity": "sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.1.3", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=14" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -4092,6 +4160,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -8746,6 +8823,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -9126,6 +9216,17 @@ "node": ">= 0.4" } }, + "node_modules/intl-messageformat": { + "version": "10.5.5", + "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.5.tgz", + "integrity": "sha512-sF+cJCfMn+kGcSeGGRcB1UpBH0/+Ko2KByHj2RpL2qIkRvsrnuDl8zufEkvk+GPosk932C6W1Kq24xWaw+2jDA==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.17.3", + "@formatjs/fast-memoize": "2.2.0", + "@formatjs/icu-messageformat-parser": "2.7.1", + "tslib": "^2.4.0" + } + }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -14385,6 +14486,32 @@ "react": "*" } }, + "node_modules/react-intl": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.5.2.tgz", + "integrity": "sha512-o6rmAViKusLQMVu2bKAULBiQVdkk88TurPUAJiNxUAmoxubSu+pAYjLpOuByM52HSLOKPrRvDXQrrCOSykQusw==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.17.3", + "@formatjs/icu-messageformat-parser": "2.7.1", + "@formatjs/intl": "2.9.6", + "@formatjs/intl-displaynames": "6.6.2", + "@formatjs/intl-listformat": "7.5.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/react": "16 || 17 || 18", + "hoist-non-react-statics": "^3.3.2", + "intl-messageformat": "10.5.5", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "react": "^16.6.0 || 17 || 18", + "typescript": "5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -16460,19 +16587,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/cryptide_project/package.json b/cryptide_project/package.json index 85356cc..4b7c859 100644 --- a/cryptide_project/package.json +++ b/cryptide_project/package.json @@ -10,6 +10,7 @@ "react-bootstrap": "^2.9.1", "react-dom": "^18.2.0", "react-icons": "^4.11.0", + "react-intl": "^6.5.2", "react-router-dom": "^6.18.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" diff --git a/cryptide_project/src/App.js b/cryptide_project/src/App.js index 8774d3c..ee23deb 100644 --- a/cryptide_project/src/App.js +++ b/cryptide_project/src/App.js @@ -1,5 +1,7 @@ //import logo from './res/img/logo.svg'; import React from 'react'; +import { useState } from 'react'; +import { IntlProvider } from 'react-intl'; /* Page */ import Home from './Pages/Home'; @@ -19,8 +21,25 @@ import './App.css'; /* bootstrap */ import 'bootstrap/dist/css/bootstrap.min.css'; +/* Internationnalisation */ +import messagesFr from './Translations/fr.json'; +import messagesEn from './Translations/en.json'; + +const messages = { + fr: messagesFr, + en: messagesEn, +}; function App() { + + //Language par defaut + //const locale = 'fr'; + const [locale, setLocale] = useState('fr'); + + const changeLocale = (newLocale) => { + setLocale(newLocale); + }; + return ( //
//
@@ -28,16 +47,17 @@ function App() { // logo //
//
- - - - - } /> - } /> - } /> - } /> - - + + + + + } /> + } /> + } /> + } /> + + + ); } diff --git a/cryptide_project/src/Components/NavBar.css b/cryptide_project/src/Components/NavBar.css index 8b419d6..ad887b9 100644 --- a/cryptide_project/src/Components/NavBar.css +++ b/cryptide_project/src/Components/NavBar.css @@ -30,4 +30,9 @@ .centerdiv{ display: flex; justify-content: center; +} + +.leftdiv{ + display: flex; + justify-content: start; } \ No newline at end of file diff --git a/cryptide_project/src/Components/NavBar.js b/cryptide_project/src/Components/NavBar.js index 212aace..adf6e36 100644 --- a/cryptide_project/src/Components/NavBar.js +++ b/cryptide_project/src/Components/NavBar.js @@ -5,7 +5,7 @@ import { BsFillPersonPlusFill } from 'react-icons/bs' import './NavBar.css'; -function AppNavbar() { +function AppNavbar({ changeLocale }) { return ( @@ -25,10 +25,18 @@ function AppNavbar() { Rejoindre - +
+ + +
diff --git a/cryptide_project/src/Pages/Home.js b/cryptide_project/src/Pages/Home.js index 1c9925a..4f77db6 100644 --- a/cryptide_project/src/Pages/Home.js +++ b/cryptide_project/src/Pages/Home.js @@ -2,7 +2,7 @@ import React from 'react'; import './Home.css'; // Créez un fichier CSS pour styliser votre composant import '../App.css'; import { Link } from 'react-router-dom'; - +import { FormattedMessage } from 'react-intl'; function Home() { @@ -15,21 +15,21 @@ function Home() {

L'HISTOIRE

- "La cryptozoologie étudie les traces des monstres de légende : les cryptides. Yétis, Chupacabra, bête du gévaudan, Dahut, ect., sont des sujets très sérieux pour vous… Croisez les indices et soyez le premier à les découvrir!" +

LE JEU

- "Chaque joueur possède un indice sur le terrain où se trouve la créature. En recoupant vos informations, il ne peut y avoir qu'une case qui y corresponde. Mais le but est d'être le premier à la trouver. Interrogez vos collègues, et néanmoins concurrents. Ils ne peuvent vous répondre que par «non» ou «peut-être», avec beaucoup de logique et un brin d'audace, vous pourrez rentrer dans la légende!" +

LES +

diff --git a/cryptide_project/src/Translations/en.json b/cryptide_project/src/Translations/en.json new file mode 100644 index 0000000..83bd120 --- /dev/null +++ b/cryptide_project/src/Translations/en.json @@ -0,0 +1,12 @@ +{ + "languageSelector": { + "french": "French", + "english": "English" + }, + + "home.histoire": "Cryptozoology studies the traces of legendary monsters: cryptids. Yetis, Chupacabra, beast of the gevaudan, Dahut, etc. , are very serious topics for you… Cross the clues and be the first to discover them!", + "home.jeu": "Each player has a clue on the field where the creature is located. By cross-referencing your information, there can only be one box. But the goal is to be the first to find it. Ask your colleagues, and nevertheless competitors. They can only answer you by «no» or «maybe», with a lot of logic and a bit of audacity, you can enter the legend!", + "home.plus.1": "A mind-blowing deduction mechanism.", + "home.plus.2": "An immense replayability.", + "home.plus.3": "A surprising and strong theme." +} \ No newline at end of file diff --git a/cryptide_project/src/Translations/fr.json b/cryptide_project/src/Translations/fr.json new file mode 100644 index 0000000..3f4fc3e --- /dev/null +++ b/cryptide_project/src/Translations/fr.json @@ -0,0 +1,10 @@ +{ + "languageSelector.french": "Français", + "languageSelector.english": "Anglais", + + "home.histoire": "La cryptozoologie étudie les traces des monstres de légende : les cryptides. Yétis, Chupacabra, bête du gévaudan, Dahut, etc., sont des sujets très sérieux pour vous… Croisez les indices et soyez le premier à les découvrir!", + "home.jeu": "Chaque joueur possède un indice sur le terrain où se trouve la créature. En recoupant vos informations, il ne peut y avoir qu'une case qui y corresponde. Mais le but est d'être le premier à la trouver. Interrogez vos collègues, et néanmoins concurrents. Ils ne peuvent vous répondre que par «non» ou «peut-être», avec beaucoup de logique et un brin d'audace, vous pourrez rentrer dans la légende!", + "home.plus.1": "Une mécanique de déduction époustouflante.", + "home.plus.2": "Une rejouabilité immense.", + "home.plus.3": "Un thème surprenant et fort." +} \ No newline at end of file