diff --git a/src/views/Player.vue b/src/views/Player.vue
index f933a59..61f8a6b 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -98,6 +98,9 @@
+
+
+
@@ -138,9 +141,9 @@
|
@@ -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;
}
|