Minecraft tracker: automated location tracking and dropdown tabs

WebHostLib/static/assets/minecraftTracker.js

@@ -0,0 +1,49 @@
+window.addEventListener('load', () => {
+  // Reload tracker every 15 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();
+  }, 15000)
+
+  // 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/minecraftTracker.css

@@ -9,7 +9,7 @@
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     padding: 3px 3px 10px;
-    width: 324px;
+    width: 352px;
     background-color: #42b149;
 }
 
@@ -45,7 +45,7 @@
 }
 
 #location-table{
-    width: 324px;
+    width: 352px;
     border-left: 2px solid #000000;
     border-right: 2px solid #000000;
     border-bottom: 2px solid #000000;
@@ -55,6 +55,7 @@
     padding: 0 3px 3px;
     font-family: "Minecraftia", monospace;
     font-size: 14px;
+    cursor: default;
 }
 
 #location-table th{
@@ -69,11 +70,15 @@
     line-height: 20px;
 }
 
-#location-table td.counter{
+#location-table td.counter {
     text-align: right;
 }
 
-#location-table tr:last-child {
+#location-table td.toggle-arrow {
+    text-align: right;
+}
+
+#location-table tr.location-category:last-child {
     font-weight: bold;
 }
 
@@ -82,3 +87,15 @@
     max-width: 30px;
     max-height: 30px;
 }
+
+#location-table tbody.locations {
+    font-size: 12px;
+}
+
+#location-table td.location-name {
+    padding-left: 16px;
+}
+
+.hide {
+    display: none;
+}