From 0dd6459a7a75e60ae2d453c7167af4456ae1ad69 Mon Sep 17 00:00:00 2001
From: NotAmaia <012.sva@gmail.com>
Date: Sun, 25 Feb 2024 16:18:17 -0800
Subject: [PATCH 1/3] Graph matches Figma

---
 src/components/shared/ExerciseSide.tsx        | 92 ++++++++++++++++++-
 .../shared/Exercises/GraphExercise.tsx        |  3 +-
 src/styles/Exercises/GraphInput.scss          |  3 +-
 src/styles/Graph.scss                         |  5 +-
 4 files changed, 95 insertions(+), 8 deletions(-)

diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
index 7cccd1e..4aee0bc 100644
--- a/src/components/shared/ExerciseSide.tsx
+++ b/src/components/shared/ExerciseSide.tsx
@@ -25,12 +25,12 @@ function ExerciseSide({
 ExerciseSideProps): JSX.Element {
   const [displayExercise, setDisplayExercise] = useState(0);
 
-  type availableExercises = 'axis' | 'congrats' | 'graph' | 'unitcircle';
+  type availableExercises = 'axis' | 'congrats' | 'graph0' | 'unitcircle' | 'graph1';
 
   const exercises: availableExercises[] = [
     'unitcircle',
     'axis',
-    'graph',
+    'graph0',
     'congrats',
   ];
   let curExercise;
@@ -39,7 +39,90 @@ ExerciseSideProps): JSX.Element {
     setDisplayExercise(ExercisesNum);
   }
 
-  if (exercises[displayExercise] == 'graph') {
+  if (exercises[displayExercise] == 'graph0') {
+    curExercise = (
+      <div>
+        <div>
+          <GraphExercise
+            origin={{ x: 0, y: 0 }}
+            points={[
+              {x: 0, y: 0, label: ''},
+              { x: 2, y: 1, label: 'A', line: 1},
+              { x: 1, y: -1, label: 'B', line: 1 },
+              { x: 0, y: -1, label: 'C', line: 1 },
+            ]}
+            pointerPosition={{ x: 0, y: 0 }}
+            pointerOrientation={0}
+          />
+        </div>
+        <div style={{ paddingTop: '10vw' }}>
+          <GraphInput
+            questionArray={[
+              {
+                textArray: [
+                  {
+                    type: 'text',
+                    text: '# Goto point A and draw on the dotted line',
+                  },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.goto(' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ', -1)' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.setheading(' },
+                  { type: 'input', width: 4 },
+                  { type: 'text', text: ')' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.' },
+                  { type: 'input', width: 8 },
+                  { type: 'text', text: '()' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.goto(' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ', ' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ')' },
+                ],
+              },
+            ]}
+            nextExercise={() => incrementExercise()}
+          />
+        </div>
+      </div>
+    );
+
+    /*<div className="exercise-box">
+          <AxisParent
+            axisMarkers={[
+              [-2, -1, 0, 1, 2],
+              [-1, 0, 1, 2],
+            ]}
+            axisLabels={[
+              ['A', '', '', 'B', 'C'],
+              ['A', '', '', 'B'],
+            ]}
+            toNextExercise={() => {
+              setCompleteExercises(completeExercises + 1);
+              incrementExercise();
+              return;
+            }}
+          />
+        </div>
+    );*/
+  } 
+  else if (exercises[displayExercise] == 'graph1') {
     curExercise = (
       <div>
         <div>
@@ -121,7 +204,8 @@ ExerciseSideProps): JSX.Element {
           />
         </div>
     );*/
-  } else if (exercises[displayExercise] == 'axis') {
+  }
+  else if (exercises[displayExercise] == 'axis') {
     curExercise = (
       <div className="exercise-box">
         <AxisParent
diff --git a/src/components/shared/Exercises/GraphExercise.tsx b/src/components/shared/Exercises/GraphExercise.tsx
index ca3be1f..5e99fac 100644
--- a/src/components/shared/Exercises/GraphExercise.tsx
+++ b/src/components/shared/Exercises/GraphExercise.tsx
@@ -110,6 +110,7 @@ GraphProps): JSX.Element {
                 left: `${xPos(4 + origin.x + point.x + offsetX)}%`,
                 top: `${yPos(2 - origin.y - point.y + 0.25 + offsetY)}%`,
               }}
+              
             >
               {point.label}
             </div>
@@ -128,7 +129,7 @@ GraphProps): JSX.Element {
         const dyPercent = yPos(endY) - yPos(startY);
         // use this factor because dyPercent is relative to height,
         // but we express a line's length as a percentage of width.
-        const yxRatio = 22.5 / 40;
+        const yxRatio = 22.5 / 50;
         const lineLengthPercent =
           Math.sqrt(
             (dxPercent / 100) ** 2 + ((dyPercent * yxRatio) / 100) ** 2
diff --git a/src/styles/Exercises/GraphInput.scss b/src/styles/Exercises/GraphInput.scss
index 3f6b1a2..59ab650 100644
--- a/src/styles/Exercises/GraphInput.scss
+++ b/src/styles/Exercises/GraphInput.scss
@@ -21,8 +21,9 @@
   font-size: calc(13px + 1vw);
   font-style: normal;
   font-weight: bold;
+  margin-top: 100px; 
   margin-bottom: 2vh;
-  margin-left: -20px;
+  margin-left: 0px;
   margin-right: auto;
   padding-left: 8%;
 }
diff --git a/src/styles/Graph.scss b/src/styles/Graph.scss
index 6a182fc..54c30e0 100644
--- a/src/styles/Graph.scss
+++ b/src/styles/Graph.scss
@@ -1,6 +1,6 @@
 .graph-container {
   align-items: center;
-  border: solid 2px #000;
+  border: solid 1px rgb(209, 209, 209);
   border-radius: 12px;
   height: 0;
   // If editing the sizing of graph-container (padding-bottom or width),
@@ -8,7 +8,8 @@
   padding-bottom: 22.5%;
   position: absolute;
   top: 5%;
-  width: 40%; // see above warning
+  width: 50%; // see above warning
+  margin-left: 5%;
 }
 
 .grid-line {

From 0492b70ba54e9ada7133e40419e72c6672f97950 Mon Sep 17 00:00:00 2001
From: NotAmaia <012.sva@gmail.com>
Date: Sun, 25 Feb 2024 16:32:38 -0800
Subject: [PATCH 2/3] Graph Figma and ran lint

---
 src/components/shared/ExerciseSide.tsx          | 17 ++++++++++-------
 .../shared/Exercises/GraphExercise.tsx          |  1 -
 src/styles/Exercises/GraphInput.scss            |  4 ++--
 src/styles/Graph.scss                           |  2 +-
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
index 4aee0bc..93346bc 100644
--- a/src/components/shared/ExerciseSide.tsx
+++ b/src/components/shared/ExerciseSide.tsx
@@ -25,7 +25,12 @@ function ExerciseSide({
 ExerciseSideProps): JSX.Element {
   const [displayExercise, setDisplayExercise] = useState(0);
 
-  type availableExercises = 'axis' | 'congrats' | 'graph0' | 'unitcircle' | 'graph1';
+  type availableExercises =
+    | 'axis'
+    | 'congrats'
+    | 'graph0'
+    | 'unitcircle'
+    | 'graph1';
 
   const exercises: availableExercises[] = [
     'unitcircle',
@@ -46,8 +51,8 @@ ExerciseSideProps): JSX.Element {
           <GraphExercise
             origin={{ x: 0, y: 0 }}
             points={[
-              {x: 0, y: 0, label: ''},
-              { x: 2, y: 1, label: 'A', line: 1},
+              { x: 0, y: 0, label: '' },
+              { x: 2, y: 1, label: 'A', line: 1 },
               { x: 1, y: -1, label: 'B', line: 1 },
               { x: 0, y: -1, label: 'C', line: 1 },
             ]}
@@ -121,8 +126,7 @@ ExerciseSideProps): JSX.Element {
           />
         </div>
     );*/
-  } 
-  else if (exercises[displayExercise] == 'graph1') {
+  } else if (exercises[displayExercise] == 'graph1') {
     curExercise = (
       <div>
         <div>
@@ -204,8 +208,7 @@ ExerciseSideProps): JSX.Element {
           />
         </div>
     );*/
-  }
-  else if (exercises[displayExercise] == 'axis') {
+  } else if (exercises[displayExercise] == 'axis') {
     curExercise = (
       <div className="exercise-box">
         <AxisParent
diff --git a/src/components/shared/Exercises/GraphExercise.tsx b/src/components/shared/Exercises/GraphExercise.tsx
index 5e99fac..cefab0b 100644
--- a/src/components/shared/Exercises/GraphExercise.tsx
+++ b/src/components/shared/Exercises/GraphExercise.tsx
@@ -110,7 +110,6 @@ GraphProps): JSX.Element {
                 left: `${xPos(4 + origin.x + point.x + offsetX)}%`,
                 top: `${yPos(2 - origin.y - point.y + 0.25 + offsetY)}%`,
               }}
-              
             >
               {point.label}
             </div>
diff --git a/src/styles/Exercises/GraphInput.scss b/src/styles/Exercises/GraphInput.scss
index 59ab650..a561dd7 100644
--- a/src/styles/Exercises/GraphInput.scss
+++ b/src/styles/Exercises/GraphInput.scss
@@ -21,10 +21,10 @@
   font-size: calc(13px + 1vw);
   font-style: normal;
   font-weight: bold;
-  margin-top: 100px; 
   margin-bottom: 2vh;
-  margin-left: 0px;
+  margin-left: 0;
   margin-right: auto;
+  margin-top: 100px;
   padding-left: 8%;
 }
 
diff --git a/src/styles/Graph.scss b/src/styles/Graph.scss
index 54c30e0..6df3344 100644
--- a/src/styles/Graph.scss
+++ b/src/styles/Graph.scss
@@ -3,13 +3,13 @@
   border: solid 1px rgb(209, 209, 209);
   border-radius: 12px;
   height: 0;
+  margin-left: 5%;
   // If editing the sizing of graph-container (padding-bottom or width),
   // modify the value of `yxRatio` in Graph.tsx
   padding-bottom: 22.5%;
   position: absolute;
   top: 5%;
   width: 50%; // see above warning
-  margin-left: 5%;
 }
 
 .grid-line {

From 6fdae0f5682460ef3fb1adc338c836444bb3857b Mon Sep 17 00:00:00 2001
From: NotAmaia <aschmitigal@g.ucla.edu>
Date: Thu, 9 May 2024 15:51:01 -0700
Subject: [PATCH 3/3] graph now matches figma

---
 src/styles/Exercises/GraphInput.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/Exercises/GraphInput.scss b/src/styles/Exercises/GraphInput.scss
index a561dd7..b73f1af 100644
--- a/src/styles/Exercises/GraphInput.scss
+++ b/src/styles/Exercises/GraphInput.scss
@@ -24,7 +24,7 @@
   margin-bottom: 2vh;
   margin-left: 0;
   margin-right: auto;
-  margin-top: 100px;
+  margin-top: 150px;
   padding-left: 8%;
 }