@nualang/nualang-ui-components 0.1.1419 → 0.1.1421

package/dist/Live/GameSettings/GameSettings.js

@@ -1,9 +1,20 @@
 import { useState, useEffect } from "react";
-import { Box, Slider, Button, Typography } from "@mui/material";
+import { Box, Slider, Button, Typography, Radio, Divider, IconButton } from "@mui/material";
 import SwipeableDrawer from "@mui/material/SwipeableDrawer";
+import ScheduleIcon from "@mui/icons-material/Schedule";
 import useDebounce from "../../hooks/useDebounce";
-import { Grid, FormControl, FormLabel, FormControlLabel, RadioGroup, Radio } from "@mui/material";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { selectedRowBg } from "../../Lists/RoleplaySelection/RoleplaySelection";
+
+// Which answer methods each game type actually supports.
+// 0 = keyboard + word bank, 1 = keyboard only (text), 2 = word bank only.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ANSWER_MODES_BY_EXERCISE = {
+  translation: [0, 1, 2],
+  listening: [0, 1, 2],
+  meaning: [2],
+  // choose the phrase from tiles
+  "meaning-read-and-write": [1] // type the answer
+};
 export default function GameSettings({
   t,
   isOpen,
@@ -18,30 +29,35 @@ export default function GameSettings({
   handleConfirm,
   numberOfQuestions,
   exercise,
-  roleplay
+  roleplay,
+  phraseListCount
 }) {
   const [timer, setTimer] = useState(time);
   const debouncedTimer = useDebounce(timer, 500);
-  const calculateEstimatedTime = (time, numberOfQuestions) => {
-    const totalTimeInSeconds = time * numberOfQuestions;
-    let totalTimeWithExtra = totalTimeInSeconds + numberOfQuestions * 10;
-    if (exercise.includes("roleplay")) {
-      totalTimeWithExtra = totalTimeWithExtra + roleplay?.script?.length * 10;
+  const isRoleplay = exercise.includes("roleplay");
+
+  // Live-scenario terminology: messages = the script's dialogue lines,
+  // interactions = the questions the student answers.
+  const roleplayScriptLength = roleplay?.script?.length ?? 0;
+  const numberOfRoleplayInteractions = isRoleplay ? roleplay?.script?.filter(item => Object.hasOwn(item, "question")).length ?? 0 : 0;
+  const numberOfRoleplayMessages = isRoleplay ? roleplayScriptLength - numberOfRoleplayInteractions : 0;
+  const roleplayHasMessages = numberOfRoleplayMessages > 0;
+  const roleplayHasInteractions = numberOfRoleplayInteractions > 0;
+
+  // For scenarios the game length is driven by the roleplay script: time
+  // answering each interaction, plus reading time for every message, plus feedback.
+  const calculateEstimatedTime = (timeValue, questions) => {
+    if (isRoleplay) {
+      const answering = numberOfRoleplayInteractions * timeValue;
+      const readingMessages = numberOfRoleplayMessages * 10;
+      const feedback = numberOfRoleplayInteractions * 10;
+      return Math.max(1, Math.ceil((answering + readingMessages + feedback) / 60));
     }
-    const estimatedMinutes = Math.ceil(totalTimeWithExtra / 60);
-    return estimatedMinutes;
+    const totalTimeInSeconds = timeValue * questions;
+    const totalTimeWithExtra = totalTimeInSeconds + questions * 10;
+    return Math.max(1, Math.ceil(totalTimeWithExtra / 60));
   };
   const [estimatedTime, setEstimatedTime] = useState(calculateEstimatedTime(time, numberOfQuestions));
-  let numberOfRoleplayInteractions = 0;
-  let numberOfRoleplayQuestions = 0;
-  let roleplayHasInteractions = false;
-  let roleplayHasQuestions = false;
-  if (exercise.includes("roleplay")) {
-    numberOfRoleplayQuestions = roleplay?.script?.filter(item => Object.hasOwn(item, "question")).length;
-    numberOfRoleplayInteractions = roleplay?.script?.length - numberOfRoleplayQuestions;
-    roleplayHasInteractions = numberOfRoleplayInteractions > 0;
-    roleplayHasQuestions = numberOfRoleplayQuestions > 0;
-  }
   useEffect(() => {
     if (isCreator) {
       handleSetTimer(debouncedTimer);
@@ -57,192 +73,333 @@ export default function GameSettings({
       setEstimatedTime(calculateEstimatedTime(timer, numberOfQuestions));
     }
   }, [timer, debouncedTimer, numberOfQuestions, isCreator]);
-  const handleChange = e => {
-    handleChangeAnswerOptions(e.target.value);
-  };
+  const allowedAnswerValues = ANSWER_MODES_BY_EXERCISE[exercise] || [0, 1, 2];
+  const answerModes = [{
+    value: 0,
+    label: t("answer_keyboard_and_word_bank")
+  }, {
+    value: 1,
+    label: t("answer_keyboard_only")
+  }, {
+    value: 2,
+    label: t("answer_word_bank_only")
+  }].filter(mode => allowedAnswerValues.includes(mode.value));
+
+  // If the current answer method isn't valid for this game type, fall back to
+  // the first supported method (e.g. read & write coerces to keyboard only).
+  useEffect(() => {
+    if (isCreator && !allowedAnswerValues.includes(Number(answerOptions))) {
+      handleChangeAnswerOptions(allowedAnswerValues[0]);
+    }
+    // Only re-run when the game type changes; allowedAnswerValues is derived
+    // from `exercise` and answerOptions is intentionally read, not depended on.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [exercise]);
   const handleConfirmAndClose = () => {
     handleConfirm();
     handleClose();
   };
-  return /*#__PURE__*/_jsxs(SwipeableDrawer, {
+  const questionsAtMax = numberOfQuestions >= numberOfPhrases;
+  const questionsReadout = questionsAtMax ? t("all_n_phrases", {
+    count: numberOfPhrases
+  }) : String(numberOfQuestions);
+
+  // Keep the question count at or above the number of phrase lists so the
+  // even-across-lists draw can always include at least one phrase from each
+  // selected list. Never exceed the total pool size.
+  const questionsMin = Math.min(numberOfPhrases || 1, Math.max(5, phraseListCount || 1));
+  const sectionLabelSx = {
+    fontSize: 14,
+    fontWeight: 700,
+    color: "text.secondary"
+  };
+  const readoutSx = {
+    fontSize: 14,
+    fontWeight: 700,
+    color: "primary.main"
+  };
+  return /*#__PURE__*/_jsx(SwipeableDrawer, {
     open: isOpen,
     anchor: "right",
     onClose: handleClose,
+    onOpen: () => {},
     sx: {
-      zIndex: "3000"
+      zIndex: 3000
     },
-    children: [/*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/_jsxs(Box, {
       sx: {
-        p: 5,
-        maxWidth: "700px"
+        width: 520,
+        maxWidth: "100vw",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "background.paper"
       },
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
+      children: [/*#__PURE__*/_jsx(Box, {
         sx: {
-          width: "100%"
+          p: "24px 24px 16px",
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          gap: 2
         },
-        spacing: 1,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "h5",
-          component: "h1",
-          gutterBottom: true,
-          children: t("game_settings")
-        }), /*#__PURE__*/_jsx(Grid, {
+        children: /*#__PURE__*/_jsx(Box, {
           sx: {
-            mt: 2
-          },
-          size: {
-            xs: 12,
-            md: 12
+            display: "flex",
+            flexDirection: "column",
+            gap: 0.5
           },
-          children: !exercise.includes("roleplay") && /*#__PURE__*/_jsxs(FormControl, {
-            component: "fieldset",
-            children: [/*#__PURE__*/_jsx(FormLabel, {
-              component: "legend",
-              children: t("answer_options")
-            }), /*#__PURE__*/_jsxs(RadioGroup, {
-              "aria-label": "Answer Options",
-              name: "Answer Options",
-              onChange: handleChange,
-              value: answerOptions,
-              children: [/*#__PURE__*/_jsx(FormControlLabel, {
-                value: 0,
-                control: /*#__PURE__*/_jsx(Radio, {}),
-                label: `${t("keyboard_and_word_bank")}`
-              }), /*#__PURE__*/_jsx(FormControlLabel, {
-                value: 1,
-                control: /*#__PURE__*/_jsx(Radio, {}),
-                label: `${t("keyboard_only")}`
-              }), /*#__PURE__*/_jsx(FormControlLabel, {
-                value: 2,
-                control: /*#__PURE__*/_jsx(Radio, {}),
-                label: `${t("word_bank_only")}`
-              })]
-            })]
+          children: /*#__PURE__*/_jsx(Typography, {
+            sx: {
+              fontSize: 24,
+              fontWeight: 700,
+              lineHeight: 1.3,
+              color: "text.primary"
+            },
+            children: t("game_settings")
           })
-        }), exercise.includes("roleplay") && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [roleplayHasInteractions && /*#__PURE__*/_jsx(_Fragment, {
-            children: /*#__PURE__*/_jsx(Grid, {
-              sx: {
-                mt: 2
-              },
-              size: {
-                xs: 12,
-                md: 12
-              },
-              children: /*#__PURE__*/_jsxs(Typography, {
-                variant: "body1",
-                component: "p",
-                children: [t("number_of_interactions"), ":", " ", /*#__PURE__*/_jsx("strong", {
-                  children: numberOfRoleplayInteractions
-                })]
-              })
-            })
-          }), roleplayHasQuestions && /*#__PURE__*/_jsx(_Fragment, {
-            children: /*#__PURE__*/_jsx(Grid, {
-              sx: {
-                mt: 2
-              },
-              size: {
-                xs: 12,
-                md: 12
-              },
-              children: /*#__PURE__*/_jsxs(Typography, {
-                variant: "body1",
-                component: "p",
-                children: [t("number_of_questions"), ":", " ", /*#__PURE__*/_jsx("strong", {
-                  children: numberOfRoleplayQuestions
+        })
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          flex: 1,
+          p: "0 24px 24px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 3,
+          overflow: "auto"
+        },
+        children: [!isRoleplay && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 1
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: sectionLabelSx,
+            children: t("how_students_answer")
+          }), /*#__PURE__*/_jsx(Box, {
+            role: "radiogroup",
+            sx: {
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: "16px",
+              overflow: "hidden"
+            },
+            children: answerModes.map((mode, i) => {
+              const selected = Number(answerOptions) === mode.value;
+              return /*#__PURE__*/_jsxs(Box, {
+                onClick: () => handleChangeAnswerOptions(mode.value),
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 2,
+                  p: 2,
+                  cursor: "pointer",
+                  transition: "background-color 200ms cubic-bezier(0.4,0,0.2,1)",
+                  ...(i > 0 ? {
+                    borderTop: "1px solid",
+                    borderColor: "divider"
+                  } : {}),
+                  ...(selected ? {
+                    backgroundColor: selectedRowBg
+                  } : {})
+                },
+                children: [/*#__PURE__*/_jsx(Radio, {
+                  checked: selected,
+                  tabIndex: -1,
+                  disableRipple: true,
+                  color: "primary",
+                  sx: {
+                    p: 0
+                  },
+                  inputProps: {
+                    "aria-label": mode.label
+                  }
+                }), /*#__PURE__*/_jsx(Box, {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 0.25
+                  },
+                  children: /*#__PURE__*/_jsx(Typography, {
+                    sx: {
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: "text.primary"
+                    },
+                    children: mode.label
+                  })
                 })]
-              })
+              }, mode.value);
             })
           })]
-        }), /*#__PURE__*/_jsx(Grid, {
+        }), isRoleplay && /*#__PURE__*/_jsxs(Box, {
           sx: {
-            mt: 2
+            display: "flex",
+            flexDirection: "column",
+            gap: 1
           },
-          size: {
-            xs: 12,
-            md: 12
-          },
-          children: /*#__PURE__*/_jsxs(FormControl, {
-            component: "fieldset",
-            children: [/*#__PURE__*/_jsx(FormLabel, {
-              component: "legend",
-              children: t("timer_length")
-            }), /*#__PURE__*/_jsx(Slider, {
-              min: 10,
-              max: 60,
-              step: 1,
-              onChange: e => setTimer(e.target.value),
-              value: timer,
-              valueLabelDisplay: "auto",
-              "aria-valuetext": `${timer} seconds`,
-              "aria-label": "Timer length"
+          children: [roleplayHasMessages && /*#__PURE__*/_jsxs(Typography, {
+            sx: {
+              fontSize: 16,
+              color: "text.primary"
+            },
+            children: [t("number_of_messages"), ":", " ", /*#__PURE__*/_jsx("strong", {
+              children: numberOfRoleplayMessages
             })]
-          })
-        }), !exercise.includes("roleplay") && /*#__PURE__*/_jsx(Grid, {
+          }), roleplayHasInteractions && /*#__PURE__*/_jsxs(Typography, {
+            sx: {
+              fontSize: 16,
+              color: "text.primary"
+            },
+            children: [t("number_of_interactions"), ":", " ", /*#__PURE__*/_jsx("strong", {
+              children: numberOfRoleplayInteractions
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
           sx: {
-            mt: 2
+            display: "flex",
+            flexDirection: "column",
+            gap: 1
           },
-          size: {
-            xs: 12,
-            md: 12
+          children: [/*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "baseline",
+              justifyContent: "space-between"
+            },
+            children: [/*#__PURE__*/_jsx(Typography, {
+              sx: sectionLabelSx,
+              children: t("time_per_question")
+            }), /*#__PURE__*/_jsx(Typography, {
+              sx: readoutSx,
+              children: `${timer}s`
+            })]
+          }), /*#__PURE__*/_jsx(Slider, {
+            min: 10,
+            max: 60,
+            step: 5,
+            onChange: (_event, value) => setTimer(Array.isArray(value) ? value[0] : value),
+            value: timer,
+            valueLabelDisplay: "auto",
+            "aria-valuetext": `${timer} seconds`,
+            "aria-label": t("time_per_question")
+          })]
+        }), !isRoleplay && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 1
           },
-          children: /*#__PURE__*/_jsxs(FormControl, {
-            component: "fieldset",
-            children: [/*#__PURE__*/_jsx(FormLabel, {
-              component: "legend",
+          children: [/*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "baseline",
+              justifyContent: "space-between"
+            },
+            children: [/*#__PURE__*/_jsx(Typography, {
+              sx: sectionLabelSx,
               children: t("number_of_questions")
-            }), /*#__PURE__*/_jsx(Slider, {
-              min: 1,
-              max: numberOfPhrases,
-              step: 1,
-              onChange: handleSetNumberOfQuestions,
-              value: numberOfQuestions,
-              valueLabelDisplay: "auto",
-              "aria-valuetext": `${numberOfQuestions} questions`,
-              "aria-label": "Number of questions"
+            }), /*#__PURE__*/_jsx(Typography, {
+              sx: readoutSx,
+              children: questionsReadout
             })]
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
+          }), /*#__PURE__*/_jsx(Slider, {
+            min: questionsMin,
+            max: numberOfPhrases,
+            step: 1,
+            onChange: handleSetNumberOfQuestions,
+            value: numberOfQuestions,
+            valueLabelDisplay: "auto",
+            "aria-valuetext": questionsAtMax ? t("all_n_phrases", {
+              count: numberOfPhrases
+            }) : `${numberOfQuestions} questions`,
+            "aria-label": t("number_of_questions")
+          }), phraseListCount > 1 && /*#__PURE__*/_jsx(Typography, {
+            sx: {
+              fontSize: 14,
+              color: "text.secondary"
+            },
+            children: t("includes_one_from_each_list")
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
           sx: {
-            mt: 2
+            backgroundColor: "action.hover",
+            borderRadius: "16px",
+            p: 2,
+            minHeight: 96,
+            flexShrink: 0,
+            display: "flex",
+            alignItems: "center",
+            gap: 2
           },
-          size: {
-            xs: 12,
-            md: 12
-          },
-          children: /*#__PURE__*/_jsxs(Typography, {
-            variant: "body1",
-            component: "p",
-            children: [t("estimated_game_time"), ":", " ", /*#__PURE__*/_jsx("strong", {
-              children: estimatedTime <= 1 ? `${estimatedTime} ${t("minute")}` : `${estimatedTime} ${t("minutes")}`
+          children: [/*#__PURE__*/_jsx(ScheduleIcon, {
+            sx: {
+              fontSize: 28,
+              color: "primary.main"
+            }
+          }), /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 0.25
+            },
+            children: [/*#__PURE__*/_jsx(Typography, {
+              sx: {
+                fontSize: 16,
+                fontWeight: 700,
+                color: "text.primary"
+              },
+              children: t("estimated_game_time", {
+                time: t("n_minutes", {
+                  count: estimatedTime
+                })
+              })
+            }), /*#__PURE__*/_jsx(Typography, {
+              sx: {
+                fontSize: 14,
+                lineHeight: 1.43,
+                color: "text.secondary",
+                minHeight: 40
+              },
+              children: t("estimated_game_time_hint", {
+                questions: isRoleplay ? numberOfRoleplayInteractions : numberOfQuestions,
+                seconds: timer
+              })
             })]
-          })
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          p: "16px 24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: 1.5
+        },
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: handleClose,
+          color: "primary",
+          sx: {
+            fontSize: 15,
+            fontWeight: 600,
+            borderRadius: "25px",
+            px: 2
+          },
+          children: t("close")
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
+          color: "primary",
+          onClick: handleConfirmAndClose,
+          sx: {
+            fontSize: 15,
+            fontWeight: 600,
+            borderRadius: "25px",
+            px: 3.5
+          },
+          children: t("confirm")
         })]
-      })
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        flexGrow: 1
-      }
-    }), /*#__PURE__*/_jsxs(Box, {
-      sx: theme => ({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "flex-start",
-        padding: "0 8px",
-        ...theme.mixins.toolbar
-      }),
-      children: [/*#__PURE__*/_jsx(Button, {
-        color: "primary",
-        onClick: handleClose,
-        children: t("close")
-      }), /*#__PURE__*/_jsx(Button, {
-        color: "primary",
-        variant: "contained",
-        onClick: handleConfirmAndClose,
-        children: t("confirm")
       })]
-    })]
+    })
   });
 }