wp name

gradle.properties

@@ -1 +1 @@
-release=0.8-SNAPSHOT
+release=0.9-SNAPSHOT

src/main/js/api.js

@@ -22,6 +22,7 @@ const URLS = {
     DATA: "/data/{type}",
     LOGS: "/logs",
     PROPERTIES: "/properties",
+    POLYGONS: "/polygons",
     RESOURCES: "/resources?resource={resource}",
     SKIN: "/skin/{uuid}",
     STATUS: "/status",
@@ -90,6 +91,8 @@ export async function getAllData(imagesSince) {
     data.players = await getData(DATA_TYPES.PLAYERS)
     data.villagers = await getData(DATA_TYPES.VILLAGERS)
 
+    data.polygons = await getPolygons()
+
     return data
 }
 
@@ -105,6 +108,10 @@ export async function setProperties(properties) {
     return json(URLS.PROPERTIES, POST, properties)
 }
 
+export async function getPolygons() {
+    return json(URLS.POLYGONS, GET)
+}
+
 export function getResourceUrl(resource) {
     return URLS.RESOURCES.format({ resource: encodeURIComponent(resource) })
 }

src/main/js/datastore.js

@@ -30,6 +30,7 @@ export default {
         undergroundIcon: undergroundIcon,
 
         markers: [],
+        polygons: [],
         tiles: {},
         waypoints: [],
 
@@ -61,6 +62,7 @@ export default {
         visiblePlayers: true,
         visibleVillagers: true,
 
+        visiblePolygons: true,
         visibleWaypoints: true,
 
         JMTileLayer: JMTileLayer,

src/main/js/index.js

@@ -8,7 +8,7 @@ import "buefy/dist/buefy.css"
 import "leaflet/dist/leaflet.css"
 import "../css/index.css"
 
-import { LCircleMarker, LControl, LMap, LMarker, LTileLayer } from "vue2-leaflet"
+import { LCircleMarker, LControl, LMap, LMarker, LPolygon, LTileLayer, LTooltip } from "vue2-leaflet"
 import { faCogs, faCube, faExpandArrowsAlt, faFileAlt, faGlobeEurope, faLocationArrow, faTimesCircle } from "@fortawesome/free-solid-svg-icons"
 
 import Buefy, { SnackbarProgrammatic as Snackbar } from "buefy"
@@ -39,6 +39,14 @@ Vue.component("l-control", LControl)
 Vue.component("l-map", LMap)
 Vue.component("l-marker", LMarker)
 Vue.component("l-tile-layer", LTileLayer)
+Vue.component("l-polygon", LPolygon)
+Vue.component("l-tooltip", LTooltip)
+
+Vue.component("v-style", {
+    render: function(createElement) {
+        return createElement("style", this.$slots.default)
+    },
+})
 
 delete Icon.Default.prototype._getIconUrl
 

src/main/js/journeymap.js

@@ -165,6 +165,7 @@ class Journeymap {
         this.lastTileCheck = now
 
         datastore.state.markers = this._buildMarkers(data)
+        datastore.state.polygons = this._buildPolygons(data)
         datastore.state.waypoints = this._buildWaypoints(data)
 
         this.player_x = data.player.posX
@@ -341,6 +342,50 @@ class Journeymap {
         return markers
     }
 
+    _buildPolygons(data) {
+        const polygons = []
+
+        if (! datastore.state.visiblePolygons) {
+            return polygons
+        }
+
+        for (const polygon of Object.values(data.polygons)) {
+            let coords = []
+            const holes = []
+
+            for (const point of Object.values(polygon.points)) {
+                coords.push(translateCoords(point.x, point.z))
+            }
+
+            if (polygon.holes.size > 0) {
+                for (const holeObj of Object.values(polygon.holes)) {
+                    const hole = []
+
+                    for (const point of Object.values(holeObj)) {
+                        hole.push(translateCoords(point.x, point.z))
+                    }
+
+                    holes.push(hole)
+                }
+
+                coords = coords.concat([coords], holes)
+            }
+
+            polygons.push({
+                latLngs: coords,
+
+                strokeColor: polygon.strokeColor,
+                strokeOpacity: polygon.strokeOpacity,
+                strokeWidth: polygon.strokeWidth,
+
+                fillColor: polygon.fillColor,
+                fillOpacity: polygon.fillOpacity,
+            })
+        }
+
+        return polygons
+    }
+
     _buildWaypoints(data) {
         const waypoints = []
 
@@ -367,9 +412,13 @@ class Journeymap {
             const red = waypoint.r.toString(16).padStart(2, "0")
             const green = waypoint.g.toString(16).padStart(2, "0")
             const blue = waypoint.b.toString(16).padStart(2, "0")
-
+            const color = `#${red}${green}${blue}`
             let latLngs
+            let tooltipColor = color
 
+            if (waypoint.type === "Death") {
+                tooltipColor = "#FF0000"
+            }
             if (waypoint.type === "Death") {
                 // Draw an X for death markers
                 latLngs = [
@@ -390,10 +439,12 @@ class Journeymap {
             }
 
             waypoints.push({
-                color: `#${red}${green}${blue}`,
+                tooltipColor,
+                color: color,
                 coords: coords,
                 latLngs: latLngs,
                 type: waypoint.type,
+                name: waypoint.name,
             })
         }
 

src/main/resources/assets/journeymap/web/index.html

@@ -19,6 +19,14 @@
 <body>
 
 <div id="main">
+    <v-style v-if="visibleWaypoints">
+        <template v-for="(waypoint) in waypoints">
+            .leaflet-tooltip.{{waypoint.className}} {
+            color: {{waypoint.tooltipColor}};
+            border-color: {{waypoint.tooltipColor}};
+            }
+        </template>
+    </v-style>
     <l-map :bounds="map_bounds"
            :crs="L.CRS.Simple"
            :fade-animation="false"
@@ -152,7 +160,11 @@
 
                    v-if="visibleWaypoints"
                    v-for="(waypoint) in waypoints"
-        ></l-polygon>
+                   >
+            <l-tooltip :options="{permanent: true, direction: 'center', offset: [0, 43], className: waypoint.className}">
+                {{ waypoint.name }}
+            </l-tooltip>
+        </l-polygon>
 
         <l-polygon :color="polygon.strokeColor"
                    :fill-color="polygon.fillColor"