@nualang/nualang-ui-components 0.1.1419 → 0.1.1421

package/dist/Lists/RoleplaySelection/RoleplaySelection.js

@@ -1,196 +1,180 @@
-import { useState, useEffect } from "react";
-import { Box, ListItemText, ListItemButton, Avatar, ListItemIcon, Tooltip, Collapse, Checkbox } from "@mui/material";
-import PlayCircleOutlinedIcon from "@mui/icons-material/PlayCircleOutlined";
+import { Box, ListItemText, ListItemButton, Avatar, Radio, Tooltip, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import ImageSearchIcon from "@mui/icons-material/ImageSearch";
 import MessageIcon from "@mui/icons-material/Message";
 import RateReviewIcon from "@mui/icons-material/RateReview";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import AutoStoriesIcon from "@mui/icons-material/AutoStories";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Roleplay({
+
+// Theme-aware selected-row tint (keeps the primary hue in light and dark).
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const selectedRowBg = theme => alpha(theme.palette.primary.main, theme.palette.mode === "dark" ? 0.24 : 0.08);
+export const getRoleplayMessageCount = roleplay => {
+  const questions = roleplay?.script?.filter(item => Object.hasOwn(item, "question")).length ?? 0;
+  return (roleplay?.script?.length ?? 0) - questions;
+};
+export const getRoleplayInteractionCount = roleplay => roleplay?.script?.filter(item => Object.hasOwn(item, "question")).length ?? 0;
+export const isRoleplayPlayable = roleplay => {
+  const hasText = roleplay?.script?.length > 0 && roleplay.script.some(line => line.text !== undefined);
+  if (!hasText) return false;
+  const questions = roleplay.script.filter(item => Object.hasOwn(item, "question")).length;
+  const interactions = roleplay.script.length - questions;
+  return interactions > 0 && questions > 0;
+};
+
+// Whether a topic has a scenario worth showing in scenarios mode. Empty topics
+// are dropped; topics whose roleplay scripts haven't loaded yet are kept (so we
+// never hide a real scenario just because its script isn't in the payload); once
+// scripts are present, only topics with a playable scenario are kept.
+export const topicHasScenario = (roleplays = []) => {
+  if (!roleplays.length) return false;
+  const anyScriptLoaded = roleplays.some(rp => Array.isArray(rp?.script));
+  if (!anyScriptLoaded) return true;
+  return roleplays.some(isRoleplayPlayable);
+};
+
+// Message + interaction (question) counts with their icons — reused on the row
+// and in the dialog footer.
+export function ScenarioCounts({
   roleplay,
-  handleCreateGame,
-  courseSectionTopicId,
-  isRoleplaySelected,
-  setIsRoleplaySelected,
-  t,
-  isExerciseSelected,
-  handleSelectExercise = null,
-  topicName
+  t
 }) {
-  const [open, setOpen] = useState(false);
-  const games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"];
-  const handleRoleplaySelected = exerciseName => () => {
-    setIsRoleplaySelected(true);
-    handleCreateGame({
-      courseSectionTopicId: courseSectionTopicId,
-      exercise: exerciseName,
-      timer: 30,
-      answerOption: 0,
-      roleplayId: roleplay.roleplayId,
-      topicName: topicName ?? ""
-    });
-  };
-  const isRoleplayEmpty = roleplay?.script?.length === 0 || !roleplay?.script?.some(line => line.text !== undefined);
-  const numberOfRoleplayQuestions = roleplay?.script?.filter(item => Object.hasOwn(item, "question")).length;
-  const numberOfRoleplayInteractions = roleplay?.script?.length - numberOfRoleplayQuestions;
-  const roleplayHasInteractions = numberOfRoleplayInteractions > 0;
-  const roleplayHasQuestions = numberOfRoleplayQuestions > 0;
-  const isRoleplayValid = roleplayHasInteractions && roleplayHasQuestions;
-  return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: roleplay?.script?.length === 0 ? t("roleplay_no_interactions") : !isRoleplayValid ? t("roleplay_not_valid") : "",
-      placement: "right",
-      children: /*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsxs(ListItemButton, {
-          onClick: () => setOpen(!open),
-          disabled: isRoleplaySelected || isRoleplayEmpty || isExerciseSelected || !isRoleplayValid,
+  const messages = getRoleplayMessageCount(roleplay);
+  const interactions = getRoleplayInteractionCount(roleplay);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [messages > 0 && /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "textSecondary",
+        children: messages
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: t("number_of_messages"),
+        placement: "top",
+        children: /*#__PURE__*/_jsx(MessageIcon, {
+          sx: {
+            fontSize: 18,
+            color: "text.secondary"
+          }
+        })
+      })]
+    }), interactions > 0 && /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "textSecondary",
+        children: interactions
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: t("number_of_interactions"),
+        placement: "top",
+        children: /*#__PURE__*/_jsx(RateReviewIcon, {
           sx: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            flexDirection: {
-              xs: "column",
-              sm: "row"
-            }
-          },
-          children: [/*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              width: {
-                xs: "100%",
-                sm: "85%"
-              }
-            },
-            children: [/*#__PURE__*/_jsx(Avatar, {
-              src: roleplay.picture
-            }), /*#__PURE__*/_jsx(ListItemText, {
-              primary: roleplay.roleplayName,
-              secondary: roleplay.description,
-              sx: {
-                marginLeft: 2
-              }
-            })]
-          }), roleplayHasInteractions && /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center"
-            },
-            children: [/*#__PURE__*/_jsx(ListItemText, {
-              secondary: numberOfRoleplayInteractions,
-              sx: {
-                marginRight: 0.5
-              }
-            }), /*#__PURE__*/_jsx(ListItemIcon, {
-              sx: {
-                marginRight: {
-                  xs: 0,
-                  sm: -3
-                }
-              },
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                title: t("number_of_interactions"),
-                placement: "top",
-                children: /*#__PURE__*/_jsx(MessageIcon, {
-                  sx: {
-                    width: 18
-                  }
-                })
-              })
-            })]
-          }), roleplayHasQuestions && /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center"
-            },
-            children: [/*#__PURE__*/_jsx(ListItemText, {
-              secondary: numberOfRoleplayQuestions,
-              sx: {
-                marginRight: 0.5
-              }
-            }), /*#__PURE__*/_jsx(ListItemIcon, {
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                title: t("number_of_questions"),
-                placement: "top",
-                children: /*#__PURE__*/_jsx(RateReviewIcon, {
-                  sx: {
-                    width: 18
-                  }
-                })
-              })
-            })]
-          }), /*#__PURE__*/_jsx(ListItemIcon, {
-            onClick: () => setOpen(!open),
-            children: open ? /*#__PURE__*/_jsx(ExpandLessIcon, {
-              sx: {
-                color: "#757575"
-              }
-            }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
-              sx: {
-                color: "#757575"
-              }
-            })
-          })]
+            fontSize: 18,
+            color: "text.secondary"
+          }
         })
