Merge pull request #944

* WebHost: Remove "Random" as an option and move to separate button in …

* Merge branch 'main' into randomize-button

* Tweaked color and changed text of tooltip.

* Merge branch 'main' into randomize-button

WebHostLib/options.py

@@ -106,11 +106,6 @@ def create():
                     if sub_option_id == option.default:
                         this_option["defaultValue"] = sub_option_name
 
-                this_option["options"].append({
-                    "name": "Random",
-                    "value": "random",
-                })
-
                 if option.default == "random":
                     this_option["defaultValue"] = "random"
 

WebHostLib/static/assets/player-settings.js

@@ -118,6 +118,8 @@ const buildOptionsTable = (settings, romOpts = false) => {
     const tdr = document.createElement('td');
     let element = null;
 
+    const randomButton = document.createElement('button');
+
     switch(settings[setting].type){
       case 'select':
         element = document.createElement('div');
@@ -138,8 +140,21 @@ const buildOptionsTable = (settings, romOpts = false) => {
           }
           select.appendChild(option);
         });
-        select.addEventListener('change', (event) => updateGameSetting(event));
+        select.addEventListener('change', (event) => updateGameSetting(event.target));
         element.appendChild(select);
+
+        // Randomize button
+        randomButton.innerText = '🎲';
+        randomButton.classList.add('randomize-button');
+        randomButton.setAttribute('data-key', setting);
+        randomButton.setAttribute('data-tooltip', 'Toggle randomization for this option!');
+        randomButton.addEventListener('click', (event) => toggleRandomize(event, [select]));
+        if (currentSettings[gameName][setting] === 'random') {
+          randomButton.classList.add('active');
+          select.disabled = true;
+        }
+
+        element.appendChild(randomButton);
         break;
 
       case 'range':
