ajout logo et modif navbar

1 year ago · db7654cfd0
parent b4304554ff 66863d3b51
commit db7654cfd0
41 changed files with 776 additions and 98 deletions
--- a/cryptide_project/package-lock.json
+++ b/cryptide_project/package-lock.json
@ -25,6 +25,7 @@
        "react-intl": "^6.5.2",
        "react-router-dom": "^6.18.0",
        "react-scripts": "5.0.1",
+        "react-switch": "^7.0.0",
        "typescript": "^5.2.2",
        "vis-network": "^9.1.9",
        "web-vitals": "^2.1.4"
@ -2411,6 +2412,18 @@
        "postcss-selector-parser": "^6.0.10"
      }
    },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@ -3997,6 +4010,25 @@
        "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",
@ -4225,6 +4257,12 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.44",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.44.tgz",
+      "integrity": "sha512-pdGBkAh4ggfXAkiwgmTdROJe3mwvLWJYm6JiaAwCtskAU0Weh+JQyyMTbhvxjxD2n8sr8PrxVwyDzmpnK4pUrQ==",
+      "peer": true
+    },
    "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",
@ -6189,6 +6227,12 @@
      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
    },
+    "node_modules/component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
+      "peer": true
+    },
    "node_modules/compressible": {
      "version": "2.0.18",
      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@ -11877,6 +11921,12 @@
        "node": ">=4.0"
      }
    },
+    "node_modules/keycharm": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
+      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
+      "peer": true
+    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@ -14702,6 +14752,18 @@
        }
      }
    },
+    "node_modules/react-switch": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz",
+      "integrity": "sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-transition-group": {
      "version": "4.4.5",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@ -16896,6 +16958,20 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/vis-data": {
+      "version": "7.1.8",
+      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.8.tgz",
+      "integrity": "sha512-h/cxRDVqnpqqpTBqwUbbKIpWVovOQ+h5rbFS/kio8TUH1np98Lv9bHdWZxahJlyzBaBR9KGvwGHB00jn3MjLbQ==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "vis-util": "^5.0.1"
+      }
+    },
    "node_modules/vis-network": {
      "version": "9.1.9",
      "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-9.1.9.tgz",
@ -16913,6 +16989,23 @@
        "vis-util": "^5.0.1"
      }
    },
+    "node_modules/vis-util": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.6.tgz",
+      "integrity": "sha512-HyAZ+x3q6/Xh6OFPIQOGPOPgnHL9KVNvWW6+k3aTCbAG8Tq7vncgRat6oY8ywZ7j1Fq0mOfUb6fLrFvfI9nUKg==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "@egjs/hammerjs": "^2.0.0",
+        "component-emitter": "^1.3.0"
+      }
+    },
    "node_modules/w3c-hr-time": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
--- a/cryptide_project/package.json
+++ b/cryptide_project/package.json
@ -19,6 +19,7 @@
    "react-intl": "^6.5.2",
    "react-router-dom": "^6.18.0",
    "react-scripts": "5.0.1",
+    "react-switch": "^7.0.0",
    "typescript": "^5.2.2",
    "vis-network": "^9.1.9",
    "web-vitals": "^2.1.4"
--- a/cryptide_project/src/App.tsx
+++ b/cryptide_project/src/App.tsx
@ -12,16 +12,20 @@ import Lobby from './Pages/Lobby';
 import InGame from './Pages/InGame';

 import EndGame from './Pages/EndGame';
+import InfoPage from './Pages/InfoPage';

 /* Component */
 import AppNavbar from './Components/NavBar';

 /* nav */
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";

 /* Style */
 import './App.css';

+import { ThemeProvider } from './Style/ThemeContext';
+// import theme from './Style/Theme';
+
 /* bootstrap */
 import 'bootstrap/dist/css/bootstrap.min.css';

@ -45,6 +49,11 @@ function App() {
    setLocale(newLocale);
  };

+
+  //const location = useLocation();
+  const hasNavbarVisible = ["/", "/login", "/signup", "/play", "/lobby", "/endgame"]//.includes(window.location.pathname);
+
+
  return (
  // <div className="App">
  //   <header className="App-header">
@ -52,10 +61,13 @@ function App() {
  //     <img src={logo} className="App-logo" alt="logo" />
  //   </header>
  // </div>
+
  //@ts-ignore
  <IntlProvider locale={locale} messages={messages[locale]}>
+    <ThemeProvider>
      <BrowserRouter>  
-      <AppNavbar changeLocale={changeLocale} />
+        {/* <AppNavbar changeLocale={changeLocale} /> */}
+        {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
@ -63,9 +75,11 @@ function App() {
          <Route path="/play" element={<Play/>} />
          <Route path="/lobby" element={<Lobby/>} />
          <Route path="/endgame" element={<EndGame/>} />
-        <Route path="/game" element={<InGame/>} />
+          <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale} />} />
+          <Route path="/info" element={<InfoPage/>} />
        </Routes>
      </BrowserRouter>
+    </ThemeProvider>
  </IntlProvider>
  );
 }
--- a/cryptide_project/src/Components/BigButtonNav.tsx
+++ b/cryptide_project/src/Components/BigButtonNav.tsx
@ -3,11 +3,20 @@ import { Link } from 'react-router-dom';
 import './ButtonImgNav.css';
 import { FormattedMessage } from 'react-intl';

