Merge pull request #644 from Aktanusa/dev

Hotfix

.eslintignore

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

.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+	env: {
+		browser: true,
+		es2021: true,
+	},
+	globals: {
+		Game: 'writable',
+		l: 'readonly',
+		b64_to_utf8: 'readonly',
+		utf8_to_b64: 'readonly',
+		realAudio: 'readonly',
+		BeautifyAll: 'readonly',
+		CM: 'writable',
+		unsafeWindow: 'readonly',
+	},
+	extends: 'airbnb-base',
+	parserOptions: {
+		ecmaVersion: 12,
+	},
+	rules: {
+		indent: ['error', 'tab'],
+		'import/no-named-default': 'off',
+		'import/no-mutable-exports': 'off',
+		'no-tabs': 'off',
+		'max-len': 'off',
+		'no-param-reassign': 'off',
+		'no-plusplus': 'off',
+		'no-new-func': 'off',
+		'no-restricted-syntax': 'off',
+		'no-mixed-operators': 'off',
+		'prefer-destructuring': 'off',
+		'func-names': 'off',
+		'no-console': 'off',
+		'no-nested-ternary': 'off',
+		'prefer-arrow-callback': 'off',
+		'no-new': 'off',
+		'no-alert': 'off',
+		'no-restricted-globals': 'off',
+	},
+};

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,23 @@
+---
+name: Bug report
+about: Please use this template to report bugs you might have found
+title: ''
+labels: Bug
+assignees: ''
+
+---
+
+**Describe the bug**
+Please describe the bug and what you would have expected the mod to do
+
+**To Reproduce**
+The steps needed to reproduce the behavior:
+1. ...
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Save file**
+```
+If applicable please copy your save file here
+```

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,14 @@
+---
+name: Feature request
+about: Suggest an idea for CookieMonster
+title: ''
+labels: Enhancement
+assignees: ''
+
+---
+
+**Describe the function you'd like to see added to CookieMonster**
+A clear and concise description of what you want to happen.
+
+**Additional files**
+Add any other files such as save files or screenshots about the feature request here.

.github/workflows/CI.yml

@@ -0,0 +1,31 @@
+name: CI
+on: pull_request
+jobs:
+  Check_ESLint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Run ESLint
+      run: |
+        npm install
+        npx eslint src
+  Check_main_file:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Check if CookieMonster.js is built correctly 
+      run: |
+        npm install
+        npx webpack -o ./test --env production
+        if cmp <(head -n 2 dist/CookieMonster.js) <(head -n 2 test/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 ###'
+            exit 1
+        fi

.gitignore

@@ -0,0 +1 @@
+node_modules

CONTRIBUTING.md

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

Combine.bat

@@ -1,2 +0,0 @@
-@ECHO OFF
-COPY /B /Y .\src\Header.js + .\src\Cache.js + .\src\Config.js + .\src\Data.js + .\src\Disp.js + .\src\Main.js + .\src\Sim.js + .\src\Footer.js CookieMonster.js

Combine.sh

@@ -1,2 +0,0 @@
-#!/bin/sh
-cat ./src/Header.js ./src/Cache.js ./src/Config.js ./src/Data.js ./src/Disp.js ./src/Main.js ./src/Sim.js ./src/Footer.js > CookieMonster.js

CookieMonster.user.js

@@ -0,0 +1,19 @@
+// ==UserScript==
+// @name Cookie Monster
+// @include /https?://orteil.dashnet.org/cookieclicker/
+// ==/UserScript==
+
+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"
+        );
+        clearInterval(readyCheck);
+    }
+}, 1000);

README.md

