☰

Sigmally Fixes V2

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

  1. // ==UserScript==
  2. // @name         Sigmally Fixes V2
  3. // @version      2.7.8
  4. // @description  Easily 10X your FPS on Sigmally.com + many bug fixes + great for multiboxing + supports SigMod
  5. // @author       8y8x
  6. // @match        https://*.sigmally.com/*
  7. // @license      MIT
  8. // @grant        none
  9. // @namespace    https://8y8x.dev/sigmally-fixes
  10. // @icon         https://raw.githubusercontent.com/8y8x/sigmally-fixes/refs/heads/main/icon.png
  11. // @compatible   chrome
  12. // @compatible   opera
  13. // @compatible   edge
  14. // ==/UserScript==
  15.  
  16. // @ts-check
  17. /* eslint
  18. 	camelcase: 'error',
  19. 	comma-dangle: ['error', 'always-multiline'],
  20. 	indent: ['error', 'tab', { SwitchCase: 1 }],
  21. 	max-len: ['error', { code: 120 }],
  22. 	no-console: ['error', { allow: ['warn', 'error'] }],
  23. 	no-trailing-spaces: 'error',
  24. 	quotes: ['error', 'single'],
  25. 	semi: 'error',
  26. */ // a light eslint configuration that doesn't compromise code quality
  27. 'use strict';
  28.  
  29. (async () => {
  30. 	const sfVersion = '2.7.8';
  31. 	const { Infinity, undefined } = window; // yes, this actually makes a significant difference
  32.  
  33. 	////////////////////////////////
  34. 	// Define Auxiliary Functions //
  35. 	////////////////////////////////
  36. 	const aux = (() => {
  37. 		const aux = {};
  38.  
  39. 		/** @type {Map<string, string>} */
  40. 		aux.clans = new Map();
  41. 		function fetchClans() {
  42. 			fetch('https://sigmally.com/api/clans').then(r => r.json()).then(r => {
  43. 				if (r.status !== 'success') {
  44. 					setTimeout(() => fetchClans(), 10_000);
  45. 					return;
  46. 				}
  47.  
  48. 				aux.clans.clear();
  49. 				r.data.forEach(clan => {
  50. 					if (typeof clan._id !== 'string' || typeof clan.name !== 'string') return;
  51. 					aux.clans.set(clan._id, clan.name);
  52. 				});
  53.  
  54. 				// does not need to be updated often, but just enough so people who leave their tab open don't miss out
  55. 				setTimeout(() => fetchClans(), 600_000);
  56. 			}).catch(err => {
  57. 				console.warn('Error while fetching clans:', err);
  58. 				setTimeout(() => fetchClans(), 10_000);
  59. 			});
  60. 		}
  61. 		fetchClans();
  62.  
  63. 		/**
  64. 		 * @template T
  65. 		 * @param {T} x
  66. 		 * @param {string} err should be readable and easily translatable
  67. 		 * @returns {T extends (null | undefined | false | 0) ? never : T}
  68. 		 */
  69. 		aux.require = (x, err) => {
  70. 			if (!x) {
  71. 				err = '[Sigmally Fixes]: ' + err;
  72. 				prompt(err, err); // use prompt, so people can paste the error message into google translate
  73. 				throw err;
  74. 			}
  75.  
  76. 			return /** @type {any} */ (x);
  77. 		};
  78.  
  79. 		const dominantColorCtx = aux.require(
  80. 			document.createElement('canvas').getContext('2d', { willReadFrequently: true }),
  81. 			'Unable to get 2D context for aux utilities. This is probably your browser being dumb, maybe reload ' +
  82. 			'the page?',
  83. 		);
  84. 		/**
  85. 		 * @param {HTMLImageElement} img
  86. 		 * @returns {[number, number, number, number]}
  87. 		 */
  88. 		aux.dominantColor = img => {
  89. 			dominantColorCtx.canvas.width = dominantColorCtx.canvas.height = 7;
  90. 			dominantColorCtx.drawImage(img, 0, 0, 7, 7);
  91. 			const data = dominantColorCtx.getImageData(0, 0, 7, 7);
  92.  
  93. 			const r = [], g = [], b = [];
  94. 			let sumA = 0, numA = 0;
  95. 			for (let x = 0; x < 7; ++x) {
  96. 				for (let y = 0; y < 7; ++y) {
  97. 					const d = Math.hypot((3 - x) / 6, (3 - y) / 6);
  98. 					if (d > 1) continue; // do not consider pixels outside a circle, as they may be blank
  99. 					const pixel = y * 7 + x;
  100. 					r.push(data.data[pixel * 4]);
  101. 					g.push(data.data[pixel * 4 + 1]);
  102. 					b.push(data.data[pixel * 4 + 2]);
  103. 					sumA += data.data[pixel * 4 + 3];
  104. 					++numA;
  105. 				}
  106. 			}
  107.  
  108. 			r.sort();
  109. 			g.sort();
  110. 			b.sort();
  111. 			/** @type {[number, number, number, number]} */
  112. 			const color = [
  113. 				r[Math.ceil(r.length / 2)] / 255, g[Math.ceil(g.length / 2)] / 255,
  114. 				b[Math.ceil(b.length / 2)] / 255, sumA / numA / 255];
  115.  
  116. 			const max = Math.max(Math.max(color[0], color[1]), color[2]);
  117. 			if (max === 0) {
  118. 				color[0] = color[1] = color[2] = 1;
  119. 			} else {
  120. 				color[0] *= 1 / max;
  121. 				color[1] *= 1 / max;
  122. 				color[2] *= 1 / max;
  123. 			}
  124.  
  125. 			color[3] **= 4; // transparent skins should use the player color
  126.  
  127. 			return color;
  128. 		};
  129.  
  130. 		/**
  131. 		 * consistent exponential easing relative to 60fps. this models "x += (targetX - x) * dt" scenarios.
  132. 		 * for example, with a factor of 2, o=0, n=1:
  133. 		 * - at 60fps, 0.5 is returned.
  134. 		 * - at 30fps (after 2 frames), 0.75 is returned.
  135. 		 * - at 15fps (after 4 frames), 0.875 is returned.
  136. 		 * - at 120fps, 0.292893 is returned. if you called this again with o=0.292893, n=1, you would get 0.5.
  137. 		 *
  138. 		 * @param {number} o
  139. 		 * @param {number} n
  140. 		 * @param {number} factor
  141. 		 * @param {number} dt in seconds
  142. 		 */
  143. 		aux.exponentialEase = (o, n, factor, dt) => {
  144. 			return o + (n - o) * (1 - (1 - 1 / factor) ** (60 * dt));
  145. 		};
  146.  
  147. 		/** @param {KeyboardEvent | MouseEvent} e */
  148. 		aux.keybind = e => {
  149. 			if (!e.isTrusted) return undefined; // custom key events are usually missing properties
  150.  
  151. 			if (e instanceof KeyboardEvent) {
  152. 				let keybind = e.key;
  153. 				keybind = keybind[0].toUpperCase() + keybind.slice(1); // capitalize first letter (e.g. Shift, R, /, ...)
  154. 				if (keybind === '+') keybind = '='; // ensure + can be used to split up keybinds
  155. 				if (e.ctrlKey) keybind = 'Ctrl+' + keybind;
  156. 				if (e.altKey) keybind = 'Alt+' + keybind;
  157. 				if (e.metaKey) keybind = 'Cmd+' + keybind;
  158. 				if (e.shiftKey) keybind = 'Shift' + keybind;
  159. 				return keybind;
  160. 			} else {
  161. 				return `Mouse${e.button}`;
  162. 			}
  163. 		};
  164.  
  165. 		/**
  166. 		 * @param {string} hex
  167. 		 * @returns {[number, number, number, number]}
  168. 		 */
  169. 		aux.hex2rgba = hex => {
  170. 			switch (hex.length) {
  171. 				case 4: // #rgb
  172. 				case 5: // #rgba
  173. 					return [
  174. 						(parseInt(hex[1], 16) || 0) / 15,
  175. 						(parseInt(hex[2], 16) || 0) / 15,
  176. 						(parseInt(hex[3], 16) || 0) / 15,
  177. 						hex.length === 5 ? (parseInt(hex[4], 16) || 0) / 15 : 1,
  178. 					];
  179. 				case 7: // #rrggbb
  180. 				case 9: // #rrggbbaa
  181. 					return [
  182. 						(parseInt(hex.slice(1, 3), 16) || 0) / 255,
  183. 						(parseInt(hex.slice(3, 5), 16) || 0) / 255,
  184. 						(parseInt(hex.slice(5, 7), 16) || 0) / 255,
  185. 						hex.length === 9 ? (parseInt(hex.slice(7, 9), 16) || 0) / 255 : 1,
  186. 					];
  187. 				default:
  188. 					return [1, 1, 1, 1];
  189. 			}
  190. 		};
  191.  
  192. 		/**
  193. 		 * @param {number} r
  194. 		 * @param {number} g
  195. 		 * @param {number} b
  196. 		 * @param {number} a
  197. 		 */
  198. 		aux.rgba2hex = (r, g, b, a) => {
  199. 			return [
  200. 				'#',
  201. 				Math.floor(r * 255).toString(16).padStart(2, '0'),
  202. 				Math.floor(g * 255).toString(16).padStart(2, '0'),
  203. 				Math.floor(b * 255).toString(16).padStart(2, '0'),
  204. 				Math.floor(a * 255).toString(16).padStart(2, '0'),
  205. 			].join('');
  206. 		};
  207.  
  208. 		// i don't feel like making an awkward adjustment to aux.rgba2hex
  209. 		/**
  210. 		 * @param {number} r
  211. 		 * @param {number} g
  212. 		 * @param {number} b
  213. 		 * @param {any} _a
  214. 		 */
  215. 		aux.rgba2hex6 = (r, g, b, _a) => {
  216. 			return [
  217. 				'#',
  218. 				Math.floor(r * 255).toString(16).padStart(2, '0'),
  219. 				Math.floor(g * 255).toString(16).padStart(2, '0'),
  220. 				Math.floor(b * 255).toString(16).padStart(2, '0'),
  221. 			].join('');
  222. 		};
  223.  
  224. 		/** @param {string} name */
  225. 		aux.parseName = name => name.match(/^\{.*?\}(.*)$/)?.[1] ?? name;
  226.  
  227. 		/** @param {string} skin */
  228. 		aux.parseSkin = skin => {
  229. 			if (!skin) return skin;
  230. 			skin = skin.replace('1%', '').replace('2%', '').replace('3%', '');
  231. 			return '/static/skins/' + skin + '.png';
  232. 		};
  233.  
  234. 		/**
  235. 		 * @param {DataView} dat
  236. 		 * @param {number} o
  237. 		 * @returns {[string, number]}
  238. 		 */
  239. 		aux.readZTString = (dat, o) => {
  240. 			if (dat.getUint8(o) === 0) return ['', o + 1]; // quick return for empty strings (there are a lot)
  241. 			const startOff = o;
  242. 			for (; o < dat.byteLength; ++o) {
  243. 				if (dat.getUint8(o) === 0) break;
  244. 			}
  245.  
  246. 			return [aux.textDecoder.decode(new DataView(dat.buffer, startOff, o - startOff)), o + 1];
  247. 		};
  248.  
  249. 		/**
  250. 		 * @param {string} selector
  251. 		 * @param {boolean} value
  252. 		 */
  253. 		aux.setting = (selector, value) => {
  254. 			/** @type {HTMLInputElement | null} */
  255. 			const el = document.querySelector(selector);
  256. 			return el ? el.checked : value;
  257. 		};
  258.  
  259. 		/** @param {boolean} accessSigmod */
  260. 		const settings = accessSigmod => {
  261. 			try {
  262. 				// current skin is saved in localStorage
  263. 				aux.settings = JSON.parse(localStorage.getItem('settings') ?? '');
  264. 			} catch (_) {
  265. 				aux.settings = /** @type {any} */ ({});
  266. 			}
  267.  
  268. 			// sigmod doesn't have a checkbox for dark theme, so we infer it from the custom map color
  269. 			const { mapColor } = accessSigmod ? sigmod.settings : {};
  270. 			if (mapColor) {
  271. 				aux.settings.darkTheme
  272. 					= mapColor ? (mapColor[0] < 0.6 && mapColor[1] < 0.6 && mapColor[2] < 0.6) : true;
  273. 			} else {
  274. 				aux.settings.darkTheme = aux.setting('input#darkTheme', true);
  275. 			}
  276. 			aux.settings.jellyPhysics = aux.setting('input#jellyPhysics', false);
  277. 			aux.settings.showBorder = aux.setting('input#showBorder', true);
  278. 			aux.settings.showClanmates = aux.setting('input#showClanmates', true);
  279. 			aux.settings.showGrid = aux.setting('input#showGrid', true);
  280. 			aux.settings.showMass = aux.setting('input#showMass', false);
  281. 			aux.settings.showMinimap = aux.setting('input#showMinimap', true);
  282. 			aux.settings.showSkins = aux.setting('input#showSkins', true);
  283. 			aux.settings.zoomout = aux.setting('input#moreZoom', true);
  284. 			return aux.settings;
  285. 		};
  286.  
  287. 		/** @type {{ darkTheme: boolean, jellyPhysics: boolean, showBorder: boolean, showClanmates: boolean,
  288. 		 showGrid: boolean, showMass: boolean, showMinimap: boolean, showSkins: boolean, zoomout: boolean,
  289. 		 gamemode: any, skin: any }} */
  290. 		aux.settings = settings(false);
  291. 		setInterval(() => settings(true), 250);
  292. 		// apply saved gamemode because sigmally fixes connects before the main game even loads
  293. 		if (aux.settings?.gamemode) {
  294. 			/** @type {HTMLSelectElement | null} */
  295. 			const gamemode = document.querySelector('select#gamemode');
  296. 			if (gamemode)
  297. 				gamemode.value = aux.settings.gamemode;
  298. 		}
  299.  
  300. 		let caught = false;
  301. 		const tabScan = new BroadcastChannel('sigfix-tabscan');
  302. 		tabScan.addEventListener('message', () => {
  303. 			if (caught || world.score(world.selected) <= 50) return;
  304. 			caught = true;
  305. 			const str = 'hi! sigmally fixes v2.5.0 is now truly one-tab, so you don\'t need multiple tabs anymore. ' +
  306. 				'set a keybind under the "One-tab multibox key" setting and enjoy!';
  307. 			prompt(str, str);
  308. 		});
  309. 		setInterval(() => {
  310. 			if (world.score(world.selected) > 50 && !caught) tabScan.postMessage(undefined);
  311. 		}, 5000);
  312.  
  313. 		aux.textEncoder = new TextEncoder();
  314. 		aux.textDecoder = new TextDecoder();
  315.  
  316. 		const trimCtx = aux.require(
  317. 			document.createElement('canvas').getContext('2d'),
  318. 			'Unable to get 2D context for text utilities. This is probably your browser being dumb, maybe reload ' +
  319. 			'the page?',
  320. 		);
  321. 		trimCtx.font = '20px Ubuntu';
  322. 		/**
  323. 		 * trims text to a max of 250px at 20px font, same as vanilla sigmally
  324. 		 * @param {string} text
  325. 		 */
  326. 		aux.trim = text => {
  327. 			while (trimCtx.measureText(text).width > 250)
  328. 				text = text.slice(0, -1);
  329.  
  330. 			return text;
  331. 		};
  332.  
  333. 		// @ts-expect-error
  334. 		let handler = window.signOut;
  335. 		Object.defineProperty(window, 'signOut', {
  336. 			get: () => () => {
  337. 				aux.userData = undefined;
  338. 				return handler?.();
  339. 			},
  340. 			set: x => handler = x,
  341. 		});
  342.  
  343. 		/** @type {object | undefined} */
  344. 		aux.userData = undefined;
  345. 		aux.oldFetch = /** @type {typeof fetch} */ (fetch.bind(window));
  346. 		let lastUserData = -Infinity;
  347. 		// this is the best method i've found to get the userData object, since game.js uses strict mode
  348. 		Object.defineProperty(window, 'fetch', {
  349. 			value: new Proxy(fetch, {
  350. 				apply: (target, thisArg, args) => {
  351. 					let url = args[0];
  352. 					const data = args[1];
  353. 					if (typeof url === 'string') {
  354. 						if (url.includes('/server/recaptcha/v3'))
  355. 							return new Promise(() => {}); // block game.js from attempting to go through captcha flow
  356.  
  357. 						// game.js doesn't think we're connected to a server, we default to eu0 because that's the
  358. 						// default everywhere else
  359. 						if (url.includes('/userdata/')) {
  360. 							// when holding down the respawn key, you can easily make 30+ requests a second,
  361. 							// bombing you into ratelimit hell
  362. 							const now = performance.now();
  363. 							if (now - lastUserData < 500) return new Promise(() => {});
  364. 							url = url.replace('///', '//eu0.sigmally.com/server/');
  365. 							lastUserData = now;
  366. 						}
  367.  
  368. 						if (url.includes('/server/auth')) {
  369. 							// sigmod must be properly initialized (client can't be null), otherwise it will error
  370. 							// and game.js will never get the account data
  371. 							sigmod.patch();
  372. 						}
  373.  
  374. 						// patch the current token in the url and body of the request
  375. 						if (aux.userData?.token) {
  376. 							// 128 hex characters surrounded by non-hex characters (lookahead and lookbehind)
  377. 							const tokenTest = /(?<![0-9a-fA-F])[0-9a-fA-F]{128}(?![0-9a-fA-F])/g;
  378. 							url = url.replaceAll(tokenTest, aux.userData.token);
  379. 							if (typeof data?.body === 'string')
  380. 								data.body = data.body.replaceAll(tokenTest, aux.userData.token);
  381. 						}
  382.  
  383. 						args[0] = url;
  384. 						args[1] = data;
  385. 					}
  386.  
  387. 					return target.apply(thisArg, args).then(res => new Proxy(res, {
  388. 						get: (target, prop, _receiver) => {
  389. 							if (prop !== 'json') {
  390. 								const val = target[prop];
  391. 								if (typeof val === 'function')
  392. 									return val.bind(target);
  393. 								else
  394. 									return val;
  395. 							}
  396.  
  397. 							return () => target.json().then(obj => {
  398. 								if (obj?.body?.user) {
  399. 									aux.userData = obj.body.user;
  400. 									// NaN if invalid / undefined
  401. 									let updated = Number(new Date(aux.userData.updateTime));
  402. 									if (Number.isNaN(updated))
  403. 										updated = Date.now();
  404. 								}
  405.  
  406. 								return obj;
  407. 							});
  408. 						},
  409. 					}));
  410. 				},
  411. 			}),
  412. 		});
  413.  
  414. 		// get the latest game.js version whenever possible
  415. 		// some players are stuck on an older game.js version which does not allow signing in
  416. 		fetch('https://one.sigmally.com/assets/js/game.js', { cache: 'reload' });
  417. 		// clicking "continue" immediately makes a request for user data, so we can get it even if sigfixes runs late
  418. 		/** @type {HTMLButtonElement | null} */ (document.querySelector('#continue_button'))?.click();
  419.  
  420. 		return aux;
  421. 	})();
  422.  
  423.  
  424.  
  425. 	////////////////////////
  426. 	// Destroy Old Client //
  427. 	////////////////////////
  428. 	const destructor = (() => {
  429. 		const destructor = {};
  430.  
  431. 		const vanillaStack = () => {
  432. 			try {
  433. 				throw new Error();
  434. 			} catch (err) {
  435. 				// prevent drawing the game, but do NOT prevent saving settings (which is called on RQA)
  436. 				return err.stack.includes('/game.js') && !err.stack.includes('HTML');
  437. 			}
  438. 		};
  439.  
  440. 		// #1 : kill the rendering process
  441. 		const oldRQA = requestAnimationFrame;
  442. 		window.requestAnimationFrame = function(fn) {
  443. 			return vanillaStack() ? -1 : oldRQA(fn);
  444. 		};
  445.  
  446. 		// #2 : kill access to using a WebSocket
  447. 		destructor.realWebSocket = WebSocket;
  448. 		Object.defineProperty(window, 'WebSocket', {
  449. 			value: new Proxy(WebSocket, {
  450. 				construct(_target, argArray, _newTarget) {
  451. 					if (argArray[0].includes('sigmally.com') && vanillaStack()) {
  452. 						throw new Error('sigfix: Preventing new WebSocket() for unknown Sigmally connection');
  453. 					}
  454.  
  455. 					// @ts-expect-error
  456. 					return new destructor.realWebSocket(...argArray);
  457. 				},
  458. 			}),
  459. 		});
  460.  
  461. 		const cmdRepresentation = new TextEncoder().encode('/leaveworld').toString();
  462. 		destructor.realWsSend = WebSocket.prototype.send;
  463. 		WebSocket.prototype.send = function (x) {
  464. 			if (vanillaStack() && this.url.includes('sigmally.com')) {
  465. 				this.onclose = null;
  466. 				this.close();
  467. 				throw new Error('sigfix: Preventing .send on unknown Sigmally connection');
  468. 			}
  469.  
  470. 			return destructor.realWsSend.apply(this, arguments);
  471. 		};
  472.  
  473. 		// #3 : prevent keys from being registered by the game
  474. 		setInterval(() => onkeydown = onkeyup = null, 200);
  475.  
  476. 		return destructor;
  477. 	})();
  478.  
  479.  
  480.  
  481. 	//////////////////////////////////
  482. 	// Apply Complex SigMod Patches //
  483. 	//////////////////////////////////
  484. 	const sigmod = (() => {
  485. 		const sigmod = {};
  486.  
  487. 		/** @type {{
  488. 		 * 	cellColor?: [number, number, number, number],
  489. 		 * 	doubleKey?: string,
  490. 		 * 	fixedLineKey?: string,
  491. 		 * 	foodColor?: [number, number, number, number],
  492. 		 * 	font?: string,
  493. 		 * 	horizontalLineKey?: string,
  494. 		 * 	mapColor?: [number, number, number, number],
  495. 		 * 	nameColor1?: [number, number, number, number],
  496. 		 * 	nameColor2?: [number, number, number, number],
  497. 		 * 	outlineColor?: [number, number, number, number],
  498. 		 * 	quadKey?: string,
  499. 		 * 	rapidFeedKey?: string,
  500. 		 * 	removeOutlines?: boolean,
  501. 		 * 	respawnKey?: string,
  502. 		 * 	showNames?: boolean,
  503. 		 * 	tripleKey?: string,
  504. 		 * 	verticalLineKey?: string,
  505. 		 * 	virusImage?: string,
  506. 		 * }} */
  507. 		sigmod.settings = {};
  508. 		/** @type {Set<string>} */
  509. 		const loadedFonts = new Set();
  510. 		setInterval(() => {
  511. 			// @ts-expect-error
  512. 			const real = window.sigmod?.settings;
  513. 			if (!real) return;
  514. 			sigmod.exists = true;
  515.  
  516. 			/**
  517. 			 * @param {'cellColor' | 'foodColor' | 'mapColor' | 'outlineColor' | 'nameColor1' | 'nameColor2'} prop
  518. 			 * @param {any} initial
  519. 			 * @param {any[]} lookups
  520. 			 */
  521. 			const applyColor = (prop, initial, lookups) => {
  522. 				for (const lookup of lookups) {
  523. 					if (lookup && lookup !== initial) {
  524. 						sigmod.settings[prop] = aux.hex2rgba(lookup);
  525. 						return;
  526. 					}
  527. 				}
  528. 				sigmod.settings[prop] = undefined;
  529. 			};
  530. 			applyColor('cellColor', null, [real.game?.cellColor]);
  531. 			applyColor('foodColor', null, [real.game?.foodColor]);
  532. 			applyColor('mapColor', null, [real.game?.map?.color, real.mapColor]);
  533. 			// sigmod treats the map border as cell borders for some reason
  534. 			applyColor('outlineColor', '#0000ff', [real.game?.borderColor]);
  535. 			// note: singular nameColor takes priority
  536. 			applyColor('nameColor1', '#ffffff', [
  537. 				real.game?.name?.color,
  538. 				real.game?.name?.gradient?.enabled && real.game.name.gradient.left,
  539. 			]);
  540. 			applyColor('nameColor2', '#ffffff', [
  541. 				real.game?.name?.color,
  542. 				real.game?.name?.gradient?.enabled && real.game.name.gradient.right,
  543. 			]);
  544. 			sigmod.settings.removeOutlines = real.game?.removeOutlines;
  545. 			sigmod.settings.virusImage = real.game?.virusImage;
  546. 			sigmod.settings.rapidFeedKey = real.macros?.keys?.rapidFeed;
  547. 			// sigmod's showNames setting is always "true" interally (i think??)
  548. 			sigmod.settings.showNames = aux.setting('input#showNames', true);
  549.  
  550. 			sigmod.settings.font = real.game?.font;
  551.  
  552. 			// sigmod does not download the bold variants of fonts, so we have to do that ourselves
  553. 			if (sigmod.settings.font && !loadedFonts.has(sigmod.settings.font)) {
  554. 				loadedFonts.add(sigmod.settings.font);
  555. 				const link = document.createElement('link');
  556. 				link.href = `https://fonts.googleapis.com/css2?family=${sigmod.settings.font}:wght@700&display=swap`;
  557. 				link.rel = 'stylesheet';
  558. 				document.head.appendChild(link);
  559. 			}
  560. 		}, 200);
  561.  
  562. 		// patch sigmod when it's ready; typically sigmod loads first, but i can't guarantee that
  563. 		sigmod.exists = false;
  564. 		/** @type {((dat: DataView) => void) | undefined} */
  565. 		sigmod.handleMessage = undefined;
  566. 		let patchInterval;
  567. 		sigmod.patch = () => {
  568. 			const real = /** @type {any} */ (window).sigmod;
  569. 			if (!real || patchInterval === undefined) return;
  570. 			sigmod.exists = true;
  571.  
  572. 			clearInterval(patchInterval);
  573. 			patchInterval = undefined;
  574.  
  575. 			// anchor chat and minimap to the screen, so scrolling to zoom doesn't move them
  576. 			// it's possible that cursed will change something at any time so i'm being safe here
  577. 			const minimapContainer = /** @type {HTMLElement | null} */ (document.querySelector('.minimapContainer'));
  578. 			if (minimapContainer) minimapContainer.style.position = 'fixed';
  579.  
  580. 			const modChat = /** @type {HTMLElement | null} */ (document.querySelector('.modChat'));
  581. 			if (modChat) modChat.style.position = 'fixed';
  582.  
  583. 			// sigmod keeps track of the # of displayed messages with a counter, but it doesn't reset on clear
  584. 			// therefore, if the chat gets cleared with 200 (the maximum) messages in it, it will stay permanently*
  585. 			// blank
  586. 			const modMessages = /** @type {HTMLElement | null} */ (document.querySelector('#mod-messages'));
  587. 			if (modMessages) {
  588. 				const old = modMessages.removeChild;
  589. 				modMessages.removeChild = node => {
  590. 					if (modMessages.children.length > 200) return old.call(modMessages, node);
  591. 					else return node;
  592. 				};
  593. 			}
  594.  
  595. 			// disable all keys on sigmod's end and enable them here
  596. 			/** @param {keyof typeof sigmod.settings} key */
  597. 			const getset = key => ({
  598. 				// toJSON and toString are implemented so that the key still displays and saves properly,
  599. 				// while returning an object that would never match anything in a keydown event
  600. 				get: () => ({ toJSON: () => sigmod.settings[key], toString: () => sigmod.settings[key] }),
  601. 				set: x => sigmod.settings[key] = x,
  602. 			});
  603. 			const keys = real.settings?.macros?.keys;
  604. 			if (keys) {
  605. 				sigmod.settings.respawnKey = keys.respawn;
  606. 				Object.defineProperty(keys, 'respawn', getset('respawnKey'));
  607.  
  608. 				if (keys.line) {
  609. 					sigmod.settings.horizontalLineKey = keys.line.horizontal;
  610. 					sigmod.settings.verticalLineKey = keys.line.vertical;
  611. 					sigmod.settings.fixedLineKey = keys.line.fixed;
  612. 					Object.defineProperties(keys.line, {
  613. 						horizontal: getset('horizontalLineKey'),
  614. 						vertical: getset('verticalLineKey'),
  615. 						fixed: getset('fixedLineKey'),
  616. 					});
  617. 				}
  618.  
  619. 				if (keys.splits) {
  620. 					sigmod.settings.doubleKey = keys.splits.double;
  621. 					sigmod.settings.tripleKey = keys.splits.triple;
  622. 					sigmod.settings.quadKey = keys.splits.quad;
  623. 					Object.defineProperties(keys.splits, {
  624. 						double: getset('doubleKey'),
  625. 						triple: getset('tripleKey'),
  626. 						quad: getset('quadKey'),
  627. 					});
  628. 				}
  629. 			}
  630.  
  631. 			// create a fake sigmally proxy for sigmod, which properly relays some packets (because SigMod does not
  632. 			// support one-tab technology). it should also fix chat bugs due to disconnects and stuff
  633. 			// we do this by hooking into the SigWsHandler object
  634. 			{
  635. 				/** @type {object | undefined} */
  636. 				let handler;
  637. 				const old = Function.prototype.bind;
  638. 				Function.prototype.bind = function(obj) {
  639. 					if (obj.constructor?.name === 'SigWsHandler') handler = obj;
  640. 					return old.call(this, obj);
  641. 				};
  642. 				new WebSocket('wss://255.255.255.255/sigmally.com?sigfix');
  643. 				Function.prototype.bind = old;
  644. 				// handler is expected to be a "SigWsHandler", but it might be something totally different
  645. 				if (handler && 'sendPacket' in handler && 'handleMessage' in handler) {
  646. 					// first, set up the handshake (opcode not-really-a-shuffle)
  647. 					// handshake is reset to false on close (which may or may not happen immediately)
  648. 					Object.defineProperty(handler, 'handshake', { get: () => true, set: () => {} });
  649. 					handler.R = handler.C = new Uint8Array(256); // R and C are linked
  650. 					for (let i = 0; i < 256; ++i) handler.C[i] = i;
  651.  
  652. 					// don't directly access the handler anywhere else
  653. 					/** @param {DataView} dat */
  654. 					sigmod.handleMessage = dat => handler.handleMessage({ data: dat.buffer });
  655.  
  656. 					// override sendPacket to properly handle what sigmod expects
  657. 					/** @param {object} buf */
  658. 					handler.sendPacket = buf => {
  659. 						if ('build' in buf) buf = buf.build(); // convert sigmod/sigmally Writer class to a buffer
  660. 						if ('buffer' in buf) buf = buf.buffer;
  661. 						const dat = new DataView(/** @type {ArrayBuffer} */ (buf));
  662. 						switch (dat.getUint8(0)) {
  663. 							// case 0x00, sendPlay, isn't really used outside of secret tournaments
  664. 							case 0x10: { // used for linesplits and such
  665. 								net.move(world.selected, dat.getInt32(1, true), dat.getInt32(5, true));
  666. 								break;
  667. 							}
  668. 							// case 0x63, sendChat, already goes directly to sigfix.net.chat
  669. 							// case 0xdc, sendFakeCaptcha, is not used outside of secret tournaments
  670. 						}
  671. 					};
  672. 				}
  673. 			}
  674. 		};
  675. 		patchInterval = setInterval(sigmod.patch, 500);
  676. 		sigmod.patch();
  677.  
  678. 		return sigmod;
  679. 	})();
  680.  
  681.  
  682.  
  683. 	/////////////////////////
  684. 	// Create Options Menu //
  685. 	/////////////////////////
  686. 	const settings = (() => {
  687. 		const settings = {
  688. 			autoZoom: true,
  689. 			background: '',
  690. 			blockBrowserKeybinds: false,
  691. 			blockNearbyRespawns: false,
  692. 			boldUi: false,
  693. 			/** @type {'natural' | 'default'} */
  694. 			camera: 'default',
  695. 			/** @type {'default' | 'instant'} */
  696. 			cameraMovement: 'default',
  697. 			cameraSmoothness: 2,
  698. 			cameraSpawnAnimation: true,
  699. 			cellGlow: false,
  700. 			cellOpacity: 1,
  701. 			cellOutlines: true,
  702. 			clans: false,
  703. 			clanScaleFactor: 1,
  704. 			colorUnderSkin: true,
  705. 			delayDouble: false,
  706. 			drawDelay: 120,
  707. 			jellySkinLag: true,
  708. 			massBold: false,
  709. 			massOpacity: 1,
  710. 			massScaleFactor: 1,
  711. 			mergeCamera: true,
  712. 			moveAfterLinesplit: false,
  713. 			multibox: '',
  714. 			/** @type {string[]} */
  715. 			multiNames: [],
  716. 			nameBold: false,
  717. 			nameScaleFactor: 1,
  718. 			nbox: false,
  719. 			nboxCount: 3,
  720. 			nboxCyclePair: '',
  721. 			nboxHoldKeybinds: ['', '', '', '', '', '', '', ''],
  722. 			nboxSelectKeybinds: ['', '', '', '', '', '', '', ''],
  723. 			nboxSwitchPair: '',
  724. 			outlineMulti: 0.2,
  725. 			// delta's default colors, #ff00aa and #ffffff
  726. 			outlineMultiColor: /** @type {[number, number, number, number]} */ ([1, 0, 2/3, 1]),
  727. 			outlineMultiInactiveColor: /** @type {[number, number, number, number]} */ ([1, 1, 1, 1]),
  728. 			pelletGlow: false,
  729. 			rainbowBorder: false,
  730. 			scrollFactor: 1,
  731. 			selfSkin: '',
  732. 			selfSkinMulti: '',
  733. 			selfSkinNbox: ['', '', '', '', '', ''],
  734. 			slowerJellyPhysics: false,
  735. 			separateBoost: false,
  736. 			showStats: true,
  737. 			spectator: false,
  738. 			spectatorLatency: false,
  739. 			/** @type {'' | 'latest' | 'flawless'} */
  740. 			synchronization: 'flawless',
  741. 			textOutlinesFactor: 1,
  742. 			// default is the default chat color
  743. 			theme: /** @type {[number, number, number, number]} */ ([252 / 255, 114 / 255, 0, 0]),
  744. 			tracer: false,
  745. 			unsplittableColor: /** @type {[number, number, number, number]} */ ([1, 1, 1, 1]),
  746. 			yx: false, // hehe
  747. 		};
  748.  
  749. 		const settingsExt = {};
  750. 		Object.setPrototypeOf(settings, settingsExt);
  751.  
  752. 		try {
  753. 			Object.assign(settings, JSON.parse(localStorage.getItem('sigfix') ?? ''));
  754. 		} catch (_) { }
  755.  
  756. 		// convert old settings
  757. 		{
  758. 			if (/** @type {any} */ (settings.multibox) === true) settings.multibox = 'Tab';
  759. 			else if (/** @type {any} */ (settings.multibox) === false) settings.multibox = '';
  760.  
  761. 			if (/** @type {any} */ (settings).unsplittableOpacity !== undefined) {
  762. 				settings.unsplittableColor = [1, 1, 1, /** @type {any} */ (settings).unsplittableOpacity];
  763. 				delete settings.unsplittableOpacity;
  764. 			}
  765.  
  766. 			const { autoZoom, multiCamera, synchronization } = /** @type {any} */ (settings);
  767. 			if (multiCamera !== undefined) {
  768. 				if (multiCamera === 'natural' || multiCamera === 'delta' || multiCamera === 'weighted') {
  769. 					settings.camera = 'natural';
  770. 				} else if (multiCamera === 'none') settings.camera = 'default';
  771.  
  772. 				settings.mergeCamera = multiCamera !== 'weighted' && multiCamera !== 'none'; // the two-tab settings
  773. 				delete settings.multiCamera;
  774. 			}
  775.  
  776. 			if (autoZoom === 'auto') settings.autoZoom = true;
  777. 			else if (autoZoom === 'never') settings.autoZoom = false;
  778.  
  779. 			// accidentally set the default to 'none' which sucks
  780. 			if (synchronization === 'none') settings.synchronization = 'flawless';
  781. 		}
  782.  
  783. 		/** @type {(() => void)[]} */
  784. 		const onSyncs = [];
  785. 		/** @type {(() => void)[]} */
  786. 		const onUpdates = [];
  787.  
  788. 		settingsExt.refresh = () => {
  789. 			onSyncs.forEach(fn => fn());
  790. 			onUpdates.forEach(fn => fn());
  791. 		};
  792.  
  793. 		// allow syncing sigfixes settings in case you leave an extra sig tab open for a long time and would lose your
  794. 		// changed settings
  795. 		const channel = new BroadcastChannel('sigfix-settings');
  796. 		channel.addEventListener('message', msg => {
  797. 			Object.assign(settings, msg.data);
  798. 			settingsExt.refresh();
  799. 		});
  800.  
  801. 		/** @type {IDBDatabase | undefined} */
  802. 		settingsExt.database = undefined;
  803. 		const dbReq = indexedDB.open('sigfix', 1);
  804. 		dbReq.addEventListener('success', () => void (settingsExt.database = dbReq.result));
  805. 		dbReq.addEventListener('upgradeneeded', () => {
  806. 			settingsExt.database = dbReq.result;
  807. 			settingsExt.database.createObjectStore('images');
  808. 		});
  809.  
  810. 		// #1 : define helper functions
  811. 		/**
  812. 		 * @param {string} html
  813. 		 * @returns {HTMLElement}
  814. 		 */
  815. 		function fromHTML(html) {
  816. 			const div = document.createElement('div');
  817. 			div.innerHTML = html;
  818. 			return /** @type {HTMLElement} */ (div.firstElementChild);
  819. 		}
  820.  
  821. 		settingsExt.save = () => {
  822. 			localStorage.setItem('sigfix', JSON.stringify(settings));
  823. 			channel.postMessage(settings);
  824. 			onUpdates.forEach(fn => fn());
  825. 		}
  826.  
  827. 		/**
  828. 		 * @template O, T
  829. 		 * @typedef {{ [K in keyof O]: O[K] extends T ? K : never }[keyof O]} PropertyOfType
  830. 		 */
  831.  
  832. 		/** @type {HTMLElement | null} */
  833. 		const vanillaModal = document.querySelector('#cm_modal__settings .ctrl-modal__modal');
  834. 		if (vanillaModal) vanillaModal.style.width = '440px'; // make modal wider to fit everything properly
  835.  
  836. 		const vanillaMenu = document.querySelector('#cm_modal__settings .ctrl-modal__content');
  837. 		vanillaMenu?.appendChild(fromHTML(`
  838. 			<div class="menu__item">
  839. 				<div style="width: 100%; height: 1px; background: #bfbfbf;"></div>
  840. 			</div>
  841. 		`));
  842.  
  843. 		/**
  844. 		 * @template T
  845. 		 * @param {T | null} el
  846. 		 * @returns {T}
  847. 		 */
  848. 		const require = el => /** @type {T} */ (el); // aux.require is unnecessary for requiring our own elements
  849.  
  850. 		const vanillaContainer = document.createElement('div');
  851. 		vanillaContainer.className = 'menu__item';
  852. 		vanillaMenu?.appendChild(vanillaContainer);
  853.  
  854. 		const sigmodContainer = document.createElement('div');
  855. 		sigmodContainer.className = 'mod_tab scroll';
  856. 		sigmodContainer.style.display = 'none';
  857.  
  858. 		/** @type {{ container: HTMLElement, help: HTMLElement, helpbox: HTMLElement }[]} */
  859. 		const containers = [];
  860.  
  861. 		/**
  862. 		 * @param {string} title
  863. 		 * @param {{ sigmod: HTMLElement, vanilla: HTMLElement }[]} components
  864. 		 * @param {() => boolean} show
  865. 		 * @param {string} help
  866. 		*/
  867. 		const setting = (title, components, show, help) => {
  868. 			const vanilla = fromHTML(`
  869. 				<div style="height: 25px; position: relative;">
  870. 					<div style="height: 25px; line-height: 25px; position: absolute; top: 0; left: 0;">
  871. 						<a id="sf-help" style="color: #0009; cursor: help; user-select: none;">(?)</a> ${title}
  872. 					</div>
  873. 					<div id="sf-components" style="height: 25px; margin-left: 5px; position: absolute; right: 0;
  874. 						bottom: 0;"></div>
  875. 					<div id="sf-helpbox" style="display: none; position: absolute; top: calc(100% + 5px); left: 20px;
  876. 						width: calc(100% - 30px); height: fit-content; padding: 10px; color: #000; background: #fff;
  877. 						border: 1px solid #999; border-radius: 4px; z-index: 2;">
  878. 						${help}
  879. 					</div>
  880. 				</div>
  881. 			`);
  882. 			const sigmod = fromHTML(`
  883. 				<div class="modRowItems justify-sb" style="padding: 5px 10px; position: relative;">
  884. 					<span><a id="sfsm-help" style="color: #fff9; cursor: help; user-select: none;">(?)</a> ${title}\
  885. 						</span>
  886. 					<span class="justify-sb" id="sfsm-components"></span>
  887. 					<div id="sfsm-helpbox" style="display: none; position: absolute; top: calc(100% + 5px); left: 30px;
  888. 						width: calc(100% - 40px); height: fit-content; padding: 10px; color: #fffe; background: #000;
  889. 						border: 1px solid #6871f1; border-radius: 4px; z-index: 2;">${help}</div>
  890. 				</div>
  891. 			`);
  892.  
  893. 			const vanillaComponents = require(vanilla.querySelector('#sf-components'));
  894. 			const sigmodComponents = require(sigmod.querySelector('#sfsm-components'));
  895. 			for (const pair of components) {
  896. 				vanillaComponents.appendChild(pair.vanilla);
  897. 				sigmodComponents.appendChild(pair.sigmod);
  898. 			}
  899.  
  900. 			const reshow = () => void (vanilla.style.display = sigmod.style.display = show() ? '' : 'none');
  901. 			reshow();
  902. 			onUpdates.push(reshow);
  903.  
  904. 			vanillaContainer.appendChild(vanilla);
  905. 			sigmodContainer.appendChild(sigmod);
  906. 			containers.push({
  907. 				container: vanilla,
  908. 				help: require(vanilla.querySelector('#sf-help')),
  909. 				helpbox: require(vanilla.querySelector('#sf-helpbox')),
  910. 			}, {
  911. 				container: sigmod,
  912. 				help: require(sigmod.querySelector('#sfsm-help')),
  913. 				helpbox: require(sigmod.querySelector('#sfsm-helpbox')),
  914. 			});
  915. 		};
  916.  
  917. 		/**
  918. 		 * @param {PropertyOfType<typeof settings, number>} property
  919. 		 * @param {number} initial
  920. 		 * @param {number} min
  921. 		 * @param {number} max
  922. 		 * @param {number} step
  923. 		 * @param {number} decimals
  924. 		 */
  925. 		const slider = (property, initial, min, max, step, decimals) => {
  926. 			/**
  927. 			 * @param {HTMLInputElement} slider
  928. 			 * @param {HTMLInputElement} display
  929. 			 */
  930. 			const listen = (slider, display) => {
  931. 				const change = () => slider.value = display.value = settings[property].toFixed(decimals);
  932. 				onSyncs.push(change);
  933. 				change();
  934.  
  935. 				/** @param {HTMLInputElement} input */
  936. 				const onInput = input => {
  937. 					const value = Number(input.value);
  938. 					if (Number.isNaN(value)) return;
  939.  
  940. 					settings[property] = value;
  941. 					change();
  942. 					settingsExt.save();
  943. 				};
  944. 				slider.addEventListener('input', () => onInput(slider));
  945. 				display.addEventListener('change', () => onInput(display));
  946. 			};
  947.  
  948. 			const datalist = `<datalist id="sf-${property}-markers"> <option value="${initial}"></option> </datalist>`;
  949. 			const vanilla = fromHTML(`
  950. 				<div>
  951. 					<input id="sf-${property}" style="display: block; float: left; height: 25px; line-height: 25px;
  952. 						margin-left: 5px;" min="${min}" max="${max}" step="${step}" value="${initial}"
  953. 						list="sf-${property}-markers" type="range" />
  954. 					${initial !== undefined ? datalist : ''}
  955. 					<input id="sf-${property}-display" style="display: block; float: left; height: 25px;
  956. 						line-height: 25px; width: 50px; text-align: center; margin-left: 5px;" />
  957. 				</div>
  958. 			`);
  959. 			const sigmod = fromHTML(`
  960. 				<span class="justify-sb">
  961. 					<input id="sfsm-${property}" style="width: 200px;" type="range" min="${min}" max="${max}"
  962. 						step="${step}" value="${initial}" list="sf-${property}-markers" />
  963. 					${initial !== undefined ? datalist : ''}
  964. 					<input id="sfsm-${property}-display" class="text-center form-control" style="border: none;
  965. 						width: 50px; margin: 0 15px;" />
  966. 				</span>
  967. 			`);
  968.  
  969. 			listen(require(vanilla.querySelector(`#sf-${property}`)),
  970. 				require(vanilla.querySelector(`#sf-${property}-display`)));
  971. 			listen(aux.require(sigmod.querySelector(`#sfsm-${property}`), 'no selector match'),
  972. 				aux.require(sigmod.querySelector(`#sfsm-${property}-display`), 'no selector match'));
  973. 			return { sigmod, vanilla };
  974. 		};
  975.  
  976. 		/** @param {PropertyOfType<typeof settings, boolean>} property */
  977. 		const checkbox = property => {
  978. 			/** @param {HTMLInputElement} input */
  979. 			const listen = input => {
  980. 				onSyncs.push(() => input.checked = settings[property]);
  981. 				input.checked = settings[property];
  982.  
  983. 				input.addEventListener('input', () => {
  984. 					settings[property] = input.checked;
  985. 					settingsExt.save();
  986. 				});
  987. 			};
  988.  
  989. 			const vanilla = fromHTML(`<input id="sf-${property}" type="checkbox" />`);
  990. 			const sigmod = fromHTML(`
  991. 				<div style="margin-right: 25px;">
  992. 					<div class="modCheckbox" style="display: inline-block;">
  993. 						<input id="sfsm-${property}" type="checkbox" />
  994. 						<label class="cbx" for="sfsm-${property}"></label>
  995. 					</div>
  996. 				</div>
  997. 			`);
  998. 			listen(/** @type {HTMLInputElement} */ (vanilla));
  999. 			listen(require(sigmod.querySelector(`#sfsm-${property}`)));
  1000. 			return { sigmod, vanilla };
  1001. 		};
  1002.  
  1003. 		/**
  1004. 		 * @param {any} property
  1005. 		 * @param {any} parent
  1006. 		 * @param {string} key
  1007. 		 */
  1008. 		const image = (property, parent = settings, key = property) => {
  1009. 			/**
  1010. 			 * @param {HTMLInputElement} input
  1011. 			 * @param {boolean} isSigmod
  1012. 			 */
  1013. 			const listen = (input, isSigmod) => {
  1014. 				onSyncs.push(() => input.value = parent[property]);
  1015. 				input.value = parent[property];
  1016.  
  1017. 				input.addEventListener('input', e => {
  1018. 					if (input.value.startsWith('🖼️')) {
  1019. 						input.value = parent[property];
  1020. 						e.preventDefault();
  1021. 						return;
  1022. 					}
  1023.  
  1024. 					/** @type {string} */ (parent[property]) = input.value;
  1025. 					settingsExt.save();
  1026. 				});
  1027. 				input.addEventListener('dragenter', () => void (input.style.borderColor = '#00ccff'));
  1028. 				input.addEventListener('dragleave',
  1029. 					() => void (input.style.borderColor = isSigmod ? 'transparent' : ''));
  1030. 				input.addEventListener('drop', e => {
  1031. 					input.style.borderColor = isSigmod ? 'transparent' : '';
  1032. 					e.preventDefault();
  1033.  
  1034. 					const file = e.dataTransfer?.files[0];
  1035. 					if (!file) return;
  1036.  
  1037. 					const { database } = settingsExt;
  1038. 					if (!database) return;
  1039.  
  1040. 					input.value = '(importing)';
  1041.  
  1042. 					const transaction = database.transaction('images', 'readwrite');
  1043. 					transaction.objectStore('images').put(file, key);
  1044.  
  1045. 					transaction.addEventListener('complete', () => {
  1046. 						/** @type {string} */ (parent[property]) = input.value = `🖼️ ${file.name}`;
  1047. 						settingsExt.save();
  1048. 						render.resetDatabaseCache();
  1049. 					});
  1050. 					transaction.addEventListener('error', err => {
  1051. 						input.value = '(failed to load image)';
  1052. 						console.warn('sigfix database error:', err);
  1053. 					});
  1054. 				});
  1055. 			};
  1056.  
  1057. 			const placeholder = 'https://i.imgur.com/... or drag here';
  1058. 			const vanilla = fromHTML(`<input id="sf-${property}" placeholder="${placeholder}" type="text" />`);
  1059. 			const sigmod = fromHTML(`<input class="modInput" id="sfsm-${property}" placeholder="${placeholder}"
  1060. 				style="border: 1px solid transparent; width: 250px;" type="text" />`);
  1061. 			listen(/** @type {HTMLInputElement} */ (vanilla), false);
  1062. 			listen(/** @type {HTMLInputElement} */ (sigmod), true);
  1063. 			return { sigmod, vanilla };
  1064. 		};
  1065.  
  1066. 		/** @param {PropertyOfType<typeof settings, [number, number, number, number]>} property */
  1067. 		const color = (property, toggle = false) => {
  1068. 			/**
  1069. 			 * @param {HTMLInputElement} input
  1070. 			 * @param {HTMLInputElement} alpha
  1071. 			 */
  1072. 			const listen = (input, alpha) => {
  1073. 				const update = () => {
  1074. 					input.value = aux.rgba2hex6(...settings[property]);
  1075. 					if (toggle) alpha.checked = settings[property][3] > 0;
  1076. 					else alpha.value = String(settings[property][3]);
  1077. 				};
  1078. 				onSyncs.push(update);
  1079. 				update();
  1080.  
  1081. 				const changed = () => {
  1082. 					settings[property] = aux.hex2rgba(input.value);
  1083. 					if (toggle) settings[property][3] = alpha.checked ? 1 : 0;
  1084. 					else settings[property][3] = Number(alpha.value);
  1085. 					settingsExt.save();
  1086. 				};
  1087. 				input.addEventListener('input', changed);
  1088. 				alpha.addEventListener('input', changed);
  1089. 			};
  1090.  
  1091. 			const vanilla = fromHTML(`
  1092. 				<div>
  1093. 					<input id="sf-${property}-alpha" type="${toggle ? 'checkbox' : 'range'}" min="0" max="1" \
  1094. 						step="0.01" ${toggle ? '' : 'style="width: 100px;"'} />
  1095. 					<input id="sf-${property}" type="color" />
  1096. 				</div>
  1097. 			`);
  1098. 			const sigmod = fromHTML(`
  1099. 				<div style="margin-right: 25px;">
  1100. 					${toggle ? `<div class="modCheckbox" style="display: inline-block;">
  1101. 						<input id="sfsm-${property}-alpha" type="checkbox" />
  1102. 						<label class="cbx" for="sfsm-${property}-alpha"></label>
  1103. 					</div>` : `<input id="sfsm-${property}-alpha" type="range" min="0" max="1" step="0.01" \
  1104. 						style="width: 100px" />`}
  1105. 					<input id="sfsm-${property}" type="color" />
  1106. 				</div>
  1107. 			`);
  1108. 			listen(require(vanilla.querySelector(`#sf-${property}`)),
  1109. 				require(vanilla.querySelector(`#sf-${property}-alpha`)));
  1110. 			listen(require(sigmod.querySelector(`#sfsm-${property}`)),
  1111. 				require(sigmod.querySelector(`#sfsm-${property}-alpha`)));
  1112. 			return { sigmod, vanilla };
  1113. 		};
  1114.  
  1115. 		/**
  1116. 		 * @param {PropertyOfType<typeof settings, string>} property
  1117. 		 * @param {[string, string][]} options
  1118. 		 */
  1119. 		const dropdown = (property, options) => {
  1120. 			/** @param {HTMLSelectElement} input */
  1121. 			const listen = input => {
  1122. 				onSyncs.push(() => input.value = settings[property]);
  1123. 				input.value = settings[property];
  1124.  
  1125. 				input.addEventListener('input', () => {
  1126. 					/** @type {string} */ (settings[property]) = input.value;
  1127. 					settingsExt.save();
  1128. 				});
  1129. 			};
  1130.  
  1131. 			const vanilla = fromHTML(`
  1132. 				<select id="sf-${property}">
  1133. 					${options.map(([value, name]) => `<option value="${value}">${name}</option>`).join('\n')}
  1134. 				</select>
  1135. 			`);
  1136. 			const sigmod = fromHTML(`
  1137. 				<select class="form-control" id="sfsm-${property}" style="width: 250px;">
  1138. 					${options.map(([value, name]) => `<option value="${value}">${name}</option>`).join('\n')}
  1139. 				</select>
  1140. 			`);
  1141. 			listen(/** @type {HTMLSelectElement} */ (vanilla));
  1142. 			listen(/** @type {HTMLSelectElement} */ (sigmod));
  1143. 			return { sigmod, vanilla };
  1144. 		};
  1145.  
  1146. 		/**
  1147. 		 * @param {any} property
  1148. 		 * @param {any} parent
  1149. 		 */
  1150. 		const keybind = (property, parent = settings) => {
  1151. 			/** @param {HTMLInputElement} input */
  1152. 			const listen = input => {
  1153. 				onSyncs.push(() => input.value = parent[property]);
  1154. 				input.value = parent[property];
  1155.  
  1156. 				input.addEventListener('keydown', e => {
  1157. 					if (e.key === 'Control' || e.key === 'Alt' || e.key === 'Meta') return;
  1158. 					if (e.code === 'Escape' || e.code === 'Backspace') {
  1159. 						parent[property] = input.value = '';
  1160. 					} else {
  1161. 						parent[property] = input.value = aux.keybind(e) ?? '';
  1162. 					}
  1163. 					settingsExt.save();
  1164. 					e.preventDefault(); // prevent the key being typed in
  1165. 				});
  1166. 				input.addEventListener('mousedown', e => {
  1167. 					if (e.button === 0 && document.activeElement !== input) return; // do default action
  1168. 					parent[property] = input.value = aux.keybind(e) ?? '';
  1169. 					settingsExt.save();
  1170. 					e.preventDefault();
  1171. 				});
  1172. 				input.addEventListener('contextmenu', e => void e.preventDefault());
  1173. 			};
  1174.  
  1175. 			const vanilla = fromHTML(`<input id="sf-${property}" placeholder="..." type="text" style="
  1176. 				text-align: center; width: 80px;" />`);
  1177. 			const sigmod = fromHTML(`<input class="keybinding" id="sfsm-${property}" placeholder="..."
  1178. 				style="max-width: 100px; width: 100px;" type="text" />`);
  1179. 			listen(/** @type {HTMLInputElement} */ (vanilla));
  1180. 			listen(/** @type {HTMLInputElement} */ (sigmod));
  1181. 			return { sigmod, vanilla };
  1182. 		};
  1183.  
  1184. 		addEventListener('mousedown', ev => {
  1185. 			for (const { container, help, helpbox } of containers) {
  1186. 				if (container.contains(/** @type {Node | null} */ (ev.target))) {
  1187. 					if (ev.target === help) helpbox.style.display = '';
  1188. 				} else {
  1189. 					if (helpbox.style.display === '') helpbox.style.display = 'none';
  1190. 				}
  1191. 			}
  1192. 		});
  1193.  
  1194. 		const separator = (text = '•') => {
  1195. 			vanillaContainer.appendChild(fromHTML(`<div style="text-align: center; width: 100%;">${text}</div>`));
  1196. 			sigmodContainer.appendChild(fromHTML(`<span class="text-center">${text}</span>`));
  1197. 		};
  1198.  
  1199. 		const newTag = `<span style="padding: 2px 5px; border-radius: 10px; background: #76f; color: #fff;
  1200. 			font-weight: bold; font-size: 0.95rem; user-select: none;">NEW</span>`;
  1201.  
  1202. 		// #2 : generate ui for settings
  1203. 		setting('Draw delay', [slider('drawDelay', 120, 40, 300, 1, 0)], () => true,
  1204. 			'How long (in milliseconds) cells will lag behind for. Lower values mean cells will very quickly catch ' +
  1205. 			'up to where they actually are.');
  1206. 		setting('Cell outlines', [checkbox('cellOutlines')], () => true,
  1207. 			'Whether the subtle dark outlines around cells (including skins) should draw.');
  1208. 		setting('Cell opacity', [slider('cellOpacity', 1, 0, 1, 0.005, 3)], () => true,
  1209. 			'How opaque cells should be. 1 = fully visible, 0 = invisible. It can be helpful to see the size of a ' +
  1210. 			'smaller cell under a big cell.');
  1211. 		setting('Self skin URL', [image('selfSkin')], () => true,
  1212. 			'A custom skin for yourself. You can drag+drop a skin here, or use a direct URL. Not visible to others.');
  1213. 		setting('Secondary skin URL', [image('selfSkinMulti')], () => !!settings.multibox || settings.nbox,
  1214. 			'A custom skin for your secondary multibox tab. You can drag+drop a skin here, or use a direct URL. Not ' +
  1215. 			'visible to others.');
  1216. 		setting('Map background', [image('background')], () => true,
  1217. 			'A square background image to use within the entire map border. Images 512x512 and under will be treated ' +
  1218. 			'as a repeating pattern, where 50 pixels = 1 grid square.');
  1219. 		setting('Lines between cell and mouse', [checkbox('tracer')], () => true,
  1220. 			'If enabled, draws tracers between all of the cells you ' +
  1221. 			'control and your mouse. Useful as a hint to your subconscious about which tab you\'re currently on.');
  1222.  
  1223. 		separator('• camera •');
  1224. 		setting('Camera style', [dropdown('camera', [['natural', 'Natural (weighted)'], ['default', 'Default']])],
  1225. 			() => true,
  1226. 			'How the camera focuses on your cells. <br>' +
  1227. 			'- A "natural" camera follows your center of mass. If you have a lot of small back pieces, they would ' +
  1228. 			'barely affect your camera position. <br>' +
  1229. 			'- The "default" camera focuses on every cell equally. If you have a lot of small back pieces, your ' +
  1230. 			'camera would focus on those instead. <br>' +
  1231. 			'When one-tab multiboxing, you <b>must</b> use the Natural (weighted) camera style.');
  1232. 		setting('Camera movement',
  1233. 			[dropdown('cameraMovement', [['default', 'Default'], ['instant', 'Instant']])], () => true,
  1234. 			'How the camera moves. <br>' +
  1235. 			'- "Default" camera movement follows your cell positions, but when a cell dies or splits, it immediately ' +
  1236. 			'stops or starts focusing on it. Artificial smoothness is added - you can control that with the ' +
  1237. 			'"Camera smoothness" setting. <br>' +
  1238. 			'- "Instant" camera movement exactly follows your cells without lagging behind, gradually focusing more ' +
  1239. 			'or less on cells while they split or die. There is no artificial smoothness, but you should use a ' +
  1240. 			'higher draw delay (at least 100). You might find this significantly smoother than the default camera.');
  1241. 		setting('Camera smoothness', [slider('cameraSmoothness', 2, 1, 10, 0.1, 1)],
  1242. 			() => settings.cameraMovement === 'default',
  1243. 			'How slowly the camera lags behind. The default is 2; using 4 moves the camera about twice as slowly, ' +
  1244. 			'for example. Setting to 1 removes all camera smoothness.');
  1245. 		setting('Zoom speed', [slider('scrollFactor', 1, 0.05, 1, 0.05, 2)], () => true,
  1246. 			'A smaller zoom speed lets you fine-tune your zoom.');
  1247. 		setting('Auto-zoom', [checkbox('autoZoom')], () => true,
  1248. 			'When enabled, automatically zooms in/out for you based on how big you are.');
  1249. 		setting('Move camera while spawning', [checkbox('cameraSpawnAnimation')], () => true,
  1250. 			'When spawning, normally the camera will take a bit of time to move to where your cell spawned. This ' +
  1251. 			'can be disabled.');
  1252.  
  1253. 		separator('• multibox •');
  1254. 		setting('Multibox keybind', [keybind('multibox')], () => true,
  1255. 			'The key to press for switching multibox tabs. "Tab" is recommended, but you can also use "Ctrl+Tab" and ' +
  1256. 			'most other keybinds.');
  1257. 		setting(`Vision merging ${newTag}`,
  1258. 			[dropdown('synchronization', [['flawless', 'Flawless (recommended)'], ['latest', 'Latest'], ['', 'None']])],
  1259. 			() => !!settings.multibox || settings.nbox || settings.spectator,
  1260. 			'How multiple connections synchronize the cells they can see. <br>' +
  1261. 			'- "Flawless" ensures all connections are synchronized to be on the same ping. If one connection gets a ' +
  1262. 			'lag spike, all connections will get that lag spike too. <br>' +
  1263. 			'- "Latest" uses the most recent data across all connections. Lag spikes will be much less noticeable, ' +
  1264. 			'however cells that are farther away might warp around and appear buggy. <br>' +
  1265. 			'- "None" only shows what your current tab can see. <br>' +
  1266. 			'"Flawless" is recommended for all users, however if you find it laggy you should try "Latest".');
  1267. 		setting('One-tab mode', [checkbox('mergeCamera')], () => !!settings.multibox || settings.nbox,
  1268. 			'When enabled, your camera will focus on both multibox tabs at once. Disable this if you prefer two-tab-' +
  1269. 			'style multiboxing. <br>' +
  1270. 			'When one-tab multiboxing, you <b>must</b> use the Natural (weighted) camera style.');
  1271. 		setting('Multibox outline thickness', [slider('outlineMulti', 0.2, 0, 1, 0.01, 2)],
  1272. 			() => !!settings.multibox || settings.nbox,
  1273. 			'When multiboxing, rings appear on your cells, the thickness being a % of your cell radius. This only ' +
  1274. 			'shows when you\'re near one of your tabs.');
  1275. 		setting('Current tab outline color', [color('outlineMultiColor')], () => !!settings.multibox || settings.nbox,
  1276. 			'The color of the rings around your current multibox tab. Only shown when near another tab. The slider ' +
  1277. 			'is the outline opacity.');
  1278. 		setting('Other tab outline color', [color('outlineMultiInactiveColor')], () => !!settings.multibox || settings.nbox,
  1279. 			'The color of the rings around your other inactive multibox tabs. Only shown when near another tab. The ' +
  1280. 			'slider is the outline opacity.');
  1281. 		setting('Block respawns near other tabs', [checkbox('blockNearbyRespawns')], () => !!settings.multibox || settings.nbox,
  1282. 			'When enabled, the respawn key (using SigMod) will be disabled if your multibox tabs are close. ' +
  1283. 			'This means you can spam the respawn key until your multibox tab spawns nearby.');
  1284.  
  1285. 		// don't allow turning on without multiboxing enabled first
  1286. 		setting('N-boxing', [checkbox('nbox')], () => !!settings.multibox || settings.nbox,
  1287. 			'<h1>ADVANCED USERS ONLY.</h1>' +
  1288. 			'Enables multiboxing with 3 or more tabs (known as triboxing or quadboxing). <br>' +
  1289. 			'Official Sigmally servers limit how many connections can be made from an IP address (usually 3). If you ' +
  1290. 			'can\'t connect some of your tabs: <br>' +
  1291. 			'- Try disabling the spectator tab for a third connection. <br>' +
  1292. 			'- Try using proxies to connect via multiple IP addresses. <br>' +
  1293. 			'- Try playing on a private server instead. <br>' +
  1294. 			'When enabled, the multibox keybind above will cycle between all tabs.');
  1295. 		setting('N-box tab count', [slider('nboxCount', 3, 3, 8, 1, 0)], () => settings.nbox,
  1296. 			'The number of tabs to make available for selection.');
  1297. 		setting('N-box change pair', [keybind('nboxCyclePair')],
  1298. 			() => settings.nbox,
  1299. 			'Pressing this key will cycle between selecting pairs #1/#2, #3/#4, #5/#6, and #7/#8. The last used tab ' +
  1300. 			'in this pair will be selected. (Think of this as switching between multiple multibox game windows.)');
  1301. 		setting('N-box switch within pair', [keybind('nboxSwitchPair')],
  1302. 			() => settings.nbox,
  1303. 			'Pressing this key will switch between tabs within your current pair (from #1/#2, #3/#4, #5/#6, or #7/#8).');
  1304. 		for (let i = 0; i < 8; ++i) {
  1305. 			setting(`N-box select tab #${i + 1}`, [keybind(i, settings.nboxSelectKeybinds)],
  1306. 				() => settings.nbox && settings.nboxCount >= i + 1,
  1307. 				`Pressing this key will switch to tab #${i + 1}.`);
  1308. 		}
  1309. 		for (let i = 0; i < 8; ++i) {
  1310. 			setting(`N-box hold tab #${i + 1}`, [keybind(i, settings.nboxHoldKeybinds)],
  1311. 				() => settings.nbox && settings.nboxCount >= i + 1,
  1312. 				`Holding this key will temporarily switch to tab #${i + 1}. Releasing all n-box keys will return you ` +
  1313. 				'to the last selected tab.');
  1314. 		}
  1315. 		for (let i = 2; i < 8; ++i) {
  1316. 			setting(`N-box skin #${i + 1}`, [image(i, settings.selfSkinNbox, `selfSkinNbox.${i}`)],
  1317. 				() => settings.nbox && settings.nboxCount >= i + 1,
  1318. 				`A custom skin for tab #${i + 1}. You can drag+drop a skin here, or use a direct URL. Not ` +
  1319. 				'visible to others.');
  1320. 		}
  1321.  
  1322. 		separator('• text •');
  1323. 		setting('Name scale factor', [slider('nameScaleFactor', 1, 0.5, 2, 0.01, 2)], () => true,
  1324. 			'The size multiplier of names.');
  1325. 		setting('Mass scale factor', [slider('massScaleFactor', 1, 0.5, 4, 0.01, 2)], () => true,
  1326. 			'The size multiplier of mass (which is half the size of names).');
  1327. 		setting('Mass opacity', [slider('massOpacity', 1, 0, 1, 0.01, 2)], () => true,
  1328. 			'The opacity of the mass text. You might find it visually appealing to have mass be a little dimmer than ' +
  1329. 			'names.');
  1330. 		setting('Bold name / mass text', [checkbox('nameBold'), checkbox('massBold')], () => true,
  1331. 			'Uses the bold Ubuntu font (like Agar.io) for names (left checkbox) or mass (right checkbox).');
  1332. 		setting('Show clans', [checkbox('clans')], () => true,
  1333. 			'When enabled, shows the name of the clan a player is in above their name. ' +
  1334. 			'If you turn off names (using SigMod), then player names will be replaced with their clan\'s.');
  1335. 		setting('Clan scale factor', [slider('clanScaleFactor', 1, 0.5, 4, 0.01, 2)], () => settings.clans,
  1336. 			'The size multiplier of a player\'s clan displayed above their name. When names are off, names will be ' +
  1337. 			'replaced with clans and use the name scale factor instead.');
  1338. 		setting('Text outline thickness', [slider('textOutlinesFactor', 1, 0, 2, 0.01, 2)], () => true,
  1339. 			'The multiplier of the thickness of the black stroke around names, mass, and clans on cells. You can set ' +
  1340. 			'this to 0 to disable outlines AND text shadows.');
  1341.  
  1342. 		separator('• other •');
  1343. 		setting('Theme color', [color('theme', true)], () => true,
  1344. 			'If enabled, uses this color for the minimap (and chat, if not using SigMod). It\'s a small detail that ' +
  1345. 			'can make the game feel more immersive.');
  1346. 		setting('Block all browser keybinds', [checkbox('blockBrowserKeybinds')], () => true,
  1347. 			'When enabled, only F11 is allowed to be pressed when in fullscreen. Most other browser and system ' +
  1348. 			'keybinds will be disabled.');
  1349. 		setting('Unsplittable cell outline', [color('unsplittableColor')], () => true,
  1350. 			'The color of the ring around cells that cannot split. The slider ');
  1351. 		setting('Jelly physics skin size lag', [checkbox('jellySkinLag')], () => true,
  1352. 			'Jelly physics causes cells to grow and shrink slower than text and skins, making the game more ' +
  1353. 			'satisfying. If you have a skin that looks weird only with jelly physics, try turning this off.');
  1354. 		setting('Slower jelly physics', [checkbox('slowerJellyPhysics')], () => true,
  1355. 			'Sigmally Fixes normally speeds up the jelly physics animation for it to be tolerable when splitrunning. ' +
  1356. 			'If you prefer how it was in the vanilla client (really slow but satisfying), enable this setting.');
  1357. 		setting('Cell / pellet glow', [checkbox('cellGlow'), checkbox('pelletGlow')], () => true,
  1358. 			'When enabled, gives cells or pellets a slight glow. Basically, shaders for Sigmally. This is very ' +
  1359. 			'optimized and should not impact performance.');
  1360. 		setting('Rainbow border', [checkbox('rainbowBorder')], () => true,
  1361. 			'Gives the map a rainbow border. So shiny!!!');
  1362. 		setting('Top UI uses bold text', [checkbox('boldUi')], () => true,
  1363. 			'When enabled, the top-left score and stats UI and the leaderboard will use the bold Ubuntu font.');
  1364. 		setting('Show server stats', [checkbox('showStats')], () => true,
  1365. 			'When disabled, hides the top-left server stats including the player count and server uptime.');
  1366. 		setting('Connect spectating tab', [checkbox('spectator')], () => true,
  1367. 			'Automatically connects an extra tab and sets it to spectate #1.');
  1368. 		setting('Show spectator tab ping', [checkbox('spectatorLatency')], () => settings.spectator,
  1369. 			'When enabled, shows another ping measurement for your spectator tab.');
  1370. 		setting('Separate XP boost from score', [checkbox('separateBoost')], () => true,
  1371. 			'If you have an XP boost, your score will be doubled. If you don\'t want that, you can separate the XP ' +
  1372. 			'boost from your score.');
  1373. 		setting('Color under skin', [checkbox('colorUnderSkin')], () => true,
  1374. 			'When disabled, transparent skins will be see-through and not show your cell color. Turn this off ' +
  1375. 			'if using a bubble skin, for example.');
  1376. 		setting('Move after linesplit', [checkbox('moveAfterLinesplit')], () => true,
  1377. 			'When doing a horizontal or vertical linesplit, your position is frozen. With this setting enabled, you ' +
  1378. 			'will begin moving forwards in that axis once you split, letting you go farther than normal.');
  1379. 		setting(`Delay pushsplits ${newTag}`, [checkbox('delayDouble')], () => true,
  1380. 			'When in 5+ cells, doing a doublesplit may cause your cells to go like { O∘∘ } and not { ∘∘∘∘ } - which ' +
  1381. 			'is useful, but when using the doublesplit keybind, those small back pieces may go in front. ' +
  1382. 			'When this setting is enabled, a 50ms delay will be added to the second split only when in 5+ cells, ' +
  1383. 			'typically fixing the problem.');
  1384.  
  1385. 		setting(`<span style="padding: 2px 5px; border-radius: 10px; background: #76f; color: #fff;
  1386. 			font-weight: bold; font-size: 0.95rem; user-select: none;">yx's secret setting</span>`,
  1387. 			[checkbox('yx')], () => settings.yx, 'yx\'s top secret settings');
  1388.  
  1389. 		// #3 : create options for sigmod
  1390. 		let sigmodInjection;
  1391. 		sigmodInjection = setInterval(() => {
  1392. 			const nav = document.querySelector('.mod_menu_navbar');
  1393. 			const content = document.querySelector('.mod_menu_content');
  1394. 			if (!nav || !content) return;
  1395.  
  1396. 			clearInterval(sigmodInjection);
  1397.  
  1398. 			content.appendChild(sigmodContainer);
  1399.  
  1400. 			const navButton = fromHTML('<button class="mod_nav_btn">🔥 Sig Fixes</button>');
  1401. 			nav.appendChild(navButton);
  1402. 			navButton.addEventListener('click', () => {
  1403. 				// basically openModTab() from sigmod
  1404. 				(/** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.mod_tab'))).forEach(tab => {
  1405. 					tab.style.opacity = '0';
  1406. 					setTimeout(() => tab.style.display = 'none', 200);
  1407. 				});
  1408.  
  1409. 				(/** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.mod_nav_btn'))).forEach(tab => {
  1410. 					tab.classList.remove('mod_selected');
  1411. 				});
  1412.  
  1413. 				navButton.classList.add('mod_selected');
  1414. 				setTimeout(() => {
  1415. 					sigmodContainer.style.display = 'flex';
  1416. 					setTimeout(() => sigmodContainer.style.opacity = '1', 10);
  1417. 				}, 200);
  1418. 			});
  1419. 		}, 100);
  1420.  
  1421. 		return settings;
  1422. 	})();
  1423.  
  1424.  
  1425.  
  1426. 	/////////////////////
  1427. 	// Prepare Game UI //
  1428. 	/////////////////////
  1429. 	const ui = (() => {
  1430. 		const ui = {};
  1431.  
  1432. 		(() => {
  1433. 			const title = document.querySelector('#title');
  1434. 			if (!title) return;
  1435.  
  1436. 			const watermark = document.createElement('span');
  1437. 			watermark.innerHTML = `<a href="https://greasyfork.org/scripts/483587/versions" \
  1438. 				target="_blank">Sigmally Fixes ${sfVersion}</a> by yx`;
  1439. 			if (sfVersion.includes('BETA')) {
  1440. 				watermark.innerHTML += ' <br><a \
  1441. 					href="https://raw.githubusercontent.com/8y8x/sigmally-fixes/refs/heads/main/sigmally-fixes.user.js"\
  1442. 					target="_blank">[Update beta here]</a>';
  1443. 			}
  1444. 			title.insertAdjacentElement('afterend', watermark);
  1445.  
  1446. 			// check if this version is problematic, don't do anything if this version is too new to be in versions.json
  1447. 			// take care to ensure users can't be logged
  1448. 			fetch('https://raw.githubusercontent.com/8y8x/sigmally-fixes/main/versions.json')
  1449. 				.then(res => res.json())
  1450. 				.then(res => {
  1451. 					if (sfVersion in res && !res[sfVersion].ok && res[sfVersion].alert) {
  1452. 						const color = res[sfVersion].color || '#f00';
  1453. 						const box = document.createElement('div');
  1454. 						box.style.cssText = `background: ${color}3; border: 1px solid ${color}; width: 100%; \
  1455. 							height: fit-content; font-size: 1em; padding: 5px; margin: 5px 0; border-radius: 3px; \
  1456. 							color: ${color}`;
  1457. 						box.innerHTML = String(res[sfVersion].alert)
  1458. 							.replace(/\<|\>/g, '') // never allow html tag injection
  1459. 							.replace(/\{link\}/g, '<a href="https://greasyfork.org/scripts/483587">[click here]</a>')
  1460. 							.replace(/\{autolink\}/g, '<a href="\
  1461. 								https://update.greasyfork.org/scripts/483587/Sigmally%20Fixes%20V2.user.js">\
  1462. 								[click here]</a>');
  1463.  
  1464. 						watermark.insertAdjacentElement('afterend', box);
  1465. 					}
  1466. 				})
  1467. 				.catch(err => console.warn('Failed to check Sigmally Fixes version:', err));
  1468. 		})();
  1469.  
  1470. 		ui.game = (() => {
  1471. 			const game = {};
  1472.  
  1473. 			/** @type {HTMLCanvasElement | null} */
  1474. 			const oldCanvas = document.querySelector('canvas#canvas');
  1475. 			if (!oldCanvas) {
  1476. 				throw 'exiting script - no canvas found';
  1477. 			}
  1478.  
  1479. 			const newCanvas = document.createElement('canvas');
  1480. 			newCanvas.id = 'sf-canvas';
  1481. 			newCanvas.style.cssText = `background: #003; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0;
  1482. 				z-index: 1;`;
  1483. 			game.canvas = newCanvas;
  1484. 			(document.querySelector('body div') ?? document.body).appendChild(newCanvas);
  1485.  
  1486. 			// leave the old canvas so the old client can actually run
  1487. 			oldCanvas.style.display = 'none';
  1488.  
  1489. 			// forward macro inputs from the canvas to the old one - this is for sigmod mouse button controls
  1490. 			newCanvas.addEventListener('mousedown', e => oldCanvas.dispatchEvent(new MouseEvent('mousedown', e)));
  1491. 			newCanvas.addEventListener('mouseup', e => oldCanvas.dispatchEvent(new MouseEvent('mouseup', e)));
  1492. 			// forward mouse movements from the old canvas to the window - this is for sigmod keybinds that move
  1493. 			// the mouse
  1494. 			oldCanvas.addEventListener('mousemove', e => dispatchEvent(new MouseEvent('mousemove', e)));
  1495.  
  1496. 			const gl = aux.require(
  1497. 				newCanvas.getContext('webgl2', { alpha: false, antialias: false, depth: false }),
  1498. 				'Couldn\'t get WebGL2 context. Possible causes:\r\n' +
  1499. 				'- Maybe GPU/Hardware acceleration needs to be enabled in your browser settings; \r\n' +
  1500. 				'- Maybe your browser is just acting weird and it might fix itself after a restart; \r\n' +
  1501. 				'- Maybe your GPU drivers are exceptionally old.',
  1502. 			);
  1503.  
  1504. 			game.gl = gl;
  1505.  
  1506. 			// indicate that we will restore the context
  1507. 			newCanvas.addEventListener('webglcontextlost', e => {
  1508. 				e.preventDefault(); // signal that we want to restore the context
  1509. 			});
  1510. 			newCanvas.addEventListener('webglcontextrestored', () => {
  1511. 				glconf.init();
  1512. 				// cleanup old caches (after render), as we can't do this within glconf.init()
  1513. 				render.resetDatabaseCache();
  1514. 				render.resetTextCache();
  1515. 				render.resetTextureCache();
  1516. 			});
  1517.  
  1518. 			function resize() {
  1519. 				// devicePixelRatio does not have very high precision; it could be 0.800000011920929 for example
  1520. 				newCanvas.width = Math.ceil(innerWidth * (devicePixelRatio - 0.0001));
  1521. 				newCanvas.height = Math.ceil(innerHeight * (devicePixelRatio - 0.0001));
  1522. 				game.gl.viewport(0, 0, newCanvas.width, newCanvas.height);
  1523. 			}
  1524.  
  1525. 			addEventListener('resize', resize);
  1526. 			resize();
  1527.  
  1528. 			return game;
  1529. 		})();
  1530.  
  1531. 		ui.stats = (() => {
  1532. 			const container = document.createElement('div');
  1533. 			container.style.cssText = 'position: fixed; top: 10px; left: 10px; width: 400px; height: fit-content; \
  1534. 				user-select: none; z-index: 2; transform-origin: top left; font-family: Ubuntu;';
  1535. 			document.body.appendChild(container);
  1536.  
  1537. 			const score = document.createElement('div');
  1538. 			score.style.cssText = 'font-size: 30px; color: #fff; line-height: 1.0;';
  1539. 			container.appendChild(score);
  1540.  
  1541. 			const measures = document.createElement('div');
  1542. 			measures.style.cssText = 'font-size: 20px; color: #fff; line-height: 1.1;';
  1543. 			container.appendChild(measures);
  1544.  
  1545. 			const misc = document.createElement('div');
  1546. 			// white-space: pre; allows using \r\n to insert line breaks
  1547. 			misc.style.cssText = 'font-size: 14px; color: #fff; white-space: pre; line-height: 1.1; opacity: 0.5;';
  1548. 			container.appendChild(misc);
  1549.  
  1550. 			/** @param {symbol} view */
  1551. 			const update = view => {
  1552. 				const fontFamily = `"${sigmod.settings.font || 'Ubuntu'}", Ubuntu`;
  1553. 				if (container.style.fontFamily !== fontFamily) container.style.fontFamily = fontFamily;
  1554.  
  1555. 				const color = aux.settings.darkTheme ? '#fff' : '#000';
  1556. 				score.style.color = color;
  1557. 				measures.style.color = color;
  1558. 				misc.style.color = color;
  1559.  
  1560. 				score.style.fontWeight = measures.style.fontWeight = settings.boldUi ? 'bold' : 'normal';
  1561. 				measures.style.opacity = settings.showStats ? '1' : '0.5';
  1562. 				misc.style.opacity = settings.showStats ? '0.5' : '0';
  1563.  
  1564. 				const scoreVal = world.score(world.selected);
  1565. 				const multiplier = (typeof aux.userData?.boost === 'number' && aux.userData.boost > Date.now()) ? 2 : 1;
  1566. 				if (scoreVal > world.stats.highestScore) world.stats.highestScore = scoreVal;
  1567. 				let scoreHtml;
  1568. 				if (scoreVal <= 0) scoreHtml = '';
  1569. 				else if (settings.separateBoost) {
  1570. 					scoreHtml = `Score: ${Math.floor(scoreVal)}`;
  1571. 					if (multiplier > 1) scoreHtml += ` <span style="color: #fc6;">(X${multiplier})</span>`;
  1572. 				} else {
  1573. 					scoreHtml = 'Score: ' + Math.floor(scoreVal * multiplier);
  1574. 				}
  1575. 				score.innerHTML = scoreHtml;
  1576.  
  1577. 				const con = net.connections.get(view);
  1578. 				let measuresText = `${Math.floor(render.fps)} FPS`;
  1579. 				if (con?.latency !== undefined) {
  1580. 					measuresText += ` ${con.latency === -1 ? '????' : Math.floor(con.latency)}ms`;
  1581. 					const spectateCon = net.connections.get(world.viewId.spectate);
  1582. 					if (settings.spectatorLatency && spectateCon?.latency !== undefined) {
  1583. 						measuresText
  1584. 							+= ` (${spectateCon.latency === -1 ? '????' : Math.floor(spectateCon.latency)}ms)`;
  1585. 					}
  1586. 					measuresText += ' ping';
  1587. 				}
  1588. 				measures.textContent = measuresText;
  1589. 			};
  1590.  
  1591. 			/** @param {object | undefined} stats */
  1592. 			const updateStats = (stats) => {
  1593. 				if (!stats) {
  1594. 					misc.textContent = '';
  1595. 					return;
  1596. 				}
  1597.  
  1598. 				let uptime;
  1599. 				if (stats.uptime < 60) {
  1600. 					uptime = Math.floor(stats.uptime) + 's';
  1601. 				} else {
  1602. 					uptime = Math.floor(stats.uptime / 60 % 60) + 'min';
  1603. 					if (stats.uptime >= 60 * 60)
  1604. 						uptime = Math.floor(stats.uptime / 60 / 60 % 24) + 'hr ' + uptime;
  1605. 					if (stats.uptime >= 24 * 60 * 60)
  1606. 						uptime = Math.floor(stats.uptime / 24 / 60 / 60 % 60) + 'd ' + uptime;
  1607. 				}
  1608.  
  1609. 				misc.textContent = [
  1610. 					`${stats.name} (${stats.gamemode})`,
  1611. 					`${stats.external} / ${stats.limit} players`,
  1612. 					// bots do not count towards .playing
  1613. 					`${stats.playing} playing` + (stats.internal > 0 ? ` + ${stats.internal} bots` : ''),
  1614. 					`${stats.spectating} spectating`,
  1615. 					`${(stats.loadTime / 40 * 100).toFixed(1)}% load @ ${uptime}`,
  1616. 				].join('\r\n');
  1617. 			};
  1618.  
  1619. 			/** @type {object | undefined} */
  1620. 			let lastStats;
  1621. 			setInterval(() => { // update as frequently as possible
  1622. 				const currentStats = world.views.get(world.selected)?.stats;
  1623. 				if (currentStats !== lastStats) updateStats(lastStats = currentStats);
  1624. 			});
  1625.  
  1626. 			return { update };
  1627. 		})();
  1628.  
  1629. 		ui.leaderboard = (() => {
  1630. 			const container = document.createElement('div');
  1631. 			container.style.cssText = 'position: fixed; top: 10px; right: 10px; width: 200px; height: fit-content; \
  1632. 				user-select: none; z-index: 2; background: #0006; padding: 15px 5px; transform-origin: top right; \
  1633. 				display: none;';
  1634. 			document.body.appendChild(container);
  1635.  
  1636. 			const title = document.createElement('div');
  1637. 			title.style.cssText = 'font-family: Ubuntu; font-size: 30px; color: #fff; text-align: center; width: 100%;';
  1638. 			title.textContent = 'Leaderboard';
  1639. 			container.appendChild(title);
  1640.  
  1641. 			const linesContainer = document.createElement('div');
  1642. 			linesContainer.style.cssText = `font-family: Ubuntu; font-size: 20px; line-height: 1.2; width: 100%;
  1643. 				height: fit-content; text-align: ${settings.yx ? 'right' : 'center'}; white-space: pre; overflow: hidden;`;
  1644. 			container.appendChild(linesContainer);
  1645.  
  1646. 			/** @type {HTMLDivElement[]} */
  1647. 			const lines = [];
  1648. 			/** @param {{ me: boolean, name: string, sub: boolean, place: number | undefined }[]} lb */
  1649. 			function update(lb) {
  1650. 				const fontFamily = `"${sigmod.settings.font || 'Ubuntu'}", Ubuntu`;
  1651. 				if (linesContainer.style.fontFamily !== fontFamily)
  1652. 					linesContainer.style.fontFamily = title.style.fontFamily = fontFamily;
  1653.  
  1654. 				const friends = /** @type {any} */ (window).sigmod?.friend_names;
  1655. 				const friendSettings = /** @type {any} */ (window).sigmod?.friends_settings;
  1656. 				lb.forEach((entry, i) => {
  1657. 					let line = lines[i];
  1658. 					if (!line) {
  1659. 						line = document.createElement('div');
  1660. 						line.style.display = 'none';
  1661. 						linesContainer.appendChild(line);
  1662. 						lines.push(line);
  1663. 					}
  1664.  
  1665. 					line.style.display = 'block';
  1666. 					line.textContent = `${entry.place ?? i + 1}. ${entry.name || 'An unnamed cell'}`;
  1667. 					if (entry.me) line.style.color = '#faa';
  1668. 					else if (friends instanceof Set && friends.has(entry.name) && friendSettings?.highlight_friends)
  1669. 						line.style.color = friendSettings.highlight_color;
  1670. 					else if (entry.sub) line.style.color = '#ffc826';
  1671. 					else line.style.color = '#fff';
  1672. 				});
  1673.  
  1674. 				for (let i = lb.length; i < lines.length; ++i)
  1675. 					lines[i].style.display = 'none';
  1676.  
  1677. 				container.style.display = lb.length > 0 ? '' : 'none';
  1678. 				container.style.fontWeight = settings.boldUi ? 'bold' : 'normal';
  1679. 			}
  1680.  
  1681. 			/** @type {object | undefined} */
  1682. 			let lastLb;
  1683. 			setInterval(() => { // update leaderboard frequently
  1684. 				const currentLb = world.views.get(world.selected)?.leaderboard;
  1685. 				if (currentLb !== lastLb) update((lastLb = currentLb) ?? []);
  1686. 			});
  1687. 		})();
  1688.  
  1689. 		/** @type {HTMLElement} */
  1690. 		const mainMenu = aux.require(
  1691. 			document.querySelector('#__line1')?.parentElement,
  1692. 			'Can\'t find the main menu UI. Try reloading the page?',
  1693. 		);
  1694.  
  1695. 		/** @type {HTMLElement} */
  1696. 		const statsContainer = aux.require(
  1697. 			document.querySelector('#__line2'),
  1698. 			'Can\'t find the death screen UI. Try reloading the page?',
  1699. 		);
  1700.  
  1701. 		/** @type {HTMLElement} */
  1702. 		const continueButton = aux.require(
  1703. 			document.querySelector('#continue_button'),
  1704. 			'Can\'t find the continue button (on death). Try reloading the page?',
  1705. 		);
  1706.  
  1707. 		/** @type {HTMLElement | null} */
  1708. 		const menuLinks = document.querySelector('#menu-links');
  1709. 		/** @type {HTMLElement | null} */
  1710. 		const overlay = document.querySelector('#overlays');
  1711.  
  1712. 		// sigmod uses this to detect if the menu is closed or not, otherwise this is unnecessary
  1713. 		/** @type {HTMLElement | null} */
  1714. 		const menuWrapper = document.querySelector('#menu-wrapper');
  1715.  
  1716. 		let escOverlayVisible = true;
  1717. 		/**
  1718. 		 * @param {boolean} [show]
  1719. 		 */
  1720. 		ui.toggleEscOverlay = show => {
  1721. 			escOverlayVisible = show ?? !escOverlayVisible;
  1722. 			if (escOverlayVisible) {
  1723. 				mainMenu.style.display = '';
  1724. 				if (overlay) overlay.style.display = '';
  1725. 				if (menuLinks) menuLinks.style.display = '';
  1726. 				if (menuWrapper) menuWrapper.style.display = '';
  1727.  
  1728. 				ui.deathScreen.hide();
  1729. 			} else {
  1730. 				mainMenu.style.display = 'none';
  1731. 				if (overlay) overlay.style.display = 'none';
  1732. 				if (menuLinks) menuLinks.style.display = 'none';
  1733. 				if (menuWrapper) menuWrapper.style.display = 'none';
  1734. 			}
  1735.  
  1736. 			ui.captcha.reposition();
  1737. 		};
  1738.  
  1739. 		ui.escOverlayVisible = () => escOverlayVisible;
  1740.  
  1741. 		ui.deathScreen = (() => {
  1742. 			const deathScreen = {};
  1743. 			let visible = false;
  1744.  
  1745. 			continueButton.addEventListener('click', () => {
  1746. 				ui.toggleEscOverlay(true);
  1747. 				visible = false;
  1748. 			});
  1749.  
  1750. 			/** @type {HTMLElement | null} */
  1751. 			const bonus = document.querySelector('#menu__bonus');
  1752.  
  1753. 			deathScreen.check = () => {
  1754. 				if (world.stats.spawnedAt !== undefined && !world.alive()) deathScreen.show();
  1755. 			};
  1756.  
  1757. 			deathScreen.show = () => {
  1758. 				const boost = typeof aux.userData?.boost === 'number' && aux.userData.boost > Date.now();
  1759. 				if (bonus) {
  1760. 					if (boost) {
  1761. 						bonus.style.display = '';
  1762. 						bonus.textContent = `Bonus score: ${Math.round(world.stats.highestScore)}`;
  1763. 					} else {
  1764. 						bonus.style.display = 'none';
  1765. 					}
  1766. 				}
  1767.  
  1768. 				const foodEatenElement = document.querySelector('#food_eaten');
  1769. 				if (foodEatenElement)
  1770. 					foodEatenElement.textContent = world.stats.foodEaten.toString();
  1771.  
  1772. 				const highestMassElement = document.querySelector('#highest_mass');
  1773. 				if (highestMassElement)
  1774. 					highestMassElement.textContent = (Math.round(world.stats.highestScore) * (boost ? 2 : 1)).toString();
  1775.  
  1776. 				const highestPositionElement = document.querySelector('#top_leaderboard_position');
  1777. 				if (highestPositionElement)
  1778. 					highestPositionElement.textContent = world.stats.highestPosition.toString();
  1779.  
  1780. 				const timeAliveElement = document.querySelector('#time_alive');
  1781. 				if (timeAliveElement) {
  1782. 					const time = (performance.now() - (world.stats.spawnedAt ?? 0)) / 1000;
  1783. 					const hours = Math.floor(time / 60 / 60);
  1784. 					const mins = Math.floor(time / 60 % 60);
  1785. 					const seconds = Math.floor(time % 60);
  1786.  
  1787. 					timeAliveElement.textContent = `${hours ? hours + ' h' : ''} ${mins ? mins + ' m' : ''} `
  1788. 						+ `${seconds ? seconds + ' s' : ''}`;
  1789. 				}
  1790.  
  1791. 				statsContainer.classList.remove('line--hidden');
  1792. 				visible = true;
  1793. 				ui.toggleEscOverlay(false);
  1794. 				if (overlay) overlay.style.display = '';
  1795. 				world.stats = { foodEaten: 0, highestPosition: 200, highestScore: 0, spawnedAt: undefined };
  1796.  
  1797. 				ui.captcha.reposition();
  1798. 			};
  1799.  
  1800. 			deathScreen.hide = () => {
  1801. 				statsContainer?.classList.add('line--hidden');
  1802. 				visible = false;
  1803. 				// no need for ui.captcha.reposition() because the esc overlay will always be shown on deathScreen.hide
  1804. 				// ads are managed by the game client
  1805. 			};
  1806.  
  1807. 			deathScreen.visible = () => visible;
  1808.  
  1809. 			return deathScreen;
  1810. 		})();
  1811.  
  1812. 		ui.minimap = (() => {
  1813. 			const canvas = document.createElement('canvas');
  1814. 			canvas.style.cssText = 'position: fixed; bottom: 0; right: 0; background: #0006; width: 200px; \
  1815. 				height: 200px; z-index: 2; user-select: none;';
  1816. 			canvas.width = canvas.height = 200;
  1817. 			document.body.appendChild(canvas);
  1818.  
  1819. 			const ctx = aux.require(
  1820. 				canvas.getContext('2d', { willReadFrequently: false }),
  1821. 				'Unable to get 2D context for the minimap. This is probably your browser being dumb, maybe reload ' +
  1822. 				'the page?',
  1823. 			);
  1824.  
  1825. 			return { canvas, ctx };
  1826. 		})();
  1827.  
  1828. 		ui.chat = (() => {
  1829. 			const chat = {};
  1830.  
  1831. 			const block = aux.require(
  1832. 				document.querySelector('#chat_block'),
  1833. 				'Can\'t find the chat UI. Try reloading the page?',
  1834. 			);
  1835.  
  1836. 			/**
  1837. 			 * @param {ParentNode} root
  1838. 			 * @param {string} selector
  1839. 			 */
  1840. 			function clone(root, selector) {
  1841. 				/** @type {HTMLElement} */
  1842. 				const old = aux.require(
  1843. 					root.querySelector(selector),
  1844. 					`Can't find this chat element: ${selector}. Try reloading the page?`,
  1845. 				);
  1846.  
  1847. 				const el = /** @type {HTMLElement} */ (old.cloneNode(true));
  1848. 				el.id = '';
  1849. 				old.style.display = 'none';
  1850. 				old.insertAdjacentElement('afterend', el);
  1851.  
  1852. 				return el;
  1853. 			}
  1854.  
  1855. 			// can't just replace the chat box - otherwise sigmod can't hide it - so we make its children invisible
  1856. 			// elements grabbed with clone() are only styled by their class, not id
  1857. 			const toggle = clone(document, '#chat_vsbltyBtn');
  1858. 			const scrollbar = clone(document, '#chat_scrollbar');
  1859. 			const thumb = clone(scrollbar, '#chat_thumb');
  1860.  
  1861. 			const input = chat.input = /** @type {HTMLInputElement} */ (aux.require(
  1862. 				document.querySelector('#chat_textbox'),
  1863. 				'Can\'t find the chat textbox. Try reloading the page?',
  1864. 			));
  1865.  
  1866. 			// allow zooming in/out on trackpad without moving the UI
  1867. 			input.style.position = 'fixed';
  1868. 			toggle.style.position = 'fixed';
  1869. 			scrollbar.style.position = 'fixed';
  1870.  
  1871. 			const list = document.createElement('div');
  1872. 			list.style.cssText = 'width: 400px; height: 182px; position: fixed; bottom: 54px; left: 46px; \
  1873. 				overflow: hidden; user-select: none; z-index: 301;';
  1874. 			block.appendChild(list);
  1875.  
  1876. 			let toggled = true;
  1877. 			toggle.style.borderBottomLeftRadius = '10px'; // a bug fix :p
  1878. 			toggle.addEventListener('click', () => {
  1879. 				toggled = !toggled;
  1880. 				input.style.display = toggled ? '' : 'none';
  1881. 				scrollbar.style.display = toggled ? 'block' : 'none';
  1882. 				list.style.display = toggled ? '' : 'none';
  1883.  
  1884. 				if (toggled) {
  1885. 					toggle.style.borderTopRightRadius = toggle.style.borderBottomRightRadius = '';
  1886. 					toggle.style.opacity = '';
  1887. 				} else {
  1888. 					toggle.style.borderTopRightRadius = toggle.style.borderBottomRightRadius = '10px';
  1889. 					toggle.style.opacity = '0.25';
  1890. 				}
  1891. 			});
  1892.  
  1893. 			scrollbar.style.display = 'block';
  1894. 			let scrollTop = 0; // keep a float here, because list.scrollTop is always casted to an int
  1895. 			let thumbHeight = 1;
  1896. 			let lastY;
  1897. 			thumb.style.height = '182px';
  1898.  
  1899. 			function updateThumb() {
  1900. 				thumb.style.bottom = (1 - list.scrollTop / (list.scrollHeight - 182)) * (182 - thumbHeight) + 'px';
  1901. 			}
  1902.  
  1903. 			function scroll() {
  1904. 				if (scrollTop >= list.scrollHeight - 182 - 40) {
  1905. 					// close to bottom, snap downwards
  1906. 					list.scrollTop = scrollTop = list.scrollHeight - 182;
  1907. 				}
  1908.  
  1909. 				thumbHeight = Math.min(Math.max(182 / list.scrollHeight, 0.1), 1) * 182;
  1910. 				thumb.style.height = thumbHeight + 'px';
  1911. 				updateThumb();
  1912. 			}
  1913.  
  1914. 			let scrolling = false;
  1915. 			thumb.addEventListener('mousedown', () => void (scrolling = true));
  1916. 			addEventListener('mouseup', () => void (scrolling = false));
  1917. 			addEventListener('mousemove', e => {
  1918. 				const deltaY = e.clientY - lastY;
  1919. 				lastY = e.clientY;
  1920.  
  1921. 				if (!scrolling) return;
  1922. 				e.preventDefault();
  1923.  
  1924. 				if (lastY === undefined) {
  1925. 					lastY = e.clientY;
  1926. 					return;
  1927. 				}
  1928.  
  1929. 				list.scrollTop = scrollTop = Math.min(Math.max(
  1930. 					scrollTop + deltaY * list.scrollHeight / 182, 0), list.scrollHeight - 182);
  1931. 				updateThumb();
  1932. 			});
  1933.  
  1934. 			let lastWasBarrier = true; // init to true, so we don't print a barrier as the first ever message (ugly)
  1935. 			/**
  1936. 			 * @param {string} authorName
  1937. 			 * @param {[number, number, number, number]} rgb
  1938. 			 * @param {string} text
  1939. 			 * @param {boolean} server
  1940. 			 */
  1941. 			chat.add = (authorName, rgb, text, server) => {
  1942. 				lastWasBarrier = false;
  1943.  
  1944. 				const container = document.createElement('div');
  1945. 				const author = document.createElement('span');
  1946. 				author.style.cssText = `color: ${aux.rgba2hex(...rgb)}; padding-right: 0.75em;`;
  1947. 				author.textContent = aux.trim(authorName);
  1948. 				container.appendChild(author);
  1949.  
  1950. 				const msg = document.createElement('span');
  1951. 				if (server) msg.style.cssText = `color: ${aux.rgba2hex(...rgb)}`;
  1952. 				msg.textContent = server ? text : aux.trim(text); // /help text can get cut off
  1953. 				container.appendChild(msg);
  1954.  
  1955. 				while (list.children.length > 100)
  1956. 					list.firstChild?.remove();
  1957.  
  1958. 				list.appendChild(container);
  1959.  
  1960. 				scroll();
  1961. 			};
  1962.  
  1963. 			chat.barrier = () => {
  1964. 				if (lastWasBarrier) return;
  1965. 				lastWasBarrier = true;
  1966.  
  1967. 				const barrier = document.createElement('div');
  1968. 				barrier.style.cssText = 'width: calc(100% - 20px); height: 1px; background: #8888; margin: 10px;';
  1969. 				list.appendChild(barrier);
  1970.  
  1971. 				scroll();
  1972. 			};
  1973.  
  1974. 			chat.matchTheme = () => {
  1975. 				list.style.color = aux.settings.darkTheme ? '#fffc' : '#000c';
  1976. 				// make author names darker in light theme
  1977. 				list.style.filter = aux.settings.darkTheme ? '' : 'brightness(75%)';
  1978.  
  1979. 				toggle.style.backgroundColor = settings.theme[3] ? aux.rgba2hex6(...settings.theme) : '#e37955';
  1980. 				thumb.style.backgroundColor = settings.theme[3] ? aux.rgba2hex6(...settings.theme) : '#fc7200';
  1981. 			};
  1982.  
  1983. 			setInterval(() => chat.matchTheme(), 500);
  1984.  
  1985. 			return chat;
  1986. 		})();
  1987.  
  1988. 		/** @param {string} msg */
  1989. 		ui.error = msg => {
  1990. 			const modal = /** @type {HTMLElement | null} */ (document.querySelector('#errormodal'));
  1991. 			if (modal) modal.style.display = 'block';
  1992. 			const desc = document.querySelector('#errormodal p');
  1993. 			if (desc) desc.innerHTML = msg;
  1994. 		};
  1995.  
  1996. 		ui.captcha = (() => {
  1997. 			const captcha = {};
  1998.  
  1999. 			const modeBtns = /** @type {HTMLElement | null} */ (document.querySelector('.mode-btns'));
  2000. 			/** @type {HTMLButtonElement} */
  2001. 			const play = aux.require(document.querySelector('button#play-btn'),
  2002. 			'Can\'t find the play button. Try reloading the page?');
  2003. 			/** @type {HTMLButtonElement} */
  2004. 			const spectate = aux.require(document.querySelector('button#spectate-btn'),
  2005. 				'Can\'t find the spectate button. Try reloading the page?');
  2006.  
  2007. 			/** @type {((grecaptcha: any) => void) | undefined} */
  2008. 			let grecaptchaResolve;
  2009. 			/** @type {Promise<any>} */
  2010. 			const grecaptcha = new Promise(r => grecaptchaResolve = r);
  2011. 			/** @type {((turnstile: any) => void) | undefined} */
  2012. 			let turnstileResolve;
  2013. 			/** @type {Promise<any>} */
  2014. 			const turnstile = new Promise(r => turnstileResolve = r);
  2015. 			let CAPTCHA2, CAPTCHA3, TURNSTILE;
  2016.  
  2017. 			let readyCheck;
  2018. 			readyCheck = setInterval(() => {
  2019. 				// it's possible that recaptcha or turnstile may be removed in the future, so we be redundant to stay
  2020. 				// safe
  2021. 				if (grecaptchaResolve) {
  2022. 					let grecaptchaReal;
  2023. 					({ grecaptcha: grecaptchaReal, CAPTCHA2, CAPTCHA3 } = /** @type {any} */ (window));
  2024. 					if (grecaptchaReal?.ready && CAPTCHA2 && CAPTCHA3) {
  2025. 						const resolve = grecaptchaResolve;
  2026. 						grecaptchaResolve = undefined;
  2027.  
  2028. 						grecaptchaReal.ready(() => {
  2029. 							// prevent game.js from using grecaptcha and messing things up
  2030. 							let { grecaptcha: grecaptchaNew } = /** @type {any} */ (window);
  2031. 							/** @type {any} */ (window).grecaptcha = {
  2032. 								execute: () => {},
  2033. 								ready: () => {},
  2034. 								render: () => {},
  2035. 								reset: () => {},
  2036. 							};
  2037. 							resolve(grecaptchaNew);
  2038. 						});
  2039. 					}
  2040. 				}
  2041.  
  2042. 				if (turnstileResolve) {
  2043. 					let turnstileReal;
  2044. 					({ turnstile: turnstileReal, TURNSTILE } = /** @type {any} */ (window));
  2045. 					if (turnstileReal?.ready && TURNSTILE) {
  2046. 						const resolve = turnstileResolve;
  2047. 						turnstileResolve = undefined;
  2048.  
  2049. 						// turnstile.ready not needed
  2050. 						// prevent game.js from using turnstile and messing things up
  2051. 						/** @type {any} */ (window).turnstile = {
  2052. 							execute: () => {},
  2053. 							ready: () => {},
  2054. 							render: () => {},
  2055. 							reset: () => {},
  2056. 						};
  2057. 						resolve(turnstileReal);
  2058. 					}
  2059. 				}
  2060.  
  2061. 				if (!grecaptchaResolve && !turnstileResolve)
  2062. 					clearInterval(readyCheck);
  2063. 			}, 50);
  2064.  
  2065. 			/**
  2066. 			 * @typedef {{
  2067. 			 * 	cb: ((token: string) => void) | undefined,
  2068. 			 * 	handle: any,
  2069. 			 * 	mount: HTMLElement,
  2070. 			 * 	reposition: () => boolean,
  2071. 			 * 	type: string,
  2072. 			 * }} CaptchaInstance
  2073. 			 * @type {Map<symbol, CaptchaInstance>}
  2074. 			 */
  2075. 			const captchas = new Map();
  2076.  
  2077. 			/** @param {symbol} view */
  2078. 			captcha.remove = view => {
  2079. 				const inst = captchas.get(view);
  2080. 				if (!inst) return;
  2081.  
  2082. 				if (inst.type === 'v2') grecaptcha.then(g => g.reset(inst.handle));
  2083. 				// don't do anything for v3
  2084. 				else if (inst.type === 'turnstile') turnstile.then(t => t.remove(inst.handle));
  2085.  
  2086. 				inst.cb = () => {}; // ensure the token gets voided if solved
  2087. 				inst.mount.remove();
  2088. 				captchas.delete(view);
  2089. 				captcha.reposition(); // ensure play/spectate buttons reappear
  2090. 			};
  2091.  
  2092. 			/**
  2093. 			 * @param {symbol} view
  2094. 			 * @param {string} type
  2095. 			 * @param {(token: string) => void} cb
  2096. 			 */
  2097. 			captcha.request = (view, type, cb) => {
  2098. 				const oldInst = captchas.get(view);
  2099. 				if (oldInst?.type === type && oldInst.cb) {
  2100. 					oldInst.cb = cb;
  2101. 					return;
  2102. 				}
  2103.  
  2104. 				captcha.remove(view);
  2105.  
  2106. 				const mount = document.createElement('div');
  2107. 				document.body.appendChild(mount);
  2108. 				const reposition = () => {
  2109. 					let replacesModeButtons = false;
  2110. 					if (view === world.viewId.spectate) {
  2111. 						mount.style.cssText = 'position: fixed; bottom: 10px; left: 50vw; transform: translateX(-50%); \
  2112. 							z-index: 1000;';
  2113. 					} else if (view !== world.selected || ui.deathScreen.visible()) {
  2114. 						mount.style.cssText = 'opacity: 0;'; // don't use display: none;
  2115. 					} else if (escOverlayVisible && modeBtns) {
  2116. 						const place = modeBtns?.getBoundingClientRect();
  2117. 						mount.style.cssText = `position: fixed; top: ${place ? place.top + 'px' : '50vh'};
  2118. 							left: ${place ? (place.left + place.width / 2) + 'px' : '50vw'};
  2119. 							transform: translate(-50%, ${place ? '0%' : '-50%'}); z-index: 1000;`;
  2120. 						replacesModeButtons = type !== 'v3'; // v3 is invisible, so it shouldn't hide the play buttons
  2121. 					} else {
  2122. 						mount.style.cssText = `position: fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%);
  2123. 							z-index: 1000;`;
  2124. 					}
  2125.  
  2126. 					return replacesModeButtons;
  2127. 				};
  2128.  
  2129. 				/** @type {CaptchaInstance} */
  2130. 				const inst = { cb, handle: undefined, mount, reposition, type };
  2131. 				captchas.set(view, inst);
  2132. 				captcha.reposition();
  2133.  
  2134. 				if (type === 'v2') {
  2135. 					grecaptcha.then(g => {
  2136. 						inst.handle = g.render(mount, {
  2137. 							callback: token => {
  2138. 								inst.cb?.(token);
  2139. 								inst.cb = undefined;
  2140. 							},
  2141. 							'error-callback': () => setTimeout(() => g.reset(inst.handle), 1000),
  2142. 							'expired-callback': () => setTimeout(() => g.reset(inst.handle), 1000),
  2143. 							sitekey: CAPTCHA2,
  2144. 							theme: sigmod.exists ? 'dark' : 'light',
  2145. 						});
  2146. 					});
  2147. 				} else if (type === 'v3') {
  2148. 					grecaptcha.then(g => {
  2149. 						g.execute(CAPTCHA3).then(token => {
  2150. 							inst.cb?.(token);
  2151. 							inst.cb = undefined;
  2152. 						});
  2153. 					});
  2154. 				} else if (type === 'turnstile') {
  2155. 					turnstile.then(t => {
  2156. 						inst.handle = t.render(mount, {
  2157. 							callback: token => {
  2158. 								inst.cb?.(token);
  2159. 								inst.cb = undefined;
  2160. 							},
  2161. 							'error-callback': () => setTimeout(() => t.reset(inst.handle), 1000),
  2162. 							'expired-callback': () => setTimeout(() => t.reset(inst.handle), 1000),
  2163. 							sitekey: TURNSTILE,
  2164. 							theme: sigmod.exists ? 'dark' : 'light',
  2165. 						});
  2166. 					});
  2167. 				}
  2168. 			};
  2169.  
  2170. 			captcha.reposition = () => {
  2171. 				let replacingModeButtons = false;
  2172. 				for (const inst of captchas.values()) replacingModeButtons = inst.reposition() || replacingModeButtons;
  2173.  
  2174. 				play.style.display = spectate.style.display = replacingModeButtons ? 'none' : '';
  2175. 			};
  2176.  
  2177. 			addEventListener('resize', () => captcha.reposition());
  2178.  
  2179. 			return captcha;
  2180. 		})();
  2181.  
  2182. 		ui.linesplit = (() => {
  2183. 			const linesplit = {};
  2184.  
  2185. 			const overlay = document.createElement('div');
  2186. 			overlay.style.cssText = `position: fixed; bottom: 10px; left: 50vw; transform: translateX(-50%);
  2187. 				font: bold 24px Ubuntu; color: #fffc; z-index: 999;`;
  2188. 			document.body.appendChild(overlay);
  2189.  
  2190. 			linesplit.update = () => {
  2191. 				const inputs = input.views.get(world.selected);
  2192. 				if (!inputs?.lock) {
  2193. 					overlay.style.display = 'none';
  2194. 					return;
  2195. 				}
  2196.  
  2197. 				overlay.style.color = aux.settings.darkTheme ? '#fffc' : '#000c';
  2198.  
  2199. 				if (inputs.lock.type === 'horizontal') {
  2200. 					// left-right arrow svg
  2201. 					overlay.innerHTML = `
  2202. 						<svg viewBox="-6 0 36 24" style="width: 36px; height: 24px; vertical-align: bottom;">
  2203.     						<path stroke="currentColor" stroke-width="3" fill="none"
  2204. 								d="M22,12 L2,12 M6,8 L2,12 L6,16 M18,8 L22,12 L18,16"></path>
  2205.     					</svg>(${sigmod.settings?.horizontalLineKey?.toUpperCase()})`;
  2206. 					overlay.style.display = '';
  2207. 				} else if (inputs.lock.type === 'vertical') {
  2208. 					// up-down arrow svg
  2209. 					overlay.innerHTML = `
  2210. 						<svg viewBox="0 0 24 24" style="width: 24px; height: 24px; vertical-align: bottom;">
  2211.     						<path stroke="currentColor" stroke-width="3" fill="none"
  2212. 								d="M12,22 L12,2 M8,6 L12,2 L16,6 M8,18 L12,22 L16,18"></path>
  2213.     					</svg>(${sigmod.settings?.verticalLineKey?.toUpperCase()})`;
  2214. 					overlay.style.display = '';
  2215. 				} else if (inputs.lock.type === 'fixed') {
  2216. 					// left-right + up-down arrow svg
  2217. 					overlay.innerHTML = `
  2218. 						<svg viewBox="-6 0 36 24" style="width: 36px; height: 24px; vertical-align: bottom;">
  2219.     						<path stroke="currentColor" stroke-width="3" fill="none"
  2220. 								d="M22,12 L2,12 M6,8 L2,12 L6,16 M18,8 L22,12 L18,16
  2221. 								M12,22 L12,2 M8,6 L12,2 L16,6 M8,18 L12,22 L16,18"></path>
  2222.     					</svg>(${sigmod.settings?.fixedLineKey?.toUpperCase()})`;
  2223. 					overlay.style.display = '';
  2224. 				}
  2225. 			};
  2226.  
  2227. 			return linesplit;
  2228. 		})();
  2229.  
  2230. 		const style = document.createElement('style');
  2231. 		style.innerHTML = `
  2232. 			/* make sure nothing gets cut off on the center menu panel */
  2233. 			#menu-wrapper > .menu-center { height: fit-content !important; }
  2234. 			/* hide the outline that sigmod puts on the minimap (i don't like it) */
  2235. 			.minimap { border: none !important; box-shadow: none !important; }
  2236. 		`;
  2237. 		document.head.appendChild(style);
  2238.  
  2239. 		return ui;
  2240. 	})();
  2241.  
  2242.  
  2243.  
  2244. 	///////////////////////////
  2245. 	// Setup World Variables //
  2246. 	///////////////////////////
  2247. 	/**
  2248. 	 * @typedef {{
  2249. 	 * 	nx: number, ny: number, nr: number,
  2250. 	 * 	born: number, deadAt: number | undefined, deadTo: number,
  2251. 	 * }} CellFrameWritable
  2252. 	 * @typedef {Readonly<CellFrameWritable>} CellFrame
  2253. 	 * @typedef {{
  2254. 	 * 	ox: number, oy: number, or: number,
  2255. 	 * 	jr: number, a: number, updated: number,
  2256. 	 * }} CellInterpolation
  2257. 	 * @typedef {{
  2258. 	 *  name: string, skin: string, sub: boolean, clan: string,
  2259. 	 * 	rgb: [number, number, number],
  2260. 	 * 	jagged: boolean, eject: boolean,
  2261. 	 * }} CellDescription
  2262. 	 * @typedef {CellInterpolation & CellDescription & { frames: CellFrame[] }} CellRecord
  2263. 	 * @typedef {{
  2264. 	 * 	id: number,
  2265. 	 * 	merged: (CellFrameWritable & CellInterpolation) | undefined,
  2266. 	 * 	model: CellFrame | undefined,
  2267. 	 * 	views: Map<symbol, CellRecord>,
  2268. 	 * }} Cell
  2269. 	 * @typedef {{
  2270. 	 * 	border: { l: number, r: number, t: number, b: number } | undefined,
  2271. 	 * 	camera: {
  2272. 	 * 		x: number, tx: number,
  2273. 	 * 		y: number, ty: number,
  2274. 	 * 		scale: number, tscale: number,
  2275. 	 * 		merged: boolean,
  2276. 	 * 		updated: number,
  2277. 	 * 	},
  2278. 	 * 	leaderboard: { name: string, me: boolean, sub: boolean, place: number | undefined }[],
  2279. 	 * 	owned: Set<number>,
  2280. 	 * 	spawned: number,
  2281. 	 * 	stats: object | undefined,
  2282. 	 * 	used: number,
  2283. 	 * }} Vision
  2284. 	 */
  2285. 	const world = (() => {
  2286. 		const world = {};
  2287.  
  2288. 		// #1 : define cell variables and functions
  2289. 		/** @type {Map<number, Cell>} */
  2290. 		world.cells = new Map();
  2291. 		/** @type {Map<number, Cell>} */
  2292. 		world.pellets = new Map();
  2293. 		world.multis = [Symbol(), Symbol(), Symbol(), Symbol(), Symbol(), Symbol(), Symbol(), Symbol()];
  2294. 		world.viewId = {
  2295. 			primary: world.multis[0],
  2296. 			secondary: world.multis[1],
  2297. 			spectate: Symbol(),
  2298. 		};
  2299. 		world.selected = world.viewId.primary;
  2300. 		/** @type {Map<symbol, Vision>} */
  2301. 		world.views = new Map();
  2302.  
  2303. 		world.alive = () => {
  2304. 			for (const [view, vision] of world.views) {
  2305. 				for (const id of vision.owned) {
  2306. 					const cell = world.cells.get(id);
  2307. 					// if a cell does not exist yet, we treat it as alive
  2308. 					if (!cell) return true;
  2309.  
  2310. 					const frame = cell.views.get(view)?.frames[0];
  2311. 					if (frame?.deadAt === undefined) return true;
  2312. 				}
  2313. 			}
  2314. 			return false;
  2315. 		};
  2316.  
  2317. 		/**
  2318. 		 * @typedef {{ mass: number, scale: number, sumX: number, sumY: number, weight: number }} SingleCamera
  2319. 		 * @param {symbol} view
  2320. 		 * @param {Vision | undefined} vision
  2321. 		 * @param {number} weightExponent
  2322. 		 * @param {number} now
  2323. 		 * @returns {SingleCamera}
  2324. 		 */
  2325. 		world.singleCamera = (view, vision, weightExponent, now) => {
  2326. 			vision ??= world.views.get(view);
  2327. 			if (!vision) return { mass: 0, scale: 1, sumX: 0, sumY: 0, weight: 0 };
  2328.  
  2329. 			let mass = 0;
  2330. 			let r = 0;
  2331. 			let sumX = 0;
  2332. 			let sumY = 0;
  2333. 			let weight = 0;
  2334. 			for (const id of (world.views.get(view)?.owned ?? [])) {
  2335. 				const cell = world.cells.get(id);
  2336. 				/** @type {CellFrame | undefined} */
  2337. 				const frame = world.synchronized ? cell?.merged : cell?.views.get(view)?.frames[0];
  2338. 				/** @type {CellInterpolation | undefined} */
  2339. 				const interp = world.synchronized ? cell?.merged : cell?.views.get(view);
  2340. 				if (!frame || !interp) continue;
  2341. 				// don't include cells owned before respawning
  2342. 				if (frame.born < vision.spawned) continue;
  2343.  
  2344. 				if (settings.cameraMovement === 'instant') {
  2345. 					const xyr = world.xyr(frame, interp, undefined, undefined, false, now);
  2346. 					r += xyr.r * xyr.a;
  2347. 					mass += (xyr.r * xyr.r / 100) * xyr.a;
  2348. 					const cellWeight = xyr.a * (xyr.r ** weightExponent);
  2349. 					sumX += xyr.x * cellWeight;
  2350. 					sumY += xyr.y * cellWeight;
  2351. 					weight += cellWeight;
  2352. 				} else { // settings.cameraMovement === 'default'
  2353. 					if (frame.deadAt !== undefined) continue;
  2354. 					const xyr = world.xyr(frame, interp, undefined, undefined, false, now);
  2355. 					r += frame.nr;
  2356. 					mass += frame.nr * frame.nr / 100;
  2357. 					const cellWeight = frame.nr ** weightExponent;
  2358. 					sumX += xyr.x * cellWeight;
  2359. 					sumY += xyr.y * cellWeight;
  2360. 					weight += cellWeight;
  2361. 				}
  2362. 			}
  2363.  
  2364. 			const scale = Math.min(64 / r, 1) ** 0.4;
  2365. 			return { mass, scale, sumX, sumY, weight };
  2366. 		};
  2367.  
  2368. 		/**
  2369. 		 * @param {number} now
  2370. 		 */
  2371. 		world.cameras = now => {
  2372. 			const weightExponent = settings.camera !== 'default' ? 2 : 0;
  2373.  
  2374. 			// #1 : create disjoint sets of all cameras that are close together
  2375. 			/** @type {Map<symbol, SingleCamera>}>} */
  2376. 			const cameras = new Map();
  2377. 			/** @type {Map<symbol, Set<symbol>>} */
  2378. 			const sets = new Map();
  2379. 			for (const [view, vision] of world.views) {
  2380. 				cameras.set(view, world.singleCamera(view, vision, weightExponent, now));
  2381. 				sets.set(view, new Set([view]));
  2382. 			}
  2383.  
  2384. 			// compute even if tabs won't actually be merged, because the multi outlines must still show
  2385. 			if (settings.multibox || settings.nbox) {
  2386. 				for (const [view, vision] of world.views) {
  2387. 					const set = /** @type {Set<symbol>} */ (sets.get(view));
  2388.  
  2389. 					const camera = /** @type {SingleCamera} */ (cameras.get(view));
  2390. 					if (camera.weight <= 0 || now - vision.used > 20_000) continue; // don't merge with inactive tabs
  2391. 					const x = camera.sumX / camera.weight;
  2392. 					const y = camera.sumY / camera.weight;
  2393. 					const width = 1920 / 2 / camera.scale;
  2394. 					const height = 1080 / 2 / camera.scale;
  2395.  
  2396. 					for (const [otherView, otherVision] of world.views) {
  2397. 						const otherSet = /** @type {Set<symbol>} */ (sets.get(otherView));
  2398. 						if (set === otherSet || now - otherVision.used > 20_000) continue;
  2399.  
  2400. 						const otherCamera = /** @type {SingleCamera} */ (cameras.get(otherView));
  2401. 						if (otherCamera.weight <= 0) continue;
  2402. 						const otherX = otherCamera.sumX / otherCamera.weight;
  2403. 						const otherY = otherCamera.sumY / otherCamera.weight;
  2404. 						const otherWidth = 1920 / 2 / otherCamera.scale;
  2405. 						const otherHeight = 1080 / 2 / otherCamera.scale;
  2406.  
  2407. 						// only merge with tabs if their vision regions are close. expand threshold depending on
  2408. 						// how much mass each tab has (if both tabs are large, allow them to go pretty far)
  2409. 						const threshold = 1000 + Math.min(camera.weight / 100 / 25, otherCamera.weight / 100 / 25);
  2410. 						if (Math.abs(x - otherX) <= width + otherWidth + threshold
  2411. 								&& Math.abs(y - otherY) <= height + otherHeight + threshold) {
  2412. 							// merge disjoint sets
  2413. 							for (const connectedView of otherSet) {
  2414. 								set.add(connectedView);
  2415. 								sets.set(connectedView, set);
  2416. 							}
  2417. 						}
  2418. 					}
  2419. 				}
  2420. 			}
  2421.  
  2422. 			// #2 : calculate and update merged camera positions
  2423. 			/** @type {Set<Set<symbol>>} */
  2424. 			const computed = new Set();
  2425. 			for (const set of sets.values()) {
  2426. 				if (computed.has(set)) continue;
  2427. 				let mass = 0;
  2428. 				let sumX = 0;
  2429. 				let sumY = 0;
  2430. 				let weight = 0;
  2431. 				if (settings.mergeCamera) {
  2432. 					for (const view of set) {
  2433. 						const camera = /** @type {SingleCamera} */ (cameras.get(view));
  2434. 						mass += camera.mass;
  2435. 						sumX += camera.sumX;
  2436. 						sumY += camera.sumY;
  2437. 						weight += camera.weight;
  2438. 					}
  2439. 				}
  2440.  
  2441. 				for (const view of set) {
  2442. 					const vision = /** @type {Vision} */ (world.views.get(view));
  2443.  
  2444. 					if (!settings.mergeCamera) {
  2445. 						({ mass, sumX, sumY, weight } = /** @type {SingleCamera} */ (cameras.get(view)));
  2446. 					}
  2447.  
  2448. 					let xyFactor;
  2449. 					if (weight <= 0) {
  2450. 						xyFactor = 20;
  2451. 					} else if (settings.cameraMovement === 'instant') {
  2452. 						xyFactor = 1;
  2453. 					} else {
  2454. 						// when spawning, move camera quickly (like vanilla), then make it smoother after a bit
  2455. 						const aliveFor = (performance.now() - vision.spawned) / 1000;
  2456. 						const a = Math.min(Math.max((aliveFor - 0.3) / 0.3, 0), 1);
  2457. 						const base = settings.cameraSpawnAnimation ? 2 : 1;
  2458. 						xyFactor = Math.min(settings.cameraSmoothness, base * (1-a) + settings.cameraSmoothness * a);
  2459. 					}
  2460.  
  2461. 					if (weight > 0) {
  2462. 						vision.camera.tx = sumX / weight;
  2463. 						vision.camera.ty = sumY / weight;
  2464. 						let scale;
  2465. 						if (settings.camera === 'default') scale = /** @type {SingleCamera} */ (cameras.get(view)).scale;
  2466. 						else scale = Math.min(64 / Math.sqrt(100 * mass), 1) ** 0.4;
  2467. 						vision.camera.tscale = settings.autoZoom ? scale : 0.25;
  2468. 					}
  2469.  
  2470. 					const dt = (now - vision.camera.updated) / 1000;
  2471. 					vision.camera.x = aux.exponentialEase(vision.camera.x, vision.camera.tx, xyFactor, dt);
  2472. 					vision.camera.y = aux.exponentialEase(vision.camera.y, vision.camera.ty, xyFactor, dt);
  2473. 					vision.camera.scale
  2474. 						= aux.exponentialEase(vision.camera.scale, input.zoom * vision.camera.tscale, 9, dt);
  2475.  
  2476. 					vision.camera.merged = set.size > 1;
  2477. 					vision.camera.updated = now;
  2478. 				}
  2479.  
  2480. 				computed.add(set);
  2481. 			}
  2482. 		};
  2483.  
  2484. 		/** @param {symbol} view */
  2485. 		world.create = view => {
  2486. 			const old = world.views.get(view);
  2487. 			if (old) return old;
  2488.  
  2489. 			const vision = {
  2490. 				border: undefined,
  2491. 				camera: { x: 0, tx: 0, y: 0, ty: 0, scale: 0, tscale: 0, merged: false, updated: performance.now() - 1 },
  2492. 				leaderboard: [],
  2493. 				owned: new Set(),
  2494. 				spawned: -Infinity,
  2495. 				stats: undefined,
  2496. 				used: -Infinity,
  2497. 			};
  2498. 			world.views.set(view, vision);
  2499. 			return vision;
  2500. 		};
  2501.  
  2502. 		let wasFlawlessSynchronized = false;
  2503. 		/** @type {number | undefined} */
  2504. 		let disagreementAt, disagreementStart;
  2505. 		world.synchronized = false;
  2506. 		world.merge = () => {
  2507. 			if (wasFlawlessSynchronized && settings.synchronization !== 'flawless') {
  2508. 				for (const key of /** @type {const} */ (['cells', 'pellets'])) {
  2509. 					for (const cell of world[key].values()) {
  2510. 						for (const record of cell.views.values()) {
  2511. 							for (let i = 1, l = record.frames.length; i < l; ++i) record.frames.pop();
  2512. 						}
  2513. 					}
  2514. 				}
  2515. 			}
  2516.  
  2517. 			if (!settings.synchronization || world.views.size <= 1) {
  2518. 				disagreementStart = disagreementAt = undefined;
  2519. 				world.synchronized = false;
  2520. 				wasFlawlessSynchronized = false;
  2521. 				return;
  2522. 			}
  2523.  
  2524. 			// the obvious solution to merging tabs is to prefer the primary tab's cells, then tack on the secondary
  2525. 			// tab's cells. this is fast and easy, but causes very noticeable flickering and warping when a cell enters
  2526. 			// or leaves the primary tab's vision. this is what delta suffers from.
  2527. 			//
  2528. 			// we could instead check cells visible on both tabs to see if they share the same target x, y, and r.
  2529. 			// if they all do, then the connections are synchronized and both visions can be merged.
  2530. 			// this works well, however latency can fluctuate and results in connections being completely unable to
  2531. 			// synchronize between themselves if they are off by at least 40ms. this happens often, and significantly
  2532. 			// more to players who usually have higher ping.
  2533. 			//
  2534. 			// in the below approach, we keep a record of how every cell is updated (where a lower index => more recent)
  2535. 			// and try to figure out the lowest possible index for all views such that they see the same frames across
  2536. 			// all cells.
  2537. 			// however, doing this is complicated. consider the following scenarios:
  2538. 			//
  2539. 			// > Scenario #1
  2540. 			// > a cell is standing still and visible across multiple views. then every frame will have a perfect match
  2541. 			// > between views, regardless of each connection's latency, and no frames will be ruled out.
  2542. 			// > therefore, finding a perfect match across multiple indices of 0 MUST NOT imply a perfect match could
  2543. 			// > be found on all other cells.
  2544. 			//
  2545. 			// > Scenario #2
  2546. 			// > view A has been alone observing a cell for a while, and view A has abnormally high ping.
  2547. 			// > that cell now comes into view B's vision, but view B has much better ping.
  2548. 			// > therefore, the frame(s) view B sees of that cell will be completely disjoint from view A's.
  2549. 			// > therefore, a match not existing MUST NOT imply the visions cannot be synchronized.
  2550. 			//
  2551. 			// > Scenario #3
  2552. 			// > view A and view B have been observing a cell for a while. view A has abnormally high ping.
  2553. 			// > the cell momentarily exits view B's vision, then after a few ticks re-enters its vision.
  2554. 			// > once view A catches up to a frame that was missed by view B (because the cell was out of B's vision),
  2555. 			// > it will not be able to find a match.
  2556. 			// > therefore, this MUST NOT imply that view A's latest frames cannot be used.
  2557. 			//
  2558. 			// the solution involves undirected bipartite graphs representing two different views and which indices are
  2559. 			// compatible with each other. for example:
  2560. 			// >       (view A)                      (view B)
  2561. 			// > 0 (x=12, y=34, r=56)     ┌─── 0 (x=44, y=55, r=66)
  2562. 			// > 1 (x=34, y=56, r=61)     │    1 (x=55, y=66, r=77)
  2563. 			// > 2 (x=44, y=55, r=66) ────┘
  2564. 			// > there is a compatible connection between 2A - 0B (illustrated)
  2565. 			// > there are incompatible connections between 0A - 0B, 0A - 1B, 1A - 0B, 1A - 1B, 2A - 1B
  2566. 			// > there are no connections between 0A - 2B, 1A - 2B, 2A - 2B, 0A - 3B, ...etc
  2567. 			//
  2568. 			// >       (view A)                      (view B)
  2569. 			// > 0 (x=1, y=1, r=100)   ┌────── 0 (x=2, y=2, r=100)
  2570. 			// > 1 (x=2, y=2, r=100) ──┘ ┌──── 1 (x=3, y=3, r=100)
  2571. 			// > 2 (x=3, y=3, r=100) ────┘ ┌── 2 (x=4, y=4, r=100)
  2572. 			// > 3 (x=4, y=4, r=100) ──────┘   3 (x=5, y=5, r=101)
  2573. 			// > there are compatible connections between 1A - 0B, 2A - 1B, 3A - 2B
  2574. 			// > there are incompatible connections between 0A - 0B, 0A - 1B, ..., 1A - 1B, 1A - 1C, ...
  2575. 			// > there are no connections between 0A - 4B, 1A - 4B, ..., 0A - 5B, ...
  2576. 			//
  2577. 			// then, we connect all bipartite graphs together and find the smallest indices across all views.
  2578. 			// but how does this actually scale?
  2579. 			//
  2580. 			// if there are two views, then we start at the first view on the first index. then:
  2581. 			// - if there is a compatible connection to the second view, use it, and we're done.
  2582. 			// - if not, and if there is an incompatible connection, then increment index by 1. repeat.
  2583. 			// - if there are no connections, then we're done.
  2584. 			//
  2585. 			// now if there are more views, start at the first view[1] (meaning 1st index). then:
  2586. 			// - check for a compatible connection to the second view[1], [2], ..., [12].
  2587. 			// - if there is a compatible connection on index i:
  2588. 			//     - check for a compatible connection from second view[i] to the third view[1], [2], ..., [12].
  2589. 			//     - if there is a compatible connection on index j:
  2590. 			//         - first, ensure it is also compatible with the first view[1] (backwards compatibility)
  2591. 			//         - if it isn't, then treat this as an incompatible connection
  2592. 			//         - otherwise, if all views agree, then try checking the fourth view
  2593. 			//     - if there isn't, but there is an incompatible connection, then flag a disagreement
  2594. 			// - if there isn't, but there is an incompatible connection, then flag a disagreement
  2595. 			// - otherwise, a "cluster" has been completely found (a collection of nearby views). go to the next view
  2596. 			//   that isn't part of any cluster, and repeat
  2597. 			//
  2598. 			// note that if one tab sees a cell as "dead", the connection is also deemed compatible. this is to ensure
  2599. 			// there are no long lag spikes while one tab leaves from another tab (for example, when the spectator tab
  2600. 			// teleports away).
  2601.  
  2602. 			const now = performance.now();
  2603. 			/** @type {{ [x: number | symbol]: number }} indexed by viewInt or symbol view */
  2604. 			const indices = {};
  2605.  
  2606. 			if (settings.synchronization === 'flawless') {
  2607. 				// #1 : set up bipartite graphs between every pair of views
  2608. 				/** @type {Map<symbol, number>} */
  2609. 				const viewToInt = new Map();
  2610. 				/** @type {Map<number, symbol>} */
  2611. 				const intToView = new Map();
  2612. 				for (const view of world.views.keys()) {
  2613. 					intToView.set(viewToInt.size, view);
  2614. 					viewToInt.set(view, viewToInt.size);
  2615. 				}
  2616. 				const viewDim = viewToInt.size;
  2617.  
  2618. 				// each pair of views (view1, view2, where view1Int < view2Int) has a 12x12 graph, where
  2619. 				// graph[i * viewDim + j] describes the existence of an undirected connection between index i on view1
  2620. 				// and index j on view2.
  2621. 				const COMPATIBLE = 1 << 0;
  2622. 				const INCOMPATIBLE = 1 << 1;
  2623. 				const graphDim = 12; // same as maximum history size
  2624. 				/** @type {Map<number, Uint8Array>} */
  2625. 				const graphs = new Map();
  2626. 				for (let i = 0; i < viewToInt.size; ++i) {
  2627. 					for (let j = i + 1; j < viewToInt.size; ++j) {
  2628. 						graphs.set(i * viewDim + j, new Uint8Array(graphDim * graphDim));
  2629. 					}
  2630. 				}
  2631.  
  2632. 				// #2 : establish relationships in every graph
  2633. 				// pellets never change, so it would be useless to try and compare them
  2634. 				for (const cell of world.cells.values()) {
  2635. 					for (const view1 of cell.views.keys()) {
  2636. 						const record1 = /** @type {CellRecord} */ (cell.views.get(view1));
  2637. 						for (const view2 of cell.views.keys()) {
  2638. 							if (view1 === view2) continue;
  2639. 							const record2 = /** @type {CellRecord} */ (cell.views.get(view2));
  2640.  
  2641. 							const view1Int = /** @type {number} */ (viewToInt.get(view1));
  2642. 							const view2Int = /** @type {number} */ (viewToInt.get(view2));
  2643. 							if (view1Int > view2Int) continue; // only access graphs where view1 < view2
  2644. 							const graph = /** @type {Uint8Array} */ (graphs.get(view1Int * viewDim + view2Int));
  2645.  
  2646. 							for (let i = 0; i < record1.frames.length; ++i) {
  2647. 								const frame1 = record1.frames[i];
  2648. 								for (let j = 0; j < record2.frames.length; ++j) {
  2649. 									const frame2 = record2.frames[j];
  2650.  
  2651. 									if (frame1.deadAt !== undefined || frame2.deadAt !== undefined || (frame1.nx === frame2.nx && frame1.ny === frame2.ny && frame1.nr === frame2.nr)) {
  2652. 										graph[i * graphDim + j] |= COMPATIBLE;
  2653. 									} else {
  2654. 										graph[i * graphDim + j] |= INCOMPATIBLE;
  2655. 									}
  2656. 								}
  2657. 							}
  2658. 						}
  2659. 					}
  2660. 				}
  2661.  
  2662. 				// #3 : find the lowest indices across all views that are compatible with each other
  2663. 				/**
  2664. 				 * @param {{ viewInt: number, i: number }[]} previous
  2665. 				 * @param {number} viewInt
  2666. 				 * @param {number} i
  2667. 				 * @returns {boolean}
  2668. 				 */
  2669. 				const explore = (previous, viewInt, i) => {
  2670. 					// try and find the next view that is compatible
  2671. 					for (let next = viewInt + 1; next < viewDim; ++next) {
  2672. 						if (indices[next] !== undefined) continue;
  2673.  
  2674. 						const graph = /** @type {Uint8Array} */ (graphs.get(viewInt * viewDim + next));
  2675. 						let incompatible = false;
  2676. 						for (let j = 0; j < graphDim; ++j) {
  2677. 							const con = graph[i * graphDim + j];
  2678. 							if (con & INCOMPATIBLE) {
  2679. 								incompatible = true;
  2680. 							} else if (con & COMPATIBLE) {
  2681. 								// we found a connection
  2682. 								// TODO: checking for backwards compatibility seems to break things
  2683. 								previous.push({ viewInt, i });
  2684. 								const ok = explore(previous, next, j);
  2685. 								previous.pop();
  2686. 								if (ok) {
  2687. 									indices[next] = indices[/** @type {symbol} */ (intToView.get(next))] = j;
  2688. 									return true;
  2689. 								}
  2690.  
  2691. 								incompatible = false;
  2692. 							} else; // don't do anything if the connection is undefined
  2693. 						}
  2694.  
  2695. 						// if an incompatible connection was found with no other good choices, then there is a conflict
  2696. 						// and don't allow it
  2697. 						if (incompatible) return false;
  2698. 					}
  2699.  
  2700. 					return true;
  2701. 				};
  2702.  
  2703. 				startCluster: for (let viewInt = 0; viewInt < viewDim; ++viewInt) {
  2704. 					if (indices[viewInt] !== undefined) continue; // don't re-process a cluster
  2705.  
  2706. 					// try and start a cluster with some index
  2707. 					for (let i = 0; i < graphDim; ++i) {
  2708. 						if (explore([], viewInt, i)) {
  2709. 							indices[viewInt] = indices[/** @type {symbol} */ (intToView.get(viewInt))] = i;
  2710. 							continue startCluster;
  2711. 						}
  2712. 					}
  2713.  
  2714. 					// if everything is incompatible, then there is a disagreement somewhere
  2715. 					// (shouldn't really happen unless a huge lag spike hits)
  2716. 					disagreementStart ??= now;
  2717. 					disagreementAt = now;
  2718. 					if (now - disagreementStart > 1000) world.synchronized = false;
  2719. 					return;
  2720. 				}
  2721.  
  2722. 				wasFlawlessSynchronized = true;
  2723. 			} else { // settings.synchronization === 'latest'
  2724. 				let i = 0;
  2725. 				for (const view of world.views.keys()) {
  2726. 					indices[i++] = indices[view] = 0;
  2727. 				}
  2728.  
  2729. 				wasFlawlessSynchronized = false;
  2730. 			}
  2731.  
  2732. 			// #4 : find a model frame for all cells and pellets
  2733. 			for (const key of /** @type {const} */ (['cells', 'pellets'])) {
  2734. 				for (const cell of world[key].values()) {
  2735. 					/** @type {[symbol, CellRecord] | undefined} */
  2736. 					let modelPair;
  2737. 					modelViewLoop: for (const pair of cell.views) {
  2738. 						if (!modelPair) {
  2739. 							modelPair = pair;
  2740. 							continue;
  2741. 						}
  2742.  
  2743. 						const [modelView, model] = modelPair;
  2744. 						const [view, record] = pair;
  2745.  
  2746. 						const modelFrame = model.frames[indices[modelView]];
  2747. 						const frame = record.frames[indices[view]];
  2748.  
  2749. 						const modelDisappeared = !modelFrame || (modelFrame.deadAt !== undefined && modelFrame.deadTo === -1);
  2750. 						const thisDisappeared = !frame || (frame.deadAt !== undefined && frame.deadTo === -1);
  2751.  
  2752. 						if (modelDisappeared && thisDisappeared) {
  2753. 							// both have currently disappeared; prefer the one that "disappeared" later
  2754. 							if (settings.synchronization === 'flawless') {
  2755. 								for (let off = 1; off < 12; ++off) {
  2756. 									const modelFrameOffset = model.frames[indices[modelView] + off];
  2757. 									const frameOffset = record.frames[indices[view] + off];
  2758.  
  2759. 									const modelOffsetAlive = modelFrameOffset && modelFrameOffset.deadAt === undefined;
  2760. 									const frameOffsetAlive = frameOffset && frameOffset.deadAt === undefined;
  2761. 									if (modelOffsetAlive && frameOffsetAlive) {
  2762. 										// both disappeared at the same time, doesn't matter
  2763. 										continue modelViewLoop;
  2764. 									} else if (modelOffsetAlive && !frameOffsetAlive) {
  2765. 										// model disappeared last, so prefer it
  2766. 										continue modelViewLoop;
  2767. 									} else if (!modelOffsetAlive && frameOffsetAlive) {
  2768. 										// current disappeared last, so prefer it
  2769. 										modelPair = pair;
  2770. 										continue modelViewLoop;
  2771. 									} else; // we haven't found when either one disappeared
  2772. 								}
  2773. 							} else {
  2774. 								// if (!modelFrame && !frame) leave the model as is
  2775. 								// else if (modelFrame && !frame) leave the model as is
  2776. 								if (!modelFrame && frame) modelPair = pair;
  2777. 								else if (modelFrame && frame && /** @type {number} */ (frame.deadAt) > /** @type {number} */ (modelFrame.deadAt)) modelPair = pair;
  2778. 							}
  2779. 						} else if (modelDisappeared && !thisDisappeared) {
  2780. 							// current is the only one visible, so prefer it
  2781. 							modelPair = pair;
  2782. 						} else if (!modelDisappeared && thisDisappeared) {
  2783. 							// model is the only one visible, so prefer it (don't change anything)
  2784. 						} else; // both are visible and synchronized, so it doesn't matter
  2785. 					}
  2786.  
  2787. 					// in very rare circumstances, this ends up being undefined, for some reason
  2788. 					if (modelPair) cell.model = modelPair[1].frames[indices[modelPair[0]]] ?? cell.model;
  2789. 				}
  2790. 			}
  2791.  
  2792. 			// #5 : create or update the merged frame for all cells and pellets
  2793. 			for (const key of /** @type {const} */ (['cells', 'pellets'])) {
  2794. 				for (const cell of world[key].values()) {
  2795. 					const { model, merged } = cell;
  2796. 					if (!model) { // could happen
  2797. 						cell.merged = undefined;
  2798. 						continue;
  2799. 					}
  2800.  
  2801. 					if (!merged || (merged.deadAt !== undefined && model.deadAt === undefined)) {
  2802. 						cell.merged = {
  2803. 							nx: model.nx, ny: model.ny, nr: model.nr,
  2804. 							born: now, deadAt: model.deadAt !== undefined ? now : undefined, deadTo: model.deadTo,
  2805. 							ox: model.nx, oy: model.ny, or: model.nr,
  2806. 							jr: model.nr, a: 0, updated: now,
  2807. 						};
  2808. 					} else {
  2809. 						if (merged.deadAt === undefined && (model.deadAt !== undefined || model.nx !== merged.nx || model.ny !== merged.ny || model.nr !== merged.nr)) {
  2810. 							const xyr = world.xyr(merged, merged, undefined, undefined, key === 'pellets', now);
  2811.  
  2812. 							merged.ox = xyr.x;
  2813. 							merged.oy = xyr.y;
  2814. 							merged.or = xyr.r;
  2815. 							merged.jr = xyr.jr;
  2816. 							merged.a = xyr.a;
  2817. 							merged.updated = now;
  2818. 						}
  2819.  
  2820. 						merged.nx = model.nx;
  2821. 						merged.ny = model.ny;
  2822. 						merged.nr = model.nr;
  2823. 						merged.deadAt = model.deadAt !== undefined ? (merged.deadAt ?? now) : undefined;
  2824. 						merged.deadTo = model.deadTo;
  2825. 					}
  2826. 				}
  2827. 			}
  2828.  
  2829. 			// #6 : clean up history for all cells, because we don't want to ever go back in time
  2830. 			for (const key of /** @type {const} */ (['cells', 'pellets'])) {
  2831. 				for (const cell of world[key].values()) {
  2832. 					for (const [view, record] of cell.views) {
  2833. 						// leave the current frame, because .frames must have at least one element
  2834. 						for (let i = indices[view] + 1, l = record.frames.length; i < l; ++i) record.frames.pop();
  2835. 					}
  2836. 				}
  2837. 			}
  2838.  
  2839. 			disagreementStart = undefined;
  2840. 			// if there ever a disagreement that caused synchronization to be disabled, wait a bit after things
  2841. 			// resolve to make sure they stay resolved
  2842. 			if (disagreementAt === undefined || now - disagreementAt > 1000) world.synchronized = true;
  2843. 		};
  2844.  
  2845. 		/** @param {symbol} view */
  2846. 		world.score = view => {
  2847. 			let score = 0;
  2848. 			for (const id of (world.views.get(view)?.owned ?? [])) {
  2849. 				const cell = world.cells.get(id);
  2850. 				if (!cell) continue;
  2851.  
  2852. 				/** @type {CellFrame | undefined} */
  2853. 				const frame = world.synchronized ? cell.merged : cell.views.get(view)?.frames[0];
  2854. 				if (!frame || frame.deadAt !== undefined) continue;
  2855. 				score += frame.nr * frame.nr / 100; // use exact score as given by the server, no interpolation
  2856. 			}
  2857.  
  2858. 			return score;
  2859. 		};
  2860.  
  2861. 		/**
  2862. 		 * @param {CellFrame} frame
  2863. 		 * @param {CellInterpolation} interp
  2864. 		 * @param {CellFrame | undefined} killerFrame
  2865. 		 * @param {CellInterpolation | undefined} killerInterp
  2866. 		 * @param {boolean} pellet
  2867. 		 * @param {number} now
  2868. 		 * @returns {{ x: number, y: number, r: number, jr: number, a: number }}
  2869. 		 */
  2870. 		world.xyr = (frame, interp, killerFrame, killerInterp, pellet, now) => {
  2871. 			let nx = frame.nx;
  2872. 			let ny = frame.ny;
  2873. 			if (killerFrame && killerInterp) {
  2874. 				// animate towards the killer's interpolated position (not the target position) for extra smoothness
  2875. 				// we also assume the killer has not died (if it has, then weird stuff is OK to occur)
  2876. 				const killerXyr = world.xyr(killerFrame, killerInterp, undefined, undefined, false, now);
  2877. 				nx = killerXyr.x;
  2878. 				ny = killerXyr.y;
  2879. 			}
  2880.  
  2881. 			let x, y, r, a;
  2882. 			if (pellet && frame.deadAt === undefined) {
  2883. 				x = nx;
  2884. 				y = ny;
  2885. 				r = frame.nr;
  2886. 				a = 1;
  2887. 			} else {
  2888. 				let alpha = (now - interp.updated) / settings.drawDelay;
  2889. 				alpha = alpha < 0 ? 0 : alpha > 1 ? 1 : alpha;
  2890.  
  2891. 				x = interp.ox + (nx - interp.ox) * alpha;
  2892. 				y = interp.oy + (ny - interp.oy) * alpha;
  2893. 				r = interp.or + (frame.nr - interp.or) * alpha;
  2894.  
  2895. 				const targetA = frame.deadAt !== undefined ? 0 : 1;
  2896. 				a = interp.a + (targetA - interp.a) * alpha;
  2897. 			}
  2898.  
  2899. 			const dt = (now - interp.updated) / 1000;
  2900.  
  2901. 			return {
  2902. 				x, y, r,
  2903. 				jr: aux.exponentialEase(interp.jr, r, settings.slowerJellyPhysics ? 10 : 5, dt),
  2904. 				a,
  2905. 			};
  2906. 		};
  2907.  
  2908. 		// clean up dead, invisible cells ONLY before uploading pellets
  2909. 		let lastClean = performance.now();
  2910. 		world.clean = () => {
  2911. 			const now = performance.now();
  2912. 			if (now - lastClean < 200) return;
  2913. 			lastClean = now;
  2914.  
  2915. 			for (const key of /** @type {const} */ (['cells', 'pellets'])) {
  2916. 				for (const [id, cell] of world[key]) {
  2917. 					for (const [view, record] of cell.views) {
  2918. 						const firstFrame = record.frames[0];
  2919. 						const lastFrame = record.frames[record.frames.length - 1];
  2920. 						if (firstFrame.deadAt !== lastFrame.deadAt) continue;
  2921. 						if (lastFrame.deadAt !== undefined && now - lastFrame.deadAt >= settings.drawDelay + 200)
  2922. 							cell.views.delete(view);
  2923. 					}
  2924.  
  2925. 					if (cell.views.size === 0) world[key].delete(id);
  2926. 				}
  2927. 			}
  2928. 		};
  2929.  
  2930.  
  2931.  
  2932. 		// #2 : define stats
  2933. 		world.stats = {
  2934. 			foodEaten: 0,
  2935. 			highestPosition: 200,
  2936. 			highestScore: 0,
  2937. 			/** @type {number | undefined} */
  2938. 			spawnedAt: undefined,
  2939. 		};
  2940.  
  2941.  
  2942.  
  2943. 		return world;
  2944. 	})();
  2945.  
  2946.  
  2947.  
  2948. 	//////////////////////////
  2949. 	// Setup All Networking //
  2950. 	//////////////////////////
  2951. 	const net = (() => {
  2952. 		const net = {};
  2953.  
  2954. 		// #1 : define state
  2955. 		/** @type {Map<symbol, {
  2956. 		 * 		handshake: { shuffle: Uint8Array, unshuffle: Uint8Array } | undefined,
  2957. 		 * 		latency: number | undefined,
  2958. 		 * 		pinged: number | undefined,
  2959. 		 * 		playBlock: { state: 'leaving' | 'joining', started: number } | undefined,
  2960. 		 * 		rejections: number,
  2961. 		 * 		retries: number,
  2962. 		 * 		ws: WebSocket | undefined,
  2963. 		 * }>} */
  2964. 		net.connections = new Map();
  2965.  
  2966. 		/** @param {symbol} view */
  2967. 		net.create = view => {
  2968. 			if (net.connections.has(view)) return;
  2969.  
  2970. 			net.connections.set(view, {
  2971. 				handshake: undefined,
  2972. 				latency: undefined,
  2973. 				pinged: undefined,
  2974. 				playBlock: undefined,
  2975. 				rejections: 0,
  2976. 				retries: 0,
  2977. 				ws: connect(view),
  2978. 			});
  2979. 		};
  2980.  
  2981. 		let captchaPostQueue = Promise.resolve();
  2982.  
  2983. 		/**
  2984. 		 * @param {symbol} view
  2985. 		 * @param {(() => void)=} establishedCallback
  2986. 		 * @returns {WebSocket | undefined}
  2987. 		*/
  2988. 		const connect = (view, establishedCallback) => {
  2989. 			if (net.connections.get(view)?.ws) return; // already being handled by another process
  2990.  
  2991. 			// do not allow sigmod's args[0].includes('sigmally.com') check to pass
  2992. 			const realUrl = net.url();
  2993. 			const fakeUrl = /** @type {any} */ ({ includes: () => false, toString: () => realUrl });
  2994. 			let ws;
  2995. 			try {
  2996. 				ws = new WebSocket(fakeUrl);
  2997. 			} catch (err) {
  2998. 				console.error('can\'t make WebSocket:', err);
  2999. 				aux.require(null, 'The server address is invalid. It probably has a typo.\n' +
  3000. 					'- If using an insecure address (starting with "ws://" and not "wss://") that isn\'t localhost, ' +
  3001. 					'enable Insecure Content in this site\'s browser settings.\n' +
  3002. 					'- If using a local server, make sure to use localhost and not any other local IP.');
  3003. 				return; // ts-check is dumb
  3004. 			}
  3005.  
  3006. 			{
  3007. 				const con = net.connections.get(view);
  3008. 				if (con) con.ws = ws;
  3009. 			}
  3010.  
  3011. 			ws.binaryType = 'arraybuffer';
  3012. 			ws.addEventListener('close', e => {
  3013. 				console.error('WebSocket closed:', e);
  3014. 				establishedCallback?.();
  3015. 				establishedCallback = undefined;
  3016.  
  3017. 				const connection = net.connections.get(view);
  3018. 				const vision = world.views.get(view);
  3019. 				if (!connection || !vision) return; // if the entry no longer exists, don't reconnect
  3020.  
  3021. 				connection.handshake = undefined;
  3022. 				connection.latency = undefined;
  3023. 				connection.pinged = undefined;
  3024. 				connection.playBlock = undefined;
  3025. 				++connection.rejections;
  3026. 				if (connection.retries > 0) --connection.retries;
  3027.  
  3028. 				vision.border = undefined;
  3029. 				// don't reset vision.camera
  3030. 				vision.owned = new Set();
  3031. 				vision.leaderboard = [];
  3032. 				vision.spawned = -Infinity;
  3033. 				vision.stats = undefined;
  3034.  
  3035. 				for (const key of /** @type {const} */ (['cells', 'pellets'])) {
  3036. 					for (const [id, resolution] of world[key]) {
  3037. 						resolution.views.delete(view);
  3038. 						if (resolution.views.size === 0) world[key].delete(id);
  3039. 					}
  3040. 				}
  3041.  
  3042. 				connection.ws = undefined;
  3043. 				world.merge();
  3044. 				render.upload(true);
  3045.  
  3046. 				const thisUrl = net.url();
  3047. 				const url = new URL(thisUrl); // use the current url, not realUrl
  3048. 				const captchaEndpoint = `http${url.protocol === 'ws:' ? '' : 's'}://${url.host}/server/recaptcha/v3`;
  3049.  
  3050. 				/** @param {string} type */
  3051. 				const requestCaptcha = type => {
  3052. 					ui.captcha.request(view, type, token => {
  3053. 						captchaPostQueue = captchaPostQueue.then(() => new Promise(resolve => {
  3054. 							aux.oldFetch(captchaEndpoint, {
  3055. 								method: 'POST',
  3056. 								headers: { 'content-type': 'application/json' },
  3057. 								body: JSON.stringify({ token }),
  3058. 							}).then(res => res.json()).then(res => res.status).catch(() => 'rejected')
  3059. 								.then(status => {
  3060. 									if (status === 'complete') connect(view, resolve);
  3061. 									else setTimeout(() => connect(view, resolve), 1000);
  3062. 								});
  3063. 						}));
  3064. 					});
  3065. 				};
  3066.  
  3067. 				if (connection.retries > 0) {
  3068. 					setTimeout(() => connect(view), 500);
  3069. 				} else {
  3070. 					aux.oldFetch(captchaEndpoint).then(res => res.json()).then(res => res.version).catch(() => 'none')
  3071. 						.then(type => {
  3072. 							connection.retries = 3;
  3073. 							if (type === 'v2' || type === 'v3' || type === 'turnstile') requestCaptcha(type);
  3074. 							else setTimeout(() => connect(view), connection.rejections >= 5 ? 5000 : 500);
  3075. 						});
  3076. 				}
  3077. 			});
  3078. 			ws.addEventListener('error', () => {});
  3079. 			ws.addEventListener('message', e => {
  3080. 				const connection = net.connections.get(view);
  3081. 				const vision = world.views.get(view);
  3082. 				if (!connection || !vision) return ws.close();
  3083. 				const dat = new DataView(e.data);
  3084.  
  3085. 				if (!connection.handshake) {
  3086. 					// skip version "SIG 0.0.1\0"
  3087. 					let o = 10;
  3088.  
  3089. 					const shuffle = new Uint8Array(256);
  3090. 					const unshuffle = new Uint8Array(256);
  3091. 					for (let i = 0; i < 256; ++i) {
  3092. 						const shuffled = dat.getUint8(o + i);
  3093. 						shuffle[i] = shuffled;
  3094. 						unshuffle[shuffled] = i;
  3095. 					}
  3096.  
  3097. 					connection.handshake = { shuffle, unshuffle };
  3098.  
  3099. 					if (world.alive()) net.play(world.selected, input.playData(input.name(view), false));
  3100. 					return;
  3101. 				}
  3102.  
  3103. 				// do this so the packet can easily be sent to sigmod afterwards
  3104. 				dat.setUint8(0, connection.handshake.unshuffle[dat.getUint8(0)]);
  3105.  
  3106. 				const now = performance.now();
  3107. 				let o = 1;
  3108. 				switch (dat.getUint8(0)) {
  3109. 					case 0x10: { // world update
  3110. 						// carry forward record frames
  3111. 						if (settings.synchronization === 'flawless') {
  3112. 							for (const key of /** @type {const} */ (['cells', 'pellets'])) {
  3113. 								for (const cell of world[key].values()) {
  3114. 									const record = cell.views.get(view);
  3115. 									if (!record) continue;
  3116.  
  3117. 									record.frames.unshift(record.frames[0]);
  3118. 									for (let i = 12, l = record.frames.length; i < l; ++i) record.frames.pop();
  3119. 								}
  3120. 							}
  3121. 						}
  3122.  
  3123. 						// (a) : eat
  3124. 						const killCount = dat.getUint16(o, true);
  3125. 						o += 2;
  3126. 						for (let i = 0; i < killCount; ++i) {
  3127. 							const killerId = dat.getUint32(o, true);
  3128. 							const killedId = dat.getUint32(o + 4, true);
  3129. 							o += 8;
  3130.  
  3131. 							let pellet = true;
  3132. 							let killed = world.pellets.get(killedId) ?? (pellet = false, world.cells.get(killedId));
  3133. 							if (!killed) continue;
  3134.  
  3135. 							const record = killed.views.get(view);
  3136. 							if (!record) continue;
  3137.  
  3138. 							const frame = record.frames[0];
  3139. 							// update interpolation using old targets
  3140. 							const xyr = world.xyr(record.frames[0], record, undefined, undefined, pellet, now);
  3141. 							record.ox = xyr.x;
  3142. 							record.oy = xyr.y;
  3143. 							record.or = xyr.r;
  3144. 							record.jr = xyr.jr;
  3145. 							record.a = xyr.a;
  3146. 							record.updated = now;
  3147.  
  3148. 							// update new targets (and dead-ness)
  3149. 							record.frames[0] = {
  3150. 								nx: frame.nx, ny: frame.ny, nr: frame.nr,
  3151. 								born: frame.born, deadAt: now, deadTo: killerId,
  3152. 							};
  3153.  
  3154. 							if (pellet && vision.owned.has(killerId)) {
  3155. 								++world.stats.foodEaten;
  3156. 								net.food(view); // dumbass quest code go brrr
  3157. 							}
  3158. 						}
  3159.  
  3160. 						// (b) : add, upd
  3161. 						do {
  3162. 							const id = dat.getUint32(o, true);
  3163. 							o += 4;
  3164. 							if (id === 0) break;
  3165.  
  3166. 							const x = dat.getInt16(o, true);
  3167. 							const y = dat.getInt16(o + 2, true);
  3168. 							const r = dat.getUint16(o + 4, true);
  3169. 							const flags = dat.getUint8(o + 6);
  3170. 							// (void 1 byte, "isUpdate")
  3171. 							// (void 1 byte, "isPlayer")
  3172. 							const sub = !!dat.getUint8(o + 9);
  3173. 							o += 10;
  3174.  
  3175. 							let clan; [clan, o] = aux.readZTString(dat, o);
  3176.  
  3177. 							/** @type {[number, number, number] | undefined} */
  3178. 							let rgb;
  3179. 							if (flags & 0x02) { // update color
  3180. 								rgb = [dat.getUint8(o++) / 255, dat.getUint8(o++) / 255, dat.getUint8(o++) / 255];
  3181. 							}
  3182.  
  3183. 							/** @type {string | undefined} */
  3184. 							let skin;
  3185. 							if (flags & 0x04) { // update skin
  3186. 								[skin, o] = aux.readZTString(dat, o);
  3187. 								skin = aux.parseSkin(skin);
  3188. 							}
  3189.  
  3190. 							/** @type {string | undefined} */
  3191. 							let name;
  3192. 							if (flags & 0x08) { // update name
  3193. 								[name, o] = aux.readZTString(dat, o);
  3194. 								name = aux.parseName(name);
  3195. 								if (name) render.textFromCache(name, sub); // make sure the texture is ready on render
  3196. 							}
  3197.  
  3198. 							const jagged = !!(flags & 0x11); // spiked or agitated
  3199. 							const eject = !!(flags & 0x20);
  3200. 							const pellet = r <= 40 && !eject; // tourney servers have bigger pellets (r=40)
  3201. 							const cell = (pellet ? world.pellets : world.cells).get(id);
  3202. 							const record = cell?.views.get(view);
  3203. 							if (record) {
  3204. 								const frame = record.frames[0];
  3205. 								if (frame.deadAt === undefined) {
  3206. 									// update interpolation using old targets
  3207. 									const xyr = world.xyr(record.frames[0], record, undefined, undefined, pellet, now);
  3208. 									record.ox = xyr.x;
  3209. 									record.oy = xyr.y;
  3210. 									record.or = xyr.r;
  3211. 									record.jr = xyr.jr;
  3212. 									record.a = xyr.a;
  3213. 								} else {
  3214. 									// cell just reappeared, discard all old data
  3215. 									record.ox = x;
  3216. 									record.oy = y;
  3217. 									record.or = r;
  3218. 									record.jr = r;
  3219. 									record.a = 0;
  3220. 								}
  3221.  
  3222. 								record.updated = now;
  3223.  
  3224. 								// update target frame
  3225. 								record.frames[0] = {
  3226. 									nx: x, ny: y, nr: r,
  3227. 									born: frame.born, deadAt: undefined, deadTo: -1
  3228. 								};
  3229.  
  3230. 								// update desc
  3231. 								if (name !== undefined) record.name = name;
  3232. 								if (skin !== undefined) record.skin = skin;
  3233. 								if (rgb !== undefined) record.rgb = rgb;
  3234. 								record.clan = clan;
  3235. 								record.jagged = jagged;
  3236. 								record.eject = eject;
  3237. 							} else {
  3238. 								/** @type {CellRecord} */
  3239. 								const record = {
  3240. 									ox: x, oy: y, or: r,
  3241. 									jr: r, a: 0, updated: now,
  3242. 									frames: [{
  3243. 										nx: x, ny: y, nr: r,
  3244. 										born: now, deadAt: undefined, deadTo: -1,
  3245. 									}],
  3246. 									name: name ?? '', skin: skin ?? '', sub, clan,
  3247. 									rgb: rgb ?? [0.5, 0.5, 0.5],
  3248. 									jagged, eject,
  3249. 								};
  3250. 								if (cell) {
  3251. 									cell.views.set(view, record);
  3252. 								} else {
  3253. 									(pellet ? world.pellets : world.cells).set(id, {
  3254. 										id,
  3255. 										merged: undefined,
  3256. 										model: undefined,
  3257. 										views: new Map([[ view, record ]]),
  3258. 									});
  3259. 								}
  3260.  
  3261. 								if (settings.synchronization === 'latest' && !pellet && !eject && rgb) {
  3262. 									// 'latest' requires us to predict which cells we will own
  3263. 									// a name + color check should be enough
  3264. 									/** @type {CellDescription | undefined} */
  3265. 									let base;
  3266. 									for (const id of vision.owned) {
  3267. 										const desc = world.cells.get(id)?.views.get(view);
  3268. 										if (!desc || desc.frames[0].deadAt !== undefined) continue;
  3269. 										base = desc;
  3270. 										break;
  3271. 									}
  3272.  
  3273. 									if (base && name === base.name && rgb[0] === base.rgb[0] && rgb[1] === base.rgb[1] && rgb[2] === base.rgb[2]) {
  3274. 										vision.owned.add(id);
  3275. 									}
  3276. 								}
  3277. 							}
  3278. 						} while (true);
  3279.  
  3280. 						// (c) : del
  3281. 						const deleteCount = dat.getUint16(o, true);
  3282. 						o += 2;
  3283. 						for (let i = 0; i < deleteCount; ++i) {
  3284. 							const deletedId = dat.getUint32(o, true);
  3285. 							o += 4;
  3286.  
  3287. 							const record
  3288. 								= (world.pellets.get(deletedId) ?? world.cells.get(deletedId))?.views.get(view);
  3289. 							if (!record) continue;
  3290.  
  3291. 							const frame = record.frames[0];
  3292. 							if (frame.deadAt !== undefined) continue;
  3293. 							record.frames[0] = {
  3294. 								nx: frame.nx, ny: frame.ny, nr: frame.nr,
  3295. 								born: frame.born, deadAt: now, deadTo: -1,
  3296. 							};
  3297. 							// no interpolation stuff is updated because the target positions won't be changed,
  3298. 							// unlike on eat where nx and ny are set to the killer's
  3299. 						}
  3300.  
  3301. 						// (d) : finalize, upload data
  3302. 						world.merge();
  3303. 						world.clean();
  3304. 						render.upload(true);
  3305.  
  3306. 						// (e) : clear own cells that don't exist anymore (NOT on world.clean!)
  3307. 						for (const id of vision.owned) {
  3308. 							const cell = world.cells.get(id);
  3309. 							if (!cell) {
  3310. 								vision.owned.delete(id);
  3311. 								continue;
  3312. 							}
  3313. 							const record = cell?.views.get(view);
  3314.  
  3315. 							if (record && record.frames[0].deadAt === undefined && connection.playBlock?.state === 'joining') {
  3316. 								connection.playBlock = undefined;
  3317. 							}
  3318. 						}
  3319.  
  3320. 						ui.deathScreen.check();
  3321. 						break;
  3322. 					}
  3323.  
  3324. 					case 0x11: { // update camera pos
  3325. 						vision.camera.tx = dat.getFloat32(o, true);
  3326. 						vision.camera.ty = dat.getFloat32(o + 4, true);
  3327. 						vision.camera.tscale = dat.getFloat32(o + 8, true);
  3328. 						break;
  3329. 					}
  3330.  
  3331. 					case 0x12: { // delete all cells
  3332. 						// happens every time you respawn
  3333. 						if (connection.playBlock?.state === 'leaving') connection.playBlock.state = 'joining';
  3334. 						// the server won't respond to pings if you aren't in a world, and we don't want to show '????'
  3335. 						// unless there's actually a problem
  3336. 						connection.pinged = undefined;
  3337.  
  3338. 						// DO NOT just clear the maps! when respawning, OgarII will not resend cell data if we spawn
  3339. 						// nearby.
  3340. 						for (const key of /** @type {const} */ (['cells', 'pellets'])) {
  3341. 							for (const cell of world[key].values()) {
  3342. 								const record = cell.views.get(view);
  3343. 								if (!record) continue;
  3344.  
  3345. 								const frame = record.frames[0];
  3346. 								if (settings.synchronization === 'flawless') {
  3347. 									record.frames.unshift({
  3348. 										nx: frame.nx, ny: frame.ny, nr: frame.nr,
  3349. 										born: frame.born, deadAt: frame.deadAt ?? now, deadTo: frame.deadTo || -1,
  3350. 									});
  3351. 								} else {
  3352. 									const frameWritable = /** @type {CellFrameWritable} */ (frame);
  3353. 									frameWritable.deadAt ??= now;
  3354. 									frameWritable.deadTo ||= -1;
  3355. 								}
  3356. 							}
  3357. 						}
  3358. 						world.merge();
  3359. 						render.upload(true);
  3360. 						// passthrough
  3361. 					}
  3362. 					case 0x14: { // delete my cells
  3363. 						// only reset spawn time if no other tab is alive.
  3364. 						// this could be cheated (if you alternate respawning your tabs, for example) but i don't think
  3365. 						// multiboxers ever see the stats menu anyway
  3366. 						if (!world.alive()) world.stats.spawnedAt = undefined;
  3367. 						ui.deathScreen.hide(); // don't trigger death screen on respawn
  3368. 						break;
  3369. 					}
  3370.  
  3371. 					case 0x20: { // new owned cell
  3372. 						// check if this is the first owned cell
  3373. 						let first = true;
  3374. 						let firstThis = true;
  3375. 						for (const [otherView, otherVision] of world.views) {
  3376. 							for (const id of otherVision.owned) {
  3377. 								const record = world.cells.get(id)?.views.get(otherView);
  3378. 								if (!record) continue;
  3379. 								const frame = record.frames[0];
  3380. 								if (frame.deadAt !== undefined) continue;
  3381.  
  3382. 								first = false;
  3383. 								if (otherVision === vision) {
  3384. 									firstThis = false;
  3385. 									break;
  3386. 								}
  3387. 							}
  3388. 						}
  3389. 						if (first) world.stats.spawnedAt = now;
  3390. 						if (firstThis) vision.spawned = now;
  3391.  
  3392. 						vision.owned.add(dat.getUint32(o, true));
  3393. 						break;
  3394. 					}
  3395.  
  3396. 					case 0x31: { // ffa leaderboard list
  3397. 						const lb = [];
  3398. 						const count = dat.getUint32(o, true);
  3399. 						o += 4;
  3400.  
  3401. 						/** @type {number | undefined} */
  3402. 						let myPosition;
  3403. 						for (let i = 0; i < count; ++i) {
  3404. 							const me = !!dat.getUint32(o, true);
  3405. 							o += 4;
  3406.  
  3407. 							let name; [name, o] = aux.readZTString(dat, o);
  3408. 							name = aux.parseName(name);
  3409.  
  3410. 							// why this is copied into every leaderboard entry is beyond my understanding
  3411. 							myPosition = dat.getUint32(o, true);
  3412. 							const sub = !!dat.getUint32(o + 4, true);
  3413. 							o += 8;
  3414.  
  3415. 							lb.push({ name, sub, me, place: undefined });
  3416. 						}
  3417.  
  3418. 						if (myPosition) { // myPosition could be zero
  3419. 							if (myPosition - 1 >= lb.length) {
  3420. 								const nick = input.nick[world.multis.indexOf(view) || 0].value;
  3421. 								lb.push({
  3422. 									me: true,
  3423. 									name: aux.parseName(nick),
  3424. 									place: myPosition,
  3425. 									sub: false, // doesn't matter
  3426. 								});
  3427. 							}
  3428.  
  3429. 							world.stats.highestPosition = Math.min(world.stats.highestPosition, myPosition);
  3430. 						}
  3431.  
  3432. 						vision.leaderboard = lb;
  3433. 						break;
  3434. 					}
  3435.  
  3436. 					case 0x40: { // border update
  3437. 						vision.border = {
  3438. 							l: dat.getFloat64(o, true),
  3439. 							t: dat.getFloat64(o + 8, true),
  3440. 							r: dat.getFloat64(o + 16, true),
  3441. 							b: dat.getFloat64(o + 24, true),
  3442. 						};
  3443. 						break;
  3444. 					}
  3445.  
  3446. 					case 0x63: { // chat message
  3447. 						// only handle non-server chat messages on the primary tab, to prevent duplicate messages
  3448. 						const flags = dat.getUint8(o++);
  3449. 						const server = flags & 0x80;
  3450. 						if (view !== world.viewId.primary && !server) return; // skip sigmod processing too
  3451. 						const rgb = /** @type {[number, number, number, number]} */
  3452. 							([dat.getUint8(o++) / 255, dat.getUint8(o++) / 255, dat.getUint8(o++) / 255, 1]);
  3453.  
  3454. 						let name; [name, o] = aux.readZTString(dat, o);
  3455. 						let msg; [msg, o] = aux.readZTString(dat, o);
  3456. 						ui.chat.add(name, rgb, msg, !!(flags & 0x80));
  3457. 						break;
  3458. 					}
  3459.  
  3460. 					case 0xb4: { // incorrect password alert
  3461. 						ui.error('Password is incorrect');
  3462. 						break;
  3463. 					}
  3464.  
  3465. 					case 0xfe: { // server stats (in response to a ping)
  3466. 						let statString; [statString, o] = aux.readZTString(dat, o);
  3467. 						vision.stats = JSON.parse(statString);
  3468. 						if (connection.pinged !== undefined) connection.latency = now - connection.pinged;
  3469. 						connection.pinged = undefined;
  3470. 						break;
  3471. 					}
  3472. 				}
  3473.  
  3474. 				sigmod.handleMessage?.(dat);
  3475. 			});
  3476. 			ws.addEventListener('open', () => {
  3477. 				establishedCallback?.();
  3478. 				establishedCallback = undefined;
  3479.  
  3480. 				const connection = net.connections.get(view);
  3481. 				const vision = world.views.get(view);
  3482. 				if (!connection || !vision) return ws.close();
  3483.  
  3484. 				ui.captcha.remove(view);
  3485.  
  3486. 				connection.rejections = 0;
  3487. 				connection.retries = 0;
  3488.  
  3489. 				vision.camera.x = vision.camera.tx = 0;
  3490. 				vision.camera.y = vision.camera.ty = 0;
  3491. 				vision.camera.scale = input.zoom;
  3492. 				vision.camera.tscale = 1;
  3493. 				ws.send(aux.textEncoder.encode('SIG 0.0.1\x00'));
  3494. 			});
  3495.  
  3496. 			return ws;
  3497. 		};
  3498.  
  3499. 		// ping loop
  3500. 		setInterval(() => {
  3501. 			for (const connection of net.connections.values()) {
  3502. 				if (!connection.handshake || connection.ws?.readyState !== WebSocket.OPEN) continue;
  3503. 				if (connection.pinged !== undefined) connection.latency = -1; // display '????ms'
  3504. 				connection.pinged = performance.now();
  3505. 				connection.ws.send(connection.handshake.shuffle.slice(0xfe, 0xfe + 1));
  3506. 			}
  3507. 		}, 2000);
  3508.  
  3509. 		// #2 : define helper functions
  3510. 		/** @type {HTMLSelectElement | null} */
  3511. 		const gamemode = document.querySelector('#gamemode');
  3512. 		/** @type {HTMLOptionElement | null} */
  3513. 		const firstGamemode = document.querySelector('#gamemode option');
  3514. 		net.url = () => {
  3515. 			if (location.search.startsWith('?ip=')) return location.search.slice('?ip='.length);
  3516. 			else return 'wss://' + (gamemode?.value || firstGamemode?.value || 'ca0.sigmally.com/ws/');
  3517. 		};
  3518.  
  3519. 		/** @param {symbol} view */
  3520. 		net.respawnable = view => {
  3521. 			const vision = world.views.get(view);
  3522. 			const con = net.connections.get(view);
  3523. 			if (!vision || !con?.ws) return false;
  3524.  
  3525. 			// only allow respawns on localhost (players on personal private servers can simply append `localhost`)
  3526. 			return world.score(view) < 5500 || con.ws.url.includes('localhost');
  3527. 		};
  3528.  
  3529. 		// disconnect if a different gamemode is selected
  3530. 		// an interval is preferred because the game can apply its gamemode setting *after* connecting without
  3531. 		// triggering any events
  3532. 		setInterval(() => {
  3533. 			for (const connection of net.connections.values()) {
  3534. 				if (!connection.ws) continue;
  3535. 				if (connection.ws.readyState !== WebSocket.CONNECTING && connection.ws.readyState !== WebSocket.OPEN)
  3536. 					continue;
  3537. 				if (connection.ws.url === net.url()) continue;
  3538. 				connection.ws.close();
  3539. 			}
  3540. 		}, 200);
  3541.  
  3542. 		/**
  3543. 		 * @param {symbol} view
  3544. 		 * @param {number} opcode
  3545. 		 * @param {object} data
  3546. 		 */
  3547. 		const sendJson = (view, opcode, data) => {
  3548. 			// must check readyState as a weboscket might be in the 'CLOSING' state (so annoying!)
  3549. 			const connection = net.connections.get(view);
  3550. 			if (!connection?.handshake || connection.ws?.readyState !== WebSocket.OPEN) return;
  3551. 			const dataBuf = aux.textEncoder.encode(JSON.stringify(data));
  3552. 			const dat = new DataView(new ArrayBuffer(dataBuf.byteLength + 2));
  3553.  
  3554. 			dat.setUint8(0, connection.handshake.shuffle[opcode]);
  3555. 			for (let i = 0; i < dataBuf.byteLength; ++i) {
  3556. 				dat.setUint8(1 + i, dataBuf[i]);
  3557. 			}
  3558. 			connection.ws.send(dat);
  3559. 		};
  3560.  
  3561. 		// #5 : export input functions
  3562. 		/**
  3563. 		 * @param {symbol} view
  3564. 		 * @param {number} x
  3565. 		 * @param {number} y
  3566. 		 */
  3567. 		net.move = (view, x, y) => {
  3568. 			const connection = net.connections.get(view);
  3569. 			if (!connection?.handshake || connection.ws?.readyState !== WebSocket.OPEN) return;
  3570. 			const dat = new DataView(new ArrayBuffer(13));
  3571.  
  3572. 			dat.setUint8(0, connection.handshake.shuffle[0x10]);
  3573. 			dat.setInt32(1, x, true);
  3574. 			dat.setInt32(5, y, true);
  3575. 			connection.ws.send(dat);
  3576. 		};
  3577.  
  3578. 		/** @param {number} opcode */
  3579. 		const bindOpcode = opcode => /** @param {symbol} view */ view => {
  3580. 			const connection = net.connections.get(view);
  3581. 			if (!connection?.handshake || connection.ws?.readyState !== WebSocket.OPEN) return;
  3582. 			connection.ws.send(connection.handshake.shuffle.slice(opcode, opcode + 1));
  3583. 		};
  3584. 		net.w = bindOpcode(21);
  3585. 		net.qdown = bindOpcode(18);
  3586. 		net.qup = bindOpcode(19);
  3587. 		net.split = bindOpcode(17);
  3588. 		// quests
  3589. 		net.food = bindOpcode(0xc0);
  3590. 		net.time = bindOpcode(0xbf);
  3591.  
  3592. 		// reversed argument order for sigmod compatibility
  3593. 		/**
  3594. 		 * @param {string} msg
  3595. 		 * @param {symbol=} view
  3596. 		 */
  3597. 		net.chat = (msg, view = world.selected) => {
  3598. 			const connection = net.connections.get(view);
  3599. 			if (!connection?.handshake || connection.ws?.readyState !== WebSocket.OPEN) return;
  3600.  
  3601. 			if (msg.toLowerCase().startsWith('/leaveworld') && !net.respawnable(view)) return; // prevent abuse
  3602.  
  3603. 			const msgBuf = aux.textEncoder.encode(msg);
  3604. 			const dat = new DataView(new ArrayBuffer(msgBuf.byteLength + 3));
  3605.  
  3606. 			dat.setUint8(0, connection.handshake.shuffle[0x63]);
  3607. 			// skip flags
  3608. 			for (let i = 0; i < msgBuf.byteLength; ++i) {
  3609. 				dat.setUint8(2 + i, msgBuf[i]);
  3610. 			}
  3611. 			connection.ws.send(dat);
  3612. 		};
  3613.  
  3614. 		/**
  3615. 		 * @param {symbol} view
  3616. 		 * @param {{ name: string, skin: string, [x: string]: any }} data
  3617. 		 */
  3618. 		net.play = (view, data) => {
  3619. 			const connection = net.connections.get(view);
  3620. 			const now = performance.now();
  3621. 			if (!data.state) {
  3622. 				if (!connection || (connection.playBlock !== undefined && now - connection.playBlock.started < 750) || world.score(view) > 0) return;
  3623. 				connection.playBlock = { state: 'joining', started: now };
  3624. 				ui.deathScreen.hide();
  3625. 			}
  3626. 			sendJson(view, 0x00, data);
  3627. 		};
  3628.  
  3629. 		/**
  3630. 		 * @param {symbol} view
  3631. 		 * @param {{ name: string, skin: string, [x: string]: any }} data
  3632. 		 */
  3633. 		net.respawn = (view, data) => {
  3634. 			const connection = net.connections.get(view);
  3635. 			if (!connection?.handshake || connection.ws?.readyState !== WebSocket.OPEN) return;
  3636.  
  3637. 			const now = performance.now();
  3638. 			if (connection.playBlock !== undefined && now - connection.playBlock.started < 750) return;
  3639.  
  3640. 			const score = world.score(view);
  3641. 			if (score <= 0) { // if dead, no need to leave+rejoin the world
  3642. 				net.play(view, data);
  3643. 				return;
  3644. 			} else if (!net.respawnable(view)) return;
  3645.  
  3646. 			if (settings.blockNearbyRespawns) {
  3647. 				const vision = world.views.get(view);
  3648. 				if (!vision?.border) return;
  3649.  
  3650. 				world.cameras(now);
  3651. 				const { l, r, t, b } = vision.border;
  3652.  
  3653. 				for (const [otherView, otherVision] of world.views) {
  3654. 					if (otherView === view || world.score(otherView) <= 0) continue;
  3655.  
  3656. 					// block respawns if both views are close enough (minimap squares give too large of a threshold)
  3657. 					const d = Math.hypot(vision.camera.tx - otherVision.camera.tx, vision.camera.ty - otherVision.camera.ty);
  3658. 					if (d <= Math.min(r - l, b - t) / 4) return;
  3659. 				}
  3660. 			}
  3661.  
  3662. 			connection.playBlock = { state: 'leaving', started: now };
  3663. 			net.chat('/leaveworld', view); // immediately remove from world, which removes all player cells
  3664. 			sendJson(view, 0x00, data); // enqueue into matchmaker (/joinworld is not available if dead)
  3665. 			setTimeout(() => { // wait until Matchmaker.update() puts us into a world
  3666. 			 	sendJson(view, 0x00, data); // spawn
  3667. 			}, 60); // = 40ms (1 tick) + 20ms (margin of error)
  3668. 		};
  3669.  
  3670. 		// create initial connection
  3671. 		world.create(world.viewId.primary);
  3672. 		net.create(world.viewId.primary);
  3673. 		let lastChangedSpectate = -Infinity;
  3674. 		setInterval(() => {
  3675. 			if (!settings.multibox && !settings.nbox) {
  3676. 				world.selected = world.viewId.primary;
  3677. 				ui.captcha.reposition();
  3678. 				ui.linesplit.update();
  3679. 			}
  3680.  
  3681. 			if (settings.spectator) {
  3682. 				const vision = world.create(world.viewId.spectate);
  3683. 				net.create(world.viewId.spectate);
  3684. 				net.play(world.viewId.spectate, { name: '', skin: '', clan: aux.userData?.clan, state: 2 });
  3685.  
  3686. 				// only press Q to toggle once in a while, in case ping is above 200
  3687. 				const now = performance.now();
  3688. 				if (now - lastChangedSpectate > 1000) {
  3689. 					if (vision.camera.tscale > 0.39) { // when roaming, the spectate scale is set to ~0.4
  3690. 						net.qdown(world.viewId.spectate);
  3691. 						lastChangedSpectate = now;
  3692. 					}
  3693. 				} else {
  3694. 					net.qup(world.viewId.spectate); // doubly serves as anti-afk
  3695. 				}
  3696. 			} else {
  3697. 				const con = net.connections.get(world.viewId.spectate);
  3698. 				if (con?.ws && con?.ws.readyState !== WebSocket.CLOSED && con?.ws.readyState !== WebSocket.CLOSING) {
  3699. 					con?.ws.close();
  3700. 				}
  3701. 				net.connections.delete(world.viewId.spectate);
  3702. 				world.views.delete(world.viewId.spectate);
  3703. 				input.views.delete(world.viewId.spectate);
  3704.  
  3705. 				for (const key of /** @type {const} */ (['cells', 'pellets'])) {
  3706. 					for (const [id, resolution] of world[key]) {
  3707. 						resolution.views.delete(world.viewId.spectate);
  3708. 						if (resolution.views.size === 0) world[key].delete(id);
  3709. 					}
  3710. 				}
  3711. 			}
  3712. 		}, 200);
  3713.  
  3714. 		// dumbass quest code go brrr
  3715. 		setInterval(() => {
  3716. 			for (const view of net.connections.keys()) net.time(view);
  3717. 		}, 1000);
  3718.  
  3719. 		return net;
  3720. 	})();
  3721.  
  3722.  
  3723.  
  3724. 	//////////////////////////
  3725. 	// Setup Input Handlers //
  3726. 	//////////////////////////
  3727. 	const input = (() => {
  3728. 		const input = {};
  3729.  
  3730. 		// #1 : general inputs
  3731. 		// between -1 and 1
  3732. 		/** @type {[number, number]} */
  3733. 		input.current = [0, 0];
  3734. 		/** @type {Map<symbol, {
  3735. 		 * 		forceW: boolean,
  3736. 		 * 		lock: { type: 'point', mouse: [number, number], world: [number, number], until: number }
  3737. 		 * 			| { type: 'horizontal', world: [number, number], lastSplit: number }
  3738. 		 * 			| { type: 'vertical', world: [number, number], lastSplit: number }
  3739. 		 * 			| { type: 'fixed' }
  3740. 		 * 			| undefined,
  3741. 		 * 		mouse: [number, number], // between -1 and 1
  3742. 		 * 		w: boolean,
  3743. 		 * 		world: [number, number], // world position; only updates when tab is selected
  3744. 		 * }>} */
  3745. 		input.views = new Map();
  3746. 		input.zoom = 1;
  3747.  
  3748. 		input.nboxSelectedPairs = [world.multis[0], world.multis[2], world.multis[4], world.multis[6]];
  3749. 		input.nboxSelectedReal = world.viewId.primary;
  3750. 		/** @type {Set<symbol>} */
  3751. 		input.nboxSelectedTemporary = new Set();
  3752.  
  3753. 		/** @param {symbol} view */
  3754. 		const create = view => {
  3755. 			const old = input.views.get(view);
  3756. 			if (old) return old;
  3757.  
  3758. 			/** @type {typeof input.views extends Map<symbol, infer T> ? T : never} */
  3759. 			const inputs = { forceW: false, lock: undefined, mouse: [0, 0], w: false, world: [0, 0] };
  3760. 			input.views.set(view, inputs);
  3761. 			return inputs;
  3762. 		};
  3763.  
  3764. 		/**
  3765. 		 * @param {symbol} view
  3766. 		 * @param {[number, number]} x, y
  3767. 		 * @returns {[number, number]}
  3768. 		 */
  3769. 		input.toWorld = (view, [x, y]) => {
  3770. 			const camera = world.views.get(view)?.camera;
  3771. 			if (!camera) return [0, 0];
  3772. 			return [
  3773. 				camera.x + x * (innerWidth / innerHeight) * 540 / camera.scale,
  3774. 				camera.y + y * 540 / camera.scale,
  3775. 			];
  3776. 		};
  3777.  
  3778. 		// sigmod freezes the player by overlaying an invisible div, so we just listen for canvas movements instead
  3779. 		addEventListener('mousemove', e => {
  3780. 			if (ui.escOverlayVisible()) return;
  3781. 			// sigmod freezes the player by overlaying an invisible div, so we respect it
  3782. 			if (e.target instanceof HTMLDivElement
  3783. 				&& /** @type {CSSUnitValue | undefined} */ (e.target.attributeStyleMap.get('z-index'))?.value === 99)
  3784. 				return;
  3785. 			input.current = [(e.clientX / innerWidth * 2) - 1, (e.clientY / innerHeight * 2) - 1];
  3786. 		});
  3787.  
  3788. 		const unfocused = () => ui.escOverlayVisible() || document.activeElement?.tagName === 'INPUT';
  3789.  
  3790. 		/** @param {symbol} view */
  3791. 		input.name = view => {
  3792. 			const i = world.multis.indexOf(view);
  3793. 			if (i <= 0) return input.nick[0]?.value || '';
  3794. 			else return settings.multiNames[i - 1] || '';
  3795. 		};
  3796.  
  3797. 		/**
  3798. 		 * @param {symbol} view
  3799. 		 * @param {boolean} forceUpdate
  3800. 		 */
  3801. 		input.move = (view, forceUpdate) => {
  3802. 			const now = performance.now();
  3803. 			const inputs = input.views.get(view) ?? create(view);
  3804. 			if (view === world.selected) inputs.mouse = input.current;
  3805.  
  3806. 			const worldMouse = input.toWorld(view, inputs.mouse);
  3807.  
  3808. 			switch (inputs.lock?.type) {
  3809. 				case 'point':
  3810. 					if (now > inputs.lock.until) break;
  3811. 					const d = Math.hypot(inputs.mouse[0] - inputs.lock.mouse[0], inputs.mouse[1] - inputs.lock.mouse[1]);
  3812. 					// only lock the mouse as long as the mouse has not moved further than 25% (of 2) of the screen away
  3813. 					if (d < 0.5 || Number.isNaN(d)) {
  3814. 						net.move(view, ...inputs.lock.world);
  3815. 						return;
  3816. 					}
  3817. 					break;
  3818. 				
  3819. 				case 'horizontal':
  3820. 					if (settings.moveAfterLinesplit && inputs.lock.lastSplit !== -Infinity) {
  3821. 						// move horizontally only after splitting to maximize distance travelled
  3822. 						if (Math.abs(inputs.mouse[0]) <= 0.2) {
  3823. 							net.move(view, worldMouse[0], inputs.lock.world[1]);
  3824. 						} else {
  3825. 							net.move(view, (2 ** 31 - 1) * (inputs.mouse[0] >= 0 ? 1 : -1), inputs.lock.world[1]);
  3826. 						}
  3827. 					} else {
  3828. 						net.move(view, ...inputs.lock.world);
  3829. 					}
  3830. 					return;
  3831.  
  3832. 				case 'vertical':
  3833. 					if (settings.moveAfterLinesplit ? inputs.lock.lastSplit !== -Infinity : now - inputs.lock.lastSplit <= 150) {
  3834. 						// vertical linesplits require a bit of upwards movement to split upwards
  3835. 						if (Math.abs(inputs.mouse[1]) <= 0.2) {
  3836. 							net.move(view, inputs.lock.world[0], worldMouse[1]);
  3837. 						} else {
  3838. 							net.move(view, inputs.lock.world[0], (2 ** 31 - 1) * (inputs.mouse[1] >= 0 ? 1 : -1));
  3839. 						}
  3840. 					} else {
  3841. 						net.move(view, ...inputs.lock.world);
  3842. 					}
  3843. 					return;
  3844.  
  3845. 				case 'fixed':
  3846. 					// rotate around the tab's camera center (otherwise, spinning around on a tab feels unnatural)
  3847. 					const worldCenter = world.singleCamera(view, undefined, settings.camera !== 'default' ? 2 : 0, now);
  3848. 					const x = worldMouse[0] - worldCenter.sumX / worldCenter.weight;
  3849. 					const y = worldMouse[1] - worldCenter.sumY / worldCenter.weight;
  3850. 					// create two points along the 2^31 integer boundary (OgarII uses ~~x and ~~y to truncate positions
  3851. 					// to 32-bit integers), choose which one is closer to zero (the one actually within the boundary)
  3852. 					const max = 2 ** 31 - 1;
  3853. 					const xClamp = /** @type {const} */ ([max * Math.sign(x), y / x * max * Math.sign(x)]);
  3854. 					const yClamp = /** @type {const} */ ([x / y * max * Math.sign(y), max * Math.sign(y)]);
  3855. 					if (Math.hypot(...xClamp) < Math.hypot(...yClamp)) net.move(view, ...xClamp);
  3856. 					else net.move(view, ...yClamp);
  3857. 					return;
  3858. 			}
  3859.  
  3860. 			inputs.lock = undefined;
  3861. 			if (world.selected === view || forceUpdate) inputs.world = worldMouse;
  3862. 			net.move(view, ...inputs.world);
  3863. 		};
  3864.  
  3865. 		/**
  3866. 		 * @param {symbol} view
  3867. 		 * @param {number=} count
  3868. 		 */
  3869. 		input.split = (view, count = 1) => {
  3870. 			const inputs = create(view);
  3871. 			if (inputs?.lock?.type === 'vertical' || inputs?.lock?.type === 'horizontal') {
  3872. 				inputs.lock.lastSplit = performance.now();
  3873. 			}
  3874. 			input.move(view, true);
  3875. 			for (let i = 0; i < count; ++i) net.split(view);
  3876. 		};
  3877.  
  3878. 		/** @param {symbol} view */
  3879. 		input.autoRespawn = view => {
  3880. 			if (!world.alive()) return;
  3881. 			net.play(world.selected, input.playData(input.name(view), false));
  3882. 		};
  3883.  
  3884. 		/**
  3885. 		 * @param {symbol} view
  3886. 		 */
  3887. 		input.tab = view => {
  3888. 			if (view === world.selected) return;
  3889. 			const oldView = world.selected;
  3890. 			const inputs = create(oldView);
  3891. 			const newInputs = create(view);
  3892.  
  3893. 			newInputs.w = inputs.w;
  3894. 			inputs.w = false; // stop current tab from feeding; don't change forceW
  3895. 			// update mouse immediately (after setTimeout, when mouse events happen)
  3896. 			setTimeout(() => inputs.world = input.toWorld(oldView, inputs.mouse = input.current));
  3897.  
  3898. 			world.selected = view;
  3899. 			world.create(world.selected);
  3900. 			net.create(world.selected);
  3901.  
  3902. 			ui.captcha.reposition();
  3903. 			ui.linesplit.update();
  3904. 		};
  3905.  
  3906. 		setInterval(() => {
  3907. 			create(world.selected);
  3908. 			for (const [view, inputs] of input.views) {
  3909. 				input.move(view, false);
  3910. 				// if tapping W very fast, make sure at least one W is ejected
  3911. 				if (inputs.forceW || inputs.w) net.w(view);
  3912. 				inputs.forceW = false;
  3913. 			}
  3914. 		}, 40);
  3915.  
  3916. 		/** @type {Node | null} */
  3917. 		let sigmodChat;
  3918. 		setInterval(() => sigmodChat ||= document.querySelector('.modChat'), 500);
  3919. 		addEventListener('wheel', e => {
  3920. 			if (unfocused()) return;
  3921. 			// when scrolling through sigmod chat, don't allow zooming.
  3922. 			// for consistency, use the container .modChat and not #mod-messages as #mod-messages can have zero height
  3923. 			if (sigmodChat && sigmodChat.contains(/** @type {Node} */ (e.target))) return;
  3924. 			// support for the very obscure "scroll by page" setting in windows
  3925. 			// i don't think browsers support DOM_DELTA_LINE, so assume DOM_DELTA_PIXEL otherwise
  3926. 			const deltaY = e.deltaMode === e.DOM_DELTA_PAGE ? e.deltaY : e.deltaY / 100;
  3927. 			input.zoom *= 0.8 ** (deltaY * settings.scrollFactor);
  3928. 			const minZoom = (!settings.multibox && !settings.nbox && !aux.settings.zoomout) ? 1 : 0.8 ** 15;
  3929. 			input.zoom = Math.min(Math.max(input.zoom, minZoom), 0.8 ** -21);
  3930. 		});
  3931.  
  3932. 		/**
  3933. 		 * @param {KeyboardEvent | MouseEvent} e
  3934. 		 * @returns {boolean}
  3935. 		 */
  3936. 		const handleKeybind = e => {
  3937. 			const keybind = aux.keybind(e)?.toLowerCase();
  3938. 			if (!keybind) return false;
  3939.  
  3940. 			const release = e.type === 'keyup' || e.type === 'mouseup';
  3941. 			if (!release && settings.multibox && keybind === settings.multibox.toLowerCase()) {
  3942. 				e.preventDefault(); // prevent selecting anything on the page
  3943.  
  3944. 				// cycle to the next tab
  3945. 				const tabs = settings.nbox ? settings.nboxCount : 2;
  3946. 				const i = world.multis.indexOf(world.selected);
  3947. 				const newI = Math.min((i + 1) % tabs, world.multis.length);
  3948. 				input.nboxSelectedNonTemporary = world.multis[newI];
  3949.  
  3950. 				input.nboxSelectedTemporary.clear();
  3951. 				input.nboxSelectedNonTemporary = world.multis[newI];
  3952. 				input.nboxSelectedPairs[Math.floor(newI / 2)] = world.multis[newI];
  3953.  
  3954. 				input.tab(world.multis[newI]);
  3955. 				input.autoRespawn(world.multis[newI]);
  3956. 				return true;
  3957. 			}
  3958.  
  3959. 			if (settings.nbox) {
  3960. 				if (!release && keybind === settings.nboxSwitchPair.toLowerCase()) {
  3961. 					const i = world.multis.indexOf(input.nboxSelectedReal);
  3962. 					const pair = Math.floor(i / 2);
  3963. 					// don't allow switching in a pair that doesn't exist
  3964. 					const partner = pair * 2 === i ? (i + 1 < settings.nboxCount ? i + 1 : i) : i - 1;
  3965. 					input.nboxSelectedReal = input.nboxSelectedPairs[pair] = world.multis[partner];
  3966. 					input.nboxSelectedTemporary.clear(); // but still clear the temporary holds regardless
  3967. 					input.tab(world.multis[partner]);
  3968. 					input.autoRespawn(world.selected);
  3969. 					return true;
  3970. 				}
  3971.  
  3972. 				if (!release && keybind === settings.nboxCyclePair.toLowerCase()) {
  3973. 					const i = world.multis.indexOf(input.nboxSelectedReal);
  3974. 					const pair = Math.floor(i / 2);
  3975. 					const newPair = (pair + 1) % Math.ceil(settings.nboxCount / 2);
  3976. 					input.nboxSelectedReal = input.nboxSelectedPairs[newPair];
  3977. 					input.nboxSelectedTemporary.clear();
  3978. 					input.tab(input.nboxSelectedReal);
  3979. 					input.autoRespawn(world.selected);
  3980. 					return true;
  3981. 				}
  3982.  
  3983. 				for (let i = 0; i < settings.nboxCount; ++i) {
  3984. 					if (!release && keybind === settings.nboxSelectKeybinds[i].toLowerCase()) {
  3985. 						input.nboxSelectedReal = input.nboxSelectedPairs[Math.floor(i / 2)] = world.multis[i];
  3986. 						input.nboxSelectedTemporary.clear();
  3987. 						input.tab(world.multis[i]);
  3988. 						input.autoRespawn(world.selected);
  3989. 						return true;
  3990. 					}
  3991.  
  3992. 					const hold = settings.nboxHoldKeybinds[i].toLowerCase();
  3993. 					if (keybind === hold || (release && hold.endsWith('+' + keybind))) {
  3994. 						if (release) {
  3995. 							input.nboxSelectedTemporary.delete(world.multis[i]);
  3996. 							if (input.nboxSelectedTemporary.size === 0) input.tab(input.nboxSelectedReal);
  3997. 						} else {
  3998. 							input.nboxSelectedTemporary.add(world.multis[i]);
  3999. 							input.tab(world.multis[i]);
  4000. 						}
  4001. 						input.autoRespawn(world.selected);
  4002. 						return true;
  4003. 					}
  4004. 				}
  4005. 			}
  4006.  
  4007. 			return false;
  4008. 		};
  4009.  
  4010. 		addEventListener('keydown', e => {
  4011. 			const view = world.selected;
  4012. 			const inputs = input.views.get(view) ?? create(view);
  4013.  
  4014. 			// never allow pressing Tab by itself
  4015. 			if (e.code === 'Tab' && !e.ctrlKey && !e.altKey && !e.metaKey) e.preventDefault();
  4016.  
  4017. 			if (e.code === 'Escape') {
  4018. 				if (document.activeElement === ui.chat.input) ui.chat.input.blur();
  4019. 				else ui.toggleEscOverlay();
  4020. 				return;
  4021. 			}
  4022.  
  4023. 			if (unfocused()) {
  4024. 				if (e.code === 'Enter' && document.activeElement === ui.chat.input && ui.chat.input.value.length > 0) {
  4025. 					net.chat(ui.chat.input.value.slice(0, 15), world.selected);
  4026. 					ui.chat.input.value = '';
  4027. 					ui.chat.input.blur();
  4028. 				}
  4029.  
  4030. 				return;
  4031. 			}
  4032.  
  4033. 			if (handleKeybind(e)) return;
  4034.  
  4035. 			if (settings.blockBrowserKeybinds) {
  4036. 				if (e.code === 'F11') {
  4037. 					// force true fullscreen to make sure Ctrl+W and other binds are caught.
  4038. 					// not well supported on safari
  4039. 					if (!document.fullscreenElement) {
  4040. 						document.body.requestFullscreen?.()?.catch(() => {});
  4041. 						/** @type {any} */ (navigator).keyboard?.lock()?.catch(() => {});
  4042. 					} else {
  4043. 						document.exitFullscreen?.()?.catch(() => {});
  4044. 						/** @type {any} */ (navigator).keyboard?.unlock()?.catch(() => {});
  4045. 					}
  4046. 				}
  4047.  
  4048. 				if (e.code !== 'Tab') e.preventDefault(); // allow ctrl+tab and alt+tab
  4049. 			} else if (e.ctrlKey && e.code === 'KeyW') {
  4050. 				e.preventDefault(); // doesn't seem to work for me, but works for others
  4051. 			}
  4052.  
  4053. 			// if fast feed is rebound, only allow the spoofed W's from sigmod
  4054. 			let fastFeeding = e.code === 'KeyW';
  4055. 			if (sigmod.settings.rapidFeedKey && sigmod.settings.rapidFeedKey !== 'w') {
  4056. 				fastFeeding &&= !e.isTrusted;
  4057. 			}
  4058. 			if (fastFeeding) inputs.forceW = inputs.w = true;
  4059.  
  4060. 			switch (e.code) {
  4061. 				case 'KeyQ':
  4062. 					if (!e.repeat) net.qdown(world.selected);
  4063. 					break;
  4064. 				case 'Space': {
  4065. 					if (!e.repeat) {
  4066. 						// send mouse position immediately, so the split will go in the correct direction.
  4067. 						// setTimeout is used to ensure that our mouse position is actually updated (it comes after
  4068. 						// keydown events)
  4069. 						setTimeout(() => input.split(view));
  4070. 					}
  4071. 					break;
  4072. 				}
  4073. 				case 'Enter': {
  4074. 					ui.chat.input.focus();
  4075. 					break;
  4076. 				}
  4077. 			}
  4078.  
  4079. 			const vision = world.views.get(view);
  4080. 			if (!vision) return;
  4081.  
  4082. 			// use e.isTrusted in case the key was bound to W
  4083. 			if (e.isTrusted && !e.repeat) {
  4084. 				if (e.key.toLowerCase() === sigmod.settings.doubleKey?.toLowerCase()) {
  4085. 					setTimeout(() => input.split(view));
  4086. 					// separate both splits by 50ms (at least one tick, 40ms) to ensure the correct piece goes in front
  4087. 					// only when pushsplitting
  4088. 					setTimeout(() => input.split(view), (vision.owned.size > 4 && settings.delayDouble) ? 50 : 0);
  4089. 				} else if (e.key.toLowerCase() === sigmod.settings.tripleKey?.toLowerCase()) {
  4090. 					// don't override any locks, and don't update 'until'
  4091. 					inputs.lock ||= {
  4092. 						type: 'point',
  4093. 						mouse: inputs.mouse,
  4094. 						world: input.toWorld(world.selected, inputs.mouse),
  4095. 						until: performance.now() + 650,
  4096. 					};
  4097. 					setTimeout(() => input.split(view, 3));
  4098. 				} else if (e.key.toLowerCase() === sigmod.settings.quadKey?.toLowerCase()) {
  4099. 					setTimeout(() => input.split(view, 4));
  4100. 				}
  4101. 			}
  4102. 			const camera = world.singleCamera(view, vision, 0, Infinity); // use latest data (.nx, .ny), uninterpolated
  4103.  
  4104. 			if (e.isTrusted && e.key.toLowerCase() === sigmod.settings.horizontalLineKey?.toLowerCase()) {
  4105. 				if (inputs.lock?.type === 'horizontal') {
  4106. 					inputs.lock = undefined;
  4107. 					ui.linesplit.update();
  4108. 					return;
  4109. 				}
  4110.  
  4111. 				inputs.lock = {
  4112. 					type: 'horizontal',
  4113. 					world: [camera.sumX / camera.weight, camera.sumY / camera.weight],
  4114. 					lastSplit: -Infinity,
  4115. 				};
  4116. 				ui.linesplit.update();
  4117. 				return;
  4118. 			}
  4119.  
  4120. 			if (e.isTrusted && e.key.toLowerCase() === sigmod.settings.verticalLineKey?.toLowerCase()) {
  4121. 				if (inputs.lock?.type === 'vertical') {
  4122. 					inputs.lock = undefined;
  4123. 					ui.linesplit.update();
  4124. 					return;
  4125. 				}
  4126.  
  4127. 				inputs.lock = {
  4128. 					type: 'vertical',
  4129. 					world: [camera.sumX / camera.weight, camera.sumY / camera.weight],
  4130. 					lastSplit: -Infinity,
  4131. 				};
  4132. 				ui.linesplit.update();
  4133. 				return;
  4134. 			}
  4135.  
  4136. 			if (e.isTrusted && e.key.toLowerCase() === sigmod.settings.fixedLineKey?.toLowerCase()) {
  4137. 				if (inputs.lock?.type === 'fixed') inputs.lock = undefined;
  4138. 				else inputs.lock = { type: 'fixed' };
  4139. 				ui.linesplit.update();
  4140. 				return;
  4141. 			}
  4142.  
  4143. 			if (e.isTrusted && e.key.toLowerCase() === sigmod.settings.respawnKey?.toLowerCase()) {
  4144. 				net.respawn(view, input.playData(input.name(view), false));
  4145. 				return;
  4146. 			}
  4147. 		});
  4148.  
  4149. 		addEventListener('keyup', e => {
  4150. 			// allow inputs if unfocused
  4151. 			if (e.code === 'KeyQ') net.qup(world.selected);
  4152. 			else if (e.code === 'KeyW') {
  4153. 				const inputs = input.views.get(world.selected) ?? create(world.selected);
  4154. 				inputs.w = false; // don't change forceW
  4155. 			}
  4156.  
  4157. 			if (handleKeybind(e)) return;
  4158. 		});
  4159.  
  4160. 		addEventListener('mousedown', e => {
  4161. 			if (unfocused()) return;
  4162. 			handleKeybind(e);
  4163. 		});
  4164. 		addEventListener('mouseup', e => {
  4165. 			if (unfocused()) return;
  4166. 			handleKeybind(e);
  4167. 		});
  4168.  
  4169. 		// prompt before closing window
  4170. 		addEventListener('beforeunload', e => e.preventDefault());
  4171.  
  4172. 		// prevent right clicking on the game
  4173. 		ui.game.canvas.addEventListener('contextmenu', e => e.preventDefault());
  4174.  
  4175. 		// prevent dragging when some things are selected - i have a habit of unconsciously clicking all the time,
  4176. 		// making me regularly drag text, disabling my mouse inputs for a bit
  4177. 		addEventListener('dragstart', e => e.preventDefault());
  4178.  
  4179.  
  4180.  
  4181. 		// #2 : play and spectate buttons, and captcha
  4182. 		/**
  4183. 		 * @param {string} name
  4184. 		 * @param {boolean} spectating
  4185. 		 */
  4186. 		input.playData = (name, spectating) => {
  4187. 			/** @type {HTMLInputElement | null} */
  4188. 			const password = document.querySelector('input#password');
  4189.  
  4190. 			return {
  4191. 				state: spectating ? 2 : undefined,
  4192. 				name,
  4193. 				skin: aux.userData ? aux.settings.skin : '',
  4194. 				token: aux.userData?.token,
  4195. 				sub: (aux.userData?.subscription ?? 0) > Date.now(),
  4196. 				clan: aux.userData?.clan,
  4197. 				showClanmates: aux.settings.showClanmates,
  4198. 				password: password?.value,
  4199. 				email: aux.userData?.email,
  4200. 			};
  4201. 		};
  4202.  
  4203. 		/** @type {HTMLInputElement[]} */
  4204. 		input.nick = [aux.require(document.querySelector('input#nick'),
  4205. 			'Can\'t find the nickname element. Try reloading the page?')];
  4206.  
  4207. 		const nickList = () => {
  4208. 			const target = settings.nbox ? settings.nboxCount : settings.multibox ? 2 : 1;
  4209. 			for (let i = input.nick.length; i < target; ++i) {
  4210. 				const el = /** @type {HTMLInputElement} */ (input.nick[0].cloneNode(true));
  4211. 				el.maxLength = 50;
  4212. 				el.placeholder = `Nickname #${i + 1}`;
  4213. 				el.value = settings.multiNames[i - 1] || '';
  4214.  
  4215. 				el.addEventListener('change', () => {
  4216. 					settings.multiNames[i - 1] = el.value;
  4217. 					settings.save();
  4218. 				});
  4219.  
  4220. 				const row = /** @type {Element} */ (input.nick[0].parentElement?.cloneNode());
  4221. 				row.appendChild(el);
  4222. 				input.nick[input.nick.length - 1].parentElement?.insertAdjacentElement('afterend', row);
  4223. 				input.nick.push(el);
  4224. 			}
  4225.  
  4226. 			for (let i = input.nick.length; i > target; --i) {
  4227. 				input.nick.pop()?.parentElement?.remove();
  4228. 			}
  4229. 		};
  4230. 		nickList();
  4231. 		setInterval(nickList, 500);
  4232.  
  4233. 		/** @type {HTMLButtonElement} */
  4234. 		const play = aux.require(document.querySelector('button#play-btn'),
  4235. 			'Can\'t find the play button. Try reloading the page?');
  4236. 		/** @type {HTMLButtonElement} */
  4237. 		const spectate = aux.require(document.querySelector('button#spectate-btn'),
  4238. 			'Can\'t find the spectate button. Try reloading the page?');
  4239.  
  4240. 		play.addEventListener('click', () => {
  4241. 			const con = net.connections.get(world.selected);
  4242. 			if (!con?.handshake) return;
  4243. 			ui.toggleEscOverlay(false);
  4244. 			net.play(world.selected, input.playData(input.name(world.selected), false));
  4245. 		});
  4246. 		spectate.addEventListener('click', () => {
  4247. 			const con = net.connections.get(world.selected);
  4248. 			if (!con?.handshake) return;
  4249. 			ui.toggleEscOverlay(false);
  4250. 			net.play(world.selected, input.playData(input.name(world.selected), true));
  4251. 		});
  4252.  
  4253. 		play.disabled = spectate.disabled = true;
  4254. 		setInterval(() => {
  4255. 			play.disabled = spectate.disabled = !net.connections.get(world.selected)?.handshake;
  4256. 		}, 100);
  4257.  
  4258. 		return input;
  4259. 	})();
  4260.  
  4261.  
  4262.  
  4263. 	//////////////////////////
  4264. 	// Configure WebGL Data //
  4265. 	//////////////////////////
  4266. 	const glconf = (() => {
  4267. 		// note: WebGL functions only really return null if the context is lost - in which case, data will be replaced
  4268. 		// anyway after it's restored. so, we cast everything to a non-null type.
  4269. 		const glconf = {};
  4270. 		const programs = glconf.programs = {};
  4271. 		const uniforms = glconf.uniforms = {};
  4272. 		/** @type {WebGLBuffer} */
  4273. 		glconf.pelletAlphaBuffer = /** @type {never} */ (undefined);
  4274. 		/** @type {WebGLBuffer} */
  4275. 		glconf.pelletBuffer = /** @type {never} */ (undefined);
  4276. 		glconf.vao = {};
  4277.  
  4278. 		const gl = ui.game.gl;
  4279. 		/** @type {Map<string, number>} */
  4280. 		const uboBindings = new Map();
  4281.  
  4282. 		/**
  4283. 		 * @param {string} name
  4284. 		 * @param {number} type
  4285. 		 * @param {string} source
  4286. 		 */
  4287. 		function shader(name, type, source) {
  4288. 			const s = /** @type {WebGLShader} */ (gl.createShader(type));
  4289. 			gl.shaderSource(s, source);
  4290. 			gl.compileShader(s);
  4291.  
  4292. 			// note: compilation errors should not happen in production
  4293. 			aux.require(
  4294. 				gl.getShaderParameter(s, gl.COMPILE_STATUS) || gl.isContextLost(),
  4295. 				`Can\'t compile WebGL2 shader "${name}". You might be on a weird browser.\n\nFull error log:\n` +
  4296. 				gl.getShaderInfoLog(s),
  4297. 			);
  4298.  
  4299. 			return s;
  4300. 		}
  4301.  
  4302. 		/**
  4303. 		 * @param {string} name
  4304. 		 * @param {string} vSource
  4305. 		 * @param {string} fSource
  4306. 		 * @param {string[]} ubos
  4307. 		 * @param {string[]} textures
  4308. 		 */
  4309. 		function program(name, vSource, fSource, ubos, textures) {
  4310. 			const vShader = shader(`${name}.vShader`, gl.VERTEX_SHADER, vSource.trim());
  4311. 			const fShader = shader(`${name}.fShader`, gl.FRAGMENT_SHADER, fSource.trim());
  4312. 			const p = /** @type {WebGLProgram} */ (gl.createProgram());
  4313.  
  4314. 			gl.attachShader(p, vShader);
  4315. 			gl.attachShader(p, fShader);
  4316. 			gl.linkProgram(p);
  4317.  
  4318. 			// note: linking errors should not happen in production
  4319. 			aux.require(
  4320. 				gl.getProgramParameter(p, gl.LINK_STATUS) || gl.isContextLost(),
  4321. 				`Can\'t link WebGL2 program "${name}". You might be on a weird browser.\n\nFull error log:\n` +
  4322. 				gl.getProgramInfoLog(p),
  4323. 			);
  4324.  
  4325. 			for (const tag of ubos) {
  4326. 				const index = gl.getUniformBlockIndex(p, tag); // returns 4294967295 if invalid... just don't make typos
  4327. 				let binding = uboBindings.get(tag);
  4328. 				if (binding === undefined)
  4329. 					uboBindings.set(tag, binding = uboBindings.size);
  4330. 				gl.uniformBlockBinding(p, index, binding);
  4331.  
  4332. 				const size = gl.getActiveUniformBlockParameter(p, index, gl.UNIFORM_BLOCK_DATA_SIZE);
  4333. 				const ubo = uniforms[tag] = gl.createBuffer();
  4334. 				gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
  4335. 				gl.bufferData(gl.UNIFORM_BUFFER, size, gl.DYNAMIC_DRAW);
  4336. 				gl.bindBufferBase(gl.UNIFORM_BUFFER, binding, ubo);
  4337. 			}
  4338.  
  4339. 			// bind texture uniforms to TEXTURE0, TEXTURE1, etc.
  4340. 			gl.useProgram(p);
  4341. 			for (let i = 0; i < textures.length; ++i) {
  4342. 				const loc = gl.getUniformLocation(p, textures[i]);
  4343. 				gl.uniform1i(loc, i);
  4344. 			}
  4345. 			gl.useProgram(null);
  4346.  
  4347. 			return p;
  4348. 		}
  4349.  
  4350. 		const parts = {
  4351. 			boilerplate: '#version 300 es\nprecision highp float; precision highp int;',
  4352. 			borderUbo: `layout(std140) uniform Border { // size = 0x28
  4353. 				vec4 u_border_color; // @ 0x00, i = 0
  4354. 				vec4 u_border_xyzw_lrtb; // @ 0x10, i = 4
  4355. 				int u_border_flags; // @ 0x20, i = 8
  4356. 				float u_background_width; // @ 0x24, i = 9
  4357. 				float u_background_height; // @ 0x28, i = 10
  4358. 				float u_border_time; // @ 0x2c, i = 11
  4359. 			};`,
  4360. 			cameraUbo: `layout(std140) uniform Camera { // size = 0x10
  4361. 				float u_camera_ratio; // @ 0x00
  4362. 				float u_camera_scale; // @ 0x04
  4363. 				vec2 u_camera_pos; // @ 0x08
  4364. 			};`,
  4365. 			cellUbo: `layout(std140) uniform Cell { // size = 0x28
  4366. 				float u_cell_radius; // @ 0x00, i = 0
  4367. 				float u_cell_radius_skin; // @ 0x04, i = 1
  4368. 				vec2 u_cell_pos; // @ 0x08, i = 2
  4369. 				vec4 u_cell_color; // @ 0x10, i = 4
  4370. 				float u_cell_alpha; // @ 0x20, i = 8
  4371. 				int u_cell_flags; // @ 0x24, i = 9
  4372. 			};`,
  4373. 			cellSettingsUbo: `layout(std140) uniform CellSettings { // size = 0x40
  4374. 				vec4 u_cell_active_outline; // @ 0x00
  4375. 				vec4 u_cell_inactive_outline; // @ 0x10
  4376. 				vec4 u_cell_unsplittable_outline; // @ 0x20
  4377. 				vec4 u_cell_subtle_outline_override; // @ 0x30
  4378. 				float u_cell_active_outline_thickness; // @ 0x40
  4379. 			};`,
  4380. 			circleUbo: `layout(std140) uniform Circle { // size = 0x08
  4381. 				float u_circle_alpha; // @ 0x00
  4382. 				float u_circle_scale; // @ 0x04
  4383. 			};`,
  4384. 			textUbo: `layout(std140) uniform Text { // size = 0x38
  4385. 				vec4 u_text_color1; // @ 0x00, i = 0
  4386. 				vec4 u_text_color2; // @ 0x10, i = 4
  4387. 				float u_text_alpha; // @ 0x20, i = 8
  4388. 				float u_text_aspect_ratio; // @ 0x24, i = 9
  4389. 				float u_text_scale; // @ 0x28, i = 10
  4390. 				int u_text_silhouette_enabled; // @ 0x2c, i = 11
  4391. 				vec2 u_text_offset; // @ 0x30, i = 12
  4392. 			};`,
  4393. 			tracerUbo: `layout(std140) uniform Tracer { // size = 0x10
  4394. 				vec4 u_tracer_color; // @ 0x00, i = 0
  4395. 				float u_tracer_thickness; // @ 0x10, i = 4
  4396. 			};`,
  4397. 		};
  4398.  
  4399.  
  4400.  
  4401. 		glconf.init = () => {
  4402. 			gl.enable(gl.BLEND);
  4403. 			gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  4404.  
  4405. 			// create programs and uniforms
  4406. 			programs.bg = program('bg', `
  4407. 				${parts.boilerplate}
  4408. 				layout(location = 0) in vec2 a_vertex;
  4409. 				${parts.borderUbo}
  4410. 				${parts.cameraUbo}
  4411. 				flat out float f_blur;
  4412. 				flat out float f_thickness;
  4413. 				out vec2 v_uv;
  4414. 				out vec2 v_world_pos;
  4415.  
  4416. 				void main() {
  4417. 					f_blur = 1.0 * (540.0 * u_camera_scale);
  4418. 					f_thickness = max(3.0 / f_blur, 25.0); // force border to always be visible, otherwise it flickers
  4419.  
  4420. 					v_world_pos = a_vertex * vec2(u_camera_ratio, 1.0) / u_camera_scale;
  4421. 					v_world_pos += u_camera_pos * vec2(1.0, -1.0);
  4422.  
  4423. 					if ((u_border_flags & 0x04) != 0) { // background repeating
  4424. 						v_uv = v_world_pos * 0.02 * (50.0 / u_background_width);
  4425. 						v_uv /= vec2(1.0, u_background_height / u_background_width);
  4426. 					} else {
  4427. 						v_uv = (v_world_pos - vec2(u_border_xyzw_lrtb.x, u_border_xyzw_lrtb.z))
  4428. 							/ vec2(u_border_xyzw_lrtb.y - u_border_xyzw_lrtb.x,
  4429. 								u_border_xyzw_lrtb.w - u_border_xyzw_lrtb.z);
  4430. 						v_uv = vec2(v_uv.x, 1.0 - v_uv.y); // flip vertically
  4431. 					}
  4432.  
  4433. 					gl_Position = vec4(a_vertex, 0, 1); // span the whole screen
  4434. 				}
  4435. 			`, `
  4436. 				${parts.boilerplate}
  4437. 				flat in float f_blur;
  4438. 				flat in float f_thickness;
  4439. 				in vec2 v_uv;
  4440. 				in vec2 v_world_pos;
  4441. 				${parts.borderUbo}
  4442. 				${parts.cameraUbo}
  4443. 				uniform sampler2D u_texture;
  4444. 				out vec4 out_color;
  4445.  
  4446. 				void main() {
  4447. 					if ((u_border_flags & 0x01) != 0) { // background enabled
  4448. 						if ((u_border_flags & 0x04) != 0 // repeating
  4449. 							|| (0.0 <= min(v_uv.x, v_uv.y) && max(v_uv.x, v_uv.y) <= 1.0)) { // within border
  4450. 							out_color = texture(u_texture, v_uv);
  4451. 						}
  4452. 					}
  4453.  
  4454. 					// make a larger inner rectangle and a normal inverted outer rectangle
  4455. 					float inner_alpha = min(
  4456. 						min((v_world_pos.x + f_thickness) - u_border_xyzw_lrtb.x,
  4457. 							u_border_xyzw_lrtb.y - (v_world_pos.x - f_thickness)),
  4458. 						min((v_world_pos.y + f_thickness) - u_border_xyzw_lrtb.z,
  4459. 							u_border_xyzw_lrtb.w - (v_world_pos.y - f_thickness))
  4460. 					);
  4461. 					float outer_alpha = max(
  4462. 						max(u_border_xyzw_lrtb.x - v_world_pos.x, v_world_pos.x - u_border_xyzw_lrtb.y),
  4463. 						max(u_border_xyzw_lrtb.z - v_world_pos.y, v_world_pos.y - u_border_xyzw_lrtb.w)
  4464. 					);
  4465. 					float alpha = clamp(f_blur * min(inner_alpha, outer_alpha), 0.0, 1.0);
  4466. 					if (u_border_color.a == 0.0) alpha = 0.0;
  4467.  
  4468. 					vec4 border_color;
  4469. 					if ((u_border_flags & 0x08) != 0) { // rainbow border
  4470. 						float angle = atan(v_world_pos.y, v_world_pos.x) + u_border_time;
  4471. 						float red = (2.0/3.0) * cos(6.0 * angle) + 1.0/3.0;
  4472. 						float green = (2.0/3.0) * cos(6.0 * angle - 2.0 * 3.1415926535 / 3.0) + 1.0/3.0;
  4473. 						float blue = (2.0/3.0) * cos(6.0 * angle - 4.0 * 3.1415926535 / 3.0) + 1.0/3.0;
  4474. 						border_color = vec4(red, green, blue, 1.0);
  4475. 					} else {
  4476. 						border_color = u_border_color;
  4477. 					}
  4478.  
  4479. 					out_color = out_color * (1.0 - alpha) + border_color * alpha;
  4480. 				}
  4481. 			`, ['Border', 'Camera'], ['u_texture']);
  4482.  
  4483.  
  4484.  
  4485. 			programs.cell = program('cell', `
  4486. 				${parts.boilerplate}
  4487. 				layout(location = 0) in vec2 a_vertex;
  4488. 				${parts.cameraUbo}
  4489. 				${parts.cellUbo}
  4490. 				${parts.cellSettingsUbo}
  4491. 				flat out vec4 f_active_outline;
  4492. 				flat out float f_active_radius;
  4493. 				flat out float f_blur;
  4494. 				flat out int f_color_under_skin;
  4495. 				flat out int f_show_skin;
  4496. 				flat out vec4 f_subtle_outline;
  4497. 				flat out float f_subtle_radius;
  4498. 				flat out vec4 f_unsplittable_outline;
  4499. 				flat out float f_unsplittable_radius;
  4500. 				out vec2 v_vertex;
  4501. 				out vec2 v_uv;
  4502.  
  4503. 				void main() {
  4504. 					f_blur = 0.5 * u_cell_radius * (540.0 * u_camera_scale);
  4505. 					f_color_under_skin = u_cell_flags & 0x20;
  4506. 					f_show_skin = u_cell_flags & 0x01;
  4507.  
  4508. 					// subtle outlines (at least 1px wide)
  4509. 					float subtle_thickness = max(max(u_cell_radius * 0.02, 2.0 / (540.0 * u_camera_scale)), 10.0);
  4510. 					f_subtle_radius = 1.0 - (subtle_thickness / u_cell_radius);
  4511. 					if ((u_cell_flags & 0x02) != 0) {
  4512. 						f_subtle_outline = u_cell_color * 0.9; // darker outline by default
  4513. 						f_subtle_outline.rgb += (u_cell_subtle_outline_override.rgb - f_subtle_outline.rgb)
  4514. 							* u_cell_subtle_outline_override.a;
  4515. 					} else {
  4516. 						f_subtle_outline = vec4(0, 0, 0, 0);
  4517. 					}
  4518.  
  4519. 					// unsplittable cell outline, 2x the subtle thickness
  4520. 					// (except at small sizes, it shouldn't look overly thick)
  4521. 					float unsplittable_thickness = max(max(u_cell_radius * 0.04, 4.0 / (540.0 * u_camera_scale)), 10.0);
  4522. 					f_unsplittable_radius = 1.0 - (unsplittable_thickness / u_cell_radius);
  4523. 					if ((u_cell_flags & 0x10) != 0) {
  4524. 						f_unsplittable_outline = u_cell_unsplittable_outline;
  4525. 					} else {
  4526. 						f_unsplittable_outline = vec4(0, 0, 0, 0);
  4527. 					}
  4528.  
  4529. 					// active multibox outlines (thick, a % of the visible cell radius)
  4530. 					// or at minimum, 3x the subtle thickness
  4531. 					float active_thickness = max(max(u_cell_radius * 0.06, 6.0 / (540.0 * u_camera_scale)), 10.0);
  4532. 					f_active_radius = 1.0 - max(active_thickness / u_cell_radius, u_cell_active_outline_thickness);
  4533. 					if ((u_cell_flags & 0x0c) != 0) {
  4534. 						f_active_outline = (u_cell_flags & 0x04) != 0 ? u_cell_active_outline : u_cell_inactive_outline;
  4535. 					} else {
  4536. 						f_active_outline = vec4(0, 0, 0, 0);
  4537. 					}
  4538.  
  4539. 					v_vertex = a_vertex;
  4540. 					v_uv = a_vertex * min(u_cell_radius / u_cell_radius_skin, 1.0) * 0.5 + 0.5;
  4541.  
  4542. 					vec2 clip_pos = -u_camera_pos + u_cell_pos + v_vertex * u_cell_radius;
  4543. 					clip_pos *= u_camera_scale * vec2(1.0 / u_camera_ratio, -1.0);
  4544. 					gl_Position = vec4(clip_pos, 0, 1);
  4545. 				}
  4546. 			`, `
  4547. 				${parts.boilerplate}
  4548. 				flat in vec4 f_active_outline;
  4549. 				flat in float f_active_radius;
  4550. 				flat in float f_blur;
  4551. 				flat in int f_color_under_skin;
  4552. 				flat in int f_show_skin;
  4553. 				flat in vec4 f_subtle_outline;
  4554. 				flat in float f_subtle_radius;
  4555. 				flat in vec4 f_unsplittable_outline;
  4556. 				flat in float f_unsplittable_radius;
  4557. 				in vec2 v_vertex;
  4558. 				in vec2 v_uv;
  4559. 				${parts.cameraUbo}
  4560. 				${parts.cellUbo}
  4561. 				${parts.cellSettingsUbo}
  4562. 				uniform sampler2D u_skin;
  4563. 				out vec4 out_color;
  4564.  
  4565. 				void main() {
  4566. 					float d = length(v_vertex.xy);
  4567. 					if (f_show_skin == 0 || f_color_under_skin != 0) {
  4568. 						out_color = u_cell_color;
  4569. 					}
  4570.  
  4571. 					// skin
  4572. 					if (f_show_skin != 0) {
  4573. 						vec4 tex = texture(u_skin, v_uv);
  4574. 						out_color = out_color * (1.0 - tex.a) + tex;
  4575. 					}
  4576.  
  4577. 					// subtle outline
  4578. 					float a = clamp(f_blur * (d - f_subtle_radius), 0.0, 1.0) * f_subtle_outline.a;
  4579. 					out_color.rgb += (f_subtle_outline.rgb - out_color.rgb) * a;
  4580.  
  4581. 					// active multibox outline
  4582. 					a = clamp(f_blur * (d - f_active_radius), 0.0, 1.0) * f_active_outline.a;
  4583. 					out_color.rgb += (f_active_outline.rgb - out_color.rgb) * a;
  4584.  
  4585. 					// unsplittable cell outline
  4586. 					a = clamp(f_blur * (d - f_unsplittable_radius), 0.0, 1.0) * f_unsplittable_outline.a;
  4587. 					out_color.rgb += (f_unsplittable_outline.rgb - out_color.rgb) * a;
  4588.  
  4589. 					// final circle mask
  4590. 					a = clamp(-f_blur * (d - 1.0), 0.0, 1.0);
  4591. 					out_color.a *= a * u_cell_alpha;
  4592. 				}
  4593. 			`, ['Camera', 'Cell', 'CellSettings'], ['u_skin']);
  4594.  
  4595.  
  4596.  
  4597. 			// also used to draw glow
  4598. 			programs.circle = program('circle', `
  4599. 				${parts.boilerplate}
  4600. 				layout(location = 0) in vec2 a_vertex;
  4601. 				layout(location = 1) in vec2 a_cell_pos;
  4602. 				layout(location = 2) in float a_cell_radius;
  4603. 				layout(location = 3) in vec4 a_cell_color;
  4604. 				layout(location = 4) in float a_cell_alpha;
  4605. 				${parts.cameraUbo}
  4606. 				${parts.circleUbo}
  4607. 				out vec2 v_vertex;
  4608. 				flat out float f_blur;
  4609. 				flat out vec4 f_cell_color;
  4610.  
  4611. 				void main() {
  4612. 					float radius = a_cell_radius;
  4613. 					f_cell_color = a_cell_color * vec4(1, 1, 1, a_cell_alpha * u_circle_alpha);
  4614. 					if (u_circle_scale > 0.0) {
  4615. 						f_blur = 1.0;
  4616. 						radius *= u_circle_scale;
  4617. 					} else {
  4618. 						f_blur = 0.5 * a_cell_radius * (540.0 * u_camera_scale);
  4619. 					}
  4620. 					v_vertex = a_vertex;
  4621.  
  4622. 					vec2 clip_pos = -u_camera_pos + a_cell_pos + v_vertex * radius;
  4623. 					clip_pos *= u_camera_scale * vec2(1.0 / u_camera_ratio, -1.0);
  4624. 					gl_Position = vec4(clip_pos, 0, 1);
  4625. 				}
  4626. 			`, `
  4627. 				${parts.boilerplate}
  4628. 				in vec2 v_vertex;
  4629. 				flat in float f_blur;
  4630. 				flat in vec4 f_cell_color;
  4631. 				out vec4 out_color;
  4632.  
  4633. 				void main() {
  4634. 					// use squared distance for more natural glow; shouldn't matter for pellets
  4635. 					float d = length(v_vertex.xy);
  4636. 					out_color = f_cell_color;
  4637. 					out_color.a *= clamp(f_blur * (1.0 - d), 0.0, 1.0);
  4638. 				}
  4639. 			`, ['Camera', 'Circle'], []);
  4640.  
  4641.  
  4642.  
  4643. 			programs.text = program('text', `
  4644. 				${parts.boilerplate}
  4645. 				layout(location = 0) in vec2 a_vertex;
  4646. 				${parts.cameraUbo}
  4647. 				${parts.cellUbo}
  4648. 				${parts.textUbo}
  4649. 				out vec4 v_color;
  4650. 				out vec2 v_uv;
  4651. 				out vec2 v_vertex;
  4652.  
  4653. 				void main() {
  4654. 					v_uv = a_vertex * 0.5 + 0.5;
  4655. 					float c2_alpha = (v_uv.x + v_uv.y) / 2.0;
  4656. 					v_color = u_text_color1 * (1.0 - c2_alpha) + u_text_color2 * c2_alpha;
  4657. 					v_vertex = a_vertex;
  4658.  
  4659. 					vec2 clip_space = v_vertex * u_text_scale + u_text_offset;
  4660. 					clip_space *= u_cell_radius_skin * 0.45 * vec2(u_text_aspect_ratio, 1.0);
  4661. 					clip_space += -u_camera_pos + u_cell_pos;
  4662. 					clip_space *= u_camera_scale * vec2(1.0 / u_camera_ratio, -1.0);
  4663. 					gl_Position = vec4(clip_space, 0, 1);
  4664. 				}
  4665. 			`, `
  4666. 				${parts.boilerplate}
  4667. 				in vec4 v_color;
  4668. 				in vec2 v_uv;
  4669. 				in vec2 v_vertex;
  4670. 				${parts.cameraUbo}
  4671. 				${parts.cellUbo}
  4672. 				${parts.textUbo}
  4673. 				uniform sampler2D u_texture;
  4674. 				uniform sampler2D u_silhouette;
  4675. 				out vec4 out_color;
  4676.  
  4677. 				float f(float x) {
  4678. 					// a cubic function with turning points at (0,0) and (1,0)
  4679. 					// meant to sharpen out blurry linear interpolation
  4680. 					return x * x * (3.0 - 2.0*x);
  4681. 				}
  4682.  
  4683. 				vec4 fv(vec4 v) {
  4684. 					return vec4(f(v.x), f(v.y), f(v.z), f(v.w));
  4685. 				}
  4686.  
  4687. 				void main() {
  4688. 					vec4 normal = texture(u_texture, v_uv);
  4689.  
  4690. 					if (u_text_silhouette_enabled != 0) {
  4691. 						vec4 silhouette = texture(u_silhouette, v_uv);
  4692.  
  4693. 						// #fff - #000 => color (text)
  4694. 						// #fff - #fff => #fff (respect emoji)
  4695. 						// #888 - #888 => #888 (respect emoji)
  4696. 						// #fff - #888 => #888 + color/2 (blur/antialias)
  4697. 						out_color = silhouette + fv(normal - silhouette) * v_color;
  4698. 					} else {
  4699. 						out_color = fv(normal) * v_color;
  4700. 					}
  4701.  
  4702. 					out_color.a *= u_text_alpha;
  4703. 				}
  4704. 			`, ['Camera', 'Cell', 'Text'], ['u_texture', 'u_silhouette']);
  4705.  
  4706. 			programs.tracer = program('tracer', `
  4707. 				${parts.boilerplate}
  4708. 				layout(location = 0) in vec2 a_vertex;
  4709. 				layout(location = 1) in vec2 a_pos1;
  4710. 				layout(location = 2) in vec2 a_pos2;
  4711. 				${parts.cameraUbo}
  4712. 				${parts.tracerUbo}
  4713. 				out vec2 v_vertex;
  4714.  
  4715. 				void main() {
  4716. 					v_vertex = a_vertex;
  4717. 					float alpha = (a_vertex.x + 1.0) / 2.0;
  4718. 					float d = length(a_pos2 - a_pos1);
  4719. 					float thickness = 0.001 / u_camera_scale * u_tracer_thickness;
  4720. 					// black magic
  4721. 					vec2 world_pos = a_pos1 + (a_pos2 - a_pos1)
  4722. 						* mat2(alpha, a_vertex.y / d * thickness, a_vertex.y / d * -thickness, alpha);
  4723.  
  4724. 					vec2 clip_pos = -u_camera_pos + world_pos;
  4725. 					clip_pos *= u_camera_scale * vec2(1.0 / u_camera_ratio, -1.0);
  4726. 					gl_Position = vec4(clip_pos, 0, 1);
  4727. 				}
  4728. 			`, `
  4729. 				${parts.boilerplate}
  4730. 				in vec2 v_pos;
  4731. 				${parts.tracerUbo}
  4732. 				out vec4 out_color;
  4733.  
  4734. 				void main() {
  4735. 					out_color = u_tracer_color;
  4736. 				}
  4737. 			`, ['Camera', 'Tracer'], []);
  4738.  
  4739. 			// initialize two VAOs; one for pellets and all other objects (0), one for cell glow only (1)
  4740. 			glconf.vao = {};
  4741. 			const squareVAA = () => {
  4742. 				// square (location = 0), used for all instances
  4743. 				gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
  4744. 				gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -1, -1,   1, -1,   -1, 1,   1, 1 ]), gl.STATIC_DRAW);
  4745. 				gl.enableVertexAttribArray(0);
  4746. 				gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  4747. 			};
  4748. 			const circleVAA = () => {
  4749. 				// circle buffer (each instance is 6 floats or 24 bytes)
  4750. 				const circleBuffer = /** @type {WebGLBuffer} */ (gl.createBuffer());
  4751. 				gl.bindBuffer(gl.ARRAY_BUFFER, circleBuffer);
  4752. 				// a_cell_pos, vec2 (location = 1)
  4753. 				gl.enableVertexAttribArray(1);
  4754. 				gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 4 * 7, 0);
  4755. 				gl.vertexAttribDivisor(1, 1);
  4756. 				// a_cell_radius, float (location = 2)
  4757. 				gl.enableVertexAttribArray(2);
  4758. 				gl.vertexAttribPointer(2, 1, gl.FLOAT, false, 4 * 7, 4 * 2);
  4759. 				gl.vertexAttribDivisor(2, 1);
  4760. 				// a_cell_color, vec3 (location = 3)
  4761. 				gl.enableVertexAttribArray(3);
  4762. 				gl.vertexAttribPointer(3, 4, gl.FLOAT, false, 4 * 7, 4 * 3);
  4763. 				gl.vertexAttribDivisor(3, 1);
  4764.  
  4765. 				return circleBuffer;
  4766. 			};
  4767. 			const alphaVAA = () => {
  4768. 				// circle alpha buffer, updated every frame
  4769. 				const alphaBuffer = /** @type {WebGLBuffer} */ (gl.createBuffer());
  4770. 				gl.bindBuffer(gl.ARRAY_BUFFER, alphaBuffer);
  4771. 				// a_cell_alpha, float (location = 4)
  4772. 				gl.enableVertexAttribArray(4);
  4773. 				gl.vertexAttribPointer(4, 1, gl.FLOAT, false, 0, 0);
  4774. 				gl.vertexAttribDivisor(4, 1);
  4775.  
  4776. 				return alphaBuffer;
  4777. 			};
  4778. 			const lineVAA = () => {
  4779. 				// circle alpha buffer, updated every frame
  4780. 				const lineBuffer = /** @type {WebGLBuffer} */ (gl.createBuffer());
  4781. 				gl.bindBuffer(gl.ARRAY_BUFFER, lineBuffer);
  4782. 				// a_pos1, vec2 (location = 1)
  4783. 				gl.enableVertexAttribArray(1);
  4784. 				gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 4 * 4, 0);
  4785. 				gl.vertexAttribDivisor(1, 1);
  4786. 				// a_pos2, vec2 (location = 2)
  4787. 				gl.enableVertexAttribArray(2);
  4788. 				gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 4 * 4, 4 * 2);
  4789. 				gl.vertexAttribDivisor(2, 1);
  4790.  
  4791. 				return lineBuffer;
  4792. 			};
  4793.  
  4794. 			// main vao
  4795. 			{
  4796. 				const vao = /** @type {WebGLVertexArrayObject} */ (gl.createVertexArray());
  4797. 				gl.bindVertexArray(vao);
  4798. 				squareVAA();
  4799. 				glconf.vao.main = { vao };
  4800. 			}
  4801. 			// cell glow vao
  4802. 			{
  4803. 				const vao = /** @type {WebGLVertexArrayObject} */ (gl.createVertexArray());
  4804. 				gl.bindVertexArray(vao);
  4805. 				squareVAA();
  4806. 				glconf.vao.cell = { vao, circle: circleVAA(), alpha: alphaVAA() };
  4807. 			}
  4808. 			// pellet + pellet glow vao
  4809. 			{
  4810. 				const vao = /** @type {WebGLVertexArrayObject} */ (gl.createVertexArray());
  4811. 				gl.bindVertexArray(vao);
  4812. 				squareVAA();
  4813. 				glconf.vao.pellet = { vao, circle: circleVAA(), alpha: alphaVAA() };
  4814. 			}
  4815. 			// tracer vao
  4816. 			{
  4817. 				const vao = /** @type {WebGLVertexArrayObject} */ (gl.createVertexArray());
  4818. 				gl.bindVertexArray(vao);
  4819. 				squareVAA();
  4820. 				glconf.vao.tracer = { vao, line: lineVAA() };
  4821. 			}
  4822. 		};
  4823.  
  4824. 		glconf.init();
  4825. 		return glconf;
  4826. 	})();
  4827.  
  4828.  
  4829.  
  4830. 	///////////////////////////////
  4831. 	// Define Rendering Routines //
  4832. 	///////////////////////////////
  4833. 	const render = (() => {
  4834. 		const render = {};
  4835. 		const { gl } = ui.game;
  4836.  
  4837. 		// #1 : define small misc objects
  4838. 		// no point in breaking this across multiple lines
  4839. 		// eslint-disable-next-line max-len
  4840. 		const darkGridSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAGBJREFUaIHtz4EJwCAAwDA39oT/H+qeEAzSXNA+a61xgfmeLtilEU0jmkY0jWga0TSiaUTTiKYRTSOaRjSNaBrRNKJpRNOIphFNI5pGNI1oGtE0omlEc83IN8aYpyN2+AH6nwOVa0odrQAAAABJRU5ErkJggg==';
  4841. 		// eslint-disable-next-line max-len
  4842. 		const lightGridSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAGFJREFUaIHtzwENgDAQwMA9LvAvdJgg2UF6CtrZe6+vm5n7Oh3xlkY0jWga0TSiaUTTiKYRTSOaRjSNaBrRNKJpRNOIphFNI5pGNI1oGtE0omlE04imEc1vRmatdZ+OeMMDa8cDlf3ZAHkAAAAASUVORK5CYII=';
  4843.  
  4844. 		let lastMinimapDraw = performance.now();
  4845. 		/** @type {{ bg: ImageData, darkTheme: boolean } | undefined} */
  4846. 		let minimapCache;
  4847. 		document.fonts.addEventListener('loadingdone', () => void (minimapCache = undefined));
  4848.  
  4849.  
  4850. 		// #2 : define caching functions
  4851. 		const { resetDatabaseCache, resetTextureCache, textureFromCache, textureFromDatabase } = (() => {
  4852. 			/** @type {Map<string, {
  4853. 			 * 	color: [number, number, number, number], texture: WebGLTexture, width: number, height: number
  4854. 			 * } | null>} */
  4855. 			const cache = new Map();
  4856. 			render.textureCache = cache;
  4857.  
  4858. 			/** @type {Map<string, {
  4859. 			 * 	color: [number, number, number, number], texture: WebGLTexture, width: number, height: number
  4860. 			 * } | null>} */
  4861. 			const dbCache = new Map();
  4862. 			render.dbCache = dbCache;
  4863.  
  4864. 			return {
  4865. 				resetTextureCache: () => cache.clear(),
  4866. 				/**
  4867. 				 * @param {string} src
  4868. 				 * @returns {{
  4869. 				 * 	color: [number, number, number, number], texture: WebGLTexture, width: number, height: number
  4870. 				 * } | undefined}
  4871. 				 */
  4872. 				textureFromCache: src => {
  4873. 					const cached = cache.get(src);
  4874. 					if (cached !== undefined)
  4875. 						return cached ?? undefined;
  4876.  
  4877. 					cache.set(src, null);
  4878.  
  4879. 					const image = new Image();
  4880. 					image.crossOrigin = '';
  4881. 					image.addEventListener('load', () => {
  4882. 						const texture = /** @type {WebGLTexture} */ (gl.createTexture());
  4883. 						if (!texture) return;
  4884.  
  4885. 						gl.bindTexture(gl.TEXTURE_2D, texture);
  4886. 						gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  4887. 						gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
  4888. 						gl.generateMipmap(gl.TEXTURE_2D);
  4889.  
  4890. 						const color = aux.dominantColor(image);
  4891. 						cache.set(src, { color, texture, width: image.width, height: image.height });
  4892. 					});
  4893. 					image.src = src;
  4894.  
  4895. 					return undefined;
  4896. 				},
  4897. 				resetDatabaseCache: () => dbCache.clear(),
  4898. 				/**
  4899. 				 * @param {string} key
  4900. 				 * @returns {{
  4901. 				 * 	color: [number, number, number, number], texture: WebGLTexture, width: number, height: number
  4902. 				 * } | undefined}
  4903. 				 */
  4904. 				textureFromDatabase: key => {
  4905. 					const cached = dbCache.get(key);
  4906. 					if (cached !== undefined)
  4907. 						return cached ?? undefined;
  4908.  
  4909. 					/** @type {IDBDatabase | undefined} */
  4910. 					const database = settings.database;
  4911. 					if (!database) return undefined;
  4912.  
  4913. 					dbCache.set(key, null);
  4914. 					const req = database.transaction('images').objectStore('images').get(key);
  4915. 					req.addEventListener('success', () => {
  4916. 						if (!req.result) return;
  4917.  
  4918. 						const reader = new FileReader();
  4919. 						reader.addEventListener('load', () => {
  4920. 							const image = new Image();
  4921. 							// this can cause a lot of lag (~500ms) when loading a large image for the first time
  4922. 							image.addEventListener('load', () => {
  4923. 								const texture = gl.createTexture();
  4924. 								if (!texture) return;
  4925.  
  4926. 								gl.bindTexture(gl.TEXTURE_2D, texture);
  4927. 								gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  4928. 								gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
  4929. 								gl.generateMipmap(gl.TEXTURE_2D);
  4930.  
  4931. 								const color = aux.dominantColor(image);
  4932. 								dbCache.set(key, { color, texture, width: image.width, height: image.height });
  4933. 							});
  4934. 							image.src = /** @type {string} */ (reader.result);
  4935. 						});
  4936. 						reader.readAsDataURL(req.result);
  4937. 					});
  4938. 					req.addEventListener('error', err => {
  4939. 						console.warn(`sigfix database failed to get ${key}:`, err);
  4940. 					});
  4941. 				},
  4942. 			};
  4943. 		})();
  4944. 		render.resetDatabaseCache = resetDatabaseCache;
  4945. 		render.resetTextureCache = resetTextureCache;
  4946.  
  4947. 		const { maxMassWidth, refreshTextCache, massTextFromCache, resetTextCache, textFromCache } = (() => {
  4948. 			/**
  4949. 			 * @template {boolean} T
  4950. 			 * @typedef {{
  4951. 			 * 	aspectRatio: number,
  4952. 			 * 	text: WebGLTexture | null,
  4953. 			 *	silhouette: WebGLTexture | null | undefined,
  4954. 			 * 	accessed: number
  4955. 			 * }} CacheEntry
  4956. 			 */
  4957. 			/** @type {Map<string, CacheEntry<boolean>>} */
  4958. 			const cache = new Map();
  4959. 			render.textCache = cache;
  4960.  
  4961. 			setInterval(() => {
  4962. 				// remove text after not being used for 1 minute
  4963. 				const now = performance.now();
  4964. 				cache.forEach((entry, text) => {
  4965. 					if (now - entry.accessed > 60_000) {
  4966. 						// immediately delete text instead of waiting for GC
  4967. 						if (entry.text !== undefined)
  4968. 							gl.deleteTexture(entry.text);
  4969. 						if (entry.silhouette !== undefined)
  4970. 							gl.deleteTexture(entry.silhouette);
  4971. 						cache.delete(text);
  4972. 					}
  4973. 				});
  4974. 			}, 60_000);
  4975.  
  4976. 			const canvas = document.createElement('canvas');
  4977. 			const ctx = aux.require(
  4978. 				canvas.getContext('2d', { willReadFrequently: true }),
  4979. 				'Unable to get 2D context for text drawing. This is probably your browser being weird, maybe reload ' +
  4980. 				'the page?',
  4981. 			);
  4982.  
  4983. 			// sigmod forces a *really* ugly shadow on ctx.fillText so we have to lock the property beforehand
  4984. 			const realProps = Object.getOwnPropertyDescriptors(Object.getPrototypeOf(ctx));
  4985. 			const realShadowBlurSet
  4986. 				= aux.require(realProps.shadowBlur.set, 'did CanvasRenderingContext2D spec change?').bind(ctx);
  4987. 			const realShadowColorSet
  4988. 				= aux.require(realProps.shadowColor.set, 'did CanvasRenderingContext2D spec change?').bind(ctx);
  4989. 			Object.defineProperties(ctx, {
  4990. 				shadowBlur: {
  4991. 					get: () => 0,
  4992. 					set: x => {
  4993. 						if (x === 0) realShadowBlurSet(0);
  4994. 						else realShadowBlurSet(8);
  4995. 					},
  4996. 				},
  4997. 				shadowColor: {
  4998. 					get: () => 'transparent',
  4999. 					set: x => {
  5000. 						if (x === 'transparent') realShadowColorSet('transparent');
  5001. 						else realShadowColorSet('#0003');
  5002. 					},
  5003. 				},
  5004. 			});
  5005.  
  5006. 			/**
  5007. 			 * @param {string} text
  5008. 			 * @param {boolean} silhouette
  5009. 			 * @param {boolean} mass
  5010. 			 * @returns {WebGLTexture | null}
  5011. 			 */
  5012. 			const texture = (text, silhouette, mass) => {
  5013. 				const texture = gl.createTexture();
  5014. 				if (!texture) return texture;
  5015.  
  5016. 				const baseTextSize = 96;
  5017. 				const textSize = baseTextSize * (mass ? 0.5 * settings.massScaleFactor : settings.nameScaleFactor);
  5018. 				const lineWidth = Math.ceil(textSize / 10) * settings.textOutlinesFactor;
  5019.  
  5020. 				let font = '';
  5021. 				if (mass ? settings.massBold : settings.nameBold)
  5022. 					font = 'bold';
  5023. 				font += ` ${textSize}px "${sigmod.settings.font || 'Ubuntu'}", Ubuntu`;
  5024.  
  5025. 				ctx.font = font;
  5026. 				// if rendering an empty string (somehow) then width can be 0 with no outlines
  5027. 				canvas.width = (ctx.measureText(text).width + lineWidth * 4) || 1;
  5028. 				canvas.height = textSize * 3;
  5029. 				ctx.clearRect(0, 0, canvas.width, canvas.height);
  5030.  
  5031. 				// setting canvas.width resets the canvas state
  5032. 				ctx.font = font;
  5033. 				ctx.lineJoin = 'round';
  5034. 				ctx.lineWidth = lineWidth;
  5035. 				ctx.fillStyle = silhouette ? '#000' : '#fff';
  5036. 				ctx.strokeStyle = '#000';
  5037. 				ctx.textBaseline = 'middle';
  5038.  
  5039. 				ctx.shadowBlur = lineWidth;
  5040. 				ctx.shadowColor = lineWidth > 0 ? '#0002' : 'transparent';
  5041.  
  5042. 				// add a space, which is to prevent sigmod from detecting the name
  5043. 				if (lineWidth > 0) ctx.strokeText(text + ' ', lineWidth * 2, textSize * 1.5);
  5044. 				ctx.shadowColor = 'transparent';
  5045. 				ctx.fillText(text + ' ', lineWidth * 2, textSize * 1.5);
  5046.  
  5047. 				const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
  5048.  
  5049. 				gl.bindTexture(gl.TEXTURE_2D, texture);
  5050. 				gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, data);
  5051. 				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  5052. 				gl.generateMipmap(gl.TEXTURE_2D);
  5053. 				return texture;
  5054. 			};
  5055.  
  5056. 			let maxMassWidth = 0;
  5057. 			/** @type {({ height: number, width: number, texture: WebGLTexture | null } | undefined)[]} */
  5058. 			const massTextCache = [];
  5059.  
  5060. 			/**
  5061. 			 * @param {string} digit
  5062. 			 * @returns {{ height: number, width: number, texture: WebGLTexture | null }}
  5063. 			 */
  5064. 			const massTextFromCache = digit => {
  5065. 				let cached = massTextCache[/** @type {any} */ (digit)];
  5066. 				if (!cached) {
  5067. 					cached = massTextCache[digit] = {
  5068. 						texture: texture(digit, false, true),
  5069. 						height: canvas.height, // mind the execution order
  5070. 						width: canvas.width,
  5071. 					};
  5072. 					if (cached.width > maxMassWidth) maxMassWidth = cached.width;
  5073. 				}
  5074.  
  5075. 				return cached;
  5076. 			};
  5077.  
  5078. 			const resetTextCache = () => {
  5079. 				cache.clear();
  5080. 				maxMassWidth = 0;
  5081. 				while (massTextCache.length > 0) massTextCache.pop();
  5082. 			};
  5083.  
  5084. 			/** @type {{
  5085. 			 * 	massBold: boolean, massScaleFactor: number, nameBold: boolean, nameScaleFactor: number,
  5086. 			 * 	outlinesFactor: number, font: string | undefined,
  5087. 			 * } | undefined} */
  5088. 			let drawn;
  5089.  
  5090. 			const refreshTextCache = () => {
  5091. 				if (!drawn ||
  5092. 					(drawn.massBold !== settings.massBold || drawn.massScaleFactor !== settings.massScaleFactor
  5093. 						|| drawn.nameBold !== settings.nameBold || drawn.nameScaleFactor !== settings.nameScaleFactor
  5094. 						|| drawn.outlinesFactor !== settings.textOutlinesFactor || drawn.font !== sigmod.settings.font)
  5095. 				) {
  5096. 					resetTextCache();
  5097. 					drawn = {
  5098. 						massBold: settings.massBold, massScaleFactor: settings.massScaleFactor,
  5099. 						nameBold: settings.nameBold, nameScaleFactor: settings.nameScaleFactor,
  5100. 						outlinesFactor: settings.textOutlinesFactor, font: sigmod.settings.font,
  5101. 					};
  5102. 				}
  5103. 			};
  5104.  
  5105. 			/**
  5106. 			 * @template {boolean} T
  5107. 			 * @param {string} text
  5108. 			 * @param {T} silhouette
  5109. 			 * @returns {CacheEntry<T>}
  5110. 			 */
  5111. 			const textFromCache = (text, silhouette) => {
  5112. 				let entry = cache.get(text);
  5113. 				if (!entry) {
  5114. 					const shortened = aux.trim(text);
  5115. 					/** @type {CacheEntry<T>} */
  5116. 					entry = {
  5117. 						text: texture(shortened, false, false),
  5118. 						aspectRatio: canvas.width / canvas.height, // mind the execution order
  5119. 						silhouette: silhouette ? texture(shortened, true, false) : undefined,
  5120. 						accessed: performance.now(),
  5121. 					};
  5122. 					cache.set(text, entry);
  5123. 				} else {
  5124. 					entry.accessed = performance.now();
  5125. 				}
  5126.  
  5127. 				if (silhouette && entry.silhouette === undefined) {
  5128. 					setTimeout(() => {
  5129. 						entry.silhouette = texture(aux.trim(text), true, false);
  5130. 					});
  5131. 				}
  5132.  
  5133. 				return entry;
  5134. 			};
  5135.  
  5136. 			// reload text once Ubuntu has loaded, prevents some serif fonts from being locked in
  5137. 			// also support loading in new fonts at any time via sigmod
  5138. 			document.fonts.addEventListener('loadingdone', () => resetTextCache());
  5139.  
  5140. 			return {
  5141. 				maxMassWidth: () => maxMassWidth,
  5142. 				massTextFromCache,
  5143. 				refreshTextCache,
  5144. 				resetTextCache,
  5145. 				textFromCache,
  5146. 			};
  5147. 		})();
  5148. 		render.resetTextCache = resetTextCache;
  5149. 		render.textFromCache = textFromCache;
  5150.  
  5151. 		// #3 : define other render functions
  5152. 		/**
  5153. 		 * @param {CellFrame} frame
  5154. 		 * @param {number} now
  5155. 		 */
  5156. 		render.alpha = (frame, now) => {
  5157. 			// TODO: lots of opportunity here to make the game look nice (like delta)
  5158. 			// note that 0 drawDelay is supported here
  5159. 			let alpha = (now - frame.born) / settings.drawDelay;
  5160. 			if (frame.deadAt !== undefined) {
  5161. 				alpha = Math.min(alpha, 1 - (now - frame.deadAt) / settings.drawDelay);
  5162. 			}
  5163.  
  5164. 			return Math.min(Math.max(alpha, 0), 1);
  5165. 		};
  5166.  
  5167. 		/**
  5168. 		 * @param {Cell} cell
  5169. 		 */
  5170. 		render.skin = cell => {
  5171. 			/** @type {CellDescription} */
  5172. 			const desc = world.synchronized ? cell.views.values().next().value : cell.views.get(world.selected);
  5173. 			if (!desc) return undefined;
  5174.  
  5175. 			let ownerView;
  5176. 			for (const [view, vision] of world.views) {
  5177. 				if (vision.owned.has(cell.id)) {
  5178. 					ownerView = view;
  5179. 					break;
  5180. 				}
  5181. 			}
  5182.  
  5183. 			// 🖼️
  5184. 			let texture;
  5185. 			if (ownerView) {
  5186. 				const index = world.multis.indexOf(ownerView);
  5187. 				if (index >= 2) {
  5188. 					if (settings.selfSkinNbox[index]) {
  5189. 						if (settings.selfSkinNbox[index].startsWith('🖼️')) texture = textureFromDatabase(`selfSkinNbox.${index}`);
  5190. 						else texture = textureFromCache(settings.selfSkinNbox[index]);
  5191. 					}
  5192. 				} else {
  5193. 					const prop = ownerView === world.viewId.secondary ? 'selfSkinMulti' : 'selfSkin';
  5194. 					if (settings[prop]) {
  5195. 						if (settings[prop].startsWith('🖼️')) texture = textureFromDatabase(prop);
  5196. 						else texture = textureFromCache(settings[prop]);
  5197. 					}
  5198. 				}
  5199. 			}
  5200.  
  5201. 			// allow turning off sigmally skins while still using custom skins
  5202. 			if (!texture && aux.settings.showSkins && desc.skin) {
  5203. 				texture = textureFromCache(desc.skin);
  5204. 			}
  5205.  
  5206. 			return texture;
  5207. 		};
  5208.  
  5209. 		const circleBuffers = {
  5210. 			cell: new Float32Array(0),
  5211. 			cellAlpha: new Float32Array(0),
  5212. 			/** @type {object | undefined} */
  5213. 			lastCellVao: undefined,
  5214. 			pellet: new Float32Array(0),
  5215. 			pelletAlpha: new Float32Array(0),
  5216. 			pelletsUploaded: 0,
  5217. 			/** @type {object | undefined} */
  5218. 			lastPelletVao: undefined,
  5219. 		};
  5220. 		/** @param {boolean} pellets */
  5221. 		render.upload = pellets => {
  5222. 			const now = performance.now();
  5223. 			if (now - render.lastFrame > 1000) {
  5224. 				// do not render pellets on inactive windows (very laggy!)
  5225. 				circleBuffers.pelletsUploaded = 0;
  5226. 				return;
  5227. 			}
  5228.  
  5229. 			let uploading = 0;
  5230. 			for (const cell of world[pellets ? 'pellets' : 'cells'].values()) {
  5231. 				const frame = world.synchronized ? cell.merged : cell.views.get(world.selected)?.frames[0];
  5232. 				if (!frame) continue;
  5233. 				if (pellets) {
  5234. 					if (frame.deadTo === -1) ++uploading;
  5235. 				} else {
  5236. 					/** @type {CellDescription} */
  5237. 					const desc = world.synchronized ? cell.views.values().next().value : cell.views.get(world.selected);
  5238. 					if (!desc) continue; // shouldn't happen
  5239. 					if (!desc.jagged) ++uploading; // don't make viruses glow
  5240. 				}
  5241. 			}
  5242.  
  5243. 			let alpha = circleBuffers[pellets ? 'pelletAlpha' : 'cellAlpha'];
  5244. 			let instances = circleBuffers[pellets ? 'pellet' : 'cell'];
  5245. 			const vao = glconf.vao[pellets ? 'pellet' : 'cell'];
  5246.  
  5247. 			// resize buffers as necessary
  5248. 			let capacity = alpha.length || 1;
  5249. 			let resizing = circleBuffers[pellets ? 'lastPelletVao' : 'lastCellVao'] !== vao;
  5250. 			while (capacity < uploading) {
  5251. 				capacity *= 2;
  5252. 				resizing = true;
  5253. 			}
  5254. 			if (resizing) {
  5255. 				alpha = circleBuffers[pellets ? 'pelletAlpha' : 'cellAlpha'] = new Float32Array(capacity);
  5256. 				instances = circleBuffers[pellets ? 'pellet' : 'cell'] = new Float32Array(capacity * 7);
  5257. 			}
  5258.  
  5259. 			const override = pellets ? sigmod.settings.foodColor : sigmod.settings.cellColor;
  5260. 			let i = 0;
  5261. 			for (const cell of world[pellets ? 'pellets' : 'cells'].values()) {
  5262. 				const frame = world.synchronized ? cell.merged : cell.views.get(world.selected)?.frames[0];
  5263. 				if (!frame || (pellets && frame.deadTo !== -1)) continue;
  5264.  
  5265. 				let x, y, r;
  5266. 				if (pellets) {
  5267. 					({ nx: x, ny: y, nr: r } = frame);
  5268. 				} else {
  5269. 					const interp = world.synchronized ? cell.merged : cell.views.get(world.selected);
  5270. 					if (!interp) continue; // should never happen (ts-check)
  5271.  
  5272. 					/** @type {CellFrame | undefined} */
  5273. 					let killerFrame;
  5274. 					/** @type {CellInterpolation | undefined} */
  5275. 					let killerInterp;
  5276. 					let killer = frame.deadTo !== -1 && world.cells.get(frame.deadTo);
  5277. 					if (killer) {
  5278. 						killerFrame = world.synchronized ? killer.merged : killer.views.get(world.selected)?.frames[0];
  5279. 						killerInterp = world.synchronized ? killer.merged : killer.views.get(world.selected);
  5280. 					}
  5281.  
  5282. 					({ x, y, r } = world.xyr(frame, interp, killerFrame, killerInterp, false, now));
  5283. 				}
  5284. 				instances[i * 7] = x;
  5285. 				instances[i * 7 + 1] = y;
  5286. 				instances[i * 7 + 2] = r;
  5287.  
  5288. 				/** @type {CellDescription} */
  5289. 				const desc = world.synchronized ? cell.views.values().next().value : cell.views.get(world.selected);
  5290. 				if (!desc || desc.jagged) continue;
  5291.  
  5292. 				/** @type {[number, number, number] | [number, number, number, number]} */
  5293. 				let color = desc.rgb;
  5294. 				if (pellets) {
  5295. 					if (override?.[0] === 0 && override?.[1] === 0 && override?.[2] === 0) {
  5296. 						color = [color[0], color[1], color[2], override[3]];
  5297. 					} else if (override) {
  5298. 						color = override;
  5299. 					}
  5300. 				} else {
  5301. 					if (override) color = override;
  5302. 					const skin = render.skin(cell);
  5303. 					if (skin) {
  5304. 						// blend with player color
  5305. 						if (settings.colorUnderSkin) {
  5306. 							color = [
  5307. 								color[0] + (skin.color[0] - color[0]) * skin.color[3],
  5308. 								color[1] + (skin.color[1] - color[1]) * skin.color[3],
  5309. 								color[2] + (skin.color[2] - color[2]) * skin.color[3],
  5310. 								1
  5311. 							];
  5312. 						} else {
  5313. 							color = [skin.color[0], skin.color[1], skin.color[2], 1];
  5314. 						}
  5315. 					}
  5316. 				}
  5317. 				instances[i * 7 + 3] = color[0];
  5318. 				instances[i * 7 + 4] = color[1];
  5319. 				instances[i * 7 + 5] = color[2];
  5320. 				instances[i * 7 + 6] = color[3] ?? 1;
  5321.  
  5322. 				++i;
  5323. 			}
  5324.  
  5325. 			// now, upload data
  5326. 			if (resizing) {
  5327. 				gl.bindBuffer(gl.ARRAY_BUFFER, vao.alpha);
  5328. 				gl.bufferData(gl.ARRAY_BUFFER, alpha.byteLength, gl.STATIC_DRAW);
  5329. 				gl.bindBuffer(gl.ARRAY_BUFFER, vao.circle);
  5330. 				gl.bufferData(gl.ARRAY_BUFFER, instances, gl.STATIC_DRAW);
  5331. 			} else {
  5332. 				gl.bindBuffer(gl.ARRAY_BUFFER, vao.circle);
  5333. 				gl.bufferSubData(gl.ARRAY_BUFFER, 0, instances);
  5334. 			}
  5335. 			gl.bindBuffer(gl.ARRAY_BUFFER, null);
  5336.  
  5337. 			if (pellets) circleBuffers.pelletsUploaded = uploading;
  5338. 			circleBuffers[pellets ? 'lastPelletVao' : 'lastCellVao'] = vao;
  5339. 		};
  5340.  
  5341. 		let tracerFloats = new Float32Array(0);
  5342.  
  5343. 		// #4 : define ubo views
  5344. 		// firefox (and certain devices) adds some padding to uniform buffer sizes, so best to check its size
  5345. 		gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Border);
  5346. 		const borderUboBuffer = new ArrayBuffer(gl.getBufferParameter(gl.UNIFORM_BUFFER, gl.BUFFER_SIZE));
  5347. 		// must reference an arraybuffer for the memory to be shared between these views
  5348. 		const borderUboFloats = new Float32Array(borderUboBuffer);
  5349. 		const borderUboInts = new Int32Array(borderUboBuffer);
  5350.  
  5351. 		gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Cell);
  5352. 		const cellUboBuffer = new ArrayBuffer(gl.getBufferParameter(gl.UNIFORM_BUFFER, gl.BUFFER_SIZE));
  5353. 		const cellUboFloats = new Float32Array(cellUboBuffer);
  5354. 		const cellUboInts = new Int32Array(cellUboBuffer);
  5355.  
  5356. 		gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Circle);
  5357. 		const circleUboFloats = new Float32Array(gl.getBufferParameter(gl.UNIFORM_BUFFER, gl.BUFFER_SIZE) / 4);
  5358.  
  5359. 		gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Text);
  5360. 		const textUboBuffer = new ArrayBuffer(gl.getBufferParameter(gl.UNIFORM_BUFFER, gl.BUFFER_SIZE));
  5361. 		const textUboFloats = new Float32Array(textUboBuffer);
  5362. 		const textUboInts = new Int32Array(textUboBuffer);
  5363.  
  5364. 		gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Tracer);
  5365. 		const tracerUboFloats = new Float32Array(gl.getBufferParameter(gl.UNIFORM_BUFFER, gl.BUFFER_SIZE) / 4);
  5366.  
  5367. 		gl.bindBuffer(gl.UNIFORM_BUFFER, null); // leaving uniform buffer bound = scary!
  5368.  
  5369.  
  5370. 		// #5 : define the render function
  5371. 		const start = performance.now();
  5372. 		render.fps = 0;
  5373. 		render.lastFrame = performance.now();
  5374. 		const renderGame = () => {
  5375. 			const now = performance.now();
  5376. 			const dt = Math.max(now - render.lastFrame, 0.1) / 1000; // there's a chance (now - lastFrame) can be 0
  5377. 			render.fps += (1 / dt - render.fps) / 10;
  5378. 			render.lastFrame = now;
  5379.  
  5380. 			if (gl.isContextLost()) {
  5381. 				requestAnimationFrame(renderGame);
  5382. 				return;
  5383. 			}
  5384.  
  5385. 			// get settings
  5386. 			const defaultVirusSrc = '/assets/images/viruses/2.png';
  5387. 			const virusSrc = sigmod.settings.virusImage || defaultVirusSrc;
  5388. 			const { cellColor, foodColor, outlineColor, showNames } = sigmod.settings;
  5389.  
  5390. 			refreshTextCache();
  5391.  
  5392. 			const vision = aux.require(world.views.get(world.selected), 'no selected vision (BAD BUG)');
  5393. 			vision.used = performance.now();
  5394. 			world.cameras(now);
  5395.  
  5396. 			// note: most routines are named, for benchmarking purposes
  5397. 			(function setGlobalUniforms() {
  5398. 				// note that binding the same buffer to gl.UNIFORM_BUFFER twice in a row causes it to not update.
  5399. 				// why that happens is completely beyond me but oh well.
  5400. 				// for consistency, we always bind gl.UNIFORM_BUFFER to null directly after updating it.
  5401. 				gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Camera);
  5402. 				gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([
  5403. 					ui.game.canvas.width / ui.game.canvas.height, vision.camera.scale / 540,
  5404. 					vision.camera.x, vision.camera.y,
  5405. 				]));
  5406. 				gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5407.  
  5408. 				gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.CellSettings);
  5409. 				gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([
  5410. 					...settings.outlineMultiColor, // cell_active_outline
  5411. 					...settings.outlineMultiInactiveColor, // cell_inactive_outline
  5412. 					...settings.unsplittableColor, // cell_unsplittable_outline
  5413. 					...(outlineColor ?? [0, 0, 0, 0]), // cell_subtle_outline_override
  5414. 					settings.outlineMulti,
  5415. 				]));
  5416. 				gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5417. 			})();
  5418.  
  5419. 			(function background() {
  5420. 				if (sigmod.settings.mapColor) {
  5421. 					gl.clearColor(...sigmod.settings.mapColor);
  5422. 				} else if (aux.settings.darkTheme) {
  5423. 					gl.clearColor(0x11 / 255, 0x11 / 255, 0x11 / 255, 1); // #111
  5424. 				} else {
  5425. 					gl.clearColor(0xf2 / 255, 0xfb / 255, 0xff / 255, 1); // #f2fbff
  5426. 				}
  5427. 				gl.clear(gl.COLOR_BUFFER_BIT);
  5428.  
  5429. 				gl.useProgram(glconf.programs.bg);
  5430. 				gl.bindVertexArray(glconf.vao.main.vao);
  5431.  
  5432. 				let texture;
  5433. 				if (settings.background) {
  5434. 					if (settings.background.startsWith('🖼️'))
  5435. 						texture = textureFromDatabase('background');
  5436. 					else
  5437. 						texture = textureFromCache(settings.background);
  5438. 				} else if (aux.settings.showGrid) {
  5439. 					texture = textureFromCache(aux.settings.darkTheme ? darkGridSrc : lightGridSrc);
  5440. 				}
  5441. 				gl.bindTexture(gl.TEXTURE_2D, texture?.texture ?? null);
  5442. 				const repeating = texture && texture.width <= 512 && texture.height <= 512;
  5443.  
  5444. 				let borderColor;
  5445. 				let borderLrtb;
  5446. 				borderColor = (aux.settings.showBorder && vision.border) ? [0, 0, 1, 1] /* #00ff */
  5447. 					: [0, 0, 0, 0] /* transparent */;
  5448. 				borderLrtb = vision.border || { l: 0, r: 0, t: 0, b: 0 };
  5449.  
  5450. 				// u_border_color
  5451. 				borderUboFloats[0] = borderColor[0]; borderUboFloats[1] = borderColor[1];
  5452. 				borderUboFloats[2] = borderColor[2]; borderUboFloats[3] = borderColor[3];
  5453. 				// u_border_xyzw_lrtb
  5454. 				borderUboFloats[4] = borderLrtb.l;
  5455. 				borderUboFloats[5] = borderLrtb.r;
  5456. 				borderUboFloats[6] = borderLrtb.t;
  5457. 				borderUboFloats[7] = borderLrtb.b;
  5458.  
  5459. 				// flags
  5460. 				borderUboInts[8] = (texture ? 0x01 : 0) | (aux.settings.darkTheme ? 0x02 : 0) | (repeating ? 0x04 : 0)
  5461. 					| (settings.rainbowBorder ? 0x08 : 0);
  5462.  
  5463. 				// u_background_width and u_background_height
  5464. 				borderUboFloats[9] = texture?.width ?? 1;
  5465. 				borderUboFloats[10] = texture?.height ?? 1;
  5466. 				borderUboFloats[11] = (now - start) / 1000 * 0.2 % (Math.PI * 2);
  5467.  
  5468. 				gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Border);
  5469. 				gl.bufferSubData(gl.UNIFORM_BUFFER, 0, borderUboFloats);
  5470. 				gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5471. 				gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  5472. 			})();
  5473.  
  5474. 			(function cells() {
  5475. 				// don't render anything if the current tab is not connected
  5476. 				const con = net.connections.get(world.selected);
  5477. 				if (!con?.handshake) return;
  5478.  
  5479. 				// for white cell outlines
  5480. 				let nextCellIdx = 0;
  5481. 				const ownedArray = Array.from(vision.owned);
  5482. 				/** @type {(CellFrame | undefined)[]} */
  5483. 				const ownedToFrame = ownedArray.map(id => {
  5484. 					const cell = world.cells.get(id);
  5485. 					return world.synchronized ? cell?.merged : cell?.views.get(world.selected)?.frames[0];
  5486. 				});
  5487. 				for (const cell of ownedToFrame) {
  5488. 					if (cell && cell.deadAt === undefined) ++nextCellIdx;
  5489. 				}
  5490. 				const canSplit = ownedToFrame.map(cell => {
  5491. 					if (!cell || cell.nr < 128) return false;
  5492. 					return nextCellIdx++ < 16;
  5493. 				});
  5494.  
  5495. 				/**
  5496. 				 * @param {Cell} cell
  5497. 				 * @param {boolean} pellet
  5498. 				 */
  5499. 				const draw = (cell, pellet) => {
  5500. 					// #1 : draw cell
  5501. 					/** @type {CellFrame | undefined} */
  5502. 					const frame = world.synchronized ? cell.merged : cell.views.get(world.selected)?.frames[0];
  5503. 					/** @type {CellInterpolation | undefined} */
  5504. 					const interp = world.synchronized ? cell.merged : cell.views.get(world.selected);
  5505. 					if (!frame || !interp) return;
  5506.  
  5507. 					/** @type {CellDescription | undefined} */
  5508. 					const desc = world.synchronized ? cell.views.values().next().value : cell.views.get(world.selected);
  5509. 					if (!desc) return;
  5510.  
  5511. 					/** @type {CellFrame | undefined} */
  5512. 					let killerFrame;
  5513. 					/** @type {CellInterpolation | undefined} */
  5514. 					let killerInterp;
  5515. 					let killer = frame.deadTo !== -1 && world.cells.get(frame.deadTo);
  5516. 					if (killer) {
  5517. 						killerFrame = world.synchronized ? killer.merged : killer.views.get(world.selected)?.frames[0];
  5518. 						killerInterp = world.synchronized ? killer.merged : killer.views.get(world.selected);
  5519. 					}
  5520.  
  5521. 					gl.useProgram(glconf.programs.cell);
  5522.  
  5523. 					const alpha = render.alpha(frame, now);
  5524. 					cellUboFloats[8] = alpha * settings.cellOpacity;
  5525.  
  5526. 					const { x, y, r, jr } = world.xyr(frame, interp, killerFrame, killerInterp, pellet, now);
  5527. 					// without jelly physics, the radius of cells is adjusted such that its subtle outline doesn't go
  5528. 					// past its original radius.
  5529. 					// jelly physics does not do this, so colliding cells need to look kinda 'joined' together,
  5530. 					// so we multiply the radius by 1.02 (approximately the size increase from the stroke thickness)
  5531. 					cellUboFloats[2] = x;
  5532. 					cellUboFloats[3] = y;
  5533. 					if (aux.settings.jellyPhysics && !desc.jagged && !pellet) {
  5534. 						const strokeThickness = Math.max(jr * 0.01, 10);
  5535. 						cellUboFloats[0] = jr + strokeThickness;
  5536. 						cellUboFloats[1] = (settings.jellySkinLag ? r : jr) + strokeThickness;
  5537. 					} else {
  5538. 						cellUboFloats[0] = cellUboFloats[1] = r + 2;
  5539. 					}
  5540.  
  5541. 					if (desc.jagged) {
  5542. 						const virusTexture = textureFromCache(virusSrc);
  5543. 						if (virusTexture) {
  5544. 							gl.bindTexture(gl.TEXTURE_2D, virusTexture.texture);
  5545. 							cellUboInts[9] = 0x01; // skin and nothing else
  5546. 							// draw a fully transparent cell
  5547. 							cellUboFloats[4] = cellUboFloats[5] = cellUboFloats[6] = cellUboFloats[7] = 0;
  5548. 						} else {
  5549. 							cellUboInts[9] = 0;
  5550. 							// #ff000080 if the virus texture doesn't load
  5551. 							cellUboFloats[4] = 1;
  5552. 							cellUboFloats[5] = 0;
  5553. 							cellUboFloats[6] = 0;
  5554. 							cellUboFloats[7] = 0.5;
  5555. 						}
  5556.  
  5557. 						gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Cell);
  5558. 						gl.bufferSubData(gl.UNIFORM_BUFFER, 0, cellUboBuffer);
  5559. 						gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5560. 						if (!aux.settings.darkTheme && virusSrc === defaultVirusSrc) {
  5561. 							// draw default viruses twice as strong for better contrast against light theme
  5562. 							cellUboFloats[8] = alpha * settings.cellOpacity;
  5563. 						}
  5564. 						gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  5565. 						return;
  5566. 					}
  5567.  
  5568. 					cellUboInts[9] = 0;
  5569.  
  5570. 					/** @type {[number, number, number, number] | [number, number, number] | undefined} */
  5571. 					let color = pellet ? foodColor : cellColor;
  5572. 					if (pellet && foodColor && foodColor[0] === 0 && foodColor[1] === 0 && foodColor[2] === 0) {
  5573. 						color = [desc.rgb[0], desc.rgb[1], desc.rgb[2], foodColor[3]];
  5574. 					} else {
  5575. 						color ??= desc.rgb;
  5576. 					}
  5577.  
  5578. 					cellUboFloats[4] = color[0]; cellUboFloats[5] = color[1];
  5579. 					cellUboFloats[6] = color[2]; cellUboFloats[7] = color[3] ?? 1;
  5580.  
  5581. 					cellUboInts[9] |= settings.cellOutlines ? 0x02 : 0;
  5582. 					cellUboInts[9] |= settings.colorUnderSkin ? 0x20 : 0;
  5583.  
  5584. 					if (!pellet) {
  5585. 						/** @type {symbol | undefined} */
  5586. 						let ownerView;
  5587. 						let ownerVision;
  5588. 						for (const [otherView, otherVision] of world.views) {
  5589. 							if (!otherVision.owned.has(cell.id)) continue;
  5590. 							ownerView = otherView;
  5591. 							ownerVision = otherVision;
  5592. 							break;
  5593. 						}
  5594.  
  5595. 						if (ownerView === world.selected) {
  5596. 							const myIndex = ownedArray.indexOf(cell.id);
  5597. 							if (!canSplit[myIndex]) cellUboInts[9] |= 0x10;
  5598.  
  5599. 							if (vision.camera.merged) cellUboInts[9] |= 0x04;
  5600. 						} else if (ownerVision) {
  5601. 							if (ownerVision.camera.merged) cellUboInts[9] |= 0x08;
  5602. 						}
  5603.  
  5604. 						const texture = render.skin(cell);
  5605. 						if (texture) {
  5606. 							cellUboInts[9] |= 0x01; // skin
  5607. 							gl.bindTexture(gl.TEXTURE_2D, texture.texture);
  5608. 						}
  5609. 					}
  5610.  
  5611. 					gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Cell);
  5612. 					gl.bufferSubData(gl.UNIFORM_BUFFER, 0, cellUboBuffer);
  5613. 					gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5614. 					gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  5615.  
  5616. 					// #2 : draw text
  5617. 					if (pellet) return;
  5618. 					const name = desc.name || 'An unnamed cell';
  5619. 					const showThisName = (showNames ?? true) && frame.nr >= 64;
  5620. 					const showThisMass = aux.settings.showMass && frame.nr >= 64;
  5621. 					const clan = (settings.clans && aux.clans.get(desc.clan)) || '';
  5622. 					if (!showThisName && !showThisMass && !clan) return;
  5623.  
  5624. 					gl.useProgram(glconf.programs.text);
  5625. 					textUboFloats[8] = alpha; // text_alpha
  5626.  
  5627. 					let useSilhouette = false;
  5628. 					if (desc.sub) {
  5629. 						// text_color1 = #eb9500 * 1.2
  5630. 						textUboFloats[0] = 0xeb / 255 * 1.2; textUboFloats[1] = 0x95 / 255 * 1.2;
  5631. 						textUboFloats[2] = 0x00 / 255 * 1.2; textUboFloats[3] = 1;
  5632. 						// text_color2 = #f9bf0d * 1.2
  5633. 						textUboFloats[4] = 0xf9 / 255 * 1.2; textUboFloats[5] = 0xbf / 255 * 1.2;
  5634. 						textUboFloats[6] = 0x0d / 255 * 1.2; textUboFloats[7] = 1;
  5635. 						useSilhouette = true;
  5636. 					} else {
  5637. 						// text_color1 = text_color2 = #fff
  5638. 						textUboFloats[0] = textUboFloats[1] = textUboFloats[2] = textUboFloats[3] = 1;
  5639. 						textUboFloats[4] = textUboFloats[5] = textUboFloats[6] = textUboFloats[7] = 1;
  5640. 					}
  5641.  
  5642. 					if (input.nick.find(el => el.value === name)) {
  5643. 						const { nameColor1, nameColor2 } = sigmod.settings;
  5644. 						if (nameColor1) {
  5645. 							textUboFloats[0] = nameColor1[0]; textUboFloats[1] = nameColor1[1];
  5646. 							textUboFloats[2] = nameColor1[2]; textUboFloats[3] = nameColor1[3];
  5647. 							useSilhouette = true;
  5648. 						}
  5649.  
  5650. 						if (nameColor2) {
  5651. 							textUboFloats[4] = nameColor2[0]; textUboFloats[5] = nameColor2[1];
  5652. 							textUboFloats[6] = nameColor2[2]; textUboFloats[7] = nameColor2[3];
  5653. 							useSilhouette = true;
  5654. 						}
  5655. 					}
  5656.  
  5657. 					if (clan) {
  5658. 						const { aspectRatio, text, silhouette } = textFromCache(clan, useSilhouette);
  5659. 						if (text) {
  5660. 							textUboFloats[9] = aspectRatio; // text_aspect_ratio
  5661. 							textUboFloats[10]
  5662. 								= showThisName ? settings.clanScaleFactor * 0.5 : settings.nameScaleFactor;
  5663. 							textUboInts[11] = Number(useSilhouette); // text_silhouette_enabled
  5664. 							textUboFloats[12] = 0; // text_offset.x
  5665. 							textUboFloats[13] = showThisName
  5666. 								? -settings.nameScaleFactor/3 - settings.clanScaleFactor/6 : 0; // text_offset.y
  5667.  
  5668. 							gl.bindTexture(gl.TEXTURE_2D, text);
  5669. 							if (silhouette) {
  5670. 								gl.activeTexture(gl.TEXTURE1);
  5671. 								gl.bindTexture(gl.TEXTURE_2D, silhouette);
  5672. 								gl.activeTexture(gl.TEXTURE0);
  5673. 							}
  5674.  
  5675. 							gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Text);
  5676. 							gl.bufferSubData(gl.UNIFORM_BUFFER, 0, textUboBuffer);
  5677. 							gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5678. 							gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  5679. 						}
  5680. 					}
  5681.  
  5682. 					if (showThisName) {
  5683. 						const { aspectRatio, text, silhouette } = textFromCache(name, useSilhouette);
  5684. 						if (text) {
  5685. 							textUboFloats[9] = aspectRatio; // text_aspect_ratio
  5686. 							textUboFloats[10] = settings.nameScaleFactor; // text_scale
  5687. 							textUboInts[11] = Number(useSilhouette); // text_silhouette_enabled
  5688. 							textUboFloats[12] = textUboFloats[13] = 0; // text_offset = (0, 0)
  5689.  
  5690. 							gl.bindTexture(gl.TEXTURE_2D, text);
  5691. 							if (silhouette) {
  5692. 								gl.activeTexture(gl.TEXTURE1);
  5693. 								gl.bindTexture(gl.TEXTURE_2D, silhouette);
  5694. 								gl.activeTexture(gl.TEXTURE0);
  5695. 							}
  5696.  
  5697. 							gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Text);
  5698. 							gl.bufferSubData(gl.UNIFORM_BUFFER, 0, textUboBuffer);
  5699. 							gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5700. 							gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  5701. 						}
  5702. 					}
  5703.  
  5704. 					if (showThisMass) {
  5705. 						textUboFloats[8] = alpha * settings.massOpacity; // text_alpha
  5706. 						textUboFloats[10] = 0.5 * settings.massScaleFactor; // text_scale
  5707. 						textUboInts[11] = 0; // text_silhouette_enabled
  5708.  
  5709. 						let yOffset;
  5710. 						if (showThisName)
  5711. 							yOffset = (settings.nameScaleFactor + 0.5 * settings.massScaleFactor) / 3;
  5712. 						else if (clan)
  5713. 							yOffset = (1 + 0.5 * settings.massScaleFactor) / 3;
  5714. 						else
  5715. 							yOffset = 0;
  5716. 						// draw each digit separately, as Ubuntu makes them all the same width.
  5717. 						// significantly reduces the size of the text cache
  5718. 						const mass = Math.floor(frame.nr * frame.nr / 100).toString();
  5719. 						const maxWidth = maxMassWidth();
  5720. 						for (let i = 0; i < mass.length; ++i) {
  5721. 							const { height, width, texture } = massTextFromCache(mass[i]);
  5722. 							textUboFloats[9] = width / height; // text_aspect_ratio
  5723. 							// text_offset.x; kerning is fixed by subtracting most of the padding from lineWidth
  5724. 							textUboFloats[12] = (i - (mass.length - 1) / 2) * settings.massScaleFactor
  5725. 								* (maxWidth / width)
  5726. 								* (maxWidth - 20 * settings.textOutlinesFactor * settings.massScaleFactor) / maxWidth;
  5727. 							textUboFloats[13] = yOffset;
  5728. 							gl.bindTexture(gl.TEXTURE_2D, texture);
  5729.  
  5730. 							gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Text);
  5731. 							gl.bufferSubData(gl.UNIFORM_BUFFER, 0, textUboBuffer);
  5732. 							gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5733. 							gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  5734. 						}
  5735. 					}
  5736. 				}
  5737.  
  5738. 				// draw pellets
  5739. 				{
  5740. 					// blend function for all pellets
  5741. 					if (settings.pelletGlow && aux.settings.darkTheme) gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
  5742.  
  5743. 					// draw unanimated pellets using instanced drawing
  5744. 					gl.useProgram(glconf.programs.circle);
  5745. 					gl.bindVertexArray(glconf.vao.pellet.vao);
  5746. 					let i = 0;
  5747. 					for (const cell of world.pellets.values()) {
  5748. 						const frame = world.synchronized ? cell.merged : cell.views.get(world.selected)?.frames[0];
  5749. 						if (frame?.deadTo !== -1) continue;
  5750. 						circleBuffers.pelletAlpha[i++] = render.alpha(frame, now);
  5751. 					}
  5752. 					gl.bindBuffer(gl.ARRAY_BUFFER, glconf.vao.pellet.alpha);
  5753. 					gl.bufferSubData(gl.ARRAY_BUFFER, 0, circleBuffers.pelletAlpha);
  5754. 					gl.bindBuffer(gl.ARRAY_BUFFER, null);
  5755.  
  5756. 					gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Circle);
  5757. 					circleUboFloats[0] = 1; // alpha
  5758. 					circleUboFloats[1] = 0; // scale (0 means no blur)
  5759. 					gl.bufferSubData(gl.UNIFORM_BUFFER, 0, circleUboFloats);
  5760. 					gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5761. 					// pellet data is not uploaded if tab is closed for a while, so pelletsUploaded would be 0
  5762. 					gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, circleBuffers.pelletsUploaded);
  5763.  
  5764. 					if (settings.pelletGlow) {
  5765. 						// draw unanimated pellet glow
  5766. 						gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
  5767. 						circleUboFloats[0] = 0.25; // alpha
  5768. 						circleUboFloats[1] = 2; // scale
  5769. 						gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Circle);
  5770. 						gl.bufferData(gl.UNIFORM_BUFFER, circleUboFloats, gl.STATIC_DRAW);
  5771. 						gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5772. 						gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, i);
  5773.  
  5774. 						// reset blend func
  5775. 						gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  5776. 					}
  5777.  
  5778. 					// draw animated pellets without instanced drawing
  5779. 					gl.bindVertexArray(glconf.vao.main.vao);
  5780. 					for (const cell of world.pellets.values()) {
  5781. 						const frame = world.synchronized ? cell.merged : cell.views.get(world.selected)?.frames[0];
  5782. 						if (frame && frame.deadTo !== -1) draw(cell, true);
  5783. 						// do not make eaten pellets glow
  5784. 					}
  5785. 				}
  5786.  
  5787. 				// draw cells
  5788. 				{
  5789. 					/** @type {[Cell, number][]} */
  5790. 					const sorted = [];
  5791. 					for (const cell of world.cells.values()) {
  5792. 						const frame = world.synchronized ? cell.merged : cell.views.get(world.selected)?.frames[0];
  5793. 						const interp = world.synchronized ? cell.merged : cell.views.get(world.selected);
  5794. 						if (!frame || !interp) continue;
  5795.  
  5796. 						const a = Math.min(Math.max((now - interp.updated) / settings.drawDelay, 0), 1);
  5797. 						const computedR = interp.or + (frame.nr - interp.or) * a;
  5798. 						sorted.push([cell, computedR]);
  5799. 					}
  5800.  
  5801. 					gl.bindVertexArray(glconf.vao.main.vao);
  5802. 					sorted.sort(([_a, ar], [_b, br]) => ar - br);
  5803. 					for (const [cell] of sorted) draw(cell, false);
  5804.  
  5805. 					// draw glow *after* all cells (so the glow goes above the text)
  5806. 					if (settings.cellGlow) {
  5807. 						render.upload(false);
  5808. 						let i = 0;
  5809. 						for (const cell of world.cells.values()) {
  5810. 							const frame = world.synchronized ? cell.merged : cell.views.get(world.selected)?.frames[0];
  5811. 							/** @type {CellDescription} */
  5812. 							const desc = world.synchronized ? cell.views.values().next().value : cell.views.get(world.selected);
  5813. 							if (!frame || !desc || desc.jagged) continue;
  5814.  
  5815. 							let alpha = render.alpha(frame, now);
  5816. 							// it looks kinda weird when cells get sucked in when being eaten
  5817. 							if (frame.deadTo !== -1) alpha *= 0.25;
  5818. 							circleBuffers.cellAlpha[i++] = alpha;
  5819. 						}
  5820.  
  5821. 						gl.useProgram(glconf.programs.circle);
  5822. 						gl.bindVertexArray(glconf.vao.cell.vao);
  5823. 						gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
  5824.  
  5825. 						gl.bindBuffer(gl.ARRAY_BUFFER, glconf.vao.cell.alpha);
  5826. 						gl.bufferSubData(gl.ARRAY_BUFFER, 0, circleBuffers.cellAlpha);
  5827. 						gl.bindBuffer(gl.ARRAY_BUFFER, null);
  5828.  
  5829. 						circleUboFloats[0] = 0.25; // alpha
  5830. 						// scale (can't be too big, otherwise it looks weird when cells come into view)
  5831. 						circleUboFloats[1] = 1.5;
  5832. 						gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Circle);
  5833. 						gl.bufferData(gl.UNIFORM_BUFFER, circleUboFloats, gl.STATIC_DRAW);
  5834. 						gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5835. 						gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, i);
  5836.  
  5837. 						gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  5838. 					}
  5839. 				}
  5840.  
  5841. 				// draw tracers
  5842. 				if (settings.tracer) {
  5843. 					gl.useProgram(glconf.programs.tracer);
  5844. 					gl.bindVertexArray(glconf.vao.tracer.vao);
  5845.  
  5846. 					tracerUboFloats[0] = 0.5; // #7f7f7f color
  5847. 					tracerUboFloats[1] = 0.5;
  5848. 					tracerUboFloats[2] = 0.5;
  5849. 					tracerUboFloats[3] = 0.5;
  5850. 					tracerUboFloats[4] = 2; // line thickness
  5851. 					gl.bindBuffer(gl.UNIFORM_BUFFER, glconf.uniforms.Tracer);
  5852. 					gl.bufferSubData(gl.UNIFORM_BUFFER, 0, tracerUboFloats);
  5853. 					gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  5854.  
  5855. 					const mouse = input.toWorld(world.selected, input.current);
  5856. 					const inputs = input.views.get(world.selected);
  5857. 					if (!inputs) return; // tracers are the last step in cells(), so a return is OK
  5858.  
  5859. 					// resize by powers of 2
  5860. 					let capacity = tracerFloats.length || 1;
  5861. 					while (vision.owned.size * 4 > capacity) capacity *= 2;
  5862. 					const resizing = capacity !== tracerFloats.length;
  5863. 					if (resizing) tracerFloats = new Float32Array(capacity);
  5864.  
  5865. 					const camera
  5866. 						= world.singleCamera(world.selected, vision, settings.camera !== 'default' ? 2 : 0, now);
  5867.  
  5868. 					let i = 0;
  5869. 					for (const id of vision.owned) {
  5870. 						const cell = world.cells.get(id);
  5871. 						const frame = world.synchronized ? cell?.merged : cell?.views.get(world.selected)?.frames[0];
  5872. 						const interp = world.synchronized ? cell?.merged : cell?.views.get(world.selected);
  5873. 						if (!frame || !interp || frame.deadAt !== undefined) continue;
  5874.  
  5875. 						const { x, y } = world.xyr(frame, interp, undefined, undefined, false, now);
  5876. 						tracerFloats[i * 4] = x;
  5877. 						tracerFloats[i * 4 + 1] = y;
  5878. 						tracerFloats[i * 4 + 2] = mouse[0];
  5879. 						tracerFloats[i * 4 + 3] = mouse[1];
  5880.  
  5881. 						switch (inputs.lock?.type) {
  5882. 							case 'point':
  5883. 								if (now > inputs.lock.until) break;
  5884. 								tracerFloats[i * 4 + 2] = inputs.lock.world[0];
  5885. 								tracerFloats[i * 4 + 3] = inputs.lock.world[1];
  5886. 								break;
  5887. 							case 'horizontal':
  5888. 								tracerFloats[i * 4 + 3] = inputs.lock.world[1];
  5889. 								break;
  5890. 							case 'vertical':
  5891. 								tracerFloats[i * 4 + 2] = inputs.lock.world[0];
  5892. 								break;
  5893. 							case 'fixed':
  5894. 								const dx = mouse[0] - camera.sumX / camera.weight;
  5895. 								const dy = mouse[1] - camera.sumY / camera.weight;
  5896. 								const d = Math.hypot(dx, dy);
  5897. 								tracerFloats[i * 4 + 2] = x + dx * 1e6 / d;
  5898. 								tracerFloats[i * 4 + 3] = y + dy * 1e6 / d;
  5899. 						}
  5900. 						++i;
  5901. 					}
  5902.  
  5903. 					gl.bindBuffer(gl.ARRAY_BUFFER, glconf.vao.tracer.line);
  5904. 					if (resizing) gl.bufferData(gl.ARRAY_BUFFER, tracerFloats, gl.STATIC_DRAW);
  5905. 					else gl.bufferSubData(gl.ARRAY_BUFFER, 0, tracerFloats);
  5906. 					gl.bindBuffer(gl.ARRAY_BUFFER, null);
  5907. 					gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, i);
  5908. 				}
  5909. 			})();
  5910.  
  5911. 			ui.stats.update(world.selected);
  5912.  
  5913. 			(function minimap() {
  5914. 				if (now - lastMinimapDraw < 40) return; // should be good enough when multiboxing, may change later
  5915. 				lastMinimapDraw = now;
  5916.  
  5917. 				if (!aux.settings.showMinimap) {
  5918. 					ui.minimap.canvas.style.display = 'none';
  5919. 					return;
  5920. 				} else {
  5921. 					ui.minimap.canvas.style.display = '';
  5922. 				}
  5923.  
  5924. 				const { canvas, ctx } = ui.minimap;
  5925. 				// clears the canvas
  5926. 				const canvasLength = canvas.width = canvas.height = Math.ceil(200 * (devicePixelRatio - 0.0001));
  5927. 				const sectorSize = canvas.width / 5;
  5928.  
  5929. 				// always use this style for drawing section and minimap names
  5930. 				ctx.font = `${Math.floor(sectorSize / 3)}px "${sigmod.settings.font || 'Ubuntu'}", Ubuntu`;
  5931. 				ctx.textAlign = 'center';
  5932. 				ctx.textBaseline = 'middle';
  5933.  
  5934. 				// cache the background if necessary (25 texts = bad)
  5935. 				if (minimapCache && minimapCache.bg.width === canvasLength
  5936. 					&& minimapCache.darkTheme === aux.settings.darkTheme) {
  5937. 					ctx.putImageData(minimapCache.bg, 0, 0);
  5938. 				} else {
  5939. 					// draw section names
  5940. 					ctx.fillStyle = '#fff';
  5941. 					ctx.globalAlpha = aux.settings.darkTheme ? 0.3 : 0.7;
  5942.  
  5943. 					const cols = ['1', '2', '3', '4', '5'];
  5944. 					const rows = ['A', 'B', 'C', 'D', 'E'];
  5945. 					cols.forEach((col, y) => {
  5946. 						rows.forEach((row, x) => {
  5947. 							ctx.fillText(row + col, (x + 0.5) * sectorSize, (y + 0.5) * sectorSize);
  5948. 						});
  5949. 					});
  5950.  
  5951. 					minimapCache = {
  5952. 						bg: ctx.getImageData(0, 0, canvas.width, canvas.height),
  5953. 						darkTheme: aux.settings.darkTheme,
  5954. 					};
  5955. 				}
  5956.  
  5957. 				const { border } = vision;
  5958. 				if (!border) return;
  5959.  
  5960. 				// sigmod overlay resizes itself differently, so we correct it whenever we need to
  5961. 				/** @type {HTMLCanvasElement | null} */
  5962. 				const sigmodMinimap = document.querySelector('canvas.minimap');
  5963. 				if (sigmodMinimap) {
  5964. 					// we need to check before updating the canvas, otherwise we will clear it
  5965. 					if (sigmodMinimap.style.width !== '200px' || sigmodMinimap.style.height !== '200px')
  5966. 						sigmodMinimap.style.width = sigmodMinimap.style.height = '200px';
  5967.  
  5968. 					if (sigmodMinimap.width !== canvas.width || sigmodMinimap.height !== canvas.height)
  5969. 						sigmodMinimap.width = sigmodMinimap.height = canvas.width;
  5970. 				}
  5971.  
  5972. 				const gameWidth = (border.r - border.l);
  5973. 				const gameHeight = (border.b - border.t);
  5974.  
  5975. 				// highlight current section
  5976. 				ctx.fillStyle = settings.theme[3] ? aux.rgba2hex6(...settings.theme) : '#ff0';
  5977. 				ctx.globalAlpha = 0.3;
  5978.  
  5979. 				const sectionX = Math.floor((vision.camera.x - border.l) / gameWidth * 5);
  5980. 				const sectionY = Math.floor((vision.camera.y - border.t) / gameHeight * 5);
  5981. 				ctx.fillRect(sectionX * sectorSize, sectionY * sectorSize, sectorSize, sectorSize);
  5982.  
  5983. 				ctx.globalAlpha = 1;
  5984.  
  5985. 				// draw cells
  5986. 				/**
  5987. 				 * @param {{ nx: number, ny: number, nr: number }} frame
  5988. 				 * @param {{ rgb: [number, number, number] | [number, number, number, number] }} desc
  5989. 				 */
  5990. 				const drawCell = (frame, desc) => {
  5991. 					const x = (frame.nx - border.l) / gameWidth * canvas.width;
  5992. 					const y = (frame.ny - border.t) / gameHeight * canvas.height;
  5993. 					const r = Math.max(frame.nr / gameWidth * canvas.width, 2);
  5994.  
  5995. 					ctx.scale(0.01, 0.01); // prevent sigmod from treating minimap cells as pellets
  5996. 					ctx.fillStyle = aux.rgba2hex6(desc.rgb[0], desc.rgb[1], desc.rgb[2], 1);
  5997. 					ctx.beginPath();
  5998. 					ctx.moveTo((x + r) * 100, y * 100);
  5999. 					ctx.arc(x * 100, y * 100, r * 100, 0, 2 * Math.PI);
  6000. 					ctx.fill();
  6001. 					ctx.resetTransform();
  6002. 				};
  6003.  
  6004. 				/**
  6005. 				 * @param {number} x
  6006. 				 * @param {number} y
  6007. 				 * @param {string} name
  6008. 				 */
  6009. 				const drawName = function drawName(x, y, name) {
  6010. 					x = (x - border.l) / gameWidth * canvas.width;
  6011. 					y = (y - border.t) / gameHeight * canvas.height;
  6012.  
  6013. 					ctx.fillStyle = '#fff';
  6014. 					// add a space to prevent sigmod from detecting names
  6015. 					ctx.fillText(name + ' ', x, y - 7 * devicePixelRatio - sectorSize / 6);
  6016. 				};
  6017.  
  6018. 				// draw clanmates (and other tabs) first, below yourself
  6019. 				// clanmates are grouped by name AND color, ensuring they stay separate
  6020. 				/** @type {Map<string, { name: string, n: number, x: number, y: number }>} */
  6021. 				const avgPos = new Map();
  6022. 				for (const cell of world.cells.values()) {
  6023. 					const frame = world.synchronized ? cell.merged : cell.views.get(world.selected)?.frames[0];
  6024. 					/** @type {CellDescription} */
  6025. 					const desc = world.synchronized ? cell.views.values().next().value : cell.views.get(world.selected);
  6026. 					if (!frame || !desc || frame.deadAt !== undefined) continue;
  6027.  
  6028. 					let ownedByOther = false;
  6029. 					for (const [view, vision] of world.views) {
  6030. 						if (view === world.selected) continue;
  6031. 						ownedByOther = vision.owned.has(cell.id) && frame.born >= vision.spawned;
  6032. 						if (ownedByOther) break;
  6033. 					}
  6034. 					if ((!desc.clan || desc.clan !== aux.userData?.clan) && !ownedByOther) continue;
  6035.  
  6036. 					drawCell(frame, desc);
  6037.  
  6038. 					const name = desc.name || 'An unnamed cell';
  6039. 					const hash = desc.name + (desc.rgb[0] * 65536 + desc.rgb[1] * 256 + desc.rgb[2]);
  6040. 					const entry = avgPos.get(hash);
  6041. 					if (entry) {
  6042. 						++entry.n;
  6043. 						entry.x += frame.nx;
  6044. 						entry.y += frame.ny;
  6045. 					} else {
  6046. 						avgPos.set(hash, { name, n: 1, x: frame.nx, y: frame.ny });
  6047. 					}
  6048. 				}
  6049.  
  6050. 				avgPos.forEach(entry => {
  6051. 					drawName(entry.x / entry.n, entry.y / entry.n, entry.name);
  6052. 				});
  6053.  
  6054. 				// draw my cells above everyone else
  6055. 				let myName = '';
  6056. 				let ownN = 0;
  6057. 				let ownX = 0;
  6058. 				let ownY = 0;
  6059. 				for (const id of vision.owned) {
  6060. 					const cell = world.cells.get(id);
  6061. 					const frame = world.synchronized ? cell?.merged : cell?.views.get(world.selected)?.frames[0];
  6062. 					const desc = world.synchronized ? cell?.views.values().next().value : cell?.views.get(world.selected);
  6063. 					if (!frame || !desc || frame.deadAt !== undefined) continue;
  6064.  
  6065. 					drawCell(frame, desc);
  6066. 					myName = desc.name || 'An unnamed cell';
  6067. 					++ownN;
  6068. 					ownX += frame.nx;
  6069. 					ownY += frame.ny;
  6070. 				}
  6071.  
  6072. 				if (ownN <= 0) {
  6073. 					// if no cells were drawn, draw our spectate pos instead
  6074. 					drawCell({ nx: vision.camera.x, ny: vision.camera.y, nr: gameWidth / canvas.width * 5, },
  6075. 						{ rgb: settings.theme[3] ? settings.theme : [1, 0.6, 0.6] });
  6076. 				} else {
  6077. 					ownX /= ownN;
  6078. 					ownY /= ownN;
  6079. 					// draw name above player's cells
  6080. 					drawName(ownX, ownY, myName);
  6081.  
  6082. 					// send a hint to sigmod
  6083. 					ctx.globalAlpha = 0;
  6084. 					ctx.fillText(`X: ${ownX}, Y: ${ownY}`, 0, -1000);
  6085. 				}
  6086. 			})();
  6087.  
  6088. 			requestAnimationFrame(renderGame);
  6089. 		}
  6090.  
  6091. 		requestAnimationFrame(renderGame);
  6092. 		return render;
  6093. 	})();
  6094.  
  6095.  
  6096.  
  6097. 	// @ts-expect-error for debugging purposes and other scripts. dm me on discord @ 8y8x to guarantee stability
  6098. 	window.sigfix = {
  6099. 		destructor, aux, sigmod, ui, settings, world, net, input, glconf, render,
  6100. 	};
  6101. })();