import React, { useState, useEffect, useRef } from "react"; import { RefreshCw, Timer, Star, Smile, Trophy, Plus, X, Drag } from 'lucide-react'; // Default level: simple smiley pattern (5x5) const LEVELS = [ { size: 5, name: "Smiley Face", emojiSet: ["🟡", "⚫", "⬜️"], solution: [ ["⬜️", "🟡", "🟡", "🟡", "⬜️"], ["🟡", "⚫", "🟡", "⚫", "🟡"], ["🟡", "🟡", "🟡", "🟡", "🟡"], ["🟡", "⚫", "🟡", "⚫", "🟡"], ["⬜️", "🟡", "🟡", "🟡", "⬜️"], ], unlockAt: 0, }, { size: 6, name: "Heart", emojiSet: ["❤️", "🟪", "⬜️"], solution: [ ["⬜️", "❤️", "🟪", "🟪", "❤️", "⬜️"], ["❤️", "🟪", "🟪", "🟪", "🟪", "❤️"], ["🟪", "🟪", "🟪", "🟪", "🟪", "🟪"], ["⬜️", "🟪", "🟪", "🟪", "🟪", "⬜️"], ["⬜️", "⬜️", "🟪", "🟪", "⬜️", "⬜️"], ["⬜️", "⬜️", "⬜️", "⬜️", "⬜️", "⬜️"], ], unlockAt: 2, }, { size: 7, name: "Star", emojiSet: ["⭐️", "⬛️", "⬜️"], solution: [ ["⬜️","⬜️","⭐️","⬛️","⭐️","⬜️","⬜️"], ["⬜️","⭐️","⭐️","⭐️","⭐️","⭐️","⬜️"], ["⭐️","⭐️","⭐️","⭐️","⭐️","⭐️","⭐️"], ["⬛️","⭐️","⭐️","⭐️","⭐️","⭐️","⬛️"], ["⬜️","⭐️","⭐️","⭐️","⭐️","⭐️","⬜️"], ["⬜️","⬜️","⭐️","⭐️","⭐️","⬜️","⬜️"], ["⬜️","⬜️","⬛️","⭐️","⬛️","⬜️","⬜️"], ], unlockAt: 4, }, ]; // Helper to deep clone boards function clone2D(arr) { return arr.map(row => [...row]); } function findFirstLocked(levels, unlocked) { for (let i = 0; i < levels.length; ++i) { if (unlocked < levels[i].unlockAt) return i; } return levels.length; } // Track unlocked packs and best times const STORAGE_KEY = "emoji-grid-progress"; function useProgress() { const [progress, setProgress] = useSharedStorage(STORAGE_KEY, { unlocked: 1, bestTimes: {} }); // progress: { unlocked: n, bestTimes: { [levelIdx]: time in ms } } return [progress, setProgress]; } export default function App() { const [progress, setProgress] = useProgress(); const [selectedLevel, setSelectedLevel] = useState(0); const [page, setPage] = useState("play"); // play | select const [board, setBoard] = useState(null); // 2d array const [dragEmoji, setDragEmoji] = useState(null); // emoji being dragged const [dragOrigin, setDragOrigin] = useState(null); // {row, col} const [dragging, setDragging] = useState(false); const [currentEmoji, setCurrentEmoji] = useState(null); // emoji selected for tap (on mobile) const [started, setStarted] = useState(false); const [finished, setFinished] = useState(false); const [startTime, setStartTime] = useState(null); const [elapsed, setElapsed] = useState(0); const timerRef = useRef(); const level = LEVELS[selectedLevel]; const unlocked = progress.unlocked ?? 1; const bestTime = progress.bestTimes?.[selectedLevel]; // Initialize board for selected level useEffect(() => { if (!level) return; setBoard(Array.from({ length: level.size }, () => Array(level.size).fill(level.emojiSet[level.emojiSet.length - 1]))); setCurrentEmoji(level.emojiSet[0]); setFinished(false); setStarted(false); setElapsed(0); setDragEmoji(null); setDragOrigin(null); clearInterval(timerRef.current); }, [selectedLevel, level]); // Timer effect for play useEffect(() => { if (started && !finished) { setStartTime(Date.now() - elapsed); timerRef.current = setInterval(() => setElapsed(Date.now() - (startTime || Date.now())), 50); return () => clearInterval(timerRef.current); } else { clearInterval(timerRef.current); } }, [started, finished, startTime]); // Drag handlers for desktop/mobile const handleEmojiDragStart = (emoji, evt) => { evt?.preventDefault(); setDragEmoji(emoji); setDragging(true); }; const handleEmojiDragEnd = () => { setDragEmoji(null); setDragging(false); }; const handleCellDrop = (row, col) => { if (!dragEmoji && !currentEmoji) return; const newBoard = clone2D(board); newBoard[row][col] = dragEmoji || currentEmoji; setBoard(newBoard); if (!started) { setStarted(true); setStartTime(Date.now()); } setDragEmoji(null); setDragging(false); // Check solution checkFinished(newBoard); }; const handleCellTap = (row, col) => { if (dragging) return; if (!currentEmoji) return; const newBoard = clone2D(board); newBoard[row][col] = currentEmoji; setBoard(newBoard); if (!started) { setStarted(true); setStartTime(Date.now()); } checkFinished(newBoard); } const handlePickEmoji = (emoji) => { setCurrentEmoji(emoji); setDragEmoji(null); }; const handleReset = () => { setBoard(Array.from({ length: level.size }, () => Array(level.size).fill(level.emojiSet[level.emojiSet.length - 1]))); setFinished(false); setStarted(false); setElapsed(0); setStartTime(null); setCurrentEmoji(level.emojiSet[0]); setDragEmoji(null); setDragging(false); clearInterval(timerRef.current); }; // Compare to solution function checkFinished(b) { if (!level) return; for (let r = 0; r < level.size; ++r) for (let c = 0; c < level.size; ++c) if (b[r][c] !== level.solution[r][c]) return; // Success! setFinished(true); clearInterval(timerRef.current); const totalTime = Date.now() - (startTime ?? Date.now()); setElapsed(totalTime); // Update progress setProgress((prev) => { // Unlock next level if applicable const nextUnlocked = Math.max(prev.unlocked ?? 1, selectedLevel + 2); const best = (prev.bestTimes?.[selectedLevel] ?? Infinity); let bestTimes = { ...prev.bestTimes }; if (totalTime < best) bestTimes[selectedLevel] = totalTime; return { ...prev, unlocked: nextUnlocked, bestTimes }; }); // Confetti 🎉 import("canvas-confetti").then(({ default: confetti }) => confetti({ particleCount: 110, spread: 80 })); } // Next level or menu const handleNext = () => { if (selectedLevel + 1 < LEVELS.length && unlocked > selectedLevel + 1) setSelectedLevel(selectedLevel + 1); setPage("play"); handleReset(); }; // Human timer const formatTime = (ms) => { if (!ms) return "0.00s"; const s = ms / 1000; return s.toFixed(2) + "s"; }; // UI: Level select grid const LevelSelector = () => (

