monorail
/
Archipelago
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add range options to player-settings pages

This commit is contained in:
Chris Wilson 2021-07-25 19:04:08 -04:00
parent f45c042351
commit e1e25d0eae
6 changed files with 83 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
WebHostLib/options.py
View File

@ -53,7 +53,7 @@ def create():
"type": "range", "type": "range",
"friendlyName": option.friendly_name if hasattr(option, "friendly_name") else option_name, "friendlyName": option.friendly_name if hasattr(option, "friendly_name") else option_name,
"description": option.__doc__ if option.__doc__ else "Please document me!", "description": option.__doc__ if option.__doc__ else "Please document me!",
"defaultValue": option.default if hasattr(option, "default") else None, "defaultValue": option.default if hasattr(option, "default") else option.range_start,
"min": option.range_start, "min": option.range_start,
"max": option.range_end, "max": option.range_end,
} }

74
WebHostLib/static/assets/player-settings.js
View File

@ -89,24 +89,62 @@ const buildOptionsTable = (settings, romOpts = false) => {
// td Right // td Right
const tdr = document.createElement('td'); const tdr = document.createElement('td');
const select = document.createElement('select'); let element = null;
select.setAttribute('id', setting);
select.setAttribute('data-key', setting); switch(settings[setting].type){
if (romOpts) { select.setAttribute('data-romOpt', '1'); } case 'select':
settings[setting].options.forEach((opt) => { element = document.createElement('div');
const option = document.createElement('option'); element.classList.add('select-container');
option.setAttribute('value', opt.value); let select = document.createElement('select');
option.innerText = opt.name; select.setAttribute('id', setting);
if ((isNaN(currentSettings[gameName][setting]) && select.setAttribute('data-key', setting);
(parseInt(opt.value, 10) === parseInt(currentSettings[gameName][setting]))) || if (romOpts) { select.setAttribute('data-romOpt', '1'); }
(opt.value === currentSettings[gameName][setting])) settings[setting].options.forEach((opt) => {
{ const option = document.createElement('option');
option.selected = true; option.setAttribute('value', opt.value);
} option.innerText = opt.name;
select.appendChild(option); if ((isNaN(currentSettings[gameName][setting]) &&
}); (parseInt(opt.value, 10) === parseInt(currentSettings[gameName][setting]))) ||
select.addEventListener('change', (event) => updateGameSetting(event)); (opt.value === currentSettings[gameName][setting]))
tdr.appendChild(select); {
option.selected = true;
}
select.appendChild(option);
});
select.addEventListener('change', (event) => updateGameSetting(event));
element.appendChild(select);
break;
case 'range':
element = document.createElement('div');
element.classList.add('range-container');
let range = document.createElement('input');
range.setAttribute('type', 'range');
range.setAttribute('data-key', setting);
range.setAttribute('min', settings[setting].min);
range.setAttribute('max', settings[setting].max);
range.value = currentSettings[gameName][setting];
range.addEventListener('change', (event) => {
document.getElementById(`${setting}-value`).innerText = event.target.value;
updateGameSetting(event);
});
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;
element.appendChild(rangeVal);
break;
default:
console.error(`Unknown setting type: ${settings[setting].type}`);
console.error(setting);
return;
}
tdr.appendChild(element);
tr.appendChild(tdr); tr.appendChild(tdr);
tbody.appendChild(tr); tbody.appendChild(tr);
}); });

129
WebHostLib/static/styles/minecraft/player-settings.css
View File

@ -1,129 +0,0 @@
html{
background-image: url('../../static/backgrounds/grass/grass-0007-large.png');
background-repeat: repeat;
background-size: 650px 650px;
}
#player-settings{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 1rem;
color: #eeffeb;
}
#player-settings #player-settings-button-row{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 15px;
}
#player-settings code{
background-color: #d9cd8e;
border-radius: 4px;
padding-left: 0.25rem;
padding-right: 0.25rem;
color: #000000;
}
#player-settings #user-message{
display: none;
width: calc(100% - 8px);
background-color: #ffe86b;
border-radius: 4px;
color: #000000;
padding: 4px;
text-align: center;
}
#player-settings #user-message.visible{
display: block;
}
#player-settings h1{
font-size: 2.5rem;
font-weight: normal;
border-bottom: 1px solid #ffffff;
width: 100%;
margin-bottom: 0.5rem;
color: #ffffff;
text-shadow: 1px 1px 4px #000000;
}
#player-settings h2{
font-size: 2rem;
font-weight: normal;
border-bottom: 1px solid #ffffff;
width: 100%;
margin-bottom: 0.5rem;
color: #ffe993;
text-transform: lowercase;
text-shadow: 1px 1px 2px #000000;
}
#player-settings h3, #player-settings h4, #player-settings h5, #player-settings h6{
color: #ffffff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
#player-settings a{
color: #ffef00;
}
#player-settings input:not([type]){
border: 1px solid #000000;
padding: 3px;
border-radius: 3px;
min-width: 150px;
}
#player-settings input:not([type]):focus{
border: 1px solid #ffffff;
}
#player-settings select{
border: 1px solid #000000;
padding: 3px;
border-radius: 3px;
min-width: 150px;
background-color: #ffffff;
}
#player-settings #game-options, #player-settings #rom-options{
display: flex;
flex-direction: row;
}
#player-settings .left, #player-settings .right{
flex-grow: 1;
}
#player-settings table select{
width: 250px;
}
#player-settings table label{
display: block;
min-width: 200px;
margin-right: 4px;
cursor: default;
}
@media all and (max-width: 1000px), all and (orientation: portrait){
#player-settings #game-options, #player-settings #rom-options{
justify-content: flex-start;
flex-wrap: wrap;
}
#player-settings .left, #player-settings .right{
flex-grow: unset;
}
#game-options table label, #rom-options table label{
display: block;
min-width: 200px;
}
}

