@golstats/gsc-top-player 1.0.11 → 1.0.13

package/src/components/comparative/gsc-expanded-info-player.vue

@@ -1,710 +1,710 @@
-<template>
-  <div ref="myDivRef">
-    <div v-if="type == 0" :class="$style.expandedInfoPlayerGames">
-      <div :class="$style.dataContainer" id="data-container">
-        <div :class="[$style.containerInfoGames, additionalClass]" id="container-info">
-          <div :class="$style.manchesterUnited">
-            <p v-if="viewTeam" :class="$style.equipoAtlasSeleccinMexiGames">
-              <span :class="$style.equipoGames">Equipo: </span>
-              <span :class="$style.atlasSeleccinGames">{{ data.teams }}</span>
-            </p>
-            <p v-if="viewAge" :class="$style.nacionalidadMex">
-              <span :class="$style.equipoGames">Edad: </span>
-              <span :class="$style.aosGames">{{ data.age }} años</span>
-              <span :class="$style.span12"> ({{ data.dataofbirth }})</span>
-            </p>
-            <p v-if="viewNationality" :class="$style.nacionalidadMex">
-              <span :class="$style.span12">Nacionalidad: </span>
-              <span :class="$style.aosGames"
-                >{{ data.nationality.substring(0, 3).toUpperCase() }}
-                <div :class="$style.countryFlag"><img :src="data.countryFlag" /></div
-              ></span>
-            </p>
-            <p v-if="viewPosition" :class="$style.nacionalidadMex">
-              <span :class="$style.span12">Posición: </span>
-              <span :class="$style.aosGames">{{ data.position }}</span>
-            </p>
-          </div>
-          <div :class="$style.manchesterUnited12">
-            <p v-if="viewGames && !(!!isLive)" :class="$style.nacionalidadMex" >
-              <span :class="$style.span12">partidos Jugados: </span>
-              <span :class="$style.aosGames">{{ data.games }}</span>
-            </p>
-            <p v-if="viewMin && !(!!isLive)" :class="$style.nacionalidadMex">
-              <span :class="$style.span12">Minutos Jugados: </span>
-              <span :class="$style.aosGames">{{ data.min }}</span>
-            </p>
-            <p v-if="viewGoals" :class="$style.nacionalidadMex">
-              <span :class="$style.span12">{{ data.category }}: </span>
-              <span :class="$style.aosGames">{{ data.goals }}</span>
-            </p>
-            <p v-if="viewEffectiveness" :class="$style.nacionalidadMex">
-              <span :class="$style.span12">Efectividad de pases: </span>
-              <span :class="$style.aosGames">{{ data.effectiveness.toFixed(0) }}%</span>
-            </p>
-          </div>
-        </div>
-        <div :class="$style.containerButton" id="btn-container">
-          <GSCButton
-            :style="additionalClass != '' && elementSize.width > 540 ? 'margin-right: 50px' : ''"
-            v-if="viewButton"
-            width="88px"
-            height="30px"
-            border-radius="30px"
-            :border-width="1"
-            background-color="#ffffff1a"
-            font-family="Poppins-Semibold"
-            border-color="#cbee6b"
-            text-value="Ver perfil"
-            font-size="10px"
-            @click="viewProfile(data.id)"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="type == 1" :class="$style.infoExpanded">
-      <div :class="[$style.containerDataBg, additionalClass]">
-        <div :class="$style.manchesterUnitedParent">
-          <div :class="$style.manchesterUnited1">
-            <span>Posición en la tabla: </span>
-            <span :class="$style.spanGames">{{ data.position }}</span>
-          </div>
-          <div :class="$style.manchesterUnited1" >
-            <span>Goles anotados: </span>
-            <span :class="$style.spanGames">{{ data.goals }}</span>
-          </div>
-          <div :class="$style.manchesterUnited1" >
-            <span>Goles recibidos: </span>
-            <span :class="$style.spanGames">{{ data.goals_received }}</span>
-          </div>
-          <div :class="$style.manchesterUnited1" >
-            <span>Partidos jugados:</span>
-            <span :class="$style.spanGames">{{ data.games_played }}</span>
-          </div>
-        </div>
-        <div :class="$style.manchesterUnitedParent">
-          <div v-if="viewEffectiveness" :class="$style.manchesterUnited1">
-            <span>Efectividad de pases: </span>
-            <span :class="$style.spanGames">{{ data.effectiveness.toFixed(0) }}%</span>
-          </div>
-          <div :class="$style.manchesterUnited1">
-            <span>xG: </span>
-            <span :class="$style.spanGames">{{ data.xg }}</span>
-          </div>
-        </div>
-        <div :class="$style.manchesterUnitedParent">
-          <div :class="$style.manchesterUnited1">
-            <span>{{ data.category }}: </span>
-            <span :class="$style.spanGames">{{ data.total }}</span>
-          </div>
-          <div v-if="viewEffectiveness" :class="$style.manchesterUnited8">
-            <span>Efectividad de pases: </span>
-            <span :class="$style.spanGames">{{ data.effectiveness }}%</span>
-          </div>
-          <div :class="$style.manchesterUnited8">
-            <span>xG: </span>
-            <span :class="$style.spanGames">{{ data.xg }}</span>
-          </div>
-        </div>
-      </div>
-      <div :class="$style.containerDataSm">
-        <div :class="$style.frameDiv">
-          <div :class="$style.manchesterUnited1">
-            <span>Posición en la tabla: </span>
-            <span :class="$style.spanGames">{{ data.position }}</span>
-          </div>
-          <div :class="$style.manchesterUnited1">
-            <span>Goles anotados: </span>
-            <span :class="$style.spanGames">{{ data.goals }}</span>
-          </div>
-          <div :class="$style.manchesterUnited1">
-            <span>Goles recibidos: </span>
-            <span :class="$style.spanGames">{{ data.goals_received }}</span>
-          </div>
-          <div :class="$style.manchesterUnited1">
-            <span>Partidos jugados: </span>
-            <span :class="$style.spanGames">{{ data.games_played }}</span>
-          </div>
-        </div>
-        <div :class="$style.manchesterUnitedParent1">
-          <div v-if="viewEffectiveness" :class="$style.manchesterUnited14">
-            <span>Efectividad de pases: </span>
-            <span :class="$style.spanGames">{{ data.effectiveness.toFixed(0) }}%</span>
-          </div>
-          <div :class="$style.manchesterUnited1">
-            <span>xG: </span>
-            <span :class="$style.spanGames">{{ data.xg }}</span>
-          </div>
-          <div :class="$style.manchesterUnited1">
-            <span>{{ data.category }}: </span>
-            <span :class="$style.spanGames">{{ data.total }}</span>
-          </div>
-          <div :class="$style.manchesterUnited8">
-            <span>{{ data.category }}: </span>
-            <span :class="$style.spanGames">{{ data.total }}</span>
-          </div>
-        </div>
-      </div>
-      <GSCButton
-        :style="additionalClass != '' && elementSize.width > 540 ? 'margin-right: 42px' : ''"
-        v-if="viewButton"
-        width="88px"
-        height="30px"
-        border-radius="30px"
-        :border-width="1"
-        background-color="#ffffff1a"
-        font-family="Poppins-Semibold"
-        border-color="#cbee6b"
-        text-value="Ver perfil"
-        font-size="10px"
-        @click="viewProfile(data.id)"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import { GSCButton } from '@golstats/gsc-button'
-import '@@/@golstats/gsc-button/dist/style.css'
-import { ref } from 'vue'
-import useElementSize from './useElementSize'
-export default {
-  components: {
-    GSCButton
-  },
-  props: {
-    isLive: { type: Boolean, default: false },
-    background: { type: String, default: '#172531' },
-    type: { type: Number, default: 1 },
-    viewButton: { type: Boolean, default: true },
-    viewTeam: { type: Boolean, default: true },
-    viewAge: { type: Boolean, default: true },
-    viewNationality: { type: Boolean, default: true },
-    viewPosition: { type: Boolean, default: true },
-    viewGames: { type: Boolean, default: true },
-    viewMin: { type: Boolean, default: true },
-    viewGoals: { type: Boolean, default: true },
-    viewEffectiveness: { type: Boolean, default: true },
-    height: { type: String, default: '134px' },
-    fontColor: { type: String, default: '#ffffffb3' },
-    fontColorValue: { type: String, default: '#ffffff' },
-    fontFamily: { type: String, default: 'Poppins-Regular' },
-    fontSize: { type: String, default: '10px' },
-    additionalClass: { type: String, default: '' },
-    data: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  setup() {
-    const myDivRef = ref('myDivRef')
-    const { elementSize } = useElementSize(myDivRef)
-    return {
-      myDivRef,
-      elementSize
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {
-    viewProfile(id) {
-      this.$emit('viewprofile', id)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.fullTable {
-  justify-content: center;
-}
-
-.fullTable > div {
-  width: 250px;
-  max-width: 250px;
-}
-
-.fullTable span {
-  font-size: 12px;
-}
-
-@media screen and (max-width: 430px) {
-  .fullTable > div {
-    width: 50%;
-    max-width: 50%;
-  }
-
-  .fullTable span {
-    font-size: 10px;
-  }
-}
-</style>
-
-<style module>
-@import '/css/fonts.css';
-body {
-  margin: 0;
-  line-height: normal;
-}
-:root {
-  /* Paddings */
-  --padding-5xsexpand: 8px;
-  --padding-3xsexpand: 10px;
-
-  --font-size-3xsexpand: 10px;
-  --font-size-2xsexpand: 11px;
-  --font-size-xsexpand: 12px;
-
-  --color-gray-100drexpand: #172531;
-  --color-gray-200expand: rgba(255, 255, 255, 0.7);
-  --color-darkslategray-100expand: #183143;
-  --color-white: #fff;
-  --color-whitesmokeexpand: #f4f4f4;
-
-  --gap-0expand: 0px;
-  --gap-baseexpand: 16px;
-  --gap-5xlexpand: 24px;
-  --gap-xsexpand: 12px;
-  --gap-5xsexpand: 8px;
-  --gap-9xsexpand: 4px;
-  --gap-xlexpand: 20px;
-  --gap-19xlexpand: 38px;
-  --gap-9xlexpand: 28px;
-
-  --padding-29xlexpand: 48px;
-  --padding-xlexpand: 20px;
-  --padding-lgexpand: 18px;
-  --padding-9xlexpand: 28px;
-  --padding-xsexpand: 12px;
-}
-.equipoGames {
-  font-weight: 500;
-  font-family: v-bind(fontFamily);
-  color: v-bind(fontColor);
-}
-.atlasSeleccinGames {
-  font-family: 'Poppins-Medium';
-  color: v-bind(fontColorValue);
-}
-.equipoAtlasSeleccinMexiGames {
-  margin: 0;
-  color: v-bind(fontColorValue);
-}
-.aosGames {
-  font-family: 'Poppins-Medium';
-  color: v-bind(fontColorValue);
-}
-.span12 {
-  font-weight: 500;
-}
-.nacionalidadMex {
-  margin: 0;
-}
-.manchesterUnited {
-  position: relative;
-  letter-spacing: -0.01em;
-  line-height: 19.5px;
-  text-transform: capitalize;
-  width: 145px;
-}
-.manchesterUnited12 {
-  align-self: stretch;
-  position: relative;
-  letter-spacing: -0.01em;
-  line-height: 19.5px;
-  text-transform: capitalize;
-  display: inline-block;
-  min-width: 117px;
-  flex-shrink: 4;
-}
-.containerInfoGames {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 30px;
-  min-width: 281px;
-}
-.verPerfil12 {
-  position: relative;
-  font-size: v-bind(fontSize);
-  line-height: 24px;
-  font-weight: 500;
-  font-family: v-bind(fontFamily);
-  color: v-bind(fontColorValue);
-  text-align: left;
-}
-.btnProfile {
-  cursor: pointer;
-  border: 1px solid #cbee6b;
-  padding: var(--padding-5xsexpand) 20px;
-  background-color: rgba(255, 255, 255, 0.1);
-  border-radius: 50px;
-  box-sizing: border-box;
-  width: 88px;
-  height: 30px;
-  overflow: hidden;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-}
-.containerButton {
-  width: 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.dataContainer {
-  align-self: stretch;
-  border-top: 1px solid #3d3d49;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  padding: 13px 12px 22px;
-  align-items: center;
-  justify-content: space-between;
-}
-.expandedInfoPlayerGames {
-  position: relative;
-  background-color: v-bind(background) !important;
-  width: 100%;
-  /*    min-height: v-bind(height); */
-  display: flex;
-  flex-direction: column;
-  padding: 0px var(--padding-5xsexpand);
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: flex-start;
-  text-align: left;
-  font-size: v-bind(fontSize);
-  color: v-bind(fontColor);
-  font-family: v-bind(fontFamily);
-}
-
-@media screen and (max-width: 780px) {
-  .containerButton {
-    width: 100%;
-    margin: 20px 0 0 0;
-  }
-
-  .expandedInfoPlayerGames {
-    /*      max-width: 496px; */
-  }
-}
-@media screen and (max-width: 500px) {
-  .containerButton {
-    align-items: flex-end;
-    justify-content: center;
-  }
-
-  .expandedInfoPlayerGames {
-    /*      max-width: 496px; */
-  }
-}
-@media screen and (max-width: 430px) {
-  .manchesterUnited {
-    flex: 1;
-  }
-
-  .manchesterUnited12 {
-    min-width: 117px;
-  }
-
-  .containerInfoGames {
-    gap: 12px;
-    align-items: center;
-    justify-content: center;
-    padding-left: var(--padding-3xsexpand);
-    padding-right: var(--padding-3xsexpand);
-    padding-bottom: 0px;
-    box-sizing: border-box;
-  }
-
-  .containerButton {
-    width: 100%;
-    gap: 10px;
-    padding-top: 16px;
-    padding-bottom: 0px;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-  }
-
-  .dataContainer {
-    padding: 13px 0px 22px;
-    align-items: center;
-  }
-}
-@media screen and (max-width: 320px) {
-  .containerInfoGames {
-    flex: 1;
-    gap: 5px;
-    align-items: center;
-    justify-content: flex-start;
-  }
-
-  .expandedInfoPlayerGames {
-    width: 320px;
-  }
-}
-@media screen and (max-width: 540px) {
-  .containerButton {
-    padding-top: 0px;
-    box-sizing: border-box;
-  }
-}
-
-.containerDataBg {
-  align-self: stretch;
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 10px;
-  margin-top: 12px;
-  max-width: 90%;
-}
-.containerDataSm {
-  align-self: stretch;
-  flex: 1;
-  display: none;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-.span {
-  color: v-bind(fontColorValue);
-}
-.manchesterUnited14 {
-  position: relative;
-  letter-spacing: -0.01em;
-  line-height: 19.5px;
-}
-.filter {
-  border-radius: 50px;
-  background-color: rgba(255, 255, 255, 0.1);
-  border: 1px solid #cbee6b;
-  box-sizing: border-box;
-  width: 88px;
-  height: 30px;
-  overflow: hidden;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: row;
-  padding: 8px var(--padding-xlexpand);
-  align-items: center;
-  justify-content: flex-start;
-  font-size: var(--font-size-3xsexpand);
-  color: var(--color-whiteexpand);
-}
-.verPerfil {
-  position: relative;
-  line-height: 24px;
-}
-.manchesterUnited8 {
-  position: relative;
-  letter-spacing: -0.01em;
-  line-height: 19.5px;
-  opacity: 0;
-}
-.manchesterUnitedParent1 {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: var(--gap-5xsexpand);
-}
-.manchesterUnited1 {
-  position: relative;
-  letter-spacing: -0.01em;
-  line-height: 19.5px;
-}
-.manchesterUnitedParent {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--gap-5xsexpand);
-  font-size: 12px;
-}
-.frameDiv {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: var(--gap-5xsexpand);
-}
-.infoExpanded {
-  align-self: stretch;
-  background-color: v-bind(background);
-  border-top: 1px solid #3a4956;
-  box-sizing: border-box;
-  /*      height: v-bind(height); */
-  font-family: v-bind(fontFamily);
-  display: flex;
-  flex-direction: row;
-  padding: 0px 10px 10px 10px;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 4px;
-  z-index: 3;
-  font-size: 10px;
-  color: v-bind(fontColor);
-}
-@media screen and (max-width: 1232px) {
-  .manchesterUnitedParent1 {
-    gap: var(--gap-9xsexpand);
-  }
-  .frameDiv {
-    gap: var(--gap-9xsexpand);
-  }
-
-  .manchesterUnitedParent {
-    gap: var(--gap-9xsexpand);
-  }
-  .containerDataSm {
-    display: none;
-  }
-}
-@media screen and (max-width: 960px) {
-}
-@media screen and (max-width: 420px) {
-  .infoExpanded {
-    padding-left: var(--padding-xlexpand);
-  }
-  .manchesterUnitedParent1 {
-    max-width: 150px;
-  }
-
-  .frameDiv {
-    max-width: 130px;
-  }
-  .containerDataSm {
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--gap-0expand);
-  }
-}
-@media screen and (max-width: 320px) {
-  .frameDiv {
-    max-width: 120px;
-  }
-  .manchesterUnitedParent1 {
-    max-width: 160px;
-  }
-
-  .infoExpanded {
-    padding-left: 0px;
-    padding-right: 0px;
-    box-sizing: border-box;
-  }
-}
-@media screen and (max-width: 540px) {
-  .infoExpanded {
-    flex: 1;
-    flex-direction: column;
-    gap: var(--gap-0expand);
-    align-items: center;
-    justify-content: center;
-    padding-left: 0px;
-    padding-right: var(--padding-xlexpand);
-    box-sizing: border-box;
-    min-height: 172px;
-  }
-  .containerDataSm {
-    align-self: stretch;
-    width: auto;
-    height: auto;
-    gap: var(--gap-0expand);
-    flex: unset;
-  }
-  .containerDataBg {
-    display: none;
-    flex: unset;
-    align-self: stretch;
-  }
-}
-@media screen and (max-width: 460px) {
-  .containerDataSm {
-    gap: var(--gap-xsexpand);
-  }
-
-  .infoExpanded {
-    gap: var(--gap-baseexpand);
-    padding-left: 59px;
-    box-sizing: border-box;
-  }
-}
-@media screen and (max-width: 680px) {
-  .infoExpanded {
-    gap: var(--gap-0expand);
-    padding-left: 32px;
-    box-sizing: border-box;
-  }
-}
-@media screen and (max-width: 350px) {
-  .containerDataBg {
-    display: none;
-  }
-  .containerDataSm {
-    max-width: 340px;
-    margin: 0 10px;
-  }
-
-  .infoExpanded {
-    align-self: stretch;
-    width: auto;
-    align-items: center;
-    justify-content: center;
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-    box-sizing: border-box;
-  }
-}
-@media screen and (max-width: 1086px) {
-  .containerDataSm {
-    display: none;
-  }
-}
-@media screen and (max-width: 770px) {
-  .containerDataSm {
-    display: flex;
-    align-items: flex-start;
-    padding-top: 20px;
-    text-align: left;
-  }
-
-  .containerDataBg {
-    display: none;
-  }
-
-  .infoExpanded {
-    height: auto;
-    gap: 10px;
-    box-sizing: border-box;
-    flex-direction: column;
-    margin-bottom: 10px;
-  }
-}
-
-.countryFlag {
-  display: inline-block;
-  height: 10px;
-  margin-left: 5px;
-  position: relative;
-  top: 1px;
-}
-
-.countryFlag img {
-  height: 100%;
-}
-</style>
+<template>
+  <div ref="myDivRef">
+    <div v-if="type == 0" :class="$style.expandedInfoPlayerGames">
+      <div :class="$style.dataContainer" id="data-container">
+        <div :class="[$style.containerInfoGames, additionalClass]" id="container-info">
+          <div :class="$style.manchesterUnited">
+            <p v-if="viewTeam" :class="$style.equipoAtlasSeleccinMexiGames">
+              <span :class="$style.equipoGames">Equipo: </span>
+              <span :class="$style.atlasSeleccinGames">{{ data.teams }}</span>
+            </p>
+            <p v-if="viewAge" :class="$style.nacionalidadMex">
+              <span :class="$style.equipoGames">Edad: </span>
+              <span :class="$style.aosGames">{{ data.age }} años</span>
+              <span :class="$style.span12"> ({{ data.dataofbirth }})</span>
+            </p>
+            <p v-if="viewNationality" :class="$style.nacionalidadMex">
+              <span :class="$style.span12">Nacionalidad: </span>
+              <span :class="$style.aosGames"
+                >{{ data.nationality.substring(0, 3).toUpperCase() }}
+                <div :class="$style.countryFlag"><img :src="data.countryFlag" /></div
+              ></span>
+            </p>
+            <p v-if="viewPosition" :class="$style.nacionalidadMex">
+              <span :class="$style.span12">Posición: </span>
+              <span :class="$style.aosGames">{{ data.position }}</span>
+            </p>
+          </div>
+          <div :class="$style.manchesterUnited12">
+            <p v-if="viewGames && !(!!isLive)" :class="$style.nacionalidadMex" >
+              <span :class="$style.span12">partidos Jugados: </span>
+              <span :class="$style.aosGames">{{ data.games }}</span>
+            </p>
+            <p v-if="viewMin && !(!!isLive)" :class="$style.nacionalidadMex">
+              <span :class="$style.span12">Minutos Jugados: </span>
+              <span :class="$style.aosGames">{{ data.min }}</span>
+            </p>
+            <p v-if="viewGoals" :class="$style.nacionalidadMex">
+              <span :class="$style.span12">{{ data.category }}: </span>
+              <span :class="$style.aosGames">{{ data.goals }}</span>
+            </p>
+            <p v-if="viewEffectiveness" :class="$style.nacionalidadMex">
+              <span :class="$style.span12">Efectividad de pases: </span>
+              <span :class="$style.aosGames">{{ data.effectiveness.toFixed(0) }}%</span>
+            </p>
+          </div>
+        </div>
+        <div :class="$style.containerButton" id="btn-container">
+          <GSCButton
+            :style="additionalClass != '' && elementSize.width > 540 ? 'margin-right: 50px' : ''"
+            v-if="viewButton"
+            width="88px"
+            height="30px"
+            border-radius="30px"
+            :border-width="1"
+            background-color="#ffffff1a"
+            font-family="Poppins-Semibold"
+            border-color="#cbee6b"
+            text-value="Ver perfil"
+            font-size="10px"
+            @click="viewProfile(data.id)"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="type == 1" :class="$style.infoExpanded">
+      <div :class="[$style.containerDataBg, additionalClass]">
+        <div :class="$style.manchesterUnitedParent">
+          <div :class="$style.manchesterUnited1">
+            <span>Posición en la tabla: </span>
+            <span :class="$style.spanGames">{{ data.position }}</span>
+          </div>
+          <div :class="$style.manchesterUnited1" >
+            <span>Goles anotados: </span>
+            <span :class="$style.spanGames">{{ data.goals }}</span>
+          </div>
+          <div :class="$style.manchesterUnited1" >
+            <span>Goles recibidos: </span>
+            <span :class="$style.spanGames">{{ data.goals_received }}</span>
+          </div>
+          <div :class="$style.manchesterUnited1" >
+            <span>Partidos jugados:</span>
+            <span :class="$style.spanGames">{{ data.games_played }}</span>
+          </div>
+        </div>
+        <div :class="$style.manchesterUnitedParent">
+          <div v-if="viewEffectiveness" :class="$style.manchesterUnited1">
+            <span>Efectividad de pases: </span>
+            <span :class="$style.spanGames">{{ data.effectiveness.toFixed(0) }}%</span>
+          </div>
+          <div :class="$style.manchesterUnited1">
+            <span>xG: </span>
+            <span :class="$style.spanGames">{{ data.xg }}</span>
+          </div>
+        </div>
+        <div :class="$style.manchesterUnitedParent">
+          <div :class="$style.manchesterUnited1">
+            <span>{{ data.category }}: </span>
+            <span :class="$style.spanGames">{{ data.total }}</span>
+          </div>
+          <div v-if="viewEffectiveness" :class="$style.manchesterUnited8">
+            <span>Efectividad de pases: </span>
+            <span :class="$style.spanGames">{{ data.effectiveness }}%</span>
+          </div>
+          <div :class="$style.manchesterUnited8">
+            <span>xG: </span>
+            <span :class="$style.spanGames">{{ data.xg }}</span>
+          </div>
+        </div>
+      </div>
+      <div :class="$style.containerDataSm">
+        <div :class="$style.frameDiv">
+          <div :class="$style.manchesterUnited1">
+            <span>Posición en la tabla: </span>
+            <span :class="$style.spanGames">{{ data.position }}</span>
+          </div>
+          <div :class="$style.manchesterUnited1">
+            <span>Goles anotados: </span>
+            <span :class="$style.spanGames">{{ data.goals }}</span>
+          </div>
+          <div :class="$style.manchesterUnited1">
+            <span>Goles recibidos: </span>
+            <span :class="$style.spanGames">{{ data.goals_received }}</span>
+          </div>
+          <div :class="$style.manchesterUnited1">
+            <span>Partidos jugados: </span>
+            <span :class="$style.spanGames">{{ data.games_played }}</span>
+          </div>
+        </div>
+        <div :class="$style.manchesterUnitedParent1">
+          <div v-if="viewEffectiveness" :class="$style.manchesterUnited14">
+            <span>Efectividad de pases: </span>
+            <span :class="$style.spanGames">{{ data.effectiveness.toFixed(0) }}%</span>
+          </div>
+          <div :class="$style.manchesterUnited1">
+            <span>xG: </span>
+            <span :class="$style.spanGames">{{ data.xg }}</span>
+          </div>
+          <div :class="$style.manchesterUnited1">
+            <span>{{ data.category }}: </span>
+            <span :class="$style.spanGames">{{ data.total }}</span>
+          </div>
+          <div :class="$style.manchesterUnited8">
+            <span>{{ data.category }}: </span>
+            <span :class="$style.spanGames">{{ data.total }}</span>
+          </div>
+        </div>
+      </div>
+      <GSCButton
+        :style="additionalClass != '' && elementSize.width > 540 ? 'margin-right: 42px' : ''"
+        v-if="viewButton"
+        width="88px"
+        height="30px"
+        border-radius="30px"
+        :border-width="1"
+        background-color="#ffffff1a"
+        font-family="Poppins-Semibold"
+        border-color="#cbee6b"
+        text-value="Ver perfil"
+        font-size="10px"
+        @click="viewProfile(data.id)"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { GSCButton } from '@golstats/gsc-button'
+import '@@/@golstats/gsc-button/dist/style.css'
+import { ref } from 'vue'
+import useElementSize from './useElementSize'
+export default {
+  components: {
+    GSCButton
+  },
+  props: {
+    isLive: { type: Boolean, default: false },
+    background: { type: String, default: '#172531' },
+    type: { type: Number, default: 1 },
+    viewButton: { type: Boolean, default: true },
+    viewTeam: { type: Boolean, default: true },
+    viewAge: { type: Boolean, default: true },
+    viewNationality: { type: Boolean, default: true },
+    viewPosition: { type: Boolean, default: true },
+    viewGames: { type: Boolean, default: true },
+    viewMin: { type: Boolean, default: true },
+    viewGoals: { type: Boolean, default: true },
+    viewEffectiveness: { type: Boolean, default: true },
+    height: { type: String, default: '134px' },
+    fontColor: { type: String, default: '#ffffffb3' },
+    fontColorValue: { type: String, default: '#ffffff' },
+    fontFamily: { type: String, default: 'Poppins-Regular' },
+    fontSize: { type: String, default: '10px' },
+    additionalClass: { type: String, default: '' },
+    data: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  setup() {
+    const myDivRef = ref('myDivRef')
+    const { elementSize } = useElementSize(myDivRef)
+    return {
+      myDivRef,
+      elementSize
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {
+    viewProfile(id) {
+      this.$emit('viewprofile', id)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fullTable {
+  justify-content: center;
+}
+
+.fullTable > div {
+  width: 250px;
+  max-width: 250px;
+}
+
+.fullTable span {
+  font-size: 12px;
+}
+
+@media screen and (max-width: 430px) {
+  .fullTable > div {
+    width: 50%;
+    max-width: 50%;
+  }
+
+  .fullTable span {
+    font-size: 10px;
+  }
+}
+</style>
+
+<style module>
+@import '/css/fonts.css';
+body {
+  margin: 0;
+  line-height: normal;
+}
+:root {
+  /* Paddings */
+  --padding-5xsexpand: 8px;
+  --padding-3xsexpand: 10px;
+
+  --font-size-3xsexpand: 10px;
+  --font-size-2xsexpand: 11px;
+  --font-size-xsexpand: 12px;
+
+  --color-gray-100drexpand: #172531;
+  --color-gray-200expand: rgba(255, 255, 255, 0.7);
+  --color-darkslategray-100expand: #183143;
+  --color-white: #fff;
+  --color-whitesmokeexpand: #f4f4f4;
+
+  --gap-0expand: 0px;
+  --gap-baseexpand: 16px;
+  --gap-5xlexpand: 24px;
+  --gap-xsexpand: 12px;
+  --gap-5xsexpand: 8px;
+  --gap-9xsexpand: 4px;
+  --gap-xlexpand: 20px;
+  --gap-19xlexpand: 38px;
+  --gap-9xlexpand: 28px;
+
+  --padding-29xlexpand: 48px;
+  --padding-xlexpand: 20px;
+  --padding-lgexpand: 18px;
+  --padding-9xlexpand: 28px;
+  --padding-xsexpand: 12px;
+}
+.equipoGames {
+  font-weight: 500;
+  font-family: v-bind(fontFamily);
+  color: v-bind(fontColor);
+}
+.atlasSeleccinGames {
+  font-family: 'Poppins-Medium';
+  color: v-bind(fontColorValue);
+}
+.equipoAtlasSeleccinMexiGames {
+  margin: 0;
+  color: v-bind(fontColorValue);
+}
+.aosGames {
+  font-family: 'Poppins-Medium';
+  color: v-bind(fontColorValue);
+}
+.span12 {
+  font-weight: 500;
+}
+.nacionalidadMex {
+  margin: 0;
+}
+.manchesterUnited {
+  position: relative;
+  letter-spacing: -0.01em;
+  line-height: 19.5px;
+  text-transform: capitalize;
+  width: 145px;
+}
+.manchesterUnited12 {
+  align-self: stretch;
+  position: relative;
+  letter-spacing: -0.01em;
+  line-height: 19.5px;
+  text-transform: capitalize;
+  display: inline-block;
+  min-width: 117px;
+  flex-shrink: 4;
+}
+.containerInfoGames {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 30px;
+  min-width: 281px;
+}
+.verPerfil12 {
+  position: relative;
+  font-size: v-bind(fontSize);
+  line-height: 24px;
+  font-weight: 500;
+  font-family: v-bind(fontFamily);
+  color: v-bind(fontColorValue);
+  text-align: left;
+}
+.btnProfile {
+  cursor: pointer;
+  border: 1px solid #cbee6b;
+  padding: var(--padding-5xsexpand) 20px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 50px;
+  box-sizing: border-box;
+  width: 88px;
+  height: 30px;
+  overflow: hidden;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.containerButton {
+  width: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.dataContainer {
+  align-self: stretch;
+  border-top: 1px solid #3d3d49;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 13px 12px 22px;
+  align-items: center;
+  justify-content: space-between;
+}
+.expandedInfoPlayerGames {
+  position: relative;
+  background-color: v-bind(background) !important;
+  width: 100%;
+  /*    min-height: v-bind(height); */
+  display: flex;
+  flex-direction: column;
+  padding: 0px var(--padding-5xsexpand);
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: left;
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+}
+
+@media screen and (max-width: 780px) {
+  .containerButton {
+    width: 100%;
+    margin: 20px 0 0 0;
+  }
+
+  .expandedInfoPlayerGames {
+    /*      max-width: 496px; */
+  }
+}
+@media screen and (max-width: 500px) {
+  .containerButton {
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  .expandedInfoPlayerGames {
+    /*      max-width: 496px; */
+  }
+}
+@media screen and (max-width: 430px) {
+  .manchesterUnited {
+    flex: 1;
+  }
+
+  .manchesterUnited12 {
+    min-width: 117px;
+  }
+
+  .containerInfoGames {
+    gap: 12px;
+    align-items: center;
+    justify-content: center;
+    padding-left: var(--padding-3xsexpand);
+    padding-right: var(--padding-3xsexpand);
+    padding-bottom: 0px;
+    box-sizing: border-box;
+  }
+
+  .containerButton {
+    width: 100%;
+    gap: 10px;
+    padding-top: 16px;
+    padding-bottom: 0px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+
+  .dataContainer {
+    padding: 13px 0px 22px;
+    align-items: center;
+  }
+}
+@media screen and (max-width: 320px) {
+  .containerInfoGames {
+    flex: 1;
+    gap: 5px;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .expandedInfoPlayerGames {
+    width: 320px;
+  }
+}
+@media screen and (max-width: 540px) {
+  .containerButton {
+    padding-top: 0px;
+    box-sizing: border-box;
+  }
+}
+
+.containerDataBg {
+  align-self: stretch;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 12px;
+  max-width: 90%;
+}
+.containerDataSm {
+  align-self: stretch;
+  flex: 1;
+  display: none;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.span {
+  color: v-bind(fontColorValue);
+}
+.manchesterUnited14 {
+  position: relative;
+  letter-spacing: -0.01em;
+  line-height: 19.5px;
+}
+.filter {
+  border-radius: 50px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid #cbee6b;
+  box-sizing: border-box;
+  width: 88px;
+  height: 30px;
+  overflow: hidden;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  padding: 8px var(--padding-xlexpand);
+  align-items: center;
+  justify-content: flex-start;
+  font-size: var(--font-size-3xsexpand);
+  color: var(--color-whiteexpand);
+}
+.verPerfil {
+  position: relative;
+  line-height: 24px;
+}
+.manchesterUnited8 {
+  position: relative;
+  letter-spacing: -0.01em;
+  line-height: 19.5px;
+  opacity: 0;
+}
+.manchesterUnitedParent1 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-5xsexpand);
+}
+.manchesterUnited1 {
+  position: relative;
+  letter-spacing: -0.01em;
+  line-height: 19.5px;
+}
+.manchesterUnitedParent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gap-5xsexpand);
+  font-size: 12px;
+}
+.frameDiv {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-5xsexpand);
+}
+.infoExpanded {
+  align-self: stretch;
+  background-color: v-bind(background);
+  border-top: 1px solid #3a4956;
+  box-sizing: border-box;
+  /*      height: v-bind(height); */
+  font-family: v-bind(fontFamily);
+  display: flex;
+  flex-direction: row;
+  padding: 0px 10px 10px 10px;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  z-index: 3;
+  font-size: 10px;
+  color: v-bind(fontColor);
+}
+@media screen and (max-width: 1232px) {
+  .manchesterUnitedParent1 {
+    gap: var(--gap-9xsexpand);
+  }
+  .frameDiv {
+    gap: var(--gap-9xsexpand);
+  }
+
+  .manchesterUnitedParent {
+    gap: var(--gap-9xsexpand);
+  }
+  .containerDataSm {
+    display: none;
+  }
+}
+@media screen and (max-width: 960px) {
+}
+@media screen and (max-width: 420px) {
+  .infoExpanded {
+    padding-left: var(--padding-xlexpand);
+  }
+  .manchesterUnitedParent1 {
+    max-width: 150px;
+  }
+
+  .frameDiv {
+    max-width: 130px;
+  }
+  .containerDataSm {
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap-0expand);
+  }
+}
+@media screen and (max-width: 320px) {
+  .frameDiv {
+    max-width: 120px;
+  }
+  .manchesterUnitedParent1 {
+    max-width: 160px;
+  }
+
+  .infoExpanded {
+    padding-left: 0px;
+    padding-right: 0px;
+    box-sizing: border-box;
+  }
+}
+@media screen and (max-width: 540px) {
+  .infoExpanded {
+    flex: 1;
+    flex-direction: column;
+    gap: var(--gap-0expand);
+    align-items: center;
+    justify-content: center;
+    padding-left: 0px;
+    padding-right: var(--padding-xlexpand);
+    box-sizing: border-box;
+    min-height: 172px;
+  }
+  .containerDataSm {
+    align-self: stretch;
+    width: auto;
+    height: auto;
+    gap: var(--gap-0expand);
+    flex: unset;
+  }
+  .containerDataBg {
+    display: none;
+    flex: unset;
+    align-self: stretch;
+  }
+}
+@media screen and (max-width: 460px) {
+  .containerDataSm {
+    gap: var(--gap-xsexpand);
+  }
+
+  .infoExpanded {
+    gap: var(--gap-baseexpand);
+    padding-left: 59px;
+    box-sizing: border-box;
+  }
+}
+@media screen and (max-width: 680px) {
+  .infoExpanded {
+    gap: var(--gap-0expand);
+    padding-left: 32px;
+    box-sizing: border-box;
+  }
+}
+@media screen and (max-width: 350px) {
+  .containerDataBg {
+    display: none;
+  }
+  .containerDataSm {
+    max-width: 340px;
+    margin: 0 10px;
+  }
+
+  .infoExpanded {
+    align-self: stretch;
+    width: auto;
+    align-items: center;
+    justify-content: center;
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    box-sizing: border-box;
+  }
+}
+@media screen and (max-width: 1086px) {
+  .containerDataSm {
+    display: none;
+  }
+}
+@media screen and (max-width: 770px) {
+  .containerDataSm {
+    display: flex;
+    align-items: flex-start;
+    padding-top: 20px;
+    text-align: left;
+  }
+
+  .containerDataBg {
+    display: none;
+  }
+
+  .infoExpanded {
+    height: auto;
+    gap: 10px;
+    box-sizing: border-box;
+    flex-direction: column;
+    margin-bottom: 10px;
+  }
+}
+
+.countryFlag {
+  display: inline-block;
+  height: 10px;
+  margin-left: 5px;
+  position: relative;
+  top: 1px;
+}
+
+.countryFlag img {
+  height: 100%;
+}
+</style>