@magmamath/students-features 0.4.4 → 0.5.0-rc.0

package/src/features/celebrations/config.ts

@@ -1,224 +0,0 @@
-import StarIcon from '../../shared/icons/Star'
-import HalloweenIcon from '../../shared/icons/Halloween'
-import PiIcon from '../../shared/icons/Pi'
-import WinterIcon from '../../shared/icons/Winter'
-import ValentineIcon from '../../shared/icons/Valentine'
-import { COLORS } from '@magmamath/react-native-ui'
-import { CelebrationVariant } from './types'
-
-export const CELEBRATION_ICON_CONFIG = [
-  {
-    name: 'default',
-    Icon: StarIcon,
-  },
-  {
-    name: 'pi-day',
-    Icon: PiIcon,
-    activePeriod: {
-      start: '14-03',
-      end: '14-03',
-    },
-  },
-  {
-    name: 'valentine',
-    Icon: ValentineIcon,
-    activePeriod: {
-      start: '07-02',
-      end: '15-02',
-    },
-  },
-  {
-    name: 'halloween',
-    Icon: HalloweenIcon,
-    activePeriod: {
-      start: '20-10',
-      end: '01-11',
-    },
-  },
-  {
-    name: 'winter',
-    Icon: WinterIcon,
-    activePeriod: {
-      start: '01-12',
-      end: '07-01',
-    },
-  },
-]
-
-export const CELEBRATION_VARIANTS = {
-  [CelebrationVariant.FIRST_ATTEMPT]: {
-    color: COLORS.PRIMARY_GREEN,
-    elementsCount: {
-      star: 5,
-      spark: 4,
-    },
-    sparkSize: {
-      from: 4,
-      to: 9,
-    },
-    mainSize: {
-      from: 14,
-      to: 20,
-    },
-    angle: {
-      from: 230,
-      to: 280,
-    },
-    velocityMultiplier: 1,
-    rotation: {
-      from: 0,
-      to: 10,
-    },
-    friction: 0.907,
-    angularAcceleration: {
-      from: -0.05,
-      to: 0.05,
-    },
-    speedRange: {
-      spark: [4, 18],
-      main: [4, 18],
-    },
-    life: 65,
-    gravity: 0,
-  },
-  [CelebrationVariant.CORRECT]: {
-    color: COLORS.PRIMARY_YELLOW,
-    elementsCount: {
-      star: 4,
-      spark: 3,
-    },
-    sparkSize: {
-      from: 4,
-      to: 9,
-    },
-    mainSize: {
-      from: 14,
-      to: 20,
-    },
-    angle: {
-      from: 235,
-      to: 270,
-    },
-    velocityMultiplier: 1,
-    rotation: {
-      from: 0,
-      to: 10,
-    },
-    friction: 0.907,
-    angularAcceleration: {
-      from: -0.05,
-      to: 0.05,
-    },
-    speedRange: {
-      spark: [4, 18],
-      main: [4, 18],
-    },
-    life: 65,
-    gravity: 0,
-  },
-  [CelebrationVariant.GBD]: {
-    color: COLORS.PRIMARY_ORANGE,
-    elementsCount: {
-      star: 14,
-      spark: 12,
-    },
-    sparkSize: {
-      from: 6,
-      to: 12,
-    },
-    mainSize: {
-      from: 33,
-      to: 44,
-    },
-    angle: {
-      from: 30,
-      to: 330,
-    },
-    velocityMultiplier: 2,
-    rotation: {
-      from: 5,
-      to: 10,
-    },
-    friction: 0.925,
-    angularAcceleration: {
-      from: -0.03,
-      to: 0.03,
-    },
-    speedRange: {
-      spark: [4, 18],
-      main: [4, 18],
-    },
-    life: 120,
-    gravity: 0,
-  },
-  [CelebrationVariant.GBD_FINISH_ASSIGNMENT]: {
-    color: COLORS.PRIMARY_ORANGE,
-    elementsCount: {
-      star: 20,
-      spark: 16,
-    },
-    sparkSize: {
-      from: 4,
-      to: 16,
-    },
-    mainSize: {
-      from: 16,
-      to: 32,
-    },
-    angle: {
-      from: 220,
-      to: 320,
-    },
-    velocityMultiplier: 2,
-    rotation: {
-      from: 0,
-      to: 10,
-    },
-    friction: 0.95,
-    angularAcceleration: {
-      from: -0.02,
-      to: 0.02,
-    },
-    speedRange: {
-      spark: [14, 28],
-      main: [6, 18],
-    },
-    life: 100,
-    gravity: 0.19,
-  },
-  [CelebrationVariant.CORRECT_FINISH_ASSIGNMENT]: {
-    color: COLORS.PRIMARY_GREEN,
-    elementsCount: {
-      star: 20,
-      spark: 16,
-    },
-    sparkSize: {
-      from: 4,
-      to: 16,
-    },
-    mainSize: {
-      from: 16,
-      to: 32,
-    },
-    angle: {
-      from: 220,
-      to: 320,
-    },
-    velocityMultiplier: 2,
-    rotation: {
-      from: 0,
-      to: 10,
-    },
-    friction: 0.95,
-    angularAcceleration: {
-      from: -0.02,
-      to: 0.02,
-    },
-    speedRange: {
-      spark: [14, 28],
-      main: [6, 18],
-    },
-    life: 100,
-    gravity: 0.19,
-  },
-}

