Keep track of 'tab/window' shown events to see if game needs reloading

This commit is contained in:
2025-05-20 22:20:10 +02:00
parent d71a35402d
commit 70f6f6546a

View File

@@ -30,7 +30,7 @@ document.addEventListener('alpine:init', () => {
/** Initialise the application after loading */ /** Initialise the application after loading */
await this.getGameID(); await this.getGameID();
setInterval(() => { setInterval(() => {
// Update counter to next game (midnight UTC, fetched from API) every second // Update counter to the next game (midnight UTC, fetched from API) every second
this.countDownTimer(); this.countDownTimer();
}, 1000); }, 1000);
}, },
@@ -58,7 +58,7 @@ document.addEventListener('alpine:init', () => {
/** Handle the newly entered guess */ /** Handle the newly entered guess */
this.guessError = null; this.guessError = null;
/* Normalise on lowercase, and strip whitespace from begin and end, just in case */ /* Normalise on lowercase, and strip whitespace from start and end, just in case */
this.guessValue = this.guessValue.toLowerCase().trim(); this.guessValue = this.guessValue.toLowerCase().trim();
if (this.guessValue === '') { if (this.guessValue === '') {
@@ -132,7 +132,7 @@ document.addEventListener('alpine:init', () => {
this.resultTimeTaken = ''; this.resultTimeTaken = '';
}, },
getFormattedTime(milliseconds) { getFormattedTime(milliseconds) {
/** Nicely format time for 'time played' */ /** Format the time for 'time played' nicely */
if (!Number.isInteger(milliseconds)) { if (!Number.isInteger(milliseconds)) {
return ''; return '';
} }
@@ -195,3 +195,10 @@ document.addEventListener('alpine:init', () => {
/* On AlpineJS completely loaded, do all this */ /* On AlpineJS completely loaded, do all this */
// Alpine.store('alfagok').getGameID(); // Alpine.store('alfagok').getGameID();
// }) // })
document.onvisibilitychange = () => {
if (!document.hidden) {
/* Tab/window is shown again, possibly after a long time, check if game is still current, otherwise re-load */
Alpine.store('alfagok').getGameID();
}
};