modif de style

parlemonde · Jan 8, 2024 · e2d9190 · e2d9190
1 parent cb56e0b
commit e2d9190
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 9 deletions.
diff --git a/src/components/game/CreateGame.tsx b/src/components/game/CreateGame.tsx
@@ -4,6 +4,7 @@ import GameField from './componentGameMapping/GameField';
 import GameRadio from './componentGameMapping/GameRadio';
 import GameSelect from './componentGameMapping/GameSelect';
 import { GAME_FIELDS_CONFIG, InputTypeEnum } from 'src/config/games/game';
+import { gameResponse } from 'src/contexts/gameContext';
 import type { GameType } from 'types/game.type';
 
 interface PlayProps {
@@ -20,6 +21,8 @@ const ComponentMapping = {
 const CreateGame = ({ gameType, stepNumber }: PlayProps) => {
   const gameConfig = GAME_FIELDS_CONFIG[gameType];
 
+  console.log('gameResponse', gameResponse);
+
   if (!gameConfig || !gameConfig.steps[stepNumber]) {
     return <div>Oups, votre jeu n&apos;existe pas encore</div>;
   }

diff --git a/src/components/game/componentGameMapping/GameField.tsx b/src/components/game/componentGameMapping/GameField.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { TextField } from '@mui/material';
 
 import type { inputType } from 'src/config/games/game';
-import { useGame, gameResponse } from 'src/contexts/gameContext';
+import { useGame, gameResponse, saveGameResponseInSessionStorage } from 'src/contexts/gameContext';
 
 const GameField = ({ input, stepNumber }: { input: inputType; stepNumber: number }) => {
   const { userSelection } = useGame();
@@ -12,10 +12,10 @@ const GameField = ({ input, stepNumber }: { input: inputType; stepNumber: number
 
   const handleChange = (event: React.SyntheticEvent) => {
     const newValue = (event.target as HTMLInputElement).value;
-    // gameResponse.data[stepNumber - 1].responses[input.id].value = newValue;
     const stepResponse = gameResponse.data[stepNumber - 1];
     if (stepResponse && stepResponse.responses && stepResponse.responses[input.id]) {
       stepResponse.responses[input.id].value = newValue;
+      saveGameResponseInSessionStorage(gameResponse);
     }
   };
 

diff --git a/src/components/game/componentGameMapping/GameRadio.tsx b/src/components/game/componentGameMapping/GameRadio.tsx
@@ -3,12 +3,13 @@ import React from 'react';
 import { RadioGroup, Radio, FormControlLabel } from '@mui/material';
 
 import type { inputType } from 'src/config/games/game';
-import { gameResponse } from 'src/contexts/gameContext';
+import { gameResponse, saveGameResponseInSessionStorage } from 'src/contexts/gameContext';
 
 const GameRadio = ({ input }: { input: inputType }) => {
   const handleChange = (event: React.SyntheticEvent) => {
     const value = (event.target as HTMLInputElement).value;
     gameResponse.radioSelection = value;
+    saveGameResponseInSessionStorage(gameResponse);
   };
 
   return (

diff --git a/src/components/game/componentGameMapping/GameSelect.tsx b/src/components/game/componentGameMapping/GameSelect.tsx
@@ -4,7 +4,7 @@ import { Autocomplete, FormControl, TextField } from '@mui/material';
 
 import type { inputType } from 'src/config/games/game';
 import { SelectTypeMappingMethode, keyMapping } from 'src/config/games/game';
-import { useGame, gameResponse } from 'src/contexts/gameContext';
+import { useGame, gameResponse, saveGameResponseInSessionStorage } from 'src/contexts/gameContext';
 import type { Currency } from 'types/currency.type';
 import type { Language } from 'types/language.type';
 
@@ -35,10 +35,11 @@ const GameSelect = ({ input }: { input: inputType }) => {
       <Autocomplete
         options={values}
         getOptionLabel={(option) => option}
-        renderInput={(params) => <TextField {...params} label="Langue" variant="outlined" />}
+        renderInput={(params) => <TextField {...params} label={input.placeHolder} variant="outlined" />}
         onChange={(_event, newValue) => {
           if (newValue) setUserSelection(newValue);
           gameResponse.userSelection = newValue;
+          saveGameResponseInSessionStorage(gameResponse);
         }}
       />
     </FormControl>

diff --git a/src/contexts/gameContext.tsx b/src/contexts/gameContext.tsx
@@ -16,10 +16,10 @@ interface GameResponseDataToSend {
   radioSelection?: string | null;
   createDate?: Date | string;
   updateDate?: Date | string;
+  deleteDate?: Date | string;
+  status?: string | number;
 }
 
-// Dans la table activity il y a comme colonne id, type, subtype, phase, status, createDate, updateDate, deleteDate, data, content, userId, villageId, responseActivityId, responseType, isPinned, displayAsUser, isVisibleToParent
-
 interface GameData {
   gameId: number;
   media?: string;
@@ -37,6 +37,10 @@ export const gameResponse: GameResponseDataToSend = {
   activityId: '',
   gameType: '',
   radioSelection: '',
+  status: 1,
+  createDate: '',
+  updateDate: '',
+  deleteDate: '',
   data: [
     {
       gameId: 1,
@@ -120,7 +124,7 @@ export const gameResponse: GameResponseDataToSend = {
   userSelection: '',
 };
 
-const GameContext = createContext<GameContextType | undefined>(undefined);
+export const GameContext = createContext<GameContextType | undefined>(undefined);
 
 export function useGame() {
   const context = useContext(GameContext);
@@ -130,6 +134,10 @@ export function useGame() {
   return context;
 }
 
+export function saveGameResponseInSessionStorage(gameResponse: GameResponseDataToSend) {
+  sessionStorage.setItem('gameResponse', JSON.stringify(gameResponse));
+}
+
 interface GameProviderProps {
   children: ReactNode;
 }

diff --git a/src/pages/creer-un-jeu/expression/1.tsx b/src/pages/creer-un-jeu/expression/1.tsx
@@ -7,7 +7,7 @@ import { StepsButton } from 'src/components/StepsButtons';
 import { BackButton } from 'src/components/buttons/BackButton';
 import CreateGame from 'src/components/game/CreateGame';
 import { GAME_FIELDS_CONFIG } from 'src/config/games/game';
-import { useGame, gameResponse } from 'src/contexts/gameContext';
+import { useGame, gameResponse, saveGameResponseInSessionStorage } from 'src/contexts/gameContext';
 import { UserContext } from 'src/contexts/userContext';
 import { VillageContext } from 'src/contexts/villageContext';
 import { GameType } from 'types/game.type';
@@ -22,6 +22,7 @@ const ExpressionStep1 = () => {
   React.useEffect(() => {
     gameResponse.userId = user?.id;
     gameResponse.villageId = village?.id;
+    saveGameResponseInSessionStorage(gameResponse);
   }, [user, village]);
 
   function updateDescriptionWithSelection(userSelection: string) {

diff --git a/src/pages/creer-un-jeu/expression/2.tsx b/src/pages/creer-un-jeu/expression/2.tsx
@@ -5,12 +5,24 @@ import { Base } from 'src/components/Base';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import CreateGame from 'src/components/game/CreateGame';
+// import { GAME_FIELDS_CONFIG } from 'src/config/games/game';
 import { useGame } from 'src/contexts/gameContext';
 import { GameType } from 'types/game.type';
 
 const ExpressionStep2 = () => {
   const router = useRouter();
   const { userSelection } = useGame();
+  // const originalLabelTemplate = 'Écrivez l’expression en ';
+
+  // function updateLabelWithSelection(userSelection: string) {
+  //   if (!userSelection) {
+  //     return originalLabelTemplate;
+  //   }
+
+  //   return `${originalLabelTemplate}${userSelection}`;
+  // }
+
+  // GAME_FIELDS_CONFIG[GameType.EXPRESSION].steps[1][0].inputs![0].label = updateLabelWithSelection(userSelection).toLowerCase();
 
   const onNext = () => {
     router.push('/creer-un-jeu/expression/3');

diff --git a/src/pages/creer-un-jeu/expression/3.tsx b/src/pages/creer-un-jeu/expression/3.tsx
@@ -5,12 +5,24 @@ import { Base } from 'src/components/Base';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import CreateGame from 'src/components/game/CreateGame';
+import { GAME_FIELDS_CONFIG } from 'src/config/games/game';
 import { useGame } from 'src/contexts/gameContext';
 import { GameType } from 'types/game.type';
 
 const ExpressionStep3 = () => {
   const router = useRouter();
   const { userSelection } = useGame();
+  const originalLabelTemplate = 'Écrivez l’expression en ';
+
+  function updateLabelWithSelection(userSelection: string) {
+    if (!userSelection) {
+      return originalLabelTemplate;
+    }
+
+    return `${originalLabelTemplate}${userSelection}`;
+  }
+
+  GAME_FIELDS_CONFIG[GameType.EXPRESSION].steps[2][0].inputs![0].label = updateLabelWithSelection(userSelection).toLowerCase();
 
   const onNext = () => {
     router.push('/creer-un-jeu/expression/4');

diff --git a/src/pages/creer-un-jeu/expression/4.tsx b/src/pages/creer-un-jeu/expression/4.tsx
@@ -5,12 +5,24 @@ import { Base } from 'src/components/Base';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import CreateGame from 'src/components/game/CreateGame';
+import { GAME_FIELDS_CONFIG } from 'src/config/games/game';
 import { useGame } from 'src/contexts/gameContext';
 import { GameType } from 'types/game.type';
 
 const ExpressionStep4 = () => {
   const router = useRouter();
   const { userSelection } = useGame();
+  const originalLabelTemplate = 'Écrivez l’expression en ';
+
+  function updateLabelWithSelection(userSelection: string) {
+    if (!userSelection) {
+      return originalLabelTemplate;
+    }
+
+    return `${originalLabelTemplate}${userSelection}`;
+  }
+
+  GAME_FIELDS_CONFIG[GameType.EXPRESSION].steps[3][0].inputs![0].label = updateLabelWithSelection(userSelection).toLowerCase();
 
   const onNext = () => {
     router.push('/creer-un-jeu/expression/5');

diff --git a/src/pages/creer-un-jeu/expression/5.tsx b/src/pages/creer-un-jeu/expression/5.tsx
@@ -37,6 +37,9 @@ const ExpressionStep5 = () => {
         <div>
           <CreateGame gameType={GameType.EXPRESSION} stepNumber={4} />
         </div>
+        {/* Imaginons qu'à cette page, les 3 jeux sont terminés mais pour une raison quelconque 
+        le prof n'a pas publier ou pu publier, est-ce qu'on peut faire une requete qui detecte
+        que lorsqu'on arrive sur cette page, le jeu est inscrit dans la bdd en draft ? */}
         <div className="width-900">{<StepsButton prev={onPrev} next={onNext} />}</div>
       </div>
     </Base>