cohost/html/adjustable-bar-graph.tsx

// 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-notWhite))" />
        ))}
    </div>
);

render_and_copy(
    <div
        style={{
            display: "flex",
            width: "100%",
            aspectRatio: "16/9",
            backgroundColor: "rgb(var(--color-notWhite))",
            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>
);