cohost/html/blowing-in-the-wind.tsx

import { Main, pick_random, render_and_copy } from "./common.tsx";

// thanks, https://dwarffortresswiki.org/index.php/Grass
const grass_chars = ".,'`".split("");
const Blade = () => <div>{pick_random(grass_chars)}</div>;

const Field = ({ width }: { width: number }) => (
    <div
        style={{
            width: "100%",
            aspectRatio: "1",
            display: "grid",
            gridRow: `repeat(1fr, ${width})`,
            gridColumn: `repeat(1fr, ${width})`,
        }}
    ></div>
);

render_and_copy(<Field width={50} />);