import { Main, render_and_copy } from "./common.tsx";
// when two grids are misaligned and strange patterns you find, that's-a moire
// ^ bad remembering of https://xkcd.com/1814/
// some sort of parallax would be *phenomenal*
// maybe a multi-part post?
// ^ horrible for sharing
// shape moire is a thing
// moires are too headachey and cws would ruin the attention-grabbing aspect
// draggable window to reveal stuff?
// i've been reading a lot of homestuck lately so something related to that would be nice
// background-clip: text?
// ^ doesn't seem to really work :(
// vh units will work really well
// scrolling through my drafts is very headache lol

function vh_stripes(
    percent_of_view_height: number,
    ...colors: string[]
): string {
    const out = [];
    const stripe_height = (percent_of_view_height * 100) / colors.length;
    let start = 0;

    for (const color of colors) {
        const end = start + stripe_height;
        out.push(`${color} ${start}vh ${end}vh`);
        start = end;
    }

    return out.join(", ");
}

render_and_copy(
    <>
        <div
            id="main"
            style={{
                background: `linear-gradient(${vh_stripes(
                    0.9,
                    "#a10000",
                    "#a15000",
                    "#a1a100",
                    "#626262",
                    "#416600",
                    "#008141",
                    "#008282",
                    "#005682",
                    "#000056",
                    "#2b0057",
                    "#6a006a",
                    "#77003c"
                )}) fixed`,
            }}
        ></div>
        <div id="fake-main"></div>
    </>
);