package/src/features/celebrations/helpers.ts

@@ -1,103 +0,0 @@
-import { ParticlesBatch } from './components/ParticleBatch';
-import { Spark } from './components/Spark';
-import { CELEBRATION_ICON_CONFIG, CELEBRATION_VARIANTS } from './config';
-import { CelebrationVariant } from './types';
-
-export const randomRange = (min: number, max: number) => Math.random() * (max - min) + min;
-
-const isDateInRange = (currentDate: Date, startDateStr: string, endDateStr: string) => {
-  const [startDay, startMonth] = startDateStr.split('-').map(Number);
-  const [endDay, endMonth] = endDateStr.split('-').map(Number);
-
-  const currentYear = currentDate.getFullYear();
-  const startDate = new Date(currentYear, startMonth - 1, startDay);
-  const endDate = new Date(currentYear, endMonth - 1, endDay + 1);
-
-  return currentDate >= startDate && currentDate <= endDate;
-};
-
-export const getIconForCurrentDate = () => {
-  const currentDate = new Date();
-
-  for (const celebration of CELEBRATION_ICON_CONFIG) {
-    if (celebration.activePeriod) {
-      const { start, end } = celebration.activePeriod;
-      if (isDateInRange(currentDate, start, end)) {
-        return celebration.Icon;
-      }
-    }
-  }
-
-  return CELEBRATION_ICON_CONFIG[0].Icon;
-};
-
-const MainIcon = getIconForCurrentDate();
-export const generateParticle = (variant: CelebrationVariant
-) => {
-  const {
-    elementsCount,
-    angle,
-    rotation,
-    sparkSize,
-    mainSize,
-    velocityMultiplier,
-    friction,
-    life,
-    angularAcceleration,
-    speedRange
-  } = CELEBRATION_VARIANTS[variant];
-
-  const sparkSpeedMin = speedRange?.spark?.[0]
-  const sparkSpeedMax = speedRange?.spark?.[1]
-  const mainSpeedMin = speedRange?.main?.[0]
-  const mainSpeedMax = speedRange?.main?.[1]
-
-  const particles: ParticlesBatch[] = [];
-
-  for (let i = 0; i < elementsCount.spark; i++) {
-    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180);
-    const randomSpeed = randomRange(sparkSpeedMin, sparkSpeedMax);
-    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to);
-
-    particles.push({
-      id: Math.random(),
-      size: randomRange(sparkSize.from, sparkSize.to),
-      type: 'spark',
-      angle: randomAngle,
-      velocity: {
-        x: Math.cos(randomAngle) * randomSpeed * velocityMultiplier,
-        y: Math.sin(randomAngle) * randomSpeed,
-      },
-      rotation: 0,
-      rotationSpeed: 0,
-      angularAcceleration: randomAngularAcceleration,
-      friction,
-      Component: Spark,
-      life,
-    });
-  }
-  for (let i = 0; i < elementsCount.star; i++) {
-    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180);
-    const randomSpeed = randomRange(mainSpeedMin, mainSpeedMax);
-    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to);
-
-    particles.push({
-      id: Math.random(),
-      size: randomRange(mainSize.from, mainSize.to),
-      type: 'main',
-      angle: randomAngle,
-      velocity: {
-        x: Math.cos(randomAngle) * randomSpeed * velocityMultiplier,
-        y: Math.sin(randomAngle) * randomSpeed,
-      },
-      rotation: randomRange(rotation.from, rotation.to),
-      rotationSpeed: randomRange(-2, 2),
-      angularAcceleration: randomAngularAcceleration,
-      friction,
-      Component: MainIcon,
-      life,
-    });
-  }
-
-  return particles;
-};