@@ -1,18 +1,18 @@
-# Cookie Monster
+![ESLint](https://github.com/Aktanusa/CookieMonster/workflows/ESLint/badge.svg?event=push)
+## Cookie Monster
 
 **Cookie Monster** is an addon you can load into Cookie Clicker, that 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.
+The mod helps you to *whichever* degree you want, if you only need some help shortening long numbers, it does that. If you need to be accompanied by hand to pick the best buildings to buy, it does that, but **everything is an option**.
 
-This is a helper, and it is here to help you at *whichever* degree you want, if you only need some help shortening long numbers, it does that. If you need to be accompanied by hand to pick the best buildings to buy, it does that, but **everything is an option**.
+### Current version
+The `gh-pages` branch hosts the latest version intended for general users. All development and pull requests should target the `dev` branch.
 
-## Current version
+### What it does
 
-You can see the current version, and a full history of all versions and what they changed by consulting the [releases page](https://github.com/Aktanusa/CookieMonster/releases).
-
-## What it does
-
-At its core, Cookie Monster computes an index on both buildings and upgrades:
-
-* **Payback Period (PP)**: Indicates how much a building is worth by using the formula max(cost - cookies in bank, 0)/cps + cost/Δ cps
+At its core, Cookie Monster computes an index for both buildings and upgrades: the **Payback Period (PP)**. This indicates how much a building is worth by using the following formula: 
+```
+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.
 
@@ -28,27 +28,9 @@ This index is computed for buildings and upgrades. If the relevant option is ena
 
 Note: For this index, **lower is better**, meaning a building with a PP of 1 is more interesting than one with a PP of 3.
 
-## What it doesn't do
+## Using
 
-Most likely you'll find items in gray like Golden Cookie upgrades, clicking upgrades, season upgrades – everything that doesn't earn you a direct bonus to your income will display as gray. This means the following upgrades are **not** taken into account by Cookie Monster:
-
-* Plastic mouse
-* Iron mouse
-* Titanium mouse
-* Adamantium mouse
-* Unobtainium mouse
-* Lucky day
-* Serendipity
-* Get lucky
-* Elder Pledge
-* Sacrificial rolling pins
-* **etc.**
-
-Do note though that, although these upgrades have no direct value, if buying them earns you an achievement of some sort which in return gives you milk and income, Cookie Monster **will** display that value.
-
-# Using
-
-## Bookmarklet
+### Bookmarklet
 
 Copy this code and save it as a bookmark. Paste it in the URL section. To activate, click the bookmark when the game's open.
 
@@ -60,78 +42,27 @@ javascript: (function () {
 
 If (for some reason) the above doesn't work, trying pasting everything after the <code>javascript:</code> bit into your browser's console.
 
-For beta, use the following instead:
+### Userscript
 
-```javascript
-javascript: (function () {
-	Game.LoadMod('https://aktanusa.github.io/CookieMonster/CookieMonsterBeta.js');
-}());
-```
+If you'd rather use the addon as a [userscript](https://en.wikipedia.org/wiki/Userscript) to automatically load _Cookie Monster_ every time the original game loads, install the `CookieMonster.user.js` file. You can do this by clicking on the file in the file-list and clicking "raw".
 
-## Userscript
+**Note that to avoid conflicts Cookie Monster should ideally be loaded after any other content mods have been loaded**
 
-If you'd rather use the addon as a script via per example *Greasemonkey* or *Tampermonkey*, you can use the following script, which will automatically load *Cookie Monster* every time the original game loads. You may need to specify <code>http://orteil.dashnet.org/cookieclicker/</code> when asked for a *namespace* or *includes*. For how to add an userscript to your browser, refer to your browser/plugin's documentation as the method changes for each one.
+## Bugs and suggestions
 
-```javascript
-// ==UserScript==
-// @name Cookie Monster
-// @namespace Cookie
-// @include http://orteil.dashnet.org/cookieclicker/
-// @version 1
-// @grant none
-// ==/UserScript==
+Any bug or suggestion should be **opened as an issue** [in the repository](https://github.com/Aktanusa/CookieMonster/issues) for easier tracking. This allows us to close issues once they're fixed.
 
-var code = "(" + (function() {
-    var checkReady = setInterval(function() {
-        if (typeof Game.ready !== 'undefined' && Game.ready) {
-            Game.LoadMod('https://aktanusa.github.io/CookieMonster/CookieMonster.js');
-            clearInterval(checkReady);
-        }
-    }, 1000);
-}).toString() + ")()";
-
-window.eval(code);
-```
-If you are using the beta, use this instead:
-
-```javascript
-// ==UserScript==
-// @name Cookie Monster Beta
-// @namespace Cookie
-// @include http://orteil.dashnet.org/cookieclicker/beta/
-// @version 1
-// @grant none
-// ==/UserScript==
-
-var code = "(" + (function() {
-    var checkReady = setInterval(function() {
-        if (typeof Game.ready !== 'undefined' && Game.ready) {
-            Game.LoadMod('https://aktanusa.github.io/CookieMonster/CookieMonsterBeta.js');
-            clearInterval(checkReady);
-        }
-    }, 1000);
-}).toString() + ")()";
-
-window.eval(code);
-```
-
-# Bugs and suggestions
-
-Any bug or suggestion should be **opened as an issue** [in the repository](https://github.com/Aktanusa/CookieMonster/issues) for easier tracking. This allows me to close issues once they're fixed.
-
-Before submitting a bug, make sure to give a shot at the latest version of the addon on the <code>dev</code> branch. For this, use the following bookmarklet:
-
-```javascript
-javascript: (function () {
-	Game.LoadMod('https://cdn.rawgit.com/Aktanusa/CookieMonster/dev/CookieMonster.js');
-}());
-```
-
-If the bug is still here, you can submit an issue for it.
+Before submitting a bug, make sure to give a shot at the latest version of the addon on the `dev` branch. This version can be tested by copying the `CookieMonster.js` file of the dev branch into your console. If the bug is still here, you can submit an issue for it. Please do so by using the bug report template.
 
 All suggestions are welcome, even the smallest ones.
 
-# Contributors
+## Contributing
+
+To contribute you can fork and clone the repository and run `npm install`.
+
+Please also remember to run `npm run build` after saving all your changes to build the final `CookieMonster.js` file.
+
+## Contributors
 
 * **[Raving_Kumquat](https://cookieclicker.wikia.com/wiki/User:Raving_Kumquat)**: Original author
 * **[Maxime Fabre](https://github.com/Anahkiasen)**: Previous maintainer
@@ -139,4 +70,6 @@ All suggestions are welcome, even the smallest ones.
 * **[Alhifar](https://github.com/Alhifar)**: Missed Golden Cookie Stat
 * **[BlackenedGem](https://github.com/BlackenedGem)**: Golden/Wrath Cookie Favicons
 * **[Sandworm](https://github.com/svschouw)**: Modified PP calculation
-* **[Aktanusa](https://github.com/Aktanusa)**: Current maintainer
+* **[Aktanusa](https://github.com/Aktanusa)**: Current maintainer
+* **[DanielNoord](https://github.com/DanielNoord)**: Current maintainer
+* **[bitsandbytes1708](https://github.com/bitsandbytes1708)**: Current maintainer

dist/CookieMonster.js.LICENSE.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/
+ */

jscolor/jscolor.js

@@ -1,997 +0,0 @@
-/**
- * jscolor, JavaScript Color Picker
- *
- * @version 1.4.3
- * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
- * @author  Jan Odvarko, http://odvarko.cz
- * @created 2008-06-15
- * @updated 2014-07-16
- * @link    http://jscolor.com
- */
-
-
-var jscolor = {
-
-
-	dir : '', // location of jscolor directory (leave empty to autodetect)
-	bindClass : 'color', // class name
-	binding : true, // automatic binding via <input class="...">
-	preloading : true, // use image preloading?
-
-
-	install : function() {
-		jscolor.addEvent(window, 'load', jscolor.init);
-	},
-
-
-	init : function() {
-		if(jscolor.binding) {
-			jscolor.bind();
-		}
-		if(jscolor.preloading) {
-			jscolor.preload();
-		}
-	},
-
-
-	getDir : function() {
-		if(!jscolor.dir) {
-			var detected = jscolor.detectDir();
-			jscolor.dir = detected!==false ? detected : 'jscolor/';
-		}
-		return jscolor.dir;
-	},
-
-
-	detectDir : function() {
-		var base = location.href;
-
-		var e = document.getElementsByTagName('base');
-		for(var i=0; i<e.length; i+=1) {
-			if(e[i].href) { base = e[i].href; }
-		}
-
-		var e = document.getElementsByTagName('script');
-		for(var i=0; i<e.length; i+=1) {
-			if(e[i].src && /(^|\/)jscolor\.js([?#].*)?$/i.test(e[i].src)) {
-				var src = new jscolor.URI(e[i].src);
-				var srcAbs = src.toAbsolute(base);
-				srcAbs.path = srcAbs.path.replace(/[^\/]+$/, ''); // remove filename
-				srcAbs.query = null;
-				srcAbs.fragment = null;
-				return srcAbs.toString();
-			}
-		}
-		return false;
-	},
-
-
-	bind : function() {
-		var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')(\\s*(\\{[^}]*\\})|\\s|$)', 'i');
-		var e = document.getElementsByTagName('input');
-		for(var i=0; i<e.length; i+=1) {
-			var m;
-			if(!e[i].color && e[i].className && (m = e[i].className.match(matchClass))) {
-				var prop = {};
-				if(m[4]) {
-					try {
-						prop = (new Function ('return (' + m[4] + ')'))();
-					} catch(eInvalidProp) {}
-				}
-				e[i].color = new jscolor.color(e[i], prop);
-			}
-		}
-	},
-
-
-	preload : function() {
-		for(var fn in jscolor.imgRequire) {
-			if(jscolor.imgRequire.hasOwnProperty(fn)) {
-				jscolor.loadImage(fn);
-			}
-		}
-	},
-
-
-	images : {
-		pad : [ 181, 101 ],
-		sld : [ 16, 101 ],
-		cross : [ 15, 15 ],
-		arrow : [ 7, 11 ]
-	},
-
-
-	imgRequire : {},
-	imgLoaded : {},
-
-
-	requireImage : function(filename) {
-		jscolor.imgRequire[filename] = true;
-	},
-
-
-	loadImage : function(filename) {
-		if(!jscolor.imgLoaded[filename]) {
-			jscolor.imgLoaded[filename] = new Image();
-			jscolor.imgLoaded[filename].src = jscolor.getDir()+filename;
-		}
-	},
-
-
-	fetchElement : function(mixed) {
-		return typeof mixed === 'string' ? document.getElementById(mixed) : mixed;
-	},
-
-
-	addEvent : function(el, evnt, func) {
-		if(el.addEventListener) {
-			el.addEventListener(evnt, func, false);
-		} else if(el.attachEvent) {
-			el.attachEvent('on'+evnt, func);
-		}
-	},
-
-
-	fireEvent : function(el, evnt) {
-		if(!el) {
-			return;
-		}
-		if(document.createEvent) {
-			var ev = document.createEvent('HTMLEvents');
-			ev.initEvent(evnt, true, true);
-			el.dispatchEvent(ev);
-		} else if(document.createEventObject) {
-			var ev = document.createEventObject();
-			el.fireEvent('on'+evnt, ev);
-		} else if(el['on'+evnt]) { // alternatively use the traditional event model (IE5)
-			el['on'+evnt]();
-		}
-	},
-
-
-	getElementPos : function(e) {
-		var e1=e, e2=e;
-		var x=0, y=0;
-		if(e1.offsetParent) {
-			do {
-				x += e1.offsetLeft;
-				y += e1.offsetTop;
-			} while(e1 = e1.offsetParent);
-		}
-		while((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY') {
-			x -= e2.scrollLeft;
-			y -= e2.scrollTop;
-		}
-		return [x, y];
-	},
-
-
-	getElementSize : function(e) {
-		return [e.offsetWidth, e.offsetHeight];
-	},
-
-
-	getRelMousePos : function(e) {
-		var x = 0, y = 0;
-		if (!e) { e = window.event; }
-		if (typeof e.offsetX === 'number') {
-			x = e.offsetX;
-			y = e.offsetY;
-		} else if (typeof e.layerX === 'number') {
-			x = e.layerX;
-			y = e.layerY;
-		}
-		return { x: x, y: y };
-	},
-
-
-	getViewPos : function() {
-		if(typeof window.pageYOffset === 'number') {
-			return [window.pageXOffset, window.pageYOffset];
-		} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
-			return [document.body.scrollLeft, document.body.scrollTop];
-		} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
-			return [document.documentElement.scrollLeft, document.documentElement.scrollTop];
-		} else {
-			return [0, 0];
-		}
-	},
-
-
-	getViewSize : function() {
-		if(typeof window.innerWidth === 'number') {
-			return [window.innerWidth, window.innerHeight];
-		} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
-			return [document.body.clientWidth, document.body.clientHeight];
-		} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
-			return [document.documentElement.clientWidth, document.documentElement.clientHeight];
-		} else {
-			return [0, 0];
-		}
-	},
-
-
-	URI : function(uri) { // See RFC3986
-
-		this.scheme = null;
-		this.authority = null;
-		this.path = '';
-		this.query = null;
-		this.fragment = null;
-
-		this.parse = function(uri) {
-			var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/);
-			this.scheme = m[3] ? m[2] : null;
-			this.authority = m[5] ? m[6] : null;
-			this.path = m[7];
-			this.query = m[9] ? m[10] : null;
-			this.fragment = m[12] ? m[13] : null;
-			return this;
-		};
-
-		this.toString = function() {
-			var result = '';
-			if(this.scheme !== null) { result = result + this.scheme + ':'; }
-			if(this.authority !== null) { result = result + '//' + this.authority; }
-			if(this.path !== null) { result = result + this.path; }
-			if(this.query !== null) { result = result + '?' + this.query; }
-			if(this.fragment !== null) { result = result + '#' + this.fragment; }
-			return result;
-		};
-
-		this.toAbsolute = function(base) {
-			var base = new jscolor.URI(base);
-			var r = this;
-			var t = new jscolor.URI;
-
-			if(base.scheme === null) { return false; }
-
-			if(r.scheme !== null && r.scheme.toLowerCase() === base.scheme.toLowerCase()) {
-				r.scheme = null;
-			}
-
-			if(r.scheme !== null) {
-				t.scheme = r.scheme;
-				t.authority = r.authority;
-				t.path = removeDotSegments(r.path);
-				t.query = r.query;
-			} else {
-				if(r.authority !== null) {
-					t.authority = r.authority;
-					t.path = removeDotSegments(r.path);
-					t.query = r.query;
-				} else {
-					if(r.path === '') {
-						t.path = base.path;
-						if(r.query !== null) {
-							t.query = r.query;
-						} else {
-							t.query = base.query;
-						}
-					} else {
-						if(r.path.substr(0,1) === '/') {
-							t.path = removeDotSegments(r.path);
-						} else {
-							if(base.authority !== null && base.path === '') {
-								t.path = '/'+r.path;
-							} else {
-								t.path = base.path.replace(/[^\/]+$/,'')+r.path;
-							}
-							t.path = removeDotSegments(t.path);
-						}
-						t.query = r.query;
-					}
-					t.authority = base.authority;
-				}
-				t.scheme = base.scheme;
-			}
-			t.fragment = r.fragment;
-
-			return t;
-		};
-
-		function removeDotSegments(path) {
-			var out = '';
-			while(path) {
-				if(path.substr(0,3)==='../' || path.substr(0,2)==='./') {
-					path = path.replace(/^\.+/,'').substr(1);
-				} else if(path.substr(0,3)==='/./' || path==='/.') {
-					path = '/'+path.substr(3);
-				} else if(path.substr(0,4)==='/../' || path==='/..') {
-					path = '/'+path.substr(4);
-					out = out.replace(/\/?[^\/]*$/, '');
-				} else if(path==='.' || path==='..') {
-					path = '';
-				} else {
-					var rm = path.match(/^\/?[^\/]*/)[0];
-					path = path.substr(rm.length);
-					out = out + rm;
-				}
-			}
-			return out;
-		}
-
-		if(uri) {
-			this.parse(uri);
-		}
-
-	},
-
-
-	//
-	// Usage example:
-	// var myColor = new jscolor.color(myInputElement)
-	//
-
-	color : function(target, prop) {
-
-
-		this.required = true; // refuse empty values?
-		this.adjust = true; // adjust value to uniform notation?
-		this.hash = false; // prefix color with # symbol?
-		this.caps = true; // uppercase?
-		this.slider = true; // show the value/saturation slider?
-		this.valueElement = target; // value holder
-		this.styleElement = target; // where to reflect current color
-		this.onImmediateChange = null; // onchange callback (can be either string or function)
-		this.hsv = [0, 0, 1]; // read-only  0-6, 0-1, 0-1
-		this.rgb = [1, 1, 1]; // read-only  0-1, 0-1, 0-1
-		this.minH = 0; // read-only  0-6
-		this.maxH = 6; // read-only  0-6
-		this.minS = 0; // read-only  0-1
-		this.maxS = 1; // read-only  0-1
-		this.minV = 0; // read-only  0-1
-		this.maxV = 1; // read-only  0-1
-
-		this.pickerOnfocus = true; // display picker on focus?
-		this.pickerMode = 'HSV'; // HSV | HVS
-		this.pickerPosition = 'bottom'; // left | right | top | bottom
-		this.pickerSmartPosition = true; // automatically adjust picker position when necessary
-		this.pickerButtonHeight = 20; // px
-		this.pickerClosable = false;
-		this.pickerCloseText = 'Close';
-		this.pickerButtonColor = 'ButtonText'; // px
-		this.pickerFace = 10; // px
-		this.pickerFaceColor = 'ThreeDFace'; // CSS color
-		this.pickerBorder = 1; // px
-		this.pickerBorderColor = 'ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight'; // CSS color
-		this.pickerInset = 1; // px
-		this.pickerInsetColor = 'ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow'; // CSS color
-		this.pickerZIndex = 10000;
-
-
-		for(var p in prop) {
-			if(prop.hasOwnProperty(p)) {
-				this[p] = prop[p];
-			}
-		}
-
-
-		this.hidePicker = function() {
-			if(isPickerOwner()) {
-				removePicker();
-			}
-		};
-
-
-		this.showPicker = function() {
-			if(!isPickerOwner()) {
-				var tp = jscolor.getElementPos(target); // target pos
-				var ts = jscolor.getElementSize(target); // target size
-				var vp = jscolor.getViewPos(); // view pos
-				var vs = jscolor.getViewSize(); // view size
-				var ps = getPickerDims(this); // picker size
-				var a, b, c;
-				switch(this.pickerPosition.toLowerCase()) {
-					case 'left': a=1; b=0; c=-1; break;
-					case 'right':a=1; b=0; c=1; break;
-					case 'top':  a=0; b=1; c=-1; break;
-					default:     a=0; b=1; c=1; break;
-				}
-				var l = (ts[b]+ps[b])/2;
-
-				// picker pos
-				if (!this.pickerSmartPosition) {
-					var pp = [
-						tp[a],
-						tp[b]+ts[b]-l+l*c
-					];
-				} else {
-					var pp = [
-						-vp[a]+tp[a]+ps[a] > vs[a] ?
-							(-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
-							tp[a],
-						-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
-							(-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
-							(tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
-					];
-				}
-				drawPicker(pp[a], pp[b]);
-			}
-		};
-
-
-		this.importColor = function() {
-			if(!valueElement) {
-				this.exportColor();
-			} else {
-				if(!this.adjust) {
-					if(!this.fromString(valueElement.value, leaveValue)) {
-						styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
-						styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
-						styleElement.style.color = styleElement.jscStyle.color;
-						this.exportColor(leaveValue | leaveStyle);
-					}
-				} else if(!this.required && /^\s*$/.test(valueElement.value)) {
-					valueElement.value = '';
-					styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
-					styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
-					styleElement.style.color = styleElement.jscStyle.color;
-					this.exportColor(leaveValue | leaveStyle);
-
-				} else if(this.fromString(valueElement.value)) {
-					// OK
-				} else {
-					this.exportColor();
-				}
-			}
-		};
-
-
-		this.exportColor = function(flags) {
-			if(!(flags & leaveValue) && valueElement) {
-				var value = this.toString();
-				if(this.caps) { value = value.toUpperCase(); }
-				if(this.hash) { value = '#'+value; }
-				valueElement.value = value;
-			}
-			if(!(flags & leaveStyle) && styleElement) {
-				styleElement.style.backgroundImage = "none";
-				styleElement.style.backgroundColor =
-					'#'+this.toString();
-				styleElement.style.color =
-					0.213 * this.rgb[0] +
-					0.715 * this.rgb[1] +
-					0.072 * this.rgb[2]
-					< 0.5 ? '#FFF' : '#000';
-			}
-			if(!(flags & leavePad) && isPickerOwner()) {
-				redrawPad();
-			}
-			if(!(flags & leaveSld) && isPickerOwner()) {
-				redrawSld();
-			}
-		};
-
-
-		this.fromHSV = function(h, s, v, flags) { // null = don't change
-			if(h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); }
-			if(s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); }
-			if(v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); }
-
-			this.rgb = HSV_RGB(
-				h===null ? this.hsv[0] : (this.hsv[0]=h),
-				s===null ? this.hsv[1] : (this.hsv[1]=s),
-				v===null ? this.hsv[2] : (this.hsv[2]=v)
-			);
-
-			this.exportColor(flags);
-		};
-
-
-		this.fromRGB = function(r, g, b, flags) { // null = don't change
-			if(r !== null) { r = Math.max(0.0, Math.min(1.0, r)); }
-			if(g !== null) { g = Math.max(0.0, Math.min(1.0, g)); }
-			if(b !== null) { b = Math.max(0.0, Math.min(1.0, b)); }
-
-			var hsv = RGB_HSV(
-				r===null ? this.rgb[0] : r,
-				g===null ? this.rgb[1] : g,
-				b===null ? this.rgb[2] : b
-			);
-			if(hsv[0] !== null) {
-				this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0]));
-			}
-			if(hsv[2] !== 0) {
-				this.hsv[1] = hsv[1]===null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1]));
-			}
-			this.hsv[2] = hsv[2]===null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2]));
-
-			// update RGB according to final HSV, as some values might be trimmed
-			var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
-			this.rgb[0] = rgb[0];
-			this.rgb[1] = rgb[1];
-			this.rgb[2] = rgb[2];
-
-			this.exportColor(flags);
-		};
-
-
-		this.fromString = function(hex, flags) {
-			var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
-			if(!m) {
-				return false;
-			} else {
-				if(m[1].length === 6) { // 6-char notation
-					this.fromRGB(
-						parseInt(m[1].substr(0,2),16) / 255,
-						parseInt(m[1].substr(2,2),16) / 255,
-						parseInt(m[1].substr(4,2),16) / 255,
-						flags
-					);
-				} else { // 3-char notation
-					this.fromRGB(
-						parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
-						parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
-						parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
-						flags
-					);
-				}
-				return true;
-			}
-		};
-
-
-		this.toString = function() {
-			return (
-				(0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
-				(0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
-				(0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
-			);
-		};
-
-
-		function RGB_HSV(r, g, b) {
-			var n = Math.min(Math.min(r,g),b);
-			var v = Math.max(Math.max(r,g),b);
-			var m = v - n;
-			if(m === 0) { return [ null, 0, v ]; }
-			var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
-			return [ h===6?0:h, m/v, v ];
-		}
-
-
-		function HSV_RGB(h, s, v) {
-			if(h === null) { return [ v, v, v ]; }
-			var i = Math.floor(h);
-			var f = i%2 ? h-i : 1-(h-i);
-			var m = v * (1 - s);
-			var n = v * (1 - s*f);
-			switch(i) {
-				case 6:
-				case 0: return [v,n,m];
-				case 1: return [n,v,m];
-				case 2: return [m,v,n];
-				case 3: return [m,n,v];
-				case 4: return [n,m,v];
-				case 5: return [v,m,n];
-			}
-		}
-
-
-		function removePicker() {
-			delete jscolor.picker.owner;
-			document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
-		}
-
-
-		function drawPicker(x, y) {
-			if(!jscolor.picker) {
-				jscolor.picker = {
-					box : document.createElement('div'),
-					boxB : document.createElement('div'),
-					pad : document.createElement('div'),
-					padB : document.createElement('div'),
-					padM : document.createElement('div'),
-					sld : document.createElement('div'),
-					sldB : document.createElement('div'),
-					sldM : document.createElement('div'),
-					btn : document.createElement('div'),
-					btnS : document.createElement('span'),
-					btnT : document.createTextNode(THIS.pickerCloseText)
-				};
-				for(var i=0,segSize=4; i<jscolor.images.sld[1]; i+=segSize) {
-					var seg = document.createElement('div');
-					seg.style.height = segSize+'px';
-					seg.style.fontSize = '1px';
-					seg.style.lineHeight = '0';
-					jscolor.picker.sld.appendChild(seg);
-				}
-				jscolor.picker.sldB.appendChild(jscolor.picker.sld);
-				jscolor.picker.box.appendChild(jscolor.picker.sldB);
-				jscolor.picker.box.appendChild(jscolor.picker.sldM);
-				jscolor.picker.padB.appendChild(jscolor.picker.pad);
-				jscolor.picker.box.appendChild(jscolor.picker.padB);
-				jscolor.picker.box.appendChild(jscolor.picker.padM);
-				jscolor.picker.btnS.appendChild(jscolor.picker.btnT);
-				jscolor.picker.btn.appendChild(jscolor.picker.btnS);
-				jscolor.picker.box.appendChild(jscolor.picker.btn);
-				jscolor.picker.boxB.appendChild(jscolor.picker.box);
-			}
-
-			var p = jscolor.picker;
-
-			// controls interaction
-			p.box.onmouseup =
-			p.box.onmouseout = function() { target.focus(); };
-			p.box.onmousedown = function() { abortBlur=true; };
-			p.box.onmousemove = function(e) {
-				if (holdPad || holdSld) {
-					holdPad && setPad(e);
-					holdSld && setSld(e);
-					if (document.selection) {
-						document.selection.empty();
-					} else if (window.getSelection) {
-						window.getSelection().removeAllRanges();
-					}
-					dispatchImmediateChange();
-				}
-			};
-			if('ontouchstart' in window) { // if touch device
-				var handle_touchmove = function(e) {
-					var event={
-						'offsetX': e.touches[0].pageX-touchOffset.X,
-						'offsetY': e.touches[0].pageY-touchOffset.Y
-					};
-					if (holdPad || holdSld) {
-						holdPad && setPad(event);
-						holdSld && setSld(event);
-						dispatchImmediateChange();
-					}
-					e.stopPropagation(); // prevent move "view" on broswer
-					e.preventDefault(); // prevent Default - Android Fix (else android generated only 1-2 touchmove events)
-				};
-				p.box.removeEventListener('touchmove', handle_touchmove, false)
-				p.box.addEventListener('touchmove', handle_touchmove, false)
-			}
-			p.padM.onmouseup =
-			p.padM.onmouseout = function() { if(holdPad) { holdPad=false; jscolor.fireEvent(valueElement,'change'); } };
-			p.padM.onmousedown = function(e) {
-				// if the slider is at the bottom, move it up
-				switch(modeID) {
-					case 0: if (THIS.hsv[2] === 0) { THIS.fromHSV(null, null, 1.0); }; break;
-					case 1: if (THIS.hsv[1] === 0) { THIS.fromHSV(null, 1.0, null); }; break;
-				}
-				holdSld=false;
-				holdPad=true;
-				setPad(e);
-				dispatchImmediateChange();
-			};
-			if('ontouchstart' in window) {
-				p.padM.addEventListener('touchstart', function(e) {
-					touchOffset={
-						'X': e.target.offsetParent.offsetLeft,
-						'Y': e.target.offsetParent.offsetTop
-					};
-					this.onmousedown({
-						'offsetX':e.touches[0].pageX-touchOffset.X,
-						'offsetY':e.touches[0].pageY-touchOffset.Y
-					});
-				});
-			}
-			p.sldM.onmouseup =
-			p.sldM.onmouseout = function() { if(holdSld) { holdSld=false; jscolor.fireEvent(valueElement,'change'); } };
-			p.sldM.onmousedown = function(e) {
-				holdPad=false;
-				holdSld=true;
-				setSld(e);
-				dispatchImmediateChange();
-			};
-			if('ontouchstart' in window) {
-				p.sldM.addEventListener('touchstart', function(e) {
-					touchOffset={
-						'X': e.target.offsetParent.offsetLeft,
-						'Y': e.target.offsetParent.offsetTop
-					};
-					this.onmousedown({
-						'offsetX':e.touches[0].pageX-touchOffset.X,
-						'offsetY':e.touches[0].pageY-touchOffset.Y
-					});
-				});
-			}
-
-			// picker
-			var dims = getPickerDims(THIS);
-			p.box.style.width = dims[0] + 'px';
-			p.box.style.height = dims[1] + 'px';
-
-			// picker border
-			p.boxB.style.position = 'absolute';
-			p.boxB.style.clear = 'both';
-			p.boxB.style.left = x+'px';
-			p.boxB.style.top = y+'px';
-			p.boxB.style.zIndex = THIS.pickerZIndex;
-			p.boxB.style.border = THIS.pickerBorder+'px solid';
-			p.boxB.style.borderColor = THIS.pickerBorderColor;
-			p.boxB.style.background = THIS.pickerFaceColor;
-
-			// pad image
-			p.pad.style.width = jscolor.images.pad[0]+'px';
-			p.pad.style.height = jscolor.images.pad[1]+'px';
-
-			// pad border
-			p.padB.style.position = 'absolute';
-			p.padB.style.left = THIS.pickerFace+'px';
-			p.padB.style.top = THIS.pickerFace+'px';
-			p.padB.style.border = THIS.pickerInset+'px solid';
-			p.padB.style.borderColor = THIS.pickerInsetColor;
-
-			// pad mouse area
-			p.padM.style.position = 'absolute';
-			p.padM.style.left = '0';
-			p.padM.style.top = '0';
-			p.padM.style.width = THIS.pickerFace + 2*THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px';
-			p.padM.style.height = p.box.style.height;
-			p.padM.style.cursor = 'crosshair';
-
-			// slider image
-			p.sld.style.overflow = 'hidden';
-			p.sld.style.width = jscolor.images.sld[0]+'px';
-			p.sld.style.height = jscolor.images.sld[1]+'px';
-
-			// slider border
-			p.sldB.style.display = THIS.slider ? 'block' : 'none';
-			p.sldB.style.position = 'absolute';
-			p.sldB.style.right = THIS.pickerFace+'px';
-			p.sldB.style.top = THIS.pickerFace+'px';
-			p.sldB.style.border = THIS.pickerInset+'px solid';
-			p.sldB.style.borderColor = THIS.pickerInsetColor;
-
-			// slider mouse area
-			p.sldM.style.display = THIS.slider ? 'block' : 'none';
-			p.sldM.style.position = 'absolute';
-			p.sldM.style.right = '0';
-			p.sldM.style.top = '0';
-			p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px';
-			p.sldM.style.height = p.box.style.height;
-			try {
-				p.sldM.style.cursor = 'pointer';
-			} catch(eOldIE) {
-				p.sldM.style.cursor = 'hand';
-			}
-
-			// "close" button
-			function setBtnBorder() {
-				var insetColors = THIS.pickerInsetColor.split(/\s+/);
-				var pickerOutsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
-				p.btn.style.borderColor = pickerOutsetColor;
-			}
-			p.btn.style.display = THIS.pickerClosable ? 'block' : 'none';
-			p.btn.style.position = 'absolute';
-			p.btn.style.left = THIS.pickerFace + 'px';
-			p.btn.style.bottom = THIS.pickerFace + 'px';
-			p.btn.style.padding = '0 15px';
-			p.btn.style.height = '18px';
-			p.btn.style.border = THIS.pickerInset + 'px solid';
-			setBtnBorder();
-			p.btn.style.color = THIS.pickerButtonColor;
-			p.btn.style.font = '12px sans-serif';
-			p.btn.style.textAlign = 'center';
-			try {
-				p.btn.style.cursor = 'pointer';
-			} catch(eOldIE) {
-				p.btn.style.cursor = 'hand';
-			}
-			p.btn.onmousedown = function () {
-				THIS.hidePicker();
-			};
-			p.btnS.style.lineHeight = p.btn.style.height;
-
-			// load images in optimal order
-			switch(modeID) {
-				case 0: var padImg = 'hs.png'; break;
-				case 1: var padImg = 'hv.png'; break;
-			}
-			p.padM.style.backgroundImage = "url('"+jscolor.getDir()+"cross.gif')";
-			p.padM.style.backgroundRepeat = "no-repeat";
-			p.sldM.style.backgroundImage = "url('"+jscolor.getDir()+"arrow.gif')";
-			p.sldM.style.backgroundRepeat = "no-repeat";
-			p.pad.style.backgroundImage = "url('"+jscolor.getDir()+padImg+"')";
-			p.pad.style.backgroundRepeat = "no-repeat";
-			p.pad.style.backgroundPosition = "0 0";
-
-			// place pointers
-			redrawPad();
-			redrawSld();
-
-			jscolor.picker.owner = THIS;
-			document.getElementsByTagName('body')[0].appendChild(p.boxB);
-		}
-
-
-		function getPickerDims(o) {
-			var dims = [
-				2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[0] +
-					(o.slider ? 2*o.pickerInset + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] : 0),
-				o.pickerClosable ?
-					4*o.pickerInset + 3*o.pickerFace + jscolor.images.pad[1] + o.pickerButtonHeight :
-					2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[1]
-			];
-			return dims;
-		}
-
-
-		function redrawPad() {
-			// redraw the pad pointer
-			switch(modeID) {
-				case 0: var yComponent = 1; break;
-				case 1: var yComponent = 2; break;
-			}
-			var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1));
-			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1));
-			jscolor.picker.padM.style.backgroundPosition =
-				(THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' +
-				(THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px';
-
-			// redraw the slider image
-			var seg = jscolor.picker.sld.childNodes;
-
-			switch(modeID) {
-				case 0:
-					var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1);
-					for(var i=0; i<seg.length; i+=1) {
-						seg[i].style.backgroundColor = 'rgb('+
-							(rgb[0]*(1-i/seg.length)*100)+'%,'+
-							(rgb[1]*(1-i/seg.length)*100)+'%,'+
-							(rgb[2]*(1-i/seg.length)*100)+'%)';
-					}
-					break;
-				case 1:
-					var rgb, s, c = [ THIS.hsv[2], 0, 0 ];
-					var i = Math.floor(THIS.hsv[0]);
-					var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i);
-					switch(i) {
-						case 6:
-						case 0: rgb=[0,1,2]; break;
-						case 1: rgb=[1,0,2]; break;
-						case 2: rgb=[2,0,1]; break;
-						case 3: rgb=[2,1,0]; break;
-						case 4: rgb=[1,2,0]; break;
-						case 5: rgb=[0,2,1]; break;
-					}
-					for(var i=0; i<seg.length; i+=1) {
-						s = 1 - 1/(seg.length-1)*i;
-						c[1] = c[0] * (1 - s*f);
-						c[2] = c[0] * (1 - s);
-						seg[i].style.backgroundColor = 'rgb('+
-							(c[rgb[0]]*100)+'%,'+
-							(c[rgb[1]]*100)+'%,'+
-							(c[rgb[2]]*100)+'%)';
-					}
-					break;
-			}
-		}
-
-
-		function redrawSld() {
-			// redraw the slider pointer
-			switch(modeID) {
-				case 0: var yComponent = 2; break;
-				case 1: var yComponent = 1; break;
-			}
-			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.sld[1]-1));
-			jscolor.picker.sldM.style.backgroundPosition =
-				'0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.arrow[1]/2)) + 'px';
-		}
-
-
-		function isPickerOwner() {
-			return jscolor.picker && jscolor.picker.owner === THIS;
-		}
-
-
-		function blurTarget() {
-			if(valueElement === target) {
-				THIS.importColor();
-			}
-			if(THIS.pickerOnfocus) {
-				THIS.hidePicker();
-			}
-		}
-
-
-		function blurValue() {
-			if(valueElement !== target) {
-				THIS.importColor();
-			}
-		}
-
-
-		function setPad(e) {
-			var mpos = jscolor.getRelMousePos(e);
-			var x = mpos.x - THIS.pickerFace - THIS.pickerInset;
-			var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
-			switch(modeID) {
-				case 0: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), 1 - y/(jscolor.images.pad[1]-1), null, leaveSld); break;
-				case 1: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), null, 1 - y/(jscolor.images.pad[1]-1), leaveSld); break;
-			}
-		}
-
-
-		function setSld(e) {
-			var mpos = jscolor.getRelMousePos(e);
-			var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
-			switch(modeID) {
-				case 0: THIS.fromHSV(null, null, 1 - y/(jscolor.images.sld[1]-1), leavePad); break;
-				case 1: THIS.fromHSV(null, 1 - y/(jscolor.images.sld[1]-1), null, leavePad); break;
-			}
-		}
-
-
-		function dispatchImmediateChange() {
-			if (THIS.onImmediateChange) {
-				var callback;
-				if (typeof THIS.onImmediateChange === 'string') {
-					callback = new Function (THIS.onImmediateChange);
-				} else {
-					callback = THIS.onImmediateChange;
-				}
-				callback.call(THIS);
-			}
-		}
-
-
-		var THIS = this;
-		var modeID = this.pickerMode.toLowerCase()==='hvs' ? 1 : 0;
-		var abortBlur = false;
-		var
-			valueElement = jscolor.fetchElement(this.valueElement),
-			styleElement = jscolor.fetchElement(this.styleElement);
-		var
-			holdPad = false,
-			holdSld = false,
-			touchOffset = {};
-		var
-			leaveValue = 1<<0,
-			leaveStyle = 1<<1,
-			leavePad = 1<<2,
-			leaveSld = 1<<3;
-
-		// target
-		jscolor.addEvent(target, 'focus', function() {
-			if(THIS.pickerOnfocus) { THIS.showPicker(); }
-		});
-		jscolor.addEvent(target, 'blur', function() {
-			if(!abortBlur) {
-				window.setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false; }, 0);
-			} else {
-				abortBlur = false;
-			}
-		});
-
-		// valueElement
-		if(valueElement) {
-			var updateField = function() {
-				THIS.fromString(valueElement.value, leaveValue);
-				dispatchImmediateChange();
-			};
-			jscolor.addEvent(valueElement, 'keyup', updateField);
-			jscolor.addEvent(valueElement, 'input', updateField);
-			jscolor.addEvent(valueElement, 'blur', blurValue);
-			valueElement.setAttribute('autocomplete', 'off');
-		}
-
-		// styleElement
-		if(styleElement) {
-			styleElement.jscStyle = {
-				backgroundImage : styleElement.style.backgroundImage,
-				backgroundColor : styleElement.style.backgroundColor,
-				color : styleElement.style.color
-			};
-		}
-
-		// require images
-		switch(modeID) {
-			case 0: jscolor.requireImage('hs.png'); break;
-			case 1: jscolor.requireImage('hv.png'); break;
-		}
-		jscolor.requireImage('cross.gif');
-		jscolor.requireImage('arrow.gif');
-
-		this.importColor();
-	}
-
-};
-
-
-jscolor.install();

package.json

@@ -0,0 +1,63 @@
+{
+    "name": "cookiemonster-mod",
+    "version": "2.031.5",
+    "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": [
+        "Cookie Clicker",
+        "javascript",
+        "mod",
+        "Dashnet",
+        "Orteil"
+    ],
+    "scripts": {
+        "eslint_src": "eslint src",
+        "build": "run-s eslint_src pack_prod remove_comment",
+        "build_test": "run-s pack_dev",
+        "pack_prod": "webpack --env production",
+        "pack_dev": "webpack",
+        "remove_comment": "sed -i '' -e '/\\/\\/# sourceMappingURL.*/d' dist/CookieMonster.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Aktanusa/CookieMonster.git"
+    },
+    "license": "MIT",
+    "author": {
+        "name": "Aktanusa",
+        "email": "chanam.geo@yahoo.com"
+    },
+    "contributors": [
+        {
+            "name": "Daniël van Noord",
+            "email": "13665637+DanielNoord@users.noreply.github.com"
+        },
+        {
+            "name": "Aran Leite",
+            "email": "hyoretsu@gmail.com",
+            "url": "https://www.linkedin.com/in/aranleite"
+        }
+    ],
+    "bugs": {
+        "url": "https://github.com/Aktanusa/CookieMonster/issues"
+    },
+    "homepage": "https://github.com/Aktanusa/CookieMonster#readme",
+    "devDependencies": {
+        "eslint": "^7.19.0",
+        "eslint-config-airbnb-base": "^14.2.1",
+        "eslint-plugin-import": "^2.22.1",
+        "npm-run-all": "^4.1.5",
+        "webpack": "^5.24.4",
+        "webpack-cli": "^4.5.0"
+    },
+    "ccrepo": {
+        "icon": [
+            10,
+            0
+        ],
+        "name": "Cookie Monster"
+    },
+    "dependencies": {
+        "@eastdesire/jscolor": "^2.4.5"
+    }
+}

queue/queue.js

@@ -1,82 +0,0 @@
-/*
-
-Queue.js
-
-A function to represent a queue
-
-Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
-the terms of the CC0 1.0 Universal legal code:
-
-http://creativecommons.org/publicdomain/zero/1.0/legalcode
-
-*/
-
-/* Creates a new queue. A queue is a first-in-first-out (FIFO) data structure -
- * items are added to the end of the queue and removed from the front.
- */
-function Queue(){
-
-  // initialise the queue and offset
-  var queue  = [];
-  var offset = 0;
-
-  // Returns the length of the queue.
-  this.getLength = function(){
-    return (queue.length - offset);
-  }
-
-  // Returns true if the queue is empty, and false otherwise.
-  this.isEmpty = function(){
-    return (queue.length == 0);
-  }
-
-  /* Enqueues the specified item. The parameter is:
-   *
-   * item - the item to enqueue
-   */
-  this.enqueue = function(item){
-    queue.push(item);
-  }
-
-  /* Dequeues an item and returns it. If the queue is empty, the value
-   * 'undefined' is returned.
-   */
-  this.dequeue = function(){
-
-    // if the queue is empty, return immediately
-    if (queue.length == 0) return undefined;
-
-    // store the item at the front of the queue
-    var item = queue[offset];
-
-    // increment the offset and remove the free space if necessary
-    if (++ offset * 2 >= queue.length){
-      queue  = queue.slice(offset);
-      offset = 0;
-    }
-
-    // return the dequeued item
-    return item;
-
-  }
-
-  /* Returns the item at the front of the queue (without dequeuing it). If the
-   * queue is empty then undefined is returned.
-   */
-  this.peek = function(){
-    return (queue.length > 0 ? queue[offset] : undefined);
-  }
-  
-  /* Returns the item at the spot specified by place in the queue (without 
-   * dequeuing it). If the queue is emprty or the requested place is outside 
-   * the queue then undefined is returned.
-   */
-  this.get = function(place){
-    var item = undefined;
-	if (queue.length > 0 && place < (queue.length - offset) && place >= 0) {
-	  item = queue[(offset + place)];
-	}
-    return item;
-  }
-
-}

src/Cache.js

@@ -1,372 +0,0 @@
-/*********
- * Cache *
- *********/
-
-CM.Cache.AddQueue = function() {
-	CM.Cache.Queue = document.createElement('script');
-	CM.Cache.Queue.type = 'text/javascript';
-	CM.Cache.Queue.setAttribute('src', 'https://aktanusa.github.io/CookieMonster/queue/queue.js');
-	document.head.appendChild(CM.Cache.Queue);
-}
-
-CM.Cache.NextNumber = function(base) {
-	var count = base > Math.pow(2, 53) ? Math.pow(2, Math.floor(Math.log(base) / Math.log(2)) - 53) : 1;
-	while (base == base + count) {
-		count = CM.Cache.NextNumber(count);
-	}
-	return (base + count);
-}
-
-CM.Cache.RemakeBuildingsPrices = function() {
-	for (var i in Game.Objects) {
-		CM.Cache.Objects10[i].price = CM.Sim.BuildingGetPrice(Game.Objects[i].basePrice, Game.Objects[i].amount, Game.Objects[i].free, 10);
-		CM.Cache.Objects100[i].price = CM.Sim.BuildingGetPrice(Game.Objects[i].basePrice, Game.Objects[i].amount, Game.Objects[i].free, 100);
-	}
-}
-
-CM.Cache.RemakeIncome = function() {
-	// Simulate Building Buys for 1 amount
-	CM.Sim.BuyBuildings(1, 'Objects');
-
-	// Simulate Upgrade Buys
-	CM.Sim.BuyUpgrades();
-
-	// Simulate Building Buys for 10 amount
-	CM.Sim.BuyBuildings(10, 'Objects10');
-
-	// Simulate Building Buys for 100 amount
-	CM.Sim.BuyBuildings(100, 'Objects100');
-}
-
-CM.Cache.RemakeWrinkBank = function() {
-	var totalSucked = 0;
-	for (var i in Game.wrinklers) {
-		var sucked = Game.wrinklers[i].sucked;
-		var toSuck = 1.1;
-		if (Game.Has('Sacrilegious corruption')) toSuck *= 1.05;
-		if (Game.wrinklers[i].type==1) toSuck *= 3; // Shiny wrinklers
-		sucked *= toSuck;
-		if (Game.Has('Wrinklerspawn')) sucked *= 1.05;
-		if (Game.hasGod) {
-			var godLvl = Game.hasGod('scorn');
-			if (godLvl == 1) sucked *= 1.15;
-			else if (godLvl == 2) sucked *= 1.1;
-			else if (godLvl == 3) sucked *= 1.05;
-		}
-		totalSucked += sucked;
-	}
-	CM.Cache.WrinkBank = totalSucked;
-	CM.Cache.WrinkGodBank = totalSucked;
-	if (Game.hasGod) {
-		var godLvl = Game.hasGod('scorn');
-		if (godLvl == 2) CM.Cache.WrinkGodBank = CM.Cache.WrinkGodBank * 1.15 / 1.1;
-		else if (godLvl == 3) CM.Cache.WrinkGodBank = CM.Cache.WrinkGodBank * 1.15 / 1.05;
-		else if (godLvl != 1) CM.Cache.WrinkGodBank *= 1.15;
-	}
-}
-
-CM.Cache.RemakeBuildingsPP = function() {
-	CM.Cache.min = -1;
-	CM.Cache.max = -1;
-	CM.Cache.mid = -1;
-	for (var i in CM.Cache.Objects) {
-		//CM.Cache.Objects[i].pp = Game.Objects[i].getPrice() / CM.Cache.Objects[i].bonus;
-		CM.Cache.Objects[i].pp = (Math.max(Game.Objects[i].getPrice() - (Game.cookies + CM.Disp.GetWrinkConfigBank()), 0) / Game.cookiesPs) + (Game.Objects[i].getPrice() / CM.Cache.Objects[i].bonus);
-		if (CM.Cache.min == -1 || CM.Cache.Objects[i].pp < CM.Cache.min) CM.Cache.min = CM.Cache.Objects[i].pp;
-		if (CM.Cache.max == -1 || CM.Cache.Objects[i].pp > CM.Cache.max) CM.Cache.max = CM.Cache.Objects[i].pp;
-	}
-	CM.Cache.mid = ((CM.Cache.max - CM.Cache.min) / 2) + CM.Cache.min;
-	for (var i in CM.Cache.Objects) {
-		var color = '';
-		if (CM.Cache.Objects[i].pp == CM.Cache.min) color = CM.Disp.colorGreen;
-		else if (CM.Cache.Objects[i].pp == CM.Cache.max) color = CM.Disp.colorRed;
-		else if (CM.Cache.Objects[i].pp > CM.Cache.mid) color = CM.Disp.colorOrange;
-		else color = CM.Disp.colorYellow;
-		CM.Cache.Objects[i].color = color;
-	}
-}
-
-CM.Cache.RemakeUpgradePP = function() {
-	for (var i in CM.Cache.Upgrades) {
-		//CM.Cache.Upgrades[i].pp = Game.Upgrades[i].getPrice() / CM.Cache.Upgrades[i].bonus;
-		CM.Cache.Upgrades[i].pp = (Math.max(Game.Upgrades[i].getPrice() - (Game.cookies + CM.Disp.GetWrinkConfigBank()), 0) / Game.cookiesPs) + (Game.Upgrades[i].getPrice() / CM.Cache.Upgrades[i].bonus);
-		if (isNaN(CM.Cache.Upgrades[i].pp)) CM.Cache.Upgrades[i].pp = Infinity;
-		var color = '';
-		if (CM.Cache.Upgrades[i].pp <= 0 || CM.Cache.Upgrades[i].pp == Infinity) color = CM.Disp.colorGray;
-		else if (CM.Cache.Upgrades[i].pp < CM.Cache.min) color = CM.Disp.colorBlue;
-		else if (CM.Cache.Upgrades[i].pp == CM.Cache.min) color = CM.Disp.colorGreen;
-		else if (CM.Cache.Upgrades[i].pp == CM.Cache.max) color = CM.Disp.colorRed;
-		else if (CM.Cache.Upgrades[i].pp > CM.Cache.max) color = CM.Disp.colorPurple;
-		else if (CM.Cache.Upgrades[i].pp > CM.Cache.mid) color = CM.Disp.colorOrange;
-		else color = CM.Disp.colorYellow;
-		CM.Cache.Upgrades[i].color = color;
-	}
-}
-
-CM.Cache.RemakeBuildingsOtherPP = function(amount, target) {
-	for (var i in CM.Cache[target]) {
-		//CM.Cache[target][i].pp = CM.Cache[target][i].price / CM.Cache[target][i].bonus;
-		CM.Cache[target][i].pp = (Math.max(CM.Cache[target][i].price - (Game.cookies + CM.Disp.GetWrinkConfigBank()), 0) / Game.cookiesPs) + (CM.Cache[target][i].price / CM.Cache[target][i].bonus);
-		var color = '';
-		if (CM.Cache[target][i].pp <= 0 || CM.Cache[target][i].pp == Infinity) color = CM.Disp.colorGray;
-		else if (CM.Cache[target][i].pp < CM.Cache.min) color = CM.Disp.colorBlue;
-		else if (CM.Cache[target][i].pp == CM.Cache.min) color = CM.Disp.colorGreen;
-		else if (CM.Cache[target][i].pp == CM.Cache.max) color = CM.Disp.colorRed;
-		else if (CM.Cache[target][i].pp > CM.Cache.max) color = CM.Disp.colorPurple;
-		else if (CM.Cache[target][i].pp > CM.Cache.mid) color = CM.Disp.colorOrange;
-		else color = CM.Disp.colorYellow;
-		CM.Cache[target][i].color = color;
-	}
-}
-
-CM.Cache.RemakePP = function() {
-	// Buildings for 1 amount
-	CM.Cache.RemakeBuildingsPP();
-
-	// Upgrades
-	CM.Cache.RemakeUpgradePP();
-
-	// Buildings for 10 amount
-	CM.Cache.RemakeBuildingsOtherPP(10, 'Objects10');
-
-	// Buildings for 100 amount
-	CM.Cache.RemakeBuildingsOtherPP(100, 'Objects100');
-}
-
-CM.Cache.RemakeLucky = function() {
-	CM.Cache.Lucky = (CM.Cache.NoGoldSwitchCookiesPS * 60 * 15) / 0.15;
-	CM.Cache.Lucky /= CM.Sim.getCPSBuffMult();
-	CM.Cache.LuckyReward = (CM.Cache.Lucky * 0.15) + 13;
-	CM.Cache.LuckyFrenzy = CM.Cache.Lucky * 7;
-	CM.Cache.LuckyRewardFrenzy = (CM.Cache.LuckyFrenzy * 0.15) + 13;
-}
-
-CM.Cache.MaxChainMoni = function(digit, maxPayout) {
-	var chain = 1 + Math.max(0, Math.ceil(Math.log(Game.cookies) / Math.LN10) - 10);
-	var moni = Math.max(digit, Math.min(Math.floor(1 / 9 * Math.pow(10, chain) * digit), maxPayout));
-	var nextMoni = Math.max(digit, Math.min(Math.floor(1 / 9 * Math.pow(10, chain + 1) * digit), maxPayout));
-	while (nextMoni < maxPayout) {
-		chain++;
-		moni = Math.max(digit, Math.min(Math.floor(1 / 9 * Math.pow(10, chain) * digit), maxPayout));
-		nextMoni = Math.max(digit, Math.min(Math.floor(1 / 9 * Math.pow(10, chain + 1) * digit), maxPayout));
-	}
-	return moni;
-}
-
-CM.Cache.RemakeChain = function() {
-	var maxPayout = CM.Cache.NoGoldSwitchCookiesPS * 60 * 60 * 6;
-	maxPayout /= CM.Sim.getCPSBuffMult();
-
-	CM.Cache.ChainReward = CM.Cache.MaxChainMoni(7, maxPayout);
-
-	CM.Cache.ChainWrathReward = CM.Cache.MaxChainMoni(6, maxPayout);
-
-	if (maxPayout < CM.Cache.ChainReward) {
-		CM.Cache.Chain = 0;
-	}
-	else {
-		CM.Cache.Chain = CM.Cache.NextNumber(CM.Cache.ChainReward) / 0.25;
-	}
-	if (maxPayout < CM.Cache.ChainWrathReward) {
-		CM.Cache.ChainWrath = 0;
-	}
-	else {
-		CM.Cache.ChainWrath = CM.Cache.NextNumber(CM.Cache.ChainWrathReward) / 0.25;
-	}
-
-	CM.Cache.ChainFrenzyReward = CM.Cache.MaxChainMoni(7, maxPayout * 7);
-
-	CM.Cache.ChainFrenzyWrathReward = CM.Cache.MaxChainMoni(6, maxPayout * 7);
-
-	if ((maxPayout * 7) < CM.Cache.ChainFrenzyReward) {
-		CM.Cache.ChainFrenzy = 0;
-	}
-	else {
-		CM.Cache.ChainFrenzy = CM.Cache.NextNumber(CM.Cache.ChainFrenzyReward) / 0.25;
-	}
-	if ((maxPayout * 7) < CM.Cache.ChainFrenzyWrathReward) {
-		CM.Cache.ChainFrenzyWrath = 0;
-	}
-	else {
-		CM.Cache.ChainFrenzyWrath = CM.Cache.NextNumber(CM.Cache.ChainFrenzyWrathReward) / 0.25;
-	}
-}
-
-CM.Cache.RemakeSeaSpec = function() {
-	if (Game.season == 'christmas') {
-		var val = Game.cookiesPs * 60;
-		if (Game.hasBuff('Elder frenzy')) val *= 0.5; // very sorry
-		if (Game.hasBuff('Frenzy')) val *= 0.75; // I sincerely apologize
-		CM.Cache.SeaSpec = Math.max(25, val);
-		if (Game.Has('Ho ho ho-flavored frosting')) CM.Cache.SeaSpec *= 2;
-	}
-}
-
-CM.Cache.RemakeSellForChoEgg = function() {
-	if (Game.hasAura('Earth Shatterer') || Game.dragonLevel < 9) {
-		var sellTotal = 0;
-		for (var i in Game.Objects) {
-			var me = Game.Objects[i];
-			sellTotal += CM.Sim.BuildingSell(me.basePrice, me.amount, me.free, me.amount, 0);
-		}
-	}
-	else {
-		var highestBuilding = '';
-		for (var i in Game.Objects) {
-			if (Game.Objects[i].amount > 0) highestBuilding = i;
-		}
-		var sellTotal = 0;
-		for (var i in Game.Objects) {
-			var me = Game.Objects[i];
-			var amount = 0;
-			if (i == highestBuilding) {
-				amount = me.amount - 1;
-			}
-			else {
-				amount = me.amount;
-			}
-			sellTotal += CM.Sim.BuildingSell(me.basePrice, amount, me.free, amount, 1);
-		}
-	}
-	CM.Cache.SellForChoEgg = sellTotal;
-}
-
-CM.Cache.InitCookiesDiff = function() {
-	CM.Cache.CookiesDiff = new Queue();
-	CM.Cache.WrinkDiff = new Queue();
-	CM.Cache.ChoEggDiff = new Queue();
-	CM.Cache.ClicksDiff = new Queue();
-}
-
-CM.Cache.UpdateAvgCPS = function() {
-	var currDate = Math.floor(Date.now() / 1000);
-	if (CM.Cache.lastDate != currDate) {
-		var choEggTotal = Game.cookies + CM.Cache.SellForChoEgg;
-		if (Game.cpsSucked > 0) {
-			choEggTotal += CM.Cache.WrinkGodBank;
-		}
-		choEggTotal *= 0.05;
-
-		if (CM.Cache.lastDate != -1) {
-			var timeDiff = currDate - CM.Cache.lastDate
-			var bankDiffAvg = Math.max(0, (Game.cookies - CM.Cache.lastCookies)) / timeDiff;
-			var wrinkDiffAvg = Math.max(0, (CM.Cache.WrinkBank - CM.Cache.lastWrinkCookies)) / timeDiff;
-			var choEggDiffAvg = Math.max(0,(choEggTotal - CM.Cache.lastChoEgg)) / timeDiff;
-			var clicksDiffAvg = (Game.cookieClicks - CM.Cache.lastClicks) / timeDiff;
-			for (var i = 0; i < timeDiff; i++) {
-				CM.Cache.CookiesDiff.enqueue(bankDiffAvg);
-				CM.Cache.WrinkDiff.enqueue(wrinkDiffAvg);
-				CM.Cache.ChoEggDiff.enqueue(choEggDiffAvg);
-				CM.Cache.ClicksDiff.enqueue(clicksDiffAvg);
-			}
-			// Assumes the queues are the same length
-			while (CM.Cache.CookiesDiff.getLength() > 1800) {
-				CM.Cache.CookiesDiff.dequeue();
-				CM.Cache.WrinkDiff.dequeue();
-				CM.Cache.ClicksDiff.dequeue();
-			}
-
-			while (CM.Cache.ClicksDiff.getLength() > 30) {
-				CM.Cache.ClicksDiff.dequeue();
-			}
-		}
-		CM.Cache.lastDate = currDate;
-		CM.Cache.lastCookies = Game.cookies;
-		CM.Cache.lastWrinkCookies = CM.Cache.WrinkBank;
-		CM.Cache.lastChoEgg = choEggTotal;
-		CM.Cache.lastClicks = Game.cookieClicks;
-
-		var sortedGainBank = new Array();
-		var sortedGainWrink = new Array();
-		var sortedGainChoEgg = new Array();
-
-		var cpsLength = Math.min(CM.Cache.CookiesDiff.getLength(), CM.Disp.times[CM.Config.AvgCPSHist] * 60);
-
-		// Assumes the queues are the same length
-		for (var i = CM.Cache.CookiesDiff.getLength() - cpsLength; i < CM.Cache.CookiesDiff.getLength(); i++) {
-			sortedGainBank.push(CM.Cache.CookiesDiff.get(i));
-			sortedGainWrink.push(CM.Cache.WrinkDiff.get(i));
-			sortedGainChoEgg.push(CM.Cache.ChoEggDiff.get(i));
-		}
-
-		sortedGainBank.sort(function(a, b) { return a - b; });
-		sortedGainWrink.sort(function(a, b) { return a - b; });
-		sortedGainChoEgg.sort(function(a, b) { return a - b; });
-
-		var cut = Math.round(sortedGainBank.length / 10);
-
-		while (cut > 0) {
-			sortedGainBank.shift();
-			sortedGainBank.pop();
-			sortedGainWrink.shift();
-			sortedGainWrink.pop();
-			sortedGainChoEgg.shift();
-			sortedGainChoEgg.pop();
-			cut--;
-		}
-
-		var totalGainBank = 0;
-		var totalGainWrink = 0;
-		var totalGainChoEgg = 0;
-
-		for (var i = 0; i < sortedGainBank.length; i++) {
-			totalGainBank += sortedGainBank[i];
-			totalGainWrink += sortedGainWrink[i];
-			totalGainChoEgg += sortedGainChoEgg[i];
-		}
-		CM.Cache.AvgCPS = (totalGainBank + (CM.Config.CalcWrink ? totalGainWrink : 0)) / sortedGainBank.length;
-
-		var choEgg = (Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg'));
-
-		if (choEgg || CM.Config.CalcWrink == 0) {
-			CM.Cache.AvgCPSChoEgg = (totalGainBank + totalGainWrink + (choEgg ? totalGainChoEgg : 0)) / sortedGainBank.length;
-		}
-		else {
-			CM.Cache.AvgCPSChoEgg = CM.Cache.AvgCPS;
-		}
-
-		var totalClicks = 0;
-		var clicksLength = Math.min(CM.Cache.ClicksDiff.getLength(), CM.Disp.times[CM.Config.AvgClicksHist]);
-		for (var i = CM.Cache.ClicksDiff.getLength() - clicksLength; i < CM.Cache.ClicksDiff.getLength(); i++) {
-			totalClicks += CM.Cache.ClicksDiff.get(i);
-		}
-		CM.Cache.AvgClicks = totalClicks / clicksLength;
-	}
-}
-
-CM.Cache.min = -1;
-CM.Cache.max = -1;
-CM.Cache.mid = -1;
-CM.Cache.WrinkBank = -1;
-CM.Cache.WrinkGodBank = -1;
-CM.Cache.NoGoldSwitchCookiesPS = 0;
-CM.Cache.Lucky = 0;
-CM.Cache.LuckyReward = 0;
-CM.Cache.LuckyFrenzy = 0;
-CM.Cache.LuckyRewardFrenzy = 0;
-CM.Cache.SeaSpec = 0;
-CM.Cache.Chain = 0;
-CM.Cache.ChainWrath = 0;
-CM.Cache.ChainReward = 0;
-CM.Cache.ChainWrathReward = 0;
-CM.Cache.ChainFrenzy = 0;
-CM.Cache.ChainFrenzyWrath = 0;
-CM.Cache.ChainFrenzyReward = 0;
-CM.Cache.ChainFrenzyWrathReward = 0;
-CM.Cache.CentEgg = 0;
-CM.Cache.SellForChoEgg = 0;
-CM.Cache.Title = '';
-CM.Cache.HadFierHoard = false;
-CM.Cache.lastDate = -1;
-CM.Cache.lastCookies = -1;
-CM.Cache.lastWrinkCookies = -1;
-CM.Cache.lastChoEgg = -1;
-CM.Cache.lastClicks = -1;
-CM.Cache.CookiesDiff;
-CM.Cache.WrinkDiff;
-CM.Cache.ChoEggDiff;
-CM.Cache.ClicksDiff;
-CM.Cache.AvgCPS = -1;
-CM.Cache.AvgCPSChoEgg = -1;
-CM.Cache.AvgClicks = -1;
-

src/Cache/CPS/AverageQueue.js

@@ -0,0 +1,56 @@
+/* eslint-disable no-unused-vars */
+import { ClickTimes, CookieTimes } from '../../Disp/VariablesAndData';
+import {
+	ChoEggDiff, ClicksDiff, CookiesDiff, WrinkDiff, WrinkFattestDiff,
+} from '../VariablesAndData';
+
+/**
+ * @class
+ * @classdesc 	This is a class used to store values used to calculate average over time (mostly cps)
+ * @var			{number}				maxLength	The maximum length of the value-storage
+ * @var			{[]}					queue		The values stored
+ * @method		addLatest(newValue)		Appends newValue to the value storage
+ * @method		calcAverage(timePeriod)	Returns the average over the specified timeperiod
+ */
+export class CMAvgQueue {
+	constructor(maxLength) {
+		this.maxLength = maxLength;
+		this.queue = [];
+	}
+
+	addLatest(newValue) {
+		if (this.queue.push(newValue) > this.maxLength) {
+			this.queue.shift();
+		}
+	}
+
+	/**
+	 * This functions returns the average of the values in the queue
+	 * @param 	{number}	timePeriod	The period in seconds to computer average over
+	 * @returns {number}	ret			The average
+ 	 */
+	calcAverage(timePeriod) {
+		if (timePeriod > this.maxLength) timePeriod = this.maxLength;
+		if (timePeriod > this.queue.length) timePeriod = this.queue.length;
+		let ret = 0;
+		for (let i = this.queue.length - 1; i >= 0 && i > this.queue.length - 1 - timePeriod; i--) {
+			ret += this.queue[i];
+		}
+		if (ret === 0) {
+			return 0;
+		}
+		return ret / timePeriod;
+	}
+}
+
+/**
+ * This functions caches creates the CMAvgQueue used by CM.Cache.CacheAvgCPS() to calculate CPS
+ * 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]);
+}

src/Cache/CPS/CPS.js

@@ -0,0 +1,67 @@
+/* eslint-disable no-unused-vars */
+
+import { CMOptions } from '../../Config/VariablesAndData';
+import { ClickTimes, CookieTimes } from '../../Disp/VariablesAndData';
+import {
+	CacheAverageClicks, CacheAverageCPS, CacheAverageGainBank, CacheAverageGainChoEgg, CacheAverageGainWrink, CacheAverageGainWrinkFattest, CacheAvgCPSWithChoEgg, CacheLastChoEgg, CacheLastClicks, CacheLastCookies, CacheLastCPSCheck, CacheLastWrinkCookies, CacheLastWrinkFattestCookies, CacheRealCookiesEarned, CacheSellForChoEgg, CacheWrinklersFattest, CacheWrinklersTotal, ChoEggDiff, ClicksDiff, CookiesDiff, WrinkDiff, WrinkFattestDiff,
+} from '../VariablesAndData';
+
+/**
+ * This functions caches two variables related average CPS and Clicks
+ * It is called by CM.Cache.LoopCache()
+ * @global	{number}	CM.Cache.RealCookiesEarned	Cookies earned including the Chocolate Egg
+ * @global	{number}	CM.Cache.AvgCPS				Average cookies over time-period as defined by AvgCPSHist
+ * @global	{number}	CM.Cache.AverageClicks		Average cookies from clicking over time-period as defined by AvgClicksHist
+ * @global	{number}	CM.Cache.AvgCPSChoEgg		Average cookies from combination of normal CPS and average Chocolate Cookie CPS
+ */
+export default function CacheAvgCPS() {
+	const currDate = Math.floor(Date.now() / 1000);
+	// Only calculate every new second
+	if ((Game.T / Game.fps) % 1 === 0) {
+		let choEggTotal = Game.cookies + CacheSellForChoEgg;
+		if (Game.cpsSucked > 0) choEggTotal += CacheWrinklersTotal;
+		CacheRealCookiesEarned = Math.max(Game.cookiesEarned, choEggTotal);
+		choEggTotal *= 0.05;
+
+		// Add recent gains to AvgQueue's
+		const timeDiff = currDate - CacheLastCPSCheck;
+		const bankDiffAvg = Math.max(0, (Game.cookies - CacheLastCookies)) / timeDiff;
+		const wrinkDiffAvg = Math.max(0, (CacheWrinklersTotal - CacheLastWrinkCookies)) / timeDiff;
+		const wrinkFattestDiffAvg = Math.max(0, (CacheWrinklersFattest[0] - CacheLastWrinkFattestCookies)) / timeDiff;
+		const choEggDiffAvg = Math.max(0, (choEggTotal - CacheLastChoEgg)) / timeDiff;
+		const clicksDiffAvg = (Game.cookieClicks - CacheLastClicks) / timeDiff;
+		for (let i = 0; i < timeDiff; i++) {
+			CookiesDiff.addLatest(bankDiffAvg);
+			WrinkDiff.addLatest(wrinkDiffAvg);
+			WrinkFattestDiff.addLatest(wrinkFattestDiffAvg);
+			ChoEggDiff.addLatest(choEggDiffAvg);
+			ClicksDiff.addLatest(clicksDiffAvg);
+		}
+
+		// Store current data for next loop
+		CacheLastCPSCheck = currDate;
+		CacheLastCookies = Game.cookies;
+		CacheLastWrinkCookies = CacheWrinklersTotal;
+		CacheLastWrinkFattestCookies = CacheWrinklersFattest[0];
+		CacheLastChoEgg = choEggTotal;
+		CacheLastClicks = Game.cookieClicks;
+
+		// Get average gain over period of cpsLength seconds
+		const cpsLength = CookieTimes[CMOptions.AvgCPSHist];
+		CacheAverageGainBank = CookiesDiff.calcAverage(cpsLength);
+		CacheAverageGainWrink = WrinkDiff.calcAverage(cpsLength);
+		CacheAverageGainWrinkFattest = WrinkFattestDiff.calcAverage(cpsLength);
+		CacheAverageGainChoEgg = ChoEggDiff.calcAverage(cpsLength);
+		CacheAverageCPS = CacheAverageGainBank;
+		if (CMOptions.CalcWrink === 1) CacheAverageCPS += CacheAverageGainWrink;
+		if (CMOptions.CalcWrink === 2) CacheAverageCPS += CacheAverageGainWrinkFattest;
+
+		const choEgg = (Game.HasUnlocked('Chocolate egg') && !Game.Has('Chocolate egg'));
+
+		if (choEgg || CMOptions.CalcWrink === 0) {
+			CacheAvgCPSWithChoEgg = CacheAverageGainBank + CacheAverageGainWrink + (choEgg ? CacheAverageGainChoEgg : 0);
+		} else CacheAvgCPSWithChoEgg = CacheAverageCPS;
+
+		CacheAverageClicks = ClicksDiff.calcAverage(ClickTimes[CMOptions.AvgClicksHist]);
+	}
+}

src/Cache/CPS/CurrWrinklerCPS.js

@@ -0,0 +1,25 @@
+/* eslint-disable no-unused-vars */
+import { SimObjects } from '../../Sim/VariablesAndData';
+import { CacheCurrWrinklerCount, CacheCurrWrinklerCPSMult } from '../VariablesAndData';
+
+/**
+ * This functions caches the current Wrinkler CPS multiplier
+ * @global	{number}	CM.Cache.CurrWrinklerCount		Current number of wrinklers
+ * @global	{number}	CM.Cache.CurrWrinklerCPSMult	Current multiplier of CPS because of wrinklers (excluding their negative sucking effect)
+ */
+export default function CacheCurrWrinklerCPS() {
+	CacheCurrWrinklerCPSMult = 0;
+	let count = 0;
+	for (const i in Game.wrinklers) {
+		if (Game.wrinklers[i].phase === 2) count++;
+	}
+	let godMult = 1;
+	if (SimObjects.Temple.minigameLoaded) {
+		const godLvl = Game.hasGod('scorn');
+		if (godLvl === 1) godMult *= 1.15;
+		else if (godLvl === 2) godMult *= 1.1;
+		else if (godLvl === 3) godMult *= 1.05;
+	}
+	CacheCurrWrinklerCount = count;
+	CacheCurrWrinklerCPSMult = count * (count * 0.05 * 1.1) * (Game.Has('Sacrilegious corruption') * 0.05 + 1) * (Game.Has('Wrinklerspawn') * 0.05 + 1) * godMult;
+}

src/Cache/CPS/GetCPSBuffMult.js

@@ -0,0 +1,11 @@
+/**
+ * This function returns the current CPS buff
+ * @returns {number}	mult	The multiplier
+ */
+export default function GetCPSBuffMult() {
+	let mult = 1;
+	for (const i of Object.keys(Game.buffs)) {
+		if (typeof Game.buffs[i].multCpS !== 'undefined') mult *= Game.buffs[i].multCpS;
+	}
+	return mult;
+}

src/Cache/CPS/NoGoldSwitchCPS.js

@@ -0,0 +1,14 @@
+/* eslint-disable no-unused-vars */
+import CalcNoGoldSwitchCPS from '../../Sim/Calculations/NoGoldenSwitchCalc';
+import { CacheNoGoldSwitchCookiesPS } from '../VariablesAndData';
+
+/**
+ * This function calculates CPS without the Golden Switch as it might be needed in other functions
+ * If so it CM.Sim.Win()'s them and the caller function will know to recall CM.Sim.CalculateGains()
+ * It is called at the end of any functions that simulates certain behaviour
+ */
+export default function CacheNoGoldSwitchCPS() {
+	if (Game.Has('Golden switch [off]')) {
+		CacheNoGoldSwitchCookiesPS = CalcNoGoldSwitchCPS();
+	} else CacheNoGoldSwitchCookiesPS = Game.cookiesPs;
+}

src/Cache/CPS/SellChoEgg.js

@@ -0,0 +1,25 @@
+/* eslint-disable no-unused-vars */
+import SellBuildingsForChoEgg from '../../Sim/SimulationEvents/SellBuildingForChoEgg';
+import { CacheSellForChoEgg } from '../VariablesAndData';
+
+/**
+ * This functions caches the reward for selling the Chocolate egg
+ * It is called by CM.Main.Loop()
+ * @global	{number}	CM.Cache.SellForChoEgg	Total cookies to be gained from selling Chocolate egg
+ */
+export default function CacheSellAllForChoEgg() {
+	let sellTotal = 0;
+	// Compute cookies earned by selling stock market goods
+	if (Game.Objects.Bank.minigameLoaded) {
+		const marketGoods = Game.Objects.Bank.minigame.goods;
+		let goodsVal = 0;
+		for (const i of Object.keys(marketGoods)) {
+			const marketGood = marketGoods[i];
+			goodsVal += marketGood.stock * marketGood.val;
+		}
+		sellTotal += goodsVal * Game.cookiesPsRawHighest;
+	}
+	// Compute cookies earned by selling all buildings with optimal auras (ES + RB)
+	sellTotal += SellBuildingsForChoEgg();
+	CacheSellForChoEgg = sellTotal;
+}

src/Cache/CacheInit.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-unused-vars */
+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 { 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 CacheWrinklers from './Wrinklers/Wrinklers';
+
+/**
+ * This functions runs all cache-functions to generate all "full" cache
+ */
+export default function InitCache() {
+	CacheDragonAuras();
+	CacheWrinklers();
+	CacheStatsCookies();
+	CacheGoldenAndWrathCookiesMults();
+	CacheChain();
+	CacheAllMissingUpgrades();
+	CacheSeasonSpec();
+	InitCookiesDiff();
+	HeavenlyChipsDiff = new CMAvgQueue(5); // Used by CM.Cache.CacheHeavenlyChipsPS()
+	CacheHeavenlyChipsPS();
+	CacheAvgCPS();
+	CacheIncome();
+	CacheBuildingsPrices();
+	CachePP();
+}

src/Cache/CacheLoop.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-unused-vars */
+import { FormatTime } from '../Disp/BeautifyAndFormatting/BeautifyFormatting';
+import GetCPS from '../Disp/HelperFunctions/GetCPS';
+import CacheAvgCPS from './CPS/CPS';
+import CacheCurrWrinklerCPS from './CPS/CurrWrinklerCPS';
+import CachePP from './PP/PP';
+import CacheHeavenlyChipsPS from './Stats/HeavenlyChips';
+import { CacheTimeTillNextPrestige } from './VariablesAndData';
+import CacheWrinklers from './Wrinklers/Wrinklers';
+
+/**
+ * This functions caches variables that are needed every loop
+ * @global	{string}	CM.Cache.TimeTillNextPrestige	Time requried till next prestige level
+ */
+export default function LoopCache() {
+	// Update Wrinkler Bank
+	CacheWrinklers();
+
+	CachePP();
+	CacheCurrWrinklerCPS();
+	CacheAvgCPS();
+	CacheHeavenlyChipsPS();
+
+	const cookiesToNext = Game.HowManyCookiesReset(Math.floor(Game.HowMuchPrestige(Game.cookiesReset + Game.cookiesEarned)) + 1) - (Game.cookiesEarned + Game.cookiesReset);
+	CacheTimeTillNextPrestige = FormatTime(cookiesToNext / GetCPS());
+}

src/Cache/Dragon/CacheDragonAuras.js

@@ -0,0 +1,10 @@
+/* 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;
+}

src/Cache/Dragon/Dragon.js

@@ -0,0 +1,58 @@
+/* eslint-disable no-unused-vars */
+/** Functions related to the Dragon */
+
+import { Beautify } from '../../Disp/BeautifyAndFormatting/BeautifyFormatting';
+import CopyData from '../../Sim/SimulationData/CopyData';
+import { SimDoSims, SimObjects } from '../../Sim/VariablesAndData';
+import {
+	CacheCostDragonUpgrade, CacheDragonAura, CacheDragonAura2, CacheLastDragonLevel,
+} from '../VariablesAndData';
+
+/**
+ * This functions caches the current cost of upgrading the dragon level so it can be displayed in the tooltip
+ */
+export default function CacheDragonCost() {
+	if (CacheLastDragonLevel !== Game.dragonLevel || SimDoSims) {
+		if (Game.dragonLevel < 25 && Game.dragonLevels[Game.dragonLevel].buy.toString().includes('sacrifice')) {
+			let target = Game.dragonLevels[Game.dragonLevel].buy.toString().match(/Objects\[(.*)\]/)[1];
+			const amount = Game.dragonLevels[Game.dragonLevel].buy.toString().match(/sacrifice\((.*?)\)/)[1];
+			if (target !== 'i') {
+				target = target.replaceAll("'", '');
+				if (Game.Objects[target].amount < amount) {
+					CacheCostDragonUpgrade = 'Not enough buildings to sell';
+				} else {
+					let cost = 0;
+					CopyData();
+					for (let i = 0; i < amount; i++) {
+						let price = SimObjects[target].basePrice * Game.priceIncrease ** Math.max(0, SimObjects[target].amount - 1 - SimObjects[target].free);
+						price = Game.modifyBuildingPrice(SimObjects[target], price);
+						price = Math.ceil(price);
+						cost += price;
+						SimObjects[target].amount--;
+					}
+					CacheCostDragonUpgrade = `Cost to rebuy: ${(cost)}`;
+				}
+			} else {
+				let cost = 0;
+				CopyData();
+				for (const j of Object.keys(Game.Objects)) {
+					target = j;
+					if (Game.Objects[target].amount < amount) {
+						CacheCostDragonUpgrade = 'Not enough buildings to sell';
+						break;
+					} else {
+						for (let i = 0; i < amount; i++) {
+							let price = SimObjects[target].basePrice * Game.priceIncrease ** Math.max(0, SimObjects[target].amount - 1 - SimObjects[target].free);
+							price = Game.modifyBuildingPrice(SimObjects[target], price);
+							price = Math.ceil(price);
+							cost += price;
+							SimObjects[target].amount--;
+						}
+					}
+					CacheCostDragonUpgrade = `Cost to rebuy: ${Beautify(cost)}`;
+				}
+			}
+		}
+		CacheLastDragonLevel = Game.dragonLevel;
+	}
+}

src/Cache/PP/Building.js

@@ -0,0 +1,101 @@
+/* eslint-disable no-unused-vars */
+import { CMOptions } from '../../Config/VariablesAndData';
+import GetWrinkConfigBank from '../../Disp/HelperFunctions/GetWrinkConfigBank';
+import { ColorGray } from '../../Disp/VariablesAndData';
+import {
+	CacheArrayOfPPs,
+	CacheMaxPP, CacheMidPP, CacheMinPP, CacheObjects1, CacheObjects10, CacheObjects100,
+} from '../VariablesAndData';
+import ColourOfPP from './ColourOfPP';
+
+/**
+ * This functions caches the buildings of bulk-buy mode when PP is compared against optimal single-purchase building
+ * It saves all date in CM.Cache.Objects...
+ * It is called by CM.Cache.CacheBuildingsPP()
+ */
+function CacheBuildingsBulkPP(target) {
+	for (const i of Object.keys(target)) {
+		if (Game.cookiesPs) {
+			target[i].pp = (Math.max(target[i].price - (Game.cookies + GetWrinkConfigBank()), 0) / Game.cookiesPs) + (target[i].price / target[i].bonus);
+		} else target[i].pp = (target[i].price / target[i].bonus);
+
+		target[i].color = ColourOfPP(target[i], target[i].price);
+	}
+}
+
+/**
+ * This functions caches the PP of each building it saves all date in CM.Cache.Objects...
+ * It is called by CM.Cache.CachePP()
+ */
+export default function CacheBuildingsPP() {
+	CacheMinPP = Infinity;
+	CacheMaxPP = 1;
+	CacheArrayOfPPs = [];
+	if (typeof CMOptions.PPExcludeTop === 'undefined') CMOptions.PPExcludeTop = 0; // Otherwise breaks during initialization
+
+	// Calculate PP and colors when compared to purchase of optimal building in single-purchase mode
+	if (CMOptions.ColorPPBulkMode === 0 && Game.buyMode > 0) {
+		for (const i of Object.keys(CacheObjects1)) {
+			if (Game.cookiesPs) {
+				CacheObjects1[i].pp = (Math.max(Game.Objects[i].getPrice() - (Game.cookies + GetWrinkConfigBank()), 0) / Game.cookiesPs) + (Game.Objects[i].getPrice() / CacheObjects1[i].bonus);
+			} else CacheObjects1[i].pp = (Game.Objects[i].getPrice() / CacheObjects1[i].bonus);
+			CacheArrayOfPPs.push([CacheObjects1[i].pp, Game.Objects[i].getPrice()]);
+		}
+		// Set CM.Cache.min to best non-excluded buidliung
+		CacheArrayOfPPs.sort((a, b) => a[0] - b[0]);
+		if (CMOptions.PPOnlyConsiderBuyable) {
+			while (CacheArrayOfPPs[0][1] > Game.cookies) {
+				if (CacheArrayOfPPs.length === 1) {
+					break;
+				}
+				CacheArrayOfPPs.shift();
+			}
+		}
+		CacheMinPP = CacheArrayOfPPs[CMOptions.PPExcludeTop][0];
+		CacheMaxPP = CacheArrayOfPPs[CacheArrayOfPPs.length - 1][0];
+		CacheMidPP = ((CacheMaxPP - CacheMinPP) / 2) + CacheMinPP;
+		for (const i of Object.keys(CacheObjects1)) {
+			CacheObjects1[i].color = ColourOfPP(CacheObjects1[i], Game.Objects[i].getPrice());
+			// Colour based on excluding certain top-buildings
+			for (let j = 0; j < CMOptions.PPExcludeTop; j++) {
+				if (CacheObjects1[i].pp === CacheArrayOfPPs[j][0]) CacheObjects1[i].color = ColorGray;
+			}
+		}
+		// Calculate PP of bulk-buy modes
+		CacheBuildingsBulkPP(CacheObjects10);
+		CacheBuildingsBulkPP(CacheObjects100);
+	} else if (Game.buyMode > 0) {
+		// Calculate PP and colors when compared to purchase of selected bulk mode
+		let target;
+		if (Game.buyBulk === 1) target = CacheObjects1;
+		else if (Game.buyBulk === 10) target = CacheObjects10;
+		else if (Game.buyBulk === 100) target = CacheObjects100;
+		for (const i of Object.keys(target)) {
+			if (Game.cookiesPs) {
+				target[i].pp = (Math.max(Game.Objects[i].bulkPrice - (Game.cookies + GetWrinkConfigBank()), 0) / Game.cookiesPs) + (Game.Objects[i].bulkPrice / target[i].bonus);
+			} else target[i].pp = (Game.Objects[i].bulkPrice / target[i].bonus);
+			CacheArrayOfPPs.push([target[i].pp, Game.Objects[i].bulkPrice]);
+		}
+		// Set CM.Cache.min to best non-excluded buidliung
+		CacheArrayOfPPs.sort((a, b) => a[0] - b[0]);
+		if (CMOptions.PPOnlyConsiderBuyable) {
+			while (CacheArrayOfPPs[0][1] > Game.cookies) {
+				if (CacheArrayOfPPs.length === 1) {
+					break;
+				}
+				CacheArrayOfPPs.shift();
+			}
+		}
+		CacheMinPP = CacheArrayOfPPs[CMOptions.PPExcludeTop][0];
+		CacheMaxPP = CacheArrayOfPPs[CacheArrayOfPPs.length - 1][0];
+		CacheMidPP = ((CacheMaxPP - CacheMinPP) / 2) + CacheMinPP;
+
+		for (const i of Object.keys(CacheObjects1)) {
+			target[i].color = ColourOfPP(target[i], Game.Objects[i].bulkPrice);
+			// Colour based on excluding certain top-buildings
+			for (let j = 0; j < CMOptions.PPExcludeTop; j++) {
+				if (target[i].pp === CacheArrayOfPPs[j][0]) target[i].color = ColorGray;
+			}
+		}
+	}
+}

src/Cache/PP/ColourOfPP.js

@@ -0,0 +1,35 @@
+import { CMOptions } from '../../Config/VariablesAndData';
+import GetCPS from '../../Disp/HelperFunctions/GetCPS';
+import {
+	ColorBlue, ColorGray, ColorGreen, ColorOrange, ColorPurple, ColorRed, ColorYellow,
+} from '../../Disp/VariablesAndData';
+import { CacheMaxPP, CacheMidPP, CacheMinPP } from '../VariablesAndData';
+
+/**
+ * This functions return the colour assosciated with the given pp value
+ * It is called by CM.Cache.CacheBuildingsPP(), CM.Cache.CacheBuildingsBulkPP() and CM.Cache.CacheUpgradePP()
+ * @params	{object}	obj		The obj of which the pp value should be checked
+ * @params	{number}	price	The price of the object
+ * @returns {string}	color	The colour assosciated with the pp value
+ */
+export default function ColourOfPP(me, price) {
+	let color = '';
+	// Colour based on PP
+	if (me.pp <= 0 || me.pp === Infinity) color = ColorGray;
+	else if (me.pp < CacheMinPP) color = ColorBlue;
+	else if (me.pp === CacheMinPP) color = ColorGreen;
+	else if (me.pp === CacheMaxPP) color = ColorRed;
+	else if (me.pp > CacheMaxPP) color = ColorPurple;
+	else if (me.pp > CacheMidPP) color = ColorOrange;
+	else color = ColorYellow;
+
+	// Colour based on price in terms of CPS
+	if (Number(CMOptions.PPSecondsLowerLimit) !== 0) {
+		if (price / GetCPS() < Number(CMOptions.PPSecondsLowerLimit)) color = ColorBlue;
+	}
+	// Colour based on being able to purchase
+	if (CMOptions.PPOnlyConsiderBuyable) {
+		if (price - Game.cookies > 0) color = ColorRed;
+	}
+	return color;
+}

src/Cache/PP/PP.js

@@ -0,0 +1,14 @@
+/**
+ * Section: Functions related to caching PP */
+
+import CacheBuildingsPP from './Building';
+import CacheUpgradePP from './Upgrade';
+
+/**
+ * This functions caches the PP of each building and upgrade and stores it in the cache
+ * It is called by CM.Cache.LoopCache() and CM.Cache.InitCache()
+ */
+export default function CachePP() {
+	CacheBuildingsPP();
+	CacheUpgradePP();
+}

src/Cache/PP/Upgrade.js

@@ -0,0 +1,18 @@
+import GetWrinkConfigBank from '../../Disp/HelperFunctions/GetWrinkConfigBank';
+import { CacheUpgrades } from '../VariablesAndData';
+import ColourOfPP from './ColourOfPP';
+
+/**
+ * This functions caches the PP of each building it saves all date in CM.Cache.Upgrades
+ * It is called by CM.Cache.CachePP()
+ */
+export default function CacheUpgradePP() {
+	for (const i of Object.keys(CacheUpgrades)) {
+		if (Game.cookiesPs) {
+			CacheUpgrades[i].pp = (Math.max(Game.Upgrades[i].getPrice() - (Game.cookies + GetWrinkConfigBank()), 0) / Game.cookiesPs) + (Game.Upgrades[i].getPrice() / CacheUpgrades[i].bonus);
+		} else CacheUpgrades[i].pp = (Game.Upgrades[i].getPrice() / CacheUpgrades[i].bonus);
+		if (Number.isNaN(CacheUpgrades[i].pp)) CacheUpgrades[i].pp = Infinity;
+
+		CacheUpgrades[i].color = ColourOfPP(CacheUpgrades[i], Game.Upgrades[i].getPrice());
+	}
+}

src/Cache/PriceAndIncome/PriceAndIncome.js

@@ -0,0 +1,66 @@
+/* eslint-disable no-unused-vars */
+/** Section: Functions related to caching income */
+
+import BuildingGetPrice from '../../Sim/SimulationEvents/BuyBuilding';
+import BuyBuildingsBonusIncome from '../../Sim/SimulationEvents/BuyBuildingBonusIncome';
+import BuyUpgradesBonusIncome from '../../Sim/SimulationEvents/BuyUpgrades';
+import {
+	CacheDoRemakeBuildPrices, CacheObjects1, CacheObjects10, CacheObjects100, CacheUpgrades,
+} from '../VariablesAndData';
+
+/**
+ * This functions starts the calculation/simulation of the bonus income of buildings
+ * It is called by CM.Cache.CacheIncome()
+ * @param	{amount}	amount	Amount to be bought
+ * @parem	{string}	target	The target Cache object ("Objects1", "Objects10" or "Objects100")
+ */
+function CacheBuildingIncome(amount, target) {
+	const result = [];
+	for (const i of Object.keys(Game.Objects)) {
+		result[i] = {};
+		result[i].bonus = BuyBuildingsBonusIncome(i, amount);
+		if (amount !== 1) {
+			CacheDoRemakeBuildPrices = 1;
+		}
+	}
+	return result;
+}
+
+/**
+ * This functions starts the calculation/simulation of the bonus income of upgrades
+ * It is called by CM.Cache.CacheIncome()
+ */
+function CacheUpgradeIncome() {
+	CacheUpgrades = [];
+	for (const i of Object.keys(Game.Upgrades)) {
+		const bonusIncome = BuyUpgradesBonusIncome(i);
+		CacheUpgrades[i] = {};
+		if (bonusIncome[0]) CacheUpgrades[i].bonus = bonusIncome[0];
+		if (bonusIncome[1]) CacheUpgrades[i].bonusMouse = bonusIncome[1];
+	}
+}
+
+/**
+ * This functions caches the price of each building and stores it in the cache
+ */
+export function CacheBuildingsPrices() {
+	for (const i of Object.keys(Game.Objects)) {
+		CacheObjects1[i].price = BuildingGetPrice(Game.Objects[i], Game.Objects[i].basePrice, Game.Objects[i].amount, Game.Objects[i].free, 1);
+		CacheObjects10[i].price = BuildingGetPrice(Game.Objects[i], Game.Objects[i].basePrice, Game.Objects[i].amount, Game.Objects[i].free, 10);
+		CacheObjects100[i].price = BuildingGetPrice(Game.Objects[i], Game.Objects[i].basePrice, Game.Objects[i].amount, Game.Objects[i].free, 100);
+	}
+}
+
+/**
+ * This functions caches the income gain of each building and upgrade and stores it in the cache
+ * It is called by CM.Main.Loop() and CM.Cache.InitCache()
+ */
+export function CacheIncome() {
+	// Simulate Building Buys for 1, 10 and 100 amount
+	CacheObjects1 = CacheBuildingIncome(1);
+	CacheObjects10 = CacheBuildingIncome(10);
+	CacheObjects100 = CacheBuildingIncome(100);
+
+	// Simulate Upgrade Buys
+	CacheUpgradeIncome();
+}

src/Cache/Stats/ChainCookies.js

@@ -0,0 +1,69 @@
+/* eslint-disable no-unused-vars */
+import GetCPSBuffMult from '../CPS/GetCPSBuffMult';
+import {
+	CacheChainFrenzyMaxReward, CacheChainFrenzyRequired, CacheChainFrenzyRequiredNext, CacheChainFrenzyWrathMaxReward, CacheChainFrenzyWrathRequired, CacheChainFrenzyWrathRequiredNext, CacheChainMaxReward, CacheChainRequired, CacheChainRequiredNext, CacheChainWrathMaxReward, CacheChainWrathRequired, CacheChainWrathRequiredNext, CacheDragonsFortuneMultAdjustment, CacheGoldenCookiesMult, CacheNoGoldSwitchCookiesPS, CacheWrathCookiesMult,
+} from '../VariablesAndData';
+
+/**
+ * This functions calculates the max possible payout given a set of variables
+ * It is called by CM.Disp.CreateStatsChainSection() and CM.Cache.CacheChain()
+ * @param	{number}					digit		Number of Golden Cookies in chain
+ * @param	{number}					maxPayout	Maximum payout
+ * @param	{number}					mult		Multiplier
+ * @returns	[{number, number, number}]				Total cookies earned, cookie needed for this and next level
+ */
+export function MaxChainCookieReward(digit, maxPayout, mult) {
+	let totalFromChain = 0;
+	let moni = 0;
+	let nextMoni = 0;
+	let nextRequired = 0;
+	let chain = 1 + Math.max(0, Math.ceil(Math.log(Game.cookies) / Math.LN10) - 10);
+	while (nextMoni < maxPayout) {
+		moni = Math.max(digit, Math.min(Math.floor(1 / 9 * 10 ** chain * digit * mult), maxPayout * mult));
+		nextMoni = Math.max(digit, Math.min(Math.floor(1 / 9 * 10 ** (chain + 1) * digit * mult), maxPayout * mult));
+		nextRequired = Math.floor(1 / 9 * 10 ** (chain + 1) * digit * mult);
+		totalFromChain += moni;
+		chain++;
+	}
+	return [totalFromChain, moni, nextRequired];
+}
+
+/**
+ * This functions caches data related to Chain Cookies reward from Golden Cookioes
+ * It is called by CM.Main.Loop() upon changes to cps and CM.Cache.InitCache()
+ * @global	[{number, number}]	CM.Cache.ChainMaxReward			Total cookies earned, and cookies needed for next level for normal chain
+ * @global	{number}			CM.Cache.ChainRequired			Cookies needed for maximum reward for normal chain
+ * @global	{number}			CM.Cache.ChainRequiredNext		Total cookies needed for next level for normal chain
+ * @global	[{number, number}]	CM.Cache.ChainMaxWrathReward			Total cookies earned, and cookies needed for next level for wrath chain
+ * @global	{number}			CM.Cache.ChainWrathRequired			Cookies needed for maximum reward for wrath chain
+ * @global	{number}			CM.Cache.ChainWrathRequiredNext		Total cookies needed for next level for wrath chain
+ * @global	[{number, number}]	CM.Cache.ChainFrenzyMaxReward			Total cookies earned, and cookies needed for next level for normal frenzy chain
+ * @global	{number}			CM.Cache.ChainFrenzyRequired			Cookies needed for maximum reward for normal frenzy chain
+ * @global	{number}			CM.Cache.ChainFrenzyRequiredNext		Total cookies needed for next level for normal frenzy chain
+ * @global	[{number, number}]	CM.Cache.ChainFrenzyWrathMaxReward			Total cookies earned, and cookies needed for next level for wrath frenzy chain
+ * @global	{number}			CM.Cache.ChainFrenzyWrathRequired			Cookies needed for maximum reward for wrath frenzy chain
+ * @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;
+	// 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;
+
+	CacheChainWrathMaxReward = MaxChainCookieReward(6, maxPayout, CacheWrathCookiesMult);
+	CacheChainWrathRequired = CacheChainWrathMaxReward[1] * 2 / CacheWrathCookiesMult;
+	CacheChainWrathRequiredNext = CacheChainWrathMaxReward[2] / 60 / 60 / 6 / CacheDragonsFortuneMultAdjustment;
+
+	CacheChainFrenzyMaxReward = MaxChainCookieReward(7, maxPayout * 7, CacheGoldenCookiesMult);
+	CacheChainFrenzyRequired = CacheChainFrenzyMaxReward[1] * 2 / CacheGoldenCookiesMult;
+	CacheChainFrenzyRequiredNext = CacheChainFrenzyMaxReward[2] / 60 / 60 / 6 / CacheDragonsFortuneMultAdjustment;
+
+	CacheChainFrenzyWrathMaxReward = MaxChainCookieReward(6, maxPayout * 7, CacheWrathCookiesMult);
+	CacheChainFrenzyWrathRequired = CacheChainFrenzyWrathMaxReward[1] * 2 / CacheWrathCookiesMult;
+	CacheChainFrenzyWrathRequiredNext = CacheChainFrenzyWrathMaxReward[2] / 60 / 60 / 6 / CacheDragonsFortuneMultAdjustment;
+}

src/Cache/Stats/HeavenlyChips.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-unused-vars */
+import {
+	CacheHCPerSecond, CacheLastHeavenlyCheck, CacheLastHeavenlyChips, HeavenlyChipsDiff,
+} from '../VariablesAndData';
+
+/**
+ * This functions caches the heavenly chips per second in the last five seconds
+ * It is called by CM.Cache.LoopCache()
+ * @global	{number}	CM.Cache.HCPerSecond	The Heavenly Chips per second in the last five seconds
+ */
+export default function CacheHeavenlyChipsPS() {
+	const currDate = Math.floor(Date.now() / 1000);
+	// 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 ascendNowToGet = ascendNowToOwn - Math.floor(chipsOwned);
+
+		// Add recent gains to AvgQueue's
+		const timeDiff = currDate - CacheLastHeavenlyCheck;
+		const heavenlyChipsDiffAvg = Math.max(0, (ascendNowToGet - CacheLastHeavenlyChips)) / timeDiff;
+		for (let i = 0; i < timeDiff; i++) {
+			HeavenlyChipsDiff.addLatest(heavenlyChipsDiffAvg);
+		}
+
+		// Store current data for next loop
+		CacheLastHeavenlyCheck = currDate;
+		CacheLastHeavenlyChips = ascendNowToGet;
+
+		// Get average gain over period of 5 seconds
+		CacheHCPerSecond = HeavenlyChipsDiff.calcAverage(5);
+	}
+}

src/Cache/Stats/MissingUpgrades.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-unused-vars */
+import { crateMissing } from '../../Disp/MenuSections/CreateMissingUpgrades';
+import { CacheMissingUpgrades, CacheMissingUpgradesCookies, CacheMissingUpgradesPrestige } from '../VariablesAndData';
+
+/**
+ * This functions caches variables related to missing upgrades
+ * It is called by CM.Main.Loop() and CM.Cache.InitCache()
+ * @global	{string}	CM.Cache.MissingUpgrades			String containig the HTML to create the "crates" for missing normal upgrades
+ * @global	{string}	CM.Cache.MissingUpgradesCookies		String containig the HTML to create the "crates" for missing cookie upgrades
+ * @global	{string}	CM.Cache.MissingUpgradesPrestige	String containig the HTML to create the "crates" for missing prestige upgrades
+ */
+export default function CacheAllMissingUpgrades() {
+	CacheMissingUpgrades = '';
+	CacheMissingUpgradesCookies = '';
+	CacheMissingUpgradesPrestige = '';
+	const list = [];
+	// sort the upgrades
+	for (const i of Object.keys(Game.Upgrades)) {
+		list.push(Game.Upgrades[i]);
+	}
+	const sortMap = function (a, b) {
+		if (a.order > b.order) return 1;
+		if (a.order < b.order) return -1;
+		return 0;
+	};
+	list.sort(sortMap);
+
+	for (const i of Object.keys(list)) {
+		const me = list[i];
+
+		if (me.bought === 0) {
+			let str = '';
+
+			str += crateMissing(me);
+			if (me.pool === 'prestige') CacheMissingUpgradesPrestige += str;
+			else if (me.pool === 'cookie') CacheMissingUpgradesCookies += str;
+			else if (me.pool !== 'toggle' && me.pool !== 'unused' && me.pool !== 'debug') CacheMissingUpgrades += str;
+		}
+	}
+}

src/Cache/Stats/Reindeer.js

@@ -0,0 +1,17 @@
+/* eslint-disable no-unused-vars */
+import { CacheSeaSpec } from '../VariablesAndData';
+
+/**
+ * This functions caches the reward of popping a reindeer
+ * It is called by CM.Main.Loop() and CM.Cache.InitCache()
+ * @global	{number}	CM.Cache.SeaSpec	The reward for popping a reindeer
+ */
+export default function CacheSeasonSpec() {
+	if (Game.season === 'christmas') {
+		let val = Game.cookiesPs * 60;
+		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;
+	}
+}

src/Cache/Stats/Stats.js

@@ -0,0 +1,73 @@
+/* eslint-disable no-unused-vars */
+/** Functions related to Caching stats */
+
+import SimHas from '../../Sim/ReplacedGameFunctions/SimHas';
+import GetCPSBuffMult from '../CPS/GetCPSBuffMult';
+import {
+	CacheConjure, CacheConjureReward, CacheDragonsFortuneMultAdjustment, CacheEdifice, CacheEdificeBuilding, CacheGoldenCookiesMult, CacheLucky, CacheLuckyFrenzy, CacheLuckyReward, CacheLuckyRewardFrenzy, CacheLuckyWrathReward, CacheLuckyWrathRewardFrenzy, CacheNoGoldSwitchCookiesPS, CacheWrathCookiesMult,
+} from '../VariablesAndData';
+
+/**
+ * This functions caches variables related to the stats page
+ */
+export function CacheStatsCookies() {
+	CacheLucky = (CacheNoGoldSwitchCookiesPS * 900) / 0.15;
+	CacheLucky *= CacheDragonsFortuneMultAdjustment;
+	const cpsBuffMult = GetCPSBuffMult();
+	if (cpsBuffMult > 0) CacheLucky /= cpsBuffMult;
+	else CacheLucky = 0;
+	CacheLuckyReward = CacheGoldenCookiesMult * (CacheLucky * 0.15) + 13;
+	CacheLuckyWrathReward = CacheWrathCookiesMult * (CacheLucky * 0.15) + 13;
+	CacheLuckyFrenzy = CacheLucky * 7;
+	CacheLuckyRewardFrenzy = CacheGoldenCookiesMult * (CacheLuckyFrenzy * 0.15) + 13;
+	CacheLuckyWrathRewardFrenzy = CacheWrathCookiesMult * (CacheLuckyFrenzy * 0.15) + 13;
+	CacheConjure = CacheLucky * 2;
+	CacheConjureReward = CacheConjure * 0.15;
+
+	CacheEdifice = 0;
+	let max = 0;
+	let n = 0;
+	for (const i of Object.keys(Game.Objects)) {
+		if (Game.Objects[i].amount > max) max = Game.Objects[i].amount;
+		if (Game.Objects[i].amount > 0) n++;
+	}
+	for (const i of Object.keys(Game.Objects)) {
+		if ((Game.Objects[i].amount < max || n === 1)
+			&& Game.Objects[i].amount < 400
+			&& Game.Objects[i].price * 2 > CacheEdifice) {
+			CacheEdifice = Game.Objects[i].price * 2;
+			CacheEdificeBuilding = i;
+		}
+	}
+}
+
+/**
+ * This functions calculates the multipliers of Golden and Wrath cookie rewards
+ */
+export function CacheGoldenAndWrathCookiesMults() {
+	let goldenMult = 1;
+	let wrathMult = 1;
+	let mult = 1;
+
+	// Factor auras and upgrade in mults
+	if (SimHas('Green yeast digestives')) mult *= 1.01;
+	if (SimHas('Dragon fang')) mult *= 1.03;
+
+	goldenMult *= 1 + Game.auraMult('Ancestral Metamorphosis') * 0.1;
+	goldenMult *= Game.eff('goldenCookieGain');
+	wrathMult *= 1 + Game.auraMult('Unholy Dominion') * 0.1;
+	wrathMult *= Game.eff('wrathCookieGain');
+
+	// Calculate final golden and wrath multipliers
+	CacheGoldenCookiesMult = mult * goldenMult;
+	CacheWrathCookiesMult = mult * wrathMult;
+
+	// Calculate Dragon's Fortune multiplier adjustment:
+	// If Dragon's Fortune (or Reality Bending) aura is active and there are currently no golden cookies,
+	// compute a multiplier adjustment to apply on the current CPS to simulate 1 golden cookie on screen.
+	// 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;
+	}
+}

src/Cache/VariablesAndData.js

@@ -0,0 +1,102 @@
+/* eslint-disable prefer-const */
+
+export let CacheDragonAura = 0;
+export let CacheDragonAura2 = 0;
+export let CacheLastDragonLevel = 0;
+export let CacheCostDragonUpgrade = 0;
+export let CacheLucky = 0;
+export let CacheLuckyReward = 0;
+export let CacheLuckyWrathReward = 0;
+export let CacheLuckyFrenzy = 0;
+export let CacheLuckyRewardFrenzy = 0;
+export let CacheLuckyWrathRewardFrenzy = 0;
+export let CacheConjure = 0;
+export let CacheConjureReward = 0;
+export let CacheEdifice = 0;
+export let CacheEdificeBuilding = 0;
+export let CacheNoGoldSwitchCookiesPS = 0;
+export let CacheDragonsFortuneMultAdjustment = 1;
+export let CacheGoldenCookiesMult = 1;
+export let CacheWrathCookiesMult = 1;
+
+export let CacheHCPerSecond = 0;
+
+export let CacheCentEgg = 0;
+export let CacheSeaSpec = 0;
+export let CacheLastChoEgg = 0;
+
+export let CacheObjects1 = {};
+export let CacheObjects10 = {};
+export let CacheObjects100 = {};
+
+export let CacheWrinklersTotal = 0;
+export let CacheWrinklersNormal = 0;
+export let CacheWrinklersFattest = [0, null];
+
+export let CacheAvgCps = 0;
+export let CacheCurrWrinklerCPSMult = 0;
+export let CacheCurrWrinklerCount = 0;
+
+export let CacheUpgrades = {};
+
+export let CacheAverageClicks = {};
+
+export let CacheMissingUpgrades = {};
+export let CacheMissingUpgradesPrestige = {};
+export let CacheMissingUpgradesCookies = {};
+
+export let CacheChainRequired = 0;
+export let CacheChainRequiredNext = 0;
+export let CacheChainMaxReward = [];
+export let CacheChainWrathRequired = 0;
+export let CacheChainWrathRequiredNext = 0;
+export let CacheChainWrathMaxReward = [];
+export let CacheChainFrenzyRequired = 0;
+export let CacheChainFrenzyRequiredNext = 0;
+export let CacheChainFrenzyMaxReward = [];
+export let CacheChainFrenzyWrathRequired = 0;
+export let CacheChainFrenzyWrathRequiredNext = 0;
+export let CacheChainFrenzyWrathMaxReward = [];
+
+export let CacheRealCookiesEarned = 0;
+export let CacheAvgCPSWithChoEgg = 0;
+
+export let CacheSpawnedGoldenShimmer = {};
+export let CacheSeasonPopShimmer = {};
+
+export let CacheTimeTillNextPrestige = 0;
+
+export let CacheMinPP = 0;
+export let CacheMidPP = 0;
+export let CacheMaxPP = 0;
+export let CacheArrayOfPPs = [];
+
+export let CacheGoldenShimmersByID = {};
+
+export let CacheSellForChoEgg = 0;
+
+export let CookiesDiff;
+export let WrinkDiff;
+export let WrinkFattestDiff;
+export let ChoEggDiff;
+export let ClicksDiff;
+export let HeavenlyChipsDiff;
+
+export let CacheLastCPSCheck;
+export let CacheLastCookies;
+export let CacheLastWrinkCookies;
+export let CacheLastWrinkFattestCookies;
+export let CacheLastClicks;
+
+export let CacheAverageGainBank;
+export let CacheAverageGainWrink;
+export let CacheAverageGainWrinkFattest;
+export let CacheAverageGainChoEgg;
+export let CacheAverageCPS;
+
+export let CacheLastHeavenlyCheck;
+export let CacheLastHeavenlyChips;
+
+export let CacheDoRemakeBuildPrices;
+
+export let CacheHadBuildAura;

src/Cache/Wrinklers/Wrinklers.js

@@ -0,0 +1,36 @@
+/* eslint-disable no-unused-vars */
+/** Caches data related to Wrinklers */
+
+import { SimObjects } from '../../Sim/VariablesAndData';
+import {
+	CacheWrinklersFattest, CacheWrinklersNormal, CacheWrinklersTotal,
+} from '../VariablesAndData';
+
+/**
+ * This functions caches data related to Wrinklers
+ * It is called by CM.Cache.LoopCache() and CM.Cache.InitCache()
+ * @global	{number}				CM.Cache.WrinklersTotal		The cookies of all wrinklers
+ * @global	{number}				CM.Cache.WrinklersNormal	The cookies of all normal wrinklers
+ * @global	{[{number}, {number}]}	CM.Cache.WrinklersFattest	A list containing the cookies and the id of the fattest non-shiny wrinkler
+ */
+export default function CacheWrinklers() {
+	for (let i = 0; i < Game.wrinklers.length; i++) {
+		let sucked = Game.wrinklers[i].sucked;
+		let toSuck = 1.1;
+		if (Game.Has('Sacrilegious corruption')) toSuck *= 1.05;
+		if (Game.wrinklers[i].type === 1) toSuck *= 3; // Shiny wrinklers
+		sucked *= toSuck;
+		if (Game.Has('Wrinklerspawn')) sucked *= 1.05;
+		if (SimObjects.Temple.minigameLoaded) {
+			const godLvl = Game.hasGod('scorn');
+			if (godLvl === 1) sucked *= 1.15;
+			else if (godLvl === 2) sucked *= 1.1;
+			else if (godLvl === 3) sucked *= 1.05;
+		}
+		CacheWrinklersTotal += sucked;
+		if (Game.wrinklers[i].type === 0) {
+			CacheWrinklersNormal += sucked;
+			if (sucked > CacheWrinklersFattest[0]) CacheWrinklersFattest = [sucked, i];
+		}
+	}
+}

src/Config.js

@@ -1,150 +0,0 @@
-/**********
- * Config *
- **********/
-
-CM.SaveConfig = function(config) {
-	localStorage.setItem(CM.ConfigPrefix, JSON.stringify(config));
-}
-
-CM.LoadConfig = function() {
-	if (localStorage.getItem(CM.ConfigPrefix) != null) {
-		CM.Config = JSON.parse(localStorage.getItem(CM.ConfigPrefix));
-
-		// Check values
-		var mod = false;
-		for (var i in CM.ConfigDefault) {
-			if (typeof CM.Config[i] === 'undefined') {
-				mod = true;
-				CM.Config[i] = CM.ConfigDefault[i];
-			}
-			else if (i != 'StatsPref' && i != 'Colors') {
-				if (i.indexOf('SoundURL') == -1) {
-					if (!(CM.Config[i] > -1 && CM.Config[i] < CM.ConfigData[i].label.length)) {
-						mod = true;
-						CM.Config[i] = CM.ConfigDefault[i];
-					}
-				}
-				else {  // Sound URLs
-					if (typeof CM.Config[i] != 'string') {
-						mod = true;
-						CM.Config[i] = CM.ConfigDefault[i];
-					}
-				}
-			}
-			else if (i == 'StatsPref') {
-				for (var j in CM.ConfigDefault.StatsPref) {
-					if (typeof CM.Config[i][j] === 'undefined' || !(CM.Config[i][j] > -1 && CM.Config[i][j] < 2)) {
-						mod = true;
-						CM.Config[i][j] = CM.ConfigDefault[i][j];
-					}
-				}
-			}
-			else { // Colors
-				for (var j in CM.ConfigDefault.Colors) {
-					if (typeof CM.Config[i][j] === 'undefined' || typeof CM.Config[i][j] != 'string') {
-						mod = true;
-						CM.Config[i][j] = CM.ConfigDefault[i][j];
-					}
-				}
-			}
-		}
-		if (mod) CM.SaveConfig(CM.Config);
-		CM.Loop(); // Do loop once
-		for (var i in CM.ConfigDefault) {
-			if (i != 'StatsPref' && typeof CM.ConfigData[i].func !== 'undefined') {
-				CM.ConfigData[i].func();
-			}
-		}
-	}
-	else { // Default values
-		CM.RestoreDefault();
-	}
-}
-
-CM.RestoreDefault = function() {
-	CM.Config = {};
-	CM.SaveConfig(CM.ConfigDefault);
-	CM.LoadConfig();
-	Game.UpdateMenu();
-}
-
-CM.ToggleConfig = function(config) {
-	CM.ToggleConfigUp(config);
-	if (CM.ConfigData[config].toggle) {
-		if (CM.Config[config] == 0) {
-			l(CM.ConfigPrefix + config).className = 'option off';
-		}
-		else {
-			l(CM.ConfigPrefix + config).className = 'option';
-		}
-	}
-}
-
-CM.ToggleConfigUp = function(config) {
-	CM.Config[config]++;
-	if (CM.Config[config] == CM.ConfigData[config].label.length) {
-		CM.Config[config] = 0;
-	}
-	if (typeof CM.ConfigData[config].func !== 'undefined') {
-		CM.ConfigData[config].func();
-	}
-	l(CM.ConfigPrefix + config).innerHTML = CM.Disp.GetConfigDisplay(config);
-	CM.SaveConfig(CM.Config);
-}
-
-CM.ToggleConfigDown = function(config) {
-	CM.Config[config]--;
-	if (CM.Config[config] < 0) {
-		CM.Config[config] = CM.ConfigData[config].label.length - 1;
-	}
-	if (typeof CM.ConfigData[config].func !== 'undefined') {
-		CM.ConfigData[config].func();
-	}
-	l(CM.ConfigPrefix + config).innerHTML = CM.Disp.GetConfigDisplay(config);
-	CM.SaveConfig(CM.Config);
-}
-
-CM.ToggleStatsConfig = function(config) {
-	if (CM.Config.StatsPref[config] == 0) {
-		CM.Config.StatsPref[config]++;
-	}
-	else {
-		CM.Config.StatsPref[config]--;
-	}
-	CM.SaveConfig(CM.Config);
-}
-
-CM.ConfigData.BotBar = {label: ['Bottom Bar OFF', 'Bottom Bar ON'], desc: 'Building Information', toggle: true, func: function() {CM.Disp.ToggleBotBar();}};
-CM.ConfigData.TimerBar = {label: ['Timer Bar OFF', 'Timer Bar ON'], desc: 'Timers of Golden Cookie, Season Popup, Frenzy (Normal, Clot, Elder), Click Frenzy', toggle: true, func: function() {CM.Disp.ToggleTimerBar();}};
-CM.ConfigData.TimerBarPos = {label: ['Timer Bar Position (Top Left)', 'Timer Bar Position (Bottom)'], desc: 'Placement of the Timer Bar', toggle: false, func: function() {CM.Disp.ToggleTimerBarPos();}};
-CM.ConfigData.BuildColor = {label: ['Building Colors OFF', 'Building Colors ON'], desc: 'Color code buildings', toggle: true, func: function() {CM.Disp.UpdateBuildings();}};
-CM.ConfigData.BulkBuildColor = {label: ['Bulk Building Colors (Single Buildings Color)', 'Bulk Building Colors (Calculated Color)'], desc: 'Color code bulk buildings based on single buildings color or calculated bulk value color', toggle: false, func: function() {CM.Disp.UpdateBuildings();}};
-CM.ConfigData.UpBarColor = {label: ['Upgrade Bar/Colors OFF', 'Upgrade Bar/Colors ON'], desc: 'Color code upgrades and add a counter', toggle: true, func: function() {CM.Disp.ToggleUpBarColor();}};
-CM.ConfigData.Colors = {desc: {Blue: 'Color Blue.  Used to show better than best PP building, for Click Frenzy bar, and for various labels', Green: 'Color Green.  Used to show best PP building, for Blood Frenzy bar, and for various labels', Yellow: 'Color Yellow.  Used to show between best and worst PP buildings closer to best, for Frenzy bar, and for various labels', Orange: 'Color Orange.  Used to show between best and worst PP buildings closer to worst, for Next Reindeer bar, and for various labels', Red: 'Color Red.  Used to show worst PP building, for Clot bar, and for various labels', Purple: 'Color Purple.  Used to show worse than worst PP building, for Next Cookie bar, and for various labels', Gray: 'Color Gray.  Used to show negative or infinity PP, and for Next Cookie/Next Reindeer bar', Pink: 'Color Pink.  Used for Dragonflight bar', Brown: 'Color Brown.  Used for Dragon Harvest bar'}, func: function() {CM.Disp.UpdateColors();}};
-CM.ConfigData.CalcWrink = {label: ['Calculate with Wrinklers OFF', 'Calculate with Wrinklers ON'], desc: 'Calculate times and average Cookies Per Second with Wrinklers', toggle: true};
-CM.ConfigData.CPSMode = {label: ['Current Cookies Per Second', 'Average Cookies Per Second'], desc: 'Calculate times using current Cookies Per Second or average Cookies Per Second', toggle: false};
-CM.ConfigData.AvgCPSHist = {label: ['Average CPS for past 1m', 'Average CPS for past 5m', 'Average CPS for past 10m', 'Average CPS for past 15m', 'Average CPS for past 30m'], desc: 'How much time average Cookies Per Second should consider', toggle: false};
-CM.ConfigData.AvgClicksHist = {label: ['Average Cookie Clicks for past 1s', 'Average Cookie Clicks for past 5s', 'Average Cookie Clicks for past 10s', 'Average Cookie Clicks for past 15s', 'Average Cookie Clicks for past 30s'], desc: 'How much time average Cookie Clicks should consider', toggle: false};
-CM.ConfigData.ToolWarnCautBon = {label: ['Calculate Tooltip Warning/Caution With Bonus CPS OFF', 'Calculate Tooltip Warning/Caution With Bonus CPS ON'], desc: 'Calculate the warning/caution with or without the bonus CPS you get from buying', toggle: true};
-CM.ConfigData.Flash = {label: ['Flash OFF', 'Flash ON'], desc: 'Flash screen on Golden Cookie/Season Popup', toggle: true};
-CM.ConfigData.Sound = {label: ['Sounds OFF', 'Sounds ON'], desc: 'Play a sound on Golden Cookie/Season Popup', toggle: true};
-CM.ConfigData.Volume = {label: [], desc: 'Volume of the sound'};
-for (var i = 0; i < 101; i++) {
-	CM.ConfigData.Volume.label[i] = i + '%';
-}
-CM.ConfigData.GCSoundURL = {label: 'Golden Cookie Sound URL:', desc: 'URL of the sound to be played when a Golden Cookie spawns'};
-CM.ConfigData.SeaSoundURL = {label: 'Season Special Sound URL:', desc: 'URL of the sound to be played when a Season Special spawns'};
-CM.ConfigData.GCTimer = {label: ['Golden Cookie Timer OFF', 'Golden Cookie Timer ON'], desc: 'A timer on the Golden Cookie when it has been spawned', toggle: true, func: function() {CM.Disp.ToggleGCTimer();}};
-CM.ConfigData.Title = {label: ['Title OFF', 'Title ON', 'Title Pinned Tab Highlight'], desc: 'Update title with Golden Cookie/Season Popup timers; pinned tab highlight only changes the title when a Golden Cookie/Season Popup spawns', toggle: true};
-CM.ConfigData.Favicon = {label: ['Favicon OFF', 'Favicon ON'], desc: 'Update favicon with Golden/Wrath Cookie', toggle: true, func: function() {CM.Disp.UpdateFavicon();}};
-CM.ConfigData.Tooltip = {label: ['Tooltip Information OFF', 'Tooltip Information ON'], desc: 'Extra information in tooltip for buildings/upgrades/grimoire', toggle: true};
-CM.ConfigData.TooltipAmor = {label: ['Tooltip Amortization Information OFF', 'Tooltip Amortization Information ON'], desc: 'Add amortization information to buildings tooltip', toggle: true};
-CM.ConfigData.ToolWarnCaut = {label: ['Tooltip Warning/Caution OFF', 'Tooltip Warning/Caution ON'], desc: 'A warning/caution when buying if it will put the bank under the amount needed for max "Lucky!"/"Lucky!" (Frenzy) rewards', toggle: true, func: function() {CM.Disp.ToggleToolWarnCaut();}};
-CM.ConfigData.ToolWarnCautPos = {label: ['Tooltip Warning/Caution Position (Left)', 'Tooltip Warning/Caution Position (Bottom)'], desc: 'Placement of the warning/caution boxes', toggle: false, func: function() {CM.Disp.ToggleToolWarnCautPos();}};
-CM.ConfigData.ToolWrink = {label: ['Wrinkler Tooltip OFF', 'Wrinkler Tooltip ON'], desc: 'Shows the amount of cookies a wrinkler will give when popping it', toggle: true};
-CM.ConfigData.Stats = {label: ['Statistics OFF', 'Statistics ON'], desc: 'Extra Cookie Monster statistics!', toggle: true};
-CM.ConfigData.UpStats = {label: ['Statistics Update Rate (Default)', 'Statistics Update Rate (1s)'], desc: 'Default Game rate is once every 5 seconds', toggle: false};
-CM.ConfigData.TimeFormat = {label: ['Time XXd, XXh, XXm, XXs', 'Time XX:XX:XX:XX:XX'], desc: 'Change the time format', toggle: false};
-CM.ConfigData.SayTime = {label: ['Format Time OFF', 'Format Time ON'], desc: 'Change how time is displayed in statistics', toggle: true, func: function() {CM.Disp.ToggleSayTime();}};
-CM.ConfigData.Scale = {label: ['Game\'s Setting Scale', 'Metric', 'Short Scale', 'Scientific Notation'], desc: 'Change how long numbers are handled', toggle: false, func: function() {CM.Disp.RefreshScale();}};
-

src/Config/CheckNotificationPermissions.js

@@ -0,0 +1,30 @@
+/**
+ * This function checks if the user has given permissions for notifications
+ * It is called by a change in any of the notification options
+ * Note that most browsers will stop asking if the user has ignored the prompt around 6 times
+ * @param 	{number}	ToggleOnOff		A number indicating whether the option has been turned off (0) or on (1)
+ */
+function CheckNotificationPermissions(ToggleOnOff) {
+	if (ToggleOnOff === 1)	{
+		// Check if browser support Promise version of Notification Permissions
+		const checkNotificationPromise = function () {
+			try {
+				Notification.requestPermission().then();
+			} catch (e) {
+				return false;
+			}
+			return true;
+		};
+
+		// Check if the browser supports notifications and which type
+		if (!('Notification' in window)) {
+			console.log('This browser does not support notifications.');
+		} else if (checkNotificationPromise()) {
+			Notification.requestPermission().then();
+		} else {
+			Notification.requestPermission();
+		}
+	}
+}
+
+export default CheckNotificationPermissions;

src/Config/SaveLoadReload/SaveLoadReloadSettings.js

@@ -0,0 +1,78 @@
+import { default as ConfigDefault } from '../../Data/SettingsDefault';
+import { default as ConfigData } from '../../Data/SettingsData';
+import { CMOptions } from '../VariablesAndData';
+import save from '../../InitSaveLoad/save';
+import CMLoop from '../../Main/Loop';
+
+/** Functions related to saving, loading and restoring all settings */
+
+/**
+ * This function saves the config of CookieMonster without saving any of the other save-data
+ * This allows saving in between the autosave intervals
+ * It is called by CM.Config.LoadConfig(), CM.Config.RestoreDefault(), CM.Config.ToggleConfig(),
+ * CM.ToggleConfigVolume() and changes in options with type "url", "color" or "numscale"
+ */
+export function SaveConfig() {
+	const saveString = b64_to_utf8(unescape(localStorage.getItem('CookieClickerGame')).split('!END!')[0]);
+	const CookieMonsterSave = saveString.match(/CookieMonster.*(;|$)/);
+	if (CookieMonsterSave !== null) {
+		const newSaveString = saveString.replace(CookieMonsterSave[0], `CookieMonster:${save()}`);
+		localStorage.setItem('CookieClickerGame', escape(`${utf8_to_b64(newSaveString)}!END!`));
+	}
+}
+
+/**
+ * This function loads the config of CookieMonster saved in localStorage and loads it into CMOptions
+ * It is called by CM.Main.DelayInit() and CM.Config.RestoreDefault()
+ */
+export function LoadConfig(settings) {
+	// This removes cookies left from earlier versions of CookieMonster
+	if (typeof localStorage.CMConfig !== 'undefined') {
+		delete localStorage.CMConfig;
+	}
+	if (settings !== undefined) {
+		CMOptions = settings;
+
+		// Check values
+		let mod = false;
+		for (const i in ConfigDefault) {
+			if (typeof CMOptions[i] === 'undefined') {
+				mod = true;
+				CMOptions[i] = ConfigDefault[i];
+			} else if (i !== 'Header' && i !== 'Colors') {
+				if (i.indexOf('SoundURL') === -1) {
+					if (!(CMOptions[i] > -1 && CMOptions[i] < ConfigData[i].label.length)) {
+						mod = true;
+						CMOptions[i] = ConfigDefault[i];
+					}
+				} else if (typeof CMOptions[i] !== 'string') { // Sound URLs
+					mod = true;
+					CMOptions[i] = ConfigDefault[i];
+				}
+			} else if (i === 'Header') {
+				for (const j in ConfigDefault.Header) {
+					if (typeof CMOptions[i][j] === 'undefined' || !(CMOptions[i][j] > -1 && CMOptions[i][j] < 2)) {
+						mod = true;
+						CMOptions[i][j] = ConfigDefault[i][j];
+					}
+				}
+			} else { // Colors
+				for (const j in ConfigDefault.Colors) {
+					if (typeof CMOptions[i][j] === 'undefined' || typeof CMOptions[i][j] !== 'string') {
+						mod = true;
+						CMOptions[i][j] = ConfigDefault[i][j];
+					}
+				}
+			}
+		}
+		if (mod) SaveConfig();
+		CMLoop(); // Do loop once
+		for (const i in ConfigDefault) {
+			if (i !== 'Header' && typeof ConfigData[i].func !== 'undefined') {
+				ConfigData[i].func();
+			}
+		}
+	} else { // Default values
+		LoadConfig(ConfigDefault);
+	}
+}

src/Config/SpecificToggles.js

@@ -0,0 +1,54 @@
+/** Called by the "func" of individual settings */
+
+import UpdateBackground from '../Disp/HelperFunctions/UpdateBackground';
+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) {
+		l('CMBotBar').style.bottom = l('CMTimerBar').style.height;
+		l('game').style.bottom = `${Number(l('CMTimerBar').style.height.replace('px', '')) + 70}px`;
+	} else if (CMOptions.BotBar === 1) {
+		l('CMBotBar').style.bottom = '0px';
+		l('game').style.bottom = '70px';
+	} else if (CMOptions.TimerBar === 1 && CMOptions.TimerBarPos === 1) {
+		l('game').style.bottom = l('CMTimerBar').style.height;
+	} else { // No bars
+		l('game').style.bottom = '0px';
+	}
+
+	if (CMOptions.TimerBar === 1 && CMOptions.TimerBarPos === 0) {
+		l('sectionLeft').style.top = l('CMTimerBar').style.height;
+	} else {
+		l('sectionLeft').style.top = '';
+	}
+
+	UpdateBackground();
+}
+
+/**
+ * This function changes the visibility of the timer bar
+ */
+export function ToggleTimerBar() {
+	if (CMOptions.TimerBar === 1) l('CMTimerBar').style.display = '';
+	else l('CMTimerBar').style.display = 'none';
+	UpdateBotTimerBarPosition();
+}
+
+/**
+ * This function changes the position of the timer bar
+ */
+export function ToggleTimerBarPos() {
+	if (CMOptions.TimerBarPos === 0) {
+		l('CMTimerBar').style.width = '30%';
+		l('CMTimerBar').style.bottom = '';
+		l('game').insertBefore(l('CMTimerBar'), l('sectionLeft'));
+	} else {
+		l('CMTimerBar').style.width = '100%';
+		l('CMTimerBar').style.bottom = '0px';
+		l('wrapper').appendChild(l('CMTimerBar'));
+	}
+	UpdateBotTimerBarPosition();
+}

src/Config/ToggleSetting.js

@@ -0,0 +1,53 @@
+import { default as ConfigData } from '../Data/SettingsData';
+import { SaveConfig } from './SaveLoadReload/SaveLoadReloadSettings';
+import { CMOptions } from './VariablesAndData';
+
+/** Functions related to toggling or changing an individual setting */
+
+/** Used to name certain DOM or outside facing elements and refer to them */
+export const ConfigPrefix = 'CMConfig';
+
+/**
+ * This function toggles options by incrementing them with 1 and handling changes
+ * It is called by the onclick event of options of the "bool" type
+ * @param 	{string}	config	The name of the option
+ */
+export function ToggleConfig(config) {
+	CMOptions[config]++;
+
+	if (CMOptions[config] === ConfigData[config].label.length) {
+		CMOptions[config] = 0;
+		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();
+}
+
+/**
+ * This function sets the value of the specified volume-option and updates the display in the options menu
+ * It is called by the oninput and onchange event of "vol" type options
+ * @param 	{string}	config	The name of the option
+ */
+export function ToggleConfigVolume(config) {
+	if (l(`slider${config}`) !== null) {
+		l(`slider${config}right`).innerHTML = `${l(`slider${config}`).value}%`;
+		CMOptions[config] = Math.round(l(`slider${config}`).value);
+	}
+	SaveConfig();
+}
+
+/**
+ * This function toggles header options by incrementing them with 1 and handling changes
+ * It is called by the onclick event of the +/- next to headers
+ * @param 	{string}	config	The name of the header
+ */
+export function ToggleHeader(config) {
+	CMOptions.Header[config]++;
+	if (CMOptions.Header[config] > 1) CMOptions.Header[config] = 0;
+	SaveConfig();
+}

src/Config/Toggles/ToggleBotBar.js

@@ -0,0 +1,17 @@
+import { UpdateBotBar } from '../../Disp/InfoBars/BottomBar';
+import { UpdateBotTimerBarPosition } from '../SpecificToggles';
+import { CMOptions } from '../VariablesAndData';
+
+/**
+ * This function toggle the bottom bar
+ * It is called by CM.Disp.UpdateAscendState() and a change in CMOptions.BotBar
+ */
+export default function ToggleBotBar() {
+	if (CMOptions.BotBar === 1) {
+		l('CMBotBar').style.display = '';
+		UpdateBotBar();
+	} else {
+		l('CMBotBar').style.display = 'none';
+	}
+	UpdateBotTimerBarPosition();
+}

src/Config/Toggles/ToggleDetailedTime.js

@@ -0,0 +1,12 @@
+import { CMSayTime } from '../../Disp/VariablesAndData';
+import { BackupFunctions } from '../../Main/VariablesAndData';
+import { CMOptions } from '../VariablesAndData';
+
+/**
+ * This function changes some of the time-displays in the game to be more detailed
+ * It is called by a change in CM.Options.DetailedTime
+ */
+export default function ToggleDetailedTime() {
+	if (CMOptions.DetailedTime === 1) Game.sayTime = CMSayTime;
+	else Game.sayTime = BackupFunctions.sayTime;
+}

src/Config/Toggles/ToggleGCTimer.js

@@ -0,0 +1,19 @@
+import { CacheGoldenShimmersByID } from '../../Cache/VariablesAndData';
+import { GCTimers } from '../../Disp/VariablesAndData';
+import { CMOptions } from '../VariablesAndData';
+
+/**
+ * This function toggles GC Timers are visible
+ * It is called by a change in CM.Options.GCTimer
+ */
+export default function ToggleGCTimer() {
+	if (CMOptions.GCTimer === 1) {
+		for (const i of Object.keys(GCTimers)) {
+			GCTimers[i].style.display = 'block';
+			GCTimers[i].style.left = CacheGoldenShimmersByID[i].l.style.left;
+			GCTimers[i].style.top = CacheGoldenShimmersByID[i].l.style.top;
+		}
+	} else {
+		for (const i of Object.keys(GCTimers)) GCTimers[i].style.display = 'none';
+	}
+}

src/Config/Toggles/ToggleToolWarnPos.js

@@ -0,0 +1,20 @@
+import { CMOptions } from '../VariablesAndData';
+
+/**
+ * This function toggles the position of the warnings created by CM.Disp.TooltipCreateWarningSection()
+ * It is called by a change in CM.Options.ToolWarnPos
+ * and upon creation of the warning tooltip by CM.Disp.UpdateTooltipWarnings()
+ */
+export default function ToggleToolWarnPos() {
+	if (l('CMDispTooltipWarningParent') !== null) {
+		if (CMOptions.ToolWarnPos === 0) {
+			l('CMDispTooltipWarningParent').style.top = 'auto';
+			l('CMDispTooltipWarningParent').style.margin = '4px -4px';
+			l('CMDispTooltipWarningParent').style.padding = '3px 4px';
+		} else {
+			l('CMDispTooltipWarningParent').style.right = 'auto';
+			l('CMDispTooltipWarningParent').style.margin = '4px';
+			l('CMDispTooltipWarningParent').style.padding = '4px 3px';
+		}
+	}
+}

src/Config/Toggles/ToggleUpgradeBarAndColor.js

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

src/Config/Toggles/ToggleUpgradeBarFixedPos.js

@@ -0,0 +1,14 @@
+import { CMOptions } from '../VariablesAndData';
+
+/**
+ * This function toggles the position of the upgrade bar from fixed or non-fixed mode
+ * It is called by a change in CM.Options.UpgradeBarFixedPos
+ */
+export default function ToggleUpgradeBarFixedPos() {
+	if (CMOptions.UpgradeBarFixedPos === 1) { // Fix to top of screen when scrolling
+		l('CMUpgradeBar').style.position = 'sticky';
+		l('CMUpgradeBar').style.top = '0px';
+	} else {
+		l('CMUpgradeBar').style.position = ''; // Possible to scroll offscreen
+	}
+}

src/Config/Toggles/ToggleWrinklerButtons.js

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

src/Config/VariablesAndData.js

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

src/CookieMonster.js

@@ -0,0 +1,12 @@
+/* eslint-disable no-unused-vars */
+import init from './InitSaveLoad/init';
+import load from './InitSaveLoad/load';
+import save from './InitSaveLoad/save';
+
+const CM = {
+	init,
+	load,
+	save,
+};
+
+Game.registerMod('CookieMonster', CM);

src/Data.js

@@ -1,8 +0,0 @@
-/********
- * Data *
- ********/
-
-CM.Data.HalloCookies = ['Skull cookies', 'Ghost cookies', 'Bat cookies', 'Slime cookies', 'Pumpkin cookies', 'Eyeball cookies', 'Spider cookies'];
-CM.Data.ChristCookies = ['Christmas tree biscuits', 'Snowflake biscuits', 'Snowman biscuits', 'Holly biscuits', 'Candy cane biscuits', 'Bell biscuits', 'Present biscuits'];
-CM.Data.ValCookies = ['Pure heart biscuits', 'Ardent heart biscuits', 'Sour heart biscuits', 'Weeping heart biscuits', 'Golden heart biscuits', 'Eternal heart biscuits'];
-

src/Data/Gamedata.js

@@ -0,0 +1,94 @@
+/** Data copied directly from the game */
+
+/** Array of the names of all fortune cookies obtainable from the ticker */
+export const Fortunes = [
+	'Fortune #001',
+	'Fortune #002',
+	'Fortune #003',
+	'Fortune #004',
+	'Fortune #005',
+	'Fortune #006',
+	'Fortune #007',
+	'Fortune #008',
+	'Fortune #009',
+	'Fortune #010',
+	'Fortune #011',
+	'Fortune #012',
+	'Fortune #013',
+	'Fortune #014',
+	'Fortune #015',
+	'Fortune #016',
+	'Fortune #017',
+	'Fortune #018',
+	'Fortune #100',
+	'Fortune #101',
+	'Fortune #102',
+	'Fortune #103',
+	'Fortune #104',
+];
+
+/** Array of the names of all Halloween cookies */
+export const HalloCookies = [
+	'Skull cookies',
+	'Ghost cookies',
+	'Bat cookies',
+	'Slime cookies',
+	'Pumpkin cookies',
+	'Eyeball cookies',
+	'Spider cookies',
+];
+
+/** Array of the names of all Christmas cookies */
+export const ChristCookies = ['Christmas tree biscuits',
+	'Snowflake biscuits',
+	'Snowman biscuits',
+	'Holly biscuits',
+	'Candy cane biscuits',
+	'Bell biscuits',
+	'Present biscuits',
+];
+
+/** Array of the names of all Valentine cookies */
+export const ValCookies = ['Pure heart biscuits',
+	'Ardent heart biscuits',
+	'Sour heart biscuits',
+	'Weeping heart biscuits',
+	'Golden heart biscuits',
+	'Eternal heart biscuits',
+	'Prism heart biscuits',
+];
+
+/** Array of the names of all plant drops */
+export const PlantDrops = ['Elderwort biscuits',
+	'Bakeberry cookies',
+	'Duketater cookies',
+	'Green yeast digestives',
+	'Wheat slims',
+	'Fern tea',
+	'Ichor syrup',
+];
+
+/** All possible effects plants and other items can have with a display-title */
+export const Effects = {
+	buildingCost: 'Building prices',
+	click: 'Cookies per click',
+	cps: 'Total CPS',
+	cursorCps: 'Cursor CPS',
+	goldenCookieDur: 'Golden cookie duration',
+	goldenCookieEffDur: 'Golden cookie effect duration',
+	goldenCookieFreq: 'Golden cookie frequency',
+	goldenCookieGain: 'Golden cookie gains',
+	grandmaCps: 'Grandma CPS',
+	itemDrops: 'Random item drop chance',
+	milk: 'Effect from milk',
+	reindeerDur: 'Reindeer duration',
+	reindeerFreq: 'Reindeer frequency',
+	reindeerGain: 'Reindeer gains',
+	upgradeCost: 'Upgrade prices',
+	wrathCookieDur: 'Wrath cookie duration',
+	wrathCookieEffDur: 'Wrath cookie effect duration',
+	wrathCookieFreq: 'Wrath cookie frequency',
+	wrathCookieGain: 'Wrath cookie gains',
+	wrinklerEat: 'Wrinkler ',
+	wrinklerSpawn: 'Wrinkler spawn frequency',
+};

src/Data/Moddata.js

@@ -0,0 +1,29 @@
+/** Data related directly to Cookie Monster */
+
+export const VersionMajor = '2.031';
+export const VersionMinor = '5';
+
+/** 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.5) sees a total rehaul of the backend of the mod. It does not introduce any new functions, this is planned for the next release.</br>
+We believe we have fixed all bugs related to this new code, but if you find any bugs, please report them on the GitHub!</br>
+</br>
+<b>Besides, this update fixes the following bugs:</b></br>
+- Fixed some upgrade tooltips which did not display the full effect of buying the upgrades</br>
+- Fixed not always being able to sell when "blocking bulk buy"</br>
+- Fixed heavenly chips per second display</br>
+- Fixed small display bug when pressing shift and hovering over garden plots</br>
+- Fixed some bugs with the display of numbers and formatting of them</br>
+</br>
+</div>
+`;

src/Data/Scales.js

@@ -0,0 +1,148 @@
+/** 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',
+];
+
+/** Array of abbreviations used in the "Short" scale */
+export const shortScale = ['',
+	'',
+	'M',
+	'B',
+	'Tr',
+	'Quadr',
+	'Quint',
+	'Sext',
+	'Sept',
+	'Oct',
+	'Non',
+	'Dec',
+	'Undec',
+	'Duodec',
+	'Tredec',
+	'Quattuordec',
+	'Quindec',
+	'Sexdec',
+	'Septendec',
+	'Octodec',
+	'Novemdec',
+	'Vigint',
+	'Unvigint',
+	'Duovigint',
+	'Trevigint',
+	'Quattuorvigint',
+];
+
+/** Array of abbreviations used in the "Abbreviated Short" scale */
+export const shortScaleAbbreviated = ['',
+	'K',
+	'M',
+	'B',
+	'T',
+	'Qa',
+	'Qi',
+	'Sx',
+	'Sp',
+	'Oc',
+	'No',
+	'De',
+	'UDe',
+	'DDe',
+	'TDe',
+	'QaDe',
+	'QiDe',
+	'SxDe',
+	'SpDe',
+	'ODe',
+	'NDe',
+	'Vi',
+	'UVi',
+	'DVi',
+	'TVi',
+	'QaVi',
+	'QiVi',
+	'SxVi',
+	'SpVi',
+	'OVi',
+	'NVi',
+	'Tr',
+	'UTr',
+	'DTr',
+	'TTr',
+	'QaTr',
+	'QiTr',
+	'SxTr',
+	'SpTr',
+	'OTr',
+	'NTr',
+	'Qaa',
+	'UQa',
+	'DQa',
+	'TQa',
+	'QaQa',
+	'QiQa',
+	'SxQa',
+	'SpQa',
+	'OQa',
+	'NQa',
+	'Qia',
+	'UQi',
+	'DQi',
+	'TQi',
+	'QaQi',
+	'QiQi',
+	'SxQi',
+	'SpQi',
+	'OQi',
+	'NQi',
+	'Sxa',
+	'USx',
+	'DSx',
+	'TSx',
+	'QaSx',
+	'QiSx',
+	'SxSx',
+	'SpSx',
+	'OSx',
+	'NSx',
+	'Spa',
+	'USp',
+	'DSp',
+	'TSp',
+	'QaSp',
+	'QiSp',
+	'SxSp',
+	'SpSp',
+	'OSp',
+	'NSp',
+	'Oco',
+	'UOc',
+	'DOc',
+	'TOc',
+	'QaOc',
+	'QiOc',
+	'SxOc',
+	'SpOc',
+	'OOc',
+	'NOc',
+	'Noa',
+	'UNo',
+	'DNo',
+	'TNo',
+	'QaNo',
+	'QiNo',
+	'SxNo',
+	'SpNo',
+	'ONo',
+	'NNo',
+	'Ct',
+	'UCt',
+];

src/Data/Sectionheaders.js

@@ -0,0 +1,24 @@
+/** 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',
+	Calculation: 'Calculation',
+	Notification: 'Notification',
+	Tooltip: 'Tooltips and additional insights',
+	Statistics: 'Statistics',
+	Notation: 'Notation',
+	Miscellaneous: 'Miscellaneous',
+};
+
+/** Display titles of the headers of the notification section of the Cookie Monster settings */
+export const ConfigGroupsNotification = {
+	NotificationGeneral: 'General Notifications',
+	NotificationGC: 'Golden Cookie',
+	NotificationFC: 'Fortune Cookie',
+	NotificationSea: 'Season Special',
+	NotificationGard: 'Garden Tick',
+	NotificationMagi: 'Full Magic Bar',
+	NotificationWrink: 'Wrinkler',
+	NotificationWrinkMax: 'Maximum Wrinklers',
+};

src/Data/SettingClasses.js

@@ -0,0 +1,54 @@
+/* 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/SettingsData.js

@@ -0,0 +1,671 @@
+import CachePP from '../Cache/PP/PP';
+import CheckNotificationPermissions from '../Config/CheckNotificationPermissions';
+import { ToggleTimerBar, ToggleTimerBarPos } from '../Config/SpecificToggles';
+import ToggleBotBar from '../Config/Toggles/ToggleBotBar';
+import ToggleDetailedTime from '../Config/Toggles/ToggleDetailedTime';
+import ToggleGCTimer from '../Config/Toggles/ToggleGCTimer';
+import ToggleToolWarnPos from '../Config/Toggles/ToggleToolWarnPos';
+import ToggleUpgradeBarAndColor from '../Config/Toggles/ToggleUpgradeBarAndColor';
+import ToggleUpgradeBarFixedPos from '../Config/Toggles/ToggleUpgradeBarFixedPos';
+import ToggleWrinklerButtons from '../Config/Toggles/ToggleWrinklerButtons';
+import { CMOptions } from '../Config/VariablesAndData';
+import UpdateBuildings from '../Disp/BuildingsUpgrades/Buildings';
+import UpdateUpgrades from '../Disp/BuildingsUpgrades/Upgrades';
+import RefreshScale from '../Disp/HelperFunctions/RefreshScale';
+import UpdateColors from '../Disp/HelperFunctions/UpdateColors';
+import { UpdateFavicon } from '../Disp/TabTitle/FavIcon';
+import {
+	SettingStandard, SettingColours, SettingVolume, SettingInputNumber,
+} from './SettingClasses';
+
+/** This includes all options of CookieMonster and their relevant data */
+const Config = {
+	// Barscolors
+	BotBar: new SettingStandard(
+		'bool',
+		'BarsColors',
+		['Bottom Bar OFF', 'Bottom Bar ON'],
+		'Building Information',
+		true,
+		function () { ToggleBotBar(); },
+	),
+	TimerBar: new SettingStandard(
+		'bool',
+		'BarsColors',
+		['Timer Bar OFF', 'Timer Bar ON'],
+		'Timers of Golden Cookie, Season Popup, Frenzy (Normal, Clot, Elder), Click Frenzy',
+		true,
+		function () { ToggleTimerBar(); },
+	),
+	TimerBarPos: new SettingStandard(
+		'bool',
+		'BarsColors',
+		['Timer Bar Position (Top Left)', 'Timer Bar Position (Bottom)'],
+		'Placement of the Timer Bar',
+		false,
+		function () { ToggleTimerBarPos(); },
+	),
+	TimerBarOverlay: new SettingStandard(
+		'bool',
+		'BarsColors',
+		['Timer Bar Overlay OFF', 'Timer Bar Overlay Only Seconds', 'Timer Bar Overlay Full'],
+		'Overlay on timers displaying seconds and/or percentage left',
+		true,
+	),
+	SortBuildings: new SettingStandard(
+		'bool',
+		'BarsColors',
+		['Sort Buildings: Default', 'Sort Buildings: PP'],
+		'Sort the display of buildings in either default order or by PP',
+		false,
+		function () { UpdateBuildings(); },
+	),
+	SortUpgrades: new SettingStandard(
+		'bool',
+		'BarsColors',
+		['Sort Upgrades: Default', 'Sort Upgrades: PP'],
+		'Sort the display of upgrades in either default order or by PP',
+		false,
+		function () { UpdateUpgrades(); },
+	),
+	BuildColor: new SettingStandard(
+		'bool',
+		'BarsColors',
+		['Building Colors OFF', 'Building Colors ON'],
+		'Color code buildings',
+		true,
+		function () { UpdateBuildings(); },
+	),
+	BulkBuildColor: new SettingStandard(
+		'bool',
+		'BarsColors',
+		['Bulk Building Colors (Single Building Color)', 'Bulk Building Colors (Calculated Bulk Color)'],
+		'Color code bulk buildings based on single buildings color or calculated bulk value color',
+		false,
+		function () { UpdateBuildings(); },
+	),
+	UpBarColor: new SettingStandard(
+		'bool',
+		'BarsColors',
+		['Upgrade Colors/Bar OFF', 'Upgrade Colors with Bar ON', 'Upgrade Colors without Bar ON'],
+		'Color code upgrades and optionally add a counter bar',
+		false,
+		function () { ToggleUpgradeBarAndColor(); },
+	),
+	Colors: new SettingColours(
+		'color',
+		'BarsColors',
+		{
+			Blue: 'Color Blue.  Used to show better than best PP building, for Click Frenzy bar, and for various labels',
+			Green: 'Color Green.  Used to show best PP building, for Blood Frenzy bar, and for various labels',
+			Yellow: 'Color Yellow.  Used to show between best and worst PP buildings closer to best, for Frenzy bar, and for various labels',
+			Orange: 'Color Orange.  Used to show between best and worst PP buildings closer to worst, for Next Reindeer bar, and for various labels',
+			Red: 'Color Red.  Used to show worst PP building, for Clot bar, and for various labels',
+			Purple: 'Color Purple.  Used to show worse than worst PP building, for Next Cookie bar, and for various labels',
+			Gray: 'Color Gray.  Used to show negative or infinity PP, and for Next Cookie/Next Reindeer bar',
+			Pink: 'Color Pink.  Used for Dragonflight bar',
+			Brown: 'Color Brown.  Used for Dragon Harvest bar',
+		},
+		function () { UpdateColors(); },
+	),
+	UpgradeBarFixedPos: new SettingStandard(
+		'bool',
+		'BarsColors',
+		['Upgrade Bar Fixed Position OFF', 'Upgrade Bar Fixed Position ON'],
+		'Lock the upgrade bar at top of the screen to prevent it from moving ofscreen when scrolling',
+		true,
+		function () { ToggleUpgradeBarFixedPos(); },
+	),
+
+	// Calculation
+	CalcWrink: new SettingStandard(
+		'bool',
+		'Calculation',
+		['Calculate with Wrinklers OFF', 'Calculate with Wrinklers ON', 'Calculate with Single Fattest Wrinkler ON'],
+		'Calculate times and average Cookies Per Second with (only the single non-shiny fattest) Wrinklers',
+		true,
+	),
+	CPSMode: new SettingStandard(
+		'bool',
+		'Calculation',
+		['Current Cookies Per Second', 'Average Cookies Per Second'],
+		'Calculate times using current Cookies Per Second or average Cookies Per Second',
+		false,
+	),
+	AvgCPSHist: new SettingStandard(
+		'bool',
+		'Calculation',
+		['Average CPS for past 10s', 'Average CPS for past 15s', 'Average CPS for past 30s', 'Average CPS for past 1m', 'Average CPS for past 5m', 'Average CPS for past 10m', 'Average CPS for past 15m', 'Average CPS for past 30m'],
+		'How much time average Cookies Per Second should consider',
+		false,
+	),
+	AvgClicksHist: new SettingStandard(
+		'bool',
+		'Calculation',
+		['Average Cookie Clicks for past 1s', 'Average Cookie Clicks for past 5s', 'Average Cookie Clicks for past 10s', 'Average Cookie Clicks for past 15s', 'Average Cookie Clicks for past 30s'],
+		'How much time average Cookie Clicks should consider',
+		false,
+	),
+	ColorPPBulkMode: new SettingStandard(
+		'bool',
+		'Calculation',
+		['Color of PP (Compared to Single)', 'Color of PP (Compared to Bulk)'],
+		'Color PP-values based on comparison with single purchase or with selected bulk-buy mode',
+		false,
+		function () { CachePP(); },
+	),
+	PPExcludeTop: new SettingStandard(
+		'bool',
+		'Calculation',
+		["Don't Ignore Any", 'Ignore 1st Best', 'Ignore 1st and 2nd Best', 'Ignore 1st, 2nd and 3rd Best'],
+		'Makes CookieMonster ignore the 1st, 2nd or 3rd best buildings in labeling and colouring PP values',
+		true,
+	),
+	PPSecondsLowerLimit: new SettingInputNumber(
+		'numscale',
+		'Calculation',
+		'Lower limit for PP (in seconds): ',
+		'If a building or upgrade costs less than the specified seconds of CPS it will also be considered optimal and label it as such ("PP is less than xx seconds of CPS"); setting to 0 ignores this option',
+		0,
+		Infinity,
+	),
+	PPOnlyConsiderBuyable: new SettingStandard(
+		'bool',
+		'Calculation',
+		["Don't Ignore Non-Buyable", 'Ignore Non-Buyable'],
+		"Makes CookieMonster label buildings and upgrades you can't buy right now red, useful in those situations where you just want to spend your full bank 'most optimally'",
+		true,
+	),
+	ToolWarnBon: new SettingStandard(
+		'bool',
+		'Calculation',
+		['Calculate Tooltip Warning With Bonus CPS OFF', 'Calculate Tooltip Warning With Bonus CPS ON'],
+		'Calculate the warning with or without the bonus CPS you get from buying',
+		true,
+	),
+
+	// Notification
+	Title: new SettingStandard(
+		'bool',
+		'NotificationGeneral',
+		['Title OFF', 'Title ON', 'Title Pinned Tab Highlight'],
+		'Update title with Golden Cookie/Season Popup timers; pinned tab highlight only changes the title when a Golden Cookie/Season Popup spawns; "!" means that Golden Cookie/Reindeer can spawn',
+		true,
+	),
+	GeneralSound: new SettingStandard(
+		'bool',
+		'NotificationGeneral',
+		['Consider Game Volume Setting OFF', 'Consider Game Volume Setting ON'],
+		'Turning this toggle to "off" makes Cookie Monster no longer consider the volume setting of the base game, allowing mod notifications to play with base game volume turned down',
+		true,
+	),
+	GCNotification: new SettingStandard(
+		'bool',
+		'NotificationGC',
+		['Notification OFF', 'Notification ON'],
+		'Create a notification when Golden Cookie spawns',
+		true,
+		function () { CheckNotificationPermissions(CMOptions.GCNotification); },
+	),
+	GCFlash: new SettingStandard(
+		'bool',
+		'NotificationGC',
+		['Flash OFF', 'Flash ON'],
+		'Flash screen on Golden Cookie',
+		true,
+	),
+	GCSound: new SettingStandard(
+		'bool',
+		'NotificationGC',
+		['Sound OFF', 'Sound ON'],
+		'Play a sound on Golden Cookie',
+		true,
+	),
+	GCVolume: new SettingVolume(
+		'vol',
+		'NotificationGC',
+		[],
+		'Volume',
+	),
+	GCSoundURL: new SettingStandard(
+		'url',
+		'NotificationGC',
+		'Sound URL:',
+		'URL of the sound to be played when a Golden Cookie spawns',
+	),
+	FortuneNotification: new SettingStandard(
+		'bool',
+		'NotificationFC',
+		['Notification OFF', 'Notification ON'],
+		'Create a notification when Fortune Cookie is on the Ticker',
+		true,
+		function () { CheckNotificationPermissions(CMOptions.FortuneNotification); },
+	),
+	FortuneFlash: new SettingStandard(
+		'bool',
+		'NotificationFC',
+		['Flash OFF', 'Flash ON'],
+		'Flash screen on Fortune Cookie',
+		true,
+	),
+	FortuneSound: new SettingStandard(
+		'bool',
+		'NotificationFC',
+		['Sound OFF', 'Sound ON'],
+		'Play a sound on Fortune Cookie',
+		true,
+	),
+	FortuneVolume: new SettingVolume(
+		'vol',
+		'NotificationFC',
+		[],
+		'Volume',
+	),
+
+	FortuneSoundURL: new SettingStandard(
+		'url',
+		'NotificationFC',
+		'Sound URL:',
+		'URL of the sound to be played when the Ticker has a Fortune Cookie',
+	),
+	SeaNotification: new SettingStandard(
+		'bool',
+		'NotificationSea',
+		['Notification OFF', 'Notification ON'],
+		'Create a notification on Season Popup',
+		true,
+		function () { CheckNotificationPermissions(CMOptions.SeaNotification); },
+	),
+	SeaFlash: new SettingStandard(
+		'bool',
+		'NotificationSea',
+		['Flash OFF', 'Flash ON'],
+		'Flash screen on Season Popup',
+		true,
+	),
+	SeaSound: new SettingStandard(
+		'bool',
+		'NotificationSea',
+		['Sound OFF', 'Sound ON'],
+		'Play a sound on Season Popup',
+		true,
+	),
+	SeaVolume: new SettingVolume(
+		'vol',
+		'NotificationSea',
+		[],
+		'Volume',
+	),
+	SeaSoundURL: new SettingStandard(
+		'url',
+		'NotificationSea',
+		'Sound URL:',
+		'URL of the sound to be played when a Season Special spawns',
+	),
+	GardFlash: new SettingStandard(
+		'bool',
+		'NotificationGard',
+		['Garden Tick Flash OFF', 'Flash ON'],
+		'Flash screen on Garden Tick',
+		true,
+	),
+	GardSound: new SettingStandard(
+		'bool',
+		'NotificationGard',
+		['Sound OFF', 'Sound ON'],
+		'Play a sound on Garden Tick',
+		true,
+	),
+	GardVolume: new SettingVolume(
+		'vol',
+		'NotificationGard',
+		[],
+		'Volume',
+	),
+	GardSoundURL: new SettingStandard(
+		'url',
+		'NotificationGard',
+		'Garden Tick Sound URL:',
+		'URL of the sound to be played when the garden ticks',
+	),
+	MagicNotification: new SettingStandard(
+		'bool',
+		'NotificationMagi',
+		['Notification OFF', 'Notification ON'],
+		'Create a notification when magic reaches maximum',
+		true,
+		function () { CheckNotificationPermissions(CMOptions.MagicNotification); },
+	),
+	MagicFlash: new SettingStandard(
+		'bool',
+		'NotificationMagi',
+		['Flash OFF', 'Flash ON'],
+		'Flash screen when magic reaches maximum',
+		true,
+	),
+	MagicSound: new SettingStandard(
+		'bool',
+		'NotificationMagi',
+		['Sound OFF', 'Sound ON'],
+		'Play a sound when magic reaches maximum',
+		true,
+	),
+	MagicVolume: new SettingVolume(
+		'vol',
+		'NotificationMagi',
+		[],
+		'Volume',
+	),
+	MagicSoundURL: new SettingStandard(
+		'url',
+		'NotificationMagi',
+		'Sound URL:',
+		'URL of the sound to be played when magic reaches maxium',
+	),
+	WrinklerNotification: new SettingStandard(
+		'bool',
+		'NotificationWrink',
+		['Notification OFF', 'Notification ON'],
+		'Create a notification when a Wrinkler appears',
+		true,
+		function () { CheckNotificationPermissions(CMOptions.WrinklerNotification); },
+	),
+	WrinklerFlash: new SettingStandard(
+		'bool',
+		'NotificationWrink',
+		['Flash OFF', 'Flash ON'],
+		'Flash screen when a Wrinkler appears',
+		true,
+	),
+	WrinklerSound: new SettingStandard(
+		'bool',
+		'NotificationWrink',
+		['Sound OFF', 'Sound ON'],
+		'Play a sound when a Wrinkler appears',
+		true,
+	),
+	WrinklerVolume: new SettingVolume(
+		'vol',
+		'NotificationWrink',
+		[],
+		'Volume',
+	),
+	WrinklerSoundURL: new SettingStandard(
+		'url',
+		'NotificationWrink',
+		'Sound URL:',
+		'URL of the sound to be played when a Wrinkler appears',
+	),
+	WrinklerMaxNotification: new SettingStandard(
+		'bool',
+		'NotificationWrinkMax',
+		['Notification OFF', 'Notification ON'],
+		'Create a notification when the maximum amount of Wrinklers has appeared',
+		true,
+		function () { CheckNotificationPermissions(CMOptions.WrinklerMaxNotification); },
+	),
+	WrinklerMaxFlash: new SettingStandard(
+		'bool',
+		'NotificationWrinkMax',
+		['Flash OFF', 'Flash ON'],
+		'Flash screen when the maximum amount of Wrinklers has appeared',
+		true,
+	),
+	WrinklerMaxSound: new SettingStandard(
+		'bool',
+		'NotificationWrinkMax',
+		['Sound OFF', 'Sound ON'],
+		'Play a sound when the maximum amount of Wrinklers has appeared',
+		true,
+	),
+	WrinklerMaxVolume: new SettingVolume(
+		'vol',
+		'NotificationWrinkMax',
+		[],
+		'Volume',
+	),
+	WrinklerMaxSoundURL: new SettingStandard(
+		'url',
+		'NotificationWrinkMax',
+		'Sound URL:',
+		'URL of the sound to be played when the maximum amount of Wrinklers has appeared',
+	),
+
+	// Tooltip
+	TooltipBuildUpgrade: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Building/Upgrade Tooltip Information OFF', 'Building/Upgrade  Tooltip Information ON'],
+		'Extra information in Building/Upgrade tooltips',
+		true,
+	),
+	TooltipAmor: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Buildings Tooltip Amortization Information OFF', 'Buildings Tooltip Amortization Information ON'],
+		'Add amortization information to buildings tooltip',
+		true,
+	),
+	ToolWarnLucky: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Tooltip Lucky Warning OFF', 'Tooltip Lucky Warning ON'],
+		'A warning when buying if it will put the bank under the amount needed for max "Lucky!" rewards',
+		true,
+	),
+	ToolWarnLuckyFrenzy: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Tooltip Lucky Frenzy Warning OFF', 'Tooltip Lucky Frenzy Warning ON'],
+		'A warning when buying if it will put the bank under the amount needed for max "Lucky!" (Frenzy) rewards',
+		true,
+	),
+	ToolWarnConjure: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Tooltip Conjure Warning OFF', 'Tooltip Conjure Warning ON'],
+		'A warning when buying if it will put the bank under the amount needed for max "Conjure Baked Goods" rewards',
+		true,
+	),
+	ToolWarnConjureFrenzy: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Tooltip Conjure Frenzy Warning OFF', 'Tooltip Conjure Frenzy Warning ON'],
+		'A warning when buying if it will put the bank under the amount needed for max "Conjure Baked Goods" rewards with Frenzy active',
+		true,
+	),
+	ToolWarnEdifice: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Tooltip Edifice Warning OFF', 'Tooltip Edifice Warning ON'],
+		'A warning when buying if it will put the bank under the amount needed for "Spontaneous Edifice" to possibly give you your most expensive building',
+		true,
+	),
+	ToolWarnUser: new SettingInputNumber(
+		'numscale',
+		'Tooltip',
+		'Tooltip Warning At x times CPS: ',
+		'Use this to show a customized warning if buying it will put the bank under the amount equal to value times cps; setting to 0 disables the function altogether',
+		0,
+		Infinity,
+	),
+	ToolWarnPos: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Tooltip Warning Position (Left)', 'Tooltip Warning Position (Bottom)'],
+		'Placement of the warning boxes',
+		false,
+		function () { ToggleToolWarnPos(); },
+	),
+	TooltipGrim: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Grimoire Tooltip Information OFF', 'Grimoire Tooltip Information ON'],
+		'Extra information in tooltip for grimoire',
+		true,
+	),
+	TooltipWrink: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Wrinkler Tooltip OFF', 'Wrinkler Tooltip ON'],
+		'Shows the amount of cookies a wrinkler will give when popping it',
+		true,
+	),
+	TooltipLump: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Sugar Lump Tooltip OFF', 'Sugar Lump Tooltip ON'],
+		'Shows the current Sugar Lump type in Sugar lump tooltip.',
+		true,
+	),
+	TooltipPlots: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Garden Plots Tooltip OFF', 'Garden Plots Tooltip ON'],
+		'Shows a tooltip for plants that have a cookie reward.',
+		true,
+	),
+	DragonAuraInfo: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Extra Dragon Aura Info OFF', 'Extra Dragon Aura Info ON'],
+		'Shows information about changes in CPS and costs in the dragon aura interface.',
+		true,
+	),
+	TooltipAscendButton: new SettingStandard(
+		'bool',
+		'Tooltip',
+		['Show Extra Info Ascend Tooltip OFF', 'Show Extra Info Ascend Tooltip ON'],
+		'Shows additional info in the ascend tooltip',
+		true,
+	),
+
+	// Statistics
+	Stats: new SettingStandard(
+		'bool',
+		'Statistics',
+		['Statistics OFF', 'Statistics ON'],
+		'Extra Cookie Monster statistics!',
+		true,
+	),
+	MissingUpgrades: new SettingStandard(
+		'bool',
+		'Statistics',
+		['Missing Upgrades OFF', 'Missing Upgrades ON'],
+		'Shows Missing upgrades in Stats Menu. This feature can be laggy for users with a low amount of unlocked achievements.',
+		true,
+	),
+	UpStats: new SettingStandard(
+		'bool',
+		'Statistics',
+		['Statistics Update Rate (Default)', 'Statistics Update Rate (1s)'],
+		'Default Game rate is once every 5 seconds',
+		false,
+	),
+	TimeFormat: new SettingStandard(
+		'bool',
+		'Statistics',
+		['Time XXd, XXh, XXm, XXs', 'Time XX:XX:XX:XX:XX'],
+		'Change the time format',
+		false,
+	),
+	DetailedTime: new SettingStandard(
+		'bool',
+		'Statistics',
+		['Detailed Time OFF', 'Detailed Time ON'],
+		'Change how time is displayed in certain statistics and tooltips',
+		true,
+		function () { ToggleDetailedTime(); },
+	),
+	GrimoireBar: new SettingStandard(
+		'bool',
+		'Statistics',
+		['Grimoire Magic Meter Timer OFF', 'Grimoire Magic Meter Timer ON'],
+		'A timer on how long before the Grimoire magic meter is full',
+		true,
+	),
+	HeavenlyChipsTarget: new SettingInputNumber(
+		'numscale',
+		'Statistics',
+		'Heavenly Chips Target: ',
+		'Use this to set a Heavenly Chips target that will be counted towards in the "prestige" statsistics sections',
+		1,
+		Infinity,
+	),
+	ShowMissedGC: new SettingStandard(
+		'bool',
+		'Statistics',
+		['Missed GC OFF', 'Missed GC ON'],
+		'Show a stat in the statistics screen that counts how many Golden Cookies you have missed',
+		true,
+	),
+
+	// Notation
+	Scale: new SettingStandard(
+		'bool',
+		'Notation',
+		['Game\'s Setting Scale', 'Metric', 'Short Scale', 'Short Scale (Abbreviated)', 'Scientific Notation', 'Engineering Notation'],
+		'Change how long numbers are handled',
+		false,
+		function () { RefreshScale(); },
+	),
+	ScaleDecimals: new SettingStandard(
+		'bool',
+		'Notation',
+		['1 decimals', '2 decimals', '3 decimals'],
+		'Set the number of decimals used when applicable',
+		false,
+		function () { RefreshScale(); },
+	),
+	ScaleSeparator: new SettingStandard(
+		'bool',
+		'Notation',
+		['. for decimals (Standard)', '. for thousands'],
+		'Set the separator used for decimals and thousands',
+		false,
+		function () { RefreshScale(); },
+	),
+	ScaleCutoff: new SettingInputNumber(
+		'numscale',
+		'Notation',
+		'Notation Cut-off Point: ',
+		'The number from which CookieMonster will start formatting numbers based on chosen scale. Standard is 999,999. Setting this above 999,999,999 might break certain notations',
+		1,
+		999999999,
+	),
+
+	// Miscellaneous
+	GCTimer: new SettingStandard(
+		'bool',
+		'Miscellaneous',
+		['Golden Cookie Timer OFF', 'Golden Cookie Timer ON'],
+		'A timer on the Golden Cookie when it has been spawned',
+		true,
+		function () { ToggleGCTimer(); },
+	),
+	Favicon: new SettingStandard(
+		'bool',
+		'Miscellaneous',
+		['Favicon OFF', 'Favicon ON'],
+		'Update favicon with Golden/Wrath Cookie',
+		true,
+		function () { UpdateFavicon(); },
+	),
+	WrinklerButtons: new SettingStandard(
+		'bool',
+		'Miscellaneous',
+		['Extra Buttons OFF', 'Extra Buttons ON'],
+		'Show buttons for popping wrinklers at bottom of cookie section',
+		true,
+		function () { ToggleWrinklerButtons(); },
+	),
+	BulkBuyBlock: new SettingStandard(
+		'bool',
+		'Miscellaneous',
+		['Block Bulk Buying OFF', 'Block Bulk Buying ON'],
+		"Block clicking bulk buying when you can't buy all. This prevents buying 7 of a building when you are in buy-10 or buy-100 mode.",
+		true,
+	),
+};
+
+export default Config;

