@magmamath/students-features 1.4.1 → 1.4.2

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

@@ -0,0 +1,141 @@
+"use strict";
+
+import React, { useRef } from 'react';
+import { View, StyleSheet, TextInput, Platform } from 'react-native';
+import { COLORS, FONT_FAMILY, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui';
+import { useText } from "../../../../../i18n/i18n.js";
+import { useFluencySolvingPreset } from "../../../hooks/useFluencySolvingPreset.js";
+import { usePreventWebKeys } from "../../../hooks/usePreventWebKeys.js";
+import { AttemptStatus, MAX_INPUT_LENGTH } from "../../../shared/fluency.constants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const CURSOR_MOVE_KEYS = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
+const STATUS_LABELS = {
+  [AttemptStatus.CORRECT]: 'student.fluency.correct',
+  [AttemptStatus.INCORRECT]: 'student.fluency.incorrect',
+  [AttemptStatus.SKIPPED]: 'student.fluency.skipped'
+};
+const STATUS_COLOR = {
+  [AttemptStatus.CORRECT]: COLORS.PRIMARY_GREEN,
+  [AttemptStatus.INCORRECT]: COLORS.PRIMARY_RED,
+  [AttemptStatus.SKIPPED]: COLORS.NEUTRAL_7
+};
+export const EquationContent = ({
+  leftOperand,
+  rightOperand,
+  mode,
+  value = '',
+  readOnly = false,
+  status,
+  correctAnswer,
+  onChange
+}) => {
+  const t = useText();
+  const modePreset = useFluencySolvingPreset({
+    mode
+  });
+  const labelColor = status ? STATUS_COLOR[status] : COLORS.NEUTRAL_7;
+  const labelText = status ? t(STATUS_LABELS[status], {
+    answer: correctAnswer
+  }) : t('student.fluency.typeYourAnswer');
+  const answerAreaColor = status === AttemptStatus.INCORRECT ? COLORS.PRIMARY_RED : modePreset.colors.accent;
+  const inputRef = useRef(null);
+  usePreventWebKeys({
+    ref: inputRef,
+    keys: CURSOR_MOVE_KEYS,
+    enabled: !readOnly
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: HeadingVariants.H9,
+      style: [styles.cardLabel, {
+        color: labelColor
+      }],
+      children: labelText
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.equationRow,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        style: styles.number,
+        children: leftOperand
+      }), /*#__PURE__*/_jsx(Typography, {
+        style: [styles.number, {
+          color: modePreset.colors.accent
+        }],
+        children: modePreset.symbol
+      }), /*#__PURE__*/_jsx(Typography, {
+        style: styles.number,
+        children: rightOperand
+      }), /*#__PURE__*/_jsx(Typography, {
+        style: styles.equals,
+        children: "="
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.answerBox, value.length > 0 && {
+          borderBottomColor: answerAreaColor
+        }],
+        children: /*#__PURE__*/_jsx(TextInput, {
+          ref: readOnly ? undefined : inputRef,
+          value: value,
+          onChangeText: readOnly ? undefined : onChange,
+          editable: !readOnly,
+          keyboardType: "number-pad",
+          maxLength: MAX_INPUT_LENGTH,
+          selection: readOnly ? undefined : {
+            start: value.length,
+            end: value.length
+          },
+          style: [styles.number, styles.answerInput, {
+            color: answerAreaColor
+          }],
+          autoFocus: false
+        })
+      })]
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  cardLabel: {
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 1.3,
+    marginBottom: SPACING[500],
+    color: COLORS.NEUTRAL_7
+  },
+  equationRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[300],
+    marginTop: SPACING[600]
+  },
+  number: {
+    fontSize: 75,
+    color: COLORS.NEUTRAL_10,
+    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires
+  },
+  equals: {
+    fontSize: 75,
+    color: COLORS.NEUTRAL_7,
+    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires
+  },
+  answerBox: {
+    width: 135,
+    height: 44,
+    marginBottom: -SPACING[800],
+    alignItems: 'center',
+    borderBottomWidth: 8,
+    borderBottomColor: COLORS.NEUTRAL_10
+  },
+  answerInput: {
+    position: 'absolute',
+    bottom: -SPACING[400],
+    textAlign: 'center',
+    width: '100%',
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    ...(Platform.OS === 'web' && {
+      outlineStyle: 'none',
+      caretColor: 'transparent'
+    })
+  }
+});
+//# sourceMappingURL=EquationContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","View","StyleSheet","TextInput","Platform","COLORS","FONT_FAMILY","HeadingVariants","SPACING","Typography","useText","useFluencySolvingPreset","usePreventWebKeys","AttemptStatus","MAX_INPUT_LENGTH","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CURSOR_MOVE_KEYS","STATUS_LABELS","CORRECT","INCORRECT","SKIPPED","STATUS_COLOR","PRIMARY_GREEN","PRIMARY_RED","NEUTRAL_7","EquationContent","leftOperand","rightOperand","mode","value","readOnly","status","correctAnswer","onChange","t","modePreset","labelColor","labelText","answer","answerAreaColor","colors","accent","inputRef","ref","keys","enabled","children","variant","H9","style","styles","cardLabel","color","equationRow","number","symbol","equals","answerBox","length","borderBottomColor","undefined","onChangeText","editable","keyboardType","maxLength","selection","start","end","answerInput","autoFocus","create","fontSize","fontWeight","letterSpacing","marginBottom","flexDirection","alignItems","gap","marginTop","NEUTRAL_10","fontFamily","buenosAires","width","height","borderBottomWidth","position","bottom","textAlign","borderWidth","backgroundColor","OS","outlineStyle","caretColor"],"sourceRoot":"../../../../../../../src","sources":["features/fluency/components/fluency-solving/components/EquationContent.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,107 @@
+"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 { GradientView } from "../../../../../lib/components/GradientView.js";
+import { FluencyEquationCard } from "./FluencyEquationCard.js";
+import { AttemptStatus } from "../../../shared/fluency.constants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CARD_GRADIENT_COLORS = {
+  [AttemptStatus.CORRECT]: ['#ecfbf3', '#ffffff'],
+  [AttemptStatus.INCORRECT]: ['#fff0f1', '#ffffff']
+};
+const hideAnswer = cardContent => ({
+  ...cardContent,
+  answer: ''
+});
+export const FluencyCardDeck = ({
+  currentCardContent,
+  exitingCardContent,
+  exitingCardStatus,
+  snapStyles,
+  onAnswerChange
+}) => {
+  const backingCardContent = hideAnswer(currentCardContent);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.stack,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.card, styles.cardFar, snapStyles.far]
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.card, styles.cardMid, snapStyles.mid]
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.card, styles.cardNear, snapStyles.near],
+      children: /*#__PURE__*/_jsx(FluencyEquationCard, {
+        cardContent: backingCardContent,
+        readOnly: true
+      })
+    }), !exitingCardContent && /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.card, styles.cardFront],
+      children: /*#__PURE__*/_jsx(FluencyEquationCard, {
+        cardContent: currentCardContent,
+        onAnswerChange: onAnswerChange
+      })
+    }), exitingCardContent && /*#__PURE__*/_jsxs(Animated.View, {
+      style: [styles.card, styles.cardFront, snapStyles.front, exitingCardStatus === AttemptStatus.INCORRECT && styles.cardIncorrect, exitingCardStatus === AttemptStatus.CORRECT && styles.cardCorrect],
+      children: [(exitingCardStatus === AttemptStatus.CORRECT || exitingCardStatus === AttemptStatus.INCORRECT) && /*#__PURE__*/_jsx(GradientView, {
+        colors: CARD_GRADIENT_COLORS[exitingCardStatus],
+        style: [StyleSheet.absoluteFill, {
+          borderRadius: BORDER_RADIUS[400]
+        }],
+        pointerEvents: "none"
+      }), /*#__PURE__*/_jsx(FluencyEquationCard, {
+        cardContent: exitingCardContent,
+        status: exitingCardStatus ?? undefined,
+        readOnly: true
+      })]
+    })]
+  });
+};
+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'
+  },
+  cardCorrect: {
+    borderWidth: 1.5,
+    borderColor: COLORS.PRIMARY_GREEN
+  },
+  cardIncorrect: {
+    borderWidth: 1.5,
+    borderColor: COLORS.PRIMARY_RED
+  }
+});
+//# sourceMappingURL=FluencyCardDeck.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","Animated","BORDER_RADIUS","COLORS","SHADOWS","GradientView","FluencyEquationCard","AttemptStatus","jsx","_jsx","jsxs","_jsxs","CARD_GRADIENT_COLORS","CORRECT","INCORRECT","hideAnswer","cardContent","answer","FluencyCardDeck","currentCardContent","exitingCardContent","exitingCardStatus","snapStyles","onAnswerChange","backingCardContent","style","styles","stack","children","card","cardFar","far","cardMid","mid","cardNear","near","readOnly","cardFront","front","cardIncorrect","cardCorrect","colors","absoluteFill","borderRadius","pointerEvents","status","undefined","create","width","maxWidth","height","backgroundColor","NEUTRAL_1","position","top","left","right","opacity","alignItems","justifyContent","borderWidth","borderColor","PRIMARY_GREEN","PRIMARY_RED"],"sourceRoot":"../../../../../../../src","sources":["features/fluency/components/fluency-solving/components/FluencyCardDeck.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,33 @@
+"use strict";
+
+import React from 'react';
+import { EquationContent } from "./EquationContent.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getDisplayedEquation = fact => {
+  const left = fact?.numbers[0] ?? 0;
+  const right = fact?.numbers[1] ?? 0;
+  return {
+    leftOperand: left,
+    rightOperand: right,
+    mode: fact?.mode
+  };
+};
+export const FluencyEquationCard = ({
+  cardContent,
+  readOnly = false,
+  status,
+  onAnswerChange
+}) => {
+  const equation = getDisplayedEquation(cardContent.fact);
+  return /*#__PURE__*/_jsx(EquationContent, {
+    leftOperand: equation.leftOperand,
+    rightOperand: equation.rightOperand,
+    mode: equation.mode,
+    value: cardContent.answer,
+    readOnly: readOnly,
+    status: status,
+    correctAnswer: cardContent.fact?.answer,
+    onChange: onAnswerChange
+  });
+};
+//# sourceMappingURL=FluencyEquationCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","EquationContent","jsx","_jsx","getDisplayedEquation","fact","left","numbers","right","leftOperand","rightOperand","mode","FluencyEquationCard","cardContent","readOnly","status","onAnswerChange","equation","value","answer","correctAnswer","onChange"],"sourceRoot":"../../../../../../../src","sources":["features/fluency/components/fluency-solving/components/FluencyEquationCard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,sBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiBnD,MAAMC,oBAAoB,GAAIC,IAAwB,IAAwB;EAC5E,MAAMC,IAAI,GAAGD,IAAI,EAAEE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;EAClC,MAAMC,KAAK,GAAGH,IAAI,EAAEE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;EAEnC,OAAO;IACLE,WAAW,EAAEH,IAAI;IACjBI,YAAY,EAAEF,KAAK;IACnBG,IAAI,EAAEN,IAAI,EAAEM;EACd,CAAC;AACH,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC,WAAW;EACXC,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC;AACwB,CAAC,KAAK;EAC9B,MAAMC,QAAQ,GAAGb,oBAAoB,CAACS,WAAW,CAACR,IAAI,CAAC;EAEvD,oBACEF,IAAA,CAACF,eAAe;IACdQ,WAAW,EAAEQ,QAAQ,CAACR,WAAY;IAClCC,YAAY,EAAEO,QAAQ,CAACP,YAAa;IACpCC,IAAI,EAAEM,QAAQ,CAACN,IAAK;IACpBO,KAAK,EAAEL,WAAW,CAACM,MAAO;IAC1BL,QAAQ,EAAEA,QAAS;IACnBC,MAAM,EAAEA,MAAO;IACfK,aAAa,EAAEP,WAAW,CAACR,IAAI,EAAEc,MAAO;IACxCE,QAAQ,EAAEL;EAAe,CAC1B,CAAC;AAEN,CAAC","ignoreList":[]}

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

