From 75b9992553e314e6e5cbfdb5d1a9762a1a3bb10a Mon Sep 17 00:00:00 2001
From: Rakil Kim <rakilkim0216@gmail.com>
Date: Mon, 27 May 2024 16:38:28 -0700
Subject: [PATCH] 94 add new unitcircle exercise (#109)

* new unit circle exercise and fix display

* add unit circle exercises (#94)

* lint fix

---------

Co-authored-by: Sanjna <108957464+SanjnaT41756@users.noreply.github.com>
---
 src/components/shared/ExerciseSide.tsx        | 29 +++++++++++++++----
 .../shared/Exercises/UnitCircleExercise.tsx   |  9 +++---
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
index 2617d1a..b18c40b 100644
--- a/src/components/shared/ExerciseSide.tsx
+++ b/src/components/shared/ExerciseSide.tsx
@@ -220,17 +220,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);
diff --git a/src/components/shared/Exercises/UnitCircleExercise.tsx b/src/components/shared/Exercises/UnitCircleExercise.tsx
index 95eb54a..ee91413 100644
--- a/src/components/shared/Exercises/UnitCircleExercise.tsx
+++ b/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,8 +91,8 @@ function UnitCircleExercise({
                   (cursorAngle <= Math.PI / 2
                     ? cursorAngle == Math.PI / 2
                       ? 5
-                      : 7
-                    : 2)
+                      : 6
+                    : 6)
                 }%`,
                 bottom: `${
                   Math.sin(cursorAngle) * 80 +
@@ -101,7 +100,7 @@ function UnitCircleExercise({
                     ? cursorAngle == Math.PI / 2
                       ? 25
                       : 28
-                    : 28)
+                    : 27)
                 }%`,
                 transform: `rotate(${cursorAngle}rad) ${
                   labels.length % 2 === 1 &&