From 4154b988fe8be5bc47383825986feb54be566121 Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Sat, 20 Nov 2021 10:24:32 +0100
Subject: [PATCH] #15 added placeholder to matches

---
 src/components/HitgroupPuppet.vue |  2 +-
 src/components/MatchesTable.vue   | 50 +++++++++++++++----------------
 src/scss/classes.scss             | 11 +++++++
 src/views/Explore.vue             |  4 +--
 src/views/Home.vue                | 19 ++++++------
 5 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/components/HitgroupPuppet.vue b/src/components/HitgroupPuppet.vue
index eb83b7c..d9666f7 100644
--- a/src/components/HitgroupPuppet.vue
+++ b/src/components/HitgroupPuppet.vue
@@ -133,7 +133,7 @@ export default {
         })
       }
 
-      const unique = arr.filter((a, b) => arr.indexOf(a) === b && a < 500)
+      const unique = arr.filter((a, b) => arr.indexOf(a) === b && a < 400)
 
       let arr2 = []
 
diff --git a/src/components/MatchesTable.vue b/src/components/MatchesTable.vue
index d89e1ca..8e1f4eb 100644
--- a/src/components/MatchesTable.vue
+++ b/src/components/MatchesTable.vue
@@ -1,5 +1,10 @@
 <template>
-  <div v-if="data.matches" id="matches">
+  <div v-if="props.matches.length === 0" id="matches-placeholder">
+    <span v-for="i in 20" :key="i" :class="i % 2 === 1 ? 'placeholder-wave' : 'placeholder-wave-alt'"
+          class="placeholder col-12"></span>
+  </div>
+
+  <div v-else id="matches">
     <table class="table table-borderless">
       <thead class="border-bottom">
       <tr>
@@ -19,7 +24,7 @@
       </tr>
       </thead>
       <tbody>
-      <tr v-for="match in data.matches"
+      <tr v-for="match in props.matches"
           :key="match.match_id"
           :class="(match.stats ? GetWinLoss(match.match_result, match.stats.team_id) : '') + (match.vac || match.game_ban ? ' ban' : '')"
           :title="match.vac ? 'VAC-banned player in this game' : match.game_ban ? 'Game-banned player in this game' : ''"
@@ -40,14 +45,14 @@
         </td>
         <td class="td-rank text-center">
           <img v-if="props.explore"
-              :alt="DisplayRank(Math.floor(match.avg_rank || 0))[1]"
-              :src="DisplayRank(Math.floor(match.avg_rank || 0))[0]"
-              :title="DisplayRank(Math.floor(match.avg_rank || 0))[1]" class="rank-icon">
+               :alt="DisplayRank(Math.floor(match.avg_rank || 0))[1]"
+               :src="DisplayRank(Math.floor(match.avg_rank || 0))[0]"
+               :title="DisplayRank(Math.floor(match.avg_rank || 0))[1]" class="rank-icon">
           <img v-else
-              :alt="DisplayRank(match.stats.rank?.new)[1]"
-              :class="match.stats.rank?.new > match.stats.rank?.old ? 'uprank' : match.stats.rank?.new < match.stats.rank?.old ? 'downrank' : ''"
-              :src="DisplayRank(match.stats.rank?.new)[0]"
-              :title="DisplayRank(match.stats.rank?.new)[1]" class="rank-icon">
+               :alt="DisplayRank(match.stats.rank?.new)[1]"
+               :class="match.stats.rank?.new > match.stats.rank?.old ? 'uprank' : match.stats.rank?.new < match.stats.rank?.old ? 'downrank' : ''"
+               :src="DisplayRank(match.stats.rank?.new)[0]"
+               :title="DisplayRank(match.stats.rank?.new)[1]" class="rank-icon">
         </td>
         <td class="td-length text-center">
           <img v-if="match.max_rounds === 30 || !match.max_rounds" alt="Match long"
@@ -69,7 +74,8 @@
           {{ match.stats.deaths ? match.stats.deaths : "0" }}
         </td>
         <td v-if="match.stats"
