Fix merge conflicts

uclaacm · Feb 26, 2024 · ea80991 · ea80991
2 parents 3805cd8 + 523ba4f
commit ea80991
Show file tree

Hide file tree

Showing 17 changed files with 932 additions and 18 deletions.
diff --git a/public/Group 228.svg → public/ConclusionDiagram.svg b/public/Group 228.svg → public/ConclusionDiagram.svg
diff --git a/public/Exercise4Diagram1.svg b/public/Exercise4Diagram1.svg
diff --git a/public/Exercise4Diagram2.svg b/public/Exercise4Diagram2.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,6 +5,7 @@ import Error404 from './pages/Error404';
 import Exercise1 from './pages/Exercise1';
 import Exercise2 from './pages/Exercise2';
 import Exercise3 from './pages/Exercise3';
+import Exercise4 from './pages/Exercise4';
 import Exercise6 from './pages/Exercise6';
 import Home from './pages/Home';
 import Lesson1 from './pages/Lesson1';
@@ -43,6 +44,7 @@ function App(): JSX.Element {
           <Route path="/exercise-1" element={<Exercise1 />} />
           <Route path="/exercise-2" element={<Exercise2 />} />
           <Route path="/exercise-3" element={<Exercise3 />} />
+          <Route path="/exercise-4" element={<Exercise4 />} />
           <Route path="/exercise-6" element={<Exercise6 />} />
           <Route path="/conclusion" element={<Conclusion />} />
           <Route path="*" element={<Error404 />} />

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
@@ -6,7 +6,10 @@ export interface GridProps {
   size: number;
   addressNums: number[];
   itemSpaceArray: number[];
+  correctAddress?: number;
+  disabled: boolean;
   handleCorrect: Dispatch<SetStateAction<boolean>>;
+  handleIncorrect: Dispatch<SetStateAction<boolean>>;
   style?: CSSProperties;
   children?: JSX.Element[];
 }
@@ -30,7 +33,10 @@ export default function Grid(props: GridProps): JSX.Element {
           <ShelfAddress
             key={null}
             num={num}
+            correctAddress={num == props.correctAddress}
+            disabled={props.disabled}
             handleCorrect={props.handleCorrect}
+            handleIncorrect={props.handleIncorrect}
           ></ShelfAddress>
         ))}
       </div>

