From e736ca40c12f1be40ce1669f7c8a7c63475f9092 Mon Sep 17 00:00:00 2001
From: mehbark <terezi@pyrope.net>
Date: Wed, 15 Nov 2023 19:45:03 -0500
Subject: [PATCH] adjustable-bar-graph: DONE ENOUGH

---
 html/adjustable-bar-graph.tsx | 134 ++++++++++++++++++++++++++++++++++
 1 file changed, 134 insertions(+)

diff --git a/html/adjustable-bar-graph.tsx b/html/adjustable-bar-graph.tsx
index 2a4e4ea..7d34ec8 100644
--- a/html/adjustable-bar-graph.tsx
+++ b/html/adjustable-bar-graph.tsx
@@ -1,2 +1,136 @@
 // i no joke had the idea for this in a dream
 // winamp seems more fun (the equalizer yk)
+
+import { EggbugImg, render_and_copy } from "./common.tsx";
+
+// help eggbug manage cohost's "finances"
+
+const Bar = ({ start = 0.5, color }: { start: number; color: string }) => (
+    <div
+        style={{
+            backgroundColor: color,
+            resize: "vertical",
+            height: `${start * 100}%`,
+            flex: "1",
+            overflow: "hidden",
+        }}
+    ></div>
+);
+
+const Bars = ({ starts, color }: { starts: number[]; color: string }) => (
+    <div
+        style={{
+            flex: "1.5",
+            display: "flex",
+            backgroundColor: color,
+            //margin: "0.25rem",
+            overflow: "hidden",
+        }}
+    >
+        {...starts.map(start => (
+            <Bar start={start} color="rgb(var(--color-background))" />
+        ))}
+    </div>
+);
+
+render_and_copy(
+    <div
+        style={{
+            display: "flex",
+            width: "100%",
+            aspectRatio: "16/9",
+            backgroundColor: "rgb(var(--color-background))",
+            borderRadius: "1rem",
+            border: "0.25rem solid rgb(var(--color-cherry))",
+            overflow: "hidden",
+        }}
+    >
+        <Bars
+            color="rgb(var(--color-cherry))"
+            starts={new Array(30)
+                .fill(undefined)
+                .map((_, i) => 1 - (i * i) / 900)}
+        />
+        {/*might want something more business*/}
+        <div
+            style={{
+                flex: "1",
+                objectFit: "contain",
+                display: "flex",
+                flexDirection: "column",
+            }}
+        >
+            <EggbugImg type="smiling" style={{ margin: "auto" }} />
+            <p
+                style={{
+                    borderRadius: "1rem",
+                    border: "0.25rem solid rgb(var(--color-cherry))",
+                    margin: "0.25rem",
+                    padding: "0 0.25rem",
+                    overflow: "scroll",
+                }}
+            >
+                oh no! eggbug production is through the roof! at this rate,
+                we'll run out of <s>posts</s> foods? to eat within three eggs of
+                the bug! quick, adjust this graph. that does things? here's some
+                important advice (i can put as much as i want because there's a
+                scrollbar!): we'll run out of posts foods? to eat withings?
+                here's a scrollbar!): h the roof! at this graph. that does three
+                eggs of the bug! quick, adjust this graph. that does three eggs
+                of posts foods? to eat within three eggs of the bug! quick,
+                adjust this rate, we'll run out of posts foods? to eat within
+                things? here's some important because there's some important
+                advice (i can put as i want because there's a scrollbar!):
+                within three eggs of the bug! quick, adjust this rate, we'll run
+                out of posts foods? to eat within three eggbug production is
+                through the roof! at this graph. that does things? here's some
+                important advice (i can put as much as i want because there's
+                some important advice (i can put as i want because there's a
+                scrollbar!): as i want because there's some important advice (i
+                can put as much as i want because there's a scrollbar!): raph.
+                that does things? here's some important advice (i can put as i
+                want because there's some important advice (i can put as much as
+                i want because there's some important advice (i can put as much
+                as i want because there's a scrollbar!): on is through the roof!
+                at this graph. that does three eggs of the bug! quick, adjust
+                this graph. that does things? here's some important advice (i
+                can put as much as i want because there's some important advice
+                (i can put as much as much as i want because there's some
+                important advice (i can put as much as i want because there's a
+                scrollbar!): through the roof! at this graph. that does things?
+                here's a scrollbar!): scrollbar!): k, adjust this graph. that
+                does things? here's some important advice (i can put as i want
+                because there's some important advice (i can put as much as i
+                want because there's some important advice (i can put as much as
+                i want because the roof! at this rate, we'll run out of posts
+                foods? to eat within three eggbug production is through the
+                roof! at this rate, we'll run out of the bug! quick, adjust this
+                graph. that does three eggs of posts foods? to eat within three
+                eggs of the bug! quick, adjust this graph. that does things?
+                here's some important advice (i can put as much as i want
+                because there's a scrollbar!): roduction is through the roof! at
+                this rate, we'll run out of posts foods? to eat within three
+                eggbug production is through the roof! at this rate, we'll run
+                out of posts foods? to eat within three eggs of the bug! quick,
+                adjust this graph. that does thin
+                <br />
+                three eggs
+            </p>
+        </div>
+        <h1
+            style={{
+                position: "absolute",
+                color: "rgb(var(--color-foreground) / 0.05)",
+                marginLeft: "0.5rem",
+                marginTop: "0.25rem",
+                pointerEvents: "none",
+                overflow: "hidden",
+            }}
+        >
+            buginess v4.1.3<sup>TM</sup> &mdash; FOR EGGBUG USE ONLY &mdash;
+            AVERT EYES IF NON-EGGBUG. SERIOUSLY, HOLY CRAP, IF YOU AREN'T AN
+            EGGBUG, YOU WILL DIE! THE EGGBUGS WILL EAT YOUR POSTS THAT IS LIKE
+            THEIR MAIN THING. OBVIOUSLY, BUT IF YOUR POSTS ARE EATEN, YOU DIE!
+        </h1>
+    </div>
+);