[V0_FILE]typescriptreact:file="emoji-memory-game.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" const emojis = ["😀", "😎", "🚀", "🌈", "🍕", "🎉", "🐱", "🦄"] interface CardType { id: number emoji: string isFlipped: boolean isMatched: boolean } export default function EmojiMemoryGame() { const [cards, setCards] = useState([]) const [flippedCards, setFlippedCards] = useState([]) const [moves, setMoves] = useState(0) const [matchedPairs, setMatchedPairs] = useState(0) useEffect(() => { resetGame() }, []) const resetGame = () => { const shuffledEmojis = [...emojis, ...emojis] .sort(() => Math.random() - 0.5) .map((emoji, index) => ({ id: index, emoji, isFlipped: false, isMatched: false, })) setCards(shuffledEmojis) setFlippedCards([]) setMoves(0) setMatchedPairs(0) } const handleCardClick = (id: number) => { if (flippedCards.length === 2) return if (cards[id].isMatched) return const newCards = [...cards] newCards[id].isFlipped = true setCards(newCards) setFlippedCards([...flippedCards, id]) if (flippedCards.length === 1) { setMoves(moves + 1) if (cards[flippedCards[0]].emoji === newCards[id].emoji) { newCards[flippedCards[0]].isMatched = true newCards[id].isMatched = true setCards(newCards) setMatchedPairs(matchedPairs + 1) setFlippedCards([]) } else { setTimeout(() => { newCards[flippedCards[0]].isFlipped = false newCards[id].isFlipped = false setCards(newCards) setFlippedCards([]) }, 1000) } } } return (

Emoji Memory Game

Moves: {moves}

Matched Pairs: {matchedPairs}/{emojis.length}

{cards.map((card) => ( handleCardClick(card.id)} > {card.isFlipped ? card.emoji : "?"} ))}

) } [V0_FILE]typescriptreact:file="components/emoji-memory-game.tsx" isQuickEdit="true" isMerged="true" isEdit="true" export { default } from "@/components/emoji-memory-game" [V0_FILE]javascript:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "#181a1b", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "0.5rem", md: "calc(0.5rem - 2px)", sm: "calc(0.5rem - 4px)", xl: "1rem", "2xl": "1.5rem", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect, useCallback } from "react" import StepOne from "@/app/components/step-one" import StepTwo from "@/app/components/step-two" import StepThree from "@/app/components/step-three" import StepFour from "@/app/components/step-four" import StepFive from "@/app/components/step-five" import StepSix from "@/app/components/step-six" import StepSeven from "@/app/components/step-seven" import StepEight from "@/app/components/step-eight" import StepNine from "@/app/components/step-nine" import StepTen from "@/app/components/step-ten" import Logo from "@/app/components/logo" import { WelcomeModal } from "@/app/components/welcome-modal" const CHEAT_CODE = "amhousa" export default function EmojiGamePage() { const [currentStep, setCurrentStep] = useState(1) const [isLoading, setIsLoading] = useState(false) const [cheatCode, setCheatCode] = useState("") const [isModalOpen, setIsModalOpen] = useState(true) const containerRef = useRef(null) useEffect(() => { document.body.style.overflow = "hidden" return () => { document.body.style.overflow = "unset" } }, []) const handleCheatCodeActivated = useCallback(() => { console.log("Cheat code activated!") // Debug log const nextStep = Math.min(currentStep + 1, 10) console.log("Advancing to step:", nextStep) // Debug log handleStepComplete(nextStep) }, [currentStep]) useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { setCheatCode((prevCode) => { const newCode = (prevCode + event.key).toLowerCase().slice(-7) console.log("Current cheat code:", newCode) // Debug log if (newCode === CHEAT_CODE) { handleCheatCodeActivated() return "" } return newCode }) } window.addEventListener("keydown", handleKeyDown) return () => { window.removeEventListener("keydown", handleKeyDown) } }, [handleCheatCodeActivated]) const handleStepComplete = (nextStep: number) => { setIsLoading(true) setTimeout(() => { setIsLoading(false) setCurrentStep(nextStep) if (containerRef.current) { containerRef.current.style.transform = `translateY(-${(nextStep - 1) * 100}vh)` } }, 2000) } const handleRestart = () => { setCurrentStep(1) setCheatCode("") if (containerRef.current) { containerRef.current.style.transform = "translateY(0)" } } const getBackgroundColor = (step: number) => { switch (step) { case 1: return "bg-[#0f0f0f]" case 2: return "bg-sky-200" case 3: return "bg-emerald-100" case 4: return "bg-purple-100" case 5: return "bg-blue-100" case 6: return "bg-green-100" case 7: return "bg-orange-100" case 8: return "bg-pink-100" case 9: return "bg-yellow-100" case 10: return "bg-red-100" default: return "bg-gray-100" } } const renderStep = (step: number) => { switch (step) { case 1: return handleStepComplete(2)} /> case 2: return handleStepComplete(3)} /> case 3: return handleStepComplete(4)} /> case 4: return handleStepComplete(5)} /> case 5: return handleStepComplete(6)} /> case 6: return handleStepComplete(7)} /> case 7: return handleStepComplete(8)} /> case 8: return handleStepComplete(9)} /> case 9: return handleStepComplete(10)} /> case 10: return null // We'll render StepTen separately default: return null } } return (

setIsModalOpen(false)} />

CleverMonkey

{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((step) => (

{isLoading && currentStep === step ? (

Loading Next Stage...

) : ( renderStep(step) )}

))}

) } [V0_FILE]typescriptreact:file="app/components/step-one.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" const emojis = ["😀", "😎", "🚀", "🌈", "🍕", "🎉", "🐱", "🦄"] interface CardType { id: number emoji: string isFlipped: boolean isMatched: boolean } interface StepOneProps { onComplete: () => void } export default function StepOne({ onComplete }: StepOneProps) { const [cards, setCards] = useState([]) const [flippedCards, setFlippedCards] = useState([]) const [moves, setMoves] = useState(0) const [matchedPairs, setMatchedPairs] = useState(0) useEffect(() => { resetGame() }, []) useEffect(() => { if (matchedPairs === emojis.length) { onComplete() } }, [matchedPairs, onComplete]) const resetGame = () => { const shuffledEmojis = [...emojis, ...emojis] .sort(() => Math.random() - 0.5) .map((emoji, index) => ({ id: index, emoji, isFlipped: false, isMatched: false, })) setCards(shuffledEmojis) setFlippedCards([]) setMoves(0) setMatchedPairs(0) } const handleCardClick = (id: number) => { if (flippedCards.length === 2) return if (cards[id].isMatched) return const newCards = [...cards] newCards[id].isFlipped = true setCards(newCards) setFlippedCards([...flippedCards, id]) if (flippedCards.length === 1) { setMoves(moves + 1) if (cards[flippedCards[0]].emoji === newCards[id].emoji) { newCards[flippedCards[0]].isMatched = true newCards[id].isMatched = true setCards(newCards) setMatchedPairs(matchedPairs + 1) setFlippedCards([]) } else { setTimeout(() => { newCards[flippedCards[0]].isFlipped = false newCards[id].isFlipped = false setCards(newCards) setFlippedCards([]) }, 1000) } } } return (

Emoji Memory Game - Step 1

Moves: {moves}

Matched Pairs: {matchedPairs}/{emojis.length}

{cards.map((card) => ( handleCardClick(card.id)} > {card.isFlipped ? card.emoji : "?"} ))}

) } [V0_FILE]typescriptreact:file="app/components/step-two.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Sparkles, Star, Heart, Sun, Moon, Cloud, Rainbow, Zap } from "lucide-react" const icons = [ { icon: Sparkles, color: "text-yellow-400" }, { icon: Star, color: "text-purple-500" }, { icon: Heart, color: "text-red-500" }, { icon: Sun, color: "text-orange-500" }, { icon: Moon, color: "text-indigo-500" }, { icon: Cloud, color: "text-blue-400" }, { icon: Rainbow, color: "text-pink-500" }, { icon: Zap, color: "text-green-500" }, ] interface CardType { id: number iconIndex: number isFlipped: boolean isMatched: boolean } interface StepTwoProps { onComplete: () => void } export default function StepTwo({ onComplete }: StepTwoProps) { const [cards, setCards] = useState([]) const [flippedCards, setFlippedCards] = useState([]) const [moves, setMoves] = useState(0) const [matchedPairs, setMatchedPairs] = useState(0) useEffect(() => { resetGame() }, []) useEffect(() => { if (matchedPairs === icons.length) { onComplete() } }, [matchedPairs, onComplete]) const resetGame = () => { const shuffledIcons = [...Array(icons.length).keys(), ...Array(icons.length).keys()] .sort(() => Math.random() - 0.5) .map((iconIndex, id) => ({ id, iconIndex, isFlipped: false, isMatched: false, })) setCards(shuffledIcons) setFlippedCards([]) setMoves(0) setMatchedPairs(0) } const handleCardClick = (id: number) => { if (flippedCards.length === 2) return if (cards[id].isMatched) return const newCards = [...cards] newCards[id].isFlipped = true setCards(newCards) setFlippedCards([...flippedCards, id]) if (flippedCards.length === 1) { setMoves(moves + 1) if (cards[flippedCards[0]].iconIndex === newCards[id].iconIndex) { newCards[flippedCards[0]].isMatched = true newCards[id].isMatched = true setCards(newCards) setMatchedPairs(matchedPairs + 1) setFlippedCards([]) } else { setTimeout(() => { newCards[flippedCards[0]].isFlipped = false newCards[id].isFlipped = false setCards(newCards) setFlippedCards([]) }, 1000) } } } return (

