From 3e89f69ed0e6e5b4dbfd426f44382668fb803387 Mon Sep 17 00:00:00 2001
From: Michelle Meinert <michelle@significa.co>
Date: Tue, 16 May 2023 11:12:20 +0200
Subject: [PATCH 1/4] feat: desktop only

---
 components.198185.json                | 20 ++++++++++++++++----
 src/components/physics-section.svelte | 24 ++++++++++++++++++++----
 src/types/bloks.d.ts                  | 27 ++++++++++++++++++++-------
 3 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/components.198185.json b/components.198185.json
index e25e1273..76dd2e45 100644
--- a/components.198185.json
+++ b/components.198185.json
@@ -2095,7 +2095,7 @@
       "name": "physics-balloon-card",
       "display_name": null,
       "created_at": "2023-04-14T10:39:02.963Z",
-      "updated_at": "2023-04-14T10:40:57.966Z",
+      "updated_at": "2023-05-12T15:06:10.366Z",
       "id": 3811407,
       "schema": {
         "text": {
@@ -2127,6 +2127,9 @@
             }
           ],
           "exclude_empty_option": true
+        },
+        "isDesktopOnly": {
+          "type": "boolean"
         }
       },
       "image": null,
@@ -2146,11 +2149,14 @@
       "name": "physics-input",
       "display_name": null,
       "created_at": "2023-04-17T15:13:53.017Z",
-      "updated_at": "2023-04-17T15:14:00.636Z",
+      "updated_at": "2023-05-12T15:06:42.156Z",
       "id": 3830600,
       "schema": {
         "placeholder": {
           "type": "text"
+        },
+        "isDesktopOnly": {
+          "type": "boolean"
         }
       },
       "image": null,
@@ -2170,7 +2176,7 @@
       "name": "physics-rectangle-card",
       "display_name": null,
       "created_at": "2023-04-14T10:37:48.156Z",
-      "updated_at": "2023-04-14T10:38:41.658Z",
+      "updated_at": "2023-05-12T15:05:52.122Z",
       "id": 3811406,
       "schema": {
         "text": {
@@ -2192,6 +2198,9 @@
             }
           ],
           "exclude_empty_option": true
+        },
+        "isDesktopOnly": {
+          "type": "boolean"
         }
       },
       "image": null,
@@ -2211,13 +2220,16 @@
       "name": "physics-sticker",
       "display_name": null,
       "created_at": "2023-04-26T13:15:00.766Z",
-      "updated_at": "2023-04-26T16:25:36.409Z",
+      "updated_at": "2023-05-12T15:04:09.272Z",
       "id": 3889837,
       "schema": {
         "photo": {
           "type": "asset",
           "filetypes": ["images"],
           "asset_folder_id": 234280
+        },
+        "isDesktopOnly": {
+          "type": "boolean"
         }
       },
       "image": null,
diff --git a/src/components/physics-section.svelte b/src/components/physics-section.svelte
index f9e18c6c..32438339 100644
--- a/src/components/physics-section.svelte
+++ b/src/components/physics-section.svelte
@@ -357,13 +357,21 @@
         <BalloonCard
           block={item}
           bind:ref={refs[i]}
-          class={clsx('absolute w-fit', !engine && 'invisible')}
+          class={clsx(
+            'absolute w-fit',
+            !engine && 'invisible',
+            item.isDesktopOnly && 'invisible md:visible'
+          )}
         />
       {:else if item.component === 'physics-rectangle-card'}
         <RectangleCard
           block={item}
           bind:ref={refs[i]}
-          class={clsx('absolute w-fit', !engine && 'invisible')}
+          class={clsx(
+            'absolute w-fit',
+            !engine && 'invisible',
+            item.isDesktopOnly && 'invisible md:visible'
+          )}
         />
       {:else if item.component === 'physics-input'}
         <form on:submit|preventDefault={onSubmit} id={i + item._uid}>
@@ -372,14 +380,22 @@
             form={i + item._uid}
             block={item}
             bind:ref={refs[i]}
-            class={clsx('absolute w-fit', !engine && 'invisible')}
+            class={clsx(
+              'absolute w-fit',
+              !engine && 'invisible',
+              item.isDesktopOnly && 'invisible md:visible'
+            )}
           />
         </form>
       {:else if item.component === 'physics-sticker' && item.photo}
         {@const { width, height, src, alt } = getImageAttributes(item.photo)}
         <img
           bind:this={refs[i]}
