Much more work on weighted-setting page. Still needs support for range options and item/location settings.

WebHostLib/options.py

@@ -103,7 +103,7 @@ def create():
 
         weighted_settings["baseOptions"]["game"][game_name] = 0
         weighted_settings["games"][game_name] = {}
-        weighted_settings["games"][game_name]["gameOptions"] = game_options
+        weighted_settings["games"][game_name]["gameSettings"] = game_options
         weighted_settings["games"][game_name]["gameItems"] = tuple(world.item_name_to_id.keys())
         weighted_settings["games"][game_name]["gameLocations"] = tuple(world.location_name_to_id.keys())
 

WebHostLib/static/assets/weighted-settings.js

@@ -18,7 +18,8 @@ window.addEventListener('load', () => {
 
     // Page setup
     createDefaultSettings(results);
-    // buildUI(results);
+    buildUI(results);
+    updateVisibleGames();
     adjustHeaderWidth();
 
     // Event listeners
@@ -29,7 +30,9 @@ window.addEventListener('load', () => {
     // Name input field
     const weightedSettings = JSON.parse(localStorage.getItem('weighted-settings'));
     const nameInput = document.getElementById('player-name');
-    nameInput.addEventListener('keyup', (event) => updateBaseSetting(event));
+    nameInput.setAttribute('data-type', 'data');
+    nameInput.setAttribute('data-setting', 'name');
+    nameInput.addEventListener('keyup', updateBaseSetting);
     nameInput.value = weightedSettings.name;
   });
 });
