[Automated] Merge dev into gh-pages

.eslintrc.json

@@ -8,8 +8,7 @@
     "l": "readonly",
     "b64_to_utf8": "readonly",
     "utf8_to_b64": "readonly",
-    "BeautifyAll": "readonly",
+    "BeautifyAll": "readonly"
-    "PlaySound": "readonly"
   },
   "extends": ["airbnb-base", "prettier"],
   "parserOptions": {

package-lock.json

@@ -9,7 +9,7 @@
       "version": "2.031.7",
       "license": "MIT",
       "dependencies": {
-        "@cookiemonsterteam/cookiemonsterframework": "^0.1.0",
+        "@cookiemonsterteam/cookiemonsterframework": "^0.2.0",
         "@eastdesire/jscolor": "^2.4.5"
       },
       "devDependencies": {
@@ -137,10 +137,13 @@
       }
     },
     "node_modules/@cookiemonsterteam/cookiemonsterframework": {
-      "version": "0.1.0",
+      "version": "0.2.0",
-      "resolved": "https://npm.pkg.github.com/download/@cookiemonsterteam/cookiemonsterframework/0.1.0/acd8167522ce35d3b2e6bab2ed5d9c35f2b4e397af93fe4904a86b13117d550e",
+      "resolved": "https://npm.pkg.github.com/download/@cookiemonsterteam/cookiemonsterframework/0.2.0/0e38bd032c0746e1bb52446ac51217a2dc8460eda6fddba4b804450ead7306e8",
-      "integrity": "sha512-LSZu5PB5v1ot1/lMNHsq5bXYjUlg06tsNDBwkc6/LeWFOmtoz/1gzwZjrFLFqBkmAq0Frx78V0JCo75+GWUAxQ==",
+      "integrity": "sha512-xezyE14jwE1jIe+Rkmk7TD+gJECTypfW7OMs1hVXvQ4CrjkkmsTQj44eA2mAyTnP2tTPBj6RYVq7cty/KlRTDw==",
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "@eastdesire/jscolor": "^2.4.5"
+      }
     },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.3",
@@ -4758,9 +4761,12 @@
       }
     },
     "@cookiemonsterteam/cookiemonsterframework": {
-      "version": "0.1.0",
+      "version": "0.2.0",
-      "resolved": "https://npm.pkg.github.com/download/@cookiemonsterteam/cookiemonsterframework/0.1.0/acd8167522ce35d3b2e6bab2ed5d9c35f2b4e397af93fe4904a86b13117d550e",
+      "resolved": "https://npm.pkg.github.com/download/@cookiemonsterteam/cookiemonsterframework/0.2.0/0e38bd032c0746e1bb52446ac51217a2dc8460eda6fddba4b804450ead7306e8",
-      "integrity": "sha512-LSZu5PB5v1ot1/lMNHsq5bXYjUlg06tsNDBwkc6/LeWFOmtoz/1gzwZjrFLFqBkmAq0Frx78V0JCo75+GWUAxQ=="
+      "integrity": "sha512-xezyE14jwE1jIe+Rkmk7TD+gJECTypfW7OMs1hVXvQ4CrjkkmsTQj44eA2mAyTnP2tTPBj6RYVq7cty/KlRTDw==",
+      "requires": {
+        "@eastdesire/jscolor": "^2.4.5"
+      }
     },
     "@discoveryjs/json-ext": {
       "version": "0.5.3",

package.json

@@ -71,6 +71,6 @@
   },
   "dependencies": {
     "@eastdesire/jscolor": "^2.4.5",
-    "@cookiemonsterteam/cookiemonsterframework": "^0.1.0"
+    "@cookiemonsterteam/cookiemonsterframework": "^0.2.0"
   }
 }

src/Config/ToggleSetting.js

