@golstats/gsc-reports 1.0.52 → 1.0.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/README.md +2 -2
  2. package/dist/{FilterConditions-55d68355-C06ae5UH-CEA4TfvA-DSWBY7HO.js → FilterConditions-55d68355-zHMe0Dyg-CLarFrVK-C2M1z5WD.js} +10 -10
  3. package/dist/FilterField-59a73e38-DtNZKbqt-CX86CGMh-DPrMukyS.js +21 -0
  4. package/dist/{FilterSubcategories-a9b32cc9-Dfm_NNj7-9s2uLZyt-Cq2yOJ8R.js → FilterSubcategories-a9b32cc9-BjvvEE_X-Cb3jkvIi-CQ-9zRuN.js} +3 -3
  5. package/dist/css/fonts.css +83 -83
  6. package/dist/gsc-reports.css +1 -1
  7. package/dist/gsc-reports.es.js +1 -1
  8. package/dist/gsc-reports.umd.js +191 -191
  9. package/dist/{index-DfyEOv8s.js → index-B5MO1vo4.js} +48465 -48301
  10. package/package.json +3 -2
  11. package/src/components/TemplatesSection.vue +1 -0
  12. package/src/components/elementsTemplates/ModalDeleteReport.vue +246 -246
  13. package/src/components/elementsTemplates/ModalDeleteTemplate.vue +249 -249
  14. package/src/components/elementsTemplates/ModalGenerarReporte.vue +379 -27
  15. package/src/components/elementsTemplates/ModalRenameReporte.vue +330 -330
  16. package/src/components/elementsTemplates/ModalRenameTemplate.vue +337 -337
  17. package/src/components/elementsTemplates/ModalSoloEscritorio.vue +83 -83
  18. package/src/components/elementsTemplates/ModalduplicateTemplate.vue +300 -300
  19. package/src/components/elementsTemplates/TooltipReportOptions.vue +97 -97
  20. package/src/components/elementsTemplates/TooltipTemplateOptions.vue +168 -168
  21. package/src/components/filters.vue +935 -935
  22. package/src/components/template-report-maker/CoverPage.vue +636 -636
  23. package/src/components/template-report-maker/CoverSelector.vue +165 -165
  24. package/src/components/template-report-maker/ReportView.vue +66 -66
  25. package/src/components/template-report-maker/TemplateReportPage.vue +398 -398
  26. package/src/components/thumbnails-reports/AnalisisPostMatchType1.vue +741 -741
  27. package/src/components/thumbnails-reports/AnalisisPostMatchType2.vue +743 -743
  28. package/src/components/thumbnails-reports/AnalisisPostMatchType3.vue +441 -463
  29. package/src/components/thumbnails-reports/AnalisisPostMatchType4.vue +440 -462
  30. package/src/components/thumbnails-reports/AnalisisPrematchType1.vue +232 -164
  31. package/src/components/thumbnails-reports/AnalisisPrematchType2.vue +231 -163
  32. package/src/components/thumbnails-reports/AnalisisPrematchType3.vue +173 -173
  33. package/src/components/thumbnails-reports/AnalisisPrematchType4.vue +173 -173
  34. package/src/index.js +4 -4
  35. package/src/types.d.ts +45 -45
  36. package/src/utils/dateUtils.js +52 -52
  37. package/dist/FilterField-59a73e38-CwFxdon3-CZO9BXOb-Ck2Zy8SI.js +0 -21
  38. package/dist/images/cancha-horizontal.jpg +0 -0
