Propuesta de Mejoras para la Tarea #8505: Modal con historial en Mundiales previos¶

Descripción Completa de la Funcionalidad¶

Desarrollo de un modal de historial que se activa al hacer clic en los elementos VS (versus) dentro de las tarjetas de partido en el widget de Calendario Fechas. Este modal mostrará información detallada sobre los enfrentamientos históricos entre equipos en mundiales anteriores, contando la historia de la rivalidad (ya sea corta, larga o de un encuentro totalmente nuevo) para construir la narrativa del partido antes de que comience el juego.

Campos a Actualizar¶

• Nuevo componente HistoryModal.vue para mostrar información de historial basado en MyBaseModal como base
• Modificación del componente MatchSocialCard.vue para añadir evento de clic en el elemento VS
• Nuevo store historyStore.js para manejar la lógica de datos históricos
• Actualización del archivo de documentación para incluir el nuevo modal

Estructura y URLs de los Endpoints Necesarios¶

• Endpoint para obtener datos de historial de enfrentamientos: ${configStore.extraDataUrl}/history/${tournament}/${sport}/head-to-head.json
• El endpoint debe recibir como parámetros: team1Id, team2Id, tournamentType (ej. "worldcup")
• El formato de respuesta debe seguir la estructura definida en el blueprint del History Modal
• La fuente de datos es un archivo JSON que se actualiza semanalmente (máximo diariamente) mediante un script que exporta datos de una hoja de cálculo de Google

Archivos a Modificar¶

1. src/components/sports/football/MatchSocialCard.vue - Añadir evento de clic en VS
2. src/components/widgets/CalendarWidget.vue - Integrar la lógica de apertura del modal
3. src/components/modals/HistoryModal.vue - Nuevo componente para el modal de historial basado en MyBaseModal
4. src/stores/history.js - Nuevo store para manejar datos de historial
5. src/composables/useModal.js - Asegurar compatibilidad con el nuevo tipo de modal
6. docs/widgets-documentation.md - Actualizar documentación con el nuevo modal

Pasos Requeridos para Completar la Tarea¶

1. Crear el store historyStore con la lógica para cargar datos de historial desde extraDataUrl
2. Implementar el componente HistoryModal.vue basado en MyBaseModal siguiendo el blueprint especificado
3. Modificar MatchSocialCard.vue para detectar clics en el elemento VS y disparar el modal
4. Actualizar CalendarWidget.vue para integrar la lógica de apertura del modal de historial
5. Probar la funcionalidad con diferentes combinaciones de equipos
6. Validar que los datos se obtengan correctamente desde la fuente externa extraDataUrl
7. Asegurar la responsividad y accesibilidad del modal
8. Documentar la nueva funcionalidad

Requisitos de Seguridad¶

• Validar que los IDs de equipos sean seguros antes de usarlos en solicitudes
• Sanitizar cualquier contenido dinámico mostrado en el modal
• Asegurar que las URLs de origen sean confiables

Requisitos de Performance¶

• Implementar estrategias de caché apropiadas que se alineen con la frecuencia de actualización semanal del archivo JSON
• Manejar la invalidación de caché cuando se actualice el archivo
• Usar lazy loading para imágenes grandes en el modal
• Asegurar tiempos de carga rápidos (<2 segundos) para el contenido del modal
• Implementar mecanismos de fallback si el archivo JSON no está disponible temporalmente

Contenido del History Modal Blueprint¶

Estructura del Modal:¶

• Cabecera de Confrontación: Presenta a los protagonistas con sus respectivos nombres y banderas, utilizando un círculo central para establecer la naturaleza del duelo
• Tablero de Estadísticas Generales (KPIs): Utiliza un sistema de tarjetas para desglosar los datos históricos de forma cuantitativa (total de partidos, victorias por equipo, empates)
• Filtros y Navegación Interna: Incluye pestañas para segmentar la información ("Últimos enfrentamientos", "Mundial", etc.)
• Feed de Partidos Recientes: Listado detallado de los juegos previos que incluye fecha exacta, marcador destacado y contexto del torneo
• Sección de contexto histórico

Datos de Entrada:¶

• Dos objetos de equipo (team1 y team2)
• Parámetros de historial (tournamentType, dateRange, etc.)

Componentes de UI:¶

• Pestañas para diferentes vistas de datos
• Tarjetas de estadísticas
• Lista de historial de partidos
• Manejo especial para equipos sin historial previo ("Banner de Debut")

Comportamiento Responsivo:¶

• Pantalla completa en móviles
• Modal centrado en escritorio
• Diseño adaptable a diferentes tamaños de pantalla

Dependencias¶

• El widget debe tener acceso a configStore.extraDataUrl para obtener los datos históricos
• Los equipos deben tener IDs válidos para realizar la consulta de historial
• El archivo JSON de datos se actualiza semanalmente (máximo diariamente) mediante un script que exporta de una hoja de cálculo de Google
• El nuevo componente debe basarse en MyBaseModal para mantener consistencia con otros modales en el sistema

Manejo de Escenarios Especiales¶

Escenario de "Historial Cero":¶

• Si los equipos nunca han jugado, el modal mostrará un "Banner de Debut" con texto sugerido: "¡Duelo inédito! Estas selecciones nunca se han enfrentado en la historia"
• Si no hay historial en un torneo específico pero sí en otros, mostrar: "Será el primer duelo entre ambos en una Copa del Mundo"

Modos de Visualización:¶

• Versión estática: Mostrar la lista completa de encuentros de un solo torneo o varios
• Versión dinámica con pestañas: Permitir al usuario segmentar la importancia de los partidos (por ejemplo, separar partidos de Mundial de todos los partidos amistosos)

Características Adicionales¶

• Soporte multi-idioma (español e inglés como mínimo)
• Personalización de branding, colores y tipografía
• Posibilidad de adaptar el título principal en función del historial que se muestre
• Manejo adecuado de casos donde hay pocos datos (menos de 5 partidos) versus rivalidades históricas extensas (20+ partidos)
• Consistencia visual con el patrón de diseño de MyBaseModal utilizado en otros modales del sistema