Warp Rendering (#199)

* Update gitignore

* Warp rendering initial

* finish warp rendering

.gitignore

@@ -55,4 +55,5 @@ dkms.conf
 .replit
 .DS_Store
 node_modules/
-out/
+out/
+package-lock.json

build.mjs

@@ -40,6 +40,7 @@ if (!fs.existsSync("out")) fs.mkdirSync("out");
 fs.copyFileSync("./index.html", "./out/index.html");
 fs.copyFileSync("./airportcalc.html", "./out/airportcalc.html");
 fs.copyFileSync("./manifest.json", "./out/manifest.json");
+fs.copyFileSync("./warps.json", "./out/warps.json");
 fse.copySync("./media", "./out/media");
 
 // eslint-disable-next-line no-undef

get-warp-data.js

@@ -0,0 +1,27 @@
+import * as fs from "fs";
+
+const warpData = [];
+
+async function getData() {
+    let oldLength = warpData.length;
+    let res = await fetch("https://api.minecartrapidtransit.net/api/v1/warps?world=new&offset=" + oldLength);
+    let warps = await res.json();
+    for (const warp of warps) {
+        warpData.push({
+            name: warp.name,
+            x: Math.round(warp.x),
+            z: Math.round(warp.z)
+        })
+    }
+
+    // If number of entries has increased then check the next page
+    if (oldLength != warpData.length) getData();
+    else {
+        console.log(warpData.length + " warps found")
+        fs.writeFileSync("./warps.json", JSON.stringify({
+            warps: warpData,
+            lastUpdated: new Date().toUTCString()
+        }));
+    }
+}
+getData();

src/map.js

@@ -29,6 +29,7 @@ const customTileLayer = function (templateUrl, options) {
 export function initMap() {
   const map = L.map("map", {
     crs: L.CRS.Simple,
+    preferCanvas: true
   }).setView([0, 0], 8);
   customTileLayer("unused url; check custom function", {
     maxZoom: 8,

src/map/globals.js

@@ -19,6 +19,7 @@ export class CityMap {
     this.cityLayers = new Map();
     this.cityMarkers = new Map();
     this.towns = [];
+    this.warpLayer = L.featureGroup();
   }
 }
 CityMap.cityTypes = [
@@ -76,11 +77,22 @@ export class Buttons {
         g().displayTowns = g().displayTowns ? false : true;
         mapLayers();
       },
-      "Show/Hide towns",
+      "Show/Hide Towns",
     )
       .setPosition("topright")
       .addTo(map);
     this.city.disable();
+    this.warps = L.easyButton(
+      "fa-bolt",
+      () => {
+        if (g().map.hasLayer(gcm().warpLayer)) g().map.removeLayer(gcm().warpLayer);
+        else g().map.addLayer(gcm().warpLayer);
+      },
+      "Show/Hide Warps"
+    )
+      .setPosition("topright")
+      .addTo(map);
+    this.warps.disable();
     this.airportCalc = L.easyButton(
       "fa-plane",
       () => {

src/map/index.js

@@ -11,6 +11,7 @@ import { initMapCities } from "./map-cities.js";
 import { initTownSearch } from "./townsearch.js";
 import "./ui.js";
 import { initAirways, initWaypoints } from "./waypoint-viewer.js";
+import { initMapWarps } from "./map-warps.js";
 // https://stackoverflow.com/a/58254190
 // @ts-expect-error fix esbuild not making these load by themselves
 delete L.Icon.Default.prototype._getIconUrl;
@@ -27,3 +28,4 @@ void initMapCities();
 void initTownSearch();
 void initWaypoints();
 void initAirways();
+void initMapWarps();

src/map/map-warps.js

@@ -0,0 +1,25 @@
+import { mapcoord } from "../utils/coord";
+import { gb, gcm } from "./globals";
+
+export async function initMapWarps() {
+    const res = await fetch("./warps.json");
+    const warpData = await res.json();
+    console.log(warpData.warps.length + " warps loaded");
+
+
+    for (const warp of warpData.warps) {
+        gcm().warpLayer.addLayer(
+            L.circleMarker(mapcoord([warp.x, warp.z]), {
+                color: "#ff0000",
+                radius: 3
+            })
+                .bindPopup(`Warp: ${warp.name}<br><button onclick="navigator.clipboard.writeText('/warp point ${warp.name}')">Copy Compass Point Command</button>`)
+        )
+    }
+
+    gb().warps.enable();
+}
+
+export function copyPointCommand(name) {
+    navigator.clipboard.writeText(`/warp point ${name}`);
+}