@magmamath/students-features 1.3.26-rc.19 → 1.3.26-rc.2

package/dist/module/features/fluency/components/fluency-solving/FluencyEquationCard.js

@@ -0,0 +1,78 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { BORDER_RADIUS, COLORS, SHADOWS } from '@magmamath/react-native-ui';
+import { EquationContent } from "./EquationContent.js";
+import { useUnit } from 'effector-react';
+import { useFluency } from "../../context/FluencyContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FluencyEquationCard = ({
+  animationStyles
+}) => {
+  const {
+    model
+  } = useFluency();
+  const input = useUnit(model.input.$state);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.stack,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.card, styles.cardFar, animationStyles.far]
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.card, styles.cardMid, animationStyles.mid]
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.card, styles.cardNear, animationStyles.near],
+      children: /*#__PURE__*/_jsx(EquationContent, {
+        leftOperand: 6,
+        rightOperand: 6
+      })
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.card, styles.cardFront, animationStyles.front],
+      children: /*#__PURE__*/_jsx(EquationContent, {
+        leftOperand: 6,
+        rightOperand: 6,
+        input: input
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  stack: {
+    width: '100%',
+    maxWidth: 560
+  },
+  card: {
+    height: 260,
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[5]
+  },
+  cardFar: {
+    position: 'absolute',
+    top: 36,
+    left: 60,
+    right: 60,
+    opacity: 0
+  },
+  cardMid: {
+    position: 'absolute',
+    top: 24,
+    left: 40,
+    right: 40
+  },
+  cardNear: {
+    position: 'absolute',
+    top: 12,
+    left: 20,
+    right: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[5]
+  },
+  cardFront: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+//# sourceMappingURL=FluencyEquationCard.js.map

package/dist/module/features/fluency/components/fluency-solving/FluencyEquationCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","Animated","BORDER_RADIUS","COLORS","SHADOWS","EquationContent","useUnit","useFluency","jsx","_jsx","jsxs","_jsxs","FluencyEquationCard","animationStyles","model","input","$state","style","styles","stack","children","card","cardFar","far","cardMid","mid","cardNear","near","leftOperand","rightOperand","cardFront","front","create","width","maxWidth","height","borderRadius","backgroundColor","NEUTRAL_1","position","top","left","right","opacity","alignItems","justifyContent"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/fluency-solving/FluencyEquationCard.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/fluency/components/fluency-solving/FluencyNumpad.js

@@ -0,0 +1,196 @@
+"use strict";
+
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useUnit } from 'effector-react';
+import { ButtonStates, COLORS, FONT_FAMILY, SelectGroup, SelectOptionColor, SelectOptionSize, SPACING } from '@magmamath/react-native-ui';
+import { BackspaceIcon } from "../../../../shared/icons/keyboard/BackspaceIcon.js";
+import { useFluency } from "../../context/FluencyContext.js";
+import { useFluencyModePreset } from "../../hooks/useFluencyModePreset.js";
+import { isWeb } from "../../../../shared/common.constants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ACTION_KEY_COLOR_SCHEME = {
+  [ButtonStates.DEFAULT]: {
+    backgroundColor: COLORS.NEUTRAL_3,
+    borderColor: COLORS.NEUTRAL_5,
+    raiseColor: COLORS.NEUTRAL_5,
+    color: COLORS.NEUTRAL_9
+  },
+  [ButtonStates.HOVER]: {
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderColor: COLORS.NEUTRAL_4,
+    raiseColor: COLORS.NEUTRAL_4,
+    color: COLORS.NEUTRAL_9
+  }
+};
+const NUMPAD_KEYS = [{
+  key: '1',
+  title: '1',
+  value: 1
+}, {
+  key: '2',
+  title: '2',
+  value: 2
+}, {
+  key: '3',
+  title: '3',
+  value: 3
+}, {
+  key: '4',
+  title: '4',
+  value: 4
+}, {
+  key: '5',
+  title: '5',
+  value: 5
+}, {
+  key: '6',
+  title: '6',
+  value: 6
+}, {
+  key: '7',
+  title: '7',
+  value: 7
+}, {
+  key: '8',
+  title: '8',
+  value: 8
+}, {
+  key: '9',
+  title: '9',
+  value: 9
+}, {
+  key: 'backspace',
+  title: /*#__PURE__*/_jsx(BackspaceIcon, {
+    size: 20,
+    color: COLORS.NEUTRAL_9
+  }),
+  value: 'backspace',
+  customColorScheme: ACTION_KEY_COLOR_SCHEME
+}, {
+  key: '0',
+  title: '0',
+  value: 0
+}, {
+  key: 'enter',
+  title: 'Enter',
+  value: 'enter',
+  customColorScheme: ACTION_KEY_COLOR_SCHEME
+}];
+export const FluencyNumpad = ({
+  onEnterPress
+}) => {
+  const {
+    model
+  } = useFluency();
+  const uiMode = useFluencyModePreset();
+  const input = useUnit(model.input.$state);
+  const [pressedKey, setPressedKey] = useState(null);
+  useEffect(() => {
+    if (!isWeb) return;
+    let timeoutId;
+    const handleKeyDown = event => {
+      let numpadKey = null;
+      if (/^\d$/.test(event.key)) numpadKey = event.key;else if (event.key === 'Backspace') numpadKey = 'backspace';else if (event.key === 'Enter') numpadKey = 'enter';
+      if (!numpadKey) return;
+      clearTimeout(timeoutId);
+      setPressedKey(numpadKey);
+      timeoutId = setTimeout(() => setPressedKey(null), 175);
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+  const accentColor = uiMode.accentColor;
+  const accentBorderColor = uiMode.matrix.mastery.mastered;
+  const enterAccentScheme = {
+    [ButtonStates.DEFAULT]: {
+      backgroundColor: accentColor,
+      borderColor: accentBorderColor,
+      raiseColor: accentBorderColor,
+      color: COLORS.NEUTRAL_1
+    },
+    [ButtonStates.HOVER]: {
+      backgroundColor: accentColor,
+      borderColor: accentBorderColor,
+      raiseColor: accentBorderColor,
+      color: COLORS.NEUTRAL_1
+    },
+    [ButtonStates.PRESSED]: {
+      backgroundColor: accentColor,
+      borderColor: accentBorderColor,
+      raiseColor: accentBorderColor,
+      color: COLORS.NEUTRAL_1
+    },
+    [ButtonStates.ACTIVE]: {
+      backgroundColor: accentColor,
+      borderColor: accentBorderColor,
+      raiseColor: accentBorderColor,
+      color: COLORS.NEUTRAL_1
+    }
+  };
+  const options = NUMPAD_KEYS.map(({
+    value,
+    customColorScheme,
+    ...props
+  }) => {
+    const isEnterKey = value === 'enter';
+    const colorScheme = isEnterKey && input ? enterAccentScheme : customColorScheme;
+    return {
+      ...props,
+      selected: pressedKey === props.key,
+      customColorScheme: colorScheme,
+      onPressIn: () => {
+        if (value === 'backspace') return model.input.set({
+          erase: 'latest'
+        });
+        if (value === 'enter') return onEnterPress();
+        model.input.set({
+          value
+        });
+      }
+    };
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsx(SelectGroup, {
+      numOfRows: 4,
+      color: SelectOptionColor.GREY,
+      size: SelectOptionSize.SMALL,
+      options: options,
+      style: {
+        container: styles.grid,
+        row: styles.row,
+        option: {
+          button: styles.optionButton,
+          text: styles.optionText
+        }
+      }
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingVertical: SPACING[400],
+    marginTop: SPACING[200]
+  },
+  grid: {
+    width: 360,
+    gap: SPACING[200]
+  },
+  row: {
+    gap: SPACING[200]
+  },
+  optionButton: {
+    height: 60
+  },
+  optionText: {
+    fontSize: 24,
+    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires
+  }
+});
+//# sourceMappingURL=FluencyNumpad.js.map

package/dist/module/features/fluency/components/fluency-solving/FluencyNumpad.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","StyleSheet","View","useUnit","ButtonStates","COLORS","FONT_FAMILY","SelectGroup","SelectOptionColor","SelectOptionSize","SPACING","BackspaceIcon","useFluency","useFluencyModePreset","isWeb","jsx","_jsx","ACTION_KEY_COLOR_SCHEME","DEFAULT","backgroundColor","NEUTRAL_3","borderColor","NEUTRAL_5","raiseColor","color","NEUTRAL_9","HOVER","NEUTRAL_2","NEUTRAL_4","NUMPAD_KEYS","key","title","value","size","customColorScheme","FluencyNumpad","onEnterPress","model","uiMode","input","$state","pressedKey","setPressedKey","timeoutId","handleKeyDown","event","numpadKey","test","clearTimeout","setTimeout","window","addEventListener","removeEventListener","accentColor","accentBorderColor","matrix","mastery","mastered","enterAccentScheme","NEUTRAL_1","PRESSED","ACTIVE","options","map","props","isEnterKey","colorScheme","selected","onPressIn","set","erase","style","styles","container","children","numOfRows","GREY","SMALL","grid","row","option","button","optionButton","text","optionText","create","alignItems","paddingVertical","marginTop","width","gap","height","fontSize","fontWeight","fontFamily","buenosAires"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/fluency-solving/FluencyNumpad.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/fluency/components/fluency-solving/FluencySolvingCard.js

@@ -0,0 +1,60 @@
+"use strict";
+
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { FluencyNumpad } from "./FluencyNumpad.js";
+import { FluencyEquationCard } from "./FluencyEquationCard.js";
+import { SPACING } from '@magmamath/react-native-ui';
+import { useFluency } from "../../context/FluencyContext.js";
+import { useCardSnapAnimation } from "../../hooks/useCardSnapAnimation.js";
+import { isWeb } from "../../../../shared/common.constants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FluencySolvingCard = () => {
+  const {
+    model
+  } = useFluency();
+  const animation = useCardSnapAnimation();
+  const submit = async () => {
+    const {
+      isCorrect
+    } = await model.submitFx();
+    animation.trigger(isCorrect ? 'right' : 'left');
+  };
+  useEffect(() => {
+    if (!isWeb) return;
+    const handleKeyDown = event => {
+      const isDigit = /^\d$/.test(event.key);
+      if (isDigit) return model.input.set({
+        value: Number(event.key)
+      });
+      if (event.key === 'Backspace') return model.input.set({
+        erase: 'latest'
+      });
+      if (event.key === 'Enter') {
+        submit();
+        return;
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.wrapper,
+      children: /*#__PURE__*/_jsx(FluencyEquationCard, {
+        animationStyles: animation.snapStyles
+      })
+    }), /*#__PURE__*/_jsx(FluencyNumpad, {
+      onEnterPress: submit
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[600],
+    marginTop: SPACING[300]
+  }
+});
+//# sourceMappingURL=FluencySolvingCard.js.map

package/dist/module/features/fluency/components/fluency-solving/FluencySolvingCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","View","StyleSheet","FluencyNumpad","FluencyEquationCard","SPACING","useFluency","useCardSnapAnimation","isWeb","jsx","_jsx","jsxs","_jsxs","FluencySolvingCard","model","animation","submit","isCorrect","submitFx","trigger","handleKeyDown","event","isDigit","test","key","input","set","value","Number","erase","window","addEventListener","removeEventListener","children","style","styles","wrapper","animationStyles","snapStyles","onEnterPress","create","alignItems","paddingVertical","paddingHorizontal","marginTop"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/fluency-solving/FluencySolvingCard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,aAAa,QAAQ,oBAAiB;AAC/C,SAASC,mBAAmB,QAAQ,0BAAuB;AAC3D,SAASC,OAAO,QAAQ,4BAA4B;AACpD,SAASC,UAAU,QAAQ,iCAA8B;AACzD,SAASC,oBAAoB,QAAQ,qCAAkC;AACvE,SAASC,KAAK,QAAQ,wCAAqC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE3D,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACtC,MAAM;IAAEC;EAAM,CAAC,GAAGR,UAAU,CAAC,CAAC;EAC9B,MAAMS,SAAS,GAAGR,oBAAoB,CAAC,CAAC;EAExC,MAAMS,MAAM,GAAG,MAAAA,CAAA,KAAY;IACzB,MAAM;MAAEC;IAAU,CAAC,GAAG,MAAMH,KAAK,CAACI,QAAQ,CAAC,CAAC;IAC5CH,SAAS,CAACI,OAAO,CAACF,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;EACjD,CAAC;EAEDjB,SAAS,CAAC,MAAM;IACd,IAAI,CAACQ,KAAK,EAAE;IAEZ,MAAMY,aAAa,GAAIC,KAAoB,IAAK;MAC9C,MAAMC,OAAO,GAAG,MAAM,CAACC,IAAI,CAACF,KAAK,CAACG,GAAG,CAAC;MACtC,IAAIF,OAAO,EAAE,OAAOR,KAAK,CAACW,KAAK,CAACC,GAAG,CAAC;QAAEC,KAAK,EAAEC,MAAM,CAACP,KAAK,CAACG,GAAG;MAAE,CAAC,CAAC;MACjE,IAAIH,KAAK,CAACG,GAAG,KAAK,WAAW,EAAE,OAAOV,KAAK,CAACW,KAAK,CAACC,GAAG,CAAC;QAAEG,KAAK,EAAE;MAAS,CAAC,CAAC;MAC1E,IAAIR,KAAK,CAACG,GAAG,KAAK,OAAO,EAAE;QACzBR,MAAM,CAAC,CAAC;QACR;MACF;IACF,CAAC;IAEDc,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEX,aAAa,CAAC;IACjD,OAAO,MAAMU,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAEZ,aAAa,CAAC;EACnE,CAAC,EAAE,EAAE,CAAC;EAEN,oBACER,KAAA,CAACX,IAAI;IAAAgC,QAAA,gBACHvB,IAAA,CAACT,IAAI;MAACiC,KAAK,EAAEC,MAAM,CAACC,OAAQ;MAAAH,QAAA,eAC1BvB,IAAA,CAACN,mBAAmB;QAACiC,eAAe,EAAEtB,SAAS,CAACuB;MAAW,CAAE;IAAC,CAC1D,CAAC,eACP5B,IAAA,CAACP,aAAa;MAACoC,YAAY,EAAEvB;IAAO,CAAE,CAAC;EAAA,CACnC,CAAC;AAEX,CAAC;AAED,MAAMmB,MAAM,GAAGjC,UAAU,CAACsC,MAAM,CAAC;EAC/BJ,OAAO,EAAE;IACPK,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAErC,OAAO,CAAC,GAAG,CAAC;IAC7BsC,iBAAiB,EAAEtC,OAAO,CAAC,GAAG,CAAC;IAC/BuC,SAAS,EAAEvC,OAAO,CAAC,GAAG;EACxB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/fluency-solving/{components/FluencySolvingHeader.js → FluencySolvingHeader.js}

@@ -2,35 +2,36 @@
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { BORDER_RADIUS, Button, ButtonColor, ButtonSize, ButtonVariant, COLORS, HeadingVariants, SHADOWS, SPACING, Typography } from '@magmamath/react-native-ui';
-import { useFluencySolvingPreset } from "../../../hooks/useFluencySolvingPreset.js";
-import { XCloseIcon } from "../../../../../shared/icons/XCloseIcon.js";
+import { BORDER_RADIUS, Button, ButtonSize, ButtonVariant, COLORS, HeadingVariants, SHADOWS, SPACING, Typography } from '@magmamath/react-native-ui';
+import { useText } from "../../../../i18n/i18n.js";
+import { useFluencyModePreset } from "../../hooks/useFluencyModePreset.js";
+import { XCloseIcon } from "../../../../shared/icons/XCloseIcon.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const FluencySolvingHeader = ({
   onClosePress
 }) => {
-  const modePreset = useFluencySolvingPreset();
+  const t = useText();
+  const uiMode = useFluencyModePreset();
+  const OperatorIcon = uiMode.operatorIcon;
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     children: [/*#__PURE__*/_jsx(Button, {
       variant: ButtonVariant.SECONDARY,
       size: ButtonSize.LARGE,
-      colorScheme: ButtonColor.WHITE,
       icon: /*#__PURE__*/_jsx(XCloseIcon, {}),
       onPress: onClosePress
     }), /*#__PURE__*/_jsx(View, {
       style: [styles.operatorBadge, {
-        backgroundColor: modePreset.colors.accent
+        backgroundColor: uiMode.accentColor
       }],
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: HeadingVariants.H7,
-        style: styles.symbol,
-        children: modePreset.symbol
+      children: /*#__PURE__*/_jsx(OperatorIcon, {
+        color: COLORS.NEUTRAL_1,
+        size: 16
       })
     }), /*#__PURE__*/_jsx(Typography, {
       variant: HeadingVariants.H4,
       style: styles.title,
-      children: modePreset.label
+      children: t(uiMode.matrix.operatorName)
     })]
   });
 };
@@ -42,7 +43,6 @@ const styles = StyleSheet.create({
     gap: 14,
     paddingVertical: SPACING[400],
     paddingHorizontal: SPACING[600],
-    backgroundColor: COLORS.NEUTRAL_1,
     ...SHADOWS[1]
   },
   operatorBadge: {
@@ -56,12 +56,6 @@ const styles = StyleSheet.create({
   title: {
     color: COLORS.NEUTRAL_10,
     fontWeight: '700'
-  },
-  symbol: {
-    fontSize: 32,
-    fontWeight: '100',
-    marginBottom: 2,
-    color: COLORS.NEUTRAL_1
   }
 });
 //# sourceMappingURL=FluencySolvingHeader.js.map

package/dist/module/features/fluency/components/fluency-solving/FluencySolvingHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","BORDER_RADIUS","Button","ButtonSize","ButtonVariant","COLORS","HeadingVariants","SHADOWS","SPACING","Typography","useText","useFluencyModePreset","XCloseIcon","jsx","_jsx","jsxs","_jsxs","FluencySolvingHeader","onClosePress","t","uiMode","OperatorIcon","operatorIcon","style","styles","container","children","variant","SECONDARY","size","LARGE","icon","onPress","operatorBadge","backgroundColor","accentColor","color","NEUTRAL_1","H4","title","matrix","operatorName","create","height","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","width","borderRadius","justifyContent","NEUTRAL_10","fontWeight"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/fluency-solving/FluencySolvingHeader.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SACEC,aAAa,EACbC,MAAM,EACNC,UAAU,EACVC,aAAa,EACbC,MAAM,EACNC,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,UAAU,QACL,4BAA4B;AACnC,SAASC,OAAO,QAAQ,0BAAuB;AAC/C,SAASC,oBAAoB,QAAQ,qCAAkC;AACvE,SAASC,UAAU,QAAQ,wCAAqC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAMhE,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC;AAAwC,CAAC,KAAK;EACnF,MAAMC,CAAC,GAAGT,OAAO,CAAC,CAAC;EACnB,MAAMU,MAAM,GAAGT,oBAAoB,CAAC,CAAC;EACrC,MAAMU,YAAY,GAAGD,MAAM,CAACE,YAAY;EAExC,oBACEN,KAAA,CAACjB,IAAI;IAACwB,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5BZ,IAAA,CAACZ,MAAM;MACLyB,OAAO,EAAEvB,aAAa,CAACwB,SAAU;MACjCC,IAAI,EAAE1B,UAAU,CAAC2B,KAAM;MACvBC,IAAI,eAAEjB,IAAA,CAACF,UAAU,IAAE,CAAE;MACrBoB,OAAO,EAAEd;IAAa,CACvB,CAAC,eACFJ,IAAA,CAACf,IAAI;MAACwB,KAAK,EAAE,CAACC,MAAM,CAACS,aAAa,EAAE;QAAEC,eAAe,EAAEd,MAAM,CAACe;MAAY,CAAC,CAAE;MAAAT,QAAA,eAC3EZ,IAAA,CAACO,YAAY;QAACe,KAAK,EAAE/B,MAAM,CAACgC,SAAU;QAACR,IAAI,EAAE;MAAG,CAAE;IAAC,CAC/C,CAAC,eACPf,IAAA,CAACL,UAAU;MAACkB,OAAO,EAAErB,eAAe,CAACgC,EAAG;MAACf,KAAK,EAAEC,MAAM,CAACe,KAAM;MAAAb,QAAA,EAC1DP,CAAC,CAACC,MAAM,CAACoB,MAAM,CAACC,YAAY;IAAC,CACpB,CAAC;EAAA,CACT,CAAC;AAEX,CAAC;AAED,MAAMjB,MAAM,GAAGxB,UAAU,CAAC0C,MAAM,CAAC;EAC/BjB,SAAS,EAAE;IACTkB,MAAM,EAAE,EAAE;IACVC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAE,EAAE;IACPC,eAAe,EAAEvC,OAAO,CAAC,GAAG,CAAC;IAC7BwC,iBAAiB,EAAExC,OAAO,CAAC,GAAG,CAAC;IAC/B,GAAGD,OAAO,CAAC,CAAC;EACd,CAAC;EACD0B,aAAa,EAAE;IACbgB,KAAK,EAAE,EAAE;IACTN,MAAM,EAAE,EAAE;IACVO,YAAY,EAAEjD,aAAa,CAAC,GAAG,CAAC;IAChC4C,UAAU,EAAE,QAAQ;IACpBM,cAAc,EAAE,QAAQ;IACxB,GAAG5C,OAAO,CAAC,CAAC;EACd,CAAC;EACDgC,KAAK,EAAE;IACLH,KAAK,EAAE/B,MAAM,CAAC+C,UAAU;IACxBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/fluency-solving/FluencySolvingProgress.js

@@ -0,0 +1,41 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { COLORS, SPACING } from '@magmamath/react-native-ui';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FluencySolvingProgress = ({
+  total,
+  activeIndex
+}) => {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: Array.from({
+      length: total
+    }).map((_, index) => /*#__PURE__*/_jsx(View, {
+      style: index === activeIndex ? styles.dotActive : styles.dot
+    }, index))
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: SPACING[200],
+    paddingHorizontal: SPACING[600],
+    paddingVertical: 14,
+    justifyContent: 'center'
+  },
+  dot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: COLORS.NEUTRAL_4
+  },
+  dotActive: {
+    width: 34,
+    height: 12,
+    backgroundColor: COLORS.NEUTRAL_10,
+    borderRadius: 9999
+  }
+});
+//# sourceMappingURL=FluencySolvingProgress.js.map

package/dist/module/features/fluency/components/fluency-solving/FluencySolvingProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","COLORS","SPACING","jsx","_jsx","FluencySolvingProgress","total","activeIndex","style","styles","container","children","Array","from","length","map","_","index","dotActive","dot","create","flexDirection","gap","paddingHorizontal","paddingVertical","justifyContent","width","height","borderRadius","backgroundColor","NEUTRAL_4","NEUTRAL_10"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/fluency-solving/FluencySolvingProgress.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,MAAM,EAAEC,OAAO,QAAQ,4BAA4B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAO5D,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAyC,CAAC,KAAK;EAC7F,oBACEH,IAAA,CAACL,IAAI;IAACS,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,EAC3BC,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAER;IAAM,CAAC,CAAC,CAACS,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,kBAC1Cb,IAAA,CAACL,IAAI;MAAaS,KAAK,EAAES,KAAK,KAAKV,WAAW,GAAGE,MAAM,CAACS,SAAS,GAAGT,MAAM,CAACU;IAAI,GAApEF,KAAsE,CAClF;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMR,MAAM,GAAGT,UAAU,CAACoB,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTW,aAAa,EAAE,KAAK;IACpBC,GAAG,EAAEpB,OAAO,CAAC,GAAG,CAAC;IACjBqB,iBAAiB,EAAErB,OAAO,CAAC,GAAG,CAAC;IAC/BsB,eAAe,EAAE,EAAE;IACnBC,cAAc,EAAE;EAClB,CAAC;EACDN,GAAG,EAAE;IACHO,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,YAAY,EAAE,CAAC;IACfC,eAAe,EAAE5B,MAAM,CAAC6B;EAC1B,CAAC;EACDZ,SAAS,EAAE;IACTQ,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVE,eAAe,EAAE5B,MAAM,CAAC8B,UAAU;IAClCH,YAAY,EAAE;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/matrix/FluencyMatrix.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const FluencyMatrix = () => /*#__PURE__*/_jsxs(View, {
   style: styles.container,
   children: [/*#__PURE__*/_jsx(View, {
-    style: styles.matrixFillContainer,
+    style: styles.body,
     children: /*#__PURE__*/_jsx(MatrixFill, {})
   }), /*#__PURE__*/_jsx(MatrixLegend, {})]
 });
