@golstats/gsc-timeline-reports 1.0.0

package/dist/images/events/tiro-a-porteria.svg

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 104.32 74.73">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        clip-path: url(#clippath);
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+
+      .cls-4 {
+        fill: #172531;
+      }
+
+      .cls-5 {
+        clip-path: url(#clippath-1);
+      }
+
+      .cls-6 {
+        opacity: .5;
+      }
+    </style>
+    <clipPath id="clippath">
+      <circle class="cls-1" cx="24" cy="26.43" r="24"/>
+    </clipPath>
+    <clipPath id="clippath-1">
+      <rect class="cls-1" x=".82" width="91.96" height="59.78"/>
+    </clipPath>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <g id="Oval">
+        <circle class="cls-4" cx="24" cy="26.43" r="24"/>
+      </g>
+      <g class="cls-2">
+        <g class="cls-5">
+          <g>
+            <g class="cls-6">
+              <rect class="cls-3" x="24.71" y="16.99" width=".5" height="55.25"/>
+              <rect class="cls-3" x="30.31" y="16.99" width=".5" height="55.25"/>
+              <rect class="cls-3" x="35.91" y="16.99" width=".5" height="55.25"/>
+              <rect class="cls-3" x="41.51" y="16.99" width=".5" height="55.25"/>
+              <rect class="cls-3" x="49.69" y="18.68" width=".34" height="56.04"/>
+              <rect class="cls-3" x="16.09" y="24.57" width="88.23" height=".5"/>
+              <rect class="cls-3" x="16.09" y="30.09" width="88.23" height=".5"/>
+              <rect class="cls-3" x="16.09" y="35.61" width="88.23" height=".5"/>
+              <rect class="cls-3" x="16.09" y="41.14" width="88.23" height=".5"/>
+              <rect class="cls-3" x="16.09" y="46.66" width="88.23" height=".5"/>
+            </g>
+            <polygon class="cls-3" points="16.49 49.82 14.99 49.82 14.99 16.69 48.05 16.69 48.05 18.19 16.49 18.19 16.49 49.82"/>
+          </g>
+        </g>
+      </g>
+      <g>
+        <ellipse class="cls-4" cx="30.36" cy="32.03" rx="9.59" ry="9.61"/>
+        <g>
+          <path class="cls-3" d="M26.8,37.49c-.12,0-.24-.04-.33-.13-.21-.18-.22-.5-.04-.71l1.38-1.54c.18-.2,.5-.22,.71-.04,.21,.18,.22,.5,.04,.71l-1.38,1.54c-.1,.11-.24,.17-.37,.17Z"/>
+          <g>
+            <path class="cls-3" d="M30.39,40.63c-4.74,0-8.6-3.86-8.6-8.6s3.86-8.6,8.6-8.6,8.6,3.86,8.6,8.6-3.86,8.6-8.6,8.6Zm0-16.2c-4.19,0-7.6,3.41-7.6,7.6s3.41,7.6,7.6,7.6,7.6-3.41,7.6-7.6-3.41-7.6-7.6-7.6Z"/>
+            <path class="cls-3" d="M32.63,35.95h-4.45c-.22,0-.41-.14-.48-.35l-1.38-4.25c-.07-.21,0-.43,.18-.56l3.6-2.62c.18-.13,.41-.13,.59,0l3.6,2.62c.17,.13,.25,.35,.18,.56l-1.38,4.25c-.07,.21-.26,.35-.48,.35Zm-4.09-1h3.72l1.15-3.56-3.01-2.2-3.01,2.2,1.15,3.56Z"/>
+            <path class="cls-3" d="M30.41,26.37c-.07,0-.13-.01-.2-.04l-3.07-1.31c-.25-.11-.37-.4-.26-.66,.11-.25,.4-.37,.66-.26l2.87,1.23,2.87-1.23c.25-.11,.55,0,.66,.26,.11,.25,0,.55-.26,.66l-3.07,1.31c-.06,.03-.13,.04-.2,.04Z"/>
+            <path class="cls-3" d="M22.39,33.14c-.12,0-.23-.04-.33-.12-.21-.18-.23-.5-.05-.71l2.05-2.36-.28-3.12c-.02-.27,.18-.52,.45-.54,.28-.02,.52,.18,.54,.45l.29,3.33c.01,.14-.03,.27-.12,.37l-2.19,2.52c-.1,.11-.24,.17-.38,.17Z"/>
+            <path class="cls-3" d="M28.52,40.36c-.17,0-.34-.09-.43-.24l-1.61-2.69-3.04-.7c-.27-.06-.44-.33-.38-.6,.06-.27,.33-.44,.6-.38l3.25,.75c.13,.03,.25,.11,.32,.23l1.71,2.87c.14,.24,.06,.54-.17,.69-.08,.05-.17,.07-.26,.07Z"/>
+            <path class="cls-3" d="M32.29,40.36c-.09,0-.18-.02-.26-.07-.24-.14-.31-.45-.17-.69l1.71-2.87c.07-.12,.18-.2,.32-.23l3.25-.75c.27-.06,.54,.11,.6,.38,.06,.27-.11,.54-.38,.6l-3.04,.7-1.6,2.69c-.09,.16-.26,.24-.43,.24Z"/>
+            <path class="cls-3" d="M38.43,33.14c-.14,0-.28-.06-.38-.17l-2.19-2.52c-.09-.1-.13-.24-.12-.37l.29-3.33c.02-.27,.27-.48,.54-.45,.28,.02,.48,.27,.45,.54l-.28,3.12,2.05,2.36c.18,.21,.16,.52-.05,.71-.09,.08-.21,.12-.33,.12Z"/>
+            <path class="cls-3" d="M30.4,29.08c-.28,0-.5-.22-.5-.5v-2.71c0-.28,.22-.5,.5-.5s.5,.22,.5,.5v2.71c0,.28-.22,.5-.5,.5Z"/>
+            <path class="cls-3" d="M34.02,31.81c-.18,0-.35-.1-.44-.26-.13-.24-.04-.55,.2-.68l2.22-1.19c.24-.13,.55-.04,.68,.2,.13,.24,.04,.55-.2,.68l-2.22,1.19c-.08,.04-.16,.06-.24,.06Z"/>
+            <path class="cls-3" d="M34.01,37.49c-.14,0-.27-.06-.37-.17l-1.38-1.53c-.18-.21-.17-.52,.04-.71,.2-.18,.52-.17,.71,.04l1.38,1.53c.18,.21,.17,.52-.04,.71-.1,.09-.21,.13-.33,.13Z"/>
+            <path class="cls-3" d="M26.81,31.71c-.07,0-.15-.02-.22-.05l-2.23-1.09c-.25-.12-.35-.42-.23-.67,.12-.25,.42-.35,.67-.23l2.23,1.09c.25,.12,.35,.42,.23,.67-.09,.18-.26,.28-.45,.28Z"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/images/events/tiro-de-esquina.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 49.77 48">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        clip-path: url(#clippath);
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+
+      .cls-4 {
+        fill: #172531;
+      }
+    </style>
+    <clipPath id="clippath">
+      <circle class="cls-1" cx="24.88" cy="24" r="24"/>
+    </clipPath>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <g id="Oval">
+        <circle class="cls-4" cx="24.88" cy="24" r="24"/>
+      </g>
+      <g class="cls-2">
+        <g>
+          <path class="cls-3" d="M44.49,32.01c-4.96-1.58-11.51-2.45-18.44-2.45s-13.37,.86-18.31,2.41l-.3-.95c5.04-1.58,11.65-2.46,18.61-2.46s13.69,.89,18.75,2.5l-.3,.95Z"/>
+          <polygon class="cls-3" points="25.92 39.5 0 29.52 .36 28.59 25.91 38.42 49.4 29.09 49.77 30.02 25.92 39.5"/>
+          <ellipse class="cls-4" cx="24.88" cy="19.15" rx="12.35" ry="12.38"/>
+          <g>
+            <path class="cls-3" d="M20.64,25.55c-.12,0-.24-.04-.33-.13-.21-.18-.22-.5-.04-.71l1.64-1.83c.18-.21,.5-.22,.71-.04,.21,.18,.22,.5,.04,.71l-1.64,1.83c-.1,.11-.24,.17-.37,.17Z"/>
+            <g>
+              <path class="cls-3" d="M24.91,29.28c-5.59,0-10.13-4.54-10.13-10.13s4.54-10.13,10.13-10.13,10.13,4.54,10.13,10.13-4.54,10.13-10.13,10.13Zm0-19.25c-5.03,0-9.13,4.09-9.13,9.13s4.1,9.13,9.13,9.13,9.13-4.09,9.13-9.13-4.1-9.13-9.13-9.13Z"/>
+              <path class="cls-3" d="M27.57,23.72h-5.29c-.22,0-.41-.14-.48-.35l-1.64-5.05c-.07-.21,0-.43,.18-.56l4.28-3.12c.18-.13,.41-.13,.59,0l4.28,3.12c.17,.13,.25,.35,.18,.56l-1.63,5.05c-.07,.21-.26,.35-.48,.35Zm-4.93-1h4.56l1.41-4.36-3.69-2.69-3.69,2.69,1.41,4.36Z"/>
+              <path class="cls-3" d="M24.93,12.33c-.07,0-.13-.01-.2-.04l-3.65-1.56c-.25-.11-.37-.4-.26-.66s.4-.37,.66-.26l3.45,1.47,3.45-1.47c.25-.11,.55,0,.66,.26,.11,.25,0,.55-.26,.66l-3.65,1.56c-.06,.03-.13,.04-.2,.04Z"/>
+              <path class="cls-3" d="M15.4,20.38c-.12,0-.23-.04-.33-.12-.21-.18-.23-.5-.05-.71l2.47-2.84-.33-3.75c-.02-.27,.18-.52,.45-.54,.28-.02,.52,.18,.54,.45l.35,3.96c.01,.14-.03,.27-.12,.37l-2.6,3c-.1,.11-.24,.17-.38,.17Z"/>
+              <path class="cls-3" d="M22.69,28.96c-.17,0-.34-.09-.43-.24l-1.93-3.23-3.66-.84c-.27-.06-.44-.33-.38-.6s.33-.44,.6-.38l3.86,.89c.13,.03,.25,.11,.32,.23l2.04,3.41c.14,.24,.06,.54-.17,.69-.08,.05-.17,.07-.26,.07Z"/>
+              <path class="cls-3" d="M27.17,28.96c-.09,0-.18-.02-.26-.07-.24-.14-.31-.45-.17-.69l2.04-3.41c.07-.12,.18-.2,.32-.23l3.86-.89c.27-.06,.54,.11,.6,.38s-.11,.54-.38,.6l-3.65,.84-1.93,3.23c-.09,.16-.26,.24-.43,.24Z"/>
+              <path class="cls-3" d="M34.47,20.38c-.14,0-.28-.06-.38-.17l-2.61-3c-.09-.1-.13-.24-.12-.37l.35-3.96c.02-.28,.28-.48,.54-.45,.28,.02,.48,.27,.45,.54l-.33,3.75,2.47,2.84c.18,.21,.16,.52-.05,.71-.09,.08-.21,.12-.33,.12Z"/>
+              <path class="cls-3" d="M24.92,15.55c-.28,0-.5-.22-.5-.5v-3.22c0-.28,.22-.5,.5-.5s.5,.22,.5,.5v3.22c0,.28-.22,.5-.5,.5Z"/>
+              <path class="cls-3" d="M29.22,18.8c-.18,0-.35-.1-.44-.26-.13-.24-.04-.55,.2-.68l2.64-1.42c.24-.13,.55-.04,.68,.2,.13,.24,.04,.55-.2,.68l-2.64,1.42c-.08,.04-.16,.06-.24,.06Z"/>
+              <path class="cls-3" d="M29.21,25.55c-.14,0-.27-.06-.37-.17l-1.63-1.82c-.18-.21-.17-.52,.04-.71,.2-.18,.52-.17,.71,.04l1.63,1.82c.18,.21,.17,.52-.04,.71-.1,.09-.21,.13-.33,.13Z"/>
+              <path class="cls-3" d="M20.65,18.67c-.07,0-.15-.02-.22-.05l-2.65-1.29c-.25-.12-.35-.42-.23-.67,.12-.25,.42-.35,.67-.23l2.65,1.29c.25,.12,.35,.42,.23,.67-.09,.18-.26,.28-.45,.28Z"/>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/images/events/var.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #172531;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <g id="Oval">
+        <circle class="cls-2" cx="24" cy="24" r="24"/>
+      </g>
+      <g id="Group-19">
+        <g id="Path-16">
+          <path class="cls-1" d="M32.85,36.6H15.15c-.41,0-.75-.34-.75-.75s.34-.75,.75-.75h17.69c.41,0,.75,.34,.75,.75s-.34,.75-.75,.75Z"/>
+        </g>
+      </g>
+      <g id="Rectangle">
+        <g id="path-1">
+          <path class="cls-1" d="M38.02,32.62H9.98V13.43h28.04v19.19Zm-26.54-1.5h25.04V14.93H11.48V31.12Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@golstats/gsc-timeline-reports",
+  "version": "1.0.0",
+  "main": "dist/gsc-timeline-reports.umd.js",
+  "module": "dist/gsc-timeline-reports.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/gsc-timeline-reports.es.js",
+      "require": "./dist/gsc-timeline-reports.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "component",
+    "football",
+    "soccer",
+    "possession",
+    "stats",
+    "golstats",
+    "typescript"
+  ],
+  "author": "GolStats",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/golstats/gsc-field-possession.git"
+  },
+  "bugs": {
+    "url": "https://github.com/golstats/gsc-field-possession/issues"
+  },
+  "homepage": "https://github.com/golstats/gsc-field-possession#readme",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@golstats/gsc-checkbox": "^1.0.13",
+    "axios": "^1.10.0",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "eslint": "^9.22.0",
+    "eslint-plugin-vue": "~10.0.0",
+    "globals": "^16.0.0",
+    "prettier": "3.5.3",
+    "vite": "^6.2.4",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue": "^3.5.13"
+  }
+}

