Implement web worker to keep timer running even when page is inactive

4 files changed, 40 insertions, 8 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4480d77..83c8c33 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
 ## [Unreleased]
 
 ### General
+- Timer will now continue to run even if you're on another browser tab or if the game is minimized. This was done
+  using a technology called "web workers". I am new to this tech and it's possible that things are imperfect. Please
+  let me know if anything seems weird to you.
+  - It's possible that the use of web workers now means that your game will continue to run on mobile even if your
+    display is off, or even if you're in another app. This may vary from device to device. Again, totally new to this
+    technology. Please try it out on your phone and let me know. I am honestly _guessing_ that it's probably too good
+    to be true that things will just keep working even with your display off, but it's possible that technology has
+    gotten that far. If it doesn't work for you, you might be able to tweak some device/browser settings to get it
+    to work. Again, no idea.
 - You now receive an informative message when someone buys or sells items to you via one of your bazaar orders.
 
 ### Combat
diff --git a/app/javascript/controllers/timer_controller.js b/app/javascript/controllers/timer_controller.js
index 4888f6a..f6ba4f3 100644
--- a/app/javascript/controllers/timer_controller.js
+++ b/app/javascript/controllers/timer_controller.js
@@ -11,15 +11,12 @@ export default class extends Controller {
   }
 
   connect() {
-    if (!this.timerInterval) this.startUpdating();
+    App.timerWorker.postMessage({ "run_flag": true });
     this.timerTarget.textContent = Math.ceil(this.timeRemainingValue);
     this.postFailures = 0;
-  }
 
-  startUpdating() {
     let controller = this;
-    controller.timerInterval = setInterval(() => {
-
+    App.timerWorker.onmessage = function() {
       if (controller.timeRemainingValue > 0) {
         controller.timeRemainingValue = controller.timeRemainingValue - 0.01;
       }
@@ -28,11 +25,10 @@ export default class extends Controller {
         controller.timerTarget.textContent = Math.ceil(controller.timeRemainingValue).toString();
         controller.progressBarTarget.style.width = `${(1 - (controller.timeRemainingValue / controller.activityDurationValue)) * 100}%`;
       } else {
-        clearInterval(controller.timerInterval);
-        controller.timerInterval = null;
+        App.timerWorker.postMessage({ "run_flag": false });
         controller.finishActivity();
       }
-    }, 10);
+    }
   }
 
   finishActivity() {
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index a18528e..65ab536 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -20,3 +20,6 @@ import { definitionsFromContext } from "stimulus/webpack-helpers"
 const application = Application.start()
 const context = require.context("../controllers", true, /\.js$/)
 application.load(definitionsFromContext(context))
+
+window.App = {};
+App.timerWorker = new Worker("/timer_worker.js");
diff --git a/public/timer_worker.js b/public/timer_worker.js
new file mode 100644
index 0000000..3d3e79a
--- /dev/null
+++ b/public/timer_worker.js
@@ -0,0 +1,24 @@
+let timerInterval = null;
+
+function setTimerInterval() {
+  if (!timerInterval) {
+    timerInterval = setInterval(function() {
+      postMessage("timerTick");
+    }, 10);
+  }
+}
+
+function clearTimerInterval() {
+  clearInterval(timerInterval);
+  timerInterval = null;
+}
+
+onmessage = function(event) {
+  if ("run_flag" in event.data) {
+    if (event.data["run_flag"]) {
+      setTimerInterval();
+    } else {
+      clearTimerInterval();
+    }
+  }
+}