[V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color palette for fire theme */ --background: oklch(0.98 0.02 60); /* light beige #fffbeb */ --foreground: oklch(0.35 0 0); /* dark gray #4b5563 */ --card: oklch(1 0 0); /* white #ffffff */ --card-foreground: oklch(0.35 0 0); /* dark gray #4b5563 */ --popover: oklch(1 0 0); /* white #ffffff */ --popover-foreground: oklch(0.35 0 0); /* dark gray #4b5563 */ --primary: oklch(0.65 0.25 35); /* fire orange #ea580c */ --primary-foreground: oklch(1 0 0); /* white #ffffff */ --secondary: oklch(0.35 0 0); /* dark gray #4b5563 */ --secondary-foreground: oklch(1 0 0); /* white #ffffff */ --muted: oklch(0.98 0.01 240); /* soft background #f8fafc */ --muted-foreground: oklch(0.35 0 0); /* dark gray #4b5563 */ --accent: oklch(0.7 0.3 40); /* bright orange #f97316 */ --accent-foreground: oklch(1 0 0); /* white #ffffff */ --destructive: oklch(0.55 0.25 25); /* red #dc2626 */ --destructive-foreground: oklch(1 0 0); /* white #ffffff */ --border: oklch(0.9 0.01 240); /* light gray #e5e7eb */ --input: oklch(1 0 0); /* white #ffffff */ --ring: oklch(0.65 0.25 35 / 0.5); /* semi-transparent orange */ --chart-1: oklch(0.65 0.25 35); /* fire color */ --chart-2: oklch(0.7 0.3 40); /* lighter fire color */ --chart-3: oklch(0.98 0.02 60); /* light beige */ --chart-4: oklch(0.35 0 0); /* dark gray */ --chart-5: oklch(1 0 0); /* white */ --radius: 0.5rem; --sidebar: oklch(0.35 0 0); /* dark gray */ --sidebar-foreground: oklch(1 0 0); /* white */ --sidebar-primary: oklch(0.65 0.25 35); /* primary fire color */ --sidebar-primary-foreground: oklch(1 0 0); /* white */ --sidebar-accent: oklch(0.7 0.3 40); /* bright orange */ --sidebar-accent-foreground: oklch(1 0 0); /* white */ --sidebar-border: oklch(0.9 0.01 240); /* light gray */ --sidebar-ring: oklch(0.65 0.25 35 / 0.5); /* semi-transparent orange */ } .dark { --background: oklch(0.1 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.1 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.1 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.7 0.3 40); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.2 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.65 0.25 35); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.4 0.15 25); --destructive-foreground: oklch(0.65 0.25 25); --border: oklch(0.2 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.4 0 0); --chart-1: oklch(0.7 0.3 40); --chart-2: oklch(0.65 0.25 35); --chart-3: oklch(0.2 0 0); --chart-4: oklch(0.4 0 0); --chart-5: oklch(0.6 0 0); --sidebar: oklch(0.15 0 0); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.7 0.3 40); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.2 0 0); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(0.4 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Added fire game specific animations */ @keyframes flicker { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes pulse-fire { 0%, 100% { box-shadow: 0 0 20px rgba(234, 88, 12, 0.5); } 50% { box-shadow: 0 0 30px rgba(249, 115, 22, 0.8); } } .fire-flicker { animation: flicker 1.5s ease-in-out infinite; } .fire-float { animation: float 2s ease-in-out infinite; } .fire-pulse { animation: pulse-fire 2s ease-in-out infinite; } [V0_FILE]typescriptreact:file="app/page.tsx" import FireGame from "@/components/fire-game" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/fire-game.tsx" "use client" import { useState, useEffect, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" interface FireOrb { id: number x: number y: number collected: boolean } interface FireHazard { id: number x: number y: number size: number } interface Player { x: number y: number } export default function FireGame() { const [gameStarted, setGameStarted] = useState(false) const [gameOver, setGameOver] = useState(false) const [score, setScore] = useState(0) const [player, setPlayer] = useState({ x: 50, y: 50 }) const [fireOrbs, setFireOrbs] = useState([]) const [fireHazards, setFireHazards] = useState([]) const [keys, setKeys] = useState>(new Set()) // Initialize game objects const initializeGame = useCallback(() => { const orbs: FireOrb[] = [] const hazards: FireHazard[] = [] // Create fire orbs for (let i = 0; i < 8; i++) { orbs.push({ id: i, x: Math.random() * 80 + 10, y: Math.random() * 80 + 10, collected: false, }) } // Create fire hazards for (let i = 0; i < 5; i++) { hazards.push({ id: i, x: Math.random() * 70 + 15, y: Math.random() * 70 + 15, size: Math.random() * 8 + 6, }) } setFireOrbs(orbs) setFireHazards(hazards) setPlayer({ x: 10, y: 10 }) setScore(0) setGameOver(false) }, []) // Handle keyboard input useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { setKeys((prev) => new Set(prev).add(e.key.toLowerCase())) } const handleKeyUp = (e: KeyboardEvent) => { setKeys((prev) => { const newKeys = new Set(prev) newKeys.delete(e.key.toLowerCase()) return newKeys }) } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) } }, []) // Game loop useEffect(() => { if (!gameStarted || gameOver) return const gameLoop = setInterval(() => { setPlayer((prevPlayer) => { let newX = prevPlayer.x let newY = prevPlayer.y const speed = 2 if (keys.has("arrowleft") || keys.has("a")) newX = Math.max(0, newX - speed) if (keys.has("arrowright") || keys.has("d")) newX = Math.min(90, newX + speed) if (keys.has("arrowup") || keys.has("w")) newY = Math.max(0, newY - speed) if (keys.has("arrowdown") || keys.has("s")) newY = Math.min(90, newY + speed) return { x: newX, y: newY } }) }, 16) return () => clearInterval(gameLoop) }, [gameStarted, gameOver, keys]) // Collision detection useEffect(() => { if (!gameStarted || gameOver) return // Check fire orb collection setFireOrbs((prevOrbs) => { const updatedOrbs = prevOrbs.map((orb) => { if (!orb.collected && Math.abs(player.x - orb.x) < 5 && Math.abs(player.y - orb.y) < 5) { setScore((prev) => prev + 10) return { ...orb, collected: true } } return orb }) // Check if all orbs collected if (updatedOrbs.every((orb) => orb.collected)) { setGameOver(true) } return updatedOrbs }) // Check fire hazard collision const hitHazard = fireHazards.some( (hazard) => Math.abs(player.x - hazard.x) < hazard.size && Math.abs(player.y - hazard.y) < hazard.size, ) if (hitHazard) { setGameOver(true) } }, [player, gameStarted, gameOver, fireHazards]) const startGame = () => { setGameStarted(true) initializeGame() } const resetGame = () => { setGameStarted(false) setGameOver(false) initializeGame() } const allOrbsCollected = fireOrbs.every((orb) => orb.collected) return (

🔥 Fire Quest 🔥

Collect all fire orbs while avoiding the dangerous flames!

Score: {score}

{!gameStarted ? (

Use WASD or Arrow Keys to move

Collect all 🔥 fire orbs to win!

Avoid the dangerous 💥 fire hazards!

) : ( <>

{/* Player */}

{/* Fire Orbs */} {fireOrbs.map( (orb) => !orb.collected && (

🔥

), )} {/* Fire Hazards */} {fireHazards.map((hazard) => (

💥

))}

{gameOver && (

{allOrbsCollected ? ( 🎉 Victory! You collected all fire orbs! 🎉 ) : ( 💀 Game Over! You hit a fire hazard! 💀 )}

Final Score: {score}

)}

Orbs Collected: {fireOrbs.filter((orb) => orb.collected).length} / {fireOrbs.length}

)}

) } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }