@magmamath/students-features 1.5.0 → 1.5.1

package/src/features/fluency/components/select-math-operator/ProgressBar.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  SelectOptionColor,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { ProgressBarSparkles } from './ProgressBarSparkles'
+
+const PRIMARY_COLOR_MAP: Record<SelectOptionColor, string> = {
+  [SelectOptionColor.GREEN]: COLORS.PRIMARY_GREEN,
+  [SelectOptionColor.ORANGE]: COLORS.PRIMARY_ORANGE,
+  [SelectOptionColor.BLUE]: COLORS.PRIMARY_BLUE,
+  [SelectOptionColor.RED]: COLORS.PRIMARY_RED,
+  [SelectOptionColor.YELLOW]: COLORS.PRIMARY_YELLOW,
+  [SelectOptionColor.PURPLE]: COLORS.PRIMARY_PURPLE,
+  [SelectOptionColor.GREY]: COLORS.NEUTRAL_6,
+  [SelectOptionColor.SUNSET]: COLORS.PRIMARY_RED,
+}
+
+const SPARKLE_COLOR_MAP: Record<SelectOptionColor, string> = {
+  [SelectOptionColor.GREEN]: COLORS.GREEN_3,
+  [SelectOptionColor.ORANGE]: COLORS.ORANGE_3,
+  [SelectOptionColor.BLUE]: COLORS.BLUE_3,
+  [SelectOptionColor.RED]: COLORS.RED_3,
+  [SelectOptionColor.YELLOW]: COLORS.YELLOW_3,
+  [SelectOptionColor.PURPLE]: COLORS.PURPLE_3,
+  [SelectOptionColor.GREY]: COLORS.NEUTRAL_4,
+  [SelectOptionColor.SUNSET]: COLORS.RED_3,
+}
+
+export type ProgressBarProps = {
+  progress: number
+  color: SelectOptionColor
+}
+
+export const ProgressBar = ({ progress, color = SelectOptionColor.GREEN }: ProgressBarProps) => {
+  const progressRounded = Math.round(Math.min(100, Math.max(0, progress)))
+  const variantColor = PRIMARY_COLOR_MAP[color]
+  const isComplete = progressRounded === 100
+  return (
+    <View style={styles.container}>
+      <View style={styles.trackWrapper}>
+        <View style={styles.track}>
+          <View
+            style={[styles.fill, { backgroundColor: variantColor, width: `${progressRounded}%` }]}
+          />
+        </View>
+        {isComplete && <ProgressBarSparkles color={SPARKLE_COLOR_MAP[color]} />}
+      </View>
+      <Typography variant={HeadingVariants.H10} style={{ color: variantColor }}>
+        {progressRounded}%
+      </Typography>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    marginTop: SPACING[200],
+    gap: SPACING[200],
+    alignItems: 'center',
+  },
+  trackWrapper: {
+    flex: 1,
+  },
+  track: {
+    height: 18,
+    backgroundColor: COLORS.NEUTRAL_3,
+    borderRadius: BORDER_RADIUS[450],
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: BORDER_RADIUS[450],
+  },
+})

