YouHaveTrouble/youhavetrouble.github.io
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/youhavetrouble.github.io.git synced 2026-05-12 06:16:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix online status not updating after changing pages

Browse Source
This commit is contained in:
YouHaveTrouble
2024-09-14 16:31:28 +02:00
parent dacb27b7a8
commit 13f8b6b6dc
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+12 -5
View File
@@ -63,13 +63,18 @@ const permalink = Astro?.site?.href ?? '/';
</div> </div>
</BaseLayout> </BaseLayout>
<script lang="ts" client:load> <script>
const status = document.querySelector("#online-status"); let task = -1;
const game = document.querySelector("#online-game");
updateOnlineStatus(); document.addEventListener('astro:page-load', () => {
updateOnlineStatus();
});
async function updateOnlineStatus() { async function updateOnlineStatus() {
clearTimeout(task);
const status = document.querySelector("#online-status");
const game = document.querySelector("#online-game");
if (!status || !game) return;
console.debug("Updating online status..."); console.debug("Updating online status...");
const response = await fetch("https://api.youhavetrouble.me/online"); const response = await fetch("https://api.youhavetrouble.me/online");
const data = await response.json(); const data = await response.json();
@@ -78,7 +83,7 @@ const permalink = Astro?.site?.href ?? '/';
status.textContent = online ? "Online" : "Offline"; status.textContent = online ? "Online" : "Offline";
status.classList.value = online ? "online" : "offline"; status.classList.value = online ? "online" : "offline";
game.textContent = gameName ? `, playing: ${gameName}` : ""; game.textContent = gameName ? `, playing: ${gameName}` : "";
setTimeout(updateOnlineStatus, 10000); setTimeout(updateOnlineStatus, 5000);
} }
</script> </script>
@@ -119,9 +124,11 @@ const permalink = Astro?.site?.href ?? '/';
background-color: #cc8d2e; background-color: #cc8d2e;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
&.online::before { &.online::before {
background-color: #2ecc71; background-color: #2ecc71;
} }
&.offline::before { &.offline::before {
background-color: #e74c3c; background-color: #e74c3c;
} }