@magmamath/students-features 0.3.3 → 0.4.0

package/src/features/celebrations/components/ParticleBatch.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect, ComponentType } from 'react'
+import { IconProps } from '@magmamath/react-native-ui'
+import { CELEBRATION_VARIANTS } from '../config'
+import { generateParticle } from '../helpers'
+import { Particle } from './Particle'
+import { CelebrationVariant } from '../types'
+
+export type ParticlesBatch = {
+  id: number
+  type: 'main' | 'spark'
+  angle: number
+  velocity: {
+    x: number
+    y: number
+  }
+  angularAcceleration: number
+  friction: number
+  Component: ComponentType<IconProps>
+  rotation: number
+  rotationSpeed: number
+  size: number
+  life: number
+}
+export type ParticleBatchProps = {
+  containerWidth: number
+  onAnimationEnd: () => void
+  variant: CelebrationVariant
+}
+
+export const ParticleBatch = ({ containerWidth, onAnimationEnd, variant }: ParticleBatchProps) => {
+  const [particles, setParticles] = useState<ParticlesBatch[]>([])
+  const { color } = CELEBRATION_VARIANTS[variant]
+  const xOffset = containerWidth ? containerWidth / 2 : 0
+
+  useEffect(() => {
+    setParticles(generateParticle(variant))
+  }, [])
+
+  return particles.map((p, i) => (
+    <Particle
+      key={p.id}
+      onAnimationEnd={i === 0 ? onAnimationEnd : undefined}
+      initialPreset={{
+        velocity: p.velocity,
+        angularAcceleration: p.angularAcceleration,
+        friction: p.friction,
+        rotationSpeed: p.rotationSpeed,
+        rotation: p.rotation,
+        life: p.life,
+        xOffset,
+      }}
+    >
+      {<p.Component size={p.size} color={color} />}
+    </Particle>
+  ))
+}

package/src/features/celebrations/components/Spark.tsx

@@ -0,0 +1,14 @@
+import { IconProps } from '@magmamath/react-native-ui';
+import React from 'react';
+import { View } from 'react-native';
+
+export const Spark = ({ size = 10, color }: IconProps) => (
+  <View
+    style={{
+      width: size,
+      height: size,
+      backgroundColor: color,
+      borderRadius: size / 2,
+    }}
+  />
+);

package/src/features/celebrations/config.ts

@@ -0,0 +1,199 @@
+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,
+    },
+    life: 65,
+  },
+  [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,
+    },
+    life: 65,
+  },
+  [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,
+    },
+    life: 120,
+  },
+  [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: 180,
+      to: 360,
+    },
+    velocityMultiplier: 1.8,
+    rotation: {
+      from: 0,
+      to: 10,
+    },
+    friction: 0.95,
+    angularAcceleration: {
+      from: -0.05,
+      to: 0.05,
+    },
+    life: 100,
+  },
+  [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: 180,
+      to: 360,
+    },
+    velocityMultiplier: 1.8,
+    rotation: {
+      from: 0,
+      to: 10,
+    },
+    friction: 0.95,
+    angularAcceleration: {
+      from: -0.05,
+      to: 0.05,
+    },
+    life: 100,
+  },
+};

package/src/features/celebrations/helpers.ts

@@ -0,0 +1,96 @@
+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,
+  } = CELEBRATION_VARIANTS[variant];
+
+  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(4, 18);
+    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(4, 18);
+    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

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

package/src/features/celebrations/types.ts

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,48 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { Button, SPACING, COLORS, Typography } from '@magmamath/react-native-ui'
+import { EOAModalContentProps } from '../../types'
+
+export const CheatDetected = ({ 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='red'
+        size='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',
+  },
+})