Colorful Icon Memory Game - Step 2

Moves: {moves}

Matched Pairs: {matchedPairs}/{icons.length}

{cards.map((card) => { const IconComponent = icons[card.iconIndex].icon return ( handleCardClick(card.id)} > {card.isFlipped ? : "❓"} ) })}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Footer } from "./components/footer" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "CleverMonkey - Memory Training Game", description: "Train your memory with this fun and challenging game featuring multiple stages and themes!", icons: { icon: "/favicon.svg", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]javascript:file="next.config.js" isEdit="true" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, images: { domains: ["upload.wikimedia.org"], remotePatterns: [ { protocol: "https", hostname: "**", }, ], dangerouslyAllowSVG: true, contentDispositionType: "attachment", contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;", }, } module.exports = nextConfig [V0_FILE]typescriptreact:file="app/components/step-three.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import Image from "next/image" const countries = [ { name: "America", flag: "/flags/usa.svg" }, { name: "Netherlands", flag: "/flags/netherlands.svg" }, { name: "Iran", flag: "/flags/iran.svg" }, { name: "Finland", flag: "/flags/finland.svg" }, { name: "Germany", flag: "/flags/germany.svg" }, { name: "Nigeria", flag: "/flags/nigeria.svg" }, ] interface CardType { id: number countryIndex: number isFlipped: boolean isMatched: boolean } interface StepThreeProps { onComplete: () => void } export default function StepThree({ onComplete }: StepThreeProps) { const [cards, setCards] = useState([]) const [flippedCards, setFlippedCards] = useState([]) const [moves, setMoves] = useState(0) const [matchedPairs, setMatchedPairs] = useState(0) useEffect(() => { resetGame() }, []) const resetGame = () => { const shuffledCountries = [...Array(countries.length).keys(), ...Array(countries.length).keys()] .sort(() => Math.random() - 0.5) .map((countryIndex, id) => ({ id, countryIndex, isFlipped: false, isMatched: false, })) setCards(shuffledCountries) setFlippedCards([]) setMoves(0) setMatchedPairs(0) } const handleCardClick = (id: number) => { if (flippedCards.length === 2) return if (cards[id].isMatched) return const newCards = [...cards] newCards[id].isFlipped = true setCards(newCards) setFlippedCards([...flippedCards, id]) if (flippedCards.length === 1) { setMoves(moves + 1) if (cards[flippedCards[0]].countryIndex === newCards[id].countryIndex) { newCards[flippedCards[0]].isMatched = true newCards[id].isMatched = true setCards(newCards) setMatchedPairs(matchedPairs + 1) setFlippedCards([]) } else { setTimeout(() => { newCards[flippedCards[0]].isFlipped = false newCards[id].isFlipped = false setCards(newCards) setFlippedCards([]) }, 1000) } } } useEffect(() => { if (matchedPairs === countries.length) { onComplete() } }, [matchedPairs, onComplete]) return (

Country Flag Memory Game - Step 3

Moves: {moves}

Matched Pairs: {matchedPairs}/{countries.length}

{cards.map((card) => ( handleCardClick(card.id)} > {card.isFlipped ? (

{countries[card.countryIndex].name}

) : ( 🌍 )} ))}

) } [V0_FILE]xml:file="public/flags/usa.svg" isEdit="true" isMerged="true" [V0_FILE]xml:file="public/flags/netherlands.svg" isEdit="true" isMerged="true" [V0_FILE]xml:file="public/flags/iran.svg" isEdit="true" isMerged="true" [V0_FILE]xml:file="public/flags/finland.svg" isEdit="true" isMerged="true" [V0_FILE]xml:file="public/flags/germany.svg" isEdit="true" isMerged="true" [V0_FILE]xml:file="public/flags/nigeria.svg" isEdit="true" isMerged="true" [V0_FILE]typescript:file="app/components/step-four.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import Image from "next/image" const airdrops = [ { name: "Telegram", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Telegram_(1)-zTaIdTujxfcUSpxKZS7MAstxw5mWDq.png", emoji: "📱", bgColor: "bg-[#2B2E33]", textColor: "text-white", }, { name: "Uniswap", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/uniswap-uni-logo-Ez2QKyFJaZHadJtscZWfF3WDX60gVR.png", emoji: "🦄", bgColor: "bg-[#FF007A]", textColor: "text-white", }, { name: "Optimism", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/optimism-ethereum-op-logo-32auscMZlU66q7f5SmsGJlDKclfkyF.png", emoji: "⭕", bgColor: "bg-[#FF0420]", textColor: "text-white", }, { name: "Arbitrum", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/arbitrum-arb-logo-PkhMXnq7LLYYa3mCJ0EcKZF2GOP8G9.png", emoji: "🔵", bgColor: "bg-[#213147]", textColor: "text-white", }, { name: "dYdX", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dydx-chain-dydx-logo-IOus9KbWVw9CXpy8A7R9iCaKrqeydy.png", emoji: "📊", bgColor: "bg-[#1C1C28]", textColor: "text-white", }, { name: "1inch", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1inch-1inch-logo-lL6pYcBDAqAUkEV1J9JpBR19nSDbqH.png", emoji: "🦄", bgColor: "bg-[#1B314F]", textColor: "text-white", }, ] interface CardType { id: number airdropIndex: number isFlipped: boolean isMatched: boolean } interface StepFourProps { onComplete: () => void } export default function StepFour({ onComplete }: StepFourProps) { const [cards, setCards] = useState([]) const [flippedCards, setFlippedCards] = useState([]) const [moves, setMoves] = useState(0) const [matchedPairs, setMatchedPairs] = useState(0) useEffect(() => { resetGame() }, []) useEffect(() => { if (matchedPairs === airdrops.length) { onComplete() } }, [matchedPairs, onComplete]) const resetGame = () => { const shuffledAirdrops = [...Array(airdrops.length).keys(), ...Array(airdrops.length).keys()] .sort(() => Math.random() - 0.5) .map((airdropIndex, id) => ({ id, airdropIndex, isFlipped: false, isMatched: false, })) setCards(shuffledAirdrops) setFlippedCards([]) setMoves(0) setMatchedPairs(0) } const handleCardClick = (id: number) => { if (flippedCards.length === 2) return if (cards[id].isMatched) return const newCards = [...cards] newCards[id].isFlipped = true setCards(newCards) setFlippedCards([...flippedCards, id]) if (flippedCards.length === 1) { setMoves(moves + 1) if (cards[flippedCards[0]].airdropIndex === newCards[id].airdropIndex) { newCards[flippedCards[0]].isMatched = true newCards[id].isMatched = true setCards(newCards) setMatchedPairs(matchedPairs + 1) setFlippedCards([]) } else { setTimeout(() => { newCards[flippedCards[0]].isFlipped = false newCards[id].isFlipped = false setCards(newCards) setFlippedCards([]) }, 1000) } } } return (

Telegram Airdrops Memory Game - Step 4

Moves: {moves}

Matched Pairs: {matchedPairs}/{airdrops.length}

{cards.map((card) => ( handleCardClick(card.id)} > {card.isFlipped ? (

{airdrops[card.airdropIndex].name}

) : ( ❓ )} ))}

) } [V0_FILE]typescriptreact:file="app/components/step-five.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import Image from "next/image" const presidents = [ { name: "George Washington", image: "https://upload.wikimedia.org/wikipedia/commons/b/b6/Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg", }, { name: "Abraham Lincoln", image: "https://upload.wikimedia.org/wikipedia/commons/a/ab/Abraham_Lincoln_O-77_matte_collodion_print.jpg", }, { name: "Franklin D. Roosevelt", image: "https://upload.wikimedia.org/wikipedia/commons/4/42/FDR_1944_Color_Portrait.jpg", }, { name: "John F. Kennedy", image: "https://upload.wikimedia.org/wikipedia/commons/c/c3/John_F._Kennedy%2C_White_House_color_photo_portrait.jpg", }, { name: "Ronald Reagan", image: "https://upload.wikimedia.org/wikipedia/commons/1/16/Official_Portrait_of_President_Reagan_1981.jpg", }, { name: "Barack Obama", image: "https://upload.wikimedia.org/wikipedia/commons/8/8d/President_Barack_Obama.jpg" }, ] interface CardType { id: number presidentIndex: number isFlipped: boolean isMatched: boolean } interface StepFiveProps { onComplete: () => void } export default function StepFive({ onComplete }: StepFiveProps) { const [cards, setCards] = useState([]) const [flippedCards, setFlippedCards] = useState([]) const [moves, setMoves] = useState(0) const [matchedPairs, setMatchedPairs] = useState(0) useEffect(() => { resetGame() }, []) useEffect(() => { if (matchedPairs === presidents.length) { onComplete() } }, [matchedPairs, onComplete]) const resetGame = () => { const shuffledPresidents = [...Array(presidents.length).keys(), ...Array(presidents.length).keys()] .sort(() => Math.random() - 0.5) .map((presidentIndex, id) => ({ id, presidentIndex, isFlipped: false, isMatched: false, })) setCards(shuffledPresidents) setFlippedCards([]) setMoves(0) setMatchedPairs(0) } const handleCardClick = (id: number) => { if (flippedCards.length === 2) return if (cards[id].isMatched) return const newCards = [...cards] newCards[id].isFlipped = true setCards(newCards) setFlippedCards([...flippedCards, id]) if (flippedCards.length === 1) { setMoves(moves + 1) if (cards[flippedCards[0]].presidentIndex === newCards[id].presidentIndex) { newCards[flippedCards[0]].isMatched = true newCards[id].isMatched = true setCards(newCards) setMatchedPairs(matchedPairs + 1) setFlippedCards([]) } else { setTimeout(() => { newCards[flippedCards[0]].isFlipped = false newCards[id].isFlipped = false setCards(newCards) setFlippedCards([]) }, 1000) } } } return (

