@magmamath/students-features 0.3.3 → 0.4.0

package/src/features/endOfAssignment/components/CorrectAnswer/AnimatedCard.tsx

@@ -0,0 +1,293 @@
+import React, { memo, useEffect, useRef } from 'react'
+import { View, StyleSheet } from 'react-native'
+
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  withDelay,
+  interpolate,
+  interpolateColor,
+  runOnUI,
+  runOnJS,
+} from 'react-native-reanimated'
+import { SPACING, Typography, COLORS, BORDER_RADIUS, IS_MOBILE } from '@magmamath/react-native-ui'
+
+import { GoodDrawingSparks } from './GoodDrawingSparks'
+import { CorrectAnswerSparks } from './CorrectAnswerSparks'
+import { EOABadge } from '../../ui/EOABadge'
+import { SparkIcon } from '../../ui/SparkIcon'
+
+import { AnimatedCardVariant, EOAModalText } from '../../types'
+import {
+  ANIMATION_DELAYS,
+  BADGE_PARAMS,
+  CARD_DIMENSIONS,
+  OPACITY,
+  SPRING_CONFIG,
+  SPRING_CONFIG_STEP_3,
+  VARIANT_COLORS,
+} from '../../constants'
+import { CelebrationsRef, CelebrationVariant } from '../../../celebrations/types'
+import { Celebrations } from '../../../celebrations/components/Celebrations'
+
+type AnimatedCardProps = {
+  variant: AnimatedCardVariant
+  textContent: EOAModalText
+  shouldTriggerSparkles: boolean
+  solvedAmount?: number
+  problemsAmount?: number
+  gbdAmount?: number
+  delay?: number
+  onAnimationEnd?: () => void
+}
+
+export const AnimatedCard = memo(
+  ({
+    variant,
+    textContent,
+    shouldTriggerSparkles,
+    solvedAmount = 0,
+    problemsAmount = 0,
+    gbdAmount = 0,
+    delay = 0,
+    onAnimationEnd,
+  }: AnimatedCardProps) => {
+    const celebrationsRef = useRef<CelebrationsRef>(null)
+
+    const cardOpacity = useSharedValue(OPACITY.initial)
+    const cardWidth = useSharedValue(CARD_DIMENSIONS.initialWidth)
+    const badgeTranslateX = useSharedValue(BADGE_PARAMS.initialTranslateX)
+    const badgeRotation = useSharedValue(BADGE_PARAMS.initialRotation)
+    const badgeScale = useSharedValue(BADGE_PARAMS.initialScale)
+    const statsOpacity = useSharedValue(OPACITY.initial)
+    const delaySv = useSharedValue(0)
+
+    const animatedCardStyle = useAnimatedStyle(() => {
+      const progress = interpolate(
+        statsOpacity.value,
+        [OPACITY.initial, OPACITY.final],
+        [OPACITY.initial, OPACITY.final],
+      )
+      const backgroundColor = interpolateColor(
+        progress,
+        [OPACITY.initial, OPACITY.final],
+        [VARIANT_COLORS[variant].initial, VARIANT_COLORS[variant].final],
+      )
+      const height = interpolate(
+        cardWidth.value,
+        [CARD_DIMENSIONS.initialWidth, CARD_DIMENSIONS.finalWidth],
+        [CARD_DIMENSIONS.initialHeight, CARD_DIMENSIONS.finalHeight],
+      )
+      return {
+        opacity: cardOpacity.value,
+        width: cardWidth.value,
+        height,
+        backgroundColor,
+      }
+    }, [statsOpacity, cardOpacity, cardWidth])
+
+    const animatedBadgeStyle = useAnimatedStyle(
+      () => ({
+        transform: [
+          { translateX: badgeTranslateX.value },
+          { rotate: `${badgeRotation.value}deg` },
+          { scale: badgeScale.value },
+        ],
+      }),
+      [badgeTranslateX, badgeRotation, badgeScale],
+    )
+
+    const animatedStatsStyle = useAnimatedStyle(() => {
+      return {
+        opacity: statsOpacity.value,
+      }
+    }, [statsOpacity])
+
+    const statsSubtitle = (() => {
+      if (variant === AnimatedCardVariant.CORRECT_ANSWER) {
+        if (solvedAmount > 1) {
+          return textContent.stats?.correctAnswersPlural
+        }
+        return textContent.stats?.correctAnswers
+      } else {
+        if (gbdAmount > 1) {
+          return textContent.stats?.goodCalculationsPlural
+        }
+        return textContent.stats?.goodCalculations
+      }
+    })()
+
+    const runCelebration = () => {
+      if (variant === AnimatedCardVariant.CORRECT_ANSWER) {
+        celebrationsRef.current?.play(CelebrationVariant.CORRECT_FINISH_ASSIGNMENT)
+      } else {
+        celebrationsRef.current?.play(CelebrationVariant.GBD_FINISH_ASSIGNMENT)
+      }
+
+      onAnimationEnd?.()
+    }
+
+    useEffect(() => {
+      runOnUI(() => {
+        'worklet'
+        const step3 = () => {
+          badgeTranslateX.value = withSpring(BADGE_PARAMS.finalTranslateX, SPRING_CONFIG_STEP_3)
+          statsOpacity.value = withDelay(80, withSpring(OPACITY.final, SPRING_CONFIG_STEP_3))
+        }
+
+        const step2 = () => {
+          badgeTranslateX.value = withSpring(BADGE_PARAMS.intermediateTranslateX, SPRING_CONFIG)
+          cardWidth.value = withSpring(CARD_DIMENSIONS.finalWidth, SPRING_CONFIG)
+          badgeRotation.value = withSpring(0, SPRING_CONFIG)
+          badgeScale.value = withSpring(1, SPRING_CONFIG, () => {
+            delaySv.value = withTiming(1, { duration: ANIMATION_DELAYS.step3 }, () => {
+              step3()
+
+              delaySv.value = withTiming(0, { duration: 100 }, (finished) => {
+                if (finished) {
+                  runOnJS(runCelebration)()
+                }
+              })
+            })
+          })
+        }
+
+        const step1 = () => {
+          cardOpacity.value = withDelay(
+            delay,
+            withSpring(OPACITY.final, SPRING_CONFIG, () => {
+              step2()
+            }),
+          )
+        }
+
+        step1()
+      })()
+    }, [])
+
+    return (
+      <Animated.View style={styles.cardContainer}>
+        {variant === AnimatedCardVariant.CORRECT_ANSWER ? (
+          <CorrectAnswerSparks
+            color={COLORS.GREEN_3}
+            shouldStartAnimation={shouldTriggerSparkles}
+          />
+        ) : (
+          <GoodDrawingSparks color={COLORS.ORANGE_3} shouldStartAnimation={shouldTriggerSparkles} />
+        )}
+        <Celebrations modelRef={celebrationsRef} style={styles.celebrations} />
+
+        <Animated.View style={[styles.card, animatedCardStyle]}>
+          <Animated.View style={styles.cardContent}>
+            <Animated.View style={[styles.badgeContainer, animatedBadgeStyle]}>
+              <EOABadge
+                variant={variant}
+                color={VARIANT_COLORS[variant].primary}
+                size={88}
+                iconSize={56}
+              />
+            </Animated.View>
+
+            <Animated.View style={[styles.statsWrapper, animatedStatsStyle]}>
+              {variant === AnimatedCardVariant.GOOD_DRAWING && (
+                <View style={styles.starContainer}>
+                  <SparkIcon size={20} color={VARIANT_COLORS[variant].initial} />
+                  <View style={styles.starCircle} />
+                  <SparkIcon size={12} color={VARIANT_COLORS[variant].initial} />
+                </View>
+              )}
+
+              <View style={styles.statsValueContainer}>
+                <Typography
+                  variant="h1"
+                  style={[styles.largeText, { color: VARIANT_COLORS[variant].primary }]}
+                >
+                  {variant === AnimatedCardVariant.CORRECT_ANSWER ? solvedAmount : gbdAmount}
+                </Typography>
+                {variant === AnimatedCardVariant.CORRECT_ANSWER && (
+                  <Typography variant="h5" style={styles.smallText}>
+                    /{problemsAmount}
+                  </Typography>
+                )}
+              </View>
+
+              <Typography variant="h3" style={styles.cardTitle}>
+                {statsSubtitle}
+              </Typography>
+            </Animated.View>
+          </Animated.View>
+        </Animated.View>
+      </Animated.View>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    height: CARD_DIMENSIONS.finalHeight,
+    width: CARD_DIMENSIONS.finalWidth,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  card: {
+    padding: SPACING[200],
+    borderRadius: SPACING[400],
+  },
+  cardContent: {
+    flex: 1,
+    gap: SPACING[100],
+    borderRadius: BORDER_RADIUS[200],
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  badgeContainer: {
+    borderRadius: BORDER_RADIUS[400],
+    marginRight: 50,
+  },
+  statsWrapper: {
+    padding: SPACING[100],
+    gap: SPACING[100],
+  },
+  statsValueContainer: {
+    flexDirection: 'row',
+    height: IS_MOBILE ? 42 : 'auto',
+    paddingHorizontal: SPACING[100],
+    marginVertical: SPACING[100],
+  },
+  largeText: {
+    textAlign: 'center',
+    textAlignVertical: 'bottom',
+    fontSize: IS_MOBILE ? 56 : 60,
+    fontWeight: '700',
+    lineHeight: IS_MOBILE ? 54 : 46,
+  },
+  smallText: {
+    fontSize: 16,
+    fontWeight: '700',
+    lineHeight: 16,
+    color: COLORS.NEUTRAL_6,
+    alignSelf: 'flex-end',
+  },
+  cardTitle: {
+    color: COLORS.NEUTRAL_7,
+    padding: SPACING[100],
+  },
+  starContainer: {
+    position: 'absolute',
+    left: 55,
+    top: 10,
+  },
+  starCircle: {
+    width: 4,
+    height: 4,
+    borderRadius: 5,
+    backgroundColor: COLORS.ORANGE_2,
+  },
+  celebrations: {
+    top: 0,
+    zIndex: 100000,
+  },
+})

package/src/features/endOfAssignment/components/CorrectAnswer/CorrectAnswer.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback, useState } from 'react'
+import { View, StyleSheet } from 'react-native'
+
+import { useUnit } from 'effector-react'
+import { SPACING, Typography, COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+
+import { AnimatedCard } from './AnimatedCard'
+
+import { PracticeButtonGroup } from '../../ui/PracticeButtonGroup'
+import { GOOD_DRAWING_CARD_APPEARENCE_DELAY } from '../../constants'
+import { AnimatedCardVariant, EOAModalContentProps, EOAModalVariant } from '../../types'
+
+export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
+  const popUpData = useUnit(model.$popUpData)
+  const modalVariant = useUnit(model.$modalVariant)
+  const [cardsAnimationCompleted, setCardsAnimationCompleted] = useState(false)
+
+  const { user, stats, hasRecommendations, isExam, newerAssignmentAvailable } = popUpData ?? {}
+  const { solvedAmount, problemsAmount, goodDrawingAmount } = stats ?? {}
+
+  const isPracticeButtonVisible = !!(
+    user?.practiceMode &&
+    !newerAssignmentAvailable &&
+    (isExam || hasRecommendations)
+  )
+
+  const handlePracticePress = () => {
+    onPracticePress?.()
+    model.hidePopUp()
+  }
+
+  const onCorrectAnswerAnimationEnd = useCallback(() => {
+    if (goodDrawingAmount === 0) {
+      setCardsAnimationCompleted(true)
+    }
+  }, [])
+
+  const onGBDAnimationEnd = useCallback(() => {
+    setCardsAnimationCompleted(true)
+  }, [])
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        modalVariant !== EOAModalVariant.HAS_GOOD_DRAWING && { alignItems: 'center' },
+      ]}
+    >
+      <View style={styles.header}>
+        <Typography variant="large" style={styles.title}>
+          {textContent?.title}
+        </Typography>
+        <Typography variant="h4" style={styles.subtitle}>
+          {`${textContent?.subtitle} ${user?.firstName}!`}
+        </Typography>
+      </View>
+
+      <View style={styles.animationContainer}>
+        <AnimatedCard
+          variant={AnimatedCardVariant.CORRECT_ANSWER}
+          textContent={textContent}
+          solvedAmount={solvedAmount}
+          problemsAmount={problemsAmount}
+          shouldTriggerSparkles={cardsAnimationCompleted}
+          onAnimationEnd={onCorrectAnswerAnimationEnd}
+        />
+
+        {modalVariant === EOAModalVariant.HAS_GOOD_DRAWING && (
+          <AnimatedCard
+            variant={AnimatedCardVariant.GOOD_DRAWING}
+            textContent={textContent}
+            gbdAmount={goodDrawingAmount}
+            shouldTriggerSparkles={cardsAnimationCompleted}
+            onAnimationEnd={onGBDAnimationEnd}
+            delay={GOOD_DRAWING_CARD_APPEARENCE_DELAY}
+          />
+        )}
+      </View>
+
+      <PracticeButtonGroup
+        textContent={textContent}
+        isPracticeButtonVisible={isPracticeButtonVisible}
+        isExam={isExam}
+        onLeftButtonPress={model.hidePopUpAndLeave}
+        onRightButtonPress={handlePracticePress}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    gap: SPACING[400],
+  },
+  header: {
+    gap: SPACING[100],
+    alignItems: 'center',
+  },
+  title: {
+    fontWeight: '900',
+    lineHeight: 54,
+    fontSize: 36,
+    paddingVertical: SPACING[100],
+    color: COLORS.NEUTRAL_9,
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  subtitle: {
+    color: COLORS.NEUTRAL_7,
+    paddingVertical: SPACING[100],
+    lineHeight: 25,
+  },
+  animationContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: SPACING[800],
+    paddingTop: SPACING[800],
+    paddingBottom: SPACING[1600],
+  },
+  buttonsContainer: {
+    height: 62,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+    paddingVertical: SPACING[300],
+  },
+})

