@golstats/gsc-lineups-reports 1.0.1

package/dist/tiempo-agregado.svg

@@ -0,0 +1,75 @@
+<?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="Group-21">
+          <g id="Path-22">
+            <path class="cls-1" d="M16.25,17.07c-.38,0-.77-.15-1.06-.44l-1.69-1.69c-.59-.59-.59-1.54,0-2.12s1.54-.59,2.12,0l1.69,1.69c.59,.59,.59,1.54,0,2.12-.29,.29-.68,.44-1.06,.44Z"/>
+          </g>
+          <g id="Path-22-Copy">
+            <path class="cls-1" d="M31.75,17.07c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l1.69-1.69c.59-.59,1.54-.59,2.12,0s.59,1.54,0,2.12l-1.69,1.69c-.29,.29-.68,.44-1.06,.44Z"/>
+          </g>
+        </g>
+        <g id="Oval-Copy">
+          <path class="cls-2" d="M24,38.57c-7.57,0-13.73-6.16-13.73-13.73s6.16-13.73,13.73-13.73,13.73,6.16,13.73,13.73-6.16,13.73-13.73,13.73Zm0-24.45c-5.91,0-10.73,4.81-10.73,10.73s4.81,10.73,10.73,10.73,10.73-4.81,10.73-10.73-4.81-10.73-10.73-10.73Z"/>
+        </g>
+        <g id="Path-16">
+          <path class="cls-1" d="M26.53,11.93h-4.22c-.55,0-1-.45-1-1s.45-1,1-1h4.22c.55,0,1,.45,1,1s-.45,1-1,1Z"/>
+        </g>
+        <g id="Oval-Copy-2">
+          <circle class="cls-2" cx="24" cy="24.84" r="8.43"/>
+        </g>
+        <g id="Path-12-Copy">
+          <path class="cls-1" d="M24.42,25.34c-.28,0-.5-.22-.5-.5v-8.43c0-.28,.22-.5,.5-.5s.5,.22,.5,.5v8.43c0,.28-.22,.5-.5,.5Z"/>
+        </g>
+      </g>
+      <g id="Path">
+        <g id="path-2">
+          <path class="cls-2" d="M23.98,37.3c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5c.67,0,1.33-.07,1.97-.21,.7-.15,1.39,.22,1.68,.84-.18-.66,.12-1.39,.75-1.72,.58-.31,1.14-.68,1.65-1.1,.55-.46,1.33-.46,1.87-.04-.46-.5-.54-1.28-.13-1.87,.38-.54,.69-1.13,.95-1.74,.27-.66,.96-1.02,1.64-.91-.65-.23-1.07-.88-.99-1.59,.04-.37,.06-.74,.06-1.11,0-.83,.67-1.5,1.5-1.5s1.5,.67,1.5,1.5c0,.49-.03,.98-.08,1.46-.1,.82-.84,1.41-1.66,1.32-.03,0-.05,0-.08-.01,.03,0,.05,.02,.08,.03,.77,.32,1.13,1.19,.81,1.96-.33,.8-.75,1.58-1.25,2.29-.47,.68-1.4,.86-2.09,.38-.02-.01-.04-.03-.06-.05,.02,.02,.03,.04,.05,.06,.53,.64,.45,1.58-.19,2.11-.67,.56-1.4,1.05-2.17,1.45-.73,.38-1.64,.1-2.03-.63-.01-.03-.03-.05-.04-.08,0,.03,.01,.05,.02,.08,.17,.81-.34,1.61-1.15,1.78-.85,.18-1.72,.27-2.6,.27Z"/>
+        </g>
+        <g id="path-2-2" data-name="path-2">
+          <path class="cls-1" d="M23.98,36.55c-.41,0-.75-.34-.75-.75s.34-.75,.75-.75c.72,0,1.43-.08,2.13-.22,.4-.09,.8,.17,.89,.58,.09,.4-.17,.8-.58,.89-.79,.17-1.62,.26-2.44,.26Zm5.09-1.26c-.27,0-.53-.15-.66-.4-.19-.37-.05-.82,.31-1.01,.63-.33,1.23-.73,1.78-1.19,.32-.27,.79-.22,1.06,.09,.27,.32,.22,.79-.09,1.06-.63,.52-1.31,.98-2.04,1.37-.11,.06-.23,.09-.35,.09Zm3.92-3.49c-.15,0-.29-.04-.42-.13-.34-.24-.43-.7-.19-1.04,.4-.59,.75-1.22,1.02-1.88,.16-.38,.6-.56,.98-.41,.38,.16,.56,.6,.41,.98-.31,.75-.71,1.48-1.17,2.15-.15,.21-.38,.33-.62,.33Zm1.85-4.91s-.06,0-.09,0c-.41-.05-.71-.42-.66-.83,.05-.39,.07-.8,.07-1.2s.34-.75,.75-.75,.75,.34,.75,.75c0,.46-.03,.92-.08,1.37-.04,.38-.37,.66-.74,.66Z"/>
+        </g>
+      </g>
+      <g id="Path-2" data-name="Path">
+        <g id="path-3">
+          <path class="cls-2" d="M23.98,37.3c-6.86,0-12.44-5.58-12.44-12.44s5.58-12.44,12.44-12.44,12.44,5.58,12.44,12.44h-3c0-5.2-4.23-9.44-9.44-9.44s-9.44,4.23-9.44,9.44,4.23,9.44,9.44,9.44v3Z"/>
+        </g>
+        <g id="path-3-2" data-name="path-3">
+          <path class="cls-1" d="M23.98,36.55c-6.44,0-11.69-5.24-11.69-11.69s5.24-11.69,11.69-11.69,11.69,5.24,11.69,11.69h-1.5c0-5.62-4.57-10.19-10.19-10.19s-10.19,4.57-10.19,10.19,4.57,10.19,10.19,10.19v1.5Z"/>
+        </g>
+      </g>
+      <g>
+        <g id="Path-12-Copy-2" data-name="Path-12-Copy">
+          <path class="cls-2" d="M14.11,34.42c-1.1,0-2-.9-2-2v-8.43c0-1.1,.9-2,2-2s2,.9,2,2v8.43c0,1.1-.9,2-2,2Z"/>
+        </g>
+        <g id="Path-12-Copy-3" data-name="Path-12-Copy">
+          <path class="cls-2" d="M18.33,30.2H9.9c-1.1,0-2-.9-2-2s.9-2,2-2h8.43c1.1,0,2,.9,2,2s-.9,2-2,2Z"/>
+        </g>
+      </g>
+      <g>
+        <g id="Path-12-Copy-4" data-name="Path-12-Copy">
+          <path class="cls-1" d="M14.11,32.92c-.28,0-.5-.22-.5-.5v-8.43c0-.28,.22-.5,.5-.5s.5,.22,.5,.5v8.43c0,.28-.22,.5-.5,.5Z"/>
+        </g>
+        <g id="Path-12-Copy-5" data-name="Path-12-Copy">
+          <path class="cls-1" d="M18.33,28.7H9.9c-.28,0-.5-.22-.5-.5s.22-.5,.5-.5h8.43c.28,0,.5,.22,.5,.5s-.22,.5-.5,.5Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/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/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,71 @@
+{
+  "name": "@golstats/gsc-lineups-reports",
+  "version": "1.0.1",
+  "main": "dist/gsc-lineups-reports.umd.js",
+  "module": "dist/gsc-lineups-reports.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/gsc-lineups-reports.es.js",
+      "require": "./dist/gsc-lineups-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-carousel": "^1.0.15",
+    "@golstats/gsc-checkbox": "^1.0.13",
+    "@golstats/gsc-dropdown": "^1.0.16",
+    "@golstats/gsc-switch-component": "^1.0.14",
+    "@golstats/gsc-switch-radio": "^1.0.5",
+    "axios": "^1.10.0",
+    "socket.io-client": "^4.8.1",
+    "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",
+    "sass-embedded": "^1.89.2",
+    "vite": "^6.2.4",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue": "^3.5.13"
+  }
+}