U.S. Presidents Memory Game - Step 5

Moves: {moves}

Matched Pairs: {matchedPairs}/{presidents.length}

{cards.map((card) => ( handleCardClick(card.id)} > {card.isFlipped ? (

{presidents[card.presidentIndex].name}

) : ( 🇺🇸 )} ))}

) } [V0_FILE]typescriptreact:file="app/components/step-six.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" const currencies = [ { name: "Bitcoin", symbol: "₿" }, { name: "Ethereum", symbol: "Ξ" }, { name: "US Dollar", symbol: "$" }, { name: "Euro", symbol: "€" }, { name: "Japanese Yen", symbol: "¥" }, { name: "British Pound", symbol: "£" }, ] interface CardType { id: number currencyIndex: number isFlipped: boolean isMatched: boolean } interface StepSixProps { onComplete: () => void } export default function StepSix({ onComplete }: StepSixProps) { const [cards, setCards] = useState([]) const [flippedCards, setFlippedCards] = useState([]) const [moves, setMoves] = useState(0) const [matchedPairs, setMatchedPairs] = useState(0) useEffect(() => { resetGame() }, []) useEffect(() => { if (matchedPairs === currencies.length) { onComplete() } }, [matchedPairs, onComplete]) const resetGame = () => { const shuffledCurrencies = [...Array(currencies.length).keys(), ...Array(currencies.length).keys()] .sort(() => Math.random() - 0.5) .map((currencyIndex, id) => ({ id, currencyIndex, isFlipped: false, isMatched: false, })) setCards(shuffledCurrencies) setFlippedCards([]) setMoves(0) setMatchedPairs(0) } const handleCardClick = (id: number) => { if (flippedCards.length === 2) return if (cards[id].isMatched) return const newCards = [...cards] newCards[id].isFlipped = true setCards(newCards) setFlippedCards([...flippedCards, id]) if (flippedCards.length === 1) { setMoves(moves + 1) if (cards[flippedCards[0]].currencyIndex === newCards[id].currencyIndex) { newCards[flippedCards[0]].isMatched = true newCards[id].isMatched = true setCards(newCards) setMatchedPairs(matchedPairs + 1) setFlippedCards([]) } else { setTimeout(() => { newCards[flippedCards[0]].isFlipped = false newCards[id].isFlipped = false setCards(newCards) setFlippedCards([]) }, 1000) } } } return (

Popular Currencies Memory Game - Step 6

Moves: {moves}

Matched Pairs: {matchedPairs}/{currencies.length}

{cards.map((card) => ( handleCardClick(card.id)} > {card.isFlipped ? (

{currencies[card.currencyIndex].symbol} {currencies[card.currencyIndex].name}

) : ( 💰 )} ))}

) } [V0_FILE]typescriptreact:file="app/components/step-seven.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" const questions = [ { question: "What is the current value of Bitcoin?", answer: "Varies, check latest price" }, { question: "What is the website address of this game?", answer: "Current URL of the game" }, { question: "Who is the singer of 'Bohemian Rhapsody'?", answer: "Freddie Mercury" }, { question: "Who created Linux?", answer: "Linus Torvalds" }, { question: "What year was the first iPhone released?", answer: "2007" }, { question: "Who painted the Mona Lisa?", answer: "Leonardo da Vinci" }, ] interface CardType { id: number questionIndex: number isQuestion: boolean isFlipped: boolean isMatched: boolean } interface StepSevenProps { onComplete: () => void } export default function StepSeven({ onComplete }: StepSevenProps) { const [cards, setCards] = useState([]) const [flippedCards, setFlippedCards] = useState([]) const [moves, setMoves] = useState(0) const [matchedPairs, setMatchedPairs] = useState(0) useEffect(() => { resetGame() }, []) useEffect(() => { if (matchedPairs === questions.length) { onComplete() } }, [matchedPairs, onComplete]) const resetGame = () => { const shuffledCards = [ ...questions.map((_, index) => ({ questionIndex: index, isQuestion: true })), ...questions.map((_, index) => ({ questionIndex: index, isQuestion: false })), ] .sort(() => Math.random() - 0.5) .map((card, id) => ({ ...card, id, isFlipped: false, isMatched: false, })) setCards(shuffledCards) setFlippedCards([]) setMoves(0) setMatchedPairs(0) } const handleCardClick = (id: number) => { if (flippedCards.length === 2) return if (cards[id].isMatched) return const newCards = [...cards] newCards[id].isFlipped = true setCards(newCards) setFlippedCards([...flippedCards, id]) if (flippedCards.length === 1) { setMoves(moves + 1) const firstCard = cards[flippedCards[0]] const secondCard = newCards[id] if (firstCard.questionIndex === secondCard.questionIndex && firstCard.isQuestion !== secondCard.isQuestion) { newCards[flippedCards[0]].isMatched = true newCards[id].isMatched = true setCards(newCards) setMatchedPairs(matchedPairs + 1) setFlippedCards([]) } else { setTimeout(() => { newCards[flippedCards[0]].isFlipped = false newCards[id].isFlipped = false setCards(newCards) setFlippedCards([]) }, 1000) } } } return (

Q&A Memory Game - Step 7

Moves: {moves}

Matched Pairs: {matchedPairs}/{questions.length}

{cards.map((card) => ( handleCardClick(card.id)} > {card.isFlipped ? (

{card.isQuestion ? questions[card.questionIndex].question : questions[card.questionIndex].answer}

) : ( {card.isQuestion ? "❓" : "❗"} )} ))}

) } [V0_FILE]typescriptreact:file="app/components/step-eight.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" const animals = [ { name: "Lion", emoji: "🦁" }, { name: "Elephant", emoji: "🐘" }, { name: "Giraffe", emoji: "🦒" }, { name: "Penguin", emoji: "🐧" }, { name: "Koala", emoji: "🐨" }, { name: "Octopus", emoji: "🐙" }, ] interface CardType { id: number animalIndex: number isFlipped: boolean isMatched: boolean } interface StepEightProps { onComplete: () => void } export default function StepEight({ onComplete }: StepEightProps) { const [cards, setCards] = useState([]) const [flippedCards, setFlippedCards] = useState([]) const [moves, setMoves] = useState(0) const [matchedPairs, setMatchedPairs] = useState(0) useEffect(() => { resetGame() }, []) useEffect(() => { if (matchedPairs === animals.length) { onComplete() } }, [matchedPairs, onComplete]) const resetGame = () => { const shuffledAnimals = [...Array(animals.length).keys(), ...Array(animals.length).keys()] .sort(() => Math.random() - 0.5) .map((animalIndex, id) => ({ id, animalIndex, isFlipped: false, isMatched: false, })) setCards(shuffledAnimals) setFlippedCards([]) setMoves(0) setMatchedPairs(0) } const handleCardClick = (id: number) => { if (flippedCards.length === 2) return if (cards[id].isMatched) return const newCards = [...cards] newCards[id].isFlipped = true setCards(newCards) setFlippedCards([...flippedCards, id]) if (flippedCards.length === 1) { setMoves(moves + 1) if (cards[flippedCards[0]].animalIndex === newCards[id].animalIndex) { newCards[flippedCards[0]].isMatched = true newCards[id].isMatched = true setCards(newCards) setMatchedPairs(matchedPairs + 1) setFlippedCards([]) } else { setTimeout(() => { newCards[flippedCards[0]].isFlipped = false newCards[id].isFlipped = false setCards(newCards) setFlippedCards([]) }, 1000) } } } return (

Colorful Animals Memory Game - Step 8

Moves: {moves}

Matched Pairs: {matchedPairs}/{animals.length}

{cards.map((card) => ( handleCardClick(card.id)} > {card.isFlipped ? (

{animals[card.animalIndex].emoji} {animals[card.animalIndex].name}

) : ( 🎨 )} ))}

) } [V0_FILE]typescriptreact:file="app/components/step-nine.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" interface Question { question: string answer: number } interface StepNineProps { onComplete: () => void } export default function StepNine({ onComplete }: StepNineProps) { const [questions, setQuestions] = useState([]) const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0) const [userAnswer, setUserAnswer] = useState("") const [score, setScore] = useState(0) useEffect(() => { generateQuestions() }, []) const generateQuestions = () => { const newQuestions: Question[] = [] for (let i = 0; i < 5; i++) { const num1 = Math.floor(Math.random() * 90) + 10 const num2 = Math.floor(Math.random() * 9) + 1 const operation = ["+", "-", "*", "/"][Math.floor(Math.random() * 4)] let question: string let answer: number switch (operation) { case "+": question = `${num1} + ${num2} = ?` answer = num1 + num2 break case "-": question = `${num1} - ${num2} = ?` answer = num1 - num2 break case "*": question = `${num1} × ${num2} = ?` answer = num1 * num2 break case "/": question = `${num1 * num2} ÷ ${num2} = ?` answer = num1 break default: question = "" answer = 0 } newQuestions.push({ question, answer }) } setQuestions(newQuestions) } const handleSubmit = () => { if (Number(userAnswer) === questions[currentQuestionIndex].answer) { setScore(score + 1) } if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1) setUserAnswer("") } else { onComplete() } } return (

Math Challenge - Step 9

{questions[currentQuestionIndex]?.question}

setUserAnswer(e.target.value)} className="w-24 text-center text-xl" />

