WebHost: Add a ChecksFinder tracker (#1333)

Co-authored-by: Chris Wilson <chris@legendserver.info>

WebHostLib/static/assets/checksfinderTracker.js

@@ -0,0 +1,49 @@
+window.addEventListener('load', () => {
+  // Reload tracker every 60 seconds
+  const url = window.location;
+  setInterval(() => {
+    const ajax = new XMLHttpRequest();
+    ajax.onreadystatechange = () => {
+      if (ajax.readyState !== 4) { return; }
+
+      // Create a fake DOM using the returned HTML
+      const domParser = new DOMParser();
+      const fakeDOM = domParser.parseFromString(ajax.responseText, 'text/html');
+
+      // Update item tracker
+      document.getElementById('inventory-table').innerHTML = fakeDOM.getElementById('inventory-table').innerHTML;
+      // Update only counters in the location-table
+      let counters = document.getElementsByClassName('counter');
+      const fakeCounters = fakeDOM.getElementsByClassName('counter');
+      for (let i = 0; i < counters.length; i++) {
+        counters[i].innerHTML = fakeCounters[i].innerHTML;
+      }
+    };
+    ajax.open('GET', url);
+    ajax.send();
+}, 60000)
+
+  // Collapsible advancement sections
+  const categories = document.getElementsByClassName("location-category");
+  for (let i = 0; i < categories.length; i++) {
+    let hide_id = categories[i].id.split('-')[0];
+    if (hide_id == 'Total') {
+      continue;
+    }
+    categories[i].addEventListener('click', function() {
+      // Toggle the advancement list
+      document.getElementById(hide_id).classList.toggle("hide");
+      // Change text of the header
+      const tab_header = document.getElementById(hide_id+'-header').children[0];
+      const orig_text = tab_header.innerHTML;
+      let new_text;
+      if (orig_text.includes("▼")) {
+        new_text = orig_text.replace("▼", "▲");
+      }
+      else {
+        new_text = orig_text.replace("▲", "▼");
+      }
+      tab_header.innerHTML = new_text;
+    });
+  }
+});

WebHostLib/static/styles/checksfinderTracker.css

@@ -0,0 +1,30 @@
+#player-tracker-wrapper{
+    margin: 0;
+}
+
+#inventory-table{
+    padding: 8px 10px 2px 6px;
+    background-color: #42b149;
+    border-radius: 4px;
+    border: 2px solid black;
+}
+
+#inventory-table tr.column-headers td {
+    font-size: 1rem;
+    padding: 0 5rem 0 0;
+}
+
+#inventory-table td{
+    padding: 0 0.5rem 0.5rem;
+    font-family: LexendDeca-Light, monospace;
+    font-size: 2.5rem;
+    color: #ffffff;
+}
+
+#inventory-table td img{
+    vertical-align: middle;
+}
+
+.hide {
+    display: none;
+}