@magmamath/students-features 0.4.0-rc.0 → 0.4.0

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',
+  },
+})

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

@@ -0,0 +1,46 @@
+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 ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
+  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='primary'
+        colorScheme='purple'
+        size='large'
+        style={{ text: styles.buttonText }}
+        onPress={model.hidePopUpAndLeave}
+      >
+        {textContent.leftButtonText}
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: SPACING[800],
+    alignItems: 'center',
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+  },
+  description: {
+    textAlign: 'center',
+    fontWeight: '700',
+  },
+  buttonText: {
+    textTransform: 'uppercase',
+  },
+})

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

@@ -0,0 +1,102 @@
+import React from 'react'
+import { View, StyleSheet, Platform, Image } from 'react-native'
+import { useUnit } from 'effector-react'
+import {
+  Button,
+  ButtonVariant,
+  COLORS,
+  IS_MOBILE,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+import { ExamSubmitContent } from './ExamSubmitContent'
+import { EOAModalContentProps } from '../../types'
+import { PracticeButton } from '../../ui/PracticeButton'
+
+export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
+  const popUpData = useUnit(model.$popUpData)
+
+  const problemsAmount = popUpData?.stats?.problemsAmount ?? 0
+  const practiceModeEnabled = popUpData?.user.practiceMode
+
+  const leaveAssignmentButtonVariant =
+    !practiceModeEnabled || popUpData?.newerAssignmentAvailable
+      ? ButtonVariant.PRIMARY
+      : ButtonVariant.TERTIARY
+
+  const handlePracticePress = () => {
+    onPracticePress?.()
+    model.hidePopUp()
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.contentBackground}>
+        {IS_MOBILE ? (
+          <Image source={require('./blurred-card.png')} />
+        ) : (
+          <ExamSubmitContent problemsAmount={problemsAmount} />
+        )}
+      </View>
+      <Typography variant="h2" style={styles.title}>
+        {textContent.title}
+      </Typography>
+      <Typography variant="h1" style={styles.description}>
+        {textContent.description}
+      </Typography>
+
+      <View style={styles.buttonsContainer}>
+        <Button
+          variant={leaveAssignmentButtonVariant}
+          size="large"
+          colorScheme={popUpData?.isExam ? 'purple' : 'blue'}
+          style={{ text: { textTransform: 'uppercase' } }}
+          onPress={model.hidePopUpAndLeave}
+        >
+          {textContent.leftButtonText ?? ''}
+        </Button>
+        {!!practiceModeEnabled && !popUpData?.newerAssignmentAvailable && (
+          <PracticeButton onPress={handlePracticePress} text={textContent.rightButtonText} />
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    gap: SPACING[400],
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+    paddingVertical: SPACING[100],
+  },
+  description: {
+    color: COLORS.NEUTRAL_9,
+    textAlign: 'center',
+    fontWeight: 700,
+    paddingTop: SPACING[800],
+    paddingBottom: SPACING[1600],
+  },
+  contentBackground: {
+    position: 'absolute',
+    zIndex: -1,
+    top: '22%',
+    ...(Platform.OS === 'web' && {
+      filter: 'blur(4px)',
+    }),
+  },
+  buttonsContainer: {
+    height: 62,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  buttonText: {
+    textTransform: 'uppercase',
+  },
+})

package/src/features/endOfAssignment/components/ExamSubmit/ExamSubmitContent.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { BORDER_RADIUS, COLORS, CorrectIcon, SPACING, Typography } from '@magmamath/react-native-ui'
+
+type ExamSumitContentProps = {
+  problemsAmount: number
+  description?: string
+}
+
+export const ExamSubmitContent = ({ problemsAmount, description }: ExamSumitContentProps) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.iconContainer}>
+          <CorrectIcon size={70} color={COLORS.NEUTRAL_1} />
+        </View>
+        <View style={styles.textContainer}>
+          <Typography variant="xxl" style={styles.largeText}>
+            {description || '?'}
+          </Typography>
+          <Typography style={styles.text}>/{problemsAmount}</Typography>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    opacity: 0.4,
+    paddingHorizontal: SPACING[100],
+    paddingTop: SPACING[100],
+    paddingBottom: 38,
+    marginBottom: SPACING[800],
+    backgroundColor: COLORS.NEUTRAL_5,
+    borderRadius: BORDER_RADIUS[400],
+  },
+  content: {
+    flexDirection: 'row',
+    borderRadius: BORDER_RADIUS[200],
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[800],
+    backgroundColor: COLORS.NEUTRAL_1,
+    gap: SPACING[500],
+  },
+  iconContainer: {
+    backgroundColor: COLORS.NEUTRAL_5,
+    padding: SPACING[200],
+    borderRadius: 100,
+    height: 70,
+    width: 70,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textContainer: {
+    flexDirection: 'row',
+  },
+  text: {
+    fontWeight: '700',
+    color: COLORS.NEUTRAL_5,
+    alignSelf: 'flex-end',
+  },
+  largeText: {
+    fontSize: 48,
+    fontWeight: '700',
+    lineHeight: 48,
+    color: COLORS.NEUTRAL_5,
+  },
+})

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

