Merge pull request #787 from DanielNoord/newrepo

New repository

.eslintignore

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

.eslintrc.js

@@ -1,27 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  globals: {
-    Game: 'writable',
-    l: 'readonly',
-    b64_to_utf8: 'readonly',
-    utf8_to_b64: 'readonly',
-    BeautifyAll: 'readonly',
-  },
-  extends: ['airbnb-base', 'plugin:prettier/recommended'],
-  parserOptions: {
-    ecmaVersion: 12,
-  },
-  rules: {
-    'import/no-mutable-exports': 'off',
-    'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
-    'no-new-func': 'off',
-    'func-names': 'off',
-    'no-console': 'off',
-    'no-alert': 'off',
-    'no-restricted-globals': 'off',
-    'prefer-destructuring': ['error', { object: true, array: false }],
-  },
-};

.eslintrc.json

@@ -0,0 +1,48 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "globals": {
+    "Game": "writable",
+    "l": "readonly",
+    "b64_to_utf8": "readonly",
+    "utf8_to_b64": "readonly",
+    "BeautifyAll": "readonly",
+    "PlaySound": "readonly"
+  },
+  "extends": ["airbnb-base", "prettier"],
+  "parserOptions": {
+    "ecmaVersion": 12
+  },
+  "plugins": ["@typescript-eslint"],
+  "overrides": [
+    {
+      "files": ["src/**/*.{ts,tsx}"],
+      "extends": ["plugin:@typescript-eslint/recommended"],
+      "parser": "@typescript-eslint/parser",
+      "rules": {
+        "import/extensions": "off", // To allow importing .ts without errors
+        "import/no-unresolved": "off" // To allow importing .ts without errors
+      }
+    }
+  ],
+  "ignorePatterns": ["*CookieMonster*.js", "dist/*", "node_modules/*"],
+  "rules": {
+    "import/no-mutable-exports": "off", // We need to this throughout Cookie Monster
+    "no-plusplus": [
+      "error",
+      {
+        "allowForLoopAfterthoughts": true
+      }
+    ],
+    "func-names": "off", // To allow unnamed arrow functions
+    "prefer-destructuring": [
+      "error",
+      {
+        "object": true,
+        "array": false
+      }
+    ] // Importing arrays and then destructuring them seems to fail
+  }
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -22,3 +22,5 @@ If applicable, add screenshots to help explain your problem.
 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
 ```
+**Browser**
+Please specify your current browser. This can help find/fix the bug!

.github/workflows/CI.yml

@@ -1,31 +1,32 @@
 name: CI
 on: pull_request
 jobs:
-  Check_ESLint:
+  Check_linting_test_and_build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - name: Check out repository code
+      uses: actions/checkout@v2
+    - name: Install dependencies
+      run: npm ci
     - name: Run ESLint
+      run: npx eslint src
+    - name: Run Mocha tests
+      run: npx mocha
+    - name: Check if CookieMonsterDev.js is built correctly
       run: |
-        npm install
-        npx eslint src
-  Check_main_file:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
+        npx webpack -o ./tmp --env production
+        if cmp <(head -n 2 dist/CookieMonsterDev.js) <(head -n 2 tmp/CookieMonsterDev.js); then
+            echo '### SUCCESS: CookieMonsterDev is correctly built! ###'
+        else
+            echo '### WARNING: CookieMonsterDev.js does not seem to be correct. Make sure to run "npm run build" after saving all your changes! ###'
+            exit 1
+        fi
     - name: Check if CookieMonster.js is built correctly
+      if: github.ref == 'refs/heads/master'
       run: |
-        npm install
-        npx webpack -o ./test --env production
-        if cmp <(head -n 2 dist/CookieMonster.js) <(head -n 2 test/CookieMonster.js); then
+       if cmp <(head -n 2 dist/CookieMonsterDev.js) <(head -n 2 dist/CookieMonster.js); then
             echo '### SUCCESS: CookieMonster is correctly built! ###'
         else
-            echo '### WARNING: CookieMonster.js does not seem to be correct. Make sure to run "npm run build" after saving all your changes! ###'
-            exit 1
-        fi
-        if cmp <(head -n 2 CookieMonster.js) <(head -n 2 test/CookieMonster.js); then
-            echo '### SUCCESS: CookieMonster is correctly built! ###'
-        else
-            echo '### WARNING: Make sure to move the file from the /dist folder to the main folder. Otherwise Github Pages won't notice it ###'
+            echo '### WARNING: CookieMonster.js does not seem to be correct. Make sure to copy CookieMonsterDev.js into CookieMonster.js before merging to master! ###'
             exit 1
         fi

.mocharc.json

@@ -0,0 +1,5 @@
+{
+  "recursive": true,
+  "require": ["esm", "ts-node/register"],
+  "reporter": "min"
+}

.prettierrc.json

@@ -1,5 +1,5 @@
 {
+  "printWidth": 100,
   "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 80
+  "trailingComma": "all"
 }

CookieMonster.user.js

@@ -6,14 +6,8 @@
 const readyCheck = setInterval(() => {
   const Game = unsafeWindow.Game;
 
-    if (
-        typeof Game !== "undefined" &&
-        typeof Game.ready !== "undefined" &&
-        Game.ready
-    ) {
-        Game.LoadMod(
-            "https://aktanusa.github.io/CookieMonster/CookieMonster.js"
-        );
+  if (typeof Game !== 'undefined' && typeof Game.ready !== 'undefined' && Game.ready) {
+    Game.LoadMod('https://cookiemonsterteam.github.io/CookieMonster/dist/CookieMonster.js');
     clearInterval(readyCheck);
   }
 }, 1000);

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Aktanusa
+Copyright (c) 2021 CookieMonsterTeam
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -16,7 +16,8 @@ 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 the best building to buy
 * Green: This building has the best PP

dist/CookieMonsterDev.js.LICENSE copy.txt

@@ -0,0 +1,10 @@
+/**
+ * jscolor - JavaScript Color Picker
+ *
+ * @link    http://jscolor.com
+ * @license For open source use: GPLv3
+ *          For commercial use: JSColor Commercial License
+ * @author  Jan Odvarko - East Desire
+ *
+ * See usage examples at http://jscolor.com/examples/
+ */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cookiemonster-mod",
-    "version": "2.031.6",
+  "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,13 +11,12 @@
     "Orteil"
   ],
   "scripts": {
-        "copy-file": "cp dist/CookieMonster.js CookieMonster.js",
-        "eslint-src": "eslint src",
-        "build": "run-s eslint-src pack-prod remove-comment copy-file",
+    "eslint-src": "eslint src test",
+    "build": "run-s eslint-src pack-prod test",
     "build-test": "run-s pack-dev",
     "pack-prod": "webpack --env production",
     "pack-dev": "webpack",
-        "remove-comment": "sed -i '' -e '/\\/\\/# sourceMappingURL.*/d' dist/CookieMonster.js"
+    "test": "mocha"
   },
   "repository": {
     "type": "git",
@@ -44,13 +43,22 @@
   },
   "homepage": "https://github.com/Aktanusa/CookieMonster#readme",
   "devDependencies": {
-        "eslint": "^7.19.0",
+    "@types/chai": "^4.2.16",
+    "@types/mocha": "^8.2.2",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.21.0",
+    "chai": "^4.3.4",
+    "eslint": "^7.23.0",
     "eslint-config-airbnb-base": "^14.2.1",
-        "eslint-config-prettier": "^8.1.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.22.1",
-        "eslint-plugin-prettier": "^3.3.1",
+    "esm": "^3.2.25",
+    "mocha": "^8.3.2",
     "npm-run-all": "^4.1.5",
     "prettier": "2.2.1",
+    "ts-loader": "^8.1.0",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.2.3",
     "webpack": "^5.24.4",
     "webpack-cli": "^4.5.0"
   },

src/Cache/CPS/AverageQueue.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { ClickTimes, CookieTimes } from '../../Disp/VariablesAndData';
 import {
   ChoEggDiff,
@@ -38,11 +37,7 @@ export class CMAvgQueue {
     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 - time;
-      i--
-    ) {
+    for (let i = this.queue.length - 1; i >= 0 && i > this.queue.length - 1 - time; i--) {
       ret += this.queue[i];
     }
     if (ret === 0) {
@@ -50,6 +45,14 @@ export class CMAvgQueue {
     }
     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);
+  }
 }
 
 /**
@@ -57,9 +60,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,5 +1,3 @@
-/* eslint-disable no-unused-vars */
-
 import { CMOptions } from '../../Config/VariablesAndData';
 import { ClickTimes, CookieTimes } from '../../Disp/VariablesAndData';
 import {
@@ -41,17 +39,15 @@ 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 wrinkDiffAvg = Math.max(0, CacheWrinklersTotal - CacheLastWrinkCookies) / timeDiff;
     const wrinkFattestDiffAvg =
-      Math.max(0, CacheWrinklersFattest[0] - CacheLastWrinkFattestCookies) /
-      timeDiff;
+      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++) {
@@ -78,21 +74,16 @@ 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;
+        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,9 +1,5 @@
-/* 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
@@ -23,8 +19,8 @@ export default function CacheCurrWrinklerCPS() {
     else if (godLvl === 2) godMult *= 1.1;
     else if (godLvl === 3) godMult *= 1.05;
   }
-  CacheCurrWrinklerCount = count;
-  CacheCurrWrinklerCPSMult =
+  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) *

src/Cache/CPS/GetCPSBuffMult.js

@@ -5,8 +5,7 @@
 export default function GetCPSBuffMult() {
   let mult = 1;
   Object.keys(Game.buffs).forEach((i) => {
-    if (typeof Game.buffs[i].multCpS !== 'undefined')
-      mult *= Game.buffs[i].multCpS;
+    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';
 
@@ -21,5 +20,5 @@ export default function CacheSellAllForChoEgg() {
   }
   // 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,21 +1,16 @@
-/* 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 AllAmountTillNextAchievement from './TillNextAchievement/AllAmountTillNextAchievement';
+import { CacheAverageCookiesFromClicks, HeavenlyChipsDiff } from './VariablesAndData';
 import CacheWrinklers from './Wrinklers/Wrinklers';
 
 /**
@@ -30,8 +25,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(ClickTimes[ClickTimes.length - 1] * 20); // eslint-disable-line no-unused-vars
   CacheHeavenlyChipsPS();
+  AllAmountTillNextAchievement();
   CacheAvgCPS();
   CacheIncome();
   CacheBuildingsPrices();

src/Cache/CacheLoop.js

@@ -1,5 +1,4 @@
-/* eslint-disable no-unused-vars */
-import { FormatTime } from '../Disp/BeautifyAndFormatting/BeautifyFormatting';
+import FormatTime from '../Disp/BeautifyAndFormatting/FormatTime';
 import GetCPS from '../Disp/HelperFunctions/GetCPS';
 import CacheAvgCPS from './CPS/CPS';
 import CacheCurrWrinklerCPS from './CPS/CurrWrinklerCPS';
@@ -23,9 +22,8 @@ export default function LoopCache() {
 
   const cookiesToNext =
     Game.HowManyCookiesReset(
-      Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned)) +
-        1,
+      Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned)) + 1,
     ) -
     (Game.cookiesEarned + Game.cookiesReset);
-  CacheTimeTillNextPrestige = FormatTime(cookiesToNext / GetCPS());
+  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,16 +1,9 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable no-unused-vars */
 /** Functions related to the Dragon */
 
-import { Beautify } from '../../Disp/BeautifyAndFormatting/BeautifyFormatting';
+import Beautify from '../../Disp/BeautifyAndFormatting/Beautify';
 import CopyData from '../../Sim/SimulationData/CopyData';
 import { SimDoSims, SimObjects } from '../../Sim/VariablesAndData';
-import {
-  CacheCostDragonUpgrade,
-  CacheDragonAura,
-  CacheDragonAura2,
-  CacheLastDragonLevel,
-} from '../VariablesAndData';
+import { CacheCostDragonUpgrade, CacheLastDragonLevel } from '../VariablesAndData';
 
 /**
  * This functions caches the current cost of upgrading the dragon level so it can be displayed in the tooltip
@@ -21,9 +14,7 @@ export default function CacheDragonCost() {
       Game.dragonLevel < 25 &&
       Game.dragonLevels[Game.dragonLevel].buy.toString().includes('sacrifice')
     ) {
-      let target = Game.dragonLevels[Game.dragonLevel].buy
-        .toString()
-        .match(/Objects\[(.*)\]/)[1];
+      let target = Game.dragonLevels[Game.dragonLevel].buy.toString().match(/Objects\[(.*)\]/)[1];
       const amount = Game.dragonLevels[Game.dragonLevel].buy
         .toString()
         .match(/sacrifice\((.*?)\)/)[1];
@@ -38,42 +29,35 @@ export default function CacheDragonCost() {
             let price =
               SimObjects[target].basePrice *
               Game.priceIncrease **
-                Math.max(
-                  0,
-                  SimObjects[target].amount - 1 - SimObjects[target].free,
-                );
+                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 -= 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,
-                  );
+                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 -= 1;
           }
-          }
-          CacheCostDragonUpgrade = `Cost to rebuy: ${Beautify(cost)}`;
-        }
+          CacheCostDragonUpgrade = `Cost to rebuy: ${Beautify(cost)}`; // eslint-disable-line no-unused-vars
+        });
       }
     }
     CacheLastDragonLevel = Game.dragonLevel;

src/Cache/PP/Building.js

@@ -1,8 +1,6 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-unused-vars */
 import { CMOptions } from '../../Config/VariablesAndData';
 import GetWrinkConfigBank from '../../Disp/HelperFunctions/GetWrinkConfigBank';
-import { ColorGray } from '../../Disp/VariablesAndData';
+import { ColourGray } from '../../Disp/VariablesAndData';
 import {
   CacheMinPP,
   CacheObjects1,
@@ -17,15 +15,17 @@ import ColourOfPP from './ColourOfPP';
  * It saves all date in CM.Cache.Objects...
  * It is called by CM.Cache.CacheBuildingsPP()
  */
-function CacheColor(target, amount) {
+function CacheColour(target, amount) {
   Object.keys(target).forEach((i) => {
-    target[i].color = ColourOfPP(
-      target[i],
-      Game.Objects[i].getSumPrice(amount),
-    );
+    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 = ColorGray;
+      if (target[i].pp === CachePPArray[j][0]) target[i].color = ColourGray; // eslint-disable-line no-param-reassign
     }
   });
 }
@@ -34,12 +34,11 @@ function CachePP(target, amount) {
   Object.keys(target).forEach((i) => {
     const price = Game.Objects[i].getSumPrice(amount);
     if (Game.cookiesPs) {
-      target[i].pp =
-        Math.max(price - (Game.cookies + GetWrinkConfigBank()), 0) /
-          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;
-    CachePPArray.push([target[i].pp, amount]);
+    } 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]);
   });
 }
 
@@ -68,9 +67,9 @@ export default function CacheBuildingsPP() {
       }
     }
   }
-  CacheMinPP = CachePPArray[CMOptions.PPExcludeTop][indexOfMin];
+  CacheMinPP = CachePPArray[CMOptions.PPExcludeTop][indexOfMin]; // eslint-disable-line no-unused-vars
 
-  CacheColor(CacheObjects1, 1);
-  CacheColor(CacheObjects10, 10);
-  CacheColor(CacheObjects100, 100);
+  CacheColour(CacheObjects1, 1);
+  CacheColour(CacheObjects10, 10);
+  CacheColour(CacheObjects100, 100);
 }

src/Cache/PP/ColourOfPP.js

@@ -1,13 +1,13 @@
 import { CMOptions } from '../../Config/VariablesAndData';
 import GetCPS from '../../Disp/HelperFunctions/GetCPS';
 import {
-  ColorBlue,
-  ColorGray,
-  ColorGreen,
-  ColorOrange,
-  ColorPurple,
-  ColorRed,
-  ColorYellow,
+  ColourBlue,
+  ColourGray,
+  ColourGreen,
+  ColourOrange,
+  ColourPurple,
+  ColourRed,
+  ColourYellow,
 } from '../../Disp/VariablesAndData';
 import { CacheMinPP, CachePPArray } from '../VariablesAndData';
 
@@ -21,22 +21,21 @@ import { CacheMinPP, CachePPArray } from '../VariablesAndData';
 export default function ColourOfPP(me, price) {
   let color = '';
   // Colour based on PP
-  if (me.pp <= 0 || me.pp === Infinity) color = ColorGray;
-  else if (me.pp < CacheMinPP) color = ColorBlue;
-  else if (me.pp === CacheMinPP) color = ColorGreen;
-  else if (me.pp < CachePPArray[10][0]) color = ColorYellow;
-  else if (me.pp < CachePPArray[20][0]) color = ColorOrange;
-  else if (me.pp > CachePPArray[30][0]) color = ColorRed;
-  else color = ColorPurple;
+  if (me.pp <= 0 || me.pp === Infinity) color = ColourGray;
+  else if (me.pp < CacheMinPP) color = ColourBlue;
+  else if (me.pp === CacheMinPP) color = ColourGreen;
+  else if (me.pp < CachePPArray[10][0]) color = ColourYellow;
+  else if (me.pp < CachePPArray[20][0]) color = ColourOrange;
+  else if (me.pp < CachePPArray[30][0]) color = ColourRed;
+  else color = ColourPurple;
 
   // Colour based on price in terms of CPS
   if (Number(CMOptions.PPSecondsLowerLimit) !== 0) {
-    if (price / GetCPS() < Number(CMOptions.PPSecondsLowerLimit))
-      color = ColorBlue;
+    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

@@ -10,20 +10,12 @@ export default function CacheUpgradePP() {
   Object.keys(CacheUpgrades).forEach((i) => {
     if (Game.cookiesPs) {
       CacheUpgrades[i].pp =
-        Math.max(
-          Game.Upgrades[i].getPrice() - (Game.cookies + GetWrinkConfigBank()),
-          0,
-        ) /
+        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;
+    } 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/PriceAndIncome/PriceAndIncome.js

@@ -1,13 +1,10 @@
-/* eslint-disable no-unused-vars */
 /** Section: Functions related to caching income */
 
 import { CMOptions } from '../../Config/VariablesAndData';
-import GetCPS from '../../Disp/HelperFunctions/GetCPS';
 import BuildingGetPrice from '../../Sim/SimulationEvents/BuyBuilding';
 import BuyBuildingsBonusIncome from '../../Sim/SimulationEvents/BuyBuildingBonusIncome';
 import BuyUpgradesBonusIncome from '../../Sim/SimulationEvents/BuyUpgrades';
 import {
-  CacheAverageCPS,
   CacheAverageGainBank,
   CacheAverageGainWrink,
   CacheAverageGainWrinkFattest,
@@ -15,6 +12,7 @@ import {
   CacheObjects1,
   CacheObjects10,
   CacheObjects100,
+  CacheObjectsNextAchievement,
   CacheUpgrades,
 } from '../VariablesAndData';
 
@@ -24,13 +22,13 @@ 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 = [];
+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;
@@ -46,10 +44,8 @@ function CacheUpgradeIncome() {
     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 (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] = {};
@@ -85,6 +81,13 @@ export function CacheBuildingsPrices() {
       Game.Objects[i].free,
       100,
     );
+    CacheObjectsNextAchievement[i].price = BuildingGetPrice(
+      Game.Objects[i],
+      Game.Objects[i].basePrice,
+      Game.Objects[i].amount,
+      Game.Objects[i].free,
+      CacheObjectsNextAchievement[i].AmountNeeded,
+    );
   });
 }
 

src/Cache/Stats/ChainCookies.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import GetCPSBuffMult from '../CPS/GetCPSBuffMult';
 import {
   CacheChainFrenzyMaxReward,
@@ -32,22 +31,15 @@ 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) {
+  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,
-      ),
+      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,
-      ),
+      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;
@@ -73,65 +65,28 @@ 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 = CacheChainMaxReward[2] / 60 / 60 / 6 / CacheDragonsFortuneMultAdjustment; // eslint-disable-line no-unused-vars
 
-  CacheChainWrathMaxReward = MaxChainCookieReward(
-    6,
-    maxPayout,
-    CacheWrathCookiesMult,
-  );
-  CacheChainWrathRequired =
-    (CacheChainWrathMaxReward[1] * 2) / CacheWrathCookiesMult;
-  CacheChainWrathRequiredNext =
-    CacheChainWrathMaxReward[2] /
-    60 /
-    60 /
-    6 /
-    CacheDragonsFortuneMultAdjustment;
+  CacheChainWrathMaxReward = MaxChainCookieReward(6, maxPayout, CacheWrathCookiesMult);
+  CacheChainWrathRequired = (CacheChainWrathMaxReward[1] * 2) / CacheWrathCookiesMult; // eslint-disable-line no-unused-vars
+  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 = (CacheChainFrenzyMaxReward[1] * 2) / CacheGoldenCookiesMult; // eslint-disable-line no-unused-vars
+  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 = (CacheChainFrenzyWrathMaxReward[1] * 2) / CacheWrathCookiesMult; // eslint-disable-line no-unused-vars
+  CacheChainFrenzyWrathRequiredNext = // eslint-disable-line no-unused-vars
+    CacheChainFrenzyWrathMaxReward[2] / 60 / 60 / 6 / CacheDragonsFortuneMultAdjustment;
 }

src/Cache/Stats/HeavenlyChips.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import {
   CacheHCPerSecond,
   CacheLastHeavenlyCheck,
@@ -16,15 +15,12 @@ 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);
     }
@@ -34,6 +30,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,5 +1,4 @@
-/* eslint-disable no-unused-vars */
-import { crateMissing } from '../../Disp/MenuSections/CreateMissingUpgrades';
+import { crateMissing } from '../../Disp/MenuSections/Statistics/CreateMissingUpgrades';
 import {
   CacheMissingUpgrades,
   CacheMissingUpgradesCookies,
@@ -36,14 +35,12 @@ export default function CacheAllMissingUpgrades() {
       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'
-      )
+      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,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 /** Functions related to Caching stats */
 
 import SimHas from '../../Sim/ReplacedGameFunctions/SimHas';
@@ -29,15 +28,13 @@ 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 = CacheGoldenCookiesMult * (CacheLuckyFrenzy * 0.15) + 13; // eslint-disable-line no-unused-vars
+  CacheLuckyWrathRewardFrenzy = CacheWrathCookiesMult * (CacheLuckyFrenzy * 0.15) + 13; // eslint-disable-line no-unused-vars
   CacheConjure = CacheLucky * 2;
-  CacheConjureReward = CacheConjure * 0.15;
+  CacheConjureReward = CacheConjure * 0.15; // eslint-disable-line no-unused-vars
 
   CacheEdifice = 0;
   let max = 0;
@@ -53,7 +50,7 @@ export function CacheStatsCookies() {
       Game.Objects[i].price * 2 > CacheEdifice
     ) {
       CacheEdifice = Game.Objects[i].price * 2;
-      CacheEdificeBuilding = i;
+      CacheEdificeBuilding = i; // eslint-disable-line no-unused-vars
     }
   });
 }
@@ -85,7 +82,6 @@ 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/TillNextAchievement/AllAmountTillNextAchievement.js

@@ -0,0 +1,25 @@
+import { CacheObjectsNextAchievement } from '../VariablesAndData';
+import IndividualAmountTillNextAchievement from './IndividualAmountTillNextAchievement';
+
+export default function AllAmountTillNextAchievement() {
+  const result = {};
+
+  Object.keys(Game.Objects).forEach((i) => {
+    if (
+      Object.keys(CacheObjectsNextAchievement).length !== 0 &&
+      CacheObjectsNextAchievement[i].TotalNeeded > Game.Objects[i].amount
+    ) {
+      result[i] = {
+        AmountNeeded: CacheObjectsNextAchievement[i].TotalNeeded - Game.Objects[i].amount,
+        TotalNeeded: CacheObjectsNextAchievement[i].TotalNeeded,
+      };
+    } else {
+      const tillNext = IndividualAmountTillNextAchievement(i);
+      result[i] = {
+        AmountNeeded: tillNext,
+        TotalNeeded: Game.Objects[i].amount + tillNext,
+      };
+    }
+  });
+  CacheObjectsNextAchievement = result; // eslint-disable-line no-unused-vars
+}

src/Cache/TillNextAchievement/IndividualAmountTillNextAchievement.js

@@ -0,0 +1,13 @@
+import BuyBuildingsBonusIncome from '../../Sim/SimulationEvents/BuyBuildingBonusIncome';
+import { SimAchievementsOwned } from '../../Sim/VariablesAndData';
+
+export default function IndividualAmountTillNextAchievement(building) {
+  const AchievementsAtStart = Game.AchievementsOwned;
+  for (let index = 0; index < 101; index++) {
+    BuyBuildingsBonusIncome(building, index);
+    if (SimAchievementsOwned > AchievementsAtStart) {
+      return index;
+    }
+  }
+  return 101;
+}

src/Cache/VariablesAndData.js

@@ -28,6 +28,7 @@ export let CacheLastChoEgg = 0;
 export let CacheObjects1 = {};
 export let CacheObjects10 = {};
 export let CacheObjects100 = {};
+export let CacheObjectsNextAchievement = {};
 
 export let CacheWrinklersTotal = 0;
 export let CacheWrinklersNormal = 0;
@@ -39,6 +40,7 @@ export let CacheCurrWrinklerCount = 0;
 export let CacheUpgrades = {};
 
 export let CacheAverageClicks = {};
+export let CacheAverageCookiesFromClicks;
 
 export let CacheMissingUpgrades = {};
 export let CacheMissingUpgradesPrestige = {};

src/Cache/Wrinklers/Wrinklers.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 /** Caches data related to Wrinklers */
 
 import { SimObjects } from '../../Sim/VariablesAndData';
@@ -32,11 +31,10 @@ 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 ConfigDefault from '../../Data/SettingsDefault';
+import ConfigDefault from '../../Data/SettingsDefault.ts';
 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 */
 
@@ -18,14 +19,8 @@ export function SaveConfig() {
   );
   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!`));
   }
 }
 
