Merge pull request #333 from Arquisoft/dev

Dev
Arquisoft · Apr 20, 2024 · 812a309 · 812a309
2 parents 8a963da + b33f134
commit 812a309
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 18 deletions.
diff --git a/webapp/src/components/GameSettings.js b/webapp/src/components/GameSettings.js
@@ -3,9 +3,11 @@ import React, { useState, useEffect } from 'react';
 import { Box, Typography, Slider, TextField, FormGroup, FormControlLabel, Checkbox, Tab } from '@mui/material';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 
-const GameSettings = ({ setSettings }) => {
+const GameSettings = ({ setSettings, currentUser }) => {
+    const [isWarningVisible, setIsWarningVisible] = useState(false);
+
     const [numberQuestions, setNumberQuestions] = useState(() => {
-        const storedValue = localStorage.getItem('numberQuestions');
+        const storedValue = localStorage.getItem(`settings_${currentUser}_numberQuestions`);
         return storedValue ? parseInt(storedValue) : 10;
     });
 
@@ -18,15 +20,15 @@ const GameSettings = ({ setSettings }) => {
         { value: 30, label: '30' },
     ];
     const [totalMins, setTotalMins] = useState(() => {
-        const storedValue = localStorage.getItem('totalMins');
+        const storedValue = localStorage.getItem(`settings_${currentUser}_totalMins`);
         return storedValue ? parseInt(storedValue) : 3;
     });
     const [totalSecs, setTotalSecs] = useState(() => {
-        const storedValue = localStorage.getItem('totalSecs');
+        const storedValue = localStorage.getItem(`settings_${currentUser}_totalSecs`);
         return storedValue ? parseInt(storedValue) : 0;
     });
     const [themes, setThemes] = useState(() => {
-        const storedValue = localStorage.getItem('themes');
+        const storedValue = localStorage.getItem(`settings_${currentUser}_themes`);
         return storedValue ? JSON.parse(storedValue) : {
             Sports: true,
             ImportantDates: true,
@@ -37,7 +39,6 @@ const GameSettings = ({ setSettings }) => {
     });
     const [value, setValue] = useState('1');
 
-
     const handleQuestionsSlider = (event, newValue) => {
         setNumberQuestions(newValue);
     };
@@ -69,6 +70,14 @@ const GameSettings = ({ setSettings }) => {
     };
     const handleThemes = (event) => {
         const {name, checked} = event.target;
+
+        // Si el usuario desmarca todas las temáticas, no permitirlo
+        if(!checked &&  Object.entries(themes).filter(([key, value]) => value).map(([key]) => key).length === 1) {
+            setIsWarningVisible(true);
+            return;
+        }
+
+        setIsWarningVisible(false);
         setThemes(prevThemes => ({
             ...prevThemes,
             [name]: checked
@@ -79,13 +88,12 @@ const GameSettings = ({ setSettings }) => {
     };
 
     useEffect(() => {
-        localStorage.setItem('numberQuestions', numberQuestions);
-        localStorage.setItem('totalMins', totalMins);
-        localStorage.setItem('totalSecs', totalSecs);
-        localStorage.setItem('themes', JSON.stringify(themes));
+        localStorage.setItem(`settings_${currentUser}_numberQuestions`, numberQuestions);
+        localStorage.setItem(`settings_${currentUser}_totalMins`, totalMins);
+        localStorage.setItem(`settings_${currentUser}_totalSecs`, totalSecs);
+        localStorage.setItem(`settings_${currentUser}_themes`, JSON.stringify(themes));
         setSettings({ numberQuestions, totalMins, totalSecs, themes });
-    }, [numberQuestions, totalMins, totalSecs, themes, setSettings]);
-
+    }, [numberQuestions, totalMins, totalSecs, themes, setSettings, currentUser]);
     return (
         <div style={{ display: 'flex', justifyContent: 'center', flexDirection:'column' }}>
             <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -167,6 +175,7 @@ const GameSettings = ({ setSettings }) => {
                                     <FormControlLabel control={<Checkbox name='Literature' checked={themes.Literature} onChange={handleThemes} />} label="Literatura" />
                                     <FormControlLabel control={<Checkbox name='Countries' checked={themes.Countries} onChange={handleThemes} />} label="Geografía" />
                                 </FormGroup>
+                                {isWarningVisible && <Typography color="error" style={{ fontStyle: 'italic' }}>Cuidado, siempre debe haber al menos un tema seleccionado.</Typography>}
                             </Box>
                         </div>
                     </TabPanel>

diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
@@ -24,12 +24,21 @@ const Login = ({ setLogged }) => {
   const [showComponent, setShowComponent] = useState('login');
   const [totalTime, setTotalTime] = useState(180);
   // ajustes guardados en memoria para recuperarlos en próximas partidas
-  const [settings, setSettings] = useState({
-    numberQuestions: localStorage.getItem('numberQuestions'),
-    totalMins: localStorage.getItem('totalMins'),
-    totalSecs: localStorage.getItem('totalSecs'),
-    themes: JSON.parse(localStorage.getItem('themes'))
+  const [settings, setSettings] = useState(() => {
+      const numberQuestions = localStorage.getItem(`settings_${username}_numberQuestions`) || 10;
+      const totalMins = localStorage.getItem(`settings_${username}_totalMins`) || 3;
+      const totalSecs = localStorage.getItem(`settings_${username}_totalSecs`) || 0;
+      const themes = JSON.parse(localStorage.getItem(`settings_${username}_themes`)) || {
+          Sports: true,
+          ImportantDates: true,
+          Music: true,
+          Literature: true,
+          Countries: true
+      };
+
+      return { numberQuestions, totalMins, totalSecs, themes };
   });
+
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   const loginUser = async () => {
@@ -79,6 +88,20 @@ const Login = ({ setLogged }) => {
     calculateTotalTime();
   }, [settings]);
 
+  useEffect(() => {
+    const nQuestions = localStorage.getItem(`settings_${username}_numberQuestions`) || 10;
+    const totMins = localStorage.getItem(`settings_${username}_totalMins`) || 3;
+    const totSecs = localStorage.getItem(`settings_${username}_totalSecs`) || 0;
+    const ts = JSON.parse(localStorage.getItem(`settings_${username}_themes`)) || {
+        Sports: true,
+        ImportantDates: true,
+        Music: true,
+        Literature: true,
+        Countries: true
+    };  
+    setSettings({ numberQuestions: nQuestions, totalMins: totMins, totalSecs: totSecs, themes: ts });
+  }, [username]);
+
   return (
     <>
       {loginSuccess && (
@@ -129,7 +152,7 @@ const Login = ({ setLogged }) => {
                 {showComponent === 'questionList' && <GeneratedQuestionsList />}
                 {showComponent === 'recordList' && <RecordList username={username} />}
                 {showComponent === 'rankingList' && <RankingList />}
-                {showComponent === 'settings' && <GameSettings setSettings={setSettings} />}
+                {showComponent === 'settings' && <GameSettings setSettings={setSettings} currentUser={username} />}
                 {showComponent === 'login' && (
                   <div>
                     <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>