@golstats/gsc-lineups-reports 1.0.8 → 1.1.0

package/src/components/Lineup2D/LineupField.vue

@@ -1,274 +1,274 @@
-<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="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/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>
+<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="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/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>