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

package/src/features/fluency/components/fluency-solving/components/EquationContent.tsx

@@ -0,0 +1,141 @@
+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, type TranslationKey } from '../../../../../i18n/i18n'
+import { useFluencySolvingPreset } from '../../../hooks/useFluencySolvingPreset'
+import { usePreventWebKeys } from '../../../hooks/usePreventWebKeys'
+import {
+  AttemptStatus,
+  MAX_INPUT_LENGTH,
+  type FluencyMode,
+} from '../../../shared/fluency.constants'
+
+const CURSOR_MOVE_KEYS = ['ArrowLeft', 'ArrowRight', 'Home', 'End']
+
+const STATUS_LABELS: Record<AttemptStatus, TranslationKey> = {
+  [AttemptStatus.CORRECT]: 'student.fluency.correct',
+  [AttemptStatus.INCORRECT]: 'student.fluency.incorrect',
+  [AttemptStatus.SKIPPED]: 'student.fluency.skipped',
+}
+
+const STATUS_COLOR: Record<AttemptStatus, string> = {
+  [AttemptStatus.CORRECT]: COLORS.PRIMARY_GREEN,
+  [AttemptStatus.INCORRECT]: COLORS.PRIMARY_RED,
+  [AttemptStatus.SKIPPED]: COLORS.NEUTRAL_7,
+}
+
+type EquationContentProps = {
+  leftOperand: number
+  rightOperand: number
+  mode?: FluencyMode
+  value?: string
+  readOnly?: boolean
+  status?: AttemptStatus
+  correctAnswer?: number
+  onChange?: (text: string) => void
+}
+
+export const EquationContent = ({
+  leftOperand,
+  rightOperand,
+  mode,
+  value = '',
+  readOnly = false,
+  status,
+  correctAnswer,
+  onChange,
+}: EquationContentProps) => {
+  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<TextInput>(null)
+  usePreventWebKeys({ ref: inputRef, keys: CURSOR_MOVE_KEYS, enabled: !readOnly })
+
+  return (
+    <>
+      <Typography variant={HeadingVariants.H9} style={[styles.cardLabel, { color: labelColor }]}>
+        {labelText}
+      </Typography>
+      <View style={styles.equationRow}>
+        <Typography style={styles.number}>{leftOperand}</Typography>
+        <Typography style={[styles.number, { color: modePreset.colors.accent }]}>
+          {modePreset.symbol}
+        </Typography>
+        <Typography style={styles.number}>{rightOperand}</Typography>
+        <Typography style={styles.equals}>=</Typography>
+        <View
+          style={[styles.answerBox, value.length > 0 && { borderBottomColor: answerAreaColor }]}
+        >
+          <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}
+          />
+        </View>
+      </View>
+    </>
+  )
+}
+
+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' }),
+  },
+})

package/src/features/fluency/components/fluency-solving/components/FluencyCardDeck.tsx

