Tweak shape placement and generation

components/ShapesBackground.tsx

@@ -28,8 +28,8 @@ export function ShapesBackground({ getConfig }: Props) {
       containerWidth == null ||
       containerHeight == null ||
       !(
-        router.pathname === "/" ||
-        router.pathname !== prevRoute ||
+        router.asPath === "/" ||
+        router.asPath !== prevRoute ||
         prevWidth < 0 ||
         (prevWidth <= MOBILE_WIDTH && MOBILE_WIDTH < width) ||
         (prevWidth > MOBILE_WIDTH && MOBILE_WIDTH >= width)
@@ -39,9 +39,9 @@ export function ShapesBackground({ getConfig }: Props) {
     }
 
     setPrevWidth(width);
-    setPrevRoute(router.pathname);
+    setPrevRoute(router.asPath);
     setConfig(getConfig?.(containerWidth, containerHeight) ?? {});
-  }, [getConfig, width, height, prevWidth, prevRoute, router.pathname]);
+  }, [getConfig, width, height, prevWidth, prevRoute, router.asPath]);
 
   return (
     <div className={styles.shapesContainer} ref={shapesContainerRef}>
@@ -186,8 +186,6 @@ export const defaultGetShapesConfig = ((pageWidth, pageHeight) => {
   }
 
   const defaultConfig: ShapesConfig = {};
-  shapeTypes.forEach((shape) => (defaultConfig[shape] = []));
-
   const gap = 20;
   const boxWidth = Math.max(300, (pageWidth - 800 - 2 * gap) / 2);
   const boxHeight = 400;
@@ -201,22 +199,27 @@ export const defaultGetShapesConfig = ((pageWidth, pageHeight) => {
       const size = y == 0 || y + 2 * boxHeight > pageHeight ? "big" : "small";
       const shape: ShapeType = getRandomShape(size);
       const verticalOffset = getVerticalOffset(boxHeight, shape);
-      const horizontalOffset = getHorizontalOffset(boxWidth, shape);
+      const horizontalOffset = getHorizontalOffset(boxWidth - 2 * gap, shape);
       const shapeWidth = shapesSizes[shape]["width"];
       const shapeHeight = shapesSizes[shape]["height"];
       const angle = getRandomAngle(shape);
       const colour = getRandomColour();
       const opacity = getRandomOpacity(colour);
 
+      defaultConfig[shape] ??= [];
       defaultConfig[shape]?.push({
         top: `${((y + verticalOffset) / 16).toFixed(5)}rem`,
         left:
           x == 0
-            ? `${((horizontalOffset / window.innerWidth) * 100).toFixed(5)}vw`
+            ? `${(((horizontalOffset + gap) / window.innerWidth) * 100).toFixed(
+                5
+              )}vw`
             : "unset",
         right:
           x == 1
-            ? `${((horizontalOffset / window.innerWidth) * 100).toFixed(5)}vw`
+            ? `${(((horizontalOffset + gap) / window.innerWidth) * 100).toFixed(
+                5
+              )}vw`
             : "unset",
         width: `${(shapeWidth / 16).toFixed(5)}rem`,
         height: `${(shapeHeight / 16).toFixed(5)}rem`,