[WebHost] Add search filter and collapse button to Supported Games page (#2215)

* Add search filter and collapse button to Supported Games page

* Autofocus search input, fix bug with arrow display when searching

* Add "Expand All" and "Collapse All" buttons. Buttons respect visible games.

WebHostLib/templates/supportedGames.html

@@ -4,16 +4,27 @@
     <title>Supported Games</title>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/markdown.css") }}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/supportedGames.css") }}" />
+    <script type="application/ecmascript" src="{{ url_for('static', filename="assets/supportedGames.js") }}"></script>
 {% endblock %}
 
 {% block body %}
     {% include 'header/oceanHeader.html' %}
     <div id="games" class="markdown">
         <h1>Currently Supported Games</h1>
+        <div>
+            <label for="game-search">Search for your game below!</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>
         {% for game_name in worlds | title_sorted %}
         {% set world = worlds[game_name] %}
-        <h2>{{ game_name }}</h2>
-        <p>
+        <h2 class="collapse-toggle" data-game="{{ game_name }}">
+            <span id="{{ game_name }}-arrow" class="collapse-arrow">▶</span>&nbsp;{{ game_name }}
+        </h2>
+        <p id="{{ game_name }}" class="collapsed">
             {{ 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 %}