+import { useTheme } from '../Style/ThemeContext';
+import COLORS from '../Style/Color';
 //@ts-ignore
 function BigButtonNav({ dest, img}) {
+    
+    const theme = useTheme();
+
+    // const mystyle = {
+    //     backgroundColor: "#0064E0",
+    // };
+
    return (
    <Link to={dest} className="link-without-underline">
-        <button className='bigbuttonNabImg'>
+        <button className='bigbuttonNabImg' style={{ backgroundColor: theme.colors.primary }}>
            <img src={img} alt="Button Image" height="100" width="100"/>
        </button>
    </Link>
--- a/cryptide_project/src/Components/ButtonImgNav.css
+++ b/cryptide_project/src/Components/ButtonImgNav.css
@ -3,8 +3,8 @@
    width: auto;
    height: 65px;

-    background-color: #85C9C2;
-    color: #2A4541;
+    /* background-color: #85C9C2; */
+    /* color: #2A4541; */
    border-radius: 15px;
    border-width: 0;

@ -20,8 +20,8 @@
    width: auto;
    height: 100px;

-    background-color: #85C9C2;
-    color: #2A4541;
+    /* background-color: #85C9C2; */
+    /* color: #2A4541; */
    border-radius: 15px;
    border-width: 0;

--- a/cryptide_project/src/Components/ButtonImgNav.tsx
+++ b/cryptide_project/src/Components/ButtonImgNav.tsx
@ -3,11 +3,14 @@ import { Link } from 'react-router-dom';
 import './ButtonImgNav.css';
 import { FormattedMessage } from 'react-intl';

+import { useTheme } from '../Style/ThemeContext';
+
 //@ts-ignore
 function ButtonImgNav({ dest, img, text = "" }) {
+    const theme = useTheme();
    return (
-    <Link to={dest} className="link-without-underline">
-        <button className='buttonNabImg'>
+    <Link to={dest} className="link-without-underline"> {/*target='_blank' ==> ouvre un nouvelle onglet*/ }
+        <button className='buttonNabImg' style={{ backgroundColor: theme.colors.primary, color: theme.colors.secondary}}>
            <img src={img} alt="Button Image" height="50" width="50"/>
            <p>{text}</p>
        </button>
--- a/cryptide_project/src/Components/ChoiceBar.css
+++ b/cryptide_project/src/Components/ChoiceBar.css
@ -13,10 +13,9 @@
 .choice-bar-button {
    margin: 5px;
    padding: 10px;
-    background-color: lightseagreen;
+    /* background-color: lightseagreen; */
    color: #fff;
    border: 2px solid grey;
    border-radius: 5px;
    cursor: pointer;
 }
-  
--- a/cryptide_project/src/Components/ChoiceBar.tsx
+++ b/cryptide_project/src/Components/ChoiceBar.tsx
@ -1,15 +1,16 @@
 import React from 'react';
 import './ChoiceBar.css';
+import { useTheme } from '../Style/ThemeContext';

 const ChoiceBar = () => {
  const players = ['Player1', 'Player2', 'Player3']; 
-
+  const theme = useTheme();
  return (
    <div className="choice-bar-container">
      <h3 className="choice-bar-heading">Quel joueur voulez-vous interroger ?</h3>
      <div>
        {players.map((player, index) => (
-          <button key={index} className="choice-bar-button">
+          <button key={index} className="choice-bar-button" style={{ backgroundColor: theme.colors.primary }}>
            {player}
          </button>
        ))}
--- a/cryptide_project/src/Components/GraphContainer.css
+++ b/cryptide_project/src/Components/GraphContainer.css
@ -1,10 +1,14 @@
 #graph-container {
    width: 100%;
-    height: 75vh;
+    height: 100vh;
+    /* padding: 20px; */
+    
+    /* border-radius: 25px; */
+    box-sizing: border-box;
+    
    display: flex;
    flex-direction: column;
    align-items: center;
+    
    background-color: #f5f5f5;
-    padding: 20px;
-    box-sizing: border-box;
 }
--- a/cryptide_project/src/Components/NavBar.css
+++ b/cryptide_project/src/Components/NavBar.css
@ -1,6 +1,6 @@

 .custom-navbar{
-    background-color: #85C9C2;
+    /* background-color: #85C9C2; */
    color: #fff;
    text-emphasis-color: #fff;
 }
@ -17,7 +17,6 @@


 .navbar-title-dd a {
-    background-color: #2A4541;
    color: #fff;
    border-radius: 15;
    padding: 10px 20px; /* Ajustez le rembourrage selon vos préférences */
--- a/cryptide_project/src/Components/NavBar.tsx
+++ b/cryptide_project/src/Components/NavBar.tsx
@ -17,18 +17,26 @@ import logo from '../res/img/logo2_preview_rev_1.png';
 /* Components */
 import './NavBar.css';

+/* Style */
+import { useTheme } from '../Style/ThemeContext';
+
 // @ts-ignore
 function AppNavbar({changeLocale}) {
+    const theme = useTheme();
    return (
-        <Navbar expand="lg" className="custom-navbar">
+        <Navbar expand="lg" className="custom-navbar" style={{ backgroundColor: theme.colors.primary }}>
        <Container>
            <Navbar.Brand href="/">
                <img src={logo} alt="logo" className="logo"/>
+                {/* <div>
+                    <h2 style={{color:theme.colors.text}}>Cryptide</h2>
+                    <h6 style={{color:theme.colors.text}}>by Crypteam</h6>
+                </div> */}
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
-                <NavDropdown title={<span><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown">
+                <NavDropdown title={<span style={{color:theme.colors.text}}><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown" >
                    <NavDropdown.Item href="play"><FormattedMessage id="play_solo"/> </NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="play"><FormattedMessage id="create_room"/> </NavDropdown.Item>
@ -37,11 +45,11 @@ function AppNavbar({changeLocale}) {
            </Nav>
            <div className='leftdiv'>
                <Nav className="ml-auto navbar-title-dd">
-                    <Nav.Link href="login" className='navbar-title-dd'> 
+                    <Nav.Link href="login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}> 
                        <BiLogInCircle/>
                        <FormattedMessage id="log_in"/> 
                    </Nav.Link>
-                    <Nav.Link href="signup" className='navbar-title-dd'> 
+                    <Nav.Link href="signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}> 
                        <BsFillPersonPlusFill/>
                        <FormattedMessage id="sign_up"/> 
                    </Nav.Link>
--- a/cryptide_project/src/Components/PersonStatus.tsx
+++ b/cryptide_project/src/Components/PersonStatus.tsx
@ -1,15 +1,21 @@
 import React from 'react';
+
+/* Style */
 import '../Style/Global.css'
+import { useTheme } from '../Style/ThemeContext';
+
+/* Ressources */
 import Person from '../res/img/Person.png'
 import leave from '../res/img/bot.png'

 //@ts-ignore
 function PersonStatus({img = Person, state= leave, name = "Dummy"}) {
+    const theme=useTheme();
    return (
        <div className='centerDivV'>
            <img src={img} alt="player" height="100" width="100"/>
            <h4>{name}</h4>
-            <div className='statusDiv'>
+            <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
                <img src={state} alt="state" height="30" width="30"/>
            </div>
        </div>
--- a/cryptide_project/src/Components/PlayerList.tsx
+++ b/cryptide_project/src/Components/PlayerList.tsx
@ -0,0 +1,20 @@
+
+import React from 'react';
+import PersonStatus from './PersonStatus';
+
+//@ts-ignore
+function PlayerList({ players }) {
+    return (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
+            {
+                //@ts-ignore
+                players.map((player, index) => (
+                    <PersonStatus key={index} state={player.state} name={player.name} />
+                ))
+            }
+        </div>
+
+    );
+}   
+
+export default PlayerList;
--- a/cryptide_project/src/Pages/EndGame.css
+++ b/cryptide_project/src/Pages/EndGame.css
@ -15,7 +15,7 @@
    width: fit-content;

    border-radius: 0px 0px 30px 30px;
-    border: solid #85C9C2;
+    border: solid;
    border-width: 0 5px;

    padding: 20px;
--- a/cryptide_project/src/Pages/EndGame.tsx
+++ b/cryptide_project/src/Pages/EndGame.tsx
@ -1,6 +1,12 @@
 import React from 'react';
+
+
+/* Style */
 import './EndGame.css';
 import '../Style/Global.css';
+import { useTheme } from '../Style/ThemeContext';
+
+/* res */
 import Person from '../res/img/Person.png';
 import Leave from '../res/icon/leave.png';
 import Replay from '../res/icon/replay.png';
@ -18,10 +24,12 @@ import { FormattedMessage } from 'react-intl';


 function EndGame() {
+
+    const theme = useTheme();
    return (
        <div>
            <div className="head">
-                <header className='leaderboard-header'>
+                <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
                    <h1>Dummy a gagné !</h1>
                    <h3>Le tueur était <u>Bob</u></h3>
                </header>
--- a/cryptide_project/src/Pages/Home.css
+++ b/cryptide_project/src/Pages/Home.css
@ -6,7 +6,7 @@
    min-height: 100vh;
    display: flex;
    font-size: calc(10px + 2vmin);
-    color: #2A4541;
+    /* color: #2A4541; */
 }

 /**Divider**/
@ -41,7 +41,7 @@

 /*Global ???*/
 .button {
-    background-color: #49A4BE;
+    /* background-color: #49A4BE;   */
    color: #fff;
    padding: 10px 20px;
    border-radius: 10;
--- a/cryptide_project/src/Pages/Home.tsx
+++ b/cryptide_project/src/Pages/Home.tsx
@ -1,12 +1,14 @@
 import React from 'react';
 import './Home.css';
 import '../App.css';
+import { useTheme } from '../Style/ThemeContext';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
+import ButtonImgNav from '../Components/ButtonImgNav';


 function Home() {
-
+    const theme=useTheme();
    return (
        
    <div className="home-container">
@ -46,7 +48,13 @@ function Home() {
            <h3> <u><FormattedMessage id="game.illustratedBy"/></u><br/> Kwanchai Moriya</h3>
            {/* <button>Jouer au jeu</button> */}
            <br/>
-            <Link to="/play" className='button'> <FormattedMessage id="play"/> </Link>
+            <Link to="/play" className='button' 
+                style={{ 
+                    backgroundColor: theme.colors.primary,
+                    borderColor: theme.colors.secondary
+                }}>
+                <FormattedMessage id="play"/> 
+            </Link>
        </div>
    </div>
    );
--- a/cryptide_project/src/Pages/InGame.css
+++ b/cryptide_project/src/Pages/InGame.css
@ -0,0 +1,104 @@
+.upperInfo{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+
+    width: 30%;
+
+    border-radius: 0px 0px 30px 30px;
+    border: solid;
+    border-width: 2px 5px;
+
+    background-color: white;
+
+    font-size: 30px;
+
+    top: 20px;;
+}
+
+#mainDiv{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+
+.paramDiv{
+    z-index: 1;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+#graphDiv{
+
+    display: flex;
+    flex-direction: row;
+
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#bottom-container{
+    bottom: 0;
+    
+    background-color: white;
+    padding:20px;
+    border-radius: 20px 20px 0px 0px;
+}
+
+.playerlistDiv{
+    position: absolute;
+    z-index: 1;
+    left: 10px;
+    top :50px;
+}
+
+#endgamebutton{
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    right: 25%;
+}
+
+.upperInfo,
+#bottom-container,
+.menuGame {
+    position: absolute;
+    z-index: 1;
+}
+
+.menuGame{
+    display: flex;
+    align-items: space-between;
+    justify-content: end;
+    flex-direction: column;
+
+    top:30%;
+    right: 0;
+}
+
+.menuGame Button {
+    margin: 10px;
+}
+
+.button{
+    /*background-color: #85C9C2;*/
+    
+    border: solid 2px #85C9C2;
+    border-radius: 10px;
+
+    width: 100px;
+    height: 60px;
+}
+
+/* #playerCanvasBody{
+    columns: 2 auto;
+    grid-row: 2;
+} */
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/cryptide_project/src/Pages/InGame.tsx
@ -1,27 +1,258 @@
 import React, { useState } from 'react';
+import Switch from "react-switch";

+/* Style */
+import "./InGame.css"
+import {useTheme} from '../Style/ThemeContext'
 /* Component */
 import GraphContainer from '../Components/GraphContainer';
 import ChoiceBar from '../Components/ChoiceBar';
 import ButtonImgNav from '../Components/ButtonImgNav';
+import PersonStatus from '../Components/PersonStatus';
+import PlayerList from '../Components/PlayerList';

 /* Icon */
 import Leave from "../res/icon/leave.png";
+import Param from "../res/icon/param.png";
+import Replay from "../res/icon/replay.png";
+import Info from "../res/icon/infoGreen.png";
+import Check from "../res/icon/checkboxGreen.png";
+import Alpha from "../res/GreekLetters/alphaW.png";
+
+/* nav */
+import { Link } from 'react-router-dom';
+
+/* Boostrap */
+import Button from 'react-bootstrap/Button';
+import Offcanvas from 'react-bootstrap/Offcanvas';
+
+/* Model */
+import Stub from '../model/Stub';
+import { HiLanguage } from 'react-icons/hi2';
+import { Nav, NavDropdown } from 'react-bootstrap';
+import { FormattedMessage } from 'react-intl';
+import Color from '../model/Color';
+
+//@ts-ignore
+const InGame = ({locale, changeLocale}) => {
+
+  const players = [
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' }
+    // Ajouter d'autres joueurs au besoin
+  ];
+
+
+  const theme = useTheme();

-const InGame = () => {
    const [showChoiceBar, setShowChoiceBar] = useState(false);
  
    const handleNodeClick = (shouldShowChoiceBar: boolean) => {
      setShowChoiceBar(shouldShowChoiceBar);
    };
  
+    /* offcanvas */
+    //? faire une fonction pour close et show en fonction de l'etat du canva ?
+    //? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ?
+    const [show, setShow] = useState(false);
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
+    const [showP, setShowP] = useState(false);
+    const handleCloseP = () => setShowP(false);
+    const handleShowP = () => setShowP(true);
+  
+    const [showS, setShowS] = useState(false);
+    const handleCloseS = () => setShowS(false);
+    const handleShowS = () => setShowS(true);
+  
+    const handleChange = () => {
+      if (show){
+        handleClose()
+      }
+      else {
+        handleShow()
+      }
+    };
+  
+    const handleChangeP = () => {
+      if (showP){
+        handleCloseP()
+      }
+      else {
+        handleShowP()
+      }
+    };
+
+    const handleChangeS = () => {
+      if (showS){
+        handleCloseS()
+      }
+      else {
+        handleShowS()
+      }
+    };
+
+    /* Windows open */
+    //@ts-ignore
+    const openInNewTab = (url) => { //! avec url ==> dangereux
+      window.open(url);
+    };
+  
+  const [SwitchEnabled, setSwitchEnabled] = useState(false)
+  const indices = Stub.GenerateIndice()
+
    return (
-      <div>
+      <div id="mainDiv">
+        <div className='upperInfo' 
+          style={{ 
+              borderColor: theme.colors.secondary
+          }}>
+          {/* texte changeable et a traduire */}
+          <p>Dummy, à vous de jouer !</p>
+        </div>
+        <div id='graphDiv'>
          <GraphContainer onNodeClick={handleNodeClick} />
+        </div>
+
+        <div className='playerlistDiv'>
+          <button className='button' 
+            style={{ 
+                backgroundColor: theme.colors.primary,
+                borderColor: theme.colors.secondary
+            }}
+            onClick={handleChangeP}>
+            Players
+          </button>
+        </div>
+
+        <div className='paramDiv'>
+          <button className='button'
+            style={{ 
+                backgroundColor: theme.colors.primary,
+                borderColor: theme.colors.secondary
+            }}
+            onClick={handleChangeS}>
+            <img src={Param} alt="paramètres" height='40'/>
+          </button>
+        </div>
+
+        <div className='menuGame'>
+          <Link to='/info' target='_blank'>
+            <button className='button' 
+              style={{ 
+                backgroundColor: theme.colors.primary,
+                borderColor: theme.colors.secondary
+              }}>
+              <img src={Info} alt="info" height="40"/>
+            </button>
+          </Link>
+          {/* <button className='button' onClick={() => openInNewTab('http://localhost:3000/play')}> //! avec url =={'>'} dangereux
+            <img src={Check} alt="check" height="40"/>
+          </button> */}
+
+          <Link to='/info' target='_blank'>
+            <button className='button'
+              style={{ 
+                backgroundColor: theme.colors.primary,
+                borderColor: theme.colors.secondary
+              }}>
+              <img src={Check} alt="check" height="40"/>
+            </button>
+          </Link>
+
+          <button className='button' onClick={handleChange}
+            style={{ 
+              backgroundColor: theme.colors.primary,
+              borderColor: theme.colors.secondary
+            }}>
+            <img src={Alpha} alt="indice" height="40"/>
+          </button>
+        </div>
+
+        <Offcanvas show={showP} 
+                  onHide={handleCloseP}>
+          <Offcanvas.Header closeButton>
+            <Offcanvas.Title>Joueurs</Offcanvas.Title>
+            <h3>Il y a {players.length} joueurs</h3>
+          </Offcanvas.Header>
+          <Offcanvas.Body>
+              {/* affichage d'une liste responsive dynamic */}
+            {/* <div className='playerCanvasBody'>
+              <PersonStatus state={Replay} name="Dummy"/>
+              <PersonStatus state={Replay} name="Boat"/>
+              <PersonStatus state={Replay} name="Bot-tom"/>
+            </div> */}
+            <PlayerList players={players} />
+          </Offcanvas.Body>
+        </Offcanvas>
+
+        <Offcanvas show={show} 
+                  onHide={handleClose} 
+                  placement='end'
+                  scroll={true}
+                  backdrop={false}
+                  style={{ height: '20%', width: '25%', top: '60vh' }}>
+          <Offcanvas.Header closeButton>
+            <Offcanvas.Title>Indice</Offcanvas.Title>
+          </Offcanvas.Header>
+          <Offcanvas.Body>
+            {/* Possède les cheveux noir <u>ou</u> joue au basket */}
+            {indices[0].ToString(locale)}<br/>
+            {indices[1].ToString(locale)}<br/>
+            {indices[2].ToString(locale)}
+          </Offcanvas.Body>
+        </Offcanvas>
+
+        {
+          //* canva pour les paramètres
+        }
+        <Offcanvas show={showS} 
+                  onHide={handleCloseS} 
+                  placement='top'
+                  style={{height: '30%', width: '30%', left: '70%' }}>
+          <Offcanvas.Header closeButton>
+            <Offcanvas.Title><img src={Param} alt='param'/> Paramètres</Offcanvas.Title>
+          </Offcanvas.Header>
+          <Offcanvas.Body>
+            <Nav className="me-auto">
+                <NavDropdown 
+                title={<span><HiLanguage/> Language </span>}
+                className="navbar-title" id="basic-nav-dropdown">
+                    <NavDropdown.Item onClick={() => changeLocale('fr')}> 
+                        <FormattedMessage id="languageSelector.french"/> 
+                    </NavDropdown.Item>
+                    <NavDropdown.Item onClick={() => changeLocale('en')}> 
+                        <FormattedMessage id="languageSelector.english"/> 
+                    </NavDropdown.Item>
+                </NavDropdown>
+            </Nav>
+
+            <label>
+              <Switch checked={SwitchEnabled} onChange={setSwitchEnabled}/>
+              <p>Afficher les noeuds possibles</p>
+            </label>
+
+          </Offcanvas.Body>
+        </Offcanvas>
+
        <div id="bottom-container">
          {showChoiceBar && <ChoiceBar />}
        </div>
-        <div> {/*  tmp */}
+        <div id="endgamebutton" > {/*  tmp */}
          <ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
        </div>
      </div>
--- a/cryptide_project/src/Pages/InfoPage.tsx
+++ b/cryptide_project/src/Pages/InfoPage.tsx
@ -0,0 +1,66 @@
+import React from 'react';
+
+/* Style */
+import '../Style/Global.css';
+
+import { FormattedMessage } from 'react-intl';
+
+function InfoPage() { //! cette page n'affiche que des informations et est suceptible de changer selon le context.
+
+    return (
+        
+    <div>
+        <h1>Informations</h1>
+        
+        <h2>Indice possible :</h2>
+        <h3>
+            couleur de cheveux d'une personne
+        </h3>
+        <ul>
+            <li>
+                Possède les cheveux noir
+            </li>
+            <li>
+                Possède les cheveux roux
+            </li>
+            <li>
+                Possède les cheveux blond
+            </li>
+            <li>
+                Possède les cheveux brun
+            </li>
+            <li>
+                Possède les cheveux blanc
+            </li>
+        </ul>
+        <hr/>
+        <h3>
+            Sport d'une personne
+        </h3>
+        <ul>
+            <li>
+                Effectue du Foot <u>ou</u> du tennis
+            </li>
+            <li>
+                Effectue du rugby <u>ou</u> du tennis
+            </li>
+        </ul>
+        <h3>
+            Caractèristique des voisins
+        </h3>
+        <ul>
+            <li>
+                Possède deux voisins footballeur
+            </li>
+            <li>
+                Possède aucun voisin rugbyman
+            </li>
+        </ul>
+
+        <h2>Topographie</h2>
+        <p>Legende des différents objet disponible sur la carte.</p>
+    </div>
+    );
+}
+
+export default InfoPage;
--- a/cryptide_project/src/Pages/Lobby.css
+++ b/cryptide_project/src/Pages/Lobby.css
@ -5,7 +5,7 @@
    background-color: #fff;
    min-height: 100vh;
    font-size: calc(10px + 2vmin);
-    color: #2A4541;
+    /* color: #2A4541; */
 }

 .left-section {
@ -15,8 +15,8 @@
 }

 .lobby-vertical-divider{
-    width: 5px;
-    background-color: #2A4541;
+    width: 10px;
+    /* background-color: #2A4541; */
 }

 .right-section {
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/cryptide_project/src/Pages/Lobby.tsx
@ -1,13 +1,21 @@
 import React from 'react';
+
+/* Style */
 import './Lobby.css';
-import PlayerItemList from '../Components/PlayerItemList'
+import { useTheme } from '../Style/ThemeContext';
+
+/* res */
 import Person from '../res/img/Person.png';
 import Bot from '../res/img/bot.png';
 import param from '../res/icon/param.png';
 import cible from '../res/icon/cible.png';
+
+/* Component */
 import ButtonImgNav from '../Components/ButtonImgNav';
+import PlayerItemList from '../Components/PlayerItemList'

 function Lobby() {
+    const theme=useTheme();
    return (
        <div className='lobby-container'>
            <div className='left-part'>
@ -19,7 +27,7 @@ function Lobby() {
                </div>
            </div>

-            <div className="lobby-vertical-divider"></div>
+            <div className="lobby-vertical-divider" style={{backgroundColor: theme.colors.secondary}}></div>

            <div className='right-part'>
                <div className='title-param-div'>
--- a/cryptide_project/src/Pages/Play.css
+++ b/cryptide_project/src/Pages/Play.css
@ -79,10 +79,13 @@
    width:200px;
    height: 8vh;

-    background-color: #85C9C2;
-    color: #2A4541;
+    /* background-color: #85C9C2;
+    color: #2A4541; */
+    color: white;
+
+    border: solid;
    border-radius: 15px;
-    border-width: 0;
+    border-width: 2px;

    font-size:larger;
 }
--- a/cryptide_project/src/Pages/Play.tsx
+++ b/cryptide_project/src/Pages/Play.tsx
@ -1,7 +1,8 @@
 import React from 'react';

-/* Page */
+/* Style */
 import './Play.css';
+import { useTheme } from '../Style/ThemeContext';

 /* Nav */
 import { Link } from 'react-router-dom';
@ -19,6 +20,7 @@ import share from '../res/icon/share.png';


 function Play() {
+    const theme=useTheme()
    return (

        <div className="MainContainer">
@ -41,13 +43,13 @@ function Play() {
                </div>
                <div className='buttonGroupVertical'>
                    <Link to="/lobby">
-                        <button className="ButtonNav"> Jouer seul </button>
+                        <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
                    </Link>
                    <Link to="/">
-                        <button className="ButtonNav"> Créer une partie </button>
+                        <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
                    </Link>
                    <Link to="/">
-                        <button className="ButtonNav"> Rejoindre </button>
+                        <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
                    </Link>
                </div>
            </div>
--- a/cryptide_project/src/Style/Color.tsx
+++ b/cryptide_project/src/Style/Color.tsx
@ -0,0 +1,10 @@
+const COLORS = {
+    primary:'#0064E0',
+    secondary:'',
+    tertiary:'',
+    
+    white: '#fff',
+    black: '#000',
+}
+
+export default COLORS;
--- a/cryptide_project/src/Style/Global.css
+++ b/cryptide_project/src/Style/Global.css
@ -23,7 +23,7 @@
 }

 .statusDiv{
-    background-color: #A7E2DC;
+    /* background-color: #A7E2DC; */
    border-radius: 15px;

    height: 30px;
--- a/cryptide_project/src/Style/Theme.tsx
+++ b/cryptide_project/src/Style/Theme.tsx
@ -0,0 +1,13 @@
+// theme.js
+const theme = {
+    colors: {
+        primary: '#0064E0',
+        secondary: '#0052B8',
+        
+        text: '#fff'
+
+        //faire une gestion dark/light
+    },
+};
+
+export default theme;
--- a/cryptide_project/src/Style/ThemeContext.tsx
+++ b/cryptide_project/src/Style/ThemeContext.tsx
@ -0,0 +1,15 @@
+// ThemeContext.js
+import React, { createContext, useContext } from 'react';
+import theme from './Theme';
+
+const ThemeContext = createContext(theme);
+
+export const useTheme = () => useContext(ThemeContext);
+
+//@ts-ignore
+export const ThemeProvider = ({ children }) => (
+    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+);
+
+
+//* style={{ color: theme.colors.primary }}
--- a/cryptide_project/src/res/GreekLetters/alphaW.png
+++ b/cryptide_project/src/res/GreekLetters/alphaW.png
--- a/cryptide_project/src/res/GreekLetters/betaW.png
+++ b/cryptide_project/src/res/GreekLetters/betaW.png
--- a/cryptide_project/src/res/GreekLetters/gammaW.png
+++ b/cryptide_project/src/res/GreekLetters/gammaW.png
--- a/cryptide_project/src/res/GreekLetters/ksiW.png
+++ b/cryptide_project/src/res/GreekLetters/ksiW.png
--- a/cryptide_project/src/res/GreekLetters/lambdaW.png
+++ b/cryptide_project/src/res/GreekLetters/lambdaW.png
--- a/cryptide_project/src/res/GreekLetters/minomegaW.png
+++ b/cryptide_project/src/res/GreekLetters/minomegaW.png
--- a/cryptide_project/src/res/GreekLetters/muW.png
+++ b/cryptide_project/src/res/GreekLetters/muW.png
--- a/cryptide_project/src/res/GreekLetters/omegaW.png
+++ b/cryptide_project/src/res/GreekLetters/omegaW.png
--- a/cryptide_project/src/res/GreekLetters/piW.png
+++ b/cryptide_project/src/res/GreekLetters/piW.png
--- a/cryptide_project/src/res/GreekLetters/sigmaW.png
+++ b/cryptide_project/src/res/GreekLetters/sigmaW.png
--- a/cryptide_project/src/res/icon/checkboxGreen.png
+++ b/cryptide_project/src/res/icon/checkboxGreen.png
--- a/cryptide_project/src/res/icon/infoGreen.png
+++ b/cryptide_project/src/res/icon/infoGreen.png
--- a/cryptide_project/yarn.lock
+++ b/cryptide_project/yarn.lock
@ -47,7 +47,7 @@
  resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.2.tgz"
  integrity sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==

-"@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
+"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.0.0-0 || ^8.0.0-0 <8.0.0", "@babel/core@^7.1.0", "@babel/core@^7.11.0", "@babel/core@^7.11.1", "@babel/core@^7.12.0", "@babel/core@^7.12.3", "@babel/core@^7.13.0", "@babel/core@^7.16.0", "@babel/core@^7.4.0 || ^8.0.0-0 <8.0.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
  version "7.23.2"
  resolved "https://registry.npmjs.org/@babel/core/-/core-7.23.2.tgz"
  integrity sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==
@ -412,7 +412,7 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.8.3"

-"@babel/plugin-syntax-flow@^7.22.5":
+"@babel/plugin-syntax-flow@^7.14.5", "@babel/plugin-syntax-flow@^7.22.5":
  version "7.22.5"
  resolved "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.22.5.tgz"
  integrity sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ==
@ -860,7 +860,7 @@
  dependencies:
    "@babel/plugin-transform-react-jsx" "^7.22.5"

-"@babel/plugin-transform-react-jsx@^7.22.15", "@babel/plugin-transform-react-jsx@^7.22.5":
+"@babel/plugin-transform-react-jsx@^7.14.9", "@babel/plugin-transform-react-jsx@^7.22.15", "@babel/plugin-transform-react-jsx@^7.22.5":
  version "7.22.15"
  resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.15.tgz"
  integrity sha512-oKckg2eZFa8771O/5vi7XeTvmM6+O9cxZu+kanTU7tD4sin5nO/G8jGJhq8Hvt2Z0kUoEDRayuZLaUlYl8QuGA==
@ -1263,6 +1263,13 @@
  resolved "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz"
  integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==

+"@egjs/hammerjs@^2.0.0":
+  version "2.0.17"
+  resolved "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz"
+  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
+  dependencies:
+    "@types/hammerjs" "^2.0.36"
+
 "@eslint-community/eslint-utils@^4.2.0":
  version "4.4.0"
  resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
@ -1370,7 +1377,7 @@
  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz"
  integrity sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==

-"@fortawesome/fontawesome-svg-core@^6.4.2":
+"@fortawesome/fontawesome-svg-core@^6.4.2", "@fortawesome/fontawesome-svg-core@~1 || ~6":
  version "6.4.2"
  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz"
  integrity sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==
@ -1757,7 +1764,7 @@
    schema-utils "^3.0.0"
    source-map "^0.7.3"

-"@popperjs/core@^2.11.6":
+"@popperjs/core@^2.11.6", "@popperjs/core@^2.11.8":
  version "2.11.8"
  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@ -1996,6 +2003,20 @@
    lz-string "^1.5.0"
    pretty-format "^27.0.2"

+"@testing-library/dom@>=7.21.4":
+  version "9.3.3"
+  resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz"
+  integrity sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==
+  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"
+
 "@testing-library/jest-dom@^5.17.0":
  version "5.17.0"
  resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz"
@ -2042,7 +2063,7 @@
  resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz"
  integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==

-"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14", "@types/babel__core@^7.1.9":
  version "7.20.4"
  resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.4.tgz"
  integrity sha512-mLnSC22IC4vcWiuObSRjrLd9XcBTGf59vUSoq2jkQDJ/QQ8PMI9rSuzE+aEV8karUMbskw07bKYoUJCKTUaygg==
@ -2158,6 +2179,11 @@
  dependencies:
    "@types/node" "*"

+"@types/hammerjs@^2.0.36":
+  version "2.0.44"
+  resolved "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.44.tgz"
+  integrity sha512-pdGBkAh4ggfXAkiwgmTdROJe3mwvLWJYm6JiaAwCtskAU0Weh+JQyyMTbhvxjxD2n8sr8PrxVwyDzmpnK4pUrQ==
+
 "@types/hoist-non-react-statics@^3.3.1":
  version "3.3.5"
  resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz"
@ -2288,7 +2314,7 @@
  dependencies:
    "@types/react" "*"

-"@types/react@*", "@types/react@>=16.9.11", "@types/react@16 || 17 || 18":
+"@types/react@*", "@types/react@>=16.14.8", "@types/react@>=16.9.11", "@types/react@16 || 17 || 18":
  version "18.2.36"
  resolved "https://registry.npmjs.org/@types/react/-/react-18.2.36.tgz"
  integrity sha512-o9XFsHYLLZ4+sb9CWUYwHqFVoG61SesydF353vFMMsQziiyRu8np4n2OYMUSDZ8XuImxDr9c5tR7gidlH29Vnw==
@ -2398,7 +2424,7 @@
  dependencies:
    "@types/yargs-parser" "*"

-"@typescript-eslint/eslint-plugin@^5.5.0":
+"@typescript-eslint/eslint-plugin@^4.0.0 || ^5.0.0", "@typescript-eslint/eslint-plugin@^5.5.0":
  version "5.62.0"
  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz"
  integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
@ -2421,7 +2447,7 @@
  dependencies:
    "@typescript-eslint/utils" "5.62.0"

-"@typescript-eslint/parser@^5.5.0":
+"@typescript-eslint/parser@^5.0.0", "@typescript-eslint/parser@^5.5.0":
  version "5.62.0"
  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz"
  integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==
@ -2661,16 +2687,16 @@ acorn-walk@^7.1.1:
  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==

+"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8, acorn@^8.2.4, acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0:
+  version "8.11.2"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz"
+  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
+
 acorn@^7.1.1:
  version "7.4.1"
  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==

-acorn@^8.2.4, acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0:
-  version "8.11.2"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz"
-  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
-
 address@^1.0.1, address@^1.1.2:
  version "1.2.2"
  resolved "https://registry.npmjs.org/address/-/address-1.2.2.tgz"
@ -2710,7 +2736,7 @@ ajv-keywords@^5.1.0:
  dependencies:
    fast-deep-equal "^3.1.3"

-ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5, ajv@^6.9.1:
  version "6.12.6"
  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@ -2730,7 +2756,7 @@ ajv@^8.0.0:
    require-from-string "^2.0.2"
    uri-js "^4.2.2"

-ajv@^8.6.0:
+ajv@^8.6.0, ajv@>=8:
  version "8.12.0"
  resolved "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz"
  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
@ -2740,7 +2766,7 @@ ajv@^8.6.0:
    require-from-string "^2.0.2"
    uri-js "^4.2.2"

-ajv@^8.9.0:
+ajv@^8.8.2, ajv@^8.9.0:
  version "8.12.0"
  resolved "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz"
  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
@ -3233,7 +3259,7 @@ browser-process-hrtime@^1.0.0:
  resolved "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz"
  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==

-browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.18.1, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.21.9, browserslist@^4.22.1:
+browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.18.1, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.21.9, browserslist@^4.22.1, "browserslist@>= 4", "browserslist@>= 4.21.0", browserslist@>=4:
  version "4.22.1"
  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz"
  integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
@ -3522,6 +3548,11 @@ commondir@^1.0.1:
  resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz"
  integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==

+component-emitter@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz"
+  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
+
 compressible@~2.0.16:
  version "2.0.18"
  resolved "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz"
@ -4585,7 +4616,7 @@ eslint-webpack-plugin@^3.1.1:
    normalize-path "^3.0.0"
    schema-utils "^4.0.0"

-eslint@^8.3.0:
+eslint@*, "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8", "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8", "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", "eslint@^6.0.0 || ^7.0.0 || ^8.0.0", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^7.0.0 || ^8.0.0", "eslint@^7.5.0 || ^8.0.0", eslint@^8.0.0, eslint@^8.1.0, eslint@^8.3.0, "eslint@>= 6":
  version "8.53.0"
  resolved "https://registry.npmjs.org/eslint/-/eslint-8.53.0.tgz"
  integrity sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==
@ -6166,7 +6197,7 @@ jest-resolve-dependencies@^27.5.1:
    jest-regex-util "^27.5.1"
    jest-snapshot "^27.5.1"

-jest-resolve@^27.4.2, jest-resolve@^27.5.1:
+jest-resolve@*, jest-resolve@^27.4.2, jest-resolve@^27.5.1:
  version "27.5.1"
  resolved "https://registry.npmjs.org/jest-resolve/-/jest-resolve-27.5.1.tgz"
  integrity sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==
@ -6388,7 +6419,7 @@ jest-worker@^28.0.2:
    merge-stream "^2.0.0"
    supports-color "^8.0.0"

-jest@^27.4.3:
+"jest@^27.0.0 || ^28.0.0", jest@^27.4.3:
  version "27.5.1"
  resolved "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz"
  integrity sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==
@ -6540,6 +6571,11 @@ jsonpointer@^5.0.0:
    object.assign "^4.1.4"
    object.values "^1.1.6"

+"keycharm@^0.2.0 || ^0.3.0 || ^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz"
+  integrity sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==
+
 keyv@^4.5.3:
  version "4.5.4"
  resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz"
@ -7851,15 +7887,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^
  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==

-postcss@^7.0.35:
-  version "7.0.39"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz"
-  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
-  dependencies:
-    picocolors "^0.2.1"
-    source-map "^0.6.1"
-
-postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.4:
+"postcss@^7.0.0 || ^8.0.1", postcss@^8, postcss@^8.0.0, postcss@^8.0.3, postcss@^8.0.9, postcss@^8.1.0, postcss@^8.1.4, postcss@^8.2, postcss@^8.2.14, postcss@^8.2.15, postcss@^8.2.2, postcss@^8.3, postcss@^8.3.5, postcss@^8.4, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.4, postcss@^8.4.6, "postcss@>= 8", postcss@>=8, postcss@>=8.0.9:
  version "8.4.31"
  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz"
  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
@ -7868,6 +7896,14 @@ postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.4:
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

+postcss@^7.0.35:
+  version "7.0.39"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+  dependencies:
+    picocolors "^0.2.1"
+    source-map "^0.6.1"
+
 prelude-ls@^1.2.1:
  version "1.2.1"
  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@ -7956,7 +7992,7 @@ prop-types-extra@^1.1.0:
    react-is "^16.3.2"
    warning "^4.0.0"

-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -8094,7 +8130,7 @@ react-dev-utils@^12.0.1:
    strip-ansi "^6.0.1"
    text-table "^0.2.0"

-react-dom@^18.2.0:
+"react-dom@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.2.0, react-dom@>=16.14.0, react-dom@>=16.6.0, react-dom@>=16.8:
  version "18.2.0"
  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@ -8158,7 +8194,7 @@ react-lifecycles-compat@^3.0.4:
  resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==

-react-refresh@^0.11.0:
+react-refresh@^0.11.0, "react-refresh@>=0.10.0 <1.0.0":
  version "0.11.0"
  resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
  integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
@ -8233,6 +8269,13 @@ react-scripts@5.0.1:
  optionalDependencies:
    fsevents "^2.3.2"

+react-switch@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz"
+  integrity sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-transition-group@^4.4.5:
  version "4.4.5"
  resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
@ -8243,7 +8286,7 @@ react-transition-group@^4.4.5:
    loose-envify "^1.4.0"
    prop-types "^15.6.2"

-react@^18.2.0:
+react@*, "react@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || 17 || 18", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=0.14.0, react@>=15.0.0, react@>=16.14.0, react@>=16.3, react@>=16.6.0, react@>=16.8, react@>=16.8.0:
  version "18.2.0"
  resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@ -8484,7 +8527,7 @@ rollup-plugin-terser@^7.0.0:
    serialize-javascript "^4.0.0"
    terser "^5.0.0"

-rollup@^2.43.1:
+"rollup@^1.20.0 || ^2.0.0", rollup@^1.20.0||^2.0.0, rollup@^2.0.0, rollup@^2.43.1:
  version "2.79.1"
  resolved "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz"
  integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
@ -9389,7 +9432,7 @@ type-fest@^0.20.2:
  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==

-type-fest@^0.21.3:
+type-fest@^0.21.3, "type-fest@>=0.17.0 <5.0.0":
  version "0.21.3"
  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz"
  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
@ -9448,7 +9491,7 @@ typedarray-to-buffer@^3.1.5:
  dependencies:
    is-typedarray "^1.0.0"

-typescript@^5.2.2:
+"typescript@^3.2.1 || ^4", typescript@^5.2.2, "typescript@>= 2.7", "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta", typescript@5:
  version "5.2.2"
  resolved "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz"
  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
@ -9591,7 +9634,7 @@ utils-merge@1.0.1:
  resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==

-uuid@^8.3.2:
+"uuid@^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", uuid@^8.3.2:
  version "8.3.2"
  resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
@ -9610,11 +9653,21 @@ vary@~1.1.2:
  resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==

+"vis-data@^6.3.0 || ^7.0.0":
+  version "7.1.8"
+  resolved "https://registry.npmjs.org/vis-data/-/vis-data-7.1.8.tgz"
+  integrity sha512-h/cxRDVqnpqqpTBqwUbbKIpWVovOQ+h5rbFS/kio8TUH1np98Lv9bHdWZxahJlyzBaBR9KGvwGHB00jn3MjLbQ==
+
 vis-network@^9.1.9:
  version "9.1.9"
  resolved "https://registry.npmjs.org/vis-network/-/vis-network-9.1.9.tgz"
  integrity sha512-Ft+hLBVyiLstVYSb69Q1OIQeh3FeUxHJn0WdFcq+BFPqs+Vq1ibMi2sb//cxgq1CP7PH4yOXnHxEH/B2VzpZYA==

+vis-util@^5.0.1:
+  version "5.0.6"
+  resolved "https://registry.npmjs.org/vis-util/-/vis-util-5.0.6.tgz"
+  integrity sha512-HyAZ+x3q6/Xh6OFPIQOGPOPgnHL9KVNvWW6+k3aTCbAG8Tq7vncgRat6oY8ywZ7j1Fq0mOfUb6fLrFvfI9nUKg==
+
 w3c-hr-time@^1.0.2:
  version "1.0.2"
  resolved "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz"
@ -9689,7 +9742,7 @@ webpack-dev-middleware@^5.3.1:
    range-parser "^1.2.1"
    schema-utils "^4.0.0"

-webpack-dev-server@^4.6.0:
+webpack-dev-server@^4.6.0, "webpack-dev-server@3.x || 4.x":
  version "4.15.1"
  resolved "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz"
  integrity sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==
@ -9754,7 +9807,7 @@ webpack-sources@^3.2.3:
  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"
  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==

-webpack@^5.64.4:
+"webpack@^4.0.0 || ^5.0.0", "webpack@^4.37.0 || ^5.0.0", "webpack@^4.4.0 || ^5.9.0", "webpack@^4.44.2 || ^5.47.0", webpack@^5.0.0, webpack@^5.1.0, webpack@^5.20.0, webpack@^5.64.4, "webpack@>= 4", webpack@>=2, "webpack@>=4.43.0 <6.0.0":
  version "5.89.0"
  resolved "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz"
  integrity sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==