☰

Hordes UI Mod

Various UI mods for Hordes.io.

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

  1. // ==UserScript==
  2. // @name         Hordes UI Mod
  3. // @version      0.190
  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: Add whisper chat filter
  12.   * TODO: Implement inventory sorting
  13.   * TODO: (Maybe) Improved healer party frames
  14.   * TODO: FIX BUG: Add support for resizing map back to saved position after minimizing it, from maximized position
  15.   * TODO: (Maybe): Add toggleable option to include chat messages to right of party frame
  16.   * TODO: Remove all reliance on svelte- classes, likely breaks with updates
  17.   * TODO: Add cooldown on skills (leverage skill icon URL, have a map for each skill icon mapping to its respective cooldown)
  18.   * TODO: Clicking names in party to add as friends
  19.   * TODO: (MAYBE, Confirm if dev is ok w it) Ctrl clicking item in inventory when Merchant is open to paste item name into search field, and search
  20.   * TODO: (MAYBE, confirm if dev is ok w it) Ctrl clicking item to copy details so user can paste in chat
  21.   */
  22. (function() {
  23.     'use strict';
  24.  
  25.     // If this version is different from the user's stored state,
  26.     // e.g. they have upgraded the version of this script and there are breaking changes,
  27.     // then their stored state will be deleted.
  28.     const BREAKING_VERSION = 1;
  29.     const VERSION = '0.190'; // Should match version in UserScript description
  30.  
  31.     const DEFAULT_CHAT_TAB_NAME = 'Untitled';
  32.     const STORAGE_STATE_KEY = 'hordesio-uimodsakaiyo-state';
  33.  
  34.     let state = {
  35.     	breakingVersion: BREAKING_VERSION,
  36.     	chat: {
  37.     		GM: true,
  38.     	},
  39.     	windowsPos: {},
  40.     	blockList: {},
  41.     	friendsList: {},
  42.     	mapOpacity: 70, // e.g. 70 = opacity: 0.7
  43.     	friendNotes: {},
  44.     	chatTabs: [],
  45.     };
  46.     // tempState is saved only between page refreshes.
  47.     const tempState = {
  48.     	// The last name clicked in chat
  49.     	chatName: null,
  50.     	lastMapWidth: 0,
  51.     	lastMapHeight: 0,
  52.     };
  53.  
  54.     // UPDATING STYLES BELOW - Must be invoked in main function
  55.     GM_addStyle(`
  56.     	/* Transparent chat bg color */
  57. 		.frame.svelte-1vrlsr3 {
  58. 			background: rgba(0,0,0,0.4);
  59. 		}
  60.  
  61. 		/* Our mod's chat message color */
  62. 		.textuimod {
  63. 			color: #00dd33;
  64. 		}
  65.  
  66. 		/* Allows windows to be moved */
  67. 		.window {
  68. 			position: relative;
  69. 		}
  70.  
  71. 		/* Allows last clicked window to appear above all other windows */
  72. 		.js-is-top {
  73. 			z-index: 9998 !important;
  74. 		}
  75. 		.panel.context:not(.commandlist) {
  76. 			z-index: 9999 !important;
  77. 		}
  78. 		/* The item icon being dragged in the inventory */
  79. 		.container.svelte-120o2pb {
  80. 			z-index: 9999 !important;
  81. 		}
  82.  
  83. 		/* All purpose hidden class */
  84. 		.js-hidden {
  85. 			display: none;
  86. 		}
  87.  
  88. 		/* Custom chat context menu, invisible by default */
  89. 		.js-chat-context-menu {
  90. 			display: none;
  91. 		}
  92.  
  93. 		.js-chat-context-menu .name {
  94. 			color: white;
  95. 			padding: 2px 4px;
  96. 		}
  97.  
  98. 		/* Allow names in chat to be clicked */
  99. 		#chat .name,
  100. 		.textwhisper .textf1 {
  101. 			pointer-events: all !important;
  102. 		}
  103.  
  104. 		/* Custom chat filter colors */
  105. 		.js-chat-gm {
  106. 			color: #a6dcd5;
  107. 		}
  108.  
  109. 		/* Class that hides chat lines */
  110. 		.js-line-hidden,
  111. 		.js-line-blocked {
  112. 			display: none;
  113. 		}
  114.  
  115. 		/* Enable chat & map resize */
  116. 		.js-chat-resize {
  117. 			resize: both;
  118. 			overflow: auto;
  119. 		}
  120. 		.js-map-resize:hover {
  121. 			resize: both;
  122. 			overflow: auto;
  123. 			direction: rtl;
  124. 		}
  125.  
  126. 		/* The browser resize icon */
  127. 		*::-webkit-resizer {
  128. 	        background: linear-gradient(to right, rgba(51, 77, 80, 0), rgba(203, 202, 165, 0.5));
  129. 		    border-radius: 8px;
  130. 		    box-shadow: 0 1px 1px rgba(0,0,0,1);
  131. 		}
  132. 		*::-moz-resizer {
  133. 	        background: linear-gradient(to right, rgba(51, 77, 80, 0), rgba(203, 202, 165, 0.5));
  134. 		    border-radius: 8px;
  135. 		    box-shadow: 0 1px 1px rgba(0,0,0,1);
  136. 		}
  137.  
  138. 		.js-map-btns {
  139. 			position: absolute;
  140. 			top: 46px;
  141. 			right: 12px;
  142. 			z-index: 999;
  143. 			width: 100px;
  144. 			height: 100px;
  145. 			text-align: right;
  146. 			display: none;
  147. 			pointer-events: all;
  148. 		}
  149. 		.js-map-btns:hover {
  150. 			display: block;
  151. 		}
  152. 		.js-map-btns button {
  153. 			border-radius: 10px;
  154. 			font-size: 18px;
  155. 			padding: 0 5px;
  156. 			background: rgba(0,0,0,0.4);
  157. 			border: 0;
  158. 			color: white;
  159. 			font-weight: bold;
  160. 			pointer: cursor;
  161. 		}
  162. 		/* On hover of map, show opacity controls */
  163. 		.js-map:hover .js-map-btns {
  164. 			display: block;
  165. 		}
  166.  
  167. 		/* Custom css for settings page, duplicates preexisting settings pane grid */
  168. 		.uimod-settings {
  169. 			display: grid;
  170. 			grid-template-columns: 2fr 3fr;
  171. 			grid-gap: 8px;
  172. 			align-items: center;
  173. 			max-height: 390px;
  174. 			margin: 0 20px;
  175. 			overflow-y: auto;
  176. 		}
  177. 		/* Friends list CSS, similar to settings but supports 4 columns */
  178. 		.uimod-friends {
  179. 			display: grid;
  180. 			grid-template-columns: 2fr 1.1fr 1.5fr 0.33fr 3fr;
  181. 			grid-gap: 8px;
  182. 			align-items: center;
  183. 			max-height: 390px;
  184. 			margin: 0 20px;
  185. 			overflow-y: auto;
  186. 		}
  187. 		/* Our custom window, closely mirrors main settings window */
  188. 		.uimod-custom-window {
  189. 			position: absolute;
  190. 			top: 100px;
  191. 		    left: 50%;
  192. 		    transform: translate(-50%, 0);
  193. 		    min-width: 350px;
  194. 		    max-width: 600px;
  195. 		    width: 90%;
  196. 		    height: 80%;
  197. 		    min-height: 350px;
  198. 		    max-height: 500px;
  199. 		    z-index: 9;
  200. 		    padding: 0px 10px 5px;
  201. 		}
  202. 		/* Custom chat tabs */
  203. 		.uimod-chat-tabs {
  204. 			position: fixed;
  205. 			margin-top: -22px;
  206. 			left: 5px;
  207. 			pointer-events: all;
  208. 			color: #5b858e;
  209. 			font-size: 12px;
  210. 			font-weight: bold;
  211. 		}
  212. 		.uimod-chat-tabs > div {
  213. 			cursor: pointer;
  214. 			background-color: rgba(0,0,0,0.4);
  215. 			border-top-right-radius: 4px;
  216. 			border-top-left-radius: 4px;
  217. 			display: inline-block;
  218. 			border: 1px black solid;
  219. 			border-bottom: 0;
  220. 			margin-right: 2px;
  221. 			padding: 3px 5px;
  222. 		}
  223. 		.uimod-chat-tabs > div:not(.js-selected-tab):hover {
  224. 			border-color: #aaa;
  225. 		}
  226. 		.uimod-chat-tabs > .js-selected-tab {
  227. 			color: #fff;
  228. 		}
  229.  
  230. 		/* Chat tab custom config */
  231. 		.uimod-chat-tab-config {
  232. 			position: absolute;
  233. 			z-index: 9999999;
  234. 		    background-color: rgba(0,0,0,0.6);
  235. 		    color: white;
  236. 		    border-radius: 3px;
  237. 		    text-align: center;
  238. 		    padding: 8px 12px 8px 6px;
  239. 		    width: 175px;
  240. 		    font-size: 14px;
  241. 		    border: 1px solid black;
  242. 		    display: none;
  243. 		}
  244.  
  245. 		.uimod-chat-tab-config-grid {
  246. 			grid-template-columns: 35% 65%;
  247. 		    display: grid;
  248. 		    grid-gap: 6px;
  249. 		    align-items: center;
  250. 		}
  251.  
  252. 		.uimod-chat-tab-config h1 {
  253. 			font-size: 16px;
  254. 			margin-top: 0;
  255. 		}
  256.  
  257. 		.uimod-chat-tab-config .btn,
  258. 		.uimod-chat-tab-config input {
  259. 			font-size: 12px;
  260. 		}
  261. 	`);
  262.  
  263.  
  264.     const modHelpers = {
  265.     	// Automated chat command helpers
  266.     	// (We've been OK'd to do these by the dev - all automation like this should receive approval from the dev)
  267.     	whisperPlayer: playerName => {
  268. 			enterTextIntoChat(`/whisper ${tempState.chatName} `);
  269.     	},
  270.     	partyPlayer: playerName => {
  271.     		enterTextIntoChat(`/partyinvite ${tempState.chatName}`);
  272. 			submitChat();
  273. 		},
  274.  
  275.     	// Filters all chat based on custom filters
  276.     	filterAllChat: () => {
  277.     		// Blocked user filter
  278.     		Object.keys(state.blockList).forEach(blockedName => {
  279.     			// Get the `.name` elements from the blocked user, if we haven't already hidden their messages
  280.     			const $blockedChatNames = Array.from(document.querySelectorAll(`[data-chat-name="${blockedName}"]:not(.js-line-blocked)`));
  281.     			// Hide each of their messages
  282.     			$blockedChatNames.forEach($name => {
  283.     				// Add the class name to $name so we can track whether it's been hidden in our CSS selector $blockedChatNames
  284.     				$name.classList.add('js-line-blocked');
  285.     				const $line = $name.parentNode.parentNode.parentNode;
  286.     				// Add the class name to $line so we can visibly hide the entire chat line
  287.     				$line.classList.add('js-line-blocked');
  288.     			});
  289.     		})
  290.  
  291.     		// Custom channel filter
  292. 	    	Object.keys(state.chat).forEach(channel => {
  293. 		  		Array.from(document.querySelectorAll(`.text${channel}.content`)).forEach($textItem => {
  294. 		  			const $line = $textItem.parentNode.parentNode;
  295. 		  			$line.classList.toggle('js-line-hidden', !state.chat[channel]);
  296. 		  		});
  297. 	    	});
  298. 		},
  299.  
  300. 		// Makes chat context menu visible and appear under the mouse
  301. 		showChatContextMenu: (name, mousePos) => {
  302. 			// Right before we show the context menu, we want to handle showing/hiding Friend/Unfriend
  303. 			const $contextMenu = document.querySelector('.js-chat-context-menu');
  304. 			$contextMenu.querySelector('[name="friend"]').classList.toggle('js-hidden', !!state.friendsList[name]);
  305. 			$contextMenu.querySelector('[name="unfriend"]').classList.toggle('js-hidden', !state.friendsList[name]);
  306.  
  307. 			$contextMenu.querySelector('.js-name').textContent = name;
  308. 			$contextMenu.setAttribute('style', `display: block; left: ${mousePos.x}px; top: ${mousePos.y}px;`);
  309. 		},
  310.  
  311. 		// Close chat context menu if clicking outside of it
  312. 		closeChatContextMenu: clickEvent => {
  313.     		const $target = clickEvent.target;
  314.     		// If clicking on name or directly on context menu, don't close it
  315.     		// Still closes if clicking on context menu item
  316.     		if ($target.classList.contains('js-is-context-menu-initd')
  317.     			|| $target.classList.contains('js-chat-context-menu')) {
  318.     			return;
  319.     		}
  320.  
  321.     		const $contextMenu = document.querySelector('.js-chat-context-menu');
  322.     		$contextMenu.style.display = 'none';
  323.     	},
  324.  
  325.     	friendPlayer: playerName => {
  326.     		if (state.friendsList[playerName]) {
  327.     			return;
  328.     		}
  329.  
  330.     		state.friendsList[playerName] = true;
  331.     		modHelpers.addChatMessage(`${playerName} has been added to your friends list.`);
  332.     		save();
  333.     	},
  334.  
  335.     	unfriendPlayer: playerName => {
  336.     		if (!state.friendsList[playerName]) {
  337.     			return;
  338.     		}
  339.  
  340.     		delete state.friendsList[playerName];
  341.     		delete state.friendNotes[playerName];
  342.     		modHelpers.addChatMessage(`${playerName} is no longer on your friends list.`);
  343.     		save();
  344.     	},
  345.  
  346.     	// Adds player to block list, to be filtered out of chat
  347.     	blockPlayer: playerName => {
  348.     		if (state.blockList[playerName]) {
  349.     			return;
  350.     		}
  351.  
  352.     		state.blockList[playerName] = true;
  353.     		modHelpers.filterAllChat();
  354.     		modHelpers.addChatMessage(`${playerName} has been blocked.`)
  355.     		save();
  356.     	},
  357.  
  358.     	// Removes player from block list and makes their messages visible again
  359.     	unblockPlayer: playerName => {
  360.     		delete state.blockList[playerName];
  361.     		modHelpers.addChatMessage(`${playerName} has been unblocked.`);
  362.     		save();
  363.  
  364.     		// Make messages visible again
  365.     		const $chatNames = Array.from(document.querySelectorAll(`.js-line-blocked[data-chat-name="${playerName}"]`));
  366.     		$chatNames.forEach($name => {
  367.     			$name.classList.remove('js-line-blocked');
  368.     			const $line = $name.parentNode.parentNode.parentNode;
  369.     			$line.classList.remove('js-line-blocked');
  370.     		});
  371.     	},
  372.  
  373.     	// Pushes message to chat
  374.     	// TODO: The margins for the message are off slightly compared to other messages - why?
  375.     	addChatMessage: text => {
  376.     		const newMessageHTML = `
  377. 			<div class="linewrap svelte-1vrlsr3">
  378. 				<span class="time svelte-1vrlsr3">00.00</span>
  379. 				<span class="textuimod content svelte-1vrlsr3">
  380. 				<span class="capitalize channel svelte-1vrlsr3">UIMod</span>
  381. 				</span>
  382. 				<span class="svelte-1vrlsr3">${text}</span>
  383. 			</div>
  384.     		`;
  385.  
  386.     		const element = makeElement({
  387.     			element: 'article',
  388.     			class: 'line svelte-1vrlsr3',
  389.     			content: newMessageHTML});
  390.     		document.querySelector('#chat').appendChild(element);
  391.     	},
  392.  
  393.     	// Gets current chat filters as represented in the UI
  394.     	// filter being true means it's invisible(filtered) in chat
  395.     	// filter being false means it's visible(unfiltered) in chat
  396.     	getCurrentChatFilters: () => {
  397.     		// Saved by the official game client
  398.     		const gameFilters = JSON.parse(localStorage.getItem('filteredChannels'));
  399.     		return {
  400.     			global: gameFilters.includes('global'),
  401.     			faction: gameFilters.includes('faction'),
  402.     			party: gameFilters.includes('party'),
  403.     			clan: gameFilters.includes('clan'),
  404.     			pvp: gameFilters.includes('pvp'),
  405.     			inv: gameFilters.includes('inv'),
  406.     			GM: !state.chat.GM, // state.chat.GM is whether or not GM chat is shown - we want whether or not GM chat should be hidden
  407.     		};
  408.     	},
  409.  
  410.     	// Shows the chat tab config window for a specific tab, displayed in a specific position
  411.     	showChatTabConfigWindow: (tabId, pos) => {
  412.     		const $chatTabConfig = document.querySelector('.js-chat-tab-config');
  413.     		const chatTab = state.chatTabs.find(tab => tab.id === tabId);
  414.     		// Update position and name in chat tab config
  415.     		$chatTabConfig.style.left = `${pos.x}px`;
  416.     		$chatTabConfig.style.top = `${pos.y}px`;
  417.     		$chatTabConfig.querySelector('.js-chat-tab-name').value = chatTab.name;
  418.  
  419.     		// Store tabId in state, to be used by the Remove/Add buttons in config window
  420.     		tempState.editedChatTabId = tabId;
  421.  
  422.     		// Hide remove button if only one chat tab left - can't remove last one
  423.     		// Show it if more than one chat tab left
  424.     		const chatTabCount = Object.keys(state.chatTabs).length;
  425.     		const $removeChatTabBtn = $chatTabConfig.querySelector('.js-remove-chat-tab');
  426.     		$removeChatTabBtn.style.display = chatTabCount < 2 ? 'none' : 'block';
  427.  
  428.     		// Show chat tab config
  429.     		$chatTabConfig.style.display = 'block';
  430.     	},
  431.  
  432.     	// Adds chat tab to DOM, sets it as selected
  433.     	// If argument chatTab is provided, will use that name+id
  434.     	// If no argument is provided, will create new tab name/id and add it to state
  435.     	// isInittingTab is optional boolean, if `true`, will _not_ set added tab as selected. Used when initializing all chat tabs on load
  436.     	// Returns newly added tabId
  437.     	addChatTab: (chatTab, isInittingTab) => {
  438.     		let tabName = DEFAULT_CHAT_TAB_NAME;
  439.     		let tabId = uuid();
  440.     		if (chatTab) {
  441.     			tabName = chatTab.name;
  442.     			tabId = chatTab.id;
  443.     		} else {
  444. 	    		// If no chat tab was provided, create it in state
  445. 	    		state.chatTabs.push({
  446. 	    			name: tabName,
  447. 	    			id: tabId,
  448. 	    			filters: modHelpers.getCurrentChatFilters(),
  449. 	    		});
  450. 	    		save();
  451.     		}
  452.  
  453.     		const $tabs = document.querySelector('.js-chat-tabs');
  454.     		const $tab = makeElement({
  455.     			element: 'div',
  456.     			content: tabName,
  457.     		});
  458.     		$tab.setAttribute('data-tab-id', tabId);
  459.  
  460.     		// Add chat tab to DOM
  461.     		$tabs.appendChild($tab);
  462.  
  463.     		// Wire chat tab up to open config on right click
  464.     		$tab.addEventListener('contextmenu', clickEvent => {
  465.     			const mousePos = {x: clickEvent.pageX, y: clickEvent.pageY};
  466.     			modHelpers.showChatTabConfigWindow(tabId, mousePos);
  467.     		});
  468.     		// And select chat tab on left click
  469.     		$tab.addEventListener('click', () => {
  470.     			modHelpers.selectChatTab(tabId);
  471.     		});
  472.  
  473.     		if (!isInittingTab) {
  474. 	    		// Select the newly added chat tab
  475. 	    		modHelpers.selectChatTab(tabId);
  476. 	    	}
  477.  
  478. 	    	// Returning tabId to all adding new tab to pass tab ID to `showChatTabConfigWindow`
  479.     		return tabId;
  480.     	},
  481.  
  482.     	// Selects chat tab [on click], updating client chat filters and custom chat filters
  483.     	selectChatTab: tabId => {
  484.     		// Remove selected class from everything, then add selected class to clicked tab
  485.     		Array.from(document.querySelectorAll('[data-tab-id]')).forEach($tab => {
  486.     			$tab.classList.remove('js-selected-tab');
  487.     		});
  488.     		const $tab = document.querySelector(`[data-tab-id="${tabId}"]`);
  489.     		$tab.classList.add('js-selected-tab');
  490.  
  491.     		const tabFilters = state.chatTabs.find(tab => tab.id === tabId).filters;
  492.     		// Simulating clicks on the filters to turn them on/off
  493.     		const $filterButtons = Array.from(document.querySelectorAll('.channelselect small'));
  494.     		Object.keys(tabFilters).forEach(filter => {
  495.     			const $filterButton = $filterButtons.find($btn => $btn.textContent === filter);
  496.     			const isCurrentlyFiltered = $filterButton.classList.contains('textgrey');
  497.  
  498.     			// If is currently filtered but filter for this tab is turned off, click it to turn filter off
  499.     			if (isCurrentlyFiltered && !tabFilters[filter]) {
  500.     				$filterButton.click();
  501.     			}
  502.     			// If it is not currently filtered but filter for this tab is turned on, click it to turn filter on
  503.     			if (!isCurrentlyFiltered && tabFilters[filter]) {
  504.     				$filterButton.click();
  505.     			}
  506.     		});
  507.  
  508.     		// Update state for our custom chat filters to match the tab's configuration, then filter chat for it
  509.     		const isGMChatVisible = !tabFilters.GM;
  510.     		modHelpers.setGMChatVisibility(isGMChatVisible);
  511.  
  512.     		// Update the selected tab in state
  513.     		state.selectedChatTabId = tabId;
  514.     		save();
  515.     	},
  516.  
  517.     	// Updates state.chat.GM and the DOM to make text white/grey depending on if gm chat is visible/filtered
  518.     	// Then filters chat and saves updated chat state
  519.     	setGMChatVisibility: isGMChatVisible => {
  520. 			const $chatGM = document.querySelector(`.js-chat-gm`);
  521. 			state.chat.GM = isGMChatVisible;
  522. 			$chatGM.classList.toggle('textgrey', !state.chat.GM);
  523. 			modHelpers.filterAllChat();
  524. 			save();
  525.     	},
  526.     };
  527.  
  528.     // MAIN MODS BELOW
  529.     const mods = [
  530.     	// Creates DOM elements for custom chat filters
  531.     	function newChatFilters() {
  532. 	    	const $channelselect = document.querySelector('.channelselect');
  533. 	    	if (!document.querySelector(`.js-chat-gm`)) {
  534. 				const $gm = makeElement({
  535. 		        	element: 'small',
  536. 		        	class: `btn border black js-chat-gm ${state.chat.GM ? '' : 'textgrey'}`,
  537. 		        	content: 'GM'
  538. 		        });
  539. 		        $channelselect.appendChild($gm);
  540. 		    }
  541. 	    },
  542.  
  543. 	    // Creates DOM elements and wires them up for custom chat tabs and chat tab config
  544. 	    // Note: Should be done after creating new custom chat filters
  545.     	function customChatTabs() {
  546.     		// Create the chat tab configuration DOM
  547.     		const $chatTabConfigurator = makeElement({
  548.     			element: 'div',
  549.     			class: 'uimod-chat-tab-config js-chat-tab-config',
  550.     			content: `
  551.     				<h1>Chat Tab Config</h1>
  552.     				<div class="uimod-chat-tab-config-grid">
  553. 	    				<div>Name</div><input type="text" class="js-chat-tab-name" value="untitled"></input>
  554. 	    				<div class="btn orange js-remove-chat-tab">Remove</div><div class="btn blue js-save-chat-tab">Ok</div>
  555. 	    			</div>
  556.     			`,
  557.     		});
  558.     		document.body.append($chatTabConfigurator);
  559.  
  560.     		// Wire it up
  561.     		document.querySelector('.js-remove-chat-tab').addEventListener('click', () => {
  562.     			// Remove the chat tab from state
  563.     			const editedChatTab = state.chatTabs.find(tab => tab.id === tempState.editedChatTabId);
  564.     			const editedChatTabIndex = state.chatTabs.indexOf(editedChatTab);
  565.     			state.chatTabs.splice(editedChatTabIndex, 1);
  566.     			
  567.     			// Remove the chat tab from DOM
  568.     			const $chatTab = document.querySelector(`[data-tab-id="${tempState.editedChatTabId}"]`);
  569.     			$chatTab.parentNode.removeChild($chatTab);
  570.  
  571.     			// If we just removed the currently selected chat tab
  572.     			if (tempState.editedChatTabId === state.selectedChatTabId) {
  573. 	    			// Select the chat tab to the left of the removed one
  574. 	    			const nextChatTabIndex = editedChatTabIndex === 0 ? 0 : editedChatTabIndex - 1;
  575. 	    			modHelpers.selectChatTab(state.chatTabs[nextChatTabIndex].id);
  576. 	    		}
  577.  
  578.     			// Close chat tab config
  579.     			document.querySelector('.js-chat-tab-config').style.display = 'none';
  580.     		});
  581.  
  582.     		document.querySelector('.js-save-chat-tab').addEventListener('click', () => {
  583.     			// Set new chat tab name in DOM
  584.     			const $chatTab = document.querySelector(`[data-tab-id="${state.selectedChatTabId}"]`);
  585.     			const newName = document.querySelector('.js-chat-tab-name').value;
  586.     			$chatTab.textContent = newName;
  587.  
  588.     			// Set new chat tab name in state
  589.     			// `selectedChatTab` is a reference on `state.chatTabs`, so updating it above still updates it in the state - we want to save that
  590.     			const selectedChatTab = state.chatTabs.find(tab => tab.id === state.selectedChatTabId);
  591.     			selectedChatTab.name = newName;
  592.     			save();
  593.  
  594.     			// Close chat tab config
  595.     			document.querySelector('.js-chat-tab-config').style.display = 'none';
  596.     		});
  597.  
  598.     		// Create the initial chat tabs HTML
  599.     		const $chat = document.querySelector('#chat');
  600.     		const $chatTabs = makeElement({
  601.     			element: 'div',
  602.     			class: 'uimod-chat-tabs js-chat-tabs',
  603.     			content: '<div class="js-chat-tab-add">+</div>',
  604.     		});
  605.  
  606.     		// Add them to the DOM
  607.     		$chat.parentNode.insertBefore($chatTabs, $chat);
  608.  
  609.     		// Add all our chat tabs from state
  610.     		state.chatTabs.forEach(chatTab => {
  611.     			const isInittingTab = true;
  612.     			modHelpers.addChatTab(chatTab, isInittingTab);
  613.     		});
  614.  
  615.     		// Wire up the add chat tab button
  616.     		document.querySelector('.js-chat-tab-add').addEventListener('click', clickEvent => {
  617.     			const chatTabId = modHelpers.addChatTab();
  618.     			const mousePos = {x: clickEvent.pageX, y: clickEvent.pageY};
  619.     			modHelpers.showChatTabConfigWindow(chatTabId, mousePos);
  620.     		});
  621.  
  622.     		// If initial chat tab doesn't exist, create it based off current filter settings
  623.     		if (!Object.keys(state.chatTabs).length) {
  624.     			const tabId = uuid();
  625.     			const chatTab = {
  626.     				name: 'Main',
  627.     				id: tabId,
  628.     				filters: modHelpers.getCurrentChatFilters()
  629.     			};
  630.     			state.chatTabs.push(chatTab);
  631.     			save();
  632.     			modHelpers.addChatTab(chatTab);
  633.     		}
  634.  
  635.     		// Wire up click event handlers onto the filters to update the selected chat tab's filters in state
  636.     		document.querySelector('.channelselect').addEventListener('click', clickEvent => {
  637.     			const $elementMouseIsOver = document.elementFromPoint(clickEvent.clientX, clickEvent.clientY);
  638.     			
  639.     			// We only want to change the filters if the user manually clicks the filter button
  640.     			// If they clicked a chat tab and we programatically set filters, we don't want to update
  641.     			// the current tab's filter state
  642.     			if (!$elementMouseIsOver.classList.contains('btn')) {
  643.     				return;
  644.     			}
  645.     			const selectedChatTab = state.chatTabs.find(tab => tab.id === state.selectedChatTabId);
  646. 				selectedChatTab.filters = modHelpers.getCurrentChatFilters();
  647. 				save();
  648.     		});
  649.  
  650.     		// Select the currently selected tab in state on mod initialization
  651.     		if (state.selectedChatTabId) {
  652.     			modHelpers.selectChatTab(state.selectedChatTabId);
  653.     		}
  654.     	},
  655.  
  656.     	// Wire up new chat buttons to toggle in state+ui
  657.     	function newChatFilterButtons() {
  658.     		const $chatGM = document.querySelector(`.js-chat-gm`);
  659.     		$chatGM.addEventListener('click', () => {
  660.     			modHelpers.setGMChatVisibility(!state.chat.GM);
  661.     		});
  662.     	},
  663.  
  664.     	// Filter out chat in UI based on chat buttons state
  665.     	function filterChatObserver() {
  666. 		    const chatObserver = new MutationObserver(modHelpers.filterAllChat);
  667. 			chatObserver.observe(document.querySelector('#chat'), { attributes: true, childList: true });
  668.     	},
  669.  
  670.     	// Drag all windows by their header
  671.     	function draggableUIWindows() {
  672.     		Array.from(document.querySelectorAll('.window:not(.js-can-move)')).forEach($window => {
  673.     			$window.classList.add('js-can-move');
  674. 				dragElement($window, $window.querySelector('.titleframe'));
  675.     		});
  676.     	},
  677.  
  678.     	// Save dragged UI windows position to state
  679.     	function saveDraggedUIWindows() {
  680.     		Array.from(document.querySelectorAll('.window:not(.js-window-is-saving)')).forEach($window => {
  681.     			$window.classList.add('js-window-is-saving');
  682.     			const $draggableTarget = $window.querySelector('.titleframe');
  683.     			const windowName = $draggableTarget.querySelector('[name="title"]').textContent;
  684.     			$draggableTarget.addEventListener('mouseup', () => {
  685.     				state.windowsPos[windowName] = $window.getAttribute('style');
  686.     				save();
  687.     			});
  688.     		});
  689.     	},
  690.  
  691.     	// Loads draggable UI windows position from state
  692.     	function loadDraggedUIWindowsPositions() {
  693.     		Array.from(document.querySelectorAll('.window:not(.js-has-loaded-pos)')).forEach($window => {
  694.     			$window.classList.add('js-has-loaded-pos');
  695. 				const windowName = $window.querySelector('[name="title"]').textContent;
  696. 				const pos = state.windowsPos[windowName];
  697. 				if (pos) {
  698. 					$window.setAttribute('style', pos);
  699. 				}
  700.     		});
  701.     	},
  702.  
  703.     	// Makes chat resizable
  704.     	function resizableChat() {
  705.     		// Add the appropriate classes
  706.     		const $chatContainer = document.querySelector('#chat').parentNode;
  707.     		$chatContainer.classList.add('js-chat-resize');
  708.  
  709.     		// Load initial chat and map size
  710.     		if (state.chatWidth && state.chatHeight) {
  711. 	    		$chatContainer.style.width = state.chatWidth;
  712. 	    		$chatContainer.style.height = state.chatHeight;
  713. 	    	}
  714.  
  715.     		// Save chat size on resize
  716.     		const resizeObserverChat = new ResizeObserver(() => {
  717.     			const chatWidthStr = window.getComputedStyle($chatContainer, null).getPropertyValue('width');
  718.     			const chatHeightStr = window.getComputedStyle($chatContainer, null).getPropertyValue('height');
  719.     			state.chatWidth = chatWidthStr;
  720.     			state.chatHeight = chatHeightStr;
  721.     			save();
  722.     		});
  723.     		resizeObserverChat.observe($chatContainer);
  724.     	},
  725.  
  726.     	// Makes map resizable
  727.     	function resizeableMap() {
  728.     		const $map = document.querySelector('.container canvas').parentNode;
  729.     		const $canvas = $map.querySelector('canvas');
  730.     		$map.classList.add('js-map-resize');
  731.  
  732.     		// Track whether we're clicking (resizing) map or not
  733.     		// Used to detect if resize changes are manually done, or from minimizing/maximizing map (with [M])
  734.     		$map.addEventListener('mousedown', () => {
  735.     			tempState.clickingMap = true;
  736.     		});
  737.     		// Sometimes the mouseup event may be registered outside of the map - we account for this
  738.     		document.body.addEventListener('mouseup', () => {
  739.     			tempState.clickingMap = false;
  740.     		});
  741.  
  742.     		const onMapResize = () => {
  743.     			// Get real values of map height/width, excluding padding/margin/etc
  744.     			const mapWidthStr = window.getComputedStyle($map, null).getPropertyValue('width');
  745.     			const mapHeightStr = window.getComputedStyle($map, null).getPropertyValue('height');
  746.     			const mapWidth = Number(mapWidthStr.slice(0, -2));
  747.     			const mapHeight = Number(mapHeightStr.slice(0, -2));
  748.  
  749.     			// If height/width are 0 or unset, don't resize canvas
  750.     			if (!mapWidth || !mapHeight) {
  751.     				return;
  752.     			}
  753.  
  754.     			if ($canvas.width !== mapWidth) {
  755.     				$canvas.width = mapWidth;
  756.     			}
  757.  
  758.     			if ($canvas.height !== mapHeight) {
  759.     				$canvas.height = mapHeight;
  760.     			}
  761.  
  762.     			// If we're clicking map, i.e. manually resizing, then save state
  763.     			// Don't save state when minimizing/maximizing map via [M]
  764.     			if (tempState.clickingMap) {
  765.     				state.mapWidth = mapWidthStr;
  766.     				state.mapHeight = mapHeightStr;
  767.     				save();
  768.     			} else {
  769.     				const isMaximized = mapWidth > tempState.lastMapWidth && mapHeight > tempState.lastMapHeight;
  770.     				if (!isMaximized) {
  771.     					$map.style.width = state.mapWidth;
  772.      					$map.style.height = state.mapHeight;
  773.     				}
  774.     			}
  775.  
  776.     			// Store last map width/height in temp state, so we know if we've minimized or maximized
  777.     			tempState.lastMapWidth = mapWidth;
  778.     			tempState.lastMapHeight = mapHeight;
  779.     		};
  780.  
  781. 	    	if (state.mapWidth && state.mapHeight) {
  782. 	    		$map.style.width = state.mapWidth;
  783. 	    		$map.style.height = state.mapHeight;
  784. 	    		onMapResize(); // Update canvas size on initial load of saved map size
  785. 	    	}
  786.  
  787.     		// On resize of map, resize canvas to match
  788.     		const resizeObserverMap = new ResizeObserver(onMapResize);
  789.     		resizeObserverMap.observe($map);
  790.  
  791.     		// We need to observe canvas resizes to tell when the user presses M to open the big map
  792.     		// At that point, we resize the map to match the canvas
  793.     		const triggerResize = () => {
  794.     			// Get real values of map height/width, excluding padding/margin/etc
  795.     			const mapWidthStr = window.getComputedStyle($map, null).getPropertyValue('width');
  796.     			const mapHeightStr = window.getComputedStyle($map, null).getPropertyValue('height');
  797.     			const mapWidth = Number(mapWidthStr.slice(0, -2));
  798.     			const mapHeight = Number(mapHeightStr.slice(0, -2));
  799.  
  800.     			// If height/width are 0 or unset, we don't care about resizing yet
  801.     			if (!mapWidth || !mapHeight) {
  802.     				return;
  803.     			}
  804.  
  805.     			if ($canvas.width !== mapWidth) {
  806.     				$map.style.width = `${$canvas.width}px`;
  807.     			}
  808.  
  809.     			if ($canvas.height !== mapHeight) {
  810.     				$map.style.height = `${$canvas.height}px`;
  811.     			}
  812.     		};
  813.  
  814.     		// We debounce the canvas resize, so it doesn't resize every single
  815.     		// pixel you move when resizing the DOM. If this were to happen,
  816.     		// resizing would constantly be interrupted. You'd have to resize a tiny bit,
  817.     		// lift left click, left click again to resize a tiny bit more, etc.
  818.     		// Resizing is smooth when we debounce this canvas.
  819. 	    	const debouncedTriggerResize = debounce(triggerResize, 50);
  820.     		const resizeObserverCanvas = new ResizeObserver(debouncedTriggerResize);
  821.     		resizeObserverCanvas.observe($canvas);
  822.     	},
  823.  
  824.     	function mapControls() {
  825.     		const $map = document.querySelector('.container canvas');
  826.     		if (!$map.parentNode.classList.contains('js-map')) {
  827.     			$map.parentNode.classList.add('js-map');
  828.     		}
  829.     		const $mapContainer = document.querySelector('.js-map');
  830.  
  831.     		// On load, update map opacity to match state
  832.     		// We modify the opacity of the canvas and the background color alpha of the parent container
  833.     		// We do this to allow our opacity buttons to be visible on hover with 100% opacity
  834.     		// (A surprisingly difficult enough task to require this implementation)
  835.     		const updateMapOpacity = () => {
  836.     			$map.style.opacity = String(state.mapOpacity / 100);
  837. 				const mapContainerBgColor = window.getComputedStyle($mapContainer, null).getPropertyValue('background-color');
  838. 				// Credit for this regexp + This opacity+rgba dual implementation: https://stackoverflow.com/questions/16065998/replacing-changing-alpha-in-rgba-javascript
  839. 				let opacity = state.mapOpacity / 100;
  840. 				// This is a slightly lazy browser workaround to fix a bug.
  841. 				// If the opacity is `1`, and it sets `rgba` to `1`, then the browser changes the
  842. 				// rgba to rgb, dropping the alpha. We could account for that and add the `alpha` back in
  843. 				// later, but setting the max opacity to very close to 1 makes sure the issue never crops up.
  844. 				// Fun fact: 0.99 retains the alpha, but setting this to 0.999 still causes the browser to drop the alpha. Rude.
  845. 				if (opacity === 1) {
  846. 					opacity = 0.99;
  847. 				}
  848. 				const newBgColor = mapContainerBgColor.replace(/[\d\.]+\)$/g, `${opacity})`);
  849. 				$mapContainer.style['background-color'] = newBgColor;
  850.  
  851. 				// Update the button opacity
  852. 				const $addBtn = document.querySelector('.js-map-opacity-add');
  853.     			const $minusBtn = document.querySelector('.js-map-opacity-minus');
  854. 				// Hide plus button if the opacity is max
  855. 				if (state.mapOpacity === 100) {
  856. 					$addBtn.style.visibility = 'hidden';
  857. 				} else {
  858. 					$addBtn.style.visibility = 'visible';
  859. 				}
  860. 				// Hide minus button if the opacity is lowest
  861. 				if (state.mapOpacity === 0) {
  862. 					$minusBtn.style.visibility = 'hidden';
  863. 				} else {
  864. 					$minusBtn.style.visibility = 'visible';
  865. 				}
  866.     		};
  867.  
  868.     		const $mapButtons = makeElement({
  869.     			element: 'div',
  870.     			class: 'js-map-btns',
  871.     			content: `
  872.     				<button class="js-map-opacity-add">+</button>
  873.     				<button class="js-map-opacity-minus">-</button>
  874.     				<button class="js-map-reset">r</button>
  875. 				`,
  876.     		});
  877.  
  878.     		// Add it right before the map container div
  879.     		$map.parentNode.insertBefore($mapButtons, $map);
  880.  
  881.     		const $addBtn = document.querySelector('.js-map-opacity-add');
  882.     		const $minusBtn = document.querySelector('.js-map-opacity-minus');
  883.     		const $resetBtn = document.querySelector('.js-map-reset');
  884.     		// Hide the buttons if map opacity is maxed/minimum
  885.     		if (state.mapOpacity === 100) {
  886.     			$addBtn.style.visibility = 'hidden';
  887.     		}
  888.     		if (state.mapOpacity === 0) {
  889.     			$minusBtn.style.visibility = 'hidden';
  890.     		}
  891.  
  892.     		// Wire it up
  893.     		$addBtn.addEventListener('click', clickEvent => {
  894.     			// Update opacity
  895.     			state.mapOpacity += 10;
  896.     			save();
  897. 				updateMapOpacity();
  898.     		});
  899.  
  900.     		$minusBtn.addEventListener('click', clickEvent => {
  901.     			// Update opacity
  902.     			state.mapOpacity -= 10;
  903.     			save();
  904. 				updateMapOpacity();
  905.     		});
  906.  
  907.     		$resetBtn.addEventListener('click', clickEvent => {
  908.     			state.mapOpacity = 70;
  909.     			state.mapWidth = '174px';
  910.     			state.mapHeight = '174px';
  911.     			save();
  912.     			updateMapOpacity();
  913.     			$mapContainer.style.width = state.mapWidth;
  914.     			$mapContainer.style.height = state.mapHeight;
  915.     		});
  916.  
  917.     		updateMapOpacity();
  918.     	},
  919.  
  920.     	// The last clicked UI window displays above all other UI windows
  921.     	// This is useful when, for example, your inventory is near the market window,
  922.     	// and you want the window and the tooltips to display above the market window.
  923.     	function selectedWindowIsTop() {
  924.     		Array.from(document.querySelectorAll('.window:not(.js-is-top-initd)')).forEach($window => {
  925.     			$window.classList.add('js-is-top-initd');
  926.  
  927.     			$window.addEventListener('mousedown', () => {
  928. 	    			// First, make the other is-top window not is-top
  929. 	    			const $otherWindowContainer = document.querySelector('.js-is-top');
  930. 	    			if ($otherWindowContainer) {
  931. 	    				$otherWindowContainer.classList.remove('js-is-top');
  932. 	    			}
  933.  
  934. 	    			// Then, make our window's container (the z-index container) is-top
  935. 	    			$window.parentNode.classList.add('js-is-top');
  936. 	    		});
  937.     		});
  938.     	},
  939.  
  940.     	// The F icon and the UI that appears when you click it
  941.     	function customFriendsList() {
  942.     		var friendsIconElement = makeElement({
  943.     			element: 'div',
  944.     			class: 'btn border black js-friends-list-icon',
  945.     			content: 'F',
  946.     		});
  947.     		// Add the icon to the right of Elixir icon
  948.     		const $elixirIcon = document.querySelector('#sysgem');
  949.     		$elixirIcon.parentNode.insertBefore(friendsIconElement, $elixirIcon.nextSibling);
  950.  
  951.     		// Create the friends list UI
  952.     		document.querySelector('.js-friends-list-icon').addEventListener('click', () => {
  953.     			if (document.querySelector('.js-friends-list')) {
  954.     				// Don't open the friends list twice.
  955.     				return;
  956.     			}
  957.     			let friendsListHTML = '';
  958.     			Object.keys(state.friendsList).sort().forEach(friendName => {
  959.     				friendsListHTML += `
  960.     					<div data-player-name="${friendName}">${friendName}</div>
  961.     					<div class="btn blue js-whisper-player" data-player-name="${friendName}">Whisper</div>
  962.     					<div class="btn blue js-party-player" data-player-name="${friendName}">Party invite</div>
  963.     					<div class="btn orange js-unfriend-player" data-player-name="${friendName}">X</div>
  964. 						<input type="text" class="js-friend-note" data-player-name="${friendName}" value="${state.friendNotes[friendName] || ''}"></input>
  965. 					`;
  966.     			});
  967.  
  968.     			const customFriendsWindowHTML = `
  969.     				<h3 class="textprimary">Friends list</h3>
  970.     				<div class="uimod-friends">${friendsListHTML}</div>
  971.     				<p></p>
  972.     				<div class="btn purp js-close-custom-friends-list">Close</div>
  973.     			`;
  974.  
  975. 				const $customFriendsList = makeElement({
  976.     				element: 'div',
  977.     				class: 'menu panel-black js-friends-list uimod-custom-window',
  978.     				content: customFriendsWindowHTML,
  979.     			});
  980.     			document.body.appendChild($customFriendsList);
  981.  
  982.     			// Wire up the buttons
  983.     			Array.from(document.querySelectorAll('.js-whisper-player')).forEach($button => {
  984.     				$button.addEventListener('click', clickEvent => {
  985.     					const name = clickEvent.target.getAttribute('data-player-name');
  986.     					modHelpers.whisperPlayer(name);
  987.     				});
  988.     			});
  989.     			Array.from(document.querySelectorAll('.js-party-player')).forEach($button => {
  990.     				$button.addEventListener('click', clickEvent => {
  991.     					const name = clickEvent.target.getAttribute('data-player-name');
  992.     					modHelpers.partyPlayer(name);
  993.     				});
  994.     			});
  995.     			Array.from(document.querySelectorAll('.js-unfriend-player')).forEach($button => {
  996.     				$button.addEventListener('click', clickEvent => {
  997.     					const name = clickEvent.target.getAttribute('data-player-name');
  998.     					modHelpers.unfriendPlayer(name);
  999.  
  1000.     					// Remove the blocked player from the list
  1001.     					Array.from(document.querySelectorAll(`.js-friends-list [data-player-name="${name}"]`)).forEach($element => {
  1002.     						$element.parentNode.removeChild($element);
  1003.     					});
  1004.     				});
  1005.     			});
  1006.     			Array.from(document.querySelectorAll('.js-friend-note')).forEach($element => {
  1007.     				$element.addEventListener('change', clickEvent => {
  1008. 	    				const name = clickEvent.target.getAttribute('data-player-name');
  1009. 	    				state.friendNotes[name] = clickEvent.target.value;
  1010. 	    			});
  1011.     			})
  1012.  
  1013.     			// The close button for our custom UI
  1014.     			document.querySelector('.js-close-custom-friends-list').addEventListener('click', () => {
  1015.     				const $friendsListWindow = document.querySelector('.js-friends-list');
  1016.     				$friendsListWindow.parentNode.removeChild($friendsListWindow);
  1017.     			});
  1018.     		});
  1019.     	},
  1020.  
  1021.     	// Custom settings UI, currently just Blocked players
  1022.     	function customSettings() {
  1023.     		const $settings = document.querySelector('.divide:not(.js-settings-initd)');
  1024.     		if (!$settings) {
  1025.     			return;
  1026.     		}
  1027.  
  1028.     		$settings.classList.add('js-settings-initd');
  1029.     		const $settingsChoiceList = $settings.querySelector('.choice').parentNode;
  1030.     		$settingsChoiceList.appendChild(makeElement({
  1031.     			element: 'div',
  1032.     			class: 'choice js-blocked-players',
  1033.     			content: 'Blocked players',
  1034.     		}));
  1035.  
  1036.     		// Upon click, we display our custom settings window UI
  1037.     		document.querySelector('.js-blocked-players').addEventListener('click', () => {
  1038.     			let blockedPlayersHTML = '';
  1039.     			Object.keys(state.blockList).sort().forEach(blockedName => {
  1040.     				blockedPlayersHTML += `
  1041.     					<div data-player-name="${blockedName}">${blockedName}</div>
  1042.     					<div class="btn orange js-unblock-player" data-player-name="${blockedName}">Unblock player</div>
  1043. 					`;
  1044.     			});
  1045.  
  1046.     			const customSettingsHTML = `
  1047.     				<h3 class="textprimary">Blocked players</h3>
  1048.     				<div class="settings uimod-settings">${blockedPlayersHTML}</div>
  1049.     				<p></p>
  1050.     				<div class="btn purp js-close-custom-settings">Close</div>
  1051.     			`;
  1052.  
  1053.     			const $customSettings = makeElement({
  1054.     				element: 'div',
  1055.     				class: 'menu panel-black js-custom-settings uimod-custom-window',
  1056.     				content: customSettingsHTML,
  1057.     			});
  1058.     			document.body.appendChild($customSettings);
  1059.  
  1060.     			// Wire up all the unblock buttons
  1061.     			Array.from(document.querySelectorAll('.js-unblock-player')).forEach($button => {
  1062.     				$button.addEventListener('click', clickEvent => {
  1063.     					const name = clickEvent.target.getAttribute('data-player-name');
  1064.     					modHelpers.unblockPlayer(name);
  1065.  
  1066.     					// Remove the blocked player from the list
  1067.     					Array.from(document.querySelectorAll(`.js-custom-settings [data-player-name="${name}"]`)).forEach($element => {
  1068.     						$element.parentNode.removeChild($element);
  1069.     					});
  1070.     				});
  1071.     			});
  1072.     			// And the close button for our custom UI
  1073.     			document.querySelector('.js-close-custom-settings').addEventListener('click', () => {
  1074.     				const $customSettingsWindow = document.querySelector('.js-custom-settings');
  1075.     				$customSettingsWindow.parentNode.removeChild($customSettingsWindow);
  1076.     			});
  1077.     		});
  1078.     	},
  1079.  
  1080.     	// This creates the initial chat context menu DOM (which starts as hidden)
  1081.     	function createChatContextMenu() {
  1082.     		if (document.querySelector('.js-chat-context-menu')) {
  1083.     			return;
  1084.     		}
  1085.  
  1086.     		let contextMenuHTML = `
  1087.     			<div class="js-name">...</div>
  1088. 				<div class="choice" name="party">Party invite</div>
  1089. 				<div class="choice" name="whisper">Whisper</div>
  1090. 				<div class="choice" name="friend">Friend</div>
  1091. 				<div class="choice" name="unfriend">Unfriend</div>
  1092. 				<div class="choice" name="block">Block</div>
  1093. 			`
  1094.     		document.body.appendChild(makeElement({
  1095.     			element: 'div',
  1096.     			class: 'panel context border grey js-chat-context-menu',
  1097.     			content: contextMenuHTML,
  1098.     		}));
  1099.  
  1100.     		const $chatContextMenu = document.querySelector('.js-chat-context-menu');
  1101.     		$chatContextMenu.querySelector('[name="party"]').addEventListener('click', () => {
  1102. 				modHelpers.partyPlayer(tempState.chatName);
  1103.     		});
  1104.     		$chatContextMenu.querySelector('[name="whisper"]').addEventListener('click', () => {
  1105.     			modHelpers.whisperPlayer(tempState.chatName);
  1106.     		});
  1107.     		$chatContextMenu.querySelector('[name="friend"]').addEventListener('click', () => {
  1108.     			modHelpers.friendPlayer(tempState.chatName);
  1109.     		});
  1110.     		$chatContextMenu.querySelector('[name="unfriend"]').addEventListener('click', () => {
  1111.     			modHelpers.unfriendPlayer(tempState.chatName);
  1112.     		});
  1113.     		$chatContextMenu.querySelector('[name="block"]').addEventListener('click', () => {
  1114.     			modHelpers.blockPlayer(tempState.chatName);
  1115.     		});
  1116.     	},
  1117.  
  1118.     	// This opens a context menu when you click a user's name in chat
  1119.     	function chatContextMenu() {
  1120.     		const addContextMenu = ($name, name) => {
  1121.     			$name.classList.add('js-is-context-menu-initd');
  1122.     			// Add name to element so we can target it in CSS when filtering chat for block list
  1123.     			$name.setAttribute('data-chat-name', name);
  1124.  
  1125.     			const showContextMenu = clickEvent => {
  1126.     				// TODO: Is there a way to pass the name to showChatContextMenumethod, instead of storing in tempState?
  1127.     				tempState.chatName = name;
  1128.     				modHelpers.showChatContextMenu(name, {x: clickEvent.pageX, y: clickEvent.pageY});
  1129.     			};
  1130.     			$name.addEventListener('click', showContextMenu); // Left click
  1131.     			$name.addEventListener('contextmenu', showContextMenu); // Right click works too
  1132.     		};
  1133.     		Array.from(document.querySelectorAll('.name:not(.js-is-context-menu-initd)')).forEach(($name) => {
  1134.     			addContextMenu($name, $name.textContent);
  1135.     		});
  1136.     		Array.from(document.querySelectorAll('.textwhisper .textf1:not(.js-is-context-menu-initd)')).forEach($whisperName => {
  1137.     			// $whisperName's textContent is "to [name]" or "from [name]", so we cut off the first word
  1138.     			let name = $whisperName.textContent.split(' ');
  1139.     			name.shift(); // Remove the first word
  1140.     			name = name.join(' ');
  1141.     			addContextMenu($whisperName, name);
  1142.     		});
  1143.     	},
  1144.     ];
  1145.  
  1146.     // Add new DOM, load our stored state, wire it up, then continuously rerun specific methods whenever UI changes
  1147.     function initialize() {
  1148.     	// If the Hordes.io tab isn't active for long enough, it reloads the entire page, clearing this mod
  1149.     	// We check for that and reinitialize the mod if that happens
  1150.     	const $layout = document.querySelector('.layout');
  1151.     	if ($layout.classList.contains('uimod-initd')) {
  1152.     		return;
  1153.     	}
  1154.  
  1155.     	modHelpers.addChatMessage(`Hordes UI Mod v${VERSION} by Sakaiyo has been initialized.`);
  1156.  
  1157.     	$layout.classList.add('uimod-initd')
  1158. 		load();
  1159.         mods.forEach(mod => mod());
  1160.  
  1161.         // Continuously re-run specific mods methods that need to be executed on UI change
  1162. 		const rerunObserver = new MutationObserver(() => {
  1163. 			// If new window appears, e.g. even if window is closed and reopened, we need to rewire it
  1164.         	// Fun fact: Some windows always exist in the DOM, even when hidden, e.g. Inventory
  1165.         	// 		     But some windows only exist in the DOM when open, e.g. Interaction
  1166.         	const modsToRerun = [
  1167.         		'saveDraggedUIWindows',
  1168.         		'draggableUIWindows',
  1169.         		'loadDraggedUIWindowsPositions',
  1170.         		'selectedWindowIsTop',
  1171.         		'customSettings',
  1172.     		];
  1173.         	modsToRerun.forEach(modName => {
  1174.         		mods.find(mod => mod.name === modName)();
  1175.         	});
  1176. 		});
  1177. 		rerunObserver.observe(document.querySelector('.layout > .container'), { attributes: false, childList: true, });
  1178.  
  1179. 		// Rerun only on chat
  1180. 		const chatRerunObserver = new MutationObserver(() => {
  1181. 			mods.find(mod => mod.name === 'chatContextMenu')();
  1182. 			modHelpers.filterAllChat();
  1183.  
  1184. 		});
  1185. 		chatRerunObserver.observe(document.querySelector('#chat'), { attributes: false, childList: true, });
  1186.  
  1187. 		// Event listeners for document.body might be kept when the game reloads, so don't reinitialize them
  1188. 		if (!document.body.classList.contains('js-uimod-initd')) {
  1189. 			document.body.classList.add('js-uimod-initd');
  1190.  
  1191. 			// Close chat context menu when clicking outside of it
  1192. 			document.body.addEventListener('click', modHelpers.closeChatContextMenu);
  1193. 		}
  1194.     }
  1195.  
  1196.     // Initialize mods once UI DOM has loaded
  1197.     const pageObserver = new MutationObserver(() => {
  1198. 	    const isUiLoaded = !!document.querySelector('.layout');
  1199. 	    if (isUiLoaded) {
  1200. 	    	initialize();
  1201. 	    }
  1202. 	});
  1203. 	pageObserver.observe(document.body, { attributes: true, childList: true })
  1204.  
  1205. 	// UTIL METHODS
  1206. 	// Save to in-memory state and localStorage to retain on refresh
  1207. 	function save(items) {
  1208. 		localStorage.setItem(STORAGE_STATE_KEY, JSON.stringify(state));
  1209. 	}
  1210.  
  1211. 	// Load localStorage state if it exists
  1212. 	// NOTE: If user is trying to load unsupported version of stored state,
  1213. 	//       e.g. they just upgraded to breaking version, then we delete their stored state
  1214. 	function load() {
  1215. 		const storedStateJson = localStorage.getItem(STORAGE_STATE_KEY)
  1216. 		if (storedStateJson) {
  1217. 			const storedState = JSON.parse(storedStateJson);
  1218. 			if (storedState.breakingVersion !== BREAKING_VERSION) {
  1219. 				localStorage.setItem(STORAGE_STATE_KEY, JSON.stringify(state));
  1220. 				return;
  1221. 			}
  1222. 			state = {
  1223. 				...state,
  1224. 				...storedState,
  1225. 			};
  1226. 		}
  1227. 	}
  1228.  
  1229. 	// Nicer impl to create elements in one method call
  1230. 	function makeElement(args) {
  1231. 		const $node = document.createElement(args.element);
  1232. 		if (args.class) { $node.className = args.class; }
  1233. 		if (args.content) { $node.innerHTML = args.content; }
  1234. 		if (args.src) { $node.src = args.src; }
  1235. 		return $node;
  1236. 	}
  1237.  
  1238. 	function enterTextIntoChat(text) {
  1239. 		// Open chat input
  1240. 		const enterEvent = new KeyboardEvent('keydown', {
  1241. 		    bubbles: true, cancelable: true, keyCode: 13
  1242. 		});
  1243. 		document.body.dispatchEvent(enterEvent);
  1244.  
  1245. 		// Place text into chat
  1246. 		const $input = document.querySelector('#chatinput input');
  1247. 		$input.value = text;
  1248.  
  1249. 		// Get chat input to recognize slash commands and change the channel
  1250. 		// by triggering the `input` event.
  1251. 		// (Did some debugging to figure out the channel only changes when the
  1252. 		//  svelte `input` event listener exists.)
  1253. 		const inputEvent = new KeyboardEvent('input', {
  1254. 			bubbles: true, cancelable: true
  1255. 		})
  1256. 		$input.dispatchEvent(inputEvent);
  1257. 	}
  1258.  
  1259. 	function submitChat() {
  1260. 		const $input = document.querySelector('#chatinput input');
  1261. 		const kbEvent = new KeyboardEvent('keydown', {
  1262. 		    bubbles: true, cancelable: true, keyCode: 13
  1263. 		});
  1264. 		$input.dispatchEvent(kbEvent);
  1265. 	}
  1266.  
  1267. 	// Credit: https://stackoverflow.com/a/14234618 (Has been slightly modified)
  1268. 	// $draggedElement is the item that will be dragged.
  1269. 	// $dragTrigger is the element that must be held down to drag $draggedElement
  1270. 	function dragElement($draggedElement, $dragTrigger) {
  1271. 		let offset = [0,0];
  1272. 		let isDown = false;
  1273. 		$dragTrigger.addEventListener('mousedown', function(e) {
  1274. 		    isDown = true;
  1275. 		    offset = [
  1276. 		        $draggedElement.offsetLeft - e.clientX,
  1277. 		        $draggedElement.offsetTop - e.clientY
  1278. 		    ];
  1279. 		}, true);
  1280. 		document.addEventListener('mouseup', function() {
  1281. 		    isDown = false;
  1282. 		}, true);
  1283.  
  1284. 		document.addEventListener('mousemove', function(e) {
  1285. 		    event.preventDefault();
  1286. 		    if (isDown) {
  1287. 		        $draggedElement.style.left = (e.clientX + offset[0]) + 'px';
  1288. 		        $draggedElement.style.top = (e.clientY + offset[1]) + 'px';
  1289. 		    }
  1290. 		}, true);
  1291. 	}
  1292.  
  1293. 	// Credit: David Walsh
  1294. 	function debounce(func, wait, immediate) {
  1295. 		var timeout;
  1296. 		return function() {
  1297. 			var context = this, args = arguments;
  1298. 			var later = function() {
  1299. 				timeout = null;
  1300. 				if (!immediate) func.apply(context, args);
  1301. 			};
  1302. 			var callNow = immediate && !timeout;
  1303. 			clearTimeout(timeout);
  1304. 			timeout = setTimeout(later, wait);
  1305. 			if (callNow) func.apply(context, args);
  1306. 		};
  1307. 	}
  1308.  
  1309.  
  1310. 	// Credit: https://gist.github.com/jcxplorer/823878
  1311. 	// Generate random UUID string
  1312. 	function uuid() {
  1313. 		var uuid = "", i, random;
  1314. 		for (i = 0; i < 32; i++) {
  1315. 			random = Math.random() * 16 | 0;
  1316. 			if (i == 8 || i == 12 || i == 16 || i == 20) {
  1317. 				uuid += "-";
  1318. 			}
  1319. 			uuid += (i == 12 ? 4 : (i == 16 ? (random & 3 | 8) : random)).toString(16);
  1320. 		}
  1321. 		return uuid;
  1322. 	}
  1323. })();