feat: handled rounded body using circles bodies, fixed link click, fi…

…xed jumbotron images over second section
SocialGouv · Oct 24, 2024 · 076be34 · 076be34
1 parent 0a8abb5
commit 076be34
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 22 deletions.
diff --git a/webapp/src/components/landing/EllipsePositionnedImages.tsx b/webapp/src/components/landing/EllipsePositionnedImages.tsx
@@ -73,6 +73,7 @@ const EllipsePositionnedImages = ({
           left: "50%",
           top: "50%",
           rotate: index % 2 === 0 ? 5 : -7.5,
+          zIndex: 2,
         }}
       >
         <Image

diff --git a/webapp/src/components/landing/PartnerSectionWithPhysics.tsx b/webapp/src/components/landing/PartnerSectionWithPhysics.tsx
@@ -10,8 +10,10 @@ import {
 import { useInView } from "framer-motion";
 import {
   Bodies,
+  Body,
   Engine,
   Events,
+  IBodyDefinition,
   IChamferableBodyDefinition,
   Mouse,
   MouseConstraint,
@@ -77,24 +79,47 @@ const PartnerSectionWithPhysics = ({}: PartnerSectionProps) => {
 
     const partnerElements =
       document.getElementsByClassName(partnerItemClassName);
+
+    const bodyProps: IBodyDefinition = {
+      restitution: 0.5,
+      friction: 0.3,
+      slop: 0.01,
+      density: 0.01,
+      render: {
+        visible: false,
+      },
+    };
     // Creates Matter.js bodies dynamically for each partner element
     const partnerBodies = Array.from(partnerElements).map((element, index) => {
       const html_element = element as HTMLElement;
       const width = html_element.offsetWidth;
       const height = html_element.offsetHeight;
       const x = html_element.offsetLeft + width / 2;
       const y = html_element.offsetTop + height / 2;
+      const isSquare = width === height;
+
+      let body;
+      if (isSquare) {
+        body = Bodies.circle(x, y, width / 2, bodyProps);
+      } else {
+        const rectangle = Bodies.rectangle(x, y, width - height, height);
+        const leftCircle = Bodies.circle(
+          x - (width - height) / 2,
+          y,
+          height / 2
+        );
+        const rightCircle = Bodies.circle(
+          x + (width - height) / 2,
+          y,
+          height / 2
+        );
+
+        body = Body.create({
+          ...bodyProps,
+          parts: [rectangle, leftCircle, rightCircle],
+        });
+      }
 
-      const body = Bodies.rectangle(x, y, width, height, {
-        restitution: 0.5, // Bounciness
-        friction: 0.3,
-        slop: 0.01,
-        density: 0.01,
-        render: {
-          // remove border
-          visible: false,
-        },
-      });
       World.add(engine.world, body);
       return { body, element: html_element }; // Returns the body and the DOM element
     });
@@ -174,10 +199,7 @@ const PartnerSectionWithPhysics = ({}: PartnerSectionProps) => {
     };
   }, [arePhysicsTriggered]);
 
-  // TODO: Make rounded border rectangles
   // TODO: Handle scroll when in canvas
-  // TODO: Handle link click when in canvas
-  // TODO: Fix image hitboxes
 
   return (
     <Flex
@@ -209,6 +231,8 @@ const PartnerSectionWithPhysics = ({}: PartnerSectionProps) => {
           fontWeight={"bold"}
           fontSize={{ lg: "lg" }}
           passHref
+          w={"fit-content"}
+          zIndex={10}
         >
           Voir toutes les entreprises
           <Box as="br" display={{ base: "block", lg: "none" }} /> engagées →
@@ -227,35 +251,43 @@ const PartnerSectionWithPhysics = ({}: PartnerSectionProps) => {
           <Flex
             key={`partner-${index}`}
             flexDir={index % 2 === 0 ? "row" : "row-reverse"}
+            align={"center"}
             justifyContent={{ base: "start", lg: "center" }}
-            mb={4}
-            gap={2}
+            mb={6}
+            gap={4}
             h={{ base: 14, lg: 14 }}
           >
             <Flex
               alignItems="center"
               justifyContent="center"
               bg="white"
               rounded="full"
-              h={14}
-              w={"fit-content"}
-              p={4}
+              h={{ base: 12, lg: 20 }}
+              p={2}
               className={partnerItemClassName}
               pointerEvents={"none"}
+              userSelect={"none"}
             >
-              <Image src={partner.img} alt={`Logo de ${partner.name}`} />
+              <Image
+                src={partner.img}
+                alt={`Logo de ${partner.name}`}
+                w={"auto"}
+                h={"full"}
+              />
             </Flex>
             <Flex
               as={Text}
+              justify={"center"}
               align="center"
               bg="black"
               fontWeight="extrabold"
               rounded="full"
-              fontSize="xl"
-              h={14}
+              fontSize={{ base: "2xl", lg: "3xl" }}
+              h={{ base: 12, lg: 14 }}
               p={4}
-              pointerEvents={"none"}
               className={partnerItemClassName}
+              pointerEvents={"none"}
+              userSelect={"none"}
             >
               {partner.promo_label}
             </Flex>