Pause on window focus loss

src/main.ts

@@ -46,6 +46,7 @@ import { GemType } from './classes/Definitions';
     }
     Engine.latestCommit = await fetch('/latest_commit').then((res) => res.text());
     window.addEventListener('resize', resize);
+
     resize();
     await Assets.LoadAssets();
     GameUIConstants.init();
@@ -71,4 +72,21 @@ import { GemType } from './classes/Definitions';
             return 'You are about to leave.';
         };
     else Engine.TestSuite();
+
+    let gamePausedDueToBlur = false;
+
+    window.addEventListener('blur', () => {
+        console.log('blur');
+        if (Engine.GameScene && !Engine.GameScene.isPaused) {
+            Engine.GameScene.PauseGame();
+            gamePausedDueToBlur = true;
+        }
+    });
+    window.addEventListener('focus', () => {
+        console.log('focus');
+        if (Engine.GameScene && gamePausedDueToBlur && Engine.GameScene.isPaused) {
+            gamePausedDueToBlur = false;
+            Engine.GameScene.UnpauseGame();
+        }
+    });
 })();

src/scenes/Game.ts

@@ -52,10 +52,12 @@ export class GameScene extends Scene {
         y: 0,
         zIndex: 120,
     });
+    private windowTitle: string;
 
     constructor(name: string) {
         super();
         Engine.GameScene = this;
+        this.windowTitle = document.title;
         GameAssets.Missions.forEach((mission, index) => {
             if (mission.name == name) {
                 this.mission = mission;
@@ -283,10 +285,12 @@ export class GameScene extends Scene {
     public PauseGame() {
         this.isPaused = true;
         this.ticker.stop();
+        document.title = '[PAUSED] ' + this.windowTitle;
     }
     public UnpauseGame() {
         this.isPaused = false;
         this.ticker.start();
+        document.title = this.windowTitle;
     }
     public ShowPauseDialog() {
         const gamePausedDialog = new GamePausedDialog();