@@ -1,49 +1,10 @@
-import saveFramework from '@cookiemonsterteam/cookiemonsterframework/src/saveDataFunctions/saveFramework';
+import { saveAndLoadingFunctions } from '@cookiemonsterteam/cookiemonsterframework/src/index';
-import settings from '../Data/settings';
 
 /** 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) {
-  Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings[config] += 1;
-
-  if (
-    Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings[config] ===
-    settings[config].label.length
-  ) {
-    Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings[config] = 0;
-    if (settings[config].toggle) l(ConfigPrefix + config).className = 'option off';
-  } else l(ConfigPrefix + config).className = 'option';
-
-  if (typeof settings[config].func !== 'undefined') {
-    settings[config].func();
-  }
-
-  saveFramework();
-}
-
-/**
- * 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}%`;
-    Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings[config] = Math.round(
-      l(`slider${config}`).value,
-    );
-  }
-  saveFramework();
-}
-
 /**
  * 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
@@ -53,5 +14,5 @@ export function ToggleHeader(config) {
   Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.headers[config] += 1;
   if (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.headers[config] > 1)
     Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.headers[config] = 0;
-  saveFramework();
+  saveAndLoadingFunctions.saveFramework();
 }

src/Config/Toggles/ToggleFavourites.js

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

src/Config/VariablesAndData.js

@@ -1,2 +0,0 @@
-const ConfigPrefix = 'CMConfig';
-export default ConfigPrefix;

src/Disp/MenuSections/AddMenus.js

@@ -1,5 +1,4 @@
 import AddMenuStats from './Statistics/AddStatsPage';
-import AddMenuPref from './Settings/SettingsPage';
 
 /**
  * This function adds the calll the functions to add extra info to the stats and options pages
@@ -8,10 +7,7 @@ export default function AddMenu() {
   const title = document.createElement('div');
   title.className = 'title';
 
-  if (Game.onMenu === 'prefs') {
+  if (Game.onMenu === 'stats') {
-    title.textContent = 'Cookie Monster Settings';
-    AddMenuPref(title);
-  } else if (Game.onMenu === 'stats') {
     if (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.Stats) {
       title.textContent = 'Cookie Monster Statistics';
       AddMenuStats(title);

src/Disp/MenuSections/Prompt.js

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

src/Disp/MenuSections/Settings/CreateHeader.js

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

src/Disp/MenuSections/Settings/CreateOption.js

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

src/Disp/MenuSections/Settings/SettingsPage.js

@@ -1,58 +0,0 @@
-import { ConfigGroups, ConfigGroupsNotification } from '../../../Data/Sectionheaders.ts';
-import settings from '../../../Data/settings';
-import { FavouriteSettings } from '../../VariablesAndData';
-import CreatePrefHeader from './CreateHeader';
-import CreatePrefOption from './CreateOption';
-
-/**
- * This function adds the options/settings of CookieMonster to the options page
- * It is called by CM.Disp.AddMenu
- * @param {object} title	On object that includes the title of the menu
- */
-export default function AddMenuPref(title) {
-  const frag = document.createDocumentFragment();
-  frag.appendChild(title);
-
-  Object.keys(ConfigGroups).forEach((group) => {
-    if (group === 'Favourite') {
-      if (
-        FavouriteSettings.length !== 0 &&
-        Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.FavouriteSettings > 0
-      ) {
-        frag.appendChild(CreatePrefHeader(group, ConfigGroups[group])); // (group, display-name of group)
-        if (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.headers[group])
-          for (let index = 0; index < FavouriteSettings.length; index++) {
-            frag.appendChild(CreatePrefOption(FavouriteSettings[index]));
-          }
-      }
-    } else {
-      frag.appendChild(CreatePrefHeader(group, ConfigGroups[group])); // (group, display-name of group)
-      if (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.headers[group]) {
-        // 0 is show, 1 is collapsed
-        // Make sub-sections of Notification section
-        if (group === 'Notification') {
-          Object.keys(ConfigGroupsNotification).forEach((subGroup) => {
-            const subGroupObject = CreatePrefHeader(subGroup, ConfigGroupsNotification[subGroup]); // (group, display-name of group)
-            subGroupObject.style.fontSize = '15px';
-            subGroupObject.style.opacity = '0.5';
-            frag.appendChild(subGroupObject);
-            if (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.headers[subGroup]) {
-              Object.keys(settings).forEach((option) => {
-                if (settings[option].group === subGroup) frag.appendChild(CreatePrefOption(option));
-              });
-            }
-          });
-        } else {
-          Object.keys(settings).forEach((option) => {
-            if (settings[option].group === group) frag.appendChild(CreatePrefOption(option));
-          });
-        }
-      }
-    }
-  });
-
-  l('menu').childNodes[2].insertBefore(
-    frag,
-    l('menu').childNodes[2].childNodes[l('menu').childNodes[2].childNodes.length - 1],
-  );
-}

