progress bar

Author: darkninja1

css/style.css

@@ -112,6 +112,12 @@ button {
   display:block;
   margin:20px auto;
 }
+.mainPageBtnH {
+  width:calc(50% - 2em);
+  background:var(--c1);
+  display:block;
+  margin:20px auto;
+}
 .mainPageAlt {
   width:calc(50% - 2em);
   /* background:linear-gradient(-200deg, var(--c2),var(--c1));*/
@@ -396,4 +402,24 @@ p {
 }
 #name:focus {
   border:3px solid var(--c1);
+}
+.progress-container {
+  position:absolute;
+  bottom:0px;
+  left:0;
+  margin:20px;
+  width: calc(100% - 40px);
+  background-color: var(--colorIn);
+  height: 20px;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  position:relative;
+  width: 0;
+  height: 100%;
+  background-color: var(--color);
+  border-radius: 20px;
+  transition: width 3.5s linear;
 }

index.html

@@ -142,6 +142,9 @@ <h1 class='time'>00:00</h1>
       <h1>Confirmed</h1>
       <h2></h2>
       <div class='circle lime'>✓</div>
+      <div class="progress-container">
+        <div id="barConfirmed" class="progress-bar"></div>
+      </div>
       <!-- Course with timer and check location button -->
     </div>
     <!-- 8 -->
@@ -150,14 +153,17 @@ <h1>Inaccuracy</h1>
       <h2 id="testing"></h2>
       <h2>Check your accuracy or position and try again.</h2>
       <div class='circle red'>×</div>
+      <div class="progress-container">
+        <div id="barInaccuracy" class="progress-bar"></div>
+      </div>
       <!-- Course with timer and check location button -->
     </div>
     <!-- 9 -->
     <div class='tab' id='course'>
       <h1>Options</h1>
+      <div class='button mainPageBtnH' onclick='openMap();'>View Map</div>
       <div class='button mainPageBtn' onclick='newGame();'>Quit Course</div>
       <div class='button mainPageBtn' onclick='skipBtn();'>Skip Control</div>
-      <div class='button mainPageBtn' onclick='openMap();'>View Map</div>
       <div class='button mainPageBtn' onclick='openFullscreen();'>Enter Fullscreen</div>
       <div class='button mainPageBtn' onclick='hotcoldmode();'>HotCold (Testing)</div>
       <!-- <div class='button mainPageBtn' onclick='closeFullscreen();'>Exit Fullscreen</div> -->
@@ -176,6 +182,9 @@ <h1>Connection</h1>
       <h2 id="testing"></h2>
       <h2>Your accuracy is too low to confirm that you are in the correct area.</h2>
       <div class='circle blue'>?</div>
+      <div class="progress-container">
+        <div id="barConnection" class="progress-bar"></div>
+      </div>
       <!-- Course with timer and check location button -->
     </div>
     <!-- 12 -->

js/script.js

@@ -11,7 +11,8 @@ const basic = {
   navcon:true,
   timer:null,
   hotcold: false,
-  hotcolden:0
+  hotcolden:0,
+  mid:5000
 };
 let shareData = {
   title: "Takoma Park Orienteering",
@@ -324,9 +325,10 @@ let accuracyLat = (accuracy/(2*Math.PI*6371000*Math.cos(toRad(targetLat))/360)).
     orienteering["currentControl"]++;
     if (orienteering["currentControl"] < basic.maps[orienteering["courseindex"]]["Controls"].length) {
     tab(7);
+    startBarProgress("barConfirmed");
     setTimeout(function() {
       tab(6);
-    },3500);
+    },basic.mid);
     }
     else {
       tab(4);
@@ -337,15 +339,17 @@ let accuracyLat = (accuracy/(2*Math.PI*6371000*Math.cos(toRad(targetLat))/360)).
      //testing.innerHTML = ("off by: "+calculateDistance(currentLat,currentLong,targetLat,targetLong)+`m<div onclick='warning("Cords","`+currentLat.toFixed(6)+", "+currentLong.toFixed(6)+` <br> `+targetLat.toFixed(6)+", "+targetLong.toFixed(6)+`",false);'>testing</div>`);
     if (!(position.coords.accuracy <= 15)) {
       tab(11);
+      startBarProgress("barConnection");
       setTimeout(function() {
         tab(6);
-      },3500);
+      },basic.mid);
     }
     else {
       tab(8);
+      startBarProgress("barInaccuracy");
       setTimeout(function() {
         tab(6);
-      },3500);
+      },basic.mid);
     }
   }
   basic.navcon = true;
@@ -648,4 +652,13 @@ const shortenTextByPx = function(text, maxWidth) {
     shortenedText = shortenedText.slice(0, -1);
   }
   return shortenedText + "...";
+};
+const startBarProgress = (progressBarId) => {
+  const progressBar = document.getElementById(progressBarId);
+  progressBar.style.transition = "width "+(basic.mid/1000)+"s linear";
+  progressBar.style.width = "0";
+  setTimeout(() => {
+      progressBar.style.transition = "none";
+      progressBar.style.width = "100%";
+  }, basic.mid);
 };