Merge pull request #68 from Vauhtijuoksu/feature/synctimer

Sync time with vauhtijuoksu api.

src/lib/StreamData.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+    import {onDestroy, onMount} from 'svelte';
 
     import type { LayoutField } from './models/LayoutConf';
 	import type { ApiClient } from './ApiClient';
     import { gamedata, metadata, playerdata } from "./stores/GameStore";
 	import { donationstore, incentivestore } from './stores/DonationsStore';
+	import { clockoffsetms } from './stores/ConfStore';
 	import Container from './components/Container.svelte';
 
     export let client: ApiClient;
     export let contents: LayoutField[] = [];
-    export let updateFreq = 1000;
+    export let metaUpdateFreq = 500;
+    export let gameUpdateFreq = 1000;
     export let donoUpdateFreq = 5000;
+    export let syncFreq = 1000 * 60 * 10;
 
-    async function updateAll() {
-        let players = await client.getPlayers();
-        let games = await client.getGames();
+
+    async function updateMeta() {
         let meta = await client.getMetadata();
         metadata.set(meta);
+    }
+    async function updateGames() {
+        let players = await client.getPlayers();
+        let games = await client.getGames();
         playerdata.set(players);
         gamedata.set(games);
     }
@@ -28,14 +34,41 @@
         donationstore.set(donations);
     }
 
-    onMount(async () => {
-        const gameInterval = setInterval(updateAll, updateFreq);
+    async function get_current_offset() {
+        var pctime = Date.now();
+        var diff = 0
+        let meta = await client.getMetadata();
+        let duration =  Date.now() - pctime;
+        let servertime = new Date(meta["server_time"]).getTime();
+        diff = pctime - servertime + duration/2.0
+        return diff
+    }
+
+    async function syncTime(){
+        let offsets = []
+        for (let i = 0; i < 5; i++) {
+            let ofs = await get_current_offset()
+            offsets.push(ofs)
+        }
+        offsets.sort()
+        let offset = await offsets[2]  // median
+        clockoffsetms.set(offset);
+    }
+
+    onMount(() => {
+        const metaInterval = setInterval(updateMeta, metaUpdateFreq);
+        const gameInterval = setInterval(updateGames, gameUpdateFreq);
         const donoInterval = setInterval(updateDonos, donoUpdateFreq);
-        updateAll();
+        const syncInterval = setInterval(syncTime, syncFreq)
+        syncTime()
+        updateMeta();
+        updateGames();
         updateDonos();
-        return () => {
+        return () => { // this never runs if onmount is async
             clearInterval(gameInterval);
+            clearInterval(metaInterval);
             clearInterval(donoInterval);
+            clearInterval(syncInterval);
         }
     });
 </script>

src/lib/components/GameTimer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
     import { currentGame, metadata } from "$lib/stores/GameStore";
+    import { clockoffsetms } from "$lib/stores/ConfStore";
 	import { dateRangeToDuration, millisToDuration } from "$lib/utils/time";
 	import type { Timer } from "$lib/models/Timer";
 	import { themestore } from "$lib/stores/ThemeStore";
@@ -46,19 +47,23 @@
     const pad = (num: number, pad='0', padLength=2) => num.toString().padStart(padLength, pad);
 
     const cycle = () => {
+        let offset = $clockoffsetms ?? 0;
         let start = start_time?.getTime() ?? Date.now();
         if (end_time) {
             stopped = true;
         } else {
             stopped = false;
+            if (!start_time) {
+                offset = 0
+            }
         }
         let end = end_time?.getTime() ?? Date.now();
         let {
             hours: hours_,
             minutes: minutes_,
             seconds: seconds_,
             millis: millis_
-        } = millisToDuration(end - start);
+        } = millisToDuration(end - start - offset);
         hours = pad(Math.max(hours_, 0), ' ');
         minutes = pad(Math.max(minutes_, 0));
         seconds = pad(Math.max(seconds_, 0))

src/lib/stores/ConfStore.ts

@@ -3,3 +3,5 @@ import { writable } from "svelte/store";
 export const fixedPlayerNames = writable(true);
 export const hideGameData = writable(false);
 
+export const clockoffsetms = writable(false);
+