import React, { useState, useRef, useEffect, useCallback, useMemo } from "react"; import Chart from "chart.js"; import confetti from "canvas-confetti"; const CHART_TITLES = [ "Number of Unicorns Found Per Day", "Annual Banana Peel Slips", "Percentage of Socks Lost in Dryer", "Duck Quacks Per Hour", "Average Llamas on Skateboards", "Frequency of Pizza Nightmares", "Cats Majestically Knocking Things Over", "Cups of Coffee Before 9AM", "Times 'WiFi' Yelled at Router", "Probability of Rain on Parade Days", "Spoons Missing (Per Household)", "APIs Named After Animals", "Penguin Slides by Week", "Occurrences of 'YOLO' in 2025", "Avocados Eaten by Hedgehogs", "Left Shoes vs Right Shoes Sales" ]; const CHART_TYPES = ["bar", "doughnut", "pie", "line"]; const LABEL_OPTIONS = [ ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], ["2019","2020","2021","2022","2023"], ["Red","Blue","Green","Yellow"], ["A","B","C","D"] ]; function randomInt(a, b) { return a + Math.floor(Math.random() * (b - a + 1)); } function shuffle(arr) { let a = arr.slice(); for (let i = a.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; } function randomChartData() { const title = CHART_TITLES[randomInt(0, CHART_TITLES.length-1)]; const type = CHART_TYPES[randomInt(0, CHART_TYPES.length-1)]; const labels = shuffle(LABEL_OPTIONS[randomInt(0,LABEL_OPTIONS.length-1)]); // Plausibility is higher when the data is less wacky (small number, smoother/linear) const plausible = Math.random() < 0.5; // flip a coin for which chart is more plausible let data; if (plausible) { // Smoother, more realistic numbers let base = randomInt(10, 50); data = labels.map((_, i) => base + i * randomInt(0, 3) + randomInt(-2,3)); } else { // Wacky/spiky numbers data = labels.map(() => randomInt(0, 100)); // Make at least one number ridiculous data[randomInt(0, data.length-1)] += randomInt(40, 100); } // Pick emoji for chart decoration const emoji = (plausible ? "🦄" : "🤪") + (Math.random() < 0.5 ? "✨" : "😹"); return { title, type, labels, data, plausible, emoji }; } function getWackyFeedback(isCorrect) { const corrects = [ "🎉 You nailed it!", "👏 Legend!", "Correct! Unicorns agree 🦄", "Big brain time! 🧠", "Winner winner meme chart dinner!", "😂 Yes, that's the one!" ]; const wrongs = [ "🤔 Oops!", "😅 Not quite!", "Unicorns will be sad...", "LOL, not the plausible one!", "That's what made it funnier!", "Try again for meme glory!" ]; return isCorrect ? corrects[randomInt(0, corrects.length-1)] : wrongs[randomInt(0, wrongs.length-1)]; } function ChartCard({chart, onClick, disabled, highlight, isWinner, showResult}) { // Custom chart rendering (Chart.js in canvas) const canvasRef = useRef(null); const chartRef = useRef(null); useEffect(()=> { if(typeof Chart === "undefined") return; if (chartRef.current) { chartRef.current.destroy(); } chartRef.current = new Chart(canvasRef.current, { type: chart.type, data: { labels: chart.labels, datasets: [{ label: chart.title, data: chart.data, backgroundColor: chart.type === "line" ? "rgba(34, 211, 238, 0.2)" : chart.data.map(()=>"rgba(168, 139, 250, 0.7)"), borderColor: "rgba(34, 211, 238, 1)", borderWidth: 2, tension: 0.4, pointBackgroundColor: "rgba(244, 114, 182, 1)" }] }, options: { plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { display: false } }, responsive: false, animation: { duration: 500 }, maintainAspectRatio: false } }); return ()=> chartRef.current?.destroy(); }, [chart]); return ( ); } const ROUND_TIME = 13; export default function App() { // Shared score (persisted) const [score, setScore] = useSharedStorage("memeChartGameScore", 0); const [personalBest, setPersonalBest] = useSharedStorage("memeChartGameBest", 0); // Game state const [round, setRound] = useState(1); const [charts, setCharts] = useState([]); const [picked, setPicked] = useState(null); // 0 or 1 const [result, setResult] = useState(null); // null | "win" | "lose" const [showResult, setShowResult] = useState(false); const [feedback, setFeedback] = useState(""); const [timer, setTimer] = useState(ROUND_TIME); const timerRef = useRef(); const [funnyVote, setFunnyVote] = useState(false); // Prepare new round const loadRound = useCallback(()=> { // Generate two distinct charts, randomize which is plausible let c1, c2; do { c1 = randomChartData(); c2 = randomChartData(); } while (c1.title === c2.title || c1.plausible === c2.plausible); // Shuffle order const arr = Math.random()<0.5 ? [c1, c2] : [c2, c1]; setCharts(arr); setPicked(null); setResult(null); setShowResult(false); setFunnyVote(false); setTimer(ROUND_TIME); }, []); // Start new round on mount and after each round useEffect(()=>{ loadRound(); }, [round]); // Countdown timer useEffect(()=>{ if (showResult) return; timerRef.current && clearInterval(timerRef.current); if (picked !== null) return; timerRef.current = setInterval(()=>{ setTimer(t=> { if (t <= 1) { clearInterval(timerRef.current); setTimeout(()=>handleTimeout(), 400); // Little pause before resolve } return t>0?t-1:0; }) }, 1000); return ()=>clearInterval(timerRef.current); }, [picked, showResult]); function handleTimeout() { setPicked(null); setShowResult(true); setResult("lose"); setFeedback("⏰ Time's up! Next meme battle awaits."); confetti({ particleCount: 30, spread: 70, origin: { y: 0.6 } }); setPersonalBest(Math.max(score, personalBest)); setScore(0); setTimeout(()=>setRound(r=>r+1),2300); } // Handle chart picked function handleSelect(idx) { if (picked !== null) return; setPicked(idx); const chosen = charts[idx]; setShowResult(true); let win = chosen.plausible; if (funnyVote) win = !chosen.plausible; // If funny vote, invert correctness setResult(win ? "win" : "lose"); setFeedback(getWackyFeedback(win)); if(win) { setScore(s=>{ const newScore=s+1; setPersonalBest(Math.max(newScore, personalBest)); return newScore; }); confetti({ particleCount: 60, spread: 100, angle: 68 + Math.random()*44, origin: { x: idx === 0 ? 0.15 : 0.85, y: 0.6 } }); setTimeout(()=>setRound(r=>r+1),1800); } else { setPersonalBest(Math.max(score, personalBest)); setScore(0); confetti({ particleCount: 22, spread: 75, origin: { y: 0.67 } }); setTimeout(()=>setRound(r=>r+1),2200); } } // Funny vote: next guess will invernt correctness function handleFunnyVote() { setFunnyVote(f=>!f); } function handleRestart() { setScore(0); setRound(1); setTimeout(()=>loadRound(),200); } // Progress bar width const progressWidth = Math.max(0, (timer/ROUND_TIME)*100); return (

Meme Chart Battle Royale

Two ridiculous data charts enter. Only your guess survives! Decide which chart is more plausible—or just vote for the funniest. Score streaks and get meme-glory!

Streak

{score}

Personal Best

{personalBest}

{/* Funny vote toggle */}

{funnyVote ? "Score if you pick the wackiest!" : "Score if you pick the plausible!"}

{/* Chart battle area */}

{charts.map((chart, idx) => ( handleSelect(idx)} disabled={picked !== null || showResult || timer===0} highlight={picked === idx} isWinner={showResult && ( (!funnyVote && chart.plausible) || (funnyVote && !chart.plausible) )} showResult={showResult} /> ))}

{/* Feedback / Result */}

{showResult && (

{feedback}

)}

{/* Next round countdown (if fail or timeout) */} {showResult && (result!=="win") && (

Starting a new meme round...

)} {/* Instructions */}

How to Play 💡

Look at BOTH meme charts.
Guess which is from "more plausible" data (or toggle to vote for the funniest 🤪)
Score streaks by picking correctly. See animated feedback!
Restart anytime to beat your personal best streak.

); }