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

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+
+type CellTooltipProps = {
+  label: string
+}
+
+export const CellTooltip = ({ label }: CellTooltipProps) => (
+  <View style={styles.container}>
+    <View style={styles.bubble}>
+      <Text style={styles.label}>{label}</Text>
+    </View>
+    <View style={styles.arrow} />
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  bubble: {
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[150],
+    paddingHorizontal: SPACING[200],
+    paddingVertical: SPACING[100],
+    ...SHADOWS[4],
+  },
+  label: {
+    fontSize: 13,
+    color: COLORS.NEUTRAL_9,
+    textAlign: 'center',
+  },
+  arrow: {
+    width: 0,
+    height: 0,
+    marginTop: -4,
+    borderLeftWidth: 9,
+    borderRightWidth: 9,
+    borderTopWidth: 12,
+    borderStyle: 'solid',
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderTopColor: COLORS.NEUTRAL_1,
+  },
+})

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

@@ -1,46 +1,119 @@
-import React from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-import { BORDER_RADIUS, COLORS } from '@magmamath/react-native-ui'
-import {
-  getCellBackground,
-  getCellColorByScore,
-  getCellLabel,
-  getMasteryLevel,
-} from '../../../fluency.helpers'
-import { FluencyMasteryLevel } from '../../../fluency.constants'
+import React, { useState } from 'react'
+import { Pressable, View, Text, StyleSheet } from 'react-native'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { FluencyMasteryLevel } from '../../../shared/fluency.constants'
 import { StarFillIcon } from '../../../assets/StarFillIcon'
-import type { FluencyModePreset } from '../../../fluency.types'
+import { CellTooltip } from './CellTooltip'
+import type { GridCell } from '../../../shared/fluency.types'
 