@@ -41,25 +36,19 @@ 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;
     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') {
         Object.keys(ConfigDefault.Header).forEach((j) => {
           if (
@@ -70,21 +59,10 @@ export function LoadConfig(settings) {
             CMOptions[i][j] = ConfigDefault[i][j];
           }
         });
-      } else {
-        // Colors
-        Object.keys(ConfigDefault.Colors).forEach((j) => {
-          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
+    CMLoopHook(); // Do loop once
     Object.keys(ConfigDefault).forEach((i) => {
       if (i !== 'Header' && typeof ConfigData[i].func !== 'undefined') {
         ConfigData[i].func();
@@ -94,4 +72,6 @@ export function LoadConfig(settings) {
     // Default values
     LoadConfig(ConfigDefault);
   }
+  Game.UpdateMenu();
+  UpdateColours();
 }

src/Config/SpecificToggles.js

@@ -7,15 +7,9 @@ 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';

src/Config/ToggleSetting.js

@@ -17,16 +17,13 @@ export function ToggleConfig(config) {
 
   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]];
   SaveConfig();
 }
 

src/Config/Toggles/ToggleFavourites.js

@@ -0,0 +1,11 @@
+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((ele) => ele !== config);
+  else FavouriteSettings.push(config);
+}

src/Config/Toggles/ToggleGCTimer.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-return-assign */
 import { CacheGoldenShimmersByID } from '../../Cache/VariablesAndData';
 import { GCTimers } from '../../Disp/VariablesAndData';
 import { CMOptions } from '../VariablesAndData';
@@ -15,6 +14,7 @@ export default function ToggleGCTimer() {
       GCTimers[i].style.top = CacheGoldenShimmersByID[i].l.style.top;
     });
   } else {
+    // eslint-disable-next-line no-return-assign
     Object.keys(GCTimers).forEach((i) => (GCTimers[i].style.display = 'none'));
   }
 }

src/Config/Toggles/ToggleUpgradeBarAndColour.js

@@ -1,9 +1,6 @@
 import UpdateUpgrades from '../../Disp/BuildingsUpgrades/Upgrades';
 import { CMOptions } from '../VariablesAndData';
 
-/**
- * Section: Functions related to the Upgrade Bar
-
 /**
  * This function toggles the upgrade bar and the colours of upgrades
  * It is called by a change in CM.Options.UpBarColor

src/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.ts

@@ -1,7 +1,7 @@
 /** Data copied directly from the game */
 
 /** Array of the names of all fortune cookies obtainable from the ticker */
