74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
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."]}
|
|
/>
|
|
);
|