import React, { useState, useRef, useEffect, useCallback } from "react"; const MEME_TEMPLATES = [ { name: "Distracted Boyfriend", url: "https://i.imgflip.com/1ur9b0.jpg", w: 600, h: 400 }, { name: "Drake Hotline Bling", url: "https://i.imgflip.com/30b1gx.jpg", w: 600, h: 600 }, { name: "Expanding Brain", url: "https://i.imgflip.com/1jwhww.jpg", w: 600, h: 900 }, { name: "Mocking Spongebob", url: "https://i.imgflip.com/1otk96.jpg", w: 600, h: 500 }, { name: "Change My Mind", url: "https://i.imgflip.com/24y43o.jpg", w: 600, h: 471 }, ]; // Themed word pool: "Absurd Situations" const CAPTION_POOL = [ "When you realize it's Monday again", "Me: I'll do it tomorrow. Also me: Never does it", "Trying to fix my life with memes", "When WiFi stops working for 5 seconds", "My brain at 2am: Create chaos", "When you sneeze and someone says 'Bless you' 10 times", "Current mood: potato", "That moment you forget your own age", "Adulting: Expected vs. Reality", "Me explaining why I need a nap for the 3rd time today", ]; const EMOJIS = ["😂", "🔥", "😎", "😭", "👀", "🥲", "🧠", "👍", "🎉", "🙌", "🤦‍♂️", "🥔"]; const STICKERS = [ { name: "doge", url: "https://pngimg.com/uploads/doge/doge_PNG12.png" }, { name: "sof frog", url: "https://emojiisland.com/cdn/shop/products/Frog_Emoji_Icon_ios10_large.png?w=240" }, { name: "popcat", url: "https://pngimg.com/uploads/cat/cat_PNG1637.png" }, { name: "peepo blush", url: "https://static-cdn.jtvnw.net/emoticons/v2/1603955/default/dark/3.0" }, ]; function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; } // Helper to limit sticker/emoji drag inside canvas function clamp(val, min, max) { return Math.max(min, Math.min(max, val)); } function getContrastingColor(hexBg) { // crude contrast for white or black text on meme backgrounds if (!hexBg) return '#FFFFFF'; hexBg = hexBg.replace('#', ''); if (hexBg.length !== 6) return '#FFFFFF'; const r = parseInt(hexBg.substr(0,2),16); const g = parseInt(hexBg.substr(2,2),16); const b = parseInt(hexBg.substr(4,2),16); const brightness = (r * 299 + g * 587 + b * 114) / 1000; return brightness > 128 ? '#000000' : '#FFFFFF'; } export default function App() { // meme, caption state const [meme, setMeme] = useState(randomItem(MEME_TEMPLATES)); const [caption, setCaption] = useState(randomItem(CAPTION_POOL)); const [dragged, setDragged] = useState(null); // {type, idx} // overlays: { type: 'emoji' | 'sticker', value, x, y, size } const [overlays, setOverlays] = useState([]); const [selectedIdx, setSelectedIdx] = useState(null); // overlay editing const memeRef = useRef(); const canvasRef = useRef(); const [downloading, setDownloading] = useState(false); // Random memes/captions const nextMeme = () => { let newMeme; do { newMeme = randomItem(MEME_TEMPLATES); } while (newMeme.url === meme.url); setMeme(newMeme); setCaption(randomItem(CAPTION_POOL)); setOverlays([]); setSelectedIdx(null); }; const remixCaption = () => { let newCaption; do { newCaption = randomItem(CAPTION_POOL); } while (newCaption === caption); setCaption(newCaption); }; // Drag-and-drop overlays const handleDragStart = (type, value, e) => { setDragged({ type, value, offsetX: e.nativeEvent.offsetX, offsetY: e.nativeEvent.offsetY }); }; const handleDropOnMeme = e => { if (!dragged || !memeRef.current) return; const rect = memeRef.current.getBoundingClientRect(); const x = clamp(e.clientX - rect.left - 32, 0, rect.width - 48); // emoji ~48px const y = clamp(e.clientY - rect.top - 32, 0, rect.height - 48); setOverlays(prev => [...prev, { ...dragged, x, y, size: 56 }]); setDragged(null); }; // Drag overlays on meme const handleOverlayPointerDown = (idx, e) => { e.stopPropagation(); setSelectedIdx(idx); setDragged({ ...overlays[idx], idx, startX: e.clientX, startY: e.clientY }); }; useEffect(() => { // Document move listener for dragging overlays if (!dragged || dragged.idx === undefined) return; const handleMove = e => { setOverlays(current => { return current.map((ov, i) => { if (i !== dragged.idx) return ov; const deltaX = e.clientX - dragged.startX; const deltaY = e.clientY - dragged.startY; const memeBox = memeRef.current.getBoundingClientRect(); let x = clamp((dragged.x ?? ov.x) + deltaX, 0, memeBox.width - 36); let y = clamp((dragged.y ?? ov.y) + deltaY, 0, memeBox.height - 36); return { ...ov, x, y }; }); }); }; const stop = () => { setDragged(null); }; window.addEventListener('pointermove', handleMove); window.addEventListener('pointerup', stop); return () => { window.removeEventListener('pointermove', handleMove); window.removeEventListener('pointerup', stop); } }, [dragged]); // Download: Render to hidden canvas const downloadMeme = async () => { if (!memeRef.current || !canvasRef.current) return; setDownloading(true); // set canvas to meme size canvasRef.current.width = meme.w; canvasRef.current.height = meme.h; const ctx = canvasRef.current.getContext('2d'); ctx.clearRect(0,0,meme.w,meme.h); // Load meme image const img = new window.Image(); img.crossOrigin = "anonymous"; img.src = meme.url; await new Promise(res => { img.onload = res; img.onerror = res; }); ctx.drawImage(img, 0, 0, meme.w, meme.h); // Caption ctx.font = `bold ${Math.floor(meme.h/14)}px Inter, Arial,sans-serif`; ctx.textAlign = 'center'; ctx.strokeStyle = '#000000'; ctx.lineWidth = 6; ctx.fillStyle = '#fff'; ctx.textBaseline = 'top'; const lh = Math.ceil(meme.h/12); const lines = wrapLines(ctx, caption, meme.w-32); lines.forEach((line, i) => { ctx.strokeText(line, meme.w/2, 8 + i*lh); ctx.fillText(line, meme.w/2, 8 + i*lh); }); // Overlays for (const ov of overlays) { const relX = (ov.x / memeRef.current.offsetWidth) * meme.w; const relY = (ov.y / memeRef.current.offsetHeight) * meme.h; const relSize = (ov.size / memeRef.current.offsetWidth) * meme.w; if (ov.type === "emoji") { ctx.font = `${Math.floor(relSize)}px serif`; ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.strokeText(ov.value, relX+relSize/2, relY+relSize/8); ctx.fillText(ov.value, relX+relSize/2, relY+relSize/8); } else if (ov.type === "sticker") { await drawSticker(ctx, ov.value, relX, relY, relSize, relSize); } } // Download const url = canvasRef.current.toDataURL('image/png'); const link = document.createElement('a'); link.href = url; link.download = `meme-roulette.png`; document.body.appendChild(link); link.click(); setTimeout(()=>document.body.removeChild(link), 500); setDownloading(false); }; // Helper for line wrapping (for download caption) function wrapLines(ctx, text, maxW) { const words = text.split(' '); let lines = [], line = ''; for (let w of words) { const test = line + w + ' '; if (ctx.measureText(test).width > maxW) { if (line) lines.push(line.trim()); line = w + ' '; } else { line = test; } } if (line) lines.push(line.trim()); return lines; } // Draw sticker to canvas for download async function drawSticker(ctx, url, x, y, w, h) { return new Promise((res, rej) => { const img = new window.Image(); img.crossOrigin = "anonymous"; img.onload = ()=> { ctx.drawImage(img, x, y, w, h); res(); }; img.onerror = res; img.src = url; }); } // Tap overlay to resize or delete const handleResize = dir => { if (selectedIdx==null) return; setOverlays(list => list.map((ov, i) => i === selectedIdx ? { ...ov, size: clamp(ov.size + (dir*12), 32, 120) } : ov )); }; const handleDelete = () => { if (selectedIdx==null) return; setOverlays(list => list.filter((_,i) => i !== selectedIdx)); setSelectedIdx(null); }; // Accessible keyboard overlay deletion useEffect(()=>{ function onKey(e) { if (selectedIdx!=null && (e.key==='Backspace'||e.key==='Delete')){ handleDelete(); } } window.addEventListener('keydown', onKey); return ()=> window.removeEventListener('keydown', onKey); }); return (

{/* Title Bar */}

🎲

Meme Roulette

{/* Meme Editor */}

Tip: Drag an emoji or sticker below onto the meme. Tap overlays to resize or delete. Remix text for inspiration!

{/* Meme image area */}

{/* Meme bg img */} {meme.name}

{/* Caption (shown at top) */}

{caption}

{/* Draggable overlays */} {overlays.map((ov, idx) =>

handleOverlayPointerDown(idx, e)} onClick={()=>setSelectedIdx(idx)} role="button" aria-label="Edit overlay" > {ov.type==='emoji' ? ( {ov.value} ) : ( sticker

)} {/* editing corner UI if selected */} {selectedIdx===idx && (

)}

{/* Draggable emoji & sticker bar */}

Emojis: {EMOJIS.map((emj,i)=> handleDragStart('emoji', emj, e)} style={{ userSelect: 'none' }} > {emj} )}

Stickers: {STICKERS.map((stk,i) => {stk.name}

handleDragStart('sticker', stk.url, e)} aria-label={"drag sticker " + stk.name} /> )}

{/* Hidden canvas for download */}

); }