Merge branch 'main' into 68-refactor-fix-node-version-and-lint-action

.gitignore

@@ -17,6 +17,7 @@ build/
 # Never commit individual sessions
 .DS_Store
 .vscode/
+.idea/
 
 # misc
 .env.local

src/components/App.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import CongratsPage from './shared/Congratulations';
 import ExerciseSide from './shared/ExerciseSide';
-import LessonSide from './shared/LessonSide';
+import LessonSide from './shared/LessonSide/LessonSide';
 import '../assets/WestwoodSans-Regular.ttf';
 
 function App(): JSX.Element {
   const [exerciseCount, setExerciseCount] = useState(0);
-  if (exerciseCount == 2) {
+  if (exerciseCount == 5) {
     return (
       <main>
         <CongratsPage />
@@ -16,7 +16,7 @@ function App(): JSX.Element {
   return (
     <div>
       <main>
-        <LessonSide />
+        <LessonSide levelNum={exerciseCount + 1} />
         <ExerciseSide
           incrementExercise={() => setExerciseCount(exerciseCount + 1)}
         />

src/components/shared/Congratulations.tsx

@@ -31,7 +31,7 @@ function CongratsPage(): JSX.Element {
         </div>
       </div>
 
-      <div id="encouraging-turtle">
+      <div id="encouraging-turtle-congratulations">
         <img src={encouragingTurtle} alt="turtle image" id="turtle-picture" />
       </div>
 

src/components/shared/ExerciseSide.tsx

@@ -9,6 +9,7 @@ import GraphExercise from './Exercises/GraphExercise';
 import GraphInput from './Exercises/GraphInput';
 //import AxisParent from './Exercises/AxisParent';
 import UnitCircleExercise from './Exercises/UnitCircleExercise';
+import UnitCircleInput from './Exercises/UnitCircleInput';
 ('./Exercises/AxisExercise');
 
 interface ExerciseSideProps {
@@ -17,12 +18,12 @@ interface ExerciseSideProps {
 
 function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
   const [completeExercises, setCompleteExercises] = useState(0);
-  type availableExercises = 'axis' | 'congrats' | 'circle' | 'graph';
+  type availableExercises = 'axis' | 'congrats' | 'graph' | 'unitcircle';
 
   const exercises: availableExercises[] = [
+    'unitcircle',
     'axis',
     'graph',
-    'circle',
     'congrats',
   ];
   let curExercise;
@@ -129,14 +130,23 @@ function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
         />
       </div>
     );
-  } else if (exercises[completeExercises] === 'circle') {
+  } else if (exercises[completeExercises] === 'unitcircle') {
     curExercise = (
       <div>
-        <UnitCircleExercise
-          turtleAngle={1}
-          markers={['A', '', 'B']}
-          labels={['B', 'C', 'D']}
-        />
+        <div>
+          <UnitCircleExercise
+            turtleAngle={1}
+            markers={['A', '', 'B']}
+            labels={['B', 'C', 'D']}
+          />
+          <UnitCircleInput
+            nextExercise={() => {
+              setCompleteExercises(completeExercises + 1);
+              incrementExercise();
+              return;
+            }}
+          />
+        </div>
       </div>
     );
   }

src/components/shared/Exercises/UnitCircleInput.tsx

@@ -1,7 +1,11 @@
 //import { useState } from 'react';
 import '../../../styles/Exercises/UnitCircleInput.scss';
 
-function UnitCircleInput(): JSX.Element {
+interface UnitCircleInputProps {
+  nextExercise: () => void;
+}
+
+function UnitCircleInput({ nextExercise }: UnitCircleInputProps): JSX.Element {
   return (
     <div id="unitcircle-question-container">
       <div id="unitcircle-check-question">
@@ -37,6 +41,11 @@ function UnitCircleInput(): JSX.Element {
             //value={inputText[id]}
           />
         </p>
+        <div id="unitcircleinput-check-button-container">
+          <button id="unitcircleinput-check-button" onClick={nextExercise}>
+            Check
+          </button>
+        </div>
       </div>
     </div>
   );

src/components/shared/LessonSide/index.tsx → src/components/shared/LessonSide/LessonSide.tsx

@@ -17,7 +17,11 @@ const exArray: { id: string; text: string }[] = [
   },
 ];
 
-function LessonSide(): JSX.Element {
+interface lessonSideProps {
+  levelNum: number;
+}
+
+function LessonSide({ levelNum }: lessonSideProps): JSX.Element {
   return (
     <section id="lesson-side-container">
       <div>
@@ -34,8 +38,12 @@ function LessonSide(): JSX.Element {
       <div>
         <Turtle turtleID="your-genius" />
 
-        {/* don't change this next line */}
-        <LevelSelector numLevels={5} currentLevel={2} maxLevelReached={4} />
+        {/* passed from parent component */}
+        <LevelSelector
+          numLevels={6}
+          currentLevel={levelNum}
+          maxLevelReached={6}
+        />
       </div>
       <Footer />
     </section>

src/styles/Congratulations.scss

@@ -71,7 +71,7 @@
   transform: translate(-55%, -45%);
 }
 
-#encouraging-turtle {
+#encouraging-turtle-congratulations {
   bottom: 3vh;
   height: 13.69vh;
   left: 2vh;

src/styles/Exercises/UnitCircleExercise.scss

@@ -2,34 +2,37 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  margin: 25% 10% 15%;
+  //margin: 25% 10% 15%;
+  //width: calc(550px + 1vw);
+  margin-bottom: 5%;
+  margin-left: 30%;
   position: relative;
-  width: calc(550px + 1vw);
+  width: 400px;
 }
 
 .circle {
   position: relative;
-  width: 100%;
+  width: 70%;
 }
 
 .turtle {
   bottom: calc(0.15 * 100%);
   left: calc(0.46 * 100%);
   position: absolute;
-  width: 10%;
+  // width: 10%;
 }
 
 .circle-exercise {
   font-family: Quattrocento Sans, sans-serif;
-  font-size: 4.5vh;
+  font-size: 2vh;
   font-style: italic;
   font-weight: bold;
   position: absolute;
 }
 
 .circle-label {
   font-family: Cascadia Code, sans-serif;
-  font-size: 4.5vh;
+  font-size: 2vh;
   font-weight: regular;
   position: absolute;
 }

src/styles/Exercises/UnitCircleInput.scss

@@ -27,13 +27,16 @@
   flex-direction: column;
   margin-bottom: -15px;
   margin-top: -15px;
-  padding-left: 20%;
+  padding-left: 8%;
 }
 
 #unitcircle-check-question {
   @include font-styles();
+  font-size: calc(13px + 1vw);
   font-style: normal;
   margin-bottom: 2vh;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .unitcircle-check-box {
@@ -54,7 +57,7 @@
   background-color: colors.$input-grey;
 }
 
-/*#unitcircle-check-button {
+#unitcircleinput-check-button {
   @include font-styles();
   background-color: colors.$primary-green;
   border: hidden;
@@ -72,9 +75,9 @@
   align-self: center;
 }
 
-.unitcircle-check-button-container {
+.unitcircleinput-check-button-container {
   align-self: center;
-}*/
+}
 
 .instruction {
   @include font-styles();

src/styles/LessonSide.scss

@@ -63,9 +63,11 @@
 
 #encouraging-turtle {
   align-items: flex-end;
+  box-sizing: border-box;
   display: flex;
+  height: auto;
   padding: 5vh;
-  width: calc(100px + 15vw);
+  width: 100%;
 }
 
 #footer-space {
@@ -117,6 +119,11 @@
   color: colors.$primary-green;
 }
 
+.level-button:hover {
+  background-color: colors.$bg-white;
+  color: colors.$primary-green;
+}
+
 .level-connector {
   background-color: colors.$bg-white;
   border-color: colors.$bg-white;