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

chore: stuff

Browse source 
Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
This commit is contained in:
Ameya Shenoy 2025-06-07 19:16:58 +05:30
parent 406177bf01
commit b10f7be299
1 changed files with 28 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,6 +25,7 @@ export function World() {
const width = container.offsetWidth; const width = container.offsetWidth;
const height = container.offsetHeight; const height = container.offsetHeight;
console.log("container stuff", width, height);
// TODO: ask Shubh about using variables in useEffect not working as expected // TODO: ask Shubh about using variables in useEffect not working as expected
// const bgColor = getComputedStyle(document.documentElement) // const bgColor = getComputedStyle(document.documentElement)
@ -49,7 +50,7 @@ export function World() {
MouseConstraint, MouseConstraint,
} = Matter; } = Matter;
const engine = Engine.create(); const engine = Engine.create();
engine.gravity.y = 0.3; engine.gravity.y = 1;
engine.enableSleeping = true; engine.enableSleeping = true;
const render = Render.create({ const render = Render.create({
@ -131,16 +132,25 @@ export function World() {
{ text: "AI", chamferRadius: 20 }, { text: "AI", chamferRadius: 20 },
]; ];
pillsToRenderInfo.forEach(function (pillInfo) { function convertRemToPixels(rem) {
const fontSize = 32; // 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 pillText = pillInfo.text;
const ctx = render.canvas.getContext("2d"); const ctx = render.canvas.getContext("2d");
ctx.font = `${fontSize}px Mono`; ctx.font = `${fontSizeRem}rem Mono`;
const textWidth = ctx.measureText(pillText).width; const textWidth = ctx.measureText(pillText).width;
const pillHeight = fontSize * 2; const pillHeight = convertRemToPixels(fontSizeRem) * 2;
const pillWidth = textWidth + pillHeight; const pillWidth = textWidth + pillHeight;
[randomX, randomY] = getRandomXY(width, height, pillWidth / 2); [randomX, randomY] = getRandomXY(width, height, pillWidth / 2);
const chamferRadius = pillInfo.chamferRadius || pillHeight / 2; const chamferRadius = pillInfo.chamferRadius || pillHeight / 2;
@ -166,12 +176,14 @@ export function World() {
pills.push(pill); pills.push(pill);
const text: HTMLDivElement = document.createElement("div"); const text: HTMLDivElement = document.createElement("div");
Object.assign(text.style, { 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`, width: `${pillWidth}px`,
height: `${pillHeight}px`, height: `${pillHeight}px`,
fontFamily: "Space Mono", fontFamily: "Space Mono",
fontSize: `${fontSize}px`, fontSize: `${fontSizeRem}rem`,
color: fgColor, color: fgColor,
pointerEvents: "none", pointerEvents: "none",
}, },
@ -179,12 +191,20 @@ export function World() {
text.innerText = pillText; text.innerText = pillText;
pillTexts.push(text); pillTexts.push(text);
render.canvas.getContext("2d").measure;
document.body.appendChild(text); document.body.appendChild(text);
console.log(pill);
Events.on(engine, "afterUpdate", () => { Events.on(engine, "afterUpdate", () => {
text.style.left = `${pill.position.x - pillWidth / 2 + 60}px`; text.style.left = `${pill.position.x - pillWidth / 2 + 60}px`;
text.style.top = `${pill.position.y + pillHeight / 2 - 4}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)`; text.style.transform = `rotate(${pill.angle}rad)`;
}); });
}); });