WebHost: Add SC2WoL game specific tracker (#1270)

WebHostLib/static/assets/sc2wolTracker.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/sc2wolTracker.css

@@ -0,0 +1,110 @@
+#player-tracker-wrapper{
+    margin: 0;
+}
+
+#inventory-table{
+    border-top: 2px solid #000000;
+    border-left: 2px solid #000000;
+    border-right: 2px solid #000000;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding: 3px 3px 10px;
+    width: 500px;
+    background-color: #525494;
+}
+
+#inventory-table td{
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    vertical-align: middle;
+}
+
+#inventory-table td.title{
+    padding-top: 10px;
+    height: 20px;
+    font-family: "JuraBook", monospace;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+#inventory-table img{
+    height: 100%;
+    max-width: 40px;
+    max-height: 40px;
+    border: 1px solid #000000;
+    filter: grayscale(100%) contrast(75%) brightness(20%);
+}
+
+#inventory-table img.acquired{
+    filter: none;
+}
+
+#inventory-table div.counted-item {
+    position: relative;
+}
+
+#inventory-table div.item-count {
+    text-align: left;
+    color: black;
+    font-family: "JuraBook", monospace;
+    font-weight: bold;
+}
+
+#location-table{
+    width: 500px;
+    border-left: 2px solid #000000;
+    border-right: 2px solid #000000;
+    border-bottom: 2px solid #000000;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    background-color: #525494;
+    padding: 10px 3px 3px;
+    font-family: "JuraBook", monospace;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: default;
+}
+
+#location-table th{
+    vertical-align: middle;
+    text-align: left;
+    padding-right: 10px;
+}
+
+#location-table td{
+    padding-top: 2px;
+    padding-bottom: 2px;
+    line-height: 20px;
+}
+
+#location-table td.counter {
+    text-align: right;
+    font-size: 14px;
+}
+
+#location-table td.toggle-arrow {
+    text-align: right;
+}
+
+#location-table tr#Total-header {
+    font-weight: bold;
+}
+
+#location-table img{
+    height: 100%;
+    max-width: 30px;
+    max-height: 30px;
+}
+
+#location-table tbody.locations {
+    font-size: 16px;
+}
+
+#location-table td.location-name {
+    padding-left: 16px;
+}
+
+.hide {
+    display: none;
+}