diff --git a/html/blowing-in-the-wind.tsx b/html/blowing-in-the-wind.tsx index ca2a983..66f52e0 100644 --- a/html/blowing-in-the-wind.tsx +++ b/html/blowing-in-the-wind.tsx @@ -57,6 +57,141 @@ const Blade = ({ x, y }: { x: number; y: number }) => ( ); +// ☺ is too inconsistently rendered i think +const statics = "r•gbpM".split(""); +const static_colors: Record = { + r: ["rgb(215, 155, 45)"], + // turns out df has a lot of rocks + // there are repeated colors but that should be good for recreating the general distribution + "•": [ + "rgb(255, 255, 255)", + "rgb(215, 155, 45)", + "rgb(160, 160, 160)", + "rgb(215, 155, 45)", + "rgb(255, 255, 255)", + "rgb(255, 255, 255)", + "rgb(215, 155, 45)", + "rgb(255, 255, 255)", + "rgb(215, 155, 45)", + "rgb(160, 160, 160)", + "rgb(215, 155, 45)", + "rgb(160, 160, 160)", + "rgb(160, 160, 160)", + "rgb(192, 192, 192)", + "rgb(160, 160, 160)", + "rgb(160, 160, 160)", + "rgb(192, 192, 192)", + "rgb(160, 160, 160)", + "rgb(160, 160, 160)", + "rgb(192, 192, 192)", + "rgb(255, 255, 255)", + "rgb(192, 192, 192)", + "rgb(255, 255, 255)", + "rgb(215, 155, 45)", + "rgb(160, 160, 160)", + ], + g: ["white"], + b: [ + "rgb(160, 160, 160)", + "rgb(192, 192, 192)", + "rgb(192, 192, 192)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(255, 17, 58)", + "rgb(140, 102, 255)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(160, 160, 160)", + "rgb(215, 155, 45)", + "rgb(160, 160, 160)", + "rgb(160, 160, 160)", + "rgb(160, 160, 160)", + "rgb(255, 255, 255)", + "rgb(255, 255, 255)", + "rgb(255, 113, 17)", + "rgb(167, 60, 213)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(160, 160, 160)", + "rgb(160, 160, 160)", + "rgb(162, 220, 52)", + ], + p: [ + "rgb(140, 102, 255)", + "rgb(232, 17, 255)", + "rgb(140, 102, 255)", + "rgb(192, 192, 192)", + "rgb(192, 192, 192)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(19, 253, 101)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(232, 17, 255)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(255, 17, 58)", + "rgb(255, 17, 58)", + "rgb(140, 102, 255)", + "rgb(255, 255, 255)", + "rgb(140, 102, 255)", + "rgb(160, 160, 160)", + "rgb(255, 255, 255)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(160, 160, 160)", + "rgb(160, 160, 160)", + ], + M: [ + "rgb(192, 192, 192)", + "rgb(215, 155, 45)", + "rgb(18, 254, 207)", + "rgb(192, 192, 192)", + "rgb(160, 160, 160)", + "rgb(140, 102, 255)", + "rgb(19, 253, 101)", + "rgb(192, 192, 192)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(160, 160, 160)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(192, 192, 192)", + "rgb(160, 160, 160)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(232, 17, 255)", + "rgb(255, 17, 58)", + "rgb(255, 113, 17)", + "rgb(160, 160, 160)", + "rgb(160, 160, 160)", + "rgb(255, 113, 17)", + "rgb(255, 113, 17)", + "rgb(215, 155, 45)", + "rgb(215, 155, 45)", + "rgb(160, 160, 160)", + "rgb(18, 254, 207)", + "rgb(160, 160, 160)", + ], +}; +const StaticGuy = () => { + const stat = pick_random(statics); + return ( + + {stat} + + ); +}; + const Field = ({ width }: { width: number }) => (
( display: "grid", gridTemplateRows: `repeat(${width}, 1fr)`, gridTemplateColumns: `repeat(${width}, 1fr)`, - fontFamily: "monospace", + // what dfwiki uses + fontFamily: + '"Courier New", "Quicktype Mono", "Bitstream Vera Sans Mono", "Lucida Console", "Lucida Sans Typewriter", monospace', // brown doesn't really work because the grass isn't dense enough // maybe a complete dfivorce isn't in order backgroundColor: "black", fontWeight: "bolder", fontSize: "1.1rem", + // shweet + lineHeight: "100%", }} > - {new Array(width * width).fill(undefined).map((_, i) => ( - - ))} + {new Array(width * width) + .fill(undefined) + .map((_, i) => + Math.random() < 0.05 ? ( + + ) : ( + + ) + )}
); @@ -85,4 +230,5 @@ const Field = ({ width }: { width: number }) => ( // inspired me. i'm going to work on this tomorrow and do the hawd thing (waves) // adding more grass doesn't really help and mainly just causes size problems +// takes some shuffling to get a nice distribution of statics render_and_copy();