Improve styling on weighted-settings

WebHostLib/static/assets/weighted-settings.js

@@ -95,14 +95,13 @@ const createDefaultSettings = (settingData) => {
       newSettings[game].local_items = [];
       newSettings[game].non_local_items = [];
       newSettings[game].start_hints = [];
+      newSettings[game].start_location_hints = [];
     }
 
     localStorage.setItem('weighted-settings', JSON.stringify(newSettings));
   }
 };
 
-// TODO: Include item configs: start_inventory, local_items, non_local_items, start_hints
-// TODO: Include location configs: exclude_locations
 const buildUI = (settingData) => {
   // Build the game-choice div
   buildGameChoice(settingData.games);
@@ -133,12 +132,17 @@ const buildUI = (settingData) => {
 
     const itemsDiv = buildItemsDiv(game, settingData.games[game].gameItems);
     gameDiv.appendChild(itemsDiv);
+
+    const hintsDiv = buildHintsDiv(game, settingData.games[game].gameItems, settingData.games[game].gameLocations);
+    gameDiv.appendChild(hintsDiv);
+
     gamesWrapper.appendChild(gameDiv);
 
     collapseButton.addEventListener('click', () => {
       collapseButton.classList.add('invisible');
       weightedSettingsDiv.classList.add('invisible');
       itemsDiv.classList.add('invisible');
+      hintsDiv.classList.add('invisible');
       expandButton.classList.remove('invisible');
     });
 
@@ -146,6 +150,7 @@ const buildUI = (settingData) => {
       collapseButton.classList.remove('invisible');
       weightedSettingsDiv.classList.remove('invisible');
       itemsDiv.classList.remove('invisible');
+      hintsDiv.classList.remove('invisible');
       expandButton.classList.add('invisible');
     });
   });
@@ -621,6 +626,24 @@ const itemDropHandler = (evt) => {
   localStorage.setItem('weighted-settings', JSON.stringify(currentSettings));
 };
 
+const buildHintsDiv = (game, items, locations) => {
+  const hintsDiv = document.createElement('div');
+  hintsDiv.classList.add('hints-div');
+  const hintsHeader = document.createElement('h3');
+  hintsHeader.innerText = 'Item & Location Hints';
+  hintsDiv.appendChild(hintsHeader);
+  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.';
+  hintsDiv.appendChild(hintsDescription);
+
+  const itemHintsDiv = document.createElement('div');
+
+  hintsDiv.appendChild(itemHintsDiv);
+  return hintsDiv;
+};
+
 const updateVisibleGames = () => {
   const settings = JSON.parse(localStorage.getItem('weighted-settings'));
   Object.keys(settings.game).forEach((game) => {

WebHostLib/static/styles/weighted-settings.css

@@ -111,10 +111,11 @@ html{
     height: 300px;
     overflow-y: auto;
     overflow-x: hidden;
+    margin-top: 0.25rem;
 }
 
 #weighted-settings .items-wrapper .item-container .item-div{
-    padding: 0.15rem;
+    padding: 0.125rem 0.5rem;
     cursor: pointer;
 }
 
@@ -122,6 +123,14 @@ html{
     background-color: rgba(0, 0, 0, 0.1);
 }
 
+#weighted-settings .hints-div{
+    margin-top: 2rem;
+}
+
+#weighted-settings .hints-div h3{
+    margin-bottom: 0.5rem;
+}
+
 #weighted-settings #weighted-settings-button-row{
     display: flex;
     flex-direction: row;