Score: {score} / {currentQuestionIndex + 1}

) } [V0_FILE]typescript:file="app/components/step-ten.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" import confetti from "canvas-confetti" import Logo from "@/app/components/logo" interface StepTenProps { onRestart: () => void isVisible: boolean } export default function StepTen({ onRestart, isVisible }: StepTenProps) { const [hasAnimated, setHasAnimated] = useState(false) useEffect(() => { if (isVisible && !hasAnimated) { setHasAnimated(true) const burstConfetti = () => { confetti({ particleCount: 150, spread: 100, origin: { y: 0.5, x: 0.5 }, colors: ["#FF0000", "#8A2BE2", "#00BFFF", "#FFD700", "#FF69B4"], shapes: ["square", "circle"], ticks: 200, }) } // Multiple bursts for a more dramatic effect burstConfetti() setTimeout(burstConfetti, 200) setTimeout(burstConfetti, 400) setTimeout(burstConfetti, 600) } }, [isVisible, hasAnimated]) if (!isVisible) return null return (

CleverMonkey

Congratulations! You've finished the game!

Email: info@amirsalmani.com

Your Prize:

Secret cheat code: amhousa

How to use:

Start a new game or continue playing
Type "amhousa" on your keyboard
Advance to the next level instantly

) } [V0_FILE]typescriptreact:file="app/components/logo.tsx" isEdit="true" isMerged="true" export default function Logo({ className = "" }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="public/favicon.ico" isMerged="true" isEdit="true" // This is a placeholder comment. In a real project, you would add a proper .ico file here. // For now, we'll use a simple SVG file as a temporary favicon. [V0_FILE]xml:file="public/favicon.svg" isEdit="true" isMerged="true" [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer utilities { .animate-fade-in { animation: fadeIn 0.5s ease-out; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .memory-card { @apply rounded-xl transition-all duration-300 ease-in-out; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .memory-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } [V0_FILE]typescriptreact:file="app/components/game-results-image.tsx" isMerged="true" isEdit="true" "use client" import { useRef, useEffect } from "react" import { Button } from "@/components/ui/button" interface GameResultsImageProps { gameResults: { totalMoves: number totalTime: number stepsCompleted: number } } export default function GameResultsImage({ gameResults }: GameResultsImageProps) { const canvasRef = useRef(null) useEffect(() => { if (canvasRef.current) { const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (ctx) { // Set canvas size canvas.width = 1200 canvas.height = 630 // Background ctx.fillStyle = "linear-gradient(to bottom, #fdf4ff, #ede9fe)" ctx.fillRect(0, 0, canvas.width, canvas.height) // Logo const logo = new Image() logo.src = "/logo.png" // Make sure to add a logo.png file to your public folder logo.onload = () => { ctx.drawImage(logo, 50, 50, 100, 100) } // Title ctx.font = "bold 48px Arial" ctx.fillStyle = "#4B0082" ctx.fillText("CleverMonkey Game Results", 200, 100) // Game results ctx.font = "24px Arial" ctx.fillStyle = "#333333" ctx.fillText(`Total Moves: ${gameResults.totalMoves}`, 200, 200) ctx.fillText(`Total Time: ${gameResults.totalTime} seconds`, 200, 250) ctx.fillText(`Steps Completed: ${gameResults.stepsCompleted}/10`, 200, 300) // Signature ctx.font = "italic 18px Arial" ctx.fillStyle = "#666666" ctx.fillText("CleverMonkey - Train Your Memory!", 200, 550) } } }, [gameResults]) const handleDownload = () => { if (canvasRef.current) { const link = document.createElement("a") link.download = "clever-monkey-results.png" link.href = canvasRef.current.toDataURL() link.click() } } return (

) } [V0_FILE]typescriptreact:file="app/components/welcome-modal.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { X, AlertTriangle } from "lucide-react" interface WelcomeModalProps { isOpen: boolean onClose: () => void } export function WelcomeModal({ isOpen, onClose }: WelcomeModalProps) { const [isVisible, setIsVisible] = useState(isOpen) useEffect(() => { setIsVisible(isOpen) }, [isOpen]) if (!isVisible) return null return (

Warning

It's better to play this game on your computer until the end and be careful.

) } [V0_FILE]typescriptreact:file="app/components/ui/card.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } [V0_FILE]typescript:file="app/components/credit-strip.tsx" isMerged="true" isEdit="true" "use client" import { motion } from "framer-motion" import { Heart, Coffee } from "lucide-react" export function CreditStrip() { return (

