diff --git a/html/common.tsx b/html/common.tsx index 5e370aa..725c1a3 100644 --- a/html/common.tsx +++ b/html/common.tsx @@ -376,3 +376,45 @@ export const Cycle = ({ ); + +// 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; +}) => ( +
+
+
+
+
+
+
+
+
+); diff --git a/html/image-macro.tsx b/html/image-macro.tsx index a20f6d5..dd0f479 100644 --- a/html/image-macro.tsx +++ b/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; +}) => (
- -

- ACCORDING TO MY UNDERSTANDING OF THE DEFINITION OF AN IMAGE MACRO - THIS -

-

- THIS IS AN IMAGE MACRO -

+

+ {children} +

); + +// 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 => ( + + {w} + + ))} + +); + +const words = ` +the the the the the the the +` + .split(/\s+/) + .filter(Boolean) + .map(w => w.toUpperCase()); + +render_and_copy( + <> +
+ + +
+ {...urls.map(u => ( + + ))} +
+
+

+ 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 +

+ +); diff --git a/static/cruelty-squad-divine-light-border.webp b/static/cruelty-squad-divine-light-border.webp new file mode 100644 index 0000000..6df88bd Binary files /dev/null and b/static/cruelty-squad-divine-light-border.webp differ diff --git a/static/imgflip/STRONG-handshake.png b/static/imgflip/STRONG-handshake.png new file mode 100644 index 0000000..42c425d Binary files /dev/null and b/static/imgflip/STRONG-handshake.png differ diff --git a/static/imgflip/aggressive-right-turn.png b/static/imgflip/aggressive-right-turn.png new file mode 100644 index 0000000..04c1d02 Binary files /dev/null and b/static/imgflip/aggressive-right-turn.png differ diff --git a/static/imgflip/aliens.png b/static/imgflip/aliens.png new file mode 100644 index 0000000..0a42cfd Binary files /dev/null and b/static/imgflip/aliens.png differ diff --git a/static/imgflip/always-has-been.png b/static/imgflip/always-has-been.png new file mode 100644 index 0000000..4709272 Binary files /dev/null and b/static/imgflip/always-has-been.png differ diff --git a/static/imgflip/balloon.png b/static/imgflip/balloon.png new file mode 100644 index 0000000..614b40c Binary files /dev/null and b/static/imgflip/balloon.png differ diff --git a/static/imgflip/batman-slapping-robin.png b/static/imgflip/batman-slapping-robin.png new file mode 100644 index 0000000..015ff8a Binary files /dev/null and b/static/imgflip/batman-slapping-robin.png differ diff --git a/static/imgflip/bike-self-sabotage.png b/static/imgflip/bike-self-sabotage.png new file mode 100644 index 0000000..b4a7543 Binary files /dev/null and b/static/imgflip/bike-self-sabotage.png differ diff --git a/static/imgflip/buff-doge-vs-cheems.png b/static/imgflip/buff-doge-vs-cheems.png new file mode 100644 index 0000000..39b9bfd Binary files /dev/null and b/static/imgflip/buff-doge-vs-cheems.png differ diff --git a/static/imgflip/cefqrn.png b/static/imgflip/cefqrn.png new file mode 100644 index 0000000..463fae0 Binary files /dev/null and b/static/imgflip/cefqrn.png differ diff --git a/static/imgflip/change-my-mind.png b/static/imgflip/change-my-mind.png new file mode 100644 index 0000000..6c1ff64 Binary files /dev/null and b/static/imgflip/change-my-mind.png differ diff --git a/static/imgflip/chuck-norris.png b/static/imgflip/chuck-norris.png new file mode 100644 index 0000000..55798b4 Binary files /dev/null and b/static/imgflip/chuck-norris.png differ diff --git a/static/imgflip/despicable-plan.png b/static/imgflip/despicable-plan.png new file mode 100644 index 0000000..80c450e Binary files /dev/null and b/static/imgflip/despicable-plan.png differ diff --git a/static/imgflip/distracted-boyfriend.png b/static/imgflip/distracted-boyfriend.png new file mode 100644 index 0000000..7df6e5b Binary files /dev/null and b/static/imgflip/distracted-boyfriend.png differ diff --git a/static/imgflip/drake.png b/static/imgflip/drake.png new file mode 100644 index 0000000..f32541c Binary files /dev/null and b/static/imgflip/drake.png differ diff --git a/static/imgflip/everywhere-everywhere.png b/static/imgflip/everywhere-everywhere.png new file mode 100644 index 0000000..693e876 Binary files /dev/null and b/static/imgflip/everywhere-everywhere.png differ diff --git a/static/imgflip/evil-kermit.png b/static/imgflip/evil-kermit.png new file mode 100644 index 0000000..672ca33 Binary files /dev/null and b/static/imgflip/evil-kermit.png differ diff --git a/static/imgflip/expanding-brain.png b/static/imgflip/expanding-brain.png new file mode 100644 index 0000000..bb6e691 Binary files /dev/null and b/static/imgflip/expanding-brain.png differ diff --git a/static/imgflip/girl-smile-fire.png b/static/imgflip/girl-smile-fire.png new file mode 100644 index 0000000..084f7b0 Binary files /dev/null and b/static/imgflip/girl-smile-fire.png differ diff --git a/static/imgflip/heinous-suggestion.png b/static/imgflip/heinous-suggestion.png new file mode 100644 index 0000000..e03a5c3 Binary files /dev/null and b/static/imgflip/heinous-suggestion.png differ diff --git a/static/imgflip/hide-the-pain-harold.png b/static/imgflip/hide-the-pain-harold.png new file mode 100644 index 0000000..5aebc09 Binary files /dev/null and b/static/imgflip/hide-the-pain-harold.png differ diff --git a/static/imgflip/i-am-once-again-asking.png b/static/imgflip/i-am-once-again-asking.png new file mode 100644 index 0000000..4a24fce Binary files /dev/null and b/static/imgflip/i-am-once-again-asking.png differ diff --git a/static/imgflip/if-i-had-one.png b/static/imgflip/if-i-had-one.png new file mode 100644 index 0000000..7a6ecc2 Binary files /dev/null and b/static/imgflip/if-i-had-one.png differ diff --git a/static/imgflip/is-this-a.png b/static/imgflip/is-this-a.png new file mode 100644 index 0000000..3ab32a0 Binary files /dev/null and b/static/imgflip/is-this-a.png differ diff --git a/static/imgflip/not-sure-if.png b/static/imgflip/not-sure-if.png new file mode 100644 index 0000000..c9f7811 Binary files /dev/null and b/static/imgflip/not-sure-if.png differ diff --git a/static/imgflip/one-does-not-simply.png b/static/imgflip/one-does-not-simply.png new file mode 100644 index 0000000..4794465 Binary files /dev/null and b/static/imgflip/one-does-not-simply.png differ diff --git a/static/imgflip/or-draw-25.png b/static/imgflip/or-draw-25.png new file mode 100644 index 0000000..465c312 Binary files /dev/null and b/static/imgflip/or-draw-25.png differ diff --git a/static/imgflip/panik-kalm-panik.png b/static/imgflip/panik-kalm-panik.png new file mode 100644 index 0000000..8a137d1 Binary files /dev/null and b/static/imgflip/panik-kalm-panik.png differ diff --git a/static/imgflip/psycholonials-reference.png b/static/imgflip/psycholonials-reference.png new file mode 100644 index 0000000..ffb31d2 Binary files /dev/null and b/static/imgflip/psycholonials-reference.png differ diff --git a/static/imgflip/rock-the-dwayne-johnson-driving.png b/static/imgflip/rock-the-dwayne-johnson-driving.png new file mode 100644 index 0000000..6b39acd Binary files /dev/null and b/static/imgflip/rock-the-dwayne-johnson-driving.png differ diff --git a/static/imgflip/same-picture.png b/static/imgflip/same-picture.png new file mode 100644 index 0000000..23645e9 Binary files /dev/null and b/static/imgflip/same-picture.png differ diff --git a/static/imgflip/scroll-of-truth.png b/static/imgflip/scroll-of-truth.png new file mode 100644 index 0000000..d58f8a7 Binary files /dev/null and b/static/imgflip/scroll-of-truth.png differ diff --git a/static/imgflip/slam-button.png b/static/imgflip/slam-button.png new file mode 100644 index 0000000..2e6beb1 Binary files /dev/null and b/static/imgflip/slam-button.png differ diff --git a/static/imgflip/success-kid.png b/static/imgflip/success-kid.png new file mode 100644 index 0000000..1f7ebb1 Binary files /dev/null and b/static/imgflip/success-kid.png differ diff --git a/static/imgflip/tap-head.png b/static/imgflip/tap-head.png new file mode 100644 index 0000000..428ee3b Binary files /dev/null and b/static/imgflip/tap-head.png differ diff --git a/static/imgflip/thinking-about-other-women.png b/static/imgflip/thinking-about-other-women.png new file mode 100644 index 0000000..4bf82d9 Binary files /dev/null and b/static/imgflip/thinking-about-other-women.png differ diff --git a/static/imgflip/this-is-fine.png b/static/imgflip/this-is-fine.png new file mode 100644 index 0000000..4ce478b Binary files /dev/null and b/static/imgflip/this-is-fine.png differ diff --git a/static/imgflip/two-buttons.png b/static/imgflip/two-buttons.png new file mode 100644 index 0000000..990e068 Binary files /dev/null and b/static/imgflip/two-buttons.png differ diff --git a/static/imgflip/waiting-guy.png b/static/imgflip/waiting-guy.png new file mode 100644 index 0000000..27d2021 Binary files /dev/null and b/static/imgflip/waiting-guy.png differ diff --git a/static/imgflip/waiting-skeleton.png b/static/imgflip/waiting-skeleton.png new file mode 100644 index 0000000..b88ea21 Binary files /dev/null and b/static/imgflip/waiting-skeleton.png differ diff --git a/static/imgflip/who-killed.png b/static/imgflip/who-killed.png new file mode 100644 index 0000000..255d6e0 Binary files /dev/null and b/static/imgflip/who-killed.png differ diff --git a/static/imgflip/woman-yelling-at-cat.png b/static/imgflip/woman-yelling-at-cat.png new file mode 100644 index 0000000..dd99442 Binary files /dev/null and b/static/imgflip/woman-yelling-at-cat.png differ diff --git a/static/imgflip/you-get-a.png b/static/imgflip/you-get-a.png new file mode 100644 index 0000000..a403c17 Binary files /dev/null and b/static/imgflip/you-get-a.png differ