diff --git a/cryptide_project/package-lock.json b/cryptide_project/package-lock.json index cc48819..1a71877 100644 --- a/cryptide_project/package-lock.json +++ b/cryptide_project/package-lock.json @@ -16,8 +16,10 @@ "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", + "typescript": "^5.2.2", "web-vitals": "^2.1.4" } }, @@ -2495,6 +2497,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 +3933,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 +4161,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 +8824,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 +9217,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 +14487,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", @@ -16461,16 +16589,15 @@ } }, "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, + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/unbox-primitive": { diff --git a/cryptide_project/package.json b/cryptide_project/package.json index 85356cc..b5867f3 100644 --- a/cryptide_project/package.json +++ b/cryptide_project/package.json @@ -10,8 +10,10 @@ "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", + "typescript": "^5.2.2", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/cryptide_project/src/App.js b/cryptide_project/src/App.js deleted file mode 100644 index 8774d3c..0000000 --- a/cryptide_project/src/App.js +++ /dev/null @@ -1,45 +0,0 @@ -//import logo from './res/img/logo.svg'; -import React from 'react'; - -/* Page */ -import Home from './Pages/Home'; -import Jouer from './Pages/Jouer'; -import Login from './Pages/LoginForm.js'; -import SignUp from './Pages/SignUpForm.js'; - -/* Component */ -import AppNavbar from './Components/NavBar.js'; - -/* nav */ -import { BrowserRouter, Route, Routes } from "react-router-dom"; - -/* Style */ -import './App.css'; - -/* bootstrap */ -import 'bootstrap/dist/css/bootstrap.min.css'; - - -function App() { - return ( - //
- //
- // - // logo - //
- //
- - - - - } /> - } /> - } /> - } /> - - - ); -} - -export default App; - diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx new file mode 100644 index 0000000..c66f9df --- /dev/null +++ b/cryptide_project/src/App.tsx @@ -0,0 +1,70 @@ +//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'; +import Jouer from './Pages/Jouer'; +import Login from './Pages/LoginForm'; +import SignUp from './Pages/SignUpForm'; + +/* Component */ +import AppNavbar from './Components/NavBar'; + +/* nav */ +import { BrowserRouter, Route, Routes } from "react-router-dom"; + +/* Style */ +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'); + + + // @ts-ignore + const changeLocale = (newLocale) => { + setLocale(newLocale); + }; + + return ( + //
+ //
+ // + // logo + //
+ //
+ + + // @ts-ignore + + + + + } /> + } /> + } /> + } /> + + + + ); +} + +export default App; + 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 deleted file mode 100644 index 212aace..0000000 --- a/cryptide_project/src/Components/NavBar.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap'; -import { BiLogInCircle } from 'react-icons/bi'; -import { BsFillPersonPlusFill } from 'react-icons/bs' - -import './NavBar.css'; - -function AppNavbar() { - return ( - - - -
-

Cryptide

-
by Crypteam
-
- - - - - - - - - ); -} - -export default AppNavbar; diff --git a/cryptide_project/src/Components/NavBar.tsx b/cryptide_project/src/Components/NavBar.tsx new file mode 100644 index 0000000..b728eb8 --- /dev/null +++ b/cryptide_project/src/Components/NavBar.tsx @@ -0,0 +1,68 @@ +import React from 'react'; + +/* Naviagtion */ +import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap'; + +/* Lang */ +import { FormattedMessage } from 'react-intl'; + +/* Icon */ +import { BiLogInCircle } from 'react-icons/bi'; +import { BsFillPersonPlusFill } from 'react-icons/bs'; +import { HiLanguage } from 'react-icons/hi2'; + +/* Components */ +import './NavBar.css'; + +// @ts-ignore +function AppNavbar({ changeLocale}) { + return ( + + + +
+

Cryptide

+
by Crypteam
+
+ + + + +
+ + +
+ + + + ); +} + +export default AppNavbar; diff --git a/cryptide_project/src/Pages/Home.js b/cryptide_project/src/Pages/Home.js deleted file mode 100644 index 1c9925a..0000000 --- a/cryptide_project/src/Pages/Home.js +++ /dev/null @@ -1,54 +0,0 @@ -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'; - - - -function Home() { - return ( - -
- -
- -
-

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 +

