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();