Designed and implemented by:{" "} Amirhossein Salmani {" "} with and + AI

) } [V0_FILE]typescriptreact:file="app/components/footer.tsx" isEdit="true" isMerged="true" import { Heart, Coffee } from "lucide-react" import Link from "next/link" export function Footer() { return (

Designed and implemented by:{" "} Amirhossein Salmani {" "} with and + AI

) } [V0_FILE]json:file="package.json" isMerged="true" isEdit="true" { "name": "emoji-memory-game", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", "canvas-confetti": "^1.9.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "framer-motion": "^10.18.0", "lucide-react": "^0.309.0", "next": "14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", "tailwind-merge": "^2.2.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/canvas-confetti": "^1.6.4", "@types/node": "^20.10.6", "@types/react": "^18.2.46", "@types/react-dom": "^18.2.18", "autoprefixer": "^10.4.16", "eslint": "^8.56.0", "eslint-config-next": "14.0.4", "postcss": "^8.4.33", "tailwindcss": "^3.4.1", "typescript": "^5.3.3" } } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" isEdit="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]xml:file="public/images/telegram.svg" isEdit="true" isMerged="true" [V0_FILE]xml:file="public/images/uniswap.svg" isMerged="true" isEdit="true" [V0_FILE]xml:file="public/images/arbitrum.svg" isMerged="true" isEdit="true" [V0_FILE]xml:file="public/images/dydx.svg" isMerged="true" isEdit="true" [V0_FILE]xml:file="public/images/optimism.svg" isMerged="true" isEdit="true" [V0_FILE]xml:file="public/images/1inch.svg" isMerged="true" isEdit="true"

About

Tags

Share

More from amhousa

More Templates Like This

About

Tags

Share

About

Tags

Share

More from amhousa

More Templates Like This