src/Data/SettingsDefault.js

@@ -0,0 +1,97 @@
+/** This array describes all default settings */
+const ConfigDefault = {
+	BotBar: 1,
+	TimerBar: 1,
+	TimerBarPos: 0,
+	TimerBarOverlay: 2,
+	BuildColor: 1,
+	BulkBuildColor: 0,
+	UpBarColor: 1,
+	UpgradeBarFixedPos: 1,
+	CalcWrink: 0,
+	CPSMode: 1,
+	AvgCPSHist: 3,
+	AvgClicksHist: 0,
+	ColorPPBulkMode: 1,
+	PPExcludeTop: 0,
+	PPSecondsLowerLimit: 0,
+	PPOnlyConsiderBuyable: 0,
+	ToolWarnBon: 0,
+	Title: 1,
+	GeneralSound: 1,
+	GCNotification: 0,
+	GCFlash: 1,
+	GCSound: 1,
+	GCVolume: 100,
+	GCSoundURL: 'https://freesound.org/data/previews/66/66717_931655-lq.mp3',
+	FortuneNotification: 0,
+	FortuneFlash: 1,
+	FortuneSound: 1,
+	FortuneVolume: 100,
+	FortuneSoundURL: 'https://freesound.org/data/previews/174/174027_3242494-lq.mp3',
+	SeaNotification: 0,
+	SeaFlash: 1,
+	SeaSound: 1,
+	SeaVolume: 100,
+	SeaSoundURL: 'https://www.freesound.org/data/previews/121/121099_2193266-lq.mp3',
+	GardFlash: 1,
+	GardSound: 1,
+	GardVolume: 100,
+	GardSoundURL: 'https://freesound.org/data/previews/103/103046_861714-lq.mp3',
+	MagicNotification: 0,
+	MagicFlash: 1,
+	MagicSound: 1,
+	MagicVolume: 100,
+	MagicSoundURL: 'https://freesound.org/data/previews/221/221683_1015240-lq.mp3',
+	WrinklerNotification: 0,
+	WrinklerFlash: 1,
+	WrinklerSound: 1,
+	WrinklerVolume: 100,
+	WrinklerSoundURL: 'https://freesound.org/data/previews/124/124186_8043-lq.mp3',
+	WrinklerMaxNotification: 0,
+	WrinklerMaxFlash: 1,
+	WrinklerMaxSound: 1,
+	WrinklerMaxVolume: 100,
+	WrinklerMaxSoundURL: 'https://freesound.org/data/previews/152/152743_15663-lq.mp3',
+	TooltipBuildUpgrade: 1,
+	TooltipAmor: 0,
+	ToolWarnLucky: 1,
+	ToolWarnLuckyFrenzy: 1,
+	ToolWarnConjure: 1,
+	ToolWarnConjureFrenzy: 1,
+	ToolWarnEdifice: 1,
+	ToolWarnUser: 0,
+	ToolWarnPos: 1,
+	TooltipGrim: 1,
+	TooltipWrink: 1,
+	TooltipLump: 1,
+	TooltipPlots: 1,
+	DragonAuraInfo: 1,
+	TooltipAscendButton: 1,
+	Stats: 1,
+	MissingUpgrades: 1,
+	UpStats: 1,
+	TimeFormat: 0,
+	DetailedTime: 1,
+	GrimoireBar: 1,
+	HeavenlyChipsTarget: 1,
+	ShowMissedGC: 1,
+	Scale: 2,
+	ScaleDecimals: 2,
+	ScaleSeparator: 0,
+	ScaleCutoff: 999999,
+	Colors: {
+		Blue: '#4bb8f0', Green: '#00ff00', Yellow: '#ffff00', Orange: '#ff7f00', Red: '#ff0000', Purple: '#ff00ff', Gray: '#b3b3b3', Pink: '#ff1493', Brown: '#8b4513',
+	},
+	SortBuildings: 0,
+	SortUpgrades: 0,
+	GCTimer: 1,
+	Favicon: 1,
+	WrinklerButtons: 1,
+	BulkBuyBlock: 0,
+	Header: {
+		BarsColors: 1, Calculation: 1, Notification: 1, NotificationGeneral: 1, NotificationGC: 1, NotificationFC: 1, NotificationSea: 1, NotificationGard: 1, NotificationMagi: 1, NotificationWrink: 1, NotificationWrinkMax: 1, Tooltip: 1, Statistics: 1, Notation: 1, Miscellaneous: 1, Lucky: 1, Chain: 1, Spells: 1, Garden: 1, Prestige: 1, Wrink: 1, Sea: 1, Misc: 1, InfoTab: 1,
+	},
+};
+
+export default ConfigDefault;