package/src/components/template-report-maker/CoverPage.vue CHANGED
@@ -1,636 +1,636 @@
1
- <script setup>
2
-
3
- import { computed, onMounted, ref } from 'vue'
4
-
5
- const props = defineProps({
6
- game: {
7
- type: Object,
8
- default: () => null
9
- },
10
- coverId: {
11
- type: Number,
12
- default: 1
13
- },
14
- isPostMatch: {
15
- type: Boolean,
16
- default: true
17
- }
18
- })
19
-
20
- const emit = defineEmits(['intersection-changed'])
21
-
22
- const coverPage = ref(null)
23
-
24
- const isCoverTypeOne = computed(() => {
25
- return [1, 2].includes(props.coverId)
26
- })
27
-
28
- const isBackgroundImageTypeOne = computed(() => {
29
- console.log('coverId', props.coverId)
30
- return [1, 3].includes(props.coverId)
31
- })
32
-
33
- const teamsShieldColors = computed(() => {
34
- if (1 === props.coverId) {
35
- return {
36
- homeTeam: '#1558CC',
37
- awayTeam: '#0046BF',
38
- opacity: 1
39
- }
40
- } else if (3 === props.coverId) {
41
- return {
42
- homeTeam: '#000A1A',
43
- awayTeam: '#000A1A',
44
- opacity: 0.4
45
- }
46
- }
47
- return {
48
- homeTeam: '#576883',
49
- awayTeam: '#576883',
50
- opacity: 0.4
51
- }
52
- })
53
-
54
- const score = computed(() => {
55
- if (props.game && props.game.score) {
56
- return props.game.score
57
- }
58
- return ['0', '0']
59
- })
60
-
61
- const teamsData = computed(() => {
62
- if (props.game && props.game.teams) {
63
- // todo return game teams values
64
- return props.game.teams
65
- }
66
- return {
67
- homeTeam: {
68
- name: 'LOC',
69
- logo: null
70
- },
71
- awayTeam: {
72
- name: 'VIS',
73
- logo: null
74
- }
75
- }
76
- })
77
-
78
- const style = computed(() => {
79
- return {
80
- '--background-image': isBackgroundImageTypeOne.value
81
- ? 'url(/reports/background-postmatch-template-01@2x.jpg)'
82
- : 'url(/reports/background-postmatch-template-02@2x.jpg)',
83
- '--grid-template-columns-type-one': props.isPostMatch
84
- ? '1fr min-content 1fr'
85
- : '320px min-content 320px',
86
- '--width-type-one': props.isPostMatch
87
- ? '100%'
88
- : 'fit-content',
89
- '--grid-template-columns-type-two': props.isPostMatch
90
- ? '1fr min-content 1fr'
91
- : '320px min-content 320px',
92
- '--width-type-two': props.isPostMatch
93
- ? '100%'
94
- : 'fit-content'
95
- }
96
- })
97
-
98
- const analysisType = computed(() => {
99
- return props.isPostMatch ? 'Postmatch' : 'Prematch'
100
- })
101
-
102
- const gameDate = computed(() => {
103
- if (props.game) {
104
- return ''
105
- }
106
- return 'Jornada - Día 00 Mes'
107
- })
108
-
109
-
110
- const callback = (entries) => {
111
- entries.forEach(entry => {
112
-
113
- emit('intersection-changed', entry.isIntersecting)
114
- /*if (entry.isIntersecting) {
115
- console.log('Element is in the viewport!');
116
- emit('intersection-changed', true)
117
- // Perform actions when the element is visible
118
- } else {
119
- console.log('Element is out of the viewport!');
120
- // Perform actions when the element is not visible
121
- emit('intersection-changed', entry.isIntersecting && entry.isVisible)
122
- }*/
123
- })
124
- }
125
-
126
-
127
- let observer = null
128
-
129
- function setUpIntersectionObserver() {
130
- const options = {
131
- root: null, // Use the viewport as the root
132
- rootMargin: '0px', // Margin around the root
133
- threshold: 0.7 // Trigger when 50% of the element is visible
134
- }
135
-
136
- observer = new IntersectionObserver(callback, options)
137
-
138
- // Step 3: Select the target element and start observing
139
- const target = coverPage.value
140
- if (target) {
141
- observer.observe(target)
142
- }
143
- }
144
-
145
- onMounted(() => {
146
- setUpIntersectionObserver()
147
- })
148
- </script>
149
-
150
- <template>
151
- <div ref="coverPage" class="cover" :style="style">
152
- <div class="cover__title-subtitle">
153
- <div class="cover__title-subtitle__title">
154
- <div>Análisis</div>
155
- <div>{{ analysisType }}</div>
156
- </div>
157
- <div class="cover__title-subtitle__subtitle">
158
- {{ gameDate }}
159
- </div>
160
- </div>
161
- <div v-if="isCoverTypeOne" class="cover-type-one">
162
- <div class="team-info-one">
163
- <div class="team-data">
164
- <div v-if="teamsData.homeTeam.logo" class="team-logo">
165
- <img :src="game?.team1?.logo || '/default-logo.png'" alt="Team 1 Logo" />
166
- </div>
167
- <svg v-else width="160" height="161" viewBox="0 0 160 161" fill="none"
168
- xmlns="http://www.w3.org/2000/svg">
169
- <path
170
- d="M80.0068 0.953125C80.0068 0.953125 91.0143 12.208 118.141 12.9913C140.898 13.6509 149.102 7.87917 149.102 7.87917C149.102 7.87917 169.839 67.5339 135.786 117.212C117.894 143.308 83.5935 160.211 79.9656 160.953C76.3789 160.211 42.0372 143.308 24.1449 117.212C-9.8257 67.5339 10.9112 7.87917 10.9112 7.87917C10.9112 7.87917 19.1153 13.6509 41.8723 12.9913C68.9993 12.208 80.0068 0.953125 80.0068 0.953125Z"
171
- :fill="teamsShieldColors.homeTeam"
172
- :opacity="teamsShieldColors.opacity"
173
- />
174
- </svg>
175
- <div class="team-name">{{ teamsData.homeTeam.name }}</div>
176
- </div>
177
- <div v-if="isPostMatch" class="team-events">
178
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
179
- xmlns="http://www.w3.org/2000/svg">
180
- <path fill-rule="evenodd" clip-rule="evenodd"
181
- d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
182
- stroke="white" stroke-width="1.36665" stroke-linecap="round"
183
- stroke-linejoin="round" />
184
- <path fill-rule="evenodd" clip-rule="evenodd"
185
- d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
186
- stroke="white" stroke-width="1.36665" stroke-linecap="round"
187
- stroke-linejoin="round" />
188
- <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
189
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
190
- <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
191
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
192
- <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
193
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
194
- <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
195
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
196
- <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
197
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
198
- <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
199
- stroke-linecap="round" stroke-linejoin="round" />
200
- <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
201
- stroke-linecap="round" stroke-linejoin="round" />
202
- <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
203
- stroke-linecap="round" stroke-linejoin="round" />
204
- <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
205
- stroke-linecap="round" stroke-linejoin="round" />
206
- <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
207
- stroke-linecap="round" stroke-linejoin="round" />
208
- </svg>
209
- <div>00'</div>
210
- <div class="separator"></div>
211
- <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
212
- xmlns="http://www.w3.org/2000/svg">
213
- <rect x="0.367188" y="0.09375" width="9.14286" height="13.7143" rx="2.28571"
214
- fill="#F7C330" />
215
- </svg>
216
- <div>0</div>
217
- <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
218
- xmlns="http://www.w3.org/2000/svg">
219
- <rect x="0.109375" y="0.09375" width="9.14286" height="13.7143" rx="1.82857"
220
- fill="#FF0000" />
221
- </svg>
222
- <div>0</div>
223
- </div>
224
- </div>
225
- <div class="score-one">
226
- <div v-if="isPostMatch">
227
- {{ score[0] }} : {{ score[1] }}
228
- </div>
229
- </div>
230
- <div class="team-info-one">
231
- <div class="team-data">
232
- <div v-if="teamsData.awayTeam.logo" class="team-logo">
233
- <img :src="game?.team2?.logo || '/default-logo.png'" alt="Team 2 Logo" />
234
- </div>
235
- <svg v-else width="161" height="161" viewBox="0 0 161 161" fill="none"
236
- xmlns="http://www.w3.org/2000/svg">
237
- <path
238
- d="M80.8504 0.953125C80.8504 0.953125 92.9822 3.39499 119.261 10.1779C144.106 16.5733 152.827 19.1314 152.827 19.1314C152.827 19.1314 156.936 44.2089 145.657 90.5655C136.548 127.969 106.742 152.038 80.8504 160.953C54.9977 152.038 25.1527 128.007 16.0442 90.5655C4.8039 44.2477 8.91243 19.1314 8.91243 19.1314C8.91243 19.1314 17.6334 16.5733 42.4783 10.1779C68.7574 3.39499 80.8504 0.953125 80.8504 0.953125Z"
239
- :fill="teamsShieldColors.awayTeam"
240
- :opacity="teamsShieldColors.opacity"
241
- />
242
- </svg>
243
- <div class="team-name">{{ teamsData.awayTeam.name }}</div>
244
- </div>
245
- <div v-if="isPostMatch" class="team-events">
246
- <div>0</div>
247
- <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
248
- xmlns="http://www.w3.org/2000/svg">
249
- <rect x="0.367188" y="0.09375" width="9.14286" height="13.7143" rx="2.28571"
250
- fill="#F7C330" />
251
- </svg>
252
- <div>0</div>
253
- <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
254
- xmlns="http://www.w3.org/2000/svg">
255
- <rect x="0.109375" y="0.09375" width="9.14286" height="13.7143" rx="1.82857"
256
- fill="#FF0000" />
257
- </svg>
258
- <div class="separator"></div>
259
- <div>00'</div>
260
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
261
- xmlns="http://www.w3.org/2000/svg">
262
- <path fill-rule="evenodd" clip-rule="evenodd"
263
- d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
264
- stroke="white" stroke-width="1.36665" stroke-linecap="round"
265
- stroke-linejoin="round" />
266
- <path fill-rule="evenodd" clip-rule="evenodd"
267
- d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
268
- stroke="white" stroke-width="1.36665" stroke-linecap="round"
269
- stroke-linejoin="round" />
270
- <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
271
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
272
- <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
273
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
274
- <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
275
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
276
- <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
277
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
278
- <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
279
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
280
- <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
281
- stroke-linecap="round" stroke-linejoin="round" />
282
- <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
283
- stroke-linecap="round" stroke-linejoin="round" />
284
- <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
285
- stroke-linecap="round" stroke-linejoin="round" />
286
- <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
287
- stroke-linecap="round" stroke-linejoin="round" />
288
- <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
289
- stroke-linecap="round" stroke-linejoin="round" />
290
- </svg>
291
- </div>
292
- </div>
293
- </div>
294
- <div v-else class="cover-type-two">
295
- <div class="team-data">
296
- <div class="team-info">
297
- <div v-if="teamsData.homeTeam.logo" class="team-logo">
298
- <img :src="game?.team1?.logo || '/default-logo.png'" alt="Team 1 Logo" />
299
- </div>
300
- <svg v-else width="160" height="161" viewBox="0 0 160 161" fill="none"
301
- xmlns="http://www.w3.org/2000/svg">
302
- <path
303
- d="M80.0068 0.953125C80.0068 0.953125 91.0143 12.208 118.141 12.9913C140.898 13.6509 149.102 7.87917 149.102 7.87917C149.102 7.87917 169.839 67.5339 135.786 117.212C117.894 143.308 83.5935 160.211 79.9656 160.953C76.3789 160.211 42.0372 143.308 24.1449 117.212C-9.8257 67.5339 10.9112 7.87917 10.9112 7.87917C10.9112 7.87917 19.1153 13.6509 41.8723 12.9913C68.9993 12.208 80.0068 0.953125 80.0068 0.953125Z"
304
- :fill="teamsShieldColors.homeTeam"
305
- :opacity="teamsShieldColors.opacity"
306
- />
307
- </svg>
308
- <div v-if="isPostMatch" class="team-score-two">{{ score[0] }}</div>
309
- </div>
310
- <div v-if="isPostMatch" class="team-goals">
311
- <div class="goal">
312
- <div>
313
- Nombre
314
- </div>
315
- <div class="bullet"></div>
316
- <div>
317
- 00'
318
- </div>
319
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
320
- xmlns="http://www.w3.org/2000/svg">
321
- <path fill-rule="evenodd" clip-rule="evenodd"
322
- d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
323
- stroke="white" stroke-width="1.36665" stroke-linecap="round"
324
- stroke-linejoin="round" />
325
- <path fill-rule="evenodd" clip-rule="evenodd"
326
- d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
327
- stroke="white" stroke-width="1.36665" stroke-linecap="round"
328
- stroke-linejoin="round" />
329
- <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
330
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
331
- <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
332
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
333
- <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
334
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
335
- <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
336
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
337
- <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
338
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
339
- <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
340
- stroke-linecap="round" stroke-linejoin="round" />
341
- <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
342
- stroke-linecap="round" stroke-linejoin="round" />
343
- <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
344
- stroke-linecap="round" stroke-linejoin="round" />
345
- <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
346
- stroke-linecap="round" stroke-linejoin="round" />
347
- <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
348
- stroke-linecap="round" stroke-linejoin="round" />
349
- </svg>
350
- </div>
351
- </div>
352
- </div>
353
- <div class="separator"></div>
354
- <div class="team-data">
355
- <div class="team-info">
356
- <div v-if="isPostMatch" class="team-score-two">{{ score[1] }}</div>
357
- <div v-if="teamsData.awayTeam.logo" class="team-logo">
358
- <img :src="game?.team2?.logo || '/default-logo.png'" alt="Team 2 Logo" />
359
- </div>
360
- <svg v-else width="161" height="161" viewBox="0 0 161 161" fill="none"
361
- xmlns="http://www.w3.org/2000/svg">
362
- <path
363
- d="M80.8504 0.953125C80.8504 0.953125 92.9822 3.39499 119.261 10.1779C144.106 16.5733 152.827 19.1314 152.827 19.1314C152.827 19.1314 156.936 44.2089 145.657 90.5655C136.548 127.969 106.742 152.038 80.8504 160.953C54.9977 152.038 25.1527 128.007 16.0442 90.5655C4.8039 44.2477 8.91243 19.1314 8.91243 19.1314C8.91243 19.1314 17.6334 16.5733 42.4783 10.1779C68.7574 3.39499 80.8504 0.953125 80.8504 0.953125Z"
364
- :fill="teamsShieldColors.awayTeam"
365
- :opacity="teamsShieldColors.opacity"
366
- />
367
- </svg>
368
- </div>
369
- <div v-if="isPostMatch" class="team-goals">
370
- <div class="goal">
371
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
372
- xmlns="http://www.w3.org/2000/svg">
373
- <path fill-rule="evenodd" clip-rule="evenodd"
374
- d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
375
- stroke="white" stroke-width="1.36665" stroke-linecap="round"
376
- stroke-linejoin="round" />
377
- <path fill-rule="evenodd" clip-rule="evenodd"
378
- d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
379
- stroke="white" stroke-width="1.36665" stroke-linecap="round"
380
- stroke-linejoin="round" />
381
- <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
382
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
383
- <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
384
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
385
- <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
386
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
387
- <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
388
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
389
- <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
390
- stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
391
- <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
392
- stroke-linecap="round" stroke-linejoin="round" />
393
- <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
394
- stroke-linecap="round" stroke-linejoin="round" />
395
- <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
396
- stroke-linecap="round" stroke-linejoin="round" />
397
- <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
398
- stroke-linecap="round" stroke-linejoin="round" />
399
- <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
400
- stroke-linecap="round" stroke-linejoin="round" />
401
- </svg>
402
- <div>
403
- 00'
404
- </div>
405
- <div class="bullet"></div>
406
- <div>
407
- Nombre
408
- </div>
409
- </div>
410
- </div>
411
- </div>
412
- </div>
413
- </div>
414
- </template>
415
-
416
- <style scoped lang="scss">
417
- .cover {
418
- background-image: var(--background-image);
419
- background-repeat: no-repeat;
420
- background-size: cover;
421
- width: 998px;
422
- height: 776px;
423
- display: flex;
424
- flex-direction: column;
425
- align-items: center;
426
- justify-content: flex-start;
427
- position: relative;
428
-
429
- &__title-subtitle {
430
- position: absolute;
431
- top: 198px;
432
- display: flex;
433
- flex-direction: column;
434
- align-items: center;
435
- gap: 24px;
436
-
437
- &__title {
438
- display: flex;
439
- gap: 12px;
440
- font-size: 42px;
441
- font-stretch: normal;
442
- font-style: normal;
443
- line-height: 0.73;
444
- letter-spacing: normal;
445
- text-align: center;
446
- color: #fff;
447
-
448
- & > div:first-child {
449
- font-family: Poppins-Regular, sans-serif;
450
- }
451
-
452
- & > div:last-child {
453
- font-family: Poppins-Bold, sans-serif;
454
- }
455
- }
456
-
457
- &__subtitle {
458
- font-family: Poppins-Regular, sans-serif;
459
- font-size: 20px;
460
- font-weight: normal;
461
- font-stretch: normal;
462
- font-style: normal;
463
- line-height: 2.2;
464
- letter-spacing: 0.2px;
465
- text-align: center;
466
- color: #fff;
467
- }
468
- }
469
-
470
- &__subtitle {
471
- opacity: 0.8;
472
- font-family: Poppins-Regular, sans-serif;
473
- font-size: 20px;
474
- font-weight: normal;
475
- font-stretch: normal;
476
- font-style: normal;
477
- line-height: 2.2;
478
- letter-spacing: 0.2px;
479
- text-align: center;
480
- }
481
- }
482
-
483
- .cover-type-one {
484
- width: var(--width-type-one);
485
- max-width: 883px;
486
- position: absolute;
487
- top: 330px;
488
- display: grid;
489
- grid-template-columns: var(--grid-template-columns-type-one);
490
-
491
- & > .team-info-one {
492
- display: flex;
493
- flex-direction: column;
494
- align-items: flex-start;
495
- gap: 24px;
496
-
497
- & > .team-data {
498
- display: flex;
499
- justify-content: flex-start;
500
- align-items: center;
501
- gap: 20px;
502
-
503
- & .team-name {
504
- font-family: Poppins-Bold, sans-serif;
505
- font-size: 42px;
506
- font-weight: bold;
507
- font-stretch: normal;
508
- font-style: normal;
509
- line-height: 0.73;
510
- letter-spacing: normal;
511
- text-align: right;
512
- color: #fff;
513
- }
514
- }
515
-
516
- & > .team-events {
517
- padding: 6.9px 14.9px;
518
- border-radius: 4.6px;
519
- background-color: rgba(21, 34, 46, 0.24);
520
- display: flex;
521
- justify-content: center;
522
- align-items: center;
523
- gap: 8px;
524
-
525
- font-family: Poppins-Medium, sans-serif;
526
- font-size: 17.9px;
527
- font-weight: normal;
528
- font-stretch: normal;
529
- font-style: normal;
530
- line-height: 1.81;
531
- letter-spacing: -0.18px;
532
- text-align: left;
533
- color: rgba(255, 255, 255, 0.7);
534
-
535
- & .separator {
536
- width: 1px;
537
- height: 16px;
538
- border-right: 1px dotted #fff;
539
- margin: 0 8px;
540
- }
541
- }
542
-
543
- &:Last-child {
544
- align-items: flex-end;
545
-
546
- & > .team-data {
547
- flex-direction: row-reverse;
548
- }
549
- }
550
- }
551
- }
552
-
553
- .score-one {
554
- white-space: nowrap;
555
- text-shadow: 0 4.5px 4.5px rgba(0, 0, 0, 0.25);
556
- font-family: BebasNeue, Poppins-Bold, sans-serif;
557
- font-size: 160px;
558
- font-weight: bold;
559
- font-stretch: normal;
560
- font-style: normal;
561
- //line-height: 0.31;
562
- letter-spacing: normal;
563
- text-align: center;
564
- color: #fff;
565
- }
566
-
567
- .cover-type-two {
568
- width: 100%;
569
- position: absolute;
570
- top: 330px;
571
- display: grid;
572
- grid-template-columns: 1fr min-content 1fr;
573
-
574
- & > .team-data {
575
- display: flex;
576
- flex-direction: column;
577
- align-items: flex-start;
578
-
579
- & > .team-info {
580
- display: flex;
581
- align-items: center;
582
-
583
- & > .team-score-two {
584
- text-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
585
- font-family: BebasNeue, Poppins-Bold, sans-serif;
586
- font-size: 259.1px;
587
- font-weight: bold;
588
- font-stretch: normal;
589
- font-style: normal;
590
- line-height: 0.21;
591
- letter-spacing: normal;
592
- text-align: center;
593
- color: #fff;
594
- }
595
- }
596
-
597
- & > .team-goals {
598
- margin-top: 46px;
599
-
600
- & > .goal {
601
- display: flex;
602
- align-items: center;
603
- gap: 7px;
604
-
605
- font-family: Poppins-Medium, sans-serif;
606
- font-size: 17.9px;
607
- font-weight: normal;
608
- font-stretch: normal;
609
- font-style: normal;
610
- line-height: 1.81;
611
- letter-spacing: -0.18px;
612
- text-align: left;
613
- color: rgba(255, 255, 255, 0.7);
614
-
615
- & > .bullet {
616
- width: 3px;
617
- height: 3px;
618
- border-radius: 50%;
619
- background-color: rgba(255, 255, 255, 0.7);
620
- }
621
- }
622
- }
623
-
624
- &:first-child {
625
- justify-self: flex-end;
626
- align-items: flex-end;
627
- }
628
- }
629
-
630
- & > .separator {
631
- height: 161px;
632
- border-right: 1px dotted #fff;
633
- margin: 0 71px;
634
- }
635
- }
636
- </style>
1
+ <script setup>
2
+
3
+ import { computed, onMounted, ref } from 'vue'
4
+
5
+ const props = defineProps({
6
+ game: {
7
+ type: Object,
8
+ default: () => null
9
+ },
10
+ coverId: {
11
+ type: Number,
12
+ default: 1
13
+ },
14
+ isPostMatch: {
15
+ type: Boolean,
16
+ default: true
17
+ }
18
+ })
19
+
20
+ const emit = defineEmits(['intersection-changed'])
21
+
22
+ const coverPage = ref(null)
23
+
24
+ const isCoverTypeOne = computed(() => {
25
+ return [1, 2].includes(props.coverId)
26
+ })
27
+
28
+ const isBackgroundImageTypeOne = computed(() => {
29
+ console.log('coverId', props.coverId)
30
+ return [1, 3].includes(props.coverId)
31
+ })
32
+
33
+ const teamsShieldColors = computed(() => {
34
+ if (1 === props.coverId) {
35
+ return {
36
+ homeTeam: '#1558CC',
37
+ awayTeam: '#0046BF',
38
+ opacity: 1
39
+ }
40
+ } else if (3 === props.coverId) {
41
+ return {
42
+ homeTeam: '#000A1A',
43
+ awayTeam: '#000A1A',
44
+ opacity: 0.4
45
+ }
46
+ }
47
+ return {
48
+ homeTeam: '#576883',
49
+ awayTeam: '#576883',
50
+ opacity: 0.4
51
+ }
52
+ })
53
+
54
+ const score = computed(() => {
55
+ if (props.game && props.game.score) {
56
+ return props.game.score
57
+ }
58
+ return ['0', '0']
59
+ })
60
+
61
+ const teamsData = computed(() => {
62
+ if (props.game && props.game.teams) {
63
+ // todo return game teams values
64
+ return props.game.teams
65
+ }
66
+ return {
67
+ homeTeam: {
68
+ name: 'LOC',
69
+ logo: null
70
+ },
71
+ awayTeam: {
72
+ name: 'VIS',
73
+ logo: null
74
+ }
75
+ }
76
+ })
77
+
78
+ const style = computed(() => {
79
+ return {
80
+ '--background-image': isBackgroundImageTypeOne.value
81
+ ? 'url(/reports/background-postmatch-template-01@2x.jpg)'
82
+ : 'url(/reports/background-postmatch-template-02@2x.jpg)',
83
+ '--grid-template-columns-type-one': props.isPostMatch
84
+ ? '1fr min-content 1fr'
85
+ : '320px min-content 320px',
86
+ '--width-type-one': props.isPostMatch
87
+ ? '100%'
88
+ : 'fit-content',
89
+ '--grid-template-columns-type-two': props.isPostMatch
90
+ ? '1fr min-content 1fr'
91
+ : '320px min-content 320px',
92
+ '--width-type-two': props.isPostMatch
93
+ ? '100%'
94
+ : 'fit-content'
95
+ }
96
+ })
97
+
98
+ const analysisType = computed(() => {
99
+ return props.isPostMatch ? 'Postmatch' : 'Prematch'
100
+ })
101
+
102
+ const gameDate = computed(() => {
103
+ if (props.game) {
104
+ return ''
105
+ }
106
+ return 'Jornada - Día 00 Mes'
107
+ })
108
+
109
+
110
+ const callback = (entries) => {
111
+ entries.forEach(entry => {
112
+
113
+ emit('intersection-changed', entry.isIntersecting)
114
+ /*if (entry.isIntersecting) {
115
+ console.log('Element is in the viewport!');
116
+ emit('intersection-changed', true)
117
+ // Perform actions when the element is visible
118
+ } else {
119
+ console.log('Element is out of the viewport!');
120
+ // Perform actions when the element is not visible
121
+ emit('intersection-changed', entry.isIntersecting && entry.isVisible)
122
+ }*/
123
+ })
124
+ }
125
+
126
+
127
+ let observer = null
128
+
129
+ function setUpIntersectionObserver() {
130
+ const options = {
131
+ root: null, // Use the viewport as the root
132
+ rootMargin: '0px', // Margin around the root
133
+ threshold: 0.7 // Trigger when 50% of the element is visible
134
+ }
135
+
136
+ observer = new IntersectionObserver(callback, options)
137
+
138
+ // Step 3: Select the target element and start observing
139
+ const target = coverPage.value
140
+ if (target) {
141
+ observer.observe(target)
142
+ }
143
+ }
144
+
145
+ onMounted(() => {
146
+ setUpIntersectionObserver()
147
+ })
148
+ </script>
149
+
150
+ <template>
151
+ <div ref="coverPage" class="cover" :style="style">
152
+ <div class="cover__title-subtitle">
153
+ <div class="cover__title-subtitle__title">
154
+ <div>Análisis</div>
155
+ <div>{{ analysisType }}</div>
156
+ </div>
157
+ <div class="cover__title-subtitle__subtitle">
158
+ {{ gameDate }}
159
+ </div>
160
+ </div>
161
+ <div v-if="isCoverTypeOne" class="cover-type-one">
162
+ <div class="team-info-one">
163
+ <div class="team-data">
164
+ <div v-if="teamsData.homeTeam.logo" class="team-logo">
165
+ <img :src="game?.team1?.logo || '/default-logo.png'" alt="Team 1 Logo" />
166
+ </div>
167
+ <svg v-else width="160" height="161" viewBox="0 0 160 161" fill="none"
168
+ xmlns="http://www.w3.org/2000/svg">
169
+ <path
170
+ d="M80.0068 0.953125C80.0068 0.953125 91.0143 12.208 118.141 12.9913C140.898 13.6509 149.102 7.87917 149.102 7.87917C149.102 7.87917 169.839 67.5339 135.786 117.212C117.894 143.308 83.5935 160.211 79.9656 160.953C76.3789 160.211 42.0372 143.308 24.1449 117.212C-9.8257 67.5339 10.9112 7.87917 10.9112 7.87917C10.9112 7.87917 19.1153 13.6509 41.8723 12.9913C68.9993 12.208 80.0068 0.953125 80.0068 0.953125Z"
171
+ :fill="teamsShieldColors.homeTeam"
172
+ :opacity="teamsShieldColors.opacity"
173
+ />
174
+ </svg>
175
+ <div class="team-name">{{ teamsData.homeTeam.name }}</div>
176
+ </div>
177
+ <div v-if="isPostMatch" class="team-events">
178
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
179
+ xmlns="http://www.w3.org/2000/svg">
180
+ <path fill-rule="evenodd" clip-rule="evenodd"
181
+ d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
182
+ stroke="white" stroke-width="1.36665" stroke-linecap="round"
183
+ stroke-linejoin="round" />
184
+ <path fill-rule="evenodd" clip-rule="evenodd"
185
+ d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
186
+ stroke="white" stroke-width="1.36665" stroke-linecap="round"
187
+ stroke-linejoin="round" />
188
+ <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
189
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
190
+ <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
191
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
192
+ <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
193
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
194
+ <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
195
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
196
+ <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
197
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
198
+ <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
199
+ stroke-linecap="round" stroke-linejoin="round" />
200
+ <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
201
+ stroke-linecap="round" stroke-linejoin="round" />
202
+ <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
203
+ stroke-linecap="round" stroke-linejoin="round" />
204
+ <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
205
+ stroke-linecap="round" stroke-linejoin="round" />
206
+ <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
207
+ stroke-linecap="round" stroke-linejoin="round" />
208
+ </svg>
209
+ <div>00'</div>
210
+ <div class="separator"></div>
211
+ <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
212
+ xmlns="http://www.w3.org/2000/svg">
213
+ <rect x="0.367188" y="0.09375" width="9.14286" height="13.7143" rx="2.28571"
214
+ fill="#F7C330" />
215
+ </svg>
216
+ <div>0</div>
217
+ <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
218
+ xmlns="http://www.w3.org/2000/svg">
219
+ <rect x="0.109375" y="0.09375" width="9.14286" height="13.7143" rx="1.82857"
220
+ fill="#FF0000" />
221
+ </svg>
222
+ <div>0</div>
223
+ </div>
224
+ </div>
225
+ <div class="score-one">
226
+ <div v-if="isPostMatch">
227
+ {{ score[0] }} : {{ score[1] }}
228
+ </div>
229
+ </div>
230
+ <div class="team-info-one">
231
+ <div class="team-data">
232
+ <div v-if="teamsData.awayTeam.logo" class="team-logo">
233
+ <img :src="game?.team2?.logo || '/default-logo.png'" alt="Team 2 Logo" />
234
+ </div>
235
+ <svg v-else width="161" height="161" viewBox="0 0 161 161" fill="none"
236
+ xmlns="http://www.w3.org/2000/svg">
237
+ <path
238
+ d="M80.8504 0.953125C80.8504 0.953125 92.9822 3.39499 119.261 10.1779C144.106 16.5733 152.827 19.1314 152.827 19.1314C152.827 19.1314 156.936 44.2089 145.657 90.5655C136.548 127.969 106.742 152.038 80.8504 160.953C54.9977 152.038 25.1527 128.007 16.0442 90.5655C4.8039 44.2477 8.91243 19.1314 8.91243 19.1314C8.91243 19.1314 17.6334 16.5733 42.4783 10.1779C68.7574 3.39499 80.8504 0.953125 80.8504 0.953125Z"
239
+ :fill="teamsShieldColors.awayTeam"
240
+ :opacity="teamsShieldColors.opacity"
241
+ />
242
+ </svg>
243
+ <div class="team-name">{{ teamsData.awayTeam.name }}</div>
244
+ </div>
245
+ <div v-if="isPostMatch" class="team-events">
246
+ <div>0</div>
247
+ <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
248
+ xmlns="http://www.w3.org/2000/svg">
249
+ <rect x="0.367188" y="0.09375" width="9.14286" height="13.7143" rx="2.28571"
250
+ fill="#F7C330" />
251
+ </svg>
252
+ <div>0</div>
253
+ <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
254
+ xmlns="http://www.w3.org/2000/svg">
255
+ <rect x="0.109375" y="0.09375" width="9.14286" height="13.7143" rx="1.82857"
256
+ fill="#FF0000" />
257
+ </svg>
258
+ <div class="separator"></div>
259
+ <div>00'</div>
260
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
261
+ xmlns="http://www.w3.org/2000/svg">
262
+ <path fill-rule="evenodd" clip-rule="evenodd"
263
+ d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
264
+ stroke="white" stroke-width="1.36665" stroke-linecap="round"
265
+ stroke-linejoin="round" />
266
+ <path fill-rule="evenodd" clip-rule="evenodd"
267
+ d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
268
+ stroke="white" stroke-width="1.36665" stroke-linecap="round"
269
+ stroke-linejoin="round" />
270
+ <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
271
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
272
+ <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
273
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
274
+ <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
275
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
276
+ <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
277
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
278
+ <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
279
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
280
+ <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
281
+ stroke-linecap="round" stroke-linejoin="round" />
282
+ <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
283
+ stroke-linecap="round" stroke-linejoin="round" />
284
+ <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
285
+ stroke-linecap="round" stroke-linejoin="round" />
286
+ <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
287
+ stroke-linecap="round" stroke-linejoin="round" />
288
+ <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
289
+ stroke-linecap="round" stroke-linejoin="round" />
290
+ </svg>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ <div v-else class="cover-type-two">
295
+ <div class="team-data">
296
+ <div class="team-info">
297
+ <div v-if="teamsData.homeTeam.logo" class="team-logo">
298
+ <img :src="game?.team1?.logo || '/default-logo.png'" alt="Team 1 Logo" />
299
+ </div>
300
+ <svg v-else width="160" height="161" viewBox="0 0 160 161" fill="none"
301
+ xmlns="http://www.w3.org/2000/svg">
302
+ <path
303
+ d="M80.0068 0.953125C80.0068 0.953125 91.0143 12.208 118.141 12.9913C140.898 13.6509 149.102 7.87917 149.102 7.87917C149.102 7.87917 169.839 67.5339 135.786 117.212C117.894 143.308 83.5935 160.211 79.9656 160.953C76.3789 160.211 42.0372 143.308 24.1449 117.212C-9.8257 67.5339 10.9112 7.87917 10.9112 7.87917C10.9112 7.87917 19.1153 13.6509 41.8723 12.9913C68.9993 12.208 80.0068 0.953125 80.0068 0.953125Z"
304
+ :fill="teamsShieldColors.homeTeam"
305
+ :opacity="teamsShieldColors.opacity"
306
+ />
307
+ </svg>
308
+ <div v-if="isPostMatch" class="team-score-two">{{ score[0] }}</div>
309
+ </div>
310
+ <div v-if="isPostMatch" class="team-goals">
311
+ <div class="goal">
312
+ <div>
313
+ Nombre
314
+ </div>
315
+ <div class="bullet"></div>
316
+ <div>
317
+ 00'
318
+ </div>
319
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
320
+ xmlns="http://www.w3.org/2000/svg">
321
+ <path fill-rule="evenodd" clip-rule="evenodd"
322
+ d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
323
+ stroke="white" stroke-width="1.36665" stroke-linecap="round"
324
+ stroke-linejoin="round" />
325
+ <path fill-rule="evenodd" clip-rule="evenodd"
326
+ d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
327
+ stroke="white" stroke-width="1.36665" stroke-linecap="round"
328
+ stroke-linejoin="round" />
329
+ <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
330
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
331
+ <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
332
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
333
+ <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
334
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
335
+ <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
336
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
337
+ <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
338
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
339
+ <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
340
+ stroke-linecap="round" stroke-linejoin="round" />
341
+ <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
342
+ stroke-linecap="round" stroke-linejoin="round" />
343
+ <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
344
+ stroke-linecap="round" stroke-linejoin="round" />
345
+ <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
346
+ stroke-linecap="round" stroke-linejoin="round" />
347
+ <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
348
+ stroke-linecap="round" stroke-linejoin="round" />
349
+ </svg>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ <div class="separator"></div>
354
+ <div class="team-data">
355
+ <div class="team-info">
356
+ <div v-if="isPostMatch" class="team-score-two">{{ score[1] }}</div>
357
+ <div v-if="teamsData.awayTeam.logo" class="team-logo">
358
+ <img :src="game?.team2?.logo || '/default-logo.png'" alt="Team 2 Logo" />
359
+ </div>
360
+ <svg v-else width="161" height="161" viewBox="0 0 161 161" fill="none"
361
+ xmlns="http://www.w3.org/2000/svg">
362
+ <path
363
+ d="M80.8504 0.953125C80.8504 0.953125 92.9822 3.39499 119.261 10.1779C144.106 16.5733 152.827 19.1314 152.827 19.1314C152.827 19.1314 156.936 44.2089 145.657 90.5655C136.548 127.969 106.742 152.038 80.8504 160.953C54.9977 152.038 25.1527 128.007 16.0442 90.5655C4.8039 44.2477 8.91243 19.1314 8.91243 19.1314C8.91243 19.1314 17.6334 16.5733 42.4783 10.1779C68.7574 3.39499 80.8504 0.953125 80.8504 0.953125Z"
364
+ :fill="teamsShieldColors.awayTeam"
365
+ :opacity="teamsShieldColors.opacity"
366
+ />
367
+ </svg>
368
+ </div>
369
+ <div v-if="isPostMatch" class="team-goals">
370
+ <div class="goal">
371
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
372
+ xmlns="http://www.w3.org/2000/svg">
373
+ <path fill-rule="evenodd" clip-rule="evenodd"
374
+ d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
375
+ stroke="white" stroke-width="1.36665" stroke-linecap="round"
376
+ stroke-linejoin="round" />
377
+ <path fill-rule="evenodd" clip-rule="evenodd"
378
+ d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
379
+ stroke="white" stroke-width="1.36665" stroke-linecap="round"
380
+ stroke-linejoin="round" />
381
+ <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
382
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
383
+ <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
384
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
385
+ <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
386
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
387
+ <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
388
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
389
+ <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
390
+ stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
391
+ <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
392
+ stroke-linecap="round" stroke-linejoin="round" />
393
+ <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
394
+ stroke-linecap="round" stroke-linejoin="round" />
395
+ <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
396
+ stroke-linecap="round" stroke-linejoin="round" />
397
+ <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
398
+ stroke-linecap="round" stroke-linejoin="round" />
399
+ <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
400
+ stroke-linecap="round" stroke-linejoin="round" />
401
+ </svg>
402
+ <div>
403
+ 00'
404
+ </div>
405
+ <div class="bullet"></div>
406
+ <div>
407
+ Nombre
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </template>
415
+
416
+ <style scoped lang="scss">
417
+ .cover {
418
+ background-image: var(--background-image);
419
+ background-repeat: no-repeat;
420
+ background-size: cover;
421
+ width: 998px;
422
+ height: 776px;
423
+ display: flex;
424
+ flex-direction: column;
425
+ align-items: center;
426
+ justify-content: flex-start;
427
+ position: relative;
428
+
429
+ &__title-subtitle {
430
+ position: absolute;
431
+ top: 198px;
432
+ display: flex;
433
+ flex-direction: column;
434
+ align-items: center;
435
+ gap: 24px;
436
+
437
+ &__title {
438
+ display: flex;
439
+ gap: 12px;
440
+ font-size: 42px;
441
+ font-stretch: normal;
442
+ font-style: normal;
443
+ line-height: 0.73;
444
+ letter-spacing: normal;
445
+ text-align: center;
446
+ color: #fff;
447
+
448
+ & > div:first-child {
449
+ font-family: Poppins-Regular, sans-serif;
450
+ }
451
+
452
+ & > div:last-child {
453
+ font-family: Poppins-Bold, sans-serif;
454
+ }
455
+ }
456
+
457
+ &__subtitle {
458
+ font-family: Poppins-Regular, sans-serif;
459
+ font-size: 20px;
460
+ font-weight: normal;
461
+ font-stretch: normal;
462
+ font-style: normal;
463
+ line-height: 2.2;
464
+ letter-spacing: 0.2px;
465
+ text-align: center;
466
+ color: #fff;
467
+ }
468
+ }
469
+
470
+ &__subtitle {
471
+ opacity: 0.8;
472
+ font-family: Poppins-Regular, sans-serif;
473
+ font-size: 20px;
474
+ font-weight: normal;
475
+ font-stretch: normal;
476
+ font-style: normal;
477
+ line-height: 2.2;
478
+ letter-spacing: 0.2px;
479
+ text-align: center;
480
+ }
481
+ }
482
+
483
+ .cover-type-one {
484
+ width: var(--width-type-one);
485
+ max-width: 883px;
486
+ position: absolute;
487
+ top: 330px;
488
+ display: grid;
489
+ grid-template-columns: var(--grid-template-columns-type-one);
490
+
491
+ & > .team-info-one {
492
+ display: flex;
493
+ flex-direction: column;
494
+ align-items: flex-start;
495
+ gap: 24px;
496
+
497
+ & > .team-data {
498
+ display: flex;
499
+ justify-content: flex-start;
500
+ align-items: center;
501
+ gap: 20px;
502
+
503
+ & .team-name {
504
+ font-family: Poppins-Bold, sans-serif;
505
+ font-size: 42px;
506
+ font-weight: bold;
507
+ font-stretch: normal;
508
+ font-style: normal;
509
+ line-height: 0.73;
510
+ letter-spacing: normal;
511
+ text-align: right;
512
+ color: #fff;
513
+ }
514
+ }
515
+
516
+ & > .team-events {
517
+ padding: 6.9px 14.9px;
518
+ border-radius: 4.6px;
519
+ background-color: rgba(21, 34, 46, 0.24);
520
+ display: flex;
521
+ justify-content: center;
522
+ align-items: center;
523
+ gap: 8px;
524
+
525
+ font-family: Poppins-Medium, sans-serif;
526
+ font-size: 17.9px;
527
+ font-weight: normal;
528
+ font-stretch: normal;
529
+ font-style: normal;
530
+ line-height: 1.81;
531
+ letter-spacing: -0.18px;
532
+ text-align: left;
533
+ color: rgba(255, 255, 255, 0.7);
534
+
535
+ & .separator {
536
+ width: 1px;
537
+ height: 16px;
538
+ border-right: 1px dotted #fff;
539
+ margin: 0 8px;
540
+ }
541
+ }
542
+
543
+ &:Last-child {
544
+ align-items: flex-end;
545
+
546
+ & > .team-data {
547
+ flex-direction: row-reverse;
548
+ }
549
+ }
550
+ }
551
+ }
552
+
553
+ .score-one {
554
+ white-space: nowrap;
555
+ text-shadow: 0 4.5px 4.5px rgba(0, 0, 0, 0.25);
556
+ font-family: BebasNeue, Poppins-Bold, sans-serif;
557
+ font-size: 160px;
558
+ font-weight: bold;
559
+ font-stretch: normal;
560
+ font-style: normal;
561
+ //line-height: 0.31;
562
+ letter-spacing: normal;
563
+ text-align: center;
564
+ color: #fff;
565
+ }
566
+
567
+ .cover-type-two {
568
+ width: 100%;
569
+ position: absolute;
570
+ top: 330px;
571
+ display: grid;
572
+ grid-template-columns: 1fr min-content 1fr;
573
+
574
+ & > .team-data {
575
+ display: flex;
576
+ flex-direction: column;
577
+ align-items: flex-start;
578
+
579
+ & > .team-info {
580
+ display: flex;
581
+ align-items: center;
582
+
583
+ & > .team-score-two {
584
+ text-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
585
+ font-family: BebasNeue, Poppins-Bold, sans-serif;
586
+ font-size: 259.1px;
587
+ font-weight: bold;
588
+ font-stretch: normal;
589
+ font-style: normal;
590
+ line-height: 0.21;
591
+ letter-spacing: normal;
592
+ text-align: center;
593
+ color: #fff;
594
+ }
595
+ }
596
+
597
+ & > .team-goals {
598
+ margin-top: 46px;
599
+
600
+ & > .goal {
601
+ display: flex;
602
+ align-items: center;
603
+ gap: 7px;
604
+
605
+ font-family: Poppins-Medium, sans-serif;
606
+ font-size: 17.9px;
607
+ font-weight: normal;
608
+ font-stretch: normal;
609
+ font-style: normal;
610
+ line-height: 1.81;
611
+ letter-spacing: -0.18px;
612
+ text-align: left;
613
+ color: rgba(255, 255, 255, 0.7);
614
+
615
+ & > .bullet {
616
+ width: 3px;
617
+ height: 3px;
618
+ border-radius: 50%;
619
+ background-color: rgba(255, 255, 255, 0.7);
620
+ }
621
+ }
622
+ }
623
+
624
+ &:first-child {
625
+ justify-self: flex-end;
626
+ align-items: flex-end;
627
+ }
628
+ }
629
+
630
+ & > .separator {
631
+ height: 161px;
632
+ border-right: 1px dotted #fff;
633
+ margin: 0 71px;
634
+ }
635
+ }
636
+ </style>