[V0_FILE]typescriptreact:file="memory-game.tsx" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Heart, Star, Sun, Moon, Cloud, Flower2, TypeIcon as type, LucideIcon } from 'lucide-react' import { toast } from "sonner" type MemoryCard = { id: number icon: LucideIcon isMatched: boolean color: string } const createCards = () => { const iconConfigs = [ { icon: Heart, color: "text-rose-400" }, { icon: Star, color: "text-amber-400" }, { icon: Sun, color: "text-yellow-400" }, { icon: Moon, color: "text-purple-400" }, { icon: Cloud, color: "text-sky-400" }, { icon: Flower2, color: "text-emerald-400" } ] const cards: MemoryCard[] = [] iconConfigs.forEach(({ icon, color }, index) => { cards.push( { id: index * 2, icon, color, isMatched: false }, { id: index * 2 + 1, icon, color, isMatched: false } ) }) return cards.sort(() => Math.random() - 0.5) } export default function MemoryGame() { const [cards, setCards] = useState(createCards()) const [flippedIndexes, setFlippedIndexes] = useState([]) const [matches, setMatches] = useState(0) const [isChecking, setIsChecking] = useState(false) const handleCardClick = (clickedIndex: number) => { // Prevent clicking if already checking or card is already matched if (isChecking || cards[clickedIndex].isMatched) return // Prevent clicking if card is already flipped if (flippedIndexes.includes(clickedIndex)) return // Prevent clicking if two cards are already flipped if (flippedIndexes.length === 2) return // Add clicked card to flipped cards const newFlipped = [...flippedIndexes, clickedIndex] setFlippedIndexes(newFlipped) // If we now have two cards flipped, check for a match if (newFlipped.length === 2) { setIsChecking(true) const [firstIndex, secondIndex] = newFlipped const firstCard = cards[firstIndex] const secondCard = cards[secondIndex] if (firstCard.icon === secondCard.icon) { // Match found setTimeout(() => { setCards(cards.map((card, index) => index === firstIndex || index === secondIndex ? { ...card, isMatched: true } : card )) setFlippedIndexes([]) setMatches(m => m + 1) setIsChecking(false) // Check for game completion if (matches === (cards.length / 2) - 1) { toast("🎉 Congratulations! You've found all the matches! 🎈", { className: "bg-purple-900 text-purple-100 border-purple-700" }) } }, 500) } else { // No match - reset after delay setTimeout(() => { setFlippedIndexes([]) setIsChecking(false) }, 1000) } } } const resetGame = () => { setCards(createCards()) setFlippedIndexes([]) setMatches(0) setIsChecking(false) } return (

Memory Match Game

Matches found: {matches} of {cards.length / 2}

{cards.map((card, index) => ( handleCardClick(index)} >

{(card.isMatched || flippedIndexes.includes(index)) && ( )} ))}

) } [V0_FILE]typescriptreact:file="global.css" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .perspective-1000 { perspective: 1000px; } .transform-style-3d { transform-style: preserve-3d; } .backface-hidden { backface-visibility: hidden; } } @layer base { :root { --background: 224 71% 4%; --foreground: 213 31% 91%; --primary: 224 64% 33%; --primary-foreground: 210 40% 98%; --accent: 216 34% 17%; --accent-foreground: 210 40% 98%; --border: 216 34% 17%; --ring: 216 34% 17%; --radius: 0.5rem; } }

About

About