☰

Sigmally Fixes V2

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

目前为 2024-04-20 提交的版本。查看 最新版本。

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