53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { render_and_copy } from "./common.tsx";
|
|
import { ComponentChildren } from "preact";
|
|
|
|
const Rail = ({ rotation, r }: { rotation: string; r: string }) => (
|
|
<div
|
|
style={{
|
|
transform: `rotate(${rotation}) translateX(${r})`,
|
|
// transformOrigin: "bottom",
|
|
gridArea: "1/1",
|
|
}}
|
|
>
|
|
🪜
|
|
</div>
|
|
);
|
|
|
|
const Track = ({
|
|
segments,
|
|
r,
|
|
children,
|
|
}: {
|
|
segments: number;
|
|
r: string;
|
|
children?: ComponentChildren;
|
|
}) => (
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
width: "100%",
|
|
aspectRatio: "2/1",
|
|
justifyItems: "center",
|
|
alignItems: "center",
|
|
transform: "rotate3d(1,0,0,60deg)",
|
|
margin: "0 auto",
|
|
}}
|
|
>
|
|
{...Array.from({ length: segments }, (_, i) => (
|
|
// deg is actually more efficient lel
|
|
<Rail rotation={`${(360 / segments) * i}deg`} r={r} />
|
|
))}
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
render_and_copy(
|
|
<Track segments={60} r={"8rem"}>
|
|
<div id="contrainer">
|
|
<div id="another-contrainer">
|
|
<div id="train">🚂</div>
|
|
</div>
|
|
</div>
|
|
</Track>
|
|
);
|