@golstats/gsc-reports 1.0.0

package/src/components/thumbnails-reports/AnalisisPrematchType2.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="prematch-bg">
+    <div class="title">Análisis <span class="highlight">Prematch</span></div>
+    <div class="subtitle">
+      <span class="jornada">{{ traducirJornada(props.report.game.matchday_name) }}</span>
+      <span class="fecha"> - {{ formatDate(props.report.game.date_time_utc) }}</span>
+    </div>
+    <div class="teams-row">
+      <div class="team team-local">
+        <span class="escudo-svg">
+          <img
+            width="55px"
+            :src="
+              'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              props.report.game.home_team +
+              '.png'
+            "
+          />
+        </span>
+        <span class="team-name">{{ props.report.game.home_team_acronym }}</span>
+      </div>
+      <div class="team team-visitor">
+        <span class="escudo-svg">
+          <img
+            width="55px"
+            :src="
+              'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              props.report.game.visiting_team +
+              '.png'
+            "
+          />
+        </span>
+        <span class="team-name">{{ props.report.game.visiting_team_acronym }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatDate } from '../../utils/dateUtils.js'
+
+function traducirJornada(jornada) {
+  if (!jornada) return ''
+  return jornada
+    .replace('Matchday', 'J')
+    .replace('de Final', '')
+    .replace('Playoffs 1', 'CFI')
+    .replace('Playoffs 2', 'CFV')
+    .replace('Playoffs 3', 'SI')
+    .replace('Playoffs 4', 'SV')
+    .replace('Playoffs 5', 'FI')
+    .replace('Playoffs 6', 'FV')
+}
+// Aquí puedes agregar props si quieres que los nombres de equipos y jornada sean dinámicos
+const props = defineProps({
+  report: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+</script>
+
+<style scoped>
+.prematch-bg {
+  width: 100%;
+  height: 222px;
+  /* height: 100vh; */
+  background: url('/images/background-postmatch-template-02.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.header {
+  padding: 24px 32px;
+}
+
+.logo {
+  height: 40px;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* Elimina el margin-top para centrar verticalmente */
+}
+
+.title {
+  font-size: 0.8rem;
+  color: #fff;
+  margin-top: -10px;
+  font-family: Poppins-Regular;
+}
+
+.highlight {
+  font-family: Poppins-Bold;
+  color: #fff;
+}
+
+.subtitle {
+  font-family: Poppins-Regular;
+  margin-top: -8px;
+  font-size: 1.1rem;
+  color: #e0e0e0;
+}
+
+.jornada {
+  font-family: Poppins-Medium;
+  color: #fff;
+  font-size: 0.4rem;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  opacity: 0.8;
+}
+
+.fecha {
+  font-family: Poppins-Regular;
+  color: #e0e0e0;
+  opacity: 0.8;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  font-size: 0.4rem;
+}
+
+.teams-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  margin-top: 20px;
+}
+
+.team {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.team-visitor {
+  flex-direction: row-reverse;
+}
+
+.escudo-svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 55px;
+  height: 55px;
+}
+
+.team-name {
+  font-size: 1rem;
+  font-family: Poppins-bold;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: 2px;
+}
+</style>

package/src/components/thumbnails-reports/AnalisisPrematchType3.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="prematch-bg">
+    <div class="title">Análisis <span class="highlight">Prematch</span></div>
+    <div class="subtitle">
+      <span class="jornada">{{ traducirJornada(props.report.game.matchday_name) }}</span>
+      <span class="fecha"> - {{ formatDate(props.report.game.date_time_utc) }}</span>
+    </div>
+    <div class="teams-row">
+      <div class="team team-local">
+        <span class="escudo-svg">
+          <img
+            width="55px"
+            :src="
+              'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              props.report.game.home_team +
+              '.png'
+            "
+          />
+        </span>
+      </div>
+
+      <div class="divider-line">
+        <div class="dotted-line"></div>
+      </div>
+
+      <div class="team team-visitor">
+        <span class="escudo-svg">
+          <img
+            width="55px"
+            :src="
+              'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              props.report.game.visiting_team +
+              '.png'
+            "
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatDate } from '../../utils/dateUtils.js'
+
+function traducirJornada(jornada) {
+  if (!jornada) return ''
+  return jornada
+    .replace('Matchday', 'J')
+    .replace('de Final', '')
+    .replace('Playoffs 1', 'CFI')
+    .replace('Playoffs 2', 'CFV')
+    .replace('Playoffs 3', 'SI')
+    .replace('Playoffs 4', 'SV')
+    .replace('Playoffs 5', 'FI')
+    .replace('Playoffs 6', 'FV')
+}
+// Aquí puedes agregar props si quieres que los nombres de equipos y jornada sean dinámicos
+const props = defineProps({
+  report: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+</script>
+
+<style scoped>
+.prematch-bg {
+  width: 100%;
+  height: 222px;
+  /* height: 100vh; */
+  background: url('/images/background-postmatch-template-01.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.header {
+  padding: 24px 32px;
+}
+
+.logo {
+  height: 40px;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* Elimina el margin-top para centrar verticalmente */
+}
+
+.title {
+  font-size: 0.8rem;
+  color: #fff;
+  margin-top: -10px;
+  font-family: Poppins-Regular;
+}
+
+.highlight {
+  font-family: Poppins-Bold;
+  color: #fff;
+}
+
+.subtitle {
+  font-family: Poppins-Regular;
+  margin-top: -8px;
+  font-size: 1.1rem;
+  color: #e0e0e0;
+}
+
+.jornada {
+  font-family: Poppins-Medium;
+  color: #fff;
+  font-size: 0.4rem;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  opacity: 0.8;
+}
+
+.fecha {
+  font-family: Poppins-Regular;
+  color: #e0e0e0;
+  opacity: 0.8;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  font-size: 0.4rem;
+}
+
+.teams-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.team {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.divider-line {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+}
+
+.dotted-line {
+  width: 2px;
+  height: 60px;
+  background: repeating-linear-gradient(
+    to bottom,
+    #fff 0,
+    #fff 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  opacity: 0.5;
+}
+
+.escudo-svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 55px;
+  height: 55px;
+}
+</style>

package/src/components/thumbnails-reports/AnalisisPrematchType4.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="prematch-bg">
+    <div class="title">Análisis <span class="highlight">Prematch</span></div>
+    <div class="subtitle">
+      <span class="jornada">{{ traducirJornada(props.report.game.matchday_name) }}</span>
+      <span class="fecha"> - {{ formatDate(props.report.game.date_time_utc) }}</span>
+    </div>
+    <div class="teams-row">
+      <div class="team team-local">
+        <span class="escudo-svg">
+          <img
+            width="55px"
+            :src="
+              'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              props.report.game.home_team +
+              '.png'
+            "
+          />
+        </span>
+      </div>
+
+      <div class="divider-line">
+        <div class="dotted-line"></div>
+      </div>
+
+      <div class="team team-visitor">
+        <span class="escudo-svg">
+          <img
+            width="55px"
+            :src="
+              'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              props.report.game.visiting_team +
+              '.png'
+            "
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatDate } from '../../utils/dateUtils.js'
+
+function traducirJornada(jornada) {
+  if (!jornada) return ''
+  return jornada
+    .replace('Matchday', 'J')
+    .replace('de Final', '')
+    .replace('Playoffs 1', 'CFI')
+    .replace('Playoffs 2', 'CFV')
+    .replace('Playoffs 3', 'SI')
+    .replace('Playoffs 4', 'SV')
+    .replace('Playoffs 5', 'FI')
+    .replace('Playoffs 6', 'FV')
+}
+// Aquí puedes agregar props si quieres que los nombres de equipos y jornada sean dinámicos
+const props = defineProps({
+  report: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+</script>
+
+<style scoped>
+.prematch-bg {
+  width: 100%;
+  height: 222px;
+  /* height: 100vh; */
+  background: url('/images/background-postmatch-template-02.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.header {
+  padding: 24px 32px;
+}
+
+.logo {
+  height: 40px;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* Elimina el margin-top para centrar verticalmente */
+}
+
+.title {
+  font-size: 0.8rem;
+  color: #fff;
+  margin-top: -10px;
+  font-family: Poppins-Regular;
+}
+
+.highlight {
+  font-family: Poppins-Bold;
+  color: #fff;
+}
+
+.subtitle {
+  font-family: Poppins-Regular;
+  margin-top: -8px;
+  font-size: 1.1rem;
+  color: #e0e0e0;
+}
+
+.jornada {
+  font-family: Poppins-Medium;
+  color: #fff;
+  font-size: 0.4rem;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  opacity: 0.8;
+}
+
+.fecha {
+  font-family: Poppins-Regular;
+  color: #e0e0e0;
+  opacity: 0.8;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  font-size: 0.4rem;
+}
+
+.teams-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.team {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.divider-line {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+}
+
+.dotted-line {
+  width: 2px;
+  height: 60px;
+  background: repeating-linear-gradient(
+    to bottom,
+    #fff 0,
+    #fff 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  opacity: 0.5;
+}
+
+.escudo-svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 55px;
+  height: 55px;
+}
+</style>

package/src/index.js

@@ -0,0 +1,4 @@
+'use strict'
+import GSCReports from './components/gsc-reports.vue'
+
+export { GSCReports }

package/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/src/types.d.ts

@@ -0,0 +1,45 @@
+export interface Team {
+  logo: string
+  team_id: number
+  provisional_logo: string
+  colloquial_name: string
+  acronym: string
+  team_name: string
+}
+
+export interface GameMinutes {
+  home_goals_minutes: number[]
+  visiting_goals_minutes: number[]
+  home_yellow_cards_minutes: number[]
+  away_yellow_cards_minutes: number[]
+  home_red_cards_minutes: number[]
+  away_red_cards_minutes: number[]
+}
+
+export interface Game {
+  gameId: number
+  id: number
+  seasonId: number
+  regularSeasonId: number
+  matchday_name: string
+  status: number
+  score: number[]
+  game_status: number
+  dateTimeUTC: string
+  homeTeam: Team
+  awayTeam: Team
+  is_live: number
+  minutes: GameMinutes
+}
+
+export interface TeamSelected {
+  teamId: number
+}
+
+export interface FieldPosesionProps {
+  game: Game
+  widthSection: number
+  teamSelected: TeamSelected
+  areInactiveVisible?: boolean
+  showTitle?: boolean
+}

package/src/utils/dateUtils.js

@@ -0,0 +1,52 @@
+/**
+ * Convierte una fecha en formato ISO a formato legible
+ * @param {string} isoDate - Fecha en formato ISO (ej: "2025-07-11T16:30:00Z")
+ * @returns {string} - Fecha en formato "18 jun, 2025"
+ */
+export function formatDate(isoDate) {
+  if (!isoDate) return ''
+
+  const date = new Date(isoDate)
+
+  // Verificar si la fecha es válida
+  if (isNaN(date.getTime())) return ''
+
+  const day = date.getDate()
+  const month = date.toLocaleDateString('es-ES', { month: 'short' })
+  const year = date.getFullYear()
+
+  return `${day} ${month}, ${year}`
+}
+
+/**
+ * Convierte una fecha en formato ISO a formato de hora
+ * @param {string} isoDate - Fecha en formato ISO (ej: "2025-07-11T16:30:00Z")
+ * @returns {string} - Hora en formato "16:30"
+ */
+export function formatTime(isoDate) {
+  if (!isoDate) return ''
+
+  const date = new Date(isoDate)
+
+  // Verificar si la fecha es válida
+  if (isNaN(date.getTime())) return ''
+
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+
+  return `${hours}:${minutes}`
+}
+
+/**
+ * Convierte una fecha en formato ISO a formato completo con fecha y hora
+ * @param {string} isoDate - Fecha en formato ISO (ej: "2025-07-11T16:30:00Z")
+ * @returns {string} - Fecha y hora en formato "18 jun, 2025 - 16:30"
+ */
+export function formatDateTime(isoDate) {
+  if (!isoDate) return ''
+
+  const date = formatDate(isoDate)
+  const time = formatTime(isoDate)
+
+  return `${date} - ${time}`
+}