codingcoffee/one
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: fix folor in dark and light

Browse source 
Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
This commit is contained in:
Ameya Shenoy 2025-06-07 14:22:30 +05:30
parent b1f81a6b62
commit 718ade9c5f
1 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/components/PhysicsSimulation.tsx
View file

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