diff --git a/CONTEXT.md b/CONTEXT.md index 43cad09..66b58c2 100644 --- a/CONTEXT.md +++ b/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. diff --git a/colaborando3.php b/colaborando3.php index 3bb6ac9..ff153c6 100644 --- a/colaborando3.php +++ b/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; diff --git a/jsCode.js b/jsCode.js index 1c41819..51cbdd7 100644 --- a/jsCode.js +++ b/jsCode.js @@ -158,7 +158,7 @@ function llenaDepartamentoGde(depto) { if ($('#habilidadesAcreditadasGde1').text() == '') { $('#habilidadesAcreditadasGde1').html( tipo + - '
' + + ': ' + findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') + ' ' + beneficio + @@ -167,7 +167,7 @@ function llenaDepartamentoGde(depto) { } else if ($('#habilidadesAcreditadasGde2').text() == '') { $('#habilidadesAcreditadasGde2').html( tipo + - '
' + + ': ' + findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') + ' ' + beneficio + @@ -176,7 +176,7 @@ function llenaDepartamentoGde(depto) { } else if ($('#habilidadesAcreditadasGde3').text() == '') { $('#habilidadesAcreditadasGde3').html( tipo + - '
' + + ': ' + findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') + ' ' + beneficio + @@ -208,7 +208,7 @@ function llenaDepartamentoGde(depto) { if ($('#habilidadesAcreditadasGde1').text() == '') { $('#habilidadesAcreditadasGde1').html( tipo + - '
' + + ': ' + findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') + ' ' + beneficio + @@ -217,7 +217,7 @@ function llenaDepartamentoGde(depto) { } else if ($('#habilidadesAcreditadasGde2').text() == '') { $('#habilidadesAcreditadasGde2').html( tipo + - '
' + + ': ' + findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') + ' ' + beneficio + @@ -226,7 +226,7 @@ function llenaDepartamentoGde(depto) { } else if ($('#habilidadesAcreditadasGde3').text() == '') { $('#habilidadesAcreditadasGde3').html( tipo + - '
' + + ': ' + findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') + ' ' + beneficio + @@ -258,7 +258,7 @@ function llenaDepartamentoGde(depto) { if ($('#habilidadesAcreditadasGde1').text() == '') { $('#habilidadesAcreditadasGde1').html( tipo + - '
' + + ': ' + findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') + ' ' + beneficio + @@ -267,7 +267,7 @@ function llenaDepartamentoGde(depto) { } else if ($('#habilidadesAcreditadasGde2').text() == '') { $('#habilidadesAcreditadasGde2').html( tipo + - '
' + + ': ' + findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') + ' ' + beneficio + @@ -276,7 +276,7 @@ function llenaDepartamentoGde(depto) { } else if ($('#habilidadesAcreditadasGde3').text() == '') { $('#habilidadesAcreditadasGde3').html( tipo + - '
' + + ': ' + 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 + - '
' + + ': ' + findArrayValue( arreglosCapacitaciones[habilidadAcreditadaEnEspera], 'nombre' @@ -1614,7 +1584,7 @@ $('#accionComprarCapacitacion').click(function () { ) $('#' + deptoActual + ' #habilidadesAcreditadasCh1').html( tipo + - '
' + + ': ' + findArrayValue( arreglosCapacitaciones[habilidadAcreditadaEnEspera], 'nombre' @@ -1622,12 +1592,12 @@ $('#accionComprarCapacitacion').click(function () { ', ' + beneficio + tipoRecurso.charAt(0).toUpperCase() + - '

' + '
' ) } else if ($('#habilidadesAcreditadasGde2').text() == '') { $('#habilidadesAcreditadasGde2').html( tipo + - '
' + + ': ' + findArrayValue( arreglosCapacitaciones[habilidadAcreditadaEnEspera], 'nombre' @@ -1638,7 +1608,7 @@ $('#accionComprarCapacitacion').click(function () { ) $('#' + deptoActual + ' #habilidadesAcreditadasCh2').html( tipo + - '
' + + ': ' + findArrayValue( arreglosCapacitaciones[habilidadAcreditadaEnEspera], 'nombre' @@ -1646,12 +1616,12 @@ $('#accionComprarCapacitacion').click(function () { ', ' + beneficio + tipoRecurso.charAt(0).toUpperCase() + - '

' + '
' ) } else if ($('#habilidadesAcreditadasGde3').text() == '') { $('#habilidadesAcreditadasGde3').html( tipo + - '
' + + ': ' + findArrayValue( arreglosCapacitaciones[habilidadAcreditadaEnEspera], 'nombre' @@ -1662,7 +1632,7 @@ $('#accionComprarCapacitacion').click(function () { ) $('#' + deptoActual + ' #habilidadesAcreditadasCh3').html( tipo + - '
' + + ': ' + 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}
${nombre}, ${beneficio} ${tipoRecurso}

` - - // 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}
${nombre}, ${beneficio} ${tipoRecurso + const contenido = `${tipo}: ${nombre}, ${beneficio} ${tipoRecurso .charAt(0) - .toUpperCase()}

` + .toUpperCase()}
` $(`#${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 + - '
' + - findArrayValue(arreglosCapacitaciones[habilidad1], 'nombre') + - ', ' + - findArrayValue(arreglosCapacitaciones[habilidad1], 'beneficio') + - findArrayValue(arreglosCapacitaciones[habilidad1], 'tipoRecurso') - .charAt(0) - .toUpperCase() + - '

' - ) - } - 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 + - '
' + - findArrayValue(arreglosCapacitaciones[habilidad2], 'nombre') + - ', ' + - findArrayValue(arreglosCapacitaciones[habilidad2], 'beneficio') + - findArrayValue(arreglosCapacitaciones[habilidad2], 'tipoRecurso') - .charAt(0) - .toUpperCase() + - '

' - ) - } - 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 + - '
' + - findArrayValue(arreglosCapacitaciones[habilidad3], 'nombre') + - ', ' + - findArrayValue(arreglosCapacitaciones[habilidad3], 'beneficio') + - findArrayValue(arreglosCapacitaciones[habilidad3], 'tipoRecurso') - .charAt(0) - .toUpperCase() + - '

' - ) - } -} /** * Función que se ejecuta al iniciar el juego, DESPUES de cargar los arreglos de activos y departamentos.