Support showing/hiding game divs based on range value for game

WebHostLib/static/assets/weightedOptions.js

@@ -19,6 +19,17 @@ window.addEventListener('load', () => {
     if (evt.target.type === 'range') {
       // Update span containing range value. All ranges have a corresponding `{rangeId}-value` span
       document.getElementById(`${evt.target.id}-value`).innerText = evt.target.value;
+
+      // If the changed option was the name of a game, determine whether to show or hide that game's div
+      if (evt.target.id.startsWith('game||')) {
+        const gameName = evt.target.id.split('||')[1];
+        const gameDiv = document.getElementById(`${gameName}-container`);
+        if (evt.target.value > 0) {
+          gameDiv.classList.remove('hidden');
+        } else {
+          gameDiv.classList.add('hidden');
+        }
+      }
     }
   });
 

WebHostLib/static/styles/weightedOptions/weightedOptions.scss

@@ -336,6 +336,10 @@ html{
     }
 }
 
+.hidden{
+    display: none;
+}
+
 @media all and (max-width: 1000px), all and (orientation: portrait){
     #weighted-options .game-options{
         justify-content: flex-start;

WebHostLib/templates/weightedOptions/weightedOptions.html

@@ -72,7 +72,7 @@ <h2>Game Select</h2>
             <div id="games-wrapper">
                 {% for world_name, world in worlds|dictsort %}
                     {% if not world.hidden and world.web.options_page == True %}
-                        <div class="world-container">
+                        <div id="{{ world_name }}-container" class="world-container hidden">
                             <h2 class="world-name">
                                 <label for="{{ world_name }}">
                                     <span class="world-collapse-arrow">▶</span>