From 93f1ea741ddf7adfd854b5d927536802b049c413 Mon Sep 17 00:00:00 2001
From: Ameya Shenoy <shenoy.ameya@gmail.com>
Date: Sat, 7 Jun 2025 15:49:11 +0530
Subject: [PATCH] feat: theme fix

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
---
 frontend/src/components/PhysicsSimulation.tsx | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/PhysicsSimulation.tsx b/frontend/src/components/PhysicsSimulation.tsx
index 0c05f76..1386caa 100644
--- a/frontend/src/components/PhysicsSimulation.tsx
+++ b/frontend/src/components/PhysicsSimulation.tsx
@@ -13,31 +13,25 @@ export function World() {
     const randomY = Math.floor(Math.random() * (height - 2 * radius)) + radius;
     return [randomX, randomY];
   };
-  const getBgColor = () => {
-    if (typeof window !== "undefined") {
-      return getComputedStyle(document.documentElement)
-        .getPropertyValue("--color-background")
-        .trim();
-    }
-  };
-  const getFgColor = () => {
-    if (typeof window !== "undefined") {
-      return getComputedStyle(document.documentElement)
-        .getPropertyValue("--color-foreground")
-        .trim();
-    }
-  };
 
   useEffect(() => {
-    const container = containerRef.current;
+    const pillTexts: HTMLDivElement[] = [];
+
+    let container = containerRef.current;
     if (!container) {
       return;
     }
 
     const width = container.offsetWidth;
     const height = container.offsetHeight;
-    const bgColor = getBgColor();
-    const fgColor = getFgColor();
+    const bgColor = getComputedStyle(document.documentElement)
+      .getPropertyValue("--color-background")
+      .trim();
+    const fgColor = getComputedStyle(document.documentElement)
+      .getPropertyValue("--color-foreground")
+      .trim();
+
+    console.log(resolvedTheme, bgColor, fgColor);
 
     const {
       Engine,
@@ -51,7 +45,7 @@ export function World() {
     } = Matter;
     const engine = Engine.create();
     engine.gravity.y = 0.3;
-    engine.enableSleeping = false;
+    engine.enableSleeping = true;
 
     const render = Render.create({
       element: container,
@@ -124,7 +118,7 @@ export function World() {
       },
     });
 
-    let pills: Matter.Body[] = [];
+    const pills: Matter.Body[] = [];
     const pillsToRenderInfo = [
       { text: "ENGINEERING MANAGER" },
       { text: "PRINCIPAL ENGINEER" },
@@ -165,7 +159,7 @@ export function World() {
       );
 
       pills.push(pill);
-      const text = document.createElement("div");
+      const text: HTMLDivElement = document.createElement("div");
       Object.assign(text.style, {
         position: "absolute",
         width: `${pillWidth}px`,
@@ -179,6 +173,7 @@ export function World() {
         pointerEvents: "none",
       });
       text.innerText = pillText;
+      pillTexts.push(text);
 
       render.canvas.getContext("2d").measure;
       document.body.appendChild(text);
@@ -213,6 +208,9 @@ export function World() {
       Composite.clear(engine.world);
       Engine.clear(engine);
       render.canvas.remove();
+      pillTexts.forEach((pillText) => {
+        pillText.remove();
+      });
     };
   }, [resolvedTheme]);