Complete overhaul of code structure and relevant files (#639)

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