-            :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'" class="td-plus text-center">
+            :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
+            class="td-plus text-center">
           {{
             (match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
           }}
@@ -82,7 +88,8 @@
                       match.stats.multi_kills?.duo,
                       match.stats.multi_kills?.triple,
                       match.stats.multi_kills?.quad,
-                      match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'" class="td-hltv text-center fw-bold">
+                      match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
+            class="td-hltv text-center fw-bold">
           {{
             GetHLTV_1(
                 match.stats.kills,
@@ -120,7 +127,6 @@ import {
   GoToMatch,
   MatchNotParsedTime
 } from "@/utils";
-import {onMounted, reactive, watch} from "vue";
 
 export default {
   name: "MatchesTable",
@@ -136,21 +142,8 @@ export default {
     }
   },
   setup(props) {
-    const data = reactive({
-      matches: []
-    })
-
-    onMounted(() => {
-      data.matches = props.matches
-    })
-
-    watch(() => props.matches, () => {
-      data.matches = props.matches
-    })
-
     return {
       props,
-      data,
       FormatDate,
       FormatFullDate,
       FormatDuration,
@@ -168,6 +161,13 @@ export default {
 
 <style lang="scss" scoped>
 
+#matches-placeholder {
+  .placeholder {
+    height: 78px;
+    margin: 1px 0;
+  }
+}
+
 table {
   margin-bottom: 0;
 
diff --git a/src/scss/classes.scss b/src/scss/classes.scss
index b4b1d94..b2573ea 100644
--- a/src/scss/classes.scss
+++ b/src/scss/classes.scss
@@ -17,3 +17,14 @@
   border: 1px solid #ff2f2f;
   border-radius: 5px;
 }
+
+.placeholder-wave-alt {
+  mask-image: linear-gradient(130deg, black 55%, rgba(0, 0, 0, (1 - 0.2)) 75%, black 95%);
+  mask-size: 200% 100%;
+  animation: placeholder-wave-alt 2.5s linear infinite;
+}
+@keyframes placeholder-wave-alt {
+  100% {
+    mask-position: -200% 0%;
+  }
+}
diff --git a/src/views/Explore.vue b/src/views/Explore.vue
index 30d4936..9bd784e 100644
--- a/src/views/Explore.vue
+++ b/src/views/Explore.vue
@@ -4,9 +4,9 @@
   <div class="wrapper">
     <div class="container-lg text-center">
       <h3>Recent matches</h3>
-      <MatchesTable v-if="data.matches" :key="data.matches" :explore="true" :matches="data.matches"/>
+      <MatchesTable :key="data.matches" :explore="true" :matches="data.matches"/>
 
-      <div class="load-more text-center">
+      <div v-if="data.matches" class="load-more text-center">
         <button :key="scrollToPos(store.state.scroll_state)" class="btn border-2 btn-outline-info"
                 @click="setMoreMatches">Load More
         </button>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5a68e71..90c9259 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,16 +5,17 @@
       <h3 class="mb-lg-5">Open source CSGO data platform</h3>
     </div>
     <div v-if="recentVisited !== null" class="recent-search mt-5 mb-5 row gap-2 justify-content-center">
-      <div v-for="(player, id) in recentVisited" :key="player.steamid64" class="player-card" tabindex="0" @keyup.enter="GoToPlayer(player.vanity_url || player.steamid64)">
-        <div class="p-2" @click="GoToPlayer(player.vanity_url || player.steamid64)">
-          <div class="col-md-4 m-auto">
-            <img :alt="player.name" :src="player.avatar">
+      <div v-for="(player, id) in recentVisited" :key="player.steamid64" class="player-card" tabindex="0"
+           @keyup.enter="GoToPlayer(player.vanity_url || player.steamid64)">
+          <div class="p-2" @click="GoToPlayer(player.vanity_url || player.steamid64)">
+            <div class="col-md-4 m-auto">
+              <img :alt="player.name" :src="player.avatar">
+            </div>
+            <div class="col-md-8 m-auto">
+              <p>{{ player.name }}</p>
+            </div>
           </div>
-          <div class="col-md-8 m-auto">
-            <p>{{ player.name }}</p>
-          </div>
-        </div>
-        <i class="delete fa fa-times" tabindex="0" @click="removeRecentVisited(id)"></i>
+          <i class="delete fa fa-times" tabindex="0" @click="removeRecentVisited(id)"></i>
       </div>
     </div>
     <hr v-if="recentVisited !== null" class="m-auto text-muted">