imlementacao traducao

app/lang/ht.json

@@ -1 +1,8 @@
-{}
+{
+    "atividades":
+    {
+        "aspirador": {
+            "nome": "Faz 1: Liy Dwat la"
+        }
+    }
+}

app/lang/pt.json

@@ -1 +1,8 @@
-{}
+{
+    "atividades":
+    {
+        "aspirador": {
+            "nome": "Fase 1: A Linha Reta"
+        }
+    }
+}

app/src/App.jsx

@@ -120,7 +120,8 @@ function AppRoutes() {
 export default function App() {
   const locale = 'ht';
   const translatedMessages = getLocalizedMessages(locale);
-  console.log(translatedMessages);
+  // TODO:  fazer botão
+  window.localStorage.setItem("locale", 'ht');
   return (
     <Router>
       <Suspense fallback={<LoadingFallback />}>

app/src/atividades/programacao/aspirador/config/config.js

@@ -42,7 +42,7 @@ export const gameConfig = {
     // ==========================================
     {
       id: 1,
-      nome: "Fase 1: A Linha Reta",
+      nome: "$atividades.aspirador.nome",
       descricao: "Use o bloco 'Enquanto houver sujeira' e o comando 'Mover' para ligá-lo.",
       timeout: 10,
       maxBlocks: 3,

app/src/components/game/GameFaseInfo.jsx

@@ -1,6 +1,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
+import { translate } from "../../services/localizedMessages";
 
 function obterDificuldade(dadosFase) {
   // Usa a dificuldade da fase, se existir, senão calcula pelo número
@@ -40,7 +41,7 @@ function GameFaseInfo({ phaseData = {}, phaseNumber }) {
           {/* Título/Subtítulo */}
           <div className="flex-1 min-w-0 px-3 lg:px-5">
             <h3 className="text-base lg:text-2xl font-semibold text-gray-800 truncate">
-              {phaseData.nome}
+              {translate(phaseData.nome)}
             </h3>
             {phaseData.descricao && (
               <p className="text-base lg:text-lg text-gray-600 leading-tight whitespace-pre-wrap mt-1 pr-12 lg:pr-0">

app/src/services/localizedMessages.js

@@ -1,8 +1,29 @@
 import ht from "./../../lang/ht.json";
 import pt from "./../../lang/pt.json";
 export function getLocalizedMessages(locale) {
+    console.log('localized import json');
     return {
         ht,
         pt
-    };
+    }[locale];
+}
+
+export function getUserLocale() {
+    return getLocalizedMessages(window.localStorage.getItem('locale') ?? 'pt');
+}
+
+const accessObject = (path, object) => {
+  return path.split('.').reduce((o, i) => o[i], object);
+}
+
+export function translate(message) {
+    if (message.match(/^\$/)) {
+        const result = accessObject(message.substr(1), getUserLocale());
+        if(result) {
+            return result;
+        } else {
+            console.error(`path ${message} not found on lang`);
+        }
+    }
+    return message;
 }