some more refactoring

2021-10-17 18:06:28 +02:00
parent 6ffd7685ab
commit 123f78cb21
5 changed files with 364 additions and 167 deletions
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,9 +4,22 @@ export default createStore({
  state: {
    id64: '',
    vanityUrl: '',
-    matchDetails: {}
+    matchDetails: {},
+    playerDetails: {}
  },
  mutations: {
+    changeId64(state, payload) {
+      state.id64 = payload.id
+    },
+    changeVanityUrl(state, payload) {
+      state.vanityUrl = payload.id
+    },
+    changeMatchDetails(state, payload) {
+      state.matchDetails = payload.data
+    },
+    changePlayerDetails(state, payload) {
+      state.playerDetails = payload.data
+    },
  },
  actions: {
  },
--- a/src/utils/Utils.js
+++ b/src/utils/Utils.js
@@ -45,3 +45,24 @@ export const getPlayerArr = (stats, team, color) => {
  return arr
 }

+export const constructAvatarUrl = (hash, size) => {
+  const base = 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars'
+  const imgSize = size ? `_${size}` : ''
+  const hashDir = hash.substring(0, 2)
+
+  return `${base}/${hashDir}/${hash}${imgSize}.jpg`
+}
+
+export const GetAvgRank = (stats) => {
+  let count = 0
+  let fullRank = 0
+
+  stats.map(player => {
+    if (player.rank?.old) {
+      fullRank += player.rank?.old
+      count += 1
+    }
+  })
+
+  return count === 0 ? 0 : Math.floor(fullRank / count)
+}
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -4,7 +4,7 @@ import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
 import {DisplayRank, LoadImage} from "./Display";
 import {GetUser, TrackMe} from "./ApiRequests";
-import {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr} from "./Utils";
+import {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank} from "./Utils";

 export {
  FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
@@ -13,5 +13,5 @@ export {
  GetHLTV_1,
  DisplayRank, LoadImage,
  GetUser, TrackMe,
-  setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr
+  setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank
 }
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -79,9 +79,9 @@
 </template>

 <script>
-import {onBeforeMount, onMounted, reactive, watch} from "vue";
+import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import axios from 'axios'
-import {DisplayRank, FormatFullDate, GetHLTV_1, GoToLink, GoToPlayer, LoadImage} from "../utils";
+import {DisplayRank, FormatFullDate, GetAvgRank, GoToLink, LoadImage} from "../utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'

@@ -92,7 +92,7 @@ export default {
    const store = useStore()
    const route = useRoute()

-    store.state.matchDetails = {}
+    const matchIdPattern = /^\d{19}$/

    // Refs
    const data = reactive({
@@ -105,56 +105,57 @@ export default {

    // Functions
    const GetMatch = () => {
+      if (matchIdPattern.test(props.match_id))
        axios
            .get(`${process.env.VUE_APP_API_URL}/match/${props.match_id}`)
            .then((response) => {
              document.title = `${response.data.map} | csgoWTF`
-            data.matchDetails = response.data
-            data.stats = response.data.stats
-            data.score = response.data.score
+              store.commit({
+                type: 'changeMatchDetails',
+                data: response.data
+              })

-            store.state.matchDetails = response.data
+              data.matchDetails = store.state.matchDetails
+              data.stats = data.matchDetails.stats
+              data.score = data.matchDetails.score

              LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')

-            console.log(response.data)
+              GetAvgRank(data.stats)
+
+              console.log(data.matchDetails)
            })
            .catch((e) => {
              console.log(e)
+              // TODO: needs 404
            })
+      else {
+        console.log('Match not found')
+        // TODO: needs 404
      }
-
-    const GetAvgRank = () => {
-      let count = 0
-      let fullRank = 0
-
-      data.stats?.map(player => {
-        if (player.rank?.old) {
-          fullRank += player.rank?.old
-          count += 1
-        }
-      })
-
-      if (count === 0)
-        data.avgRank = 0
-      else
-        data.avgRank = Math.floor(fullRank / count)
    }

    const checkRoute = () => {
      if (route.fullPath.split('/')[3]) {
        const sub = route.fullPath.split('/')[3]
+        if (matchIdPattern.test(props.match_id))
          GoToLink(`/match/${props.match_id}/${sub}`)
+        else {
+          console.log('Match not found')
+          // TODO: needs 404
+        }
      } else if (route.fullPath.split('/')[3] === undefined) {
-        // setTimeout(() => {
+        if (matchIdPattern.test(props.match_id))
          GoToLink(`/match/${props.match_id}/overview`)
-        // }, 200)
+        else {
+          console.log('Match not found')
+          // TODO: needs 404
+        }
      }
    }

    // Watchers
    watch(() => props.match_id, GetMatch)
-    watch(() => data.stats, GetAvgRank)

    // Run on create
    onBeforeMount(() => {
@@ -165,8 +166,15 @@ export default {
      checkRoute()
    })

+    onBeforeUnmount(() => {
+      store.commit({
+        type: 'changeMatchDetails',
+        data: {}
+      })
+    })
+
    return {
-      GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
+      data, DisplayRank, FormatFullDate
    }
  }
 }
@@ -241,6 +249,9 @@ export default {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
+
+  padding-left: 70px;
+
  z-index: 1;
  height: 100%;
  width: 100%;
@@ -252,4 +263,11 @@ export default {
      rgba(0, 0, 0, .6) 100%
  );
 }
+
+@media screen and (max-width: 991px) {
+  #scoreWrapper {
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+}
 </style>
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -6,10 +6,16 @@
        <div class="row g-0">
          <div class="img-container col-md-2 pt-3">
            <img
-                :class="data.tracked ? 'tracked' : ''" :src="data.playerDetails.avatar"
+                :class="data.tracked ? 'tracked' : ''" :src="store.state.playerDetails.avatar"
                :title="data.tracked ? 'Tracked' : ''"
                alt="Player avatar"
                class="img-fluid avatar">
+            <!--            <img-->
+            <!--                :class="data.tracked ? 'tracked' : ''"-->
+            <!--                :src="constructAvatarUrl(store.state.playerDetails.avatar, 'full')"-->
+            <!--                :title="data.tracked ? 'Tracked' : ''"-->
+            <!--                alt="Player avatar"-->
+            <!--                class="img-fluid avatar">-->
          </div>
          <div class="col-md-8 d-flex">
            <div class="card-body">
@@ -18,7 +24,7 @@
                  class="text-decoration-none text-white"
                  target="_blank"
                  title="Open steam profile">{{
-                  data.playerDetails.name
+                  store.state.playerDetails.name
                }}
                <i class="fas fa-link"></i>
              </a></h3>
@@ -100,7 +106,8 @@
          </div>
        </div>
      </div>
-      <div class="matches m-auto">
+      <div class="match-container">
+        <div class="matches">
          <table v-if="data.matches" class="table table-borderless">
            <thead class="border-bottom">
            <tr>
@@ -196,12 +203,55 @@
          </table>
          <h5 v-else>No matches on record</h5>
        </div>
+        <div class="side-info">
+          <div class="side-info-box best-mate">
+            <div class="heading">
+              <h5>Best Mate</h5>
+            </div>
+            <hr>
+            <ul class="list-unstyled">
+              <li>Mate 1</li>
+              <li>Mate 2</li>
+              <li>Mate 3</li>
+              <li>Mate 4</li>
+              <li>Mate 5</li>
+            </ul>
+          </div>
+          <div class="side-info-box best-mate">
+            <div class="heading">
+              <h5>Most played with</h5>
+            </div>
+            <hr>
+            <ul class="list-unstyled">
+              <li>Player 1</li>
+              <li>Player 2</li>
+              <li>Player 3</li>
+              <li>Player 4</li>
+              <li>Player 5</li>
+            </ul>
+          </div>
+          <div class="side-info-box best-mate">
+            <div class="heading">
+              <h5>Preferred Weapons</h5>
+            </div>
+            <hr>
+            <ul class="list-unstyled">
+              <li>Weapon 1</li>
+              <li>Weapon 2</li>
+              <li>Weapon 3</li>
+              <li>Weapon 4</li>
+              <li>Weapon 5</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
    </div>
  </div>
 </template>

 <script>
-import {onMounted, reactive, watch} from "vue";
+import {onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import {useStore} from "vuex";
 import {
  DisplayRank,
@@ -215,7 +265,8 @@ import {
  GoToLink,
  GoToMatch,
  LoadImage,
-  SaveLastVisitedToLocalStorage, setTitle,
+  SaveLastVisitedToLocalStorage,
+  setTitle,
  TrackMe
 } from "../utils";

@@ -231,7 +282,6 @@ export default {
        authcode: '',
        sharecode: ''
      },
-      playerDetails: {},
      tracked: false,
      matches: [],
      statusError: '',
@@ -243,43 +293,63 @@ export default {
      }
    })

-    const GetPlayer = async () => {
-      if (props.id) {
-        const [res, resData] = await GetUser(props.id)
+    const SetPlayerData = () => {
+      data.tracked = store.state.playerDetails.tracked
+      data.matches = store.state.playerDetails.matches
+      data.match_stats.loss = store.state.playerDetails.match_stats.loss || 0
+      data.match_stats.win = store.state.playerDetails.match_stats.win || 0
+      data.match_stats.tie = store.state.playerDetails.match_stats.tie || 0

-        if (res === 200 && resData) {
-          data.playerDetails = resData
-          data.tracked = resData.tracked
-          data.matches = data.playerDetails.matches
-          data.match_stats.loss = data.playerDetails.match_stats.loss || 0
-          data.match_stats.win = data.playerDetails.match_stats.win || 0
-          data.match_stats.tie = data.playerDetails.match_stats.tie || 0
+      store.commit({
+        type: 'changeId64',
+        id: store.state.playerDetails.steamid64
+      })
+      store.commit({
+        type: 'changeVanityUrl',
+        id: store.state.playerDetails.vanity_url || ''
+      })

      if (data.matches)
        LoadImage(data.matches[0].map ? data.matches[0].map : 'random')

      let player = {
-            'steamid64': data.playerDetails.steamid64,
-            'vanity_url': data.playerDetails.vanity_url || '',
-            'name': data.playerDetails.name,
-            'avatar': data.playerDetails.avatar
+        'steamid64': store.state.playerDetails.steamid64,
+        'vanity_url': store.state.playerDetails.vanity_url || '',
+        'name': store.state.playerDetails.name,
+        'avatar': store.state.playerDetails.avatar
+        // 'avatar': constructAvatarUrl(store.state.playerDetails.avatar, 'medium')
      }
      SaveLastVisitedToLocalStorage(player)

-          setTitle(data.playerDetails.name)
+      setTitle(store.state.playerDetails.name)
+    }

-          console.log(data.playerDetails)
+    const GetPlayer = async () => {
+      if (props.id) {
+        const [res, resData] = await GetUser(props.id)
+
+        if (res === 200 && resData) {
+          store.commit({
+            type: 'changePlayerDetails',
+            data: resData
+          })
+
+          SetPlayerData()
+
+          console.log(store.state.playerDetails)
        } else {
          GoToLink('/')
+          // TODO: needs 404
        }
      } else {
        GoToLink('/')
+        // TODO: needs 404
      }
    }

    const TrackPlayer = async () => {
      if (data.userData.authcode !== '') {
-        [data.statusErrorCode, data.statusError] = await TrackMe(data.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
+        [data.statusErrorCode, data.statusError] = await TrackMe(store.state.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)

        if (data.statusErrorCode === 202) {
          data.statusErrorCode = 0
@@ -298,11 +368,22 @@ export default {

    onMounted(() => {
          setTimeout(() => {
+            if (Object.entries(store.state.playerDetails).length === 0) {
              GetPlayer()
+            } else {
+              SetPlayerData()
+            }
          }, 200)
        }
    )

+    onBeforeUnmount(() => {
+      store.commit({
+        type: 'changePlayerDetails',
+        data: {}
+      })
+    })
+
    return {
      data,
      store,
@@ -406,6 +487,59 @@ export default {
  }
 }

+.match-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+
+  .matches {
+    width: 75%;
+  }
+
+  .side-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    width: 25%;
+    height: auto;
+    margin-top: 30px;
+
+    .side-info-box {
+      width: 100%;
+      height: auto;
+      background: rgba(20, 20, 20, .8);
+      border: 1px solid rgba(white, .3);
+      border-radius: 5px;
+    }
+
+    .best-mate {
+      .heading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        height: 40px;
+
+        h5 {
+          margin: 0;
+          padding: 0;
+        }
+      }
+
+      hr {
+        margin: 0;
+        border-color: rgba(white, .3);
+      }
+
+      ul {
+        padding: 10px;
+      }
+    }
+  }
+}
+
 table {
  margin-bottom: 0;

@@ -490,21 +624,10 @@ table {
 }

@media screen and (max-width: 768px) {
-  .win {
-    background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
-  }
-
-  .loss {
-    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
-  }
-
-  .draw {
-    background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
-  }
  .card {
    .avatar {
-      height: 75px;
-      width: 75px;
+      height: 75px !important;
+      width: 75px !important;
    }
  }
  .trackme-btn {
@@ -550,4 +673,26 @@ table {
    display: none;
  }
 }
+
+@media screen and (max-width: 991px) {
+  .matches {
+    width: 100% !important;
+  }
+  .side-info {
+    display: none !important;
+  }
+  .avatar {
+    width: 100px !important;
+    height: 100px !important;
+  }
+  .trackme-btn {
+    top: 25px;
+  }
+}
+
+@media screen and (max-width: 1199px) {
+  .td-plus, .kdiff {
+    display: none;
+  }
+}
 </style>