Added update detector

index.html

@@ -196,6 +196,16 @@
         </form>
       </div>
     </div>
+    <div class="scrim-over-- scr-update--">
+      <div class="dialog" id="timerdia">
+        <p class="dlg-top">There's an update!</p>
+        <p>You should restart - there's a new update of FunnyClock².</p>
+        <br />
+        <div>
+          <button onclick="location.reload(true)">RELOAD</button>
+        </div>
+      </div>
+    </div>
     <div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div>
     <script>
 $(".poplight").draggable({
@@ -342,5 +352,6 @@ function addCheckbox(obj) {
 }
     </script>
     <script src="./canvas.js"></script>
+    <script src="./update.js"></script>
   </body>
 </html>

styles/dialog.css

@@ -40,13 +40,13 @@
   margin: 8px 0;
 }
 
-.dialog form div {
+.dialog div {
   text-align: right;
   margin-top: 8px;
   box-sizing: border-box;
 }
 
-.dialog form div input[type=submit] {
+.dialog div input[type=submit], .dialog div button {
   margin: 0;
   padding: 8px;
   height: 32px;
@@ -59,15 +59,15 @@
   transition: background-color 0.125s, color 0.125s;
 }
 
-.dialog form div input:focus {
+.dialog div input:focus {
   background-color: #00000020;
 }
 
-.dialog form div input:hover {
+.dialog div input:hover {
   background-color: #00000040;
 }
 
-.dialog form div input:active {
+.dialog div input:active {
   background-color: #00000080;
 }
 

update.js

@@ -0,0 +1,30 @@
+var prevSha = localStorage.getItem("commitsha") ?? "ThisShouldntBeASHA";
+
+setInterval(reqData, 30000);
+
+function reqData() {
+  const XHR = new XMLHttpRequest();
+
+  XHR.addEventListener("load", (event) => {
+    var resp = JSON.parse(event.target.response);
+
+    if (resp.sha != prevSha) {
+      if (prevSha == "ThisShouldntBeASHA") {
+        localStorage.setItem("commitsha", resp.sha);
+      } else {
+        document.querySelector(".scr-update--").classList.add("open");
+        localStorage.setItem("commitsha", resp.sha);
+      }
+    }
+  });
+
+  XHR.addEventListener("error", (event) => {
+    console.log('Oops! Something went wrong.');
+  });
+
+  XHR.open("GET", "https://api.github.com/repos/meowcatheorange/clock/commits/master");
+
+  XHR.send();
+}
+
+reqData();