+      })]
+    })]
+  });
+}
+function Roleplay({
+  roleplay,
+  selected,
+  onSelect,
+  t
+}) {
+  return /*#__PURE__*/_jsxs(ListItemButton, {
+    onClick: onSelect,
+    role: "radio",
+    "aria-checked": selected,
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      px: 2,
+      py: 1,
+      borderRadius: 1,
+      ...(selected ? {
+        backgroundColor: selectedRowBg
+      } : {})
+    },
+    children: [roleplay.picture ? /*#__PURE__*/_jsx(Avatar, {
+      src: roleplay.picture,
+      alt: roleplay.roleplayName,
+      sx: {
+        flex: "none"
+      }
+    }) : /*#__PURE__*/_jsx(Avatar, {
+      alt: roleplay.roleplayName,
+      sx: {
+        flex: "none"
+      },
+      children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
+    }), /*#__PURE__*/_jsx(ListItemText, {
+      primary: roleplay.roleplayName,
+      secondary: roleplay.description,
+      sx: {
+        ml: 2,
+        flex: 1,
+        minWidth: 0
+      }
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5,
+        mr: 1
+      },
+      children: /*#__PURE__*/_jsx(ScenarioCounts, {
+        roleplay: roleplay,
+        t: t
       })
-    }), /*#__PURE__*/_jsx(Collapse, {
-      in: open,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: /*#__PURE__*/_jsx(Box, {
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        minWidth: 56,
+        display: "flex",
+        justifyContent: "flex-end",
+        flex: "none"
+      },
+      children: /*#__PURE__*/_jsx(Radio, {
+        checked: selected,
+        tabIndex: -1,
+        disableRipple: true,
+        color: "primary",
         sx: {
-          ml: 3.5
+          p: 0
         },
-        children: /*#__PURE__*/_jsxs(ListItemButton, {
-          onClick: handleRoleplaySelected("roleplay-story"),
-          disabled: isRoleplaySelected || isExerciseSelected || !isRoleplayValid,
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            flexDirection: {
-              xs: "column",
-              sm: "row"
-            }
-          },
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(AutoStoriesIcon, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("roleplay-story"),
-            secondary: t("story_description")
-          }), /*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(PlayCircleOutlinedIcon, {
-              color: "primary"
-            })
-          })]
-        })
+        inputProps: {
+          "aria-label": roleplay.roleplayName
+        }
       })
     })]
   });
 }
 function RoleplaySelection({
   roleplays = [],
-  handleCreateGame,
   courseSectionTopicId,
   t,
-  isExerciseSelected,
-  handleSelectExercise,
-  useCase,
+  selectedScenarioId,
+  onSelectScenario,
   topicName
 }) {
-  const [isRoleplaySelected, setIsRoleplaySelected] = useState(false);
-  return roleplays.map((roleplay, index) => /*#__PURE__*/_jsx(Roleplay, {
+  // Only surface playable scenarios (never a disabled row).
+  const scenarios = roleplays.filter(isRoleplayPlayable);
+  return scenarios.map((roleplay, index) => /*#__PURE__*/_jsx(Roleplay, {
     roleplay: roleplay,
-    handleCreateGame: handleCreateGame,
-    isRoleplaySelected: isRoleplaySelected,
-    setIsRoleplaySelected: setIsRoleplaySelected,
-    courseSectionTopicId: courseSectionTopicId,
-    t: t,
-    isExerciseSelected: isExerciseSelected,
-    handleSelectExercise: handleSelectExercise,
-    useCase: useCase,
-    topicName: topicName
-  }, index));
+    selected: selectedScenarioId === roleplay.roleplayId,
+    onSelect: () => onSelectScenario({
+      ...roleplay,
+      courseSectionTopicId,
+      topicName: topicName ?? ""
+    }),
+    t: t
+  }, roleplay.roleplayId || index));
 }
 export default RoleplaySelection;

package/dist/Live/Game/Game.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { Dialog, Box, Slide, Typography, AppBar, Toolbar, IconButton, Tooltip, Badge } from "@mui/material";
 import LightbulbIcon from "@mui/icons-material/Lightbulb";
 import { makeStyles } from "tss-react/mui";
@@ -6,8 +6,8 @@ import { useTheme } from "@mui/material/styles";
 import { styled } from "@mui/system";
 import Close from "@mui/icons-material/Close";
 import PersonAddIcon from "@mui/icons-material/PersonAdd";
-import People from "@mui/icons-material/People";
 import SettingsIcon from "@mui/icons-material/Settings";
+import People from "@mui/icons-material/People";
 import { Joyride, STATUS } from "react-joyride";
 import ExerciseProgressBar from "../../Misc/ExerciseProgressBar/ExerciseProgressBar";
 import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
@@ -23,9 +23,7 @@ import GameMembers from "../GameMembers/GameMembers";
 import GameSettings from "../GameSettings/GameSettings";
 import FinalScoreDrawer from "../Misc/FinalScoreDrawer/FinalScoreDrawer";
 import RewardEarned from "../../Dialogs/RewardEarned/RewardEarned";
-import LiveGameTutorial from "../../Dialogs/LiveGameTutorial/LiveGameTutorial";
 import { startJoyrideWhenReady } from "../../utils/joyride";
-import HelpIcon from "@mui/icons-material/Help";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   appBar: {
@@ -152,7 +150,6 @@ export default function Game({
   const [isInviteDrawerOpen, setIsInviteDrawerOpen] = useState(false);
   const [isMembersDrawerOpen, setIsMembersDrawerOpen] = useState(false);
   const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] = useState(false);
-  const [isLiveGameTutorialOpen, setIsLiveGameTutorialOpen] = useState(false);
   const activeMembers = useMemo(() => membersInRoom.filter(member => member.isActive === true), [membersInRoom]);
   const inactiveMembers = useMemo(() => [...membersNotInRoom, ...membersInRoom.filter(member => member.isActive === false)], [membersInRoom, membersNotInRoom]);
   const handleOpenInviteDrawer = () => {
@@ -170,9 +167,6 @@ export default function Game({
   const handleOpenSettingsDrawer = () => {
     setIsSettingsDrawerOpen(true);
   };
-  const handleOpenLiveGameTutorial = () => {
-    setIsLiveGameTutorialOpen(true);
-  };
   const handleCloseSettingsDrawer = () => {
     setIsSettingsDrawerOpen(false);
   };
@@ -202,16 +196,6 @@ export default function Game({
     }),
     spotlightPadding: 8,
     target: "#inviteStudents"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("nualang_live_help")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("nualang_live_help_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#appBarGameHelp"
   }, {
     content: /*#__PURE__*/_jsxs("div", {
       children: [/*#__PURE__*/_jsx("h2", {
@@ -252,6 +236,21 @@ export default function Game({
       })));
     }
   }, [open, isCreator]);
+
+  // Show the settings drawer to the creator in the waiting room so they review
+  // (and adjust) the game settings before starting. Only auto-opens once per
+  // opening; if the teacher closes it, it stays closed.
+  const hasAutoOpenedSettingsRef = useRef(false);
+  useEffect(() => {
+    if (!open) {
+      hasAutoOpenedSettingsRef.current = false;
+      return;
+    }
+    if (isCreator && gameStatus !== "LIVE" && !hasAutoOpenedSettingsRef.current) {
+      hasAutoOpenedSettingsRef.current = true;
+      setIsSettingsDrawerOpen(true);
+    }
+  }, [open, isCreator, gameStatus]);
   const handleJoyrideCallback = data => {
     const {
       status,
@@ -279,7 +278,6 @@ export default function Game({
     }
   };
   const nextScriptLine = roleplayMessages?.length && selectedRoleplay?.script?.[roleplayMessages.length] ? selectedRoleplay.script[roleplayMessages.length] : "";
-  const videoUrl = topicInfo.videoUrl ?? null;
   return /*#__PURE__*/_jsxs(Dialog, {
     fullScreen: true,
     open: open,
@@ -342,23 +340,6 @@ export default function Game({
                 children: /*#__PURE__*/_jsx(People, {})
               })
             })
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("instructions"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => {
-                handleOpenLiveGameTutorial();
-              },
-              id: "appBarGameHelp",
-              color: "inherit",
-              "data-cy": "game-help",
-              "aria-label": "help",
-              size: "large",
-              children: /*#__PURE__*/_jsx(HelpIcon, {
-                sx: {
-                  color: "white"
-                }
-              })
-            })
           }), /*#__PURE__*/_jsx(Tooltip, {
             title: t("game_settings"),
             children: /*#__PURE__*/_jsx(IconButton, {
@@ -458,9 +439,6 @@ export default function Game({
         gameAward: gameAward,
         userImage: userImage,
         exerciseName: exerciseName,
-        isLiveGameTutorialOpen: isLiveGameTutorialOpen,
-        setIsLiveGameTutorialOpen: setIsLiveGameTutorialOpen,
-        videoUrl: videoUrl,
         ...otherProps
       }), gameView === GameViewTypes.GameStarting && /*#__PURE__*/_jsx(Typography, {
         variant: "h1",
@@ -613,11 +591,6 @@ export default function Game({
       classroomURL: classroomURL,
       isOpen: isInviteDrawerOpen,
       handleClose: handleCloseInviteDrawer
-    }), /*#__PURE__*/_jsx(LiveGameTutorial, {
-      open: isLiveGameTutorialOpen,
-      handleClose: () => setIsLiveGameTutorialOpen(false),
-      exerciseName: exerciseName,
-      t: t
     }), /*#__PURE__*/_jsx(GameMembers, {
       t: t,
       isOpen: isMembersDrawerOpen,
@@ -641,7 +614,8 @@ export default function Game({
       handleConfirm: handleConfirm,
       numberOfQuestions: numberOfQuestions,
       exercise: exercise,
-      roleplay: selectedRoleplay
+      roleplay: selectedRoleplay,
+      phraseListCount: (otherProps.sources || []).length
     }), /*#__PURE__*/_jsx(Joyride, {
       onEvent: handleJoyrideCallback,
       continuous: true,

package/dist/Live/GameMembers/GameMembers.js

@@ -64,6 +64,10 @@ export default function GameMembers({
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "h6",
         gutterBottom: true,
+        sx: {
+          fontSize: "24px",
+          fontWeight: 700
+        },
         children: t("members")
       }), /*#__PURE__*/_jsx(TextField, {
         id: "search",