☰

Hordes UI Mod

Various UI mods for Hordes.io.

目前為 2019-12-23 提交的版本，檢視 最新版本。

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