import { css, render_and_copy, svg_url } from "./common.tsx"; const displace = (width: number, amplitude = 1) => (t: number) => amplitude * Math.sin((Math.PI / width) * t); const rotation = css.rotate(css.deg(-20)); const Row = ({ children, max_width = 10, }: { children: string; max_width?: number; }) => { const d = displace(max_width); const out = children.split("").map((c, i) => ( <div style={{ transform: css.transform( css.translateY(css.rem(-d(i))) // rotation ), // width: css.min_content, // height: css.min_content, color: "black", }} > {c} </div> )); return ( <div style={{ // transform: css.transform( // css.rotate(css.deg(-20)), // css.translate(css.rem(2), css.rem(-4)) // ), display: css.flex, fontFamily: css.fontstack( "Comic Sans MS", "cursive", "sans-serif" ), }} > {...out} </div> ); }; const TextBox = ({ lines }: { lines: string[] }) => { const max_width = Math.max(...lines.map(l => l.length)); return ( <div style={{ transform: css.transform(rotation), height: css.rem(30), alignItems: "center", }} > {...lines.map(line => <Row max_width={max_width}>{line}</Row>)} </div> ); }; render_and_copy( <TextBox lines={["Use that FLUDD to", "move around and", "get red coins."]} /> );