diff --git a/src/pages/Exercise3.tsx b/src/pages/Exercise3.tsx
index 722a48f6..1bf6128a 100644
--- 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,14 +41,18 @@ 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);
-
+
const [clickedCorrectAddress, setClickedCorrectAddress] = useState(false);
const [clickedIncorrectAddress, setClickedIncorrectAddress] = useState(false);
const [selectionMade, setSelectionMade] = useState(false);
+ const timeForTransition = useRef(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];
@@ -63,12 +68,33 @@ const Exercise3: FC = () => {
window.addEventListener('resize', fixPipiPosition);
}, []);
+ useEffect(() => {
+ if (enableTransition){
+ setTimeout(() => {
+ setAnimatedPipi(PipiPointRight);
+ setConfetti(true);
+ }, 1500);
+ }
+}, [enableTransition])
+
+
+
const handleCorrectAddressClick = () => {
setClickedCorrectAddress(true);
setClickedIncorrectAddress(false);
setConfetti(true);
setSelectionMade(true);
- };
+ const addressWidth = 40; // Replace with actual width if different
+ const newLeftOffset = addressWidth * (9- 1) + leftOffset;
+ setLeftOffset(newLeftOffset);
+ timeForTransition.current=true;
+ }
+
+ useEffect(() => {
+ if (timeForTransition.current) {
+ setEnableTransition(true);
+ }
+ }, [leftOffset]); // Depend on `state1` to trigger this effect
const handleIncorrectAddressClick = () => {
setClickedIncorrectAddress(true);
@@ -133,13 +159,14 @@ const Exercise3: FC = () => {
-
diff --git a/src/styles/Exercise3.scss b/src/styles/Exercise3.scss
index d0814fbe..5a9acd6c 100644
--- a/src/styles/Exercise3.scss
+++ b/src/styles/Exercise3.scss
@@ -7,7 +7,8 @@
.exercise3-pipi {
position: absolute;
- z-index: 2;
+ z-index: 3;
+
}
.exercise3-box {