Merge pull request 'deducGrid' (#92) from deducGrid into master

Reviewed-on: #92

cryptide_project/src/App.tsx

@@ -15,7 +15,9 @@ import Lobby from './Pages/Lobby';
 import InGame from './Pages/InGame';
 import EndGame from './Pages/EndGame';
 import InfoPage from './Pages/InfoPage';
-import SoloGame from './Pages/SoloGame';
+
+import SoloGame from './Pages/SoloGame'; //! useless
+import DeducGrid from './Pages/DeducGrid'; 
 import Lobbies from './Pages/Lobbies';
 
 /* Component */
@@ -62,7 +64,9 @@ 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 (
     <ErrorBoundary fallback={(error, errorInfo) => <ErrorPage />}>
       <AuthProvider>
@@ -81,6 +85,7 @@ function App() {
                   <Route path="/endgame" element={<EndGame/>} />
                   <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
                   <Route path="/info" element={<InfoPage locale={locale} changeLocale={changeLocale}/>} />
+                  <Route path="/deduc" element={<DeducGrid/>} />
                   <Route path="/profile" element={<Profile/>} />
                   <Route path="/join" element={<Lobbies/>}/>
                   {/* <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/>   */}

cryptide_project/src/Components/AccordionIndice.tsx

@@ -0,0 +1,87 @@
+import React, { useState } 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();
+const [selectedRows, setSelectedRows] = useState<number[]>([]);
+
+
+const handleRowClick = (index: number) => {
+
+    const newSelectedRows = [...selectedRows];
+
+    const selectedIndex = newSelectedRows.indexOf(index);
+    if (selectedIndex === -1) {
+        newSelectedRows.push(index);
+    } else {
+        newSelectedRows.splice(selectedIndex, 1);
+    }
+
+    console.log('New Selected Rows:', newSelectedRows);
+    setSelectedRows(newSelectedRows);
+};
+
+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>
+                </tr>
+            </thead>
+            <tbody>
+                {indices
+                .filter((i) => i instanceof instance)
+                .map((indice, index) => (
+                    <tr
+                        key={index}
+                        onClick={() => handleRowClick(index)}
+                        style={{
+                            cursor: 'pointer',
+                        }}>
+                        <td
+                            style={{
+                                border: selectedRows.includes(index) ? '1px solid red' : 'none',
+                                backgroundColor: selectedRows.includes(index) ? '#FF9191' : 'white',
+                            }}>
+                            {indice.ToString(lang)}
+                        </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,79 @@
+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';
+import { useGame } from '../Contexts/GameContext';
+
+function DeducGrid() {
+    const theme = useTheme();
+    //const indices = Stub.GenerateIndice();
+
+
+    // const { players } = useGame();
+
+    const players = [
+        "bla",
+        "bli",
+        "blou"
+    ]
+        
+    console.log(players)
+    return (
+        <div style={{margin:'20px'}}>
+            <Tabs defaultActiveKey="0" id="uncontrolled-tab-example" className="mb-3">
+            {players.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>
+        </div>
+    );
+}
+
+export default DeducGrid;

cryptide_project/src/Pages/InGame.tsx

@@ -359,7 +359,7 @@ const InGame = ({locale, changeLocale}) => {
           </button> */}
 
           {!IsSolo &&
-          <Link to='/info' target='_blank'>
+          <Link to='/deduc' target='_blank'>
             <button className='button'
               style={{ 
                 backgroundColor: theme.colors.tertiary,