From 974bab2b2490eb8f9854ff5c8668bb66c6d1f305 Mon Sep 17 00:00:00 2001
From: Chris Wilson <chris@legendserver.info>
Date: Mon, 25 Sep 2023 22:15:00 -0400
Subject: [PATCH] [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/static/assets/supportedGames.js  | 83 +++++++++++++++++++++
 WebHostLib/static/styles/supportedGames.css | 20 +++++
 WebHostLib/templates/supportedGames.html    | 15 +++-
 3 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 WebHostLib/static/assets/supportedGames.js

diff --git a/WebHostLib/static/assets/supportedGames.js b/WebHostLib/static/assets/supportedGames.js
new file mode 100644
index 00000000..1acf0e0c
--- /dev/null
+++ b/WebHostLib/static/assets/supportedGames.js
@@ -0,0 +1,83 @@
+window.addEventListener('load', () => {
+  const gameHeaders = document.getElementsByClassName('collapse-toggle');
+  Array.from(gameHeaders).forEach((header) => {
+    const gameName = header.getAttribute('data-game');
+    header.addEventListener('click', () => {
+      const gameArrow = document.getElementById(`${gameName}-arrow`);
+      const gameInfo = document.getElementById(gameName);
+      if (gameInfo.classList.contains('collapsed')) {
+        gameArrow.innerText = '▼';
+        gameInfo.classList.remove('collapsed');
+      } else {
+        gameArrow.innerText = '▶';
+        gameInfo.classList.add('collapsed');
+      }
+    });
+  });
+
+  // Handle game filter input
+  const gameSearch = document.getElementById('game-search');
+  gameSearch.value = '';
+
+  gameSearch.addEventListener('input', (evt) => {
+    if (!evt.target.value.trim()) {
+      // If input is empty, display all collapsed games
+      return Array.from(gameHeaders).forEach((header) => {
+        header.style.display = null;
+        const gameName = header.getAttribute('data-game');
+        document.getElementById(`${gameName}-arrow`).innerText = '▶';
+        document.getElementById(gameName).classList.add('collapsed');
+      });
+    }
+
+    // Loop over all the games
+    Array.from(gameHeaders).forEach((header) => {
+      const gameName = header.getAttribute('data-game');
+      const gameArrow = document.getElementById(`${gameName}-arrow`);
+      const gameInfo = document.getElementById(gameName);
+
+      // If the game name includes the search string, display the game. If not, hide it
+      if (gameName.toLowerCase().includes(evt.target.value.toLowerCase())) {
+        header.style.display = null;
+        gameArrow.innerText = '▼';
+        gameInfo.classList.remove('collapsed');
+      } else {
+        console.log(header);
+        header.style.display = 'none';
+        gameArrow.innerText = '▶';
+        gameInfo.classList.add('collapsed');
+      }
+    });
+  });
+
+  document.getElementById('expand-all').addEventListener('click', expandAll);
+  document.getElementById('collapse-all').addEventListener('click', collapseAll);
+});
+
+const expandAll = () => {
+  const gameHeaders = document.getElementsByClassName('collapse-toggle');
+  // Loop over all the games
+    Array.from(gameHeaders).forEach((header) => {
+      const gameName = header.getAttribute('data-game');
+      const gameArrow = document.getElementById(`${gameName}-arrow`);
+      const gameInfo = document.getElementById(gameName);
+
+      if (header.style.display === 'none') { return; }
+      gameArrow.innerText = '▼';
+      gameInfo.classList.remove('collapsed');
+    });
+};
+
+const collapseAll = () => {
+  const gameHeaders = document.getElementsByClassName('collapse-toggle');
+  // Loop over all the games
+    Array.from(gameHeaders).forEach((header) => {
+      const gameName = header.getAttribute('data-game');
+      const gameArrow = document.getElementById(`${gameName}-arrow`);
+      const gameInfo = document.getElementById(gameName);
+
+      if (header.style.display === 'none') { return; }
+      gameArrow.innerText = '▶';
+      gameInfo.classList.add('collapsed');
+    });
+};
diff --git a/WebHostLib/static/styles/supportedGames.css b/WebHostLib/static/styles/supportedGames.css
index f86ab581..1e9a98c1 100644
--- a/WebHostLib/static/styles/supportedGames.css
+++ b/WebHostLib/static/styles/supportedGames.css
@@ -18,6 +18,16 @@
     margin-bottom: 2px;
 }
 
+#games h2 .collapse-arrow{
+    font-size: 20px;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+#games p.collapsed{
+    display: none;
+}
+
 #games a{
     font-size: 16px;
 }
@@ -31,3 +41,13 @@
     line-height: 25px;
     margin-bottom: 7px;
 }
+
+#games #page-controls{
+    display: flex;
+    flex-direction: row;
+    margin-top: 0.25rem;
+}
+
+#games #page-controls button{
+    margin-left: 0.5rem;
+}
diff --git a/WebHostLib/templates/supportedGames.html b/WebHostLib/templates/supportedGames.html
index 82f6348d..63b70216 100644
--- a/WebHostLib/templates/supportedGames.html
+++ b/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 %}