src/Disp/BeautifyAndFormatting/BeautifyFormatting.js

@@ -0,0 +1,119 @@
+/** General functions to format or beautify strings */
+
+import { CMOptions } from '../../Config/VariablesAndData';
+import { metric, shortScale, shortScaleAbbreviated } from '../../Data/Scales';
+import { BackupFunctions } from '../../Main/VariablesAndData';
+import {
+	ColorGreen, ColorOrange, ColorRed, ColorYellow,
+} from '../VariablesAndData';
+
+/**
+ * This function returns formats number based on the Scale setting
+ * @param	{number}	num		Number to be beautified
+ * @param 	{any}		floats 	Used in some scenario's by CM.Backup.Beautify (Game's original function)
+ * @param	{number}	forced	Used to force (type 3) in certains cases
+ * @returns	{string}			Formatted number
+ */
+export function Beautify(num, floats, forced) {
+	const decimals = CMOptions.ScaleDecimals + 1;
+	if (num === Infinity) {
+		return 'Infinity';
+	} if (typeof num === 'undefined') {
+		return '0';
+	} if (CMOptions.Scale === 0) {
+		return BackupFunctions.Beautify(num, floats);
+	} if (Number.isFinite(num)) {
+		let answer = '';
+		if (num === 0) {
+			return num.toString();
+		} if (num > 0.001 && num < CMOptions.ScaleCutoff) {
+			if (CMOptions.ScaleSeparator) answer = num.toLocaleString('nl');
+			else answer = num.toLocaleString('en');
+			return answer;
+		} if (CMOptions.Scale === 4 && !forced || forced === 4) { // Scientific notation, 123456789 => 1.235E+8
+			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);
+			// answer is now "xxx.xx" (e.g., 123456789 would be 123.46)
+			if (CMOptions.Scale === 1 && !forced || forced === 1) { // Metric scale, 123456789 => 123.457 M
+				if (num >= 0.01 && num < Number(`1e${metric.length * 3}`)) {
+					answer += ` ${metric[AmountOfTenPowerThree]}`;
+				} else answer = Beautify(num, 0, 4); // If number is too large or little, revert to scientific notation
+			} else if (CMOptions.Scale === 2 && !forced || forced === 2) { // Short scale, 123456789 => 123.457 M
+				if (num >= 0.01 && num < Number(`1e${shortScale.length * 3}`)) {
+					answer += ` ${shortScale[AmountOfTenPowerThree]}`;
+				} else answer = Beautify(num, 0, 4); // If number is too large or little, revert to scientific notation
+			} else if (CMOptions.Scale === 3 && !forced || forced === 3) { // Short scale, 123456789 => 123.457 M
+				if (num >= 0.01 && num < Number(`1e${shortScaleAbbreviated.length * 3}`)) {
+					answer += ` ${shortScaleAbbreviated[AmountOfTenPowerThree]}`;
+				} else answer = Beautify(num, 0, 4); // If number is too large or little, revert to scientific notation
+			} else if (CMOptions.Scale === 5 && !forced || forced === 5) { // Engineering notation, 123456789 => 123.457E+6
+				answer += `E${AmountOfTenPowerThree * 3}`;
+			}
+		}
+		if (answer === '') {
+			console.log(`Could not beautify number with CM.Disp.Beautify: ${num}`);
+			answer = BackupFunctions.Beautify(num, floats);
+		}
+		if (CMOptions.ScaleSeparator) answer = answer.replace('.', ',');
+		return answer;
+	}
+	console.log(`Could not beautify number with CM.Disp.Beautify: ${num}`);
+	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) {
+	if (time === Infinity) return time;
+	time = Math.ceil(time);
+	const y = Math.floor(time / 31557600);
+	const d = Math.floor(time % 31557600 / 86400);
+	const h = Math.floor(time % 86400 / 3600);
+	const m = Math.floor(time % 3600 / 60);
+	const s = Math.floor(time % 60);
+	let str = '';
+	if (CMOptions.TimeFormat) {
+		if (time > 3155760000) return 'XX:XX:XX:XX:XX';
+		str += `${(y < 10 ? '0' : '') + y}:`;
+		str += `${(d < 10 ? '0' : '') + d}:`;
+		str += `${(h < 10 ? '0' : '') + h}:`;
+		str += `${(m < 10 ? '0' : '') + m}:`;
+		str += (s < 10 ? '0' : '') + s;
+	} else {
+		if (time > 777600000) return longFormat ? 'Over 9000 days!' : '>9000d';
+		str += (y > 0 ? `${y + (longFormat ? (y === 1 ? ' year' : ' years') : 'y')}, ` : '');
+		str += (d > 0 ? `${d + (longFormat ? (d === 1 ? ' day' : ' days') : 'd')}, ` : '');
+		if (str.length > 0 || h > 0) str += `${h + (longFormat ? (h === 1 ? ' hour' : ' hours') : 'h')}, `;
+		if (str.length > 0 || m > 0) str += `${m + (longFormat ? (m === 1 ? ' minute' : ' minutes') : 'm')}, `;
+		str += s + (longFormat ? (s === 1 ? ' second' : ' seconds') : 's');
+	}
+	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/BuildingsUpgrades/Buildings.js

@@ -0,0 +1,81 @@
+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';
+
+/**
+ * Section: Functions related to right column of the screen (buildings/upgrades)
+
+/**
+ * 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
+ */
+export default function UpdateBuildings() {
+	let target = Game.buyBulk;
+	if (Game.buyMode === 1) {
+		LastTargetBuildings = target;
+	} else {
+		target = LastTargetBuildings;
+	}
+	if (target === 1) target = CacheObjects1;
+	else if (target === 10) target = CacheObjects10;
+	else if (target === 100) target = CacheObjects100;
+
+	if (Game.buyMode === 1) {
+		if (CMOptions.BuildColor === 1) {
+			for (const i of Object.keys(target)) {
+				l(`productPrice${Game.Objects[i].id}`).style.color = CMOptions.Colors[target[i].color];
+			}
+		} else {
+			for (const i of Object.keys(Game.Objects)) {
+				l(`productPrice${Game.Objects[i].id}`).style.removeProperty('color');
+			}
+		}
+	} else if (Game.buyMode === -1) {
+		for (const i of Object.keys(CacheObjects1)) {
+			const o = Game.Objects[i];
+			l(`productPrice${o.id}`).style.color = '';
+			/*
+			 * Fix sell price displayed in the object in the store.
+			 *
+			 * The buildings sell price displayed by the game itself (without any mod) is incorrect.
+			 * The following line of code fixes this issue, and can be safely removed when the game gets fixed.
+			 *
+			 * This issue is extensively detailed here: https://github.com/Aktanusa/CookieMonster/issues/359#issuecomment-735658262
+			 */
+			l(`productPrice${o.id}`).innerHTML = Beautify(BuildingSell(o, o.basePrice, o.amount, o.free, Game.buyBulk, 1));
+		}
+	}
+
+	// Build array of pointers, sort by pp, use array index (+2) as the grid row number
+	// (grid rows are 1-based indexing, and row 1 is the bulk buy/sell options)
+	// This regulates sorting of buildings
+	if (Game.buyMode === 1 && CMOptions.SortBuildings) {
+		const arr = Object.keys(target).map((k) => {
+			const o = target[k];
+			o.name = k;
+			o.id = Game.Objects[k].id;
+			return o;
+		});
+
+		arr.sort(function (a, b) { return (Colors.indexOf(a.color) > Colors.indexOf(b.color) ? 1 : (Colors.indexOf(a.color) < Colors.indexOf(b.color) ? -1 : (a.pp < b.pp) ? -1 : 0)); });
+
+		for (let x = 0; x < arr.length; x++) {
+			Game.Objects[arr[x].name].l.style.gridRow = `${x + 2}/${x + 2}`;
+		}
+	} else {
+		const arr = Object.keys(CacheObjects1).map((k) => {
+			const o = CacheObjects1[k];
+			o.name = k;
+			o.id = Game.Objects[k].id;
+			return o;
+		});
+		arr.sort((a, b) => a.id - b.id);
+		for (let x = 0; x < arr.length; x++) {
+			Game.Objects[arr[x].name].l.style.gridRow = `${x + 2}/${x + 2}`;
+		}
+	}
+}

src/Disp/BuildingsUpgrades/UpgradeBar.js

@@ -0,0 +1,79 @@
+import {
+	ColorBackPre, ColorBlue, ColorGray, ColorGreen, ColorOrange, ColorPurple, ColorRed, ColorTextPre, ColorYellow,
+} from '../VariablesAndData';
+
+/**
+ * This function creates the legend for the upgrade bar
+ * @returns	{object}	legend	The legend-object to be added
+ */
+function CreateUpgradeBarLegend() {
+	const legend = document.createElement('div');
+	legend.style.minWidth = '330px';
+	legend.style.marginBottom = '4px';
+	const title = document.createElement('div');
+	title.className = 'name';
+	title.style.marginBottom = '4px';
+	title.textContent = 'Legend';
+	legend.appendChild(title);
+
+	const legendLine = function (color, text) {
+		const div = document.createElement('div');
+		div.style.verticalAlign = 'middle';
+		const span = document.createElement('span');
+		span.className = ColorBackPre + color;
+		span.style.display = 'inline-block';
+		span.style.height = '10px';
+		span.style.width = '10px';
+		span.style.marginRight = '4px';
+		div.appendChild(span);
+		div.appendChild(document.createTextNode(text));
+		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'));
+	return legend;
+}
+
+/**
+ * This function creates the upgrade bar above the upgrade-section in the right section of the screen
+ */
+export default function CreateUpgradeBar() {
+	const UpgradeBar = document.createElement('div');
+	UpgradeBar.id = 'CMUpgradeBar';
+	UpgradeBar.style.width = '100%';
+	UpgradeBar.style.backgroundColor = 'black';
+	UpgradeBar.style.textAlign = 'center';
+	UpgradeBar.style.fontWeight = 'bold';
+	UpgradeBar.style.display = 'none';
+	UpgradeBar.style.zIndex = '21';
+	UpgradeBar.onmouseout = function () { Game.tooltip.hide(); };
+
+	const placeholder = document.createElement('div');
+	placeholder.appendChild(CreateUpgradeBarLegend());
+	UpgradeBar.onmouseover = function () { Game.tooltip.draw(this, escape(placeholder.innerHTML), 'store'); };
+
+	const upgradeNumber = function (id, color) {
+		const span = document.createElement('span');
+		span.id = id;
+		span.className = ColorTextPre + 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));
+
+	l('upgrades').parentNode.insertBefore(UpgradeBar, l('upgrades').parentNode.childNodes[3]);
+}

src/Disp/BuildingsUpgrades/Upgrades.js

@@ -0,0 +1,82 @@
+import { CacheUpgrades } from '../../Cache/VariablesAndData';
+import { CMOptions } from '../../Config/VariablesAndData';
+import {
+	ColorBackPre, ColorBlue, ColorGray, ColorGreen, ColorOrange, ColorPurple, ColorRed, Colors, ColorYellow,
+} 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()
+ * 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) {
+		let blue = 0;
+		let green = 0;
+		let yellow = 0;
+		let orange = 0;
+		let red = 0;
+		let purple = 0;
+		let gray = 0;
+
+		for (const i of Object.keys(Game.UpgradesInStore)) {
+			const me = Game.UpgradesInStore[i];
+			let addedColor = false;
+			for (let j = 0; j < l(`upgrade${i}`).childNodes.length; j++) {
+				if (l(`upgrade${i}`).childNodes[j].className.indexOf(ColorBackPre) !== -1) {
+					l(`upgrade${i}`).childNodes[j].className = ColorBackPre + CacheUpgrades[me.name].color;
+					addedColor = true;
+					break;
+				}
+			}
+			if (!addedColor) {
+				const div = document.createElement('div');
+				div.style.width = '10px';
+				div.style.height = '10px';
+				div.className = ColorBackPre + CacheUpgrades[me.name].color;
+				l(`upgrade${i}`).appendChild(div);
+			}
+			if (CacheUpgrades[me.name].color === ColorBlue) blue++;
+			else if (CacheUpgrades[me.name].color === ColorGreen) green++;
+			else if (CacheUpgrades[me.name].color === ColorYellow) yellow++;
+			else if (CacheUpgrades[me.name].color === ColorOrange) orange++;
+			else if (CacheUpgrades[me.name].color === ColorRed) red++;
+			else if (CacheUpgrades[me.name].color === ColorPurple) purple++;
+			else if (CacheUpgrades[me.name].color === ColorGray) gray++;
+		}
+
+		l('CMUpgradeBarBlue').textContent = blue;
+		l('CMUpgradeBarGreen').textContent = green;
+		l('CMUpgradeBarYellow').textContent = yellow;
+		l('CMUpgradeBarOrange').textContent = orange;
+		l('CMUpgradeBarRed').textContent = red;
+		l('CMUpgradeBarPurple').textContent = purple;
+		l('CMUpgradeBarGray').textContent = gray;
+	}
+
+	const arr = [];
+	// Build array of pointers, sort by pp, set flex positions
+	// This regulates sorting of upgrades
+	for (let x = 0; x < Game.UpgradesInStore.length; x++) {
+		const o = {};
+		o.name = Game.UpgradesInStore[x].name;
+		o.price = Game.UpgradesInStore[x].basePrice;
+		o.pp = CacheUpgrades[o.name].pp;
+		arr.push(o);
+	}
+
+	if (CMOptions.SortUpgrades) {
+		arr.sort(function (a, b) { return (Colors.indexOf(a.color) > Colors.indexOf(b.color) ? 1 : (Colors.indexOf(a.color) < Colors.indexOf(b.color) ? -1 : (a.pp < b.pp) ? -1 : 0)); });
+	} else {
+		arr.sort((a, b) => a.price - b.price);
+	}
+
+	const nameChecker = function (arr2, upgrade) {
+		return arr2.findIndex((e) => e.name === upgrade.name);
+	};
+	for (let x = 0; x < Game.UpgradesInStore.length; x++) {
+		l(`upgrade${x}`).style.order = nameChecker(arr, Game.UpgradesInStore[x]) + 1;
+	}
+}

