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; }