package/src/features/celebrations/index.ts

@@ -1,2 +0,0 @@
-export { Celebrations } from './components/Celebrations'
-export * from './types'

package/src/features/celebrations/types.ts

@@ -1,11 +0,0 @@
-export enum CelebrationVariant {
-  FIRST_ATTEMPT = 'firstAttempt',
-  CORRECT = 'correct',
-  GBD = 'gbd',
-  CORRECT_FINISH_ASSIGNMENT = 'correctFinishAssignment',
-  GBD_FINISH_ASSIGNMENT = 'gbdFinishAssignment',
-}
-
-export type CelebrationsRef = {
-  play: (variant: CelebrationVariant) => void;
-} | null;

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

@@ -1,65 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import {
-  Button,
-  SPACING,
-  COLORS,
-  Typography,
-  ButtonVariant,
-  ButtonColor,
-  ButtonSize,
-} from '@magmamath/react-native-ui'
-
-import { EOAModalContentProps } from '../../types'
-import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
-import { KeyboardKeys } from '../../../../lib/constants'
-
-export const CheatDetected = ({ textContent, model }: EOAModalContentProps) => {
-  useKeyBoard((event) => {
-    if (event.key === KeyboardKeys.ENTER) {
-      model.hidePopUpAndLeave()
-    }
-  })
-
-  return (
-    <View style={styles.container}>
-      <Typography variant="h2" style={styles.title}>
-        {textContent.title}
-      </Typography>
-
-      <Typography variant="h1" style={styles.description}>
-        {textContent.description}
-      </Typography>
-
-      <Button
-        variant={ButtonVariant.PRIMARY}
-        colorScheme={ButtonColor.RED}
-        size={ButtonSize.LARGE}
-        style={{ text: styles.buttonText }}
-        onPress={model.hidePopUpAndLeave}
-      >
-        {textContent.leftButtonText}
-      </Button>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    gap: SPACING[800],
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  title: {
-    color: COLORS.NEUTRAL_9,
-  },
-  description: {
-    color: COLORS.NEUTRAL_9,
-    textAlign: 'center',
-    fontWeight: '700',
-  },
-  buttonText: {
-    textTransform: 'uppercase',
-  },
-})

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

@@ -1,298 +0,0 @@
-import React, { memo, useEffect, useRef } from 'react'
-import { View, StyleSheet, Text } 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 starOffsetLeft = gbdAmount > 9 ? 70 : 55
-
-    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, { left: starOffsetLeft }]}>
-                  <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}>
-                    <Text style={styles.slash}>{'/'}</Text>
-                    {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,
-  },
-  slash: {
-    paddingRight: 1,
-  },
-  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',
-    top: 10,
-  },
-  starCircle: {
-    width: 4,
-    height: 4,
-    borderRadius: 5,
-    backgroundColor: COLORS.ORANGE_2,
-  },
-  celebrations: {
-    top: 0,
-    zIndex: 100000,
-  },
-})