@magmamath/students-features 0.6.5-rc-21 → 0.6.5-rc.1

package/dist/typescript/module/shared/translation/constants.d.ts

@@ -14,7 +14,6 @@ export declare const LOCALIZATION_CONFIGS: {
         "time.yearsAgo": string;
         chat: {
             anotherHint: string;
-            giveHint: string;
             answerAgain: string;
             errorMessage: string;
             howCanIHelp: string;
@@ -36,7 +35,6 @@ export declare const LOCALIZATION_CONFIGS: {
         "time.yearsAgo": string;
         chat: {
             anotherHint: string;
-            giveHint: string;
             answerAgain: string;
             errorMessage: string;
             howCanIHelp: string;
@@ -58,7 +56,6 @@ export declare const LOCALIZATION_CONFIGS: {
         "time.yearsAgo": string;
         chat: {
             anotherHint: string;
-            giveHint: string;
             answerAgain: string;
             errorMessage: string;
             howCanIHelp: string;

package/dist/typescript/module/shared/translation/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIhC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIhC,CAAA"}

package/dist/typescript/module/shared/translation/model.d.ts

@@ -15,7 +15,6 @@ export declare const setLocalization: import("effector").EventCallable<{
     "time.yearsAgo": string;
     chat: {
         anotherHint: string;
-        giveHint: string;
         answerAgain: string;
         errorMessage: string;
         howCanIHelp: string;
@@ -37,7 +36,6 @@ export declare const $localization: import("effector").StoreWritable<{
     "time.yearsAgo": string;
     chat: {
         anotherHint: string;
-        giveHint: string;
         answerAgain: string;
         errorMessage: string;
         howCanIHelp: string;

package/dist/typescript/module/shared/translation/model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,YAAY,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,YAAY,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.6.5-rc-21",
+  "version": "0.6.5-rc.1",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",

package/src/features/chatbot/model/ChatBotModel.ts

@@ -174,11 +174,11 @@ export class ChatbotModel {
     sample({
       clock: effect.fail,
       source: this.$currentChatData,
-      filter: (_, { error }) => error.message !== 'Request aborted manually',
       fn: ({ key, messages }) => ({
         key,
         data: { messages: [...messages, this.defaultMessages.error] },
       }),
+      filter: (_, { error }) => error.message !== 'Request aborted manually',
       target: this.cache.update,
     })
 

package/src/features/chatbot/model/ChatBoxTextManager.ts

@@ -10,9 +10,7 @@ export class ChatBotTextManager {
   }).bindToLanguageChanged($localization.updates)
 
   public readonly messages: ChatbotMessages = {
-    error: this.messagesCreator.createMessage('chat.errorMessage', {
-      options: [this.messagesCreator.createOption('chat.giveHint')],
-    }),
+    error: this.messagesCreator.createMessage('chat.errorMessage'),
     start: this.messagesCreator.createMessage('chat.howCanIHelp'),
     endMessage: this.messagesCreator.createMessage('chat.answerAgain'),
     anotherHintOption: this.messagesCreator.createOption('chat.anotherHint'),

package/src/features/chatbot/model/DefaultMessageCreator.ts

@@ -8,7 +8,6 @@ type ChatMessage = Omit<PostMessageResponse, 'threadId'> & {
 }
 
 type DefaultMessageSettings = {
-  options?: ChatAnswer[]
   isOwn?: boolean
 }
 
@@ -24,11 +23,11 @@ export class DefaultMessagesCreator<K extends string> {
     this.getter = textGetter
   }
 
-  public createMessage(key: K, { isOwn = false, options = [] }: DefaultMessageSettings = {}) {
+  public createMessage(key: K, { isOwn = false }: DefaultMessageSettings = {}) {
     const message: ChatMessage = {
       id: this.list.size.toString(),
       message: this.getter(key),
-      options,
+      options: [],
       isOwnMessage: isOwn,
     }
     this.list.set(message, key)
@@ -38,7 +37,6 @@ export class DefaultMessagesCreator<K extends string> {
   public createOption(key: K) {
     const option: ChatAnswer = {
       text: this.getter(key),
-      translatedText: '',
       promptKey: '',
     }
     this.list.set(option, key)

package/src/features/chatbot/model/constants.ts

@@ -1,3 +1,5 @@
+import { ChatbotMessages } from '../types/model.types'
+
 export const CHAT_BOT_MODEL_DEFAULTS = {
   THREAD_MESSAGES_LIMIT: 3,
 }

package/src/features/chatbot/model/translation.ts

@@ -129,9 +129,6 @@ export class ChatbotTranslation {
         textList: {
           messages: messages.map(({ message }) => message),
           defaultMessages: defaultMessages.map(({ message }) => message),
-          defaultMessagesOptions: defaultMessages.flatMap((message) =>
-            message.options.map((option) => option.text),
-          ),
           defaultOptions: defaultOptions.map(({ text }) => text),
           lastMessage: options.lastMessage || [],
           alternativesHints: options.alternatives?.hints || [],
@@ -142,12 +139,6 @@ export class ChatbotTranslation {
 
       translatedTextsList.defaultMessages.forEach((message, index) => {
         defaultMessages[index].translatedMessage = message
-        defaultMessages[index].options = defaultMessages[index].options.map((option) => {
-          return {
-            ...option,
-            translatedText: translatedTextsList.defaultMessagesOptions[index],
-          }
-        })
       })
       translatedTextsList.defaultOptions.forEach((message, index) => {
         defaultOptions[index].translatedText = message

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

@@ -1,25 +1,14 @@
 import React from 'react'
-import { View, StyleSheet, Platform, Image } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 import { BORDER_RADIUS } from '@magmamath/react-native-ui'
 
-// import { TrophyIcon } from './assets/TrophyIcon'
+import { TrophyIcon } from './assets/TrophyIcon'
 import { SunrisingIcon } from './assets/SunrisingIcon'
-import ModalBg from './assets/goblet-bg.webp'
-
-// force TS to see ModalBg as string on web
-const webUri = ModalBg as string
-
-// force TS to see ModalBg as number on native
-const nativeModuleId = ModalBg as number
 
 export const ModalBackground = () => (
   <View style={[StyleSheet.absoluteFill, styles.backgroundContainer]}>
     <View style={styles.bgImageLeft}>
-      <Image
-        source={Platform.OS === 'web' ? { uri: webUri } : nativeModuleId}
-        style={{ width: 300, height: 300, resizeMode: 'cover' }}
-      />
-      {/* <TrophyIcon size={466} /> */}
+      <TrophyIcon size={466} />
     </View>
     <View style={styles.bgImageRight}>
       <SunrisingIcon size={909} />

package/src/features/feedback/model/comments.ts

@@ -23,18 +23,18 @@ export class TeacherCommentsModel {
         state,
         assignmentId,
         problemId,
-        fn: (data) => ({
-          comments: data.comments.map((comment) => ({ ...comment, isRead: true })),
+        fn: data => ({
+          comments: data.comments.map(comment => ({ ...comment, isRead: true })),
           unreadMessagesCount: 0,
         }),
       }),
     )
-    .on(this.add, (state, { assignmentId, comment, isRead }) =>
+    .on(this.add, (state, { assignmentId, problemId, comment, isRead }) =>
       updateCommentsState({
         state,
         assignmentId,
-        problemId: comment.problemId,
-        fn: (data) => ({
+        problemId,
+        fn: data => ({
           comments: [...data.comments, comment],
           unreadMessagesCount: isRead ? data.unreadMessagesCount : data.unreadMessagesCount + 1,
         }),
@@ -45,7 +45,7 @@ export class TeacherCommentsModel {
         state,
         assignmentId,
         problemId,
-        fn: (data) => {
+        fn: data => {
           const commentToDelete = data.comments.find(({ _id }) => _id === commentId)
           if (!commentToDelete) return data
 
@@ -77,7 +77,7 @@ export class TeacherCommentsModel {
     sample({
       clock: this.add,
       source: { isOpen: $isOpen },
-      filter: ({ isOpen }, { problemId, comment }) => isOpen && comment.problemId === problemId,
+      filter: ({ isOpen }) => isOpen,
       fn: (_, { comment }) => ({
         ids: [comment._id],
       }),

package/src/features/feedback/model/model.ts

@@ -56,7 +56,7 @@ export class TeacherFeedbackModel {
           comments?.length === 1 && comments[0]._id === EMPTY_COMMENT_ID
         return !isOpen && isOnlyNoCommentsMessage
       },
-      fn: ({ assignmentId, problemId }) => ({
+      fn: ({ assignmentId, problemId }, comment) => ({
         assignmentId,
         problemId,
         commentId: EMPTY_COMMENT_ID,
@@ -76,7 +76,7 @@ export class TeacherFeedbackModel {
         const hasUnreadComments = comments.some(({ isRead }) => !isRead)
         return isOpen && hasUnreadComments
       },
-      fn: (source) => {
+      fn: source => {
         const comments = findCommentsByCredits(source)
         return { ids: comments.map(({ _id }) => _id) }
       },
@@ -97,8 +97,9 @@ export class TeacherFeedbackModel {
 
     sample({
       clock: this.sockets.commentDeleted,
-      fn: (comment) => ({
-        assignmentId: comment.exerciseId,
+      source: { assignmentId: credits.$assignmentId },
+      fn: ({ assignmentId }, comment) => ({
+        assignmentId,
         problemId: comment.problemId,
         commentId: comment._id,
       }),
@@ -112,11 +113,10 @@ export class TeacherFeedbackModel {
         problemId: credits.$problemId,
         isOpen: this.$isOpen,
       },
-      filter: ({ assignmentId }, comment) => assignmentId === comment.exerciseId,
       fn: ({ assignmentId, problemId, isOpen }, comment) => ({
         comment,
         assignmentId,
-        problemId,
+        problemId: comment.problemId,
         isRead: isOpen && comment.problemId === problemId,
       }),
       target: this.comments.add,

package/src/features/gifCelebrations/GifCelebrations.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react'
+import { Gif } from './components/Gif'
+import { Progress } from './components/Progress'
+import { ContentContainer } from './components/ContentContainer'
+import { Backdrop } from './components/Backdrop'
+import { Easing, runOnJS, useSharedValue, withSequence, withTiming } from 'react-native-reanimated'
+import { useUnit } from 'effector-react'
+import { ANIMATION_DURATION } from './constants'
+import { GifCelebrationsModel } from './model/GifCelebrations.model'
+
+type GifCelebrationsProps = {
+  model: GifCelebrationsModel
+}
+
+export const GifCelebrations = ({ model }: GifCelebrationsProps) => {
+  const [totalProblems, resolvedProblems, activeGif] = useUnit([
+    model.$totalProblems,
+    model.$resolvedProblems,
+    model.$activeGif,
+  ])
+  console.log('totalProblems: ', totalProblems)
+
+  console.log('activeGif: ', activeGif)
+  console.log('resolvedProblems: ', resolvedProblems)
+
+  const completedPercent =
+    resolvedProblems && totalProblems && Math.round((resolvedProblems / totalProblems) * 100)
+
+  const progress = useSharedValue(0)
+
+  const stopAnimation = () => {
+    model.stop()
+    progress.value = 0
+  }
+
+  const playAnimation = () => {
+    progress.value = withSequence(
+      withTiming(1, {
+        duration: ANIMATION_DURATION,
+        easing: Easing.bezier(0.52, 0.16, 0.26, 0.77),
+      }),
+      withTiming(
+        2,
+        {
+          duration: ANIMATION_DURATION,
+          easing: Easing.bezier(0.71, 0.09, 0.49, 0.89),
+        },
+        () => runOnJS(stopAnimation)(),
+      ),
+    )
+  }
+
+  useEffect(() => {
+    model.initialize()
+  }, [])
+
+  useEffect(() => {
+    if (activeGif) {
+      playAnimation()
+    }
+  }, [activeGif])
+
+  if (!activeGif) {
+    return null
+  }
+
+  return (
+    <Backdrop progress={progress}>
+      <ContentContainer progress={progress}>
+        <Gif uri={activeGif.url} />
+        <Progress progress={progress} completedPercent={completedPercent} />
+      </ContentContainer>
+    </Backdrop>
+  )
+}

package/src/features/gifCelebrations/components/Backdrop.tsx

@@ -0,0 +1,40 @@
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import React from 'react'
+import Animated, { useAnimatedStyle, interpolateColor, SharedValue } from 'react-native-reanimated'
+import { BACKDROP_COLOR } from '../constants'
+
+type BackdropProps = {
+  children: React.ReactNode
+  progress: SharedValue<number>
+}
+
+export const Backdrop = ({ children, progress }: BackdropProps) => {
+  const { width, height } = useWindowDimensions()
+
+  const backdropAnimatedStyle = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        progress.value,
+        [0, 1, 2],
+        [BACKDROP_COLOR.INITIAL, BACKDROP_COLOR.FINAL, BACKDROP_COLOR.INITIAL],
+      ),
+    }),
+    [progress],
+  )
+
+  return (
+    <Animated.View style={[styles.backdrop, { width, height }, backdropAnimatedStyle]}>
+      {children}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    zIndex: 1100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(51, 51, 51, 0.33);',
+  },
+})

package/src/features/gifCelebrations/components/ContentContainer.tsx

@@ -0,0 +1,43 @@
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import React from 'react'
+import { SPACING } from '@magmamath/react-native-ui'
+import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-native-reanimated'
+import { CONTENT_CONTAINER } from '../constants'
+
+type ContentContainerProps = {
+  children: React.ReactNode
+  progress: SharedValue<number>
+}
+
+export const ContentContainer = ({ children, progress }: ContentContainerProps) => {
+  const { width } = useWindowDimensions()
+
+  const RIGHT_POSITION =
+    width / 2 + CONTENT_CONTAINER.CONTAINER_WIDTH / 2 + CONTENT_CONTAINER.SAFE_AREA
+  const LEFT_POSITION = -RIGHT_POSITION - CONTENT_CONTAINER.SAFE_AREA
+
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          translateX: interpolate(progress.value, [0, 1, 2], [LEFT_POSITION, 0, RIGHT_POSITION]),
+        },
+        {
+          rotate: `${interpolate(progress.value, [0, 1, 2], [-CONTENT_CONTAINER.ANGLE, 0, CONTENT_CONTAINER.ANGLE])}deg`,
+        },
+      ],
+    }),
+    [progress, RIGHT_POSITION, LEFT_POSITION],
+  )
+
+  return <Animated.View style={[styles.container, animatedStyles]}>{children}</Animated.View>
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: CONTENT_CONTAINER.CONTAINER_WIDTH,
+    alignItems: 'center',
+    gap: SPACING[800],
+    position: 'absolute',
+  },
+})

package/src/features/gifCelebrations/components/Gif.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet, View, Image } from 'react-native'
+import React, { useLayoutEffect, useState } from 'react'
+import { BORDER_RADIUS, COLORS, SPACING } from '@magmamath/react-native-ui'
+
+const mock =
+  'https://media3.giphy.com/media/v1.Y2lkPWZhYjgxNWZhN3lucHRuYjZtMzRiNTZkeXo3NTBrNzIwejcwdXp0Y3g1c2k2ODA2eiZlcD12MV9naWZzX3NlYXJjaCZjdD1n/lCSABZRhMw6pW/giphy.gif'
+
+type GifProps = {
+  uri: string
+}
+
+type Size = {
+  width: number
+  height: number
+}
+
+export const Gif = ({ uri }: GifProps) => {
+  const [size, setSize] = useState<Size | null>(null)
+  console.log('size: ', size)
+
+  useLayoutEffect(() => {
+    Image.getSize(uri, (width, height) => {
+      setSize({ width: width > 480 ? 480 : width, height: height > 300 ? 300 : height })
+    })
+  }, [uri])
+
+  return (
+    <View style={styles.backgroundContainer}>
+      <View style={styles.container}>
+        {size && (
+          <Image
+            alt="Celebration GIF"
+            source={{
+              uri,
+            }}
+            width={size.width}
+            height={size.height}
+            style={[styles.image, { width: size.width, height: size.height }]} //this sizes duplication is needed for compatibility with web and rn
+          />
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    backgroundColor: 'rgba(255, 255, 255, 0.6)',
+    borderRadius: 23,
+    padding: SPACING[200],
+  },
+  container: {
+    padding: SPACING[1600],
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  image: {
+    borderRadius: BORDER_RADIUS[100],
+    backgroundColor: 'orange',
+  },
+})

package/src/features/gifCelebrations/components/Progress.tsx

@@ -0,0 +1,108 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import Animated, { useAnimatedStyle, SharedValue, interpolate } from 'react-native-reanimated'
+import { Image } from 'react-native'
+
+const MIN_WIDTH_FOR_ONE_DIGIT = 12
+const MIN_WIDTH_FOR_TWO_DIGITS = 15
+const ADJUSTMENT_FOR_HUNDRED_PERCENT = 1.8
+
+type ProgressProps = {
+  progress: SharedValue<number>
+  completedPercent: number
+}
+
+export const Progress = ({ progress, completedPercent }: ProgressProps) => {
+  const progressLineWidth = (() => {
+    if (completedPercent === 100) {
+      return completedPercent + ADJUSTMENT_FOR_HUNDRED_PERCENT
+    }
+    if (completedPercent <= 9) {
+      return MIN_WIDTH_FOR_ONE_DIGIT
+    }
+    if (completedPercent <= 15) {
+      return MIN_WIDTH_FOR_TWO_DIGITS
+    }
+    return completedPercent
+  })()
+
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      width: `${interpolate(
+        progress.value,
+        [0, 1, 2],
+        [0, progressLineWidth, progressLineWidth],
+      )}%`,
+    }),
+    [progress, progressLineWidth],
+  )
+
+  return (
+    <View style={styles.backgroundContainer}>
+      <View style={styles.container}>
+        <View style={styles.progressContainer}>
+          <Animated.View style={[styles.progress, animatedStyles]}>
+            <Typography variant={HeadingVariants.H1} style={styles.percent}>
+              {`${completedPercent}%`}
+            </Typography>
+          </Animated.View>
+        </View>
+        {/* <Image source={require('../assets/confetti.webp')} style={styles.confetti} /> */}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    backgroundColor: 'rgba(255, 255, 255, 0.6)',
+    borderRadius: 23,
+    padding: SPACING[200],
+    width: '100%',
+  },
+  container: {
+    width: '100%',
+    height: 116,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    paddingLeft: SPACING[400],
+    paddingRight: SPACING[200],
+    gap: SPACING[100],
+  },
+  progressContainer: {
+    height: 50,
+    flexGrow: 1,
+    backgroundColor: COLORS.NEUTRAL_5,
+    borderRadius: 90,
+    overflow: 'hidden',
+  },
+  progress: {
+    position: 'absolute',
+    left: -12,
+    height: '100%',
+    backgroundColor: COLORS.PRIMARY_BLUE,
+    borderRadius: BORDER_RADIUS[200],
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    paddingRight: 10.6,
+    overflow: 'hidden',
+  },
+  confetti: {
+    width: 75,
+    height: 70,
+    marginHorizontal: SPACING[200],
+  },
+  percent: {
+    color: COLORS.NEUTRAL_1,
+    fontWeight: '700',
+  },
+})

package/src/features/gifCelebrations/constants.ts

@@ -0,0 +1,13 @@
+export const BACKDROP_COLOR = {
+  INITIAL: 'rgba(51, 51, 51, 0)',
+  FINAL: 'rgba(51, 51, 51, 0.66)',
+}
+
+export const CONTENT_CONTAINER = {
+  ANGLE: 5,
+  CONTAINER_WIDTH: 769,
+  SAFE_AREA: 44, // to be sure that the content is not cut off on the edges because of rotate transform
+}
+
+export const ANIMATION_DURATION = 1750
+export const MIN_PROBLEMS_TO_SHOW_GIF = 6

package/src/features/gifCelebrations/helpers.ts

@@ -0,0 +1,68 @@
+import { GifsGroups } from './types/model.types'
+
+type GifSelectProps = {
+  gifsGroups: GifsGroups
+  resolvedProblem: number
+  totalProblems: number
+}
+
+// Number of problems	When we show gif
+// <6	Never
+// 7-12	50% completion
+// 13-18	33%, 66% completion
+// 19-24	25%, 50%, 75 completion
+// 25-30	20%, 40%, 60%, 80% completion
+// .>30	15%, 30%, 45%, 60%, 75% completion
+
+// We are also going to have different buckets with different gifs. The logic is as follows:
+// Group 1: 15%, 20%, 25%, 30% - Early celebrations
+// Group 2: 33%, 40%, 45%, 50% - Mid celebrations
+// Group 3: 60%, 66%, 75%, 80% - Party
+
+export const gifSelect = ({ gifsGroups, resolvedProblem, totalProblems }: GifSelectProps) => {
+  if (totalProblems < 7) return null
+
+  const group = Math.ceil((resolvedProblem / totalProblems) * 100)
+
+  if (group <= 20) return gifsGroups.group1[Math.floor(Math.random() * gifsGroups.group1.length)]
+  if (group <= 40) return gifsGroups.group2[Math.floor(Math.random() * gifsGroups.group2.length)]
+  if (group <= 60) return gifsGroups.group3[Math.floor(Math.random() * gifsGroups.group3.length)]
+
+  return null
+}
+
+export const calculatePercentageTable = (totalProblems: number) => {
+  if (totalProblems <= 12) return { 50: Math.ceil(totalProblems * 0.5) }
+
+  if (totalProblems <= 18) {
+    return {
+      33: Math.ceil(totalProblems * 0.33),
+      66: Math.ceil(totalProblems * 0.66),
+    }
+  }
+
+  if (totalProblems <= 24) {
+    return {
+      25: Math.ceil(totalProblems * 0.25),
+      50: Math.ceil(totalProblems * 0.5),
+      75: Math.ceil(totalProblems * 0.75),
+    }
+  }
+
+  if (totalProblems <= 30) {
+    return {
+      20: Math.ceil(totalProblems * 0.2),
+      40: Math.ceil(totalProblems * 0.4),
+      60: Math.ceil(totalProblems * 0.6),
+      80: Math.ceil(totalProblems * 0.8),
+    }
+  }
+
+  return {
+    15: Math.ceil(totalProblems * 0.15),
+    30: Math.ceil(totalProblems * 0.3),
+    45: Math.ceil(totalProblems * 0.45),
+    60: Math.ceil(totalProblems * 0.6),
+    75: Math.ceil(totalProblems * 0.75),
+  }
+}

package/src/features/gifCelebrations/index.ts

@@ -0,0 +1,2 @@
+export { GifCelebrations } from './GifCelebrations'
+export { GifCelebrationsModel } from './model/GifCelebrations.model'