@@ -0,0 +1,105 @@
+import React, { ReactNode, useEffect, useState } from 'react'
+import { ButtonVariant, CrossIcon, COLORS, BORDER_RADIUS, SPACING, SHADOWS, Button } from '@magmamath/react-native-ui'
+import {
+  Animated,
+  GestureResponderEvent,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native'
+
+import { ModalModel } from './model'
+import { ModalBackground } from './ModalBackground'
+
+const stopPropagation = {
+  onTouchStart: (event: GestureResponderEvent) => {
+    event.stopPropagation()
+  },
+  onMouseDown: (event: MouseEvent) => {
+    event.stopPropagation()
+  },
+}
+
+export type ModalProps = {
+  isVisible: boolean
+  content: ReactNode
+  isDismissable: boolean
+  onClose?: () => void
+  hideCloseButton?: boolean
+  withBackground?: boolean
+  style?: {
+    overlay?: StyleProp<ViewStyle>
+    container?: StyleProp<ViewStyle>
+    header?: StyleProp<TextStyle> | StyleProp<ViewStyle>
+    content?: StyleProp<TextStyle> | StyleProp<ViewStyle>
+    footer?: StyleProp<ViewStyle>
+    closeButton?: StyleProp<ViewStyle>
+  }
+}
+
+export const Modal = ({ isVisible, isDismissable = true, onClose, style, content, withBackground }: ModalProps) => {
+  const [modalModel] = useState(() => new ModalModel())
+
+  useEffect(() => {
+    if (isVisible) {
+      modalModel.animation.show()
+    }
+  }, [isVisible])
+
+  if (!isVisible) return null
+  return (
+    <TouchableWithoutFeedback onPress={() => isDismissable && onClose?.()}>
+      <Animated.View style={[styles.overlay, style?.overlay, modalModel.animatedStyle]}>
+        <TouchableWithoutFeedback {...stopPropagation}>
+          <View style={[styles.container, style?.container]}>
+            {withBackground && <View style={styles.backgroundWrapper}>{<ModalBackground />}</View>}
+            {isDismissable && (
+              <View style={[styles.closeButton, style?.closeButton]}>
+                <Button
+                  variant={ButtonVariant.TERTIARY}
+                  icon={<CrossIcon size={18} color={COLORS.NEUTRAL_7} />}
+                  onPress={onClose}
+                />
+              </View>
+            )}
+            {content}
+          </View>
+        </TouchableWithoutFeedback>
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    zIndex: 10001,
+  },
+  container: {
+    position: 'relative',
+    justifyContent: 'space-between',
+    backgroundColor: COLORS.NEUTRAL_1,
+    minWidth: 300,
+    maxWidth: 957,
+    borderRadius: BORDER_RADIUS['400'],
+    paddingHorizontal: SPACING['1600'],
+    paddingVertical: SPACING['800'],
+    gap: SPACING['600'],
+    ...SHADOWS['5'],
+  },
+  closeButton: {
+    position: 'absolute',
+    top: SPACING['400'],
+    right: SPACING['400'],
+  },
+  backgroundWrapper: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: -1,
+  },
+})