meme: path set

html/common.tsx

@@ -376,3 +376,45 @@ export const Cycle = ({
         </div>
     </div>
 );
+
+// 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,
+}: {
+    url: string;
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    indicator?: boolean;
+}) => (
+    <div style="position: absolute;top: 0px;bottom: 0px;left: 0px;direction: rtl;font-size: 0px;line-height: 0;pointer-events: none;white-space: nowrap;">
+        <div style="overflow: visible;width: 1px;height: 1px;display: inline-block;direction: ltr;vertical-align: text-top;position: relative;top: -9px;left: -9px;">
+            <div style="position: relative;display: grid;grid-template-rows: 1fr;grid-template-columns: 1fr;">
+                <div
+                    style={`pointer-events: none;background-image: url(${url});background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;grid-row: 1;grid-column: 1;transform: translate(-50%, -50%);`}
+                ></div>
+                <div
+                    style={`overflow: hidden; resize: both; width: ${width}px;height: ${height}px;min-width: 36px; min-height: 36px; top: 0px; left: 0px; pointer-events: auto; position: relative; grid-area: 1 / 1 / auto / auto; transform: translate(-50%, -50%); clip-path: polygon(calc(100% - 18px) calc(100% - 18px), calc(100% - 18px) 100%, 100% 100%, 100% calc(100% - 18px));`}
+                ></div>
+            </div>
+        </div>
+        <div
+            style={`overflow: hidden; resize: both; direction: ltr; display: inline-block; width: ${
+                left + 18 + width / 2
+            }px;height: ${
+                top + 18 + height / 2
+            }px; position: relative; opacity: 0.3; background: ${
+                indicator
+                    ? 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAATklEQVR4AY3OAQYAMQwF0d7/0q2KrzFGZZZVPPLXxlc/RHIjEyIMxBnWBBAFcNODOaSo8X7C3uU/hY3Q5Bwm6vBkCKTiOU3mWkYkI5KQA4BYG/M4zBNLAAAAAElFTkSuQmCC")'
+                    : "none"
+            } 100% 100% no-repeat; clip-path: polygon(calc(100% - 18px) calc(100% - 18px), calc(100% - 18px) 100%, 100% 100%, 100% calc(100% - 18px)); pointer-events: auto;`}
+        ></div>
+    </div>
+);

html/image-macro.tsx

@@ -1,24 +1,167 @@
-import { render_and_copy } from "./common.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);
 
-render_and_copy(
+const Word = ({
+    children,
+    left = "0px",
+    top = "0px",
+}: {
+    children: string;
+    left?: string;
+    top?: string;
+}) => (
     <div
         style={{
-            display: "grid",
+            position: "absolute",
-            gridTemplateColumns: "1fr",
+            resize: "both",
-            gridTemplateRows: "1fr 3fr 1fr",
+            minWidth: "max-content",
+            minHeight: "fit-content",
+            width: left,
+            height: top,
+            overflow: "hidden",
+            display: "flex",
+            // justifyContent: "right",
+            // alignContent: "bottom",
         }}
     >
-        <img
+        <h1
-            src="https://static.pyrope.net/latula.webp"
+            style={{
-            style={{ display: "grid", gridRow: "1 / 3" }}
+                color: "white",
-        />
+                textShadow: "0px 0px 2px black",
-        <p style={{ fontFamily: "Impact", display: "grid", gridRow: 1 }}>
+                margin: "auto 0 0 auto",
-            ACCORDING TO MY UNDERSTANDING OF THE DEFINITION OF AN IMAGE MACRO
+            }}
-            THIS
+        >
-        </p>
+            {children}
-        <p style={{ fontFamily: "Impact", display: "grid", gridRow: 3 }}>
+        </h1>
-            THIS IS AN IMAGE MACRO
-        </p>
     </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>
+    </>
+);