src/Disp/MenuSections/createMenuInfo.js

@@ -13,8 +13,8 @@ export default function createMenuInfo() {
   );
 
   if (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.headers.infoMenu) {
-    menuDiv.appendChild(menuFunctions.createInfoListing(ModDescription));
+    menuDiv.appendChild(menuFunctions.listings.createInfoListing(ModDescription));
-    menuDiv.appendChild(menuFunctions.createInfoListing(LatestReleaseNotes));
+    menuDiv.appendChild(menuFunctions.listings.createInfoListing(LatestReleaseNotes));
   }
 
   return menuDiv;

src/Disp/MenuSections/createMenuOptions.js

@@ -0,0 +1,96 @@
+import { menuFunctions as mF } from '@cookiemonsterteam/cookiemonsterframework';
+import { ConfigGroups, ConfigGroupsNotification } from '../../Data/Sectionheaders.ts';
+import settings from '../../Data/settings';
+import UpdateColours from '../HelperFunctions/UpdateColours';
+import RefreshScale from '../HelperFunctions/RefreshScale';
+
+/**
+ * Creates the <div> to be added to the Options section
+ * @returns {object} menuDiv	Object of the <div> of Cookie Monster in options tab
+ */
+export default function createMenuOptions() {
+  const menuDiv = mF.createModMenuSection('cookieMonsterMod', 'Cookie Monster', 'optionsMenu');
+
+  if (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.headers.optionsMenu) {
+    Object.keys(ConfigGroups).forEach((group) => {
+      if (group === 'Favourite') {
+        if (
+          Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.favouriteSettings.length !==
+            0 &&
+          Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.FavouriteSettings > 0
+        ) {
+          menuDiv.appendChild(
+            mF.listings.createOptionsSubHeader('cookieMonsterMod', group, ConfigGroups[group]),
+          );
+          if (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.headers[group])
+            for (
+              let index = 0;
+              index <
+              Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.favouriteSettings.length;
+              index++
+            ) {
+              menuDiv.appendChild(
+                mF.listings.createOptionsListing(
+                  'cookieMonsterMod',
+                  Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.favouriteSettings[
+                    index
+                  ],
+                  settings,
+                  UpdateColours,
+                  RefreshScale,
+                ),
+              );
+            }
+        }
+      } else {
+        menuDiv.appendChild(
+          mF.listings.createOptionsSubHeader('cookieMonsterMod', group, ConfigGroups[group]),
+        );
+        if (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.headers[group]) {
+          // 0 is show, 1 is collapsed
+          // Make sub-sections of Notification section
+          if (group === 'Notification') {
+            Object.keys(ConfigGroupsNotification).forEach((subGroup) => {
+              const subGroupObject = mF.listings.createOptionsSubHeader(
+                'cookieMonsterMod',
+                subGroup,
+                ConfigGroupsNotification[subGroup],
+              );
+              subGroupObject.style.fontSize = '15px';
+              subGroupObject.style.opacity = '0.5';
+              menuDiv.appendChild(subGroupObject);
+              if (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.headers[subGroup]) {
+                Object.keys(settings).forEach((option) => {
+                  if (settings[option].group === subGroup)
+                    menuDiv.appendChild(
+                      mF.listings.createOptionsListing(
+                        'cookieMonsterMod',
+                        option,
+                        settings,
+                        UpdateColours,
+                        RefreshScale,
+                      ),
+                    );
+                });
+              }
+            });
+          } else {
+            Object.keys(settings).forEach((option) => {
+              if (settings[option].group === group)
+                menuDiv.appendChild(
+                  mF.listings.createOptionsListing(
+                    'cookieMonsterMod',
+                    option,
+                    settings,
+                    UpdateColours,
+                    RefreshScale,
+                  ),
+                );
+            });
+          }
+        }
+      }
+    });
+  }
+  return menuDiv;
+}

src/Disp/Notifications/Flash.js

