cohost/html/common.tsx

import {
    Attributes,
    ComponentChild,
    ComponentChildren,
    JSX,
    VNode,
    toChildArray,
} from "preact";
import { render } from "preact-render-to-string";
import { writeText } from "copy-paste";

export function Main({
    children,
    ...attributes
}: {
    children?: ComponentChildren;
    style?: JSX.CSSProperties;
    attributes?: JSX.HTMLAttributes;
}) {
    return (
        <div {...attributes} id="main">
            {...toChildArray(children)}
        </div>
    );
}

export const HCenter = ({
    children,
    ...attrs
}: {
    children: ComponentChildren;
    attrs?: Attributes;
}) => (
    <div
        {...attrs}
        class="hcenter"
        style="display: flex; justify-content: center;"
    >
        {...toChildArray(children)}
    </div>
);

export const eggbug_emotions = (attrs: JSX.HTMLAttributes<HTMLImageElement>) =>
    ({
        smiling: (
            <img
                class="eggbug"
                src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
                alt="eggbug, smiling"
                {...attrs}
            />
        ),
        frowning: (
            <img
                class="eggbug"
                src="https://static.pyrope.net/eggbug-sad.png"
                alt="eggbug, frowning"
                {...attrs}
            />
        ),
        revengeance: (
            <img
                class="eggbug"
                src="https://static.pyrope.net/eggbug-revengeance.png"
                alt="ULTRA EGGBUG REVENGEANCE, MEGA. THERE IS FIRE. THERE IS TRISCAR. EGGBUG REVENGEANCE. YOU ARE. DIE!"
                {...attrs}
            />
        ),
        jpeg_annihilation: (
            <img
                class="eggbug"
                src="https://static.pyrope.net/eggbug-jpeg-annihilation.gif"
                alt="eggbug dissolving as the image gets more and more jpeg"
                {...attrs}
            />
        ),
        golfball: (
            <img
                class="eggbug"
                src="https://static.pyrope.net/eggbug-golfball.png"
                alt="eggbug as a golfball. no legs"
                {...attrs}
            />
        ),
    } as const);

export type EggbugEmotion = keyof ReturnType<typeof eggbug_emotions>;
type bla = ({
    type: EggbugEmotion;
} & JSX.HTMLAttributes<HTMLImageElement>)["type"];

export const EggbugImg = ({
    type,
    ...attrs
}: { type: EggbugEmotion } & Omit<
    JSX.HTMLAttributes<HTMLImageElement>,
    "type"
>) => eggbug_emotions(attrs)[type];

export const render_and_copy = (elem: VNode, pretty = false) => {
    const rendered = render(elem, null, { pretty });
    writeText(rendered);
    console.log(rendered);
};

export const mk_class_wrapper =
    (klass: string) =>
    ({ children }: { children?: ComponentChildren }) =>
        <div class={klass}>{...toChildArray(children)}</div>;

export const slidify = (
    Slide: (_: {
        slide: JSX.Element;
        next?: JSX.Element;
        n: number;
        max: number;
    }) => JSX.Element,
    slides: JSX.Element[],
    n = 1,
    max = slides.length
): JSX.Element =>
    slides[0] ? (
        <Slide
            slide={slides[0]}
            next={slidify(Slide, slides.slice(1), n + 1, max)}
            n={n}
            max={max}
        />
    ) : (
        <></>
    );

// https://cohost.org/lexyeevee/post/2107474-css-for-css-baby-3 (wayyy down at the bottom)
export const DisappearOnClick = ({
    children,
    className,
}: {
    className?: string;
    children: ComponentChildren;
}) => (
    <details
        open
        class={`disappearing ${className}`}
        style="position: relative; cursor: pointer;"
    >
        <summary style="list-style: none; position: absolute; inset: 0;"></summary>
        {children}
    </details>
);

/// make sure the margins are all legit
export const ToggleOnClick = ({
    children: [a, b],
}: {
    children: [ComponentChild, ComponentChild];
}) => (
    <details style="position: relative; margin: 0 auto; cursor: pointer;">
        <summary style="list-style: none;">{a}</summary>
        <div style="display: block; position: absolute; top: 0; pointer-events: none;">
            {b}
        </div>
    </details>
);

export function shuffle<T>(array: T[]): T[] {
    let currentIndex = array.length,
        randomIndex;

    // While there remain elements to shuffle.
    while (currentIndex != 0) {
        // Pick a remaining element.
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;

        // And swap it with the current element.
        [array[currentIndex], array[randomIndex]] = [
            array[randomIndex],
            array[currentIndex],
        ];
    }

    return array;
}

// type NOf<N extends number, T, R extends any[] = []> = R["length"] extends N
//     ? R
//     : NOf<N, T, [T, ...R]>;

// export function n_of<N extends number, T, R extends any[]>(
//     n: N,
//     x: T
// ): NOf<N, T, R> {
//     return [];
// }

export function n_of<T>(n: number, x: T): T[] {
    return new Array(n).fill(x);
}

export const static_url = (res: string) => `https://static.pyrope.net/${res}`;

export const randirect = (...urls: string[]) =>
    `https://pyrope.net/randirect#${urls.join("::")}`;

// could do some [T, ...T[]] shenanigans for totality but meh
// kinda bad name
export const pick_random = <T,>(xs: T[]): T =>
    xs[Math.floor(Math.random() * xs.length)];

export const jitter = (n: number) => n * (Math.random() - 0.5);

export const svg_url = (svg: string) => `data:image/svg+xml,${encodeURI(svg)}`;

// something higher-level might be worthwhile...
// could namespace; e.g. css.font.sans_serif
export const css = {
    url(href: string) {
        return `url('${href}')`;
    },

    px(n: number) {
        return `${n}px`;
    },
    em(n: number) {
        return `${n}em`;
    },
    rem(n: number) {
        return `${n}rem`;
    },

    deg(n: number) {
        return `${n}deg`;
    },
    rad(n: number) {
        return `${n}rad`;
    },
    turn(n: number) {
        return `${n}turn`;
    },
    // now i feel like this could be generalizable
    // but js metaprogramming SUCKS
    transform(...ts: string[]) {
        return ts.join(" ");
    },
    rotate(by: string) {
        return `rotate(${by})`;
    },
    translateX(by: string) {
        return `translateX(${by})`;
    },
    translateY(by: string) {
        return `translateY(${by})`;
    },
    translate(x: string, y: string) {
        return `translate(${x}, ${y})`;
    },

    fontstack(...fonts: string[]) {
        return fonts.join(", ");
    },
    // # ruby i wont you ..
    inline_block: "inline-block",
    block: "block",
    grid: "grid",
    flex: "flex",
    fit_content: "fit-content",
    min_content: "min-content",
    max_content: "max-content",
} as const;