Core: Introduce new Option class NamedRange (#2330)

Co-authored-by: Chris Wilson <chris@legendserver.info>
Co-authored-by: Zach Parks <zach@alliware.com>

WebHostLib/options.py

@@ -81,8 +81,8 @@ def create():
                     "max": option.range_end,
                 }
 
-                if issubclass(option, Options.SpecialRange):
-                    game_options[option_name]["type"] = 'special_range'
+                if issubclass(option, Options.NamedRange):
+                    game_options[option_name]["type"] = 'named_range'
                     game_options[option_name]["value_names"] = {}
                     for key, val in option.special_range_names.items():
                         game_options[option_name]["value_names"][key] = val
@@ -133,7 +133,7 @@ def create():
                     continue
 
                 option = world.options_dataclass.type_hints[option_name].from_any(option_value)
-                if isinstance(option, Options.SpecialRange) and isinstance(option_value, str):
+                if isinstance(option, Options.NamedRange) and isinstance(option_value, str):
                     assert option_value in option.special_range_names, \
                         f"Invalid preset value '{option_value}' for '{option_name}' in '{preset_name}'. " \
                         f"Expected {option.special_range_names.keys()} or {option.range_start}-{option.range_end}."

WebHostLib/static/assets/player-options.js

@@ -216,13 +216,13 @@ const buildOptionsTable = (options, romOpts = false) => {
         element.appendChild(randomButton);
         break;
 
-      case 'special_range':
+      case 'named_range':
         element = document.createElement('div');
-        element.classList.add('special-range-container');
+        element.classList.add('named-range-container');
 
         // Build the select element
-        let specialRangeSelect = document.createElement('select');
-        specialRangeSelect.setAttribute('data-key', option);
+        let namedRangeSelect = document.createElement('select');
+        namedRangeSelect.setAttribute('data-key', option);
         Object.keys(options[option].value_names).forEach((presetName) => {
           let presetOption = document.createElement('option');
           presetOption.innerText = presetName;
@@ -232,58 +232,58 @@ const buildOptionsTable = (options, romOpts = false) => {
             words[i] = words[i][0].toUpperCase() + words[i].substring(1);
           }
           presetOption.innerText = words.join(' ');
-          specialRangeSelect.appendChild(presetOption);
+          namedRangeSelect.appendChild(presetOption);
         });
         let customOption = document.createElement('option');
         customOption.innerText = 'Custom';
         customOption.value = 'custom';
         customOption.selected = true;
-        specialRangeSelect.appendChild(customOption);
+        namedRangeSelect.appendChild(customOption);
         if (Object.values(options[option].value_names).includes(Number(currentOptions[gameName][option]))) {
-          specialRangeSelect.value = Number(currentOptions[gameName][option]);
+          namedRangeSelect.value = Number(currentOptions[gameName][option]);
         }
 
         // Build range element
-        let specialRangeWrapper = document.createElement('div');
-        specialRangeWrapper.classList.add('special-range-wrapper');
-        let specialRange = document.createElement('input');
-        specialRange.setAttribute('type', 'range');
-        specialRange.setAttribute('data-key', option);
-        specialRange.setAttribute('min', options[option].min);
-        specialRange.setAttribute('max', options[option].max);
-        specialRange.value = currentOptions[gameName][option];
+        let namedRangeWrapper = document.createElement('div');
+        namedRangeWrapper.classList.add('named-range-wrapper');
+        let namedRange = document.createElement('input');
+        namedRange.setAttribute('type', 'range');
+        namedRange.setAttribute('data-key', option);
+        namedRange.setAttribute('min', options[option].min);
+        namedRange.setAttribute('max', options[option].max);
+        namedRange.value = currentOptions[gameName][option];
 
         // Build rage value element
-        let specialRangeVal = document.createElement('span');
-        specialRangeVal.classList.add('range-value');
-        specialRangeVal.setAttribute('id', `${option}-value`);
-        specialRangeVal.innerText = currentOptions[gameName][option] !== 'random' ?
+        let namedRangeVal = document.createElement('span');
+        namedRangeVal.classList.add('range-value');
+        namedRangeVal.setAttribute('id', `${option}-value`);
+        namedRangeVal.innerText = currentOptions[gameName][option] !== 'random' ?
           currentOptions[gameName][option] : options[option].defaultValue;
 
         // Configure select event listener
-        specialRangeSelect.addEventListener('change', (event) => {
+        namedRangeSelect.addEventListener('change', (event) => {
           if (event.target.value === 'custom') { return; }
 
           // Update range slider
-          specialRange.value = event.target.value;
+          namedRange.value = event.target.value;
           document.getElementById(`${option}-value`).innerText = event.target.value;
           updateGameOption(event.target);
         });
 
         // Configure range event handler
-        specialRange.addEventListener('change', (event) => {
+        namedRange.addEventListener('change', (event) => {
           // Update select element
-          specialRangeSelect.value =
+          namedRangeSelect.value =
             (Object.values(options[option].value_names).includes(parseInt(event.target.value))) ?
             parseInt(event.target.value) : 'custom';
           document.getElementById(`${option}-value`).innerText = event.target.value;
           updateGameOption(event.target);
         });
 
-        element.appendChild(specialRangeSelect);
-        specialRangeWrapper.appendChild(specialRange);
-        specialRangeWrapper.appendChild(specialRangeVal);
-        element.appendChild(specialRangeWrapper);
+        element.appendChild(namedRangeSelect);
+        namedRangeWrapper.appendChild(namedRange);
+        namedRangeWrapper.appendChild(namedRangeVal);
+        element.appendChild(namedRangeWrapper);
 
         // Randomize button
         randomButton.innerText = '🎲';
@@ -291,15 +291,15 @@ const buildOptionsTable = (options, romOpts = false) => {
         randomButton.setAttribute('data-key', option);
         randomButton.setAttribute('data-tooltip', 'Toggle randomization for this option!');
         randomButton.addEventListener('click', (event) => toggleRandomize(
-            event, specialRange, specialRangeSelect)
+            event, namedRange, namedRangeSelect)
         );
         if (currentOptions[gameName][option] === 'random') {
           randomButton.classList.add('active');
-          specialRange.disabled = true;
-          specialRangeSelect.disabled = true;
+          namedRange.disabled = true;
+          namedRangeSelect.disabled = true;
         }
 
-        specialRangeWrapper.appendChild(randomButton);
+        namedRangeWrapper.appendChild(randomButton);
         break;
 
       default:

WebHostLib/static/assets/weighted-options.js

@@ -93,9 +93,10 @@ class WeightedSettings {
             });
             break;
           case 'range':
-          case 'special_range':
+          case 'named_range':
             this.current[game][gameSetting]['random'] = 0;
             this.current[game][gameSetting]['random-low'] = 0;
+            this.current[game][gameSetting]['random-middle'] = 0;
             this.current[game][gameSetting]['random-high'] = 0;
             if (setting.hasOwnProperty('defaultValue')) {
               this.current[game][gameSetting][setting.defaultValue] = 25;
@@ -522,178 +523,185 @@ class GameSettings {
           break;
 
         case 'range':
-        case 'special_range':
+        case 'named_range':
           const rangeTable = document.createElement('table');
           const rangeTbody = document.createElement('tbody');
 
-          if (((setting.max - setting.min) + 1) < 11) {
-            for (let i=setting.min; i <= setting.max; ++i) {
-              const tr = document.createElement('tr');
-              const tdLeft = document.createElement('td');
-              tdLeft.classList.add('td-left');
-              tdLeft.innerText = i;
-              tr.appendChild(tdLeft);
+          const hintText = document.createElement('p');
+          hintText.classList.add('hint-text');
+          hintText.innerHTML = 'This is a range option. You may enter a valid numerical value in the text box ' +
+            `below, then press the "Add" button to add a weight for it.<br /><br />Accepted values:<br />` +
+            `Normal range: ${setting.min} - ${setting.max}`;
 
-              const tdMiddle = document.createElement('td');
-              tdMiddle.classList.add('td-middle');
-              const range = document.createElement('input');
-              range.setAttribute('type', 'range');
-              range.setAttribute('id', `${this.name}-${settingName}-${i}-range`);
-              range.setAttribute('data-game', this.name);
-              range.setAttribute('data-setting', settingName);
-              range.setAttribute('data-option', i);
-              range.setAttribute('min', 0);
-              range.setAttribute('max', 50);
-              range.addEventListener('change', (evt) => this.#updateRangeSetting(evt));
-              range.value = this.current[settingName][i] || 0;
-              tdMiddle.appendChild(range);
-              tr.appendChild(tdMiddle);
-
-              const tdRight = document.createElement('td');
-              tdRight.setAttribute('id', `${this.name}-${settingName}-${i}`)
-              tdRight.classList.add('td-right');
-              tdRight.innerText = range.value;
-              tr.appendChild(tdRight);
-
-              rangeTbody.appendChild(tr);
-            }
-          } else {
-            const hintText = document.createElement('p');
-            hintText.classList.add('hint-text');
-            hintText.innerHTML = 'This is a range option. You may enter a valid numerical value in the text box ' +
-              `below, then press the "Add" button to add a weight for it.<br />Minimum value: ${setting.min}<br />` +
-              `Maximum value: ${setting.max}`;
-
-            if (setting.hasOwnProperty('value_names')) {
-              hintText.innerHTML += '<br /><br />Certain values have special meaning:';
-              Object.keys(setting.value_names).forEach((specialName) => {
+          const acceptedValuesOutsideRange = [];
+          if (setting.hasOwnProperty('value_names')) {
+            Object.keys(setting.value_names).forEach((specialName) => {
+              if (
+                (setting.value_names[specialName] < setting.min) ||
+                (setting.value_names[specialName] > setting.max)
+              ) {
                 hintText.innerHTML += `<br />${specialName}: ${setting.value_names[specialName]}`;
-              });
-            }
-
-            settingWrapper.appendChild(hintText);
-
-            const addOptionDiv = document.createElement('div');
-            addOptionDiv.classList.add('add-option-div');
-            const optionInput = document.createElement('input');
-            optionInput.setAttribute('id', `${this.name}-${settingName}-option`);
-            optionInput.setAttribute('placeholder', `${setting.min} - ${setting.max}`);
-            addOptionDiv.appendChild(optionInput);
-            const addOptionButton = document.createElement('button');
-            addOptionButton.innerText = 'Add';
-            addOptionDiv.appendChild(addOptionButton);
-            settingWrapper.appendChild(addOptionDiv);
-            optionInput.addEventListener('keydown', (evt) => {
-              if (evt.key === 'Enter') { addOptionButton.dispatchEvent(new Event('click')); }
+                acceptedValuesOutsideRange.push(setting.value_names[specialName]);
+              }
             });
 
-            addOptionButton.addEventListener('click', () => {
-              const optionInput = document.getElementById(`${this.name}-${settingName}-option`);
-              let option = optionInput.value;
-              if (!option || !option.trim()) { return; }
-              option = parseInt(option, 10);
-              if ((option < setting.min) || (option > setting.max)) { return; }
-              optionInput.value = '';
-              if (document.getElementById(`${this.name}-${settingName}-${option}-range`)) { return; }
-
-              const tr = document.createElement('tr');
-              const tdLeft = document.createElement('td');
-              tdLeft.classList.add('td-left');
-              tdLeft.innerText = option;
-              tr.appendChild(tdLeft);
-
-              const tdMiddle = document.createElement('td');
-              tdMiddle.classList.add('td-middle');
-              const range = document.createElement('input');
-              range.setAttribute('type', 'range');
-              range.setAttribute('id', `${this.name}-${settingName}-${option}-range`);
-              range.setAttribute('data-game', this.name);
-              range.setAttribute('data-setting', settingName);
-              range.setAttribute('data-option', option);
-              range.setAttribute('min', 0);
-              range.setAttribute('max', 50);
-              range.addEventListener('change', (evt) => this.#updateRangeSetting(evt));
-              range.value = this.current[settingName][parseInt(option, 10)];
-              tdMiddle.appendChild(range);
-              tr.appendChild(tdMiddle);
-
-              const tdRight = document.createElement('td');
-              tdRight.setAttribute('id', `${this.name}-${settingName}-${option}`)
-              tdRight.classList.add('td-right');
-              tdRight.innerText = range.value;
-              tr.appendChild(tdRight);
-
-              const tdDelete = document.createElement('td');
-              tdDelete.classList.add('td-delete');
-              const deleteButton = document.createElement('span');
-              deleteButton.classList.add('range-option-delete');
-              deleteButton.innerText = '❌';
-              deleteButton.addEventListener('click', () => {
-                range.value = 0;
-                range.dispatchEvent(new Event('change'));
-                rangeTbody.removeChild(tr);
-              });
-              tdDelete.appendChild(deleteButton);
-              tr.appendChild(tdDelete);
-
-              rangeTbody.appendChild(tr);
-
-              // Save new option to settings
-              range.dispatchEvent(new Event('change'));
-            });
-
-            Object.keys(this.current[settingName]).forEach((option) => {
-              // These options are statically generated below, and should always appear even if they are deleted
-              // from localStorage
-              if (['random-low', 'random', 'random-high'].includes(option)) { return; }
-
-              const tr = document.createElement('tr');
-                const tdLeft = document.createElement('td');
-                tdLeft.classList.add('td-left');
-                tdLeft.innerText = option;
-                tr.appendChild(tdLeft);
-
-                const tdMiddle = document.createElement('td');
-                tdMiddle.classList.add('td-middle');
-                const range = document.createElement('input');
-                range.setAttribute('type', 'range');
-                range.setAttribute('id', `${this.name}-${settingName}-${option}-range`);
-                range.setAttribute('data-game', this.name);
-                range.setAttribute('data-setting', settingName);
-                range.setAttribute('data-option', option);
-                range.setAttribute('min', 0);
-                range.setAttribute('max', 50);
-                range.addEventListener('change', (evt) => this.#updateRangeSetting(evt));
-                range.value = this.current[settingName][parseInt(option, 10)];
-                tdMiddle.appendChild(range);
-                tr.appendChild(tdMiddle);
-
-                const tdRight = document.createElement('td');
-                tdRight.setAttribute('id', `${this.name}-${settingName}-${option}`)
-                tdRight.classList.add('td-right');
-                tdRight.innerText = range.value;
-                tr.appendChild(tdRight);
-
-                const tdDelete = document.createElement('td');
-                tdDelete.classList.add('td-delete');
-                const deleteButton = document.createElement('span');
-                deleteButton.classList.add('range-option-delete');
-                deleteButton.innerText = '❌';
-                deleteButton.addEventListener('click', () => {
-                  range.value = 0;
-                  const changeEvent = new Event('change');
-                  changeEvent.action = 'rangeDelete';
-                  range.dispatchEvent(changeEvent);
-                  rangeTbody.removeChild(tr);
-                });
-                tdDelete.appendChild(deleteButton);
-                tr.appendChild(tdDelete);
-
-                rangeTbody.appendChild(tr);
+            hintText.innerHTML += '<br /><br />Certain values have special meaning:';
+            Object.keys(setting.value_names).forEach((specialName) => {
+              hintText.innerHTML += `<br />${specialName}: ${setting.value_names[specialName]}`;
             });
           }
 
-          ['random', 'random-low', 'random-high'].forEach((option) => {
+          settingWrapper.appendChild(hintText);
+
+          const addOptionDiv = document.createElement('div');
+          addOptionDiv.classList.add('add-option-div');
+          const optionInput = document.createElement('input');
+          optionInput.setAttribute('id', `${this.name}-${settingName}-option`);
+          let placeholderText = `${setting.min} - ${setting.max}`;
+          acceptedValuesOutsideRange.forEach((aVal) => placeholderText += `, ${aVal}`);
+          optionInput.setAttribute('placeholder', placeholderText);
+          addOptionDiv.appendChild(optionInput);
+          const addOptionButton = document.createElement('button');
+          addOptionButton.innerText = 'Add';
+          addOptionDiv.appendChild(addOptionButton);
+          settingWrapper.appendChild(addOptionDiv);
+          optionInput.addEventListener('keydown', (evt) => {
+            if (evt.key === 'Enter') { addOptionButton.dispatchEvent(new Event('click')); }
+          });
+
+          addOptionButton.addEventListener('click', () => {
+            const optionInput = document.getElementById(`${this.name}-${settingName}-option`);
+            let option = optionInput.value;
+            if (!option || !option.trim()) { return; }
+            option = parseInt(option, 10);
+
+            let optionAcceptable = false;
+            if ((option > setting.min) && (option < setting.max)) {
+              optionAcceptable = true;
+            }
+            if (setting.hasOwnProperty('value_names') && Object.values(setting.value_names).includes(option)){
+              optionAcceptable = true;
+            }
+            if (!optionAcceptable) { return; }
+
+            optionInput.value = '';
+            if (document.getElementById(`${this.name}-${settingName}-${option}-range`)) { return; }
+
+            const tr = document.createElement('tr');
+            const tdLeft = document.createElement('td');
+            tdLeft.classList.add('td-left');
+            tdLeft.innerText = option;
+            if (
+              setting.hasOwnProperty('value_names') &&
+              Object.values(setting.value_names).includes(parseInt(option, 10))
+            ) {
+              const optionName = Object.keys(setting.value_names).find(
+                (key) => setting.value_names[key] === parseInt(option, 10)
+              );
+              tdLeft.innerText += ` [${optionName}]`;
+            }
+            tr.appendChild(tdLeft);
+
+            const tdMiddle = document.createElement('td');
+            tdMiddle.classList.add('td-middle');
+            const range = document.createElement('input');
+            range.setAttribute('type', 'range');
+            range.setAttribute('id', `${this.name}-${settingName}-${option}-range`);
+            range.setAttribute('data-game', this.name);
+            range.setAttribute('data-setting', settingName);
+            range.setAttribute('data-option', option);
+            range.setAttribute('min', 0);
+            range.setAttribute('max', 50);
+            range.addEventListener('change', (evt) => this.#updateRangeSetting(evt));
+            range.value = this.current[settingName][parseInt(option, 10)];
+            tdMiddle.appendChild(range);
+            tr.appendChild(tdMiddle);
+
+            const tdRight = document.createElement('td');
+            tdRight.setAttribute('id', `${this.name}-${settingName}-${option}`)
+            tdRight.classList.add('td-right');
+            tdRight.innerText = range.value;
+            tr.appendChild(tdRight);
+
+            const tdDelete = document.createElement('td');
+            tdDelete.classList.add('td-delete');
+            const deleteButton = document.createElement('span');
+            deleteButton.classList.add('range-option-delete');
+            deleteButton.innerText = '❌';
+            deleteButton.addEventListener('click', () => {
+              range.value = 0;
+              range.dispatchEvent(new Event('change'));
+              rangeTbody.removeChild(tr);
+            });
+            tdDelete.appendChild(deleteButton);
+            tr.appendChild(tdDelete);
+
+            rangeTbody.appendChild(tr);
+
+            // Save new option to settings
+            range.dispatchEvent(new Event('change'));
+          });
+
+          Object.keys(this.current[settingName]).forEach((option) => {
+            // These options are statically generated below, and should always appear even if they are deleted
+            // from localStorage
+            if (['random', 'random-low', 'random-middle', 'random-high'].includes(option)) { return; }
+
+            const tr = document.createElement('tr');
+            const tdLeft = document.createElement('td');
+            tdLeft.classList.add('td-left');
+            tdLeft.innerText = option;
+            if (
+              setting.hasOwnProperty('value_names') &&
+              Object.values(setting.value_names).includes(parseInt(option, 10))
+            ) {
+              const optionName = Object.keys(setting.value_names).find(
+                (key) => setting.value_names[key] === parseInt(option, 10)
+              );
+              tdLeft.innerText += ` [${optionName}]`;
+            }
+            tr.appendChild(tdLeft);
+
+            const tdMiddle = document.createElement('td');
+            tdMiddle.classList.add('td-middle');
+            const range = document.createElement('input');
+            range.setAttribute('type', 'range');
+            range.setAttribute('id', `${this.name}-${settingName}-${option}-range`);
+            range.setAttribute('data-game', this.name);
+            range.setAttribute('data-setting', settingName);
+            range.setAttribute('data-option', option);
+            range.setAttribute('min', 0);
+            range.setAttribute('max', 50);
+            range.addEventListener('change', (evt) => this.#updateRangeSetting(evt));
+            range.value = this.current[settingName][parseInt(option, 10)];
+            tdMiddle.appendChild(range);
+            tr.appendChild(tdMiddle);
+
+            const tdRight = document.createElement('td');
+            tdRight.setAttribute('id', `${this.name}-${settingName}-${option}`)
+            tdRight.classList.add('td-right');
+            tdRight.innerText = range.value;
+            tr.appendChild(tdRight);
+
+            const tdDelete = document.createElement('td');
+            tdDelete.classList.add('td-delete');
+            const deleteButton = document.createElement('span');
+            deleteButton.classList.add('range-option-delete');
+            deleteButton.innerText = '❌';
+            deleteButton.addEventListener('click', () => {
+              range.value = 0;
+              const changeEvent = new Event('change');
+              changeEvent.action = 'rangeDelete';
+              range.dispatchEvent(changeEvent);
+              rangeTbody.removeChild(tr);
+            });
+            tdDelete.appendChild(deleteButton);
+            tr.appendChild(tdDelete);
+
+            rangeTbody.appendChild(tr);
+          });
+
+          ['random', 'random-low', 'random-middle', 'random-high'].forEach((option) => {
             const tr = document.createElement('tr');
               const tdLeft = document.createElement('td');
               tdLeft.classList.add('td-left');
@@ -704,6 +712,9 @@ class GameSettings {
                 case 'random-low':
                   tdLeft.innerText = "Random (Low)";
                   break;
+                case 'random-middle':
+                  tdLeft.innerText = 'Random (Middle)';
+                  break;
                 case 'random-high':
                   tdLeft.innerText = "Random (High)";
                   break;

WebHostLib/static/styles/player-options.css

@@ -160,18 +160,18 @@ html{
     margin-left: 0.25rem;
 }
 
-#player-options table .special-range-container{
+#player-options table .named-range-container{
     display: flex;
     flex-direction: column;
 }
 
-#player-options table .special-range-wrapper{
+#player-options table .named-range-wrapper{
     display: flex;
     flex-direction: row;
     margin-top: 0.25rem;
 }
 
-#player-options table .special-range-wrapper input[type=range]{
+#player-options table .named-range-wrapper input[type=range]{
     flex-grow: 1;
 }