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

package/src/features/fluency/components/session-results/FluencySessionResults.tsx

@@ -0,0 +1,191 @@
+import React, { useState } from 'react'
+import { Modal, View, StyleSheet, Text } from 'react-native'
+import {
+  BORDER_RADIUS,
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  CorrectIcon,
+  FONT_FAMILY,
+  SHADOWS,
+  SPACING,
+  TimerIcon,
+  CrossIcon,
+} from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { useText } from '../../../../i18n/i18n'
+import { useFluency } from '../../context/FluencyContext'
+import { AttemptStatus } from '../../shared/fluency.constants'
+import { calculateMaxStreak, formatSessionDuration } from '../../shared/fluencySolving.helpers'
+import { SessionStatCard } from './SessionStatCard'
+import { FlameIcon } from '../../assets/FlameIcon'
+import { SnurrisnurrBg } from '../../assets/SnurrisnurrBg'
+import { TrophyBg } from '../../assets/TrophyBg'
+
+type FluencySessionResultsProps = {
+  onEndModalPress?: () => void
+  onClosePress?: () => void
+}
+
+export const FluencySessionResults = ({
+  onClosePress,
+  onEndModalPress,
+}: FluencySessionResultsProps) => {
+  const [isOpen, setIsOpen] = useState(true)
+  const t = useText()
+  const { model } = useFluency()
+  const { outcomes, completedDurationMs, isSessionComplete, config } = useUnit({
+    outcomes: model.solving.$outcomes,
+    completedDurationMs: model.solving.$completedDurationMs,
+    isSessionComplete: model.solving.$isSessionComplete,
+    config: model.$config,
+  })
+
+  if (!isSessionComplete) return null
+
+  const correctCount = outcomes.filter((o) => o.status === AttemptStatus.CORRECT).length
+  const maxStreak = calculateMaxStreak(outcomes)
+  const durationDisplay = formatSessionDuration(completedDurationMs)
+
+  return (
+    <Modal visible={isOpen} transparent animationType="fade">
+      <View style={styles.overlay}>
+        <View style={styles.container}>
+          <View style={[styles.snurrisnurrLayer, { pointerEvents: 'none' }]}>
+            <SnurrisnurrBg />
+          </View>
+          <View style={[styles.trophyLayer, { pointerEvents: 'none' }]}>
+            <TrophyBg />
+          </View>
+          <View style={styles.close}>
+            <Button
+              onPress={() => {
+                setIsOpen(false)
+                onClosePress?.()
+              }}
+              icon={<CrossIcon size={20} color={COLORS.NEUTRAL_7} />}
+              variant={ButtonVariant.TERTIARY}
+            />
+          </View>
+
+          <View style={styles.titleContainer}>
+            <Text style={styles.title}>{t('student.fluency.resultTitle')}</Text>
+            <Text style={styles.subtitle}>
+              {t('student.fluency.resultSubtitle', { name: config?.name ?? '' })}
+            </Text>
+          </View>
+
+          <View style={styles.resultsContainer}>
+            <SessionStatCard
+              value={String(correctCount)}
+              label={t('student.fluency.resultCorrectCardLabel')}
+              icon={<CorrectIcon size={30} color={COLORS.NEUTRAL_1} />}
+              color={COLORS.PRIMARY_GREEN}
+            />
+            <SessionStatCard
+              value={durationDisplay}
+              label={t('student.fluency.fast')}
+              icon={
+                <View style={styles.timerIconOffset}>
+                  <TimerIcon size={30} color={COLORS.NEUTRAL_1} />
+                </View>
+              }
+              color={COLORS.PRIMARY_PURPLE}
+            />
+            <SessionStatCard
+              value={String(maxStreak)}
+              label={t('student.fluency.resultStreakCardLabel')}
+              icon={<FlameIcon size={30} color={COLORS.NEUTRAL_1} />}
+              color={COLORS.PRIMARY_ORANGE}
+            />
+          </View>
+
+          <View style={styles.claimProgressButtonContainer}>
+            <Button
+              onPress={() => {
+                setIsOpen(false)
+                onEndModalPress?.()
+              }}
+              variant={ButtonVariant.PRIMARY}
+              size={ButtonSize.LARGE}
+              colorScheme={ButtonColor.YELLOW}
+              style={{ text: styles.buttonText }}
+              raiseLevel={6}
+            >
+              {t('student.fluency.claimProgress')}
+            </Button>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  container: {
+    width: 700,
+    height: 440,
+    padding: SPACING[800],
+    gap: SPACING[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'hidden',
+    ...SHADOWS[5],
+  },
+  close: {
+    position: 'absolute',
+    top: SPACING[400],
+    right: SPACING[400],
+  },
+  titleContainer: {
+    gap: SPACING[200],
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: '900',
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.NEUTRAL_9,
+  },
+  subtitle: {
+    fontSize: 18,
+    fontWeight: '400',
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.NEUTRAL_7,
+  },
+  resultsContainer: {
+    flexDirection: 'row',
+    height: 184,
+    gap: 10,
+    paddingTop: 32,
+    paddingBottom: 64,
+  },
+  snurrisnurrLayer: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+  },
+  trophyLayer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+  },
+  timerIconOffset: {
+    paddingBottom: 2,
+    paddingLeft: 2,
+  },
+  claimProgressButtonContainer: {
+    alignItems: 'center',
+  },
+  buttonText: {
+    textTransform: 'uppercase',
+  },
+})