@@ -0,0 +1,131 @@
+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'
+import { FluencyEquationCard } from './FluencyEquationCard'
+import type { SnapStyles } from '../../../hooks/useCardSnapAnimation'
+import { AttemptStatus } from '../../../shared/fluency.constants'
+import type { FluencyCardDisplayContent } from '../../../shared/fluencySolving.types'
+
+const CARD_GRADIENT_COLORS: Record<
+  AttemptStatus.CORRECT | AttemptStatus.INCORRECT,
+  [string, string]
+> = {
+  [AttemptStatus.CORRECT]: ['#ecfbf3', '#ffffff'],
+  [AttemptStatus.INCORRECT]: ['#fff0f1', '#ffffff'],
+}
+
+type FluencyCardDeckProps = {
+  currentCardContent: FluencyCardDisplayContent
+  exitingCardContent: FluencyCardDisplayContent | null
+  exitingCardStatus: AttemptStatus | null
+  snapStyles: SnapStyles
+  onAnswerChange: (text: string) => void
+}
+
+const hideAnswer = (cardContent: FluencyCardDisplayContent): FluencyCardDisplayContent => ({
+  ...cardContent,
+  answer: '',
+})
+
+export const FluencyCardDeck = ({
+  currentCardContent,
+  exitingCardContent,
+  exitingCardStatus,
+  snapStyles,
+  onAnswerChange,
+}: FluencyCardDeckProps) => {
+  const backingCardContent = hideAnswer(currentCardContent)
+
+  return (
+    <View style={styles.stack}>
+      <Animated.View style={[styles.card, styles.cardFar, snapStyles.far]} />
+      <Animated.View style={[styles.card, styles.cardMid, snapStyles.mid]} />
+
+      <Animated.View style={[styles.card, styles.cardNear, snapStyles.near]}>
+        <FluencyEquationCard cardContent={backingCardContent} readOnly />
+      </Animated.View>
+
+      {!exitingCardContent && (
+        <Animated.View style={[styles.card, styles.cardFront]}>
+          <FluencyEquationCard cardContent={currentCardContent} onAnswerChange={onAnswerChange} />
+        </Animated.View>
+      )}
+
+      {exitingCardContent && (
+        <Animated.View
+          style={[
+            styles.card,
+            styles.cardFront,
+            snapStyles.front,
+            exitingCardStatus === AttemptStatus.INCORRECT && styles.cardIncorrect,
+            exitingCardStatus === AttemptStatus.CORRECT && styles.cardCorrect,
+          ]}
+        >
+          {(exitingCardStatus === AttemptStatus.CORRECT ||
+            exitingCardStatus === AttemptStatus.INCORRECT) && (
+            <GradientView
+              colors={CARD_GRADIENT_COLORS[exitingCardStatus]}
+              style={[StyleSheet.absoluteFill, { borderRadius: BORDER_RADIUS[400] }]}
+              pointerEvents="none"
+            />
+          )}
+          <FluencyEquationCard
+            cardContent={exitingCardContent}
+            status={exitingCardStatus ?? undefined}
+            readOnly
+          />
+        </Animated.View>
+      )}
+    </View>
+  )
+}
+
+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,
+  },
+})

package/src/features/fluency/components/fluency-solving/components/FluencyEquationCard.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import { EquationContent } from './EquationContent'
+import type { FluencyCardDisplayContent, SolvingFact } from '../../../shared/fluencySolving.types'
+import type { AttemptStatus, FluencyMode } from '../../../shared/fluency.constants'
+
+type DisplayedEquation = {
+  leftOperand: number
+  rightOperand: number
+  mode?: FluencyMode
+}
+
+type FluencyEquationCardProps = {
+  cardContent: FluencyCardDisplayContent
+  readOnly?: boolean
+  status?: AttemptStatus
+  onAnswerChange?: (text: string) => void
+}
+
+const getDisplayedEquation = (fact: SolvingFact | null): DisplayedEquation => {
+  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,
+}: FluencyEquationCardProps) => {
+  const equation = getDisplayedEquation(cardContent.fact)
+
+  return (
+    <EquationContent
+      leftOperand={equation.leftOperand}
+      rightOperand={equation.rightOperand}
+      mode={equation.mode}
+      value={cardContent.answer}
+      readOnly={readOnly}
+      status={status}
+      correctAnswer={cardContent.fact?.answer}
+      onChange={onAnswerChange}
+    />
+  )
+}

package/src/features/fluency/components/fluency-solving/components/FluencyNumpad.tsx

@@ -0,0 +1,54 @@
+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'
+
+type FluencyNumpadProps = {
+  onSubmit: () => void
+}
+
+export const FluencyNumpad = ({ onSubmit }: FluencyNumpadProps) => {
+  const { options } = useFluencyNumpad({ onSubmit })
+
+  return (
+    <View style={styles.container}>
+      <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,
+          },
+        }}
+      />
+    </View>
+  )
+}
+
+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,
+  },
+})

package/src/features/fluency/components/fluency-solving/components/FluencySolvingCard.tsx