@@ -0,0 +1,56 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { FONT_FAMILY, SelectGroup, SelectOptionColor, SelectOptionSize, SPACING } from '@magmamath/react-native-ui';
+import { useFluencyNumpad } from "../../../hooks/useFluencyNumpad.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FluencyNumpad = ({
+  onSubmit
+}) => {
+  const {
+    options
+  } = useFluencyNumpad({
+    onSubmit
+  });
+  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/components/FluencyNumpad.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","FONT_FAMILY","SelectGroup","SelectOptionColor","SelectOptionSize","SPACING","useFluencyNumpad","jsx","_jsx","FluencyNumpad","onSubmit","options","style","styles","container","children","numOfRows","color","GREY","size","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/components/FluencyNumpad.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,WAAW,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAEC,OAAO,QAAQ,4BAA4B;AACnH,SAASC,gBAAgB,QAAQ,oCAAiC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMlE,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAA6B,CAAC,KAAK;EACjE,MAAM;IAAEC;EAAQ,CAAC,GAAGL,gBAAgB,CAAC;IAAEI;EAAS,CAAC,CAAC;EAElD,oBACEF,IAAA,CAACR,IAAI;IAACY,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,eAC5BP,IAAA,CAACN,WAAW;MACVc,SAAS,EAAE,CAAE;MACbC,KAAK,EAAEd,iBAAiB,CAACe,IAAK;MAC9BC,IAAI,EAAEf,gBAAgB,CAACgB,KAAM;MAC7BT,OAAO,EAAEA,OAAQ;MACjBC,KAAK,EAAE;QACLE,SAAS,EAAED,MAAM,CAACQ,IAAI;QACtBC,GAAG,EAAET,MAAM,CAACS,GAAG;QACfC,MAAM,EAAE;UACNC,MAAM,EAAEX,MAAM,CAACY,YAAY;UAC3BC,IAAI,EAAEb,MAAM,CAACc;QACf;MACF;IAAE,CACH;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMd,MAAM,GAAGd,UAAU,CAAC6B,MAAM,CAAC;EAC/Bd,SAAS,EAAE;IACTe,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAEzB,OAAO,CAAC,GAAG,CAAC;IAC7B0B,SAAS,EAAE1B,OAAO,CAAC,GAAG;EACxB,CAAC;EACDgB,IAAI,EAAE;IACJW,KAAK,EAAE,GAAG;IACVC,GAAG,EAAE5B,OAAO,CAAC,GAAG;EAClB,CAAC;EACDiB,GAAG,EAAE;IACHW,GAAG,EAAE5B,OAAO,CAAC,GAAG;EAClB,CAAC;EACDoB,YAAY,EAAE;IACZS,MAAM,EAAE;EACV,CAAC;EACDP,UAAU,EAAE;IACVQ,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAEpC,WAAW,CAACqC;EAC1B;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,74 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useUnit } from 'effector-react/effector-react.mjs';
+import { SPACING } from '@magmamath/react-native-ui';
+import { FluencyNumpad } from "./FluencyNumpad.js";
+import { FluencyCardDeck } from "./FluencyCardDeck.js";
+import { useFluency } from "../../../context/FluencyContext.js";
+import { useFluencyCardDeckAnimation } from "../../../hooks/useFluencyCardDeckAnimation.js";
+import { useSuccessSound } from "../../../hooks/useSuccessSound.js";
+import { AttemptStatus } from "../../../shared/fluency.constants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FluencySolvingCard = () => {
+  const {
+    model
+  } = useFluency();
+  const {
+    currentAnswer,
+    currentFact
+  } = useUnit({
+    currentAnswer: model.solving.$answer,
+    currentFact: model.solving.$current
+  });
+  const cardDeckAnimation = useFluencyCardDeckAnimation();
+  const successSound = useSuccessSound();
+  const currentCardContent = {
+    fact: currentFact,
+    answer: currentAnswer ?? ''
+  };
+  const updateAnswer = text => {
+    const digits = text.replace(/\D/g, '');
+    model.solving.setAnswer(digits || null);
+  };
+  const submit = () => {
+    if (!currentFact) return;
+    if (currentAnswer === null) return;
+    const isCorrect = Number(currentAnswer) === currentFact.answer;
+    const direction = isCorrect ? 'right' : 'left';
+    const status = isCorrect ? AttemptStatus.CORRECT : AttemptStatus.INCORRECT;
+    if (!cardDeckAnimation.startCardExit({
+      cardContent: currentCardContent,
+      direction,
+      status
+    })) return;
+    if (isCorrect) {
+      successSound.play();
+    }
+    model.solving.submit();
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.wrapper,
+      children: /*#__PURE__*/_jsx(FluencyCardDeck, {
+        currentCardContent: currentCardContent,
+        exitingCardContent: cardDeckAnimation.exitingCardContent,
+        exitingCardStatus: cardDeckAnimation.exitingCardStatus,
+        snapStyles: cardDeckAnimation.snapStyles,
+        onAnswerChange: updateAnswer
+      })
+    }), /*#__PURE__*/_jsx(FluencyNumpad, {
+      onSubmit: 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/components/FluencySolvingCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","useUnit","SPACING","FluencyNumpad","FluencyCardDeck","useFluency","useFluencyCardDeckAnimation","useSuccessSound","AttemptStatus","jsx","_jsx","jsxs","_jsxs","FluencySolvingCard","model","currentAnswer","currentFact","solving","$answer","$current","cardDeckAnimation","successSound","currentCardContent","fact","answer","updateAnswer","text","digits","replace","setAnswer","submit","isCorrect","Number","direction","status","CORRECT","INCORRECT","startCardExit","cardContent","play","children","style","styles","wrapper","exitingCardContent","exitingCardStatus","snapStyles","onAnswerChange","onSubmit","create","alignItems","paddingVertical","paddingHorizontal","marginTop"],"sourceRoot":"../../../../../../../src","sources":["features/fluency/components/fluency-solving/components/FluencySolvingCard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,OAAO,QAAQ,mCAAmC;AAC3D,SAASC,OAAO,QAAQ,4BAA4B;AAEpD,SAASC,aAAa,QAAQ,oBAAiB;AAC/C,SAASC,eAAe,QAAQ,sBAAmB;AACnD,SAASC,UAAU,QAAQ,oCAAiC;AAC5D,SAASC,2BAA2B,QAAQ,+CAA4C;AACxF,SAASC,eAAe,QAAQ,mCAAgC;AAChE,SAASC,aAAa,QAAQ,sCAAmC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGjE,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACtC,MAAM;IAAEC;EAAM,CAAC,GAAGT,UAAU,CAAC,CAAC;EAC9B,MAAM;IAAEU,aAAa;IAAEC;EAAY,CAAC,GAAGf,OAAO,CAAC;IAC7Cc,aAAa,EAAED,KAAK,CAACG,OAAO,CAACC,OAAO;IACpCF,WAAW,EAAEF,KAAK,CAACG,OAAO,CAACE;EAC7B,CAAC,CAAC;EACF,MAAMC,iBAAiB,GAAGd,2BAA2B,CAAC,CAAC;EACvD,MAAMe,YAAY,GAAGd,eAAe,CAAC,CAAC;EAEtC,MAAMe,kBAAkB,GAAG;IAAEC,IAAI,EAAEP,WAAW;IAAEQ,MAAM,EAAET,aAAa,IAAI;EAAG,CAAC;EAE7E,MAAMU,YAAY,GAAIC,IAAY,IAAK;IACrC,MAAMC,MAAM,GAAGD,IAAI,CAACE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IACtCd,KAAK,CAACG,OAAO,CAACY,SAAS,CAACF,MAAM,IAAI,IAAI,CAAC;EACzC,CAAC;EAED,MAAMG,MAAM,GAAGA,CAAA,KAAM;IACnB,IAAI,CAACd,WAAW,EAAE;IAClB,IAAID,aAAa,KAAK,IAAI,EAAE;IAE5B,MAAMgB,SAAS,GAAGC,MAAM,CAACjB,aAAa,CAAC,KAAKC,WAAW,CAACQ,MAAM;IAC9D,MAAMS,SAAwB,GAAGF,SAAS,GAAG,OAAO,GAAG,MAAM;IAC7D,MAAMG,MAAM,GAAGH,SAAS,GAAGvB,aAAa,CAAC2B,OAAO,GAAG3B,aAAa,CAAC4B,SAAS;IAE1E,IAAI,CAAChB,iBAAiB,CAACiB,aAAa,CAAC;MAAEC,WAAW,EAAEhB,kBAAkB;MAAEW,SAAS;MAAEC;IAAO,CAAC,CAAC,EAC1F;IAEF,IAAIH,SAAS,EAAE;MACbV,YAAY,CAACkB,IAAI,CAAC,CAAC;IACrB;IAEAzB,KAAK,CAACG,OAAO,CAACa,MAAM,CAAC,CAAC;EACxB,CAAC;EAED,oBACElB,KAAA,CAACb,IAAI;IAAAyC,QAAA,gBACH9B,IAAA,CAACX,IAAI;MAAC0C,KAAK,EAAEC,MAAM,CAACC,OAAQ;MAAAH,QAAA,eAC1B9B,IAAA,CAACN,eAAe;QACdkB,kBAAkB,EAAEA,kBAAmB;QACvCsB,kBAAkB,EAAExB,iBAAiB,CAACwB,kBAAmB;QACzDC,iBAAiB,EAAEzB,iBAAiB,CAACyB,iBAAkB;QACvDC,UAAU,EAAE1B,iBAAiB,CAAC0B,UAAW;QACzCC,cAAc,EAAEtB;MAAa,CAC9B;IAAC,CACE,CAAC,eACPf,IAAA,CAACP,aAAa;MAAC6C,QAAQ,EAAElB;IAAO,CAAE,CAAC;EAAA,CAC/B,CAAC;AAEX,CAAC;AAED,MAAMY,MAAM,GAAG1C,UAAU,CAACiD,MAAM,CAAC;EAC/BN,OAAO,EAAE;IACPO,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAEjD,OAAO,CAAC,GAAG,CAAC;IAC7BkD,iBAAiB,EAAElD,OAAO,CAAC,GAAG,CAAC;IAC/BmD,SAAS,EAAEnD,OAAO,CAAC,GAAG;EACxB;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,67 @@
+"use strict";
+
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FluencySolvingHeader = ({
+  onClosePress
+}) => {
+  const modePreset = useFluencySolvingPreset();
+  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
+      }],
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: HeadingVariants.H7,
+        style: styles.symbol,
+        children: modePreset.symbol
+      })
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: HeadingVariants.H4,
+      style: styles.title,
+      children: modePreset.label
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    height: 76,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14,
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[600],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[1]
+  },
+  operatorBadge: {
+    width: 32,
+    height: 32,
+    borderRadius: BORDER_RADIUS[200],
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1]
+  },
+  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/components/FluencySolvingHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","BORDER_RADIUS","Button","ButtonColor","ButtonSize","ButtonVariant","COLORS","HeadingVariants","SHADOWS","SPACING","Typography","useFluencySolvingPreset","XCloseIcon","jsx","_jsx","jsxs","_jsxs","FluencySolvingHeader","onClosePress","modePreset","style","styles","container","children","variant","SECONDARY","size","LARGE","colorScheme","WHITE","icon","onPress","operatorBadge","backgroundColor","colors","accent","H7","symbol","H4","title","label","create","height","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","NEUTRAL_1","width","borderRadius","justifyContent","color","NEUTRAL_10","fontWeight","fontSize","marginBottom"],"sourceRoot":"../../../../../../../src","sources":["features/fluency/components/fluency-solving/components/FluencySolvingHeader.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SACEC,aAAa,EACbC,MAAM,EACNC,WAAW,EACXC,UAAU,EACVC,aAAa,EACbC,MAAM,EACNC,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,UAAU,QACL,4BAA4B;AACnC,SAASC,uBAAuB,QAAQ,2CAAwC;AAChF,SAASC,UAAU,QAAQ,2CAAwC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAMnE,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC;AAAwC,CAAC,KAAK;EACnF,MAAMC,UAAU,GAAGR,uBAAuB,CAAC,CAAC;EAE5C,oBACEK,KAAA,CAACjB,IAAI;IAACqB,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5BT,IAAA,CAACZ,MAAM;MACLsB,OAAO,EAAEnB,aAAa,CAACoB,SAAU;MACjCC,IAAI,EAAEtB,UAAU,CAACuB,KAAM;MACvBC,WAAW,EAAEzB,WAAW,CAAC0B,KAAM;MAC/BC,IAAI,eAAEhB,IAAA,CAACF,UAAU,IAAE,CAAE;MACrBmB,OAAO,EAAEb;IAAa,CACvB,CAAC,eACFJ,IAAA,CAACf,IAAI;MAACqB,KAAK,EAAE,CAACC,MAAM,CAACW,aAAa,EAAE;QAAEC,eAAe,EAAEd,UAAU,CAACe,MAAM,CAACC;MAAO,CAAC,CAAE;MAAAZ,QAAA,eACjFT,IAAA,CAACJ,UAAU;QAACc,OAAO,EAAEjB,eAAe,CAAC6B,EAAG;QAAChB,KAAK,EAAEC,MAAM,CAACgB,MAAO;QAAAd,QAAA,EAC3DJ,UAAU,CAACkB;MAAM,CACR;IAAC,CACT,CAAC,eACPvB,IAAA,CAACJ,UAAU;MAACc,OAAO,EAAEjB,eAAe,CAAC+B,EAAG;MAAClB,KAAK,EAAEC,MAAM,CAACkB,KAAM;MAAAhB,QAAA,EAC1DJ,UAAU,CAACqB;IAAK,CACP,CAAC;EAAA,CACT,CAAC;AAEX,CAAC;AAED,MAAMnB,MAAM,GAAGrB,UAAU,CAACyC,MAAM,CAAC;EAC/BnB,SAAS,EAAE;IACToB,MAAM,EAAE,EAAE;IACVC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAE,EAAE;IACPC,eAAe,EAAErC,OAAO,CAAC,GAAG,CAAC;IAC7BsC,iBAAiB,EAAEtC,OAAO,CAAC,GAAG,CAAC;IAC/BwB,eAAe,EAAE3B,MAAM,CAAC0C,SAAS;IACjC,GAAGxC,OAAO,CAAC,CAAC;EACd,CAAC;EACDwB,aAAa,EAAE;IACbiB,KAAK,EAAE,EAAE;IACTP,MAAM,EAAE,EAAE;IACVQ,YAAY,EAAEjD,aAAa,CAAC,GAAG,CAAC;IAChC2C,UAAU,EAAE,QAAQ;IACpBO,cAAc,EAAE,QAAQ;IACxB,GAAG3C,OAAO,CAAC,CAAC;EACd,CAAC;EACD+B,KAAK,EAAE;IACLa,KAAK,EAAE9C,MAAM,CAAC+C,UAAU;IACxBC,UAAU,EAAE;EACd,CAAC;EACDjB,MAAM,EAAE;IACNkB,QAAQ,EAAE,EAAE;IACZD,UAAU,EAAE,KAAK;IACjBE,YAAY,EAAE,CAAC;IACfJ,KAAK,EAAE9C,MAAM,CAAC0C;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,87 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { COLORS, SPACING } from '@magmamath/react-native-ui';
+import { AttemptStatus, SESSION_LENGTH } from "../../../shared/fluency.constants.js";
+import { FluencySolvingProgressDot } from "./FluencySolvingProgressDot.js";
+import { useFluency } from "../../../context/FluencyContext.js";
+import { useUnit } from 'effector-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GROUP_SIZE = 5;
+const ProgressDot = ({
+  index,
+  activeIndex,
+  outcome
+}) => {
+  if (index === activeIndex) return /*#__PURE__*/_jsx(FluencySolvingProgressDot, {});
+  if (index < activeIndex && outcome) return /*#__PURE__*/_jsx(View, {
+    style: DOT_STYLE_BY_OUTCOME[outcome.status]
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.dot
+  });
+};
+export const FluencySolvingProgress = () => {
+  const {
+    model
+  } = useFluency();
+  const outcomes = useUnit(model.solving.$outcomes);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: Array.from({
+      length: SESSION_LENGTH / GROUP_SIZE
+    }, (_, groupIndex) => /*#__PURE__*/_jsx(View, {
+      style: styles.group,
+      children: Array.from({
+        length: GROUP_SIZE
+      }, (_, dotIndex) => {
+        const index = groupIndex * GROUP_SIZE + dotIndex;
+        return /*#__PURE__*/_jsx(ProgressDot, {
+          index: index,
+          activeIndex: outcomes.length,
+          outcome: outcomes[index]
+        }, index);
+      })
+    }, groupIndex))
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: SPACING[500],
+    paddingHorizontal: SPACING[600],
+    paddingVertical: 14,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  group: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center'
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: COLORS.NEUTRAL_4
+  },
+  dotCorrect: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: COLORS.PRIMARY_GREEN
+  },
+  dotWrong: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: COLORS.PRIMARY_RED
+  }
+});
+const DOT_STYLE_BY_OUTCOME = {
+  [AttemptStatus.CORRECT]: styles.dotCorrect,
+  [AttemptStatus.INCORRECT]: styles.dotWrong,
+  [AttemptStatus.SKIPPED]: styles.dot
+};
+//# sourceMappingURL=FluencySolvingProgress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","COLORS","SPACING","AttemptStatus","SESSION_LENGTH","FluencySolvingProgressDot","useFluency","useUnit","jsx","_jsx","GROUP_SIZE","ProgressDot","index","activeIndex","outcome","style","DOT_STYLE_BY_OUTCOME","status","styles","dot","FluencySolvingProgress","model","outcomes","solving","$outcomes","container","children","Array","from","length","_","groupIndex","group","dotIndex","create","flexDirection","gap","paddingHorizontal","paddingVertical","justifyContent","alignItems","width","height","borderRadius","backgroundColor","NEUTRAL_4","dotCorrect","PRIMARY_GREEN","dotWrong","PRIMARY_RED","CORRECT","INCORRECT","SKIPPED"],"sourceRoot":"../../../../../../../src","sources":["features/fluency/components/fluency-solving/components/FluencySolvingProgress.tsx"],"mappings":"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","ignoreList":[]}