-type MatrixCellProps = {
-  row: number
-  col: number
-  score: number | null
-  mastery: FluencyModePreset['matrix']['mastery']
+type MatrixCellProps = Omit<GridCell, 'label'> & {
+  label: string | number | null
+  levelColors: Record<FluencyMasteryLevel, string>
+  tooltipLabel: string | null
 }
 
-export const MatrixCell = ({ row, col, score, mastery }: MatrixCellProps) => {
-  const label = getCellLabel(row, col)
-  const isMastered = score !== null && getMasteryLevel(score) === FluencyMasteryLevel.MASTERED
-  const background =
-    score !== null ? getCellColorByScore(score, mastery) : getCellBackground(row, col)
+export const MatrixCell = ({
+  label,
+  box,
+  isHeader,
+  isEmpty,
+  levelColors,
+  tooltipLabel,
+}: MatrixCellProps) => {
+  const [isActive, setIsActive] = useState(false)
+  const masteryLevel = box || null
+  const isMastered = masteryLevel === FluencyMasteryLevel.MASTERED
+
+  const bgColor = (() => {
+    if (masteryLevel) return levelColors[masteryLevel]
+    if (isHeader) return COLORS.NEUTRAL_5
+    return COLORS.NEUTRAL_2
+  })()
+
+  const showTooltip = isActive && !!tooltipLabel
+
+  const activate = () => setIsActive(true)
+  const deactivate = () => setIsActive(false)
+
+  if (isEmpty) {
+    return (
+      <View style={styles.wrapper}>
+        <View style={[styles.cell, styles.emptyCell]}>
+          <Text style={styles.emptyCellText}>−</Text>
+        </View>
+      </View>
+    )
+  }
 
   return (
-    <View style={[styles.cell, { backgroundColor: background }]}>
-      {isMastered && <StarFillIcon />}
-      {label !== null && <Text style={styles.headerText}>{label}</Text>}
+    <View style={[styles.wrapper, showTooltip && styles.wrapperActive]}>
+      {showTooltip && (
+        <Animated.View
+          entering={FadeIn.duration(200)}
+          exiting={FadeOut.duration(200)}
+          style={[styles.tooltipContainer, { pointerEvents: 'none' }]}
+        >
+          <CellTooltip label={tooltipLabel} />
+        </Animated.View>
+      )}
+      <Pressable
+        style={[styles.cell, { backgroundColor: bgColor }]}
+        onHoverIn={activate}
+        onHoverOut={deactivate}
+        onPressIn={activate}
+        onPressOut={deactivate}
+      >
+        {isMastered && <StarFillIcon color={isActive ? COLORS.PRIMARY_YELLOW : undefined} />}
+
+        {label !== null && (
+          <Text style={typeof label === 'string' ? styles.symbolText : styles.headerText}>
+            {label}
+          </Text>
+        )}
+      </Pressable>
     </View>
   )
 }
 
 const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+  },
+  wrapperActive: {
+    zIndex: 1,
+  },
   cell: {
     flex: 1,
     borderRadius: BORDER_RADIUS[100],
     alignItems: 'center',
     justifyContent: 'center',
   },
+  tooltipContainer: {
+    position: 'absolute',
+    bottom: '80%',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    paddingBottom: SPACING[50],
+    zIndex: 1,
+  },
+  emptyCell: {
+    backgroundColor: COLORS.NEUTRAL_2,
+  },
+  emptyCellText: {
+    fontSize: 12,
+    color: COLORS.NEUTRAL_5,
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
   headerText: {
-    fontSize: 13,
+    fontSize: 12,
+    fontWeight: '600',
     color: COLORS.NEUTRAL_2,
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  symbolText: {
+    fontSize: 24,
+    color: COLORS.NEUTRAL_7,
   },
 })

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

@@ -1,36 +1,38 @@
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { SPACING } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
 import { MatrixCell } from './MatrixCell'
-import { MATRIX_SIZE } from '../../../fluency.constants'
+import { useFluency } from '../../../context/FluencyContext'
 import { useFluencyModePreset } from '../../../hooks/useFluencyModePreset'
 
-const MOCK_SCORES: Record<string, number> = {
-  '1-1': 90,
-  '2-3': 70,
-  '3-5': 50,
-  '5-2': 30,
-  '4-4': 10,
-  '1-5': 85,
-  '3-3': 45,
-}
-
 export const MatrixFill = () => {
-  const { matrix } = useFluencyModePreset()
+  const { model } = useFluency()
+  const modePreset = useFluencyModePreset()
+  const grid = useUnit(model.matrix.$matrix)
+
+  if (!grid) return null
 
   return (
     <View style={styles.grid}>
-      {Array.from({ length: MATRIX_SIZE }, (_, row) => (
-        <View key={row} style={styles.row}>
-          {Array.from({ length: MATRIX_SIZE }, (_, col) => (
-            <MatrixCell
-              key={col}
-              row={row}
-              col={col}
-              score={MOCK_SCORES[`${row}-${col}`] ?? null}
-              mastery={matrix.mastery}
-            />
-          ))}
+      {grid.map((row, rowIdx) => (
+        <View key={rowIdx} style={styles.row}>
+          {row.map((cell, colIdx) => {
+            const isOriginCell = rowIdx === 0 && colIdx === 0
+            const tooltipLabel = cell.numbers
+              ? `${cell.numbers[0]}${modePreset.symbol}${cell.numbers[1]}`
+              : null
+
+            return (
+              <MatrixCell
+                key={colIdx}
+                {...cell}
+                label={isOriginCell ? modePreset.symbol : cell.label}
+                levelColors={modePreset.colors.level}
+                tooltipLabel={tooltipLabel}
+              />
+            )
+          })}
         </View>
       ))}
     </View>
@@ -40,11 +42,11 @@ export const MatrixFill = () => {
 const styles = StyleSheet.create({
   grid: {
     flex: 1,
-    gap: SPACING[50],
+    gap: SPACING[100],
   },
   row: {
     flex: 1,
     flexDirection: 'row',
-    gap: SPACING[50],
+    gap: SPACING[100],
   },
 })

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

@@ -13,16 +13,18 @@ import {
 import { useFluencyModePreset } from '../../../hooks/useFluencyModePreset'
 import { useFluency } from '../../../context/FluencyContext'
 import { useText } from '../../../../../i18n/i18n'
+import { useUnit } from 'effector-react'
 
 export const MatrixLegend = () => {
   const t = useText()
-  const { matrix, buttonColor, legendItems } = useFluencyModePreset()
-  const { onPracticePress } = useFluency()
+  const modePreset = useFluencyModePreset()
+  const { model, onPracticePress } = useFluency()
+  const mode = useUnit(model.matrix.$mode)
 
   return (
     <View style={styles.container}>
       <View style={styles.legendItems}>
-        {legendItems.map((item) => (
+        {modePreset.legend.items.map((item) => (
           <View key={item.label} style={styles.legendItem}>
             <View
               style={[
@@ -36,15 +38,18 @@ export const MatrixLegend = () => {
         ))}
       </View>
       <Button
-        onPress={onPracticePress}
+        onPress={() => {
+          model.solving.start(mode)
+          onPracticePress?.()
+        }}
         variant={ButtonVariant.PRIMARY}
         size={ButtonSize.MEDIUM}
-        colorScheme={buttonColor}
+        colorScheme={modePreset.colors.button}
         icon={<PlayIcon color={COLORS.NEUTRAL_1} />}
         raiseLevel={3}
         style={{ container: styles.practiceButton, text: styles.practiceButtonText }}
       >
-        {`${t('student.fluency.practice')} ${t(matrix.operatorName)}`}
+        {`${t('student.fluency.practice')} ${modePreset.label}`}
       </Button>
     </View>
   )

package/src/features/fluency/components/mobile-menu/MobileMenu.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { View, StyleSheet, useWindowDimensions } from 'react-native'
+import { Button, ButtonVariant, SPACING } from '@magmamath/react-native-ui'
+import { MenuIcon } from '../../../../shared/icons/MenuIcon'
+import { BURGER_MENU_BREAKPOINT, isWeb } from '../../../../shared/common.constants'
+
+type MobileMenuProps = {
+  onPress?: () => void
+}
+
+export const MobileMenu = ({ onPress }: MobileMenuProps) => {
+  const dimensions = useWindowDimensions()
+  const isVisible = isWeb && dimensions.width <= BURGER_MENU_BREAKPOINT
+
+  if (!isVisible) return null
+
+  return (
+    <View style={styles.container}>
+      <Button onPress={onPress} variant={ButtonVariant.TERTIARY} icon={<MenuIcon size={24} />} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginRight: SPACING[200],
+  },
+})

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

@@ -8,64 +8,7 @@ import {
   SPACING,
   Typography,
 } from '@magmamath/react-native-ui'
-
-type ProgressShades = {
-  low: string
-  medium: string
-  high: string
-  max: string
-}
-
-const PROGRESS_COLOR_SHADES: Record<SelectOptionColor, ProgressShades> = {
-  [SelectOptionColor.GREEN]: {
-    low: COLORS.GREEN_2,
-    medium: COLORS.GREEN_3,
-    high: COLORS.GREEN_6,
-    max: COLORS.GREEN_7,
-  },
-  [SelectOptionColor.ORANGE]: {
-    low: COLORS.ORANGE_2,
-    medium: COLORS.ORANGE_3,
-    high: COLORS.ORANGE_6,
-    max: COLORS.ORANGE_7,
-  },
-  [SelectOptionColor.BLUE]: {
-    low: COLORS.BLUE_2,
-    medium: COLORS.BLUE_3,
-    high: COLORS.BLUE_6,
-    max: COLORS.BLUE_7,
-  },
-  [SelectOptionColor.RED]: {
-    low: COLORS.RED_2,
-    medium: COLORS.RED_3,
-    high: COLORS.RED_6,
-    max: COLORS.RED_7,
-  },
-  [SelectOptionColor.YELLOW]: {
-    low: COLORS.YELLOW_2,
-    medium: COLORS.YELLOW_3,
-    high: COLORS.YELLOW_6,
-    max: COLORS.YELLOW_7,
-  },
-  [SelectOptionColor.PURPLE]: {
-    low: COLORS.PURPLE_2,
-    medium: COLORS.PURPLE_3,
-    high: COLORS.PURPLE_6,
-    max: COLORS.PURPLE_7,
-  },
-  [SelectOptionColor.GREY]: {
-    low: COLORS.NEUTRAL_2,
-    medium: COLORS.NEUTRAL_3,
-    high: COLORS.NEUTRAL_6,
-    max: COLORS.NEUTRAL_7,
-  },
-  [SelectOptionColor.SUNSET]: {
-    low: COLORS.RED_2,
-    medium: COLORS.RED_3,
-    high: COLORS.RED_6,
-    max: COLORS.RED_7,
-  },
-}
+import { ProgressBarSparkles } from './ProgressBarSparkles'
 
 const PRIMARY_COLOR_MAP: Record<SelectOptionColor, string> = {
   [SelectOptionColor.GREEN]: COLORS.PRIMARY_GREEN,
@@ -78,11 +21,15 @@ const PRIMARY_COLOR_MAP: Record<SelectOptionColor, string> = {
   [SelectOptionColor.SUNSET]: COLORS.PRIMARY_RED,
 }
 
-const getFillColor = (shades: ProgressShades, progress: number): string => {
-  if (progress <= 10) return shades.low
-  if (progress <= 20) return shades.medium
-  if (progress <= 80) return shades.high
-  return shades.max
+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 = {
@@ -91,16 +38,21 @@ export type ProgressBarProps = {
 }
 
 export const ProgressBar = ({ progress, color = SelectOptionColor.GREEN }: ProgressBarProps) => {
-  const normalized = Math.round(Math.min(100, Math.max(0, progress)))
-  const fillColor = getFillColor(PROGRESS_COLOR_SHADES[color], normalized)
-  const textColor = PRIMARY_COLOR_MAP[color]
+  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.track}>
-        <View style={[styles.fill, { backgroundColor: fillColor, width: `${normalized}%` }]} />
+      <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: textColor }}>
-        {normalized}%
+      <Typography variant={HeadingVariants.H10} style={{ color: variantColor }}>
+        {progressRounded}%
       </Typography>
     </View>
   )
@@ -113,8 +65,10 @@ const styles = StyleSheet.create({
     gap: SPACING[200],
     alignItems: 'center',
   },
-  track: {
+  trackWrapper: {
     flex: 1,
+  },
+  track: {
     height: 18,
     backgroundColor: COLORS.NEUTRAL_3,
     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

@@ -1,8 +1,15 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
 import { useUnit } from 'effector-react'
-import { FLUENCY_MODES } from '../../fluency.constants'
+import { FLUENCY_MODES } from '../../shared/fluency.constants'
 import { MathOperatorRow } from './MathOperatorRow'
 import { useFluency } from '../../context/FluencyContext'
 import { useText } from '../../../../i18n/i18n'
@@ -10,22 +17,32 @@ import { useText } from '../../../../i18n/i18n'
 export const SelectMathOperator = () => {
   const t = useText()
   const { model, onModeSelectPress } = useFluency()
-  const fluencyMode = useUnit(model.$mode)
+  const fluencyMode = useUnit(model.matrix.$mode)
+  const matrix = useUnit(model.matrix.$data)
 
   return (
     <View style={styles.container}>
-      {FLUENCY_MODES.map(({ mode, label, icon: Icon, select }, index) => {
+      {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={<Icon color={isSelectedMode ? COLORS.NEUTRAL_1 : undefined} />}
-            progress={0}
+            icon={
+              <Typography
+                variant={HeadingVariants.H6}
+                style={[styles.symbol, isSelectedMode && styles.symbolSelected]}
+              >
+                {symbol}
+              </Typography>
+            }
+            progress={progress}
             color={select}
             selected={isSelectedMode}
             onSelect={() => {
-              model.setMode(mode)
+              model.matrix.setMode(mode)
               onModeSelectPress?.(mode)
             }}
             showDivider={index < FLUENCY_MODES.length - 1}
@@ -38,11 +55,19 @@ export const SelectMathOperator = () => {
 
 const styles = StyleSheet.create({
   container: {
+    alignSelf: 'flex-start',
     width: 270,
-    paddingVertical: SPACING[400],
-    paddingHorizontal: SPACING[200],
+    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,
+  },
 })