diff --git a/src/components/HintBox.tsx b/src/components/HintBox.tsx
@@ -1,16 +1,37 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import '../styles/HintBox.scss';
 
 interface HintBoxProps {
   text: string;
+  correct?: boolean;
+  noClose?: boolean;
 }
 
 function HintBox(props: HintBoxProps): JSX.Element {
   const [expanded, setExpanded] = useState(false);
 
+  const handleToggle = () => {
+    if (props.noClose && !expanded) {
+      setExpanded(!expanded);
+    }
+  };
+
+  useEffect(() => {
+    setExpanded(props.correct || false);
+  }, [props.correct]);
+
   return (
     <div className="hintbox-container">
-      <div className="hintbox" onClick={() => setExpanded((prev) => !prev)}>
+      <div
+        className={`hintbox${expanded ? ' expanded' : ''} ${
+          props.correct === undefined
+            ? ''
+            : props.correct
+            ? 'correct'
+            : 'incorrect'
+        }`}
+        onClick={handleToggle}
+      >
         <div className="hintbox-title">
           <svg
             width="26"
@@ -24,11 +45,15 @@ function HintBox(props: HintBoxProps): JSX.Element {
               fill="#5d71a7"
             />
           </svg>
-          <div className="hintbox-title-text">HINTS</div>
+          <div className="hintbox-title-text">
+            {props.correct ? 'CORRECT!' : 'HINTS'}
+          </div>
         </div>
-        <div className={expanded ? 'hintbox-text show' : 'hintbox-text'}>
+        <div className={`hintbox-text ${expanded ? 'show' : ''}`}>
           <div>&nbsp;</div>
-          <div>{props.text}</div>
+          <div className={props.correct ? 'correct-text' : ''}>
+            {props.text}
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/components/RunCode.tsx b/src/components/RunCode.tsx
@@ -61,7 +61,13 @@ const RunCode: React.FC<RunCodeProps> = ({ displayText, questions }) => {
       ) : (
         <></>
       )}
-      <p className="code">{displayText}</p>
+      {displayText != '' && (
+        <p className="code">
+          <pre>
+            <code>{displayText}</code>
+          </pre>
+        </p>
+      )}
 
       {questions.map((question, index) => {
         return (

diff --git a/src/components/ShelfAddress.tsx b/src/components/ShelfAddress.tsx
@@ -3,22 +3,33 @@ import '../styles/ShelfAddress.scss';
 
 interface ShelfAddressProps {
   num: number;
+  correctAddress: boolean;
+  disabled: boolean;
   handleCorrect: Dispatch<SetStateAction<boolean>>;
+  handleIncorrect: Dispatch<SetStateAction<boolean>>;
 }
 
 export default function ShelfAddress(props: ShelfAddressProps): JSX.Element {
   const [color, setColor] = useState('#C4C4C4');
+  const [hover, setHover] = useState(false);
   const handleClick = async () => {
     if (color != '#C4C4C4') return;
-    if (props.num == 42) {
+    if (props.correctAddress) {
       props.handleCorrect(true);
-      setColor('green');
+      setColor('#31A74B');
     } else {
+      props.handleIncorrect(true);
       setColor('red');
     }
   };
   return (
-    <button className={'address'} onClick={handleClick}>
+    <button
+      disabled={props.disabled}
+      className={`address${hover ? ' hover' : ''}`}
+      onClick={handleClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
       <svg
         width="40"
         height="40"

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -113,6 +113,10 @@ export default function Sidebar(props: sidebarProps): JSX.Element {
       name: '3. Dereferencing Pointers',
       link: PageURLs.EXERCISE_3,
     },
+    {
+      name: '4. Creating Pointers',
+      link: PageURLs.EXERCISE_4,
+    },
     {
       name: '6. Linking Objects with Pointers',
       link: PageURLs.EXERCISE_6,

diff --git a/src/pages/Conclusion.tsx b/src/pages/Conclusion.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import '../styles/Conclusion.scss';
 import { Link } from 'react-router-dom';
-import Group228 from '../../public/Group 228.svg';
+import ConclusionDiagram from '../../public/ConclusionDiagram.svg';
 import AppWrapper from '../components/AppWrapper';
 import NavButtons from '../components/NavButtons';
 import { HeaderSections } from '../types/globalTypes';
@@ -27,7 +27,7 @@ const Conclusion: FC = () => {
           </p>
 
           <div className="exercise-1-diagram diagram">
-            <img src={Group228} alt="Diagram" />
+            <img src={ConclusionDiagram} alt="Diagram" />
           </div>
 
           <div className="conclusion-footer ">

diff --git a/src/pages/Demo.tsx b/src/pages/Demo.tsx
@@ -18,6 +18,11 @@ const Demo: FC = () => {
   const [leftOffset, setLeftOffset] = useState(0);
   const [topOffset, setTopOffset] = useState(0);
   const [animatedPipi, setAnimatedPipi] = useState(Pipi);
+
+  const [clickedCorrectAddress, setClickedCorrectAddress] = useState(false);
+  const [clickedIncorrectAddress, setClickedIncorrectAddress] = useState(false);
+  const [selectionMade, setSelectionMade] = useState(false);
+
   const nums = Array.from({ length: 72 }, (_, index) => index + 1);
   const nums1 = nums.slice(0, 24);
   const nums2 = nums.slice(24, 48);
@@ -46,6 +51,18 @@ const Demo: FC = () => {
     }
   }, [animation]);
 
+  const handleCorrectAddressClick = () => {
+    setClickedCorrectAddress(true);
+    setClickedIncorrectAddress(false);
+    setAnimation(true);
+    setSelectionMade(true);
+  };
+
+  const handleIncorrectAddressClick = () => {
+    setClickedIncorrectAddress(true);
+    setSelectionMade(true);
+  };
+
   return (
     <div>
       <AppWrapper section={HeaderSections.DEMO_SECTION}>
@@ -66,7 +83,23 @@ const Demo: FC = () => {
             the correct address.
           </p>
 
-          <HintBox text="Click on the first address occupied by the box (the leftmost one)." />
+          <>
+            {clickedCorrectAddress && (
+              <HintBox
+                text="You clicked the correct address! Pipi found the basketball."
+                correct
+                noClose={true}
+              />
+            )}
+            {clickedIncorrectAddress && (
+              <HintBox
+                text="Click on the first address occupied by the box (the leftmost one)."
+                correct={false}
+                noClose={true}
+              />
+            )}
+            {!selectionMade && <HintBox text="" />}
+          </>
 
           {/* THE DEMO BOX */}
           <img
@@ -86,7 +119,9 @@ const Demo: FC = () => {
                 addressNums={nums1}
                 itemSpaceArray={itemSpaceArray1}
                 size={40}
-                handleCorrect={setAnimation}
+                disabled={clickedCorrectAddress}
+                handleCorrect={() => handleCorrectAddressClick()}
+                handleIncorrect={() => handleIncorrectAddressClick()}
               >
                 <div />
                 <img
@@ -108,7 +143,10 @@ const Demo: FC = () => {
                 addressNums={nums2}
                 itemSpaceArray={itemSpaceArray2}
                 size={40}
-                handleCorrect={setAnimation}
+                correctAddress={42}
+                disabled={clickedCorrectAddress}
+                handleCorrect={() => handleCorrectAddressClick()}
+                handleIncorrect={() => handleIncorrectAddressClick()}
               >
                 <Box letter="f" num={5} conf={false}></Box>
                 <div></div>
@@ -122,7 +160,9 @@ const Demo: FC = () => {
                 addressNums={nums3}
                 itemSpaceArray={itemSpaceArray3}
                 size={40}
-                handleCorrect={setAnimation}
+                disabled={clickedCorrectAddress}
+                handleCorrect={() => handleCorrectAddressClick()}
+                handleIncorrect={() => handleIncorrectAddressClick()}
                 style={{ margin: '0px' }}
               >
                 <div></div>

diff --git a/src/pages/Exercise3.tsx b/src/pages/Exercise3.tsx
@@ -43,6 +43,11 @@ const Exercise3: FC = () => {
   const [confetti, setConfetti] = useState(false);
   const [leftOffset, setLeftOffset] = useState(0);
   const [topOffset, setTopOffset] = useState(0);
+
+  const [clickedCorrectAddress, setClickedCorrectAddress] = useState(false);
+  const [clickedIncorrectAddress, setClickedIncorrectAddress] = useState(false);
+  const [selectionMade, setSelectionMade] = useState(false);
+
   const nums = Array.from({ length: 24 }, (_, index) => index + 1);
   const itemSpace = [1, 3, 1, 3, 2, 4, 2, 1, 1, 2, 1, 2, 1];
 
@@ -58,6 +63,19 @@ const Exercise3: FC = () => {
     window.addEventListener('resize', fixPipiPosition);
   }, []);
 
+  const handleCorrectAddressClick = () => {
+    setClickedCorrectAddress(true);
+    setClickedIncorrectAddress(false);
+    setConfetti(true);
+    setSelectionMade(true);
+  };
+
+  const handleIncorrectAddressClick = () => {
+    setClickedIncorrectAddress(true);
+    setClickedCorrectAddress(false);
+    setSelectionMade(true);
+  };
+
   return (
     <>
       <AppWrapper section={HeaderSections.EXERCISE_3}>
@@ -72,14 +90,33 @@ const Exercise3: FC = () => {
             Take PiPi to <span className="highlight">Box j</span> by clicking on
             the correct address.
           </p>
-          <HintBox text="Click on the first address occupied by the box (the leftmost one)." />
+          <>
+            {clickedCorrectAddress && (
+              <HintBox
+                text="You clicked the correct address! Pipi found the basketball."
+                correct
+                noClose={true}
+              />
+            )}
+            {clickedIncorrectAddress && (
+              <HintBox
+                text="Click on the first address occupied by the box (the leftmost one)."
+                correct={false}
+                noClose={true}
+              />
+            )}
+            {!selectionMade && <HintBox text="" />}
+          </>
           <div className="exercise3-wrap">
             <div className="exercise3-box">
               <Grid
                 addressNums={nums}
                 itemSpaceArray={itemSpace}
                 size={40}
-                handleCorrect={setConfetti}
+                correctAddress={11}
+                disabled={clickedCorrectAddress}
+                handleCorrect={() => handleCorrectAddressClick()}
+                handleIncorrect={() => handleIncorrectAddressClick()}
                 style={{ margin: '0px' }}
               >
                 <div></div>