refactored code

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.env.production

@@ -1 +0,0 @@
-VUE_APP_API_URL=https://api.csgow.tf

scss/custom.scss

@@ -27,9 +27,9 @@ $success: #609926;
 
 :root {
   // CSGO COLORS
-  --csgo-Orange: #FE9A28;
+  --csgo-orange: #FE9A28;
-  --csgo-Blue: #5BA7FE;
+  --csgo-blue: #5BA7FE;
-  --csgo-Yellow: #F7F52F;
+  --csgo-yellow: #F7F52F;
-  --csgo-Purple: #A01BEF;
+  --csgo-purple: #A01BEF;
-  --csgo-Green: #04B462;
+  --csgo-green: #04B462;
 }

src/components/Nav.vue

@@ -33,6 +33,9 @@
           >
             Search!
           </button>
+          <div v-if="data.error" class="alert alert-warning" role="alert">
+            {{ data.error }}
+          </div>
         </form>
       </div>
 
@@ -44,18 +47,18 @@
 import {reactive} from "vue";
 import {useStore} from 'vuex'
 import {sanitize} from 'string-sanitizer'
-import router from "../router";
+import {GetUser, GoToLink, GoToPlayer} from '../utils'
-import {GoToLink} from '../utils'
 
 export default {
   name: 'Nav',
   setup() {
     const store = useStore()
     const data = reactive({
-      searchInput: ''
+      searchInput: '',
+      error: ''
     })
 
-    const parseSearch = () => {
+    const parseSearch = async () => {
       const input = data.searchInput
       const customUrlPattern = 'https://steamcommunity.com/id/'
       const profileUrlPattern = 'https://steamcommunity.com/profiles/'
@@ -64,30 +67,42 @@ export default {
       store.state.id64 = ''
       store.state.vanityUrl = ''
 
-      if (id64Pattern.test(input)) {
+      if (data.searchInput !== '') {
-        store.state.id64 = input
+        if (id64Pattern.test(input)) {
-      } else if (input.match(customUrlPattern)) {
+          store.state.id64 = input
-        store.state.vanityUrl = sanitize(input.split('/')[4].split('?')[0])
+        } else if (input.match(customUrlPattern)) {
-      } else if (input.match(profileUrlPattern)) {
+          store.state.vanityUrl = sanitize(input.split('/')[4].split('?')[0])
-        const tmp = input.split('/')[4].split('?')[0]
+        } else if (input.match(profileUrlPattern)) {
-        if (id64Pattern.test(tmp)) {
+          const tmp = input.split('/')[4].split('?')[0]
-          store.state.id64 = tmp
+          if (id64Pattern.test(tmp)) {
+            store.state.id64 = tmp
+          }
+        } else {
+          store.state.vanityUrl = sanitize(input)
         }
-      } else {
-        store.state.vanityUrl = sanitize(input)
-      }
 
-      if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
+        if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
-        data.searchInput = ''
+          const [res, resData] = await GetUser(store.state.vanityUrl || store.state.id64)
 
-        if (store.state.id64) {
+          if (res === 200) {
-          router.push(`/player/${store.state.id64}`)
+            data.searchInput = ''
-        } else if (store.state.vanityUrl) {
+            document.activeElement.blur()
-          router.push(`/player/${store.state.vanityUrl}`)
+
+            if (resData.vanity_url) {
+              GoToPlayer(resData.vanity_url)
+            } else if (resData.steamid64) {
+              GoToPlayer(resData.steamid64)
+            }
+          } else if (res === 404) {
+            data.searchInput = ''
+            data.error = `${resData} - Try again`
+
+            setTimeout(() => {
+              data.error = ''
+            }, 5000)
+          }
         }
       }
-
-      document.activeElement.blur()
     }
 
     return {
@@ -111,10 +126,15 @@ nav {
     li {
       font-size: 1.5rem;
       font-weight: lighter;
-      margin: 22px 10px 0 10px;
+      margin: 22px 0 0 10px;
       cursor: pointer;
       transition: 100ms ease-in-out;
 
+      .text-up {
+        font-size: 40%;
+        vertical-align: top;
+      }
+
       &:first-child {
         font-size: 2rem;
         font-weight: bold;
@@ -122,41 +142,46 @@ nav {
         margin-left: 0;
       }
 
-      &:hover {
+      &:hover router-link {
         color: var(--bs-info);
         transition: 100ms ease-in-out;
       }
     }
   }
 
-  .text-up {
+  form {
-    font-size: 40%;
+    position: relative;
-    vertical-align: top;
-  }
 
-  svg {
+    svg {
-    width: 24px;
+      width: 24px;
-    height: 24px;
+      height: 24px;
-    fill: currentColor;
+      fill: currentColor;
-  }
-
-  label {
-    padding-top: 6px;
-    font-size: 1.4rem;
-  }
-
-  input[type="search"] {
-    min-width: 300px;
-    max-width: 300px;
-
-    &:focus {
-      box-shadow: 0 4px 2px -2px rgba(95, 120, 146, 0.59);
-      transition: .2s ease-in-out;
-      transform: scale(.975);
     }
 
-    &::placeholder {
+    label {
-      color: #aaa;
+      padding-top: 6px;
+      font-size: 1.4rem;
+    }
+
+    input[type="search"] {
+      min-width: 300px;
+      max-width: 300px;
+
+      &:focus {
+        box-shadow: 0 4px 2px -2px rgba(95, 120, 146, 0.59);
+        transition: .2s ease-in-out;
+        transform: scale(.975);
+      }
+
+      &::placeholder {
+        color: #aaa;
+      }
+    }
+
+    .alert {
+      position: absolute;
+      right: 0;
+      top: 55px;
     }
   }
 }
@@ -179,7 +204,6 @@ nav {
     }
 
     #mainNav {
-
       ul {
         display: flex;
         flex-direction: column;
@@ -225,4 +249,4 @@ nav {
     }
   }
 }
-</style>
+</style>

src/components/ScoreTeamPlayer.vue

@@ -161,7 +161,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.team-color-Blue, .team-color-Orange, .team-color-Green, .team-color-Purple, .team-color-Yellow {
+.team-color-Blue,
+.team-color-Orange,
+.team-color-Green,
+.team-color-Purple,
+.team-color-Yellow {
   outline: 3px solid;
 }
 .team-color-Orange {
@@ -227,4 +231,4 @@ export default {
 .player__rating {
   border-radius: 25% 25%;
 }
-</style>
+</style>

src/router/index.js

@@ -16,12 +16,6 @@ const routes = [
     component: lazyLoad('Player'),
     props: true
   },
-  {
-    path: '/player/:id/matches',
-    name: 'MyMatches',
-    component: lazyLoad('MyMatches'),
-    props: true
-  },
   {
     path: '/match/:match_id',
     name: 'Match',

src/store/index.js

@@ -3,7 +3,7 @@ import { createStore } from 'vuex'
 export default createStore({
   state: {
     id64: '',
-    vanityUrl: ''
+    vanityUrl: '',
   },
   mutations: {
   },

src/utils/ApiRequests.js

@@ -0,0 +1,19 @@
+import axios from "axios";
+
+export const GetUser = async (id) => {
+  try {
+    const res = await axios.get(`${process.env.VUE_APP_API_URL}/player/${id}`)
+
+    if (res.status === 200) {
+      return [200, res.data]
+    }
+  } catch (err) {
+    if (err.response) {
+      if (err.response.status === 404) {
+        return [404, 'Player not found']
+      }
+    } else {
+      console.log(err.response)
+    }
+  }
+}

src/utils/Display.js

@@ -28,7 +28,9 @@ export const LoadImage = (mapName) => {
     let background = document.querySelector('.bg-img')
 
     img.onload = function() {
+      if (background) {
         background.src = img.src
+      }
     }
 
     img.onerror = function () {

src/utils/GoTo.js

@@ -1,13 +1,13 @@
 import router from "../router";
 
 export const GoToMatch = (id) => {
-    router.push(`/match/${id}`)
+    router.push({name: 'Match', params: {match_id: id}})
 }
 
 export const GoToPlayer = (id) => {
-    router.push(`/player/${id}`)
+    router.push({name: 'Player', params: {id: id}})
 }
 
 export const GoToLink = (link) => {
     router.push(`${link}`)
-}
+}

src/utils/Utils.js

@@ -0,0 +1,52 @@
+import axios from "axios";
+
+export const GetWinLoss = (matchResult, teamId) => {
+  if (matchResult === teamId) {
+    return 'win'
+  } else if (matchResult === 0) {
+    return 'draw'
+  } else {
+    return 'loss'
+  }
+}
+
+export const TrackMe = async (id64, authcode, sharecode) => {
+  let statusError = ''
+  let status = 200
+
+  const shareCodeRegex = /^CSGO(?:-?[ABCDEFGHJKLMNOPQRSTUVWXYZabcdefhijkmnopqrstuvwxyz23456789]{5}){5}$/
+  const authCodeRegex = /^[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{4}-[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{5}-[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{4}$/
+
+  if (!shareCodeRegex.test(sharecode)) {
+    statusError = 'Is not a valid sharecode'
+    status = 418
+    return [status, statusError]
+  }
+  if (!authCodeRegex.test(authcode)) {
+    statusError = 'Is not a valid authcode'
+    status = 418
+    return [status, statusError]
+  }
+
+  try {
+    const res = await axios
+      .post(`${process.env.VUE_APP_API_URL}/player/trackme`, `id=${id64}&authcode=${authcode}&sharecode=${sharecode}`)
+
+    if (res.status === 202) {
+      statusError = 'Hurray!! Your Matches will now be tracked!'
+      status = res.status
+    }
+  } catch (err) {
+    if (err.response.status === 401) {
+      statusError = 'Data does not match player'
+      status = err.response.status
+    } else if (err.response.status === 400) {
+      statusError = 'Userinput was wrong'
+      status = err.response.status
+    } else {
+      console.log(`${err.response.status}: ${err.response.statusText}`)
+    }
+  }
+
+  return [status, statusError]
+}

src/utils/index.js

@@ -1,13 +1,17 @@
 import {FormatDate, FormatDuration, FormatFullDate, FormatFullDuration} from "./DateTime";
-import {GoToMatch, GoToPlayer, GoToLink} from "./GoTo";
+import {GoToLink, GoToMatch, GoToPlayer} from "./GoTo";
 import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
 import {DisplayRank, LoadImage} from "./Display";
+import {GetUser} from "./ApiRequests";
+import {GetWinLoss, TrackMe} from "./Utils";
 
 export {
-    FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
+  FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
-    GoToMatch, GoToPlayer, GoToLink,
+  GoToMatch, GoToPlayer, GoToLink,
-    SaveLastVisitedToLocalStorage,
+  SaveLastVisitedToLocalStorage,
-    GetHLTV_1,
+  GetHLTV_1,
-    DisplayRank, LoadImage
+  DisplayRank, LoadImage,
-}
+  GetUser,
+  GetWinLoss, TrackMe
+}

src/views/MyMatches.vue

@@ -1,12 +0,0 @@
-<template>
-  <table class="matches-table">
-    MyMatches
-  </table>
-</template>
-
-<script>
-
-export default{
-  name: "MyMatches",
-}
-</script>

src/views/Player.vue

@@ -44,6 +44,17 @@
                   </td>
                 </tr>
               </table>
+              <div v-if="data.statusErrorCode === 200" class="alert alert-success" role="alert">
+                {{ data.statusError }}
+              </div>
+              <div v-if="data.statusErrorCode === 418" class="alert alert-warning" role="alert">
+                {{ data.statusError }}
+              </div>
+              <div v-if="data.statusErrorCode !== 0 && data.statusErrorCode !== 200 && data.statusErrorCode !== 418"
+                   class="alert alert-danger"
+                   role="alert">
+                {{ data.statusError }}
+              </div>
             </div>
             <div v-if="!data.playerDetails.tracked" class="dropdown trackme-btn">
               <button
@@ -79,7 +90,8 @@
                   </div>
 
                   <!-- Submit button -->
-                  <button class="btn btn-outline-warning border-2" type="submit" @click.prevent="TrackMe">
+                  <button class="btn btn-outline-warning border-2" type="submit"
+                          @click.prevent="TrackPlayer">
                     TrackMe
                   </button>
                 </form>
@@ -189,8 +201,8 @@
 </template>
 
 <script>
-import {onBeforeMount, reactive, watch} from "vue";
+import {onMounted, reactive} from "vue";
-import axios from "axios";
+import router from "../router";
 import {useStore} from "vuex";
 import {
   DisplayRank,
@@ -198,16 +210,21 @@ import {
   FormatDuration,
   FormatFullDate,
   FormatFullDuration,
-  GetHLTV_1, GoToLink,
+  GetHLTV_1,
+  GetUser,
+  GetWinLoss,
+  GoToLink,
   GoToMatch,
   LoadImage,
-  SaveLastVisitedToLocalStorage
+  SaveLastVisitedToLocalStorage,
+  TrackMe
 } from "../utils";
 
 export default {
   name: 'Player',
   props: ['id'],
   setup(props) {
+    // Variables
     const store = useStore()
 
     const data = reactive({
@@ -216,8 +233,10 @@ export default {
         sharecode: ''
       },
       playerDetails: {},
+      tracked: false,
       matches: [],
       statusError: '',
+      statusErrorCode: 0,
       match_stats: {
         loss: 0,
         win: 0,
@@ -225,83 +244,62 @@ export default {
       }
     })
 
-    // Functions
+    const GetPlayer = async () => {
-    const TrackMe = async () => {
+      if (router.currentRoute.value.params.id) {
-      const shareCodeRegex = /^CSGO(?:-?[ABCDEFGHJKLMNOPQRSTUVWXYZabcdefhijkmnopqrstuvwxyz23456789]{5}){5}$/
+        const [res, resData] = await GetUser(router.currentRoute.value.params.id)
-      const authCodeRegex = /^[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{4}-[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{5}-[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{4}$/
 
-      if (!shareCodeRegex.test(data.userData.sharecode))
+        if (res === 200 && resData) {
-        data.statusError = 'Is not a valid sharecode'
+          data.playerDetails = resData
-      if (!authCodeRegex.test(data.userData.authcode))
+          data.tracked = resData.tracked
-        data.statusError = 'Is not a valid authcode'
+          data.matches = data.playerDetails.matches
-
+          data.match_stats.loss = data.playerDetails.match_stats.loss || 0
-      const res = await axios
+          data.match_stats.win = data.playerDetails.match_stats.win || 0
-          .post(`${process.env.VUE_APP_API_URL}/player/trackme`, `id=${store.state.id64}&authcode=${data.userData.authcode}&sharecode=${data.userData.sharecode}`)
+          data.match_stats.tie = data.playerDetails.match_stats.tie || 0
-
-      if (res.status === 401) {
-        data.statusError = 'Data does not match player'
-      } else if (res.status === 400) {
-        data.statusError = 'Userinput was wrong'
-      } else if (res.status === 200) {
-        data.statusError = ''
-      } else {
-        console.log(`${res.status}: ${res.statusText}`)
-      }
-    }
-
-    const GetUser = () => {
-      axios
-          .get(`${process.env.VUE_APP_API_URL}/player/${props.id}`)
-          .then((response) => {
-            data.playerDetails = response.data
-            data.matches = response.data.matches
-            data.match_stats.loss = response.data.match_stats.loss ? response.data.match_stats.loss : 0
-            data.match_stats.win = response.data.match_stats.win ? response.data.match_stats.win : 0
-            data.match_stats.tie = response.data.match_stats.tie ? response.data.match_stats.tie : 0
-            store.state.id64 = response.data.steamid64
 
+          if (data.matches)
             LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
 
-            // console.log(response.data)
+          let player = {
+            'steamid64': data.playerDetails.steamid64,
+            'vanity_url': data.playerDetails.vanity_url || '',
+            'name': data.playerDetails.name,
+            'avatar': data.playerDetails.avatar
+          }
+          SaveLastVisitedToLocalStorage(player)
 
-            let player = {
+          document.title = `${data.playerDetails.name} | csgoWTF`
-              'steamid64': response.data.steamid64,
-              'name': response.data.name,
-              'avatar': response.data.avatar
-            }
-            SaveLastVisitedToLocalStorage(player)
 
-            document.title = `${response.data.name} | csgoWTF`
+          console.log(data.playerDetails)
-          })
+        }
-          .catch((e) => {
-            if (e.response.status === 404) {
-              GoToLink('/')
-            }
-            // console.log(e.response.status, e.response.statusText);
-          });
-    }
-
-    const GetWinLoss = (matchResult, teamId) => {
-      if (matchResult === teamId) {
-        return 'win'
-      } else if (matchResult === 0) {
-        return 'draw'
       } else {
-        return 'loss'
+        GoToLink('/')
       }
     }
 
-    watch(() => props.id, GetUser)
+    const TrackPlayer = async () => {
+      [data.statusErrorCode, data.statusError] = await TrackMe(data.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
 
-    onBeforeMount(() => {
+      // setTimeout(() => {
-      GetUser()
+      if (data.statusErrorCode === 202) {
-    })
+        data.statusErrorCode = 0
+        data.statusError = ''
+        data.tracked = true
+      }
+      // }, 2000)
+    }
+
+    onMounted(() => {
+          setTimeout(() => {
+            GetPlayer()
+          }, 200)
+        }
+    )
 
     return {
       data,
       store,
       props,
-      GetUser,
+      TrackPlayer,
       TrackMe,
       GetWinLoss,
       FormatDate,
@@ -544,4 +542,4 @@ table {
     display: none;
   }
 }
-</style>
+</style>