start of a solution (#130)

* start of a solution for #115 : Sequential Question Listing * run lint fix command --------- Co-authored-by: Sanjna <[email protected]>
uclaacm · Nov 11, 2024 · 47d217c · 47d217c
1 parent 1962783
commit 47d217c
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "typescript": "^4.5.2",
     "url-loader": "^4.1.1",
     "webpack": "^5.61.0",
-    "webpack-cli": "^4.9.1",
+    "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.7.3",
     "webpack-manifest-plugin": "^4.1.1",
     "webpack-merge": "^5.8.0",

diff --git a/src/components/shared/Exercises/UnitCircleInput.tsx b/src/components/shared/Exercises/UnitCircleInput.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import '../../../styles/Exercises/UnitCircleInput.scss';
 
 interface UnitCircleInputProps {
@@ -15,6 +15,9 @@ interface CircleQuestion {
   id: number; //This sucks lol
 }
 
+// Put this inside the function, push on each initial render, only update on render?
+// let focusedList: boolean[] = [true, false, false];
+
 function UnitCircleInput({
   nextExercise,
   answers,
@@ -25,17 +28,73 @@ function UnitCircleInput({
     const handleChange = (event: { target: { value: string } }) => {
       setText(event.target.value, id);
     };
+    const [isInputFocused, setIsInputFocused] = useState(false);
+
+    useEffect(() => {
+      const input = document.getElementById(`unitcircle-check-box-${label}`);
+
+      // if (id === 0) {
+      //   focusedList.push(true);
+      // } else {
+      //   focusedList.push(false);
+      // }
+
+      const focusListener = () => {
+        setIsInputFocused(true);
+      };
+
+      const blurListener = () => {
+        setIsInputFocused(false);
+      };
+
+      if (input) {
+        input.addEventListener('focus', focusListener);
+        input.addEventListener('blur', blurListener);
+      }
+
+      // Clean up event listeners when component unmounts
+      return () => {
+        if (input) {
+          input.removeEventListener('focus', focusListener);
+          input.removeEventListener('blur', blurListener);
+        }
+      };
+    }, []);
+
+    // useEffect(() => {
+    //   for (let i = 0; i < focusedList.length; i++) {
+    //     if (inputText[id]) {
+    //       focusedList[i] = true;
+    //     }
+    //   }
+    //   for (let i = 1; i < focusedList.length; i++) {
+    //     if (focusedList[i] === false && !inputText[id - 1]) {
+    //       setIsInputFocused(true);
+    //       break;
+    //     }
+    //   }
+    // });
+
+    // console.log(focusedList[id]);
+
     /* lines 25-35, try to get component to look like this */
     return (
       <div id="unitcircle-question-container" key={id}>
-        <p id="unitcircle-check-question">
+        <p
+          id={
+            isInputFocused
+              ? 'unitcircle-check-question'
+              : 'unitcircle-check-question-faded'
+          }
+        >
           {label} = {direction}{' '}
         </p>
         <input
           type="text"
           className="unitcircle-check-box"
           onChange={handleChange}
           value={inputText[id]}
+          id={`unitcircle-check-box-${label}`}
         />
       </div>
     );

diff --git a/src/styles/Exercises/UnitCircleInput.scss b/src/styles/Exercises/UnitCircleInput.scss
@@ -35,6 +35,7 @@
   padding-left: 0;
 }
 
+/* use #8D8D8D for faded text */
 #unitcircle-check-question {
   @include font-styles();
   font-size: calc(13px + 1vw);
@@ -44,6 +45,17 @@
   margin-right: auto;
 }
 
+#unitcircle-check-question-faded {
+  @include font-styles();
+  @include font-styles();
+  color: #8d8d8d;
+  font-size: calc(13px + 1vw);
+  font-style: normal;
+  margin-bottom: 4vh;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .unitcircle-check-box {
   background: linear-gradient(#000, #000) center bottom 0 / calc(100% - 10px)
     2px no-repeat;

diff --git a/yarn.lock b/yarn.lock
@@ -1716,22 +1716,20 @@
     "@webassemblyjs/ast" "1.11.1"
     "@xtuc/long" "4.2.2"
 
-"@webpack-cli/configtest@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz"
-  integrity sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==
+"@webpack-cli/configtest@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-2.1.1.tgz#3b2f852e91dac6e3b85fb2a314fb8bef46d94646"
+  integrity sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==
 
-"@webpack-cli/info@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.1.tgz"
-  integrity sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==
-  dependencies:
-    envinfo "^7.7.3"
+"@webpack-cli/info@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-2.0.2.tgz#cc3fbf22efeb88ff62310cf885c5b09f44ae0fdd"
+  integrity sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==
 
-"@webpack-cli/serve@^1.6.1":
-  version "1.6.1"
-  resolved "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz"
-  integrity sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==
+"@webpack-cli/serve@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.5.tgz#325db42395cd49fe6c14057f9a900e427df8810e"
+  integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
@@ -3140,16 +3138,16 @@ combine-source-map@^0.8.0, combine-source-map@~0.8.0:
     lodash.memoize "~3.0.3"
     source-map "~0.5.3"
 
+commander@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz"
-  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
-
 commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz"
@@ -4765,10 +4763,10 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-interpret@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz"
-  integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
+interpret@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
+  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
 
 invariant@^2.2.2:
   version "2.2.4"
@@ -6324,6 +6322,13 @@ rechoir@^0.7.0:
   dependencies:
     resolve "^1.9.0"
 
+rechoir@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.8.0.tgz#49f866e0d32146142da3ad8f0eff352b3215ff22"
+  integrity sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==
+  dependencies:
+    resolve "^1.20.0"
+
 redent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz"
@@ -7541,22 +7546,23 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-webpack-cli@^4.9.1:
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.2.tgz"
-  integrity sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==
+webpack-cli@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.1.4.tgz#c8e046ba7eaae4911d7e71e2b25b776fcc35759b"
+  integrity sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.0"
-    "@webpack-cli/configtest" "^1.1.1"
-    "@webpack-cli/info" "^1.4.1"
-    "@webpack-cli/serve" "^1.6.1"
+    "@webpack-cli/configtest" "^2.1.1"
+    "@webpack-cli/info" "^2.0.2"
+    "@webpack-cli/serve" "^2.0.5"
     colorette "^2.0.14"
-    commander "^7.0.0"
-    execa "^5.0.0"
+    commander "^10.0.1"
+    cross-spawn "^7.0.3"
+    envinfo "^7.7.3"
     fastest-levenshtein "^1.0.12"
     import-local "^3.0.2"
-    interpret "^2.2.0"
-    rechoir "^0.7.0"
+    interpret "^3.1.1"
+    rechoir "^0.8.0"
     webpack-merge "^5.7.3"
 
 webpack-dev-middleware@^5.3.0: