Minor Changes

Author: darkninja1

css/style.css

@@ -201,7 +201,15 @@ video {
   cursor:pointer;
 }
 .mapname {
-  display:none;
+  position:absolute;
+  background:var(--colorIn);
+  color:var(--color);
+  top:10px;
+  left:10px;
+  padding:5px 10px;
+  border-radius: 10px;
+  font-size:18px;
+  max-width:200px;
 }
 .mapdiff {
   position:absolute;

index.html

@@ -42,7 +42,7 @@ <h2>Takoma Park, MD</h2>
       <h1>Choose</h1>
       <div class='choice'>
         <div id="eventbanner"></div>
-        <div onclick='tab(2);' class="bgbl">Quick Start</div>
+        <div onclick='tab(2);' class="bgbl">Maps (Start)</div>
         <div onclick='tab(5);'>New to Orienteering?</div>
         <div onclick='tab(12);'>How to use this Application?</div>
         <div onclick='location.href="https://forms.gle/FRnQaFRk9rA4GxM36";'>Report Bug</div>

js/script.js

@@ -181,7 +181,7 @@ const loadMaps = function() {
     map.style.backgroundSize = "cover";
     let mapName = document.createElement("div");
     mapName.classList.add("mapname");
-    mapName.textContent = basic.maps[i]["Name"];
+    mapName.textContent = shortenTextByPx(basic.maps[i]["Name"], 200);
     map.appendChild(mapName);
     let mapDiff = document.createElement("div");
     mapDiff.classList.add("mapdiff");
@@ -635,4 +635,17 @@ const skipBtn = function() {
     orienteering["skips"]++;
     updateCourseInfo();
   }
+};
+const shortenTextByPx = function(text, maxWidth) {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  context.font = "18px Arial";
+  if (context.measureText(text).width <= maxWidth) {
+    return text;
+  }
+  let shortenedText = text;
+  while (context.measureText(shortenedText + "...").width > maxWidth) {
+    shortenedText = shortenedText.slice(0, -1);
+  }
+  return shortenedText + "...";
 };