package/src/features/endOfAssignment/components/CorrectAnswer/CorrectAnswerSparks.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { Spark } from './Spark'
+import { SPARKS_ANIMATION_DELAY } from '../../constants'
+
+type CorrectAnswerProps = {
+  shouldStartAnimation: boolean
+  color: string
+}
+
+const CA_SPARKS_MAP = [
+  { id: '1', x: 22, y: 20, size: 14, initialDelay: SPARKS_ANIMATION_DELAY * 1.3 },
+  { id: '2', x: 128, y: 127, size: 21, initialDelay: SPARKS_ANIMATION_DELAY * 1.14 },
+  { id: '3', x: 268, y: 44, size: 28, initialDelay: SPARKS_ANIMATION_DELAY * 1.4 },
+]
+
+export const CorrectAnswerSparks = ({ color, shouldStartAnimation }: CorrectAnswerProps) => {
+  if (!shouldStartAnimation) {
+    return null
+  }
+
+  return (
+    <View style={styles.container}>
+      {CA_SPARKS_MAP.map((star) => (
+        <Spark key={star.id} color={color} {...star} />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 110,
+    width: '100%',
+    height: '100%',
+  },
+})

package/src/features/endOfAssignment/components/CorrectAnswer/GoodDrawingSparks.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Spark } from './Spark'
+import { SPARKS_ANIMATION_DELAY } from '../../constants'
+
+const GD_SPARKS_MAP = [
+  { id: '1', x: 20, y: 135.5, size: 14, initialDelay: SPARKS_ANIMATION_DELAY * 1.25 },
+  { id: '2', x: 25, y: 19.5, size: 21, initialDelay: SPARKS_ANIMATION_DELAY },
+  { id: '3', x: 115, y: 132, size: 28, initialDelay: SPARKS_ANIMATION_DELAY * 1.1 },
+  { id: '4', x: 315, y: 42, size: 14, initialDelay: SPARKS_ANIMATION_DELAY * 1.31 },
+  { id: '5', x: 326, y: 24.5, size: 21, initialDelay: SPARKS_ANIMATION_DELAY * 1.36 },
+]
+
+type GoodDrawingSparksProps = {
+  shouldStartAnimation: boolean
+  color: string
+}
+
+export const GoodDrawingSparks = ({ color, shouldStartAnimation }: GoodDrawingSparksProps) => {
+  if (!shouldStartAnimation) {
+    return null
+  }
+
+  return (
+    <View style={styles.container}>
+      {GD_SPARKS_MAP.map((star) => (
+        <Spark key={star.id} color={color} {...star} />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 110,
+    width: '100%',
+    height: '100%',
+  },
+})

package/src/features/endOfAssignment/components/CorrectAnswer/Spark.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
+import { SparkIcon } from '../../ui/SparkIcon'
+import { useSparkAnimation } from '../../hooks/useSparkAnimation'
+import Animated from 'react-native-reanimated'
+
+type SparkProps = {
+  id: string
+  x: number
+  y: number
+  size: number
+  color: string
+  initialDelay: number
+}
+
+const SPARKS_SPRING_CONFIG = {
+  mass: 1.8,
+  damping: 25,
+  stiffness: 293,
+  overshootClamping: false,
+  restDisplacementThreshold: 0.01,
+  restSpeedThreshold: 2,
+}
+
+const HOLD_DELAY = 800
+const ROTATION_ANGLE = 90
+
+export const Spark = ({ id, x, y, size, initialDelay = 350, color = COLORS.GREEN_3 }: SparkProps) => {
+  const { animatedStyle } = useSparkAnimation({
+    id,
+    initialDelay,
+    rotationAngle: ROTATION_ANGLE,
+    holdDelay: HOLD_DELAY,
+    springConfig: SPARKS_SPRING_CONFIG,
+    x,
+    y,
+    size,
+  })
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <SparkIcon size={size} color={color} />
+    </Animated.View>
+  )
+}

package/src/features/endOfAssignment/components/EOAModal.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { useUnit } from 'effector-react'
+
+import { EOAModel } from '../model/model'
+import { EOAEventType, EOAModalText, EOAModalVariant } from '../types'
+
+import { Modal } from './Modal/Modal'
+
+import { NoAnswer } from './NoAnswer/NoAnswer'
+import { CheatDetected } from './CheatDetected/CheatDetected'
+import { CorrectAnswer } from './CorrectAnswer/CorrectAnswer'
+import { ExamLeave } from './ExamLeave/ExamLeave'
+import { ExamPaused } from './ExamPaused/ExamPaused'
+import { ExamSubmit } from './ExamSubmit/ExamSubmit'
+
+import { getModalContainerSize, shouldDisplayModalBackground } from '../helpers'
+
+const MODAL_CONTENT_VARIANTS_MAP = new Map([
+  [EOAModalVariant.NO_CORRECT_ANSWERS, NoAnswer],
+  [EOAModalVariant.HAS_CORRECT_ANSWERS, CorrectAnswer],
+  [EOAModalVariant.HAS_GOOD_DRAWING, CorrectAnswer],
+  [EOAModalVariant.EXAM_FINISHED_NO_CORRECT_ANSWERS, NoAnswer],
+  [EOAModalVariant.EXAM_FINISHED_HAS_CORRECT_ANSWERS, CorrectAnswer],
+  [EOAModalVariant.EXAM_SAFE_MODE_SUBMIT, ExamSubmit],
+  [EOAModalVariant.EXAM_SUBMIT, ExamSubmit],
+  [EOAModalVariant.EXAM_PAUSED, ExamPaused],
+  [EOAModalVariant.EXAM_SAFE_MODE_CHEAT_DETECTED, CheatDetected],
+  [EOAModalVariant.EXAM_SAFE_MODE_LEAVE, ExamLeave],
+])
+
+type EOAModalProps = {
+  model: EOAModel
+  textContent: EOAModalText
+  onPracticePress: () => void
+}
+
+export const EOAModal = ({ model, textContent, onPracticePress }: EOAModalProps) => {
+  const popUpData = useUnit(model.$popUpData)
+  const modalVariant = useUnit(model.$modalVariant)
+
+  if (!popUpData || !modalVariant) return null
+
+  const withBackground = shouldDisplayModalBackground(modalVariant)
+  const isDismissable =
+    popUpData.eventType !== EOAEventType.CHEAT_DETECTED &&
+    popUpData.eventType !== EOAEventType.EXAM_PAUSED
+
+  const ModalContent = MODAL_CONTENT_VARIANTS_MAP.get(modalVariant)
+
+  if (!ModalContent) return null
+
+  return (
+    <Modal
+      isVisible={true}
+      isDismissable={isDismissable}
+      style={getModalContainerSize(modalVariant)}
+      onClose={model.hidePopUp}
+      content={
+        <ModalContent model={model} textContent={textContent} onPracticePress={onPracticePress} />
+      }
+      withBackground={withBackground}
+    />
+  )
+}

package/src/features/endOfAssignment/components/ExamLeave/ExamLeave.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { Button, COLORS, SPACING, Typography } from '@magmamath/react-native-ui'
+
+import { EOAModalContentProps } from '../../types'
+
+export const ExamLeave = ({ textContent, model }: EOAModalContentProps) => {
+  const handleDismiss = () => model.hidePopUp()
+
+  return (
+    <View style={styles.container}>
+      <Typography variant='h1' style={styles.description}>
+        {textContent.description}
+      </Typography>
+
+      <View style={styles.buttonsContainer}>
+        <Button variant='tertiary' size='large' style={{ text: styles.buttonText }} onPress={handleDismiss}>
+          {textContent.leftButtonText}
+        </Button>
+
+        <Button
+          variant='primary'
+          colorScheme='red'
+          size='large'
+          style={{ text: styles.buttonText }}
+          onPress={model.hidePopUpAndLeave}
+        >
+          {textContent.rightButtonText}
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    gap: SPACING[800],
+    paddingTop: SPACING[800],
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  description: {
+    textAlign: 'center',
+    fontWeight: '700',
+    color: COLORS.NEUTRAL_9,
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  buttonText: {
+    textTransform: 'uppercase',
+  },
+})