From 1a895bafebd3179b5218b04c62db7ec72cc8d746 Mon Sep 17 00:00:00 2001
From: Todd Gardner <todd@g12solutions.com>
Date: Thu, 12 Sep 2024 20:04:14 -0500
Subject: [PATCH] Fix ShiftCounter to not start until the game does

---
 src/components/ShiftCounter.tsx   | 46 +++++++++++++++++--------------
 src/controllers/GameController.ts |  6 ++++
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/components/ShiftCounter.tsx b/src/components/ShiftCounter.tsx
index 482c3ea..c0fc158 100644
--- a/src/components/ShiftCounter.tsx
+++ b/src/components/ShiftCounter.tsx
@@ -31,29 +31,33 @@ export class ShiftCounter extends Component<any, ShiftCounterState> {
 
     componentDidMount(): void {
 
-        if (isSafari()) {
-            console.info("approximating layout shift value on Safari");
-            GameTimer.onTick((tick) => {
-                let cls = this.state.cls;
-                cls = cls + ((getRandomInteger(5000, 10000) + (tick)) / 10000);
-                this.setState({ cls });
-                GameController.cls = cls;
-            })
-        }
-        else {
-            let cls = this.state.cls;
-            this.observer = new PerformanceObserver((list: PerformanceObserverEntryList) => {
-                Promise.resolve().then(() => {
-                    (list.getEntries() as CustomLayoutShift[]).forEach((entry) => {
-                        cls += entry.value
-                    });
+        GameController.onStart(() => {
+
+            if (isSafari()) {
+                console.info("approximating layout shift value on Safari");
+                GameTimer.onTick((tick) => {
+                    let cls = this.state.cls;
+                    cls = cls + ((getRandomInteger(5000, 10000) + (tick)) / 10000);
                     this.setState({ cls });
+                    GameController.cls = cls;
                 })
-                this.setState({ cls });
-                GameController.cls = cls;
-            });
-            this.observer.observe({ type: "layout-shift", buffered: false });
-        }
+            }
+            else {
+                let cls = this.state.cls;
+                this.observer = new PerformanceObserver((list: PerformanceObserverEntryList) => {
+                    Promise.resolve().then(() => {
+                        (list.getEntries() as CustomLayoutShift[]).forEach((entry) => {
+                            cls += entry.value
+                        });
+                        this.setState({ cls });
+                    })
+                    this.setState({ cls });
+                    GameController.cls = cls;
+                });
+                this.observer.observe({ type: "layout-shift", buffered: false });
+            }
+        })
+
     }
 
     componentWillUnmount(): void {
diff --git a/src/controllers/GameController.ts b/src/controllers/GameController.ts
index 05a082f..3233625 100644
--- a/src/controllers/GameController.ts
+++ b/src/controllers/GameController.ts
@@ -32,6 +32,7 @@ class _GameController {
     setState!: (state: any) => void;
     cls: number = 0;
     countdownWarning: boolean = false;
+    onStartCbs: (() => void)[] = [];
 
     init(getState: () => GameState, setState: (state: any) => void) {
 
@@ -77,6 +78,7 @@ class _GameController {
             }
         })
         GameTimer.start();
+        this.onStartCbs.forEach(cb => cb());
     }
 
     stop() {
@@ -113,6 +115,10 @@ class _GameController {
         setLocalStorage(PLAYER_STORAGE_KEY, savedPlayerData);
     }
 
+    onStart(cb: () => void): void {
+        this.onStartCbs.push(cb);
+    }
+
     private countdown(i: number): Promise<void> {
         return new Promise((res) => {
             this.setState({ countdown: i });