@@ -154,15 +169,29 @@ const buildOptionsTable = (settings, romOpts = false) => {
         range.value = currentSettings[gameName][setting];
         range.addEventListener('change', (event) => {
           document.getElementById(`${setting}-value`).innerText = event.target.value;
-          updateGameSetting(event);
+          updateGameSetting(event.target);
         });
         element.appendChild(range);
 
         let rangeVal = document.createElement('span');
         rangeVal.classList.add('range-value');
         rangeVal.setAttribute('id', `${setting}-value`);
-        rangeVal.innerText = currentSettings[gameName][setting] ?? settings[setting].defaultValue;
+        rangeVal.innerText = currentSettings[gameName][setting] !== 'random' ?
+          currentSettings[gameName][setting] : settings[setting].defaultValue;
         element.appendChild(rangeVal);
+
+        // Randomize button
+        randomButton.innerText = '🎲';
+        randomButton.classList.add('randomize-button');
+        randomButton.setAttribute('data-key', setting);
+        randomButton.setAttribute('data-tooltip', 'Toggle randomization for this option!');
+        randomButton.addEventListener('click', (event) => toggleRandomize(event, [range]));
+        if (currentSettings[gameName][setting] === 'random') {
+          randomButton.classList.add('active');
+          range.disabled = true;
+        }
+
+        element.appendChild(randomButton);
         break;
 
       case 'special_range':
@@ -201,7 +230,8 @@ const buildOptionsTable = (settings, romOpts = false) => {
         let specialRangeVal = document.createElement('span');
         specialRangeVal.classList.add('range-value');
         specialRangeVal.setAttribute('id', `${setting}-value`);
-        specialRangeVal.innerText = currentSettings[gameName][setting] ?? settings[setting].defaultValue;
+        specialRangeVal.innerText = currentSettings[gameName][setting] !== 'random' ?
+          currentSettings[gameName][setting] : settings[setting].defaultValue;
 
         // Configure select event listener
         specialRangeSelect.addEventListener('change', (event) => {
@@ -210,7 +240,7 @@ const buildOptionsTable = (settings, romOpts = false) => {
           // Update range slider
           specialRange.value = event.target.value;
           document.getElementById(`${setting}-value`).innerText = event.target.value;
-          updateGameSetting(event);
+          updateGameSetting(event.target);
         });
 
         // Configure range event handler
@@ -220,13 +250,29 @@ const buildOptionsTable = (settings, romOpts = false) => {
             (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);
+          updateGameSetting(event.target);
         });
 
         element.appendChild(specialRangeSelect);
         specialRangeWrapper.appendChild(specialRange);
         specialRangeWrapper.appendChild(specialRangeVal);
         element.appendChild(specialRangeWrapper);
+
+        // Randomize button
+        randomButton.innerText = '🎲';
+        randomButton.classList.add('randomize-button');
+        randomButton.setAttribute('data-key', setting);
+        randomButton.setAttribute('data-tooltip', 'Toggle randomization for this option!');
+        randomButton.addEventListener('click', (event) => toggleRandomize(
+            event, [specialRange, specialRangeSelect])
+        );
+        if (currentSettings[gameName][setting] === 'random') {
+          randomButton.classList.add('active');
+          specialRange.disabled = true;
+          specialRangeSelect.disabled = true;
+        }
+
+        specialRangeWrapper.appendChild(randomButton);
         break;
 
       default:
@@ -243,6 +289,25 @@ const buildOptionsTable = (settings, romOpts = false) => {
   return table;
 };
 
+const toggleRandomize = (event, inputElements) => {
+  const active = event.target.classList.contains('active');
+  const randomButton = event.target;
+
+  if (active) {
+    randomButton.classList.remove('active');
+    for (const element of inputElements) {
+      element.disabled = undefined;
+      updateGameSetting(element);
+    }
+  } else {
+    randomButton.classList.add('active');
+    for (const element of inputElements) {
+      element.disabled = true;
+      updateGameSetting(randomButton);
+    }
+  }
+};
+
 const updateBaseSetting = (event) => {
   const options = JSON.parse(localStorage.getItem(gameName));
   options[event.target.getAttribute('data-key')] = isNaN(event.target.value) ?
@@ -250,10 +315,17 @@ const updateBaseSetting = (event) => {
   localStorage.setItem(gameName, JSON.stringify(options));
 };
 
-const updateGameSetting = (event) => {
+const updateGameSetting = (settingElement) => {
   const options = JSON.parse(localStorage.getItem(gameName));
-  options[gameName][event.target.getAttribute('data-key')] = isNaN(event.target.value) ?
+
-      event.target.value : parseInt(event.target.value, 10);
+  if (settingElement.classList.contains('randomize-button')) {
+    // If the event passed in is the randomize button, then we know what we must do.
+    options[gameName][settingElement.getAttribute('data-key')] = 'random';
+  } else {
+    options[gameName][settingElement.getAttribute('data-key')] = isNaN(settingElement.value) ?
+      settingElement.value : parseInt(settingElement.value, 10);
+  }
+
   localStorage.setItem(gameName, JSON.stringify(options));
 };
 

WebHostLib/static/styles/player-settings.css

@@ -116,6 +116,10 @@ html{
     flex-grow: 1;
 }
 
+#player-settings table select:disabled{
+    background-color: lightgray;
+}
+
 #player-settings table .range-container{
     display: flex;
     flex-direction: row;
@@ -138,12 +142,27 @@ html{
 #player-settings table .special-range-wrapper{
     display: flex;
     flex-direction: row;
+    margin-top: 0.25rem;
 }
 
 #player-settings table .special-range-wrapper input[type=range]{
     flex-grow: 1;
 }
 
+#player-settings table .randomize-button {
+    max-height: 24px;
+    line-height: 16px;
+    padding: 2px 8px;
+    margin: 0 0 0 0.25rem;
+    font-size: 12px;
+    border: 1px solid black;
+    border-radius: 3px;
+}
+
+#player-settings table .randomize-button.active {
+    background-color: #ffef00; /* Same as .interactive in globalStyles.css */
+}
+
 #player-settings table label{
     display: block;
     min-width: 200px;