src/Disp/Dragon/Dragon.js

@@ -0,0 +1,54 @@
+/** Functions related to the Dragon */
+
+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';
+
+/**
+ * This functions adds the two extra lines about CPS and time to recover to the aura picker infoscreen
+ * @param	{number}	aura	The number of the aura currently selected by the mouse/user
+ */
+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);
+
+		l('dragonAuraInfo').style.minHeight = '60px';
+		l('dragonAuraInfo').style.margin = '8px';
+		l('dragonAuraInfo').appendChild(document.createElement('div')).className = 'line';
+		const div = document.createElement('div');
+		div.style.minWidth = '200px';
+		div.style.textAlign = 'center';
+		div.textContent = `Picking this aura will change CPS by ${Beautify(bonusCPS)} (${bonusCPSPercentage}% of current CPS).`;
+		l('dragonAuraInfo').appendChild(div);
+		const div2 = document.createElement('div');
+		div2.style.minWidth = '200px';
+		div2.style.textAlign = 'center';
+		div2.textContent = `It will take ${timeToRecover} to recover the cost.`;
+		l('dragonAuraInfo').appendChild(div2);
+	}
+}
+
+/**
+ * This functions adds a tooltip to the level up button displaying the cost of rebuying all
+ * It is called by Game.ToggleSpecialMenu() after CM.Main.ReplaceNative()
+ */
+export function AddDragonLevelUpTooltip() {
+	// Check if it is the dragon popup that is on screen
+	if ((l('specialPopup').className.match(/onScreen/) && l('specialPopup').children[0].style.background.match(/dragon/)) !== null) {
+		for (let i = 0; i < l('specialPopup').childNodes.length; i++) {
+			if (l('specialPopup').childNodes[i].className === 'optionBox') {
+				l('specialPopup').children[i].onmouseover = function () {
+					CacheDragonCost();
+					Game.tooltip.dynamic = 1;
+					Game.tooltip.draw(l('specialPopup'), `<div style="min-width:200px;text-align:center;">${CacheCostDragonUpgrade}</div>`, 'this');
+					Game.tooltip.wobble();
+				};
+				l('specialPopup').children[i].onmouseout = function () { Game.tooltip.shouldHide = 1; };
+			}
+		}
+	}
+}

