Changed order and reformatted settings #721

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);
+  CacheColour(CacheObjects1, 1);
-  CacheColor(CacheObjects10, 10);
+  CacheColour(CacheObjects10, 10);
-  CacheColor(CacheObjects100, 100);
+  CacheColour(CacheObjects100, 100);
 }

src/Cache/PP/ColourOfPP.js

@@ -1,13 +1,13 @@
 import { CMOptions } from '../../Config/VariablesAndData';
 import GetCPS from '../../Disp/HelperFunctions/GetCPS';
 import {
-  ColorBlue,
+  ColourBlue,
-  ColorGray,
+  ColourGray,
-  ColorGreen,
+  ColourGreen,
-  ColorOrange,
+  ColourOrange,
-  ColorPurple,
+  ColourPurple,
-  ColorRed,
+  ColourRed,
-  ColorYellow,
+  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;
+  if (me.pp <= 0 || me.pp === Infinity) color = ColourGray;
-  else if (me.pp < CacheMinPP) color = ColorBlue;
+  else if (me.pp < CacheMinPP) color = ColourBlue;
-  else if (me.pp === CacheMinPP) color = ColorGreen;
+  else if (me.pp === CacheMinPP) color = ColourGreen;
-  else if (me.pp < CachePPArray[10][0]) color = ColorYellow;
+  else if (me.pp < CachePPArray[10][0]) color = ColourYellow;
-  else if (me.pp < CachePPArray[20][0]) color = ColorOrange;
+  else if (me.pp < CachePPArray[20][0]) color = ColourOrange;
-  else if (me.pp > CachePPArray[30][0]) color = ColorRed;
+  else if (me.pp > CachePPArray[30][0]) color = ColourRed;
-  else color = ColorPurple;
+  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;
 }

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

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',
 };
 

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,
+  UpBarColour: 1,
-  PPDisplayTime: 0,
-  UpBarColor: 1,
   UpgradeBarFixedPos: 1,
-  CalcWrink: 0,
+  SortBuildings: 0,
-  CPSMode: 1,
+  SortUpgrades: 0,
-  AvgCPSHist: 3,
+  DragonAuraInfo: 1,
-  AvgClicksHist: 0,
+  GrimoireBar: 1,
-  PPExcludeTop: 0,
+  GCTimer: 1,
-  PPRigidelMode: 0,
+  Favicon: 1,
-  PPSecondsLowerLimit: 0,
+  WrinklerButtons: 1,
-  PPOnlyConsiderBuyable: 0,
+  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,

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,
+  ColourGreen,
-  ColorOrange,
+  ColourOrange,
-  ColorRed,
+  ColourRed,
-  ColorYellow,
+  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;
+    if (time > 300) color = ColourRed;
-    else if (time > 60) color = ColorOrange;
+    else if (time > 60) color = ColourOrange;
-    else color = ColorYellow;
+    else color = ColourYellow;
   }
   return { text, color };
 }

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()
+ * The function is called by CM.Disp.Draw(), CM.Disp.UpdateColours() & CM.Disp.RefreshScale()
- * And by changes in CM.Options.BuildColor, CM.Options.SortBuild & CM.Data.Config.BulkBuildColor
+ * 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

src/Disp/BuildingsUpgrades/UpgradeBar.js

