47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
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={{
|
|
transform: "translateX(0.3rem)",
|
|
transformOrigin: "bottom",
|
|
animation: "2s spin infinite ease alternate",
|
|
animationDelay: `${Math.random()}s`,
|
|
color: pick_random(grass_colors),
|
|
}}
|
|
>
|
|
{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} />);
|