import sample from "https://deno.land/x/lodash@4.16.2-es/sample.js"; import shuffle from "https://deno.land/x/lodash@4.16.2-es/shuffle.js"; import { BRAND_COLORS, PATTERNS, LAYOUTS, DEFAULT_SIZE_PX, } from "./constants.ts"; export { default as config } from "./config.ts"; export type Layout = | "random" | "row" | "two-rows" | "two-rows-offset" | "three-rows" | "three-rows-offset" | "column" | "two-columns" | "two-columns-offset"; export type Pattern = | "random" | "solid" | "bicolor" | "bicolor-alt" | "bicolor-stripes" | "tricolor" | "tricolor-alt" | "tricolor-stripes" | "mixed" | "wild"; const getRandomLayout = () => sample(Object.keys(LAYOUTS)) as Layout; // Choose random and make corrections if override colors are set const getPatternAndPalette = ( chosenPattern: Pattern, overrideColors?: string[] ) => { let palette = shuffle(overrideColors?.length ? overrideColors : BRAND_COLORS); let pattern = chosenPattern === "random" ? sample(PATTERNS) : chosenPattern; if (palette.length === 1) pattern = "solid"; if (palette.length === 2 && pattern.startsWith("tri")) pattern = pattern.replace("tri", "bi"); if (pattern === "solid") palette = palette.slice(0, 1); if (pattern.startsWith("bi")) palette = palette.slice(0, 2); if (pattern.startsWith("tri")) palette = palette.slice(0, 3); return { palette, pattern }; }; export async function handler({ layout: chosenLayout = "random", pattern: chosenPattern = "random", size = DEFAULT_SIZE_PX, overrideColors, }: { layout: Layout; pattern: Pattern; size?: number; overrideColors?: string[]; }) { const layout = chosenLayout === "random" ? getRandomLayout() : chosenLayout; const { pattern, palette } = getPatternAndPalette( chosenPattern, overrideColors ); const current = { color: palette[0], pos: 0, }; const nextColor = ( override = pattern === "solid" ? current.color : undefined ) => { current.color = override || sample(palette.filter((c) => c !== current.color)); }; const sizeInPx = size || DEFAULT_SIZE_PX; const px = (v: number) => `${v * sizeInPx}px`; const sz = (w: number, h: number) => ({ width: px(w), height: px(h) }); const Letter = ({ children }: any) => { // First letter is position 1 current.pos = current.pos + 1; switch (pattern) { case "bicolor": nextColor(current.pos < 3 ? palette[0] : palette[1]); break; case "tricolor": if (current.pos < 2) nextColor(palette[0]); else if (current.pos < 4) nextColor(palette[1]); else nextColor(palette[2]); break; case "tricolor-alt": nextColor(palette[current.pos % 3]); break; case "bicolor-alt": case "mixed": nextColor(); break; } return ( {children ?? undefined} ); }; const Spacer = () => ; const Stripe = ({ pos = 0, style = {} }: any) => { if (pattern === "wild") { nextColor(); } else if (pattern === "bicolor-stripes") { nextColor(palette[pos % 2]); } else if (pattern === "tricolor-stripes") { nextColor(palette[pos]); } return (

); }; const Letters: Record typeof Letter> = { Z: () => ( ), I: () => ( ), P: () => ( ), E: () => ( ), R: () => ( ), }; return ( {LAYOUTS[layout].map((row) => ( {row.split("").map((letter) => { const C = Letters[letter] || Spacer; return ; })} ))} ); }

Help & Docs