From 129ecf36ef864aa20ff7687fd533b9a466e7e093 Mon Sep 17 00:00:00 2001
From: Rakil Kim <rakilkim0216@gmail.com>
Date: Sun, 26 May 2024 02:36:59 -0700
Subject: [PATCH] add unit circle exercises (#94)

---
 src/components/shared/ExerciseSide.tsx        | 13 +++--
 .../shared/Exercises/UnitCircleExercise.tsx   | 49 ++++++++-----------
 2 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
index 2617d1a..b6b9f0a 100644
--- a/src/components/shared/ExerciseSide.tsx
+++ b/src/components/shared/ExerciseSide.tsx
@@ -220,17 +220,20 @@ 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..3a58d7d 100644
--- a/src/components/shared/Exercises/UnitCircleExercise.tsx
+++ b/src/components/shared/Exercises/UnitCircleExercise.tsx
@@ -37,22 +37,20 @@ function UnitCircleExercise({
             <div
               className="circle-exercise"
               style={{
-                left: `${
-                  (1 - Math.cos(curAngle)) * 31 + //middle right and left
+                left: `${(1 - Math.cos(curAngle)) * 31 + //middle right and left
                   (curAngle <= Math.PI / 2
                     ? curAngle == Math.PI / 2
                       ? 17 //middle
                       : 19 //left
                     : 14) //right
-                }%`,
-                bottom: `${
-                  Math.sin(curAngle) * 53 + //middle right and left
+                  }%`,
+                bottom: `${Math.sin(curAngle) * 53 + //middle right and left
                   (curAngle <= Math.PI / 2
                     ? curAngle == Math.PI / 2
                       ? 28 //middle
                       : 25 //left
                     : 25) //right
-                }%`,
+                  }%`,
               }}
             >
               {element}
@@ -61,56 +59,51 @@ function UnitCircleExercise({
               <div
                 className="circle-label"
                 style={{
-                  left: `${
-                    (1 - Math.cos(curAngle)) * 30 + //middle left and right
+                  left: `${(1 - Math.cos(curAngle)) * 30 + //middle left and right
                     (curAngle <= Math.PI / 2
                       ? curAngle == Math.PI / 2
                         ? 19 //middle
-                        : 20 //left
+                        : 17 //left
                       : 15) //right
-                  }%`,
-                  bottom: `${
-                    Math.sin(curAngle) * 55 + //middle left and right
+                    }%`,
+                  bottom: `${Math.sin(curAngle) * 55 + //middle left and right
                     (curAngle <= Math.PI / 2
                       ? curAngle == Math.PI / 2
                         ? 30 //middle
                         : 25 //left
                       : 25) //right
-                  }%`,
+                    }%`,
                 }}
               >
                 {markers[idx]}
               </div>
             ) : null}
-
             <img
               src={Cursor}
               className="circle-cursor"
               style={{
-                left: `${
-                  (1 - Math.cos(cursorAngle)) * 43 +
+                left: `${(1 - Math.cos(cursorAngle)) * 43 +
                   (cursorAngle <= Math.PI / 2
                     ? cursorAngle == Math.PI / 2
                       ? 5
-                      : 7
-                    : 2)
-                }%`,
-                bottom: `${
-                  Math.sin(cursorAngle) * 80 +
+                      : 6
+                    : 6)
+                  }%`,
+                bottom: `${Math.sin(cursorAngle) * 80 +
                   (cursorAngle <= Math.PI / 2
                     ? cursorAngle == Math.PI / 2
                       ? 25
                       : 28
-                    : 28)
-                }%`,
-                transform: `rotate(${cursorAngle}rad) ${
-                  labels.length % 2 === 1 &&
+                    : 27)
+                  }%`,
+                transform: `rotate(${cursorAngle}rad) ${labels.length % 2 === 1 &&
                   idx === Math.floor(labels.length / 2)
-                    ? scaleCursor
-                    : ''
-                }`,
+                  ? scaleCursor
+                  : ''
+                  }`,
               }}
             ></img>
+
           </div>
         );
       })}