feat: improve Nutri-Score game

src/components/ResponsiveAppBar.jsx

@@ -27,7 +27,8 @@ const pages = [
   { url: "logos", translationKey: "menu.logos" },
   { url: "eco-score", translationKey: "menu.eco-score" },
   { translationKey: "menu.manage" },
-  { url: "insights", translationKey: "menu.insights" },
+  { url: "insights", translationKey: "menu.insights", devModeOnly: true },
+  { url: "nutriscore", translationKey: "menu.nutriscore", devModeOnly: true },
   // { url: "settings", translationKey: "menu.settings" },
 ];
 
@@ -45,9 +46,7 @@ const ResponsiveAppBar = () => {
 
   const { devMode: isDevMode } = React.useContext(DevModeContext);
 
-  const displayedPages = pages.filter(
-    (page) => page.url !== "insights" || isDevMode
-  );
+  const displayedPages = pages.filter((page) => !page.devModeOnly || isDevMode);
 
   return (
     <AppBar position="static" color="secondary">
@@ -174,7 +173,7 @@ const ResponsiveAppBar = () => {
                     color="inherit"
                     key={page.url}
                     onClick={handleCloseNavMenu}
-                    sx={{ my: 2, mr: 1, display: "block", textAlign: "center" }}
+                    sx={{ my: 2, display: "block" }}
                     component={Link}
                     to={`/${page.url}`}
                     data-welcome-tour={page.url}

src/i18n/common.json

@@ -56,7 +56,8 @@
     "insights": "Insights",
     "nutritions": "Nutrition facts",
     "settings": "Settings",
-    "eco-score": "Eco-score"
+    "eco-score": "Eco-score",
+    "nutriscore": "Nutriscore"
   },
   "insights": {
     "insights": "Insights",

src/i18n/en.json

@@ -56,7 +56,8 @@
     "insights": "Insights",
     "nutritions": "Nutrition facts",
     "settings": "Settings",
-    "eco-score": "Eco-score"
+    "eco-score": "Eco-score",
+    "nutriscore": "Nutriscore"
   },
   "insights": {
     "insights": "Insights",

src/pages/nutriscoreValidator/index.jsx

@@ -12,11 +12,16 @@ import Card from "@mui/material/Card";
 import CardActionArea from "@mui/material/CardActionArea";
 import CardMedia from "@mui/material/CardMedia";
 import Checkbox from "@mui/material/Checkbox";
+import Paper from "@mui/material/Paper";
+import Slider from "@mui/material/Slider";
+import Typography from "@mui/material/Typography";
 
 const BUFFER_THRESHOLD = 30;
 const PAGE_SIZE = 50;
 
 export default function NutriscoreValidator() {
+  const [imageSize, setImageSize] = React.useState(300);
+
   const [nutriscoreGrade, setNutriscoreGrade] = React.useState("a");
   const [filterState, setFilterState] = React.useState({
     insightType: "label",
@@ -56,27 +61,52 @@ export default function NutriscoreValidator() {
 
   return (
     <Box>
-      <Box sx={{ padding: 5, textAlign: "center" }}>
+      <Stack
+        direction="row"
+        justifyContent="center"
+        alignItems="center"
+        sx={{ padding: 5, textAlign: "center" }}
+      >
         <TextField value={nutriscoreGrade} onChange={updateSearchedGrad} select>
           <MenuItem value="a">Nutriscore A</MenuItem>
           <MenuItem value="b">Nutriscore B</MenuItem>
           <MenuItem value="c">Nutriscore C</MenuItem>
           <MenuItem value="d">Nutriscore D</MenuItem>
           <MenuItem value="e">Nutriscore E</MenuItem>
         </TextField>
-      </Box>
+        <Box sx={{ mx: 2, width: 500, maxWidth: 500, textAlign: "left" }}>
+          <Typography gutterBottom>Image sizes</Typography>
+          <Slider
+            aria-label="Image size"
+            defaultValue={imageSize}
+            onChangeCommitted={(event, newValue) => setImageSize(newValue)}
+            valueLabelDisplay="auto"
+            step={50}
+            marks
+            min={50}
+            max={500}
+            sx={{ maxWidth: 500 }}
+          />
+        </Box>
+      </Stack>
+
       <Divider sx={{ mb: 4 }} />
       <div
         style={{
           display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(410px, 1fr))",
+          gridTemplateColumns: `repeat(auto-fill, minmax(${
+            imageSize + 10
+          }px, 1fr))`,
           gridGap: 10,
         }}
       >
         {buffer.map((question) => (
-          <Card sx={{ width: 400, height: 400 }} key={question.insight_id}>
+          <Card
+            sx={{ width: imageSize, height: imageSize }}
+            key={question.insight_id}
+          >
             <CardActionArea
-              sx={{ width: 400, height: 400, position: "relative" }}
+              sx={{ width: imageSize, height: imageSize, position: "relative" }}
               onClick={toggleSelection(question.insight_id)}
               tabIndex={-1}
             >
@@ -103,41 +133,47 @@ export default function NutriscoreValidator() {
         ))}
       </div>
 
-      <Stack
-        direction="row"
-        justifyContent="end"
-        sx={{ paddingX: 5, paddingY: 10 }}
+      <Paper
+        sx={{
+          paddingX: 2,
+          paddingY: 1,
+          position: "sticky",
+          bottom: 0,
+          marginTop: 2,
+        }}
       >
-        <Button
-          size="large"
-          variant="contained"
-          color="error"
-          onClick={() => {
-            selectedIds.forEach((insight_id) =>
-              answerQuestion({ value: 0, insightId: insight_id })
-            );
-            setSelectedIds([]);
-          }}
-          fullWidth
-        >
-          Wrong
-        </Button>
-        <Button
-          sx={{ ml: 3 }}
-          size="large"
-          variant="contained"
-          color="success"
-          onClick={() => {
-            selectedIds.forEach((insight_id) =>
-              answerQuestion({ value: 1, insightId: insight_id })
-            );
-            setSelectedIds([]);
-          }}
-          fullWidth
-        >
-          Correct (Nutriscore {nutriscoreGrade.toUpperCase()})
-        </Button>
-      </Stack>
+        <Stack direction="row" justifyContent="end">
+          <Button
+            size="large"
+            variant="contained"
+            color="error"
+            onClick={() => {
+              selectedIds.forEach((insight_id) =>
+                answerQuestion({ value: 0, insightId: insight_id })
+              );
+              setSelectedIds([]);
+            }}
+            fullWidth
+          >
+            Wrong
+          </Button>
+          <Button
+            sx={{ ml: 3 }}
+            size="large"
+            variant="contained"
+            color="success"
+            onClick={() => {
+              selectedIds.forEach((insight_id) =>
+                answerQuestion({ value: 1, insightId: insight_id })
+              );
+              setSelectedIds([]);
+            }}
+            fullWidth
+          >
+            Correct (Nutriscore {nutriscoreGrade.toUpperCase()})
+          </Button>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/pages/questions/QuestionDisplay.jsx

@@ -100,7 +100,6 @@ const QuestionDisplay = ({
       setNbOfPotentialQuestions(null);
       return;
     }
-
     let validRequest = true;
 
     getNbOfQuestionForValue({