[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import MainMenu from "@/components/game/main-menu" import GachaScreen from "@/components/game/gacha-screen" import CollectionScreen from "@/components/game/collection-screen" import DeckBuilderScreen from "@/components/game/deck-builder-screen" import DuelScreen from "@/components/game/duel-screen" import HistoryScreen from "@/components/game/history-screen" import SettingsScreen from "@/components/game/settings-screen" import { GameProvider } from "@/contexts/game-context" import { LanguageProvider } from "@/contexts/language-context" export type GameScreen = | "menu" | "gacha" | "collection" | "deck-builder" | "duel-bot" | "duel-player" | "history" | "settings" | "create-room" | "join-room" export default function Home() { const [currentScreen, setCurrentScreen] = useState("menu") const [duelMode, setDuelMode] = useState<"bot" | "player">("bot") const navigateTo = (screen: GameScreen) => { if (screen === "duel-bot") { setDuelMode("bot") setCurrentScreen("duel-bot") } else if (screen === "duel-player") { setDuelMode("player") setCurrentScreen("duel-player") } else { setCurrentScreen(screen) } } return (

{currentScreen === "menu" && } {currentScreen === "gacha" && navigateTo("menu")} />} {currentScreen === "collection" && navigateTo("menu")} />} {currentScreen === "deck-builder" && navigateTo("menu")} />} {(currentScreen === "duel-bot" || currentScreen === "duel-player") && ( navigateTo("menu")} /> )} {currentScreen === "history" && navigateTo("menu")} />} {currentScreen === "settings" && navigateTo("menu")} />}

) } [V0_FILE]typescriptreact:file="components/game/main-menu.tsx" isMerged="true" "use client" import { useState } from "react" import { useLanguage } from "@/contexts/language-context" import { useGame } from "@/contexts/game-context" import { Button } from "@/components/ui/button" import type { GameScreen } from "@/app/page" import { Swords, Bot, Users, Gift, BookOpen, Hammer, History, Settings, Coins } from "lucide-react" interface MainMenuProps { onNavigate: (screen: GameScreen) => void } export default function MainMenu({ onNavigate }: MainMenuProps) { const { t } = useLanguage() const { coins } = useGame() const [showPlayMenu, setShowPlayMenu] = useState(false) return (

{/* Background with gears */}

{[...Array(12)].map((_, i) => (

))}

{[...Array(16)].map((_, i) => (

))}

{/* Coins display */}

{coins}

{/* Logo */}

GEAR PERKS

CARD GAME

2025 Gear Perks Oficial Card Game, Made in BRAZIL

{/* Menu buttons */}

{!showPlayMenu ? ( <> ) : ( <> )}

) } [V0_FILE]typescriptreact:file="components/game/gacha-screen.tsx" isMerged="true" "use client" import { useState } from "react" import { useLanguage } from "@/contexts/language-context" import { useGame, type Card } from "@/contexts/game-context" import { Button } from "@/components/ui/button" import { ArrowLeft, Coins } from "lucide-react" import Image from "next/image" interface GachaScreenProps { onBack: () => void } type BannerType = "fsg" | "anl" export default function GachaScreen({ onBack }: GachaScreenProps) { const { t } = useLanguage() const { coins, setCoins, addToCollection, allCards } = useGame() const [currentBanner, setCurrentBanner] = useState("fsg") const [isOpening, setIsOpening] = useState(false) const [openedCards, setOpenedCards] = useState([]) const [showResults, setShowResults] = useState(false) const [gearColor, setGearColor] = useState<"silver" | "gold" | "rainbow">("silver") const [animationPhase, setAnimationPhase] = useState<"idle" | "zoom" | "spin" | "reveal">("idle") const COST_SINGLE = 1 const COST_MULTI = 10 const CARDS_PER_PACK = 4 const pullGacha = (count: number) => { const totalCost = count === 1 ? COST_SINGLE : COST_MULTI if (coins < totalCost) return setCoins(coins - totalCost) setIsOpening(true) setAnimationPhase("zoom") // Determine cards const totalCards = count === 1 ? CARDS_PER_PACK : CARDS_PER_PACK * 10 const pulledCards: Card[] = [] for (let i = 0; i < totalCards; i++) { // Rarity rates: R = 70%, SR = 25%, UR = 4.5%, LR = 0.5% const rand = Math.random() * 100 let targetRarity: "R" | "SR" | "UR" | "LR" if (rand < 0.5) targetRarity = "LR" else if (rand < 5) targetRarity = "UR" else if (rand < 30) targetRarity = "SR" else targetRarity = "R" // Find cards of target rarity, fallback to any card let availableCards = allCards.filter((c) => c.rarity === targetRarity) if (availableCards.length === 0) { availableCards = allCards } const randomCard = availableCards[Math.floor(Math.random() * availableCards.length)] pulledCards.push({ ...randomCard, id: `${randomCard.id}-${Date.now()}-${i}` }) } // Determine gear color based on highest rarity const hasLR = pulledCards.some((c) => c.rarity === "LR") const hasUR = pulledCards.some((c) => c.rarity === "UR") const hasSR = pulledCards.some((c) => c.rarity === "SR") if (hasLR || hasUR) { setGearColor("rainbow") } else if (hasSR) { setGearColor("gold") } else { setGearColor("silver") } setOpenedCards(pulledCards) // Animation sequence setTimeout(() => setAnimationPhase("spin"), 500) setTimeout(() => { setAnimationPhase("reveal") setShowResults(true) setIsOpening(false) addToCollection(pulledCards) }, 2500) } const closeResults = () => { setShowResults(false) setOpenedCards([]) setAnimationPhase("idle") } const getGearColorClass = () => { switch (gearColor) { case "rainbow": return "from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500" case "gold": return "from-amber-400 to-yellow-300" default: return "from-slate-400 to-slate-300" } } return (

{/* Header */}

{coins}

{/* Banner tabs */}

{/* Banner display */}

{/* Banner background */}

{/* Pack image */}

{currentBanner === "fsg" ? "FSG" : "ANL"}

BOOSTER PACK

{/* Banner title */}

{currentBanner === "fsg" ? "FSG BANNER" : "ANL BANNER"}

4 cartas por pack • Todas as cartas disponíveis

{/* Gacha buttons */}

{/* Pack Opening Animation */} {(isOpening || showResults) && (

{animationPhase !== "reveal" ? (

{/* Spinning gears background */}

{[...Array(12)].map((_, i) => (

))}

{/* Pack */}

{currentBanner === "fsg" ? "FSG" : "ANL"}

OPENING...

) : (

{openedCards.map((card, index) => (

))}

)}

) } [V0_FILE]typescriptreact:file="components/game/collection-screen.tsx" isMerged="true" "use client" import { useState } from "react" import { useLanguage } from "@/contexts/language-context" import { useGame, type Card } from "@/contexts/game-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ArrowLeft, Search, X } from "lucide-react" import Image from "next/image" interface CollectionScreenProps { onBack: () => void } export default function CollectionScreen({ onBack }: CollectionScreenProps) { const { t } = useLanguage() const { collection } = useGame() const [searchTerm, setSearchTerm] = useState("") const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc") const [filterRarity, setFilterRarity] = useState("all") const [filterType, setFilterType] = useState("all") const [selectedCard, setSelectedCard] = useState(null) // Get unique cards with counts const cardCounts = collection.reduce( (acc, card) => { const baseId = card.id.split("-").slice(0, -2).join("-") || card.id if (!acc[baseId]) { acc[baseId] = { card, count: 0 } } acc[baseId].count++ return acc }, {} as Record, ) const uniqueCards = Object.values(cardCounts) // Apply filters and sorting let filteredCards = uniqueCards.filter(({ card }) => { const matchesSearch = card.name.toLowerCase().includes(searchTerm.toLowerCase()) const matchesRarity = filterRarity === "all" || card.rarity === filterRarity const matchesType = filterType === "all" || card.type === filterType return matchesSearch && matchesRarity && matchesType }) // Sort filteredCards = filteredCards.sort((a, b) => { const comparison = a.card.name.localeCompare(b.card.name) return sortOrder === "asc" ? comparison : -comparison }) return (

{/* Header */}

{t("collection")}

{/* Filters */}

setSearchTerm(e.target.value)} className="pl-10 bg-slate-800 border-slate-700 text-white" />

{/* Card grid */}

{filteredCards.length === 0 ? (

Nenhuma carta na coleção. Abra alguns packs no Gacha!

) : (

{filteredCards.map(({ card, count }) => (

setSelectedCard(card)} className={`relative aspect-[3/4] rounded-lg overflow-hidden shadow-lg cursor-pointer transform hover:scale-105 transition-transform ${ card.rarity === "UR" || card.rarity === "LR" ? "ring-2 ring-yellow-400" : card.rarity === "SR" ? "ring-2 ring-purple-400" : "ring-1 ring-slate-600" }`} > {card.name}

{count > 1 && (

x{count}

)}

))}

)}

{/* Card zoom modal */} {selectedCard && (

setSelectedCard(null)} >

)}

) } [V0_FILE]typescriptreact:file="components/game/deck-builder-screen.tsx" isMerged="true" "use client" import { useState } from "react" import { useLanguage } from "@/contexts/language-context" import { useGame, type Card, type Deck } from "@/contexts/game-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ArrowLeft, Save, Trash2, Plus, Search, X } from "lucide-react" import Image from "next/image" interface DeckBuilderScreenProps { onBack: () => void } export default function DeckBuilderScreen({ onBack }: DeckBuilderScreenProps) { const { t } = useLanguage() const { collection, decks, saveDeck, deleteDeck } = useGame() const [selectedDeck, setSelectedDeck] = useState(null) const [deckName, setDeckName] = useState("") const [deckCards, setDeckCards] = useState([]) const [searchTerm, setSearchTerm] = useState("") const [filterRarity, setFilterRarity] = useState("all") const [filterType, setFilterType] = useState("all") const [isCreating, setIsCreating] = useState(false) const MIN_CARDS = 10 const MAX_CARDS = 20 const MAX_COPIES = 4 // Get unique cards from collection const uniqueCards = collection.reduce( (acc, card) => { const baseId = card.id.split("-").slice(0, -2).join("-") || card.id if (!acc[baseId]) { acc[baseId] = card } return acc }, {} as Record, ) const availableCards = Object.values(uniqueCards) // Filter available cards const filteredCards = availableCards.filter((card) => { const matchesSearch = card.name.toLowerCase().includes(searchTerm.toLowerCase()) const matchesRarity = filterRarity === "all" || card.rarity === filterRarity const matchesType = filterType === "all" || card.type === filterType return matchesSearch && matchesRarity && matchesType }) const getCardCopiesInDeck = (cardName: string) => { return deckCards.filter((c) => c.name === cardName).length } const addCardToDeck = (card: Card) => { if (deckCards.length >= MAX_CARDS) return if (getCardCopiesInDeck(card.name) >= MAX_COPIES) return setDeckCards((prev) => [...prev, { ...card, id: `${card.id}-deck-${Date.now()}` }]) } const removeCardFromDeck = (index: number) => { setDeckCards((prev) => prev.filter((_, i) => i !== index)) } const handleSaveDeck = () => { if (!deckName.trim()) { alert("Digite um nome para o deck!") return } if (deckCards.length < MIN_CARDS) { alert(`O deck precisa ter no mínimo ${MIN_CARDS} cartas!`) return } const deck: Deck = { id: selectedDeck?.id || `deck-${Date.now()}`, name: deckName, cards: deckCards, } saveDeck(deck) setIsCreating(false) setSelectedDeck(null) setDeckName("") setDeckCards([]) } const handleDeleteDeck = (deckId: string) => { if (confirm("Tem certeza que deseja deletar este deck?")) { deleteDeck(deckId) } } const handleEditDeck = (deck: Deck) => { setSelectedDeck(deck) setDeckName(deck.name) setDeckCards([...deck.cards]) setIsCreating(true) } const startNewDeck = () => { setSelectedDeck(null) setDeckName("") setDeckCards([]) setIsCreating(true) } if (!isCreating) { return (

