feat: improve Nutri-Score game

src/components/ResponsiveAppBar.jsx

@@ -11,7 +11,7 @@ import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
 import ListSubheader from "@mui/material/ListSubheader";
 import MuiLink from "@mui/material/Link";
-import SettingsIcon from '@mui/icons-material/Settings';
+import SettingsIcon from "@mui/icons-material/Settings";
 
 import DevModeContext from "../contexts/devMode";
 import logo from "../assets/logo.png";
@@ -26,7 +26,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" },
 ];
 
@@ -44,9 +45,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">
@@ -127,67 +126,70 @@ const ResponsiveAppBar = () => {
               display: { xs: "none", md: "flex" },
               flexDirection: "row",
               alignItems: "center",
-              width: '100%',
-              justifyContent: 'space-between'
-            }}
-          >
-          <Box
-            sx={{
-              display: { xs: "none", md: "flex" },
-              flexDirection: "row",
-              alignItems: "baseline",
+              width: "100%",
+              justifyContent: "space-between",
             }}
           >
-            <MuiLink
-              sx={{ mr: 1, display: "flex", alignSelf: 'center' }}
-              href="https://world.openfoodfacts.org/"
-              target="_blank"
-            >
-              <img
-                src={logo}
-                width="30px"
-                height="30px"
-                alt="OpenFoodFact logo"
-              />
-            </MuiLink>
-            <Typography
-              variant="h6"
-              noWrap
-              component="a"
-              href="/"
+            <Box
               sx={{
-                mr: 2,
-                fontFamily: "monospace",
-                fontWeight: 700,
-                letterSpacing: ".3rem",
-                color: "inherit",
-                textDecoration: "none",
+                display: { xs: "none", md: "flex" },
+                flexDirection: "row",
+                alignItems: "baseline",
               }}
             >
-              Hunger Games
-            </Typography>
+              <MuiLink
+                sx={{ mr: 1, display: "flex", alignSelf: "center" }}
+                href="https://world.openfoodfacts.org/"
+                target="_blank"
+              >
+                <img
+                  src={logo}
+                  width="30px"
+                  height="30px"
+                  alt="OpenFoodFact logo"
+                />
+              </MuiLink>
+              <Typography
+                variant="h6"
+                noWrap
+                component="a"
+                href="/"
+                sx={{
+                  mr: 2,
+                  fontFamily: "monospace",
+                  fontWeight: 700,
+                  letterSpacing: ".3rem",
+                  color: "inherit",
+                  textDecoration: "none",
+                }}
+              >
+                Hunger Games
+              </Typography>
 
               {displayedPages.map((page) =>
                 page.url ? (
                   <Button
                     color="inherit"
                     key={page.url}
                     onClick={handleCloseNavMenu}
-                    sx={{ my: 2, display: "block"}}
+                    sx={{ my: 2, display: "block" }}
                     component={Link}
                     to={`/${page.url}`}
                   >
-                    {page.url === 'settings' ? <SettingsIcon /> : t(page.translationKey)}
+                    {page.url === "settings" ? (
+                      <SettingsIcon />
+                    ) : (
+                      t(page.translationKey)
+                    )}
                   </Button>
                 ) : null
               )}
-
-          </Box>
+            </Box>
 
             <Button
               color="inherit"
               onClick={handleCloseNavMenu}
-              sx={{ my: 2, display: "block"}}
+              sx={{ my: 2, display: "block" }}
               component={Link}
               to={`/settings`}
             >

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/localeStorageManager.js

@@ -3,21 +3,20 @@ import isEqual from "lodash.isequal";
 const STORAGE_KEY = "hunger-game-settings";
 
 export const localSettingsKeys = {
-  language: 'lang',
-  isDevMode: 'devMode',
-  hideImages: 'questions_hideImages',
-}
-
+  language: "lang",
+  isDevMode: "devMode",
+  hideImages: "questions_hideImages",
+};
 
 export const localSettings = {
   fetch: function () {
     let storedValue = {};
-    
-    try{
+
+    try {
       storedValue = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
-    } catch(e){}
+    } catch (e) {}
 
-    return (typeof storedValue === 'object')?storedValue:{};
+    return typeof storedValue === "object" ? storedValue : {};
   },
   save: function (settings) {
     localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));

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="Temperature"
+            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>
   );
 }