Merge remote-tracking branch 'origin/develop'

Arquisoft · May 1, 2024 · 3ff080c · 3ff080c
2 parents ee5e7bf + 7d35727
commit 3ff080c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/webapp/src/components/statistics/UserStatistics.jsx b/webapp/src/components/statistics/UserStatistics.jsx
@@ -65,7 +65,7 @@ export default function UserStatistics() {
                         {t("common.statistics.personal")}
                     </Heading>
                     <Stack width="100%" direction={"row"} justifyContent={"space-between"} alignItems={"flex-start"}>
-                        <Stack paddingLeft={"6rem"}>
+                        <Stack >
                             <Box>
                                 <Heading mt={2} mb={2} display={"flex"} justifyContent={"center"} alignItems={"center"} as="h3" fontSize={"1.25em"}>
                                     {t("statistics.rightAnswers")}
@@ -75,10 +75,10 @@ export default function UserStatistics() {
                                 </Text>
                             </Box>
                             <Box>
-                                <Heading mt={2} mb={2} display={"flex"} justifyContent={"center"} alignItems={"center"} as="h3" fontSize={"1.25em"}>
+                                <Heading mt={2} mb={2} display={"flex"} justifyContent={"center"} alignItems={"center"} as="h3" fontSize={"1.25em"} color={"#955e42"}>
                                     {t("statistics.wrongAnswers")}
                                 </Heading>
-                                <Text display={"flex"} justifyContent={"center"} alignItems={"center"}>
+                                <Text display={"flex"} justifyContent={"center"} alignItems={"center"} >
                                     {t("statistics.texts.personalWrong", { wrong: userData.raw[1].value })}
                                 </Text>
                             </Box>
@@ -92,10 +92,11 @@ export default function UserStatistics() {
                             </Box>
                         </Stack>
                         <Box width={"50%"} height={"50%"} paddingLeft={"2rem"}>
-                            <PieChart width={200} height={200} data-testid={"chart"}>
-                                <Pie data={userData.raw} dataKey="value" innerRadius={48} outerRadius={65} fill="#82ca9d" paddingAngle={5}>
-                                    <Cell key={"cell-right"} fill={"green"} />
-                                    <Cell key={"cell-right"} fill={"red"} />
+                            <PieChart width={140} height={140} data-testid={"chart"}>
+                                <Pie data={userData.raw} dataKey="value" innerRadius={48} outerRadius={65} fill="#82ca9d" paddingAngle={5}
+                                     cx={65} cy={65} labelLine={false} >
+                                    <Cell key={"cell-right"} fill={"green"}/>
+                                    <Cell key={"cell-right"} fill={"#955e42"}/>
                                 </Pie>
                             </PieChart>
                         </Box>

diff --git a/webapp/src/pages/Game.jsx b/webapp/src/pages/Game.jsx
@@ -19,6 +19,7 @@ import { HttpStatusCode } from "axios";
 export default function Game() {
     const navigate = useRef(useNavigate()).current;
     const [loading, setLoading] = useState(true);
+    const [questionLoading, setQuestionLoading] = useState(true);
     const [gameId, setGameId] = useState(null); 
     const [question, setQuestion] = useState(null);
     const [answer, setAnswer] = useState({});
@@ -57,6 +58,7 @@ export default function Game() {
                 if (result.data.image) {
                     setHasImage(true);
                 }
+                setQuestionLoading(false);
             } else {
                 navigate("/dashboard");
             }
@@ -106,12 +108,13 @@ export default function Game() {
             let gameDetails = (await getGameDetails(gameId)).data;
             navigate("/dashboard/game/results", { state: { correctAnswers: gameDetails.correctly_answered_questions } });
         } else {
+            setQuestionLoading(true);
             setAnswer({});
             setHasImage(false);
             setNextDisabled(true);
             await startNewRound(gameId);
         }
-    }, [navigate, setAnswer, setNextDisabled, startNewRound,
+    }, [navigate, setAnswer, setNextDisabled, startNewRound, setQuestionLoading,
         gameId, maxRoundNumber, roundNumber]);
 
     const nextButtonClick = async () => {
@@ -208,15 +211,17 @@ export default function Game() {
                 </Flex>
             }
             <Box bg="white" p={"4 0.5"} borderRadius="md" boxShadow="md" mt={4} mb={4} w={["80%", "60%"]} shadow="2xl" rounded="1rem" alignItems="center">
-                {(question === null) ? (
-                    <Spinner
-                        thickness='4px'
-                        speed='0.65s'
-                        emptyColor='gray.200'
-                        color='green.500'
-                        size='xl'
-                        data-testid={"spinner"}
-                    />
+                {(question === null || questionLoading) ? (
+                    <Flex flexWrap={"wrap"} gap={4} mb={4} justify={"center"}>
+                        <Spinner
+                            thickness='9px'
+                            speed='0.65s'
+                            emptyColor='gray.200'
+                            color='green.500'
+                            size='xl'
+                            data-testid={"spinner"}
+                        />
+                    </Flex>
                 ) : <> 
                         <Text fontWeight='extrabold' fontSize="2xl" color={"forest_green.400"} id={"question"} textAlign={"center"}>{question.content}</Text>
                         <Flex flexWrap={"wrap"} gap={4} mb={4} justify={"center"}>

diff --git a/webapp/src/pages/Signup.jsx b/webapp/src/pages/Signup.jsx
@@ -19,7 +19,6 @@ export default function Signup() {
     const [showPassword, setShowPassword] = useState(false);
     const [showConfirmPassword, setShowConfirmPassword] = useState(false);
     const [errorMessage, setErrorMessage] = useState(null);
-    const [isSubmitting, setIsSubmitting] = useState(false); 
 
     const navigate = useNavigate();
     const { t, i18n } = useTranslation();
@@ -35,7 +34,6 @@ export default function Signup() {
     }
 
     const sendRegistration = async () => {
-        setIsSubmitting(true); 
         if (confirmPassword.trim() === "") {
             setErrorMessage({ type: t("error.conflict.type"), message: t("error.empty_password") });
             return;