☰

Hordes UI Mod

Various UI mods for Hordes.io.

当前为 2019-12-23 提交的版本，查看 最新版本。

  1. 	// ==UserScript==
  2. 	// @name         Hordes UI Mod
  3. 	// @version      0.151
  4. 	// @description  Various UI mods for Hordes.io.
  5. 	// @author       Sakaiyo
  6. 	// @match        https://hordes.io/play
  7. 	// @grant        GM_addStyle
  8. // @namespace https://greasyfork.org/users/160017
  9. 	// ==/UserScript==
  10. 	/**
  11. 	  * TODO: Implement chat tabs
  12. 	  * TODO: Implement inventory sorting
  13. 	  * TODO: (Maybe) Improved healer party frames
  14. 	  * TODO: Opacity scaler for map
  15. 	  *       Check if it's ok to emulate keypresses before releasing. If not, then maybe copy text to clipboard.
  16. 	  * TODO: FIX BUG: Add support for resizing map back to saved position after minimizing it, from maximized position
  17. 	  * TODO (Maybe): Ability to make GM chat look like normal chat?
  18. 	  * TODO: Add toggleable option to include chat messages to right of party frame
  19. 	  * TODO: Remove all reliance on svelte- classes, likely breaks with updates
  20. 	  */
  21. 	(function() {
  22. 	    'use strict';
  23.  
  24. 	    // If this version is different from the user's stored state,
  25. 	    // e.g. they have upgraded the version of this script and there are breaking changes,
  26. 	    // then their stored state will be deleted.
  27. 	    const BREAKING_VERSION = 1;
  28. 	    const VERSION = '0.150'; // Should match version in UserScript description
  29.  
  30. 	    // The width+height of the maximized chat, so we don't save map size when it's maximized
  31. 	    // TODO: FIX BUG: This is NOT everyones max size. INSTEAD OF USING A STATIC SIZE, we should detect large instant resizes
  32. 	    // Should also do this to avoid saving when minimizing menu after maximizing
  33. 	    const CHAT_MAXIMIZED_SIZE = 692;
  34.  
  35. 	    const STORAGE_STATE_KEY = 'hordesio-uimodsakaiyo-state';
  36. 	    const CHAT_GM_CLASS = 'js-chat-gm';
  37.  
  38. 	    let state = {
  39. 	    	breakingVersion: BREAKING_VERSION,
  40. 	    	chat: {
  41. 	    		GM: true,
  42. 	    	},
  43. 	    	windowsPos: {},
  44. 	    	blockList: {},
  45. 	    };
  46. 	    // tempState is saved only between page refreshed.
  47. 	    const tempState = {
  48. 	    	// The last name clicked in chat
  49. 	    	chatName: null
  50. 	    };
  51.  
  52. 	    // UPDATING STYLES BELOW - Must be invoked in main function
  53. 	    GM_addStyle(`
  54. 	    	/* Transparent chat bg color */
  55. 			.frame.svelte-1vrlsr3 {
  56. 				background: rgba(0,0,0,0.4);
  57. 			}
  58.  
  59. 			/* Transparent map */
  60. 			.svelte-hiyby7 {
  61. 				opacity: 0.7;
  62. 			}
  63.  
  64. 			/* Our mod's chat message color */
  65. 			.textuimod {
  66. 				color: #00dd33;
  67. 			}
  68.  
  69. 			/* Allows windows to be moved */
  70. 			.window {
  71. 				position: relative;
  72. 			}
  73.  
  74. 			/* Allows last clicked window to appear above all other windows */
  75. 			.js-is-top {
  76. 				z-index: 9998 !important;
  77. 			}
  78. 			.panel.context:not(.commandlist) {
  79. 				z-index: 9999 !important;
  80. 			}
  81. 			/* The item icon being dragged in the inventory */
  82. 			.container.svelte-120o2pb {
  83. 				z-index: 9999 !important;
  84. 			}
  85.  
  86. 			/* Custom chat context menu, invisible by default */
  87. 			.js-chat-context-menu {
  88. 				display: none;
  89. 			}
  90.  
  91. 			.js-chat-context-menu .name {
  92. 				color: white;
  93. 				padding: 2px 4px;
  94. 			}
  95.  
  96. 			/* Allow names in chat to be clicked */
  97. 			#chat .name {
  98. 				pointer-events: all !important;
  99. 			}
  100.  
  101. 			/* Custom chat filter colors */
  102. 			.js-chat-gm {
  103. 				color: #a6dcd5;
  104. 			}
  105.  
  106. 			/* Class that hides chat lines */
  107. 			.js-line-hidden,
  108. 			.js-line-blocked {
  109. 				display: none;
  110. 			}
  111.  
  112. 			/* Enable chat & map resize */
  113. 			.js-chat-resize {
  114. 				resize: both;
  115. 				overflow: auto;
  116. 			}
  117. 			.js-map-resize:hover {
  118. 				resize: both;
  119. 				overflow: auto;
  120. 				direction: rtl;
  121. 			}
  122.  
  123. 			/* The browser resize icon */
  124. 			*::-webkit-resizer {
  125. 		        background: linear-gradient(to right, rgba(51, 77, 80, 0), rgba(203, 202, 165, 0.5));
  126. 			    border-radius: 8px;
  127. 			    box-shadow: 0 1px 1px rgba(0,0,0,1);
  128. 			}
  129. 			*::-moz-resizer {
  130. 		        background: linear-gradient(to right, rgba(51, 77, 80, 0), rgba(203, 202, 165, 0.5));
  131. 			    border-radius: 8px;
  132. 			    box-shadow: 0 1px 1px rgba(0,0,0,1);
  133. 			}
  134.  
  135. 			/* Custom css for settings page, duplicates preexisting settings pane grid */
  136. 			.uimod-settings {
  137. 				display: grid;
  138. 				grid-template-columns: 2fr 3fr;
  139. 				grid-gap: 8px;
  140. 				align-items: center;
  141. 				max-height: 390px;
  142. 				margin: 0 20px;
  143. 			}
  144. 			/* The custom settings main window, closely mirrors main settings window */
  145. 			.uimod-custom-settings {
  146. 				position: absolute;
  147. 				top: 100px;
  148. 			    left: 50%;
  149. 			    transform: translate(-50%, 0);
  150. 			    min-width: 350px;
  151. 			    max-width: 600px;
  152. 			    width: 90%;
  153. 			    height: 80%;
  154. 			    min-height: 350px;
  155. 			    max-height: 500px;
  156. 			    z-index: 9;
  157. 			    padding: 0px 10px 5px;
  158. 			}
  159. 		`);
  160.  
  161.  
  162. 	    const modHelpers = {
  163. 	    	// Filters all chat based on custom filters
  164. 	    	filterAllChat: () => {
  165. 	    		// Blocked user filter
  166. 	    		Object.keys(state.blockList).forEach(blockedName => {
  167. 	    			// Get the `.name` elements from the blocked user, if we haven't already hidden their messages
  168. 	    			const $blockedChatNames = Array.from(document.querySelectorAll(`[data-chat-name="${blockedName}"]:not(.js-line-blocked)`));
  169. 	    			// Hide each of their messages
  170. 	    			$blockedChatNames.forEach($name => {
  171. 	    				// Add the class name to $name so we can track whether it's been hidden in our CSS selector $blockedChatNames
  172. 	    				$name.classList.add('js-line-blocked');
  173. 	    				const $line = $name.parentNode.parentNode.parentNode;
  174. 	    				// Add the class name to $line so we can visibly hide the entire chat line
  175. 	    				$line.classList.add('js-line-blocked');
  176. 	    			});
  177. 	    		})
  178.  
  179. 	    		// Custom channel filter
  180. 		    	Object.keys(state.chat).forEach(channel => {
  181. 			  		Array.from(document.querySelectorAll(`.text${channel}.content`)).forEach($textItem => {
  182. 			  			const $line = $textItem.parentNode.parentNode;
  183. 			  			$line.classList.toggle('js-line-hidden', !state.chat[channel]);
  184. 			  		});
  185. 		    	});
  186. 			},
  187.  
  188. 			// Makes chat context menu visible and appear under the mouse
  189. 			showChatContextMenu: (name, mousePos) => {
  190. 				const $contextMenu = document.querySelector('.js-chat-context-menu');
  191. 				$contextMenu.querySelector('.js-name').textContent = name;
  192. 				$contextMenu.setAttribute('style', `display: block; left: ${mousePos.x}px; top: ${mousePos.y}px;`);
  193. 			},
  194.  
  195. 			// Close chat context menu if clicking outside of it
  196. 			closeChatContextMenu: clickEvent => {
  197. 	    		const $target = clickEvent.target;
  198. 	    		// If clicking on name or directly on context menu, don't close it
  199. 	    		// Still closes if clicking on context menu item
  200. 	    		if ($target.classList.contains('js-is-context-menu-initd') 
  201. 	    			|| $target.classList.contains('js-chat-context-menu')) {
  202. 	    			return;
  203. 	    		}
  204.  
  205. 	    		const $contextMenu = document.querySelector('.js-chat-context-menu');
  206. 	    		$contextMenu.setAttribute('style', 'display: none');
  207. 	    	},
  208.  
  209. 	    	// Adds player to block list, to be filtered out of chat
  210. 	    	blockPlayer: playerName => {
  211. 	    		if (state.blockList[playerName]) {
  212. 	    			return;
  213. 	    		}
  214. 	    		
  215. 	    		state.blockList[playerName] = true;
  216. 	    		modHelpers.filterAllChat();
  217. 	    		modHelpers.addChatMessage(`${playerName} has been blocked.`)
  218. 	    		save({blockList: state.blockList});
  219. 	    	},
  220.  
  221. 	    	// Removes player from block list and makes their messages visible again
  222. 	    	unblockPlayer: playerName => {
  223. 	    		delete state.blockList[playerName];
  224. 	    		modHelpers.addChatMessage(`${playerName} has been unblocked.`);
  225. 	    		save({blockList: state.blockList});
  226.  
  227. 	    		// Make messages visible again
  228. 	    		const $chatNames = Array.from(document.querySelectorAll(`.js-line-blocked[data-chat-name="${playerName}"]`));
  229. 	    		$chatNames.forEach($name => {
  230. 	    			$name.classList.remove('js-line-blocked');
  231. 	    			const $line = $name.parentNode.parentNode.parentNode;
  232. 	    			$line.classList.remove('js-line-blocked');
  233. 	    		});
  234. 	    	},
  235.  
  236. 	    	// Pushes message to chat
  237. 	    	// TODO: The margins for the message are off slightly compared to other messages - why?
  238. 	    	addChatMessage: text => {
  239. 	    		const newMessageHTML = `
  240. 				<div class="linewrap svelte-1vrlsr3">
  241. 					<span class="time svelte-1vrlsr3">00.00</span>
  242. 					<span class="textuimod content svelte-1vrlsr3">
  243. 					<span class="capitalize channel svelte-1vrlsr3">UIMod</span>
  244. 					</span>
  245. 					<span class="svelte-1vrlsr3">${text}</span>
  246. 				</div>
  247. 	    		`;
  248.  
  249. 	    		const element = makeElement({
  250. 	    			element: 'article',
  251. 	    			class: 'line svelte-1vrlsr3',
  252. 	    			content: newMessageHTML});
  253. 	    		document.querySelector('#chat').appendChild(element);
  254. 	    	},
  255. 	    };
  256.  
  257. 	    // MAIN MODS BELOW
  258. 	    const mods = [
  259. 	    	// Creates DOM elements for custom chat filters
  260. 	    	function newChatFilters() {
  261. 		    	const $channelselect = document.querySelector('.channelselect');
  262. 		    	if (!document.querySelector(`.${CHAT_GM_CLASS}`)) {
  263. 					const $gm = makeElement({
  264. 			        	element: 'small',
  265. 			        	class: `btn border black ${CHAT_GM_CLASS} ${state.chat.GM ? '' : 'textgrey'}`,
  266. 			        	content: 'GM'
  267. 			        });
  268. 			        $channelselect.appendChild($gm);
  269. 			    }
  270. 		    },
  271.  
  272. 	    	// Wire up new chat buttons to toggle in state+ui
  273. 	    	function newChatFilterButtons() {
  274. 	    		const $chatGM = document.querySelector(`.${CHAT_GM_CLASS}`);
  275. 	    		$chatGM.addEventListener('click', () => {
  276. 	    			state.chat.GM = !state.chat.GM;
  277. 	    			$chatGM.classList.toggle('textgrey', !state.chat.GM);
  278. 	    			modHelpers.filterAllChat();
  279. 	    			save({chat: state.chat});
  280. 	    		});
  281. 	    	},
  282.  
  283. 	    	// Filter out chat in UI based on chat buttons state
  284. 	    	function filterChatObserver() {
  285. 			    const chatObserver = new MutationObserver(modHelpers.filterAllChat);
  286. 				chatObserver.observe(document.querySelector('#chat'), { attributes: true, childList: true });
  287. 	    	},
  288.  
  289. 	    	// Drag all windows by their header
  290. 	    	function draggableUIWindows() {
  291. 	    		Array.from(document.querySelectorAll('.window:not(.js-can-move)')).forEach($window => {
  292. 	    			$window.classList.add('js-can-move');
  293. 					dragElement($window, $window.querySelector('.titleframe'));
  294. 	    		});
  295. 	    	},
  296.  
  297. 	    	// Save dragged UI windows position to state
  298. 	    	function saveDraggedUIWindows() {
  299. 	    		Array.from(document.querySelectorAll('.window:not(.js-window-is-saving)')).forEach($window => {
  300. 	    			$window.classList.add('js-window-is-saving');
  301. 	    			const $draggableTarget = $window.querySelector('.titleframe');
  302. 	    			const windowName = $draggableTarget.querySelector('[name="title"]').textContent;
  303. 	    			$draggableTarget.addEventListener('mouseup', () => {
  304. 	    				state.windowsPos[windowName] = $window.getAttribute('style');
  305. 	    				save({windowsPos: state.windowsPos});
  306. 	    			});
  307. 	    		});
  308. 	    	},
  309.  
  310. 	    	// Loads draggable UI windows position from state
  311. 	    	function loadDraggedUIWindowsPositions() {
  312. 	    		Array.from(document.querySelectorAll('.window:not(.js-has-loaded-pos)')).forEach($window => {
  313. 	    			$window.classList.add('js-has-loaded-pos');
  314. 					const windowName = $window.querySelector('[name="title"]').textContent;
  315. 					const pos = state.windowsPos[windowName];
  316. 					if (pos) {
  317. 						$window.setAttribute('style', pos);
  318. 					}
  319. 	    		});
  320. 	    	},
  321.  
  322. 	    	// Makes chat resizable
  323. 	    	function resizableChat() {
  324. 	    		// Add the appropriate classes
  325. 	    		const $chatContainer = document.querySelector('#chat').parentNode;
  326. 	    		$chatContainer.classList.add('js-chat-resize');
  327.  
  328. 	    		// Load initial chat and map size
  329. 	    		if (state.chatWidth && state.chatHeight) {
  330. 		    		$chatContainer.style.width = state.chatWidth;
  331. 		    		$chatContainer.style.height = state.chatHeight;
  332. 		    	}
  333.  
  334. 	    		// Save chat size on resize
  335. 	    		const resizeObserverChat = new ResizeObserver(() => {
  336. 	    			const chatWidthStr = window.getComputedStyle($chatContainer, null).getPropertyValue('width');
  337. 	    			const chatHeightStr = window.getComputedStyle($chatContainer, null).getPropertyValue('height');
  338. 	    			save({
  339. 	    				chatWidth: chatWidthStr,
  340. 	    				chatHeight: chatHeightStr,
  341. 	    			});
  342. 	    		});
  343. 	    		resizeObserverChat.observe($chatContainer);
  344. 	    	},
  345.  
  346. 	    	// Makes map resizable
  347. 	    	function resizeableMap() {
  348. 	    		const $map = document.querySelector('.svelte-hiyby7');
  349. 	    		const $canvas = $map.querySelector('canvas');
  350. 	    		$map.classList.add('js-map-resize');
  351.  
  352. 	    		const onMapResize = () => {
  353. 	    			// Get real values of map height/width, excluding padding/margin/etc
  354. 	    			const mapWidthStr = window.getComputedStyle($map, null).getPropertyValue('width');
  355. 	    			const mapHeightStr = window.getComputedStyle($map, null).getPropertyValue('height');
  356. 	    			const mapWidth = Number(mapWidthStr.slice(0, -2));
  357. 	    			const mapHeight = Number(mapHeightStr.slice(0, -2));
  358.  
  359. 	    			// If height/width are 0 or unset, don't resize canvas
  360. 	    			if (!mapWidth || !mapHeight) {
  361. 	    				return;
  362. 	    			}
  363.  
  364. 	    			if ($canvas.width !== mapWidth) {
  365. 	    				$canvas.width = mapWidth;
  366. 	    			}
  367.  
  368. 	    			if ($canvas.height !== mapHeight) {
  369. 	    				$canvas.height = mapHeight;
  370. 	    			}
  371.  
  372. 	    			// Save map size on resize, unless map has been maximized by user
  373. 	    			if (mapWidth !== CHAT_MAXIMIZED_SIZE && mapHeight !== CHAT_MAXIMIZED_SIZE) {
  374. 	    				save({
  375. 	    					mapWidth: mapWidthStr,
  376. 	    					mapHeight: mapHeightStr,
  377. 	    				});
  378. 	    			}
  379. 	    		};
  380.  
  381. 		    	if (state.mapWidth && state.mapHeight) {
  382. 		    		$map.style.width = state.mapWidth;
  383. 		    		$map.style.height = state.mapHeight;
  384. 		    		onMapResize(); // Update canvas size on initial load of saved map size
  385. 		    	}
  386.  
  387. 	    		// On resize of map, resize canvas to match
  388. 	    		const resizeObserverMap = new ResizeObserver(onMapResize);
  389. 	    		resizeObserverMap.observe($map);
  390.  
  391. 	    		// We need to observe canvas resizes to tell when the user presses M to open the big map
  392. 	    		// At that point, we resize the map to match the canvas
  393. 	    		const triggerResize = () => {
  394. 	    			// Get real values of map height/width, excluding padding/margin/etc
  395. 	    			const mapWidthStr = window.getComputedStyle($map, null).getPropertyValue('width');
  396. 	    			const mapHeightStr = window.getComputedStyle($map, null).getPropertyValue('height');
  397. 	    			const mapWidth = Number(mapWidthStr.slice(0, -2));
  398. 	    			const mapHeight = Number(mapHeightStr.slice(0, -2));
  399.  
  400. 	    			// If height/width are 0 or unset, we don't care about resizing yet
  401. 	    			if (!mapWidth || !mapHeight) {
  402. 	    				return;
  403. 	    			}
  404.  
  405. 	    			if ($canvas.width !== mapWidth) {
  406. 	    				$map.style.width = `${$canvas.width}px`;
  407. 	    			}
  408.  
  409. 	    			if ($canvas.height !== mapHeight) {
  410. 	    				$map.style.height = `${$canvas.height}px`;
  411. 	    			}
  412. 	    		};
  413.  
  414. 	    		// We debounce the canvas resize, so it doesn't resize every single
  415. 	    		// pixel you move when resizing the DOM. If this were to happen,
  416. 	    		// resizing would constantly be interrupted. You'd have to resize a tiny bit,
  417. 	    		// lift left click, left click again to resize a tiny bit more, etc.
  418. 	    		// Resizing is smooth when we debounce this canvas.
  419. 		    	const debouncedTriggerResize = debounce(triggerResize, 200);
  420. 	    		const resizeObserverCanvas = new ResizeObserver(debouncedTriggerResize);
  421. 	    		resizeObserverCanvas.observe($canvas);
  422. 	    	},
  423.  
  424. 	    	// The last clicked UI window displays above all other UI windows
  425. 	    	// This is useful when, for example, your inventory is near the market window,
  426. 	    	// and you want the window and the tooltips to display above the market window.
  427. 	    	function selectedWindowIsTop() {
  428. 	    		Array.from(document.querySelectorAll('.window:not(.js-is-top-initd)')).forEach($window => {
  429. 	    			$window.classList.add('js-is-top-initd');
  430.  
  431. 	    			$window.addEventListener('mousedown', () => {
  432. 		    			// First, make the other is-top window not is-top
  433. 		    			const $otherWindowContainer = document.querySelector('.js-is-top');
  434. 		    			if ($otherWindowContainer) {
  435. 		    				$otherWindowContainer.classList.remove('js-is-top');
  436. 		    			}
  437.  
  438. 		    			// Then, make our window's container (the z-index container) is-top
  439. 		    			$window.parentNode.classList.add('js-is-top');
  440. 		    		});
  441. 	    		});
  442. 	    	},
  443.  
  444. 	    	function customSettings() {
  445. 	    		const $settings = document.querySelector('.divide:not(.js-settings-initd)');
  446. 	    		if (!$settings) {
  447. 	    			return;
  448. 	    		}
  449.  
  450. 	    		$settings.classList.add('js-settings-initd');
  451. 	    		const $settingsChoiceList = $settings.querySelector('.choice').parentNode;
  452. 	    		$settingsChoiceList.appendChild(makeElement({
  453. 	    			element: 'div',
  454. 	    			class: 'choice js-blocked-players',
  455. 	    			content: 'Blocked players',
  456. 	    		}));
  457.  
  458. 	    		// Upon click, we display our custom settings window UI
  459. 	    		document.querySelector('.js-blocked-players').addEventListener('click', () => {
  460. 	    			let blockedPlayersHTML = '';
  461. 	    			Object.keys(state.blockList).sort().forEach(blockedName => {
  462. 	    				blockedPlayersHTML += `
  463. 	    					<div data-player-name="${blockedName}">${blockedName}</div>
  464. 	    					<div class="btn orange js-unblock-player" data-player-name="${blockedName}">Unblock player</div>
  465.     					`;
  466. 	    			});
  467.  
  468. 	    			const customSettingsHTML = `
  469. 	    				<h3 class="textprimary">Blocked players</h3>
  470. 	    				<div class="settings uimod-settings">${blockedPlayersHTML}</div>
  471. 	    				<p></p>
  472. 	    				<div class="btn blue js-close-custom-settings">Close</div>
  473. 	    			`;
  474.  
  475. 	    			const $customSettings = makeElement({
  476. 	    				element: 'div',
  477. 	    				class: 'menu panel-black js-custom-settings uimod-custom-settings',
  478. 	    				content: customSettingsHTML,
  479. 	    			});
  480. 	    			document.body.appendChild($customSettings);
  481.  
  482. 	    			// Wire up all the unblock buttons
  483. 	    			Array.from(document.querySelectorAll('.js-unblock-player')).forEach($button => {
  484. 	    				$button.addEventListener('click', clickEvent => {
  485. 	    					const name = clickEvent.target.getAttribute('data-player-name');
  486. 	    					modHelpers.unblockPlayer(name);
  487.  
  488. 	    					// Remove the blocked player from the list
  489. 	    					Array.from(document.querySelectorAll(`[data-player-name="${name}"]`)).forEach($element => {
  490. 	    						$element.parentNode.removeChild($element);
  491. 	    					});
  492. 	    				});
  493. 	    			});
  494. 	    			// And the close button for our custom UI
  495. 	    			document.querySelector('.js-close-custom-settings').addEventListener('click', () => {
  496. 	    				const $customSettingsWindow = document.querySelector('.js-custom-settings');
  497. 	    				$customSettingsWindow.parentNode.removeChild($customSettings);
  498. 	    			});
  499. 	    		});
  500. 	    	},
  501.  
  502. 	    	// This creates the initial chat context menu (which starts as hidden)
  503. 	    	function createChatContextMenu() {
  504. 	    		if (document.querySelector('.js-chat-context-menu')) {
  505. 	    			return;
  506. 	    		}
  507.  
  508. 	    		document.body.appendChild(makeElement({
  509. 	    			element: 'div',
  510. 	    			class: 'panel context border grey js-chat-context-menu',
  511. 	    			content: `
  512. 	    				<div class="js-name">...</div>
  513. 	    				<div class="choice" name="party">Party invite</div>
  514. 	    				<div class="choice" name="whisper">Whisper</div>
  515. 	    				<div class="choice" name="block">Block</div>
  516. 	    			`,
  517. 	    		}));
  518.  
  519. 	    		const $chatContextMenu = document.querySelector('.js-chat-context-menu');
  520. 	    		$chatContextMenu.querySelector('[name="party"]').addEventListener('click', () => {
  521. 					enterTextIntoChat(`/partyinvite ${tempState.chatName}`);
  522. 					submitChat();
  523. 	    		});
  524. 	    		$chatContextMenu.querySelector('[name="whisper"]').addEventListener('click', () => {
  525. 	    			enterTextIntoChat(`/whisper ${tempState.chatName} `);
  526. 	    		});
  527. 	    		$chatContextMenu.querySelector('[name="block"]').addEventListener('click', () => {
  528. 	    			modHelpers.blockPlayer(tempState.chatName);
  529. 	    		})
  530. 	    	},
  531.  
  532. 	    	// This opens a context menu when you click a user's name in chat
  533. 	    	function chatContextMenu() {
  534. 	    		Array.from(document.querySelectorAll('.name:not(.js-is-context-menu-initd)')).forEach($name => {
  535. 	    			$name.classList.add('js-is-context-menu-initd');
  536. 	    			// Add name to element so we can target it in CSS when filtering chat for block list
  537. 	    			$name.setAttribute('data-chat-name', $name.textContent);
  538.  
  539. 	    			const showContextMenu = clickEvent => {
  540. 	    				// TODO: Is there a way to pass the name to showChatContextMenumethod, instead of storing in tempState?
  541. 	    				tempState.chatName = $name.textContent;
  542. 	    				modHelpers.showChatContextMenu($name.textContent, {x: clickEvent.pageX, y: clickEvent.pageY});
  543. 	    			};
  544. 	    			$name.addEventListener('click', showContextMenu);
  545. 	    		});
  546. 	    	},
  547. 	    ];
  548.  
  549. 	    // Add new DOM, load our stored state, wire it up, then continuously rerun specific methods whenever UI changes
  550. 	    function initialize() {
  551. 	    	// If the Hordes.io tab isn't active for long enough, it reloads the entire page, clearing this mod
  552. 	    	// We check for that and reinitialize the mod if that happens
  553. 	    	const $layout = document.querySelector('.layout');
  554. 	    	if ($layout.classList.contains('uimod-initd')) {
  555. 	    		return;
  556. 	    	}
  557.  
  558. 	    	modHelpers.addChatMessage(`Hordes UI Mod v${VERSION} by Sakaiyo has been initialized.`);
  559.  
  560. 	    	$layout.classList.add('uimod-initd')
  561. 			load();
  562. 	        mods.forEach(mod => mod());
  563.  
  564. 	        // Continuously re-run specific mods methods that need to be executed on UI change
  565. 			const rerunObserver = new MutationObserver(() => {
  566. 				// If new window appears, e.g. even if window is closed and reopened, we need to rewire it
  567. 	        	// Fun fact: Some windows always exist in the DOM, even when hidden, e.g. Inventory
  568. 	        	// 		     But some windows only exist in the DOM when open, e.g. Interaction
  569. 	        	const modsToRerun = [
  570. 	        		'saveDraggedUIWindows',
  571. 	        		'draggableUIWindows',
  572. 	        		'loadDraggedUIWindowsPositions',
  573. 	        		'selectedWindowIsTop',
  574. 	        		'customSettings',
  575. 	    		];
  576. 	        	modsToRerun.forEach(modName => {
  577. 	        		mods.find(mod => mod.name === modName)();
  578. 	        	});
  579. 			});
  580. 			rerunObserver.observe(document.querySelector('.layout > .container'), { attributes: false, childList: true, });
  581.  
  582. 			// Rerun only on chat
  583. 			const chatRerunObserver = new MutationObserver(() => {
  584. 				mods.find(mod => mod.name === 'chatContextMenu')();
  585. 				modHelpers.filterAllChat();
  586.  
  587. 			});
  588. 			chatRerunObserver.observe(document.querySelector('#chat'), { attributes: false, childList: true, });
  589.  
  590. 			// Event listeners for document.body might be kept when the game reloads, so don't reinitialize them
  591. 			if (!document.body.classList.contains('js-uimod-initd')) {
  592. 				document.body.classList.add('js-uimod-initd');
  593.  
  594. 				// Close chat context menu when clicking outside of it
  595. 				document.body.addEventListener('click', modHelpers.closeChatContextMenu);
  596. 			}
  597. 	    }
  598.  
  599. 	    // Initialize mods once UI DOM has loaded
  600. 	    const pageObserver = new MutationObserver(() => {
  601. 		    const isUiLoaded = !!document.querySelector('.layout');
  602. 		    if (isUiLoaded) {
  603. 		    	initialize();
  604. 		    }
  605. 		});
  606. 		pageObserver.observe(document.body, { attributes: true, childList: true })
  607.  
  608. 		// UTIL METHODS
  609. 		// Save to in-memory state and localStorage to retain on refresh
  610. 		// TODO: Can use this solely to save to storage - dont need to update state, we already do that ourselves a lot
  611. 		function save(items) {
  612. 			state = {
  613. 				...state,
  614. 				...items,
  615. 			};
  616. 			localStorage.setItem(STORAGE_STATE_KEY, JSON.stringify(state));
  617. 		}
  618.  
  619. 		// Load localStorage state if it exists
  620. 		// NOTE: If user is trying to load unsupported version of stored state,
  621. 		//       e.g. they just upgraded to breaking version, then we delete their stored state
  622. 		function load() {
  623. 			const storedStateJson = localStorage.getItem(STORAGE_STATE_KEY)
  624. 			if (storedStateJson) {
  625. 				const storedState = JSON.parse(storedStateJson);
  626. 				if (storedState.breakingVersion !== BREAKING_VERSION) {
  627. 					localStorage.setItem(STORAGE_STATE_KEY, JSON.stringify(state));
  628. 					return;
  629. 				}
  630. 				state = {
  631. 					...state,
  632. 					...storedState,
  633. 				};
  634. 			}
  635. 		}
  636.  
  637. 		// Nicer impl to create elements in one method call
  638. 		function makeElement(args) {
  639. 			const $node = document.createElement(args.element);
  640. 			if (args.class) { $node.className = args.class; }
  641. 			if (args.content) { $node.innerHTML = args.content; }
  642. 			if (args.src) { $node.src = args.src; }
  643. 			return $node;
  644. 		}
  645.  
  646. 		function enterTextIntoChat(text) {
  647. 			// Open chat input
  648. 			const enterEvent = new KeyboardEvent('keydown', {
  649. 			    bubbles: true, cancelable: true, keyCode: 13
  650. 			});
  651. 			document.body.dispatchEvent(enterEvent);
  652.  
  653. 			// Place text into chat
  654. 			const $input = document.querySelector('#chatinput input');
  655. 			$input.value = text;
  656.  
  657. 			// Get chat input to recognize slash commands and change the channel
  658. 			// by triggering the `input` event.
  659. 			// (Did some debugging to figure out the channel only changes when the
  660. 			//  svelte `input` event listener exists.)
  661. 			const inputEvent = new KeyboardEvent('input', {
  662. 				bubbles: true, cancelable: true
  663. 			})
  664. 			$input.dispatchEvent(inputEvent);
  665. 		}
  666.  
  667. 		function submitChat() {
  668. 			const $input = document.querySelector('#chatinput input');
  669. 			const kbEvent = new KeyboardEvent('keydown', {
  670. 			    bubbles: true, cancelable: true, keyCode: 13
  671. 			});
  672. 			$input.dispatchEvent(kbEvent);
  673. 		}
  674.  
  675. 		// Credit: https://stackoverflow.com/a/14234618 (Has been slightly modified)
  676. 		// $draggedElement is the item that will be dragged.
  677. 		// $dragTrigger is the element that must be held down to drag $draggedElement
  678. 		function dragElement($draggedElement, $dragTrigger) {
  679. 			let offset = [0,0];
  680. 			let isDown = false;
  681. 			$dragTrigger.addEventListener('mousedown', function(e) {
  682. 			    isDown = true;
  683. 			    offset = [
  684. 			        $draggedElement.offsetLeft - e.clientX,
  685. 			        $draggedElement.offsetTop - e.clientY
  686. 			    ];
  687. 			}, true);
  688. 			document.addEventListener('mouseup', function() {
  689. 			    isDown = false;
  690. 			}, true);
  691.  
  692. 			document.addEventListener('mousemove', function(e) {
  693. 			    event.preventDefault();
  694. 			    if (isDown) {
  695. 			        $draggedElement.style.left = (e.clientX + offset[0]) + 'px';
  696. 			        $draggedElement.style.top = (e.clientY + offset[1]) + 'px';
  697. 			    }
  698. 			}, true);
  699. 		}
  700.  
  701. 		// Credit: David Walsh
  702. 		function debounce(func, wait, immediate) {
  703. 			var timeout;
  704. 			return function() {
  705. 				var context = this, args = arguments;
  706. 				var later = function() {
  707. 					timeout = null;
  708. 					if (!immediate) func.apply(context, args);
  709. 				};
  710. 				var callNow = immediate && !timeout;
  711. 				clearTimeout(timeout);
  712. 				timeout = setTimeout(later, wait);
  713. 				if (callNow) func.apply(context, args);
  714. 			};
  715. 		}
  716. 	})();