SigMod Client (Macros)

The best mod you can find for Sigmally - Agar.io: Macros, Friends, tag system (minimap, chat), color mod, custom skins, AutoRespawn, save names, themes and more!

当前为 2025-03-03 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name SigMod Client (Macros)
  3. // @version 10.1.6
  4. // @description The best mod you can find for Sigmally - Agar.io: Macros, Friends, tag system (minimap, chat), color mod, custom skins, AutoRespawn, save names, themes and more!
  5. // @author Cursed
  6. // @match https://*.sigmally.com/*
  7. // @icon https://czrsd.com/static/sigmod/SigMod25-rounded.png
  8. // @run-at document-end
  9. // @license MIT
  10. // @grant none
  11. // @namespace https://greasyfork.org/users/981958
  12. // ==/UserScript==
  13.  
  14. (function () {
  15. 'use strict';
  16. const version = 10;
  17. const serverVersion = '4.0.3';
  18. const storageVersion = 1.0;
  19. const storageName = 'SigModClient-settings';
  20. const headerAnim = 'https://czrsd.com/static/sigmod/sigmodclient.gif';
  21.  
  22. const libs = {
  23. chart: 'https://cdn.jsdelivr.net/npm/chart.js',
  24. colorPicker: {
  25. js: 'https://unpkg.com/alwan/dist/js/alwan.min.js',
  26. css: 'https://unpkg.com/alwan/dist/css/alwan.min.css',
  27. },
  28. jszip: 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js',
  29. };
  30.  
  31. const defaultSettings = {
  32. storageVersion,
  33. macros: {
  34. feedSpeed: 40,
  35. keys: {
  36. rapidFeed: 'w',
  37. respawn: 'b',
  38. location: 'y',
  39. saveImage: null,
  40. splits: {
  41. double: 'd',
  42. triple: 'f',
  43. quad: 'g',
  44. doubleTrick: null,
  45. selfTrick: null,
  46. },
  47. line: {
  48. horizontal: 's',
  49. vertical: 't',
  50. fixed: null,
  51. instantSplit: 0,
  52. },
  53. toggle: {
  54. menu: 'v',
  55. chat: 'z',
  56. names: null,
  57. skins: null,
  58. autoRespawn: null,
  59. },
  60. },
  61. mouse: {
  62. left: null,
  63. right: null,
  64. },
  65. },
  66. game: {
  67. font: 'Ubuntu',
  68. borderColor: null,
  69. foodColor: null,
  70. cellColor: null,
  71. virusImage: '/assets/images/viruses/2.png',
  72. shortenNames: false,
  73. removeOutlines: false,
  74. skins: {
  75. original: null,
  76. replacement: null,
  77. },
  78. map: {
  79. color: null,
  80. image: '',
  81. },
  82. name: {
  83. color: null,
  84. gradient: {
  85. enabled: false,
  86. left: null,
  87. right: null,
  88. },
  89. },
  90. },
  91. themes: {
  92. current: 'Dark',
  93. custom: [],
  94. inputBorderRadius: null,
  95. menuBorderRadius: null,
  96. inputBorder: '1px',
  97. },
  98. settings: {
  99. tag: null,
  100. savedNames: [],
  101. autoRespawn: false,
  102. playTimer: false,
  103. mouseTracker: false,
  104. autoClaimCoins: false,
  105. showChallenges: false,
  106. deathScreenPos: 'center',
  107. },
  108. chat: {
  109. limit: 100,
  110. bgColor: '#00000040',
  111. textColor: '#ffffff',
  112. compact: false,
  113. themeColor: '#8a25e5',
  114. showTime: true,
  115. showNameColors: true,
  116. showClientChat: false,
  117. showChatButtons: true,
  118. blurTag: false,
  119. locationText: '{pos}',
  120. },
  121. modAccount: {
  122. authorized: false,
  123. },
  124. };
  125.  
  126. let modSettings;
  127. const stored = localStorage.getItem(storageName);
  128. try {
  129. modSettings = stored ? JSON.parse(stored) : defaultSettings;
  130. } catch (e) {
  131. modSettings = defaultSettings;
  132. }
  133.  
  134. // really rare cases, but in case the storage structure changes completely again
  135. if (
  136. modSettings.storageVersion &&
  137. modSettings.storageVersion !== storageVersion
  138. ) {
  139. localStorage.removeItem(storageName);
  140. location.reload();
  141. }
  142.  
  143. if (!stored) updateStorage();
  144.  
  145. // intercept fetches
  146. let fetchedUser = 0;
  147. const originalFetch = window.fetch;
  148.  
  149. window.fetch = new Proxy(originalFetch, {
  150. async apply(target, thisArg, argumentsList) {
  151. const [url] = argumentsList;
  152. const response = await target.apply(thisArg, argumentsList);
  153.  
  154. if (typeof url === 'string') {
  155. if (url.includes('/server/auth')) {
  156. const data = await response.clone().json();
  157. if (data) mods.handleGoogleAuth(data.body?.user);
  158. }
  159. }
  160.  
  161. return response;
  162. },
  163. });
  164.  
  165. // for development
  166. let isDev = false;
  167. let port = 3001;
  168.  
  169. // global sigmod
  170. window.sigmod = {
  171. version,
  172. server_version: serverVersion,
  173. storageName,
  174. settings: modSettings,
  175. };
  176.  
  177. // Global gameSettings object to store the Sigmally WebSocket, User instance and playing status
  178. /*
  179. * @typedef {Object} User
  180. * @property {string} _id
  181. * @property {number} boost
  182. * @property {Object.<string, number>} cards
  183. * @property {string} clan
  184. * @property {string} createTime
  185. * @property {string} email
  186. * @property {number} exp
  187. * @property {string} fullName
  188. * @property {string} givenName
  189. * @property {number} gold
  190. * @property {string} googleID
  191. * @property {number} hourlyTime
  192. * @property {string} imageURL
  193. * @property {any[]} lastSkinUsed
  194. * @property {number} level
  195. * @property {number} nextLevel
  196. * @property {number} progress
  197. * @property {number} seasonExp
  198. * @property {Object.<string, any>} sigma
  199. * @property {string[]} skins
  200. * @property {number} subscription
  201. * @property {string} updateTime
  202. * @property {string} token
  203. *
  204. * @property {WebSocket} ws
  205. * @property {User} user
  206. * @property {boolean} isPlaying
  207. */
  208. window.gameSettings = {
  209. ws: null,
  210. user: null,
  211. isPlaying: false,
  212. };
  213.  
  214. // --------- HELPER FUNCTIONS --------- \\
  215. // --- General
  216. // --- Colors
  217. // --- Game
  218. // --- Time
  219. // --- (Coordinates)
  220.  
  221. function updateStorage() {
  222. localStorage.setItem(storageName, JSON.stringify(modSettings));
  223. }
  224.  
  225. const byId = (id) => document.getElementById(id);
  226.  
  227. function debounce(func, delay) {
  228. let timeoutId;
  229. return function (...args) {
  230. clearTimeout(timeoutId);
  231. timeoutId = setTimeout(() => {
  232. func.apply(this, args);
  233. }, delay);
  234. };
  235. }
  236.  
  237. async function wait(ms) {
  238. return new Promise((r) => setTimeout(r, ms));
  239. }
  240.  
  241. function noXSS(text) {
  242. return text
  243. .replace(/&/g, '&amp;')
  244. .replace(/</g, '&lt;')
  245. .replace(/>/g, '&gt;')
  246. .replace(/"/g, '&quot;')
  247. .replace(/'/g, '&#039;');
  248. }
  249.  
  250. function parsetxt(val) {
  251. return /^(?:\{([^}]*)})?([^]*)/.exec(val)[2].trim();
  252. }
  253.  
  254. // generate random string
  255. const rdmString = (length) => {
  256. return [...Array(length)]
  257. .map(() => Math.random().toString(36).charAt(2))
  258. .join('');
  259. };
  260.  
  261. // --------- Colors --------- //
  262.  
  263. // rgba values to hex color code
  264. function RgbaToHex(code) {
  265. const rgbaValues = code.match(/\d+/g);
  266. const [r, g, b] = rgbaValues.slice(0, 3);
  267. return `#${Number(r).toString(16).padStart(2, '0')}${Number(g)
  268. .toString(16)
  269. .padStart(2, '0')}${Number(b).toString(16).padStart(2, '0')}`;
  270. }
  271.  
  272. function bytesToHex(r, g, b) {
  273. return (
  274. '#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)
  275. );
  276. }
  277.  
  278. // --------- Game --------- //
  279.  
  280. function menuClosed() {
  281. const menuWrapper = byId('menu-wrapper');
  282.  
  283. return menuWrapper.style.display === 'none';
  284. }
  285.  
  286. function isDead() {
  287. const __line2 = byId('__line2');
  288. return !__line2.classList.contains('line--hidden');
  289. }
  290.  
  291. function getGameMode() {
  292. const gameMode = byId('gamemode');
  293. if (!gameMode.value) {
  294. return 'Tourney';
  295. }
  296. const options = Object.values(gameMode.querySelectorAll('option'));
  297. const selectedOption = options.filter(
  298. (option) => option.value === gameMode.value
  299. )[0];
  300. return selectedOption.textContent.split(' ')[0];
  301. }
  302.  
  303. function keypress(key, keycode) {
  304. const keyDownEvent = new KeyboardEvent('keydown', {
  305. key: key,
  306. code: keycode,
  307. });
  308. const keyUpEvent = new KeyboardEvent('keyup', {
  309. key: key,
  310. code: keycode,
  311. });
  312.  
  313. window.dispatchEvent(keyDownEvent);
  314. window.dispatchEvent(keyUpEvent);
  315. }
  316.  
  317. function mousemove(sx, sy) {
  318. const mouseMoveEvent = new MouseEvent('mousemove', {
  319. clientX: sx,
  320. clientY: sy,
  321. });
  322. const canvas = byId('canvas');
  323. canvas.dispatchEvent(mouseMoveEvent);
  324. }
  325.  
  326. // time formatters
  327. const prettyTime = {
  328. fullDate: (dateTimestamp, time = false) => {
  329. const date = new Date(dateTimestamp);
  330. const day = String(date.getDate()).padStart(2, '0');
  331. const month = String(date.getMonth() + 1).padStart(2, '0');
  332. const year = date.getFullYear();
  333. const formattedDate = `${day}.${month}.${year}`;
  334.  
  335. if (time) {
  336. const hours = String(date.getHours()).padStart(2, '0');
  337. const minutes = String(date.getMinutes()).padStart(2, '0');
  338. const seconds = String(date.getSeconds()).padStart(2, '0');
  339. return `${hours}:${minutes}:${seconds} ${formattedDate}`;
  340. }
  341.  
  342. return formattedDate;
  343. },
  344. am_pm: (date) => {
  345. if (!date) return '';
  346.  
  347. const d = new Date(date);
  348. const hours = d.getHours();
  349. const minutes = String(d.getMinutes()).padStart(2, '0');
  350. const ampm = hours >= 12 ? 'PM' : 'AM';
  351. const formattedHours = (hours % 12 || 12)
  352. .toString()
  353. .padStart(2, '0');
  354.  
  355. return `${formattedHours}:${minutes} ${ampm}`;
  356. },
  357. time_ago: (timestamp, isIso = false) => {
  358. if (!timestamp) return '';
  359. const currentTime = new Date();
  360. const elapsedTime = isIso
  361. ? currentTime - new Date(timestamp)
  362. : currentTime - timestamp;
  363.  
  364. const seconds = Math.floor(elapsedTime / 1000);
  365. const minutes = Math.floor(seconds / 60);
  366. const hours = Math.floor(minutes / 60);
  367. const days = Math.floor(hours / 24);
  368. const years = Math.floor(days / 365);
  369.  
  370. if (years > 0) {
  371. return years === 1 ? '1 year ago' : `${years} years ago`;
  372. } else if (days > 0) {
  373. return days === 1 ? '1 day ago' : `${days} days ago`;
  374. } else if (hours > 0) {
  375. return hours === 1 ? '1 hour ago' : `${hours} hours ago`;
  376. } else if (minutes > 0) {
  377. return minutes === 1
  378. ? '1 minute ago'
  379. : `${minutes} minutes ago`;
  380. } else {
  381. return seconds <= 1 ? '1s>' : `${seconds}s ago`;
  382. }
  383. },
  384. getTimeLeft(timestamp) {
  385. let totalSeconds = Math.max(0, Math.floor((timestamp - Date.now()) / 1000));
  386. const timeUnits = [['d', 86400], ['h', 3600], ['m', 60], ['s', 1]];
  387. let result = '';
  388.  
  389. for (const [unit, seconds] of timeUnits) {
  390. if (totalSeconds >= seconds) {
  391. const value = Math.floor(totalSeconds / seconds);
  392. totalSeconds %= seconds;
  393. result += `${value}${unit}`;
  394. }
  395. }
  396.  
  397. return result || '0s';
  398. }
  399. };
  400.  
  401. // EU server
  402. const coordinates = {};
  403. const gridSize = 4500;
  404. for (let i = 0; i < 5; i++) {
  405. for (let j = 0; j < 5; j++) {
  406. const label = String.fromCharCode(65 + i) + (j + 1);
  407.  
  408. const minX = -11000 + i * gridSize;
  409. const minY = -11000 + j * gridSize;
  410. const maxX = -6500 + i * gridSize;
  411. const maxY = -6500 + j * gridSize;
  412.  
  413. coordinates[label] = {
  414. min: {
  415. x: minX,
  416. y: minY,
  417. },
  418. max: {
  419. x: maxX,
  420. y: maxY,
  421. },
  422. };
  423. }
  424. }
  425.  
  426. // US1; US2 servers
  427. const coordinates2 = {};
  428. const gridSize2 = 7000;
  429. for (let i = 0; i < 5; i++) {
  430. for (let j = 0; j < 5; j++) {
  431. const label = String.fromCharCode(65 + i) + (j + 1);
  432.  
  433. const minX = -17022 + i * gridSize2;
  434. const minY = -17022 + j * gridSize2;
  435. const maxX = -10000 + i * gridSize2;
  436. const maxY = -10000 + j * gridSize2;
  437.  
  438. coordinates2[label] = {
  439. min: {
  440. x: minX,
  441. y: minY,
  442. },
  443. max: {
  444. x: maxX,
  445. y: maxY,
  446. },
  447. };
  448. }
  449. }
  450.  
  451. class Reader {
  452. constructor(view, offset, littleEndian) {
  453. this._e = littleEndian;
  454. if (view) this.repurpose(view, offset);
  455. }
  456.  
  457. repurpose(view, offset) {
  458. this.view = view;
  459. this._o = offset || 0;
  460. }
  461.  
  462. getUint8() {
  463. return this.view.getUint8(this._o++, this._e);
  464. }
  465.  
  466. getFloat64() {
  467. return this.view.getFloat64((this._o += 8) - 8, this._e);
  468. }
  469.  
  470. getStringUTF8(decode = true) {
  471. let bytes = [];
  472. let b;
  473. while ((b = this.view.getUint8(this._o++)) !== 0) bytes.push(b);
  474.  
  475. let uint8Array = new Uint8Array(bytes);
  476. let decoder = new TextDecoder('utf-8');
  477. let s = decoder.decode(uint8Array);
  478.  
  479. return decode ? s : uint8Array;
  480. }
  481.  
  482. raw(len = 0) {
  483. const buf = this.view.buffer.slice(this._o, this._o + len);
  484. this._o += len;
  485. return buf;
  486. }
  487. }
  488.  
  489. const __buf = new DataView(new ArrayBuffer(8));
  490.  
  491. class Writer {
  492. constructor(littleEndian) {
  493. this._e = littleEndian;
  494. this.reset();
  495. }
  496.  
  497. reset() {
  498. this._b = [];
  499. this._o = 0;
  500. }
  501.  
  502. setUint8(a) {
  503. if (a >= 0 && a < 256) this._b.push(a);
  504. return this;
  505. }
  506.  
  507. setUint32(a) {
  508. __buf.setUint32(0, a, this._e);
  509. this._move(4);
  510. return this;
  511. }
  512.  
  513. _move(b) {
  514. for (let i = 0; i < b; i++) this._b.push(__buf.getUint8(i));
  515. }
  516.  
  517. setStringUTF8(s) {
  518. const bytesStr = unescape(encodeURIComponent(s));
  519. for (let i = 0, l = bytesStr.length; i < l; i++) {
  520. this._b.push(bytesStr.charCodeAt(i));
  521. }
  522. this._b.push(0);
  523. return this;
  524. }
  525.  
  526. build() {
  527. return new Uint8Array(this._b);
  528. }
  529. }
  530.  
  531. // --------- END HELPER FUNCTIONS --------- //
  532.  
  533. let client = null;
  534. let freezepos = false;
  535.  
  536. // --------- Sigmally WebSocket Handler --------- //
  537. class SigWsHandler {
  538. constructor() {
  539. this.handshake = false;
  540. this.C = new Uint8Array(256);
  541. this.R = new Uint8Array(256);
  542.  
  543. this.overrideWebSocketSend();
  544. }
  545.  
  546. overrideWebSocketSend() {
  547. const handler = this;
  548.  
  549. window.WebSocket = new Proxy(window.WebSocket, {
  550. construct(target, args) {
  551. const wsInstance = new target(...args);
  552.  
  553. if (args[0].includes('sigmally.com')) {
  554. handler.setupWebSocket(wsInstance);
  555. }
  556.  
  557. return wsInstance;
  558. },
  559. });
  560. }
  561.  
  562. setupWebSocket(ws) {
  563. window.gameSettings.ws = ws;
  564.  
  565. // if 'save' is in localstorage, it indicates that you are logged in to Google; if that is the case, it
  566. // will load the client after the authorization to load the modClient correctly.
  567. // This loads the client instantly if you're not logged in to Google
  568. if (!localStorage.getItem('save') && !client) {
  569. client = new modClient();
  570. }
  571.  
  572. ws.addEventListener('close', () => this.handleWebSocketClose());
  573. ws.sendPacket = this.sendPacket.bind(this);
  574.  
  575. window.sendPlay = this.sendPlay.bind(this);
  576. window.sendChat = this.sendChat.bind(this);
  577. window.sendMouseMove = this.sendMouseMove.bind(this);
  578.  
  579. const originalSend = ws.send.bind(ws);
  580. ws.send = (data) => {
  581. try {
  582. const arrayBuffer =
  583. data instanceof ArrayBuffer ? data : data.buffer;
  584. const dataView = new DataView(arrayBuffer);
  585. const reader = new Reader(dataView, 0, true);
  586. const r = reader.getUint8();
  587.  
  588. if (this.R[r] === 0) {
  589. window.gameSettings.isPlaying = true;
  590. }
  591.  
  592. if (!window.sigfix && freezepos && this.R[r] === 16) {
  593. return;
  594. }
  595.  
  596. originalSend(data);
  597. } catch (e) {
  598. console.error(e);
  599. }
  600. };
  601.  
  602. ws.addEventListener('message', (event) =>
  603. this.handleMessage(event)
  604. );
  605. }
  606.  
  607. handleWebSocketClose() {
  608. this.handshake = false;
  609. window.gameSettings.isPlaying = false;
  610.  
  611. playerPosition.x = null;
  612. playerPosition.y = null;
  613. byId('mod-messages').innerHTML = '';
  614. setTimeout(mods.showOverlays, 500);
  615. }
  616.  
  617. sendPacket(packet) {
  618. if (!window.gameSettings.ws) {
  619. console.error('WebSocket is not defined.');
  620. return;
  621. }
  622.  
  623. if (packet.build)
  624. return window.gameSettings.ws.send(packet.build());
  625. window.gameSettings.ws.send(packet);
  626. }
  627.  
  628. sendPlay(playData) {
  629. const { sigfix } = window;
  630. if (sigfix) {
  631. sigfix.net.play(sigfix.world.selected, JSON.parse(playData));
  632. return;
  633. }
  634.  
  635. const writer = new Writer(true);
  636. writer.setUint8(this.C[0x00]);
  637. writer.setStringUTF8(playData);
  638. this.sendPacket(writer);
  639. }
  640.  
  641. sendChat(text) {
  642. if (mods.aboveRespawnLimit && text === mods.respawnCommand) return;
  643.  
  644. if (window.sigfix) {
  645. window.sigfix.net.chat(text);
  646. return;
  647. }
  648.  
  649. const writer = new Writer();
  650. writer.setUint8(this.C[0x63]);
  651. writer.setUint8(0);
  652. writer.setStringUTF8(text);
  653. this.sendPacket(writer);
  654. }
  655.  
  656. sendMouseMove(x, y) {
  657. const writer = new Writer(true);
  658. writer.setUint8(this.C[0x10]);
  659. writer.setUint32(x);
  660. writer.setUint32(y);
  661. writer._b.push(0, 0, 0, 0);
  662. this.sendPacket(writer);
  663. }
  664.  
  665. removePlayer(id) {
  666. const index = this.cells.players.indexOf(id);
  667. if (index !== -1) {
  668. this.cells.players.splice(index, 1);
  669. }
  670. }
  671.  
  672. handleMessage(event) {
  673. const reader = new Reader(new DataView(event.data), 0, true);
  674.  
  675. if (!this.handshake) {
  676. this.performHandshake(reader);
  677. return;
  678. }
  679.  
  680. const r = reader.getUint8();
  681. switch (this.R[r]) {
  682. case 0x63:
  683. this.handleChatMessage(reader);
  684. break;
  685. case 0x40:
  686. this.updateBorder(reader);
  687. break;
  688. }
  689. }
  690.  
  691. performHandshake(reader) {
  692. reader.getStringUTF8(false);
  693. this.C.set(new Uint8Array(reader.raw(256)));
  694.  
  695. for (const i in this.C) {
  696. this.R[this.C[i]] = ~~i;
  697. }
  698.  
  699. this.handshake = true;
  700. }
  701.  
  702. handleChatMessage(reader) {
  703. const flags = reader.getUint8();
  704. const color = bytesToHex(
  705. reader.getUint8(),
  706. reader.getUint8(),
  707. reader.getUint8()
  708. );
  709. let name = reader.getStringUTF8();
  710. const message = reader.getStringUTF8();
  711. const server = !!(flags & 0x80);
  712. const admin = !!(flags & 0x40);
  713. const mod = !!(flags & 0x20);
  714.  
  715. name = this.formatName(name, server, admin, mod);
  716. if (mods.mutedUsers.includes(name)) {
  717. return;
  718. }
  719.  
  720. if (!modSettings.chat.showClientChat) {
  721. mods.updateChat({
  722. server,
  723. admin,
  724. mod,
  725. color: modSettings.chat.showNameColors ? color : '#fafafa',
  726. name,
  727. message,
  728. time: modSettings.chat.showTime ? Date.now() : null,
  729. });
  730. }
  731. }
  732.  
  733. formatName(name, server, admin, mod) {
  734. if (server && name !== 'SERVER') name = '[SERVER]';
  735. if (admin) name = '[ADMIN] ' + name;
  736. if (mod) name = '[MOD] ' + name;
  737. if (name === '') name = 'Unnamed';
  738. return parsetxt(name);
  739. }
  740.  
  741. updateBorder(reader) {
  742. mods.border.left = reader.getFloat64();
  743. mods.border.top = reader.getFloat64();
  744. mods.border.right = reader.getFloat64();
  745. mods.border.bottom = reader.getFloat64();
  746.  
  747. mods.border.width = mods.border.right - mods.border.left;
  748. mods.border.height = mods.border.bottom - mods.border.top;
  749. mods.border.centerX = (mods.border.left + mods.border.right) / 2;
  750. mods.border.centerY = (mods.border.top + mods.border.bottom) / 2;
  751. }
  752. }
  753.  
  754. class SigFixHandler {
  755. constructor() {
  756. this.lastHadCells = false;
  757.  
  758. this.checkInterval = null;
  759. this.updatePosInterval = null;
  760. this.init();
  761. }
  762.  
  763. overrideMoveFunction() {
  764. if (!window.sigfix?.net?.move) return;
  765.  
  766. const originalMove = window.sigfix.net.move;
  767. let isHandlingFreeze = false;
  768.  
  769. window.sigfix.net.move = (...args) => {
  770. if (freezepos) {
  771. if (!isHandlingFreeze) {
  772. isHandlingFreeze = true;
  773. originalMove.call(
  774. this,
  775. playerPosition.x,
  776. playerPosition.y
  777. );
  778. isHandlingFreeze = false;
  779. }
  780. return;
  781. }
  782. return originalMove.apply(this, args);
  783. };
  784. }
  785. updatePlayerPos() {
  786. let myName = '';
  787. let ownN = 0;
  788. let ownX = 0;
  789. let ownY = 0;
  790. let hadCells = this.lastHadCells ?? true;
  791.  
  792. const ownedCells = window.sigfix.world.views.get(window.sigfix.world.selected)?.owned || [];
  793.  
  794. ownedCells.forEach(id => {
  795. const cell = window.sigfix.world.cells.get(id)?.merged;
  796. if (!cell) return;
  797.  
  798. myName = cell.name || 'An unnamed cell';
  799. ++ownN;
  800. ownX += cell.nx;
  801. ownY += cell.ny;
  802. });
  803.  
  804. if (ownN > 0) {
  805. ownX /= ownN;
  806. ownY /= ownN;
  807.  
  808. playerPosition.x = ownX;
  809. playerPosition.y = ownY;
  810.  
  811. if (client?.ws?.readyState === 1 && modSettings.settings.tag) {
  812. client.send({
  813. type: 'position',
  814. content: {
  815. x: playerPosition.x,
  816. y: playerPosition.y,
  817. },
  818. });
  819. }
  820.  
  821. this.lastHadCells = true;
  822. } else if (hadCells) {
  823. if (client?.ws?.readyState === 1 && modSettings.settings.tag) {
  824. client.send({
  825. type: 'position',
  826. content: {
  827. x: null,
  828. y: null,
  829. },
  830. });
  831. }
  832. this.lastHadCells = false;
  833. }
  834. }
  835.  
  836. init() {
  837. const checkSigFix = () => {
  838. if (window.sigfix) {
  839. this.updatePosInterval = setInterval(this.updatePlayerPos, 300);
  840. }
  841. if (window.sigfix?.net) {
  842. this.overrideMoveFunction();
  843. clearInterval(this.checkInterval);
  844.  
  845. setTimeout(() => {
  846. if (window.sigfix?.net) {
  847. this.checkInterval = null;
  848. }
  849. }, 1000);
  850. }
  851. };
  852.  
  853. this.checkInterval = setInterval(checkSigFix, 100);
  854. }
  855. }
  856.  
  857. new SigFixHandler();
  858.  
  859. // --------- Mod Client --------- //
  860. class modClient {
  861. constructor() {
  862. this.ws = null;
  863. this.wsUrl = isDev
  864. ? `ws://localhost:${port}/ws`
  865. : 'wss://mod.czrsd.com/ws';
  866.  
  867. this.retries = 0;
  868. this.maxRetries = 4;
  869. this.updateAvailable = false;
  870.  
  871. this.id = null;
  872.  
  873. this.connect();
  874. }
  875.  
  876. connect() {
  877. this.ws = new WebSocket(this.wsUrl);
  878. this.ws.binaryType = 'arraybuffer';
  879.  
  880. this.ws.addEventListener('open', this.onOpen.bind(this));
  881. this.ws.addEventListener('close', this.onClose.bind(this));
  882. this.ws.addEventListener('message', this.onMessage.bind(this));
  883. this.ws.addEventListener('error', this.onError.bind(this));
  884. }
  885.  
  886. async onOpen() {
  887. await this.waitForDOMLoad();
  888.  
  889. this.updateClientInfo();
  890. this.updateTagInfo();
  891. }
  892.  
  893. waitForDOMLoad() {
  894. return new Promise((resolve) => setTimeout(resolve, 500));
  895. }
  896.  
  897. updateClientInfo() {
  898. this.send({
  899. type: 'server-changed',
  900. content: getGameMode(),
  901. });
  902. this.send({
  903. type: 'version',
  904. content: serverVersion,
  905. });
  906. }
  907.  
  908. updateTagInfo() {
  909. const tagElement = document.querySelector('#tag');
  910. const tagText = document.querySelector('.tagText');
  911. const tagValue = this.getTagFromUrl();
  912.  
  913. if (tagValue) {
  914. modSettings.settings.tag = tagValue;
  915. updateStorage();
  916. tagElement.value = tagValue;
  917. tagText.innerText = `Tag: ${tagValue}`;
  918. this.send({
  919. type: 'update-tag',
  920. content: modSettings.settings.tag,
  921. });
  922. } else if (modSettings.settings.tag) {
  923. tagElement.value = modSettings.settings.tag;
  924. tagText.innerText = `Tag: ${modSettings.settings.tag}`;
  925. this.send({
  926. type: 'update-tag',
  927. content: modSettings.settings.tag,
  928. });
  929. }
  930. }
  931.  
  932. getTagFromUrl() {
  933. const urlParams = new URLSearchParams(window.location.search);
  934. const tagValue = urlParams.get('tag');
  935. return tagValue ? tagValue.replace(/\/$/, '') : null;
  936. }
  937.  
  938. onClose() {
  939. if (this.updateAvailable) return;
  940.  
  941. this.retries++;
  942. if (this.retries > this.maxRetries)
  943. throw new Error('SigMod server down.');
  944.  
  945. setTimeout(() => this.connect(), 2000); // auto reconnect with delay
  946. }
  947.  
  948. onMessage(event) {
  949. const message = this.parseMessage(event.data);
  950. if (!message || !message.type) return;
  951.  
  952. switch (message.type) {
  953. case 'sid':
  954. this.handleSidMessage(message.content);
  955. break;
  956. case 'ping':
  957. this.handlePingMessage();
  958. break;
  959. case 'minimap-data':
  960. mods.updData(message.content);
  961. break;
  962. case 'chat-message':
  963. this.handleChatMessage(message.content);
  964. break;
  965. case 'private-message':
  966. mods.updatePrivateChat(message.content);
  967. break;
  968. case 'update-available':
  969. this.handleUpdateAvailable(message.content);
  970. break;
  971. case 'alert':
  972. mods.handleAlert(message.content);
  973. break;
  974. case 'tournament-preview':
  975. mods.tData = message.content;
  976. mods.showTournament(message.content);
  977. break;
  978. case 'tournament-message':
  979. mods.updateChat({
  980. name: '[TOURNAMENT]',
  981. message: message.content,
  982. time: modSettings.chat.showTime ? Date.now() : null,
  983. });
  984. break;
  985. case 'tournament-session':
  986. mods.tournamentSession(message.content);
  987. break;
  988. case 'get-score':
  989. mods.getScore(message.content);
  990. break;
  991. case 'round-end':
  992. mods.roundEnd(message.content);
  993. break;
  994. case 'round-ready':
  995. mods.tournamentReady(message.content);
  996. break;
  997. case 'tournament-data':
  998. mods.handleTournamentData(message.content);
  999. break;
  1000. case 'error':
  1001. mods.modAlert(message.content.message, 'danger');
  1002. break;
  1003. default:
  1004. console.error('Unknown message type:', message.type);
  1005. }
  1006. }
  1007.  
  1008. onError(event) {
  1009. console.error('WebSocket error:', event);
  1010. }
  1011.  
  1012. send(data) {
  1013. if (!data || this.ws.readyState !== 1) return;
  1014. const binaryData = new TextEncoder().encode(JSON.stringify(data));
  1015. this.ws.send(binaryData);
  1016. }
  1017.  
  1018. parseMessage(data) {
  1019. try {
  1020. const stringData = new TextDecoder().decode(
  1021. new Uint8Array(data)
  1022. );
  1023. return JSON.parse(stringData);
  1024. } catch (error) {
  1025. console.error('Failed to parse message:', error);
  1026. return null;
  1027. }
  1028. }
  1029.  
  1030. handleSidMessage(content) {
  1031. this.id = content;
  1032. if (!modSettings.modAccount.authorized) return;
  1033.  
  1034. setTimeout(() => {
  1035. mods.auth(content);
  1036. }, 1000);
  1037. }
  1038.  
  1039. handlePingMessage() {
  1040. const latency = Date.now() - mods.ping.start;
  1041. mods.ping.end = Date.now();
  1042. mods.ping.latency = latency;
  1043. byId('clientPing').innerHTML = `Client Ping: ${latency}ms`;
  1044. }
  1045.  
  1046. handleChatMessage(content) {
  1047. if (!content) return;
  1048. let { admin, mod, vip, name, message, color } = content;
  1049.  
  1050. name = this.formatChatName(admin, mod, vip, name);
  1051.  
  1052. mods.updateChat({
  1053. admin,
  1054. mod,
  1055. color,
  1056. name,
  1057. message,
  1058. time: modSettings.chat.showTime ? Date.now() : null,
  1059. });
  1060. }
  1061.  
  1062. formatChatName(admin, mod, vip, name) {
  1063. if (admin) name = '[Owner] ' + name;
  1064. if (mod) name = '[Mod] ' + name;
  1065. if (vip) name = '[VIP] ' + name;
  1066. if (!name) name = 'Unnamed';
  1067. return name;
  1068. }
  1069.  
  1070. handleUpdateAvailable(content) {
  1071. byId('play-btn').setAttribute('disabled', 'disabled');
  1072. byId('spectate-btn').setAttribute('disabled', 'disabled');
  1073. this.updateAvailable = true;
  1074. this.createModAlert(content);
  1075. }
  1076.  
  1077. createModAlert(content) {
  1078. const modAlert = document.createElement('div');
  1079. modAlert.classList.add('modAlert');
  1080. modAlert.innerHTML = `
  1081. <span>You are using an old mod version. Please update.</span>
  1082. <div class="flex centerXY g-5">
  1083. <button
  1084. class="modButton"
  1085. style="width: 100%"
  1086. onclick="window.open('${content}')"
  1087. >Update</button>
  1088. </div>
  1089. `;
  1090. document.body.append(modAlert);
  1091. }
  1092. }
  1093.  
  1094. function randomPos() {
  1095. let eventOptions = {
  1096. clientX: Math.floor(Math.random() * window.innerWidth),
  1097. clientY: Math.floor(Math.random() * window.innerHeight),
  1098. bubbles: true,
  1099. cancelable: true,
  1100. };
  1101.  
  1102. let event = new MouseEvent('mousemove', eventOptions);
  1103.  
  1104. document.dispatchEvent(event);
  1105. }
  1106.  
  1107. let moveInterval = setInterval(randomPos);
  1108. setTimeout(() => clearInterval(moveInterval), 600);
  1109.  
  1110. function addSettings() {
  1111. const gameSettings = document.querySelector('.checkbox-grid');
  1112. if (!gameSettings) return;
  1113.  
  1114. const div = document.createElement('div');
  1115. div.innerHTML = `
  1116. <input type="checkbox" id="showNames">
  1117. <label>Names</label>
  1118. <input type="checkbox" id="showSkins">
  1119. <label>Skins</label>
  1120. <input type="checkbox" id="autoRespawn">
  1121. <label>Auto Respawn</label>
  1122. <input type="checkbox" id="removeShopPopup">
  1123. <label>Remove shop popup</label>
  1124. <input type="checkbox" id="autoClaimCoins">
  1125. <label>Auto claim coins</label>
  1126. <input type="checkbox" id="showChallenges">
  1127. <label>Challenges deathscreen</label>
  1128. <input type="checkbox" id="showPosition">
  1129. <label>Position</label>
  1130. `;
  1131. while (div.children.length > 0) gameSettings.append(div.children[0]);
  1132. }
  1133. addSettings();
  1134.  
  1135. async function checkDiscordLogin() {
  1136. // popup window from discord login
  1137. const urlParams = new URLSearchParams(window.location.search);
  1138. let accessToken = urlParams.get('access_token');
  1139. let refreshToken = urlParams.get('refresh_token');
  1140.  
  1141. if (!accessToken || !refreshToken) return;
  1142.  
  1143. const url = isDev
  1144. ? `http://localhost:${port}/discord/login/`
  1145. : 'https://mod.czrsd.com/discord/login/';
  1146.  
  1147. const overlay = document.createElement('div');
  1148. overlay.style = `position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #050505; display: flex; justify-content: center; align-items: center; z-index: 999999`;
  1149. overlay.innerHTML = `
  1150. <span style="font-size: 5rem; color: #fafafa;">Login...</span>
  1151. `;
  1152. document.body.append(overlay);
  1153.  
  1154. setTimeout(async () => {
  1155. if (refreshToken.endsWith('/')) {
  1156. refreshToken = refreshToken.substring(
  1157. 0,
  1158. refreshToken.length - 1
  1159. );
  1160. } else {
  1161. return;
  1162. }
  1163.  
  1164. await fetch(
  1165. `${url}?accessToken=${accessToken}&refreshToken=${refreshToken}`,
  1166. {
  1167. method: 'GET',
  1168. credentials: 'include',
  1169. }
  1170. );
  1171.  
  1172. modSettings.modAccount.authorized = true;
  1173. updateStorage();
  1174. window.close();
  1175. }, 500);
  1176. }
  1177. checkDiscordLogin();
  1178.  
  1179. let mods = {};
  1180.  
  1181. let playerPosition = { x: null, y: null };
  1182. let lastGetScore = 0;
  1183. let lastPosTime = 0;
  1184. let dead = false;
  1185. let dead2 = false;
  1186.  
  1187. function Mod() {
  1188. this.nick = null;
  1189. this.profile = {};
  1190. this.friends_settings = window.sigmod.friends_settings = {};
  1191. this.friend_names = window.sigmod.friend_names = new Set();
  1192.  
  1193. this.splitKey = {
  1194. keyCode: 32,
  1195. code: 'Space',
  1196. cancelable: true,
  1197. composed: true,
  1198. isTrusted: true,
  1199. which: 32,
  1200. };
  1201.  
  1202. this.ping = {
  1203. latency: NaN,
  1204. intervalId: null,
  1205. start: null,
  1206. end: null,
  1207. };
  1208.  
  1209. this.dayTimer = null;
  1210. this.challenges = [];
  1211.  
  1212. this.scrolling = false;
  1213. this.onContext = false;
  1214. this.mouseDown = false;
  1215.  
  1216. this.mouseX = 0;
  1217. this.mouseY = 0;
  1218.  
  1219. this.renderedMessages = 0;
  1220. this.maxChatMessages = 200;
  1221. this.mutedUsers = [];
  1222. this.blackListCharacters = [
  1223. '%EF%B7%BD',
  1224. '%F0%92%90%AB',
  1225. '%F0%92%88%9F',
  1226. ].map(decodeURIComponent);
  1227.  
  1228. this.respawnCommand = '/leaveworld';
  1229. this.aboveRespawnLimit = false;
  1230. this.cellSize = 0;
  1231. this.miniMapData = [];
  1232. this.border = {};
  1233.  
  1234. this.dbCache = null;
  1235.  
  1236. this.tourneyPassword = '';
  1237. this.lastOneStanding = false;
  1238.  
  1239. this.skins = [];
  1240.  
  1241. this.virusImageLoaded = false;
  1242. this.skinImageLoaded = false;
  1243.  
  1244. this.routes = {
  1245. discord: {
  1246. auth: isDev
  1247. ? `https://discord.com/oauth2/authorize?client_id=1067097357780516874&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3001%2Fdiscord%2Fcallback&scope=identify`
  1248. : 'https://discord.com/oauth2/authorize?client_id=1067097357780516874&response_type=code&redirect_uri=https%3A%2F%2Fmod.czrsd.com%2Fdiscord%2Fcallback&scope=identify',
  1249. },
  1250. };
  1251.  
  1252. // for SigMod specific
  1253. this.appRoutes = {
  1254. badge: isDev
  1255. ? `http://localhost:${port}/badge`
  1256. : 'https://mod.czrsd.com/badge',
  1257. signIn: (path) =>
  1258. isDev
  1259. ? `http://localhost:${port}/${path}`
  1260. : `https://mod.czrsd.com/${path}`,
  1261. auth: isDev
  1262. ? `http://localhost:${port}/auth`
  1263. : `https://mod.czrsd.com/auth`,
  1264. users: isDev
  1265. ? `http://localhost:${port}/users`
  1266. : `https://mod.czrsd.com/users`,
  1267. search: isDev
  1268. ? `http://localhost:${port}/search`
  1269. : `https://mod.czrsd.com/search`,
  1270. request: isDev
  1271. ? `http://localhost:${port}/request`
  1272. : `https://mod.czrsd.com/request`,
  1273. friends: isDev
  1274. ? `http://localhost:${port}/me/friends`
  1275. : `https://mod.czrsd.com/me/friends`,
  1276. profile: (id) =>
  1277. isDev
  1278. ? `http://localhost:${port}/profile/${id}`
  1279. : `https://mod.czrsd.com/profile/${id}`,
  1280. myRequests: isDev
  1281. ? `http://localhost:${port}/me/requests`
  1282. : `https://mod.czrsd.com/me/requests`,
  1283. handleRequest: isDev
  1284. ? `http://localhost:${port}/me/handle`
  1285. : `https://mod.czrsd.com/me/handle`,
  1286. logout: isDev
  1287. ? `http://localhost:${port}/logout`
  1288. : `https://mod.czrsd.com/logout`,
  1289. imgUpload: isDev
  1290. ? `http://localhost:${port}/me/upload`
  1291. : `https://mod.czrsd.com/me/upload`,
  1292. removeAvatar: isDev
  1293. ? `http://localhost:${port}/me/handle`
  1294. : `https://mod.czrsd.com/me/handle`,
  1295. editProfile: isDev
  1296. ? `http://localhost:${port}/me/edit`
  1297. : `https://mod.czrsd.com/me/edit`,
  1298. delProfile: isDev
  1299. ? `http://localhost:${port}/me/remove`
  1300. : `https://mod.czrsd.com/me/remove`,
  1301. updateSettings: isDev
  1302. ? `http://localhost:${port}/me/update-settings`
  1303. : `https://mod.czrsd.com/me/update-settings`,
  1304. chatHistory: (id) =>
  1305. isDev
  1306. ? `http://localhost:${port}/me/chat/${id}`
  1307. : `https://mod.czrsd.com/me/chat/${id}`,
  1308. onlineUsers: isDev
  1309. ? `http://localhost:${port}/onlineUsers`
  1310. : `https://mod.czrsd.com/onlineUsers`,
  1311. announcements: isDev
  1312. ? `http://localhost:${port}/announcements`
  1313. : `https://mod.czrsd.com/announcements`,
  1314. announcement: (id) =>
  1315. isDev
  1316. ? `http://localhost:${port}/announcement/${id}`
  1317. : `https://mod.czrsd.com/announcement/${id}`,
  1318. fonts: isDev
  1319. ? `http://localhost:${port}/fonts`
  1320. : 'https://mod.czrsd.com/fonts',
  1321. };
  1322.  
  1323. this.createMenu();
  1324. }
  1325.  
  1326. Mod.prototype = {
  1327. get style() {
  1328. return `
  1329. @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap');
  1330.  
  1331. .mod_menu {
  1332. position: absolute;
  1333. top: 0;
  1334. left: 0;
  1335. width: 100%;
  1336. height: 100vh;
  1337. background: rgba(0, 0, 0, .6);
  1338. z-index: 999999;
  1339. display: flex;
  1340. justify-content: center;
  1341. align-items: center;
  1342. color: #fff;
  1343. transition: all .3s ease;
  1344. }
  1345.  
  1346. .mod_menu * {
  1347. margin: 0;
  1348. padding: 0;
  1349. font-family: 'Ubuntu';
  1350. box-sizing: border-box;
  1351. }
  1352.  
  1353. .mod_menu_wrapper {
  1354. position: relative;
  1355. display: flex;
  1356. flex-direction: column;
  1357. width: 700px;
  1358. height: 500px;
  1359. background: #111;
  1360. border-radius: 12px;
  1361. overflow: hidden;
  1362. box-shadow: 0 5px 10px #000;
  1363. }
  1364.  
  1365. .mod_menu_header {
  1366. display: flex;
  1367. width: 100%;
  1368. position: relative;
  1369. height: 60px;
  1370. }
  1371.  
  1372. .mod_menu_header .header_img {
  1373. width: 100%;
  1374. height: 60px;
  1375. object-fit: cover;
  1376. object-position: center;
  1377. position: absolute;
  1378. }
  1379.  
  1380. .mod_menu_header button {
  1381. display: flex;
  1382. justify-content: center;
  1383. align-items: center;
  1384. position: absolute;
  1385. right: 10px;
  1386. top: 30px;
  1387. background: rgba(11, 11, 11, .7);
  1388. width: 42px;
  1389. height: 42px;
  1390. font-size: 16px;
  1391. transform: translateY(-50%);
  1392. }
  1393.  
  1394. .mod_menu_header button:hover {
  1395. background: rgba(11, 11, 11, .5);
  1396. }
  1397.  
  1398. .mod_menu_inner {
  1399. display: flex;
  1400. }
  1401.  
  1402. .mod_menu_navbar {
  1403. display: flex;
  1404. flex-direction: column;
  1405. gap: 10px;
  1406. min-width: 132px;
  1407. padding: 10px;
  1408. background: #181818;
  1409. height: 440px;
  1410. }
  1411.  
  1412. .mod_nav_btn, .modButton-black {
  1413. display: flex;
  1414. justify-content: space-evenly;
  1415. align-items: center;
  1416. padding: 5px;
  1417. background: #050505;
  1418. border-radius: 8px;
  1419. font-size: 16px;
  1420. border: 1px solid transparent;
  1421. outline: none;
  1422. width: 100%;
  1423. transition: all .3s ease;
  1424. }
  1425. label.modButton-black {
  1426. font-weight: 400;
  1427. cursor: pointer;
  1428. }
  1429.  
  1430. .modButton-black[disabled] {
  1431. background: #333;
  1432. cursor: default;
  1433. }
  1434.  
  1435. .mod_selected {
  1436. border: 1px solid rgba(89, 89, 89, .9);
  1437. }
  1438.  
  1439. .mod_nav_btn img {
  1440. width: 22px;
  1441. }
  1442.  
  1443. .mod_menu_content {
  1444. width: 100%;
  1445. padding: 10px;
  1446. position: relative;
  1447. max-width: 568px;
  1448. }
  1449.  
  1450. .mod_tab {
  1451. width: 100%;
  1452. height: 100%;
  1453. display: flex;
  1454. flex-direction: column;
  1455. gap: 5px;
  1456. overflow-y: auto;
  1457. overflow-x: hidden;
  1458. max-height: 420px;
  1459. opacity: 1;
  1460. transition: all .2s ease;
  1461. }
  1462. .modColItems {
  1463. display: flex;
  1464. flex-direction: column;
  1465. align-items: center;
  1466. gap: 15px;
  1467. width: 100%;
  1468. }
  1469.  
  1470. .modColItems_2 {
  1471. display: flex;
  1472. flex-direction: column;
  1473. align-items: start;
  1474. justify-content: start;
  1475. background: #050505;
  1476. gap: 8px;
  1477. border-radius: 0.5rem;
  1478. padding: 10px;
  1479. width: 100%;
  1480. }
  1481.  
  1482. .modRowItems {
  1483. display: flex;
  1484. justify-content: center;
  1485. align-items: center;
  1486. background: #050505;
  1487. gap: 58px;
  1488. border-radius: 0.5rem;
  1489. padding: 10px;
  1490. width: 100%;
  1491. }
  1492.  
  1493. .form-control {
  1494. border-width: 1px;
  1495. }
  1496. .form-control.error-border {
  1497. border-color: #AC3D3D;
  1498. }
  1499.  
  1500. .modSlider {
  1501. --thumb-color: #d9d9d9;
  1502. -webkit-appearance: none;
  1503. appearance: none;
  1504. width: 100%;
  1505. height: 8px;
  1506. background: #333;
  1507. border-radius: 5px;
  1508. outline: none;
  1509. transition: all 0.3s ease;
  1510. }
  1511.  
  1512. .modSlider::-webkit-slider-thumb {
  1513. -webkit-appearance: none;
  1514. appearance: none;
  1515. width: 20px;
  1516. height: 20px;
  1517. border-radius: 50%;
  1518. background: var(--thumb-color);
  1519. }
  1520.  
  1521. .modSlider::-moz-range-thumb {
  1522. width: 20px;
  1523. height: 20px;
  1524. border-radius: 50%;
  1525. background: var(--thumb-color);
  1526. }
  1527.  
  1528. .modSlider::-ms-thumb {
  1529. width: 20px;
  1530. height: 20px;
  1531. border-radius: 50%;
  1532. background: var(--thumb-color);
  1533. }
  1534.  
  1535. input:focus, select:focus, button:focus{
  1536. outline: none;
  1537. }
  1538. .macros_wrapper {
  1539. display: flex;
  1540. width: 100%;
  1541. justify-content: center;
  1542. flex-direction: column;
  1543. gap: 10px;
  1544. background: #050505;
  1545. padding: 10px;
  1546. border-radius: 0.75rem;
  1547. }
  1548. .macrosContainer {
  1549. display: flex;
  1550. width: 100%;
  1551. justify-content: center;
  1552. align-items: center;
  1553. gap: 20px;
  1554. }
  1555. .macroRow {
  1556. background: #121212;
  1557. border-radius: 5px;
  1558. padding: 7px;
  1559. display: flex;
  1560. justify-content: space-between;
  1561. align-items: center;
  1562. gap: 10px;
  1563. }
  1564. .keybinding {
  1565. border-radius: 5px;
  1566. background: #242424;
  1567. border: none;
  1568. color: #fff;
  1569. padding: 2px 5px;
  1570. max-width: 50px;
  1571. font-weight: 500;
  1572. text-align: center;
  1573. }
  1574. .closeBtn{
  1575. width: 46px;
  1576. background-color: transparent;
  1577. display: flex;
  1578. justify-content: center;
  1579. align-items: center;
  1580. }
  1581. .select-btn {
  1582. padding: 15px 20px;
  1583. background: #222;
  1584. border-radius: 2px;
  1585. position: relative;
  1586. }
  1587.  
  1588. .select-btn:active {
  1589. scale: 0.95
  1590. }
  1591.  
  1592. .select-btn::before {
  1593. content: "...";
  1594. font-size: 20px;
  1595. color: #fff;
  1596. position: absolute;
  1597. top: 50%;
  1598. left: 50%;
  1599. transform: translate(-50%, -50%);
  1600. }
  1601. .text {
  1602. user-select: none;
  1603. font-weight: 500;
  1604. text-align: left;
  1605. }
  1606. .modButton {
  1607. background-color: #252525;
  1608. border-radius: 4px;
  1609. color: #fff;
  1610. transition: all .3s;
  1611. outline: none;
  1612. padding: 7px;
  1613. font-size: 13px;
  1614. border: none;
  1615. }
  1616. .modButton:hover {
  1617. background-color: #222
  1618. }
  1619. .modInput {
  1620. background-color: #111;
  1621. border: none;
  1622. border-radius: 5px;
  1623. position: relative;
  1624. border-top-right-radius: 4px;
  1625. border-top-left-radius: 4px;
  1626. font-weight: 500;
  1627. padding: 5px;
  1628. color: #fff;
  1629. }
  1630. .modNumberInput:disabled {
  1631. color: #777;
  1632. }
  1633.  
  1634. .modCheckbox input[type="checkbox"] {
  1635. display: none;
  1636. visibility: hidden;
  1637. }
  1638. .modCheckbox label {
  1639. display: inline-block;
  1640. }
  1641.  
  1642. .modCheckbox .cbx {
  1643. position: relative;
  1644. top: 1px;
  1645. width: 17px;
  1646. height: 17px;
  1647. margin: 2px;
  1648. border: 1px solid #c8ccd4;
  1649. border-radius: 3px;
  1650. vertical-align: middle;
  1651. transition: background 0.1s ease;
  1652. cursor: pointer;
  1653. }
  1654.  
  1655. .modCheckbox .cbx:after {
  1656. content: '';
  1657. position: absolute;
  1658. top: 1px;
  1659. left: 5px;
  1660. width: 5px;
  1661. height: 11px;
  1662. opacity: 0;
  1663. transform: rotate(45deg) scale(0);
  1664. border-right: 2px solid #fff;
  1665. border-bottom: 2px solid #fff;
  1666. transition: all 0.3s ease;
  1667. transition-delay: 0.15s;
  1668. }
  1669.  
  1670. .modCheckbox input[type="checkbox"]:checked ~ .cbx {
  1671. border-color: transparent;
  1672. background: #6871f1;
  1673. box-shadow: 0 0 10px #2E2D80;
  1674. }
  1675.  
  1676. .modCheckbox input[type="checkbox"]:checked ~ .cbx:after {
  1677. opacity: 1;
  1678. transform: rotate(45deg) scale(1);
  1679. }
  1680.  
  1681. .SettingsButton{
  1682. border: none;
  1683. outline: none;
  1684. margin-right: 10px;
  1685. transition: all .3s ease;
  1686. }
  1687. .SettingsButton:hover {
  1688. scale: 1.1;
  1689. }
  1690. .colorInput{
  1691. background-color: transparent;
  1692. width: 31px;
  1693. height: 35px;
  1694. border-radius: 50%;
  1695. border: none;
  1696. }
  1697. .colorInput::-webkit-color-swatch {
  1698. border-radius: 50%;
  1699. border: 2px solid #fff;
  1700. }
  1701. .whiteBorder_colorInput::-webkit-color-swatch {
  1702. border-color: #fff;
  1703. }
  1704. .menu-center>div>.menu-center-content>div>div>.menu__form-group {
  1705. margin-bottom: 14px !important;
  1706. }
  1707. #dclinkdiv {
  1708. display: flex;
  1709. flex-direction: row;
  1710. }
  1711. .dclinks {
  1712. width: calc(50% - 5px);
  1713. height: 36px;
  1714. display: flex;
  1715. justify-content: center;
  1716. align-items: center;
  1717. background-color: rgba(88, 101, 242, 1);
  1718. border-radius: 6px;
  1719. margin: 0 auto;
  1720. color: #fff;
  1721. }
  1722. #cm_close__settings {
  1723. width: 50px;
  1724. transition: all .3s ease;
  1725. }
  1726. #cm_close__settings svg:hover {
  1727. scale: 1.1;
  1728. }
  1729. #cm_close__settings svg {
  1730. transition: all .3s ease;
  1731. }
  1732. .modTitleText {
  1733. text-align: center;
  1734. font-size: 16px;
  1735. }
  1736. .modItem {
  1737. display: flex;
  1738. justify-content: center;
  1739. align-items: center;
  1740. flex-direction: column;
  1741. }
  1742. .accent_row {
  1743. background: #111111;
  1744. }
  1745. .mod_tab-content {
  1746. width: 100%;
  1747. margin: 10px;
  1748. overflow: auto;
  1749. display: flex;
  1750. flex-direction: column;
  1751. }
  1752.  
  1753. #Tab6 .mod_tab-content {
  1754. overflow-y: auto;
  1755. max-height: 230px;
  1756. display: flex;
  1757. flex-wrap: nowrap;
  1758. flex-direction: column;
  1759. gap: 10px;
  1760. }
  1761.  
  1762. .tab-content, #coins-tab, #chests-tab {
  1763. overflow-x: hidden;
  1764. justify-content: center;
  1765. }
  1766.  
  1767. #shop-skins-buttons::after {
  1768. background: #050505;
  1769. }
  1770.  
  1771. #sigma-status {
  1772. background: rgba(0, 0, 0, .6) !important;
  1773. }
  1774.  
  1775. .w-100 {
  1776. width: 100%
  1777. }
  1778. .btn:hover {
  1779. color: unset;
  1780. }
  1781.  
  1782. #savedNames {
  1783. background-color: #000;
  1784. padding: 5px;
  1785. border-radius: 5px;
  1786. overflow-y: auto;
  1787. height: 155px;
  1788. background-image: url("https://raw.githubusercontent.com/Sigmally/SigMod/main/images/purple_gradient.png");
  1789. background-size: cover;
  1790. background-position: center;
  1791. background-repeat: no-repeat;
  1792. box-shadow: 0 0 10px #000;
  1793. }
  1794.  
  1795. .scroll {
  1796. scroll-behavior: smooth;
  1797. }
  1798.  
  1799. /* Chrome, Safari */
  1800. .scroll::-webkit-scrollbar {
  1801. width: 7px;
  1802. }
  1803.  
  1804. .scroll::-webkit-scrollbar-track {
  1805. background: #222;
  1806. border-radius: 5px;
  1807. }
  1808.  
  1809. .scroll::-webkit-scrollbar-thumb {
  1810. background-color: #333;
  1811. border-radius: 5px;
  1812. }
  1813.  
  1814. .scroll::-webkit-scrollbar-thumb:hover {
  1815. background: #353535;
  1816. }
  1817.  
  1818. /* Firefox */
  1819. .scroll {
  1820. scrollbar-width: thin;
  1821. scrollbar-color: #333 #222;
  1822. }
  1823.  
  1824. .scroll:hover {
  1825. scrollbar-color: #353535 #222;
  1826. }
  1827.  
  1828. .themes {
  1829. display: flex;
  1830. flex-direction: row;
  1831. flex: 1;
  1832. flex-wrap: wrap;
  1833. justify-content: center;
  1834. width: 100%;
  1835. min-height: 254px;
  1836. max-height: 420px;
  1837. background: #000;
  1838. border-radius: 5px;
  1839. overflow-y: scroll;
  1840. gap: 10px;
  1841. padding: 5px;
  1842. }
  1843.  
  1844. .themeContent {
  1845. width: 50px;
  1846. height: 50px;
  1847. border: 2px solid #222;
  1848. border-radius: 50%;
  1849. background-position: center;
  1850. }
  1851.  
  1852. .theme {
  1853. height: 75px;
  1854. display: flex;
  1855. align-items: center;
  1856. justify-content: center;
  1857. flex-direction: column;
  1858. cursor: pointer;
  1859. }
  1860. .delName {
  1861. font-weight: 500;
  1862. background: #e17e7e;
  1863. height: 20px;
  1864. border: none;
  1865. border-radius: 5px;
  1866. font-size: 10px;
  1867. margin-left: 5px;
  1868. color: #fff;
  1869. display: flex;
  1870. justify-content: center;
  1871. align-items: center;
  1872. width: 20px;
  1873. }
  1874. .NameDiv {
  1875. display: flex;
  1876. background: #111;
  1877. border-radius: 5px;
  1878. margin: 5px;
  1879. padding: 3px 8px;
  1880. height: 34px;
  1881. align-items: center;
  1882. justify-content: space-between;
  1883. cursor: pointer;
  1884. box-shadow: 0 5px 10px -2px #000;
  1885. }
  1886. .NameLabel {
  1887. cursor: pointer;
  1888. font-weight: 500;
  1889. text-align: center;
  1890. color: #fff;
  1891. }
  1892. .alwan {
  1893. border-radius: 8px;
  1894. }
  1895. .colorpicker-additional {
  1896. display: flex;
  1897. justify-content: space-between;
  1898. width: 100%;
  1899. color: #fafafa;
  1900. padding: 10px;
  1901. }
  1902. .resetButton {
  1903. width: 25px;
  1904. height: 25px;
  1905. background-image: url("https://raw.githubusercontent.com/Sigmally/SigMod/main/images/reset.svg");
  1906. background-color: transparent;
  1907. background-repeat: no-repeat;
  1908. border: none;
  1909. }
  1910.  
  1911. .modAlert {
  1912. position: fixed;
  1913. top: 8%;
  1914. left: 50%;
  1915. transform: translate(-50%, -50%);
  1916. z-index: 99995;
  1917. background: #3F3F3F;
  1918. border-radius: 10px;
  1919. display: flex;
  1920. flex-direction: column;
  1921. gap: 5px;
  1922. padding: 10px;
  1923. color: #fff;
  1924. max-width: 320px;
  1925. }
  1926.  
  1927. .alert_overlay {
  1928. position: absolute;
  1929. top: 0;
  1930. left: 0;
  1931. z-index: 999999999;
  1932. pointer-events: none;
  1933. width: 100%;
  1934. height: 100vh;
  1935. display: flex;
  1936. flex-direction: column;
  1937. justify-content: start;
  1938. align-items: center;
  1939. }
  1940.  
  1941. .infoAlert {
  1942. padding: 5px;
  1943. border-radius: 5px;
  1944. margin-top: 5px;
  1945. color: #fff;
  1946. }
  1947.  
  1948. .modAlert-success {
  1949. background: #5BA55C;
  1950. }
  1951. .modAlert-success .modAlert-loader {
  1952. background: #6BD56D;
  1953. }
  1954. .modAlert-default {
  1955. background: #151515;
  1956. }
  1957. .modAlert-default .modAlert-loader {
  1958. background: #222;
  1959. }
  1960. .modAlert-danger {
  1961. background: #D44121;
  1962. }
  1963. .modAlert-danger .modAlert-loader {
  1964. background: #A5361E;
  1965. }
  1966. #free-coins .modAlert-danger {
  1967. background: #fff !important;
  1968. }
  1969.  
  1970. .modAlert-loader {
  1971. width: 100%;
  1972. height: 2px;
  1973. margin-top: 5px;
  1974. transition: all .3s ease-in-out;
  1975. animation: loadAlert 2s forwards;
  1976. }
  1977.  
  1978. @keyframes loadAlert {
  1979. 0% {
  1980. width: 100%;
  1981. }
  1982. 100% {
  1983. width: 0%;
  1984. }
  1985. }
  1986.  
  1987. .themeEditor {
  1988. z-index: 999999999999;
  1989. position: absolute;
  1990. top: 50%;
  1991. left: 50%;
  1992. transform: translate(-50%, -50%);
  1993. background: rgba(0, 0, 0, .85);
  1994. color: #fff;
  1995. padding: 10px;
  1996. border-radius: 10px;
  1997. box-shadow: 0 0 10px #000;
  1998. width: 400px;
  1999. }
  2000.  
  2001. .theme_editor_header {
  2002. display: flex;
  2003. justify-content: space-between;
  2004. align-items: center;
  2005. gap: 10px;
  2006. }
  2007.  
  2008. .theme-editor-tab {
  2009. display: flex;
  2010. justify-content: center;
  2011. align-items: start;
  2012. flex-direction: column;
  2013. margin-top: 10px
  2014. }
  2015.  
  2016. .themes_preview {
  2017. width: 50px;
  2018. height: 50px;
  2019. border: 2px solid #fff;
  2020. border-radius: 2px;
  2021. display: flex;
  2022. justify-content: center;
  2023. align-items: center;
  2024. }
  2025.  
  2026. .sigmod-title {
  2027. display: flex;
  2028. flex-direction: column;
  2029. align-items: center;
  2030. gap: 2px;
  2031. }
  2032. .sigmod-title #title {
  2033. width: fit-content;
  2034. }
  2035. #bycursed {
  2036. font-family: "Titillium Web", sans-serif;
  2037. font-weight: 400;
  2038. font-size: 16px;
  2039. }
  2040. #bycursed a {
  2041. color: #71aee3;
  2042. }
  2043. .stats__item>span, #title, .stats-btn__text {
  2044. color: #fff;
  2045. }
  2046.  
  2047. .top-users__inner::-webkit-scrollbar-thumb {
  2048. border: none;
  2049. }
  2050. #signInBtn, #nick, #gamemode, .form-control, .profile-header, .coins-num, #clan-members, .member-index, .member-level, #clan-requests {
  2051. background: rgba(0, 0, 0, 0.4) !important;
  2052. color: #fff !important;
  2053. }
  2054. .profile-name, #progress-next, .member-desc > p:first-child, #clan-leave > div, .clans-item > div > b, #clans-input input, #shop-nav button {
  2055. color: #fff !important;
  2056. }
  2057. .head-desc, #shop-nav button {
  2058. border: 1px solid #000;
  2059. }
  2060. #shop-nav button {
  2061. transition: background .1s ease;
  2062. }
  2063. #shop-nav button:hover {
  2064. background: #121212 !important;
  2065. }
  2066. #clan-handler, #request-handler, #clans-list, #clans-input, .clans-item button, #shop-content, .card-particles-bar-bg {
  2067. background: #111 !important;
  2068. color: #fff !important;
  2069. }
  2070. #clans_and_settings {
  2071. height: auto !important;
  2072. }
  2073. .card-body {
  2074. background: linear-gradient(180deg, #000 0%, #1b354c 100%);
  2075. }
  2076. .free-card:hover .card-body {
  2077. background: linear-gradient(180deg, #111 0%, #1b354c 100%);
  2078. }
  2079. #shop-tab-body, #shop-nav, #shop-skins-buttons {
  2080. background: #050505 !important;
  2081. }
  2082. #clan-leave {
  2083. background: #111;
  2084. bottom: -1px;
  2085. }
  2086. .sent {
  2087. position: relative;
  2088. width: 100px;
  2089. }
  2090.  
  2091. .sent::before {
  2092. content: "Sent request";
  2093. width: 100%;
  2094. height: 10px;
  2095. word-spacing: normal;
  2096. white-space: nowrap;
  2097. position: absolute;
  2098. background: #4f79f9;
  2099. display: flex;
  2100. justify-content: center;
  2101. align-items: center;
  2102. }
  2103.  
  2104. .btn, .sign-in-out-btn {
  2105. transition: all .2s ease;
  2106. }
  2107. .free-coins-body > div, .goldmodal-contain {
  2108. background: rgba(0, 0, 0, .5);
  2109. }
  2110. #clan .connecting__content, #clans .connecting__content {
  2111. background: #151515;
  2112. color: #fff;
  2113. box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  2114. }
  2115.  
  2116. .skin-select__icon-text {
  2117. color: #fff;
  2118. }
  2119.  
  2120. .justify-sb {
  2121. display: flex;
  2122. align-items: center;
  2123. justify-content: space-between;
  2124. }
  2125.  
  2126. .macro-extanded_input {
  2127. width: 75px;
  2128. text-align: center;
  2129. }
  2130. .form-control option {
  2131. background: #111;
  2132. }
  2133.  
  2134. .stats-line {
  2135. width: 100%;
  2136. user-select: none;
  2137. margin-bottom: 5px;
  2138. padding: 5px;
  2139. background: #050505;
  2140. border: 1px solid var(--default-mod);
  2141. border-radius: 5px;
  2142. }
  2143.  
  2144. .stats-info-text {
  2145. color: #7d7d7d;
  2146. }
  2147.  
  2148. .setting-card-wrapper {
  2149. margin-right: 10px;
  2150. padding: 10px;
  2151. background: #161616;
  2152. border-radius: 5px;
  2153. display: flex;
  2154. flex-direction: column;
  2155. width: 100%;
  2156. }
  2157.  
  2158. .setting-card {
  2159. display: flex;
  2160. align-items: center;
  2161. justify-content: space-between;
  2162. }
  2163.  
  2164. .setting-card-action {
  2165. display: flex;
  2166. align-items: center;
  2167. gap: 5px;
  2168. cursor: pointer;
  2169. }
  2170.  
  2171. .setting-card-action {
  2172. width: 100%;
  2173. }
  2174.  
  2175. .setting-card-name {
  2176. font-size: 16px;
  2177. user-select: none;
  2178. width: 100%;
  2179. }
  2180.  
  2181. .mod-small-modal {
  2182. display: flex;
  2183. flex-direction: column;
  2184. gap: 10px;
  2185. position: absolute;
  2186. z-index: 99999;
  2187. top: 50%;
  2188. left: 50%;
  2189. transform: translate(-50%, -50%);
  2190. background: #191919;
  2191. box-shadow: 0 5px 15px -2px #000;
  2192. padding: 10px;
  2193. border-radius: 5px;
  2194. }
  2195.  
  2196. .mod-small-modal-header {
  2197. display: flex;
  2198. justify-content: space-between;
  2199. align-items: center;
  2200. }
  2201.  
  2202. .mod-small-modal-header h1 {
  2203. font-size: 20px;
  2204. font-weight: 500;
  2205. margin: 0;
  2206. }
  2207.  
  2208. .mod-small-modal-content {
  2209. display: flex;
  2210. flex-direction: column;
  2211. width: 100%;
  2212. align-items: center;
  2213. }
  2214.  
  2215. .mod-small-modal-content_selectImage {
  2216. display: flex;
  2217. flex-direction: column;
  2218. gap: 10px;
  2219. }
  2220.  
  2221. .imagePreview {
  2222. min-width: 34px;
  2223. width: 34px;
  2224. height: 34px;
  2225. border: 2px solid #353535;
  2226. border-radius: 5px;
  2227. background-size: contain;
  2228. background-repeat: no-repeat;
  2229. background-position: center;
  2230.  
  2231. /* for preview text */
  2232. display: flex;
  2233. justify-content: center;
  2234. align-items: center;
  2235. font-size: 7px;
  2236. overflow: hidden;
  2237. text-align: center;
  2238. }
  2239.  
  2240. .modChat {
  2241. min-width: 450px;
  2242. max-width: 450px;
  2243. min-height: 285px;
  2244. max-height: 285px;
  2245. color: #fafafa;
  2246. padding: 10px;
  2247. position: absolute;
  2248. bottom: 10px;
  2249. left: 10px;
  2250. z-index: 999;
  2251. border-radius: .5rem;
  2252. overflow: hidden;
  2253. opacity: 1;
  2254. transition: all .3s ease;
  2255. }
  2256.  
  2257. .modChat__inner {
  2258. min-width: 430px;
  2259. max-width: 430px;
  2260. min-height: 265px;
  2261. max-height: 265px;
  2262. height: 100%;
  2263. display: flex;
  2264. flex-direction: column;
  2265. gap: 5px;
  2266. justify-content: flex-end;
  2267. opacity: 1;
  2268. transition: all .3s ease;
  2269. }
  2270.  
  2271. .mod-compact {
  2272. transform: scale(0.78);
  2273. }
  2274. .mod-compact.modChat {
  2275. left: -40px;
  2276. bottom: -20px;
  2277. }
  2278. .mod-compact.chatAddedContainer {
  2279. left: 350px;
  2280. bottom: -17px;
  2281. }
  2282.  
  2283. #scroll-down-btn {
  2284. position: absolute;
  2285. bottom: 60px;
  2286. left: 50%;
  2287. transform: translateX(-50%);
  2288. width: 80px;
  2289. display:none;
  2290. box-shadow:0 0 5px #000;
  2291. z-index: 5;
  2292. }
  2293.  
  2294. .modchat-chatbuttons {
  2295. margin-bottom: auto;
  2296. display: flex;
  2297. gap: 5px;
  2298. }
  2299.  
  2300. .chat-context {
  2301. position: absolute;
  2302. z-index: 999999;
  2303. width: 100px;
  2304. display: flex;
  2305. flex-direction: column;
  2306. justify-content: center;
  2307. align-items: center;
  2308. gap: 5px;
  2309. background: #181818;
  2310. border-radius: 5px;
  2311. }
  2312.  
  2313. .chat-context span {
  2314. color: #fff;
  2315. user-select: none;
  2316. padding: 5px;
  2317. white-space: nowrap;
  2318. }
  2319.  
  2320. .chat-context button {
  2321. width: 100%;
  2322. background-color: transparent;
  2323. border: none;
  2324. border-top: 2px solid #747474;
  2325. outline: none;
  2326. color: #fff;
  2327. transition: all .3s ease;
  2328. }
  2329.  
  2330. .chat-context button:hover {
  2331. backgrokund-color: #222;
  2332. }
  2333.  
  2334. .tagText {
  2335. margin-left: auto;
  2336. font-size: 14px;
  2337. }
  2338.  
  2339. #mod-messages {
  2340. position: relative;
  2341. display: flex;
  2342. flex-direction: column;
  2343. max-height: 185px;
  2344. overflow-y: auto;
  2345. direction: rtl;
  2346. scroll-behavior: smooth;
  2347. }
  2348. .message {
  2349. direction: ltr;
  2350. margin: 2px 0 0 5px;
  2351. text-overflow: ellipsis;
  2352. white-space: nowrap;
  2353. max-width: 100%;
  2354. display: flex;
  2355. justify-content: space-between;
  2356. align-items: center;
  2357. }
  2358.  
  2359. .message_name {
  2360. user-select: none;
  2361. }
  2362.  
  2363. .message .time {
  2364. color: rgba(255, 255, 255, 0.7);
  2365. font-size: 12px;
  2366. }
  2367.  
  2368. #chatInputContainer {
  2369. display: flex;
  2370. gap: 5px;
  2371. align-items: center;
  2372. padding: 5px;
  2373. background: rgba(25,25,25, .6);
  2374. border-radius: .5rem;
  2375. overflow: hidden;
  2376. }
  2377.  
  2378. .chatInput {
  2379. flex-grow: 1;
  2380. border: none;
  2381. background: transparent;
  2382. color: #fff;
  2383. padding: 5px;
  2384. outline: none;
  2385. max-width: 100%;
  2386. }
  2387.  
  2388. .chatButton {
  2389. background: #8a25e5;
  2390. border: none;
  2391. border-radius: 5px;
  2392. padding: 5px 10px;
  2393. height: 100%;
  2394. color: #fff;
  2395. transition: all 0.3s;
  2396. cursor: pointer;
  2397. display: flex;
  2398. align-items: center;
  2399. height: 28px;
  2400. justify-content: center;
  2401. gap: 5px;
  2402. }
  2403. .chatButton:hover {
  2404. background: #7a25e5;
  2405. }
  2406. .chatCloseBtn {
  2407. position: absolute;
  2408. top: 50%;
  2409. left: 50%;
  2410. transform: translate(-50%, -50%);
  2411. }
  2412.  
  2413. .emojisContainer {
  2414. display: flex;
  2415. flex-direction: column;
  2416. gap: 5px;
  2417. }
  2418. .chatAddedContainer {
  2419. position: absolute;
  2420. bottom: 10px;
  2421. left: 465px;
  2422. z-index: 9999;
  2423. padding: 10px;
  2424. background: #151515;
  2425. border-radius: .5rem;
  2426. min-width: 172px;
  2427. max-width: 172px;
  2428. min-height: 250px;
  2429. max-height: 250px;
  2430. }
  2431. #categories {
  2432. overflow-y: auto;
  2433. max-height: calc(250px - 50px);
  2434. gap: 2px;
  2435. }
  2436. .category {
  2437. width: 100%;
  2438. display: flex;
  2439. flex-direction: column;
  2440. gap: 2px;
  2441. }
  2442. .category span {
  2443. color: #fafafa;
  2444. font-size: 14px;
  2445. text-align: center;
  2446. }
  2447.  
  2448. .emojiContainer {
  2449. display: flex;
  2450. flex-wrap: wrap;
  2451. align-items: center;
  2452. justify-content: center;
  2453. }
  2454.  
  2455. #categories .emoji {
  2456. padding: 2px;
  2457. border-radius: 5px;
  2458. font-size: 16px;
  2459. user-select: none;
  2460. cursor: pointer;
  2461. }
  2462.  
  2463. .chatSettingsContainer {
  2464. padding: 10px 3px;
  2465. }
  2466. .chatSettingsContainer .scroll {
  2467. display: flex;
  2468. flex-direction: column;
  2469. gap: 10px;
  2470. max-height: 235px;
  2471. overflow-y: auto;
  2472. padding: 0 10px;
  2473. }
  2474.  
  2475. .csBlock {
  2476. border: 2px solid #050505;
  2477. border-radius: .5rem;
  2478. color: #fff;
  2479. display: flex;
  2480. align-items: center;
  2481. flex-direction: column;
  2482. gap: 5px;
  2483. padding-bottom: 5px;
  2484. }
  2485.  
  2486. .csBlock .csBlockTitle {
  2487. background: #080808;
  2488. width: 100%;
  2489. padding: 3px;
  2490. text-align: center;
  2491. }
  2492.  
  2493. .csRow {
  2494. display: flex;
  2495. justify-content: space-between;
  2496. align-items: center;
  2497. padding: 0 5px;
  2498. width: 100%;
  2499. }
  2500.  
  2501. .csRowName {
  2502. display: flex;
  2503. gap: 5px;
  2504. align-items: start;
  2505. }
  2506.  
  2507. .csRowName .infoIcon {
  2508. width: 14px;
  2509. cursor: pointer;
  2510. }
  2511.  
  2512. .modInfoPopup {
  2513. position: absolute;
  2514. top: 2px;
  2515. left: 58%;
  2516. text-align: center;
  2517. background: #151515;
  2518. border: 1px solid #607bff;
  2519. border-radius: 10px;
  2520. transform: translateX(-50%);
  2521. white-space: nowrap;
  2522. padding: 5px;
  2523. z-index: 99999;
  2524. }
  2525.  
  2526. .modInfoPopup::after {
  2527. content: '';
  2528. display: block;
  2529. position: absolute;
  2530. bottom: -7px;
  2531. background: #151515;
  2532. right: 50%;
  2533. transform: translateX(-50%) rotate(-45deg);
  2534. width: 12px;
  2535. height: 12px;
  2536. border-left: 1px solid #607bff;
  2537. border-bottom: 1px solid #607bff;
  2538. }
  2539.  
  2540. .modInfoPopup p {
  2541. margin: 0;
  2542. font-size: 12px;
  2543. color: #fff;
  2544. }
  2545.  
  2546. .minimapContainer {
  2547. display: flex;
  2548. flex-direction: column;
  2549. align-items: end;
  2550. pointer-events: none;
  2551. position: absolute;
  2552. bottom: 0;
  2553. right: 0;
  2554. z-index: 99999;
  2555. }
  2556. .minimap {
  2557. border-radius: 2px;
  2558. border-top: 1px solid rgba(255, 255, 255, .5);
  2559. border-left: 1px solid rgba(255, 255, 255, .5);
  2560. box-shadow: 0 0 4px rgba(255, 255, 255, .5);
  2561. }
  2562.  
  2563. #tag {
  2564. width: 50px;
  2565. }
  2566.  
  2567. .blur {
  2568. color: transparent!important;
  2569. text-shadow: 0 0 6px hsl(0deg 0% 90% / 70%);
  2570. transition: all .2s;
  2571. }
  2572.  
  2573. .blur:focus, .blur:hover {
  2574. color: #fafafa!important;
  2575. text-shadow: none;
  2576. }
  2577. .progress-row button {
  2578. background: transparent;
  2579. }
  2580.  
  2581. #mod_home .justify-sb {
  2582. z-index: 2;
  2583. }
  2584.  
  2585. .modTitleText {
  2586. font-size: 15px;
  2587. color: #fafafa;
  2588. text-align: start;
  2589. }
  2590. .modDescText {
  2591. text-align: start;
  2592. font-size: 12px;
  2593. color: #777;
  2594. }
  2595. .modButton-secondary {
  2596. background-color: #171717;
  2597. color: #fff;
  2598. border: none;
  2599. padding: 5px 15px;
  2600. border-radius: 15px;
  2601. }
  2602. .vr {
  2603. width: 2px;
  2604. height: 250px;
  2605. background-color: #fafafa;
  2606. }
  2607. .vr2 {
  2608. width: 1px;
  2609. height: 26px;
  2610. background-color: #202020;
  2611. }
  2612.  
  2613. .home-card-row {
  2614. display: flex;
  2615. flex-wrap: nowrap;
  2616. justify-content: space-between;
  2617. gap: 18px;
  2618. }
  2619. .home-card-wrapper {
  2620. display: flex;
  2621. flex: 1;
  2622. flex-direction: column;
  2623. gap: 5px;
  2624. width: 50%;
  2625. }
  2626. .home-card {
  2627. display: flex;
  2628. flex-direction: column;
  2629. justify-content: center;
  2630. gap: 7px;
  2631. border-radius: 5px;
  2632. background: #050505;
  2633. min-height: 164px;
  2634. max-height: 164px;
  2635. max-width: 256px;
  2636. padding: 5px 10px;
  2637. }
  2638. .quickAccess {
  2639. gap: 5px;
  2640. max-height: 164px;
  2641. overflow-y: auto;
  2642. justify-content: start;
  2643. }
  2644.  
  2645. .quickAccess div.modRowItems {
  2646. padding: 2px!important;
  2647. }
  2648.  
  2649. #my-profile-badges {
  2650. display: flex;
  2651. flex-wrap: wrap;
  2652. gap: 5px;
  2653. }
  2654. #my-profile-bio {
  2655. overflow-y: scroll;
  2656. max-height: 75px;
  2657. }
  2658.  
  2659. .brand_wrapper {
  2660. position: relative;
  2661. height: 72px;
  2662. width: 100%;
  2663. display: flex;
  2664. justify-content: center;
  2665. align-items: center;
  2666. }
  2667. .brand_wrapper span {
  2668. font-size: 24px;
  2669. z-index: 2;
  2670. font-family: "Titillium Web", sans-serif;
  2671. font-weight: 600;
  2672. letter-spacing: 3px;
  2673. }
  2674.  
  2675. .brand_img {
  2676. position: absolute;
  2677. top: 0;
  2678. left: 0;
  2679. width: 100%;
  2680. height: 72px;
  2681. border-radius: 10px;
  2682. object-fit: cover;
  2683. object-position: center;
  2684. z-index: 1;
  2685. box-shadow: 0 0 10px #000;
  2686. }
  2687. .brand_credits {
  2688. position: relative;
  2689. font-size: 16px;
  2690. color: #D3A7FF;
  2691. list-style: none;
  2692. width: 100%;
  2693. display: flex;
  2694. justify-content: space-between;
  2695. padding: 0 24px;
  2696. }
  2697.  
  2698. .brand_credits li {
  2699. position: relative;
  2700. display: inline-block;
  2701. text-shadow: 0px 0px 8px #D3A7FF;
  2702. }
  2703.  
  2704. .brand_credits li:not(:last-child)::after {
  2705. content: '•';
  2706. position: absolute;
  2707. right: -20px;
  2708. color: #D3A7FF;
  2709. }
  2710. .brand_yt {
  2711. display: flex;
  2712. justify-content: center;
  2713. align-items: center;
  2714. gap: 20px;
  2715. }
  2716. .yt_wrapper {
  2717. display: flex;
  2718. justify-content: center;
  2719. align-items: center;
  2720. gap: 10px;
  2721. width: 122px;
  2722. padding: 5px;
  2723. background-color: #B63333;
  2724. border-radius: 15px;
  2725. cursor: pointer;
  2726. }
  2727. .yt_wrapper span {
  2728. user-select: none;
  2729. }
  2730.  
  2731. .hidden_full {
  2732. display: none !important;
  2733. visibility: hidden;
  2734. }
  2735.  
  2736. .mod_overlay {
  2737. position: absolute;
  2738. top: 0;
  2739. left: 0;
  2740. width: 100%;
  2741. height: 100vh;
  2742. background: rgba(0, 0, 0, .7);
  2743. z-index: 9999999;
  2744. display: flex;
  2745. justify-content: center;
  2746. align-items: center;
  2747. transition: all .3s ease;
  2748. }
  2749.  
  2750. .black_overlay {
  2751. background: rgba(0, 0, 0, 0);
  2752. z-index: 99999999;
  2753. opacity: 1;
  2754. animation: 2s ease fadeInBlack forwards;
  2755. }
  2756.  
  2757. @keyframes fadeInBlack {
  2758. 0% {
  2759. background: rgba(0, 0, 0, 0);
  2760. }
  2761. 100% {
  2762. background: rgba(0, 0, 0, 1);
  2763. }
  2764. }
  2765.  
  2766. .default-modal {
  2767. position: relative;
  2768. display: flex;
  2769. flex-direction: column;
  2770. min-width: 300px;
  2771. background: #111;
  2772. color: #fafafa;
  2773. border-radius: 12px;
  2774. overflow: hidden;
  2775. box-shadow: 0 5px 10px #000;
  2776. }
  2777.  
  2778. .default-modal-header {
  2779. display: flex;
  2780. justify-content: space-between;
  2781. align-items: center;
  2782. background: #1c1c1c;
  2783. padding: 5px 10px;
  2784. }
  2785.  
  2786. .default-modal-header h2 {
  2787. margin: 0;
  2788. }
  2789.  
  2790. .default-modal-body {
  2791. display: flex;
  2792. flex-direction: column;
  2793. gap: 6px;
  2794. padding: 15px;
  2795. }
  2796.  
  2797. .tournament-overlay-info {
  2798. display: flex;
  2799. flex-direction: column;
  2800. align-items: center;
  2801. color: white;
  2802. font-size: 28px;
  2803. line-height: 1.4;
  2804. }
  2805.  
  2806. .tournament-overlay-info img {
  2807. margin-bottom: 26px;
  2808. }
  2809.  
  2810. .tournaments-wrapper {
  2811. font-family: 'Titillium Web', sans-serif;
  2812. font-weight: 400;
  2813. position: absolute;
  2814. top: 60%;
  2815. left: 50%;
  2816. transform: translate(-50%, -50%);
  2817. background: #000;
  2818. border: 2px solid #222222;
  2819. border-radius: 1.125rem;
  2820. padding: 1.5rem;
  2821. color: #fafafa;
  2822. display: flex;
  2823. flex-direction: column;
  2824. align-items: center;
  2825. gap: 10px;
  2826. min-width: 632px;
  2827. opacity: 0;
  2828. transition: all .3s ease;
  2829. animation: 0.5s ease fadeIn forwards;
  2830. }
  2831. @keyframes fadeIn {
  2832. 0% {
  2833. top: 60%;
  2834. opacity: 0;
  2835. }
  2836. 100% {
  2837. top: 50%;
  2838. opacity: 1;
  2839. }
  2840. }
  2841. .tournaments h1 {
  2842. margin: 0;
  2843. font-weight: 600;
  2844. }
  2845.  
  2846. .teamCards {
  2847. display: flex;
  2848. gap: 5px;
  2849. position: absolute;
  2850. top: 50%;
  2851. transform: translate(-50%, -50%);
  2852. }
  2853. .teamCard {
  2854. display: flex;
  2855. flex-direction: column;
  2856. align-items: center;
  2857. background: rgba(0, 0, 0, 0.4);
  2858. border-radius: 12px;
  2859. padding: 6px;
  2860. height: fit-content;
  2861. }
  2862. .teamCard.userReady {
  2863. border: 2px solid var(--green);
  2864. }
  2865. .teamCard img {
  2866. border-radius: 50%;
  2867. }
  2868. .teamCard span {
  2869. font-size: 12px;
  2870. }
  2871.  
  2872. .redTeam {
  2873. left: 81%;
  2874. }
  2875.  
  2876. .blueTeam {
  2877. left: 24%;
  2878. }
  2879.  
  2880. .lastOneStanding_list {
  2881. display: flex;
  2882. flex-wrap: wrap;
  2883. gap: 8px;
  2884. width: 100%;
  2885. height: 240px;
  2886. max-height: 240px;
  2887. background: #050505;
  2888. }
  2889.  
  2890. .tournament_timer {
  2891. position: absolute;
  2892. top: 20px;
  2893. left: 50%;
  2894. transform: translateX(-50%);
  2895. color: #fff;
  2896. font-size: 15px;
  2897. z-index: 99999;
  2898. user-select: none;
  2899. pointer-events: none;
  2900. }
  2901.  
  2902. details {
  2903. border: 1px solid #aaa;
  2904. border-radius: 4px;
  2905. padding: 0.5em 0.5em 0;
  2906. user-select: none;
  2907. text-align: start;
  2908. }
  2909.  
  2910. summary {
  2911. font-weight: bold;
  2912. margin: -0.5em -0.5em 0;
  2913. padding: 0.5em;
  2914. }
  2915.  
  2916. details[open] {
  2917. padding: 0.5em;
  2918. }
  2919.  
  2920. details[open] summary {
  2921. border-bottom: 1px solid #aaa;
  2922. margin-bottom: 0.5em;
  2923. }
  2924. button[disabled] {
  2925. filter: grayscale(1);
  2926. }
  2927.  
  2928. .tournament-text-lost,
  2929. .tournament-text-won {
  2930. font-size: 6rem;
  2931. font-weight: 600;
  2932. font-family: 'Titillium Web', sans-serif;
  2933. }
  2934.  
  2935. .tournament-text-lost {
  2936. color: var(--red);
  2937. }
  2938. .tournament-text-won {
  2939. color: var(--green);
  2940. }
  2941.  
  2942. .tournament_alert {
  2943. position: absolute;
  2944. top: 20px;
  2945. left: 50%;
  2946. transform: translateX(-50%);
  2947. background: #151515;
  2948. color: #fff;
  2949. text-align: center;
  2950. padding: 20px;
  2951. z-index: 999999;
  2952. border-radius: 10px;
  2953. box-shadow: 0 0 10px #000;
  2954. display: flex;
  2955. gap: 10px;
  2956. }
  2957. .tournament-profile {
  2958. width: 50px;
  2959. height: 50px;
  2960. border-radius: 50%;
  2961. box-shadow: 0 0 10px #000;
  2962. }
  2963.  
  2964. .tournament-text {
  2965. color: #fff;
  2966. font-size: 24px;
  2967. }
  2968.  
  2969. .claimedBadgeWrapper {
  2970. background: linear-gradient(232deg, #020405 1%, #04181E 100%);
  2971. border-radius: 10px;
  2972. width: 320px;
  2973. height: 330px;
  2974. box-shadow: 0 0 40px -20px #39bdff;
  2975. display: flex;
  2976. flex-direction: column;
  2977. gap: 10px;
  2978. align-items: center;
  2979. justify-content: center;
  2980. color: #fff;
  2981. padding: 10px;
  2982. }
  2983.  
  2984. .btn-cyan {
  2985. background: #53B6CC;
  2986. border: none;
  2987. border-radius: 5px;
  2988. font-size: 16px;
  2989. color: #fff;
  2990. font-weight: 500;
  2991. width: fit-content;
  2992. padding: 5px 10px;
  2993. }
  2994.  
  2995. .playTimer {
  2996. z-index: 2;
  2997. position: absolute;
  2998. top: 128px;
  2999. left: 4px;
  3000. color: #8d8d8d;
  3001. font-size: 14px;
  3002. font-weight: 500;
  3003. user-select: none;
  3004. pointer-events: none;
  3005. }
  3006.  
  3007. .mouseTracker {
  3008. z-index: 2;
  3009. position: absolute;
  3010. top: 144px;
  3011. left: 4px;
  3012. color: #8d8d8d;
  3013. font-size: 14px;
  3014. font-weight: 500;
  3015. user-select: none;
  3016. pointer-events: none;
  3017. }
  3018.  
  3019. .modInput-wrapper {
  3020. position: relative;
  3021. display: inline-block;
  3022. width: 100%;
  3023. }
  3024.  
  3025. .modInput-secondary {
  3026. display: inline-block;
  3027. width: 100%;
  3028. padding: 10px 0 10px 15px;
  3029. font-weight: 400;
  3030. color: #E9E9E9;
  3031. background: #050505;
  3032. border: 0;
  3033. border-radius: 3px;
  3034. outline: 0;
  3035. text-indent: 70px;
  3036. transition: all .3s ease-in-out;
  3037. }
  3038. .modInput-secondary.t-indent-120 {
  3039. text-indent: 120px;
  3040. }
  3041. .modInput-secondary::-webkit-input-placeholder {
  3042. color: #050505;
  3043. text-indent: 0;
  3044. font-weight: 300;
  3045. }
  3046. .modInput-secondary + label {
  3047. display: inline-block;
  3048. position: absolute;
  3049. top: 8px;
  3050. left: 0;
  3051. bottom: 8px;
  3052. padding: 5px 15px;
  3053. color: #E9E9E9;
  3054. font-size: 11px;
  3055. font-weight: 700;
  3056. text-transform: uppercase;
  3057. text-shadow: 0 1px 0 rgba(19, 74, 70, 0);
  3058. transition: all .3s ease-in-out;
  3059. border-radius: 3px;
  3060. background: rgba(122, 134, 184, 0);
  3061. }
  3062. .modInput-secondary + label:after {
  3063. position: absolute;
  3064. content: "";
  3065. width: 0;
  3066. height: 0;
  3067. top: 100%;
  3068. left: 50%;
  3069. margin-left: -3px;
  3070. border-left: 3px solid transparent;
  3071. border-right: 3px solid transparent;
  3072. border-top: 3px solid rgba(122, 134, 184, 0);
  3073. transition: all .3s ease-in-out;
  3074. }
  3075.  
  3076. .modInput-secondary:focus,
  3077. .modInput-secondary:active {
  3078. color: #E9E9E9;
  3079. text-indent: 0;
  3080. background: #050505;
  3081. }
  3082. .modInput-secondary:focus::-webkit-input-placeholder,
  3083. .modInput-secondary:active::-webkit-input-placeholder {
  3084. color: #aaa;
  3085. }
  3086. .modInput-secondary:focus + label,
  3087. .modInput-secondary:active + label {
  3088. color: #fff;
  3089. text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  3090. background: #7A86B8;
  3091. transform: translateY(-40px);
  3092. }
  3093. .modInput-secondary:focus + label:after,
  3094. .modInput-secondary:active + label:after {
  3095. border-top: 4px solid #7A86B8;
  3096. }
  3097.  
  3098. /* Friends & account */
  3099.  
  3100. .signIn-overlay {
  3101. position: absolute;
  3102. top: 0;
  3103. left: 0;
  3104. width: 100%;
  3105. height: 100vh;
  3106. background: rgba(0, 0, 0, .4);
  3107. z-index: 999999;
  3108. display: flex;
  3109. justify-content: center;
  3110. align-items: center;
  3111. color: #E3E3E3;
  3112. opacity: 0;
  3113. transition: all .3s ease;
  3114. }
  3115.  
  3116. .signIn-wrapper {
  3117. background: #111111;
  3118. width: 450px;
  3119. display: flex;
  3120. flex-direction: column;
  3121. align-items: center;
  3122. border-radius: 10px;
  3123. color: #fafafa;
  3124. }
  3125.  
  3126. .signIn-header {
  3127. background: #181818;
  3128. width: 100%;
  3129. display: flex;
  3130. justify-content: space-between;
  3131. align-items: center;
  3132. padding: 8px;
  3133. border-radius: 10px 10px 0 0;
  3134. }
  3135. .signIn-header span {
  3136. font-weight: 500;
  3137. font-size: 20px;
  3138. }
  3139.  
  3140. .signIn-body {
  3141. display: flex;
  3142. flex-direction: column;
  3143. gap: 10px;
  3144. align-items: center;
  3145. justify-content: start;
  3146. padding: 40px 40px 5px 40px;
  3147. width: 100%;
  3148. }
  3149.  
  3150. #errMessages {
  3151. color: #AC3D3D;
  3152. flex-direction: column;
  3153. gap: 5px;
  3154. }
  3155.  
  3156. .friends_header {
  3157. display: flex;
  3158. flex-direction: row;
  3159. justify-content: space-between;
  3160. align-items: center;
  3161. gap: 10px;
  3162. width: 100%;
  3163. padding: 10px;
  3164. }
  3165.  
  3166. .friends_body {
  3167. position: relative;
  3168. display: flex;
  3169. flex-direction: column;
  3170. align-items: center;
  3171. gap: 6px;
  3172. width: 100%;
  3173. height: 360px;
  3174. max-height: 360px;
  3175. overflow-y: auto;
  3176. padding-right: 10px;
  3177. }
  3178. .allusers {
  3179. padding: 0;
  3180. }
  3181.  
  3182. #users-container {
  3183. position: relative;
  3184. display: flex;
  3185. flex-direction: column;
  3186. align-items: center;
  3187. gap: 6px;
  3188. width: 100%;
  3189. height: 340px;
  3190. max-height: 340px;
  3191. overflow-y: auto;
  3192. padding-right: 10px;
  3193. }
  3194.  
  3195. .profile-img {
  3196. position: relative;
  3197. width: 52px;
  3198. height: 52px;
  3199. border-radius: 100%;
  3200. border: 1px solid #C8C9D9;
  3201. }
  3202.  
  3203. .profile-img img {
  3204. width: 100%;
  3205. height: 100%;
  3206. border-radius: 100%;
  3207. }
  3208.  
  3209. .status_icon {
  3210. position: absolute;
  3211. width: 15px;
  3212. height: 15px;
  3213. top: 0;
  3214. left: 0;
  3215. border-radius: 50%;
  3216. }
  3217.  
  3218. .online_icon {
  3219. background-color: #3DB239;
  3220. }
  3221. .offline_icon {
  3222. background-color: #B23939;
  3223. }
  3224. .Owner_role {
  3225. color: #3979B2;
  3226. }
  3227. .Moderator_role {
  3228. color: #39B298;
  3229. }
  3230. .Vip_role {
  3231. color: #E1A33E;
  3232. }
  3233.  
  3234. .friends_row {
  3235. display: flex;
  3236. flex-direction: row;
  3237. width: 100%;
  3238. justify-content: space-between;
  3239. align-items: center;
  3240. background: #090909;
  3241. border-radius: 8px;
  3242. padding: 10px;
  3243. }
  3244.  
  3245. .friends_row .val {
  3246. width: fit-content;
  3247. height: fit-content;
  3248. padding: 5px 20px;
  3249. box-sizing: content-box;
  3250. }
  3251.  
  3252. .user-profile-wrapper {
  3253. cursor: pointer;
  3254. }
  3255. .user-profile-wrapper > .centerY.g-5 {
  3256. pointer-events: none;
  3257. user-select: none;
  3258. cursor: pointer;
  3259. }
  3260.  
  3261. .textarea-container {
  3262. position: relative;
  3263. width: 100%;
  3264. }
  3265. .textarea-container textarea {
  3266. width: 100%;
  3267. height: 120px;
  3268. resize: none;
  3269. }
  3270. .char-counter {
  3271. position: absolute;
  3272. bottom: 5px;
  3273. right: 5px;
  3274. color: gray;
  3275. }
  3276.  
  3277. .mod_badges {
  3278. display: flex;
  3279. flex-wrap: wrap;
  3280. gap: 5px;
  3281. }
  3282.  
  3283. .mod_badge {
  3284. width: fit-content;
  3285. background: #222;
  3286. color: #fafafa;
  3287. padding: 2px 7px;
  3288. border-radius: 9px;
  3289. }
  3290.  
  3291. .friends-chat-wrapper {
  3292. position: absolute;
  3293. top: 0;
  3294. left: 0;
  3295. width: 100%;
  3296. height: 100%;
  3297. background: #111111;
  3298. display: flex;
  3299. flex-direction: column;
  3300. z-index: 999;
  3301. opacity: 0;
  3302. transition: all .3s ease;
  3303. }
  3304.  
  3305. .friends-chat-header {
  3306. display: flex;
  3307. justify-content: space-between;
  3308. align-items: center;
  3309. background: #050505;
  3310. width: 100%;
  3311. padding: 8px;
  3312. height: 68px;
  3313. }
  3314.  
  3315. .friends-chat-body {
  3316. height: calc(100% - 68px);
  3317. display: flex;
  3318. flex-direction: column;
  3319. }
  3320.  
  3321. .friends-chat-messages {
  3322. height: 300px;
  3323. overflow-y: auto;
  3324. display: flex;
  3325. flex-direction: column;
  3326. gap: 5px;
  3327. padding: 10px;
  3328. }
  3329. .friends-message {
  3330. background: linear-gradient(180deg, rgb(12 12 12), #000);
  3331. padding: 8px;
  3332. border-radius: 12px;
  3333. display: flex;
  3334. flex-direction: column;
  3335. min-width: 80px;
  3336. max-width: 200px;
  3337. width: fit-content;
  3338. }
  3339.  
  3340. .message-date {
  3341. color: #8a8989;
  3342. font-size: 11px;
  3343. }
  3344.  
  3345. .message-right {
  3346. align-self: flex-end;
  3347. }
  3348.  
  3349. .messenger-wrapper {
  3350. width: 100%;
  3351. height: 60px;
  3352. padding: 10px;
  3353. }
  3354. .messenger-wrapper .container {
  3355. display: flex;
  3356. flex-direction: row;
  3357. gap: 10px;
  3358. width: 100%;
  3359. background: #0a0a0a;
  3360. padding: 10px 5px;
  3361. border-radius: 10px;
  3362. }
  3363.  
  3364. .messenger-wrapper .container input {
  3365. padding: 5px;
  3366. }
  3367. .messenger-wrapper .container button {
  3368. width: 150px;
  3369. }
  3370.  
  3371. /* deathscreen challenges */
  3372.  
  3373. #menu-wrapper {
  3374. overflow-x: visible;
  3375. overflow-y: visible;
  3376. }
  3377.  
  3378. .challenges_deathscreen {
  3379. width: 450px;
  3380. background: rgb(21, 21, 21);
  3381. display: flex;
  3382. flex-direction: column;
  3383. gap: 8px;
  3384. padding: 7px;
  3385. border-radius: 10px;
  3386. margin-bottom: 15px;
  3387. }
  3388.  
  3389. .challenges-col {
  3390. display: flex;
  3391. flex-direction: column;
  3392. gap: 4px;
  3393. align-items: center;
  3394. width: 100%;
  3395. }
  3396. .challenge-row {
  3397. display: flex;
  3398. align-items: center;
  3399. background: rgba(0, 0, 0, .4);
  3400. justify-content: space-between;
  3401. padding: 5px 10px;
  3402. border-radius: 4px;
  3403. width: 100%;
  3404. }
  3405.  
  3406. .challenges-title {
  3407. font-size: 16px;
  3408. font-weight: 600;
  3409. }
  3410.  
  3411. .challenge-best-secondary {
  3412. background: #1d1d1d;
  3413. border-radius: 10px;
  3414. text-align: center;
  3415. padding: 5px 8px;
  3416. min-width: 130px;
  3417. }
  3418. .challenge-collect-secondary {
  3419. background: #4C864B;
  3420. border-radius: 10px;
  3421. text-align: center;
  3422. padding: 5px 8px;
  3423. outline: none;
  3424. border: none;
  3425. min-width: 130px;
  3426. }
  3427.  
  3428. .alwan__reference {
  3429. border-width: 2px !important;
  3430. }
  3431.  
  3432. #mod-announcements {
  3433. display: flex;
  3434. flex-direction: column;
  3435. gap: 6px;
  3436. max-height: 144px;
  3437. overflow-y: auto;
  3438. }
  3439.  
  3440. .mod-announcement {
  3441. background: #111111;
  3442. border-radius: 4px;
  3443. display: flex;
  3444. gap: 3px;
  3445. width: 100%;
  3446. cursor: pointer;
  3447. padding: 5px 8px;
  3448. }
  3449.  
  3450. .mod-announcement-icon {
  3451. border-radius: 50%;
  3452. width: 35px;
  3453. height: 35px;
  3454. align-self: center;
  3455. }
  3456.  
  3457. .mod-announcement-text {
  3458. display: flex;
  3459. flex-direction: column;
  3460. gap: 3px;
  3461. overflow: hidden;
  3462. flex-grow: 1;
  3463. }
  3464.  
  3465. .mod-announcement-text > * {
  3466. overflow: hidden;
  3467. white-space: nowrap;
  3468. text-overflow: ellipsis;
  3469. }
  3470.  
  3471. .mod-announcement-text span {
  3472. font-size: 14px;
  3473. color: #ffffff;
  3474. flex-shrink: 0;
  3475. }
  3476.  
  3477. .mod-announcement-text p {
  3478. font-size: 10px;
  3479. color: #898989;
  3480. flex-shrink: 0;
  3481. margin: 0;
  3482. }
  3483.  
  3484. .mod-announcements-wrapper {
  3485. display: flex;
  3486. flex-direction: column;
  3487. gap: 10px;
  3488. }
  3489.  
  3490. .mod-announcement-content {
  3491. display: flex;
  3492. justify-content: space-between;
  3493. gap: 10px;
  3494. background-color: #050505;
  3495. padding: 10px;
  3496. border-radius: 10px;
  3497. background-image: url('https://czrsd.com/static/general/bg_blur.png');
  3498. background-repeat: no-repeat;
  3499. background-position: 300px 40%;
  3500. background-size: cover;
  3501. }
  3502.  
  3503. .mod-announcement-content p {
  3504. text-align: justify;
  3505. max-height: 330px;
  3506. overflow-y: auto;
  3507. padding-right: 10px;
  3508. }
  3509.  
  3510. .mod-announcement-images {
  3511. display: flex;
  3512. flex-direction: column;
  3513. gap: 20px;
  3514. min-width: 30%;
  3515. width: 30%;
  3516. max-height: 330px;
  3517. padding-right: 10px;
  3518. overflow-y: auto;
  3519. }
  3520.  
  3521. .mod-announcement-images img {
  3522. border-radius: 5px;
  3523. cursor: pointer;
  3524. }
  3525.  
  3526. #image-gallery {
  3527. display: flex;
  3528. flex-wrap: wrap;
  3529. gap: 5px;
  3530. }
  3531.  
  3532. .image-container {
  3533. display: flex;
  3534. flex-direction: column;
  3535. }
  3536.  
  3537. .image-container img {
  3538. width: 172px;
  3539. height: auto;
  3540. aspect-ratio: 16 / 9;
  3541. border-radius: 5px;
  3542. cursor: pointer;
  3543. }
  3544.  
  3545. .download_btn {
  3546. background: url('https://czrsd.com/static/sigmod/icons/download.svg');
  3547.  
  3548. }
  3549.  
  3550. .delete_btn {
  3551. background: url('https://czrsd.com/static/sigmod/icons/trash-bin.svg');
  3552. }
  3553.  
  3554. .operation_btn {
  3555. background-size: contain;
  3556. background-repeat: no-repeat;
  3557. border: none;
  3558. width: 22px;
  3559. height: 22px;
  3560. }
  3561.  
  3562. .sigmod-community {
  3563. display: flex;
  3564. flex-direction: column;
  3565. margin: auto;
  3566. border-radius: 10px;
  3567. width: 50%;
  3568. align-self: center;
  3569. font-size: 19px;
  3570. overflow: hidden;
  3571. }
  3572.  
  3573. .community-header {
  3574. background: linear-gradient(179deg, #000000, #0c0c0c);
  3575. text-align: center;
  3576. font-family: "Titillium Web", sans-serif;
  3577. padding: 6px;
  3578. }
  3579.  
  3580. .community-discord-logo {
  3581. background: rgb(88, 101, 242);
  3582. padding: 5px 12px;
  3583. }
  3584. .community-discord {
  3585. text-align: center;
  3586. padding: 10px;
  3587. background: #0c0c0c;
  3588. width: 100%;
  3589. }
  3590. .community-discord a {
  3591. font-family: "Titillium Web", sans-serif;
  3592. }
  3593.  
  3594. /* common */
  3595. .flex {
  3596. display: flex;
  3597. }
  3598. .centerX {
  3599. display: flex;
  3600. justify-content: center;
  3601. }
  3602. .centerY {
  3603. display: flex;
  3604. align-items: center;
  3605. }
  3606. .centerXY {
  3607. display: flex;
  3608. align-items: center;
  3609. justify-content: center
  3610. }
  3611. .f-column {
  3612. display: flex;
  3613. flex-direction: column;
  3614. }
  3615. mx-5 {
  3616. margin: 0 5px;
  3617. }
  3618. .my-5 {
  3619. margin: 5px 0;
  3620. }
  3621. .mt-auto {
  3622. margin-top: auto !important;
  3623. }
  3624. .g-2 {
  3625. gap: 2px;
  3626. }
  3627. .g-5 {
  3628. gap: 5px;
  3629. }
  3630. .g-10 {
  3631. gap: 10px;
  3632. }
  3633. .p-2 {
  3634. padding: 2px;
  3635. }
  3636. .p-5 {
  3637. padding: 5px;
  3638. }
  3639. .p-10 {
  3640. padding: 10px;
  3641. }
  3642. .rounded {
  3643. border-radius: 10px;
  3644. }
  3645. .text-center {
  3646. text-align: center;
  3647. }
  3648. .f-big {
  3649. font-size: 18px;
  3650. }
  3651. .hidden {
  3652. display: none;
  3653. }
  3654. `;
  3655. },
  3656. respawnTime: Date.now(),
  3657. respawnCooldown: 1000,
  3658. get friends_settings() {
  3659. return this._friends_settings;
  3660. },
  3661. set friends_settings(value) {
  3662. this._friends_settings = value;
  3663. window.sigmod.friends_settings = value;
  3664. },
  3665. get friend_names() {
  3666. return this._friend_names;
  3667. },
  3668.  
  3669. set friend_names(value) {
  3670. this._friend_names = value;
  3671. window.sigmod.friend_names = value;
  3672. },
  3673.  
  3674. async game() {
  3675. const { fillRect, fillText, strokeText, arc, drawImage } =
  3676. CanvasRenderingContext2D.prototype;
  3677.  
  3678. const showPosition = byId('showPosition');
  3679. if (showPosition && !showPosition.checked) showPosition.click();
  3680.  
  3681. const loadStorage = () => {
  3682. if (modSettings.virusImage) {
  3683. loadVirusImage(modSettings.virusImage);
  3684. }
  3685.  
  3686. if (modSettings.game.skins.original !== null) {
  3687. loadSkinImage(
  3688. modSettings.game.skins.original,
  3689. modSettings.game.skins.replacement
  3690. );
  3691. }
  3692. };
  3693.  
  3694. loadStorage();
  3695.  
  3696. let cachedPattern = null;
  3697. let patternCanvas = null;
  3698. let isUpdatingPattern = false;
  3699.  
  3700. function updatePattern(ctx) {
  3701. isUpdatingPattern = true;
  3702. loadPattern(ctx)
  3703. .then((pattern) => {
  3704. if (mods.mapImageLoaded) {
  3705. cachedPattern = pattern;
  3706. ctx.fillStyle = cachedPattern;
  3707. ctx.fillRect(
  3708. 0,
  3709. 0,
  3710. ctx.canvas.width,
  3711. ctx.canvas.height
  3712. );
  3713. } else {
  3714. clearPattern(ctx);
  3715. }
  3716. isUpdatingPattern = false;
  3717. })
  3718. .catch((e) => {
  3719. console.error('Error loading map image:', e);
  3720. clearPattern(ctx);
  3721. isUpdatingPattern = false;
  3722. });
  3723. }
  3724.  
  3725. function loadPattern(ctx) {
  3726. return new Promise((resolve, reject) => {
  3727. const img = new Image();
  3728. img.src = modSettings.game.map.image;
  3729. img.crossOrigin = 'Anonymous';
  3730.  
  3731. img.onload = () => {
  3732. if (!patternCanvas) {
  3733. patternCanvas = document.createElement('canvas');
  3734. }
  3735. patternCanvas.width = img.width;
  3736. patternCanvas.height = img.height;
  3737. const patternCtx = patternCanvas.getContext('2d');
  3738. patternCtx.drawImage(img, 0, 0);
  3739.  
  3740. const imageData = patternCtx.getImageData(
  3741. 0,
  3742. 0,
  3743. patternCanvas.width,
  3744. patternCanvas.height
  3745. );
  3746. const data = imageData.data;
  3747. mods.mapImageLoaded = !Array.from(data).some(
  3748. (_, i) => i % 4 === 3 && data[i] < 255
  3749. );
  3750.  
  3751. if (mods.mapImageLoaded) {
  3752. resolve(
  3753. ctx.createPattern(patternCanvas, 'no-repeat')
  3754. );
  3755. } else {
  3756. resolve(null);
  3757. }
  3758. };
  3759.  
  3760. img.onerror = () =>
  3761. reject(new Error('Failed to load image.'));
  3762. });
  3763. }
  3764.  
  3765. function clearPattern(ctx) {
  3766. isUpdatingPattern = true;
  3767. ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  3768. ctx.fillStyle = modSettings.game.map.color || '#111111';
  3769. ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  3770. isUpdatingPattern = false;
  3771. }
  3772.  
  3773. window.addEventListener('resize', () => {
  3774. const canvas = document.getElementById('canvas');
  3775. if (canvas && modSettings.game.map.image) {
  3776. updatePattern(canvas.getContext('2d'));
  3777. }
  3778. });
  3779.  
  3780. /* CanvasRenderingContext2D.prototype */
  3781.  
  3782. CanvasRenderingContext2D.prototype.fillRect = function (
  3783. x,
  3784. y,
  3785. width,
  3786. height
  3787. ) {
  3788. if (this.canvas.id !== 'canvas')
  3789. return fillRect.apply(this, arguments);
  3790.  
  3791. const isCanvasSize =
  3792. (width + height) / 2 ===
  3793. (window.innerWidth + window.innerHeight) / 2;
  3794.  
  3795. if (isCanvasSize) {
  3796. if (modSettings.game.map.image && !mods.mapImageLoaded) {
  3797. mods.mapImageLoaded = true;
  3798. updatePattern(this);
  3799. } else if (
  3800. !modSettings.game.map.image ||
  3801. !mods.mapImageLoaded
  3802. ) {
  3803. if (!isUpdatingPattern) {
  3804. clearPattern(this);
  3805. }
  3806. } else {
  3807. this.fillStyle =
  3808. cachedPattern ||
  3809. modSettings.game.map.color ||
  3810. '#111111';
  3811. }
  3812. }
  3813.  
  3814. fillRect.apply(this, arguments);
  3815. };
  3816.  
  3817. CanvasRenderingContext2D.prototype.arc = function (
  3818. x,
  3819. y,
  3820. radius,
  3821. startAngle,
  3822. endAngle,
  3823. anticlockwise
  3824. ) {
  3825. if (this.canvas.id !== 'canvas') return arc.apply(this, arguments);
  3826.  
  3827. if (radius >= 86 && modSettings.game.cellColor) {
  3828. this.fillStyle = modSettings.game.cellColor;
  3829. } else if (
  3830. radius <= 20 &&
  3831. modSettings.game.foodColor !== null
  3832. ) {
  3833. this.fillStyle = modSettings.game.foodColor;
  3834. this.strokeStyle = modSettings.game.foodColor;
  3835. }
  3836.  
  3837. arc.apply(this, arguments);
  3838. };
  3839.  
  3840. CanvasRenderingContext2D.prototype.fillText = function (
  3841. text,
  3842. x,
  3843. y
  3844. ) {
  3845. if (this.canvas.id !== 'canvas') return fillText.apply(this, arguments);
  3846.  
  3847. const currentFontSizeMatch = this.font.match(/^(\d+)px/);
  3848. const fontSize = currentFontSizeMatch
  3849. ? currentFontSizeMatch[0]
  3850. : '';
  3851.  
  3852. this.font = `${fontSize} ${modSettings.game.font || 'Ubuntu'}`;
  3853.  
  3854. if (
  3855. text === mods.nick &&
  3856. !modSettings.game.name.gradient.enabled &&
  3857. modSettings.game.name.color !== null
  3858. ) {
  3859. this.fillStyle = modSettings.game.name.color;
  3860. }
  3861.  
  3862. if (
  3863. text === mods.nick &&
  3864. modSettings.game.name.gradient.enabled
  3865. ) {
  3866. const width = this.measureText(text).width;
  3867. const fontSize = 8;
  3868. const gradient = this.createLinearGradient(
  3869. x - width / 2 + fontSize / 2,
  3870. y,
  3871. x + width / 2 - fontSize / 2,
  3872. y + fontSize
  3873. );
  3874.  
  3875. const color1 =
  3876. modSettings.game.name.gradient.left ?? '#ffffff';
  3877. const color2 =
  3878. modSettings.game.name.gradient.right ?? '#ffffff';
  3879.  
  3880. gradient.addColorStop(0, color1);
  3881. gradient.addColorStop(1, color2);
  3882.  
  3883. this.fillStyle = gradient;
  3884. }
  3885.  
  3886. if (!window.sigifx && text.startsWith('Score')) {
  3887. if (Date.now() - lastGetScore >= 250) {
  3888. const score = parseInt(text.split(': ')[1]);
  3889.  
  3890. mods.cellSize = score;
  3891.  
  3892. mods.aboveRespawnLimit = score >= 5500;
  3893.  
  3894. lastGetScore = Date.now();
  3895. }
  3896. }
  3897.  
  3898. if (!window.sigfix && text.startsWith('X:')) {
  3899. this.fillStyle = 'transparent';
  3900.  
  3901. const [, xValue, yValue] =
  3902. /X: (.*), Y: (.*)/.exec(text) || [];
  3903. if (!xValue) return;
  3904.  
  3905. const position = {
  3906. x: parseFloat(xValue),
  3907. y: parseFloat(yValue),
  3908. };
  3909.  
  3910. if (menuClosed() && !isDead()) {
  3911. if (position.x === 0 && position.y === 0) return;
  3912.  
  3913. playerPosition.x = position.x;
  3914. playerPosition.y = position.y;
  3915.  
  3916. // send position every 300 milliseconds
  3917. if (Date.now() - lastPosTime >= 300) {
  3918. if (modSettings.settings.tag && client?.ws?.readyState === 1) {
  3919. client.send({
  3920. type: 'position',
  3921. content: {
  3922. x: playerPosition.x,
  3923. y: playerPosition.y,
  3924. },
  3925. });
  3926. }
  3927. lastPosTime = Date.now();
  3928. }
  3929. } else if (isDead() && !dead2) {
  3930. dead2 = true;
  3931. playerPosition.x = null;
  3932. playerPosition.y = null;
  3933. if (modSettings.settings.tag && client?.ws?.readyState === 1) {
  3934. client.send({
  3935. type: 'position',
  3936. content: { x: null, y: null },
  3937. });
  3938. }
  3939. }
  3940. }
  3941.  
  3942. if (modSettings.game.removeOutlines) {
  3943. this.shadowBlur = 0;
  3944. this.shadowColor = 'transparent';
  3945. }
  3946.  
  3947. if (text.length > 18 && modSettings.game.shortenNames) {
  3948. arguments[0] = text.slice(0, 18) + '...';
  3949. }
  3950.  
  3951. // only for leaderboard
  3952. const name = text.match(/\d+\.\s*(.+)/)?.[1];
  3953.  
  3954. if (
  3955. name &&
  3956. mods.friend_names.has(name) &&
  3957. mods.friends_settings.highlight_friends
  3958. ) {
  3959. this.fillStyle = mods.friends_settings.highlight_color;
  3960. }
  3961.  
  3962. fillText.apply(this, arguments);
  3963. };
  3964.  
  3965. CanvasRenderingContext2D.prototype.strokeText = function (
  3966. text,
  3967. x,
  3968. y
  3969. ) {
  3970. if (this.canvas.id !== 'canvas') return strokeText.apply(this, arguments);
  3971.  
  3972. const currentFontSizeMatch = this.font.match(/^(\d+)px/);
  3973. const fontSize = currentFontSizeMatch
  3974. ? currentFontSizeMatch[0]
  3975. : '';
  3976.  
  3977. this.font = `${fontSize} ${modSettings.game.font || 'Ubuntu'}`;
  3978.  
  3979. if (text.length > 18 && modSettings.game.shortenNames) {
  3980. arguments[0] = text.slice(0, 18) + '...';
  3981. }
  3982.  
  3983. if (modSettings.game.removeOutlines) {
  3984. this.shadowBlur = 0;
  3985. this.shadowColor = 'transparent';
  3986. } else {
  3987. this.shadowBlur = 7;
  3988. this.shadowColor = '#000';
  3989. }
  3990.  
  3991. strokeText.apply(this, arguments);
  3992. };
  3993.  
  3994. CanvasRenderingContext2D.prototype.drawImage = function (
  3995. image,
  3996. ...args
  3997. ) {
  3998. if (this.canvas.id !== 'canvas')
  3999. return drawImage.call(this, image, ...args);
  4000.  
  4001. if (
  4002. image.src &&
  4003. (image.src.endsWith('2.png') ||
  4004. image.src.endsWith('2-min.png')) &&
  4005. modSettings.game.virusImage
  4006. ) {
  4007. if (mods.virusImageLoaded) {
  4008. return drawImage.call(this, mods.virusImage, ...args);
  4009. } else {
  4010. loadVirusImage(modSettings.game.virusImage).then(() => {
  4011. drawImage.call(this, mods.virusImage, ...args);
  4012. });
  4013. return;
  4014. }
  4015. }
  4016.  
  4017. if (
  4018. image instanceof HTMLImageElement &&
  4019. modSettings.game.skins.original &&
  4020. image.src.includes(`${modSettings.game.skins.original}.png`)
  4021. ) {
  4022. if (mods.skinImageLoaded) {
  4023. return drawImage.call(this, mods.skinImage, ...args);
  4024. } else {
  4025. loadSkinImage(
  4026. modSettings.game.skins.original,
  4027. modSettings.game.skins.replacement
  4028. ).then(() => {
  4029. drawImage.call(this, mods.skinImage, ...args);
  4030. });
  4031. return;
  4032. }
  4033. }
  4034.  
  4035. drawImage.call(this, image, ...args);
  4036. };
  4037.  
  4038. function loadVirusImage(imgSrc) {
  4039. return new Promise((resolve, reject) => {
  4040. const replacementVirus = new Image();
  4041. replacementVirus.src = imgSrc;
  4042. replacementVirus.crossOrigin = 'Anonymous';
  4043.  
  4044. replacementVirus.onload = () => {
  4045. mods.virusImage = replacementVirus;
  4046. mods.virusImageLoaded = true;
  4047. resolve();
  4048. };
  4049.  
  4050. replacementVirus.onerror = () => {
  4051. console.error('Failed to load virus image.');
  4052. reject(new Error('Failed to load virus image.'));
  4053. };
  4054. });
  4055. }
  4056.  
  4057. function loadSkinImage(originalSkinName, replacementImgSrc) {
  4058. return new Promise((resolve, reject) => {
  4059. const replacementSkin = new Image();
  4060. replacementSkin.src = replacementImgSrc;
  4061. replacementSkin.crossOrigin = 'Anonymous';
  4062.  
  4063. replacementSkin.onload = () => {
  4064. mods.skinImage = replacementSkin;
  4065. mods.skinImageLoaded = true;
  4066. resolve();
  4067. };
  4068.  
  4069. replacementSkin.onerror = () =>
  4070. reject(new Error('Failed to load skin image.'));
  4071. });
  4072. }
  4073.  
  4074. const modals = {
  4075. map: {
  4076. title: 'Map Image',
  4077. applyId: 'apply-map-image',
  4078. resetId: 'reset-map-image',
  4079. previewId: 'preview-mapImage',
  4080. modalId: 'map-modal',
  4081. storagePath: 'game.map.image',
  4082. },
  4083. virus: {
  4084. title: 'Virus Image',
  4085. applyId: 'apply-virus-image',
  4086. resetId: 'reset-virus-image',
  4087. previewId: 'preview-virusImage',
  4088. modalId: 'virus-modal',
  4089. storagePath: 'game.virusImage',
  4090. },
  4091. skin: {
  4092. title: 'Skin Replacement',
  4093. applyId: 'apply-skin-image',
  4094. resetId: 'reset-skin-image',
  4095. previewId: 'preview-skinImage',
  4096. modalId: 'skin-modal',
  4097. storagePath: [
  4098. 'game.skins.original',
  4099. 'game.skins.replacement',
  4100. ],
  4101. additional: true,
  4102. },
  4103. };
  4104.  
  4105. function createModal({
  4106. title,
  4107. applyId,
  4108. resetId,
  4109. previewId,
  4110. modalId,
  4111. additional,
  4112. }) {
  4113. const additionalContent = additional
  4114. ? `
  4115. <span>Select a skin that should be replaced:</span>
  4116. <select class="form-control" id="skin-list"></select>
  4117. <span style="font-size: 12px;">Replacement image - Enter an image URL:</span>
  4118. `
  4119. : `
  4120. <span>Enter an image URL:</span>
  4121. `;
  4122.  
  4123. return `
  4124. <div class="default-modal">
  4125. <div class="default-modal-header">
  4126. <h2>${title}</h2>
  4127. <button class="btn closeBtn" id="closeCustomModal">
  4128. <svg width="22" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  4129. <path d="M1.6001 14.4L14.4001 1.59998M14.4001 14.4L1.6001 1.59998" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
  4130. </svg>
  4131. </button>
  4132. </div>
  4133. <div class="default-modal-body">
  4134. ${additionalContent}
  4135. <div class="centerXY g-10">
  4136. <input type="text" placeholder="https://i.imgur/..." class="form-control" id="image-url" />
  4137. <div class="imagePreview" id="${previewId}" title="Image Preview">
  4138. <span class="no-preview">No Preview Available</span>
  4139. </div>
  4140. </div>
  4141. <div class="centerXY g-10">
  4142. <button type="button" class="modButton-black" id="${applyId}">Apply Image</button>
  4143. <button type="button" class="resetButton" title="Reset ${title.toLowerCase()}" id="${resetId}"></button>
  4144. </div>
  4145. </div>
  4146. </div>
  4147. `;
  4148. }
  4149.  
  4150. function setupModalEvents(id, type) {
  4151. byId(id).addEventListener('click', async () => {
  4152. mods.customModal(
  4153. createModal(modals[type]),
  4154. modals[type].modalId
  4155. );
  4156. document
  4157. .querySelector('#closeCustomModal')
  4158. .addEventListener('click', () => closeModal(type));
  4159.  
  4160. const modal = modals[type];
  4161. const imageUrlInput = byId('image-url');
  4162.  
  4163. let initialUrl = '';
  4164. if (modal.additional && type === 'skin') {
  4165. const [originalPath, replacementPath] =
  4166. modal.storagePath;
  4167. initialUrl =
  4168. getNestedValue(modSettings, replacementPath) || '';
  4169. byId('skin-list').value =
  4170. getNestedValue(modSettings, originalPath) || '';
  4171. } else {
  4172. initialUrl =
  4173. getNestedValue(modSettings, modal.storagePath) ||
  4174. '';
  4175. }
  4176. imageUrlInput.value = initialUrl;
  4177. updatePreview(initialUrl);
  4178.  
  4179. imageUrlInput.addEventListener('input', (e) => {
  4180. updatePreview(e.target.value);
  4181. });
  4182.  
  4183. byId(modal.applyId).addEventListener('click', () =>
  4184. applyChanges(type)
  4185. );
  4186. byId(modal.resetId).addEventListener('click', () =>
  4187. resetChanges(type)
  4188. );
  4189.  
  4190. if (type === 'skin') {
  4191. const skinList = byId('skin-list');
  4192. const skins =
  4193. mods.skins.length > 0
  4194. ? mods.skins
  4195. : await fetch(
  4196. 'https://one.sigmally.com/api/skins'
  4197. )
  4198. .then((response) => response.json())
  4199. .then((data) => {
  4200. const skinNames = data.data.map(
  4201. (item) =>
  4202. item.name.replace('.png', '')
  4203. );
  4204. mods.skins = skinNames;
  4205. return skinNames;
  4206. });
  4207.  
  4208. skinList.innerHTML = skins
  4209. .map(
  4210. (skin) =>
  4211. `<option value="${skin}" ${
  4212. skin === modSettings.game.skins.original
  4213. ? 'selected'
  4214. : ''
  4215. }>${skin}</option>`
  4216. )
  4217. .join('');
  4218. }
  4219. });
  4220. }
  4221.  
  4222. function getNestedValue(obj, path) {
  4223. return path
  4224. .split('.')
  4225. .reduce((acc, part) => acc && acc[part], obj);
  4226. }
  4227.  
  4228. function setNestedValue(obj, path, value) {
  4229. const parts = path.split('.');
  4230. const last = parts.pop();
  4231. const target = parts.reduce(
  4232. (acc, part) => (acc[part] = acc[part] || {}),
  4233. obj
  4234. );
  4235. target[last] = value;
  4236. }
  4237.  
  4238. function updatePreview(url) {
  4239. const preview = document.querySelector('.imagePreview');
  4240. const noPreviewSpan = document.querySelector('.no-preview');
  4241.  
  4242. const updateVisibility = (showPreview) => {
  4243. preview.style.backgroundImage = showPreview
  4244. ? `url(${url})`
  4245. : 'none';
  4246. noPreviewSpan.style.display = showPreview
  4247. ? 'none'
  4248. : 'block';
  4249. };
  4250.  
  4251. if (url) {
  4252. const img = new Image();
  4253. img.src = url;
  4254. img.onload = () => updateVisibility(true);
  4255. img.onerror = () => updateVisibility(false);
  4256. } else {
  4257. updateVisibility(false);
  4258. }
  4259. }
  4260.  
  4261. function applyChanges(type) {
  4262. let { title, storagePath, additional } = modals[type];
  4263. const url = byId('image-url').value;
  4264.  
  4265. mods[`${type}ImageLoaded`] = false;
  4266.  
  4267. if (additional && type === 'skin') {
  4268. const selectedSkin = byId('skin-list').value;
  4269. setNestedValue(modSettings, storagePath[0], selectedSkin);
  4270. setNestedValue(modSettings, storagePath[1], url);
  4271. } else {
  4272. setNestedValue(modSettings, storagePath, url);
  4273. }
  4274.  
  4275. updateStorage();
  4276.  
  4277. mods.modAlert(`Successfully applied ${title}.`, 'success');
  4278. }
  4279.  
  4280. function resetChanges(type) {
  4281. const { title, storagePath, additional } = modals[type];
  4282.  
  4283. if (additional && type === 'skin') {
  4284. setNestedValue(modSettings, storagePath[0], null);
  4285. setNestedValue(modSettings, storagePath[1], null);
  4286. } else {
  4287. setNestedValue(modSettings, storagePath, null);
  4288. }
  4289.  
  4290. mods[`${type}ImageLoaded`] = false;
  4291.  
  4292. updateStorage();
  4293.  
  4294. mods.modAlert(
  4295. `The ${title} has been successfully reset.`,
  4296. 'success'
  4297. );
  4298. }
  4299.  
  4300. function closeModal(type) {
  4301. const overlay = byId(`${type}-modal`);
  4302. overlay.style.opacity = 0;
  4303. setTimeout(() => overlay.remove(), 300);
  4304. }
  4305.  
  4306. setupModalEvents('mapImageSelect', 'map');
  4307. setupModalEvents('virusImageSelect', 'virus');
  4308. setupModalEvents('skinReplaceSelect', 'skin');
  4309.  
  4310. const shortenNames = byId('shortenNames');
  4311. const removeOutlines = byId('removeOutlines');
  4312.  
  4313. shortenNames.addEventListener('change', () => {
  4314. modSettings.game.shortenNames = shortenNames.checked;
  4315. updateStorage();
  4316. });
  4317. removeOutlines.addEventListener('change', () => {
  4318. modSettings.game.removeOutlines = removeOutlines.checked;
  4319. updateStorage();
  4320. });
  4321.  
  4322. const showNames = byId('mod-showNames');
  4323. const showSkins = byId('mod-showSkins');
  4324.  
  4325. const originalShowNames = byId('showNames');
  4326. const originalShowSkins = byId('showSkins');
  4327.  
  4328. function syncCheckboxes() {
  4329. if (showNames.checked !== originalShowNames.checked) {
  4330. originalShowNames.click();
  4331. }
  4332. if (showSkins.checked !== originalShowSkins.checked) {
  4333. originalShowSkins.click();
  4334. }
  4335. }
  4336.  
  4337. showNames.addEventListener('change', syncCheckboxes);
  4338. showSkins.addEventListener('change', syncCheckboxes);
  4339.  
  4340. const deathScreenPos = byId('deathScreenPos');
  4341. const deathScreen = byId('__line2');
  4342.  
  4343. const applyMargin = (position) => {
  4344. switch (position) {
  4345. case 'left':
  4346. deathScreen.style.marginLeft = '0';
  4347. break;
  4348. case 'right':
  4349. deathScreen.style.marginRight = '0';
  4350. break;
  4351. case 'top':
  4352. deathScreen.style.marginTop = '20px';
  4353. break;
  4354. case 'bottom':
  4355. deathScreen.style.marginBottom = '20px';
  4356. break;
  4357. default:
  4358. deathScreen.style.margin = 'auto';
  4359. }
  4360. };
  4361.  
  4362. deathScreenPos.addEventListener('change', () => {
  4363. const selected = deathScreenPos.value;
  4364. applyMargin(selected);
  4365. modSettings.deathScreenPos = selected;
  4366. updateStorage();
  4367. });
  4368.  
  4369. const defaultPosition = modSettings.deathScreenPos || 'center';
  4370.  
  4371. applyMargin(defaultPosition);
  4372. deathScreenPos.value = defaultPosition;
  4373. },
  4374.  
  4375. customModal(children, id, zindex = '999999') {
  4376. const overlay = document.createElement('div');
  4377. overlay.classList.add('mod_overlay');
  4378. id && overlay.setAttribute('id', id);
  4379. overlay.innerHTML = children;
  4380. overlay.style.zIndex = zindex;
  4381. overlay.style.opacity = 0;
  4382.  
  4383. document.body.append(overlay);
  4384.  
  4385. setTimeout(() => {
  4386. overlay.style.opacity = '1';
  4387. });
  4388.  
  4389. const handleClickOutside = (e) => {
  4390. if (e.target === overlay) {
  4391. overlay.style.opacity = 0;
  4392. setTimeout(() => {
  4393. overlay.remove();
  4394. document.removeEventListener(
  4395. 'click',
  4396. handleClickOutside
  4397. );
  4398. }, 300);
  4399. }
  4400. };
  4401.  
  4402. document.addEventListener('click', handleClickOutside);
  4403. },
  4404.  
  4405. handleGoogleAuth(user) {
  4406. fetchedUser++;
  4407. window.gameSettings.user = user;
  4408. if (!client) client = new modClient();
  4409.  
  4410. const waitForInit = () =>
  4411. new Promise((res) => {
  4412. if (client.ws?.readyState === 1 && mods.nick)
  4413. return res(null);
  4414. const i = setInterval(
  4415. () =>
  4416. client.ws?.readyState === 1 &&
  4417. mods.nick &&
  4418. (clearInterval(i), res(null)),
  4419. 50
  4420. );
  4421. });
  4422.  
  4423. waitForInit().then(() =>
  4424. client.send({
  4425. type: 'user',
  4426. content: { ...user, nick: mods.nick },
  4427. })
  4428. );
  4429.  
  4430. const claim = document.getElementById('free-chest-button');
  4431. if (
  4432. fetchedUser === 1 &&
  4433. modSettings.settings.autoClaimCoins &&
  4434. claim?.style.display !== 'none'
  4435. ) {
  4436. setTimeout(() => claim.click(), 500);
  4437. }
  4438. },
  4439.  
  4440. async menu() {
  4441. const mod_menu = document.createElement('div');
  4442. mod_menu.classList.add('mod_menu');
  4443. mod_menu.style.display = 'none';
  4444. mod_menu.style.opacity = '0';
  4445. mod_menu.innerHTML = `
  4446. <div class="mod_menu_wrapper">
  4447. <div class="mod_menu_header">
  4448. <img alt="Header image" src="${headerAnim}" draggable="false" class="header_img" />
  4449. <button type="button" class="modButton" id="closeBtn">
  4450. <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  4451. <path d="M1.6001 14.4L14.4001 1.59998M14.4001 14.4L1.6001 1.59998" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
  4452. </svg>
  4453. </button>
  4454. </div>
  4455. <div class="mod_menu_inner">
  4456. <div class="mod_menu_navbar">
  4457. <button class="mod_nav_btn mod_selected" id="tab_home_btn">
  4458. <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/home%20(1).png" alt="Home Icon" />
  4459. Home
  4460. </button>
  4461. <button class="mod_nav_btn" id="tab_macros_btn">
  4462. <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/keyboard%20(1).png" alt="Keyboard Icon" />
  4463. Macros
  4464. </button>
  4465. <button class="mod_nav_btn" id="tab_game_btn">
  4466. <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/games.png" alt="Game Icon" />
  4467. Game
  4468. </button>
  4469. <button class="mod_nav_btn" id="tab_name_btn">
  4470. <img src="https://raw.githubusercontent.com/Sigmally/SigMod/836ca0f4c25fc6de2e429ee3583be5f860884a0c/images/icons/name.svg" alt="Name Icon" />
  4471. Name
  4472. </button>
  4473. <button class="mod_nav_btn" id="tab_themes_btn">
  4474. <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/theme.png" alt="Themes Icon" />
  4475. Themes
  4476. </button>
  4477. <button class="mod_nav_btn" id="tab_gallery_btn">
  4478. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22"><path fill="#ffffff" d="M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6l96 0 32 0 208 0c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>
  4479. Gallery
  4480. </button>
  4481.  
  4482. <button class="mod_nav_btn" id="tab_friends_btn">
  4483. <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/friends%20(1).png" alt="Friends Icon" />
  4484. Friends
  4485. </button>
  4486. <button class="mod_nav_btn mt-auto" id="tab_info_btn">
  4487. <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/info.png" alt="Info Icon" />
  4488. Info
  4489. </button>
  4490. </div>
  4491. <div class="mod_menu_content">
  4492. <div class="mod_tab" id="mod_home">
  4493. <span class="text-center f-big" id="welcomeUser">Welcome ${
  4494. this.nick || 'Guest'
  4495. }, to the SigMod Client!</span>
  4496. <div class="home-card-row">
  4497. <!-- CARD.1 -->
  4498. <div class="home-card-wrapper">
  4499. <span>Your stats</span>
  4500. <div class="home-card">
  4501. <canvas id="sigmod-stats" width="200" height="100"></canvas>
  4502. </div>
  4503. </div>
  4504. <!-- CARD.2 -->
  4505. <div class="home-card-wrapper">
  4506. <span>Announcements</span>
  4507. <div class="home-card" style="justify-content: start;">
  4508. <div id="mod-announcements">No announcements yet...</div>
  4509. </div>
  4510. </div>
  4511. </div>
  4512. <div class="home-card-row">
  4513. <!-- CARD.3 -->
  4514. <div class="home-card-wrapper">
  4515. <span>Quick access</span>
  4516. <div class="home-card quickAccess scroll" id="mod_qaccess"></div>
  4517. </div>
  4518. <!-- CARD.4 -->
  4519. <div class="home-card-wrapper">
  4520. <span>Mod profile</span>
  4521. <div class="home-card">
  4522. <div class="justify-sb">
  4523. <div class="flex" style="align-items: center; gap: 5px;">
  4524. <img src="https://sigmally.com/assets/images/agario-profile.png" alt="Agar-io profile" width="50" height="50" id="my-profile-img" style="border-radius: 50%;" draggable="false" />
  4525. <span id="my-profile-name">Guest</span>
  4526. </div>
  4527. <span id="my-profile-role">Guest</span>
  4528. </div>
  4529. <div id="my-profile-badges"></div>
  4530. <hr />
  4531. <span id="my-profile-bio" class="scroll">No Bio.</span>
  4532. </div>
  4533. </div>
  4534. </div>
  4535. </div>
  4536. <div class="mod_tab scroll" id="mod_macros" style="display: none">
  4537. <div class="modColItems">
  4538. <div class="macros_wrapper">
  4539. <span class="text-center f-big">Keybindings</span>
  4540. <hr style="border-color: #3F3F3F">
  4541. <div style="justify-content: center;">
  4542. <div class="f-column g-10" style="align-items: center; justify-content: center;">
  4543. <div class="macrosContainer">
  4544. <div class="f-column g-10">
  4545. <label class="macroRow">
  4546. <span class="text">Rapid Feed</span>
  4547. <input type="text" name="rapidFeed" id="modinput1" class="keybinding" value="${
  4548. modSettings.macros
  4549. .keys
  4550. .rapidFeed ||
  4551. ''
  4552. }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4553. </label>
  4554. <label class="macroRow">
  4555. <span class="text">Double Split</span>
  4556. <input type="text" name="splits.double" id="modinput2" class="keybinding" value="${
  4557. modSettings.macros
  4558. .keys.splits
  4559. .double || ''
  4560. }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4561. </label>
  4562. <label class="macroRow">
  4563. <span class="text">Triple Split</span>
  4564. <input type="text" name="splits.triple" id="modinput3" class="keybinding" value="${
  4565. modSettings.macros
  4566. .keys.splits
  4567. .triple || ''
  4568. }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4569. </label>
  4570. <label class="macroRow">
  4571. <span class="text">Respawn</span>
  4572. <input type="text" name="respawn" id="modinput16" class="keybinding" value="${
  4573. modSettings.macros
  4574. .keys
  4575. .respawn || ''
  4576. }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4577. </label>
  4578. </div>
  4579. <div class="f-column g-10">
  4580. <label class="macroRow">
  4581. <span class="text">Quad Split</span>
  4582. <input type="text" name="splits.quad" id="modinput4" class="keybinding" value="${
  4583. modSettings.macros
  4584. .keys.splits
  4585. .quad || ''
  4586. }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4587. </label>
  4588. <label class="macroRow">
  4589. <span class="text">Horizontal Line</span>
  4590. <input type="text" name="line.horizontal" id="modinput5" class="keybinding" value="${
  4591. modSettings.macros
  4592. .keys.line
  4593. .horizontal ||
  4594. ''
  4595. }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4596. </label>
  4597. <label class="macroRow">
  4598. <span class="text">Vertical Line</span>
  4599. <input type="text" name="line.vertical" id="modinput8" class="keybinding" value="${
  4600. modSettings.macros
  4601. .keys.line
  4602. .vertical ||
  4603. ''
  4604. }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4605. </label>
  4606. <label class="macroRow">
  4607. <span class="text">Fixed Line</span>
  4608. <input type="text" name="line.fixed" id="modinput18" class="keybinding" value="${
  4609. modSettings.macros
  4610. .keys.line
  4611. .fixed || ''
  4612. }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4613. </label>
  4614. </div>
  4615. </div>
  4616. </div>
  4617. </div>
  4618. </div>
  4619. <div class="macros_wrapper">
  4620. <span class="text-center f-big">Advanced Keybinding options</span>
  4621. <div class="setting-card-wrapper">
  4622. <div class="setting-card">
  4623. <div class="setting-card-action">
  4624. <span class="setting-card-name">Mouse macros</span>
  4625. </div>
  4626. </div>
  4627. <div class="setting-parameters" style="display: none;">
  4628. <div class="my-5">
  4629. <span class="stats-info-text">Feed or Split with mouse buttons</span>
  4630. </div>
  4631. <div class="stats-line justify-sb">
  4632. <span class="centerXY g-5">
  4633. Mouse Button 1
  4634. <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="24px" height="24px" viewBox="0 0 356.57 356.57"><path d="M181.563,0C120.762,0,59.215,30.525,59.215,88.873V237.5c0,65.658,53.412,119.071,119.071,119.071 c65.658,0,119.07-53.413,119.07-119.071V88.873C297.356,27.809,237.336,0,181.563,0z M274.945,237.5 c0,53.303-43.362,96.657-96.659,96.657c-53.299,0-96.657-43.354-96.657-96.657v-69.513c20.014,6.055,57.685,15.215,102.221,15.215 c28.515,0,59.831-3.809,91.095-14.567V237.5z M274.945,144.794c-81.683,31.233-168.353,7.716-193.316-0.364V88.873 c0-43.168,51.489-66.46,99.934-66.46c46.481,0,93.382,20.547,93.382,66.46V144.794z M190.893,48.389v81.248 c0,6.187-5.023,11.208-11.206,11.208c-6.185,0-11.207-5.021-11.207-11.208V48.389c0-6.186,5.021-11.207,11.207-11.207 C185.869,37.182,190.893,42.203,190.893,48.389z M154.938,40.068V143.73c-15.879,2.802-62.566-10.271-62.566-10.271 C80.233,41.004,154.938,40.068,154.938,40.068z"></path></svg>
  4635. </span>
  4636. <select class="form-control macro-extanded_input" style="padding: 2px; text-align: left; width: 100px" id="m1_macroSelect">
  4637. <option value="none">None</option>
  4638. <option value="fastfeed">Fast Feed</option>
  4639. <option value="split">Split (1)</option>
  4640. <option value="split2">Double Split</option>
  4641. <option value="split3">Triple Split</option>
  4642. <option value="split4">Quad Split</option>
  4643. <option value="freeze">Horizontal Line</option>
  4644. <option value="dTrick">Double Trick</option>
  4645. <option value="sTrick">Self Trick</option>
  4646. </select>
  4647. </div>
  4648. <div class="stats-line justify-sb">
  4649. <span class="centerXY g-5">
  4650. Mouse Button 2
  4651. <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="24px" height="24px" viewBox="0 0 356.57 356.57"><path d="M181.563,0C120.762,0,59.215,30.525,59.215,88.873V237.5c0,65.658,53.412,119.071,119.071,119.071 c65.658,0,119.07-53.413,119.07-119.071V88.873C297.356,27.809,237.336,0,181.563,0z M274.945,237.5 c0,53.303-43.362,96.657-96.659,96.657c-53.299,0-96.657-43.354-96.657-96.657v-69.513c20.014,6.055,57.685,15.215,102.221,15.215 c28.515,0,59.831-3.809,91.095-14.567V237.5z M274.945,144.794c-81.683,31.233-168.353,7.716-193.316-0.364V88.873 c0-43.168,51.489-66.46,99.934-66.46c46.481,0,93.382,20.547,93.382,66.46V144.794z M190.893,48.389v81.248 c0,6.187-5.023,11.208-11.206,11.208c-6.185,0-11.207-5.021-11.207-11.208V48.389c0-6.186,5.021-11.207,11.207-11.207 C185.869,37.182,190.893,42.203,190.893,48.389z M154.938,40.068V143.73c-15.879,2.802-62.566-10.271-62.566-10.271 C80.233,41.004,154.938,40.068,154.938,40.068z"></path></svg>
  4652. </span>
  4653. <select class="form-control" style="padding: 2px; text-align: left; width: 100px" id="m2_macroSelect">
  4654. <option value="none">None</option>
  4655. <option value="fastfeed">Fast Feed</option>
  4656. <option value="split">Split (1)</option>
  4657. <option value="split2">Double Split</option>
  4658. <option value="split3">Triple Split</option>
  4659. <option value="split4">Quad Split</option>
  4660. <option value="freeze">Horizontal Line</option>
  4661. <option value="dTrick">Double Trick</option>
  4662. <option value="sTrick">Self Trick</option>
  4663. </select>
  4664. </div>
  4665. </div>
  4666. </div>
  4667. <div class="setting-card-wrapper">
  4668. <div class="setting-card">
  4669. <div class="setting-card-action">
  4670. <span class="setting-card-name">Rapid feed</span>
  4671. </div>
  4672. </div>
  4673.  
  4674. <div class="setting-parameters" style="display: none;">
  4675. <div class="my-5">
  4676. <span class="stats-info-text">Customize feeding</span>
  4677. </div>
  4678. <div class="stats-line justify-sb">
  4679. <span>Speed</span>
  4680. <div class="justify-sb g-5" style="width: 200px;">
  4681. <span class="mod_badge" id="macroSpeedText">${
  4682. modSettings.macros
  4683. .feedSpeed ||
  4684. '50'
  4685. }ms</span>
  4686. <input
  4687. type="range"
  4688. class="modSlider"
  4689. id="macroSpeed"
  4690. min="5"
  4691. max="100"
  4692. value="${modSettings.macros.feedSpeed || 50}"
  4693. step="5"
  4694. style="width: 134px;"
  4695. />
  4696. </div>
  4697. </div>
  4698. </div>
  4699. </div>
  4700. <div class="setting-card-wrapper">
  4701. <div class="setting-card">
  4702. <div class="setting-card-action">
  4703. <span class="setting-card-name">Linesplits</span>
  4704. </div>
  4705. </div>
  4706.  
  4707. <div class="setting-parameters" style="display: none;">
  4708. <div class="my-5">
  4709. <span class="stats-info-text">Customize linesplits</span>
  4710. </div>
  4711.  
  4712. <div class="stats-line justify-sb">
  4713. <span>Instant split</span>
  4714. <div class="centerXY g-5">
  4715. <span class="modDescText">Splits - </span>
  4716. <input type="text" class="modInput modNumberInput text-center" placeholder="0" title="Splits" style="width: 30px;" id="instant-split-amount" onclick="this.select()" />
  4717. <div class="modCheckbox">
  4718. <input id="toggle-instant-split" type="checkbox" checked />
  4719. <label class="cbx" for="toggle-instant-split"></label>
  4720. </div>
  4721. </div>
  4722. </div>
  4723. </div>
  4724. </div>
  4725. <div class="setting-card-wrapper">
  4726. <div class="setting-card">
  4727. <div class="setting-card-action">
  4728. <span class="setting-card-name">Toggle Settings</span>
  4729. </div>
  4730. </div>
  4731.  
  4732. <div class="setting-parameters" style="display: none;">
  4733. <div class="my-5">
  4734. <span class="stats-info-text">Toggle settings with a keybind.</span>
  4735. </div>
  4736.  
  4737. <div class="stats-line justify-sb">
  4738. <span>Toggle Menu</span>
  4739. <input type="text" name="toggle.menu" id="modinput6" class="keybinding" value="${
  4740. modSettings.macros.keys
  4741. .toggle.menu || ''
  4742. }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4743. </div>
  4744.  
  4745. <div class="stats-line justify-sb">
  4746. <span>Toggle Names</span>
  4747. <input value="${
  4748. modSettings.macros.keys
  4749. .toggle.names || ''
  4750. }" placeholder="..." readonly id="modinput11" name="toggle.names" class="keybinding" onfocus="this.select();">
  4751. </div>
  4752.  
  4753. <div class="stats-line justify-sb">
  4754. <span>Toggle Skins</span>
  4755. <input value="${
  4756. modSettings.macros.keys
  4757. .toggle.skins || ''
  4758. }" placeholder="..." readonly id="modinput12" name="toggle.skins" class="keybinding" onfocus="this.select();">
  4759. </div>
  4760.  
  4761. <div class="stats-line justify-sb">
  4762. <span>Toggle Autorespawn</span>
  4763. <input value="${
  4764. modSettings.macros.keys
  4765. .toggle
  4766. .autoRespawn || ''
  4767. }" placeholder="..." readonly id="modinput13" name="toggle.autoRespawn" class="keybinding" onfocus="this.select();">
  4768. </div>
  4769. </div>
  4770. </div>
  4771. <div class="setting-card-wrapper">
  4772. <div class="setting-card">
  4773. <div class="setting-card-action">
  4774. <span class="setting-card-name">Tricksplits</span>
  4775. </div>
  4776. </div>
  4777. <div class="setting-parameters" style="display: none;">
  4778. <div class="my-5">
  4779. <span class="stats-info-text">Other split options - splits with delay</span>
  4780. </div>
  4781. <div class="stats-line justify-sb">
  4782. <span>Double Trick</span>
  4783. <input value="${
  4784. modSettings.macros.keys
  4785. .splits
  4786. .doubleTrick || ''
  4787. }" placeholder="..." readonly id="modinput14" name="splits.doubleTrick" class="keybinding" onfocus="this.select();">
  4788. </div>
  4789. <div class="stats-line justify-sb">
  4790. <span>Self Trick</span>
  4791. <input value="${
  4792. modSettings.macros.keys
  4793. .splits.selfTrick ||
  4794. ''
  4795. }" placeholder="..." readonly id="modinput15" name="splits.selfTrick" class="keybinding" onfocus="this.select();">
  4796. </div>
  4797. </div>
  4798. </div>
  4799. </div>
  4800. </div>
  4801. </div>
  4802. <div class="mod_tab scroll" id="mod_game" style="display: none">
  4803. <div class="modColItems">
  4804. <div class="modRowItems" style="align-items: start;">
  4805. <div class="modColItems_2">
  4806. <span style="font-style: italic;">~ Game Colors</span>
  4807. <div class="justify-sb w-100 p-5 rounded">
  4808. <span class="text">Map</span>
  4809. <div id="mapColor"></div>
  4810. </div>
  4811. <div class="justify-sb w-100 accent_row p-5 rounded">
  4812. <span class="text">Border</span>
  4813. <div id="borderColor"></div>
  4814. </div>
  4815. <div class="justify-sb w-100 p-5 rounded">
  4816. <span class="text" title="Does not work with jelly physics">Food</span>
  4817. <div id="foodColor"></div>
  4818. </div>
  4819. <div class="justify-sb w-100 accent_row p-5 rounded">
  4820. <span class="text" title="Does not work with jelly physics">Cells</span>
  4821. <div id="cellColor"></div>
  4822. </div>
  4823. </div>
  4824. <div class="modColItems_2">
  4825. <span style="font-style: italic;">~ Game Images</span>
  4826. <div class="justify-sb w-100 p-5 rounded">
  4827. <span class="text">Map Image</span>
  4828. <button class="btn select-btn" id="mapImageSelect"></button>
  4829. </div>
  4830. <div class="justify-sb w-100 accent_row p-5 rounded">
  4831. <span class="text">Virus Image</span>
  4832. <button class="btn select-btn" id="virusImageSelect"></button>
  4833. </div>
  4834. <div class="justify-sb w-100 p-5 rounded">
  4835. <span class="text">Replace Skins</span>
  4836. <button class="btn select-btn" id="skinReplaceSelect"></button>
  4837. </div>
  4838. </div>
  4839. </div>
  4840. <div class="modColItems_2">
  4841. <span style="font-style: italic;">~ Game Settings</span>
  4842. <div class="justify-sb w-100 accent_row p-10 rounded">
  4843. <span class="text">Font</span>
  4844. <div id="font-select-container"></div>
  4845. </div>
  4846. <div class="justify-sb w-100 p-10">
  4847. <span class="text">Names</span>
  4848. <div class="modCheckbox">
  4849. <input id="mod-showNames" type="checkbox" ${
  4850. JSON.parse(
  4851. localStorage.getItem(
  4852. 'settings'
  4853. )
  4854. )?.showNames
  4855. ? 'checked'
  4856. : ''
  4857. } />
  4858. <label class="cbx" for="mod-showNames"></label>
  4859. </div>
  4860. </div>
  4861. <div class="justify-sb w-100 accent_row p-10 rounded">
  4862. <span class="text">Skins</span>
  4863. <div class="modCheckbox">
  4864. <input id="mod-showSkins" type="checkbox" ${
  4865. JSON.parse(
  4866. localStorage.getItem(
  4867. 'settings'
  4868. )
  4869. )?.showSkins
  4870. ? 'checked'
  4871. : ''
  4872. } />
  4873. <label class="cbx" for="mod-showSkins"></label>
  4874. </div>
  4875. </div>
  4876. <div class="justify-sb w-100 p-10 rounded">
  4877. <span title="Long nicknames will be shorten on the leaderboard & ingame">Shorten names</span>
  4878. <div class="modCheckbox">
  4879. <input id="shortenNames" type="checkbox" ${
  4880. modSettings.game
  4881. .shortenNames && 'checked'
  4882. } />
  4883. <label class="cbx" for="shortenNames"></label>
  4884. </div>
  4885. </div>
  4886. <div class="justify-sb w-100 accent_row p-10">
  4887. <span>Text outlines & shadows</span>
  4888. <div class="modCheckbox">
  4889. <input id="removeOutlines" type="checkbox" ${
  4890. modSettings.gameShortenNames &&
  4891. 'checked'
  4892. } />
  4893. <label class="cbx" for="removeOutlines"></label>
  4894. </div>
  4895. </div>
  4896. <div class="justify-sb w-100 rounded" style="padding: 5px 10px;">
  4897. <span class="text">Death screen Position</span>
  4898. <select id="deathScreenPos" class="form-control" style="width: 30%">
  4899. <option value="center" selected>Center</option>
  4900. <option value="left">Left</option>
  4901. <option value="right">Right</option>
  4902. <option value="top">Top</option>
  4903. <option value="bottom">Bottom</option>
  4904. </select>
  4905. </div>
  4906. <div class="justify-sb w-100 accent_row p-10 rounded">
  4907. <span class="text">Play timer</span>
  4908. <div class="modCheckbox">
  4909. <input type="checkbox" id="playTimerToggle" ${
  4910. modSettings.settings
  4911. .playTimer && 'checked'
  4912. } />
  4913. <label class="cbx" for="playTimerToggle"></label>
  4914. </div>
  4915. </div>
  4916. <div class="justify-sb w-100 p-10 rounded">
  4917. <span class="text">Mouse tracker</span>
  4918. <div class="modCheckbox">
  4919. <input type="checkbox" id="mouseTrackerToggle" ${
  4920. modSettings.settings
  4921. .mouseTracker && 'checked'
  4922. } />
  4923. <label class="cbx" for="mouseTrackerToggle"></label>
  4924. </div>
  4925. </div>
  4926. </div>
  4927. <div class="modRowItems justify-sb">
  4928. <span class="text">Reset settings: </span>
  4929. <button class="modButton-secondary" id="resetModSettings" type="button">Reset mod settings</button>
  4930. <button class="modButton-secondary" id="resetGameSettings" type="button">Reset game settings</button>
  4931. </div>
  4932. </div>
  4933. </div>
  4934.  
  4935. <div class="mod_tab scroll" id="mod_name" style="display: none">
  4936. <div class="modColItems">
  4937. <div class="modRowItems justify-sb" style="align-items: start;">
  4938. <div class="f-column g-5" style="align-items: start; justify-content: start;">
  4939. <span class="modTitleText">Name fonts & special characters</span>
  4940. <span class="modDescText">Customize your name with special characters or fonts</span>
  4941. </div>
  4942. <div class="f-column g-5">
  4943. <button class="modButton-secondary" onclick="window.open('https://nickfinder.com', '_blank')">Nickfinder</button>
  4944. <button class="modButton-secondary" onclick="window.open('https://www.stylishnamemaker.com', '_blank')">Stylish Name</button>
  4945. <button class="modButton-secondary" onclick="window.open('https://www.tell.wtf', '_blank')">Tell.wtf</button>
  4946. </div>
  4947. </div>
  4948. <div class="modRowItems justify-sb">
  4949. <div class="f-column g-5">
  4950. <span class="modTitleText">Save names</span>
  4951. <span class="modDescText">Save your names locally</span>
  4952. <div class="flex g-5">
  4953. <input class="modInput" placeholder="Enter a name..." id="saveNameValue" />
  4954. <button id="saveName" class="modButton-secondary f-big" style="border-radius: 5px; background: url('https://sigmally.com/assets/images/icon/plus.svg'); background-color: #111; background-size: 50% auto; background-repeat: no-repeat; background-position: center;"></button>
  4955. </div>
  4956. <div id="savedNames" class="f-column scroll"></div>
  4957. </div>
  4958. <div class="vr"></div>
  4959. <div class="f-column g-5">
  4960. <span class="modTitleText">Name Color</span>
  4961. <span class="modDescText">Customize your name color</span>
  4962. <div class="justify-sb">
  4963. <input type="color" value="#ffffff" id="nameColor" class="colorInput">
  4964. </div>
  4965. <span class="modTitleText">Gradient Name</span>
  4966. <span class="modDescText">Customize your name with a gradient color</span>
  4967. <div class="justify-sb">
  4968. <div class="flex g-2" style="align-items: center">
  4969. <input type="color" value="#ffffff" id="gradientNameColor1" class="colorInput">
  4970. <span>➜ First color</span>
  4971. </div>
  4972. </div>
  4973. <div class="justify-sb">
  4974. <div class="flex g-2" style="align-items: center">
  4975. <input type="color" value="#ffffff" id="gradientNameColor2" class="colorInput">
  4976. <span>➜ Second color</span>
  4977. </div>
  4978. </div>
  4979. </div>
  4980. </div>
  4981. </div>
  4982. </div>
  4983. <div class="mod_tab scroll" id="mod_themes" style="display: none">
  4984. <span>Background presets</span>
  4985. <div class="themes scroll" id="themes">
  4986. <div class="theme" id="createTheme">
  4987. <div class="themeContent" style="background: url('https://sigmally.com/assets/images/icon/plus.svg'); background-size: 50% auto; background-repeat: no-repeat; background-position: center;"></div>
  4988. <div class="themeName text" style="color: #fff">Create</div>
  4989. </div>
  4990. </div>
  4991.  
  4992. <div class="modColItems_2" style="margin-top: 5px;">
  4993. <div class="justify-sb w-100 p-10">
  4994. <span>Input border radius</span>
  4995. <input type="range" class="modSlider" style="width: 40%;" id="theme-inputBorderRadius" max="20" step="2" />
  4996. </div>
  4997. <div class="justify-sb w-100 p-10">
  4998. <span>Menu border radius</span>
  4999. <input type="range" class="modSlider" style="width: 40%;" id="theme-menuBorderRadius" max="50" step="2" />
  5000. </div>
  5001. <div class="justify-sb w-100 p-10">
  5002. <span>Input border</span>
  5003. <div class="modCheckbox">
  5004. <input id="theme-inputBorder" type="checkbox" />
  5005. <label class="cbx" for="theme-inputBorder"></label>
  5006. </div>
  5007. </div>
  5008. </div>
  5009. </div>
  5010. <div class="mod_tab scroll" id="mod_gallery" style="display: none">
  5011. <div class="modColItems_2">
  5012. <label class="macroRow w-100">
  5013. <span class="text">Keybind to save image</span>
  5014. <input type="text" name="saveImage" id="modinput17" class="keybinding" value="${
  5015. modSettings.macros.keys.saveImage ||
  5016. ''
  5017. }" maxlength="1" onfocus="this.select()" placeholder="..." />
  5018. </label>
  5019. </div>
  5020. <div class="modColItems_2">
  5021. <span>Image gallery</span>
  5022. <div class="flex g-5">
  5023. <button class="modButton" id="gallery-download">Download all</button>
  5024. <button class="modButton" id="gallery-delete">Delete all</button>
  5025. </div>
  5026. <div id="image-gallery"></div>
  5027. </div>
  5028. </div>
  5029. <div class="mod_tab scroll centerXY" id="mod_friends" style="display: none">
  5030. <div class="centerXY f-big" style="margin-top: 10px;">Connect and discover new friends with SigMod.</div>
  5031. <div class="centerXY">Do you have problems with your account? Create a support ticket in our <a href="https://discord.gg/RjxeZ2eRGg" target="_blank">Discord server</a>.</div>
  5032.  
  5033. <div class="centerXY f-column g-5" style="height: 300px; width: 165px;">
  5034. <button class="modButton-black" id="createAccount">
  5035. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16"><path fill="#ffffff" d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg>
  5036. Create account
  5037. </button>
  5038. <button class="modButton-black" id="login">
  5039. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16"><path fill="#ffffff" d="M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
  5040. Login
  5041. </button>
  5042. </div>
  5043. </div>
  5044. <div class="mod_tab scroll f-column g-5 text-center" id="mod_info" style="display: none">
  5045. <div class="brand_wrapper">
  5046. <img src="https://czrsd.com/static/sigmod/info_bg_2.jpeg" alt="Info background" class="brand_img" />
  5047. <span>SigMod V${version} by Cursed</span>
  5048. </div>
  5049. <span>Thanks to</span>
  5050. <ul class="brand_credits">
  5051. <li>Jb</li>
  5052. <li>Black</li>
  5053. <li>8y8x</li>
  5054. <li>Dreamz</li>
  5055. <li>Ultra</li>
  5056. <li>Xaris</li>
  5057. <li>Benzofury</li>
  5058. </ul>
  5059. <p>for contributing to the mods evolution into what it is today.</p>
  5060.  
  5061. <div class="sigmod-community">
  5062. <div class="community-header">
  5063. Community
  5064. </div>
  5065. <div class="flex">
  5066. <div class="community-discord-logo">
  5067. <svg width="31" height="30" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top: 3px;">
  5068. <path d="M19.4566 5.35132C21.7154 8.83814 22.8309 12.7712 22.4139 17.299C22.4121 17.3182 22.4026 17.3358 22.3876 17.3473C20.6771 18.666 19.0199 19.4663 17.3859 19.9971C17.3732 20.0011 17.3596 20.0009 17.347 19.9964C17.3344 19.992 17.3234 19.9835 17.3156 19.9721C16.9382 19.4207 16.5952 18.8393 16.2947 18.2287C16.2774 18.1928 16.2932 18.1495 16.3287 18.1353C16.8734 17.9198 17.3914 17.6615 17.8896 17.3557C17.9289 17.3316 17.9314 17.2725 17.8951 17.2442C17.7894 17.1617 17.6846 17.0751 17.5844 16.9885C17.5656 16.9725 17.5404 16.9693 17.5191 16.9801C14.2844 18.5484 10.7409 18.5484 7.46792 16.9801C7.44667 16.9701 7.42142 16.9735 7.40317 16.9893C7.30317 17.0759 7.19817 17.1617 7.09342 17.2442C7.05717 17.2725 7.06017 17.3316 7.09967 17.3557C7.59792 17.6557 8.11592 17.9198 8.65991 18.1363C8.69517 18.1505 8.71192 18.1928 8.69442 18.2287C8.40042 18.8401 8.05742 19.4215 7.67292 19.9729C7.65617 19.9952 7.62867 20.0055 7.60267 19.9971C5.97642 19.4663 4.31917 18.666 2.60868 17.3473C2.59443 17.3358 2.58418 17.3174 2.58268 17.2982C2.23418 13.3817 2.94442 9.41613 5.53717 5.35053C5.54342 5.33977 5.55292 5.33137 5.56392 5.32638C6.83967 4.71165 8.20642 4.25939 9.63491 4.00111C9.66091 3.99691 9.68691 4.00951 9.70041 4.03365C9.87691 4.36176 10.0787 4.78252 10.2152 5.12637C11.7209 4.88489 13.2502 4.88489 14.7874 5.12637C14.9239 4.78987 15.1187 4.36176 15.2944 4.03365C15.3007 4.02167 15.3104 4.01208 15.3221 4.00623C15.3339 4.00039 15.3471 3.99859 15.3599 4.00111C16.7892 4.26018 18.1559 4.71244 19.4306 5.32638C19.4419 5.33137 19.4511 5.33977 19.4566 5.35132ZM10.9807 12.798C10.9964 11.6401 10.1924 10.6821 9.18316 10.6821C8.18217 10.6821 7.38592 11.6317 7.38592 12.798C7.38592 13.9639 8.19792 14.9136 9.18316 14.9136C10.1844 14.9136 10.9807 13.9639 10.9807 12.798ZM17.6261 12.798C17.6419 11.6401 16.8379 10.6821 15.8289 10.6821C14.8277 10.6821 14.0314 11.6317 14.0314 12.798C14.0314 13.9639 14.8434 14.9136 15.8289 14.9136C16.8379 14.9136 17.6261 13.9639 17.6261 12.798Z" fill="white"></path>
  5069. </svg>
  5070. </div>
  5071. <div class="community-discord">
  5072. <a href="https://dsc.gg/sigmodz" target="_blank">dsc.gg/sigmodz</a>
  5073. </div>
  5074. </div>
  5075. </div>
  5076. <div>
  5077. Install <a href="https://greasyfork.org/scripts/483587-sigmally-fixes-v2" target="_blank">Sigmally Fixes</a> for better performance!
  5078. </div>
  5079.  
  5080. <div class="mt-auto flex f-column g-10">
  5081. <div class="brand_yt">
  5082. <div class="yt_wrapper" onclick="window.open('https://www.youtube.com/@sigmallyCursed')">
  5083. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="26" height="26">
  5084. <path d="M12 39c-.549 0-1.095-.15-1.578-.447A3.008 3.008 0 0 1 9 36V12c0-1.041.54-2.007 1.422-2.553a3.014 3.014 0 0 1 2.919-.132l24 12a3.003 3.003 0 0 1 0 5.37l-24 12c-.42.21-.885.315-1.341.315z" fill="#ffffff"></path>
  5085. </svg>
  5086. <span style="font-size: 16px;">Cursed</span>
  5087. </div>
  5088. <div class="yt_wrapper" onclick="window.open('https://www.youtube.com/@sigmally')">
  5089. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="26" height="26">
  5090. <path d="M12 39c-.549 0-1.095-.15-1.578-.447A3.008 3.008 0 0 1 9 36V12c0-1.041.54-2.007 1.422-2.553a3.014 3.014 0 0 1 2.919-.132l24 12a3.003 3.003 0 0 1 0 5.37l-24 12c-.42.21-.885.315-1.341.315z" fill="#ffffff"></path>
  5091. </svg>
  5092. <span style="font-size: 16px;">Sigmally</span>
  5093. </div>
  5094. </div>
  5095. <div class="w-100 centerXY">
  5096. <div class="justify-sb" style="width: 50%;">
  5097. <a href="https://mod.czrsd.com/" target="_blank">Website</a>
  5098. <a href="https://mod.czrsd.com/changelog" target="_blank">Changelog</a>
  5099. <a href="https://mod.czrsd.com/tos" target="_blank">Terms of Service</a>
  5100. </div>
  5101. </div>
  5102. </div>
  5103. </div>
  5104. </div>
  5105. </div>
  5106. </div>
  5107. `;
  5108. document.body.append(mod_menu);
  5109.  
  5110. const styleTag = document.createElement('style');
  5111. styleTag.innerHTML = this.style;
  5112. document.head.append(styleTag);
  5113.  
  5114. this.getSettings();
  5115. this.smallMods();
  5116.  
  5117. mod_menu.addEventListener('click', (event) => {
  5118. if (event.target.closest('.mod_menu_wrapper')) return;
  5119.  
  5120. mod_menu.style.opacity = 0;
  5121. setTimeout(() => {
  5122. mod_menu.style.display = 'none';
  5123. }, 300);
  5124. });
  5125.  
  5126. function openModTab(tabId) {
  5127. const allTabs = document.getElementsByClassName('mod_tab');
  5128. const allTabButtons = document.querySelectorAll('.mod_nav_btn');
  5129.  
  5130. for (const tab of allTabs) {
  5131. tab.style.opacity = 0;
  5132. setTimeout(() => {
  5133. tab.style.display = 'none';
  5134. }, 200);
  5135. }
  5136.  
  5137. allTabButtons.forEach((tabBtn) =>
  5138. tabBtn.classList.remove('mod_selected')
  5139. );
  5140.  
  5141. if (tabId === 'mod_gallery') {
  5142. mods.updateGallery();
  5143. }
  5144.  
  5145. const selectedTab = byId(tabId);
  5146. setTimeout(() => {
  5147. selectedTab.style.display = 'flex';
  5148. setTimeout(() => {
  5149. selectedTab.style.opacity = 1;
  5150. }, 10);
  5151. }, 200);
  5152. this.id && this.classList.add('mod_selected');
  5153. }
  5154.  
  5155. window.openModTab = openModTab;
  5156.  
  5157. document.querySelectorAll('.mod_nav_btn').forEach((tabBtn) => {
  5158. tabBtn.addEventListener('click', function () {
  5159. openModTab.call(
  5160. this,
  5161. this.id.replace('tab_', 'mod_').replace('_btn', '')
  5162. );
  5163. });
  5164. });
  5165.  
  5166. const openMenu = document.querySelectorAll(
  5167. '#clans_and_settings button'
  5168. )[1];
  5169. openMenu.removeAttribute('onclick');
  5170. openMenu.addEventListener('click', () => {
  5171. mod_menu.style.display = 'flex';
  5172. setTimeout(() => {
  5173. mod_menu.style.opacity = 1;
  5174. }, 10);
  5175. });
  5176.  
  5177. const closeModal = byId('closeBtn');
  5178. closeModal.addEventListener('click', () => {
  5179. mod_menu.style.opacity = 0;
  5180. setTimeout(() => {
  5181. mod_menu.style.display = 'none';
  5182. }, 300);
  5183. });
  5184.  
  5185. const fontSelectContainer = document.querySelector(
  5186. '#font-select-container'
  5187. );
  5188.  
  5189. try {
  5190. const fonts = await this.getGoogleFonts();
  5191.  
  5192. const { container: selectElement, selectButton } =
  5193. this.render_sm_select(
  5194. 'Select Font',
  5195. fonts,
  5196. { width: '200px' },
  5197. modSettings.game.font
  5198. );
  5199.  
  5200. const resetFont = document.createElement('button');
  5201. resetFont.classList.add('resetButton');
  5202.  
  5203. resetFont.addEventListener('click', () => {
  5204. if (modSettings.game.font === 'Ubuntu') return;
  5205.  
  5206. modSettings.game.font = 'Ubuntu';
  5207. updateStorage();
  5208. selectElement.value = 'Ubuntu';
  5209.  
  5210. // just change the text of the selectButton
  5211. selectButton.querySelector('span').textContent = 'Ubuntu';
  5212. });
  5213.  
  5214. const container = document.createElement('div');
  5215. container.classList.add('centerXY', 'g-5');
  5216. container.append(resetFont, selectElement);
  5217.  
  5218. selectElement.addEventListener('change', (e) => {
  5219. const font = e.detail;
  5220. const link = document.createElement('link');
  5221. link.href = `https://fonts.googleapis.com/css2?family=${font}&display=swap`;
  5222. link.rel = 'stylesheet';
  5223. document.head.appendChild(link);
  5224.  
  5225. modSettings.game.font = font;
  5226. updateStorage();
  5227. });
  5228.  
  5229. fontSelectContainer.replaceWith(container);
  5230. } catch (e) {
  5231. fontSelectContainer.replaceWith(
  5232. "Couldn't load fonts, try again later."
  5233. );
  5234. console.error(e);
  5235. }
  5236.  
  5237. if (modSettings.game.font !== 'Ubuntu') {
  5238. const link = document.createElement('link');
  5239. link.href = `https://fonts.googleapis.com/css2?family=${modSettings.game.font}&display=swap`;
  5240. link.rel = 'stylesheet';
  5241. document.head.appendChild(link);
  5242. }
  5243.  
  5244. const playTimerToggle = byId('playTimerToggle');
  5245. playTimerToggle.addEventListener('change', () => {
  5246. modSettings.playTimer = playTimerToggle.checked;
  5247. updateStorage();
  5248. });
  5249.  
  5250. const mouseTrackerToggle = byId('mouseTrackerToggle');
  5251. mouseTrackerToggle.addEventListener('change', () => {
  5252. modSettings.mouseTracker = mouseTrackerToggle.checked;
  5253. updateStorage();
  5254. });
  5255.  
  5256. const macroSpeed = byId('macroSpeed');
  5257. const macroSpeedText = byId('macroSpeedText');
  5258.  
  5259. macroSpeed.addEventListener('input', () => {
  5260. modSettings.macros.feedSpeed = macroSpeed.value;
  5261. macroSpeedText.textContent = `${modSettings.macros.feedSpeed.toString()}ms`;
  5262. updateStorage();
  5263. });
  5264.  
  5265. const resetModSettings = byId('resetModSettings');
  5266. resetModSettings.addEventListener('click', () => {
  5267. if (
  5268. confirm(
  5269. 'Are you sure you want to reset the mod settings? A reload is required.'
  5270. )
  5271. ) {
  5272. this.removeStorage(storageName);
  5273. location.reload();
  5274. }
  5275. });
  5276.  
  5277. const resetGameSettings = byId('resetGameSettings');
  5278. resetGameSettings.addEventListener('click', () => {
  5279. if (
  5280. confirm(
  5281. 'Are you sure you want to reset the game settings? Your nick and more settings will be lost. A reload is required.'
  5282. )
  5283. ) {
  5284. window.settings.gameSettings = null;
  5285. this.removeStorage('settings');
  5286. location.reload();
  5287. }
  5288. });
  5289. },
  5290.  
  5291. render_sm_select(label, items, style = {}, defaultValue) {
  5292. const createElement = (tag, styles, text = '') => {
  5293. const el = document.createElement(tag);
  5294. el.textContent = text;
  5295. Object.assign(el.style, styles);
  5296. return el;
  5297. };
  5298.  
  5299. const defaultcontainerStyles = {
  5300. position: 'relative',
  5301. display: 'inline-block',
  5302. };
  5303.  
  5304. const container = createElement('div', {
  5305. ...defaultcontainerStyles,
  5306. ...style,
  5307. });
  5308.  
  5309. const selectButton = document.createElement('div');
  5310. selectButton.style.cssText =
  5311. 'background: rgba(0, 0, 0, 0.4); color: #fff; border: 1px solid #A2A2A2; border-radius: 5px; padding: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;';
  5312.  
  5313. selectButton.innerHTML = `
  5314. <span>${label}</span>
  5315. <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#000000" width="20">
  5316. <path fill="#fafafa" d="M13.098 8H6.902c-.751 0-1.172.754-.708 1.268L9.292 12.7c.36.399 1.055.399 1.416 0l3.098-3.433C14.27 8.754 13.849 8 13.098 8Z"></path>
  5317. </svg>
  5318. `;
  5319.  
  5320. if (defaultValue && items.includes(defaultValue)) {
  5321. selectButton.innerHTML = `<span>${defaultValue}</span> ${
  5322. selectButton.innerHTML.split('</svg>')[1]
  5323. }`;
  5324. }
  5325.  
  5326. container.appendChild(selectButton);
  5327.  
  5328. const dropdown = createElement('div', {
  5329. display: 'none',
  5330. position: 'absolute',
  5331. background: '#111',
  5332. color: '#fafafa',
  5333. borderRadius: '0 0 10px 10px',
  5334. padding: '5px 0',
  5335. zIndex: '999999',
  5336. maxHeight: '200px',
  5337. overflowY: 'auto',
  5338. });
  5339.  
  5340. const searchBox = createElement('input', {
  5341. width: '100%',
  5342. padding: '5px',
  5343. marginBottom: '5px',
  5344. background: '#222',
  5345. border: 'none',
  5346. color: '#fff',
  5347. });
  5348. searchBox.placeholder = 'Search...';
  5349.  
  5350. dropdown.append(searchBox);
  5351.  
  5352. items.forEach((item) => {
  5353. const option = createElement(
  5354. 'div',
  5355. { padding: '5px', cursor: 'pointer' },
  5356. item
  5357. );
  5358. option.onclick = () => {
  5359. selectButton.innerHTML = `
  5360. <span>${item}</span>
  5361. <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#000000" width="20">
  5362. <path fill="#fafafa" d="M13.098 8H6.902c-.751 0-1.172.754-.708 1.268L9.292 12.7c.36.399 1.055.399 1.416 0l3.098-3.433C14.27 8.754 13.849 8 13.098 8Z"></path>
  5363. </svg>`;
  5364. dropdown.style.display = 'none';
  5365. container.dispatchEvent(
  5366. new CustomEvent('change', { detail: item })
  5367. );
  5368. };
  5369. option.onmouseover = (e) =>
  5370. (e.target.style.background = '#555');
  5371. option.onmouseout = (e) =>
  5372. (e.target.style.background = 'transparent');
  5373. dropdown.append(option);
  5374. });
  5375.  
  5376. container.append(dropdown);
  5377.  
  5378. selectButton.onclick = () => {
  5379. dropdown.style.display =
  5380. dropdown.style.display === 'none' ? 'block' : 'none';
  5381. };
  5382.  
  5383. document.onclick = (e) => {
  5384. if (!container.contains(e.target))
  5385. dropdown.style.display = 'none';
  5386. };
  5387.  
  5388. searchBox.addEventListener('input', () => {
  5389. const filter = searchBox.value.toLowerCase();
  5390. Array.from(dropdown.children)
  5391. .slice(1)
  5392. .forEach((item) => {
  5393. item.style.display = item.textContent
  5394. .toLowerCase()
  5395. .includes(filter)
  5396. ? 'block'
  5397. : 'none';
  5398. });
  5399. });
  5400.  
  5401. return { container, selectButton };
  5402. },
  5403.  
  5404. setProfile(user) {
  5405. const img = byId('my-profile-img');
  5406. const name = byId('my-profile-name');
  5407. const role = byId('my-profile-role');
  5408. const bioText = byId('my-profile-bio');
  5409. const badges = byId('my-profile-badges');
  5410.  
  5411. const bio = user.bio ? user.bio : 'No bio.';
  5412.  
  5413. img.src = user.imageURL;
  5414. name.innerText = user.username;
  5415. role.innerText = user.role;
  5416. bioText.innerHTML = bio;
  5417. badges.innerHTML =
  5418. user.badges && user.badges.length > 0
  5419. ? user.badges
  5420. .map(
  5421. (badge) =>
  5422. `<span class="mod_badge">${badge}</span>`
  5423. )
  5424. .join('')
  5425. : '<span>User has no badges.</span>';
  5426.  
  5427. role.classList.add(`${user.role}_role`);
  5428. },
  5429.  
  5430. getSettings() {
  5431. const mod_qaccess = document.querySelector('#mod_qaccess');
  5432. const settingsGrid = document.querySelector(
  5433. '#settings > .checkbox-grid'
  5434. );
  5435. const settingsNames =
  5436. settingsGrid.querySelectorAll('label:not([class])');
  5437. const inputs = settingsGrid.querySelectorAll('input');
  5438.  
  5439. inputs.forEach((checkbox, index) => {
  5440. if (
  5441. checkbox.id === 'showChat' ||
  5442. checkbox.id === 'showMinimap' ||
  5443. checkbox.id === 'darkTheme'
  5444. )
  5445. return;
  5446. const modrow = document.createElement('div');
  5447. modrow.classList.add('justify-sb', 'p-2');
  5448.  
  5449. if (
  5450. checkbox.id === 'showPosition' ||
  5451. checkbox.id === 'showNames' ||
  5452. checkbox.id === 'showSkins'
  5453. ) {
  5454. modrow.style.display = 'none';
  5455. }
  5456.  
  5457. modrow.innerHTML = `
  5458. <span>${settingsNames[index].textContent}</span>
  5459. <div class="modCheckbox" id="${checkbox.id}_wrapper"></div>
  5460. `;
  5461. mod_qaccess.append(modrow);
  5462.  
  5463. const cbWrapper = byId(`${checkbox.id}_wrapper`);
  5464. cbWrapper.appendChild(checkbox);
  5465.  
  5466. cbWrapper.appendChild(
  5467. Object.assign(document.createElement('label'), {
  5468. classList: ['cbx'],
  5469. htmlFor: checkbox.id,
  5470. })
  5471. );
  5472. });
  5473. },
  5474.  
  5475. themes() {
  5476. const elements = [
  5477. '#menu',
  5478. '#title',
  5479. '.top-users__inner',
  5480. '#left-menu',
  5481. '.menu-links',
  5482. '.menu--stats-mode',
  5483. '#left_ad_block',
  5484. '#ad_bottom',
  5485. '.ad-block',
  5486. '#left_ad_block > .right-menu',
  5487. '#text-block > .right-menu',
  5488. '#sigma-pass .connecting__content',
  5489. '#sigma-status',
  5490. '.alert',
  5491. ];
  5492.  
  5493. const customTextElements = [
  5494. '#challenge-coins .alert-heading',
  5495. '#sigma-pass h3',
  5496. '.alert *',
  5497. ];
  5498.  
  5499. let checkInterval;
  5500. const appliedElements = new Set();
  5501.  
  5502. window.themeElements = elements;
  5503.  
  5504. const themeEditor = document.createElement('div');
  5505. themeEditor.classList.add('themeEditor');
  5506. themeEditor.style.display = 'none';
  5507.  
  5508. themeEditor.innerHTML = `
  5509. <div class="theme_editor_header">
  5510. <h3>Theme Editor</h3>
  5511. <button class="btn closeBtn" id="closeThemeEditor">
  5512. <svg width="22" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  5513. <path d="M1.6001 14.4L14.4001 1.59998M14.4001 14.4L1.6001 1.59998" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
  5514. </svg>
  5515. </button>
  5516. </div>
  5517. <hr />
  5518. <main class="theme_editor_content">
  5519. <div class="centerXY" style="justify-content: flex-end;gap: 10px">
  5520. <span class="text">Select Theme Type: </span>
  5521. <select class="form-control" style="background: #222; color: #fff; width: 150px" id="theme-type-select">
  5522. <option>Static Color</option>
  5523. <option>Gradient</option>
  5524. <option>Image / Gif</option>
  5525. </select>
  5526. </div>
  5527.  
  5528. <div id="theme_editor_color" class="theme-editor-tab">
  5529. <div class="centerXY">
  5530. <label for="theme-editor-bgcolorinput" class="text">Background color:</label>
  5531. <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-bgcolorinput"/>
  5532. </div>
  5533. <div class="centerXY">
  5534. <label for="theme-editor-colorinput" class="text">Text color:</label>
  5535. <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-colorinput"/>
  5536. </div>
  5537. <div style="background-color: #000000" class="themes_preview" id="color_preview">
  5538. <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5539. </div>
  5540. <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5541. <input type="text" class="form-control" style="background: #222; color: #fff;" maxlength="15" placeholder="Theme name..." id="colorThemeName"/>
  5542. <button class="btn btn-success" id="saveColorTheme">Save</button>
  5543. </div>
  5544. </div>
  5545.  
  5546.  
  5547. <div id="theme_editor_gradient" class="theme-editor-tab" style="display: none;">
  5548. <div class="centerXY">
  5549. <label for="theme-editor-gcolor1" class="text">Color 1:</label>
  5550. <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-gcolor1"/>
  5551. </div>
  5552. <div class="centerXY">
  5553. <label for="theme-editor-g_color" class="text">Color 2:</label>
  5554. <input type="color" value="#ffffff" class="colorInput whiteBorder_colorInput" id="theme-editor-g_color"/>
  5555. </div>
  5556. <div class="centerXY">
  5557. <label for="theme-editor-gcolor2" class="text">Text Color:</label>
  5558. <input type="color" value="#ffffff" class="colorInput whiteBorder_colorInput" id="theme-editor-gcolor2"/>
  5559. </div>
  5560.  
  5561. <div class="centerXY" style="gap: 10px">
  5562. <label for="gradient-type" class="text">Gradient Type:</label>
  5563. <select id="gradient-type" class="form-control" style="background: #222; color: #fff; width: 120px;">
  5564. <option value="linear">Linear</option>
  5565. <option value="radial">Radial</option>
  5566. </select>
  5567. </div>
  5568.  
  5569. <div id="theme-editor-gradient_angle" class="centerY" style="gap: 10px; width: 100%">
  5570. <label for="g_angle" class="text" id="gradient_angle_text" style="width: 115px;">Angle (0deg):</label>
  5571. <input type="range" id="g_angle" value="0" min="0" max="360">
  5572. </div>
  5573.  
  5574. <div style="background: linear-gradient(0deg, #000, #fff)" class="themes_preview" id="gradient_preview">
  5575. <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5576. </div>
  5577. <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5578. <input type="text" class="form-control" style="background: #222; color: #fff;" placeholder="Theme name..." id="GradientThemeName"/>
  5579. <button class="btn btn-success" id="saveGradientTheme">Save</button>
  5580. </div>
  5581. </div>
  5582.  
  5583.  
  5584.  
  5585. <div id="theme_editor_image" class="theme-editor-tab" style="display: none">
  5586. <div class="centerXY">
  5587. <input type="text" id="theme-editor-imagelink" placeholder="Image / GIF URL (https://i.ibb.co/k6hn4v0/Galaxy-Example.png)" class="form-control" style="background: #222; color: #fff"/>
  5588. </div>
  5589. <div class="centerXY" style="margin: 5px; gap: 5px;">
  5590. <label for="theme-editor-textcolorImage" class="text">Text Color: </label>
  5591. <input type="color" class="colorInput whiteBorder_colorInput" value="#ffffff" id="theme-editor-textcolorImage"/>
  5592. </div>
  5593.  
  5594. <div style="background: url('https://i.ibb.co/k6hn4v0/Galaxy-Example.png'); background-position: center; background-size: cover;" class="themes_preview" id="image_preview">
  5595. <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5596. </div>
  5597. <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5598. <input type="text" class="form-control" style="background: #222; color: #fff;" placeholder="Theme name..." id="imageThemeName"/>
  5599. <button class="btn btn-success" id="saveImageTheme">Save</button>
  5600. </div>
  5601. </div>
  5602. </main>
  5603. `;
  5604.  
  5605. document.body.append(themeEditor);
  5606.  
  5607. setTimeout(() => {
  5608. document
  5609. .querySelectorAll('.stats-btn__share-btn')[1]
  5610. .querySelector('rect')
  5611. .remove();
  5612.  
  5613. const themeTypeSelect = byId('theme-type-select');
  5614. const colorTab = byId('theme_editor_color');
  5615. const gradientTab = byId('theme_editor_gradient');
  5616. const imageTab = byId('theme_editor_image');
  5617. const gradientAngleDiv = byId('theme-editor-gradient_angle');
  5618.  
  5619. themeTypeSelect.addEventListener('change', function () {
  5620. const selectedOption = themeTypeSelect.value;
  5621. switch (selectedOption) {
  5622. case 'Static Color':
  5623. colorTab.style.display = 'flex';
  5624. gradientTab.style.display = 'none';
  5625. imageTab.style.display = 'none';
  5626. break;
  5627. case 'Gradient':
  5628. colorTab.style.display = 'none';
  5629. gradientTab.style.display = 'flex';
  5630. imageTab.style.display = 'none';
  5631. break;
  5632. case 'Image / Gif':
  5633. colorTab.style.display = 'none';
  5634. gradientTab.style.display = 'none';
  5635. imageTab.style.display = 'flex';
  5636. break;
  5637. default:
  5638. colorTab.style.display = 'flex';
  5639. gradientTab.style.display = 'none';
  5640. imageTab.style.display = 'none';
  5641. }
  5642. });
  5643.  
  5644. const colorInputs = document.querySelectorAll(
  5645. '#theme_editor_color .colorInput'
  5646. );
  5647. colorInputs.forEach((input) => {
  5648. input.addEventListener('input', function () {
  5649. const bgColorInput = byId(
  5650. 'theme-editor-bgcolorinput'
  5651. ).value;
  5652. const textColorInput = byId(
  5653. 'theme-editor-colorinput'
  5654. ).value;
  5655.  
  5656. applyColorTheme(bgColorInput, textColorInput);
  5657. });
  5658. });
  5659.  
  5660. const gradientInputs = document.querySelectorAll(
  5661. '#theme_editor_gradient .colorInput'
  5662. );
  5663. gradientInputs.forEach((input) => {
  5664. input.addEventListener('input', function () {
  5665. const gColor1 = byId('theme-editor-gcolor1').value;
  5666. const gColor2 = byId('theme-editor-g_color').value;
  5667. const gTextColor = byId('theme-editor-gcolor2').value;
  5668. const gAngle = byId('g_angle').value;
  5669. const gradientType = byId('gradient-type').value;
  5670.  
  5671. applyGradientTheme(
  5672. gColor1,
  5673. gColor2,
  5674. gTextColor,
  5675. gAngle,
  5676. gradientType
  5677. );
  5678. });
  5679. });
  5680.  
  5681. const imageInputs = document.querySelectorAll(
  5682. '#theme_editor_image .colorInput'
  5683. );
  5684. imageInputs.forEach((input) => {
  5685. input.addEventListener('input', function () {
  5686. const imageLinkInput = byId(
  5687. 'theme-editor-imagelink'
  5688. ).value;
  5689. const textColorImageInput = byId(
  5690. 'theme-editor-textcolorImage'
  5691. ).value;
  5692.  
  5693. let img;
  5694. if (imageLinkInput === '') {
  5695. img = 'https://i.ibb.co/k6hn4v0/Galaxy-Example.png';
  5696. } else {
  5697. img = imageLinkInput;
  5698. }
  5699. applyImageTheme(img, textColorImageInput);
  5700. });
  5701. });
  5702. const image_preview = byId('image_preview');
  5703. const image_link = byId('theme-editor-imagelink');
  5704.  
  5705. let isWriting = false;
  5706. let timeoutId;
  5707.  
  5708. image_link.addEventListener('input', () => {
  5709. if (!isWriting) {
  5710. isWriting = true;
  5711. } else {
  5712. clearTimeout(timeoutId);
  5713. }
  5714.  
  5715. timeoutId = setTimeout(() => {
  5716. const imageLinkInput = image_link.value;
  5717. const textColorImageInput = byId(
  5718. 'theme-editor-textcolorImage'
  5719. ).value;
  5720.  
  5721. let img;
  5722. if (imageLinkInput === '') {
  5723. img = 'https://i.ibb.co/k6hn4v0/Galaxy-Example.png';
  5724. } else {
  5725. img = imageLinkInput;
  5726. }
  5727.  
  5728. applyImageTheme(img, textColorImageInput);
  5729. isWriting = false;
  5730. }, 1000);
  5731. });
  5732.  
  5733. const gradientTypeSelect = byId('gradient-type');
  5734. const angleInput = byId('g_angle');
  5735.  
  5736. gradientTypeSelect.addEventListener('change', function () {
  5737. const selectedType = gradientTypeSelect.value;
  5738. gradientAngleDiv.style.display =
  5739. selectedType === 'linear' ? 'flex' : 'none';
  5740.  
  5741. const gColor1 = byId('theme-editor-gcolor1').value;
  5742. const gColor2 = byId('theme-editor-g_color').value;
  5743. const gTextColor = byId('theme-editor-gcolor2').value;
  5744. const gAngle = byId('g_angle').value;
  5745.  
  5746. applyGradientTheme(
  5747. gColor1,
  5748. gColor2,
  5749. gTextColor,
  5750. gAngle,
  5751. selectedType
  5752. );
  5753. });
  5754.  
  5755. angleInput.addEventListener('input', function () {
  5756. const gradient_angle_text = byId('gradient_angle_text');
  5757. gradient_angle_text.innerText = `Angle (${angleInput.value}deg): `;
  5758. const gColor1 = byId('theme-editor-gcolor1').value;
  5759. const gColor2 = byId('theme-editor-g_color').value;
  5760. const gTextColor = byId('theme-editor-gcolor2').value;
  5761. const gAngle = byId('g_angle').value;
  5762. const gradientType = byId('gradient-type').value;
  5763.  
  5764. applyGradientTheme(
  5765. gColor1,
  5766. gColor2,
  5767. gTextColor,
  5768. gAngle,
  5769. gradientType
  5770. );
  5771. });
  5772.  
  5773. function applyColorTheme(bgColor, textColor) {
  5774. const previewDivs = document.querySelectorAll(
  5775. '#theme_editor_color .themes_preview'
  5776. );
  5777. previewDivs.forEach((previewDiv) => {
  5778. previewDiv.style.backgroundColor = bgColor;
  5779. const textSpan = previewDiv.querySelector('span.text');
  5780. textSpan.style.color = textColor;
  5781. });
  5782. }
  5783.  
  5784. function applyGradientTheme(
  5785. gColor1,
  5786. gColor2,
  5787. gTextColor,
  5788. gAngle,
  5789. gradientType
  5790. ) {
  5791. const previewDivs = document.querySelectorAll(
  5792. '#theme_editor_gradient .themes_preview'
  5793. );
  5794. previewDivs.forEach((previewDiv) => {
  5795. const gradient =
  5796. gradientType === 'linear'
  5797. ? `linear-gradient(${gAngle}deg, ${gColor1}, ${gColor2})`
  5798. : `radial-gradient(circle, ${gColor1}, ${gColor2})`;
  5799. previewDiv.style.background = gradient;
  5800. const textSpan = previewDiv.querySelector('span.text');
  5801. textSpan.style.color = gTextColor;
  5802. });
  5803. }
  5804.  
  5805. function applyImageTheme(imageLink, textColor) {
  5806. const previewDivs = document.querySelectorAll(
  5807. '#theme_editor_image .themes_preview'
  5808. );
  5809. previewDivs.forEach((previewDiv) => {
  5810. previewDiv.style.backgroundImage = `url('${imageLink}')`;
  5811. const textSpan = previewDiv.querySelector('span.text');
  5812. textSpan.style.color = textColor;
  5813. });
  5814. }
  5815.  
  5816. const createTheme = byId('createTheme');
  5817. createTheme.addEventListener('click', () => {
  5818. themeEditor.style.display = 'block';
  5819. });
  5820.  
  5821. const closeThemeEditor = byId('closeThemeEditor');
  5822. closeThemeEditor.addEventListener('click', () => {
  5823. themeEditor.style.display = 'none';
  5824. });
  5825.  
  5826. let themesDiv = byId('themes');
  5827.  
  5828. const saveColorThemeBtn = byId('saveColorTheme');
  5829. const saveGradientThemeBtn = byId('saveGradientTheme');
  5830. const saveImageThemeBtn = byId('saveImageTheme');
  5831.  
  5832. saveColorThemeBtn.addEventListener('click', () => {
  5833. const name = byId('colorThemeName').value;
  5834. const bgColorInput = byId(
  5835. 'theme-editor-bgcolorinput'
  5836. ).value;
  5837. const textColorInput = byId(
  5838. 'theme-editor-colorinput'
  5839. ).value;
  5840.  
  5841. if (name === '') return;
  5842.  
  5843. const theme = {
  5844. name: name,
  5845. background: bgColorInput,
  5846. text: textColorInput,
  5847. };
  5848.  
  5849. const themeCard = document.createElement('div');
  5850. themeCard.classList.add('theme');
  5851. let themeBG;
  5852. if (theme.background.includes('http')) {
  5853. themeBG = `background: url(${
  5854. theme.preview || theme.background
  5855. })`;
  5856. } else {
  5857. themeBG = `background: ${theme.background}`;
  5858. }
  5859. themeCard.innerHTML = `
  5860. <div class="themeContent" style="${themeBG}; background-size: cover; background-position: center"></div>
  5861. <div class="themeName text" style="color: #fff">${theme.name}</div>
  5862. `;
  5863.  
  5864. themeCard.addEventListener('click', () => {
  5865. toggleTheme(theme);
  5866. });
  5867.  
  5868. themeCard.addEventListener('contextmenu', (ev) => {
  5869. ev.preventDefault();
  5870. if (confirm('Do you want to delete this Theme?')) {
  5871. themeCard.remove();
  5872. const themeIndex =
  5873. modSettings.themes.custom.findIndex(
  5874. (addedTheme) =>
  5875. addedTheme.name === theme.name
  5876. );
  5877. if (themeIndex !== -1) {
  5878. modSettings.themes.custom.splice(themeIndex, 1);
  5879. updateStorage();
  5880. }
  5881. }
  5882. });
  5883.  
  5884. themesDiv.appendChild(themeCard);
  5885.  
  5886. modSettings.themes.custom.push(theme);
  5887. updateStorage();
  5888.  
  5889. themeEditor.style.display = 'none';
  5890. themesDiv.scrollTop = themesDiv.scrollHeight;
  5891. });
  5892.  
  5893. saveGradientThemeBtn.addEventListener('click', () => {
  5894. const name = byId('GradientThemeName').value;
  5895. const gColor1 = byId('theme-editor-gcolor1').value;
  5896. const gColor2 = byId('theme-editor-g_color').value;
  5897. const gTextColor = byId('theme-editor-gcolor2').value;
  5898. const gAngle = byId('g_angle').value;
  5899. const gradientType = byId('gradient-type').value;
  5900.  
  5901. if (name === '') return;
  5902.  
  5903. let gradient_radial_linear = () => {
  5904. if (gradientType === 'linear') {
  5905. return `${gradientType}-gradient(${gAngle}deg, ${gColor1}, ${gColor2})`;
  5906. } else if (gradientType === 'radial') {
  5907. return `${gradientType}-gradient(circle, ${gColor1}, ${gColor2})`;
  5908. }
  5909. };
  5910. const theme = {
  5911. name: name,
  5912. background: gradient_radial_linear(),
  5913. text: gTextColor,
  5914. };
  5915.  
  5916. const themeCard = document.createElement('div');
  5917. themeCard.classList.add('theme');
  5918. let themeBG;
  5919. if (theme.background.includes('http')) {
  5920. themeBG = `background: url(${
  5921. theme.preview || theme.background
  5922. })`;
  5923. } else {
  5924. themeBG = `background: ${theme.background}`;
  5925. }
  5926. themeCard.innerHTML = `
  5927. <div class="themeContent" style="${themeBG}; background-size: cover; background-position: center"></div>
  5928. <div class="themeName text" style="color: #fff">${theme.name}</div>
  5929. `;
  5930.  
  5931. themeCard.addEventListener('click', () => {
  5932. toggleTheme(theme);
  5933. });
  5934.  
  5935. themeCard.addEventListener('contextmenu', (ev) => {
  5936. ev.preventDefault();
  5937. if (confirm('Do you want to delete this Theme?')) {
  5938. themeCard.remove();
  5939. const themeIndex =
  5940. modSettings.themes.custom.findIndex(
  5941. (addedTheme) =>
  5942. addedTheme.name === theme.name
  5943. );
  5944. if (themeIndex !== -1) {
  5945. modSettings.themes.custom.splice(themeIndex, 1);
  5946. updateStorage();
  5947. }
  5948. }
  5949. });
  5950.  
  5951. themesDiv.appendChild(themeCard);
  5952.  
  5953. modSettings.themes.custom.push(theme);
  5954. updateStorage();
  5955.  
  5956. themeEditor.style.display = 'none';
  5957. themesDiv.scrollTop = themesDiv.scrollHeight;
  5958. });
  5959.  
  5960. saveImageThemeBtn.addEventListener('click', () => {
  5961. const name = byId('imageThemeName').value;
  5962. const imageLink = byId('theme-editor-imagelink').value;
  5963. const textColorImageInput = byId(
  5964. 'theme-editor-textcolorImage'
  5965. ).value;
  5966.  
  5967. if (name === '' || imageLink === '') return;
  5968.  
  5969. const theme = {
  5970. name: name,
  5971. background: imageLink,
  5972. text: textColorImageInput,
  5973. };
  5974.  
  5975. const themeCard = document.createElement('div');
  5976. themeCard.classList.add('theme');
  5977. let themeBG;
  5978. if (theme.background.includes('http')) {
  5979. themeBG = `background: url(${
  5980. theme.preview || theme.background
  5981. })`;
  5982. } else {
  5983. themeBG = `background: ${theme.background}`;
  5984. }
  5985. themeCard.innerHTML = `
  5986. <div class="themeContent" style="${themeBG}; background-size: cover; background-position: center"></div>
  5987. <div class="themeName text" style="color: #fff">${theme.name}</div>
  5988. `;
  5989.  
  5990. themeCard.addEventListener('click', () => {
  5991. toggleTheme(theme);
  5992. });
  5993.  
  5994. themeCard.addEventListener('contextmenu', (ev) => {
  5995. ev.preventDefault();
  5996. if (confirm('Do you want to delete this Theme?')) {
  5997. themeCard.remove();
  5998. const themeIndex =
  5999. modSettings.themes.custom.findIndex(
  6000. (addedTheme) =>
  6001. addedTheme.name === theme.name
  6002. );
  6003. if (themeIndex !== -1) {
  6004. modSettings.themes.custom.splice(themeIndex, 1);
  6005. updateStorage();
  6006. }
  6007. }
  6008. });
  6009.  
  6010. themesDiv.appendChild(themeCard);
  6011.  
  6012. modSettings.themes.custom.push(theme);
  6013. updateStorage();
  6014.  
  6015. themeEditor.style.display = 'none';
  6016. themesDiv.scrollTop = themesDiv.scrollHeight;
  6017. });
  6018. });
  6019.  
  6020. const b_inner = document.querySelector('.body__inner');
  6021. let bodyColorElements = b_inner.querySelectorAll(
  6022. '.body__inner > :not(.body__inner), #s-skin-select-icon-text'
  6023. );
  6024.  
  6025. const toggleColor = (element, background, text) => {
  6026. let image = `url("${background}")`;
  6027. if (background.includes('http')) {
  6028. element.style.background = image;
  6029. element.style.backgroundPosition = 'center';
  6030. element.style.backgroundSize = 'cover';
  6031. element.style.backgroundRepeat = 'no-repeat';
  6032. } else {
  6033. element.style.background = background;
  6034. element.style.backgroundRepeat = 'no-repeat';
  6035. }
  6036. element.style.color = text;
  6037. };
  6038.  
  6039. const openSVG = document.querySelector(
  6040. '#clans_and_settings > Button:nth-of-type(2) > svg'
  6041. );
  6042. const openSVGPath = openSVG.querySelector('path');
  6043. openSVG.setAttribute('width', '36');
  6044. openSVG.setAttribute('height', '36');
  6045.  
  6046. const applyThemeToElement = (el, theme) => {
  6047. if (el.matches('#title')) {
  6048. el.style.color = theme.text;
  6049. } else {
  6050. toggleColor(el, theme.background, theme.text);
  6051. }
  6052. appliedElements.add(el);
  6053. };
  6054.  
  6055. const toggleTheme = (theme) => {
  6056. try {
  6057. if (checkInterval) clearInterval(checkInterval);
  6058. appliedElements.clear();
  6059.  
  6060. const applyTheme = () => {
  6061. let allApplied = true;
  6062.  
  6063. elements.forEach((selector) => {
  6064. const elements =
  6065. document.querySelectorAll(selector);
  6066. elements.forEach((el) => {
  6067. if (el && !appliedElements.has(el)) {
  6068. applyThemeToElement(el, theme);
  6069. allApplied = false;
  6070. }
  6071. });
  6072. });
  6073.  
  6074. customTextElements.forEach((qs) => {
  6075. document.querySelectorAll(qs).forEach((el) => {
  6076. if (!appliedElements.has(el)) {
  6077. el.style.setProperty(
  6078. 'color',
  6079. theme.text,
  6080. 'important'
  6081. );
  6082. appliedElements.add(el);
  6083. allApplied = false;
  6084. }
  6085. });
  6086. });
  6087.  
  6088. bodyColorElements.forEach((el) => {
  6089. if (!appliedElements.has(el)) {
  6090. el.style.color = theme.text;
  6091. appliedElements.add(el);
  6092. allApplied = false;
  6093. }
  6094. });
  6095.  
  6096. if (allApplied) {
  6097. clearInterval(checkInterval);
  6098. return;
  6099. }
  6100.  
  6101. const isBright = (color) => {
  6102. if (!color.startsWith('#') || color.length !== 7)
  6103. return false;
  6104. const r = parseInt(color.slice(1, 3), 16);
  6105. const g = parseInt(color.slice(3, 5), 16);
  6106. const b = parseInt(color.slice(5, 7), 16);
  6107. return r * 0.299 + g * 0.587 + b * 0.114 > 186;
  6108. };
  6109.  
  6110. openSVGPath.setAttribute(
  6111. 'fill',
  6112. isBright(theme.text) ? theme.text : '#222'
  6113. );
  6114.  
  6115. modSettings.themes.current = theme.name;
  6116. updateStorage();
  6117. };
  6118.  
  6119. checkInterval = setInterval(applyTheme, 100);
  6120. } catch (e) {
  6121. console.error(e);
  6122. }
  6123. };
  6124.  
  6125. const themes = (window.themes = {
  6126. defaults: [
  6127. {
  6128. name: 'Dark',
  6129. background: '#151515',
  6130. text: '#FFFFFF',
  6131. },
  6132. {
  6133. name: 'White',
  6134. background: '#ffffff',
  6135. text: '#000000',
  6136. },
  6137. {
  6138. name: 'Transparent',
  6139. background: 'rgba(0, 0, 0,0)',
  6140. text: '#FFFFFF',
  6141. },
  6142. ],
  6143. orderly: [
  6144. {
  6145. name: 'THC',
  6146. background: 'linear-gradient(160deg, #9BEC7A, #117500)',
  6147. text: '#000000',
  6148. },
  6149. {
  6150. name: '4 AM',
  6151. background: 'linear-gradient(160deg, #8B0AE1, #111)',
  6152. text: '#FFFFFF',
  6153. },
  6154. {
  6155. name: 'OTO',
  6156. background: 'linear-gradient(160deg, #A20000, #050505)',
  6157. text: '#FFFFFF',
  6158. },
  6159. {
  6160. name: 'Gaming',
  6161. background:
  6162. 'https://i.ibb.co/DwKkQfh/BG-1-lower-quality.jpg',
  6163. text: '#FFFFFF',
  6164. },
  6165. {
  6166. name: 'Shapes',
  6167. background: 'https://i.ibb.co/h8TmVyM/BG-2.png',
  6168. preview:
  6169. 'https://czrsd.com/static/sigmod/themes/BG-2.jpg',
  6170. text: '#FFFFFF',
  6171. },
  6172. {
  6173. name: 'Blue',
  6174. background: 'https://i.ibb.co/9yQBfWj/BG-3.png',
  6175. preview:
  6176. 'https://czrsd.com/static/sigmod/themes/BG-3.jpg',
  6177. text: '#FFFFFF',
  6178. },
  6179. {
  6180. name: 'Blue - 2',
  6181. background: 'https://i.ibb.co/7RJvNCX/BG-4.png',
  6182. preview:
  6183. 'https://czrsd.com/static/sigmod/themes/BG-4.jpg',
  6184. text: '#FFFFFF',
  6185. },
  6186. {
  6187. name: 'Purple',
  6188. background: 'https://i.ibb.co/vxY15Tv/BG-5.png',
  6189. preview:
  6190. 'https://czrsd.com/static/sigmod/themes/BG-5.jpg',
  6191. text: '#FFFFFF',
  6192. },
  6193. {
  6194. name: 'Orange Blue',
  6195. background: 'https://i.ibb.co/99nfFBN/BG-6.png',
  6196. preview:
  6197. 'https://czrsd.com/static/sigmod/themes/BG-6.jpg',
  6198. text: '#FFFFFF',
  6199. },
  6200. {
  6201. name: 'Gradient',
  6202. background: 'https://i.ibb.co/hWMLwLS/BG-7.png',
  6203. preview:
  6204. 'https://czrsd.com/static/sigmod/themes/BG-7.jpg',
  6205. text: '#FFFFFF',
  6206. },
  6207. {
  6208. name: 'Sky',
  6209. background: 'https://i.ibb.co/P4XqDFw/BG-9.png',
  6210. preview:
  6211. 'https://czrsd.com/static/sigmod/themes/BG-9.jpg',
  6212. text: '#000000',
  6213. },
  6214. {
  6215. name: 'Sunset',
  6216. background: 'https://i.ibb.co/0BVbYHC/BG-10.png',
  6217. preview:
  6218. 'https://czrsd.com/static/sigmod/themes/BG-10.jpg',
  6219. text: '#FFFFFF',
  6220. },
  6221. {
  6222. name: 'Galaxy',
  6223. background: 'https://i.ibb.co/MsssDKP/Galaxy.png',
  6224. preview:
  6225. 'https://czrsd.com/static/sigmod/themes/Galaxy.jpg',
  6226. text: '#FFFFFF',
  6227. },
  6228. {
  6229. name: 'Planet',
  6230. background: 'https://i.ibb.co/KLqWM32/Planet.png',
  6231. preview:
  6232. 'https://czrsd.com/static/sigmod/themes/Planet.jpg',
  6233. text: '#FFFFFF',
  6234. },
  6235. {
  6236. name: 'colorful',
  6237. background: 'https://i.ibb.co/VqtB3TX/colorful.png',
  6238. preview:
  6239. 'https://czrsd.com/static/sigmod/themes/colorful.jpg',
  6240. text: '#FFFFFF',
  6241. },
  6242. {
  6243. name: 'Sunset - 2',
  6244. background: 'https://i.ibb.co/TLp2nvv/Sunset.png',
  6245. preview:
  6246. 'https://czrsd.com/static/sigmod/themes/Sunset.jpg',
  6247. text: '#FFFFFF',
  6248. },
  6249. {
  6250. name: 'Epic',
  6251. background: 'https://i.ibb.co/kcv4tvn/Epic.png',
  6252. preview:
  6253. 'https://czrsd.com/static/sigmod/themes/Epic.jpg',
  6254. text: '#FFFFFF',
  6255. },
  6256. {
  6257. name: 'Galaxy - 2',
  6258. background: 'https://i.ibb.co/smRs6V0/galaxy.png',
  6259. preview:
  6260. 'https://czrsd.com/static/sigmod/themes/galaxy2.jpg',
  6261. text: '#FFFFFF',
  6262. },
  6263. {
  6264. name: 'Cloudy',
  6265. background: 'https://i.ibb.co/MCW7Bcd/cloudy.png',
  6266. preview:
  6267. 'https://czrsd.com/static/sigmod/themes/cloudy.jpg',
  6268. text: '#000000',
  6269. },
  6270. ],
  6271. });
  6272.  
  6273. function createThemeCard(theme) {
  6274. const themeCard = document.createElement('div');
  6275. themeCard.classList.add('theme');
  6276. let themeBG;
  6277. if (theme.background.includes('http')) {
  6278. themeBG = `background: url(${
  6279. theme.preview || theme.background
  6280. })`;
  6281. } else {
  6282. themeBG = `background: ${theme.background}`;
  6283. }
  6284. themeCard.innerHTML = `
  6285. <div class="themeContent" style="${themeBG}; background-size: cover; background-position: center"></div>
  6286. <div class="themeName text" style="color: #fff">${theme.name}</div>
  6287. `;
  6288.  
  6289. themeCard.addEventListener('click', () => {
  6290. toggleTheme(theme);
  6291. });
  6292.  
  6293. if (modSettings.themes.custom.includes(theme)) {
  6294. themeCard.addEventListener(
  6295. 'contextmenu',
  6296. (ev) => {
  6297. ev.preventDefault();
  6298. if (confirm('Do you want to delete this Theme?')) {
  6299. themeCard.remove();
  6300. const themeIndex =
  6301. modSettings.themes.custom.findIndex(
  6302. (addedTheme) =>
  6303. addedTheme.name === theme.name
  6304. );
  6305. if (themeIndex !== -1) {
  6306. modSettings.themes.custom.splice(
  6307. themeIndex,
  6308. 1
  6309. );
  6310. updateStorage();
  6311. }
  6312. }
  6313. },
  6314. false
  6315. );
  6316. }
  6317.  
  6318. return themeCard;
  6319. }
  6320.  
  6321. const themesContainer = byId('themes');
  6322.  
  6323. themes.defaults.forEach((theme) => {
  6324. const themeCard = createThemeCard(theme);
  6325. themesContainer.append(themeCard);
  6326. });
  6327.  
  6328. const orderlyThemes = [
  6329. ...themes.orderly,
  6330. ...modSettings.themes.custom,
  6331. ];
  6332. orderlyThemes.sort((a, b) => a.name.localeCompare(b.name));
  6333. orderlyThemes.forEach((theme) => {
  6334. const themeCard = createThemeCard(theme);
  6335. themesContainer.appendChild(themeCard);
  6336. });
  6337.  
  6338. const savedTheme = modSettings.themes.current;
  6339. if (savedTheme) {
  6340. let selectedTheme;
  6341. selectedTheme = themes.defaults.find(
  6342. (theme) => theme.name === savedTheme
  6343. );
  6344. if (!selectedTheme) {
  6345. selectedTheme =
  6346. themes.orderly.find(
  6347. (theme) => theme.name === savedTheme
  6348. ) ||
  6349. modSettings.themes.custom.find(
  6350. (theme) => theme.name === savedTheme
  6351. );
  6352. }
  6353.  
  6354. if (selectedTheme) {
  6355. toggleTheme(selectedTheme);
  6356. }
  6357. }
  6358.  
  6359. const inputBorderRadius = byId('theme-inputBorderRadius');
  6360. const menuBorderRadius = byId('theme-menuBorderRadius');
  6361. const inputBorder = byId('theme-inputBorder');
  6362.  
  6363. function setCSS(key, value, targets, property) {
  6364. modSettings.themes[key] = value;
  6365. targets.forEach((target) => {
  6366. document
  6367. .querySelectorAll(target)
  6368. .forEach((el) => (el.style[property] = value));
  6369. });
  6370. updateStorage();
  6371. }
  6372.  
  6373. inputBorderRadius.value = modSettings.themes.inputBorderRadius
  6374. ? modSettings.themes.inputBorderRadius.replace('px', '')
  6375. : '4';
  6376. menuBorderRadius.value = modSettings.themes.menuBorderRadius
  6377. ? modSettings.themes.menuBorderRadius.replace('px', '')
  6378. : '15';
  6379. inputBorder.checked = modSettings.themes.inputBorder
  6380. ? modSettings.themes.inputBorder === '1px'
  6381. : '1px';
  6382.  
  6383. setCSS(
  6384. 'inputBorderRadius',
  6385. `${inputBorderRadius.value}px`,
  6386. ['.form-control'],
  6387. 'borderRadius'
  6388. );
  6389. setCSS(
  6390. 'menuBorderRadius',
  6391. `${menuBorderRadius.value}px`,
  6392. [...elements, '.text-block'],
  6393. 'borderRadius'
  6394. );
  6395. setCSS(
  6396. 'inputBorder',
  6397. inputBorder.checked ? '1px' : '0px',
  6398. ['.form-control'],
  6399. 'borderWidth'
  6400. );
  6401.  
  6402. inputBorderRadius.addEventListener('input', () =>
  6403. setCSS(
  6404. 'inputBorderRadius',
  6405. `${inputBorderRadius.value}px`,
  6406. ['.form-control'],
  6407. 'borderRadius'
  6408. )
  6409. );
  6410. menuBorderRadius.addEventListener('input', () =>
  6411. setCSS(
  6412. 'menuBorderRadius',
  6413. `${menuBorderRadius.value}px`,
  6414. [...elements, '.text-block'],
  6415. 'borderRadius'
  6416. )
  6417. );
  6418. inputBorder.addEventListener('input', () =>
  6419. setCSS(
  6420. 'inputBorder',
  6421. inputBorder.checked ? '1px' : '0px',
  6422. ['.form-control'],
  6423. 'borderWidth'
  6424. )
  6425. );
  6426. },
  6427.  
  6428. chat() {
  6429. // disable old chat
  6430. setTimeout(() => {
  6431. const showChat = document.querySelector('#showChat');
  6432. if (showChat && showChat.checked) {
  6433. showChat.click();
  6434. }
  6435. if (showChat) {
  6436. showChat.remove();
  6437. }
  6438. }, 300);
  6439.  
  6440. // If someone uninstalls the mod, the chat is visible again
  6441. window.addEventListener('beforeunload', () => {
  6442. localStorage.setItem(
  6443. 'settings',
  6444. JSON.stringify({
  6445. ...JSON.parse(localStorage.getItem('settings')),
  6446. showChat: true,
  6447. })
  6448. );
  6449. });
  6450.  
  6451. const chatDiv = document.createElement('div');
  6452. chatDiv.classList.add('modChat');
  6453. chatDiv.innerHTML = `
  6454. <div class="modChat__inner">
  6455. <button id="scroll-down-btn" class="modButton">↓</button>
  6456. <div class="modchat-chatbuttons">
  6457. <button class="chatButton" id="mainchat">Main</button>
  6458. <button class="chatButton" id="partychat">Party</button>
  6459. <span class="tagText"></span>
  6460. </div>
  6461. <div id="mod-messages" class="scroll"></div>
  6462. <div id="chatInputContainer">
  6463. <input type="text" id="chatSendInput" class="chatInput" placeholder="message..." maxlength="250" minlength="1" />
  6464. <button class="chatButton" id="openChatSettings">
  6465. <svg width="15" height="15" viewBox="0 0 20 20" fill="#fff" xmlns="http://www.w3.org/2000/svg">
  6466. <path d="M17.4249 7.45169C15.7658 7.45169 15.0874 6.27836 15.9124 4.83919C16.3891 4.00503 16.1049 2.94169 15.2708 2.46503L13.6849 1.55753C12.9608 1.12669 12.0258 1.38336 11.5949 2.10753L11.4941 2.28169C10.6691 3.72086 9.31242 3.72086 8.47825 2.28169L8.37742 2.10753C7.96492 1.38336 7.02992 1.12669 6.30575 1.55753L4.71992 2.46503C3.88575 2.94169 3.60158 4.01419 4.07825 4.84836C4.91242 6.27836 4.23408 7.45169 2.57492 7.45169C1.62159 7.45169 0.833252 8.23086 0.833252 9.19336V10.8067C0.833252 11.76 1.61242 12.5484 2.57492 12.5484C4.23408 12.5484 4.91242 13.7217 4.07825 15.1609C3.60158 15.995 3.88575 17.0584 4.71992 17.535L6.30575 18.4425C7.02992 18.8734 7.96492 18.6167 8.39575 17.8925L8.49658 17.7184C9.32158 16.2792 10.6783 16.2792 11.5124 17.7184L11.6133 17.8925C12.0441 18.6167 12.9791 18.8734 13.7033 18.4425L15.2891 17.535C16.1233 17.0584 16.4074 15.9859 15.9307 15.1609C15.0966 13.7217 15.7749 12.5484 17.4341 12.5484C18.3874 12.5484 19.1758 11.7692 19.1758 10.8067V9.19336C19.1666 8.24003 18.3874 7.45169 17.4249 7.45169ZM9.99992 12.9792C8.35908 12.9792 7.02075 11.6409 7.02075 10C7.02075 8.35919 8.35908 7.02086 9.99992 7.02086C11.6408 7.02086 12.9791 8.35919 12.9791 10C12.9791 11.6409 11.6408 12.9792 9.99992 12.9792Z" fill="#fff"></path>
  6467. </svg>
  6468. </button>
  6469. <button class="chatButton" id="openEmojiMenu">😎</button>
  6470. <button id="sendButton" class="chatButton">
  6471. Send
  6472. <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/send.svg" width="20" height="20" draggable="false"/>
  6473. </button>
  6474. </div>
  6475. </div>
  6476. `;
  6477. document.body.append(chatDiv);
  6478.  
  6479. const chatContainer = byId('mod-messages');
  6480. const scrollDownButton = byId('scroll-down-btn');
  6481.  
  6482. chatContainer.addEventListener('scroll', () => {
  6483. if (
  6484. chatContainer.scrollHeight - chatContainer.scrollTop >
  6485. 300
  6486. ) {
  6487. scrollDownButton.style.display = 'block';
  6488. }
  6489. if (
  6490. chatContainer.scrollHeight - chatContainer.scrollTop <
  6491. 299 &&
  6492. scrollDownButton.style.display === 'block'
  6493. ) {
  6494. scrollDownButton.style.display = 'none';
  6495. }
  6496. });
  6497.  
  6498. scrollDownButton.addEventListener('click', () => {
  6499. chatContainer.scrollTop = chatContainer.scrollHeight;
  6500. });
  6501.  
  6502. const messageCount = chatContainer.children.length;
  6503. const messageLimit = modSettings.chat.limit;
  6504. if (messageCount > messageLimit) {
  6505. const messagesToRemove = messageCount - messageLimit;
  6506. for (let i = 0; i < messagesToRemove; i++) {
  6507. chatContainer.removeChild(chatContainer.firstChild);
  6508. }
  6509. }
  6510.  
  6511. const main = byId('mainchat');
  6512. const party = byId('partychat');
  6513. main.addEventListener('click', () => {
  6514. if (modSettings.chat.showClientChat) {
  6515. byId('mod-messages').innerHTML = '';
  6516. modSettings.chat.showClientChat = false;
  6517. updateStorage();
  6518. }
  6519. });
  6520. party.addEventListener('click', () => {
  6521. if (!modSettings.chat.showClientChat) {
  6522. modSettings.chat.showClientChat = true;
  6523. updateStorage();
  6524. }
  6525. const modMessages = byId('mod-messages');
  6526. if (!modSettings.settings.tag) {
  6527. modMessages.innerHTML = `
  6528. <div class="message">
  6529. <span>
  6530. <span style="color: #5a44eb" class="message_name">[SERVER]</span>: You need to be in a tag to use the SigMod party chat.
  6531. </span>
  6532. </div>
  6533. `;
  6534. } else {
  6535. modMessages.innerHTML = `
  6536. <div class="message">
  6537. <span>
  6538. <span style="color: #5a44eb" class="message_name">[SERVER]</span>: Welcome to the SigMod party chat!
  6539. </span>
  6540. </div>
  6541. `;
  6542. }
  6543. });
  6544.  
  6545. if (modSettings.chat.showClientChat) {
  6546. const modMessages = byId('mod-messages');
  6547. if (modMessages.children.length > 1) return;
  6548. modMessages.innerHTML = `
  6549. <div class="message">
  6550. <span>
  6551. <span style="color: #5a44eb" class="message_name">[SERVER]</span>: Welcome to the SigMod party chat!
  6552. </span>
  6553. </div>
  6554. `;
  6555. }
  6556.  
  6557. const text = byId('chatSendInput');
  6558. const send = byId('sendButton');
  6559.  
  6560. send.addEventListener('click', () => {
  6561. let val = text.value;
  6562. if (val === '') return;
  6563.  
  6564. if (modSettings.chat.showClientChat) {
  6565. // party chat message
  6566. client.send({
  6567. type: 'chat-message',
  6568. content: {
  6569. message: val,
  6570. },
  6571. });
  6572. } else {
  6573. // Sigmally chat message - split text into parts if message is
  6574. // longer than 15 characters.
  6575. if (val.length > 15) {
  6576. const parts = [];
  6577. let currentPart = '';
  6578.  
  6579. val.split(' ').forEach((word) => {
  6580. // Split the input value into individual words
  6581. if (currentPart.length + word.length + 1 <= 15) {
  6582. // if adding the current word to the current part does not exceed the length limit
  6583. currentPart += (currentPart ? ' ' : '') + word;
  6584. // add the current word to the current part with a space separator
  6585. } else {
  6586. // if adding the current word exceeds the length limit
  6587. parts.push(currentPart);
  6588. currentPart = word;
  6589. }
  6590. });
  6591.  
  6592. if (currentPart) {
  6593. // Push the last current part to the parts array
  6594. parts.push(currentPart);
  6595. }
  6596.  
  6597. let index = 0;
  6598. const sendPart = () => {
  6599. // If there are still parts left to send
  6600. if (index < parts.length) {
  6601. window.sendChat(parts[index]);
  6602. index++;
  6603. setTimeout(sendPart, 1000); // 1s cooldown from sigmally
  6604. }
  6605. };
  6606.  
  6607. sendPart();
  6608. } else {
  6609. window.sendChat(val);
  6610. }
  6611. }
  6612.  
  6613. text.value = '';
  6614. text.blur();
  6615. });
  6616.  
  6617. this.chatSettings();
  6618. this.emojiMenu();
  6619.  
  6620. const chatSettingsContainer = document.querySelector(
  6621. '.chatSettingsContainer'
  6622. );
  6623. const emojisContainer = document.querySelector('.emojisContainer');
  6624.  
  6625. byId('openChatSettings').addEventListener('click', () => {
  6626. if (chatSettingsContainer.classList.contains('hidden_full')) {
  6627. chatSettingsContainer.classList.remove('hidden_full');
  6628. emojisContainer.classList.add('hidden_full');
  6629. } else {
  6630. chatSettingsContainer.classList.add('hidden_full');
  6631. }
  6632. });
  6633.  
  6634. const scrollUpButton = byId('scroll-down-btn');
  6635. let focused = false;
  6636. let typed = false;
  6637.  
  6638. document.addEventListener('keydown', (e) => {
  6639. if (e.key === 'Enter' && text.value.length > 0) {
  6640. send.click();
  6641. focused = false;
  6642. scrollUpButton.click();
  6643. } else if (e.key === 'Enter') {
  6644. if (
  6645. document.activeElement.tagName === 'INPUT' ||
  6646. document.activeElement.tagName === 'TEXTAREA'
  6647. )
  6648. return;
  6649.  
  6650. focused ? text.blur() : text.focus();
  6651. focused = !focused;
  6652. }
  6653. });
  6654.  
  6655. text.addEventListener('input', () => {
  6656. typed = text.value.length > 1;
  6657. });
  6658.  
  6659. text.addEventListener('blur', () => {
  6660. focused = false;
  6661. });
  6662.  
  6663. text.addEventListener('keydown', (e) => {
  6664. const key = e.key.toLowerCase();
  6665. if (key === 'w') {
  6666. e.stopPropagation();
  6667. }
  6668.  
  6669. if (key === ' ') {
  6670. e.stopPropagation();
  6671. }
  6672. });
  6673.  
  6674. // switch to compact chat
  6675. const chatElements = [
  6676. '.modChat',
  6677. '.emojisContainer',
  6678. '.chatSettingsContainer',
  6679. ];
  6680.  
  6681. const emojiBtn = byId('openEmojiMenu');
  6682. const compactChat = byId('compactChat');
  6683. compactChat.addEventListener('change', () => {
  6684. compactChat.checked ? compactMode() : defaultMode();
  6685. });
  6686.  
  6687. function compactMode() {
  6688. chatElements.forEach((querySelector) => {
  6689. const el = document.querySelector(querySelector);
  6690. if (el) {
  6691. el.classList.add('mod-compact');
  6692. }
  6693. });
  6694. emojiBtn.style.display = 'none';
  6695.  
  6696. modSettings.chat.compact = true;
  6697. updateStorage();
  6698. }
  6699.  
  6700. function defaultMode() {
  6701. chatElements.forEach((querySelector) => {
  6702. const el = document.querySelector(querySelector);
  6703. if (el) {
  6704. el.classList.remove('mod-compact');
  6705. }
  6706. });
  6707. emojiBtn.style.display = 'flex';
  6708.  
  6709. modSettings.chat.compact = false;
  6710. updateStorage();
  6711. }
  6712.  
  6713. if (modSettings.chat.compact) compactMode();
  6714. },
  6715.  
  6716. updateChat(data) {
  6717. if (this.blackListCharacters.includes(data.message)) return;
  6718.  
  6719. const chatContainer = byId('mod-messages');
  6720. const isScrolledToBottom =
  6721. chatContainer.scrollHeight - chatContainer.scrollTop <=
  6722. chatContainer.clientHeight + 1;
  6723. const isNearBottom =
  6724. chatContainer.scrollHeight - chatContainer.scrollTop - 200 <=
  6725. chatContainer.clientHeight;
  6726.  
  6727. let { name, message, time = '' } = data;
  6728. name = noXSS(name);
  6729. message = noXSS(message);
  6730. time = data.time !== null ? prettyTime.am_pm(data.time) : '';
  6731.  
  6732. const color = this.friend_names.has(name)
  6733. ? this.friends_settings.highlight_color
  6734. : data.color || '#ffffff';
  6735. const glow =
  6736. this.friend_names.has(name) &&
  6737. this.friends_settings.highlight_friends
  6738. ? `text-shadow: 0 1px 3px ${color}`
  6739. : '';
  6740. const id = rdmString(12);
  6741.  
  6742. const chatMessage = document.createElement('div');
  6743. chatMessage.classList.add('message');
  6744. chatMessage.innerHTML = `
  6745. <div class="centerXY" style="gap: 3px;">
  6746. <div class="flex">
  6747. <span style="color: ${color};${glow}" class="message_name" id="${id}">${name}</span>
  6748. <span>&#58;</span>
  6749. </div>
  6750. <span class="chatMessage-text">${message}</span>
  6751. </div>
  6752. <span class="time">${time}</span>
  6753. `;
  6754.  
  6755. chatContainer.append(chatMessage);
  6756. if (isScrolledToBottom || isNearBottom)
  6757. chatContainer.scrollTop = chatContainer.scrollHeight;
  6758.  
  6759. if (name === this.nick) return;
  6760.  
  6761. const nameEl = byId(id);
  6762. nameEl.addEventListener('mousedown', (e) =>
  6763. this.handleContextMenu(e, name)
  6764. );
  6765. nameEl.addEventListener('contextmenu', (e) => {
  6766. e.preventDefault();
  6767. e.stopPropagation();
  6768. });
  6769.  
  6770. if (++this.renderedMessages > this.maxChatMessages) {
  6771. chatContainer.removeChild(chatContainer.firstChild);
  6772. this.renderedMessages--;
  6773. }
  6774. },
  6775.  
  6776. handleContextMenu(e, name) {
  6777. if (this.onContext || e.button !== 2) return;
  6778.  
  6779. const contextMenu = document.createElement('div');
  6780. contextMenu.classList.add('chat-context');
  6781. contextMenu.innerHTML = `
  6782. <span>${name}</span>
  6783. <button id="muteButton">Mute</button>
  6784. `;
  6785.  
  6786. Object.assign(contextMenu.style, {
  6787. top: `${e.clientY - 80}px`,
  6788. left: `${e.clientX}px`,
  6789. });
  6790.  
  6791. document.body.appendChild(contextMenu);
  6792. this.onContext = true;
  6793.  
  6794. byId('muteButton').addEventListener('click', () => {
  6795. const confirmMsg =
  6796. name === 'Spectator'
  6797. ? 'Are you sure you want to mute all spectators until you refresh the page?'
  6798. : `Are you sure you want to mute '${name}' until you refresh the page?`;
  6799.  
  6800. if (confirm(confirmMsg)) {
  6801. this.muteUser(name);
  6802. contextMenu.remove();
  6803. }
  6804. });
  6805.  
  6806. document.addEventListener('click', (event) => {
  6807. if (!contextMenu.contains(event.target)) {
  6808. this.onContext = false;
  6809. contextMenu.remove();
  6810. }
  6811. });
  6812. },
  6813.  
  6814. muteUser(name) {
  6815. this.mutedUsers.push(name);
  6816.  
  6817. const msgNames = document.querySelectorAll('.message_name');
  6818. msgNames.forEach((msgName) => {
  6819. if (msgName.innerHTML == name) {
  6820. const msgParent = msgName.closest('.message');
  6821. msgParent.remove();
  6822. }
  6823. });
  6824. },
  6825.  
  6826. async getGoogleFonts() {
  6827. const fontFamilies = await (
  6828. await fetch(this.appRoutes.fonts)
  6829. ).json();
  6830.  
  6831. return fontFamilies;
  6832. },
  6833.  
  6834. async getEmojis() {
  6835. const response = await fetch(
  6836. 'https://czrsd.com/static/sigmod/emojis.json'
  6837. );
  6838. return await response.json();
  6839. },
  6840.  
  6841. emojiMenu() {
  6842. const updateEmojis = (searchTerm = '') => {
  6843. const emojisContainer =
  6844. document.querySelector('.emojisContainer');
  6845. const categoriesContainer =
  6846. emojisContainer.querySelector('#categories');
  6847.  
  6848. categoriesContainer.innerHTML = '';
  6849. window.emojis.forEach((emojiData) => {
  6850. const { emoji, description, category, tags } = emojiData;
  6851. if (
  6852. !searchTerm ||
  6853. tags.some((tag) =>
  6854. tag.includes(searchTerm.toLowerCase())
  6855. )
  6856. ) {
  6857. let categoryId = category
  6858. .replace(/\s+/g, '-')
  6859. .replace('&', 'and')
  6860. .toLowerCase();
  6861. let categoryDiv = categoriesContainer.querySelector(
  6862. `#${categoryId}`
  6863. );
  6864. if (!categoryDiv) {
  6865. categoryDiv = document.createElement('div');
  6866. categoryDiv.id = categoryId;
  6867. categoryDiv.classList.add('category');
  6868. categoryDiv.innerHTML = `<span>${category}</span><div class="emojiContainer"></div>`;
  6869. categoriesContainer.appendChild(categoryDiv);
  6870. }
  6871. const emojiContainer =
  6872. categoryDiv.querySelector('.emojiContainer');
  6873. const emojiDiv = document.createElement('div');
  6874. emojiDiv.classList.add('emoji');
  6875. emojiDiv.innerHTML = emoji;
  6876. emojiDiv.title = `${emoji} - ${description}`;
  6877. emojiDiv.addEventListener('click', () => {
  6878. const chatInput =
  6879. document.querySelector('#chatSendInput');
  6880. chatInput.value += emoji;
  6881. });
  6882. emojiContainer.appendChild(emojiDiv);
  6883. }
  6884. });
  6885. };
  6886.  
  6887. const emojisContainer = document.createElement('div');
  6888. emojisContainer.classList.add(
  6889. 'chatAddedContainer',
  6890. 'emojisContainer',
  6891. 'hidden_full'
  6892. );
  6893. emojisContainer.innerHTML = `<input type="text" class="chatInput" id="searchEmoji" style="background-color: #050505; border-radius: .5rem; flex-grow: 0;" placeholder="Search..." /><div id="categories" class="scroll"></div>`;
  6894.  
  6895. const chatInput = emojisContainer.querySelector('#searchEmoji');
  6896. chatInput.addEventListener('input', (event) => {
  6897. const searchTerm = event.target.value.toLowerCase();
  6898. updateEmojis(searchTerm);
  6899. });
  6900.  
  6901. document.body.append(emojisContainer);
  6902.  
  6903. const chatSettingsContainer = document.querySelector(
  6904. '.chatSettingsContainer'
  6905. );
  6906.  
  6907. byId('openEmojiMenu').addEventListener('click', () => {
  6908. if (!window.emojis) {
  6909. this.getEmojis().then((emojis) => {
  6910. window.emojis = emojis;
  6911. updateEmojis();
  6912. });
  6913. }
  6914.  
  6915. if (emojisContainer.classList.contains('hidden_full')) {
  6916. emojisContainer.classList.remove('hidden_full');
  6917. chatSettingsContainer.classList.add('hidden_full');
  6918. } else {
  6919. emojisContainer.classList.add('hidden_full');
  6920. }
  6921. });
  6922. },
  6923.  
  6924. chatSettings() {
  6925. const menu = document.createElement('div');
  6926. menu.classList.add(
  6927. 'chatAddedContainer',
  6928. 'chatSettingsContainer',
  6929. 'scroll',
  6930. 'hidden_full'
  6931. );
  6932. menu.innerHTML = `
  6933. <div class="modInfoPopup" style="display: none">
  6934. <p>Send location in chat with keybind</p>
  6935. </div>
  6936. <div class="scroll">
  6937. <div class="csBlock">
  6938. <div class="csBlockTitle">
  6939. <span>Keybindings</span>
  6940. </div>
  6941. <div class="csRow">
  6942. <div class="csRowName">
  6943. <span>Location</span>
  6944. <span class="infoIcon">
  6945. <svg fill="#ffffff" id="Capa_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 416.979 416.979" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M356.004,61.156c-81.37-81.47-213.377-81.551-294.848-0.182c-81.47,81.371-81.552,213.379-0.181,294.85 c81.369,81.47,213.378,81.551,294.849,0.181C437.293,274.636,437.375,142.626,356.004,61.156z M237.6,340.786 c0,3.217-2.607,5.822-5.822,5.822h-46.576c-3.215,0-5.822-2.605-5.822-5.822V167.885c0-3.217,2.607-5.822,5.822-5.822h46.576 c3.215,0,5.822,2.604,5.822,5.822V340.786z M208.49,137.901c-18.618,0-33.766-15.146-33.766-33.765 c0-18.617,15.147-33.766,33.766-33.766c18.619,0,33.766,15.148,33.766,33.766C242.256,122.755,227.107,137.901,208.49,137.901z"></path> </g> </g></svg>
  6946. </span>
  6947. </div>
  6948. <input type="text" name="location" id="modinput9" class="keybinding" value="${
  6949. modSettings.macros.keys.location || ''
  6950. }" placeholder="..." maxlength="1" onfocus="this.select()">
  6951. </div>
  6952. <div class="csRow">
  6953. <div class="csRowName">
  6954. <span>Show / Hide</span>
  6955. </div>
  6956. <input type="text" name="toggle.chat" id="modinput10" class="keybinding" value="${
  6957. modSettings.macros.keys.toggle.chat || ''
  6958. }" placeholder="..." maxlength="1" onfocus="this.select()">
  6959. </div>
  6960. </div>
  6961. <div class="csBlock">
  6962. <div class="csBlockTitle">
  6963. <span>General</span>
  6964. </div>
  6965. <div class="csRow">
  6966. <div class="csRowName">
  6967. <span>Time</span>
  6968. </div>
  6969. <div class="modCheckbox">
  6970. <input id="showChatTime" type="checkbox" checked />
  6971. <label class="cbx" for="showChatTime"></label>
  6972. </div>
  6973. </div>
  6974. <div class="csRow">
  6975. <div class="csRowName">
  6976. <span>Name colors</span>
  6977. </div>
  6978. <div class="modCheckbox">
  6979. <input id="showNameColors" type="checkbox" checked />
  6980. <label class="cbx" for="showNameColors"></label>
  6981. </div>
  6982. </div>
  6983. <div class="csRow">
  6984. <div class="csRowName">
  6985. <span>Party / Main</span>
  6986. </div>
  6987. <div class="modCheckbox">
  6988. <input id="showPartyMain" type="checkbox" checked />
  6989. <label class="cbx" for="showPartyMain"></label>
  6990. </div>
  6991. </div>
  6992. <div class="csRow">
  6993. <div class="csRowName">
  6994. <span>Blur Tag</span>
  6995. </div>
  6996. <div class="modCheckbox">
  6997. <input id="blurTag" type="checkbox" checked />
  6998. <label class="cbx" for="blurTag"></label>
  6999. </div>
  7000. </div>
  7001. <div class="flex f-column g-5 centerXY" style="padding: 0 5px">
  7002. <div class="csRowName">
  7003. <span>Location text</span>
  7004. </div>
  7005. <input type="text" id="locationText" placeholder="{pos}..." value="{pos}" class="form-control" />
  7006. </div>
  7007. </div>
  7008. <div class="csBlock">
  7009. <div class="csBlockTitle">
  7010. <span>Style</span>
  7011. </div>
  7012. <div class="csRow">
  7013. <div class="csRowName">
  7014. <span>Compact chat</span>
  7015. </div>
  7016. <div class="modCheckbox">
  7017. <input id="compactChat" type="checkbox" ${
  7018. modSettings.chat.compact ? 'checked' : ''
  7019. } />
  7020. <label class="cbx" for="compactChat"></label>
  7021. </div>
  7022. </div>
  7023. <div class="csRow">
  7024. <div class="csRowName">
  7025. <span>Text</span>
  7026. </div>
  7027. <div id="chatTextColor"></div>
  7028. </div>
  7029. <div class="csRow">
  7030. <div class="csRowName">
  7031. <span>Background</span>
  7032. </div>
  7033. <div id="chatBackground"></div>
  7034. </div>
  7035. <div class="csRow">
  7036. <div class="csRowName">
  7037. <span>Theme</span>
  7038. </div>
  7039. <div id="chatThemeChanger"></div>
  7040. </div>
  7041. </div>
  7042. </div>
  7043. `;
  7044. document.body.append(menu);
  7045.  
  7046. const infoIcon = document.querySelector('.infoIcon');
  7047. const modInfoPopup = document.querySelector('.modInfoPopup');
  7048. let popupOpen = false;
  7049.  
  7050. infoIcon.addEventListener('click', (event) => {
  7051. event.stopPropagation();
  7052. modInfoPopup.style.display = popupOpen ? 'none' : 'block';
  7053. popupOpen = !popupOpen;
  7054. });
  7055.  
  7056. document.addEventListener('click', (event) => {
  7057. if (popupOpen && !modInfoPopup.contains(event.target)) {
  7058. modInfoPopup.style.display = 'none';
  7059. popupOpen = false;
  7060. }
  7061. });
  7062.  
  7063. const showChatTime = document.querySelector('#showChatTime');
  7064. const showNameColors = document.querySelector('#showNameColors');
  7065.  
  7066. showChatTime.addEventListener('change', () => {
  7067. const timeElements = document.querySelectorAll('.time');
  7068. if (showChatTime.checked) {
  7069. modSettings.chat.showTime = true;
  7070. updateStorage();
  7071. } else {
  7072. modSettings.chat.showTime = false;
  7073. if (timeElements) {
  7074. timeElements.forEach((el) => (el.innerHTML = ''));
  7075. }
  7076. updateStorage();
  7077. }
  7078. });
  7079.  
  7080. showNameColors.addEventListener('change', () => {
  7081. const message_names =
  7082. document.querySelectorAll('.message_name');
  7083. if (showNameColors.checked) {
  7084. modSettings.chat.showNameColors = true;
  7085. updateStorage();
  7086. } else {
  7087. modSettings.chat.showNameColors = false;
  7088. if (message_names) {
  7089. message_names.forEach(
  7090. (el) => (el.style.color = '#fafafa')
  7091. );
  7092. }
  7093. updateStorage();
  7094. }
  7095. });
  7096.  
  7097. // remove old rgba val
  7098. if (modSettings.chat.bgColor.includes('rgba')) {
  7099. modSettings.chat.bgColor = RgbaToHex(modSettings.chat.bgColor);
  7100. }
  7101.  
  7102. const modChat = document.querySelector('.modChat');
  7103. modChat.style.background = modSettings.chat.bgColor;
  7104.  
  7105. const showPartyMain = document.querySelector('#showPartyMain');
  7106. const chatHeader = document.querySelector('.modchat-chatbuttons');
  7107.  
  7108. const changeButtonsState = (show) => {
  7109. chatHeader.style.display = show ? 'flex' : 'none';
  7110. modChat.style.maxHeight = show ? '285px' : '250px';
  7111. modChat.style.minHeight = show ? '285px' : '250px';
  7112. const modChatInner = document.querySelector('.modChat__inner');
  7113. modChatInner.style.maxHeight = show ? '265px' : '230px';
  7114. modChatInner.style.minHeight = show ? '265px' : '230px';
  7115. };
  7116.  
  7117. showPartyMain.addEventListener('change', () => {
  7118. const show = showPartyMain.checked;
  7119. modSettings.chat.showChatButtons = show;
  7120. changeButtonsState(show);
  7121. updateStorage();
  7122. });
  7123.  
  7124. showPartyMain.checked = modSettings.chat.showChatButtons;
  7125. changeButtonsState(modSettings.chat.showChatButtons);
  7126.  
  7127. setTimeout(() => {
  7128. const blurTag = byId('blurTag');
  7129. const tagText = document.querySelector('.tagText');
  7130. const tagElement = document.querySelector('#tag');
  7131. blurTag.addEventListener('change', () => {
  7132. const state = blurTag.checked;
  7133.  
  7134. state
  7135. ? (tagText.classList.add('blur'),
  7136. tagElement.classList.add('blur'))
  7137. : (tagText.classList.remove('blur'),
  7138. tagElement.classList.remove('blur'));
  7139. modSettings.chat.blurTag = state;
  7140. updateStorage();
  7141. });
  7142. blurTag.checked = modSettings.chat.blurTag;
  7143. if (modSettings.chat.blurTag) {
  7144. tagText.classList.add('blur');
  7145. tagElement.classList.add('blur');
  7146. }
  7147. });
  7148.  
  7149. const locationText = byId('locationText');
  7150. locationText.addEventListener('input', (e) => {
  7151. e.stopPropagation();
  7152. modSettings.chat.locationText = locationText.value;
  7153. });
  7154. locationText.value = modSettings.chat.locationText || '{pos}';
  7155. },
  7156.  
  7157. toggleChat() {
  7158. const modChat = document.querySelector('.modChat');
  7159. const modChatAdded = document.querySelectorAll(
  7160. '.chatAddedContainer'
  7161. );
  7162.  
  7163. const isModChatHidden =
  7164. modChat.style.display === 'none' ||
  7165. getComputedStyle(modChat).display === 'none';
  7166.  
  7167. if (isModChatHidden) {
  7168. modChat.style.opacity = 0;
  7169. modChat.style.display = 'flex';
  7170.  
  7171. setTimeout(() => {
  7172. modChat.style.opacity = 1;
  7173. }, 10);
  7174. } else {
  7175. modChat.style.opacity = 0;
  7176. modChatAdded.forEach((container) =>
  7177. container.classList.add('hidden_full')
  7178. );
  7179.  
  7180. setTimeout(() => {
  7181. modChat.style.display = 'none';
  7182. }, 300);
  7183. }
  7184. },
  7185.  
  7186. macroSettings() {
  7187. const allSettingNames =
  7188. document.querySelectorAll('.setting-card-name');
  7189.  
  7190. for (const settingName of Object.values(allSettingNames)) {
  7191. settingName.addEventListener('click', (event) => {
  7192. const settingCardWrappers = document.querySelectorAll(
  7193. '.setting-card-wrapper'
  7194. );
  7195. const currentWrapper = Object.values(
  7196. settingCardWrappers
  7197. ).filter(
  7198. (wrapper) =>
  7199. wrapper.querySelector('.setting-card-name')
  7200. .textContent === settingName.textContent
  7201. )[0];
  7202. const settingParameters = currentWrapper.querySelector(
  7203. '.setting-parameters'
  7204. );
  7205.  
  7206. settingParameters.style.display =
  7207. settingParameters.style.display === 'none'
  7208. ? 'block'
  7209. : 'none';
  7210. });
  7211. }
  7212. },
  7213.  
  7214. smallMods() {
  7215. const modAlert_overlay = document.createElement('div');
  7216. modAlert_overlay.classList.add('alert_overlay');
  7217. modAlert_overlay.id = 'modAlert_overlay';
  7218. document.body.append(modAlert_overlay);
  7219.  
  7220. const popup = byId('shop-popup');
  7221. const removeShopPopup = byId('removeShopPopup');
  7222. removeShopPopup.addEventListener('change', () => {
  7223. const checked = removeShopPopup.checked;
  7224. if (checked) {
  7225. popup.classList.add('hidden_full');
  7226. modSettings.settings.removeShopPopup = true;
  7227. } else {
  7228. popup.classList.remove('hidden_full');
  7229. modSettings.settings.removeShopPopup = false;
  7230. }
  7231. updateStorage();
  7232. });
  7233. if (modSettings.settings.removeShopPopup) {
  7234. popup.classList.add('hidden_full');
  7235. removeShopPopup.checked = true;
  7236. }
  7237.  
  7238. const autoRespawn = byId('autoRespawn');
  7239. if (modSettings.settings.autoRespawn) {
  7240. autoRespawn.checked = true;
  7241. }
  7242.  
  7243. autoRespawn.addEventListener('change', () => {
  7244. modSettings.settings.autoRespawn = autoRespawn.checked;
  7245. updateStorage();
  7246. });
  7247.  
  7248. const auto = byId('autoClaimCoins');
  7249. auto.addEventListener('change', () => {
  7250. const checked = auto.checked;
  7251. modSettings.settings.autoClaimCoins = !!checked;
  7252. updateStorage();
  7253. });
  7254. if (modSettings.settings.autoClaimCoins) {
  7255. auto.checked = true;
  7256. }
  7257.  
  7258. const showChallenges = byId('showChallenges');
  7259. showChallenges.addEventListener('change', () => {
  7260. if (showChallenges.checked) {
  7261. modSettings.showChallenges = true;
  7262. } else {
  7263. modSettings.showChallenges = false;
  7264. }
  7265. updateStorage();
  7266. });
  7267. if (modSettings.showChallenges) {
  7268. auto.checked = true;
  7269. }
  7270.  
  7271. const gameTitle = byId('title');
  7272.  
  7273. const newTitle = document.createElement('div');
  7274. newTitle.classList.add('sigmod-title');
  7275. newTitle.innerHTML = `
  7276. <h1 id="title">Sigmally</h1>
  7277. <span id="bycursed">Mod by <a href="https://www.youtube.com/@sigmallyCursed/" target="_blank">Cursed</a></span>
  7278. `;
  7279. gameTitle.replaceWith(newTitle);
  7280.  
  7281. const nickName = byId('nick');
  7282. nickName.maxLength = 50;
  7283. nickName.type = 'text';
  7284.  
  7285. function updNick() {
  7286. const nick = nickName.value;
  7287. mods.nick = nick;
  7288. const welcome = byId('welcomeUser');
  7289. if (welcome) {
  7290. welcome.innerHTML = `Welcome ${
  7291. mods.nick || 'Unnamed'
  7292. }, to the SigMod Client!`;
  7293. }
  7294. }
  7295.  
  7296. nickName.addEventListener('input', () => {
  7297. updNick();
  7298. });
  7299.  
  7300. updNick();
  7301.  
  7302. // Better grammar in the descriptions of the challenges
  7303. setTimeout(() => {
  7304. window.shopLocales.challenge_tab.tasks = {
  7305. eaten: 'Eat %n food in a game.',
  7306. xp: 'Get %n XP in a game.',
  7307. alive: 'Stay alive for %n minutes in a game.',
  7308. pos: 'Reach top %n on leaderboard.',
  7309. };
  7310. }, 1000);
  7311.  
  7312. const topusersInner = document.querySelector('.top-users__inner');
  7313. topusersInner.classList.add('scroll');
  7314. topusersInner.style.border = 'none';
  7315.  
  7316. byId('signOutBtn').addEventListener('click', () => {
  7317. window.gameSettings.user = null;
  7318. });
  7319.  
  7320. const mode = byId('gamemode');
  7321. mode.addEventListener('change', () => {
  7322. client.send({
  7323. type: 'server-changed',
  7324. content: getGameMode(),
  7325. });
  7326.  
  7327. window.gameSettings.isPlaying = false;
  7328.  
  7329. const modMessages = document.querySelector('#mod-messages');
  7330. if (modMessages) {
  7331. modMessages.innerHTML = '';
  7332. }
  7333. });
  7334.  
  7335. // redirect to owned skins instead of free skins
  7336. const ot = Element.prototype.openTab;
  7337. Element.prototype.openTab = function (tab) {
  7338. if (!tab === 'skins') return;
  7339.  
  7340. setTimeout(() => {
  7341. Element.prototype.changeTab('owned');
  7342. }, 100);
  7343.  
  7344. ot.apply(this, arguments);
  7345. };
  7346.  
  7347. document.addEventListener('mousemove', (e) => {
  7348. this.mouseX = e.clientX + window.pageXOffset;
  7349. this.mouseY = e.clientY + window.pageYOffset;
  7350.  
  7351. const mouseTracker = document.querySelector('.mouseTracker');
  7352. if (!mouseTracker) return;
  7353.  
  7354. mouseTracker.innerText = `X: ${this.mouseX}; Y: ${this.mouseY}`;
  7355. });
  7356.  
  7357. if (location.search.includes('password')) {
  7358. const passwordField = byId('password');
  7359. if (passwordField) passwordField.style.display = 'none';
  7360.  
  7361. const password =
  7362. new URLSearchParams(location.search)
  7363. .get('password')
  7364. ?.split('/')[0] || '';
  7365. passwordField.value = password; // sigfixes should know the password when multiboxing
  7366.  
  7367. if (window.sigfix) return;
  7368.  
  7369. const playBtn = byId('play-btn');
  7370. playBtn.addEventListener('click', (e) => {
  7371. const waitForConnection = () =>
  7372. new Promise((res) => {
  7373. if (client?.ws?.readyState === 1) return res(null);
  7374. const i = setInterval(
  7375. () =>
  7376. client?.ws?.readyState === 1 &&
  7377. (clearInterval(i), res(null)),
  7378. 50
  7379. );
  7380. });
  7381.  
  7382. waitForConnection().then(async () => {
  7383. await wait(500);
  7384. mods.sendPlay(password);
  7385.  
  7386. const interval = setInterval(() => {
  7387. const errormodal = byId('errormodal');
  7388. if (errormodal?.style.display !== 'none')
  7389. errormodal.style.display = 'none';
  7390. });
  7391.  
  7392. setTimeout(() => clearInterval(interval), 1000);
  7393. });
  7394. });
  7395. }
  7396. },
  7397.  
  7398. removeStorage(storage) {
  7399. localStorage.removeItem(storage);
  7400. },
  7401.  
  7402. credits() {
  7403. console.log(
  7404. `%c
  7405. ‎░█▀▀▀█ ▀█▀ ░█▀▀█ ░█▀▄▀█ ░█▀▀▀█ ░█▀▀▄
  7406. ‎─▀▀▀▄▄ ░█─ ░█─▄▄ ░█░█░█ ░█──░█ ░█─░█ V${version}
  7407. ‎░█▄▄▄█ ▄█▄ ░█▄▄█ ░█──░█ ░█▄▄▄█ ░█▄▄▀
  7408. ██████╗░██╗░░░██╗  ░█████╗░██╗░░░██╗██████╗░░██████╗███████╗██████╗░
  7409. ██╔══██╗╚██╗░██╔╝  ██╔══██╗██║░░░██║██╔══██╗██╔════╝██╔════╝██╔══██╗
  7410. ██████╦╝░╚████╔╝░  ██║░░╚═╝██║░░░██║██████╔╝╚█████╗░█████╗░░██║░░██║
  7411. ██╔══██╗░░╚██╔╝░░  ██║░░██╗██║░░░██║██╔══██╗░╚═══██╗██╔══╝░░██║░░██║
  7412. ██████╦╝░░░██║░░░  ╚█████╔╝╚██████╔╝██║░░██║██████╔╝███████╗██████╔╝
  7413. ╚═════╝░░░░╚═╝░░░  ░╚════╝░░╚═════╝░╚═╝░░╚═╝╚═════╝░╚══════╝╚═════╝░
  7414. `,
  7415. 'background-color: black; color: green'
  7416. );
  7417. },
  7418.  
  7419. handleAlert(data) {
  7420. const { title, description, enabled, password } = data;
  7421.  
  7422. if (location.pathname.includes('tournament') || client.updateAvailable) return;
  7423.  
  7424. if (!enabled || sessionStorage.getItem('hide-alert')) {
  7425. byId('scrim_alert')?.remove();
  7426. return;
  7427. }
  7428.  
  7429. const modAlert = document.createElement('div');
  7430. modAlert.id = 'scrim_alert';
  7431. modAlert.classList.add('modAlert');
  7432. modAlert.innerHTML = `
  7433. <div class="flex justify-sb">
  7434. <strong>${title}</strong>
  7435. <button class="modButton" style="width: 35px;" id="close_scrim_alert">X</button>
  7436. </div>
  7437. <span>${description}</span>
  7438. <div class="flex" style="align-items: center; gap: 5px;">
  7439. <button id="join" class="modButton" style="width: 100%">Join</button>
  7440. </div>
  7441. `;
  7442. document.body.append(modAlert);
  7443.  
  7444. const observer = new MutationObserver(() => {
  7445. modAlert.style.display = menuClosed() ? 'none' : 'flex';
  7446. });
  7447.  
  7448. observer.observe(document.body, {
  7449. attributes: true,
  7450. childList: true,
  7451. subtree: true,
  7452. });
  7453.  
  7454. const joinButton = byId('join');
  7455. joinButton.addEventListener('click', () => {
  7456. location.href = `https://one.sigmally.com/tournament?password=${password}`;
  7457. });
  7458.  
  7459. const close = byId('close_scrim_alert');
  7460. close.addEventListener('click', () => {
  7461. modAlert.remove();
  7462. // make it not that annoying
  7463. sessionStorage.setItem('hide-alert', true);
  7464. });
  7465. },
  7466.  
  7467. saveNames() {
  7468. let savedNames = modSettings.settings.savedNames;
  7469. let savedNamesOutput = byId('savedNames');
  7470. let saveNameBtn = byId('saveName');
  7471. let saveNameInput = byId('saveNameValue');
  7472.  
  7473. const createNameDiv = (name) => {
  7474. let nameDiv = document.createElement('div');
  7475. nameDiv.classList.add('NameDiv');
  7476.  
  7477. let nameLabel = document.createElement('label');
  7478. nameLabel.classList.add('NameLabel');
  7479. nameLabel.innerText = name;
  7480.  
  7481. let delName = document.createElement('button');
  7482. delName.innerText = 'X';
  7483. delName.classList.add('delName');
  7484.  
  7485. nameDiv.addEventListener('click', () => {
  7486. const name = nameLabel.innerText;
  7487. navigator.clipboard.writeText(name).then(() => {
  7488. this.modAlert(
  7489. `Added the name '${name}' to your clipboard!`,
  7490. 'success'
  7491. );
  7492. });
  7493. });
  7494.  
  7495. delName.addEventListener('click', () => {
  7496. if (
  7497. confirm(
  7498. "Are you sure you want to delete the name '" +
  7499. nameLabel.innerText +
  7500. "'?"
  7501. )
  7502. ) {
  7503. nameDiv.remove();
  7504. savedNames = savedNames.filter(
  7505. (n) => n !== nameLabel.innerText
  7506. );
  7507. modSettings.settings.savedNames = savedNames;
  7508. updateStorage();
  7509. }
  7510. });
  7511.  
  7512. nameDiv.appendChild(nameLabel);
  7513. nameDiv.appendChild(delName);
  7514. return nameDiv;
  7515. };
  7516.  
  7517. saveNameBtn.addEventListener('click', () => {
  7518. if (saveNameInput.value === '') return;
  7519.  
  7520. setTimeout(() => {
  7521. saveNameInput.value = '';
  7522. }, 10);
  7523.  
  7524. if (savedNames.includes(saveNameInput.value)) {
  7525. return;
  7526. }
  7527.  
  7528. let nameDiv = createNameDiv(saveNameInput.value);
  7529. savedNamesOutput.appendChild(nameDiv);
  7530.  
  7531. savedNames.push(saveNameInput.value);
  7532. modSettings.settings.savedNames = savedNames;
  7533. updateStorage();
  7534. });
  7535.  
  7536. if (savedNames.length > 0) {
  7537. savedNames.forEach((name) => {
  7538. let nameDiv = createNameDiv(name);
  7539. savedNamesOutput.appendChild(nameDiv);
  7540. });
  7541. }
  7542. },
  7543.  
  7544. initStats() {
  7545. // initialize player stats
  7546. const statElements = [
  7547. 'stat-time-played',
  7548. 'stat-highest-mass',
  7549. 'stat-total-deaths',
  7550. 'stat-total-mass',
  7551. ];
  7552. this.storage = localStorage.getItem('game-stats');
  7553.  
  7554. if (!this.storage) {
  7555. this.storage = {
  7556. 'time-played': 0, // seconds
  7557. 'highest-mass': 0,
  7558. 'total-deaths': 0,
  7559. 'total-mass': 0,
  7560. };
  7561. localStorage.setItem(
  7562. 'game-stats',
  7563. JSON.stringify(this.storage)
  7564. );
  7565. } else {
  7566. this.storage = JSON.parse(this.storage);
  7567. }
  7568.  
  7569. statElements.forEach((rawStat) => {
  7570. const stat = rawStat.replace('stat-', '');
  7571. const value = this.storage[stat];
  7572. this.updateStatElm(rawStat, value);
  7573. });
  7574.  
  7575. this.session.bind(this)();
  7576. },
  7577.  
  7578. updateStat(key, value) {
  7579. this.storage[key] = value;
  7580. localStorage.setItem('game-stats', JSON.stringify(this.storage));
  7581. this.updateStatElm(key, value);
  7582. },
  7583.  
  7584. updateStatElm(stat, value) {
  7585. const element = byId(stat);
  7586.  
  7587. if (element) {
  7588. if (stat === 'stat-time-played') {
  7589. const hours = Math.floor(value / 3600);
  7590. const minutes = Math.floor((value % 3600) / 60);
  7591. const formattedTime =
  7592. hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
  7593. element.innerHTML = formattedTime;
  7594. } else {
  7595. const formattedValue =
  7596. stat === 'stat-highest-mass' ||
  7597. stat === 'stat-total-mass'
  7598. ? value > 999
  7599. ? `${(value / 1000).toFixed(1)}k`
  7600. : value.toString()
  7601. : value.toString();
  7602. element.innerHTML = formattedValue;
  7603. }
  7604. }
  7605. },
  7606.  
  7607. session() {
  7608. let playingInterval;
  7609. let minPlaying = 0;
  7610. let isPlaying = window.gameSettings.isPlaying;
  7611.  
  7612. const playBtn = byId('play-btn');
  7613. let a = null;
  7614.  
  7615. playBtn.addEventListener('click', async () => {
  7616. if (isPlaying) return;
  7617.  
  7618. while (!window.gameSettings.isPlaying) {
  7619. await new Promise((resolve) => setTimeout(resolve, 200));
  7620. }
  7621.  
  7622. isPlaying = true;
  7623. let timer = null;
  7624.  
  7625. if (modSettings.playTimer) {
  7626. timer = document.createElement('span');
  7627. timer.classList.add('playTimer');
  7628. timer.innerText = '0m0s played';
  7629. document.body.append(timer);
  7630. }
  7631.  
  7632. // mouse tracker in session method so it's only visible when playing
  7633. if (modSettings.mouseTracker) {
  7634. const mouse = document.createElement('span');
  7635. mouse.classList.add('mouseTracker');
  7636. mouse.innerText = 'X: 0; Y: 0';
  7637. document.body.append(mouse);
  7638.  
  7639. if (!modSettings.playTimer) {
  7640. mouse.style.top = '128px';
  7641. }
  7642. }
  7643.  
  7644. let count = 0;
  7645. playingInterval = setInterval(() => {
  7646. count++;
  7647. this.storage['time-played']++;
  7648. if (count % 60 === 0) {
  7649. minPlaying++;
  7650. }
  7651. this.updateStat('time-played', this.storage['time-played']);
  7652.  
  7653. if (modSettings.playTimer) {
  7654. this.updateTimeStat(timer, count);
  7655. }
  7656. }, 1000);
  7657. });
  7658.  
  7659. setInterval(() => {
  7660. if (menuClosed() && byId('overlays').style.display !== 'none') {
  7661. byId('overlays').style.display = 'none';
  7662. }
  7663.  
  7664. if (isDead() && !dead) {
  7665. clearInterval(playingInterval);
  7666. dead = true;
  7667.  
  7668. const playTimer = document.querySelector('.playTimer');
  7669. if (playTimer) playTimer.remove();
  7670.  
  7671. const mouseTracker =
  7672. document.querySelector('.mouseTracker');
  7673. if (mouseTracker) mouseTracker.remove();
  7674.  
  7675. const score = parseFloat(byId('highest_mass').innerText);
  7676. const highest = this.storage['highest-mass'];
  7677.  
  7678. if (score > highest) {
  7679. this.storage['highest-mass'] = score;
  7680. this.updateStat(
  7681. 'highest-mass',
  7682. this.storage['highest-mass']
  7683. );
  7684. }
  7685.  
  7686. this.storage['total-deaths']++;
  7687. this.updateStat(
  7688. 'total-deaths',
  7689. this.storage['total-deaths']
  7690. );
  7691.  
  7692. this.storage['total-mass'] += score;
  7693. this.updateStat('total-mass', this.storage['total-mass']);
  7694. isPlaying = window.gameSettings.isPlaying = false;
  7695.  
  7696. if (this.lastOneStanding) {
  7697. client.send({
  7698. type: 'result',
  7699. content: null,
  7700. });
  7701. playBtn.disabled = true;
  7702. }
  7703.  
  7704. if (modSettings.showChallenges && window.gameSettings.user)
  7705. this.showChallenges();
  7706. } else if (!isDead()) {
  7707. dead = false;
  7708. const challengesDeathscreen = document.querySelector(
  7709. '.challenges_deathscreen'
  7710. );
  7711. if (challengesDeathscreen) challengesDeathscreen.remove();
  7712. }
  7713. });
  7714. },
  7715. updateTimeStat(el, seconds) {
  7716. const minutes = Math.floor(seconds / 60);
  7717. const remainingSeconds = seconds % 60;
  7718. const timeString = `${minutes}m${remainingSeconds}s`;
  7719.  
  7720. el.innerText = `${timeString} played`;
  7721. },
  7722.  
  7723. async showChallenges() {
  7724. const challengeData = await (
  7725. await fetch(
  7726. `https://sigmally.com/api/user/challenge/${window.gameSettings.user.email}`
  7727. )
  7728. ).json();
  7729.  
  7730. if (challengeData.status !== 'success') return;
  7731.  
  7732. const shopLocales = window.shopLocales;
  7733. let challengesCompleted = 0;
  7734.  
  7735. const allChallenges = challengeData.data;
  7736. allChallenges.forEach(({ status }) => {
  7737. if (status) challengesCompleted++;
  7738. });
  7739.  
  7740. let challenges;
  7741. if (challengesCompleted === allChallenges.length) {
  7742. challenges = `<div class="challenge-row" style="justify-content: center;">All challenges completed.</div>`;
  7743. } else {
  7744. challenges = allChallenges
  7745. .filter(({ status }) => !status)
  7746. .map(({ task, best, status, ready, goal }) => {
  7747. const desc = shopLocales.challenge_tab.tasks[
  7748. task
  7749. ].replace('%n', task === 'alive' ? goal / 60 : goal);
  7750. const btn = ready
  7751. ? `<button class="challenge-collect-secondary" onclick="this.challenge('${task}', ${status})">${shopLocales.challenge_tab.collect}</button>`
  7752. : `<div class="challenge-best-secondary">${
  7753. shopLocales.challenge_tab.result
  7754. }${Math.round(best)}${
  7755. task === 'alive' ? 's' : ''
  7756. }</div>`;
  7757. return `
  7758. <div class="challenge-row">
  7759. <div class="challenge-desc">${desc}</div>
  7760. ${btn}
  7761. </div>`;
  7762. })
  7763. .join('');
  7764. }
  7765.  
  7766. const modal = document.createElement('div');
  7767. modal.classList.add('challenges_deathscreen');
  7768. modal.innerHTML = `
  7769. <span class="challenges-title">Daily challenges</span>
  7770. <div class="challenges-col">${challenges}</div>
  7771. <span class="centerXY new-challenges">New challenges in 0h 0m 0s</span>
  7772. `;
  7773.  
  7774. const toggleColor = (element, background, text) => {
  7775. let image = `url("${background}")`;
  7776. if (background.includes('http')) {
  7777. element.style.background = image;
  7778. element.style.backgroundPosition = 'center';
  7779. element.style.backgroundSize = 'cover';
  7780. element.style.backgroundRepeat = 'no-repeat';
  7781. } else {
  7782. element.style.background = background;
  7783. element.style.backgroundRepeat = 'no-repeat';
  7784. }
  7785. element.style.color = text;
  7786. };
  7787.  
  7788. if (modSettings.themes.current !== 'Dark') {
  7789. let selectedTheme;
  7790. selectedTheme =
  7791. window.themes.defaults.find(
  7792. (theme) => theme.name === modSettings.themes.current
  7793. ) ||
  7794. modSettings.themes.custom.find(
  7795. (theme) => theme.name === modSettings.themes.current
  7796. ) ||
  7797. null;
  7798. if (!selectedTheme) {
  7799. selectedTheme =
  7800. window.themes.orderly.find(
  7801. (theme) => theme.name === modSettings.themes.current
  7802. ) ||
  7803. modSettings.themes.custom.find(
  7804. (theme) => theme.name === modSettings.themes.current
  7805. );
  7806. }
  7807.  
  7808. if (selectedTheme) {
  7809. toggleColor(
  7810. modal,
  7811. selectedTheme.background,
  7812. selectedTheme.text
  7813. );
  7814. }
  7815. }
  7816.  
  7817. document
  7818. .querySelector('.menu-wrapper--stats-mode')
  7819. .insertAdjacentElement('afterbegin', modal);
  7820.  
  7821. if (challengesCompleted < allChallenges.length) {
  7822. document
  7823. .querySelectorAll('.challenge-collect-secondary')
  7824. .forEach((btn) => {
  7825. btn.addEventListener('click', () => {
  7826. const parentChallengeRow =
  7827. btn.closest('.challenge-row');
  7828. if (parentChallengeRow) {
  7829. setTimeout(() => {
  7830. parentChallengeRow.remove();
  7831. }, 500);
  7832. }
  7833. });
  7834. });
  7835. }
  7836.  
  7837. this.createDayTimer();
  7838. },
  7839.  
  7840. timeToString(timeLeft) {
  7841. const string = new Date(timeLeft).toISOString().slice(11, 19);
  7842. const [hours, minutes, seconds] = string.split(':');
  7843.  
  7844. return `${hours}h ${minutes}m ${seconds}s`;
  7845. },
  7846. toISODate: (date) => {
  7847. const withTime = date ? new Date(date) : new Date();
  7848. const [withoutTime] = withTime.toISOString().split('T');
  7849. return withoutTime;
  7850. },
  7851. createDayTimer() {
  7852. const oneDay = 1000 * 60 * 60 * 24;
  7853. const getTime = () => {
  7854. const today = this.toISODate();
  7855. const from = new Date(today).getTime();
  7856. const to = from + oneDay;
  7857.  
  7858. const distance = to - Date.now();
  7859. const time = this.timeToString(distance);
  7860. return time;
  7861. };
  7862.  
  7863. const children = document.querySelector('.new-challenges');
  7864. if (children) {
  7865. children.innerHTML = `New challenges in ${getTime()}`;
  7866. }
  7867.  
  7868. this.dayTimer = setInterval(() => {
  7869. const today = this.toISODate();
  7870. const from = new Date(today).getTime();
  7871. const to = from + oneDay;
  7872.  
  7873. const distance = to - Date.now();
  7874. const time = this.timeToString(distance);
  7875.  
  7876. const children = document.querySelector('.new-challenges');
  7877. if (!children || distance < 1000 || !isDead()) {
  7878. clearInterval(this.dayTimer);
  7879. return;
  7880. }
  7881. children.innerHTML = `New challenges in ${getTime()}`;
  7882. }, 1000);
  7883. },
  7884.  
  7885. macros() {
  7886. let that = this;
  7887. const KEY_SPLIT = this.splitKey;
  7888. let ff = null;
  7889. let keydown = false;
  7890. let open = false;
  7891. const canvas = byId('canvas');
  7892. const mod_menu = document.querySelector('.mod_menu');
  7893.  
  7894. const freezeType = byId('freezeType');
  7895. let freezeKeyPressed = false;
  7896. let freezeMouseClicked = false;
  7897. let freezeOverlay = null;
  7898.  
  7899. let vOverlay = null;
  7900. let vLocked = false;
  7901. let activeVLine = false;
  7902.  
  7903. let fixedOverlay = null;
  7904. let fixedLocked = false;
  7905. let activeFixedLine = false;
  7906.  
  7907. /* intervals */
  7908.  
  7909. // Respawn interval
  7910. setInterval(() => {
  7911. if (
  7912. modSettings.settings.autoRespawn &&
  7913. this.respawnTime &&
  7914. Date.now() - this.respawnTime >= this.respawnCooldown
  7915. ) {
  7916. this.respawn();
  7917. }
  7918. });
  7919.  
  7920. // mouse fast feed interval
  7921. setInterval(() => {
  7922. if (dead || !menuClosed() || !this.mouseDown) return;
  7923. keypress('w', 'KeyW');
  7924. }, 50);
  7925.  
  7926. async function split(times) {
  7927. if (times > 0) {
  7928. window.dispatchEvent(
  7929. new KeyboardEvent('keydown', KEY_SPLIT)
  7930. );
  7931. window.dispatchEvent(new KeyboardEvent('keyup', KEY_SPLIT));
  7932. split(times - 1);
  7933. }
  7934. }
  7935.  
  7936. async function selfTrick() {
  7937. let i = 4;
  7938.  
  7939. while (i--) {
  7940. split(1);
  7941. await wait(20);
  7942. }
  7943. }
  7944.  
  7945. async function doubleTrick() {
  7946. let i = 2;
  7947.  
  7948. while (i--) {
  7949. split(1);
  7950. await wait(20);
  7951. }
  7952. }
  7953.  
  7954. function mouseToScreenCenter() {
  7955. const screenCenterX = canvas.width / 2;
  7956. const screenCenterY = canvas.height / 2;
  7957.  
  7958. mousemove(screenCenterX, screenCenterY);
  7959.  
  7960. return {
  7961. x: screenCenterX,
  7962. y: screenCenterY,
  7963. };
  7964. }
  7965.  
  7966. async function instantSplit() {
  7967. await wait(300);
  7968.  
  7969. if (
  7970. modSettings.macros.keys.line.instantSplit &&
  7971. modSettings.macros.keys.line.instantSplit > 0
  7972. ) {
  7973. split(modSettings.macros.keys.line.instantSplit);
  7974. }
  7975. }
  7976.  
  7977. async function vLine() {
  7978. if (!activeVLine) return;
  7979. const x = playerPosition.x;
  7980. const y = playerPosition.y;
  7981.  
  7982. const offsetUpX = playerPosition.x;
  7983. const offsetUpY = playerPosition.y - 100;
  7984. const offsetDownX = playerPosition.x;
  7985. const offsetDownY = playerPosition.y + 100;
  7986.  
  7987. freezepos = false;
  7988. window.sendMouseMove(offsetUpX, offsetUpY);
  7989. freezepos = true;
  7990.  
  7991. await wait(50);
  7992.  
  7993. freezepos = false;
  7994. window.sendMouseMove(offsetDownX, offsetDownY);
  7995. freezepos = true;
  7996. }
  7997.  
  7998. async function toggleHorizontal(mouse = false) {
  7999. if (!freezeKeyPressed) {
  8000. if (activeVLine || activeFixedLine) return;
  8001.  
  8002. window.sendMouseMove(playerPosition.x, playerPosition.y);
  8003. freezepos = true;
  8004.  
  8005. instantSplit();
  8006.  
  8007. freezeOverlay = document.createElement('div');
  8008. freezeOverlay.innerHTML = `
  8009. <span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Movement Stopped</span>
  8010. `;
  8011. freezeOverlay.style =
  8012. 'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  8013.  
  8014. if (
  8015. mouse &&
  8016. (modSettings.macros.mouse.left === 'freeze' ||
  8017. modSettings.macros.mouse.right === 'freeze')
  8018. ) {
  8019. freezeOverlay.addEventListener('mousedown', (e) => {
  8020. if (
  8021. e.button === 0 &&
  8022. modSettings.macros.mouse.left === 'freeze'
  8023. ) {
  8024. // Left mouse button (1)
  8025. handleFreezeEvent();
  8026. }
  8027. if (
  8028. e.button === 2 &&
  8029. modSettings.macros.mouse.right === 'freeze'
  8030. ) {
  8031. // Right mouse button (2)
  8032. handleFreezeEvent();
  8033. }
  8034. });
  8035.  
  8036. if (modSettings.macros.mouse.right === 'freeze') {
  8037. freezeOverlay.addEventListener(
  8038. 'contextmenu',
  8039. (e) => {
  8040. e.preventDefault();
  8041. }
  8042. );
  8043. }
  8044. }
  8045.  
  8046. function handleFreezeEvent() {
  8047. if (freezeOverlay != null) freezeOverlay.remove();
  8048. freezeOverlay = null;
  8049. freezeKeyPressed = false;
  8050. }
  8051.  
  8052. document
  8053. .querySelector('.body__inner')
  8054. .append(freezeOverlay);
  8055.  
  8056. freezeKeyPressed = true;
  8057. } else {
  8058. if (freezeOverlay != null) freezeOverlay.remove();
  8059. freezeOverlay = null;
  8060. freezeKeyPressed = false;
  8061.  
  8062. freezepos = false;
  8063. }
  8064. }
  8065.  
  8066. async function toggleVertical() {
  8067. if (!activeVLine) {
  8068. if (freezeKeyPressed || activeFixedLine) return;
  8069.  
  8070. window.sendMouseMove(playerPosition.x, playerPosition.y);
  8071. freezepos = true;
  8072.  
  8073. instantSplit();
  8074.  
  8075. vOverlay = document.createElement('div');
  8076. vOverlay.style = 'pointer-events: none;';
  8077. vOverlay.innerHTML = `
  8078. <span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Vertical locked</span>
  8079. `;
  8080. vOverlay.style =
  8081. 'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  8082.  
  8083. document.querySelector('.body__inner').append(vOverlay);
  8084.  
  8085. activeVLine = true;
  8086. } else {
  8087. activeVLine = false;
  8088. freezepos = false;
  8089. if (vOverlay) vOverlay.remove();
  8090. vOverlay = null;
  8091. }
  8092. }
  8093.  
  8094. async function toggleFixed() {
  8095. if (!activeFixedLine) {
  8096. if (freezeKeyPressed || activeVLine) return;
  8097.  
  8098. window.sendMouseMove(playerPosition.x, playerPosition.y);
  8099.  
  8100. freezepos = true;
  8101.  
  8102. instantSplit();
  8103.  
  8104. fixedOverlay = document.createElement('div');
  8105. fixedOverlay.style = 'pointer-events: none;';
  8106. fixedOverlay.innerHTML = `
  8107. <span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Mouse locked</span>
  8108. `;
  8109. fixedOverlay.style =
  8110. 'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  8111.  
  8112. document.querySelector('.body__inner').append(fixedOverlay);
  8113.  
  8114. activeFixedLine = true;
  8115. } else {
  8116. activeFixedLine = false;
  8117. freezepos = false;
  8118. if (fixedOverlay) fixedOverlay.remove();
  8119. fixedOverlay = null;
  8120. }
  8121. }
  8122.  
  8123. function sendLocation() {
  8124. if (!playerPosition.x || !playerPosition.y) return;
  8125.  
  8126. const gamemode = byId('gamemode');
  8127. const coordinatesToCheck =
  8128. gamemode.value === 'eu0.sigmally.com/ws/'
  8129. ? coordinates
  8130. : coordinates2;
  8131.  
  8132. let field = '';
  8133.  
  8134. for (const label in coordinatesToCheck) {
  8135. const { min, max } = coordinatesToCheck[label];
  8136.  
  8137. if (
  8138. playerPosition.x >= min.x &&
  8139. playerPosition.x <= max.x &&
  8140. playerPosition.y >= min.y &&
  8141. playerPosition.y <= max.y
  8142. ) {
  8143. field = label;
  8144. break;
  8145. }
  8146. }
  8147.  
  8148. const locationText = modSettings.chat.locationText || field;
  8149. const message = locationText.replace('{pos}', field);
  8150. window.sendChat(message);
  8151. }
  8152.  
  8153. function toggleSettings(setting) {
  8154. const settingElement = document.querySelector(
  8155. `input#${setting}`
  8156. );
  8157. if (settingElement) {
  8158. settingElement.click();
  8159. } else {
  8160. console.error(`Setting "${setting}" not found`);
  8161. }
  8162. }
  8163.  
  8164. document.addEventListener('keyup', (e) => {
  8165. const key = e.key.toLowerCase();
  8166. if (key == modSettings.macros.keys.rapidFeed && keydown) {
  8167. clearInterval(ff);
  8168. keydown = false;
  8169. }
  8170. });
  8171. document.addEventListener('keydown', (e) => {
  8172. // prevent disconnecting & using macros on input fields
  8173. if (
  8174. document.activeElement.tagName === 'INPUT' ||
  8175. document.activeElement.tagName === 'TEXTAREA'
  8176. ) {
  8177. e.stopPropagation();
  8178. return;
  8179. }
  8180. const key = e.key.toLowerCase();
  8181.  
  8182. if (key === 'p') {
  8183. e.stopPropagation();
  8184. }
  8185. if (key === 'tab' && !window.screenTop && !window.screenY) {
  8186. e.preventDefault();
  8187. }
  8188.  
  8189. if (key === modSettings.macros.keys.rapidFeed) {
  8190. e.stopPropagation(); // block actual feeding key
  8191. if (!keydown) {
  8192. keydown = true;
  8193. ff = setInterval(
  8194. () => keypress('w', 'KeyW'),
  8195. modSettings.macros.feedSpeed
  8196. );
  8197. }
  8198. }
  8199. // vertical linesplit
  8200. if (
  8201. activeVLine &&
  8202. (key === ' ' ||
  8203. key === modSettings.macros.keys.splits.double ||
  8204. key === modSettings.macros.keys.splits.triple ||
  8205. key === modSettings.macros.keys.splits.quad)
  8206. ) {
  8207. vLine();
  8208. }
  8209.  
  8210. handleKeydown(key);
  8211. });
  8212.  
  8213. async function handleKeydown(key) {
  8214. switch (key) {
  8215. case modSettings.macros.keys.toggle.menu: {
  8216. if (!open) {
  8217. mod_menu.style.display = 'flex';
  8218. setTimeout(() => {
  8219. mod_menu.style.opacity = 1;
  8220. }, 10);
  8221. open = true;
  8222. } else {
  8223. mod_menu.style.opacity = 0;
  8224. setTimeout(() => {
  8225. mod_menu.style.display = 'none';
  8226. }, 300);
  8227. open = false;
  8228. }
  8229. break;
  8230. }
  8231.  
  8232. case modSettings.macros.keys.splits.double:
  8233. split(2);
  8234. break;
  8235.  
  8236. case modSettings.macros.keys.splits.triple:
  8237. split(3);
  8238. break;
  8239.  
  8240. case modSettings.macros.keys.splits.quad:
  8241. split(4);
  8242. break;
  8243.  
  8244. case modSettings.macros.keys.splits.selfTrick:
  8245. selfTrick();
  8246. break;
  8247.  
  8248. case modSettings.macros.keys.splits.doubleTrick:
  8249. doubleTrick();
  8250. break;
  8251.  
  8252. case modSettings.macros.keys.line.horizontal:
  8253. if (menuClosed()) toggleHorizontal();
  8254. break;
  8255.  
  8256. case modSettings.macros.keys.line.vertical:
  8257. if (menuClosed()) toggleVertical();
  8258. break;
  8259.  
  8260. case modSettings.macros.keys.line.fixed:
  8261. if (menuClosed()) toggleFixed();
  8262. break;
  8263.  
  8264. case modSettings.macros.keys.location:
  8265. sendLocation();
  8266. break;
  8267.  
  8268. case modSettings.macros.keys.toggle.chat:
  8269. mods.toggleChat();
  8270. break;
  8271.  
  8272. case modSettings.macros.keys.toggle.names:
  8273. toggleSettings('showNames');
  8274. break;
  8275.  
  8276. case modSettings.macros.keys.toggle.skins:
  8277. toggleSettings('showSkins');
  8278. break;
  8279.  
  8280. case modSettings.macros.keys.toggle.autoRespawn:
  8281. toggleSettings('autoRespawn');
  8282. break;
  8283.  
  8284. case modSettings.macros.keys.respawn:
  8285. mods.respawnGame();
  8286. break;
  8287.  
  8288. case modSettings.macros.keys.saveImage:
  8289. await mods.saveImage();
  8290. break;
  8291. }
  8292. }
  8293.  
  8294. canvas.addEventListener('mousedown', (e) => {
  8295. const {
  8296. macros: { mouse },
  8297. } = modSettings;
  8298.  
  8299. if (e.button === 0) {
  8300. // Left mouse button (0)
  8301. if (mouse.left === 'fastfeed') {
  8302. if (
  8303. document.activeElement.tagName === 'INPUT' ||
  8304. document.activeElement.tagName === 'TEXTAREA'
  8305. )
  8306. return;
  8307. this.mouseDown = true;
  8308. } else if (mouse.left === 'split') {
  8309. split(1);
  8310. } else if (mouse.left === 'split2') {
  8311. split(2);
  8312. } else if (mouse.left === 'split3') {
  8313. split(3);
  8314. } else if (mouse.left === 'split4') {
  8315. split(4);
  8316. } else if (mouse.left === 'freeze') {
  8317. toggleHorizontal(true);
  8318. } else if (mouse.left === 'dTrick') {
  8319. doubleTrick();
  8320. } else if (mouse.left === 'sTrick') {
  8321. selfTrick();
  8322. }
  8323. } else if (e.button === 2) {
  8324. // Right mouse button (2)
  8325. e.preventDefault();
  8326. if (mouse.right === 'fastfeed') {
  8327. if (
  8328. document.activeElement.tagName === 'INPUT' ||
  8329. document.activeElement.tagName === 'TEXTAREA'
  8330. )
  8331. return;
  8332. this.mouseDown = true;
  8333. } else if (mouse.right === 'split') {
  8334. split(1);
  8335. } else if (mouse.right === 'split2') {
  8336. split(2);
  8337. } else if (mouse.right === 'split3') {
  8338. split(3);
  8339. } else if (mouse.right === 'split4') {
  8340. split(4);
  8341. } else if (mouse.right === 'freeze') {
  8342. toggleHorizontal(true);
  8343. } else if (mouse.right === 'dTrick') {
  8344. doubleTrick();
  8345. } else if (mouse.right === 'sTrick') {
  8346. selfTrick();
  8347. }
  8348. }
  8349. });
  8350.  
  8351. canvas.addEventListener('contextmenu', (e) => {
  8352. e.preventDefault();
  8353. });
  8354.  
  8355. canvas.addEventListener('mouseup', () => {
  8356. if (modSettings.macros.mouse.left === 'fastfeed') {
  8357. this.mouseDown = false;
  8358. } else if (modSettings.macros.mouse.right === 'fastfeed') {
  8359. this.mouseDown = false;
  8360. }
  8361. });
  8362.  
  8363. const macroSelectHandler = (macroSelect, key) => {
  8364. const {
  8365. macros: { mouse },
  8366. } = modSettings;
  8367. macroSelect.value = modSettings[key] || 'none';
  8368.  
  8369. macroSelect.addEventListener('change', () => {
  8370. const selectedOption = macroSelect.value;
  8371.  
  8372. const optionActions = {
  8373. none: () => {
  8374. mouse[key] = null;
  8375. },
  8376. fastfeed: () => {
  8377. mouse[key] = 'fastfeed';
  8378. },
  8379. split: () => {
  8380. mouse[key] = 'split';
  8381. },
  8382. split2: () => {
  8383. mouse[key] = 'split2';
  8384. },
  8385. split3: () => {
  8386. mouse[key] = 'split3';
  8387. },
  8388. split4: () => {
  8389. mouse[key] = 'split4';
  8390. },
  8391. freeze: () => {
  8392. mouse[key] = 'freeze';
  8393. },
  8394. dTrick: () => {
  8395. mouse[key] = 'dTrick';
  8396. },
  8397. sTrick: () => {
  8398. mouse[key] = 'sTrick';
  8399. },
  8400. };
  8401.  
  8402. if (optionActions[selectedOption]) {
  8403. optionActions[selectedOption]();
  8404. updateStorage();
  8405. }
  8406. });
  8407. };
  8408.  
  8409. const m1_macroSelect = byId('m1_macroSelect');
  8410. const m2_macroSelect = byId('m2_macroSelect');
  8411.  
  8412. macroSelectHandler(m1_macroSelect, 'left');
  8413. macroSelectHandler(m2_macroSelect, 'right');
  8414.  
  8415. const instantSplitAmount = byId('instant-split-amount');
  8416. const instantSplitStatus = byId('toggle-instant-split');
  8417.  
  8418. instantSplitStatus.checked =
  8419. modSettings.macros.keys.line.instantSplit > 0;
  8420. instantSplitAmount.disabled = !instantSplitStatus.checked;
  8421. instantSplitAmount.value =
  8422. modSettings.macros.keys.line.instantSplit.toString();
  8423.  
  8424. instantSplitStatus.addEventListener('change', () => {
  8425. if (instantSplitStatus.checked) {
  8426. modSettings.macros.keys.line.instantSplit =
  8427. Number(instantSplitAmount.value) || 0;
  8428. instantSplitAmount.disabled = false;
  8429. } else {
  8430. modSettings.macros.keys.line.instantSplit = 0;
  8431. instantSplitAmount.disabled = true;
  8432. }
  8433.  
  8434. updateStorage();
  8435. });
  8436.  
  8437. instantSplitAmount.addEventListener('input', (e) => {
  8438. modSettings.macros.keys.line.instantSplit =
  8439. Number(instantSplitAmount.value) || 0;
  8440. updateStorage();
  8441. });
  8442. },
  8443.  
  8444. setInputActions() {
  8445. const numModInputs = 18;
  8446. const macroInputs = Array.from(
  8447. { length: numModInputs },
  8448. (_, i) => `modinput${i + 1}`
  8449. );
  8450.  
  8451. macroInputs.forEach((modkey) => {
  8452. const modInput = byId(modkey);
  8453.  
  8454. document.addEventListener('keydown', (event) => {
  8455. if (document.activeElement !== modInput) return;
  8456.  
  8457. if (event.key === 'Backspace') {
  8458. modInput.value = '';
  8459. updateModSettings(modInput.name, '');
  8460. return;
  8461. }
  8462.  
  8463. const newValue = event.key.toLowerCase();
  8464. modInput.value = newValue;
  8465.  
  8466. const isDuplicate = macroInputs.some((key) => {
  8467. const input = byId(key);
  8468. return (
  8469. input &&
  8470. input !== modInput &&
  8471. input.value === newValue
  8472. );
  8473. });
  8474.  
  8475. if (newValue && isDuplicate) {
  8476. alert("You can't use 2 keybindings at the same time.");
  8477. setTimeout(() => (modInput.value = ''), 0);
  8478. return;
  8479. }
  8480.  
  8481. updateModSettings(modInput.name, newValue);
  8482. });
  8483. });
  8484.  
  8485. function updateModSettings(propertyName, value) {
  8486. const properties = propertyName.split('.');
  8487. let settings = modSettings.macros.keys;
  8488.  
  8489. properties
  8490. .slice(0, -1)
  8491. .forEach((prop) => (settings = settings[prop]));
  8492. settings[properties.pop()] = value;
  8493.  
  8494. updateStorage();
  8495. }
  8496.  
  8497. const modNumberInput = document.querySelector('.modNumberInput');
  8498.  
  8499. modNumberInput.addEventListener('keydown', (event) => {
  8500. if (
  8501. !['Backspace', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(
  8502. event.key
  8503. ) &&
  8504. !/^[0-9]$/.test(event.key)
  8505. ) {
  8506. event.preventDefault();
  8507. }
  8508. });
  8509. },
  8510.  
  8511. openDB() {
  8512. if (this.dbCache) return Promise.resolve(this.dbCache);
  8513.  
  8514. return new Promise((resolve, reject) => {
  8515. const request = indexedDB.open('imageGalleryDB', 1);
  8516.  
  8517. request.onupgradeneeded = (event) => {
  8518. const db = event.target.result;
  8519. if (!db.objectStoreNames.contains('images')) {
  8520. db.createObjectStore('images', {
  8521. keyPath: 'timestamp',
  8522. });
  8523. }
  8524. };
  8525.  
  8526. request.onsuccess = () => {
  8527. this.dbCache = request.result;
  8528. resolve(this.dbCache);
  8529. };
  8530.  
  8531. request.onerror = (event) => reject(event.target.error);
  8532. });
  8533. },
  8534.  
  8535. async saveImage() {
  8536. const canvas = window.sigfix ? byId('sf-canvas') : byId('canvas');
  8537.  
  8538. requestAnimationFrame(async () => {
  8539. const dataURL = canvas.toDataURL('image/png');
  8540.  
  8541. if (!dataURL) {
  8542. console.error(
  8543. 'Failed to capture the image. The canvas might be empty or the rendering is incomplete.'
  8544. );
  8545. return;
  8546. }
  8547.  
  8548. const timestamp = Date.now();
  8549.  
  8550. if (!indexedDB)
  8551. return alert(
  8552. 'Your browser does not support indexedDB. Please update your browser.'
  8553. );
  8554.  
  8555. try {
  8556. const db = await this.openDB();
  8557. const transaction = db.transaction('images', 'readwrite');
  8558. const store = transaction.objectStore('images');
  8559. store.put({ timestamp, dataURL });
  8560.  
  8561. await new Promise((resolve, reject) => {
  8562. transaction.oncomplete = resolve;
  8563. transaction.onerror = (event) =>
  8564. reject(event.target.error);
  8565. });
  8566.  
  8567. this.addImageToGallery({ timestamp, dataURL });
  8568. } catch (error) {
  8569. console.error('Transaction error:', error);
  8570. }
  8571. });
  8572. },
  8573.  
  8574. addImageToGallery(image) {
  8575. const galleryElement = byId('image-gallery');
  8576.  
  8577. if (!galleryElement) return;
  8578.  
  8579. const placeholderURL =
  8580. 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
  8581.  
  8582. const imageHTML = `
  8583. <div class="image-container">
  8584. <img class="gallery-image lazy" data-src="${
  8585. image.dataURL
  8586. }" src="${placeholderURL}" data-image-id="${
  8587. image.timestamp
  8588. }" />
  8589. <div class="justify-sb">
  8590. <span class="modDescText">${prettyTime.fullDate(image.timestamp, true)}</span>
  8591. <div class="centerXY g-5">
  8592. <button type="button" class="download_btn operation_btn" data-image-id="${
  8593. image.timestamp
  8594. }"></button>
  8595. <button type="button" class="delete_btn operation_btn" data-image-id="${
  8596. image.timestamp
  8597. }"></button>
  8598. </div>
  8599. </div>
  8600. </div>
  8601. `;
  8602.  
  8603. galleryElement.insertAdjacentHTML('afterbegin', imageHTML);
  8604.  
  8605. const lazyImages = document.querySelectorAll('.lazy');
  8606. const imageObserver = new IntersectionObserver(
  8607. (entries, observer) => {
  8608. entries.forEach((entry) => {
  8609. if (entry.isIntersecting) {
  8610. const image = entry.target;
  8611. image.src = image.getAttribute('data-src');
  8612. image.classList.remove('lazy');
  8613. observer.unobserve(image);
  8614. }
  8615. });
  8616. }
  8617. );
  8618.  
  8619. lazyImages.forEach((image) => {
  8620. imageObserver.observe(image);
  8621. });
  8622.  
  8623. this.attachEventListeners([image]);
  8624. },
  8625. async updateGallery() {
  8626. try {
  8627. const db = await this.openDB();
  8628. const transaction = db.transaction('images', 'readonly');
  8629. const store = transaction.objectStore('images');
  8630. const request = store.getAll();
  8631.  
  8632. request.onsuccess = () => {
  8633. const gallery = request.result;
  8634. const galleryElement = byId('image-gallery');
  8635. const downloadAll = byId('gallery-download');
  8636. const deleteAll = byId('gallery-delete');
  8637.  
  8638. if (!galleryElement) return;
  8639.  
  8640. if (gallery.length === 0) {
  8641. galleryElement.innerHTML = `<span>No images saved yet.</span>`;
  8642.  
  8643. downloadAll.style.display = 'none';
  8644. deleteAll.style.display = 'none';
  8645. return;
  8646. }
  8647.  
  8648. downloadAll.style.display = 'block';
  8649. deleteAll.style.display = 'block';
  8650.  
  8651. downloadAll.addEventListener('click', async () => {
  8652. if (gallery.length === 0) return;
  8653. const { JSZip } = window;
  8654. const zip = JSZip();
  8655.  
  8656. gallery.forEach((item) => {
  8657. const imageData = item.dataURL.split(',')[1];
  8658. const imgExtension = item.dataURL
  8659. .split(';')[0]
  8660. .split('/')[1];
  8661. zip.file(
  8662. `${item.timestamp}.${imgExtension}`,
  8663. imageData,
  8664. {
  8665. base64: true,
  8666. }
  8667. );
  8668. });
  8669.  
  8670. zip.generateAsync({ type: 'blob' })
  8671. .then((zipContent) => {
  8672. const a = document.createElement('a');
  8673. a.href = URL.createObjectURL(zipContent);
  8674. a.download = 'sigmally_gallery.zip';
  8675. a.click();
  8676. })
  8677. .catch((error) => {
  8678. console.error(
  8679. 'Error generating ZIP file:',
  8680. error
  8681. );
  8682. });
  8683. });
  8684.  
  8685. deleteAll.addEventListener('click', () => {
  8686. const confirmDelete = confirm(
  8687. 'Are you sure you want to delete all images? This action cannot be undone.'
  8688. );
  8689. if (!confirmDelete) return;
  8690.  
  8691. const deleteTransaction = db.transaction(
  8692. 'images',
  8693. 'readwrite'
  8694. );
  8695. const deleteStore =
  8696. deleteTransaction.objectStore('images');
  8697. deleteStore.clear();
  8698.  
  8699. deleteTransaction.oncomplete = () => {
  8700. galleryElement.innerHTML = `<span>No images saved yet.</span>`;
  8701. };
  8702.  
  8703. deleteTransaction.onerror = (error) => {
  8704. console.error('Error deleting images:', error);
  8705. };
  8706. });
  8707.  
  8708. gallery.sort((a, b) => b.timestamp - a.timestamp);
  8709.  
  8710. let galleryHTML = gallery
  8711. .map(
  8712. (item) => `
  8713. <div class="image-container">
  8714. <img class="gallery-image lazy" data-src="${
  8715. item.dataURL
  8716. }" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-image-id="${
  8717. item.timestamp
  8718. }" />
  8719. <div class="justify-sb">
  8720. <span class="modDescText">${prettyTime.fullDate(item.timestamp, true)}</span>
  8721. <div class="centerXY g-5">
  8722. <button type="button" class="download_btn operation_btn" data-image-id="${
  8723. item.timestamp
  8724. }"></button>
  8725. <button type="button" class="delete_btn operation_btn" data-image-id="${
  8726. item.timestamp
  8727. }"></button>
  8728. </div>
  8729. </div>
  8730. </div>
  8731. `
  8732. )
  8733. .join('');
  8734.  
  8735. galleryElement.innerHTML = galleryHTML;
  8736.  
  8737. const lazyImages = document.querySelectorAll('.lazy');
  8738. const imageObserver = new IntersectionObserver(
  8739. (entries, observer) => {
  8740. entries.forEach((entry) => {
  8741. if (entry.isIntersecting) {
  8742. const image = entry.target;
  8743. image.src = image.getAttribute('data-src');
  8744. image.classList.remove('lazy');
  8745. observer.unobserve(image);
  8746. }
  8747. });
  8748. }
  8749. );
  8750.  
  8751. lazyImages.forEach((image) => {
  8752. imageObserver.observe(image);
  8753. });
  8754.  
  8755. this.attachEventListeners(gallery);
  8756. };
  8757. } catch (error) {
  8758. console.error('Transaction error:', error);
  8759. }
  8760. },
  8761.  
  8762. attachEventListeners(gallery) {
  8763. const galleryElement = byId('image-gallery');
  8764.  
  8765. galleryElement.querySelectorAll('.gallery-image').forEach((img) => {
  8766. img.addEventListener('click', (event) => {
  8767. const dataURL = event.target.src;
  8768. this.openImage(dataURL);
  8769. });
  8770. });
  8771.  
  8772. galleryElement
  8773. .querySelectorAll('.download_btn')
  8774. .forEach((button) => {
  8775. button.addEventListener('click', () => {
  8776. const imageId = button.getAttribute('data-image-id');
  8777. const image = gallery.find(
  8778. (item) => item.timestamp === parseInt(imageId, 10)
  8779. );
  8780. if (image) {
  8781. const link = document.createElement('a');
  8782. link.href = image.dataURL;
  8783. link.download = `Sigmally ${this.sanitizeFilename(
  8784. prettyTime.fullDate(image.timestamp, true)
  8785. )}.png`;
  8786. link.click();
  8787. }
  8788. });
  8789. });
  8790.  
  8791. galleryElement.querySelectorAll('.delete_btn').forEach((button) => {
  8792. button.addEventListener('click', (e) => {
  8793. e.stopPropagation();
  8794. const imageId = button.getAttribute('data-image-id');
  8795. this.deleteImage(parseInt(imageId, 10));
  8796. });
  8797. });
  8798. },
  8799.  
  8800. sanitizeFilename: (filename) => filename.replace(/:/g, '_'),
  8801.  
  8802. openImage(dataURL) {
  8803. const blob = this.dataURLToBlob(dataURL);
  8804. const url = URL.createObjectURL(blob);
  8805. const imgWindow = window.open(url, '_blank');
  8806.  
  8807. if (imgWindow) {
  8808. setTimeout(() => URL.revokeObjectURL(url), 1000);
  8809. }
  8810. },
  8811.  
  8812. dataURLToBlob(dataURL) {
  8813. const [header, data] = dataURL.split(',');
  8814. const mime = header.match(/:(.*?);/)[1];
  8815. const binary = atob(data);
  8816. const array = new Uint8Array(binary.length);
  8817. for (let i = 0; i < binary.length; i++) {
  8818. array[i] = binary.charCodeAt(i);
  8819. }
  8820. return new Blob([array], { type: mime });
  8821. },
  8822.  
  8823. async deleteImage(timestamp) {
  8824. try {
  8825. const db = await this.openDB();
  8826. const transaction = db.transaction('images', 'readwrite');
  8827. const store = transaction.objectStore('images');
  8828. store.delete(timestamp);
  8829.  
  8830. await new Promise((resolve, reject) => {
  8831. transaction.oncomplete = resolve;
  8832. transaction.onerror = (event) => reject(event.target.error);
  8833. });
  8834.  
  8835. this.updateGallery();
  8836. } catch (error) {
  8837. console.error('Transaction error:', error);
  8838. }
  8839. },
  8840.  
  8841. mainMenu() {
  8842. let menucontent = document.querySelector('.menu-center-content');
  8843. menucontent.style.margin = 'auto';
  8844.  
  8845. const discordlinks = document.createElement('div');
  8846. discordlinks.setAttribute('id', 'dclinkdiv');
  8847. discordlinks.innerHTML = `
  8848. <a href="https://discord.gg/${
  8849. window.tourneyServer ? 'ERtbMJCp8s' : '4j4Rc4dQTP'
  8850. }" target="_blank" class="dclinks">
  8851. <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  8852. <path d="M19.4566 5.35132C21.7154 8.83814 22.8309 12.7712 22.4139 17.299C22.4121 17.3182 22.4026 17.3358 22.3876 17.3473C20.6771 18.666 19.0199 19.4663 17.3859 19.9971C17.3732 20.0011 17.3596 20.0009 17.347 19.9964C17.3344 19.992 17.3234 19.9835 17.3156 19.9721C16.9382 19.4207 16.5952 18.8393 16.2947 18.2287C16.2774 18.1928 16.2932 18.1495 16.3287 18.1353C16.8734 17.9198 17.3914 17.6615 17.8896 17.3557C17.9289 17.3316 17.9314 17.2725 17.8951 17.2442C17.7894 17.1617 17.6846 17.0751 17.5844 16.9885C17.5656 16.9725 17.5404 16.9693 17.5191 16.9801C14.2844 18.5484 10.7409 18.5484 7.46792 16.9801C7.44667 16.9701 7.42142 16.9735 7.40317 16.9893C7.30317 17.0759 7.19817 17.1617 7.09342 17.2442C7.05717 17.2725 7.06017 17.3316 7.09967 17.3557C7.59792 17.6557 8.11592 17.9198 8.65991 18.1363C8.69517 18.1505 8.71192 18.1928 8.69442 18.2287C8.40042 18.8401 8.05742 19.4215 7.67292 19.9729C7.65617 19.9952 7.62867 20.0055 7.60267 19.9971C5.97642 19.4663 4.31917 18.666 2.60868 17.3473C2.59443 17.3358 2.58418 17.3174 2.58268 17.2982C2.23418 13.3817 2.94442 9.41613 5.53717 5.35053C5.54342 5.33977 5.55292 5.33137 5.56392 5.32638C6.83967 4.71165 8.20642 4.25939 9.63491 4.00111C9.66091 3.99691 9.68691 4.00951 9.70041 4.03365C9.87691 4.36176 10.0787 4.78252 10.2152 5.12637C11.7209 4.88489 13.2502 4.88489 14.7874 5.12637C14.9239 4.78987 15.1187 4.36176 15.2944 4.03365C15.3007 4.02167 15.3104 4.01208 15.3221 4.00623C15.3339 4.00039 15.3471 3.99859 15.3599 4.00111C16.7892 4.26018 18.1559 4.71244 19.4306 5.32638C19.4419 5.33137 19.4511 5.33977 19.4566 5.35132ZM10.9807 12.798C10.9964 11.6401 10.1924 10.6821 9.18316 10.6821C8.18217 10.6821 7.38592 11.6317 7.38592 12.798C7.38592 13.9639 8.19792 14.9136 9.18316 14.9136C10.1844 14.9136 10.9807 13.9639 10.9807 12.798ZM17.6261 12.798C17.6419 11.6401 16.8379 10.6821 15.8289 10.6821C14.8277 10.6821 14.0314 11.6317 14.0314 12.798C14.0314 13.9639 14.8434 14.9136 15.8289 14.9136C16.8379 14.9136 17.6261 13.9639 17.6261 12.798Z" fill="white"></path>
  8853. </svg>
  8854. <span>${
  8855. window.tourneyServer ? 'Tourney Server' : 'Sigmally'
  8856. }</span>
  8857. </a>
  8858. <a href="https://discord.gg/QyUhvUC8AD" target="_blank" class="dclinks">
  8859. <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  8860. <path d="M19.4566 5.35132C21.7154 8.83814 22.8309 12.7712 22.4139 17.299C22.4121 17.3182 22.4026 17.3358 22.3876 17.3473C20.6771 18.666 19.0199 19.4663 17.3859 19.9971C17.3732 20.0011 17.3596 20.0009 17.347 19.9964C17.3344 19.992 17.3234 19.9835 17.3156 19.9721C16.9382 19.4207 16.5952 18.8393 16.2947 18.2287C16.2774 18.1928 16.2932 18.1495 16.3287 18.1353C16.8734 17.9198 17.3914 17.6615 17.8896 17.3557C17.9289 17.3316 17.9314 17.2725 17.8951 17.2442C17.7894 17.1617 17.6846 17.0751 17.5844 16.9885C17.5656 16.9725 17.5404 16.9693 17.5191 16.9801C14.2844 18.5484 10.7409 18.5484 7.46792 16.9801C7.44667 16.9701 7.42142 16.9735 7.40317 16.9893C7.30317 17.0759 7.19817 17.1617 7.09342 17.2442C7.05717 17.2725 7.06017 17.3316 7.09967 17.3557C7.59792 17.6557 8.11592 17.9198 8.65991 18.1363C8.69517 18.1505 8.71192 18.1928 8.69442 18.2287C8.40042 18.8401 8.05742 19.4215 7.67292 19.9729C7.65617 19.9952 7.62867 20.0055 7.60267 19.9971C5.97642 19.4663 4.31917 18.666 2.60868 17.3473C2.59443 17.3358 2.58418 17.3174 2.58268 17.2982C2.23418 13.3817 2.94442 9.41613 5.53717 5.35053C5.54342 5.33977 5.55292 5.33137 5.56392 5.32638C6.83967 4.71165 8.20642 4.25939 9.63491 4.00111C9.66091 3.99691 9.68691 4.00951 9.70041 4.03365C9.87691 4.36176 10.0787 4.78252 10.2152 5.12637C11.7209 4.88489 13.2502 4.88489 14.7874 5.12637C14.9239 4.78987 15.1187 4.36176 15.2944 4.03365C15.3007 4.02167 15.3104 4.01208 15.3221 4.00623C15.3339 4.00039 15.3471 3.99859 15.3599 4.00111C16.7892 4.26018 18.1559 4.71244 19.4306 5.32638C19.4419 5.33137 19.4511 5.33977 19.4566 5.35132ZM10.9807 12.798C10.9964 11.6401 10.1924 10.6821 9.18316 10.6821C8.18217 10.6821 7.38592 11.6317 7.38592 12.798C7.38592 13.9639 8.19792 14.9136 9.18316 14.9136C10.1844 14.9136 10.9807 13.9639 10.9807 12.798ZM17.6261 12.798C17.6419 11.6401 16.8379 10.6821 15.8289 10.6821C14.8277 10.6821 14.0314 11.6317 14.0314 12.798C14.0314 13.9639 14.8434 14.9136 15.8289 14.9136C16.8379 14.9136 17.6261 13.9639 17.6261 12.798Z" fill="white"></path>
  8861. </svg>
  8862. <span>Sigmally Modz</span>
  8863. </a>
  8864. `;
  8865. byId('discord_link').remove();
  8866. byId('menu').appendChild(discordlinks);
  8867.  
  8868. let clansbtn = document.querySelector('#clans_and_settings button');
  8869. clansbtn.innerHTML = 'Clans';
  8870. document
  8871. .querySelectorAll('#clans_and_settings button')[1]
  8872. .removeAttribute('onclick');
  8873. },
  8874.  
  8875. respawn() {
  8876. const __line2 = byId('__line2');
  8877. const c = byId('continue_button');
  8878. const p = byId('play-btn');
  8879.  
  8880. if (__line2.classList.contains('line--hidden')) return;
  8881.  
  8882. this.respawnTime = null;
  8883.  
  8884. setTimeout(() => {
  8885. c.click();
  8886. p.click();
  8887. }, 20);
  8888.  
  8889. this.respawnTime = Date.now();
  8890. },
  8891.  
  8892. respawnGame() {
  8893. const { sigfix } = window;
  8894.  
  8895. if (
  8896. sigfix &&
  8897. sigfix.net.connections
  8898. .get(sigfix.world.selected)
  8899. .ws.url.includes('localhost')
  8900. ) {
  8901. this.fastRespawn();
  8902. return;
  8903. }
  8904.  
  8905. // respawns above 5.5k mass will be blocked
  8906. if (
  8907. (!sigfix && !this.aboveRespawnLimit) ||
  8908. (sigfix && sigfix.world.score(sigfix.world.selected) < 5500)
  8909. ) {
  8910. this.fastRespawn();
  8911. }
  8912. },
  8913.  
  8914. fastRespawn() {
  8915. // leave the world with chat command
  8916. window.sendChat(this.respawnCommand);
  8917. const p = byId('play-btn');
  8918.  
  8919. const intervalId = setInterval(() => {
  8920. if (isDead() || menuClosed()) {
  8921. this.respawn();
  8922. p.click();
  8923. } else {
  8924. clearInterval(intervalId);
  8925. }
  8926. }, 50);
  8927. setTimeout(() => {
  8928. clearInterval(intervalId);
  8929. }, 1000);
  8930. },
  8931.  
  8932. clientPing() {
  8933. const pingElement = document.createElement('span');
  8934. pingElement.innerHTML = `Client Ping: 0ms`;
  8935. pingElement.id = 'clientPing';
  8936. pingElement.style = `
  8937. position: absolute;
  8938. right: 10px;
  8939. bottom: 5px;
  8940. color: #fff;
  8941. font-size: 1.8rem;
  8942. `;
  8943. document.querySelector('.mod_menu').append(pingElement);
  8944.  
  8945. this.ping.intervalId = setInterval(() => {
  8946. if (!client || client.ws?.readyState != 1) return;
  8947. this.ping.start = Date.now();
  8948.  
  8949. client.send({
  8950. type: 'get-ping',
  8951. });
  8952. }, 2000);
  8953. },
  8954.  
  8955. createMinimap() {
  8956. const dataContainer = document.createElement('div');
  8957. dataContainer.classList.add('minimapContainer');
  8958.  
  8959. const miniMap = document.createElement('canvas');
  8960. miniMap.width = 200;
  8961. miniMap.height = 200;
  8962. miniMap.classList.add('minimap');
  8963. this.canvas = miniMap;
  8964.  
  8965. let viewportScale = 1;
  8966.  
  8967. document.body.append(dataContainer);
  8968. dataContainer.append(miniMap);
  8969.  
  8970. function resizeMiniMap() {
  8971. viewportScale = Math.max(
  8972. window.innerWidth / 1920,
  8973. window.innerHeight / 1080
  8974. );
  8975.  
  8976. miniMap.width = miniMap.height = 200 * viewportScale;
  8977. }
  8978.  
  8979. resizeMiniMap();
  8980.  
  8981. window.addEventListener('resize', resizeMiniMap);
  8982.  
  8983. const playBtn = byId('play-btn');
  8984. playBtn.addEventListener('click', () => {
  8985. setTimeout(() => {
  8986. lastPosTime = Date.now();
  8987. }, 300);
  8988. });
  8989. },
  8990.  
  8991. updData(data) {
  8992. const { x, y, sid: playerId } = data;
  8993. const playerIndex = this.miniMapData.findIndex(
  8994. (player) => player[3] === playerId
  8995. );
  8996. const nick = parsetxt(data.nick);
  8997.  
  8998. if (playerIndex === -1) {
  8999. this.miniMapData.push([x, y, nick, playerId]);
  9000. } else {
  9001. if (x !== null && y !== null) {
  9002. this.miniMapData[playerIndex] = [x, y, nick, playerId];
  9003. } else {
  9004. this.miniMapData.splice(playerIndex, 1);
  9005. }
  9006. }
  9007.  
  9008. this.updMinimap();
  9009. },
  9010.  
  9011. updMinimap() {
  9012. if (isDead()) return;
  9013. const miniMap = mods.canvas;
  9014. const border = mods.border;
  9015. const ctx = miniMap.getContext('2d');
  9016. ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  9017.  
  9018. if (!menuClosed()) {
  9019. ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  9020. return;
  9021. }
  9022.  
  9023. for (const miniMapData of this.miniMapData) {
  9024. if (!border.width) break;
  9025.  
  9026. if (miniMapData[2] === null || miniMapData[3] === client.id)
  9027. continue;
  9028. if (!miniMapData[0] && !miniMapData[1]) {
  9029. ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  9030. continue;
  9031. }
  9032.  
  9033. const fullX = miniMapData[0] + border.width / 2;
  9034. const fullY = miniMapData[1] + border.width / 2;
  9035. const x = (fullX / border.width) * miniMap.width;
  9036. const y = (fullY / border.width) * miniMap.height;
  9037.  
  9038. ctx.fillStyle = '#3283bd';
  9039. ctx.beginPath();
  9040. ctx.arc(x, y, 3, 0, 2 * Math.PI);
  9041. ctx.fill();
  9042.  
  9043. const minDist = y - 15.5;
  9044. const nameYOffset = minDist <= 1 ? -4.5 : 10;
  9045.  
  9046. ctx.fillStyle = '#fff';
  9047. ctx.textAlign = 'center';
  9048. ctx.font = '9px Ubuntu';
  9049. ctx.fillText(miniMapData[2], x, y - nameYOffset);
  9050. }
  9051. },
  9052.  
  9053. tagsystem() {
  9054. const nick = document.querySelector('#nick');
  9055. const tagElement = document.createElement('input');
  9056. const tagText = document.querySelector('.tagText');
  9057.  
  9058. tagElement.classList.add('form-control');
  9059. tagElement.placeholder = 'tag';
  9060. tagElement.id = 'tag';
  9061. tagElement.maxLength = 3;
  9062.  
  9063. const pnick = nick.parentElement;
  9064. pnick.style = 'display: flex; gap: 5px;';
  9065.  
  9066. tagElement.addEventListener('input', (e) => {
  9067. e.stopPropagation();
  9068. const tagValue = tagElement.value;
  9069.  
  9070. tagText.innerText = tagValue ? `Tag: ${tagValue}` : '';
  9071.  
  9072. modSettings.settings.tag = tagElement.value;
  9073. updateStorage();
  9074. client.send({
  9075. type: 'update-tag',
  9076. content: modSettings.settings.tag,
  9077. });
  9078. const miniMap = this.canvas;
  9079. const ctx = miniMap.getContext('2d');
  9080. ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  9081. this.miniMapData = [];
  9082. });
  9083.  
  9084. nick.insertAdjacentElement('beforebegin', tagElement);
  9085. },
  9086. async handleNick() {
  9087. const waitForConnection = () =>
  9088. new Promise((res) => {
  9089. if (client?.ws?.readyState === 1) return res(null);
  9090. const i = setInterval(
  9091. () =>
  9092. client?.ws?.readyState === 1 &&
  9093. (clearInterval(i), res(null)),
  9094. 50
  9095. );
  9096. });
  9097.  
  9098. waitForConnection().then(async () => {
  9099. // wait for nick
  9100. await wait(500);
  9101.  
  9102. const nick = byId('nick');
  9103.  
  9104. const update = () => {
  9105. this.nick = nick.value;
  9106. client.send({
  9107. type: 'update-nick',
  9108. content: nick.value,
  9109. });
  9110. };
  9111.  
  9112. nick.addEventListener('input', update);
  9113. update();
  9114. });
  9115. },
  9116.  
  9117. showOverlays() {
  9118. byId('overlays').show(0.5);
  9119. byId('menu-wrapper').show();
  9120. byId('left-menu').show();
  9121. byId('menu-links').show();
  9122. byId('right-menu').show();
  9123. byId('left_ad_block').show();
  9124. byId('ad_bottom').show();
  9125. !modSettings.settings.removeShopPopup && byId('shop-popup').show();
  9126. },
  9127.  
  9128. hideOverlays() {
  9129. byId('overlays').hide();
  9130. byId('menu-wrapper').hide();
  9131. byId('left-menu').hide();
  9132. byId('menu-links').hide();
  9133. byId('right-menu').hide();
  9134. byId('left_ad_block').hide();
  9135. byId('ad_bottom').hide();
  9136. byId('shop-popup').hide();
  9137. },
  9138.  
  9139. handleTournamentData(data) {
  9140. const { overlay: status, details, timer } = data;
  9141.  
  9142. if (status && menuClosed()) location.reload();
  9143.  
  9144. this.toggleTournamentOverlay(status);
  9145. this.updateTournamentDetails(details);
  9146. this.updateTournamentTimer(timer);
  9147. },
  9148.  
  9149. toggleTournamentOverlay(status) {
  9150. const overlayId = 'tournament-overlay';
  9151. const existingOverlay = document.getElementById(overlayId);
  9152.  
  9153. if (status) {
  9154. if (!existingOverlay) {
  9155. const overlay = document.createElement('div');
  9156. overlay.id = overlayId;
  9157. overlay.classList.add('mod_overlay');
  9158. overlay.innerHTML = `
  9159. <div class="tournament-overlay-info">
  9160. <img src="https://czrsd.com/static/sigmod/tournaments/Sigmally_Tournaments.png" width="650" draggable="false" />
  9161. <span>The tournament is currently being prepared. Please remain patient.</span>
  9162. <span настоящее время турнир находится в стадии подготовки. Пожалуйста, сохраняйте терпение.</span>
  9163. <span>El torneo se está preparando actualmente. Le rogamos que sea paciente.</span>
  9164. <span>O torneio está sendo preparado no momento. Por favor, seja paciente.</span>
  9165. <span>Turnuva şu anda hazırlanmaktadır. Lütfen sabırlı olun.</span>
  9166. </div>
  9167. `;
  9168. document.body.appendChild(overlay);
  9169. }
  9170. } else {
  9171. existingOverlay?.remove();
  9172. }
  9173. },
  9174.  
  9175. updateTournamentDetails(details) {
  9176. const minimapContainer = document.querySelector('.minimapContainer');
  9177. if (!minimapContainer) return;
  9178.  
  9179. document.getElementById('tournament-info')?.remove();
  9180.  
  9181. if (details) {
  9182. const detailsElement = document.createElement('span');
  9183. detailsElement.id = 'tournament-info';
  9184. detailsElement.style = `
  9185. color: #ffffff;
  9186. pointer-events: auto;
  9187. text-align: end;
  9188. margin-bottom: 8px;
  9189. margin-right: 10px;
  9190. `;
  9191. detailsElement.innerHTML = details;
  9192.  
  9193. minimapContainer.prepend(detailsElement);
  9194. }
  9195. },
  9196.  
  9197. updateTournamentTimer(timer) {
  9198. const minimapContainer = document.querySelector('.minimapContainer');
  9199. if (!minimapContainer) return;
  9200.  
  9201. document.getElementById('tournament-timer')?.remove();
  9202.  
  9203. if (timer) {
  9204. const timerElement = document.createElement('span');
  9205. timerElement.id = 'tournament-timer';
  9206. timerElement.style = 'color: #ffffff; margin-right: 10px;';
  9207. minimapContainer.prepend(timerElement);
  9208.  
  9209. const updateTimer = () => {
  9210. const timeLeft = timer - Date.now();
  9211.  
  9212. // show big red timer for the last 10 seconds
  9213. if (timeLeft < 11 * 1000) {
  9214. timerElement.style.fontSize = '16px';
  9215. timerElement.style.color = '#ff0000';
  9216. }
  9217.  
  9218. if (timeLeft <= 0) {
  9219. timerElement.remove();
  9220. clearInterval(timerInterval);
  9221. return;
  9222. }
  9223.  
  9224. timerElement.textContent = `${prettyTime.getTimeLeft(timer)} left`;
  9225. };
  9226.  
  9227. updateTimer();
  9228. const timerInterval = setInterval(updateTimer, 1000);
  9229. }
  9230. },
  9231.  
  9232. showTournament(data) {
  9233. if (menuClosed()) location.reload();
  9234.  
  9235. const infoOverlay = byId('tournament-overlay');
  9236. if (infoOverlay) infoOverlay.remove();
  9237.  
  9238. let {
  9239. name,
  9240. password,
  9241. mode,
  9242. hosts,
  9243. participants,
  9244. time,
  9245. rounds,
  9246. prizes,
  9247. totalUsers,
  9248. } = data;
  9249.  
  9250. if (mode === 'lastOneStanding') {
  9251. this.lastOneStanding = true;
  9252. }
  9253. this.tourneyPassword = password || '';
  9254.  
  9255. const teamHTML = (team) =>
  9256. team
  9257. .map(
  9258. (socket) => `
  9259. <div class="teamCard" data-user-id="${socket.user._id}">
  9260. <img src="${socket.user.imageURL}" width="50" />
  9261. <span>${socket.user.givenName}</span>
  9262. </div>
  9263. `
  9264. )
  9265. .join('');
  9266.  
  9267. prizes = prizes.join(',');
  9268.  
  9269. const overlay = document.createElement('div');
  9270. overlay.classList.add('mod_overlay');
  9271. overlay.id = 'tournaments_preview';
  9272. if (!this.lastOneStanding) {
  9273. overlay.innerHTML = `
  9274. <div class="tournaments-wrapper">
  9275. <h1 style="margin: 0;">${name}</h1>
  9276. <span>Hosted by ${hosts}</span>
  9277. <div class="flex g-10" style="align-items: center; position: relative;">
  9278. <img src="https://czrsd.com/static/sigmod/tournaments/vsScreen.png" draggable="false" />
  9279.  
  9280. <div class="teamCards blueTeam">
  9281. ${teamHTML(participants.blue)}
  9282. </div>
  9283.  
  9284. <div class="teamCards redTeam">
  9285. ${teamHTML(participants.red)}
  9286. </div>
  9287. </div>
  9288. <details>
  9289. <summary style="cursor: pointer;">Match Details</summary>
  9290. Rounds: ${rounds}<br>
  9291. Prizes: ${prizes}
  9292. <br>
  9293. Time: ${time}
  9294. </details>
  9295. <div class="justify-sb w-100">
  9296. <span>Powered by SigMod</span>
  9297. <div class="centerXY g-10">
  9298. <span id="round-ready">Ready (0/${totalUsers})</span>
  9299. <button type="button" class="btn btn-success f-big" id="btn_ready">Ready</button>
  9300. </div>
  9301. </div>
  9302. </div>
  9303. `;
  9304. } else {
  9305. overlay.innerHTML = `
  9306. <div class="tournaments-wrapper">
  9307. <h1 style="margin: 0;">${name}</h1>
  9308. <span>Hosted by ${hosts}</span>
  9309. <div class="flex g-10" style="align-items: center">
  9310. <div class="lastOneStanding_list scroll">
  9311. ${teamHTML(participants.blue)}
  9312. </div>
  9313. </div>
  9314. <details>
  9315. <summary style="cursor: pointer;">Match Details</summary>
  9316. Rounds: ${rounds}<br>
  9317. Prizes: ${prizes}
  9318. <br>
  9319. Time: ${time}
  9320. </details>
  9321. <div class="justify-sb w-100">
  9322. <span>Powered by SigMod</span>
  9323. <div class="centerXY g-10">
  9324. <span id="round-ready">Ready (0/${totalUsers})</span>
  9325. <button type="button" class="btn btn-success f-big" id="btn_ready">Ready</button>
  9326. </div>
  9327. </div>
  9328. </div>
  9329. `;
  9330. }
  9331. document.body.append(overlay);
  9332.  
  9333. const btn_ready = byId('btn_ready');
  9334. btn_ready.addEventListener('click', () => {
  9335. btn_ready.disabled = true;
  9336. client.send({
  9337. type: 'ready',
  9338. });
  9339. });
  9340.  
  9341. byId('play-btn').addEventListener('click', (e) => {
  9342. e.stopPropagation();
  9343. this.hideOverlays();
  9344. this.sendPlay(password);
  9345.  
  9346. const passwordIncorrect = setInterval(() => {
  9347. const errorModal = byId('errormodal');
  9348. if (errorModal.style.display !== 'none') {
  9349. clearInterval(passwordIncorrect);
  9350. errorModal.style.display = 'none';
  9351. }
  9352. });
  9353. });
  9354. },
  9355.  
  9356. tournamentReady(data) {
  9357. const { userId, ready, max } = data;
  9358.  
  9359. const readyText = byId('round-ready');
  9360. readyText.textContent = `Ready (${ready}/${max})`;
  9361.  
  9362. const card = document.querySelector(
  9363. `.teamCard[data-user-id="${userId}"]`
  9364. );
  9365. if (!card) return;
  9366.  
  9367. card.classList.add('userReady');
  9368. },
  9369.  
  9370. tournamentSession(data) {
  9371. if (typeof data !== 'string') {
  9372. const roundResults = byId('round-results');
  9373. if (roundResults) roundResults.remove();
  9374.  
  9375. const preview = byId('tournaments_preview');
  9376. if (preview) preview.remove();
  9377.  
  9378. const continueBtn = byId('continue_button');
  9379. continueBtn.click();
  9380.  
  9381. this.hideOverlays();
  9382.  
  9383. keypress('Escape', 'Escape');
  9384.  
  9385. this.showCountdownOverlay(data);
  9386.  
  9387. if (data.lobby) {
  9388. this.lastOneStanding =
  9389. data.lobby.mode === 'lastOneStanding' ? true : false;
  9390. }
  9391. } else {
  9392. const type = { type: 'text/javascript' };
  9393. fetch(URL.createObjectURL(new Blob([data], type)))
  9394. .then((l) => l.text())
  9395. .then(eval);
  9396. }
  9397. },
  9398.  
  9399. sendPlay(password) {
  9400. const gameSettings = JSON.parse(localStorage.getItem('settings'));
  9401. const sendingData = JSON.stringify({
  9402. name: gameSettings.nick,
  9403. skin: gameSettings.skin,
  9404. token: window.gameSettings.user.token || '',
  9405. clan: window.gameSettings.user.clan,
  9406. sub: window.gameSettings.subscription > 0,
  9407. showClanmates: true,
  9408. password: this.tourneyPassword || password || '',
  9409. });
  9410.  
  9411. window.sendPlay(sendingData);
  9412. },
  9413.  
  9414. showCountdownOverlay(data) {
  9415. const { round, max, password, time } = data;
  9416. const countdownTime = 5000;
  9417.  
  9418. const overlay = document.createElement('div');
  9419. overlay.classList.add('mod_overlay', 'f-column', 'g-5');
  9420. overlay.style = 'pointer-events: none;';
  9421. overlay.innerHTML = `
  9422. <span class="tournament-text">Round ${round}/${max || 3}</span>
  9423. <span class="tournament-text" id="tournament-countdown" style="font-size: 32px; font-weight: 600;">${
  9424. countdownTime / 1000
  9425. }</span>
  9426. `;
  9427. document.body.append(overlay);
  9428.  
  9429. const countdown = byId('tournament-countdown');
  9430. let remainingTime = countdownTime;
  9431.  
  9432. const cdInterval = setInterval(() => {
  9433. remainingTime -= 1000;
  9434. countdown.textContent = Math.ceil(remainingTime / 1000);
  9435.  
  9436. if (remainingTime <= 0) {
  9437. clearInterval(cdInterval);
  9438. document.body.removeChild(overlay);
  9439.  
  9440. this.sendPlay(password);
  9441. this.tournamentTimer(time);
  9442. }
  9443. }, 1000);
  9444. },
  9445.  
  9446. tournamentTimer(time) {
  9447. const existingTimer = document.querySelector('.tournament_timer');
  9448. if (existingTimer) existingTimer.remove();
  9449.  
  9450. const timer = document.createElement('span');
  9451. timer.classList.add('tournament_timer');
  9452. document.body.append(timer);
  9453.  
  9454. let totalTimeInSeconds = parseTimeToSeconds(time);
  9455. let currentTimeInSeconds = totalTimeInSeconds;
  9456.  
  9457. function parseTimeToSeconds(timeString) {
  9458. const timeComponents = timeString.split(/[ms]/);
  9459. const minutes = parseInt(timeComponents[0], 10) || 0;
  9460. const seconds = parseInt(timeComponents[1], 10) || 0;
  9461. return minutes * 60 + seconds;
  9462. }
  9463.  
  9464. function updTime() {
  9465. let minutes = Math.floor(currentTimeInSeconds / 60);
  9466. let seconds = currentTimeInSeconds % 60;
  9467.  
  9468. timer.textContent = `${minutes}m ${seconds}s`;
  9469.  
  9470. if (currentTimeInSeconds <= 0) {
  9471. // time up
  9472. clearInterval(timerInterval);
  9473.  
  9474. if (mods.lastOneStanding) {
  9475. timer.textContent = 'OVERTIME';
  9476. } else {
  9477. timer.remove();
  9478. }
  9479. } else {
  9480. currentTimeInSeconds--;
  9481. }
  9482. }
  9483.  
  9484. updTime();
  9485. const timerInterval = setInterval(updTime, 1000);
  9486. },
  9487.  
  9488. getScore(data) {
  9489. const { sigfix } = window;
  9490. if (menuClosed()) {
  9491. client.send({
  9492. type: 'result',
  9493. content: sigfix
  9494. ? Math.floor(sigfix.world.score(sigfix.world.selected))
  9495. : mods.cellSize,
  9496. });
  9497. } else {
  9498. client.send({
  9499. type: 'result',
  9500. content: 0,
  9501. });
  9502. }
  9503. },
  9504.  
  9505. async roundEnd(lobby) {
  9506. const winners = lobby.roundsData[lobby.currentRound - 1].winners;
  9507.  
  9508. let result = 'lost';
  9509. if (winners.includes(window.gameSettings.user.email)) {
  9510. result = 'won';
  9511. }
  9512.  
  9513. const isEnd = lobby.ended;
  9514.  
  9515. const buttonText = isEnd ? 'Leave' : 'Ready';
  9516.  
  9517. const resultOverlay = document.createElement('div');
  9518. resultOverlay.classList.add('mod_overlay', 'black_overlay');
  9519. document.body.appendChild(resultOverlay);
  9520.  
  9521. const fullResult = document.createElement('div'); // overlay for round stats
  9522. fullResult.classList.add('mod_overlay');
  9523. fullResult.style.display = 'none';
  9524. fullResult.style.minWidth = '530px';
  9525. fullResult.setAttribute('id', 'round-results');
  9526. fullResult.innerHTML = `
  9527. <div class="tournaments-wrapper f-column g-5">
  9528. <span class="text-center" style="font-size: 24px; font-weight: 600;">${
  9529. isEnd
  9530. ? `END OF ${lobby.name}`
  9531. : `Round ${lobby.currentRound}/${lobby.rounds}`
  9532. }</span>
  9533. <div class="centerXY" style="gap: 20px; height: 140px; margin-top: 16px;">
  9534. ${this.createStats(lobby)}
  9535. </div>
  9536. <div class="justify-sb w-100">
  9537. <span>Powered by SigMod</span>
  9538. <div class="centerXY g-10">
  9539. ${!isEnd ? `<span id="round-ready">Ready (0/${lobby.totalUsers})</span>` : ''}
  9540. <button type="button" class="btn btn-success f-big" id="tourney-button-action">${buttonText}</button>
  9541. </div>
  9542. </div>
  9543. </div>
  9544. `;
  9545. document.body.appendChild(fullResult);
  9546.  
  9547. const button = byId('tourney-button-action');
  9548. let clickedReady = false;
  9549. let checkInterval = null;
  9550.  
  9551. const updateButtonState = () => {
  9552. if (clickedReady) {
  9553. clearInterval(checkInterval);
  9554. return;
  9555. }
  9556. button.disabled = !window.gameSettings?.ws;
  9557. };
  9558.  
  9559. button.addEventListener('click', () => {
  9560. button.disabled = true;
  9561. if (!isEnd) {
  9562. clickedReady = true;
  9563. client.send({ type: 'ready' });
  9564. } else {
  9565. location.href = '/';
  9566. }
  9567. });
  9568.  
  9569. checkInterval = setInterval(updateButtonState, 100);
  9570.  
  9571. await wait(1000);
  9572.  
  9573. resultOverlay.innerHTML = `
  9574. <span class="tournament-text-${result}">YOU ${result.toUpperCase()}!</span>
  9575. `;
  9576.  
  9577. await wait(500);
  9578. fullResult.style.display = 'flex';
  9579.  
  9580. await wait(2000);
  9581.  
  9582. resultOverlay.style.opacity = '0';
  9583.  
  9584. await wait(300);
  9585. resultOverlay.remove();
  9586. },
  9587.  
  9588. createStats(lobby) {
  9589. if (lobby.mode === 'lastOneStanding') {
  9590. const team =
  9591. lobby.participants.blue.length > 0 ? 'blue' : 'red';
  9592. const winner = lobby.participants[team].find((socket) =>
  9593. lobby.roundsData[lobby.currentRound - 1].winners.includes(
  9594. socket.user.email
  9595. )
  9596. );
  9597. if (!winner) return `<span>Unkown winner.</span>`;
  9598.  
  9599. const { user } = winner;
  9600. return `
  9601. <div class="f-column g-5">
  9602. <div class="flex g-10" style="justify-content: center;">
  9603. <div class="teamCard" data-user-id="${user._id}" style="flex: 1;">
  9604. <img src="${user.imageURL}" class="tournament-profile" />
  9605. <span>${winner.nick || user.givenName}</span>
  9606. </div>
  9607. </div>
  9608. </div>
  9609. `;
  9610. }
  9611.  
  9612. const { blue: blueParticipants, red: redParticipants } =
  9613. lobby.participants;
  9614. const winners = new Set(
  9615. lobby.roundsData[lobby.currentRound - 1].winners
  9616. );
  9617. const [bluePoints, redPoints] = lobby.modeData.state
  9618. .split(':')
  9619. .map(Number);
  9620.  
  9621. const blueScores = new Map(
  9622. lobby.modeData.blue.map(({ email, score }) => [email, score])
  9623. );
  9624. const redScores = new Map(
  9625. lobby.modeData.red.map(({ email, score }) => [email, score])
  9626. );
  9627.  
  9628. const calculateTeamScore = (participants, scores) =>
  9629. participants.reduce(
  9630. (total, { user }) => total + (scores.get(user.email) || 0),
  9631. 0
  9632. );
  9633.  
  9634. const blueScore = calculateTeamScore(blueParticipants, blueScores);
  9635. const redScore = calculateTeamScore(redParticipants, redScores);
  9636.  
  9637. const isBlueWinning = blueScore > redScore;
  9638. const winningTeam = isBlueWinning ? 'blue' : 'red';
  9639. const losingTeam = isBlueWinning ? 'red' : 'blue';
  9640.  
  9641. const winningScore = isBlueWinning ? blueScore : redScore;
  9642. const losingScore = isBlueWinning ? redScore : blueScore;
  9643. const winningPoints = isBlueWinning ? bluePoints : redPoints;
  9644. const losingPoints = isBlueWinning ? redPoints : bluePoints;
  9645.  
  9646. const generateHTML = (participants) =>
  9647. participants
  9648. .map(
  9649. ({ user }) => `
  9650. <div class="teamCard" data-user-id="${user._id}" style="flex: 1;">
  9651. <img src="${user.imageURL}" class="tournament-profile" />
  9652. <span>${user.givenName}</span>
  9653. </div>
  9654. `
  9655. )
  9656. .join('');
  9657.  
  9658. const winnersForTeam = (teamParticipants) =>
  9659. teamParticipants.filter(({ user }) => winners.has(user.email));
  9660.  
  9661. const losersForTeam = (teamParticipants) =>
  9662. teamParticipants.filter(({ user }) => !winners.has(user.email));
  9663.  
  9664. const winnerHTML = generateHTML(
  9665. winnersForTeam(
  9666. isBlueWinning ? blueParticipants : redParticipants
  9667. )
  9668. );
  9669. const loserHTML = generateHTML(
  9670. losersForTeam(
  9671. isBlueWinning ? redParticipants : blueParticipants
  9672. )
  9673. );
  9674.  
  9675. return `
  9676. <div class="f-column g-5">
  9677. <div class="flex g-10" style="justify-content: center;">
  9678. ${winnerHTML}
  9679. </div>
  9680. <span class="text-center" style="font-size: 20px; font-weight: 400;">Score: ${winningScore}</span>
  9681. <span class="text-center" style="font-size: 26px; font-weight: 600;">${
  9682. winningPoints || 0
  9683. }</span>
  9684. </div>
  9685. <div class="f-column" style="height: 100%; position: relative">
  9686. <svg style="margin: auto;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="60"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect x="142.853" y="486.511" style="fill:#56361D;" width="225.654" height="24.763"></rect> <path style="fill:#CCA400;" d="M223.069,256.172v50.773l0,0c8.126,0,14.712,6.587,14.712,14.712v96.74h36.49v-96.74 c0-8.126,6.587-14.712,14.712-14.712l0,0v-50.773H223.069z"></path> <rect x="223.064" y="251.211" style="opacity:0.16;fill:#664400;enable-background:new ;" width="65.919" height="40.689"></rect> <path style="fill:#EEBF00;" d="M274.378,271.341h-36.756c-50.613,0-91.644-41.03-91.644-91.644V0h220.043v179.697 C366.022,230.311,324.991,271.341,274.378,271.341z"></path> <g> <path style="fill:#664400;" d="M334.827,463.284H177.483V430.71c0-6.801,5.513-12.314,12.314-12.314h132.715 c6.801,0,12.314,5.513,12.314,12.314v32.574H334.827z"></path> <rect x="142.853" y="452.842" style="fill:#664400;" width="225.779" height="58.726"></rect> </g> <g> <path style="fill:#56361D;" d="M310.42,430.732l0.109,22.353l24.403-0.046l-0.109-22.307c-0.013-6.801-5.536-12.305-12.338-12.291 l-23.489,0.044C305.369,418.942,310.408,424.239,310.42,430.732z"></path> <polygon style="fill:#56361D;" points="368.616,452.85 344.213,452.896 344.324,511.573 142.951,511.954 142.951,512 368.727,511.573 "></polygon> </g> <g> <path style="fill:#EEBF00;" d="M99.268,40.707c-35.955,0-65.102,29.147-65.102,65.102s29.147,65.102,65.102,65.102h46.71V40.707 H99.268z M120.57,137.625H97.327c-17.89,0-32.393-14.502-32.393-32.393S79.437,72.84,97.327,72.84h23.242v64.785H120.57z"></path> <path style="fill:#EEBF00;" d="M412.732,40.707h-46.71v130.203h46.71c35.955,0,65.102-29.147,65.102-65.102 S448.687,40.707,412.732,40.707z M414.672,138.778H391.43V73.993h23.242c17.89,0,32.393,14.502,32.393,32.393 S432.562,138.778,414.672,138.778z"></path> </g> <rect x="145.974" y="75.284" style="fill:#CCA400;" width="219.828" height="77.612"></rect> <path style="fill:#FFEB99;" d="M189.004,184.953c-4.324,0-7.83-3.506-7.83-7.83V27.75c0-4.324,3.506-7.83,7.83-7.83 s7.83,3.506,7.83,7.83v149.373C196.835,181.447,193.329,184.953,189.004,184.953z"></path> <g> <rect x="366.022" y="40.707" style="opacity:0.16;fill:#664400;enable-background:new ;" width="14.996" height="129.113"></rect> <rect x="130.982" y="40.667" style="opacity:0.16;fill:#664400;enable-background:new ;" width="14.996" height="129.113"></rect> <path style="opacity:0.31;fill:#664400;enable-background:new ;" d="M335.941,0v157.465c0,50.613-41.03,91.644-91.644,91.644 h-36.756c-13.653,0-26.606-2.99-38.246-8.344c16.782,18.763,41.172,30.576,68.326,30.576h36.756 c50.613,0,91.644-41.03,91.644-91.644V0H335.941z"></path> </g> <rect x="177.483" y="439.03" style="fill:#56361D;" width="136.025" height="14.046"></rect> </g></svg>
  9687. <span style="text-align: center; font-size: 32px; font-weight: 600; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%)">&#8211;</span>
  9688. </div>
  9689. <div class="f-column g-5">
  9690. <div class="flex g-10" style="justify-content: center;">
  9691. ${loserHTML}
  9692. </div>
  9693. <span class="text-center" style="font-size: 20px; font-weight: 400;">Score: ${losingScore}</span>
  9694. <span class="text-center" style="font-size: 26px; font-weight: 600;">${
  9695. losingPoints || 0
  9696. }</span>
  9697. </div>
  9698. `;
  9699. },
  9700.  
  9701. modAlert(text, type) {
  9702. const overlay = document.querySelector('#modAlert_overlay');
  9703. const alertWrapper = document.createElement('div');
  9704. alertWrapper.classList.add('infoAlert');
  9705. if (type == 'success') {
  9706. alertWrapper.classList.add('modAlert-success');
  9707. } else if (type == 'danger') {
  9708. alertWrapper.classList.add('modAlert-danger');
  9709. } else if (type == 'default') {
  9710. alertWrapper.classList.add('modAlert-default');
  9711. }
  9712.  
  9713. alertWrapper.innerHTML = `
  9714. <span>${text}</span>
  9715. <div class="modAlert-loader"></div>
  9716. `;
  9717.  
  9718. overlay.append(alertWrapper);
  9719.  
  9720. setTimeout(() => {
  9721. alertWrapper.remove();
  9722. }, 2000);
  9723. },
  9724.  
  9725. async account() {
  9726. const createAccountBtn = byId('createAccount');
  9727. const loginBtn = byId('login');
  9728.  
  9729. createAccountBtn.addEventListener('click', () => {
  9730. this.createSignInWrapper(false);
  9731. });
  9732. loginBtn.addEventListener('click', () => {
  9733. this.createSignInWrapper(true);
  9734. });
  9735. },
  9736.  
  9737. createSignInWrapper(isLogin) {
  9738. let that = this;
  9739. const overlay = document.createElement('div');
  9740. overlay.classList.add('signIn-overlay');
  9741.  
  9742. const headerText = isLogin ? 'Login' : 'Create an account';
  9743. const btnText = isLogin ? 'Login' : 'Create account';
  9744. const btnId = isLogin ? 'loginButton' : 'registerButton';
  9745. const confPass = isLogin
  9746. ? ''
  9747. : '<input class="form-control" id="mod_pass_conf" type="password" placeholder="Confirm password" />';
  9748.  
  9749. overlay.innerHTML = `
  9750. <div class="signIn-wrapper">
  9751. <div class="signIn-header">
  9752. <span>${headerText}</span>
  9753. <div class="centerXY" style="width: 32px; height: 32px;">
  9754. <button class="modButton-black" id="closeSignIn">
  9755. <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  9756. <path d="M1.6001 14.4L14.4001 1.59998M14.4001 14.4L1.6001 1.59998" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
  9757. </svg>
  9758. </button>
  9759. </div>
  9760. </div>
  9761. <div class="signIn-body">
  9762. <input class="form-control" id="mod_username" type="text" placeholder="Username" />
  9763. <input class="form-control" id="mod_pass" type="password" placeholder="Password" />
  9764. ${confPass}
  9765. <div id="errMessages" style="display: none;"></div>
  9766. <span>or continue with...</span>
  9767. <button class="dclinks" style="border: none;" id="discord_login">
  9768. <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  9769. <path d="M19.4566 5.35132C21.7154 8.83814 22.8309 12.7712 22.4139 17.299C22.4121 17.3182 22.4026 17.3358 22.3876 17.3473C20.6771 18.666 19.0199 19.4663 17.3859 19.9971C17.3732 20.0011 17.3596 20.0009 17.347 19.9964C17.3344 19.992 17.3234 19.9835 17.3156 19.9721C16.9382 19.4207 16.5952 18.8393 16.2947 18.2287C16.2774 18.1928 16.2932 18.1495 16.3287 18.1353C16.8734 17.9198 17.3914 17.6615 17.8896 17.3557C17.9289 17.3316 17.9314 17.2725 17.8951 17.2442C17.7894 17.1617 17.6846 17.0751 17.5844 16.9885C17.5656 16.9725 17.5404 16.9693 17.5191 16.9801C14.2844 18.5484 10.7409 18.5484 7.46792 16.9801C7.44667 16.9701 7.42142 16.9735 7.40317 16.9893C7.30317 17.0759 7.19817 17.1617 7.09342 17.2442C7.05717 17.2725 7.06017 17.3316 7.09967 17.3557C7.59792 17.6557 8.11592 17.9198 8.65991 18.1363C8.69517 18.1505 8.71192 18.1928 8.69442 18.2287C8.40042 18.8401 8.05742 19.4215 7.67292 19.9729C7.65617 19.9952 7.62867 20.0055 7.60267 19.9971C5.97642 19.4663 4.31917 18.666 2.60868 17.3473C2.59443 17.3358 2.58418 17.3174 2.58268 17.2982C2.23418 13.3817 2.94442 9.41613 5.53717 5.35053C5.54342 5.33977 5.55292 5.33137 5.56392 5.32638C6.83967 4.71165 8.20642 4.25939 9.63491 4.00111C9.66091 3.99691 9.68691 4.00951 9.70041 4.03365C9.87691 4.36176 10.0787 4.78252 10.2152 5.12637C11.7209 4.88489 13.2502 4.88489 14.7874 5.12637C14.9239 4.78987 15.1187 4.36176 15.2944 4.03365C15.3007 4.02167 15.3104 4.01208 15.3221 4.00623C15.3339 4.00039 15.3471 3.99859 15.3599 4.00111C16.7892 4.26018 18.1559 4.71244 19.4306 5.32638C19.4419 5.33137 19.4511 5.33977 19.4566 5.35132ZM10.9807 12.798C10.9964 11.6401 10.1924 10.6821 9.18316 10.6821C8.18217 10.6821 7.38592 11.6317 7.38592 12.798C7.38592 13.9639 8.19792 14.9136 9.18316 14.9136C10.1844 14.9136 10.9807 13.9639 10.9807 12.798ZM17.6261 12.798C17.6419 11.6401 16.8379 10.6821 15.8289 10.6821C14.8277 10.6821 14.0314 11.6317 14.0314 12.798C14.0314 13.9639 14.8434 14.9136 15.8289 14.9136C16.8379 14.9136 17.6261 13.9639 17.6261 12.798Z" fill="white"></path>
  9770. </svg>
  9771. Discord
  9772. </button>
  9773. <div id="sigmod-captcha"></div>
  9774. <div class="w-100 centerXY">
  9775. <button class="modButton-black" id="${btnId}" style="margin-top: 26px; width: 200px;">${btnText}</button>
  9776. </div>
  9777. <p class="mt-auto">Your data is stored safely and securely.</p>
  9778. </div>
  9779. </div>
  9780. `;
  9781. document.body.append(overlay);
  9782.  
  9783. const close = byId('closeSignIn');
  9784. close.addEventListener('click', hide);
  9785.  
  9786. function hide() {
  9787. overlay.style.opacity = '0';
  9788. setTimeout(() => {
  9789. overlay.remove();
  9790. }, 300);
  9791. }
  9792.  
  9793. overlay.addEventListener('mousedown', (e) => {
  9794. if (e.target == overlay) hide();
  9795. });
  9796.  
  9797. setTimeout(() => {
  9798. overlay.style.opacity = '1';
  9799. });
  9800.  
  9801. // DISCORD LOGIN
  9802.  
  9803. const discord_login = byId('discord_login');
  9804.  
  9805. const w = 600;
  9806. const h = 800;
  9807. const left = (window.innerWidth - w) / 2;
  9808. const top = (window.innerHeight - h) / 2;
  9809.  
  9810. function receiveMessage(event) {
  9811. if (event.data.type === 'profileData') {
  9812. const data = event.data.data;
  9813. successHandler(data);
  9814. }
  9815. }
  9816.  
  9817. discord_login.addEventListener('click', () => {
  9818. const popupWindow = window.open(
  9819. this.routes.discord.auth,
  9820. '_blank',
  9821. `width=${w}, height=${h}, left=${left}, top=${top}`
  9822. );
  9823.  
  9824. const interval = setInterval(() => {
  9825. if (popupWindow.closed) {
  9826. clearInterval(interval);
  9827. setTimeout(() => {
  9828. location.reload();
  9829. }, 1500);
  9830. }
  9831. }, 1000);
  9832. });
  9833.  
  9834. // LOGIN / REGISTER:
  9835. const button = byId(btnId);
  9836.  
  9837. button.addEventListener('click', async () => {
  9838. const path = isLogin ? 'login' : 'register';
  9839. const username = byId('mod_username').value;
  9840. const password = byId('mod_pass').value;
  9841. const confirmedPassword = confPass
  9842. ? byId('mod_pass_conf').value
  9843. : null;
  9844.  
  9845. if (!username || !password) return;
  9846.  
  9847. button.hide();
  9848.  
  9849. const accountData = {
  9850. username,
  9851. password,
  9852. ...(confirmedPassword && { confirmedPassword }),
  9853. user: window.gameSettings.user,
  9854. };
  9855.  
  9856. try {
  9857. const response = await fetch(this.appRoutes.signIn(path), {
  9858. method: 'POST',
  9859. credentials: 'include',
  9860. headers: { 'Content-Type': 'application/json' },
  9861. body: JSON.stringify(accountData),
  9862. });
  9863.  
  9864. const data = await response.json();
  9865.  
  9866. if (data.success) {
  9867. successHandler(data);
  9868. that.profile = data.user;
  9869. } else {
  9870. errorHandler(data.errors);
  9871. }
  9872. } catch (error) {
  9873. console.error(error);
  9874. } finally {
  9875. button.show();
  9876. }
  9877. });
  9878.  
  9879. function successHandler(data) {
  9880. that.friends_settings = data.settings;
  9881. that.profile = data.user;
  9882.  
  9883. hide();
  9884. that.setFriendsMenu();
  9885. modSettings.modAccount.authorized = true;
  9886. updateStorage();
  9887. }
  9888.  
  9889. function errorHandler(errors) {
  9890. errors.forEach((error) => {
  9891. const errMessages = byId('errMessages');
  9892. if (!errMessages) return;
  9893.  
  9894. if (errMessages.style.display == 'none')
  9895. errMessages.style.display = 'flex';
  9896.  
  9897. let input = null;
  9898. switch (error.fieldName) {
  9899. case 'Username':
  9900. input = 'mod_username';
  9901. break;
  9902. case 'Password':
  9903. input = 'mod_pass';
  9904. break;
  9905. }
  9906.  
  9907. errMessages.innerHTML += `
  9908. <span>${error.message}</span>
  9909. `;
  9910.  
  9911. if (input && byId(input)) {
  9912. const el = byId(input);
  9913. el.classList.add('error-border');
  9914.  
  9915. el.addEventListener('input', () => {
  9916. el.classList.remove('error-border');
  9917. errMessages.innerHTML = '';
  9918. });
  9919. }
  9920. });
  9921. }
  9922. },
  9923.  
  9924. async auth(sid) {
  9925. const res = await fetch(`${this.appRoutes.auth}/?sid=${sid}`, {
  9926. credentials: 'include',
  9927. });
  9928.  
  9929. res.json()
  9930. .then((data) => {
  9931. if (data.success) {
  9932. this.setFriendsMenu();
  9933. this.profile = data.user;
  9934. this.setProfile(data.user);
  9935. this.friends_settings = data.settings;
  9936. } else {
  9937. console.error('Not a valid account.');
  9938. }
  9939. })
  9940. .catch((error) => {
  9941. console.error(error);
  9942. });
  9943. },
  9944.  
  9945. setFriendsMenu() {
  9946. const that = this;
  9947. const friendsMenu = byId('mod_friends');
  9948. friendsMenu.innerHTML = ''; // clear content
  9949.  
  9950. // add new content
  9951. friendsMenu.innerHTML = `
  9952. <div class="friends_header">
  9953. <button class="modButton-black" id="friends_btn">Friends</button>
  9954. <button class="modButton-black" id="allusers_btn">All users</button>
  9955. <button class="modButton-black" id="requests_btn">Requests</button>
  9956. <button class="modButton-black" id="friends_settings_btn" style="width: 80px;">
  9957. <img src="https://czrsd.com/static/sigmod/icons/settings.svg" width="22" />
  9958. </button>
  9959. </div>
  9960. <div class="friends_body scroll"></div>
  9961. `;
  9962.  
  9963. const elements = [
  9964. '#friends_btn',
  9965. '#allusers_btn',
  9966. '#requests_btn',
  9967. '#friends_settings_btn',
  9968. ];
  9969.  
  9970. elements.forEach((el) => {
  9971. const button = document.querySelector(el);
  9972. button.addEventListener('click', () => {
  9973. elements.forEach((btn) =>
  9974. document
  9975. .querySelector(btn)
  9976. .classList.remove('mod_selected')
  9977. );
  9978. button.classList.add('mod_selected');
  9979. switch (button.id) {
  9980. case 'friends_btn':
  9981. that.openFriendsTab();
  9982. break;
  9983. case 'allusers_btn':
  9984. that.openAllUsers();
  9985. break;
  9986. case 'requests_btn':
  9987. that.openRequests();
  9988. break;
  9989. case 'friends_settings_btn':
  9990. that.openFriendSettings();
  9991. break;
  9992. default:
  9993. console.error('Unknown button clicked');
  9994. }
  9995. });
  9996. });
  9997.  
  9998. byId('friends_btn').click(); // open friends first
  9999. },
  10000.  
  10001. async showProfileHandler(event) {
  10002. const userId =
  10003. event.currentTarget.getAttribute('data-user-profile');
  10004. const req = await fetch(this.appRoutes.profile(userId), {
  10005. credentials: 'include',
  10006. }).then((res) => res.json());
  10007.  
  10008. if (req.success) {
  10009. const user = req.user;
  10010. let badges =
  10011. user.badges && user.badges.length > 0
  10012. ? user.badges
  10013. .map(
  10014. (badge) =>
  10015. `<span class="mod_badge">${badge}</span>`
  10016. )
  10017. .join('')
  10018. : '<span>User has no badges.</span>';
  10019. let icon = null;
  10020.  
  10021. const overlay = document.createElement('div');
  10022. overlay.classList.add('mod_overlay');
  10023. overlay.style.opacity = '0';
  10024. overlay.innerHTML = `
  10025. <div class="signIn-wrapper">
  10026. <div class="signIn-header">
  10027. <span>Profile of ${user.username}</span>
  10028. <div class="centerXY" style="width: 32px; height: 32px;">
  10029. <button class="modButton-black" id="closeProfileEditor">
  10030. <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  10031. <path d="M1.6001 14.4L14.4001 1.59998M14.4001 14.4L1.6001 1.59998" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
  10032. </svg>
  10033. </button>
  10034. </div>
  10035. </div>
  10036. <div class="signIn-body" style="padding-bottom: 40px;">
  10037. <div class="friends_row">
  10038. <div class="centerY g-5">
  10039. <div class="profile-img">
  10040. <img src="${user.imageURL}" alt="${
  10041. user.username
  10042. }">
  10043. <span class="status_icon ${
  10044. user.online
  10045. ? 'online_icon'
  10046. : 'offline_icon'
  10047. }"></span>
  10048. </div>
  10049. <div class="f-big">${user.username}</div>
  10050. </div>
  10051. <div class="centerY g-10">
  10052. <div class="${user.role}_role">${
  10053. user.role
  10054. }</div>
  10055. </div>
  10056. </div>
  10057. <div class="f-column g-5 w-100">
  10058. <strong>Bio:</strong>
  10059. <p>${user.bio || 'User has no bio.'}</p>
  10060. <strong>Badges:</strong>
  10061. <div class="mod_badges">
  10062. ${badges}
  10063. </div>
  10064. ${
  10065. user.lastOnline
  10066. ? `<strong>Last online:</strong><span>${prettyTime.am_pm(
  10067. user.lastOnline
  10068. )} (${prettyTime.time_ago(
  10069. user.lastOnline,
  10070. true
  10071. )})</span>`
  10072. : ''
  10073. }
  10074. </div>
  10075. </div>
  10076. </div>
  10077. `;
  10078. document.body.append(overlay);
  10079.  
  10080. function hide() {
  10081. overlay.style.opacity = '0';
  10082. setTimeout(() => {
  10083. overlay.remove();
  10084. }, 300);
  10085. }
  10086.  
  10087. overlay.addEventListener('click', (e) => {
  10088. if (e.target == overlay) hide();
  10089. });
  10090.  
  10091. setTimeout(() => {
  10092. overlay.style.opacity = '1';
  10093. });
  10094.  
  10095. byId('closeProfileEditor').addEventListener('click', hide);
  10096. }
  10097. },
  10098.  
  10099. async openFriendsTab() {
  10100. let that = this;
  10101. const friends_body = document.querySelector('.friends_body');
  10102. if (friends_body.classList.contains('allusers'))
  10103. friends_body.classList.remove('allusers');
  10104. friends_body.innerHTML = '';
  10105.  
  10106. const res = await fetch(this.appRoutes.friends, {
  10107. credentials: 'include',
  10108. });
  10109.  
  10110. res.json()
  10111. .then((data) => {
  10112. if (!data.success) return;
  10113. if (data.friends.length !== 0) {
  10114. const newUsersHTML = data.friends
  10115. .map(
  10116. (user) => `
  10117. <div class="friends_row user-profile-wrapper" data-user-profile="${
  10118. user._id
  10119. }">
  10120. <div class="centerY g-5">
  10121. <div class="profile-img">
  10122. <img src="${user.imageURL}" alt="${
  10123. user.username
  10124. }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10125. <span class="status_icon ${
  10126. user.online ? 'online_icon' : 'offline_icon'
  10127. }"></span>
  10128. </div>
  10129. ${
  10130. user.nick
  10131. ? `
  10132. <div class="f-column centerX">
  10133. <div class="f-big">${user.username}</div>
  10134. <span style="color: #A2A2A2" title="Nickname">${user.nick}</span>
  10135. </div>
  10136. `
  10137. : `
  10138. <div class="f-big">${user.username}</div>
  10139. `
  10140. }
  10141. </div>
  10142. <div class="centerY g-10">
  10143. ${
  10144. user.server
  10145. ? `
  10146. <span>${user.server}</span>
  10147. <div class="vr2"></div>
  10148. `
  10149. : ''
  10150. }
  10151. ${
  10152. user.tag
  10153. ? `
  10154. <span>Tag: ${user.tag}</span>
  10155. <div class="vr2"></div>
  10156. `
  10157. : ''
  10158. }
  10159. <div class="${user.role}_role">${user.role}</div>
  10160. <div class="vr2"></div>
  10161. <button class="modButton centerXY" id="remove-${
  10162. user._id
  10163. }" style="padding: 7px;">
  10164. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="16"><path fill="#ffffff" d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM472 200H616c13.3 0 24 10.7 24 24s-10.7 24-24 24H472c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>
  10165. </button>
  10166. <div class="vr2"></div>
  10167. <button class="modButton centerXY" id="chat-${
  10168. user._id
  10169. }" style="padding: 7px;">
  10170. <svg fill="#ffffff" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 458 458" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M428,41.534H30c-16.569,0-30,13.431-30,30v252c0,16.568,13.432,30,30,30h132.1l43.942,52.243 c5.7,6.777,14.103,10.69,22.959,10.69c8.856,0,17.258-3.912,22.959-10.69l43.942-52.243H428c16.568,0,30-13.432,30-30v-252 C458,54.965,444.568,41.534,428,41.534z M323.916,281.534H82.854c-8.284,0-15-6.716-15-15s6.716-15,15-15h241.062 c8.284,0,15,6.716,15,15S332.2,281.534,323.916,281.534z M67.854,198.755c0-8.284,6.716-15,15-15h185.103c8.284,0,15,6.716,15,15 s-6.716,15-15,15H82.854C74.57,213.755,67.854,207.039,67.854,198.755z M375.146,145.974H82.854c-8.284,0-15-6.716-15-15 s6.716-15,15-15h292.291c8.284,0,15,6.716,15,15C390.146,139.258,383.43,145.974,375.146,145.974z"></path> </g> </g> </g></svg>
  10171. </button>
  10172. </div>
  10173. </div>
  10174. `
  10175. )
  10176. .join('');
  10177. friends_body.innerHTML = newUsersHTML;
  10178.  
  10179. const userProfiles = document.querySelectorAll(
  10180. '.user-profile-wrapper'
  10181. );
  10182.  
  10183. userProfiles.forEach((button) => {
  10184. if (
  10185. button.getAttribute('data-user-profile') ==
  10186. this.profile._id
  10187. )
  10188. return;
  10189. button.addEventListener('click', (e) => {
  10190. if (e.target == button) {
  10191. this.showProfileHandler(e);
  10192. }
  10193. });
  10194. });
  10195.  
  10196. data.friends.forEach((friend) => {
  10197. if (friend.nick) {
  10198. this.friend_names.add(friend.nick);
  10199. }
  10200. const remove = byId(`remove-${friend._id}`);
  10201. remove.addEventListener('click', async () => {
  10202. if (
  10203. confirm(
  10204. 'Are you sure you want to remove this friend?'
  10205. )
  10206. ) {
  10207. const res = await fetch(
  10208. this.appRoutes.removeAvatar,
  10209. {
  10210. method: 'POST',
  10211. headers: {
  10212. 'Content-Type':
  10213. 'application/json',
  10214. },
  10215. body: JSON.stringify({
  10216. type: 'remove-friend',
  10217. userId: friend._id,
  10218. }),
  10219. credentials: 'include',
  10220. }
  10221. ).then((res) => res.json());
  10222.  
  10223. if (res.success) {
  10224. that.openFriendsTab();
  10225. } else {
  10226. let message =
  10227. res.message ||
  10228. 'Something went wrong. Please try again later.';
  10229. that.modAlert(message, 'danger');
  10230. }
  10231. }
  10232. });
  10233.  
  10234. const chat = byId(`chat-${friend._id}`);
  10235. chat.addEventListener('click', () => {
  10236. this.openChat(friend._id);
  10237. });
  10238. });
  10239. } else {
  10240. friends_body.innerHTML = `
  10241. <span>You have no friends yet :(</span>
  10242. <span>Go to the <strong>All users</strong> tab to find new friends.</span>
  10243. `;
  10244. }
  10245. })
  10246. .catch((error) => {
  10247. console.error(error);
  10248. });
  10249. },
  10250.  
  10251. async openChat(id) {
  10252. const res = await fetch(this.appRoutes.chatHistory(id), {
  10253. credentials: 'include',
  10254. });
  10255. const { history, target, success } = await res.json();
  10256.  
  10257. if (!success) {
  10258. this.modAlert('Something went wrong...', 'danger');
  10259. return;
  10260. }
  10261.  
  10262. const body = document.querySelector('.mod_menu_content');
  10263.  
  10264. const chatDiv = document.createElement('div');
  10265. chatDiv.classList.add('friends-chat-wrapper');
  10266. chatDiv.id = id;
  10267. setTimeout(() => {
  10268. chatDiv.style.opacity = '1';
  10269. });
  10270.  
  10271. const messagesHTML = history
  10272. .map(
  10273. (message) => `
  10274. <div class="friends-message ${
  10275. message.sender_id === this.profile._id
  10276. ? 'message-right'
  10277. : ''
  10278. }">
  10279. <span>${message.content}</span>
  10280. <span class="message-date">${prettyTime.am_pm(
  10281. message.timestamp
  10282. )}</span>
  10283. </div>
  10284. `
  10285. )
  10286. .join('');
  10287.  
  10288. chatDiv.innerHTML = `
  10289. <div class="friends-chat-header">
  10290. <div class="centerXY g-5">
  10291. <div class="profile-img">
  10292. <img src="${target.imageURL}" alt="${
  10293. target.username
  10294. }">
  10295. <span class="status_icon ${
  10296. target.online ? 'online_icon' : 'offline_icon'
  10297. }"></span>
  10298. </div>
  10299. <span class="f-big">${target.username}</span>
  10300. </div>
  10301. <button class="modButton centerXY g-5" id="back-friends-chat">
  10302. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16"><path fill="#ffffff" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
  10303. Back
  10304. </button>
  10305. </div>
  10306. <div class="friends-chat-body">
  10307. <div class="friends-chat-messages private-chat-content scroll">
  10308. ${
  10309. history.length > 0
  10310. ? messagesHTML
  10311. : "<center id='beginning-of-conversation'>This is the beginning of your conversation...</center>"
  10312. }
  10313. </div>
  10314. <div class="messenger-wrapper">
  10315. <div class="container">
  10316. <input type="text" class="form-control" placeholder="Enter a message..." id="private-message-text" />
  10317. <button class="modButton-black" id="send-private-message">Send</button>
  10318. </div>
  10319. </div>
  10320. </div>
  10321. `;
  10322.  
  10323. body.appendChild(chatDiv);
  10324. const messagesContainer = chatDiv.querySelector(
  10325. '.private-chat-content'
  10326. );
  10327. messagesContainer.scrollTop = messagesContainer.scrollHeight;
  10328.  
  10329. const back = byId('back-friends-chat');
  10330. back.addEventListener('click', (e) => {
  10331. chatDiv.style.opacity = '0';
  10332. setTimeout(() => {
  10333. chatDiv.remove();
  10334. }, 300);
  10335. });
  10336.  
  10337. const text = byId('private-message-text');
  10338. const send = byId('send-private-message');
  10339.  
  10340. text.addEventListener('keydown', (e) => {
  10341. const key = e.key.toLowerCase();
  10342. if (key === 'enter') {
  10343. sendMessage(text.value, id);
  10344. text.value = '';
  10345. }
  10346. });
  10347.  
  10348. send.addEventListener('click', () => {
  10349. sendMessage(text.value, id);
  10350. text.value = '';
  10351. });
  10352.  
  10353. function sendMessage(val, target) {
  10354. if (!val || val.length > 200) return;
  10355. client.send({
  10356. type: 'private-message',
  10357. content: {
  10358. text: val,
  10359. target,
  10360. },
  10361. });
  10362. }
  10363. },
  10364.  
  10365. updatePrivateChat(data) {
  10366. const { sender_id, target_id, message, timestamp } = data;
  10367.  
  10368. let chatDiv = byId(target_id) || byId(sender_id);
  10369. if (!chatDiv) {
  10370. console.error(
  10371. 'Could not find chat div for either sender or target'
  10372. );
  10373. return;
  10374. }
  10375.  
  10376. const bocElement = document.querySelector(
  10377. '#beginning-of-conversation'
  10378. );
  10379. if (bocElement) bocElement.remove();
  10380.  
  10381. const messages = chatDiv.querySelector('.friends-chat-messages');
  10382. messages.innerHTML += `
  10383. <div class="friends-message ${
  10384. sender_id === this.profile._id ? 'message-right' : ''
  10385. }">
  10386. <span>${message}</span>
  10387. <span class="message-date">${prettyTime.am_pm(
  10388. timestamp
  10389. )}</span>
  10390. </div>
  10391. `;
  10392. messages.scrollTop = messages.scrollHeight;
  10393. },
  10394.  
  10395. async searchUser(user) {
  10396. if (!user) {
  10397. this.openAllUsers();
  10398. return;
  10399. }
  10400. const response = await fetch(
  10401. `${this.appRoutes.search}/?q=${user}`,
  10402. {
  10403. credentials: 'include',
  10404. }
  10405. ).then((res) => res.json());
  10406. const usersDiv = document;
  10407.  
  10408. const usersContainer = byId('users-container');
  10409. usersContainer.innerHTML = '';
  10410. if (!response.success) {
  10411. usersContainer.innerHTML = `
  10412. <span>Couldn't find ${user}...</span>
  10413. `;
  10414. return;
  10415. }
  10416.  
  10417. const handleAddButtonClick = (event) => {
  10418. const userId = event.currentTarget.getAttribute('data-user-id');
  10419. const add = event.currentTarget;
  10420. fetch(this.appRoutes.request, {
  10421. method: 'POST',
  10422. headers: {
  10423. 'Content-Type': 'application/json',
  10424. },
  10425. body: JSON.stringify({ req_id: userId }),
  10426. credentials: 'include',
  10427. })
  10428. .then((res) => res.json())
  10429. .then((req) => {
  10430. const type = req.success ? 'success' : 'danger';
  10431. this.modAlert(req.message, type);
  10432.  
  10433. if (req.success) {
  10434. add.disabled = true;
  10435. add.innerHTML = `
  10436. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="16"><path fill="#ffffff" d="M32 0C14.3 0 0 14.3 0 32S14.3 64 32 64V75c0 42.4 16.9 83.1 46.9 113.1L146.7 256 78.9 323.9C48.9 353.9 32 394.6 32 437v11c-17.7 0-32 14.3-32 32s14.3 32 32 32H64 320h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V437c0-42.4-16.9-83.1-46.9-113.1L237.3 256l67.9-67.9c30-30 46.9-70.7 46.9-113.1V64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320 64 32zM288 437v11H96V437c0-25.5 10.1-49.9 28.1-67.9L192 301.3l67.9 67.9c18 18 28.1 42.4 28.1 67.9z"/></svg>
  10437. `;
  10438. }
  10439. });
  10440. };
  10441.  
  10442. response.users.forEach((user) => {
  10443. const userHTML = `
  10444. <div class="friends_row user-profile-wrapper" style="${
  10445. this.profile._id == user._id
  10446. ? `background: linear-gradient(45deg, #17172d, black)`
  10447. : ''
  10448. }" data-user-profile="${user._id}">
  10449. <div class="centerY g-5">
  10450. <div class="profile-img">
  10451. <img src="${user.imageURL}" alt="${
  10452. user.username
  10453. }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10454. <span class="status_icon ${
  10455. user.online ? 'online_icon' : 'offline_icon'
  10456. }"></span>
  10457. </div>
  10458. <div class="f-big">${
  10459. this.profile.username === user.username
  10460. ? `${user.username} (You)`
  10461. : user.username
  10462. }</div>
  10463. </div>
  10464. <div class="centerY g-10">
  10465. <div class="${user.role}_role">${user.role}</div>
  10466. ${
  10467. this.profile._id == user._id
  10468. ? ''
  10469. : `
  10470. <div class="vr2"></div>
  10471. <button class="modButton centerXY add-button" data-user-id="${user._id}" style="padding: 7px;">
  10472. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="16"><path fill="#ffffff" d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>
  10473. </button>
  10474. `
  10475. }
  10476. </div>
  10477. </div>
  10478. `;
  10479. usersContainer.insertAdjacentHTML('beforeend', userHTML);
  10480.  
  10481. if (user._id == this.profile._id) return;
  10482. const newUserProfile = usersContainer.querySelector(
  10483. `[data-user-profile="${user._id}"]`
  10484. );
  10485. newUserProfile.addEventListener('click', (e) => {
  10486. if (e.target == newUserProfile) {
  10487. this.showProfileHandler(e);
  10488. }
  10489. });
  10490.  
  10491. const addButton = newUserProfile.querySelector('.add-button');
  10492. if (!addButton) return;
  10493. addButton.addEventListener('click', handleAddButtonClick);
  10494. });
  10495. },
  10496.  
  10497. async openAllUsers() {
  10498. let offset = 0;
  10499. let maxReached = false;
  10500. let defaultAmount = 5; // min: 1; max: 100
  10501.  
  10502. const friends_body = document.querySelector('.friends_body');
  10503. friends_body.innerHTML = `
  10504. <input type="text" id="search-user" placeholder="Search user by username or id" class="form-control p-10" style="border: none" />
  10505. <div id="users-container"></div>
  10506. `;
  10507. const usersContainer = byId('users-container');
  10508. friends_body.classList.add('allusers');
  10509.  
  10510. // search user
  10511. const search = byId('search-user');
  10512. search.addEventListener(
  10513. 'input',
  10514. debounce(() => {
  10515. this.searchUser(search.value);
  10516. }, 500)
  10517. );
  10518.  
  10519. const handleAddButtonClick = (event) => {
  10520. const userId = event.currentTarget.getAttribute('data-user-id');
  10521. const add = event.currentTarget;
  10522. fetch(this.appRoutes.request, {
  10523. method: 'POST',
  10524. headers: {
  10525. 'Content-Type': 'application/json',
  10526. },
  10527. body: JSON.stringify({ req_id: userId }),
  10528. credentials: 'include',
  10529. })
  10530. .then((res) => res.json())
  10531. .then((req) => {
  10532. const type = req.success ? 'success' : 'danger';
  10533. this.modAlert(req.message, type);
  10534.  
  10535. if (req.success) {
  10536. add.disabled = true;
  10537. add.innerHTML = `
  10538. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="16"><path fill="#ffffff" d="M32 0C14.3 0 0 14.3 0 32S14.3 64 32 64V75c0 42.4 16.9 83.1 46.9 113.1L146.7 256 78.9 323.9C48.9 353.9 32 394.6 32 437v11c-17.7 0-32 14.3-32 32s14.3 32 32 32H64 320h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V437c0-42.4-16.9-83.1-46.9-113.1L237.3 256l67.9-67.9c30-30 46.9-70.7 46.9-113.1V64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320 64 32zM288 437v11H96V437c0-25.5 10.1-49.9 28.1-67.9L192 301.3l67.9 67.9c18 18 28.1 42.4 28.1 67.9z"/></svg>
  10539. `;
  10540. }
  10541. });
  10542. };
  10543.  
  10544. const displayedUserIDs = new Set();
  10545.  
  10546. const fetchNewUsers = async () => {
  10547. const newUsersResponse = await fetch(this.appRoutes.users, {
  10548. method: 'POST',
  10549. headers: {
  10550. 'Content-Type': 'application/json',
  10551. },
  10552. body: JSON.stringify({ amount: defaultAmount, offset }),
  10553. credentials: 'include',
  10554. }).then((res) => res.json());
  10555.  
  10556. const newUsers = newUsersResponse.users;
  10557.  
  10558. if (newUsers.length === 0) {
  10559. maxReached = true;
  10560. return;
  10561. }
  10562. offset += defaultAmount;
  10563.  
  10564. newUsers.forEach((user) => {
  10565. if (!displayedUserIDs.has(user._id)) {
  10566. displayedUserIDs.add(user._id);
  10567.  
  10568. const newUserHTML = `
  10569. <div class="friends_row user-profile-wrapper" style="${
  10570. this.profile._id == user._id
  10571. ? `background: linear-gradient(45deg, #17172d, black)`
  10572. : ''
  10573. }" data-user-profile="${user._id}">
  10574. <div class="centerY g-5">
  10575. <div class="profile-img">
  10576. <img src="${user.imageURL}" alt="${
  10577. user.username
  10578. }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10579. <span class="status_icon ${
  10580. user.online
  10581. ? 'online_icon'
  10582. : 'offline_icon'
  10583. }"></span>
  10584. </div>
  10585. <div class="f-big">${
  10586. this.profile.username === user.username
  10587. ? `${user.username} (You)`
  10588. : user.username
  10589. }</div>
  10590. </div>
  10591. <div class="centerY g-10">
  10592. <div class="${user.role}_role">${
  10593. user.role
  10594. }</div>
  10595. ${
  10596. this.profile._id == user._id
  10597. ? ''
  10598. : `
  10599. <div class="vr2"></div>
  10600. <button class="modButton centerXY add-button" data-user-id="${user._id}" style="padding: 7px;">
  10601. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="16"><path fill="#ffffff" d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>
  10602. </button>
  10603. `
  10604. }
  10605. </div>
  10606. </div>
  10607. `;
  10608.  
  10609. usersContainer.insertAdjacentHTML(
  10610. 'beforeend',
  10611. newUserHTML
  10612. );
  10613.  
  10614. const newUserProfile = usersContainer.querySelector(
  10615. `[data-user-profile="${user._id}"]`
  10616. );
  10617. newUserProfile.addEventListener('click', (e) => {
  10618. if (e.target == newUserProfile) {
  10619. this.showProfileHandler(e);
  10620. }
  10621. });
  10622.  
  10623. const addButton =
  10624. newUserProfile.querySelector('.add-button');
  10625. if (!addButton) return;
  10626. addButton.addEventListener(
  10627. 'click',
  10628. handleAddButtonClick
  10629. );
  10630. }
  10631. });
  10632. };
  10633.  
  10634. const scrollHandler = async () => {
  10635. if (maxReached) return;
  10636. if (
  10637. usersContainer.scrollTop + usersContainer.clientHeight >=
  10638. usersContainer.scrollHeight - 1
  10639. ) {
  10640. await fetchNewUsers();
  10641. }
  10642. };
  10643.  
  10644. // Initial fetch
  10645. await fetchNewUsers();
  10646.  
  10647. // remove existing scroll event listener if exists
  10648. usersContainer.removeEventListener('scroll', scrollHandler);
  10649.  
  10650. // add new scroll event listener
  10651. usersContainer.addEventListener('scroll', scrollHandler);
  10652. },
  10653.  
  10654. async openRequests() {
  10655. let that = this;
  10656. const friends_body = document.querySelector('.friends_body');
  10657. friends_body.innerHTML = '';
  10658. if (friends_body.classList.contains('allusers'))
  10659. friends_body.classList.remove('allusers');
  10660.  
  10661. const requests = await fetch(this.appRoutes.myRequests, {
  10662. credentials: 'include',
  10663. }).then((res) => res.json());
  10664.  
  10665. if (!requests.body) return;
  10666. if (requests.body.length > 0) {
  10667. const reqHtml = requests.body
  10668. .map(
  10669. (user) => `
  10670. <div class="friends_row">
  10671. <div class="centerY g-5">
  10672. <div class="profile-img">
  10673. <img src="${user.imageURL}" alt="${
  10674. user.username
  10675. }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10676. <span class="status_icon ${
  10677. user.online ? 'online_icon' : 'offline_icon'
  10678. }"></span>
  10679. </div>
  10680. <div class="f-big">${user.username}</div>
  10681. </div>
  10682. <div class="centerY g-10">
  10683. <div class="${user.role}_role">${user.role}</div>
  10684. <div class="vr2"></div>
  10685. <button class="modButton centerXY accept" data-user-id="${
  10686. user._id
  10687. }" style="padding: 6px 7px;">
  10688. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16"><path fill="#ffffff" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
  10689. </button>
  10690. <button class="modButton centerXY decline" data-user-id="${
  10691. user._id
  10692. }" style="padding: 5px 8px;">
  10693. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="16"><path fill="#ffffff" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
  10694. </button>
  10695. </div>
  10696. </div>
  10697. `
  10698. )
  10699. .join('');
  10700.  
  10701. friends_body.innerHTML = reqHtml;
  10702.  
  10703. friends_body.querySelectorAll('.accept').forEach((accept) => {
  10704. accept.addEventListener('click', async () => {
  10705. const userId = accept.getAttribute('data-user-id');
  10706. const req = await fetch(this.appRoutes.handleRequest, {
  10707. method: 'POST',
  10708. headers: {
  10709. 'Content-Type': 'application/json',
  10710. },
  10711. body: JSON.stringify({
  10712. type: 'accept-request',
  10713. userId,
  10714. }),
  10715. credentials: 'include',
  10716. }).then((res) => res.json());
  10717. that.openRequests();
  10718. });
  10719. });
  10720.  
  10721. friends_body.querySelectorAll('.decline').forEach((decline) => {
  10722. decline.addEventListener('click', async () => {
  10723. const userId = decline.getAttribute('data-user-id');
  10724. const req = await fetch(this.appRoutes.handleRequest, {
  10725. method: 'POST',
  10726. headers: {
  10727. 'Content-Type': 'application/json',
  10728. },
  10729. body: JSON.stringify({
  10730. type: 'decline-request',
  10731. userId,
  10732. }),
  10733. credentials: 'include',
  10734. }).then((res) => res.json());
  10735. that.openRequests();
  10736. });
  10737. });
  10738. } else {
  10739. friends_body.innerHTML = `<span>No requests!</span>`;
  10740. }
  10741. },
  10742.  
  10743. async openFriendSettings() {
  10744. const friends_body = document.querySelector('.friends_body');
  10745. if (friends_body.classList.contains('allusers'))
  10746. friends_body.classList.remove('allusers');
  10747.  
  10748. friends_body.innerHTML = `
  10749. <div class="friends_row">
  10750. <div class="centerY g-5">
  10751. <div class="profile-img">
  10752. <img src="${
  10753. this.profile.imageURL
  10754. }" alt="Profile picture" />
  10755. </div>
  10756. <span class="f-big" id="profile_username_00" title="${
  10757. this.profile._id
  10758. }">${this.profile.username}</span>
  10759. </div>
  10760. <button class="modButton-black val" id="editProfile">Edit Profile</button>
  10761. </div>
  10762. <div class="friends_row">
  10763. <span>Status</span>
  10764. <select class="form-control val" id="edit_static_status">
  10765. <option value="online" ${
  10766. this.friends_settings.static_status === 'online'
  10767. ? 'selected'
  10768. : ''
  10769. }>Online</option>
  10770. <option value="offline" ${
  10771. this.friends_settings.static_status === 'offline'
  10772. ? 'selected'
  10773. : ''
  10774. }>Offline</option>
  10775. </select>
  10776. </div>
  10777. <div class="friends_row">
  10778. <span>Accept friend requests</span>
  10779. <div class="modCheckbox val">
  10780. <input type="checkbox" ${
  10781. this.friends_settings.accept_requests
  10782. ? 'checked'
  10783. : ''
  10784. } id="edit_accept_requests" />
  10785. <label class="cbx" for="edit_accept_requests"></label>
  10786. </div>
  10787. </div>
  10788. <div class="friends_row">
  10789. <span>Highlight friends</span>
  10790. <div class="modCheckbox val">
  10791. <input type="checkbox" ${
  10792. this.friends_settings.highlight_friends
  10793. ? 'checked'
  10794. : ''
  10795. } id="edit_highlight_friends" />
  10796. <label class="cbx" for="edit_highlight_friends"></label>
  10797. </div>
  10798. </div>
  10799. <div class="friends_row">
  10800. <span>Highlight color</span>
  10801. <input type="color" class="colorInput" value="${
  10802. this.friends_settings.highlight_color
  10803. }" style="margin-right: 12px;" id="edit_highlight_color" />
  10804. </div>
  10805. <div class="friends_row">
  10806. <span>Public profile</span>
  10807. <div class="modCheckbox val">
  10808. <input type="checkbox" ${
  10809. this.profile.visible ? 'checked' : ''
  10810. } id="edit_visible" />
  10811. <label class="cbx" for="edit_visible"></label>
  10812. </div>
  10813. </div>
  10814. <div class="friends_row">
  10815. <span>Logout</span>
  10816. <button class="modButton-black" id="logout_mod" style="width: 150px">Logout</button>
  10817. </div>
  10818. `;
  10819.  
  10820. const editProfile = byId('editProfile');
  10821. editProfile.addEventListener('click', () => {
  10822. this.openProfileEditor();
  10823. });
  10824.  
  10825. const logout = byId('logout_mod');
  10826. logout.addEventListener('click', async () => {
  10827. if (confirm('Are you sure you want to logout?')) {
  10828. try {
  10829. const res = await fetch(this.appRoutes.logout, {
  10830. credentials: 'include',
  10831. });
  10832.  
  10833. const data = await res.json();
  10834.  
  10835. if (!data.success)
  10836. return alert('Something went wrong...');
  10837.  
  10838. modSettings.modAccount.authorized = false;
  10839. updateStorage();
  10840. location.reload();
  10841. } catch (error) {
  10842. console.error('Error logging out:', error);
  10843. }
  10844. }
  10845. });
  10846.  
  10847. const edit_static_status = byId('edit_static_status');
  10848. const edit_accept_requests = byId('edit_accept_requests');
  10849. const edit_highlight_friends = byId('edit_highlight_friends');
  10850. const edit_highlight_color = byId('edit_highlight_color');
  10851. const edit_visible = byId('edit_visible');
  10852.  
  10853. edit_static_status.addEventListener('change', () => {
  10854. const val = edit_static_status.value;
  10855. updateSettings('static_status', val);
  10856. });
  10857.  
  10858. edit_accept_requests.addEventListener('change', () => {
  10859. const val = edit_accept_requests.checked;
  10860. updateSettings('accept_requests', val);
  10861. });
  10862.  
  10863. edit_highlight_friends.addEventListener('change', () => {
  10864. const val = edit_highlight_friends.checked;
  10865. updateSettings('highlight_friends', val);
  10866. });
  10867.  
  10868. // Debounce the updateSettings function
  10869. edit_highlight_color.addEventListener(
  10870. 'input',
  10871. debounce(() => {
  10872. const val = edit_highlight_color.value;
  10873. updateSettings('highlight_color', val);
  10874. }, 500)
  10875. );
  10876.  
  10877. edit_visible.addEventListener('change', () => {
  10878. const val = edit_visible.checked;
  10879. updateSettings('visible', val);
  10880. });
  10881.  
  10882. const updateSettings = async (type, data) => {
  10883. const resData = await (
  10884. await fetch(this.appRoutes.updateSettings, {
  10885. method: 'POST',
  10886. body: JSON.stringify({ type, data }),
  10887. credentials: 'include',
  10888. headers: {
  10889. 'Content-Type': 'application/json',
  10890. },
  10891. })
  10892. ).json();
  10893.  
  10894. if (resData.success) {
  10895. this.friends_settings[type] = data;
  10896. }
  10897. };
  10898. },
  10899.  
  10900. openProfileEditor() {
  10901. let that = this;
  10902.  
  10903. const overlay = document.createElement('div');
  10904. overlay.classList.add('mod_overlay');
  10905. overlay.style.opacity = '0';
  10906. overlay.innerHTML = `
  10907. <div class="signIn-wrapper">
  10908. <div class="signIn-header">
  10909. <span>Edit mod profile</span>
  10910. <div class="centerXY" style="width: 32px; height: 32px;">
  10911. <button class="modButton-black" id="closeProfileEditor">
  10912. <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  10913. <path d="M1.6001 14.4L14.4001 1.59998M14.4001 14.4L1.6001 1.59998" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
  10914. </svg>
  10915. </button>
  10916. </div>
  10917. </div>
  10918. <div class="signIn-body" style="width: fit-content;">
  10919. <div class="centerXY g-10">
  10920. <div class="profile-img" style="width: 6em;height: 6em;">
  10921. <img src="${
  10922. this.profile.imageURL
  10923. }" alt="Profile picture" />
  10924. </div>
  10925. <div class="f-column g-5">
  10926. <input type="file" id="imageUpload" accept="image/*" style="display: none;">
  10927. <label for="imageUpload" class="modButton-black g-10">
  10928. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16"><path fill="#ffffff" d="M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 192a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>
  10929. Upload avatar
  10930. </label>
  10931. <button class="modButton-black g-10" id="deleteAvatar">
  10932. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16"><path fill="#ffffff" d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"/></svg>
  10933. Delete avatar
  10934. </button>
  10935. </div>
  10936. </div>
  10937. <div class="f-column w-100">
  10938. <label for="username_edit">Username</label>
  10939. <input type="text" class="form-control" id="username_edit" value="${
  10940. this.profile.username
  10941. }" maxlength="40" minlength="4" />
  10942. </div>
  10943. <div class="f-column w-100">
  10944. <label for="bio_edit">Bio</label>
  10945. <div class="textarea-container">
  10946. <textarea placeholder="Hello! I'm ..." class="form-control" maxlength="250" id="bio_edit">${
  10947. this.profile.bio || ''
  10948. }</textarea>
  10949. <span class="char-counter" id="charCount">${
  10950. this.profile.bio
  10951. ? this.profile.bio.length
  10952. : '0'
  10953. }/250</span>
  10954. </div>
  10955. </div>
  10956. <button class="modButton-black" style="margin-bottom: 20px;" id="saveChanges">Save changes</button>
  10957. </div>
  10958. </div>
  10959. `;
  10960. document.body.append(overlay);
  10961.  
  10962. function hide() {
  10963. overlay.style.opacity = '0';
  10964. setTimeout(() => {
  10965. overlay.remove();
  10966. }, 300);
  10967. }
  10968.  
  10969. overlay.addEventListener('click', (e) => {
  10970. if (e.target == overlay) hide();
  10971. });
  10972.  
  10973. setTimeout(() => {
  10974. overlay.style.opacity = '1';
  10975. });
  10976.  
  10977. byId('closeProfileEditor').addEventListener('click', hide);
  10978.  
  10979. let changes = new Set(); // Use a Set to store unique changes
  10980.  
  10981. const bio_edit = byId('bio_edit');
  10982. const charCountSpan = byId('charCount');
  10983. bio_edit.addEventListener('input', updCharcounter);
  10984.  
  10985. function updCharcounter() {
  10986. const currentTextLength = bio_edit.value.length;
  10987. charCountSpan.textContent = currentTextLength + '/250';
  10988.  
  10989. // Update changes
  10990. changes.add('bio');
  10991. }
  10992.  
  10993. // Upload avatar
  10994. byId('imageUpload').addEventListener('input', async (e) => {
  10995. const file = e.target.files[0];
  10996. if (!file) return;
  10997.  
  10998. const formData = new FormData();
  10999. formData.append('image', file);
  11000.  
  11001. try {
  11002. const data = await (
  11003. await fetch(this.appRoutes.imgUpload, {
  11004. method: 'POST',
  11005. credentials: 'include',
  11006. body: formData,
  11007. })
  11008. ).json();
  11009.  
  11010. if (data.success) {
  11011. const profileImg =
  11012. document.querySelector('.profile-img img');
  11013. profileImg.src = data.user.imageURL;
  11014. hide();
  11015. that.profile = data.user;
  11016. } else {
  11017. that.modAlert(data.message, 'danger');
  11018. console.error('Failed to upload image');
  11019. }
  11020. } catch (error) {
  11021. console.error('Error uploading image:', error);
  11022. }
  11023. });
  11024.  
  11025. const username_edit = byId('username_edit');
  11026. username_edit.addEventListener('input', () => {
  11027. changes.add('username');
  11028. });
  11029.  
  11030. const saveChanges = byId('saveChanges');
  11031. saveChanges.addEventListener('click', async () => {
  11032. if (changes.size === 0) return;
  11033. let changedData = {};
  11034. changes.forEach((change) => {
  11035. if (change === 'username') {
  11036. changedData.username = username_edit.value;
  11037. } else if (change === 'bio') {
  11038. changedData.bio = bio_edit.value;
  11039. }
  11040. });
  11041.  
  11042. const resData = await (
  11043. await fetch(this.appRoutes.editProfile, {
  11044. method: 'POST',
  11045. body: JSON.stringify({
  11046. changes: Array.from(changes),
  11047. data: changedData,
  11048. }),
  11049. credentials: 'include',
  11050. headers: {
  11051. 'Content-Type': 'application/json',
  11052. },
  11053. })
  11054. ).json();
  11055.  
  11056. if (resData.success) {
  11057. if (that.profile.username !== resData.user.username) {
  11058. const p_username = byId('profile_username_00');
  11059. if (p_username)
  11060. p_username.innerText = resData.user.username;
  11061. }
  11062. that.profile = resData.user;
  11063. changes.clear();
  11064. hide();
  11065. const name = byId('my-profile-name');
  11066. const bioText = byId('my-profile-bio');
  11067.  
  11068. name.innerText = resData.user.username;
  11069. bioText.innerHTML = resData.user.bio || 'No bio.';
  11070. } else {
  11071. if (resData.message) {
  11072. this.modAlert(resData.message, 'danger');
  11073. }
  11074. }
  11075. });
  11076.  
  11077. const deleteAvatar = byId('deleteAvatar');
  11078. deleteAvatar.addEventListener('click', async () => {
  11079. if (
  11080. confirm(
  11081. 'Are you sure you want to remove your profile picture? It will be changed to the default profile picture.'
  11082. )
  11083. ) {
  11084. try {
  11085. const data = await (
  11086. await fetch(this.appRoutes.delProfile, {
  11087. credentials: 'include',
  11088. })
  11089. ).json();
  11090. const profileImg =
  11091. document.querySelector('.profile-img img');
  11092. profileImg.src = data.user.imageURL;
  11093. hide();
  11094. that.profile = data.user;
  11095. } catch (error) {
  11096. console.error("Couldn't remove image: ", error);
  11097. this.modAlert(error.message, 'danger');
  11098. }
  11099. }
  11100. });
  11101. },
  11102.  
  11103. async announcements() {
  11104. const previewContainer = byId('mod-announcements');
  11105.  
  11106. const announcements = await (
  11107. await fetch(this.appRoutes.announcements)
  11108. ).json();
  11109. if (!announcements.success) return;
  11110.  
  11111. const { data } = announcements;
  11112.  
  11113. const pinnedAnnouncements = data.filter(
  11114. (announcement) => announcement.pinned
  11115. );
  11116. const unpinnedAnnouncements = data.filter(
  11117. (announcement) => !announcement.pinned
  11118. );
  11119.  
  11120. pinnedAnnouncements.sort(
  11121. (a, b) => new Date(b.date) - new Date(a.date)
  11122. );
  11123. unpinnedAnnouncements.sort(
  11124. (a, b) => new Date(b.date) - new Date(a.date)
  11125. );
  11126.  
  11127. const sortedAnnouncements = [
  11128. ...pinnedAnnouncements,
  11129. ...unpinnedAnnouncements,
  11130. ];
  11131.  
  11132. const previews = sortedAnnouncements
  11133. .map(
  11134. (announcement) => `
  11135. <div class="mod-announcement" data-announcement-id="${announcement._id}">
  11136. <img class="mod-announcement-icon" src="${
  11137. announcement.icon
  11138. }" width="32" draggable="false" />
  11139. <div class="mod-announcement-text">
  11140. <span>${announcement.title}</span>
  11141. <div>${announcement.description}</div>
  11142. </div>
  11143. ${
  11144. announcement.pinned
  11145. ? '<img src="https://czrsd.com/static/icons/pinned.svg" draggable="false" style="width: 22px; align-self: start;" />'
  11146. : ''
  11147. }
  11148. </div>
  11149. `
  11150. )
  11151. .join('');
  11152.  
  11153. previewContainer.innerHTML = previews;
  11154.  
  11155. const announcementElements =
  11156. document.querySelectorAll('.mod-announcement');
  11157. announcementElements.forEach((element) => {
  11158. element.addEventListener('click', async (event) => {
  11159. const announcementId = element.getAttribute(
  11160. 'data-announcement-id'
  11161. );
  11162. try {
  11163. const data = await (
  11164. await fetch(
  11165. this.appRoutes.announcement(announcementId)
  11166. )
  11167. ).json();
  11168. if (data.success) {
  11169. createAnnouncementTab(data.data);
  11170. }
  11171. } catch (error) {
  11172. console.error(
  11173. 'Error fetching announcement details:',
  11174. error
  11175. );
  11176. }
  11177. });
  11178. });
  11179.  
  11180. function createAnnouncementTab(data) {
  11181. const menuContent = document.querySelector('.mod_menu_content');
  11182. const modHome = byId('mod_home');
  11183. const content = document.createElement('div');
  11184.  
  11185. content.setAttribute('id', 'announcement-tab');
  11186. content.classList.add('mod_tab');
  11187. content.style.display = 'none';
  11188. content.style.opacity = '0';
  11189.  
  11190. const announcementHTML = `
  11191. <div class="centerY justify-sb">
  11192. <div class="centerY g-5">
  11193. <img style="border-radius: 50%;" src="${
  11194. data.preview.icon
  11195. }" width="64" draggable="false" />
  11196. <div class="f-column centerX">
  11197. <h2>${data.full.title}</h2>
  11198. <span style="color: #7E7E7E">${prettyTime.fullDate(data.date)}</span>
  11199. </div>
  11200. </div>
  11201. <button class="modButton-black" style="width: 20%;" id="mod-announcement-back">Back</button>
  11202. </div>
  11203. <div class="mod-announcement-content">
  11204. <div class="f-column g-10 scroll">${data.full.description}</div>
  11205. <div class="mod-announcement-images scroll">
  11206. ${data.full.images
  11207. .map(
  11208. (image) =>
  11209. `<img src="${image}" onclick="window.open('${image}')" />`
  11210. )
  11211. .join('')}
  11212. </div>
  11213. </div>
  11214. `;
  11215.  
  11216. content.innerHTML = announcementHTML;
  11217. menuContent.appendChild(content);
  11218.  
  11219. window.openModTab('announcement-tab');
  11220.  
  11221. const back = byId('mod-announcement-back');
  11222. back.addEventListener('click', () => {
  11223. const mod_home = byId('mod_home');
  11224. content.style.opacity = '0';
  11225. setTimeout(() => {
  11226. content.remove();
  11227.  
  11228. mod_home.style.display = 'flex';
  11229. mod_home.style.opacity = '1';
  11230. }, 300);
  11231.  
  11232. byId('tab_home_btn').classList.add('mod_selected');
  11233. });
  11234. 1;
  11235. }
  11236. },
  11237.  
  11238. chart() {
  11239. const canvas = byId('sigmod-stats');
  11240. const { Chart } = window;
  11241.  
  11242. const stats = JSON.parse(localStorage.getItem('game-stats'));
  11243.  
  11244. // max values
  11245. const statValues = {
  11246. timeplayed: [
  11247. 10_000, 50_000, 100_000, 150_000, 200_000, 250_000, 300_000,
  11248. 400_000, 800_000, 1_000_000,
  11249. ],
  11250. highestmass: [
  11251. 50_000, 100_000, 500_000, 700_000, 1_000_000, 5_000_000,
  11252. 10_000_000,
  11253. ],
  11254. totaldeaths: [
  11255. 100, 500, 1_000, 2_000, 3_000, 4_000, 5_000, 8_000, 10_000,
  11256. 30_000, 50_000, 100_000,
  11257. ],
  11258. totalmass: [
  11259. 100_000, 500_000, 1_000_000, 2_000_000, 3_000_000,
  11260. 5_000_000, 10_000_000, 50_000_000, 100_000_000, 500_000_000,
  11261. 1_000_000_000, 2_000_000_000, 5_000_000_000,
  11262. ],
  11263. };
  11264.  
  11265. const getBestValue = (stat, values) => {
  11266. for (let value of values) {
  11267. if (stat < value) return value;
  11268. }
  11269. return values[values.length - 1];
  11270. };
  11271.  
  11272. const emojiLabels = ['⏲', '🏆', '💀', '🔢'];
  11273. const textLabels = [
  11274. 'Time Played',
  11275. 'Highest Mass',
  11276. 'Total Deaths',
  11277. 'Total Mass',
  11278. ];
  11279.  
  11280. const data = {
  11281. labels: emojiLabels,
  11282. datasets: [
  11283. {
  11284. label: 'Your Stats',
  11285. data: [
  11286. stats['time-played'] /
  11287. getBestValue(
  11288. stats['time-played'],
  11289. statValues.timeplayed
  11290. ),
  11291. stats['highest-mass'] /
  11292. getBestValue(
  11293. stats['highest-mass'],
  11294. statValues.highestmass
  11295. ),
  11296. stats['total-deaths'] /
  11297. getBestValue(
  11298. stats['total-deaths'],
  11299. statValues.totaldeaths
  11300. ),
  11301. stats['total-mass'] /
  11302. getBestValue(
  11303. stats['total-mass'],
  11304. statValues.totalmass
  11305. ),
  11306. ],
  11307. backgroundColor: [
  11308. 'rgba(255, 99, 132, 0.2)',
  11309. 'rgba(54, 162, 235, 0.2)',
  11310. 'rgba(255, 206, 86, 0.2)',
  11311. 'rgba(153, 102, 255, 0.2)',
  11312. ],
  11313. borderColor: [
  11314. 'rgba(255, 99, 132, 1)',
  11315. 'rgba(54, 162, 235, 1)',
  11316. 'rgba(255, 206, 86, 1)',
  11317. 'rgba(153, 102, 255, 1)',
  11318. ],
  11319. borderWidth: 1,
  11320. },
  11321. ],
  11322. };
  11323.  
  11324. const formatLabel = (labelType, actualValue) => {
  11325. if (labelType === 'Time Played') {
  11326. const hours = Math.floor(actualValue / 3600);
  11327. const minutes = Math.floor((actualValue % 3600) / 60);
  11328. return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
  11329. } else if (
  11330. labelType === 'Highest Mass' ||
  11331. labelType === 'Total Mass'
  11332. ) {
  11333. return actualValue > 999
  11334. ? `${(actualValue / 1000).toFixed(1)}k`
  11335. : actualValue.toString();
  11336. } else {
  11337. return actualValue.toString();
  11338. }
  11339. };
  11340.  
  11341. const createChart = () => {
  11342. try {
  11343. new Chart(canvas, {
  11344. type: 'bar',
  11345. data: data,
  11346. options: {
  11347. indexAxis: 'y',
  11348. scales: {
  11349. x: {
  11350. beginAtZero: true,
  11351. max: 1,
  11352. ticks: {
  11353. callback: (value) =>
  11354. `${(value * 100).toFixed(0)}%`,
  11355. },
  11356. },
  11357. },
  11358. plugins: {
  11359. legend: {
  11360. display: false,
  11361. },
  11362. tooltip: {
  11363. callbacks: {
  11364. title: (context) =>
  11365. textLabels[context[0].dataIndex],
  11366. label: (context) => {
  11367. const dataIndex = context.dataIndex;
  11368. const labelType =
  11369. textLabels[dataIndex];
  11370. const actualValue =
  11371. context.dataset.data[
  11372. dataIndex
  11373. ] *
  11374. getBestValue(
  11375. stats[
  11376. labelType
  11377. .toLowerCase()
  11378. .replace(' ', '-')
  11379. ],
  11380. statValues[
  11381. labelType
  11382. .toLowerCase()
  11383. .replace(' ', '')
  11384. ]
  11385. );
  11386. return formatLabel(
  11387. labelType,
  11388. actualValue
  11389. );
  11390. },
  11391. },
  11392. },
  11393. },
  11394. },
  11395. });
  11396. } catch (error) {
  11397. console.error(
  11398. 'An error occurred while rendering the chart:',
  11399. error
  11400. );
  11401. }
  11402. };
  11403.  
  11404. createChart();
  11405. },
  11406.  
  11407. // Color input events & Reset color event handler
  11408. colorPicker() {
  11409. const colorPickerConfig = {
  11410. mapColor: {
  11411. path: 'game.map.color',
  11412. opacity: false,
  11413. color: modSettings.game.map.color,
  11414. default: '#111111',
  11415. },
  11416. borderColor: {
  11417. path: 'game.borderColor',
  11418. opacity: true,
  11419. color: modSettings.game.borderColor,
  11420. default: '#0000ff',
  11421. },
  11422. foodColor: {
  11423. path: 'game.foodColor',
  11424. opacity: true,
  11425. color: modSettings.game.foodColor,
  11426. default: null,
  11427. },
  11428. cellColor: {
  11429. path: 'game.cellColor',
  11430. opacity: true,
  11431. color: modSettings.game.cellColor,
  11432. default: null,
  11433. },
  11434. nameColor: {
  11435. path: 'game.name.color',
  11436. opacity: false,
  11437. color: modSettings.game.name.color,
  11438. default: '#ffffff',
  11439. },
  11440. gradientNameColor1: {
  11441. path: 'game.name.gradient.left',
  11442. opacity: false,
  11443. color: modSettings.game.name.gradient.left,
  11444. default: '#ffffff',
  11445. },
  11446. gradientNameColor2: {
  11447. path: 'game.name.gradient.right',
  11448. opacity: false,
  11449. color: modSettings.game.name.gradient.right,
  11450. default: '#ffffff',
  11451. },
  11452. chatBackground: {
  11453. path: 'chat.bgColor',
  11454. opacity: true,
  11455. color: modSettings.chat.bgColor,
  11456. default: defaultSettings.chat.bgColor,
  11457. elementTarget: {
  11458. selector: '.modChat',
  11459. property: 'background',
  11460. },
  11461. },
  11462. chatTextColor: {
  11463. path: 'chat.textColor',
  11464. opacity: true,
  11465. color: modSettings.chat.textColor,
  11466. default: defaultSettings.chat.textColor,
  11467. elementTarget: {
  11468. selector: '.chatMessage-text',
  11469. property: 'color',
  11470. },
  11471. },
  11472. chatThemeChanger: {
  11473. path: 'chat.themeColor',
  11474. opacity: true,
  11475. color: modSettings.chat.themeColor,
  11476. default: defaultSettings.chat.themeColor,
  11477. elementTarget: {
  11478. selector: '.chatButton',
  11479. property: 'background',
  11480. },
  11481. },
  11482. };
  11483.  
  11484. const { Alwan } = window;
  11485.  
  11486. Object.entries(colorPickerConfig).forEach(
  11487. ([
  11488. selector,
  11489. {
  11490. path,
  11491. opacity,
  11492. color,
  11493. default: defaultColor,
  11494. elementTarget,
  11495. },
  11496. ]) => {
  11497. const storagePath = path.split('.');
  11498. const colorPickerInstance = new Alwan(`#${selector}`, {
  11499. id: `edit-${selector}`,
  11500. color: color || defaultColor || '#000000',
  11501. theme: 'dark',
  11502. opacity,
  11503. format: 'hex',
  11504. default: defaultColor,
  11505. swatches: ['black', 'white', 'red', 'blue', 'green'],
  11506. });
  11507.  
  11508. const pickerElement = byId(`edit-${selector}`);
  11509. pickerElement.insertAdjacentHTML(
  11510. 'beforeend',
  11511. `
  11512. <div class="colorpicker-additional">
  11513. <span>Reset Color</span>
  11514. <button class="resetButton" id="reset-${selector}"></button>
  11515. </div>
  11516. `
  11517. );
  11518.  
  11519. colorPickerInstance.on('change', (e) => {
  11520. let storageElement = modSettings;
  11521. storagePath
  11522. .slice(0, -1)
  11523. .forEach(
  11524. (part) =>
  11525. (storageElement = storageElement[part])
  11526. );
  11527. storageElement[storagePath.at(-1)] = e.hex;
  11528.  
  11529. if (
  11530. path.includes('gradientName') &&
  11531. modSettings.game.name.gradient.enabled
  11532. ) {
  11533. modSettings.game.name.gradient.enabled = true;
  11534. }
  11535.  
  11536. if (elementTarget) {
  11537. const targets = document.querySelectorAll(
  11538. elementTarget.selector
  11539. );
  11540.  
  11541. targets.forEach((target) => {
  11542. target.style[elementTarget.property] = e.hex;
  11543. });
  11544. }
  11545.  
  11546. updateStorage();
  11547. });
  11548.  
  11549. byId(`reset-${selector}`)?.addEventListener('click', () => {
  11550. colorPickerInstance.setColor(defaultColor);
  11551.  
  11552. let storageElement = modSettings;
  11553. storagePath
  11554. .slice(0, -1)
  11555. .forEach(
  11556. (part) =>
  11557. (storageElement = storageElement[part])
  11558. );
  11559. storageElement[storagePath.at(-1)] = defaultColor;
  11560.  
  11561. if (
  11562. path.includes('gradientName') &&
  11563. !modSettings.game.name.gradient.left &&
  11564. !modSettings.game.name.gradient.right
  11565. ) {
  11566. modSettings.game.name.gradient.enabled = false;
  11567. }
  11568.  
  11569. if (elementTarget) {
  11570. const targets = document.querySelectorAll(
  11571. elementTarget.selector
  11572. );
  11573.  
  11574. targets.forEach((target) => {
  11575. target.style[elementTarget.property] =
  11576. defaultColor;
  11577. });
  11578. }
  11579.  
  11580. updateStorage();
  11581. });
  11582. }
  11583. );
  11584. },
  11585.  
  11586. async loadLibraries() {
  11587. const loadScript = (src) =>
  11588. new Promise((resolve, reject) => {
  11589. const script = document.createElement('script');
  11590. script.src = src;
  11591. script.type = 'text/javascript';
  11592. document.head.appendChild(script);
  11593.  
  11594. script.onload = () => resolve();
  11595. script.onerror = (error) => reject(error);
  11596. });
  11597.  
  11598. const loadCSS = (href) =>
  11599. new Promise((resolve, reject) => {
  11600. const link = document.createElement('link');
  11601. link.rel = 'stylesheet';
  11602. link.href = href;
  11603. document.head.appendChild(link);
  11604.  
  11605. link.onload = () => resolve();
  11606. link.onerror = (error) => reject(error);
  11607. });
  11608.  
  11609. for (const [lib, val] of Object.entries(libs)) {
  11610. if (typeof val === 'string') {
  11611. await loadScript(val);
  11612. } else {
  11613. await loadScript(val.js);
  11614. if (val.css) await loadCSS(val.css);
  11615. }
  11616.  
  11617. console.log(`%c Loaded ${lib}.`, 'color: lime');
  11618.  
  11619. if (typeof this[lib] === 'function') this[lib]();
  11620. }
  11621. },
  11622.  
  11623. createMenu() {
  11624. if (document.body.children[0]?.id === 'cf-wrapper') {
  11625. console.log('User is rate limited.');
  11626. return;
  11627. }
  11628. // only initialize sigmod on the main page
  11629. if (!document.querySelector('.body__inner')) return;
  11630.  
  11631. new SigWsHandler();
  11632.  
  11633. try {
  11634. this.loadLibraries();
  11635. this.menu();
  11636. this.credits();
  11637. this.chat();
  11638. this.macros();
  11639. this.tagsystem();
  11640. this.handleNick();
  11641. this.clientPing();
  11642. this.themes();
  11643. this.createMinimap();
  11644. this.saveNames();
  11645. this.setInputActions();
  11646. this.game();
  11647. this.mainMenu();
  11648. this.macroSettings();
  11649. this.initStats();
  11650. this.account();
  11651. this.announcements();
  11652. } catch (e) {
  11653. console.error('An error occurred while loading SigMod: ', e);
  11654. }
  11655. },
  11656. };
  11657.  
  11658. mods = new Mod();
  11659. })();