src/Disp/Draw.js

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

src/Disp/GoldenCookieTimers/GoldenCookieTimers.js

@@ -0,0 +1,32 @@
+/** Section: Functions related to the Golden Cookie Timers */
+
+import { CMOptions } from '../../Config/VariablesAndData';
+import { GCTimers } from '../VariablesAndData';
+
+/**
+ * This function creates a new Golden Cookie Timer and appends it CM.Disp.GCTimers based on the id of the cookie
+ * @param	{object}	cookie	A Golden Cookie object
+ */
+export default function CreateGCTimer(cookie) {
+	const GCTimer = document.createElement('div');
+	GCTimer.id = `GCTimer${cookie.id}`;
+	GCTimer.style.width = '96px';
+	GCTimer.style.height = '96px';
+	GCTimer.style.position = 'absolute';
+	GCTimer.style.zIndex = '10000000001';
+	GCTimer.style.textAlign = 'center';
+	GCTimer.style.lineHeight = '96px';
+	GCTimer.style.fontFamily = '"Kavoon", Georgia, serif';
+	GCTimer.style.fontSize = '35px';
+	GCTimer.style.cursor = 'pointer';
+	GCTimer.style.display = 'block';
+	if (CMOptions.GCTimer === 0) GCTimer.style.display = 'none';
+	GCTimer.style.left = cookie.l.style.left;
+	GCTimer.style.top = cookie.l.style.top;
+	GCTimer.onclick = function () { cookie.pop(); };
+	GCTimer.onmouseover = function () { cookie.l.style.filter = 'brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1))'; cookie.l.style.webkitFilter = 'brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1))'; };
+	GCTimer.onmouseout = function () { cookie.l.style.filter = ''; cookie.l.style.webkitFilter = ''; };
+
+	GCTimers[cookie.id] = GCTimer;
+	l('shimmers').appendChild(GCTimer);
+}

