updated frontend from typescript to javascript

2021-10-05 00:16:20 +02:00
parent 27edfd0cfe
commit 886f182ff2
41 changed files with 1183 additions and 28 deletions
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="pt-3">
+    <p class="text-center fs-6">Average Rank: <img :src="require('@/images/ranks/' + data.avgRank + '.png')"
+                                                   alt="Rank icon"
+                                                   class="rank-icon mx-2"/></p>
+    <div v-if="data.matchDetails" class="head row m-auto mb-3 text-center">
+      <div class="m-auto">
+        <img :alt="data.matchDetails.map"
+             :src="mapImg.includes(data.matchDetails.map) ? require('@/images/maps/' + data.matchDetails.map + '.png') : require('@/images/maps/not_found.png')"
+             :title="data.matchDetails.map" class="map-icon">
+      </div>
+    </div>
+  </div>
+  <div class="nav">
+    <ul class="list-unstyled d-flex m-auto">
+      <li class="list-item active">Scoreboard</li>
+      <li class="list-item">Rounds</li>
+      <li class="list-item">Weapons</li>
+      <li class="list-item">Duels</li>
+      <li class="list-item">Heatmaps</li>
+    </ul>
+  </div>
+  <div class="container row m-auto">
+    <div class="score col-3 flex-column">
+      {{data.score[0]}}
+      -
+      {{data.score[1]}}
+    </div>
+    <div v-if="data.score.length === 2 && data.stats" class="col-9 d-flex flex-column">
+      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="1"/>
+      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="2"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue";
+import axios from 'axios'
+import {GetHLTV_1, GoToPlayer} from "../utils";
+import "../components/ScoreTeam"
+
+const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))
+
+export default {
+  name: 'Match',
+  props: ['match_id'],
+  components: {ScoreTeam},
+  setup(props) {
+    // Vars
+    const mapImg = ['de_inferno', 'de_mirage', 'de_overpass']
+
+    // Refs
+    const data = reactive({
+      playerName: '',
+      matchDetails: {},
+      stats: [],
+      score: [0],
+      avgRank: 0,
+    })
+
+    // Functions
+    const GetMatch = () => {
+      axios
+          .get(`http://localhost:1337/http://localhost:8000/match/${props.match_id}`)
+          .then((response) => {
+            document.title = `${response.data.map} | CSGO-W.TF`
+            data.matchDetails = response.data
+            data.stats = response.data.stats
+            data.score = response.data.score
+          })
+          .catch((e) => {
+            console.log(e)
+          })
+    }
+
+    const GetAvgRank = () => {
+      let count = 0
+      let fullRank = 0
+
+      data.stats?.map(player => {
+        if (player.extended?.rank?.old) {
+          fullRank += player.extended?.rank?.old
+          count += 1
+        }
+      })
+
+      if (count === 0)
+        data.avgRank = 0
+      else
+        data.avgRank = Math.floor(fullRank / count)
+    }
+
+    // Watchers
+    watch(() => props.match_id, GetMatch)
+    watch(() => data.stats, GetAvgRank)
+
+    // Run on create
+    onBeforeMount(() => {
+      GetMatch()
+    })
+
+    return {
+      GetMatch, GetAvgRank, data, mapImg, GoToPlayer, GetHLTV_1
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.rank-icon {
+  max-width: 50px;
+}
+
+.map-icon {
+  max-width: 60px;
+}
+
+.score {
+  font-size: 3.5rem;
+}
+
+table {
+  width: 900px;
+  text-align: center;
+
+  tr {
+    height: 50px;
+  }
+
+  td {
+    padding: 5px 10px;
+  }
+
+  .cursor__help {
+    cursor: help;
+  }
+
+  .player__avatar {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+  }
+
+  .player__name {
+    text-align: left;
+    width: 150px;
+  }
+
+  .player__rank {
+    width: 60px;
+  }
+
+  .player__rating {
+    border-radius: 25% 25%;
+  }
+}
+
+
+.nav {
+  width: 100vw;
+  background: rgba(0, 0, 0, 0.6);
+
+  .list-item {
+    padding: 10px 10px;
+
+    &:hover {
+      background: var(--bs-info);
+      cursor: pointer;
+    }
+
+  }
+
+  .active {
+    background: var(--bs-info)
+  }
+}
+</style>