ajout de la page de deduction sans logique, avec des tableau accordion sur différentes tabs, le nombre de tabes est dynamic en fonction des joueurs ⚡

cryptide_project/src/App.tsx

@@ -15,6 +15,9 @@ import InGame from './Pages/InGame';
 import EndGame from './Pages/EndGame';
 import InfoPage from './Pages/InfoPage';
 
+import SoloGame from './Pages/SoloGame'; //! useless
+import DeducGrid from './Pages/DeducGrid'; 
+
 /* Component */
 import AppNavbar from './Components/NavBar';
 
@@ -33,7 +36,6 @@ 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,
@@ -53,7 +55,7 @@ function App() {
 
 
   //const location = useLocation();
-  const hasNavbarVisible = ["/", "/login", "/signup", "/play", "/lobby", "/endgame"]//.includes(window.location.pathname);
+  const hasNavbarVisible = ["/", "/login", "/signup", "/play", "/lobby", "/endgame", "/deduc"]//.includes(window.location.pathname);
 
 
   return (
@@ -63,29 +65,29 @@ function App() {
   //     <img src={logo} className="App-logo" alt="logo" />
   //   </header>
   // </div>
-      <GameProvider>
+    <GameProvider>
-
+
-      {/*@ts-ignore*/}
+    {/*@ts-ignore*/}
-        <IntlProvider locale={locale} messages={messages[locale]}>
+      <IntlProvider locale={locale} messages={messages[locale]}>
-          <ThemeProvider>
+        <ThemeProvider>
-            <BrowserRouter>  
+          <BrowserRouter>  
-              {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />}
+            {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />}
-              <Routes>
+            <Routes>
-                <Route path="/" element={<Home />} />
+              <Route path="/" element={<Home />} />
-                <Route path="/login" element={<Login />} />
+              <Route path="/login" element={<Login />} />
-                <Route path="/signup" element={<SignUp />} />
+              <Route path="/signup" element={<SignUp />} />
-                <Route path="/play" element={<Play/>} />
+              <Route path="/play" element={<Play/>} />
-                <Route path="/lobby" element={<Lobby/>} />
+              <Route path="/lobby" element={<Lobby/>} />
-                <Route path="/endgame" element={<EndGame/>} />
+              <Route path="/endgame" element={<EndGame/>} />
-                <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
+              <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
-                <Route path="/info" element={<InfoPage locale={locale} changeLocale={changeLocale}/>} />
+              <Route path="/info" element={<InfoPage locale={locale} changeLocale={changeLocale}/>} />
-                {/* <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/>   */}
+              <Route path="/deduc" element={<DeducGrid/>} />
-              </Routes>
+              {/* <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/>   */}
-            </BrowserRouter>
+            </Routes>
-          </ThemeProvider>
+          </BrowserRouter>
-        </IntlProvider>
+        </ThemeProvider>
-      </GameProvider>
+      </IntlProvider>
-  
+    </GameProvider>
   );
 }
 

cryptide_project/src/Components/AccordionIndice.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+/* Style */
+import '../Style/Global.css';
+//import { useTheme } from '../Style/ThemeContext';
+
+/* Model */
+import Stub from '../model/Stub';
+import Indice from '../model/Indices/Indice';
+
+
+/* lang */
+import { FormattedMessage } from 'react-intl';
+
+/* Boostrap */
+import Accordion from 'react-bootstrap/Accordion';
+import Table from 'react-bootstrap/Table';
+import Case from './CheckCase';
+
+
+interface AccordionIndiceComponentProps<T extends Indice> {
+    instance: (new (...args: any[]) => T) | (Function & { prototype: T });
+    head: string;
+    lang: string;
+}
+
+const AccordionIndice: React.FC<AccordionIndiceComponentProps<any>> = ({ instance, head, lang }) => {
+    const indices = Stub.GenerateIndice();
+    return (
+        <>
+            <Accordion defaultActiveKey={['0']} alwaysOpen style={{width:'100%'}}>
+                <Accordion.Item eventKey="0">
+                    <Accordion.Header>{head}</Accordion.Header>
+                    <Accordion.Body>
+                        <Table striped bordered hover>
+                            <thead>
+                                <tr>
+                                    <th>Indice</th>
+                                    <th>Déduction</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {indices
+                                    .filter((i) => i instanceof instance)
+                                    .map((indice, index) => (
+                                        <tr key={index}>
+                                            <td>{indice.ToString(lang)}</td>
+                                            <td><Case/></td>
+                                        </tr>
+                                    ))}
+                            </tbody>
+                        </Table>
+                    </Accordion.Body>
+                </Accordion.Item>
+            </Accordion>
+        </>
+    );
+}
+
+export default AccordionIndice;

cryptide_project/src/Components/CheckCase.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+
+/* style */
+import { useTheme } from '../Style/ThemeContext';
+import '../Pages/DeducGrid.css';
+
+/* res */
+import Check from '../res/icon/checkboxGreen.png';
+
+/* trad */
+import { FormattedMessage } from 'react-intl';
+
+
+//@ts-ignore
+function Case() {
+    const theme = useTheme();
+
+    const [bg, setbg] = useState('whitesmoke');
+    
+    //let check = ""; //? avec image
+    //let bg = 'whitesmoke';
+
+    function changeOnCheck(){
+        // if (check == "")check = Check;
+        // else check = "";
+
+        if(bg == "whitesmoke")setbg(theme.colors.tertiary);
+        else setbg("whitesmoke");
+
+        console.log("clic")
+    }
+    
+    return (
+        <button className='case' onClick={changeOnCheck} style={{backgroundColor: bg, borderColor:'grey'}}>
+        </button>
+    );
+}
+
+export default Case;

cryptide_project/src/Pages/DeducGrid.css

@@ -0,0 +1,17 @@
+.case{
+    min-width: 50px;
+    min-height: 50px;
+    border: solid 1px whitesmoke;
+}
+
+.deducDiv{
+    display: flex;
+    flex-direction: column;
+}
+
+.sectionAccordion{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    
+}

cryptide_project/src/Pages/DeducGrid.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+
+
+/* Style */
+import './DeducGrid.css';
+import { useTheme } from '../Style/ThemeContext';
+
+/* Component */
+
+/* Boostrap */
+import Accordion from 'react-bootstrap/Accordion';
+import Table from 'react-bootstrap/Table';
+import Tab from 'react-bootstrap/Tab';
+import Tabs from 'react-bootstrap/Tabs';
+
+/* nav */
+import { Link } from 'react-router-dom';
+
+/* lang */
+import { FormattedMessage } from 'react-intl';
+import Case from '../Components/CheckCase';
+
+import Age from '../model/Indices/AgeIndice'
+import Stub from '../model/Stub';
+import Edge from '../model/Graph/Edge';
+import EdgesIndice from '../model/Indices/EdgesIndice';
+import AccordionIndice from '../Components/AccordionIndice';
+import AgeIndice from '../model/Indices/AgeIndice';
+import ColorIndice from '../model/Indices/ColorIndice';
+import ColorEdgesIndice from '../model/Indices/ColorEdgesIndice';
+import SportIndice from '../model/Indices/SportIndice';
+import NbEdgesIndice from '../model/Indices/NbEdgesIndice';
+import NbSportIndice from '../model/Indices/NbSportIndice';
+
+function DeducGrid() {
+    const theme = useTheme();
+    //const indices = Stub.GenerateIndice();
+
+    const joueurs = [
+        "bla",
+        "bli",
+        "blou"
+    ]
+
+    return (
+        <div style={{margin:'20px'}}>
+            <Tabs defaultActiveKey="home" id="uncontrolled-tab-example" className="mb-3">
+            {joueurs.map((joueur, index) => (
+                <Tab key={index} eventKey={index.toString()} title={`${joueur} ${index + 1}`}>
+                    <div className='deducDiv'>
+                        <div className='sectionAccordion'>
+                            <AccordionIndice instance={AgeIndice} head='Age' lang='fr'/>
+                        </div>
+                        <div className='sectionAccordion'>
+                            <AccordionIndice instance={ColorIndice} head='Couleur de cheveux' lang='fr'/>
+                            <AccordionIndice instance={ColorEdgesIndice} head='Couleur de cheveux voisine' lang='fr'/>
+                        </div>
+                        <div className='sectionAccordion'>
+                            <AccordionIndice instance={SportIndice} head='Sport' lang='fr'/>
+                            <AccordionIndice instance={NbSportIndice} head='Nombre de Sport' lang='fr'/>
+                        </div>
+                        <div className='sectionAccordion'>
+                            <AccordionIndice instance={EdgesIndice} head='Caractéristique des voisin' lang='fr'/>
+                            <AccordionIndice instance={NbEdgesIndice} head='Nombre de voisin' lang='fr'/>
+                        </div>
+                    </div>
+                </Tab>
+            ))}
+            </Tabs>
+            {/* <Tabs
+            defaultActiveKey="home"
+            id="uncontrolled-tab-example"
+            className="mb-3">
+                <Tab eventKey="home" title="Joueur">
+                    <div className='deducDiv'>
+                        <div className='sectionAccordion'>
+                            <AccordionIndice instance={AgeIndice} head='Age' lang='fr'/>
+                        </div>
+                        <div className='sectionAccordion'>
+                            <AccordionIndice instance={ColorIndice} head='Couleur de cheveux' lang='fr'/>
+                            <AccordionIndice instance={ColorEdgesIndice} head='Couleur de cheveux voisine' lang='fr'/>
+                        </div>
+                        <div className='sectionAccordion'>
+                            <AccordionIndice instance={SportIndice} head='Sport' lang='fr'/>
+                            <AccordionIndice instance={NbSportIndice} head='Nombre de Sport' lang='fr'/>
+                        </div>
+                        <div className='sectionAccordion'>
+                            <AccordionIndice instance={EdgesIndice} head='Caractéristique des voisin' lang='fr'/>
+                            <AccordionIndice instance={NbEdgesIndice} head='Nombre de voisin' lang='fr'/>
+                        </div>
+                    </div>
+                </Tab>
+                <Tab eventKey="profile" title="joueur suivant">
+                    tables joueur suivant
+                </Tab>
+                <Tab eventKey="contact" title="joueur suivant">
+                    tables joueur suivant
+                </Tab>
+            </Tabs> */}
+        </div>
+    );
+}
+
+export default DeducGrid;

cryptide_project/src/Pages/InGame.tsx

@@ -289,7 +289,7 @@ const InGame = ({locale, changeLocale}) => {
             <img src={Check} alt="check" height="40"/>
           </button> */}
 
-          <Link to='/info' target='_blank'>
+          <Link to='/deduc' target='_blank'>
             <button className='button'
               style={{ 
                 backgroundColor: theme.colors.tertiary,