package/src/App.vue

@@ -0,0 +1,9 @@
+<script setup>
+import GSCMatchSummary from './components/gsc-lineups-reports.vue'
+</script>
+
+<template>
+  <div style="max-width: 968px; height: auto">
+    <GSCMatchSummary :game="{ game_id: 90208, season_id: 1943, prematch: false }" />
+  </div>
+</template>

package/src/components/Lineup2D/CheckBox.vue

@@ -0,0 +1,42 @@
+<template> 
+
+ <div @click="emit('update:model-value', !modelValue)" class="checkbox">
+      <label v-if="label" :for="label" style="margin-right: 6px;" class="checkbox__label">{{ label }}</label>
+      <svg v-if="modelValue" :name="label" width=" 19" height="19" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path id="Vector" 
+          fill="#CBEE6B"
+          d="M13.4872 0.5H5.52225C2.06253 0.5 0 2.5615 0 6.0195V13.971C0 17.4385 2.06253 19.5 5.52225 19.5H13.4777C16.9374 19.5 19 17.4385 19 13.9805V6.0195C19.0095 2.5615 16.9469 0.5 13.4872 0.5ZM14.048 7.815L8.65881 13.2015C8.52575 13.3345 8.34516 13.4105 8.15506 13.4105C7.96497 13.4105 7.78438 13.3345 7.65131 13.2015L4.96147 10.513C4.68583 10.2375 4.68583 9.7815 4.96147 9.506C5.23711 9.2305 5.69334 9.2305 5.96897 9.506L8.15506 11.691L13.0405 6.808C13.3161 6.5325 13.7724 6.5325 14.048 6.808C14.3236 7.0835 14.3236 7.53 14.048 7.815Z" />
+      
+        </svg>
+      <svg v-else width="19" height="19" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path 
+          id="Vector" 
+          d="M7.65 20.5H13.35C18.1 20.5 20 18.6 20 13.85V8.15C20 3.4 18.1 1.5 13.35 1.5H7.65C2.9 1.5 1 3.4 1 8.15V13.85C1 18.6 2.9 20.5 7.65 20.5Z" stroke="white" stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+  </div>
+    
+  </template>
+
+  <script setup>
+  
+  const { modelValue } = defineProps(['model-value', 'label']);
+  
+  const emit = defineEmits(['update:model-value']);
+  </script>
+<style lang="scss">
+.checkbox {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  &__label {
+    margin-right: 6px;
+    color: #FFF;  
+    text-align: right;
+    font-family: Poppins, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 18px */
+  }
+}
+</style>