Choose a Pattern

{LEVELS.map((lv, idx) => ( ))}

); return (

{page === "select" ? : ( <>

{level.name} {formatTime(finished ? elapsed : elapsed)} {bestTime && 🏆{formatTime(bestTime)}}

{/* Target pattern preview */}

Target:

{/* Emoji Grid Play Area */}

{/* Emoji Palette */}

{level.emojiSet.map(emoji => ( ))}

{finished && ( )}

{finished && (

🥳

Perfect Match!

Time: {formatTime(elapsed)} {(!bestTime || elapsed < bestTime) && Best!}

Tap Next Level or Menu to continue.

)} )}

); } // Render target preview (mini) function MiniBoard({ board }) { return (

{board.map((row, i) => row.map((cell, j) => ( {cell} )))}

); } function Board({ board, setBoard, level, dragEmoji, dragging, handleDrop, handleTap, currentEmoji, finished }) { if (!board) return null; return (

{board.map((row, rIdx) => row.map((cell, cIdx) => (

handleTap(rIdx, cIdx)} onDrop={e => {e.preventDefault(); handleDrop(rIdx, cIdx);} } onDragOver={e => e.preventDefault()} onDragEnter={e => {e.preventDefault();}} > {cell} {/* Drag overlay (mobile/desktop) */} {/* Could animate drop if desired */}

)))}

); }