From c330f4a35e48f6d693ff67115cc695b78f1c580f Mon Sep 17 00:00:00 2001 From: Chris Wilson Date: Tue, 11 Jan 2022 01:26:12 -0500 Subject: [PATCH] [WebHost] weighted-settings: Implement item and location hints --- WebHostLib/static/assets/weighted-settings.js | 144 +++++++++++++++++- .../static/styles/weighted-settings.css | 37 ++++- 2 files changed, 173 insertions(+), 8 deletions(-) diff --git a/WebHostLib/static/assets/weighted-settings.js b/WebHostLib/static/assets/weighted-settings.js index 1471fc41..893af20a 100644 --- a/WebHostLib/static/assets/weighted-settings.js +++ b/WebHostLib/static/assets/weighted-settings.js @@ -479,6 +479,9 @@ const buildWeightedSettingsDiv = (game, settings) => { }; const buildItemsDiv = (game, items) => { + // Sort alphabetical, in pace + items.sort(); + const currentSettings = JSON.parse(localStorage.getItem('weighted-settings')); const itemsDiv = document.createElement('div'); itemsDiv.classList.add('items-div'); @@ -542,7 +545,7 @@ const buildItemsDiv = (game, items) => { nonLocalItems.addEventListener('drop', itemDropHandler); // Populate the divs - items.sort().forEach((item) => { + items.forEach((item) => { const itemDiv = buildItemDiv(game, item); if (currentSettings[game].start_inventory.includes(item)){ @@ -627,6 +630,12 @@ const itemDropHandler = (evt) => { }; const buildHintsDiv = (game, items, locations) => { + const currentSettings = JSON.parse(localStorage.getItem('weighted-settings')); + + // Sort alphabetical, in place + items.sort(); + locations.sort(); + const hintsDiv = document.createElement('div'); hintsDiv.classList.add('hints-div'); const hintsHeader = document.createElement('h3'); @@ -635,15 +644,142 @@ const buildHintsDiv = (game, items, locations) => { const hintsDescription = document.createElement('p'); hintsDescription.classList.add('setting-description'); hintsDescription.innerText = 'Choose any items or locations to begin the game with the knowledge of where those ' + - ' items, are or what those locations contain. Excluded locations will not contain progression items.'; + ' items are, or what those locations contain. Excluded locations will not contain progression items.'; hintsDiv.appendChild(hintsDescription); - const itemHintsDiv = document.createElement('div'); + const itemHintsContainer = document.createElement('div'); + itemHintsContainer.classList.add('hints-container'); - hintsDiv.appendChild(itemHintsDiv); + const itemHintsWrapper = document.createElement('div'); + itemHintsWrapper.classList.add('hints-wrapper'); + itemHintsWrapper.innerText = 'Starting Item Hints'; + + const itemHintsDiv = document.createElement('div'); + itemHintsDiv.classList.add('item-container'); + items.forEach((item) => { + const itemDiv = document.createElement('div'); + itemDiv.classList.add('hint-div'); + + const itemLabel = document.createElement('label'); + itemLabel.setAttribute('for', `${game}-start_hints-${item}`); + + const itemCheckbox = document.createElement('input'); + itemCheckbox.setAttribute('type', 'checkbox'); + itemCheckbox.setAttribute('id', `${game}-start_hints-${item}`); + itemCheckbox.setAttribute('data-game', game); + itemCheckbox.setAttribute('data-setting', 'start_hints'); + itemCheckbox.setAttribute('data-option', item); + if (currentSettings[game].start_hints.includes(item)) { + itemCheckbox.setAttribute('checked', 'true'); + } + itemCheckbox.addEventListener('change', hintChangeHandler); + itemLabel.appendChild(itemCheckbox); + + const itemName = document.createElement('span'); + itemName.innerText = item; + itemLabel.appendChild(itemName); + + itemDiv.appendChild(itemLabel); + itemHintsDiv.appendChild(itemDiv); + }); + + itemHintsWrapper.appendChild(itemHintsDiv); + itemHintsContainer.appendChild(itemHintsWrapper); + + const locationHintsWrapper = document.createElement('div'); + locationHintsWrapper.classList.add('hints-wrapper'); + locationHintsWrapper.innerText = 'Starting Location Hints'; + + const locationHintsDiv = document.createElement('div'); + locationHintsDiv.classList.add('item-container'); + locations.forEach((location) => { + const locationDiv = document.createElement('div'); + locationDiv.classList.add('hint-div'); + + const locationLabel = document.createElement('label'); + locationLabel.setAttribute('for', `${game}-start_location_hints-${location}`); + + const locationCheckbox = document.createElement('input'); + locationCheckbox.setAttribute('type', 'checkbox'); + locationCheckbox.setAttribute('id', `${game}-start_location_hints-${location}`); + locationCheckbox.setAttribute('data-game', game); + locationCheckbox.setAttribute('data-setting', 'start_location_hints'); + locationCheckbox.setAttribute('data-option', location); + if (currentSettings[game].start_location_hints.includes(location)) { + locationCheckbox.setAttribute('checked', '1'); + } + locationCheckbox.addEventListener('change', hintChangeHandler); + locationLabel.appendChild(locationCheckbox); + + const locationName = document.createElement('span'); + locationName.innerText = location; + locationLabel.appendChild(locationName); + + locationDiv.appendChild(locationLabel); + locationHintsDiv.appendChild(locationDiv); + }); + + locationHintsWrapper.appendChild(locationHintsDiv); + itemHintsContainer.appendChild(locationHintsWrapper); + + const excludeLocationsWrapper = document.createElement('div'); + excludeLocationsWrapper.classList.add('hints-wrapper'); + excludeLocationsWrapper.innerText = 'Exclude Locations'; + + const excludeLocationsDiv = document.createElement('div'); + excludeLocationsDiv.classList.add('item-container'); + locations.forEach((location) => { + const locationDiv = document.createElement('div'); + locationDiv.classList.add('hint-div'); + + const locationLabel = document.createElement('label'); + locationLabel.setAttribute('for', `${game}-exclude_locations-${location}`); + + const locationCheckbox = document.createElement('input'); + locationCheckbox.setAttribute('type', 'checkbox'); + locationCheckbox.setAttribute('id', `${game}-exclude_locations-${location}`); + locationCheckbox.setAttribute('data-game', game); + locationCheckbox.setAttribute('data-setting', 'exclude_locations'); + locationCheckbox.setAttribute('data-option', location); + if (currentSettings[game].exclude_locations.includes(location)) { + locationCheckbox.setAttribute('checked', '1'); + } + locationCheckbox.addEventListener('change', hintChangeHandler); + locationLabel.appendChild(locationCheckbox); + + const locationName = document.createElement('span'); + locationName.innerText = location; + locationLabel.appendChild(locationName); + + locationDiv.appendChild(locationLabel); + excludeLocationsDiv.appendChild(locationDiv); + }); + + excludeLocationsWrapper.appendChild(excludeLocationsDiv); + itemHintsContainer.appendChild(excludeLocationsWrapper); + + hintsDiv.appendChild(itemHintsContainer); return hintsDiv; }; +const hintChangeHandler = (evt) => { + const currentSettings = JSON.parse(localStorage.getItem('weighted-settings')); + const game = evt.target.getAttribute('data-game'); + const setting = evt.target.getAttribute('data-setting'); + const option = evt.target.getAttribute('data-option'); + + if (evt.target.checked) { + if (!currentSettings[game][setting].includes(option)) { + currentSettings[game][setting].push(option); + } + } else { + if (currentSettings[game][setting].includes(option)) { + currentSettings[game][setting].splice(currentSettings[game][setting].indexOf(option), 1); + } + } + localStorage.setItem('weighted-settings', JSON.stringify(currentSettings)); +}; + const updateVisibleGames = () => { const settings = JSON.parse(localStorage.getItem('weighted-settings')); Object.keys(settings.game).forEach((game) => { diff --git a/WebHostLib/static/styles/weighted-settings.css b/WebHostLib/static/styles/weighted-settings.css index eca2b7cc..a78fb2e7 100644 --- a/WebHostLib/static/styles/weighted-settings.css +++ b/WebHostLib/static/styles/weighted-settings.css @@ -102,24 +102,26 @@ html{ #weighted-settings .items-wrapper .item-set-wrapper{ width: 24%; + font-weight: bold; } -#weighted-settings .items-wrapper .item-container{ +#weighted-settings .item-container{ border: 1px solid #ffffff; border-radius: 2px; width: 100%; height: 300px; overflow-y: auto; overflow-x: hidden; - margin-top: 0.25rem; + margin-top: 0.125rem; + font-weight: normal; } -#weighted-settings .items-wrapper .item-container .item-div{ +#weighted-settings .item-container .item-div{ padding: 0.125rem 0.5rem; cursor: pointer; } -#weighted-settings .items-wrapper .item-container .item-div:hover{ +#weighted-settings .item-container .item-div:hover{ background-color: rgba(0, 0, 0, 0.1); } @@ -131,6 +133,33 @@ html{ margin-bottom: 0.5rem; } +#weighted-settings .hints-div .hints-container{ + display: flex; + flex-direction: row; + justify-content: space-between; + font-weight: bold; +} + +#weighted-settings .hints-div .hints-wrapper{ + width: 32.5%; +} + +#weighted-settings .hints-div .hints-wrapper .hint-div{ + display: flex; + flex-direction: row; + cursor: pointer; +} + +#weighted-settings .hints-div .hints-wrapper .hint-div:hover{ + background-color: rgba(0, 0, 0, 0.1); +} + +#weighted-settings .hints-div .hints-wrapper .hint-div label{ + flex-grow: 1; + padding: 0.125rem 0.5rem; + cursor: pointer; +} + #weighted-settings #weighted-settings-button-row{ display: flex; flex-direction: row;