subscribing to config event

part of #2462

frontend/gulpfile.js

@@ -41,22 +41,24 @@ task("browserify", function () {
     //the source files are concatenated together
     debug: false,
   });
-  return b
-    .transform(
-      babelify.configure({
-        presets: ["@babel/preset-env"],
-        plugins: ["@babel/transform-runtime"],
-      })
-    )
-    .bundle()
-    .pipe(source("monkeytype.js"))
-    .pipe(buffer())
-    .pipe(
-      uglify({
-        mangle: false,
-      })
-    )
-    .pipe(dest("./public/js"));
+  return (
+    b
+      .transform(
+        babelify.configure({
+          presets: ["@babel/preset-env"],
+          plugins: ["@babel/transform-runtime"],
+        })
+      )
+      .bundle()
+      .pipe(source("monkeytype.js"))
+      .pipe(buffer())
+      // .pipe(
+      //   uglify({
+      //     mangle: false,
+      //   })
+      // )
+      .pipe(dest("./public/js"))
+  );
 });
 
 task("static", function () {

frontend/src/js/config.js

@@ -1,6 +1,5 @@
 import * as DB from "./db";
 import * as Sound from "./controllers/sound-controller";
-import * as ChartController from "./controllers/chart-controller";
 import * as OutOfFocus from "./test/out-of-focus";
 import * as TimerProgress from "./test/timer-progress";
 import * as LiveWpm from "./test/live-wpm";
@@ -314,30 +313,11 @@ export function setBlindMode(blind, nosave) {
   dispatchEvent("blindMode", config.blindMode);
 }
 
-function updateChartAccuracy() {
-  ChartController.accountHistory.data.datasets[1].hidden = !config.chartAccuracy;
-  ChartController.accountHistory.options.scales.yAxes[1].display =
-    config.chartAccuracy;
-  ChartController.accountHistory.update();
-}
-
-function updateChartStyle() {
-  if (config.chartStyle == "scatter") {
-    ChartController.accountHistory.data.datasets[0].showLine = false;
-    ChartController.accountHistory.data.datasets[1].showLine = false;
-  } else {
-    ChartController.accountHistory.data.datasets[0].showLine = true;
-    ChartController.accountHistory.data.datasets[1].showLine = true;
-  }
-  ChartController.accountHistory.update();
-}
-
 export function setChartAccuracy(chartAccuracy, nosave) {
   if (chartAccuracy == undefined) {
     chartAccuracy = true;
   }
   config.chartAccuracy = chartAccuracy;
-  updateChartAccuracy();
   if (!nosave) saveToLocalStorage();
   dispatchEvent("chartAccuracy", config.chartAccuracy);
 }
@@ -347,7 +327,6 @@ export function setChartStyle(chartStyle, nosave) {
     chartStyle = "line";
   }
   config.chartStyle = chartStyle;
-  updateChartStyle();
   if (!nosave) saveToLocalStorage();
   dispatchEvent("chartStyle", config.chartStyle);
 }
@@ -1015,7 +994,6 @@ export function setFontFamily(font, nosave) {
     "--font",
     `"${font.replace(/_/g, " ")}", "Roboto Mono"`
   );
-  ChartController.setDefaultFontFamily(font);
   if (!nosave) saveToLocalStorage();
   dispatchEvent("fontFamily", config.fontFamily);
 }

frontend/src/js/controllers/chart-controller.js

@@ -3,7 +3,7 @@ import * as TestStats from "../test/test-stats";
 import * as ThemeColors from "../elements/theme-colors";
 import * as Misc from "../misc";
 import * as Account from "../pages/account";
-import Config from "../config";
+import Config, * as UpdateConfig from "../config";
 
 export let result = new Chart($("#wpmChart"), {
   type: "line",
@@ -625,6 +625,23 @@ export let miniResult = new Chart($(".pageAccount #miniResultChart"), {
   },
 });
 
+function updateAccuracy() {
+  accountHistory.data.datasets[1].hidden = !Config.chartAccuracy;
+  accountHistory.options.scales.yAxes[1].display = Config.chartAccuracy;
+  accountHistory.update();
+}
+
+function updateStyle() {
+  if (Config.chartStyle == "scatter") {
+    accountHistory.data.datasets[0].showLine = false;
+    accountHistory.data.datasets[1].showLine = false;
+  } else {
+    accountHistory.data.datasets[0].showLine = true;
+    accountHistory.data.datasets[1].showLine = true;
+  }
+  accountHistory.update();
+}
+
 export async function updateColors(chart) {
   let bgcolor = await ThemeColors.get("bg");
   let subcolor = await ThemeColors.get("sub");
@@ -736,3 +753,11 @@ export function updateAllChartColors() {
   accountActivity.updateColors();
   miniResult.updateColors();
 }
+
+$(document).ready(() => {
+  UpdateConfig.subscribeToEvent((eventKey, eventValue) => {
+    if (eventKey === "chartAccuracy") updateAccuracy();
+    if (eventKey === "chartStyle") updateStyle();
+    if (eventKey === "fontFamily") setDefaultFontFamily(eventValue);
+  });
+});