grass: what the heck, done enough
This commit is contained in:
parent
973f716b0c
commit
0ef71177c7
1 changed files with 150 additions and 4 deletions
|
|
@ -57,6 +57,141 @@ const Blade = ({ x, y }: { x: number; y: number }) => (
|
||||||
</b>
|
</b>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// ☺ is too inconsistently rendered i think
|
||||||
|
const statics = "r•gbpM".split("");
|
||||||
|
const static_colors: Record<string, string[]> = {
|
||||||
|
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 (
|
||||||
|
<b
|
||||||
|
style={{
|
||||||
|
overflow: "hidden",
|
||||||
|
color: pick_random(static_colors[stat]),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{stat}
|
||||||
|
</b>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const Field = ({ width }: { width: number }) => (
|
const Field = ({ width }: { width: number }) => (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -65,17 +200,27 @@ const Field = ({ width }: { width: number }) => (
|
||||||
display: "grid",
|
display: "grid",
|
||||||
gridTemplateRows: `repeat(${width}, 1fr)`,
|
gridTemplateRows: `repeat(${width}, 1fr)`,
|
||||||
gridTemplateColumns: `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
|
// brown doesn't really work because the grass isn't dense enough
|
||||||
// maybe a complete dfivorce isn't in order
|
// maybe a complete dfivorce isn't in order
|
||||||
backgroundColor: "black",
|
backgroundColor: "black",
|
||||||
fontWeight: "bolder",
|
fontWeight: "bolder",
|
||||||
fontSize: "1.1rem",
|
fontSize: "1.1rem",
|
||||||
|
// shweet
|
||||||
|
lineHeight: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{new Array(width * width).fill(undefined).map((_, i) => (
|
{new Array(width * width)
|
||||||
<Blade x={i % width} y={Math.floor(i / width)} />
|
.fill(undefined)
|
||||||
))}
|
.map((_, i) =>
|
||||||
|
Math.random() < 0.05 ? (
|
||||||
|
<StaticGuy />
|
||||||
|
) : (
|
||||||
|
<Blade x={i % width} y={Math.floor(i / width)} />
|
||||||
|
)
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -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)
|
// 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
|
// 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(<Field width={25} />);
|
render_and_copy(<Field width={25} />);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue