Distance measurer

MeijiRestored · Mar 2, 2023 · ce25f4a · ce25f4a
1 parent 8f89272
commit ce25f4a
Show file tree

Hide file tree

Showing 4 changed files with 229 additions and 73 deletions.
diff --git a/assets/dist-point.png b/assets/dist-point.png
diff --git a/css/main.css b/css/main.css
@@ -114,6 +114,23 @@ li:hover:is(.active) {
   display: none;
 }
 
+#tools {
+  position: absolute;
+  height: 400px;
+  width: 300px;
+  top: 50%;
+  left: 50%;
+  margin: -275px 0 0 -152px;
+  padding: 6px;
+  border-radius: 5px;
+  text-align: left;
+  opacity: 1;
+  color: #eeeeee;
+  background-color: #222222;
+  z-index: 9995;
+  display: none;
+}
+
 #townless {
   position: absolute;
   height: 500px;
@@ -219,6 +236,19 @@ li:hover:is(.active) {
   display: none;
 }
 
+#hint {
+  background-color: #333333;
+  color:#eeeeee;
+  padding: 2px;
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 350px;
+  height: 20px;
+  z-index: 9898;
+  display: none;
+}
+
 #left {
   left: 0;
   position: absolute;

diff --git a/index.html b/index.html
@@ -77,6 +77,19 @@
       >
     </div>
 
+    <div id="tools">
+      <span style="font-size: 180%">Tools</span>
+      <p>There are several tools available! Click their name to open them!</p>
+      <span onclick="showTownless()" style="color: #3344ee">- Townless</span>
+      Find online townless players.<br />
+      <span onclick="enableDist()" style="color: #3344ee">- Distance</span>
+      Measure distance between two points.<br />
+      <!--<span onclick="enableCircle()" style="color: #3344ee">- Range</span>
+      Display a circle of given radius and center.<br />-->
+
+      <span onclick="hideTools()" id="hideBtn">Close</span>
+    </div>
+
     <div id="info">
       <span style="font-size: 200%">Information</span>
       <p>
@@ -97,14 +110,18 @@
         >See how it is calculated</span
       ><br />
       <u>- Nation Bonus:</u> Colors nations depending on their nation bonus.<br />
-      <u>- Nation Population:</u> Colors nations depending on their total population.<br />
-      <u>- Townless:</u> Bonus tool to easily recruit for your town!<br />
+      <u>- Nation Population:</u> Colors nations depending on their total
+      population.<br />
+      <u>- Tools:</u> Various tools for the map.<br />
       <span style="font-size: 90%"
         ><a href="https://github.com/32Vache/emc-mapmodes" target="_blank"
           >Source code on Github</a
         >
-        • Version 2.4.1 • Feb. 2023 • </span
-      ><img src="https://raw.githubusercontent.com/32Vache/emc-mapmodes/main/assets/ua.svg" width="20px">
+        • Version 2.5 • Mar. 2023 • </span
+      ><img
+        src="https://raw.githubusercontent.com/32Vache/emc-mapmodes/main/assets/ua.svg"
+        width="20px"
+      />
       <span onclick="hideInfo()" id="hideBtn">Close</span>
     </div>
 
@@ -140,6 +157,8 @@
 
     <div id="legend" title="Legend"></div>
 
+    <div id="hint" title="Hint"></div>
+
     <ul>
       <li class="active" onclick="showInfo()">Info</li>
       <li onclick="loadmode('deft')">Default</li>
@@ -149,8 +168,8 @@
       <li onclick="loadmode('pvp')">PvP status</li>
       <li onclick="loadmode('den')">Density</li>
       <li onclick="loadmode('nb')">Nation Bonus</li>
-      <li onclick="loadmode('ttpop')"> Nation Pop.</li>
-      <li class="tool" onclick="showTownless()">Townless</li>
+      <li onclick="loadmode('ttpop')">Nation Pop.</li>
+      <li class="tool" onclick="showTools()">Tools</li>
     </ul>
 
     <div id="map"></div>
@@ -217,5 +236,4 @@
     <script type="text/javascript" src="js/main.js"></script>
     <script type="text/javascript" src="assets/nation-colors.js"></script>
   </body>
