[{"_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","6a0328a81ee08191b74faf494242593f","versionInt","title","Jogo Educativo Silabas Fundamental1","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\nexport default function JogoSilabas() {\n const palavras = [\n { imagem: \"🐶\", correta: \"CA-CHOR-RO\", partes: [\"CA\", \"CHOR\", \"RO\", \"BO\"] },\n { imagem: \"🍌\", correta: \"BA-NA-NA\", partes: [\"BA\", \"NA\", \"NA\", \"LA\"] },\n { imagem: \"🐱\", correta: \"GA-TO\", partes: [\"GA\", \"TO\", \"PA\", \"CA\"] },\n { imagem: \"☀️\", correta: \"SOL\", partes: [\"SOL\", \"ME\", \"LU\", \"TO\"] },\n { imagem: \"🚗\", correta: \"CAR-RO\", partes: [\"CAR\", \"RO\", \"TO\", \"PI\"] },\n { imagem: \"🏠\", correta: \"CA-SA\", partes: [\"CA\", \"SA\", \"LA\", \"TO\"] },\n { imagem: \"📘\", correta: \"LI-VRO\", partes: [\"LI\", \"VRO\", \"BO\", \"CA\"] },\n { imagem: \"🌳\", correta: \"ÁR-VO-RE\", partes: [\"ÁR\", \"VO\", \"RE\", \"PA\"] },\n { imagem: \"🍎\", correta: \"MA-ÇÃ\", partes: [\"MA\", \"ÇÃ\", \"TO\", \"LU\"] },\n { imagem: \"🦋\", correta: \"BOR-BO-LE-TA\", partes: [\"BOR\", \"BO\", \"LE\", \"TA\"] },\n { imagem: \"🐸\", correta: \"SA-PO\", partes: [\"SA\", \"PO\", \"ME\", \"LU\"] },\n { imagem: \"🐰\", correta: \"CO-E-LHO\", partes: [\"CO\", \"E\", \"LHO\", \"PA\"] },\n { imagem: \"🐦\", correta: \"PAS-SA-RI-NHO\", partes: [\"PAS\", \"SA\", \"RI\", \"NHO\"] },\n { imagem: \"🍇\", correta: \"U-VA\", partes: [\"U\", \"VA\", \"BO\", \"CA\"] },\n { imagem: \"🥕\", correta: \"CE-NOU-RA\", partes: [\"CE\", \"NOU\", \"RA\", \"LU\"] },\n { imagem: \"🚲\", correta: \"BI-CI-CLE-TA\", partes: [\"BI\", \"CI\", \"CLE\", \"TA\"] },\n { imagem: \"✏️\", correta: \"LÁ-PIS\", partes: [\"LÁ\", \"PIS\", \"BO\", \"TO\"] },\n { imagem: \"📖\", correta: \"CA-DER-NO\", partes: [\"CA\", \"DER\", \"NO\", \"LU\"] },\n { imagem: \"👟\", correta: \"TE-NIS\", partes: [\"TE\", \"NIS\", \"PA\", \"RO\"] },\n { imagem: \"🧸\", correta: \"BRIN-QUE-DO\", partes: [\"BRIN\", \"QUE\", \"DO\", \"LA\"] },\n { imagem: \"🐢\", correta: \"TAR-TA-RU-GA\", partes: [\"TAR\", \"TA\", \"RU\", \"GA\"] },\n { imagem: \"🍍\", correta: \"A-BA-CA-XI\", partes: [\"A\", \"BA\", \"CA\", \"XI\"] },\n { imagem: \"🐘\", correta: \"E-LE-FAN-TE\", partes: [\"E\", \"LE\", \"FAN\", \"TE\"] },\n { imagem: \"🚂\", correta: \"TREM\", partes: [\"TREM\", \"BO\", \"CA\", \"LU\"] },\n { imagem: \"🍉\", correta: \"ME-LAN-CI-A\", partes: [\"ME\", \"LAN\", \"CI\", \"A\"] },\n { imagem: \"🐔\", correta: \"GA-LI-NHA\", partes: [\"GA\", \"LI\", \"NHA\", \"TO\"] },\n { imagem: \"🦁\", correta: \"LE-ÃO\", partes: [\"LE\", \"ÃO\", \"BO\", \"CA\"] },\n { imagem: \"🌻\", correta: \"GI-RAS-SOL\", partes: [\"GI\", \"RAS\", \"SOL\", \"PA\"] },\n { imagem: \"🐟\", correta: \"PEI-XE\", partes: [\"PEI\", \"XE\", \"LU\", \"TO\"] },\n { imagem: \"🚁\", correta: \"HE-LI-CÓP-TE-RO\", partes: [\"HE\", \"LI\", \"CÓP\", \"TE\", \"RO\"] },\n ];\n\n const [fase, setFase] = useState(0);\n const [selecionadas, setSelecionadas] = useState([]);\n const [mensagem, setMensagem] = useState(\"\");\n const [pontos, setPontos] = useState(0);\n const [somAtivo, setSomAtivo] = useState(false);\n const [fimDeJogo, setFimDeJogo] = useState(false);\n const [tempo, setTempo] = useState(0);\n const [nomeJogador, setNomeJogador] = useState(\"\");\n const [ranking, setRanking] = useState(() => {\n const rankingSalvo = localStorage.getItem(\"rankingSilabas\");\n\n return rankingSalvo ? JSON.parse(rankingSalvo) : [];\n });\n\n const audioRef = useRef(null);\n const acertoRef = useRef(null);\n const erroRef = useRef(null);\n const cliqueRef = useRef(null);\n const comemoracaoRef = useRef(null);\n\n useEffect(() => {\n let intervalo;\n\n if (!fimDeJogo) {\n intervalo = setInterval(() => {\n setTempo((t) => t + 1);\n }, 1000);\n }\n\n return () => clearInterval(intervalo);\n }, [fimDeJogo]);\n\n useEffect(() => {\n if (somAtivo && audioRef.current) {\n audioRef.current.volume = 0.2;\n\n audioRef.current\n .play()\n .catch(() => console.log(\"Som bloqueado pelo navegador\"));\n }\n }, [somAtivo]);\n\n async function ativarSom() {\n setSomAtivo(true);\n\n try {\n if (audioRef.current) {\n audioRef.current.volume = 0.2;\n audioRef.current.loop = true;\n await audioRef.current.play();\n }\n\n const efeitos = [\n acertoRef.current,\n erroRef.current,\n cliqueRef.current,\n comemoracaoRef.current,\n ];\n\n for (const efeito of efeitos) {\n if (efeito) {\n efeito.volume = 0.8;\n\n await efeito.play();\n efeito.pause();\n efeito.currentTime = 0;\n }\n }\n } catch (erro) {\n console.log(\"Erro ao liberar os sons\", erro);\n }\n }\n\n const atual = useMemo(() => {\n const partesEmbaralhadas = [...palavras[fase].partes]\n .map((parte) => ({ parte, ordem: Math.random() }))\n .sort((a, b) => a.ordem - b.ordem)\n .map((item) => item.parte);\n\n return {\n ...palavras[fase],\n partes: partesEmbaralhadas,\n };\n }, [fase]);\n\n function selecionar(parte) {\n if (somAtivo && cliqueRef.current) {\n cliqueRef.current.currentTime = 0;\n cliqueRef.current.play().catch(() => {});\n }\n\n setSelecionadas([...selecionadas, parte]);\n }\n\n function verificar() {\n const resposta = selecionadas.join(\"-\");\n\n if (resposta === atual.correta) {\n if (somAtivo && acertoRef.current) {\n acertoRef.current.currentTime = 0;\n acertoRef.current.play().catch(() => {});\n }\n setMensagem(\"✅ Muito bem!\");\n setPontos(pontos + 10);\n\n setTimeout(() => {\n if (fase < palavras.length - 1) {\n setFase(fase + 1);\n setSelecionadas([]);\n setMensagem(\"\");\n } else {\n setMensagem(\"🎉 Parabéns! Você completou todas as palavras!\");\n setFimDeJogo(true);\n\n if (somAtivo && comemoracaoRef.current) {\n comemoracaoRef.current.currentTime = 0;\n comemoracaoRef.current.play().catch(() => {});\n }\n }\n }, 1500);\n } else {\n if (somAtivo && erroRef.current) {\n erroRef.current.currentTime = 0;\n erroRef.current.play().catch(() => {});\n }\n\n setMensagem(\"❌ Tente novamente!\");\n }\n }\n\n function salvarRanking() {\n if (!nomeJogador.trim()) return;\n\n const novoRanking = [\n ...ranking,\n {\n nome: nomeJogador,\n pontos,\n tempo,\n },\n ]\n .sort((a, b) => {\n if (b.pontos === a.pontos) {\n return a.tempo - b.tempo;\n }\n\n return b.pontos - a.pontos;\n })\n .slice(0, 10);\n\n setRanking(novoRanking);\n localStorage.setItem(\"rankingSilabas\", JSON.stringify(novoRanking));\n setNomeJogador(\"\");\n }\n\n function formatarTempo(segundos) {\n const min = Math.floor(segundos / 60);\n const seg = segundos % 60;\n\n return `${String(min).padStart(2, \"0\")}:${String(seg).padStart(2, \"0\")}`;\n }\n\n function limpar() {\n setSelecionadas([]);\n setMensagem(\"\");\n }\n\n return (\n <>\n \n \n\n \n\n \n\n \n\n

\n\n {fimDeJogo && (\n <>\n

🎈

🎉

🎊

🎈

✨

🎉

\n\n

🏆

\n Parabéns!\n

\n Você completou todas as palavras!\n

⭐ Pontuação Final: {pontos}

⏱️ Tempo Total: {formatarTempo(tempo)}

\n\n

\n setNomeJogador(e.target.value)}\n className=\"border-2 border-purple-400 rounded-2xl px-4 py-3 text-xl text-center w-full mb-4 focus:outline-none focus:ring-4 focus:ring-purple-300\"\n />\n\n \n 🏅 Salvar no Ranking\n \n

\n\n

\n 🏆 Top 10 Ranking\n

\n\n {\n localStorage.removeItem(\"rankingSilabas\");\n setRanking([]);\n }}\n className=\"bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-xl text-sm font-bold\"\n >\n 🗑️ Limpar\n \n

\n\n

\n 🏆 Top 10 Ranking\n

\n\n {ranking.length === 0 ? (\n

Nenhum jogador ainda.

\n ) : (\n ranking.map((jogador, index) => (\n \n \n #{index + 1} {jogador.nome}\n \n \n ⭐ {jogador.pontos} | ⏱️ {formatarTempo(jogador.tempo)}\n \n

\n ))\n )}\n

\n\n {\n setFase(0);\n setSelecionadas([]);\n setMensagem(\"\");\n setPontos(0);\n setTempo(0);\n setFimDeJogo(false);\n\n if (somAtivo && audioRef.current) {\n audioRef.current.currentTime = 0;\n audioRef.current.play().catch(() => {});\n }\n }}\n className=\"bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-2xl text-2xl font-bold shadow-xl\"\n >\n 🔄 Jogar Novamente\n \n

\n \n )}\n

\n {!somAtivo && (\n \n 🔊 Ativar Som\n \n )}\n

\n\n

\n 🎮 Montando Palavras\n

\n\n

⭐ Pontos: {pontos}

⏱️ Tempo: {formatarTempo(tempo)}

\n\n

{atual.imagem}

\n\n

\n {selecionadas.join(\" - \") || \"Escolha as sílabas\"}\n

\n\n

\n {atual.partes.map((parte, index) => (\n selecionar(parte)}\n className=\"bg-blue-500 hover:bg-blue-600 text-white text-2xl font-bold py-4 rounded-2xl shadow-lg transition\"\n >\n {parte}\n \n ))}\n

\n\n

\n \n Verificar\n \n\n \n Limpar\n \n

\n\n

{mensagem}

\n\n

\n Fase {fase + 1} de {palavras.length}\n

\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","7846031734654651018","traceTime",1778762810341]