☰

Sigmally Fixes V2

Easily 3X your FPS on Sigmally.com + many bug fixes + great for multiboxing + supports SigMod

当前为 2024-06-13 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Sigmally Fixes V2
  3. // @version      2.2.9
  4. // @description  Easily 3X your FPS on Sigmally.com + many bug fixes + great for multiboxing + supports SigMod
  5. // @author       8y8x
  6. // @match        https://*.sigmally.com/*
  7. // @license      MIT
  8. // @grant        none
  9. // @namespace    https://8y8x.dev/sigmally-fixes
  10. // @compatible   chrome Recommended for all users, works perfectly out of the box
  11. // ==/UserScript==
  12.  
  13. // @ts-check
  14. /* eslint
  15. 	camelcase: 'error',
  16. 	comma-dangle: ['error', 'always-multiline'],
  17. 	indent: ['error', 'tab', { SwitchCase: 1 }],
  18. 	max-len: ['error', { code: 120 }],
  19. 	no-console: ['error', { allow: ['warn', 'error'] }],
  20. 	no-trailing-spaces: 'error',
  21. 	quotes: ['error', 'single'],
  22. 	semi: 'error',
  23. */ // a light eslint configuration that doesn't compromise code quality
  24. 'use strict';
  25.  
  26. (async () => {
  27. 	////////////////////////////////
  28. 	// Define Auxiliary Functions //
  29. 	////////////////////////////////
  30. 	const aux = (() => {
  31. 		const aux = {};
  32.  
  33. 		/**
  34. 		 * @template T
  35. 		 * @param {T} x
  36. 		 * @param {string} err should be readable and easily translatable
  37. 		 * @returns {T extends (null | undefined | false | 0) ? never : T}
  38. 		 */
  39. 		aux.require = (x, err) => {
  40. 			if (!x) {
  41. 				err = '[Sigmally Fixes]: ' + err;
  42. 				prompt(err, err); // use prompt, so people can paste the error message into google translate
  43. 				throw err;
  44. 			}
  45.  
  46. 			return /** @type {any} */ (x);
  47. 		};
  48.  
  49. 		/**
  50. 		 * consistent exponential easing relative to 60fps.
  51. 		 * for example, with a factor of 2, o=0, n=1:
  52. 		 * - at 60fps, 0.5 is returned.
  53. 		 * - at 30fps (after 2 frames), 0.75 is returned.
  54. 		 * - at 15fps (after 4 frames), 0.875 is returned.
  55. 		 * - at 120fps, 0.292893 is returned. if you called this again with o=0.292893, n=1, you would get 0.5.
  56. 		 *
  57. 		 * @param {number} o
  58. 		 * @param {number} n
  59. 		 * @param {number} factor
  60. 		 * @param {number} dt in seconds
  61. 		 */
  62. 		aux.exponentialEase = (o, n, factor, dt) => {
  63. 			return o + (n - o) * (1 - (1 - 1 / factor)**(60 * dt));
  64. 		};
  65.  
  66. 		/**
  67. 		 * @param {string} hex
  68. 		 * @returns {[number, number, number]}
  69. 		 */
  70. 		aux.hex2rgb = hex => {
  71. 			if (hex.length === 4) {
  72. 				return [
  73. 					(parseInt(hex[1], 16) || 0) / 15,
  74. 					(parseInt(hex[2], 16) || 0) / 15,
  75. 					(parseInt(hex[3], 16) || 0) / 15,
  76. 				];
  77. 			} else if (hex.length === 7) {
  78. 				return [
  79. 					(parseInt(hex.slice(1, 3), 16) || 0) / 255,
  80. 					(parseInt(hex.slice(3, 5), 16) || 0) / 255,
  81. 					(parseInt(hex.slice(5, 7), 16) || 0) / 255,
  82. 				];
  83. 			} else {
  84. 				return [0, 0, 0];
  85. 			}
  86. 		};
  87.  
  88. 		/** @param {[number, number, number]} rgb */
  89. 		aux.rgb2hex = rgb => {
  90. 			return [
  91. 				'#',
  92. 				Math.floor(rgb[0] * 255).toString(16).padStart(2, '0'),
  93. 				Math.floor(rgb[1] * 255).toString(16).padStart(2, '0'),
  94. 				Math.floor(rgb[2] * 255).toString(16).padStart(2, '0'),
  95. 			].join('');
  96. 		};
  97.  
  98. 		/** @param {string} name */
  99. 		aux.parseName = name => {
  100. 			const match = name.match(/^\{.*?\}(.*)$/);
  101. 			if (match)
  102. 				name = match[1];
  103.  
  104. 			return name || 'An unnamed cell';
  105. 		};
  106.  
  107. 		/** @param {string} skin */
  108. 		aux.parseSkin = skin => {
  109. 			if (!skin) return skin;
  110. 			skin = skin.replace('1%', '').replace('2%', '').replace('3%', '');
  111. 			return '/static/skins/' + skin + '.png';
  112. 		};
  113.  
  114. 		/** @type {object | undefined} */
  115. 		aux.sigmod = undefined;
  116. 		setInterval(() => {
  117. 			// @ts-expect-error
  118. 			aux.sigmod = window.sigmod?.settings;
  119. 		}, 50);
  120.  
  121. 		/**
  122. 		 * @param {string} selector
  123. 		 * @param {boolean} value
  124. 		 */
  125. 		aux.setting = (selector, value) => {
  126. 			/** @type {HTMLInputElement | null} */
  127. 			const el = document.querySelector(selector);
  128. 			return el ? el.checked : value;
  129. 		};
  130.  
  131. 		/**
  132. 		 * Only changes sometimes, like when your skin is updated
  133. 		 * @type {object | undefined}
  134. 		 */
  135. 		aux.settings = undefined;
  136. 		function settings() {
  137. 			try {
  138. 				aux.settings = JSON.parse(localStorage.getItem('settings') ?? '');
  139. 			} catch (_) {}
  140. 		}
  141.  
  142. 		settings();
  143. 		setInterval(settings, 50);
  144. 		// apply saved gamemode because sigmally fixes connects before the main game even loads
  145. 		if (aux.settings?.gamemode) {
  146. 			/** @type {HTMLSelectElement | null} */
  147. 			const gamemode = document.querySelector('select#gamemode');
  148. 			if (gamemode)
  149. 				gamemode.value = aux.settings.gamemode;
  150. 		}
  151.  
  152. 		const trimCtx = aux.require(
  153. 			document.createElement('canvas').getContext('2d'),
  154. 			'Unable to get 2D context for text utilities. This is probably your browser being dumb, maybe reload ' +
  155. 			'the page?',
  156. 		);
  157. 		trimCtx.font = '20px Ubuntu';
  158. 		/**
  159. 		 * trims text to a max of 250px at 20px font, same as vanilla sigmally
  160. 		 * @param {string} text
  161. 		 */
  162. 		aux.trim = text => {
  163. 			while (trimCtx.measureText(text).width > 250)
  164. 				text = text.slice(0, -1);
  165.  
  166. 			return text;
  167. 		};
  168.  
  169. 		/*
  170. 			If you have Sigmally open in two tabs and you're playing with an account, one has an outdated token while
  171. 			the other has the latest one. This causes problems because the tab with the old token does not work properly
  172. 			during the game (skin, XP) To fix this, the latest token is sent to the previously opened tab. This way you
  173. 			can collect XP in both tabs and use your selected skin.
  174. 			@czrsd
  175. 		*/
  176. 		/** @type {{ token: string, updated: number } | undefined} */
  177. 		aux.token = undefined;
  178. 		const tokenChannel = new BroadcastChannel('sigfix-token');
  179. 		tokenChannel.addEventListener('message', msg => {
  180. 			/** @type {{ token: string, updated: number }} */
  181. 			const token = msg.data;
  182. 			if (!aux.token || aux.token.updated < token.updated)
  183. 				aux.token = token;
  184. 		});
  185.  
  186. 		/** @type {object | undefined} */
  187. 		aux.userData = undefined;
  188. 		// this is the best method i've found to get the userData object, since game.js uses strict mode
  189. 		Object.defineProperty(window, 'fetch', {
  190. 			value: new Proxy(fetch, {
  191. 				apply: (target, thisArg, args) => {
  192. 					let url = args[0];
  193. 					const data = args[1];
  194. 					if (typeof url === 'string') {
  195. 						// game.js doesn't think we're connected to a server, we default to eu0 because that's the
  196. 						// default everywhere else
  197. 						if (url.includes('/userdata/')) url = url.replace('///', '//eu0.sigmally.com/server/');
  198.  
  199. 						// patch the current token in the url and body of the request
  200. 						if (aux.token) {
  201. 							// 128 hex characters surrounded by non-hex characters (lookahead and lookbehind)
  202. 							const tokenTest = /(?<![0-9a-fA-F])[0-9a-fA-F]{128}(?![0-9a-fA-F])/g;
  203. 							url = url.replaceAll(tokenTest, aux.token.token);
  204. 							if (typeof data?.body === 'string')
  205. 								data.body = data.body.replaceAll(tokenTest, aux.token.token);
  206. 						}
  207.  
  208. 						args[0] = url;
  209. 						args[1] = data;
  210. 					}
  211.  
  212. 					return target.apply(thisArg, args).then(res => new Proxy(res, {
  213. 						get: (target, prop, _receiver) => {
  214. 							if (prop !== 'json') {
  215. 								const val = target[prop];
  216. 								if (typeof val === 'function')
  217. 									return val.bind(target);
  218. 								else
  219. 									return val;
  220. 							}
  221.  
  222. 							return () => target.json().then(obj => {
  223. 								if (obj?.body?.user) {
  224. 									aux.userData = obj.body.user;
  225. 									// NaN if invalid / undefined
  226. 									let updated = Number(new Date(aux.userData.updateTime));
  227. 									if (Number.isNaN(updated))
  228. 										updated = Date.now();
  229.  
  230. 									if (!aux.token || updated >= aux.token.updated) {
  231. 										aux.token = { token: aux.userData.token, updated };
  232. 										tokenChannel.postMessage(aux.token);
  233. 									}
  234. 								}
  235.  
  236. 								return obj;
  237. 							});
  238. 						},
  239. 					}));
  240. 				},
  241. 			}),
  242. 		});
  243.  
  244. 		/** @param {number} ms */
  245. 		aux.wait = ms => new Promise(resolve => setTimeout(resolve, ms));
  246.  
  247. 		return aux;
  248. 	})();
  249.  
  250.  
  251.  
  252. 	////////////////////////
  253. 	// Destroy Old Client //
  254. 	////////////////////////
  255. 	const destructor = await (async () => {
  256. 		// #1 : kill the rendering process
  257. 		const oldRQA = requestAnimationFrame;
  258. 		window.requestAnimationFrame = function(fn) {
  259. 			try {
  260. 				throw new Error();
  261. 			} catch (err) {
  262. 				// prevent drawing the game, but do NOT prevent saving settings (which is called on RQA)
  263. 				if (!err.stack.includes('/game.js') || err.stack.includes('HTML'))
  264. 					return oldRQA(fn);
  265. 			}
  266.  
  267. 			return -1;
  268. 		};
  269.  
  270. 		// #2 : kill access to using a WebSocket
  271. 		const realWebSocket = WebSocket;
  272. 		Object.defineProperty(window, 'WebSocket', new Proxy(WebSocket, {
  273. 			construct(_target, argArray, _newTarget) {
  274. 				if (argArray[0]?.includes('sigmally.com')) {
  275. 					throw new Error('Nope :) - hooked by Sigmally Fixes');
  276. 				}
  277.  
  278. 				// @ts-expect-error
  279. 				return new oldWS(...argArray);
  280. 			},
  281. 		}));
  282.  
  283. 		/** @type {WeakSet<WebSocket>} */
  284. 		const safeWebSockets = new WeakSet();
  285. 		let realWsSend = WebSocket.prototype.send;
  286. 		WebSocket.prototype.send = function() {
  287. 			if (!safeWebSockets.has(this) && this.url.includes('sigmally.com')) {
  288. 				this.onclose = null;
  289. 				this.close();
  290. 				throw new Error('Nope :) - hooked by Sigmally Fixes');
  291. 			}
  292.  
  293. 			return realWsSend.apply(this, arguments);
  294. 		};
  295.  
  296. 		// #3 : prevent keys from being registered by the game
  297. 		setInterval(() => {
  298. 			onkeydown = null;
  299. 			onkeyup = null;
  300. 		}, 50);
  301.  
  302. 		return { realWebSocket, safeWebSockets };
  303. 	})();
  304.  
  305.  
  306.  
  307. 	/////////////////////
  308. 	// Prepare Game UI //
  309. 	/////////////////////
  310. 	const ui = (() => {
  311. 		const ui = {};
  312.  
  313. 		(() => {
  314. 			const title = document.querySelector('#title');
  315. 			if (!title) return;
  316.  
  317. 			const watermark = document.createElement('span');
  318. 			watermark.innerHTML = '<a href="https://greasyfork.org/scripts/483587/versions" target="_blank">Sigmally Fixes 2.2.9</a> by yx';
  319. 			title.insertAdjacentElement('afterend', watermark);
  320. 		})();
  321.  
  322. 		ui.game = (() => {
  323. 			const game = {};
  324.  
  325. 			const newCanvas = document.createElement('canvas');
  326. 			newCanvas.style.cssText = `background: #003; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0;
  327. 				z-index: 1;`;
  328. 			game.canvas = newCanvas;
  329. 			(document.querySelector('body div') ?? document.body).appendChild(newCanvas);
  330.  
  331. 			/** @type {HTMLCanvasElement | null} */
  332. 			const oldCanvas = document.querySelector('canvas#canvas');
  333. 			if (oldCanvas) {
  334. 				// leave the old canvas so the old client can actually run
  335. 				oldCanvas.style.display = 'none';
  336.  
  337. 				// forward macro inputs from the canvas to the old one - this is for sigmod mouse button controls
  338. 				newCanvas.addEventListener('mousedown', e => oldCanvas.dispatchEvent(new MouseEvent('mousedown', e)));
  339. 				newCanvas.addEventListener('mouseup', e => oldCanvas.dispatchEvent(new MouseEvent('mouseup', e)));
  340. 				// forward mouse movements from the old canvas to the window - this is for sigmod keybinds that move
  341. 				// the mouse
  342. 				oldCanvas.addEventListener('mousemove', e => dispatchEvent(new MouseEvent('mousemove', e)));
  343. 			}
  344.  
  345. 			const gl = aux.require(
  346. 				newCanvas.getContext('webgl2'),
  347. 				'Couldn\'t get WebGL2 context. This is probably your browser being dumb and it should resolve itself ' +
  348. 				'after a while.',
  349. 			);
  350.  
  351. 			game.gl = gl;
  352.  
  353. 			// indicate that we will restore the context
  354. 			newCanvas.addEventListener('webglcontextlost', e => {
  355. 				e.preventDefault(); // signal that we want to restore the context
  356. 				// cleanup old caches (after render), as we can't do this within initWebGL()
  357. 				render.resetTextCache();
  358. 				render.resetTextureCache();
  359. 			});
  360. 			newCanvas.addEventListener('webglcontextrestored', () => initWebGL());
  361.  
  362. 			game.viewportScale = 1;
  363. 			function resize() {
  364. 				newCanvas.width = Math.floor(innerWidth * devicePixelRatio);
  365. 				newCanvas.height = Math.floor(innerHeight * devicePixelRatio);
  366. 				game.viewportScale = Math.max(innerWidth / 1920, innerHeight / 1080);
  367. 				game.gl.viewport(0, 0, newCanvas.width, newCanvas.height);
  368. 			}
  369.  
  370. 			addEventListener('resize', resize);
  371. 			resize();
  372.  
  373. 			return game;
  374. 		})();
  375.  
  376. 		ui.stats = (() => {
  377. 			const container = document.createElement('div');
  378. 			container.style.cssText = 'position: fixed; top: 10px; left: 10px; width: 400px; height: fit-content; \
  379. 				user-select: none; z-index: 2; transform-origin: top left;';
  380. 			document.body.appendChild(container);
  381.  
  382. 			const score = document.createElement('div');
  383. 			score.style.cssText = 'font-family: Ubuntu; font-size: 30px; color: #fff; line-height: 1.0;';
  384. 			container.appendChild(score);
  385.  
  386. 			const measures = document.createElement('div');
  387. 			measures.style.cssText = 'font-family: Ubuntu; font-size: 20px; color: #fff; line-height: 1.1;';
  388. 			container.appendChild(measures);
  389.  
  390. 			const misc = document.createElement('div');
  391. 			// white-space: pre; allows using \r\n to insert line breaks
  392. 			misc.style.cssText = 'font-family: Ubuntu; font-size: 14px; color: #fff; white-space: pre; \
  393. 				line-height: 1.1; opacity: 0.5;';
  394. 			container.appendChild(misc);
  395.  
  396. 			/** @param {object} statData */
  397. 			function update(statData) {
  398. 				let uptime;
  399. 				if (statData.uptime < 60) {
  400. 					uptime = '<1min';
  401. 				} else {
  402. 					uptime = Math.floor(statData.uptime / 60 % 60) + 'min';
  403. 					if (statData.uptime >= 60 * 60)
  404. 						uptime = Math.floor(statData.uptime / 60 / 60 % 24) + 'hr ' + uptime;
  405. 					if (statData.uptime >= 24 * 60 * 60)
  406. 						uptime = Math.floor(statData.uptime / 24 / 60 / 60 % 60) + 'd ' + uptime;
  407. 				}
  408.  
  409. 				misc.textContent = [
  410. 					`${statData.name} (${statData.mode})`,
  411. 					`${statData.playersTotal} / ${statData.playersLimit} players`,
  412. 					`${statData.playersAlive} playing`,
  413. 					`${statData.playersSpect} spectating`,
  414. 					`${(statData.update * 2.5).toFixed(1)}% load @ ${uptime}`,
  415. 				].join('\r\n');
  416. 			}
  417.  
  418. 			function matchTheme() {
  419. 				let color = aux.setting('input#darkTheme', true) ? '#fff' : '#000';
  420. 				score.style.color = color;
  421. 				measures.style.color = color;
  422. 				misc.style.color = color;
  423. 			}
  424.  
  425. 			matchTheme();
  426.  
  427. 			return { container, score, measures, misc, update, matchTheme };
  428. 		})();
  429.  
  430. 		ui.leaderboard = (() => {
  431. 			const container = document.createElement('div');
  432. 			container.style.cssText = 'position: fixed; top: 10px; right: 10px; width: 200px; height: fit-content; \
  433. 				user-select: none; z-index: 2; background: #0006; padding: 15px 5px; transform-origin: top right; \
  434. 				display: none;';
  435. 			document.body.appendChild(container);
  436.  
  437. 			const title = document.createElement('div');
  438. 			title.style.cssText = 'font-family: Ubuntu; font-size: 30px; color: #fff; text-align: center; width: 100%;';
  439. 			title.textContent = 'Leaderboard';
  440. 			container.appendChild(title);
  441.  
  442. 			const linesContainer = document.createElement('div');
  443. 			linesContainer.style.cssText = 'font-family: Ubuntu; font-size: 20px; line-height: 1.2; width: 100%; \
  444. 				height: fit-content; text-align: center; white-space: pre; overflow: hidden;';
  445. 			container.appendChild(linesContainer);
  446.  
  447. 			const lines = [];
  448. 			for (let i = 0; i < 11; ++i) {
  449. 				const line = document.createElement('div');
  450. 				line.style.display = 'none';
  451. 				linesContainer.appendChild(line);
  452. 				lines.push(line);
  453. 			}
  454.  
  455. 			function update() {
  456. 				world.leaderboard.forEach((entry, i) => {
  457. 					const line = lines[i];
  458. 					if (!line) return;
  459.  
  460. 					line.style.display = 'block';
  461. 					line.textContent = `${entry.place ?? i + 1}. ${entry.name}`;
  462. 					if (entry.me)
  463. 						line.style.color = '#faa';
  464. 					else if (entry.sub)
  465. 						line.style.color = '#ffc826';
  466. 					else
  467. 						line.style.color = '#fff';
  468. 				});
  469.  
  470. 				for (let i = world.leaderboard.length; i < lines.length; ++i)
  471. 					lines[i].style.display = 'none';
  472. 			}
  473.  
  474. 			return { container, title, linesContainer, lines, update };
  475. 		})();
  476.  
  477. 		/** @type {HTMLElement} */
  478. 		const mainMenu = aux.require(
  479. 			document.querySelector('#__line1')?.parentElement,
  480. 			'Can\'t find the main menu UI. Try reloading the page?',
  481. 		);
  482.  
  483. 		/** @type {HTMLElement} */
  484. 		const statsContainer = aux.require(
  485. 			document.querySelector('#__line2'),
  486. 			'Can\'t find the death screen UI. Try reloading the page?',
  487. 		);
  488.  
  489. 		/** @type {HTMLElement} */
  490. 		const continueButton = aux.require(
  491. 			document.querySelector('#continue_button'),
  492. 			'Can\'t find the continue button (on death). Try reloading the page?',
  493. 		);
  494.  
  495. 		/** @type {HTMLElement | null} */
  496. 		const menuLinks = document.querySelector('#menu-links');
  497. 		/** @type {HTMLElement | null} */
  498. 		const overlay = document.querySelector('#overlays');
  499.  
  500. 		// sigmod uses this to detect if the menu is closed or not, otherwise this is unnecessary
  501. 		/** @type {HTMLElement | null} */
  502. 		const menuWrapper = document.querySelector('#menu-wrapper');
  503.  
  504. 		let escOverlayVisible = true;
  505. 		/**
  506. 		 * @param {boolean} [show]
  507. 		 */
  508. 		ui.toggleEscOverlay = show => {
  509. 			escOverlayVisible = show ?? !escOverlayVisible;
  510. 			if (escOverlayVisible) {
  511. 				mainMenu.style.display = '';
  512. 				if (overlay) overlay.style.display = '';
  513. 				if (menuLinks) menuLinks.style.display = '';
  514. 				if (menuWrapper) menuWrapper.style.display = '';
  515.  
  516. 				ui.deathScreen.hide();
  517. 			} else {
  518. 				mainMenu.style.display = 'none';
  519. 				if (overlay) overlay.style.display = 'none';
  520. 				if (menuLinks) menuLinks.style.display = 'none';
  521. 				if (menuWrapper) menuWrapper.style.display = 'none';
  522. 			}
  523. 		};
  524.  
  525. 		ui.escOverlayVisible = () => escOverlayVisible;
  526.  
  527. 		ui.deathScreen = (() => {
  528. 			const deathScreen = {};
  529.  
  530. 			continueButton.addEventListener('click', () => {
  531. 				ui.toggleEscOverlay(true);
  532. 			});
  533.  
  534. 			// i'm not gonna buy a boost to try and figure out how this thing works
  535. 			/** @type {HTMLElement | null} */
  536. 			const bonus = document.querySelector('#menu__bonus');
  537. 			if (bonus) bonus.style.display = 'none';
  538.  
  539. 			/**
  540. 			 * @param {{ foodEaten: number, highestScore: number, highestPosition: number,
  541. 			 * spawnedAt: number | undefined }} stats
  542. 			 */
  543. 			deathScreen.show = stats => {
  544. 				const foodEatenElement = document.querySelector('#food_eaten');
  545. 				if (foodEatenElement)
  546. 					foodEatenElement.textContent = stats.foodEaten.toString();
  547.  
  548. 				const highestMassElement = document.querySelector('#highest_mass');
  549. 				if (highestMassElement)
  550. 					highestMassElement.textContent = Math.round(stats.highestScore).toString();
  551.  
  552. 				const highestPositionElement = document.querySelector('#top_leaderboard_position');
  553. 				if (highestPositionElement)
  554. 					highestPositionElement.textContent = stats.highestPosition.toString();
  555.  
  556. 				const timeAliveElement = document.querySelector('#time_alive');
  557. 				if (timeAliveElement) {
  558. 					let time;
  559. 					if (stats.spawnedAt === undefined)
  560. 						time = 0;
  561. 					else
  562. 						time = (performance.now() - stats.spawnedAt) / 1000;
  563. 					const hours = Math.floor(time / 60 / 60);
  564. 					const mins = Math.floor(time / 60 % 60);
  565. 					const seconds = Math.floor(time % 60);
  566.  
  567. 					timeAliveElement.textContent =  `${hours ? hours + ' h' : ''} ${mins ? mins + ' m' : ''} `
  568. 						+ `${seconds ? seconds + ' s' : ''}`;
  569. 				}
  570.  
  571. 				statsContainer.classList.remove('line--hidden');
  572. 				ui.toggleEscOverlay(false);
  573. 				if (overlay) overlay.style.display = '';
  574.  
  575. 				stats.foodEaten = 0;
  576. 				stats.highestScore = 0;
  577. 				stats.highestPosition = 0;
  578. 				stats.spawnedAt = undefined;
  579.  
  580. 				// refresh ads... ...yep
  581. 				const { adSlot4, adSlot5, adSlot6, googletag } = /** @type {any} */ (window);
  582. 				if (googletag) {
  583. 					googletag.cmd.push(() => googletag.display(adSlot4));
  584. 					googletag.cmd.push(() => googletag.display(adSlot5));
  585. 					googletag.cmd.push(() => googletag.display(adSlot6));
  586. 				}
  587. 			};
  588.  
  589. 			deathScreen.hide = () => {
  590. 				const shown = !statsContainer?.classList.contains('line--hidden');
  591. 				statsContainer?.classList.add('line--hidden');
  592. 				const { googletag } = /** @type {any} */ (window);
  593. 				if (shown && googletag) {
  594. 					googletag.cmd.push(() => googletag.pubads().refresh());
  595. 				}
  596. 			};
  597.  
  598. 			return deathScreen;
  599. 		})();
  600.  
  601. 		ui.minimap = (() => {
  602. 			const canvas = document.createElement('canvas');
  603. 			canvas.style.cssText = 'position: absolute; bottom: 0; right: 0; background: #0006; width: 200px; \
  604. 				height: 200px; z-index: 2; user-select: none;';
  605. 			canvas.width = canvas.height = 200;
  606. 			document.body.appendChild(canvas);
  607.  
  608. 			const ctx = aux.require(
  609. 				canvas.getContext('2d'),
  610. 				'Unable to get 2D context for the minimap. This is probably your browser being dumb, maybe reload ' +
  611. 				'the page?',
  612. 			);
  613.  
  614. 			return { canvas, ctx };
  615. 		})();
  616.  
  617. 		ui.chat = (() => {
  618. 			const chat = {};
  619.  
  620. 			const block = aux.require(
  621. 				document.querySelector('#chat_block'),
  622. 				'Can\'t find the chat UI. Try reloading the page?',
  623. 			);
  624.  
  625. 			/**
  626. 			 * @param {ParentNode} root
  627. 			 * @param {string} selector
  628. 			 */
  629. 			function clone(root, selector) {
  630. 				/** @type {HTMLElement} */
  631. 				const old = aux.require(
  632. 					root.querySelector(selector),
  633. 					`Can't find this chat element: ${selector}. Try reloading the page?`,
  634. 				);
  635.  
  636. 				const el = /** @type {HTMLElement} */ (old.cloneNode(true));
  637. 				el.id = '';
  638. 				old.style.display = 'none';
  639. 				old.insertAdjacentElement('afterend', el);
  640.  
  641. 				return el;
  642. 			}
  643.  
  644. 			// can't just replace the chat box - otherwise sigmod can't hide it - so we make its children invisible
  645. 			// elements grabbed with clone() are only styled by their class, not id
  646. 			const toggle = clone(document, '#chat_vsbltyBtn');
  647. 			const scrollbar = clone(document, '#chat_scrollbar');
  648. 			const thumb = clone(scrollbar, '#chat_thumb');
  649.  
  650. 			const input = chat.input = /** @type {HTMLInputElement} */ (aux.require(
  651. 				document.querySelector('#chat_textbox'),
  652. 				'Can\'t find the chat textbox. Try reloading the page?',
  653. 			));
  654.  
  655. 			const list = document.createElement('div');
  656. 			list.style.cssText = 'width: 400px; height: 182px; position: absolute; bottom: 54px; left: 46px; \
  657. 				overflow: hidden; user-select: none; z-index: 301;';
  658. 			block.appendChild(list);
  659.  
  660. 			let toggled = true;
  661. 			toggle.style.borderBottomLeftRadius = '10px'; // a bug fix :p
  662. 			toggle.addEventListener('click', () => {
  663. 				toggled = !toggled;
  664. 				input.style.display = toggled ? '' : 'none';
  665. 				scrollbar.style.display = toggled ? 'block' : 'none';
  666. 				list.style.display = toggled ? '' : 'none';
  667.  
  668. 				if (toggled) {
  669. 					toggle.style.borderTopRightRadius = toggle.style.borderBottomRightRadius = '';
  670. 					toggle.style.opacity = '';
  671. 				} else {
  672. 					toggle.style.borderTopRightRadius = toggle.style.borderBottomRightRadius = '10px';
  673. 					toggle.style.opacity = '0.25';
  674. 				}
  675. 			});
  676.  
  677. 			scrollbar.style.display = 'block';
  678. 			let scrollTop = 0; // keep a float here, because list.scrollTop is always casted to an int
  679. 			let thumbHeight = 1;
  680. 			let lastY;
  681. 			thumb.style.height = '182px';
  682.  
  683. 			function updateThumb() {
  684. 				thumb.style.bottom = (1 - list.scrollTop / (list.scrollHeight - 182)) * (182 - thumbHeight) + 'px';
  685. 			}
  686.  
  687. 			function scroll() {
  688. 				if (scrollTop >= list.scrollHeight - 182 - 40) {
  689. 					// close to bottom, snap downwards
  690. 					list.scrollTop = scrollTop = list.scrollHeight - 182;
  691. 				}
  692.  
  693. 				thumbHeight = Math.min(Math.max(182 / list.scrollHeight, 0.1), 1) * 182;
  694. 				thumb.style.height = thumbHeight + 'px';
  695. 				updateThumb();
  696. 			}
  697.  
  698. 			let scrolling = false;
  699. 			thumb.addEventListener('mousedown', () => void (scrolling = true));
  700. 			addEventListener('mouseup', () => void (scrolling = false));
  701. 			addEventListener('mousemove', e => {
  702. 				const deltaY = e.clientY - lastY;
  703. 				lastY = e.clientY;
  704.  
  705. 				if (!scrolling) return;
  706. 				e.preventDefault();
  707.  
  708. 				if (lastY === undefined) {
  709. 					lastY = e.clientY;
  710. 					return;
  711. 				}
  712.  
  713. 				list.scrollTop = scrollTop = Math.min(Math.max(
  714. 					scrollTop + deltaY * list.scrollHeight / 182, 0), list.scrollHeight - 182);
  715. 				updateThumb();
  716. 			});
  717.  
  718. 			let lastWasBarrier = true; // init to true, so we don't print a barrier as the first ever message (ugly)
  719. 			/**
  720. 			 * @param {string} authorName
  721. 			 * @param {[number, number, number]} rgb
  722. 			 * @param {string} text
  723. 			 */
  724. 			chat.add = (authorName, rgb, text) => {
  725. 				lastWasBarrier = false;
  726.  
  727. 				const container = document.createElement('div');
  728. 				const author = document.createElement('span');
  729. 				author.style.cssText = `color: ${aux.rgb2hex(rgb)}; padding-right: 0.75em;`;
  730. 				author.textContent = aux.trim(authorName);
  731. 				container.appendChild(author);
  732.  
  733. 				const msg = document.createElement('span');
  734. 				msg.textContent = aux.trim(text);
  735. 				container.appendChild(msg);
  736.  
  737. 				while (list.children.length > 100)
  738. 					list.firstChild?.remove();
  739.  
  740. 				list.appendChild(container);
  741.  
  742. 				scroll();
  743. 			};
  744.  
  745. 			chat.barrier = () => {
  746. 				if (lastWasBarrier) return;
  747. 				lastWasBarrier = true;
  748.  
  749. 				const barrier = document.createElement('div');
  750. 				barrier.style.cssText = 'width: calc(100% - 20px); height: 1px; background: #8888; margin: 10px;';
  751. 				list.appendChild(barrier);
  752.  
  753. 				scroll();
  754. 			};
  755.  
  756. 			chat.matchTheme = () => {
  757. 				list.style.color = aux.setting('input#darkTheme', true) ? '#fffc' : '#000c';
  758. 			};
  759.  
  760. 			return chat;
  761. 		})();
  762.  
  763. 		/** @param {string} msg */
  764. 		ui.error = msg => {
  765. 			const modal = /** @type {HTMLElement | null} */ (document.querySelector('#errormodal'));
  766. 			const desc = document.querySelector('#errormodal p');
  767. 			if (desc)
  768. 				desc.innerHTML = msg;
  769.  
  770. 			if (modal)
  771. 				modal.style.display = 'block';
  772. 		};
  773.  
  774. 		// sigmod quick fix
  775. 		(() => {
  776. 			// the play timer is inserted below the top-left stats, but because we offset them, we need to offset this
  777. 			// too
  778. 			const style = document.createElement('style');
  779. 			style.textContent = '.playTimer { transform: translate(5px, 10px); }';
  780. 			document.head.appendChild(style);
  781. 		})();
  782.  
  783. 		return ui;
  784. 	})();
  785.  
  786.  
  787.  
  788. 	/////////////////////////
  789. 	// Create Options Menu //
  790. 	/////////////////////////
  791. 	const settings = (() => {
  792. 		let settings = {
  793. 			cellOpacity: 1,
  794. 			cellOutlines: true,
  795. 			drawDelay: 120,
  796. 			jellySkinLag: true,
  797. 			jellyWobble: true,
  798. 			massBold: false,
  799. 			massOpacity: 1,
  800. 			massScaleFactor: 1,
  801. 			nameBold: false,
  802. 			nameScaleFactor: 1,
  803. 			selfSkin: '',
  804. 			unsplittableOpacity: 1,
  805. 		};
  806.  
  807. 		try {
  808. 			Object.assign(settings, JSON.parse(localStorage.getItem('sigfix') ?? ''));
  809. 		} catch (_) {}
  810.  
  811. 		/** @type {Set<() => void>} */
  812. 		const onSaves = new Set();
  813.  
  814. 		const channel = new BroadcastChannel('sigfix-settings');
  815. 		channel.addEventListener('message', msg => {
  816. 			Object.assign(settings, msg.data);
  817. 			onSaves.forEach(fn => fn());
  818. 		});
  819.  
  820. 		// #1 : define helper functions
  821. 		/**
  822. 		 * @param {string} html
  823. 		 * @returns {HTMLElement}
  824. 		 */
  825. 		function fromHTML(html) {
  826. 			const div = document.createElement('div');
  827. 			div.innerHTML = html;
  828. 			return /** @type {HTMLElement} */ (div.firstElementChild);
  829. 		}
  830.  
  831. 		function save() {
  832. 			localStorage.setItem('sigfix', JSON.stringify(settings));
  833. 			channel.postMessage(settings);
  834. 		}
  835.  
  836. 		/**
  837. 		 * @template O, T
  838. 		 * @typedef {{ [K in keyof O]: O[K] extends T ? K : never }[keyof O]} PropertyOfType
  839. 		 */
  840.  
  841. 		/**
  842. 		 * @param {string} sliderSelector
  843. 		 * @param {string} displaySelector
  844. 		 * @param {PropertyOfType<typeof settings, number>} property
  845. 		 * @param {number} decimals
  846. 		 */
  847. 		function registerSlider(sliderSelector, displaySelector, property, decimals) {
  848. 			const slider = /** @type {HTMLInputElement} */ (document.querySelector(sliderSelector));
  849. 			const display = /** @type {HTMLElement} */ (document.querySelector(displaySelector));
  850. 			slider.value = settings[property].toString();
  851. 			display.textContent = settings[property].toFixed(decimals);
  852.  
  853. 			slider.addEventListener('input', () => {
  854. 				settings[property] = parseFloat(slider.value);
  855. 				display.textContent = settings[property].toFixed(decimals);
  856. 				save();
  857. 			});
  858.  
  859. 			onSaves.add(() => {
  860. 				slider.value = settings[property].toString();
  861. 				display.textContent = settings[property].toFixed(decimals);
  862. 			});
  863. 		}
  864.  
  865. 		/**
  866. 		 * @param {string} inputSelector
  867. 		 * @param {PropertyOfType<typeof settings, string>} property
  868. 		 * @param {boolean} sync
  869. 		 */
  870. 		function registerInput(inputSelector, property, sync) {
  871. 			const input = /** @type {HTMLInputElement} */ (document.querySelector(inputSelector));
  872. 			let value = input.value = settings[property];
  873.  
  874. 			input.addEventListener('change', () => {
  875. 				value = settings[property] = input.value;
  876. 				save();
  877. 			});
  878.  
  879. 			onSaves.add(() => {
  880. 				if (sync)
  881. 					value = input.value = settings[property];
  882. 				else
  883. 					settings[property] = value;
  884. 			});
  885. 		}
  886.  
  887. 		/**
  888. 		 * @param {string} inputSelector
  889. 		 * @param {PropertyOfType<typeof settings, boolean>} property
  890. 		 */
  891. 		function registerCheckbox(inputSelector, property) {
  892. 			const checkbox = /** @type {HTMLInputElement} */ (document.querySelector(inputSelector));
  893. 			checkbox.checked = settings[property];
  894.  
  895. 			checkbox.addEventListener('change', () => {
  896. 				settings[property] = checkbox.checked;
  897. 				save();
  898. 			});
  899.  
  900. 			onSaves.add(() => {
  901. 				checkbox.checked = settings[property];
  902. 			});
  903. 		}
  904.  
  905. 		// #2 : create options for the vanilla game
  906. 		(() => {
  907. 			/** @type {HTMLElement} */
  908. 			const content = aux.require(
  909. 				document.querySelector('#cm_modal__settings .ctrl-modal__content'),
  910. 				'Can\'t find the default settings UI. Try reloading the page, or disabling other scripts?',
  911. 			);
  912.  
  913. 			const style = document.createElement('style');
  914. 			style.innerHTML = `
  915. 			.sf-setting {
  916. 				display: block;
  917. 				height: 25px;
  918. 				position: relative;
  919. 			}
  920.  
  921. 			.sf-setting .sf-title {
  922. 				position: absolute;
  923. 				left: 0;
  924. 			}
  925.  
  926. 			.sf-setting .sf-option {
  927. 				position: absolute;
  928. 				right: 0;
  929. 			}
  930.  
  931. 			.sf-setting.double {
  932. 				height: 50px;
  933. 			}
  934.  
  935. 			.sf-setting.double .sf-option {
  936. 				top: 25px;
  937. 			}
  938.  
  939. 			.sf-setting span, .sf-setting input {
  940. 				display: block;
  941. 				float: left;
  942. 				height: 25px;
  943. 				line-height: 25px;
  944. 				margin-left: 5px;
  945. 			}
  946.  
  947. 			.sf-separator {
  948. 				text-align: center;
  949. 				width: 100%;
  950. 			}
  951. 			`;
  952. 			document.head.appendChild(style);
  953.  
  954. 			content.appendChild(fromHTML(`
  955. 			<div class="menu__item">
  956. 				<div style="width: 100%; height: 1px; background: #bfbfbf;"></div>
  957. 			</div>`));
  958. 			content.appendChild(fromHTML(`<div class="menu__item">
  959. 				<div class="sf-setting">
  960. 					<span class="sf-title">Draw delay</span>
  961. 					<div class="sf-option">
  962. 						<input id="sf-draw-delay" style="width: 100px;" type="range"
  963. 							min="40" max="300" step="5" value="120" list="sf-draw-delay-markers" />
  964. 						<datalist id="sf-draw-delay-markers"> <option value="120"></option> </datalist>
  965. 						<span id="sf-draw-delay-display" style="width: 40px; text-align: right;"></span>
  966. 					</div>
  967. 				</div>
  968. 				<div class="sf-setting double">
  969. 					<span class="sf-title">Self skin URL (not synced)</span>
  970. 					<div class="sf-option">
  971. 						<input id="sf-self-skin" placeholder="https://i.imgur.com/..." type="text" />
  972. 					</div>
  973. 				</div>
  974. 				<div class="sf-setting double">
  975. 					<span class="sf-title">Unsplittable cell outline opacity</span>
  976. 					<div class="sf-option">
  977. 						<input id="sf-unsplittable-opacity" style="width: 100px;" type="range"
  978. 							min="0" max="1" step="0.01" value="1" list="sf-unsplittable-opacity-markers" />
  979. 						<datalist id="sf-unsplittable-opacity-markers"> <option value="1"></option> </datalist>
  980. 						<span id="sf-unsplittable-opacity-display" style="width: 40px; text-align: right;"></span>
  981. 					</div>
  982. 				</div>
  983. 				<div class="sf-setting">
  984. 					<span class="sf-title">Cell outlines</span>
  985. 					<div class="sf-option">
  986. 						<input id="sf-cell-outlines" type="checkbox" />
  987. 					</div>
  988. 				</div>
  989. 				<div class="sf-setting">
  990. 					<span class="sf-title">Cell opacity</span>
  991. 					<div class="sf-option">
  992. 						<input id="sf-cell-opacity" style="width: 100px;" type="range"
  993. 							min="0" max="1" step="0.01" value="1" list="sf-cell-opacity-markers" />
  994. 						<datalist id="sf-cell-opacity-markers"> <option value="1"></option> </datalist>
  995. 						<span id="sf-cell-opacity-display" style="width: 40px; text-align: right;"></span>
  996. 					</div>
  997. 				</div>
  998.  
  999. 				<div class="sf-separator">•</div>
  1000.  
  1001. 				<div class="sf-setting">
  1002. 					<span class="sf-title">Name scale factor</span>
  1003. 					<div class="sf-option">
  1004. 						<input id="sf-name-scale" style="width: 100px;" type="range"
  1005. 							min="0.5" max="2" step="0.01" value="1" list="sf-name-scale-markers" />
  1006. 						<datalist id="sf-name-scale-markers"> <option value="1"></option> </datalist>
  1007. 						<span id="sf-name-scale-display" style="width: 40px; text-align: right;"></span>
  1008. 					</div>
  1009. 				</div>
  1010. 				<div class="sf-setting">
  1011. 					<span class="sf-title">Mass scale factor</span>
  1012. 					<div class="sf-option">
  1013. 						<input id="sf-mass-scale" style="width: 100px;" type="range"
  1014. 							min="0.5" max="4" step="0.01" value="1" list="sf-mass-scale-markers" />
  1015. 						<datalist id="sf-mass-scale-markers"> <option value="1"></option> </datalist>
  1016. 						<span id="sf-mass-scale-display" style="width: 40px; text-align: right;"></span>
  1017. 					</div>
  1018. 				</div>
  1019. 				<div class="sf-setting">
  1020. 					<span class="sf-title">Mass opacity</span>
  1021. 					<div class="sf-option">
  1022. 						<input id="sf-mass-opacity" style="width: 100px;" type="range"
  1023. 							min="0" max="1" step="0.01" value="1" list="sf-mass-opacity-markers" />
  1024. 						<datalist id="sf-mass-opacity-markers"> <option value="1"></option> </datalist>
  1025. 						<span id="sf-mass-opacity-display" style="width: 40px; text-align: right;"></span>
  1026. 					</div>
  1027. 				</div>
  1028. 				<div class="sf-setting">
  1029. 					<span class="sf-title">Bold name text / mass text</span>
  1030. 					<div class="sf-option">
  1031. 						<input id="sf-name-bold" type="checkbox" />
  1032. 						<input id="sf-mass-bold" type="checkbox" />
  1033. 					</div>
  1034. 				</div>
  1035.  
  1036. 				<div class="sf-separator">•</div>
  1037.  
  1038. 				<div class="sf-setting">
  1039. 					<span class="sf-title">Jelly physics effects on skins</span>
  1040. 					<div class="sf-option">
  1041. 						<input id="sf-jelly-skin-lag" type="checkbox" />
  1042. 					</div>
  1043. 				</div>
  1044. 				<div class="sf-setting">
  1045. 					<span class="sf-title">Jelly physics wobble effect</span>
  1046. 					<div class="sf-option">
  1047. 						<input id="sf-jelly-wobble" type="checkbox" />
  1048. 					</div>
  1049. 				</div>
  1050. 			</div>`));
  1051.  
  1052. 			registerSlider('#sf-draw-delay', '#sf-draw-delay-display', 'drawDelay', 0);
  1053. 			registerInput('#sf-self-skin', 'selfSkin', false);
  1054. 			registerSlider('#sf-unsplittable-opacity', '#sf-unsplittable-opacity-display', 'unsplittableOpacity', 2);
  1055. 			registerCheckbox('#sf-cell-outlines', 'cellOutlines');
  1056. 			registerSlider('#sf-cell-opacity', '#sf-cell-opacity-display', 'cellOpacity', 2);
  1057. 			registerSlider('#sf-name-scale', '#sf-name-scale-display', 'nameScaleFactor', 2);
  1058. 			registerSlider('#sf-mass-scale', '#sf-mass-scale-display', 'massScaleFactor', 2);
  1059. 			registerSlider('#sf-mass-opacity', '#sf-mass-opacity-display', 'massOpacity', 2);
  1060. 			registerCheckbox('#sf-name-bold', 'nameBold');
  1061. 			registerCheckbox('#sf-mass-bold', 'massBold');
  1062. 			registerCheckbox('#sf-jelly-skin-lag', 'jellySkinLag');
  1063. 			registerCheckbox('#sf-jelly-wobble', 'jellyWobble');
  1064. 		})();
  1065.  
  1066. 		// #3 : create options for sigmod
  1067. 		let sigmodInjection;
  1068. 		sigmodInjection = setInterval(() => {
  1069. 			const nav = document.querySelector('.mod_menu_navbar');
  1070. 			const content = document.querySelector('.mod_menu_content');
  1071. 			if (!nav || !content) return;
  1072.  
  1073. 			clearInterval(sigmodInjection);
  1074.  
  1075. 			const page = fromHTML(`
  1076. 			<div class="mod_tab scroll" style="display: none;">
  1077. 				<div class="modRowItems justify-sb">
  1078. 					<span>Draw delay</span>
  1079. 					<span class="justify-sb">
  1080. 						<input id="sfsm-draw-delay" style="width: 200px;" type="range"
  1081. 							min="40" max="300" step="5" value="120" list="sfsm-draw-delay-markers" />
  1082. 						<datalist id="sfsm-draw-delay-markers">
  1083. 							<option value="120"></option>
  1084. 						</datalist>
  1085. 						<span id="sfsm-draw-delay-display" class="text-center" style="width: 75px;"></span>
  1086. 					</span>
  1087. 				</div>
  1088. 				<div class="modRowItems justify-sb">
  1089. 					<span>Self skin URL (not synced)</span>
  1090. 					<input class="modInput" id="sfsm-self-skin" placeholder="https://i.imgur.com/..." type="text" />
  1091. 				</div>
  1092. 				<div class="modRowItems justify-sb">
  1093. 					<span>Unsplittable cell outline opacity</span>
  1094. 					<span class="justify-sb">
  1095. 						<input id="sfsm-unsplittable-opacity" style="width: 200px;" type="range"
  1096. 							min="0" max="1" step="0.01" value="1" list="sfsm-unsplittable-opacity-markers" />
  1097. 						<datalist id="sfsm-unsplittable-opacity-markers">
  1098. 							<option value="1"></option>
  1099. 						</datalist>
  1100. 						<span id="sfsm-unsplittable-opacity-display" class="text-center" style="width: 75px;"></span>
  1101. 					</span>
  1102. 				</div>
  1103. 				<div class="modRowItems justify-sb">
  1104. 					<span>Cell outlines</span>
  1105. 					<div style="width: 75px; text-align: center;">
  1106. 						<div class="modCheckbox" style="display: inline-block;">
  1107. 							<input id="sfsm-cell-outlines" type="checkbox" />
  1108. 							<label class="cbx" for="sfsm-cell-outlines"></label>
  1109. 						</div>
  1110. 					</div>
  1111. 				</div>
  1112. 				<div class="modRowItems justify-sb">
  1113. 					<span>Cell opacity</span>
  1114. 					<span class="justify-sb">
  1115. 						<input id="sfsm-cell-opacity" style="width: 200px;" type="range"
  1116. 							min="0" max="1" step="0.01" value="1" list="sfsm-cell-opacity-markers" />
  1117. 						<datalist id="sfsm-cell-opacity-markers">
  1118. 							<option value="1"></option>
  1119. 						</datalist>
  1120. 						<span id="sfsm-cell-opacity-display" class="text-center" style="width: 75px;"></span>
  1121. 					</span>
  1122. 				</div>
  1123.  
  1124. 				<span class="text-center">•</span>
  1125.  
  1126. 				<div class="modRowItems justify-sb">
  1127. 					<span>Name scale factor</span>
  1128. 					<span class="justify-sb">
  1129. 						<input id="sfsm-name-scale-factor" style="width: 200px;" type="range"
  1130. 							min="0.5" max="2" step="0.01" value="1" list="sfsm-name-scale-factor-markers" />
  1131. 						<datalist id="sfsm-name-scale-factor-markers">
  1132. 							<option value="1"></option>
  1133. 						</datalist>
  1134. 						<span id="sfsm-name-scale-factor-display" class="text-center" style="width: 75px;"></span>
  1135. 					</span>
  1136. 				</div>
  1137. 				<div class="modRowItems justify-sb">
  1138. 					<span>Mass scale factor</span>
  1139. 					<span class="justify-sb">
  1140. 						<input id="sfsm-mass-scale-factor" style="width: 200px;" type="range"
  1141. 							min="0.5" max="4" step="0.01" value="1" list="sfsm-mass-scale-factor-markers" />
  1142. 						<datalist id="sfsm-mass-scale-factor-markers">
  1143. 							<option value="1"></option>
  1144. 						</datalist>
  1145. 						<span id="sfsm-mass-scale-factor-display" class="text-center" style="width: 75px;"></span>
  1146. 					</span>
  1147. 				</div>
  1148. 				<div class="modRowItems justify-sb">
  1149. 					<span>Mass opacity</span>
  1150. 					<span class="justify-sb">
  1151. 						<input id="sfsm-mass-opacity" style="width: 200px;" type="range"
  1152. 							min="0" max="1" step="0.01" value="1" list="sfsm-mass-opacity-markers" />
  1153. 						<datalist id="sfsm-mass-opacity-markers">
  1154. 							<option value="1"></option>
  1155. 						</datalist>
  1156. 						<span id="sfsm-mass-opacity-display" class="text-center" style="width: 75px;"></span>
  1157. 					</span>
  1158. 				</div>
  1159. 				<div class="modRowItems justify-sb">
  1160. 					<span>Bold name text / mass text</span>
  1161. 					<div style="width: 75px; text-align: center;">
  1162. 						<div class="modCheckbox" style="display: inline-block;">
  1163. 							<input id="sfsm-name-bold" type="checkbox" />
  1164. 							<label class="cbx" for="sfsm-name-bold"></label>
  1165. 						</div>
  1166. 						<div class="modCheckbox" style="display: inline-block;">
  1167. 							<input id="sfsm-mass-bold" type="checkbox" />
  1168. 							<label class="cbx" for="sfsm-mass-bold"></label>
  1169. 						</div>
  1170. 					</div>
  1171. 				</div>
  1172. 				
  1173. 				<span class="text-center">•</span>
  1174.  
  1175. 				<div class="modRowItems justify-sb">
  1176. 					<span>Jelly physics effect on skins</span>
  1177. 					<div style="width: 75px; text-align: center;">
  1178. 						<div class="modCheckbox" style="display: inline-block;">
  1179. 							<input id="sfsm-jelly-skin-lag" type="checkbox" />
  1180. 							<label class="cbx" for="sfsm-jelly-skin-lag"></label>
  1181. 						</div>
  1182. 					</div>
  1183. 				</div>
  1184. 				<div class="modRowItems justify-sb">
  1185. 					<span>Jelly physics wobble effect</span>
  1186. 					<div style="width: 75px; text-align: center;">
  1187. 						<div class="modCheckbox" style="display: inline-block;">
  1188. 							<input id="sfsm-jelly-wobble" type="checkbox" />
  1189. 							<label class="cbx" for="sfsm-jelly-wobble"></label>
  1190. 						</div>
  1191. 					</div>
  1192. 				</div>
  1193. 			</div>
  1194. 			`);
  1195. 			content.appendChild(page);
  1196.  
  1197. 			registerSlider('#sfsm-draw-delay', '#sfsm-draw-delay-display', 'drawDelay', 0);
  1198. 			registerInput('#sfsm-self-skin', 'selfSkin', false);
  1199. 			registerSlider(
  1200. 				'#sfsm-unsplittable-opacity', '#sfsm-unsplittable-opacity-display', 'unsplittableOpacity', 2);
  1201. 			registerCheckbox('#sfsm-cell-outlines', 'cellOutlines');
  1202. 			registerSlider('#sfsm-cell-opacity', '#sfsm-cell-opacity-display', 'cellOpacity', 2);
  1203. 			registerSlider('#sfsm-name-scale-factor', '#sfsm-name-scale-factor-display', 'nameScaleFactor', 2);
  1204. 			registerSlider('#sfsm-mass-scale-factor', '#sfsm-mass-scale-factor-display', 'massScaleFactor', 2);
  1205. 			registerSlider('#sfsm-mass-opacity', '#sfsm-mass-opacity-display', 'massOpacity', 2);
  1206. 			registerCheckbox('#sfsm-name-bold', 'nameBold');
  1207. 			registerCheckbox('#sfsm-mass-bold', 'massBold');
  1208. 			registerCheckbox('#sfsm-jelly-skin-lag', 'jellySkinLag');
  1209. 			registerCheckbox('#sfsm-jelly-wobble', 'jellyWobble');
  1210.  
  1211. 			const navButton = fromHTML('<button class="mod_nav_btn">🔥 Sig Fixes</button>');
  1212. 			nav.appendChild(navButton);
  1213. 			navButton.addEventListener('click', () => {
  1214. 				// basically openModTab() from sigmod
  1215. 				(/** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.mod_tab'))).forEach(tab => {
  1216. 					tab.style.opacity = '0';
  1217. 					setTimeout(() => tab.style.display = 'none', 200);
  1218. 				});
  1219.  
  1220. 				(/** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.mod_nav_btn'))).forEach(tab => {
  1221. 					tab.classList.remove('mod_selected');
  1222. 				});
  1223.  
  1224. 				navButton.classList.add('mod_selected');
  1225. 				setTimeout(() => {
  1226. 					page.style.display = 'flex';
  1227. 					setTimeout(() => page.style.opacity = '1',10);
  1228. 				}, 200);
  1229. 			});
  1230. 		}, 100);
  1231.  
  1232. 		return settings;
  1233. 	})();
  1234.  
  1235.  
  1236.  
  1237. 	////////////////////////////////
  1238. 	// Setup Multi-tab World Sync //
  1239. 	////////////////////////////////
  1240. 	/** @typedef {{
  1241. 	 * 	self: string,
  1242. 	 * 	owned: Set<number>,
  1243. 	 * 	skin: string,
  1244. 	 * }} SyncData
  1245. 	 */
  1246. 	const sync = (() => {
  1247. 		const sync = {};
  1248. 		/** @type {Map<string, SyncData>} */
  1249. 		sync.others = new Map();
  1250.  
  1251. 		const frame = new BroadcastChannel('sigfix-frame');
  1252. 		const worldsync = new BroadcastChannel('sigfix-worldsync');
  1253. 		const self = Date.now() + '-' + Math.random();
  1254.  
  1255. 		sync.broadcast = () => {
  1256. 			/** @type {Set<number>} */
  1257. 			const owned = new Set();
  1258. 			world.mine.forEach(id => owned.add(id));
  1259. 			world.mineDead.forEach(id => owned.add(id));
  1260.  
  1261. 			/** @type {SyncData} */
  1262. 			const syncData = {
  1263. 				self,
  1264. 				owned,
  1265. 				skin: settings.selfSkin,
  1266. 			};
  1267. 			worldsync.postMessage(syncData);
  1268. 		};
  1269.  
  1270. 		sync.frame = () => {
  1271. 			frame.postMessage(undefined);
  1272. 		};
  1273.  
  1274. 		frame.addEventListener('message', () => {
  1275. 			// only update the world if we aren't rendering ourselves (example case: games open on two monitors)
  1276. 			if (document.visibilityState === 'hidden')
  1277. 				world.update();
  1278. 		});
  1279.  
  1280. 		worldsync.addEventListener('message', m => {
  1281. 			/** @type {SyncData} */
  1282. 			const data = m.data;
  1283. 			sync.others.set(data.self, data);
  1284. 		});
  1285.  
  1286. 		return sync;
  1287. 	})();
  1288.  
  1289.  
  1290.  
  1291. 	///////////////////////////
  1292. 	// Setup World Variables //
  1293. 	///////////////////////////
  1294. 	/** @typedef {{
  1295. 	 * id: number,
  1296. 	 * x: number, ox: number, nx: number,
  1297. 	 * y: number, oy: number, ny: number,
  1298. 	 * r: number, or: number, nr: number,
  1299. 	 * rgb: [number, number, number],
  1300. 	 * updated: number, born: number, dead: { to: Cell | undefined, at: number } | undefined,
  1301. 	 * jagged: boolean,
  1302. 	 * name: string, skin: string, sub: boolean,
  1303. 	 * jelly: { x: number, y: number, r: number, wobble: Float32Array },
  1304. 	 * }} Cell */
  1305. 	const world = (() => {
  1306. 		const world = {};
  1307.  
  1308. 		// #1 : define cell variables and functions
  1309. 		/** @type {Map<number, Cell>} */
  1310. 		world.cells = new Map();
  1311. 		/** @type {Set<Cell>} */
  1312. 		world.clanmates = new Set();
  1313. 		/** @type {number[]} */
  1314. 		world.mine = []; // order matters, as the oldest cells split first
  1315. 		/** @type {Set<number>} */
  1316. 		world.mineDead = new Set();
  1317.  
  1318. 		/**
  1319. 		 * @param {Cell} cell
  1320. 		 * @param {number} now
  1321. 		 * @param {number | undefined} dt
  1322. 		 */
  1323. 		world.move = function(cell, now, dt) {
  1324. 			let nx = cell.nx;
  1325. 			let ny = cell.ny;
  1326. 			if (cell.dead?.to) {
  1327. 				nx = cell.dead.to.x;
  1328. 				ny = cell.dead.to.y;
  1329. 			} else if (cell.r <= 20) {
  1330. 				cell.x = nx;
  1331. 				cell.y = ny;
  1332. 				return;
  1333. 			}
  1334.  
  1335. 			const a = Math.min(Math.max((now - cell.updated) / settings.drawDelay, 0), 1);
  1336. 			cell.x = cell.ox + (nx - cell.ox) * a;
  1337. 			cell.y = cell.oy + (ny - cell.oy) * a;
  1338. 			cell.r = cell.or + (cell.nr - cell.or) * a;
  1339.  
  1340. 			if (dt !== undefined) {
  1341. 				cell.jelly.x = aux.exponentialEase(cell.jelly.x, cell.x, 2, dt);
  1342. 				cell.jelly.y = aux.exponentialEase(cell.jelly.y, cell.y, 2, dt);
  1343. 				cell.jelly.r = aux.exponentialEase(cell.jelly.r, cell.r, 5, dt);
  1344. 			}
  1345. 		};
  1346.  
  1347. 		let last = performance.now();
  1348. 		world.update = function() {
  1349. 			const now = performance.now();
  1350. 			const dt = (now - last) / 1000;
  1351. 			last = now;
  1352.  
  1353. 			world.cells.forEach(cell => world.move(cell, now, dt));
  1354.  
  1355. 			// move camera
  1356. 			let avgX = 0;
  1357. 			let avgY = 0;
  1358. 			let totalR = 0;
  1359. 			let totalCells = 0;
  1360.  
  1361. 			world.mine.forEach(id => {
  1362. 				const cell = world.cells.get(id);
  1363. 				if (!cell || cell.dead) return;
  1364.  
  1365. 				avgX += cell.x;
  1366. 				avgY += cell.y;
  1367. 				totalR += cell.r;
  1368. 				++totalCells;
  1369. 			});
  1370.  
  1371. 			avgX /= totalCells;
  1372. 			avgY /= totalCells;
  1373.  
  1374. 			let xyEaseFactor;
  1375. 			if (totalCells > 0) {
  1376. 				world.camera.tx = avgX;
  1377. 				world.camera.ty = avgY;
  1378. 				world.camera.tscale = Math.min(64 / totalR) ** 0.4 * input.zoom;
  1379.  
  1380. 				xyEaseFactor = 2;
  1381. 			} else {
  1382. 				xyEaseFactor = 20;
  1383. 			}
  1384.  
  1385. 			world.camera.x = aux.exponentialEase(world.camera.x, world.camera.tx, xyEaseFactor, dt);
  1386. 			world.camera.y = aux.exponentialEase(world.camera.y, world.camera.ty, xyEaseFactor, dt);
  1387. 			world.camera.scale = aux.exponentialEase(world.camera.scale, world.camera.tscale, 9, dt);
  1388. 		};
  1389.  
  1390. 		/** @returns {Float32Array} */
  1391. 		world.wobble = function() {
  1392. 			const speed = [Math.random(), Math.random(), Math.random()];
  1393. 			const shift = [Math.random(), Math.random(), Math.random()];
  1394. 			return new Float32Array([
  1395. 				// speed should be between 1-4, can be positive or negative
  1396. 				speed[0] * 6 - 3 + Math.sign(speed[0] - 0.5), shift[0],
  1397. 				speed[1] * 6 - 3 + Math.sign(speed[1] - 0.5), shift[1],
  1398. 				speed[2] * 6 - 3 + Math.sign(speed[2] - 0.5), shift[2],
  1399. 			]);
  1400. 		};
  1401.  
  1402. 		// clean up dead cells
  1403. 		setInterval(() => {
  1404. 			const now = performance.now();
  1405. 			world.cells.forEach((cell, id) => {
  1406. 				if (!cell.dead) return;
  1407. 				if (now - cell.dead.at >= 120) {
  1408. 					world.cells.delete(id);
  1409. 					world.mineDead.delete(id);
  1410. 				}
  1411. 			});
  1412. 		}, 100);
  1413.  
  1414.  
  1415.  
  1416. 		// #2 : define others, like camera and borders
  1417. 		world.camera = {
  1418. 			x: 0, tx: 0,
  1419. 			y: 0, ty: 0,
  1420. 			scale: 1, tscale: 1,
  1421. 		};
  1422.  
  1423. 		/** @type {{ l: number, r: number, t: number, b: number } | undefined} */
  1424. 		world.border = undefined;
  1425.  
  1426. 		/** @type {{ name: string, me: boolean, sub: boolean, place: number | undefined }[]} */
  1427. 		world.leaderboard = [];
  1428.  
  1429.  
  1430.  
  1431. 		// #3 : define stats
  1432. 		world.stats = {
  1433. 			foodEaten: 0,
  1434. 			highestPosition: 200,
  1435. 			highestScore: 0,
  1436. 			/** @type {number | undefined} */
  1437. 			spawnedAt: undefined,
  1438. 		};
  1439.  
  1440.  
  1441.  
  1442. 		return world;
  1443. 	})();
  1444.  
  1445.  
  1446.  
  1447. 	//////////////////////////
  1448. 	// Setup All Networking //
  1449. 	//////////////////////////
  1450. 	const net = (() => {
  1451. 		const net = {};
  1452.  
  1453. 		// #1 : define state
  1454. 		/** @type {{ shuffle: Map<number, number>, unshuffle: Map<number, number> } | undefined} */
  1455. 		let handshake;
  1456. 		/** @type {number | undefined} */
  1457. 		let pendingPingFrom;
  1458. 		let pingInterval;
  1459. 		let reconnectAttempts = 0;
  1460. 		/** @type {WebSocket} */
  1461. 		let ws;
  1462.  
  1463. 		/** -1 if ping reply took too long @type {number | undefined} */
  1464. 		net.latency = undefined;
  1465. 		net.ready = false;
  1466.  
  1467. 		// #2 : connecting/reconnecting the websocket
  1468. 		/** @type {HTMLSelectElement | null} */
  1469. 		const gamemode = document.querySelector('#gamemode');
  1470. 		/** @type {HTMLOptionElement | null} */
  1471. 		const firstGamemode = document.querySelector('#gamemode option');
  1472.  
  1473. 		function connect() {
  1474. 			let server = 'wss://' + (gamemode?.value || firstGamemode?.value || 'ca0.sigmally.com/ws/');
  1475. 			if (location.search.startsWith('?ip='))
  1476. 				server = location.search.slice('?ip='.length);
  1477.  
  1478. 			try {
  1479. 				ws = new destructor.realWebSocket(server);
  1480. 			} catch (err) {
  1481. 				console.error('can\'t make WebSocket:', err);
  1482. 				aux.require(null, 'The server is invalid. Try changing the server, reloading the page, or clearing ' +
  1483. 					'your browser cache and cookies.');
  1484. 			}
  1485.  
  1486. 			destructor.safeWebSockets.add(ws);
  1487. 			ws.binaryType = 'arraybuffer';
  1488. 			ws.addEventListener('close', wsClose);
  1489. 			ws.addEventListener('error', wsError);
  1490. 			ws.addEventListener('message', wsMessage);
  1491. 			ws.addEventListener('open', wsOpen);
  1492. 		}
  1493.  
  1494. 		function wsClose() {
  1495. 			handshake = undefined;
  1496. 			pendingPingFrom = undefined;
  1497. 			if (pingInterval)
  1498. 				clearInterval(pingInterval);
  1499.  
  1500. 			net.latency = undefined;
  1501. 			net.ready = false;
  1502.  
  1503. 			// hide/clear UI
  1504. 			ui.stats.misc.textContent = '';
  1505. 			world.leaderboard = [];
  1506. 			ui.leaderboard.update();
  1507.  
  1508. 			// clear world
  1509. 			world.border = undefined;
  1510. 			world.cells.clear(); // make sure we won't see overlapping IDs from new cells from the new connection
  1511. 			world.clanmates.clear();
  1512. 			while (world.mine.length) world.mine.pop();
  1513. 			world.mineDead.clear();
  1514. 			sync.broadcast();
  1515.  
  1516. 			setTimeout(connect, 500 * Math.min(reconnectAttempts++ + 1, 10));
  1517. 		}
  1518.  
  1519. 		/** @param {Event} err */
  1520. 		function wsError(err) {
  1521. 			console.error('WebSocket error:', err);
  1522. 		}
  1523.  
  1524. 		function wsOpen() {
  1525. 			reconnectAttempts = 0;
  1526.  
  1527. 			ui.chat.barrier();
  1528.  
  1529. 			// reset camera location to the middle; this is implied but never sent by the server
  1530. 			world.camera.x = world.camera.tx = 0;
  1531. 			world.camera.y = world.camera.ty = 0;
  1532. 			world.camera.scale = world.camera.tscale = 1;
  1533.  
  1534. 			ws.send(new TextEncoder().encode('SIG 0.0.1\x00'));
  1535. 		}
  1536.  
  1537. 		// listen for when the gamemode changes
  1538. 		gamemode?.addEventListener('change', () => {
  1539. 			ws.close();
  1540. 		});
  1541.  
  1542.  
  1543.  
  1544. 		// #3 : set up auxiliary functions
  1545. 		/**
  1546. 		 * @param {DataView} dat
  1547. 		 * @param {number} off
  1548. 		 * @returns {[string, number]}
  1549. 		 */
  1550. 		function readZTString(dat, off) {
  1551. 			const startOff = off;
  1552. 			for (; off < dat.byteLength; ++off) {
  1553. 				if (dat.getUint8(off) === 0) break;
  1554. 			}
  1555.  
  1556. 			return [new TextDecoder('utf-8').decode(dat.buffer.slice(startOff, off)), off + 1];
  1557. 		}
  1558.  
  1559. 		/**
  1560. 		 * @param {number} opcode
  1561. 		 * @param {object} data
  1562. 		 */
  1563. 		function sendJson(opcode, data) {
  1564. 			if (!handshake) return;
  1565. 			const dataBuf = new TextEncoder().encode(JSON.stringify(data));
  1566. 			const buf = new ArrayBuffer(dataBuf.byteLength + 2);
  1567. 			const dat = new DataView(buf);
  1568.  
  1569. 			dat.setUint8(0, Number(handshake.shuffle.get(opcode)));
  1570. 			for (let i = 0; i < dataBuf.byteLength; ++i) {
  1571. 				dat.setUint8(1 + i, dataBuf[i]);
  1572. 			}
  1573.  
  1574. 			ws.send(buf);
  1575. 		}
  1576.  
  1577. 		function createPingLoop() {
  1578. 			function ping() {
  1579. 				if (!handshake) return; // shouldn't ever happen
  1580.  
  1581. 				if (pendingPingFrom !== undefined) {
  1582. 					// ping was not replied to, tell the player the ping text might be wonky for a bit
  1583. 					net.latency = -1;
  1584. 				}
  1585.  
  1586. 				ws.send(new Uint8Array([ Number(handshake.shuffle.get(0xfe)) ]));
  1587. 				pendingPingFrom = performance.now();
  1588. 			}
  1589.  
  1590. 			pingInterval = setInterval(ping, 2_000);
  1591. 		}
  1592.  
  1593.  
  1594.  
  1595. 		// #4 : set up message handler
  1596. 		/** @param {MessageEvent} msg */
  1597. 		function wsMessage(msg) {
  1598. 			const dat = new DataView(msg.data);
  1599. 			if (!handshake) {
  1600. 				// unlikely to change as we're still on v0.0.1 but i'll check it anyway
  1601. 				let [version, off] = readZTString(dat, 0);
  1602. 				if (version !== 'SIG 0.0.1') {
  1603. 					alert(`got unsupported version "${version}", expected "SIG 0.0.1"`);
  1604. 					return ws.close();
  1605. 				}
  1606.  
  1607. 				handshake = { shuffle: new Map(), unshuffle: new Map() };
  1608. 				for (let i = 0; i < 256; ++i) {
  1609. 					const shuffled = dat.getUint8(off + i);
  1610. 					handshake.shuffle.set(i, shuffled);
  1611. 					handshake.unshuffle.set(shuffled, i);
  1612. 				}
  1613.  
  1614. 				createPingLoop();
  1615.  
  1616. 				return;
  1617. 			}
  1618.  
  1619. 			const now = performance.now();
  1620. 			let off = 1;
  1621. 			switch (handshake.unshuffle.get(dat.getUint8(0))) {
  1622. 				case 0x10: { // world update
  1623. 					// #a : kills / consumes
  1624. 					const killCount = dat.getUint16(off, true);
  1625. 					off += 2;
  1626.  
  1627. 					for (let i = 0; i < killCount; ++i) {
  1628. 						const killerId = dat.getUint32(off, true);
  1629. 						const killedId = dat.getUint32(off + 4, true);
  1630. 						off += 8;
  1631.  
  1632. 						const killer = world.cells.get(killerId);
  1633. 						const killed = world.cells.get(killedId);
  1634. 						if (killed) {
  1635. 							killed.dead = { to: killer, at: now };
  1636. 							killed.updated = now;
  1637.  
  1638. 							if (killed.r <= 20 && world.mine.includes(killerId))
  1639. 								++world.stats.foodEaten;
  1640.  
  1641. 							const myIdx = world.mine.indexOf(killedId);
  1642. 							if (myIdx !== -1) {
  1643. 								world.mine.splice(myIdx, 1);
  1644. 								world.mineDead.add(killedId);
  1645. 							}
  1646.  
  1647. 							world.clanmates.delete(killed);
  1648. 						}
  1649. 					}
  1650.  
  1651. 					// #b : updates
  1652. 					while (true) {
  1653. 						const id = dat.getUint32(off, true);
  1654. 						off += 4;
  1655. 						if (id === 0) break;
  1656.  
  1657. 						const x = dat.getInt16(off, true);
  1658. 						const y = dat.getInt16(off + 2, true);
  1659. 						const r = dat.getInt16(off + 4, true);
  1660. 						const flags = dat.getUint8(off + 6);
  1661. 						// (void 1 byte, "isUpdate")
  1662. 						// (void 1 byte, "isPlayer")
  1663. 						const sub = !!dat.getUint8(off + 9);
  1664. 						off += 10;
  1665.  
  1666. 						let clan; [clan, off] = readZTString(dat, off);
  1667.  
  1668. 						/** @type {[number, number, number] | undefined} */
  1669. 						let rgb;
  1670. 						if (flags & 0x02) {
  1671. 							// update color
  1672. 							rgb = [dat.getUint8(off) / 255, dat.getUint8(off + 1) / 255, dat.getUint8(off + 2) / 255];
  1673. 							off += 3;
  1674. 						}
  1675.  
  1676. 						let skin = '';
  1677. 						if (flags & 0x04) {
  1678. 							// update skin
  1679. 							[skin, off] = readZTString(dat, off);
  1680. 							skin = aux.parseSkin(skin);
  1681. 						}
  1682.  
  1683. 						let name = '';
  1684. 						if (flags & 0x08) {
  1685. 							// update name
  1686. 							[name, off] = readZTString(dat, off);
  1687. 							name = aux.parseName(name);
  1688. 						}
  1689.  
  1690. 						const jagged = !!(flags & 0x11);
  1691.  
  1692. 						const cell = world.cells.get(id);
  1693. 						if (cell && !cell.dead) {
  1694. 							// update cell.x and cell.y, to prevent rubber banding effect when tabbing out for a bit
  1695. 							world.move(cell, now, undefined);
  1696.  
  1697. 							cell.ox = cell.x; cell.oy = cell.y; cell.or = cell.r;
  1698. 							cell.nx = x; cell.ny = y; cell.nr = r; cell.sub = sub;
  1699. 							cell.jagged = jagged;
  1700. 							cell.updated = now;
  1701.  
  1702. 							if (rgb) cell.rgb = rgb;
  1703. 							if (skin) cell.skin = skin;
  1704. 							if (name) cell.name = name;
  1705.  
  1706. 							if (clan && clan === aux.userData?.clan)
  1707. 								world.clanmates.add(cell);
  1708. 						} else {
  1709. 							/** @type {Cell} */
  1710. 							const cell = {
  1711. 								id,
  1712. 								x, ox: x, nx: x,
  1713. 								y, oy: y, ny: y,
  1714. 								r, or: r, nr: r,
  1715. 								rgb: rgb ?? [1, 1, 1],
  1716. 								updated: now, born: now, dead: undefined,
  1717. 								jagged,
  1718. 								name, skin, sub,
  1719. 								jelly: {
  1720. 									x, y, r,
  1721. 									wobble: world.wobble(),
  1722. 								},
  1723. 							};
  1724.  
  1725. 							world.cells.set(id, cell);
  1726.  
  1727. 							if (clan && clan === aux.userData?.clan)
  1728. 								world.clanmates.add(cell);
  1729. 						}
  1730. 					}
  1731.  
  1732. 					// #c : deletes
  1733. 					const deleteCount = dat.getUint16(off, true);
  1734. 					off += 2;
  1735.  
  1736. 					for (let i = 0; i < deleteCount; ++i) {
  1737. 						const deletedId = dat.getUint32(off, true);
  1738. 						off += 4;
  1739.  
  1740. 						const deleted = world.cells.get(deletedId);
  1741. 						if (deleted) {
  1742. 							deleted.dead = { to: undefined, at: now };
  1743. 							world.clanmates.delete(deleted);
  1744. 						}
  1745. 					}
  1746.  
  1747. 					if (world.mine.length === 0 && world.stats.spawnedAt !== undefined) {
  1748. 						ui.deathScreen.show(world.stats);
  1749. 					}
  1750.  
  1751. 					sync.broadcast();
  1752.  
  1753. 					break;
  1754. 				}
  1755.  
  1756. 				case 0x11: { // update camera pos
  1757. 					world.camera.tx = dat.getFloat32(off, true);
  1758. 					world.camera.ty = dat.getFloat32(off + 4, true);
  1759. 					world.camera.tscale = dat.getFloat32(off + 8, true) * ui.game.viewportScale * input.zoom;
  1760. 					break;
  1761. 				}
  1762.  
  1763. 				case 0x12: // delete all cells
  1764. 					world.cells.forEach(cell => {
  1765. 						cell.dead ??= { to: undefined, at: now };
  1766. 					});
  1767. 					world.clanmates.clear();
  1768. 					// passthrough
  1769. 				case 0x14: // delete my cells
  1770. 					while (world.mine.length) world.mine.pop();
  1771. 					break;
  1772.  
  1773. 				case 0x20: { // new owned cell
  1774. 					world.mine.push(dat.getUint32(off, true));
  1775. 					if (world.mine.length === 1)
  1776. 						world.stats.spawnedAt = now;
  1777. 					break;
  1778. 				}
  1779.  
  1780. 				// case 0x30 is a text list (not a numbered list), leave unsupported
  1781. 				case 0x31: { // ffa leaderboard list
  1782. 					const lb = [];
  1783. 					const count = dat.getUint32(off, true);
  1784. 					off += 4;
  1785.  
  1786. 					let myPosition;
  1787. 					for (let i = 0; i < count; ++i) {
  1788. 						const me = !!dat.getUint32(off, true);
  1789. 						off += 4;
  1790.  
  1791. 						let name;
  1792. 						[name, off] = readZTString(dat, off);
  1793. 						name = aux.parseName(name);
  1794.  
  1795. 						// why this is copied into every leaderboard entry is beyond my understanding
  1796. 						myPosition = dat.getUint32(off, true);
  1797. 						const sub = !!dat.getUint32(off + 4, true);
  1798. 						off += 8;
  1799.  
  1800. 						lb.push({ name, sub, me, place: undefined });
  1801. 					}
  1802.  
  1803. 					if (myPosition) {
  1804. 						if (myPosition - 1 >= lb.length) {
  1805. 							/** @type {HTMLInputElement | null} */
  1806. 							const inputName = document.querySelector('input#nick');
  1807. 							lb.push({
  1808. 								me: true,
  1809. 								name: aux.parseName(inputName?.value ?? ''),
  1810. 								place: myPosition,
  1811. 								sub: false,
  1812. 							});
  1813. 						}
  1814.  
  1815. 						if (myPosition < world.stats.highestPosition)
  1816. 							world.stats.highestPosition = myPosition;
  1817. 					}
  1818.  
  1819. 					world.leaderboard = lb;
  1820. 					ui.leaderboard.update();
  1821. 					break;
  1822. 				}
  1823.  
  1824. 				case 0x40: { // border update
  1825. 					world.border = {
  1826. 						l: dat.getFloat64(off, true),
  1827. 						t: dat.getFloat64(off + 8, true),
  1828. 						r: dat.getFloat64(off + 16, true),
  1829. 						b: dat.getFloat64(off + 24, true),
  1830. 					};
  1831. 					break;
  1832. 				}
  1833.  
  1834. 				case 0x63: { // chat message
  1835. 					const flags = dat.getUint8(off);
  1836. 					const rgb = /** @type {[number, number, number]} */
  1837. 						([dat.getUint8(off + 1) / 255, dat.getUint8(off + 2) / 255, dat.getUint8(off + 3) / 255]);
  1838. 					off += 4;
  1839.  
  1840. 					let name;
  1841. 					[name, off] = readZTString(dat, off);
  1842. 					let msg;
  1843. 					[msg, off] = readZTString(dat, off);
  1844.  
  1845. 					ui.chat.add(name, rgb, msg);
  1846. 					break;
  1847. 				}
  1848.  
  1849. 				case 0xb4: { // incorrect password alert
  1850. 					ui.error('Password is incorrect');
  1851. 					break;
  1852. 				}
  1853.  
  1854. 				case 0xdd: {
  1855. 					net.howarewelosingmoney();
  1856. 					net.ready = true;
  1857. 					break;
  1858. 				}
  1859.  
  1860. 				case 0xfe: { // server stats, response to a ping
  1861. 					let statString;
  1862. 					[statString, off] = readZTString(dat, off);
  1863.  
  1864. 					const statData = JSON.parse(statString);
  1865. 					ui.stats.update(statData);
  1866.  
  1867. 					if (pendingPingFrom) {
  1868. 						net.latency = now - pendingPingFrom;
  1869. 						pendingPingFrom = undefined;
  1870. 					}
  1871. 					break;
  1872. 				}
  1873. 			}
  1874. 		}
  1875.  
  1876.  
  1877.  
  1878. 		// #5 : export input functions
  1879. 		/**
  1880. 		 * @param {number} x
  1881. 		 * @param {number} y
  1882. 		 */
  1883. 		net.move = function(x, y) {
  1884. 			if (!handshake) return;
  1885. 			const buf = new ArrayBuffer(13);
  1886. 			const dat = new DataView(buf);
  1887.  
  1888. 			dat.setUint8(0, Number(handshake.shuffle.get(0x10)));
  1889. 			dat.setInt32(1, x, true);
  1890. 			dat.setInt32(5, y, true);
  1891.  
  1892. 			ws.send(buf);
  1893. 		};
  1894.  
  1895. 		net.w = function() {
  1896. 			if (!handshake) return;
  1897. 			ws.send(new Uint8Array([ Number(handshake.shuffle.get(21)) ]));
  1898. 		};
  1899.  
  1900. 		net.qdown = function() {
  1901. 			if (!handshake) return;
  1902. 			ws.send(new Uint8Array([ Number(handshake.shuffle.get(18)) ]));
  1903. 		};
  1904.  
  1905. 		net.qup = function() {
  1906. 			if (!handshake) return;
  1907. 			ws.send(new Uint8Array([ Number(handshake.shuffle.get(19)) ]));
  1908. 		};
  1909.  
  1910. 		net.split = function() {
  1911. 			if (!handshake) return;
  1912. 			ws.send(new Uint8Array([ Number(handshake.shuffle.get(17)) ]));
  1913. 		};
  1914.  
  1915. 		/**
  1916. 		 * @param {string} msg
  1917. 		 */
  1918. 		net.chat = function(msg) {
  1919. 			if (!handshake) return;
  1920. 			const msgBuf = new TextEncoder().encode(msg);
  1921.  
  1922. 			const buf = new ArrayBuffer(msgBuf.byteLength + 3);
  1923. 			const dat = new DataView(buf);
  1924.  
  1925. 			dat.setUint8(0, Number(handshake.shuffle.get(0x63)));
  1926. 			// skip byte #1, seems to require authentication + not implemented anyway
  1927. 			for (let i = 0; i < msgBuf.byteLength; ++i)
  1928. 				dat.setUint8(2 + i, msgBuf[i]);
  1929.  
  1930. 			ws.send(buf);
  1931. 		};
  1932.  
  1933. 		/**
  1934. 		 * @param {string | undefined} v2
  1935. 		 * @param {string | undefined} v3
  1936. 		 */
  1937. 		net.captcha = function(v2, v3) {
  1938. 			sendJson(0xdc, { recaptchaV2Token: v2, recaptchaV3Token: v3 });
  1939. 		};
  1940.  
  1941. 		/**
  1942. 		 * @param {{ name: string, skin: string, [x: string]: any }} data
  1943. 		 */
  1944. 		net.play = function(data) {
  1945. 			sendJson(0x00, data);
  1946. 		};
  1947.  
  1948. 		net.howarewelosingmoney = function() {
  1949. 			if (!handshake) return;
  1950. 			// this is a new thing added with the rest of the recent source code obfuscation (2024/02/18)
  1951. 			// which collects and links to your sigmally account, seemingly just for light data analysis but probably
  1952. 			// just for the fun of it:
  1953. 			// - your IP and country
  1954. 			// - whether you are under a proxy
  1955. 			// - whether you are using sigmod (because it also blocks ads)
  1956. 			// - whether you are using a traditional adblocker
  1957. 			//
  1958. 			// so, no thank you
  1959. 			sendJson(0xd0, { ip: '', country: '', proxy: false, user: null, blocker: 'sigmally fixes @8y8x' });
  1960. 		};
  1961.  
  1962. 		net.connection = function() {
  1963. 			if (!ws) return undefined;
  1964. 			if (ws.readyState !== WebSocket.OPEN) return undefined;
  1965. 			if (!handshake) return undefined;
  1966. 			return ws;
  1967. 		};
  1968.  
  1969.  
  1970.  
  1971. 		connect();
  1972. 		return net;
  1973. 	})();
  1974.  
  1975.  
  1976.  
  1977. 	//////////////////////////
  1978. 	// Setup Input Handlers //
  1979. 	//////////////////////////
  1980. 	const input = (() => {
  1981. 		const input = {};
  1982.  
  1983. 		// #1 : general inputs
  1984. 		// sigmod's macro feed runs at a slower interval but presses many times in that interval. allowing queueing 2 w
  1985. 		// presses makes it faster (it would be better if people disabled that macro, but no one would do that)
  1986. 		let forceW = 0;
  1987. 		let mouseX = 960;
  1988. 		let mouseY = 540;
  1989. 		let w = false;
  1990.  
  1991. 		input.zoom = 1;
  1992.  
  1993. 		function mouse() {
  1994. 			net.move(
  1995. 				world.camera.x + (mouseX - innerWidth / 2) / ui.game.viewportScale / world.camera.scale,
  1996. 				world.camera.y + (mouseY - innerHeight / 2) / ui.game.viewportScale / world.camera.scale,
  1997. 			);
  1998. 		}
  1999.  
  2000. 		function unfocused() {
  2001. 			return ui.escOverlayVisible() || document.activeElement?.tagName === 'INPUT';
  2002. 		}
  2003.  
  2004. 		setInterval(() => {
  2005. 			if (document.visibilityState === 'hidden') return;
  2006. 			mouse();
  2007. 			if (forceW > 0) {
  2008. 				--forceW;
  2009. 				net.w();
  2010. 			} else if (w) net.w();
  2011. 		}, 40);
  2012.  
  2013. 		// sigmod freezes the player by overlaying an invisible div, so we just listen for canvas movements instead
  2014. 		addEventListener('mousemove', e => {
  2015. 			if (ui.escOverlayVisible()) return;
  2016. 			// sigmod freezes the player by overlaying an invisible div, so we respect it
  2017. 			if (e.target instanceof HTMLDivElement
  2018. 				&& /** @type {CSSUnitValue | undefined} */ (e.target.attributeStyleMap.get('z-index'))?.value === 99)
  2019. 				return;
  2020. 			mouseX = e.clientX;
  2021. 			mouseY = e.clientY;
  2022. 		});
  2023.  
  2024. 		addEventListener('wheel', e => {
  2025. 			if (unfocused()) return;
  2026. 			input.zoom *= 0.8 ** (e.deltaY / 100);
  2027. 			input.zoom = Math.min(Math.max(input.zoom, 0.8 ** 10), 0.8 ** -11);
  2028. 		});
  2029.  
  2030. 		addEventListener('keydown', e => {
  2031. 			if (!document.hasFocus()) return;
  2032.  
  2033. 			if (e.code === 'Escape') {
  2034. 				if (document.activeElement === ui.chat.input)
  2035. 					ui.chat.input.blur();
  2036. 				else
  2037. 					ui.toggleEscOverlay();
  2038. 				return;
  2039. 			}
  2040.  
  2041. 			if (unfocused()) {
  2042. 				if (e.code === 'Enter' && document.activeElement === ui.chat.input && ui.chat.input.value.length > 0) {
  2043. 					net.chat(ui.chat.input.value.slice(0, 15));
  2044. 					ui.chat.input.value = '';
  2045. 					ui.chat.input.blur();
  2046. 				}
  2047.  
  2048. 				return;
  2049. 			}
  2050.  
  2051. 			switch (e.code) {
  2052. 				case 'KeyQ':
  2053. 					if (!e.repeat)
  2054. 						net.qdown();
  2055. 					break;
  2056. 				case 'KeyW':
  2057. 					w = true;
  2058. 					forceW = Math.min(forceW + 1, 2);
  2059. 					break;
  2060. 				case 'Space': {
  2061. 					if (!e.repeat) {
  2062. 						// send mouse position immediately, so the split will go in the correct direction.
  2063. 						// setTimeout is used to ensure that our mouse position is actually updated (it comes after
  2064. 						// keydown events)
  2065. 						setTimeout(() => {
  2066. 							mouse();
  2067. 							net.split();
  2068. 						});
  2069. 					}
  2070. 					break;
  2071. 				}
  2072. 				case 'Enter': {
  2073. 					ui.chat.input.focus();
  2074. 					break;
  2075. 				}
  2076. 			}
  2077.  
  2078. 			if (e.ctrlKey && e.code === 'KeyW') {
  2079. 				// prevent ctrl+w (only when in fullscreen!) - helps when multiboxing
  2080. 				e.preventDefault();
  2081. 			} else if (e.ctrlKey && e.code === 'Tab') {
  2082. 				e.returnValue = true; // undo e.preventDefault() by SigMod
  2083. 				e.stopImmediatePropagation(); // prevent SigMod from calling e.preventDefault() afterwards
  2084. 			} else if (e.code === 'Tab') {
  2085. 				// prevent tabbing to a UI element, which then lets you press ctrl+w
  2086. 				e.preventDefault();
  2087. 			}
  2088. 		});
  2089.  
  2090. 		addEventListener('keyup', e => {
  2091. 			// do not check if unfocused
  2092. 			if (e.code === 'KeyQ')
  2093. 				net.qup();
  2094. 			else if (e.code === 'KeyW')
  2095. 				w = false;
  2096. 		});
  2097.  
  2098. 		// when switching tabs, make sure W is not being held
  2099. 		addEventListener('blur', () => {
  2100. 			// dispatch event to make sure sigmod gets it too
  2101. 			document.dispatchEvent(new KeyboardEvent('keyup', { code: 'KeyW', key: 'w' }));
  2102. 			forceW = 0;
  2103. 		});
  2104.  
  2105. 		addEventListener('beforeunload', e => {
  2106. 			e.preventDefault();
  2107. 		});
  2108.  
  2109. 		// prevent right clicking on the game
  2110. 		ui.game.canvas.addEventListener('contextmenu', e => e.preventDefault());
  2111.  
  2112. 		// prevent dragging when some things are selected - i have a habit of unconsciously clicking all the time,
  2113. 		// making me regularly drag text, disabling my mouse inputs for a bit
  2114. 		addEventListener('dragstart', e => e.preventDefault());
  2115.  
  2116.  
  2117.  
  2118. 		// #2 : play and spectate buttons, and captcha
  2119. 		/** @param {boolean} spectating */
  2120. 		function playData(spectating) {
  2121. 			/** @type {HTMLInputElement | null} */
  2122. 			const nickElement = document.querySelector('input#nick');
  2123. 			/** @type {HTMLInputElement | null} */
  2124. 			const password = document.querySelector('input#password');
  2125.  
  2126. 			return {
  2127. 				state: spectating ? 2 : undefined,
  2128. 				name: nickElement?.value ?? '',
  2129. 				skin: aux.settings?.skin,
  2130. 				token: aux.token?.token,
  2131. 				sub: (aux.userData?.subscription ?? 0) > Date.now(),
  2132. 				clan: aux.userData?.clan,
  2133. 				showClanmates: aux.setting('input#showClanmates', true),
  2134. 				password: password?.value,
  2135. 			};
  2136. 		}
  2137.  
  2138. 		/** @type {HTMLButtonElement} */
  2139. 		const play = aux.require(
  2140. 			document.querySelector('button#play-btn'),
  2141. 			'Can\'t find the play button. Try reloading the page?',
  2142. 		);
  2143. 		/** @type {HTMLButtonElement} */
  2144. 		const spectate = aux.require(
  2145. 			document.querySelector('button#spectate-btn'),
  2146. 			'Can\'t find the spectate button. Try reloading the page?',
  2147. 		);
  2148.  
  2149. 		play.disabled = spectate.disabled = true;
  2150.  
  2151. 		(async () => {
  2152. 			let grecaptcha, CAPTCHA2, CAPTCHA3;
  2153. 			do {
  2154. 				grecaptcha = /** @type {any} */ (window).grecaptcha;
  2155. 				CAPTCHA2 = /** @type {any} */ (window).CAPTCHA2;
  2156. 				CAPTCHA3 = /** @type {any} */ (window).CAPTCHA3;
  2157.  
  2158. 				await aux.wait(50);
  2159. 			} while (!(CAPTCHA2 && CAPTCHA3 && grecaptcha && 'execute' in grecaptcha
  2160. 				&& 'ready' in grecaptcha && 'render' in grecaptcha && 'reset' in grecaptcha));
  2161.  
  2162. 			// prevent game.js from invoking recaptcha, as this can cause a lot of lag whenever sigmod spams the play
  2163. 			// button (e.g. when using the respawn keybind)
  2164. 			// @ts-expect-error
  2165. 			window.grecaptcha = {
  2166. 				execute: () => new Promise(() => {}),
  2167. 				ready: () => {},
  2168. 				render: () => {},
  2169. 				reset: () => {},
  2170. 			};
  2171.  
  2172. 			const container = document.createElement('div');
  2173. 			container.id = 'g-recaptcha2';
  2174. 			container.style.display = 'none';
  2175. 			play.parentNode?.insertBefore(container, play);
  2176.  
  2177. 			/** @type {WebSocket | undefined} */
  2178. 			let acceptedConnection = undefined;
  2179. 			let processing = false;
  2180. 			let v2Handle;
  2181. 			/** @type {string | undefined} */
  2182. 			let v2Token = undefined;
  2183. 			/** @type {string | undefined} */
  2184. 			let v3Token = undefined;
  2185.  
  2186. 			// we need to give recaptcha enough time to analyze us, otherwise v3 will fail
  2187. 			grecaptcha.ready(() => setInterval(async function captchaFlow() {
  2188. 				let connection = net.connection();
  2189. 				if (!connection) {
  2190. 					play.disabled = spectate.disabled = true;
  2191. 					return;
  2192. 				}
  2193.  
  2194. 				if (v2Token || v3Token) {
  2195. 					net.captcha(v2Token, v3Token);
  2196. 					v2Token = v3Token = undefined;
  2197. 					processing = false;
  2198. 					acceptedConnection = connection;
  2199. 					play.disabled = spectate.disabled = false;
  2200. 					return;
  2201. 				}
  2202.  
  2203. 				if (processing || connection === acceptedConnection)
  2204. 					return;
  2205.  
  2206. 				// start the process of getting a new captcha token
  2207. 				acceptedConnection = undefined;
  2208. 				processing = true;
  2209. 				play.disabled = spectate.disabled = true;
  2210.  
  2211. 				// (a) : get a v3 token
  2212. 				/** @type {string | undefined} */
  2213. 				const v3 = await grecaptcha.execute(CAPTCHA3);
  2214.  
  2215. 				// (b) : send the v3 token to sigmally for validation (sometimes sigmally doesn't accept v3 tokens)
  2216. 				const v3Accepted = await fetch('https://' + new URL(connection.url).hostname + '/server/recaptcha/v3', {
  2217. 					method: 'POST',
  2218. 					body: JSON.stringify({ recaptchaV3Token: v3 }),
  2219. 					headers: { 'Content-Type': 'application/json' },
  2220. 				})
  2221. 					.then(res => res.json()).then(res => !!res?.body?.success)
  2222. 					.catch(err => {
  2223. 						console.error('Failed to validate v3 token:', err);
  2224. 						return false;
  2225. 					});
  2226.  
  2227. 				// (c) : if accepted by this server, send the v3 token to this game
  2228. 				if (v3Accepted) {
  2229. 					container.style.display = 'none';
  2230. 					connection = net.connection();
  2231. 					if (connection) {
  2232. 						net.captcha(undefined, v3);
  2233. 						processing = false;
  2234. 						acceptedConnection = connection;
  2235. 						play.disabled = spectate.disabled = false;
  2236. 					} else {
  2237. 						v3Token = v3;
  2238. 					}
  2239.  
  2240. 					return;
  2241. 				}
  2242.  
  2243. 				// (d) : otherwise, render a v2 captcha
  2244. 				container.style.display = 'block';
  2245. 				play.style.display = spectate.style.display = 'none';
  2246. 				if (v2Handle !== undefined) {
  2247. 					grecaptcha.reset(v2Handle);
  2248. 				} else {
  2249. 					v2Handle = grecaptcha.render('g-recaptcha2', {
  2250. 						sitekey: CAPTCHA2,
  2251. 						callback: v2 => {
  2252. 							container.style.display = 'none';
  2253. 							play.style.display = spectate.style.display = '';
  2254.  
  2255. 							if (acceptedConnection) return;
  2256.  
  2257. 							connection = net.connection();
  2258. 							if (connection) {
  2259. 								net.captcha(v2, undefined);
  2260. 								processing = false;
  2261. 								acceptedConnection = connection;
  2262. 								play.disabled = spectate.disabled = false;
  2263. 							} else {
  2264. 								v2Token = v2;
  2265. 							}
  2266. 						},
  2267. 					});
  2268. 				}
  2269. 			}, 500));
  2270.  
  2271. 			/** @param {MouseEvent} e */
  2272. 			async function clickHandler(e) {
  2273. 				if (!acceptedConnection) return;
  2274. 				ui.toggleEscOverlay(false);
  2275. 				net.play(playData(e.currentTarget === spectate));
  2276. 			}
  2277.  
  2278. 			play.addEventListener('click', clickHandler);
  2279. 			spectate.addEventListener('click', clickHandler);
  2280. 		})();
  2281.  
  2282. 		return input;
  2283. 	})();
  2284.  
  2285.  
  2286.  
  2287. 	//////////////////////////
  2288. 	// Configure WebGL Data //
  2289. 	//////////////////////////
  2290. 	const { init: initWebGL, programs, uniforms } = (() => {
  2291. 		// note: WebGL functions only really return null if the context is lost - in which case, data will be replaced
  2292. 		// anyway after it's restored. so, we cast everything to a non-null type.
  2293. 		const obj = {};
  2294. 		const programs = {};
  2295. 		const uniforms = {};
  2296.  
  2297. 		const gl = ui.game.gl;
  2298.  
  2299. 		// define helper functions
  2300. 		/**
  2301. 		 * @param {string} name
  2302. 		 * @param {WebGLShader} vShader
  2303. 		 * @param {WebGLShader} fShader
  2304. 		 */
  2305. 		function program(name, vShader, fShader) {
  2306. 			const p = /** @type {WebGLProgram} */ (gl.createProgram());
  2307.  
  2308. 			gl.attachShader(p, vShader);
  2309. 			gl.attachShader(p, fShader);
  2310. 			gl.linkProgram(p);
  2311.  
  2312. 			// note: linking errors should not happen in production
  2313. 			aux.require(
  2314. 				gl.getProgramParameter(p, gl.LINK_STATUS) || !gl.isContextLost(),
  2315. 				`Can\'t link WebGL2 program "${name}". You might be on a weird browser.\n\nFull error log:\n` +
  2316. 				gl.getProgramInfoLog(p),
  2317. 			);
  2318.  
  2319. 			return p;
  2320. 		}
  2321.  
  2322. 		/**
  2323. 		 * @param {string} name
  2324. 		 * @param {number} type
  2325. 		 * @param {string} source
  2326. 		 */
  2327. 		function shader(name, type, source) {
  2328. 			const s = /** @type {WebGLShader} */ (gl.createShader(type));
  2329. 			gl.shaderSource(s, source);
  2330. 			gl.compileShader(s);
  2331.  
  2332. 			// note: compilation errors should not happen in production
  2333. 			aux.require(
  2334. 				gl.getShaderParameter(s, gl.COMPILE_STATUS) || !gl.isContextLost(),
  2335. 				`Can\'t compile WebGL2 shader "${name}". You might be on a weird browser.\n\nFull error log:\n` +
  2336. 				gl.getShaderInfoLog(s),
  2337. 			);
  2338.  
  2339. 			return s;
  2340. 		}
  2341.  
  2342. 		/**
  2343. 		 * @template {string} T
  2344. 		 * @param {string} programName
  2345. 		 * @param {WebGLProgram} program
  2346. 		 * @param {T[]} names
  2347. 		 * @returns {{ [x in T]: WebGLUniformLocation }}
  2348. 		 */
  2349. 		function getUniforms(programName, program, names) {
  2350. 			/** @type {{ [x in T]?: WebGLUniformLocation }} */
  2351. 			const uniforms = {};
  2352. 			names.forEach(name => {
  2353. 				const loc = /** @type {WebGLUniformLocation} */ (gl.getUniformLocation(program, name));
  2354. 				aux.require(
  2355. 					loc || !gl.isContextLost(), `Can\'t find WebGL2 uniform "${name}" in program "${programName}".`);
  2356.  
  2357. 				uniforms[name] = loc;
  2358. 			});
  2359.  
  2360. 			return /** @type {any} */ (uniforms);
  2361. 		}
  2362.  
  2363.  
  2364.  
  2365. 		function init() {
  2366. 			gl.enable(gl.BLEND);
  2367. 			gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  2368.  
  2369. 			// create programs and uniforms
  2370. 			programs.bg = program(
  2371. 				'bg',
  2372. 				shader('bg.vShader', gl.VERTEX_SHADER, `#version 300 es
  2373. 				layout(location = 0) in vec2 a_pos;
  2374.  
  2375. 				uniform float u_aspect_ratio;
  2376. 				uniform vec2 u_camera_pos;
  2377. 				uniform float u_camera_scale;
  2378.  
  2379. 				out vec2 v_world_pos;
  2380.  
  2381. 				void main() {
  2382. 					gl_Position = vec4(a_pos, 0, 1);
  2383.  
  2384. 					v_world_pos = a_pos * vec2(u_aspect_ratio, 1.0) / u_camera_scale;
  2385. 					v_world_pos += u_camera_pos * vec2(1.0, -1.0);
  2386. 				}
  2387. 				`),
  2388. 				shader('bg.fShader', gl.FRAGMENT_SHADER, `#version 300 es
  2389. 				precision highp float;
  2390. 				in vec2 v_world_pos;
  2391.  
  2392. 				uniform float u_camera_scale;
  2393.  
  2394. 				uniform vec4 u_border_color;
  2395. 				uniform float[4] u_border_lrtb;
  2396. 				uniform bool u_dark_theme_enabled;
  2397. 				uniform bool u_grid_enabled;
  2398. 				uniform sampler2D u_texture;
  2399.  
  2400. 				out vec4 out_color;
  2401.  
  2402. 				void main() {
  2403. 					if (u_grid_enabled) {
  2404. 						vec2 t_coord = v_world_pos / 50.0;
  2405. 						out_color = texture(u_texture, t_coord);
  2406. 						// fade grid pixels so when they become <1px wide, they're invisible
  2407. 						float alpha = clamp(u_camera_scale * 540.0 * 50.0, 0.0, 1.0) * 0.1;
  2408. 						if (u_dark_theme_enabled) {
  2409. 							out_color *= vec4(1, 1, 1, alpha);
  2410. 						} else {
  2411. 							out_color *= vec4(0, 0, 0, alpha);
  2412. 						}
  2413. 					}
  2414.  
  2415. 					// force border to always be visible, otherwise it flickers
  2416. 					float thickness = max(3.0 / (u_camera_scale * 540.0), 25.0);
  2417.  
  2418. 					// make a larger inner rectangle and a normal inverted outer rectangle
  2419. 					float inner_alpha = min(
  2420. 						min((v_world_pos.x + thickness) - u_border_lrtb[0],
  2421. 							u_border_lrtb[1] - (v_world_pos.x - thickness)),
  2422. 						min((v_world_pos.y + thickness) - u_border_lrtb[2],
  2423. 							u_border_lrtb[3] - (v_world_pos.y - thickness))
  2424. 					);
  2425. 					float outer_alpha = max(
  2426. 						max(u_border_lrtb[0] - v_world_pos.x, v_world_pos.x - u_border_lrtb[1]),
  2427. 						max(u_border_lrtb[2] - v_world_pos.y, v_world_pos.y - u_border_lrtb[3])
  2428. 					);
  2429. 					float alpha = clamp(min(inner_alpha, outer_alpha), 0.0, 1.0);
  2430.  
  2431. 					out_color = out_color * (1.0 - alpha) + u_border_color * alpha;
  2432. 				}
  2433. 				`),
  2434. 			);
  2435. 			uniforms.bg = getUniforms('bg', programs.bg, [
  2436. 				'u_aspect_ratio', 'u_camera_pos', 'u_camera_scale',
  2437. 				'u_border_color', 'u_border_lrtb', 'u_dark_theme_enabled', 'u_grid_enabled',
  2438. 			]);
  2439.  
  2440.  
  2441.  
  2442. 			programs.cell = program(
  2443. 				'cell',
  2444. 				shader('cell.vShader', gl.VERTEX_SHADER, `#version 300 es
  2445. 				layout(location = 0) in vec2 a_pos;
  2446.  
  2447. 				uniform float u_aspect_ratio;
  2448. 				uniform vec2 u_camera_pos;
  2449. 				uniform float u_camera_scale;
  2450.  
  2451. 				uniform float u_inner_radius;
  2452. 				uniform float u_outer_radius;
  2453. 				uniform vec2 u_pos;
  2454.  
  2455. 				out vec2 v_pos;
  2456. 				out vec2 v_t_coord;
  2457.  
  2458. 				void main() {
  2459. 					v_pos = a_pos;
  2460. 					v_t_coord = a_pos / (u_inner_radius / u_outer_radius) * 0.5 + 0.5;
  2461.  
  2462. 					vec2 clip_pos = -u_camera_pos + u_pos + a_pos * u_outer_radius;
  2463. 					clip_pos *= u_camera_scale * vec2(1.0 / u_aspect_ratio, -1.0);
  2464. 					gl_Position = vec4(clip_pos, 0, 1);
  2465. 				}
  2466. 				`),
  2467. 				shader('cell.fShader', gl.FRAGMENT_SHADER, `#version 300 es
  2468. 				precision highp float;
  2469. 				in vec2 v_pos;
  2470. 				in vec2 v_t_coord;
  2471.  
  2472. 				uniform float u_camera_scale;
  2473.  
  2474. 				uniform float u_alpha;
  2475. 				uniform vec4 u_color;
  2476. 				uniform float u_outer_radius;
  2477. 				uniform vec4 u_outline_color;
  2478. 				uniform bool u_outline_thick;
  2479. 				uniform sampler2D u_texture;
  2480. 				uniform bool u_texture_enabled;
  2481. 				uniform float u_time;
  2482. 				uniform float u_wobble[6];
  2483. 				uniform bool u_wobble_enabled;
  2484.  
  2485. 				out vec4 out_color;
  2486.  
  2487. 				void main() {
  2488. 					float blur = 0.5 * u_outer_radius * (540.0 * u_camera_scale);
  2489. 					float d2 = v_pos.x * v_pos.x + v_pos.y * v_pos.y;
  2490. 					float wobble_delta = 0.0;
  2491. 					if (u_wobble_enabled && d2 > 0.9) {
  2492. 						float theta = atan(v_pos.y, v_pos.x);
  2493. 						wobble_delta = sin(2.0 * (theta + u_time * u_wobble[0] + u_wobble[1]))
  2494. 							+ sin(3.0 * (theta + u_time * u_wobble[2] + u_wobble[3]))
  2495. 							+ sin(5.0 * (theta + u_time * u_wobble[4] + u_wobble[5]));
  2496. 						wobble_delta *= 0.75 / u_outer_radius;
  2497. 					}
  2498.  
  2499. 					float a = clamp(-blur * (d2 - (1.0 + wobble_delta)), 0.0, 1.0);
  2500.  
  2501. 					if (u_texture_enabled) {
  2502. 						out_color = texture(u_texture, v_t_coord);
  2503. 					}
  2504. 					out_color = vec4(out_color.rgb, 1) * out_color.a + u_color * (1.0 - out_color.a);
  2505.  
  2506. 					// outline
  2507. 					// d > 0.98   => d2 > 0.9604 (default)
  2508. 					// d > 0.96   => d2 > 0.9216 (thick)
  2509. 					float outline_d = u_outline_thick ? 0.9216 : 0.9604;
  2510. 					float oa = clamp(blur * (d2 - (outline_d + wobble_delta)), 0.0, 1.0) * u_outline_color.a;
  2511. 					out_color.rgb = out_color.rgb * (1.0 - oa) + u_outline_color.rgb * oa;
  2512.  
  2513. 					out_color.a *= a * u_alpha;
  2514. 				}
  2515. 				`),
  2516. 			);
  2517. 			uniforms.cell = getUniforms('cell', programs.cell, [
  2518. 				'u_aspect_ratio', 'u_camera_pos', 'u_camera_scale',
  2519. 				'u_alpha', 'u_color', 'u_outline_color', 'u_outline_thick', 'u_inner_radius', 'u_outer_radius', 'u_pos',
  2520. 				'u_texture_enabled', 'u_time', 'u_wobble', 'u_wobble_enabled',
  2521. 			]);
  2522.  
  2523.  
  2524.  
  2525. 			programs.text = program(
  2526. 				'text',
  2527. 				shader('text.vShader', gl.VERTEX_SHADER, `#version 300 es
  2528. 				layout(location = 0) in vec2 a_pos;
  2529.  
  2530. 				uniform float u_aspect_ratio;
  2531. 				uniform vec2 u_camera_pos;
  2532. 				uniform float u_camera_scale;
  2533.  
  2534. 				uniform vec2 u_pos;
  2535. 				uniform float u_radius;
  2536. 				uniform bool u_subtext_centered;
  2537. 				uniform bool u_subtext_enabled;
  2538. 				uniform float u_subtext_offset;
  2539. 				uniform float u_subtext_scale;
  2540. 				uniform float u_text_scale;
  2541. 				uniform float u_text_aspect_ratio;
  2542.  
  2543. 				out vec2 v_pos;
  2544.  
  2545. 				void main() {
  2546. 					v_pos = a_pos / 1.01; // correct for jelly physics wobble effect
  2547.  
  2548. 					vec2 clip_space;
  2549. 					if (u_subtext_enabled) {
  2550. 						clip_space = v_pos * 0.5 * u_subtext_scale;
  2551. 						clip_space.x += u_subtext_offset * u_subtext_scale;
  2552. 						if (!u_subtext_centered) {
  2553. 							clip_space.y += 0.5 * u_text_scale;
  2554. 							clip_space.y += 0.25 * (u_subtext_scale - 1.0);
  2555. 						}
  2556. 					} else {
  2557. 						clip_space = v_pos * u_text_scale;
  2558. 					}
  2559.  
  2560. 					clip_space *= u_radius * 0.45 * vec2(u_text_aspect_ratio, 1.0);
  2561. 					clip_space += -u_camera_pos + u_pos;
  2562. 					clip_space *= u_camera_scale * vec2(1.0 / u_aspect_ratio, -1.0);
  2563. 					gl_Position = vec4(clip_space, 0, 1);
  2564. 				}
  2565. 				`),
  2566. 				shader('text.fShader', gl.FRAGMENT_SHADER, `#version 300 es
  2567. 				precision highp float;
  2568. 				in vec2 v_pos;
  2569.  
  2570. 				uniform float u_alpha;
  2571. 				uniform vec3 u_color1;
  2572. 				uniform vec3 u_color2;
  2573. 				uniform bool u_silhouette_enabled;
  2574.  
  2575. 				uniform sampler2D u_texture;
  2576. 				uniform sampler2D u_silhouette;
  2577.  
  2578. 				out vec4 out_color;
  2579.  
  2580. 				void main() {
  2581. 					vec2 t_coord = v_pos * 0.5 + 0.5;
  2582.  
  2583. 					float c2_alpha = (t_coord.x + t_coord.y) / 2.0;
  2584. 					vec4 color = vec4(u_color1 * (1.0 - c2_alpha) + u_color2 * c2_alpha, 1);
  2585. 					vec4 normal = texture(u_texture, t_coord);
  2586.  
  2587. 					if (u_silhouette_enabled) {
  2588. 						vec4 silhouette = texture(u_silhouette, t_coord);
  2589.  
  2590. 						// #fff - #000 => color (text)
  2591. 						// #fff - #fff => #fff (respect emoji)
  2592. 						// #888 - #888 => #888 (respect emoji)
  2593. 						// #fff - #888 => #888 + color/2 (blur/antialias)
  2594. 						out_color = silhouette + (normal - silhouette) * color;
  2595. 					} else {
  2596. 						out_color = normal * color;
  2597. 					}
  2598.  
  2599. 					out_color.a *= u_alpha;
  2600. 				}
  2601. 				`),
  2602. 			);
  2603. 			uniforms.text = getUniforms('text', programs.text, [
  2604. 				'u_aspect_ratio', 'u_camera_pos', 'u_camera_scale',
  2605. 				'u_alpha', 'u_color1', 'u_color2', 'u_pos', 'u_radius', 'u_silhouette', 'u_silhouette_enabled',
  2606. 				'u_subtext_centered', 'u_subtext_enabled', 'u_subtext_offset', 'u_subtext_scale', 'u_text_aspect_ratio',
  2607. 				'u_text_scale', 'u_texture',
  2608. 			]);
  2609.  
  2610. 			// create and bind objects
  2611. 			const square = gl.createBuffer();
  2612. 			gl.bindBuffer(gl.ARRAY_BUFFER, square);
  2613. 			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  2614. 				// 1.01, rather than 1, to account for jelly physics wobbles
  2615. 				-1.01, -1.01,
  2616. 				1.01, -1.01,
  2617. 				-1.01, 1.01,
  2618. 				1.01, 1.01,
  2619. 			]), gl.STATIC_DRAW);
  2620.  
  2621. 			const vao = gl.createVertexArray();
  2622. 			gl.bindVertexArray(vao);
  2623. 			gl.enableVertexAttribArray(0);
  2624. 			gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  2625. 		}
  2626.  
  2627. 		init();
  2628.  
  2629. 		return { init, programs, uniforms };
  2630. 	})();
  2631.  
  2632.  
  2633.  
  2634. 	///////////////////////////////
  2635. 	// Define Rendering Routines //
  2636. 	///////////////////////////////
  2637. 	const render = (() => {
  2638. 		const render = {};
  2639. 		const gl = ui.game.gl;
  2640.  
  2641. 		// #1 : define small misc objects
  2642. 		// no point in breaking this across multiple lines
  2643. 		// eslint-disable-next-line max-len
  2644. 		const gridSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAKVJREFUaEPtkkEKwlAUxBzw/jeWL4J4gECkSrqftC/pzjnn9gfP3ofcf/mWbY8OuVLBilypxutbKlIRyUC/liQWYyuC1UnDikhiMbYiWJ00rIgkFmMrgtVJw4pIYjG2IlidNKyIJBZjK4LVScOKSGIxtiJYnTSsiCQWYyuC1UnDikhiMbYiWJ00rIgkFmMrgtVJw4pIYjG2IlidNPwU2TbpHV/DPgFxJfgvliP9RQAAAABJRU5ErkJggg==';
  2645.  
  2646.  
  2647.  
  2648. 		// #2 : define helper functions
  2649. 		const { resetTextureCache, textureFromCache } = (() => {
  2650. 			/** @type {Map<string, WebGLTexture | null>} */
  2651. 			const cache = new Map();
  2652. 			render.textureCache = cache;
  2653.  
  2654. 			return {
  2655. 				resetTextureCache: () => cache.clear(),
  2656. 				/**
  2657. 				 * @param {string} src
  2658. 				 */
  2659. 				textureFromCache: src => {
  2660. 					const cached = cache.get(src);
  2661. 					if (cached !== undefined)
  2662. 						return cached ?? undefined;
  2663.  
  2664. 					cache.set(src, null);
  2665.  
  2666. 					const image = new Image();
  2667. 					image.crossOrigin = 'anonymous';
  2668. 					image.addEventListener('load', () => {
  2669. 						const texture = /** @type {WebGLTexture} */ (gl.createTexture());
  2670. 						if (!texture) return;
  2671.  
  2672. 						gl.bindTexture(gl.TEXTURE_2D, texture);
  2673. 						gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  2674. 						gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
  2675. 						gl.generateMipmap(gl.TEXTURE_2D);
  2676. 						cache.set(src, texture);
  2677. 					});
  2678. 					image.src = src;
  2679.  
  2680. 					return undefined;
  2681. 				},
  2682. 			};
  2683. 		})();
  2684. 		render.resetTextureCache = resetTextureCache;
  2685.  
  2686. 		const { massTextFromCache, resetTextCache, textFromCache } = (() => {
  2687. 			/**
  2688. 			 * @template {boolean} T
  2689. 			 * @typedef {{
  2690. 			 * 	aspectRatio: number,
  2691. 			 * 	text: WebGLTexture | null,
  2692. 			 *	silhouette: WebGLTexture | null | undefined,
  2693. 			 * 	accessed: number
  2694. 			 * }} CacheEntry
  2695. 			 */
  2696. 			/** @type {Map<string, CacheEntry<boolean>>} */
  2697. 			const cache = new Map();
  2698. 			render.textCache = cache;
  2699.  
  2700. 			setInterval(() => {
  2701. 				// remove text after not being used for 1 minute
  2702. 				const now = performance.now();
  2703. 				cache.forEach((entry, text) => {
  2704. 					if (now - entry.accessed > 60_000) {
  2705. 						// immediately delete text instead of waiting for GC
  2706. 						gl.deleteTexture(entry.text);
  2707. 						if (entry.silhouette !== undefined) gl.deleteTexture(entry.silhouette);
  2708. 						cache.delete(text);
  2709. 					}
  2710. 				});
  2711. 			}, 60_000);
  2712.  
  2713. 			const canvas = document.createElement('canvas');
  2714. 			const ctx = aux.require(
  2715. 				canvas.getContext('2d', { willReadFrequently: true }),
  2716. 				'Unable to get 2D context for text drawing. This is probably your browser being weird, maybe reload ' +
  2717. 				'the page?',
  2718. 			);
  2719.  
  2720. 			const baseTextSize = 96;
  2721.  
  2722. 			/**
  2723. 			 * @param {string} text
  2724. 			 * @param {boolean} silhouette
  2725. 			 * @param {boolean} mass
  2726. 			 * @returns {WebGLTexture | null}
  2727. 			 */
  2728. 			const texture = (text, silhouette, mass) => {
  2729. 				const texture = gl.createTexture();
  2730. 				if (!texture) return texture;
  2731.  
  2732. 				const textSize = baseTextSize * (mass ? 0.5 * settings.massScaleFactor : settings.nameScaleFactor);
  2733. 				const lineWidth = Math.ceil(textSize / 10);
  2734.  
  2735. 				let font = '';
  2736. 				if (mass ? settings.massBold : settings.nameBold)
  2737. 					font = 'bold';
  2738. 				font += ' ' + textSize + 'px Ubuntu';
  2739.  
  2740. 				ctx.font = font;
  2741. 				canvas.width = ctx.measureText(text).width + lineWidth * 2;
  2742. 				canvas.height = textSize * 3;
  2743. 				ctx.clearRect(0, 0, canvas.width, canvas.height);
  2744.  
  2745. 				// setting canvas.width resets the canvas state
  2746. 				ctx.font = font;
  2747. 				ctx.lineJoin = 'round';
  2748. 				ctx.lineWidth = lineWidth;
  2749. 				ctx.fillStyle = silhouette ? '#000' : '#fff';
  2750. 				ctx.strokeStyle = '#000';
  2751. 				ctx.textBaseline = 'middle';
  2752.  
  2753. 				// add a space, which is to prevent sigmod from detecting the name
  2754. 				ctx.strokeText(text + ' ', lineWidth, textSize * 1.5);
  2755. 				ctx.fillText(text + ' ', lineWidth, textSize * 1.5);
  2756.  
  2757. 				const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
  2758.  
  2759. 				gl.bindTexture(gl.TEXTURE_2D, texture);
  2760. 				gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, data);
  2761. 				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR);
  2762. 				gl.generateMipmap(gl.TEXTURE_2D);
  2763. 				return texture;
  2764. 			};
  2765.  
  2766. 			let drawnMassBold = false;
  2767. 			let drawnMassScaleFactor = -1;
  2768. 			let massAspectRatio = 1; // assumption: all mass digits are the same aspect ratio - true in the Ubuntu font
  2769. 			/** @type {(WebGLTexture | undefined)[]} */
  2770. 			const massTextCache = [];
  2771.  
  2772. 			/**
  2773. 			 * @param {string} digit
  2774. 			 * @returns {{ aspectRatio: number, texture: WebGLTexture | null }}
  2775. 			 */
  2776. 			const massTextFromCache = digit => {
  2777. 				if (settings.massScaleFactor !== drawnMassScaleFactor || settings.massBold !== drawnMassBold) {
  2778. 					while (massTextCache.pop());
  2779. 					drawnMassScaleFactor = settings.massScaleFactor;
  2780. 					drawnMassBold = settings.massBold;
  2781. 				}
  2782.  
  2783. 				let cached = massTextCache[digit];
  2784. 				if (!cached) {
  2785. 					cached = massTextCache[digit] = texture(digit, false, true);
  2786. 					massAspectRatio = canvas.width / canvas.height;
  2787. 				}
  2788.  
  2789. 				return { aspectRatio: massAspectRatio, texture: cached };
  2790. 			};
  2791.  
  2792. 			const resetTextCache = () => {
  2793. 				cache.clear();
  2794. 				while (massTextCache.pop());
  2795. 			};
  2796.  
  2797. 			let drawnNamesBold = false;
  2798. 			let drawnNamesScaleFactor = -1;
  2799. 			/**
  2800. 			 * @template {boolean} T
  2801. 			 * @param {string} text
  2802. 			 * @param {T} silhouette
  2803. 			 * @returns {CacheEntry<T>}
  2804. 			 */
  2805. 			const textFromCache = (text, silhouette) => {
  2806. 				if (drawnNamesScaleFactor !== settings.nameScaleFactor || drawnNamesBold !== settings.nameBold) {
  2807. 					cache.clear();
  2808. 					drawnNamesScaleFactor = settings.nameScaleFactor;
  2809. 					drawnNamesBold = settings.nameBold;
  2810. 				}
  2811.  
  2812. 				let entry = cache.get(text);
  2813. 				if (!entry) {
  2814. 					const shortened = aux.trim(text);
  2815. 					entry = {
  2816. 						text: texture(shortened, false, false),
  2817. 						aspectRatio: canvas.width / canvas.height, // mind the execution order
  2818. 						silhouette: silhouette ? texture(shortened, true, false) : undefined,
  2819. 						accessed: performance.now(),
  2820. 					};
  2821. 					cache.set(text, entry);
  2822. 				} else {
  2823. 					entry.accessed = performance.now();
  2824. 				}
  2825.  
  2826. 				if (silhouette && entry.silhouette === undefined)
  2827. 					entry.silhouette = texture(aux.trim(text), true, false);
  2828.  
  2829. 				return entry;
  2830. 			};
  2831.  
  2832. 			return { massTextFromCache, resetTextCache, textFromCache };
  2833. 		})();
  2834. 		render.resetTextCache = resetTextCache;
  2835.  
  2836.  
  2837.  
  2838. 		// #3 : define the render function
  2839. 		let fps = 0;
  2840. 		let lastFrame = performance.now();
  2841. 		const start = lastFrame;
  2842. 		function renderGame() {
  2843. 			const now = performance.now();
  2844. 			const dt = Math.max(now - lastFrame, 0.1) / 1000; // there's a chance (now - lastFrame) can be 0
  2845. 			fps += (1 / dt - fps) / 10;
  2846. 			lastFrame = now;
  2847.  
  2848. 			if (gl.isContextLost()) {
  2849. 				requestAnimationFrame(renderGame);
  2850. 				return;
  2851. 			}
  2852.  
  2853. 			// get settings
  2854. 			const cellColor = aux.sigmod?.cellColor ? aux.hex2rgb(aux.sigmod.cellColor) : undefined;
  2855. 			const hidePellets = aux.sigmod?.fps?.hideFood;
  2856. 			const mapColor = aux.sigmod?.mapColor ? aux.hex2rgb(aux.sigmod.mapColor) : undefined;
  2857. 			const outlineColor = aux.sigmod?.borderColor ? aux.hex2rgb(aux.sigmod.borderColor) : undefined;
  2858. 			const pelletColor = aux.sigmod?.foodColor ? aux.hex2rgb(aux.sigmod.foodColor) : undefined;
  2859. 			/** @type {object | undefined} */
  2860. 			const skinReplacement = aux.sigmod?.skinImage;
  2861. 			/** @type {string} */
  2862. 			const virusSrc = aux.sigmod?.virusImage ?? '/assets/images/viruses/2.png';
  2863.  
  2864. 			/** @type {[number, number, number] | undefined} */
  2865. 			let nameColor1;
  2866. 			/** @type {[number, number, number] | undefined} */
  2867. 			let nameColor2;
  2868. 			if (aux.sigmod?.nameColor) {
  2869. 				nameColor1 = nameColor2 = aux.hex2rgb(aux.sigmod.nameColor);
  2870. 			} else if (aux.sigmod?.gradientName?.enabled) {
  2871. 				// color1 and color2 are optional to set
  2872. 				if (aux.sigmod.gradientName.color1)
  2873. 					nameColor1 = aux.hex2rgb(aux.sigmod.gradientName.color1);
  2874.  
  2875. 				if (aux.sigmod.gradientName.color2)
  2876. 					nameColor2 = aux.hex2rgb(aux.sigmod.gradientName.color2);
  2877. 			}
  2878.  
  2879. 			const darkTheme = aux.setting('input#darkTheme', true);
  2880. 			const jellyPhysics = aux.setting('input#jellyPhysics', false);
  2881. 			const showBorder = aux.setting('input#showBorder', true);
  2882. 			const showGrid = aux.setting('input#showGrid', true);
  2883. 			const showMass = aux.setting('input#showMass', false);
  2884. 			const showMinimap = aux.setting('input#showMinimap', true);
  2885. 			const showNames = aux.setting('input#showNames', true);
  2886. 			const showSkins = aux.setting('input#showSkins', true);
  2887.  
  2888. 			/** @type {HTMLInputElement | null} */
  2889. 			const nickElement = document.querySelector('input#nick');
  2890. 			const nick = nickElement?.value ?? '?';
  2891.  
  2892. 			// note: most routines are named, for benchmarking purposes
  2893. 			(function updateCells() {
  2894. 				world.update();
  2895. 				sync.frame();
  2896. 			})();
  2897.  
  2898. 			(function setGlobalUniforms() {
  2899. 				const aspectRatio = ui.game.canvas.width / ui.game.canvas.height;
  2900. 				const cameraPosX = world.camera.x;
  2901. 				const cameraPosY = world.camera.y;
  2902. 				const cameraScale = world.camera.scale / 540; // (height of 1920x1080 / 2 = 540)
  2903.  
  2904. 				gl.useProgram(programs.bg);
  2905. 				gl.uniform1f(uniforms.bg.u_aspect_ratio, aspectRatio);
  2906. 				gl.uniform2f(uniforms.bg.u_camera_pos, cameraPosX, cameraPosY);
  2907. 				gl.uniform1f(uniforms.bg.u_camera_scale, cameraScale);
  2908.  
  2909. 				gl.useProgram(programs.cell);
  2910. 				gl.uniform1f(uniforms.cell.u_aspect_ratio, aspectRatio);
  2911. 				gl.uniform2f(uniforms.cell.u_camera_pos, cameraPosX, cameraPosY);
  2912. 				gl.uniform1f(uniforms.cell.u_camera_scale, cameraScale);
  2913. 				gl.uniform1f(uniforms.cell.u_time, (now - start) / 1000);
  2914.  
  2915. 				gl.useProgram(programs.text);
  2916. 				gl.uniform1f(uniforms.text.u_aspect_ratio, aspectRatio);
  2917. 				gl.uniform2f(uniforms.text.u_camera_pos, cameraPosX, cameraPosY);
  2918. 				gl.uniform1f(uniforms.text.u_camera_scale, cameraScale);
  2919. 				gl.uniform1f(uniforms.text.u_subtext_scale, settings.massScaleFactor);
  2920. 				gl.uniform1f(uniforms.text.u_text_scale, settings.nameScaleFactor);
  2921. 				gl.uniform1i(uniforms.text.u_texture, 0);
  2922. 				gl.uniform1i(uniforms.text.u_silhouette, 1);
  2923. 			})();
  2924.  
  2925. 			(function background() {
  2926. 				if (mapColor) {
  2927. 					gl.clearColor(...mapColor, 1);
  2928. 				} else if (darkTheme) {
  2929. 					gl.clearColor(0x11 / 255, 0x11 / 255, 0x11 / 255, 1); // #111
  2930. 				} else {
  2931. 					gl.clearColor(0xf2 / 255, 0xfb / 255, 0xff / 255, 1); // #f2fbff
  2932. 				}
  2933. 				gl.clear(gl.COLOR_BUFFER_BIT);
  2934.  
  2935. 				const gridTexture = textureFromCache(gridSrc);
  2936. 				if (!gridTexture) return;
  2937. 				gl.bindTexture(gl.TEXTURE_2D, gridTexture);
  2938.  
  2939. 				gl.useProgram(programs.bg);
  2940.  
  2941. 				if (showBorder && world.border) {
  2942. 					gl.uniform4f(uniforms.bg.u_border_color, 0, 0, 1, 1); // #00f
  2943. 					gl.uniform1fv(uniforms.bg.u_border_lrtb,
  2944. 						new Float32Array([ world.border.l, world.border.r, world.border.t, world.border.b ]));
  2945. 				} else {
  2946. 					gl.uniform4f(uniforms.bg.u_border_color, 0, 0, 0, 0); // transparent
  2947. 					gl.uniform1fv(uniforms.bg.u_border_lrtb, new Float32Array([ 0, 0, 0, 0 ]));
  2948. 				}
  2949.  
  2950. 				gl.uniform1i(uniforms.bg.u_dark_theme_enabled, Number(darkTheme));
  2951. 				gl.uniform1i(uniforms.bg.u_grid_enabled, Number(showGrid));
  2952.  
  2953. 				gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  2954. 			})();
  2955.  
  2956. 			(function cells() {
  2957. 				/** @param {Cell} cell */
  2958. 				function calcAlpha(cell) {
  2959. 					let alpha = Math.min((now - cell.born) / 100, 1);
  2960. 					if (cell.dead)
  2961. 						alpha = Math.min(alpha, Math.max(1 - (now - cell.dead.at) / 100, 0));
  2962.  
  2963. 					return alpha;
  2964. 				}
  2965.  
  2966. 				// for white cell outlines
  2967. 				let nextCellIdx = world.mine.length;
  2968. 				const canSplit = world.mine.map(id => {
  2969. 					const cell = world.cells.get(id);
  2970. 					if (!cell) {
  2971. 						--nextCellIdx;
  2972. 						return false;
  2973. 					}
  2974.  
  2975. 					if (cell.nr < 128)
  2976. 						return false;
  2977.  
  2978. 					return nextCellIdx++ < 16;
  2979. 				});
  2980.  
  2981. 				/**
  2982. 				 * @param {Cell} cell
  2983. 				 * @param {number} alpha
  2984. 				 */
  2985. 				function drawCell(cell, alpha) {
  2986. 					gl.useProgram(programs.cell);
  2987.  
  2988. 					gl.uniform1f(uniforms.cell.u_alpha, alpha * settings.cellOpacity);
  2989.  
  2990. 					if (jellyPhysics && cell.r > 20 && !cell.jagged) {
  2991. 						gl.uniform2f(uniforms.cell.u_pos, cell.jelly.x, cell.jelly.y);
  2992. 						gl.uniform1f(uniforms.cell.u_inner_radius, settings.jellySkinLag ? cell.jelly.r : cell.r);
  2993. 						gl.uniform1f(uniforms.cell.u_outer_radius, cell.jelly.r);
  2994. 					} else {
  2995. 						gl.uniform2f(uniforms.cell.u_pos, cell.x, cell.y);
  2996. 						gl.uniform1f(uniforms.cell.u_inner_radius, cell.r);
  2997. 						gl.uniform1f(uniforms.cell.u_outer_radius, cell.r);
  2998. 					}
  2999.  
  3000. 					if (jellyPhysics && settings.jellyWobble) {
  3001. 						gl.uniform1i(uniforms.cell.u_wobble_enabled, 1);
  3002. 						gl.uniform1fv(uniforms.cell.u_wobble, cell.jelly.wobble);
  3003. 					} else {
  3004. 						gl.uniform1i(uniforms.cell.u_wobble_enabled, 0);
  3005. 					}
  3006.  
  3007. 					if (cell.jagged) {
  3008. 						const virusTexture = textureFromCache(virusSrc);
  3009. 						if (!virusTexture)
  3010. 							return;
  3011.  
  3012. 						gl.uniform4f(uniforms.cell.u_color, 0, 0, 0, 0);
  3013. 						gl.uniform4f(uniforms.cell.u_outline_color, 0, 0, 0, 0);
  3014. 						gl.uniform1i(uniforms.cell.u_outline_thick, 0);
  3015. 						gl.uniform1i(uniforms.cell.u_texture_enabled, 1);
  3016. 						gl.bindTexture(gl.TEXTURE_2D, virusTexture);
  3017.  
  3018. 						gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  3019. 						return;
  3020. 					}
  3021.  
  3022. 					if (cell.r <= 20) {
  3023. 						gl.uniform1i(uniforms.cell.u_outline_thick, 0);
  3024. 						if (pelletColor) {
  3025. 							gl.uniform4f(uniforms.cell.u_color, ...pelletColor, 1);
  3026. 						} else {
  3027. 							gl.uniform4f(uniforms.cell.u_color, ...cell.rgb, 1);
  3028. 						}
  3029. 					} else {
  3030. 						if (cellColor)
  3031. 							gl.uniform4f(uniforms.cell.u_color, ...cellColor, 1);
  3032. 						else
  3033. 							gl.uniform4f(uniforms.cell.u_color, ...cell.rgb, 1);
  3034. 					}
  3035.  
  3036. 					gl.uniform1i(uniforms.cell.u_texture_enabled, 0);
  3037. 					if (cell.r <= 20) {
  3038. 						gl.uniform4f(uniforms.cell.u_outline_color, 0, 0, 0, 0);
  3039. 					} else {
  3040. 						const myIndex = world.mine.indexOf(cell.id);
  3041. 						if (myIndex !== -1 && !canSplit[myIndex] && settings.unsplittableOpacity > 0) {
  3042. 							gl.uniform1i(uniforms.cell.u_outline_thick, 1);
  3043. 							if (darkTheme)
  3044. 								gl.uniform4f(uniforms.cell.u_outline_color, 1, 1, 1, settings.unsplittableOpacity);
  3045. 							else
  3046. 								gl.uniform4f(uniforms.cell.u_outline_color, 0, 0, 0, settings.unsplittableOpacity);
  3047. 						} else if (settings.cellOutlines) {
  3048. 							gl.uniform1i(uniforms.cell.u_outline_thick, 0);
  3049. 							if (outlineColor) {
  3050. 								gl.uniform4f(uniforms.cell.u_outline_color, ...outlineColor, 1);
  3051. 							} else {
  3052. 								gl.uniform4f(uniforms.cell.u_outline_color,
  3053. 									cell.rgb[0] * 0.9, cell.rgb[1] * 0.9, cell.rgb[2] * 0.9, 1);
  3054. 							}
  3055. 						} else {
  3056. 							gl.uniform4f(uniforms.cell.u_outline_color, 0, 0, 0, 0);
  3057. 						}
  3058.  
  3059. 						let skin = '';
  3060. 						if (settings.selfSkin && (world.mine.includes(cell.id) || world.mineDead.has(cell.id))) {
  3061. 							skin = settings.selfSkin;
  3062. 						} else {
  3063. 							for (const [_, data] of sync.others) {
  3064. 								if (data.owned.has(cell.id)) {
  3065. 									skin = data.skin;
  3066. 									break;
  3067. 								}
  3068. 							}
  3069.  
  3070. 							if (!skin && showSkins && cell.skin) {
  3071. 								if (skinReplacement && cell.skin.includes(skinReplacement.original + '.png'))
  3072. 									skin = skinReplacement.replaceImg;
  3073. 								else
  3074. 									skin = cell.skin;
  3075. 							}
  3076. 						}
  3077.  
  3078. 						if (skin) {
  3079. 							const texture = textureFromCache(skin);
  3080. 							if (texture) {
  3081. 								gl.uniform1i(uniforms.cell.u_texture_enabled, 1);
  3082. 								gl.bindTexture(gl.TEXTURE_2D, texture);
  3083. 							}
  3084. 						}
  3085. 					}
  3086.  
  3087. 					gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  3088. 				}
  3089.  
  3090. 				/**
  3091. 				 * @param {Cell} cell
  3092. 				 * @param {number} alpha
  3093. 				 */
  3094. 				function drawText(cell, alpha) {
  3095. 					const showThisName = showNames && cell.r > 75 && cell.name;
  3096. 					const showThisMass = showMass && cell.r > 75;
  3097. 					if (!showThisName && !showThisMass) return;
  3098.  
  3099. 					gl.useProgram(programs.text);
  3100.  
  3101. 					gl.uniform1f(uniforms.text.u_alpha, alpha);
  3102. 					if (jellyPhysics)
  3103. 						gl.uniform2f(uniforms.text.u_pos, cell.jelly.x, cell.jelly.y);
  3104. 					else
  3105. 						gl.uniform2f(uniforms.text.u_pos, cell.x, cell.y);
  3106. 					gl.uniform1f(uniforms.text.u_radius, cell.r);
  3107.  
  3108. 					let useSilhouette = false;
  3109. 					if (cell.sub) {
  3110. 						gl.uniform3f(uniforms.text.u_color1, 0xeb / 255, 0x95 / 255, 0x00 / 255); // #eb9500
  3111. 						gl.uniform3f(uniforms.text.u_color2, 0xe4 / 255, 0xb1 / 255, 0x10 / 255); // #e4b110
  3112. 						useSilhouette = true;
  3113. 					} else {
  3114. 						gl.uniform3f(uniforms.text.u_color1, 1, 1, 1);
  3115. 						gl.uniform3f(uniforms.text.u_color2, 1, 1, 1);
  3116. 					}
  3117.  
  3118. 					if (cell.name === nick) {
  3119. 						if (nameColor1) {
  3120. 							gl.uniform3f(uniforms.text.u_color1, ...nameColor1);
  3121. 							useSilhouette = true;
  3122. 						}
  3123.  
  3124. 						if (nameColor2) {
  3125. 							gl.uniform3f(uniforms.text.u_color2, ...nameColor2);
  3126. 							useSilhouette = true;
  3127. 						}
  3128. 					}
  3129.  
  3130. 					if (showThisName) {
  3131. 						const { aspectRatio, text, silhouette } = textFromCache(cell.name, useSilhouette);
  3132. 						gl.uniform1f(uniforms.text.u_text_aspect_ratio, aspectRatio);
  3133. 						gl.uniform1i(uniforms.text.u_silhouette_enabled, silhouette ? 1 : 0);
  3134. 						gl.uniform1i(uniforms.text.u_subtext_enabled, 0);
  3135.  
  3136. 						gl.bindTexture(gl.TEXTURE_2D, text);
  3137. 						if (silhouette) {
  3138. 							gl.activeTexture(gl.TEXTURE1);
  3139. 							gl.bindTexture(gl.TEXTURE_2D, silhouette);
  3140. 							gl.activeTexture(gl.TEXTURE0);
  3141. 						}
  3142.  
  3143. 						gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  3144. 					}
  3145.  
  3146. 					if (showThisMass) {
  3147. 						gl.uniform1f(uniforms.text.u_alpha, alpha * settings.massOpacity);
  3148. 						gl.uniform1i(uniforms.text.u_silhouette_enabled, 0);
  3149. 						gl.uniform1i(uniforms.text.u_subtext_enabled, 1);
  3150.  
  3151. 						if (showThisName) {
  3152. 							gl.uniform1i(uniforms.text.u_subtext_centered, 0);
  3153. 						} else {
  3154. 							gl.uniform1i(uniforms.text.u_subtext_centered, 1);
  3155. 						}
  3156.  
  3157. 						// draw each digit separately, as Ubuntu makes them all the same width.
  3158. 						// significantly reduces the size of the text cache
  3159. 						const mass = Math.floor(cell.nr * cell.nr / 100).toString();
  3160. 						for (let i = 0; i < mass.length; ++i) {
  3161. 							const { aspectRatio, texture } = massTextFromCache(mass[i]);
  3162. 							gl.uniform1f(uniforms.text.u_text_aspect_ratio, aspectRatio);
  3163. 							gl.uniform1f(uniforms.text.u_subtext_offset, (i - (mass.length - 1) / 2) * 0.75);
  3164.  
  3165. 							gl.bindTexture(gl.TEXTURE_2D, texture);
  3166. 							gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  3167. 						}
  3168. 					}
  3169. 				}
  3170.  
  3171. 				/** @type {Cell[]} */
  3172. 				const sorted = [];
  3173. 				world.cells.forEach(cell => {
  3174. 					if (cell.r > 20) {
  3175. 						// cell is probably important, order should be sorted
  3176. 						sorted.push(cell);
  3177. 						return;
  3178. 					}
  3179.  
  3180. 					if (cell.r <= 20 && hidePellets) return;
  3181. 					const alpha = calcAlpha(cell);
  3182. 					drawCell(cell, alpha);
  3183. 				});
  3184.  
  3185. 				sorted.sort((a, b) => a.r - b.r);
  3186.  
  3187. 				sorted.forEach(cell => {
  3188. 					const alpha = calcAlpha(cell);
  3189. 					drawCell(cell, alpha);
  3190. 					if (!cell.jagged)
  3191. 						drawText(cell, alpha);
  3192. 				});
  3193. 			})();
  3194.  
  3195. 			(function updateStats() {
  3196. 				ui.stats.matchTheme(); // not sure how to listen to when the checkbox changes when the game loads
  3197. 				if (showNames && world.leaderboard.length > 0)
  3198. 					ui.leaderboard.container.style.display = '';
  3199. 				else
  3200. 					ui.leaderboard.container.style.display = 'none';
  3201.  
  3202. 				let score = 0;
  3203. 				world.mine.forEach(id => {
  3204. 					const cell = world.cells.get(id);
  3205. 					if (!cell || cell.dead) return;
  3206.  
  3207. 					score += cell.nr * cell.nr / 100;
  3208. 				});
  3209.  
  3210. 				if (typeof aux.userData?.boost === 'number' && aux.userData.boost > Date.now())
  3211. 					score *= 2;
  3212.  
  3213. 				if (score > 0)
  3214. 					ui.stats.score.textContent = 'Score: ' + Math.floor(score);
  3215. 				else
  3216. 					ui.stats.score.textContent = '';
  3217.  
  3218. 				let measures = `${Math.floor(fps)} FPS`;
  3219. 				if (net.latency !== undefined) {
  3220. 					if (net.latency === -1)
  3221. 						measures += ' ????ms ping';
  3222. 					else
  3223. 						measures += ` ${Math.floor(net.latency)}ms ping`;
  3224. 				}
  3225.  
  3226. 				ui.stats.measures.textContent = measures;
  3227.  
  3228. 				if (score > world.stats.highestScore) {
  3229. 					world.stats.highestScore = score;
  3230. 				}
  3231. 			})();
  3232.  
  3233. 			(function minimap() {
  3234. 				if (!showMinimap) {
  3235. 					ui.minimap.canvas.style.display = 'none';
  3236. 					return;
  3237. 				} else {
  3238. 					ui.minimap.canvas.style.display = '';
  3239. 				}
  3240.  
  3241. 				const { border } = world;
  3242. 				if (!border) return;
  3243.  
  3244. 				// text needs to be small and sharp, i don't trust webgl with that, so we use a 2d context
  3245. 				const { canvas, ctx } = ui.minimap;
  3246. 				canvas.width = canvas.height = 200 * devicePixelRatio;
  3247.  
  3248. 				// sigmod overlay resizes itself differently, so we correct it whenever we need to
  3249. 				/** @type {HTMLCanvasElement | null} */
  3250. 				const sigmodMinimap = document.querySelector('canvas.minimap');
  3251. 				if (sigmodMinimap) {
  3252. 					// we need to check before updating the canvas, otherwise we will clear it
  3253. 					if (sigmodMinimap.style.width !== '200px' || sigmodMinimap.style.height !== '200px')
  3254. 						sigmodMinimap.style.width = sigmodMinimap.style.height = '200px';
  3255.  
  3256. 					if (sigmodMinimap.width !== canvas.width || sigmodMinimap.height !== canvas.height)
  3257. 						sigmodMinimap.width = sigmodMinimap.height = 200 * devicePixelRatio;
  3258. 				}
  3259.  
  3260. 				ctx.clearRect(0, 0, canvas.width, canvas.height);
  3261.  
  3262. 				const gameWidth = (border.r - border.l);
  3263. 				const gameHeight = (border.b - border.t);
  3264.  
  3265. 				// highlight current section
  3266. 				ctx.fillStyle = '#ff0';
  3267. 				ctx.globalAlpha = 0.3;
  3268.  
  3269. 				const sectionX = Math.floor((world.camera.x - border.l) / gameWidth * 5);
  3270. 				const sectionY = Math.floor((world.camera.y - border.t) / gameHeight * 5);
  3271. 				const sectorSize = canvas.width / 5;
  3272. 				ctx.fillRect(sectionX * sectorSize, sectionY * sectorSize, sectorSize, sectorSize);
  3273.  
  3274. 				// draw section names
  3275. 				ctx.font = `${Math.floor(sectorSize / 3)}px Ubuntu`;
  3276. 				ctx.fillStyle = darkTheme ? '#fff' : '#000';
  3277. 				ctx.globalAlpha = 0.3;
  3278. 				ctx.textAlign = 'center';
  3279. 				ctx.textBaseline = 'middle';
  3280.  
  3281. 				const cols = ['1', '2', '3', '4', '5'];
  3282. 				const rows = ['A', 'B', 'C', 'D', 'E'];
  3283. 				cols.forEach((col, y) => {
  3284. 					rows.forEach((row, x) => {
  3285. 						ctx.fillText(row + col, (x + 0.5) * sectorSize, (y + 0.5) * sectorSize);
  3286. 					});
  3287. 				});
  3288.  
  3289. 				ctx.globalAlpha = 1;
  3290.  
  3291.  
  3292.  
  3293. 				// draw cells
  3294. 				/** @param {Cell} cell */
  3295. 				const drawCell = function drawCell(cell) {
  3296. 					const x = (cell.x - border.l) / gameWidth * canvas.width;
  3297. 					const y = (cell.y - border.t) / gameHeight * canvas.height;
  3298. 					const r = Math.max(cell.r / gameWidth * canvas.width, 2);
  3299.  
  3300. 					ctx.fillStyle = aux.rgb2hex(cell.rgb);
  3301. 					ctx.beginPath();
  3302. 					ctx.moveTo(x + r, y);
  3303. 					ctx.arc(x, y, r, 0, 2 * Math.PI);
  3304. 					ctx.fill();
  3305. 				};
  3306.  
  3307. 				/**
  3308. 				 * @param {number} x
  3309. 				 * @param {number} y
  3310. 				 * @param {string} name
  3311. 				 */
  3312. 				const drawName = function drawName(x, y, name) {
  3313. 					x = (x - border.l) / gameWidth * canvas.width;
  3314. 					y = (y - border.t) / gameHeight * canvas.height;
  3315.  
  3316. 					ctx.fillStyle = '#fff';
  3317. 					// add a space to prevent sigmod from detecting names
  3318. 					ctx.fillText(name + ' ', x, y - 7 * devicePixelRatio - sectorSize / 6);
  3319. 				};
  3320.  
  3321. 				// draw clanmates first, below yourself
  3322. 				// we sort clanmates by color AND name, to ensure clanmates stay separate
  3323. 				/** @type {Map<string, { name: string, n: number, x: number, y: number }>} */
  3324. 				const avgPos = new Map();
  3325. 				world.clanmates.forEach(cell => {
  3326. 					if (world.mine.includes(cell.id)) return;
  3327. 					drawCell(cell);
  3328.  
  3329. 					const id = cell.name + cell.rgb[0] + cell.rgb[1] + cell.rgb[2];
  3330. 					const entry = avgPos.get(id);
  3331. 					if (entry) {
  3332. 						++entry.n;
  3333. 						entry.x += cell.x;
  3334. 						entry.y += cell.y;
  3335. 					} else {
  3336. 						avgPos.set(id, { name: cell.name, n: 1, x: cell.x, y: cell.y });
  3337. 					}
  3338. 				});
  3339.  
  3340. 				avgPos.forEach(entry => {
  3341. 					drawName(entry.x / entry.n, entry.y / entry.n, entry.name);
  3342. 				});
  3343.  
  3344. 				// draw my cells above everyone else
  3345. 				let myName = '';
  3346. 				let ownN = 0;
  3347. 				let ownX = 0;
  3348. 				let ownY = 0;
  3349. 				world.mine.forEach(id => {
  3350. 					const cell = world.cells.get(id);
  3351. 					if (!cell) return;
  3352.  
  3353. 					drawCell(cell);
  3354. 					myName = cell.name;
  3355. 					++ownN;
  3356. 					ownX += cell.x;
  3357. 					ownY += cell.y;
  3358. 				});
  3359.  
  3360. 				if (ownN <= 0) {
  3361. 					// if no cells were drawn, draw our spectate pos instead
  3362. 					const x = (world.camera.x - border.l) / gameWidth * canvas.width;
  3363. 					const y = (world.camera.y - border.t) / gameHeight * canvas.height;
  3364.  
  3365. 					ctx.fillStyle = '#faa';
  3366. 					ctx.beginPath();
  3367. 					ctx.moveTo(x + 5, y);
  3368. 					ctx.arc(x, y, 5 * devicePixelRatio, 0, 2 * Math.PI);
  3369. 					ctx.fill();
  3370. 				} else {
  3371. 					ownX /= ownN;
  3372. 					ownY /= ownN;
  3373. 					// draw name above player's cells
  3374. 					drawName(ownX, ownY, myName);
  3375.  
  3376. 					// send a hint to sigmod
  3377. 					ctx.globalAlpha = 0;
  3378. 					ctx.fillText(`X: ${ownX}, Y: ${ownY}`, 0, -1000);
  3379. 				}
  3380. 			})();
  3381.  
  3382. 			ui.chat.matchTheme();
  3383.  
  3384. 			requestAnimationFrame(renderGame);
  3385. 		}
  3386.  
  3387. 		renderGame();
  3388. 		return render;
  3389. 	})();
  3390.  
  3391.  
  3392.  
  3393. 	// @ts-expect-error for debugging purposes. dm me on discord @8y8x to work out stability if you need something
  3394. 	window.sigfix = { destructor, aux, ui, settings, sync, world, net, render };
  3395. })();