-export const Fortunes = [
+export const Fortunes: string[] = [
   'Fortune #001',
   'Fortune #002',
   'Fortune #003',
@@ -28,7 +28,7 @@ export const Fortunes = [
 ];
 
 /** Array of the names of all Halloween cookies */
-export const HalloCookies = [
+export const HalloCookies: string[] = [
   'Skull cookies',
   'Ghost cookies',
   'Bat cookies',
@@ -39,7 +39,7 @@ export const HalloCookies = [
 ];
 
 /** Array of the names of all Christmas cookies */
-export const ChristCookies = [
+export const ChristCookies: string[] = [
   'Christmas tree biscuits',
   'Snowflake biscuits',
   'Snowman biscuits',
@@ -50,7 +50,7 @@ export const ChristCookies = [
 ];
 
 /** Array of the names of all Valentine cookies */
-export const ValCookies = [
+export const ValCookies: string[] = [
   'Pure heart biscuits',
   'Ardent heart biscuits',
   'Sour heart biscuits',
@@ -61,7 +61,7 @@ export const ValCookies = [
 ];
 
 /** Array of the names of all plant drops */
-export const PlantDrops = [
+export const PlantDrops: string[] = [
   'Elderwort biscuits',
   'Bakeberry cookies',
   'Duketater cookies',
@@ -72,7 +72,7 @@ export const PlantDrops = [
 ];
 
 /** All possible effects plants and other items can have with a display-title */
-export const Effects = {
+export const Effects: { [index: string]: string } = {
   buildingCost: 'Building prices',
   click: 'Cookies per click',
   cps: 'Total CPS',

src/Data/Moddata.js

@@ -1,41 +0,0 @@
-/** Data related directly to Cookie Monster */
-
-export const VersionMajor = '2.031';
-export const VersionMinor = '6';
-
-/** Information about Cookie Monster to be displayed in the info section */
-export const ModDescription = `<div class="listing">
- <a href="https://github.com/Aktanusa/CookieMonster" target="blank">Cookie Monster</a>
- offers a wide range of tools and statistics to enhance your game experience.
- 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.</br>
- Progess on new updates and all previous release notes can be found on the GitHub page linked above!</br>
- Please also report any bugs you may find over there!</br>
- </div>
- `;
-
-/** Latest releasenotes of Cookie Monster to be displayed in the info section */
-export const LatestReleaseNotes = `<div class="listing">
-The latest update (v 2.031.6) has revamped the way PP is colourcoded. In the previous versions this was not always correct and we had some settings that made it even more incorrect. With this update Cookie Monster compares the PP of a building to all other possibilities (also buying 10 or 100) of a building and colors the PP accordingly.</br>
-This means that if it is better to buy 10 of a building immediately rather than to buy in increments of 1 Cookie Monster will now show this! In this case the buy 1 option will be yellow, while the buy 10 option will be green.</br>
-This also means that you will see some more diverse colors. Rather than coloring according to arbitrary "middle values" Cookie Monster now uses a top 10, 20 and 30. While this might take some getting used to we believe the new system is much better in conveying useful information to the user while also being more correct!</br>
-</br>
-This update also implements the following functions:</br>
-- Added a tooltip displaying the reward to the extra pop wrinkler buttons</br>
-- Added tooltips to the Gods in the Pantheon</br>
-- The tooltip for Elder Pledge now displays correctly, although it takes some time to load after Cookie Monster has been loaded</br>
-- You can now test the volume and sound of notifications in the settings screen</br>
-- The bottom bar will now flicker less and each column has received a bit of padding</br>
-- Introduced new colour scheme for PP, see the explanation of colors in the Readme or the settings</br>
-- Added option to show buttons that can hide the upgrade and building section</br>
-- Added option to display PP as a time unit, note that these are only approximations. PP does not translate directly into time (the name is deceptive, we know...)</br>
-- Statistics page now shows chance for random drops when they have not been achieved</br>
-</br>
-This update fixes the following bugs:</br>
-- Incorrect amount for "required for max plant reward" in statistics page</br>
-- Fixed the tooltips of the '?' buttons in the statistics page not showing</br>
-- Fixed some unclear settings descriptions </br>
-</br>
-Please submit any bug reports or feature requests to the <a href="https://github.com/Aktanusa/CookieMonster">GitHub page!</a>
-</br>
-</div>
-`;

src/Data/Moddata.ts

@@ -0,0 +1,31 @@
+/** Data related directly to Cookie Monster */
+
+export const VersionMajor = '2.031';
+export const VersionMinor = '8';
+
+/** Information about Cookie Monster to be displayed in the info section */
+export const ModDescription = `<div class="listing">
+ <a href="https://github.com/CookieMonsterTeam/CookieMonster" target="blank">Cookie Monster</a>
+ offers a wide range of tools and statistics to enhance your game experience.
+ 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.</br>
+ Progess on new updates and all previous release notes can be found on the GitHub page linked above!</br>
+ Please also report any bugs you may find over there!</br>
+ </div>
+ `;
+
+/** Latest releasenotes of Cookie Monster to be displayed in the info section */
+export const LatestReleaseNotes = `<div class="listing">
+<b>We have moved Cookie Monster to a new location!</b></br>
+Please update the link you are using to load Cookie Monster to https://cookiemonsterteam.github.io/CookieMonster/dist/CookieMonster.js and let everybody know this is the new place to find Cookie Monster!</br>
+These are the release notes for the latest update (v 2.031.8).</br>
+</br>
+This update implements the following functions:</br>
+- The tooltip of buildings now shows how many buildings need to be bought before a new achievement is reached and the cost and PP of this</br>
+- New setting to force the upgrades sections to always show all available upgrades, stopping them from collapsing and expanding</br>
+</br>
+This update fixes the following bugs:</br>
+- Settings menu now correctly updates after changing a setting</br>
+- Fixed incorrect calculation of dates in rare cases</br>
+- Remove golden cookie timers when you ascend</br>
+</div>
+`;

src/Data/Scales.ts

@@ -1,10 +1,10 @@
 /** 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: string[] = ['', '', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
 
 /** Array of abbreviations used in the "Short" scale */
-export const shortScale = [
+export const shortScale: string[] = [
   '',
   '',
   'M',
@@ -34,7 +34,7 @@ export const shortScale = [
 ];
 
 /** Array of abbreviations used in the "Abbreviated Short" scale */
-export const shortScaleAbbreviated = [
+export const shortScaleAbbreviated: string[] = [
   '',
   'K',
   'M',

src/Data/Sectionheaders.ts

@@ -1,18 +1,20 @@
 /** Data related to the display titles of certain sections in menu screens */
 
 /** Display titles of the headers of the Cookie Monster settings section */
-export const ConfigGroups = {
-  BarsColors: 'Bars/Colors',
+export const ConfigGroups: { [index: string]: string } = {
+  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',
 };
 
 /** Display titles of the headers of the notification section of the Cookie Monster settings */
-export const ConfigGroupsNotification = {
+export const ConfigGroupsNotification: { [index: string]: string } = {
   NotificationGeneral: 'General Notifications',
   NotificationGC: 'Golden Cookie',
   NotificationFC: 'Fortune Cookie',

src/Data/SettingClasses.js

@@ -1,54 +0,0 @@
-/* eslint-disable max-classes-per-file */
-/** This describes all forms of settings used by Cookie Monster */
-
-/** The basic setting class */
-export class Setting {
-  constructor(type, group) {
-    this.type = type;
-    this.group = group;
-  }
-}
-
-/** The standard toggle setting class */
-export class SettingStandard extends Setting {
-  constructor(type, group, label, desc, toggle, func = null) {
-    super(type, group);
-    this.label = label;
-    this.desc = desc;
-    this.toggle = toggle;
-    if (func) {
-      this.func = func;
-    }
-  }
-}
-/** The colour picker setting class */
-export class SettingColours extends Setting {
-  constructor(type, group, desc, func) {
-    super(type, group);
-    this.desc = desc;
-    this.func = func;
-  }
-}
-
-/** The volume level setting class */
-export class SettingVolume extends Setting {
-  constructor(type, group, label, desc) {
-    super(type, group);
-    this.label = label;
-    this.desc = desc;
-    for (let i = 0; i < 101; i++) {
-      this.label[i] = `${i}%`;
-    }
-  }
-}
-
-/** The number input setting class */
-export class SettingInputNumber extends Setting {
-  constructor(type, group, label, desc, min, max) {
-    super(type, group);
-    this.label = label;
-    this.desc = desc;
-    this.min = min;
-    this.max = max;
-  }
-}

src/Data/SettingClasses/BaseSetting.ts

@@ -0,0 +1,11 @@
+/** The basic setting class */
+export default class Setting {
+  type: string;
+
+  group: string;
+
+  constructor(type: string, group: string) {
+    this.type = type;
+    this.group = group;
+  }
+}

src/Data/SettingClasses/SettingColours.ts

@@ -0,0 +1,11 @@
+import Setting from './BaseSetting';
+
+/** The colour picker setting class */
+export default class SettingColours extends Setting {
+  desc: string;
+
+  constructor(type: string, group: string, desc: string) {
+    super(type, group);
+    this.desc = desc;
+  }
+}

src/Data/SettingClasses/SettingInputNumber.ts

@@ -0,0 +1,27 @@
+import Setting from './BaseSetting';
+
+/** The number input setting class */
+export default class SettingInputNumber extends Setting {
+  label: string[];
+
+  desc: string;
+
+  min: number;
+
+  max: number;
+
+  constructor(
+    type: string,
+    group: string,
+    label: string[],
+    desc: string,
+    min: number,
+    max: number,
+  ) {
+    super(type, group);
+    this.label = label;
+    this.desc = desc;
+    this.min = min;
+    this.max = max;
+  }
+}

src/Data/SettingClasses/SettingStandard.ts

@@ -0,0 +1,29 @@
+import Setting from './BaseSetting';
+
+/** The standard toggle setting class */
+export default class SettingStandard extends Setting {
+  label: string[];
+
+  desc: string;
+
+  toggle: boolean;
+
+  func: () => void;
+
+  constructor(
+    type: string,
+    group: string,
+    label: string[],
+    desc: string,
+    toggle: boolean,
+    func?: () => void,
+  ) {
+    super(type, group);
+    this.label = label;
+    this.desc = desc;
+    this.toggle = toggle;
+    if (func !== undefined) {
+      this.func = func;
+    }
+  }
+}

src/Data/SettingClasses/SettingVolume.ts

@@ -0,0 +1,17 @@
+import Setting from './BaseSetting';
+
+/** The volume level setting class */
+export default class SettingVolume extends Setting {
+  label: string[];
+
+  desc: string;
+
+  constructor(type: string, group: string, label: string[], desc: string) {
+    super(type, group);
+    this.label = label;
+    this.desc = desc;
+    for (let i = 0; i < 101; i++) {
+      this.label[i] = `${i}%`;
+    }
+  }
+}

src/Data/SettingsDefault.ts

@@ -1,62 +1,47 @@
 /** This array describes all default settings */
-const ConfigDefault = {
+const ConfigDefault: {
+  [index: string]: string | number | { [index: string]: number };
+} = {
+  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,
-  PPDisplayTime: 0,
-  UpBarColor: 1,
+  UpBarColour: 1,
   UpgradeBarFixedPos: 1,
-  CalcWrink: 0,
-  CPSMode: 1,
-  AvgCPSHist: 3,
-  AvgClicksHist: 0,
-  PPExcludeTop: 0,
-  PPSecondsLowerLimit: 0,
-  PPOnlyConsiderBuyable: 0,
-  ToolWarnBon: 1,
-  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,
+  UpgradesNeverCollapse: 0,
+  DragonAuraInfo: 1,
+  GrimoireBar: 1,
+  GCTimer: 1,
+  Favicon: 1,
+  WrinklerButtons: 1,
+  HideSectionsButtons: 0,
   TooltipBuildUpgrade: 1,
   TooltipAmor: 0,
   ToolWarnLucky: 1,
@@ -65,47 +50,73 @@ const ConfigDefault = {
   ToolWarnConjureFrenzy: 1,
   ToolWarnEdifice: 1,
   ToolWarnUser: 0,
+  ToolWarnBon: 1,
   ToolWarnPos: 1,
   TooltipGrim: 1,
   TooltipWrink: 1,
   TooltipLump: 1,
   TooltipPlots: 1,
   TooltipPantheon: 1,
-  DragonAuraInfo: 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,
-  HideSectionsButtons: 0,
+  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,
+    Favourite: 1,
     Calculation: 1,
+    Notation: 1,
+    Colours: 1,
+    BarsDisplay: 1,
+    Tooltip: 1,
+    Statistics: 1,
     Notification: 1,
     NotificationGeneral: 1,
     NotificationGC: 1,
@@ -115,9 +126,6 @@ const ConfigDefault = {
     NotificationMagi: 1,
     NotificationWrink: 1,
     NotificationWrinkMax: 1,
-    Tooltip: 1,
-    Statistics: 1,
-    Notation: 1,
     Miscellaneous: 1,
     Lucky: 1,
     Chain: 1,

src/Disp/BeautifyAndFormatting/Beautify.js

@@ -1,15 +1,8 @@
-/* eslint-disable no-nested-ternary */
 /** General functions to format or beautify strings */
 
 import { CMOptions } from '../../Config/VariablesAndData';
-import { metric, shortScale, shortScaleAbbreviated } from '../../Data/Scales';
+import { metric, shortScale, shortScaleAbbreviated } from '../../Data/Scales.ts';
 import { BackupFunctions } from '../../Main/VariablesAndData';
-import {
-  ColorGreen,
-  ColorOrange,
-  ColorRed,
-  ColorYellow,
-} from '../VariablesAndData';
 
 /**
  * This function returns formats number based on the Scale setting
@@ -18,7 +11,7 @@ import {
  * @param	{number}	forced	Used to force (type 3) in certains cases
  * @returns	{string}			Formatted number
  */
-export function Beautify(num, floats, forced) {
+export default function Beautify(num, floats, forced) {
   const decimals = CMOptions.ScaleDecimals + 1;
   if (num === Infinity) {
     return 'Infinity';
@@ -30,6 +23,9 @@ export function Beautify(num, floats, forced) {
     return BackupFunctions.Beautify(num, floats);
   }
   if (Number.isFinite(num)) {
+    if (num < 0) {
+      return `-${Beautify(Math.abs(num))}`;
+    }
     let answer = '';
     if (num === 0) {
       return num.toString();
@@ -44,12 +40,8 @@ export function Beautify(num, floats, forced) {
       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
@@ -63,10 +55,7 @@ export function Beautify(num, floats, forced) {
         } 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}`)
-        ) {
+        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) {
@@ -75,77 +64,13 @@ export function Beautify(num, floats, forced) {
       }
     }
     if (answer === '') {
-      console.log(
-        `Could not beautify number with Cookie Monster 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 Cookie Monster Beautify: ${num}`);
+  console.log(`Could not beautify number with Cookie Monster Beautify: ${num}`); // eslint-disable-line no-console
   return BackupFunctions.Beautify(num, floats);
 }
-
-/**
- * This function returns time as a string depending on TimeFormat setting
- * @param  	{number} 	time		Time to be formatted
- * @param  	{number}	longFormat 	1 or 0
- * @returns	{string}				Formatted time
- */
-export function FormatTime(time, longFormat) {
-  let formattedTime = time;
-  if (time === Infinity) return time;
-  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 (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 (formattedTime > 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');
-  }
-  return str;
-}
-
-/**
- * This function returns the color to be used for time-strings
- * @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) {
-  let color;
-  let text;
-  if (time <= 0) {
-    if (CMOptions.TimeFormat) text = '00:00:00:00:00';
-    else text = 'Done!';
-    color = ColorGreen;
-  } else {
-    text = FormatTime(time);
-    if (time > 300) color = ColorRed;
-    else if (time > 60) color = ColorOrange;
-    else color = ColorYellow;
-  }
-  return { text, color };
-}

src/Disp/BeautifyAndFormatting/FormatTime.js

@@ -0,0 +1,42 @@
+import { CMOptions } from '../../Config/VariablesAndData';
+
+/**
+ * This function returns time as a string depending on TimeFormat setting
+ * @param  	{number} 	time		Time to be formatted
+ * @param  	{number}	longFormat 	1 or 0
+ * @returns	{string}				Formatted time
+ */
+export default function FormatTime(time, longFormat) {
+  let formattedTime = time;
+  if (time === Infinity) return time;
+  if (time < 0) return 'Negative time period';
+  formattedTime = Math.ceil(time);
+  const y = Math.floor(formattedTime / 31536000);
+  const d = Math.floor((formattedTime % 31536000) / 86400);
+  const h = Math.floor(((formattedTime % 31536000) % 86400) / 3600);
+  const m = Math.floor((((formattedTime % 31536000) % 86400) % 3600) / 60);
+  const s = Math.floor((((formattedTime % 31536000) % 86400) % 3600) % 60);
+  let str = '';
+  if (CMOptions.TimeFormat) {
+    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 (formattedTime > 777600000) return longFormat ? 'Over 9000 days!' : '>9000d';
+    str +=
+      y > 0
+        ? `${y + (longFormat ? (y === 1 ? ' year' : ' years') : 'y')}, ` // eslint-disable-line no-nested-ternary
+        : '';
+    if (str.length > 0 || d > 0)
+      str += `${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;
+}

src/Disp/BeautifyAndFormatting/GetTimeColour.js

@@ -0,0 +1,24 @@
+import { CMOptions } from '../../Config/VariablesAndData';
+import { ColourGreen, ColourOrange, ColourRed, ColourYellow } from '../VariablesAndData';
+import FormatTime from './FormatTime';
+
+/**
+ * This function returns the color to be used for time-strings
+ * @param	{number}			time			Time to be coloured
+ * @returns {{string, string}}	{text, color}	Both the formatted time and color as strings in an array
+ */
+export default function GetTimeColour(time) {
+  let color;
+  let text;
+  if (time <= 0) {
+    if (CMOptions.TimeFormat) text = '00:00:00:00:00';
+    else text = 'Done!';
+    color = ColourGreen;
+  } else {
+    text = FormatTime(time);
+    if (time > 300) color = ColourRed;
+    else if (time > 60) color = ColourOrange;
+    else color = ColourYellow;
+  }
+  return { text, color };
+}

src/Disp/BuildingsUpgrades/Buildings.js

@@ -1,13 +1,8 @@
-/* eslint-disable no-nested-ternary */
-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 Beautify from '../BeautifyAndFormatting/Beautify';
+import { ColoursOrdering, LastTargetBuildings } from '../VariablesAndData';
 
 /**
  * Section: Functions related to right column of the screen (buildings/upgrades)
@@ -15,8 +10,8 @@ import { Colors, LastTargetBuildings } from '../VariablesAndData';
 /**
  * This function adjusts some things in the column of buildings.
  * It colours them, helps display the correct sell-price and shuffles the order when CM.Options.SortBuildings is set
- * The function is called by CM.Disp.Draw(), CM.Disp.UpdateColors() & CM.Disp.RefreshScale()
- * And by changes in CM.Options.BuildColor, CM.Options.SortBuild & CM.Data.Config.BulkBuildColor
+ * The function is called by CM.Disp.Draw(), CM.Disp.UpdateColours() & CM.Disp.RefreshScale()
+ * And by changes in CM.Options.BuildColour, CM.Options.SortBuild & CM.Data.Config.BulkBuildColour
  */
 export default function UpdateBuildings() {
   let target = Game.buyBulk;
@@ -30,10 +25,9 @@ export default function UpdateBuildings() {
   else if (target === 100) target = CacheObjects100;
 
   if (Game.buyMode === 1) {
-    if (CMOptions.BuildColor === 1) {
+    if (CMOptions.BuildColour === 1) {
       Object.keys(target).forEach((i) => {
-        l(`productPrice${Game.Objects[i].id}`).style.color =
-          CMOptions.Colors[target[i].color];
+        l(`productPrice${Game.Objects[i].id}`).style.color = CMOptions[`Colour${target[i].color}`];
       });
     } else {
       Object.keys(Game.Objects).forEach((i) => {
@@ -71,15 +65,16 @@ export default function UpdateBuildings() {
         return o;
       });
 
-      arr.sort(function (a, b) {
-        return Colors.indexOf(a.color) > Colors.indexOf(b.color)
+      arr.sort((a, b) =>
+        ColoursOrdering.indexOf(a.color) > // eslint-disable-line no-nested-ternary
+        ColoursOrdering.indexOf(b.color)
           ? 1
-          : Colors.indexOf(a.color) < Colors.indexOf(b.color)
+          : ColoursOrdering.indexOf(a.color) < ColoursOrdering.indexOf(b.color) // eslint-disable-line no-nested-ternary
           ? -1
           : a.pp < b.pp
           ? -1
-          : 0;
-      });
+          : 0,
+      );
     } else if (CMOptions.SortBuildings === 2) {
       arr = Object.keys(target).map((k) => {
         const o = target[k];
@@ -88,15 +83,16 @@ export default function UpdateBuildings() {
         return o;
       });
 
-      arr.sort(function (a, b) {
-        return Colors.indexOf(a.color) > Colors.indexOf(b.color)
+      arr.sort((a, b) =>
+        ColoursOrdering.indexOf(a.color) > // eslint-disable-line no-nested-ternary
+        ColoursOrdering.indexOf(b.color)
           ? 1
-          : Colors.indexOf(a.color) < Colors.indexOf(b.color)
+          : ColoursOrdering.indexOf(a.color) < ColoursOrdering.indexOf(b.color) // eslint-disable-line no-nested-ternary
           ? -1
           : a.pp < b.pp
           ? -1
-          : 0;
-      });
+          : 0,
+      );
     }
 
     for (let x = 0; x < arr.length; x++) {

src/Disp/BuildingsUpgrades/UpdateUpgradeSectionsHeight.js

@@ -0,0 +1,27 @@
+import { CMOptions } from '../../Config/VariablesAndData';
+
+/**
+ * This function toggles the upgrade to be always expanded
+ * It is called by a change in CM.Options.ToolWarnPos
+ * and upon creation of the warning tooltip by CM.Disp.UpdateTooltipWarnings()
+ */
+export default function UpdateUpgradeSectionsHeight() {
+  Object.values(document.getElementsByClassName('storeSection')).forEach((section) => {
+    if (CMOptions.UpgradesNeverCollapse || section.id === 'products') {
+      section.style.height = 'auto'; // eslint-disable-line no-param-reassign
+    } else if (section.id === 'vaultUpgrades') {
+      section.style.height = ''; // eslint-disable-line no-param-reassign
+      section.style.minHeight = '0px'; // eslint-disable-line no-param-reassign
+    } else if (section.id === 'upgrades') {
+      section.style.height = ''; // eslint-disable-line no-param-reassign
+      if (section.className.includes('hasMenu')) {
+        section.style.minHeight = '82px'; // eslint-disable-line no-param-reassign
+      } else {
+        section.style.minHeight = '60px'; // eslint-disable-line no-param-reassign
+      }
+    } else {
+      section.style.height = ''; // eslint-disable-line no-param-reassign
+      section.style.minHeight = '60px'; // eslint-disable-line no-param-reassign
+    }
+  });
+}

src/Disp/BuildingsUpgrades/UpgradeBar.js

@@ -1,13 +1,13 @@
 import {
-  ColorBackPre,
-  ColorBlue,
-  ColorGray,
-  ColorGreen,
-  ColorOrange,
-  ColorPurple,
-  ColorRed,
-  ColorTextPre,
-  ColorYellow,
+  ColourBackPre,
+  ColourBlue,
+  ColourGray,
+  ColourGreen,
+  ColourOrange,
+  ColourPurple,
+  ColourRed,
+  ColourTextPre,
+  ColourYellow,
 } from '../VariablesAndData';
 
 /**
@@ -28,7 +28,7 @@ function CreateUpgradeBarLegend() {
     const div = document.createElement('div');
     div.style.verticalAlign = 'middle';
     const span = document.createElement('span');
-    span.className = ColorBackPre + color;
+    span.className = ColourBackPre + color;
     span.style.display = 'inline-block';
     span.style.height = '10px';
     span.style.width = '10px';
@@ -38,23 +38,13 @@ 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;
 }
 
@@ -83,22 +73,19 @@ export default function CreateUpgradeBar() {
   const upgradeNumber = function (id, color) {
     const span = document.createElement('span');
     span.id = id;
-    span.className = ColorTextPre + color;
+    span.className = ColourTextPre + color;
     span.style.width = '14.28571428571429%';
     span.style.display = 'inline-block';
     span.textContent = '0';
     return span;
   };
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarBlue', ColorBlue));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGreen', ColorGreen));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarYellow', ColorYellow));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarOrange', ColorOrange));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarRed', ColorRed));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarPurple', ColorPurple));
-  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGray', ColorGray));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarBlue', ColourBlue));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGreen', ColourGreen));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarYellow', ColourYellow));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarOrange', ColourOrange));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarRed', ColourRed));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarPurple', ColourPurple));
+  UpgradeBar.appendChild(upgradeNumber('CMUpgradeBarGray', ColourGray));
 
-  l('upgrades').parentNode.insertBefore(
-    UpgradeBar,
-    l('upgrades').parentNode.childNodes[3],
-  );
+  l('upgrades').parentNode.insertBefore(UpgradeBar, l('upgrades').parentNode.childNodes[3]);
 }

src/Disp/BuildingsUpgrades/Upgrades.js

@@ -1,27 +1,26 @@
-/* eslint-disable no-nested-ternary */
 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;
@@ -32,31 +31,28 @@ export default function UpdateUpgrades() {
 
     Object.keys(Game.UpgradesInStore).forEach((i) => {
       const me = Game.UpgradesInStore[i];
-      let addedColor = false;
+      let addedColour = false;
       for (let j = 0; j < l(`upgrade${i}`).childNodes.length; j += 1) {
-        if (
-          l(`upgrade${i}`).childNodes[j].className.indexOf(ColorBackPre) !== -1
-        ) {
-          l(`upgrade${i}`).childNodes[j].className =
-            ColorBackPre + CacheUpgrades[me.name].color;
-          addedColor = true;
+        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 += 1;
-      else if (CacheUpgrades[me.name].color === ColorGreen) green += 1;
-      else if (CacheUpgrades[me.name].color === ColorYellow) yellow += 1;
-      else if (CacheUpgrades[me.name].color === ColorOrange) orange += 1;
-      else if (CacheUpgrades[me.name].color === ColorRed) red += 1;
-      else if (CacheUpgrades[me.name].color === ColorPurple) purple += 1;
-      else if (CacheUpgrades[me.name].color === ColorGray) gray += 1;
+      if (CacheUpgrades[me.name].color === ColourBlue) blue += 1;
+      else if (CacheUpgrades[me.name].color === ColourGreen) green += 1;
+      else if (CacheUpgrades[me.name].color === ColourYellow) yellow += 1;
+      else if (CacheUpgrades[me.name].color === ColourOrange) orange += 1;
+      else if (CacheUpgrades[me.name].color === ColourRed) red += 1;
+      else if (CacheUpgrades[me.name].color === ColourPurple) purple += 1;
+      else if (CacheUpgrades[me.name].color === ColourGray) gray += 1;
     });
 
     l('CMUpgradeBarBlue').textContent = blue;
@@ -76,19 +72,20 @@ export default function UpdateUpgrades() {
     o.name = Game.UpgradesInStore[x].name;
     o.price = Game.UpgradesInStore[x].basePrice;
     o.pp = CacheUpgrades[o.name].pp;
+    o.color = CacheUpgrades[o.name].color;
     arr.push(o);
   }
 
   if (CMOptions.SortUpgrades) {
-    arr.sort(function (a, b) {
-      return Colors.indexOf(a.color) > Colors.indexOf(b.color)
+    arr.sort((a, b) =>
+      ColoursOrdering.indexOf(a.color) > ColoursOrdering.indexOf(b.color) // eslint-disable-line no-nested-ternary
         ? 1
-        : Colors.indexOf(a.color) < Colors.indexOf(b.color)
+        : ColoursOrdering.indexOf(a.color) < ColoursOrdering.indexOf(b.color) // eslint-disable-line no-nested-ternary
         ? -1
         : a.pp < b.pp
         ? -1
-        : 0;
-    });
+        : 0,
+    );
   } else {
     arr.sort((a, b) => a.price - b.price);
   }
@@ -97,7 +94,6 @@ export default function UpdateUpgrades() {
     return arr2.findIndex((e) => e.name === upgrade.name);
   };
   for (let x = 0; x < Game.UpgradesInStore.length; x += 1) {
-    l(`upgrade${x}`).style.order =
-      nameChecker(arr, Game.UpgradesInStore[x]) + 1;
+    l(`upgrade${x}`).style.order = nameChecker(arr, Game.UpgradesInStore[x]) + 1;
   }
 }

src/Disp/Dragon/Dragon.js

@@ -4,10 +4,8 @@ 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 from '../BeautifyAndFormatting/Beautify';
+import FormatTime from '../BeautifyAndFormatting/FormatTime';
 
 /**
  * This functions adds the two extra lines about CPS and time to recover to the aura picker infoscreen
@@ -16,15 +14,14 @@ import {
 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));
+    let bonusCPSPercentage;
+    if (Game.cookiesPs === 0) bonusCPSPercentage = Beautify(Infinity);
+    else 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';

src/Disp/DrawHook.js

@@ -1,21 +1,20 @@
+import ToggleWrinklerButtons from '../Config/Toggles/ToggleWrinklerButtons';
 import { CMOptions } from '../Config/VariablesAndData';
-import { Beautify } from './BeautifyAndFormatting/BeautifyFormatting';
+import Beautify from './BeautifyAndFormatting/Beautify';
 import UpdateBuildings from './BuildingsUpgrades/Buildings';
+import UpdateUpgradeSectionsHeight from './BuildingsUpgrades/UpdateUpgradeSectionsHeight';
 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';
+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() {
+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 &&
@@ -25,16 +24,14 @@ export default function Draw() {
   ) {
     const timer = document.getElementById('CMStatsAutosaveTimer');
     if (timer) {
-      timer.innerText = Game.sayTime(
-        Game.fps * 60 - (Game.T % (Game.fps * 60)),
-        4,
-      );
+      timer.innerText = Game.sayTime(Game.fps * 60 - (Game.T % (Game.fps * 60)), 4);
     }
   }
 
   // Update colors
   UpdateBuildings();
   UpdateUpgrades();
+  UpdateUpgradeSectionsHeight();
 
   // Redraw timers
   UpdateTimerBar();
@@ -52,11 +49,13 @@ export default function Draw() {
   // 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...
-  let str = l('cookies').innerHTML.replace(
-    /.*(?=<br>)/i,
-    Beautify(Game.cookies),
-  );
+  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

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 /** Section: Functions related to the Golden Cookie Timers */
 
 import { CMOptions } from '../../Config/VariablesAndData';
@@ -28,14 +27,12 @@ export default function CreateGCTimer(cookie) {
     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))';
+    cookie.l.style.filter = 'brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1))'; // eslint-disable-line no-param-reassign
+    cookie.l.style.webkitFilter = 'brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1))'; // eslint-disable-line no-param-reassign
   };
   GCTimer.onmouseout = function () {
-    cookie.l.style.filter = '';
-    cookie.l.style.webkitFilter = '';
+    cookie.l.style.filter = ''; // eslint-disable-line no-param-reassign
+    cookie.l.style.webkitFilter = ''; // eslint-disable-line no-param-reassign
   };
 
   GCTimers[cookie.id] = GCTimer;

src/Disp/HelperFunctions/CalculateGrimoireRefillTime.js

@@ -5,11 +5,7 @@
  * @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 (magic < targetMagic) {

src/Disp/HelperFunctions/GetCPS.js

@@ -18,15 +18,10 @@ export default function GetCPS() {
     return Game.cookiesPs * (1 - Game.cpsSucked);
   }
   if (CMOptions.CalcWrink === 1) {
-    return (
-      Game.cookiesPs *
-      (CacheCurrWrinklerCPSMult + (1 - CacheCurrWrinklerCount * 0.05))
-    );
+    return Game.cookiesPs * (CacheCurrWrinklerCPSMult + (1 - CacheCurrWrinklerCount * 0.05));
   }
-  if (
-    CMOptions.CalcWrink === 2 &&
-    Game.wrinklers[CacheWrinklersFattest[1]].type === 1
-  ) {
+  if (CacheWrinklersFattest[1] !== null)
+    if (CMOptions.CalcWrink === 2 && Game.wrinklers[CacheWrinklersFattest[1]].type === 1) {
       return (
         Game.cookiesPs *
         ((CacheCurrWrinklerCPSMult * 3) / CacheCurrWrinklerCount +
@@ -35,7 +30,6 @@ export default function GetCPS() {
     }
   return (
     Game.cookiesPs *
-    (CacheCurrWrinklerCPSMult / CacheCurrWrinklerCount +
-      (1 - CacheCurrWrinklerCount * 0.05))
+    (CacheCurrWrinklerCPSMult / CacheCurrWrinklerCount + (1 - CacheCurrWrinklerCount * 0.05))
   );
 }

src/Disp/HelperFunctions/GetLumpColor.js

@@ -1,33 +0,0 @@
-import {
-  ColorGray,
-  ColorGreen,
-  ColorOrange,
-  ColorPurple,
-  ColorRed,
-  ColorYellow,
-} from '../VariablesAndData';
-
-/**
- * This function returns Name and Color as object for sugar lump type that is given as input param.
- * It is called by CM.Disp.UpdateTooltipSugarLump()
- * @param 	{string} 				type 			Sugar Lump Type.
- * @returns {{string}, {string}}	text, color		An array containing the text and display-color of the sugar lump
- */
-export default function GetLumpColor(type) {
-  if (type === 0) {
-    return { text: 'Normal', color: ColorGray };
-  }
-  if (type === 1) {
-    return { text: 'Bifurcated', color: ColorGreen };
-  }
-  if (type === 2) {
-    return { text: 'Golden', color: ColorYellow };
-  }
-  if (type === 3) {
-    return { text: 'Meaty', color: ColorOrange };
-  }
-  if (type === 4) {
-    return { text: 'Caramelized', color: ColorPurple };
-  }
-  return { text: 'Unknown Sugar Lump', color: ColorRed };
-}

src/Disp/HelperFunctions/GetLumpColour.js

@@ -0,0 +1,33 @@
+import {
+  ColourGray,
+  ColourGreen,
+  ColourOrange,
+  ColourPurple,
+  ColourRed,
+  ColourYellow,
+} from '../VariablesAndData';
+
+/**
+ * This function returns Name and Colour as object for sugar lump type that is given as input param.
+ * It is called by CM.Disp.UpdateTooltipSugarLump()
+ * @param 	{string} 				type 			Sugar Lump Type.
+ * @returns {{string}, {string}}	text, color		An array containing the text and display-color of the sugar lump
+ */
+export default function GetLumpColour(type) {
+  if (type === 0) {
+    return { text: 'Normal', color: ColourGray };
+  }
+  if (type === 1) {
+    return { text: 'Bifurcated', color: ColourGreen };
+  }
+  if (type === 2) {
+    return { text: 'Golden', color: ColourYellow };
+  }
+  if (type === 3) {
+    return { text: 'Meaty', color: ColourOrange };
+  }
+  if (type === 4) {
+    return { text: 'Caramelized', color: ColourPurple };
+  }
+  return { text: 'Unknown Sugar Lump', color: ColourRed };
+}

src/Disp/HelperFunctions/GetWrinkConfigBank.js

@@ -1,7 +1,4 @@
-import {
-  CacheWrinklersFattest,
-  CacheWrinklersTotal,
-} from '../../Cache/VariablesAndData';
+import { CacheWrinklersFattest, CacheWrinklersTotal } from '../../Cache/VariablesAndData';
 import { CMOptions } from '../../Config/VariablesAndData';
 
 /**

src/Disp/HelperFunctions/UpdateBackground.js

@@ -5,10 +5,8 @@
  */
 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,33 +0,0 @@
-import { CMOptions } from '../../Config/VariablesAndData';
-import UpdateBuildings from '../BuildingsUpgrades/Buildings';
-import {
-  ColorBackPre,
-  ColorBorderPre,
-  Colors,
-  ColorTextPre,
-} from '../VariablesAndData';
-
-/**
- * This function changes/refreshes colours if the user has set new standard colours
- * The function is therefore called by a change in CM.Options.Colors
- */
-export default function UpdateColors() {
-  let str = '';
-  for (let i = 0; i < Colors.length; i++) {
-    str += `.${ColorTextPre}${Colors[i]} { color: ${
-      CMOptions.Colors[Colors[i]]
-    }; }\n`;
-  }
-  for (let i = 0; i < Colors.length; i++) {
-    str += `.${ColorBackPre}${Colors[i]} { background-color: ${
-      CMOptions.Colors[Colors[i]]
-    }; }\n`;
-  }
-  for (let i = 0; i < Colors.length; i++) {
-    str += `.${ColorBorderPre}${Colors[i]} { border: 1px solid ${
-      CMOptions.Colors[Colors[i]]
-    }; }\n`;
-  }
-  l('CMCSS').textContent = str;
-  UpdateBuildings(); // Class has been already set
-}

src/Disp/HelperFunctions/UpdateColours.js

@@ -0,0 +1,33 @@
+import { CMOptions } from '../../Config/VariablesAndData';
+import UpdateBuildings from '../BuildingsUpgrades/Buildings';
+import {
+  ColourBackPre,
+  ColourBorderPre,
+  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,25 +1,15 @@
 /** 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,
-  FormatTime,
-  GetTimeColor,
-} from '../BeautifyAndFormatting/BeautifyFormatting';
+import { VersionMajor, VersionMinor } from '../../Data/Moddata.ts';
+import Beautify from '../BeautifyAndFormatting/Beautify';
+import FormatTime from '../BeautifyAndFormatting/FormatTime';
+import GetTimeColour from '../BeautifyAndFormatting/GetTimeColour';
+
 import GetCPS from '../HelperFunctions/GetCPS';
 import GetWrinkConfigBank from '../HelperFunctions/GetWrinkConfigBank';
-import {
-  ColorBlue,
-  ColorTextPre,
-  ColorYellow,
-  LastTargetBotBar,
-} from '../VariablesAndData';
+import { ColourBlue, ColourTextPre, ColourYellow, LastTargetBotBar } from '../VariablesAndData';
 import { CreateBotBarBuildingColumn } from './CreateDOMElements';
 
 /**
@@ -36,8 +26,7 @@ export function CreateBotBar() {
   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%';
@@ -48,19 +37,19 @@ 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);
 
@@ -89,37 +78,28 @@ export function UpdateBotBar() {
       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;
-      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 timeColor = GetTimeColor(
-        (Game.Objects[i].bulkPrice - (Game.cookies + GetWrinkConfigBank())) /
-          GetCPS(),
+      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
-      ].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)`;
+        ].textContent = `${timeColour.text} (with Wrink)`;
       } else
-        l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[
-          count
-        ].textContent = timeColor.text;
+        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);
   }
@@ -77,13 +77,11 @@ 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} (`,
-      ),
+      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';

src/Disp/InfoBars/TimerBar.js

@@ -3,11 +3,11 @@
 import { UpdateBotTimerBarPosition } from '../../Config/SpecificToggles';
 import { CMOptions } from '../../Config/VariablesAndData';
 import {
-  BuffColors,
-  ColorBackPre,
-  ColorGray,
-  ColorOrange,
-  ColorPurple,
+  BuffColours,
+  ColourBackPre,
+  ColourGray,
+  ColourOrange,
+  ColourPurple,
   LastNumberOfTimers,
 } from '../VariablesAndData';
 import { CreateTimer } from './CreateDOMElements';
@@ -27,15 +27,15 @@ export function CreateTimerBar() {
 
   // Create standard Golden Cookie bar
   const CMTimerBarGC = CreateTimer('CMTimerBarGC', 'Next Cookie', [
-    { id: 'CMTimerBarGCMinBar', color: ColorGray },
-    { id: 'CMTimerBarGCBar', color: ColorPurple },
+    { id: 'CMTimerBarGCMinBar', color: ColourGray },
+    { id: 'CMTimerBarGCBar', color: ColourPurple },
   ]);
   TimerBar.appendChild(CMTimerBarGC);
 
   // Create standard Reindeer bar
   const CMTimerBarRen = CreateTimer('CMTimerBarRen', 'Next Reindeer', [
-    { id: 'CMTimerBarRenMinBar', color: ColorGray },
-    { id: 'CMTimerBarRenBar', color: ColorOrange },
+    { id: 'CMTimerBarRenMinBar', color: ColourGray },
+    { id: 'CMTimerBarRenBar', color: ColourOrange },
   ]);
   TimerBar.appendChild(CMTimerBarRen);
   const TimerBarBuffTimers = document.createElement('div');
@@ -57,28 +57,19 @@ 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,
-        ) *
+        (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,
+          (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 {
@@ -102,37 +93,27 @@ export function UpdateTimerBar() {
         );
       else l('CMTimerBarGCBar').textContent = '';
       l('CMTimerBarGCTime').textContent = Math.ceil(
-        (Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.time) /
-          Game.fps,
+        (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,
-        ) *
+        (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,
+          (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.minTime,
           Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.time,
         ) *
           maxWidthTwoBar) /
@@ -141,16 +122,13 @@ export function UpdateTimerBar() {
       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.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,
+        (Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.time) / Game.fps,
       );
       numberOfTimers += 1;
     } else {
@@ -166,12 +144,12 @@ export function UpdateTimerBar() {
           { id: `${Game.buffs[i].name}Bar` },
         ]);
         timer.style.display = '';
-        let classColor = '';
+        let classColour = '';
         // Gives specific timers specific colors
-        if (typeof BuffColors[Game.buffs[i].name] !== 'undefined') {
-          classColor = BuffColors[Game.buffs[i].name];
-        } else classColor = ColorPurple;
-        timer.lastChild.children[1].className = ColorBackPre + classColor;
+        if (typeof BuffColours[Game.buffs[i].name] !== 'undefined') {
+          classColour = BuffColours[Game.buffs[i].name];
+        } else classColour = ColourPurple;
+        timer.lastChild.children[1].className = ColourBackPre + classColour;
         timer.lastChild.children[1].style.color = 'black';
         if (CMOptions.TimerBarOverlay === 2)
           timer.lastChild.children[1].textContent = `${Math.round(
@@ -180,13 +158,10 @@ export function UpdateTimerBar() {
         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)) /
+            (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,
-        );
+        timer.lastChild.children[2].textContent = Math.ceil(Game.buffs[i].time / Game.fps);
         numberOfTimers += 1;
         BuffTimerBars[Game.buffs[i].name] = timer;
       }

src/Disp/Initialization/CreateSectionHideButtons.js

@@ -15,12 +15,9 @@ export default function CreateSectionHideButtons() {
       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';
+      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';
@@ -28,8 +25,7 @@ export default function CreateSectionHideButtons() {
   const b = document.createElement('a');
   b.className = 'option';
   b.onclick = function () {
-    if (l('products').style.display === 'grid')
-      l('products').style.display = 'none';
+    if (l('products').style.display === 'grid') l('products').style.display = 'none';
     else l('products').style.display = 'grid';
   };
   b.textContent = 'Hide/Show Buildings';

src/Disp/Initialization/CreateWrinklerButton.js

@@ -18,13 +18,7 @@ export default function CreateWrinklerButtons() {
   };
   popAllA.onmouseover = function () {
     Game.tooltip.dynamic = 1;
-    Game.tooltip.draw(
-      this,
-      function () {
-        return CreateTooltip('wb', 'PopAll');
-      },
-      'this',
-    );
+    Game.tooltip.draw(this, () => CreateTooltip('wb', 'PopAll'), 'this');
     Game.tooltip.wobble();
   };
   l('sectionLeftExtra').children[0].append(popAllA);
@@ -33,21 +27,14 @@ export default function CreateWrinklerButtons() {
   popFattestA.textContent = 'Pop Single Fattest';
   popFattestA.className = 'option';
   popFattestA.onclick = function () {
-    if (CacheWrinklersFattest[1] !== null)
-      Game.wrinklers[CacheWrinklersFattest[1]].hp = 0;
+    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.draw(this, () => CreateTooltip('wb', 'PopFattest'), 'this');
     Game.tooltip.wobble();
   };
   l('sectionLeftExtra').children[0].append(popFattestA);

src/Disp/Initialization/FlashScreen.js

@@ -1,9 +1,9 @@
 /**
  * This function creates a white square over the full screen and appends it to l('wrapper')
  */
-export default function CreateWhiteScreen() {
+export default function CreateFlashScreen() {
   const WhiteScreen = document.createElement('div');
-  WhiteScreen.id = 'CMWhiteScreen';
+  WhiteScreen.id = 'CMFlashScreen';
   WhiteScreen.style.width = '100%';
   WhiteScreen.style.height = '100%';
   WhiteScreen.style.backgroundColor = 'white';

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/Info/InfoPage.js

@@ -1,8 +1,8 @@
 /** Functions related to the Stats page */
 
-import { ToggleHeader } from '../../Config/ToggleSetting';
-import { CMOptions } from '../../Config/VariablesAndData';
-import { LatestReleaseNotes, ModDescription } from '../../Data/Moddata';
+import { ToggleHeader } from '../../../Config/ToggleSetting';
+import { CMOptions } from '../../../Config/VariablesAndData';
+import { LatestReleaseNotes, ModDescription } from '../../../Data/Moddata.ts';
 
 /**
  * This function adds stats created by CookieMonster to the stats page

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/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,228 @@
+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.ts';
+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);
+      Game.UpdateMenu();
+    };
+    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);
+      Game.UpdateMenu();
+    };
+    slider.onchange = function () {
+      ToggleConfigVolume(config);
+      Game.UpdateMenu();
+    };
+    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();
+      Game.UpdateMenu();
+    };
+    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,69 @@
+import { LoadConfig } from '../../../Config/SaveLoadReload/SaveLoadReloadSettings';
+import { CMOptions } from '../../../Config/VariablesAndData';
+import { ConfigGroups, ConfigGroupsNotification } from '../../../Data/Sectionheaders.ts';
+import Config from '../../../Data/SettingsData';
+import ConfigDefault from '../../../Data/SettingsDefault.ts';
+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,281 +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 PlaySound from '../Notifications/Sound';
-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);
-    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} `;
-    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();
-      };
-      // eslint-disable-next-line no-new
-      new JsColor(input, { hash: true, position: 'right', onInput: change });
-      const label = document.createElement('label');
-      label.textContent = Config.Colors.desc[Colors[i]];
-      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);
-
-  Object.keys(ConfigGroups).forEach((group) => {
-    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') {
-        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/Statistics/AddStatsPage.js

@@ -3,19 +3,21 @@
 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 * as GameData from '../../../Data/Gamedata.ts';
+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';
+} from '../../../Cache/VariablesAndData';
+import PopAllNormalWrinklers from '../../HelperFunctions/PopWrinklers';
+import { ClickTimes, CookieTimes } from '../../VariablesAndData';
+import GetCPS from '../../HelperFunctions/GetCPS';
+import Beautify from '../../BeautifyAndFormatting/Beautify';
+import AddMissingAchievements from './CreateMissingAchievements';
 
 /**
  * This function adds stats created by CookieMonster to the stats page
@@ -62,9 +64,7 @@ export default function AddMenuStats(title) {
       const popAllFrag = document.createDocumentFragment();
       popAllFrag.appendChild(
         document.createTextNode(
-          `${Beautify(CacheWrinklersTotal)} / ${Beautify(
-            CacheWrinklersNormal,
-          )} `,
+          `${Beautify(CacheWrinklersTotal)} / ${Beautify(CacheWrinklersNormal)} `,
         ),
       );
       const popAllA = document.createElement('a');
@@ -75,31 +75,22 @@ export default function AddMenuStats(title) {
       };
       popAllFrag.appendChild(popAllA);
       stats.appendChild(
-        CreateElements.StatsListing(
-          'basic',
-          'Rewards of Popping (All/Normal)',
-          popAllFrag,
-        ),
+        CreateElements.StatsListing('basic', 'Rewards of Popping (All/Normal)', popAllFrag),
       );
       const popFattestFrag = document.createDocumentFragment();
-      popFattestFrag.appendChild(
-        document.createTextNode(`${Beautify(CacheWrinklersFattest[0])} `),
-      );
+      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;
+        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'
+            CacheWrinklersFattest[1] !== null ? CacheWrinklersFattest[1] : 'None'
           })`,
           popFattestFrag,
         ),
@@ -114,7 +105,7 @@ export default function AddMenuStats(title) {
     stats.appendChild(
       CreateElements.StatsListing(
         'basic',
-        `Average Cookies Per Second (Past ${
+        `Average cookies per second (past ${
           CookieTimes[CMOptions.AvgCPSHist] < 60
             ? `${CookieTimes[CMOptions.AvgCPSHist]} seconds`
             : CookieTimes[CMOptions.AvgCPSHist] / 60 +
@@ -126,12 +117,27 @@ export default function AddMenuStats(title) {
     stats.appendChild(
       CreateElements.StatsListing(
         'basic',
-        `Average Cookie Clicks Per Second (Past ${
-          ClickTimes[CMOptions.AvgClicksHist]
-        }${CMOptions.AvgClicksHist === 0 ? ' second' : ' seconds'})`,
+        `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) => {
@@ -152,7 +158,7 @@ export default function AddMenuStats(title) {
       stats.appendChild(
         CreateElements.StatsListing(
           'basic',
-          'Missed Golden Cookies',
+          'Missed golden cookies',
           document.createTextNode(Beautify(Game.missedGoldenClicks)),
         ),
       );
@@ -164,9 +170,7 @@ export default function AddMenuStats(title) {
         Game.fps * 60 - (Game.OnAscend ? 0 : Game.T % (Game.fps * 60)),
         4,
       );
-      stats.appendChild(
-        CreateElements.StatsListing('basic', 'Time till autosave', timer),
-      );
+      stats.appendChild(CreateElements.StatsListing('basic', 'Time till autosave', timer));
     }
   }
 
@@ -175,4 +179,7 @@ export default function AddMenuStats(title) {
   if (CMOptions.MissingUpgrades) {
     AddMissingUpgrades();
   }
+  if (CMOptions.MissingAchievements) {
+    AddMissingAchievements();
+  }
 }

src/Disp/MenuSections/Statistics/CreateDOMElements.js

@@ -1,8 +1,8 @@
 /** 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';
+import { ToggleHeader } from '../../../Config/ToggleSetting';
+import { CMOptions } from '../../../Config/VariablesAndData';
+import { SimpleTooltipElements } from '../../VariablesAndData';
 
 /**
  * This function creates a header-object for the stats page
@@ -64,10 +64,7 @@ export function StatsListing(type, name, text, placeholder) {
       Game.tooltip.hide();
     };
     tooltip.onmouseover = function () {
-      Game.tooltip.draw(
-        this,
-        escape(SimpleTooltipElements[placeholder].innerHTML),
-      );
+      Game.tooltip.draw(this, escape(SimpleTooltipElements[placeholder].innerHTML));
     };
     tooltip.style.cursor = 'default';
     tooltip.style.display = 'inline-block';

src/Disp/MenuSections/Statistics/CreateMissingAchievements.js

@@ -0,0 +1,80 @@
+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().split(/\[(.*)\]/gi)[1];
+        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 CrateTooltipLockedAchievements(Game.AchievementsById[id]);
+                })(),
+              'top',
+            );
+            Game.tooltip.wobble();
+          }
+        };
+      }
+    });
+  }
+}

src/Disp/MenuSections/Statistics/CreateMissingUpgrades.js

@@ -4,7 +4,7 @@ import {
   CacheMissingUpgrades,
   CacheMissingUpgradesCookies,
   CacheMissingUpgradesPrestige,
-} from '../../Cache/VariablesAndData';
+} from '../../../Cache/VariablesAndData';
 
 /**
  * This function creates the missing upgrades sections for prestige, normal and cookie upgrades
@@ -12,22 +12,16 @@ import {
 export function AddMissingUpgrades() {
   l('menu').childNodes.forEach((menuSection) => {
     if (menuSection.children[0]) {
-      if (
-        menuSection.children[0].innerHTML === 'Prestige' &&
-        CacheMissingUpgradesPrestige
-      ) {
+      if (menuSection.children[0].innerHTML === 'Prestige' && CacheMissingUpgradesPrestige) {
         const prestigeUpgradesMissing =
-          CacheMissingUpgradesPrestige.match(new RegExp('div', 'g') || [])
-            .length / 2;
+          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,
-        )}%)`;
+        } (${Math.floor((prestigeUpgradesMissing / Game.PrestigeUpgrades.length) * 100)}%)`;
         title.appendChild(titlefrag);
         menuSection.appendChild(title);
         const upgrades = document.createElement('div');
@@ -46,8 +40,7 @@ export function AddMissingUpgrades() {
             Game.UpgradesByPool[''].length + Game.UpgradesByPool.tech.length
           } (${Math.floor(
             (normalUpgradesMissing /
-              (Game.UpgradesByPool[''].length +
-                Game.UpgradesByPool.tech.length)) *
+              (Game.UpgradesByPool[''].length + Game.UpgradesByPool.tech.length)) *
               100,
           )}%)`;
           title.appendChild(titlefrag);
@@ -62,17 +55,14 @@ export function AddMissingUpgrades() {
         }
         if (CacheMissingUpgradesCookies) {
           const cookieUpgradesMissing =
-            CacheMissingUpgradesCookies.match(new RegExp('div', 'g') || [])
-              .length / 2;
+            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,
-          )}%)`;
+          } (${Math.floor((cookieUpgradesMissing / Game.UpgradesByPool.cookie.length) * 100)}%)`;
           title.appendChild(titlefrag);
           menuSection.appendChild(title);
           const upgrades = document.createElement('div');
@@ -104,8 +94,8 @@ export function crateMissing(me) {
   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`};">
+	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

@@ -1,7 +1,7 @@
 /** Functions to create the individual sections of the Statistics page */
 
-import * as GameData from '../../Data/Gamedata';
-import { MaxChainCookieReward } from '../../Cache/Stats/ChainCookies';
+import * as GameData from '../../../Data/Gamedata.ts';
+import { MaxChainCookieReward } from '../../../Cache/Stats/ChainCookies';
 import {
   CacheAvgCPSWithChoEgg,
   CacheCentEgg,
@@ -35,18 +35,15 @@ import {
   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 { ColorGreen, ColorRed, ColorTextPre } from '../VariablesAndData';
+} from '../../../Cache/VariablesAndData';
+import { CMOptions } from '../../../Config/VariablesAndData';
+import ResetBonus from '../../../Sim/SimulationEvents/ResetAscension';
+import GetCPS from '../../HelperFunctions/GetCPS';
+import GetWrinkConfigBank from '../../HelperFunctions/GetWrinkConfigBank';
+import { ColourGreen, ColourRed, ColourTextPre } from '../../VariablesAndData';
 import { StatsListing, StatsHeader, StatsMissDisp } from './CreateDOMElements';
+import Beautify from '../../BeautifyAndFormatting/Beautify';
+import FormatTime from '../../BeautifyAndFormatting/FormatTime';
 
 /**
  * This function creates the "Lucky" section of the stats page
@@ -61,18 +58,15 @@ export function LuckySection() {
   const section = document.createElement('div');
   section.className = 'CMStatsLuckySection';
 
-  const luckyColor =
-    Game.cookies + GetWrinkConfigBank() < CacheLucky ? ColorRed : ColorGreen;
+  const luckyColour = Game.cookies + GetWrinkConfigBank() < CacheLucky ? ColourRed : ColourGreen;
   const luckyTime =
     Game.cookies + GetWrinkConfigBank() < CacheLucky
-      ? FormatTime(
-          (CacheLucky - (Game.cookies + GetWrinkConfigBank())) / GetCPS(),
-        )
+      ? FormatTime((CacheLucky - (Game.cookies + GetWrinkConfigBank())) / GetCPS())
       : '';
   const luckyReqFrag = document.createDocumentFragment();
   const luckyReqSpan = document.createElement('span');
   luckyReqSpan.style.fontWeight = 'bold';
-  luckyReqSpan.className = ColorTextPre + luckyColor;
+  luckyReqSpan.className = ColourTextPre + luckyColour;
   luckyReqSpan.textContent = Beautify(CacheLucky);
   luckyReqFrag.appendChild(luckyReqSpan);
   if (luckyTime !== '') {
@@ -81,28 +75,19 @@ export function LuckySection() {
     luckyReqFrag.appendChild(luckyReqSmall);
   }
   section.appendChild(
-    StatsListing(
-      'withTooltip',
-      '"Lucky!" Cookies Required',
-      luckyReqFrag,
-      goldCookTooltip,
-    ),
+    StatsListing('withTooltip', '"Lucky!" cookies required', luckyReqFrag, goldCookTooltip),
   );
 
-  const luckyColorFrenzy =
-    Game.cookies + GetWrinkConfigBank() < CacheLuckyFrenzy
-      ? ColorRed
-      : ColorGreen;
+  const luckyColourFrenzy =
+    Game.cookies + GetWrinkConfigBank() < CacheLuckyFrenzy ? ColourRed : ColourGreen;
   const luckyTimeFrenzy =
     Game.cookies + GetWrinkConfigBank() < CacheLuckyFrenzy
-      ? FormatTime(
-          (CacheLuckyFrenzy - (Game.cookies + GetWrinkConfigBank())) / GetCPS(),
-        )
+      ? FormatTime((CacheLuckyFrenzy - (Game.cookies + GetWrinkConfigBank())) / GetCPS())
       : '';
   const luckyReqFrenFrag = document.createDocumentFragment();
   const luckyReqFrenSpan = document.createElement('span');
   luckyReqFrenSpan.style.fontWeight = 'bold';
-  luckyReqFrenSpan.className = ColorTextPre + luckyColorFrenzy;
+  luckyReqFrenSpan.className = ColourTextPre + luckyColourFrenzy;
   luckyReqFrenSpan.textContent = Beautify(CacheLuckyFrenzy);
   luckyReqFrenFrag.appendChild(luckyReqFrenSpan);
   if (luckyTimeFrenzy !== '') {
@@ -113,7 +98,7 @@ export function LuckySection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      '"Lucky!" Cookies Required (Frenzy)',
+      '"Lucky!" cookies required (frenzy)',
       luckyReqFrenFrag,
       goldCookTooltip,
     ),
@@ -123,14 +108,13 @@ export function LuckySection() {
 
   const luckyRewardMaxSpan = document.createElement('span');
   luckyRewardMaxSpan.style.fontWeight = 'bold';
-  luckyRewardMaxSpan.className = ColorTextPre + CacheLuckyReward;
+  luckyRewardMaxSpan.className = ColourTextPre + CacheLuckyReward;
   luckyRewardMaxSpan.textContent =
-    Beautify(CacheLuckyReward) +
-    (luckySplit ? ` / ${Beautify(CacheLuckyWrathReward)}` : '');
+    Beautify(CacheLuckyReward) + (luckySplit ? ` / ${Beautify(CacheLuckyWrathReward)}` : '');
   section.appendChild(
     StatsListing(
       'withTooltip',
-      `"Lucky!" Reward (MAX)${luckySplit ? ' (Golden / Wrath)' : ''}`,
+      `"Lucky!" reward (max)${luckySplit ? ' (golden / wrath)' : ''}`,
       luckyRewardMaxSpan,
       goldCookTooltip,
     ),
@@ -138,14 +122,14 @@ export function LuckySection() {
 
   const luckyRewardFrenzyMaxSpan = document.createElement('span');
   luckyRewardFrenzyMaxSpan.style.fontWeight = 'bold';
-  luckyRewardFrenzyMaxSpan.className = ColorTextPre + luckyRewardFrenzyMaxSpan;
+  luckyRewardFrenzyMaxSpan.className = ColourTextPre + luckyRewardFrenzyMaxSpan;
   luckyRewardFrenzyMaxSpan.textContent =
     Beautify(CacheLuckyRewardFrenzy) +
     (luckySplit ? ` / ${Beautify(CacheLuckyWrathRewardFrenzy)}` : '');
   section.appendChild(
     StatsListing(
       'withTooltip',
-      `"Lucky!" Reward (MAX) (Frenzy)${luckySplit ? ' (Golden / Wrath)' : ''}`,
+      `"Lucky!" reward (max) (frenzy)${luckySplit ? ' (golden / wrath)' : ''}`,
       luckyRewardFrenzyMaxSpan,
       goldCookTooltip,
     ),
@@ -158,14 +142,14 @@ export function LuckySection() {
     ) + 13;
   const luckyCurSpan = document.createElement('span');
   luckyCurSpan.style.fontWeight = 'bold';
-  luckyCurSpan.className = ColorTextPre + luckyCurSpan;
+  luckyCurSpan.className = ColourTextPre + luckyCurSpan;
   luckyCurSpan.textContent =
     Beautify(CacheGoldenCookiesMult * luckyCurBase) +
     (luckySplit ? ` / ${Beautify(CacheWrathCookiesMult * luckyCurBase)}` : '');
   section.appendChild(
     StatsListing(
       'withTooltip',
-      `"Lucky!" Reward (CUR)${luckySplit ? ' (Golden / Wrath)' : ''}`,
+      `"Lucky!" reward (cur)${luckySplit ? ' (golden / wrath)' : ''}`,
       luckyCurSpan,
       goldCookTooltip,
     ),
@@ -186,21 +170,16 @@ export function ChainSection() {
   const section = document.createElement('div');
   section.className = 'CMStatsChainSection';
 
-  const chainColor =
-    Game.cookies + GetWrinkConfigBank() < CacheChainRequired
-      ? ColorRed
-      : ColorGreen;
+  const chainColour =
+    Game.cookies + GetWrinkConfigBank() < CacheChainRequired ? ColourRed : ColourGreen;
   const chainTime =
     Game.cookies + GetWrinkConfigBank() < CacheChainRequired
-      ? FormatTime(
-          (CacheChainRequired - (Game.cookies + GetWrinkConfigBank())) /
-            GetCPS(),
-        )
+      ? FormatTime((CacheChainRequired - (Game.cookies + GetWrinkConfigBank())) / GetCPS())
       : '';
   const chainReqFrag = document.createDocumentFragment();
   const chainReqSpan = document.createElement('span');
   chainReqSpan.style.fontWeight = 'bold';
-  chainReqSpan.className = ColorTextPre + chainColor;
+  chainReqSpan.className = ColourTextPre + chainColour;
   chainReqSpan.textContent = Beautify(CacheChainRequired);
   chainReqFrag.appendChild(chainReqSpan);
   if (chainTime !== '') {
@@ -209,29 +188,19 @@ export function ChainSection() {
     chainReqFrag.appendChild(chainReqSmall);
   }
   section.appendChild(
-    StatsListing(
-      'withTooltip',
-      '"Chain" Cookies Required',
-      chainReqFrag,
-      goldCookTooltip,
-    ),
+    StatsListing('withTooltip', '"Chain" cookies required', chainReqFrag, goldCookTooltip),
   );
 
-  const chainWrathColor =
-    Game.cookies + GetWrinkConfigBank() < CacheChainWrathRequired
-      ? ColorRed
-      : ColorGreen;
+  const chainWrathColour =
+    Game.cookies + GetWrinkConfigBank() < CacheChainWrathRequired ? ColourRed : ColourGreen;
   const chainWrathTime =
     Game.cookies + GetWrinkConfigBank() < CacheChainWrathRequired
-      ? FormatTime(
-          (CacheChainWrathRequired - (Game.cookies + GetWrinkConfigBank())) /
-            GetCPS(),
-        )
+      ? FormatTime((CacheChainWrathRequired - (Game.cookies + GetWrinkConfigBank())) / GetCPS())
       : '';
   const chainWrathReqFrag = document.createDocumentFragment();
   const chainWrathReqSpan = document.createElement('span');
   chainWrathReqSpan.style.fontWeight = 'bold';
-  chainWrathReqSpan.className = ColorTextPre + chainWrathColor;
+  chainWrathReqSpan.className = ColourTextPre + chainWrathColour;
   chainWrathReqSpan.textContent = Beautify(CacheChainWrathRequired);
   chainWrathReqFrag.appendChild(chainWrathReqSpan);
   if (chainWrathTime !== '') {
@@ -242,27 +211,22 @@ export function ChainSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      '"Chain" Cookies Required (Wrath)',
+      '"Chain" cookies required (Wrath)',
       chainWrathReqFrag,
       goldCookTooltip,
     ),
   );
 
-  const chainColorFrenzy =
-    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyRequired
-      ? ColorRed
-      : ColorGreen;
+  const chainColourFrenzy =
+    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyRequired ? ColourRed : ColourGreen;
   const chainTimeFrenzy =
     Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyRequired
-      ? FormatTime(
-          (CacheChainFrenzyRequired - (Game.cookies + GetWrinkConfigBank())) /
-            GetCPS(),
-        )
+      ? FormatTime((CacheChainFrenzyRequired - (Game.cookies + GetWrinkConfigBank())) / GetCPS())
       : '';
   const chainReqFrenFrag = document.createDocumentFragment();
   const chainReqFrenSpan = document.createElement('span');
   chainReqFrenSpan.style.fontWeight = 'bold';
-  chainReqFrenSpan.className = ColorTextPre + chainColorFrenzy;
+  chainReqFrenSpan.className = ColourTextPre + chainColourFrenzy;
   chainReqFrenSpan.textContent = Beautify(CacheChainFrenzyRequired);
   chainReqFrenFrag.appendChild(chainReqFrenSpan);
   if (chainTimeFrenzy !== '') {
@@ -273,28 +237,24 @@ export function ChainSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      '"Chain" Cookies Required (Frenzy)',
+      '"Chain" cookies required (Frenzy)',
       chainReqFrenFrag,
       goldCookTooltip,
     ),
   );
 
-  const chainWrathColorFrenzy =
-    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyWrathRequired
-      ? ColorRed
-      : ColorGreen;
+  const chainWrathColourFrenzy =
+    Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyWrathRequired ? ColourRed : ColourGreen;
   const chainWrathTimeFrenzy =
     Game.cookies + GetWrinkConfigBank() < CacheChainFrenzyWrathRequired
       ? FormatTime(
-          (CacheChainFrenzyWrathRequired -
-            (Game.cookies + GetWrinkConfigBank())) /
-            GetCPS(),
+          (CacheChainFrenzyWrathRequired - (Game.cookies + GetWrinkConfigBank())) / GetCPS(),
         )
       : '';
   const chainWrathReqFrenFrag = document.createDocumentFragment();
   const chainWrathReqFrenSpan = document.createElement('span');
   chainWrathReqFrenSpan.style.fontWeight = 'bold';
-  chainWrathReqFrenSpan.className = ColorTextPre + chainWrathColorFrenzy;
+  chainWrathReqFrenSpan.className = ColourTextPre + chainWrathColourFrenzy;
   chainWrathReqFrenSpan.textContent = Beautify(CacheChainFrenzyWrathRequired);
   chainWrathReqFrenFrag.appendChild(chainWrathReqFrenSpan);
   if (chainWrathTimeFrenzy !== '') {
@@ -305,7 +265,7 @@ export function ChainSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      '"Chain" Cookies Required (Frenzy) (Wrath)',
+      '"Chain" cookies required (frenzy) (Wrath)',
       chainWrathReqFrenFrag,
       goldCookTooltip,
     ),
@@ -314,11 +274,9 @@ export function ChainSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      '"Chain" Reward (MAX) (Golden / Wrath)',
+      '"Chain" reward (max) (golden / wrath)',
       document.createTextNode(
-        `${Beautify(CacheChainMaxReward[0])} / ${Beautify(
-          CacheChainWrathMaxReward[0],
-        )}`,
+        `${Beautify(CacheChainMaxReward[0])} / ${Beautify(CacheChainWrathMaxReward[0])}`,
       ),
       goldCookTooltip,
     ),
@@ -327,11 +285,9 @@ export function ChainSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      '"Chain" Reward (MAX) (Frenzy) (Golden / Wrath)',
+      '"Chain" reward (max) (frenzy) (golden / wrath)',
       document.createTextNode(
-        `${Beautify(CacheChainFrenzyMaxReward[0])} / ${Beautify(
-          CacheChainFrenzyMaxReward[0],
-        )}`,
+        `${Beautify(CacheChainFrenzyMaxReward[0])} / ${Beautify(CacheChainFrenzyMaxReward[0])}`,
       ),
       goldCookTooltip,
     ),
@@ -341,23 +297,13 @@ export function ChainSection() {
     Game.cookiesPs * 60 * 60 * 6 * CacheDragonsFortuneMultAdjustment,
     Game.cookies * 0.5,
   );
-  const chainCur = MaxChainCookieReward(
-    7,
-    chainCurMax,
-    CacheGoldenCookiesMult,
-  )[0];
-  const chainCurWrath = MaxChainCookieReward(
-    6,
-    chainCurMax,
-    CacheWrathCookiesMult,
-  )[0];
+  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)}`,
-      ),
+      '"Chain" reward (cur) (golden / wrath)',
+      document.createTextNode(`${Beautify(chainCur)} / ${Beautify(chainCurWrath)}`),
       goldCookTooltip,
     ),
   );
@@ -365,11 +311,9 @@ export function ChainSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      'CPS Needed For Next Level (G / W)',
+      'CPS needed for next level (g / w)',
       document.createTextNode(
-        `${Beautify(CacheChainRequiredNext)} / ${Beautify(
-          CacheChainWrathRequiredNext,
-        )}`,
+        `${Beautify(CacheChainRequiredNext)} / ${Beautify(CacheChainWrathRequiredNext)}`,
       ),
       'ChainNextLevelPlaceholder',
     ),
@@ -377,7 +321,7 @@ export function ChainSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      'CPS Needed For Next Level (Frenzy) (G / W)',
+      'CPS needed for next level (frenzy) (g / w)',
       document.createTextNode(
         `${Beautify(CacheChainFrenzyRequiredNext)} / ${Beautify(
           CacheChainFrenzyWrathRequiredNext,
@@ -397,19 +341,17 @@ export function SpellsSection() {
   const section = document.createElement('div');
   section.className = 'CMStatsSpellsSection';
 
-  const conjureColor =
-    Game.cookies + GetWrinkConfigBank() < CacheConjure ? ColorRed : ColorGreen;
+  const conjureColour =
+    Game.cookies + GetWrinkConfigBank() < CacheConjure ? ColourRed : ColourGreen;
   const conjureTime =
     Game.cookies + GetWrinkConfigBank() < CacheConjure
-      ? FormatTime(
-          (CacheConjure - (Game.cookies + GetWrinkConfigBank())) / GetCPS(),
-        )
+      ? FormatTime((CacheConjure - (Game.cookies + GetWrinkConfigBank())) / GetCPS())
       : '';
 
   const conjureReqFrag = document.createDocumentFragment();
   const conjureReqSpan = document.createElement('span');
   conjureReqSpan.style.fontWeight = 'bold';
-  conjureReqSpan.className = ColorTextPre + conjureColor;
+  conjureReqSpan.className = ColourTextPre + conjureColour;
   conjureReqSpan.textContent = Beautify(CacheConjure);
   conjureReqFrag.appendChild(conjureReqSpan);
   if (conjureTime !== '') {
@@ -420,7 +362,7 @@ export function SpellsSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      '"Conjure Baked Goods" Cookies Required',
+      '"Conjure Baked Goods" cookies required',
       conjureReqFrag,
       'GoldCookTooltipPlaceholder',
     ),
@@ -428,31 +370,27 @@ export function SpellsSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      '"Conjure Baked Goods" Reward (MAX)',
+      '"Conjure Baked Goods" reward (max)',
       document.createTextNode(Beautify(CacheConjureReward)),
       'GoldCookTooltipPlaceholder',
     ),
   );
 
-  const conjureFrenzyColor =
-    Game.cookies + GetWrinkConfigBank() < CacheConjure * 7
-      ? ColorRed
-      : ColorGreen;
+  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(),
-        )
+      ? 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.className = ColourTextPre + conjureFrenzyColour;
   conjureFrenzyReqSpan.textContent = Beautify(CacheConjure * 7);
   conjureFrenzyReqFrag.appendChild(conjureFrenzyReqSpan);
   if (conjureFrenzyTime !== '') {
@@ -463,7 +401,7 @@ export function SpellsSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      '"Conjure Baked Goods" Cookies Required (Frenzy)',
+      '"Conjure Baked Goods" cookies required (frenzy)',
       conjureFrenzyReqFrag,
       'GoldCookTooltipPlaceholder',
     ),
@@ -471,7 +409,7 @@ export function SpellsSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      '"Conjure Baked Goods" Reward (MAX) (Frenzy)',
+      '"Conjure Baked Goods" reward (max) (frenzy)',
       document.createTextNode(Beautify(CacheConjureReward * 7)),
       'GoldCookTooltipPlaceholder',
     ),
@@ -479,7 +417,7 @@ export function SpellsSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      '"Conjure Baked Goods" Reward (CUR)',
+      '"Conjure Baked Goods" reward (cur)',
       document.createTextNode(Beautify(conjureFrenzyCur)),
       'GoldCookTooltipPlaceholder',
     ),
@@ -488,10 +426,8 @@ export function SpellsSection() {
     section.appendChild(
       StatsListing(
         'withTooltip',
-        '"Spontaneous Edifice" Cookies Required (most expensive building)',
-        document.createTextNode(
-          `${Beautify(CacheEdifice)} (${CacheEdificeBuilding})`,
-        ),
+        '"Spontaneous Edifice" cookies required (most expensive building)',
+        document.createTextNode(`${Beautify(CacheEdifice)} (${CacheEdificeBuilding})`),
         'GoldCookTooltipPlaceholder',
       ),
     );
@@ -507,61 +443,52 @@ export function GardenSection() {
   const section = document.createElement('div');
   section.className = 'CMStatsGardenSection';
 
-  const bakeberryColor =
-    Game.cookies < Game.cookiesPs * 60 * 10 * 100 ? ColorRed : ColorGreen;
+  const bakeberryColour = Game.cookies < Game.cookiesPs * 60 * 10 * 100 ? ColourRed : ColourGreen;
   const bakeberryFrag = document.createElement('span');
   bakeberryFrag.style.fontWeight = 'bold';
-  bakeberryFrag.className = ColorTextPre + bakeberryColor;
+  bakeberryFrag.className = ColourTextPre + bakeberryColour;
   bakeberryFrag.textContent = Beautify(Game.cookiesPs * 60 * 10 * 100);
   section.appendChild(
-    StatsListing(
-      'basic',
-      'Cookies required for max reward of Bakeberry: ',
-      bakeberryFrag,
-    ),
+    StatsListing('basic', 'Cookies required for max reward of Bakeberry: ', bakeberryFrag),
   );
 
-  const chocorootColor =
-    Game.cookies < Game.cookiesPs * 60 * 100 ? ColorRed : ColorGreen;
+  const chocorootColour = Game.cookies < Game.cookiesPs * 60 * 100 ? ColourRed : ColourGreen;
   const chocorootFrag = document.createElement('span');
   chocorootFrag.style.fontWeight = 'bold';
-  chocorootFrag.className = ColorTextPre + chocorootColor;
+  chocorootFrag.className = ColourTextPre + chocorootColour;
   chocorootFrag.textContent = Beautify(Game.cookiesPs * 60 * 100);
   section.appendChild(
-    StatsListing(
-      'basic',
-      'Cookies required for max reward of Chocoroot: ',
-      chocorootFrag,
-    ),
+    StatsListing('basic', 'Cookies required for max reward of Chocoroot: ', chocorootFrag),
   );
 
-  const queenbeetColor =
-    Game.cookies < Game.cookiesPs * 60 * 60 * 25 ? ColorRed : ColorGreen;
+  const queenbeetColour = Game.cookies < Game.cookiesPs * 60 * 60 * 25 ? ColourRed : ColourGreen;
   const queenbeetFrag = document.createElement('span');
   queenbeetFrag.style.fontWeight = 'bold';
-  queenbeetFrag.className = ColorTextPre + queenbeetColor;
+  queenbeetFrag.className = ColourTextPre + queenbeetColour;
   queenbeetFrag.textContent = Beautify(Game.cookiesPs * 60 * 60 * 25);
   section.appendChild(
-    StatsListing(
-      'basic',
-      'Cookies required for max reward of Queenbeet: ',
-      queenbeetFrag,
-    ),
+    StatsListing('basic', 'Cookies required for max reward of Queenbeet: ', queenbeetFrag),
   );
 
-  const duketaterColor =
-    Game.cookies < Game.cookiesPs * 60 * 15 * 100 ? ColorRed : ColorGreen;
+  const duketaterColour = Game.cookies < Game.cookiesPs * 60 * 15 * 100 ? ColourRed : ColourGreen;
   const duketaterFrag = document.createElement('span');
   duketaterFrag.style.fontWeight = 'bold';
-  duketaterFrag.className = ColorTextPre + duketaterColor;
+  duketaterFrag.className = ColourTextPre + duketaterColour;
   duketaterFrag.textContent = Beautify(Game.cookiesPs * 60 * 15 * 100);
   section.appendChild(
-    StatsListing(
-      'basic',
-      'Cookies required for max reward of Duketater: ',
-      duketaterFrag,
-    ),
+    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;
 }
 
@@ -578,18 +505,14 @@ export function PrestigeSection() {
       CacheRealCookiesEarned +
         Game.cookiesReset +
         CacheWrinklersTotal +
-        (Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg')
-          ? CacheLastChoEgg
-          : 0),
+        (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)}`,
-      ),
+      'Prestige level (cur / max)',
+      document.createTextNode(`${Beautify(Game.prestige)} / ${Beautify(possiblePresMax)}`),
       'PrestMaxTooltipPlaceholder',
     ),
   );
@@ -600,26 +523,19 @@ export function PrestigeSection() {
       (CacheRealCookiesEarned +
         Game.cookiesReset +
         CacheWrinklersTotal +
-        ((
-          Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg')
-            ? CacheLastChoEgg
-            : 0
-        )
+        ((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,
-  )})`;
+  cookiesNextSmall.textContent = ` (${FormatTime(neededCook / CacheAvgCPSWithChoEgg, 1)})`;
   cookiesNextFrag.appendChild(cookiesNextSmall);
   section.appendChild(
     StatsListing(
       'withTooltip',
-      'Cookies To Next Level',
+      'Cookies to next level',
       cookiesNextFrag,
       'NextPrestTooltipPlaceholder',
     ),
@@ -628,7 +544,7 @@ export function PrestigeSection() {
   section.appendChild(
     StatsListing(
       'withTooltip',
-      'Heavenly Chips (CUR / MAX)',
+      'Heavenly chips (cur / max)',
       document.createTextNode(
         `${Beautify(Game.heavenlyChips)} / ${Beautify(
           possiblePresMax - Game.prestige + Game.heavenlyChips,
@@ -641,7 +557,7 @@ export function PrestigeSection() {
   section.appendChild(
     StatsListing(
       'basic',
-      'Heavenly Chips Per Second (last 5 seconds)',
+      'Heavenly chips per second (last 5 seconds)',
       document.createTextNode(Beautify(CacheHCPerSecond, 2)),
     ),
   );
@@ -649,23 +565,20 @@ export function PrestigeSection() {
   const HCTarget = Number(CMOptions.HeavenlyChipsTarget);
   if (!Number.isNaN(HCTarget)) {
     const CookiesTillTarget =
-      HCTarget -
-      Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned));
+      HCTarget - Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned));
     if (CookiesTillTarget > 0) {
       section.appendChild(
         StatsListing(
           'basic',
-          'Heavenly Chips To Target Set In Settings (CUR)',
+          '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),
-          ),
+          'Time till target (cur, current 5 second average)',
+          document.createTextNode(FormatTime(CookiesTillTarget / CacheHCPerSecond)),
         ),
       );
     }
@@ -681,18 +594,11 @@ export function PrestigeSection() {
     resetFrag.appendChild(resetSmall);
   }
   section.appendChild(
-    StatsListing(
-      'withTooltip',
-      'Reset Bonus Income',
-      resetFrag,
-      'ResetTooltipPlaceholder',
-    ),
+    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 willHave = Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned));
   const willGet = willHave - currentPrestige;
   if (!Game.Has('Lucky digit')) {
     let delta7 = 7 - (willHave % 10);
@@ -705,9 +611,7 @@ export function PrestigeSection() {
         `${next7Total.toLocaleString()} / ${next7Reset.toLocaleString()} (+${delta7})`,
       ),
     );
-    section.appendChild(
-      StatsListing('basic', 'Next "Lucky Digit" (total / reset)', frag7),
-    );
+    section.appendChild(StatsListing('basic', 'Next "Lucky Digit" (total / reset)', frag7));
   }
 
   if (!Game.Has('Lucky number')) {
@@ -721,9 +625,7 @@ export function PrestigeSection() {
         `${next777Total.toLocaleString()} / ${next777Reset.toLocaleString()} (+${delta777})`,
       ),
     );
-    section.appendChild(
-      StatsListing('basic', 'Next "Lucky Number" (total / reset)', frag777),
-    );
+    section.appendChild(StatsListing('basic', 'Next "Lucky Number" (total / reset)', frag777));
   }
 
   if (!Game.Has('Lucky payout')) {
@@ -737,9 +639,7 @@ export function PrestigeSection() {
         `${next777777Total.toLocaleString()} / ${next777777Reset.toLocaleString()} (+${delta777777})`,
       ),
     );
-    section.appendChild(
-      StatsListing('basic', 'Next "Lucky Payout" (total / reset)', frag777777),
-    );
+    section.appendChild(StatsListing('basic', 'Next "Lucky Payout" (total / reset)', frag777777));
   }
 
   return section;
@@ -789,15 +689,7 @@ export function SeasonSection() {
       specDisp = true;
     }
   });
-  const missingPlantDrops = [];
-  Object.keys(GameData.PlantDrops).forEach((i) => {
-    if (!Game.HasUnlocked(GameData.PlantDrops[i])) {
-      missingPlantDrops.push(GameData.PlantDrops[i]);
-      specDisp = true;
-    }
-  });
-  const choEgg =
-    Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg');
+  const choEgg = Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg');
   const centEgg = Game.Has('Century egg');
 
   if (Game.season === 'christmas' || specDisp || choEgg || centEgg) {
@@ -821,13 +713,14 @@ export function SeasonSection() {
           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) * 100)}% / ${Beautify(
-                (1 - failRateHalloween * 0.9) * 100,
+              `${Beautify((1 - failRateHalloween) * obtainedCookiesChance * 100)}% / ${Beautify(
+                (1 - failRateHalloween * 0.9) * obtainedCookiesChance * 100,
               )}%`,
             ),
           ),
@@ -851,12 +744,13 @@ export function SeasonSection() {
           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) * 100)}%`,
+              `${Beautify((1 - failRateChristmas) * obtainedCookiesChance * 100)}%`,
             ),
           ),
         );
@@ -884,23 +778,14 @@ export function SeasonSection() {
         // 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 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);
+        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) {
@@ -916,50 +801,29 @@ export function SeasonSection() {
             'basic',
             'Chance of receiving an egg from wrinkler/golden cookie',
             document.createTextNode(
-              `${Beautify(dropRateEgg(0.98)[0] * 100)}% / ${Beautify(
-                dropRateEgg(0.9)[0] * 100,
-              )}%`,
+              `${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),
-          ),
+          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,
-              )}%`,
+              `${Beautify(dropRateEgg(0.98)[1] * 100)}% / ${Beautify(dropRateEgg(0.9)[1] * 100)}%`,
             ),
           ),
         );
       }
-      if (missingPlantDrops.length !== 0) {
-        section.appendChild(
-          StatsListing(
-            'basic',
-            'Rare plant drops left to unlock',
-            StatsMissDisp(missingPlantDrops),
-          ),
-        );
-      }
 
       if (Game.season === 'christmas')
         section.appendChild(
-          StatsListing(
-            'basic',
-            'Reindeer reward',
-            document.createTextNode(Beautify(CacheSeaSpec)),
-          ),
+          StatsListing('basic', 'Reindeer reward', document.createTextNode(Beautify(CacheSeaSpec))),
         );
       if (choEgg) {
         section.appendChild(
@@ -976,9 +840,7 @@ export function SeasonSection() {
           StatsListing(
             'basic',
             'Century egg multiplier',
-            document.createTextNode(
-              `${Math.round((CacheCentEgg - 1) * 10000) / 100}%`,
-            ),
+            document.createTextNode(`${Math.round((CacheCentEgg - 1) * 10000) / 100}%`),
           ),
         );
       }