package/src/components/Lineup2D/FilterEmpty.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="filter-empty">
+        <p>
+            No hay resultados con los criterios de búsqueda aplicados.
+        </p>
+        <button @click="$emit('clickButton')">
+            Eliminar filtros aplicados
+        </button>
+    </div>
+</template>
+<script setup>
+</script>
+<style lang="scss" scoped>
+.filter-empty {
+    max-width: 220px;
+    widows: 100%;
+    margin: auto;
+    p {
+        color: rgba(255, 255, 255, 0.70);
+        text-align: center;
+        font-family: Poppins, sans-serif;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+        margin: 0 0 16px;
+    }
+    button {
+        outline: none;
+        border: none;
+        margin: auto;
+        cursor: pointer;
+        height: 32px;
+        border-radius: 50px;
+        background: rgba(255, 255, 255, 0.10);
+        padding: 8px 20px;
+        align-items: center;
+        color: #FFF;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: Poppins, sans-serif;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px; /* 200% */
+    }
+}
+</style>

package/src/components/Lineup2D/Icons.vue

@@ -0,0 +1,30 @@
+<template>
+    <svg v-if="icon === 'goal'" xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.02408 0.891998C2.29589 0.891998 0.894531 2.28984 0.894531 4.01399C0.894531 5.73814 2.29589 7.13598 4.02408 7.13598C5.75227 7.13598 7.15363 5.73814 7.15363 4.01399C7.15363 2.28984 5.75227 0.891998 4.02408 0.891998V0.891998Z" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.17056 5.33314L2.63867 3.69586L4.02996 2.68407L5.42152 3.69586L4.89018 5.33314H3.17056Z" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M5.2148 1.13477L4.02938 1.63931L2.84424 1.13477" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M1.66458 1.99231L1.77847 3.2768L0.932129 4.24869" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M1.38428 5.63698L2.63977 5.92542L3.30228 7.03115" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M4.7583 7.03114L5.42027 5.92487L6.67535 5.63643" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M7.1312 4.24842L6.28418 3.27599L6.39793 1.99231" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M4.03044 1.63925V2.68417" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M5.42432 3.7367L6.28358 3.27614" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M4.8916 5.33328L5.42294 5.92497" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M3.17029 5.33328L2.63867 5.92551" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M1.77881 3.27682L2.63848 3.69599" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    <svg v-else-if="icon === 'yellow-card'" width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="4" height="6" rx="1" fill="#F7C330"/>
+    </svg>
+    <svg v-else-if="icon === 'red-card'" width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="4" height="6" rx="1" fill="#FF0000"/>
+    </svg>
+</template>
+<script setup>
+defineProps({
+    icon: {
+        type: String,
+        default: 'goal'
+    }
+})
+</script>

