ajout de la gestion des language pour l'anglais et le français sur les paragraphes principaux de la page Home 🌐

1 year ago · a47fad60f3
parent cad34d53bc
commit a47fad60f3
8 changed files with 223 additions and 53 deletions
--- 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",
--- 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"
--- 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 (
  // <div className="App">
  //   <header className="App-header">
@ -28,16 +47,17 @@ function App() {
  //     <img src={logo} className="App-logo" alt="logo" />
  //   </header>
  // </div>
-
-  <BrowserRouter>  
-    <AppNavbar />
-    <Routes>
-      <Route exact path="/" element={<Home />} />
-      <Route path="/jouer" element={<Jouer />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/signup" element={<SignUp />} />
-    </Routes>
-  </BrowserRouter>
+  <IntlProvider locale={locale} messages={messages[locale]}>
+    <BrowserRouter>  
+      <AppNavbar changeLocale={changeLocale} />
+      <Routes>
+        <Route exact path="/" element={<Home />} />
+        <Route path="/jouer" element={<Jouer />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<SignUp />} />
+      </Routes>
+    </BrowserRouter>
+  </IntlProvider>
  );
 }

--- 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;
 }
--- 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 (
        <Navbar expand="lg" className="custom-navbar">
        <Container>
@ -25,10 +25,18 @@ function AppNavbar() {
                    <NavDropdown.Item href="jouer">Rejoindre</NavDropdown.Item>
                </NavDropdown>
            </Nav>
-            <Nav className="ml-auto navbar-title-dd">
-                <Nav.Link href="login" className='navbar-title-dd'> <BiLogInCircle/> Log in</Nav.Link>
-                <Nav.Link href="signup" className='navbar-title-dd'> <BsFillPersonPlusFill/> Sign up</Nav.Link>
-            </Nav>
+            <div className='leftdiv'>
+                <Nav className="ml-auto navbar-title-dd">
+                    <Nav.Link href="login" className='navbar-title-dd'> <BiLogInCircle/> Log in</Nav.Link>
+                    <Nav.Link href="signup" className='navbar-title-dd'> <BsFillPersonPlusFill/> Sign up</Nav.Link>
+                </Nav>
+                <Nav className="me-auto">
+                    <NavDropdown title="Language" className="navbar-title" id="basic-nav-dropdown">
+                        <NavDropdown.Item onClick={() => changeLocale('fr')}>Français</NavDropdown.Item>
+                        <NavDropdown.Item onClick={() => changeLocale('en')}>Anglais</NavDropdown.Item>
+                    </NavDropdown>
+                </Nav>
+            </div>
            </Navbar.Collapse>
        </Container>
        </Navbar>
--- 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() {
            <div>
                <h2>L'HISTOIRE</h2>
                <p>
-                    "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!"
+                    <FormattedMessage id="home.histoire" />
                </p>
            </div>
            <div>
                <h2>LE JEU</h2>
                <p>
-                    "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!"
+                <FormattedMessage id="home.jeu" />
                </p>
            </div>
            <div>
                <h2>LES +</h2>
                <ul>
-                    <li>Une mécanique de déduction époustouflante.</li>
-                    <li>Une rejouabilité immense.</li>
-                    <li>Un thème surprenant et fort.</li>
+                    <li><FormattedMessage id="home.plus.truc"/></li>
+                    <li><FormattedMessage id="home.plus.2"/></li>
+                    <li><FormattedMessage id="home.plus.3"/></li>
                </ul>
            </div>
        </div>
--- a/cryptide_project/src/Translations/en.json
+++ 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."
+}
--- a/cryptide_project/src/Translations/fr.json
+++ 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."
+}