src/Disp/HelperFunctions/CalculateGrimoireRefillTime.js

@@ -0,0 +1,15 @@
+/**
+ * This function calculates the time it takes to reach a certain magic level
+ * @param	{number}	currentMagic		The current magic level
+ * @param	{number}	maxMagic			The user's max magic level
+ * @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) {
+	let count = 0;
+	while (currentMagic < targetMagic) {
+		currentMagic += Math.max(0.002, (currentMagic / Math.max(maxMagic, 100)) ** 0.5) * 0.002;
+		count++;
+	}
+	return count / Game.fps;
+}

src/Disp/HelperFunctions/GetCPS.js

@@ -0,0 +1,21 @@
+import {
+	CacheAvgCps, CacheCurrWrinklerCount, CacheCurrWrinklerCPSMult, CacheWrinklersFattest,
+} from '../../Cache/VariablesAndData';
+import { CMOptions } from '../../Config/VariablesAndData';
+
+/**
+ * This function returns the cps as either current or average CPS depending on CM.Options.CPSMode
+ * @returns	{number}	The average or current cps
+ */
+export default function GetCPS() {
+	if (CMOptions.CPSMode) {
+		return CacheAvgCps;
+	} if (CMOptions.CalcWrink === 0) {
+		return (Game.cookiesPs * (1 - Game.cpsSucked));
+	} if (CMOptions.CalcWrink === 1) {
+		return Game.cookiesPs * (CacheCurrWrinklerCPSMult + (1 - (CacheCurrWrinklerCount * 0.05)));
+	} if (CMOptions.CalcWrink === 2 && Game.wrinklers[CacheWrinklersFattest[1]].type === 1) {
+		return Game.cookiesPs * ((CacheCurrWrinklerCPSMult * 3 / CacheCurrWrinklerCount) + (1 - (CacheCurrWrinklerCount * 0.05)));
+	}
+	return Game.cookiesPs * ((CacheCurrWrinklerCPSMult / CacheCurrWrinklerCount) + (1 - (CacheCurrWrinklerCount * 0.05)));
+}

