153 animate pipi (#422)

* add animation * delay box open and confetti until animation finishes * fix lint * fix lint * add back margin * fix lint * fix resizing window issue * formatting * fix pipi css on exercise 3 * fix lint * more css fixes
uclaacm · Feb 5, 2024 · ae77371 · ae77371
1 parent 6bb910b
commit ae77371
Show file tree

Hide file tree

Showing 10 changed files with 241 additions and 120 deletions.
diff --git a/public/Pipi.svg b/public/Pipi.svg
diff --git a/public/PipiPointRight.svg b/public/PipiPointRight.svg
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
@@ -1,12 +1,13 @@
 import '../styles/Grid.scss';
-import { Dispatch, SetStateAction } from 'react';
+import { CSSProperties, Dispatch, SetStateAction } from 'react';
 import ShelfAddress from './ShelfAddress';
 
 export interface GridProps {
   size: number;
   addressNums: number[];
   itemSpaceArray: number[];
   handleCorrect: Dispatch<SetStateAction<boolean>>;
+  style?: CSSProperties;
   children?: JSX.Element[];
 }
 
@@ -20,7 +21,7 @@ export default function Grid(props: GridProps): JSX.Element {
     gridTemplateColumns: shelfArray.join(' '),
   };
   return (
-    <div className="grid-container">
+    <div className="grid-container" style={{ ...props.style }}>
       <div className="item-container" style={{ ...itemStyles }}>
         {props.children}
       </div>

diff --git a/src/pages/Demo.tsx b/src/pages/Demo.tsx
@@ -1,6 +1,7 @@
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import LeftLadder from '../../public/LeftLadder.svg';
 import Pipi from '../../public/Pipi.svg';
+import PipiPointRight from '../../public/PipiPointRight.svg';
 import RightLadder from '../../public/RightLadder.svg';
 import AppWrapper from '../components/AppWrapper';
 import Box from '../components/Box';
@@ -12,14 +13,39 @@ import '../assets/WestwoodSans-Regular.ttf';
 import '../styles/Demo.scss';
 
 const Demo: FC = () => {
+  const [animation, setAnimation] = useState(false);
   const [confetti, setConfetti] = useState(false);
+  const [leftOffset, setLeftOffset] = useState(0);
+  const [topOffset, setTopOffset] = useState(0);
+  const [animatedPipi, setAnimatedPipi] = useState(Pipi);
   const nums = Array.from({ length: 72 }, (_, index) => index + 1);
   const nums1 = nums.slice(0, 24);
   const nums2 = nums.slice(24, 48);
   const nums3 = nums.slice(48, 72);
-  const itemSpaceArray1 = [6, 3, 2, 2, 2, 3, 4, 1, 3];
+  const itemSpaceArray1 = [2, 3, 3, 2, 2, 2, 3, 4, 2, 3];
   const itemSpaceArray2 = [5, 1, 6, 2, 3, 4, 3];
   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);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', fixPipiPosition);
+  }, []);
+  useEffect(() => {
+    if (animation) {
+      fixPipiPosition();
+      setTimeout(() => {
+        setAnimatedPipi(PipiPointRight);
+        setConfetti(true);
+      }, 5000);
+    }
+  }, [animation]);
+
   return (
     <div>
       <AppWrapper section={HeaderSections.DEMO_SECTION}>
@@ -43,30 +69,46 @@ const Demo: FC = () => {
           <HintBox text="Click on the first address occupied by the box (the leftmost one)." />
 
           {/* THE DEMO BOX */}
-          <div className="wrap">
+          <img
+            className="pipi-animated"
+            src={animatedPipi}
+            alt="Pipi"
+            style={{
+              display: animation ? 'flex' : 'none',
+              left: leftOffset,
+              top: topOffset,
+            }}
+          ></img>
+          <div className="demo-wrap">
             <img className="ladder" src={LeftLadder} alt="LeftLadder" />
             <div className="demobox">
               <Grid
                 addressNums={nums1}
                 itemSpaceArray={itemSpaceArray1}
                 size={40}
-                handleCorrect={setConfetti}
+                handleCorrect={setAnimation}
               >
-                <img className="demo-pipi" src={Pipi} alt="Pipi"></img>
+                <div />
+                <img
+                  className="demo-pipi"
+                  src={Pipi}
+                  alt="Pipi"
+                  style={{ visibility: animation ? 'hidden' : 'visible' }}
+                ></img>
                 <Box letter="a" num={3} conf={false}></Box>
-                <div></div>
+                <div />
                 <Box letter="b" num={2} conf={false}></Box>
-                <div></div>
+                <div />
                 <Box letter="c" num={3} conf={false}></Box>
                 <Box letter="d" num={4} conf={false}></Box>
-                <div></div>
+                <div />
                 <Box letter="e" num={2} conf={false}></Box>
               </Grid>
               <Grid
                 addressNums={nums2}
                 itemSpaceArray={itemSpaceArray2}
                 size={40}
-                handleCorrect={setConfetti}
+                handleCorrect={setAnimation}
               >
                 <Box letter="f" num={5} conf={false}></Box>
                 <div></div>
@@ -80,7 +122,8 @@ const Demo: FC = () => {
                 addressNums={nums3}
                 itemSpaceArray={itemSpaceArray3}
                 size={40}
-                handleCorrect={setConfetti}
+                handleCorrect={setAnimation}
+                style={{ margin: '0px' }}
               >
                 <div></div>
                 <Box letter="k" num={5} conf={false}></Box>

diff --git a/src/pages/Exercise3.tsx b/src/pages/Exercise3.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, useState, useEffect } from 'react';
 import '../styles/Exercise3.scss';
 import Pipi from '../../public/Pipi.svg';
 import AppWrapper from '../components/AppWrapper';
@@ -26,8 +26,23 @@ const question = [
 
 const Exercise3: FC = () => {
   const [confetti, setConfetti] = useState(false);
+  const [leftOffset, setLeftOffset] = useState(0);
+  const [topOffset, setTopOffset] = useState(0);
   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);
+  };
+
+  useEffect(() => {
+    fixPipiPosition();
+    window.addEventListener('resize', fixPipiPosition);
+  }, []);
+
   return (
     <>
       <AppWrapper section={HeaderSections.EXERCISE_3}>
@@ -43,13 +58,14 @@ const Exercise3: FC = () => {
             the correct address.
           </p>
           <HintBox text="Click on the first address occupied by the box (the leftmost one)." />
-          <div className="wrap">
-            <div className="Exercise-box">
+          <div className="exercise3-wrap">
+            <div className="exercise3-box">
               <Grid
                 addressNums={nums}
                 itemSpaceArray={itemSpace}
                 size={40}
                 handleCorrect={setConfetti}
+                style={{ margin: '0px' }}
               >
                 <div></div>
                 <Box letter="h" num={3} conf={false}></Box>
@@ -65,7 +81,15 @@ const Exercise3: FC = () => {
                 <Box letter="m" num={3} conf={false}></Box>
               </Grid>
             </div>
-            <img className="exercise-3-pipi" src={Pipi} alt="Pipi" />
+            <img
+              className="exercise3-pipi"
+              src={Pipi}
+              alt="Pipi"
+              style={{
+                left: leftOffset,
+                top: topOffset,
+              }}
+            />
           </div>
           <h3>
             Pipi now wants to replace the basketball with a soccer ball. What is

diff --git a/src/pages/Lesson1.tsx b/src/pages/Lesson1.tsx
@@ -29,7 +29,7 @@ const Lesson1: FC = () => {
             the memory in your computer is also labeled with addresses.
           </p>
           <div className="diagram">
-            <img src={PipiBox} className="lesson-1-pipi"></img>
+            <img src={PipiBox} className="lesson1-pipi"></img>
           </div>
           <p>
             Every time your program creates a variable, it places the variable

diff --git a/src/styles/Demo.scss b/src/styles/Demo.scss
@@ -7,58 +7,49 @@ $header-1: 50px;
 $description: 20px;
 $header-height: 8vh;
 
-// General Layout
-//=======================================
-#layout {
-  display: flex;
-  min-height: calc(100vh - 2 * #{$layout-wsize});
-  padding: $layout-htsize $layout-wsize $layout-hbsize $layout-wsize;
-
-  .header {
-    font-size: $header-1;
-  }
-
-  .description {
-    font-size: $description;
-    width: 100%;
-  }
-
-  .address-wrapper {
-    display: flex;
-    justify-content: center;
-  }
-
-  #inbox-wrapper {
-    margin: 2rem;
-  }
-
-  .demo-pipi {
-    height: 70px;
-    object-fit: cover;
-    width: 50px;
-  }
-
-  .ladder {
-    height: 200px;
-    object-fit: cover;
-    width: 50px;
-  }
-}
-
 p {
   margin: 0;
 }
 
-.wrap {
-  align-items: flex-end;
+.demo-wrap {
+  align-items: flex-start;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   margin-bottom: 2.5em;
   margin-top: 2.5em;
 }
 
+.ladder {
+  height: 510px;
+  margin-top: 50px;
+}
+
 .demobox {
   margin-left: -40px;
   margin-right: -40px;
 }
+
+.pipi-animated {
+  animation: pipi-animation 5s both;
+  position: absolute;
+  z-index: 3;
+}
+
+@keyframes pipi-animation {
+  0% {
+    transform: translateX(0) translateY(0);
+  }
+
+  15% {
+    transform: translateX(-95px);
+  }
+
+  45% {
+    transform: translateY(192px) translateX(-95px);
+  }
+
+  100% {
+    transform: translateY(192px) translateX(550px);
+  }
+}
diff --git a/src/styles/Exercise3.scss b/src/styles/Exercise3.scss
@@ -1,13 +1,15 @@
-.wrap {
+.exercise3-wrap {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  margin-bottom: 2.5em;
   margin-top: 2.5em;
 }
 
-.exercise-3-pipi {
+.exercise3-pipi {
   position: absolute;
-  top: 515px;
   z-index: 2;
 }
+
+.exercise3-box {
+  margin-top: 150px;
+}
diff --git a/src/styles/Grid.scss b/src/styles/Grid.scss
@@ -4,5 +4,5 @@
 }
 
 .grid-container {
-  margin-top: 150px;
+  margin-bottom: 150px;
 }
diff --git a/src/styles/Lesson1.scss b/src/styles/Lesson1.scss
@@ -3,7 +3,7 @@
 // Pipi
 //=======================================
 
-.lesson-1-pipi {
+.lesson1-pipi {
   display: block;
   margin-left: auto;
   margin-right: auto;