package/src/features/fluency/components/session-results/SessionStatCard.tsx

@@ -0,0 +1,58 @@
+import React, { type ReactNode } from 'react'
+import { StyleSheet, Text, View, type ViewStyle } from 'react-native'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+
+type SessionStatCardProps = {
+  value: string
+  label: string
+  icon: ReactNode
+  color: string
+}
+
+export const SessionStatCard = ({ value, label, icon, color }: SessionStatCardProps) => {
+  return (
+    <View style={[styles.card, { borderColor: color }]}>
+      <View style={[styles.iconCircle, { backgroundColor: color }]}>{icon}</View>
+      <View style={styles.textContainer}>
+        <Text style={[styles.value, { color }]}>{value}</Text>
+        <Text style={styles.label}>{label}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderWidth: 4,
+    borderRadius: BORDER_RADIUS[400],
+    padding: SPACING[400],
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[300],
+  },
+  textContainer: {
+    gap: SPACING[50],
+  },
+  iconCircle: {
+    width: 48,
+    height: 48,
+    borderRadius: 1000,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1],
+  },
+  value: {
+    fontSize: 32,
+    lineHeight: 34,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '700',
+  },
+  label: {
+    fontSize: 16,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '600',
+    color: COLORS.NEUTRAL_7,
+  },
+})