{/* Header */}

{t("deckBuilder")}

{/* Deck list */}

{decks.length === 0 ? (

Nenhum deck criado ainda.

) : (

{decks.map((deck) => (

{deck.name}

{deck.cards.length} {t("cards")}

))}

)}

) } return (

{/* Header */}

setDeckName(e.target.value)} placeholder={t("deckName")} className="max-w-xs bg-slate-800 border-slate-700 text-white text-center" />

{/* Available cards */}

{/* Filters */}

setSearchTerm(e.target.value)} className="pl-10 bg-slate-800 border-slate-700 text-white text-sm" />

{/* Card grid */}

{filteredCards.map((card) => { const copiesInDeck = getCardCopiesInDeck(card.name) const canAdd = copiesInDeck < MAX_COPIES && deckCards.length < MAX_CARDS return (

canAdd && addCardToDeck(card)} className={`relative aspect-[3/4] rounded overflow-hidden shadow cursor-pointer transform hover:scale-105 transition-transform ${ !canAdd ? "opacity-50" : "" }`} > {card.name}

{copiesInDeck > 0 && (

{copiesInDeck}/{MAX_COPIES}

)}

) })}

{/* Current deck */}

{t("newDeck")}

{deckCards.length}/{MAX_CARDS} {t("cards")}

{t("minCards")} • {t("maxCopies")}

