[V0_FILE]typescriptreact:file="app/page.tsx" import { ExperienceGrid } from "@/components/experience-grid" import { Header } from "@/components/header" export default function HomePage() { return (

) } [V0_FILE]typescriptreact:file="components/header.tsx" import Link from "next/link" export function Header() { return (

NEAL.FUN

Games and other stuff

) } [V0_FILE]typescriptreact:file="components/experience-card.tsx" import type React from "react" import Link from "next/link" import { cn } from "@/lib/utils" interface ExperienceCardProps { title: string href: string className?: string style?: React.CSSProperties children?: React.ReactNode } export function ExperienceCard({ title, href, className, style, children }: ExperienceCardProps) { return ( {children ||

{title}

} ) } [V0_FILE]typescriptreact:file="components/experience-grid.tsx" import { ExperienceCard } from "./experience-card" export function ExperienceGrid() { return (

{/* Stimulation Clicker */}

DVD

STIMULATION

CLICKER

→

{/* Infinite Craft */}

{Array.from({ length: 20 }).map((_, i) => (

))}

Infinite

Craft

{/* Internet Artifacts */}

INTERNET

ARTIFACTS

{/* The Password Game */}

* The Password Game

{/* Space Elevator */}

SPACE

ELEVATOR

{/* Asteroid Launcher */}

ASTEROID

LAUNCHER

{/* Draw a Perfect Circle */}

Draw a

Perfect Circle

{/* Wonders of Street View */}

Wonders of

Street View

{/* Days Since Incident */}

Days Since

Incident

{/* Design the Next iPhone */}

Design the

Next iPhone

{/* Absurd Trolley Problems */}

Absurd Trolley

Problems

{/* Earth Reviews */}

{Array.from({ length: 20 }).map((_, i) => (

))}

EARTH

REVIEWS

{/* Let's Settle This */}

{Array.from({ length: 144 }).map((_, i) => (

))}

Let's Settle This.

{/* Ambient Chaos */}

{Array.from({ length: 20 }).map((_, i) => (

))}

AMBIENT

CHAOS

{/* Sun vs Moon */}

Sun

Moon

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "@/app/globals.css" import { Inter, Playfair_Display } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"], variable: "--font-sans", }) const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-serif", }) export const metadata = { title: "NEAL.FUN - Games and other stuff", description: "A collection of interactive web experiences and games", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @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: 222.2 47.4% 11.2%; --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: 222.2 84% 4.9%; --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: 210 40% 98%; --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: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom styles for neal.fun */ .bg-navy-900 { background-color: #0f172a; } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["var(--font-sans)"], serif: ["var(--font-serif)"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", 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: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, 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")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/stimulation-clicker/page.tsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" export default function StimulationClicker() { const [count, setCount] = useState(0) const [multiplier, setMultiplier] = useState(1) const [autoClickerCount, setAutoClickerCount] = useState(0) // Auto clicker effect useEffect(() => { const interval = setInterval(() => { if (autoClickerCount > 0) { setCount((prev) => prev + autoClickerCount * multiplier) } }, 1000) return () => clearInterval(interval) }, [autoClickerCount, multiplier]) // Calculate costs const multiplierCost = Math.floor(50 * Math.pow(1.5, multiplier - 1)) const autoClickerCost = Math.floor(100 * Math.pow(1.5, autoClickerCount)) return (

Back to Home

STIMULATION CLICKER

{count.toLocaleString()}

Multiplier: x{multiplier}

Each click gives {multiplier} points

Auto Clickers: {autoClickerCount}

Each auto clicker gives {multiplier} points per second

) } [V0_FILE]typescriptreact:file="app/infinite-craft/page.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowLeft, Plus } from "lucide-react" type Element = { name: string emoji: string discovered: boolean } const baseElements: Element[] = [ { name: "Water", emoji: "💧", discovered: true }, { name: "Fire", emoji: "🔥", discovered: true }, { name: "Wind", emoji: "💨", discovered: true }, { name: "Earth", emoji: "🌍", discovered: true }, ] // Predefined combinations const combinations: Record = { "Water+Fire": { name: "Steam", emoji: "♨️" }, "Water+Earth": { name: "Mud", emoji: "💩" }, "Fire+Earth": { name: "Lava", emoji: "🌋" }, "Wind+Fire": { name: "Smoke", emoji: "💭" }, "Wind+Earth": { name: "Dust", emoji: "🌪️" }, "Wind+Water": { name: "Wave", emoji: "🌊" }, "Steam+Earth": { name: "Geyser", emoji: "⛲" }, "Lava+Water": { name: "Stone", emoji: "🪨" }, "Mud+Fire": { name: "Brick", emoji: "🧱" }, "Stone+Stone": { name: "Mountain", emoji: "⛰️" }, "Mountain+Fire": { name: "Volcano", emoji: "🌋" }, "Volcano+Water": { name: "Island", emoji: "🏝️" }, "Island+Wind": { name: "Palm Tree", emoji: "🌴" }, } export default function InfiniteCraft() { const [elements, setElements] = useState([...baseElements]) const [selectedElements, setSelectedElements] = useState([]) const [discoveredCount, setDiscoveredCount] = useState(4) const handleElementClick = (element: Element) => { if (selectedElements.length < 2) { setSelectedElements([...selectedElements, element]) } } const handleCombine = () => { if (selectedElements.length !== 2) return const combinationKey = `${selectedElements[0].name}+${selectedElements[1].name}` const reverseCombinationKey = `${selectedElements[1].name}+${selectedElements[0].name}` const result = combinations[combinationKey] || combinations[reverseCombinationKey] if (result) { // Check if this element already exists const existingElementIndex = elements.findIndex((el) => el.name === result.name) if (existingElementIndex === -1) { // Add new element setElements([...elements, { ...result, discovered: true }]) setDiscoveredCount((prev) => prev + 1) } } else { // Random new element for combinations we haven't defined const randomEmojis = ["🦄", "🌈", "🍄", "🦋", "🌻", "🐉", "🧪", "🔮"] const newElement = { name: `${selectedElements[0].name} ${selectedElements[1].name}`, emoji: randomEmojis[Math.floor(Math.random() * randomEmojis.length)], discovered: true, } setElements([...elements, newElement]) setDiscoveredCount((prev) => prev + 1) } // Reset selection setSelectedElements([]) } const handleReset = () => { setSelectedElements([]) } return (