package/src/App.vue

@@ -0,0 +1,60 @@
+<script setup>
+import GSCTimelineReports from './components/gsc-timeline-reports.vue'
+
+const gameData = {
+  gameId: 90209,
+  id: 90209,
+  seasonId: 1943,
+  regularSeasonId: 1933,
+  matchday_name: 'Playoffs 6',
+  status: 1,
+  score: [2, 0],
+  game_status: 1,
+  dateTimeUTC: '2025-05-26T00:00:00Z',
+  homeTeam: {
+    logo: 'https://golstatsimages.blob.core.windows.net/teams-80/18.png',
+    team_id: 18,
+    provisional_logo: 'https://golstatsimages.blob.core.windows.net/teams-provisional/18.png',
+    colloquial_name: 'Toluca',
+    acronym: 'TOL',
+    team_name: 'Toluca',
+  },
+  awayTeam: {
+    logo: 'https://golstatsimages.blob.core.windows.net/teams-80/2.png',
+    team_id: 2,
+    provisional_logo: 'https://golstatsimages.blob.core.windows.net/teams-provisional/2.png',
+    colloquial_name: 'América',
+    acronym: 'AME',
+    team_name: 'America',
+  },
+  is_live: 0,
+  minutes: {
+    home_goals_minutes: ["L. Garcia 65'", "A. Vega 82'"],
+    visiting_goals_minutes: [],
+    home_yellow_cards_minutes: ["L. Garcia 90'", "A. Vega 90 + 3'"],
+    away_yellow_cards_minutes: ["S. Caceres 78'"],
+    home_red_cards_minutes: [],
+    away_red_cards_minutes: [],
+  },
+}
+</script>
+
+<template>
+  <div style="max-width: 968px; width: 100%">
+    <GSCTimelineReports
+      :key="true"
+      :is-default="true"
+      :game-id="gameData.gameId"
+      :home-team="gameData.homeTeam.team_id"
+      :away-team="gameData.awayTeam.team_id"
+      token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Mzg4NjYsIm5hbWUiOiJMaWxsaW5pIiwidXNlcm5hbWUiOiJsaWxsaW5pdGVzdCIsImVtYWlsIjoiIiwicHJvdmlkZXJfaWQiOjEsImxvZ2luX2dvbHN0YXRzIjoxLCJpYXQiOjE3NDkwMTgyODIsImV4cCI6MTc4MDU1NDI4Mn0.bvqTlPHVO6vHtuZu8S5EEdHbgpgiMuwO-DvEENnXvhA"
+    />
+  </div>
+</template>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #0d1d29;
+}
+</style>

