@magmamath/students-features 1.3.26-rc.7 → 1.3.26-rc.8

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

@@ -0,0 +1,128 @@
+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 '../../../fluency.constants'
+import type { FluencyCardDisplayContent } from '../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

@@ -1,86 +1,51 @@
 import React from 'react'
-import { useUnit } from 'effector-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'
-import { useFluency } from '../../../context/FluencyContext'
-import type { SnapStyles } from '../../../hooks/useCardSnapAnimation'
+import type { FluencyCardDisplayContent, SolvingFact } from '../fluencySolving.types'
+import type { AttemptStatus, FluencyMode } from '../../../fluency.constants'
 
-type FluencyEquationCardProps = {
-  animationStyles: SnapStyles
+type DisplayedEquation = {
+  leftOperand: number
+  rightOperand: number
+  mode?: FluencyMode
 }
 
-export const FluencyEquationCard = ({ animationStyles }: FluencyEquationCardProps) => {
-  const { model } = useFluency()
-  const { answer, fact } = useUnit({
-    answer: model.solving.$answer,
-    fact: model.solving.$current,
-  })
+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
 
-  const updateAnswer = (text: string) => {
-    const digits = text.replace(/\D/g, '')
-    model.solving.setAnswer(digits || null)
+  return {
+    leftOperand: left,
+    rightOperand: right,
+    mode: fact?.mode,
   }
+}
 
-  return (
-    <View style={styles.stack}>
-      <Animated.View style={[styles.card, styles.cardFar, animationStyles.far]} />
-      <Animated.View style={[styles.card, styles.cardMid, animationStyles.mid]} />
+export const FluencyEquationCard = ({
+  cardContent,
+  readOnly = false,
+  status,
+  onAnswerChange,
+}: FluencyEquationCardProps) => {
+  const equation = getDisplayedEquation(cardContent.fact)
 
-      <Animated.View style={[styles.card, styles.cardNear, animationStyles.near]}>
-        <EquationContent leftOperand={left} rightOperand={right} readOnly />
-      </Animated.View>
-      <Animated.View style={[styles.card, styles.cardFront, animationStyles.front]}>
-        <EquationContent
-          leftOperand={left}
-          rightOperand={right}
-          value={answer ?? ''}
-          onChange={updateAnswer}
-        />
-      </Animated.View>
-    </View>
+  return (
+    <EquationContent
+      leftOperand={equation.leftOperand}
+      rightOperand={equation.rightOperand}
+      mode={equation.mode}
+      value={cardContent.answer}
+      readOnly={readOnly}
+      status={status}
+      correctAnswer={cardContent.fact?.answer}
+      onChange={onAnswerChange}
+    />
   )
 }
-
-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',
-  },
-})

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

@@ -1,31 +1,44 @@
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { SPACING } from '@magmamath/react-native-ui'
 import { useUnit } from 'effector-react/effector-react.mjs'
+import { SPACING } from '@magmamath/react-native-ui'
+
 import { FluencyNumpad } from './FluencyNumpad'
-import { FluencyEquationCard } from './FluencyEquationCard'
+import { FluencyCardDeck } from './FluencyCardDeck'
 import { useFluency } from '../../../context/FluencyContext'
-import { useCardSnapAnimation } from '../../../hooks/useCardSnapAnimation'
+import { useFluencyCardDeckAnimation } from '../../../hooks/useFluencyCardDeckAnimation'
 import { useSuccessSound } from '../../../hooks/useSuccessSound'
