57 lines
2 KiB
TypeScript
57 lines
2 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("");
|
|
// i think i sorta like just ^ or | hm...
|
|
// 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={{
|
|
transformOrigin: "bottom",
|
|
transform: "translateX(0.5rem)",
|
|
animation: "spin infinite ease-in-out alternate",
|
|
|
|
animationDelay: `${(Math.random() - 0.5) * 2}s`,
|
|
// having some randomness with the duration is a great idea!!
|
|
animationDuration: `${2.5 + Math.random()}s`,
|
|
color: pick_random(grass_colors),
|
|
// helps the squareness
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{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",
|
|
fontWeight: "bolder",
|
|
fontSize: "1.1rem",
|
|
}}
|
|
>
|
|
{/* won't be this clean when i do the blowing but eh */}
|
|
{/* it's really surprising that this works based on my understanding tbh */}
|
|
{/* best guess, it's expanding to <div><Blade/><Blade/><Blade/>...</div> and THEN expanding the Blades */}
|
|
{n_of(width * width, <Blade />)}
|
|
</div>
|
|
);
|
|
|
|
render_and_copy(<Field width={20} />);
|