animated Pipi in exercise3 using transition (#473)

* animated Pipi in exercise3 using transition * fix linter issues * fix window resizing issue * fix lint --------- Co-authored-by: lil <[email protected]>
uclaacm · Feb 27, 2024 · 019f4f8 · 019f4f8
1 parent 0c7b478
commit 019f4f8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 16 deletions.
diff --git a/src/pages/Demo.tsx b/src/pages/Demo.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState, useRef } from 'react';
 import LeftLadder from '../../public/LeftLadder.svg';
 import Pipi from '../../public/Pipi.svg';
 import PipiPointRight from '../../public/PipiPointRight.svg';
@@ -22,6 +22,7 @@ const Demo: FC = () => {
   const [clickedCorrectAddress, setClickedCorrectAddress] = useState(false);
   const [clickedIncorrectAddress, setClickedIncorrectAddress] = useState(false);
   const [selectionMade, setSelectionMade] = useState(false);
+  const pipiRef = useRef<HTMLImageElement>(null);
 
   const nums = Array.from({ length: 72 }, (_, index) => index + 1);
   const nums1 = nums.slice(0, 24);
@@ -32,10 +33,11 @@ const Demo: FC = () => {
   const itemSpaceArray3 = [2, 5, 2, 4, 1, 3, 1, 4];
 
   const fixPipiPosition = () => {
-    const pipiEl = document.getElementsByClassName('demo-pipi')[0];
-    const rect = pipiEl.getBoundingClientRect();
-    setLeftOffset(rect.left + window.scrollX);
-    setTopOffset(rect.top + window.scrollY);
+    if (pipiRef.current) {
+      const rect = pipiRef.current.getBoundingClientRect();
+      setLeftOffset(rect.left + window.scrollX);
+      setTopOffset(rect.top + window.scrollY);
+    }
   };
 
   useEffect(() => {
@@ -127,6 +129,7 @@ const Demo: FC = () => {
                 <img
                   className="demo-pipi"
                   src={Pipi}
+                  ref={pipiRef}
                   alt="Pipi"
                   style={{ visibility: animation ? 'hidden' : 'visible' }}
                 ></img>

diff --git a/src/pages/Exercise3.tsx b/src/pages/Exercise3.tsx
@@ -1,6 +1,7 @@
-import { FC, useState, useEffect } from 'react';
+import { FC, useState, useEffect, useRef } from 'react';
 import '../styles/Exercise3.scss';
 import Pipi from '../../public/Pipi.svg';
+import PipiPointRight from '../../public/PipiPointRight.svg';
 import AppWrapper from '../components/AppWrapper';
 import Box from '../components/Box';
 import Grid from '../components/Grid';
@@ -40,6 +41,8 @@ const question = [
 ];
 
 const Exercise3: FC = () => {
+  const [enableTransition, setEnableTransition] = useState(false);
+  const [animatedPipi, setAnimatedPipi] = useState(Pipi);
   const [confetti, setConfetti] = useState(false);
   const [leftOffset, setLeftOffset] = useState(0);
   const [topOffset, setTopOffset] = useState(0);
@@ -48,26 +51,51 @@ const Exercise3: FC = () => {
   const [clickedIncorrectAddress, setClickedIncorrectAddress] = useState(false);
   const [selectionMade, setSelectionMade] = useState(false);
 
+  const timeForTransition = useRef(false);
+  const wrapRef = useRef<HTMLDivElement>(null);
+
   const nums = Array.from({ length: 24 }, (_, index) => index + 1);
   const itemSpace = [1, 3, 1, 3, 2, 4, 2, 1, 1, 2, 1, 2, 1];
 
-  const fixPipiPosition = () => {
-    const box = document.getElementsByClassName('exercise3-wrap')[0];
-    const rect = box.getBoundingClientRect();
-    setLeftOffset(rect.left + window.scrollX);
-    setTopOffset(rect.top + window.scrollY + 15);
-  };
+  // for calculating new offset
+  const addressWidth = 40; // Replace with actual width if different
+
+  function fixPipiPosition() {
+    if (wrapRef.current) {
+      const rect = wrapRef.current.getBoundingClientRect();
+      setLeftOffset(rect.left + window.scrollX);
+      setTopOffset(rect.top + window.scrollY + 15);
+      if (clickedCorrectAddress) {
+        const newLeftOffset =
+          addressWidth * (9 - 1) + rect.left + window.scrollX;
+        setLeftOffset(newLeftOffset);
+      }
+    }
+  }
 
   useEffect(() => {
     fixPipiPosition();
     window.addEventListener('resize', fixPipiPosition);
-  }, []);
+  }, [clickedCorrectAddress]);
+
+  useEffect(() => {
+    if (enableTransition) {
+      setTimeout(() => {
+        setAnimatedPipi(PipiPointRight);
+        setConfetti(true);
+        setEnableTransition(false);
+      }, 1500);
+    }
+  }, [enableTransition]);
 
   const handleCorrectAddressClick = () => {
     setClickedCorrectAddress(true);
     setClickedIncorrectAddress(false);
     setConfetti(true);
     setSelectionMade(true);
+    setEnableTransition(true);
+    fixPipiPosition();
+    timeForTransition.current = true;
   };
 
   const handleIncorrectAddressClick = () => {
@@ -107,7 +135,7 @@ const Exercise3: FC = () => {
             )}
             {!selectionMade && <HintBox text="" />}
           </>
-          <div className="exercise3-wrap">
+          <div className="exercise3-wrap" ref={wrapRef}>
             <div className="exercise3-box">
               <Grid
                 addressNums={nums}
@@ -135,11 +163,12 @@ const Exercise3: FC = () => {
             </div>
             <img
               className="exercise3-pipi"
-              src={Pipi}
+              src={animatedPipi}
               alt="Pipi"
               style={{
                 left: leftOffset,
                 top: topOffset,
+                transition: enableTransition ? 'left 1.3s' : 'none',
               }}
             />
           </div>

diff --git a/src/styles/Exercise3.scss b/src/styles/Exercise3.scss
@@ -7,7 +7,7 @@
 
 .exercise3-pipi {
   position: absolute;
-  z-index: 2;
+  z-index: 3;
 }
 
 .exercise3-box {