-  </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -1,3 +1,24 @@
+// setInteractive Plugin
+L.Layer.prototype.setInteractive = function (interactive) {
+  if (this.getLayers) {
+    this.getLayers().forEach((layer) => {
+      layer.setInteractive(interactive);
+    });
+    return;
+  }
+  if (!this._path) {
+    return;
+  }
+
+  this.options.interactive = interactive;
+
+  if (interactive) {
+    L.DomUtil.addClass(this._path, "leaflet-interactive");
+  } else {
+    L.DomUtil.removeClass(this._path, "leaflet-interactive");
+  }
+};
+
 // Area calculator
 /**
  * Calculate area of polygon.
@@ -69,6 +90,23 @@ var mapdata = {
 var capitals = L.layerGroup();
 var capitalNames = L.layerGroup();
 
+var distEnabled = false;
+var mapclicks = 0;
+var pt1 = L.marker();
+var pt2 = L.marker();
+var distLine = L.polyline([
+  [0, 0],
+  [0, 0],
+]);
+var locked = false;
+var distIcon = L.icon({
+  iconUrl:
+    "https://raw.githubusercontent.com/32Vache/emc-mapmodes/main/assets/dist-point.png",
+
+  iconSize: [15, 15],
+  iconAnchor: [7, 7],
+});
+
 var current = "deft";
 
 $("#loadingText").html("Fetching map data<br /><br />");
@@ -942,7 +980,7 @@ fetch(
       var layerctrl = L.control.layers();
       layerctrl.addOverlay(capitals, "Capitals");
       layerctrl.addOverlay(capitalNames, "Capital names");
-      layerctrl.setPosition('topleft');
+      layerctrl.setPosition("topleft");
       layerctrl.addTo(emcmap);
     }
   });
@@ -969,81 +1007,84 @@ function hideInfo() {
 
 function showTownless() {
   $("#townless").fadeIn(500);
-  $("#loading").fadeIn(500);
 }
 
 function hideTownless() {
   $("#townless").fadeOut(500);
+}
+
+function showTools() {
+  $("#tools").fadeIn(500);
+  $("#loading").fadeIn(500);
+}
+
+function hideTools() {
+  $("#tools").fadeOut(500);
   $("#loading").fadeOut(500);
 }
 
 function loadmode(mode) {
-  if (current === "blank") {
-  } else {
-    current === "deft" ? mapdata["deft"].removeFrom(emcmap) : "";
-    current === "clf" ? mapdata["clf"].removeFrom(emcmap) : "";
-    current === "popu" ? mapdata["popu"].removeFrom(emcmap) : "";
-    current === "claim" ? mapdata["claim"].removeFrom(emcmap) : "";
-    current === "den" ? mapdata["den"].removeFrom(emcmap) : "";
-    current === "pvp" ? mapdata["pvp"].removeFrom(emcmap) : "";
-    current === "nb" ? mapdata["nb"].removeFrom(emcmap) : "";
-    current === "ttpop" ? mapdata["ttpop"].removeFrom(emcmap) : "";
-  }
+  if (locked == false) {
+    if (current === "blank") {
+    } else {
+      mapdata[current].removeFrom(emcmap);
+    }
 
-  switch (mode) {
-    case "deft":
-      mapdata["deft"].addTo(emcmap);
-      $("#legend").fadeOut(300);
-      break;
-    case "clf":
-      mapdata["clf"].addTo(emcmap);
-      $("#legend").fadeOut(300);
-      break;
-    case "popu":
-      mapdata["popu"].addTo(emcmap);
-      $("#legend").html(
-        '<span id="left">1</span><span id="left-middle">5</span><span id="middle">20</span><span id="middle-right">45</span><span id="right">100</span><div class="gradBox"><div class="popGrad"></div></div>'
-      );
-      $("#legend").fadeIn(300);
-      break;
-    case "claim":
-      mapdata["claim"].addTo(emcmap);
-      $("#legend").html(
-        '<span id="left">1</span><span id="left-middle">64</span><span id="middle">256</span><span id="middle-right">640</span><span id="right">940</span><div class="gradBox"><div class="popGrad"></div></div>'
-      );
-      $("#legend").fadeIn(300);
-      break;
-    case "den":
-      mapdata["den"].addTo(emcmap);
-      $("#legend").html(
-        '<span id="left">Low</span><span id="middle">Medium</span><span id="right">High</span><div class="gradBox"><div class="denGrad"></div></div>'
-      );
-      $("#legend").fadeIn(300);
-      break;
-    case "pvp":
-      mapdata["pvp"].addTo(emcmap);
-      $("#legend").html(
-        '<span id="left-middle">Enabled</span><span id="middle-right">Disabled</span><div class="gradBox"><div class="grGrad"></div></div>'
-      );
-      $("#legend").fadeIn(300);
-      break;
-    case "nb":
-      mapdata["nb"].addTo(emcmap);
-      $("#legend").html(
-        '<span style="left: 4%; position: absolute;">0</span><span style="left: 24%; position: absolute;">10</span><span style="left: 40%; position: absolute;">30</span><span style="left: 56%; position: absolute;">50</span><span style="left: 72%; position: absolute;">60</span><span style="right: 4%; position: absolute;">80</span><div class="gradBox"><div class="nbGrad"></div></div>'
-      );
-      $("#legend").fadeIn(300);
-      break;
-    case "ttpop":
-      mapdata["ttpop"].addTo(emcmap);
-      $("#legend").html(
-        '<span id="left">10</span><span id="left-middle">50</span><span id="middle">120</span><span id="middle-right">250</span><span id="right">400</span><div class="gradBox"><div class="natpopGrad"></div></div>'
-      );
-      $("#legend").fadeIn(300);
-      break;
-  }
+    switch (mode) {
+      case "deft":
+        mapdata["deft"].addTo(emcmap);
+        $("#legend").fadeOut(300);
+        break;
+      case "clf":
+        mapdata["clf"].addTo(emcmap);
+        $("#legend").fadeOut(300);
+        break;
+      case "popu":
+        mapdata["popu"].addTo(emcmap);
+        $("#legend").html(
+          '<span id="left">1</span><span id="left-middle">5</span><span id="middle">20</span><span id="middle-right">45</span><span id="right">100</span><div class="gradBox"><div class="popGrad"></div></div>'
+        );
+        $("#legend").fadeIn(300);
+        break;
+      case "claim":
+        mapdata["claim"].addTo(emcmap);
+        $("#legend").html(
+          '<span id="left">1</span><span id="left-middle">64</span><span id="middle">256</span><span id="middle-right">640</span><span id="right">940</span><div class="gradBox"><div class="popGrad"></div></div>'
+        );
+        $("#legend").fadeIn(300);
+        break;
+      case "den":
+        mapdata["den"].addTo(emcmap);
+        $("#legend").html(
+          '<span id="left">Low</span><span id="middle">Medium</span><span id="right">High</span><div class="gradBox"><div class="denGrad"></div></div>'
+        );
+        $("#legend").fadeIn(300);
+        break;
+      case "pvp":
+        mapdata["pvp"].addTo(emcmap);
+        $("#legend").html(
+          '<span id="left-middle">Enabled</span><span id="middle-right">Disabled</span><div class="gradBox"><div class="grGrad"></div></div>'
+        );
+        $("#legend").fadeIn(300);
+        break;
+      case "nb":
+        mapdata["nb"].addTo(emcmap);
+        $("#legend").html(
+          '<span style="left: 4%; position: absolute;">0</span><span style="left: 24%; position: absolute;">10</span><span style="left: 40%; position: absolute;">30</span><span style="left: 56%; position: absolute;">50</span><span style="left: 72%; position: absolute;">60</span><span style="right: 4%; position: absolute;">80</span><div class="gradBox"><div class="nbGrad"></div></div>'
+        );
+        $("#legend").fadeIn(300);
+        break;
+      case "ttpop":
+        mapdata["ttpop"].addTo(emcmap);
+        $("#legend").html(
+          '<span id="left">10</span><span id="left-middle">50</span><span id="middle">120</span><span id="middle-right">250</span><span id="right">400</span><div class="gradBox"><div class="natpopGrad"></div></div>'
+        );
+        $("#legend").fadeIn(300);
+        break;
+    }
 
-  current = mode;
+    current = mode;
+  }
 }
 
 function loadTownless() {
@@ -1101,3 +1142,70 @@ function copyTownless(cmd) {
   $("#checkmark").show();
   $("#checkmark").fadeOut(3000);
 }
+
+function enableDist() {
+  hideTools();
+  $("#hint").fadeIn(1000);
+  $("#legend").fadeOut(1000);
+  distEnabled = true;
+  mapclicks = 0;
+  $("#hint").html("Click on the first position.");
+  // Makes towns clickable through
+  locked = true;
+  mapdata[current].setInteractive(false);
+}
+
+function disableDist() {
+  $("#hint").fadeOut(500);
+  distEnabled = false;
+  mapclicks = 0;
+  pt1.removeFrom(emcmap);
+  pt2.removeFrom(emcmap);
+  distLine.removeFrom(emcmap);
+  // Restore towns
+  locked = false;
+  mapdata[current].setInteractive(true);
+  $("#hint").html("GEKOLONISEERD");
+}
+
+function onMapClick(e) {
+  if (distEnabled == true) {
+    if (mapclicks == 0) {
+      mapclicks += 1;
+      pt1
+        .setLatLng(e.latlng)
+        .setIcon(distIcon)
+        .bindTooltip(
+          `Position 1: ${e.latlng.lat.toString()};${e.latlng.lng.toString()}`
+        )
+        .addTo(emcmap);
+      $("#hint").html("Click on the second position.");
+    } else if (mapclicks == 1) {
+      mapclicks += 1;
+      pt2
+        .setLatLng(e.latlng)
+        .setIcon(distIcon)
+        .bindTooltip(
+          `Position 2: ${e.latlng.lat.toString()};${e.latlng.lng.toString()}`
+        )
+        .addTo(emcmap);
+
+      var loc1 = pt1.getLatLng();
+      var loc2 = pt2.getLatLng();
+      var distance = Math.sqrt(
+        (loc1.lat - loc2.lat) ** 2 + (loc1.lng - loc2.lng) ** 2
+      );
+      $("#hint").html(`Distance: ${Math.round(distance)} blocks. <span onclick="disableDist()" style="color: #3344ee">Click here to quit.</span>`);
+      distLine
+        .setLatLngs([
+          [loc1.lat, loc1.lng],
+          [loc2.lat, loc2.lng],
+        ])
+        .bindTooltip(`Distance: ${Math.round(distance)} blocks`)
+        .setStyle({ zIndex: 650, weight: 6, color: "#ff2200" })
+        .addTo(emcmap);
+    }
+  }
+}
+
+emcmap.on("click", onMapClick);