[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import BlackjackGame from "@/components/blackjack-game" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/blackjack-game.tsx" isFixed="true" isQuickEdit="true" isEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { PlayingCard } from "@/components/playing-card" import { DuckDealer } from "@/components/duck-dealer" import { AlertCircle } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { motion } from "framer-motion" import confetti from "canvas-confetti" type CardType = { suit: "hearts" | "diamonds" | "clubs" | "spades" value: string numericValue: number } export default function BlackjackGame() { const [deck, setDeck] = useState([]) const [playerHand, setPlayerHand] = useState([]) const [dealerHand, setDealerHand] = useState([]) const [playerScore, setPlayerScore] = useState(0) const [dealerScore, setDealerScore] = useState(0) const [gameState, setGameState] = useState<"betting" | "playing" | "dealerTurn" | "gameOver">("betting") const [message, setMessage] = useState("") const [dealerCardHidden, setDealerCardHidden] = useState(true) const [chips, setChips] = useState(100) const [currentBet, setCurrentBet] = useState(0) // Initialize deck useEffect(() => { initializeGame() }, []) // Calculate scores whenever hands change useEffect(() => { setPlayerScore(calculateScore(playerHand)) setDealerScore(calculateScore(dealerHand)) }, [playerHand, dealerHand]) // Check for blackjack or bust after player score changes useEffect(() => { if (gameState === "playing") { if (playerScore === 21) { handleStand() } else if (playerScore > 21) { setGameState("gameOver") setMessage("Bust! You lose!") setDealerCardHidden(false) } } }, [playerScore, gameState]) // Dealer's turn logic useEffect(() => { if (gameState === "dealerTurn") { const dealerPlay = async () => { setDealerCardHidden(false) // Add a small delay for animation await new Promise((resolve) => setTimeout(resolve, 1000)) let currentDealerHand = [...dealerHand] let currentScore = calculateScore(currentDealerHand) while (currentScore < 17) { const newCard = drawCard() if (!newCard) break currentDealerHand = [...currentDealerHand, newCard] setDealerHand(currentDealerHand) currentScore = calculateScore(currentDealerHand) // Add delay between dealer draws await new Promise((resolve) => setTimeout(resolve, 800)) } determineWinner(calculateScore(playerHand), currentScore) } dealerPlay() } }, [gameState, dealerHand, playerHand]) // Added playerHand dependency const initializeGame = () => { const newDeck = createDeck() setDeck(shuffleDeck(newDeck)) setPlayerHand([]) setDealerHand([]) setGameState("betting") setMessage("") setDealerCardHidden(true) } const createDeck = () => { const suits = ["hearts", "diamonds", "clubs", "spades"] as const const values = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"] const deck: CardType[] = [] for (const suit of suits) { for (const value of values) { let numericValue = 0 if (value === "A") { numericValue = 11 } else if (["J", "Q", "K"].includes(value)) { numericValue = 10 } else { numericValue = Number.parseInt(value) } deck.push({ suit, value, numericValue }) } } return deck } const shuffleDeck = (deck: CardType[]) => { const newDeck = [...deck] for (let i = newDeck.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) ;[newDeck[i], newDeck[j]] = [newDeck[j], newDeck[i]] } return newDeck } const drawCard = () => { if (deck.length === 0) return null const newDeck = [...deck] const card = newDeck.pop() setDeck(newDeck) return card } const calculateScore = (hand: CardType[]) => { let score = 0 let aces = 0 for (const card of hand) { score += card.numericValue if (card.value === "A") { aces += 1 } } // Adjust for aces while (score > 21 && aces > 0) { score -= 10 // Change ace from 11 to 1 aces -= 1 } return score } const handleBet = (amount: number) => { if (chips >= amount) { setCurrentBet(amount) setChips(chips - amount) startNewRound() } } const startNewRound = () => { const newDeck = deck.length < 10 ? shuffleDeck(createDeck()) : deck setDeck(newDeck) // Deal initial cards const pCard1 = drawCard() const dCard1 = drawCard() const pCard2 = drawCard() const dCard2 = drawCard() if (pCard1 && pCard2 && dCard1 && dCard2) { setPlayerHand([pCard1, pCard2]) setDealerHand([dCard1, dCard2]) setGameState("playing") } } const handleHit = () => { const card = drawCard() if (card) { setPlayerHand([...playerHand, card]) } } const handleStand = () => { setGameState("dealerTurn") } const determineWinner = (playerFinalScore: number, dealerFinalScore: number) => { setGameState("gameOver") if (playerFinalScore > 21) { setMessage("Bust! You lose!") return } if (dealerFinalScore > 21) { setMessage("Dealer busts! You win!") setChips(chips + currentBet * 2) triggerWinAnimation() return } if (playerFinalScore === dealerFinalScore) { setMessage("Push! It's a tie!") setChips(chips + currentBet) return } if (playerFinalScore > dealerFinalScore) { setMessage("You win!") setChips(chips + currentBet * 2) triggerWinAnimation() } else { setMessage("Dealer wins!") } } const triggerWinAnimation = () => { confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }) } const handleNewGame = () => { setCurrentBet(0) initializeGame() } return (

Duck Blackjack

{/* Dealer section */}

Dealer

{gameState !== "betting" && (

Score: {dealerCardHidden ? "?" : dealerScore}

)}

{dealerHand.map((card, index) => ( ))}

{/* Game message */} {message && ( Game Result {message} )} {/* Player section */}

Your Hand

{gameState !== "betting" && (

Score: {playerScore}

)}

{playerHand.map((card, index) => ( ))}

{/* Game controls */}

{gameState === "betting" && ( <>

Chips: ${chips}

)} {gameState === "playing" && ( <>

Current Bet: ${currentBet}

)} {gameState === "gameOver" && ( <>

Chips: ${chips}

)}

) } [V0_FILE]typescriptreact:file="components/playing-card.tsx" isEdit="true" "use client" import { motion } from "framer-motion" type CardType = { suit: "hearts" | "diamonds" | "clubs" | "spades" value: string numericValue: number } type PlayingCardProps = { card: CardType hidden?: boolean } export function PlayingCard({ card, hidden = false }: PlayingCardProps) { const getSuitSymbol = (suit: CardType["suit"]) => { switch (suit) { case "hearts": return "♥" case "diamonds": return "♦" case "clubs": return "♣" case "spades": return "♠" default: return "" } } const getSuitColor = (suit: CardType["suit"]) => { return suit === "hearts" || suit === "diamonds" ? "text-red-600" : "text-black" } if (hidden) { return (

🦆

) } return (

{card.value}

{getSuitSymbol(card.suit)}

{card.value}

{getSuitSymbol(card.suit)}

) } [V0_FILE]typescriptreact:file="components/duck-dealer.tsx" isEdit="true" "use client" import { motion } from "framer-motion" type DuckDealerProps = { message: string } export function DuckDealer({ message }: DuckDealerProps) { return (

{/* Speech bubble */}

{message}

{/* Duck dealer */} {/* Duck face */}

{/* Eyes */}

{/* Beak */}

{/* Dealer hat */}

{/* Dealer bow tie */}

) } [V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="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: "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")], }