match exercise to figma

uclaacm · Feb 28, 2024 · c09035e · c09035e
1 parent 3c3ddc7
commit c09035e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 23 deletions.
diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
@@ -147,8 +147,8 @@ ExerciseSideProps): JSX.Element {
         <div>
           <UnitCircleExercise
             turtleAngle={1}
-            markers={['A', '', 'B']}
-            labels={['B', 'C', 'D']}
+            markers={['0\xB0', '', '90\xB0', '', '']}
+            labels={['A', 'C', 'B', '', '']}
           />
           <UnitCircleInput
             nextExercise={() => {

diff --git a/src/components/shared/Exercises/UnitCircleExercise.tsx b/src/components/shared/Exercises/UnitCircleExercise.tsx
@@ -14,7 +14,9 @@ function UnitCircleExercise({
   labels,
 }: UnitCircleProps): JSX.Element {
   const rotateString = turtleAngle + 'deg';
-  const angleBetweenTicks = Math.PI / (labels.length - 1);
+  const angleBetweenTicks = Math.PI / (labels.length - 3);
+  const cursorTicks = Math.PI / (labels.length - 1);
+  let cursorAngle = 0 - cursorTicks;
   let curAngle = 0 - angleBetweenTicks;
   const scaleCursor = 'scale(1.5)';
   return (
@@ -29,6 +31,7 @@ function UnitCircleExercise({
       />
       {labels.map((element, idx) => {
         curAngle += angleBetweenTicks;
+        cursorAngle += cursorTicks;
         return (
           <div key={element}>
             <div
@@ -38,11 +41,18 @@ function UnitCircleExercise({
                   (1 - Math.cos(curAngle)) * 40 +
                   (curAngle <= Math.PI / 2
                     ? curAngle == Math.PI / 2
-                      ? 7.5
-                      : 5
-                    : 10)
+                      ? -12
+                      : 19
+                    : -12)
+                }%`,
+                bottom: `${
+                  Math.sin(curAngle) * 50 +
+                  (curAngle <= Math.PI / 2
+                    ? curAngle == Math.PI / 2
+                      ? 13
+                      : 25
+                    : 63)
                 }%`,
-                bottom: `${Math.sin(curAngle) * 50 + 30}%`,
               }}
             >
               {element}
@@ -54,11 +64,18 @@ function UnitCircleExercise({
                   (1 - Math.cos(curAngle)) * 45 +
                   (curAngle <= Math.PI / 2
                     ? curAngle == Math.PI / 2
-                      ? 2.5
-                      : 5
-                    : 0)
+                      ? 2
+                      : 49
+                    : -15)
+                }%`,
+                bottom: `${
+                  Math.sin(curAngle) * 50 +
+                  (curAngle <= Math.PI / 2
+                    ? curAngle == Math.PI / 2
+                      ? 2
+                      : 83
+                    : 26)
                 }%`,
-                bottom: `${Math.sin(curAngle) * 50 + 30}%`,
               }}
             >
               {markers[idx]}
@@ -69,15 +86,22 @@ function UnitCircleExercise({
               className="circle-cursor"
               style={{
                 left: `${
-                  (1 - Math.cos(curAngle)) * 50 +
-                  (curAngle <= Math.PI / 2
-                    ? curAngle == Math.PI / 2
-                      ? -2.5
-                      : -10
-                    : 5)
+                  (1 - Math.cos(cursorAngle)) * 43 +
+                  (cursorAngle <= Math.PI / 2
+                    ? cursorAngle == Math.PI / 2
+                      ? 5
+                      : 7
+                    : 2)
+                }%`,
+                bottom: `${
+                  Math.sin(cursorAngle) * 80 +
+                  (cursorAngle <= Math.PI / 2
+                    ? cursorAngle == Math.PI / 2
+                      ? 25
+                      : 28
+                    : 28)
                 }%`,
-                bottom: `${Math.sin(curAngle) * 75 + 30}%`,
-                transform: `rotate(${curAngle}rad) ${
+                transform: `rotate(${cursorAngle}rad) ${
                   labels.length % 2 === 1 &&
                   idx === Math.floor(labels.length / 2)
                     ? scaleCursor

diff --git a/src/styles/Exercises/UnitCircleExercise.scss b/src/styles/Exercises/UnitCircleExercise.scss
@@ -24,16 +24,16 @@
 
 .circle-exercise {
   font-family: Quattrocento Sans, sans-serif;
-  font-size: 2vh;
+  font-size: 4vh;
   font-style: italic;
   font-weight: bold;
   position: absolute;
 }
 
 .circle-label {
-  font-family: Cascadia Code, sans-serif;
-  font-size: 2vh;
-  font-weight: regular;
+  font-family: Quattrocento Sans, sans-serif;
+  font-size: 3vh;
+  font-weight: bold;
   position: absolute;
 }