package/src/components/Lineup2D/LineupField.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="lineup-field">
+        <svg width="530" height="342" viewBox="0 0 530 342" fill="none" xmlns="http://www.w3.org/2000/svg" class="lineup-field__svg">
+            <rect x="529.436" y="340.563" width="528.872" height="339.425" rx="2.50325" transform="rotate(-180 529.436 340.563)" stroke="#DFE3E2" stroke-width="1.12766"/>
+            <path d="M264.694 339.979L264.695 2.05153" stroke="#DFE3E2" stroke-width="1.12766" stroke-linecap="square"/>
+            <path d="M530 252.538L460.391 252.538C459.544 252.538 458.857 251.851 458.857 251.004L458.857 91.0363C458.857 90.1894 459.544 89.5028 460.391 89.5028L530 89.5028" stroke="#DFE3E2" stroke-width="1.12766"/>
+            <path d="M530 222.894L490.034 222.894C489.187 222.894 488.5 222.207 488.5 221.36L488.5 120.678C488.5 119.831 489.187 119.144 490.034 119.144L530 119.144" stroke="#DFE3E2" stroke-width="1.12766"/>
+            <path d="M1.58213 222.892L41.5413 222.892C42.3911 222.892 43.0788 222.201 43.0749 221.351L42.6066 120.669C42.6027 119.825 41.9172 119.143 41.0731 119.143L2.29922 119.143" stroke="#DFE3E2" stroke-width="1.12766" stroke-linecap="square"/>
+            <path d="M1.57997 252.536L71.1813 252.536C72.0313 252.536 72.7191 251.845 72.7148 250.995L71.9032 91.0271C71.8989 90.1832 71.2136 89.5013 70.3696 89.5013L2.80927 89.5013" stroke="#DFE3E2" stroke-width="1.12766" stroke-linecap="square"/>
+            <path d="M191.155 171.02C191.155 130.403 224.081 97.4766 264.698 97.4766C305.314 97.4766 338.241 130.403 338.241 171.02C338.241 211.636 305.314 244.563 264.698 244.563C224.081 244.563 191.155 211.636 191.155 171.02Z" stroke="#DFE3E2" stroke-width="1.12766"/>
+            <ellipse cx="264.699" cy="171.021" rx="7.4107" ry="7.41068" transform="rotate(-180 264.699 171.021)" fill="#D8D8D8" stroke="#DFE3E2" stroke-width="1.12766"/>
+            <g v-for="(player, i) in playerPosition" @mouseover="hoveringItem(i)" @mouseleave="leaveItem()"  style="cursor: pointer;" :key="'circle-'+ i">
+                <circle :transform="`translate(${player.posX+7},${player.posY+16})`"  r="16" stroke="#777F86" stroke-width="2" :fill="player.isFirstTeam ? '#0033C5' : '#CBEE6B'" />
+                <text :x="player.posX+7" :y="player.posY+16" class="lineup-field__text" :fill="player.isFirstTeam ? '#fff': '#16232E'">{{ player.number }}</text>
+                
+                <circle v-if="player.goals > 0" style="box-shadow: 0 4px 4px #00000040" :transform="`translate(${player.posX-16},${player.posY+1})`"  r="8" stroke="#777F86" stroke-width="0.2" :fill="'#00000040'">{{ player }}</circle><!-- Goles ---->
+                <image v-if="player.goals > 0" xlink:href="https://golstatsimages.blob.core.windows.net/todoelfut/players-goals-con-goles.png" width="10" :transform="`translate(${player.posX-21},${player.posY-4})`" /><!-- Goles ---->
+
+                <circle v-if="player.substitutionIn || player.substitutionOut" style="box-shadow: 0 4px 4px #00000040" :transform="`translate(${player.posX+33},${player.posY-1})`"  r="8" stroke="#777F86" stroke-width="0.2" :fill="'#0033c5'">{{ player }}</circle><!-- Cambios ---->
+                <image v-if="player.substitutionIn || player.substitutionOut" xlink:href="/line.png" width="12" :transform="`translate(${player.posX+27},${player.posY-4})`" /><!-- cambios ---->
+                
+                <circle v-if="player.yellowcards > 0 && player.redcards == 0" style="box-shadow: 0 4px 4px #00000040" :transform="`translate(${player.posX+33},${player.posY+18})`"  r="8" stroke="#777F86" stroke-width="0.2" :fill="'#00000040'">{{ player }}</circle><!-- Amerillas -->
+                <image v-if="player.yellowcards > 0 && player.redcards == 0" xlink:href="https://golstatsimages.blob.core.windows.net/todoelfut/yellow_card.png" width="9" :transform="`translate(${player.posX+28},${player.posY+13})`" /><!-- amariilas ---->
+
+                <circle v-if="player.yellowcards > 0 && player.redcards > 0" style="box-shadow: 0 4px 4px #00000040" :transform="`translate(${player.posX+33},${player.posY+18})`"  r="8" stroke="#777F86" stroke-width="0.2" :fill="'#00000040'"></circle><!-- Amerillas y rojas -->
+                <image v-if="player.yellowcards > 0 && player.redcards > 0" xlink:href="https://golstatsimages.blob.core.windows.net/todoelfut/yellow_and_red.png" width="9" :transform="`translate(${player.posX+28},${player.posY+13})`" /><!-- amariilas y rojas ---->
+
+                <circle v-if="player.yellowcards == 0 && player.redcards > 0" style="box-shadow: 0 4px 4px #00000040" :transform="`translate(${player.posX+33},${player.posY+18})`"  r="8" stroke="#777F86" stroke-width="0.2" :fill="'#00000040'"></circle><!-- rojas -->
+                <image v-if="player.yellowcards == 0 && player.redcards > 0" xlink:href="https://golstatsimages.blob.core.windows.net/todoelfut/yellow_and_red.png" width="9" :transform="`translate(${player.posX+28},${player.posY+13})`" /><!-- rojas ---->
+                
+            </g>
+            
+           
+        </svg>
+       
+        
+        <div ref="modal" class="lineup-field__modal">
+            <img class="lineup-field__modal-img" width="40" v-if="selectedPlayerPhoto" :src="selectedPlayerPhoto">
+            <p class="lineup-field__player-name">{{ selectedPlayerName }}</p>
+        </div>
+    </div>
+</template>
+<script setup>
+import { computed, ref, toRef } from 'vue';
+
+const props = defineProps({
+    //x and y => minVal 0 and maxVal 100
+    players: {
+        type: Array,
+        default: () => []
+    }
+})
+const players = toRef(props, 'players')
+const displayModal = ref(false)
+const modal = ref(null)
+const selectedPlayerName = ref('-')
+const selectedPlayerPhoto = ref(undefined)
+const playerPosition = computed(() => players.value.map((player) => ({...player, posX: player.posX*5.3,  posY: player.posY*3.4,})))
+const hoveringItem = (i) => {
+    displayModal.value = true
+    modal.value.style.display = 'block'
+    modal.value.style.left = `calc(${players.value[i].posX}% - 30px)`
+    modal.value.style.top = `calc(${players.value[i].posY}% + 50px)`
+    selectedPlayerName.value = players.value[i].name
+    selectedPlayerPhoto.value = players.value[i].photo
+}
+const leaveItem = () => {
+    modal.value.style.display = 'none'
+    displayModal.value = false
+
+}
+</script>
+<style lang="scss" scoped>
+.lineup-field {
+    position: relative;
+    &__modal {
+        display: none;
+        top: 0;
+        left: 0;
+        width: 100px;
+        height: 75px;
+        border-radius: 5.59px;
+        background: #183143;
+        position: absolute;
+    }
+    &__modal-img {
+        position: absolute;
+        bottom: 40%;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    &__player-name {
+        margin: 38px 0 0;
+        color: #F4F4F4;
+        text-align: center;
+        leading-trim: both;
+        text-edge: cap;
+        font-family: Poppins, sans-serif;
+        font-size: 12.154px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 40.114px; /* 283.408% */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 0 5px;
+    }
+    &__svg {
+        height: auto;
+        width: 100%;
+    }
+    &__text {
+        font-family: Poppins, sans-serif;
+        alignment-baseline: central;
+        text-anchor: middle;
+        font-weight: 500;
+        font-size: 16px;
+    }
+}
+</style>