[V0_FILE]typescriptreact:file="components/game-background.tsx" isMerged="true" import type { FC, ReactNode } from "react" interface GameBackgroundProps { children: ReactNode } export const GameBackground: FC = ({ children }) => { return (

{/* Abstract pattern background */}

{/* Subtle pattern overlay */}

{/* Content container */}

{children}

) } [V0_FILE]typescriptreact:file="components/game-logo.tsx" isMerged="true" export function GameLogo() { return (

Number Pattern Puzzle

"don't try if you can't think on your feet"

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { NumberPatternGame } from "@/components/number-pattern-game" import { GameBackground } from "@/components/game-background" import { GameLogo } from "@/components/game-logo" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/number-pattern-game.tsx" isEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge as UIBadge } from "@/components/ui/badge" import { AlertCircle, CheckCircle2, RefreshCw, Clock, XCircle } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" import { Progress } from "@/components/ui/progress" type Pattern = { sequence: number[] missingIndex: number type: string difficulty: number } type BadgeType = { id: string name: string description: string icon: string level: number } export function NumberPatternGame() { const [playerName, setPlayerName] = useState("") const [isNameEntered, setIsNameEntered] = useState(false) const [pattern, setPattern] = useState(null) const [userAnswer, setUserAnswer] = useState("") const [feedback, setFeedback] = useState<{ message: string; isCorrect: boolean | null }>({ message: "", isCorrect: null, }) const [score, setScore] = useState(0) const [level, setLevel] = useState(1) const [streak, setStreak] = useState(0) const [attempts, setAttempts] = useState(0) const [badges, setBadges] = useState([]) const [showBadgeAlert, setShowBadgeAlert] = useState(false) const [latestBadge, setLatestBadge] = useState(null) // Timer related states const [timeLeft, setTimeLeft] = useState(10) // Start with 10 seconds const [maxTime, setMaxTime] = useState(10) // Track the current round's max time const [isTimerRunning, setIsTimerRunning] = useState(false) const timerRef = useRef(null) // Game over related states const [failedAttempts, setFailedAttempts] = useState(0) const [isGameOver, setIsGameOver] = useState(false) // Start or reset the timer const startTimer = (time: number) => { // Clear any existing timer if (timerRef.current) { clearInterval(timerRef.current) } setMaxTime(time) setTimeLeft(time) setIsTimerRunning(true) timerRef.current = setInterval(() => { setTimeLeft((prevTime) => { if (prevTime <= 1) { // Time's up clearInterval(timerRef.current as NodeJS.Timeout) setIsTimerRunning(false) handleTimeUp() return 0 } return prevTime - 1 }) }, 1000) } // Handle when time runs out const handleTimeUp = () => { if (!pattern) return const correctAnswer = pattern.sequence[pattern.missingIndex] setFeedback({ message: `Time's up! The answer was ${correctAnswer}`, isCorrect: false, }) // Adjust time for next round (decrease by 5 seconds, minimum 5 seconds) const nextTime = Math.max(5, maxTime - 5) setMaxTime(nextTime) // Reset streak setStreak(0) // Check for game over condition at level 1 if (level === 1) { const newFailedAttempts = failedAttempts + 1 setFailedAttempts(newFailedAttempts) if (newFailedAttempts >= 2) { // Game over after 2 failed attempts at level 1 setTimeout(() => { setIsGameOver(true) stopTimer() }, 1000) return } } // Wait a moment before generating a new pattern setTimeout(() => { generatePattern(nextTime) }, 1500) } // Stop the timer const stopTimer = () => { if (timerRef.current) { clearInterval(timerRef.current) setIsTimerRunning(false) } } // Reset the game completely const resetGame = () => { setScore(0) setLevel(1) setStreak(0) setBadges([]) setFailedAttempts(0) setIsGameOver(false) setMaxTime(10) setFeedback({ message: "", isCorrect: null }) generatePattern(10) } // Restart from the beginning (name input) const restartGame = () => { stopTimer() setIsGameOver(false) setIsNameEntered(false) setPlayerName("") setScore(0) setLevel(1) setStreak(0) setBadges([]) setFailedAttempts(0) setMaxTime(10) setFeedback({ message: "", isCorrect: null }) } // Cleanup timer on unmount useEffect(() => { return () => { if (timerRef.current) { clearInterval(timerRef.current) } } }, []) // Award a badge when completing a level const awardBadge = (newLevel: number) => { const badgeIcons = ["🏆", "🎯", "⭐", "🧩", "🔍", "🧠", "🎮", "📊", "🔢", "🧮"] const badgeNames = [ "Pattern Novice", "Sequence Spotter", "Number Ninja", "Math Maestro", "Pattern Pro", "Sequence Sage", "Logic Legend", "Pattern Prodigy", "Number Virtuoso", "Math Mastermind", ] const newBadge: BadgeType = { id: `level-${newLevel}`, name: badgeNames[(newLevel - 1) % badgeNames.length], description: `Completed level ${newLevel}`, icon: badgeIcons[(newLevel - 1) % badgeIcons.length], level: newLevel, } setBadges((prev) => [...prev, newBadge]) setLatestBadge(newBadge) setShowBadgeAlert(true) // Hide the badge alert after 3 seconds setTimeout(() => { setShowBadgeAlert(false) }, 3000) } // Generate a new pattern based on the current level const generatePattern = (timeForRound?: number) => { const patterns = [ // Arithmetic sequences (adding/subtracting a constant) () => { const diff = Math.floor(Math.random() * 5) + 1 + Math.floor(level / 3) const start = Math.floor(Math.random() * 10) + 1 const length = 5 + Math.floor(level / 3) const sequence = Array.from({ length }, (_, i) => start + diff * i) const missingIndex = Math.floor(Math.random() * (length - 2)) + 1 return { sequence, missingIndex, type: `Arithmetic sequence (adding ${diff} each time)`, difficulty: 1, } }, // Geometric sequences (multiplying by a constant) () => { const ratio = Math.floor(Math.random() * 3) + 2 const start = Math.floor(Math.random() * 5) + 1 const length = 5 + Math.floor(level / 4) const sequence = Array.from({ length }, (_, i) => start * Math.pow(ratio, i)) const missingIndex = Math.floor(Math.random() * (length - 2)) + 1 return { sequence, missingIndex, type: `Geometric sequence (multiplying by ${ratio} each time)`, difficulty: 2, } }, // Fibonacci-like sequences (sum of previous two numbers) () => { const a = Math.floor(Math.random() * 5) + 1 const b = Math.floor(Math.random() * 5) + 1 const length = 6 + Math.floor(level / 5) const sequence = [a, b] for (let i = 2; i < length; i++) { sequence.push(sequence[i - 1] + sequence[i - 2]) } const missingIndex = Math.floor(Math.random() * (length - 3)) + 2 return { sequence, missingIndex, type: "Fibonacci-like sequence (each number is the sum of the two before it)", difficulty: 3, } }, // Alternating patterns () => { const a = Math.floor(Math.random() * 10) + 1 const b = Math.floor(Math.random() * 10) + 1 const length = 6 + Math.floor(level / 4) const sequence = Array.from({ length }, (_, i) => { if (i % 2 === 0) return a + Math.floor(i / 2) * 2 return b + Math.floor(i / 2) * 2 }) const missingIndex = Math.floor(Math.random() * (length - 2)) + 1 return { sequence, missingIndex, type: "Alternating pattern with increments", difficulty: 2, } }, // Square numbers () => { const start = Math.floor(Math.random() * 5) + 1 const length = 5 + Math.floor(level / 5) const sequence = Array.from({ length }, (_, i) => Math.pow(start + i, 2)) const missingIndex = Math.floor(Math.random() * (length - 2)) + 1 return { sequence, missingIndex, type: "Square numbers", difficulty: 3, } }, ] // Select pattern types based on level and streak // Higher streak means more difficult patterns const effectiveLevel = level + Math.floor(streak / 2) let availablePatterns = patterns.filter((p) => p().difficulty <= Math.ceil(effectiveLevel / 3)) if (availablePatterns.length === 0) availablePatterns = [patterns[0]] const patternGenerator = availablePatterns[Math.floor(Math.random() * availablePatterns.length)] const newPattern = patternGenerator() setPattern(newPattern) setUserAnswer("") setFeedback({ message: "", isCorrect: null }) setAttempts(0) // Start the timer with the specified time or current maxTime startTimer(timeForRound !== undefined ? timeForRound : maxTime) } // Initialize the game useEffect(() => { if (isNameEntered) { generatePattern(10) // Start with 10 seconds for the first round } }, [isNameEntered]) // Check the user's answer const checkAnswer = () => { if (!pattern) return const correctAnswer = pattern.sequence[pattern.missingIndex] const userGuess = Number.parseInt(userAnswer) if (isNaN(userGuess)) { setFeedback({ message: "Please enter a valid number", isCorrect: null, }) return } // Stop the timer stopTimer() setAttempts(attempts + 1) if (userGuess === correctAnswer) { // Calculate bonus points based on time left const timeBonus = Math.ceil((timeLeft / maxTime) * 10) const pointsEarned = Math.max(10 - attempts, 1) * pattern.difficulty + timeBonus setScore(score + pointsEarned) setStreak(streak + 1) setFeedback({ message: `Correct! +${pointsEarned} points (includes ${timeBonus} time bonus)`, isCorrect: true, }) // Increase time for next round (add 5 seconds) const nextTime = maxTime + 5 setMaxTime(nextTime) // Reset failed attempts when advancing past level 1 if (level === 1 && streak + 1 >= 3) { setFailedAttempts(0) } // Advance to next level after a short delay setTimeout(() => { if (streak + 1 >= 3) { setLevel(level + 1) setStreak(0) awardBadge(level + 1) } generatePattern(nextTime) }, 1500) } else { setStreak(0) // Decrease time for next round (subtract 5 seconds, minimum 5 seconds) const nextTime = Math.max(5, maxTime - 5) setMaxTime(nextTime) setFeedback({ message: attempts >= 2 ? `Try again! The answer is ${correctAnswer}` : "Not quite right. Try again!", isCorrect: false, }) // Check for game over condition at level 1 if (level === 1) { const newFailedAttempts = failedAttempts + 1 setFailedAttempts(newFailedAttempts) if (newFailedAttempts >= 2) { // Game over after 2 failed attempts at level 1 setTimeout(() => { setIsGameOver(true) stopTimer() }, 1000) return } } // Generate a new pattern after a short delay setTimeout(() => { generatePattern(nextTime) }, 1500) } } // Display the sequence with the missing number as a question mark const displaySequence = () => { if (!pattern) return [] return pattern.sequence.map((num, index) => { if (index === pattern.missingIndex) { return "?" } return num.toString() }) } // Calculate timer progress percentage const timerProgress = maxTime > 0 ? (timeLeft / maxTime) * 100 : 0 return (

Level {level} {isNameEntered &&

Player: {playerName}

}

Score: {score} Streak: {streak}/3

{!isNameEntered ? (

Enter Your Name to Start

setPlayerName(e.target.value)} onKeyDown={(e) => e.key === "Enter" && playerName.trim() && setIsNameEntered(true)} />

) : isGameOver ? (

Game Over!

You've failed twice at level 1. Better luck next time!

Final Score: {score}

{badges.length > 0 && (

Badges earned: {badges.length}

)}

) : (

{/* Timer */}

{timeLeft}s

Time per round: {maxTime}s

66 ? "bg-green-100" : timerProgress > 33 ? "bg-yellow-100" : "bg-red-100" }`} />

{displaySequence().map((num, index) => (

{num}

))}

setUserAnswer(e.target.value)} onKeyDown={(e) => e.key === "Enter" && checkAnswer()} className="text-center" />

{feedback.isCorrect !== null && (

{feedback.isCorrect ? ( ) : ( )} {feedback.message}

)} {level === 1 && failedAttempts === 1 && (

Warning: One more failed attempt will end your game!

)}

)} {/* Badge collection */} {!isGameOver && (

Earned Badges:

{badges.length === 0 ? (

Complete a level to earn badges!

) : ( badges.map((badge) => (

{badge.icon} {badge.name}

)) )}

)} {/* Badge alert */} {showBadgeAlert && latestBadge && (

{latestBadge.icon}

New Badge Earned!

{latestBadge.name}

{latestBadge.description}

)} {!isGameOver && ( )} ) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This