package/src/features/fluency/components/session-results/SkillProgressionRow.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING, Typography } from '@magmamath/react-native-ui'
+
+const BAR_WIDTH = 80
+
+type SkillProgressionRowProps = {
+  symbol: string
+  symbolColor: string
+  symbolBackground: string
+  operationName: string
+  levelLabel: string
+  levelColor: string
+  progressRate: number
+  progressColor: string
+  isActive?: boolean
+}
+
+export const SkillProgressionRow = ({
+  symbol,
+  symbolColor,
+  symbolBackground,
+  operationName,
+  levelLabel,
+  levelColor,
+  progressRate,
+  progressColor,
+  isActive,
+}: SkillProgressionRowProps) => {
+  return (
+    <View
+      style={[
+        styles.row,
+        isActive && { borderWidth: 1.5, borderColor: progressColor, backgroundColor: symbolBackground },
+      ]}
+    >
+      <View style={[styles.symbolCircle, { backgroundColor: symbolBackground }]}>
+        <Typography style={[styles.symbol, { color: symbolColor }]}>{symbol}</Typography>
+      </View>
+      <View style={styles.col}>
+        <Typography style={styles.name}>{operationName}</Typography>
+        <Typography style={[styles.level, { color: levelColor }]}>{levelLabel}</Typography>
+      </View>
+      <View style={styles.barTrack}>
+        <View style={[styles.barFill, { width: BAR_WIDTH * progressRate, backgroundColor: progressColor }]} />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[300],
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderRadius: 14,
+  },
+  symbolCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: BORDER_RADIUS[250],
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  symbol: {
+    fontSize: 18,
+    fontWeight: '900',
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  col: {
+    flex: 1,
+    gap: 2,
+  },
+  name: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: COLORS.NEUTRAL_10,
+    textAlign: 'center',
+  },
+  level: {
+    fontSize: 12,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  barTrack: {
+    width: BAR_WIDTH,
+    height: 6,
+    backgroundColor: COLORS.NEUTRAL_4,
+    borderRadius: BORDER_RADIUS[100],
+    overflow: 'hidden',
+  },
+  barFill: {
+    height: 6,
+    borderRadius: BORDER_RADIUS[100],
+  },
+})

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { MathFlashcard, FlashcardLayout } from './MathFlashcard'
+import { MathFlashcard } from './MathFlashcard'
+import { FlashcardLayout } from '../../shared/fluency.types'
 
 export type FlashcardExample = {
   left: string
@@ -8,25 +9,25 @@ export type FlashcardExample = {
 
 const CARD_LAYOUTS: FlashcardLayout[] = [
   {
-    card: { width: 146, height: 88, radius: 6 },
-    answer: { width: 20, height: 29, radius: 4 },
-    fontSize: 26,
-    position: { right: 283, top: 31, zIndex: 1 },
-    rotation: '21.3deg',
+    card: { width: 175, height: 106, radius: 8 },
+    answer: { width: 24, height: 34, radius: 5 },
+    fontSize: 31,
+    position: { right: 69, top: 84, zIndex: 1 },
+    rotation: '5.63deg',
   },
   {
-    card: { width: 195, height: 118, radius: 9 },
-    answer: { width: 27, height: 38, radius: 6 },
-    fontSize: 35,
-    position: { right: 148, top: -6, zIndex: 2 },
-    rotation: '-15.43deg',
+    card: { width: 234, height: 141, radius: 10 },
+    answer: { width: 32, height: 46, radius: 7 },
+    fontSize: 41,
+    position: { right: 35, top: 37, zIndex: 2 },
+    rotation: '-2.47deg',
   },
   {
-    card: { width: 260, height: 157, radius: 12 },
-    answer: { width: 36, height: 51, radius: 8 },
-    fontSize: 46,
-    position: { right: 0, top: -11, zIndex: 3 },
-    rotation: '8.83deg',
+    card: { width: 286, height: 172, radius: 13 },
+    answer: { width: 39, height: 56, radius: 8 },
+    fontSize: 51,
+    position: { right: 9, top: -5, zIndex: 3 },
+    rotation: '3.07deg',
   },
 ]
 

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

@@ -1,14 +1,7 @@
 import React from 'react'
 import { View, Text, StyleSheet } from 'react-native'
-import { COLORS, SHADOWS } from '@magmamath/react-native-ui'
-
-export type FlashcardLayout = {
-  card: { width: number; height: number; radius: number }
-  answer: { width: number; height: number; radius: number }
-  fontSize: number
-  position: { right: number; top: number; zIndex: number }
-  rotation: string
-}
+import { COLORS, FONT_FAMILY, SHADOWS } from '@magmamath/react-native-ui'
+import type { FlashcardLayout } from '../../shared/fluency.types'
 
 type MathFlashcardProps = {
   left: string
@@ -36,7 +29,11 @@ export const MathFlashcard = ({ left, right, layout }: MathFlashcardProps) => (
       <View
         style={[
           styles.answerBox,
-          { width: layout.answer.width, height: layout.answer.height, borderRadius: layout.answer.radius },
+          {
+            width: layout.answer.width,
+            height: layout.answer.height,
+            borderRadius: layout.answer.radius,
+          },
         ]}
       />
       <Text style={[styles.text, { fontSize: layout.fontSize }]}>{right}</Text>
@@ -59,6 +56,7 @@ const styles = StyleSheet.create({
   },
   text: {
     fontWeight: 'bold',
+    fontFamily: FONT_FAMILY.buenosAires,
     color: COLORS.BLACK,
   },
   answerBox: {

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

@@ -6,44 +6,55 @@ import {
   ButtonSize,
   ButtonVariant,
   Typography,
-  PlayIcon,
   COLORS,
   SHADOWS,
   SPACING,
   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 { SpringIcon } from '../../assets/SpringIcon'
+import { FlashIcon } from '../../assets/FlashIcon'
+import { SESSION_LENGTH } from '../../shared/fluency.constants'
 
 export const StartBanner = () => {
   const t = useText()
-  const { onStartPress } = useFluency()
+  const { model, onStartPress } = useFluency()
 
   return (
     <View style={styles.container}>
+      <View style={styles.gradientClip}>
+        <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}>
         <View style={styles.buttonGroup}>
           <Button
-            onPress={onStartPress}
-            disabled={false}
-            isLoading={false}
-            isActive={false}
-            icon={<PlayIcon color={COLORS.NEUTRAL_1} />}
+            icon={<FlashIcon color={COLORS.NEUTRAL_1} />}
             variant={ButtonVariant.PRIMARY}
             size={ButtonSize.LARGE}
             colorScheme={ButtonColor.YELLOW}
             raiseLevel={6}
             style={{ container: styles.button }}
+            onPress={() => {
+              model.solving.start()
+              onStartPress?.()
+            }}
           >
             {t('student.fluency.startPractice')}
           </Button>
-          <Typography style={styles.buttonSubtitle}>0 {t('student.fluency.cardsReady')}</Typography>
-          <View style={styles.springIcon}>
-            <SpringIcon />
-          </View>
+          <Typography style={styles.buttonSubtitle}>
+            {SESSION_LENGTH} {t('student.fluency.cardsReady')}
+          </Typography>
         </View>
       </View>
 
@@ -66,9 +77,13 @@ const styles = StyleSheet.create({
     paddingVertical: SPACING[400],
     paddingHorizontal: SPACING[800],
     borderRadius: BORDER_RADIUS[400],
-    backgroundColor: COLORS.NEUTRAL_1,
     ...SHADOWS[1],
   },
+  gradientClip: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'hidden',
+  },
   buttonContainer: {
     alignItems: 'flex-start',
     zIndex: 4,
@@ -84,9 +99,10 @@ const styles = StyleSheet.create({
   },
   buttonSubtitle: {
     fontSize: 13,
-    fontWeight: '400',
+    fontWeight: '700',
     color: COLORS.BLACK,
     fontFamily: FONT_FAMILY.buenosAires,
+    textTransform: 'uppercase',
   },
   flashcard: {
     position: 'absolute',

package/src/features/fluency/context/FluencyContext.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 import type { FluencyModel } from '../model/FluencyModel'
-import type { FluencyMode } from '../fluency.constants'
+import type { FluencyMode } from '../shared/fluency.constants'
 
 export type FluencyContextValue = {
   model: FluencyModel

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 }
 }