import { Attributes, ComponentChild, ComponentChildren, JSX, VNode, toChildArray, } from "preact"; import { render } from "preact-render-to-string"; import { writeText } from "copy-paste"; // i know it's out of date; i just want something simple import { randomInt } from "https://deno.land/std@0.146.0/node/internal/crypto/random.ts"; export function Main({ children, ...attributes }: { children?: ComponentChildren; style?: JSX.CSSProperties; attributes?: JSX.HTMLAttributes; }) { return (
{...toChildArray(children)}
); } export const HCenter = ({ children, ...attrs }: { children: ComponentChildren; attrs?: Attributes; }) => (
{...toChildArray(children)}
); export const eggbug_emotions = (attrs: JSX.HTMLAttributes) => ({ smiling: ( eggbug, smiling ), frowning: ( eggbug, frowning ), revengeance: ( ULTRA EGGBUG REVENGEANCE, MEGA. THERE IS FIRE. THERE IS TRISCAR. EGGBUG REVENGEANCE. YOU ARE. DIE! ), jpeg_annihilation: ( eggbug dissolving as the image gets more and more jpeg ), golfball: ( eggbug as a golfball. no legs ), } as const); export type EggbugEmotion = keyof ReturnType; type bla = ({ type: EggbugEmotion; } & JSX.HTMLAttributes)["type"]; export const EggbugImg = ({ type, ...attrs }: { type: EggbugEmotion } & Omit< JSX.HTMLAttributes, "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 }) =>
{...toChildArray(children)}
; 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] ? ( ) : ( <> ); // 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; }) => (
{children}
); /// make sure the margins are all legit export const ToggleOnClick = ({ children: [a, b], }: { children: [ComponentChild, ComponentChild]; }) => (
{a}
{b}
); // TODO: probably doesn't work export const ReduceOnClick = ({ children }: { children: VNode<{}>[] }) => { if (children.length == 0) return <>; if (children.length == 1) return children[1]; return (
{children[0]} {...children.slice(1)}
); }; export function shuffle(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 = R["length"] extends N // ? R // : NOf; // export function n_of( // n: N, // x: T // ): NOf { // return []; // } export function n_of(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("::")}`; export const serverside_randirect = (...urls: string[]) => `https://pyrope.net/serverside-randirect?${urls.join("::")}`; // could do some [T, ...T[]] shenanigans for totality but meh // kinda bad name // unhappy with the randomness so i'm going way overkill lol export const pick_random = (xs: readonly T[]): T => xs[randomInt(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 // could put various beziers 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; export const Filler = ({ height }: { height: string }) => (
); /// nonfunctional, deno's toplevel await (:D) is generally the best workaround export function make_sync_no_matter_the_cost(promise: Promise): T { let done = false; let out; promise.then(t => { out = t; done = true; }); return out as T; } // INFINITE CREDIT TO @BLACKLE https://cohost.org/blackle/post/72096-h3-style-text-alig export const Cycle = ({ width_px, height_px, children, style, credit = true, }: { width_px: number; height_px: number; children: [ComponentChild, ...ComponentChild[]]; style?: Record; credit?: boolean; }) => (
{...children.map((c, i) => (
{c}
))}
); // yet another banger from @blackle // i don't think we need the row height stuff for maximum genericity? export const DragResizableImage = ({ url, top, left, width, height, indicator = true, indicator_opacity = 0.3, }: { url: string; top: number; left: number; width: number; height: number; indicator?: boolean; indicator_opacity?: number; }) => (
); // don't really love this; do not recommend export const string_split_once = ( str: string, on: string ): [string, string] | undefined => { const idx = str.indexOf(on); if (idx < 0) return; return [str.slice(0, idx), str.slice(idx + on.length)]; }; export const HomestuckSpan = ({ children, color, style, }: { children: ComponentChildren; color?: string; style?: JSX.CSSProperties; attributes?: JSX.HTMLAttributes; }) => ( {...toChildArray(children)} );