src/Disp/HelperFunctions/GetLumpColor.js

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

@@ -0,0 +1,16 @@
+import { CacheWrinklersFattest, CacheWrinklersTotal } from '../../Cache/VariablesAndData';
+import { CMOptions } from '../../Config/VariablesAndData';
+
+/**
+ * This function returns the total amount stored in the Wrinkler Bank
+ * as calculated by  CM.Cache.CacheWrinklers() if CM.Options.CalcWrink is set
+ * @returns	{number}	0 or the amount of cookies stored (CM.Cache.WrinklersTotal)
+ */
+export default function GetWrinkConfigBank() {
+	if (CMOptions.CalcWrink === 1) {
+		return CacheWrinklersTotal;
+	} if (CMOptions.CalcWrink === 2) {
+		return CacheWrinklersFattest[0];
+	}
+	return 0;
+}

src/Disp/HelperFunctions/PopWrinklers.js

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

src/Disp/HelperFunctions/RefreshScale.js

@@ -0,0 +1,17 @@
+import UpdateBuildings from '../BuildingsUpgrades/Buildings';
+import UpdateUpgrades from '../BuildingsUpgrades/Upgrades';
+import { UpdateBotBar } from '../InfoBars/BottomBar';
+
+/**
+ * This function refreshes all numbers after a change in scale-setting
+ * It is therefore called by a changes in CM.Options.Scale, CM.Options.ScaleDecimals, CM.Options.ScaleSeparator and CM.Options.ScaleCutoff
+ */
+export default function RefreshScale() {
+	BeautifyAll();
+	Game.RefreshStore();
+	Game.RebuildUpgrades();
+
+	UpdateBotBar();
+	UpdateBuildings();
+	UpdateUpgrades();
+}

src/Disp/HelperFunctions/UpdateAscendState.js

@@ -0,0 +1,20 @@
+import { ToggleTimerBar } from '../../Config/SpecificToggles';
+import ToggleBotBar from '../../Config/Toggles/ToggleBotBar';
+import { CMOptions } from '../../Config/VariablesAndData';
+import UpdateBackground from './UpdateBackground';
+
+/**
+ * This function disables and shows the bars created by CookieMonster when the game is "ascending"
+ * It is called by CM.Disp.Draw()
+ */
+export default function UpdateAscendState() {
+	if (Game.OnAscend) {
+		l('game').style.bottom = '0px';
+		if (CMOptions.BotBar === 1) l('CMBotBar').style.display = 'none';
+		if (CMOptions.TimerBar === 1) l('CMTimerBar').style.display = 'none';
+	} else {
+		ToggleBotBar();
+		ToggleTimerBar();
+	}
+	UpdateBackground();
+}

src/Disp/HelperFunctions/UpdateBackground.js

@@ -0,0 +1,11 @@
+/**
+ * This function sets the size of the background of the full game and the left column
+ * depending on whether certain abrs are activated
+ * It is called by CM.Disp.UpdateAscendState() and CM.Disp.UpdateBotTimerBarPosition()
+ */
+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;
+}

src/Disp/HelperFunctions/UpdateColors.js

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

@@ -0,0 +1,88 @@
+/** Functions related to the Bottom Bar */
+
+import { CacheObjects1, CacheObjects10, CacheObjects100 } from '../../Cache/VariablesAndData';
+import { CMOptions } from '../../Config/VariablesAndData';
+import { VersionMajor, VersionMinor } from '../../Data/Moddata';
+import { Beautify, GetTimeColor } from '../BeautifyAndFormatting/BeautifyFormatting';
+import GetCPS from '../HelperFunctions/GetCPS';
+import GetWrinkConfigBank from '../HelperFunctions/GetWrinkConfigBank';
+import {
+	ColorBlue, ColorTextPre, ColorYellow, LastTargetBotBar,
+} from '../VariablesAndData';
+import { CreateBotBarBuildingColumn } from './CreateDOMElements';
+
+/**
+ * This function creates the bottom bar and appends it to l('wrapper')
+ */
+export function CreateBotBar() {
+	const BotBar = document.createElement('div');
+	BotBar.id = 'CMBotBar';
+	BotBar.style.height = '69px';
+	BotBar.style.width = '100%';
+	BotBar.style.position = 'absolute';
+	BotBar.style.display = 'none';
+	BotBar.style.backgroundColor = '#262224';
+	BotBar.style.backgroundImage = 'linear-gradient(to bottom, #4d4548, #000000)';
+	BotBar.style.borderTop = '1px solid black';
+	BotBar.style.overflow = 'auto';
+	BotBar.style.textShadow = '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black';
+
+	const table = BotBar.appendChild(document.createElement('table'));
+	table.style.width = '100%';
+	table.style.textAlign = 'center';
+	table.style.whiteSpace = 'nowrap';
+	const tbody = table.appendChild(document.createElement('tbody'));
+
+	const firstCol = function (text, color) {
+		const td = document.createElement('td');
+		td.style.textAlign = 'right';
+		td.className = ColorTextPre + color;
+		td.textContent = text;
+		return td;
+	};
+	const type = tbody.appendChild(document.createElement('tr'));
+	type.style.fontWeight = 'bold';
+	type.appendChild(firstCol(`CM ${VersionMajor}.${VersionMinor}`, ColorYellow));
+	const bonus = tbody.appendChild(document.createElement('tr'));
+	bonus.appendChild(firstCol('Bonus Income', ColorBlue));
+	const pp = tbody.appendChild(document.createElement('tr'));
+	pp.appendChild(firstCol('Payback Period', ColorBlue));
+	const time = tbody.appendChild(document.createElement('tr'));
+	time.appendChild(firstCol('Time Left', ColorBlue));
+
+	l('wrapper').appendChild(BotBar);
+
+	for (const i of Object.keys(Game.Objects)) {
+		CreateBotBarBuildingColumn(i);
+	}
+}
+
+/**
+ * This function updates the bonus-, pp-, and time-rows in the the bottom bar
+ */
+export function UpdateBotBar() {
+	if (CMOptions.BotBar === 1 && CacheObjects1 && Game.buyMode === 1) {
+		let count = 0;
+		for (const i of Object.keys(CacheObjects1)) {
+			let target = Game.buyBulk;
+			if (Game.buyMode === 1) {
+				LastTargetBotBar = target;
+			} else {
+				target = LastTargetBotBar;
+			}
+			if (target === 1) target = CacheObjects1;
+			if (target === 10) target = CacheObjects10;
+			if (target === 100) target = CacheObjects100;
+			count++;
+			l('CMBotBar').firstChild.firstChild.childNodes[0].childNodes[count].childNodes[1].textContent = Game.Objects[i].amount;
+			l('CMBotBar').firstChild.firstChild.childNodes[1].childNodes[count].textContent = Beautify(target[i].bonus, 2);
+			l('CMBotBar').firstChild.firstChild.childNodes[2].childNodes[count].className = ColorTextPre + target[i].color;
+			l('CMBotBar').firstChild.firstChild.childNodes[2].childNodes[count].textContent = Beautify(target[i].pp, 2);
+			const timeColor = GetTimeColor((Game.Objects[i].bulkPrice - (Game.cookies + GetWrinkConfigBank())) / GetCPS());
+			l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[count].className = ColorTextPre + timeColor.color;
+			if (timeColor.text === 'Done!' && Game.cookies < Game.Objects[i].bulkPrice) {
+				l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[count].textContent = `${timeColor.text} (with Wrink)`;
+			} else l('CMBotBar').firstChild.firstChild.childNodes[3].childNodes[count].textContent = timeColor.text;
+		}
+	}
+}

src/Disp/InfoBars/CreateDOMElements.js

@@ -0,0 +1,89 @@
+/** Functions to create various DOM elements used by the Bars */
+
+import { ColorBackPre, ColorBlue, ColorTextPre } from '../VariablesAndData';
+
+/**
+ * This function creates an indivudual timer for the timer bar
+ * @param	{string}					id					An id to identify the timer
+ * @param	{string}					name				The title of the timer
+ * @param	[{{string}, {string}}, ...]	bars ([id, color])	The id and colours of individual parts of the timer
+ */
+export function CreateTimer(id, name, bars) {
+	const timerBar = document.createElement('div');
+	timerBar.id = id;
+	timerBar.style.height = '12px';
+	timerBar.style.margin = '0px 10px';
+	timerBar.style.position = 'relative';
+
+	const div = document.createElement('div');
+	div.style.width = '100%';
+	div.style.height = '10px';
+	div.style.margin = 'auto';
+	div.style.position = 'absolute';
+	div.style.left = '0px';
+	div.style.top = '0px';
+	div.style.right = '0px';
+	div.style.bottom = '0px';
+
+	const type = document.createElement('span');
+	type.style.display = 'inline-block';
+	type.style.textAlign = 'right';
+	type.style.fontSize = '10px';
+	type.style.width = '108px';
+	type.style.marginRight = '5px';
+	type.style.verticalAlign = 'text-top';
+	type.textContent = name;
+	div.appendChild(type);
+
+	for (let i = 0; i < bars.length; i++) {
+		const colorBar = document.createElement('span');
+		colorBar.id = bars[i].id;
+		colorBar.style.display = 'inline-block';
+		colorBar.style.height = '10px';
+		colorBar.style.verticalAlign = 'text-top';
+		colorBar.style.textAlign = 'center';
+		if (bars.length - 1 === i) {
+			colorBar.style.borderTopRightRadius = '10px';
+			colorBar.style.borderBottomRightRadius = '10px';
+		}
+		if (typeof bars[i].color !== 'undefined') {
+			colorBar.className = ColorBackPre + bars[i].color;
+		}
+		div.appendChild(colorBar);
+	}
+
+	const timer = document.createElement('span');
+	timer.id = `${id}Time`;
+	timer.style.marginLeft = '5px';
+	timer.style.verticalAlign = 'text-top';
+	div.appendChild(timer);
+
+	timerBar.appendChild(div);
+
+	return timerBar;
+}
+
+/**
+ * This function extends the bottom bar (created by CM.Disp.CreateBotBar) with a column for the given building.
+ * @param	{string}	buildingName	Objectname to be added (e.g., "Cursor")
+ */
+export function CreateBotBarBuildingColumn(buildingName) {
+	if (l('CMBotBar') !== null) {
+		const type = l('CMBotBar').firstChild.firstChild.childNodes[0];
+		const bonus = l('CMBotBar').firstChild.firstChild.childNodes[1];
+		const pp = l('CMBotBar').firstChild.firstChild.childNodes[2];
+		const time = l('CMBotBar').firstChild.firstChild.childNodes[3];
+
+		const i = buildingName;
+		const header = type.appendChild(document.createElement('td'));
+		header.appendChild(document.createTextNode(`${i.indexOf(' ') !== -1 ? i.substring(0, i.indexOf(' ')) : i} (`));
+
+		const span = header.appendChild(document.createElement('span'));
+		span.className = ColorTextPre + ColorBlue;
+
+		header.appendChild(document.createTextNode(')'));
+		bonus.appendChild(document.createElement('td'));
+		pp.appendChild(document.createElement('td'));
+		time.appendChild(document.createElement('td'));
+	}
+}

src/Disp/InfoBars/TimerBar.js

@@ -0,0 +1,118 @@
+/** Functions related to the Timer Bar */
+
+import { UpdateBotTimerBarPosition } from '../../Config/SpecificToggles';
+import { CMOptions } from '../../Config/VariablesAndData';
+import {
+	BuffColors,
+	ColorBackPre, ColorGray, ColorOrange, ColorPurple, LastNumberOfTimers,
+} from '../VariablesAndData';
+import { CreateTimer } from './CreateDOMElements';
+
+/**
+ * This function creates the TimerBar and appends it to l('wrapper')
+ */
+export function CreateTimerBar() {
+	const TimerBar = document.createElement('div');
+	TimerBar.id = 'CMTimerBar';
+	TimerBar.style.position = 'absolute';
+	TimerBar.style.display = 'none';
+	TimerBar.style.height = '0px';
+	TimerBar.style.fontSize = '10px';
+	TimerBar.style.fontWeight = 'bold';
+	TimerBar.style.backgroundColor = 'black';
+
+	// Create standard Golden Cookie bar
+	const CMTimerBarGC = CreateTimer('CMTimerBarGC',
+		'Next Cookie',
+		[{ id: 'CMTimerBarGCMinBar', color: ColorGray }, { id: 'CMTimerBarGCBar', color: ColorPurple }]);
+	TimerBar.appendChild(CMTimerBarGC);
+
+	// Create standard Reindeer bar
+	const CMTimerBarRen = CreateTimer('CMTimerBarRen',
+		'Next Reindeer',
+		[{ id: 'CMTimerBarRenMinBar', color: ColorGray }, { id: 'CMTimerBarRenBar', color: ColorOrange }]);
+	TimerBar.appendChild(CMTimerBarRen);
+
+	l('wrapper').appendChild(TimerBar);
+}
+
+/**
+ * This function updates indivudual timers in the timer bar
+ */
+export function UpdateTimerBar() {
+	if (CMOptions.TimerBar === 1) {
+		// label width: 113, timer width: 30, div margin: 20
+		const maxWidthTwoBar = l('CMTimerBar').offsetWidth - 163;
+		// label width: 113, div margin: 20, calculate timer width at runtime
+		const maxWidthOneBar = l('CMTimerBar').offsetWidth - 133;
+		let numberOfTimers = 0;
+
+		// Regulates visibility of Golden Cookie timer
+		if (Game.shimmerTypes.golden.spawned === 0 && !Game.Has('Golden switch [off]')) {
+			l('CMTimerBarGC').style.display = '';
+			l('CMTimerBarGCMinBar').style.width = `${Math.round(Math.max(0, Game.shimmerTypes.golden.minTime - Game.shimmerTypes.golden.time) * maxWidthTwoBar / Game.shimmerTypes.golden.maxTime)}px`;
+			if (CMOptions.TimerBarOverlay >= 1) l('CMTimerBarGCMinBar').textContent = Math.ceil((Game.shimmerTypes.golden.minTime - Game.shimmerTypes.golden.time) / Game.fps);
+			else l('CMTimerBarGCMinBar').textContent = '';
+			if (Game.shimmerTypes.golden.minTime === Game.shimmerTypes.golden.maxTime) {
+				l('CMTimerBarGCMinBar').style.borderTopRightRadius = '10px';
+				l('CMTimerBarGCMinBar').style.borderBottomRightRadius = '10px';
+			} else {
+				l('CMTimerBarGCMinBar').style.borderTopRightRadius = '';
+				l('CMTimerBarGCMinBar').style.borderBottomRightRadius = '';
+			}
+			l('CMTimerBarGCBar').style.width = `${Math.round(Math.min(Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.minTime, Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.time) * maxWidthTwoBar / Game.shimmerTypes.golden.maxTime)}px`;
+			if (CMOptions.TimerBarOverlay >= 1) l('CMTimerBarGCBar').textContent = Math.ceil(Math.min(Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.minTime, Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.time) / Game.fps);
+			else l('CMTimerBarGCBar').textContent = '';
+			l('CMTimerBarGCTime').textContent = Math.ceil((Game.shimmerTypes.golden.maxTime - Game.shimmerTypes.golden.time) / Game.fps);
+			numberOfTimers++;
+		} else l('CMTimerBarGC').style.display = 'none';
+
+		// Regulates visibility of Reindeer timer
+		if (Game.season === 'christmas' && Game.shimmerTypes.reindeer.spawned === 0) {
+			l('CMTimerBarRen').style.display = '';
+			l('CMTimerBarRenMinBar').style.width = `${Math.round(Math.max(0, Game.shimmerTypes.reindeer.minTime - Game.shimmerTypes.reindeer.time) * maxWidthTwoBar / Game.shimmerTypes.reindeer.maxTime)}px`;
+			if (CMOptions.TimerBarOverlay >= 1) l('CMTimerBarRenMinBar').textContent = Math.ceil((Game.shimmerTypes.reindeer.minTime - Game.shimmerTypes.reindeer.time) / Game.fps);
+			else l('CMTimerBarRenMinBar').textContent = '';
+			l('CMTimerBarRenBar').style.width = `${Math.round(Math.min(Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.minTime, Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.time) * maxWidthTwoBar / Game.shimmerTypes.reindeer.maxTime)}px`;
+			if (CMOptions.TimerBarOverlay >= 1) l('CMTimerBarRenBar').textContent = Math.ceil(Math.min(Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.minTime, Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.time) / Game.fps);
+			else l('CMTimerBarRenBar').textContent = '';
+			l('CMTimerBarRenTime').textContent = Math.ceil((Game.shimmerTypes.reindeer.maxTime - Game.shimmerTypes.reindeer.time) / Game.fps);
+			numberOfTimers++;
+		} else {
+			l('CMTimerBarRen').style.display = 'none';
+		}
+
+		// On every frame all buff-timers are deleted and re-created
+		const BuffTimerBars = {};
+		for (const i of Object.keys(Game.buffs)) {
+			if (Game.buffs[i]) {
+				const timer = CreateTimer(Game.buffs[i].name, Game.buffs[i].name, [{ id: `${Game.buffs[i].name}Bar` }]);
+				timer.style.display = '';
+				let classColor = '';
+				// 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;
+				timer.lastChild.children[1].style.color = 'black';
+				if (CMOptions.TimerBarOverlay === 2) timer.lastChild.children[1].textContent = `${Math.round(100 * (Game.buffs[i].time / Game.buffs[i].maxTime))}%`;
+				else timer.lastChild.children[1].textContent = '';
+				timer.lastChild.children[1].style.width = `${Math.round(Game.buffs[i].time * (maxWidthOneBar - Math.ceil(Game.buffs[i].time / Game.fps).toString().length * 8) / Game.buffs[i].maxTime)}px`;
+				timer.lastChild.children[2].textContent = Math.ceil(Game.buffs[i].time / Game.fps);
+				numberOfTimers++;
+				BuffTimerBars[Game.buffs[i].name] = timer;
+			}
+		}
+		for (const i of Object.keys(BuffTimerBars)) {
+			l('CMTimerBar').appendChild(BuffTimerBars[i]);
+		}
+
+		if (numberOfTimers !== 0) {
+			l('CMTimerBar').style.height = `${numberOfTimers * 12 + 2}px`;
+		}
+		if (LastNumberOfTimers !== numberOfTimers) {
+			LastNumberOfTimers = numberOfTimers;
+			UpdateBotTimerBarPosition();
+		}
+	}
+}

src/Disp/Initialization/CreateWrinklerButton.js

@@ -0,0 +1,20 @@
+import { CacheWrinklersFattest } from '../../Cache/VariablesAndData';
+import PopAllNormalWrinklers from '../HelperFunctions/PopWrinklers';
+
+/**
+ * This function creates two objects at the bottom of the left column that allowing popping of wrinklers
+ */
+export default function CreateWrinklerButtons() {
+	const popAllA = document.createElement('a');
+	popAllA.id = 'PopAllNormalWrinklerButton';
+	popAllA.textContent = 'Pop All Normal';
+	popAllA.className = 'option';
+	popAllA.onclick = function () { PopAllNormalWrinklers(); };
+	l('sectionLeftExtra').children[0].append(popAllA);
+	const popFattestA = document.createElement('a');
+	popFattestA.id = 'PopFattestWrinklerButton';
+	popFattestA.textContent = 'Pop Single Fattest';
+	popFattestA.className = 'option';
+	popFattestA.onclick = function () { if (CacheWrinklersFattest[1] !== null) Game.wrinklers[CacheWrinklersFattest[1]].hp = 0; };
+	l('sectionLeftExtra').children[0].append(popFattestA);
+}

src/Disp/Initialization/CssArea.js

@@ -0,0 +1,13 @@
+import { DispCSS } from '../VariablesAndData';
+
+/**
+ * This function creates a CSS style that stores certain standard CSS classes used by CookieMonster
+
+ */
+export default function CreateCssArea() {
+	DispCSS = document.createElement('style');
+	DispCSS.type = 'text/css';
+	DispCSS.id = 'CMCSS';
+
+	document.head.appendChild(DispCSS);
+}

src/Disp/Initialization/UpdateBuildingUpgradeStyle.js

@@ -0,0 +1,10 @@
+/**
+ * This function updates the style of the building and upgrade sections to make these sortable
+ */
+export default function UpdateBuildingUpgradeStyle() {
+	l('products').style.display = 'grid';
+	l('storeBulk').style.gridRow = '1/1';
+
+	l('upgrades').style.display = 'flex';
+	l('upgrades').style['flex-wrap'] = 'wrap';
+}

src/Disp/Initialization/WhiteScreen.js

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

src/Disp/MenuSections/AddMenus.js

@@ -0,0 +1,25 @@
+import { CMOptions } from '../../Config/VariablesAndData';
+import AddMenuStats from './AddStatsPage';
+import AddMenuInfo from './InfoPage';
+import AddMenuPref from './SettingsPage';
+
+/**
+ * This function adds the calll the functions to add extra info to the stats and options pages
+ */
+export default function AddMenu() {
+	const title = document.createElement('div');
+	title.className = 'title';
+
+	if (Game.onMenu === 'prefs') {
+		title.textContent = 'Cookie Monster Settings';
+		AddMenuPref(title);
+	} else if (Game.onMenu === 'stats') {
+		if (CMOptions.Stats) {
+			title.textContent = 'Cookie Monster Statistics';
+			AddMenuStats(title);
+		}
+	} else if (Game.onMenu === 'log') {
+		title.textContent = 'Cookie Monster '; // To create space between name and button
+		AddMenuInfo(title);
+	}
+}

src/Disp/MenuSections/AddStatsPage.js

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

src/Disp/MenuSections/CreateDOMElements.js

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

src/Disp/MenuSections/CreateMissingUpgrades.js

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

src/Disp/MenuSections/CreateStatsSections.js

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

src/Disp/MenuSections/InfoPage.js

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

src/Disp/MenuSections/Refreshmenu.js

@@ -0,0 +1,9 @@
+import { CMOptions } from '../../Config/VariablesAndData';
+
+/**
+ * This function refreshes the stats page, CM.Options.UpStats determines the rate at which that happens
+ * It is called by CM.Disp.Draw()
+ */
+export default function RefreshMenu() {
+	if (CMOptions.UpStats && Game.onMenu === 'stats' && (Game.drawT - 1) % (Game.fps * 5) !== 0 && (Game.drawT - 1) % Game.fps === 0) Game.UpdateMenu();
+}

src/Disp/MenuSections/SettingsPage.js

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