viewer: display markers for signs

Still needs 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.
neocturne · Dec 30, 2023 · 57978d9 · 57978d9
1 parent aec84fe
commit 57978d9
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 2 deletions.
diff --git a/viewer/MinedMap.js b/viewer/MinedMap.js
@@ -155,6 +155,90 @@ var parseHash = function () {
 	return args;
 }
 
+const colors = {
+	black: '#000000',
+	dark_blue: '#0000AA',
+	dark_green: '#00AA00',
+	dark_aqua: '#00AAAA',
+	dark_red: '#AA0000',
+	dark_purple: '#AA00AA',
+	gold: '#FFAA00',
+	gray: '#AAAAAA',
+	dark_gray: '#555555',
+	blue: '#5555FF',
+	green: '#55FF55',
+	aqua: '#55FFFF',
+	red: '#FF5555',
+	light_purple: '#FF55FF',
+	yellow: '#FFFF55',
+	white: '#FFFFFF',
+};
+
+function formatSignLine(line) {
+	const el = document.createElement('span');
+	el.style.whiteSpace = 'pre';
+	el.style.fontFamily = 'sans';
+
+	for (const span of line) {
+		let child = document.createElement('span');
+		child.textContent = span.text;
+
+		const color = colors[span.color ?? 'black'] || colors['black'];
+
+		if (span.bold)
+			child.style.fontWeight = 'bold';
+		if (span.italic)
+			child.style.fontStyle = 'italic';
+
+		child.style.textDecoration = '';
+		if (span.underlined)
+			child.style.textDecoration += ' underline';
+		if (span.strikethrough)
+			child.style.textDecoration += ' line-through';
+
+		child.style.color = color;
+		if (span.obfuscated) {
+			child.style.backgroundColor = color;
+			child.className = 'obfuscated';
+		}
+
+		el.appendChild(child);
+	}
+	return el;
+}
+
+function loadSigns(signLayer) {
+	const xhr = new XMLHttpRequest();
+	xhr.onload = function () {
+		const res = JSON.parse(this.responseText);
+		const signs = res.signs;
+
+		for (const sign of signs) {
+			const 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.z-0.5, sign.x+0.5]).addTo(signLayer).bindPopup(el);
+		}
+	}
+
+	xhr.open('GET', 'data/entities.json', true);
+	xhr.send();
+}
 
 window.createMap = function () {
 	var xhr = new XMLHttpRequest();
@@ -163,7 +247,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 +256,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 +282,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 +315,8 @@ window.createMap = function () {
 
 			if (map.hasLayer(lightLayer))
 				ret += '&light=1';
+			if (!map.hasLayer(signLayer))
+				ret += '&signs=0';
 
 			return ret;
 		};
@@ -232,7 +325,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 +358,10 @@ window.createMap = function () {
 				map.addLayer(lightLayer);
 			else
 				map.removeLayer(lightLayer);
+			if (signs)
+				map.addLayer(signLayer);
+			else
+				map.removeLayer(signLayer);
 
 			updateHash();
 		};

diff --git a/viewer/index.html b/viewer/index.html
@@ -30,6 +30,10 @@
         image-rendering: pixelated;
         -ms-interpolation-mode: nearest-neighbor;
       }
+
+      span.obfuscated:hover {
+        background-color: transparent !important;
+      }
     </style>
   </head>
   <body>