@magmamath/students-features 1.4.1 → 1.4.2

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

@@ -0,0 +1,73 @@
+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 = useUnit(model.matrix.$mode)
+  const matrix = useUnit(model.matrix.$data)
+
+  return (
+    <View style={styles.container}>
+      {FLUENCY_MODES.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 < FLUENCY_MODES.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} />
+    })}
+  </>
+)

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

@@ -0,0 +1,67 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { COLORS, FONT_FAMILY, SHADOWS } from '@magmamath/react-native-ui'
+import type { FlashcardLayout } from '../../shared/fluency.types'
+
+type MathFlashcardProps = {
+  left: string
+  right: string
+  layout: FlashcardLayout
+}
+
+export const MathFlashcard = ({ left, right, layout }: MathFlashcardProps) => (
+  <View
+    style={[
+      styles.card,
+      {
+        width: layout.card.width,
+        height: layout.card.height,
+        borderRadius: layout.card.radius,
+        right: layout.position.right,
+        top: layout.position.top,
+        zIndex: layout.position.zIndex,
+        transform: [{ rotate: layout.rotation }],
+      },
+    ]}
+  >
+    <View style={styles.row}>
+      <Text style={[styles.text, { fontSize: layout.fontSize }]}>{left}</Text>
+      <View
+        style={[
+          styles.answerBox,
+          {
+            width: layout.answer.width,
+            height: layout.answer.height,
+            borderRadius: layout.answer.radius,
+          },
+        ]}
+      />
+      <Text style={[styles.text, { fontSize: layout.fontSize }]}>{right}</Text>
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  card: {
+    position: 'absolute',
+    backgroundColor: COLORS.NEUTRAL_1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1],
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 1,
+  },
+  text: {
+    fontWeight: 'bold',
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.BLACK,
+  },
+  answerBox: {
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+})

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

@@ -0,0 +1,121 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  Typography,
+  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 { FlashIcon } from '../../assets/FlashIcon'
+import { SESSION_LENGTH } from '../../shared/fluency.constants'
+
+export const StartBanner = () => {
+  const t = useText()
+  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
+            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}>
+            {SESSION_LENGTH} {t('student.fluency.cardsReady')}
+          </Typography>
+        </View>
+      </View>
+
+      <BannerFlashcards
+        examples={[
+          { left: '15*', right: '=30' },
+          { left: '10-', right: '=25' },
+          { left: '5+', right: '=19' },
+        ]}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center',
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[800],
+    borderRadius: BORDER_RADIUS[400],
+    ...SHADOWS[1],
+  },
+  gradientClip: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'hidden',
+  },
+  buttonContainer: {
+    alignItems: 'flex-start',
+    zIndex: 4,
+  },
+  buttonGroup: {
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  button: {
+    minWidth: 220,
+    maxWidth: 315,
+    textTransform: 'uppercase',
+  },
+  buttonSubtitle: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: COLORS.BLACK,
+    fontFamily: FONT_FAMILY.buenosAires,
+    textTransform: 'uppercase',
+  },
+  flashcard: {
+    position: 'absolute',
+    backgroundColor: COLORS.NEUTRAL_1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1],
+  },
+  springIcon: {
+    position: 'absolute',
+    bottom: -28,
+    right: 0,
+    marginTop: 6,
+    alignSelf: 'flex-end',
+  },
+})

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

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react'
+import type { FluencyModel } from '../model/FluencyModel'
+import type { FluencyMode } from '../shared/fluency.constants'
+
+export type FluencyContextValue = {
+  model: FluencyModel
+  onStartPress?: () => void
+  onPracticePress?: () => void
+  onModeSelectPress?: (mode: FluencyMode) => void
+}
+
+const FluencyContext = createContext<FluencyContextValue | null>(null)
+
+export const useFluency = (): FluencyContextValue => {
+  const value = useContext(FluencyContext)
+  if (!value) throw new Error('useFluency must be used within FluencyProvider')
+  return value
+}
+
+export const FluencyProvider = FluencyContext.Provider