@@ -21,9 +21,10 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     ...SHADOWS[1]
   },
-  matrixFillContainer: {
+  body: {
     flex: 1,
-    padding: SPACING[300]
+    padding: SPACING[300],
+    minHeight: 354
   }
 });
 //# sourceMappingURL=FluencyMatrix.js.map

package/dist/module/features/fluency/components/matrix/FluencyMatrix.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","StyleSheet","BORDER_RADIUS","COLORS","SHADOWS","SPACING","MatrixLegend","MatrixFill","jsx","_jsx","jsxs","_jsxs","FluencyMatrix","style","styles","container","children","matrixFillContainer","create","flex","backgroundColor","NEUTRAL_1","borderRadius","overflow","padding"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/matrix/FluencyMatrix.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,aAAa,EAAEC,MAAM,EAAEC,OAAO,EAAEC,OAAO,QAAQ,4BAA4B;AACpF,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,UAAU,QAAQ,4BAAyB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpD,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BD,KAAA,CAACX,IAAI;EAACa,KAAK,EAAEC,MAAM,CAACC,SAAU;EAAAC,QAAA,gBAC5BP,IAAA,CAACT,IAAI;IAACa,KAAK,EAAEC,MAAM,CAACG,mBAAoB;IAAAD,QAAA,eACtCP,IAAA,CAACF,UAAU,IAAE;EAAC,CACV,CAAC,eAEPE,IAAA,CAACH,YAAY,IAAE,CAAC;AAAA,CACZ,CACP;AAED,MAAMQ,MAAM,GAAGb,UAAU,CAACiB,MAAM,CAAC;EAC/BH,SAAS,EAAE;IACTI,IAAI,EAAE,CAAC;IACPC,eAAe,EAAEjB,MAAM,CAACkB,SAAS;IACjCC,YAAY,EAAEpB,aAAa,CAAC,GAAG,CAAC;IAChCqB,QAAQ,EAAE,QAAQ;IAClB,GAAGnB,OAAO,CAAC,CAAC;EACd,CAAC;EACDa,mBAAmB,EAAE;IACnBE,IAAI,EAAE,CAAC;IACPK,OAAO,EAAEnB,OAAO,CAAC,GAAG;EACtB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","View","StyleSheet","BORDER_RADIUS","COLORS","SHADOWS","SPACING","MatrixLegend","MatrixFill","jsx","_jsx","jsxs","_jsxs","FluencyMatrix","style","styles","container","children","body","create","flex","backgroundColor","NEUTRAL_1","borderRadius","overflow","padding","minHeight"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/matrix/FluencyMatrix.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,aAAa,EAAEC,MAAM,EAAEC,OAAO,EAAEC,OAAO,QAAQ,4BAA4B;AACpF,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,UAAU,QAAQ,4BAAyB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpD,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BD,KAAA,CAACX,IAAI;EAACa,KAAK,EAAEC,MAAM,CAACC,SAAU;EAAAC,QAAA,gBAC5BP,IAAA,CAACT,IAAI;IAACa,KAAK,EAAEC,MAAM,CAACG,IAAK;IAAAD,QAAA,eACvBP,IAAA,CAACF,UAAU,IAAE;EAAC,CACV,CAAC,eACPE,IAAA,CAACH,YAAY,IAAE,CAAC;AAAA,CACZ,CACP;AAED,MAAMQ,MAAM,GAAGb,UAAU,CAACiB,MAAM,CAAC;EAC/BH,SAAS,EAAE;IACTI,IAAI,EAAE,CAAC;IACPC,eAAe,EAAEjB,MAAM,CAACkB,SAAS;IACjCC,YAAY,EAAEpB,aAAa,CAAC,GAAG,CAAC;IAChCqB,QAAQ,EAAE,QAAQ;IAClB,GAAGnB,OAAO,CAAC,CAAC;EACd,CAAC;EACDa,IAAI,EAAE;IACJE,IAAI,EAAE,CAAC;IACPK,OAAO,EAAEnB,OAAO,CAAC,GAAG,CAAC;IACrBoB,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/matrix/components/MatrixCell.js

