diff --git a/viewer/MinedMap.js b/viewer/MinedMap.js index 0ced720..2e5da74 100644 --- 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 index 20b71b1..ee8f258 100644 --- 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; + }