import React, { useState, useEffect, useRef, useCallback } from "react"; // Sample emojis + answers (Easy/Medium/Hard) const QUIZ = [ // Movies { type: "movie", prompt: "🍟🍔🥤", options: ["Fast Food Nation", "Pulp Fiction", "Ratatouille", "The Founder"], answer: "Pulp Fiction" }, { type: "movie", prompt: "🕷️👦", options: ["Spider-Man", "Charlotte's Web", "Batman", "Harry Potter"], answer: "Spider-Man" }, { type: "movie", prompt: "🧑‍🚀🌑", options: ["Gravity", "Apollo 13", "First Man", "Interstellar"], answer: "First Man" }, { type: "movie", prompt: "👸🏻🐸", options: ["The Frog Prince", "Tangled", "The Princess and the Frog", "Shrek"], answer: "The Princess and the Frog" }, { type: "movie", prompt: "🛳️🧊💔", options: ["The Perfect Storm", "Titanic", "Cast Away", "The Iceberg"], answer: "Titanic" }, { type: "movie", prompt: "🧟‍♂️🧟‍♀️🔫", options: ["Shaun of the Dead", "World War Z", "Zombieland", "Resident Evil"], answer: "Zombieland" }, // Books { type: "book", prompt: "👦🔪🏝️", options: ["The Beach", "Peter Pan", "Lord of the Flies", "Hatchet"], answer: "Lord of the Flies" }, { type: "book", prompt: "🐇🕳️⌚", options: ["Stuart Little", "Alice in Wonderland", "Charlotte's Web", "The Velveteen Rabbit"], answer: "Alice in Wonderland" }, { type: "book", prompt: "🧑‍🦰⚡️🧙‍♂️", options: ["Percy Jackson", "Harry Potter", "The Hobbit", "The Lightning Thief"], answer: "Harry Potter" }, { type: "book", prompt: "🏃‍♂️🔥", options: ["Running Man", "The Hunger Games", "Fahrenheit 451", "Catching Fire"], answer: "Fahrenheit 451" }, { type: "book", prompt: "🐖🏠", options: ["Animal Farm", "Charlotte's Web", "Babe", "The Three Little Pigs"], answer: "Animal Farm" }, // Famous people { type: "person", prompt: "👨‍🎤⚡", options: ["Bowie", "Freddie Mercury", "Elvis", "Prince"], answer: "Bowie" }, { type: "person", prompt: "🍎💻", options: ["Alan Turing", "Tim Apple", "Steve Jobs", "Bill Gates"], answer: "Steve Jobs" }, { type: "person", prompt: "👸🇬🇧", options: ["Margaret Thatcher", "Queen Victoria", "Princess Diana", "Queen Elizabeth II"], answer: "Queen Elizabeth II" }, { type: "person", prompt: "🎤🕺🏻👑", options: ["Elvis Presley", "James Brown", "Michael Jackson", "Prince"], answer: "Michael Jackson" }, { type: "person", prompt: "🏉🐐", options: ["Tom Brady", "Pele", "Serena Williams", "LeBron James"], answer: "Tom Brady" }, { type: "person", prompt: "⚽🇦🇷🐐", options: ["Cristiano Ronaldo", "Diego Maradona", "Lionel Messi", "Neymar"], answer: "Lionel Messi" } ]; // Shuffle util const shuffleArray = arr => arr.map(a => [a, Math.random()]).sort((a,b)=>a[1]-b[1]).map(a=>a[0]); function getRandomQuestions(n) { return shuffleArray(QUIZ).slice(0, n); } const GAME_TIME = 10; // seconds per question const ROUND_COUNT = 8; function formatCategory(type) { if (type === "movie") return "Movie"; if (type === "book") return "Book"; if (type === "person") return "Famous Person"; return "Quiz"; } // Main App export default function App() { const [gameState, setGameState] = useState("menu"); // menu, playing, over const [questions, setQuestions] = useState([]); const [current, setCurrent] = useState(0); const [score, setScore] = useState(0); const [timer, setTimer] = useState(GAME_TIME); const [showCorrect, setShowCorrect] = useState(false); const [selected, setSelected] = useState(null); const [highScore, setHighScore] = useAppStorage("emojiquiz_highscore", 0); const timerRef = useRef(); // Start a new game const startGame = () => { setQuestions(getRandomQuestions(ROUND_COUNT)); setCurrent(0); setScore(0); setGameState("playing"); setTimer(GAME_TIME); setShowCorrect(false); setSelected(null); }; // Timer logic useEffect(() => { if (gameState !== "playing") return; timerRef.current && clearInterval(timerRef.current); setTimer(GAME_TIME); timerRef.current = setInterval(() => { setTimer(prev => { if (prev <= 1) { clearInterval(timerRef.current); setShowCorrect(true); setTimeout(nextQuestion, 1200); return 0; } return prev - 1; }); }, 1000); return () => { timerRef.current && clearInterval(timerRef.current); }; }, [gameState, current]); // Answer select handler const handleSelect = (opt) => { if (showCorrect) return; setSelected(opt); setShowCorrect(true); clearInterval(timerRef.current); if (opt === questions[current].answer) { // Fast points: base + speed bonus const pts = 100 + timer * 10; setScore(s => s + pts); } setTimeout(nextQuestion, 1200); // Show correct briefly }; // Advance to next question or end const nextQuestion = () => { setShowCorrect(false); setSelected(null); if (current + 1 < questions.length) { setCurrent(c => c + 1); setTimer(GAME_TIME); } else { setGameState("over"); // Up high score? setHighScore(prev => score > prev ? score : prev); } }; // Reset for new game const handleRestart = () => { setGameState("menu"); setScore(0); setCurrent(0); setShowCorrect(false); setSelected(null); }; // Game states if (gameState === "menu") { return (

🤔❓🎬📚🌟

Who's That Emoji?

Guess the famous movie, book, or person matching each creative emoji combo before time runs out! Points for speed and accuracy. 🔥

High Score: {highScore}

Created by Vibeland AI • {new Date().getFullYear()}

); } if (gameState === "over") { const isHigh = score > highScore; return (

🎉

Game Over

Score: {score}

{isHigh && (

🏅 New High Score!

)}

); } // Game (playing) const q = questions[current] || {}; const options = useRef([]); if (!options.current[current]) { options.current[current] = shuffleArray(q.options || []); } return (

{/* Top bar */}

{current + 1} / {questions.length}

Score: {score}

{/* Timer */}

{timer}

{/* The emoji question */}

{q.prompt} {formatCategory(q.type)}

{/* Options */}

{options.current[current].map(opt => { let btnColor = "bg-white border border-[var(--ds-primary)] hover:bg-[var(--ds-background)] text-[var(--ds-foreground)]"; if (showCorrect) { if (opt === q.answer) { btnColor = "bg-[var(--ds-primary)] text-white border-[var(--ds-primary)] shadow ring-2 ring-[var(--ds-primary)]"; } else if (opt === selected) { btnColor = "bg-red-50 text-red-400 border-red-200"; } else { btnColor = "bg-white border border-gray-200 text-gray-500 opacity-70"; } } return ( ); })}

{/* Quick feedback */} {showCorrect && (

{selected === q.answer ? ( ✅ Correct! +{100 + timer * 10} ) : ( ❌ Oops! Answer: {q.answer} )}

)} {/* Progress bar at bottom */}

Answer quickly for more points!

); }