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 = {
    smiling: (
        <img
            class="eggbug"
            src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
            alt="eggbug, smiling"
        />
    ),
    frowning: (
        <img
            class="eggbug"
            src="https://static.pyrope.net/eggbug-sad.png"
            alt="eggbug, frowning"
        />
    ),
    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!"
        />
    ),
    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"
        />
    ),
} as const;

export type EggbugEmotion = keyof typeof eggbug_emotions;

export const EggbugImg = ({ type }: { type: EggbugEmotion }) =>
    eggbug_emotions[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>
);

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}`;