Merge branch 'main' into 101-error-message-graph

README.md

@@ -1,4 +1,4 @@
-# Your Teach LA Project Here!
+# Pen Pals
 
 ![Production Build](https://github.com/uclaacm/teach-la-react-starter-barebones/workflows/Production%20Build/badge.svg)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -28,7 +28,7 @@ Thanks for using our template! We hope this makes your life developing significa
 
 Things you should do **after using this as a template**:
 
-- [ ] find-and-replace `YOUR_PROJECT_URL_HERE` with your GitHub repo's project name in this README (it's in a few places, so use an editor!)
+- [ ] find-and-replace `pen-pals` with your GitHub repo's project name in this README (it's in a few places, so use an editor!)
 - [x] set up [Netlify](https://www.netlify.com/) for this app - talk to jiin (`@doubleiis02`) if you need access to the Teach LA Netlify team.
 - [x] turn on "Automatically delete head branches" in GitHub `Settings > Options`
 - [x] in `Settings > Branches`, create a branch protection rule for `main` that requires PR reviews. Also require status checks, like passing `build`.
@@ -46,8 +46,8 @@ We'll use a really common Node.js project workflow + Yarn!
 First, let's clone our repository, and install all of our yarn dependencies:
 
 ```
-git clone https://github.com/uclaacm/YOUR_PROJECT_URL_HERE.git
-cd YOUR_PROJECT_URL_HERE
+git clone https://github.com/uclaacm/pen-pals.git
+cd pen-pals
 ```
 
 The instructions to install Node.js will be different based on which platform you're running. It's heavily advised to install your Node.js using NVM (Node Version Manager) because it's easy to manage a standardized version and update it as needed.
@@ -92,7 +92,7 @@ yarn run build
 
 ## Contribution Workflow
 
-Thanks for your interest in contributing to YOUR_PROJECT_URL_HERE! ❤️
+Thanks for your interest in contributing to pen-pals! ❤️
 
 Here's a quick guide on how to get started.
 
@@ -101,7 +101,7 @@ Here's a quick guide on how to get started.
 3. Beep boop away!
 4. **Before you push**, make sure your app runs with `yarn start`. If there are any errors, our CI/CD service will **reject your build**.
 5. Once you're ready, stage and commit your changes!
-6. Make a [pull request](https://github.com/uclaacm/YOUR_PROJECT_URL_HERE/pulls) with your changes, and let someone on your project team know.
+6. Make a [pull request](https://github.com/uclaacm/pen-pals/pulls) with your changes, and let someone on your project team know.
    a. Netlify has a neat feature called "Deploy Previews" that give you a link to preview your changes; [see the blog post](https://www.netlify.com/blog/2016/07/20/introducing-deploy-previews-in-netlify/) for more info!
 7. If your code passes code review, then we can **squash and merge** it into `main`. Congratulations! If you'd like, it's now safe to delete your branch/fork.
 

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>
   );

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';
@@ -220,17 +221,36 @@ ExerciseSideProps): JSX.Element {
             unitCircleMarkers={[
               ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
               ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
-              ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
+              [
+                '-90\xB0',
+                '-60\xB0',
+                '-30\xB0',
+                '0\xB0',
+                '30\xB0',
+                '60\xB0',
+                '90\xB0',
+              ],
+              [
+                '-90\xB0',
+                '-60\xB0',
+                '-30\xB0',
+                '0\xB0',
+                '30\xB0',
+                '60\xB0',
+                '90\xB0',
+              ],
             ]}
             unitCircleLabels={[
               ['A', 'C', '', 'B', ''],
-              ['B', 'A', '', 'C', ''],
-              ['', '', 'C', 'A', 'B'],
+              ['', 'A', 'B', '', 'C'],
+              ['', '', 'A', 'B', '', 'C', ''],
+              ['', 'A', '', '', 'B', '', 'C'],
             ]}
             directions={[
               ['left', 'right', '', 'right', ''],
-              ['left', 'left', '', 'left', ''],
-              ['', '', 'right', 'right', 'left'],
+              ['', 'left', 'left', '', 'left'],
+              ['', '', 'right', 'left', '', 'right', ''],
+              ['', 'right', '', '', 'right', '', 'left'],
             ]}
             toNextExercise={() => {
               setDisplayExercise(displayExercise + 1);
@@ -241,6 +261,8 @@ ExerciseSideProps): JSX.Element {
         </div>
       </div>
     );
+  } else if (exercises[displayExercise] === 'congrats') {
+    return (curExercise = <CongratsPage></CongratsPage>);
   }
 
   return (

src/components/shared/Exercises/AxisParent.tsx

@@ -54,7 +54,7 @@ function AxisParent({
         }
         markers={axisMarkers[Math.min(exerciseNum, axisMarkers.length - 1)]}
         labels={axisLabels[Math.min(exerciseNum, axisLabels.length - 1)]}
-        turtlePosition={1}
+        turtlePosition={0}
       />
       <AxisInput
         questionLabels={questionLabels}

src/components/shared/Exercises/UnitCircleExercise.tsx

@@ -66,7 +66,7 @@ function UnitCircleExercise({
                     (curAngle <= Math.PI / 2
                       ? curAngle == Math.PI / 2
                         ? 19 //middle
-                        : 20 //left
+                        : 17 //left
                       : 15) //right
                   }%`,
                   bottom: `${
@@ -82,7 +82,6 @@ function UnitCircleExercise({
                 {markers[idx]}
               </div>
             ) : null}
-
             <img
               src={Cursor}
               className="circle-cursor"
@@ -92,16 +91,16 @@ function UnitCircleExercise({
                   (cursorAngle <= Math.PI / 2
                     ? cursorAngle == Math.PI / 2
                       ? 5
-                      : 7
-                    : 2)
+                      : 6
+                    : 6)
                 }%`,
                 bottom: `${
                   Math.sin(cursorAngle) * 80 +
                   (cursorAngle <= Math.PI / 2
                     ? cursorAngle == Math.PI / 2
                       ? 25
                       : 28
-                    : 28)
+                    : 27)
                 }%`,
                 transform: `rotate(${cursorAngle}rad) ${
                   labels.length % 2 === 1 &&

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 {