@golstats/gsc-timeline-reports 1.0.9 → 1.0.11

package/src/components/gsc-timeline.vue

@@ -364,19 +364,29 @@ async function fetchGameData() {
       .map((minute) => {
         if (!minute.event) return minute
 
-        // Filtrar eventos según las props
+        // Filtrar eventos según las props de manera simple
         const filteredEvents = minute.event.filter((event) => {
-          // Crear un objeto temporal con la estructura que espera shouldShowEvent
-          const tempEvent = {
-            event_type_id: getEventTypeFromIcon(event.icon),
-            category_id: getCategoryFromIcon(event.icon),
-            minute: event.minute,
-            match_lapse: event.match_lapse,
-            team_id: event.team === 'local' ? props.homeTeam : props.awayTeam,
-            comments: '',
+          // Goles
+          if (event.icon === 'icon-goal' && !props.goals) {
+            return false
           }
 
-          return shouldShowEvent(tempEvent)
+          // Tarjetas amarillas
+          if (event.icon === 'icon-yellow-card' && !props.yellowCards) {
+            return false
+          }
+
+          // Tarjetas rojas
+          if (event.icon === 'icon-red-card' && !props.redCards) {
+            return false
+          }
+
+          // Cambios
+          if (event.icon === 'icon-change' && !props.substitutions) {
+            return false
+          }
+
+          return true
         })
 
         return {
@@ -399,8 +409,9 @@ async function fetchGameData() {
       rightHandlePosition.value = filteredDummyEvents.length - 1
       secondHalfEndMinute.value = filteredDummyEvents[filteredDummyEvents.length - 1].minute
       minTotal.value = filteredDummyEvents[filteredDummyEvents.length - 1].minute
+      updateRangeWidth()
     }
-    updateRangeWidth()
+
     return
   }
   try {
@@ -575,28 +586,6 @@ async function fetchGameData() {
   }
 }
 
-// Función para obtener el tipo de evento desde el ícono (para datos dummy)
-function getEventTypeFromIcon(icon) {
-  const iconToEventType = {
-    'icon-goal': 1,
-    'icon-yellow-card': 2,
-    'icon-red-card': 9,
-    'icon-change': 10,
-  }
-  return iconToEventType[icon] || 1
-}
-
-// Función para obtener la categoría desde el ícono (para datos dummy)
-function getCategoryFromIcon(icon) {
-  const iconToCategory = {
-    'icon-goal': 3,
-    'icon-yellow-card': 9,
-    'icon-red-card': 9,
-    'icon-change': 10,
-  }
-  return iconToCategory[icon] || 3
-}
-
 // Función para determinar el icono según el tipo de evento
 function getEventIcon(eventTypeId, event) {
   const iconMap = {
@@ -627,18 +616,9 @@ function getEventIcon(eventTypeId, event) {
 
 // Función para filtrar eventos según las props de visibilidad
 function shouldShowEvent(event) {
-  // Debug: mostrar las props actuales
-  console.log('Props actuales:', {
-    goals: props.goals,
-    yellowCards: props.yellowCards,
-    redCards: props.redCards,
-    substitutions: props.substitutions,
-  })
-
   // Goles: event_type_id === 1 o category_id === 3 o category_id === 13
   if (event.event_type_id === 1 || event.category_id === 3 || event.category_id === 13) {
     if (!props.goals) {
-      console.log('Filtrando gol:', event)
       return false
     }
     return true
@@ -647,7 +627,6 @@ function shouldShowEvent(event) {
   // Tarjetas amarillas: event_type_id === 2 o category_id === 9 (pero no rojas)
   if (event.event_type_id === 2 || (event.category_id === 9 && !event.comments?.includes('roja'))) {
     if (!props.yellowCards) {
-      console.log('Filtrando tarjeta amarilla:', event)
       return false
     }
     return true
@@ -656,7 +635,6 @@ function shouldShowEvent(event) {
   // Tarjetas rojas: category_id === 9 con comentario que incluya "roja"
   if (event.category_id === 9 && event.comments?.includes('roja')) {
     if (!props.redCards) {
-      console.log('Filtrando tarjeta roja:', event)
       return false
     }
     return true
@@ -665,7 +643,6 @@ function shouldShowEvent(event) {
   // Cambios: category_id === 10
   if (event.category_id === 10) {
     if (!props.substitutions) {
-      console.log('Filtrando cambio:', event)
       return false
     }
     return true
@@ -677,14 +654,6 @@ function shouldShowEvent(event) {
 
 // Observar cambios en el tamaño de la ventana
 onMounted(() => {
-  // Debug: verificar que las props estén llegando
-  console.log('gsc-timeline.vue - Props recibidas:', {
-    goals: props.goals,
-    yellowCards: props.yellowCards,
-    redCards: props.redCards,
-    substitutions: props.substitutions,
-  })
-
   calculateMaxMinute()
   updateContainerWidth()
   fetchGameData()
@@ -1070,6 +1039,30 @@ function getPositionByIndex(index) {
   return `${position}px`
 }
 
+// Función para calcular el ancho de la línea basado en el último evento
+function getLineWidth() {
+  const totalPositions = timelineMinutes.value.length
+  if (totalPositions === 0) return '0px'
+  if (totalPositions === 1) return '0px'
+
+  // Encontrar el último evento real (el que tiene contenido)
+  let lastEventIndex = totalPositions - 1
+  for (let i = totalPositions - 1; i >= 0; i--) {
+    if (timelineMinutes.value[i] && timelineMinutes.value[i].event) {
+      lastEventIndex = i
+      break
+    }
+  }
+
+  // Calcular la posición exacta del último evento en píxeles
+  const lastEventPosition = (lastEventIndex / (totalPositions - 1)) * (props.timelineWidth - 40)
+
+  // Ajustar para que la línea termine exactamente en el centro del último evento
+  const adjustedWidth = lastEventPosition + 10 // 10px para centrar en el evento
+
+  return `${adjustedWidth}px`
+}
+
 // Inicia el arrastre de los handles
 function startDrag(handle, event) {
   event.preventDefault() // Previene selección de texto
@@ -1780,7 +1773,7 @@ function incrementMinStart() {
 
           <!-- Línea de tiempo única -->
           <div class="timeline-line">
-            <div class="line"></div>
+            <div class="line" :style="{ width: getLineWidth() }"></div>
 
             <!-- Marcador inicial fijo (minuto 0) -->
             <span
@@ -2516,11 +2509,10 @@ function incrementMinStart() {
 .line {
   position: absolute;
   top: 50%;
-  left: 48%;
-  width: 98%;
+  left: 0;
   height: 2px;
   background: #3a6081;
-  transform: translate(-50%, -50%);
+  transform: translateY(-50%);
   border-radius: 2px;
 }
 .event {
@@ -2655,17 +2647,17 @@ function incrementMinStart() {
 }
 .minute-ball-edge {
   z-index: 4;
-  border: none;
+  border: 1px solid #cbee6b;
 }
 .minute-ball-initial {
   z-index: 2;
-  border: 1px solid #4b80ae;
+  border: 1px solid #cbee6b;
   background-color: #0d1d29;
   color: #fff;
   font-weight: bold;
   font-size: 10px;
 }
-.minute-ball:not(.minute-ball-edge) {
+.minute-ball:not(.minute-ball-edge):not(.minute-ball-initial) {
   border: solid 1px #4b80ae;
 }
 .range-dot {