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

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

@@ -0,0 +1,99 @@
+import React from 'react'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  useAnimatedReaction,
+  runOnJS,
+} from 'react-native-reanimated'
+import { StyleSheet } from 'react-native'
+
+export type ParticleProps = {
+  onAnimationEnd?: () => void
+  children: React.ReactElement
+  initialPreset: {
+    xOffset: number
+    rotation: number
+    rotationSpeed: number
+    velocity: {
+      x: number
+      y: number
+    }
+    angularAcceleration: number
+    friction: number
+    life: number
+  }
+}
+
+export const Particle = ({
+  onAnimationEnd,
+  children,
+  initialPreset: {
+    xOffset,
+    velocity,
+    rotationSpeed,
+    rotation,
+    angularAcceleration,
+    friction,
+    life,
+  },
+}: ParticleProps) => {
+  const particleState = useSharedValue({
+    x: 0,
+    y: 0,
+    opacity: 1,
+    rotation,
+    velocity: { x: velocity.x, y: velocity.y },
+    life,
+  })
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      left: particleState.value.x + xOffset,
+      top: particleState.value.y,
+      opacity: particleState.value.opacity,
+      transform: [{ rotate: `${(particleState.value.rotation * Math.PI) / 180}rad` }],
+    }
+  }, [particleState])
+
+  const animationFinished = () => {
+    onAnimationEnd?.()
+  }
+
+  useAnimatedReaction(
+    () => particleState.value,
+    (state) => {
+      const newVelocity = {
+        x: state.velocity.x * friction,
+        y: state.velocity.y * friction,
+      }
+
+      const currentSpeed = Math.sqrt(newVelocity.x ** 2 + newVelocity.y ** 2)
+      const angle = Math.atan2(newVelocity.y, newVelocity.x)
+      const newAngle = angle + angularAcceleration
+      newVelocity.x = Math.cos(newAngle) * currentSpeed
+      newVelocity.y = Math.sin(newAngle) * currentSpeed
+
+      particleState.value = {
+        x: state.x + newVelocity.x,
+        y: state.y + newVelocity.y,
+        opacity: state.life / (life / 2),
+        rotation: state.rotation + rotationSpeed,
+        velocity: newVelocity,
+        life: state.life - 1,
+      }
+
+      if (state.opacity <= 0) {
+        runOnJS(animationFinished)()
+      }
+    },
+    [particleState],
+  )
+
+  return <Animated.View style={[styles.icon, animatedStyle]}>{children}</Animated.View>
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    position: 'absolute',
+  },
+})

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/chatbot/components/ChatMessage/ChatMessage.tsx

@@ -13,7 +13,6 @@ type ChatMessageProps = {
   withTextToSpeech?: boolean
   audioStatus: AudioStatus
   renderer?: (props: ChatbotRenderer) => ReactNode
-  withErrorSpotting?: boolean
 }
 
 export type VariantProps = Omit<ChatMessageProps, 'variant'>

package/src/features/chatbot/components/ChatMessage/ReceivedMessage.tsx

@@ -4,7 +4,6 @@ import { VariantProps } from './ChatMessage'
 import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
 import { MessageTextToSpeech } from './MessageTextToSpeech'
 import { MessageVariant } from '../../types/model.types'
