From e1e25d0eae78b4acc98897d58b7a02ebf4498702 Mon Sep 17 00:00:00 2001 From: Chris Wilson Date: Sun, 25 Jul 2021 19:04:08 -0400 Subject: [PATCH] Add range options to player-settings pages --- WebHostLib/options.py | 2 +- WebHostLib/static/assets/player-settings.js | 74 +++++++--- .../styles/minecraft/player-settings.css | 129 ------------------ .../styles/{factorio => }/player-settings.css | 30 +++- .../static/styles/zelda3/player-settings.css | 129 ------------------ WebHostLib/templates/player-settings.html | 2 +- 6 files changed, 83 insertions(+), 283 deletions(-) delete mode 100644 WebHostLib/static/styles/minecraft/player-settings.css rename WebHostLib/static/styles/{factorio => }/player-settings.css (80%) delete mode 100644 WebHostLib/static/styles/zelda3/player-settings.css diff --git a/WebHostLib/options.py b/WebHostLib/options.py index f27a407b..6cf3a2e4 100644 --- a/WebHostLib/options.py +++ b/WebHostLib/options.py @@ -53,7 +53,7 @@ def create(): "type": "range", "friendlyName": option.friendly_name if hasattr(option, "friendly_name") else option_name, "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, "max": option.range_end, } diff --git a/WebHostLib/static/assets/player-settings.js b/WebHostLib/static/assets/player-settings.js index 111a6d84..79a713d2 100644 --- a/WebHostLib/static/assets/player-settings.js +++ b/WebHostLib/static/assets/player-settings.js @@ -89,24 +89,62 @@ const buildOptionsTable = (settings, romOpts = false) => { // td Right const tdr = document.createElement('td'); - const select = document.createElement('select'); - select.setAttribute('id', setting); - select.setAttribute('data-key', setting); - if (romOpts) { select.setAttribute('data-romOpt', '1'); } - settings[setting].options.forEach((opt) => { - const option = document.createElement('option'); - option.setAttribute('value', opt.value); - option.innerText = opt.name; - if ((isNaN(currentSettings[gameName][setting]) && - (parseInt(opt.value, 10) === parseInt(currentSettings[gameName][setting]))) || - (opt.value === currentSettings[gameName][setting])) - { - option.selected = true; - } - select.appendChild(option); - }); - select.addEventListener('change', (event) => updateGameSetting(event)); - tdr.appendChild(select); + let element = null; + + switch(settings[setting].type){ + case 'select': + element = document.createElement('div'); + element.classList.add('select-container'); + let select = document.createElement('select'); + select.setAttribute('id', setting); + select.setAttribute('data-key', setting); + if (romOpts) { select.setAttribute('data-romOpt', '1'); } + settings[setting].options.forEach((opt) => { + const option = document.createElement('option'); + option.setAttribute('value', opt.value); + option.innerText = opt.name; + if ((isNaN(currentSettings[gameName][setting]) && + (parseInt(opt.value, 10) === parseInt(currentSettings[gameName][setting]))) || + (opt.value === currentSettings[gameName][setting])) + { + 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); tbody.appendChild(tr); }); diff --git a/WebHostLib/static/styles/minecraft/player-settings.css b/WebHostLib/static/styles/minecraft/player-settings.css deleted file mode 100644 index e92c4868..00000000 --- a/WebHostLib/static/styles/minecraft/player-settings.css +++ /dev/null @@ -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; - } -} diff --git a/WebHostLib/static/styles/factorio/player-settings.css b/WebHostLib/static/styles/player-settings.css similarity index 80% rename from WebHostLib/static/styles/factorio/player-settings.css rename to WebHostLib/static/styles/player-settings.css index e92c4868..33bf3d6d 100644 --- a/WebHostLib/static/styles/factorio/player-settings.css +++ b/WebHostLib/static/styles/player-settings.css @@ -1,5 +1,5 @@ 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-size: 650px 650px; } @@ -101,8 +101,28 @@ html{ flex-grow: 1; } -#player-settings table select{ - width: 250px; +#player-settings table .select-container{ + 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{ @@ -113,7 +133,7 @@ html{ } @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; flex-wrap: wrap; } @@ -122,7 +142,7 @@ html{ flex-grow: unset; } - #game-options table label, #rom-options table label{ + #game-options table label{ display: block; min-width: 200px; } diff --git a/WebHostLib/static/styles/zelda3/player-settings.css b/WebHostLib/static/styles/zelda3/player-settings.css deleted file mode 100644 index e92c4868..00000000 --- a/WebHostLib/static/styles/zelda3/player-settings.css +++ /dev/null @@ -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; - } -} diff --git a/WebHostLib/templates/player-settings.html b/WebHostLib/templates/player-settings.html index 8f40a773..cdfcb950 100644 --- a/WebHostLib/templates/player-settings.html +++ b/WebHostLib/templates/player-settings.html @@ -2,7 +2,7 @@ {% block head %} {{ game }} Settings - +