Add github update indicator

index.html

@@ -230,8 +230,10 @@
                     <p>
                         Problems? Suggestions? Head over to <a href="https://github.com/PyroNicampt/DV-Community-Map/issues">the issue tracker</a> and see if it's already there, or submit if not. Or contribute a fix yourself if you really want!
                     </p>
-                    <hr style="margin-top: 5px;">
+                    <hr style="margin: 5px 0;">
                     Hover over tracks and objects for detailed information.
+                    <hr style="margin: 5px 0;">
+                    Last Updated: <span id="lastUpdate"></span>
                 </div>
                 <div class="panel">
                     <h3>Key</h3>

js/utillib.js

@@ -42,6 +42,32 @@ export function gradeToClass(grade){
     return 'flat';
 }
 
+/**
+ * Outputs an easy to read time interval between `date1` and `date2`
+ * @param {Date} date 
+ */
+export function formattedTimeBetweenDates(date1, date2){
+    let interval = (date2 - date1)/1000;
+    if(interval < 0) interval *= -1;
+    let finalInterval = Math.floor(interval);
+    if(interval < 60) return finalInterval+(finalInterval == 1 ? ' second' : ' seconds');
+    interval /= 60;
+    finalInterval = Math.floor(interval);
+    if(interval < 60) return finalInterval+(finalInterval == 1 ? ' minute' : ' minutes');
+    interval /= 60;
+    finalInterval = Math.floor(interval);
+    if(interval < 24) return finalInterval+(finalInterval == 1 ? ' hour' : ' hours');
+    interval /= 24;
+    finalInterval = Math.floor(interval);
+    if(interval < 7) return finalInterval+(finalInterval == 1 ? ' day' : ' days');
+    finalInterval = Math.floor(interval/7);
+    if(interval < 30.4375) return finalInterval+(finalInterval == 1 ? ' week' : ' weeks');
+    finalInterval = Math.floor(interval/30.4375);
+    if(interval < 365.25) return finalInterval+(finalInterval == 1 ? ' month' : ' months');
+    finalInterval = Math.floor(interval/365.25);
+    return finalInterval+(finalInterval == 1 ? ' year' : ' years');
+}
+
 export function radiusToSpeed(radius){
     if(radius < 50) return 10;
     else if(radius < 70) return 20;

legend.js

@@ -88,6 +88,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     legendButtonEvent();
     if(document.body.clientWidth <= 700) legendButtonEvent();
     populateKey();
+    setLastUpdateData();
 });
 
 function addSettingEntry(thisSetting, parent, indent=0){
@@ -130,6 +131,24 @@ function addSettingEntry(thisSetting, parent, indent=0){
     }
 }
 
+let pageLoadUpdateDate = null;
+async function setLastUpdateData(){
+    let commits = await (await fetch(new Request('https://api.github.com/repos/PyroNicampt/DV-Community-Map/commits'))).json();
+    let lastUpdateElement = document.getElementById('lastUpdate');
+    let updateDate = new Date(commits[0].commit.author.date);
+    
+    lastUpdateElement.innerHTML = `<a href="https://github.com/PyroNicampt/DV-Community-Map/commits/main/" title="${updateDate.toString()}">${Utils.formattedTimeBetweenDates(new Date(), updateDate)} ago</a>`;
+    if(pageLoadUpdateDate == null){
+        pageLoadUpdateDate = updateDate;
+    }else{
+        if(updateDate.valueOf() != pageLoadUpdateDate.valueOf()){
+            lastUpdateElement.innerHTML += ' Reload page to see changes!';
+        }
+    }
+
+    setTimeout(() => {setLastUpdateData()}, Math.min(Math.max(120000, new Date().valueOf()-updateDate.valueOf()), 7200000));
+}
+
 function populateKey(){
     addKeyEntry(null, '<span style="font-size:smaller">(Grade arrows point uphill)</span>');
     const getGradeValue = gradeIndex => {return Math.round(Utils.gradeIncrements[Utils.gradeIncrements.length-gradeIndex-1]*10000)/100};