@@ -61,9 +64,27 @@ const createDefaultSettings = (settingData) => {
       // Initialize game object
       newSettings[game] = {};
 
-      // Transfer game options
+      // Transfer game settings
-      for (let gameOption of Object.keys(settingData.games[game].gameOptions)){
+      for (let gameSetting of Object.keys(settingData.games[game].gameSettings)){
-        newSettings[game][gameOption] = settingData.games[game].gameOptions[gameOption].defaultValue;
+        newSettings[game][gameSetting] = {};
+
+        const setting = settingData.games[game].gameSettings[gameSetting];
+        switch(setting.type){
+          case 'select':
+            setting.options.forEach((option) => {
+              newSettings[game][gameSetting][option.value] =
+                (setting.hasOwnProperty('defaultValue') && setting.defaultValue === option.value) ? 25 : 0;
+            });
+            break;
+          case 'range':
+            for (let i = setting.min; i <= setting.max; ++i){
+              newSettings[game][gameSetting][i] =
+                (setting.hasOwnProperty('defaultValue') && setting.defaultValue === i) ? 25 : 0;
+            }
+            break;
+          default:
+            console.error(`Unknown setting type for ${game} setting ${gameSetting}: ${setting.type}`);
+        }
       }
 
       newSettings[game].start_inventory = [];
@@ -77,121 +98,212 @@ const createDefaultSettings = (settingData) => {
   }
 };
 
-// TODO: Update this function for use with weighted-settings
 // TODO: Include item configs: start_inventory, local_items, non_local_items, start_hints
 // TODO: Include location configs: exclude_locations
 const buildUI = (settingData) => {
-  // Game Options
+  // Build the game-choice div
-  const leftGameOpts = {};
+  buildGameChoice(settingData.games);
-  const rightGameOpts = {};
+
-  Object.keys(settingData.gameOptions).forEach((key, index) => {
+  const gamesWrapper = document.getElementById('games-wrapper');
-    if (index < Object.keys(settingData.gameOptions).length / 2) { leftGameOpts[key] = settingData.gameOptions[key]; }
+  Object.keys(settingData.games).forEach((game) => {
-    else { rightGameOpts[key] = settingData.gameOptions[key]; }
+    // Create game div, invisible by default
+    const gameDiv = document.createElement('div');
+    gameDiv.setAttribute('id', `${game}-div`);
+    gameDiv.classList.add('game-div');
+    gameDiv.classList.add('invisible');
+
+    const gameHeader = document.createElement('h2');
+    gameHeader.innerText = game;
+    gameDiv.appendChild(gameHeader);
+
+    gameDiv.appendChild(buildOptionsDiv(game, settingData.games[game].gameSettings));
+    gamesWrapper.appendChild(gameDiv);
   });
-  document.getElementById('game-options-left').appendChild(buildOptionsTable(leftGameOpts));
-  document.getElementById('game-options-right').appendChild(buildOptionsTable(rightGameOpts));
 };
 
-const buildOptionsTable = (settings, romOpts = false) => {
+const buildGameChoice = (games) => {
-  const currentSettings = JSON.parse(localStorage.getItem(gameName));
+  const settings = JSON.parse(localStorage.getItem('weighted-settings'));
+  const gameChoiceDiv = document.getElementById('game-choice');
+  const h2 = document.createElement('h2');
+  h2.innerText = 'Game Select';
+  gameChoiceDiv.appendChild(h2);
+
+  const gameSelectDescription = document.createElement('p');
+  gameSelectDescription.classList.add('setting-description');
+  gameSelectDescription.innerText = 'Choose which games you might be required to play'
+  gameChoiceDiv.appendChild(gameSelectDescription);
+
+  // Build the game choice table
   const table = document.createElement('table');
   const tbody = document.createElement('tbody');
 
-  Object.keys(settings).forEach((setting) => {
+  Object.keys(games).forEach((game) => {
     const tr = document.createElement('tr');
+    const tdLeft = document.createElement('td');
+    tdLeft.classList.add('td-left');
+    tdLeft.innerText = game;
+    tr.appendChild(tdLeft);
 
-    // td Left
+    const tdMiddle = document.createElement('td');
-    const tdl = document.createElement('td');
+    tdMiddle.classList.add('td-middle');
-    const label = document.createElement('label');
+    const range = document.createElement('input');
-    label.setAttribute('for', setting);
+    range.setAttribute('type', 'range');
-    label.setAttribute('data-tooltip', settings[setting].description);
+    range.setAttribute('min', 0);
-    label.innerText = `${settings[setting].displayName}:`;
+    range.setAttribute('max', 50);
-    tdl.appendChild(label);
+    range.setAttribute('data-type', 'weight');
-    tr.appendChild(tdl);
+    range.setAttribute('data-setting', 'game');
+    range.setAttribute('data-option', game);
+    range.value = settings.game[game];
+    range.addEventListener('change', (evt) => {
+      updateBaseSetting(evt);
+      updateVisibleGames(); // Show or hide games based on the new settings
+    });
+    tdMiddle.appendChild(range);
+    tr.appendChild(tdMiddle);
 
-    // td Right
+    const tdRight = document.createElement('td');
-    const tdr = document.createElement('td');
+    tdRight.setAttribute('id', `game-${game}`)
-    let element = null;
+    tdRight.classList.add('td-right');
-
+    tdRight.innerText = range.value;
-    switch(settings[setting].type){
+    tr.appendChild(tdRight);
-      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);
   });
 
   table.appendChild(tbody);
-  return table;
+  gameChoiceDiv.appendChild(table);
+};
+
+const buildOptionsDiv = (game, settings) => {
+  const currentSettings = JSON.parse(localStorage.getItem('weighted-settings'));
+  const optionsWrapper = document.createElement('div');
+  optionsWrapper.classList.add('settings-wrapper');
+
+  Object.keys(settings).forEach((settingName) => {
+    const setting = settings[settingName];
+    const settingWrapper = document.createElement('div');
+    settingWrapper.classList.add('setting-wrapper');
+
+    switch(setting.type){
+      case 'select':
+        const settingNameHeader = document.createElement('h4');
+        settingNameHeader.innerText = setting.displayName;
+        settingWrapper.appendChild(settingNameHeader);
+
+        const settingDescription = document.createElement('p');
+        settingDescription.classList.add('setting-description');
+        settingDescription.innerText = setting.description.replace(/(\n)/g, ' ');
+        settingWrapper.appendChild(settingDescription);
+
+        const optionTable = document.createElement('table');
+        const tbody = document.createElement('tbody');
+
+        // Add a weight range for each option
+        setting.options.forEach((option) => {
+          const tr = document.createElement('tr');
+          const tdLeft = document.createElement('td');
+          tdLeft.classList.add('td-left');
+          tdLeft.innerText = option.name;
+          tr.appendChild(tdLeft);
+
+          const tdMiddle = document.createElement('td');
+          tdMiddle.classList.add('td-middle');
+          const range = document.createElement('input');
+          range.setAttribute('type', 'range');
+          range.setAttribute('data-game', game);
+          range.setAttribute('data-setting', settingName);
+          range.setAttribute('data-option', option.value);
+          range.setAttribute('data-type', setting.type);
+          range.setAttribute('min', 0);
+          range.setAttribute('max', 50);
+          range.addEventListener('change', updateGameSetting);
+          range.value = currentSettings[game][settingName][option.value];
+          tdMiddle.appendChild(range);
+          tr.appendChild(tdMiddle);
+
+          const tdRight = document.createElement('td');
+          tdRight.setAttribute('id', `${game}-${settingName}-${option.value}`)
+          tdRight.classList.add('td-right');
+          tdRight.innerText = range.value;
+          tr.appendChild(tdRight);
+
+          tbody.appendChild(tr);
+        });
+
+        optionTable.appendChild(tbody);
+        settingWrapper.appendChild(optionTable);
+        optionsWrapper.appendChild(settingWrapper);
+        break;
+
+      case 'range':
+        // TODO: Include range settings
+        break;
+
+      default:
+        console.error(`Unknown setting type for ${game} setting ${setting}: ${settings[setting].type}`);
+        return;
+    }
+  });
+
+  return optionsWrapper;
+};
+
+const updateVisibleGames = () => {
+  const settings = JSON.parse(localStorage.getItem('weighted-settings'));
+  Object.keys(settings.game).forEach((game) => {
+    const gameDiv = document.getElementById(`${game}-div`);
+    (parseInt(settings.game[game], 10) > 0) ?
+      gameDiv.classList.remove('invisible') :
+      gameDiv.classList.add('invisible')
+  });
 };
 
 const updateBaseSetting = (event) => {
-  const options = JSON.parse(localStorage.getItem(gameName));
+  const settings = JSON.parse(localStorage.getItem('weighted-settings'));
-  options[event.target.getAttribute('data-key')] = isNaN(event.target.value) ?
+  const setting = event.target.getAttribute('data-setting');
-    event.target.value : parseInt(event.target.value);
+  const option = event.target.getAttribute('data-option');
-  localStorage.setItem(gameName, JSON.stringify(options));
+  const type = event.target.getAttribute('data-type');
+
+  switch(type){
+    case 'weight':
+      settings[setting][option] = isNaN(event.target.value) ? event.target.value : parseInt(event.target.value, 10);
+      document.getElementById(`${setting}-${option}`).innerText = event.target.value;
+      break;
+    case 'data':
+      settings[setting] = isNaN(event.target.value) ? event.target.value : parseInt(event.target.value, 10);
+      break;
+  }
+
+  localStorage.setItem('weighted-settings', JSON.stringify(settings));
 };
 
 const updateGameSetting = (event) => {
-  const options = JSON.parse(localStorage.getItem(gameName));
+  const options = JSON.parse(localStorage.getItem('weighted-settings'));
-  options[gameName][event.target.getAttribute('data-key')] = isNaN(event.target.value) ?
+  const game = event.target.getAttribute('data-game');
+  const setting = event.target.getAttribute('data-setting');
+  const option = event.target.getAttribute('data-option');
+  const type = event.target.getAttribute('data-type');
+  switch (type){
+    case 'select':
+      console.log(`${game}-${setting}-${option}`);
+      document.getElementById(`${game}-${setting}-${option}`).innerText = event.target.value;
+      break;
+    case 'range':
+      break;
+  }
+  options[game][setting][option] = isNaN(event.target.value) ?
       event.target.value : parseInt(event.target.value, 10);
-  localStorage.setItem(gameName, JSON.stringify(options));
+  localStorage.setItem('weighted-settings', JSON.stringify(options));
 };
 
 const exportSettings = () => {
-  const settings = JSON.parse(localStorage.getItem(gameName));
+  const settings = JSON.parse(localStorage.getItem('weighted-settings'));
-  if (!settings.name || settings.name.trim().length === 0) { settings.name = "noname"; }
+  if (!settings.name || settings.name.trim().length === 0 || settings.name.toLowerCase().trim() === 'player') {
+    const userMessage = document.getElementById('user-message');
+    userMessage.innerText = 'You forgot to set your player name at the top of the page!';
+    userMessage.classList.add('visible');
+    window.scrollTo(0, 0);
+    return;
+  }
   const yamlText = jsyaml.safeDump(settings, { noCompatMode: true }).replaceAll(/'(\d+)':/g, (x, y) => `${y}:`);
   download(`${document.getElementById('player-name').value}.yaml`, yamlText);
 };
@@ -209,8 +321,8 @@ const download = (filename, text) => {
 
 const generateGame = (raceMode = false) => {
   axios.post('/api/generate', {
-    weights: { player: localStorage.getItem(gameName) },
+    weights: { player: localStorage.getItem('weighted-settings') },
-    presetData: { player: localStorage.getItem(gameName) },
+    presetData: { player: localStorage.getItem('weighted-settings') },
     playerCount: 1,
     race: raceMode ? '1' : '0',
   }).then((response) => {

WebHostLib/static/styles/weighted-settings.css

@@ -14,6 +14,35 @@ html{
     color: #eeffeb;
 }
 
+#weighted-settings #games-wrapper{
+    width: 100%;
+}
+
+#weighted-settings .setting-wrapper{
+    width: 100%;
+    margin-bottom: 2rem;
+}
+
+#weighted-settings .setting-description{
+    font-weight: bold;
+    margin: 0 0 1rem;
+}
+
+#weighted-settings table{
+    width: 100%;
+}
+
+#weighted-settings table .td-left{
+    padding-right: 1rem;
+}
+
+#weighted-settings table .td-middle{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    padding-right: 1rem;
+}
+
 #weighted-settings #weighted-settings-button-row{
     display: flex;
     flex-direction: row;
@@ -94,42 +123,11 @@ html{
 
 #weighted-settings .game-options, #weighted-settings .rom-options{
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
 }
 
-#weighted-settings .left, #weighted-settings .right{
+#weighted-settings .invisible{
-    flex-grow: 1;
+    display: none;
-}
-
-#weighted-settings table .select-container{
-    display: flex;
-    flex-direction: row;
-}
-
-#weighted-settings table .select-container select{
-    min-width: 200px;
-    flex-grow: 1;
-}
-
-#weighted-settings table .range-container{
-    display: flex;
-    flex-direction: row;
-}
-
-#weighted-settings table .range-container input[type=range]{
-    flex-grow: 1;
-}
-
-#weighted-settings table .range-value{
-    min-width: 20px;
-    margin-left: 0.25rem;
-}
-
-#weighted-settings table label{
-    display: block;
-    min-width: 200px;
-    margin-right: 4px;
-    cursor: default;
 }
 
 @media all and (max-width: 1000px), all and (orientation: portrait){
@@ -138,10 +136,6 @@ html{
         flex-wrap: wrap;
     }
 
-    #weighted-settings .left, #weighted-settings .right{
-        flex-grow: unset;
-    }
-
     #game-options table label{
         display: block;
         min-width: 200px;

WebHostLib/templates/weighted-settings.html

@@ -24,15 +24,13 @@
             <input id="player-name" placeholder="Player Name" data-key="name" maxlength="16" />
         </p>
 
-        <div id="game-choices">
+        <div id="game-choice">
             <!-- User chooses games by weight -->
         </div>
 
         <!-- To be generated and populated per-game with weight > 0 -->
-        <h2>(Game Name) Options</h2>
+        <div id="games-wrapper">
-        <div class="game-options">
+
-            <div class="left"></div>
-            <div class="right"></div>
         </div>
 
         <div id="player-settings-button-row">