Use framework for Options menu

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/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/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/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) => {