@@ -1,111 +1,41 @@
 "use strict";
 
-import React, { useState } from 'react';
-import { Pressable, View, Text, StyleSheet } from 'react-native';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
-import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui';
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { BORDER_RADIUS, COLORS } from '@magmamath/react-native-ui';
+import { getCellBackground, getCellColorByScore, getCellLabel, getMasteryLevel } from "../../../fluency.helpers.js";
 import { FluencyMasteryLevel } from "../../../fluency.constants.js";
 import { StarFillIcon } from "../../../assets/StarFillIcon.js";
-import { CellTooltip } from "./CellTooltip.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const MatrixCell = ({
-  label,
-  box,
-  isHeader,
-  isEmpty,
-  levelColors,
-  tooltipLabel
+  row,
+  col,
+  score,
+  mastery
 }) => {
-  const [isActive, setIsActive] = useState(false);
-  const masteryLevel = box || null;
-  const isMastered = masteryLevel === FluencyMasteryLevel.MASTERED;
-  const bgColor = (() => {
-    if (masteryLevel) return levelColors[masteryLevel];
-    if (isHeader) return COLORS.NEUTRAL_5;
-    return COLORS.NEUTRAL_2;
-  })();
-  const showTooltip = isActive && !!tooltipLabel;
-  const activate = () => setIsActive(true);
-  const deactivate = () => setIsActive(false);
-  if (isEmpty) {
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.wrapper,
-      children: /*#__PURE__*/_jsx(View, {
-        style: [styles.cell, styles.emptyCell],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.emptyCellText,
-          children: "\u2212"
-        })
-      })
-    });
-  }
+  const label = getCellLabel(row, col);
+  const isMastered = score !== null && getMasteryLevel(score) === FluencyMasteryLevel.MASTERED;
+  const background = score !== null ? getCellColorByScore(score, mastery) : getCellBackground(row, col);
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.wrapper, showTooltip && styles.wrapperActive],
-    children: [showTooltip && /*#__PURE__*/_jsx(Animated.View, {
-      entering: FadeIn.duration(200),
-      exiting: FadeOut.duration(200),
-      style: [styles.tooltipContainer, {
-        pointerEvents: 'none'
-      }],
-      children: /*#__PURE__*/_jsx(CellTooltip, {
-        label: tooltipLabel
-      })
-    }), /*#__PURE__*/_jsxs(Pressable, {
-      style: [styles.cell, {
-        backgroundColor: bgColor
-      }],
-      onHoverIn: activate,
-      onHoverOut: deactivate,
-      onPressIn: activate,
-      onPressOut: deactivate,
-      children: [isMastered && /*#__PURE__*/_jsx(StarFillIcon, {
-        color: isActive ? COLORS.PRIMARY_YELLOW : undefined
-      }), label !== null && /*#__PURE__*/_jsx(Text, {
-        style: typeof label === 'string' ? styles.symbolText : styles.headerText,
-        children: label
-      })]
+    style: [styles.cell, {
+      backgroundColor: background
+    }],
+    children: [isMastered && /*#__PURE__*/_jsx(StarFillIcon, {}), label !== null && /*#__PURE__*/_jsx(Text, {
+      style: styles.headerText,
+      children: label
     })]
   });
 };
 const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1
-  },
-  wrapperActive: {
-    zIndex: 1
-  },
   cell: {
     flex: 1,
     borderRadius: BORDER_RADIUS[100],
     alignItems: 'center',
     justifyContent: 'center'
   },
-  tooltipContainer: {
-    position: 'absolute',
-    bottom: '80%',
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-    paddingBottom: SPACING[50],
-    zIndex: 1
-  },
-  emptyCell: {
-    backgroundColor: COLORS.NEUTRAL_2
-  },
-  emptyCellText: {
-    fontSize: 12,
-    color: COLORS.NEUTRAL_5,
-    fontFamily: FONT_FAMILY.buenosAires
-  },
   headerText: {
-    fontSize: 12,
-    fontWeight: '600',
-    color: COLORS.NEUTRAL_2,
-    fontFamily: FONT_FAMILY.buenosAires
-  },
-  symbolText: {
-    fontSize: 24,
-    color: COLORS.NEUTRAL_7
+    fontSize: 13,
+    color: COLORS.NEUTRAL_2
   }
 });
 //# sourceMappingURL=MatrixCell.js.map