Merge branch 'main' into 99-turtle-above-0-axis-exercise

uclaacm · May 29, 2024 · f85d6a5 · f85d6a5
2 parents 8982e9f + 304b7da
commit f85d6a5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 25 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import CongratsPage from './shared/Congratulations';
 import ExerciseSide from './shared/ExerciseSide';
 import LessonSide from './shared/LessonSide/LessonSide';
 import '../assets/WestwoodSans-Regular.ttf';
@@ -24,25 +23,28 @@ function App(): JSX.Element {
     }
   };
 
-  if (exerciseCount == 5) {
-    return (
-      <main>
-        <CongratsPage />
-      </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
@@ -4,6 +4,7 @@ import '../../styles/ExerciseSide.scss';
 
 //import AxisExercise from './Exercises/AxisExercise';
 //import AxisInput from './Exercises/AxisInputs';
+import CongratsPage from './Congratulations';
 import AxisParent from './Exercises/AxisParent';
 import GraphExercise from './Exercises/GraphExercise';
 import GraphInput from './Exercises/GraphInput';
@@ -26,8 +27,8 @@ ExerciseSideProps): JSX.Element {
   const [displayExercise, setDisplayExercise] = useState(0);
 
   type availableExercises =
-    | 'axis'
     | 'congrats'
+    | 'axis'
     | 'graph0'
     | 'unitcircle'
     | 'graph1';
@@ -260,6 +261,8 @@ ExerciseSideProps): JSX.Element {
         </div>
       </div>
     );
+  } else if (exercises[displayExercise] === 'congrats') {
+    return (curExercise = <CongratsPage></CongratsPage>);
   }
 
   return (

diff --git a/src/styles/Congratulations.scss b/src/styles/Congratulations.scss
@@ -10,8 +10,10 @@
 
 #congrats-page-container {
   background-color: colors.$primary-green;
-  flex-grow: 1;
+  display: flex;
   height: 100%;
+  position: relative;
+  width: 100%;
 }
 
 #turtle-logo {
@@ -34,27 +36,28 @@
 #turtle-image {
   display: inline-block;
   vertical-align: middle;
-  //float:left;
 }
 
 .speech-bubble {
+  height: auto;
   padding-left: 12.816vw;
-  padding-right: 16.463vw;
+  padding-right: 18.463vw;
   padding-top: 6vh;
   position: absolute;
+  width: auto;
 }
 
 #speech-bubble-image {
   height: auto;
-  width: 94%;
+  width: 75%;
 }
 
 #congratsTxt {
   color: colors.$primary-green;
   font-family: 'PT Sans', sans-serif;
-  font-size: 5vw;
+  font-size: 4vw;
   font-weight: bold;
-  left: 54%;
+  left: 52%;
   position: absolute;
   top: 26%;
   transform: translate(-64%, -26%);
@@ -63,7 +66,7 @@
 #blurb {
   color: colors.$primary-green;
   font-family: 'PT Sans', sans-serif;
-  font-size: 3.8vw;
+  font-size: 2.8vw;
   font-weight: bold;
   left: 50%;
   position: absolute;
@@ -80,6 +83,7 @@
 }
 
 #turtle-picture {
+  padding-left: 6vw;
   width: 14vw;
 }
 
@@ -97,8 +101,10 @@
   font-family: 'PT Sans', sans-serif;
   font-size: 4vh;
   font-weight: bold;
+  height: auto;
   position: absolute;
   right: 10vw;
+  width: auto;
 }
 
 #rectangle1 {