cohost/html/image-macro.tsx

import { Main, DragResizableImage, render_and_copy } from "./common.tsx";
// this is a really bad and boring idea. pass.
// new idea! "make your own image macro" scrollable background of various le classic meme images (imgflip)
// + images (yes, images; nobody has impact installed)
// nah. let's just do white + text-shadow
const base_url = "https://static.pyrope.net/imgflip/";
const urls = [
    "aggressive-right-turn.png",
    "aliens.png",
    "always-has-been.png",
    "balloon.png",
    "batman-slapping-robin.png",
    "bike-self-sabotage.png",
    "buff-doge-vs-cheems.png",
    "cefqrn.png",
    "change-my-mind.png",
    "chuck-norris.png",
    "despicable-plan.png",
    "distracted-boyfriend.png",
    "drake.png",
    "everywhere-everywhere.png",
    "evil-kermit.png",
    "expanding-brain.png",
    "girl-smile-fire.png",
    "heinous-suggestion.png",
    "hide-the-pain-harold.png",
    "i-am-once-again-asking.png",
    "if-i-had-one.png",
    "is-this-a.png",
    "not-sure-if.png",
    "one-does-not-simply.png",
    "or-draw-25.png",
    "panik-kalm-panik.png",
    "psycholonials-reference.png",
    "rock-the-dwayne-johnson-driving.png",
    "same-picture.png",
    "scroll-of-truth.png",
    "slam-button.png",
    "STRONG-handshake.png",
    "success-kid.png",
    "tap-head.png",
    "thinking-about-other-women.png",
    "this-is-fine.png",
    "two-buttons.png",
    "waiting-guy.png",
    "waiting-skeleton.png",
    "who-killed.png",
    "woman-yelling-at-cat.png",
    "you-get-a.png",
].map(x => base_url + x);

const Word = ({
    children,
    left = "0px",
    top = "0px",
}: {
    children: string;
    left?: string;
    top?: string;
}) => (
    <div
        style={{
            position: "absolute",
            resize: "both",
            minWidth: "max-content",
            minHeight: "fit-content",
            width: left,
            height: top,
            overflow: "hidden",
            display: "flex",
            // justifyContent: "right",
            // alignContent: "bottom",
        }}
    >
        <h1
            style={{
                color: "white",
                textShadow: "0px 0px 2px black",
                margin: "auto 0 0 auto",
            }}
        >
            {children}
        </h1>
    </div>
);

// alright, doing it the right way (https://cohost.org/blackle/post/38921-alright-cohost-it) is too hard.
// let's cheat.
// if we aren't random, and instead distribute things such that the initial setup has the least covered
// ehhhhhhhhhhhhhhhhhh
// sighhhhh let's just do it right
// generate the stupid freaking impact font
// use it as a background image
// ughhhhhh
// oo i know i'll make one image in photopea and just clip it
// that should work and be easy fingers crossed
// that'll actually be way harder to adapt lel
// ughhhh am i going to have to pull out that crappy library
// AND download an impact font
// (yes)
const ScatteredWords = ({ children }: { children: string[] }) => (
    <>
        {...children.map(w => (
            <Word
                top={`${(Math.random() * 100).toFixed(2)}%`}
                left={`${(Math.random() * 100).toFixed(2)}%`}
            >
                {w}
            </Word>
        ))}
    </>
);

const words = `
the the the the the the the
`
    .split(/\s+/)
    .filter(Boolean)
    .map(w => w.toUpperCase());

render_and_copy(
    <>
        <Main
            style={{ width: "100%", aspectRatio: "1" }}
            aria-described-by="user-content-meme-description"
        >
            <DragResizableImage
                url={urls[1]}
                top={10}
                left={10}
                width={10}
                height={10}
            />
            <DragResizableImage
                url={urls[2]}
                top={30}
                left={10}
                width={10}
                height={10}
            />
            <div
                style={{
                    display: "flex",
                    overflow: "scroll",
                    alignItems: "center",
                    gap: "1rem",
                }}
            >
                {...urls.map(u => (
                    <img
                        src={u}
                        style={{
                            maxHeight: "50vh",
                            outline: "1px solid black",
                        }}
                    />
                ))}
            </div>
        </Main>
        <p style={{ fontSize: "0px" }}>
            a horizontally scrollable list of memes with draggable words that
            look like a knockoff of impact font. if you want a better and
            (hopefully) more accessible version, visit imgflip.com. all of the
            memes are taken from there anyway
        </p>
    </>
);