package/src/features/fluency/components/select-math-operator/ProgressBarSparkles.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect } from 'react'
+import { StyleSheet } from 'react-native'
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated'
+import { SparkleIcon } from '../../assets/SparkleIcon'
+
+const QUICK = Easing.bezier(0.2, 0, 0, 1)
+const END_HOLD_MS = 800
+
+type SparkleItemConfig = {
+  leftPercent: number
+  topOffset: number
+  size: number
+  triggerDelay: number
+  appearDuration: number
+  dissolveDuration: number
+}
+
+const SPARKLE_CONFIGS: SparkleItemConfig[] = [
+  {
+    leftPercent: 6.5,
+    topOffset: -3,
+    size: 14,
+    triggerDelay: 550,
+    appearDuration: 868,
+    dissolveDuration: 744,
+  },
+  {
+    leftPercent: 31.7,
+    topOffset: 7,
+    size: 14,
+    triggerDelay: 550,
+    appearDuration: 868,
+    dissolveDuration: 744,
+  },
+  {
+    leftPercent: 37.8,
+    topOffset: -5,
+    size: 14,
+    triggerDelay: 250,
+    appearDuration: 744,
+    dissolveDuration: 868,
+  },
+  {
+    leftPercent: 58.7,
+    topOffset: 5,
+    size: 20,
+    triggerDelay: 50,
+    appearDuration: 868,
+    dissolveDuration: 868,
+  },
+  {
+    leftPercent: 88.7,
+    topOffset: -5,
+    size: 14,
+    triggerDelay: 250,
+    appearDuration: 744,
+    dissolveDuration: 868,
+  },
+]
+
+type SparkleItemProps = {
+  config: SparkleItemConfig
+  color: string
+}
+
+const SparkleItem = ({ config, color }: SparkleItemProps) => {
+  const loop = useSharedValue(0)
+
+  useEffect(() => {
+    loop.value = withRepeat(
+      withSequence(
+        withDelay(
+          config.triggerDelay,
+          withTiming(1, { duration: config.appearDuration, easing: QUICK }),
+        ),
+        withDelay(END_HOLD_MS, withTiming(2, { duration: config.dissolveDuration, easing: QUICK })),
+        withTiming(0, { duration: 0 }),
+      ),
+      -1,
+      false,
+    )
+    return () => cancelAnimation(loop)
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const v = loop.value
+    if (v <= 1) {
+      return {
+        opacity: v,
+        transform: [{ scale: v }, { rotate: `${(-90 + v * 90).toFixed(1)}deg` }],
+      }
+    }
+    return {
+      opacity: 2 - v,
+      transform: [{ scale: 1 }, { rotate: '0deg' }],
+    }
+  }, [loop])
+
+  return (
+    <Animated.View
+      style={[
+        styles.sparkle,
+        animatedStyle,
+        {
+          left: `${config.leftPercent}%`,
+          top: config.topOffset,
+          width: config.size,
+          height: config.size,
+        },
+      ]}
+    >
+      <SparkleIcon size={config.size} color={color} />
+    </Animated.View>
+  )
+}
+
+export type ProgressBarSparklesProps = {
+  color: string
+}
+
+export const ProgressBarSparkles = ({ color }: ProgressBarSparklesProps) => (
+  <>
+    {SPARKLE_CONFIGS.map((config, index) => (
+      <SparkleItem key={index} config={config} color={color} />
+    ))}
+  </>
+)
+
+const styles = StyleSheet.create({
+  sparkle: {
+    position: 'absolute',
+  },
+})

package/src/features/fluency/components/select-math-operator/SelectMathOperator.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { FLUENCY_MODES } from '../../shared/fluency.constants'
+import { MathOperatorRow } from './MathOperatorRow'
+import { useFluency } from '../../context/FluencyContext'
+import { useText } from '../../../../i18n/i18n'
+
+export const SelectMathOperator = () => {
+  const t = useText()
+  const { model, onModeSelectPress } = useFluency()
+  const { fluencyMode, matrix } = useUnit({
+    fluencyMode: model.matrix.$mode,
+    matrix: model.matrix.$data,
+  })
+
+  const visibleModes = matrix
+    ? FLUENCY_MODES.filter(
+        ({ mode }) => Object.keys(matrix.operations?.[mode]?.facts ?? {}).length > 0,
+      )
+    : FLUENCY_MODES
+
+  return (
+    <View style={styles.container}>
+      {visibleModes.map(({ mode, label, symbol, select }, index) => {
+        const isSelectedMode = mode === fluencyMode
+        const progress = (matrix?.operations?.[mode]?.completionRate ?? 0) * 100
+
+        return (
+          <MathOperatorRow
+            key={mode}
+            title={t(label)}
+            icon={
+              <Typography
+                variant={HeadingVariants.H6}
+                style={[styles.symbol, isSelectedMode && styles.symbolSelected]}
+              >
+                {symbol}
+              </Typography>
+            }
+            progress={progress}
+            color={select}
+            selected={isSelectedMode}
+            onSelect={() => {
+              model.matrix.setMode(mode)
+              onModeSelectPress?.(mode)
+            }}
+            showDivider={index < visibleModes.length - 1}
+          />
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+    width: 270,
+    padding: SPACING[400],
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[1],
+  },
+  symbol: {
+    fontSize: 32,
+    fontWeight: '100',
+    color: COLORS.NEUTRAL_9,
+  },
+  symbolSelected: {
+    color: COLORS.NEUTRAL_1,
+  },
+})

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { MathFlashcard } from './MathFlashcard'
+import { FlashcardLayout } from '../../shared/fluency.types'
+
+export type FlashcardExample = {
+  left: string
+  right: string
+}
+
+const CARD_LAYOUTS: FlashcardLayout[] = [
+  {
+    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: 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: 286, height: 172, radius: 13 },
+    answer: { width: 39, height: 56, radius: 8 },
+    fontSize: 51,
+    position: { right: 9, top: -5, zIndex: 3 },
+    rotation: '3.07deg',
+  },
+]
+
+type BannerFlashcardsProps = {
+  examples: FlashcardExample[]
+}
+
+export const BannerFlashcards = ({ examples }: BannerFlashcardsProps) => (
+  <>
+    {CARD_LAYOUTS.map((layout, index) => {
+      const example = examples[index]
+      if (!example) return null
+      return <MathFlashcard key={index} left={example.left} right={example.right} layout={layout} />
+    })}
+  </>
+)