☰

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

  1. // ==UserScript==
  2. // @name          Nexus Clash Mini-Map (B4)
  3. // @namespace     https://roadha.us
  4. // @author        haliphax
  5. // @version       1.1
  6. // @description   Adds a mini-map below the standard map view which can be clicked to toggle a full-sized plane map
  7. // @include       https://www.nexusclash.com/modules.php?name=Game*
  8. // ==/UserScript==
  9.  
  10. (function () {
  11.     'use strict';
  12.  
  13.     const mapheading = document.getElementById('mapheading');
  14.  
  15.     if (mapheading === null) return;
  16.  
  17.     const txt = document.querySelector('.tile_description b u').innerText.trim().replace(/\s+/g, ' '),
  18.         coords = /\(([0-9]+), ([0-9]+) ([^,]+),(?:.+\bNeighborhood: ([^)]+))?/i.exec(txt);
  19.  
  20.     if (!coords) return;
  21.  
  22.     let mapName = coords[3].toLowerCase(),
  23.         x = parseInt(coords[1]),
  24.         y = parseInt(coords[2]);
  25.  
  26.     if (mapName == 'laurentia') {
  27.         mapName = 'valhalla';
  28.     }
  29.     else if (coords[4] == 'Amaravati') {
  30.         mapName = 'amaravati';
  31.         x -= 19;
  32.     }
  33.  
  34.     const offsetX = (x * 24 - 144) * -1,
  35.         offsetY = (y * 24 - 144) * -1,
  36.         offsetBigX = 24 * (x - 1),
  37.         offsetBigY = 24 * (y - 1),
  38.         row = document.createElement('tr'),
  39.         hypermap = document.createElement('div'),
  40.         styles = document.createElement('style');
  41.  
  42.     styles.innerHTML = `
  43. 		#minimap {
  44. 			background-repeat: no-repeat;
  45. 			height: 312px;
  46. 			margin: 0 auto;
  47. 			position: relative;
  48. 			width: 312px;
  49. 		}
  50.  
  51. 		#hypermap {
  52. 			background-position: top left !important;
  53. 			bottom: 0;
  54. 			left: 0;
  55. 			overflow: auto;
  56. 			position: absolute;
  57. 			right: 0;
  58. 			top: 0;
  59. 			z-index: 98;
  60. 		}
  61.  
  62.         .hidden {
  63.             display: none;
  64.         }
  65.  
  66. 		.position {
  67. 			background: url(https://plscks.github.io/testHYPERMAP/icons/you.png);
  68. 			height: 72px;
  69. 			left: 120px;
  70. 			position: absolute;
  71. 			top: 120px;
  72. 			width: 72px;
  73. 	        z-index: 99;
  74.         }`;
  75.     document.head.appendChild(styles);
  76.     hypermap.classList.add('hidden');
  77.     hypermap.id = 'hypermap';
  78.     hypermap.innerHTML = `
  79.         <div class="position" style="left: ${offsetBigX}px; top: ${offsetBigY}px;"></div>
  80.         <img src="https://plscks.github.io/testHYPERMAP/${mapName}.png" />
  81.         `;
  82.     document.body.appendChild(hypermap);
  83.     row.innerHTML = `
  84. 		<td>
  85. 			<div id="minimap" style="
  86. 				background-image: url(https://plscks.github.io/testHYPERMAP/${mapName}.png);
  87. 				background-position: ${offsetX}px ${offsetY}px;">
  88. 				<div class="position"></div>
  89. 			</div>
  90. 		</td>
  91. 		`;
  92.     mapheading.parentNode.parentNode.appendChild(row);
  93.  
  94.     const minimap = document.getElementById('minimap'),
  95.         maps = [minimap, hypermap];
  96.  
  97.     maps.forEach(
  98.         v => v.addEventListener('click',
  99.             () => maps.forEach(
  100.                 m => m.classList.toggle('hidden'))));
  101. }());