From 6b80d87d2e157dc623762887e4fd26bedd4d7630 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Wed, 22 Nov 2023 15:04:18 +0100 Subject: [PATCH] =?UTF-8?q?ajout=20de=20la=20page=20de=20deduction=20sans?= =?UTF-8?q?=20logique,=20avec=20des=20tableau=20accordion=20sur=20diff?= =?UTF-8?q?=C3=A9rentes=20tabs,=20le=20nombre=20de=20tabes=20est=20dynamic?= =?UTF-8?q?=20en=20fonction=20des=20joueurs=20:zap:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cryptide_project/src/App.tsx | 52 +- .../src/Components/AccordionIndice.tsx | 60 + cryptide_project/src/Components/CheckCase.tsx | 41 + cryptide_project/src/Pages/DeducGrid.css | 17 + cryptide_project/src/Pages/DeducGrid.tsx | 104 + cryptide_project/src/Pages/InGame.tsx | 2 +- cryptide_project/yarn.lock | 16619 ++++++++-------- 7 files changed, 8557 insertions(+), 8338 deletions(-) create mode 100644 cryptide_project/src/Components/AccordionIndice.tsx create mode 100644 cryptide_project/src/Components/CheckCase.tsx create mode 100644 cryptide_project/src/Pages/DeducGrid.css create mode 100644 cryptide_project/src/Pages/DeducGrid.tsx diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx index dacb2c0..e4a6581 100644 --- a/cryptide_project/src/App.tsx +++ b/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() { // logo // // - - - {/*@ts-ignore*/} - - - - {hasNavbarVisible && } - - } /> - } /> - } /> - } /> - } /> - } /> - }/> - } /> - {/* }/> */} - - - - - - + + + {/*@ts-ignore*/} + + + + {hasNavbarVisible && } + + } /> + } /> + } /> + } /> + } /> + } /> + }/> + } /> + } /> + {/* }/> */} + + + + + ); } diff --git a/cryptide_project/src/Components/AccordionIndice.tsx b/cryptide_project/src/Components/AccordionIndice.tsx new file mode 100644 index 0000000..0ed7959 --- /dev/null +++ b/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 { + instance: (new (...args: any[]) => T) | (Function & { prototype: T }); + head: string; + lang: string; +} + +const AccordionIndice: React.FC> = ({ instance, head, lang }) => { + const indices = Stub.GenerateIndice(); + return ( + <> + + + {head} + + + + + + + + + + {indices + .filter((i) => i instanceof instance) + .map((indice, index) => ( + + + + + ))} + +
IndiceDéduction
{indice.ToString(lang)}
+ + + + + ); +} + +export default AccordionIndice; 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..b5ea40d --- /dev/null +++ b/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 ( +
+ + {joueurs.map((joueur, index) => ( + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + ))} + + {/* + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + + tables joueur suivant + + + tables joueur suivant + + */} +
+ ); +} + +export default DeducGrid; diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index 4031b3c..6c5a6ea 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -289,7 +289,7 @@ const InGame = ({locale, changeLocale}) => { check */} - +