diff --git a/frontend/src/components/PhysicsSimulation.tsx b/frontend/src/components/PhysicsSimulation.tsx index f8e3c72..0c05f76 100644 --- a/frontend/src/components/PhysicsSimulation.tsx +++ b/frontend/src/components/PhysicsSimulation.tsx @@ -20,6 +20,13 @@ export function World() { .trim(); } }; + const getFgColor = () => { + if (typeof window !== "undefined") { + return getComputedStyle(document.documentElement) + .getPropertyValue("--color-foreground") + .trim(); + } + }; useEffect(() => { const container = containerRef.current; @@ -30,6 +37,7 @@ export function World() { const width = container.offsetWidth; const height = container.offsetHeight; const bgColor = getBgColor(); + const fgColor = getFgColor(); const { Engine, @@ -117,16 +125,18 @@ export function World() { }); let pills: Matter.Body[] = []; - const pillsToRender = [ - "ENGINEERING MANAGER", - "NIX", - "PRINCIPAL ENGINEER", - "AI", + const pillsToRenderInfo = [ + { text: "ENGINEERING MANAGER" }, + { text: "PRINCIPAL ENGINEER" }, + { text: "NIX", chamferRadius: 20 }, + { text: "AI", chamferRadius: 20 }, ]; - pillsToRender.forEach(function (pillText) { + pillsToRenderInfo.forEach(function (pillInfo) { const fontSize = 32; + const pillText = pillInfo.text; + const ctx = render.canvas.getContext("2d"); ctx.font = `${fontSize}px Arial`; const textWidth = ctx.measureText(pillText).width; @@ -134,20 +144,21 @@ export function World() { const pillHeight = fontSize * 2; const pillWidth = textWidth + pillHeight; [randomX, randomY] = getRandomXY(width, height, radius); + const chamferRadius = pillInfo.chamferRadius || pillHeight / 2; const pill = Matter.Bodies.rectangle( randomX, randomY, pillWidth, pillHeight, { - chamfer: { radius: pillHeight / 2 }, + chamfer: { radius: chamferRadius }, isStatic: false, density: 0.001, friction: 0.05, frictionAir: 0.01, render: { fillStyle: "rgba(255, 255, 255, 0)", // transparent fill - strokeStyle: "#000000", // black border + strokeStyle: fgColor, // black border lineWidth: 1, }, }, @@ -164,7 +175,7 @@ export function World() { alignItems: "center", fontFamily: "Space Mono", fontSize: `${fontSize}px`, - color: "black", + color: fgColor, pointerEvents: "none", }); text.innerText = pillText;