From b10f7be2992be7d3829ddf2d2f9a88012b372a47 Mon Sep 17 00:00:00 2001
From: Ameya Shenoy <shenoy.ameya@gmail.com>
Date: Sat, 7 Jun 2025 19:16:58 +0530
Subject: [PATCH] chore: stuff

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

diff --git a/frontend/src/components/PhysicsSimulation.tsx b/frontend/src/components/PhysicsSimulation.tsx
index 3282fff..0b53347 100644
--- a/frontend/src/components/PhysicsSimulation.tsx
+++ b/frontend/src/components/PhysicsSimulation.tsx
@@ -25,6 +25,7 @@ export function World() {
 
     const width = container.offsetWidth;
     const height = container.offsetHeight;
+    console.log("container stuff", width, height);
 
     // TODO: ask Shubh about using variables in useEffect not working as expected
     // const bgColor = getComputedStyle(document.documentElement)
@@ -49,7 +50,7 @@ export function World() {
       MouseConstraint,
     } = Matter;
     const engine = Engine.create();
-    engine.gravity.y = 0.3;
+    engine.gravity.y = 1;
     engine.enableSleeping = true;
 
     const render = Render.create({
@@ -131,16 +132,25 @@ export function World() {
       { text: "AI", chamferRadius: 20 },
     ];
 
-    pillsToRenderInfo.forEach(function (pillInfo) {
-      const fontSize = 32;
+    function convertRemToPixels(rem) {
+      // Get the root font size as a float (in px)
+      const rootFontSize = parseFloat(
+        getComputedStyle(document.documentElement).fontSize,
+      );
+      // Multiply the rem value by the root font size
+      return rem * rootFontSize;
+    }
+
+    pillsToRenderInfo.forEach((pillInfo) => {
+      const fontSizeRem = 2;
 
       const pillText = pillInfo.text;
 
       const ctx = render.canvas.getContext("2d");
-      ctx.font = `${fontSize}px Mono`;
+      ctx.font = `${fontSizeRem}rem Mono`;
       const textWidth = ctx.measureText(pillText).width;
 
-      const pillHeight = fontSize * 2;
+      const pillHeight = convertRemToPixels(fontSizeRem) * 2;
       const pillWidth = textWidth + pillHeight;
       [randomX, randomY] = getRandomXY(width, height, pillWidth / 2);
       const chamferRadius = pillInfo.chamferRadius || pillHeight / 2;
@@ -166,12 +176,14 @@ export function World() {
       pills.push(pill);
       const text: HTMLDivElement = document.createElement("div");
       Object.assign(text.style, {
-        ...twj("absolute flex justify-center items-center"),
+        ...twj(
+          "absolute flex justify-center items-center border-2 border-red-500",
+        ),
         ...{
           width: `${pillWidth}px`,
           height: `${pillHeight}px`,
           fontFamily: "Space Mono",
-          fontSize: `${fontSize}px`,
+          fontSize: `${fontSizeRem}rem`,
           color: fgColor,
           pointerEvents: "none",
         },
@@ -179,12 +191,20 @@ export function World() {
       text.innerText = pillText;
       pillTexts.push(text);
 
-      render.canvas.getContext("2d").measure;
       document.body.appendChild(text);
 
+      console.log(pill);
+
       Events.on(engine, "afterUpdate", () => {
         text.style.left = `${pill.position.x - pillWidth / 2 + 60}px`;
         text.style.top = `${pill.position.y + pillHeight / 2 - 4}px`;
+
+        // text.style.left = `${pill.position.x - pillWidth / 2 + 10}px`;
+        // text.style.top = `${pill.position.y + pillHeight / 2 + 30}px`;
+
+        // text.style.left = `${pill.position.x + text.offsetWidth / 2}px`;
+        // text.style.top = `${pill.position.y + text.offsetHeight / 2}px`;
+
         text.style.transform = `rotate(${pill.angle}rad)`;
       });
     });