Created favourite settings functionality #727

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

@@ -0,0 +1,206 @@
+import jscolor, * as JsColor from '@eastdesire/jscolor';
+import ToggleFavouriteSetting from '../../../Config/Toggles/ToggleFavourites';
+import { SaveConfig } from '../../../Config/SaveLoadReload/SaveLoadReloadSettings';
+import {
+  ConfigPrefix,
+  ToggleConfig,
+  ToggleConfigVolume,
+} from '../../../Config/ToggleSetting';
+import { CMOptions } from '../../../Config/VariablesAndData';
+import {} from '../../../Data/Sectionheaders';
+import Config from '../../../Data/SettingsData';
+import RefreshScale from '../../HelperFunctions/RefreshScale';
+import UpdateColours from '../../HelperFunctions/UpdateColours';
+import Flash from '../../Notifications/Flash';
+import PlaySound from '../../Notifications/Sound';
+import { FavouriteSettings } from '../../VariablesAndData';
+import CookieMonsterPrompt from '../Prompt';
+
+/**
+ * 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 (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) {
+      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);
+    const a = document.createElement('a');
+    a.className = 'option';
+    a.onclick = function () {
+      PlaySound(
+        CMOptions[config.replace('Volume', 'SoundURL')],
+        config.replace('Volume', 'Sound'),
+        config,
+        true,
+      );
+    };
+    a.textContent = 'Test sound';
+    div.appendChild(a);
+    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 () {
+      CookieMonsterPrompt(inputPrompt.outerHTML, [
+        [
+          'Save',
+          function () {
+            CMOptions[config] = l(`${ConfigPrefix}${config}Prompt`).value;
+            SaveConfig();
+            Game.ClosePrompt();
+            Game.UpdateMenu();
+          },
+        ],
+        [
+          'Cancel',
+          function () {
+            Game.ClosePrompt();
+          },
+        ],
+      ]);
+    };
+    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 === 'colour') {
+    const innerSpan = document.createElement('span');
+    innerSpan.className = 'option';
+    const input = document.createElement('input');
+    input.id = config;
+    input.style.width = '65px';
+    input.setAttribute('value', CMOptions[config]);
+    innerSpan.appendChild(input);
+    const change = function () {
+      CMOptions[this.targetElement.id] = this.toHEXString();
+      UpdateColours();
+      SaveConfig();
+      Game.UpdateMenu();
+    };
+    // eslint-disable-next-line no-new
+    new JsColor(input, { hash: true, position: 'right', onInput: change });
+    const label = document.createElement('label');
+    label.textContent = Config[config].desc;
+    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 (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;
+}

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