création de la page pour le mode solo, avec la navigation via le bouton 'rejoindre' 🍱

cryptide_project/src/App.tsx

@@ -32,6 +32,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 /* Internationnalisation */
 import messagesFr from './Translations/fr.json';
 import messagesEn from './Translations/en.json';
+import SoloGame from './Pages/SoloGame';
 
 const messages = {
   fr: messagesFr,
@@ -77,6 +78,8 @@ function App() {
           <Route path="/endgame" element={<EndGame/>} />
           <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale} />} />
           <Route path="/info" element={<InfoPage/>} />
+          <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />} />
+          
         </Routes>
       </BrowserRouter>
     </ThemeProvider>

cryptide_project/src/Pages/Play.tsx

@@ -48,7 +48,7 @@ function Play() {
                     <Link to="/">
                         <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
                     </Link>
-                    <Link to="/">
+                    <Link to="/solo">
                         <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
                     </Link>
                 </div>

cryptide_project/src/Pages/SoloGame.css

@@ -0,0 +1,99 @@
+.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;
+}

cryptide_project/src/Pages/SoloGame.tsx

@@ -0,0 +1,226 @@
+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 SoloGame = ({locale, changeLocale}) => {
+
+    const theme = useTheme();
+
+    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 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={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 id="endgamebutton" > {/*  tmp */}
+        <ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
+    </div>
+    </div>
+);
+};
+
+
+export default SoloGame;