-
    -
  • Une mécanique de déduction époustouflante.
    • -
  • Une rejouabilité immense.
    • -
  • Un thème surprenant et fort.
    • -
-
-
- -
- -
-

Temps : 45 minutes

-

Joueurs : 3 à 5 joueurs

-

Age : 10 ans et +

-

-------------------------------

-

Créé par :
Hal Duncan & Ruth Veevers

-

Illustré par :
Kwanchai Moriya

- {/* */} -
- Aller à la page Page2 -
-
- ); -} - -export default Home; diff --git a/cryptide_project/src/Pages/Home.tsx b/cryptide_project/src/Pages/Home.tsx new file mode 100644 index 0000000..05ccbe4 --- /dev/null +++ b/cryptide_project/src/Pages/Home.tsx @@ -0,0 +1,54 @@ +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() { + return ( + +
+ +
+ +
+

+

+ +

+
+
+

+

+ +

+
+
+

+
    +
    • +
    • +
    • +
+
+
+ +
+ +
+

+

+

+

-------------------------------

+


Hal Duncan & Ruth Veevers

+


Kwanchai Moriya

+ {/* */} +
+ +
+
+ ); +} + +export default Home; diff --git a/cryptide_project/src/Pages/Jouer.js b/cryptide_project/src/Pages/Jouer.tsx similarity index 100% rename from cryptide_project/src/Pages/Jouer.js rename to cryptide_project/src/Pages/Jouer.tsx diff --git a/cryptide_project/src/Pages/LoginForm.js b/cryptide_project/src/Pages/LoginForm.tsx similarity index 100% rename from cryptide_project/src/Pages/LoginForm.js rename to cryptide_project/src/Pages/LoginForm.tsx diff --git a/cryptide_project/src/Pages/SignUpForm.js b/cryptide_project/src/Pages/SignUpForm.tsx similarity index 100% rename from cryptide_project/src/Pages/SignUpForm.js rename to cryptide_project/src/Pages/SignUpForm.tsx diff --git a/cryptide_project/src/Translations/en.json b/cryptide_project/src/Translations/en.json new file mode 100644 index 0000000..acc8709 --- /dev/null +++ b/cryptide_project/src/Translations/en.json @@ -0,0 +1,30 @@ +{ + "languageSelector.french": "French", + "languageSelector.english": "English", + + "home.histoire.title": "HISTORY", + "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.title": "THE GAME", + "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.title": "STRENGTH", + "home.plus.1": "A mind-blowing deduction mechanism.", + "home.plus.2": "An immense replayability.", + "home.plus.3": "A surprising and strong theme.", + + "game.time": "Time : 45 minutes", + "game.players": "Players : 3 to 5 players", + "game.age": "Age: 10 years and over", + "game.createdBy": "Created By :", + "game.illustratedBy": "Illustrated By :", + + "log_in":" Log in ", + "sign_up":" Sign up ", + + "join" : "Join", + "create_room" : "Create room", + "play_solo" : "Single player", + + "play" : "PLAY" +} \ 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..6f6ec71 --- /dev/null +++ b/cryptide_project/src/Translations/fr.json @@ -0,0 +1,30 @@ +{ + "languageSelector.french": "Français", + "languageSelector.english": "Anglais", + + "home.histoire.title": "L'HISTOIRE", + "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.title": "LE JEU", + "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.title": "LES +", + "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.", + + "game.time": "Temps : 45 minutes", + "game.players": "Joueurs : 3 à 5 joueurs", + "game.age": "Âge : 10 ans et +", + "game.createdBy": "Créé par :", + "game.illustratedBy": "Illustré par :", + + "log_in":" Se connecter ", + "sign_up":" S'inscrire ", + + + "join" : "Rejoindre", + "create_room" : "Créer une partie", + "play_solo" : "Jouer seul", + "play" : "JOUER" +} diff --git a/cryptide_project/tsconfig.json b/cryptide_project/tsconfig.json new file mode 100644 index 0000000..9d04a87 --- /dev/null +++ b/cryptide_project/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "moduleResolution": "node", + "target": "es5", + "lib": ["dom", "es2015"], + "jsx": "react", + "strict": true, + + }, +} +// "noImplicitAny": false, \ No newline at end of file