Merge pull request #748 from Aktanusa/dev

Master to version 2.031.7

.eslintignore

@@ -1,6 +0,0 @@
-CookieMonster.js
-CookieMonster.user.js
-src/*.js
-!src/CookieMonster.js
-!src/*/*
-dist/*

.eslintrc.js

@@ -8,33 +8,27 @@ module.exports = {
     l: 'readonly',
     b64_to_utf8: 'readonly',
     utf8_to_b64: 'readonly',
-		realAudio: 'readonly',
     BeautifyAll: 'readonly',
-		CM: 'writable',
-		unsafeWindow: 'readonly',
+    PlaySound: 'readonly',
   },
-	extends: 'airbnb-base',
+  extends: ['airbnb-base', 'plugin:prettier/recommended'],
   parserOptions: {
     ecmaVersion: 12,
   },
+  ignorePatterns: ['*CookieMonster*.js', 'dist/*', 'node_modules/*'],
   rules: {
-		indent: ['error', 'tab'],
-		'import/no-named-default': 'off',
     'import/no-mutable-exports': 'off',
-		'no-tabs': 'off',
-		'max-len': 'off',
-		'no-param-reassign': 'off',
-		'no-plusplus': 'off',
-		'no-new-func': 'off',
-		'no-restricted-syntax': 'off',
-		'no-mixed-operators': 'off',
-		'prefer-destructuring': 'off',
+    'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
     'func-names': 'off',
-		'no-console': 'off',
-		'no-nested-ternary': 'off',
-		'prefer-arrow-callback': 'off',
-		'no-new': 'off',
-		'no-alert': 'off',
-		'no-restricted-globals': 'off',
+    'prefer-destructuring': ['error', { object: true, array: false }],
+    'max-len': [
+      1,
+      {
+        code: 100,
+        ignoreComments: true,
+        ignoreStrings: true,
+        ignoreTemplateLiterals: true,
+      },
+    ],
   },
 };

.github/CONTRIBUTING.md

@@ -0,0 +1,18 @@
+Cookie Monster is written to modify Cookie Clicker as little as possible. This means the data is copied to simulate instead of actually modifying the current values and reverting later. The benefit is that CM should never mess up any data. The downside is that there is an extra overhead to copy and store the copied data.
+
+The following is a short description of the various `src` directories and their contents:
+
+JS | Description
+-- | -
+Cache | Functions related to creating and storing data cache
+Config | Functions related to manipulating CM configuration
+Data | Hard coded values
+Disp | Functions related to displaying CM's UI
+InitSaveLoad | Functions related to registering the CM object with the Game's Modding API
+Main | Functions related to the main loop and initializing CM
+Sim | Functions related to simulate something
+
+These are some additional guidelines:
+- Try to use DOM as much as possible instead of using string manipulation to modify HTML.
+- Please be descriptive of your commits. If the commit is related to an issue or PR, please add the issue/PR number to the commit message.
+- PR's should target the `dev` branch

.github/ISSUE_TEMPLATE/bug_report.md

@@ -19,5 +19,6 @@ If applicable, add screenshots to help explain your problem.
 
 **Save file**
 ```
-If applicable please copy your save file here
+Please add a save file here.
+This makes debugging much easier as we do not always have a good test save to debug the issue
 ```

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

CONTRIBUTING.md

@@ -1,22 +0,0 @@
-The following is a description of the our approach to the project.
-
-Cookie Monster is written to modify Cookie Clicker as little as possible.  This means the data is copied to simulate instead of actually modifying the current values and reverting later.  The benefit is that CM should never mess up any data.  The downside is that there is an extra overhead to copy and store the copied data.
-
-Here is a description of what should be stored in each of the source JS. Make edits to the source file first and then use the combine file to compile the final file:
-
-JS | Description
--- | -
-Cache | Functions related to creating and storing data cache
-Config | Functions related to manipulating CM configuration
-Data | Hard coded values
-Disp | Functions related to displaying CM's UI
-Footer | The footer of CM's JS (not modified often or ever)
-Header | The header of CM's JS (not modified often or ever)
-Main | Functions related to the main loop and initializing CM
-Sim | Functions related to simulate something
-
-These are some additional guidelines:
-- Try to use DOM as much as possible instead of using string manipulation to modify HTML.
-- Please be descriptive of your commits.  If the commit is related to an issue or PR, please add the issue/PR number to the commit message.
-- Try to follow the formatting and annotation as specified by JSCode
-- PR's should target the `dev` branch

README.md

@@ -16,15 +16,16 @@ max(cost - cookies in bank, 0)/cps + cost/Δ cps
 
 Cookie Monster also indicates the time left before being able to buy an upgrade or building, and takes it into consideration. It will take *everything* in consideration, meaning if buying a building also unlocks an achievement which boosts your income, which unlocks an achievement, it will know and highlight that building's value.
 
-This index is computed for buildings and upgrades. If the relevant option is enabled, it will color-code each of them based on their value:
+This index is computed for buildings and upgrades. If the relevant option is enabled, it will color-code each of them based on their value. It compares the PP across all possible buy options: if a buy 10 option is better than any of the buy 1 options Cookie Monster will colour them accordingly.
+Cookie Monster uses the following standard colours:
 
-* Light Blue: (upgrades) This item has a better PP than any building
-* Green: This item has the best PP
-* Yellow: This item is not the best, but it is closer to best than it is to worst
-* Orange: This item is not the worst, but it is closer to worst than it is to best
-* Red: This item has the worst PP
-* Purple: (upgrades) This item has a worse PP than any building
-* Gray: (upgrades) This item has not been calculated and/or cannot be calculated due to no definitive worth.
+* Light Blue: (upgrades) This item has a better PP than the best building to buy
+* Green: This building has the best PP
+* Yellow: This building is within the top 10 of best PP's
+* Orange: This building is within the top 20 of best PP's
+* Red: This building is within the top 30 of best PP's
+* Purple: This building is worse than the top 10 of best PP's
+* Gray: This item does not have a PP, often this means that there is no change to CPS
 
 Note: For this index, **lower is better**, meaning a building with a PP of 1 is more interesting than one with a PP of 3.
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "cookiemonster-mod",
-    "version": "2.031.5",
+    "version": "2.031.7",
     "description": "Cookie Monster is an add-on that you can load into Cookie Clicker which offers a wide range of tools and statistics to enhance the game. It is not a cheat interface – although it does offer helpers for golden cookies and such, everything can be toggled off at will to only leave how much information you want. This is a helper and everything is an option.",
     "main": "CookieMonster.js",
     "keywords": [
@@ -11,12 +11,13 @@
         "Orteil"
     ],
     "scripts": {
-        "eslint_src": "eslint src",
-        "build": "run-s eslint_src pack_prod remove_comment",
-        "build_test": "run-s pack_dev",
-        "pack_prod": "webpack --env production",
-        "pack_dev": "webpack",
-        "remove_comment": "sed -i '' -e '/\\/\\/# sourceMappingURL.*/d' dist/CookieMonster.js"
+        "copy-file": "cp dist/CookieMonster.js CookieMonster.js",
+        "eslint-src": "eslint src",
+        "build": "run-s eslint-src pack-prod remove-comment copy-file",
+        "build-test": "run-s pack-dev",
+        "pack-prod": "webpack --env production",
+        "pack-dev": "webpack",
+        "remove-comment": "sed -i '' -e '/\\/\\/# sourceMappingURL.*/d' dist/CookieMonster.js"
     },
     "repository": {
         "type": "git",
@@ -45,8 +46,11 @@
     "devDependencies": {
         "eslint": "^7.19.0",
         "eslint-config-airbnb-base": "^14.2.1",
+        "eslint-config-prettier": "^8.1.0",
         "eslint-plugin-import": "^2.22.1",
+        "eslint-plugin-prettier": "^3.3.1",
         "npm-run-all": "^4.1.5",
+        "prettier": "2.2.1",
         "webpack": "^5.24.4",
         "webpack-cli": "^4.5.0"
     },

src/Cache/CPS/AverageQueue.js

@@ -1,7 +1,10 @@
-/* eslint-disable no-unused-vars */
 import { ClickTimes, CookieTimes } from '../../Disp/VariablesAndData';
 import {
-	ChoEggDiff, ClicksDiff, CookiesDiff, WrinkDiff, WrinkFattestDiff,
+  ChoEggDiff,
+  ClicksDiff,
+  CookiesDiff,
+  WrinkDiff,
+  WrinkFattestDiff,
 } from '../VariablesAndData';
 
 /**
@@ -30,16 +33,29 @@ export class CMAvgQueue {
    * @returns {number}	ret			The average
    */
   calcAverage(timePeriod) {
-		if (timePeriod > this.maxLength) timePeriod = this.maxLength;
-		if (timePeriod > this.queue.length) timePeriod = this.queue.length;
+    let time = timePeriod;
+    if (time > this.maxLength) time = this.maxLength;
+    if (time > this.queue.length) time = this.queue.length;
     let ret = 0;
-		for (let i = this.queue.length - 1; i >= 0 && i > this.queue.length - 1 - timePeriod; i--) {
+    for (
+      let i = this.queue.length - 1;
+      i >= 0 && i > this.queue.length - 1 - time;
+      i--
+    ) {
       ret += this.queue[i];
     }
     if (ret === 0) {
       return 0;
     }
-		return ret / timePeriod;
+    return ret / time;
+  }
+
+  calcSum(timePeriod) {
+    let time = timePeriod;
+    if (time > this.maxLength) time = this.maxLength;
+    if (time > this.queue.length) time = this.queue.length;
+    if (time === 0) return 0;
+    return this.queue.slice(-time).reduce((a, b) => a + b, 0);
   }
 }
 
@@ -48,9 +64,9 @@ export class CMAvgQueue {
  * Called by CM.Cache.InitCache()
  */
 export function InitCookiesDiff() {
-	CookiesDiff = new CMAvgQueue(CookieTimes[CookieTimes.length - 1]);
-	WrinkDiff = new CMAvgQueue(CookieTimes[CookieTimes.length - 1]);
-	WrinkFattestDiff = new CMAvgQueue(CookieTimes[CookieTimes.length - 1]);
-	ChoEggDiff = new CMAvgQueue(CookieTimes[CookieTimes.length - 1]);
-	ClicksDiff = new CMAvgQueue(ClickTimes[ClickTimes.length - 1]);
+  CookiesDiff = new CMAvgQueue(CookieTimes[CookieTimes.length - 1]); // eslint-disable-line no-unused-vars
+  WrinkDiff = new CMAvgQueue(CookieTimes[CookieTimes.length - 1]); // eslint-disable-line no-unused-vars
+  WrinkFattestDiff = new CMAvgQueue(CookieTimes[CookieTimes.length - 1]); // eslint-disable-line no-unused-vars
+  ChoEggDiff = new CMAvgQueue(CookieTimes[CookieTimes.length - 1]); // eslint-disable-line no-unused-vars
+  ClicksDiff = new CMAvgQueue(ClickTimes[ClickTimes.length - 1]); // eslint-disable-line no-unused-vars
 }

src/Cache/CPS/CPS.js

@@ -1,9 +1,28 @@
-/* eslint-disable no-unused-vars */
-
 import { CMOptions } from '../../Config/VariablesAndData';
 import { ClickTimes, CookieTimes } from '../../Disp/VariablesAndData';
 import {
-	CacheAverageClicks, CacheAverageCPS, CacheAverageGainBank, CacheAverageGainChoEgg, CacheAverageGainWrink, CacheAverageGainWrinkFattest, CacheAvgCPSWithChoEgg, CacheLastChoEgg, CacheLastClicks, CacheLastCookies, CacheLastCPSCheck, CacheLastWrinkCookies, CacheLastWrinkFattestCookies, CacheRealCookiesEarned, CacheSellForChoEgg, CacheWrinklersFattest, CacheWrinklersTotal, ChoEggDiff, ClicksDiff, CookiesDiff, WrinkDiff, WrinkFattestDiff,
+  CacheAverageClicks,
+  CacheAverageCPS,
+  CacheAverageGainBank,
+  CacheAverageGainChoEgg,
+  CacheAverageGainWrink,
+  CacheAverageGainWrinkFattest,
+  CacheAvgCPSWithChoEgg,
+  CacheLastChoEgg,
+  CacheLastClicks,
+  CacheLastCookies,
+  CacheLastCPSCheck,
+  CacheLastWrinkCookies,
+  CacheLastWrinkFattestCookies,
+  CacheRealCookiesEarned,
+  CacheSellForChoEgg,
+  CacheWrinklersFattest,
+  CacheWrinklersTotal,
+  ChoEggDiff,
+  ClicksDiff,
+  CookiesDiff,
+  WrinkDiff,
+  WrinkFattestDiff,
 } from '../VariablesAndData';
 
 /**
@@ -20,15 +39,18 @@ export default function CacheAvgCPS() {
   if ((Game.T / Game.fps) % 1 === 0) {
     let choEggTotal = Game.cookies + CacheSellForChoEgg;
     if (Game.cpsSucked > 0) choEggTotal += CacheWrinklersTotal;
-		CacheRealCookiesEarned = Math.max(Game.cookiesEarned, choEggTotal);
+    CacheRealCookiesEarned = Math.max(Game.cookiesEarned, choEggTotal); // eslint-disable-line no-unused-vars
     choEggTotal *= 0.05;
 
     // Add recent gains to AvgQueue's
     const timeDiff = currDate - CacheLastCPSCheck;
-		const bankDiffAvg = Math.max(0, (Game.cookies - CacheLastCookies)) / timeDiff;
-		const wrinkDiffAvg = Math.max(0, (CacheWrinklersTotal - CacheLastWrinkCookies)) / timeDiff;
-		const wrinkFattestDiffAvg = Math.max(0, (CacheWrinklersFattest[0] - CacheLastWrinkFattestCookies)) / timeDiff;
-		const choEggDiffAvg = Math.max(0, (choEggTotal - CacheLastChoEgg)) / timeDiff;
+    const bankDiffAvg = Math.max(0, Game.cookies - CacheLastCookies) / timeDiff;
+    const wrinkDiffAvg =
+      Math.max(0, CacheWrinklersTotal - CacheLastWrinkCookies) / timeDiff;
+    const wrinkFattestDiffAvg =
+      Math.max(0, CacheWrinklersFattest[0] - CacheLastWrinkFattestCookies) /
+      timeDiff;
+    const choEggDiffAvg = Math.max(0, choEggTotal - CacheLastChoEgg) / timeDiff;
     const clicksDiffAvg = (Game.cookieClicks - CacheLastClicks) / timeDiff;
     for (let i = 0; i < timeDiff; i++) {
       CookiesDiff.addLatest(bankDiffAvg);
@@ -54,14 +76,22 @@ export default function CacheAvgCPS() {
     CacheAverageGainChoEgg = ChoEggDiff.calcAverage(cpsLength);
     CacheAverageCPS = CacheAverageGainBank;
     if (CMOptions.CalcWrink === 1) CacheAverageCPS += CacheAverageGainWrink;
-		if (CMOptions.CalcWrink === 2) CacheAverageCPS += CacheAverageGainWrinkFattest;
+    if (CMOptions.CalcWrink === 2)
+      CacheAverageCPS += CacheAverageGainWrinkFattest;
 
-		const choEgg = (Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg'));
+    const choEgg =
+      Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg');
 
     if (choEgg || CMOptions.CalcWrink === 0) {
-			CacheAvgCPSWithChoEgg = CacheAverageGainBank + CacheAverageGainWrink + (choEgg ? CacheAverageGainChoEgg : 0);
-		} else CacheAvgCPSWithChoEgg = CacheAverageCPS;
+      CacheAvgCPSWithChoEgg =
+        CacheAverageGainBank +
+        CacheAverageGainWrink +
+        (choEgg ? CacheAverageGainChoEgg : 0);
+    } else CacheAvgCPSWithChoEgg = CacheAverageCPS; // eslint-disable-line no-unused-vars
 
-		CacheAverageClicks = ClicksDiff.calcAverage(ClickTimes[CMOptions.AvgClicksHist]);
+    // eslint-disable-next-line no-unused-vars
+    CacheAverageClicks = ClicksDiff.calcAverage(
+      ClickTimes[CMOptions.AvgClicksHist],
+    );
   }
 }

src/Cache/CPS/CurrWrinklerCPS.js

@@ -1,6 +1,8 @@
-/* eslint-disable no-unused-vars */
 import { SimObjects } from '../../Sim/VariablesAndData';
-import { CacheCurrWrinklerCount, CacheCurrWrinklerCPSMult } from '../VariablesAndData';
+import {
+  CacheCurrWrinklerCount,
+  CacheCurrWrinklerCPSMult,
+} from '../VariablesAndData';
 
 /**
  * This functions caches the current Wrinkler CPS multiplier
@@ -10,9 +12,9 @@ import { CacheCurrWrinklerCount, CacheCurrWrinklerCPSMult } from '../VariablesAn
 export default function CacheCurrWrinklerCPS() {
   CacheCurrWrinklerCPSMult = 0;
   let count = 0;
-	for (const i in Game.wrinklers) {
-		if (Game.wrinklers[i].phase === 2) count++;
-	}
+  Object.keys(Game.wrinklers).forEach((i) => {
+    if (Game.wrinklers[i].phase === 2) count += 1;
+  });
   let godMult = 1;
   if (SimObjects.Temple.minigameLoaded) {
     const godLvl = Game.hasGod('scorn');
@@ -20,6 +22,11 @@ export default function CacheCurrWrinklerCPS() {
     else if (godLvl === 2) godMult *= 1.1;
     else if (godLvl === 3) godMult *= 1.05;
   }
-	CacheCurrWrinklerCount = count;
-	CacheCurrWrinklerCPSMult = count * (count * 0.05 * 1.1) * (Game.Has('Sacrilegious corruption') * 0.05 + 1) * (Game.Has('Wrinklerspawn') * 0.05 + 1) * godMult;
+  CacheCurrWrinklerCount = count; // eslint-disable-line no-unused-vars
+  CacheCurrWrinklerCPSMult = // eslint-disable-line no-unused-vars
+    count *
+    (count * 0.05 * 1.1) *
+    (Game.Has('Sacrilegious corruption') * 0.05 + 1) *
+    (Game.Has('Wrinklerspawn') * 0.05 + 1) *
+    godMult;
 }

src/Cache/CPS/GetCPSBuffMult.js

@@ -4,8 +4,9 @@
  */
 export default function GetCPSBuffMult() {
   let mult = 1;
-	for (const i of Object.keys(Game.buffs)) {
-		if (typeof Game.buffs[i].multCpS !== 'undefined') mult *= Game.buffs[i].multCpS;
-	}
+  Object.keys(Game.buffs).forEach((i) => {
+    if (typeof Game.buffs[i].multCpS !== 'undefined')
+      mult *= Game.buffs[i].multCpS;
+  });
   return mult;
 }

src/Cache/CPS/NoGoldSwitchCPS.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import CalcNoGoldSwitchCPS from '../../Sim/Calculations/NoGoldenSwitchCalc';
 import { CacheNoGoldSwitchCookiesPS } from '../VariablesAndData';
 
@@ -10,5 +9,5 @@ import { CacheNoGoldSwitchCookiesPS } from '../VariablesAndData';
 export default function CacheNoGoldSwitchCPS() {
   if (Game.Has('Golden switch [off]')) {
     CacheNoGoldSwitchCookiesPS = CalcNoGoldSwitchCPS();
-	} else CacheNoGoldSwitchCookiesPS = Game.cookiesPs;
+  } else CacheNoGoldSwitchCookiesPS = Game.cookiesPs; // eslint-disable-line no-unused-vars
 }

src/Cache/CPS/SellChoEgg.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import SellBuildingsForChoEgg from '../../Sim/SimulationEvents/SellBuildingForChoEgg';
 import { CacheSellForChoEgg } from '../VariablesAndData';
 
@@ -13,13 +12,13 @@ export default function CacheSellAllForChoEgg() {
   if (Game.Objects.Bank.minigameLoaded) {
     const marketGoods = Game.Objects.Bank.minigame.goods;
     let goodsVal = 0;
-		for (const i of Object.keys(marketGoods)) {
+    Object.keys(marketGoods).forEach((i) => {
       const marketGood = marketGoods[i];
       goodsVal += marketGood.stock * marketGood.val;
-		}
+    });
     sellTotal += goodsVal * Game.cookiesPsRawHighest;
   }
   // Compute cookies earned by selling all buildings with optimal auras (ES + RB)
   sellTotal += SellBuildingsForChoEgg();
-	CacheSellForChoEgg = sellTotal;
+  CacheSellForChoEgg = sellTotal; // eslint-disable-line no-unused-vars
 }

src/Cache/CacheInit.js

@@ -1,15 +1,24 @@
-/* eslint-disable no-unused-vars */
+import { ClickTimes } from '../Disp/VariablesAndData';
 import { CMAvgQueue, InitCookiesDiff } from './CPS/AverageQueue';
 import CacheAvgCPS from './CPS/CPS';
 import CacheDragonAuras from './Dragon/CacheDragonAuras';
 import CachePP from './PP/PP';
-import { CacheBuildingsPrices, CacheIncome } from './PriceAndIncome/PriceAndIncome';
+import {
+  CacheBuildingsPrices,
+  CacheIncome,
+} from './PriceAndIncome/PriceAndIncome';
 import { CacheChain } from './Stats/ChainCookies';
 import CacheHeavenlyChipsPS from './Stats/HeavenlyChips';
 import CacheAllMissingUpgrades from './Stats/MissingUpgrades';
 import CacheSeasonSpec from './Stats/Reindeer';
-import { CacheGoldenAndWrathCookiesMults, CacheStatsCookies } from './Stats/Stats';
-import { HeavenlyChipsDiff } from './VariablesAndData';
+import {
+  CacheGoldenAndWrathCookiesMults,
+  CacheStatsCookies,
+} from './Stats/Stats';
+import {
+  CacheAverageCookiesFromClicks,
+  HeavenlyChipsDiff,
+} from './VariablesAndData';
 import CacheWrinklers from './Wrinklers/Wrinklers';
 
 /**
@@ -24,7 +33,11 @@ export default function InitCache() {
   CacheAllMissingUpgrades();
   CacheSeasonSpec();
   InitCookiesDiff();
-	HeavenlyChipsDiff = new CMAvgQueue(5); // Used by CM.Cache.CacheHeavenlyChipsPS()
+  /** Used by CM.Cache.CacheHeavenlyChipsPS() */
+  HeavenlyChipsDiff = new CMAvgQueue(5); // eslint-disable-line no-unused-vars
+  CacheAverageCookiesFromClicks = new CMAvgQueue( // eslint-disable-line no-unused-vars
+    ClickTimes[ClickTimes.length - 1] * 20,
+  );
   CacheHeavenlyChipsPS();
   CacheAvgCPS();
   CacheIncome();

src/Cache/CacheLoop.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { FormatTime } from '../Disp/BeautifyAndFormatting/BeautifyFormatting';
 import GetCPS from '../Disp/HelperFunctions/GetCPS';
 import CacheAvgCPS from './CPS/CPS';
@@ -21,6 +20,11 @@ export default function LoopCache() {
   CacheAvgCPS();
   CacheHeavenlyChipsPS();
 
-	const cookiesToNext = Game.HowManyCookiesReset(Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned)) + 1) - (Game.cookiesEarned + Game.cookiesReset);
-	CacheTimeTillNextPrestige = FormatTime(cookiesToNext / GetCPS());
+  const cookiesToNext =
+    Game.HowManyCookiesReset(
+      Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned)) +
+        1,
+    ) -
+    (Game.cookiesEarned + Game.cookiesReset);
+  CacheTimeTillNextPrestige = FormatTime(cookiesToNext / GetCPS()); // eslint-disable-line no-unused-vars
 }

src/Cache/Dragon/CacheDragonAuras.js

@@ -1,10 +1,9 @@
-/* eslint-disable no-unused-vars */
 import { CacheDragonAura, CacheDragonAura2 } from '../VariablesAndData';
 
 /**
  * This functions caches the currently selected Dragon Auras
  */
 export default function CacheDragonAuras() {
-	CacheDragonAura = Game.dragonAura;
-	CacheDragonAura2 = Game.dragonAura2;
+  CacheDragonAura = Game.dragonAura; // eslint-disable-line no-unused-vars
+  CacheDragonAura2 = Game.dragonAura2; // eslint-disable-line no-unused-vars
 }

src/Cache/Dragon/Dragon.js

