From 4d79920fa685866c46c32f764ae4d42b5ffe8bf8 Mon Sep 17 00:00:00 2001 From: Zach Parks Date: Sat, 12 Nov 2022 21:03:44 -0600 Subject: [PATCH] Merge pull request #944 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 5 -- WebHostLib/static/assets/player-settings.js | 90 ++++++++++++++++++-- WebHostLib/static/styles/player-settings.css | 19 +++++ 3 files changed, 100 insertions(+), 14 deletions(-) diff --git a/WebHostLib/options.py b/WebHostLib/options.py index ee3f4399..89972451 100644 --- a/WebHostLib/options.py +++ b/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" diff --git a/WebHostLib/static/assets/player-settings.js b/WebHostLib/static/assets/player-settings.js index b77d4e87..0bb0c5b8 100644 --- a/WebHostLib/static/assets/player-settings.js +++ b/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)); }; diff --git a/WebHostLib/static/styles/player-settings.css b/WebHostLib/static/styles/player-settings.css index f3239446..9ba47d5f 100644 --- a/WebHostLib/static/styles/player-settings.css +++ b/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;