feat: improve Nutri-Score game (#93)

src/components/ResponsiveAppBar.jsx

@@ -30,7 +30,7 @@ const pages = [
   { url: "eco-score", translationKey: "menu.eco-score" },
   { translationKey: "menu.manage" },
   { url: "insights", translationKey: "menu.insights", devModeOnly: true },
-  { url: "nutriscore", translationKey: "menu.nutritions", devModeOnly: true },
+  { url: "nutriscore", translationKey: "menu.nutriscore", devModeOnly: true },
   // { url: "settings", translationKey: "menu.settings" },
 ];
 
@@ -183,7 +183,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/contexts/devMode.jsx

@@ -1,12 +1,9 @@
 import * as React from "react";
-import {
-  getIsDevMode,
-  getVisiblePages,
-} from "../localeStorageManager";
+import { getIsDevMode, getVisiblePages } from "../localeStorageManager";
 
 const DevModeContext = React.createContext({
   devMode: getIsDevMode(),
-  visiblePages: getVisiblePages()
+  visiblePages: getVisiblePages(),
 });
 
 export default DevModeContext;

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 
 import { useQuestionBuffer } from "../questions/useQuestionBuffer";
-import Divider from "@mui/material/Divider";
 
+import Divider from "@mui/material/Divider";
 import Stack from "@mui/material/Stack";
 import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
@@ -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",
@@ -48,35 +53,71 @@ export default function NutriscoreValidator() {
     );
   };
 
-  const { buffer, answerQuestion } = useQuestionBuffer(
+  const { buffer, answerQuestion, remainingQuestionNb } = useQuestionBuffer(
     filterState,
     PAGE_SIZE,
     BUFFER_THRESHOLD
   );
 
   return (
     <Box>
-      <Box sx={{ padding: 5, textAlign: "center" }}>
+      <Box sx={{ padding: 2 }}>
+        <Typography>Annotate nutriscore logo detection by batch.</Typography>
+        <Typography>
+          To do so select all the images showing the correct/wrong nutriscore
+          value (nutriscore {nutriscoreGrade.toUpperCase()}), and click on the
+          bottom buttons to say if you selected a set correct or wrong ones.
+        </Typography>
+      </Box>
+      <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>
+        <Typography sx={{ mx: 3 }}>
+          Still {remainingQuestionNb} to annotate
+        </Typography>
+        <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 +144,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({