adjustable-bar-graph: DONE ENOUGH
This commit is contained in:
parent
e3bb900bab
commit
e736ca40c1
1 changed files with 134 additions and 0 deletions
|
|
@ -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> — FOR EGGBUG USE ONLY —
|
||||
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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue