onclick animation added to cells

Author: Kate-Hooker

client/components/Cell.tsx

@@ -1,24 +1,39 @@
 import { useState } from 'react'
-import { RiCheckboxBlankFill, RiCheckboxBlankLine } from 'react-icons/ri' // Import icons
+import { RiCheckboxBlankFill, RiCheckboxBlankLine } from 'react-icons/ri'
 
 interface Props {
   trackNumber: number
   cellNumber: number
 }
 
 export default function Cell({ trackNumber, cellNumber }: Props) {
-  const [isActive, setIsActive] = useState(false)
+  const [isActive, setIsActive] = useState<boolean>(false)
+  const [showImage, setShowImage] = useState<boolean>(false)
 
   function handleClick() {
     setIsActive(!isActive)
+
+    // Show the image immediately
+    setShowImage(true)
+
+    // Hide the image after 3 seconds, but start fading after 1 second
+    setTimeout(() => {
+      setShowImage(false)
+    }, 3000)
+
+    // Start the fade-out after 1 second
+    setTimeout(() => {
+      setShowImage(false)
+    }, 1000)
   }
 
-  const iconStyle = {
+  const iconStyle: React.CSSProperties = {
     width: '100%',
     height: '100%',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    position: 'relative', // Add relative positioning to the container
   }
 
   return (
@@ -36,6 +51,21 @@ export default function Cell({ trackNumber, cellNumber }: Props) {
           ) : (
             <RiCheckboxBlankLine size="100%" />
           )}
+          {showImage && (
+            <img
+              src={`../../public/images/lego${cellNumber}.png`}
+              alt="Small"
+              className="animated-image"
+              style={{
+                position: 'absolute',
+                width: '80px', // Adjust the size as needed
+                height: 'auto', // Adjust the size as needed
+                animation: 'moveDown 2s ease-in-out, fadeOut 2s ease-in-out',
+                top: '0',
+                left: '0',
+              }}
+            />
+          )}
         </div>
       </button>
     </div>

client/styles/index.scss

@@ -269,3 +269,23 @@ $brick-colors: (
 		border-width: 5px;
 	}
 }
+
+/////////////
+@keyframes moveDown {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(200px); /* Adjust the distance to move */
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+////////////

package-lock.json

@@ -29,6 +29,7 @@
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@react-spring/web": "^9.7.3",
     "express": "^4.17.2",
     "framer-motion": "^10.16.4",
     "knex": "^2.5.1",