refactor(js,ui): depurar funciones huerfanas en jsCode y optimizar tarjetas en colaborando3

Depuracion de codigo muerto en jsCode.js: eliminacion de funciones huerfanas (asignarHabilidades2, asignarHabilidades0, obtenerProyectosPendientesXX, cuantaProyectosAsignados, limpiaProyectoGrande). Consistencia en renderizacion de habilidades acreditadas. Optimizacion de tarjetas de departamento en colaborando3.php ocultando renglones vacios (.dept-hab-item:empty). Actualizacion de CONTEXT.md.

CONTEXT.md

@@ -2,32 +2,29 @@
 
 ## Resumen Ejecutivo de la Sesión
 
-El objetivo principal de esta sesión consistió en la creación e implementación de **`colaborando3.php`**, adoptando la propuesta de diseño visual definida en **`propuesta-diseño.html`**, asegurando al 100% que el motor de lógica y eventos del juego (**`jsCode.js`**) permanezca intacto y sin ninguna modificación.
+El objetivo principal de esta sesión consistió en la creación e implementación de **`colaborando3.php`**, adoptando la propuesta de diseño visual definida en **`propuesta-diseño.html`**, y la depuración del código en **`jsCode.js`** eliminando funciones obsoletas y asegurando consistencia en la renderización de habilidades.
 
 ---
 
 ## Decisiones Principales y Arquitectura
 
-1. **Creación de `colaborando3.php` basada en `propuesta-diseño.html`**:
+1. **Creación y Refactorización de `colaborando3.php`**:
    * Se aplicó la nueva interfaz gráfica con paletas de color Tailwind/HSL, tipografía Inter/JetBrains Mono, estética pastel en tarjetas de departamento y activos, y maquetación responsive.
-   * Se rediseñó el **Proyecto en Turno (Grande)** y los **Proyectos Activos Secundarios** (`#proyecto_1` a `#proyecto_6`) para presentar etiquetas compactas de activos, contadores de activos pagados sin fondo sólido y bloques de mantenimiento integrados.
-   * Se centraron horizontalmente las píldoras de activos requeridos, contadores pagados y texto de mantenimiento en los proyectos secundarios.
+   * **Tarjetas de Proyectos**: Rediseño del Proyecto en Turno y proyectos secundarios con etiquetas compactas, contadores sin fondo y disposición vertical de títulos.
+   * **Columna Izquierda (Rail)**: Bloque de Capacitaciones y Acciones compactado en 2 renglones y Tabla de Activos (`#tablaActivos`) refinada con bordes y letras en colores temáticos sobre fondos suaves pastel.
+   * **Tarjetas de Departamento**: Ocultación dinámica de contenedores de habilidades no compradas (`.dept-hab-item:empty { display: none !important; }`) eliminando huecos en blanco.
 
-2. **Ajustes en la Columna Izquierda (Rail)**:
-   * **Capacitaciones y Acciones**: Se compactó el bloque en 2 renglones (Renglón 1: Checkbox Capacitaciones + Etiqueta Acciones; Renglón 2: `#tablaHabilidadesAcreditadas` con `#haNombre` y `#haCosto` + botones de acción `#bAccion1` y `#bAccion2` con dimensiones reducidas).
-   * **Tabla de Activos (`#tablaActivos`)**: Se estilizó la primera columna de nombres de activos con fondos suaves pastel, bordes `1.5px solid` y texto en el color característico de cada activo (Dorado, Naranja, Verde, Azul, Rojo, Azul Marino).
+2. **Limpieza y Consistencia en `jsCode.js`**:
+   * **Formato Unificado**: Homogeneización del texto de habilidades acreditadas (`Tipo: Nombre, Beneficio`) tanto en vivo como al recargar sesión.
+   * **Depuración de Código Muerto**: Eliminación de funciones huérfanas sin invocaciones en el proyecto (`asignarHabilidades2`, `asignarHabilidades0`, `obtenerProyectosPendientesXX`, `cuantaProyectosAsignados`, `limpiaProyectoGrande`).
+   * **Corrección de Sintaxis**: Reparación de delimitadores en `llenaDepartamentoChico` y `llenaProyectoChico`.
 
