diff --git a/html/blowing-in-the-wind.tsx b/html/blowing-in-the-wind.tsx index d1b2c83..79bea31 100644 --- a/html/blowing-in-the-wind.tsx +++ b/html/blowing-in-the-wind.tsx @@ -1,8 +1,30 @@ -import { Main, pick_random, render_and_copy } from "./common.tsx"; +import { Main, n_of, pick_random, render_and_copy } from "./common.tsx"; // thanks, https://dwarffortresswiki.org/index.php/Grass const grass_chars = ".,'`".split(""); -const Blade = () =>
{pick_random(grass_chars)}
; +// 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 = () => ( + + {pick_random(grass_chars)} + +); const Field = ({ width }: { width: number }) => (
( width: "100%", aspectRatio: "1", display: "grid", - gridRow: `repeat(1fr, ${width})`, - gridColumn: `repeat(1fr, ${width})`, + 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, )} + ); -render_and_copy(); +render_and_copy();