-          class={clsx('absolute select-none drop-shadow-md', !engine && 'invisible')}
+          class={clsx(
+            'absolute select-none drop-shadow-md',
+            !engine && 'invisible',
+            item.isDesktopOnly && 'invisible md:visible'
+          )}
           {src}
           {alt}
           width={+width / 2}
diff --git a/src/types/bloks.d.ts b/src/types/bloks.d.ts
index ccc6135c..fa16325f 100644
--- a/src/types/bloks.d.ts
+++ b/src/types/bloks.d.ts
@@ -125,6 +125,15 @@ export interface BlogIndexStoryblok {
   [k: string]: any;
 }
 
+export interface RichtextStoryblok {
+  type: string;
+  content?: RichtextStoryblok[];
+  marks?: RichtextStoryblok[];
+  attrs?: any;
+  text?: string;
+  [k: string]: any;
+}
+
 export interface BlogPostStoryblok {
   cover?: AssetStoryblok;
   intro: string;
@@ -132,7 +141,7 @@ export interface BlogPostStoryblok {
   seo_title?: string;
   seo_description?: string;
   seo_og_image?: AssetStoryblok;
-  body?: any;
+  body?: RichtextStoryblok;
   _uid: string;
   component: 'blog-post';
   [k: string]: any;
@@ -279,7 +288,7 @@ export interface CanvasYellowStickerStoryblok {
 
 export interface CareerStoryblok {
   cover?: AssetStoryblok;
-  body?: any;
+  body?: RichtextStoryblok;
   seo_title?: string;
   seo_description?: string;
   seo_og_image?: AssetStoryblok;
@@ -334,7 +343,7 @@ export interface ClientLogoStoryblok {
 }
 
 export interface ColumnStoryblok {
-  content: any;
+  content: RichtextStoryblok;
   sticky?: boolean;
   _uid: string;
   component: 'column';
@@ -403,7 +412,7 @@ export interface FooterColumnInternalStoryblok {
 export interface GetAQuotePageStoryblok {
   title?: string;
   subtitle?: string;
-  timezone_text?: any;
+  timezone_text?: RichtextStoryblok;
   steps_title?: string;
   steps_subtitle?: string;
   steps?: GetAQuoteStepStoryblok[];
@@ -425,7 +434,7 @@ export interface HandbookStoryblok {
   cover?: AssetStoryblok;
   tagline?: string;
   intro?: string;
-  body?: any;
+  body?: RichtextStoryblok;
   seo_title?: string;
   seo_description?: string;
   seo_og_image?: AssetStoryblok;
@@ -560,6 +569,7 @@ export interface PhotoCardStoryblok {
 export interface PhysicsBalloonCardStoryblok {
   text?: string;
   theme?: 'inverted' | 'panel' | 'offset' | 'yellow';
+  isDesktopOnly?: boolean;
   _uid: string;
   component: 'physics-balloon-card';
   [k: string]: any;
@@ -567,6 +577,7 @@ export interface PhysicsBalloonCardStoryblok {
 
 export interface PhysicsInputStoryblok {
   placeholder?: string;
+  isDesktopOnly?: boolean;
   _uid: string;
   component: 'physics-input';
   [k: string]: any;
@@ -575,6 +586,7 @@ export interface PhysicsInputStoryblok {
 export interface PhysicsRectangleCardStoryblok {
   text?: string;
   theme?: 'transparent' | 'yellow';
+  isDesktopOnly?: boolean;
   _uid: string;
   component: 'physics-rectangle-card';
   [k: string]: any;
@@ -582,6 +594,7 @@ export interface PhysicsRectangleCardStoryblok {
 
 export interface PhysicsStickerStoryblok {
   photo?: AssetStoryblok;
+  isDesktopOnly?: boolean;
   _uid: string;
   component: 'physics-sticker';
   [k: string]: any;
@@ -602,7 +615,7 @@ export interface ProjectStoryblok {
   services?: string;
   links?: LinkStoryblok[];
   recognitions?: RecognitionStoryblok[];
-  body?: any;
+  body?: RichtextStoryblok;
   seo_title?: string;
   seo_description?: string;
   seo_og_image?: AssetStoryblok;
@@ -763,7 +776,7 @@ export interface ServiceTimelineSubrowStoryblok {
 }
 
 export interface StaticPageStoryblok {
-  body?: any;
+  body?: RichtextStoryblok;
   _uid: string;
   component: 'static-page';
   [k: string]: any;

From f005cc0590c0c07e7a3c1ca515f66b82777c51cb Mon Sep 17 00:00:00 2001
From: Michelle Meinert <michelle@significa.co>
Date: Thu, 18 May 2023 10:19:40 +0200
Subject: [PATCH 2/4] fix: property name

---
 components.198185.json                | 36 +++++++++++++++++----------
 src/components/physics-section.svelte | 18 ++++++--------
 src/types/bloks.d.ts                  |  8 +++---
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/components.198185.json b/components.198185.json
index 2816dbd0..d4125f7d 100644
--- a/components.198185.json
+++ b/components.198185.json
@@ -2095,7 +2095,7 @@
       "name": "physics-balloon-card",
       "display_name": null,
       "created_at": "2023-04-14T10:39:02.963Z",
-      "updated_at": "2023-05-12T15:06:10.366Z",
+      "updated_at": "2023-05-18T07:26:57.000Z",
       "id": 3811407,
       "schema": {
         "text": {
@@ -2128,7 +2128,7 @@
           ],
           "exclude_empty_option": true
         },
-        "isDesktopOnly": {
+        "is_desktop_only": {
           "type": "boolean"
         }
       },
@@ -2149,13 +2149,13 @@
       "name": "physics-input",
       "display_name": null,
       "created_at": "2023-04-17T15:13:53.017Z",
-      "updated_at": "2023-05-12T15:06:42.156Z",
+      "updated_at": "2023-05-18T07:27:49.440Z",
       "id": 3830600,
       "schema": {
         "placeholder": {
           "type": "text"
         },
-        "isDesktopOnly": {
+        "is_desktop_only": {
           "type": "boolean"
         }
       },
@@ -2176,11 +2176,13 @@
       "name": "physics-rectangle-card",
       "display_name": null,
       "created_at": "2023-04-14T10:37:48.156Z",
-      "updated_at": "2023-05-12T15:05:52.122Z",
+      "updated_at": "2023-05-18T07:25:20.056Z",
       "id": 3811406,
       "schema": {
         "text": {
-          "type": "text"
+          "type": "text",
+          "key": "text",
+          "pos": 0
         },
         "theme": {
           "type": "option",
@@ -2197,10 +2199,14 @@
               "name": "Yellow"
             }
           ],
-          "exclude_empty_option": true
+          "exclude_empty_option": true,
+          "key": "theme",
+          "pos": 1
         },
-        "isDesktopOnly": {
-          "type": "boolean"
+        "is_desktop_only": {
+          "type": "boolean",
+          "key": "isDesktopOnly",
+          "pos": 2
         }
       },
       "image": null,
@@ -2220,16 +2226,20 @@
       "name": "physics-sticker",
       "display_name": null,
       "created_at": "2023-04-26T13:15:00.766Z",
-      "updated_at": "2023-05-12T15:04:09.272Z",
+      "updated_at": "2023-05-18T07:26:39.476Z",
       "id": 3889837,
       "schema": {
         "photo": {
           "type": "asset",
           "filetypes": ["images"],
-          "asset_folder_id": 234280
+          "asset_folder_id": 234280,
+          "key": "photo",
+          "pos": 0
         },
-        "isDesktopOnly": {
-          "type": "boolean"
+        "is_desktop_only": {
+          "type": "boolean",
+          "key": "isDesktopOnly",
+          "pos": 1
         }
       },
       "image": null,
diff --git a/src/components/physics-section.svelte b/src/components/physics-section.svelte
index 32438339..6764b173 100644
--- a/src/components/physics-section.svelte
+++ b/src/components/physics-section.svelte
@@ -357,11 +357,7 @@
         <BalloonCard
           block={item}
           bind:ref={refs[i]}
-          class={clsx(
-            'absolute w-fit',
-            !engine && 'invisible',
-            item.isDesktopOnly && 'invisible md:visible'
-          )}
+          class={clsx('absolute w-fit', !engine && 'invisible')}
         />
       {:else if item.component === 'physics-rectangle-card'}
         <RectangleCard
@@ -369,8 +365,8 @@
           bind:ref={refs[i]}
           class={clsx(
             'absolute w-fit',
-            !engine && 'invisible',
-            item.isDesktopOnly && 'invisible md:visible'
+            !engine && 'invisible'
+            //item.is_desktop_only && 'hidden md:block'
           )}
         />
       {:else if item.component === 'physics-input'}
@@ -382,8 +378,8 @@
             bind:ref={refs[i]}
             class={clsx(
               'absolute w-fit',
-              !engine && 'invisible',
-              item.isDesktopOnly && 'invisible md:visible'
+              !engine && 'invisible'
+              //item.is_desktop_only && 'hidden md:block'
             )}
           />
         </form>
@@ -393,8 +389,8 @@
           bind:this={refs[i]}
           class={clsx(
             'absolute select-none drop-shadow-md',
-            !engine && 'invisible',
-            item.isDesktopOnly && 'invisible md:visible'
+            !engine && 'invisible'
+            //item.is_desktop_only && 'hidden md:block'
           )}
           {src}
           {alt}
diff --git a/src/types/bloks.d.ts b/src/types/bloks.d.ts
index 389a29e5..5c8faf0e 100644
--- a/src/types/bloks.d.ts
+++ b/src/types/bloks.d.ts
@@ -569,7 +569,7 @@ export interface PhotoCardStoryblok {
 export interface PhysicsBalloonCardStoryblok {
   text?: string;
   theme?: 'inverted' | 'panel' | 'offset' | 'yellow';
-  isDesktopOnly?: boolean;
+  is_desktop_only?: boolean;
   _uid: string;
   component: 'physics-balloon-card';
   [k: string]: any;
@@ -577,7 +577,7 @@ export interface PhysicsBalloonCardStoryblok {
 
 export interface PhysicsInputStoryblok {
   placeholder?: string;
-  isDesktopOnly?: boolean;
+  is_desktop_only?: boolean;
   _uid: string;
   component: 'physics-input';
   [k: string]: any;
@@ -586,7 +586,7 @@ export interface PhysicsInputStoryblok {
 export interface PhysicsRectangleCardStoryblok {
   text?: string;
   theme?: 'transparent' | 'yellow';
-  isDesktopOnly?: boolean;
+  is_desktop_only?: boolean;
   _uid: string;
   component: 'physics-rectangle-card';
   [k: string]: any;
@@ -594,7 +594,7 @@ export interface PhysicsRectangleCardStoryblok {
 
 export interface PhysicsStickerStoryblok {
   photo?: AssetStoryblok;
-  isDesktopOnly?: boolean;
+  is_desktop_only?: boolean;
   _uid: string;
   component: 'physics-sticker';
   [k: string]: any;

From 07255e6108f869dff436064081a33f2e501d1e4e Mon Sep 17 00:00:00 2001
From: Filipe Ferreira <filipeferreira@significa.co>
Date: Thu, 18 May 2023 12:17:55 +0100
Subject: [PATCH 3/4] fix(physics): desktop only bodies

---
 src/components/physics-section.svelte | 79 ++++++++++++++-------------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/src/components/physics-section.svelte b/src/components/physics-section.svelte
index 6764b173..1826da72 100644
--- a/src/components/physics-section.svelte
+++ b/src/components/physics-section.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { browser } from '$app/environment';
+  import { device } from '$lib/stores/device';
   import clsx from 'clsx';
   import { getScrollSpeed } from '$lib/utils/dom';
   import BalloonCard from './physics-blocks/balloon-card.svelte';
@@ -40,7 +40,6 @@
 
   // Mobile behaviour
   let timeout: ReturnType<typeof setTimeout>;
-  let isTouchDevice: boolean;
 
   // Limits for resize handling
   let boxGround: Body;
@@ -52,11 +51,11 @@
 
   // Items where Matter will be applied
   let refs: HTMLElement[] = Array(items?.length);
-  let boxes: {
+  let boxes: ({
     body: Body;
     elem: HTMLElement;
     render(): void;
-  }[];
+  } | null)[];
 
   /**
    * Should only react when:
@@ -151,26 +150,32 @@
     engine = Engine.create({ gravity: { scale: GRAVITY_DEFAULT_VALUE } });
 
     // Create boxes from current rendered items
-    const initialBoxes = refs.map((_, i) => ({
-      body: Bodies.rectangle(
-        containerRef.clientWidth * Math.random(),
-        containerRef.clientHeight / 2 - refs[i].clientHeight,
-        refs[i].clientWidth,
-        refs[i].clientHeight,
-        {
-          friction: 1
-        }
-      ),
-      elem: refs[i],
-      render() {
-        if (refs?.[i]?.clientHeight && refs?.[i]?.clientWidth) {
-          const { x, y } = this.body.position;
-          this.elem.style.top = `${y - refs[i].clientHeight / 2}px`;
-          this.elem.style.left = `${x - refs[i].clientWidth / 2}px`;
-          this.elem.style.transform = `rotate(${this.body.angle}rad)`;
-        }
+    const initialBoxes = refs.map((boxRef) => {
+      if (getComputedStyle(boxRef).display === 'block') {
+        return {
+          body: Bodies.rectangle(
+            containerRef.clientWidth * Math.random(),
+            containerRef.clientHeight / 2 - boxRef.clientHeight,
+            boxRef.clientWidth,
+            boxRef.clientHeight,
+            {
+              friction: 1
+            }
+          ),
+          elem: boxRef,
+          render() {
+            if (boxRef?.clientHeight && boxRef?.clientWidth) {
+              const { x, y } = this.body.position;
+              this.elem.style.top = `${y - boxRef.clientHeight / 2}px`;
+              this.elem.style.left = `${x - boxRef.clientWidth / 2}px`;
+              this.elem.style.transform = `rotate(${this.body.angle}rad)`;
+            }
+          }
+        };
+      } else {
+        return null;
       }
-    }));
+    });
 
     // Update boxes state with created boxes
     boxes = initialBoxes;
@@ -225,7 +230,7 @@
 
     // Add all of the bodies and walls to the world
     Composite.add(engine.world, [
-      ...initialBoxes.map((b) => b.body),
+      ...initialBoxes.filter((bx) => bx !== null).map((b) => b!.body),
       leftWall,
       rightWall,
       ceil,
@@ -235,7 +240,7 @@
 
     // Main loop
     (function run() {
-      boxes.forEach((box) => box.render());
+      boxes.forEach((box) => box?.render());
       window.requestAnimationFrame(run);
       Engine.update(engine, 1000 / 60);
     })();
@@ -261,7 +266,7 @@
 
   // Touch devices behaved badly with element drag so we do a small gravity effect on scroll instead
   const handleTouchDeviceScroll = () => {
-    if (isTouchDevice) {
+    if ($device === 'touch') {
       engine.gravity = {
         x: 0,
         y: 1,
@@ -331,10 +336,6 @@
   };
 
   onMount(() => {
-    if (browser) {
-      isTouchDevice = !window.matchMedia('(hover: hover)').matches;
-    }
-
     if (items) {
       import('matter-js').then((Matter) => {
         matterInstance = Matter;
@@ -357,7 +358,11 @@
         <BalloonCard
           block={item}
           bind:ref={refs[i]}
-          class={clsx('absolute w-fit', !engine && 'invisible')}
+          class={clsx(
+            'absolute w-fit',
+            !engine && 'invisible',
+            item.is_desktop_only && 'hidden md:block'
+          )}
         />
       {:else if item.component === 'physics-rectangle-card'}
         <RectangleCard
@@ -365,8 +370,8 @@
           bind:ref={refs[i]}
           class={clsx(
             'absolute w-fit',
-            !engine && 'invisible'
-            //item.is_desktop_only && 'hidden md:block'
+            !engine && 'invisible',
+            item.is_desktop_only && 'hidden md:block'
           )}
         />
       {:else if item.component === 'physics-input'}
@@ -378,8 +383,8 @@
             bind:ref={refs[i]}
             class={clsx(
               'absolute w-fit',
-              !engine && 'invisible'
-              //item.is_desktop_only && 'hidden md:block'
+              !engine && 'invisible',
+              item.is_desktop_only && 'hidden md:block'
             )}
           />
         </form>
@@ -389,8 +394,8 @@
           bind:this={refs[i]}
           class={clsx(
             'absolute select-none drop-shadow-md',
-            !engine && 'invisible'
-            //item.is_desktop_only && 'hidden md:block'
+            !engine && 'invisible',
+            item.is_desktop_only && 'hidden md:block'
           )}
           {src}
           {alt}

From 8dca17ff634139b7c48a9555a33fc7db5d33447e Mon Sep 17 00:00:00 2001
From: Filipe Ferreira <filipeferreira@significa.co>
Date: Thu, 18 May 2023 14:23:39 +0100
Subject: [PATCH 4/4] feat(physics): improved resize handler

---
 src/components/physics-section.svelte | 82 ++++++++++++++++++---------
 1 file changed, 54 insertions(+), 28 deletions(-)

diff --git a/src/components/physics-section.svelte b/src/components/physics-section.svelte
index 1826da72..ce1504e9 100644
--- a/src/components/physics-section.svelte
+++ b/src/components/physics-section.svelte
@@ -33,6 +33,24 @@
 
   // Quantity of initial items
   let initialBoxesN = items?.length ?? 0;
+  let currentBodies = 0;
+
+  $: if (currentBodies > 0) {
+    const newBoxes = getBoxes(matterInstance);
+
+    // add limits to engine
+    matterInstance.Composite.add(engine.world, [
+      ...newBoxes.filter((bx) => bx !== null).map((b) => b!.body)
+    ]);
+
+    // remove old boxes from engine
+    boxes
+      .filter((bx) => bx !== null)
+      .forEach((box) => matterInstance.Composite.remove(engine.world, box!.body));
+
+    // update boxes state as source of truth
+    boxes = newBoxes;
+  }
 
   // Active engine
   let engine: Engine;
@@ -103,6 +121,38 @@
     }
   }
 
+  const getBoxes = (matter: typeof Matter) => {
+    // Create boxes from current rendered items
+    const boxes = refs.map((boxRef) => {
+      if (getComputedStyle(boxRef).display === 'block') {
+        return {
+          body: matter.Bodies.rectangle(
+            containerRef.clientWidth * Math.random(),
+            containerRef.clientHeight / 2 - boxRef.clientHeight,
+            boxRef.clientWidth,
+            boxRef.clientHeight,
+            {
+              friction: 1
+            }
+          ),
+          elem: boxRef,
+          render() {
+            if (boxRef?.clientHeight && boxRef?.clientWidth) {
+              const { x, y } = this.body.position;
+              this.elem.style.top = `${y - boxRef.clientHeight / 2}px`;
+              this.elem.style.left = `${x - boxRef.clientWidth / 2}px`;
+              this.elem.style.transform = `rotate(${this.body.angle}rad)`;
+            }
+          }
+        };
+      } else {
+        return null;
+      }
+    });
+
+    return boxes;
+  };
+
   const getLimits = (matter: typeof Matter) => {
     const ceil = matter.Bodies.rectangle(
       containerRef.clientWidth / 2,
@@ -143,39 +193,13 @@
     const Engine = matter.Engine,
       MouseConstraint = matter.MouseConstraint,
       Mouse = matter.Mouse,
-      Composite = matter.Composite,
-      Bodies = matter.Bodies;
+      Composite = matter.Composite;
 
     // Create engine
     engine = Engine.create({ gravity: { scale: GRAVITY_DEFAULT_VALUE } });
 
     // Create boxes from current rendered items
-    const initialBoxes = refs.map((boxRef) => {
-      if (getComputedStyle(boxRef).display === 'block') {
-        return {
-          body: Bodies.rectangle(
-            containerRef.clientWidth * Math.random(),
-            containerRef.clientHeight / 2 - boxRef.clientHeight,
-            boxRef.clientWidth,
-            boxRef.clientHeight,
-            {
-              friction: 1
-            }
-          ),
-          elem: boxRef,
-          render() {
-            if (boxRef?.clientHeight && boxRef?.clientWidth) {
-              const { x, y } = this.body.position;
-              this.elem.style.top = `${y - boxRef.clientHeight / 2}px`;
-              this.elem.style.left = `${x - boxRef.clientWidth / 2}px`;
-              this.elem.style.transform = `rotate(${this.body.angle}rad)`;
-            }
-          }
-        };
-      } else {
-        return null;
-      }
-    });
+    const initialBoxes = getBoxes(matter);
 
     // Update boxes state with created boxes
     boxes = initialBoxes;
@@ -247,6 +271,8 @@
   };
 
   const handleResize = () => {
+    currentBodies = refs?.filter((ref) => getComputedStyle(ref).display === 'block').length || 0;
+
     // re-calculate limits
     const { ground, leftWall, rightWall } = getLimits(matterInstance);