@@ -1,11 +1,11 @@
-/* eslint-disable no-unused-vars */
 /** Functions related to the Dragon */
 
 import { Beautify } from '../../Disp/BeautifyAndFormatting/BeautifyFormatting';
 import CopyData from '../../Sim/SimulationData/CopyData';
 import { SimDoSims, SimObjects } from '../../Sim/VariablesAndData';
 import {
-	CacheCostDragonUpgrade, CacheDragonAura, CacheDragonAura2, CacheLastDragonLevel,
+  CacheCostDragonUpgrade,
+  CacheLastDragonLevel,
 } from '../VariablesAndData';
 
 /**
@@ -13,9 +13,16 @@ import {
  */
 export default function CacheDragonCost() {
   if (CacheLastDragonLevel !== Game.dragonLevel || SimDoSims) {
-		if (Game.dragonLevel < 25 && Game.dragonLevels[Game.dragonLevel].buy.toString().includes('sacrifice')) {
-			let target = Game.dragonLevels[Game.dragonLevel].buy.toString().match(/Objects\[(.*)\]/)[1];
-			const amount = Game.dragonLevels[Game.dragonLevel].buy.toString().match(/sacrifice\((.*?)\)/)[1];
+    if (
+      Game.dragonLevel < 25 &&
+      Game.dragonLevels[Game.dragonLevel].buy.toString().includes('sacrifice')
+    ) {
+      let target = Game.dragonLevels[Game.dragonLevel].buy
+        .toString()
+        .match(/Objects\[(.*)\]/)[1];
+      const amount = Game.dragonLevels[Game.dragonLevel].buy
+        .toString()
+        .match(/sacrifice\((.*?)\)/)[1];
       if (target !== 'i') {
         target = target.replaceAll("'", '');
         if (Game.Objects[target].amount < amount) {
@@ -24,33 +31,44 @@ export default function CacheDragonCost() {
           let cost = 0;
           CopyData();
           for (let i = 0; i < amount; i++) {
-						let price = SimObjects[target].basePrice * Game.priceIncrease ** Math.max(0, SimObjects[target].amount - 1 - SimObjects[target].free);
+            let price =
+              SimObjects[target].basePrice *
+              Game.priceIncrease **
+                Math.max(
+                  0,
+                  SimObjects[target].amount - 1 - SimObjects[target].free,
+                );
             price = Game.modifyBuildingPrice(SimObjects[target], price);
             price = Math.ceil(price);
             cost += price;
-						SimObjects[target].amount--;
+            SimObjects[target].amount -= 1;
           }
-					CacheCostDragonUpgrade = `Cost to rebuy: ${(cost)}`;
+          CacheCostDragonUpgrade = `Cost to rebuy: ${Beautify(cost)}`;
         }
       } else {
         let cost = 0;
         CopyData();
-				for (const j of Object.keys(Game.Objects)) {
+        Object.keys(Game.Objects).forEach((j) => {
           target = j;
           if (Game.Objects[target].amount < amount) {
             CacheCostDragonUpgrade = 'Not enough buildings to sell';
-						break;
-					} else {
+            return;
+          }
           for (let i = 0; i < amount; i++) {
-							let price = SimObjects[target].basePrice * Game.priceIncrease ** Math.max(0, SimObjects[target].amount - 1 - SimObjects[target].free);
+            let price =
+              SimObjects[target].basePrice *
+              Game.priceIncrease **
+                Math.max(
+                  0,
+                  SimObjects[target].amount - 1 - SimObjects[target].free,
+                );
             price = Game.modifyBuildingPrice(SimObjects[target], price);
             price = Math.ceil(price);
             cost += price;
-							SimObjects[target].amount--;
-						}
-					}
-					CacheCostDragonUpgrade = `Cost to rebuy: ${Beautify(cost)}`;
+            SimObjects[target].amount -= 1;
           }
+          CacheCostDragonUpgrade = `Cost to rebuy: ${Beautify(cost)}`; // eslint-disable-line no-unused-vars
+        });
       }
     }
     CacheLastDragonLevel = Game.dragonLevel;

src/Cache/PP/Building.js

@@ -1,10 +1,12 @@
-/* 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 {
-	CacheArrayOfPPs,
-	CacheMaxPP, CacheMidPP, CacheMinPP, CacheObjects1, CacheObjects10, CacheObjects100,
+  CacheMinPP,
+  CacheObjects1,
+  CacheObjects10,
+  CacheObjects100,
+  CachePPArray,
 } from '../VariablesAndData';
 import ColourOfPP from './ColourOfPP';
 
@@ -13,14 +15,36 @@ import ColourOfPP from './ColourOfPP';
  * It saves all date in CM.Cache.Objects...
  * It is called by CM.Cache.CacheBuildingsPP()
  */
-function CacheBuildingsBulkPP(target) {
-	for (const i of Object.keys(target)) {
-		if (Game.cookiesPs) {
-			target[i].pp = (Math.max(target[i].price - (Game.cookies + GetWrinkConfigBank()), 0) / Game.cookiesPs) + (target[i].price / target[i].bonus);
-		} else target[i].pp = (target[i].price / target[i].bonus);
-
-		target[i].color = ColourOfPP(target[i], target[i].price);
+function CacheColour(target, amount) {
+  Object.keys(target).forEach((i) => {
+    if (CMOptions.PPRigidelMode && amount === 1) {
+      target[i].color = ColourGray; // eslint-disable-line no-param-reassign
+      return;
     }
+    // eslint-disable-next-line no-param-reassign
+    target[i].color = ColourOfPP(
+      target[i],
+      Game.Objects[i].getSumPrice(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 = ColourGray; // eslint-disable-line no-param-reassign
+    }
+  });
+}
+
+function CachePP(target, amount) {
+  Object.keys(target).forEach((i) => {
+    const price = Game.Objects[i].getSumPrice(amount);
+    if (Game.cookiesPs) {
+      target[i].pp = // eslint-disable-line no-param-reassign
+        Math.max(price - (Game.cookies + GetWrinkConfigBank()), 0) /
+          Game.cookiesPs +
+        price / target[i].bonus;
+    } else target[i].pp = price / target[i].bonus; // eslint-disable-line no-param-reassign
+    if (!(CMOptions.PPRigidelMode && amount === 1))
+      CachePPArray.push([target[i].pp, amount]);
+  });
 }
 
 /**
@@ -29,73 +53,28 @@ function CacheBuildingsBulkPP(target) {
  */
 export default function CacheBuildingsPP() {
   CacheMinPP = Infinity;
-	CacheMaxPP = 1;
-	CacheArrayOfPPs = [];
+  CachePPArray = [];
   if (typeof CMOptions.PPExcludeTop === 'undefined') CMOptions.PPExcludeTop = 0; // Otherwise breaks during initialization
 
-	// Calculate PP and colors when compared to purchase of optimal building in single-purchase mode
-	if (CMOptions.ColorPPBulkMode === 0 && Game.buyMode > 0) {
-		for (const i of Object.keys(CacheObjects1)) {
-			if (Game.cookiesPs) {
-				CacheObjects1[i].pp = (Math.max(Game.Objects[i].getPrice() - (Game.cookies + GetWrinkConfigBank()), 0) / Game.cookiesPs) + (Game.Objects[i].getPrice() / CacheObjects1[i].bonus);
-			} else CacheObjects1[i].pp = (Game.Objects[i].getPrice() / CacheObjects1[i].bonus);
-			CacheArrayOfPPs.push([CacheObjects1[i].pp, Game.Objects[i].getPrice()]);
-		}
-		// Set CM.Cache.min to best non-excluded buidliung
-		CacheArrayOfPPs.sort((a, b) => a[0] - b[0]);
-		if (CMOptions.PPOnlyConsiderBuyable) {
-			while (CacheArrayOfPPs[0][1] > Game.cookies) {
-				if (CacheArrayOfPPs.length === 1) {
-					break;
-				}
-				CacheArrayOfPPs.shift();
-			}
-		}
-		CacheMinPP = CacheArrayOfPPs[CMOptions.PPExcludeTop][0];
-		CacheMaxPP = CacheArrayOfPPs[CacheArrayOfPPs.length - 1][0];
-		CacheMidPP = ((CacheMaxPP - CacheMinPP) / 2) + CacheMinPP;
-		for (const i of Object.keys(CacheObjects1)) {
-			CacheObjects1[i].color = ColourOfPP(CacheObjects1[i], Game.Objects[i].getPrice());
-			// Colour based on excluding certain top-buildings
-			for (let j = 0; j < CMOptions.PPExcludeTop; j++) {
-				if (CacheObjects1[i].pp === CacheArrayOfPPs[j][0]) CacheObjects1[i].color = ColorGray;
-			}
-		}
-		// Calculate PP of bulk-buy modes
-		CacheBuildingsBulkPP(CacheObjects10);
-		CacheBuildingsBulkPP(CacheObjects100);
-	} else if (Game.buyMode > 0) {
-		// Calculate PP and colors when compared to purchase of selected bulk mode
-		let target;
-		if (Game.buyBulk === 1) target = CacheObjects1;
-		else if (Game.buyBulk === 10) target = CacheObjects10;
-		else if (Game.buyBulk === 100) target = CacheObjects100;
-		for (const i of Object.keys(target)) {
-			if (Game.cookiesPs) {
-				target[i].pp = (Math.max(Game.Objects[i].bulkPrice - (Game.cookies + GetWrinkConfigBank()), 0) / Game.cookiesPs) + (Game.Objects[i].bulkPrice / target[i].bonus);
-			} else target[i].pp = (Game.Objects[i].bulkPrice / target[i].bonus);
-			CacheArrayOfPPs.push([target[i].pp, Game.Objects[i].bulkPrice]);
-		}
-		// Set CM.Cache.min to best non-excluded buidliung
-		CacheArrayOfPPs.sort((a, b) => a[0] - b[0]);
-		if (CMOptions.PPOnlyConsiderBuyable) {
-			while (CacheArrayOfPPs[0][1] > Game.cookies) {
-				if (CacheArrayOfPPs.length === 1) {
-					break;
-				}
-				CacheArrayOfPPs.shift();
-			}
-		}
-		CacheMinPP = CacheArrayOfPPs[CMOptions.PPExcludeTop][0];
-		CacheMaxPP = CacheArrayOfPPs[CacheArrayOfPPs.length - 1][0];
-		CacheMidPP = ((CacheMaxPP - CacheMinPP) / 2) + CacheMinPP;
+  // Calculate PP and colors
+  CachePP(CacheObjects1, 1);
+  CachePP(CacheObjects10, 10);
+  CachePP(CacheObjects100, 100);
 
-		for (const i of Object.keys(CacheObjects1)) {
-			target[i].color = ColourOfPP(target[i], Game.Objects[i].bulkPrice);
-			// Colour based on excluding certain top-buildings
-			for (let j = 0; j < CMOptions.PPExcludeTop; j++) {
-				if (target[i].pp === CacheArrayOfPPs[j][0]) target[i].color = ColorGray;
+  // Set CM.Cache.min to best non-excluded buidliung
+  CachePPArray.sort((a, b) => a[0] - b[0]);
+  let indexOfMin = 0;
+  if (CMOptions.PPOnlyConsiderBuyable) {
+    while (CachePPArray[indexOfMin][1] > Game.cookies) {
+      indexOfMin += 1;
+      if (CachePPArray.length === indexOfMin + 1) {
+        break;
       }
     }
   }
+  CacheMinPP = CachePPArray[CMOptions.PPExcludeTop][indexOfMin]; // eslint-disable-line no-unused-vars
+
+  CacheColour(CacheObjects1, 1);
+  CacheColour(CacheObjects10, 10);
+  CacheColour(CacheObjects100, 100);
 }

src/Cache/PP/ColourOfPP.js

@@ -1,9 +1,15 @@
 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 { CacheMaxPP, CacheMidPP, CacheMinPP } from '../VariablesAndData';
+import { CacheMinPP, CachePPArray } from '../VariablesAndData';
 
 /**
  * This functions return the colour assosciated with the given pp value
@@ -15,21 +21,22 @@ import { CacheMaxPP, CacheMidPP, CacheMinPP } 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 === CacheMaxPP) color = ColorRed;
-	else if (me.pp > CacheMaxPP) color = ColorPurple;
-	else if (me.pp > CacheMidPP) color = ColorOrange;
-	else color = ColorYellow;
+  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;
+    if (price / GetCPS() < Number(CMOptions.PPSecondsLowerLimit))
+      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/Cache/PP/Upgrade.js

@@ -7,12 +7,23 @@ import ColourOfPP from './ColourOfPP';
  * It is called by CM.Cache.CachePP()
  */
 export default function CacheUpgradePP() {
-	for (const i of Object.keys(CacheUpgrades)) {
+  Object.keys(CacheUpgrades).forEach((i) => {
     if (Game.cookiesPs) {
-			CacheUpgrades[i].pp = (Math.max(Game.Upgrades[i].getPrice() - (Game.cookies + GetWrinkConfigBank()), 0) / Game.cookiesPs) + (Game.Upgrades[i].getPrice() / CacheUpgrades[i].bonus);
-		} else CacheUpgrades[i].pp = (Game.Upgrades[i].getPrice() / CacheUpgrades[i].bonus);
+      CacheUpgrades[i].pp =
+        Math.max(
+          Game.Upgrades[i].getPrice() - (Game.cookies + GetWrinkConfigBank()),
+          0,
+        ) /
+          Game.cookiesPs +
+        Game.Upgrades[i].getPrice() / CacheUpgrades[i].bonus;
+    } else
+      CacheUpgrades[i].pp =
+        Game.Upgrades[i].getPrice() / CacheUpgrades[i].bonus;
     if (Number.isNaN(CacheUpgrades[i].pp)) CacheUpgrades[i].pp = Infinity;
 
-		CacheUpgrades[i].color = ColourOfPP(CacheUpgrades[i], Game.Upgrades[i].getPrice());
-	}
+    CacheUpgrades[i].color = ColourOfPP(
+      CacheUpgrades[i],
+      Game.Upgrades[i].getPrice(),
+    );
+  });
 }

src/Cache/PantheonGods/CacheGods.js

@@ -0,0 +1,13 @@
+import CalculateChangeGod from '../../Sim/SimulationEvents/GodChange';
+import { CacheGods } from '../VariablesAndData';
+
+/**
+ * This functions caches the cps effect of each God in slot 1, 2 or 3
+ */
+export default function CachePantheonGods() {
+  for (let god = 0; god < 11; god += 1) {
+    for (let slot = 0; slot < 3; slot += 1) {
+      CacheGods[god][slot] = CalculateChangeGod(god, slot);
+    }
+  }
+}

src/Cache/PriceAndIncome/PriceAndIncome.js

@@ -1,11 +1,18 @@
-/* eslint-disable no-unused-vars */
 /** Section: Functions related to caching income */
 
+import { CMOptions } from '../../Config/VariablesAndData';
 import BuildingGetPrice from '../../Sim/SimulationEvents/BuyBuilding';
 import BuyBuildingsBonusIncome from '../../Sim/SimulationEvents/BuyBuildingBonusIncome';
 import BuyUpgradesBonusIncome from '../../Sim/SimulationEvents/BuyUpgrades';
 import {
-	CacheDoRemakeBuildPrices, CacheObjects1, CacheObjects10, CacheObjects100, CacheUpgrades,
+  CacheAverageGainBank,
+  CacheAverageGainWrink,
+  CacheAverageGainWrinkFattest,
+  CacheDoRemakeBuildPrices,
+  CacheObjects1,
+  CacheObjects10,
+  CacheObjects100,
+  CacheUpgrades,
 } from '../VariablesAndData';
 
 /**
@@ -14,15 +21,15 @@ import {
  * @param	{amount}	amount	Amount to be bought
  * @parem	{string}	target	The target Cache object ("Objects1", "Objects10" or "Objects100")
  */
-function CacheBuildingIncome(amount, target) {
-	const result = [];
-	for (const i of Object.keys(Game.Objects)) {
+function CacheBuildingIncome(amount) {
+  const result = {};
+  Object.keys(Game.Objects).forEach((i) => {
     result[i] = {};
     result[i].bonus = BuyBuildingsBonusIncome(i, amount);
     if (amount !== 1) {
-			CacheDoRemakeBuildPrices = 1;
-		}
+      CacheDoRemakeBuildPrices = 1; // eslint-disable-line no-unused-vars
     }
+  });
   return result;
 }
 
@@ -32,23 +39,50 @@ function CacheBuildingIncome(amount, target) {
  */
 function CacheUpgradeIncome() {
   CacheUpgrades = [];
-	for (const i of Object.keys(Game.Upgrades)) {
+  Object.keys(Game.Upgrades).forEach((i) => {
     const bonusIncome = BuyUpgradesBonusIncome(i);
+    if (i === 'Elder Pledge') {
+      CacheUpgrades[i] = { bonus: Game.cookiesPs - CacheAverageGainBank };
+      if (CMOptions.CalcWrink === 1)
+        CacheUpgrades[i].bonus -= CacheAverageGainWrink;
+      else if (CMOptions.CalcWrink === 2)
+        CacheUpgrades[i].bonus -= CacheAverageGainWrinkFattest;
+      if (!Number.isFinite(CacheUpgrades[i].bonus)) CacheUpgrades[i].bonus = 0;
+    } else {
       CacheUpgrades[i] = {};
       if (bonusIncome[0]) CacheUpgrades[i].bonus = bonusIncome[0];
       if (bonusIncome[1]) CacheUpgrades[i].bonusMouse = bonusIncome[1];
     }
+  });
 }
 
 /**
  * This functions caches the price of each building and stores it in the cache
  */
 export function CacheBuildingsPrices() {
-	for (const i of Object.keys(Game.Objects)) {
-		CacheObjects1[i].price = BuildingGetPrice(Game.Objects[i], Game.Objects[i].basePrice, Game.Objects[i].amount, Game.Objects[i].free, 1);
-		CacheObjects10[i].price = BuildingGetPrice(Game.Objects[i], Game.Objects[i].basePrice, Game.Objects[i].amount, Game.Objects[i].free, 10);
-		CacheObjects100[i].price = BuildingGetPrice(Game.Objects[i], Game.Objects[i].basePrice, Game.Objects[i].amount, Game.Objects[i].free, 100);
-	}
+  Object.keys(Game.Objects).forEach((i) => {
+    CacheObjects1[i].price = BuildingGetPrice(
+      Game.Objects[i],
+      Game.Objects[i].basePrice,
+      Game.Objects[i].amount,
+      Game.Objects[i].free,
+      1,
+    );
+    CacheObjects10[i].price = BuildingGetPrice(
+      Game.Objects[i],
+      Game.Objects[i].basePrice,
+      Game.Objects[i].amount,
+      Game.Objects[i].free,
+      10,
+    );
+    CacheObjects100[i].price = BuildingGetPrice(
+      Game.Objects[i],
+      Game.Objects[i].basePrice,
+      Game.Objects[i].amount,
+      Game.Objects[i].free,
+      100,
+    );
+  });
 }
 
 /**

src/Cache/Stats/ChainCookies.js

@@ -1,7 +1,21 @@
-/* eslint-disable no-unused-vars */
 import GetCPSBuffMult from '../CPS/GetCPSBuffMult';
 import {
-	CacheChainFrenzyMaxReward, CacheChainFrenzyRequired, CacheChainFrenzyRequiredNext, CacheChainFrenzyWrathMaxReward, CacheChainFrenzyWrathRequired, CacheChainFrenzyWrathRequiredNext, CacheChainMaxReward, CacheChainRequired, CacheChainRequiredNext, CacheChainWrathMaxReward, CacheChainWrathRequired, CacheChainWrathRequiredNext, CacheDragonsFortuneMultAdjustment, CacheGoldenCookiesMult, CacheNoGoldSwitchCookiesPS, CacheWrathCookiesMult,
+  CacheChainFrenzyMaxReward,
+  CacheChainFrenzyRequired,
+  CacheChainFrenzyRequiredNext,
+  CacheChainFrenzyWrathMaxReward,
+  CacheChainFrenzyWrathRequired,
+  CacheChainFrenzyWrathRequiredNext,
+  CacheChainMaxReward,
+  CacheChainRequired,
+  CacheChainRequiredNext,
+  CacheChainWrathMaxReward,
+  CacheChainWrathRequired,
+  CacheChainWrathRequiredNext,
+  CacheDragonsFortuneMultAdjustment,
+  CacheGoldenCookiesMult,
+  CacheNoGoldSwitchCookiesPS,
+  CacheWrathCookiesMult,
 } from '../VariablesAndData';
 
 /**
@@ -17,13 +31,26 @@ export function MaxChainCookieReward(digit, maxPayout, mult) {
   let moni = 0;
   let nextMoni = 0;
   let nextRequired = 0;
-	let chain = 1 + Math.max(0, Math.ceil(Math.log(Game.cookies) / Math.LN10) - 10);
-	while (nextMoni < maxPayout) {
-		moni = Math.max(digit, Math.min(Math.floor(1 / 9 * 10 ** chain * digit * mult), maxPayout * mult));
-		nextMoni = Math.max(digit, Math.min(Math.floor(1 / 9 * 10 ** (chain + 1) * digit * mult), maxPayout * mult));
-		nextRequired = Math.floor(1 / 9 * 10 ** (chain + 1) * digit * mult);
+  let chain =
+    1 + Math.max(0, Math.ceil(Math.log(Game.cookies) / Math.LN10) - 10);
+  while (nextMoni < maxPayout * mult) {
+    moni = Math.max(
+      digit,
+      Math.min(
+        Math.floor((1 / 9) * 10 ** chain * digit * mult),
+        maxPayout * mult,
+      ),
+    );
+    nextMoni = Math.max(
+      digit,
+      Math.min(
+        Math.floor((1 / 9) * 10 ** (chain + 1) * digit * mult),
+        maxPayout * mult,
+      ),
+    );
+    nextRequired = Math.floor((1 / 9) * 10 ** (chain + 1) * digit * mult);
     totalFromChain += moni;
-		chain++;
+    chain += 1;
   }
   return [totalFromChain, moni, nextRequired];
 }
@@ -45,25 +72,65 @@ export function MaxChainCookieReward(digit, maxPayout, mult) {
  * @global	{number}			CM.Cache.ChainFrenzyWrathRequiredNext		Total cookies needed for next level for wrath frenzy chain
  */
 export function CacheChain() {
-	let maxPayout = CacheNoGoldSwitchCookiesPS * 60 * 60 * 6 * CacheDragonsFortuneMultAdjustment;
+  let maxPayout =
+    CacheNoGoldSwitchCookiesPS *
+    60 *
+    60 *
+    6 *
+    CacheDragonsFortuneMultAdjustment;
   // Removes effect of Frenzy etc.
   const cpsBuffMult = GetCPSBuffMult();
   if (cpsBuffMult > 0) maxPayout /= cpsBuffMult;
   else maxPayout = 0;
 
-	CacheChainMaxReward = MaxChainCookieReward(7, maxPayout, CacheGoldenCookiesMult);
-	CacheChainRequired = CacheChainMaxReward[1] * 2 / CacheGoldenCookiesMult;
-	CacheChainRequiredNext = CacheChainMaxReward[2] / 60 / 60 / 6 / CacheDragonsFortuneMultAdjustment;
+  CacheChainMaxReward = MaxChainCookieReward(
+    7,
+    maxPayout,
+    CacheGoldenCookiesMult,
+  );
+  CacheChainRequired = (CacheChainMaxReward[1] * 2) / CacheGoldenCookiesMult; // eslint-disable-line no-unused-vars
+  CacheChainRequiredNext = // eslint-disable-line no-unused-vars
+    CacheChainMaxReward[2] / 60 / 60 / 6 / CacheDragonsFortuneMultAdjustment;
 
-	CacheChainWrathMaxReward = MaxChainCookieReward(6, maxPayout, CacheWrathCookiesMult);
-	CacheChainWrathRequired = CacheChainWrathMaxReward[1] * 2 / CacheWrathCookiesMult;
-	CacheChainWrathRequiredNext = CacheChainWrathMaxReward[2] / 60 / 60 / 6 / CacheDragonsFortuneMultAdjustment;
+  CacheChainWrathMaxReward = MaxChainCookieReward(
+    6,
+    maxPayout,
+    CacheWrathCookiesMult,
+  );
+  CacheChainWrathRequired = // eslint-disable-line no-unused-vars
+    (CacheChainWrathMaxReward[1] * 2) / CacheWrathCookiesMult;
+  CacheChainWrathRequiredNext = // eslint-disable-line no-unused-vars
+    CacheChainWrathMaxReward[2] /
+    60 /
+    60 /
+    6 /
+    CacheDragonsFortuneMultAdjustment;
 
-	CacheChainFrenzyMaxReward = MaxChainCookieReward(7, maxPayout * 7, CacheGoldenCookiesMult);
-	CacheChainFrenzyRequired = CacheChainFrenzyMaxReward[1] * 2 / CacheGoldenCookiesMult;
-	CacheChainFrenzyRequiredNext = CacheChainFrenzyMaxReward[2] / 60 / 60 / 6 / CacheDragonsFortuneMultAdjustment;
+  CacheChainFrenzyMaxReward = MaxChainCookieReward(
+    7,
+    maxPayout * 7,
+    CacheGoldenCookiesMult,
+  );
+  CacheChainFrenzyRequired = // eslint-disable-line no-unused-vars
+    (CacheChainFrenzyMaxReward[1] * 2) / CacheGoldenCookiesMult;
+  CacheChainFrenzyRequiredNext = // eslint-disable-line no-unused-vars
+    CacheChainFrenzyMaxReward[2] /
+    60 /
+    60 /
+    6 /
+    CacheDragonsFortuneMultAdjustment;
 
-	CacheChainFrenzyWrathMaxReward = MaxChainCookieReward(6, maxPayout * 7, CacheWrathCookiesMult);
-	CacheChainFrenzyWrathRequired = CacheChainFrenzyWrathMaxReward[1] * 2 / CacheWrathCookiesMult;
-	CacheChainFrenzyWrathRequiredNext = CacheChainFrenzyWrathMaxReward[2] / 60 / 60 / 6 / CacheDragonsFortuneMultAdjustment;
+  CacheChainFrenzyWrathMaxReward = MaxChainCookieReward(
+    6,
+    maxPayout * 7,
+    CacheWrathCookiesMult,
+  );
+  CacheChainFrenzyWrathRequired = // eslint-disable-line no-unused-vars
+    (CacheChainFrenzyWrathMaxReward[1] * 2) / CacheWrathCookiesMult;
+  CacheChainFrenzyWrathRequiredNext = // eslint-disable-line no-unused-vars
+    CacheChainFrenzyWrathMaxReward[2] /
+    60 /
+    60 /
+    6 /
+    CacheDragonsFortuneMultAdjustment;
 }

src/Cache/Stats/HeavenlyChips.js

@@ -1,6 +1,8 @@
-/* eslint-disable no-unused-vars */
 import {
-	CacheHCPerSecond, CacheLastHeavenlyCheck, CacheLastHeavenlyChips, HeavenlyChipsDiff,
+  CacheHCPerSecond,
+  CacheLastHeavenlyCheck,
+  CacheLastHeavenlyChips,
+  HeavenlyChipsDiff,
 } from '../VariablesAndData';
 
 /**
@@ -13,12 +15,15 @@ export default function CacheHeavenlyChipsPS() {
   // Only calculate every new second
   if ((Game.T / Game.fps) % 1 === 0) {
     const chipsOwned = Game.HowMuchPrestige(Game.cookiesReset);
-		const ascendNowToOwn = Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned));
+    const ascendNowToOwn = Math.floor(
+      Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned),
+    );
     const ascendNowToGet = ascendNowToOwn - Math.floor(chipsOwned);
 
     // Add recent gains to AvgQueue's
     const timeDiff = currDate - CacheLastHeavenlyCheck;
-		const heavenlyChipsDiffAvg = Math.max(0, (ascendNowToGet - CacheLastHeavenlyChips)) / timeDiff;
+    const heavenlyChipsDiffAvg =
+      Math.max(0, ascendNowToGet - CacheLastHeavenlyChips) / timeDiff;
     for (let i = 0; i < timeDiff; i++) {
       HeavenlyChipsDiff.addLatest(heavenlyChipsDiffAvg);
     }
@@ -28,6 +33,6 @@ export default function CacheHeavenlyChipsPS() {
     CacheLastHeavenlyChips = ascendNowToGet;
 
     // Get average gain over period of 5 seconds
-		CacheHCPerSecond = HeavenlyChipsDiff.calcAverage(5);
+    CacheHCPerSecond = HeavenlyChipsDiff.calcAverage(5); // eslint-disable-line no-unused-vars
   }
 }

src/Cache/Stats/MissingUpgrades.js

@@ -1,6 +1,9 @@
-/* eslint-disable no-unused-vars */
-import { crateMissing } from '../../Disp/MenuSections/CreateMissingUpgrades';
-import { CacheMissingUpgrades, CacheMissingUpgradesCookies, CacheMissingUpgradesPrestige } from '../VariablesAndData';
+import { crateMissing } from '../../Disp/MenuSections/Statistics/CreateMissingUpgrades';
+import {
+  CacheMissingUpgrades,
+  CacheMissingUpgradesCookies,
+  CacheMissingUpgradesPrestige,
+} from '../VariablesAndData';
 
 /**
  * This functions caches variables related to missing upgrades
@@ -15,9 +18,9 @@ export default function CacheAllMissingUpgrades() {
   CacheMissingUpgradesPrestige = '';
   const list = [];
   // sort the upgrades
-	for (const i of Object.keys(Game.Upgrades)) {
+  Object.keys(Game.Upgrades).forEach((i) => {
     list.push(Game.Upgrades[i]);
-	}
+  });
   const sortMap = function (a, b) {
     if (a.order > b.order) return 1;
     if (a.order < b.order) return -1;
@@ -25,16 +28,23 @@ export default function CacheAllMissingUpgrades() {
   };
   list.sort(sortMap);
 
-	for (const i of Object.keys(list)) {
+  Object.keys(list).forEach((i) => {
     const me = list[i];
 
     if (me.bought === 0) {
       let str = '';
 
       str += crateMissing(me);
+      /* eslint-disable no-unused-vars */
       if (me.pool === 'prestige') CacheMissingUpgradesPrestige += str;
       else if (me.pool === 'cookie') CacheMissingUpgradesCookies += str;
-			else if (me.pool !== 'toggle' && me.pool !== 'unused' && me.pool !== 'debug') CacheMissingUpgrades += str;
-		}
+      else if (
+        me.pool !== 'toggle' &&
+        me.pool !== 'unused' &&
+        me.pool !== 'debug'
+      )
+        CacheMissingUpgrades += str;
+      /* eslint-enable no-unused-vars */
     }
+  });
 }

src/Cache/Stats/Reindeer.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { CacheSeaSpec } from '../VariablesAndData';
 
 /**
@@ -12,6 +11,6 @@ export default function CacheSeasonSpec() {
     if (Game.hasBuff('Elder frenzy')) val *= 0.5;
     if (Game.hasBuff('Frenzy')) val *= 0.75;
     CacheSeaSpec = Math.max(25, val);
-		if (Game.Has('Ho ho ho-flavored frosting')) CacheSeaSpec *= 2;
+    if (Game.Has('Ho ho ho-flavored frosting')) CacheSeaSpec *= 2; // eslint-disable-line no-unused-vars
   }
 }

src/Cache/Stats/Stats.js

@@ -1,10 +1,22 @@
-/* eslint-disable no-unused-vars */
 /** Functions related to Caching stats */
 
 import SimHas from '../../Sim/ReplacedGameFunctions/SimHas';
 import GetCPSBuffMult from '../CPS/GetCPSBuffMult';
 import {
-	CacheConjure, CacheConjureReward, CacheDragonsFortuneMultAdjustment, CacheEdifice, CacheEdificeBuilding, CacheGoldenCookiesMult, CacheLucky, CacheLuckyFrenzy, CacheLuckyReward, CacheLuckyRewardFrenzy, CacheLuckyWrathReward, CacheLuckyWrathRewardFrenzy, CacheNoGoldSwitchCookiesPS, CacheWrathCookiesMult,
+  CacheConjure,
+  CacheConjureReward,
+  CacheDragonsFortuneMultAdjustment,
+  CacheEdifice,
+  CacheEdificeBuilding,
+  CacheGoldenCookiesMult,
+  CacheLucky,
+  CacheLuckyFrenzy,
+  CacheLuckyReward,
+  CacheLuckyRewardFrenzy,
+  CacheLuckyWrathReward,
+  CacheLuckyWrathRewardFrenzy,
+  CacheNoGoldSwitchCookiesPS,
+  CacheWrathCookiesMult,
 } from '../VariablesAndData';
 
 /**
@@ -16,29 +28,33 @@ export function CacheStatsCookies() {
   const cpsBuffMult = GetCPSBuffMult();
   if (cpsBuffMult > 0) CacheLucky /= cpsBuffMult;
   else CacheLucky = 0;
-	CacheLuckyReward = CacheGoldenCookiesMult * (CacheLucky * 0.15) + 13;
-	CacheLuckyWrathReward = CacheWrathCookiesMult * (CacheLucky * 0.15) + 13;
+  CacheLuckyReward = CacheGoldenCookiesMult * (CacheLucky * 0.15) + 13; // eslint-disable-line no-unused-vars
+  CacheLuckyWrathReward = CacheWrathCookiesMult * (CacheLucky * 0.15) + 13; // eslint-disable-line no-unused-vars
   CacheLuckyFrenzy = CacheLucky * 7;
-	CacheLuckyRewardFrenzy = CacheGoldenCookiesMult * (CacheLuckyFrenzy * 0.15) + 13;
-	CacheLuckyWrathRewardFrenzy = CacheWrathCookiesMult * (CacheLuckyFrenzy * 0.15) + 13;
+  CacheLuckyRewardFrenzy = // eslint-disable-line no-unused-vars
+    CacheGoldenCookiesMult * (CacheLuckyFrenzy * 0.15) + 13;
+  CacheLuckyWrathRewardFrenzy = // eslint-disable-line no-unused-vars
+    CacheWrathCookiesMult * (CacheLuckyFrenzy * 0.15) + 13;
   CacheConjure = CacheLucky * 2;
-	CacheConjureReward = CacheConjure * 0.15;
+  CacheConjureReward = CacheConjure * 0.15; // eslint-disable-line no-unused-vars
 
   CacheEdifice = 0;
   let max = 0;
   let n = 0;
-	for (const i of Object.keys(Game.Objects)) {
+  Object.keys(Game.Objects).forEach((i) => {
     if (Game.Objects[i].amount > max) max = Game.Objects[i].amount;
-		if (Game.Objects[i].amount > 0) n++;
-	}
-	for (const i of Object.keys(Game.Objects)) {
-		if ((Game.Objects[i].amount < max || n === 1)
-			&& Game.Objects[i].amount < 400
-			&& Game.Objects[i].price * 2 > CacheEdifice) {
+    if (Game.Objects[i].amount > 0) n += 1;
+  });
+  Object.keys(Game.Objects).forEach((i) => {
+    if (
+      (Game.Objects[i].amount < max || n === 1) &&
+      Game.Objects[i].amount < 400 &&
+      Game.Objects[i].price * 2 > CacheEdifice
+    ) {
       CacheEdifice = Game.Objects[i].price * 2;
-			CacheEdificeBuilding = i;
-		}
+      CacheEdificeBuilding = i; // eslint-disable-line no-unused-vars
     }
+  });
 }
 
 /**
@@ -68,6 +84,7 @@ export function CacheGoldenAndWrathCookiesMults() {
   // Otherwise, the aura effect will be factored in the base CPS making the multiplier not requiring adjustment.
   CacheDragonsFortuneMultAdjustment = 1;
   if (Game.shimmerTypes.golden.n === 0) {
-		CacheDragonsFortuneMultAdjustment *= 1 + Game.auraMult('Dragon\'s Fortune') * 1.23;
+    CacheDragonsFortuneMultAdjustment *=
+      1 + Game.auraMult("Dragon's Fortune") * 1.23;
   }
 }

src/Cache/VariablesAndData.js

@@ -33,13 +33,13 @@ export let CacheWrinklersTotal = 0;
 export let CacheWrinklersNormal = 0;
 export let CacheWrinklersFattest = [0, null];
 
-export let CacheAvgCps = 0;
 export let CacheCurrWrinklerCPSMult = 0;
 export let CacheCurrWrinklerCount = 0;
 
 export let CacheUpgrades = {};
 
 export let CacheAverageClicks = {};
+export let CacheAverageCookiesFromClicks;
 
 export let CacheMissingUpgrades = {};
 export let CacheMissingUpgradesPrestige = {};
@@ -66,10 +66,10 @@ export let CacheSeasonPopShimmer = {};
 
 export let CacheTimeTillNextPrestige = 0;
 
+/** Stores lowest PP value */
 export let CacheMinPP = 0;
-export let CacheMidPP = 0;
-export let CacheMaxPP = 0;
-export let CacheArrayOfPPs = [];
+/** Stores all PP values of all buildings for all buy settings (1, 10, 100) */
+export let CachePPArray = [];
 
 export let CacheGoldenShimmersByID = {};
 
@@ -100,3 +100,18 @@ export let CacheLastHeavenlyChips;
 export let CacheDoRemakeBuildPrices;
 
 export let CacheHadBuildAura;
+
+/** Store the CPS effect of each god if it was put into each slot */
+export let CacheGods = {
+  0: [0, 0, 0],
+  1: [0, 0, 0],
+  2: [0, 0, 0],
+  3: [0, 0, 0],
+  4: [0, 0, 0],
+  5: [0, 0, 0],
+  6: [0, 0, 0],
+  7: [0, 0, 0],
+  8: [0, 0, 0],
+  9: [0, 0, 0],
+  10: [0, 0, 0],
+};

src/Cache/Wrinklers/Wrinklers.js

@@ -1,9 +1,10 @@
-/* eslint-disable no-unused-vars */
 /** Caches data related to Wrinklers */
 
 import { SimObjects } from '../../Sim/VariablesAndData';
 import {
-	CacheWrinklersFattest, CacheWrinklersNormal, CacheWrinklersTotal,
+  CacheWrinklersFattest,
+  CacheWrinklersNormal,
+  CacheWrinklersTotal,
 } from '../VariablesAndData';
 
 /**
@@ -14,8 +15,11 @@ import {
  * @global	{[{number}, {number}]}	CM.Cache.WrinklersFattest	A list containing the cookies and the id of the fattest non-shiny wrinkler
  */
 export default function CacheWrinklers() {
+  CacheWrinklersTotal = 0;
+  CacheWrinklersNormal = 0;
+  CacheWrinklersFattest = [0, null];
   for (let i = 0; i < Game.wrinklers.length; i++) {
-		let sucked = Game.wrinklers[i].sucked;
+    let { sucked } = Game.wrinklers[i];
     let toSuck = 1.1;
     if (Game.Has('Sacrilegious corruption')) toSuck *= 1.05;
     if (Game.wrinklers[i].type === 1) toSuck *= 3; // Shiny wrinklers
@@ -27,10 +31,11 @@ export default function CacheWrinklers() {
       else if (godLvl === 2) sucked *= 1.1;
       else if (godLvl === 3) sucked *= 1.05;
     }
-		CacheWrinklersTotal += sucked;
+    CacheWrinklersTotal += sucked; // eslint-disable-line no-unused-vars
     if (Game.wrinklers[i].type === 0) {
-			CacheWrinklersNormal += sucked;
-			if (sucked > CacheWrinklersFattest[0]) CacheWrinklersFattest = [sucked, i];
+      CacheWrinklersNormal += sucked; // eslint-disable-line no-unused-vars
+      if (sucked > CacheWrinklersFattest[0])
+        CacheWrinklersFattest = [sucked, i];
     }
   }
 }

src/Config/CheckNotificationPermissions.js

@@ -18,7 +18,7 @@ function CheckNotificationPermissions(ToggleOnOff) {
 
     // Check if the browser supports notifications and which type
     if (!('Notification' in window)) {
-			console.log('This browser does not support notifications.');
+      console.log('This browser does not support notifications.'); // eslint-disable-line no-console
     } else if (checkNotificationPromise()) {
       Notification.requestPermission().then();
     } else {

src/Config/SaveLoadReload/SaveLoadReloadSettings.js

@@ -1,8 +1,9 @@
-import { default as ConfigDefault } from '../../Data/SettingsDefault';
-import { default as ConfigData } from '../../Data/SettingsData';
+import ConfigDefault from '../../Data/SettingsDefault';
+import ConfigData from '../../Data/SettingsData';
 import { CMOptions } from '../VariablesAndData';
 import save from '../../InitSaveLoad/save';
-import CMLoop from '../../Main/Loop';
+import CMLoopHook from '../../Main/LoopHook';
+import UpdateColours from '../../Disp/HelperFunctions/UpdateColours';
 
 /** Functions related to saving, loading and restoring all settings */
 
@@ -13,11 +14,19 @@ import CMLoop from '../../Main/Loop';
  * CM.ToggleConfigVolume() and changes in options with type "url", "color" or "numscale"
  */
 export function SaveConfig() {
-	const saveString = b64_to_utf8(unescape(localStorage.getItem('CookieClickerGame')).split('!END!')[0]);
+  const saveString = b64_to_utf8(
+    unescape(localStorage.getItem('CookieClickerGame')).split('!END!')[0],
+  );
   const CookieMonsterSave = saveString.match(/CookieMonster.*(;|$)/);
   if (CookieMonsterSave !== null) {
-		const newSaveString = saveString.replace(CookieMonsterSave[0], `CookieMonster:${save()}`);
-		localStorage.setItem('CookieClickerGame', escape(`${utf8_to_b64(newSaveString)}!END!`));
+    const newSaveString = saveString.replace(
+      CookieMonsterSave[0],
+      `CookieMonster:${save()}`,
+    );
+    localStorage.setItem(
+      'CookieClickerGame',
+      escape(`${utf8_to_b64(newSaveString)}!END!`),
+    );
   }
 }
 
@@ -33,46 +42,42 @@ export function LoadConfig(settings) {
   if (settings !== undefined) {
     CMOptions = settings;
 
+    if (typeof CMOptions.Colors !== 'undefined') {
+      delete CMOptions.Colors;
+    }
+    if (typeof CMOptions.Colours !== 'undefined') {
+      delete CMOptions.Colours;
+    }
+
     // Check values
     let mod = false;
-		for (const i in ConfigDefault) {
+    Object.keys(ConfigDefault).forEach((i) => {
       if (typeof CMOptions[i] === 'undefined') {
         mod = true;
         CMOptions[i] = ConfigDefault[i];
-			} else if (i !== 'Header' && i !== 'Colors') {
-				if (i.indexOf('SoundURL') === -1) {
-					if (!(CMOptions[i] > -1 && CMOptions[i] < ConfigData[i].label.length)) {
-						mod = true;
-						CMOptions[i] = ConfigDefault[i];
-					}
-				} else if (typeof CMOptions[i] !== 'string') { // Sound URLs
-					mod = true;
-					CMOptions[i] = ConfigDefault[i];
-				}
       } else if (i === 'Header') {
-				for (const j in ConfigDefault.Header) {
-					if (typeof CMOptions[i][j] === 'undefined' || !(CMOptions[i][j] > -1 && CMOptions[i][j] < 2)) {
+        Object.keys(ConfigDefault.Header).forEach((j) => {
+          if (
+            typeof CMOptions[i][j] === 'undefined' ||
+            !(CMOptions[i][j] > -1 && CMOptions[i][j] < 2)
+          ) {
             mod = true;
             CMOptions[i][j] = ConfigDefault[i][j];
           }
+        });
       }
-			} else { // Colors
-				for (const j in ConfigDefault.Colors) {
-					if (typeof CMOptions[i][j] === 'undefined' || typeof CMOptions[i][j] !== 'string') {
-						mod = true;
-						CMOptions[i][j] = ConfigDefault[i][j];
-					}
-				}
-			}
-		}
+    });
     if (mod) SaveConfig();
-		CMLoop(); // Do loop once
-		for (const i in ConfigDefault) {
+    CMLoopHook(); // Do loop once
+    Object.keys(ConfigDefault).forEach((i) => {
       if (i !== 'Header' && typeof ConfigData[i].func !== 'undefined') {
         ConfigData[i].func();
       }
-		}
-	} else { // Default values
+    });
+  } else {
+    // Default values
     LoadConfig(ConfigDefault);
   }
+  Game.UpdateMenu();
+  UpdateColours();
 }

src/Config/SpecificToggles.js

@@ -7,15 +7,22 @@ import { CMOptions } from './VariablesAndData';
  * This function changes the position of both the bottom and timer bar
  */
 export function UpdateBotTimerBarPosition() {
-	if (CMOptions.BotBar === 1 && CMOptions.TimerBar === 1 && CMOptions.TimerBarPos === 1) {
+  if (
+    CMOptions.BotBar === 1 &&
+    CMOptions.TimerBar === 1 &&
+    CMOptions.TimerBarPos === 1
+  ) {
     l('CMBotBar').style.bottom = l('CMTimerBar').style.height;
-		l('game').style.bottom = `${Number(l('CMTimerBar').style.height.replace('px', '')) + 70}px`;
+    l('game').style.bottom = `${
+      Number(l('CMTimerBar').style.height.replace('px', '')) + 70
+    }px`;
   } else if (CMOptions.BotBar === 1) {
     l('CMBotBar').style.bottom = '0px';
     l('game').style.bottom = '70px';
   } else if (CMOptions.TimerBar === 1 && CMOptions.TimerBarPos === 1) {
     l('game').style.bottom = l('CMTimerBar').style.height;
-	} else { // No bars
+  } else {
+    // No bars
     l('game').style.bottom = '0px';
   }
 

src/Config/ToggleSetting.js

@@ -1,4 +1,4 @@
-import { default as ConfigData } from '../Data/SettingsData';
+import ConfigData from '../Data/SettingsData';
 import { SaveConfig } from './SaveLoadReload/SaveLoadReloadSettings';
 import { CMOptions } from './VariablesAndData';
 
@@ -13,18 +13,20 @@ export const ConfigPrefix = 'CMConfig';
  * @param 	{string}	config	The name of the option
  */
 export function ToggleConfig(config) {
-	CMOptions[config]++;
+  CMOptions[config] += 1;
 
   if (CMOptions[config] === ConfigData[config].label.length) {
     CMOptions[config] = 0;
-		if (ConfigData[config].toggle) l(ConfigPrefix + config).className = 'option off';
+    if (ConfigData[config].toggle)
+      l(ConfigPrefix + config).className = 'option off';
   } else l(ConfigPrefix + config).className = 'option';
 
   if (typeof ConfigData[config].func !== 'undefined') {
     ConfigData[config].func();
   }
 
-	l(ConfigPrefix + config).innerHTML = ConfigData[config].label[CMOptions[config]];
+  l(ConfigPrefix + config).innerHTML =
+    ConfigData[config].label[CMOptions[config]];
   SaveConfig();
 }
 
@@ -47,7 +49,7 @@ export function ToggleConfigVolume(config) {
  * @param 	{string}	config	The name of the header
  */
 export function ToggleHeader(config) {
-	CMOptions.Header[config]++;
+  CMOptions.Header[config] += 1;
   if (CMOptions.Header[config] > 1) CMOptions.Header[config] = 0;
   SaveConfig();
 }

src/Config/Toggles/ToggleFavourites.js

@@ -0,0 +1,13 @@
+import { FavouriteSettings } from '../../Disp/VariablesAndData';
+
+/**
+ * This function toggles whether a setting is part of the favourites section in setting or not
+ * @param {string} config	The name of the toggleable config option
+ */
+export default function ToggleFavouriteSetting(config) {
+  if (FavouriteSettings.includes(config))
+    FavouriteSettings = FavouriteSettings.filter(function (ele) {
+      return ele !== config;
+    });
+  else FavouriteSettings.push(config);
+}

src/Config/Toggles/ToggleGCTimer.js

@@ -8,12 +8,13 @@ import { CMOptions } from '../VariablesAndData';
  */
 export default function ToggleGCTimer() {
   if (CMOptions.GCTimer === 1) {
-		for (const i of Object.keys(GCTimers)) {
+    Object.keys(GCTimers).forEach((i) => {
       GCTimers[i].style.display = 'block';
       GCTimers[i].style.left = CacheGoldenShimmersByID[i].l.style.left;
       GCTimers[i].style.top = CacheGoldenShimmersByID[i].l.style.top;
-		}
+    });
   } else {
-		for (const i of Object.keys(GCTimers)) GCTimers[i].style.display = 'none';
+    // eslint-disable-next-line no-return-assign
+    Object.keys(GCTimers).forEach((i) => (GCTimers[i].style.display = 'none'));
   }
 }

src/Config/Toggles/ToggleSectionHideButtons.js

@@ -0,0 +1,13 @@
+import { CMOptions } from '../VariablesAndData';
+
+/**
+ * This function updates the display setting of the two objects created by CM.Disp.CreateWrinklerButtons()
+ * It is called by changes in CM.Options.WrinklerButtons
+ */
+export default function ToggleSectionHideButtons() {
+  if (CMOptions.HideSectionsButtons) {
+    l('CMSectionHidButtons').style.display = '';
+  } else {
+    l('CMSectionHidButtons').style.display = 'none';
+  }
+}

src/Config/Toggles/ToggleUpgradeBarAndColor.js

@@ -1,22 +0,0 @@
-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
- */
-export default function ToggleUpgradeBarAndColor() {
-	if (CMOptions.UpBarColor === 1) { // Colours and bar on
-		l('CMUpgradeBar').style.display = '';
-		UpdateUpgrades();
-	} else if (CMOptions.UpBarColor === 2) { // Colours on and bar off
-		l('CMUpgradeBar').style.display = 'none';
-		UpdateUpgrades();
-	} else { // Colours and bar off
-		l('CMUpgradeBar').style.display = 'none';
-		Game.RebuildUpgrades();
-	}
-}

src/Config/Toggles/ToggleUpgradeBarAndColour.js

@@ -0,0 +1,22 @@
+import UpdateUpgrades from '../../Disp/BuildingsUpgrades/Upgrades';
+import { CMOptions } from '../VariablesAndData';
+
+/**
+ * This function toggles the upgrade bar and the colours of upgrades
+ * It is called by a change in CM.Options.UpBarColor
+ */
+export default function ToggleUpgradeBarAndColor() {
+  if (CMOptions.UpBarColor === 1) {
+    // Colours and bar on
+    l('CMUpgradeBar').style.display = '';
+    UpdateUpgrades();
+  } else if (CMOptions.UpBarColor === 2) {
+    // Colours on and bar off
+    l('CMUpgradeBar').style.display = 'none';
+    UpdateUpgrades();
+  } else {
+    // Colours and bar off
+    l('CMUpgradeBar').style.display = 'none';
+    Game.RebuildUpgrades();
+  }
+}

src/Config/Toggles/ToggleUpgradeBarFixedPos.js

@@ -5,7 +5,8 @@ import { CMOptions } from '../VariablesAndData';
  * It is called by a change in CM.Options.UpgradeBarFixedPos
  */
 export default function ToggleUpgradeBarFixedPos() {
-	if (CMOptions.UpgradeBarFixedPos === 1) { // Fix to top of screen when scrolling
+  if (CMOptions.UpgradeBarFixedPos === 1) {
+    // Fix to top of screen when scrolling
     l('CMUpgradeBar').style.position = 'sticky';
     l('CMUpgradeBar').style.top = '0px';
   } else {

src/Config/Toggles/ToggleWrinklerButtons.js

@@ -5,7 +5,7 @@ import { CMOptions } from '../VariablesAndData';
  * It is called by changes in CM.Options.WrinklerButtons
  */
 export default function ToggleWrinklerButtons() {
-	if (CMOptions.WrinklerButtons) {
+  if (CMOptions.WrinklerButtons && Game.elderWrath) {
     l('PopAllNormalWrinklerButton').style.display = '';
     l('PopFattestWrinklerButton').style.display = '';
   } else {

src/Config/VariablesAndData.js

@@ -1,4 +1,2 @@
-/* eslint-disable prefer-const */
-
-export let CMOptions = {};
+export let CMOptions = {}; // eslint-disable-line prefer-const
 export const ConfigPrefix = 'CMConfig';

src/CookieMonster.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import init from './InitSaveLoad/init';
 import load from './InitSaveLoad/load';
 import save from './InitSaveLoad/save';

src/Data/Gamedata.js

@@ -39,7 +39,8 @@ export const HalloCookies = [
 ];
 
 /** Array of the names of all Christmas cookies */
-export const ChristCookies = ['Christmas tree biscuits',
+export const ChristCookies = [
+  'Christmas tree biscuits',
   'Snowflake biscuits',
   'Snowman biscuits',
   'Holly biscuits',
@@ -49,7 +50,8 @@ export const ChristCookies = ['Christmas tree biscuits',
 ];
 
 /** Array of the names of all Valentine cookies */
-export const ValCookies = ['Pure heart biscuits',
+export const ValCookies = [
+  'Pure heart biscuits',
   'Ardent heart biscuits',
   'Sour heart biscuits',
   'Weeping heart biscuits',
@@ -59,7 +61,8 @@ export const ValCookies = ['Pure heart biscuits',
 ];
 
 /** Array of the names of all plant drops */
-export const PlantDrops = ['Elderwort biscuits',
+export const PlantDrops = [
+  'Elderwort biscuits',
   'Bakeberry cookies',
   'Duketater cookies',
   'Green yeast digestives',

src/Data/Moddata.js

@@ -1,7 +1,7 @@
 /** Data related directly to Cookie Monster */
 
 export const VersionMajor = '2.031';
-export const VersionMinor = '5';
+export const VersionMinor = '7';
 
 /** Information about Cookie Monster to be displayed in the info section */
 export const ModDescription = `<div class="listing">
@@ -15,15 +15,25 @@ export const ModDescription = `<div class="listing">
 
 /** Latest releasenotes of Cookie Monster to be displayed in the info section */
 export const LatestReleaseNotes = `<div class="listing">
-The latest update (v 2.031.5) sees a total rehaul of the backend of the mod. It does not introduce any new functions, this is planned for the next release.</br>
-We believe we have fixed all bugs related to this new code, but if you find any bugs, please report them on the GitHub!</br>
+These are the release notes for the latest update (v 2.031.7).</br>
 </br>
-<b>Besides, this update fixes the following bugs:</b></br>
-- Fixed some upgrade tooltips which did not display the full effect of buying the upgrades</br>
-- Fixed not always being able to sell when "blocking bulk buy"</br>
-- Fixed heavenly chips per second display</br>
-- Fixed small display bug when pressing shift and hovering over garden plots</br>
-- Fixed some bugs with the display of numbers and formatting of them</br>
+This update implements the following functions:</br>
+- Updated the ordering and description of all settings of Cookie Monster</br>
+- Colours of Flash notifications can now be set by the user</br>
+- You can now select a number of settings to be your 'favourite'. They will be displayed at the top of all other settings in a new section. This functionality is toggleable and you can find it in the miscellaneous section</br>
+- The statistics page now shows cookies earned by clicking for a selected time period</br>
+- The statistics page can now show missing normal achievements, this can be toggled in the settings</br>
 </br>
+This update fixes the following bugs:</br>
+- Fixed some typo's</br>
+- No longer show the wrinkler pop buttons when wrinklers can't spawn</br>
+- Fixed incorrect calculation of plant maturity for relevant tooltips</br>
+- Fixed edit prompts not working in settings</br>
+- Fixed red and purple being switched around for PP colour coding</br>
+- Fixed incorrect notation of numbers in Dragon tooltip and interface</br>
+- Fixed incorrect calculation of changing Dragon aura cost</br>
+- Fixed incorrect calculation of changing Pantheon gods effect</br>
+- Fixed fluctuating PP values when god Cyclius was selected</br>
+- Fixed black flickering when Golden Cookies or buffs start</br>
 </div>
 `;

src/Data/Scales.js

@@ -1,19 +1,11 @@
 /** Data related directly to the scales used by Cookie Monster */
 
 /** Array of abbreviations used in the "Metric" scale */
-export const metric = ['',
-	'',
-	'M',
-	'G',
-	'T',
-	'P',
-	'E',
-	'Z',
-	'Y',
-];
+export const metric = ['', '', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
 
 /** Array of abbreviations used in the "Short" scale */
-export const shortScale = ['',
+export const shortScale = [
+  '',
   '',
   'M',
   'B',
@@ -42,7 +34,8 @@ export const shortScale = ['',
 ];
 
 /** Array of abbreviations used in the "Abbreviated Short" scale */
-export const shortScaleAbbreviated = ['',
+export const shortScaleAbbreviated = [
+  '',
   'K',
   'M',
   'B',

src/Data/Sectionheaders.js

@@ -2,12 +2,14 @@
 
 /** Display titles of the headers of the Cookie Monster settings section */
 export const ConfigGroups = {
-	BarsColors: 'Bars/Colors',
+  Favourite: 'Favourite Settings',
   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/SettingClasses.js

@@ -23,10 +23,9 @@ export class SettingStandard extends Setting {
 }
 /** The colour picker setting class */
 export class SettingColours extends Setting {
-	constructor(type, group, desc, func) {
+  constructor(type, group, desc) {
     super(type, group);
     this.desc = desc;
-		this.func = func;
   }
 }
 

src/Data/SettingsDefault.js

@@ -1,58 +1,44 @@
 /** 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,
+  ColourBlue: '#4bb8f0',
+  ColourGreen: '#00ff00',
+  ColourYellow: '#ffff00',
+  ColourOrange: '#ff7f00',
+  ColourRed: '#ff0000',
+  ColourPurple: '#ff00ff',
+  ColourGray: '#b3b3b3',
+  ColourPink: '#ff1493',
+  ColourBrown: '#8b4513',
   BotBar: 1,
   TimerBar: 1,
   TimerBarPos: 0,
   TimerBarOverlay: 2,
-	BuildColor: 1,
-	BulkBuildColor: 0,
-	UpBarColor: 1,
+  UpBarColour: 1,
   UpgradeBarFixedPos: 1,
-	CalcWrink: 0,
-	CPSMode: 1,
-	AvgCPSHist: 3,
-	AvgClicksHist: 0,
-	ColorPPBulkMode: 1,
-	PPExcludeTop: 0,
-	PPSecondsLowerLimit: 0,
-	PPOnlyConsiderBuyable: 0,
-	ToolWarnBon: 0,
-	Title: 1,
-	GeneralSound: 1,
-	GCNotification: 0,
-	GCFlash: 1,
-	GCSound: 1,
-	GCVolume: 100,
-	GCSoundURL: 'https://freesound.org/data/previews/66/66717_931655-lq.mp3',
-	FortuneNotification: 0,
-	FortuneFlash: 1,
-	FortuneSound: 1,
-	FortuneVolume: 100,
-	FortuneSoundURL: 'https://freesound.org/data/previews/174/174027_3242494-lq.mp3',
-	SeaNotification: 0,
-	SeaFlash: 1,
-	SeaSound: 1,
-	SeaVolume: 100,
-	SeaSoundURL: 'https://www.freesound.org/data/previews/121/121099_2193266-lq.mp3',
-	GardFlash: 1,
-	GardSound: 1,
-	GardVolume: 100,
-	GardSoundURL: 'https://freesound.org/data/previews/103/103046_861714-lq.mp3',
-	MagicNotification: 0,
-	MagicFlash: 1,
-	MagicSound: 1,
-	MagicVolume: 100,
-	MagicSoundURL: 'https://freesound.org/data/previews/221/221683_1015240-lq.mp3',
-	WrinklerNotification: 0,
-	WrinklerFlash: 1,
-	WrinklerSound: 1,
-	WrinklerVolume: 100,
-	WrinklerSoundURL: 'https://freesound.org/data/previews/124/124186_8043-lq.mp3',
-	WrinklerMaxNotification: 0,
-	WrinklerMaxFlash: 1,
-	WrinklerMaxSound: 1,
-	WrinklerMaxVolume: 100,
-	WrinklerMaxSoundURL: 'https://freesound.org/data/previews/152/152743_15663-lq.mp3',
+  SortBuildings: 0,
+  SortUpgrades: 0,
+  DragonAuraInfo: 1,
+  GrimoireBar: 1,
+  GCTimer: 1,
+  Favicon: 1,
+  WrinklerButtons: 1,
+  HideSectionsButtons: 0,
   TooltipBuildUpgrade: 1,
   TooltipAmor: 0,
   ToolWarnLucky: 1,
@@ -61,36 +47,97 @@ const ConfigDefault = {
   ToolWarnConjureFrenzy: 1,
   ToolWarnEdifice: 1,
   ToolWarnUser: 0,
+  ToolWarnBon: 1,
   ToolWarnPos: 1,
   TooltipGrim: 1,
   TooltipWrink: 1,
   TooltipLump: 1,
   TooltipPlots: 1,
-	DragonAuraInfo: 1,
+  TooltipPantheon: 1,
   TooltipAscendButton: 1,
   Stats: 1,
   MissingUpgrades: 1,
+  MissingAchievements: 0,
   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,
+  Title: 1,
+  GeneralSound: 1,
+  GCNotification: 0,
+  GCFlash: 1,
+  ColourGCFlash: '#ffffff',
+  GCSound: 1,
+  GCVolume: 100,
+  GCSoundURL: 'https://freesound.org/data/previews/66/66717_931655-lq.mp3',
+  FortuneNotification: 0,
+  FortuneFlash: 1,
+  ColourFortuneFlash: '#ffffff',
+  FortuneSound: 1,
+  FortuneVolume: 100,
+  FortuneSoundURL:
+    'https://freesound.org/data/previews/174/174027_3242494-lq.mp3',
+  SeaNotification: 0,
+  SeaFlash: 1,
+  ColourSeaFlash: '#ffffff',
+  SeaSound: 1,
+  SeaVolume: 100,
+  SeaSoundURL:
+    'https://www.freesound.org/data/previews/121/121099_2193266-lq.mp3',
+  GardFlash: 1,
+  ColourGardFlash: '#ffffff',
+  GardSound: 1,
+  GardVolume: 100,
+  GardSoundURL: 'https://freesound.org/data/previews/103/103046_861714-lq.mp3',
+  MagicNotification: 0,
+  MagicFlash: 1,
+  ColourMagicFlash: '#ffffff',
+  MagicSound: 1,
+  MagicVolume: 100,
+  MagicSoundURL:
+    'https://freesound.org/data/previews/221/221683_1015240-lq.mp3',
+  WrinklerNotification: 0,
+  WrinklerFlash: 1,
+  ColourWrinklerFlash: '#ffffff',
+  WrinklerSound: 1,
+  WrinklerVolume: 100,
+  WrinklerSoundURL:
+    'https://freesound.org/data/previews/124/124186_8043-lq.mp3',
+  WrinklerMaxNotification: 0,
+  WrinklerMaxFlash: 1,
+  ColourWrinklerMaxFlash: '#ffffff',
+  WrinklerMaxSound: 1,
+  WrinklerMaxVolume: 100,
+  WrinklerMaxSoundURL:
+    'https://freesound.org/data/previews/152/152743_15663-lq.mp3',
   BulkBuyBlock: 0,
+  FavouriteSettings: 1,
   Header: {
-		BarsColors: 1, Calculation: 1, Notification: 1, NotificationGeneral: 1, NotificationGC: 1, NotificationFC: 1, NotificationSea: 1, NotificationGard: 1, NotificationMagi: 1, NotificationWrink: 1, NotificationWrinkMax: 1, Tooltip: 1, Statistics: 1, Notation: 1, Miscellaneous: 1, Lucky: 1, Chain: 1, Spells: 1, Garden: 1, Prestige: 1, Wrink: 1, Sea: 1, Misc: 1, InfoTab: 1,
+    Favourite: 1,
+    Calculation: 1,
+    Notation: 1,
+    Colours: 1,
+    BarsDisplay: 1,
+    Tooltip: 1,
+    Statistics: 1,
+    Notification: 1,
+    NotificationGeneral: 1,
+    NotificationGC: 1,
+    NotificationFC: 1,
+    NotificationSea: 1,
+    NotificationGard: 1,
+    NotificationMagi: 1,
+    NotificationWrink: 1,
+    NotificationWrinkMax: 1,
+    Miscellaneous: 1,
+    Lucky: 1,
+    Chain: 1,
+    Spells: 1,
+    Garden: 1,
+    Prestige: 1,
+    Wrink: 1,
+    Sea: 1,
+    Misc: 1,
+    InfoTab: 1,
   },
 };
 

src/Disp/BeautifyAndFormatting/BeautifyFormatting.js

@@ -4,7 +4,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';
 
 /**
@@ -18,49 +21,72 @@ export function Beautify(num, floats, forced) {
   const decimals = CMOptions.ScaleDecimals + 1;
   if (num === Infinity) {
     return 'Infinity';
-	} if (typeof num === 'undefined') {
+  }
+  if (typeof num === 'undefined') {
     return '0';
-	} if (CMOptions.Scale === 0) {
+  }
+  if (CMOptions.Scale === 0) {
     return BackupFunctions.Beautify(num, floats);
-	} if (Number.isFinite(num)) {
+  }
+  if (Number.isFinite(num)) {
+    if (num < 0) {
+      return `-${Beautify(Math.abs(num))}`;
+    }
     let answer = '';
     if (num === 0) {
       return num.toString();
-		} if (num > 0.001 && num < CMOptions.ScaleCutoff) {
+    }
+    if (num > 0.001 && num < CMOptions.ScaleCutoff) {
       if (CMOptions.ScaleSeparator) answer = num.toLocaleString('nl');
       else answer = num.toLocaleString('en');
       return answer;
-		} if (CMOptions.Scale === 4 && !forced || forced === 4) { // Scientific notation, 123456789 => 1.235E+8
+    }
+    if ((CMOptions.Scale === 4 && !forced) || forced === 4) {
+      // Scientific notation, 123456789 => 1.235E+8
       answer = num.toExponential(decimals).toString().replace('e', 'E');
     } else {
       const exponential = num.toExponential().toString();
-			const AmountOfTenPowerThree = Math.floor(exponential.slice(exponential.indexOf('e') + 1) / 3);
-			answer = (num / Number(`1e${AmountOfTenPowerThree * 3}`)).toFixed(decimals);
+      const AmountOfTenPowerThree = Math.floor(
+        exponential.slice(exponential.indexOf('e') + 1) / 3,
+      );
+      answer = (num / Number(`1e${AmountOfTenPowerThree * 3}`)).toFixed(
+        decimals,
+      );
       // answer is now "xxx.xx" (e.g., 123456789 would be 123.46)
-			if (CMOptions.Scale === 1 && !forced || forced === 1) { // Metric scale, 123456789 => 123.457 M
+      if ((CMOptions.Scale === 1 && !forced) || forced === 1) {
+        // Metric scale, 123456789 => 123.457 M
         if (num >= 0.01 && num < Number(`1e${metric.length * 3}`)) {
           answer += ` ${metric[AmountOfTenPowerThree]}`;
         } else answer = Beautify(num, 0, 4); // If number is too large or little, revert to scientific notation
-			} else if (CMOptions.Scale === 2 && !forced || forced === 2) { // Short scale, 123456789 => 123.457 M
+      } else if ((CMOptions.Scale === 2 && !forced) || forced === 2) {
+        // Short scale, 123456789 => 123.457 M
         if (num >= 0.01 && num < Number(`1e${shortScale.length * 3}`)) {
           answer += ` ${shortScale[AmountOfTenPowerThree]}`;
         } else answer = Beautify(num, 0, 4); // If number is too large or little, revert to scientific notation
-			} else if (CMOptions.Scale === 3 && !forced || forced === 3) { // Short scale, 123456789 => 123.457 M
-				if (num >= 0.01 && num < Number(`1e${shortScaleAbbreviated.length * 3}`)) {
+      } else if ((CMOptions.Scale === 3 && !forced) || forced === 3) {
+        // Short scale, 123456789 => 123.457 M
+        if (
+          num >= 0.01 &&
+          num < Number(`1e${shortScaleAbbreviated.length * 3}`)
+        ) {
           answer += ` ${shortScaleAbbreviated[AmountOfTenPowerThree]}`;
         } else answer = Beautify(num, 0, 4); // If number is too large or little, revert to scientific notation
-			} else if (CMOptions.Scale === 5 && !forced || forced === 5) { // Engineering notation, 123456789 => 123.457E+6
+      } else if ((CMOptions.Scale === 5 && !forced) || forced === 5) {
+        // Engineering notation, 123456789 => 123.457E+6
         answer += `E${AmountOfTenPowerThree * 3}`;
       }
     }
     if (answer === '') {
-			console.log(`Could not beautify number with CM.Disp.Beautify: ${num}`);
+      // eslint-disable-next-line no-console
+      console.log(
+        `Could not beautify number with Cookie Monster Beautify: ${num}`,
+      );
       answer = BackupFunctions.Beautify(num, floats);
     }
     if (CMOptions.ScaleSeparator) answer = answer.replace('.', ',');
     return answer;
   }
-	console.log(`Could not beautify number with CM.Disp.Beautify: ${num}`);
+  console.log(`Could not beautify number with Cookie Monster Beautify: ${num}`); // eslint-disable-line no-console
   return BackupFunctions.Beautify(num, floats);
 }
 
@@ -71,28 +97,37 @@ export function Beautify(num, floats, forced) {
  * @returns	{string}				Formatted time
  */
 export function FormatTime(time, longFormat) {
+  let formattedTime = time;
   if (time === Infinity) return time;
-	time = Math.ceil(time);
-	const y = Math.floor(time / 31557600);
-	const d = Math.floor(time % 31557600 / 86400);
-	const h = Math.floor(time % 86400 / 3600);
-	const m = Math.floor(time % 3600 / 60);
-	const s = Math.floor(time % 60);
+  if (time < 0) return 'Negative time period';
+  formattedTime = Math.ceil(time);
+  const y = Math.floor(formattedTime / 31557600);
+  const d = Math.floor((formattedTime % 31557600) / 86400);
+  const h = Math.floor((formattedTime % 86400) / 3600);
+  const m = Math.floor((formattedTime % 3600) / 60);
+  const s = Math.floor(formattedTime % 60);
   let str = '';
   if (CMOptions.TimeFormat) {
-		if (time > 3155760000) return 'XX:XX:XX:XX:XX';
+    if (formattedTime > 3155760000) return 'XX:XX:XX:XX:XX';
     str += `${(y < 10 ? '0' : '') + y}:`;
     str += `${(d < 10 ? '0' : '') + d}:`;
     str += `${(h < 10 ? '0' : '') + h}:`;
     str += `${(m < 10 ? '0' : '') + m}:`;
     str += (s < 10 ? '0' : '') + s;
   } else {
-		if (time > 777600000) return longFormat ? 'Over 9000 days!' : '>9000d';
-		str += (y > 0 ? `${y + (longFormat ? (y === 1 ? ' year' : ' years') : 'y')}, ` : '');
-		str += (d > 0 ? `${d + (longFormat ? (d === 1 ? ' day' : ' days') : 'd')}, ` : '');
-		if (str.length > 0 || h > 0) str += `${h + (longFormat ? (h === 1 ? ' hour' : ' hours') : 'h')}, `;
-		if (str.length > 0 || m > 0) str += `${m + (longFormat ? (m === 1 ? ' minute' : ' minutes') : 'm')}, `;
-		str += s + (longFormat ? (s === 1 ? ' second' : ' seconds') : 's');
+    if (formattedTime > 777600000)
+      return longFormat ? 'Over 9000 days!' : '>9000d';
+    str +=
+      y > 0
+        ? `${y + (longFormat ? (y === 1 ? ' year' : ' years') : 'y')}, ` // eslint-disable-line no-nested-ternary
+        : '';
+    str +=
+      d > 0 ? `${d + (longFormat ? (d === 1 ? ' day' : ' days') : 'd')}, ` : ''; // eslint-disable-line no-nested-ternary
+    if (str.length > 0 || h > 0)
+      str += `${h + (longFormat ? (h === 1 ? ' hour' : ' hours') : 'h')}, `; // eslint-disable-line no-nested-ternary
+    if (str.length > 0 || m > 0)
+      str += `${m + (longFormat ? (m === 1 ? ' minute' : ' minutes') : 'm')}, `; // eslint-disable-line no-nested-ternary
+    str += s + (longFormat ? (s === 1 ? ' second' : ' seconds') : 's'); // eslint-disable-line no-nested-ternary
   }
   return str;
 }
@@ -102,18 +137,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 };
 }

src/Disp/BuildingsUpgrades/Buildings.js

@@ -1,8 +1,12 @@
-import { CacheObjects1, CacheObjects10, CacheObjects100 } from '../../Cache/VariablesAndData';
+import {
+  CacheObjects1,
+  CacheObjects10,
+  CacheObjects100,
+} from '../../Cache/VariablesAndData';
 import { CMOptions } from '../../Config/VariablesAndData';
 import BuildingSell from '../../Sim/SimulationEvents/SellBuilding';
 import { Beautify } from '../BeautifyAndFormatting/BeautifyFormatting';
-import { Colors, LastTargetBuildings } from '../VariablesAndData';
+import { ColoursOrdering, LastTargetBuildings } from '../VariablesAndData';
 
 /**
  * Section: Functions related to right column of the screen (buildings/upgrades)
@@ -10,8 +14,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;
@@ -25,17 +29,18 @@ export default function UpdateBuildings() {
   else if (target === 100) target = CacheObjects100;
 
   if (Game.buyMode === 1) {
-		if (CMOptions.BuildColor === 1) {
-			for (const i of Object.keys(target)) {
-				l(`productPrice${Game.Objects[i].id}`).style.color = CMOptions.Colors[target[i].color];
-			}
+    if (CMOptions.BuildColour === 1) {
+      Object.keys(target).forEach((i) => {
+        l(`productPrice${Game.Objects[i].id}`).style.color =
+          CMOptions[`Colour${target[i].color}`];
+      });
     } else {
-			for (const i of Object.keys(Game.Objects)) {
+      Object.keys(Game.Objects).forEach((i) => {
         l(`productPrice${Game.Objects[i].id}`).style.removeProperty('color');
-			}
+      });
     }
   } else if (Game.buyMode === -1) {
-		for (const i of Object.keys(CacheObjects1)) {
+    Object.keys(CacheObjects1).forEach((i) => {
       const o = Game.Objects[i];
       l(`productPrice${o.id}`).style.color = '';
       /*
@@ -46,22 +51,54 @@ export default function UpdateBuildings() {
        *
        * This issue is extensively detailed here: https://github.com/Aktanusa/CookieMonster/issues/359#issuecomment-735658262
        */
-			l(`productPrice${o.id}`).innerHTML = Beautify(BuildingSell(o, o.basePrice, o.amount, o.free, Game.buyBulk, 1));
-		}
+      l(`productPrice${o.id}`).innerHTML = Beautify(
+        BuildingSell(o, o.basePrice, o.amount, o.free, Game.buyBulk, 1),
+      );
+    });
   }
 
   // Build array of pointers, sort by pp, use array index (+2) as the grid row number
   // (grid rows are 1-based indexing, and row 1 is the bulk buy/sell options)
   // This regulates sorting of buildings
   if (Game.buyMode === 1 && CMOptions.SortBuildings) {
-		const arr = Object.keys(target).map((k) => {
+    let arr;
+    if (CMOptions.SortBuildings === 1) {
+      arr = Object.keys(CacheObjects1).map((k) => {
+        const o = CacheObjects1[k];
+        o.name = k;
+        o.id = Game.Objects[k].id;
+        return o;
+      });
+
+      arr.sort(function (a, b) {
+        return ColoursOrdering.indexOf(a.color) > // eslint-disable-line no-nested-ternary
+          ColoursOrdering.indexOf(b.color)
+          ? 1
+          : ColoursOrdering.indexOf(a.color) < ColoursOrdering.indexOf(b.color) // eslint-disable-line no-nested-ternary
+          ? -1
+          : a.pp < b.pp
+          ? -1
+          : 0;
+      });
+    } else if (CMOptions.SortBuildings === 2) {
+      arr = Object.keys(target).map((k) => {
         const o = target[k];
         o.name = k;
         o.id = Game.Objects[k].id;
         return o;
       });
 
-		arr.sort(function (a, b) { return (Colors.indexOf(a.color) > Colors.indexOf(b.color) ? 1 : (Colors.indexOf(a.color) < Colors.indexOf(b.color) ? -1 : (a.pp < b.pp) ? -1 : 0)); });
+      arr.sort(function (a, b) {
+        return ColoursOrdering.indexOf(a.color) > // eslint-disable-line no-nested-ternary
+          ColoursOrdering.indexOf(b.color)
+          ? 1
+          : ColoursOrdering.indexOf(a.color) < ColoursOrdering.indexOf(b.color) // eslint-disable-line no-nested-ternary
+          ? -1
+          : a.pp < b.pp
+          ? -1
+          : 0;
+      });
+    }
 
     for (let x = 0; x < arr.length; x++) {
       Game.Objects[arr[x].name].l.style.gridRow = `${x + 2}/${x + 2}`;

src/Disp/BuildingsUpgrades/UpgradeBar.js

@@ -1,5 +1,13 @@
 import {
-	ColorBackPre, ColorBlue, ColorGray, ColorGreen, ColorOrange, ColorPurple, ColorRed, ColorTextPre, ColorYellow,
+  ColourBackPre,
+  ColourBlue,
+  ColourGray,
+  ColourGreen,
+  ColourOrange,
+  ColourPurple,
+  ColourRed,
+  ColourTextPre,
+  ColourYellow,
 } from '../VariablesAndData';
 
 /**
@@ -20,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';
@@ -30,13 +38,25 @@ function CreateUpgradeBarLegend() {
     return div;
   };
 
-	legend.appendChild(legendLine(ColorBlue, 'Better than best PP building'));
-	legend.appendChild(legendLine(ColorGreen, 'Same as best PP building'));
-	legend.appendChild(legendLine(ColorYellow, 'Between best and worst PP buildings closer to best'));
-	legend.appendChild(legendLine(ColorOrange, 'Between best and worst PP buildings closer to worst'));
-	legend.appendChild(legendLine(ColorRed, 'Same as worst PP building'));
-	legend.appendChild(legendLine(ColorPurple, 'Worse than worst PP building'));
-	legend.appendChild(legendLine(ColorGray, 'Negative or infinity PP'));
+  legend.appendChild(
+    legendLine(ColourBlue, 'Better than the best PP of a building option'),
+  );
+  legend.appendChild(
+    legendLine(ColourGreen, 'Same as the best PP building option'),
+  );
+  legend.appendChild(
+    legendLine(ColourYellow, 'Within the top 10 of PP for buildings'),
+  );
+  legend.appendChild(
+    legendLine(ColourOrange, 'Within the top 20 of PP for buildings'),
+  );
+  legend.appendChild(
+    legendLine(ColourRed, 'Within the top 30 of PP for buildings'),
+  );
+  legend.appendChild(
+    legendLine(ColourPurple, 'Outside of the top 30 of PP for buildings'),
+  );
+  legend.appendChild(legendLine(ColourGray, 'Negative or infinity PP'));
   return legend;
 }
 
@@ -47,33 +67,40 @@ 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';
   UpgradeBar.style.zIndex = '21';
-	UpgradeBar.onmouseout = function () { Game.tooltip.hide(); };
+  UpgradeBar.onmouseout = function () {
+    Game.tooltip.hide();
+  };
 
   const placeholder = document.createElement('div');
   placeholder.appendChild(CreateUpgradeBarLegend());
-	UpgradeBar.onmouseover = function () { Game.tooltip.draw(this, escape(placeholder.innerHTML), 'store'); };
+  UpgradeBar.onmouseover = function () {
+    Game.tooltip.draw(this, escape(placeholder.innerHTML), 'store');
+  };
 
   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, l('upgrades').parentNode.childNodes[3]);
+  l('upgrades').parentNode.insertBefore(
+    UpgradeBar,
+    l('upgrades').parentNode.childNodes[3],
+  );
 }

src/Disp/BuildingsUpgrades/Upgrades.js

@@ -1,18 +1,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,
+  ColoursOrdering,
+  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;
@@ -21,31 +29,34 @@ export default function UpdateUpgrades() {
     let purple = 0;
     let gray = 0;
 
-		for (const i of Object.keys(Game.UpgradesInStore)) {
+    Object.keys(Game.UpgradesInStore).forEach((i) => {
       const me = Game.UpgradesInStore[i];
-			let addedColor = false;
-			for (let j = 0; j < l(`upgrade${i}`).childNodes.length; j++) {
-				if (l(`upgrade${i}`).childNodes[j].className.indexOf(ColorBackPre) !== -1) {
-					l(`upgrade${i}`).childNodes[j].className = ColorBackPre + CacheUpgrades[me.name].color;
-					addedColor = true;
+      let addedColour = false;
+      for (let j = 0; j < l(`upgrade${i}`).childNodes.length; j += 1) {
+        if (
+          l(`upgrade${i}`).childNodes[j].className.indexOf(ColourBackPre) !== -1
+        ) {
+          l(`upgrade${i}`).childNodes[j].className =
+            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++;
-			else if (CacheUpgrades[me.name].color === ColorGreen) green++;
-			else if (CacheUpgrades[me.name].color === ColorYellow) yellow++;
-			else if (CacheUpgrades[me.name].color === ColorOrange) orange++;
-			else if (CacheUpgrades[me.name].color === ColorRed) red++;
-			else if (CacheUpgrades[me.name].color === ColorPurple) purple++;
-			else if (CacheUpgrades[me.name].color === ColorGray) gray++;
-		}
+      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;
     l('CMUpgradeBarGreen').textContent = green;
@@ -59,7 +70,7 @@ export default function UpdateUpgrades() {
   const arr = [];
   // Build array of pointers, sort by pp, set flex positions
   // This regulates sorting of upgrades
-	for (let x = 0; x < Game.UpgradesInStore.length; x++) {
+  for (let x = 0; x < Game.UpgradesInStore.length; x += 1) {
     const o = {};
     o.name = Game.UpgradesInStore[x].name;
     o.price = Game.UpgradesInStore[x].basePrice;
@@ -68,7 +79,15 @@ export default function UpdateUpgrades() {
   }
 
   if (CMOptions.SortUpgrades) {
-		arr.sort(function (a, b) { return (Colors.indexOf(a.color) > Colors.indexOf(b.color) ? 1 : (Colors.indexOf(a.color) < Colors.indexOf(b.color) ? -1 : (a.pp < b.pp) ? -1 : 0)); });
+    arr.sort(function (a, b) {
+      return ColoursOrdering.indexOf(a.color) > ColoursOrdering.indexOf(b.color) // eslint-disable-line no-nested-ternary
+        ? 1
+        : ColoursOrdering.indexOf(a.color) < ColoursOrdering.indexOf(b.color) // eslint-disable-line no-nested-ternary
+        ? -1
+        : a.pp < b.pp
+        ? -1
+        : 0;
+    });
   } else {
     arr.sort((a, b) => a.price - b.price);
   }
@@ -76,7 +95,8 @@ export default function UpdateUpgrades() {
   const nameChecker = function (arr2, upgrade) {
     return arr2.findIndex((e) => e.name === upgrade.name);
   };
-	for (let x = 0; x < Game.UpgradesInStore.length; x++) {
-		l(`upgrade${x}`).style.order = nameChecker(arr, Game.UpgradesInStore[x]) + 1;
+  for (let x = 0; x < Game.UpgradesInStore.length; x += 1) {
+    l(`upgrade${x}`).style.order =
+      nameChecker(arr, Game.UpgradesInStore[x]) + 1;
   }
 }

src/Disp/Dragon/Dragon.js

@@ -4,7 +4,10 @@ import CacheDragonCost from '../../Cache/Dragon/Dragon';
 import { CacheCostDragonUpgrade } from '../../Cache/VariablesAndData';
 import { CMOptions } from '../../Config/VariablesAndData';
 import CalculateChangeAura from '../../Sim/SimulationEvents/AuraChange';
-import { Beautify, FormatTime } from '../BeautifyAndFormatting/BeautifyFormatting';
+import {
+  Beautify,
+  FormatTime,
+} from '../BeautifyAndFormatting/BeautifyFormatting';
 
 /**
  * This functions adds the two extra lines about CPS and time to recover to the aura picker infoscreen
@@ -13,16 +16,21 @@ import { Beautify, FormatTime } from '../BeautifyAndFormatting/BeautifyFormattin
 export function AddAuraInfo(aura) {
   if (CMOptions.DragonAuraInfo === 1) {
     const [bonusCPS, priceOfChange] = CalculateChangeAura(aura);
-		const timeToRecover = FormatTime(priceOfChange / (bonusCPS + Game.cookiesPs));
-		const bonusCPSPercentage = Beautify(bonusCPS / Game.cookiesPs);
+    const timeToRecover = FormatTime(
+      priceOfChange / (bonusCPS + Game.cookiesPs),
+    );
+    const bonusCPSPercentage = Beautify((bonusCPS / Game.cookiesPs) * 100);
 
     l('dragonAuraInfo').style.minHeight = '60px';
     l('dragonAuraInfo').style.margin = '8px';
-		l('dragonAuraInfo').appendChild(document.createElement('div')).className = 'line';
+    l('dragonAuraInfo').appendChild(document.createElement('div')).className =
+      'line';
     const div = document.createElement('div');
     div.style.minWidth = '200px';
     div.style.textAlign = 'center';
-		div.textContent = `Picking this aura will change CPS by ${Beautify(bonusCPS)} (${bonusCPSPercentage}% of current CPS).`;
+    div.textContent = `Picking this aura will change CPS by ${Beautify(
+      bonusCPS,
+    )} (${bonusCPSPercentage}% of current CPS).`;
     l('dragonAuraInfo').appendChild(div);
     const div2 = document.createElement('div');
     div2.style.minWidth = '200px';
@@ -38,16 +46,25 @@ export function AddAuraInfo(aura) {
  */
 export function AddDragonLevelUpTooltip() {
   // Check if it is the dragon popup that is on screen
-	if ((l('specialPopup').className.match(/onScreen/) && l('specialPopup').children[0].style.background.match(/dragon/)) !== null) {
+  if (
+    (l('specialPopup').className.match(/onScreen/) &&
+      l('specialPopup').children[0].style.background.match(/dragon/)) !== null
+  ) {
     for (let i = 0; i < l('specialPopup').childNodes.length; i++) {
       if (l('specialPopup').childNodes[i].className === 'optionBox') {
         l('specialPopup').children[i].onmouseover = function () {
           CacheDragonCost();
           Game.tooltip.dynamic = 1;
-					Game.tooltip.draw(l('specialPopup'), `<div style="min-width:200px;text-align:center;">${CacheCostDragonUpgrade}</div>`, 'this');
+          Game.tooltip.draw(
+            l('specialPopup'),
+            `<div style="min-width:200px;text-align:center;">${CacheCostDragonUpgrade}</div>`,
+            'this',
+          );
           Game.tooltip.wobble();
         };
-				l('specialPopup').children[i].onmouseout = function () { Game.tooltip.shouldHide = 1; };
+        l('specialPopup').children[i].onmouseout = function () {
+          Game.tooltip.shouldHide = 1;
+        };
       }
     }
   }

src/Disp/Draw.js

@@ -1,49 +0,0 @@
-import { CMOptions } from '../Config/VariablesAndData';
-import { Beautify } from './BeautifyAndFormatting/BeautifyFormatting';
-import UpdateBuildings from './BuildingsUpgrades/Buildings';
-import UpdateUpgrades from './BuildingsUpgrades/Upgrades';
-import { UpdateBotBar } from './InfoBars/BottomBar';
-import { UpdateTimerBar } from './InfoBars/TimerBar';
-import RefreshMenu from './MenuSections/Refreshmenu';
-import { UpdateTooltips } from './Tooltips/Tooltip';
-import { CheckWrinklerTooltip, UpdateWrinklerTooltip } from './Tooltips/WrinklerTooltips';
-
-/**
- * This function handles all custom drawing for the Game.Draw() function.
- * It is hooked on 'draw' by CM.RegisterHooks()
- */
-export default function Draw() {
-	// Draw autosave timer in stats menu, this must be done here to make it count down correctly
-	if (
-		(Game.prefs.autosave && Game.drawT % 10 === 0) // with autosave ON and every 10 ticks
-		&& (Game.onMenu === 'stats' && CMOptions.Stats) // while being on the stats menu only
-	) {
-		const timer = document.getElementById('CMStatsAutosaveTimer');
-		if (timer) {
-			timer.innerText = Game.sayTime(Game.fps * 60 - (Game.T % (Game.fps * 60)), 4);
-		}
-	}
-
-	// Update colors
-	UpdateBuildings();
-	UpdateUpgrades();
-
-	// Redraw timers
-	UpdateTimerBar();
-
-	// Update Bottom Bar
-	UpdateBotBar();
-
-	// Update Tooltip
-	UpdateTooltips();
-
-	// Update Wrinkler Tooltip
-	CheckWrinklerTooltip();
-	UpdateWrinklerTooltip();
-
-	// Change menu refresh interval
-	RefreshMenu();
-
-	// Replace Cookies counter because Orteil uses very weird code to "pad" it...
-	l('cookies').innerHTML = l('cookies').innerHTML.replace(/.*(?=<br>)/i, Beautify(Game.cookies));
-}

src/Disp/DrawHook.js

@@ -0,0 +1,68 @@
+import ToggleWrinklerButtons from '../Config/Toggles/ToggleWrinklerButtons';
+import { CMOptions } from '../Config/VariablesAndData';
+import { Beautify } from './BeautifyAndFormatting/BeautifyFormatting';
+import UpdateBuildings from './BuildingsUpgrades/Buildings';
+import UpdateUpgrades from './BuildingsUpgrades/Upgrades';
+import { UpdateBotBar } from './InfoBars/BottomBar';
+import { UpdateTimerBar } from './InfoBars/TimerBar';
+import RefreshMenu from './MenuSections/Refreshmenu';
+import UpdateTooltips from './Tooltips/UpdateTooltips';
+import {
+  CheckWrinklerTooltip,
+  UpdateWrinklerTooltip,
+} from './Tooltips/WrinklerTooltips';
+
+/**
+ * This function handles all custom drawing for the Game.Draw() function.
+ * It is hooked on 'draw' by CM.RegisterHooks()
+ */
+export default function CMDrawHook() {
+  // Draw autosave timer in stats menu, this must be done here to make it count down correctly
+  if (
+    Game.prefs.autosave &&
+    Game.drawT % 10 === 0 && // with autosave ON and every 10 ticks
+    Game.onMenu === 'stats' &&
+    CMOptions.Stats // while being on the stats menu only
+  ) {
+    const timer = document.getElementById('CMStatsAutosaveTimer');
+    if (timer) {
+      timer.innerText = Game.sayTime(
+        Game.fps * 60 - (Game.T % (Game.fps * 60)),
+        4,
+      );
+    }
+  }
+
+  // Update colors
+  UpdateBuildings();
+  UpdateUpgrades();
+
+  // Redraw timers
+  UpdateTimerBar();
+
+  // Update Bottom Bar
+  UpdateBotBar();
+
+  // Update Tooltip
+  UpdateTooltips();
+
+  // Update Wrinkler Tooltip
+  CheckWrinklerTooltip();
+  UpdateWrinklerTooltip();
+
+  // Change menu refresh interval
+  RefreshMenu();
+
+  // Update display of wrinkler buttons, this checks if Elder Pledge has been bought and if they should be disabled
+  ToggleWrinklerButtons();
+
+  // Replace Cookies counter because Orteil uses very weird code to "pad" it...
+  if (CMOptions.Scale) {
+    let str = l('cookies').innerHTML.replace(
+      /.*(?=<br>)/i,
+      Beautify(Game.cookies),
+    );
+    if (Game.prefs.monospace) str = `<span class="monospace">${str}</span>`;
+    l('cookies').innerHTML = str;
+  }
+}

src/Disp/GoldenCookieTimers/GoldenCookieTimers.js

@@ -23,9 +23,19 @@ export default function CreateGCTimer(cookie) {
   if (CMOptions.GCTimer === 0) GCTimer.style.display = 'none';
   GCTimer.style.left = cookie.l.style.left;
   GCTimer.style.top = cookie.l.style.top;
-	GCTimer.onclick = function () { cookie.pop(); };
-	GCTimer.onmouseover = function () { cookie.l.style.filter = 'brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1))'; cookie.l.style.webkitFilter = 'brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1))'; };
-	GCTimer.onmouseout = function () { cookie.l.style.filter = ''; cookie.l.style.webkitFilter = ''; };
+  GCTimer.onclick = function () {
+    cookie.pop();
+  };
+  GCTimer.onmouseover = function () {
+    cookie.l.style.filter = // eslint-disable-line no-param-reassign
+      'brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1))';
+    cookie.l.style.webkitFilter = // eslint-disable-line no-param-reassign
+      'brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1))';
+  };
+  GCTimer.onmouseout = function () {
+    cookie.l.style.filter = ''; // eslint-disable-line no-param-reassign
+    cookie.l.style.webkitFilter = ''; // eslint-disable-line no-param-reassign
+  };
 
   GCTimers[cookie.id] = GCTimer;
   l('shimmers').appendChild(GCTimer);

src/Disp/HelperFunctions/CalculateGrimoireRefillTime.js

@@ -5,11 +5,16 @@
  * @param	{number}	targetMagic			The target magic level
  * @returns	{number}	count / Game.fps	The time it takes to reach targetMagic
  */
-export default function CalculateGrimoireRefillTime(currentMagic, maxMagic, targetMagic) {
+export default function CalculateGrimoireRefillTime(
+  currentMagic,
+  maxMagic,
+  targetMagic,
+) {
+  let magic = currentMagic;
   let count = 0;
-	while (currentMagic < targetMagic) {
-		currentMagic += Math.max(0.002, (currentMagic / Math.max(maxMagic, 100)) ** 0.5) * 0.002;
-		count++;
+  while (magic < targetMagic) {
+    magic += Math.max(0.002, (magic / Math.max(maxMagic, 100)) ** 0.5) * 0.002;
+    count += 1;
   }
   return count / Game.fps;
 }

src/Disp/HelperFunctions/GetCPS.js

@@ -1,5 +1,8 @@
 import {
-	CacheAvgCps, CacheCurrWrinklerCount, CacheCurrWrinklerCPSMult, CacheWrinklersFattest,
+  CacheAverageCPS,
+  CacheCurrWrinklerCount,
+  CacheCurrWrinklerCPSMult,
+  CacheWrinklersFattest,
 } from '../../Cache/VariablesAndData';
 import { CMOptions } from '../../Config/VariablesAndData';
 
@@ -9,13 +12,31 @@ import { CMOptions } from '../../Config/VariablesAndData';
  */
 export default function GetCPS() {
   if (CMOptions.CPSMode) {
-		return CacheAvgCps;
-	} if (CMOptions.CalcWrink === 0) {
-		return (Game.cookiesPs * (1 - Game.cpsSucked));
-	} if (CMOptions.CalcWrink === 1) {
-		return Game.cookiesPs * (CacheCurrWrinklerCPSMult + (1 - (CacheCurrWrinklerCount * 0.05)));
-	} if (CMOptions.CalcWrink === 2 && Game.wrinklers[CacheWrinklersFattest[1]].type === 1) {
-		return Game.cookiesPs * ((CacheCurrWrinklerCPSMult * 3 / CacheCurrWrinklerCount) + (1 - (CacheCurrWrinklerCount * 0.05)));
+    return CacheAverageCPS;
   }
-	return Game.cookiesPs * ((CacheCurrWrinklerCPSMult / CacheCurrWrinklerCount) + (1 - (CacheCurrWrinklerCount * 0.05)));
+  if (CMOptions.CalcWrink === 0) {
+    return Game.cookiesPs * (1 - Game.cpsSucked);
+  }
+  if (CMOptions.CalcWrink === 1) {
+    return (
+      Game.cookiesPs *
+      (CacheCurrWrinklerCPSMult + (1 - CacheCurrWrinklerCount * 0.05))
+    );
+  }
+  if (CacheWrinklersFattest[1] !== null)
+    if (
+      CMOptions.CalcWrink === 2 &&
+      Game.wrinklers[CacheWrinklersFattest[1]].type === 1
+    ) {
+      return (
+        Game.cookiesPs *
+        ((CacheCurrWrinklerCPSMult * 3) / CacheCurrWrinklerCount +
+          (1 - CacheCurrWrinklerCount * 0.05))
+      );
+    }
+  return (
+    Game.cookiesPs *
+    (CacheCurrWrinklerCPSMult / CacheCurrWrinklerCount +
+      (1 - CacheCurrWrinklerCount * 0.05))
+  );
 }

src/Disp/HelperFunctions/GetLumpColor.js

@@ -1,24 +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/GetWrinkConfigBank.js

@@ -1,4 +1,7 @@
-import { CacheWrinklersFattest, CacheWrinklersTotal } from '../../Cache/VariablesAndData';
+import {
+  CacheWrinklersFattest,
+  CacheWrinklersTotal,
+} from '../../Cache/VariablesAndData';
 import { CMOptions } from '../../Config/VariablesAndData';
 
 /**
@@ -9,7 +12,8 @@ import { CMOptions } from '../../Config/VariablesAndData';
 export default function GetWrinkConfigBank() {
   if (CMOptions.CalcWrink === 1) {
     return CacheWrinklersTotal;
-	} if (CMOptions.CalcWrink === 2) {
+  }
+  if (CMOptions.CalcWrink === 2) {
     return CacheWrinklersFattest[0];
   }
   return 0;

src/Disp/HelperFunctions/PopWrinklers.js

@@ -3,9 +3,9 @@
  * It is called by a click of the 'pop all' button created by CM.Disp.AddMenuStats()
  */
 export default function PopAllNormalWrinklers() {
-	for (const i of Object.keys(Game.wrinklers)) {
+  Object.keys(Game.wrinklers).forEach((i) => {
     if (Game.wrinklers[i].sucked > 0 && Game.wrinklers[i].type === 0) {
       Game.wrinklers[i].hp = 0;
     }
-	}
+  });
 }

src/Disp/HelperFunctions/UpdateBackground.js

@@ -5,7 +5,11 @@
  */
 export default function UpdateBackground() {
   Game.Background.canvas.width = Game.Background.canvas.parentNode.offsetWidth;
-	Game.Background.canvas.height = Game.Background.canvas.parentNode.offsetHeight;
-	Game.LeftBackground.canvas.width = Game.LeftBackground.canvas.parentNode.offsetWidth;
-	Game.LeftBackground.canvas.height = Game.LeftBackground.canvas.parentNode.offsetHeight;
+  Game.Background.canvas.height =
+    Game.Background.canvas.parentNode.offsetHeight;
+  Game.LeftBackground.canvas.width =
+    Game.LeftBackground.canvas.parentNode.offsetWidth;
+  Game.LeftBackground.canvas.height =
+    Game.LeftBackground.canvas.parentNode.offsetHeight;
+  Game.DrawBackground();
 }

src/Disp/HelperFunctions/UpdateColors.js

@@ -1,24 +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,
+  ColoursOrdering,
+  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 < ColoursOrdering.length; i++) {
+    str += `.${ColourTextPre}${ColoursOrdering[i]} { color: ${
+      CMOptions[`Colour${ColoursOrdering[i]}`]
+    }; }\n`;
+  }
+  for (let i = 0; i < ColoursOrdering.length; i++) {
+    str += `.${ColourBackPre}${ColoursOrdering[i]} { background-color: ${
+      CMOptions[`Colour${ColoursOrdering[i]}`]
+    }; }\n`;
+  }
+  for (let i = 0; i < ColoursOrdering.length; i++) {
+    str += `.${ColourBorderPre}${ColoursOrdering[i]} { border: 1px solid ${
+      CMOptions[`Colour${ColoursOrdering[i]}`]
+    }; }\n`;
+  }
+  l('CMCSS').textContent = str;
+  UpdateBuildings(); // Class has been already set
+}

src/Disp/InfoBars/BottomBar.js

@@ -1,13 +1,24 @@
 /** Functions related to the Bottom Bar */
 
-import { CacheObjects1, CacheObjects10, CacheObjects100 } from '../../Cache/VariablesAndData';
+import {
+  CacheObjects1,
+  CacheObjects10,
+  CacheObjects100,
+} from '../../Cache/VariablesAndData';
 import { CMOptions } from '../../Config/VariablesAndData';
 import { VersionMajor, VersionMinor } from '../../Data/Moddata';
-import { Beautify, GetTimeColor } from '../BeautifyAndFormatting/BeautifyFormatting';
+import {
+  Beautify,
+  FormatTime,
+  GetTimeColour,
+} from '../BeautifyAndFormatting/BeautifyFormatting';
 import GetCPS from '../HelperFunctions/GetCPS';
 import GetWrinkConfigBank from '../HelperFunctions/GetWrinkConfigBank';
 import {
-	ColorBlue, ColorTextPre, ColorYellow, LastTargetBotBar,
+  ColourBlue,
+  ColourTextPre,
+  ColourYellow,
+  LastTargetBotBar,
 } from '../VariablesAndData';
 import { CreateBotBarBuildingColumn } from './CreateDOMElements';
 
@@ -21,11 +32,12 @@ 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';
-	BotBar.style.textShadow = '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black';
+  BotBar.style.textShadow =
+    '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black';
 
   const table = BotBar.appendChild(document.createElement('table'));
   table.style.width = '100%';
@@ -36,25 +48,27 @@ 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);
 
-	for (const i of Object.keys(Game.Objects)) {
+  Object.keys(Game.Objects).forEach((i) => {
     CreateBotBarBuildingColumn(i);
-	}
+  });
 }
 
 /**
@@ -63,7 +77,7 @@ export function CreateBotBar() {
 export function UpdateBotBar() {
   if (CMOptions.BotBar === 1 && CacheObjects1 && Game.buyMode === 1) {
     let count = 0;
-		for (const i of Object.keys(CacheObjects1)) {
+    Object.keys(CacheObjects1).forEach((i) => {
       let target = Game.buyBulk;
       if (Game.buyMode === 1) {
         LastTargetBotBar = target;
@@ -73,16 +87,41 @@ export function UpdateBotBar() {
       if (target === 1) target = CacheObjects1;
       if (target === 10) target = CacheObjects10;
       if (target === 100) target = CacheObjects100;
-			count++;
-			l('CMBotBar').firstChild.firstChild.childNodes[0].childNodes[count].childNodes[1].textContent = Game.Objects[i].amount;
-			l('CMBotBar').firstChild.firstChild.childNodes[1].childNodes[count].textContent = Beautify(target[i].bonus, 2);
-			l('CMBotBar').firstChild.firstChild.childNodes[2].childNodes[count].className = ColorTextPre + target[i].color;
-			l('CMBotBar').firstChild.firstChild.childNodes[2].childNodes[count].textContent = Beautify(target[i].pp, 2);
-			const timeColor = GetTimeColor((Game.Objects[i].bulkPrice - (Game.cookies + GetWrinkConfigBank())) / GetCPS());
-			l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[count].className = ColorTextPre + timeColor.color;
-			if (timeColor.text === 'Done!' && Game.cookies < Game.Objects[i].bulkPrice) {
-				l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[count].textContent = `${timeColor.text} (with Wrink)`;
-			} else l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[count].textContent = timeColor.text;
-		}
+      count += 1;
+      l('CMBotBar').firstChild.firstChild.childNodes[0].childNodes[
+        count
+      ].childNodes[1].textContent = Game.Objects[i].amount;
+      l('CMBotBar').firstChild.firstChild.childNodes[1].childNodes[
+        count
+      ].textContent = Beautify(target[i].bonus, 2);
+      l('CMBotBar').firstChild.firstChild.childNodes[2].childNodes[
+        count
+      ].className = ColourTextPre + target[i].color;
+      let PPString;
+      if (CMOptions.PPDisplayTime)
+        PPString = FormatTime(Math.round(target[i].pp));
+      else PPString = Beautify(Math.round(target[i].pp), 2);
+      l('CMBotBar').firstChild.firstChild.childNodes[2].childNodes[
+        count
+      ].textContent = PPString;
+      const timeColour = GetTimeColour(
+        (Game.Objects[i].bulkPrice - (Game.cookies + GetWrinkConfigBank())) /
+          GetCPS(),
+      );
+      l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[
+        count
+      ].className = ColourTextPre + timeColour.color;
+      if (
+        timeColour.text === 'Done!' &&
+        Game.cookies < Game.Objects[i].bulkPrice
+      ) {
+        l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[
+          count
+        ].textContent = `${timeColour.text} (with Wrink)`;
+      } else
+        l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[
+          count
+        ].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);
   }
@@ -76,14 +76,22 @@ export function CreateBotBarBuildingColumn(buildingName) {
 
     const i = buildingName;
     const header = type.appendChild(document.createElement('td'));
-		header.appendChild(document.createTextNode(`${i.indexOf(' ') !== -1 ? i.substring(0, i.indexOf(' ')) : i} (`));
+    header.appendChild(
+      document.createTextNode(
+        `${i.indexOf(' ') !== -1 ? i.substring(0, i.indexOf(' ')) : i} (`,
+      ),
+    );
 
     const span = header.appendChild(document.createElement('span'));
-		span.className = ColorTextPre + ColorBlue;
+    span.className = ColourTextPre + ColourBlue;
 
     header.appendChild(document.createTextNode(')'));
+    type.lastChild.style.paddingLeft = '8px';
     bonus.appendChild(document.createElement('td'));
+    bonus.lastChild.style.paddingLeft = '8px';
     pp.appendChild(document.createElement('td'));
+    pp.lastChild.style.paddingLeft = '8px';
     time.appendChild(document.createElement('td'));
+    time.lastChild.style.paddingLeft = '2px';
   }
 }

src/Disp/InfoBars/TimerBar.js

@@ -3,8 +3,12 @@
 import { UpdateBotTimerBarPosition } from '../../Config/SpecificToggles';
 import { CMOptions } from '../../Config/VariablesAndData';
 import {
-	BuffColors,
-	ColorBackPre, ColorGray, ColorOrange, ColorPurple, LastNumberOfTimers,
+  BuffColours,
+  ColourBackPre,
+  ColourGray,
+  ColourOrange,
+  ColourPurple,
+  LastNumberOfTimers,
 } from '../VariablesAndData';
 import { CreateTimer } from './CreateDOMElements';
 
@@ -19,19 +23,24 @@ 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 }]);
+  const CMTimerBarGC = CreateTimer('CMTimerBarGC', 'Next Cookie', [
+    { 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 }]);
+  const CMTimerBarRen = CreateTimer('CMTimerBarRen', 'Next Reindeer', [
+    { id: 'CMTimerBarRenMinBar', color: ColourGray },
+    { id: 'CMTimerBarRenBar', color: ColourOrange },
+  ]);
   TimerBar.appendChild(CMTimerBarRen);
+  const TimerBarBuffTimers = document.createElement('div');
+  TimerBarBuffTimers.id = 'CMTimerBarBuffTimers';
+  TimerBar.appendChild(TimerBarBuffTimers);
 
   l('wrapper').appendChild(TimerBar);
 }
@@ -48,64 +57,143 @@ export function UpdateTimerBar() {
     let numberOfTimers = 0;
 
     // Regulates visibility of Golden Cookie timer
-		if (Game.shimmerTypes.golden.spawned === 0 && !Game.Has('Golden switch [off]')) {
+    if (
+      Game.shimmerTypes.golden.spawned === 0 &&
+      !Game.Has('Golden switch [off]')
+    ) {
       l('CMTimerBarGC').style.display = '';
-			l('CMTimerBarGCMinBar').style.width = `${Math.round(Math.max(0, Game.shimmerTypes.golden.minTime - Game.shimmerTypes.golden.time) * maxWidthTwoBar / Game.shimmerTypes.golden.maxTime)}px`;
-			if (CMOptions.TimerBarOverlay >= 1) l('CMTimerBarGCMinBar').textContent = Math.ceil((Game.shimmerTypes.golden.minTime - Game.shimmerTypes.golden.time) / Game.fps);
+      l('CMTimerBarGCMinBar').style.width = `${Math.round(
+        (Math.max(
+          0,
+          Game.shimmerTypes.golden.minTime - Game.shimmerTypes.golden.time,
+        ) *
+          maxWidthTwoBar) /
+          Game.shimmerTypes.golden.maxTime,
+      )}px`;
+      if (CMOptions.TimerBarOverlay >= 1)
+        l('CMTimerBarGCMinBar').textContent = Math.ceil(
+          (Game.shimmerTypes.golden.minTime - Game.shimmerTypes.golden.time) /
+            Game.fps,
+        );
       else l('CMTimerBarGCMinBar').textContent = '';
-			if (Game.shimmerTypes.golden.minTime === Game.shimmerTypes.golden.maxTime) {
+      if (
+        Game.shimmerTypes.golden.minTime === Game.shimmerTypes.golden.maxTime
+      ) {
         l('CMTimerBarGCMinBar').style.borderTopRightRadius = '10px';
         l('CMTimerBarGCMinBar').style.borderBottomRightRadius = '10px';
       } else {
         l('CMTimerBarGCMinBar').style.borderTopRightRadius = '';
         l('CMTimerBarGCMinBar').style.borderBottomRightRadius = '';
       }
-			l('CMTimerBarGCBar').style.width = `${Math.round(Math.min(Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.minTime, Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.time) * maxWidthTwoBar / Game.shimmerTypes.golden.maxTime)}px`;
-			if (CMOptions.TimerBarOverlay >= 1) l('CMTimerBarGCBar').textContent = Math.ceil(Math.min(Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.minTime, Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.time) / Game.fps);
+      l('CMTimerBarGCBar').style.width = `${Math.round(
+        (Math.min(
+          Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.minTime,
+          Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.time,
+        ) *
+          maxWidthTwoBar) /
+          Game.shimmerTypes.golden.maxTime,
+      )}px`;
+      if (CMOptions.TimerBarOverlay >= 1)
+        l('CMTimerBarGCBar').textContent = Math.ceil(
+          Math.min(
+            Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.minTime,
+            Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.time,
+          ) / Game.fps,
+        );
       else l('CMTimerBarGCBar').textContent = '';
-			l('CMTimerBarGCTime').textContent = Math.ceil((Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.time) / Game.fps);
-			numberOfTimers++;
+      l('CMTimerBarGCTime').textContent = Math.ceil(
+        (Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.time) /
+          Game.fps,
+      );
+      numberOfTimers += 1;
     } else l('CMTimerBarGC').style.display = 'none';
 
     // Regulates visibility of Reindeer timer
-		if (Game.season === 'christmas' && Game.shimmerTypes.reindeer.spawned === 0) {
+    if (
+      Game.season === 'christmas' &&
+      Game.shimmerTypes.reindeer.spawned === 0
+    ) {
       l('CMTimerBarRen').style.display = '';
-			l('CMTimerBarRenMinBar').style.width = `${Math.round(Math.max(0, Game.shimmerTypes.reindeer.minTime - Game.shimmerTypes.reindeer.time) * maxWidthTwoBar / Game.shimmerTypes.reindeer.maxTime)}px`;
-			if (CMOptions.TimerBarOverlay >= 1) l('CMTimerBarRenMinBar').textContent = Math.ceil((Game.shimmerTypes.reindeer.minTime - Game.shimmerTypes.reindeer.time) / Game.fps);
+      l('CMTimerBarRenMinBar').style.width = `${Math.round(
+        (Math.max(
+          0,
+          Game.shimmerTypes.reindeer.minTime - Game.shimmerTypes.reindeer.time,
+        ) *
+          maxWidthTwoBar) /
+          Game.shimmerTypes.reindeer.maxTime,
+      )}px`;
+      if (CMOptions.TimerBarOverlay >= 1)
+        l('CMTimerBarRenMinBar').textContent = Math.ceil(
+          (Game.shimmerTypes.reindeer.minTime -
+            Game.shimmerTypes.reindeer.time) /
+            Game.fps,
+        );
       else l('CMTimerBarRenMinBar').textContent = '';
-			l('CMTimerBarRenBar').style.width = `${Math.round(Math.min(Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.minTime, Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.time) * maxWidthTwoBar / Game.shimmerTypes.reindeer.maxTime)}px`;
-			if (CMOptions.TimerBarOverlay >= 1) l('CMTimerBarRenBar').textContent = Math.ceil(Math.min(Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.minTime, Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.time) / Game.fps);
+      l('CMTimerBarRenBar').style.width = `${Math.round(
+        (Math.min(
+          Game.shimmerTypes.reindeer.maxTime -
+            Game.shimmerTypes.reindeer.minTime,
+          Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.time,
+        ) *
+          maxWidthTwoBar) /
+          Game.shimmerTypes.reindeer.maxTime,
+      )}px`;
+      if (CMOptions.TimerBarOverlay >= 1)
+        l('CMTimerBarRenBar').textContent = Math.ceil(
+          Math.min(
+            Game.shimmerTypes.reindeer.maxTime -
+              Game.shimmerTypes.reindeer.minTime,
+            Game.shimmerTypes.reindeer.maxTime -
+              Game.shimmerTypes.reindeer.time,
+          ) / Game.fps,
+        );
       else l('CMTimerBarRenBar').textContent = '';
-			l('CMTimerBarRenTime').textContent = Math.ceil((Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.time) / Game.fps);
-			numberOfTimers++;
+      l('CMTimerBarRenTime').textContent = Math.ceil(
+        (Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.time) /
+          Game.fps,
+      );
+      numberOfTimers += 1;
     } else {
       l('CMTimerBarRen').style.display = 'none';
     }
 
     // On every frame all buff-timers are deleted and re-created
     const BuffTimerBars = {};
-		for (const i of Object.keys(Game.buffs)) {
+    l('CMTimerBarBuffTimers').innerHTML = '';
+    Object.keys(Game.buffs).forEach((i) => {
       if (Game.buffs[i]) {
-				const timer = CreateTimer(Game.buffs[i].name, Game.buffs[i].name, [{ id: `${Game.buffs[i].name}Bar` }]);
+        const timer = CreateTimer(Game.buffs[i].name, Game.buffs[i].name, [
+          { 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(100 * (Game.buffs[i].time / Game.buffs[i].maxTime))}%`;
+        if (CMOptions.TimerBarOverlay === 2)
+          timer.lastChild.children[1].textContent = `${Math.round(
+            100 * (Game.buffs[i].time / Game.buffs[i].maxTime),
+          )}%`;
         else timer.lastChild.children[1].textContent = '';
-				timer.lastChild.children[1].style.width = `${Math.round(Game.buffs[i].time * (maxWidthOneBar - Math.ceil(Game.buffs[i].time / Game.fps).toString().length * 8) / Game.buffs[i].maxTime)}px`;
-				timer.lastChild.children[2].textContent = Math.ceil(Game.buffs[i].time / Game.fps);
-				numberOfTimers++;
+        timer.lastChild.children[1].style.width = `${Math.round(
+          (Game.buffs[i].time *
+            (maxWidthOneBar -
+              Math.ceil(Game.buffs[i].time / Game.fps).toString().length * 8)) /
+            Game.buffs[i].maxTime,
+        )}px`;
+        timer.lastChild.children[2].textContent = Math.ceil(
+          Game.buffs[i].time / Game.fps,
+        );
+        numberOfTimers += 1;
         BuffTimerBars[Game.buffs[i].name] = timer;
       }
-		}
-		for (const i of Object.keys(BuffTimerBars)) {
-			l('CMTimerBar').appendChild(BuffTimerBars[i]);
-		}
+    });
+    Object.keys(BuffTimerBars).forEach((i) => {
+      l('CMTimerBarBuffTimers').appendChild(BuffTimerBars[i]);
+    });
 
     if (numberOfTimers !== 0) {
       l('CMTimerBar').style.height = `${numberOfTimers * 12 + 2}px`;

src/Disp/Initialization/CreateSectionHideButtons.js

@@ -0,0 +1,38 @@
+/**
+ * This function creates two objects at the top of the right column that allowing hiding the upgrade and building section
+ */
+export default function CreateSectionHideButtons() {
+  const div = document.createElement('div');
+  div.id = 'CMSectionHidButtons';
+  div.style.textAlign = 'center';
+  const a = document.createElement('a');
+  a.className = 'option';
+  a.onclick = function () {
+    if (l('upgrades').style.display === 'flex') {
+      l('upgrades').style.display = 'none';
+      l('toggleUpgrades').style.display = 'none';
+      l('techUpgrades').style.display = 'none';
+      l('vaultUpgrades').style.display = 'none';
+    } else {
+      l('upgrades').style.display = 'flex';
+      if (l('toggleUpgrades').children.length !== 0)
+        l('toggleUpgrades').style.display = 'block';
+      if (l('techUpgrades').children.length !== 0)
+        l('techUpgrades').style.display = 'block';
+      if (l('vaultUpgrades').children.length !== 0)
+        l('vaultUpgrades').style.display = 'block';
+    }
+  };
+  a.textContent = 'Hide/Show Upgrades';
+  div.appendChild(a);
+  const b = document.createElement('a');
+  b.className = 'option';
+  b.onclick = function () {
+    if (l('products').style.display === 'grid')
+      l('products').style.display = 'none';
+    else l('products').style.display = 'grid';
+  };
+  b.textContent = 'Hide/Show Buildings';
+  div.appendChild(b);
+  l('store').insertBefore(div, l('store').childNodes[2]);
+}

src/Disp/Initialization/CreateWrinklerButton.js

@@ -1,5 +1,6 @@
 import { CacheWrinklersFattest } from '../../Cache/VariablesAndData';
 import PopAllNormalWrinklers from '../HelperFunctions/PopWrinklers';
+import { CreateTooltip } from '../Tooltips/Tooltip';
 
 /**
  * This function creates two objects at the bottom of the left column that allowing popping of wrinklers
@@ -9,12 +10,45 @@ export default function CreateWrinklerButtons() {
   popAllA.id = 'PopAllNormalWrinklerButton';
   popAllA.textContent = 'Pop All Normal';
   popAllA.className = 'option';
-	popAllA.onclick = function () { PopAllNormalWrinklers(); };
+  popAllA.onclick = function () {
+    PopAllNormalWrinklers();
+  };
+  popAllA.onmouseout = function () {
+    Game.tooltip.shouldHide = 1;
+  };
+  popAllA.onmouseover = function () {
+    Game.tooltip.dynamic = 1;
+    Game.tooltip.draw(
+      this,
+      function () {
+        return CreateTooltip('wb', 'PopAll');
+      },
+      'this',
+    );
+    Game.tooltip.wobble();
+  };
   l('sectionLeftExtra').children[0].append(popAllA);
   const popFattestA = document.createElement('a');
   popFattestA.id = 'PopFattestWrinklerButton';
   popFattestA.textContent = 'Pop Single Fattest';
   popFattestA.className = 'option';
-	popFattestA.onclick = function () { if (CacheWrinklersFattest[1] !== null) Game.wrinklers[CacheWrinklersFattest[1]].hp = 0; };
+  popFattestA.onclick = function () {
+    if (CacheWrinklersFattest[1] !== null)
+      Game.wrinklers[CacheWrinklersFattest[1]].hp = 0;
+  };
+  popFattestA.onmouseout = function () {
+    Game.tooltip.shouldHide = 1;
+  };
+  popFattestA.onmouseover = function () {
+    Game.tooltip.dynamic = 1;
+    Game.tooltip.draw(
+      this,
+      function () {
+        return CreateTooltip('wb', 'PopFattest');
+      },
+      'this',
+    );
+    Game.tooltip.wobble();
+  };
   l('sectionLeftExtra').children[0].append(popFattestA);
 }

src/Disp/Initialization/FlashScreen.js

@@ -0,0 +1,14 @@
+/**
+ * This function creates a white square over the full screen and appends it to l('wrapper')
+ */
+export default function CreateFlashScreen() {
+  const WhiteScreen = document.createElement('div');
+  WhiteScreen.id = 'CMFlashScreen';
+  WhiteScreen.style.width = '100%';
+  WhiteScreen.style.height = '100%';
+  WhiteScreen.style.backgroundColor = 'white';
+  WhiteScreen.style.display = 'none';
+  WhiteScreen.style.zIndex = '9999999999';
+  WhiteScreen.style.position = 'absolute';
+  l('wrapper').appendChild(WhiteScreen);
+}

src/Disp/Initialization/WhiteScreen.js

@@ -1,14 +0,0 @@
-/**
- * This function creates a white square over the full screen and appends it to l('wrapper')
- */
-export default function CreateWhiteScreen() {
-	const WhiteScreen = document.createElement('div');
-	WhiteScreen.id = 'CMWhiteScreen';
-	WhiteScreen.style.width = '100%';
-	WhiteScreen.style.height = '100%';
-	WhiteScreen.style.backgroundColor = 'white';
-	WhiteScreen.style.display = 'none';
-	WhiteScreen.style.zIndex = '9999999999';
-	WhiteScreen.style.position = 'absolute';
-	l('wrapper').appendChild(WhiteScreen);
-}

src/Disp/MenuSections/AddMenus.js

@@ -1,7 +1,7 @@
 import { CMOptions } from '../../Config/VariablesAndData';
-import AddMenuStats from './AddStatsPage';
-import AddMenuInfo from './InfoPage';
-import AddMenuPref from './SettingsPage';
+import AddMenuStats from './Statistics/AddStatsPage';
+import AddMenuInfo from './Info/InfoPage';
+import AddMenuPref from './Settings/SettingsPage';
 
 /**
  * This function adds the calll the functions to add extra info to the stats and options pages

src/Disp/MenuSections/AddStatsPage.js

@@ -1,175 +0,0 @@
-/** Main function to create the sections of Cookie Monster on the Statistics page */
-
-import { AddMissingUpgrades } from './CreateMissingUpgrades';
-import * as CreateSections from './CreateStatsSections';
-import * as CreateElements from './CreateDOMElements';
-import * as GameData from '../../Data/Gamedata';
-import { CMOptions } from '../../Config/VariablesAndData';
-
-import {
-	CacheAverageClicks, CacheCentEgg, CacheLastChoEgg, CacheSeaSpec, CacheWrinklersFattest, CacheWrinklersNormal, CacheWrinklersTotal,
-} from '../../Cache/VariablesAndData';
-import PopAllNormalWrinklers from '../HelperFunctions/PopWrinklers';
-import { ClickTimes, CookieTimes } from '../VariablesAndData';
-import GetCPS from '../HelperFunctions/GetCPS';
-import { Beautify } from '../BeautifyAndFormatting/BeautifyFormatting';
-
-/**
- * This function adds stats created by CookieMonster to the stats page
- * It is called by CM.Disp.AddMenu
- * @param {object} title	On object that includes the title of the menu
- */
-export default function AddMenuStats(title) {
-	const stats = document.createElement('div');
-	stats.className = 'subsection';
-	stats.appendChild(title);
-
-	stats.appendChild(CreateElements.StatsHeader('Lucky Cookies', 'Lucky'));
-	if (CMOptions.Header.Lucky) {
-		stats.appendChild(CreateSections.LuckySection());
-	}
-
-	stats.appendChild(CreateElements.StatsHeader('Chain Cookies', 'Chain'));
-	if (CMOptions.Header.Chain) {
-		stats.appendChild(CreateSections.ChainSection());
-	}
-
-	if (Game.Objects['Wizard tower'].minigameLoaded) {
-		stats.appendChild(CreateElements.StatsHeader('Spells', 'Spells'));
-		if (CMOptions.Header.Spells) {
-			stats.appendChild(CreateSections.SpellsSection());
-		}
-	}
-
-	if (Game.Objects.Farm.minigameLoaded) {
-		stats.appendChild(CreateElements.StatsHeader('Garden', 'Garden'));
-		if (CMOptions.Header.Garden) {
-			stats.appendChild(CreateSections.GardenSection());
-		}
-	}
-
-	stats.appendChild(CreateElements.StatsHeader('Prestige', 'Prestige'));
-	if (CMOptions.Header.Prestige) {
-		stats.appendChild(CreateSections.PrestigeSection());
-	}
-
-	if (Game.cpsSucked > 0) {
-		stats.appendChild(CreateElements.StatsHeader('Wrinklers', 'Wrink'));
-		if (CMOptions.Header.Wrink) {
-			const popAllFrag = document.createDocumentFragment();
-			popAllFrag.appendChild(document.createTextNode(`${Beautify(CacheWrinklersTotal)} / ${Beautify(CacheWrinklersNormal)} `));
-			const popAllA = document.createElement('a');
-			popAllA.textContent = 'Pop All Normal';
-			popAllA.className = 'option';
-			popAllA.onclick = function () { PopAllNormalWrinklers(); };
-			popAllFrag.appendChild(popAllA);
-			stats.appendChild(CreateElements.StatsListing('basic', 'Rewards of Popping (All/Normal)', popAllFrag));
-			const popFattestFrag = document.createDocumentFragment();
-			popFattestFrag.appendChild(document.createTextNode(`${Beautify(CacheWrinklersFattest[0])} `));
-			const popFattestA = document.createElement('a');
-			popFattestA.textContent = 'Pop Single Fattest';
-			popFattestA.className = 'option';
-			popFattestA.onclick = function () { if (CacheWrinklersFattest[1] !== null) Game.wrinklers[CacheWrinklersFattest[1]].hp = 0; };
-			popFattestFrag.appendChild(popFattestA);
-			stats.appendChild(CreateElements.StatsListing('basic', `Rewards of Popping Single Fattest Non-Shiny Wrinkler (id: ${CacheWrinklersFattest[1] !== null ? CacheWrinklersFattest[1] : 'None'})`, popFattestFrag));
-		}
-	}
-
-	let specDisp = false;
-	const missingHalloweenCookies = [];
-	for (const i of Object.keys(GameData.HalloCookies)) {
-		if (!Game.Has(GameData.HalloCookies[i])) {
-			missingHalloweenCookies.push(GameData.HalloCookies[i]);
-			specDisp = true;
-		}
-	}
-	const missingChristmasCookies = [];
-	for (const i of Object.keys(GameData.ChristCookies)) {
-		if (!Game.Has(GameData.ChristCookies[i])) {
-			missingChristmasCookies.push(GameData.ChristCookies[i]);
-			specDisp = true;
-		}
-	}
-	const missingValentineCookies = [];
-	for (const i of Object.keys(GameData.ValCookies)) {
-		if (!Game.Has(GameData.ValCookies[i])) {
-			missingValentineCookies.push(GameData.ValCookies[i]);
-			specDisp = true;
-		}
-	}
-	const missingNormalEggs = [];
-	for (const i of Object.keys(Game.eggDrops)) {
-		if (!Game.HasUnlocked(Game.eggDrops[i])) {
-			missingNormalEggs.push(Game.eggDrops[i]);
-			specDisp = true;
-		}
-	}
-	const missingRareEggs = [];
-	for (const i of Object.keys(Game.rareEggDrops)) {
-		if (!Game.HasUnlocked(Game.rareEggDrops[i])) {
-			missingRareEggs.push(Game.rareEggDrops[i]);
-			specDisp = true;
-		}
-	}
-	const missingPlantDrops = [];
-	for (const i of Object.keys(GameData.PlantDrops)) {
-		if (!Game.HasUnlocked(GameData.PlantDrops[i])) {
-			missingPlantDrops.push(GameData.PlantDrops[i]);
-			specDisp = true;
-		}
-	}
-	const choEgg = (Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg'));
-	const centEgg = Game.Has('Century egg');
-
-	if (Game.season === 'christmas' || specDisp || choEgg || centEgg) {
-		stats.appendChild(CreateElements.StatsHeader('Season Specials', 'Sea'));
-		if (CMOptions.Header.Sea) {
-			if (missingHalloweenCookies.length !== 0) stats.appendChild(CreateElements.StatsListing('basic', 'Halloween Cookies Left to Buy', CreateElements.StatsMissDisp(missingHalloweenCookies)));
-			if (missingChristmasCookies.length !== 0) stats.appendChild(CreateElements.StatsListing('basic', 'Christmas Cookies Left to Buy', CreateElements.StatsMissDisp(missingChristmasCookies)));
-			if (missingValentineCookies.length !== 0) stats.appendChild(CreateElements.StatsListing('basic', 'Valentine Cookies Left to Buy', CreateElements.StatsMissDisp(missingValentineCookies)));
-			if (missingNormalEggs.length !== 0) stats.appendChild(CreateElements.StatsListing('basic', 'Normal Easter Eggs Left to Unlock', CreateElements.StatsMissDisp(missingNormalEggs)));
-			if (missingRareEggs.length !== 0) stats.appendChild(CreateElements.StatsListing('basic', 'Rare Easter Eggs Left to Unlock', CreateElements.StatsMissDisp(missingRareEggs)));
-			if (missingPlantDrops.length !== 0) stats.appendChild(CreateElements.StatsListing('basic', 'Rare Plant Drops Left to Unlock', CreateElements.StatsMissDisp(missingPlantDrops)));
-
-			if (Game.season === 'christmas') stats.appendChild(CreateElements.StatsListing('basic', 'Reindeer Reward', document.createTextNode(Beautify(CacheSeaSpec))));
-			if (choEgg) {
-				stats.appendChild(CreateElements.StatsListing('withTooltip', 'Chocolate Egg Cookies', document.createTextNode(Beautify(CacheLastChoEgg)), 'ChoEggTooltipPlaceholder'));
-			}
-			if (centEgg) {
-				stats.appendChild(CreateElements.StatsListing('basic', 'Century Egg Multiplier', document.createTextNode(`${Math.round((CacheCentEgg - 1) * 10000) / 100}%`)));
-			}
-		}
-	}
-
-	stats.appendChild(CreateElements.StatsHeader('Miscellaneous', 'Misc'));
-	if (CMOptions.Header.Misc) {
-		stats.appendChild(CreateElements.StatsListing('basic',
-			`Average Cookies Per Second (Past ${CookieTimes[CMOptions.AvgCPSHist] < 60 ? (`${CookieTimes[CMOptions.AvgCPSHist]} seconds`) : ((CookieTimes[CMOptions.AvgCPSHist] / 60) + (CMOptions.AvgCPSHist === 3 ? ' minute' : ' minutes'))})`,
-			document.createTextNode(Beautify(GetCPS(), 3))));
-		stats.appendChild(CreateElements.StatsListing('basic', `Average Cookie Clicks Per Second (Past ${ClickTimes[CMOptions.AvgClicksHist]}${CMOptions.AvgClicksHist === 0 ? ' second' : ' seconds'})`, document.createTextNode(Beautify(CacheAverageClicks, 1))));
-		if (Game.Has('Fortune cookies')) {
-			const fortunes = [];
-			for (const i of Object.keys(GameData.Fortunes)) {
-				if (!Game.Has(GameData.Fortunes[i])) {
-					fortunes.push(GameData.Fortunes[i]);
-				}
-			}
-			if (fortunes.length !== 0) stats.appendChild(CreateElements.StatsListing('basic', 'Fortune Upgrades Left to Buy', CreateElements.StatsMissDisp(fortunes)));
-		}
-		if (CMOptions.ShowMissedGC) {
-			stats.appendChild(CreateElements.StatsListing('basic', 'Missed Golden Cookies', document.createTextNode(Beautify(Game.missedGoldenClicks))));
-		}
-		if (Game.prefs.autosave) {
-			const timer = document.createElement('span');
-			timer.id = 'CMStatsAutosaveTimer';
-			timer.innerText = Game.sayTime(Game.fps * 60 - (Game.OnAscend ? 0 : (Game.T % (Game.fps * 60))), 4);
-			stats.appendChild(CreateElements.StatsListing('basic', 'Time till autosave', timer));
-		}
-	}
-
-	l('menu').insertBefore(stats, l('menu').childNodes[2]);
-
-	if (CMOptions.MissingUpgrades) {
-		AddMissingUpgrades();
-	}
-}

src/Disp/MenuSections/CreateDOMElements.js

@@ -1,121 +0,0 @@
-/** Section: Functions related to the creation of basic DOM elements page */
-
-import { ToggleHeader } from '../../Config/ToggleSetting';
-import { CMOptions } from '../../Config/VariablesAndData';
-import { TooltipText } from '../VariablesAndData';
-
-/**
- * This function creates a header-object for the stats page
- * It is called by CM.Disp.AddMenuStats()
- * @param 	{string}		config	The name of the Config-group
- * @param 	{string}		text	The to-be displayed name of the header
- * @returns	{object}		div		The header object
- */
-export function StatsHeader(text, config) {
-	const div = document.createElement('div');
-	div.className = 'title';
-	div.style.padding = '0px 16px';
-	div.style.opacity = '0.7';
-	div.style.fontSize = '17px';
-	div.style.fontFamily = '"Kavoon", Georgia, serif';
-	div.appendChild(document.createTextNode(`${text} `));
-	const span = document.createElement('span');
-	span.style.cursor = 'pointer';
-	span.style.display = 'inline-block';
-	span.style.height = '14px';
-	span.style.width = '14px';
-	span.style.borderRadius = '7px';
-	span.style.textAlign = 'center';
-	span.style.backgroundColor = '#C0C0C0';
-	span.style.color = 'black';
-	span.style.fontSize = '13px';
-	span.style.verticalAlign = 'middle';
-	span.textContent = CMOptions.Header[config] ? '-' : '+';
-	span.onclick = function () { ToggleHeader(config); Game.UpdateMenu(); };
-	div.appendChild(span);
-	return div;
-}
-
-/**
- * This function creates an stats-listing-object for the stats page
- * It is called by CM.Disp.AddMenuStats()
- * @param 	{string}		type		The type fo the listing
- * @param 	{string}		name		The name of the option
- * @param 	{object}		text		The text-object of the option
- * @param 	{string}		placeholder	The id of the to-be displayed tooltip if applicable
- * @returns	{object}		div			The option object
- */
-export function StatsListing(type, name, text, placeholder) {
-	const div = document.createElement('div');
-	div.className = 'listing';
-
-	const listingName = document.createElement('b');
-	listingName.textContent = name;
-	div.appendChild(listingName);
-	if (type === 'withTooltip') {
-		div.className = 'listing';
-		div.appendChild(document.createTextNode(' '));
-
-		const tooltip = document.createElement('span');
-		tooltip.onmouseout = function () { Game.tooltip.hide(); };
-		tooltip.onmouseover = function () { Game.tooltip.draw(this, escape(TooltipText[placeholder].innerHTML)); };
-		tooltip.style.cursor = 'default';
-		tooltip.style.display = 'inline-block';
-		tooltip.style.height = '10px';
-		tooltip.style.width = '10px';
-		tooltip.style.borderRadius = '5px';
-		tooltip.style.textAlign = 'center';
-		tooltip.style.backgroundColor = '#C0C0C0';
-		tooltip.style.color = 'black';
-		tooltip.style.fontSize = '9px';
-		tooltip.style.verticalAlign = 'bottom';
-		tooltip.textContent = '?';
-		div.appendChild(tooltip);
-	}
-	div.appendChild(document.createTextNode(': '));
-	div.appendChild(text);
-	return div;
-}
-
-/**
- * This function creates a tooltip containing all missing holiday items contained in the list theMissDisp
- * @param 	{list}			theMissDisp		A list of the missing holiday items
- * @returns	{object}		frag			The tooltip object
- */
-export function StatsMissDisp(theMissDisp) {
-	const frag = document.createDocumentFragment();
-	frag.appendChild(document.createTextNode(`${theMissDisp.length} `));
-	const span = document.createElement('span');
-	span.onmouseout = function () { Game.tooltip.hide(); };
-	const placeholder = document.createElement('div');
-	const missing = document.createElement('div');
-	missing.style.minWidth = '140px';
-	missing.style.marginBottom = '4px';
-	const title = document.createElement('div');
-	title.className = 'name';
-	title.style.marginBottom = '4px';
-	title.style.textAlign = 'center';
-	title.textContent = 'Missing';
-	missing.appendChild(title);
-	for (const i of Object.keys(theMissDisp)) {
-		const div = document.createElement('div');
-		div.style.textAlign = 'center';
-		div.appendChild(document.createTextNode(theMissDisp[i]));
-		missing.appendChild(div);
-	}
-	placeholder.appendChild(missing);
-	span.onmouseover = function () { Game.tooltip.draw(this, escape(placeholder.innerHTML)); };
-	span.style.cursor = 'default';
-	span.style.display = 'inline-block';
-	span.style.height = '10px';
-	span.style.width = '10px';
-	span.style.borderRadius = '5px';
-	span.style.textAlign = 'center';
-	span.style.backgroundColor = '#C0C0C0';
-	span.style.color = 'black';
-	span.style.fontSize = '9px';
-	span.style.verticalAlign = 'bottom';
-	span.textContent = '?';
-	frag.appendChild(span);
-	return frag;
-}

src/Disp/MenuSections/CreateMissingUpgrades.js

@@ -1,79 +0,0 @@
-/** Functions related to displaying the missing upgrades in the Statistics page */
-
-import { CacheMissingUpgrades, CacheMissingUpgradesCookies, CacheMissingUpgradesPrestige } from '../../Cache/VariablesAndData';
-
-/**
- * This function creates the missing upgrades sections for prestige, normal and cookie upgrades
- */
-export function AddMissingUpgrades() {
-	for (const menuSection of (l('menu').children)) {
-		if (menuSection.children[0]) {
-			if (menuSection.children[0].innerHTML === 'Prestige' && CacheMissingUpgradesPrestige) {
-				const prestigeUpgradesMissing = CacheMissingUpgradesPrestige.match(new RegExp('div', 'g') || []).length / 2;
-				const title = document.createElement('div');
-				title.id = 'CMMissingUpgradesPrestigeTitle';
-				title.className = 'listing';
-				const titlefrag = document.createElement('div');
-				titlefrag.innerHTML = `<b>Missing Prestige upgrades:</b> ${prestigeUpgradesMissing}/${Game.PrestigeUpgrades.length} (${Math.floor((prestigeUpgradesMissing / Game.PrestigeUpgrades.length) * 100)}%)`;
-				title.appendChild(titlefrag);
-				menuSection.appendChild(title);
-				const upgrades = document.createElement('div');
-				upgrades.className = 'listing crateBox';
-				upgrades.innerHTML = CacheMissingUpgradesPrestige;
-				menuSection.appendChild(upgrades);
-			} else if (menuSection.children[0].innerHTML === 'Upgrades') {
-				if (CacheMissingUpgrades) {
-					const normalUpgradesMissing = CacheMissingUpgrades.match(new RegExp('div', 'g') || []).length / 2;
-					const title = document.createElement('div');
-					title.id = 'CMMissingUpgradesTitle';
-					title.className = 'listing';
-					const titlefrag = document.createElement('div');
-					titlefrag.innerHTML = `<b>Missing normal upgrades:</b> ${normalUpgradesMissing}/${Game.UpgradesByPool[''].length + Game.UpgradesByPool.tech.length} (${Math.floor((normalUpgradesMissing / (Game.UpgradesByPool[''].length + Game.UpgradesByPool.tech.length)) * 100)}%)`;
-					title.appendChild(titlefrag);
-					menuSection.insertBefore(title, menuSection.childNodes[3]);
-					const upgrades = document.createElement('div');
-					upgrades.className = 'listing crateBox';
-					upgrades.innerHTML = CacheMissingUpgrades;
-					menuSection.insertBefore(upgrades, document.getElementById('CMMissingUpgradesTitle').nextSibling);
-				}
-				if (CacheMissingUpgradesCookies) {
-					const cookieUpgradesMissing = CacheMissingUpgradesCookies.match(new RegExp('div', 'g') || []).length / 2;
-					const title = document.createElement('div');
-					title.id = 'CMMissingUpgradesCookiesTitle';
-					title.className = 'listing';
-					const titlefrag = document.createElement('div');
-					titlefrag.innerHTML = `<b>Missing Cookie upgrades:</b> ${cookieUpgradesMissing}/${Game.UpgradesByPool.cookie.length} (${Math.floor((cookieUpgradesMissing / Game.UpgradesByPool.cookie.length) * 100)}%)`;
-					title.appendChild(titlefrag);
-					menuSection.appendChild(title);
-					const upgrades = document.createElement('div');
-					upgrades.className = 'listing crateBox';
-					upgrades.innerHTML = CacheMissingUpgradesCookies;
-					menuSection.appendChild(upgrades);
-				}
-			}
-		}
-	}
-}
-
-/**
- * This function returns the "crates" (icons) for missing upgrades in the stats sections
- * It returns a html string that gets appended to the respective CM.Cache.MissingUpgrades-variable by CM.Cache.CacheMissingUpgrades()
- * @param	{object}	me	The upgrade object
- * @returns	{string}	?	The HTML string that creates the icon.
- */
-export function crateMissing(me) {
-	let classes = 'crate upgrade missing';
-	if (me.pool === 'prestige') classes += ' heavenly';
-
-	let noFrame = 0;
-	if (!Game.prefs.crates) noFrame = 1;
-	if (noFrame) classes += ' noFrame';
-
-	let icon = me.icon;
-	if (me.iconFunction) icon = me.iconFunction();
-	const tooltip = `function() {return Game.crateTooltip(Game.UpgradesById[${me.id}], 'stats');}`;
-	return `<div class="${classes}"
-	${Game.getDynamicTooltip(tooltip, 'top', true)}
-	style = "${(`${icon[2] ? `background-image: url(${icon[2]});` : ''}background-position:${-icon[0] * 48}px ${-icon[1] * 48}px`)};">
-	</div>`;
-}

src/Disp/MenuSections/CreateStatsSections.js

@@ -1,349 +0,0 @@
-/** Functions to create the individual sections of the Statistics page */
-
-import { MaxChainCookieReward } from '../../Cache/Stats/ChainCookies';
-import {
-	CacheAvgCPSWithChoEgg,
-	CacheChainFrenzyMaxReward,
-	CacheChainFrenzyRequired,
-	CacheChainFrenzyRequiredNext,
-	CacheChainFrenzyWrathRequired,
-	CacheChainFrenzyWrathRequiredNext,
-	CacheChainMaxReward,
-	CacheChainRequired,
-	CacheChainRequiredNext,
-	CacheChainWrathMaxReward,
-	CacheChainWrathRequired,
-	CacheChainWrathRequiredNext,
-	CacheConjure,
-	CacheConjureReward,
-	CacheDragonsFortuneMultAdjustment,
-	CacheEdifice,
-	CacheEdificeBuilding,
-	CacheGoldenCookiesMult,
-	CacheHCPerSecond, CacheLastChoEgg, CacheLucky, CacheLuckyFrenzy, CacheLuckyReward, CacheLuckyRewardFrenzy, CacheLuckyWrathReward, CacheLuckyWrathRewardFrenzy, CacheNoGoldSwitchCookiesPS, CacheRealCookiesEarned, CacheWrathCookiesMult, CacheWrinklersTotal,
-} from '../../Cache/VariablesAndData';
-import { CMOptions } from '../../Config/VariablesAndData';
-import ResetBonus from '../../Sim/SimulationEvents/ResetAscension';
-import { Beautify, FormatTime } from '../BeautifyAndFormatting/BeautifyFormatting';
-
-import GetCPS from '../HelperFunctions/GetCPS';
-import GetWrinkConfigBank from '../HelperFunctions/GetWrinkConfigBank';
-import { ColorGreen, ColorRed, ColorTextPre } from '../VariablesAndData';
-import { StatsListing } from './CreateDOMElements';
-
-/**
- * This function creates the "Lucky" section of the stats page
- * @returns	{object}	section		The object contating the Lucky section
- */
-export function LuckySection() {
-	// This sets which tooltip to display for certain stats
-	const goldCookTooltip = Game.auraMult('Dragon\'s Fortune') ? 'GoldCookDragonsFortuneTooltipPlaceholder' : 'GoldCookTooltipPlaceholder';
-
-	const section = document.createElement('div');
-	section.className = 'CMStatsLuckySection';
-
-	const luckyColor = ((Game.cookies + GetWrinkConfigBank()) < CacheLucky) ? ColorRed : ColorGreen;
-	const luckyTime = ((Game.cookies + GetWrinkConfigBank()) < CacheLucky) ? FormatTime((CacheLucky - (Game.cookies + GetWrinkConfigBank())) / GetCPS()) : '';
-	const luckyReqFrag = document.createDocumentFragment();
-	const luckyReqSpan = document.createElement('span');
-	luckyReqSpan.style.fontWeight = 'bold';
-	luckyReqSpan.className = ColorTextPre + luckyColor;
-	luckyReqSpan.textContent = Beautify(CacheLucky);
-	luckyReqFrag.appendChild(luckyReqSpan);
-	if (luckyTime !== '') {
-		const luckyReqSmall = document.createElement('small');
-		luckyReqSmall.textContent = ` (${luckyTime})`;
-		luckyReqFrag.appendChild(luckyReqSmall);
-	}
-	section.appendChild(StatsListing('withTooltip', '"Lucky!" Cookies Required', luckyReqFrag, goldCookTooltip));
-
-	const luckyColorFrenzy = ((Game.cookies + GetWrinkConfigBank()) < CacheLuckyFrenzy) ? ColorRed : ColorGreen;
-	const luckyTimeFrenzy = ((Game.cookies + GetWrinkConfigBank()) < CacheLuckyFrenzy) ? FormatTime((CacheLuckyFrenzy - (Game.cookies + GetWrinkConfigBank())) / GetCPS()) : '';
-	const luckyReqFrenFrag = document.createDocumentFragment();
-	const luckyReqFrenSpan = document.createElement('span');
-	luckyReqFrenSpan.style.fontWeight = 'bold';
-	luckyReqFrenSpan.className = ColorTextPre + luckyColorFrenzy;
-	luckyReqFrenSpan.textContent = Beautify(CacheLuckyFrenzy);
-	luckyReqFrenFrag.appendChild(luckyReqFrenSpan);
-	if (luckyTimeFrenzy !== '') {
-		const luckyReqFrenSmall = document.createElement('small');
-		luckyReqFrenSmall.textContent = ` (${luckyTimeFrenzy})`;
-		luckyReqFrenFrag.appendChild(luckyReqFrenSmall);
-	}
-	section.appendChild(StatsListing('withTooltip', '"Lucky!" Cookies Required (Frenzy)', luckyReqFrenFrag, goldCookTooltip));
-
-	const luckySplit = CacheLuckyReward !== CacheLuckyWrathReward;
-
-	const luckyRewardMaxSpan = document.createElement('span');
-	luckyRewardMaxSpan.style.fontWeight = 'bold';
-	luckyRewardMaxSpan.className = ColorTextPre + CacheLuckyReward;
-	luckyRewardMaxSpan.textContent = Beautify(CacheLuckyReward) + (luckySplit ? (` / ${Beautify(CacheLuckyWrathReward)}`) : '');
-	section.appendChild(StatsListing('withTooltip', `"Lucky!" Reward (MAX)${luckySplit ? ' (Golden / Wrath)' : ''}`, luckyRewardMaxSpan, goldCookTooltip));
-
-	const luckyRewardFrenzyMaxSpan = document.createElement('span');
-	luckyRewardFrenzyMaxSpan.style.fontWeight = 'bold';
-	luckyRewardFrenzyMaxSpan.className = ColorTextPre + luckyRewardFrenzyMaxSpan;
-	luckyRewardFrenzyMaxSpan.textContent = Beautify(CacheLuckyRewardFrenzy) + (luckySplit ? (` / ${Beautify(CacheLuckyWrathRewardFrenzy)}`) : '');
-	section.appendChild(StatsListing('withTooltip', `"Lucky!" Reward (MAX) (Frenzy)${luckySplit ? ' (Golden / Wrath)' : ''}`, luckyRewardFrenzyMaxSpan, goldCookTooltip));
-
-	const luckyCurBase = Math.min((Game.cookies + GetWrinkConfigBank()) * 0.15, CacheNoGoldSwitchCookiesPS * CacheDragonsFortuneMultAdjustment * 60 * 15) + 13;
-	const luckyCurSpan = document.createElement('span');
-	luckyCurSpan.style.fontWeight = 'bold';
-	luckyCurSpan.className = ColorTextPre + luckyCurSpan;
-	luckyCurSpan.textContent = Beautify(CacheGoldenCookiesMult * luckyCurBase) + (luckySplit ? (` / ${Beautify(CacheWrathCookiesMult * luckyCurBase)}`) : '');
-	section.appendChild(StatsListing('withTooltip', `"Lucky!" Reward (CUR)${luckySplit ? ' (Golden / Wrath)' : ''}`, luckyCurSpan, goldCookTooltip));
-	return section;
-}
-
-/**
- * This function creates the "Chain" section of the stats page
- * @returns	{object}	section		The object contating the Chain section
- */
-export function ChainSection() {
-	// This sets which tooltip to display for certain stats
-	const goldCookTooltip = Game.auraMult('Dragon\'s Fortune') ? 'GoldCookDragonsFortuneTooltipPlaceholder' : 'GoldCookTooltipPlaceholder';
-
-	const section = document.createElement('div');
-	section.className = 'CMStatsChainSection';
-
-	const chainColor = ((Game.cookies + GetWrinkConfigBank()) < CacheChainRequired) ? ColorRed : ColorGreen;
-	const chainTime = ((Game.cookies + GetWrinkConfigBank()) < CacheChainRequired) ? FormatTime((CacheChainRequired - (Game.cookies + GetWrinkConfigBank())) / GetCPS()) : '';
-	const chainReqFrag = document.createDocumentFragment();
-	const chainReqSpan = document.createElement('span');
-	chainReqSpan.style.fontWeight = 'bold';
-	chainReqSpan.className = ColorTextPre + chainColor;
-	chainReqSpan.textContent = Beautify(CacheChainRequired);
-	chainReqFrag.appendChild(chainReqSpan);
-	if (chainTime !== '') {
-		const chainReqSmall = document.createElement('small');
-		chainReqSmall.textContent = ` (${chainTime})`;
-		chainReqFrag.appendChild(chainReqSmall);
-	}
-	section.appendChild(StatsListing('withTooltip', '"Chain" Cookies Required', chainReqFrag, goldCookTooltip));
-
-	const chainWrathColor = ((Game.cookies + GetWrinkConfigBank()) < CacheChainWrathRequired) ? ColorRed : ColorGreen;
-	const chainWrathTime = ((Game.cookies + GetWrinkConfigBank()) < CacheChainWrathRequired) ? FormatTime((CacheChainWrathRequired - (Game.cookies + GetWrinkConfigBank())) / GetCPS()) : '';
-	const chainWrathReqFrag = document.createDocumentFragment();
-	const chainWrathReqSpan = document.createElement('span');
-	chainWrathReqSpan.style.fontWeight = 'bold';
-	chainWrathReqSpan.className = ColorTextPre + chainWrathColor;
-	chainWrathReqSpan.textContent = Beautify(CacheChainWrathRequired);
-	chainWrathReqFrag.appendChild(chainWrathReqSpan);
-	if (chainWrathTime !== '') {
-		const chainWrathReqSmall = document.createElement('small');
-		chainWrathReqSmall.textContent = ` (${chainWrathTime})`;
-		chainWrathReqFrag.appendChild(chainWrathReqSmall);
-	}
-	section.appendChild(StatsListing('withTooltip', '"Chain" Cookies Required (Wrath)', chainWrathReqFrag, goldCookTooltip));
-
-	const chainColorFrenzy = ((Game.cookies + GetWrinkConfigBank()) < CacheChainFrenzyRequired) ? ColorRed : ColorGreen;
-	const chainTimeFrenzy = ((Game.cookies + GetWrinkConfigBank()) < CacheChainFrenzyRequired) ? FormatTime((CacheChainFrenzyRequired - (Game.cookies + GetWrinkConfigBank())) / GetCPS()) : '';
-	const chainReqFrenFrag = document.createDocumentFragment();
-	const chainReqFrenSpan = document.createElement('span');
-	chainReqFrenSpan.style.fontWeight = 'bold';
-	chainReqFrenSpan.className = ColorTextPre + chainColorFrenzy;
-	chainReqFrenSpan.textContent = Beautify(CacheChainFrenzyRequired);
-	chainReqFrenFrag.appendChild(chainReqFrenSpan);
-	if (chainTimeFrenzy !== '') {
-		const chainReqFrenSmall = document.createElement('small');
-		chainReqFrenSmall.textContent = ` (${chainTimeFrenzy})`;
-		chainReqFrenFrag.appendChild(chainReqFrenSmall);
-	}
-	section.appendChild(StatsListing('withTooltip', '"Chain" Cookies Required (Frenzy)', chainReqFrenFrag, goldCookTooltip));
-
-	const chainWrathColorFrenzy = ((Game.cookies + GetWrinkConfigBank()) < CacheChainFrenzyWrathRequired) ? ColorRed : ColorGreen;
-	const chainWrathTimeFrenzy = ((Game.cookies + GetWrinkConfigBank()) < CacheChainFrenzyWrathRequired) ? FormatTime((CacheChainFrenzyWrathRequired - (Game.cookies + GetWrinkConfigBank())) / GetCPS()) : '';
-	const chainWrathReqFrenFrag = document.createDocumentFragment();
-	const chainWrathReqFrenSpan = document.createElement('span');
-	chainWrathReqFrenSpan.style.fontWeight = 'bold';
-	chainWrathReqFrenSpan.className = ColorTextPre + chainWrathColorFrenzy;
-	chainWrathReqFrenSpan.textContent = Beautify(CacheChainFrenzyWrathRequired);
-	chainWrathReqFrenFrag.appendChild(chainWrathReqFrenSpan);
-	if (chainWrathTimeFrenzy !== '') {
-		const chainWrathReqFrenSmall = document.createElement('small');
-		chainWrathReqFrenSmall.textContent = ` (${chainWrathTimeFrenzy})`;
-		chainWrathReqFrenFrag.appendChild(chainWrathReqFrenSmall);
-	}
-	section.appendChild(StatsListing('withTooltip', '"Chain" Cookies Required (Frenzy) (Wrath)', chainWrathReqFrenFrag, goldCookTooltip));
-
-	section.appendChild(StatsListing('withTooltip', '"Chain" Reward (MAX) (Golden / Wrath)', document.createTextNode(`${Beautify(CacheChainMaxReward[0])} / ${Beautify(CacheChainWrathMaxReward[0])}`), goldCookTooltip));
-
-	section.appendChild(StatsListing('withTooltip', '"Chain" Reward (MAX) (Frenzy) (Golden / Wrath)', document.createTextNode((`${Beautify(CacheChainFrenzyMaxReward[0])} / ${Beautify(CacheChainFrenzyMaxReward[0])}`)), goldCookTooltip));
-
-	const chainCurMax = Math.min(Game.cookiesPs * 60 * 60 * 6 * CacheDragonsFortuneMultAdjustment, Game.cookies * 0.5);
-	const chainCur = MaxChainCookieReward(7, chainCurMax, CacheGoldenCookiesMult)[0];
-	const chainCurWrath = MaxChainCookieReward(6, chainCurMax, CacheWrathCookiesMult)[0];
-	section.appendChild(StatsListing('withTooltip', '"Chain" Reward (CUR) (Golden / Wrath)', document.createTextNode((`${Beautify(chainCur)} / ${Beautify(chainCurWrath)}`)), goldCookTooltip));
-
-	section.appendChild(StatsListing('withTooltip', 'CPS Needed For Next Level (G / W)', document.createTextNode((`${Beautify(CacheChainRequiredNext)} / ${Beautify(CacheChainWrathRequiredNext)}`)), 'ChainNextLevelPlaceholder'));
-	section.appendChild(StatsListing('withTooltip', 'CPS Needed For Next Level (Frenzy) (G / W)', document.createTextNode((`${Beautify(CacheChainFrenzyRequiredNext)} / ${Beautify(CacheChainFrenzyWrathRequiredNext)}`)), 'ChainNextLevelPlaceholder'));
-	return section;
-}
-
-/**
- * This function creates the "Spells" section of the stats page
- * @returns	{object}	section		The object contating the Spells section
- */
-export function SpellsSection() {
-	const section = document.createElement('div');
-	section.className = 'CMStatsSpellsSection';
-
-	const conjureColor = ((Game.cookies + GetWrinkConfigBank()) < CacheConjure) ? ColorRed : ColorGreen;
-	const conjureTime = ((Game.cookies + GetWrinkConfigBank()) < CacheConjure) ? FormatTime((CacheConjure - (Game.cookies + GetWrinkConfigBank())) / GetCPS()) : '';
-
-	const conjureReqFrag = document.createDocumentFragment();
-	const conjureReqSpan = document.createElement('span');
-	conjureReqSpan.style.fontWeight = 'bold';
-	conjureReqSpan.className = ColorTextPre + conjureColor;
-	conjureReqSpan.textContent = Beautify(CacheConjure);
-	conjureReqFrag.appendChild(conjureReqSpan);
-	if (conjureTime !== '') {
-		const conjureReqSmall = document.createElement('small');
-		conjureReqSmall.textContent = ` (${conjureTime})`;
-		conjureReqFrag.appendChild(conjureReqSmall);
-	}
-	section.appendChild(StatsListing('withTooltip', '"Conjure Baked Goods" Cookies Required', conjureReqFrag, 'GoldCookTooltipPlaceholder'));
-	section.appendChild(StatsListing('withTooltip', '"Conjure Baked Goods" Reward (MAX)', document.createTextNode(Beautify(CacheConjureReward)), 'GoldCookTooltipPlaceholder'));
-
-	const conjureFrenzyColor = ((Game.cookies + GetWrinkConfigBank()) < CacheConjure * 7) ? ColorRed : ColorGreen;
-	const conjureFrenzyCur = Math.min((Game.cookies + GetWrinkConfigBank()) * 0.15, CacheNoGoldSwitchCookiesPS * 60 * 30);
-	const conjureFrenzyTime = ((Game.cookies + GetWrinkConfigBank()) < CacheConjure * 7) ? FormatTime((CacheConjure * 7 - (Game.cookies + GetWrinkConfigBank())) / GetCPS()) : '';
-
-	const conjureFrenzyReqFrag = document.createDocumentFragment();
-	const conjureFrenzyReqSpan = document.createElement('span');
-	conjureFrenzyReqSpan.style.fontWeight = 'bold';
-	conjureFrenzyReqSpan.className = ColorTextPre + conjureFrenzyColor;
-	conjureFrenzyReqSpan.textContent = Beautify(CacheConjure * 7);
-	conjureFrenzyReqFrag.appendChild(conjureFrenzyReqSpan);
-	if (conjureFrenzyTime !== '') {
-		const conjureFrenzyReqSmall = document.createElement('small');
-		conjureFrenzyReqSmall.textContent = ` (${conjureFrenzyTime})`;
-		conjureFrenzyReqFrag.appendChild(conjureFrenzyReqSmall);
-	}
-	section.appendChild(StatsListing('withTooltip', '"Conjure Baked Goods" Cookies Required (Frenzy)', conjureFrenzyReqFrag, 'GoldCookTooltipPlaceholder'));
-	section.appendChild(StatsListing('withTooltip', '"Conjure Baked Goods" Reward (MAX) (Frenzy)', document.createTextNode(Beautify(CacheConjureReward * 7)), 'GoldCookTooltipPlaceholder'));
-	section.appendChild(StatsListing('withTooltip', '"Conjure Baked Goods" Reward (CUR)', document.createTextNode(Beautify(conjureFrenzyCur)), 'GoldCookTooltipPlaceholder'));
-	if (CacheEdifice) {
-		section.appendChild(StatsListing('withTooltip', '"Spontaneous Edifice" Cookies Required (most expensive building)', document.createTextNode(`${Beautify(CacheEdifice)} (${CacheEdificeBuilding})`), 'GoldCookTooltipPlaceholder'));
-	}
-	return section;
-}
-
-/**
- * This function creates the "Garden" section of the stats page
- * @returns	{object}	section		The object contating the Spells section
- */
-export function GardenSection() {
-	const section = document.createElement('div');
-	section.className = 'CMStatsGardenSection';
-
-	const bakeberryColor = (Game.cookies < Game.cookiesPs * 60 * 30) ? ColorRed : ColorGreen;
-	const bakeberryFrag = document.createElement('span');
-	bakeberryFrag.style.fontWeight = 'bold';
-	bakeberryFrag.className = ColorTextPre + bakeberryColor;
-	bakeberryFrag.textContent = Beautify(Game.cookiesPs * 60 * 30);
-	section.appendChild(StatsListing('basic', 'Cookies required for max reward of Bakeberry: ', bakeberryFrag));
-
-	const chocorootColor = (Game.cookies < Game.cookiesPs * 60 * 3) ? ColorRed : ColorGreen;
-	const chocorootFrag = document.createElement('span');
-	chocorootFrag.style.fontWeight = 'bold';
-	chocorootFrag.className = ColorTextPre + chocorootColor;
-	chocorootFrag.textContent = Beautify(Game.cookiesPs * 60 * 3);
-	section.appendChild(StatsListing('basic', 'Cookies required for max reward of Chocoroot: ', chocorootFrag));
-
-	const queenbeetColor = (Game.cookies < Game.cookiesPs * 60 * 60) ? ColorRed : ColorGreen;
-	const queenbeetFrag = document.createElement('span');
-	queenbeetFrag.style.fontWeight = 'bold';
-	queenbeetFrag.className = ColorTextPre + queenbeetColor;
-	queenbeetFrag.textContent = Beautify(Game.cookiesPs * 60 * 60);
-	section.appendChild(StatsListing('basic', 'Cookies required for max reward of Queenbeet: ', queenbeetFrag));
-
-	const duketaterColor = (Game.cookies < Game.cookiesPs * 60 * 120) ? ColorRed : ColorGreen;
-	const duketaterFrag = document.createElement('span');
-	duketaterFrag.style.fontWeight = 'bold';
-	duketaterFrag.className = ColorTextPre + duketaterColor;
-	duketaterFrag.textContent = Beautify(Game.cookiesPs * 60 * 120);
-	section.appendChild(StatsListing('basic', 'Cookies required for max reward of Duketater: ', duketaterFrag));
-	return section;
-}
-
-/**
- * This function creates the "Prestige" section of the stats page
- * @returns	{object}	section		The object contating the Prestige section
- */
-export function PrestigeSection() {
-	const section = document.createElement('div');
-	section.className = 'CMStatsPrestigeSection';
-
-	const possiblePresMax = Math.floor(Game.HowMuchPrestige(CacheRealCookiesEarned
-		+ Game.cookiesReset + CacheWrinklersTotal
-		+ (Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg') ? CacheLastChoEgg : 0)));
-	section.appendChild(StatsListing('withTooltip', 'Prestige Level (CUR / MAX)', document.createTextNode(`${Beautify(Game.prestige)} / ${Beautify(possiblePresMax)}`), 'PrestMaxTooltipPlaceholder'));
-
-	const neededCook = Game.HowManyCookiesReset(possiblePresMax + 1) - (CacheRealCookiesEarned + Game.cookiesReset + CacheWrinklersTotal + ((Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg') ? CacheLastChoEgg : 0) ? CacheLastChoEgg : 0));
-	const cookiesNextFrag = document.createDocumentFragment();
-	cookiesNextFrag.appendChild(document.createTextNode(Beautify(neededCook)));
-	const cookiesNextSmall = document.createElement('small');
-	cookiesNextSmall.textContent = ` (${FormatTime(neededCook / CacheAvgCPSWithChoEgg, 1)})`;
-	cookiesNextFrag.appendChild(cookiesNextSmall);
-	section.appendChild(StatsListing('withTooltip', 'Cookies To Next Level', cookiesNextFrag, 'NextPrestTooltipPlaceholder'));
-
-	section.appendChild(StatsListing('withTooltip', 'Heavenly Chips (CUR / MAX)', document.createTextNode(`${Beautify(Game.heavenlyChips)} / ${Beautify((possiblePresMax - Game.prestige) + Game.heavenlyChips)}`), 'HeavenChipMaxTooltipPlaceholder'));
-
-	section.appendChild(StatsListing('basic', 'Heavenly Chips Per Second (last 5 seconds)', document.createTextNode(Beautify(CacheHCPerSecond, 2))));
-
-	const HCTarget = Number(CMOptions.HeavenlyChipsTarget);
-	if (!Number.isNaN(HCTarget)) {
-		const CookiesTillTarget = HCTarget - Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned));
-		if (CookiesTillTarget > 0) {
-			section.appendChild(StatsListing('basic', 'Heavenly Chips To Target Set In Settings (CUR)', document.createTextNode(Beautify(CookiesTillTarget))));
-			section.appendChild(StatsListing('basic', 'Time To Target (CUR, Current 5 Second Average)', document.createTextNode(FormatTime(CookiesTillTarget / CacheHCPerSecond))));
-		}
-	}
-
-	const resetBonus = ResetBonus(possiblePresMax);
-	const resetFrag = document.createDocumentFragment();
-	resetFrag.appendChild(document.createTextNode(Beautify(resetBonus)));
-	const increase = Math.round(resetBonus / Game.cookiesPs * 10000);
-	if (Number.isFinite(increase) && increase !== 0) {
-		const resetSmall = document.createElement('small');
-		resetSmall.textContent = ` (${increase / 100}% of income)`;
-		resetFrag.appendChild(resetSmall);
-	}
-	section.appendChild(StatsListing('withTooltip', 'Reset Bonus Income', resetFrag, 'ResetTooltipPlaceholder'));
-
-	const currentPrestige = Math.floor(Game.HowMuchPrestige(Game.cookiesReset));
-	const willHave = Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned));
-	const willGet = willHave - currentPrestige;
-	if (!Game.Has('Lucky digit')) {
-		let delta7 = 7 - (willHave % 10);
-		if (delta7 < 0) delta7 += 10;
-		const next7Reset = willGet + delta7;
-		const next7Total = willHave + delta7;
-		const frag7 = document.createDocumentFragment();
-		frag7.appendChild(document.createTextNode(`${next7Total.toLocaleString()} / ${next7Reset.toLocaleString()} (+${delta7})`));
-		section.appendChild(StatsListing('basic', 'Next "Lucky Digit" (total / reset)', frag7));
-	}
-
-	if (!Game.Has('Lucky number')) {
-		let delta777 = 777 - (willHave % 1000);
-		if (delta777 < 0) delta777 += 1000;
-		const next777Reset = willGet + delta777;
-		const next777Total = willHave + delta777;
-		const frag777 = document.createDocumentFragment();
-		frag777.appendChild(document.createTextNode(`${next777Total.toLocaleString()} / ${next777Reset.toLocaleString()} (+${delta777})`));
-		section.appendChild(StatsListing('basic', 'Next "Lucky Number" (total / reset)', frag777));
-	}
-
-	if (!Game.Has('Lucky payout')) {
-		let delta777777 = 777777 - (willHave % 1000000);
-		if (delta777777 < 0) delta777777 += 1000000;
-		const next777777Reset = willGet + delta777777;
-		const next777777Total = willHave + delta777777;
-		const frag777777 = document.createDocumentFragment();
-		frag777777.appendChild(document.createTextNode(`${next777777Total.toLocaleString()} / ${next777777Reset.toLocaleString()} (+${delta777777})`));
-		section.appendChild(StatsListing('basic', 'Next "Lucky Payout" (total / reset)', frag777777));
-	}
-
-	return section;
-}

src/Disp/MenuSections/Info/InfoPage.js

@@ -0,0 +1,45 @@
+/** Functions related to the Stats page */
+
+import { ToggleHeader } from '../../../Config/ToggleSetting';
+import { CMOptions } from '../../../Config/VariablesAndData';
+import { LatestReleaseNotes, ModDescription } from '../../../Data/Moddata';
+
+/**
+ * This function adds stats created by CookieMonster to the stats page
+ * @param {object} title	On object that includes the title of the menu
+ */
+export default function AddMenuInfo(title) {
+  const info = document.createElement('div');
+  info.className = 'subsection';
+
+  const span = document.createElement('span');
+  span.style.cursor = 'pointer';
+  span.style.display = 'inline-block';
+  span.style.height = '14px';
+  span.style.width = '14px';
+  span.style.borderRadius = '7px';
+  span.style.textAlign = 'center';
+  span.style.backgroundColor = '#C0C0C0';
+  span.style.color = 'black';
+  span.style.fontSize = '13px';
+  span.style.verticalAlign = 'middle';
+  span.textContent = CMOptions.Header.InfoTab ? '-' : '+';
+  span.onclick = function () {
+    ToggleHeader('InfoTab');
+    Game.UpdateMenu();
+  };
+  title.appendChild(span);
+  info.appendChild(title);
+
+  if (CMOptions.Header.InfoTab) {
+    const description = document.createElement('div');
+    description.innerHTML = ModDescription;
+    info.appendChild(description);
+    const notes = document.createElement('div');
+    notes.innerHTML = LatestReleaseNotes;
+    info.appendChild(notes);
+  }
+
+  const menu = l('menu').children[1];
+  menu.insertBefore(info, menu.children[1]);
+}

src/Disp/MenuSections/InfoPage.js

@@ -1,42 +0,0 @@
-/** Functions related to the Stats page */
-
-import { ToggleHeader } from '../../Config/ToggleSetting';
-import { CMOptions } from '../../Config/VariablesAndData';
-import { LatestReleaseNotes, ModDescription } from '../../Data/Moddata';
-
-/**
- * This function adds stats created by CookieMonster to the stats page
- * @param {object} title	On object that includes the title of the menu
- */
-export default function AddMenuInfo(title) {
-	const info = document.createElement('div');
-	info.className = 'subsection';
-
-	const span = document.createElement('span');
-	span.style.cursor = 'pointer';
-	span.style.display = 'inline-block';
-	span.style.height = '14px';
-	span.style.width = '14px';
-	span.style.borderRadius = '7px';
-	span.style.textAlign = 'center';
-	span.style.backgroundColor = '#C0C0C0';
-	span.style.color = 'black';
-	span.style.fontSize = '13px';
-	span.style.verticalAlign = 'middle';
-	span.textContent = CMOptions.Header.InfoTab ? '-' : '+';
-	span.onclick = function () { ToggleHeader('InfoTab'); Game.UpdateMenu(); };
-	title.appendChild(span);
-	info.appendChild(title);
-
-	if (CMOptions.Header.InfoTab) {
-		const description = document.createElement('div');
-		description.innerHTML = ModDescription;
-		info.appendChild(description);
-		const notes = document.createElement('div');
-		notes.innerHTML = LatestReleaseNotes;
-		info.appendChild(notes);
-	}
-
-	const menu = l('menu').children[1];
-	menu.insertBefore(info, menu.children[1]);
-}

src/Disp/MenuSections/Prompt.js

@@ -0,0 +1,22 @@
+/** Creates a Prompt similar to the base game without some of the stuff breaking them */
+export default function CookieMonsterPrompt(content, options) {
+  Game.promptWrapL.className = 'framed';
+  const str = content;
+  Game.promptL.innerHTML = `${str}<div class="optionBox"></div>`;
+  Object.keys(options).forEach((i) => {
+    const option = document.createElement('a');
+    option.id = `promptOption${i}`;
+    option.className = 'option';
+    option.onclick = function () {
+      PlaySound('snd/tick.mp3');
+      options[i][1]();
+    };
+    option.textContent = options[i][0];
+    Game.promptL.children[1].appendChild(option);
+  });
+  Game.promptAnchorL.style.display = 'block';
+  Game.darkenL.style.display = 'block';
+  Game.promptL.focus();
+  Game.promptOn = 1;
+  Game.UpdatePrompt();
+}

src/Disp/MenuSections/Refreshmenu.js

@@ -5,5 +5,11 @@ import { CMOptions } from '../../Config/VariablesAndData';
  * It is called by CM.Disp.Draw()
  */
 export default function RefreshMenu() {
-	if (CMOptions.UpStats && Game.onMenu === 'stats' && (Game.drawT - 1) % (Game.fps * 5) !== 0 && (Game.drawT - 1) % Game.fps === 0) Game.UpdateMenu();
+  if (
+    CMOptions.UpStats &&
+    Game.onMenu === 'stats' &&
+    (Game.drawT - 1) % (Game.fps * 5) !== 0 &&
+    (Game.drawT - 1) % Game.fps === 0
+  )
+    Game.UpdateMenu();
 }

src/Disp/MenuSections/Settings/CreateHeader.js

@@ -0,0 +1,35 @@
+import { ToggleHeader } from '../../../Config/ToggleSetting';
+import { CMOptions } from '../../../Config/VariablesAndData';
+
+/**
+ * This function creates a header-object for the options page
+ * @param 	{string}		config	The name of the Config-group
+ * @param 	{string}		text	The to-be displayed name of the header
+ * @returns	{object}		div		The header object
+ */
+export default function CreatePrefHeader(config, text) {
+  const div = document.createElement('div');
+  div.className = 'title';
+
+  div.style.opacity = '0.7';
+  div.style.fontSize = '17px';
+  div.appendChild(document.createTextNode(`${text} `));
+  const span = document.createElement('span'); // Creates the +/- button
+  span.style.cursor = 'pointer';
+  span.style.display = 'inline-block';
+  span.style.height = '14px';
+  span.style.width = '14px';
+  span.style.borderRadius = '7px';
+  span.style.textAlign = 'center';
+  span.style.backgroundColor = '#C0C0C0';
+  span.style.color = 'black';
+  span.style.fontSize = '13px';
+  span.style.verticalAlign = 'middle';
+  span.textContent = CMOptions.Header[config] ? '-' : '+';
+  span.onclick = function () {
+    ToggleHeader(config);
+    Game.UpdateMenu();
+  };
+  div.appendChild(span);
+  return div;
+}

src/Disp/MenuSections/Settings/CreateOption.js

@@ -0,0 +1,234 @@
+import jscolor, * as JsColor from '@eastdesire/jscolor';
+import ToggleFavouriteSetting from '../../../Config/Toggles/ToggleFavourites';
+import { SaveConfig } from '../../../Config/SaveLoadReload/SaveLoadReloadSettings';
+import {
+  ConfigPrefix,
+  ToggleConfig,
+  ToggleConfigVolume,
+} from '../../../Config/ToggleSetting';
+import { CMOptions } from '../../../Config/VariablesAndData';
+import {} from '../../../Data/Sectionheaders';
+import Config from '../../../Data/SettingsData';
+import RefreshScale from '../../HelperFunctions/RefreshScale';
+import UpdateColours from '../../HelperFunctions/UpdateColours';
+import Flash from '../../Notifications/Flash';
+import PlaySound from '../../Notifications/Sound';
+import {
+  FavouriteSettings,
+  SimpleTooltipElements,
+} from '../../VariablesAndData';
+import CookieMonsterPrompt from '../Prompt';
+
+/**
+ * This function creates the favourite setting star object
+ * @param 	{string}		config	The name of the option
+ * @returns	{object}		div		The option object
+ */
+function CreateFavouriteStar(config) {
+  const FavStar = document.createElement('a');
+  if (FavouriteSettings.includes(config)) {
+    FavStar.innerText = '★';
+    FavStar.style.color = 'yellow';
+  } else FavStar.innerText = '☆';
+  FavStar.className = 'option';
+  FavStar.onclick = function () {
+    ToggleFavouriteSetting(config);
+    SaveConfig();
+    Game.UpdateMenu();
+  };
+  FavStar.onmouseover = function () {
+    Game.tooltip.draw(
+      this,
+      escape(SimpleTooltipElements.FavouriteSettingPlaceholder.innerHTML),
+    );
+  };
+  FavStar.onmouseout = function () {
+    Game.tooltip.hide();
+  };
+  FavStar.appendChild(document.createTextNode(' '));
+  return FavStar;
+}
+
+/**
+ * This function creates an option-object for the options page
+ * @param 	{string}		config	The name of the option
+ * @returns	{object}		div		The option object
+ */
+export default function CreatePrefOption(config) {
+  const div = document.createElement('div');
+  div.className = 'listing';
+  if (CMOptions.FavouriteSettings === 1) {
+    div.appendChild(CreateFavouriteStar(config));
+  }
+  if (Config[config].type === 'bool') {
+    const a = document.createElement('a');
+    if (Config[config].toggle && CMOptions[config] === 0) {
+      a.className = 'option off';
+    } else {
+      a.className = 'option';
+    }
+    a.id = ConfigPrefix + config;
+    a.onclick = function () {
+      ToggleConfig(config);
+    };
+    a.textContent = Config[config].label[CMOptions[config]];
+    div.appendChild(a);
+    const label = document.createElement('label');
+    label.textContent = Config[config].desc;
+    label.style.lineHeight = '1.6';
+    div.appendChild(label);
+    return div;
+  }
+  if (Config[config].type === 'vol') {
+    const volume = document.createElement('div');
+    volume.className = 'sliderBox';
+    const title = document.createElement('div');
+    title.style.float = 'left';
+    title.innerHTML = Config[config].desc;
+    volume.appendChild(title);
+    const percent = document.createElement('div');
+    percent.id = `slider${config}right`;
+    percent.style.float = 'right';
+    percent.innerHTML = `${CMOptions[config]}%`;
+    volume.appendChild(percent);
+    const slider = document.createElement('input');
+    slider.className = 'slider';
+    slider.id = `slider${config}`;
+    slider.style.clear = 'both';
+    slider.type = 'range';
+    slider.min = '0';
+    slider.max = '100';
+    slider.step = '1';
+    slider.value = CMOptions[config];
+    slider.oninput = function () {
+      ToggleConfigVolume(config);
+    };
+    slider.onchange = function () {
+      ToggleConfigVolume(config);
+    };
+    volume.appendChild(slider);
+    div.appendChild(volume);
+    const a = document.createElement('a');
+    a.className = 'option';
+    a.onclick = function () {
+      PlaySound(
+        CMOptions[config.replace('Volume', 'SoundURL')],
+        config.replace('Volume', 'Sound'),
+        config,
+        true,
+      );
+    };
+    a.textContent = 'Test sound';
+    div.appendChild(a);
+    return div;
+  }
+  if (Config[config].type === 'url') {
+    const span = document.createElement('span');
+    span.className = 'option';
+    span.textContent = `${Config[config].label} `;
+    span.style.lineHeight = '1.6';
+    div.appendChild(span);
+    const input = document.createElement('input');
+    input.id = ConfigPrefix + config;
+    input.className = 'option';
+    input.type = 'text';
+    input.readOnly = true;
+    input.setAttribute('value', CMOptions[config]);
+    input.style.width = '300px';
+    div.appendChild(input);
+    div.appendChild(document.createTextNode(' '));
+    const inputPrompt = document.createElement('input');
+    inputPrompt.id = `${ConfigPrefix + config}Prompt`;
+    inputPrompt.className = 'option';
+    inputPrompt.type = 'text';
+    inputPrompt.setAttribute('value', CMOptions[config]);
+    const a = document.createElement('a');
+    a.className = 'option';
+    a.onclick = function () {
+      CookieMonsterPrompt(inputPrompt.outerHTML, [
+        [
+          'Save',
+          function () {
+            CMOptions[config] = l(`${ConfigPrefix}${config}Prompt`).value;
+            SaveConfig();
+            Game.ClosePrompt();
+            Game.UpdateMenu();
+          },
+        ],
+        [
+          'Cancel',
+          function () {
+            Game.ClosePrompt();
+          },
+        ],
+      ]);
+    };
+    a.textContent = 'Edit';
+    div.appendChild(a);
+    const label = document.createElement('label');
+    label.textContent = Config[config].desc;
+    label.style.lineHeight = '1.6';
+    div.appendChild(label);
+    return div;
+  }
+  if (Config[config].type === 'colour') {
+    const innerSpan = document.createElement('span');
+    innerSpan.className = 'option';
+    const input = document.createElement('input');
+    input.id = config;
+    input.style.width = '65px';
+    input.setAttribute('value', CMOptions[config]);
+    innerSpan.appendChild(input);
+    const change = function () {
+      CMOptions[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[config].desc;
+    label.style.lineHeight = '1.6';
+    innerSpan.appendChild(label);
+    if (config.includes('Flash')) {
+      const a = document.createElement('a');
+      a.className = 'option';
+      a.onclick = function () {
+        Flash(3, config.replace('Colour', ''), true);
+      };
+      a.textContent = 'Test flash';
+      innerSpan.appendChild(a);
+    }
+    div.appendChild(innerSpan);
+    jscolor.init();
+    return div;
+  }
+  if (Config[config].type === 'numscale') {
+    const span = document.createElement('span');
+    span.className = 'option';
+    span.textContent = `${Config[config].label} `;
+    span.style.lineHeight = '1.6';
+    div.appendChild(span);
+    const input = document.createElement('input');
+    input.id = ConfigPrefix + config;
+    input.className = 'option';
+    input.type = 'number';
+    input.value = CMOptions[config];
+    input.min = Config[config].min;
+    input.max = Config[config].max;
+    input.oninput = function () {
+      CMOptions[config] = this.value;
+      SaveConfig();
+      RefreshScale();
+    };
+    div.appendChild(input);
+    div.appendChild(document.createTextNode(' '));
+    const label = document.createElement('label');
+    label.textContent = Config[config].desc;
+    label.style.lineHeight = '1.6';
+    div.appendChild(label);
+    return div;
+  }
+  return div;
+}

src/Disp/MenuSections/Settings/SettingsPage.js

@@ -0,0 +1,79 @@
+import { LoadConfig } from '../../../Config/SaveLoadReload/SaveLoadReloadSettings';
+import { CMOptions } from '../../../Config/VariablesAndData';
+import {
+  ConfigGroups,
+  ConfigGroupsNotification,
+} from '../../../Data/Sectionheaders';
+import Config from '../../../Data/SettingsData';
+import ConfigDefault from '../../../Data/SettingsDefault';
+import { FavouriteSettings } from '../../VariablesAndData';
+import CreatePrefHeader from './CreateHeader';
+import CreatePrefOption from './CreateOption';
+
+/**
+ * This function adds the options/settings of CookieMonster to the options page
+ * It is called by CM.Disp.AddMenu
+ * @param {object} title	On object that includes the title of the menu
+ */
+export default function AddMenuPref(title) {
+  const frag = document.createDocumentFragment();
+  frag.appendChild(title);
+
+  Object.keys(ConfigGroups).forEach((group) => {
+    if (group === 'Favourite') {
+      if (FavouriteSettings.length !== 0 && CMOptions.FavouriteSettings > 0) {
+        frag.appendChild(CreatePrefHeader(group, ConfigGroups[group])); // (group, display-name of group)
+        if (CMOptions.Header[group])
+          for (let index = 0; index < FavouriteSettings.length; index++) {
+            frag.appendChild(CreatePrefOption(FavouriteSettings[index]));
+          }
+      }
+    } else {
+      frag.appendChild(CreatePrefHeader(group, ConfigGroups[group])); // (group, display-name of group)
+      if (CMOptions.Header[group]) {
+        // 0 is show, 1 is collapsed
+        // Make sub-sections of Notification section
+        if (group === 'Notification') {
+          Object.keys(ConfigGroupsNotification).forEach((subGroup) => {
+            const subGroupObject = CreatePrefHeader(
+              subGroup,
+              ConfigGroupsNotification[subGroup],
+            ); // (group, display-name of group)
+            subGroupObject.style.fontSize = '15px';
+            subGroupObject.style.opacity = '0.5';
+            frag.appendChild(subGroupObject);
+            if (CMOptions.Header[subGroup]) {
+              Object.keys(Config).forEach((option) => {
+                if (Config[option].group === subGroup)
+                  frag.appendChild(CreatePrefOption(option));
+              });
+            }
+          });
+        } else {
+          Object.keys(Config).forEach((option) => {
+            if (Config[option].group === group)
+              frag.appendChild(CreatePrefOption(option));
+          });
+        }
+      }
+    }
+  });
+
+  const resDef = document.createElement('div');
+  resDef.className = 'listing';
+  const resDefBut = document.createElement('a');
+  resDefBut.className = 'option';
+  resDefBut.onclick = function () {
+    LoadConfig(ConfigDefault);
+  };
+  resDefBut.textContent = 'Restore Default';
+  resDef.appendChild(resDefBut);
+  frag.appendChild(resDef);
+
+  l('menu').childNodes[2].insertBefore(
+    frag,
+    l('menu').childNodes[2].childNodes[
+      l('menu').childNodes[2].childNodes.length - 1
+    ],
+  );
+}

src/Disp/MenuSections/SettingsPage.js

@@ -1,221 +0,0 @@
-/** Functions related to the Options/Preferences page */
-
-import jscolor, * as JsColor from '@eastdesire/jscolor';
-import { LoadConfig, SaveConfig } from '../../Config/SaveLoadReload/SaveLoadReloadSettings';
-import {
-	ConfigPrefix, ToggleConfig, ToggleConfigVolume, ToggleHeader,
-} from '../../Config/ToggleSetting';
-import { CMOptions } from '../../Config/VariablesAndData';
-import { ConfigGroups, ConfigGroupsNotification } from '../../Data/Sectionheaders';
-import Config from '../../Data/SettingsData';
-import ConfigDefault from '../../Data/SettingsDefault';
-import RefreshScale from '../HelperFunctions/RefreshScale';
-import UpdateColors from '../HelperFunctions/UpdateColors';
-import { Colors } from '../VariablesAndData';
-
-/**
- * This function creates a header-object for the options page
- * @param 	{string}		config	The name of the Config-group
- * @param 	{string}		text	The to-be displayed name of the header
- * @returns	{object}		div		The header object
- */
-function CreatePrefHeader(config, text) {
-	const div = document.createElement('div');
-	div.className = 'title';
-
-	div.style.opacity = '0.7';
-	div.style.fontSize = '17px';
-	div.appendChild(document.createTextNode(`${text} `));
-	const span = document.createElement('span'); // Creates the +/- button
-	span.style.cursor = 'pointer';
-	span.style.display = 'inline-block';
-	span.style.height = '14px';
-	span.style.width = '14px';
-	span.style.borderRadius = '7px';
-	span.style.textAlign = 'center';
-	span.style.backgroundColor = '#C0C0C0';
-	span.style.color = 'black';
-	span.style.fontSize = '13px';
-	span.style.verticalAlign = 'middle';
-	span.textContent = CMOptions.Header[config] ? '-' : '+';
-	span.onclick = function () { ToggleHeader(config); Game.UpdateMenu(); };
-	div.appendChild(span);
-	return div;
-}
-
-/**
- * This function creates an option-object for the options page
- * @param 	{string}		config	The name of the option
- * @returns	{object}		div		The option object
- */
-function CreatePrefOption(config) {
-	const div = document.createElement('div');
-	div.className = 'listing';
-	if (Config[config].type === 'bool') {
-		const a = document.createElement('a');
-		if (Config[config].toggle && CMOptions[config] === 0) {
-			a.className = 'option off';
-		} else {
-			a.className = 'option';
-		}
-		a.id = ConfigPrefix + config;
-		a.onclick = function () { ToggleConfig(config); };
-		a.textContent = Config[config].label[CMOptions[config]];
-		div.appendChild(a);
-		const label = document.createElement('label');
-		label.textContent = Config[config].desc;
-		div.appendChild(label);
-		return div;
-	} if (Config[config].type === 'vol') {
-		const volume = document.createElement('div');
-		volume.className = 'sliderBox';
-		const title = document.createElement('div');
-		title.style.float = 'left';
-		title.innerHTML = Config[config].desc;
-		volume.appendChild(title);
-		const percent = document.createElement('div');
-		percent.id = `slider${config}right`;
-		percent.style.float = 'right';
-		percent.innerHTML = `${CMOptions[config]}%`;
-		volume.appendChild(percent);
-		const slider = document.createElement('input');
-		slider.className = 'slider';
-		slider.id = `slider${config}`;
-		slider.style.clear = 'both';
-		slider.type = 'range';
-		slider.min = '0';
-		slider.max = '100';
-		slider.step = '1';
-		slider.value = CMOptions[config];
-		slider.oninput = function () { ToggleConfigVolume(config); };
-		slider.onchange = function () { ToggleConfigVolume(config); };
-		volume.appendChild(slider);
-		div.appendChild(volume);
-		return div;
-	} if (Config[config].type === 'url') {
-		const span = document.createElement('span');
-		span.className = 'option';
-		span.textContent = `${Config[config].label} `;
-		div.appendChild(span);
-		const input = document.createElement('input');
-		input.id = ConfigPrefix + config;
-		input.className = 'option';
-		input.type = 'text';
-		input.readOnly = true;
-		input.setAttribute('value', CMOptions[config]);
-		input.style.width = '300px';
-		div.appendChild(input);
-		div.appendChild(document.createTextNode(' '));
-		const inputPrompt = document.createElement('input');
-		inputPrompt.id = `${ConfigPrefix + config}Prompt`;
-		inputPrompt.className = 'option';
-		inputPrompt.type = 'text';
-		inputPrompt.setAttribute('value', CMOptions[config]);
-		const a = document.createElement('a');
-		a.className = 'option';
-		a.onclick = function () {
-			Game.Prompt(inputPrompt.outerHTML, [['Save', function () { CMOptions[`${config}`] = l(`${ConfigPrefix}${config}Prompt`).value; SaveConfig(); Game.ClosePrompt(); Game.UpdateMenu(); }], 'Cancel']);
-		};
-		a.textContent = 'Edit';
-		div.appendChild(a);
-		const label = document.createElement('label');
-		label.textContent = Config[config].desc;
-		div.appendChild(label);
-		return div;
-	} if (Config[config].type === 'color') {
-		div.className = '';
-		for (let i = 0; i < Colors.length; i++) {
-			const innerDiv = document.createElement('div');
-			innerDiv.className = 'listing';
-			const input = document.createElement('input');
-			input.id = Colors[i];
-			input.style.width = '65px';
-			input.setAttribute('value', CMOptions.Colors[Colors[i]]);
-			innerDiv.appendChild(input);
-			const change = function () {
-				CMOptions.Colors[this.targetElement.id] = this.toHEXString();
-				UpdateColors();
-				SaveConfig();
-				Game.UpdateMenu();
-			};
-			new JsColor(input, { hash: true, position: 'right', onInput: change });
-			const label = document.createElement('label');
-			label.textContent = Config.Colors.desc[Colors[i]];
-			innerDiv.appendChild(label);
-			div.appendChild(innerDiv);
-		}
-		jscolor.init();
-		return div;
-	} if (Config[config].type === 'numscale') {
-		const span = document.createElement('span');
-		span.className = 'option';
-		span.textContent = `${Config[config].label} `;
-		div.appendChild(span);
-		const input = document.createElement('input');
-		input.id = ConfigPrefix + config;
-		input.className = 'option';
-		input.type = 'number';
-		input.value = (CMOptions[config]);
-		input.min = Config[config].min;
-		input.max = Config[config].max;
-		input.oninput = function () {
-			if (this.value > this.max) console.log('TEST');
-			CMOptions[config] = this.value;
-			SaveConfig();
-			RefreshScale();
-		};
-		div.appendChild(input);
-		div.appendChild(document.createTextNode(' '));
-		const label = document.createElement('label');
-		label.textContent = Config[config].desc;
-		div.appendChild(label);
-		return div;
-	}
-	return div;
-}
-
-/**
- * This function adds the options/settings of CookieMonster to the options page
- * It is called by CM.Disp.AddMenu
- * @param {object} title	On object that includes the title of the menu
- */
-export default function AddMenuPref(title) {
-	const frag = document.createDocumentFragment();
-	frag.appendChild(title);
-
-	for (const group of Object.keys(ConfigGroups)) {
-		const groupObject = CreatePrefHeader(group, ConfigGroups[group]); // (group, display-name of group)
-		frag.appendChild(groupObject);
-		if (CMOptions.Header[group]) { // 0 is show, 1 is collapsed
-			// Make sub-sections of Notification section
-			if (group === 'Notification') {
-				for (const subGroup of Object.keys(ConfigGroupsNotification)) {
-					const subGroupObject = CreatePrefHeader(subGroup, ConfigGroupsNotification[subGroup]); // (group, display-name of group)
-					subGroupObject.style.fontSize = '15px';
-					subGroupObject.style.opacity = '0.5';
-					frag.appendChild(subGroupObject);
-					if (CMOptions.Header[subGroup]) {
-						for (const option in Config) {
-							if (Config[option].group === subGroup) frag.appendChild(CreatePrefOption(option));
-						}
-					}
-				}
-			} else {
-				for (const option of Object.keys(Config)) {
-					if (Config[option].group === group) frag.appendChild(CreatePrefOption(option));
-				}
-			}
-		}
-	}
-
-	const resDef = document.createElement('div');
-	resDef.className = 'listing';
-	const resDefBut = document.createElement('a');
-	resDefBut.className = 'option';
-	resDefBut.onclick = function () { LoadConfig(ConfigDefault); };
-	resDefBut.textContent = 'Restore Default';
-	resDef.appendChild(resDefBut);
-	frag.appendChild(resDef);
-
-	l('menu').childNodes[2].insertBefore(frag, l('menu').childNodes[2].childNodes[l('menu').childNodes[2].childNodes.length - 1]);
-}

src/Disp/MenuSections/Statistics/AddStatsPage.js

@@ -0,0 +1,198 @@
+/** Main function to create the sections of Cookie Monster on the Statistics page */
+
+import { AddMissingUpgrades } from './CreateMissingUpgrades';
+import * as CreateSections from './CreateStatsSections';
+import * as CreateElements from './CreateDOMElements';
+import * as GameData from '../../../Data/Gamedata';
+import { CMOptions } from '../../../Config/VariablesAndData';
+
+import {
+  CacheAverageClicks,
+  CacheAverageCookiesFromClicks,
+  CacheWrinklersFattest,
+  CacheWrinklersNormal,
+  CacheWrinklersTotal,
+} from '../../../Cache/VariablesAndData';
+import PopAllNormalWrinklers from '../../HelperFunctions/PopWrinklers';
+import { ClickTimes, CookieTimes } from '../../VariablesAndData';
+import GetCPS from '../../HelperFunctions/GetCPS';
+import { Beautify } from '../../BeautifyAndFormatting/BeautifyFormatting';
+import AddMissingAchievements from './CreateMissingAchievements';
+
+/**
+ * This function adds stats created by CookieMonster to the stats page
+ * It is called by CM.Disp.AddMenu
+ * @param {object} title	On object that includes the title of the menu
+ */
+export default function AddMenuStats(title) {
+  const stats = document.createElement('div');
+  stats.className = 'subsection';
+  stats.appendChild(title);
+
+  stats.appendChild(CreateElements.StatsHeader('Lucky Cookies', 'Lucky'));
+  if (CMOptions.Header.Lucky) {
+    stats.appendChild(CreateSections.LuckySection());
+  }
+
+  stats.appendChild(CreateElements.StatsHeader('Chain Cookies', 'Chain'));
+  if (CMOptions.Header.Chain) {
+    stats.appendChild(CreateSections.ChainSection());
+  }
+
+  if (Game.Objects['Wizard tower'].minigameLoaded) {
+    stats.appendChild(CreateElements.StatsHeader('Spells', 'Spells'));
+    if (CMOptions.Header.Spells) {
+      stats.appendChild(CreateSections.SpellsSection());
+    }
+  }
+
+  if (Game.Objects.Farm.minigameLoaded) {
+    stats.appendChild(CreateElements.StatsHeader('Garden', 'Garden'));
+    if (CMOptions.Header.Garden) {
+      stats.appendChild(CreateSections.GardenSection());
+    }
+  }
+
+  stats.appendChild(CreateElements.StatsHeader('Prestige', 'Prestige'));
+  if (CMOptions.Header.Prestige) {
+    stats.appendChild(CreateSections.PrestigeSection());
+  }
+
+  if (Game.cpsSucked > 0) {
+    stats.appendChild(CreateElements.StatsHeader('Wrinklers', 'Wrink'));
+    if (CMOptions.Header.Wrink) {
+      const popAllFrag = document.createDocumentFragment();
+      popAllFrag.appendChild(
+        document.createTextNode(
+          `${Beautify(CacheWrinklersTotal)} / ${Beautify(
+            CacheWrinklersNormal,
+          )} `,
+        ),
+      );
+      const popAllA = document.createElement('a');
+      popAllA.textContent = 'Pop All Normal';
+      popAllA.className = 'option';
+      popAllA.onclick = function () {
+        PopAllNormalWrinklers();
+      };
+      popAllFrag.appendChild(popAllA);
+      stats.appendChild(
+        CreateElements.StatsListing(
+          'basic',
+          'Rewards of Popping (All/Normal)',
+          popAllFrag,
+        ),
+      );
+      const popFattestFrag = document.createDocumentFragment();
+      popFattestFrag.appendChild(
+        document.createTextNode(`${Beautify(CacheWrinklersFattest[0])} `),
+      );
+      const popFattestA = document.createElement('a');
+      popFattestA.textContent = 'Pop Single Fattest';
+      popFattestA.className = 'option';
+      popFattestA.onclick = function () {
+        if (CacheWrinklersFattest[1] !== null)
+          Game.wrinklers[CacheWrinklersFattest[1]].hp = 0;
+      };
+      popFattestFrag.appendChild(popFattestA);
+      stats.appendChild(
+        CreateElements.StatsListing(
+          'basic',
+          `Rewards of Popping Single Fattest Non-Shiny Wrinkler (id: ${
+            CacheWrinklersFattest[1] !== null
+              ? CacheWrinklersFattest[1]
+              : 'None'
+          })`,
+          popFattestFrag,
+        ),
+      );
+    }
+  }
+
+  stats.appendChild(CreateSections.SeasonSection());
+
+  stats.appendChild(CreateElements.StatsHeader('Miscellaneous', 'Misc'));
+  if (CMOptions.Header.Misc) {
+    stats.appendChild(
+      CreateElements.StatsListing(
+        'basic',
+        `Average cookies per second (past ${
+          CookieTimes[CMOptions.AvgCPSHist] < 60
+            ? `${CookieTimes[CMOptions.AvgCPSHist]} seconds`
+            : CookieTimes[CMOptions.AvgCPSHist] / 60 +
+              (CMOptions.AvgCPSHist === 3 ? ' minute' : ' minutes')
+        })`,
+        document.createTextNode(Beautify(GetCPS(), 3)),
+      ),
+    );
+    stats.appendChild(
+      CreateElements.StatsListing(
+        'basic',
+        `Average cookie clicks per second (past ${
+          ClickTimes[CMOptions.AvgClicksHist]
+        }${CMOptions.AvgClicksHist === 0 ? ' second' : ' seconds'})`,
+        document.createTextNode(Beautify(CacheAverageClicks, 1)),
+      ),
+    );
+    stats.appendChild(
+      CreateElements.StatsListing(
+        'basic',
+        `Cookies from clicking (past ${ClickTimes[CMOptions.AvgClicksHist]}${
+          CMOptions.AvgClicksHist === 0 ? ' second' : ' seconds'
+        })`,
+        document.createTextNode(
+          Beautify(
+            CacheAverageCookiesFromClicks.calcSum(
+              CacheAverageClicks * ClickTimes[CMOptions.AvgClicksHist],
+            ),
+          ),
+        ),
+      ),
+    );
+    if (Game.Has('Fortune cookies')) {
+      const fortunes = [];
+      Object.keys(GameData.Fortunes).forEach((i) => {
+        if (!Game.Has(GameData.Fortunes[i])) {
+          fortunes.push(GameData.Fortunes[i]);
+        }
+      });
+      if (fortunes.length !== 0)
+        stats.appendChild(
+          CreateElements.StatsListing(
+            'basic',
+            'Fortune Upgrades Left to Buy',
+            CreateElements.StatsMissDisp(fortunes),
+          ),
+        );
+    }
+    if (CMOptions.ShowMissedGC) {
+      stats.appendChild(
+        CreateElements.StatsListing(
+          'basic',
+          'Missed golden cookies',
+          document.createTextNode(Beautify(Game.missedGoldenClicks)),
+        ),
+      );
+    }
+    if (Game.prefs.autosave) {
+      const timer = document.createElement('span');
+      timer.id = 'CMStatsAutosaveTimer';
+      timer.innerText = Game.sayTime(
+        Game.fps * 60 - (Game.OnAscend ? 0 : Game.T % (Game.fps * 60)),
+        4,
+      );
+      stats.appendChild(
+        CreateElements.StatsListing('basic', 'Time till autosave', timer),
+      );
+    }
+  }
+
+  l('menu').insertBefore(stats, l('menu').childNodes[2]);
+
+  if (CMOptions.MissingUpgrades) {
+    AddMissingUpgrades();
+  }
+  if (CMOptions.MissingAchievements) {
+    AddMissingAchievements();
+  }
+}

src/Disp/MenuSections/Statistics/CreateDOMElements.js

@@ -0,0 +1,135 @@
+/** Section: Functions related to the creation of basic DOM elements page */
+
+import { ToggleHeader } from '../../../Config/ToggleSetting';
+import { CMOptions } from '../../../Config/VariablesAndData';
+import { SimpleTooltipElements } from '../../VariablesAndData';
+
+/**
+ * This function creates a header-object for the stats page
+ * It is called by CM.Disp.AddMenuStats()
+ * @param 	{string}		config	The name of the Config-group
+ * @param 	{string}		text	The to-be displayed name of the header
+ * @returns	{object}		div		The header object
+ */
+export function StatsHeader(text, config) {
+  const div = document.createElement('div');
+  div.className = 'title';
+  div.style.padding = '0px 16px';
+  div.style.opacity = '0.7';
+  div.style.fontSize = '17px';
+  div.style.fontFamily = '"Kavoon", Georgia, serif';
+  div.appendChild(document.createTextNode(`${text} `));
+  const span = document.createElement('span');
+  span.style.cursor = 'pointer';
+  span.style.display = 'inline-block';
+  span.style.height = '14px';
+  span.style.width = '14px';
+  span.style.borderRadius = '7px';
+  span.style.textAlign = 'center';
+  span.style.backgroundColor = '#C0C0C0';
+  span.style.color = 'black';
+  span.style.fontSize = '13px';
+  span.style.verticalAlign = 'middle';
+  span.textContent = CMOptions.Header[config] ? '-' : '+';
+  span.onclick = function () {
+    ToggleHeader(config);
+    Game.UpdateMenu();
+  };
+  div.appendChild(span);
+  return div;
+}
+
+/**
+ * This function creates an stats-listing-object for the stats page
+ * It is called by CM.Disp.AddMenuStats()
+ * @param 	{string}		type		The type fo the listing
+ * @param 	{string}		name		The name of the option
+ * @param 	{object}		text		The text-object of the option
+ * @param 	{string}		placeholder	The id of the to-be displayed tooltip if applicable
+ * @returns	{object}		div			The option object
+ */
+export function StatsListing(type, name, text, placeholder) {
+  const div = document.createElement('div');
+  div.className = 'listing';
+
+  const listingName = document.createElement('b');
+  listingName.textContent = name;
+  div.appendChild(listingName);
+  if (type === 'withTooltip') {
+    div.className = 'listing';
+    div.appendChild(document.createTextNode(' '));
+
+    const tooltip = document.createElement('span');
+    tooltip.onmouseout = function () {
+      Game.tooltip.hide();
+    };
+    tooltip.onmouseover = function () {
+      Game.tooltip.draw(
+        this,
+        escape(SimpleTooltipElements[placeholder].innerHTML),
+      );
+    };
+    tooltip.style.cursor = 'default';
+    tooltip.style.display = 'inline-block';
+    tooltip.style.height = '10px';
+    tooltip.style.width = '10px';
+    tooltip.style.borderRadius = '5px';
+    tooltip.style.textAlign = 'center';
+    tooltip.style.backgroundColor = '#C0C0C0';
+    tooltip.style.color = 'black';
+    tooltip.style.fontSize = '9px';
+    tooltip.style.verticalAlign = 'bottom';
+    tooltip.textContent = '?';
+    div.appendChild(tooltip);
+  }
+  div.appendChild(document.createTextNode(': '));
+  div.appendChild(text);
+  return div;
+}
+
+/**
+ * This function creates a tooltip containing all missing holiday items contained in the list theMissDisp
+ * @param 	{list}			theMissDisp		A list of the missing holiday items
+ * @returns	{object}		frag			The tooltip object
+ */
+export function StatsMissDisp(theMissDisp) {
+  const frag = document.createDocumentFragment();
+  frag.appendChild(document.createTextNode(`${theMissDisp.length} `));
+  const span = document.createElement('span');
+  span.onmouseout = function () {
+    Game.tooltip.hide();
+  };
+  const placeholder = document.createElement('div');
+  const missing = document.createElement('div');
+  missing.style.minWidth = '140px';
+  missing.style.marginBottom = '4px';
+  const title = document.createElement('div');
+  title.className = 'name';
+  title.style.marginBottom = '4px';
+  title.style.textAlign = 'center';
+  title.textContent = 'Missing';
+  missing.appendChild(title);
+  Object.keys(theMissDisp).forEach((i) => {
+    const div = document.createElement('div');
+    div.style.textAlign = 'center';
+    div.appendChild(document.createTextNode(theMissDisp[i]));
+    missing.appendChild(div);
+  });
+  placeholder.appendChild(missing);
+  span.onmouseover = function () {
+    Game.tooltip.draw(this, escape(placeholder.innerHTML));
+  };
+  span.style.cursor = 'default';
+  span.style.display = 'inline-block';
+  span.style.height = '10px';
+  span.style.width = '10px';
+  span.style.borderRadius = '5px';
+  span.style.textAlign = 'center';
+  span.style.backgroundColor = '#C0C0C0';
+  span.style.color = 'black';
+  span.style.fontSize = '9px';
+  span.style.verticalAlign = 'bottom';
+  span.textContent = '?';
+  frag.appendChild(span);
+  return frag;
+}

src/Disp/MenuSections/Statistics/CreateMissingAchievements.js

@@ -0,0 +1,86 @@
+import { CMOptions } from '../../../Config/VariablesAndData';
+
+function CrateTooltipLockedAchievements(me) {
+  const tags = [];
+  if (me.pool === 'shadow') tags.push('Shadow Achievement', '#9700cf');
+  else tags.push('Achievement', 0);
+  tags.push('Locked', 0);
+
+  let neuromancy = 0;
+  if (Game.Has('Neuromancy') || (Game.sesame && me.pool === 'debug'))
+    neuromancy = 1;
+  if (neuromancy && me.won === 0) tags.push('Click to win!', '#00c462');
+  else if (neuromancy && me.won > 0) tags.push('Click to lose!', '#00c462');
+
+  let { icon } = me;
+  if (me.iconFunction) icon = me.iconFunction();
+
+  let { desc } = me;
+  if (me.descFunc) desc = me.descFunc('stats');
+
+  let tagsStr = '';
+  for (let i = 0; i < tags.length; i += 2) {
+    if (i % 2 === 0)
+      tagsStr += ` <div class="tag" style="color:${
+        tags[i + 1] === 0 ? '#fff' : tags[i + 1]
+      };">[${tags[i]}]</div>`;
+  }
+  tagsStr = tagsStr.substring(1);
+
+  return `<div style="padding:8px 4px;min-width:350px;opacity:0.5">
+  <div class="icon" style="float:left;margin-left:-8px;margin-top:-8px;background-position:${
+    -icon[0] * 48
+  }px ${-icon[1] * 48}px;"></div>
+  <div class="name">${me.name}</div>
+  ${tagsStr}<div class="line"></div><div class="description">${desc}</div></div>
+  ${
+    Game.sesame
+      ? `<div style="font-size:9px;">Id : ${me.id} | Order : ${Math.floor(
+          me.order,
+        )}${me.tier ? ` | Tier : ${me.tier}` : ''}</div>`
+      : ''
+  }`;
+}
+
+/**
+ * This function overwrites the crates of missing achievements
+ */
+export default function AddMissingAchievements() {
+  let achievs;
+  Object.values(document.querySelectorAll('div.title')).forEach((i) => {
+    if (i.textContent.includes('Achievements')) {
+      achievs = i.parentElement.querySelectorAll('div.listing.crateBox')[0];
+    }
+  });
+  if (CMOptions.MissingAchievements) {
+    Object.values(achievs.children).forEach((achievsCrate) => {
+      if (!achievsCrate.className.includes('enabled')) {
+        const id = achievsCrate.onclick.toString().match(/(?<=\[).*(?=\])/g)[0];
+        const { icon } = Game.AchievementsById[id];
+        // eslint-disable-next-line no-param-reassign
+        achievsCrate.style.backgroundPosition = `${-icon[0] * 48}px ${
+          -icon[1] * 48
+        }px`;
+        // eslint-disable-next-line no-param-reassign
+        achievsCrate.onmouseover = function () {
+          if (!Game.mouseDown) {
+            Game.setOnCrate(this);
+            Game.tooltip.dynamic = 1;
+            Game.tooltip.draw(
+              this,
+              function () {
+                return (function () {
+                  return CrateTooltipLockedAchievements(
+                    Game.AchievementsById[id],
+                  );
+                })();
+              },
+              'top',
+            );
+            Game.tooltip.wobble();
+          }
+        };
+      }
+    });
+  }
+}

src/Disp/MenuSections/Statistics/CreateMissingUpgrades.js

@@ -0,0 +1,111 @@
+/** Functions related to displaying the missing upgrades in the Statistics page */
+
+import {
+  CacheMissingUpgrades,
+  CacheMissingUpgradesCookies,
+  CacheMissingUpgradesPrestige,
+} from '../../../Cache/VariablesAndData';
+
+/**
+ * This function creates the missing upgrades sections for prestige, normal and cookie upgrades
+ */
+export function AddMissingUpgrades() {
+  l('menu').childNodes.forEach((menuSection) => {
+    if (menuSection.children[0]) {
+      if (
+        menuSection.children[0].innerHTML === 'Prestige' &&
+        CacheMissingUpgradesPrestige
+      ) {
+        const prestigeUpgradesMissing =
+          CacheMissingUpgradesPrestige.match(new RegExp('div', 'g') || [])
+            .length / 2;
+        const title = document.createElement('div');
+        title.id = 'CMMissingUpgradesPrestigeTitle';
+        title.className = 'listing';
+        const titlefrag = document.createElement('div');
+        titlefrag.innerHTML = `<b>Missing Prestige upgrades:</b> ${prestigeUpgradesMissing}/${
+          Game.PrestigeUpgrades.length
+        } (${Math.floor(
+          (prestigeUpgradesMissing / Game.PrestigeUpgrades.length) * 100,
+        )}%)`;
+        title.appendChild(titlefrag);
+        menuSection.appendChild(title);
+        const upgrades = document.createElement('div');
+        upgrades.className = 'listing crateBox';
+        upgrades.innerHTML = CacheMissingUpgradesPrestige;
+        menuSection.appendChild(upgrades);
+      } else if (menuSection.children[0].innerHTML === 'Upgrades') {
+        if (CacheMissingUpgrades) {
+          const normalUpgradesMissing =
+            CacheMissingUpgrades.match(new RegExp('div', 'g') || []).length / 2;
+          const title = document.createElement('div');
+          title.id = 'CMMissingUpgradesTitle';
+          title.className = 'listing';
+          const titlefrag = document.createElement('div');
+          titlefrag.innerHTML = `<b>Missing normal upgrades:</b> ${normalUpgradesMissing}/${
+            Game.UpgradesByPool[''].length + Game.UpgradesByPool.tech.length
+          } (${Math.floor(
+            (normalUpgradesMissing /
+              (Game.UpgradesByPool[''].length +
+                Game.UpgradesByPool.tech.length)) *
+              100,
+          )}%)`;
+          title.appendChild(titlefrag);
+          menuSection.insertBefore(title, menuSection.childNodes[3]);
+          const upgrades = document.createElement('div');
+          upgrades.className = 'listing crateBox';
+          upgrades.innerHTML = CacheMissingUpgrades;
+          menuSection.insertBefore(
+            upgrades,
+            document.getElementById('CMMissingUpgradesTitle').nextSibling,
+          );
+        }
+        if (CacheMissingUpgradesCookies) {
+          const cookieUpgradesMissing =
+            CacheMissingUpgradesCookies.match(new RegExp('div', 'g') || [])
+              .length / 2;
+          const title = document.createElement('div');
+          title.id = 'CMMissingUpgradesCookiesTitle';
+          title.className = 'listing';
+          const titlefrag = document.createElement('div');
+          titlefrag.innerHTML = `<b>Missing Cookie upgrades:</b> ${cookieUpgradesMissing}/${
+            Game.UpgradesByPool.cookie.length
+          } (${Math.floor(
+            (cookieUpgradesMissing / Game.UpgradesByPool.cookie.length) * 100,
+          )}%)`;
+          title.appendChild(titlefrag);
+          menuSection.appendChild(title);
+          const upgrades = document.createElement('div');
+          upgrades.className = 'listing crateBox';
+          upgrades.innerHTML = CacheMissingUpgradesCookies;
+          menuSection.appendChild(upgrades);
+        }
+      }
+    }
+  });
+}
+
+/**
+ * This function returns the "crates" (icons) for missing upgrades in the stats sections
+ * It returns a html string that gets appended to the respective CM.Cache.MissingUpgrades-variable by CM.Cache.CacheMissingUpgrades()
+ * @param	{object}	me	The upgrade object
+ * @returns	{string}	?	The HTML string that creates the icon.
+ */
+export function crateMissing(me) {
+  let classes = 'crate upgrade missing';
+  if (me.pool === 'prestige') classes += ' heavenly';
+
+  let noFrame = 0;
+  if (!Game.prefs.crates) noFrame = 1;
+  if (noFrame) classes += ' noFrame';
+
+  let { icon } = me;
+  if (me.iconFunction) icon = me.iconFunction();
+  const tooltip = `function() {return Game.crateTooltip(Game.UpgradesById[${me.id}], 'stats');}`;
+  return `<div class="${classes}"
+	${Game.getDynamicTooltip(tooltip, 'top', true)}
+	style = "${`${
+    icon[2] ? `background-image: url(${icon[2]});` : ''
+  }background-position:${-icon[0] * 48}px ${-icon[1] * 48}px`};">
+	</div>`;
+}

src/Disp/MenuSections/Statistics/CreateStatsSections.js

@@ -0,0 +1,995 @@
+/** Functions to create the individual sections of the Statistics page */
+
+import * as GameData from '../../../Data/Gamedata';
+import { MaxChainCookieReward } from '../../../Cache/Stats/ChainCookies';
+import {
+  CacheAvgCPSWithChoEgg,
+  CacheCentEgg,
+  CacheChainFrenzyMaxReward,
+  CacheChainFrenzyRequired,
+  CacheChainFrenzyRequiredNext,
+  CacheChainFrenzyWrathRequired,
+  CacheChainFrenzyWrathRequiredNext,
+  CacheChainMaxReward,
+  CacheChainRequired,
+  CacheChainRequiredNext,
+  CacheChainWrathMaxReward,
+  CacheChainWrathRequired,
+  CacheChainWrathRequiredNext,
+  CacheConjure,
+  CacheConjureReward,
+  CacheDragonsFortuneMultAdjustment,
+  CacheEdifice,
+  CacheEdificeBuilding,
+  CacheGoldenCookiesMult,
+  CacheHCPerSecond,
+  CacheLastChoEgg,
+  CacheLucky,
+  CacheLuckyFrenzy,
+  CacheLuckyReward,
+  CacheLuckyRewardFrenzy,
+  CacheLuckyWrathReward,
+  CacheLuckyWrathRewardFrenzy,
+  CacheNoGoldSwitchCookiesPS,
+  CacheRealCookiesEarned,
+  CacheSeaSpec,
+  CacheWrathCookiesMult,
+  CacheWrinklersTotal,
+} from '../../../Cache/VariablesAndData';
+import { CMOptions } from '../../../Config/VariablesAndData';
+import ResetBonus from '../../../Sim/SimulationEvents/ResetAscension';
+import {
+  Beautify,
+  FormatTime,
+} from '../../BeautifyAndFormatting/BeautifyFormatting';
+
+import GetCPS from '../../HelperFunctions/GetCPS';
+import GetWrinkConfigBank from '../../HelperFunctions/GetWrinkConfigBank';
+import { ColourGreen, ColourRed, ColourTextPre } from '../../VariablesAndData';
+import { StatsListing, StatsHeader, StatsMissDisp } from './CreateDOMElements';
+
+/**
+ * This function creates the "Lucky" section of the stats page
+ * @returns	{object}	section		The object contating the Lucky section
+ */
+export function LuckySection() {
+  // This sets which tooltip to display for certain stats
+  const goldCookTooltip = Game.auraMult("Dragon's Fortune")
+    ? 'GoldCookDragonsFortuneTooltipPlaceholder'
+    : 'GoldCookTooltipPlaceholder';
+
+  const section = document.createElement('div');
+  section.className = 'CMStatsLuckySection';
+
+  const luckyColour =
+    Game.cookies + GetWrinkConfigBank() < CacheLucky ? ColourRed : ColourGreen;
+  const luckyTime =
+    Game.cookies + GetWrinkConfigBank() < CacheLucky
+      ? FormatTime(
+          (CacheLucky - (Game.cookies + GetWrinkConfigBank())) / GetCPS(),
+        )
+      : '';
+  const luckyReqFrag = document.createDocumentFragment();
+  const luckyReqSpan = document.createElement('span');
+  luckyReqSpan.style.fontWeight = 'bold';
+  luckyReqSpan.className = ColourTextPre + luckyColour;
+  luckyReqSpan.textContent = Beautify(CacheLucky);
+  luckyReqFrag.appendChild(luckyReqSpan);
+  if (luckyTime !== '') {
+    const luckyReqSmall = document.createElement('small');
+    luckyReqSmall.textContent = ` (${luckyTime})`;
+    luckyReqFrag.appendChild(luckyReqSmall);
+  }
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Lucky!" cookies required',
+      luckyReqFrag,
+      goldCookTooltip,
+    ),
+  );
+
+  const luckyColourFrenzy =
+    Game.cookies + GetWrinkConfigBank() < CacheLuckyFrenzy
+      ? ColourRed
+      : ColourGreen;
+  const luckyTimeFrenzy =
+    Game.cookies + GetWrinkConfigBank() < CacheLuckyFrenzy
+      ? FormatTime(
+          (CacheLuckyFrenzy - (Game.cookies + GetWrinkConfigBank())) / GetCPS(),
+        )
+      : '';
+  const luckyReqFrenFrag = document.createDocumentFragment();
+  const luckyReqFrenSpan = document.createElement('span');
+  luckyReqFrenSpan.style.fontWeight = 'bold';
+  luckyReqFrenSpan.className = ColourTextPre + luckyColourFrenzy;
+  luckyReqFrenSpan.textContent = Beautify(CacheLuckyFrenzy);
+  luckyReqFrenFrag.appendChild(luckyReqFrenSpan);
+  if (luckyTimeFrenzy !== '') {
+    const luckyReqFrenSmall = document.createElement('small');
+    luckyReqFrenSmall.textContent = ` (${luckyTimeFrenzy})`;
+    luckyReqFrenFrag.appendChild(luckyReqFrenSmall);
+  }
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Lucky!" cookies required (frenzy)',
+      luckyReqFrenFrag,
+      goldCookTooltip,
+    ),
+  );
+
+  const luckySplit = CacheLuckyReward !== CacheLuckyWrathReward;
+
+  const luckyRewardMaxSpan = document.createElement('span');
+  luckyRewardMaxSpan.style.fontWeight = 'bold';
+  luckyRewardMaxSpan.className = ColourTextPre + CacheLuckyReward;
+  luckyRewardMaxSpan.textContent =
+    Beautify(CacheLuckyReward) +
+    (luckySplit ? ` / ${Beautify(CacheLuckyWrathReward)}` : '');
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      `"Lucky!" reward (max)${luckySplit ? ' (golden / wrath)' : ''}`,
+      luckyRewardMaxSpan,
+      goldCookTooltip,
+    ),
+  );
+
+  const luckyRewardFrenzyMaxSpan = document.createElement('span');
+  luckyRewardFrenzyMaxSpan.style.fontWeight = 'bold';
+  luckyRewardFrenzyMaxSpan.className = ColourTextPre + luckyRewardFrenzyMaxSpan;
+  luckyRewardFrenzyMaxSpan.textContent =
+    Beautify(CacheLuckyRewardFrenzy) +
+    (luckySplit ? ` / ${Beautify(CacheLuckyWrathRewardFrenzy)}` : '');
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      `"Lucky!" reward (max) (frenzy)${luckySplit ? ' (golden / wrath)' : ''}`,
+      luckyRewardFrenzyMaxSpan,
+      goldCookTooltip,
+    ),
+  );
+
+  const luckyCurBase =
+    Math.min(
+      (Game.cookies + GetWrinkConfigBank()) * 0.15,
+      CacheNoGoldSwitchCookiesPS * CacheDragonsFortuneMultAdjustment * 60 * 15,
+    ) + 13;
+  const luckyCurSpan = document.createElement('span');
+  luckyCurSpan.style.fontWeight = 'bold';
+  luckyCurSpan.className = ColourTextPre + luckyCurSpan;
+  luckyCurSpan.textContent =
+    Beautify(CacheGoldenCookiesMult * luckyCurBase) +
+    (luckySplit ? ` / ${Beautify(CacheWrathCookiesMult * luckyCurBase)}` : '');
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      `"Lucky!" reward (cur)${luckySplit ? ' (golden / wrath)' : ''}`,
+      luckyCurSpan,
+      goldCookTooltip,
+    ),
+  );
+  return section;
+}
+
+/**
+ * This function creates the "Chain" section of the stats page
+ * @returns	{object}	section		The object contating the Chain section
+ */
+export function ChainSection() {
+  // This sets which tooltip to display for certain stats
+  const goldCookTooltip = Game.auraMult("Dragon's Fortune")
+    ? 'GoldCookDragonsFortuneTooltipPlaceholder'
+    : 'GoldCookTooltipPlaceholder';
+
+  const section = document.createElement('div');
+  section.className = 'CMStatsChainSection';
+
+  const chainColour =
+    Game.cookies + GetWrinkConfigBank() < CacheChainRequired
+      ? ColourRed
+      : ColourGreen;
+  const chainTime =
+    Game.cookies + GetWrinkConfigBank() < CacheChainRequired
+      ? FormatTime(
+          (CacheChainRequired - (Game.cookies + GetWrinkConfigBank())) /
+            GetCPS(),
+        )
+      : '';
+  const chainReqFrag = document.createDocumentFragment();
+  const chainReqSpan = document.createElement('span');
+  chainReqSpan.style.fontWeight = 'bold';
+  chainReqSpan.className = ColourTextPre + chainColour;
+  chainReqSpan.textContent = Beautify(CacheChainRequired);
+  chainReqFrag.appendChild(chainReqSpan);
+  if (chainTime !== '') {
+    const chainReqSmall = document.createElement('small');
+    chainReqSmall.textContent = ` (${chainTime})`;
+    chainReqFrag.appendChild(chainReqSmall);
+  }
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Chain" cookies required',
+      chainReqFrag,
+      goldCookTooltip,
+    ),
+  );
+
+  const chainWrathColour =
+    Game.cookies + GetWrinkConfigBank() < CacheChainWrathRequired
+      ? ColourRed
+      : ColourGreen;
+  const chainWrathTime =
+    Game.cookies + GetWrinkConfigBank() < CacheChainWrathRequired
+      ? FormatTime(
+          (CacheChainWrathRequired - (Game.cookies + GetWrinkConfigBank())) /
+            GetCPS(),
+        )
+      : '';
+  const chainWrathReqFrag = document.createDocumentFragment();
+  const chainWrathReqSpan = document.createElement('span');
+  chainWrathReqSpan.style.fontWeight = 'bold';
+  chainWrathReqSpan.className = ColourTextPre + chainWrathColour;
+  chainWrathReqSpan.textContent = Beautify(CacheChainWrathRequired);
+  chainWrathReqFrag.appendChild(chainWrathReqSpan);
+  if (chainWrathTime !== '') {
+    const chainWrathReqSmall = document.createElement('small');
+    chainWrathReqSmall.textContent = ` (${chainWrathTime})`;
+    chainWrathReqFrag.appendChild(chainWrathReqSmall);
+  }
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Chain" cookies required (Wrath)',
+      chainWrathReqFrag,
+      goldCookTooltip,
+    ),
+  );
+
+  const chainColourFrenzy =
+    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyRequired
+      ? ColourRed
+      : ColourGreen;
+  const chainTimeFrenzy =
+    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyRequired
+      ? FormatTime(
+          (CacheChainFrenzyRequired - (Game.cookies + GetWrinkConfigBank())) /
+            GetCPS(),
+        )
+      : '';
+  const chainReqFrenFrag = document.createDocumentFragment();
+  const chainReqFrenSpan = document.createElement('span');
+  chainReqFrenSpan.style.fontWeight = 'bold';
+  chainReqFrenSpan.className = ColourTextPre + chainColourFrenzy;
+  chainReqFrenSpan.textContent = Beautify(CacheChainFrenzyRequired);
+  chainReqFrenFrag.appendChild(chainReqFrenSpan);
+  if (chainTimeFrenzy !== '') {
+    const chainReqFrenSmall = document.createElement('small');
+    chainReqFrenSmall.textContent = ` (${chainTimeFrenzy})`;
+    chainReqFrenFrag.appendChild(chainReqFrenSmall);
+  }
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Chain" cookies required (Frenzy)',
+      chainReqFrenFrag,
+      goldCookTooltip,
+    ),
+  );
+
+  const chainWrathColourFrenzy =
+    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyWrathRequired
+      ? ColourRed
+      : ColourGreen;
+  const chainWrathTimeFrenzy =
+    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyWrathRequired
+      ? FormatTime(
+          (CacheChainFrenzyWrathRequired -
+            (Game.cookies + GetWrinkConfigBank())) /
+            GetCPS(),
+        )
+      : '';
+  const chainWrathReqFrenFrag = document.createDocumentFragment();
+  const chainWrathReqFrenSpan = document.createElement('span');
+  chainWrathReqFrenSpan.style.fontWeight = 'bold';
+  chainWrathReqFrenSpan.className = ColourTextPre + chainWrathColourFrenzy;
+  chainWrathReqFrenSpan.textContent = Beautify(CacheChainFrenzyWrathRequired);
+  chainWrathReqFrenFrag.appendChild(chainWrathReqFrenSpan);
+  if (chainWrathTimeFrenzy !== '') {
+    const chainWrathReqFrenSmall = document.createElement('small');
+    chainWrathReqFrenSmall.textContent = ` (${chainWrathTimeFrenzy})`;
+    chainWrathReqFrenFrag.appendChild(chainWrathReqFrenSmall);
+  }
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Chain" cookies required (frenzy) (Wrath)',
+      chainWrathReqFrenFrag,
+      goldCookTooltip,
+    ),
+  );
+
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Chain" reward (max) (golden / wrath)',
+      document.createTextNode(
+        `${Beautify(CacheChainMaxReward[0])} / ${Beautify(
+          CacheChainWrathMaxReward[0],
+        )}`,
+      ),
+      goldCookTooltip,
+    ),
+  );
+
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Chain" reward (max) (frenzy) (golden / wrath)',
+      document.createTextNode(
+        `${Beautify(CacheChainFrenzyMaxReward[0])} / ${Beautify(
+          CacheChainFrenzyMaxReward[0],
+        )}`,
+      ),
+      goldCookTooltip,
+    ),
+  );
+
+  const chainCurMax = Math.min(
+    Game.cookiesPs * 60 * 60 * 6 * CacheDragonsFortuneMultAdjustment,
+    Game.cookies * 0.5,
+  );
+  const chainCur = MaxChainCookieReward(
+    7,
+    chainCurMax,
+    CacheGoldenCookiesMult,
+  )[0];
+  const chainCurWrath = MaxChainCookieReward(
+    6,
+    chainCurMax,
+    CacheWrathCookiesMult,
+  )[0];
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Chain" reward (cur) (golden / wrath)',
+      document.createTextNode(
+        `${Beautify(chainCur)} / ${Beautify(chainCurWrath)}`,
+      ),
+      goldCookTooltip,
+    ),
+  );
+
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      'CPS needed for next level (g / w)',
+      document.createTextNode(
+        `${Beautify(CacheChainRequiredNext)} / ${Beautify(
+          CacheChainWrathRequiredNext,
+        )}`,
+      ),
+      'ChainNextLevelPlaceholder',
+    ),
+  );
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      'CPS needed for next level (frenzy) (g / w)',
+      document.createTextNode(
+        `${Beautify(CacheChainFrenzyRequiredNext)} / ${Beautify(
+          CacheChainFrenzyWrathRequiredNext,
+        )}`,
+      ),
+      'ChainNextLevelPlaceholder',
+    ),
+  );
+  return section;
+}
+
+/**
+ * This function creates the "Spells" section of the stats page
+ * @returns	{object}	section		The object contating the Spells section
+ */
+export function SpellsSection() {
+  const section = document.createElement('div');
+  section.className = 'CMStatsSpellsSection';
+
+  const conjureColour =
+    Game.cookies + GetWrinkConfigBank() < CacheConjure
+      ? ColourRed
+      : ColourGreen;
+  const conjureTime =
+    Game.cookies + GetWrinkConfigBank() < CacheConjure
+      ? FormatTime(
+          (CacheConjure - (Game.cookies + GetWrinkConfigBank())) / GetCPS(),
+        )
+      : '';
+
+  const conjureReqFrag = document.createDocumentFragment();
+  const conjureReqSpan = document.createElement('span');
+  conjureReqSpan.style.fontWeight = 'bold';
+  conjureReqSpan.className = ColourTextPre + conjureColour;
+  conjureReqSpan.textContent = Beautify(CacheConjure);
+  conjureReqFrag.appendChild(conjureReqSpan);
+  if (conjureTime !== '') {
+    const conjureReqSmall = document.createElement('small');
+    conjureReqSmall.textContent = ` (${conjureTime})`;
+    conjureReqFrag.appendChild(conjureReqSmall);
+  }
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Conjure Baked Goods" cookies required',
+      conjureReqFrag,
+      'GoldCookTooltipPlaceholder',
+    ),
+  );
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Conjure Baked Goods" reward (max)',
+      document.createTextNode(Beautify(CacheConjureReward)),
+      'GoldCookTooltipPlaceholder',
+    ),
+  );
+
+  const conjureFrenzyColour =
+    Game.cookies + GetWrinkConfigBank() < CacheConjure * 7
+      ? ColourRed
+      : ColourGreen;
+  const conjureFrenzyCur = Math.min(
+    (Game.cookies + GetWrinkConfigBank()) * 0.15,
+    CacheNoGoldSwitchCookiesPS * 60 * 30,
+  );
+  const conjureFrenzyTime =
+    Game.cookies + GetWrinkConfigBank() < CacheConjure * 7
+      ? FormatTime(
+          (CacheConjure * 7 - (Game.cookies + GetWrinkConfigBank())) / GetCPS(),
+        )
+      : '';
+
+  const conjureFrenzyReqFrag = document.createDocumentFragment();
+  const conjureFrenzyReqSpan = document.createElement('span');
+  conjureFrenzyReqSpan.style.fontWeight = 'bold';
+  conjureFrenzyReqSpan.className = ColourTextPre + conjureFrenzyColour;
+  conjureFrenzyReqSpan.textContent = Beautify(CacheConjure * 7);
+  conjureFrenzyReqFrag.appendChild(conjureFrenzyReqSpan);
+  if (conjureFrenzyTime !== '') {
+    const conjureFrenzyReqSmall = document.createElement('small');
+    conjureFrenzyReqSmall.textContent = ` (${conjureFrenzyTime})`;
+    conjureFrenzyReqFrag.appendChild(conjureFrenzyReqSmall);
+  }
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Conjure Baked Goods" cookies required (frenzy)',
+      conjureFrenzyReqFrag,
+      'GoldCookTooltipPlaceholder',
+    ),
+  );
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Conjure Baked Goods" reward (max) (frenzy)',
+      document.createTextNode(Beautify(CacheConjureReward * 7)),
+      'GoldCookTooltipPlaceholder',
+    ),
+  );
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      '"Conjure Baked Goods" reward (cur)',
+      document.createTextNode(Beautify(conjureFrenzyCur)),
+      'GoldCookTooltipPlaceholder',
+    ),
+  );
+  if (CacheEdifice) {
+    section.appendChild(
+      StatsListing(
+        'withTooltip',
+        '"Spontaneous Edifice" cookies required (most expensive building)',
+        document.createTextNode(
+          `${Beautify(CacheEdifice)} (${CacheEdificeBuilding})`,
+        ),
+        'GoldCookTooltipPlaceholder',
+      ),
+    );
+  }
+  return section;
+}
+
+/**
+ * This function creates the "Garden" section of the stats page
+ * @returns	{object}	section		The object contating the Spells section
+ */
+export function GardenSection() {
+  const section = document.createElement('div');
+  section.className = 'CMStatsGardenSection';
+
+  const bakeberryColour =
+    Game.cookies < Game.cookiesPs * 60 * 10 * 100 ? ColourRed : ColourGreen;
+  const bakeberryFrag = document.createElement('span');
+  bakeberryFrag.style.fontWeight = 'bold';
+  bakeberryFrag.className = ColourTextPre + bakeberryColour;
+  bakeberryFrag.textContent = Beautify(Game.cookiesPs * 60 * 10 * 100);
+  section.appendChild(
+    StatsListing(
+      'basic',
+      'Cookies required for max reward of Bakeberry: ',
+      bakeberryFrag,
+    ),
+  );
+
+  const chocorootColour =
+    Game.cookies < Game.cookiesPs * 60 * 100 ? ColourRed : ColourGreen;
+  const chocorootFrag = document.createElement('span');
+  chocorootFrag.style.fontWeight = 'bold';
+  chocorootFrag.className = ColourTextPre + chocorootColour;
+  chocorootFrag.textContent = Beautify(Game.cookiesPs * 60 * 100);
+  section.appendChild(
+    StatsListing(
+      'basic',
+      'Cookies required for max reward of Chocoroot: ',
+      chocorootFrag,
+    ),
+  );
+
+  const queenbeetColour =
+    Game.cookies < Game.cookiesPs * 60 * 60 * 25 ? ColourRed : ColourGreen;
+  const queenbeetFrag = document.createElement('span');
+  queenbeetFrag.style.fontWeight = 'bold';
+  queenbeetFrag.className = ColourTextPre + queenbeetColour;
+  queenbeetFrag.textContent = Beautify(Game.cookiesPs * 60 * 60 * 25);
+  section.appendChild(
+    StatsListing(
+      'basic',
+      'Cookies required for max reward of Queenbeet: ',
+      queenbeetFrag,
+    ),
+  );
+
+  const duketaterColour =
+    Game.cookies < Game.cookiesPs * 60 * 15 * 100 ? ColourRed : ColourGreen;
+  const duketaterFrag = document.createElement('span');
+  duketaterFrag.style.fontWeight = 'bold';
+  duketaterFrag.className = ColourTextPre + duketaterColour;
+  duketaterFrag.textContent = Beautify(Game.cookiesPs * 60 * 15 * 100);
+  section.appendChild(
+    StatsListing(
+      'basic',
+      'Cookies required for max reward of Duketater: ',
+      duketaterFrag,
+    ),
+  );
+  const missingPlantDrops = [];
+  Object.keys(GameData.PlantDrops).forEach((i) => {
+    if (!Game.HasUnlocked(GameData.PlantDrops[i])) {
+      missingPlantDrops.push(GameData.PlantDrops[i]);
+    }
+  });
+  if (missingPlantDrops.length !== 0) {
+    section.appendChild(
+      StatsListing(
+        'basic',
+        'Rare plant drops left to unlock',
+        StatsMissDisp(missingPlantDrops),
+      ),
+    );
+  }
+  return section;
+}
+
+/**
+ * This function creates the "Prestige" section of the stats page
+ * @returns	{object}	section		The object contating the Prestige section
+ */
+export function PrestigeSection() {
+  const section = document.createElement('div');
+  section.className = 'CMStatsPrestigeSection';
+
+  const possiblePresMax = Math.floor(
+    Game.HowMuchPrestige(
+      CacheRealCookiesEarned +
+        Game.cookiesReset +
+        CacheWrinklersTotal +
+        (Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg')
+          ? CacheLastChoEgg
+          : 0),
+    ),
+  );
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      'Prestige level (cur / max)',
+      document.createTextNode(
+        `${Beautify(Game.prestige)} / ${Beautify(possiblePresMax)}`,
+      ),
+      'PrestMaxTooltipPlaceholder',
+    ),
+  );
+
+  const neededCook = Math.max(
+    0,
+    Game.HowManyCookiesReset(possiblePresMax + 1) -
+      (CacheRealCookiesEarned +
+        Game.cookiesReset +
+        CacheWrinklersTotal +
+        ((
+          Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg')
+            ? CacheLastChoEgg
+            : 0
+        )
+          ? CacheLastChoEgg
+          : 0)),
+  );
+  const cookiesNextFrag = document.createDocumentFragment();
+  cookiesNextFrag.appendChild(document.createTextNode(Beautify(neededCook)));
+  const cookiesNextSmall = document.createElement('small');
+  cookiesNextSmall.textContent = ` (${FormatTime(
+    neededCook / CacheAvgCPSWithChoEgg,
+    1,
+  )})`;
+  cookiesNextFrag.appendChild(cookiesNextSmall);
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      'Cookies to next level',
+      cookiesNextFrag,
+      'NextPrestTooltipPlaceholder',
+    ),
+  );
+
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      'Heavenly chips (cur / max)',
+      document.createTextNode(
+        `${Beautify(Game.heavenlyChips)} / ${Beautify(
+          possiblePresMax - Game.prestige + Game.heavenlyChips,
+        )}`,
+      ),
+      'HeavenChipMaxTooltipPlaceholder',
+    ),
+  );
+
+  section.appendChild(
+    StatsListing(
+      'basic',
+      'Heavenly chips per second (last 5 seconds)',
+      document.createTextNode(Beautify(CacheHCPerSecond, 2)),
+    ),
+  );
+
+  const HCTarget = Number(CMOptions.HeavenlyChipsTarget);
+  if (!Number.isNaN(HCTarget)) {
+    const CookiesTillTarget =
+      HCTarget -
+      Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned));
+    if (CookiesTillTarget > 0) {
+      section.appendChild(
+        StatsListing(
+          'basic',
+          'Heavenly chips to target set in settings (cur)',
+          document.createTextNode(Beautify(CookiesTillTarget)),
+        ),
+      );
+      section.appendChild(
+        StatsListing(
+          'basic',
+          'Time till target (cur, current 5 second average)',
+          document.createTextNode(
+            FormatTime(CookiesTillTarget / CacheHCPerSecond),
+          ),
+        ),
+      );
+    }
+  }
+
+  const resetBonus = ResetBonus(possiblePresMax);
+  const resetFrag = document.createDocumentFragment();
+  resetFrag.appendChild(document.createTextNode(Beautify(resetBonus)));
+  const increase = Math.round((resetBonus / Game.cookiesPs) * 10000);
+  if (Number.isFinite(increase) && increase !== 0) {
+    const resetSmall = document.createElement('small');
+    resetSmall.textContent = ` (${increase / 100}% of income)`;
+    resetFrag.appendChild(resetSmall);
+  }
+  section.appendChild(
+    StatsListing(
+      'withTooltip',
+      'Reset bonus income',
+      resetFrag,
+      'ResetTooltipPlaceholder',
+    ),
+  );
+
+  const currentPrestige = Math.floor(Game.HowMuchPrestige(Game.cookiesReset));
+  const willHave = Math.floor(
+    Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned),
+  );
+  const willGet = willHave - currentPrestige;
+  if (!Game.Has('Lucky digit')) {
+    let delta7 = 7 - (willHave % 10);
+    if (delta7 < 0) delta7 += 10;
+    const next7Reset = willGet + delta7;
+    const next7Total = willHave + delta7;
+    const frag7 = document.createDocumentFragment();
+    frag7.appendChild(
+      document.createTextNode(
+        `${next7Total.toLocaleString()} / ${next7Reset.toLocaleString()} (+${delta7})`,
+      ),
+    );
+    section.appendChild(
+      StatsListing('basic', 'Next "Lucky Digit" (total / reset)', frag7),
+    );
+  }
+
+  if (!Game.Has('Lucky number')) {
+    let delta777 = 777 - (willHave % 1000);
+    if (delta777 < 0) delta777 += 1000;
+    const next777Reset = willGet + delta777;
+    const next777Total = willHave + delta777;
+    const frag777 = document.createDocumentFragment();
+    frag777.appendChild(
+      document.createTextNode(
+        `${next777Total.toLocaleString()} / ${next777Reset.toLocaleString()} (+${delta777})`,
+      ),
+    );
+    section.appendChild(
+      StatsListing('basic', 'Next "Lucky Number" (total / reset)', frag777),
+    );
+  }
+
+  if (!Game.Has('Lucky payout')) {
+    let delta777777 = 777777 - (willHave % 1000000);
+    if (delta777777 < 0) delta777777 += 1000000;
+    const next777777Reset = willGet + delta777777;
+    const next777777Total = willHave + delta777777;
+    const frag777777 = document.createDocumentFragment();
+    frag777777.appendChild(
+      document.createTextNode(
+        `${next777777Total.toLocaleString()} / ${next777777Reset.toLocaleString()} (+${delta777777})`,
+      ),
+    );
+    section.appendChild(
+      StatsListing('basic', 'Next "Lucky Payout" (total / reset)', frag777777),
+    );
+  }
+
+  return section;
+}
+
+/**
+ * This function creates the "Season Specials" section of the stats page
+ * @returns	{object}	section		The object contating the Season Specials section
+ */
+export function SeasonSection() {
+  const section = document.createElement('div');
+  section.className = 'CMStatsSeasonSection';
+
+  let specDisp = false;
+  const missingHalloweenCookies = [];
+  Object.keys(GameData.HalloCookies).forEach((i) => {
+    if (!Game.Has(GameData.HalloCookies[i])) {
+      missingHalloweenCookies.push(GameData.HalloCookies[i]);
+      specDisp = true;
+    }
+  });
+  const missingChristmasCookies = [];
+  Object.keys(GameData.ChristCookies).forEach((i) => {
+    if (!Game.Has(GameData.ChristCookies[i])) {
+      missingChristmasCookies.push(GameData.ChristCookies[i]);
+      specDisp = true;
+    }
+  });
+  const missingValentineCookies = [];
+  Object.keys(GameData.ValCookies).forEach((i) => {
+    if (!Game.Has(GameData.ValCookies[i])) {
+      missingValentineCookies.push(GameData.ValCookies[i]);
+      specDisp = true;
+    }
+  });
+  const missingNormalEggs = [];
+  Object.keys(Game.eggDrops).forEach((i) => {
+    if (!Game.HasUnlocked(Game.eggDrops[i])) {
+      missingNormalEggs.push(Game.eggDrops[i]);
+      specDisp = true;
+    }
+  });
+  const missingRareEggs = [];
+  Object.keys(Game.rareEggDrops).forEach((i) => {
+    if (!Game.HasUnlocked(Game.rareEggDrops[i])) {
+      missingRareEggs.push(Game.rareEggDrops[i]);
+      specDisp = true;
+    }
+  });
+  const choEgg =
+    Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg');
+  const centEgg = Game.Has('Century egg');
+
+  if (Game.season === 'christmas' || specDisp || choEgg || centEgg) {
+    section.appendChild(StatsHeader('Season Specials', 'Sea'));
+    if (CMOptions.Header.Sea) {
+      if (missingHalloweenCookies.length !== 0) {
+        section.appendChild(
+          StatsListing(
+            'basic',
+            'Halloween cookies left to buy',
+            StatsMissDisp(missingHalloweenCookies),
+          ),
+        );
+        let failRateHalloween = 0.95;
+        if (Game.HasAchiev('Spooky cookies')) failRateHalloween = 0.8;
+        if (Game.Has('Starterror')) failRateHalloween *= 0.9;
+        failRateHalloween *= 1 / Game.dropRateMult();
+        if (Game.hasGod) {
+          const godLvl = Game.hasGod('seasons');
+          if (godLvl === 1) failRateHalloween *= 0.9;
+          else if (godLvl === 2) failRateHalloween *= 0.95;
+          else if (godLvl === 3) failRateHalloween *= 0.97;
+        }
+        const obtainedCookiesChance = missingHalloweenCookies.length / 7;
+        section.appendChild(
+          StatsListing(
+            'basic',
+            'Chance of receiving a cookie from wrinkler/shiny wrinkler',
+            document.createTextNode(
+              `${Beautify(
+                (1 - failRateHalloween) * obtainedCookiesChance * 100,
+              )}% / ${Beautify(
+                (1 - failRateHalloween * 0.9) * obtainedCookiesChance * 100,
+              )}%`,
+            ),
+          ),
+        );
+      }
+      if (missingChristmasCookies.length !== 0) {
+        section.appendChild(
+          StatsListing(
+            'basic',
+            'Christmas cookies left to buy',
+            StatsMissDisp(missingChristmasCookies),
+          ),
+        );
+        let failRateChristmas = 0.8;
+        if (Game.HasAchiev('Let it snow')) failRateChristmas = 0.6;
+        failRateChristmas *= 1 / Game.dropRateMult();
+        if (Game.Has('Starsnow')) failRateChristmas *= 0.95;
+        if (Game.hasGod) {
+          const godLvl = Game.hasGod('seasons');
+          if (godLvl === 1) failRateChristmas *= 0.9;
+          else if (godLvl === 2) failRateChristmas *= 0.95;
+          else if (godLvl === 3) failRateChristmas *= 0.97;
+        }
+        const obtainedCookiesChance = missingChristmasCookies.length / 7;
+        section.appendChild(
+          StatsListing(
+            'basic',
+            'Chance of receiving a cookie from reindeer',
+            document.createTextNode(
+              `${Beautify(
+                (1 - failRateChristmas) * obtainedCookiesChance * 100,
+              )}%`,
+            ),
+          ),
+        );
+      }
+      if (missingValentineCookies.length !== 0) {
+        section.appendChild(
+          StatsListing(
+            'basic',
+            'Valentine cookies left to buy',
+            StatsMissDisp(missingValentineCookies),
+          ),
+        );
+      }
+      const dropRateEgg = function (StartingFailRate) {
+        let failRateEgg = StartingFailRate * (1 / Game.dropRateMult());
+        if (Game.HasAchiev('Hide & seek champion')) failRateEgg *= 0.7;
+        if (Game.Has('Omelette')) failRateEgg *= 0.9;
+        if (Game.Has('Starspawn')) failRateEgg *= 0.9;
+        if (Game.hasGod) {
+          const godLvl = Game.hasGod('seasons');
+          if (godLvl === 1) failRateEgg *= 0.9;
+          else if (godLvl === 2) failRateEgg *= 0.95;
+          else if (godLvl === 3) failRateEgg *= 0.97;
+        }
+        // Calculations courtesy of @svschouw, at https://github.com/Aktanusa/CookieMonster/issues/25
+        const succesRateEgg = 1 - failRateEgg;
+        const obtainedEggs = Game.eggDrops.length - missingNormalEggs.length;
+        const obtainedRareEggs =
+          Game.rareEggDrops.length - missingRareEggs.length;
+        const pNormal1 =
+          succesRateEgg * 0.9 * (1 - obtainedEggs / Game.eggDrops.length);
+        const pRare1 =
+          succesRateEgg *
+          0.1 *
+          (1 - obtainedRareEggs / Game.rareEggDrops.length);
+        const pRedropNormal =
+          succesRateEgg * 0.9 * (obtainedEggs / Game.eggDrops.length);
+        const pRedropRare =
+          succesRateEgg * 0.1 * (obtainedRareEggs / Game.rareEggDrops.length);
+        const pRedrop = pRedropNormal + pRedropRare;
+        const pNormal2 =
+          pRedrop * 0.9 * (1 - obtainedEggs / Game.eggDrops.length);
+        const pRare2 =
+          pRedrop * 0.1 * (1 - obtainedRareEggs / Game.rareEggDrops.length);
+        return [pNormal1 + pNormal2, pRare1 + pRare2];
+      };
+      if (missingNormalEggs.length !== 0) {
+        section.appendChild(
+          StatsListing(
+            'basic',
+            'Normal easter eggs left to unlock',
+            StatsMissDisp(missingNormalEggs),
+          ),
+        );
+        section.appendChild(
+          StatsListing(
+            'basic',
+            'Chance of receiving an egg from wrinkler/golden cookie',
+            document.createTextNode(
+              `${Beautify(dropRateEgg(0.98)[0] * 100)}% / ${Beautify(
+                dropRateEgg(0.9)[0] * 100,
+              )}%`,
+            ),
+          ),
+        );
+      }
+      if (missingRareEggs.length !== 0) {
+        section.appendChild(
+          StatsListing(
+            'basic',
+            'Rare easter eggs left to unlock',
+            StatsMissDisp(missingRareEggs),
+          ),
+        );
+        section.appendChild(
+          StatsListing(
+            'basic',
+            'Chance of receiving a rare egg from wrinkler/golden cookie',
+            document.createTextNode(
+              `${Beautify(dropRateEgg(0.98)[1] * 100)}% / ${Beautify(
+                dropRateEgg(0.9)[1] * 100,
+              )}%`,
+            ),
+          ),
+        );
+      }
+
+      if (Game.season === 'christmas')
+        section.appendChild(
+          StatsListing(
+            'basic',
+            'Reindeer reward',
+            document.createTextNode(Beautify(CacheSeaSpec)),
+          ),
+        );
+      if (choEgg) {
+        section.appendChild(
+          StatsListing(
+            'withTooltip',
+            'Chocolate egg cookies',
+            document.createTextNode(Beautify(CacheLastChoEgg)),
+            'ChoEggTooltipPlaceholder',
+          ),
+        );
+      }
+      if (centEgg) {
+        section.appendChild(
+          StatsListing(
+            'basic',
+            'Century egg multiplier',
+            document.createTextNode(
+              `${Math.round((CacheCentEgg - 1) * 10000) / 100}%`,
+            ),
+          ),
+        );
+      }
+    }
+  }
+  return section;
+}