@@ -1,13 +1,13 @@
 import {
-  ColorBackPre,
+  ColourBackPre,
-  ColorBlue,
+  ColourBlue,
-  ColorGray,
+  ColourGray,
-  ColorGreen,
+  ColourGreen,
-  ColorOrange,
+  ColourOrange,
-  ColorPurple,
+  ColourPurple,
-  ColorRed,
+  ColourRed,
-  ColorTextPre,
+  ColourTextPre,
-  ColorYellow,
+  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('CMUpgradeBarBlue', ColourBlue));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGreen', ColorGreen));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGreen', ColourGreen));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarYellow', ColorYellow));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarYellow', ColourYellow));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarOrange', ColorOrange));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarOrange', ColourOrange));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarRed', ColorRed));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarRed', ColourRed));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarPurple', ColorPurple));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarPurple', ColourPurple));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGray', ColorGray));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGray', ColourGray));
 
   l('upgrades').parentNode.insertBefore(
     UpgradeBar,

src/Disp/BuildingsUpgrades/Upgrades.js

@@ -2,26 +2,26 @@
 import { CacheUpgrades } from '../../Cache/VariablesAndData';
 import { CMOptions } from '../../Config/VariablesAndData';
 import {
-  ColorBackPre,
+  ColourBackPre,
-  ColorBlue,
+  ColourBlue,
-  ColorGray,
+  ColourGray,
-  ColorGreen,
+  ColourGreen,
-  ColorOrange,
+  ColourOrange,
-  ColorPurple,
+  ColourPurple,
-  ColorRed,
+  ColourRed,
-  Colors,
+  Colours,
-  ColorYellow,
+  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;
+            ColourBackPre + CacheUpgrades[me.name].color;
-          addedColor = true;
+          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;
+      if (CacheUpgrades[me.name].color === ColourBlue) blue += 1;
-      else if (CacheUpgrades[me.name].color === ColorGreen) green += 1;
+      else if (CacheUpgrades[me.name].color === ColourGreen) green += 1;
-      else if (CacheUpgrades[me.name].color === ColorYellow) yellow += 1;
+      else if (CacheUpgrades[me.name].color === ColourYellow) yellow += 1;
-      else if (CacheUpgrades[me.name].color === ColorOrange) orange += 1;
+      else if (CacheUpgrades[me.name].color === ColourOrange) orange += 1;
-      else if (CacheUpgrades[me.name].color === ColorRed) red += 1;
+      else if (CacheUpgrades[me.name].color === ColourRed) red += 1;
-      else if (CacheUpgrades[me.name].color === ColorPurple) purple += 1;
+      else if (CacheUpgrades[me.name].color === ColourPurple) purple += 1;
-      else if (CacheUpgrades[me.name].color === ColorGray) gray += 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

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 };
-}

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 };
+}

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
-}

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
+}

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,
+  ColourBlue,
-  ColorTextPre,
+  ColourTextPre,
-  ColorYellow,
+  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;
     });
   }
 }

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';

src/Disp/InfoBars/TimerBar.js

@@ -3,11 +3,11 @@
 import { UpdateBotTimerBarPosition } from '../../Config/SpecificToggles';
 import { CMOptions } from '../../Config/VariablesAndData';
 import {
-  BuffColors,
+  BuffColours,
-  ColorBackPre,
+  ColourBackPre,
-  ColorGray,
+  ColourGray,
-  ColorOrange,
+  ColourOrange,
-  ColorPurple,
+  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: 'CMTimerBarGCMinBar', color: ColourGray },
-    { id: 'CMTimerBarGCBar', color: ColorPurple },
+    { id: 'CMTimerBarGCBar', color: ColourPurple },
   ]);
   TimerBar.appendChild(CMTimerBarGC);
 
   // Create standard Reindeer bar
   const CMTimerBarRen = CreateTimer('CMTimerBarRen', 'Next Reindeer', [
-    { id: 'CMTimerBarRenMinBar', color: ColorGray },
+    { id: 'CMTimerBarRenMinBar', color: ColourGray },
-    { id: 'CMTimerBarRenBar', color: ColorOrange },
+    { 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') {
+        if (typeof BuffColours[Game.buffs[i].name] !== 'undefined') {
-          classColor = BuffColors[Game.buffs[i].name];
+          classColour = BuffColours[Game.buffs[i].name];
-        } else classColor = ColorPurple;
+        } else classColour = ColourPurple;
-        timer.lastChild.children[1].className = ColorBackPre + classColor;
+        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(

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 =
+  const luckyColour =
-    Game.cookies + GetWrinkConfigBank() < CacheLucky ? ColorRed : ColorGreen;
+    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
+      ? ColourRed
-      : ColorGreen;
+      : 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
+      ? ColourRed
-      : ColorGreen;
+      : 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
+      ? ColourRed
-      : ColorGreen;
+      : 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
+      ? ColourRed
-      : ColorGreen;
+      : 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
+      ? ColourRed
-      : ColorGreen;
+      : 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 =
+  const conjureColour =
-    Game.cookies + GetWrinkConfigBank() < CacheConjure ? ColorRed : ColorGreen;
+    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
+      ? ColourRed
-      : ColorGreen;
+      : 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 =
+  const bakeberryColour =
-    Game.cookies < Game.cookiesPs * 60 * 10 * 100 ? ColorRed : ColorGreen;
+    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 =
+  const chocorootColour =
-    Game.cookies < Game.cookiesPs * 60 * 100 ? ColorRed : ColorGreen;
+    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 =
+  const queenbeetColour =
-    Game.cookies < Game.cookiesPs * 60 * 60 * 25 ? ColorRed : ColorGreen;
+    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 =
+  const duketaterColour =
-    Game.cookies < Game.cookiesPs * 60 * 15 * 100 ? ColorRed : ColorGreen;
+    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(

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();
+        CMOptions.Colours[this.targetElement.id] = this.toHEXString();
-        UpdateColors();
+        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);
     }

src/Disp/Tooltips/CreateTooltip.js

@@ -1,13 +1,13 @@
 /* eslint-disable no-param-reassign */
 import { CMOptions } from '../../Config/VariablesAndData';
 import {
-  ColorTextPre,
+  ColourTextPre,
-  ColorBorderPre,
+  ColourBorderPre,
-  ColorGray,
+  ColourGray,
-  ColorBlue,
+  ColourBlue,
-  ColorRed,
+  ColourRed,
-  ColorYellow,
+  ColourYellow,
-  ColorPurple,
+  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',

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

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;
+      l('CMTooltipPP').className = ColourTextPre + target[TooltipName].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 < target[TooltipName].price
       ) {
-        l('CMTooltipTime').textContent = `${timeColor.text} (with Wrink)`;
+        l('CMTooltipTime').textContent = `${timeColour.text} (with Wrink)`;
-      } else l('CMTooltipTime').textContent = timeColor.text;
+      } else l('CMTooltipTime').textContent = timeColour.text;
-      l('CMTooltipTime').className = ColorTextPre + timeColor.color;
+      l('CMTooltipTime').className = ColourTextPre + timeColour.color;
     }
 
     // Add "production left till next achievement"-bar

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.textContent = timeColour.text;
-    time.className = ColorTextPre + timeColor.color;
+    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.textContent = recoverColour.text;
-      recover.className = ColorTextPre + recoverColor.color;
+      recover.className = ColourTextPre + recoverColour.color;
     }
 
     // Extra information on cookies gained when spell is Conjure Baked Goods (Name === 0)

