feat: randomized turtle dialogue (#102)

* Randomized Turtle Dialogue Modified Turtle.tsx and LessonSide.tsx in orde r to make the turtle's dialogue box display a randomized statement wit h every new exercise. * fix lint --------- Co-authored-by: Sanjna <[email protected]> Co-authored-by: SanjnaT41756 <[email protected]>
uclaacm · Apr 25, 2024 · e25d56d · e25d56d
1 parent f0420a3
commit e25d56d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 25 deletions.
diff --git a/src/components/shared/LessonSide/LessonSide.tsx b/src/components/shared/LessonSide/LessonSide.tsx
@@ -12,12 +12,17 @@ interface lessonSideProps {
   maxLevel: number;
 }
 
+function getRandomNumber(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
 function LessonSide({
   levelNum,
   updateLevel,
   maxLevel,
 }: lessonSideProps): JSX.Element {
   const lesson_info = LessonSideContent[levelNum] || [];
+  const randomTurtleMessage = getRandomNumber(1, 7);
   // console.log("max:" + maxLevel);
   return (
     <section id="lesson-side-container">
@@ -33,7 +38,7 @@ function LessonSide({
         <LessonText text_array={lesson_info} />
       </div>
       <div>
-        <Turtle turtleID="your-genius" />
+        <Turtle turtleID={randomTurtleMessage} />
 
         {/* passed from parent component */}
         <LevelSelector

diff --git a/src/components/shared/LessonSide/Turtle.tsx b/src/components/shared/LessonSide/Turtle.tsx
@@ -7,36 +7,21 @@ import encouragingTurtleSkills from '../../../assets/LessonSide/EncouragingTurtl
 import encouragingTurtleSuccess from '../../../assets/LessonSide/EncouragingTurtleSuccess.svg';
 
 interface TurtleProps {
-  turtleID: string;
+  turtleID: number;
 }
 
 interface TurtleData {
-  [key: string]: [fig: string, altText: string];
+  [key: number]: [fig: string, altText: string];
 }
 
 const turtleIDs: TurtleData = {
-  'full-points': [
-    encouragingTurtleFullPoints,
-    'Turtle saying Full points for you!',
-  ],
-  'you-can-do-it': [encouragingTurtle, 'Turtle saying You can do it!'],
-  'numerous-skills': [
-    encouragingTurtleSkills,
-    'Turtle saying Your skills are numerous!',
-  ],
-  'your-genius': [
-    encouragingTurtleGenius,
-    "Turtle saying There's no end to your genius!",
-  ],
-  'nice-going': [encouragingTurtleNiceGoing, 'Turtle saying Nice going!'],
-  'drawn-to-work': [
-    encouragingTurtleWork,
-    "Turtle saying I'm drawn to your work!",
-  ],
-  'large-success': [
-    encouragingTurtleSuccess,
-    'Turtle saying A large degree of success!',
-  ],
+  1: [encouragingTurtleFullPoints, 'Turtle saying Full points for you!'],
+  2: [encouragingTurtle, 'Turtle saying You can do it!'],
+  3: [encouragingTurtleSkills, 'Turtle saying Your skills are numerous!'],
+  4: [encouragingTurtleGenius, "Turtle saying There's no end to your genius!"],
+  5: [encouragingTurtleNiceGoing, 'Turtle saying Nice going!'],
+  6: [encouragingTurtleWork, "Turtle saying I'm drawn to your work!"],
+  7: [encouragingTurtleSuccess, 'Turtle saying A large degree of success!'],
 };
 
 function Turtle({ turtleID }: TurtleProps): JSX.Element {