src/Disp/Notifications/Flash.js

@@ -7,19 +7,32 @@ import { isInitializing } from '../../InitSaveLoad/Variables';
  * @param	{number}	mode	Sets the intensity of the flash, used to recursively dim flash
  * 								All calls of function have use mode === 3
  * @param	{string}	config	The setting in CM.Options that is checked before creating the flash
+ * @param	{bool}    forced		Whether the sound should play regardless of settings, used to test the sound
  */
-export default function Flash(mode, config) {
+export default function Flash(mode, config, forced) {
   // The arguments check makes the sound not play upon initialization of the mod
-	if ((CMOptions[config] === 1 && mode === 3 && isInitializing === false) || mode === 1) {
-		l('CMWhiteScreen').style.opacity = '0.5';
+  if (
+    ((CMOptions[config] === 1 || forced) &&
+      mode === 3 &&
+      isInitializing === false) ||
+    mode === 1
+  ) {
+    l('CMFlashScreen').style.backgroundColor = CMOptions[`Colour${config}`];
+    l('CMFlashScreen').style.opacity = '0.5';
     if (mode === 3) {
-			l('CMWhiteScreen').style.display = 'inline';
-			setTimeout(function () { Flash(2, config); }, 1000 / Game.fps);
+      l('CMFlashScreen').style.display = 'inline';
+      setTimeout(function () {
+        Flash(2, config, true);
+      }, 1000 / Game.fps);
     } else {
-			setTimeout(function () { Flash(0, config); }, 1000 / Game.fps);
+      setTimeout(function () {
+        Flash(0, config, true);
+      }, 1000 / Game.fps);
     }
   } else if (mode === 2) {
-		l('CMWhiteScreen').style.opacity = '1';
-		setTimeout(function () { Flash(1, config); }, 1000 / Game.fps);
-	} else if (mode === 0) l('CMWhiteScreen').style.display = 'none';
+    l('CMFlashScreen').style.opacity = '1';
+    setTimeout(function () {
+      Flash(1, config, true);
+    }, 1000 / Game.fps);
+  } else if (mode === 0) l('CMFlashScreen').style.display = 'none';
 }

src/Disp/Notifications/Notification.js

@@ -10,10 +10,15 @@ import { isInitializing } from '../../InitSaveLoad/Variables';
  * @param	{string}	title			The title of the to-be created notifications
  * @param	{string}	message			The text of the to-be created notifications
  */
-export default function Notification(notifyConfig, title, message) {
+export default function CreateNotification(notifyConfig, title, message) {
   // The arguments check makes the sound not play upon initialization of the mod
-	if (CMOptions[notifyConfig] === 1 && document.visibilityState === 'hidden' && isInitializing === false) {
+  if (
+    CMOptions[notifyConfig] === 1 &&
+    document.visibilityState === 'hidden' &&
+    isInitializing === false
+  ) {
     const CookieIcon = 'https://orteil.dashnet.org/cookieclicker/favicon.ico';
+    // eslint-disable-next-line no-new
     new Notification(title, { body: message, badge: CookieIcon });
   }
 }

src/Disp/Notifications/Sound.js

@@ -7,14 +7,16 @@ import { isInitializing } from '../../InitSaveLoad/Variables';
  * @param	{variable}	url			A variable that gives the url for the sound (e.g., CM.Options.GCSoundURL)
  * @param	{string}	sndConfig	The setting in CM.Options that is checked before creating the sound
  * @param	{string}	volConfig	The setting in CM.Options that is checked to determine volume
+ * @param	{bool}    forced		Whether the sound should play regardless of settings, used to test the sound
  */
-export default function PlaySound(url, sndConfig, volConfig) {
+export default function PlaySound(url, sndConfig, volConfig, forced) {
   // The arguments check makes the sound not play upon initialization of the mod
-	if (CMOptions[sndConfig] === 1 && isInitializing === false) {
+  if ((CMOptions[sndConfig] === 1 || forced) && isInitializing === false) {
     // eslint-disable-next-line new-cap
-		const sound = new realAudio(url);
-		if (CMOptions.GeneralSound) sound.volume = (CMOptions[volConfig] / 100) * (Game.volume / 100);
-		else sound.volume = (CMOptions[volConfig] / 100);
+    const sound = new Audio(url);
+    if (CMOptions.GeneralSound)
+      sound.volume = (CMOptions[volConfig] / 100) * (Game.volume / 100);
+    else sound.volume = CMOptions[volConfig] / 100;
     sound.play();
   }
 }