added animated refresh button for tracked players

src/views/Player.vue

@@ -98,6 +98,9 @@
                 </form>
               </div>
             </div>
+            <div v-if="data.tracked" class="refresh-btn" title="Refresh Match-List" @click="RefreshData">
+              <i class="fas fa-sync"></i>
+            </div>
           </div>
         </div>
       </div>
@@ -138,9 +141,9 @@
               <td class="td-rank text-center">
                 <img
                     :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="match.stats.rank?.new > match.stats.rank?.old ? 'uprank' : match.stats.rank?.new < match.stats.rank?.old ? 'downrank' : ''"
                     class="rank-icon">
               </td>
               <td class="td-length text-center">
@@ -346,6 +349,17 @@ export default {
       }
     }
 
+    const RefreshData = async () => {
+      const refreshButton = document.querySelector('.refresh-btn')
+      refreshButton.classList.add('animate')
+
+      refreshButton.addEventListener('animationend', ()=> {
+        refreshButton.classList.remove('animate')
+      })
+
+      await GetPlayer()
+    }
+
     const TrackPlayer = async () => {
       if (data.userData.authcode !== '') {
         [data.statusErrorCode, data.statusError] = await TrackMe(store.state.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
@@ -390,6 +404,7 @@ export default {
       store,
       props,
       TrackPlayer,
+      RefreshData,
       TrackMe,
       GetWinLoss,
       FormatDate,
@@ -422,11 +437,43 @@ export default {
   min-width: 100%;
   min-height: 100%;
 
-  .trackme-btn {
+  .trackme-btn,
+  .refresh-btn {
     position: absolute;
     right: 0;
     bottom: 0;
   }
+
+  .refresh-btn {
+    cursor: pointer;
+
+    &:hover .fas {
+      color: var(--bs-warning);
+    }
+
+    .fas {
+      font-size: 1.3rem;
+    }
+
+    &.animate {
+      animation: refresh 2s 3 forwards;
+    }
+  }
+
+  @keyframes refresh {
+    0% {
+      transform: rotate(0deg) scale(1);
+    }
+    10% {
+      transform: rotate(-15deg) scale(1);
+    }
+    50% {
+      transform: rotate(180deg) scale(1.4);
+    }
+    100% {
+      transform: rotate(360deg) scale(1);
+    }
+  };
 }
 
 .card {
@@ -598,6 +645,7 @@ table {
         border: 1px solid greenyellow;
         border-radius: 5px;
       }
+
       .downrank {
         box-shadow: 0 0 20px #ff2f2f;
         border: 1px solid #ff2f2f;
@@ -647,7 +695,8 @@ table {
       width: 75px !important;
     }
   }
-  .trackme-btn {
+  .trackme-btn,
+  .refresh-btn {
     top: 25px;
   }