@golstats/gsc-reports 1.0.2 → 1.0.3

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

@@ -1,173 +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>
+<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('https://golstatsimages.blob.core.windows.net/reports-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

@@ -1,173 +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>
+<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('https://golstatsimages.blob.core.windows.net/reports-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>