@golstats/gsc-top-player 1.0.0

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

@@ -0,0 +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>