Merge pull request #725 from DanielNoord/reordersettings

Reordersettings
2021-03-23 09:38:45 +01:00
parent 202913179c 02d49dca2e
commit 212a358a6a
29 changed files with 855 additions and 853 deletions
--- a/CookieMonster.js
+++ b/CookieMonster.js
--- a/dist/CookieMonster.js
+++ b/dist/CookieMonster.js
--- a/dist/CookieMonster.js.map
+++ b/dist/CookieMonster.js.map
--- a/src/Cache/PP/Building.js
+++ b/src/Cache/PP/Building.js
@@ -2,7 +2,7 @@
 /* eslint-disable no-unused-vars */
 import { CMOptions } from '../../Config/VariablesAndData';
 import GetWrinkConfigBank from '../../Disp/HelperFunctions/GetWrinkConfigBank';
-import { ColorGray } from '../../Disp/VariablesAndData';
+import { ColourGray } from '../../Disp/VariablesAndData';
 import {
  CacheMinPP,
  CacheObjects1,
@@ -17,10 +17,10 @@ import ColourOfPP from './ColourOfPP';
 * It saves all date in CM.Cache.Objects...
 * It is called by CM.Cache.CacheBuildingsPP()
 */
-function CacheColor(target, amount) {
+function CacheColour(target, amount) {
  Object.keys(target).forEach((i) => {
    if (CMOptions.PPRigidelMode && amount === 1) {
-      target[i].color = ColorGray;
+      target[i].color = ColourGray;
      return;
    }
    target[i].color = ColourOfPP(
@@ -29,7 +29,7 @@ function CacheColor(target, amount) {
    );
    // Colour based on excluding certain top-buildings
    for (let j = 0; j < CMOptions.PPExcludeTop; j++) {
-      if (target[i].pp === CachePPArray[j][0]) target[i].color = ColorGray;
+      if (target[i].pp === CachePPArray[j][0]) target[i].color = ColourGray;
    }
  });
 }
@@ -75,7 +75,7 @@ export default function CacheBuildingsPP() {
  }
  CacheMinPP = CachePPArray[CMOptions.PPExcludeTop][indexOfMin];

-  CacheColor(CacheObjects1, 1);
-  CacheColor(CacheObjects10, 10);
-  CacheColor(CacheObjects100, 100);
+  CacheColour(CacheObjects1, 1);
+  CacheColour(CacheObjects10, 10);
+  CacheColour(CacheObjects100, 100);
 }
--- a/src/Cache/PP/ColourOfPP.js
+++ b/src/Cache/PP/ColourOfPP.js
@@ -1,13 +1,13 @@
 import { CMOptions } from '../../Config/VariablesAndData';
 import GetCPS from '../../Disp/HelperFunctions/GetCPS';
 import {
-  ColorBlue,
-  ColorGray,
-  ColorGreen,
-  ColorOrange,
-  ColorPurple,
-  ColorRed,
-  ColorYellow,
+  ColourBlue,
+  ColourGray,
+  ColourGreen,
+  ColourOrange,
+  ColourPurple,
+  ColourRed,
+  ColourYellow,
 } from '../../Disp/VariablesAndData';
 import { CacheMinPP, CachePPArray } from '../VariablesAndData';

@@ -21,22 +21,22 @@ import { CacheMinPP, CachePPArray } from '../VariablesAndData';
 export default function ColourOfPP(me, price) {
  let color = '';
  // Colour based on PP
-  if (me.pp <= 0 || me.pp === Infinity) color = ColorGray;
-  else if (me.pp < CacheMinPP) color = ColorBlue;
-  else if (me.pp === CacheMinPP) color = ColorGreen;
-  else if (me.pp < CachePPArray[10][0]) color = ColorYellow;
-  else if (me.pp < CachePPArray[20][0]) color = ColorOrange;
-  else if (me.pp > CachePPArray[30][0]) color = ColorRed;
-  else color = ColorPurple;
+  if (me.pp <= 0 || me.pp === Infinity) color = ColourGray;
+  else if (me.pp < CacheMinPP) color = ColourBlue;
+  else if (me.pp === CacheMinPP) color = ColourGreen;
+  else if (me.pp < CachePPArray[10][0]) color = ColourYellow;
+  else if (me.pp < CachePPArray[20][0]) color = ColourOrange;
+  else if (me.pp > CachePPArray[30][0]) color = ColourRed;
+  else color = ColourPurple;

  // Colour based on price in terms of CPS
  if (Number(CMOptions.PPSecondsLowerLimit) !== 0) {
    if (price / GetCPS() < Number(CMOptions.PPSecondsLowerLimit))
-      color = ColorBlue;
+      color = ColourBlue;
  }
  // Colour based on being able to purchase
  if (CMOptions.PPOnlyConsiderBuyable) {
-    if (price - Game.cookies > 0) color = ColorRed;
+    if (price - Game.cookies > 0) color = ColourRed;
  }
  return color;
 }
--- a/src/Config/Toggles/ToggleUpgradeBarAndColour.js
+++ b/src/Config/Toggles/ToggleUpgradeBarAndColour.js
@@ -1,9 +1,6 @@
 import UpdateUpgrades from '../../Disp/BuildingsUpgrades/Upgrades';
 import { CMOptions } from '../VariablesAndData';

-/**
- * Section: Functions related to the Upgrade Bar
-
 /**
 * This function toggles the upgrade bar and the colours of upgrades
 * It is called by a change in CM.Options.UpBarColor
--- a/src/Data/Sectionheaders.js
+++ b/src/Data/Sectionheaders.js
@@ -2,12 +2,13 @@

 /** Display titles of the headers of the Cookie Monster settings section */
 export const ConfigGroups = {
-  BarsColors: 'Bars/Colors',
  Calculation: 'Calculation',
-  Notification: 'Notification',
-  Tooltip: 'Tooltips and additional insights',
-  Statistics: 'Statistics',
  Notation: 'Notation',
+  Colours: 'Colours and colour coding',
+  BarsDisplay: 'Infobars and visual settings',
+  Tooltip: 'Tooltips',
+  Statistics: 'Statistics',
+  Notification: 'Notifications',
  Miscellaneous: 'Miscellaneous',
 };

--- a/src/Data/SettingsData.js
+++ b/src/Data/SettingsData.js
--- a/src/Data/SettingsDefault.js
+++ b/src/Data/SettingsDefault.js
@@ -1,22 +1,67 @@
 /** This array describes all default settings */
 const ConfigDefault = {
+  CPSMode: 1,
+  AvgCPSHist: 3,
+  AvgClicksHist: 0,
+  CalcWrink: 0,
+  Scale: 2,
+  ScaleDecimals: 2,
+  ScaleSeparator: 0,
+  ScaleCutoff: 999999,
+  TimeFormat: 0,
+  DetailedTime: 1,
+  PPDisplayTime: 0,
+  BuildColour: 1,
+  PPOnlyConsiderBuyable: 0,
+  PPExcludeTop: 0,
+  PPRigidelMode: 0,
+  PPSecondsLowerLimit: 0,
+  Colours: {
+    Blue: '#4bb8f0',
+    Green: '#00ff00',
+    Yellow: '#ffff00',
+    Orange: '#ff7f00',
+    Red: '#ff0000',
+    Purple: '#ff00ff',
+    Gray: '#b3b3b3',
+    Pink: '#ff1493',
+    Brown: '#8b4513',
+  },
  BotBar: 1,
  TimerBar: 1,
  TimerBarPos: 0,
  TimerBarOverlay: 2,
-  BuildColor: 1,
-  PPDisplayTime: 0,
-  UpBarColor: 1,
+  UpBarColour: 1,
  UpgradeBarFixedPos: 1,
-  CalcWrink: 0,
-  CPSMode: 1,
-  AvgCPSHist: 3,
-  AvgClicksHist: 0,
-  PPExcludeTop: 0,
-  PPRigidelMode: 0,
-  PPSecondsLowerLimit: 0,
-  PPOnlyConsiderBuyable: 0,
+  SortBuildings: 0,
+  SortUpgrades: 0,
+  DragonAuraInfo: 1,
+  GrimoireBar: 1,
+  GCTimer: 1,
+  Favicon: 1,
+  WrinklerButtons: 1,
+  HideSectionsButtons: 0,
+  TooltipBuildUpgrade: 1,
+  TooltipAmor: 0,
+  ToolWarnLucky: 1,
+  ToolWarnLuckyFrenzy: 1,
+  ToolWarnConjure: 1,
+  ToolWarnConjureFrenzy: 1,
+  ToolWarnEdifice: 1,
+  ToolWarnUser: 0,
  ToolWarnBon: 1,
+  ToolWarnPos: 1,
+  TooltipGrim: 1,
+  TooltipWrink: 1,
+  TooltipLump: 1,
+  TooltipPlots: 1,
+  TooltipPantheon: 1,
+  TooltipAscendButton: 1,
+  Stats: 1,
+  MissingUpgrades: 1,
+  UpStats: 1,
+  HeavenlyChipsTarget: 1,
+  ShowMissedGC: 1,
  Title: 1,
  GeneralSound: 1,
  GCNotification: 0,
@@ -58,55 +103,14 @@ const ConfigDefault = {
  WrinklerMaxVolume: 100,
  WrinklerMaxSoundURL:
    'https://freesound.org/data/previews/152/152743_15663-lq.mp3',
-  TooltipBuildUpgrade: 1,
-  TooltipAmor: 0,
-  ToolWarnLucky: 1,
-  ToolWarnLuckyFrenzy: 1,
-  ToolWarnConjure: 1,
-  ToolWarnConjureFrenzy: 1,
-  ToolWarnEdifice: 1,
-  ToolWarnUser: 0,
-  ToolWarnPos: 1,
-  TooltipGrim: 1,
-  TooltipWrink: 1,
-  TooltipLump: 1,
-  TooltipPlots: 1,
-  TooltipPantheon: 1,
-  DragonAuraInfo: 1,
-  TooltipAscendButton: 1,
-  Stats: 1,
-  MissingUpgrades: 1,
-  UpStats: 1,
-  TimeFormat: 0,
-  DetailedTime: 1,
-  GrimoireBar: 1,
-  HeavenlyChipsTarget: 1,
-  ShowMissedGC: 1,
-  Scale: 2,
-  ScaleDecimals: 2,
-  ScaleSeparator: 0,
-  ScaleCutoff: 999999,
-  Colors: {
-    Blue: '#4bb8f0',
-    Green: '#00ff00',
-    Yellow: '#ffff00',
-    Orange: '#ff7f00',
-    Red: '#ff0000',
-    Purple: '#ff00ff',
-    Gray: '#b3b3b3',
-    Pink: '#ff1493',
-    Brown: '#8b4513',
-  },
-  SortBuildings: 0,
-  SortUpgrades: 0,
-  GCTimer: 1,
-  Favicon: 1,
-  WrinklerButtons: 1,
-  HideSectionsButtons: 0,
  BulkBuyBlock: 0,
  Header: {
-    BarsColors: 1,
    Calculation: 1,
+    Notation: 1,
+    Colours: 1,
+    BarsDisplay: 1,
+    Tooltip: 1,
+    Statistics: 1,
    Notification: 1,
    NotificationGeneral: 1,
    NotificationGC: 1,
@@ -116,9 +120,6 @@ const ConfigDefault = {
    NotificationMagi: 1,
    NotificationWrink: 1,
    NotificationWrinkMax: 1,
-    Tooltip: 1,
-    Statistics: 1,
-    Notation: 1,
    Miscellaneous: 1,
    Lucky: 1,
    Chain: 1,
--- a/src/Disp/BeautifyAndFormatting/BeautifyFormatting.js
+++ b/src/Disp/BeautifyAndFormatting/BeautifyFormatting.js
@@ -5,10 +5,10 @@ import { CMOptions } from '../../Config/VariablesAndData';
 import { metric, shortScale, shortScaleAbbreviated } from '../../Data/Scales';
 import { BackupFunctions } from '../../Main/VariablesAndData';
 import {
-  ColorGreen,
-  ColorOrange,
-  ColorRed,
-  ColorYellow,
+  ColourGreen,
+  ColourOrange,
+  ColourRed,
+  ColourYellow,
 } from '../VariablesAndData';

 /**
@@ -134,18 +134,18 @@ export function FormatTime(time, longFormat) {
 * @param	{number}			time			Time to be coloured
 * @returns {{string, string}}	{text, color}	Both the formatted time and color as strings in an array
 */
-export function GetTimeColor(time) {
+export function GetTimeColour(time) {
  let color;
  let text;
  if (time <= 0) {
    if (CMOptions.TimeFormat) text = '00:00:00:00:00';
    else text = 'Done!';
-    color = ColorGreen;
+    color = ColourGreen;
  } else {
    text = FormatTime(time);
-    if (time > 300) color = ColorRed;
-    else if (time > 60) color = ColorOrange;
-    else color = ColorYellow;
+    if (time > 300) color = ColourRed;
+    else if (time > 60) color = ColourOrange;
+    else color = ColourYellow;
  }
  return { text, color };
 }
--- a/src/Disp/BuildingsUpgrades/Buildings.js
+++ b/src/Disp/BuildingsUpgrades/Buildings.js
@@ -7,7 +7,7 @@ import {
 import { CMOptions } from '../../Config/VariablesAndData';
 import BuildingSell from '../../Sim/SimulationEvents/SellBuilding';
 import { Beautify } from '../BeautifyAndFormatting/BeautifyFormatting';
-import { Colors, LastTargetBuildings } from '../VariablesAndData';
+import { Colours, LastTargetBuildings } from '../VariablesAndData';

 /**
 * Section: Functions related to right column of the screen (buildings/upgrades)
@@ -15,8 +15,8 @@ import { Colors, LastTargetBuildings } from '../VariablesAndData';
 /**
 * This function adjusts some things in the column of buildings.
 * It colours them, helps display the correct sell-price and shuffles the order when CM.Options.SortBuildings is set
- * The function is called by CM.Disp.Draw(), CM.Disp.UpdateColors() & CM.Disp.RefreshScale()
- * And by changes in CM.Options.BuildColor, CM.Options.SortBuild & CM.Data.Config.BulkBuildColor
+ * The function is called by CM.Disp.Draw(), CM.Disp.UpdateColours() & CM.Disp.RefreshScale()
+ * And by changes in CM.Options.BuildColour, CM.Options.SortBuild & CM.Data.Config.BulkBuildColour
 */
 export default function UpdateBuildings() {
  let target = Game.buyBulk;
@@ -30,10 +30,10 @@ export default function UpdateBuildings() {
  else if (target === 100) target = CacheObjects100;

  if (Game.buyMode === 1) {
-    if (CMOptions.BuildColor === 1) {
+    if (CMOptions.BuildColour === 1) {
      Object.keys(target).forEach((i) => {
        l(`productPrice${Game.Objects[i].id}`).style.color =
-          CMOptions.Colors[target[i].color];
+          CMOptions.Colours[target[i].color];
      });
    } else {
      Object.keys(Game.Objects).forEach((i) => {
@@ -72,9 +72,9 @@ export default function UpdateBuildings() {
      });

      arr.sort(function (a, b) {
-        return Colors.indexOf(a.color) > Colors.indexOf(b.color)
+        return Colours.indexOf(a.color) > Colours.indexOf(b.color)
          ? 1
-          : Colors.indexOf(a.color) < Colors.indexOf(b.color)
+          : Colours.indexOf(a.color) < Colours.indexOf(b.color)
          ? -1
          : a.pp < b.pp
          ? -1
@@ -89,9 +89,9 @@ export default function UpdateBuildings() {
      });

      arr.sort(function (a, b) {
-        return Colors.indexOf(a.color) > Colors.indexOf(b.color)
+        return Colours.indexOf(a.color) > Colours.indexOf(b.color)
          ? 1
-          : Colors.indexOf(a.color) < Colors.indexOf(b.color)
+          : Colours.indexOf(a.color) < Colours.indexOf(b.color)
          ? -1
          : a.pp < b.pp
          ? -1
--- a/src/Disp/BuildingsUpgrades/UpgradeBar.js
+++ b/src/Disp/BuildingsUpgrades/UpgradeBar.js
@@ -1,13 +1,13 @@
 import {
-  ColorBackPre,
-  ColorBlue,
-  ColorGray,
-  ColorGreen,
-  ColorOrange,
-  ColorPurple,
-  ColorRed,
-  ColorTextPre,
-  ColorYellow,
+  ColourBackPre,
+  ColourBlue,
+  ColourGray,
+  ColourGreen,
+  ColourOrange,
+  ColourPurple,
+  ColourRed,
+  ColourTextPre,
+  ColourYellow,
 } from '../VariablesAndData';

 /**
@@ -28,7 +28,7 @@ function CreateUpgradeBarLegend() {
    const div = document.createElement('div');
    div.style.verticalAlign = 'middle';
    const span = document.createElement('span');
-    span.className = ColorBackPre + color;
+    span.className = ColourBackPre + color;
    span.style.display = 'inline-block';
    span.style.height = '10px';
    span.style.width = '10px';
@@ -39,24 +39,24 @@ function CreateUpgradeBarLegend() {
  };

  legend.appendChild(
-    legendLine(ColorBlue, 'Better than the best PP of a building option'),
+    legendLine(ColourBlue, 'Better than the best PP of a building option'),
  );
  legend.appendChild(
-    legendLine(ColorGreen, 'Same as the best PP building option'),
+    legendLine(ColourGreen, 'Same as the best PP building option'),
  );
  legend.appendChild(
-    legendLine(ColorYellow, 'Within the top 10 of PP for buildings'),
+    legendLine(ColourYellow, 'Within the top 10 of PP for buildings'),
  );
  legend.appendChild(
-    legendLine(ColorOrange, 'Within the top 20 of PP for buildings'),
+    legendLine(ColourOrange, 'Within the top 20 of PP for buildings'),
  );
  legend.appendChild(
-    legendLine(ColorRed, 'Within the top 30 of PP for buildings'),
+    legendLine(ColourRed, 'Within the top 30 of PP for buildings'),
  );
  legend.appendChild(
-    legendLine(ColorPurple, 'Outside of the top 30 of PP for buildings'),
+    legendLine(ColourPurple, 'Outside of the top 30 of PP for buildings'),
  );
-  legend.appendChild(legendLine(ColorGray, 'Negative or infinity PP'));
+  legend.appendChild(legendLine(ColourGray, 'Negative or infinity PP'));
  return legend;
 }

@@ -67,7 +67,7 @@ export default function CreateUpgradeBar() {
  const UpgradeBar = document.createElement('div');
  UpgradeBar.id = 'CMUpgradeBar';
  UpgradeBar.style.width = '100%';
-  UpgradeBar.style.backgroundColor = 'black';
+  UpgradeBar.style.backgroundColour = 'black';
  UpgradeBar.style.textAlign = 'center';
  UpgradeBar.style.fontWeight = 'bold';
  UpgradeBar.style.display = 'none';
@@ -85,19 +85,19 @@ export default function CreateUpgradeBar() {
  const upgradeNumber = function (id, color) {
    const span = document.createElement('span');
    span.id = id;
-    span.className = ColorTextPre + color;
+    span.className = ColourTextPre + color;
    span.style.width = '14.28571428571429%';
    span.style.display = 'inline-block';
    span.textContent = '0';
    return span;
  };
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarBlue', ColorBlue));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGreen', ColorGreen));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarYellow', ColorYellow));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarOrange', ColorOrange));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarRed', ColorRed));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarPurple', ColorPurple));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGray', ColorGray));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarBlue', ColourBlue));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGreen', ColourGreen));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarYellow', ColourYellow));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarOrange', ColourOrange));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarRed', ColourRed));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarPurple', ColourPurple));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGray', ColourGray));

  l('upgrades').parentNode.insertBefore(
    UpgradeBar,
--- a/src/Disp/BuildingsUpgrades/Upgrades.js
+++ b/src/Disp/BuildingsUpgrades/Upgrades.js
@@ -2,26 +2,26 @@
 import { CacheUpgrades } from '../../Cache/VariablesAndData';
 import { CMOptions } from '../../Config/VariablesAndData';
 import {
-  ColorBackPre,
-  ColorBlue,
-  ColorGray,
-  ColorGreen,
-  ColorOrange,
-  ColorPurple,
-  ColorRed,
-  Colors,
-  ColorYellow,
+  ColourBackPre,
+  ColourBlue,
+  ColourGray,
+  ColourGreen,
+  ColourOrange,
+  ColourPurple,
+  ColourRed,
+  Colours,
+  ColourYellow,
 } from '../VariablesAndData';

 /**
 * This function adjusts some things in the upgrades section
 * It colours them and shuffles the order when CM.Options.SortBuildings is set
- * The function is called by CM.Disp.Draw(), CM.Disp.ToggleUpgradeBarAndColor & CM.Disp.RefreshScale()
+ * The function is called by CM.Disp.Draw(), CM.Disp.ToggleUpgradeBarAndColour & CM.Disp.RefreshScale()
 * And by changes in CM.Options.SortUpgrades
 */
 export default function UpdateUpgrades() {
  // This counts the amount of upgrades for each pp group and updates the Upgrade Bar
-  if (CMOptions.UpBarColor > 0) {
+  if (CMOptions.UpBarColour > 0) {
    let blue = 0;
    let green = 0;
    let yellow = 0;
@@ -32,31 +32,31 @@ export default function UpdateUpgrades() {

    Object.keys(Game.UpgradesInStore).forEach((i) => {
      const me = Game.UpgradesInStore[i];
-      let addedColor = false;
+      let addedColour = false;
      for (let j = 0; j < l(`upgrade${i}`).childNodes.length; j += 1) {
        if (
-          l(`upgrade${i}`).childNodes[j].className.indexOf(ColorBackPre) !== -1
+          l(`upgrade${i}`).childNodes[j].className.indexOf(ColourBackPre) !== -1
        ) {
          l(`upgrade${i}`).childNodes[j].className =
-            ColorBackPre + CacheUpgrades[me.name].color;
-          addedColor = true;
+            ColourBackPre + CacheUpgrades[me.name].color;
+          addedColour = true;
          break;
        }
      }
-      if (!addedColor) {
+      if (!addedColour) {
        const div = document.createElement('div');
        div.style.width = '10px';
        div.style.height = '10px';
-        div.className = ColorBackPre + CacheUpgrades[me.name].color;
+        div.className = ColourBackPre + CacheUpgrades[me.name].color;
        l(`upgrade${i}`).appendChild(div);
      }
-      if (CacheUpgrades[me.name].color === ColorBlue) blue += 1;
-      else if (CacheUpgrades[me.name].color === ColorGreen) green += 1;
-      else if (CacheUpgrades[me.name].color === ColorYellow) yellow += 1;
-      else if (CacheUpgrades[me.name].color === ColorOrange) orange += 1;
-      else if (CacheUpgrades[me.name].color === ColorRed) red += 1;
-      else if (CacheUpgrades[me.name].color === ColorPurple) purple += 1;
-      else if (CacheUpgrades[me.name].color === ColorGray) gray += 1;
+      if (CacheUpgrades[me.name].color === ColourBlue) blue += 1;
+      else if (CacheUpgrades[me.name].color === ColourGreen) green += 1;
+      else if (CacheUpgrades[me.name].color === ColourYellow) yellow += 1;
+      else if (CacheUpgrades[me.name].color === ColourOrange) orange += 1;
+      else if (CacheUpgrades[me.name].color === ColourRed) red += 1;
+      else if (CacheUpgrades[me.name].color === ColourPurple) purple += 1;
+      else if (CacheUpgrades[me.name].color === ColourGray) gray += 1;
    });

    l('CMUpgradeBarBlue').textContent = blue;
@@ -81,9 +81,9 @@ export default function UpdateUpgrades() {

  if (CMOptions.SortUpgrades) {
    arr.sort(function (a, b) {
-      return Colors.indexOf(a.color) > Colors.indexOf(b.color)
+      return Colours.indexOf(a.color) > Colours.indexOf(b.color)
        ? 1
-        : Colors.indexOf(a.color) < Colors.indexOf(b.color)
+        : Colours.indexOf(a.color) < Colours.indexOf(b.color)
        ? -1
        : a.pp < b.pp
        ? -1
--- a/src/Disp/HelperFunctions/GetLumpColor.js
+++ b/src/Disp/HelperFunctions/GetLumpColor.js
@@ -1,33 +0,0 @@
-import {
-  ColorGray,
-  ColorGreen,
-  ColorOrange,
-  ColorPurple,
-  ColorRed,
-  ColorYellow,
-} from '../VariablesAndData';
-
-/**
- * This function returns Name and Color as object for sugar lump type that is given as input param.
- * It is called by CM.Disp.UpdateTooltipSugarLump()
- * @param 	{string} 				type 			Sugar Lump Type.
- * @returns {{string}, {string}}	text, color		An array containing the text and display-color of the sugar lump
- */
-export default function GetLumpColor(type) {
-  if (type === 0) {
-    return { text: 'Normal', color: ColorGray };
-  }
-  if (type === 1) {
-    return { text: 'Bifurcated', color: ColorGreen };
-  }
-  if (type === 2) {
-    return { text: 'Golden', color: ColorYellow };
-  }
-  if (type === 3) {
-    return { text: 'Meaty', color: ColorOrange };
-  }
-  if (type === 4) {
-    return { text: 'Caramelized', color: ColorPurple };
-  }
-  return { text: 'Unknown Sugar Lump', color: ColorRed };
-}
--- a/src/Disp/HelperFunctions/GetLumpColour.js
+++ b/src/Disp/HelperFunctions/GetLumpColour.js
@@ -0,0 +1,33 @@
+import {
+  ColourGray,
+  ColourGreen,
+  ColourOrange,
+  ColourPurple,
+  ColourRed,
+  ColourYellow,
+} from '../VariablesAndData';
+
+/**
+ * This function returns Name and Colour as object for sugar lump type that is given as input param.
+ * It is called by CM.Disp.UpdateTooltipSugarLump()
+ * @param 	{string} 				type 			Sugar Lump Type.
+ * @returns {{string}, {string}}	text, color		An array containing the text and display-color of the sugar lump
+ */
+export default function GetLumpColour(type) {
+  if (type === 0) {
+    return { text: 'Normal', color: ColourGray };
+  }
+  if (type === 1) {
+    return { text: 'Bifurcated', color: ColourGreen };
+  }
+  if (type === 2) {
+    return { text: 'Golden', color: ColourYellow };
+  }
+  if (type === 3) {
+    return { text: 'Meaty', color: ColourOrange };
+  }
+  if (type === 4) {
+    return { text: 'Caramelized', color: ColourPurple };
+  }
+  return { text: 'Unknown Sugar Lump', color: ColourRed };
+}
--- a/src/Disp/HelperFunctions/UpdateColors.js
+++ b/src/Disp/HelperFunctions/UpdateColors.js
@@ -1,33 +0,0 @@
-import { CMOptions } from '../../Config/VariablesAndData';
-import UpdateBuildings from '../BuildingsUpgrades/Buildings';
-import {
-  ColorBackPre,
-  ColorBorderPre,
-  Colors,
-  ColorTextPre,
-} from '../VariablesAndData';
-
-/**
- * This function changes/refreshes colours if the user has set new standard colours
- * The function is therefore called by a change in CM.Options.Colors
- */
-export default function UpdateColors() {
-  let str = '';
-  for (let i = 0; i < Colors.length; i++) {
-    str += `.${ColorTextPre}${Colors[i]} { color: ${
-      CMOptions.Colors[Colors[i]]
-    }; }\n`;
-  }
-  for (let i = 0; i < Colors.length; i++) {
-    str += `.${ColorBackPre}${Colors[i]} { background-color: ${
-      CMOptions.Colors[Colors[i]]
-    }; }\n`;
-  }
-  for (let i = 0; i < Colors.length; i++) {
-    str += `.${ColorBorderPre}${Colors[i]} { border: 1px solid ${
-      CMOptions.Colors[Colors[i]]
-    }; }\n`;
-  }
-  l('CMCSS').textContent = str;
-  UpdateBuildings(); // Class has been already set
-}
--- a/src/Disp/HelperFunctions/UpdateColours.js
+++ b/src/Disp/HelperFunctions/UpdateColours.js
@@ -0,0 +1,33 @@
+import { CMOptions } from '../../Config/VariablesAndData';
+import UpdateBuildings from '../BuildingsUpgrades/Buildings';
+import {
+  ColourBackPre,
+  ColourBorderPre,
+  Colours,
+  ColourTextPre,
+} from '../VariablesAndData';
+
+/**
+ * This function changes/refreshes colours if the user has set new standard colours
+ * The function is therefore called by a change in CM.Options.Colours
+ */
+export default function UpdateColours() {
+  let str = '';
+  for (let i = 0; i < Colours.length; i++) {
+    str += `.${ColourTextPre}${Colours[i]} { color: ${
+      CMOptions.Colours[Colours[i]]
+    }; }\n`;
+  }
+  for (let i = 0; i < Colours.length; i++) {
+    str += `.${ColourBackPre}${Colours[i]} { background-color: ${
+      CMOptions.Colours[Colours[i]]
+    }; }\n`;
+  }
+  for (let i = 0; i < Colours.length; i++) {
+    str += `.${ColourBorderPre}${Colours[i]} { border: 1px solid ${
+      CMOptions.Colours[Colours[i]]
+    }; }\n`;
+  }
+  l('CMCSS').textContent = str;
+  UpdateBuildings(); // Class has been already set
+}
--- a/src/Disp/InfoBars/BottomBar.js
+++ b/src/Disp/InfoBars/BottomBar.js
@@ -10,14 +10,14 @@ import { VersionMajor, VersionMinor } from '../../Data/Moddata';
 import {
  Beautify,
  FormatTime,
-  GetTimeColor,
+  GetTimeColour,
 } from '../BeautifyAndFormatting/BeautifyFormatting';
 import GetCPS from '../HelperFunctions/GetCPS';
 import GetWrinkConfigBank from '../HelperFunctions/GetWrinkConfigBank';
 import {
-  ColorBlue,
-  ColorTextPre,
-  ColorYellow,
+  ColourBlue,
+  ColourTextPre,
+  ColourYellow,
  LastTargetBotBar,
 } from '../VariablesAndData';
 import { CreateBotBarBuildingColumn } from './CreateDOMElements';
@@ -32,7 +32,7 @@ export function CreateBotBar() {
  BotBar.style.width = '100%';
  BotBar.style.position = 'absolute';
  BotBar.style.display = 'none';
-  BotBar.style.backgroundColor = '#262224';
+  BotBar.style.backgroundColour = '#262224';
  BotBar.style.backgroundImage = 'linear-gradient(to bottom, #4d4548, #000000)';
  BotBar.style.borderTop = '1px solid black';
  BotBar.style.overflow = 'auto';
@@ -48,19 +48,21 @@ export function CreateBotBar() {
  const firstCol = function (text, color) {
    const td = document.createElement('td');
    td.style.textAlign = 'right';
-    td.className = ColorTextPre + color;
+    td.className = ColourTextPre + color;
    td.textContent = text;
    return td;
  };
  const type = tbody.appendChild(document.createElement('tr'));
  type.style.fontWeight = 'bold';
-  type.appendChild(firstCol(`CM ${VersionMajor}.${VersionMinor}`, ColorYellow));
+  type.appendChild(
+    firstCol(`CM ${VersionMajor}.${VersionMinor}`, ColourYellow),
+  );
  const bonus = tbody.appendChild(document.createElement('tr'));
-  bonus.appendChild(firstCol('Bonus Income', ColorBlue));
+  bonus.appendChild(firstCol('Bonus Income', ColourBlue));
  const pp = tbody.appendChild(document.createElement('tr'));
-  pp.appendChild(firstCol('Payback Period', ColorBlue));
+  pp.appendChild(firstCol('Payback Period', ColourBlue));
  const time = tbody.appendChild(document.createElement('tr'));
-  time.appendChild(firstCol('Time Left', ColorBlue));
+  time.appendChild(firstCol('Time Left', ColourBlue));

  l('wrapper').appendChild(BotBar);

@@ -94,7 +96,7 @@ export function UpdateBotBar() {
      ].textContent = Beautify(target[i].bonus, 2);
      l('CMBotBar').firstChild.firstChild.childNodes[2].childNodes[
        count
-      ].className = ColorTextPre + target[i].color;
+      ].className = ColourTextPre + target[i].color;
      let PPString;
      if (CMOptions.PPDisplayTime)
        PPString = FormatTime(Math.round(target[i].pp));
@@ -102,24 +104,24 @@ export function UpdateBotBar() {
      l('CMBotBar').firstChild.firstChild.childNodes[2].childNodes[
        count
      ].textContent = PPString;
-      const timeColor = GetTimeColor(
+      const timeColour = GetTimeColour(
        (Game.Objects[i].bulkPrice - (Game.cookies + GetWrinkConfigBank())) /
          GetCPS(),
      );
      l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[
        count
-      ].className = ColorTextPre + timeColor.color;
+      ].className = ColourTextPre + timeColour.color;
      if (
-        timeColor.text === 'Done!' &&
+        timeColour.text === 'Done!' &&
        Game.cookies < Game.Objects[i].bulkPrice
      ) {
        l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[
          count
-        ].textContent = `${timeColor.text} (with Wrink)`;
+        ].textContent = `${timeColour.text} (with Wrink)`;
      } else
        l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[
          count
-        ].textContent = timeColor.text;
+        ].textContent = timeColour.text;
    });
  }
 }
--- a/src/Disp/InfoBars/CreateDOMElements.js
+++ b/src/Disp/InfoBars/CreateDOMElements.js
@@ -1,6 +1,6 @@
 /** Functions to create various DOM elements used by the Bars */

-import { ColorBackPre, ColorBlue, ColorTextPre } from '../VariablesAndData';
+import { ColourBackPre, ColourBlue, ColourTextPre } from '../VariablesAndData';

 /**
 * This function creates an indivudual timer for the timer bar
@@ -47,7 +47,7 @@ export function CreateTimer(id, name, bars) {
      colorBar.style.borderBottomRightRadius = '10px';
    }
    if (typeof bars[i].color !== 'undefined') {
-      colorBar.className = ColorBackPre + bars[i].color;
+      colorBar.className = ColourBackPre + bars[i].color;
    }
    div.appendChild(colorBar);
  }
@@ -83,7 +83,7 @@ export function CreateBotBarBuildingColumn(buildingName) {
    );

    const span = header.appendChild(document.createElement('span'));
-    span.className = ColorTextPre + ColorBlue;
+    span.className = ColourTextPre + ColourBlue;

    header.appendChild(document.createTextNode(')'));
    type.lastChild.style.paddingLeft = '8px';
--- a/src/Disp/InfoBars/TimerBar.js
+++ b/src/Disp/InfoBars/TimerBar.js
@@ -3,11 +3,11 @@
 import { UpdateBotTimerBarPosition } from '../../Config/SpecificToggles';
 import { CMOptions } from '../../Config/VariablesAndData';
 import {
-  BuffColors,
-  ColorBackPre,
-  ColorGray,
-  ColorOrange,
-  ColorPurple,
+  BuffColours,
+  ColourBackPre,
+  ColourGray,
+  ColourOrange,
+  ColourPurple,
  LastNumberOfTimers,
 } from '../VariablesAndData';
 import { CreateTimer } from './CreateDOMElements';
@@ -23,19 +23,19 @@ export function CreateTimerBar() {
  TimerBar.style.height = '0px';
  TimerBar.style.fontSize = '10px';
  TimerBar.style.fontWeight = 'bold';
-  TimerBar.style.backgroundColor = 'black';
+  TimerBar.style.backgroundColour = 'black';

  // Create standard Golden Cookie bar
  const CMTimerBarGC = CreateTimer('CMTimerBarGC', 'Next Cookie', [
-    { id: 'CMTimerBarGCMinBar', color: ColorGray },
-    { id: 'CMTimerBarGCBar', color: ColorPurple },
+    { id: 'CMTimerBarGCMinBar', color: ColourGray },
+    { id: 'CMTimerBarGCBar', color: ColourPurple },
  ]);
  TimerBar.appendChild(CMTimerBarGC);

  // Create standard Reindeer bar
  const CMTimerBarRen = CreateTimer('CMTimerBarRen', 'Next Reindeer', [
-    { id: 'CMTimerBarRenMinBar', color: ColorGray },
-    { id: 'CMTimerBarRenBar', color: ColorOrange },
+    { id: 'CMTimerBarRenMinBar', color: ColourGray },
+    { id: 'CMTimerBarRenBar', color: ColourOrange },
  ]);
  TimerBar.appendChild(CMTimerBarRen);
  const TimerBarBuffTimers = document.createElement('div');
@@ -166,12 +166,12 @@ export function UpdateTimerBar() {
          { id: `${Game.buffs[i].name}Bar` },
        ]);
        timer.style.display = '';
-        let classColor = '';
+        let classColour = '';
        // Gives specific timers specific colors
-        if (typeof BuffColors[Game.buffs[i].name] !== 'undefined') {
-          classColor = BuffColors[Game.buffs[i].name];
-        } else classColor = ColorPurple;
-        timer.lastChild.children[1].className = ColorBackPre + classColor;
+        if (typeof BuffColours[Game.buffs[i].name] !== 'undefined') {
+          classColour = BuffColours[Game.buffs[i].name];
+        } else classColour = ColourPurple;
+        timer.lastChild.children[1].className = ColourBackPre + classColour;
        timer.lastChild.children[1].style.color = 'black';
        if (CMOptions.TimerBarOverlay === 2)
          timer.lastChild.children[1].textContent = `${Math.round(
--- a/src/Disp/MenuSections/CreateStatsSections.js
+++ b/src/Disp/MenuSections/CreateStatsSections.js
@@ -45,7 +45,7 @@ import {

 import GetCPS from '../HelperFunctions/GetCPS';
 import GetWrinkConfigBank from '../HelperFunctions/GetWrinkConfigBank';
-import { ColorGreen, ColorRed, ColorTextPre } from '../VariablesAndData';
+import { ColourGreen, ColourRed, ColourTextPre } from '../VariablesAndData';
 import { StatsListing, StatsHeader, StatsMissDisp } from './CreateDOMElements';

 /**
@@ -61,8 +61,8 @@ export function LuckySection() {
  const section = document.createElement('div');
  section.className = 'CMStatsLuckySection';

-  const luckyColor =
-    Game.cookies + GetWrinkConfigBank() < CacheLucky ? ColorRed : ColorGreen;
+  const luckyColour =
+    Game.cookies + GetWrinkConfigBank() < CacheLucky ? ColourRed : ColourGreen;
  const luckyTime =
    Game.cookies + GetWrinkConfigBank() < CacheLucky
      ? FormatTime(
@@ -72,7 +72,7 @@ export function LuckySection() {
  const luckyReqFrag = document.createDocumentFragment();
  const luckyReqSpan = document.createElement('span');
  luckyReqSpan.style.fontWeight = 'bold';
-  luckyReqSpan.className = ColorTextPre + luckyColor;
+  luckyReqSpan.className = ColourTextPre + luckyColour;
  luckyReqSpan.textContent = Beautify(CacheLucky);
  luckyReqFrag.appendChild(luckyReqSpan);
  if (luckyTime !== '') {
@@ -89,10 +89,10 @@ export function LuckySection() {
    ),
  );

-  const luckyColorFrenzy =
+  const luckyColourFrenzy =
    Game.cookies + GetWrinkConfigBank() < CacheLuckyFrenzy
-      ? ColorRed
-      : ColorGreen;
+      ? ColourRed
+      : ColourGreen;
  const luckyTimeFrenzy =
    Game.cookies + GetWrinkConfigBank() < CacheLuckyFrenzy
      ? FormatTime(
@@ -102,7 +102,7 @@ export function LuckySection() {
  const luckyReqFrenFrag = document.createDocumentFragment();
  const luckyReqFrenSpan = document.createElement('span');
  luckyReqFrenSpan.style.fontWeight = 'bold';
-  luckyReqFrenSpan.className = ColorTextPre + luckyColorFrenzy;
+  luckyReqFrenSpan.className = ColourTextPre + luckyColourFrenzy;
  luckyReqFrenSpan.textContent = Beautify(CacheLuckyFrenzy);
  luckyReqFrenFrag.appendChild(luckyReqFrenSpan);
  if (luckyTimeFrenzy !== '') {
@@ -123,7 +123,7 @@ export function LuckySection() {

  const luckyRewardMaxSpan = document.createElement('span');
  luckyRewardMaxSpan.style.fontWeight = 'bold';
-  luckyRewardMaxSpan.className = ColorTextPre + CacheLuckyReward;
+  luckyRewardMaxSpan.className = ColourTextPre + CacheLuckyReward;
  luckyRewardMaxSpan.textContent =
    Beautify(CacheLuckyReward) +
    (luckySplit ? ` / ${Beautify(CacheLuckyWrathReward)}` : '');
@@ -138,7 +138,7 @@ export function LuckySection() {

  const luckyRewardFrenzyMaxSpan = document.createElement('span');
  luckyRewardFrenzyMaxSpan.style.fontWeight = 'bold';
-  luckyRewardFrenzyMaxSpan.className = ColorTextPre + luckyRewardFrenzyMaxSpan;
+  luckyRewardFrenzyMaxSpan.className = ColourTextPre + luckyRewardFrenzyMaxSpan;
  luckyRewardFrenzyMaxSpan.textContent =
    Beautify(CacheLuckyRewardFrenzy) +
    (luckySplit ? ` / ${Beautify(CacheLuckyWrathRewardFrenzy)}` : '');
@@ -158,7 +158,7 @@ export function LuckySection() {
    ) + 13;
  const luckyCurSpan = document.createElement('span');
  luckyCurSpan.style.fontWeight = 'bold';
-  luckyCurSpan.className = ColorTextPre + luckyCurSpan;
+  luckyCurSpan.className = ColourTextPre + luckyCurSpan;
  luckyCurSpan.textContent =
    Beautify(CacheGoldenCookiesMult * luckyCurBase) +
    (luckySplit ? ` / ${Beautify(CacheWrathCookiesMult * luckyCurBase)}` : '');
@@ -186,10 +186,10 @@ export function ChainSection() {
  const section = document.createElement('div');
  section.className = 'CMStatsChainSection';

-  const chainColor =
+  const chainColour =
    Game.cookies + GetWrinkConfigBank() < CacheChainRequired
-      ? ColorRed
-      : ColorGreen;
+      ? ColourRed
+      : ColourGreen;
  const chainTime =
    Game.cookies + GetWrinkConfigBank() < CacheChainRequired
      ? FormatTime(
@@ -200,7 +200,7 @@ export function ChainSection() {
  const chainReqFrag = document.createDocumentFragment();
  const chainReqSpan = document.createElement('span');
  chainReqSpan.style.fontWeight = 'bold';
-  chainReqSpan.className = ColorTextPre + chainColor;
+  chainReqSpan.className = ColourTextPre + chainColour;
  chainReqSpan.textContent = Beautify(CacheChainRequired);
  chainReqFrag.appendChild(chainReqSpan);
  if (chainTime !== '') {
@@ -217,10 +217,10 @@ export function ChainSection() {
    ),
  );

-  const chainWrathColor =
+  const chainWrathColour =
    Game.cookies + GetWrinkConfigBank() < CacheChainWrathRequired
-      ? ColorRed
-      : ColorGreen;
+      ? ColourRed
+      : ColourGreen;
  const chainWrathTime =
    Game.cookies + GetWrinkConfigBank() < CacheChainWrathRequired
      ? FormatTime(
@@ -231,7 +231,7 @@ export function ChainSection() {
  const chainWrathReqFrag = document.createDocumentFragment();
  const chainWrathReqSpan = document.createElement('span');
  chainWrathReqSpan.style.fontWeight = 'bold';
-  chainWrathReqSpan.className = ColorTextPre + chainWrathColor;
+  chainWrathReqSpan.className = ColourTextPre + chainWrathColour;
  chainWrathReqSpan.textContent = Beautify(CacheChainWrathRequired);
  chainWrathReqFrag.appendChild(chainWrathReqSpan);
  if (chainWrathTime !== '') {
@@ -248,10 +248,10 @@ export function ChainSection() {
    ),
  );

-  const chainColorFrenzy =
+  const chainColourFrenzy =
    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyRequired
-      ? ColorRed
-      : ColorGreen;
+      ? ColourRed
+      : ColourGreen;
  const chainTimeFrenzy =
    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyRequired
      ? FormatTime(
@@ -262,7 +262,7 @@ export function ChainSection() {
  const chainReqFrenFrag = document.createDocumentFragment();
  const chainReqFrenSpan = document.createElement('span');
  chainReqFrenSpan.style.fontWeight = 'bold';
-  chainReqFrenSpan.className = ColorTextPre + chainColorFrenzy;
+  chainReqFrenSpan.className = ColourTextPre + chainColourFrenzy;
  chainReqFrenSpan.textContent = Beautify(CacheChainFrenzyRequired);
  chainReqFrenFrag.appendChild(chainReqFrenSpan);
  if (chainTimeFrenzy !== '') {
@@ -279,10 +279,10 @@ export function ChainSection() {
    ),
  );

-  const chainWrathColorFrenzy =
+  const chainWrathColourFrenzy =
    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyWrathRequired
-      ? ColorRed
-      : ColorGreen;
+      ? ColourRed
+      : ColourGreen;
  const chainWrathTimeFrenzy =
    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyWrathRequired
      ? FormatTime(
@@ -294,7 +294,7 @@ export function ChainSection() {
  const chainWrathReqFrenFrag = document.createDocumentFragment();
  const chainWrathReqFrenSpan = document.createElement('span');
  chainWrathReqFrenSpan.style.fontWeight = 'bold';
-  chainWrathReqFrenSpan.className = ColorTextPre + chainWrathColorFrenzy;
+  chainWrathReqFrenSpan.className = ColourTextPre + chainWrathColourFrenzy;
  chainWrathReqFrenSpan.textContent = Beautify(CacheChainFrenzyWrathRequired);
  chainWrathReqFrenFrag.appendChild(chainWrathReqFrenSpan);
  if (chainWrathTimeFrenzy !== '') {
@@ -397,8 +397,10 @@ export function SpellsSection() {
  const section = document.createElement('div');
  section.className = 'CMStatsSpellsSection';

-  const conjureColor =
-    Game.cookies + GetWrinkConfigBank() < CacheConjure ? ColorRed : ColorGreen;
+  const conjureColour =
+    Game.cookies + GetWrinkConfigBank() < CacheConjure
+      ? ColourRed
+      : ColourGreen;
  const conjureTime =
    Game.cookies + GetWrinkConfigBank() < CacheConjure
      ? FormatTime(
@@ -409,7 +411,7 @@ export function SpellsSection() {
  const conjureReqFrag = document.createDocumentFragment();
  const conjureReqSpan = document.createElement('span');
  conjureReqSpan.style.fontWeight = 'bold';
-  conjureReqSpan.className = ColorTextPre + conjureColor;
+  conjureReqSpan.className = ColourTextPre + conjureColour;
  conjureReqSpan.textContent = Beautify(CacheConjure);
  conjureReqFrag.appendChild(conjureReqSpan);
  if (conjureTime !== '') {
@@ -434,10 +436,10 @@ export function SpellsSection() {
    ),
  );

-  const conjureFrenzyColor =
+  const conjureFrenzyColour =
    Game.cookies + GetWrinkConfigBank() < CacheConjure * 7
-      ? ColorRed
-      : ColorGreen;
+      ? ColourRed
+      : ColourGreen;
  const conjureFrenzyCur = Math.min(
    (Game.cookies + GetWrinkConfigBank()) * 0.15,
    CacheNoGoldSwitchCookiesPS * 60 * 30,
@@ -452,7 +454,7 @@ export function SpellsSection() {
  const conjureFrenzyReqFrag = document.createDocumentFragment();
  const conjureFrenzyReqSpan = document.createElement('span');
  conjureFrenzyReqSpan.style.fontWeight = 'bold';
-  conjureFrenzyReqSpan.className = ColorTextPre + conjureFrenzyColor;
+  conjureFrenzyReqSpan.className = ColourTextPre + conjureFrenzyColour;
  conjureFrenzyReqSpan.textContent = Beautify(CacheConjure * 7);
  conjureFrenzyReqFrag.appendChild(conjureFrenzyReqSpan);
  if (conjureFrenzyTime !== '') {
@@ -507,11 +509,11 @@ export function GardenSection() {
  const section = document.createElement('div');
  section.className = 'CMStatsGardenSection';

-  const bakeberryColor =
-    Game.cookies < Game.cookiesPs * 60 * 10 * 100 ? ColorRed : ColorGreen;
+  const bakeberryColour =
+    Game.cookies < Game.cookiesPs * 60 * 10 * 100 ? ColourRed : ColourGreen;
  const bakeberryFrag = document.createElement('span');
  bakeberryFrag.style.fontWeight = 'bold';
-  bakeberryFrag.className = ColorTextPre + bakeberryColor;
+  bakeberryFrag.className = ColourTextPre + bakeberryColour;
  bakeberryFrag.textContent = Beautify(Game.cookiesPs * 60 * 10 * 100);
  section.appendChild(
    StatsListing(
@@ -521,11 +523,11 @@ export function GardenSection() {
    ),
  );

-  const chocorootColor =
-    Game.cookies < Game.cookiesPs * 60 * 100 ? ColorRed : ColorGreen;
+  const chocorootColour =
+    Game.cookies < Game.cookiesPs * 60 * 100 ? ColourRed : ColourGreen;
  const chocorootFrag = document.createElement('span');
  chocorootFrag.style.fontWeight = 'bold';
-  chocorootFrag.className = ColorTextPre + chocorootColor;
+  chocorootFrag.className = ColourTextPre + chocorootColour;
  chocorootFrag.textContent = Beautify(Game.cookiesPs * 60 * 100);
  section.appendChild(
    StatsListing(
@@ -535,11 +537,11 @@ export function GardenSection() {
    ),
  );

-  const queenbeetColor =
-    Game.cookies < Game.cookiesPs * 60 * 60 * 25 ? ColorRed : ColorGreen;
+  const queenbeetColour =
+    Game.cookies < Game.cookiesPs * 60 * 60 * 25 ? ColourRed : ColourGreen;
  const queenbeetFrag = document.createElement('span');
  queenbeetFrag.style.fontWeight = 'bold';
-  queenbeetFrag.className = ColorTextPre + queenbeetColor;
+  queenbeetFrag.className = ColourTextPre + queenbeetColour;
  queenbeetFrag.textContent = Beautify(Game.cookiesPs * 60 * 60 * 25);
  section.appendChild(
    StatsListing(
@@ -549,11 +551,11 @@ export function GardenSection() {
    ),
  );

-  const duketaterColor =
-    Game.cookies < Game.cookiesPs * 60 * 15 * 100 ? ColorRed : ColorGreen;
+  const duketaterColour =
+    Game.cookies < Game.cookiesPs * 60 * 15 * 100 ? ColourRed : ColourGreen;
  const duketaterFrag = document.createElement('span');
  duketaterFrag.style.fontWeight = 'bold';
-  duketaterFrag.className = ColorTextPre + duketaterColor;
+  duketaterFrag.className = ColourTextPre + duketaterColour;
  duketaterFrag.textContent = Beautify(Game.cookiesPs * 60 * 15 * 100);
  section.appendChild(
    StatsListing(
--- a/src/Disp/MenuSections/SettingsPage.js
+++ b/src/Disp/MenuSections/SettingsPage.js
@@ -19,9 +19,9 @@ import {
 import Config from '../../Data/SettingsData';
 import ConfigDefault from '../../Data/SettingsDefault';
 import RefreshScale from '../HelperFunctions/RefreshScale';
-import UpdateColors from '../HelperFunctions/UpdateColors';
+import UpdateColours from '../HelperFunctions/UpdateColours';
 import PlaySound from '../Notifications/Sound';
-import { Colors } from '../VariablesAndData';
+import { Colours } from '../VariablesAndData';

 /**
 * This function creates a header-object for the options page
@@ -169,24 +169,24 @@ function CreatePrefOption(config) {
  }
  if (Config[config].type === 'color') {
    div.className = '';
-    for (let i = 0; i < Colors.length; i++) {
+    for (let i = 0; i < Colours.length; i++) {
      const innerDiv = document.createElement('div');
      innerDiv.className = 'listing';
      const input = document.createElement('input');
-      input.id = Colors[i];
+      input.id = Colours[i];
      input.style.width = '65px';
-      input.setAttribute('value', CMOptions.Colors[Colors[i]]);
+      input.setAttribute('value', CMOptions.Colours[Colours[i]]);
      innerDiv.appendChild(input);
      const change = function () {
-        CMOptions.Colors[this.targetElement.id] = this.toHEXString();
-        UpdateColors();
+        CMOptions.Colours[this.targetElement.id] = this.toHEXString();
+        UpdateColours();
        SaveConfig();
        Game.UpdateMenu();
      };
      // eslint-disable-next-line no-new
      new JsColor(input, { hash: true, position: 'right', onInput: change });
      const label = document.createElement('label');
-      label.textContent = Config.Colors.desc[Colors[i]];
+      label.textContent = Config.Colours.desc[Colours[i]];
      innerDiv.appendChild(label);
      div.appendChild(innerDiv);
    }
--- a/src/Disp/Tooltips/CreateTooltip.js
+++ b/src/Disp/Tooltips/CreateTooltip.js
@@ -1,13 +1,13 @@
 /* eslint-disable no-param-reassign */
 import { CMOptions } from '../../Config/VariablesAndData';
 import {
-  ColorTextPre,
-  ColorBorderPre,
-  ColorGray,
-  ColorBlue,
-  ColorRed,
-  ColorYellow,
-  ColorPurple,
+  ColourTextPre,
+  ColourBorderPre,
+  ColourGray,
+  ColourBlue,
+  ColourRed,
+  ColourYellow,
+  ColourPurple,
  TooltipType,
 } from '../VariablesAndData';

@@ -24,7 +24,7 @@ export function TooltipCreateTooltipBox() {
  tooltipBox.style.padding = '4px';
  tooltipBox.style.margin = '0px -4px';
  tooltipBox.id = 'CMTooltipBorder';
-  tooltipBox.className = ColorTextPre + ColorGray;
+  tooltipBox.className = ColourTextPre + ColourGray;
  return tooltipBox;
 }

@@ -37,7 +37,7 @@ export function TooltipCreateHeader(text) {
  const div = document.createElement('div');
  div.style.fontWeight = 'bold';
  div.id = `${text}Title`;
-  div.className = ColorTextPre + ColorBlue;
+  div.className = ColourTextPre + ColourBlue;
  div.textContent = text;
  return div;
 }
@@ -66,13 +66,13 @@ export function TooltipCreateWarningSection() {
    box.id = boxId;
    box.style.display = 'none';
    box.style.transition = 'opacity 0.1s ease-out';
-    box.className = ColorBorderPre + color;
+    box.className = ColourBorderPre + color;
    box.style.padding = '2px';
    box.style.background = '#000 url(img/darkNoise.png)';
    const labelDiv = document.createElement('div');
    box.appendChild(labelDiv);
    const labelSpan = document.createElement('span');
-    labelSpan.className = ColorTextPre + color;
+    labelSpan.className = ColourTextPre + color;
    labelSpan.style.fontWeight = 'bold';
    labelSpan.textContent = labelTextFront;
    labelDiv.appendChild(labelSpan);
@@ -89,7 +89,7 @@ export function TooltipCreateWarningSection() {
  TooltipWarn.appendChild(
    create(
      'CMDispTooltipWarnLucky',
-      ColorRed,
+      ColourRed,
      'Warning: ',
      'Purchase of this item will put you under the number of Cookies required for "Lucky!"',
      'CMDispTooltipWarnLuckyText',
@@ -99,7 +99,7 @@ export function TooltipCreateWarningSection() {
  TooltipWarn.appendChild(
    create(
      'CMDispTooltipWarnLuckyFrenzy',
-      ColorYellow,
+      ColourYellow,
      'Warning: ',
      'Purchase of this item will put you under the number of Cookies required for "Lucky!" (Frenzy)',
      'CMDispTooltipWarnLuckyFrenzyText',
@@ -109,7 +109,7 @@ export function TooltipCreateWarningSection() {
  TooltipWarn.appendChild(
    create(
      'CMDispTooltipWarnConjure',
-      ColorPurple,
+      ColourPurple,
      'Warning: ',
      'Purchase of this item will put you under the number of Cookies required for "Conjure Baked Goods"',
      'CMDispTooltipWarnConjureText',
@@ -119,7 +119,7 @@ export function TooltipCreateWarningSection() {
  TooltipWarn.appendChild(
    create(
      'CMDispTooltipWarnConjureFrenzy',
-      ColorPurple,
+      ColourPurple,
      'Warning: ',
      'Purchase of this item will put you under the number of Cookies required for "Conjure Baked Goods" (Frenzy)',
      'CMDispTooltipWarnConjureFrenzyText',
@@ -129,7 +129,7 @@ export function TooltipCreateWarningSection() {
  TooltipWarn.appendChild(
    create(
      'CMDispTooltipWarnEdifice',
-      ColorPurple,
+      ColourPurple,
      'Warning: ',
      'Purchase of this item will put you under the number of Cookies needed for "Spontaneous Edifice" to possibly give you your most expensive building"',
      'CMDispTooltipWarnEdificeText',
@@ -139,7 +139,7 @@ export function TooltipCreateWarningSection() {
  TooltipWarn.appendChild(
    create(
      'CMDispTooltipWarnUser',
-      ColorRed,
+      ColourRed,
      'Warning: ',
      `Purchase of this item will put you under the number of Cookies equal to ${CMOptions.ToolWarnUser} seconds of CPS`,
      'CMDispTooltipWarnUserText',
--- a/src/Disp/Tooltips/Tooltip.js
+++ b/src/Disp/Tooltips/Tooltip.js
@@ -3,7 +3,7 @@ import UpdateTooltips, * as UpdateTooltip from './UpdateTooltips';
 import { TooltipCreateTooltipBox } from './CreateTooltip';
 import {
  Beautify,
-  GetTimeColor,
+  GetTimeColour,
 } from '../BeautifyAndFormatting/BeautifyFormatting';
 import CopyData from '../../Sim/SimulationData/CopyData';
 import {
@@ -65,7 +65,7 @@ export function CreateTooltip(type, name) {
            `so far<br/>&bull; <b>${Beautify(amortizeAmount)}</b> ${
              Math.floor(amortizeAmount) === 1 ? 'cookie' : 'cookies'
            } left to amortize (${
-              GetTimeColor(
+              GetTimeColour(
                (buildPrice - Game.Objects[name].totalCookies) /
                  (Game.Objects[name].storedTotalCps * Game.globalCpsMult),
              ).text
--- a/src/Disp/Tooltips/TypesOfTooltips/Building.js
+++ b/src/Disp/Tooltips/TypesOfTooltips/Building.js
@@ -8,12 +8,12 @@ import { SimObjects } from '../../../Sim/VariablesAndData';
 import {
  Beautify,
  FormatTime,
-  GetTimeColor,
+  GetTimeColour,
 } from '../../BeautifyAndFormatting/BeautifyFormatting';
 import GetCPS from '../../HelperFunctions/GetCPS';
 import GetWrinkConfigBank from '../../HelperFunctions/GetWrinkConfigBank';
 import {
-  ColorTextPre,
+  ColourTextPre,
  LastTargetTooltipBuilding,
  TooltipBonusIncome,
  TooltipName,
@@ -54,22 +54,23 @@ export default function Building() {
          CMOptions.ScaleSeparator ? ',' : '.'
        }01% of income)`;
      }
-      l('CMTooltipBorder').className = ColorTextPre + target[TooltipName].color;
+      l('CMTooltipBorder').className =
+        ColourTextPre + target[TooltipName].color;
      if (CMOptions.PPDisplayTime)
        l('CMTooltipPP').textContent = FormatTime(target[TooltipName].pp);
      else l('CMTooltipPP').textContent = Beautify(target[TooltipName].pp, 2);
-      l('CMTooltipPP').className = ColorTextPre + target[TooltipName].color;
-      const timeColor = GetTimeColor(
+      l('CMTooltipPP').className = ColourTextPre + target[TooltipName].color;
+      const timeColour = GetTimeColour(
        (TooltipPrice - (Game.cookies + GetWrinkConfigBank())) / GetCPS(),
      );
-      l('CMTooltipTime').textContent = timeColor.text;
+      l('CMTooltipTime').textContent = timeColour.text;
      if (
-        timeColor.text === 'Done!' &&
+        timeColour.text === 'Done!' &&
        Game.cookies < target[TooltipName].price
      ) {
-        l('CMTooltipTime').textContent = `${timeColor.text} (with Wrink)`;
-      } else l('CMTooltipTime').textContent = timeColor.text;
-      l('CMTooltipTime').className = ColorTextPre + timeColor.color;
+        l('CMTooltipTime').textContent = `${timeColour.text} (with Wrink)`;
+      } else l('CMTooltipTime').textContent = timeColour.text;
+      l('CMTooltipTime').className = ColourTextPre + timeColour.color;
    }

    // Add "production left till next achievement"-bar
--- a/src/Disp/Tooltips/TypesOfTooltips/Grimoire.js
+++ b/src/Disp/Tooltips/TypesOfTooltips/Grimoire.js
@@ -2,11 +2,11 @@ import { CacheNoGoldSwitchCookiesPS } from '../../../Cache/VariablesAndData';
 import { CMOptions } from '../../../Config/VariablesAndData';
 import {
  Beautify,
-  GetTimeColor,
+  GetTimeColour,
 } from '../../BeautifyAndFormatting/BeautifyFormatting';
 import CalculateGrimoireRefillTime from '../../HelperFunctions/CalculateGrimoireRefillTime';
 import GetWrinkConfigBank from '../../HelperFunctions/GetWrinkConfigBank';
-import { ColorTextPre, TooltipName } from '../../VariablesAndData';
+import { ColourTextPre, TooltipName } from '../../VariablesAndData';
 import * as Create from '../CreateTooltip';

 /**
@@ -25,11 +25,11 @@ export default function Grimoire() {
    const time = document.createElement('div');
    time.id = 'CMTooltipTime';
    tooltipBox.appendChild(time);
-    const timeColor = GetTimeColor(
+    const timeColour = GetTimeColour(
      CalculateGrimoireRefillTime(minigame.magic, minigame.magicM, spellCost),
    );
-    time.textContent = timeColor.text;
-    time.className = ColorTextPre + timeColor.color;
+    time.textContent = timeColour.text;
+    time.className = ColourTextPre + timeColour.color;

    // Time left untill magic spent is recovered
    if (spellCost <= minigame.magic) {
@@ -37,15 +37,15 @@ export default function Grimoire() {
      const recover = document.createElement('div');
      recover.id = 'CMTooltipRecover';
      tooltipBox.appendChild(recover);
-      const recoverColor = GetTimeColor(
+      const recoverColour = GetTimeColour(
        CalculateGrimoireRefillTime(
          Math.max(0, minigame.magic - spellCost),
          minigame.magicM,
          minigame.magic,
        ),
      );
-      recover.textContent = recoverColor.text;
-      recover.className = ColorTextPre + recoverColor.color;
+      recover.textContent = recoverColour.text;
+      recover.className = ColourTextPre + recoverColour.color;
    }

    // Extra information on cookies gained when spell is Conjure Baked Goods (Name === 0)
--- a/src/Disp/Tooltips/TypesOfTooltips/SugarLump.js
+++ b/src/Disp/Tooltips/TypesOfTooltips/SugarLump.js
@@ -1,6 +1,6 @@
 import { CMOptions } from '../../../Config/VariablesAndData';
-import GetLumpColor from '../../HelperFunctions/GetLumpColor';
-import { ColorTextPre } from '../../VariablesAndData';
+import GetLumpColour from '../../HelperFunctions/GetLumpColour';
+import { ColourTextPre } from '../../VariablesAndData';
 import * as Create from '../CreateTooltip';
 /**
 * This function adds extra info to the Sugar Lump tooltip
@@ -15,8 +15,8 @@ export default function SugarLump() {
    const lumpType = document.createElement('div');
    lumpType.id = 'CMTooltipTime';
    tooltipBox.appendChild(lumpType);
-    const lumpColor = GetLumpColor(Game.lumpCurrentType);
-    lumpType.textContent = lumpColor.text;
-    lumpType.className = ColorTextPre + lumpColor.color;
+    const lumpColour = GetLumpColour(Game.lumpCurrentType);
+    lumpType.textContent = lumpColour.text;
+    lumpType.className = ColourTextPre + lumpColour.color;
  } else l('CMTooltipArea').style.display = 'none';
 }
--- a/src/Disp/Tooltips/TypesOfTooltips/Upgrade.js
+++ b/src/Disp/Tooltips/TypesOfTooltips/Upgrade.js
@@ -6,12 +6,12 @@ import { CMOptions } from '../../../Config/VariablesAndData';
 import {
  Beautify,
  FormatTime,
-  GetTimeColor,
+  GetTimeColour,
 } from '../../BeautifyAndFormatting/BeautifyFormatting';
 import GetCPS from '../../HelperFunctions/GetCPS';
 import GetWrinkConfigBank from '../../HelperFunctions/GetWrinkConfigBank';
 import {
-  ColorTextPre,
+  ColourTextPre,
  TooltipBonusIncome,
  TooltipBonusMouse,
  TooltipName,
@@ -56,7 +56,7 @@ export default function Upgrade() {
        }01% of income)`;
      }
      l('CMTooltipBorder').className =
-        ColorTextPre +
+        ColourTextPre +
        CacheUpgrades[Game.UpgradesInStore[TooltipName].name].color;
      // If clicking power upgrade
      if (TooltipBonusMouse) {
@@ -81,21 +81,21 @@ export default function Upgrade() {
            2,
          );
        l('CMTooltipPP').className =
-          ColorTextPre +
+          ColourTextPre +
          CacheUpgrades[Game.UpgradesInStore[TooltipName].name].color;
      }
    }
-    const timeColor = GetTimeColor(
+    const timeColour = GetTimeColour(
      (TooltipPrice - (Game.cookies + GetWrinkConfigBank())) / GetCPS(),
    );
-    l('CMTooltipTime').textContent = timeColor.text;
+    l('CMTooltipTime').textContent = timeColour.text;
    if (
-      timeColor.text === 'Done!' &&
+      timeColour.text === 'Done!' &&
      Game.cookies < Game.UpgradesInStore[TooltipName].getPrice()
    ) {
-      l('CMTooltipTime').textContent = `${timeColor.text} (with Wrink)`;
-    } else l('CMTooltipTime').textContent = timeColor.text;
-    l('CMTooltipTime').className = ColorTextPre + timeColor.color;
+      l('CMTooltipTime').textContent = `${timeColour.text} (with Wrink)`;
+    } else l('CMTooltipTime').textContent = timeColour.text;
+    l('CMTooltipTime').className = ColourTextPre + timeColour.color;

    // Add extra info to Chocolate egg tooltip
    if (Game.UpgradesInStore[TooltipName].name === 'Chocolate egg') {
--- a/src/Disp/VariablesAndData.js
+++ b/src/Disp/VariablesAndData.js
@@ -7,32 +7,32 @@ export let DispCSS;
 /**
 * These are variables used to create DOM object names and id (e.g., 'CMTextTooltip)
 */
-export const ColorTextPre = 'CMText';
-export const ColorBackPre = 'CMBack';
-export const ColorBorderPre = 'CMBorder';
+export const ColourTextPre = 'CMText';
+export const ColourBackPre = 'CMBack';
+export const ColourBorderPre = 'CMBorder';

 /**
 * These are variables which can be set in the options by the user to standardize colours throughout CookieMonster
 */
-export const ColorBlue = 'Blue';
-export const ColorGreen = 'Green';
-export const ColorYellow = 'Yellow';
-export const ColorOrange = 'Orange';
-export const ColorRed = 'Red';
-export const ColorPurple = 'Purple';
-export const ColorGray = 'Gray';
-export const ColorPink = 'Pink';
-export const ColorBrown = 'Brown';
-export const Colors = [
-  ColorGray,
-  ColorBlue,
-  ColorGreen,
-  ColorYellow,
-  ColorOrange,
-  ColorRed,
-  ColorPurple,
-  ColorPink,
-  ColorBrown,
+export const ColourBlue = 'Blue';
+export const ColourGreen = 'Green';
+export const ColourYellow = 'Yellow';
+export const ColourOrange = 'Orange';
+export const ColourRed = 'Red';
+export const ColourPurple = 'Purple';
+export const ColourGray = 'Gray';
+export const ColourPink = 'Pink';
+export const ColourBrown = 'Brown';
+export const Colours = [
+  ColourGray,
+  ColourBlue,
+  ColourGreen,
+  ColourYellow,
+  ColourOrange,
+  ColourRed,
+  ColourPurple,
+  ColourPink,
+  ColourBrown,
 ];

 /**
@@ -116,13 +116,13 @@ export const ClickTimes = [1, 5, 10, 15, 30];
 /**
 * This array is used to give certain timers specific colours
 */
-export const BuffColors = {
-  Frenzy: ColorYellow,
-  'Dragon Harvest': ColorBrown,
-  'Elder frenzy': ColorGreen,
-  Clot: ColorRed,
-  'Click frenzy': ColorBlue,
-  Dragonflight: ColorPink,
+export const BuffColours = {
+  Frenzy: ColourYellow,
+  'Dragon Harvest': ColourBrown,
+  'Elder frenzy': ColourGreen,
+  Clot: ColourRed,
+  'Click frenzy': ColourBlue,
+  Dragonflight: ColourPink,
 };

 /**