diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx index 8a8e59a..a437f24 100644 --- a/cryptide_project/src/App.tsx +++ b/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 ( }> @@ -81,6 +85,7 @@ function App() { } /> }/> } /> + } /> } /> }/> {/* }/> */} diff --git a/cryptide_project/src/Components/AccordionIndice.tsx b/cryptide_project/src/Components/AccordionIndice.tsx new file mode 100644 index 0000000..d1f657d --- /dev/null +++ b/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 { +instance: (new (...args: any[]) => T) | (Function & { prototype: T }); + head: string; + lang: string; +} + +const AccordionIndice: React.FC> = ({ instance, head, lang }) => { +const indices = Stub.GenerateIndice(); +const [selectedRows, setSelectedRows] = useState([]); + + +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 ( + <> + + + {head} + + + + + + + + + {indices + .filter((i) => i instanceof instance) + .map((indice, index) => ( + handleRowClick(index)} + style={{ + cursor: 'pointer', + }}> + + + ))} + +
Indice
+ {indice.ToString(lang)} +
+ + + + +); +}; + +export default AccordionIndice; \ No newline at end of file diff --git a/cryptide_project/src/Components/CheckCase.tsx b/cryptide_project/src/Components/CheckCase.tsx new file mode 100644 index 0000000..62d8f87 --- /dev/null +++ b/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 ( + + ); +} + +export default Case; diff --git a/cryptide_project/src/Pages/DeducGrid.css b/cryptide_project/src/Pages/DeducGrid.css new file mode 100644 index 0000000..c1748c4 --- /dev/null +++ b/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; + +} diff --git a/cryptide_project/src/Pages/DeducGrid.tsx b/cryptide_project/src/Pages/DeducGrid.tsx new file mode 100644 index 0000000..6bdaa59 --- /dev/null +++ b/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 ( +
+ + {players.map((joueur, index) => ( + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + ))} + +
+ ); +} + +export default DeducGrid; diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index 422bca8..887294c 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -359,7 +359,7 @@ const InGame = ({locale, changeLocale}) => { */} {!IsSolo && - +