Skip to content

Commit

Permalink
Merge pull request ArchipelagoMW#944
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@ThePhar
ThePhar authored Nov 13, 2022
1 parent 7665935 commit 4d79920
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 14 deletions.
5 changes: 0 additions & 5 deletions WebHostLib/options.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,6 @@ def get_html_doc(option_type: type(Options.Option)) -> str:
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"

Expand Down
90 changes: 81 additions & 9 deletions WebHostLib/static/assets/player-settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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':
Expand All @@ -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':
Expand Down Expand Up @@ -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) => {
Expand All @@ -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
Expand All @@ -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:
Expand All @@ -243,17 +289,43 @@ 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) ?
event.target.value : parseInt(event.target.value);
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));
};

Expand Down
19 changes: 19 additions & 0 deletions WebHostLib/static/styles/player-settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 4d79920

Please sign in to comment.