-3. **Garantía de Compatibilidad Total con `jsCode.js`**:
-   * **Sin Cambios en JS**: `jsCode.js` se mantiene 100% idéntico a la versión del repositorio.
-   * **Jerarquía DOM Preservada**: Se adaptó el HTML/CSS de `colaborando3.php` para mantener intactos los IDs y selectores requeridos por `jsCode.js` (`#TablaProyectoGde`, `#activosProyectoGde`, `#activoReqProyectoNom1..3`, `#activoReqProyectoCant1..3`, `#tablaHabilidadesAcreditadas`, `#haNombre`, `#haCosto`, `#bAccion1`, `#bAccion2`, `#tablaActivos`, etc.).
-   * **Inmunidad de Estilos**: Se configuraron selectores CSS específicos por ID para que las tarjetas conserven su formato compacto y colores de activo incluso cuando `jsCode.js` limpia o inyecta clases dinámicamente (`llenaProyectoGde`, `llenaProyectoChico2`).
-
-4. **Interacción y Drag & Drop**:
-   * Se ajustó el z-index de los elementos arrastrados (`.ui-draggable-dragging`) para flotar por encima de la interfaz.
-   * Se eliminaron clases duplicadas (`droppableActivos`) en contenedores anidados para asegurar que cada evento de arrastrar y soltar se ejecute una sola vez (+1 activo).
+3. **Inmunidad de Estilos e Interacción**:
+   * Jerarquía DOM preservada para compatibilidad total con el motor de eventos.
+   * Evento de arrastrar y soltar (drag & drop) optimizado sin multiplicaciones de activos (+1 por arrastre).
 
 ---
 
 ## Tareas Pendientes / Próximos Pasos
 
-* Realizar pruebas de juego completas en `colaborando3.php` para validar la rotación de turnos, la eliminación/completado de proyectos mediante el modal `#quitarProyectoCompleto` y el cálculo de recursos quincenales.
+* Continuar con pruebas funcionales de juego completo y validación de sesiones guardadas.

colaborando3.php

@@ -1419,12 +1419,15 @@
         }
 
         .dept-hab-item {
-            min-height: 16px;
             color: var(--text);
             font-size: 11px;
             line-height: 1.3;
         }
 
