Added feature of congrats page being called at the end of the exercises.

uclaacm · May 29, 2024 · 7b02b7f · 7b02b7f
1 parent ed931f2
commit 7b02b7f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 26 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -23,29 +23,28 @@ function App(): JSX.Element {
     }
   };
 
-  // change this to be max exercise
-  if (exerciseCount == 0) {
-    return (
-      <main>
-        <ExerciseSide
-          ExercisesNum={exerciseCount}
-          incrementExercise={() => setExerciseCount(exerciseCount + 1)}
-        />
-      </main>
-    );
-  }
+  // change it to be max exercise
   return (
     <div>
       <main>
-        <LessonSide
-          levelNum={exerciseCount + 1}
-          updateLevel={updateLevel}
-          maxLevel={completeExercises}
-        />
-        <ExerciseSide
-          ExercisesNum={exerciseCount}
-          incrementExercise={() => setExerciseCount(exerciseCount + 1)}
-        />
+        {exerciseCount < 7 ? (
+          <>
+            <LessonSide
+              levelNum={exerciseCount + 1}
+              updateLevel={updateLevel}
+              maxLevel={completeExercises}
+            />
+            <ExerciseSide
+              ExercisesNum={exerciseCount}
+              incrementExercise={() => setExerciseCount(exerciseCount + 1)}
+            />
+          </>
+        ) : (
+          <ExerciseSide
+            ExercisesNum={exerciseCount}
+            incrementExercise={() => setExerciseCount(exerciseCount + 1)}
+          />
+        )}
       </main>
     </div>
   );

diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
@@ -34,10 +34,10 @@ ExerciseSideProps): JSX.Element {
     | 'graph1';
 
   const exercises: availableExercises[] = [
-    'congrats',
+    'unitcircle',
     'axis',
     'graph0',
-    'unitcircle',
+    'congrats',
   ];
   let curExercise;
 

diff --git a/src/styles/Congratulations.scss b/src/styles/Congratulations.scss
@@ -12,8 +12,8 @@
   background-color: colors.$primary-green;
   display: flex;
   height: 100%;
-  width: 100%;
   position: relative;
+  width: 100%;
 }
 
 #turtle-logo {
@@ -39,11 +39,11 @@
 }
 
 .speech-bubble {
+  height: auto;
   padding-left: 12.816vw;
   padding-right: 18.463vw;
   padding-top: 6vh;
   position: absolute;
-  height: auto;
   width: auto;
 }
 
@@ -83,8 +83,8 @@
 }
 
 #turtle-picture {
-  width: 14vw;
   padding-left: 6vw;
+  width: 14vw;
 }
 
 #cat-img {
@@ -101,9 +101,9 @@
   font-family: 'PT Sans', sans-serif;
   font-size: 4vh;
   font-weight: bold;
+  height: auto;
   position: absolute;
   right: 10vw;
-  height: auto;
   width: auto;
 }