diff --git a/WebHostLib/static/assets/playerTracker.js b/WebHostLib/static/assets/playerTracker.js
index 212df549..3f01f93c 100644
--- a/WebHostLib/static/assets/playerTracker.js
+++ b/WebHostLib/static/assets/playerTracker.js
@@ -1,3 +1,20 @@
window.addEventListener('load', () => {
- // setTimeout(() => window.location.reload(), 15000);
+ 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 and location trackers
+ document.getElementById('inventory-table').innerHTML = fakeDOM.getElementById('inventory-table').innerHTML;
+ document.getElementById('location-table').innerHTML = fakeDOM.getElementById('location-table').innerHTML;
+
+ };
+ ajax.open('GET', url);
+ ajax.send();
+ }, 15000)
});
diff --git a/WebHostLib/static/styles/playerTracker.css b/WebHostLib/static/styles/playerTracker.css
index 5929495c..8c3c97b9 100644
--- a/WebHostLib/static/styles/playerTracker.css
+++ b/WebHostLib/static/styles/playerTracker.css
@@ -1,12 +1,16 @@
#player-tracker-wrapper{
-
+ margin: 0;
}
#inventory-table{
- border: 2px solid black;
- border-radius: 4px;
- margin-bottom: 5px;
- width: 250px;
+ 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: 260px;
+ background-color: #42b149;
}
#inventory-table td{
@@ -33,24 +37,27 @@
}
#location-table{
- width: 250px;
- border: 2px solid black;
- border-radius: 4px;
+ width: 260px;
+ 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: #42b149;
+ padding: 0 3px 3px;
}
#location-table th{
vertical-align: middle;
- text-align: right;
+ text-align: center;
+ padding-right: 10px;
}
#location-table td{
padding-top: 2px;
padding-bottom: 2px;
-}
-
-#location-table th.counter{
- padding-right: 10px;
- text-align: center;
+ padding-right: 5px;
+ line-height: 20px;
}
#location-table td.counter{
diff --git a/WebHostLib/templates/playerTracker.html b/WebHostLib/templates/playerTracker.html
index ce6d74a0..b297f7cd 100644
--- a/WebHostLib/templates/playerTracker.html
+++ b/WebHostLib/templates/playerTracker.html
@@ -11,15 +11,10 @@
 |
-
-
- |
+  |
+  |
 |
 |
-  |
 |
@@ -47,7 +42,14 @@
 |
 |
 |
-  |
+  |
+
+
+  |
+  |
+  |
+  |
+  |
@@ -57,83 +59,18 @@
 |
 |
-
- | Hyrule Castle |
- {{ checks_done["Hyrule Castle"] }} / {{ checks_in_area["Hyrule Castle"] }} |
- N/A |
- |
-
-
- | Eastern Palace |
- {{ checks_done["Eastern Palace"] }} / {{ checks_in_area["Eastern Palace"] }} |
- 0 / 0 |
- |
-
-
- | Desert Palace |
- {{ checks_done["Desert Palace"] }} / {{ checks_in_area["Desert Palace"] }} |
- 0 / 0 |
- |
-
-
- | Tower of Hera |
- {{ checks_done["Tower of Hera"] }} / {{ checks_in_area["Tower of Hera"] }} |
- 0 / 0 |
- |
-
-
- | Agahnim's Tower |
- {{ checks_done["Agahnims Tower"] }} / {{ checks_in_area["Agahnims Tower"] }} |
- N/A |
- |
-
-
- | Palace of Darkness |
- {{ checks_done["Palace of Darkness"] }} / {{ checks_in_area["Palace of Darkness"] }} |
- 0 / 0 |
- |
-
-
- | Swamp Palace |
- {{ checks_done["Swamp Palace"] }} / {{ checks_in_area["Swamp Palace"] }} |
- 0 / 0 |
- |
-
-
- | Skull Woods |
- {{ checks_done["Skull Woods"] }} / {{ checks_in_area["Skull Woods"] }} |
- 0 / 0 |
- |
-
-
- | Thieves' Town |
- {{ checks_done["Thieves Town"] }} / {{ checks_in_area["Thieves Town"] }} |
- 0 / 0 |
- |
-
-
- | Ice Palace |
- {{ checks_done["Ice Palace"] }} / {{ checks_in_area["Ice Palace"] }} |
- 0 / 0 |
- |
-
-
- | Misery Mire |
- {{ checks_done["Misery Mire"] }} / {{ checks_in_area["Misery Mire"] }} |
- 0 / 0 |
- |
-
-
- | Turtle Rock |
- {{ checks_done["Turtle Rock"] }} / {{ checks_in_area["Turtle Rock"] }} |
- 0 / 0 |
- |
-
- | Ganon's Tower |
- {{ checks_done["Ganons Tower"] }} / {{ checks_in_area["Ganons Tower"] }} |
- 0 / 0 |
- |
-
+ {% for area in sp_areas %}
+
+ | {{ area }} |
+ {{ checks_done[area] }} / {{ checks_in_area[area] }} |
+
+ {{ inventory[small_key_ids[area]] if area in key_locations else 'N/A' }}
+ |
+
+ {{ '✔' if area in big_key_locations and inventory[big_key_ids[area]] else ('N/A' if area not in big_key_locations else '') }}
+ |
+
+ {% endfor %}