diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx index bbac424..c3a0ab6 100644 --- a/cryptide_project/src/App.tsx +++ b/cryptide_project/src/App.tsx @@ -41,6 +41,7 @@ import messagesEn from './Translations/en.json'; /* Gestion d' erreur */ import ErrorBoundary from './Error/ErrorBoundary'; import ErrorPage from './Error/ErrorPage'; +import DeducCheck from './Pages/DeducCheck'; const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website'; @@ -86,7 +87,8 @@ function App() { } /> }/> } /> - } /> + } /> + } /> } /> }/> {/* }/> */} diff --git a/cryptide_project/src/Pages/DeducCheck.tsx b/cryptide_project/src/Pages/DeducCheck.tsx new file mode 100644 index 0000000..9ac3a33 --- /dev/null +++ b/cryptide_project/src/Pages/DeducCheck.tsx @@ -0,0 +1,120 @@ +import React from 'react'; + +/* Style */ +import './DeducGrid.css'; +import { useTheme } from '../Style/ThemeContext'; + +/* Component */ + +/* Boostrap */ +import Table from 'react-bootstrap/Table'; +import Form from 'react-bootstrap/Form'; + +/* lang */ +import { FormattedMessage } from 'react-intl'; + +/* model */ +import Stub from '../model/Stub'; + +import { useGame } from '../Contexts/GameContext'; +import { positionToEmoji } from '../ColorHelper'; + +function DeducCheck() { + const theme = useTheme(); + //const indices = Stub.GenerateIndice(); + + const params = new URLSearchParams(window.location.search); + + const NbPlayer = params.get('nbPlayer'); + const actualPlayerIndex = params.get('actualId') ?? '0'; + + //const { actualPlayerIndex, players } = useGame(); + + // let playerstmp + // if (players.length == 0) playerstmp = ["1", "2", "3", "4", "5", "4"]; + // else { playerstmp = players} + + //* Gestion players + const playerList = Array.from({ length: parseInt(NbPlayer ?? '1') }, (_, index) => (index + 1).toString()); + const playerColors = playerList.map((_, index) => positionToEmoji(index, true)); + const players = playerColors.filter((_, index) => index !== parseInt(actualPlayerIndex ?? '0')); + + + + // const players = [ + // "🔵", + // "🟢", + // "🟡", + // "🟣", + // "🔴" + //] + //console.log(players) + // console.log(playerColors) + // console.log(actualPlayerIndex) + + //* Gestion indices + const indices = Stub.GenerateIndice(); + + const halfLength = Math.ceil(indices.length / 2); + const firstHalfIndices = indices.slice(0, halfLength); + const secondHalfIndices = indices.slice(halfLength); + + + return ( +
+
+ {/* Premier tableau */} + + + + + {players.map((player, index) => ( + + ))} + + + + {firstHalfIndices.map((indice, rowIndex) => ( + + + {players.map((player, colIndex) => ( + + ))} + + ))} + +
Indices{player}
{indice.ToString("fr")} + {/* */} + +
+ + {/* Deuxième tableau */} + + + + + {players.map((player, index) => ( + + ))} + + + + {secondHalfIndices.map((indice, rowIndex) => ( + + + {players.map((player, colIndex) => ( + + ))} + + ))} + +
Indices{player}
{indice.ToString("fr")} + {/* */} + +
+
+
+ ); +} + +export default DeducCheck; diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index 3446d44..3d8aad0 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -280,8 +280,10 @@ const InGame = ({locale, changeLocale}) => { const [SwitchEnabled, setSwitchEnabled] = useState(false) const allIndices = Stub.GenerateIndice() - const { indice, players } = useGame(); + const { indice, players, actualPlayerIndex} = useGame(); + const nbPlayer = players.length; + const navdeduc = '/deduc?actualId=' + actualPlayerIndex + '&nbPlayer=' + nbPlayer; return (
@@ -375,12 +377,9 @@ const InGame = ({locale, changeLocale}) => { info - {/* */} {!IsSolo && - +