Consulta las competencias en las que estás asignado
+Consulta las competencias en las que estás asignado
No se encontró tu sesión. Inicia sesión nuevamente.
"; + contenedor.innerHTML = `${traducciones[langActual].sinSesion}
`; return; } @@ -13,27 +103,28 @@ document.addEventListener("DOMContentLoaded", async () => { const formaciones = await res.json(); if (formaciones.length === 0) { - contenedor.innerHTML = "No estás asignado a ninguna formación aún.
"; + contenedor.innerHTML = `${traducciones[langActual].sinAsignacion}
`; return; } + contenedor.innerHTML = ''; formaciones.forEach(f => { const card = document.createElement("div"); card.className = "card text-start my-3 shadow-sm"; card.innerHTML = `
- Duración: ${f.duracion || "?"}s
- Notas: ${f.notasTacticas || "Sin notas"}
- Rol: ${f.atleta.rol || "N/A"} |
- ID: ${f.atleta.idPersonalizado || "N/A"} |
- Figura: ${f.atleta.figura || "—"}
+ ${traducciones[langActual].duracion}: ${f.duracion || "?"}s
+ ${traducciones[langActual].notas}: ${f.notasTacticas || "—"}
+ ${traducciones[langActual].rol}: ${f.atleta.rol || "N/A"} |
+ ${traducciones[langActual].id}: ${f.atleta.idPersonalizado || "N/A"} |
+ ${traducciones[langActual].figura}: ${f.atleta.figura || "—"}
Error al cargar tus asignaciones.
"; + contenedor.innerHTML = `${traducciones[langActual].errorCarga}
`; } -}); - -function verSimulador(rutinaId, index) { - window.location.href = `simulador.html?routineId=${rutinaId}&formationIndex=${index}`; } -function logout() { - sessionStorage.clear(); - alert("Sesión cerrada"); - window.location.href = "../index.html"; -} - -// Mostrar nombre de usuario -window.addEventListener("DOMContentLoaded", async () => { +async function loadUserInfoYIdioma() { const userId = sessionStorage.getItem("userId"); - if (!userId) return; try { @@ -68,7 +147,18 @@ window.addEventListener("DOMContentLoaded", async () => { if (user?.name) { document.getElementById("nombreUsuarioHeader").textContent = user.name; } + + if (user?.language && traducciones[user.language]) { + langActual = user.language; + const selector = document.getElementById('langSelector'); + if (selector) selector.value = langActual; + } + + translateStatic(); + cargarAsignaciones(); } catch (err) { console.error("❌ Error al obtener usuario:", err); } -}); +} + +document.addEventListener("DOMContentLoaded", loadUserInfoYIdioma); diff --git a/public/js/simulador.js b/public/js/simulador.js index 7ed49fe..9146bc8 100644 --- a/public/js/simulador.js +++ b/public/js/simulador.js @@ -1,7 +1,92 @@ +const traducciones = { + es: { + "nav.init": "Panel Atleta", + logout: "Salir", + role: "Atleta", + "sim.title": "Cargando rutina...", + "sim.play": "▶ Reproducir", + "sim.pause": "⏸ Pausar", + "sim.timeline": "Línea de Tiempo" + }, + en: { + "nav.init": "Athlete Panel", + logout: "Logout", + role: "Athlete", + "sim.title": "Loading routine...", + "sim.play": "▶ Play", + "sim.pause": "⏸ Pause", + "sim.timeline": "Timeline" + }, + fr: { + "nav.init": "Panneau Athlète", + logout: "Se déconnecter", + role: "Athlète", + "sim.title": "Chargement de la routine...", + "sim.play": "▶ Lecture", + "sim.pause": "⏸ Pause", + "sim.timeline": "Ligne du Temps" + } +}; + +let langActual = 'es'; + +function t(clave) { + return traducciones[langActual]?.[clave] || clave; +} + +function translateStatic() { + const mapping = { + 'nav.init': '[data-i18n="nav.init"]', + 'logout': '[data-i18n="logout"]', + 'sim.title': '#tituloRutina', + 'sim.timeline': '[data-i18n="sim.timeline"]', + 'sim.play': '#playPauseBtn', + 'role': '[data-i18n="role"]' + }; + + for (const [clave, selector] of Object.entries(mapping)) { + const el = document.querySelector(selector); + if (el) el.textContent = t(clave); + } +} + +document.getElementById('langSelector')?.addEventListener('change', async (e) => { + langActual = e.target.value; + translateStatic(); + + const userId = sessionStorage.getItem("userId"); + if (userId) { + await fetch(`/api/users/${userId}`, { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ language: langActual }) + }); + } +}); + document.addEventListener("DOMContentLoaded", async () => { const rutinaId = new URLSearchParams(window.location.search).get("routineId"); const formationIndex = parseInt(new URLSearchParams(window.location.search).get("formationIndex")); + const userId = sessionStorage.getItem("userId"); + if (userId) { + try { + const user = await fetch(`/api/users/${userId}`).then(res => res.json()); + if (user?.language && traducciones[user.language]) { + langActual = user.language; + const selector = document.getElementById("langSelector"); + if (selector) selector.value = langActual; + } + if (user?.name) { + document.getElementById("nombreUsuarioHeader").textContent = user.name; + } + } catch (err) { + console.error("❌ Error al obtener usuario:", err); + } + } + + translateStatic(); + if (!rutinaId || isNaN(formationIndex)) { return alert("No se proporcionó ID de rutina o índice de formación."); } @@ -22,13 +107,14 @@ document.addEventListener("DOMContentLoaded", async () => { if (rutina.musicUrl) { audioPlayer.src = rutina.musicUrl; + playBtn.textContent = t("sim.play"); playBtn.onclick = () => { if (audioPlayer.paused) { audioPlayer.play(); - playBtn.textContent = "⏸ Pausar"; + playBtn.textContent = t("sim.pause"); } else { audioPlayer.pause(); - playBtn.textContent = "▶ Reproducir"; + playBtn.textContent = t("sim.play"); } }; } else { @@ -58,7 +144,7 @@ document.addEventListener("DOMContentLoaded", async () => { const divPiscina = document.getElementById("piscina"); divPiscina.style.width = `${piscinaWidth}px`; divPiscina.style.height = `${piscinaHeight}px`; - divPiscina.style.background = "#d4f0ff"; // Azul claro + divPiscina.style.background = "#d4f0ff"; document.getElementById("piscinaContainer").style.width = `${piscinaWidth + 20}px`; function dibujarCuadricula(layer, ancho, alto, tamano = 45) { @@ -126,9 +212,7 @@ document.addEventListener("DOMContentLoaded", async () => { points: [atleta.direccion.x1, atleta.direccion.y1, atleta.direccion.x2, atleta.direccion.y2], stroke: 'black', strokeWidth: 2, - dash: [4, 4], - pointerLength: 10, - pointerWidth: 10 + dash: [4, 4] }); layer.add(dir); } @@ -144,10 +228,8 @@ document.addEventListener("DOMContentLoaded", async () => { return; } - // Pintar solo esta formación formacion.atletas.forEach(dibujarAtleta); - // Mostrar título visual const block = document.createElement("button"); block.className = "btn btn-outline-primary btn-sm me-2 step"; block.textContent = `${formacion.nombreColoquial || `Formación ${formationIndex + 1}`} (${formacion.duracion || '?'}s)`; diff --git a/public/simulador.html b/public/simulador.html index 96e9e5b..e1bf941 100644 --- a/public/simulador.html +++ b/public/simulador.html @@ -3,37 +3,52 @@