Add first-class <noscript/> support to Supported Games page. Also fix css issue where the game title did not display a cursor:pointer when hovered.

WebHostLib/static/assets/supportedGames.js

@@ -1,4 +1,5 @@
 window.addEventListener('load', () => {
+  document.getElementById('js-enabled').style.display = 'block';
   const gameHeaders = document.getElementsByClassName('collapse-toggle');
   Array.from(gameHeaders).forEach((header) => {
     const gameName = header.getAttribute('data-game');

WebHostLib/static/styles/supportedGames.css

@@ -24,6 +24,10 @@
     cursor: pointer;
 }
 
+#games h2 .game-name{
+    cursor: pointer;
+}
+
 #games p.collapsed{
     display: none;
 }
@@ -51,3 +55,7 @@
 #games #page-controls button{
     margin-left: 0.5rem;
 }
+
+#games #js-enabled{
+    display: none;
+}

WebHostLib/templates/supportedGames.html

@@ -12,17 +12,25 @@
     <div id="games" class="markdown">
         <h1>Currently Supported Games</h1>
         <div>
-            <label for="game-search">Search for your game below!</label><br />
+            <label for="game-search">
+                Search for your game below!&nbsp;
+                <noscript>(You need to enable Javascript for this to work.)</noscript>
+            </label><br />
             <div id="page-controls">
                 <input id="game-search" placeholder="Search by title..." autofocus />
                 <button id="expand-all">Expand All</button>
                 <button id="collapse-all">Collapse All</button>
             </div>
         </div>
+
+        <!-- This is always written to the page, but is hidden by default. If the user has JS enabled,
+            it will be un-hidden immediately when the page is ready. -->
+        <div id="js-enabled">
         {% for game_name in worlds | title_sorted %}
         {% set world = worlds[game_name] %}
         <h2 class="collapse-toggle" data-game="{{ game_name }}">
-            <span id="{{ game_name }}-arrow" class="collapse-arrow">▶</span>&nbsp;{{ game_name }}
+            <span id="{{ game_name }}-arrow" class="collapse-arrow">▶</span>&nbsp;
+            <span class="game-name">{{ game_name }}</span>
         </h2>
         <p id="{{ game_name }}" class="collapsed">
             {{ world.__doc__ | default("No description provided.", true) }}<br />
@@ -45,4 +53,33 @@
         </p>
         {% endfor %}
         </div>
+
+        <!-- This is only printed when the user has JS disabled, allowing them to see all the information for
+            each game in a noscript-friendly way. -->
+        <noscript>
+        {% for game_name in worlds | title_sorted %}
+        {% set world = worlds[game_name] %}
+        <h2 class="collapse-toggle">{{ game_name }}</h2>
+        <p id="{{ game_name }}">
+            {{ world.__doc__ | default("No description provided.", true) }}<br />
+            <a href="{{ url_for("game_info", game=game_name, lang="en") }}">Game Page</a>
+            {% if world.web.tutorials %}
+            <span class="link-spacer">|</span>
+            <a href="{{ url_for("tutorial_landing") }}#{{ game_name }}">Setup Guides</a>
+            {% endif %}
+            {% if world.web.settings_page is string %}
+            <span class="link-spacer">|</span>
+            <a href="{{ world.web.settings_page }}">Settings Page</a>
+            {% elif world.web.settings_page %}
+            <span class="link-spacer">|</span>
+            <a href="{{ url_for("player_settings", game=game_name) }}">Settings Page</a>
+            {% endif %}
+            {% if world.web.bug_report_page %}
+            <span class="link-spacer">|</span>
+            <a href="{{ world.web.bug_report_page }}">Report a Bug</a>
+            {% endif %}
+        </p>
+        {% endfor %}
+        </noscript>
+    </div>
 {% endblock %}