Created favourite settings functionality #727

src/Config/Toggles/ToggleFavourites.js

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

src/Data/Sectionheaders.js

@@ -2,6 +2,7 @@
 
 /** Display titles of the headers of the Cookie Monster settings section */
 export const ConfigGroups = {
+  Favourite: 'Favourite Settings',
   Calculation: 'Calculation',
   Notation: 'Notation',
   Colours: 'Colours and colour coding',

src/Data/SettingsData.js

@@ -815,10 +815,24 @@ const Config = {
   BulkBuyBlock: new SettingStandard(
     'bool',
     'Miscellaneous',
-    ['Block Bulk Buying OFF', 'Block Bulk Buying ON'],
+    ['Block bulk buying OFF', 'Block bulk buying ON'],
     "Block clicking bulk buying when you can't buy all. This prevents buying 7 of a building when you are in buy-10 or buy-100 mode.",
     true,
   ),
+  FavouriteSettings: new SettingStandard(
+    'bool',
+    'Miscellaneous',
+    [
+      'Favourite settings section OFF',
+      'Favourite settings section ON',
+      'Favourite settings section ON (Locked)',
+    ],
+    "Show stars before each setting which allows selecting it for a 'favourites' section at the top of the Cookie Monster settings. Setting this to Locked removes the stars but shows the 'favourites' section",
+    true,
+    function () {
+      Game.UpdateMenu();
+    },
+  ),
 };
 
 export default Config;

src/Data/SettingsDefault.js

@@ -109,7 +109,9 @@ const ConfigDefault = {
   WrinklerMaxSoundURL:
     'https://freesound.org/data/previews/152/152743_15663-lq.mp3',
   BulkBuyBlock: 0,
+  FavouriteSettings: 1,
   Header: {
+    Favourite: 1,
     Calculation: 1,
     Notation: 1,
     Colours: 1,

src/Disp/MenuSections/AddMenus.js

@@ -1,7 +1,7 @@
 import { CMOptions } from '../../Config/VariablesAndData';
 import AddMenuStats from './AddStatsPage';
 import AddMenuInfo from './InfoPage';
-import AddMenuPref from './SettingsPage';
+import AddMenuPref from './Settings/SettingsPage';
 
 /**
  * This function adds the calll the functions to add extra info to the stats and options pages

src/Disp/MenuSections/Settings/CreateHeader.js

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

src/Disp/MenuSections/Settings/CreateOption.js

@@ -1,70 +1,42 @@
-/** Functions related to the Options/Preferences page */
-
 import jscolor, * as JsColor from '@eastdesire/jscolor';
-import {
+import ToggleFavouriteSetting from '../../../Config/Toggles/ToggleFavourites';
-  LoadConfig,
+import { SaveConfig } from '../../../Config/SaveLoadReload/SaveLoadReloadSettings';
-  SaveConfig,
-} from '../../Config/SaveLoadReload/SaveLoadReloadSettings';
 import {
   ConfigPrefix,
   ToggleConfig,
   ToggleConfigVolume,
-  ToggleHeader,
+} from '../../../Config/ToggleSetting';
-} from '../../Config/ToggleSetting';
+import { CMOptions } from '../../../Config/VariablesAndData';
-import { CMOptions } from '../../Config/VariablesAndData';
+import {} from '../../../Data/Sectionheaders';
-import {
+import Config from '../../../Data/SettingsData';
-  ConfigGroups,
+import RefreshScale from '../../HelperFunctions/RefreshScale';
-  ConfigGroupsNotification,
+import UpdateColours from '../../HelperFunctions/UpdateColours';
-} from '../../Data/Sectionheaders';
+import Flash from '../../Notifications/Flash';
-import Config from '../../Data/SettingsData';
+import PlaySound from '../../Notifications/Sound';
-import ConfigDefault from '../../Data/SettingsDefault';
+import { FavouriteSettings } from '../../VariablesAndData';
-import RefreshScale from '../HelperFunctions/RefreshScale';
+import CookieMonsterPrompt from '../Prompt';
-import UpdateColours from '../HelperFunctions/UpdateColours';
-import Flash from '../Notifications/Flash';
-import PlaySound from '../Notifications/Sound';
-import CookieMonsterPrompt from './Prompt';
-
-/**
- * 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) {
+export default function CreatePrefOption(config) {
   const div = document.createElement('div');
   div.className = 'listing';
+  if (CMOptions.FavouriteSettings === 1) {
+    const FavStar = document.createElement('a');
+    if (FavouriteSettings.includes(config)) FavStar.innerText = '★';
+    else FavStar.innerText = '☆';
+    FavStar.className = 'option';
+    FavStar.onclick = function () {
+      ToggleFavouriteSetting(config);
+      SaveConfig();
+      Game.UpdateMenu();
+    };
+    div.appendChild(FavStar);
+    div.appendChild(document.createTextNode(' '));
+  }
   if (Config[config].type === 'bool') {
     const a = document.createElement('a');
     if (Config[config].toggle && CMOptions[config] === 0) {
@@ -174,14 +146,13 @@ function CreatePrefOption(config) {
     return div;
   }
   if (Config[config].type === 'colour') {
-    div.className = '';
+    const innerSpan = document.createElement('span');
-    const innerDiv = document.createElement('div');
+    innerSpan.className = 'option';
-    innerDiv.className = 'listing';
     const input = document.createElement('input');
     input.id = config;
     input.style.width = '65px';
     input.setAttribute('value', CMOptions[config]);
-    innerDiv.appendChild(input);
+    innerSpan.appendChild(input);
     const change = function () {
       CMOptions[this.targetElement.id] = this.toHEXString();
       UpdateColours();
@@ -192,7 +163,7 @@ function CreatePrefOption(config) {
     new JsColor(input, { hash: true, position: 'right', onInput: change });
     const label = document.createElement('label');
     label.textContent = Config[config].desc;
-    innerDiv.appendChild(label);
+    innerSpan.appendChild(label);
     if (config.includes('Flash')) {
       const a = document.createElement('a');
       a.className = 'option';
@@ -200,9 +171,9 @@ function CreatePrefOption(config) {
         Flash(3, config.replace('Colour', ''), true);
       };
       a.textContent = 'Test flash';
-      innerDiv.appendChild(a);
+      innerSpan.appendChild(a);
     }
-    div.appendChild(innerDiv);
+    div.appendChild(innerSpan);
     jscolor.init();
     return div;
   }
@@ -233,62 +204,3 @@ function CreatePrefOption(config) {
   }
   return div;
 }
-
-/**
- * This function adds the options/settings of CookieMonster to the options page
- * It is called by CM.Disp.AddMenu
- * @param {object} title	On object that includes the title of the menu
- */
-export default function AddMenuPref(title) {
-  const frag = document.createDocumentFragment();
-  frag.appendChild(title);
-
-  Object.keys(ConfigGroups).forEach((group) => {
-    const groupObject = CreatePrefHeader(group, ConfigGroups[group]); // (group, display-name of group)
-    frag.appendChild(groupObject);
-    if (CMOptions.Header[group]) {
-      // 0 is show, 1 is collapsed
-      // Make sub-sections of Notification section
-      if (group === 'Notification') {
-        Object.keys(ConfigGroupsNotification).forEach((subGroup) => {
-          const subGroupObject = CreatePrefHeader(
-            subGroup,
-            ConfigGroupsNotification[subGroup],
-          ); // (group, display-name of group)
-          subGroupObject.style.fontSize = '15px';
-          subGroupObject.style.opacity = '0.5';
-          frag.appendChild(subGroupObject);
-          if (CMOptions.Header[subGroup]) {
-            Object.keys(Config).forEach((option) => {
-              if (Config[option].group === subGroup)
-                frag.appendChild(CreatePrefOption(option));
-            });
-          }
-        });
-      } else {
-        Object.keys(Config).forEach((option) => {
-          if (Config[option].group === group)
-            frag.appendChild(CreatePrefOption(option));
-        });
-      }
-    }
-  });
-
-  const resDef = document.createElement('div');
-  resDef.className = 'listing';
-  const resDefBut = document.createElement('a');
-  resDefBut.className = 'option';
-  resDefBut.onclick = function () {
-    LoadConfig(ConfigDefault);
-  };
-  resDefBut.textContent = 'Restore Default';
-  resDef.appendChild(resDefBut);
-  frag.appendChild(resDef);
-
-  l('menu').childNodes[2].insertBefore(
-    frag,
-    l('menu').childNodes[2].childNodes[
-      l('menu').childNodes[2].childNodes.length - 1
-    ],
-  );
-}

src/Disp/MenuSections/Settings/SettingsPage.js

@@ -0,0 +1,79 @@
+import { LoadConfig } from '../../../Config/SaveLoadReload/SaveLoadReloadSettings';
+import { CMOptions } from '../../../Config/VariablesAndData';
+import {
+  ConfigGroups,
+  ConfigGroupsNotification,
+} from '../../../Data/Sectionheaders';
+import Config from '../../../Data/SettingsData';
+import ConfigDefault from '../../../Data/SettingsDefault';
+import { FavouriteSettings } from '../../VariablesAndData';
+import CreatePrefHeader from './CreateHeader';
+import CreatePrefOption from './CreateOption';
+
+/**
+ * This function adds the options/settings of CookieMonster to the options page
+ * It is called by CM.Disp.AddMenu
+ * @param {object} title	On object that includes the title of the menu
+ */
+export default function AddMenuPref(title) {
+  const frag = document.createDocumentFragment();
+  frag.appendChild(title);
+
+  Object.keys(ConfigGroups).forEach((group) => {
+    if (group === 'Favourite') {
+      if (FavouriteSettings.length !== 0 && CMOptions.FavouriteSettings > 0) {
+        frag.appendChild(CreatePrefHeader(group, ConfigGroups[group])); // (group, display-name of group)
+        if (CMOptions.Header[group])
+          for (let index = 0; index < FavouriteSettings.length; index++) {
+            frag.appendChild(CreatePrefOption(FavouriteSettings[index]));
+          }
+      }
+    } else {
+      frag.appendChild(CreatePrefHeader(group, ConfigGroups[group])); // (group, display-name of group)
+      if (CMOptions.Header[group]) {
+        // 0 is show, 1 is collapsed
+        // Make sub-sections of Notification section
+        if (group === 'Notification') {
+          Object.keys(ConfigGroupsNotification).forEach((subGroup) => {
+            const subGroupObject = CreatePrefHeader(
+              subGroup,
+              ConfigGroupsNotification[subGroup],
+            ); // (group, display-name of group)
+            subGroupObject.style.fontSize = '15px';
+            subGroupObject.style.opacity = '0.5';
+            frag.appendChild(subGroupObject);
+            if (CMOptions.Header[subGroup]) {
+              Object.keys(Config).forEach((option) => {
+                if (Config[option].group === subGroup)
+                  frag.appendChild(CreatePrefOption(option));
+              });
+            }
+          });
+        } else {
+          Object.keys(Config).forEach((option) => {
+            if (Config[option].group === group)
+              frag.appendChild(CreatePrefOption(option));
+          });
+        }
+      }
+    }
+  });
+
+  const resDef = document.createElement('div');
+  resDef.className = 'listing';
+  const resDefBut = document.createElement('a');
+  resDefBut.className = 'option';
+  resDefBut.onclick = function () {
+    LoadConfig(ConfigDefault);
+  };
+  resDefBut.textContent = 'Restore Default';
+  resDef.appendChild(resDefBut);
+  frag.appendChild(resDef);
+
+  l('menu').childNodes[2].insertBefore(
+    frag,
+    l('menu').childNodes[2].childNodes[
+      l('menu').childNodes[2].childNodes.length - 1
+    ],
+  );
+}

src/Disp/VariablesAndData.js

@@ -143,3 +143,8 @@ export let TooltipBonusMouse;
 
 export let LastAscendState;
 export let LastNumberOfTimers;
+
+/**
+ * This stores the names of settings shown in the favourites section
+ */
+export let FavouriteSettings = [];

src/InitSaveLoad/load.js

@@ -1,5 +1,7 @@
+/* eslint-disable no-unused-vars */
 import { LoadConfig } from '../Config/SaveLoadReload/SaveLoadReloadSettings';
 import { VersionMajor, VersionMinor } from '../Data/Moddata';
+import { FavouriteSettings } from '../Disp/VariablesAndData';
 import InitData from '../Sim/InitializeData/InitData';
 
 /**
@@ -9,6 +11,9 @@ import InitData from '../Sim/InitializeData/InitData';
 export default function load(str) {
   const save = JSON.parse(str);
   InitData();
+  // The if-statement is a failsafe for old saves
+  if (typeof save.favouriteSettings !== 'undefined')
+    FavouriteSettings = save.favouriteSettings;
   LoadConfig(save.settings);
   if (save.version !== `${VersionMajor}.${VersionMinor}`) {
     if (Game.prefs.popups)

src/InitSaveLoad/save.js

@@ -1,5 +1,6 @@
 import { CMOptions } from '../Config/VariablesAndData';
 import { VersionMajor, VersionMinor } from '../Data/Moddata';
+import { FavouriteSettings } from '../Disp/VariablesAndData';
 
 /**
  * This creates a save function to the CM object. Per Game code/comments:
@@ -8,6 +9,7 @@ import { VersionMajor, VersionMinor } from '../Data/Moddata';
  */
 export default function save() {
   return JSON.stringify({
+    favouriteSettings: FavouriteSettings,
     settings: CMOptions,
     version: `${VersionMajor}.${VersionMinor}`,
   });