Lesson5DiagramPics (#456)

* added diagrams that appear depending on which line of code is selected as well as indicators that indicate the change

* fixed linter issues

* fixed images names

* added images needed

src/components/CodeDiagram.tsx

@@ -1,7 +1,11 @@
 import '../styles/CodeDiagram.scss';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import '../styles/Terminal/Terminal.scss';
-import FillArrow from './FillArrow';
+import FilledDot from '../../public/FilledDot.png';
+import lesson5pic1 from '../../public/lesson5pic1.svg';
+import lesson5pic2 from '../../public/lesson5pic2.svg';
+import lesson5pic3 from '../../public/lesson5pic3.svg';
+import RegDot from '../../public/RegDot.png';
 
 export interface CodeDiagramProps {
   code: {
@@ -12,40 +16,53 @@ export interface CodeDiagramProps {
 }
 
 export default function CodeDiagram(props: CodeDiagramProps): JSX.Element {
-  const [clicked, setClick] = useState(Array(props.code.length).fill(false));
-  const [diagram, setDiagram] = useState(0);
-
-  useEffect(() => {
-    const newClicked = [...clicked]; // Create a shallow copy of the original array
-    newClicked[0] = true; // Modify the desired element
-    setClick(newClicked); // Update the state with the modified array
-  }, []);
+  const [clicked, setClicked] = useState<number | null>(null);
+  const [diagram, setDiagram] = useState<number | null>(null);
 
   return (
     <div className="container">
-      <div className="codebox">
-        {props.code.map((code, index) => (
-          <div
-            className={clicked[index] ? 'clicked' : 'notclicked'}
-            onClick={() => {
-              const newClicked = [...clicked];
-              for (let i = 0; i < newClicked.length; i++) newClicked[i] = false;
-              newClicked[index] = true;
-              setClick(newClicked);
-              setDiagram(index);
-            }}
+      <div className="diagramwrapper">
+        <div className="codebox">
+          {props.code.map((code, index) => (
+            <div
+              className={clicked === index ? 'clicked' : 'notclicked'}
+              onClick={() => {
+                setClicked(index);
+                setDiagram(index);
+              }}
+              key={index}
+            >
+              <p>{code.code}</p>
+            </div>
+          ))}
+        </div>
+        <div className="arrow">
+          {diagram === 0 && (
+            <div className="resizedimage">
+              <img src={lesson5pic1} alt="Lesson 5 Pic1" />
+            </div>
+          )}
+          {diagram === 1 && (
+            <div className="resizedimage1">
+              <img src={lesson5pic2} alt="Lesson 5 Pic2" />
+            </div>
+          )}
+          {diagram == 2 && (
+            <div className="resizedimage1">
+              <img src={lesson5pic3} alt="Lesson 5 Pic3" />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="indicators">
+        {props.code.map((_, index) => (
+          <img
             key={index}
-          >
-            <p>{code.code}</p>
-          </div>
+            src={clicked === index ? FilledDot : RegDot}
+            alt={`Indicator ${index + 1}`}
+          />
         ))}
       </div>
-      <div className="arrow">
-        <FillArrow
-          text1={props.code[diagram].text1}
-          text2={props.code[diagram].text2}
-        />
-      </div>
     </div>
   );
 }

src/pages/Lesson5.tsx

@@ -56,7 +56,6 @@ const Lesson5: FC = () => {
               caption2="Pointer Reassignment"
             />
           </div>
-          <CodeDiagram code={diagram} />
           <p>
             In the above code snippet, we start by creating a variable called
             <strong> myVariable</strong>, and we give it a value of 3. In the
@@ -78,7 +77,7 @@ const Lesson5: FC = () => {
               Click through each line of code to see how the diagram changes
             </em>
           </p>
-
+          <CodeDiagram code={diagram} />
           <p>
             This has an interesting implication - we directly overwrote the
             value that was stored at the address in myPointer. But we know that

src/styles/CodeDiagram.scss

@@ -2,11 +2,18 @@
 //=======================================
 
 .container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.diagramwrapper {
   align-items: center;
   display: flex;
   flex-direction: row;
   gap: 3em;
   justify-content: center;
+  margin-top: 10%;
 }
 
 .codebox {
@@ -60,16 +67,26 @@
 }
 
 .arrow {
-  position: relative;
+  display: flex;
+  flex-direction: row-reverse;
   width: 50%;
 }
 
-@media screen and (max-width: 1024px) {
-  .container {
-    flex-wrap: wrap;
-  }
+.indicators {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-bottom: 5%;
+  margin-top: 1%;
+}
 
-  .arrow {
-    margin-bottom: 3em;
-  }
+.resizedimage {
+  height: 30vh;
+  width: 16vw;
+}
+
+.resizedimage1 {
+  height: 30vh;
+  width: 100vw;
 }