+        .dept-hab-item:empty {
+            display: none !important;
+        }
+
         /* ============ COLUMNA DERECHA (PROYECTOS) ============ */
         .col-proyectos {
             display: flex;

jsCode.js

@@ -158,7 +158,7 @@ function llenaDepartamentoGde(depto) {
     if ($('#habilidadesAcreditadasGde1').text() == '') {
       $('#habilidadesAcreditadasGde1').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -167,7 +167,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde2').text() == '') {
       $('#habilidadesAcreditadasGde2').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -176,7 +176,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde3').text() == '') {
       $('#habilidadesAcreditadasGde3').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -208,7 +208,7 @@ function llenaDepartamentoGde(depto) {
     if ($('#habilidadesAcreditadasGde1').text() == '') {
       $('#habilidadesAcreditadasGde1').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -217,7 +217,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde2').text() == '') {
       $('#habilidadesAcreditadasGde2').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -226,7 +226,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde3').text() == '') {
       $('#habilidadesAcreditadasGde3').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -258,7 +258,7 @@ function llenaDepartamentoGde(depto) {
     if ($('#habilidadesAcreditadasGde1').text() == '') {
       $('#habilidadesAcreditadasGde1').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -267,7 +267,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde2').text() == '') {
       $('#habilidadesAcreditadasGde2').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -276,7 +276,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde3').text() == '') {
       $('#habilidadesAcreditadasGde3').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -510,15 +510,6 @@ function llenaDepartamentoChico(depto) {
   console.log(`[llenaDepartamentoChico] <- FIN para depto: '${depto}'`)
 }
 
-function cuantaProyectosAsignados() {
-  let contador = 0
-  for (let i = 0; i < proyectos.length; i++) {
-    if (proyectos[i].estatus == 'En proceso') {
-      contador++
-    }
-  }
-}
-
 function limpiaProyectoChico(elProyecto) {
   console.log('Limpia proyecto chico', elProyecto)
   // console.log($("#" + proyectoActual + " #activoReqProyectoNom1").text())
@@ -545,27 +536,6 @@ function limpiaProyectoChico(elProyecto) {
   }
 }
 
-function limpiaProyectoGrande() {
-  console.log('Limpia proyecto grande')
-  $('#TablaProyectoGde').removeAttr('num')
-  $('#TablaProyectoGde').removeAttr('estatus')
-  $('#TablaProyectoGde').css('background-color', '')
-  $('#nombreProyectoGde').text('')
-  $('#descripcionProyectoGde').text('')
-  $('#TablaProyectoGde #puntosGanados').text('')
-  $('#puntosPerdidos').text('')
-  $('#activoReqProyectoNom1').attr('class', '').text('')
-  $('#activoReqProyectoNom2').attr('class', '').text('')
-  $('#activoReqProyectoNom3').attr('class', '').text('')
-  $('#activoReqProyectoCantX1').text('0')
-  $('#activoReqProyectoCantX2').text('0')
-  $('#activoReqProyectoCantX3').text('0')
-  $('#activoReqProyectoCant1').attr('class', '').text('')
-  $('#activoReqProyectoCant2').attr('class', '').text('')
-  $('#activoReqProyectoCant3').attr('class', '').text('')
-  $('#mantoGde').text('MANTENIMIENTO')
-}
-
 function llenaProyectoChico(proyectoNum) {
   console.log('Llenando proyectos! ', proyectoNum)
   const colores = [
@@ -1603,7 +1573,7 @@ $('#accionComprarCapacitacion').click(function () {
           if ($('#habilidadesAcreditadasGde1').text() == '') {
             $('#habilidadesAcreditadasGde1').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -1614,7 +1584,7 @@ $('#accionComprarCapacitacion').click(function () {
             )
             $('#' + deptoActual + ' #habilidadesAcreditadasCh1').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -1622,12 +1592,12 @@ $('#accionComprarCapacitacion').click(function () {
                 ', ' +
                 beneficio +
                 tipoRecurso.charAt(0).toUpperCase() +
-                '<br><br>'
+                '<br>'
             )
           } else if ($('#habilidadesAcreditadasGde2').text() == '') {
             $('#habilidadesAcreditadasGde2').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -1638,7 +1608,7 @@ $('#accionComprarCapacitacion').click(function () {
             )
             $('#' + deptoActual + ' #habilidadesAcreditadasCh2').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -1646,12 +1616,12 @@ $('#accionComprarCapacitacion').click(function () {
                 ', ' +
                 beneficio +
                 tipoRecurso.charAt(0).toUpperCase() +
-                '<br><br>'
+                '<br>'
             )
           } else if ($('#habilidadesAcreditadasGde3').text() == '') {
             $('#habilidadesAcreditadasGde3').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -1662,7 +1632,7 @@ $('#accionComprarCapacitacion').click(function () {
             )
             $('#' + deptoActual + ' #habilidadesAcreditadasCh3').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -2754,28 +2724,7 @@ $('.droppableActivos').droppable({
   },
 })
 
-function obtenerProyectosPendientesXX(cuantos) {
-  // Filtrar proyectos pendientes
-  const proyectosPendientes = proyectos.filter(
-    (proyecto) => proyecto.estatus === 'Pendiente'
-  )
-  // const proyectosPendientes = proyectos.filter(proyecto =>
-  //     proyecto.estatus === "Pendiente" && proyecto.dificultad !== "Incidencia"
-  // );
-  // Si hay menos de 10 proyectos pendientes, retornar todos los disponibles
-  if (proyectosPendientes.length <= cuantos) {
-    return proyectosPendientes
-  }
-  // Seleccionar 10 proyectos aleatorios
-  const resultado = []
-  const proyectosDisponibles = [...proyectosPendientes]
-  for (let i = 0; i < cuantos && proyectosDisponibles.length > 0; i++) {
-    const randomIndex = Math.floor(Math.random() * proyectosDisponibles.length)
-    resultado.push(proyectosDisponibles[randomIndex])
-    proyectosDisponibles.splice(randomIndex, 1)
-  }
-  return resultado
-}
+
 
 /**
  * Pone en el arreglo proyectosPendientes, 7 proyectos al azar de los que están pendientes en el arreglo general.
@@ -3012,66 +2961,7 @@ function guardarNuevoTexto(nuevoTexto, deptoOriginal) {
   console.log('ARREGLO:', arreglosDeptos['arr' + deptoOriginal])
 }
 
-/**
- * Asigna las habilidades acreditadas al departamento especificado.
- */
-function asignarHabilidades2(depto) {
-  console.log('>>>>>>    Asignando habilidades al departamento:', depto)
 
-  // Obtiene el arreglo del departamento especificado
-  const elArregloDepto = arreglosDeptos['arr' + depto]
-
-  // Lista de habilidades a asignar en orden de prioridad
-  const habilidades = [
-    'habilidadTiempo',
-    'habilidadPersonal',
-    'habilidadCapital',
-  ]
-
-  // Arreglo para almacenar las habilidades asignadas
-  const habilidadesAsignadas = [0, 0, 0]
-
-  // Asigna las habilidades en orden de prioridad
-  habilidades.forEach((habilidad, index) => {
-    // Encuentra el valor de la habilidad en el arreglo del departamento
-    const value = elArregloDepto.find((item) => item.name === habilidad).value
-    // Si el valor no es cero y no está ya asignado, se asigna a habilidadesAsignadas
-    if (value !== 0 && !habilidadesAsignadas.includes(value)) {
-      habilidadesAsignadas[index] = value
-    }
-  })
-
-  // Actualiza el DOM con las habilidades asignadas
-  habilidadesAsignadas.forEach((habilidad, index) => {
-    if (habilidad !== 0) {
-      // Obtiene la capacitación correspondiente a la habilidad
-      const capacitacion = arreglosCapacitaciones[habilidad]
-
-      // Obtiene y mapea el tipo de habilidad a un nombre más descriptivo
-      const tipo = mapTipo(obtenerValorCapacitacion(capacitacion, 'tipo'))
-
-      // Obtiene el nombre, beneficio y tipo de recurso de la capacitación
-      const nombre = obtenerValorCapacitacion(capacitacion, 'nombre')
-      const beneficio = obtenerValorCapacitacion(capacitacion, 'beneficio')
-      const tipoRecurso = obtenerValorCapacitacion(capacitacion, 'tipoRecurso')
-        .charAt(0)
-        .toUpperCase()
-
-      // Construye el contenido HTML a insertar
-      const contenido = `${tipo}<br>${nombre}, ${beneficio} ${tipoRecurso}<br><br>`
-
-      // Actualiza el contenido HTML del elemento correspondiente en el DOM
-      $(`#${depto} #habilidadesAcreditadasCh${index + 1}`).html(contenido)
-    }
-  })
-  tieneTresHabilidades(depto)
-  // Asegura que la vista grande se actualice con la acción especial si es el depto actual
-  if (depto === deptoActual) {
-    const elArreglo = arreglosDeptos['arr' + depto]
-    const accion = findArrayValue(elArreglo, 'accionEspecialQuincenal')
-    $('#' + depto + ' #accionEspecialGde').text(accion)
-  }
-}
 
 /**
  * Asigna las habilidades acreditadas al departamento especificado.
@@ -3121,9 +3011,9 @@ function asignarHabilidades(depto) {
       console.log('Capacitación:', capacitacion)
       console.log('Tipo:', tipo)
 
-      const contenido = `${tipo}<br>${nombre}, ${beneficio} ${tipoRecurso
+      const contenido = `${tipo}: ${nombre}, ${beneficio} ${tipoRecurso
         .charAt(0)
-        .toUpperCase()}<br><br>`
+        .toUpperCase()}<br>`
       $(`#${depto} #habilidadesAcreditadasCh${index + 1}`).html(contenido)
     }
   })
@@ -3198,136 +3088,7 @@ function tieneTresHabilidades(depto) {
   return completo
 }
 
-/**
- * Asigna las habilidades acreditadas al departamento especificado.
- **/
-function asignarHabilidades0(depto) {
-  console.log('>>>>>>    Asignando habilidades al departamento:', depto)
-  let habilidad1 = 0
-  let habilidad2 = 0
-  let habilidad3 = 0
-  const elArregloDepto = arreglosDeptos['arr' + depto]
-  //   console.log(elArregloDepto)
 
-  const habilidadTiempo = elArregloDepto.find(
-    (item) => item.name === 'habilidadTiempo'
-  ).value
-  const habilidadPersonal = elArregloDepto.find(
-    (item) => item.name === 'habilidadPersonal'
-  ).value
-  const habilidadCapital = elArregloDepto.find(
-    (item) => item.name === 'habilidadCapital'
-  ).value
-  //   console.log('habilidadTiempo:', habilidadTiempo)
-  //   console.log('habilidadPersonal:', habilidadPersonal)
-  //   console.log('habilidadCapital:', habilidadCapital)
-
-  if (habilidadTiempo != 0) {
-    habilidad1 = habilidadTiempo
-  } else if (habilidadPersonal != 0) {
-    habilidad1 = habilidadPersonal
-  } else if (habilidadCapital != 0) {
-    habilidad1 = habilidadCapital
-  }
-
-  if (habilidadTiempo != 0 && habilidadTiempo != habilidad1) {
-    habilidad2 = habilidadTiempo
-  } else if (habilidadPersonal != 0 && habilidadPersonal != habilidad1) {
-    habilidad2 = habilidadPersonal
-  } else if (habilidadCapital != 0 && habilidadCapital != habilidad1) {
-    habilidad2 = habilidadCapital
-  }
-  if (
-    habilidadTiempo != 0 &&
-    habilidadTiempo != habilidad1 &&
-    habilidadTiempo != habilidad2
-  ) {
-    habilidad3 = habilidadTiempo
-  } else if (
-    habilidadPersonal != 0 &&
-    habilidadPersonal != habilidad1 &&
-    habilidadPersonal != habilidad2
-  ) {
-    habilidad3 = habilidadPersonal
-  } else if (
-    habilidadCapital != 0 &&
-    habilidadCapital != habilidad1 &&
-    habilidadCapital != habilidad2
-  ) {
-    habilidad3 = habilidadCapital
-  }
-
-  console.log('laHabilidad1: ', habilidad1)
-  console.log('laHabilidad2: ', habilidad2)
-  console.log('laHabilidad3: ', habilidad3)
-
-  if (habilidad1 != 0) {
-    console.log('laCapacitacion:', arreglosCapacitaciones[habilidad1])
-    let tipo = findArrayValue(arreglosCapacitaciones[habilidad1], 'tipo')
-    if (tipo == 'HC') {
-      tipo = 'Habilidad Conceptual'
-    } else if (tipo == 'HT') {
-      tipo = 'Habilidad Técnica'
-    } else if (tipo == 'HH') {
-      tipo = 'Habilidad Humana'
-    }
-    $('#' + depto + ' #habilidadesAcreditadasCh1').html(
-      tipo +
-        '<br>' +
-        findArrayValue(arreglosCapacitaciones[habilidad1], 'nombre') +
-        ', ' +
-        findArrayValue(arreglosCapacitaciones[habilidad1], 'beneficio') +
-        findArrayValue(arreglosCapacitaciones[habilidad1], 'tipoRecurso')
-          .charAt(0)
-          .toUpperCase() +
-        '<br><br>'
-    )
-  }
-  if (habilidad2 != 0) {
-    console.log('laCapacitacion:', arreglosCapacitaciones[habilidad2])
-    let tipo = findArrayValue(arreglosCapacitaciones[habilidad2], 'tipo')
-    if (tipo == 'HC') {
-      tipo = 'Habilidad Conceptual'
-    } else if (tipo == 'HT') {
-      tipo = 'Habilidad Técnica'
-    } else if (tipo == 'HH') {
-      tipo = 'Habilidad Humana'
-    }
-    $('#' + depto + ' #habilidadesAcreditadasCh2').html(
-      tipo +
-        '<br>' +
-        findArrayValue(arreglosCapacitaciones[habilidad2], 'nombre') +
-        ', ' +
-        findArrayValue(arreglosCapacitaciones[habilidad2], 'beneficio') +
-        findArrayValue(arreglosCapacitaciones[habilidad2], 'tipoRecurso')
-          .charAt(0)
-          .toUpperCase() +
-        '<br><br>'
-    )
-  }
-  if (habilidad3 != 0) {
-    console.log('laCapacitacion:', arreglosCapacitaciones[habilidad3])
-    let tipo = findArrayValue(arreglosCapacitaciones[habilidad3], 'tipo')
-    if (tipo == 'HC') {
-      tipo = 'Habilidad Conceptual'
-    } else if (tipo == 'HT') {
-      tipo = 'Habilidad Técnica'
-    } else if (tipo == 'HH') {
-      tipo = 'Habilidad Humana'
-    }
-    $('#' + depto + ' #habilidadesAcreditadasCh3').html(
-      tipo +
-        '<br>' +
-        findArrayValue(arreglosCapacitaciones[habilidad3], 'nombre') +
-        ', ' +
-        findArrayValue(arreglosCapacitaciones[habilidad3], 'beneficio') +
-        findArrayValue(arreglosCapacitaciones[habilidad3], 'tipoRecurso')
-          .charAt(0)
-          .toUpperCase() +
-        '<br><br>'
-    )
-  }
-}
 
 /**
  * Función que se ejecuta al iniciar el juego, DESPUES de cargar los arreglos de activos y departamentos.