Back to Home

Infinite Craft

Discovered: {discoveredCount} elements

{selectedElements.map((element, index) => (

{element.emoji}

{element.name}

))} {selectedElements.length === 2 && } {selectedElements.length === 0 &&

Select elements to combine

}

{elements.map((element, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/password-game/page.tsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowLeft, Check, X } from "lucide-react" import { Input } from "@/components/ui/input" type Rule = { id: number description: string validator: (password: string) => boolean active: boolean } export default function PasswordGame() { const [password, setPassword] = useState("") const [rules, setRules] = useState([ { id: 1, description: "Your password must be at least 5 characters", validator: (password) => password.length >= 5, active: true, }, { id: 2, description: "Your password must include a number", validator: (password) => /\d/.test(password), active: false, }, { id: 3, description: "Your password must include an uppercase letter", validator: (password) => /[A-Z]/.test(password), active: false, }, { id: 4, description: "Your password must include a special character", validator: (password) => /[^A-Za-z0-9]/.test(password), active: false, }, { id: 5, description: "Your password must include a month of the year", validator: (password) => { const months = [ "january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december", ] return months.some((month) => password.toLowerCase().includes(month)) }, active: false, }, { id: 6, description: "The digits in your password must add up to 25", validator: (password) => { const digits = password.match(/\d/g) || [] return digits.reduce((sum, digit) => sum + Number.parseInt(digit), 0) === 25 }, active: false, }, { id: 7, description: "Your password must include a roman numeral", validator: (password) => /[IVXLCDM]/.test(password), active: false, }, ]) // Activate rules progressively useEffect(() => { const activeRuleCount = rules.filter((rule) => rule.active).length const passedRuleCount = rules.filter((rule) => rule.active && rule.validator(password)).length if (passedRuleCount === activeRuleCount && activeRuleCount < rules.length) { const updatedRules = [...rules] updatedRules[activeRuleCount].active = true setRules(updatedRules) } }, [password, rules]) const allRulesPassed = rules.every((rule) => !rule.active || rule.validator(password)) return (

Back to Home

The Password Game

Please choose a password

setPassword(e.target.value)} placeholder="Enter your password" className="text-lg p-6" />

{rules.map( (rule) => rule.active && (

{rule.validator(password) ? ( ) : ( )}

Rule {rule.id}: {rule.description}

), )}

{allRulesPassed && rules[rules.length - 1].active && (

Congratulations! Your password is secure.

)}

) }