Options: introduce SpecialRange (#630)

* Options: introduce SpecialRange

* Include SpecialRange data in player-settings and weighted-settings JSON files

* Add support for SpecialRange to player-settings pages

* Add support for SpecialRange options to weighted-settings. Also fixed a bug which would cause the page to crash if an unknown setting was detected.

Co-authored-by: Chris Wilson <chris@legendserver.info>

WebHostLib/static/assets/player-settings.js

@@ -36,7 +36,8 @@ window.addEventListener('load', () => {
     const nameInput = document.getElementById('player-name');
     nameInput.addEventListener('keyup', (event) => updateBaseSetting(event));
     nameInput.value = playerSettings.name;
-  }).catch(() => {
+  }).catch((e) => {
+    console.error(e);
     const url = new URL(window.location.href);
     window.location.replace(`${url.protocol}//${url.hostname}/page-not-found`);
   })
@@ -158,6 +159,70 @@ const buildOptionsTable = (settings, romOpts = false) => {
         element.appendChild(rangeVal);
         break;
 
+      case 'special_range':
+        element = document.createElement('div');
+        element.classList.add('special-range-container');
+
+        // Build the select element
+        let specialRangeSelect = document.createElement('select');
+        specialRangeSelect.setAttribute('data-key', setting);
+        Object.keys(settings[setting].value_names).forEach((presetName) => {
+          let presetOption = document.createElement('option');
+          presetOption.innerText = presetName;
+          presetOption.value = settings[setting].value_names[presetName];
+          specialRangeSelect.appendChild(presetOption);
+        });
+        let customOption = document.createElement('option');
+        customOption.innerText = 'Custom';
+        customOption.value = 'custom';
+        customOption.selected = true;
+        specialRangeSelect.appendChild(customOption);
+        if (Object.values(settings[setting].value_names).includes(Number(currentSettings[gameName][setting]))) {
+          specialRangeSelect.value = Number(currentSettings[gameName][setting]);
+        }
+
+        // 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', setting);
+        specialRange.setAttribute('min', settings[setting].min);
+        specialRange.setAttribute('max', settings[setting].max);
+        specialRange.value = currentSettings[gameName][setting];
+
+        // Build rage value element
+        let specialRangeVal = document.createElement('span');
+        specialRangeVal.classList.add('range-value');
+        specialRangeVal.setAttribute('id', `${setting}-value`);
+        specialRangeVal.innerText = currentSettings[gameName][setting] ?? settings[setting].defaultValue;
+
+        // Configure select event listener
+        specialRangeSelect.addEventListener('change', (event) => {
+          if (event.target.value === 'custom') { return; }
+
+          // Update range slider
+          specialRange.value = event.target.value;
+          document.getElementById(`${setting}-value`).innerText = event.target.value;
+          updateGameSetting(event);
+        });
+
+        // Configure range event handler
+        specialRange.addEventListener('change', (event) => {
+          // Update select element
+          specialRangeSelect.value =
+            (Object.values(settings[setting].value_names).includes(parseInt(event.target.value))) ?
+            parseInt(event.target.value) : 'custom';
+          document.getElementById(`${setting}-value`).innerText = event.target.value;
+          updateGameSetting(event);
+        });
+
+        element.appendChild(specialRangeSelect);
+        specialRangeWrapper.appendChild(specialRange);
+        specialRangeWrapper.appendChild(specialRangeVal);
+        element.appendChild(specialRangeWrapper);
+        break;
+
       default:
         console.error(`Ignoring unknown setting type: ${settings[setting].type} with name ${setting}`);
         return;

WebHostLib/static/assets/weighted-settings.js

@@ -77,6 +77,7 @@ const createDefaultSettings = (settingData) => {
             });
             break;
           case 'range':
+          case 'special_range':
             for (let i = setting.min; i <= setting.max; ++i){
               newSettings[game][gameSetting][i] =
                 (setting.hasOwnProperty('defaultValue') && setting.defaultValue === i) ? 25 : 0;
@@ -285,6 +286,7 @@ const buildWeightedSettingsDiv = (game, settings) => {
         break;
 
       case 'range':
+      case 'special_range':
         const rangeTable = document.createElement('table');
         const rangeTbody = document.createElement('tbody');
 
@@ -325,6 +327,14 @@ const buildWeightedSettingsDiv = (game, settings) => {
           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) => {
+              hintText.innerHTML += `<br />${specialName}: ${setting.value_names[specialName]}`;
+            });
+          }
+
           settingWrapper.appendChild(hintText);
 
           const addOptionDiv = document.createElement('div');
@@ -487,7 +497,7 @@ const buildWeightedSettingsDiv = (game, settings) => {
         break;
 
       default:
-        console.error(`Unknown setting type for ${game} setting ${setting}: ${settings[setting].type}`);
+        console.error(`Unknown setting type for ${game} setting ${settingName}: ${setting.type}`);
         return;
     }
 

WebHostLib/static/styles/player-settings.css

@@ -137,6 +137,20 @@ html{
     margin-left: 0.25rem;
 }
 
+#player-settings table .special-range-container{
+    display: flex;
+    flex-direction: column;
+}
+
+#player-settings table .special-range-wrapper{
+    display: flex;
+    flex-direction: row;
+}
+
+#player-settings table .special-range-wrapper input[type=range]{
+    flex-grow: 1;
+}
+
 #player-settings table label{
     display: block;
     min-width: 200px;
@@ -148,7 +162,7 @@ html{
     border: none;
     padding: 3px;
     font-size: 17px;
-    vertical-align: middle;
+    vertical-align: top;
 }
 
 @media all and (max-width: 1000px), all and (orientation: portrait){