package/src/components/gsc-timeline-reports.vue

@@ -0,0 +1,83 @@
+<script setup>
+import GSCTime from './gsc-timeline.vue'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+
+// Definición de las props que recibirá este componente
+const props = defineProps({
+  timelineWidth: {
+    type: Number,
+    required: true,
+    default: 1010,
+  },
+  gameId: {
+    type: Number,
+    required: true,
+  },
+  homeTeam: {
+    type: Number,
+    required: true,
+  },
+  awayTeam: {
+    type: Number,
+    required: true,
+  },
+  isDefault: {
+    type: Boolean,
+    required: false,
+  },
+  token: {
+    type: String,
+    required: true,
+  },
+})
+
+const containerRef = ref(null)
+const timelineWidth = ref(props.timelineWidth)
+const timelineKey = ref(0)
+
+function updateTimelineWidth() {
+  if (containerRef.value) {
+    timelineWidth.value = containerRef.value.offsetWidth - 80
+  }
+}
+
+// Watch para timelineWidth
+watch(timelineWidth, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    setTimeout(() => {
+      timelineKey.value++
+    }, 3000)
+  }
+})
+
+onMounted(() => {
+  updateTimelineWidth()
+  window.addEventListener('resize', updateTimelineWidth)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateTimelineWidth)
+})
+</script>
+
+<template>
+  <div class="container-fullwidth" ref="containerRef">
+    <GSCTime
+      :is-default="isDefault"
+      :key="timelineWidth"
+      :timeline-width="timelineWidth"
+      :game-id="props.gameId"
+      :home-team="props.homeTeam"
+      :away-team="props.awayTeam"
+      :token="props.token"
+    />
+  </div>
+</template>
+<style>
+.container-fullwidth {
+  width: auto;
+  display: flex;
+  justify-content: center; /* Centra horizontalmente */
+  align-items: center; /* Centra verticalmente */
+}
+</style>