@@ -0,0 +1,71 @@
+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'
+import { FluencyCardDeck } from './FluencyCardDeck'
+import { useFluency } from '../../../context/FluencyContext'
+import { useFluencyCardDeckAnimation } from '../../../hooks/useFluencyCardDeckAnimation'
+import { useSuccessSound } from '../../../hooks/useSuccessSound'
+import { AttemptStatus } from '../../../shared/fluency.constants'
+import type { SnapDirection } from '../../../hooks/useCardSnapAnimation'
+
+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: string) => {
+    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: SnapDirection = 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 (
+    <View>
+      <View style={styles.wrapper}>
+        <FluencyCardDeck
+          currentCardContent={currentCardContent}
+          exitingCardContent={cardDeckAnimation.exitingCardContent}
+          exitingCardStatus={cardDeckAnimation.exitingCardStatus}
+          snapStyles={cardDeckAnimation.snapStyles}
+          onAnswerChange={updateAnswer}
+        />
+      </View>
+      <FluencyNumpad onSubmit={submit} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[600],
+    marginTop: SPACING[300],
+  },
+})

package/src/features/fluency/components/fluency-solving/{FluencySolvingHeader.tsx → components/FluencySolvingHeader.tsx}

@@ -3,6 +3,7 @@ import { View, StyleSheet } from 'react-native'
 import {
   BORDER_RADIUS,
   Button,
+  ButtonColor,
   ButtonSize,
   ButtonVariant,
   COLORS,
@@ -11,32 +12,32 @@ import {
   SPACING,
   Typography,
 } from '@magmamath/react-native-ui'
-import { useText } from '../../../../i18n/i18n'
-import { useFluencyModePreset } from '../../hooks/useFluencyModePreset'
-import { XCloseIcon } from '../../../../shared/icons/XCloseIcon'
+import { useFluencySolvingPreset } from '../../../hooks/useFluencySolvingPreset'
+import { XCloseIcon } from '../../../../../shared/icons/XCloseIcon'
 
 type FluencySolvingHeaderProps = {
   onClosePress?: () => void
 }
 
 export const FluencySolvingHeader = ({ onClosePress }: FluencySolvingHeaderProps) => {
-  const t = useText()
-  const uiMode = useFluencyModePreset()
-  const OperatorIcon = uiMode.operatorIcon
+  const modePreset = useFluencySolvingPreset()
 
   return (
     <View style={styles.container}>
       <Button
         variant={ButtonVariant.SECONDARY}
         size={ButtonSize.LARGE}
+        colorScheme={ButtonColor.WHITE}
         icon={<XCloseIcon />}
         onPress={onClosePress}
       />
-      <View style={[styles.operatorBadge, { backgroundColor: uiMode.accentColor }]}>
-        <OperatorIcon color={COLORS.NEUTRAL_1} size={16} />
+      <View style={[styles.operatorBadge, { backgroundColor: modePreset.colors.accent }]}>
+        <Typography variant={HeadingVariants.H7} style={styles.symbol}>
+          {modePreset.symbol}
+        </Typography>
       </View>
       <Typography variant={HeadingVariants.H4} style={styles.title}>
-        {t(uiMode.matrix.operatorName)}
+        {modePreset.label}
       </Typography>
     </View>
   )
@@ -50,6 +51,7 @@ const styles = StyleSheet.create({
     gap: 14,
     paddingVertical: SPACING[400],
     paddingHorizontal: SPACING[600],
+    backgroundColor: COLORS.NEUTRAL_1,
     ...SHADOWS[1],
   },
   operatorBadge: {
@@ -64,4 +66,10 @@ const styles = StyleSheet.create({
     color: COLORS.NEUTRAL_10,
     fontWeight: '700',
   },
+  symbol: {
+    fontSize: 32,
+    fontWeight: '100',
+    marginBottom: 2,
+    color: COLORS.NEUTRAL_1,
+  },
 })

package/src/features/fluency/components/fluency-solving/components/FluencySolvingProgress.tsx

@@ -0,0 +1,87 @@
+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'
+import type { QuestionOutcome } from '../../../shared/fluencySolving.types'
+import { FluencySolvingProgressDot } from './FluencySolvingProgressDot'
+import { useFluency } from '../../../context/FluencyContext'
+import { useUnit } from 'effector-react'
+
+const GROUP_SIZE = 5
+
+type ProgressDotProps = {
+  index: number
+  activeIndex: number
+  outcome: QuestionOutcome | undefined
+}
+
+const ProgressDot = ({ index, activeIndex, outcome }: ProgressDotProps) => {
+  if (index === activeIndex) return <FluencySolvingProgressDot />
+  if (index < activeIndex && outcome) return <View style={DOT_STYLE_BY_OUTCOME[outcome.status]} />
+  return <View style={styles.dot} />
+}
+
+export const FluencySolvingProgress = () => {
+  const { model } = useFluency()
+  const outcomes = useUnit(model.solving.$outcomes)
+
+  return (
+    <View style={styles.container}>
+      {Array.from({ length: SESSION_LENGTH / GROUP_SIZE }, (_, groupIndex) => (
+        <View key={groupIndex} style={styles.group}>
+          {Array.from({ length: GROUP_SIZE }, (_, dotIndex) => {
+            const index = groupIndex * GROUP_SIZE + dotIndex
+            return (
+              <ProgressDot
+                key={index}
+                index={index}
+                activeIndex={outcomes.length}
+                outcome={outcomes[index]}
+              />
+            )
+          })}
+        </View>
+      ))}
+    </View>
+  )
+}
+
+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: Record<AttemptStatus, object> = {
+  [AttemptStatus.CORRECT]: styles.dotCorrect,
+  [AttemptStatus.INCORRECT]: styles.dotWrong,
+  [AttemptStatus.SKIPPED]: styles.dot,
+}

package/src/features/fluency/components/fluency-solving/components/FluencySolvingProgressDot.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react'
+import { View, StyleSheet } from 'react-native'
+import Animated, {
+  cancelAnimation,
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated'
+import { COLORS } from '@magmamath/react-native-ui'
+
+const DOT_SIZE = 16
+const RING_SPREAD_MIN = 4
+const RING_SPREAD_MAX = 8
+const RING_SIZE = DOT_SIZE + RING_SPREAD_MAX * 2
+const RING_SCALE_MIN = (DOT_SIZE + RING_SPREAD_MIN * 2) / RING_SIZE
+const RING_OPACITY_MIN = 0.06
+const RING_OPACITY_MAX = 0.12
+const PULSE_DURATION_MS = 800
+
+export const FluencySolvingProgressDot = () => {
+  const progress = useSharedValue(0)
+
+  useEffect(() => {
+    progress.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: PULSE_DURATION_MS, easing: Easing.inOut(Easing.ease) }),
+        withTiming(0, { duration: PULSE_DURATION_MS, easing: Easing.inOut(Easing.ease) })
+      ),
+      -1,
+      false
+    )
+    return () => cancelAnimation(progress)
+  }, [progress])
+
+  const ringStyle = useAnimatedStyle(() => {
+    const scale = interpolate(progress.value, [0, 1], [RING_SCALE_MIN, 1])
+    const opacity = interpolate(progress.value, [0, 1], [RING_OPACITY_MAX, RING_OPACITY_MIN])
+    return {
+      opacity,
+      transform: [{ scale }],
+    }
+  }, [progress])
+
+  return (
+    <View style={styles.dot}>
+      <Animated.View style={[styles.ring, ringStyle]} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  dot: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: DOT_SIZE / 2,
+    backgroundColor: COLORS.NEUTRAL_10,
+  },
+  ring: {
+    position: 'absolute',
+    top: -RING_SPREAD_MAX,
+    left: -RING_SPREAD_MAX,
+    width: RING_SIZE,
+    height: RING_SIZE,
+    borderRadius: RING_SIZE / 2,
+    backgroundColor: COLORS.NEUTRAL_10,
+  },
+})

package/src/features/fluency/components/matrix/FluencyMatrix.tsx

@@ -6,9 +6,10 @@ import { MatrixFill } from './components/MatrixFill'
 
 export const FluencyMatrix = () => (
   <View style={styles.container}>
-    <View style={styles.body}>
+    <View style={styles.matrixFillContainer}>
       <MatrixFill />
     </View>
+
     <MatrixLegend />
   </View>
 )
@@ -21,9 +22,8 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     ...SHADOWS[1],
   },
-  body: {
+  matrixFillContainer: {
     flex: 1,
     padding: SPACING[300],
-    minHeight: 354,
   },
 })