leaderboards

Author: dahonzak

css/style.css

@@ -258,12 +258,7 @@ video {
   margin:20px auto;
   border-radius:20px;
 }
-.time {
-  
-}
-.distance {
-  
-}
+
 .circle {
   position:absolute;
   top:50%;
@@ -360,4 +355,36 @@ p {
   transition:0.2s;
   cursor:pointer;
   display:block;
+}
+.row {
+  padding:10px 20px;
+  display:block;
+  background:var(--c1);
+  color:var(--color);
+  margin:10px;
+  text-align: left !important;
+}
+.row div {
+  padding:0px 10px;
+  display:inline-block;
+}
+
+.timelead {
+  position:absolute;
+  right: 30px;
+}
+#name {
+  width:calc(100% - 86px);
+  height:40px;
+  line-height:60px;
+  padding:10px 20px;
+  margin:20px;
+  background:var(--colorIn);
+  color:var(--color);
+  border-radius:60px;
+  border:3px solid transparent;
+  font-size: 25px;
+}
+#name:focus {
+  border:3px solid var(--c1);
 }

index.html

@@ -65,7 +65,8 @@ <h2 id="mapname"></h2>
 
        </div>
        <div  class='button mainPageBtn' onclick='printMap();'>Print</div>
-      <div  class='button mainPageBtn' onclick='tab(6);loadCourse();'>Start Course</div>
+      <div  class='button mainPageBtn' onclick='tab(17);loadCourse();'>Start Course</div>
+      <div  class='button mainPageBtn' id="mapleaders">Leaderboard</div>
       <div  class='button mainPageAlt' onclick='tab(2);'>Back</div>
       <!-- Course Download Map or print and see details -->
     </div>
@@ -84,7 +85,7 @@ <h1>Results</h1>
       </table>
       <table class='courseTable'>
         <tr>
-          <th>Elevation Change</th>
+          <th>Elevation Gain</th>
           <th>Average Split</th>
         </tr>
         <tr>
@@ -207,8 +208,22 @@ <h3 id="eventtime"></h3>
       <div class='button mainPageBtn' id="eventbtn">Location</div>
       <div class='button mainPageAlt' onclick='tab(1);'>Back</div>
     </div>
+    <!-- 16 -->
+    <div class='tab'>
+      <h1>LeaderBoard</h1>
+      <h2 id="leaderboardtitle"></h2>
+      <div id="leaderboard"></div>
+      <div class='button mainPageAlt' onclick='tab(1);'>Back</div>
+    </div>
+    <!-- 17 -->
+    <div class='tab'>
+      <h1>Name</h1>
+      <input id="name" type="text" placeholder="Type your name here..." maxlength="15" autocomplete="off" />
+      <div class='button mainPageBtn' onclick='setName();'>Submit</div>
+    </div>
     <div class="footer"></div>
   </div>
+  <script src="js/firebase.js" type="module"></script>
   <script src="js/script.js"></script>
 </body>
 

js/firebase.js

@@ -0,0 +1,80 @@
+import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-app.js";
+import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-analytics.js";
+const firebaseConfig = {
+  apiKey: "AIzaSyDROBDZ1MZfFiY0Yn54w9LVmDHsY0AJvmQ",
+  authDomain: "takoma-park-orienteering.firebaseapp.com",
+  databaseURL: "https://takoma-park-orienteering-default-rtdb.firebaseio.com",
+  projectId: "takoma-park-orienteering",
+  storageBucket: "takoma-park-orienteering.appspot.com",
+  messagingSenderId: "654127400915",
+  appId: "1:654127400915:web:cf14fa1308c6c5666ad126",
+  measurementId: "G-1X0MRPN1C8"
+};
+
+import {getDatabase, set, get, update, remove, ref, child} 
+from "https://www.gstatic.com/firebasejs/10.12.3/firebase-database.js"
+try {
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+const db = getDatabase(app);
+
+const insertData = function(orienteering, warning) {
+  if (orienteering["endtime"] != 0) {
+    set(ref(db, orienteering["course"]+"/"+(orienteering["name"]+new Date().getTime())), {
+      Name:orienteering["name"],
+      Time:(orienteering["endtime"]-orienteering["starttime"]+orienteering["bonustime"])
+    }).then(() => {
+      warning("Course Complete","Your course has been saved to the database.",false);
+      localStorage.clear();
+    }).catch((error) => {
+      console.error("Error saving to database:", error);
+      alert("An error occurred: " + error.message);
+    });
+  }
+};
+window.insertData = insertData;
+const requestData = function(course) {
+//request from firebase for leaderboard
+  const leaderboardtitle = document.getElementById("leaderboardtitle");
+  leaderboardtitle.textContent = course;
+  const leaderboard = document.getElementById('leaderboard');
+  leaderboard.innerHTML = "";
+  const dbref = ref(db);
+  get(child(dbref, course)).then((snapshot) => {
+      const data = snapshot.val();
+      if (data && Object.keys(data).length > 0) {
+         let courseList = [];
+          Object.values(data).forEach((value) => {
+              courseList.push({
+                  Name: value.Name,
+                  Time: value.Time
+              });
+          });
+        let sortedlist = courseList.sort((a, b) => (a.Time) - (b.Time));
+        for (let r = 0; r < sortedlist.length; r++) {
+          let rank = r + 1;
+          const row = document.createElement('div');
+          row.classList.add('row');
+          const rankDiv = document.createElement('div');
+          rankDiv.classList.add('rank');
+          rankDiv.textContent = rank;
+          const name = document.createElement('div');
+          name.classList.add('name');
+          name.textContent = sortedlist[r].Name;
+          const time = document.createElement('div');
+          time.classList.add('timelead');
+          time.textContent = `${Math.floor((sortedlist[r].Time) / 60000)}: ${Math.round(((sortedlist[r].Time) % 60000) / 1000)}`;
+          row.appendChild(rankDiv);
+          row.appendChild(name);
+          row.appendChild(time);
+          leaderboard.appendChild(row);
+        }
+      } else {
+          leaderboard.innerHTML = "No data found.";
+      }
+  });
+};
+window.requestData = requestData;
+} catch(error) {
+  console.error("Error initializing Firebase:", error);
+};

js/script.js

@@ -1,7 +1,6 @@
 // ------------ Copywrite Dominik Honzak (c) 2024 ------------ //
 //Created Entirely from scratch by Dominik Honzak//
 
