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

feat: theme fix

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

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

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