[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","6a0b3d7077d88191b1265c007e48bff2","versionInt","title","Jogo Alfabetizacao Fundamental1 Interativo","type","code/react","content","import React, { useEffect, useMemo, useState } from 'react'\n\nexport default function JogoAlfabetizacao() {\n const fases = [\n // Cada fase agora possui um fundo temático\n { titulo: 'Fase 1 - Floresta das Letras', pergunta: 'Clique na letra A para ajudar o macaco!', imagem: '🐵🌴🍌', fundo: '🌴🌳🦜☀️', opcoes: ['A', 'B', 'C', 'D'], correta: 'A' },\n { titulo: 'Fase 2 - Reino das Vogais', pergunta: 'Qual é uma vogal mágica?', imagem: '🧚✨🔤', fundo: '🏰✨🌈⭐', opcoes: ['P', 'E', 'T', 'R'], correta: 'E' },\n { titulo: 'Fase 3 - Caverna das Sílabas', pergunta: 'Qual sílaba forma BO-LA?', imagem: '⛏️⚽💎', fundo: '⛰️💎🔥🪨', opcoes: ['BO', 'TR', 'PL', 'FR'], correta: 'BO' },\n { titulo: 'Fase 4 - Fazenda Divertida', pergunta: 'Qual animal dá leite?', imagem: '🐄🚜🌾', opcoes: ['VACA', 'PATO', 'GALO', 'PEIXE'], correta: 'VACA' },\n { titulo: 'Fase 5 - Castelo da Leitura', pergunta: 'Qual palavra começa com C?', imagem: '🏰📚👑', opcoes: ['CASA', 'BOLA', 'DADO', 'FOCA'], correta: 'CASA' },\n { titulo: 'Fase 6 - Praia do Saber', pergunta: 'Qual palavra representa o mar?', imagem: '🏖️🌊🐚', opcoes: ['MAR', 'SOL', 'PÉ', 'LUA'], correta: 'MAR' },\n { titulo: 'Fase 7 - Mundo dos Dinossauros', pergunta: 'Qual palavra começa com D?', imagem: '🦖🌋🦕', opcoes: ['DADO', 'SAPO', 'CASA', 'BOLA'], correta: 'DADO' },\n { titulo: 'Fase 8 - Jardim Encantado', pergunta: 'Qual destas é uma flor?', imagem: '🌸🦋🌻', opcoes: ['FLOR', 'PEDRA', 'CARRO', 'BOLA'], correta: 'FLOR' },\n { titulo: 'Fase 9 - Safari Animal', pergunta: 'Qual animal tem tromba?', imagem: '🐘🦁🌞', opcoes: ['ELEFANTE', 'PATO', 'PEIXE', 'SAPO'], correta: 'ELEFANTE' },\n { titulo: 'Fase 10 - Trem da Leitura', pergunta: 'Qual palavra começa com T?', imagem: '🚂📖☁️', opcoes: ['TATU', 'BOLA', 'SAPO', 'GATO'], correta: 'TATU' },\n { titulo: 'Fase 11 - Reino Gelado', pergunta: 'Qual palavra representa frio?', imagem: '❄️⛄🏔️', opcoes: ['GELO', 'FOGO', 'SOL', 'CALOR'], correta: 'GELO' },\n { titulo: 'Fase 12 - Ilha do Tesouro', pergunta: 'Qual palavra começa com P?', imagem: '🏝️💰🦜', opcoes: ['PIRATA', 'GATO', 'BOLA', 'CASA'], correta: 'PIRATA' },\n { titulo: 'Fase 13 - Cidade dos Robôs', pergunta: 'Qual letra completa RO_Ô?', imagem: '🤖⚙️🏙️', opcoes: ['B', 'C', 'D', 'F'], correta: 'B' },\n { titulo: 'Fase 14 - Bosque Encantado', pergunta: 'Qual destes é uma árvore?', imagem: '🌲🦉🍄', opcoes: ['PINHEIRO', 'MESA', 'SAPATO', 'BOLA'], correta: 'PINHEIRO' },\n { titulo: 'Fase 15 - Circo Alegre', pergunta: 'Qual palavra começa com L?', imagem: '🎪🤹🎈', opcoes: ['LEÃO', 'CASA', 'PATO', 'BOLA'], correta: 'LEÃO' },\n { titulo: 'Fase 16 - Oceano Azul', pergunta: 'Qual animal vive no mar?', imagem: '🐠🌊🐳', opcoes: ['PEIXE', 'CAVALO', 'LEÃO', 'MACACO'], correta: 'PEIXE' },\n { titulo: 'Fase 17 - Cozinha Mágica', pergunta: 'Qual palavra representa uma fruta?', imagem: '🍎🍌🍓', opcoes: ['MAÇÃ', 'CADEIRA', 'LÁPIS', 'SAPATO'], correta: 'MAÇÃ' },\n { titulo: 'Fase 18 - Parque Divertido', pergunta: 'Qual brinquedo rola?', imagem: '🎡🎢⚽', opcoes: ['BOLA', 'CASA', 'LIVRO', 'SAPATO'], correta: 'BOLA' },\n { titulo: 'Fase 19 - Mundo Musical', pergunta: 'Qual objeto faz música?', imagem: '🎵🎹🥁', opcoes: ['VIOLÃO', 'PORTA', 'PEDRA', 'MESA'], correta: 'VIOLÃO' },\n { titulo: 'Fase 20 - Nave Espacial', pergunta: 'Qual palavra começa com F?', imagem: '🚀🪐⭐', opcoes: ['FOGUETE', 'BOLA', 'CASA', 'SAPO'], correta: 'FOGUETE' },\n { titulo: 'Fase 21 - Vale Encantado', pergunta: 'Qual animal mia?', imagem: '🐈🌙✨', opcoes: ['GATO', 'VACA', 'PATO', 'CACHORRO'], correta: 'GATO' },\n { titulo: 'Fase 22 - Vila das Sílabas', pergunta: 'Qual sílaba começa CA-SA?', imagem: '🏠🔤✨', opcoes: ['CA', 'BO', 'TO', 'LA'], correta: 'CA' },\n { titulo: 'Fase 23 - Reino do Arco-Íris', pergunta: 'Qual cor aparece no arco-íris?', imagem: '🌈☁️✨', opcoes: ['AZUL', 'PRETO', 'MARROM', 'CINZA'], correta: 'AZUL' },\n { titulo: 'Fase 24 - Mundo dos Brinquedos', pergunta: 'Qual objeto voa no céu?', imagem: '🪁☁️🌤️', opcoes: ['PIPA', 'SAPATO', 'MESA', 'LÁPIS'], correta: 'PIPA' },\n { titulo: 'Fase 25 - Selva Misteriosa', pergunta: 'Qual animal pula nas árvores?', imagem: '🌳🐒🍃', opcoes: ['MACACO', 'PEIXE', 'VACA', 'PATO'], correta: 'MACACO' },\n { titulo: 'Fase 26 - Escola Divertida', pergunta: 'Qual objeto usamos para escrever?', imagem: '✏️📚🎒', opcoes: ['LÁPIS', 'BOLA', 'SAPATO', 'MESA'], correta: 'LÁPIS' },\n { titulo: 'Fase 27 - Vila dos Transportes', pergunta: 'Qual palavra representa transporte?', imagem: '🚗🛻🚙', opcoes: ['CARRO', 'SAPO', 'BOLA', 'LÁPIS'], correta: 'CARRO' },\n { titulo: 'Fase 28 - Mundo dos Doces', pergunta: 'Qual destes é um doce?', imagem: '🍭🍬🧁', opcoes: ['BOLO', 'SAPATO', 'PEDRA', 'MESA'], correta: 'BOLO' },\n { titulo: 'Fase 29 - Reino das Estrelas', pergunta: 'O que brilha no céu?', imagem: '🌟🌙☁️', opcoes: ['ESTRELA', 'CADEIRA', 'SAPATO', 'PORTA'], correta: 'ESTRELA' },\n { titulo: 'Fase 30 - Tesouro Final', pergunta: 'Qual palavra representa vitória?', imagem: '🏆✨🎉', opcoes: ['CAMPEÃO', 'PEDRA', 'JANELA', 'CADEIRA'], correta: 'CAMPEÃO' }\n ]\n\n const coresFases = [\n 'from-cyan-300 via-pink-200 to-yellow-200',\n 'from-purple-300 via-pink-200 to-red-200',\n 'from-green-300 via-lime-200 to-yellow-200',\n 'from-blue-300 via-cyan-200 to-indigo-200',\n 'from-orange-300 via-yellow-200 to-pink-200',\n 'from-fuchsia-300 via-purple-200 to-blue-200'\n ]\n\n const [faseAtual, setFaseAtual] = useState(0)\n const [vidas, setVidas] = useState(5)\n const [pontos, setPontos] = useState(0)\n const [tempo, setTempo] = useState(30)\n const [mensagem, setMensagem] = useState('')\n const [inicio, setInicio] = useState(false)\n const [nomeJogador, setNomeJogador] = useState('')\n const [ranking, setRanking] = useState([])\n const [fim, setFim] = useState(false)\n const [respondendo, setRespondendo] = useState(false)\n const [erros, setErros] = useState(0)\n\n const fase = fases[faseAtual]\n\n const opcoesEmbaralhadas = useMemo(() => {\n if (!fase) return []\n return [...fase.opcoes].sort(() => Math.random() - 0.5)\n }, [faseAtual])\n\n useEffect(() => {\n try {\n const rankingSalvo = JSON.parse(localStorage.getItem('rankingAlfabetizacao')) || []\n setRanking(rankingSalvo)\n } catch (error) {\n console.error(error)\n setRanking([])\n }\n }, [])\n\n useEffect(() => {\n if (!inicio || fim || respondendo) return\n\n const timer = setInterval(() => {\n setTempo((prev) => {\n if (prev <= 1) {\n clearInterval(timer)\n perderVida()\n return 30\n }\n\n return prev - 1\n })\n }, 1000)\n\n return () => clearInterval(timer)\n }, [inicio, fim, respondendo])\n\n const perderVida = () => {\n setVidas((prev) => {\n if (prev <= 1) {\n finalizarJogo()\n return 0\n }\n\n return prev - 1\n })\n\n setErros(0)\n setMensagem('💔 Você perdeu uma vida!')\n }\n\n const responder = (opcao) => {\n if (respondendo) return\n\n setRespondendo(true)\n\n if (opcao === fase.correta) {\n setPontos((prev) => prev + 100)\n setMensagem('🎉 Muito bem!')\n\n setTimeout(() => {\n if (faseAtual >= fases.length - 1) {\n finalizarJogo()\n } else {\n setFaseAtual((prev) => prev + 1)\n setTempo(30)\n setMensagem('')\n }\n\n setRespondendo(false)\n setErros(0)\n }\n, 1000)\n } else {\n setPontos((prev) => Math.max(0, prev - 10))\n\n const novosErros = erros + 1\n setErros(novosErros)\n\n if (novosErros >= 3) {\n perderVida()\n } else {\n setMensagem(`❌ Tente novamente! Erros: ${novosErros}/3`)\n }\n\n setTimeout(() => {\n setRespondendo(false)\n }, 800)\n }\n }\n\n const finalizarJogo = () => {\n setFim(true)\n\n const novoRanking = [\n ...ranking,\n {\n nome: nomeJogador || 'Jogador',\n pontos\n }\n ]\n .sort((a, b) => b.pontos - a.pontos)\n .slice(0, 6)\n\n setRanking(novoRanking)\n\n localStorage.setItem('rankingAlfabetizacao', JSON.stringify(novoRanking))\n }\n\n const reiniciar = () => {\n setFaseAtual(0)\n setVidas(5)\n setPontos(0)\n setTempo(30)\n setMensagem('')\n setInicio(false)\n setFim(false)\n setRespondendo(false)\n }\n\n if (!inicio) {\n return (\n

\n 🌟 Mundo da Alfabetização 🌟\n

\n\n setNomeJogador(e.target.value)}\n className=\"w-full p-4 rounded-2xl border-4 border-pink-300 text-xl text-center mb-6\"\n />\n\n setInicio(true)}\n className=\"bg-green-500 hover:bg-green-600 text-white text-2xl font-bold px-10 py-4 rounded-3xl\"\n >\n ▶ Jogar\n \n

\n )\n }\n\n if (fim) {\n return (\n

\n 🏆 Fim do Jogo!\n

\n\n

\n Pontuação: {pontos}\n

\n\n \n 🔄 Jogar Novamente\n \n\n

\n 🏅 Ranking\n

\n\n {ranking.map((item, index) => (\n \n {index + 1}º - {item.nome}\n {item.pontos} pts\n

\n ))}\n

\n\n

\n \n Professor Giovani - 2026\n \n

\n \n )\n }\n\n const corAtual = coresFases[faseAtual % coresFases.length]\n\n return (\n

\n {fase.fundo || '🌈✨⭐'}\n

☁️

🌈

\n\n

❤️ {vidas}

\n\n

❌ {erros}/3

\n\n

\n ⏰ {tempo}s\n

\n\n

⭐ {pontos}

\n\n

\n {fase.imagem}\n

\n\n

\n {fase.titulo}\n

\n\n

\n {fase.pergunta}\n

\n\n

\n {opcoesEmbaralhadas.map((opcao, index) => (\n responder(opcao)}\n disabled={respondendo}\n className=\"bg-gradient-to-r from-pink-400 to-purple-500 hover:scale-105 transition-all text-white text-3xl font-black p-8 rounded-3xl shadow-xl disabled:opacity-70\"\n >\n {opcao}\n \n ))}\n

\n\n

\n {mensagem}\n

\n\n

\n \n Professor Giovani - 2026\n

\n \n )\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","6957399304374115696","traceTime",1779384130253]