make hint box highlight, disable address buttons on correct, and fix …

…ex 3
uclaacm · Feb 26, 2024 · 5720b52 · 5720b52
1 parent 97a6b21
commit 5720b52
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 20 deletions.
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
@@ -6,6 +6,8 @@ export interface GridProps {
   size: number;
   addressNums: number[];
   itemSpaceArray: number[];
+  correctAddress?: number;
+  disabled: boolean;
   handleCorrect: Dispatch<SetStateAction<boolean>>;
   handleIncorrect: Dispatch<SetStateAction<boolean>>;
   style?: CSSProperties;
@@ -31,6 +33,8 @@ 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>

diff --git a/src/components/HintBox.tsx b/src/components/HintBox.tsx
@@ -9,28 +9,27 @@ interface HintBoxProps {
 
 function HintBox(props: HintBoxProps): JSX.Element {
   const [expanded, setExpanded] = useState(false);
-  const [selectionMade] = useState(false);
 
   const handleToggle = () => {
-    if (!props.noClose || !expanded) {
+    if (props.noClose && !expanded) {
       setExpanded(!expanded);
     }
   };
 
-  useEffect(() => {
-    if (selectionMade) {
-      setExpanded(true);
-    }
-  }, [selectionMade]);
-
   useEffect(() => {
     setExpanded(props.correct || false);
   }, [props.correct]);
 
   return (
     <div className="hintbox-container">
       <div
-        className={`hintbox${expanded ? ' expanded' : ''}`}
+        className={`hintbox${expanded ? ' expanded' : ''} ${
+          props.correct === undefined
+            ? ''
+            : props.correct
+            ? 'correct'
+            : 'incorrect'
+        }`}
         onClick={handleToggle}
       >
         <div className="hintbox-title">

diff --git a/src/components/ShelfAddress.tsx b/src/components/ShelfAddress.tsx
@@ -3,24 +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/pages/Demo.tsx b/src/pages/Demo.tsx
@@ -60,7 +60,6 @@ const Demo: FC = () => {
 
   const handleIncorrectAddressClick = () => {
     setClickedIncorrectAddress(true);
-    setClickedCorrectAddress(false);
     setSelectionMade(true);
   };
 
@@ -95,6 +94,7 @@ const Demo: FC = () => {
             {clickedIncorrectAddress && (
               <HintBox
                 text="Click on the first address occupied by the box (the leftmost one)."
+                correct={false}
                 noClose={true}
               />
             )}
@@ -119,7 +119,7 @@ const Demo: FC = () => {
                 addressNums={nums1}
                 itemSpaceArray={itemSpaceArray1}
                 size={40}
-                //handleCorrect={setAnimation}
+                disabled={clickedCorrectAddress}
                 handleCorrect={() => handleCorrectAddressClick()}
                 handleIncorrect={() => handleIncorrectAddressClick()}
               >
@@ -143,7 +143,8 @@ const Demo: FC = () => {
                 addressNums={nums2}
                 itemSpaceArray={itemSpaceArray2}
                 size={40}
-                //handleCorrect={setAnimation}
+                correctAddress={42}
+                disabled={clickedCorrectAddress}
                 handleCorrect={() => handleCorrectAddressClick()}
                 handleIncorrect={() => handleIncorrectAddressClick()}
               >
@@ -159,7 +160,7 @@ const Demo: FC = () => {
                 addressNums={nums3}
                 itemSpaceArray={itemSpaceArray3}
                 size={40}
-                //handleCorrect={setAnimation}
+                disabled={clickedCorrectAddress}
                 handleCorrect={() => handleCorrectAddressClick()}
                 handleIncorrect={() => handleIncorrectAddressClick()}
                 style={{ margin: '0px' }}

diff --git a/src/pages/Exercise3.tsx b/src/pages/Exercise3.tsx
@@ -101,6 +101,7 @@ const Exercise3: FC = () => {
             {clickedIncorrectAddress && (
               <HintBox
                 text="Click on the first address occupied by the box (the leftmost one)."
+                correct={false}
                 noClose={true}
               />
             )}
@@ -112,7 +113,8 @@ const Exercise3: FC = () => {
                 addressNums={nums}
                 itemSpaceArray={itemSpace}
                 size={40}
-                //handleCorrect={setConfetti}
+                correctAddress={11}
+                disabled={clickedCorrectAddress}
                 handleCorrect={() => handleCorrectAddressClick()}
                 handleIncorrect={() => handleIncorrectAddressClick()}
                 style={{ margin: '0px' }}

diff --git a/src/pages/Exercise4.tsx b/src/pages/Exercise4.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import '../styles/Exercise4.scss';
-import Exercise4Diagram2 from '../../public/Exercise4Diagram2.svg';
 import Exercise4Diagram1 from '../../public/Exercise4Diagram1.svg';
+import Exercise4Diagram2 from '../../public/Exercise4Diagram2.svg';
 import AppWrapper from '../components/AppWrapper';
 
 import NavButtons from '../components/NavButtons';

diff --git a/src/styles/HintBox.scss b/src/styles/HintBox.scss
@@ -18,7 +18,7 @@
 
   // Highlighting for correct answers
   &.correct {
-    border: 2px solid green;
+    border: 2px solid $accent-2-color;
   }
 
   // Highlighting for incorrect answers

diff --git a/src/styles/ShelfAddress.scss b/src/styles/ShelfAddress.scss
@@ -9,7 +9,7 @@
   width: 41px;
 }
 
-.address:hover {
+.address.hover {
   background-color: gray;
   cursor: pointer;
 }