{deckCards.map((card, index) => (

removeCardFromDeck(index)} className="relative aspect-[3/4] rounded overflow-hidden shadow cursor-pointer transform hover:scale-105 transition-transform group" > {card.name}

))}

) } [V0_FILE]typescriptreact:file="components/game/history-screen.tsx" isMerged="true" "use client" import { useLanguage } from "@/contexts/language-context" import { useGame } from "@/contexts/game-context" import { Button } from "@/components/ui/button" import { ArrowLeft, Trophy, X } from "lucide-react" interface HistoryScreenProps { onBack: () => void } export default function HistoryScreen({ onBack }: HistoryScreenProps) { const { t } = useLanguage() const { matchHistory } = useGame() const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString() + " " + date.toLocaleTimeString() } return (

{/* Header */}

{t("matchHistory")}

{/* History list */}

{matchHistory.length === 0 ? (

Nenhuma partida registrada ainda.

) : (

{matchHistory.map((match) => (

{match.result === "won" ? ( ) : ( )}

{match.result === "won" ? t("won") : t("lost")}

{match.mode === "bot" ? t("vsBot2") : t("vsPlayer2")}

{match.deckUsed}

{formatDate(match.date)}

))}

)}

) } [V0_FILE]typescriptreact:file="components/game/settings-screen.tsx" isMerged="true" "use client" import { useLanguage } from "@/contexts/language-context" import { Button } from "@/components/ui/button" import { ArrowLeft, Globe } from "lucide-react" interface SettingsScreenProps { onBack: () => void } export default function SettingsScreen({ onBack }: SettingsScreenProps) { const { t, language, setLanguage } = useLanguage() return (

{/* Header */}

{t("settings")}

{/* Settings content */}

{/* Language selection */}

{t("language")}

{/* Credits */}

2025 Gear Perks Oficial Card Game

Made in BRAZIL

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.145 0.02 270); --foreground: oklch(0.985 0 0); --card: oklch(0.18 0.02 270); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.18 0.02 270); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.7 0.15 200); --primary-foreground: oklch(0.145 0 0); --secondary: oklch(0.25 0.02 270); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.25 0.02 270); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.75 0.2 50); --accent-foreground: oklch(0.145 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.3 0.02 270); --input: oklch(0.25 0.02 270); --ring: oklch(0.7 0.15 200); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.18 0.02 270); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.7 0.15 200); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.25 0.02 270); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.3 0.02 270); --sidebar-ring: oklch(0.7 0.15 200); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --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; } } /* Custom animations */ @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 20s linear infinite; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Gear Perks Card Game", description: "2025 Gear Perks Oficial Card Game, Made in BRAZIL", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export const viewport: Viewport = { themeColor: "#1e1b4b", width: "device-width", initialScale: 1, maximumScale: 1, userScalable: false, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "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", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "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": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]png:file="public/images/vivian-20r.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Vivian%20R-t2jpCbqBbNmwJR0y7FK0wNKPSKpRJl.png" isMerged="true" [V0_FILE]png:file="public/images/vivian-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Vivian%20SR-iLSZxPgpEHLlnn8ihGddKUfg7ixK2E.png" isMerged="true" [V0_FILE]png:file="public/images/o-20cavaleiro-20verde-20r.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/O%20Cavaleiro%20Verde%20R-VguzUm9itfqmgqR8JiN6VksMmifaTg.png" isMerged="true" [V0_FILE]png:file="public/images/o-20cavaleiro-20verde-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/O%20Cavaleiro%20Verde%20SR-5Dl8LD5Ce75wkLTxx1HLVEROXSvDd8.png" isMerged="true" [V0_FILE]png:file="public/images/o-20cavaleiro-20afogado-20r.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/O%20Cavaleiro%20Afogado%20R-o6PMietwbU4FHGSB4otA2w7PmPGEye.png" isMerged="true" [V0_FILE]png:file="public/images/o-20cavaleiro-20afogado-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/O%20Cavaleiro%20Afogado%20SR-MDxRbava1Kdn5xyqs1m379n7SSLjR7.png" isMerged="true" [V0_FILE]png:file="public/images/ullr-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Ullr%20SR-OLrZzwae3rtIlWpCm9nwp0iSX0T2S7.png" isMerged="true" [V0_FILE]png:file="public/images/ullr-20ur.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Ullr%20UR-hw0TWdEzpC1lDT2EVT0teN24VOr4zz.png" isMerged="true" [V0_FILE]png:file="public/images/mr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Mr.P%20SR-PjEfQoBdaO2bBgXVfeCDrkINy6eu3M.png" isMerged="true" [V0_FILE]png:file="public/images/morgana-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Morgana%20SR-1dkzjGsYVw7NWVa6MgEGs2gU5tXp9l.png" isMerged="true" [V0_FILE]png:file="public/images/morgana-20ur.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Morgana%20UR-6vvH4DWvIG0ALqObWkq8RsDtjSr44F.png" isMerged="true" [V0_FILE]png:file="public/images/logi-20ur.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Logi%20UR-7WGS7OZCDjUzZSi9EQpd1HvhYIPYko.png" isMerged="true" [V0_FILE]png:file="public/images/oswin-20r.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Oswin%20R-81zbG8NSjHBZ2ExmG8wGsA4znUvcrE.png" isMerged="true" [V0_FILE]png:file="public/images/oswin-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Oswin%20SR-3x7qzNRhscQjJ0rLcIsdSTE5Gl9IIQ.png" isMerged="true" [V0_FILE]png:file="public/images/mordred-20r.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Mordred%20R-WaT5cDTPzSBiFM0ecVLR9foNhEjT7I.png" isMerged="true" [V0_FILE]png:file="public/images/mordred-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Mordred%20SR-Il0JJ1xcA3BOApV2xTb8wlO1QUaTLq.png" isMerged="true" [V0_FILE]png:file="public/images/merlin-20r.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Merlin%20R-QYaKN1dRTJpK1XyMJlaJkOmoeU5OsP.png" isMerged="true" [V0_FILE]png:file="public/images/merlin-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Merlin%20SR-w5369ccI0ZFQYQw7wPYhaseFm7ytI3.png" isMerged="true" [V0_FILE]png:file="public/images/logi-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Logi%20SR-lOQJ7CRVxNLBLu1drs1L3l8G4E4Ave.png" isMerged="true" [V0_FILE]png:file="public/images/hrotti-20lr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Hrotti%20LR-3OIWeZPUKTxsDvVlx2eZ1v4eeO0jF7.png" isMerged="true" [V0_FILE]png:file="public/images/hrotti-20ur.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Hrotti%20UR-L5WXhgYCVUMI4hOhV8YcGFr9P2Wwwl.png" isMerged="true" [V0_FILE]png:file="public/images/hrotti-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Hrotti%20SR-UnJIgVKJRjvRmRWVGGKIKOGPGsRlAi.png" isMerged="true" [V0_FILE]png:file="public/images/galahad-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Galahad%20SR-TVnCGHBfowYGjJ0B4MnDwSSWLjEqFG.png" isMerged="true" [V0_FILE]png:file="public/images/jaden-20lr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Jaden%20LR-YeQm4pOQxbStKfkZD5QwoF6a8L07py.png" isMerged="true" [V0_FILE]png:file="public/images/jaden-20ur.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Jaden%20UR-EwTqzqPfrHGmjAOckKoZBkUpSClolV.png" isMerged="true" [V0_FILE]png:file="public/images/jaden-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Jaden%20SR-Lxnu0WJchFkxvjgiAR1ar6dlMr4iRh.png" isMerged="true" [V0_FILE]png:file="public/images/arthur-20lr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Arthur%20LR-abjWZG9BuLU6LZYJdRL97h39lydPXd.png" isMerged="true" [V0_FILE]png:file="public/images/arthur-20ur.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Arthur%20UR-OMgjL1jxUdBioGAP6UTP7ZFRADTGJB.png" isMerged="true" [V0_FILE]png:file="public/images/arthur-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Arthur%20SR-c0bjKEltylyaF3URwi9LR8MfNzCf9R.png" isMerged="true" [V0_FILE]png:file="public/images/galahad-20r.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Galahad%20R-xVAmhXLZPaNagHgkvdpVjdoHLtu6OQ.png" isMerged="true" [V0_FILE]png:file="public/images/fehnon-20ur.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Fehnon%20UR-DeLLAwmbbxpVkAKoslRN8yehgwIvVo.png" isMerged="true" [V0_FILE]png:file="public/images/fehnon-20sr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Fehnon%20SR-q19XwgNHPvvfxf5RRDYflfwqFxUmxU.png" isMerged="true" [V0_FILE]png:file="public/images/bandagens-duplas.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Bandagens%20Duplas-T4LjpumKDc6Sxg1E3S3tC6TenSU4nz.png" isMerged="true" [V0_FILE]png:file="public/images/bandagem-restauradora.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Bandagem%20Restauradora-qMvgWJzxU7C1v9fOeIZuQMZqvt4oJt.png" isMerged="true" [V0_FILE]png:file="public/images/cristal-recuperador.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Cristal%20Recuperador-dK9wMcwASVDLjAy5zxnfRDQik03zJD.png" isMerged="true" [V0_FILE]png:file="public/images/dados-elementais-alpha.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Dados%20Elementais%20Alpha-J2sweJDR0mHRMk7LvNio6N8sCROxJ8.png" isMerged="true" [V0_FILE]png:file="public/images/dados-elementais-omega.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Dados%20Elementais%20Omega-nB1fkI25v96ivNMhnfEmTDZvxPJqxP.png" isMerged="true" [V0_FILE]png:file="public/images/dados-da-calamidade.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Dados%20da%20Calamidade-NnHNmWJr5aOb3EXTcUuQpUV4AMJnEd.png" isMerged="true" [V0_FILE]png:file="public/images/dados-da-fortuna.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Dados%20da%20Futurna-lNzhMMXELvOkE7IayobxAhcav9iyUZ.png" isMerged="true" [V0_FILE]png:file="public/images/amplificador-de-poder.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Amplificador%20de%20Poder-gquExA5g0Jfk0cemwALc8FXzuYGgFT.png" isMerged="true" [V0_FILE]png:file="public/images/cauda-de-dragao-assada.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Cauda%20de%20drag%C3%A3o%20assada-cILWLW8Lz306HJH0H0zTDZksSB7pfV.png" isMerged="true" [V0_FILE]png:file="public/images/adaga-energizada.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Adaga%20Enegizada-tLJAU9fsOJVFXlewZRhYhNznKh9RtV.png" isMerged="true" [V0_FILE]typescriptreact:file="contexts/game-context.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode, useEffect } from "react" export interface Card { id: string name: string image: string rarity: "R" | "SR" | "UR" | "LR" type: "unit" | "magic" | "action" | "ultimateGear" | "ultimateGuardian" | "ultimateElemental" | "item" element: "Aquos" | "Ventus" | "Pyrus" | "Terra" | "Darkus" | "Haos" dp: number ability: string abilityDescription: string attack: string attackDescription?: string category: string requiresEquip?: string } export interface Deck { id: string name: string cards: Card[] } export interface MatchRecord { id: string date: string opponent: string mode: "bot" | "player" result: "won" | "lost" deckUsed: string } interface GameContextType { coins: number setCoins: (coins: number) => void collection: Card[] addToCollection: (cards: Card[]) => void decks: Deck[] saveDeck: (deck: Deck) => void deleteDeck: (deckId: string) => void matchHistory: MatchRecord[] addMatchRecord: (record: MatchRecord) => void allCards: Card[] } const GameContext = createContext(undefined) // All available cards in the game const ALL_CARDS: Card[] = [ { id: "vivian-r", name: "Vivian: A Dama do Lago", image: "/images/vivian-20r.png", rarity: "R", type: "unit", element: "Aquos", dp: 1, ability: "Abraço das Profundezas", abilityDescription: "Quando ela for evocada, você pode escolher uma unidade de 2 ou 3DP do seu deck, e evoca-la no seu campo.", attack: "Vapor de Avalon", category: "Aquos Troops unit", }, { id: "vivian-sr", name: "Vivian: A Dama do Lago", image: "/images/vivian-20sr.png", rarity: "SR", type: "unit", element: "Aquos", dp: 1, ability: "Abraço das Profundezas", abilityDescription: "Quando ela for evocada, você pode escolher uma unidade de 2 ou 3DP do seu deck, e evoca-la no seu campo.", attack: "Vapor de Avalon", category: "Aquos Troops unit", }, { id: "cavaleiro-verde-r", name: "O Cavaleiro Verde", image: "/images/o-20cavaleiro-20verde-20r.png", rarity: "R", type: "unit", element: "Ventus", dp: 1, ability: "Clareira Sagrada", abilityDescription: "Se ele for evocado por alguma outra carta, seja unidade ou não, ele ganha +3DP e você pode comprar uma carta.", attack: "Provação Eterna", category: "Ventus Troops unit", }, { id: "cavaleiro-verde-sr", name: "O Cavaleiro Verde", image: "/images/o-20cavaleiro-20verde-20sr.png", rarity: "SR", type: "unit", element: "Ventus", dp: 1, ability: "Clareira Sagrada", abilityDescription: "Se ele for evocado por alguma outra carta, seja unidade ou não, ele ganha +3DP e você pode comprar uma carta.", attack: "Provação Eterna", category: "Ventus Troops unit", }, { id: "cavaleiro-afogado-r", name: "O Caveiro Afogado", image: "/images/o-20cavaleiro-20afogado-20r.png", rarity: "R", type: "unit", element: "Aquos", dp: 1, ability: "Juramento Submerso", abilityDescription: "Se ele for evocado por alguma outra carta sendo unidade ou não, Você compra uma carta.", attack: "Afogamento Eterno", category: "Aquos Troops unit", }, { id: "cavaleiro-afogado-sr", name: "O Caveiro Afogado", image: "/images/o-20cavaleiro-20afogado-20sr.png", rarity: "SR", type: "unit", element: "Aquos", dp: 1, ability: "Juramento Submerso", abilityDescription: "Se ele for evocado por alguma outra carta sendo unidade ou não, Você compra uma carta.", attack: "Afogamento Eterno", category: "Aquos Troops unit", }, { id: "ullr-sr", name: "Scandinavian Angel Ullr", image: "/images/ullr-20sr.png", rarity: "SR", type: "ultimateGear", element: "Ventus", dp: 2, ability: "Marca da Caçada", abilityDescription: "Ullr escolhe uma unidade do oponente como alvo, se for do elemento Ventus, ela perde 2DP, se for de outro elemento perde 1DP.", attack: "Veredicto de Ullr", attackDescription: "Ao atacar, alguma unidade, ou diretamente o oponente, Compre uma carta, se for uma unidade do elemento Ventus, compre mais uma.", category: "Ventus Ultimate Gear user", }, { id: "ullr-ur", name: "Scandinavian Angel Ullr", image: "/images/ullr-20ur.png", rarity: "UR", type: "ultimateGear", element: "Ventus", dp: 3, ability: "Juramento Eterno", abilityDescription: "Todos do elemento vento ganham mais 2DP, caso Ullr estiver usando a UG: Ullrbogi, serão 3DP, essa habilidade pode ser aplicada nele também, ela pode ser ativada a cada 4 turnos.", attack: "Flecha de Skadi", attackDescription: "Ele pode destruir qualquer unidade que tenha 2DP no total, esse efeito pode ser ativado somente uma vez", category: "Ventus Ultimate Gear user", }, { id: "mr-p-r", name: "O Lorde Penguim Mr. P", image: "/images/mr.png", rarity: "R", type: "unit", element: "Aquos", dp: 1, ability: "Manuscrito de Guerra", abilityDescription: "(Se quiser) Selecione uma unidade do campo do seu oponente e diminua 2DP dela. Selecione uma carta da mão do seu oponente e faça-o descarta-la.", attack: "A Pena é Mais Forte que a Espada", category: "Aquos Troops unit", }, { id: "mr-p-sr", name: "O Lorde Penguim Mr. P", image: "/images/mr.png", rarity: "SR", type: "unit", element: "Aquos", dp: 1, ability: "Manuscrito de Guerra", abilityDescription: "(Se quiser) Selecione uma unidade do campo do seu oponente e diminua 2DP dela. Selecione uma carta da mão do seu oponente e faça-o descarta-la.", attack: "A Pena é Mais Forte que a Espada", category: "Aquos Troops unit", }, { id: "morgana-sr", name: "Morgana Pendragon", image: "/images/morgana-20sr.png", rarity: "SR", type: "ultimateGear", element: "Darkus", dp: 2, ability: "Acorde do Abismo", abilityDescription: "Toda vez que Morgana causa dano a um oponente diretamente, ela drena uma pequena quantidade de vida (1DP) para a vida do jogador. Se o oponente tiver uma unidade do elemento Luz em campo, a drenagem é dobrada (2DP).", attack: "Ressonância em Eclipse", attackDescription: "Se a unidade ou o oponente sobreviver a este ataque, ele fica impedido de sacar cartas ou ativar habilidades no próximo turno dele, esse efeito pode ser ativado a cada 2 turnos.", category: "Darkness Ultimate Gear user", }, { id: "morgana-ur", name: "Morgana Pendragon", image: "/images/morgana-20ur.png", rarity: "UR", type: "ultimateGear", element: "Darkus", dp: 3, ability: "Domínio Eterno", abilityDescription: "Enquanto essa carta estiver em campo, o oponente não pode ativar cartas armadilhas. Se essa carta for removida do campo, o oponente perde 3PV", attack: "Sinfonia Relâmpago", attackDescription: "A cada 3 turnos ela pode destruir duas cartas de Action ou Armadilhas Correntes do oponente. Para cada carta destruída por este efeito, o oponente deve descartar as 3 cartas do topo do deck dele diretamente para o cemitério.", category: "Darkness Ultimate Gear user", }, { id: "logi-ur", name: "Scandinavian Angel Logi", image: "/images/logi-20ur.png", rarity: "UR", type: "ultimateGear", element: "Pyrus", dp: 3, ability: "Cinzas do Mundo", abilityDescription: "Quando ele entrar em campo, você pode escolher uma unidade de qualquer elemento (sem ser essa) e adicionar 2DP a ela permanentemente, se não tiver nenhuma outra unidade fora essa, compre uma carta.", attack: "Devorar o Mundo", attackDescription: "Antes dele atacar, todas as cartas de unidades do openente perdem 2DP (Se ficarem com 0 serão destruídas), se ainda ficarem com DP, ficarão permanente com o DP diminuído, esse efeito é ativado a cada 3 turnos de batalha do jogador.", category: "Fire Ultimate Gear user", }, { id: "oswin-r", name: "Oswin: O Comerciante", image: "/images/oswin-20r.png", rarity: "R", type: "unit", element: "Darkus", dp: 1, ability: "Lucro na Crise", abilityDescription: "Puxe 5 cartas do seu baralho, se tiver cartas de itens, escolha até duas dessas cartas para adiciona-las a sua mão, o resto das cartas você irá deixa-las abaixo do seu baralho, sendo elas as ultimas a serem compradas, Caso não tenha, escolha 1 carta dessas. Essa habilidade só pode ser ativada uma vez por duelo.", attack: "Arremesso de Mercadorias", category: "Darkness Troops unit", }, { id: "oswin-sr", name: "Oswin: O Comerciante", image: "/images/oswin-20sr.png", rarity: "SR", type: "unit", element: "Darkus", dp: 1, ability: "Lucro na Crise", abilityDescription: "Puxe 5 cartas do seu baralho, se tiver cartas de itens, escolha até duas dessas cartas para adiciona-las a sua mão, o resto das cartas você irá deixa-las abaixo do seu baralho, sendo elas as ultimas a serem compradas, Caso não tenha, escolha 1 carta dessas. Essa habilidade só pode ser ativada uma vez por duelo.", attack: "Arremesso de Mercadorias", category: "Darkness Troops unit", }, { id: "mordred-r", name: "Mordred: O Usurpador", image: "/images/mordred-20r.png", rarity: "R", type: "unit", element: "Haos", dp: 1, ability: "Destino de Camlann", abilityDescription: "Compre uma carta, se ela for uma unidade de tropa, Mordred ganha +2DP. Essa habilidade só pode ser ativada uma vez por duelo.", attack: "Traição do Rei Caído", category: "Lightness Troops unit", }, { id: "mordred-sr", name: "Mordred: O Usurpador", image: "/images/mordred-20sr.png", rarity: "SR", type: "unit", element: "Haos", dp: 1, ability: "Destino de Camlann", abilityDescription: "Compre uma carta, se ela for uma unidade de tropa, Mordred ganha +2DP. Essa habilidade só pode ser ativada uma vez por duelo.", attack: "Traição do Rei Caído", category: "Lightness Troops unit", }, { id: "merlin-r", name: "Merlin: O Mago do Destino", image: "/images/merlin-20r.png", rarity: "R", type: "unit", element: "Darkus", dp: 1, ability: "Visão Além do Agora", abilityDescription: "Puxe 5 cartas do seu baralho, escolha duas dessas cartas para adiciona-las a sua mão, o resto das cartas você irá deixa-las abaixo do seu baralho, sendo elas as ultimas a serem compradas. Essa habilidade só pode ser ativada uma vez por duelo.", attack: "Feitiço da Eternidade", category: "Darkness Troops unit", }, { id: "merlin-sr", name: "Merlin: O Mago do Destino", image: "/images/merlin-20sr.png", rarity: "SR", type: "unit", element: "Darkus", dp: 1, ability: "Visão Além do Agora", abilityDescription: "Puxe 5 cartas do seu baralho, escolha duas dessas cartas para adiciona-las a sua mão, o resto das cartas você irá deixa-las abaixo do seu baralho, sendo elas as ultimas a serem compradas. Essa habilidade só pode ser ativada uma vez por duelo.", attack: "Feitiço da Eternidade", category: "Darkness Troops unit", }, { id: "logi-sr", name: "Scandinavian Angel Logi", image: "/images/logi-20sr.png", rarity: "SR", type: "ultimateGear", element: "Pyrus", dp: 2, ability: "Incêndio Vivo", abilityDescription: "Cada unidade do oponente que ele derrota, é mais uma vez que ele pode atacar sendo unidade do oponente, ou diretamente, essa habilidade está ativa sempre que essa carta estiver em campo batalhando.", attack: "Explosão de Muspell", attackDescription: "Após ele usar esse ataque, você pode escolher uma unidade de fogo do seu campo em batalha, e adicionar 1DP a ela, esse efeito dura até o final dessa fase de batalha desse turno.", category: "Fire Ultimate Gear user", }, { id: "hrotti-lr", name: "Scandinavian Angel Hrotti", image: "/images/hrotti-20lr.png", rarity: "LR", type: "ultimateGuardian", element: "Aquos", dp: 4, ability: "Ira Maelstrom", abilityDescription: "Condição: Após causar dano de batalha ao oponente. Efeito: O oponente é forçado a colocar a carta do topo de seu Deck como a última carta de seu Deck. Além disso, você pode olhar a carta do topo do seu próprio Deck e colocá-la na parte inferior ou mantê-la onde está.", attack: "Tidal of Midgard", attackDescription: "Enquanto esta carta estiver no campo, o oponente não pode ativar Habilidades, Magias ou Armadilhas durante a sua Fase Principal 1 e Fase de Batalha. Esse efeito ativa na primeira fase de batalha do jogador que essa carta estiver em campo, esse efeito dura por 4 turnos.", category: "Aquos Ultimate Guardian user", requiresEquip: "MESSIHAM", }, { id: "hrotti-ur", name: "Scandinavian Angel Hrotti", image: "/images/hrotti-20ur.png", rarity: "UR", type: "ultimateElemental", element: "Aquos", dp: 3, ability: "Herança de Andvaranaut", abilityDescription: "Todas as Ultimates Gears tem seus efeitos anulados por 3 turnos. Essa habilidade pode ser ativada somente uma vez.", attack: "Fafnisbani", attackDescription: "Quando Hrotti declara um ataque: Se a carta de unidade que ele atacar tiver 3 ou menos de DP total, essa carta ganha +2DP permanentemente, antes do ataque ser realizado, esse efeito será ativado.", category: "Aquos Ultimate Elemental user", }, { id: "hrotti-sr", name: "Scandinavian Angel Hrotti", image: "/images/hrotti-20sr.png", rarity: "SR", type: "ultimateGear", element: "Aquos", dp: 2, ability: "Avareza de Fafnir", abilityDescription: "A cada 3 turnos, você pode descartar cartas do seu campo (qualquer tipo de carta ativa em seu campo) para conceder a Hrotti um bônus de DP dependendo de quantas cartas forem descartadas (1DP para cada)", attack: "Corte do Medo Rúnico", attackDescription: "Na fase de batalha, antes de Hrotti atacar, todas as unidades do oponente independente do elemento, perdem 1DP, essa habilidade é ativada a cada 2 turnos na fase de batalha do jogador.", category: "Aquos Ultimate Gear user", }, { id: "galahad-sr", name: "Santo Graal: Galahad", image: "/images/galahad-20sr.png", rarity: "SR", type: "unit", element: "Haos", dp: 1, ability: "Coração Imaculado", abilityDescription: "Enquanto estiver em campo, Galahad não pode ser destruído por cartas do oponente, exceto se unidades do oponente forem ataca-lo.", attack: "Lâmina da Pureza", category: "Lightness Troops unit", }, { id: "jaden-lr", name: "Jaden Hainaegi", image: "/images/jaden-20lr.png", rarity: "LR", type: "ultimateGuardian", element: "Pyrus", dp: 4, ability: "Magma Primordial", abilityDescription: "Causa 3 DP de dano direto ao oponente. Esse dano ignora qualquer carta, efeito ou condição, e não pode ser prevenido. Só pode ser ativada uma única vez por duelo.", attack: "Sol Carmesim", attackDescription: "Se esse ataque derrotar uma unidade, cause 2 DP de dano direto adicional ao oponente. Na fase de batalha do turno seguinte, todas as outras unidades inimigas recebem a mesma quantidade de dano (2DP) no próximo turno.", category: "Fire Ultimate Guardian user", requiresEquip: "IFRAID", }, { id: "jaden-ur", name: "Jaden Hainaegi", image: "/images/jaden-20ur.png", rarity: "UR", type: "ultimateElemental", element: "Pyrus", dp: 3, ability: "Neo Núcleo", abilityDescription: "No início do turno do seu controlador, você pode ativar este efeito: Escolha 1 unidade inimiga, ela perde 1 DP. Se essa unidade for derrotada por este efeito, Jaden recebe +1DP neste turno. Pode ser ativada uma vez por turno. Não pode ser usada no turno em que Jaden entrou em campo.", attack: "Pressão Vulcânica", attackDescription: "Quando Jaden declara um ataque: Cause 1 DP de dano direto ao oponente antes da resolução do combate. Se o ataque derrotar a unidade inimiga, Jaden ganha +1DP", category: "Fire Ultimate Elemental user", }, { id: "jaden-sr", name: "Jaden Hainaegi", image: "/images/jaden-20sr.png", rarity: "SR", type: "unit", element: "Pyrus", dp: 2, ability: "Núcleo Ardente", abilityDescription: "Causa dano de 2DP direto ignorando qualquer tipo de carta/efeito que tente negar essa habilidade. Ela só pode ser ativada uma única vez em um duelo.", attack: "Impacto Carmesim", attackDescription: "Se derrotar um inimigo, Jaden pode atacar novamente uma unidade do oponente ou atacá-lo diretamente.", category: "Fire Ultimate Elemental user", }, { id: "arthur-lr", name: "Rei Arthur", image: "/images/arthur-20lr.png", rarity: "LR", type: "ultimateGuardian", element: "Darkus", dp: 4, ability: "O Preço da Coroa", abilityDescription: "Unidades inimigas com 5 ou 6 de DP, não podem declarar ataque contra ele. Quando essa carta for jogada, você tem a opção de comprar uma carta.", attack: "Cálice do Monarca", attackDescription: "Antes de declarar um ataque, você pode escolher descartar uma carta da sua mão, caso descarte, você pode escolher duas unidades do oponente como alvo, e destruí-las. Se a carta que você descartou foi uma magia, essa unidade ganha +2DP. Esse efeito só pode ser usado a cada 2 turnos.", category: "Darkness Ultimate Guardian user", requiresEquip: "MEFISTO", }, { id: "arthur-ur", name: "Rei Arthur", image: "/images/arthur-20ur.png", rarity: "UR", type: "ultimateGuardian", element: "Darkus", dp: 3, ability: "Presença Esmagadora", abilityDescription: "Unidades inimigas com 3 ou 4 de DP, não podem declarar ataque contra ele.", attack: "Veredito do Rei Tirano", attackDescription: "Antes de declarar um ataque, você pode escolher descartar uma carta da sua mão, caso descarte, você pode escolher uma unidade do oponente como alvo, e destruí-la. Esse efeito só pode ser usado a cada 2 turnos.", category: "Darkness Ultimate Guardian user", }, { id: "arthur-sr", name: "Rei Arthur", image: "/images/arthur-20sr.png", rarity: "SR", type: "ultimateElemental", element: "Darkus", dp: 2, ability: "Soberania das Sombras", abilityDescription: "Enquanto essa carta estiver no campo, seu oponente não pode ativar cartas com efeitos de 'Cura'.", attack: "Eclipse de Avalon", attackDescription: "Se esse ataque derrotar uma unidade, cause 3 DP de dano direto adicional ao oponente.", category: "Darkness Ultimate Elemental user", }, { id: "galahad-r", name: "Santo Graal: Galahad", image: "/images/galahad-20r.png", rarity: "R", type: "unit", element: "Haos", dp: 1, ability: "Coração Imaculado", abilityDescription: "Enquanto estiver em campo, Galahad não pode ser destruído por cartas do oponente, exceto se unidades do oponente forem ataca-lo.", attack: "Lâmina da Pureza", category: "Lightness Troops unit", }, { id: "fehnon-ur", name: "Fehnon Hoskie", image: "/images/fehnon-20ur.png", rarity: "UR", type: "ultimateGear", element: "Aquos", dp: 3, ability: "Singularidade Zero", abilityDescription: "Ruptura: Enquanto este card estiver equipado com UG: Protonix Sword, ele pode realizar até dois ataques durante cada Fase de Batalha. Sempre que este personagem destruir uma unidade do oponente em batalha, ele recebe +2 DP até o final do turno.", attack: "Ordem de Laceração", attackDescription: "Ao declarar um ataque: compre 1 card. Se for uma Unidade, este personagem pode atacar novamente e o oponente não pode ativar efeitos em resposta a este ataque.", category: "Aquos Ultimate Gear user", }, { id: "fehnon-sr", name: "Fehnon Hoskie", image: "/images/fehnon-20sr.png", rarity: "SR", type: "ultimateGear", element: "Aquos", dp: 2, ability: "Fluxo de Ruptura", abilityDescription: "Quando ele derrota em batalha uma unidade do oponente, cause 2DP como dano extra na vida do oponente por unidade derrotada, essa habilidade pode ser ativada toda vez que ele derrotar uma unidade do oponente.", attack: "Laceração", attackDescription: "Quando ele ataca, tanto uma unidade do oponente, quanto diretamente, compre uma carta, se for uma carta de unidade, ele pode atacar novamente.", category: "Aquos Ultimate Gear user", }, { id: "bandagens-duplas", name: "Bandagens Duplas", image: "/images/bandagens-duplas.png", rarity: "R", type: "item", element: "Haos", dp: 0, ability: "Cura", abilityDescription: "Essa carta cura 4LP do jogador de dano já sofrido.", attack: "", category: "Item Funcion Card", }, { id: "bandagem-restauradora", name: "Bandagem Restauradora", image: "/images/bandagem-restauradora.png", rarity: "R", type: "item", element: "Haos", dp: 0, ability: "Cura", abilityDescription: "Essa carta cura 2LP do jogador de dano já sofrido.", attack: "", category: "Item Funcion Card", }, { id: "cristal-recuperador", name: "Cristal Recuperador", image: "/images/cristal-recuperador.png", rarity: "R", type: "item", element: "Haos", dp: 0, ability: "Cura Avançada", abilityDescription: "Essa carta cura 3LP do jogador de dano já sofrido, em seguida compre uma carta, se for de Funcion, ela cura +1DP do jogador.", attack: "", category: "Item Funcion Card", }, { id: "dados-elementais-alpha", name: "Dados Elementais Alpha", image: "/images/dados-elementais-alpha.png", rarity: "SR", type: "item", element: "Darkus", dp: 0, ability: "Rolagem Elemental", abilityDescription: "Jogue um dado (efeito bônus se for do elemento específico): 1-2: uma unidade sua ganha +3DP. Se for (Darkness): compre +1 carta. 3-4: uma unidade sua ganha +4DP. Se for (Fire): você ganha +2LP. 5-6: uma unidade sua ganha +5DP. Se for (Aquos): você ganha +3LP. Requer uma carta de unidade dos elementos (Darkness, Fire ou Aquos). Se você tiver e não cair no elemento da sua unidade, essa carta não faz nada.", attack: "", category: "Item Funcion Card", }, { id: "dados-elementais-omega", name: "Dados Elementais Omega", image: "/images/dados-elementais-omega.png", rarity: "SR", type: "item", element: "Haos", dp: 0, ability: "Rolagem Elemental", abilityDescription: "Jogue um dado (efeito bônus se for do elemento específico): 1-2: uma unidade sua ganha +3DP. Se for (Neutral): compre +1 carta. 3-4: uma unidade sua ganha +4DP. Se for (Lightness): você ganha +2LP. 5-6: uma unidade sua ganha +5DP e você ganha +3LP. Requer uma carta de unidade dos elementos (Neutral, Lightness ou Ventus). Se você tiver e não cair no elemento da sua unidade, nada acontece.", attack: "", category: "Item Funcion Card", }, { id: "dados-da-calamidade", name: "Dados da Calamidade", image: "/images/dados-da-calamidade.png", rarity: "UR", type: "item", element: "Darkus", dp: 0, ability: "Risco e Recompensa", abilityDescription: "Jogue um dado: se cair em 1-2: uma unidade sua perde -5DP. 3-4: nada acontece. 5-6: uma unidade sua ganha +8DP, mas após 2 turnos -5DP.", attack: "", category: "Item Funcion Card", }, { id: "dados-da-fortuna", name: "Dados da Fortuna", image: "/images/dados-da-fortuna.png", rarity: "R", type: "item", element: "Ventus", dp: 0, ability: "Sorte", abilityDescription: "Jogue um dado: 1-2: uma unidade sua ganha +1DP. 3-4: uma unidade sua ganha +2DP, e compre 1 carta. 5-6: uma unidade sua ganha +3DP e compre 2 cartas.", attack: "", category: "Item Funcion Card", }, { id: "amplificador-de-poder", name: "Amplificador de Poder", image: "/images/amplificador-de-poder.png", rarity: "SR", type: "item", element: "Pyrus", dp: 0, ability: "Absorção de Poder", abilityDescription: "Selecione uma carta de unidade no campo do oponente, o DP Original dela é somada ao DP total de alguma carta ativa no campo do jogador.", attack: "", category: "Item Funcion Card", }, { id: "cauda-de-dragao-assada", name: "Cauda de Dragão Assada", image: "/images/cauda-de-dragao-assada.png", rarity: "R", type: "item", element: "Pyrus", dp: 0, ability: "Banquete", abilityDescription: "Se você tiver 2 ou mais cartas de unidade em seu campo, todas essas unidades ganham +1DP, e você ganha +2LP total.", attack: "", category: "Item Funcion Card", }, { id: "adaga-energizada", name: "Adaga Energizada", image: "/images/adaga-energizada.png", rarity: "SR", type: "item", element: "Pyrus", dp: 0, ability: "Dano Direto", abilityDescription: "Se o oponente tiver duas cartas de unidades no campo dele, cause 4DP diretamente aos LP dele.", attack: "", category: "Item Funcion Card", }, ] export function GameProvider({ children }: { children: ReactNode }) { const [coins, setCoins] = useState(999) const [collection, setCollection] = useState([]) const [decks, setDecks] = useState([]) const [matchHistory, setMatchHistory] = useState([]) // Load saved data from localStorage on mount useEffect(() => { const savedCoins = localStorage.getItem("gearperks-coins") const savedCollection = localStorage.getItem("gearperks-collection") const savedDecks = localStorage.getItem("gearperks-decks") const savedHistory = localStorage.getItem("gearperks-history") if (savedCoins) setCoins(Number.parseInt(savedCoins)) if (savedCollection) setCollection(JSON.parse(savedCollection)) if (savedDecks) setDecks(JSON.parse(savedDecks)) if (savedHistory) setMatchHistory(JSON.parse(savedHistory)) }, []) // Save to localStorage when data changes useEffect(() => { localStorage.setItem("gearperks-coins", coins.toString()) }, [coins]) useEffect(() => { localStorage.setItem("gearperks-collection", JSON.stringify(collection)) }, [collection]) useEffect(() => { localStorage.setItem("gearperks-decks", JSON.stringify(decks)) }, [decks]) useEffect(() => { localStorage.setItem("gearperks-history", JSON.stringify(matchHistory)) }, [matchHistory]) const addToCollection = (cards: Card[]) => { setCollection((prev) => [...prev, ...cards]) } const saveDeck = (deck: Deck) => { setDecks((prev) => { const existingIndex = prev.findIndex((d) => d.id === deck.id) if (existingIndex >= 0) { const updated = [...prev] updated[existingIndex] = deck return updated } return [...prev, deck] }) } const deleteDeck = (deckId: string) => { setDecks((prev) => prev.filter((d) => d.id !== deckId)) } const addMatchRecord = (record: MatchRecord) => { setMatchHistory((prev) => [record, ...prev]) } return ( {children} ) } export function useGame() { const context = useContext(GameContext) if (!context) { throw new Error("useGame must be used within GameProvider") } return context } [V0_FILE]typescriptreact:file="contexts/language-context.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" type Language = "pt" | "en" | "ja" interface Translations { [key: string]: { pt: string en: string ja: string } } const translations: Translations = { // Menu play: { pt: "JOGAR", en: "PLAY", ja: "プレイ" }, vsBot: { pt: "VS BOT", en: "VS BOT", ja: "VS BOT" }, vsPlayer: { pt: "VS JOGADOR", en: "VS PLAYER", ja: "VS プレイヤー" }, createRoom: { pt: "CRIAR SALA", en: "CREATE ROOM", ja: "ルーム作成" }, joinRoom: { pt: "ENTRAR NA SALA", en: "JOIN ROOM", ja: "ルーム参加" }, gacha: { pt: "GACHA", en: "GACHA", ja: "ガチャ" }, collection: { pt: "COLEÇÃO", en: "COLLECTION", ja: "コレクション" }, deckBuilder: { pt: "CONSTRUIR DECK", en: "BUILD DECK", ja: "デッキ構築" }, history: { pt: "HISTÓRICO", en: "HISTORY", ja: "履歴" }, settings: { pt: "CONFIGURAÇÕES", en: "SETTINGS", ja: "設定" }, back: { pt: "VOLTAR", en: "BACK", ja: "戻る" }, // Gacha gacha1: { pt: "GACHA x1", en: "GACHA x1", ja: "ガチャ x1" }, gacha10: { pt: "GACHA x10", en: "GACHA x10", ja: "ガチャ x10" }, coins: { pt: "Moedas", en: "Coins", ja: "コイン" }, packOpening: { pt: "Abrindo Pack...", en: "Opening Pack...", ja: "パック開封中..." }, // Collection filterByName: { pt: "Filtrar por nome", en: "Filter by name", ja: "名前でフィルター" }, ascending: { pt: "Crescente", en: "Ascending", ja: "昇順" }, descending: { pt: "Decrescente", en: "Descending", ja: "降順" }, allRarities: { pt: "Todas Raridades", en: "All Rarities", ja: "全レアリティ" }, allTypes: { pt: "Todos Tipos", en: "All Types", ja: "全タイプ" }, unit: { pt: "Unidade", en: "Unit", ja: "ユニット" }, magic: { pt: "Magia", en: "Magic", ja: "魔法" }, action: { pt: "Action", en: "Action", ja: "アクション" }, ultimateGear: { pt: "Ultimate Gear", en: "Ultimate Gear", ja: "アルティメットギア" }, item: { pt: "Item", en: "Item", ja: "アイテム" }, // Deck Builder newDeck: { pt: "Novo Deck", en: "New Deck", ja: "新しいデッキ" }, saveDeck: { pt: "Salvar Deck", en: "Save Deck", ja: "デッキ保存" }, deleteDeck: { pt: "Deletar Deck", en: "Delete Deck", ja: "デッキ削除" }, deckName: { pt: "Nome do Deck", en: "Deck Name", ja: "デッキ名" }, cards: { pt: "cartas", en: "cards", ja: "枚" }, minCards: { pt: "Mínimo 10 cartas", en: "Minimum 10 cards", ja: "最低10枚" }, maxCards: { pt: "Máximo 20 cartas", en: "Maximum 20 cards", ja: "最大20枚" }, maxCopies: { pt: "Máximo 4 cópias por carta", en: "Maximum 4 copies per card", ja: "カード毎に最大4枚" }, // Duel yourTurn: { pt: "SEU TURNO", en: "YOUR TURN", ja: "あなたのターン" }, enemyTurn: { pt: "TURNO INIMIGO", en: "ENEMY TURN", ja: "敵のターン" }, drawPhase: { pt: "Fase de Compra", en: "Draw Phase", ja: "ドローフェイズ" }, mainPhase: { pt: "Fase Principal", en: "Main Phase", ja: "メインフェイズ" }, battlePhase: { pt: "Fase de Batalha", en: "Battle Phase", ja: "バトルフェイズ" }, endPhase: { pt: "Fase Final", en: "End Phase", ja: "エンドフェイズ" }, endTurn: { pt: "Finalizar Turno", en: "End Turn", ja: "ターン終了" }, surrender: { pt: "Desistir", en: "Surrender", ja: "降参" }, victory: { pt: "VITÓRIA!", en: "VICTORY!", ja: "勝利！" }, defeat: { pt: "DERROTA!", en: "DEFEAT!", ja: "敗北！" }, life: { pt: "VIDA", en: "LIFE", ja: "ライフ" }, turn: { pt: "Turno", en: "Turn", ja: "ターン" }, hand: { pt: "Mão", en: "Hand", ja: "手札" }, deck: { pt: "Deck", en: "Deck", ja: "デッキ" }, graveyard: { pt: "Cemitério", en: "Graveyard", ja: "墓地" }, unitZone: { pt: "Zona de Unidades", en: "Unit Zone", ja: "ユニットゾーン" }, functionZone: { pt: "Zona de Funções", en: "Function Zone", ja: "ファンクションゾーン" }, phase: { pt: "Fase", en: "Phase", ja: "フェイズ" }, drawCard: { pt: "Comprar Carta", en: "Draw Card", ja: "カードを引く" }, toBattle: { pt: "Ir para Batalha", en: "Go to Battle", ja: "バトルへ" }, dragToAttack: { pt: "Arraste!", en: "Drag!", ja: "ドラッグ!" }, canAttackTurn: { pt: "Ataca no turno", en: "Attacks on turn", ja: "ターンに攻撃" }, // History matchHistory: { pt: "Histórico de Partidas", en: "Match History", ja: "対戦履歴" }, won: { pt: "Vitória", en: "Won", ja: "勝利" }, lost: { pt: "Derrota", en: "Lost", ja: "敗北" }, vsBot2: { pt: "vs Bot", en: "vs Bot", ja: "vs Bot" }, vsPlayer2: { pt: "vs Jogador", en: "vs Player", ja: "vs プレイヤー" }, // Settings language: { pt: "Idioma", en: "Language", ja: "言語" }, portuguese: { pt: "Português", en: "Portuguese", ja: "ポルトガル語" }, english: { pt: "Inglês", en: "English", ja: "英語" }, japanese: { pt: "Japonês", en: "Japanese", ja: "日本語" }, // Room roomCode: { pt: "Código da Sala", en: "Room Code", ja: "ルームコード" }, enterCode: { pt: "Digite o código", en: "Enter code", ja: "コードを入力" }, waiting: { pt: "Aguardando oponente...", en: "Waiting for opponent...", ja: "対戦相手を待っています..." }, join: { pt: "Entrar", en: "Join", ja: "参加" }, create: { pt: "Criar", en: "Create", ja: "作成" }, } interface LanguageContextType { language: Language setLanguage: (lang: Language) => void t: (key: string) => string } const LanguageContext = createContext(undefined) export function LanguageProvider({ children }: { children: ReactNode }) { const [language, setLanguage] = useState("pt") const t = (key: string): string => { return translations[key]?.[language] || key } return {children} } export function useLanguage() { const context = useContext(LanguageContext) if (!context) { throw new Error("useLanguage must be used within LanguageProvider") } return context } [V0_FILE]typescriptreact:file="components/game/duel-screen.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import type { Deck as GameDeck, Card as GameCard } from "@/contexts/game-context" import { useState, useEffect, useRef, useCallback } from "react" import { useLanguage } from "@/contexts/language-context" import { useGame } from "@/contexts/game-context" import { Button } from "@/components/ui/button" import { ArrowLeft, Swords } from "lucide-react" import Image from "next/image" interface DuelScreenProps { mode: "bot" | "player" onBack: () => void } type Phase = "draw" | "main" | "battle" | "end" interface FieldCard extends GameCard { currentDp: number canAttack: boolean hasAttacked: boolean canAttackTurn?: number // Added for the new logic } interface FieldState { unitZone: (FieldCard | null)[] functionZone: (GameCard | null)[] equipZone: GameCard | null hand: GameCard[] deck: GameCard[] graveyard: GameCard[] life: number } interface AttackState { isAttacking: boolean attackerIndex: number | null targetInfo?: { type: "unit" | "direct"; index?: number } | null // Changed to targetInfo } export default function DuelScreen({ mode, onBack }: DuelScreenProps) { const { t } = useLanguage() const { decks, addMatchRecord } = useGame() const [selectedDeck, setSelectedDeck] = useState(null) const [gameStarted, setGameStarted] = useState(false) const [turn, setTurn] = useState(1) const [phase, setPhase] = useState("draw") const [isPlayerTurn, setIsPlayerTurn] = useState(true) const [playerWentFirst, setPlayerWentFirst] = useState(true) const [playerField, setPlayerField] = useState({ unitZone: [null, null, null, null], functionZone: [null, null, null, null], equipZone: null, hand: [], deck: [], graveyard: [], life: 20, }) const [enemyField, setEnemyField] = useState({ unitZone: [null, null, null, null], functionZone: [null, null, null, null], equipZone: null, hand: [], deck: [], graveyard: [], life: 20, }) const [selectedHandCard, setSelectedHandCard] = useState(null) const [gameResult, setGameResult] = useState<"won" | "lost" | null>(null) const [attackState, setAttackState] = useState({ isAttacking: false, attackerIndex: null, targetInfo: null, // Initialize targetInfo }) const [attackTarget, setAttackTarget] = useState<{ type: "direct" | "unit"; index?: number } | null>(null) const [itemSelectionMode, setItemSelectionMode] = useState<{ active: boolean itemCard: GameCard | null step: "selectEnemy" | "selectAlly" selectedEnemyIndex: number | null }>({ active: false, itemCard: null, step: "selectEnemy", selectedEnemyIndex: null }) const [arrowPos, setArrowPos] = useState({ x1: 0, y1: 0, x2: 0, y2: 0 }) const positionRef = useRef({ startX: 0, startY: 0, currentX: 0, currentY: 0 }) const arrowRef = useRef(null) const rafRef = useRef(null) const fieldRef = useRef(null) const enemyUnitRectsRef = useRef([]) const isDraggingRef = useRef(false) // Track drag state const playerCardsRef = useRef<(HTMLDivElement | null)[]>([]) // Added for player unit zone refs const canPlayerAttack = () => { if (phase !== "battle") return false if (playerWentFirst) { return turn >= 3 } else { return turn >= 2 } } const isUnitCard = (card: GameCard) => { return ( card.type === "unit" || card.type === "ultimateGear" || card.type === "ultimateElemental" || card.type === "ultimateGuardian" || card.type === "troops" ) } const hasReachedAttackTurn = (unit: FieldCard) => { // Unit must wait until the turn AFTER it was placed to attack // canAttackTurn stores the turn the unit was placed // So unit can attack when current turn > canAttackTurn return turn > unit.canAttackTurn } const cacheEnemyRects = useCallback(() => { const enemyUnitElements = document.querySelectorAll("[data-enemy-unit]") enemyUnitRectsRef.current = Array.from(enemyUnitElements).map((el) => el.getBoundingClientRect()) }, []) const startGame = (deck: GameDeck) => { setSelectedDeck(deck) const playerFirst = Math.random() > 0.5 setPlayerWentFirst(playerFirst) const shuffledDeck = [...deck.cards].sort(() => Math.random() - 0.5) const hand = shuffledDeck.slice(0, 5) const remainingDeck = shuffledDeck.slice(5) setPlayerField((prev) => ({ ...prev, hand, deck: remainingDeck, life: 20, unitZone: [null, null, null, null], functionZone: [null, null, null, null], graveyard: [], })) const botDeck = [...deck.cards].sort(() => Math.random() - 0.5) const botHand = botDeck.slice(0, 5) const botRemaining = botDeck.slice(5) setEnemyField((prev) => ({ ...prev, hand: botHand, deck: botRemaining, life: 20, unitZone: [null, null, null, null], functionZone: [null, null, null, null], graveyard: [], })) setGameStarted(true) setTurn(1) setPhase("draw") setIsPlayerTurn(playerFirst) if (!playerFirst) { setTimeout(() => executeBotTurn(), 1000) } } const drawCard = () => { if (playerField.deck.length === 0) return const drawnCard = playerField.deck[0] setPlayerField((prev) => ({ ...prev, hand: [...prev.hand, drawnCard], deck: prev.deck.slice(1), })) setPhase("main") } const placeCard = (zoneType: "unit" | "function", slotIndex: number) => { if (!isPlayerTurn) return if (phase !== "main") return if (selectedHandCard === null) return const card = playerField.hand[selectedHandCard] if (!card) return const cardIsUnit = isUnitCard(card) if (zoneType === "unit" && !cardIsUnit) return if (zoneType === "function" && cardIsUnit) return if (zoneType === "unit") { if (playerField.unitZone[slotIndex] !== null) return const fieldCard: FieldCard = { ...card, currentDp: card.dp, canAttack: false, hasAttacked: false, canAttackTurn: turn, // Store the turn when placed, can attack on turn > this } setPlayerField((prev) => { const newUnitZone = [...prev.unitZone] newUnitZone[slotIndex] = fieldCard return { ...prev, unitZone: newUnitZone, hand: prev.hand.filter((_, i) => i !== selectedHandCard), } }) } else { if (playerField.functionZone[slotIndex] !== null) return if (card.id === "amplificador-de-poder") { const hasEnemyUnits = enemyField.unitZone.some((u) => u !== null) const hasPlayerUnits = playerField.unitZone.some((u) => u !== null) if (hasEnemyUnits && hasPlayerUnits) { setItemSelectionMode({ active: true, itemCard: card, step: "selectEnemy", selectedEnemyIndex: null, }) setPlayerField((prev) => ({ ...prev, hand: prev.hand.filter((_, i) => i !== selectedHandCard), })) setSelectedHandCard(null) return } } setPlayerField((prev) => { const newFunctionZone = [...prev.functionZone] newFunctionZone[slotIndex] = card return { ...prev, functionZone: newFunctionZone, hand: prev.hand.filter((_, i) => i !== selectedHandCard), } }) } setSelectedHandCard(null) } const advancePhase = () => { if (!isPlayerTurn) return if (phase === "draw") { // Compra uma carta automaticamente ao sair da fase de draw if (playerField.deck.length > 0) { const drawnCard = playerField.deck[0] setPlayerField((prev) => ({ ...prev, hand: [...prev.hand, drawnCard], deck: prev.deck.slice(1), })) } setPhase("main") } else if (phase === "main") { setPhase("battle") } else if (phase === "battle") { endTurn() } } const handleAttackStart = useCallback( (index: number, e: React.MouseEvent | React.TouchEvent) => { if (!isPlayerTurn || phase !== "battle") return // Only allow attack in battle phase const unit = playerField.unitZone[index] // Check if unit exists, hasn't attacked, and can attack in the current turn if (!unit || unit.hasAttacked || !unit.canAttack || !hasReachedAttackTurn(unit)) return e.preventDefault() e.stopPropagation() const clientX = "touches" in e ? e.touches[0].clientX : e.clientX const clientY = "touches" in e ? e.touches[0].clientY : e.clientY isDraggingRef.current = true // Start dragging positionRef.current = { startX: clientX, startY: clientY, currentX: clientX, currentY: clientY, } // Cache enemy unit positions once at start cacheEnemyRects() setArrowPos({ x1: clientX, y1: clientY, x2: clientX, y2: clientY }) setAttackState({ isAttacking: true, attackerIndex: index, targetInfo: null, // Reset targetInfo at the start of a drag }) }, [isPlayerTurn, phase, playerField.unitZone, cacheEnemyRects], ) const handleAttackMove = useCallback( (e: React.MouseEvent | React.TouchEvent) => { if (!isDraggingRef.current || !attackState.isAttacking) return // Only move if dragging and attacking e.preventDefault() const clientX = "touches" in e ? e.touches[0].clientX : e.clientX const clientY = "touches" in e ? e.touches[0].clientY : e.clientY // Update arrow position directly via ref for smoother animation if (rafRef.current) { cancelAnimationFrame(rafRef.current) } rafRef.current = requestAnimationFrame(() => { setArrowPos((prev) => ({ ...prev, x2: clientX, y2: clientY })) // Update arrow endpoint // Check for target hit const fieldRect = fieldRef.current?.getBoundingClientRect() if (!fieldRect) return const relativeY = clientY - fieldRect.top let foundTarget: { type: "unit" | "direct"; index?: number } | null = null // Prioritize attacking enemy units first if (relativeY < fieldRect.height / 2) { // Check only upper half of the field for units for (let idx = 0; idx < enemyUnitRectsRef.current.length; idx++) { const rect = enemyUnitRectsRef.current[idx] if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) { if (enemyField.unitZone[idx]) { // Ensure there's a unit at this index foundTarget = { type: "unit", index: idx } break // Found a unit, stop searching } } } // If no unit is targeted, check for direct attack if no enemy units are on the field if (!foundTarget) { const hasEnemyUnits = enemyField.unitZone.some((u) => u !== null) if (!hasEnemyUnits) { // Check direct attack zone if it's within range (simplified check) // In a real scenario, you'd want to check the bounds of the direct attack zone foundTarget = { type: "direct" } } } } setAttackState((prev) => ({ ...prev, targetInfo: foundTarget })) // Update the target info in attackState }) }, [attackState.isAttacking, enemyField.unitZone, setAttackState], ) const handleAttackEnd = useCallback(() => { if (!isDraggingRef.current) return // Only proceed if dragging was initiated isDraggingRef.current = false // Reset dragging state if (rafRef.current) { cancelAnimationFrame(rafRef.current) // Stop the animation frame rafRef.current = null } if (attackState.isAttacking && attackState.attackerIndex !== null && attackState.targetInfo) { const attacker = playerField.unitZone[attackState.attackerIndex] if (attacker) { if (attackState.targetInfo.type === "unit" && attackState.targetInfo.index !== undefined) { // Attack an enemy unit const defender = enemyField.unitZone[attackState.targetInfo.index] if (defender) { const attackerDp = attacker.currentDp || attacker.dp const defenderDp = defender.currentDp || defender.dp const newDefenderDp = defenderDp - attackerDp setEnemyField((prev) => { const newUnitZone = [...prev.unitZone] const newGraveyard = [...prev.graveyard] if (newDefenderDp <= 0) { // Defender is defeated newGraveyard.push(defender) newUnitZone[attackState.targetInfo!.index!] = null } else { newUnitZone[attackState.targetInfo!.index!] = { ...defender, currentDp: newDefenderDp } } return { ...prev, unitZone: newUnitZone, graveyard: newGraveyard } }) setPlayerField((prev) => { const newUnitZone = [...prev.unitZone] newUnitZone[attackState.attackerIndex!] = { ...attacker, hasAttacked: true } return { ...prev, unitZone: newUnitZone } }) } } else if (attackState.targetInfo.type === "direct") { // Direct attack to opponent's Life Points setEnemyField((prev) => ({ ...prev, life: prev.life - (attacker.currentDp || attacker.dp), // Reduce life by attacker's DP })) setPlayerField((prev) => { const newUnitZone = [...prev.unitZone] // Mark attacker as having attacked newUnitZone[attackState.attackerIndex!] = { ...attacker, hasAttacked: true } return { ...prev, unitZone: newUnitZone } }) } } } // Reset attack state regardless of whether an attack was successful setAttackState({ isAttacking: false, attackerIndex: null, targetInfo: null }) }, [attackState, playerField.unitZone, enemyField.unitZone]) // Cleanup on unmount useEffect(() => { return () => { if (rafRef.current) { cancelAnimationFrame(rafRef.current) } } }, []) const executeBotTurn = () => { if (enemyField.deck.length > 0) { setEnemyField((prev) => ({ ...prev, hand: [...prev.hand, prev.deck[0]], deck: prev.deck.slice(1), })) } setTimeout(() => { setEnemyField((prev) => { let newHand = [...prev.hand] const newUnitZone = [...prev.unitZone] const newFunctionZone = [...prev.functionZone] for (let i = newHand.length - 1; i >= 0; i--) { const card = newHand[i] if (card && isUnitCard(card)) { const emptySlot = newUnitZone.findIndex((s) => s === null) if (emptySlot !== -1) { newUnitZone[emptySlot] = { ...card, currentDp: card.dp, canAttack: false, hasAttacked: false, canAttackTurn: turn, } newHand.splice(i, 1) } } } for (let i = newHand.length - 1; i >= 0; i--) { const card = newHand[i] if (card && !isUnitCard(card)) { const emptySlot = newFunctionZone.findIndex((s) => s === null) if (emptySlot !== -1) { newFunctionZone[emptySlot] = card newHand = newHand.filter((_, idx) => idx !== i) } } } return { ...prev, hand: newHand, unitZone: newUnitZone as (FieldCard | null)[], functionZone: newFunctionZone, } }) setTimeout(() => { const botCanAttack = playerWentFirst ? turn >= 2 : turn >= 3 // Simplified bot attack condition if (botCanAttack) { setEnemyField((prevEnemy) => { const newEnemyUnitZone = [...prevEnemy.unitZone] const newEnemyGraveyard = [...prevEnemy.graveyard] newEnemyUnitZone.forEach((unit, unitIdx) => { if (unit && !unit.hasAttacked) { const playerUnitIndex = playerField.unitZone.findIndex((u) => u !== null) if (playerUnitIndex !== -1) { const defender = playerField.unitZone[playerUnitIndex] as FieldCard const defenderDp = defender.currentDp const attackerDp = unit.currentDp const newDefenderDp = defenderDp - attackerDp const newAttackerDp = attackerDp - defenderDp setPlayerField((prevPlayer) => { const newPlayerUnitZone = [...prevPlayer.unitZone] const newPlayerGraveyard = [...prevPlayer.graveyard] if (newDefenderDp <= 0) { newPlayerGraveyard.push(defender) newPlayerUnitZone[playerUnitIndex] = null } else { newPlayerUnitZone[playerUnitIndex] = { ...defender, currentDp: newDefenderDp } } return { ...prevPlayer, unitZone: newPlayerUnitZone, graveyard: newPlayerGraveyard, } }) if (newAttackerDp <= 0) { newEnemyGraveyard.push(unit) newEnemyUnitZone[unitIdx] = null } else { newEnemyUnitZone[unitIdx] = { ...unit, currentDp: newAttackerDp, hasAttacked: true } } } else { setPlayerField((prevPlayer) => ({ ...prevPlayer, life: Math.max(0, prevPlayer.life - unit.currentDp), })) newEnemyUnitZone[unitIdx] = { ...unit, hasAttacked: true } } } }) return { ...prevEnemy, unitZone: newEnemyUnitZone as (FieldCard | null)[], graveyard: newEnemyGraveyard, } }) } setTimeout(() => { setTurn((prev) => prev + 1) setPhase("draw") setIsPlayerTurn(true) // Reset attack status and enable attacking for units that can now attack setPlayerField((prev) => ({ ...prev, unitZone: prev.unitZone.map((unit) => unit ? { ...unit, hasAttacked: false, canAttack: hasReachedAttackTurn(unit) } : null, ), })) setEnemyField((prev) => ({ // Also reset enemy units for the next turn if it becomes their turn ...prev, unitZone: prev.unitZone.map((unit) => (unit ? { ...unit, hasAttacked: false, canAttack: true } : null)), })) }, 500) }, 800) }, 500) } const endTurn = () => { setPhase("end") setPlayerField((prev) => ({ ...prev, unitZone: prev.unitZone.map((unit) => (unit ? { ...unit, hasAttacked: false } : null)), })) setTimeout(() => { const nextTurn = turn + 1 setTurn(nextTurn) setIsPlayerTurn(false) setPhase("draw") setEnemyField((prev) => ({ ...prev, unitZone: prev.unitZone.map((unit) => unit ? { ...unit, hasAttacked: false, canAttack: nextTurn > unit.canAttackTurn } : null, ), })) if (mode === "bot") { setTimeout(() => executeBotTurn(), 1000) } }, 500) } const endEnemyTurn = () => { setPhase("end") setEnemyField((prev) => ({ ...prev, unitZone: prev.unitZone.map((unit) => (unit ? { ...unit, hasAttacked: false } : null)), })) setTimeout(() => { const nextTurn = turn + 1 setTurn(nextTurn) setIsPlayerTurn(true) setPhase("draw") setPlayerField((prev) => ({ ...prev, unitZone: prev.unitZone.map((unit) => unit ? { ...unit, hasAttacked: false, canAttack: nextTurn > unit.canAttackTurn } : null, ), })) }, 500) } const surrender = () => { setGameResult("lost") addMatchRecord({ id: `match-${Date.now()}`, date: new Date().toISOString(), opponent: mode === "bot" ? "Bot" : "Player", mode, result: "lost", deckUsed: selectedDeck?.name || "Unknown", }) } const handleEnemyUnitSelect = (index: number) => { if (!itemSelectionMode.active || itemSelectionMode.step !== "selectEnemy") return const enemyUnit = enemyField.unitZone[index] if (!enemyUnit) return console.log("[v0] Selected enemy unit at index", index, "with DP:", enemyUnit.dp) setItemSelectionMode((prev) => ({ ...prev, step: "selectAlly", selectedEnemyIndex: index, })) } const handleAllyUnitSelect = (index: number) => { if (!itemSelectionMode.active || itemSelectionMode.step !== "selectAlly") return if (itemSelectionMode.selectedEnemyIndex === null) return const enemyUnit = enemyField.unitZone[itemSelectionMode.selectedEnemyIndex] const allyUnit = playerField.unitZone[index] if (!enemyUnit || !allyUnit) return const dpBonus = enemyUnit.dp console.log("[v0] Applying", dpBonus, "DP bonus to ally unit at index", index) setPlayerField((prev) => { const newUnitZone = [...prev.unitZone] if (newUnitZone[index]) { newUnitZone[index] = { ...newUnitZone[index]!, currentDp: (newUnitZone[index]!.currentDp || newUnitZone[index]!.dp) + dpBonus, } } const newGraveyard = [...prev.graveyard] if (itemSelectionMode.itemCard) { newGraveyard.push(itemSelectionMode.itemCard) } return { ...prev, unitZone: newUnitZone, graveyard: newGraveyard, } }) setItemSelectionMode({ active: false, itemCard: null, step: "selectEnemy", selectedEnemyIndex: null }) } const cancelItemSelection = () => { if (itemSelectionMode.itemCard) { setPlayerField((prev) => ({ ...prev, hand: [...prev.hand, itemSelectionMode.itemCard!], })) } setItemSelectionMode({ active: false, itemCard: null, step: "selectEnemy", selectedEnemyIndex: null }) } useEffect(() => { if (!gameStarted) return if (playerField.life <= 0) { setGameResult("lost") addMatchRecord({ id: `match-${Date.now()}`, date: new Date().toISOString(), opponent: mode === "bot" ? "Bot" : "Player", mode, result: "lost", deckUsed: selectedDeck?.name || "Unknown", }) } else if (enemyField.life <= 0) { setGameResult("won") addMatchRecord({ id: `match-${Date.now()}`, date: new Date().toISOString(), opponent: mode === "bot" ? "Bot" : "Player", mode, result: "won", deckUsed: selectedDeck?.name || "Unknown", }) } }, [playerField.life, enemyField.life, gameStarted, mode, selectedDeck?.name, addMatchRecord]) if (!gameStarted) { return (

{mode === "bot" ? t("vsBot") : t("vsPlayer")}

Selecione um Deck

{decks.length === 0 ? (

Crie um deck primeiro no menu Construir Deck!

) : (

{decks.map((deck) => ( ))}

)}

) } if (gameResult) { return (

{gameResult === "won" ? t("victory") : t("defeat")}

) } return (

{attackState.isAttacking && ( )}

{" "} {/* Added element for phase display */} {t("phase")} {phase === "draw" && t("drawPhase")} {phase === "main" && t("mainPhase")} {phase === "battle" && t("battlePhase")} {phase === "end" && t("endPhase")}

{t("turn")} {turn}

{isPlayerTurn ? t("yourTurn") : t("enemyTurn")}

{t("life")} {enemyField.life}

{enemyField.hand.map((_, i) => (

))}

{enemyField.functionZone.map((card, i) => (

{card && ( {card.name}

)}

))}

{enemyField.unitZone.map((card, i) => (

itemSelectionMode.active && itemSelectionMode.step === "selectEnemy" && handleEnemyUnitSelect(i) } className={`w-14 h-20 bg-red-900/30 border rounded relative overflow-hidden ${ attackTarget?.type === "unit" && attackTarget.index === i ? "border-red-500 ring-2 ring-red-400" : itemSelectionMode.active && itemSelectionMode.step === "selectEnemy" && card ? "border-yellow-500 cursor-pointer hover:bg-yellow-900/30" : "border-red-700/50" }`} > {card && ( <> {card.name}

{(card as FieldCard).currentDp} DP

)}

))}

{enemyField.deck.length}

{enemyField.graveyard.length}

{attackTarget?.type === "direct" ? "ATACAR DIRETAMENTE!" : "Zona de Ataque Direto"}

{phase === "draw" && t("drawPhase")} {phase === "main" && t("mainPhase")} {phase === "battle" && t("battlePhase")} {phase === "end" && t("endPhase")}

{playerField.deck.length}

{playerField.graveyard.length}

{playerField.unitZone.map((card, i) => { const canUnitAttack = card && !card.hasAttacked && card.canAttack && hasReachedAttackTurn(card) && phase === "battle" && isPlayerTurn const turnsUntilAttack = card ? card.canAttackTurn - turn + 1 : 0 const showWaitMessage = card && turnsUntilAttack > 0 return (

{ if (itemSelectionMode.active && itemSelectionMode.step === "selectAlly" && card) { handleAllyUnitSelect(i) } else { placeCard("unit", i) } }} onMouseDown={(e) => canUnitAttack && !itemSelectionMode.active && handleAttackStart(i, e)} onTouchStart={(e) => canUnitAttack && !itemSelectionMode.active && handleAttackStart(i, e)} > {card && ( <> {card.name}

{card.currentDp || card.dp} DP

{canUnitAttack && (

{t("dragToAttack")}

)} {showWaitMessage && (

{t("canAttackTurn")} {card.canAttackTurn + 1}

)} {card.hasAttacked && (

Atacou

)} )}

) })}

{playerField.functionZone.map((card, i) => (

selectedHandCard !== null && placeCard("function", i)} className={`w-12 h-16 bg-purple-900/30 border rounded flex items-center justify-center cursor-pointer transition-colors relative overflow-hidden ${ selectedHandCard !== null && !isUnitCard(playerField.hand[selectedHandCard]) ? "border-green-500 hover:bg-green-900/30" : "border-purple-700/50" }`} > {card && ( {card.name}

)}

))}

{playerField.hand.map((card, i) => (

{ if (isPlayerTurn && phase === "main") { setSelectedHandCard(i === selectedHandCard ? null : i) // Toggle card selection } }} className={`w-12 h-16 border rounded cursor-pointer transition-all relative overflow-hidden flex-shrink-0 ${ selectedHandCard === i ? "border-yellow-500 ring-2 ring-yellow-400 -translate-y-2" // Highlight selected card : "border-slate-600" } ${!isPlayerTurn || phase !== "main" ? "opacity-50 cursor-not-allowed" : ""}`} // Disable if not player's turn or not main phase > {card.name}

))}

{isPlayerTurn && phase === "draw" && ( )} {isPlayerTurn && phase === "main" && ( )} {isPlayerTurn && phase === "battle" && ( )}

{itemSelectionMode.active && (

Amplificador de Poder

{itemSelectionMode.step === "selectEnemy" ? (

Clique em uma unidade INIMIGA para absorver o DP original

) : (

Clique em uma unidade SUA para receber + {enemyField.unitZone[itemSelectionMode.selectedEnemyIndex!]?.dp || 0} DP

)}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This