viewer: display markers for signs

Still needs support for formatting, generally better styling, and
grouping for multiple signs on the same X/Z coordinates. It might also
be nice to include the currently opened marker in the URL.

viewer/MinedMap.js

@@ -155,6 +155,49 @@ var parseHash = function () {
 	return args;
 }
 
+function formatSignLine(line) {
+	let el = document.createElement('span');
+
+	for (let span of line) {
+		let child = document.createElement('span');
+		child.textContent = span.text;
+		el.appendChild(child);
+	}
+	return el;
+}
+
+function loadSigns(signLayer) {
+	let xhr = new XMLHttpRequest();
+	xhr.onload = function () {
+		let res = JSON.parse(this.responseText);
+		let signs = res.signs;
+
+		for (let sign of signs) {
+			let el = document.createElement('span');
+
+			if (sign.front_text) {
+				for (let line of sign.front_text) {
+					el.appendChild(formatSignLine(line));
+					el.appendChild(document.createElement('br'));
+				}
+			}
+
+			if (sign.back_text) {
+				el.appendChild(document.createElement('hr'));
+
+				for (let line of sign.back_text) {
+					el.appendChild(formatSignLine(line));
+					el.appendChild(document.createElement('br'));
+				}
+			}
+
+			L.marker([sign.x, sign.z]).addTo(signLayer).bindPopup(el);
+		}
+	}
+
+	xhr.open('GET', 'data/entities.json', true);
+	xhr.send();
+}
 
 window.createMap = function () {
 	var xhr = new XMLHttpRequest();
@@ -163,7 +206,7 @@ window.createMap = function () {
 		    mipmaps = res.mipmaps,
 		    spawn = res.spawn;
 
-		var x, z, zoom, light;
+		var x, z, zoom, light, signs;
 
 		var updateParams = function () {
 			var args = parseHash();
@@ -172,6 +215,7 @@ window.createMap = function () {
 			x = parseFloat(args['x']);
 			z = parseFloat(args['z']);
 			light = parseInt(args['light']);
+			signs = parseInt(args['signs'] ?? '1');
 
 			if (isNaN(zoom))
 				zoom = 0;
@@ -197,14 +241,20 @@ window.createMap = function () {
 
 		var mapLayer = new MinedMapLayer(mipmaps, 'map');
 		var lightLayer = new MinedMapLayer(mipmaps, 'light');
+		var signLayer = L.layerGroup();
+
+		loadSigns(signLayer);
 
 		mapLayer.addTo(map);
 
 		if (light)
 			map.addLayer(lightLayer);
+		if (signs)
+			map.addLayer(signLayer);
 
 		var overlayMaps = {
 			"Illumination": lightLayer,
+			"Signs": signLayer,
 		};
 
 		L.control.layers({}, overlayMaps).addTo(map);
@@ -224,6 +274,8 @@ window.createMap = function () {
 
 			if (map.hasLayer(lightLayer))
 				ret += '&light=1';
+			if (!map.hasLayer(signLayer))
+				ret += '&signs=0';
 
 			return ret;
 		};
@@ -232,7 +284,12 @@ window.createMap = function () {
 			window.location.hash = makeHash();
 		};
 
-		var refreshHash = function () {
+		var refreshHash = function (ev) {
+			if (ev.type === 'layeradd' || ev.type === 'layerremove') {
+				if (ev.layer !== lightLayer && ev.layer !== signLayer)
+					return;
+			}
+
 			zoom = map.getZoom();
 			center = map.getCenter();
 			x = Math.round(center.lng);
@@ -260,6 +317,10 @@ window.createMap = function () {
 				map.addLayer(lightLayer);
 			else
 				map.removeLayer(lightLayer);
+			if (signs)
+				map.addLayer(signLayer);
+			else
+				map.removeLayer(signLayer);
 
 			updateHash();
 		};