-
 const replaceGit = "/EagleProject"; /* /EagleProject 
 */
 const basic = {
@@ -56,7 +55,8 @@ const mapArray = document.getElementById("maps");
 const mapDetails = {
   name: document.getElementById("mapname"),
   display: document.getElementById("mapdisplay"),
-  detail: document.getElementById("mapdetail")
+  detail: document.getElementById("mapdetail"),
+  leaders: document.getElementById("mapleaders")
 };
 const resultsPage = {
   controls: document.getElementById("courseControlLength_off"),
@@ -206,7 +206,7 @@ const loadMap = function(i) {
   else {
     mapDetails.display.src = basic.maps[i]["Map"];
   }
-
+  mapDetails.leaders.onclick = function() {openLeaderboard(basic.maps[i]["Name"]);};
   mapDetails.detail.innerHTML = "";
   tab(3);
 
@@ -332,7 +332,7 @@ let accuracyLat = (accuracy/(2*Math.PI*6371000*Math.cos(toRad(targetLat))/360)).
   }
   else { 
 
-     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>`);
+     //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);
       setTimeout(function() {
@@ -359,7 +359,7 @@ const showError = function(error) {
     case error.UNKNOWN_ERROR:
       break;
   }
-  warning("Location Request","Your device likely does not have location services enabled.</p><b class='grey'>IOS: </b>aA → Settings → Scroll Down → Location → Allow<br><b class='grey'>Android: </b>⋮ → Scroll Down → ⓘ → Permissions → Location → On",true);
+  warning("Location Request","Your device likely does not have location services enabled.</p><b class='grey'>Safari: </b>aA → Settings → Scroll Down → Location → Allow<br><b class='grey'>Android: </b>⋮ → Scroll Down → ⓘ → Permissions → Location → On",true);
 };
 const getLocation = function() {
   if (navigator.geolocation) {
@@ -401,11 +401,28 @@ const endCourse = function() {
   document.getElementsByClassName('time')[0].textContent = "Time: "+(parseInt(cc/60)+':'+cc1);
   resultsPage.controls.textContent = orienteering["Controls"].length;
   resultsPage.distance.textContent = orienteering["distance"].toFixed(1)+" / "+ orienteering["length"].toFixed(1)+ " km";
-  resultsPage.elevation.textContent = orienteering["elevation"].reduce((acc, curr) => acc + curr, 0).toFixed(1) + "m";
+  const elevations = orienteering["elevation"];
+  let elevationGain = 0;
+  let elevationLoss = 0;
+
+  for (let i = 1; i < elevations.length; i++) {
+      const diff = elevations[i] - elevations[i - 1];
+      if (diff > 0) {
+          elevationGain += diff;
+      } else {
+          elevationLoss -= diff; // Using subtraction to handle negative differences
+      }
+  }
+
+  const gainString = elevationGain.toFixed(1) + "m";
+  const lossString = elevationLoss.toFixed(1) + "m";
+  resultsPage.elevation.textContent = gainString;
   resultsPage.split.textContent = Math.round(cc / (orienteering["Controls"].length - 1)) + "s";
 
 
-  localStorage.clear();
+  // Now use `imported.insertData` to call the function
+  insertData(orienteering, warning);
+  
 };
 const repeating = function() {
   getLocation();
@@ -419,7 +436,7 @@ const loadCourse = function() {
   document.getElementById("courseControlLength_on").textContent = (basic.maps[orienteering["courseindex"]]["Controls"].length-2);
   document.getElementById("courseDistance_on").textContent = orienteering["length"].toFixed(1)+" km";
   document.getElementById("courseDifficulty_on").style.background = basic.colorhue[orienteering["difficulty"]];
-  warning("Warning","We suggest that you refrain from staring at your phone while doing the course as this may result in injury. Be aware that some controls are placed off of paths. Conditions such as weather may impact how dangerous a course is. <br>Please be aware that although this is a website it will still save your course where you left off so you can turn off your phone while running. (if the screen is off distance mesurement will be slightly off)",true);
+  warning("Warning","We suggest that you refrain from staring at your phone while doing the course as this may result in injury. Be aware that some controls are placed off of paths. Conditions such as weather may impact how dangerous a course is. <br>Please be aware that although this is a website it will still save your course where you left off so you can turn off your phone while running. (please be aware distance measurement may have issues)",true);
 };
 const openOptions = function() {
   tab(9);
@@ -493,6 +510,7 @@ basic.maps = JSON.parse(responseText)["Maps"];
   }
   else {
     orienteering = JSON.parse(`{
+        "name":"Anonymous",
         "course":"",
         "courseindex":null,
         "difficulty":0,
@@ -596,4 +614,15 @@ const hotCold = function(dist) {
     document.querySelector(':root').style.setProperty('--bg_overlay', "rgba("+rgb.r+","+rgb.g+","+rgb.b+",0.65)");
     //change background overlay color
   }
+};
+const openLeaderboard = function(crs) {
+  tab(16);
+  requestData(crs);
+};
+const setName = function() {
+  const val = document.getElementById("name").value;
+  if (val) {
+    orienteering["name"] = document.getElementById("name").value;
+  }
+  tab(6);loadCourse();
 };

json/maps.json

@@ -53,7 +53,7 @@
       },
       {
          "Name":"Montgomery to Prince Georges",
-         "Difficulty":6,
+         "Difficulty":5,
          "Controls":[
             "38.982549, -77.010404",
             "38.983112012139244, -77.0091138084131",
@@ -63,10 +63,6 @@
             "38.97880250033363, -76.99336304599285",
             "38.98140409626414, -76.99095170742015",
             "",
-            "",
-            "",
-            "",
-            "",
             "38.982104, -77.010948"
          ],
          "Map":"",