30
WebHostLib/static/styles/factorio/player-settings.css → WebHostLib/static/styles/player-settings.css
View File

@ -1,5 +1,5 @@
html{ html{
background-image: url('../../static/backgrounds/grass/grass-0007-large.png'); background-image: url('../static/backgrounds/grass/grass-0007-large.png');
background-repeat: repeat; background-repeat: repeat;
background-size: 650px 650px; background-size: 650px 650px;
} }
@ -101,8 +101,28 @@ html{
flex-grow: 1; flex-grow: 1;
} }
#player-settings table select{ #player-settings table .select-container{
width: 250px; display: flex;
flex-direction: row;
}
#player-settings table .select-container select{
min-width: 200px;
flex-grow: 1;
}
#player-settings table .range-container{
display: flex;
flex-direction: row;
}
#player-settings table .range-container input[type=range]{
flex-grow: 1;
}
#player-settings table .range-value{
min-width: 20px;
margin-left: 0.25rem;
} }
#player-settings table label{ #player-settings table label{
@ -113,7 +133,7 @@ html{
} }
@media all and (max-width: 1000px), all and (orientation: portrait){ @media all and (max-width: 1000px), all and (orientation: portrait){
#player-settings #game-options, #player-settings #rom-options{ #player-settings #game-options{
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -122,7 +142,7 @@ html{
flex-grow: unset; flex-grow: unset;
} }
#game-options table label, #rom-options table label{ #game-options table label{
display: block; display: block;
min-width: 200px; min-width: 200px;
} }

129
WebHostLib/static/styles/zelda3/player-settings.css
View File

@ -1,129 +0,0 @@
html{
background-image: url('../../static/backgrounds/grass/grass-0007-large.png');
background-repeat: repeat;
background-size: 650px 650px;
}
#player-settings{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 1rem;
color: #eeffeb;
}
#player-settings #player-settings-button-row{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 15px;
}
#player-settings code{
background-color: #d9cd8e;
border-radius: 4px;
padding-left: 0.25rem;
padding-right: 0.25rem;
color: #000000;
}
#player-settings #user-message{
display: none;
width: calc(100% - 8px);
background-color: #ffe86b;
border-radius: 4px;
color: #000000;
padding: 4px;
text-align: center;
}
#player-settings #user-message.visible{
display: block;
}
#player-settings h1{
font-size: 2.5rem;
font-weight: normal;
border-bottom: 1px solid #ffffff;
width: 100%;
margin-bottom: 0.5rem;
color: #ffffff;
text-shadow: 1px 1px 4px #000000;
}
#player-settings h2{
font-size: 2rem;
font-weight: normal;
border-bottom: 1px solid #ffffff;
width: 100%;
margin-bottom: 0.5rem;
color: #ffe993;
text-transform: lowercase;
text-shadow: 1px 1px 2px #000000;
}
#player-settings h3, #player-settings h4, #player-settings h5, #player-settings h6{
color: #ffffff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
#player-settings a{
color: #ffef00;
}
#player-settings input:not([type]){
border: 1px solid #000000;
padding: 3px;
border-radius: 3px;
min-width: 150px;
}
#player-settings input:not([type]):focus{
border: 1px solid #ffffff;
}
#player-settings select{
border: 1px solid #000000;
padding: 3px;
border-radius: 3px;
min-width: 150px;
background-color: #ffffff;
}
#player-settings #game-options, #player-settings #rom-options{
display: flex;
flex-direction: row;
}
#player-settings .left, #player-settings .right{
flex-grow: 1;
}
#player-settings table select{
width: 250px;
}
#player-settings table label{
display: block;
min-width: 200px;
margin-right: 4px;
cursor: default;
}
@media all and (max-width: 1000px), all and (orientation: portrait){
#player-settings #game-options, #player-settings #rom-options{
justify-content: flex-start;
flex-wrap: wrap;
}
#player-settings .left, #player-settings .right{
flex-grow: unset;
}
#game-options table label, #rom-options table label{
display: block;
min-width: 200px;
}
}

2
WebHostLib/templates/player-settings.html
View File

@ -2,7 +2,7 @@
{% block head %} {% block head %}
<title>{{ game }} Settings</title> <title>{{ game }} Settings</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/zelda3/player-settings.css") }}" /> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/player-settings.css") }}" />
<script type="application/ecmascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script type="application/ecmascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="application/ecmascript" src="{{ url_for('static', filename="assets/js-yaml.min.js") }}"></script> <script type="application/ecmascript" src="{{ url_for('static', filename="assets/js-yaml.min.js") }}"></script>
<script type="application/ecmascript" src="{{ url_for('static', filename="assets/player-settings.js") }}"></script> <script type="application/ecmascript" src="{{ url_for('static', filename="assets/player-settings.js") }}"></script>