import React, { useState, useRef, useEffect, useCallback } from "react"; const memeCaptions = [ // Top/Bottom classic "When you realize it's Monday again...", "Me trying to adult: [error 404]", "Current mood: Buffering...", "How I thought 2026 would be vs. reality", "My plans vs. 2026", "No one: Absolutely no one: Me:" , "When you open the fridge and forget why...", "Expectation / Reality", "Just vibing 🚀", "Send help 😂", // Dialog style "Friend: 'Just one more episode'\nMe: [5AM noises]", "Boss: Are you working?\nMe: Always! (in spirit)", "Trainer: 'It's not that hard!'\nMe: [collapses]", "Mom: Clean your room\nMe: Virtual backgrounds exist tho", // Remix meme templates "Upgrade. Upgrade. Go back.", "Is it possible to learn this power?", "This is fine.", "Change my mind.", "I'll just Photoshop it.", ]; const imageSources = [ // Memeable stock images/unsplash-like – unsplash-proxy (via /api/services/images) "funny cat", "awkward group", "surprised face", "banana on floor", "dramatic dog", "office chaos", "confused kid", "DIY fail", "retro computer", "unimpressed cat", "meme iceberg", "screaming goat", "dance party", "serious business", "zoom meeting", "vintage cartoon" ]; // Helper to random pick const randIdx = arr => Math.floor(Math.random() * arr.length); // Meme image object: { x, y, w, h, src, id } function getRandomRect(imgW, imgH, boardW, boardH) { // Fit to board - max 70% of space, random pos const scale = 0.3 + Math.random() * 0.4; const w = Math.max(96, Math.floor(boardW * scale)); const h = Math.max(96, Math.floor((w / imgW) * imgH)); const x = Math.floor(Math.random() * (boardW - w)); const y = Math.floor(Math.random() * (boardH - h)); return { x, y, w, h }; } export default function App() { const canvasW = 420, canvasH = 420; const [images, setImages] = useState([]); // [{src, x, y, w, h, id}] const [caption, setCaption] = useState(memeCaptions[randIdx(memeCaptions)]); const [captionStyle, setCaptionStyle] = useState("classic"); // "classic" | "dialog" const [loadingImgs, setLoadingImgs] = useState(false); const [error, setError] = useState(null); const [dragId, setDragId] = useState(null); const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 }); const [resizeId, setResizeId] = useState(null); const [resizeOrigin, setResizeOrigin] = useState({ x: 0, y: 0, w: 0, h: 0 }); const [showGrid, setShowGrid] = useState(false); const fileInputRef = useRef(); const canvasRef = useRef(); // For exporting const download = typeof useDownload !== "undefined" ? useDownload() : null; // Load random images const loadRandomImages = async () => { setLoadingImgs(true); try { // Random 2-3 queries from imageSources const numImages = 2 + randIdx([0, 1]); const promises = []; for (let i = 0; i < numImages; i++) { const q = imageSources[randIdx(imageSources)]; promises.push(fetch(`/api/services/images?q=${encodeURIComponent(q)}&per_page=10&page=1`) .then(r => r.ok ? r.json() : Promise.reject("Failed image fetch")) .then(j => j.results && j.results.length ? j.results[randIdx(j.results)].url : null)); } const res = await Promise.all(promises); // Image object structure: { src, x, y, w, h, id } // Preload images to get dims const loaded = await Promise.all( res.filter(Boolean).map(src => new Promise(resolve => { const img = new window.Image(); img.onload = () => { // size = fit to board as above const base = getRandomRect(img.width, img.height, canvasW, canvasH); resolve({ ...base, src, id: Math.random().toString(36).slice(2,12) }); }; img.onerror = () => resolve(null); img.crossOrigin = "anonymous"; img.src = src; })) ); setImages(loaded.filter(Boolean)); setError(null); } catch(e) { setError("Couldn't fetch meme images. Try again!"); } setLoadingImgs(false); }; // On mount, load random set useEffect(() => { loadRandomImages(); }, []); // Randomise/Remix caption const randomCaption = () => { let newIdx; do { newIdx = randIdx(memeCaptions); } while (memeCaptions[newIdx] === caption); setCaption(memeCaptions[newIdx]); setCaptionStyle(Math.random() < 0.5 ? "classic" : "dialog"); }; // Handle drag/resize const handleCanvasPointerDown = e => { const rect = e.target.getBoundingClientRect(); const pointerX = e.clientX - rect.left, pointerY = e.clientY - rect.top; // Check if near corner of any image (resize) for (const img of images) { const rx = img.x + img.w - 16, ry = img.y + img.h - 16; if (pointerX >= rx && pointerX <= rx+24 && pointerY >= ry && pointerY <= ry+24) { // resize setResizeId(img.id); setResizeOrigin({ x: pointerX, y: pointerY, w: img.w, h: img.h }); return; } } // Otherwise: check drag target image (topmost) for (let i = images.length-1; i>=0; i--) { const img = images[i]; if (pointerX >= img.x && pointerX <= img.x+img.w && pointerY >= img.y && pointerY <= img.y+img.h) { setDragId(img.id); setDragOffset({ x: pointerX - img.x, y: pointerY - img.y }); // Bring to front setImages(curr => { const idx = curr.findIndex(im => im.id === img.id); if (idx === curr.length - 1) return curr; const newList = [...curr]; const [moved] = newList.splice(idx,1); newList.push(moved); return newList; }); return; } } }; // Release const handleCanvasPointerUp = () => { setDragId(null); setResizeId(null); }; // Move or resize const handleCanvasPointerMove = e => { if (!dragId && !resizeId) return; const rect = canvasRef.current.getBoundingClientRect(); const pointerX = e.clientX - rect.left, pointerY = e.clientY - rect.top; setImages(curr => curr.map(img => { if(dragId === img.id) { // Clamp move let nx = pointerX - dragOffset.x, ny = pointerY - dragOffset.y; nx = Math.max(0, Math.min(canvasW - img.w, nx)); ny = Math.max(0, Math.min(canvasH - img.h, ny)); return { ...img, x: nx, y: ny }; } else if (resizeId === img.id) { const dx = pointerX - resizeOrigin.x, dy = pointerY - resizeOrigin.y; let nw = Math.max(68, resizeOrigin.w + dx), nh = Math.max(68, resizeOrigin.h + dy); // Clamp if (img.x + nw > canvasW) nw = canvasW - img.x; if (img.y + nh > canvasH) nh = canvasH - img.y; return { ...img, w: nw, h: nh }; } return img; })); }; // Mouse/touch events for drag/resize useEffect(() => { if (dragId || resizeId) { const move = e => handleCanvasPointerMove(e.type.includes('touch') ? e.touches[0] : e); const up = handleCanvasPointerUp; window.addEventListener('mousemove', move); window.addEventListener('mouseup', up); window.addEventListener('touchmove', move); window.addEventListener('touchend', up); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchmove', move); window.removeEventListener('touchend', up); }; } }, [dragId, resizeId, dragOffset, resizeOrigin]); // Drag-and-drop image upload const handleDrop = async e => { e.preventDefault(); const files = Array.from(e.dataTransfer.files || []); if (!files.length || !files[0].type.startsWith("image/")) return; const file = files[0]; let url; try { if (typeof useFileUpload !== "undefined") { const { uploadFile } = useFileUpload(); url = await uploadFile(file); } else { url = URL.createObjectURL(file); } // Load dimensions const img = new window.Image(); img.onload = () => { const base = getRandomRect(img.width, img.height, canvasW, canvasH); setImages(curr => [...curr, { ...base, src: url, id: Math.random().toString(36).slice(2,12) }]); }; img.onerror = () => setError("Couldn't use this image."); img.src = url; } catch { setError("Image upload failed."); } }; const handleFileInput = async e => { const file = (e.target.files && e.target.files[0]); if (!file) return; // Same as drop logic above let url; try { if (typeof useFileUpload !== "undefined") { const { uploadFile } = useFileUpload(); url = await uploadFile(file); } else { url = URL.createObjectURL(file); } const img = new window.Image(); img.onload = () => { const base = getRandomRect(img.width, img.height, canvasW, canvasH); setImages(curr => [...curr, { ...base, src: url, id: Math.random().toString(36).slice(2,12) }]); }; img.onerror = () => setError("Couldn't use this image."); img.src = url; } catch { setError("Image upload failed."); } }; const handleDeleteImg = id => setImages(curr => curr.filter(im => im.id !== id)); // Shuffle/remix image set const handleRemixImages = () => { loadRandomImages(); }; // Caption style switch const styles = [ { id: "classic", label: "Top/Bottom", render: (cap, W, H) => [

{cap.split("/")[0].split("\n")[0]}

{(cap.split("/")[1] || cap.split("\n")[1]) || ""}

] }, { id: "dialog", label: "Dialog Box", render: (cap, W, H) =>

{cap.split("\n").map((line, i) =>

{line}

)}

} ]; const currStyle = styles.find(s => s.id === captionStyle) || styles[0]; // Save/export as image const exportAsImage = async () => { // Paint to canvas const hidden = document.createElement('canvas'); hidden.width = canvasW; hidden.height = canvasH; const ctx = hidden.getContext('2d'); // background ctx.fillStyle = '#fff'; ctx.fillRect(0,0,canvasW,canvasH); // Images for (const img of images) { await new Promise(res => { const iTag = new window.Image(); iTag.crossOrigin = "anonymous"; iTag.onload = () => { ctx.drawImage(iTag, img.x, img.y, img.w, img.h); res(); }; iTag.onerror = res; iTag.src = img.src; }); } // Caption (approximate) ctx.save(); if (captionStyle === "classic") { ctx.font = "bold 26px Impact, sans-serif"; ctx.textAlign = "center"; ctx.strokeStyle = "#222"; ctx.lineWidth = 3; ctx.fillStyle = "#fff"; // top ctx.strokeText(caption.split("/")[0].split("\n")[0]||"", canvasW/2, 52); ctx.fillText(caption.split("/")[0].split("\n")[0]||"", canvasW/2, 52); // bottom const bot = (caption.split("/")[1] || caption.split("\n")[1] || ""); ctx.strokeText(bot, canvasW/2, canvasH-20); ctx.fillText(bot, canvasW/2, canvasH-20); } else if (captionStyle === "dialog") { ctx.font = "600 17px 'Inter', sans-serif"; ctx.textAlign = "left"; ctx.fillStyle = "#111"; const lines = caption.split("\n"); let y = canvasH - 38 - lines.length*19; ctx.globalAlpha = 0.93; ctx.fillStyle = "#fff"; ctx.roundRect && ctx.roundRect(19, y-11, canvasW-38, lines.length*24 + 18, 13); ctx.fill(); ctx.globalAlpha = 1; ctx.fillStyle = "#111"; for(let i=0;i`); } }; return (

Meme Mashup Machine

🪄 Drag, Remix, Meme, Repeat!

e.preventDefault()} onDrop={handleDrop} > {/* Drop area overlay */}

{showGrid &&

{/* Draw grid */} {[...Array(6)].map((_, ix) =>

)} {[...Array(6)].map((_, iy) =>

)}

} {/* MEME IMAGE LAYER */}

{/* Render images */} {images.map((img, idx) =>

{/* Resize handle bottom right */}

)} {/* Overlay: Caption */}

{currStyle.render(caption, canvasW, canvasH)}

{/* Show loading overlay */} {loadingImgs &&

Fetching meme magic...

}

{/* Overlay error */} {error &&

{error}

} {/* Caption style switch - floating top right */}

{styles.map(st => ) }

{/* File uploader overlay */}

{/* Caption input box */}

Caption: