Dracomania - Arena<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tone\/14.7.77\/Tone.js\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=MedievalSharp&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'MedievalSharp', cursive;\r\n background-image: url('');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: fixed;\r\n }\r\n @keyframes deal-and-flip {\r\n 0% { \r\n transform: translateY(100%) rotateY(180deg); \r\n opacity: 0; \r\n }\r\n 50% { \r\n transform: translateY(0) rotateY(180deg); \r\n opacity: 1; \r\n }\r\n 100% { \r\n transform: translateY(0) rotateY(0deg); \r\n opacity: 1; \r\n }\r\n }\r\n .animate-deal-in {\r\n animation: deal-and-flip 0.7s ease-out forwards;\r\n }\r\n @keyframes bounce-border {\r\n 0% {\r\n box-shadow: none;\r\n border-color: transparent;\r\n }\r\n 50% {\r\n box-shadow: 0 0 30px 10px rgba(250, 204, 21, 0.6);\r\n border-color: #fde047; \/* yellow-300 *\/\r\n }\r\n 100% {\r\n box-shadow: 0 0 20px 5px rgba(250, 204, 21, 0.4);\r\n border-color: #facc15; \/* yellow-400 *\/\r\n }\r\n }\r\n .animate-winner-border {\r\n animation: bounce-border 1.5s ease-out forwards;\r\n }\r\n @keyframes fade-in-text {\r\n 0% { opacity: 0; transform: scale(0.5); }\r\n 100% { opacity: 1; transform: scale(1); }\r\n }\r\n\r\n .animate-winner-text {\r\n animation: fade-in-text 1s ease-out forwards;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"module\">\r\n \/\/ --- SDKs do Firebase ---\r\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-app.js\";\r\n import { getAuth, signInAnonymously } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-auth.js\";\r\n import { getFirestore, collection, addDoc, query, onSnapshot, orderBy, limit } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\r\n\r\n \/\/ Disponibiliza as fun\u00e7\u00f5es do Firebase globalmente para o script Babel poder acess\u00e1-las.\r\n window.firebase = {\r\n initializeApp,\r\n getAuth,\r\n signInAnonymously,\r\n getFirestore,\r\n collection,\r\n addDoc,\r\n query,\r\n onSnapshot,\r\n orderBy,\r\n limit\r\n };\r\n <\/script>\r\n\r\n <script type=\"text\/babel\">\r\n \/\/ ==================================================================\r\n \/\/ CONFIGURA\u00c7\u00c3O DAS CARTAS COM V\u00cdDEO\r\n \/\/ Adicione aqui o n\u00famero de qualquer carta que tenha um v\u00eddeo.\r\n \/\/ ==================================================================\r\n const VIDEO_CARD_NUMBERS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 17, 18, 19, 20, 21, 22, 23, 24, 25, 27, 28, 29, 30, 31, 32];\r\n \/\/ ==================================================================\r\n\r\n \/\/ --- \u00cdcones SVG como Componentes ---\r\n const MagicIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"text-purple-400\"><path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.21 1.21 0 0 0 1.72 0L21.64 5.36a1.21 1.21 0 0 0 0-1.72Z\"><\/path><path d=\"m14 7 3 3\"><\/path><path d=\"M5 6v4\"><\/path><path d=\"M19 14v4\"><\/path><path d=\"M10 2v2\"><\/path><path d=\"M7 8H3\"><\/path><path d=\"M21 16h-4\"><\/path><path d=\"M11 3H9\"><\/path><\/svg>;\r\n const StrengthIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"text-red-500\"><path d=\"M20.83 18.83a4 4 0 0 0-5.66-5.66l-9-9a4 4 0 0 0-5.66 5.66l9 9a4 4 0 0 0 5.66 0Z\"><\/path><path d=\"m18 11 2-2\"><\/path><path d=\"m14 7 2-2\"><\/path><path d=\"m6 15-2 2\"><\/path><path d=\"m10 19-2 2\"><\/path><\/svg>;\r\n const FireIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"text-orange-500\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5Z\"><\/path><\/svg>;\r\n\r\n const cardData = [\r\n { \"nome\": \"Drag\u00e3o Mestre\", \"numero\": 1, \"magia\": 22, \"forca\": 26, \"fogo\": 29, \"color\": \"#FF5733\", \"lore\": \"Um arquidrag\u00e3o que dominou todas as formas de combate. Poucos viram sua f\u00faria e viveram para contar a hist\u00f3ria, tornando-se uma lenda sussurrada em tavernas e cortes reais.\" },\r\n { \"nome\": \"Drag\u00e3o Dourado\", \"numero\": 2, \"magia\": 16, \"forca\": 24, \"fogo\": 28, \"color\": \"#33FF57\", \"lore\": \"T\u00e3o antigo quanto as montanhas, coberto por escamas que valem mais que todos os tesouros dos reis. Dizem que seu bafo n\u00e3o queima, mas transforma tudo em ouro.\" },\r\n { \"nome\": \"Drag\u00e3o Prateado\", \"numero\": 3, \"magia\": 15, \"forca\": 21, \"fogo\": 27, \"color\": \"#3357FF\", \"lore\": \"Uma criatura da lua, que s\u00f3 desce dos c\u00e9us em noites de eclipse. Sua magia \u00e9 tecida com a luz das estrelas, e seu fogo congela em vez de queimar.\" },\r\n { \"nome\": \"Drag\u00e3o Bronze\", \"numero\": 4, \"magia\": 14, \"forca\": 20, \"fogo\": 26, \"color\": \"#FF33F5\", \"lore\": \"Forjado no cora\u00e7\u00e3o de um vulc\u00e3o por deuses ferreiros, seu corpo \u00e9 quase indestrut\u00edvel. Ele dorme em rios de lava, sonhando com batalhas antigas.\" },\r\n { \"nome\": \"Drag\u00e3o Cobre\", \"numero\": 5, \"magia\": 13, \"forca\": 19, \"fogo\": 25, \"color\": \"#33FFF5\", \"lore\": \"Um mestre da ilus\u00e3o e do engano. Suas escamas refletem a paisagem, tornando-o quase invis\u00edvel. Ele ataca quando suas v\u00edtimas est\u00e3o mais confusas.\" },\r\n { \"nome\": \"Drag\u00e3o Branco\", \"numero\": 6, \"magia\": 21, \"forca\": 15, \"fogo\": 22, \"color\": \"#FFBD33\", \"lore\": \"O terror das tundras geladas. Sua presen\u00e7a congela o ar, e sua f\u00faria \u00e9 uma avalanche de gelo e presas.\" },\r\n { \"nome\": \"Drag\u00e3o Negro\", \"numero\": 7, \"magia\": 19, \"forca\": 17, \"fogo\": 24, \"color\": \"#8D33FF\", \"lore\": \"Nascido da escurid\u00e3o entre as estrelas, corrompido por uma magia proibida. Seu fogo \u00e9 uma praga que devora a pr\u00f3pria vida.\" },\r\n { \"nome\": \"Drag\u00e3o Vermelho\", \"numero\": 8, \"magia\": 20, \"forca\": 16, \"fogo\": 23, \"color\": \"#33FFBD\", \"lore\": \"A encarna\u00e7\u00e3o da f\u00faria e da gan\u00e2ncia. Acumula tesouros e incinera qualquer um que ouse cobi\u00e7ar seu ouro.\" },\r\n { \"nome\": \"Drag\u00e3o Azul\", \"numero\": 9, \"magia\": 18, \"forca\": 13, \"fogo\": 21, \"color\": \"#FF338D\", \"lore\": \"Senhor das tempestades, suas asas criam furac\u00f5es e seu rugido \u00e9 o pr\u00f3prio trov\u00e3o. Ele dan\u00e7a entre os raios, intoc\u00e1vel e mortal.\" },\r\n { \"nome\": \"Drag\u00e3o Verde\", \"numero\": 10, \"magia\": 17, \"forca\": 14, \"fogo\": 20, \"color\": \"#BDFF33\", \"lore\": \"Guardi\u00e3o das florestas ancestrais. Seu bafo venenoso pode dissolver a\u00e7o, e as pr\u00f3prias \u00e1rvores se curvam para proteg\u00ea-lo.\" },\r\n { \"nome\": \"Cavaleiro\", \"numero\": 11, \"magia\": 6, \"forca\": 23, \"fogo\": 11, \"color\": \"#8DFF33\", \"lore\": \"Jurou ca\u00e7ar o Drag\u00e3o Negro que destruiu sua vila. Sua armadura foi aben\u00e7oada para resistir ao fogo, mas seu cora\u00e7\u00e3o ainda queima por vingan\u00e7a.\" },\r\n { \"nome\": \"Colosso\", \"numero\": 12, \"magia\": 0, \"forca\": 30, \"fogo\": 0, \"color\": \"#338DFF\", \"lore\": \"Uma est\u00e1tua de guerra animada por uma alma perdida. N\u00e3o sente dor, n\u00e3o conhece o medo. Existe apenas para esmagar.\" },\r\n { \"nome\": \"Feiticeira\", \"numero\": 13, \"magia\": 28, \"forca\": 2, \"fogo\": 19, \"color\": \"#F533FF\", \"lore\": \"Trocou sua humanidade por poder arcano. Seus feiti\u00e7os podem dobrar a realidade, mas cada encantamento cobra um peda\u00e7o de sua alma.\" },\r\n { \"nome\": \"Guerreira\", \"numero\": 14, \"magia\": 5, \"forca\": 22, \"fogo\": 9, \"color\": \"#FF3333\", \"lore\": \"A campe\u00e3 invicta da arena. Luta n\u00e3o por gl\u00f3ria, mas para comprar a liberdade de sua fam\u00edlia, escravizada por um rei tirano.\" },\r\n { \"nome\": \"Guerreiro\", \"numero\": 15, \"magia\": 4, \"forca\": 25, \"fogo\": 8, \"color\": \"#33FF33\", \"lore\": \"Um mercen\u00e1rio cuja \u00fanica lealdade \u00e9 ao ouro. Sua espada j\u00e1 serviu a reis e dem\u00f4nios, e ele n\u00e3o se importa com quem ser\u00e1 o pr\u00f3ximo.\" },\r\n { \"nome\": \"Her\u00f3i\", \"numero\": 16, \"magia\": 12, \"forca\": 27, \"fogo\": 15, \"color\": \"#3333FF\", \"lore\": \"O escolhido de uma profecia antiga, destinado a unir os reinos contra a escurid\u00e3o iminente. Carrega o peso do mundo em seus ombros.\" },\r\n { \"nome\": \"Lobisomem\", \"numero\": 17, \"magia\": 11, \"forca\": 18, \"fogo\": 10, \"color\": \"#FF8D33\", \"lore\": \"Amaldi\u00e7oado pela lua, ele ca\u00e7a nas noites para saciar uma fome que nunca termina. Durante o dia, \u00e9 um homem atormentado pela culpa.\" },\r\n { \"nome\": \"Mago\", \"numero\": 18, \"magia\": 29, \"forca\": 4, \"fogo\": 17, \"color\": \"#33BDFF\", \"lore\": \"Um estudioso das artes arcanas que busca o conhecimento supremo. Ele acredita que a magia \u00e9 a chave para a imortalidade e n\u00e3o hesitar\u00e1 em sacrificar outros para alcan\u00e7\u00e1-la.\" },\r\n { \"nome\": \"Merlin\", \"numero\": 19, \"magia\": 30, \"forca\": 0, \"fogo\": 0, \"color\": \"#8DFFBD\", \"lore\": \"O arquimago que viu o in\u00edcio e ver\u00e1 o fim. Seu poder \u00e9 t\u00e3o vasto que he raramente interfere, pois sabe que cada a\u00e7\u00e3o tem consequ\u00eancias milenares.\" },\r\n { \"nome\": \"M\u00famia\", \"numero\": 20, \"magia\": 9, \"forca\": 9, \"fogo\": 3, \"color\": \"#FF33BD\", \"lore\": \"Um fara\u00f3 tra\u00eddo e mumificado vivo. Despertado por ladr\u00f5es de tumba, ele agora vaga pelo deserto, buscando vingan\u00e7a contra os descendentes de seus inimigos.\" },\r\n { \"nome\": \"P\u00e9gasus\", \"numero\": 21, \"magia\": 23, \"forca\": 12, \"fogo\": 12, \"color\": \"#BD33FF\", \"lore\": \"Nascido da espuma do mar e do sangue de uma g\u00f3rgona, esta criatura celestial serve apenas aos de cora\u00e7\u00e3o puro, levando-os para batalhas nos c\u00e9us.\" },\r\n { \"nome\": \"Sacerdote\", \"numero\": 22, \"magia\": 26, \"forca\": 5, \"fogo\": 18, \"color\": \"#33FF8D\", \"lore\": \"Um canal para o poder dos deuses. Ele pode curar os doentes e queimar os profanos com fogo sagrado, mas sua f\u00e9 \u00e9 constantemente testada.\" },\r\n { \"nome\": \"Sombra\", \"numero\": 23, \"magia\": 8, \"forca\": 7, \"fogo\": 1, \"color\": \"#F5FF33\", \"lore\": \"Uma entidade nascida do medo e do segredo. Alimenta-se de sussurros e espreita nos cantos escuros, uma adaga invis\u00edvel pronta para atacar.\" },\r\n { \"nome\": \"B\u00e1rbaro\", \"numero\": 24, \"magia\": 3, \"forca\": 29, \"fogo\": 5, \"color\": \"#33F5FF\", \"lore\": \"Exilado de sua tribo por sua f\u00faria incontrol\u00e1vel. Agora, ele vaga pelas terras selvagens, sua for\u00e7a uma b\u00ean\u00e7\u00e3o e uma maldi\u00e7\u00e3o.\" },\r\n { \"nome\": \"Viking\", \"numero\": 25, \"magia\": 2, \"forca\": 28, \"fogo\": 6, \"color\": \"#FF33F5\", \"lore\": \"Um navegador destemido que busca Valhalla. Ele acredita que uma morte gloriosa em batalha \u00e9 a maior honra que um guerreiro pode alcan\u00e7ar.\" },\r\n { \"nome\": \"Bruxa\", \"numero\": 26, \"magia\": 27, \"forca\": 3, \"fogo\": 16, \"color\": \"#33BD33\", \"lore\": \"Vive em um p\u00e2ntano isolado, fazendo pactos com criaturas antigas. Suas maldi\u00e7\u00f5es podem apodrecer colheitas e azedar o sangue, e ela cobra um pre\u00e7o alto por seus favores.\" },\r\n { \"nome\": \"Elfo\", \"numero\": 27, \"magia\": 25, \"forca\": 6, \"fogo\": 14, \"color\": \"#8D33BD\", \"lore\": \"Um arqueiro imortal da floresta crepuscular. Ele viu imp\u00e9rios nascerem e ru\u00edrem e luta para proteger o pouco de magia que ainda resta no mundo.\" },\r\n { \"nome\": \"Anjo\", \"numero\": 28, \"magia\": 24, \"forca\": 1, \"fogo\": 7, \"color\": \"#FF8D8D\", \"lore\": \"Um mensageiro celestial enviado para julgar os mortais. Sua beleza esconde um poder terr\u00edvel, e sua espada queima com a justi\u00e7a implac\u00e1vel dos c\u00e9us.\" },\r\n { \"nome\": \"Gigante de Lava\", \"numero\": 29, \"magia\": 0, \"forca\": 0, \"fogo\": 30, \"color\": \"#33BD8D\", \"lore\": \"Um elemental primordial, a pr\u00f3pria ira do vulc\u00e3o encarnada. Ele n\u00e3o tem pensamentos ou planos, apenas um desejo infinito de queimar e consumir.\" },\r\n { \"nome\": \"Esqueleto\", \"numero\": 30, \"magia\": 7, \"forca\": 8, \"fogo\": 2, \"color\": \"#8D8DFF\", \"lore\": \"Um soldado ca\u00eddo, reanimado por um necromante para lutar mais uma vez. Sem mem\u00f3rias ou vontade, ele obedece cegamente, um eco eterno da guerra.\" },\r\n { \"nome\": \"Orc\", \"numero\": 31, \"magia\": 1, \"forca\": 10, \"fogo\": 4, \"color\": \"#FFBD8D\", \"lore\": \"Nascido para a batalha, criado em uma cultura onde apenas os fortes sobrevivem. Ele despreza a fraqueza e vive pela emo\u00e7\u00e3o do combate.\" },\r\n { \"nome\": \"Unic\u00f3rnio\", \"numero\": 32, \"magia\": 10, \"forca\": 11, \"fogo\": 13, \"color\": \"#33FFBD\", \"lore\": \"A criatura mais pura da floresta, cujo chifre pode curar qualquer veneno. Ele s\u00f3 se revela para aqueles com inten\u00e7\u00f5es nobres, e sua magia \u00e9 um b\u00e1lsamo para a terra.\" },\r\n ];\r\n\r\n const Card = React.memo(({ card, isFaceDown, isSelected, isGolden, onClick, showAttributes, onAttributeSelect, isPlayable, inBattle, battleAttribute, videoCards, isSoundActive, animationStyle, className = '' }) => {\r\n if (!card) return null; \r\n const cardBaseStyle = \"w-full h-full rounded-xl shadow-lg transition-all duration-300 transform relative overflow-hidden flex flex-col justify-between p-2 border-4 bg-gray-700\";\r\n const selectedStyle = isSelected ? 'border-blue-500 scale-105 shadow-2xl -translate-y-4' : 'border-transparent hover:-translate-y-2';\r\n const goldenStyle = isGolden ? 'shadow-yellow-400\/50 ring-4 ring-yellow-400 ring-offset-2 ring-offset-gray-900' : '';\r\n \r\n const hasVideo = videoCards.has(card.numero);\r\n const imageUrl = `https:\/\/teste.doriedsonjunior.com\/cartas_recortadas\/carta_${String(card.numero).padStart(2, '0')}.jpg`;\r\n\r\n if (isFaceDown) {\r\n return (\r\n <div className={`${cardBaseStyle}`}>\r\n <img decoding=\"async\" src=\"https:\/\/teste.doriedsonjunior.com\/cartas_recortadas\/verso.jpg\" alt=\"Verso da Carta\" className=\"w-full h-full object-cover rounded-md\" \/>\r\n <\/div>\r\n );\r\n }\r\n\r\n return (\r\n <div \r\n className={`${cardBaseStyle} ${selectedStyle} ${goldenStyle} ${isPlayable ? 'cursor-pointer' : 'cursor-default'} ${className}`}\r\n onClick={onClick}\r\n style={animationStyle}\r\n >\r\n <img \r\n src={imageUrl} \r\n alt={card.nome} \r\n className=\"absolute inset-0 w-full h-full object-cover rounded-lg\" \r\n onError={(e) => { e.target.onerror = null; e.target.src='https:\/\/placehold.co\/244x371\/333333\/ffffff?text=Imagem+Nao+Encontrada'; }} \r\n \/>\r\n <div className=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent\"><\/div>\r\n\r\n {showAttributes && (\r\n <div className=\"relative z-10 bg-black\/60 rounded-lg p-2 mt-auto text-white text-sm\">\r\n <button onClick={(e) => { e.stopPropagation(); onAttributeSelect('magia'); }} className=\"flex items-center justify-between w-full p-1 rounded transition-colors bg-yellow-950\/50 border border-yellow-800\/50 text-yellow-200 hover:bg-purple-900\/70 hover:border-purple-500\">\r\n <MagicIcon \/> <span className=\"font-semibold\">Magia<\/span> <span>{card.magia}<\/span>\r\n <\/button>\r\n <button onClick={(e) => { e.stopPropagation(); onAttributeSelect('forca'); }} className=\"flex items-center justify-between w-full p-1 rounded transition-colors bg-yellow-950\/50 border border-yellow-800\/50 text-yellow-200 hover:bg-red-900\/70 hover:border-red-500\">\r\n <StrengthIcon \/> <span className=\"font-semibold\">For\u00e7a<\/span> <span>{card.forca}<\/span>\r\n <\/button>\r\n <button onClick={(e) => { e.stopPropagation(); onAttributeSelect('fogo'); }} className=\"flex items-center justify-between w-full p-1 rounded transition-colors bg-yellow-950\/50 border border-yellow-800\/50 text-yellow-200 hover:bg-orange-900\/70 hover:border-orange-500\">\r\n <FireIcon \/> <span className=\"font-semibold\">Fogo<\/span> <span>{card.fogo}<\/span>\r\n <\/button>\r\n <\/div>\r\n )}\r\n <\/div>\r\n );\r\n });\r\n \r\n const FlippableCard = ({ card, playSound, videoCards, startFlipped, battleAttribute, isWinner }) => {\r\n const [isFlipped, setIsFlipped] = React.useState(startFlipped);\r\n\r\n React.useEffect(() => {\r\n const flip = setTimeout(() => setIsFlipped(false), 500);\r\n return () => clearTimeout(flip);\r\n }, [card]); \r\n\r\n if (!card) return null;\r\n\r\n const hasVideo = videoCards.has(card.numero);\r\n const videoUrl = `https:\/\/teste.doriedsonjunior.com\/cartas_recortadas\/videos\/carta_${String(card.numero).padStart(2, '0')}.mp4`;\r\n const frontImageUrl = `https:\/\/teste.doriedsonjunior.com\/cartas_recortadas\/carta_${String(card.numero).padStart(2, '0')}.jpg`;\r\n const backImageUrl = `https:\/\/teste.doriedsonjunior.com\/cartas_recortadas\/verso.jpg`;\r\n \r\n const winnerClass = isWinner ? 'animate-winner-border' : '';\r\n\r\n return (\r\n <div \r\n className=\"w-full h-full [perspective:1000px] cursor-pointer\" \r\n onClick={() => setIsFlipped(prev => !prev)}\r\n >\r\n <div \r\n className={`relative w-full h-full transition-transform duration-700 ease-in-out [transform-style:preserve-3d] ${isFlipped ? '[transform:rotateY(180deg)]' : ''}`}\r\n >\r\n {\/* Face da Frente *\/}\r\n <div className={`absolute w-full h-full [backface-visibility:hidden] rounded-xl overflow-hidden shadow-lg flex flex-col justify-end border-4 border-gray-800 ${winnerClass}`}>\r\n {hasVideo ? (\r\n <video \r\n src={videoUrl} \r\n autoPlay \r\n loop \r\n muted={!playSound}\r\n playsInline\r\n className=\"absolute inset-0 w-full h-full object-cover\" \r\n \/>\r\n ) : (\r\n <img \r\n src={frontImageUrl} \r\n alt={card.nome} \r\n className=\"absolute inset-0 w-full h-full object-cover\" \r\n onError={(e) => { e.target.onerror = null; e.target.src='https:\/\/placehold.co\/244x371\/333333\/ffffff?text=Imagem+Nao+Encontrada'; }} \r\n \/>\r\n )}\r\n <div className=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent\"><\/div>\r\n {battleAttribute && (\r\n <div className=\"relative z-10 text-center text-white font-bold mb-2\">\r\n <span className=\"text-lg bg-black\/70 px-3 py-1 rounded-full uppercase\">{battleAttribute}: {card[battleAttribute]}<\/span>\r\n <\/div>\r\n )}\r\n {isWinner && (\r\n <div className=\"absolute inset-0 flex items-center justify-center\">\r\n <span className=\"text-5xl font-black text-yellow-300 text-shadow-lg animate-winner-text\" style={{textShadow: '2px 2px 4px rgba(0,0,0,0.8)'}}>WINNER<\/span>\r\n <\/div>\r\n )}\r\n <\/div>\r\n {\/* Face do Verso *\/}\r\n <div className={`absolute w-full h-full [backface-visibility:hidden] [transform:rotateY(180deg)] rounded-xl overflow-hidden shadow-lg border-4 border-gray-800 ${winnerClass}`}>\r\n <img src={backImageUrl} alt=\"Verso da Carta\" className=\"w-full h-full object-cover\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const HelpModal = ({ onClose }) => (\r\n <div className=\"fixed inset-0 bg-black\/75 backdrop-blur-sm flex items-center justify-center z-50\" onClick={onClose}>\r\n <div className=\"bg-black\/30 backdrop-blur-lg border border-yellow-800\/30 p-6 rounded-lg max-w-lg w-11\/12 text-white\" onClick={(e) => e.stopPropagation()}>\r\n <h2 className=\"text-3xl font-bold mb-4 text-yellow-400 text-center\">Como Jogar<\/h2>\r\n <div className=\"space-y-4 text-lg\">\r\n <p><strong className=\"text-blue-400\">Objetivo:<\/strong> Vencer mais rodadas que a IA. O jogo tem 10 rodadas.<\/p>\r\n <p><strong className=\"text-blue-400\">Turno de Ataque:<\/strong> Quando for sua vez, clique em uma carta da sua m\u00e3o e depois escolha um dos tr\u00eas atributos (Magia, For\u00e7a ou Fogo) para batalhar.<\/p>\r\n <p><strong className=\"text-blue-400\">Turno de Defesa:<\/strong> Quando a IA atacar, ela escolher\u00e1 uma carta e um atributo. Voc\u00ea deve escolher uma carta da sua m\u00e3o para se defender.<\/p>\r\n <p><strong className=\"text-blue-400\">Resultado:<\/strong> A carta com o maior valor no atributo escolhido vence a rodada. O vencedor da rodada come\u00e7a o pr\u00f3ximo ataque.<\/p>\r\n <p><strong className=\"text-yellow-500\">Dica de Mestre:<\/strong> A nova IA Gemini \u00e9 imprevis\u00edvel. Preste aten\u00e7\u00e3o em suas jogadas para tentar antecipar sua estrat\u00e9gia!<\/p>\r\n <\/div>\r\n <button onClick={onClose} className=\"mt-6 w-full bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold py-2 px-4 rounded-lg transition-all duration-300\">Entendido!<\/button>\r\n <\/div>\r\n <\/div>\r\n );\r\n\r\n const LoreModal = ({ card, onClose, videoCards }) => {\r\n if (!card) return null;\r\n const hasVideo = videoCards.has(card.numero);\r\n return (\r\n <div className=\"fixed inset-0 bg-black\/75 backdrop-blur-sm flex items-center justify-center z-50\" onClick={onClose}>\r\n <div className=\"bg-black\/30 backdrop-blur-lg border border-yellow-800\/30 p-4 md:p-6 rounded-lg max-w-3xl w-11\/12 flex flex-col md:flex-row gap-6\" onClick={(e) => e.stopPropagation()}>\r\n <div className=\"w-full md:w-1\/2 lg:w-1\/3 flex-shrink-0\">\r\n <div className=\"w-full aspect-[2\/3]\">\r\n <FlippableCard card={card} playSound={hasVideo} videoCards={videoCards} startFlipped={true}\/>\r\n <\/div>\r\n <p className=\"text-center text-xs text-gray-400 mt-2 italic\">Clique na carta para virar<\/p>\r\n <\/div>\r\n <div className=\"text-white flex flex-col\">\r\n <h2 className=\"text-3xl font-bold mb-2\" style={{color: card.color}}>{card.nome}<\/h2>\r\n <p className=\"text-lg flex-grow overflow-y-auto\">{card.lore}<\/p>\r\n <button onClick={onClose} className=\"mt-4 w-full bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold py-2 px-4 rounded-lg transition-all duration-300\">Fechar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const AllCardsModal = ({ cards, onCardSelect, onClose, videoCards }) => {\r\n const [selectedCard, setSelectedCard] = React.useState(null);\r\n \r\n const handleCardClick = (card) => {\r\n setSelectedCard(card);\r\n onCardSelect(card);\r\n };\r\n\r\n return (\r\n <div className=\"fixed inset-0 bg-black\/75 backdrop-blur-sm flex items-center justify-center z-50\" onClick={onClose}>\r\n <div className=\"bg-black\/30 backdrop-blur-lg border border-yellow-800\/30 p-4 md:p-6 rounded-lg max-h-[80vh] overflow-y-auto w-11\/12 max-w-4xl\" onClick={(e) => e.stopPropagation()}>\r\n <h2 className=\"text-2xl font-bold mb-4 text-center text-yellow-400\">Todas as Cartas da Arena<\/h2>\r\n <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4\">\r\n {cards.map(card => (\r\n <div key={card.numero} className=\"w-full aspect-[2\/3] cursor-pointer\">\r\n <Card \r\n card={card} \r\n isPlayable={true} \r\n onClick={() => handleCardClick(card)}\r\n isSelected={selectedCard?.numero === card.numero}\r\n videoCards={videoCards}\r\n isSoundActive={false}\r\n \/>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <button onClick={onClose} className=\"mt-6 w-full bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold py-2 px-4 rounded-lg transition-all duration-300\">Fechar<\/button>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n function App() {\r\n \/\/ ==================================================================\r\n \/\/ CONFIGURA\u00c7\u00c3O DO FIREBASE - DADOS DO SEU PROJETO\r\n \/\/ ==================================================================\r\n const firebaseConfig = {\r\n apiKey: \"AIzaSyAYXDwFiOEKzH5rkwylgaDcNB8e30YyNjg\",\r\n authDomain: \"dracomania-arena.firebaseapp.com\",\r\n projectId: \"dracomania-arena\",\r\n storageBucket: \"dracomania-arena.firebasestorage.app\",\r\n messagingSenderId: \"205155005889\",\r\n appId: \"1:205155005889:web:42d5426ec2bc528a7a2b40\"\r\n };\r\n \/\/ ==================================================================\r\n\r\n const [gameState, setGameState] = React.useState('start');\r\n const [playerHand, setPlayerHand] = React.useState([]);\r\n const [fullPlayerHand, setFullPlayerHand] = React.useState([]);\r\n const [aiHand, setAiHand] = React.useState([]);\r\n const [round, setRound] = React.useState(0);\r\n const [playerScore, setPlayerScore] = React.useState(0);\r\n const [aiScore, setAiScore] = React.useState(0);\r\n const [turnHolder, setTurnHolder] = React.useState(null);\r\n const [selectedPlayerCard, setSelectedPlayerCard] = React.useState(null);\r\n const [playerPlayedCard, setPlayerPlayedCard] = React.useState(null);\r\n const [aiPlayedCard, setAiPlayedCard] = React.useState(null);\r\n const [chosenAttribute, setChosenAttribute] = React.useState(null);\r\n const [message, setMessage] = React.useState('Bem-vindo ao Duelo de Atributos!');\r\n const [activeModal, setActiveModal] = React.useState(null);\r\n const [debugLog, setDebugLog] = React.useState([]);\r\n const [videoCards] = React.useState(new Set(VIDEO_CARD_NUMBERS));\r\n const [activeSoundCardNumero, setActiveSoundCardNumero] = React.useState(null);\r\n const [roundWinner, setRoundWinner] = React.useState(null);\r\n\r\n \/\/ Estados do Firebase\r\n const [db, setDb] = React.useState(null);\r\n const [highscores, setHighscores] = React.useState([]);\r\n const [playerName, setPlayerName] = React.useState(\"\");\r\n const [scoreSaved, setScoreSaved] = React.useState(false);\r\n \r\n const log = React.useCallback((msg) => {\r\n setDebugLog(prev => [`[${new Date().toLocaleTimeString()}] ${msg}`, ...prev].slice(0, 15));\r\n console.log(msg); \/\/ Adiciona log no console do navegador tamb\u00e9m\r\n }, []);\r\n \r\n const fullDeck = cardData;\r\n\r\n \/\/ --- Inicializa\u00e7\u00e3o do Firebase ---\r\n React.useEffect(() => {\r\n let unsubscribe = () => {};\r\n\r\n const initFirebase = async () => {\r\n try {\r\n const {\r\n initializeApp, getAuth, signInAnonymously, getFirestore,\r\n collection, query, onSnapshot, orderBy, limit\r\n } = window.firebase;\r\n \r\n if (!firebaseConfig.apiKey) {\r\n log(\"Configura\u00e7\u00e3o do Firebase n\u00e3o preenchida. Recordes desativados.\");\r\n return;\r\n }\r\n\r\n const app = initializeApp(firebaseConfig);\r\n const auth = getAuth(app);\r\n const firestoreDb = getFirestore(app);\r\n setDb(firestoreDb);\r\n\r\n await signInAnonymously(auth);\r\n log(\"Autenticado com sucesso no Firebase.\");\r\n \r\n const highscoresCol = collection(firestoreDb, \"highscores\");\r\n const q = query(highscoresCol, orderBy(\"score\", \"desc\"), limit(10));\r\n\r\n unsubscribe = onSnapshot(q, (querySnapshot) => {\r\n const scores = [];\r\n querySnapshot.forEach((doc) => {\r\n scores.push({ id: doc.id, ...doc.data() });\r\n });\r\n setHighscores(scores);\r\n log(\"Recordes carregados.\");\r\n }, (err) => {\r\n console.error(\"Firestore snapshot error:\", err);\r\n log(`Erro ao buscar recordes: ${err.message}`);\r\n if (err.code === 'failed-precondition') {\r\n log(\"DICA: O erro 'failed-precondition' geralmente significa que um \u00edndice do Firestore \u00e9 necess\u00e1rio. Verifique o console de depura\u00e7\u00e3o do navegador para um link para criar o \u00edndice.\");\r\n }\r\n });\r\n\r\n } catch (error) {\r\n console.error(\"Firebase initialization failed:\", error);\r\n log(`Firebase falhou: ${error.message}`);\r\n if (error.code === 'auth\/configuration-not-found') {\r\n log(\"ERRO: Autentica\u00e7\u00e3o An\u00f4nima n\u00e3o est\u00e1 ativada no seu projeto Firebase.\");\r\n log(\"V\u00e1 para o Console do Firebase > Authentication > Sign-in method e ative o provedor 'An\u00f4nimo'.\");\r\n setMessage(\"Erro de configura\u00e7\u00e3o do Firebase. Recordes desativados.\");\r\n }\r\n }\r\n };\r\n\r\n initFirebase();\r\n\r\n return () => {\r\n unsubscribe();\r\n };\r\n }, [log]);\r\n\r\n\r\n const playSound = React.useCallback((soundType) => {\r\n if (typeof Tone === 'undefined' || Tone.context.state !== 'running') {\r\n return;\r\n }\r\n const synth = new Tone.Synth({ volume: -30 }).toDestination();\r\n switch(soundType) {\r\n case 'start': synth.triggerAttackRelease(\"C4\", \"8n\"); break;\r\n case 'select': new Tone.MembraneSynth({ volume: -28 }).toDestination().triggerAttackRelease(\"C2\", \"8n\"); break;\r\n case 'play': new Tone.PluckSynth({ volume: -28 }).toDestination().triggerAttack(\"C4\"); break;\r\n case 'win': new Tone.Synth({ volume: -30 }).toDestination().triggerAttackRelease(\"G4\", \"8n\", Tone.now() + 0.1); break;\r\n case 'lose': new Tone.Synth({ volume: -30 }).toDestination().triggerAttackRelease(\"C3\", \"8n\", Tone.now()); break;\r\n case 'tie': new Tone.Synth({ volume: -30 }).toDestination().triggerAttackRelease(\"E4\", \"8n\"); break;\r\n }\r\n }, []);\r\n \r\n \/\/ --- L\u00d3GICA DA IA COM GEMINI ---\r\n const getAiDecisionFromGemini = async (prompt) => {\r\n log(\"Consultando a IA Gemini...\");\r\n try {\r\n const apiKey = \"AIzaSyDqW6oWRiktNhwfZeSpxSyjIZlyPPWGf4c\"; \/\/ Sua chave da API Gemini\r\n const apiUrl = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.0-flash:generateContent?key=${apiKey}`;\r\n \r\n const payload = {\r\n contents: [{ role: \"user\", parts: [{ text: prompt }] }],\r\n };\r\n\r\n const response = await fetch(apiUrl, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(payload)\r\n });\r\n\r\n if (!response.ok) {\r\n const errorBody = await response.text();\r\n throw new Error(`API Error: ${response.status} ${response.statusText} - ${errorBody}`);\r\n }\r\n\r\n const result = await response.json();\r\n \r\n if (result.candidates && result.candidates.length > 0 && result.candidates[0].content.parts[0].text) {\r\n const textResponse = result.candidates[0].content.parts[0].text;\r\n log(\"Gemini respondeu: \" + textResponse);\r\n \/\/ Limpa a resposta para garantir que seja um JSON v\u00e1lido\r\n const jsonString = textResponse.replace(\/```json\/g, '').replace(\/```\/g, '').trim();\r\n return JSON.parse(jsonString);\r\n } else {\r\n throw new Error(\"Resposta da API inv\u00e1lida ou vazia.\");\r\n }\r\n } catch (error) {\r\n console.error(\"Erro ao chamar a API Gemini:\", error);\r\n log(\"Erro na IA Gemini. Usando l\u00f3gica de fallback.\");\r\n return null; \/\/ Retorna nulo para acionar a l\u00f3gica de fallback\r\n }\r\n };\r\n\r\n\r\n const startGame = React.useCallback(() => {\r\n if (typeof Tone !== 'undefined') {\r\n Tone.start();\r\n }\r\n playSound('start');\r\n setGameState('dealing');\r\n setMessage('Embaralhando as cartas...');\r\n setPlayerScore(0);\r\n setAiScore(0);\r\n setRound(0);\r\n setSelectedPlayerCard(null);\r\n setPlayerPlayedCard(null);\r\n setAiPlayedCard(null);\r\n setScoreSaved(false);\r\n setPlayerName(\"\");\r\n setPlayerHand([]);\r\n\r\n let deck = [...fullDeck].sort(() => Math.random() - 0.5);\r\n const playerInitialHand = deck.slice(0, 10);\r\n const aiInitialHand = deck.slice(10, 20);\r\n \r\n setFullPlayerHand(playerInitialHand);\r\n setAiHand(aiInitialHand);\r\n \r\n const starter = Math.random() < 0.5 ? 'player' : 'ai';\r\n setTurnHolder(starter);\r\n \r\n log('--- NOVO JOGO ---');\r\n log(`O primeiro a atacar \u00e9: ${starter.toUpperCase()}`);\r\n\r\n \/\/ Staggered dealing animation\r\n playerInitialHand.forEach((card, index) => {\r\n setTimeout(() => {\r\n setPlayerHand(prev => [...prev, card]);\r\n if (index === playerInitialHand.length - 1) {\r\n setTimeout(() => {\r\n setMessage(starter === 'player' ? 'Rodada 1. A sorte foi lan\u00e7ada! Voc\u00ea come\u00e7a.' : 'Rodada 1. A IA come\u00e7a o duelo!');\r\n if (starter === 'ai') {\r\n setGameState('ai_turn');\r\n } else {\r\n setGameState('player_turn_select_card');\r\n }\r\n }, 500);\r\n }\r\n }, index * 200);\r\n });\r\n\r\n }, [fullDeck, playSound, log]);\r\n\r\n const resolveRound = React.useCallback((pCard, aCard, attr) => {\r\n if (!pCard || !aCard || !attr) {\r\n log(\"ERRO: Tentativa de resolver rodada com dados inv\u00e1lidos.\");\r\n setMessage(\"Ocorreu um erro, a rodada ser\u00e1 reiniciada.\");\r\n setGameState('round_result'); \r\n return;\r\n }\r\n let playerValue = pCard[attr];\r\n let aiValue = aCard[attr];\r\n let roundMessage = `Rodada ${round + 1}: ${pCard.nome} (${attr}: ${playerValue}) vs ${aCard.nome} (${attr}: ${aiValue}). `;\r\n let nextTurnHolder = turnHolder;\r\n \r\n if (playerValue > aiValue) {\r\n setPlayerScore(s => s + 1);\r\n roundMessage += \"Voc\u00ea venceu a rodada!\";\r\n playSound('win');\r\n nextTurnHolder = 'player';\r\n setTimeout(() => setRoundWinner('player'), 2000);\r\n } else if (aiValue > playerValue) {\r\n setAiScore(s => s + 1);\r\n roundMessage += \"A IA venceu a rodada!\";\r\n playSound('lose');\r\n nextTurnHolder = 'ai';\r\n setTimeout(() => setRoundWinner('ai'), 2000);\r\n } else {\r\n roundMessage += \"Empate na rodada!\";\r\n playSound('tie');\r\n setRoundWinner('tie');\r\n }\r\n \r\n setMessage(roundMessage);\r\n log(`FIM DA RODADA ${round + 1}: ${roundMessage}`);\r\n setTurnHolder(nextTurnHolder);\r\n setGameState('round_result');\r\n }, [round, turnHolder, log, playSound]);\r\n\r\n const handlePlayerCardSelect = React.useCallback((card) => {\r\n if (gameState !== 'player_turn_select_card' && gameState !== 'player_turn_choose_attribute') return;\r\n \r\n if (aiPlayedCard) {\r\n log(`Jogador responde com: ${card.nome}.`);\r\n playSound('play');\r\n setPlayerPlayedCard(card);\r\n setActiveSoundCardNumero(card.numero);\r\n setPlayerHand(prevHand => prevHand.filter(c => c.numero !== card.numero));\r\n resolveRound(card, aiPlayedCard, chosenAttribute);\r\n return;\r\n }\r\n\r\n if (selectedPlayerCard && selectedPlayerCard.numero === card.numero) {\r\n setSelectedPlayerCard(null);\r\n setMessage('Escolha uma carta.');\r\n } else {\r\n log(`Jogador selecionou: ${card.nome}.`);\r\n playSound('select');\r\n setSelectedPlayerCard(card);\r\n setMessage(`Voc\u00ea selecionou ${card.nome}. Escolha um atributo para a batalha.`);\r\n setGameState('player_turn_choose_attribute');\r\n }\r\n }, [gameState, aiPlayedCard, chosenAttribute, selectedPlayerCard, playSound, resolveRound, log]);\r\n\r\n const handleAttributeSelect = React.useCallback(async (attribute) => {\r\n if (gameState !== 'player_turn_choose_attribute' || !selectedPlayerCard) return;\r\n \r\n setGameState('ai_thinking');\r\n playSound('play');\r\n setChosenAttribute(attribute);\r\n setPlayerPlayedCard(selectedPlayerCard);\r\n setActiveSoundCardNumero(selectedPlayerCard.numero);\r\n setPlayerHand(prevHand => prevHand.filter(c => c.numero !== selectedPlayerCard.numero));\r\n \r\n setMessage(`Voc\u00ea jogou ${selectedPlayerCard.nome} com ${attribute.toUpperCase()}. A IA est\u00e1 pensando...`);\r\n log(`Jogador ataca com ${selectedPlayerCard.nome} (${attribute}: ${selectedPlayerCard[attribute]}).`);\r\n\r\n setTimeout(async () => {\r\n const prompt = `\r\n Voc\u00ea \u00e9 um jogador especialista no jogo de cartas Dracomania.\r\n \u00c9 sua vez de DEFENDER.\r\n O estado atual do jogo \u00e9:\r\n - Placar: Jogador ${playerScore} x ${aiScore} IA\r\n - Rodada: ${round + 1} de 7\r\n - Sua M\u00e3o (IA): ${JSON.stringify(aiHand.map(c => ({nome: c.nome, magia: c.magia, forca: c.forca, fogo: c.fogo})))}\r\n - O jogador atacou com a carta '${selectedPlayerCard.nome}' usando o atributo '${attribute}' com valor ${selectedPlayerCard[attribute]}.\r\n\r\n Analise sua m\u00e3o e o estado do jogo. Decida qual carta jogar em resposta.\r\n Considere se vale a pena vencer a rodada ou se \u00e9 melhor sacrificar uma carta fraca para poupar as melhores para depois.\r\n \r\n Responda APENAS com um objeto JSON no seguinte formato: {\"cardToPlay\": \"NOME_DA_CARTA\"}\r\n `;\r\n \r\n const decision = await getAiDecisionFromGemini(prompt);\r\n let cardToPlay;\r\n\r\n if (decision && decision.cardToPlay) {\r\n cardToPlay = aiHand.find(c => c.nome === decision.cardToPlay);\r\n }\r\n \r\n \/\/ L\u00f3gica de fallback caso a IA falhe ou escolha uma carta inv\u00e1lida\r\n if (!cardToPlay) {\r\n log(\"Fallback: IA escolhendo a melhor defesa poss\u00edvel (l\u00f3gica antiga).\");\r\n const playerValue = selectedPlayerCard[attribute];\r\n const winningCards = aiHand.filter(card => card[attribute] > playerValue);\r\n if (winningCards.length > 0) {\r\n winningCards.sort((a, b) => a[attribute] - b[attribute]);\r\n cardToPlay = winningCards[0];\r\n } else {\r\n const sacrificialLambs = aiHand.map(card => ({\r\n card,\r\n avg: (card.magia + card.forca + card.fogo) \/ 3\r\n })).sort((a, b) => a.avg - b.avg);\r\n cardToPlay = sacrificialLambs.length > 0 ? sacrificialLambs[0].card : aiHand[0];\r\n }\r\n }\r\n \r\n if (cardToPlay) {\r\n log(`IA defende com: ${cardToPlay.nome}.`);\r\n setAiPlayedCard(cardToPlay);\r\n setActiveSoundCardNumero(cardToPlay.numero);\r\n setAiHand(prevHand => prevHand.filter(c => c.numero !== cardToPlay.numero));\r\n \r\n const finalPlayerCard = selectedPlayerCard;\r\n setSelectedPlayerCard(null);\r\n\r\n setTimeout(() => {\r\n resolveRound(finalPlayerCard, cardToPlay, attribute);\r\n }, 1500);\r\n } else {\r\n log(\"ERRO CR\u00cdTICO: Nenhuma carta da IA p\u00f4de ser selecionada, nem pelo fallback.\");\r\n setMessage(\"A IA est\u00e1 confusa! A rodada ser\u00e1 reiniciada.\");\r\n setTimeout(() => {\r\n setGameState('round_result');\r\n }, 1500);\r\n }\r\n }, 2000);\r\n\r\n }, [gameState, selectedPlayerCard, aiHand, playerScore, aiScore, round, playSound, log, resolveRound]);\r\n\r\n const aiPlayTurn = React.useCallback(async () => {\r\n log(\"--- Turno da IA ---\");\r\n setMessage(`Rodada ${round + 1}. A IA (Gemini) est\u00e1 pensando...`);\r\n \r\n if (aiHand.length === 0) {\r\n setGameState('game_over');\r\n setMessage(\"A IA n\u00e3o tem mais cartas! Voc\u00ea venceu!\");\r\n log(\"IA sem cartas. Fim de jogo.\");\r\n return;\r\n }\r\n \r\n const prompt = `\r\n Voc\u00ea \u00e9 um jogador especialista no jogo de cartas Dracomania.\r\n \u00c9 sua vez de ATACAR.\r\n O estado atual do jogo \u00e9:\r\n - Placar: Jogador ${playerScore} x ${aiScore} IA\r\n - Rodada: ${round + 1} de 7\r\n - Sua M\u00e3o (IA): ${JSON.stringify(aiHand.map(c => ({nome: c.nome, magia: c.magia, forca: c.forca, fogo: c.fogo})))}\r\n\r\n Analise sua m\u00e3o e o estado do jogo. Escolha a melhor carta e o melhor atributo para jogar.\r\n Pense em estrat\u00e9gias como usar sua carta mais forte para garantir um ponto, blefar com uma carta fraca, ou guardar cartas fortes para o final.\r\n \r\n Responda APENAS com um objeto JSON no seguinte formato: {\"cardToPlay\": \"NOME_DA_CARTA\", \"attribute\": \"ATRIBUTO_ESCOLHIDO\"}\r\n O atributo deve ser 'magia', 'forca' ou 'fogo'.\r\n `;\r\n\r\n const decision = await getAiDecisionFromGemini(prompt);\r\n let cardToPlay, bestAttribute;\r\n\r\n if (decision && decision.cardToPlay && decision.attribute) {\r\n cardToPlay = aiHand.find(c => c.nome === decision.cardToPlay);\r\n bestAttribute = ['magia', 'forca', 'fogo'].includes(decision.attribute) ? decision.attribute : null;\r\n }\r\n\r\n \/\/ L\u00f3gica de fallback caso a IA falhe ou retorne dados inv\u00e1lidos\r\n if (!cardToPlay || !bestAttribute) {\r\n log(\"Fallback: IA escolhendo a jogada mais forte (l\u00f3gica antiga).\");\r\n let bestPlay = { card: null, attribute: null, value: -1 };\r\n aiHand.forEach(card => {\r\n ['magia', 'forca', 'fogo'].forEach(attr => {\r\n if (card[attr] > bestPlay.value) {\r\n bestPlay = { card: card, attribute: attr, value: card[attr] };\r\n }\r\n });\r\n });\r\n cardToPlay = bestPlay.card;\r\n bestAttribute = bestPlay.attribute;\r\n }\r\n \r\n setAiPlayedCard(cardToPlay);\r\n setActiveSoundCardNumero(cardToPlay.numero);\r\n setChosenAttribute(bestAttribute);\r\n setAiHand(prevHand => prevHand.filter(c => c.numero !== cardToPlay.numero));\r\n \r\n log(`IA ataca com ${cardToPlay.nome} usando ${bestAttribute} (${cardToPlay[bestAttribute]}).`);\r\n setMessage(`A IA jogou ${cardToPlay.nome} e escolheu ${bestAttribute.toUpperCase()}. Sua vez de responder!`);\r\n setGameState('player_turn_select_card');\r\n\r\n }, [aiHand, round, log, playerScore, aiScore]);\r\n \r\n const handleSaveScore = React.useCallback(async (e) => {\r\n e.preventDefault();\r\n if (!playerName.trim() || !db) {\r\n log(\"Nome do jogador ou DB n\u00e3o encontrado para salvar o recorde.\");\r\n return;\r\n }\r\n\r\n try {\r\n const highscoresCol = window.firebase.collection(db, \"highscores\");\r\n await window.firebase.addDoc(highscoresCol, {\r\n name: playerName,\r\n score: playerScore,\r\n date: new Date().toISOString()\r\n });\r\n setScoreSaved(true);\r\n setMessage(\"Seu recorde foi salvo, \u00f3 grande campe\u00e3o!\");\r\n log(`Recorde salvo para ${playerName} com ${playerScore} pontos.`);\r\n } catch (error) {\r\n console.error(\"Error writing document: \", error);\r\n log(\"Falha ao salvar recorde.\");\r\n setMessage(\"Houve um erro ao salvar seu recorde. Tente novamente.\");\r\n }\r\n }, [playerName, db, playerScore, log]);\r\n\r\n React.useEffect(() => {\r\n if (gameState === 'round_result') {\r\n const nextRound = round + 1;\r\n \r\n setTimeout(() => {\r\n setActiveSoundCardNumero(null);\r\n setRoundWinner(null);\r\n if (nextRound >= 10 || playerHand.length === 0 || aiHand.length === 0) {\r\n setGameState('game_over');\r\n const winner = playerScore > aiScore ? 'Voc\u00ea' : (aiScore > playerScore ? 'A IA' : 'Ningu\u00e9m');\r\n if (winner === 'Ningu\u00e9m') {\r\n setMessage(`Fim de jogo! O resultado foi um empate: ${playerScore} a ${aiScore}.`);\r\n } else {\r\n setMessage(`Fim de jogo! ${winner} venceu a partida por ${playerScore} a ${aiScore}!`);\r\n }\r\n log(`--- FIM DE JOGO --- Placar final: Voc\u00ea ${playerScore} x ${aiScore} IA.`);\r\n } else {\r\n setRound(nextRound);\r\n setPlayerPlayedCard(null);\r\n setAiPlayedCard(null);\r\n setSelectedPlayerCard(null);\r\n setChosenAttribute(null);\r\n\r\n if (turnHolder === 'player') {\r\n setMessage(`Rodada ${nextRound + 1}. Sua vez de jogar!`);\r\n setGameState('player_turn_select_card');\r\n log(`--- Iniciando Rodada ${nextRound + 1}. Turno do jogador. ---`);\r\n } else {\r\n setGameState('ai_turn');\r\n }\r\n }\r\n }, 5000);\r\n } else if (gameState === 'ai_turn') {\r\n aiPlayTurn();\r\n }\r\n }, [gameState, round, playerScore, aiScore, turnHolder, playerHand, aiHand, aiPlayTurn]);\r\n\r\n if (gameState === 'start' || gameState === 'game_over') {\r\n return (\r\n <div className=\"min-h-screen bg-gray-900\/50 backdrop-blur-md text-white flex flex-col items-center justify-center p-4 font-sans text-center\">\r\n {activeModal === 'help' && <HelpModal onClose={() => setActiveModal(null)} \/>}\r\n {activeModal === 'all-cards' && <AllCardsModal cards={fullDeck} onCardSelect={(card) => setActiveModal(card)} onClose={() => setActiveModal(null)} videoCards={videoCards} \/>}\r\n {typeof activeModal === 'object' && activeModal !== null && <LoreModal card={activeModal} onClose={() => setActiveModal('all-cards')} videoCards={videoCards} \/>}\r\n \r\n <h1 className=\"text-3xl sm:text-4xl md:text-5xl font-bold mb-2 text-yellow-400\">Dracomania - Arena<\/h1>\r\n <p className=\"text-lg md:text-xl mb-6 text-gray-300\">A Batalha Final<\/p>\r\n \r\n {gameState === 'game_over' && (\r\n <div className=\"mb-8 text-xl md:text-2xl bg-black\/30 backdrop-blur-lg border border-yellow-800\/30 p-6 rounded-lg shadow-xl w-full max-w-md\">\r\n {playerScore > aiScore && (\r\n <h2 className=\"text-4xl md:text-6xl font-black text-blue-500 mb-4 tracking-widest\">VIT\u00d3RIA<\/h2>\r\n )}\r\n {aiScore > playerScore && (\r\n <h2 className=\"text-4xl md:text-6xl font-black text-red-500 mb-4 tracking-widest\">DERROTA<\/h2>\r\n )}\r\n <p className=\"mb-4\">{message}<\/p>\r\n \r\n {playerScore > aiScore && !scoreSaved && (\r\n <form onSubmit={handleSaveScore} className=\"flex flex-col sm:flex-row gap-2 mt-4\">\r\n <input \r\n type=\"text\"\r\n value={playerName}\r\n onChange={(e) => setPlayerName(e.target.value)}\r\n placeholder=\"Digite seu nome\"\r\n className=\"bg-gray-700 text-white px-4 py-2 rounded-md flex-grow text-lg\"\r\n maxLength=\"15\"\r\n \/>\r\n <button type=\"submit\" className=\"bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold py-2 px-4 rounded-md text-lg\">\r\n Salvar\r\n <\/button>\r\n <\/form>\r\n )}\r\n <\/div>\r\n )}\r\n \r\n <div className=\"flex flex-wrap justify-center gap-4 items-center\">\r\n <button \r\n onClick={startGame}\r\n className=\"px-6 py-3 md:px-8 md:py-4 bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold rounded-lg shadow-lg transform hover:scale-105 transition-all duration-300 text-xl md:text-2xl\"\r\n >\r\n {gameState === 'game_over' ? 'Jogar Novamente' : 'Iniciar Jogo'}\r\n <\/button>\r\n <button \r\n onClick={() => setActiveModal('all-cards')}\r\n className=\"px-6 py-3 md:px-8 md:py-4 bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold rounded-lg shadow-lg transform hover:scale-105 transition-all duration-300 text-xl md:text-2xl\"\r\n >\r\n Ver Cartas\r\n <\/button>\r\n <button \r\n onClick={() => setActiveModal('help')}\r\n className=\"px-6 py-3 md:px-8 md:py-4 bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold rounded-lg shadow-lg transform hover:scale-105 transition-all duration-300 text-xl md:text-2xl\"\r\n >\r\n Ajuda\r\n <\/button>\r\n <\/div>\r\n\r\n <div className=\"mt-8 w-full max-w-md\">\r\n <h3 className=\"text-2xl font-bold text-yellow-400 mb-4\">Mural dos Campe\u00f5es<\/h3>\r\n <div className=\"bg-black\/30 backdrop-blur-lg border border-yellow-800\/30 p-4 rounded-lg\">\r\n {highscores.length > 0 ? (\r\n <ol className=\"list-decimal list-inside text-left space-y-2\">\r\n {highscores.map((s, i) => (\r\n <li key={s.id} className=\"text-lg flex justify-between items-center\">\r\n <span>\r\n <span className=\"font-bold text-yellow-500 mr-2\">{i + 1}.<\/span> \r\n {s.name}\r\n <\/span>\r\n <span className=\"font-bold text-blue-400\">{s.score} Pts<\/span>\r\n <\/li>\r\n ))}\r\n <\/ol>\r\n ) : (\r\n <p>Nenhum recorde ainda. Seja o primeiro!<\/p>\r\n )}\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n );\r\n }\r\n \r\n return (\r\n <div className=\"min-h-screen bg-gray-900\/50 backdrop-blur-md text-white flex flex-col p-2 md:p-4 font-sans overflow-x-hidden\">\r\n <header className=\"w-full max-w-7xl mx-auto mb-4 p-3 md:p-4 bg-black\/30 backdrop-blur-sm rounded-lg shadow-md border border-white\/10\">\r\n <div className=\"flex justify-between items-center text-lg sm:text-xl md:text-2xl font-bold\">\r\n <div className=\"text-blue-400\">Voc\u00ea: {playerScore}<\/div>\r\n <div className=\"text-center text-yellow-400\">Rodada {round + 1} \/ 10<\/div>\r\n <div className=\"text-red-400\">IA: {aiScore}<\/div>\r\n <\/div>\r\n <div className=\"text-center mt-3 text-base md:text-lg h-12 flex items-center justify-center bg-black\/20 backdrop-blur-sm rounded p-2\">\r\n <p className=\"animate-pulse\">{message}<\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <main className=\"w-full max-w-7xl mx-auto flex-grow flex flex-col items-center justify-center my-2\">\r\n <div className=\"w-full flex flex-col sm:flex-row justify-around items-center bg-black\/20 backdrop-blur-sm rounded-2xl p-4 my-4 border-2 border-dashed border-white\/20 min-h-[20rem] sm:min-h-[22rem]\">\r\n <div className=\"flex flex-col items-center\">\r\n <h3 className=\"font-bold mb-2 text-blue-400\">Sua Carta<\/h3>\r\n <div className=\"w-32 h-48 sm:w-40 sm:h-60 md:w-48 md:h-72\">\r\n {playerPlayedCard ? <FlippableCard key={`player-${playerPlayedCard.numero}-${round}`} card={playerPlayedCard} battleAttribute={chosenAttribute} videoCards={videoCards} startFlipped={true} playSound={activeSoundCardNumero === playerPlayedCard?.numero} isWinner={roundWinner === 'player'}\/> : <div className=\"w-full h-full bg-black\/30 rounded-xl flex items-center justify-center text-gray-500 text-center p-2\">Aguardando...<\/div>}\r\n <\/div>\r\n <\/div>\r\n <div className=\"text-2xl sm:text-4xl font-bold text-yellow-400 my-2 sm:my-0\">VS<\/div>\r\n <div className=\"flex flex-col items-center\">\r\n <h3 className=\"font-bold mb-2 text-red-400\">Carta da IA<\/h3>\r\n <div className=\"w-32 h-48 sm:w-40 sm:h-60 md:w-48 md:h-72\">\r\n {aiPlayedCard ? <FlippableCard key={`ai-${aiPlayedCard.numero}-${round}`} card={aiPlayedCard} battleAttribute={chosenAttribute} videoCards={videoCards} startFlipped={true} playSound={activeSoundCardNumero === aiPlayedCard?.numero} isWinner={roundWinner === 'ai'}\/> : <div className=\"w-full h-full bg-black\/30 rounded-xl flex items-center justify-center text-gray-500 text-center p-2\">Aguardando...<\/div>}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <footer className=\"w-full flex flex-col items-center mt-auto\">\r\n <h2 className=\"text-xl md:text-2xl font-bold mb-4\">Sua M\u00e3o<\/h2>\r\n <div className=\"flex justify-center items-end gap-1 sm:gap-2 flex-wrap mb-4\">\r\n {playerHand.map((card, index) => {\r\n const isSelected = selectedPlayerCard?.numero === card.numero;\r\n return (\r\n <div key={card.numero} className={`relative w-24 h-36 sm:w-28 sm:h-40 md:w-32 md:h-48 lg:w-40 lg:h-60 ${isSelected ? 'z-20' : 'hover:z-10 z-0'}`}>\r\n <Card \r\n card={card}\r\n isSelected={isSelected}\r\n isPlayable={gameState === 'player_turn_select_card' || gameState === 'player_turn_choose_attribute'}\r\n onClick={() => handlePlayerCardSelect(card)}\r\n showAttributes={isSelected && gameState === 'player_turn_choose_attribute'}\r\n onAttributeSelect={handleAttributeSelect}\r\n videoCards={videoCards}\r\n isSoundActive={false} \/\/ Cartas na m\u00e3o est\u00e3o sempre mudas\r\n animationStyle={{ animationDelay: `${index * 150}ms`, opacity: 0 }}\r\n className=\"animate-deal-in\"\r\n \/>\r\n <\/div>\r\n );\r\n })}\r\n <\/div>\r\n <div className=\"w-full flex justify-around items-center p-2 sm:p-4 bg-black\/30 backdrop-blur-sm rounded-lg mt-4 border border-white\/10\">\r\n <div className=\"flex flex-col items-center\">\r\n <h3 className=\"font-bold mb-2 text-sm sm:text-base\">M\u00e3o da IA ({aiHand.length})<\/h3>\r\n <div className=\"flex -space-x-10 sm:-space-x-12 md:-space-x-16\">\r\n {aiHand.slice(0, 7).map((card, index) => (\r\n <div key={index} className=\"w-16 h-24 sm:w-20 sm:h-28 md:w-24 md:h-36\">\r\n <Card isFaceDown={true} card={card} videoCards={videoCards} \/>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <div className=\"flex flex-col items-center\">\r\n <h3 className=\"font-bold mb-2 text-sm sm:text-base\">Deck ({fullDeck.length - playerHand.length - aiHand.length})<\/h3>\r\n <div className=\"w-20 h-28 sm:w-24 sm:h-36 md:w-28 md:h-40 relative\">\r\n { (playerHand.length + aiHand.length) < fullDeck.length ? (\r\n <div className=\"absolute inset-0\">\r\n <Card isFaceDown={true} card={{}} videoCards={videoCards} \/>\r\n <\/div>\r\n ) : (\r\n <div className=\"w-full h-full bg-black\/30 rounded-xl flex items-center justify-center text-gray-500\">Vazio<\/div>\r\n )}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n <div className=\"fixed bottom-2 right-2 bg-black bg-opacity-70 text-white p-2 rounded-lg w-64 h-48 overflow-y-auto text-xs font-mono hidden md:block\">\r\n <h4 className=\"font-bold mb-2\">LOG DE COMBATE<\/h4>\r\n {debugLog.map((logMsg, index) => <p key={index} className=\"whitespace-pre-wrap\">{logMsg}<\/p>)}\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n <\/script>\r\n <script type=\"text\/babel\">\r\n const container = document.getElementById('root');\r\n const root = ReactDOM.createRoot(container);\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dracomania – Arena<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":413,"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":501,"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions\/501"}],"wp:attachment":[{"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Dracomania - Arena<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tone\/14.7.77\/Tone.js\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=MedievalSharp&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'MedievalSharp', cursive;\r\n background-image: url('');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: fixed;\r\n }\r\n @keyframes deal-and-flip {\r\n 0% { \r\n transform: translateY(100%) rotateY(180deg); \r\n opacity: 0; \r\n }\r\n 50% { \r\n transform: translateY(0) rotateY(180deg); \r\n opacity: 1; \r\n }\r\n 100% { \r\n transform: translateY(0) rotateY(0deg); \r\n opacity: 1; \r\n }\r\n }\r\n .animate-deal-in {\r\n animation: deal-and-flip 0.7s ease-out forwards;\r\n }\r\n @keyframes bounce-border {\r\n 0% {\r\n box-shadow: none;\r\n border-color: transparent;\r\n }\r\n 50% {\r\n box-shadow: 0 0 30px 10px rgba(250, 204, 21, 0.6);\r\n border-color: #fde047; \/* yellow-300 *\/\r\n }\r\n 100% {\r\n box-shadow: 0 0 20px 5px rgba(250, 204, 21, 0.4);\r\n border-color: #facc15; \/* yellow-400 *\/\r\n }\r\n }\r\n .animate-winner-border {\r\n animation: bounce-border 1.5s ease-out forwards;\r\n }\r\n @keyframes fade-in-text {\r\n 0% { opacity: 0; transform: scale(0.5); }\r\n 100% { opacity: 1; transform: scale(1); }\r\n }\r\n\r\n .animate-winner-text {\r\n animation: fade-in-text 1s ease-out forwards;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"module\">\r\n \/\/ --- SDKs do Firebase ---\r\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-app.js\";\r\n import { getAuth, signInAnonymously } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-auth.js\";\r\n import { getFirestore, collection, addDoc, query, onSnapshot, orderBy, limit } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\r\n\r\n \/\/ Disponibiliza as fun\u00e7\u00f5es do Firebase globalmente para o script Babel poder acess\u00e1-las.\r\n window.firebase = {\r\n initializeApp,\r\n getAuth,\r\n signInAnonymously,\r\n getFirestore,\r\n collection,\r\n addDoc,\r\n query,\r\n onSnapshot,\r\n orderBy,\r\n limit\r\n };\r\n <\/script>\r\n\r\n <script type=\"text\/babel\">\r\n \/\/ ==================================================================\r\n \/\/ CONFIGURA\u00c7\u00c3O DAS CARTAS COM V\u00cdDEO\r\n \/\/ Adicione aqui o n\u00famero de qualquer carta que tenha um v\u00eddeo.\r\n \/\/ ==================================================================\r\n const VIDEO_CARD_NUMBERS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 17, 18, 19, 20, 21, 22, 23, 24, 25, 27, 28, 29, 30, 31, 32];\r\n \/\/ ==================================================================\r\n\r\n \/\/ --- \u00cdcones SVG como Componentes ---\r\n const MagicIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"text-purple-400\"><path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.21 1.21 0 0 0 1.72 0L21.64 5.36a1.21 1.21 0 0 0 0-1.72Z\"><\/path><path d=\"m14 7 3 3\"><\/path><path d=\"M5 6v4\"><\/path><path d=\"M19 14v4\"><\/path><path d=\"M10 2v2\"><\/path><path d=\"M7 8H3\"><\/path><path d=\"M21 16h-4\"><\/path><path d=\"M11 3H9\"><\/path><\/svg>;\r\n const StrengthIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"text-red-500\"><path d=\"M20.83 18.83a4 4 0 0 0-5.66-5.66l-9-9a4 4 0 0 0-5.66 5.66l9 9a4 4 0 0 0 5.66 0Z\"><\/path><path d=\"m18 11 2-2\"><\/path><path d=\"m14 7 2-2\"><\/path><path d=\"m6 15-2 2\"><\/path><path d=\"m10 19-2 2\"><\/path><\/svg>;\r\n const FireIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"text-orange-500\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5Z\"><\/path><\/svg>;\r\n\r\n const cardData = [\r\n { \"nome\": \"Drag\u00e3o Mestre\", \"numero\": 1, \"magia\": 22, \"forca\": 26, \"fogo\": 29, \"color\": \"#FF5733\", \"lore\": \"Um arquidrag\u00e3o que dominou todas as formas de combate. Poucos viram sua f\u00faria e viveram para contar a hist\u00f3ria, tornando-se uma lenda sussurrada em tavernas e cortes reais.\" },\r\n { \"nome\": \"Drag\u00e3o Dourado\", \"numero\": 2, \"magia\": 16, \"forca\": 24, \"fogo\": 28, \"color\": \"#33FF57\", \"lore\": \"T\u00e3o antigo quanto as montanhas, coberto por escamas que valem mais que todos os tesouros dos reis. Dizem que seu bafo n\u00e3o queima, mas transforma tudo em ouro.\" },\r\n { \"nome\": \"Drag\u00e3o Prateado\", \"numero\": 3, \"magia\": 15, \"forca\": 21, \"fogo\": 27, \"color\": \"#3357FF\", \"lore\": \"Uma criatura da lua, que s\u00f3 desce dos c\u00e9us em noites de eclipse. Sua magia \u00e9 tecida com a luz das estrelas, e seu fogo congela em vez de queimar.\" },\r\n { \"nome\": \"Drag\u00e3o Bronze\", \"numero\": 4, \"magia\": 14, \"forca\": 20, \"fogo\": 26, \"color\": \"#FF33F5\", \"lore\": \"Forjado no cora\u00e7\u00e3o de um vulc\u00e3o por deuses ferreiros, seu corpo \u00e9 quase indestrut\u00edvel. Ele dorme em rios de lava, sonhando com batalhas antigas.\" },\r\n { \"nome\": \"Drag\u00e3o Cobre\", \"numero\": 5, \"magia\": 13, \"forca\": 19, \"fogo\": 25, \"color\": \"#33FFF5\", \"lore\": \"Um mestre da ilus\u00e3o e do engano. Suas escamas refletem a paisagem, tornando-o quase invis\u00edvel. Ele ataca quando suas v\u00edtimas est\u00e3o mais confusas.\" },\r\n { \"nome\": \"Drag\u00e3o Branco\", \"numero\": 6, \"magia\": 21, \"forca\": 15, \"fogo\": 22, \"color\": \"#FFBD33\", \"lore\": \"O terror das tundras geladas. Sua presen\u00e7a congela o ar, e sua f\u00faria \u00e9 uma avalanche de gelo e presas.\" },\r\n { \"nome\": \"Drag\u00e3o Negro\", \"numero\": 7, \"magia\": 19, \"forca\": 17, \"fogo\": 24, \"color\": \"#8D33FF\", \"lore\": \"Nascido da escurid\u00e3o entre as estrelas, corrompido por uma magia proibida. Seu fogo \u00e9 uma praga que devora a pr\u00f3pria vida.\" },\r\n { \"nome\": \"Drag\u00e3o Vermelho\", \"numero\": 8, \"magia\": 20, \"forca\": 16, \"fogo\": 23, \"color\": \"#33FFBD\", \"lore\": \"A encarna\u00e7\u00e3o da f\u00faria e da gan\u00e2ncia. Acumula tesouros e incinera qualquer um que ouse cobi\u00e7ar seu ouro.\" },\r\n { \"nome\": \"Drag\u00e3o Azul\", \"numero\": 9, \"magia\": 18, \"forca\": 13, \"fogo\": 21, \"color\": \"#FF338D\", \"lore\": \"Senhor das tempestades, suas asas criam furac\u00f5es e seu rugido \u00e9 o pr\u00f3prio trov\u00e3o. Ele dan\u00e7a entre os raios, intoc\u00e1vel e mortal.\" },\r\n { \"nome\": \"Drag\u00e3o Verde\", \"numero\": 10, \"magia\": 17, \"forca\": 14, \"fogo\": 20, \"color\": \"#BDFF33\", \"lore\": \"Guardi\u00e3o das florestas ancestrais. Seu bafo venenoso pode dissolver a\u00e7o, e as pr\u00f3prias \u00e1rvores se curvam para proteg\u00ea-lo.\" },\r\n { \"nome\": \"Cavaleiro\", \"numero\": 11, \"magia\": 6, \"forca\": 23, \"fogo\": 11, \"color\": \"#8DFF33\", \"lore\": \"Jurou ca\u00e7ar o Drag\u00e3o Negro que destruiu sua vila. Sua armadura foi aben\u00e7oada para resistir ao fogo, mas seu cora\u00e7\u00e3o ainda queima por vingan\u00e7a.\" },\r\n { \"nome\": \"Colosso\", \"numero\": 12, \"magia\": 0, \"forca\": 30, \"fogo\": 0, \"color\": \"#338DFF\", \"lore\": \"Uma est\u00e1tua de guerra animada por uma alma perdida. N\u00e3o sente dor, n\u00e3o conhece o medo. Existe apenas para esmagar.\" },\r\n { \"nome\": \"Feiticeira\", \"numero\": 13, \"magia\": 28, \"forca\": 2, \"fogo\": 19, \"color\": \"#F533FF\", \"lore\": \"Trocou sua humanidade por poder arcano. Seus feiti\u00e7os podem dobrar a realidade, mas cada encantamento cobra um peda\u00e7o de sua alma.\" },\r\n { \"nome\": \"Guerreira\", \"numero\": 14, \"magia\": 5, \"forca\": 22, \"fogo\": 9, \"color\": \"#FF3333\", \"lore\": \"A campe\u00e3 invicta da arena. Luta n\u00e3o por gl\u00f3ria, mas para comprar a liberdade de sua fam\u00edlia, escravizada por um rei tirano.\" },\r\n { \"nome\": \"Guerreiro\", \"numero\": 15, \"magia\": 4, \"forca\": 25, \"fogo\": 8, \"color\": \"#33FF33\", \"lore\": \"Um mercen\u00e1rio cuja \u00fanica lealdade \u00e9 ao ouro. Sua espada j\u00e1 serviu a reis e dem\u00f4nios, e ele n\u00e3o se importa com quem ser\u00e1 o pr\u00f3ximo.\" },\r\n { \"nome\": \"Her\u00f3i\", \"numero\": 16, \"magia\": 12, \"forca\": 27, \"fogo\": 15, \"color\": \"#3333FF\", \"lore\": \"O escolhido de uma profecia antiga, destinado a unir os reinos contra a escurid\u00e3o iminente. Carrega o peso do mundo em seus ombros.\" },\r\n { \"nome\": \"Lobisomem\", \"numero\": 17, \"magia\": 11, \"forca\": 18, \"fogo\": 10, \"color\": \"#FF8D33\", \"lore\": \"Amaldi\u00e7oado pela lua, ele ca\u00e7a nas noites para saciar uma fome que nunca termina. Durante o dia, \u00e9 um homem atormentado pela culpa.\" },\r\n { \"nome\": \"Mago\", \"numero\": 18, \"magia\": 29, \"forca\": 4, \"fogo\": 17, \"color\": \"#33BDFF\", \"lore\": \"Um estudioso das artes arcanas que busca o conhecimento supremo. Ele acredita que a magia \u00e9 a chave para a imortalidade e n\u00e3o hesitar\u00e1 em sacrificar outros para alcan\u00e7\u00e1-la.\" },\r\n { \"nome\": \"Merlin\", \"numero\": 19, \"magia\": 30, \"forca\": 0, \"fogo\": 0, \"color\": \"#8DFFBD\", \"lore\": \"O arquimago que viu o in\u00edcio e ver\u00e1 o fim. Seu poder \u00e9 t\u00e3o vasto que he raramente interfere, pois sabe que cada a\u00e7\u00e3o tem consequ\u00eancias milenares.\" },\r\n { \"nome\": \"M\u00famia\", \"numero\": 20, \"magia\": 9, \"forca\": 9, \"fogo\": 3, \"color\": \"#FF33BD\", \"lore\": \"Um fara\u00f3 tra\u00eddo e mumificado vivo. Despertado por ladr\u00f5es de tumba, ele agora vaga pelo deserto, buscando vingan\u00e7a contra os descendentes de seus inimigos.\" },\r\n { \"nome\": \"P\u00e9gasus\", \"numero\": 21, \"magia\": 23, \"forca\": 12, \"fogo\": 12, \"color\": \"#BD33FF\", \"lore\": \"Nascido da espuma do mar e do sangue de uma g\u00f3rgona, esta criatura celestial serve apenas aos de cora\u00e7\u00e3o puro, levando-os para batalhas nos c\u00e9us.\" },\r\n { \"nome\": \"Sacerdote\", \"numero\": 22, \"magia\": 26, \"forca\": 5, \"fogo\": 18, \"color\": \"#33FF8D\", \"lore\": \"Um canal para o poder dos deuses. Ele pode curar os doentes e queimar os profanos com fogo sagrado, mas sua f\u00e9 \u00e9 constantemente testada.\" },\r\n { \"nome\": \"Sombra\", \"numero\": 23, \"magia\": 8, \"forca\": 7, \"fogo\": 1, \"color\": \"#F5FF33\", \"lore\": \"Uma entidade nascida do medo e do segredo. Alimenta-se de sussurros e espreita nos cantos escuros, uma adaga invis\u00edvel pronta para atacar.\" },\r\n { \"nome\": \"B\u00e1rbaro\", \"numero\": 24, \"magia\": 3, \"forca\": 29, \"fogo\": 5, \"color\": \"#33F5FF\", \"lore\": \"Exilado de sua tribo por sua f\u00faria incontrol\u00e1vel. Agora, ele vaga pelas terras selvagens, sua for\u00e7a uma b\u00ean\u00e7\u00e3o e uma maldi\u00e7\u00e3o.\" },\r\n { \"nome\": \"Viking\", \"numero\": 25, \"magia\": 2, \"forca\": 28, \"fogo\": 6, \"color\": \"#FF33F5\", \"lore\": \"Um navegador destemido que busca Valhalla. Ele acredita que uma morte gloriosa em batalha \u00e9 a maior honra que um guerreiro pode alcan\u00e7ar.\" },\r\n { \"nome\": \"Bruxa\", \"numero\": 26, \"magia\": 27, \"forca\": 3, \"fogo\": 16, \"color\": \"#33BD33\", \"lore\": \"Vive em um p\u00e2ntano isolado, fazendo pactos com criaturas antigas. Suas maldi\u00e7\u00f5es podem apodrecer colheitas e azedar o sangue, e ela cobra um pre\u00e7o alto por seus favores.\" },\r\n { \"nome\": \"Elfo\", \"numero\": 27, \"magia\": 25, \"forca\": 6, \"fogo\": 14, \"color\": \"#8D33BD\", \"lore\": \"Um arqueiro imortal da floresta crepuscular. Ele viu imp\u00e9rios nascerem e ru\u00edrem e luta para proteger o pouco de magia que ainda resta no mundo.\" },\r\n { \"nome\": \"Anjo\", \"numero\": 28, \"magia\": 24, \"forca\": 1, \"fogo\": 7, \"color\": \"#FF8D8D\", \"lore\": \"Um mensageiro celestial enviado para julgar os mortais. Sua beleza esconde um poder terr\u00edvel, e sua espada queima com a justi\u00e7a implac\u00e1vel dos c\u00e9us.\" },\r\n { \"nome\": \"Gigante de Lava\", \"numero\": 29, \"magia\": 0, \"forca\": 0, \"fogo\": 30, \"color\": \"#33BD8D\", \"lore\": \"Um elemental primordial, a pr\u00f3pria ira do vulc\u00e3o encarnada. Ele n\u00e3o tem pensamentos ou planos, apenas um desejo infinito de queimar e consumir.\" },\r\n { \"nome\": \"Esqueleto\", \"numero\": 30, \"magia\": 7, \"forca\": 8, \"fogo\": 2, \"color\": \"#8D8DFF\", \"lore\": \"Um soldado ca\u00eddo, reanimado por um necromante para lutar mais uma vez. Sem mem\u00f3rias ou vontade, ele obedece cegamente, um eco eterno da guerra.\" },\r\n { \"nome\": \"Orc\", \"numero\": 31, \"magia\": 1, \"forca\": 10, \"fogo\": 4, \"color\": \"#FFBD8D\", \"lore\": \"Nascido para a batalha, criado em uma cultura onde apenas os fortes sobrevivem. Ele despreza a fraqueza e vive pela emo\u00e7\u00e3o do combate.\" },\r\n { \"nome\": \"Unic\u00f3rnio\", \"numero\": 32, \"magia\": 10, \"forca\": 11, \"fogo\": 13, \"color\": \"#33FFBD\", \"lore\": \"A criatura mais pura da floresta, cujo chifre pode curar qualquer veneno. Ele s\u00f3 se revela para aqueles com inten\u00e7\u00f5es nobres, e sua magia \u00e9 um b\u00e1lsamo para a terra.\" },\r\n ];\r\n\r\n const Card = React.memo(({ card, isFaceDown, isSelected, isGolden, onClick, showAttributes, onAttributeSelect, isPlayable, inBattle, battleAttribute, videoCards, isSoundActive, animationStyle, className = '' }) => {\r\n if (!card) return null; \r\n const cardBaseStyle = \"w-full h-full rounded-xl shadow-lg transition-all duration-300 transform relative overflow-hidden flex flex-col justify-between p-2 border-4 bg-gray-700\";\r\n const selectedStyle = isSelected ? 'border-blue-500 scale-105 shadow-2xl -translate-y-4' : 'border-transparent hover:-translate-y-2';\r\n const goldenStyle = isGolden ? 'shadow-yellow-400\/50 ring-4 ring-yellow-400 ring-offset-2 ring-offset-gray-900' : '';\r\n \r\n const hasVideo = videoCards.has(card.numero);\r\n const imageUrl = `https:\/\/teste.doriedsonjunior.com\/cartas_recortadas\/carta_${String(card.numero).padStart(2, '0')}.jpg`;\r\n\r\n if (isFaceDown) {\r\n return (\r\n <div className={`${cardBaseStyle}`}>\r\n <img decoding=\"async\" src=\"https:\/\/teste.doriedsonjunior.com\/cartas_recortadas\/verso.jpg\" alt=\"Verso da Carta\" className=\"w-full h-full object-cover rounded-md\" \/>\r\n <\/div>\r\n );\r\n }\r\n\r\n return (\r\n <div \r\n className={`${cardBaseStyle} ${selectedStyle} ${goldenStyle} ${isPlayable ? 'cursor-pointer' : 'cursor-default'} ${className}`}\r\n onClick={onClick}\r\n style={animationStyle}\r\n >\r\n <img \r\n src={imageUrl} \r\n alt={card.nome} \r\n className=\"absolute inset-0 w-full h-full object-cover rounded-lg\" \r\n onError={(e) => { e.target.onerror = null; e.target.src='https:\/\/placehold.co\/244x371\/333333\/ffffff?text=Imagem+Nao+Encontrada'; }} \r\n \/>\r\n <div className=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent\"><\/div>\r\n\r\n {showAttributes && (\r\n <div className=\"relative z-10 bg-black\/60 rounded-lg p-2 mt-auto text-white text-sm\">\r\n <button onClick={(e) => { e.stopPropagation(); onAttributeSelect('magia'); }} className=\"flex items-center justify-between w-full p-1 rounded transition-colors bg-yellow-950\/50 border border-yellow-800\/50 text-yellow-200 hover:bg-purple-900\/70 hover:border-purple-500\">\r\n <MagicIcon \/> <span className=\"font-semibold\">Magia<\/span> <span>{card.magia}<\/span>\r\n <\/button>\r\n <button onClick={(e) => { e.stopPropagation(); onAttributeSelect('forca'); }} className=\"flex items-center justify-between w-full p-1 rounded transition-colors bg-yellow-950\/50 border border-yellow-800\/50 text-yellow-200 hover:bg-red-900\/70 hover:border-red-500\">\r\n <StrengthIcon \/> <span className=\"font-semibold\">For\u00e7a<\/span> <span>{card.forca}<\/span>\r\n <\/button>\r\n <button onClick={(e) => { e.stopPropagation(); onAttributeSelect('fogo'); }} className=\"flex items-center justify-between w-full p-1 rounded transition-colors bg-yellow-950\/50 border border-yellow-800\/50 text-yellow-200 hover:bg-orange-900\/70 hover:border-orange-500\">\r\n <FireIcon \/> <span className=\"font-semibold\">Fogo<\/span> <span>{card.fogo}<\/span>\r\n <\/button>\r\n <\/div>\r\n )}\r\n <\/div>\r\n );\r\n });\r\n \r\n const FlippableCard = ({ card, playSound, videoCards, startFlipped, battleAttribute, isWinner }) => {\r\n const [isFlipped, setIsFlipped] = React.useState(startFlipped);\r\n\r\n React.useEffect(() => {\r\n const flip = setTimeout(() => setIsFlipped(false), 500);\r\n return () => clearTimeout(flip);\r\n }, [card]); \r\n\r\n if (!card) return null;\r\n\r\n const hasVideo = videoCards.has(card.numero);\r\n const videoUrl = `https:\/\/teste.doriedsonjunior.com\/cartas_recortadas\/videos\/carta_${String(card.numero).padStart(2, '0')}.mp4`;\r\n const frontImageUrl = `https:\/\/teste.doriedsonjunior.com\/cartas_recortadas\/carta_${String(card.numero).padStart(2, '0')}.jpg`;\r\n const backImageUrl = `https:\/\/teste.doriedsonjunior.com\/cartas_recortadas\/verso.jpg`;\r\n \r\n const winnerClass = isWinner ? 'animate-winner-border' : '';\r\n\r\n return (\r\n <div \r\n className=\"w-full h-full [perspective:1000px] cursor-pointer\" \r\n onClick={() => setIsFlipped(prev => !prev)}\r\n >\r\n <div \r\n className={`relative w-full h-full transition-transform duration-700 ease-in-out [transform-style:preserve-3d] ${isFlipped ? '[transform:rotateY(180deg)]' : ''}`}\r\n >\r\n {\/* Face da Frente *\/}\r\n <div className={`absolute w-full h-full [backface-visibility:hidden] rounded-xl overflow-hidden shadow-lg flex flex-col justify-end border-4 border-gray-800 ${winnerClass}`}>\r\n {hasVideo ? (\r\n <video \r\n src={videoUrl} \r\n autoPlay \r\n loop \r\n muted={!playSound}\r\n playsInline\r\n className=\"absolute inset-0 w-full h-full object-cover\" \r\n \/>\r\n ) : (\r\n <img \r\n src={frontImageUrl} \r\n alt={card.nome} \r\n className=\"absolute inset-0 w-full h-full object-cover\" \r\n onError={(e) => { e.target.onerror = null; e.target.src='https:\/\/placehold.co\/244x371\/333333\/ffffff?text=Imagem+Nao+Encontrada'; }} \r\n \/>\r\n )}\r\n <div className=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent\"><\/div>\r\n {battleAttribute && (\r\n <div className=\"relative z-10 text-center text-white font-bold mb-2\">\r\n <span className=\"text-lg bg-black\/70 px-3 py-1 rounded-full uppercase\">{battleAttribute}: {card[battleAttribute]}<\/span>\r\n <\/div>\r\n )}\r\n {isWinner && (\r\n <div className=\"absolute inset-0 flex items-center justify-center\">\r\n <span className=\"text-5xl font-black text-yellow-300 text-shadow-lg animate-winner-text\" style={{textShadow: '2px 2px 4px rgba(0,0,0,0.8)'}}>WINNER<\/span>\r\n <\/div>\r\n )}\r\n <\/div>\r\n {\/* Face do Verso *\/}\r\n <div className={`absolute w-full h-full [backface-visibility:hidden] [transform:rotateY(180deg)] rounded-xl overflow-hidden shadow-lg border-4 border-gray-800 ${winnerClass}`}>\r\n <img src={backImageUrl} alt=\"Verso da Carta\" className=\"w-full h-full object-cover\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const HelpModal = ({ onClose }) => (\r\n <div className=\"fixed inset-0 bg-black\/75 backdrop-blur-sm flex items-center justify-center z-50\" onClick={onClose}>\r\n <div className=\"bg-black\/30 backdrop-blur-lg border border-yellow-800\/30 p-6 rounded-lg max-w-lg w-11\/12 text-white\" onClick={(e) => e.stopPropagation()}>\r\n <h2 className=\"text-3xl font-bold mb-4 text-yellow-400 text-center\">Como Jogar<\/h2>\r\n <div className=\"space-y-4 text-lg\">\r\n <p><strong className=\"text-blue-400\">Objetivo:<\/strong> Vencer mais rodadas que a IA. O jogo tem 10 rodadas.<\/p>\r\n <p><strong className=\"text-blue-400\">Turno de Ataque:<\/strong> Quando for sua vez, clique em uma carta da sua m\u00e3o e depois escolha um dos tr\u00eas atributos (Magia, For\u00e7a ou Fogo) para batalhar.<\/p>\r\n <p><strong className=\"text-blue-400\">Turno de Defesa:<\/strong> Quando a IA atacar, ela escolher\u00e1 uma carta e um atributo. Voc\u00ea deve escolher uma carta da sua m\u00e3o para se defender.<\/p>\r\n <p><strong className=\"text-blue-400\">Resultado:<\/strong> A carta com o maior valor no atributo escolhido vence a rodada. O vencedor da rodada come\u00e7a o pr\u00f3ximo ataque.<\/p>\r\n <p><strong className=\"text-yellow-500\">Dica de Mestre:<\/strong> A nova IA Gemini \u00e9 imprevis\u00edvel. Preste aten\u00e7\u00e3o em suas jogadas para tentar antecipar sua estrat\u00e9gia!<\/p>\r\n <\/div>\r\n <button onClick={onClose} className=\"mt-6 w-full bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold py-2 px-4 rounded-lg transition-all duration-300\">Entendido!<\/button>\r\n <\/div>\r\n <\/div>\r\n );\r\n\r\n const LoreModal = ({ card, onClose, videoCards }) => {\r\n if (!card) return null;\r\n const hasVideo = videoCards.has(card.numero);\r\n return (\r\n <div className=\"fixed inset-0 bg-black\/75 backdrop-blur-sm flex items-center justify-center z-50\" onClick={onClose}>\r\n <div className=\"bg-black\/30 backdrop-blur-lg border border-yellow-800\/30 p-4 md:p-6 rounded-lg max-w-3xl w-11\/12 flex flex-col md:flex-row gap-6\" onClick={(e) => e.stopPropagation()}>\r\n <div className=\"w-full md:w-1\/2 lg:w-1\/3 flex-shrink-0\">\r\n <div className=\"w-full aspect-[2\/3]\">\r\n <FlippableCard card={card} playSound={hasVideo} videoCards={videoCards} startFlipped={true}\/>\r\n <\/div>\r\n <p className=\"text-center text-xs text-gray-400 mt-2 italic\">Clique na carta para virar<\/p>\r\n <\/div>\r\n <div className=\"text-white flex flex-col\">\r\n <h2 className=\"text-3xl font-bold mb-2\" style={{color: card.color}}>{card.nome}<\/h2>\r\n <p className=\"text-lg flex-grow overflow-y-auto\">{card.lore}<\/p>\r\n <button onClick={onClose} className=\"mt-4 w-full bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold py-2 px-4 rounded-lg transition-all duration-300\">Fechar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const AllCardsModal = ({ cards, onCardSelect, onClose, videoCards }) => {\r\n const [selectedCard, setSelectedCard] = React.useState(null);\r\n \r\n const handleCardClick = (card) => {\r\n setSelectedCard(card);\r\n onCardSelect(card);\r\n };\r\n\r\n return (\r\n <div className=\"fixed inset-0 bg-black\/75 backdrop-blur-sm flex items-center justify-center z-50\" onClick={onClose}>\r\n <div className=\"bg-black\/30 backdrop-blur-lg border border-yellow-800\/30 p-4 md:p-6 rounded-lg max-h-[80vh] overflow-y-auto w-11\/12 max-w-4xl\" onClick={(e) => e.stopPropagation()}>\r\n <h2 className=\"text-2xl font-bold mb-4 text-center text-yellow-400\">Todas as Cartas da Arena<\/h2>\r\n <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4\">\r\n {cards.map(card => (\r\n <div key={card.numero} className=\"w-full aspect-[2\/3] cursor-pointer\">\r\n <Card \r\n card={card} \r\n isPlayable={true} \r\n onClick={() => handleCardClick(card)}\r\n isSelected={selectedCard?.numero === card.numero}\r\n videoCards={videoCards}\r\n isSoundActive={false}\r\n \/>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <button onClick={onClose} className=\"mt-6 w-full bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold py-2 px-4 rounded-lg transition-all duration-300\">Fechar<\/button>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n function App() {\r\n \/\/ ==================================================================\r\n \/\/ CONFIGURA\u00c7\u00c3O DO FIREBASE - DADOS DO SEU PROJETO\r\n \/\/ ==================================================================\r\n const firebaseConfig = {\r\n apiKey: \"AIzaSyAYXDwFiOEKzH5rkwylgaDcNB8e30YyNjg\",\r\n authDomain: \"dracomania-arena.firebaseapp.com\",\r\n projectId: \"dracomania-arena\",\r\n storageBucket: \"dracomania-arena.firebasestorage.app\",\r\n messagingSenderId: \"205155005889\",\r\n appId: \"1:205155005889:web:42d5426ec2bc528a7a2b40\"\r\n };\r\n \/\/ ==================================================================\r\n\r\n const [gameState, setGameState] = React.useState('start');\r\n const [playerHand, setPlayerHand] = React.useState([]);\r\n const [fullPlayerHand, setFullPlayerHand] = React.useState([]);\r\n const [aiHand, setAiHand] = React.useState([]);\r\n const [round, setRound] = React.useState(0);\r\n const [playerScore, setPlayerScore] = React.useState(0);\r\n const [aiScore, setAiScore] = React.useState(0);\r\n const [turnHolder, setTurnHolder] = React.useState(null);\r\n const [selectedPlayerCard, setSelectedPlayerCard] = React.useState(null);\r\n const [playerPlayedCard, setPlayerPlayedCard] = React.useState(null);\r\n const [aiPlayedCard, setAiPlayedCard] = React.useState(null);\r\n const [chosenAttribute, setChosenAttribute] = React.useState(null);\r\n const [message, setMessage] = React.useState('Bem-vindo ao Duelo de Atributos!');\r\n const [activeModal, setActiveModal] = React.useState(null);\r\n const [debugLog, setDebugLog] = React.useState([]);\r\n const [videoCards] = React.useState(new Set(VIDEO_CARD_NUMBERS));\r\n const [activeSoundCardNumero, setActiveSoundCardNumero] = React.useState(null);\r\n const [roundWinner, setRoundWinner] = React.useState(null);\r\n\r\n \/\/ Estados do Firebase\r\n const [db, setDb] = React.useState(null);\r\n const [highscores, setHighscores] = React.useState([]);\r\n const [playerName, setPlayerName] = React.useState(\"\");\r\n const [scoreSaved, setScoreSaved] = React.useState(false);\r\n \r\n const log = React.useCallback((msg) => {\r\n setDebugLog(prev => [`[${new Date().toLocaleTimeString()}] ${msg}`, ...prev].slice(0, 15));\r\n console.log(msg); \/\/ Adiciona log no console do navegador tamb\u00e9m\r\n }, []);\r\n \r\n const fullDeck = cardData;\r\n\r\n \/\/ --- Inicializa\u00e7\u00e3o do Firebase ---\r\n React.useEffect(() => {\r\n let unsubscribe = () => {};\r\n\r\n const initFirebase = async () => {\r\n try {\r\n const {\r\n initializeApp, getAuth, signInAnonymously, getFirestore,\r\n collection, query, onSnapshot, orderBy, limit\r\n } = window.firebase;\r\n \r\n if (!firebaseConfig.apiKey) {\r\n log(\"Configura\u00e7\u00e3o do Firebase n\u00e3o preenchida. Recordes desativados.\");\r\n return;\r\n }\r\n\r\n const app = initializeApp(firebaseConfig);\r\n const auth = getAuth(app);\r\n const firestoreDb = getFirestore(app);\r\n setDb(firestoreDb);\r\n\r\n await signInAnonymously(auth);\r\n log(\"Autenticado com sucesso no Firebase.\");\r\n \r\n const highscoresCol = collection(firestoreDb, \"highscores\");\r\n const q = query(highscoresCol, orderBy(\"score\", \"desc\"), limit(10));\r\n\r\n unsubscribe = onSnapshot(q, (querySnapshot) => {\r\n const scores = [];\r\n querySnapshot.forEach((doc) => {\r\n scores.push({ id: doc.id, ...doc.data() });\r\n });\r\n setHighscores(scores);\r\n log(\"Recordes carregados.\");\r\n }, (err) => {\r\n console.error(\"Firestore snapshot error:\", err);\r\n log(`Erro ao buscar recordes: ${err.message}`);\r\n if (err.code === 'failed-precondition') {\r\n log(\"DICA: O erro 'failed-precondition' geralmente significa que um \u00edndice do Firestore \u00e9 necess\u00e1rio. Verifique o console de depura\u00e7\u00e3o do navegador para um link para criar o \u00edndice.\");\r\n }\r\n });\r\n\r\n } catch (error) {\r\n console.error(\"Firebase initialization failed:\", error);\r\n log(`Firebase falhou: ${error.message}`);\r\n if (error.code === 'auth\/configuration-not-found') {\r\n log(\"ERRO: Autentica\u00e7\u00e3o An\u00f4nima n\u00e3o est\u00e1 ativada no seu projeto Firebase.\");\r\n log(\"V\u00e1 para o Console do Firebase > Authentication > Sign-in method e ative o provedor 'An\u00f4nimo'.\");\r\n setMessage(\"Erro de configura\u00e7\u00e3o do Firebase. Recordes desativados.\");\r\n }\r\n }\r\n };\r\n\r\n initFirebase();\r\n\r\n return () => {\r\n unsubscribe();\r\n };\r\n }, [log]);\r\n\r\n\r\n const playSound = React.useCallback((soundType) => {\r\n if (typeof Tone === 'undefined' || Tone.context.state !== 'running') {\r\n return;\r\n }\r\n const synth = new Tone.Synth({ volume: -30 }).toDestination();\r\n switch(soundType) {\r\n case 'start': synth.triggerAttackRelease(\"C4\", \"8n\"); break;\r\n case 'select': new Tone.MembraneSynth({ volume: -28 }).toDestination().triggerAttackRelease(\"C2\", \"8n\"); break;\r\n case 'play': new Tone.PluckSynth({ volume: -28 }).toDestination().triggerAttack(\"C4\"); break;\r\n case 'win': new Tone.Synth({ volume: -30 }).toDestination().triggerAttackRelease(\"G4\", \"8n\", Tone.now() + 0.1); break;\r\n case 'lose': new Tone.Synth({ volume: -30 }).toDestination().triggerAttackRelease(\"C3\", \"8n\", Tone.now()); break;\r\n case 'tie': new Tone.Synth({ volume: -30 }).toDestination().triggerAttackRelease(\"E4\", \"8n\"); break;\r\n }\r\n }, []);\r\n \r\n \/\/ --- L\u00d3GICA DA IA COM GEMINI ---\r\n const getAiDecisionFromGemini = async (prompt) => {\r\n log(\"Consultando a IA Gemini...\");\r\n try {\r\n const apiKey = \"AIzaSyDqW6oWRiktNhwfZeSpxSyjIZlyPPWGf4c\"; \/\/ Sua chave da API Gemini\r\n const apiUrl = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.0-flash:generateContent?key=${apiKey}`;\r\n \r\n const payload = {\r\n contents: [{ role: \"user\", parts: [{ text: prompt }] }],\r\n };\r\n\r\n const response = await fetch(apiUrl, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(payload)\r\n });\r\n\r\n if (!response.ok) {\r\n const errorBody = await response.text();\r\n throw new Error(`API Error: ${response.status} ${response.statusText} - ${errorBody}`);\r\n }\r\n\r\n const result = await response.json();\r\n \r\n if (result.candidates && result.candidates.length > 0 && result.candidates[0].content.parts[0].text) {\r\n const textResponse = result.candidates[0].content.parts[0].text;\r\n log(\"Gemini respondeu: \" + textResponse);\r\n \/\/ Limpa a resposta para garantir que seja um JSON v\u00e1lido\r\n const jsonString = textResponse.replace(\/```json\/g, '').replace(\/```\/g, '').trim();\r\n return JSON.parse(jsonString);\r\n } else {\r\n throw new Error(\"Resposta da API inv\u00e1lida ou vazia.\");\r\n }\r\n } catch (error) {\r\n console.error(\"Erro ao chamar a API Gemini:\", error);\r\n log(\"Erro na IA Gemini. Usando l\u00f3gica de fallback.\");\r\n return null; \/\/ Retorna nulo para acionar a l\u00f3gica de fallback\r\n }\r\n };\r\n\r\n\r\n const startGame = React.useCallback(() => {\r\n if (typeof Tone !== 'undefined') {\r\n Tone.start();\r\n }\r\n playSound('start');\r\n setGameState('dealing');\r\n setMessage('Embaralhando as cartas...');\r\n setPlayerScore(0);\r\n setAiScore(0);\r\n setRound(0);\r\n setSelectedPlayerCard(null);\r\n setPlayerPlayedCard(null);\r\n setAiPlayedCard(null);\r\n setScoreSaved(false);\r\n setPlayerName(\"\");\r\n setPlayerHand([]);\r\n\r\n let deck = [...fullDeck].sort(() => Math.random() - 0.5);\r\n const playerInitialHand = deck.slice(0, 10);\r\n const aiInitialHand = deck.slice(10, 20);\r\n \r\n setFullPlayerHand(playerInitialHand);\r\n setAiHand(aiInitialHand);\r\n \r\n const starter = Math.random() < 0.5 ? 'player' : 'ai';\r\n setTurnHolder(starter);\r\n \r\n log('--- NOVO JOGO ---');\r\n log(`O primeiro a atacar \u00e9: ${starter.toUpperCase()}`);\r\n\r\n \/\/ Staggered dealing animation\r\n playerInitialHand.forEach((card, index) => {\r\n setTimeout(() => {\r\n setPlayerHand(prev => [...prev, card]);\r\n if (index === playerInitialHand.length - 1) {\r\n setTimeout(() => {\r\n setMessage(starter === 'player' ? 'Rodada 1. A sorte foi lan\u00e7ada! Voc\u00ea come\u00e7a.' : 'Rodada 1. A IA come\u00e7a o duelo!');\r\n if (starter === 'ai') {\r\n setGameState('ai_turn');\r\n } else {\r\n setGameState('player_turn_select_card');\r\n }\r\n }, 500);\r\n }\r\n }, index * 200);\r\n });\r\n\r\n }, [fullDeck, playSound, log]);\r\n\r\n const resolveRound = React.useCallback((pCard, aCard, attr) => {\r\n if (!pCard || !aCard || !attr) {\r\n log(\"ERRO: Tentativa de resolver rodada com dados inv\u00e1lidos.\");\r\n setMessage(\"Ocorreu um erro, a rodada ser\u00e1 reiniciada.\");\r\n setGameState('round_result'); \r\n return;\r\n }\r\n let playerValue = pCard[attr];\r\n let aiValue = aCard[attr];\r\n let roundMessage = `Rodada ${round + 1}: ${pCard.nome} (${attr}: ${playerValue}) vs ${aCard.nome} (${attr}: ${aiValue}). `;\r\n let nextTurnHolder = turnHolder;\r\n \r\n if (playerValue > aiValue) {\r\n setPlayerScore(s => s + 1);\r\n roundMessage += \"Voc\u00ea venceu a rodada!\";\r\n playSound('win');\r\n nextTurnHolder = 'player';\r\n setTimeout(() => setRoundWinner('player'), 2000);\r\n } else if (aiValue > playerValue) {\r\n setAiScore(s => s + 1);\r\n roundMessage += \"A IA venceu a rodada!\";\r\n playSound('lose');\r\n nextTurnHolder = 'ai';\r\n setTimeout(() => setRoundWinner('ai'), 2000);\r\n } else {\r\n roundMessage += \"Empate na rodada!\";\r\n playSound('tie');\r\n setRoundWinner('tie');\r\n }\r\n \r\n setMessage(roundMessage);\r\n log(`FIM DA RODADA ${round + 1}: ${roundMessage}`);\r\n setTurnHolder(nextTurnHolder);\r\n setGameState('round_result');\r\n }, [round, turnHolder, log, playSound]);\r\n\r\n const handlePlayerCardSelect = React.useCallback((card) => {\r\n if (gameState !== 'player_turn_select_card' && gameState !== 'player_turn_choose_attribute') return;\r\n \r\n if (aiPlayedCard) {\r\n log(`Jogador responde com: ${card.nome}.`);\r\n playSound('play');\r\n setPlayerPlayedCard(card);\r\n setActiveSoundCardNumero(card.numero);\r\n setPlayerHand(prevHand => prevHand.filter(c => c.numero !== card.numero));\r\n resolveRound(card, aiPlayedCard, chosenAttribute);\r\n return;\r\n }\r\n\r\n if (selectedPlayerCard && selectedPlayerCard.numero === card.numero) {\r\n setSelectedPlayerCard(null);\r\n setMessage('Escolha uma carta.');\r\n } else {\r\n log(`Jogador selecionou: ${card.nome}.`);\r\n playSound('select');\r\n setSelectedPlayerCard(card);\r\n setMessage(`Voc\u00ea selecionou ${card.nome}. Escolha um atributo para a batalha.`);\r\n setGameState('player_turn_choose_attribute');\r\n }\r\n }, [gameState, aiPlayedCard, chosenAttribute, selectedPlayerCard, playSound, resolveRound, log]);\r\n\r\n const handleAttributeSelect = React.useCallback(async (attribute) => {\r\n if (gameState !== 'player_turn_choose_attribute' || !selectedPlayerCard) return;\r\n \r\n setGameState('ai_thinking');\r\n playSound('play');\r\n setChosenAttribute(attribute);\r\n setPlayerPlayedCard(selectedPlayerCard);\r\n setActiveSoundCardNumero(selectedPlayerCard.numero);\r\n setPlayerHand(prevHand => prevHand.filter(c => c.numero !== selectedPlayerCard.numero));\r\n \r\n setMessage(`Voc\u00ea jogou ${selectedPlayerCard.nome} com ${attribute.toUpperCase()}. A IA est\u00e1 pensando...`);\r\n log(`Jogador ataca com ${selectedPlayerCard.nome} (${attribute}: ${selectedPlayerCard[attribute]}).`);\r\n\r\n setTimeout(async () => {\r\n const prompt = `\r\n Voc\u00ea \u00e9 um jogador especialista no jogo de cartas Dracomania.\r\n \u00c9 sua vez de DEFENDER.\r\n O estado atual do jogo \u00e9:\r\n - Placar: Jogador ${playerScore} x ${aiScore} IA\r\n - Rodada: ${round + 1} de 7\r\n - Sua M\u00e3o (IA): ${JSON.stringify(aiHand.map(c => ({nome: c.nome, magia: c.magia, forca: c.forca, fogo: c.fogo})))}\r\n - O jogador atacou com a carta '${selectedPlayerCard.nome}' usando o atributo '${attribute}' com valor ${selectedPlayerCard[attribute]}.\r\n\r\n Analise sua m\u00e3o e o estado do jogo. Decida qual carta jogar em resposta.\r\n Considere se vale a pena vencer a rodada ou se \u00e9 melhor sacrificar uma carta fraca para poupar as melhores para depois.\r\n \r\n Responda APENAS com um objeto JSON no seguinte formato: {\"cardToPlay\": \"NOME_DA_CARTA\"}\r\n `;\r\n \r\n const decision = await getAiDecisionFromGemini(prompt);\r\n let cardToPlay;\r\n\r\n if (decision && decision.cardToPlay) {\r\n cardToPlay = aiHand.find(c => c.nome === decision.cardToPlay);\r\n }\r\n \r\n \/\/ L\u00f3gica de fallback caso a IA falhe ou escolha uma carta inv\u00e1lida\r\n if (!cardToPlay) {\r\n log(\"Fallback: IA escolhendo a melhor defesa poss\u00edvel (l\u00f3gica antiga).\");\r\n const playerValue = selectedPlayerCard[attribute];\r\n const winningCards = aiHand.filter(card => card[attribute] > playerValue);\r\n if (winningCards.length > 0) {\r\n winningCards.sort((a, b) => a[attribute] - b[attribute]);\r\n cardToPlay = winningCards[0];\r\n } else {\r\n const sacrificialLambs = aiHand.map(card => ({\r\n card,\r\n avg: (card.magia + card.forca + card.fogo) \/ 3\r\n })).sort((a, b) => a.avg - b.avg);\r\n cardToPlay = sacrificialLambs.length > 0 ? sacrificialLambs[0].card : aiHand[0];\r\n }\r\n }\r\n \r\n if (cardToPlay) {\r\n log(`IA defende com: ${cardToPlay.nome}.`);\r\n setAiPlayedCard(cardToPlay);\r\n setActiveSoundCardNumero(cardToPlay.numero);\r\n setAiHand(prevHand => prevHand.filter(c => c.numero !== cardToPlay.numero));\r\n \r\n const finalPlayerCard = selectedPlayerCard;\r\n setSelectedPlayerCard(null);\r\n\r\n setTimeout(() => {\r\n resolveRound(finalPlayerCard, cardToPlay, attribute);\r\n }, 1500);\r\n } else {\r\n log(\"ERRO CR\u00cdTICO: Nenhuma carta da IA p\u00f4de ser selecionada, nem pelo fallback.\");\r\n setMessage(\"A IA est\u00e1 confusa! A rodada ser\u00e1 reiniciada.\");\r\n setTimeout(() => {\r\n setGameState('round_result');\r\n }, 1500);\r\n }\r\n }, 2000);\r\n\r\n }, [gameState, selectedPlayerCard, aiHand, playerScore, aiScore, round, playSound, log, resolveRound]);\r\n\r\n const aiPlayTurn = React.useCallback(async () => {\r\n log(\"--- Turno da IA ---\");\r\n setMessage(`Rodada ${round + 1}. A IA (Gemini) est\u00e1 pensando...`);\r\n \r\n if (aiHand.length === 0) {\r\n setGameState('game_over');\r\n setMessage(\"A IA n\u00e3o tem mais cartas! Voc\u00ea venceu!\");\r\n log(\"IA sem cartas. Fim de jogo.\");\r\n return;\r\n }\r\n \r\n const prompt = `\r\n Voc\u00ea \u00e9 um jogador especialista no jogo de cartas Dracomania.\r\n \u00c9 sua vez de ATACAR.\r\n O estado atual do jogo \u00e9:\r\n - Placar: Jogador ${playerScore} x ${aiScore} IA\r\n - Rodada: ${round + 1} de 7\r\n - Sua M\u00e3o (IA): ${JSON.stringify(aiHand.map(c => ({nome: c.nome, magia: c.magia, forca: c.forca, fogo: c.fogo})))}\r\n\r\n Analise sua m\u00e3o e o estado do jogo. Escolha a melhor carta e o melhor atributo para jogar.\r\n Pense em estrat\u00e9gias como usar sua carta mais forte para garantir um ponto, blefar com uma carta fraca, ou guardar cartas fortes para o final.\r\n \r\n Responda APENAS com um objeto JSON no seguinte formato: {\"cardToPlay\": \"NOME_DA_CARTA\", \"attribute\": \"ATRIBUTO_ESCOLHIDO\"}\r\n O atributo deve ser 'magia', 'forca' ou 'fogo'.\r\n `;\r\n\r\n const decision = await getAiDecisionFromGemini(prompt);\r\n let cardToPlay, bestAttribute;\r\n\r\n if (decision && decision.cardToPlay && decision.attribute) {\r\n cardToPlay = aiHand.find(c => c.nome === decision.cardToPlay);\r\n bestAttribute = ['magia', 'forca', 'fogo'].includes(decision.attribute) ? decision.attribute : null;\r\n }\r\n\r\n \/\/ L\u00f3gica de fallback caso a IA falhe ou retorne dados inv\u00e1lidos\r\n if (!cardToPlay || !bestAttribute) {\r\n log(\"Fallback: IA escolhendo a jogada mais forte (l\u00f3gica antiga).\");\r\n let bestPlay = { card: null, attribute: null, value: -1 };\r\n aiHand.forEach(card => {\r\n ['magia', 'forca', 'fogo'].forEach(attr => {\r\n if (card[attr] > bestPlay.value) {\r\n bestPlay = { card: card, attribute: attr, value: card[attr] };\r\n }\r\n });\r\n });\r\n cardToPlay = bestPlay.card;\r\n bestAttribute = bestPlay.attribute;\r\n }\r\n \r\n setAiPlayedCard(cardToPlay);\r\n setActiveSoundCardNumero(cardToPlay.numero);\r\n setChosenAttribute(bestAttribute);\r\n setAiHand(prevHand => prevHand.filter(c => c.numero !== cardToPlay.numero));\r\n \r\n log(`IA ataca com ${cardToPlay.nome} usando ${bestAttribute} (${cardToPlay[bestAttribute]}).`);\r\n setMessage(`A IA jogou ${cardToPlay.nome} e escolheu ${bestAttribute.toUpperCase()}. Sua vez de responder!`);\r\n setGameState('player_turn_select_card');\r\n\r\n }, [aiHand, round, log, playerScore, aiScore]);\r\n \r\n const handleSaveScore = React.useCallback(async (e) => {\r\n e.preventDefault();\r\n if (!playerName.trim() || !db) {\r\n log(\"Nome do jogador ou DB n\u00e3o encontrado para salvar o recorde.\");\r\n return;\r\n }\r\n\r\n try {\r\n const highscoresCol = window.firebase.collection(db, \"highscores\");\r\n await window.firebase.addDoc(highscoresCol, {\r\n name: playerName,\r\n score: playerScore,\r\n date: new Date().toISOString()\r\n });\r\n setScoreSaved(true);\r\n setMessage(\"Seu recorde foi salvo, \u00f3 grande campe\u00e3o!\");\r\n log(`Recorde salvo para ${playerName} com ${playerScore} pontos.`);\r\n } catch (error) {\r\n console.error(\"Error writing document: \", error);\r\n log(\"Falha ao salvar recorde.\");\r\n setMessage(\"Houve um erro ao salvar seu recorde. Tente novamente.\");\r\n }\r\n }, [playerName, db, playerScore, log]);\r\n\r\n React.useEffect(() => {\r\n if (gameState === 'round_result') {\r\n const nextRound = round + 1;\r\n \r\n setTimeout(() => {\r\n setActiveSoundCardNumero(null);\r\n setRoundWinner(null);\r\n if (nextRound >= 10 || playerHand.length === 0 || aiHand.length === 0) {\r\n setGameState('game_over');\r\n const winner = playerScore > aiScore ? 'Voc\u00ea' : (aiScore > playerScore ? 'A IA' : 'Ningu\u00e9m');\r\n if (winner === 'Ningu\u00e9m') {\r\n setMessage(`Fim de jogo! O resultado foi um empate: ${playerScore} a ${aiScore}.`);\r\n } else {\r\n setMessage(`Fim de jogo! ${winner} venceu a partida por ${playerScore} a ${aiScore}!`);\r\n }\r\n log(`--- FIM DE JOGO --- Placar final: Voc\u00ea ${playerScore} x ${aiScore} IA.`);\r\n } else {\r\n setRound(nextRound);\r\n setPlayerPlayedCard(null);\r\n setAiPlayedCard(null);\r\n setSelectedPlayerCard(null);\r\n setChosenAttribute(null);\r\n\r\n if (turnHolder === 'player') {\r\n setMessage(`Rodada ${nextRound + 1}. Sua vez de jogar!`);\r\n setGameState('player_turn_select_card');\r\n log(`--- Iniciando Rodada ${nextRound + 1}. Turno do jogador. ---`);\r\n } else {\r\n setGameState('ai_turn');\r\n }\r\n }\r\n }, 5000);\r\n } else if (gameState === 'ai_turn') {\r\n aiPlayTurn();\r\n }\r\n }, [gameState, round, playerScore, aiScore, turnHolder, playerHand, aiHand, aiPlayTurn]);\r\n\r\n if (gameState === 'start' || gameState === 'game_over') {\r\n return (\r\n <div className=\"min-h-screen bg-gray-900\/50 backdrop-blur-md text-white flex flex-col items-center justify-center p-4 font-sans text-center\">\r\n {activeModal === 'help' && <HelpModal onClose={() => setActiveModal(null)} \/>}\r\n {activeModal === 'all-cards' && <AllCardsModal cards={fullDeck} onCardSelect={(card) => setActiveModal(card)} onClose={() => setActiveModal(null)} videoCards={videoCards} \/>}\r\n {typeof activeModal === 'object' && activeModal !== null && <LoreModal card={activeModal} onClose={() => setActiveModal('all-cards')} videoCards={videoCards} \/>}\r\n \r\n <h1 className=\"text-3xl sm:text-4xl md:text-5xl font-bold mb-2 text-yellow-400\">Dracomania - Arena<\/h1>\r\n <p className=\"text-lg md:text-xl mb-6 text-gray-300\">A Batalha Final<\/p>\r\n \r\n {gameState === 'game_over' && (\r\n <div className=\"mb-8 text-xl md:text-2xl bg-black\/30 backdrop-blur-lg border border-yellow-800\/30 p-6 rounded-lg shadow-xl w-full max-w-md\">\r\n {playerScore > aiScore && (\r\n <h2 className=\"text-4xl md:text-6xl font-black text-blue-500 mb-4 tracking-widest\">VIT\u00d3RIA<\/h2>\r\n )}\r\n {aiScore > playerScore && (\r\n <h2 className=\"text-4xl md:text-6xl font-black text-red-500 mb-4 tracking-widest\">DERROTA<\/h2>\r\n )}\r\n <p className=\"mb-4\">{message}<\/p>\r\n \r\n {playerScore > aiScore && !scoreSaved && (\r\n <form onSubmit={handleSaveScore} className=\"flex flex-col sm:flex-row gap-2 mt-4\">\r\n <input \r\n type=\"text\"\r\n value={playerName}\r\n onChange={(e) => setPlayerName(e.target.value)}\r\n placeholder=\"Digite seu nome\"\r\n className=\"bg-gray-700 text-white px-4 py-2 rounded-md flex-grow text-lg\"\r\n maxLength=\"15\"\r\n \/>\r\n <button type=\"submit\" className=\"bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold py-2 px-4 rounded-md text-lg\">\r\n Salvar\r\n <\/button>\r\n <\/form>\r\n )}\r\n <\/div>\r\n )}\r\n \r\n <div className=\"flex flex-wrap justify-center gap-4 items-center\">\r\n <button \r\n onClick={startGame}\r\n className=\"px-6 py-3 md:px-8 md:py-4 bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold rounded-lg shadow-lg transform hover:scale-105 transition-all duration-300 text-xl md:text-2xl\"\r\n >\r\n {gameState === 'game_over' ? 'Jogar Novamente' : 'Iniciar Jogo'}\r\n <\/button>\r\n <button \r\n onClick={() => setActiveModal('all-cards')}\r\n className=\"px-6 py-3 md:px-8 md:py-4 bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold rounded-lg shadow-lg transform hover:scale-105 transition-all duration-300 text-xl md:text-2xl\"\r\n >\r\n Ver Cartas\r\n <\/button>\r\n <button \r\n onClick={() => setActiveModal('help')}\r\n className=\"px-6 py-3 md:px-8 md:py-4 bg-yellow-950\/60 backdrop-blur-sm border border-yellow-800\/70 hover:bg-yellow-900\/70 text-yellow-200 font-bold rounded-lg shadow-lg transform hover:scale-105 transition-all duration-300 text-xl md:text-2xl\"\r\n >\r\n Ajuda\r\n <\/button>\r\n <\/div>\r\n\r\n <div className=\"mt-8 w-full max-w-md\">\r\n <h3 className=\"text-2xl font-bold text-yellow-400 mb-4\">Mural dos Campe\u00f5es<\/h3>\r\n <div className=\"bg-black\/30 backdrop-blur-lg border border-yellow-800\/30 p-4 rounded-lg\">\r\n {highscores.length > 0 ? (\r\n <ol className=\"list-decimal list-inside text-left space-y-2\">\r\n {highscores.map((s, i) => (\r\n <li key={s.id} className=\"text-lg flex justify-between items-center\">\r\n <span>\r\n <span className=\"font-bold text-yellow-500 mr-2\">{i + 1}.<\/span> \r\n {s.name}\r\n <\/span>\r\n <span className=\"font-bold text-blue-400\">{s.score} Pts<\/span>\r\n <\/li>\r\n ))}\r\n <\/ol>\r\n ) : (\r\n <p>Nenhum recorde ainda. Seja o primeiro!<\/p>\r\n )}\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n );\r\n }\r\n \r\n return (\r\n <div className=\"min-h-screen bg-gray-900\/50 backdrop-blur-md text-white flex flex-col p-2 md:p-4 font-sans overflow-x-hidden\">\r\n <header className=\"w-full max-w-7xl mx-auto mb-4 p-3 md:p-4 bg-black\/30 backdrop-blur-sm rounded-lg shadow-md border border-white\/10\">\r\n <div className=\"flex justify-between items-center text-lg sm:text-xl md:text-2xl font-bold\">\r\n <div className=\"text-blue-400\">Voc\u00ea: {playerScore}<\/div>\r\n <div className=\"text-center text-yellow-400\">Rodada {round + 1} \/ 10<\/div>\r\n <div className=\"text-red-400\">IA: {aiScore}<\/div>\r\n <\/div>\r\n <div className=\"text-center mt-3 text-base md:text-lg h-12 flex items-center justify-center bg-black\/20 backdrop-blur-sm rounded p-2\">\r\n <p className=\"animate-pulse\">{message}<\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <main className=\"w-full max-w-7xl mx-auto flex-grow flex flex-col items-center justify-center my-2\">\r\n <div className=\"w-full flex flex-col sm:flex-row justify-around items-center bg-black\/20 backdrop-blur-sm rounded-2xl p-4 my-4 border-2 border-dashed border-white\/20 min-h-[20rem] sm:min-h-[22rem]\">\r\n <div className=\"flex flex-col items-center\">\r\n <h3 className=\"font-bold mb-2 text-blue-400\">Sua Carta<\/h3>\r\n <div className=\"w-32 h-48 sm:w-40 sm:h-60 md:w-48 md:h-72\">\r\n {playerPlayedCard ? <FlippableCard key={`player-${playerPlayedCard.numero}-${round}`} card={playerPlayedCard} battleAttribute={chosenAttribute} videoCards={videoCards} startFlipped={true} playSound={activeSoundCardNumero === playerPlayedCard?.numero} isWinner={roundWinner === 'player'}\/> : <div className=\"w-full h-full bg-black\/30 rounded-xl flex items-center justify-center text-gray-500 text-center p-2\">Aguardando...<\/div>}\r\n <\/div>\r\n <\/div>\r\n <div className=\"text-2xl sm:text-4xl font-bold text-yellow-400 my-2 sm:my-0\">VS<\/div>\r\n <div className=\"flex flex-col items-center\">\r\n <h3 className=\"font-bold mb-2 text-red-400\">Carta da IA<\/h3>\r\n <div className=\"w-32 h-48 sm:w-40 sm:h-60 md:w-48 md:h-72\">\r\n {aiPlayedCard ? <FlippableCard key={`ai-${aiPlayedCard.numero}-${round}`} card={aiPlayedCard} battleAttribute={chosenAttribute} videoCards={videoCards} startFlipped={true} playSound={activeSoundCardNumero === aiPlayedCard?.numero} isWinner={roundWinner === 'ai'}\/> : <div className=\"w-full h-full bg-black\/30 rounded-xl flex items-center justify-center text-gray-500 text-center p-2\">Aguardando...<\/div>}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <footer className=\"w-full flex flex-col items-center mt-auto\">\r\n <h2 className=\"text-xl md:text-2xl font-bold mb-4\">Sua M\u00e3o<\/h2>\r\n <div className=\"flex justify-center items-end gap-1 sm:gap-2 flex-wrap mb-4\">\r\n {playerHand.map((card, index) => {\r\n const isSelected = selectedPlayerCard?.numero === card.numero;\r\n return (\r\n <div key={card.numero} className={`relative w-24 h-36 sm:w-28 sm:h-40 md:w-32 md:h-48 lg:w-40 lg:h-60 ${isSelected ? 'z-20' : 'hover:z-10 z-0'}`}>\r\n <Card \r\n card={card}\r\n isSelected={isSelected}\r\n isPlayable={gameState === 'player_turn_select_card' || gameState === 'player_turn_choose_attribute'}\r\n onClick={() => handlePlayerCardSelect(card)}\r\n showAttributes={isSelected && gameState === 'player_turn_choose_attribute'}\r\n onAttributeSelect={handleAttributeSelect}\r\n videoCards={videoCards}\r\n isSoundActive={false} \/\/ Cartas na m\u00e3o est\u00e3o sempre mudas\r\n animationStyle={{ animationDelay: `${index * 150}ms`, opacity: 0 }}\r\n className=\"animate-deal-in\"\r\n \/>\r\n <\/div>\r\n );\r\n })}\r\n <\/div>\r\n <div className=\"w-full flex justify-around items-center p-2 sm:p-4 bg-black\/30 backdrop-blur-sm rounded-lg mt-4 border border-white\/10\">\r\n <div className=\"flex flex-col items-center\">\r\n <h3 className=\"font-bold mb-2 text-sm sm:text-base\">M\u00e3o da IA ({aiHand.length})<\/h3>\r\n <div className=\"flex -space-x-10 sm:-space-x-12 md:-space-x-16\">\r\n {aiHand.slice(0, 7).map((card, index) => (\r\n <div key={index} className=\"w-16 h-24 sm:w-20 sm:h-28 md:w-24 md:h-36\">\r\n <Card isFaceDown={true} card={card} videoCards={videoCards} \/>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <div className=\"flex flex-col items-center\">\r\n <h3 className=\"font-bold mb-2 text-sm sm:text-base\">Deck ({fullDeck.length - playerHand.length - aiHand.length})<\/h3>\r\n <div className=\"w-20 h-28 sm:w-24 sm:h-36 md:w-28 md:h-40 relative\">\r\n { (playerHand.length + aiHand.length) < fullDeck.length ? (\r\n <div className=\"absolute inset-0\">\r\n <Card isFaceDown={true} card={{}} videoCards={videoCards} \/>\r\n <\/div>\r\n ) : (\r\n <div className=\"w-full h-full bg-black\/30 rounded-xl flex items-center justify-center text-gray-500\">Vazio<\/div>\r\n )}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n <div className=\"fixed bottom-2 right-2 bg-black bg-opacity-70 text-white p-2 rounded-lg w-64 h-48 overflow-y-auto text-xs font-mono hidden md:block\">\r\n <h4 className=\"font-bold mb-2\">LOG DE COMBATE<\/h4>\r\n {debugLog.map((logMsg, index) => <p key={index} className=\"whitespace-pre-wrap\">{logMsg}<\/p>)}\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n <\/script>\r\n <script type=\"text\/babel\">\r\n const container = document.getElementById('root');\r\n const root = ReactDOM.createRoot(container);\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dracomania – Arena<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":413,"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":501,"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions\/501"}],"wp:attachment":[{"href":"https:\/\/teste.doriedsonjunior.com\/index.php\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}