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})`, 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: "rotateX(60deg)", margin: "0 auto", perspective: "1000px", perspectiveOrigin: "top", }} > {...Array.from({ length: segments }, (_, i) => ( // deg is actually more space-efficient lel <Rail rotation={`${(360 / segments) * i}deg`} r={r} /> ))} {children} </div> ); const Train = ({ children, delay_s, }: { children: ComponentChildren; delay_s: number; }) => ( <div id="contrainer" style={`animation: spin 20s ${ delay_s - 20 }s linear reverse infinite; transform-origin: center; width: 20.5rem; grid-area: 1/1; transform-style: preserve-3d;`} > <div id="train" style="font-size: 2rem; width: fit-content; transform-style: preserve-3d; transform: rotate(-90deg)" > {children} </div> </div> ); // we can have things with animation delays for both the engine and the cars // configurable animation length for sure // it's so funny seeing css crimes from like a year ago and they are just like on a different level render_and_copy( <Track segments={60} r={"8rem"}> <Train delay_s={0}>🚂</Train> <Train delay_s={0.8}>🚃</Train> <Train delay_s={1.6}>🚃</Train> <Train delay_s={2.4}>🚃</Train> <Train delay_s={3.2}>🚃</Train> </Track> );