-import { ErrorSpottingButton } from '../../errorSpotting/ErrorSpottingButton'
 
 export const ReceivedMessage = ({
   message,
@@ -14,7 +13,6 @@ export const ReceivedMessage = ({
   audioStatus,
   renderer,
   withTextToSpeech = true,
-  withErrorSpotting,
 }: VariantProps) => (
   <View style={styles.container}>
     <View style={styles.icon}>
@@ -26,7 +24,6 @@ export const ReceivedMessage = ({
         {renderer
           ? renderer({ message, variant: MessageVariant.RECEIVED, withTextToSpeech })
           : message}
-        {!!withErrorSpotting && <ErrorSpottingButton />}
       </Text>
       {withTextToSpeech && (
         <MessageTextToSpeech

package/src/features/chatbot/components/ChatMessages/ChatbotMessages.tsx

@@ -7,7 +7,6 @@ import { MessageLoader } from '../ChatMessage/MessageLoader'
 import { Alternatives } from '../Alternatives/Alternatives'
 import { AUDIO_CONFIG, DEFAULT_VOICE, TEXT_TO_SPEECH_CONFIG } from '../../constants'
 import { MessageVariant, ChatbotRenderer } from '../../types/model.types'
-import { ConversationMessage } from '../../types/units.types'
 
 type ChatbotMessagesProps = {
   model: ChatbotModel
@@ -27,16 +26,6 @@ const BOTTOM_OFFSET = Platform.select({
   default: 294,
 })
 
-function findListReceivedMessage(messages: ConversationMessage[]) {
-  let i = messages.length - 1
-  while (i >= 2) {
-    const message = messages[i]
-    if (!message.isOwnMessage && !message.endMessage) return messages[i]
-    i--
-  }
-  return null
-}
-
 export const ChatbotMessages = ({
   model,
   isHintFeedback,
@@ -74,8 +63,6 @@ export const ChatbotMessages = ({
     void model.sendHelpRequestFx({ message, translatedMessage })
   }
 
-  const lastReceivedMessage = findListReceivedMessage(messages)
-
   return (
     <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
       <ScrollView
@@ -102,7 +89,6 @@ export const ChatbotMessages = ({
                 isTextToSpeechPending={isTextToSpeechPending}
                 variant={isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
                 withTextToSpeech={isTextToSpeechEnabled && !isOwnMessage}
-                withErrorSpotting={!isHelpRequestPending && lastReceivedMessage?.id === id}
               />
             ))}
 

package/src/features/chatbot/components/Chatbot.tsx

@@ -6,7 +6,6 @@ import { ChatControls } from './ChatControls/ChatControls'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
 import { ChatbotRenderer } from '../types/model.types'
 import React from 'react'
-import { ChatBotContext } from '../context/ChatBotContext'
 
 type ChatbotProps = {
   model: ChatbotModel
@@ -49,7 +48,7 @@ export const Chatbot = ({
   }
 
   return (
-    <ChatBotContext.Provider value={{ model }}>
+    <>
       <ChatbotMessages
         model={model}
         renderer={renderer}
@@ -68,6 +67,6 @@ export const Chatbot = ({
         ButtonWrapper={ButtonWrapper}
         iconSize={iconSize}
       />
-    </ChatBotContext.Provider>
+    </>
   )
 }

package/src/features/chatbot/index.ts

@@ -3,11 +3,11 @@ export { ChatbotModel } from './model/ChatBotModel'
 export { AudioStatus, type AudioProvider } from './types/t2s.types'
 export {
   MessageVariant,
+  type ConversationMessage,
   type ChatbotRenderer,
   type ChatbotModelProps,
   type IChatDrawBoardAdapter,
 } from './types/model.types'
-export type { PostMessageResponse } from './types/api.types'
+export type { PostMessageResponse, ChatAnswer } from './types/api.types'
+export { ChatMessageHandler } from './model/ChatBotMessageHandler'
 export { DefaultMessagesCreator } from './model/DefaultMessageCreator'
-export type { ChatAnswer } from './types/units.types'
-export type { ConversationMessage } from './types/units.types'

package/src/features/chatbot/model/{ChatBotThreadManager.ts → ChatBotMessageHandler.ts}

@@ -1,5 +1,6 @@
 import { ThreadItem } from './ThreadItem'
-import { createStore, Store } from 'effector'
+import { Store } from 'effector'
+import { createEffect } from 'effector/effector.umd'
 import {
   ChatHintPayload,
   ChatHintResponse,
@@ -9,10 +10,10 @@ import {
 import { ChatbotMessages, IChatDrawBoardAdapter } from '../types/model.types'
 import { CHAT_BOT_MODEL_DEFAULTS } from './constants'
 
-type ChatBotThreadManagerProps = {
+type ChatMessageHandlerProps = {
   messagesLimit?: number
-  drawBoardAdapter?: IChatDrawBoardAdapter
   messages: ChatbotMessages
+  drawBoardAdapter: IChatDrawBoardAdapter
   api: {
     getHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
   }
@@ -22,13 +23,11 @@ type ResetCacheProps = {
   key: string
 }
 
-export class ChatBotThreadManager {
+export class ChatMessageHandler {
   private readonly api
-  private drawBoardAdapter: IChatDrawBoardAdapter | null = null
+  private readonly drawBoardAdapter: IChatDrawBoardAdapter
   private readonly threads = new Map<string, ThreadItem>()
 
-  public readonly $threads = createStore(new Map<string, ThreadItem>())
-
   private readonly messagesLimit
   private currentKey = ''
   private currentBinding: null | (() => void) = null
@@ -40,9 +39,9 @@ export class ChatBotThreadManager {
     api,
     messagesLimit = CHAT_BOT_MODEL_DEFAULTS.THREAD_MESSAGES_LIMIT,
     messages,
-  }: ChatBotThreadManagerProps) {
+  }: ChatMessageHandlerProps) {
     this.api = api
-    this.drawBoardAdapter = drawBoardAdapter ?? null
+    this.drawBoardAdapter = drawBoardAdapter
     this.messagesLimit = messagesLimit
     this.defaultMessages = messages
   }
@@ -59,16 +58,9 @@ export class ChatBotThreadManager {
     const key = this.currentKey
     let threadItem = this.threads.get(key)
     if (threadItem) return threadItem
-    if (!this.drawBoardAdapter) {
-      threadItem = new ThreadItem()
-      this.threads.set(key, threadItem)
-      return threadItem
-    }
     try {
-      const result = await this.drawBoardAdapter.getVisibleStrokes()
-      threadItem = new ThreadItem(
-        result ? { strokes: result.strokes, key: result.validationKey } : null,
-      )
+      const strokes = await this.drawBoardAdapter.getVisibleStrokes()
+      threadItem = new ThreadItem({ strokes })
     } catch {
       threadItem = new ThreadItem()
     }
@@ -76,11 +68,7 @@ export class ChatBotThreadManager {
     return threadItem
   }
 
-  public setDrawBoardAdapter(adapter: IChatDrawBoardAdapter) {
-    this.drawBoardAdapter = adapter
-  }
-
-  public readonly postMessage = async ({
+  public readonly postMessageFx = async ({
     problemAnswer,
     problem,
     answer,
@@ -98,21 +86,21 @@ export class ChatBotThreadManager {
       imageAltText,
     })
 
-    threadItem.history.push(result.message)
+    threadItem.hints.push(result.message)
     const nextOptions =
-      threadItem.history.length < this.messagesLimit ? [this.defaultMessages.anotherHintOption] : []
+      threadItem.hints.length < this.messagesLimit ? [this.defaultMessages.anotherHintOption] : []
 
     return {
       message: result.message,
       options: nextOptions,
+      threadId: '',
       endMessage: !nextOptions.length,
-      thread: threadItem.toObject(),
     }
   }
 
-  public resetThread = ({ key }: ResetCacheProps) => {
+  public resetThread = createEffect(({ key }: ResetCacheProps) => {
     this.threads.delete(key)
-  }
+  })
 
   public resetAll() {
     this.threads.clear()