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

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

// thanks, https://dwarffortresswiki.org/index.php/Grass
const grass_chars = ".,'`".split("");
// thanks again, https://dwarffortresswiki.org/index.php/Grass
// probably don't want to be authentic if there's only two colors..
const grass_colors = ["#9DDA33", "#10F565"];

// i want to keep this minimal (i want to have a lot of grass :])
// b works nicely i think
// generally kinda doubting if the ascii look jives with the rest of the idea
// looks terrible when synchronized obviously lol
// i'm going to need to be smarter and consider the position but that's going
// to be a lot more difficult
const Blade = () => (
    <b
        style={{
            animationDelay: `${Math.random()}s`,
            color: pick_random(grass_colors),
            transformOrigin: "bottom",
            transform: "translateX(1rem)",
            animation: "3s spin infinite alternate",
        }}
    >
        {pick_random(grass_chars)}
    </b>
);

const Field = ({ width }: { width: number }) => (
    <div
        style={{
            width: "100%",
            aspectRatio: "1",
            display: "grid",
            gridTemplateRows: `repeat(${width}, 1fr)`,
            gridTemplateColumns: `repeat(${width}, 1fr)`,
            fontFamily: "monospace",
            backgroundColor: "black",
        }}
    >
        {/* won't be this clean when i do the blowing but eh */}
        {n_of(width * width, <Blade />)}
    </div>
);

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