+import { AttemptStatus } from '../../../fluency.constants'
+import type { SnapDirection } from '../../../hooks/useCardSnapAnimation'
 
 export const FluencySolvingCard = () => {
   const { model } = useFluency()
-  const { answer, fact } = useUnit({
-    answer: model.solving.$answer,
-    fact: model.solving.$current,
+  const { currentAnswer, currentFact } = useUnit({
+    currentAnswer: model.solving.$answer,
+    currentFact: model.solving.$current,
   })
-  const animation = useCardSnapAnimation()
+  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 (!fact) return
+    if (!currentFact) return
+
+    const isCorrect = currentAnswer !== null && 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
 
-    const isCorrect = answer !== null && Number(answer) === fact.answer
     if (isCorrect) {
       successSound.play()
-      animation.trigger('right')
-    } else {
-      animation.trigger('left')
     }
 
     model.solving.submit()
@@ -34,7 +47,13 @@ export const FluencySolvingCard = () => {
   return (
     <View>
       <View style={styles.wrapper}>
-        <FluencyEquationCard animationStyles={animation.snapStyles} />
+        <FluencyCardDeck
+          currentCardContent={currentCardContent}
+          exitingCardContent={cardDeckAnimation.exitingCardContent}
+          exitingCardStatus={cardDeckAnimation.exitingCardStatus}
+          snapStyles={cardDeckAnimation.snapStyles}
+          onAnswerChange={updateAnswer}
+        />
       </View>
       <FluencyNumpad onSubmit={submit} />
     </View>

package/src/features/fluency/components/fluency-solving/fluencySolving.types.ts

@@ -14,6 +14,11 @@ export type SolvingFact = {
   correctCount: number
 }
 
+export type FluencyCardDisplayContent = {
+  fact: SolvingFact | null
+  answer: string
+}
+
 export type QuestionOutcome = {
   factId: string
   status: AttemptStatus

package/src/features/fluency/components/start-banner/StartBanner.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, StyleSheet, Platform } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 import {
   Button,
   ButtonColor,
@@ -13,37 +13,12 @@ import {
   FONT_FAMILY,
   BORDER_RADIUS,
 } from '@magmamath/react-native-ui'
+import { GradientView } from '../../../../lib/components/GradientView'
 import { BannerFlashcards } from './BannerFlashcards'
 import { useFluency } from '../../context/FluencyContext'
 import { useText } from '../../../../i18n/i18n'
 import { FlashIcon } from '../../assets/FlashIcon'
 
-const GradientBackground = Platform.select({
-  web: () => (
-    <View
-      style={[
-        StyleSheet.absoluteFill,
-        {
-          backgroundImage: 'linear-gradient(90deg, #FFFFFF 23.1%, #FFF7E9 81.73%)',
-          pointerEvents: 'none',
-        } as any,
-      ]}
-    />
-  ),
-  default: () => {
-    const { LinearGradient } = require('expo-linear-gradient')
-    return (
-      <LinearGradient
-        colors={['#FFFFFF', '#FFF7E9']}
-        locations={[0.231, 0.8173]}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 0 }}
-        style={[StyleSheet.absoluteFill, { pointerEvents: 'none' }]}
-      />
-    )
-  },
-})!
-
 export const StartBanner = () => {
   const t = useText()
   const { model, onStartPress } = useFluency()
@@ -51,7 +26,14 @@ export const StartBanner = () => {
   return (
     <View style={styles.container}>
       <View style={styles.gradientClip}>
-        <GradientBackground />
+        <GradientView
+          colors={['#FFFFFF', '#FFF7E9']}
+          locations={[0.231, 0.8173]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          style={StyleSheet.absoluteFill}
+          pointerEvents="none"
+        />
       </View>
 
       <View style={styles.buttonContainer}>

package/src/features/fluency/hooks/useCardSnapAnimation.ts

@@ -21,6 +21,14 @@ export type SnapStyles = {
   far: AnimatedStyle<ViewStyle>
 }
 
+type UseCardSnapAnimationParams = {
+  onComplete?: () => void
+}
+
+const SHAKE_STEP_DURATION = 60
+
+const SNAP_SUCCESS_DURATION = 300
+
 const SNAP = {
   duration: 240,
   easing: Easing.bezier(0.6, 0, 0.4, 1),
@@ -35,15 +43,16 @@ const STEP_UP = {
   easing: Easing.bezier(0.3, 0.9, 0.2, 1),
 } as const
 
-// Initial positions of each backing layer: [top, side]
 const L = [
   { top: 12, side: 20 },
   { top: 24, side: 40 },
   { top: 36, side: 60 },
 ]
 
-export const useCardSnapAnimation = () => {
+export const useCardSnapAnimation = (params: UseCardSnapAnimationParams = {}) => {
   const isAnimating = useRef(false)
+  const onCompleteRef = useRef(params.onComplete)
+  onCompleteRef.current = params.onComplete
 
   const translateX = useSharedValue(0)
   const translateY = useSharedValue(0)
@@ -87,13 +96,12 @@ export const useCardSnapAnimation = () => {
     [l3Top, l3Side, l3Opacity],
   )
 
-  const reset = () => {
-    translateX.value = 0
-    translateY.value = 0
-    rotate.value = 0
-    scale.value = 1
-    opacity.value = 1
+  const complete = () => {
+    isAnimating.current = false
+    onCompleteRef.current?.()
+  }
 
+  const resetBackingCards = () => {
     l1Top.value = L[0].top
     l1Side.value = L[0].side
     l2Top.value = L[1].top
@@ -101,12 +109,18 @@ export const useCardSnapAnimation = () => {
     l3Top.value = L[2].top
     l3Side.value = L[2].side
     l3Opacity.value = 0
+  }
 
-    isAnimating.current = false
+  const resetFrontCard = () => {
+    translateX.value = 0
+    translateY.value = 0
+    rotate.value = 0
+    scale.value = 1
+    opacity.value = 1
   }
 
-  const snap = (toX: number, toRotate: number) => {
-    const snapConfig = { duration: SNAP.duration, easing: SNAP.easing }
+  const snap = (toX: number, toRotate: number, duration: number = SNAP.duration) => {
+    const snapConfig = { duration, easing: SNAP.easing }
     const stepConfig = { duration: STEP_UP.duration, easing: STEP_UP.easing }
 
     translateX.value = withTiming(toX, snapConfig)
@@ -115,7 +129,10 @@ export const useCardSnapAnimation = () => {
     scale.value = withTiming(SNAP.scale, snapConfig)
     opacity.value = withTiming(0, snapConfig)
 
-    l1Top.value = withDelay(STEP_UP.delay, withTiming(0, stepConfig, () => runOnJS(reset)()))
+    l1Top.value = withDelay(
+      STEP_UP.delay,
+      withTiming(0, stepConfig, () => runOnJS(complete)()),
+    )
     l1Side.value = withDelay(STEP_UP.delay, withTiming(0, stepConfig))
     l2Top.value = withDelay(STEP_UP.delay, withTiming(L[0].top, stepConfig))
     l2Side.value = withDelay(STEP_UP.delay, withTiming(L[0].side, stepConfig))
@@ -125,26 +142,29 @@ export const useCardSnapAnimation = () => {
   }
 
   const trigger = (direction: SnapDirection) => {
-    if (isAnimating.current) return
+    if (isAnimating.current) return false
     isAnimating.current = true
+    resetFrontCard()
+    resetBackingCards()
 
     const screenWidth = Dimensions.get('window').width
     const toX = direction === 'right' ? screenWidth * 1.6 : -screenWidth * 1.6
     const toRotate = direction === 'right' ? SNAP.rotate : -SNAP.rotate
 
     if (direction === 'right') {
-      snap(toX, toRotate)
-      return
+      snap(toX, toRotate, SNAP_SUCCESS_DURATION)
+      return true
     }
 
     translateX.value = withSequence(
-      withTiming(-10, { duration: 60 }),
-      withTiming(10, { duration: 60 }),
-      withTiming(-6, { duration: 60 }),
-      withTiming(6, { duration: 60 }),
-      withTiming(0, { duration: 60 }, () => runOnJS(snap)(toX, toRotate)),
+      withTiming(-10, { duration: SHAKE_STEP_DURATION }),
+      withTiming(10, { duration: SHAKE_STEP_DURATION }),
+      withTiming(-6, { duration: SHAKE_STEP_DURATION }),
+      withTiming(6, { duration: SHAKE_STEP_DURATION }),
+      withTiming(0, { duration: SHAKE_STEP_DURATION }, () => runOnJS(snap)(toX, toRotate)),
     )
+    return true
   }
 
-  return { snapStyles: { front, near, mid, far } as SnapStyles, trigger }
+  return { snapStyles: { front, near, mid, far } as SnapStyles, trigger, resetBackingCards }
 }

package/src/features/fluency/hooks/useFluencyCardDeckAnimation.ts

@@ -0,0 +1,49 @@
+import { useCallback, useLayoutEffect, useState } from 'react'
+
+import { useCardSnapAnimation, type SnapDirection } from './useCardSnapAnimation'
+import { type AttemptStatus } from '../fluency.constants'
+import type { FluencyCardDisplayContent } from '../components/fluency-solving/fluencySolving.types'
+
+type StartCardExitParams = {
+  cardContent: FluencyCardDisplayContent
+  direction: SnapDirection
+  status: AttemptStatus
+}
+
+export const useFluencyCardDeckAnimation = () => {
+  const [exitingCardContent, setExitingCardContent] = useState<FluencyCardDisplayContent | null>(
+    null,
+  )
+  const [exitingCardStatus, setExitingCardStatus] = useState<AttemptStatus | null>(null)
+  const [shouldResetBackingCards, setShouldResetBackingCards] = useState(false)
+
+  const clearExitingCard = useCallback(() => {
+    setExitingCardContent(null)
+    setExitingCardStatus(null)
+    setShouldResetBackingCards(true)
+  }, [])
+
+  const animation = useCardSnapAnimation({ onComplete: clearExitingCard })
+
+  useLayoutEffect(() => {
+    if (!shouldResetBackingCards || exitingCardContent) return
+
+    animation.resetBackingCards()
+    setShouldResetBackingCards(false)
+  })
+
+  const startCardExit = ({ cardContent, direction, status }: StartCardExitParams) => {
+    if (!animation.trigger(direction)) return false
+
+    setExitingCardContent(cardContent)
+    setExitingCardStatus(status)
+    return true
+  }
+
+  return {
+    exitingCardContent,
+    exitingCardStatus,
+    snapStyles: animation.snapStyles,
+    startCardExit,
+  }
+}

package/src/features/fluency/hooks/useFluencySolvingPreset.ts

@@ -1,11 +1,15 @@
 import { useUnit } from 'effector-react'
 import { COLORS } from '@magmamath/react-native-ui'
 import type { ButtonColor } from '@magmamath/react-native-ui'
-import { FLUENCY_MODE_PRESETS, FluencyMasteryLevel } from '../fluency.constants'
+import { FLUENCY_MODE_PRESETS, FluencyMasteryLevel, type FluencyMode } from '../fluency.constants'
 import type { LegendItem } from '../fluency.types'
 import { useFluency } from '../context/FluencyContext'
 import { useText } from '../../../i18n/i18n'
 
+type UseFluencySolvingPresetParams = {
+  mode?: FluencyMode
+}
+
 type UseFluencySolvingPresetResult = {
   symbol: string
   label: string
@@ -18,21 +22,35 @@ type UseFluencySolvingPresetResult = {
   legend: { items: LegendItem[] }
 }
 
-export const useFluencySolvingPreset = (): UseFluencySolvingPresetResult => {
+export const useFluencySolvingPreset = (
+  params?: UseFluencySolvingPresetParams,
+): UseFluencySolvingPresetResult => {
   const t = useText()
   const { model } = useFluency()
   const { matrixMode, current } = useUnit({
     matrixMode: model.matrix.$mode,
     current: model.solving.$current,
   })
-  const preset = FLUENCY_MODE_PRESETS[current?.mode ?? matrixMode]
+  const preset = FLUENCY_MODE_PRESETS[params?.mode ?? current?.mode ?? matrixMode]
 
   const legendItems: LegendItem[] = [
     { label: t('student.fluency.notStarted'), color: COLORS.NEUTRAL_2, withBorder: true },
-    { label: t('student.fluency.masteryLearning'), color: preset.matrix.levelColors[FluencyMasteryLevel.LEARNING] },
-    { label: t('student.fluency.masteryGrowing'), color: preset.matrix.levelColors[FluencyMasteryLevel.GROWING] },
-    { label: t('student.fluency.masteryStrong'), color: preset.matrix.levelColors[FluencyMasteryLevel.STRONG] },
-    { label: t('student.fluency.masteryMastered'), color: preset.matrix.levelColors[FluencyMasteryLevel.MASTERED] },
+    {
+      label: t('student.fluency.masteryLearning'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.LEARNING],
+    },
+    {
+      label: t('student.fluency.masteryGrowing'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.GROWING],
+    },
+    {
+      label: t('student.fluency.masteryStrong'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.STRONG],
+    },
+    {
+      label: t('student.fluency.masteryMastered'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.MASTERED],
+    },
   ]
 
   return {