Fix: added missing files from last commit

src/static/js/synced-timer.js

@@ -0,0 +1,154 @@
+document.addEventListener('alpine:init' , () => {
+    console.log("Synced-timer is starting")
+
+    Alpine.store("siteData", {
+        lastResponse: null,
+        currentData:  null,
+        time: '00:00:00',
+        header: '...',
+
+        requestStartedAt: null,
+        requestEndedAt: null,
+        timeOffsetToServer: null,
+
+        init() {
+            Alpine.effect(() => {
+                const response = this.lastResponse
+                if(!response) return;
+    
+                if(response.status !== 200) {
+                    this.header = `Error: ${response.status}`
+                    return;
+                }
+                
+                this.currentData = response.data
+                Alpine.store("audioPlayback").isDisabledByServer = !this.currentData.soundEnabled
+                this.header = this.currentData.header
+            })
+
+            setInterval(() => {
+                if(!this.currentData) return;
+
+                const passedSeconds = parseInt(((Date.now()-this.timeOffsetToServer) / 1000) - this.currentData.startedAt);
+                let remaningSeconds;
+                if(this.currentData.repeatEnabled) {
+                    remaningSeconds = parseInt(this.currentData.time * 60 - (passedSeconds % (this.currentData.time * 60)));
+                }
+                else {
+                    remaningSeconds = parseInt(this.currentData.time * 60 - passedSeconds);
+                }
+                this.time = getTimerText(remaningSeconds);
+                playTimerSound(remaningSeconds);
+            }, 100)
+
+            setInterval(() => {
+                this.requestStartedAt = Date.now();
+                fetch(`/api/${username}`)
+                .then((response) => {
+                    this.requestEndedAt = Date.now()
+                    return response.json()
+                })
+                .then((data) => {
+                    if(data && data.status === 200) {
+                        const requestDuration = this.requestEndedAt - this.requestStartedAt;
+                        this.timeOffsetToServer = this.requestEndedAt - data.data.currentServerTime + (requestDuration / 2);
+                    }
+
+                    this.lastResponse = data
+                });
+            }, 1000)
+        }
+    })
+
+    Alpine.store("audioPlayback", {
+        hasBeenTested: false,
+        isAvailable: null,
+        isDisabledByUser: false,
+        isDisabledByServer: true,
+        audioPlayer: null,
+
+        init() {
+            this.audioPlayer = new Audio('/static/sound/silence.mp3');
+
+            this.testPermission()
+            const audioPlaybackStore = this
+            
+            Alpine.bind('audioPlaybackEnableButton', () => ({
+                '@click'() {
+                    audioPlaybackStore.testPermission()
+                }
+            }))
+
+            Alpine.bind('audioPlaybackDisableButton', () => ({
+                '@click'() {
+                    audioPlaybackStore.isDisabledByUser = true
+                }
+            }))
+
+            Alpine.effect(() => {
+                if(Alpine.store("audioPlayback").isDisabledByUser) this.isAvailable = false;
+            })
+        },
+        
+        testPermission() {
+            this.audioPlayer.src = '/static/sound/silence.mp3';
+            this.audioPlayer.play().then(() => {
+                this.isAvailable = true
+                this.hasBeenTested = true
+            }).catch((error) => {
+                console.warn("Audio permission not granted!")
+                this.isAvailable = false
+                this.hasBeenTested = true
+            })
+        },
+
+        playSound(soundFile) {
+            if(!this.audioPlayer.paused || !this.isAvailable || this.isDisabledByUser || this.isDisabledByServer) {
+                return;
+            }
+            this.audioPlayer.src = soundFile;
+            this.audioPlayer.play();
+        }
+    })
+
+    Alpine.store("fullscreen", {
+        enabled: document.fullscreenElement,
+        toggle() {
+            if (!document.fullscreenElement) {
+                document.documentElement.requestFullscreen();
+                this.enabled = true
+            } else {
+              if (document.exitFullscreen) {
+                document.exitFullscreen();
+              }
+            }
+        }
+    })
+})
+
+document.addEventListener('alpine:initialized', () => {
+
+})
+
+const zeroPad = (num, places) => String(num).padStart(places, '0');
+
+function getTimerText(remaningSeconds) {
+    if (remaningSeconds < 0) {
+        remaningSeconds = 0
+    }
+
+    var remaningHours = zeroPad(parseInt(remaningSeconds / 60 / 60) % (60 * 60), 2)
+    var remaningMinutes = zeroPad(parseInt(remaningSeconds / 60) % 60, 2)
+    var remaningSeconds = zeroPad(remaningSeconds % 60, 2)
+
+    return remaningHours + ":" + remaningMinutes + ":" + remaningSeconds
+}
+
+function playTimerSound(remaningSeconds) {
+    if(parseInt(remaningSeconds) === 5) {
+        Alpine.store("audioPlayback").playSound('/static/sound/countdown.mp3')
+    }
+    else if(parseInt(remaningSeconds) === 60){
+        Alpine.store("audioPlayback").playSound('/static/sound/beep.mp3')
+    } 
+}