cohost/html/common.tsx

169 lines
4.1 KiB
TypeScript
Raw Normal View History

2023-07-20 13:33:55 -04:00
import {
Attributes,
ComponentChild,
ComponentChildren,
JSX,
VNode,
toChildArray,
} from "preact";
2023-07-12 14:15:53 -04:00
import { render } from "preact-render-to-string";
import { writeText } from "copy-paste";
2023-07-10 14:52:20 -04:00
2023-07-12 14:15:53 -04:00
export function Main({
children,
...attributes
}: {
2023-07-20 14:31:12 -04:00
children?: ComponentChildren;
2023-08-19 20:30:42 -04:00
style?: JSX.CSSProperties;
attributes?: JSX.HTMLAttributes;
2023-07-12 14:15:53 -04:00
}) {
return (
<div {...attributes} id="main">
{...toChildArray(children)}
</div>
);
}
2023-07-12 07:05:48 -04:00
2023-07-12 14:15:53 -04:00
export const HCenter = ({
children,
...attrs
}: {
children: ComponentChildren;
attrs?: Attributes;
}) => (
2023-07-12 07:05:48 -04:00
<div
2023-07-12 14:15:53 -04:00
{...attrs}
2023-07-12 07:05:48 -04:00
class="hcenter"
style="display: flex; justify-content: center;"
>
2023-07-12 14:15:53 -04:00
{...toChildArray(children)}
2023-07-12 07:05:48 -04:00
</div>
);
2023-07-12 14:15:53 -04:00
export const eggbug_emotions = {
2023-07-12 12:55:08 -04:00
smiling: (
<img
class="eggbug"
src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
alt="eggbug, smiling"
/>
),
2023-07-31 17:07:27 -04:00
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"
/>
),
2023-07-12 14:15:53 -04:00
} as const;
2023-07-31 17:07:27 -04:00
export type EggbugEmotion = keyof typeof eggbug_emotions;
export const EggbugImg = ({ type }: { type: EggbugEmotion }) =>
2023-07-12 14:15:53 -04:00
eggbug_emotions[type];
2023-07-12 12:55:08 -04:00
2023-07-20 14:31:12 -04:00
export const render_and_copy = (elem: VNode, pretty = false) => {
const rendered = render(elem, null, { pretty });
2023-07-12 14:15:53 -04:00
writeText(rendered);
console.log(rendered);
};
2023-07-15 22:53:32 -04:00
export const mk_class_wrapper =
(klass: string) =>
2023-07-20 14:31:12 -04:00
({ children }: { children?: ComponentChildren }) =>
2023-07-16 00:36:39 -04:00
<div class={klass}>{...toChildArray(children)}</div>;
2023-07-20 13:33:55 -04:00
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);
}
2023-07-25 01:41:07 -04:00
export const static_url = (res: string) => `https://static.pyrope.net/${res}`;
2023-08-20 13:33:54 -04:00
export const randirect = (...urls: string[]) =>
`https://pyrope.net/randirect#${urls.join("::")}`;