@@ -1,39 +0,0 @@
-import { isInitializing } from '../../InitSaveLoad/Variables';
-
-/**
- * This function creates a flash depending on configs. It is called by all functions
- * that check game-events and which have settings for Flashes (e.g., Golden Cookies appearing, Magic meter being full)
- * @param	{number}	mode	Sets the intensity of the flash, used to recursively dim flash
- * 								All calls of function have use mode === 3
- * @param	{string}	config	The setting in CM.Options that is checked before creating the flash
- * @param	{bool}    forced		Whether the sound should play regardless of settings, used to test the sound
- */
-export default function Flash(mode, config, forced) {
-  // The arguments check makes the sound not play upon initialization of the mod
-  if (
-    ((Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings[config] === 1 ||
-      forced) &&
-      mode === 3 &&
-      isInitializing === false) ||
-    mode === 1
-  ) {
-    l('CMFlashScreen').style.backgroundColor =
-      Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings[`Colour${config}`];
-    l('CMFlashScreen').style.opacity = '0.5';
-    if (mode === 3) {
-      l('CMFlashScreen').style.display = 'inline';
-      setTimeout(() => {
-        Flash(2, config, true);
-      }, 1000 / Game.fps);
-    } else {
-      setTimeout(() => {
-        Flash(0, config, true);
-      }, 1000 / Game.fps);
-    }
-  } else if (mode === 2) {
-    l('CMFlashScreen').style.opacity = '1';
-    setTimeout(() => {
-      Flash(1, config, true);
-    }, 1000 / Game.fps);
-  } else if (mode === 0) l('CMFlashScreen').style.display = 'none';
-}

src/Disp/Notifications/Notification.js

@@ -1,21 +0,0 @@
-import { isInitializing } from '../../InitSaveLoad/Variables';
-
-/**
- * This function creates a notifcation depending on configs. It is called by all functions
- * that check game-events and which have settings for notifications (e.g., Golden Cookies appearing, Magic meter being full)
- * @param	{string}	notifyConfig	The setting in CM.Options that is checked before creating the notification
- * @param	{string}	title			The title of the to-be created notifications
- * @param	{string}	message			The text of the to-be created notifications
- */
-export default function CreateNotification(notifyConfig, title, message) {
-  // The arguments check makes the sound not play upon initialization of the mod
-  if (
-    Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings[notifyConfig] === 1 &&
-    document.visibilityState === 'hidden' &&
-    isInitializing === false
-  ) {
-    const CookieIcon = 'https://orteil.dashnet.org/cookieclicker/favicon.ico';
-    // eslint-disable-next-line no-new
-    new Notification(title, { body: message, badge: CookieIcon });
-  }
-}

src/Disp/Notifications/Sound.js

@@ -1,29 +0,0 @@
-import { isInitializing } from '../../InitSaveLoad/Variables';
-
-/**
- * This function plays a sound depending on configs. It is called by all functions
- * that check game-events and which have settings for sound (e.g., Golden Cookies appearing, Magic meter being full)
- * @param	{variable}	url			A variable that gives the url for the sound (e.g., CM.Options.GCSoundURL)
- * @param	{string}	sndConfig	The setting in CM.Options that is checked before creating the sound
- * @param	{string}	volConfig	The setting in CM.Options that is checked to determine volume
- * @param	{bool}    forced		Whether the sound should play regardless of settings, used to test the sound
- */
-export default function PlaySound(url, sndConfig, volConfig, forced) {
-  // The arguments check makes the sound not play upon initialization of the mod
-  if (
-    (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings[sndConfig] === 1 ||
-      forced) &&
-    isInitializing === false
-  ) {
-    // eslint-disable-next-line new-cap
-    const sound = new Audio(url);
-    if (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.GeneralSound)
-      sound.volume =
-        (Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings[volConfig] / 100) *
-        (Game.volume / 100);
-    else
-      sound.volume =
-        Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings[volConfig] / 100;
-    sound.play();
-  }
-}

src/InitSaveLoad/Variables.js

@@ -1,3 +0,0 @@
-/** Variable that shows if Cookie Moonster is initzializing */
-export let isInitializing = false; // eslint-disable-line prefer-const
-export let test;

src/InitSaveLoad/init.js

@@ -4,7 +4,6 @@ import CMDrawHook from '../Disp/DrawHook';
 import CMClickHook from '../Main/ClickHook';
 import InitializeCookieMonster from '../Main/Initialization';
 import CMLoopHook from '../Main/LoopHook';
