adding wynnmapi

Catniped · Jun 4, 2024 · ff443ca · ff443ca
1 parent 5e974fd
commit ff443ca
Show file tree

Hide file tree

Showing 5 changed files with 808 additions and 0 deletions.
diff --git a/wynnmap/index.css b/wynnmap/index.css
@@ -0,0 +1,21 @@
+#map {
+    background-color: #333333;
+}
+
+.terrInfo {
+    padding: 6px 2vw;
+    font-family: Poppins;
+    background: #262626;
+    -webkit-text-fill-color: antiquewhite;
+    box-shadow: 2px 2px 4px black;
+    border-radius: 5px;
+    text-shadow: 1px 1px 4px black;
+}
+
+.terrInfo h1 {
+    text-align: center;
+}
+
+.terrInfo h2 {
+    text-align: right;
+}
diff --git a/wynnmap/index.html b/wynnmap/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Catniped's Wynn Map</title>
+  <link rel="stylesheet" href="./leaflet.css" />
+  <link rel="stylesheet" href="./index.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+  <style>
+    body {
+        padding: 0;
+        margin: 0;
+    }
+    html, body, #map {
+        height: 100%;
+        width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script src="index.js"></script>
+</body>
+</html>
diff --git a/wynnmap/index.js b/wynnmap/index.js
@@ -0,0 +1,117 @@
+const endpoint = "https://wynnmapi.azurewebsites.net/"
+
+document.addEventListener('DOMContentLoaded', function () {
+  var CRSPixel = L.Util.extend(L.CRS.Simple, {
+    transformation: new L.Transformation(1,0,1,0)
+  });
+
+  var terrPolygon = L.Util.extend(L.polygon, {terrObj: undefined});
+
+  var map = L.map('map', {
+    crs: CRSPixel,
+    attributionControl: false,
+    minZoom: -5
+  });
+
+  var terrInfo = L.control();
+
+  function getDifficultyColor(difficulty) {
+    switch (difficulty) {
+      case "Very Low": return "#009933"
+      case "Low": return "#33ff77"
+      case "Medium": return "#ffff00"
+      case "High": return "#ff3300"
+      case "Very High": return "#801a00"
+    }
+  };
+
+  terrInfo.update = function (terrData) {
+    this._div.innerHTML = 
+    terrData ? `<h1>${terrData.name}</h1>\
+    <h2 style="-webkit-text-fill-color: ${terrData.guildColor}">${terrData.guild} [${terrData.guildTag}]</h2>\
+    ${terrData.emProd ? `<h2 style="-webkit-text-fill-color: #39ac39">+${terrData.emProd} Emeralds</h2>` : ""}\
+    ${terrData.emStorage ? `<h2 style="-webkit-text-fill-color: #39ac39">${terrData.emStorage} Emeralds Stored</h2>` : ""}\
+    ${terrData.oreProd ? `<h2 style="-webkit-text-fill-color: #f2f2f2">+${terrData.oreProd} Ore</h2>` : ""}\
+    ${terrData.oreStorage ? `<h2 style="-webkit-text-fill-color: #f2f2f2">${terrData.oreStorage} Ore Stored</h2>` : ""}\
+    ${terrData.woodProd ? `<h2 style="-webkit-text-fill-color: #ff8c1a">+${terrData.woodProd} Wood</h2>` : ""}\
+    ${terrData.woodStorage ? `<h2 style="-webkit-text-fill-color: #ff8c1a">${terrData.woodStorage} Wood Stored</h2>` : ""}\
+    ${terrData.fishProd ? `<h2 style="-webkit-text-fill-color: #4d79ff">+${terrData.fishProd} Fish</h2>` : ""}\
+    ${terrData.fishStorage ? `<h2 style="-webkit-text-fill-color: #4d79ff">${terrData.fishStorage} Fish Stored</h2>` : ""}\
+    ${terrData.cropProd ? `<h2 style="-webkit-text-fill-color: #ffc34d">+${terrData.cropProd} Crops</h2>` : ""}\
+    ${terrData.cropStorage ? `<h2 style="-webkit-text-fill-color: #ffc34d">${terrData.cropStorage} Crops Stored</h2>` : ""}\
+    ${terrData.treasury ? `<h2>Treasury: <span style="-webkit-text-fill-color: ${getDifficultyColor(terrData.treasury)}">${terrData.treasury}</span></h2>` : ""}\
+    ${terrData.defences ? `<h2>Defences: <span style="-webkit-text-fill-color: ${getDifficultyColor(terrData.defences)}">${terrData.defences}</span></h2>` : ""}\
+    `: "";
+  };
+
+  var focused = "";
+
+  function setData(e) {
+    if (e.target.options.terrObj.name != focused) {focused = ""};
+    terrInfo.update(e.target.options.terrObj);
+  };
+
+  function resetData(e) {
+    if (!focused) {terrInfo.update()};
+  };
+
+  function zoomToFeature(e) {
+    map.fitBounds(e.target.getBounds());
+    focused = e.target.options.terrObj.name;
+  };
+
+  terrInfo.onAdd = function (map) {
+    this._div = L.DomUtil.create('div', 'terrInfo');
+    return this._div;
+  };
+
+  terrInfo.addTo(map);
+
+  var bounds = [[-6573,-2383], [-160,1650]];
+  var image = L.imageOverlay('main-map.png', bounds).addTo(map);
+
+  var terrPolygons = {};
+
+  const urlParams = new URLSearchParams(window.location.search);
+  var dataType = urlParams.get("data");
+
+  dataType ? dataType = dataType : dataType = "apiData";
+
+  axios.get(endpoint+dataType)
+    .then(response => {
+      terrs = response.data;
+      // draw terr outlines
+      for (i=0;i<terrs.length;i++) {
+        let loc = terrs[i].location;
+        let outline = new terrPolygon([[loc.startZ, loc.startX],[loc.startZ, loc.endX],[loc.endZ, loc.endX],[loc.endZ, loc.startX]], {color: terrs[i].guildColor, terrObj: terrs[i]});
+        outline.on("mouseover", setData);
+        outline.on("mouseout", resetData);
+        outline.on("click", zoomToFeature);
+        outline.addTo(map);
+        terrPolygons[terrs[i].name] = outline;
+
+        let gTagOverlay = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        gTagOverlay.setAttribute('xmlns', "http://www.w3.org/2000/svg");
+        gTagOverlay.setAttribute(`viewBox`, `0 0 ${Math.abs(loc.startX - loc.endX)} ${Math.abs(loc.startZ - loc.endZ)}`);
+        gTagOverlay.innerHTML =`<text x="${Math.abs(loc.startX - loc.endX)*(0.04+(0.125*(4-terrs[i].guildTag.length)))}" y="${Math.abs(loc.startZ - loc.endZ)*0.6}" style="font: ${Math.min(Math.abs(loc.startX - loc.endX), Math.abs(loc.startZ - loc.endZ))*0.35}px Poppins; fill: ${terrs[i].guildColor};">${terrs[i].guildTag}</text>`
+        L.svgOverlay(gTagOverlay, [[loc.startZ, loc.startX],[loc.endZ, loc.endX]]).addTo(map);
+      }
+      // draw conns
+      let renderedConns = [];
+      let terrPolygonsArray = Object.values(terrPolygons);
+      for (i=0;i<terrPolygonsArray.length;i++) {
+        for (p=0;p<terrPolygonsArray[i].options.terrObj.conns.length;p++) {
+          if (!renderedConns.includes(terrPolygonsArray[i].options.terrObj.conns[p])) {
+            L.polyline([terrPolygonsArray[i].getCenter(), terrPolygons[terrPolygonsArray[i].options.terrObj.conns[p]].getCenter()], {color: "white", weight: 1, opacity: 0.75}).addTo(map);
+          }
+          renderedConns.push(terrPolygonsArray[i].options.terrObj.name);
+        }
+
+      }
+    });
+  map.fitBounds(bounds);
+});
+
+
+// console.log(apiData);
+