grass: passable sketch done

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 = () => <div>{pick_random(grass_chars)}</div>;
+// 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
@@ -10,10 +32,15 @@ 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",
         }}
-    ></div>
+    >
+        {/* won't be this clean when i do the blowing but eh */}
+        {n_of(width * width, <Blade />)}
+    </div>
 );
 
-render_and_copy(<Field width={50} />);
+render_and_copy(<Field width={20} />);