☰

Nexus Clash Mini-Map (B4)

Adds a mini-map below the standard map view which can be clicked to toggle a full-sized plane map

当前为 2020-11-27 提交的版本，查看 最新版本。

// ==UserScript==
// @name          Nexus Clash Mini-Map (B4)
// @namespace     https://roadha.us
// @author        haliphax
// @version       1.0.4
// @description   Adds a mini-map below the standard map view which can be clicked to toggle a full-sized plane map
// @include       https://www.nexusclash.com/modules.php?name=Game*
// ==/UserScript==

(function(){
	'use strict';

    const mapheading = document.getElementById('mapheading');

    if (mapheading === null) return;

	const txt = document.querySelector('.tile_description b u').innerText,
		coords = /\(([0-9]+), ([0-9]+) ([^,]+), a/i.exec(txt);

	if (!coords) return;

	const x = parseInt(coords[1]),
		y = parseInt(coords[2]),
		offsetX = (x * 24 - 144) * -1,
		offsetY = (y * 24 - 144) * -1,
        offsetBigX = 24 * (x - 1),
        offsetBigY = 24 * (y - 1),
		row = document.createElement('tr'),
        hypermap = document.createElement('div'),
		styles = document.createElement('style');

	let mapName = coords[3].toLowerCase();

	if (mapName == 'laurentia') mapName = 'valhalla';

	styles.innerHTML = `
		#minimap {
			background-repeat: no-repeat;
			height: 312px;
			margin: 0 auto;
			position: relative;
			width: 312px;
		}

		#hypermap {
			background-position: top left !important;
			height: 100%
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 98;
		}

        .hidden {
            display: none;
        }

		.position {
			background: url(https://plscks.github.io/testHYPERMAP/icons/you.png);
			height: 72px;
			left: 120px;
			position: absolute;
			top: 120px;
			width: 72px;
			z-index: 99;
		}`;
	document.head.appendChild(styles);
    hypermap.classList.add('hidden');
    hypermap.id = 'hypermap';
    hypermap.innerHTML = `
        <div class="position" style="left: ${offsetBigX}px; top: ${offsetBigY}px;"></div>
        <img src="https://plscks.github.io/testHYPERMAP/${mapName}.png" />
        `;
    document.body.appendChild(hypermap);
	row.innerHTML = `
		<td>
			<div id="minimap" style="
				background-image: url(https://plscks.github.io/testHYPERMAP/${mapName}.png);
				background-position: ${offsetX}px ${offsetY}px;">
				<div class="position"></div>
			</div>
		</td>
		`;
	mapheading.parentNode.parentNode.appendChild(row);

    const minimap = document.getElementById('minimap'),
      maps = [minimap, hypermap];

    maps.forEach(
        v => v.addEventListener('click',
            () => maps.forEach(
                m => m.classList.toggle('hidden'))));
}());