-import { isInitializing } from './Variables'; // eslint-disable-line no-unused-vars
 
 /**
  * This creates a init function for the CM object. Per Game code/comments:
@@ -13,11 +12,11 @@ import { isInitializing } from './Variables'; // eslint-disable-line no-unused-v
  * It starts the further initialization of CookieMonster and registers hooks
  */
 export default function init() {
-  isInitializing = true;
   let proceed = true;
 
   // Load Cookie Monster Mod Framework and register mod
   initFunctions.initModFramework();
+  window.cookieMonsterFrameworkData.isInitializing = true;
   initFunctions.registerMod('cookieMonsterMod');
 
   if (Game.version !== Number(VersionMajor)) {
@@ -31,7 +30,6 @@ export default function init() {
     Game.registerHook('click', CMClickHook);
     Game.registerHook('draw', CMDrawHook);
     Game.registerHook('logic', CMLoopHook);
-
-    isInitializing = false;
   }
+  window.cookieMonsterFrameworkData.isInitializing = false;
 }

src/InitSaveLoad/load.js

@@ -1,4 +1,4 @@
-import loadMod from '@cookiemonsterteam/cookiemonsterframework/src/saveDataFunctions/loadMod';
+import { saveAndLoadingFunctions } from '@cookiemonsterteam/cookiemonsterframework/src/index';
 
 import headers from '../Data/headers';
 import { VersionMajor, VersionMinor } from '../Data/Moddata.ts';
@@ -13,7 +13,7 @@ import InitData from '../Sim/InitializeData/InitData';
  */
 export default function load(str) {
   InitData();
-  loadMod('cookieMonsterMod', str, settings, headers, CMLoopHook);
+  saveAndLoadingFunctions.loadMod('cookieMonsterMod', str, settings, headers, CMLoopHook);
   UpdateColours();
   if (
     Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.version !==

src/Main/CheckStates/Garden.js

@@ -1,5 +1,4 @@
-import Flash from '../../Disp/Notifications/Flash';
+import { notificationsFunctions as nF } from '@cookiemonsterteam/cookiemonsterframework/src/index';
-import PlaySound from '../../Disp/Notifications/Sound';
 import { LastGardenNextStep } from '../VariablesAndData';
 
 /**
@@ -11,8 +10,9 @@ export default function CheckGardenTick() {
     LastGardenNextStep !== Game.Objects.Farm.minigame.nextStep
   ) {
     if (LastGardenNextStep !== 0 && LastGardenNextStep < Date.now()) {
-      Flash(3, 'GardFlash', false);
+      nF.createFlash('cookieMonsterMod', 3, 'GardFlash', false);
-      PlaySound(
+      nF.playCMSound(
+        'cookieMonsterMod',
         Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.GardSoundURL,
         'GardSound',
         'GardVolume',

src/Main/CheckStates/GoldenCookie.js

@@ -1,8 +1,6 @@
+import { notificationsFunctions as nF } from '@cookiemonsterteam/cookiemonsterframework/src/index';
 import { CacheSpawnedGoldenShimmer, CacheGoldenShimmersByID } from '../../Cache/VariablesAndData'; // eslint-disable-line no-unused-vars
 import CreateGCTimer from '../../Disp/GoldenCookieTimers/GoldenCookieTimers';
-import Flash from '../../Disp/Notifications/Flash';
-import CreateNotification from '../../Disp/Notifications/Notification';
-import PlaySound from '../../Disp/Notifications/Sound';
 import { UpdateFavicon } from '../../Disp/TabTitle/FavIcon';
 import { GCTimers } from '../../Disp/VariablesAndData';
 import {
@@ -44,14 +42,16 @@ export default function CheckGoldenCookie() {
     LastGoldenCookieState = Game.shimmerTypes.golden.n;
     if (LastGoldenCookieState) {
       if (LastSpawnedGoldenCookieState < CurrSpawnedGoldenCookieState) {
-        Flash(3, 'GCFlash', false);
+        nF.createFlash('cookieMonsterMod', 3, 'GCFlash', false);
-        PlaySound(
+        nF.playCMSound(
+          'cookieMonsterMod',
           Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.GCSoundURL,
           'GCSound',
           'GCVolume',
           false,
         );
-        CreateNotification(
+        nF.createNotification(
+          'cookieMonsterMod',
           'GCNotification',
           'Golden Cookie Spawned',
           'A Golden Cookie has spawned. Click it now!',

src/Main/CheckStates/Grimoire.js

@@ -1,6 +1,4 @@
-import Flash from '../../Disp/Notifications/Flash';
+import { notificationsFunctions as nF } from '@cookiemonsterteam/cookiemonsterframework/src/index';
-import CreateNotification from '../../Disp/Notifications/Notification';
-import PlaySound from '../../Disp/Notifications/Sound';
 import { LastMagicBarFull } from '../VariablesAndData';
 
 /**
@@ -16,14 +14,16 @@ export default function CheckMagicMeter() {
     if (minigame.magic < minigame.magicM) LastMagicBarFull = false;
     else if (!LastMagicBarFull) {
       LastMagicBarFull = true;
-      Flash(3, 'MagicFlash', false);
+      nF.createFlash('cookieMonsterMod', 3, 'MagicFlash', false);
-      PlaySound(
+      nF.playCMSound(
+        'cookieMonsterMod',
         Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.MagicSoundURL,
         'MagicSound',
         'MagicVolume',
         false,
       );
-      CreateNotification(
+      nF.createNotification(
+        'cookieMonsterMod',
         'MagicNotification',
         'Magic Meter full',
         'Your Magic Meter is full. Cast a spell!',

src/Main/CheckStates/Season.js

@@ -1,7 +1,5 @@
+import { notificationsFunctions as nF } from '@cookiemonsterteam/cookiemonsterframework/src/index';
 import { CacheSeasonPopShimmer } from '../../Cache/VariablesAndData'; // eslint-disable-line no-unused-vars
-import Flash from '../../Disp/Notifications/Flash';
-import CreateNotification from '../../Disp/Notifications/Notification';
-import PlaySound from '../../Disp/Notifications/Sound';
 import { LastSeasonPopupState } from '../VariablesAndData';
 
 /**
@@ -16,14 +14,16 @@ export default function CheckSeasonPopup() {
         CacheSeasonPopShimmer = Game.shimmers[i];
       }
     });
-    Flash(3, 'SeaFlash', false);
+    nF.createFlash('cookieMonsterMod', 3, 'SeaFlash', false);
-    PlaySound(
+    nF.playCMSound(
+      'cookieMonsterMod',
       Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.SeaSoundURL,
       'SeaSound',
       'SeaVolume',
       false,
     );
-    CreateNotification(
+    nF.createNotification(
+      'cookieMonsterMod',
       'SeaNotification',
       'Reindeer sighted!',
       'A Reindeer has spawned. Click it now!',

src/Main/CheckStates/Ticker.js

@@ -1,6 +1,4 @@
-import Flash from '../../Disp/Notifications/Flash';
+import { notificationsFunctions as nF } from '@cookiemonsterteam/cookiemonsterframework/src/index';
-import CreateNotification from '../../Disp/Notifications/Notification';
-import PlaySound from '../../Disp/Notifications/Sound';
 import { LastTickerFortuneState } from '../VariablesAndData';
 
 /**
@@ -11,14 +9,16 @@ export default function CheckTickerFortune() {
   if (LastTickerFortuneState !== (Game.TickerEffect && Game.TickerEffect.type === 'fortune')) {
     LastTickerFortuneState = Game.TickerEffect && Game.TickerEffect.type === 'fortune';
     if (LastTickerFortuneState) {
-      Flash(3, 'FortuneFlash', false);
+      nF.createFlash('cookieMonsterMod', 3, 'FortuneFlash', false);
-      PlaySound(
+      nF.playCMSound(
+        'cookieMonsterMod',
         Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.FortuneSoundURL,
         'FortuneSound',
         'FortuneVolume',
         false,
       );
-      CreateNotification(
+      nF.createNotification(
+        'cookieMonsterMod',
         'FortuneNotification',
         'Fortune Cookie found',
         'A Fortune Cookie has appeared on the Ticker.',

src/Main/CheckStates/Wrinkler.js

@@ -1,6 +1,4 @@
-import Flash from '../../Disp/Notifications/Flash';
+import { notificationsFunctions as nF } from '@cookiemonsterteam/cookiemonsterframework/src/index';
-import CreateNotification from '../../Disp/Notifications/Notification';
-import PlaySound from '../../Disp/Notifications/Sound';
 import { LastWrinklerCount } from '../VariablesAndData';
 
 /**
@@ -19,22 +17,24 @@ export default function CheckWrinklerCount() {
         CurrentWrinklers === Game.getWrinklersMax() &&
         Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.WrinklerMaxFlash
       ) {
-        Flash(3, 'WrinklerMaxFlash', false);
+        nF.createFlash('cookieMonsterMod', 3, 'WrinklerMaxFlash', false);
       } else {
-        Flash(3, 'WrinklerFlash', false);
+        nF.createFlash('cookieMonsterMod', 3, 'WrinklerFlash', false);
       }
       if (
         CurrentWrinklers === Game.getWrinklersMax() &&
         Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.WrinklerMaxSound
       ) {
-        PlaySound(
+        nF.playCMSound(
+          'cookieMonsterMod',
           Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.WrinklerMaxSoundURL,
           'WrinklerMaxSound',
           'WrinklerMaxVolume',
           false,
         );
       } else {
-        PlaySound(
+        nF.playCMSound(
+          'cookieMonsterMod',
           Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.WrinklerSoundURL,
           'WrinklerSound',
           'WrinklerVolume',
@@ -45,13 +45,15 @@ export default function CheckWrinklerCount() {
         CurrentWrinklers === Game.getWrinklersMax() &&
         Game.mods.cookieMonsterFramework.saveData.cookieMonsterMod.settings.WrinklerMaxNotification
       ) {
-        CreateNotification(
+        nF.createNotification(
+          'cookieMonsterMod',
           'WrinklerMaxNotification',
           'Maximum Wrinklers Reached',
           'You have reached your maximum ammount of wrinklers',
         );
       } else {
-        CreateNotification(
+        nF.createNotification(
+          'cookieMonsterMod',
           'WrinklerNotification',
           'A Wrinkler appeared',
           'A new wrinkler has appeared',

src/Main/Initialization.js

@@ -8,7 +8,6 @@ import CreateSectionHideButtons from '../Disp/Initialization/CreateSectionHideBu
 import CreateWrinklerButtons from '../Disp/Initialization/CreateWrinklerButton';
 import CreateCssArea from '../Disp/Initialization/CssArea';
 import UpdateBuildingUpgradeStyle from '../Disp/Initialization/UpdateBuildingUpgradeStyle';
-import CreateFlashScreen from '../Disp/Initialization/FlashScreen';
 import { CreateFavicon } from '../Disp/TabTitle/FavIcon';
 import { CreateSimpleTooltip } from '../Disp/Tooltips/Tooltip';
 import { CMLastAscendState, TooltipText } from '../Disp/VariablesAndData'; // eslint-disable-line no-unused-vars
@@ -20,6 +19,7 @@ import { LastModCount } from './VariablesAndData'; // eslint-disable-line no-unu
 import AddWrinklerAreaDetect from './WrinklerArea/AddDetectArea';
 import CreateBuildingLockButtons from '../Disp/Buildings/CreateBuildingLockButtons';
 import createMenuInfo from '../Disp/MenuSections/createMenuInfo';
+import createMenuOptions from '../Disp/MenuSections/createMenuOptions';
 
 /**
  * Initialization loop of Cookie Monster
@@ -30,6 +30,7 @@ export default function InitializeCookieMonster() {
 
   // Register listeners in Cookie Monster Mod Framework
   Game.mods.cookieMonsterFramework.listeners.infoMenu.push(createMenuInfo);
+  Game.mods.cookieMonsterFramework.listeners.optionsMenu.push(createMenuOptions);
 
   InitData();
   CacheStatsCookies();
@@ -43,7 +44,6 @@ export default function InitializeCookieMonster() {
   CreateBotBar();
   CreateTimerBar();
   CreateUpgradeBar();
-  CreateFlashScreen();
   CreateSectionHideButtons();
   CreateFavicon();
   Object.keys(TooltipText).forEach((i) => {

test/t_Config/t_Toggles/t_ToggleFavourites.js

@@ -1,17 +0,0 @@
-import { beforeEach, describe, it } from 'mocha';
-import { assert } from 'chai';
-
-import ToggleFavouriteSetting from '../../../src/Config/Toggles/ToggleFavourites';
-import { FavouriteSettings } from '../../../src/Disp/VariablesAndData';
-
-describe('ToggleFavouriteSetting', () => {
-  beforeEach(() => {
-    global.domids = {};
-  });
-  // TODO: Can't write test for checking existing config due to Babel/Typescript problem
-  it('New config', () => {
-    FavouriteSettings.push('TestConfig');
-    ToggleFavouriteSetting('TestConfig2');
-    assert.deepEqual(FavouriteSettings, ['TestConfig', 'TestConfig2']);
-  });
-});