src/Disp/Tooltips/TypesOfTooltips/SugarLump.js

@@ -1,6 +1,6 @@
 import { CMOptions } from '../../../Config/VariablesAndData';
-import GetLumpColor from '../../HelperFunctions/GetLumpColor';
+import GetLumpColour from '../../HelperFunctions/GetLumpColour';
-import { ColorTextPre } from '../../VariablesAndData';
+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);
+    const lumpColour = GetLumpColour(Game.lumpCurrentType);
-    lumpType.textContent = lumpColor.text;
+    lumpType.textContent = lumpColour.text;
-    lumpType.className = ColorTextPre + lumpColor.color;
+    lumpType.className = ColourTextPre + lumpColour.color;
   } else l('CMTooltipArea').style.display = 'none';
 }

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)`;
+      l('CMTooltipTime').textContent = `${timeColour.text} (with Wrink)`;
-    } else l('CMTooltipTime').textContent = timeColor.text;
+    } else l('CMTooltipTime').textContent = timeColour.text;
-    l('CMTooltipTime').className = ColorTextPre + timeColor.color;
+    l('CMTooltipTime').className = ColourTextPre + timeColour.color;
 
     // Add extra info to Chocolate egg tooltip
     if (Game.UpgradesInStore[TooltipName].name === 'Chocolate egg') {

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 ColourTextPre = 'CMText';
-export const ColorBackPre = 'CMBack';
+export const ColourBackPre = 'CMBack';
-export const ColorBorderPre = 'CMBorder';
+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 ColourBlue = 'Blue';
-export const ColorGreen = 'Green';
+export const ColourGreen = 'Green';
-export const ColorYellow = 'Yellow';
+export const ColourYellow = 'Yellow';
-export const ColorOrange = 'Orange';
+export const ColourOrange = 'Orange';
-export const ColorRed = 'Red';
+export const ColourRed = 'Red';
-export const ColorPurple = 'Purple';
+export const ColourPurple = 'Purple';
-export const ColorGray = 'Gray';
+export const ColourGray = 'Gray';
-export const ColorPink = 'Pink';
+export const ColourPink = 'Pink';
-export const ColorBrown = 'Brown';
+export const ColourBrown = 'Brown';
-export const Colors = [
+export const Colours = [
-  ColorGray,
+  ColourGray,
-  ColorBlue,
+  ColourBlue,
-  ColorGreen,
+  ColourGreen,
-  ColorYellow,
+  ColourYellow,
-  ColorOrange,
+  ColourOrange,
-  ColorRed,
+  ColourRed,
-  ColorPurple,
+  ColourPurple,
-  ColorPink,
+  ColourPink,
-  ColorBrown,
+  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 = {
+export const BuffColours = {
-  Frenzy: ColorYellow,
+  Frenzy: ColourYellow,
-  'Dragon Harvest': ColorBrown,
+  'Dragon Harvest': ColourBrown,
-  'Elder frenzy': ColorGreen,
+  'Elder frenzy': ColourGreen,
-  Clot: ColorRed,
+  Clot: ColourRed,
-  'Click frenzy': ColorBlue,
+  'Click frenzy': ColourBlue,
-  Dragonflight: ColorPink,
+  Dragonflight: ColourPink,
 };
 
 /**