☰

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-22 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         SigMod Client (Macros)
  3. // @version      10.1.9.2
  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.             hideDiscordBtns: false,
  98.             hideLangs: false,
  99.         },
  100.         settings: {
  101.             tag: null,
  102.             savedNames: [],
  103.             autoRespawn: false,
  104.             playTimer: false,
  105.             mouseTracker: false,
  106.             autoClaimCoins: false,
  107.             showChallenges: false,
  108.             deathScreenPos: 'center',
  109.             removeShopPopup: false,
  110.         },
  111.         chat: {
  112.             bgColor: '#00000040',
  113.             textColor: '#ffffff',
  114.             compact: false,
  115.             themeColor: '#8a25e5',
  116.             showTime: true,
  117.             showNameColors: true,
  118.             showClientChat: false,
  119.             showChatButtons: true,
  120.             blurTag: false,
  121.             locationText: '{pos}',
  122.         },
  123.         modAccount: {
  124.             authorized: false,
  125.         },
  126.     };
  127.  
  128.     let modSettings;
  129.     const stored = localStorage.getItem(storageName);
  130.     try {
  131.         modSettings = stored ? JSON.parse(stored) : defaultSettings;
  132.     } catch (e) {
  133.         modSettings = defaultSettings;
  134.     }
  135.  
  136.     // really rare cases, but in case the storage structure changes completely again
  137.     if (
  138.         modSettings.storageVersion &&
  139.         modSettings.storageVersion !== storageVersion
  140.     ) {
  141.         localStorage.removeItem(storageName);
  142.         location.reload();
  143.     }
  144.  
  145.     if (!stored) updateStorage();
  146.  
  147.     // intercept fetches
  148.     let fetchedUser = 0;
  149.     const originalFetch = window.fetch;
  150.  
  151.     window.fetch = new Proxy(originalFetch, {
  152.         async apply(target, thisArg, argumentsList) {
  153.             const [url] = argumentsList;
  154.             const response = await target.apply(thisArg, argumentsList);
  155.  
  156.             if (typeof url === 'string') {
  157.                 if (url.includes('/server/auth')) {
  158.                     const data = await response.clone().json();
  159.                     if (data) mods.handleGoogleAuth(data.body?.user);
  160.                 }
  161.             }
  162.  
  163.             return response;
  164.         },
  165.     });
  166.  
  167.     // for development
  168.     let isDev = false;
  169.     let port = 3001;
  170.  
  171.     // global sigmod
  172.     window.sigmod = {
  173.         version,
  174.         server_version: serverVersion,
  175.         storageName,
  176.         settings: modSettings,
  177.     };
  178.  
  179.     // Global gameSettings object to store the Sigmally WebSocket, User instance and playing status
  180.     /*
  181.      * @typedef {Object} User
  182.      * @property {string} _id
  183.      * @property {number} boost
  184.      * @property {Object.<string, number>} cards
  185.      * @property {string} clan
  186.      * @property {string} createTime
  187.      * @property {string} email
  188.      * @property {number} exp
  189.      * @property {string} fullName
  190.      * @property {string} givenName
  191.      * @property {number} gold
  192.      * @property {string} googleID
  193.      * @property {number} hourlyTime
  194.      * @property {string} imageURL
  195.      * @property {any[]} lastSkinUsed
  196.      * @property {number} level
  197.      * @property {number} nextLevel
  198.      * @property {number} progress
  199.      * @property {number} seasonExp
  200.      * @property {Object.<string, any>} sigma
  201.      * @property {string[]} skins
  202.      * @property {number} subscription
  203.      * @property {string} updateTime
  204.      * @property {string} token
  205.      *
  206.      * @property {WebSocket} ws
  207.      * @property {User} user
  208.      * @property {boolean} isPlaying
  209.      */
  210.     window.gameSettings = {
  211.         ws: null,
  212.         user: null,
  213.         isPlaying: false,
  214.     };
  215.  
  216.     // --------- HELPER FUNCTIONS --------- \\
  217.     // --- General
  218.     // --- Colors
  219.     // --- Game
  220.     // --- Time
  221.     // --- (Coordinates)
  222.  
  223.     const updateStorage = () => {
  224.         localStorage.setItem(storageName, JSON.stringify(modSettings));
  225.     }
  226.  
  227.     const byId = (id) => document.getElementById(id);
  228.  
  229.     const debounce = (func, delay) => {
  230.         let timeoutId;
  231.         return function (...args) {
  232.             clearTimeout(timeoutId);
  233.             timeoutId = setTimeout(() => {
  234.                 func.apply(this, args);
  235.             }, delay);
  236.         };
  237.     }
  238.  
  239.     const wait = async (ms) => {
  240.         return new Promise((r) => setTimeout(r, ms));
  241.     }
  242.  
  243.     const noXSS = (text) => {
  244.         return text
  245.             .replace(/&/g, '&amp;')
  246.             .replace(/</g, '&lt;')
  247.             .replace(/>/g, '&gt;')
  248.             .replace(/"/g, '&quot;')
  249.             .replace(/'/g, '&#039;');
  250.     }
  251.  
  252.     // generate random string
  253.     const rdmString = (length) => {
  254.         return [...Array(length)]
  255.             .map(() => Math.random().toString(36).charAt(2))
  256.             .join('');
  257.     };
  258.  
  259.     // --------- Colors --------- //
  260.  
  261.     // rgba values to hex color code
  262.     const RgbaToHex = (code) => {
  263.         const rgbaValues = code.match(/\d+/g);
  264.         const [r, g, b] = rgbaValues.slice(0, 3);
  265.         return `#${Number(r).toString(16).padStart(2, '0')}${Number(g)
  266.             .toString(16)
  267.             .padStart(2, '0')}${Number(b).toString(16).padStart(2, '0')}`;
  268.     }
  269.  
  270.     const bytesToHex = (r, g, b) => {
  271.         return (
  272.             '#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)
  273.         );
  274.     }
  275.  
  276.     // --------- Game --------- //
  277.  
  278.     const menuClosed = () => {
  279.         const menuWrapper = byId('menu-wrapper');
  280.  
  281.         return menuWrapper.style.display === 'none';
  282.     }
  283.  
  284.     const isDead = () => {
  285.         const __line2 = byId('__line2');
  286.         return !__line2.classList.contains('line--hidden');
  287.     }
  288.  
  289.     const getGameMode = () => {
  290.         const gameMode = byId('gamemode');
  291.         if (!gameMode.value) {
  292.             return 'Tourney';
  293.         }
  294.         const options = Object.values(gameMode.querySelectorAll('option'));
  295.         const selectedOption = options.filter(
  296.             (option) => option.value === gameMode.value
  297.         )[0];
  298.         return selectedOption.textContent.split(' ')[0];
  299.     }
  300.  
  301.     function keypress(key, keycode) {
  302.         const keyDownEvent = new KeyboardEvent('keydown', {
  303.             key: key,
  304.             code: keycode,
  305.         });
  306.         const keyUpEvent = new KeyboardEvent('keyup', {
  307.             key: key,
  308.             code: keycode,
  309.         });
  310.  
  311.         window.dispatchEvent(keyDownEvent);
  312.         window.dispatchEvent(keyUpEvent);
  313.     }
  314.  
  315.     function mousemove(sx, sy) {
  316.         const mouseMoveEvent = new MouseEvent('mousemove', {
  317.             clientX: sx,
  318.             clientY: sy,
  319.         });
  320.         const canvas = byId('canvas');
  321.         canvas.dispatchEvent(mouseMoveEvent);
  322.     }
  323.  
  324.     const getCoordinates = (border, gridCount = 5) => {
  325.         const { left, top, width, height } = border;
  326.         const gridSize = width / gridCount;
  327.         const coordinates = {};
  328.  
  329.         for (let i = 0; i < gridCount; i++) {
  330.             for (let j = 0; j < gridCount; j++) {
  331.                 const label = String.fromCharCode(65 + i) + (j + 1);
  332.  
  333.                 coordinates[label] = {
  334.                     min: { x: left + i * gridSize, y: top + j * gridSize },
  335.                     max: { x: left + (i + 1) * gridSize, y: top + (j + 1) * gridSize },
  336.                 };
  337.             }
  338.         }
  339.  
  340.         return coordinates;
  341.     };
  342.  
  343.     // time formatters
  344.     const prettyTime = {
  345.         fullDate: (dateTimestamp, time = false) => {
  346.             const date = new Date(dateTimestamp);
  347.             const day = String(date.getDate()).padStart(2, '0');
  348.             const month = String(date.getMonth() + 1).padStart(2, '0');
  349.             const year = date.getFullYear();
  350.             const formattedDate = `${day}.${month}.${year}`;
  351.  
  352.             if (time) {
  353.                 const hours = String(date.getHours()).padStart(2, '0');
  354.                 const minutes = String(date.getMinutes()).padStart(2, '0');
  355.                 const seconds = String(date.getSeconds()).padStart(2, '0');
  356.                 return `${hours}:${minutes}:${seconds} ${formattedDate}`;
  357.             }
  358.  
  359.             return formattedDate;
  360.         },
  361.         am_pm: (date) => {
  362.             if (!date) return '';
  363.  
  364.             const d = new Date(date);
  365.             const hours = d.getHours();
  366.             const minutes = String(d.getMinutes()).padStart(2, '0');
  367.             const ampm = hours >= 12 ? 'PM' : 'AM';
  368.             const formattedHours = (hours % 12 || 12)
  369.             .toString()
  370.             .padStart(2, '0');
  371.  
  372.             return `${formattedHours}:${minutes} ${ampm}`;
  373.         },
  374.         time_ago: (timestamp, isIso = false) => {
  375.             if (!timestamp) return '';
  376.             const currentTime = new Date();
  377.             const elapsedTime = isIso
  378.             ? currentTime - new Date(timestamp)
  379.             : currentTime - timestamp;
  380.  
  381.             const seconds = Math.floor(elapsedTime / 1000);
  382.             const minutes = Math.floor(seconds / 60);
  383.             const hours = Math.floor(minutes / 60);
  384.             const days = Math.floor(hours / 24);
  385.             const years = Math.floor(days / 365);
  386.  
  387.             if (years > 0) {
  388.                 return years === 1 ? '1 year ago' : `${years} years ago`;
  389.             } else if (days > 0) {
  390.                 return days === 1 ? '1 day ago' : `${days} days ago`;
  391.             } else if (hours > 0) {
  392.                 return hours === 1 ? '1 hour ago' : `${hours} hours ago`;
  393.             } else if (minutes > 0) {
  394.                 return minutes === 1
  395.                     ? '1 minute ago'
  396.                 : `${minutes} minutes ago`;
  397.             } else {
  398.                 return seconds <= 1 ? '1s>' : `${seconds}s ago`;
  399.             }
  400.         },
  401.         getTimeLeft(timestamp) {
  402.             let totalSeconds = Math.max(0, Math.floor((timestamp - Date.now()) / 1000));
  403.             const timeUnits = [['d', 86400], ['h', 3600], ['m', 60], ['s', 1]];
  404.             let result = '';
  405.  
  406.             for (const [unit, seconds] of timeUnits) {
  407.                 if (totalSeconds >= seconds) {
  408.                     const value = Math.floor(totalSeconds / seconds);
  409.                     totalSeconds %= seconds;
  410.                     result += `${value}${unit}`;
  411.                 }
  412.             }
  413.  
  414.             return result || '0s';
  415.         }
  416.     };
  417.  
  418.     class Reader {
  419.         constructor(view, offset, littleEndian) {
  420.             this._e = littleEndian;
  421.             if (view) this.repurpose(view, offset);
  422.         }
  423.  
  424.         repurpose(view, offset) {
  425.             this.view = view;
  426.             this._o = offset || 0;
  427.         }
  428.  
  429.         getUint8() {
  430.             return this.view.getUint8(this._o++, this._e);
  431.         }
  432.  
  433.         getFloat64() {
  434.             return this.view.getFloat64((this._o += 8) - 8, this._e);
  435.         }
  436.  
  437.         getStringUTF8(decode = true) {
  438.             let bytes = [];
  439.             let b;
  440.             while ((b = this.view.getUint8(this._o++)) !== 0) bytes.push(b);
  441.  
  442.             let uint8Array = new Uint8Array(bytes);
  443.             let decoder = new TextDecoder('utf-8');
  444.             let s = decoder.decode(uint8Array);
  445.  
  446.             return decode ? s : uint8Array;
  447.         }
  448.  
  449.         raw(len = 0) {
  450.             const buf = this.view.buffer.slice(this._o, this._o + len);
  451.             this._o += len;
  452.             return buf;
  453.         }
  454.     }
  455.  
  456.     const __buf = new DataView(new ArrayBuffer(8));
  457.  
  458.     class Writer {
  459.         constructor(littleEndian) {
  460.             this._e = littleEndian;
  461.             this.reset();
  462.         }
  463.  
  464.         reset() {
  465.             this._b = [];
  466.             this._o = 0;
  467.         }
  468.  
  469.         setUint8(a) {
  470.             if (a >= 0 && a < 256) this._b.push(a);
  471.             return this;
  472.         }
  473.  
  474.         setUint32(a) {
  475.             __buf.setUint32(0, a, this._e);
  476.             this._move(4);
  477.             return this;
  478.         }
  479.  
  480.         _move(b) {
  481.             for (let i = 0; i < b; i++) this._b.push(__buf.getUint8(i));
  482.         }
  483.  
  484.         setStringUTF8(s) {
  485.             const bytesStr = unescape(encodeURIComponent(s));
  486.             for (let i = 0, l = bytesStr.length; i < l; i++) {
  487.                 this._b.push(bytesStr.charCodeAt(i));
  488.             }
  489.             this._b.push(0);
  490.             return this;
  491.         }
  492.  
  493.         build() {
  494.             return new Uint8Array(this._b);
  495.         }
  496.     }
  497.  
  498.     // --------- END HELPER FUNCTIONS --------- //
  499.  
  500.     let client = null;
  501.     let freezepos = false;
  502.  
  503.     // --------- Sigmally WebSocket Handler --------- //
  504.     class SigWsHandler {
  505.         constructor() {
  506.             this.handshake = false;
  507.             this.C = new Uint8Array(256);
  508.             this.R = new Uint8Array(256);
  509.  
  510.             this.overrideWebSocketSend();
  511.         }
  512.  
  513.         overrideWebSocketSend() {
  514.             const handler = this;
  515.  
  516.             window.WebSocket = new Proxy(window.WebSocket, {
  517.                 construct(target, args) {
  518.                     const wsInstance = new target(...args);
  519.  
  520.                     if (args[0].includes('sigmally.com')) {
  521.                         handler.setupWebSocket(wsInstance);
  522.                     }
  523.  
  524.                     return wsInstance;
  525.                 },
  526.             });
  527.         }
  528.  
  529.         setupWebSocket(ws) {
  530.             window.gameSettings.ws = ws;
  531.  
  532.             // if 'save' is in localstorage, it indicates that you are logged in to Google; if that is the case, it
  533.             // will load the client after the authorization to load the modClient correctly.
  534.             // This loads the client instantly if you're not logged in to Google
  535.             if (!localStorage.getItem('save') && !client) {
  536.                 client = new modClient();
  537.             }
  538.  
  539.             ws.addEventListener('close', () => this.handleWebSocketClose());
  540.             ws.sendPacket = this.sendPacket.bind(this);
  541.  
  542.             window.sendPlay = this.sendPlay.bind(this);
  543.             window.sendChat = this.sendChat.bind(this);
  544.             window.sendMouseMove = this.sendMouseMove.bind(this);
  545.  
  546.             const originalSend = ws.send.bind(ws);
  547.             ws.send = (data) => {
  548.                 try {
  549.                     const arrayBuffer =
  550.                           data instanceof ArrayBuffer ? data : data.buffer;
  551.                     const dataView = new DataView(arrayBuffer);
  552.                     const reader = new Reader(dataView, 0, true);
  553.                     const r = reader.getUint8();
  554.  
  555.                     if (this.R[r] === 0) {
  556.                         window.gameSettings.isPlaying = true;
  557.                     }
  558.  
  559.                     if (!window.sigfix && freezepos && this.R[r] === 16) {
  560.                         return;
  561.                     }
  562.  
  563.                     originalSend(data);
  564.                 } catch (e) {
  565.                     console.error(e);
  566.                 }
  567.             };
  568.  
  569.             ws.addEventListener('message', (event) =>
  570.                                 this.handleMessage(event)
  571.                                );
  572.         }
  573.  
  574.         handleWebSocketClose() {
  575.             this.handshake = false;
  576.             window.gameSettings.isPlaying = false;
  577.  
  578.             playerPosition.x = null;
  579.             playerPosition.y = null;
  580.             byId('mod-messages').innerHTML = '';
  581.             setTimeout(mods.showOverlays, 500);
  582.         }
  583.  
  584.         sendPacket(packet) {
  585.             if (!window.gameSettings.ws) {
  586.                 console.error('WebSocket is not defined.');
  587.                 return;
  588.             }
  589.  
  590.             if (packet.build)
  591.                 return window.gameSettings.ws.send(packet.build());
  592.             window.gameSettings.ws.send(packet);
  593.         }
  594.  
  595.         sendPlay(playData) {
  596.             const { sigfix } = window;
  597.             if (sigfix) {
  598.                 sigfix.net.play(sigfix.world.selected, JSON.parse(playData));
  599.                 return;
  600.             }
  601.  
  602.             const writer = new Writer(true);
  603.             writer.setUint8(this.C[0x00]);
  604.             writer.setStringUTF8(playData);
  605.             this.sendPacket(writer);
  606.         }
  607.  
  608.         sendChat(text) {
  609.             if (mods.aboveRespawnLimit && text === mods.respawnCommand) return;
  610.  
  611.             if (window.sigfix) {
  612.                 window.sigfix.net.chat(text);
  613.                 return;
  614.             }
  615.  
  616.             const writer = new Writer();
  617.             writer.setUint8(this.C[0x63]);
  618.             writer.setUint8(0);
  619.             writer.setStringUTF8(text);
  620.             this.sendPacket(writer);
  621.         }
  622.  
  623.         sendMouseMove(x, y) {
  624.             const writer = new Writer(true);
  625.             writer.setUint8(this.C[0x10]);
  626.             writer.setUint32(x);
  627.             writer.setUint32(y);
  628.             writer._b.push(0, 0, 0, 0);
  629.             this.sendPacket(writer);
  630.         }
  631.  
  632.         removePlayer(id) {
  633.             const index = this.cells.players.indexOf(id);
  634.             if (index !== -1) {
  635.                 this.cells.players.splice(index, 1);
  636.             }
  637.         }
  638.  
  639.         handleMessage(event) {
  640.             const reader = new Reader(new DataView(event.data), 0, true);
  641.  
  642.             if (!this.handshake) {
  643.                 this.performHandshake(reader);
  644.                 return;
  645.             }
  646.  
  647.             const r = reader.getUint8();
  648.             switch (this.R[r]) {
  649.                 case 0x63:
  650.                     this.handleChatMessage(reader);
  651.                     break;
  652.                 case 0x40:
  653.                     this.updateBorder(reader);
  654.                     break;
  655.             }
  656.         }
  657.  
  658.         performHandshake(reader) {
  659.             reader.getStringUTF8(false);
  660.             this.C.set(new Uint8Array(reader.raw(256)));
  661.  
  662.             for (const i in this.C) {
  663.                 this.R[this.C[i]] = ~~i;
  664.             }
  665.  
  666.             this.handshake = true;
  667.         }
  668.  
  669.         handleChatMessage(reader) {
  670.             const flags = reader.getUint8();
  671.             const [r, g, b] = [reader.getUint8(), reader.getUint8(), reader.getUint8()];
  672.             const color = bytesToHex(r, g, b);
  673.             let name = reader.getStringUTF8();
  674.             const message = reader.getStringUTF8();
  675.  
  676.             const server = Boolean(flags & 0x80);
  677.             const admin = Boolean(flags & 0x40);
  678.             const mod = Boolean(flags & 0x20);
  679.  
  680.             name = this.formatName(name, server, admin, mod);
  681.  
  682.             if (mods.mutedUsers.includes(name) || mods.spamMessage(name, message) || modSettings.chat.showClientChat)
  683.                 return;
  684.  
  685.             mods.updateChat({
  686.                 server,
  687.                 admin,
  688.                 mod,
  689.                 color: modSettings.chat.showNameColors ? color : '#fafafa',
  690.                 name,
  691.                 message,
  692.                 time: modSettings.chat.showTime ? Date.now() : null,
  693.             });
  694.         }
  695.  
  696.         formatName(name, server, admin, mod) {
  697.             if (server && name !== 'SERVER') name = '[SERVER]';
  698.             if (admin) name = '[ADMIN] ' + name;
  699.             if (mod) name = '[MOD] ' + name;
  700.             if (name === '') name = 'Unnamed';
  701.             return name;
  702.         }
  703.  
  704.         updateBorder(reader) {
  705.             mods.border.left = reader.getFloat64();
  706.             mods.border.top = reader.getFloat64();
  707.             mods.border.right = reader.getFloat64();
  708.             mods.border.bottom = reader.getFloat64();
  709.  
  710.             mods.border.width = mods.border.right - mods.border.left;
  711.             mods.border.height = mods.border.bottom - mods.border.top;
  712.             mods.border.centerX = (mods.border.left + mods.border.right) / 2;
  713.             mods.border.centerY = (mods.border.top + mods.border.bottom) / 2;
  714.         }
  715.     }
  716.  
  717.     class SigFixHandler {
  718.         constructor() {
  719.             this.lastHadCells = false;
  720.  
  721.             this.checkInterval = null;
  722.             this.updatePosInterval = null;
  723.             this.init();
  724.         }
  725.  
  726.         overrideMoveFunction() {
  727.             if (!window.sigfix?.net?.move) return;
  728.  
  729.             const originalMove = window.sigfix.net.move;
  730.             let isHandlingFreeze = false;
  731.  
  732.             window.sigfix.net.move = (...args) => {
  733.                 if (freezepos) {
  734.                     if (!isHandlingFreeze) {
  735.                         isHandlingFreeze = true;
  736.                         originalMove.call(
  737.                             this,
  738.                             playerPosition.x,
  739.                             playerPosition.y
  740.                         );
  741.                         isHandlingFreeze = false;
  742.                     }
  743.                     return;
  744.                 }
  745.                 return originalMove.apply(this, args);
  746.             };
  747.         }
  748.         updatePlayerPos() {
  749.             let myName = '';
  750.             let ownN = 0;
  751.             let ownX = 0;
  752.             let ownY = 0;
  753.             let hadCells = this.lastHadCells ?? true;
  754.  
  755.             const ownedCells = window.sigfix.world.views.get(window.sigfix.world.selected)?.owned || [];
  756.  
  757.             ownedCells.forEach(id => {
  758.                 const cell = window.sigfix.world.cells.get(id)?.merged;
  759.                 if (!cell) return;
  760.  
  761.                 myName = cell.name || 'An unnamed cell';
  762.                 ++ownN;
  763.                 ownX += cell.nx;
  764.                 ownY += cell.ny;
  765.             });
  766.  
  767.             if (ownN > 0) {
  768.                 ownX /= ownN;
  769.                 ownY /= ownN;
  770.  
  771.                 playerPosition.x = ownX;
  772.                 playerPosition.y = ownY;
  773.  
  774.                 if (client?.ws?.readyState === 1 && modSettings.settings.tag) {
  775.                     client.send({
  776.                         type: 'position',
  777.                         content: {
  778.                             x: playerPosition.x,
  779.                             y: playerPosition.y,
  780.                         },
  781.                     });
  782.                 }
  783.  
  784.                 this.lastHadCells = true;
  785.             } else if (hadCells) {
  786.                 if (client?.ws?.readyState === 1 && modSettings.settings.tag) {
  787.                     client.send({
  788.                         type: 'position',
  789.                         content: {
  790.                             x: null,
  791.                             y: null,
  792.                         },
  793.                     });
  794.                 }
  795.                 this.lastHadCells = false;
  796.             }
  797.         }
  798.  
  799.         init() {
  800.             const checkSigFix = () => {
  801.                 if (window.sigfix) {
  802.                     this.updatePosInterval = setInterval(this.updatePlayerPos, 300);
  803.                 }
  804.                 if (window.sigfix?.net) {
  805.                     this.overrideMoveFunction();
  806.                     clearInterval(this.checkInterval);
  807.  
  808.                     setTimeout(() => {
  809.                         if (window.sigfix?.net) {
  810.                             this.checkInterval = null;
  811.                         }
  812.                     }, 1000);
  813.                 }
  814.             };
  815.  
  816.             this.checkInterval = setInterval(checkSigFix, 100);
  817.         }
  818.     }
  819.  
  820.     new SigFixHandler();
  821.  
  822.     // --------- Mod Client --------- //
  823.     class modClient {
  824.         constructor() {
  825.             this.ws = null;
  826.             this.wsUrl = isDev
  827.                 ? `ws://localhost:${port}/ws`
  828.             : 'wss://mod.czrsd.com/ws';
  829.  
  830.             this.retries = 0;
  831.             this.maxRetries = 4;
  832.             this.updateAvailable = false;
  833.  
  834.             this.id = null;
  835.  
  836.             this.connect();
  837.         }
  838.  
  839.         connect() {
  840.             this.ws = new WebSocket(this.wsUrl);
  841.             this.ws.binaryType = 'arraybuffer';
  842.  
  843.             this.ws.addEventListener('open', this.onOpen.bind(this));
  844.             this.ws.addEventListener('close', this.onClose.bind(this));
  845.             this.ws.addEventListener('message', this.onMessage.bind(this));
  846.             this.ws.addEventListener('error', this.onError.bind(this));
  847.         }
  848.  
  849.         async onOpen() {
  850.             await this.waitForDOMLoad();
  851.  
  852.             this.updateClientInfo();
  853.             this.updateTagInfo();
  854.         }
  855.  
  856.         waitForDOMLoad() {
  857.             return new Promise((resolve) => setTimeout(resolve, 500));
  858.         }
  859.  
  860.         updateClientInfo() {
  861.             this.send({
  862.                 type: 'server-changed',
  863.                 content: getGameMode(),
  864.             });
  865.             this.send({
  866.                 type: 'version',
  867.                 content: serverVersion,
  868.             });
  869.         }
  870.  
  871.         updateTagInfo() {
  872.             const tagElement = document.querySelector('#tag');
  873.             const tagText = document.querySelector('.tagText');
  874.             const tagValue = this.getTagFromUrl();
  875.  
  876.             if (tagValue) {
  877.                 modSettings.settings.tag = tagValue;
  878.                 updateStorage();
  879.                 tagElement.value = tagValue;
  880.                 tagText.innerText = `Tag: ${tagValue}`;
  881.                 this.send({
  882.                     type: 'update-tag',
  883.                     content: modSettings.settings.tag,
  884.                 });
  885.             } else if (modSettings.settings.tag) {
  886.                 tagElement.value = modSettings.settings.tag;
  887.                 tagText.innerText = `Tag: ${modSettings.settings.tag}`;
  888.                 this.send({
  889.                     type: 'update-tag',
  890.                     content: modSettings.settings.tag,
  891.                 });
  892.             }
  893.         }
  894.  
  895.         getTagFromUrl() {
  896.             const urlParams = new URLSearchParams(window.location.search);
  897.             const tagValue = urlParams.get('tag');
  898.             return tagValue ? tagValue.replace(/\/$/, '') : null;
  899.         }
  900.  
  901.         onClose() {
  902.             if (this.updateAvailable) return;
  903.  
  904.             this.retries++;
  905.             if (this.retries > this.maxRetries)
  906.                 throw new Error('SigMod server down.');
  907.  
  908.             setTimeout(() => this.connect(), 2000); // auto reconnect with delay
  909.         }
  910.  
  911.         onMessage(event) {
  912.             const message = this.parseMessage(event.data);
  913.             if (!message || !message.type) return;
  914.  
  915.             switch (message.type) {
  916.                 case 'sid':
  917.                     this.handleSidMessage(message.content);
  918.                     break;
  919.                 case 'ping':
  920.                     this.handlePingMessage();
  921.                     break;
  922.                 case 'minimap-data':
  923.                     mods.updData(message.content);
  924.                     break;
  925.                 case 'chat-message':
  926.                     this.handleChatMessage(message.content);
  927.                     break;
  928.                 case 'private-message':
  929.                     mods.updatePrivateChat(message.content);
  930.                     break;
  931.                 case 'update-available':
  932.                     this.handleUpdateAvailable(message.content);
  933.                     break;
  934.                 case 'alert':
  935.                     mods.handleAlert(message.content);
  936.                     break;
  937.                 case 'tournament-preview':
  938.                     mods.tData = message.content;
  939.                     mods.showTournament(message.content);
  940.                     break;
  941.                 case 'tournament-message':
  942.                     mods.updateChat({
  943.                         name: '[TOURNAMENT]',
  944.                         message: message.content,
  945.                         time: modSettings.chat.showTime ? Date.now() : null,
  946.                     });
  947.                     break;
  948.                 case 'tournament-session':
  949.                     mods.tournamentSession(message.content);
  950.                     break;
  951.                 case 'get-score':
  952.                     mods.getScore(message.content);
  953.                     break;
  954.                 case 'round-end':
  955.                     mods.roundEnd(message.content);
  956.                     break;
  957.                 case 'round-ready':
  958.                     mods.tournamentReady(message.content);
  959.                     break;
  960.                 case 'tournament-data':
  961.                     mods.handleTournamentData(message.content);
  962.                     break;
  963.                 case 'error':
  964.                     mods.modAlert(message.content.message, 'danger');
  965.                     break;
  966.                 default:
  967.                     console.error('Unknown message type:', message.type);
  968.             }
  969.         }
  970.  
  971.         onError(event) {
  972.             console.error('WebSocket error:', event);
  973.         }
  974.  
  975.         send(data) {
  976.             if (!data || this.ws.readyState !== 1) return;
  977.             const binaryData = new TextEncoder().encode(JSON.stringify(data));
  978.             this.ws.send(binaryData);
  979.         }
  980.  
  981.         parseMessage(data) {
  982.             try {
  983.                 const stringData = new TextDecoder().decode(
  984.                     new Uint8Array(data)
  985.                 );
  986.                 return JSON.parse(stringData);
  987.             } catch (error) {
  988.                 console.error('Failed to parse message:', error);
  989.                 return null;
  990.             }
  991.         }
  992.  
  993.         handleSidMessage(content) {
  994.             this.id = content;
  995.             if (!modSettings.modAccount.authorized) return;
  996.  
  997.             setTimeout(() => {
  998.                 mods.auth(content);
  999.             }, 1000);
  1000.         }
  1001.  
  1002.         handlePingMessage() {
  1003.             mods.ping.latency = Date.now() - mods.ping.start;
  1004.             mods.ping.end = Date.now();
  1005.             byId('clientPing').innerHTML = `Client Ping: ${mods.ping.latency}ms`;
  1006.         }
  1007.  
  1008.         handleChatMessage(content) {
  1009.             if (!content) return;
  1010.             let { admin, mod, vip, name, message, color } = content;
  1011.  
  1012.             name = this.formatChatName(admin, mod, vip, name);
  1013.  
  1014.             mods.updateChat({
  1015.                 admin,
  1016.                 mod,
  1017.                 color,
  1018.                 name,
  1019.                 message,
  1020.                 time: modSettings.chat.showTime ? Date.now() : null,
  1021.             });
  1022.         }
  1023.  
  1024.         formatChatName(admin, mod, vip, name) {
  1025.             if (admin) name = '[Owner] ' + name;
  1026.             if (mod) name = '[Mod] ' + name;
  1027.             if (vip) name = '[VIP] ' + name;
  1028.             if (!name) name = 'Unnamed';
  1029.             return name;
  1030.         }
  1031.  
  1032.         handleUpdateAvailable(content) {
  1033.             byId('play-btn').setAttribute('disabled', 'disabled');
  1034.             byId('spectate-btn').setAttribute('disabled', 'disabled');
  1035.             this.updateAvailable = true;
  1036.             this.createModAlert(content);
  1037.         }
  1038.  
  1039.         createModAlert(content) {
  1040.             const modAlert = document.createElement('div');
  1041.             modAlert.classList.add('modAlert');
  1042.             modAlert.innerHTML = `
  1043.                 <span>You are using an old mod version. Please update.</span>
  1044.                 <div class="flex centerXY g-5">
  1045.                     <button
  1046.                         class="modButton"
  1047.                         style="width: 100%"
  1048.                         onclick="window.open('${content}')"
  1049.                     >Update</button>
  1050.                 </div>
  1051.             `;
  1052.             document.body.append(modAlert);
  1053.         }
  1054.     }
  1055.  
  1056.     function randomPos() {
  1057.         let eventOptions = {
  1058.             clientX: Math.floor(Math.random() * window.innerWidth),
  1059.             clientY: Math.floor(Math.random() * window.innerHeight),
  1060.             bubbles: true,
  1061.             cancelable: true,
  1062.         };
  1063.  
  1064.         let event = new MouseEvent('mousemove', eventOptions);
  1065.  
  1066.         document.dispatchEvent(event);
  1067.     }
  1068.  
  1069.     let moveInterval = setInterval(randomPos);
  1070.     setTimeout(() => clearInterval(moveInterval), 600);
  1071.  
  1072.     // Disable chat before game settings actually load
  1073.     localStorage.setItem('settings', JSON.stringify({ ...JSON.parse(localStorage.getItem('settings')), showChat: false }));
  1074.  
  1075.     function addSettings() {
  1076.         const gameSettings = document.querySelector('.checkbox-grid');
  1077.         if (!gameSettings) return;
  1078.  
  1079.         const div = document.createElement('div');
  1080.         div.innerHTML = `
  1081.             <input type="checkbox" id="showNames">
  1082.             <label>Names</label>
  1083.             <input type="checkbox" id="showSkins">
  1084.             <label>Skins</label>
  1085.             <input type="checkbox" id="autoRespawn">
  1086.             <label>Auto Respawn</label>
  1087.             <input type="checkbox" id="autoClaimCoins">
  1088.             <label>Auto claim coins</label>
  1089.             <input type="checkbox" id="showPosition">
  1090.             <label>Position</label>
  1091.         `;
  1092.         while (div.children.length > 0) gameSettings.append(div.children[0]);
  1093.     }
  1094.     addSettings();
  1095.  
  1096.     async function checkDiscordLogin() {
  1097.         // popup window from discord login
  1098.         const urlParams = new URLSearchParams(window.location.search);
  1099.         let accessToken = urlParams.get('access_token');
  1100.         let refreshToken = urlParams.get('refresh_token');
  1101.  
  1102.         if (!accessToken || !refreshToken) return;
  1103.  
  1104.         const url = isDev
  1105.         ? `http://localhost:${port}/discord/login/`
  1106.         : 'https://mod.czrsd.com/discord/login/';
  1107.  
  1108.         const overlay = document.createElement('div');
  1109.         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`;
  1110.         overlay.innerHTML = `
  1111.                 <span style="font-size: 5rem; color: #fafafa;">Login...</span>
  1112.             `;
  1113.         document.body.append(overlay);
  1114.  
  1115.         setTimeout(async () => {
  1116.             if (refreshToken.endsWith('/')) {
  1117.                 refreshToken = refreshToken.substring(
  1118.                     0,
  1119.                     refreshToken.length - 1
  1120.                 );
  1121.             } else {
  1122.                 return;
  1123.             }
  1124.  
  1125.             await fetch(
  1126.                 `${url}?accessToken=${accessToken}&refreshToken=${refreshToken}`,
  1127.                 {
  1128.                     method: 'GET',
  1129.                     credentials: 'include',
  1130.                 }
  1131.             );
  1132.  
  1133.             modSettings.modAccount.authorized = true;
  1134.             updateStorage();
  1135.             window.close();
  1136.         }, 500);
  1137.     }
  1138.     checkDiscordLogin();
  1139.  
  1140.     let mods = {};
  1141.  
  1142.     let playerPosition = { x: null, y: null };
  1143.     let lastGetScore = 0;
  1144.     let lastPosTime = 0;
  1145.     let dead = false;
  1146.     let dead2 = false;
  1147.  
  1148.     function Mod() {
  1149.         this.nick = null;
  1150.         this.profile = {};
  1151.         this.friends_settings = window.sigmod.friends_settings = {};
  1152.         this.friend_names = window.sigmod.friend_names = new Set();
  1153.  
  1154.         this.splitKey = {
  1155.             keyCode: 32,
  1156.             code: 'Space',
  1157.             cancelable: true,
  1158.             composed: true,
  1159.             isTrusted: true,
  1160.             which: 32,
  1161.         };
  1162.  
  1163.         this.ping = {
  1164.             latency: NaN,
  1165.             intervalId: null,
  1166.             start: null,
  1167.             end: null,
  1168.         };
  1169.  
  1170.         this.dayTimer = null;
  1171.         this.challenges = [];
  1172.  
  1173.         this.scrolling = false;
  1174.         this.onContext = false;
  1175.         this.mouseDown = false;
  1176.  
  1177.         this.mouseX = 0;
  1178.         this.mouseY = 0;
  1179.  
  1180.         this.renderedMessages = 0;
  1181.         this.maxChatMessages = 200;
  1182.         this.mutedUsers = [];
  1183.         this.blockedChatData = {
  1184.             names: [],
  1185.             messages: []
  1186.         };
  1187.  
  1188.         this.respawnCommand = '/leaveworld';
  1189.         this.aboveRespawnLimit = false;
  1190.         this.cellSize = 0;
  1191.         this.miniMapData = [];
  1192.         this.border = {};
  1193.  
  1194.         this.dbCache = null;
  1195.  
  1196.         this.tourneyPassword = '';
  1197.         this.lastOneStanding = false;
  1198.  
  1199.         this.skins = [];
  1200.  
  1201.         this.virusImageLoaded = false;
  1202.         this.skinImageLoaded = false;
  1203.  
  1204.         this.routes = {
  1205.             discord: {
  1206.                 auth: isDev
  1207.                 ? 'https://discord.com/oauth2/authorize?client_id=1067097357780516874&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3001%2Fdiscord%2Fcallback&scope=identify'
  1208.                 : 'https://discord.com/oauth2/authorize?client_id=1067097357780516874&response_type=code&redirect_uri=https%3A%2F%2Fmod.czrsd.com%2Fdiscord%2Fcallback&scope=identify',
  1209.             },
  1210.         };
  1211.  
  1212.         // for SigMod specific
  1213.         this.appRoutes = {
  1214.             badge: isDev
  1215.             ? `http://localhost:${port}/badge`
  1216.             : 'https://mod.czrsd.com/badge',
  1217.             signIn: (path) =>
  1218.             isDev
  1219.             ? `http://localhost:${port}/${path}`
  1220.             : `https://mod.czrsd.com/${path}`,
  1221.             auth: isDev
  1222.             ? `http://localhost:${port}/auth`
  1223.             : `https://mod.czrsd.com/auth`,
  1224.             users: isDev
  1225.             ? `http://localhost:${port}/users`
  1226.             : `https://mod.czrsd.com/users`,
  1227.             search: isDev
  1228.             ? `http://localhost:${port}/search`
  1229.             : `https://mod.czrsd.com/search`,
  1230.             request: isDev
  1231.             ? `http://localhost:${port}/request`
  1232.             : `https://mod.czrsd.com/request`,
  1233.             friends: isDev
  1234.             ? `http://localhost:${port}/me/friends`
  1235.             : `https://mod.czrsd.com/me/friends`,
  1236.             profile: (id) =>
  1237.             isDev
  1238.             ? `http://localhost:${port}/profile/${id}`
  1239.             : `https://mod.czrsd.com/profile/${id}`,
  1240.             myRequests: isDev
  1241.             ? `http://localhost:${port}/me/requests`
  1242.             : `https://mod.czrsd.com/me/requests`,
  1243.             handleRequest: isDev
  1244.             ? `http://localhost:${port}/me/handle`
  1245.             : `https://mod.czrsd.com/me/handle`,
  1246.             logout: isDev
  1247.             ? `http://localhost:${port}/logout`
  1248.             : `https://mod.czrsd.com/logout`,
  1249.             imgUpload: isDev
  1250.             ? `http://localhost:${port}/me/upload`
  1251.             : `https://mod.czrsd.com/me/upload`,
  1252.             removeAvatar: isDev
  1253.             ? `http://localhost:${port}/me/handle`
  1254.             : `https://mod.czrsd.com/me/handle`,
  1255.             editProfile: isDev
  1256.             ? `http://localhost:${port}/me/edit`
  1257.             : `https://mod.czrsd.com/me/edit`,
  1258.             delProfile: isDev
  1259.             ? `http://localhost:${port}/me/remove`
  1260.             : `https://mod.czrsd.com/me/remove`,
  1261.             updateSettings: isDev
  1262.             ? `http://localhost:${port}/me/update-settings`
  1263.             : `https://mod.czrsd.com/me/update-settings`,
  1264.             chatHistory: (id) =>
  1265.             isDev
  1266.             ? `http://localhost:${port}/me/chat/${id}`
  1267.             : `https://mod.czrsd.com/me/chat/${id}`,
  1268.             onlineUsers: isDev
  1269.             ? `http://localhost:${port}/onlineUsers`
  1270.             : `https://mod.czrsd.com/onlineUsers`,
  1271.             announcements: isDev
  1272.             ? `http://localhost:${port}/announcements`
  1273.             : `https://mod.czrsd.com/announcements`,
  1274.             announcement: (id) =>
  1275.             isDev
  1276.             ? `http://localhost:${port}/announcement/${id}`
  1277.             : `https://mod.czrsd.com/announcement/${id}`,
  1278.             fonts: isDev
  1279.             ? `http://localhost:${port}/fonts`
  1280.             : 'https://mod.czrsd.com/fonts',
  1281.             blockedChatData: 'https://mod.czrsd.com/spam.json',
  1282.         };
  1283.  
  1284.         this.init();
  1285.     }
  1286.  
  1287.     Mod.prototype = {
  1288.         get style() {
  1289.             return `
  1290.         @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap');
  1291.  
  1292.         .mod_menu {
  1293.             position: absolute;
  1294.             top: 0;
  1295.             left: 0;
  1296.             width: 100%;
  1297.             height: 100vh;
  1298.             background: rgba(0, 0, 0, .6);
  1299.             z-index: 999999;
  1300.             display: flex;
  1301.             justify-content: center;
  1302.             align-items: center;
  1303.             color: #fff;
  1304.             transition: all .3s ease;
  1305.         }
  1306.  
  1307.         .mod_menu * {
  1308.             margin: 0;
  1309.             padding: 0;
  1310.             font-family: 'Ubuntu';
  1311.             box-sizing: border-box;
  1312.         }
  1313.  
  1314.         .mod_menu_wrapper {
  1315.             position: relative;
  1316.             display: flex;
  1317.             flex-direction: column;
  1318.             width: 700px;
  1319.             height: 500px;
  1320.             background: #111;
  1321.             border-radius: 12px;
  1322.             overflow: hidden;
  1323.             box-shadow: 0 5px 10px #000;
  1324.         }
  1325.  
  1326.         .mod_menu_header {
  1327.             display: flex;
  1328.             width: 100%;
  1329.             position: relative;
  1330.             height: 60px;
  1331.         }
  1332.  
  1333.         .mod_menu_header .header_img {
  1334.             width: 100%;
  1335.             height: 60px;
  1336.             object-fit: cover;
  1337.             object-position: center;
  1338.             position: absolute;
  1339.         }
  1340.  
  1341.         .mod_menu_header button {
  1342.             display: flex;
  1343.             justify-content: center;
  1344.             align-items: center;
  1345.             position: absolute;
  1346.             right: 10px;
  1347.             top: 30px;
  1348.             background: rgba(11, 11, 11, .7);
  1349.             width: 42px;
  1350.             height: 42px;
  1351.             font-size: 16px;
  1352.             transform: translateY(-50%);
  1353.         }
  1354.  
  1355.         .mod_menu_header button:hover {
  1356.             background: rgba(11, 11, 11, .5);
  1357.         }
  1358.  
  1359.         .mod_menu_inner {
  1360.             display: flex;
  1361.         }
  1362.  
  1363.         .mod_menu_navbar {
  1364.             display: flex;
  1365.             flex-direction: column;
  1366.             gap: 10px;
  1367.             min-width: 132px;
  1368.             padding: 10px;
  1369.             background: #181818;
  1370.             height: 440px;
  1371.         }
  1372.  
  1373.         .mod_nav_btn, .modButton-black {
  1374.             display: flex;
  1375.             justify-content: space-evenly;
  1376.             align-items: center;
  1377.             padding: 5px;
  1378.             background: #050505;
  1379.             border-radius: 8px;
  1380.             font-size: 16px;
  1381.             border: 1px solid transparent;
  1382.             outline: none;
  1383.             width: 100%;
  1384.             transition: all .3s ease;
  1385.         }
  1386.         label.modButton-black {
  1387.             font-weight: 400;
  1388.             cursor: pointer;
  1389.         }
  1390.  
  1391.         .modButton-black[disabled] {
  1392.             background: #333;
  1393.             cursor: default;
  1394.         }
  1395.  
  1396.         .mod_selected {
  1397.             border: 1px solid rgba(89, 89, 89, .9);
  1398.         }
  1399.  
  1400.         .mod_nav_btn img {
  1401.             width: 22px;
  1402.         }
  1403.  
  1404.         .mod_menu_content {
  1405.             width: 100%;
  1406.             padding: 10px;
  1407.             position: relative;
  1408. 			max-width: 568px;
  1409.         }
  1410.  
  1411.         .mod_tab {
  1412.             width: 100%;
  1413. 			height: 100%;
  1414.             display: flex;
  1415.             flex-direction: column;
  1416.             gap: 5px;
  1417.             overflow-y: auto;
  1418.             overflow-x: hidden;
  1419.             max-height: 420px;
  1420.             opacity: 1;
  1421.             transition: all .2s ease;
  1422.         }
  1423.         .modColItems {
  1424.             display: flex;
  1425.             flex-direction: column;
  1426.             align-items: center;
  1427.             gap: 15px;
  1428.             width: 100%;
  1429.         }
  1430.  
  1431.         .modColItems_2 {
  1432.             display: flex;
  1433.             flex-direction: column;
  1434.             align-items: start;
  1435.             justify-content: start;
  1436.             background: #050505;
  1437.             gap: 8px;
  1438.             border-radius: 0.5rem;
  1439.             padding: 10px;
  1440.             width: 100%;
  1441.         }
  1442.  
  1443.         .modRowItems {
  1444.             display: flex;
  1445.             justify-content: center;
  1446.             align-items: center;
  1447.             background: #050505;
  1448.             gap: 58px;
  1449.             border-radius: 0.5rem;
  1450.             padding: 10px;
  1451.             width: 100%;
  1452.         }
  1453.  
  1454.         .form-control {
  1455.             border-width: 1px;
  1456.         }
  1457.         .form-control.error-border {
  1458.             border-color: #AC3D3D;
  1459.         }
  1460.  
  1461. 		.modSlider {
  1462. 		  --thumb-color: #d9d9d9;
  1463. 		  -webkit-appearance: none;
  1464. 		  appearance: none;
  1465. 		  width: 100%;
  1466. 		  height: 8px;
  1467. 		  background: #333;
  1468. 		  border-radius: 5px;
  1469. 		  outline: none;
  1470. 		  transition: all 0.3s ease;
  1471. 		}
  1472.  
  1473. 		.modSlider::-webkit-slider-thumb {
  1474. 		  -webkit-appearance: none;
  1475. 		  appearance: none;
  1476. 		  width: 20px;
  1477. 		  height: 20px;
  1478. 		  border-radius: 50%;
  1479. 		  background: var(--thumb-color);
  1480. 		}
  1481.  
  1482. 		.modSlider::-moz-range-thumb {
  1483. 		  width: 20px;
  1484. 		  height: 20px;
  1485. 		  border-radius: 50%;
  1486. 		  background: var(--thumb-color);
  1487. 		}
  1488.  
  1489. 		.modSlider::-ms-thumb {
  1490. 		  width: 20px;
  1491. 		  height: 20px;
  1492. 		  border-radius: 50%;
  1493. 		  background: var(--thumb-color);
  1494. 		}
  1495.  
  1496.         input:focus, select:focus, button:focus{
  1497.              outline: none;
  1498.         }
  1499.         .macros_wrapper {
  1500.             display: flex;
  1501.             width: 100%;
  1502.             justify-content: center;
  1503.             flex-direction: column;
  1504.             gap: 10px;
  1505.             background: #050505;
  1506.             padding: 10px;
  1507.             border-radius: 0.75rem;
  1508.         }
  1509.         .macrosContainer {
  1510.             display: flex;
  1511.             width: 100%;
  1512.             justify-content: center;
  1513.             align-items: center;
  1514.             gap: 20px;
  1515.         }
  1516.         .macroRow {
  1517.             background: #121212;
  1518.             border-radius: 5px;
  1519.             padding: 7px;
  1520.             display: flex;
  1521.             justify-content: space-between;
  1522.             align-items: center;
  1523.             gap: 10px;
  1524.         }
  1525.         .keybinding {
  1526.             border-radius: 5px;
  1527.             background: #242424;
  1528.             border: none;
  1529.             color: #fff;
  1530.             padding: 2px 5px;
  1531.             max-width: 50px;
  1532.             font-weight: 500;
  1533.             text-align: center;
  1534.         }
  1535.         .closeBtn{
  1536.              width: 46px;
  1537.              background-color: transparent;
  1538. 			 display: flex;
  1539. 			 justify-content: center;
  1540. 			 align-items: center;
  1541.         }
  1542.         .select-btn {
  1543.             padding: 15px 20px;
  1544.             background: #222;
  1545.             border-radius: 2px;
  1546.             position: relative;
  1547.         }
  1548.  
  1549.         .select-btn:active {
  1550.             scale: 0.95
  1551.         }
  1552.  
  1553.         .select-btn::before {
  1554.             content: "...";
  1555.             font-size: 20px;
  1556.             color: #fff;
  1557.             position: absolute;
  1558.             top: 50%;
  1559.             left: 50%;
  1560.             transform: translate(-50%, -50%);
  1561.         }
  1562.          .text {
  1563.              user-select: none;
  1564.              font-weight: 500;
  1565.              text-align: left;
  1566.         }
  1567.          .modButton {
  1568.              background-color: #252525;
  1569.              border-radius: 4px;
  1570.              color: #fff;
  1571.              transition: all .3s;
  1572.              outline: none;
  1573.              padding: 7px;
  1574.              font-size: 13px;
  1575.              border: none;
  1576.         }
  1577.          .modButton:hover {
  1578.              background-color: #222
  1579.         }
  1580.          .modInput {
  1581.              background-color: #111;
  1582.              border: none;
  1583.              border-radius: 5px;
  1584.              position: relative;
  1585.              border-top-right-radius: 4px;
  1586.              border-top-left-radius: 4px;
  1587.              font-weight: 500;
  1588.              padding: 5px;
  1589.              color: #fff;
  1590.         }
  1591. 		.modNumberInput:disabled {
  1592. 			color: #777;
  1593. 		}
  1594.  
  1595.         .modCheckbox input[type="checkbox"] {
  1596.              display: none;
  1597.              visibility: hidden;
  1598.         }
  1599.         .modCheckbox label {
  1600.           display: inline-block;
  1601.         }
  1602.  
  1603.         .modCheckbox .cbx {
  1604.           position: relative;
  1605.           top: 1px;
  1606.           width: 17px;
  1607.           height: 17px;
  1608.           margin: 2px;
  1609.           border: 1px solid #c8ccd4;
  1610.           border-radius: 3px;
  1611.           vertical-align: middle;
  1612.           transition: background 0.1s ease;
  1613.           cursor: pointer;
  1614.         }
  1615.  
  1616.         .modCheckbox .cbx:after {
  1617.           content: '';
  1618.           position: absolute;
  1619.           top: 1px;
  1620.           left: 5px;
  1621.           width: 5px;
  1622.           height: 11px;
  1623.           opacity: 0;
  1624.           transform: rotate(45deg) scale(0);
  1625.           border-right: 2px solid #fff;
  1626.           border-bottom: 2px solid #fff;
  1627.           transition: all 0.3s ease;
  1628.           transition-delay: 0.15s;
  1629.         }
  1630.  
  1631.         .modCheckbox input[type="checkbox"]:checked ~ .cbx {
  1632.           border-color: transparent;
  1633.           background: #6871f1;
  1634.           box-shadow: 0 0 10px #2E2D80;
  1635.         }
  1636.  
  1637.         .modCheckbox input[type="checkbox"]:checked ~ .cbx:after {
  1638.           opacity: 1;
  1639.           transform: rotate(45deg) scale(1);
  1640.         }
  1641.  
  1642.          .SettingsButton{
  1643.              border: none;
  1644.              outline: none;
  1645.              margin-right: 10px;
  1646.              transition: all .3s ease;
  1647.         }
  1648.          .SettingsButton:hover {
  1649.              scale: 1.1;
  1650.         }
  1651.          .colorInput{
  1652.              background-color: transparent;
  1653.              width: 31px;
  1654.              height: 35px;
  1655.              border-radius: 50%;
  1656.              border: none;
  1657.         }
  1658.          .colorInput::-webkit-color-swatch {
  1659.              border-radius: 50%;
  1660.              border: 2px solid #fff;
  1661.         }
  1662.         .whiteBorder_colorInput::-webkit-color-swatch {
  1663.             border-color: #fff;
  1664.         }
  1665. 		.menu-center>div>.menu-center-content>div>div>.menu__form-group {
  1666. 			margin-bottom: 14px !important;
  1667. 		}
  1668.          #dclinkdiv {
  1669.              display: flex;
  1670.              flex-direction: row;
  1671.              margin-top: 10px;
  1672.         }
  1673.          .dclinks {
  1674.              width: calc(50% - 5px);
  1675.              height: 36px;
  1676.              display: flex;
  1677.              justify-content: center;
  1678.              align-items: center;
  1679.              background-color: rgba(88, 101, 242, 1);
  1680.              border-radius: 6px;
  1681.              margin: 0 auto;
  1682.              color: #fff;
  1683.         }
  1684.          #cm_close__settings {
  1685.              width: 50px;
  1686.              transition: all .3s ease;
  1687.         }
  1688.          #cm_close__settings svg:hover {
  1689.              scale: 1.1;
  1690.         }
  1691.          #cm_close__settings svg {
  1692.              transition: all .3s ease;
  1693.         }
  1694.          .modTitleText {
  1695.              text-align: center;
  1696.              font-size: 16px;
  1697.         }
  1698.         .modItem {
  1699.              display: flex;
  1700.              justify-content: center;
  1701.              align-items: center;
  1702.              flex-direction: column;
  1703.         }
  1704.         .accent_row {
  1705.             background: #111111;
  1706.         }
  1707.          .mod_tab-content {
  1708.              width: 100%;
  1709.              margin: 10px;
  1710.              overflow: auto;
  1711.              display: flex;
  1712.              flex-direction: column;
  1713.         }
  1714.  
  1715.         #Tab6 .mod_tab-content {
  1716.              overflow-y: auto;
  1717.              max-height: 230px;
  1718.              display: flex;
  1719.              flex-wrap: nowrap;
  1720.              flex-direction: column;
  1721.              gap: 10px;
  1722.         }
  1723.  
  1724.         .tab-content, #coins-tab, #chests-tab {
  1725.             overflow-x: hidden;
  1726.             justify-content: center;
  1727.         }
  1728.  
  1729.         #shop-skins-buttons::after {
  1730.             background: #050505;
  1731.         }
  1732.  
  1733. 		#sigma-status {
  1734. 			background: rgba(0, 0, 0, .6) !important;
  1735. 		}
  1736.  
  1737.          .w-100 {
  1738.              width: 100%
  1739.         }
  1740.          .btn:hover {
  1741.              color: unset;
  1742.         }
  1743.  
  1744.         #savedNames {
  1745.             background-color: #000;
  1746.             padding: 5px;
  1747.             border-radius: 5px;
  1748.             overflow-y: auto;
  1749.             height: 155px;
  1750.             background-image: url("https://raw.githubusercontent.com/Sigmally/SigMod/main/images/purple_gradient.png");
  1751.             background-size: cover;
  1752.             background-position: center;
  1753.             background-repeat: no-repeat;
  1754.             box-shadow: 0 0 10px #000;
  1755.         }
  1756.  
  1757.         .scroll {
  1758.             scroll-behavior: smooth;
  1759.         }
  1760.  
  1761.         /* Chrome, Safari */
  1762.         .scroll::-webkit-scrollbar {
  1763.             width: 7px;
  1764.         }
  1765.  
  1766.         .scroll::-webkit-scrollbar-track {
  1767.             background: #222;
  1768.             border-radius: 5px;
  1769.         }
  1770.  
  1771.         .scroll::-webkit-scrollbar-thumb {
  1772.             background-color: #333;
  1773.             border-radius: 5px;
  1774.         }
  1775.  
  1776.         .scroll::-webkit-scrollbar-thumb:hover {
  1777.             background: #353535;
  1778.         }
  1779.  
  1780.         /* Firefox */
  1781.         .scroll {
  1782.             scrollbar-width: thin;
  1783.             scrollbar-color: #333 #222;
  1784.         }
  1785.  
  1786.         .scroll:hover {
  1787.             scrollbar-color: #353535 #222;
  1788.         }
  1789.  
  1790.         .themes {
  1791.             display: flex;
  1792.             flex-direction: row;
  1793. 			flex: 1;
  1794.             flex-wrap: wrap;
  1795.             justify-content: center;
  1796.             width: 100%;
  1797. 			min-height: 254px;
  1798.             max-height: 420px;
  1799.             background: #000;
  1800.             border-radius: 5px;
  1801.             overflow-y: scroll;
  1802.             gap: 10px;
  1803.             padding: 5px;
  1804.         }
  1805.  
  1806.         .themeContent {
  1807.           width: 50px;
  1808.           height: 50px;
  1809.           border: 2px solid #222;
  1810.           border-radius: 50%;
  1811.           background-position: center;
  1812.         }
  1813.  
  1814.         .theme {
  1815.             height: 75px;
  1816.             display: flex;
  1817.             align-items: center;
  1818.             justify-content: center;
  1819.             flex-direction: column;
  1820.             cursor: pointer;
  1821.         }
  1822.          .delName {
  1823.              font-weight: 500;
  1824.              background: #e17e7e;
  1825.              height: 20px;
  1826.              border: none;
  1827.              border-radius: 5px;
  1828.              font-size: 10px;
  1829.              margin-left: 5px;
  1830.              color: #fff;
  1831.              display: flex;
  1832.              justify-content: center;
  1833.              align-items: center;
  1834.              width: 20px;
  1835.         }
  1836.          .NameDiv {
  1837.              display: flex;
  1838.              background: #111;
  1839.              border-radius: 5px;
  1840.              margin: 5px;
  1841.              padding: 3px 8px;
  1842.              height: 34px;
  1843.              align-items: center;
  1844.              justify-content: space-between;
  1845.              cursor: pointer;
  1846.              box-shadow: 0 5px 10px -2px #000;
  1847.         }
  1848.         .NameLabel {
  1849.             cursor: pointer;
  1850.             font-weight: 500;
  1851.             text-align: center;
  1852.             color: #fff;
  1853.         }
  1854.         .alwan {
  1855.             border-radius: 8px;
  1856.         }
  1857.         .colorpicker-additional {
  1858.             display: flex;
  1859.             justify-content: space-between;
  1860.             width: 100%;
  1861.             color: #fafafa;
  1862.             padding: 10px;
  1863.         }
  1864.         .resetButton {
  1865.             width: 25px;
  1866.             height: 25px;
  1867.             background-image: url("https://raw.githubusercontent.com/Sigmally/SigMod/main/images/reset.svg");
  1868.             background-color: transparent;
  1869. 			background-repeat: no-repeat;
  1870.             border: none;
  1871.         }
  1872.  
  1873.         .modAlert {
  1874.             position: fixed;
  1875.             top: 8%;
  1876.             left: 50%;
  1877.             transform: translate(-50%, -50%);
  1878.             z-index: 99995;
  1879.             background: #3F3F3F;
  1880.             border-radius: 10px;
  1881.             display: flex;
  1882.             flex-direction: column;
  1883.             gap: 5px;
  1884.             padding: 10px;
  1885.             color: #fff;
  1886.             max-width: 320px;
  1887.         }
  1888.  
  1889.         .alert_overlay {
  1890.             position: absolute;
  1891.             top: 0;
  1892.             left: 0;
  1893.             z-index: 999999999;
  1894.             pointer-events: none;
  1895.             width: 100%;
  1896.             height: 100vh;
  1897.             display: flex;
  1898.             flex-direction: column;
  1899.             justify-content: start;
  1900.             align-items: center;
  1901.         }
  1902.  
  1903.         .infoAlert {
  1904.             padding: 5px;
  1905.             border-radius: 5px;
  1906.             margin-top: 5px;
  1907.             color: #fff;
  1908.         }
  1909.  
  1910.         .modAlert-success {
  1911.             background: #5BA55C;
  1912.         }
  1913.         .modAlert-success .modAlert-loader {
  1914.             background: #6BD56D;
  1915.         }
  1916.         .modAlert-default {
  1917.             background: #151515;
  1918.         }
  1919.         .modAlert-default .modAlert-loader {
  1920.             background: #222;
  1921.         }
  1922.         .modAlert-danger {
  1923.             background: #D44121;
  1924.         }
  1925.         .modAlert-danger .modAlert-loader {
  1926.             background: #A5361E;
  1927.         }
  1928.         #free-coins .modAlert-danger {
  1929.             background: #fff !important;
  1930.         }
  1931.  
  1932.         .modAlert-loader {
  1933.             width: 100%;
  1934.             height: 2px;
  1935.             margin-top: 5px;
  1936.             transition: all .3s ease-in-out;
  1937.             animation: loadAlert 2s forwards;
  1938.         }
  1939.  
  1940.         @keyframes loadAlert {
  1941.             0% {
  1942.                 width: 100%;
  1943.             }
  1944.             100% {
  1945.                 width: 0%;
  1946.             }
  1947.         }
  1948.  
  1949.         .themeEditor {
  1950.             z-index: 999999999999;
  1951.             position: absolute;
  1952.             top: 50%;
  1953.             left: 50%;
  1954.             transform: translate(-50%, -50%);
  1955.             background: rgba(0, 0, 0, .85);
  1956.             color: #fff;
  1957.             padding: 10px;
  1958.             border-radius: 10px;
  1959.             box-shadow: 0 0 10px #000;
  1960.             width: 400px;
  1961.         }
  1962.  
  1963.         .theme_editor_header {
  1964.             display: flex;
  1965.             justify-content: space-between;
  1966.             align-items: center;
  1967.             gap: 10px;
  1968.         }
  1969.  
  1970.         .theme-editor-tab {
  1971.             display: flex;
  1972.             justify-content: center;
  1973.             align-items: start;
  1974.             flex-direction: column;
  1975.             margin-top: 10px
  1976.         }
  1977.  
  1978.         .themes_preview {
  1979.             width: 50px;
  1980.             height: 50px;
  1981.             border: 2px solid #fff;
  1982.             border-radius: 2px;
  1983.             display: flex;
  1984.             justify-content: center;
  1985.             align-items: center;
  1986.         }
  1987.  
  1988.         .sigmod-title {
  1989.             display: flex;
  1990.             flex-direction: column;
  1991.             align-items: center;
  1992.             gap: 2px;
  1993.         }
  1994.         .sigmod-title #title {
  1995.             width: fit-content;
  1996.         }
  1997.         #bycursed {
  1998.             font-family: "Titillium Web", sans-serif;
  1999. 			font-weight: 400;
  2000.             font-size: 16px;
  2001.         }
  2002.         #bycursed a {
  2003.             color: #71aee3;
  2004.         }
  2005.         .stats__item>span, #title, .stats-btn__text {
  2006.            color: #fff;
  2007.         }
  2008.  
  2009.         .top-users__inner::-webkit-scrollbar-thumb {
  2010.             border: none;
  2011.         }
  2012.         #signInBtn, #nick, #gamemode, .form-control, .profile-header, .coins-num, #clan-members, .member-index, .member-level, #clan-requests {
  2013.             background: rgba(0, 0, 0, 0.4) !important;
  2014.             color: #fff !important;
  2015.         }
  2016.         .profile-name, #progress-next, .member-desc > p:first-child, #clan-leave > div, .clans-item > div > b, #clans-input input, #shop-nav button {
  2017.             color: #fff !important;
  2018.         }
  2019.         .head-desc, #shop-nav button {
  2020.             border: 1px solid #000;
  2021.         }
  2022.         #shop-nav button {
  2023.            transition: background .1s ease;
  2024.         }
  2025.         #shop-nav button:hover {
  2026.            background: #121212 !important;
  2027.         }
  2028.         #clan-handler, #request-handler, #clans-list, #clans-input, .clans-item button, #shop-content, .card-particles-bar-bg {
  2029.             background: #111 !important;
  2030.             color: #fff !important;
  2031.         }
  2032.         #clans_and_settings {
  2033.             height: auto !important;
  2034.         }
  2035.         .card-body {
  2036.             background: linear-gradient(180deg, #000 0%, #1b354c 100%);
  2037.         }
  2038.         .free-card:hover .card-body {
  2039.             background: linear-gradient(180deg, #111 0%, #1b354c 100%);
  2040.         }
  2041.         #shop-tab-body, #shop-nav, #shop-skins-buttons {
  2042.             background: #050505 !important;
  2043.         }
  2044.         #clan-leave {
  2045.             background: #111;
  2046.             bottom: -1px;
  2047.         }
  2048.         .sent {
  2049.             position: relative;
  2050.             width: 100px;
  2051.         }
  2052.  
  2053.         .sent::before {
  2054.             content: "Sent request";
  2055.             width: 100%;
  2056.             height: 10px;
  2057.             word-spacing: normal;
  2058.             white-space: nowrap;
  2059.             position: absolute;
  2060.             background: #4f79f9;
  2061.             display: flex;
  2062.             justify-content: center;
  2063.             align-items: center;
  2064.         }
  2065.  
  2066.         .btn, .sign-in-out-btn {
  2067.             transition: all .2s ease;
  2068.         }
  2069. 		.free-coins-body > div, .goldmodal-contain {
  2070. 			background: rgba(0, 0, 0, .5);
  2071. 		}
  2072.         #clan .connecting__content, #clans .connecting__content {
  2073.             background: #151515;
  2074.             color: #fff;
  2075.             box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  2076.         }
  2077.  
  2078.         .skin-select__icon-text {
  2079.             color: #fff;
  2080.         }
  2081.  
  2082.         .justify-sb {
  2083.             display: flex;
  2084.             align-items: center;
  2085.             justify-content: space-between;
  2086.         }
  2087.  
  2088.         .macro-extanded_input {
  2089.             width: 75px;
  2090.             text-align: center;
  2091.         }
  2092.         .form-control option {
  2093.             background: #111;
  2094.         }
  2095.  
  2096.         .stats-line {
  2097.             width: 100%;
  2098.             user-select: none;
  2099.             margin-bottom: 5px;
  2100.             padding: 5px;
  2101.             background: #050505;
  2102.             border: 1px solid var(--default-mod);
  2103.             border-radius: 5px;
  2104.         }
  2105.  
  2106.         .stats-info-text {
  2107.             color: #7d7d7d;
  2108.         }
  2109.  
  2110.         .setting-card-wrapper {
  2111.             margin-right: 10px;
  2112.             padding: 10px;
  2113.             background: #161616;
  2114.             border-radius: 5px;
  2115.             display: flex;
  2116.             flex-direction: column;
  2117. 			width: 100%;
  2118.         }
  2119.  
  2120.         .setting-card {
  2121.             display: flex;
  2122.             align-items: center;
  2123.             justify-content: space-between;
  2124.         }
  2125.  
  2126.         .setting-card-action {
  2127.             display: flex;
  2128.             align-items: center;
  2129.             gap: 5px;
  2130.             cursor: pointer;
  2131.         }
  2132.  
  2133.         .setting-card-action {
  2134.             width: 100%;
  2135.         }
  2136.  
  2137.         .setting-card-name {
  2138.             font-size: 16px;
  2139.             user-select: none;
  2140.             width: 100%;
  2141.         }
  2142.  
  2143.         .mod-small-modal {
  2144.             display: flex;
  2145.             flex-direction: column;
  2146.             gap: 10px;
  2147.             position: absolute;
  2148.             z-index: 99999;
  2149.             top: 50%;
  2150.             left: 50%;
  2151.             transform: translate(-50%, -50%);
  2152.             background: #191919;
  2153.             box-shadow: 0 5px 15px -2px #000;
  2154.             padding: 10px;
  2155.             border-radius: 5px;
  2156.         }
  2157.  
  2158.         .mod-small-modal-header {
  2159.             display: flex;
  2160.             justify-content: space-between;
  2161.             align-items: center;
  2162.         }
  2163.  
  2164.         .mod-small-modal-header h1 {
  2165.             font-size: 20px;
  2166.             font-weight: 500;
  2167.             margin: 0;
  2168.         }
  2169.  
  2170.         .mod-small-modal-content {
  2171.             display: flex;
  2172.             flex-direction: column;
  2173.             width: 100%;
  2174.             align-items: center;
  2175.         }
  2176.  
  2177.         .mod-small-modal-content_selectImage {
  2178.             display: flex;
  2179.             flex-direction: column;
  2180.             gap: 10px;
  2181.         }
  2182.  
  2183.         .imagePreview {
  2184.             min-width: 34px;
  2185.             width: 34px;
  2186.             height: 34px;
  2187.             border: 2px solid #353535;
  2188. 			border-radius: 5px;
  2189. 			background-size: contain;
  2190. 			background-repeat: no-repeat;
  2191. 			background-position: center;
  2192.  
  2193. 			/* for preview text */
  2194. 			display: flex;
  2195. 			justify-content: center;
  2196. 			align-items: center;
  2197. 			font-size: 7px;
  2198. 			overflow: hidden;
  2199. 			text-align: center;
  2200.         }
  2201.  
  2202.         .modChat {
  2203.             min-width: 450px;
  2204.             max-width: 450px;
  2205.             min-height: 285px;
  2206.             max-height: 285px;
  2207.             color: #fafafa;
  2208.             padding: 10px;
  2209.             position: absolute;
  2210.             bottom: 10px;
  2211.             left: 10px;
  2212.             z-index: 999;
  2213.             border-radius: .5rem;
  2214.             overflow: hidden;
  2215.             opacity: 1;
  2216.             transition: all .3s ease;
  2217.         }
  2218.  
  2219.         .modChat__inner {
  2220.             min-width: 430px;
  2221.             max-width: 430px;
  2222.             min-height: 265px;
  2223.             max-height: 265px;
  2224.             height: 100%;
  2225.             display: flex;
  2226.             flex-direction: column;
  2227.             gap: 5px;
  2228.             justify-content: flex-end;
  2229.             opacity: 1;
  2230.             transition: all .3s ease;
  2231.         }
  2232.  
  2233.         .mod-compact {
  2234.             transform: scale(0.78);
  2235.         }
  2236.         .mod-compact.modChat {
  2237.             left: -40px;
  2238.             bottom: -20px;
  2239.         }
  2240.         .mod-compact.chatAddedContainer {
  2241.             left: 350px;
  2242.             bottom: -17px;
  2243.         }
  2244.  
  2245.         #scroll-down-btn {
  2246.             position: absolute;
  2247.             bottom: 60px;
  2248.             left: 50%;
  2249.             transform: translateX(-50%);
  2250.             width: 80px;
  2251.             display:none;
  2252.             box-shadow:0 0 5px #000;
  2253.             z-index: 5;
  2254.         }
  2255.  
  2256.         .modchat-chatbuttons {
  2257.             margin-bottom: auto;
  2258.             display: flex;
  2259.             gap: 5px;
  2260.         }
  2261.  
  2262.         .chat-context {
  2263.             position: absolute;
  2264.             z-index: 999999;
  2265.             width: 100px;
  2266.             display: flex;
  2267.             flex-direction: column;
  2268.             justify-content: center;
  2269.             align-items: center;
  2270.             gap: 5px;
  2271.             background: #181818;
  2272.             border-radius: 5px;
  2273.         }
  2274.  
  2275.         .chat-context span {
  2276.             color: #fff;
  2277.             user-select: none;
  2278.             padding: 5px;
  2279.             white-space: nowrap;
  2280.         }
  2281.  
  2282.         .chat-context button {
  2283.             width: 100%;
  2284.             background-color: transparent;
  2285.             border: none;
  2286.             border-top: 2px solid #747474;
  2287.             outline: none;
  2288.             color: #fff;
  2289.             transition: all .3s ease;
  2290.         }
  2291.  
  2292.         .chat-context button:hover {
  2293.             backgrokund-color: #222;
  2294.         }
  2295.  
  2296.         .tagText {
  2297.             margin-left: auto;
  2298.             font-size: 14px;
  2299.         }
  2300.  
  2301.         #mod-messages {
  2302.             position: relative;
  2303.             display: flex;
  2304.             flex-direction: column;
  2305.             max-height: 185px;
  2306.             overflow-y: auto;
  2307.             direction: rtl;
  2308.             scroll-behavior: smooth;
  2309.         }
  2310.         .message {
  2311.             direction: ltr;
  2312.             margin: 2px 0 0 5px;
  2313.             text-overflow: ellipsis;
  2314.             white-space: nowrap;
  2315.             max-width: 100%;
  2316.             display: flex;
  2317.             justify-content: space-between;
  2318.             align-items: center;
  2319.         }
  2320.  
  2321.         .message_name {
  2322.             user-select: none;
  2323.         }
  2324.  
  2325.         .message .time {
  2326.             color: rgba(255, 255, 255, 0.7);
  2327.             font-size: 12px;
  2328.         }
  2329.  
  2330.         #chatInputContainer {
  2331.             display: flex;
  2332.             gap: 5px;
  2333.             align-items: center;
  2334.             padding: 5px;
  2335.             background: rgba(25,25,25, .6);
  2336.             border-radius: .5rem;
  2337.             overflow: hidden;
  2338.         }
  2339.  
  2340.         .chatInput {
  2341.             flex-grow: 1;
  2342.             border: none;
  2343.             background: transparent;
  2344.             color: #fff;
  2345.             padding: 5px;
  2346.             outline: none;
  2347.             max-width: 100%;
  2348.         }
  2349.  
  2350.         .chatButton {
  2351.             background: #8a25e5;
  2352.             border: none;
  2353.             border-radius: 5px;
  2354.             padding: 5px 10px;
  2355.             height: 100%;
  2356.             color: #fff;
  2357.             transition: all 0.3s;
  2358.             cursor: pointer;
  2359.             display: flex;
  2360.             align-items: center;
  2361.             height: 28px;
  2362.             justify-content: center;
  2363.             gap: 5px;
  2364.         }
  2365.         .chatButton:hover {
  2366.             background: #7a25e5;
  2367.         }
  2368.         .chatCloseBtn {
  2369.             position: absolute;
  2370.             top: 50%;
  2371.             left: 50%;
  2372.             transform: translate(-50%, -50%);
  2373.         }
  2374.  
  2375.         .emojisContainer {
  2376.             display: flex;
  2377.             flex-direction: column;
  2378.             gap: 5px;
  2379.         }
  2380.         .chatAddedContainer {
  2381.             position: absolute;
  2382.             bottom: 10px;
  2383.             left: 465px;
  2384.             z-index: 9999;
  2385.             padding: 10px;
  2386.             background: #151515;
  2387.             border-radius: .5rem;
  2388.             min-width: 172px;
  2389.             max-width: 172px;
  2390.             min-height: 250px;
  2391.             max-height: 250px;
  2392.         }
  2393.         #categories {
  2394.             overflow-y: auto;
  2395.             max-height: calc(250px - 50px);
  2396.             gap: 2px;
  2397.         }
  2398.         .category {
  2399.             width: 100%;
  2400.             display: flex;
  2401.             flex-direction: column;
  2402.             gap: 2px;
  2403.         }
  2404.         .category span {
  2405.             color: #fafafa;
  2406.             font-size: 14px;
  2407.             text-align: center;
  2408.         }
  2409.  
  2410.         .emojiContainer {
  2411.             display: flex;
  2412.             flex-wrap: wrap;
  2413.             align-items: center;
  2414.             justify-content: center;
  2415.         }
  2416.  
  2417.         #categories .emoji {
  2418.             padding: 2px;
  2419.             border-radius: 5px;
  2420.             font-size: 16px;
  2421.             user-select: none;
  2422.             cursor: pointer;
  2423.         }
  2424.  
  2425.         .chatSettingsContainer {
  2426.             padding: 10px 3px;
  2427.         }
  2428.         .chatSettingsContainer .scroll {
  2429.             display: flex;
  2430.             flex-direction: column;
  2431.             gap: 10px;
  2432.             max-height: 235px;
  2433.             overflow-y: auto;
  2434.             padding: 0 10px;
  2435.         }
  2436.  
  2437.         .csBlock {
  2438.             border: 2px solid #050505;
  2439.             border-radius: .5rem;
  2440.             color: #fff;
  2441.             display: flex;
  2442.             align-items: center;
  2443.             flex-direction: column;
  2444.             gap: 5px;
  2445.             padding-bottom: 5px;
  2446.         }
  2447.  
  2448.         .csBlock .csBlockTitle {
  2449.             background: #080808;
  2450.             width: 100%;
  2451.             padding: 3px;
  2452.             text-align: center;
  2453.         }
  2454.  
  2455.         .csRow {
  2456.             display: flex;
  2457.             justify-content: space-between;
  2458.             align-items: center;
  2459.             padding: 0 5px;
  2460.             width: 100%;
  2461.         }
  2462.  
  2463.         .csRowName {
  2464.             display: flex;
  2465.             gap: 5px;
  2466.             align-items: start;
  2467.         }
  2468.  
  2469.         .csRowName .infoIcon {
  2470.             width: 14px;
  2471.             cursor: pointer;
  2472.         }
  2473.  
  2474.         .modInfoPopup {
  2475.             position: absolute;
  2476.             top: 2px;
  2477.             left: 58%;
  2478.             text-align: center;
  2479.             background: #151515;
  2480.             border: 1px solid #607bff;
  2481.             border-radius: 10px;
  2482.             transform: translateX(-50%);
  2483.             white-space: nowrap;
  2484.             padding: 5px;
  2485.             z-index: 99999;
  2486.         }
  2487.  
  2488.         .modInfoPopup::after {
  2489.             content: '';
  2490.             display: block;
  2491.             position: absolute;
  2492.             bottom: -7px;
  2493.             background: #151515;
  2494.             right: 50%;
  2495.             transform: translateX(-50%) rotate(-45deg);
  2496.             width: 12px;
  2497.             height: 12px;
  2498.             border-left: 1px solid #607bff;
  2499.             border-bottom: 1px solid #607bff;
  2500.         }
  2501.  
  2502.         .modInfoPopup p {
  2503.             margin: 0;
  2504.             font-size: 12px;
  2505.             color: #fff;
  2506.         }
  2507.  
  2508.         .minimapContainer {
  2509.             display: flex;
  2510.             flex-direction: column;
  2511.             align-items: end;
  2512.             pointer-events: none;
  2513.             position: absolute;
  2514.             bottom: 0;
  2515.             right: 0;
  2516.             z-index: 99999;
  2517.         }
  2518.         .minimap {
  2519.             border-radius: 2px;
  2520.             border-top: 1px solid rgba(255, 255, 255, .5);
  2521.             border-left: 1px solid rgba(255, 255, 255, .5);
  2522.             box-shadow: 0 0 4px rgba(255, 255, 255, .5);
  2523.         }
  2524.  
  2525.         #tag {
  2526.             width: 50px;
  2527.         }
  2528.  
  2529.         .blur {
  2530.             color: transparent!important;
  2531.             text-shadow: 0 0 6px hsl(0deg 0% 90% / 70%);
  2532.             transition: all .2s;
  2533.         }
  2534.  
  2535.         .blur:focus, .blur:hover {
  2536.             color: #fafafa!important;
  2537.             text-shadow: none;
  2538.         }
  2539.         .progress-row button {
  2540.             background: transparent;
  2541.         }
  2542.  
  2543.         #mod_home .justify-sb {
  2544.             z-index: 2;
  2545.         }
  2546.  
  2547.         .modTitleText {
  2548.             font-size: 15px;
  2549.             color: #fafafa;
  2550.             text-align: start;
  2551.         }
  2552.         .modDescText {
  2553.             text-align: start;
  2554.             font-size: 12px;
  2555.             color: #777;
  2556.         }
  2557.         .modButton-secondary {
  2558.             background-color: #171717;
  2559.             color: #fff;
  2560.             border: none;
  2561.             padding: 5px 15px;
  2562.             border-radius: 15px;
  2563.         }
  2564.         .vr {
  2565.             width: 2px;
  2566.             height: 250px;
  2567.             background-color: #fafafa;
  2568.         }
  2569.         .vr2 {
  2570.             width: 1px;
  2571.             height: 26px;
  2572.             background-color: #202020;
  2573.         }
  2574.  
  2575. 		.home-card-row {
  2576. 			display: flex;
  2577. 			flex-wrap: nowrap;
  2578. 			justify-content: space-between;
  2579. 			gap: 18px;
  2580. 		}
  2581.         .home-card-wrapper {
  2582.             display: flex;
  2583. 			flex: 1;
  2584.             flex-direction: column;
  2585.             gap: 5px;
  2586. 			width: 50%;
  2587.         }
  2588.         .home-card {
  2589.             display: flex;
  2590.             flex-direction: column;
  2591. 			justify-content: center;
  2592.             gap: 7px;
  2593.             border-radius: 5px;
  2594.             background: #050505;
  2595.             min-height: 164px;
  2596. 			max-height: 164px;
  2597. 			max-width: 256px;
  2598.             padding: 5px 10px;
  2599.         }
  2600. 		.quickAccess {
  2601. 			gap: 5px;
  2602. 			max-height: 164px;
  2603.             overflow-y: auto;
  2604. 			justify-content: start;
  2605.         }
  2606.  
  2607.         .quickAccess div.modRowItems {
  2608.             padding: 2px!important;
  2609.         }
  2610.  
  2611. 		#my-profile-badges {
  2612. 			display: flex;
  2613. 			flex-wrap: wrap;
  2614. 			gap: 5px;
  2615. 		}
  2616.         #my-profile-bio {
  2617.             overflow-y: scroll;
  2618.             max-height: 75px;
  2619.         }
  2620.  
  2621.         .brand_wrapper {
  2622.             position: relative;
  2623.             height: 72px;
  2624.             width: 100%;
  2625.             display: flex;
  2626.             justify-content: center;
  2627.             align-items: center;
  2628.         }
  2629. 		.brand_wrapper span {
  2630. 			font-size: 24px;
  2631. 			z-index: 2;
  2632. 			font-family: "Titillium Web", sans-serif;
  2633. 			font-weight: 600;
  2634. 			letter-spacing: 3px;
  2635. 		}
  2636.  
  2637.         .brand_img {
  2638.             position: absolute;
  2639.             top: 0;
  2640.             left: 0;
  2641.             width: 100%;
  2642.             height: 72px;
  2643.             border-radius: 10px;
  2644.             object-fit: cover;
  2645.             object-position: center;
  2646.             z-index: 1;
  2647.             box-shadow: 0 0 10px #000;
  2648.         }
  2649. 		.brand_credits {
  2650. 			position: relative;
  2651. 			font-size: 16px;
  2652. 			color: #D3A7FF;
  2653. 			list-style: none;
  2654. 			width: 100%;
  2655. 			display: flex;
  2656. 			justify-content: space-between;
  2657. 			padding: 0 24px;
  2658. 		}
  2659.  
  2660. 		.brand_credits li {
  2661. 			position: relative;
  2662. 			display: inline-block;
  2663. 			text-shadow: 0px 0px 8px #D3A7FF;
  2664. 		}
  2665.  
  2666. 		.brand_credits li:not(:last-child)::after {
  2667. 			content: '•';
  2668. 			position: absolute;
  2669. 			right: -20px;
  2670. 			color: #D3A7FF;
  2671. 		}
  2672.         .brand_yt {
  2673.             display: flex;
  2674.             justify-content: center;
  2675.             align-items: center;
  2676.             gap: 20px;
  2677.         }
  2678.         .yt_wrapper {
  2679.             display: flex;
  2680.             justify-content: center;
  2681.             align-items: center;
  2682.             gap: 10px;
  2683.             width: 122px;
  2684.             padding: 5px;
  2685.             background-color: #B63333;
  2686.             border-radius: 15px;
  2687.             cursor: pointer;
  2688.         }
  2689.         .yt_wrapper span {
  2690.             user-select: none;
  2691.         }
  2692.  
  2693.         .hidden_full {
  2694.             display: none !important;
  2695.             visibility: hidden;
  2696.         }
  2697.  
  2698.         .mod_overlay {
  2699.             position: absolute;
  2700.             top: 0;
  2701.             left: 0;
  2702.             width: 100%;
  2703.             height: 100vh;
  2704.             background: rgba(0, 0, 0, .7);
  2705.             z-index: 9999999;
  2706.             display: flex;
  2707.             justify-content: center;
  2708.             align-items: center;
  2709.             transition: all .3s ease;
  2710.         }
  2711.  
  2712. 		.black_overlay {
  2713. 			background: rgba(0, 0, 0, 0);
  2714. 			z-index: 99999999;
  2715. 			opacity: 1;
  2716. 			animation: 2s ease fadeInBlack forwards;
  2717. 		}
  2718.  
  2719. 		@keyframes fadeInBlack {
  2720. 			0% {
  2721. 				background: rgba(0, 0, 0, 0);
  2722. 			}
  2723. 			100% {
  2724. 				background: rgba(0, 0, 0, 1);
  2725. 			}
  2726. 		}
  2727.  
  2728. 		.default-modal {
  2729.             position: relative;
  2730.             display: flex;
  2731.             flex-direction: column;
  2732. 			min-width: 300px;
  2733.             background: #111;
  2734. 			color: #fafafa;
  2735.             border-radius: 12px;
  2736.             overflow: hidden;
  2737.             box-shadow: 0 5px 10px #000;
  2738. 		}
  2739.  
  2740. 		.default-modal-header {
  2741. 			display: flex;
  2742. 			justify-content: space-between;
  2743. 			align-items: center;
  2744. 			background: #1c1c1c;
  2745. 			padding: 5px 10px;
  2746. 		}
  2747.  
  2748. 		.default-modal-header h2 {
  2749. 			margin: 0;
  2750. 		}
  2751.  
  2752. 		.default-modal-body {
  2753. 			display: flex;
  2754. 			flex-direction: column;
  2755. 			gap: 6px;
  2756. 			padding: 15px;
  2757. 		}
  2758.  
  2759.         .tournament-overlay-info {
  2760.             display: flex;
  2761.             flex-direction: column;
  2762.             align-items: center;
  2763.             color: white;
  2764.             font-size: 28px;
  2765.             line-height: 1.4;
  2766.         }
  2767.  
  2768.         .tournament-overlay-info img {
  2769.             margin-bottom: 26px;
  2770.         }
  2771.  
  2772.         .tournaments-wrapper {
  2773. 		    font-family: 'Titillium Web', sans-serif;
  2774. 			font-weight: 400;
  2775.             position: absolute;
  2776.             top: 60%;
  2777.             left: 50%;
  2778.             transform: translate(-50%, -50%);
  2779.             background: #000;
  2780.             border: 2px solid #222222;
  2781.             border-radius: 1.125rem;
  2782.             padding: 1.5rem;
  2783.             color: #fafafa;
  2784.             display: flex;
  2785.             flex-direction: column;
  2786.             align-items: center;
  2787.             gap: 10px;
  2788.             min-width: 632px;
  2789.             opacity: 0;
  2790.             transition: all .3s ease;
  2791.             animation: 0.5s ease fadeIn forwards;
  2792.         }
  2793.         @keyframes fadeIn {
  2794.             0% {
  2795.                 top: 60%;
  2796.                 opacity: 0;
  2797.             }
  2798.             100% {
  2799.                 top: 50%;
  2800.                 opacity: 1;
  2801.             }
  2802.         }
  2803.         .tournaments h1 {
  2804.             margin: 0;
  2805. 			font-weight: 600;
  2806.         }
  2807.  
  2808. 		.teamCards {
  2809. 			display: flex;
  2810. 			gap: 5px;
  2811. 			position: absolute;
  2812. 			top: 50%;
  2813. 			transform: translate(-50%, -50%);
  2814. 		}
  2815.         .teamCard {
  2816.             display: flex;
  2817.             flex-direction: column;
  2818.             align-items: center;
  2819. 			background: rgba(0, 0, 0, 0.4);
  2820. 			border-radius: 12px;
  2821. 			padding: 6px;
  2822. 			height: fit-content;
  2823.         }
  2824. 		.teamCard.userReady {
  2825. 			border: 2px solid var(--green);
  2826. 		}
  2827.         .teamCard img {
  2828.             border-radius: 50%;
  2829.         }
  2830. 		.teamCard span {
  2831. 			font-size: 12px;
  2832. 		}
  2833.  
  2834. 		.redTeam {
  2835. 			left: 81%;
  2836. 		}
  2837.  
  2838. 		.blueTeam {
  2839. 			left: 24%;
  2840. 		}
  2841.  
  2842. 		.lastOneStanding_list {
  2843. 			display: flex;
  2844. 			flex-wrap: wrap;
  2845. 			gap: 8px;
  2846. 			width: 100%;
  2847. 			height: 240px;
  2848. 			max-height: 240px;
  2849. 			background: #050505;
  2850. 		}
  2851.  
  2852.         .tournament_timer {
  2853. 			position: absolute;
  2854. 			top: 20px;
  2855. 			left: 50%;
  2856. 			transform: translateX(-50%);
  2857.             color: #fff;
  2858.             font-size: 15px;
  2859. 			z-index: 99999;
  2860. 			user-select: none;
  2861. 			pointer-events: none;
  2862.         }
  2863.  
  2864.         details {
  2865.           border: 1px solid #aaa;
  2866.           border-radius: 4px;
  2867.           padding: 0.5em 0.5em 0;
  2868.           user-select: none;
  2869.           text-align: start;
  2870.         }
  2871.  
  2872.         summary {
  2873.           font-weight: bold;
  2874.           margin: -0.5em -0.5em 0;
  2875.           padding: 0.5em;
  2876.         }
  2877.  
  2878.         details[open] {
  2879.           padding: 0.5em;
  2880.         }
  2881.  
  2882.         details[open] summary {
  2883.           border-bottom: 1px solid #aaa;
  2884.           margin-bottom: 0.5em;
  2885.         }
  2886.         button[disabled] {
  2887.             filter: grayscale(1);
  2888.         }
  2889.  
  2890. 		.tournament-text-lost,
  2891. 		.tournament-text-won {
  2892. 			font-size: 6rem;
  2893. 			font-weight: 600;
  2894. 			font-family: 'Titillium Web', sans-serif;
  2895. 		}
  2896.  
  2897. 		.tournament-text-lost {
  2898. 			color: var(--red);
  2899. 		}
  2900. 		.tournament-text-won {
  2901. 			color: var(--green);
  2902. 		}
  2903.  
  2904.         .tournament_alert {
  2905.             position: absolute;
  2906.             top: 20px;
  2907.             left: 50%;
  2908.             transform: translateX(-50%);
  2909.             background: #151515;
  2910.             color: #fff;
  2911.             text-align: center;
  2912.             padding: 20px;
  2913.             z-index: 999999;
  2914.             border-radius: 10px;
  2915.             box-shadow: 0 0 10px #000;
  2916.             display: flex;
  2917.             gap: 10px;
  2918.         }
  2919.         .tournament-profile {
  2920.             width: 50px;
  2921.             height: 50px;
  2922.             border-radius: 50%;
  2923.             box-shadow: 0 0 10px #000;
  2924.         }
  2925.  
  2926.         .tournament-text {
  2927.             color: #fff;
  2928.             font-size: 24px;
  2929.         }
  2930.  
  2931.         .claimedBadgeWrapper {
  2932.             background: linear-gradient(232deg, #020405 1%, #04181E 100%);
  2933.             border-radius: 10px;
  2934.             width: 320px;
  2935.             height: 330px;
  2936.             box-shadow: 0 0 40px -20px #39bdff;
  2937.             display: flex;
  2938.             flex-direction: column;
  2939.             gap: 10px;
  2940.             align-items: center;
  2941.             justify-content: center;
  2942.             color: #fff;
  2943.             padding: 10px;
  2944.         }
  2945.  
  2946.         .btn-cyan {
  2947.             background: #53B6CC;
  2948.             border: none;
  2949.             border-radius: 5px;
  2950.             font-size: 16px;
  2951.             color: #fff;
  2952.             font-weight: 500;
  2953.             width: fit-content;
  2954.             padding: 5px 10px;
  2955.         }
  2956.  
  2957.         .playTimer {
  2958.             z-index: 2;
  2959.             position: absolute;
  2960.             top: 128px;
  2961.             left: 4px;
  2962.             color: #8d8d8d;
  2963.             font-size: 14px;
  2964.             font-weight: 500;
  2965.             user-select: none;
  2966.             pointer-events: none;
  2967.         }
  2968.  
  2969.         .mouseTracker {
  2970.             z-index: 2;
  2971.             position: absolute;
  2972.             top: 144px;
  2973.             left: 4px;
  2974.             color: #8d8d8d;
  2975.             font-size: 14px;
  2976.             font-weight: 500;
  2977.             user-select: none;
  2978.             pointer-events: none;
  2979.         }
  2980.  
  2981.         .modInput-wrapper {
  2982.           position: relative;
  2983.           display: inline-block;
  2984.           width: 100%;
  2985.         }
  2986.  
  2987.         .modInput-secondary {
  2988.           display: inline-block;
  2989.           width: 100%;
  2990.           padding: 10px 0 10px 15px;
  2991.           font-weight: 400;
  2992.           color: #E9E9E9;
  2993.           background: #050505;
  2994.           border: 0;
  2995.           border-radius: 3px;
  2996.           outline: 0;
  2997.           text-indent: 70px;
  2998.           transition: all .3s ease-in-out;
  2999.         }
  3000.         .modInput-secondary.t-indent-120 {
  3001.             text-indent: 120px;
  3002.         }
  3003.         .modInput-secondary::-webkit-input-placeholder {
  3004.           color: #050505;
  3005.           text-indent: 0;
  3006.           font-weight: 300;
  3007.         }
  3008.         .modInput-secondary + label {
  3009.           display: inline-block;
  3010.           position: absolute;
  3011.           top: 8px;
  3012.           left: 0;
  3013.           bottom: 8px;
  3014.           padding: 5px 15px;
  3015.           color: #E9E9E9;
  3016.           font-size: 11px;
  3017.           font-weight: 700;
  3018.           text-transform: uppercase;
  3019.           text-shadow: 0 1px 0 rgba(19, 74, 70, 0);
  3020.           transition: all .3s ease-in-out;
  3021.           border-radius: 3px;
  3022.           background: rgba(122, 134, 184, 0);
  3023.         }
  3024.         .modInput-secondary + label:after {
  3025.           position: absolute;
  3026.           content: "";
  3027.           width: 0;
  3028.           height: 0;
  3029.           top: 100%;
  3030.           left: 50%;
  3031.           margin-left: -3px;
  3032.           border-left: 3px solid transparent;
  3033.           border-right: 3px solid transparent;
  3034.           border-top: 3px solid rgba(122, 134, 184, 0);
  3035.           transition: all .3s ease-in-out;
  3036.         }
  3037.  
  3038.         .modInput-secondary:focus,
  3039.         .modInput-secondary:active {
  3040.           color: #E9E9E9;
  3041.           text-indent: 0;
  3042.           background: #050505;
  3043.         }
  3044.         .modInput-secondary:focus::-webkit-input-placeholder,
  3045.         .modInput-secondary:active::-webkit-input-placeholder {
  3046.           color: #aaa;
  3047.         }
  3048.         .modInput-secondary:focus + label,
  3049.         .modInput-secondary:active + label {
  3050.           color: #fff;
  3051.           text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  3052.           background: #7A86B8;
  3053.           transform: translateY(-40px);
  3054.         }
  3055.         .modInput-secondary:focus + label:after,
  3056.         .modInput-secondary:active + label:after {
  3057.           border-top: 4px solid #7A86B8;
  3058.         }
  3059.  
  3060.         /* Friends & account */
  3061.  
  3062.         .signIn-overlay {
  3063.             position: absolute;
  3064.             top: 0;
  3065.             left: 0;
  3066.             width: 100%;
  3067.             height: 100vh;
  3068.             background: rgba(0, 0, 0, .4);
  3069.             z-index: 999999;
  3070.             display: flex;
  3071.             justify-content: center;
  3072.             align-items: center;
  3073.             color: #E3E3E3;
  3074.             opacity: 0;
  3075.             transition: all .3s ease;
  3076.         }
  3077.  
  3078.         .signIn-wrapper {
  3079.             background: #111111;
  3080.             width: 450px;
  3081.             display: flex;
  3082.             flex-direction: column;
  3083.             align-items: center;
  3084.             border-radius: 10px;
  3085.             color: #fafafa;
  3086.         }
  3087.  
  3088.         .signIn-header {
  3089.             background: #181818;
  3090.             width: 100%;
  3091.             display: flex;
  3092.             justify-content: space-between;
  3093.             align-items: center;
  3094.             padding: 8px;
  3095.             border-radius: 10px 10px 0 0;
  3096.         }
  3097.         .signIn-header span {
  3098.             font-weight: 500;
  3099.             font-size: 20px;
  3100.         }
  3101.  
  3102.         .signIn-body {
  3103.             display: flex;
  3104.             flex-direction: column;
  3105.             gap: 10px;
  3106.             align-items: center;
  3107.             justify-content: start;
  3108.             padding: 40px 40px 5px 40px;
  3109.             width: 100%;
  3110.         }
  3111.  
  3112.         #errMessages {
  3113.             color: #AC3D3D;
  3114.             flex-direction: column;
  3115.             gap: 5px;
  3116.         }
  3117.  
  3118.         .friends_header {
  3119.             display: flex;
  3120.             flex-direction: row;
  3121.             justify-content: space-between;
  3122.             align-items: center;
  3123.             gap: 10px;
  3124.             width: 100%;
  3125.             padding: 10px;
  3126.         }
  3127.  
  3128.         .friends_body {
  3129.             position: relative;
  3130.             display: flex;
  3131.             flex-direction: column;
  3132.             align-items: center;
  3133.             gap: 6px;
  3134.             width: 100%;
  3135.             height: 360px;
  3136.             max-height: 360px;
  3137.             overflow-y: auto;
  3138.             padding-right: 10px;
  3139.         }
  3140.         .allusers {
  3141.             padding: 0;
  3142.         }
  3143.  
  3144.         #users-container {
  3145.             position: relative;
  3146.             display: flex;
  3147.             flex-direction: column;
  3148.             align-items: center;
  3149.             gap: 6px;
  3150.             width: 100%;
  3151.             height: 340px;
  3152.             max-height: 340px;
  3153.             overflow-y: auto;
  3154.             padding-right: 10px;
  3155.         }
  3156.  
  3157.         .profile-img {
  3158.             position: relative;
  3159.             width: 52px;
  3160.             height: 52px;
  3161.             border-radius: 100%;
  3162.             border: 1px solid #C8C9D9;
  3163.         }
  3164.  
  3165.         .profile-img img {
  3166.             width: 100%;
  3167.             height: 100%;
  3168.             border-radius: 100%;
  3169.         }
  3170.  
  3171.         .status_icon {
  3172.             position: absolute;
  3173.             width: 15px;
  3174.             height: 15px;
  3175.             top: 0;
  3176.             left: 0;
  3177.             border-radius: 50%;
  3178.         }
  3179.  
  3180.         .online_icon {
  3181.             background-color: #3DB239;
  3182.         }
  3183.         .offline_icon {
  3184.             background-color: #B23939;
  3185.         }
  3186.         .Owner_role {
  3187.             color: #3979B2;
  3188.         }
  3189.         .Moderator_role {
  3190.             color: #39B298;
  3191.         }
  3192.         .Vip_role {
  3193.             color: #E1A33E;
  3194.         }
  3195.  
  3196.         .friends_row {
  3197.             display: flex;
  3198.             flex-direction: row;
  3199.             width: 100%;
  3200.             justify-content: space-between;
  3201.             align-items: center;
  3202.             background: #090909;
  3203.             border-radius: 8px;
  3204.             padding: 10px;
  3205.         }
  3206.  
  3207.         .friends_row .val {
  3208.             width: fit-content;
  3209.             height: fit-content;
  3210.             padding: 5px 20px;
  3211.             box-sizing: content-box;
  3212.         }
  3213.  
  3214.         .user-profile-wrapper {
  3215.             cursor: pointer;
  3216.         }
  3217.         .user-profile-wrapper > .centerY.g-5 {
  3218.             pointer-events: none;
  3219.             user-select: none;
  3220.             cursor: pointer;
  3221.         }
  3222.  
  3223.         .textarea-container {
  3224.             position: relative;
  3225.             width: 100%;
  3226.         }
  3227.         .textarea-container textarea {
  3228.             width: 100%;
  3229.             height: 120px;
  3230.             resize: none;
  3231.         }
  3232.         .char-counter {
  3233.             position: absolute;
  3234.             bottom: 5px;
  3235.             right: 5px;
  3236.             color: gray;
  3237.         }
  3238.  
  3239.         .mod_badges {
  3240.             display: flex;
  3241.             flex-wrap: wrap;
  3242.             gap: 5px;
  3243.         }
  3244.  
  3245.         .mod_badge {
  3246.             width: fit-content;
  3247.             background: #222;
  3248.             color: #fafafa;
  3249.             padding: 2px 7px;
  3250.             border-radius: 9px;
  3251.         }
  3252.  
  3253.         .friends-chat-wrapper {
  3254.             position: absolute;
  3255.             top: 0;
  3256.             left: 0;
  3257.             width: 100%;
  3258.             height: 100%;
  3259.             background: #111111;
  3260.             display: flex;
  3261.             flex-direction: column;
  3262.             z-index: 999;
  3263.             opacity: 0;
  3264.             transition: all .3s ease;
  3265.         }
  3266.  
  3267.         .friends-chat-header {
  3268.             display: flex;
  3269.             justify-content: space-between;
  3270.             align-items: center;
  3271.             background: #050505;
  3272.             width: 100%;
  3273.             padding: 8px;
  3274.             height: 68px;
  3275.         }
  3276.  
  3277.         .friends-chat-body {
  3278.             height: calc(100% - 68px);
  3279.             display: flex;
  3280.             flex-direction: column;
  3281.         }
  3282.  
  3283.         .friends-chat-messages {
  3284.             height: 300px;
  3285.             overflow-y: auto;
  3286.             display: flex;
  3287.             flex-direction: column;
  3288.             gap: 5px;
  3289.             padding: 10px;
  3290.         }
  3291.         .friends-message {
  3292.             background: linear-gradient(180deg, rgb(12 12 12), #000);
  3293.             padding: 8px;
  3294.             border-radius: 12px;
  3295.             display: flex;
  3296.             flex-direction: column;
  3297. 			min-width: 80px;
  3298.             max-width: 200px;
  3299.             width: fit-content;
  3300.         }
  3301.  
  3302.         .message-date {
  3303.             color: #8a8989;
  3304.             font-size: 11px;
  3305.         }
  3306.  
  3307.         .message-right {
  3308.             align-self: flex-end;
  3309.         }
  3310.  
  3311.         .messenger-wrapper {
  3312.             width: 100%;
  3313.             height: 60px;
  3314.             padding: 10px;
  3315.         }
  3316.         .messenger-wrapper .container {
  3317.             display: flex;
  3318.             flex-direction: row;
  3319.             gap: 10px;
  3320.             width: 100%;
  3321.             background: #0a0a0a;
  3322.             padding: 10px 5px;
  3323.             border-radius: 10px;
  3324.         }
  3325.  
  3326.         .messenger-wrapper .container input {
  3327.             padding: 5px;
  3328.         }
  3329.         .messenger-wrapper .container button {
  3330.             width: 150px;
  3331.         }
  3332.  
  3333.         /* deathscreen challenges */
  3334.  
  3335.         #menu-wrapper {
  3336.             overflow-x: visible;
  3337.             overflow-y: visible;
  3338.         }
  3339.  
  3340.         .challenges_deathscreen {
  3341.             width: 450px;
  3342.             background: rgb(21, 21, 21);
  3343.             display: flex;
  3344.             flex-direction: column;
  3345.             gap: 8px;
  3346.             padding: 7px;
  3347.             border-radius: 10px;
  3348.             margin-bottom: 15px;
  3349.         }
  3350.  
  3351.         .challenges-col {
  3352.             display: flex;
  3353.             flex-direction: column;
  3354.             gap: 4px;
  3355.             align-items: center;
  3356.             width: 100%;
  3357.         }
  3358.         .challenge-row {
  3359.             display: flex;
  3360.             align-items: center;
  3361.             background: rgba(0, 0, 0, .4);
  3362.             justify-content: space-between;
  3363.             padding: 5px 10px;
  3364.             border-radius: 4px;
  3365.             width: 100%;
  3366.         }
  3367.  
  3368.         .challenges-title {
  3369.             font-size: 16px;
  3370.             font-weight: 600;
  3371.         }
  3372.  
  3373.         .challenge-best-secondary {
  3374.             background: #1d1d1d;
  3375.             border-radius: 10px;
  3376.             text-align: center;
  3377.             padding: 5px 8px;
  3378.             min-width: 130px;
  3379.         }
  3380.         .challenge-collect-secondary {
  3381.             background: #4C864B;
  3382.             border-radius: 10px;
  3383.             text-align: center;
  3384.             padding: 5px 8px;
  3385.             outline: none;
  3386.             border: none;
  3387.             min-width: 130px;
  3388.         }
  3389.  
  3390.         .alwan__reference {
  3391.             border-width: 2px !important;
  3392.         }
  3393.  
  3394. 		#mod-announcements {
  3395. 			display: flex;
  3396. 			flex-direction: column;
  3397. 			gap: 6px;
  3398. 			max-height: 144px;
  3399. 			overflow-y: auto;
  3400. 		}
  3401.  
  3402. 		.mod-announcement {
  3403. 			background: #111111;
  3404. 			border-radius: 4px;
  3405. 			display: flex;
  3406. 			gap: 3px;
  3407. 			width: 100%;
  3408. 			cursor: pointer;
  3409. 			padding: 5px 8px;
  3410. 		}
  3411.  
  3412. 		.mod-announcement-icon {
  3413. 			border-radius: 50%;
  3414. 			width: 35px;
  3415. 			height: 35px;
  3416. 			align-self: center;
  3417. 		}
  3418.  
  3419. 		.mod-announcement-text {
  3420. 			display: flex;
  3421. 			flex-direction: column;
  3422. 			gap: 3px;
  3423. 			overflow: hidden;
  3424. 			flex-grow: 1;
  3425. 		}
  3426.  
  3427. 		.mod-announcement-text > * {
  3428. 			overflow: hidden;
  3429. 			white-space: nowrap;
  3430. 			text-overflow: ellipsis;
  3431. 		}
  3432.  
  3433. 		.mod-announcement-text span {
  3434. 			font-size: 14px;
  3435. 			color: #ffffff;
  3436. 			flex-shrink: 0;
  3437. 		}
  3438.  
  3439. 		.mod-announcement-text p {
  3440. 			font-size: 10px;
  3441. 			color: #898989;
  3442. 			flex-shrink: 0;
  3443. 			margin: 0;
  3444. 		}
  3445.  
  3446. 		.mod-announcements-wrapper {
  3447. 			display: flex;
  3448. 			flex-direction: column;
  3449. 			gap: 10px;
  3450. 		}
  3451.  
  3452. 		.mod-announcement-content {
  3453. 			display: flex;
  3454. 			justify-content: space-between;
  3455. 			gap: 10px;
  3456. 			background-color: #050505;
  3457. 			padding: 10px;
  3458. 			border-radius: 10px;
  3459. 			background-image: url('https://czrsd.com/static/general/bg_blur.png');
  3460. 			background-repeat: no-repeat;
  3461. 			background-position: 300px 40%;
  3462. 			background-size: cover;
  3463. 		}
  3464.  
  3465. 		.mod-announcement-content p {
  3466. 			text-align: justify;
  3467. 			max-height: 330px;
  3468. 			overflow-y: auto;
  3469. 			padding-right: 10px;
  3470. 		}
  3471.  
  3472. 		.mod-announcement-images {
  3473. 			display: flex;
  3474. 			flex-direction: column;
  3475. 			gap: 20px;
  3476. 			min-width: 30%;
  3477. 			width: 30%;
  3478. 			max-height: 330px;
  3479. 			padding-right: 10px;
  3480. 			overflow-y: auto;
  3481. 		}
  3482.  
  3483. 		.mod-announcement-images img {
  3484. 			border-radius: 5px;
  3485. 			cursor: pointer;
  3486. 		}
  3487.  
  3488. 		#image-gallery {
  3489. 			display: flex;
  3490. 			flex-wrap: wrap;
  3491. 			gap: 5px;
  3492. 		}
  3493.  
  3494. 		.image-container {
  3495. 			display: flex;
  3496. 			flex-direction: column;
  3497. 		}
  3498.  
  3499. 		.image-container img {
  3500. 			width: 172px;
  3501. 			height: auto;
  3502. 			aspect-ratio: 16 / 9;
  3503. 			border-radius: 5px;
  3504. 			cursor: pointer;
  3505. 		}
  3506.  
  3507. 		.download_btn {
  3508. 			background: url('https://czrsd.com/static/sigmod/icons/download.svg');
  3509.  
  3510. 		}
  3511.  
  3512. 		.delete_btn {
  3513. 			background: url('https://czrsd.com/static/sigmod/icons/trash-bin.svg');
  3514. 		}
  3515.  
  3516. 		.operation_btn {
  3517. 			background-size: contain;
  3518. 			background-repeat: no-repeat;
  3519. 			border: none;
  3520. 			width: 22px;
  3521. 			height: 22px;
  3522. 		}
  3523.  
  3524. 		.sigmod-community {
  3525. 			display: flex;
  3526. 			flex-direction: column;
  3527. 			margin: auto;
  3528. 			border-radius: 10px;
  3529. 			width: 50%;
  3530. 			align-self: center;
  3531. 			font-size: 19px;
  3532. 			overflow: hidden;
  3533. 		}
  3534.  
  3535. 		.community-header {
  3536. 			background: linear-gradient(179deg, #000000, #0c0c0c);
  3537. 			text-align: center;
  3538. 			font-family: "Titillium Web", sans-serif;
  3539. 			padding: 6px;
  3540. 		}
  3541.  
  3542. 		.community-discord-logo {
  3543. 			background: rgb(88, 101, 242);
  3544. 			padding: 5px 12px;
  3545. 		}
  3546. 		.community-discord {
  3547. 			text-align: center;
  3548. 			padding: 10px;
  3549. 			background: #0c0c0c;
  3550. 			width: 100%;
  3551. 		}
  3552. 		.community-discord a {
  3553. 			font-family: "Titillium Web", sans-serif;
  3554. 		}
  3555.  
  3556. 		/* common */
  3557.         .flex {
  3558.              display: flex;
  3559.         }
  3560.         .centerX {
  3561.              display: flex;
  3562.              justify-content: center;
  3563.         }
  3564.         .centerY {
  3565.              display: flex;
  3566.              align-items: center;
  3567.         }
  3568.         .centerXY {
  3569.              display: flex;
  3570.              align-items: center;
  3571.              justify-content: center
  3572.         }
  3573.         .f-column {
  3574.              display: flex;
  3575.              flex-direction: column;
  3576.         }
  3577. 		mx-5 {
  3578. 			margin: 0 5px;
  3579. 		}
  3580.         .my-5 {
  3581.             margin: 5px 0;
  3582.         }
  3583. 		.mt-auto {
  3584. 			margin-top: auto !important;
  3585. 		}
  3586.         .g-2 {
  3587.             gap: 2px;
  3588.         }
  3589.         .g-5 {
  3590.             gap: 5px;
  3591.         }
  3592.         .g-10 {
  3593.             gap: 10px;
  3594.         }
  3595.         .p-2 {
  3596.             padding: 2px;
  3597.         }
  3598.         .p-5 {
  3599.             padding: 5px;
  3600.         }
  3601.         .p-10 {
  3602.             padding: 10px;
  3603.         }
  3604.         .rounded {
  3605.             border-radius: 6px;
  3606.         }
  3607.         .text-center {
  3608.             text-align: center;
  3609.         }
  3610.         .f-big {
  3611.             font-size: 18px;
  3612.         }
  3613.         .hidden {
  3614.              display: none;
  3615.         }
  3616.             `;
  3617.         },
  3618.         respawnTime: Date.now(),
  3619.         respawnCooldown: 1000,
  3620.         get friends_settings() {
  3621.             return this._friends_settings;
  3622.         },
  3623.         set friends_settings(value) {
  3624.             this._friends_settings = value;
  3625.             window.sigmod.friends_settings = value;
  3626.         },
  3627.         get friend_names() {
  3628.             return this._friend_names;
  3629.         },
  3630.  
  3631.         set friend_names(value) {
  3632.             this._friend_names = value;
  3633.             window.sigmod.friend_names = value;
  3634.         },
  3635.  
  3636.         async game() {
  3637.             const { fillRect, fillText, strokeText, arc, drawImage } =
  3638.                   CanvasRenderingContext2D.prototype;
  3639.  
  3640.             const showPosition = byId('showPosition');
  3641.             if (showPosition && !showPosition.checked) showPosition.click();
  3642.  
  3643.             const loadStorage = () => {
  3644.                 if (modSettings.virusImage) {
  3645.                     loadVirusImage(modSettings.virusImage);
  3646.                 }
  3647.  
  3648.                 if (modSettings.game.skins.original !== null) {
  3649.                     loadSkinImage(
  3650.                         modSettings.game.skins.original,
  3651.                         modSettings.game.skins.replacement
  3652.                     );
  3653.                 }
  3654.             };
  3655.  
  3656.             loadStorage();
  3657.  
  3658.             let cachedPattern = null;
  3659.             let patternCanvas = null;
  3660.             let isUpdatingPattern = false;
  3661.  
  3662.             function updatePattern(ctx) {
  3663.                 isUpdatingPattern = true;
  3664.                 loadPattern(ctx)
  3665.                     .then((pattern) => {
  3666.                     if (mods.mapImageLoaded) {
  3667.                         cachedPattern = pattern;
  3668.                         ctx.fillStyle = cachedPattern;
  3669.                         ctx.fillRect(
  3670.                             0,
  3671.                             0,
  3672.                             ctx.canvas.width,
  3673.                             ctx.canvas.height
  3674.                         );
  3675.                     } else {
  3676.                         clearPattern(ctx);
  3677.                     }
  3678.                     isUpdatingPattern = false;
  3679.                 })
  3680.                     .catch((e) => {
  3681.                     console.error('Error loading map image:', e);
  3682.                     clearPattern(ctx);
  3683.                     isUpdatingPattern = false;
  3684.                 });
  3685.             }
  3686.  
  3687.             function loadPattern(ctx) {
  3688.                 return new Promise((resolve, reject) => {
  3689.                     const img = new Image();
  3690.                     img.src = modSettings.game.map.image;
  3691.                     img.crossOrigin = 'Anonymous';
  3692.  
  3693.                     img.onload = () => {
  3694.                         if (!patternCanvas) {
  3695.                             patternCanvas = document.createElement('canvas');
  3696.                         }
  3697.                         patternCanvas.width = img.width;
  3698.                         patternCanvas.height = img.height;
  3699.                         const patternCtx = patternCanvas.getContext('2d');
  3700.                         patternCtx.drawImage(img, 0, 0);
  3701.  
  3702.                         const imageData = patternCtx.getImageData(
  3703.                             0,
  3704.                             0,
  3705.                             patternCanvas.width,
  3706.                             patternCanvas.height
  3707.                         );
  3708.                         const data = imageData.data;
  3709.                         mods.mapImageLoaded = !Array.from(data).some(
  3710.                             (_, i) => i % 4 === 3 && data[i] < 255
  3711.                         );
  3712.  
  3713.                         if (mods.mapImageLoaded) {
  3714.                             resolve(
  3715.                                 ctx.createPattern(patternCanvas, 'no-repeat')
  3716.                             );
  3717.                         } else {
  3718.                             resolve(null);
  3719.                         }
  3720.                     };
  3721.  
  3722.                     img.onerror = () =>
  3723.                     reject(new Error('Failed to load image.'));
  3724.                 });
  3725.             }
  3726.  
  3727.             function clearPattern(ctx) {
  3728.                 isUpdatingPattern = true;
  3729.                 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  3730.                 ctx.fillStyle = modSettings.game.map.color || '#111111';
  3731.                 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  3732.                 isUpdatingPattern = false;
  3733.             }
  3734.  
  3735.             window.addEventListener('resize', () => {
  3736.                 const canvas = document.getElementById('canvas');
  3737.                 if (canvas && modSettings.game.map.image) {
  3738.                     updatePattern(canvas.getContext('2d'));
  3739.                 }
  3740.             });
  3741.  
  3742.             /* CanvasRenderingContext2D.prototype */
  3743.  
  3744.             CanvasRenderingContext2D.prototype.fillRect = function (
  3745.             x,
  3746.              y,
  3747.              width,
  3748.              height
  3749.             ) {
  3750.                 if (this.canvas.id !== 'canvas')
  3751.                     return fillRect.apply(this, arguments);
  3752.  
  3753.                 const isCanvasSize =
  3754.                       (width + height) / 2 ===
  3755.                       (window.innerWidth + window.innerHeight) / 2;
  3756.  
  3757.                 if (isCanvasSize) {
  3758.                     if (modSettings.game.map.image && !mods.mapImageLoaded) {
  3759.                         mods.mapImageLoaded = true;
  3760.                         updatePattern(this);
  3761.                     } else if (
  3762.                         !modSettings.game.map.image ||
  3763.                         !mods.mapImageLoaded
  3764.                     ) {
  3765.                         if (!isUpdatingPattern) {
  3766.                             clearPattern(this);
  3767.                         }
  3768.                     } else {
  3769.                         this.fillStyle =
  3770.                             cachedPattern ||
  3771.                             modSettings.game.map.color ||
  3772.                             '#111111';
  3773.                     }
  3774.                 }
  3775.  
  3776.                 fillRect.apply(this, arguments);
  3777.             };
  3778.  
  3779.             CanvasRenderingContext2D.prototype.arc = function (
  3780.             x,
  3781.              y,
  3782.              radius,
  3783.              startAngle,
  3784.              endAngle,
  3785.              anticlockwise
  3786.             ) {
  3787.                 if (this.canvas.id !== 'canvas') return arc.apply(this, arguments);
  3788.  
  3789.                 if (radius >= 86 && modSettings.game.cellColor) {
  3790.                     this.fillStyle = modSettings.game.cellColor;
  3791.                 } else if (
  3792.                     radius <= 20 &&
  3793.                     modSettings.game.foodColor !== null
  3794.                 ) {
  3795.                     this.fillStyle = modSettings.game.foodColor;
  3796.                     this.strokeStyle = modSettings.game.foodColor;
  3797.                 }
  3798.  
  3799.                 arc.apply(this, arguments);
  3800.             };
  3801.  
  3802.             CanvasRenderingContext2D.prototype.fillText = function (
  3803.             text,
  3804.              x,
  3805.              y
  3806.             ) {
  3807.                 if (this.canvas.id !== 'canvas') return fillText.apply(this, arguments);
  3808.  
  3809.                 const currentFontSizeMatch = this.font.match(/^(\d+)px/);
  3810.                 const fontSize = currentFontSizeMatch
  3811.                 ? currentFontSizeMatch[0]
  3812.                 : '';
  3813.  
  3814.                 this.font = `${fontSize} ${modSettings.game.font || 'Ubuntu'}`;
  3815.  
  3816.                 if (
  3817.                     text === mods.nick &&
  3818.                     !modSettings.game.name.gradient.enabled &&
  3819.                     modSettings.game.name.color !== null
  3820.                 ) {
  3821.                     this.fillStyle = modSettings.game.name.color;
  3822.                 }
  3823.  
  3824.                 if (
  3825.                     text === mods.nick &&
  3826.                     modSettings.game.name.gradient.enabled
  3827.                 ) {
  3828.                     const width = this.measureText(text).width;
  3829.                     const fontSize = 8;
  3830.                     const gradient = this.createLinearGradient(
  3831.                         x - width / 2 + fontSize / 2,
  3832.                         y,
  3833.                         x + width / 2 - fontSize / 2,
  3834.                         y + fontSize
  3835.                     );
  3836.  
  3837.                     const color1 =
  3838.                           modSettings.game.name.gradient.left ?? '#ffffff';
  3839.                     const color2 =
  3840.                           modSettings.game.name.gradient.right ?? '#ffffff';
  3841.  
  3842.                     gradient.addColorStop(0, color1);
  3843.                     gradient.addColorStop(1, color2);
  3844.  
  3845.                     this.fillStyle = gradient;
  3846.                 }
  3847.  
  3848.                 if (!window.sigifx && text.startsWith('Score')) {
  3849.                     if (Date.now() - lastGetScore >= 250) {
  3850.                         const score = parseInt(text.split(': ')[1]);
  3851.  
  3852.                         mods.cellSize = score;
  3853.  
  3854.                         mods.aboveRespawnLimit = score >= 5500;
  3855.  
  3856.                         lastGetScore = Date.now();
  3857.                     }
  3858.                 }
  3859.  
  3860.                 if (!window.sigfix && text.startsWith('X:')) {
  3861.                     this.fillStyle = 'transparent';
  3862.  
  3863.                     const [, xValue, yValue] =
  3864.                           /X: (.*), Y: (.*)/.exec(text) || [];
  3865.                     if (!xValue) return;
  3866.  
  3867.                     const position = {
  3868.                         x: parseFloat(xValue),
  3869.                         y: parseFloat(yValue),
  3870.                     };
  3871.  
  3872.                     if (menuClosed() && !isDead()) {
  3873.                         if (position.x === 0 && position.y === 0) return;
  3874.  
  3875.                         playerPosition.x = position.x;
  3876.                         playerPosition.y = position.y;
  3877.  
  3878.                         // send position every 300 milliseconds
  3879.                         if (Date.now() - lastPosTime >= 300) {
  3880.                             if (modSettings.settings.tag && client?.ws?.readyState === 1) {
  3881.                                 client.send({
  3882.                                     type: 'position',
  3883.                                     content: {
  3884.                                         x: playerPosition.x,
  3885.                                         y: playerPosition.y,
  3886.                                     },
  3887.                                 });
  3888.                             }
  3889.                             lastPosTime = Date.now();
  3890.                         }
  3891.                     } else if (isDead() && !dead2) {
  3892.                         dead2 = true;
  3893.                         playerPosition.x = null;
  3894.                         playerPosition.y = null;
  3895.                         if (modSettings.settings.tag && client?.ws?.readyState === 1) {
  3896.                             client.send({
  3897.                                 type: 'position',
  3898.                                 content: { x: null, y: null },
  3899.                             });
  3900.                         }
  3901.                     }
  3902.                 }
  3903.  
  3904.                 if (modSettings.game.removeOutlines) {
  3905.                     this.shadowBlur = 0;
  3906.                     this.shadowColor = 'transparent';
  3907.                 }
  3908.  
  3909.                 if (text.length > 18 && modSettings.game.shortenNames) {
  3910.                     arguments[0] = text.slice(0, 18) + '...';
  3911.                 }
  3912.  
  3913.                 // only for leaderboard
  3914.                 const name = text.match(/\d+\.\s*(.+)/)?.[1];
  3915.  
  3916.                 if (
  3917.                     name &&
  3918.                     mods.friend_names.has(name) &&
  3919.                     mods.friends_settings.highlight_friends
  3920.                 ) {
  3921.                     this.fillStyle = mods.friends_settings.highlight_color;
  3922.                 }
  3923.  
  3924.                 fillText.apply(this, arguments);
  3925.             };
  3926.  
  3927.             CanvasRenderingContext2D.prototype.strokeText = function (
  3928.             text,
  3929.              x,
  3930.              y
  3931.             ) {
  3932.                 if (this.canvas.id !== 'canvas') return strokeText.apply(this, arguments);
  3933.  
  3934.                 const currentFontSizeMatch = this.font.match(/^(\d+)px/);
  3935.                 const fontSize = currentFontSizeMatch
  3936.                 ? currentFontSizeMatch[0]
  3937.                 : '';
  3938.  
  3939.                 this.font = `${fontSize} ${modSettings.game.font || 'Ubuntu'}`;
  3940.  
  3941.                 if (text.length > 18 && modSettings.game.shortenNames) {
  3942.                     arguments[0] = text.slice(0, 18) + '...';
  3943.                 }
  3944.  
  3945.                 if (modSettings.game.removeOutlines) {
  3946.                     this.shadowBlur = 0;
  3947.                     this.shadowColor = 'transparent';
  3948.                 } else {
  3949.                     this.shadowBlur = 7;
  3950.                     this.shadowColor = '#000';
  3951.                 }
  3952.  
  3953.                 strokeText.apply(this, arguments);
  3954.             };
  3955.  
  3956.             CanvasRenderingContext2D.prototype.drawImage = function (
  3957.             image,
  3958.              ...args
  3959.             ) {
  3960.                 if (this.canvas.id !== 'canvas')
  3961.                     return drawImage.call(this, image, ...args);
  3962.  
  3963.                 if (
  3964.                     image.src &&
  3965.                     (image.src.endsWith('2.png') ||
  3966.                      image.src.endsWith('2-min.png')) &&
  3967.                     modSettings.game.virusImage
  3968.                 ) {
  3969.                     if (mods.virusImageLoaded) {
  3970.                         return drawImage.call(this, mods.virusImage, ...args);
  3971.                     } else {
  3972.                         loadVirusImage(modSettings.game.virusImage).then(() => {
  3973.                             drawImage.call(this, mods.virusImage, ...args);
  3974.                         });
  3975.                         return;
  3976.                     }
  3977.                 }
  3978.  
  3979.                 if (
  3980.                     image instanceof HTMLImageElement &&
  3981.                     modSettings.game.skins.original &&
  3982.                     image.src.includes(`${modSettings.game.skins.original}.png`)
  3983.                 ) {
  3984.                     if (mods.skinImageLoaded) {
  3985.                         return drawImage.call(this, mods.skinImage, ...args);
  3986.                     } else {
  3987.                         loadSkinImage(
  3988.                             modSettings.game.skins.original,
  3989.                             modSettings.game.skins.replacement
  3990.                         ).then(() => {
  3991.                             drawImage.call(this, mods.skinImage, ...args);
  3992.                         });
  3993.                         return;
  3994.                     }
  3995.                 }
  3996.  
  3997.                 drawImage.call(this, image, ...args);
  3998.             };
  3999.  
  4000.             function loadVirusImage(imgSrc) {
  4001.                 return new Promise((resolve, reject) => {
  4002.                     const replacementVirus = new Image();
  4003.                     replacementVirus.src = imgSrc;
  4004.                     replacementVirus.crossOrigin = 'Anonymous';
  4005.  
  4006.                     replacementVirus.onload = () => {
  4007.                         mods.virusImage = replacementVirus;
  4008.                         mods.virusImageLoaded = true;
  4009.                         resolve();
  4010.                     };
  4011.  
  4012.                     replacementVirus.onerror = () => {
  4013.                         console.error('Failed to load virus image.');
  4014.                         reject(new Error('Failed to load virus image.'));
  4015.                     };
  4016.                 });
  4017.             }
  4018.  
  4019.             function loadSkinImage(originalSkinName, replacementImgSrc) {
  4020.                 return new Promise((resolve, reject) => {
  4021.                     const replacementSkin = new Image();
  4022.                     replacementSkin.src = replacementImgSrc;
  4023.                     replacementSkin.crossOrigin = 'Anonymous';
  4024.  
  4025.                     replacementSkin.onload = () => {
  4026.                         mods.skinImage = replacementSkin;
  4027.                         mods.skinImageLoaded = true;
  4028.                         resolve();
  4029.                     };
  4030.  
  4031.                     replacementSkin.onerror = () =>
  4032.                     reject(new Error('Failed to load skin image.'));
  4033.                 });
  4034.             }
  4035.  
  4036.             const modals = {
  4037.                 map: {
  4038.                     title: 'Map Image',
  4039.                     applyId: 'apply-map-image',
  4040.                     resetId: 'reset-map-image',
  4041.                     previewId: 'preview-mapImage',
  4042.                     modalId: 'map-modal',
  4043.                     storagePath: 'game.map.image',
  4044.                 },
  4045.                 virus: {
  4046.                     title: 'Virus Image',
  4047.                     applyId: 'apply-virus-image',
  4048.                     resetId: 'reset-virus-image',
  4049.                     previewId: 'preview-virusImage',
  4050.                     modalId: 'virus-modal',
  4051.                     storagePath: 'game.virusImage',
  4052.                 },
  4053.                 skin: {
  4054.                     title: 'Skin Replacement',
  4055.                     applyId: 'apply-skin-image',
  4056.                     resetId: 'reset-skin-image',
  4057.                     previewId: 'preview-skinImage',
  4058.                     modalId: 'skin-modal',
  4059.                     storagePath: [
  4060.                         'game.skins.original',
  4061.                         'game.skins.replacement',
  4062.                     ],
  4063.                     additional: true,
  4064.                 },
  4065.             };
  4066.  
  4067.             function createModal({
  4068.                 title,
  4069.                 applyId,
  4070.                 resetId,
  4071.                 previewId,
  4072.                 modalId,
  4073.                 additional,
  4074.             }) {
  4075.                 const additionalContent = additional
  4076.                 ? `
  4077. 					<span>Select a skin that should be replaced:</span>
  4078. 					<select class="form-control" id="skin-list"></select>
  4079. 					<span style="font-size: 12px;">Replacement image - Enter an image URL:</span>
  4080. 				`
  4081.                 : `
  4082. 					<span>Enter an image URL:</span>
  4083. 				`;
  4084.  
  4085.                 return `
  4086. 					<div class="default-modal">
  4087. 						<div class="default-modal-header">
  4088. 							<h2>${title}</h2>
  4089. 							<button class="btn closeBtn" id="closeCustomModal">
  4090. 								<svg width="22" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  4091. 									<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>
  4092. 								</svg>
  4093. 							</button>
  4094. 						</div>
  4095. 						<div class="default-modal-body">
  4096. 							${additionalContent}
  4097. 							<div class="centerXY g-10">
  4098. 								<input type="text" placeholder="https://i.imgur/..." class="form-control" id="image-url" />
  4099. 								<div class="imagePreview" id="${previewId}" title="Image Preview">
  4100. 									<span class="no-preview">No Preview Available</span>
  4101. 								</div>
  4102. 							</div>
  4103. 							<div class="centerXY g-10">
  4104. 								<button type="button" class="modButton-black" id="${applyId}">Apply Image</button>
  4105. 								<button type="button" class="resetButton" title="Reset ${title.toLowerCase()}" id="${resetId}"></button>
  4106. 							</div>
  4107. 						</div>
  4108. 					</div>
  4109. 				`;
  4110.             }
  4111.  
  4112.             function setupModalEvents(id, type) {
  4113.                 byId(id).addEventListener('click', async () => {
  4114.                     mods.customModal(
  4115.                         createModal(modals[type]),
  4116.                         modals[type].modalId
  4117.                     );
  4118.                     document
  4119.                         .querySelector('#closeCustomModal')
  4120.                         .addEventListener('click', () => closeModal(type));
  4121.  
  4122.                     const modal = modals[type];
  4123.                     const imageUrlInput = byId('image-url');
  4124.  
  4125.                     let initialUrl = '';
  4126.                     if (modal.additional && type === 'skin') {
  4127.                         const [originalPath, replacementPath] =
  4128.                               modal.storagePath;
  4129.                         initialUrl =
  4130.                             getNestedValue(modSettings, replacementPath) || '';
  4131.                         byId('skin-list').value =
  4132.                             getNestedValue(modSettings, originalPath) || '';
  4133.                     } else {
  4134.                         initialUrl =
  4135.                             getNestedValue(modSettings, modal.storagePath) ||
  4136.                             '';
  4137.                     }
  4138.                     imageUrlInput.value = initialUrl;
  4139.                     updatePreview(initialUrl);
  4140.  
  4141.                     imageUrlInput.addEventListener('input', (e) => {
  4142.                         updatePreview(e.target.value);
  4143.                     });
  4144.  
  4145.                     byId(modal.applyId).addEventListener('click', () =>
  4146.                                                          applyChanges(type)
  4147.                                                         );
  4148.                     byId(modal.resetId).addEventListener('click', () =>
  4149.                                                          resetChanges(type)
  4150.                                                         );
  4151.  
  4152.                     if (type === 'skin') {
  4153.                         const skinList = byId('skin-list');
  4154.                         const skins =
  4155.                               mods.skins.length > 0
  4156.                         ? mods.skins
  4157.                         : await fetch(
  4158.                             'https://one.sigmally.com/api/skins'
  4159.                         )
  4160.                         .then((response) => response.json())
  4161.                         .then((data) => {
  4162.                             const skinNames = data.data.map(
  4163.                                 (item) =>
  4164.                                 item.name.replace('.png', '')
  4165.                             );
  4166.                             mods.skins = skinNames;
  4167.                             return skinNames;
  4168.                         });
  4169.  
  4170.                         skinList.innerHTML = skins
  4171.                             .map(
  4172.                             (skin) =>
  4173.                             `<option value="${skin}" ${
  4174.                             skin === modSettings.game.skins.original
  4175.                             ? 'selected'
  4176.                             : ''
  4177.                             }>${skin}</option>`
  4178.                         )
  4179.                             .join('');
  4180.                     }
  4181.                 });
  4182.             }
  4183.  
  4184.             function getNestedValue(obj, path) {
  4185.                 return path
  4186.                     .split('.')
  4187.                     .reduce((acc, part) => acc && acc[part], obj);
  4188.             }
  4189.  
  4190.             function setNestedValue(obj, path, value) {
  4191.                 const parts = path.split('.');
  4192.                 const last = parts.pop();
  4193.                 const target = parts.reduce(
  4194.                     (acc, part) => (acc[part] = acc[part] || {}),
  4195.                     obj
  4196.                 );
  4197.                 target[last] = value;
  4198.             }
  4199.  
  4200.             function updatePreview(url) {
  4201.                 const preview = document.querySelector('.imagePreview');
  4202.                 const noPreviewSpan = document.querySelector('.no-preview');
  4203.  
  4204.                 const updateVisibility = (showPreview) => {
  4205.                     preview.style.backgroundImage = showPreview
  4206.                         ? `url(${url})`
  4207.                     : 'none';
  4208.                     noPreviewSpan.style.display = showPreview
  4209.                         ? 'none'
  4210.                     : 'block';
  4211.                 };
  4212.  
  4213.                 if (url) {
  4214.                     const img = new Image();
  4215.                     img.src = url;
  4216.                     img.onload = () => updateVisibility(true);
  4217.                     img.onerror = () => updateVisibility(false);
  4218.                 } else {
  4219.                     updateVisibility(false);
  4220.                 }
  4221.             }
  4222.  
  4223.             function applyChanges(type) {
  4224.                 let { title, storagePath, additional } = modals[type];
  4225.                 const url = byId('image-url').value;
  4226.  
  4227.                 mods[`${type}ImageLoaded`] = false;
  4228.  
  4229.                 if (additional && type === 'skin') {
  4230.                     const selectedSkin = byId('skin-list').value;
  4231.                     setNestedValue(modSettings, storagePath[0], selectedSkin);
  4232.                     setNestedValue(modSettings, storagePath[1], url);
  4233.                 } else {
  4234.                     setNestedValue(modSettings, storagePath, url);
  4235.                 }
  4236.  
  4237.                 updateStorage();
  4238.  
  4239.                 mods.modAlert(`Successfully applied ${title}.`, 'success');
  4240.             }
  4241.  
  4242.             function resetChanges(type) {
  4243.                 const { title, storagePath, additional } = modals[type];
  4244.  
  4245.                 if (additional && type === 'skin') {
  4246.                     setNestedValue(modSettings, storagePath[0], null);
  4247.                     setNestedValue(modSettings, storagePath[1], null);
  4248.                 } else {
  4249.                     setNestedValue(modSettings, storagePath, null);
  4250.                 }
  4251.  
  4252.                 mods[`${type}ImageLoaded`] = false;
  4253.  
  4254.                 updateStorage();
  4255.  
  4256.                 mods.modAlert(
  4257.                     `The ${title} has been successfully reset.`,
  4258.                     'success'
  4259.                 );
  4260.             }
  4261.  
  4262.             function closeModal(type) {
  4263.                 const overlay = byId(`${type}-modal`);
  4264.                 overlay.style.opacity = 0;
  4265.                 setTimeout(() => overlay.remove(), 300);
  4266.             }
  4267.  
  4268.             setupModalEvents('mapImageSelect', 'map');
  4269.             setupModalEvents('virusImageSelect', 'virus');
  4270.             setupModalEvents('skinReplaceSelect', 'skin');
  4271.  
  4272.             const shortenNames = byId('shortenNames');
  4273.             const removeOutlines = byId('removeOutlines');
  4274.  
  4275.             shortenNames.addEventListener('change', () => {
  4276.                 modSettings.game.shortenNames = shortenNames.checked;
  4277.                 updateStorage();
  4278.             });
  4279.             removeOutlines.addEventListener('change', () => {
  4280.                 modSettings.game.removeOutlines = removeOutlines.checked;
  4281.                 updateStorage();
  4282.             });
  4283.  
  4284.             const showNames = byId('mod-showNames');
  4285.             const showSkins = byId('mod-showSkins');
  4286.  
  4287.             const originalShowNames = byId('showNames');
  4288.             const originalShowSkins = byId('showSkins');
  4289.  
  4290.             function syncCheckboxes() {
  4291.                 if (showNames.checked !== originalShowNames.checked) {
  4292.                     originalShowNames.click();
  4293.                 }
  4294.                 if (showSkins.checked !== originalShowSkins.checked) {
  4295.                     originalShowSkins.click();
  4296.                 }
  4297.             }
  4298.  
  4299.             showNames.addEventListener('change', syncCheckboxes);
  4300.             showSkins.addEventListener('change', syncCheckboxes);
  4301.             syncCheckboxes();
  4302.  
  4303.             const deathScreenPos = byId('deathScreenPos');
  4304.             const deathScreen = byId('__line2');
  4305.  
  4306.             const applyMargin = (position) => {
  4307.                 switch (position) {
  4308.                     case 'left':
  4309.                         deathScreen.style.marginLeft = '0';
  4310.                         break;
  4311.                     case 'right':
  4312.                         deathScreen.style.marginRight = '0';
  4313.                         break;
  4314.                     case 'top':
  4315.                         deathScreen.style.marginTop = '20px';
  4316.                         break;
  4317.                     case 'bottom':
  4318.                         deathScreen.style.marginBottom = '20px';
  4319.                         break;
  4320.                     default:
  4321.                         deathScreen.style.margin = 'auto';
  4322.                 }
  4323.             };
  4324.  
  4325.             deathScreenPos.addEventListener('change', () => {
  4326.                 const selected = deathScreenPos.value;
  4327.                 applyMargin(selected);
  4328.                 modSettings.deathScreenPos = selected;
  4329.                 updateStorage();
  4330.             });
  4331.  
  4332.             const defaultPosition = modSettings.deathScreenPos || 'center';
  4333.  
  4334.             applyMargin(defaultPosition);
  4335.             deathScreenPos.value = defaultPosition;
  4336.         },
  4337.  
  4338.         customModal(children, id, zindex = '999999') {
  4339.             const overlay = document.createElement('div');
  4340.             overlay.classList.add('mod_overlay');
  4341.             id && overlay.setAttribute('id', id);
  4342.             overlay.innerHTML = children;
  4343.             overlay.style.zIndex = zindex;
  4344.             overlay.style.opacity = 0;
  4345.  
  4346.             document.body.append(overlay);
  4347.  
  4348.             setTimeout(() => {
  4349.                 overlay.style.opacity = '1';
  4350.             });
  4351.  
  4352.             const handleClickOutside = (e) => {
  4353.                 if (e.target === overlay) {
  4354.                     overlay.style.opacity = 0;
  4355.                     setTimeout(() => {
  4356.                         overlay.remove();
  4357.                         document.removeEventListener(
  4358.                             'click',
  4359.                             handleClickOutside
  4360.                         );
  4361.                     }, 300);
  4362.                 }
  4363.             };
  4364.  
  4365.             document.addEventListener('click', handleClickOutside);
  4366.         },
  4367.  
  4368.         handleGoogleAuth(user) {
  4369.             fetchedUser++;
  4370.             window.gameSettings.user = user;
  4371.  
  4372.             const chatSendInput = document.querySelector('#chatSendInput');
  4373.             if (chatSendInput) {
  4374.                 chatSendInput.placeholder = 'message...';
  4375.                 chatSendInput.disabled = false;
  4376.             }
  4377.  
  4378.             if (!client) client = new modClient();
  4379.  
  4380.             const waitForInit = () =>
  4381.             new Promise((res) => {
  4382.                 if (client.ws?.readyState === 1 && mods.nick)
  4383.                     return res(null);
  4384.                 const i = setInterval(
  4385.                     () =>
  4386.                     client.ws?.readyState === 1 &&
  4387.                     mods.nick &&
  4388.                     (clearInterval(i), res(null)),
  4389.                     50
  4390.                 );
  4391.             });
  4392.  
  4393.             waitForInit().then(() => {
  4394.                 client.send({
  4395.                     type: 'user',
  4396.                     content: { ...user, nick: mods.nick },
  4397.                 })
  4398.             });
  4399.  
  4400.             const claim = document.getElementById('free-chest-button');
  4401.             if (
  4402.                 fetchedUser === 1 &&
  4403.                 modSettings.settings.autoClaimCoins &&
  4404.                 claim?.style.display !== 'none'
  4405.             ) {
  4406.                 setTimeout(() => claim.click(), 500);
  4407.             }
  4408.         },
  4409.  
  4410.         async menu() {
  4411.             const mod_menu = document.createElement('div');
  4412.             mod_menu.classList.add('mod_menu');
  4413.             mod_menu.style.display = 'none';
  4414.             mod_menu.style.opacity = '0';
  4415.             mod_menu.innerHTML = `
  4416.                 <div class="mod_menu_wrapper">
  4417.                     <div class="mod_menu_header">
  4418.                         <img alt="Header image" src="${headerAnim}" draggable="false" class="header_img" />
  4419.                         <button type="button" class="modButton" id="closeBtn">
  4420.                             <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  4421.                                 <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>
  4422.                             </svg>
  4423.                         </button>
  4424.                     </div>
  4425.                     <div class="mod_menu_inner">
  4426.                         <div class="mod_menu_navbar">
  4427.                             <button class="mod_nav_btn mod_selected" id="tab_home_btn">
  4428.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/home%20(1).png" alt="Home Icon" />
  4429.                                 Home
  4430.                             </button>
  4431.                             <button class="mod_nav_btn" id="tab_macros_btn">
  4432.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/keyboard%20(1).png" alt="Keyboard Icon" />
  4433.                                 Macros
  4434.                             </button>
  4435.                             <button class="mod_nav_btn" id="tab_game_btn">
  4436.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/games.png" alt="Game Icon" />
  4437.                                 Game
  4438.                             </button>
  4439.                             <button class="mod_nav_btn" id="tab_name_btn">
  4440.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/836ca0f4c25fc6de2e429ee3583be5f860884a0c/images/icons/name.svg" alt="Name Icon" />
  4441.                                 Name
  4442.                             </button>
  4443.                             <button class="mod_nav_btn" id="tab_themes_btn">
  4444.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/theme.png" alt="Themes Icon" />
  4445.                                 Themes
  4446.                             </button>
  4447.                             <button class="mod_nav_btn" id="tab_gallery_btn">
  4448. 								<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>
  4449.                                 Gallery
  4450.                             </button>
  4451.  
  4452.                             <button class="mod_nav_btn" id="tab_friends_btn">
  4453.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/friends%20(1).png" alt="Friends Icon" />
  4454.                                 Friends
  4455.                             </button>
  4456.                             <button class="mod_nav_btn mt-auto" id="tab_info_btn">
  4457.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/info.png" alt="Info Icon" />
  4458.                                 Info
  4459.                             </button>
  4460.                         </div>
  4461.                         <div class="mod_menu_content">
  4462.                             <div class="mod_tab" id="mod_home">
  4463.                                 <span class="text-center f-big" id="welcomeUser">Welcome ${
  4464.             this.nick || 'Guest'
  4465.         }, to the SigMod Client!</span>
  4466.                                 <div class="home-card-row">
  4467. 									<!-- CARD.1 -->
  4468. 									<div class="home-card-wrapper">
  4469. 										<span>Your stats</span>
  4470. 										<div class="home-card">
  4471. 											<canvas id="sigmod-stats" width="200" height="100"></canvas>
  4472. 										</div>
  4473. 									</div>
  4474. 									<!-- CARD.2 -->
  4475. 									<div class="home-card-wrapper">
  4476.                                         <span>Announcements</span>
  4477.                                         <div class="home-card" style="justify-content: start;">
  4478. 											<div id="mod-announcements">No announcements yet...</div>
  4479. 										</div>
  4480.                                     </div>
  4481.                                 </div>
  4482.                                 <div class="home-card-row">
  4483. 									<!-- CARD.3 -->
  4484.                                     <div class="home-card-wrapper">
  4485.                                         <span>Quick access</span>
  4486.                                         <div class="home-card quickAccess scroll" id="mod_qaccess"></div>
  4487.                                     </div>
  4488. 									<!-- CARD.4 -->
  4489.                                     <div class="home-card-wrapper">
  4490.                                         <span>Mod profile</span>
  4491.                                         <div class="home-card">
  4492.                                             <div class="justify-sb">
  4493.                                                 <div class="flex" style="align-items: center; gap: 5px;">
  4494.                                                     <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" />
  4495.                                                     <span id="my-profile-name">Guest</span>
  4496.                                                 </div>
  4497.                                                 <span id="my-profile-role">Guest</span>
  4498.                                             </div>
  4499. 											<div id="my-profile-badges"></div>
  4500.                                             <hr />
  4501.                                             <span id="my-profile-bio" class="scroll">No Bio.</span>
  4502.                                         </div>
  4503.                                     </div>
  4504.                                 </div>
  4505.                             </div>
  4506.                             <div class="mod_tab scroll" id="mod_macros" style="display: none">
  4507. 								<div class="modColItems">
  4508.                                     <div class="macros_wrapper">
  4509.                                         <span class="text-center f-big">Keybindings</span>
  4510.                                         <hr style="border-color: #3F3F3F">
  4511.                                         <div style="justify-content: center;">
  4512.                                             <div class="f-column g-10" style="align-items: center; justify-content: center;">
  4513.                                                 <div class="macrosContainer">
  4514.                                                     <div class="f-column g-10">
  4515.                                                         <label class="macroRow">
  4516.                                                           <span class="text">Rapid Feed</span>
  4517.                                                           <input type="text" name="rapidFeed" id="modinput1" class="keybinding" value="${
  4518.             modSettings.macros
  4519.                 .keys
  4520.                 .rapidFeed ||
  4521.                 ''
  4522.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4523.                                                         </label>
  4524.                                                         <label class="macroRow">
  4525.                                                           <span class="text">Double Split</span>
  4526.                                                           <input type="text" name="splits.double" id="modinput2" class="keybinding" value="${
  4527.             modSettings.macros
  4528.                 .keys.splits
  4529.                 .double || ''
  4530.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4531.                                                         </label>
  4532.                                                         <label class="macroRow">
  4533.                                                           <span class="text">Triple Split</span>
  4534.                                                           <input type="text" name="splits.triple" id="modinput3" class="keybinding" value="${
  4535.             modSettings.macros
  4536.                 .keys.splits
  4537.                 .triple || ''
  4538.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4539.                                                         </label>
  4540.                                                         <label class="macroRow">
  4541.                                                           <span class="text">Respawn</span>
  4542.                                                           <input type="text" name="respawn" id="modinput16" class="keybinding" value="${
  4543.             modSettings.macros
  4544.                 .keys
  4545.                 .respawn || ''
  4546.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4547.                                                         </label>
  4548.                                                     </div>
  4549.                                                     <div class="f-column g-10">
  4550.                                                         <label class="macroRow">
  4551.                                                           <span class="text">Quad Split</span>
  4552.                                                           <input type="text" name="splits.quad" id="modinput4" class="keybinding" value="${
  4553.             modSettings.macros
  4554.                 .keys.splits
  4555.                 .quad || ''
  4556.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4557.                                                         </label>
  4558.                                                         <label class="macroRow">
  4559.                                                           <span class="text">Horizontal Line</span>
  4560.                                                           <input type="text" name="line.horizontal" id="modinput5" class="keybinding" value="${
  4561.             modSettings.macros
  4562.                 .keys.line
  4563.                 .horizontal ||
  4564.                 ''
  4565.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4566.                                                         </label>
  4567.                                                         <label class="macroRow">
  4568.                                                           <span class="text">Vertical Line</span>
  4569.                                                           <input type="text" name="line.vertical" id="modinput8" class="keybinding" value="${
  4570.             modSettings.macros
  4571.                 .keys.line
  4572.                 .vertical ||
  4573.                 ''
  4574.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4575.                                                         </label>
  4576.                                                         <label class="macroRow">
  4577.                                                           <span class="text">Fixed Line</span>
  4578.                                                           <input type="text" name="line.fixed" id="modinput18" class="keybinding" value="${
  4579.             modSettings.macros
  4580.                 .keys.line
  4581.                 .fixed || ''
  4582.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4583.                                                         </label>
  4584.                                                     </div>
  4585.                                                 </div>
  4586.                                             </div>
  4587.                                         </div>
  4588.                                     </div>
  4589.                                     <div class="macros_wrapper">
  4590.                                         <span class="text-center f-big">Advanced Keybinding options</span>
  4591.                                         <div class="setting-card-wrapper">
  4592.                                             <div class="setting-card">
  4593.                                                 <div class="setting-card-action">
  4594.                                                     <span class="setting-card-name">Mouse macros</span>
  4595.                                                 </div>
  4596.                                             </div>
  4597.                                             <div class="setting-parameters" style="display: none;">
  4598.                                                 <div class="my-5">
  4599.                                                     <span class="stats-info-text">Feed or Split with mouse buttons</span>
  4600.                                                 </div>
  4601.                                                 <div class="stats-line justify-sb">
  4602.                                                     <span class="centerXY g-5">
  4603.                                                         Mouse Button 1
  4604.                                                         <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>
  4605.                                                     </span>
  4606.                                                     <select class="form-control macro-extanded_input" style="padding: 2px; text-align: left; width: 100px" id="m1_macroSelect">
  4607.                                                         <option value="none">None</option>
  4608.                                                         <option value="fastfeed">Fast Feed</option>
  4609.                                                         <option value="split">Split (1)</option>
  4610.                                                         <option value="split2">Double Split</option>
  4611.                                                         <option value="split3">Triple Split</option>
  4612.                                                         <option value="split4">Quad Split</option>
  4613.                                                         <option value="freeze">Horizontal Line</option>
  4614.                                                         <option value="dTrick">Double Trick</option>
  4615.                                                         <option value="sTrick">Self Trick</option>
  4616.                                                     </select>
  4617.                                                 </div>
  4618.                                                 <div class="stats-line justify-sb">
  4619.                                                     <span class="centerXY g-5">
  4620.                                                         Mouse Button 2
  4621.                                                         <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>
  4622.                                                     </span>
  4623.                                                     <select class="form-control" style="padding: 2px; text-align: left; width: 100px" id="m2_macroSelect">
  4624.                                                         <option value="none">None</option>
  4625.                                                         <option value="fastfeed">Fast Feed</option>
  4626.                                                         <option value="split">Split (1)</option>
  4627.                                                         <option value="split2">Double Split</option>
  4628.                                                         <option value="split3">Triple Split</option>
  4629.                                                         <option value="split4">Quad Split</option>
  4630.                                                         <option value="freeze">Horizontal Line</option>
  4631.                                                         <option value="dTrick">Double Trick</option>
  4632.                                                         <option value="sTrick">Self Trick</option>
  4633.                                                     </select>
  4634.                                                 </div>
  4635.                                             </div>
  4636.                                         </div>
  4637. 										<div class="setting-card-wrapper">
  4638.                                             <div class="setting-card">
  4639.                                                 <div class="setting-card-action">
  4640.                                                     <span class="setting-card-name">Rapid feed</span>
  4641.                                                 </div>
  4642.                                             </div>
  4643.  
  4644.                                             <div class="setting-parameters" style="display: none;">
  4645.                                                 <div class="my-5">
  4646.                                                     <span class="stats-info-text">Customize feeding</span>
  4647.                                                 </div>
  4648.                                                 <div class="stats-line justify-sb">
  4649.                                                     <span>Speed</span>
  4650. 													<div class="justify-sb g-5" style="width: 200px;">
  4651. 														<span class="mod_badge" id="macroSpeedText">${
  4652.             modSettings.macros
  4653.                 .feedSpeed ||
  4654.                 '50'
  4655.         }ms</span>
  4656. 														<input
  4657. 															type="range"
  4658. 															class="modSlider"
  4659. 															id="macroSpeed"
  4660. 															min="5"
  4661. 															max="100"
  4662. 															value="${modSettings.macros.feedSpeed || 50}"
  4663. 															step="5"
  4664. 															style="width: 134px;"
  4665. 														/>
  4666. 													</div>
  4667.                                                 </div>
  4668.                                             </div>
  4669.                                         </div>
  4670.                                         <div class="setting-card-wrapper">
  4671.                                             <div class="setting-card">
  4672.                                                 <div class="setting-card-action">
  4673.                                                     <span class="setting-card-name">Linesplits</span>
  4674.                                                 </div>
  4675.                                             </div>
  4676.  
  4677.                                             <div class="setting-parameters" style="display: none;">
  4678.                                                 <div class="my-5">
  4679.                                                     <span class="stats-info-text">Customize linesplits</span>
  4680.                                                 </div>
  4681.  
  4682.                                                 <div class="stats-line justify-sb">
  4683.                                                     <span>Instant split</span>
  4684. 													<div class="centerXY g-5">
  4685. 														<span class="modDescText">Splits - </span>
  4686. 														<input type="text" class="modInput modNumberInput text-center" placeholder="0" title="Splits" style="width: 30px;" id="instant-split-amount" onclick="this.select()" />
  4687. 														<div class="modCheckbox">
  4688. 														  <input id="toggle-instant-split" type="checkbox" checked />
  4689. 														  <label class="cbx" for="toggle-instant-split"></label>
  4690. 														</div>
  4691. 													</div>
  4692.                                                 </div>
  4693.                                             </div>
  4694.                                         </div>
  4695.                                         <div class="setting-card-wrapper">
  4696.                                             <div class="setting-card">
  4697.                                                 <div class="setting-card-action">
  4698.                                                     <span class="setting-card-name">Toggle Settings</span>
  4699.                                                 </div>
  4700.                                             </div>
  4701.  
  4702.                                             <div class="setting-parameters" style="display: none;">
  4703.                                                 <div class="my-5">
  4704.                                                     <span class="stats-info-text">Toggle settings with a keybind.</span>
  4705.                                                 </div>
  4706.  
  4707.                                                 <div class="stats-line justify-sb">
  4708.                                                     <span>Toggle Menu</span>
  4709.                                                     <input type="text" name="toggle.menu" id="modinput6" class="keybinding" value="${
  4710.             modSettings.macros.keys
  4711.                 .toggle.menu || ''
  4712.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4713.                                                 </div>
  4714.  
  4715.                                                 <div class="stats-line justify-sb">
  4716.                                                     <span>Toggle Names</span>
  4717.                                                     <input value="${
  4718.             modSettings.macros.keys
  4719.                 .toggle.names || ''
  4720.         }" placeholder="..." readonly id="modinput11" name="toggle.names" class="keybinding" onfocus="this.select();">
  4721.                                                 </div>
  4722.  
  4723.                                                 <div class="stats-line justify-sb">
  4724.                                                     <span>Toggle Skins</span>
  4725.                                                     <input value="${
  4726.             modSettings.macros.keys
  4727.                 .toggle.skins || ''
  4728.         }" placeholder="..." readonly id="modinput12" name="toggle.skins" class="keybinding" onfocus="this.select();">
  4729.                                                 </div>
  4730.  
  4731.                                                 <div class="stats-line justify-sb">
  4732.                                                 <span>Toggle Autorespawn</span>
  4733.                                                     <input value="${
  4734.             modSettings.macros.keys
  4735.                 .toggle
  4736.                 .autoRespawn || ''
  4737.         }" placeholder="..." readonly id="modinput13" name="toggle.autoRespawn" class="keybinding" onfocus="this.select();">
  4738.                                                 </div>
  4739.                                             </div>
  4740.                                         </div>
  4741.                                         <div class="setting-card-wrapper">
  4742.                                             <div class="setting-card">
  4743.                                                 <div class="setting-card-action">
  4744.                                                     <span class="setting-card-name">Tricksplits</span>
  4745.                                                 </div>
  4746.                                             </div>
  4747.                                             <div class="setting-parameters" style="display: none;">
  4748.                                                 <div class="my-5">
  4749.                                                     <span class="stats-info-text">Other split options - splits with delay</span>
  4750.                                                 </div>
  4751.                                                 <div class="stats-line justify-sb">
  4752.                                                     <span>Double Trick</span>
  4753.                                                     <input value="${
  4754.             modSettings.macros.keys
  4755.                 .splits
  4756.                 .doubleTrick || ''
  4757.         }" placeholder="..." readonly id="modinput14" name="splits.doubleTrick" class="keybinding" onfocus="this.select();">
  4758.                                                 </div>
  4759.                                                 <div class="stats-line justify-sb">
  4760.                                                     <span>Self Trick</span>
  4761.                                                     <input value="${
  4762.             modSettings.macros.keys
  4763.                 .splits.selfTrick ||
  4764.                 ''
  4765.         }" placeholder="..." readonly id="modinput15" name="splits.selfTrick" class="keybinding" onfocus="this.select();">
  4766.                                                 </div>
  4767.                                             </div>
  4768.                                         </div>
  4769.                                     </div>
  4770.                                 </div>
  4771.                             </div>
  4772.                             <div class="mod_tab scroll" id="mod_game" style="display: none">
  4773.                                 <div class="modColItems">
  4774.                                     <div class="modRowItems" style="align-items: start;">
  4775.                                         <div class="modColItems_2">
  4776.                                             <span style="font-style: italic;">~ Game Colors</span>
  4777.                                             <div class="justify-sb w-100 p-5 rounded">
  4778.                                                 <span class="text">Map</span>
  4779.                                                 <div id="mapColor"></div>
  4780.                                             </div>
  4781.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4782.                                                 <span class="text">Border</span>
  4783.                                                 <div id="borderColor"></div>
  4784.                                             </div>
  4785.                                             <div class="justify-sb w-100 p-5 rounded">
  4786.                                                 <span class="text" title="Does not work with jelly physics">Food</span>
  4787.                                                 <div id="foodColor"></div>
  4788.                                             </div>
  4789.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4790.                                                 <span class="text" title="Does not work with jelly physics">Cells</span>
  4791.                                                 <div id="cellColor"></div>
  4792.                                             </div>
  4793.                                         </div>
  4794.                                         <div class="modColItems_2">
  4795.                                             <span style="font-style: italic;">~ Game Images</span>
  4796.                                             <div class="justify-sb w-100 p-5 rounded">
  4797.                                                 <span class="text">Map Image</span>
  4798.                                                 <button class="btn select-btn" id="mapImageSelect"></button>
  4799.                                             </div>
  4800.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4801.                                                 <span class="text">Virus Image</span>
  4802.                                                 <button class="btn select-btn" id="virusImageSelect"></button>
  4803.                                             </div>
  4804.                                             <div class="justify-sb w-100 p-5 rounded">
  4805.                                                 <span class="text">Replace Skins</span>
  4806.                                                 <button class="btn select-btn" id="skinReplaceSelect"></button>
  4807.                                             </div>
  4808.                                         </div>
  4809.                                     </div>
  4810.                                     <div class="modColItems_2">
  4811. 										<span style="font-style: italic;">~ Game Settings</span>
  4812. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4813. 											<span class="text">Font</span>
  4814. 											<div id="font-select-container"></div>
  4815. 										</div>
  4816. 										<div class="justify-sb w-100 p-10">
  4817. 											<span class="text">Names</span>
  4818. 											<div class="modCheckbox">
  4819. 											  <input id="mod-showNames" type="checkbox" ${
  4820.             JSON.parse(
  4821.                 localStorage.getItem(
  4822.                     'settings'
  4823.                 )
  4824.             )?.showNames
  4825.                 ? 'checked'
  4826.             : ''
  4827.         } />
  4828. 											  <label class="cbx" for="mod-showNames"></label>
  4829. 											</div>
  4830. 										</div>
  4831. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4832. 											<span class="text">Skins</span>
  4833. 											<div class="modCheckbox">
  4834. 											  <input id="mod-showSkins" type="checkbox" ${
  4835.             JSON.parse(
  4836.                 localStorage.getItem(
  4837.                     'settings'
  4838.                 )
  4839.             )?.showSkins
  4840.                 ? 'checked'
  4841.             : ''
  4842.         } />
  4843. 											  <label class="cbx" for="mod-showSkins"></label>
  4844. 											</div>
  4845. 										</div>
  4846. 										<div class="justify-sb w-100 p-10 rounded">
  4847. 											<span title="Long nicknames will be shorten on the leaderboard & ingame">Shorten names</span>
  4848. 											<div class="modCheckbox">
  4849. 											  <input id="shortenNames" type="checkbox" ${
  4850.             modSettings.game
  4851.                 .shortenNames && 'checked'
  4852.         } />
  4853. 											  <label class="cbx" for="shortenNames"></label>
  4854. 											</div>
  4855. 										</div>
  4856. 										<div class="justify-sb w-100 accent_row p-10">
  4857. 											<span>Text outlines & shadows</span>
  4858. 											<div class="modCheckbox">
  4859. 											  <input id="removeOutlines" type="checkbox" ${
  4860.             modSettings.gameShortenNames &&
  4861.                 'checked'
  4862.         } />
  4863. 											  <label class="cbx" for="removeOutlines"></label>
  4864. 											</div>
  4865. 										</div>
  4866. 										<div class="justify-sb w-100 rounded" style="padding: 5px 10px;">
  4867.                                         	<span class="text">Death screen Position</span>
  4868. 											<select id="deathScreenPos" class="form-control" style="width: 30%">
  4869. 												<option value="center" selected>Center</option>
  4870. 												<option value="left">Left</option>
  4871. 												<option value="right">Right</option>
  4872. 												<option value="top">Top</option>
  4873. 												<option value="bottom">Bottom</option>
  4874. 											</select>
  4875. 										</div>
  4876. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4877. 											<span class="text">Play timer</span>
  4878. 											<div class="modCheckbox">
  4879. 											  <input type="checkbox" id="playTimerToggle" ${
  4880.             modSettings.settings
  4881.                 .playTimer && 'checked'
  4882.         } />
  4883. 											  <label class="cbx" for="playTimerToggle"></label>
  4884. 											</div>
  4885. 										</div>
  4886. 										<div class="justify-sb w-100 p-10 rounded">
  4887. 											<span class="text">Mouse tracker</span>
  4888. 											<div class="modCheckbox">
  4889. 											  <input type="checkbox" id="mouseTrackerToggle" ${
  4890.             modSettings.settings
  4891.                 .mouseTracker && 'checked'
  4892.         } />
  4893. 											  <label class="cbx" for="mouseTrackerToggle"></label>
  4894. 											</div>
  4895. 										</div>
  4896.                                     </div>
  4897.                                     <div class="modRowItems justify-sb">
  4898.                                         <span class="text">Reset settings: </span>
  4899.                                         <button class="modButton-secondary" id="resetModSettings" type="button">Reset mod settings</button>
  4900.                                         <button class="modButton-secondary" id="resetGameSettings" type="button">Reset game settings</button>
  4901.                                     </div>
  4902.                                 </div>
  4903.                             </div>
  4904.  
  4905.                             <div class="mod_tab scroll" id="mod_name" style="display: none">
  4906.                             <div class="modColItems">
  4907.                                 <div class="modRowItems justify-sb" style="align-items: start;">
  4908.                                     <div class="f-column g-5" style="align-items: start; justify-content: start;">
  4909.                                         <span class="modTitleText">Name fonts & special characters</span>
  4910.                                         <span class="modDescText">Customize your name with special characters or fonts</span>
  4911.                                     </div>
  4912.                                     <div class="f-column g-5">
  4913.                                         <button class="modButton-secondary" onclick="window.open('https://nickfinder.com', '_blank')">Nickfinder</button>
  4914.                                         <button class="modButton-secondary" onclick="window.open('https://www.stylishnamemaker.com', '_blank')">Stylish Name</button>
  4915.                                         <button class="modButton-secondary" onclick="window.open('https://www.tell.wtf', '_blank')">Tell.wtf</button>
  4916.                                     </div>
  4917.                                 </div>
  4918.                                 <div class="modRowItems justify-sb">
  4919.                                     <div class="f-column g-5">
  4920.                                         <span class="modTitleText">Save names</span>
  4921.                                         <span class="modDescText">Save your names locally</span>
  4922.                                         <div class="flex g-5">
  4923.                                             <input class="modInput" placeholder="Enter a name..." id="saveNameValue" />
  4924.                                             <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>
  4925.                                         </div>
  4926.                                         <div id="savedNames" class="f-column scroll"></div>
  4927.                                     </div>
  4928.                                     <div class="vr"></div>
  4929.                                     <div class="f-column g-5">
  4930.                                         <span class="modTitleText">Name Color</span>
  4931.                                         <span class="modDescText">Customize your name color</span>
  4932.                                         <div class="justify-sb">
  4933.                                             <input type="color" value="#ffffff" id="nameColor" class="colorInput">
  4934.                                         </div>
  4935.                                         <span class="modTitleText">Gradient Name</span>
  4936.                                         <span class="modDescText">Customize your name with a gradient color</span>
  4937.                                         <div class="justify-sb">
  4938.                                             <div class="flex g-2" style="align-items: center">
  4939.                                                 <input type="color" value="#ffffff" id="gradientNameColor1" class="colorInput">
  4940.                                                 <span>➜ First color</span>
  4941.                                             </div>
  4942.                                         </div>
  4943.                                         <div class="justify-sb">
  4944.                                             <div class="flex g-2" style="align-items: center">
  4945.                                                 <input type="color" value="#ffffff" id="gradientNameColor2" class="colorInput">
  4946.                                                 <span>➜ Second color</span>
  4947.                                             </div>
  4948.                                         </div>
  4949.                                     </div>
  4950.                                 </div>
  4951.                             </div>
  4952.                             </div>
  4953.                             <div class="mod_tab scroll" id="mod_themes" style="display: none">
  4954. 								<span>Background presets</span>
  4955.                                 <div class="themes scroll" id="themes">
  4956.                                     <div class="theme" id="createTheme">
  4957.                                         <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>
  4958.                                         <div class="themeName text" style="color: #fff">Create</div>
  4959.                                     </div>
  4960.                                 </div>
  4961.  
  4962. 								<div class="modColItems_2" style="margin-top: 5px;">
  4963. 									<div class="justify-sb w-100 p-10">
  4964. 										<span>Input border radius</span>
  4965. 										<div class="centerXY g-10" style="width: 40%">
  4966.                                             <button id="reset_input_radius" class="resetButton"></button>
  4967.                                             <input type="range" class="modSlider" id="theme-inputBorderRadius" max="20" step="2" />
  4968.                                         </div>
  4969. 									</div>
  4970. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4971. 										<span>Menu border radius</span>
  4972.                                         <div class="centerXY g-10" style="width: 40%">
  4973.                                             <button id="reset_menu_radius" class="resetButton"></button>
  4974.                                             <input type="range" class="modSlider"id="theme-menuBorderRadius" max="50" step="2" />
  4975.                                         </div>
  4976. 									</div>
  4977. 									<div class="justify-sb w-100 p-10">
  4978. 										<span>Input border</span>
  4979. 										<div class="modCheckbox">
  4980. 										  <input id="theme-inputBorder" type="checkbox" />
  4981. 										  <label class="cbx" for="theme-inputBorder"></label>
  4982. 										</div>
  4983. 									</div>
  4984. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4985. 										<span>Challenges on deathscreen</span>
  4986. 										<div class="modCheckbox">
  4987. 										  <input id="showChallenges" type="checkbox" />
  4988. 										  <label class="cbx" for="showChallenges"></label>
  4989. 										</div>
  4990. 									</div>
  4991. 									<div class="justify-sb w-100 p-10">
  4992. 										<span>Remove shop popup</span>
  4993. 										<div class="modCheckbox">
  4994. 										  <input id="removeShopPopup" type="checkbox" />
  4995. 										  <label class="cbx" for="removeShopPopup"></label>
  4996. 										</div>
  4997. 									</div>
  4998. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4999. 										<span>Hide Discord Buttons</span>
  5000. 										<div class="modCheckbox">
  5001. 										  <input id="hideDiscordBtns" type="checkbox" />
  5002. 										  <label class="cbx" for="hideDiscordBtns"></label>
  5003. 										</div>
  5004. 									</div>
  5005. 									<div class="justify-sb w-100 p-10">
  5006. 										<span>Hide Language Buttons</span>
  5007. 										<div class="modCheckbox">
  5008. 										  <input id="hideLangs" type="checkbox" />
  5009. 										  <label class="cbx" for="hideLangs"></label>
  5010. 										</div>
  5011. 									</div>
  5012. 								</div>
  5013.                             </div>
  5014.                             <div class="mod_tab scroll" id="mod_gallery" style="display: none">
  5015. 								<div class="modColItems_2">
  5016. 									<label class="macroRow w-100">
  5017. 									  <span class="text">Keybind to save image</span>
  5018. 									  <input type="text" name="saveImage" id="modinput17" class="keybinding" value="${
  5019.             modSettings.macros.keys.saveImage ||
  5020.                 ''
  5021.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  5022. 									</label>
  5023. 								</div>
  5024. 								<div class="modColItems_2">
  5025. 									<span>Image gallery</span>
  5026. 									<div class="flex g-5">
  5027. 										<button class="modButton" id="gallery-download">Download all</button>
  5028. 										<button class="modButton" id="gallery-delete">Delete all</button>
  5029. 									</div>
  5030. 									<div id="image-gallery"></div>
  5031. 								</div>
  5032.                             </div>
  5033.                             <div class="mod_tab scroll centerXY" id="mod_friends" style="display: none">
  5034.                                 <div class="centerXY f-big" style="margin-top: 10px;">Connect and discover new friends with SigMod.</div>
  5035.                                 <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>
  5036.  
  5037.                                 <div class="centerXY f-column g-5" style="height: 300px; width: 165px;">
  5038.                                     <button class="modButton-black" id="createAccount">
  5039.                                         <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>
  5040.                                         Create account
  5041.                                     </button>
  5042.                                     <button class="modButton-black" id="login">
  5043.                                         <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>
  5044.                                         Login
  5045.                                     </button>
  5046.                                 </div>
  5047.                             </div>
  5048.                             <div class="mod_tab scroll f-column g-5 text-center" id="mod_info" style="display: none">
  5049.                                 <div class="brand_wrapper">
  5050.                                     <img src="https://czrsd.com/static/sigmod/info_bg_2.jpeg" alt="Info background" class="brand_img" />
  5051.                                     <span>SigMod V${version} by Cursed</span>
  5052.                                 </div>
  5053.                                 <span>Thanks to</span>
  5054.                                 <ul class="brand_credits">
  5055. 									<li>Jb</li>
  5056. 									<li>Black</li>
  5057. 									<li>8y8x</li>
  5058. 									<li>Dreamz</li>
  5059. 									<li>Ultra</li>
  5060. 									<li>Xaris</li>
  5061. 									<li>Benzofury</li>
  5062. 								</ul>
  5063.                                 <p>for contributing to the mod’s evolution into what it is today.</p>
  5064.  
  5065. 								<div class="sigmod-community">
  5066. 									<div class="community-header">
  5067. 										Community
  5068. 									</div>
  5069. 									<div class="flex">
  5070. 										<div class="community-discord-logo">
  5071. 											<svg width="31" height="30" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top: 3px;">
  5072. 												<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>
  5073. 											</svg>
  5074. 										</div>
  5075. 										<div class="community-discord">
  5076. 											<a href="https://dsc.gg/sigmodz" target="_blank">dsc.gg/sigmodz</a>
  5077. 										</div>
  5078. 									</div>
  5079. 								</div>
  5080.                                 <div>
  5081.                                    Install <a href="https://greasyfork.org/scripts/483587-sigmally-fixes-v2" target="_blank">Sigmally Fixes</a> for better performance!
  5082.                                 </div>
  5083.  
  5084.                                 <div class="mt-auto flex f-column g-10">
  5085. 									<div class="brand_yt">
  5086. 										<div class="yt_wrapper" onclick="window.open('https://www.youtube.com/@sigmallyCursed')">
  5087. 											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="26" height="26">
  5088. 												<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>
  5089. 											</svg>
  5090. 											<span style="font-size: 16px;">Cursed</span>
  5091. 										</div>
  5092. 										<div class="yt_wrapper" onclick="window.open('https://www.youtube.com/@sigmally')">
  5093. 											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="26" height="26">
  5094. 												<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>
  5095. 											</svg>
  5096. 											<span style="font-size: 16px;">Sigmally</span>
  5097. 										</div>
  5098. 									</div>
  5099. 									<div class="w-100 centerXY">
  5100. 										<div class="justify-sb" style="width: 50%;">
  5101. 											<a href="https://mod.czrsd.com/" target="_blank">Website</a>
  5102. 											<a href="https://mod.czrsd.com/changelog" target="_blank">Changelog</a>
  5103. 											<a href="https://mod.czrsd.com/tos" target="_blank">Terms of Service</a>
  5104. 										</div>
  5105. 									</div>
  5106. 								</div>
  5107.                             </div>
  5108.                         </div>
  5109.                     </div>
  5110.                 </div>
  5111.             `;
  5112.             document.body.append(mod_menu);
  5113.  
  5114.             const styleTag = document.createElement('style');
  5115.             styleTag.innerHTML = this.style;
  5116.             document.head.append(styleTag);
  5117.  
  5118.             this.getSettings();
  5119.             this.smallMods();
  5120.             this.setInputActions();
  5121.  
  5122.             mod_menu.addEventListener('click', (event) => {
  5123.                 if (event.target.closest('.mod_menu_wrapper')) return;
  5124.  
  5125.                 mod_menu.style.opacity = 0;
  5126.                 setTimeout(() => {
  5127.                     mod_menu.style.display = 'none';
  5128.                 }, 300);
  5129.             });
  5130.  
  5131.             function openModTab(tabId) {
  5132.                 const allTabs = document.getElementsByClassName('mod_tab');
  5133.                 const allTabButtons = document.querySelectorAll('.mod_nav_btn');
  5134.  
  5135.                 for (const tab of allTabs) {
  5136.                     tab.style.opacity = 0;
  5137.                     setTimeout(() => {
  5138.                         tab.style.display = 'none';
  5139.                     }, 200);
  5140.                 }
  5141.  
  5142.                 allTabButtons.forEach((tabBtn) =>
  5143.                                       tabBtn.classList.remove('mod_selected')
  5144.                                      );
  5145.  
  5146.                 if (tabId === 'mod_gallery') {
  5147.                     mods.updateGallery();
  5148.                 }
  5149.  
  5150.                 const selectedTab = byId(tabId);
  5151.                 setTimeout(() => {
  5152.                     selectedTab.style.display = 'flex';
  5153.                     setTimeout(() => {
  5154.                         selectedTab.style.opacity = 1;
  5155.                     }, 10);
  5156.                 }, 200);
  5157.                 this.id && this.classList.add('mod_selected');
  5158.             }
  5159.  
  5160.             window.openModTab = openModTab;
  5161.  
  5162.             document.querySelectorAll('.mod_nav_btn').forEach((tabBtn) => {
  5163.                 tabBtn.addEventListener('click', function () {
  5164.                     openModTab.call(
  5165.                         this,
  5166.                         this.id.replace('tab_', 'mod_').replace('_btn', '')
  5167.                     );
  5168.                 });
  5169.             });
  5170.  
  5171.             const openMenu = document.querySelectorAll(
  5172.                 '#clans_and_settings button'
  5173.             )[1];
  5174.             openMenu.removeAttribute('onclick');
  5175.             openMenu.addEventListener('click', () => {
  5176.                 mod_menu.style.display = 'flex';
  5177.                 setTimeout(() => {
  5178.                     mod_menu.style.opacity = 1;
  5179.                 }, 10);
  5180.             });
  5181.  
  5182.             const closeModal = byId('closeBtn');
  5183.             closeModal.addEventListener('click', () => {
  5184.                 mod_menu.style.opacity = 0;
  5185.                 setTimeout(() => {
  5186.                     mod_menu.style.display = 'none';
  5187.                 }, 300);
  5188.             });
  5189.  
  5190.             const fontSelectContainer = document.querySelector(
  5191.                 '#font-select-container'
  5192.             );
  5193.  
  5194.             try {
  5195.                 const fonts = await this.getGoogleFonts();
  5196.  
  5197.                 const { container: selectElement, selectButton } =
  5198.                       this.render_sm_select(
  5199.                           'Select Font',
  5200.                           fonts,
  5201.                           { width: '200px' },
  5202.                           modSettings.game.font
  5203.                       );
  5204.  
  5205.                 const resetFont = document.createElement('button');
  5206.                 resetFont.classList.add('resetButton');
  5207.  
  5208.                 resetFont.addEventListener('click', () => {
  5209.                     if (modSettings.game.font === 'Ubuntu') return;
  5210.  
  5211.                     modSettings.game.font = 'Ubuntu';
  5212.                     updateStorage();
  5213.                     selectElement.value = 'Ubuntu';
  5214.  
  5215.                     // just change the text of the selectButton
  5216.                     selectButton.querySelector('span').textContent = 'Ubuntu';
  5217.                 });
  5218.  
  5219.                 const container = document.createElement('div');
  5220.                 container.classList.add('centerXY', 'g-5');
  5221.                 container.append(resetFont, selectElement);
  5222.  
  5223.                 selectElement.addEventListener('change', (e) => {
  5224.                     const font = e.detail;
  5225.                     const link = document.createElement('link');
  5226.                     link.href = `https://fonts.googleapis.com/css2?family=${font}&display=swap`;
  5227.                     link.rel = 'stylesheet';
  5228.                     document.head.appendChild(link);
  5229.  
  5230.                     modSettings.game.font = font;
  5231.                     updateStorage();
  5232.                 });
  5233.  
  5234.                 fontSelectContainer.replaceWith(container);
  5235.             } catch (e) {
  5236.                 fontSelectContainer.replaceWith(
  5237.                     "Couldn't load fonts, try again later."
  5238.                 );
  5239.                 console.error(e);
  5240.             }
  5241.  
  5242.             if (modSettings.game.font !== 'Ubuntu') {
  5243.                 const link = document.createElement('link');
  5244.                 link.href = `https://fonts.googleapis.com/css2?family=${modSettings.game.font}&display=swap`;
  5245.                 link.rel = 'stylesheet';
  5246.                 document.head.appendChild(link);
  5247.             }
  5248.  
  5249.             const macroSettings = () => {
  5250.                 const allSettingNames =
  5251.                       document.querySelectorAll('.setting-card-name');
  5252.  
  5253.                 for (const settingName of Object.values(allSettingNames)) {
  5254.                     settingName.addEventListener('click', (event) => {
  5255.                         const settingCardWrappers = document.querySelectorAll(
  5256.                             '.setting-card-wrapper'
  5257.                         );
  5258.                         const currentWrapper = Object.values(
  5259.                             settingCardWrappers
  5260.                         ).filter(
  5261.                             (wrapper) =>
  5262.                             wrapper.querySelector('.setting-card-name')
  5263.                             .textContent === settingName.textContent
  5264.                         )[0];
  5265.                         const settingParameters = currentWrapper.querySelector(
  5266.                             '.setting-parameters'
  5267.                         );
  5268.  
  5269.                         settingParameters.style.display =
  5270.                             settingParameters.style.display === 'none'
  5271.                             ? 'block'
  5272.                         : 'none';
  5273.                     });
  5274.                 }
  5275.             };
  5276.             macroSettings();
  5277.  
  5278.             const playTimerToggle = byId('playTimerToggle');
  5279.             playTimerToggle.addEventListener('change', () => {
  5280.                 modSettings.playTimer = playTimerToggle.checked;
  5281.                 updateStorage();
  5282.             });
  5283.  
  5284.             const mouseTrackerToggle = byId('mouseTrackerToggle');
  5285.             mouseTrackerToggle.addEventListener('change', () => {
  5286.                 modSettings.mouseTracker = mouseTrackerToggle.checked;
  5287.                 updateStorage();
  5288.             });
  5289.  
  5290.             const macroSpeed = byId('macroSpeed');
  5291.             const macroSpeedText = byId('macroSpeedText');
  5292.  
  5293.             macroSpeed.addEventListener('input', () => {
  5294.                 modSettings.macros.feedSpeed = macroSpeed.value;
  5295.                 macroSpeedText.textContent = `${modSettings.macros.feedSpeed.toString()}ms`;
  5296.                 updateStorage();
  5297.             });
  5298.  
  5299.             // Reset settings - Mod
  5300.             const resetModSettings = byId('resetModSettings');
  5301.             resetModSettings.addEventListener('click', () => {
  5302.                 if (
  5303.                     confirm(
  5304.                         'Are you sure you want to reset the mod settings? A reload is required.'
  5305.                     )
  5306.                 ) {
  5307.                     this.removeStorage(storageName);
  5308.                     location.reload();
  5309.                 }
  5310.             });
  5311.  
  5312.             // Reset settings - Game
  5313.             const resetGameSettings = byId('resetGameSettings');
  5314.             resetGameSettings.addEventListener('click', () => {
  5315.                 if (
  5316.                     confirm(
  5317.                         'Are you sure you want to reset the game settings? Your nick and more settings will be lost. A reload is required.'
  5318.                     )
  5319.                 ) {
  5320.                     window.settings.gameSettings = null;
  5321.                     this.removeStorage('settings');
  5322.                     location.reload();
  5323.                 }
  5324.             });
  5325.  
  5326.             // EventListeners for auth buttons
  5327.             const createAccountBtn = byId('createAccount');
  5328.             const loginBtn = byId('login');
  5329.  
  5330.             createAccountBtn.addEventListener('click', () => {
  5331.                 this.createSignInWrapper(false);
  5332.             });
  5333.             loginBtn.addEventListener('click', () => {
  5334.                 this.createSignInWrapper(true);
  5335.             });
  5336.         },
  5337.  
  5338.         render_sm_select(label, items, style = {}, defaultValue) {
  5339.             const createElement = (tag, styles, text = '') => {
  5340.                 const el = document.createElement(tag);
  5341.                 el.textContent = text;
  5342.                 Object.assign(el.style, styles);
  5343.                 return el;
  5344.             };
  5345.  
  5346.             const defaultcontainerStyles = {
  5347.                 position: 'relative',
  5348.                 display: 'inline-block',
  5349.             };
  5350.  
  5351.             const container = createElement('div', {
  5352.                 ...defaultcontainerStyles,
  5353.                 ...style,
  5354.             });
  5355.  
  5356.             const selectButton = document.createElement('div');
  5357.             selectButton.style.cssText =
  5358.                 '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;';
  5359.  
  5360.             selectButton.innerHTML = `
  5361.                <span>${label}</span>
  5362.                <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#000000" width="20">
  5363.                  <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>
  5364.                </svg>
  5365.             `;
  5366.  
  5367.             if (defaultValue && items.includes(defaultValue)) {
  5368.                 selectButton.innerHTML = `<span>${defaultValue}</span> ${
  5369.                 selectButton.innerHTML.split('</svg>')[1]
  5370.             }`;
  5371.             }
  5372.  
  5373.             container.appendChild(selectButton);
  5374.  
  5375.             const dropdown = createElement('div', {
  5376.                 display: 'none',
  5377.                 position: 'absolute',
  5378.                 background: '#111',
  5379.                 color: '#fafafa',
  5380.                 borderRadius: '0 0 10px 10px',
  5381.                 padding: '5px 0',
  5382.                 zIndex: '999999',
  5383.                 maxHeight: '200px',
  5384.                 overflowY: 'auto',
  5385.             });
  5386.  
  5387.             const searchBox = createElement('input', {
  5388.                 width: '100%',
  5389.                 padding: '5px',
  5390.                 marginBottom: '5px',
  5391.                 background: '#222',
  5392.                 border: 'none',
  5393.                 color: '#fff',
  5394.             });
  5395.             searchBox.placeholder = 'Search...';
  5396.  
  5397.             dropdown.append(searchBox);
  5398.  
  5399.             items.forEach((item) => {
  5400.                 const option = createElement(
  5401.                     'div',
  5402.                     { padding: '5px', cursor: 'pointer' },
  5403.                     item
  5404.                 );
  5405.                 option.onclick = () => {
  5406.                     selectButton.innerHTML = `
  5407.                         <span>${item}</span>
  5408.                         <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#000000" width="20">
  5409.                           <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>
  5410.                         </svg>`;
  5411.                     dropdown.style.display = 'none';
  5412.                     container.dispatchEvent(
  5413.                         new CustomEvent('change', { detail: item })
  5414.                     );
  5415.                 };
  5416.                 option.onmouseover = (e) =>
  5417.                 (e.target.style.background = '#555');
  5418.                 option.onmouseout = (e) =>
  5419.                 (e.target.style.background = 'transparent');
  5420.                 dropdown.append(option);
  5421.             });
  5422.  
  5423.             container.append(dropdown);
  5424.  
  5425.             selectButton.onclick = () => {
  5426.                 dropdown.style.display =
  5427.                     dropdown.style.display === 'none' ? 'block' : 'none';
  5428.             };
  5429.  
  5430.             document.onclick = (e) => {
  5431.                 if (!container.contains(e.target))
  5432.                     dropdown.style.display = 'none';
  5433.             };
  5434.  
  5435.             searchBox.addEventListener('input', () => {
  5436.                 const filter = searchBox.value.toLowerCase();
  5437.                 Array.from(dropdown.children)
  5438.                     .slice(1)
  5439.                     .forEach((item) => {
  5440.                     item.style.display = item.textContent
  5441.                         .toLowerCase()
  5442.                         .includes(filter)
  5443.                         ? 'block'
  5444.                     : 'none';
  5445.                 });
  5446.             });
  5447.  
  5448.             return { container, selectButton };
  5449.         },
  5450.  
  5451.         setProfile(user) {
  5452.             const img = byId('my-profile-img');
  5453.             const name = byId('my-profile-name');
  5454.             const role = byId('my-profile-role');
  5455.             const bioText = byId('my-profile-bio');
  5456.             const badges = byId('my-profile-badges');
  5457.  
  5458.             const bio = user.bio ? user.bio : 'No bio.';
  5459.  
  5460.             img.src = user.imageURL;
  5461.             name.innerText = user.username;
  5462.             role.innerText = user.role;
  5463.             bioText.innerHTML = bio;
  5464.             badges.innerHTML =
  5465.                 user.badges && user.badges.length > 0
  5466.                 ? user.badges
  5467.                 .map(
  5468.                 (badge) =>
  5469.                 `<span class="mod_badge">${badge}</span>`
  5470.             )
  5471.                 .join('')
  5472.             : '<span>User has no badges.</span>';
  5473.  
  5474.             role.classList.add(`${user.role}_role`);
  5475.         },
  5476.  
  5477.         getSettings() {
  5478.             const mod_qaccess = document.querySelector('#mod_qaccess');
  5479.             const settingsGrid = document.querySelector(
  5480.                 '#settings > .checkbox-grid'
  5481.             );
  5482.             const settingsNames =
  5483.                   settingsGrid.querySelectorAll('label:not([class])');
  5484.             const inputs = settingsGrid.querySelectorAll('input');
  5485.  
  5486.             inputs.forEach((checkbox, index) => {
  5487.                 if (
  5488.                     checkbox.id === 'showMinimap' ||
  5489.                     checkbox.id === 'darkTheme'
  5490.                 )
  5491.                     return;
  5492.                 const modrow = document.createElement('div');
  5493.                 modrow.classList.add('justify-sb', 'p-2');
  5494.  
  5495.                 if (
  5496.                     checkbox.id === 'showChat' ||
  5497.                     checkbox.id === 'showPosition' ||
  5498.                     checkbox.id === 'showNames' ||
  5499.                     checkbox.id === 'showSkins'
  5500.                 ) {
  5501.                     modrow.style.display = 'none';
  5502.                 }
  5503.  
  5504.                 modrow.innerHTML = `
  5505.                     <span>${settingsNames[index].textContent}</span>
  5506.                     <div class="modCheckbox" id="${checkbox.id}_wrapper"></div>
  5507.                 `;
  5508.                 mod_qaccess.append(modrow);
  5509.  
  5510.                 const cbWrapper = byId(`${checkbox.id}_wrapper`);
  5511.                 cbWrapper.appendChild(checkbox);
  5512.  
  5513.                 cbWrapper.appendChild(
  5514.                     Object.assign(document.createElement('label'), {
  5515.                         classList: ['cbx'],
  5516.                         htmlFor: checkbox.id,
  5517.                     })
  5518.                 );
  5519.             });
  5520.         },
  5521.  
  5522.         themes() {
  5523.             const elements = [
  5524.                 '#menu',
  5525.                 '#title',
  5526.                 '.top-users__inner',
  5527.                 '#left-menu',
  5528.                 '.menu-links',
  5529.                 '.menu--stats-mode',
  5530.                 '#left_ad_block',
  5531.                 '#ad_bottom',
  5532.                 '.ad-block',
  5533.                 '#left_ad_block > .right-menu',
  5534.                 '#text-block > .right-menu',
  5535.                 '#sigma-pass .connecting__content',
  5536.                 '#sigma-status',
  5537.                 '.alert',
  5538.             ];
  5539.  
  5540.             const customTextElements = [
  5541.                 '#challenge-coins .alert-heading',
  5542.                 '#sigma-pass h3',
  5543.                 '.alert *',
  5544.             ];
  5545.  
  5546.             let checkInterval;
  5547.             const appliedElements = new Set();
  5548.  
  5549.             window.themeElements = elements;
  5550.  
  5551.             const themeEditor = document.createElement('div');
  5552.             themeEditor.classList.add('themeEditor');
  5553.             themeEditor.style.display = 'none';
  5554.  
  5555.             themeEditor.innerHTML = `
  5556.                 <div class="theme_editor_header">
  5557.                     <h3>Theme Editor</h3>
  5558.                     <button class="btn closeBtn" id="closeThemeEditor">
  5559.                         <svg width="22" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  5560.                             <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>
  5561.                         </svg>
  5562.                     </button>
  5563.                 </div>
  5564.                 <hr />
  5565.                 <main class="theme_editor_content">
  5566.                     <div class="centerXY" style="justify-content: flex-end;gap: 10px">
  5567.                         <span class="text">Select Theme Type: </span>
  5568.                         <select class="form-control" style="background: #222; color: #fff; width: 150px" id="theme-type-select">
  5569.                             <option>Static Color</option>
  5570.                             <option>Gradient</option>
  5571.                             <option>Image / Gif</option>
  5572.                         </select>
  5573.                     </div>
  5574.  
  5575.                     <div id="theme_editor_color" class="theme-editor-tab">
  5576.                         <div class="centerXY">
  5577.                             <label for="theme-editor-bgcolorinput" class="text">Background color:</label>
  5578.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-bgcolorinput"/>
  5579.                         </div>
  5580.                         <div class="centerXY">
  5581.                             <label for="theme-editor-colorinput" class="text">Text color:</label>
  5582.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-colorinput"/>
  5583.                         </div>
  5584.                         <div style="background-color: #000000" class="themes_preview" id="color_preview">
  5585.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5586.                         </div>
  5587.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5588.                             <input type="text" class="form-control" style="background: #222; color: #fff;" maxlength="15" placeholder="Theme name..." id="colorThemeName"/>
  5589.                             <button class="btn btn-success" id="saveColorTheme">Save</button>
  5590.                         </div>
  5591.                     </div>
  5592.  
  5593.  
  5594.                     <div id="theme_editor_gradient" class="theme-editor-tab" style="display: none;">
  5595.                         <div class="centerXY">
  5596.                             <label for="theme-editor-gcolor1" class="text">Color 1:</label>
  5597.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-gcolor1"/>
  5598.                         </div>
  5599.                         <div class="centerXY">
  5600.                             <label for="theme-editor-g_color" class="text">Color 2:</label>
  5601.                             <input type="color" value="#ffffff" class="colorInput whiteBorder_colorInput" id="theme-editor-g_color"/>
  5602.                         </div>
  5603.                         <div class="centerXY">
  5604.                             <label for="theme-editor-gcolor2" class="text">Text Color:</label>
  5605.                             <input type="color" value="#ffffff" class="colorInput whiteBorder_colorInput" id="theme-editor-gcolor2"/>
  5606.                         </div>
  5607.  
  5608.                         <div class="centerXY" style="gap: 10px">
  5609.                             <label for="gradient-type" class="text">Gradient Type:</label>
  5610.                             <select id="gradient-type" class="form-control" style="background: #222; color: #fff; width: 120px;">
  5611.                                 <option value="linear">Linear</option>
  5612.                                 <option value="radial">Radial</option>
  5613.                             </select>
  5614.                         </div>
  5615.  
  5616.                         <div id="theme-editor-gradient_angle" class="centerY" style="gap: 10px; width: 100%">
  5617.                             <label for="g_angle" class="text" id="gradient_angle_text" style="width: 115px;">Angle (0deg):</label>
  5618.                             <input type="range" id="g_angle" value="0" min="0" max="360">
  5619.                         </div>
  5620.  
  5621.                         <div style="background: linear-gradient(0deg, #000, #fff)" class="themes_preview" id="gradient_preview">
  5622.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5623.                         </div>
  5624.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5625.                             <input type="text" class="form-control" style="background: #222; color: #fff;" placeholder="Theme name..." id="GradientThemeName"/>
  5626.                             <button class="btn btn-success" id="saveGradientTheme">Save</button>
  5627.                         </div>
  5628.                     </div>
  5629.  
  5630.                     <div id="theme_editor_image" class="theme-editor-tab" style="display: none">
  5631.                         <div class="centerXY">
  5632.                             <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"/>
  5633.                         </div>
  5634.                         <div class="centerXY" style="margin: 5px; gap: 5px;">
  5635.                             <label for="theme-editor-textcolorImage" class="text">Text Color: </label>
  5636.                             <input type="color" class="colorInput whiteBorder_colorInput" value="#ffffff" id="theme-editor-textcolorImage"/>
  5637.                         </div>
  5638.  
  5639.                         <div style="background: url('https://i.ibb.co/k6hn4v0/Galaxy-Example.png'); background-position: center; background-size: cover;" class="themes_preview" id="image_preview">
  5640.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5641.                         </div>
  5642.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5643.                             <input type="text" class="form-control" style="background: #222; color: #fff;" placeholder="Theme name..." id="imageThemeName"/>
  5644.                             <button class="btn btn-success" id="saveImageTheme">Save</button>
  5645.                         </div>
  5646.                     </div>
  5647.                 </main>
  5648.             `;
  5649.  
  5650.             document.body.append(themeEditor);
  5651.  
  5652.             setTimeout(() => {
  5653.                 document
  5654.                     .querySelectorAll('.stats-btn__share-btn')[1]
  5655.                     .querySelector('rect')
  5656.                     .remove();
  5657.  
  5658.                 const themeTypeSelect = byId('theme-type-select');
  5659.                 const colorTab = byId('theme_editor_color');
  5660.                 const gradientTab = byId('theme_editor_gradient');
  5661.                 const imageTab = byId('theme_editor_image');
  5662.                 const gradientAngleDiv = byId('theme-editor-gradient_angle');
  5663.  
  5664.                 themeTypeSelect.addEventListener('change', function () {
  5665.                     const selectedOption = themeTypeSelect.value;
  5666.                     switch (selectedOption) {
  5667.                         case 'Static Color':
  5668.                             colorTab.style.display = 'flex';
  5669.                             gradientTab.style.display = 'none';
  5670.                             imageTab.style.display = 'none';
  5671.                             break;
  5672.                         case 'Gradient':
  5673.                             colorTab.style.display = 'none';
  5674.                             gradientTab.style.display = 'flex';
  5675.                             imageTab.style.display = 'none';
  5676.                             break;
  5677.                         case 'Image / Gif':
  5678.                             colorTab.style.display = 'none';
  5679.                             gradientTab.style.display = 'none';
  5680.                             imageTab.style.display = 'flex';
  5681.                             break;
  5682.                         default:
  5683.                             colorTab.style.display = 'flex';
  5684.                             gradientTab.style.display = 'none';
  5685.                             imageTab.style.display = 'none';
  5686.                     }
  5687.                 });
  5688.  
  5689.                 const colorInputs = document.querySelectorAll(
  5690.                     '#theme_editor_color .colorInput'
  5691.                 );
  5692.                 colorInputs.forEach((input) => {
  5693.                     input.addEventListener('input', function () {
  5694.                         const bgColorInput = byId(
  5695.                             'theme-editor-bgcolorinput'
  5696.                         ).value;
  5697.                         const textColorInput = byId(
  5698.                             'theme-editor-colorinput'
  5699.                         ).value;
  5700.  
  5701.                         applyColorTheme(bgColorInput, textColorInput);
  5702.                     });
  5703.                 });
  5704.  
  5705.                 const gradientInputs = document.querySelectorAll(
  5706.                     '#theme_editor_gradient .colorInput'
  5707.                 );
  5708.                 gradientInputs.forEach((input) => {
  5709.                     input.addEventListener('input', function () {
  5710.                         const gColor1 = byId('theme-editor-gcolor1').value;
  5711.                         const gColor2 = byId('theme-editor-g_color').value;
  5712.                         const gTextColor = byId('theme-editor-gcolor2').value;
  5713.                         const gAngle = byId('g_angle').value;
  5714.                         const gradientType = byId('gradient-type').value;
  5715.  
  5716.                         applyGradientTheme(
  5717.                             gColor1,
  5718.                             gColor2,
  5719.                             gTextColor,
  5720.                             gAngle,
  5721.                             gradientType
  5722.                         );
  5723.                     });
  5724.                 });
  5725.  
  5726.                 const imageInputs = document.querySelectorAll(
  5727.                     '#theme_editor_image .colorInput'
  5728.                 );
  5729.                 imageInputs.forEach((input) => {
  5730.                     input.addEventListener('input', function () {
  5731.                         const imageLinkInput = byId(
  5732.                             'theme-editor-imagelink'
  5733.                         ).value;
  5734.                         const textColorImageInput = byId(
  5735.                             'theme-editor-textcolorImage'
  5736.                         ).value;
  5737.  
  5738.                         let img;
  5739.                         if (imageLinkInput === '') {
  5740.                             img = 'https://i.ibb.co/k6hn4v0/Galaxy-Example.png';
  5741.                         } else {
  5742.                             img = imageLinkInput;
  5743.                         }
  5744.                         applyImageTheme(img, textColorImageInput);
  5745.                     });
  5746.                 });
  5747.                 const image_preview = byId('image_preview');
  5748.                 const image_link = byId('theme-editor-imagelink');
  5749.  
  5750.                 let isWriting = false;
  5751.                 let timeoutId;
  5752.  
  5753.                 image_link.addEventListener('input', () => {
  5754.                     if (!isWriting) {
  5755.                         isWriting = true;
  5756.                     } else {
  5757.                         clearTimeout(timeoutId);
  5758.                     }
  5759.  
  5760.                     timeoutId = setTimeout(() => {
  5761.                         const imageLinkInput = image_link.value;
  5762.                         const textColorImageInput = byId(
  5763.                             'theme-editor-textcolorImage'
  5764.                         ).value;
  5765.  
  5766.                         let img;
  5767.                         if (imageLinkInput === '') {
  5768.                             img = 'https://i.ibb.co/k6hn4v0/Galaxy-Example.png';
  5769.                         } else {
  5770.                             img = imageLinkInput;
  5771.                         }
  5772.  
  5773.                         applyImageTheme(img, textColorImageInput);
  5774.                         isWriting = false;
  5775.                     }, 1000);
  5776.                 });
  5777.  
  5778.                 const gradientTypeSelect = byId('gradient-type');
  5779.                 const angleInput = byId('g_angle');
  5780.  
  5781.                 gradientTypeSelect.addEventListener('change', function () {
  5782.                     const selectedType = gradientTypeSelect.value;
  5783.                     gradientAngleDiv.style.display =
  5784.                         selectedType === 'linear' ? 'flex' : 'none';
  5785.  
  5786.                     const gColor1 = byId('theme-editor-gcolor1').value;
  5787.                     const gColor2 = byId('theme-editor-g_color').value;
  5788.                     const gTextColor = byId('theme-editor-gcolor2').value;
  5789.                     const gAngle = byId('g_angle').value;
  5790.  
  5791.                     applyGradientTheme(
  5792.                         gColor1,
  5793.                         gColor2,
  5794.                         gTextColor,
  5795.                         gAngle,
  5796.                         selectedType
  5797.                     );
  5798.                 });
  5799.  
  5800.                 angleInput.addEventListener('input', function () {
  5801.                     const gradient_angle_text = byId('gradient_angle_text');
  5802.                     gradient_angle_text.innerText = `Angle (${angleInput.value}deg): `;
  5803.                     const gColor1 = byId('theme-editor-gcolor1').value;
  5804.                     const gColor2 = byId('theme-editor-g_color').value;
  5805.                     const gTextColor = byId('theme-editor-gcolor2').value;
  5806.                     const gAngle = byId('g_angle').value;
  5807.                     const gradientType = byId('gradient-type').value;
  5808.  
  5809.                     applyGradientTheme(
  5810.                         gColor1,
  5811.                         gColor2,
  5812.                         gTextColor,
  5813.                         gAngle,
  5814.                         gradientType
  5815.                     );
  5816.                 });
  5817.  
  5818.                 function applyColorTheme(bgColor, textColor) {
  5819.                     const previewDivs = document.querySelectorAll(
  5820.                         '#theme_editor_color .themes_preview'
  5821.                     );
  5822.                     previewDivs.forEach((previewDiv) => {
  5823.                         previewDiv.style.backgroundColor = bgColor;
  5824.                         const textSpan = previewDiv.querySelector('span.text');
  5825.                         textSpan.style.color = textColor;
  5826.                     });
  5827.                 }
  5828.  
  5829.                 function applyGradientTheme(
  5830.                 gColor1,
  5831.                  gColor2,
  5832.                  gTextColor,
  5833.                  gAngle,
  5834.                  gradientType
  5835.                 ) {
  5836.                     const previewDivs = document.querySelectorAll(
  5837.                         '#theme_editor_gradient .themes_preview'
  5838.                     );
  5839.                     previewDivs.forEach((previewDiv) => {
  5840.                         const gradient =
  5841.                               gradientType === 'linear'
  5842.                         ? `linear-gradient(${gAngle}deg, ${gColor1}, ${gColor2})`
  5843.                         : `radial-gradient(circle, ${gColor1}, ${gColor2})`;
  5844.                         previewDiv.style.background = gradient;
  5845.                         const textSpan = previewDiv.querySelector('span.text');
  5846.                         textSpan.style.color = gTextColor;
  5847.                     });
  5848.                 }
  5849.  
  5850.                 function applyImageTheme(imageLink, textColor) {
  5851.                     const previewDivs = document.querySelectorAll(
  5852.                         '#theme_editor_image .themes_preview'
  5853.                     );
  5854.                     previewDivs.forEach((previewDiv) => {
  5855.                         previewDiv.style.backgroundImage = `url('${imageLink}')`;
  5856.                         const textSpan = previewDiv.querySelector('span.text');
  5857.                         textSpan.style.color = textColor;
  5858.                     });
  5859.                 }
  5860.  
  5861.                 const createTheme = byId('createTheme');
  5862.                 createTheme.addEventListener('click', () => {
  5863.                     themeEditor.style.display = 'block';
  5864.                 });
  5865.  
  5866.                 const closeThemeEditor = byId('closeThemeEditor');
  5867.                 closeThemeEditor.addEventListener('click', () => {
  5868.                     themeEditor.style.display = 'none';
  5869.                 });
  5870.  
  5871.                 let themesDiv = byId('themes');
  5872.  
  5873.                 const saveTheme = (type) => {
  5874.                     const name = byId(`${type}ThemeName`).value;
  5875.                     if (!name) return;
  5876.  
  5877.                     let background, text;
  5878.                     if (type === 'color') {
  5879.                         background = byId('theme-editor-bgcolorinput').value;
  5880.                         text = byId('theme-editor-colorinput').value;
  5881.                     } else if (type === 'gradient') {
  5882.                         const gColor1 = byId('theme-editor-gcolor1').value;
  5883.                         const gColor2 = byId('theme-editor-g_color').value;
  5884.                         text = byId('theme-editor-gcolor2').value;
  5885.                         const gAngle = byId('g_angle').value;
  5886.                         const gradientType = byId('gradient-type').value;
  5887.                         background = gradientType === 'linear'
  5888.                             ? `linear-gradient(${gAngle}deg, ${gColor1}, ${gColor2})`
  5889.                         : `radial-gradient(circle, ${gColor1}, ${gColor2})`;
  5890.                     } else if (type === 'image') {
  5891.                         background = byId('theme-editor-imagelink').value;
  5892.                         text = byId('theme-editor-textcolorImage').value;
  5893.                         if (!background) return;
  5894.                     }
  5895.  
  5896.                     const theme = { name, background, text };
  5897.                     const themeCard = document.createElement('div');
  5898.                     themeCard.classList.add('theme');
  5899.                     themeCard.innerHTML = `
  5900.                         <div class="themeContent" style="background: ${background.includes('http') ? `url(${theme.preview || background})` : background}; background-size: cover; background-position: center"></div>
  5901.                         <div class="themeName text" style="color: #fff">${name}</div>
  5902.                     `;
  5903.  
  5904.                     themeCard.addEventListener('click', () => toggleTheme(theme));
  5905.                     themeCard.addEventListener('contextmenu', (ev) => {
  5906.                         ev.preventDefault();
  5907.                         if (confirm('Do you want to delete this Theme?')) {
  5908.                             themeCard.remove();
  5909.                             const index = modSettings.themes.custom.findIndex(t => t.name === name);
  5910.                             if (index !== -1) {
  5911.                                 modSettings.themes.custom.splice(index, 1);
  5912.                                 updateStorage();
  5913.                             }
  5914.                         }
  5915.                     });
  5916.  
  5917.                     themesDiv.appendChild(themeCard);
  5918.                     modSettings.themes.custom.push(theme);
  5919.                     updateStorage();
  5920.                     themeEditor.style.display = 'none';
  5921.                     themesDiv.scrollTop = themesDiv.scrollHeight;
  5922.                 };
  5923.  
  5924.                 byId('saveColorTheme').addEventListener('click', () => saveTheme('color'));
  5925.                 byId('saveGradientTheme').addEventListener('click', () => saveTheme('gradient'));
  5926.                 byId('saveImageTheme').addEventListener('click', () => saveTheme('image'));
  5927.             });
  5928.  
  5929.             const b_inner = document.querySelector('.body__inner');
  5930.             let bodyColorElements = b_inner.querySelectorAll(
  5931.                 '.body__inner > :not(.body__inner), #s-skin-select-icon-text'
  5932.             );
  5933.  
  5934.             const toggleColor = (element, background, text) => {
  5935.                 let image = `url("${background}")`;
  5936.                 if (background.includes('http')) {
  5937.                     element.style.background = image;
  5938.                     element.style.backgroundPosition = 'center';
  5939.                     element.style.backgroundSize = 'cover';
  5940.                     element.style.backgroundRepeat = 'no-repeat';
  5941.                 } else {
  5942.                     element.style.background = background;
  5943.                     element.style.backgroundRepeat = 'no-repeat';
  5944.                 }
  5945.                 element.style.color = text;
  5946.             };
  5947.  
  5948.             const openSVG = document.querySelector(
  5949.                 '#clans_and_settings > Button:nth-of-type(2) > svg'
  5950.             );
  5951.             const openSVGPath = openSVG.querySelector('path');
  5952.             openSVG.setAttribute('width', '36');
  5953.             openSVG.setAttribute('height', '36');
  5954.  
  5955.             const applyThemeToElement = (el, theme) => {
  5956.                 if (el.matches('#title')) {
  5957.                     el.style.color = theme.text;
  5958.                 } else {
  5959.                     toggleColor(el, theme.background, theme.text);
  5960.                 }
  5961.                 appliedElements.add(el);
  5962.             };
  5963.  
  5964.             const toggleTheme = (theme) => {
  5965.                 try {
  5966.                     if (checkInterval) clearInterval(checkInterval);
  5967.                     appliedElements.clear();
  5968.  
  5969.                     const applyTheme = () => {
  5970.                         let allApplied = true;
  5971.  
  5972.                         elements.forEach((selector) => {
  5973.                             const elements =
  5974.                                   document.querySelectorAll(selector);
  5975.                             elements.forEach((el) => {
  5976.                                 if (el && !appliedElements.has(el)) {
  5977.                                     applyThemeToElement(el, theme);
  5978.                                     allApplied = false;
  5979.                                 }
  5980.                             });
  5981.                         });
  5982.  
  5983.                         customTextElements.forEach((qs) => {
  5984.                             document.querySelectorAll(qs).forEach((el) => {
  5985.                                 if (!appliedElements.has(el)) {
  5986.                                     el.style.setProperty(
  5987.                                         'color',
  5988.                                         theme.text,
  5989.                                         'important'
  5990.                                     );
  5991.                                     appliedElements.add(el);
  5992.                                     allApplied = false;
  5993.                                 }
  5994.                             });
  5995.                         });
  5996.  
  5997.                         bodyColorElements.forEach((el) => {
  5998.                             if (!appliedElements.has(el)) {
  5999.                                 el.style.color = theme.text;
  6000.                                 appliedElements.add(el);
  6001.                                 allApplied = false;
  6002.                             }
  6003.                         });
  6004.  
  6005.                         if (allApplied) {
  6006.                             clearInterval(checkInterval);
  6007.                             return;
  6008.                         }
  6009.  
  6010.                         const isBright = (color) => {
  6011.                             if (!color.startsWith('#') || color.length !== 7)
  6012.                                 return false;
  6013.                             const r = parseInt(color.slice(1, 3), 16);
  6014.                             const g = parseInt(color.slice(3, 5), 16);
  6015.                             const b = parseInt(color.slice(5, 7), 16);
  6016.                             return r * 0.299 + g * 0.587 + b * 0.114 > 186;
  6017.                         };
  6018.  
  6019.                         openSVGPath.setAttribute(
  6020.                             'fill',
  6021.                             isBright(theme.text) ? theme.text : '#222'
  6022.                         );
  6023.  
  6024.                         modSettings.themes.current = theme.name;
  6025.                         updateStorage();
  6026.                     };
  6027.  
  6028.                     checkInterval = setInterval(applyTheme, 100);
  6029.                 } catch (e) {
  6030.                     console.error(e);
  6031.                 }
  6032.             };
  6033.  
  6034.             const themes = (window.themes = {
  6035.                 defaults: [
  6036.                     {
  6037.                         name: 'Dark',
  6038.                         background: '#151515',
  6039.                         text: '#FFFFFF',
  6040.                     },
  6041.                     {
  6042.                         name: 'White',
  6043.                         background: '#ffffff',
  6044.                         text: '#000000',
  6045.                     },
  6046.                     {
  6047.                         name: 'Transparent',
  6048.                         background: 'rgba(0, 0, 0,0)',
  6049.                         text: '#FFFFFF',
  6050.                     },
  6051.                 ],
  6052.                 orderly: [
  6053.                     {
  6054.                         name: 'THC',
  6055.                         background: 'linear-gradient(160deg, #9BEC7A, #117500)',
  6056.                         text: '#000000',
  6057.                     },
  6058.                     {
  6059.                         name: '4 AM',
  6060.                         background: 'linear-gradient(160deg, #8B0AE1, #111)',
  6061.                         text: '#FFFFFF',
  6062.                     },
  6063.                     {
  6064.                         name: 'OTO',
  6065.                         background: 'linear-gradient(160deg, #A20000, #050505)',
  6066.                         text: '#FFFFFF',
  6067.                     },
  6068.                     {
  6069.                         name: 'Gaming',
  6070.                         background:
  6071.                         'https://i.ibb.co/DwKkQfh/BG-1-lower-quality.jpg',
  6072.                         text: '#FFFFFF',
  6073.                     },
  6074.                     {
  6075.                         name: 'Shapes',
  6076.                         background: 'https://i.ibb.co/h8TmVyM/BG-2.png',
  6077.                         preview:
  6078.                         'https://czrsd.com/static/sigmod/themes/BG-2.jpg',
  6079.                         text: '#FFFFFF',
  6080.                     },
  6081.                     {
  6082.                         name: 'Blue',
  6083.                         background: 'https://i.ibb.co/9yQBfWj/BG-3.png',
  6084.                         preview:
  6085.                         'https://czrsd.com/static/sigmod/themes/BG-3.jpg',
  6086.                         text: '#FFFFFF',
  6087.                     },
  6088.                     {
  6089.                         name: 'Blue - 2',
  6090.                         background: 'https://i.ibb.co/7RJvNCX/BG-4.png',
  6091.                         preview:
  6092.                         'https://czrsd.com/static/sigmod/themes/BG-4.jpg',
  6093.                         text: '#FFFFFF',
  6094.                     },
  6095.                     {
  6096.                         name: 'Purple',
  6097.                         background: 'https://i.ibb.co/vxY15Tv/BG-5.png',
  6098.                         preview:
  6099.                         'https://czrsd.com/static/sigmod/themes/BG-5.jpg',
  6100.                         text: '#FFFFFF',
  6101.                     },
  6102.                     {
  6103.                         name: 'Orange Blue',
  6104.                         background: 'https://i.ibb.co/99nfFBN/BG-6.png',
  6105.                         preview:
  6106.                         'https://czrsd.com/static/sigmod/themes/BG-6.jpg',
  6107.                         text: '#FFFFFF',
  6108.                     },
  6109.                     {
  6110.                         name: 'Gradient',
  6111.                         background: 'https://i.ibb.co/hWMLwLS/BG-7.png',
  6112.                         preview:
  6113.                         'https://czrsd.com/static/sigmod/themes/BG-7.jpg',
  6114.                         text: '#FFFFFF',
  6115.                     },
  6116.                     {
  6117.                         name: 'Sky',
  6118.                         background: 'https://i.ibb.co/P4XqDFw/BG-9.png',
  6119.                         preview:
  6120.                         'https://czrsd.com/static/sigmod/themes/BG-9.jpg',
  6121.                         text: '#000000',
  6122.                     },
  6123.                     {
  6124.                         name: 'Sunset',
  6125.                         background: 'https://i.ibb.co/0BVbYHC/BG-10.png',
  6126.                         preview:
  6127.                         'https://czrsd.com/static/sigmod/themes/BG-10.jpg',
  6128.                         text: '#FFFFFF',
  6129.                     },
  6130.                     {
  6131.                         name: 'Galaxy',
  6132.                         background: 'https://i.ibb.co/MsssDKP/Galaxy.png',
  6133.                         preview:
  6134.                         'https://czrsd.com/static/sigmod/themes/Galaxy.jpg',
  6135.                         text: '#FFFFFF',
  6136.                     },
  6137.                     {
  6138.                         name: 'Planet',
  6139.                         background: 'https://i.ibb.co/KLqWM32/Planet.png',
  6140.                         preview:
  6141.                         'https://czrsd.com/static/sigmod/themes/Planet.jpg',
  6142.                         text: '#FFFFFF',
  6143.                     },
  6144.                     {
  6145.                         name: 'colorful',
  6146.                         background: 'https://i.ibb.co/VqtB3TX/colorful.png',
  6147.                         preview:
  6148.                         'https://czrsd.com/static/sigmod/themes/colorful.jpg',
  6149.                         text: '#FFFFFF',
  6150.                     },
  6151.                     {
  6152.                         name: 'Sunset - 2',
  6153.                         background: 'https://i.ibb.co/TLp2nvv/Sunset.png',
  6154.                         preview:
  6155.                         'https://czrsd.com/static/sigmod/themes/Sunset.jpg',
  6156.                         text: '#FFFFFF',
  6157.                     },
  6158.                     {
  6159.                         name: 'Epic',
  6160.                         background: 'https://i.ibb.co/kcv4tvn/Epic.png',
  6161.                         preview:
  6162.                         'https://czrsd.com/static/sigmod/themes/Epic.jpg',
  6163.                         text: '#FFFFFF',
  6164.                     },
  6165.                     {
  6166.                         name: 'Galaxy - 2',
  6167.                         background: 'https://i.ibb.co/smRs6V0/galaxy.png',
  6168.                         preview:
  6169.                         'https://czrsd.com/static/sigmod/themes/galaxy2.jpg',
  6170.                         text: '#FFFFFF',
  6171.                     },
  6172.                     {
  6173.                         name: 'Cloudy',
  6174.                         background: 'https://i.ibb.co/MCW7Bcd/cloudy.png',
  6175.                         preview:
  6176.                         'https://czrsd.com/static/sigmod/themes/cloudy.jpg',
  6177.                         text: '#000000',
  6178.                     },
  6179.                 ],
  6180.             });
  6181.  
  6182.             function createThemeCard(theme) {
  6183.                 const themeCard = document.createElement('div');
  6184.                 themeCard.classList.add('theme');
  6185.                 let themeBG;
  6186.                 if (theme.background.includes('http')) {
  6187.                     themeBG = `background: url(${
  6188.                     theme.preview || theme.background
  6189.                 })`;
  6190.                 } else {
  6191.                     themeBG = `background: ${theme.background}`;
  6192.                 }
  6193.                 themeCard.innerHTML = `
  6194.                   <div class="themeContent" style="${themeBG}; background-size: cover; background-position: center"></div>
  6195.                   <div class="themeName text" style="color: #fff">${theme.name}</div>
  6196.                 `;
  6197.  
  6198.                 themeCard.addEventListener('click', () => {
  6199.                     toggleTheme(theme);
  6200.                 });
  6201.  
  6202.                 if (modSettings.themes.custom.includes(theme)) {
  6203.                     themeCard.addEventListener(
  6204.                         'contextmenu',
  6205.                         (ev) => {
  6206.                             ev.preventDefault();
  6207.                             if (confirm('Do you want to delete this Theme?')) {
  6208.                                 themeCard.remove();
  6209.                                 const themeIndex =
  6210.                                       modSettings.themes.custom.findIndex(
  6211.                                           (addedTheme) =>
  6212.                                           addedTheme.name === theme.name
  6213.                                       );
  6214.                                 if (themeIndex !== -1) {
  6215.                                     modSettings.themes.custom.splice(
  6216.                                         themeIndex,
  6217.                                         1
  6218.                                     );
  6219.                                     updateStorage();
  6220.                                 }
  6221.                             }
  6222.                         },
  6223.                         false
  6224.                     );
  6225.                 }
  6226.  
  6227.                 return themeCard;
  6228.             }
  6229.  
  6230.             const themesContainer = byId('themes');
  6231.  
  6232.             themes.defaults.forEach((theme) => {
  6233.                 const themeCard = createThemeCard(theme);
  6234.                 themesContainer.append(themeCard);
  6235.             });
  6236.  
  6237.             const orderlyThemes = [
  6238.                 ...themes.orderly,
  6239.                 ...modSettings.themes.custom,
  6240.             ];
  6241.             orderlyThemes.sort((a, b) => a.name.localeCompare(b.name));
  6242.             orderlyThemes.forEach((theme) => {
  6243.                 const themeCard = createThemeCard(theme);
  6244.                 themesContainer.appendChild(themeCard);
  6245.             });
  6246.  
  6247.             const savedTheme = modSettings.themes.current;
  6248.             if (savedTheme) {
  6249.                 let selectedTheme;
  6250.                 selectedTheme = themes.defaults.find(
  6251.                     (theme) => theme.name === savedTheme
  6252.                 );
  6253.                 if (!selectedTheme) {
  6254.                     selectedTheme =
  6255.                         themes.orderly.find(
  6256.                         (theme) => theme.name === savedTheme
  6257.                     ) ||
  6258.                         modSettings.themes.custom.find(
  6259.                         (theme) => theme.name === savedTheme
  6260.                     );
  6261.                 }
  6262.  
  6263.                 if (selectedTheme) {
  6264.                     toggleTheme(selectedTheme);
  6265.                 }
  6266.             }
  6267.  
  6268.             const inputBorderRadius = byId('theme-inputBorderRadius');
  6269.             const menuBorderRadius = byId('theme-menuBorderRadius');
  6270.             const inputBorder = byId('theme-inputBorder');
  6271.  
  6272.             function setCSS(key, value, targets, property) {
  6273.                 modSettings.themes[key] = value;
  6274.                 targets.forEach((target) => {
  6275.                     document
  6276.                         .querySelectorAll(target)
  6277.                         .forEach((el) => (el.style[property] = value));
  6278.                 });
  6279.                 updateStorage();
  6280.             }
  6281.  
  6282.             inputBorderRadius.value = modSettings.themes.inputBorderRadius
  6283.                 ? modSettings.themes.inputBorderRadius.replace('px', '')
  6284.             : '4';
  6285.             menuBorderRadius.value = modSettings.themes.menuBorderRadius
  6286.                 ? modSettings.themes.menuBorderRadius.replace('px', '')
  6287.             : '15';
  6288.             inputBorder.checked = modSettings.themes.inputBorder
  6289.                 ? modSettings.themes.inputBorder === '1px'
  6290.             : '1px';
  6291.  
  6292.             setCSS(
  6293.                 'inputBorderRadius',
  6294.                 `${inputBorderRadius.value}px`,
  6295.                 ['.form-control'],
  6296.                 'borderRadius'
  6297.             );
  6298.             setCSS(
  6299.                 'menuBorderRadius',
  6300.                 `${menuBorderRadius.value}px`,
  6301.                 [...elements, '.text-block'],
  6302.                 'borderRadius'
  6303.             );
  6304.             setCSS(
  6305.                 'inputBorder',
  6306.                 inputBorder.checked ? '1px' : '0px',
  6307.                 ['.form-control'],
  6308.                 'borderWidth'
  6309.             );
  6310.  
  6311.             inputBorderRadius.addEventListener('input', () =>
  6312.                                                setCSS(
  6313.                 'inputBorderRadius',
  6314.                 `${inputBorderRadius.value}px`,
  6315.                 ['.form-control'],
  6316.                 'borderRadius'
  6317.             )
  6318.                                               );
  6319.             menuBorderRadius.addEventListener('input', () =>
  6320.                                               setCSS(
  6321.                 'menuBorderRadius',
  6322.                 `${menuBorderRadius.value}px`,
  6323.                 [...elements, '.text-block'],
  6324.                 'borderRadius'
  6325.             )
  6326.                                              );
  6327.             inputBorder.addEventListener('input', () =>
  6328.                                          setCSS(
  6329.                 'inputBorder',
  6330.                 inputBorder.checked ? '1px' : '0px',
  6331.                 ['.form-control'],
  6332.                 'borderWidth'
  6333.             )
  6334.                                         );
  6335.  
  6336.             const reset_input_radius = document.getElementById('reset_input_radius');
  6337.             const reset_menu_radius = document.getElementById('reset_menu_radius');
  6338.  
  6339.             reset_input_radius.addEventListener('click', () => {
  6340.                 const defaultBorderRadius = 4;
  6341.                 inputBorderRadius.value = defaultBorderRadius;
  6342.                 setCSS(
  6343.                     'inputBorderRadius',
  6344.                     `${defaultBorderRadius}px`,
  6345.                     ['.form-control'],
  6346.                     'borderRadius'
  6347.                 )
  6348.             });
  6349.  
  6350.             reset_menu_radius.addEventListener('click', () => {
  6351.                 const defaultBorderRadius = 15;
  6352.                 menuBorderRadius.value = defaultBorderRadius;
  6353.                 setCSS(
  6354.                     'menuBorderRadius',
  6355.                     `${defaultBorderRadius}px`,
  6356.                     [...elements, '.text-block'],
  6357.                     'borderRadius'
  6358.                 )
  6359.             });
  6360.  
  6361.  
  6362.             const hideDiscordBtns = document.getElementById('hideDiscordBtns');
  6363.             const dclinkdiv = document.getElementById('dclinkdiv');
  6364.  
  6365.             hideDiscordBtns.addEventListener('change', () => {
  6366.                 if (hideDiscordBtns.checked) {
  6367.                     dclinkdiv.classList.add('hidden_full');
  6368.                     modSettings.themes.hideDiscordBtns = true;
  6369.                 } else {
  6370.                     dclinkdiv.classList.remove('hidden_full');
  6371.                     modSettings.themes.hideDiscordBtns = false;
  6372.                 }
  6373.                 updateStorage();
  6374.             });
  6375.  
  6376.             if (modSettings.themes.hideDiscordBtns) {
  6377.                 dclinkdiv.classList.add('hidden_full');
  6378.                 hideDiscordBtns.checked = true;
  6379.             }
  6380.  
  6381.  
  6382.             const hideLangs = document.getElementById('hideLangs');
  6383.             const langsDiv = document.querySelector('.ch-lang');
  6384.  
  6385.             hideLangs.addEventListener('change', () => {
  6386.                 if (hideLangs.checked) {
  6387.                     langsDiv.classList.add('hidden_full');
  6388.                     modSettings.themes.hideLangs = true;
  6389.                 } else {
  6390.                     langsDiv.classList.remove('hidden_full');
  6391.                     modSettings.themes.hideLangs = false;
  6392.                 }
  6393.                 updateStorage();
  6394.             });
  6395.  
  6396.             if (modSettings.themes.hideLangs && langsDiv) {
  6397.                 langsDiv.classList.add('hidden_full');
  6398.                 hideLangs.checked = true;
  6399.             }
  6400.  
  6401.  
  6402.             const popup = byId('shop-popup');
  6403.             const removeShopPopup = byId('removeShopPopup');
  6404.             removeShopPopup.addEventListener('change', () => {
  6405.                 if (removeShopPopup.checked) {
  6406.                     popup.classList.add('hidden_full');
  6407.                     modSettings.settings.removeShopPopup = true;
  6408.                 } else {
  6409.                     popup.classList.remove('hidden_full');
  6410.                     modSettings.settings.removeShopPopup = false;
  6411.                 }
  6412.                 updateStorage();
  6413.             });
  6414.  
  6415.             if (modSettings.settings.removeShopPopup) {
  6416.                 popup.classList.add('hidden_full');
  6417.                 removeShopPopup.checked = true;
  6418.             }
  6419.         },
  6420.  
  6421.         chat() {
  6422.             const chatDiv = document.createElement('div');
  6423.             chatDiv.classList.add('modChat');
  6424.             chatDiv.innerHTML = `
  6425.                 <div class="modChat__inner">
  6426.                     <button id="scroll-down-btn" class="modButton">↓</button>
  6427.                     <div class="modchat-chatbuttons">
  6428.                         <button class="chatButton" id="mainchat">Main</button>
  6429.                         <button class="chatButton" id="partychat">Party</button>
  6430.                         <span class="tagText"></span>
  6431.                     </div>
  6432.                     <div id="mod-messages" class="scroll"></div>
  6433.                     <div id="chatInputContainer">
  6434.                         <input type="text" id="chatSendInput" class="chatInput" placeholder="Login to use the chat" maxlength="250" minlength="1" disabled />
  6435.                         <button class="chatButton" id="openChatSettings">
  6436.                             <svg width="15" height="15" viewBox="0 0 20 20" fill="#fff" xmlns="http://www.w3.org/2000/svg">
  6437.                                 <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>
  6438.                             </svg>
  6439.                         </button>
  6440.                         <button class="chatButton" id="openEmojiMenu">😎</button>
  6441.                         <button id="sendButton" class="chatButton">
  6442.                             Send
  6443.                             <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/send.svg" width="20" height="20" draggable="false"/>
  6444.                         </button>
  6445.                     </div>
  6446.                 </div>
  6447.             `;
  6448.             document.body.append(chatDiv);
  6449.  
  6450.             const chatContainer = byId('mod-messages');
  6451.             const scrollDownButton = byId('scroll-down-btn');
  6452.  
  6453.             chatContainer.addEventListener('scroll', () => {
  6454.                 if (
  6455.                     chatContainer.scrollHeight - chatContainer.scrollTop >
  6456.                     300
  6457.                 ) {
  6458.                     scrollDownButton.style.display = 'block';
  6459.                 }
  6460.                 if (
  6461.                     chatContainer.scrollHeight - chatContainer.scrollTop <
  6462.                     299 &&
  6463.                     scrollDownButton.style.display === 'block'
  6464.                 ) {
  6465.                     scrollDownButton.style.display = 'none';
  6466.                 }
  6467.             });
  6468.  
  6469.             scrollDownButton.addEventListener('click', () => {
  6470.                 chatContainer.scrollTop = chatContainer.scrollHeight;
  6471.             });
  6472.  
  6473.             const main = byId('mainchat');
  6474.             const party = byId('partychat');
  6475.             main.addEventListener('click', () => {
  6476.                 if (!window.gameSettings.user) {
  6477.                     const chatSendInput = document.querySelector('#chatSendInput');
  6478.                     if (!chatSendInput) return;
  6479.  
  6480.                     chatSendInput.placeholder = 'Login to use the chat';
  6481.                     chatSendInput.disabled = true;
  6482.                 }
  6483.                 if (modSettings.chat.showClientChat) {
  6484.                     byId('mod-messages').innerHTML = '';
  6485.                     modSettings.chat.showClientChat = false;
  6486.                     updateStorage();
  6487.                 }
  6488.             });
  6489.             party.addEventListener('click', () => {
  6490.                 const chatSendInput = document.querySelector('#chatSendInput');
  6491.                 if (chatSendInput) {
  6492.                     chatSendInput.placeholder = 'message...';
  6493.                     chatSendInput.disabled = false;
  6494.                 }
  6495.  
  6496.                 if (!modSettings.chat.showClientChat) {
  6497.                     modSettings.chat.showClientChat = true;
  6498.                     updateStorage();
  6499.                 }
  6500.                 const modMessages = byId('mod-messages');
  6501.                 if (!modSettings.settings.tag) {
  6502.                     modMessages.innerHTML = `
  6503.                         <div class="message">
  6504.                             <span>
  6505.                                 <span style="color: #5a44eb" class="message_name">[SERVER]</span>: You need to be in a tag to use the SigMod party chat.
  6506.                             </span>
  6507.                         </div>
  6508.                     `;
  6509.                 } else {
  6510.                     modMessages.innerHTML = `
  6511.                         <div class="message">
  6512.                             <span>
  6513.                                 <span style="color: #5a44eb" class="message_name">[SERVER]</span>: Welcome to the SigMod party chat!
  6514.                             </span>
  6515.                         </div>
  6516.                     `;
  6517.                 }
  6518.             });
  6519.  
  6520.             if (modSettings.chat.showClientChat) {
  6521.                 const chatSendInput = document.querySelector('#chatSendInput');
  6522.                 if (!chatSendInput) return;
  6523.  
  6524.                 chatSendInput.placeholder = 'message...';
  6525.                 chatSendInput.disabled = false;
  6526.  
  6527.                 setTimeout(() => {
  6528.                     const modMessages = byId('mod-messages');
  6529.                     modMessages.innerHTML = `
  6530.                         <div class="message">
  6531.                             <span>
  6532.                                 <span style="color: #5a44eb" class="message_name">[SERVER]</span>: Welcome to the SigMod party chat!
  6533.                             </span>
  6534.                         </div>
  6535.                     `;
  6536.                 }, 1000);
  6537.             }
  6538.  
  6539.             const text = byId('chatSendInput');
  6540.             const send = byId('sendButton');
  6541.  
  6542.             send.addEventListener('click', () => {
  6543.                 let val = text.value;
  6544.                 if (val === '') return;
  6545.  
  6546.                 if (modSettings.chat.showClientChat) {
  6547.                     if (client?.ws?.readyState !== 1) return;
  6548.                     // party chat message
  6549.                     client.send({
  6550.                         type: 'chat-message',
  6551.                         content: {
  6552.                             message: val,
  6553.                         },
  6554.                     });
  6555.                 } else {
  6556.                     // Sigmally chat message: split text into parts if message is longer than 15 characters
  6557.                     if (val.length > 15) {
  6558.                         const parts = [];
  6559.                         let currentPart = '';
  6560.  
  6561.                         // split the input value into individual words
  6562.                         val.split(' ').forEach((word) => {
  6563.                             if (currentPart.length + word.length + 1 <= 15) {
  6564.                                 currentPart += (currentPart ? ' ' : '') + word;
  6565.                             } else {
  6566.                                 parts.push(currentPart);
  6567.                                 currentPart = word;
  6568.                             }
  6569.                         });
  6570.  
  6571.                         if (currentPart) {
  6572.                             parts.push(currentPart);
  6573.                         }
  6574.  
  6575.                         let index = 0;
  6576.                         const sendPart = () => {
  6577.                             if (index < parts.length) {
  6578.                                 window.sendChat(parts[index]);
  6579.                                 index++;
  6580.                                 setTimeout(sendPart, 1000); // 1s cooldown from sigmally
  6581.                             }
  6582.                         };
  6583.  
  6584.                         sendPart();
  6585.                     } else {
  6586.                         window.sendChat(val);
  6587.                     }
  6588.                 }
  6589.  
  6590.                 text.value = '';
  6591.                 text.blur();
  6592.             });
  6593.  
  6594.             this.chatSettings();
  6595.             this.emojiMenu();
  6596.             this.getBlockedChatData();
  6597.  
  6598.             const chatSettingsContainer = document.querySelector(
  6599.                 '.chatSettingsContainer'
  6600.             );
  6601.             const emojisContainer = document.querySelector('.emojisContainer');
  6602.  
  6603.             byId('openChatSettings').addEventListener('click', () => {
  6604.                 if (chatSettingsContainer.classList.contains('hidden_full')) {
  6605.                     chatSettingsContainer.classList.remove('hidden_full');
  6606.                     emojisContainer.classList.add('hidden_full');
  6607.                 } else {
  6608.                     chatSettingsContainer.classList.add('hidden_full');
  6609.                 }
  6610.             });
  6611.  
  6612.             const scrollUpButton = byId('scroll-down-btn');
  6613.             let focused = false;
  6614.             let typed = false;
  6615.  
  6616.             document.addEventListener('keydown', (e) => {
  6617.                 if (e.key === 'Enter' && text.value.length > 0) {
  6618.                     send.click();
  6619.                     focused = false;
  6620.                     scrollUpButton.click();
  6621.                 } else if (e.key === 'Enter') {
  6622.                     if (
  6623.                         document.activeElement.tagName === 'INPUT' ||
  6624.                         document.activeElement.tagName === 'TEXTAREA'
  6625.                     )
  6626.                         return;
  6627.  
  6628.                     focused ? text.blur() : text.focus();
  6629.                     focused = !focused;
  6630.                 }
  6631.             });
  6632.  
  6633.             text.addEventListener('input', () => {
  6634.                 typed = text.value.length > 1;
  6635.             });
  6636.  
  6637.             text.addEventListener('blur', () => {
  6638.                 focused = false;
  6639.             });
  6640.  
  6641.             text.addEventListener('keydown', (e) => {
  6642.                 const key = e.key.toLowerCase();
  6643.                 if (key === 'w') {
  6644.                     e.stopPropagation();
  6645.                 }
  6646.  
  6647.                 if (key === ' ') {
  6648.                     e.stopPropagation();
  6649.                 }
  6650.             });
  6651.  
  6652.             // switch to compact chat
  6653.             const chatElements = [
  6654.                 '.modChat',
  6655.                 '.emojisContainer',
  6656.                 '.chatSettingsContainer',
  6657.             ];
  6658.  
  6659.             const emojiBtn = byId('openEmojiMenu');
  6660.             const compactChat = byId('compactChat');
  6661.             compactChat.addEventListener('change', () => {
  6662.                 compactChat.checked ? compactMode() : defaultMode();
  6663.             });
  6664.  
  6665.             function compactMode() {
  6666.                 chatElements.forEach((querySelector) => {
  6667.                     const el = document.querySelector(querySelector);
  6668.                     if (el) {
  6669.                         el.classList.add('mod-compact');
  6670.                     }
  6671.                 });
  6672.                 emojiBtn.style.display = 'none';
  6673.  
  6674.                 modSettings.chat.compact = true;
  6675.                 updateStorage();
  6676.             }
  6677.  
  6678.             function defaultMode() {
  6679.                 chatElements.forEach((querySelector) => {
  6680.                     const el = document.querySelector(querySelector);
  6681.                     if (el) {
  6682.                         el.classList.remove('mod-compact');
  6683.                     }
  6684.                 });
  6685.                 emojiBtn.style.display = 'flex';
  6686.  
  6687.                 modSettings.chat.compact = false;
  6688.                 updateStorage();
  6689.             }
  6690.  
  6691.             if (modSettings.chat.compact) compactMode();
  6692.         },
  6693.  
  6694.         spamMessage(name, message) {
  6695.             return (
  6696.                 this.blockedChatData.names.some(n => name.toLowerCase().includes(n.toLowerCase())) ||
  6697.                 this.blockedChatData.messages.some(m => message.toLowerCase().includes(m.toLowerCase()))
  6698.             );
  6699.         },
  6700.  
  6701.         updateChat(data) {
  6702.             const chatContainer = byId('mod-messages');
  6703.             const isScrolledToBottom =
  6704.                   chatContainer.scrollHeight - chatContainer.scrollTop <=
  6705.                   chatContainer.clientHeight + 1;
  6706.             const isNearBottom =
  6707.                   chatContainer.scrollHeight - chatContainer.scrollTop - 200 <=
  6708.                   chatContainer.clientHeight;
  6709.  
  6710.             let { name, message, time = '' } = data;
  6711.             name = noXSS(name);
  6712.             time = data.time !== null ? prettyTime.am_pm(data.time) : '';
  6713.  
  6714.             const color = this.friend_names.has(name)
  6715.             ? this.friends_settings.highlight_color
  6716.             : data.color || '#ffffff';
  6717.             const glow =
  6718.                   this.friend_names.has(name) &&
  6719.                   this.friends_settings.highlight_friends
  6720.             ? `text-shadow: 0 1px 3px ${color}`
  6721.             : '';
  6722.             const id = rdmString(12);
  6723.  
  6724.             const chatMessage = document.createElement('div');
  6725.             chatMessage.classList.add('message');
  6726.             chatMessage.innerHTML = `
  6727.                 <div class="centerXY" style="gap: 3px;">
  6728.                     <div class="flex">
  6729.                         <span style="color: ${color};${glow}" class="message_name" id="${id}">${name}</span>
  6730.                         <span>&#58;</span>
  6731.                     </div>
  6732.                     <span class="chatMessage-text"></span>
  6733.                 </div>
  6734.                 <span class="time">${time}</span>
  6735.             `;
  6736.             chatMessage.querySelector('.chatMessage-text').innerHTML = message;
  6737.  
  6738.             chatContainer.append(chatMessage);
  6739.             if (isScrolledToBottom || isNearBottom)
  6740.                 chatContainer.scrollTop = chatContainer.scrollHeight;
  6741.  
  6742.             if (name === this.nick) return;
  6743.  
  6744.             const nameEl = byId(id);
  6745.             nameEl.addEventListener('mousedown', (e) =>
  6746.                                     this.handleContextMenu(e, name)
  6747.                                    );
  6748.             nameEl.addEventListener('contextmenu', (e) => {
  6749.                 e.preventDefault();
  6750.                 e.stopPropagation();
  6751.             });
  6752.  
  6753.             if (++this.renderedMessages > this.maxChatMessages) {
  6754.                 chatContainer.removeChild(chatContainer.firstChild);
  6755.                 this.renderedMessages--;
  6756.             }
  6757.         },
  6758.  
  6759.         handleContextMenu(e, name) {
  6760.             if (this.onContext || e.button !== 2) return;
  6761.  
  6762.             const contextMenu = document.createElement('div');
  6763.             contextMenu.classList.add('chat-context');
  6764.             contextMenu.innerHTML = `
  6765.                 <span>${name}</span>
  6766.                 <button id="muteButton">Mute</button>
  6767.             `;
  6768.  
  6769.             Object.assign(contextMenu.style, {
  6770.                 top: `${e.clientY - 80}px`,
  6771.                 left: `${e.clientX}px`,
  6772.             });
  6773.  
  6774.             document.body.appendChild(contextMenu);
  6775.             this.onContext = true;
  6776.  
  6777.             byId('muteButton').addEventListener('click', () => {
  6778.                 const confirmMsg =
  6779.                       name === 'Spectator'
  6780.                 ? 'Are you sure you want to mute all spectators until you refresh the page?'
  6781.                 : `Are you sure you want to mute '${name}' until you refresh the page?`;
  6782.  
  6783.                 if (confirm(confirmMsg)) {
  6784.                     this.muteUser(name);
  6785.                     contextMenu.remove();
  6786.                 }
  6787.             });
  6788.  
  6789.             document.addEventListener('click', (event) => {
  6790.                 if (!contextMenu.contains(event.target)) {
  6791.                     this.onContext = false;
  6792.                     contextMenu.remove();
  6793.                 }
  6794.             });
  6795.         },
  6796.  
  6797.         muteUser(name) {
  6798.             this.mutedUsers.push(name);
  6799.  
  6800.             const msgNames = document.querySelectorAll('.message_name');
  6801.             msgNames.forEach((msgName) => {
  6802.                 if (msgName.innerHTML == name) {
  6803.                     const msgParent = msgName.closest('.message');
  6804.                     msgParent.remove();
  6805.                 }
  6806.             });
  6807.         },
  6808.  
  6809.         async getGoogleFonts() {
  6810.             const fontFamilies = await (
  6811.                 await fetch(this.appRoutes.fonts)
  6812.             ).json();
  6813.  
  6814.             return fontFamilies;
  6815.         },
  6816.  
  6817.         async getEmojis() {
  6818.             const response = await fetch(
  6819.                 'https://czrsd.com/static/sigmod/emojis.json'
  6820.             );
  6821.             return await response.json();
  6822.         },
  6823.  
  6824.         emojiMenu() {
  6825.             const updateEmojis = (searchTerm = '') => {
  6826.                 const emojisContainer =
  6827.                       document.querySelector('.emojisContainer');
  6828.                 const categoriesContainer =
  6829.                       emojisContainer.querySelector('#categories');
  6830.  
  6831.                 categoriesContainer.innerHTML = '';
  6832.                 window.emojis.forEach((emojiData) => {
  6833.                     const { emoji, description, category, tags } = emojiData;
  6834.                     if (
  6835.                         !searchTerm ||
  6836.                         tags.some((tag) =>
  6837.                                   tag.includes(searchTerm.toLowerCase())
  6838.                                  )
  6839.                     ) {
  6840.                         let categoryId = category
  6841.                         .replace(/\s+/g, '-')
  6842.                         .replace('&', 'and')
  6843.                         .toLowerCase();
  6844.                         let categoryDiv = categoriesContainer.querySelector(
  6845.                             `#${categoryId}`
  6846.                         );
  6847.                         if (!categoryDiv) {
  6848.                             categoryDiv = document.createElement('div');
  6849.                             categoryDiv.id = categoryId;
  6850.                             categoryDiv.classList.add('category');
  6851.                             categoryDiv.innerHTML = `<span>${category}</span><div class="emojiContainer"></div>`;
  6852.                             categoriesContainer.appendChild(categoryDiv);
  6853.                         }
  6854.                         const emojiContainer =
  6855.                               categoryDiv.querySelector('.emojiContainer');
  6856.                         const emojiDiv = document.createElement('div');
  6857.                         emojiDiv.classList.add('emoji');
  6858.                         emojiDiv.innerHTML = emoji;
  6859.                         emojiDiv.title = `${emoji} - ${description}`;
  6860.                         emojiDiv.addEventListener('click', () => {
  6861.                             const chatInput =
  6862.                                   document.querySelector('#chatSendInput');
  6863.                             chatInput.value += emoji;
  6864.                         });
  6865.                         emojiContainer.appendChild(emojiDiv);
  6866.                     }
  6867.                 });
  6868.             };
  6869.  
  6870.             const emojisContainer = document.createElement('div');
  6871.             emojisContainer.classList.add(
  6872.                 'chatAddedContainer',
  6873.                 'emojisContainer',
  6874.                 'hidden_full'
  6875.             );
  6876.             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>`;
  6877.  
  6878.             const chatInput = emojisContainer.querySelector('#searchEmoji');
  6879.             chatInput.addEventListener('input', (event) => {
  6880.                 const searchTerm = event.target.value.toLowerCase();
  6881.                 updateEmojis(searchTerm);
  6882.             });
  6883.  
  6884.             document.body.append(emojisContainer);
  6885.  
  6886.             const chatSettingsContainer = document.querySelector(
  6887.                 '.chatSettingsContainer'
  6888.             );
  6889.  
  6890.             byId('openEmojiMenu').addEventListener('click', () => {
  6891.                 if (!window.emojis) {
  6892.                     this.getEmojis().then((emojis) => {
  6893.                         window.emojis = emojis;
  6894.                         updateEmojis();
  6895.                     });
  6896.                 }
  6897.  
  6898.                 if (emojisContainer.classList.contains('hidden_full')) {
  6899.                     emojisContainer.classList.remove('hidden_full');
  6900.                     chatSettingsContainer.classList.add('hidden_full');
  6901.                 } else {
  6902.                     emojisContainer.classList.add('hidden_full');
  6903.                 }
  6904.             });
  6905.         },
  6906.  
  6907.         chatSettings() {
  6908.             const menu = document.createElement('div');
  6909.             menu.classList.add(
  6910.                 'chatAddedContainer',
  6911.                 'chatSettingsContainer',
  6912.                 'scroll',
  6913.                 'hidden_full'
  6914.             );
  6915.             menu.innerHTML = `
  6916.                 <div class="modInfoPopup" style="display: none">
  6917.                     <p>Send location in chat with keybind</p>
  6918.                 </div>
  6919.                 <div class="scroll">
  6920.                     <div class="csBlock">
  6921.                         <div class="csBlockTitle">
  6922.                             <span>Keybindings</span>
  6923.                         </div>
  6924.                         <div class="csRow">
  6925.                             <div class="csRowName">
  6926.                                 <span>Location</span>
  6927.                                 <span class="infoIcon">
  6928.                                     <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>
  6929.                                 </span>
  6930.                             </div>
  6931.                             <input type="text" name="location" id="modinput9" class="keybinding" value="${
  6932.             modSettings.macros.keys.location || ''
  6933.         }" placeholder="..." maxlength="1" onfocus="this.select()">
  6934.                         </div>
  6935.                         <div class="csRow">
  6936.                             <div class="csRowName">
  6937.                                 <span>Show / Hide</span>
  6938.                             </div>
  6939.                             <input type="text" name="toggle.chat" id="modinput10" class="keybinding" value="${
  6940.             modSettings.macros.keys.toggle.chat || ''
  6941.         }" placeholder="..." maxlength="1" onfocus="this.select()">
  6942.                         </div>
  6943.                     </div>
  6944.                     <div class="csBlock">
  6945.                         <div class="csBlockTitle">
  6946.                             <span>General</span>
  6947.                         </div>
  6948.                         <div class="csRow">
  6949.                             <div class="csRowName">
  6950.                                 <span>Time</span>
  6951.                             </div>
  6952.                             <div class="modCheckbox">
  6953.                               <input id="showChatTime" type="checkbox" checked />
  6954.                               <label class="cbx" for="showChatTime"></label>
  6955.                             </div>
  6956.                         </div>
  6957.                         <div class="csRow">
  6958.                             <div class="csRowName">
  6959.                                 <span>Name colors</span>
  6960.                             </div>
  6961.                             <div class="modCheckbox">
  6962.                               <input id="showNameColors" type="checkbox" checked />
  6963.                               <label class="cbx" for="showNameColors"></label>
  6964.                             </div>
  6965.                         </div>
  6966.                         <div class="csRow">
  6967.                             <div class="csRowName">
  6968.                                 <span>Party / Main</span>
  6969.                             </div>
  6970.                             <div class="modCheckbox">
  6971.                               <input id="showPartyMain" type="checkbox" checked />
  6972.                               <label class="cbx" for="showPartyMain"></label>
  6973.                             </div>
  6974.                         </div>
  6975.                         <div class="csRow">
  6976.                             <div class="csRowName">
  6977.                                 <span>Blur Tag</span>
  6978.                             </div>
  6979.                             <div class="modCheckbox">
  6980.                               <input id="blurTag" type="checkbox" checked />
  6981.                               <label class="cbx" for="blurTag"></label>
  6982.                             </div>
  6983.                         </div>
  6984.                         <div class="flex f-column g-5 centerXY" style="padding: 0 5px">
  6985.                             <div class="csRowName">
  6986.                                 <span>Location text</span>
  6987.                             </div>
  6988.                           <input type="text" id="locationText" placeholder="{pos}..." value="{pos}" class="form-control" />
  6989.                         </div>
  6990.                     </div>
  6991.                     <div class="csBlock">
  6992.                         <div class="csBlockTitle">
  6993.                             <span>Style</span>
  6994.                         </div>
  6995.                         <div class="csRow">
  6996.                             <div class="csRowName">
  6997.                                 <span>Compact chat</span>
  6998.                             </div>
  6999.                             <div class="modCheckbox">
  7000.                               <input id="compactChat" type="checkbox" ${
  7001.             modSettings.chat.compact ? 'checked' : ''
  7002.         } />
  7003.                               <label class="cbx" for="compactChat"></label>
  7004.                             </div>
  7005.                         </div>
  7006.                         <div class="csRow">
  7007.                             <div class="csRowName">
  7008.                                 <span>Text</span>
  7009.                             </div>
  7010. 							<div id="chatTextColor"></div>
  7011.                         </div>
  7012.                         <div class="csRow">
  7013.                             <div class="csRowName">
  7014.                                 <span>Background</span>
  7015.                             </div>
  7016. 							<div id="chatBackground"></div>
  7017.                         </div>
  7018.                         <div class="csRow">
  7019.                             <div class="csRowName">
  7020.                                 <span>Theme</span>
  7021.                             </div>
  7022. 							<div id="chatThemeChanger"></div>
  7023.                         </div>
  7024.                     </div>
  7025.                 </div>
  7026.             `;
  7027.             document.body.append(menu);
  7028.  
  7029.             const infoIcon = document.querySelector('.infoIcon');
  7030.             const modInfoPopup = document.querySelector('.modInfoPopup');
  7031.             let popupOpen = false;
  7032.  
  7033.             infoIcon.addEventListener('click', (event) => {
  7034.                 event.stopPropagation();
  7035.                 modInfoPopup.style.display = popupOpen ? 'none' : 'block';
  7036.                 popupOpen = !popupOpen;
  7037.             });
  7038.  
  7039.             document.addEventListener('click', (event) => {
  7040.                 if (popupOpen && !modInfoPopup.contains(event.target)) {
  7041.                     modInfoPopup.style.display = 'none';
  7042.                     popupOpen = false;
  7043.                 }
  7044.             });
  7045.  
  7046.             const showChatTime = document.querySelector('#showChatTime');
  7047.             const showNameColors = document.querySelector('#showNameColors');
  7048.  
  7049.             showChatTime.addEventListener('change', () => {
  7050.                 const timeElements = document.querySelectorAll('.time');
  7051.                 if (showChatTime.checked) {
  7052.                     modSettings.chat.showTime = true;
  7053.                     updateStorage();
  7054.                 } else {
  7055.                     modSettings.chat.showTime = false;
  7056.                     if (timeElements) {
  7057.                         timeElements.forEach((el) => (el.innerHTML = ''));
  7058.                     }
  7059.                     updateStorage();
  7060.                 }
  7061.             });
  7062.  
  7063.             showNameColors.addEventListener('change', () => {
  7064.                 const message_names =
  7065.                       document.querySelectorAll('.message_name');
  7066.                 if (showNameColors.checked) {
  7067.                     modSettings.chat.showNameColors = true;
  7068.                     updateStorage();
  7069.                 } else {
  7070.                     modSettings.chat.showNameColors = false;
  7071.                     if (message_names) {
  7072.                         message_names.forEach(
  7073.                             (el) => (el.style.color = '#fafafa')
  7074.                         );
  7075.                     }
  7076.                     updateStorage();
  7077.                 }
  7078.             });
  7079.  
  7080.             // remove old rgba val
  7081.             if (modSettings.chat.bgColor.includes('rgba')) {
  7082.                 modSettings.chat.bgColor = RgbaToHex(modSettings.chat.bgColor);
  7083.             }
  7084.  
  7085.             const modChat = document.querySelector('.modChat');
  7086.             modChat.style.background = modSettings.chat.bgColor;
  7087.  
  7088.             const showPartyMain = document.querySelector('#showPartyMain');
  7089.             const chatHeader = document.querySelector('.modchat-chatbuttons');
  7090.  
  7091.             const changeButtonsState = (show) => {
  7092.                 chatHeader.style.display = show ? 'flex' : 'none';
  7093.                 modChat.style.maxHeight = show ? '285px' : '250px';
  7094.                 modChat.style.minHeight = show ? '285px' : '250px';
  7095.                 const modChatInner = document.querySelector('.modChat__inner');
  7096.                 modChatInner.style.maxHeight = show ? '265px' : '230px';
  7097.                 modChatInner.style.minHeight = show ? '265px' : '230px';
  7098.             };
  7099.  
  7100.             showPartyMain.addEventListener('change', () => {
  7101.                 const show = showPartyMain.checked;
  7102.                 modSettings.chat.showChatButtons = show;
  7103.                 changeButtonsState(show);
  7104.                 updateStorage();
  7105.             });
  7106.  
  7107.             showPartyMain.checked = modSettings.chat.showChatButtons;
  7108.             changeButtonsState(modSettings.chat.showChatButtons);
  7109.  
  7110.             setTimeout(() => {
  7111.                 const blurTag = byId('blurTag');
  7112.                 const tagText = document.querySelector('.tagText');
  7113.                 const tagElement = document.querySelector('#tag');
  7114.                 blurTag.addEventListener('change', () => {
  7115.                     const state = blurTag.checked;
  7116.  
  7117.                     state
  7118.                         ? (tagText.classList.add('blur'),
  7119.                            tagElement.classList.add('blur'))
  7120.                     : (tagText.classList.remove('blur'),
  7121.                        tagElement.classList.remove('blur'));
  7122.                     modSettings.chat.blurTag = state;
  7123.                     updateStorage();
  7124.                 });
  7125.                 blurTag.checked = modSettings.chat.blurTag;
  7126.                 if (modSettings.chat.blurTag) {
  7127.                     tagText.classList.add('blur');
  7128.                     tagElement.classList.add('blur');
  7129.                 }
  7130.             });
  7131.  
  7132.             const locationText = byId('locationText');
  7133.             locationText.addEventListener('input', (e) => {
  7134.                 e.stopPropagation();
  7135.                 modSettings.chat.locationText = locationText.value;
  7136.             });
  7137.             locationText.value = modSettings.chat.locationText || '{pos}';
  7138.         },
  7139.  
  7140.         toggleChat() {
  7141.             const modChat = document.querySelector('.modChat');
  7142.             const modChatAdded = document.querySelectorAll(
  7143.                 '.chatAddedContainer'
  7144.             );
  7145.  
  7146.             const isModChatHidden =
  7147.                   modChat.style.display === 'none' ||
  7148.                   getComputedStyle(modChat).display === 'none';
  7149.  
  7150.             if (isModChatHidden) {
  7151.                 modChat.style.opacity = 0;
  7152.                 modChat.style.display = 'flex';
  7153.  
  7154.                 setTimeout(() => {
  7155.                     modChat.style.opacity = 1;
  7156.                 }, 10);
  7157.             } else {
  7158.                 modChat.style.opacity = 0;
  7159.                 modChatAdded.forEach((container) =>
  7160.                                      container.classList.add('hidden_full')
  7161.                                     );
  7162.  
  7163.                 setTimeout(() => {
  7164.                     modChat.style.display = 'none';
  7165.                 }, 300);
  7166.             }
  7167.         },
  7168.  
  7169.         smallMods() {
  7170.             const modAlert_overlay = document.createElement('div');
  7171.             modAlert_overlay.classList.add('alert_overlay');
  7172.             modAlert_overlay.id = 'modAlert_overlay';
  7173.             document.body.append(modAlert_overlay);
  7174.  
  7175.             const autoRespawn = byId('autoRespawn');
  7176.             if (modSettings.settings.autoRespawn) {
  7177.                 autoRespawn.checked = true;
  7178.             }
  7179.  
  7180.             autoRespawn.addEventListener('change', () => {
  7181.                 modSettings.settings.autoRespawn = autoRespawn.checked;
  7182.                 updateStorage();
  7183.             });
  7184.  
  7185.             const auto = byId('autoClaimCoins');
  7186.             auto.addEventListener('change', () => {
  7187.                 const checked = auto.checked;
  7188.                 modSettings.settings.autoClaimCoins = !!checked;
  7189.                 updateStorage();
  7190.             });
  7191.             if (modSettings.settings.autoClaimCoins) {
  7192.                 auto.checked = true;
  7193.             }
  7194.  
  7195.             const showChallenges = byId('showChallenges');
  7196.             showChallenges.addEventListener('change', () => {
  7197.                 if (showChallenges.checked) {
  7198.                     modSettings.showChallenges = true;
  7199.                 } else {
  7200.                     modSettings.showChallenges = false;
  7201.                 }
  7202.                 updateStorage();
  7203.             });
  7204.             if (modSettings.showChallenges) {
  7205.                 auto.checked = true;
  7206.             }
  7207.  
  7208.             const gameTitle = byId('title');
  7209.  
  7210.             const newTitle = document.createElement('div');
  7211.             newTitle.classList.add('sigmod-title');
  7212.             newTitle.innerHTML = `
  7213.                <h1 id="title">Sigmally</h1>
  7214.                <span id="bycursed">Mod by <a href="https://www.youtube.com/@sigmallyCursed/" target="_blank">Cursed</a></span>
  7215.             `;
  7216.             gameTitle.replaceWith(newTitle);
  7217.  
  7218.             const nickName = byId('nick');
  7219.             nickName.maxLength = 50;
  7220.             nickName.type = 'text';
  7221.  
  7222.             function updNick() {
  7223.                 const nick = nickName.value;
  7224.                 mods.nick = nick;
  7225.                 const welcome = byId('welcomeUser');
  7226.                 if (welcome) {
  7227.                     welcome.innerHTML = `Welcome ${
  7228.                     mods.nick || 'Unnamed'
  7229.                 }, to the SigMod Client!`;
  7230.                 }
  7231.             }
  7232.  
  7233.             nickName.addEventListener('input', () => {
  7234.                 updNick();
  7235.             });
  7236.  
  7237.             updNick();
  7238.  
  7239.             // Better grammar in the descriptions of the challenges
  7240.             setTimeout(() => {
  7241.                 window.shopLocales.challenge_tab.tasks = {
  7242.                     eaten: 'Eat %n food in a game.',
  7243.                     xp: 'Get %n XP in a game.',
  7244.                     alive: 'Stay alive for %n minutes in a game.',
  7245.                     pos: 'Reach top %n on leaderboard.',
  7246.                 };
  7247.             }, 1000);
  7248.  
  7249.             const topusersInner = document.querySelector('.top-users__inner');
  7250.             topusersInner.classList.add('scroll');
  7251.             topusersInner.style.border = 'none';
  7252.  
  7253.             byId('signOutBtn').addEventListener('click', () => {
  7254.                 window.gameSettings.user = null;
  7255.             });
  7256.  
  7257.             const mode = byId('gamemode');
  7258.             mode.addEventListener('change', () => {
  7259.                 client.send({
  7260.                     type: 'server-changed',
  7261.                     content: getGameMode(),
  7262.                 });
  7263.  
  7264.                 window.gameSettings.isPlaying = false;
  7265.  
  7266.                 const modMessages = document.querySelector('#mod-messages');
  7267.                 if (modMessages) {
  7268.                     modMessages.innerHTML = '';
  7269.                 }
  7270.             });
  7271.  
  7272.             // redirect to owned skins instead of free skins
  7273.             const ot = Element.prototype.openTab;
  7274.             Element.prototype.openTab = function (tab) {
  7275.                 if (!tab === 'skins') return;
  7276.  
  7277.                 setTimeout(() => {
  7278.                     Element.prototype.changeTab('owned');
  7279.                 }, 100);
  7280.  
  7281.                 ot.apply(this, arguments);
  7282.             };
  7283.  
  7284.             document.addEventListener('mousemove', (e) => {
  7285.                 this.mouseX = e.clientX + window.pageXOffset;
  7286.                 this.mouseY = e.clientY + window.pageYOffset;
  7287.  
  7288.                 const mouseTracker = document.querySelector('.mouseTracker');
  7289.                 if (!mouseTracker) return;
  7290.  
  7291.                 mouseTracker.innerText = `X: ${this.mouseX}; Y: ${this.mouseY}`;
  7292.             });
  7293.  
  7294.             if (location.search.includes('password')) {
  7295.                 const passwordField = byId('password');
  7296.                 if (passwordField) passwordField.style.display = 'none';
  7297.  
  7298.                 const password =
  7299.                       new URLSearchParams(location.search)
  7300.                 .get('password')
  7301.                 ?.split('/')[0] || '';
  7302.                 passwordField.value = password; // sigfixes should know the password when multiboxing
  7303.  
  7304.                 if (window.sigfix) return;
  7305.  
  7306.                 const playBtn = byId('play-btn');
  7307.                 playBtn.addEventListener('click', (e) => {
  7308.                     const waitForConnection = () =>
  7309.                     new Promise((res) => {
  7310.                         if (client?.ws?.readyState === 1) return res(null);
  7311.                         const i = setInterval(
  7312.                             () =>
  7313.                             client?.ws?.readyState === 1 &&
  7314.                             (clearInterval(i), res(null)),
  7315.                             50
  7316.                         );
  7317.                     });
  7318.  
  7319.                     waitForConnection().then(async () => {
  7320.                         await wait(500);
  7321.                         mods.sendPlay(password);
  7322.  
  7323.                         const interval = setInterval(() => {
  7324.                             const errormodal = byId('errormodal');
  7325.                             if (errormodal?.style.display !== 'none')
  7326.                                 errormodal.style.display = 'none';
  7327.                         });
  7328.  
  7329.                         setTimeout(() => clearInterval(interval), 1000);
  7330.                     });
  7331.                 });
  7332.             }
  7333.         },
  7334.  
  7335.         removeStorage(storage) {
  7336.             localStorage.removeItem(storage);
  7337.         },
  7338.  
  7339.         credits() {
  7340.             console.log(
  7341.                 `%c
  7342. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7343. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎░█▀▀▀█ ▀█▀ ░█▀▀█ ░█▀▄▀█ ░█▀▀▀█ ░█▀▀▄ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7344. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎─▀▀▀▄▄ ░█─ ░█─▄▄ ░█░█░█ ░█──░█ ░█─░█ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ V${version} ‎ ‎ ‎ ‎
  7345. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎░█▄▄▄█ ▄█▄ ░█▄▄█ ░█──░█ ░█▄▄▄█ ░█▄▄▀ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7346. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7347. ‎ ‎ ‎ ██████╗░██╗░░░██╗  ░█████╗░██╗░░░██╗██████╗░░██████╗███████╗██████╗░ ‎ ‎ ‎
  7348. ‎ ‎ ‎ ██╔══██╗╚██╗░██╔╝  ██╔══██╗██║░░░██║██╔══██╗██╔════╝██╔════╝██╔══██╗ ‎ ‎ ‎
  7349. ‎ ‎ ‎ ██████╦╝░╚████╔╝░  ██║░░╚═╝██║░░░██║██████╔╝╚█████╗░█████╗░░██║░░██║ ‎ ‎ ‎
  7350. ‎ ‎ ‎ ██╔══██╗░░╚██╔╝░░  ██║░░██╗██║░░░██║██╔══██╗░╚═══██╗██╔══╝░░██║░░██║ ‎ ‎ ‎
  7351. ‎ ‎ ‎ ██████╦╝░░░██║░░░  ╚█████╔╝╚██████╔╝██║░░██║██████╔╝███████╗██████╔╝ ‎ ‎ ‎
  7352. ‎ ‎ ‎ ╚═════╝░░░░╚═╝░░░  ░╚════╝░░╚═════╝░╚═╝░░╚═╝╚═════╝░╚══════╝╚═════╝░ ‎ ‎ ‎
  7353. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7354. `,
  7355.                 'background-color: black; color: green'
  7356.             );
  7357.         },
  7358.  
  7359.         handleAlert(data) {
  7360.             const { title, description, enabled, password } = data;
  7361.  
  7362.             if (location.pathname.includes('tournament') || client.updateAvailable) return;
  7363.  
  7364.             const hideAlert = localStorage.getItem('hide-alert');
  7365.             if (!enabled || (Date.now() - 24 * 60 * 60 * 1000) > hideAlert) {
  7366.                 byId('scrim_alert')?.remove();
  7367.                 return;
  7368.             }
  7369.  
  7370.             localStorage.removeItem('hide-alert');
  7371.  
  7372.             const modAlert = document.createElement('div');
  7373.             modAlert.id = 'scrim_alert';
  7374.             modAlert.classList.add('modAlert');
  7375.             modAlert.innerHTML = `
  7376.                 <div class="flex justify-sb">
  7377.                     <strong>${title}</strong>
  7378.                     <button class="modButton" style="width: 35px;" id="close_scrim_alert">X</button>
  7379.                 </div>
  7380.                 <span>${description}</span>
  7381.                 <div class="flex" style="align-items: center; gap: 5px;">
  7382.                     <button id="join" class="modButton" style="width: 100%">Join</button>
  7383.                 </div>
  7384.             `;
  7385.             document.body.append(modAlert);
  7386.  
  7387.             const observer = new MutationObserver(() => {
  7388.                 modAlert.style.display = menuClosed() ? 'none' : 'flex';
  7389.             });
  7390.  
  7391.             observer.observe(document.body, {
  7392.                 attributes: true,
  7393.                 childList: true,
  7394.                 subtree: true,
  7395.             });
  7396.  
  7397.             const joinButton = byId('join');
  7398.             joinButton.addEventListener('click', () => {
  7399.                 location.href = `https://one.sigmally.com/tournament?password=${password}`;
  7400.             });
  7401.  
  7402.             const close = byId('close_scrim_alert');
  7403.             close.addEventListener('click', () => {
  7404.                 modAlert.remove();
  7405.                 // make it not that annoying
  7406.                 localStorage.setItem('hide-alert', Date.now());
  7407.             });
  7408.         },
  7409.  
  7410.         saveNames() {
  7411.             let savedNames = modSettings.settings.savedNames;
  7412.             let savedNamesOutput = byId('savedNames');
  7413.             let saveNameBtn = byId('saveName');
  7414.             let saveNameInput = byId('saveNameValue');
  7415.  
  7416.             const createNameDiv = (name) => {
  7417.                 let nameDiv = document.createElement('div');
  7418.                 nameDiv.classList.add('NameDiv');
  7419.  
  7420.                 let nameLabel = document.createElement('label');
  7421.                 nameLabel.classList.add('NameLabel');
  7422.                 nameLabel.innerText = name;
  7423.  
  7424.                 let delName = document.createElement('button');
  7425.                 delName.innerText = 'X';
  7426.                 delName.classList.add('delName');
  7427.  
  7428.                 nameDiv.addEventListener('click', () => {
  7429.                     const name = nameLabel.innerText;
  7430.                     navigator.clipboard.writeText(name).then(() => {
  7431.                         this.modAlert(
  7432.                             `Added the name '${name}' to your clipboard!`,
  7433.                             'success'
  7434.                         );
  7435.                     });
  7436.                 });
  7437.  
  7438.                 delName.addEventListener('click', () => {
  7439.                     if (
  7440.                         confirm(
  7441.                             "Are you sure you want to delete the name '" +
  7442.                             nameLabel.innerText +
  7443.                             "'?"
  7444.                         )
  7445.                     ) {
  7446.                         nameDiv.remove();
  7447.                         savedNames = savedNames.filter(
  7448.                             (n) => n !== nameLabel.innerText
  7449.                         );
  7450.                         modSettings.settings.savedNames = savedNames;
  7451.                         updateStorage();
  7452.                     }
  7453.                 });
  7454.  
  7455.                 nameDiv.appendChild(nameLabel);
  7456.                 nameDiv.appendChild(delName);
  7457.                 return nameDiv;
  7458.             };
  7459.  
  7460.             saveNameBtn.addEventListener('click', () => {
  7461.                 if (saveNameInput.value === '') return;
  7462.  
  7463.                 setTimeout(() => {
  7464.                     saveNameInput.value = '';
  7465.                 }, 10);
  7466.  
  7467.                 if (savedNames.includes(saveNameInput.value)) {
  7468.                     return;
  7469.                 }
  7470.  
  7471.                 let nameDiv = createNameDiv(saveNameInput.value);
  7472.                 savedNamesOutput.appendChild(nameDiv);
  7473.  
  7474.                 savedNames.push(saveNameInput.value);
  7475.                 modSettings.settings.savedNames = savedNames;
  7476.                 updateStorage();
  7477.             });
  7478.  
  7479.             if (savedNames.length > 0) {
  7480.                 savedNames.forEach((name) => {
  7481.                     let nameDiv = createNameDiv(name);
  7482.                     savedNamesOutput.appendChild(nameDiv);
  7483.                 });
  7484.             }
  7485.         },
  7486.  
  7487.         initStats() {
  7488.             // initialize player stats
  7489.             const statElements = [
  7490.                 'stat-time-played',
  7491.                 'stat-highest-mass',
  7492.                 'stat-total-deaths',
  7493.                 'stat-total-mass',
  7494.             ];
  7495.             this.storage = localStorage.getItem('game-stats');
  7496.  
  7497.             if (!this.storage) {
  7498.                 this.storage = {
  7499.                     'time-played': 0, // seconds
  7500.                     'highest-mass': 0,
  7501.                     'total-deaths': 0,
  7502.                     'total-mass': 0,
  7503.                 };
  7504.                 localStorage.setItem(
  7505.                     'game-stats',
  7506.                     JSON.stringify(this.storage)
  7507.                 );
  7508.             } else {
  7509.                 this.storage = JSON.parse(this.storage);
  7510.             }
  7511.  
  7512.             statElements.forEach((rawStat) => {
  7513.                 const stat = rawStat.replace('stat-', '');
  7514.                 const value = this.storage[stat];
  7515.                 this.updateStatElm(rawStat, value);
  7516.             });
  7517.  
  7518.             this.session.bind(this)();
  7519.         },
  7520.  
  7521.         updateStat(key, value) {
  7522.             this.storage[key] = value;
  7523.             localStorage.setItem('game-stats', JSON.stringify(this.storage));
  7524.             this.updateStatElm(key, value);
  7525.         },
  7526.  
  7527.         updateStatElm(stat, value) {
  7528.             const element = byId(stat);
  7529.  
  7530.             if (element) {
  7531.                 if (stat === 'stat-time-played') {
  7532.                     const hours = Math.floor(value / 3600);
  7533.                     const minutes = Math.floor((value % 3600) / 60);
  7534.                     const formattedTime =
  7535.                           hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
  7536.                     element.innerHTML = formattedTime;
  7537.                 } else {
  7538.                     const formattedValue =
  7539.                           stat === 'stat-highest-mass' ||
  7540.                           stat === 'stat-total-mass'
  7541.                     ? value > 999
  7542.                     ? `${(value / 1000).toFixed(1)}k`
  7543.                     : value.toString()
  7544.                     : value.toString();
  7545.                     element.innerHTML = formattedValue;
  7546.                 }
  7547.             }
  7548.         },
  7549.  
  7550.         session() {
  7551.             let playingInterval;
  7552.             let minPlaying = 0;
  7553.             let isPlaying = window.gameSettings.isPlaying;
  7554.  
  7555.             const playBtn = byId('play-btn');
  7556.             let a = null;
  7557.  
  7558.             playBtn.addEventListener('click', async () => {
  7559.                 if (isPlaying) return;
  7560.  
  7561.                 while (!window.gameSettings.isPlaying) {
  7562.                     await new Promise((resolve) => setTimeout(resolve, 200));
  7563.                 }
  7564.  
  7565.                 isPlaying = true;
  7566.                 let timer = null;
  7567.  
  7568.                 if (modSettings.playTimer) {
  7569.                     timer = document.createElement('span');
  7570.                     timer.classList.add('playTimer');
  7571.                     timer.innerText = '0m0s played';
  7572.                     document.body.append(timer);
  7573.                 }
  7574.  
  7575.                 // mouse tracker in session method so it's only visible when playing
  7576.                 if (modSettings.mouseTracker) {
  7577.                     const mouse = document.createElement('span');
  7578.                     mouse.classList.add('mouseTracker');
  7579.                     mouse.innerText = 'X: 0; Y: 0';
  7580.                     document.body.append(mouse);
  7581.  
  7582.                     if (!modSettings.playTimer) {
  7583.                         mouse.style.top = '128px';
  7584.                     }
  7585.                 }
  7586.  
  7587.                 let count = 0;
  7588.                 playingInterval = setInterval(() => {
  7589.                     count++;
  7590.                     this.storage['time-played']++;
  7591.                     if (count % 60 === 0) {
  7592.                         minPlaying++;
  7593.                     }
  7594.                     this.updateStat('time-played', this.storage['time-played']);
  7595.  
  7596.                     if (modSettings.playTimer) {
  7597.                         this.updateTimeStat(timer, count);
  7598.                     }
  7599.                 }, 1000);
  7600.             });
  7601.  
  7602.             setInterval(() => {
  7603.                 if (menuClosed() && byId('overlays').style.display !== 'none') {
  7604.                     byId('overlays').style.display = 'none';
  7605.                 }
  7606.  
  7607.                 if (isDead() && !dead) {
  7608.                     clearInterval(playingInterval);
  7609.                     dead = true;
  7610.  
  7611.                     const playTimer = document.querySelector('.playTimer');
  7612.                     if (playTimer) playTimer.remove();
  7613.  
  7614.                     const mouseTracker =
  7615.                           document.querySelector('.mouseTracker');
  7616.                     if (mouseTracker) mouseTracker.remove();
  7617.  
  7618.                     const score = parseFloat(byId('highest_mass').innerText);
  7619.                     const highest = this.storage['highest-mass'];
  7620.  
  7621.                     if (score > highest) {
  7622.                         this.storage['highest-mass'] = score;
  7623.                         this.updateStat(
  7624.                             'highest-mass',
  7625.                             this.storage['highest-mass']
  7626.                         );
  7627.                     }
  7628.  
  7629.                     this.storage['total-deaths']++;
  7630.                     this.updateStat(
  7631.                         'total-deaths',
  7632.                         this.storage['total-deaths']
  7633.                     );
  7634.  
  7635.                     this.storage['total-mass'] += score;
  7636.                     this.updateStat('total-mass', this.storage['total-mass']);
  7637.                     isPlaying = window.gameSettings.isPlaying = false;
  7638.  
  7639.                     if (this.lastOneStanding) {
  7640.                         client.send({
  7641.                             type: 'result',
  7642.                             content: null,
  7643.                         });
  7644.                         playBtn.disabled = true;
  7645.                     }
  7646.  
  7647.                     if (modSettings.showChallenges && window.gameSettings.user)
  7648.                         this.showChallenges();
  7649.                 } else if (!isDead()) {
  7650.                     dead = false;
  7651.                     const challengesDeathscreen = document.querySelector(
  7652.                         '.challenges_deathscreen'
  7653.                     );
  7654.                     if (challengesDeathscreen) challengesDeathscreen.remove();
  7655.                 }
  7656.             });
  7657.         },
  7658.         updateTimeStat(el, seconds) {
  7659.             const minutes = Math.floor(seconds / 60);
  7660.             const remainingSeconds = seconds % 60;
  7661.             const timeString = `${minutes}m${remainingSeconds}s`;
  7662.  
  7663.             el.innerText = `${timeString} played`;
  7664.         },
  7665.  
  7666.         async showChallenges() {
  7667.             const challengeData = await (
  7668.                 await fetch(
  7669.                     `https://sigmally.com/api/user/challenge/${window.gameSettings.user.email}`
  7670.                 )
  7671.             ).json();
  7672.  
  7673.             if (challengeData.status !== 'success') return;
  7674.  
  7675.             const shopLocales = window.shopLocales;
  7676.             let challengesCompleted = 0;
  7677.  
  7678.             const allChallenges = challengeData.data;
  7679.             allChallenges.forEach(({ status }) => {
  7680.                 if (status) challengesCompleted++;
  7681.             });
  7682.  
  7683.             let challenges;
  7684.             if (challengesCompleted === allChallenges.length) {
  7685.                 challenges = `<div class="challenge-row" style="justify-content: center;">All challenges completed.</div>`;
  7686.             } else {
  7687.                 challenges = allChallenges
  7688.                     .filter(({ status }) => !status)
  7689.                     .map(({ task, best, status, ready, goal }) => {
  7690.                     const desc = shopLocales.challenge_tab.tasks[
  7691.                         task
  7692.                     ].replace('%n', task === 'alive' ? goal / 60 : goal);
  7693.                     const btn = ready
  7694.                     ? `<button class="challenge-collect-secondary" onclick="this.challenge('${task}', ${status})">${shopLocales.challenge_tab.collect}</button>`
  7695.                     : `<div class="challenge-best-secondary">${
  7696.                     shopLocales.challenge_tab.result
  7697.                     }${Math.round(best)}${
  7698.                     task === 'alive' ? 's' : ''
  7699.                     }</div>`;
  7700.                     return `
  7701.                         <div class="challenge-row">
  7702.                           <div class="challenge-desc">${desc}</div>
  7703.                           ${btn}
  7704.                         </div>`;
  7705.                 })
  7706.                     .join('');
  7707.             }
  7708.  
  7709.             const modal = document.createElement('div');
  7710.             modal.classList.add('challenges_deathscreen');
  7711.             modal.innerHTML = `
  7712.                 <span class="challenges-title">Daily challenges</span>
  7713.                 <div class="challenges-col">${challenges}</div>
  7714.                 <span class="centerXY new-challenges">New challenges in 0h 0m 0s</span>
  7715.             `;
  7716.  
  7717.             const toggleColor = (element, background, text) => {
  7718.                 let image = `url("${background}")`;
  7719.                 if (background.includes('http')) {
  7720.                     element.style.background = image;
  7721.                     element.style.backgroundPosition = 'center';
  7722.                     element.style.backgroundSize = 'cover';
  7723.                     element.style.backgroundRepeat = 'no-repeat';
  7724.                 } else {
  7725.                     element.style.background = background;
  7726.                     element.style.backgroundRepeat = 'no-repeat';
  7727.                 }
  7728.                 element.style.color = text;
  7729.             };
  7730.  
  7731.             if (modSettings.themes.current !== 'Dark') {
  7732.                 let selectedTheme;
  7733.                 selectedTheme =
  7734.                     window.themes.defaults.find(
  7735.                     (theme) => theme.name === modSettings.themes.current
  7736.                 ) ||
  7737.                     modSettings.themes.custom.find(
  7738.                     (theme) => theme.name === modSettings.themes.current
  7739.                 ) ||
  7740.                     null;
  7741.                 if (!selectedTheme) {
  7742.                     selectedTheme =
  7743.                         window.themes.orderly.find(
  7744.                         (theme) => theme.name === modSettings.themes.current
  7745.                     ) ||
  7746.                         modSettings.themes.custom.find(
  7747.                         (theme) => theme.name === modSettings.themes.current
  7748.                     );
  7749.                 }
  7750.  
  7751.                 if (selectedTheme) {
  7752.                     toggleColor(
  7753.                         modal,
  7754.                         selectedTheme.background,
  7755.                         selectedTheme.text
  7756.                     );
  7757.                 }
  7758.             }
  7759.  
  7760.             document
  7761.                 .querySelector('.menu-wrapper--stats-mode')
  7762.                 .insertAdjacentElement('afterbegin', modal);
  7763.  
  7764.             if (challengesCompleted < allChallenges.length) {
  7765.                 document
  7766.                     .querySelectorAll('.challenge-collect-secondary')
  7767.                     .forEach((btn) => {
  7768.                     btn.addEventListener('click', () => {
  7769.                         const parentChallengeRow =
  7770.                               btn.closest('.challenge-row');
  7771.                         if (parentChallengeRow) {
  7772.                             setTimeout(() => {
  7773.                                 parentChallengeRow.remove();
  7774.                             }, 500);
  7775.                         }
  7776.                     });
  7777.                 });
  7778.             }
  7779.  
  7780.             this.createDayTimer();
  7781.         },
  7782.  
  7783.         timeToString(timeLeft) {
  7784.             const string = new Date(timeLeft).toISOString().slice(11, 19);
  7785.             const [hours, minutes, seconds] = string.split(':');
  7786.  
  7787.             return `${hours}h ${minutes}m ${seconds}s`;
  7788.         },
  7789.         toISODate: (date) => {
  7790.             const withTime = date ? new Date(date) : new Date();
  7791.             const [withoutTime] = withTime.toISOString().split('T');
  7792.             return withoutTime;
  7793.         },
  7794.         createDayTimer() {
  7795.             const oneDay = 1000 * 60 * 60 * 24;
  7796.             const getTime = () => {
  7797.                 const today = this.toISODate();
  7798.                 const from = new Date(today).getTime();
  7799.                 const to = from + oneDay;
  7800.  
  7801.                 const distance = to - Date.now();
  7802.                 const time = this.timeToString(distance);
  7803.                 return time;
  7804.             };
  7805.  
  7806.             const children = document.querySelector('.new-challenges');
  7807.             if (children) {
  7808.                 children.innerHTML = `New challenges in ${getTime()}`;
  7809.             }
  7810.  
  7811.             this.dayTimer = setInterval(() => {
  7812.                 const today = this.toISODate();
  7813.                 const from = new Date(today).getTime();
  7814.                 const to = from + oneDay;
  7815.  
  7816.                 const distance = to - Date.now();
  7817.                 const time = this.timeToString(distance);
  7818.  
  7819.                 const children = document.querySelector('.new-challenges');
  7820.                 if (!children || distance < 1000 || !isDead()) {
  7821.                     clearInterval(this.dayTimer);
  7822.                     return;
  7823.                 }
  7824.                 children.innerHTML = `New challenges in ${getTime()}`;
  7825.             }, 1000);
  7826.         },
  7827.  
  7828.         macros() {
  7829.             let that = this;
  7830.             const KEY_SPLIT = this.splitKey;
  7831.             let ff = null;
  7832.             let keydown = false;
  7833.             let open = false;
  7834.             const canvas = byId('canvas');
  7835.             const mod_menu = document.querySelector('.mod_menu');
  7836.  
  7837.             const freezeType = byId('freezeType');
  7838.             let freezeKeyPressed = false;
  7839.             let freezeMouseClicked = false;
  7840.             let freezeOverlay = null;
  7841.  
  7842.             let vOverlay = null;
  7843.             let vLocked = false;
  7844.             let activeVLine = false;
  7845.  
  7846.             let fixedOverlay = null;
  7847.             let fixedLocked = false;
  7848.             let activeFixedLine = false;
  7849.  
  7850.             /* intervals */
  7851.  
  7852.             // Respawn interval
  7853.             setInterval(() => {
  7854.                 if (
  7855.                     modSettings.settings.autoRespawn &&
  7856.                     this.respawnTime &&
  7857.                     Date.now() - this.respawnTime >= this.respawnCooldown
  7858.                 ) {
  7859.                     this.respawn();
  7860.                 }
  7861.             });
  7862.  
  7863.             // mouse fast feed interval
  7864.             setInterval(() => {
  7865.                 if (dead || !menuClosed() || !this.mouseDown) return;
  7866.                 keypress('w', 'KeyW');
  7867.             }, 50);
  7868.  
  7869.             async function split(times) {
  7870.                 if (times > 0) {
  7871.                     window.dispatchEvent(
  7872.                         new KeyboardEvent('keydown', KEY_SPLIT)
  7873.                     );
  7874.                     window.dispatchEvent(new KeyboardEvent('keyup', KEY_SPLIT));
  7875.                     split(times - 1);
  7876.                 }
  7877.             }
  7878.  
  7879.             async function selfTrick() {
  7880.                 let i = 4;
  7881.  
  7882.                 while (i--) {
  7883.                     split(1);
  7884.                     await wait(20);
  7885.                 }
  7886.             }
  7887.  
  7888.             async function doubleTrick() {
  7889.                 let i = 2;
  7890.  
  7891.                 while (i--) {
  7892.                     split(1);
  7893.                     await wait(20);
  7894.                 }
  7895.             }
  7896.  
  7897.             function mouseToScreenCenter() {
  7898.                 const screenCenterX = canvas.width / 2;
  7899.                 const screenCenterY = canvas.height / 2;
  7900.  
  7901.                 mousemove(screenCenterX, screenCenterY);
  7902.  
  7903.                 return {
  7904.                     x: screenCenterX,
  7905.                     y: screenCenterY,
  7906.                 };
  7907.             }
  7908.  
  7909.             async function instantSplit() {
  7910.                 await wait(300);
  7911.  
  7912.                 if (
  7913.                     modSettings.macros.keys.line.instantSplit &&
  7914.                     modSettings.macros.keys.line.instantSplit > 0
  7915.                 ) {
  7916.                     split(modSettings.macros.keys.line.instantSplit);
  7917.                 }
  7918.             }
  7919.  
  7920.             async function vLine() {
  7921.                 if (!activeVLine) return;
  7922.                 const x = playerPosition.x;
  7923.                 const y = playerPosition.y;
  7924.  
  7925.                 const offsetUpX = playerPosition.x;
  7926.                 const offsetUpY = playerPosition.y - 100;
  7927.                 const offsetDownX = playerPosition.x;
  7928.                 const offsetDownY = playerPosition.y + 100;
  7929.  
  7930.                 freezepos = false;
  7931.                 window.sendMouseMove(offsetUpX, offsetUpY);
  7932.                 freezepos = true;
  7933.  
  7934.                 await wait(50);
  7935.  
  7936.                 freezepos = false;
  7937.                 window.sendMouseMove(offsetDownX, offsetDownY);
  7938.                 freezepos = true;
  7939.             }
  7940.  
  7941.             async function toggleHorizontal(mouse = false) {
  7942.                 if (!freezeKeyPressed) {
  7943.                     if (activeVLine || activeFixedLine) return;
  7944.  
  7945.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  7946.                     freezepos = true;
  7947.  
  7948.                     instantSplit();
  7949.  
  7950.                     freezeOverlay = document.createElement('div');
  7951.                     freezeOverlay.innerHTML = `
  7952. 							<span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Movement Stopped</span>
  7953. 						`;
  7954.                     freezeOverlay.style =
  7955.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  7956.  
  7957.                     if (
  7958.                         mouse &&
  7959.                         (modSettings.macros.mouse.left === 'freeze' ||
  7960.                          modSettings.macros.mouse.right === 'freeze')
  7961.                     ) {
  7962.                         freezeOverlay.addEventListener('mousedown', (e) => {
  7963.                             if (
  7964.                                 e.button === 0 &&
  7965.                                 modSettings.macros.mouse.left === 'freeze'
  7966.                             ) {
  7967.                                 // Left mouse button (1)
  7968.                                 handleFreezeEvent();
  7969.                             }
  7970.                             if (
  7971.                                 e.button === 2 &&
  7972.                                 modSettings.macros.mouse.right === 'freeze'
  7973.                             ) {
  7974.                                 // Right mouse button (2)
  7975.                                 handleFreezeEvent();
  7976.                             }
  7977.                         });
  7978.  
  7979.                         if (modSettings.macros.mouse.right === 'freeze') {
  7980.                             freezeOverlay.addEventListener(
  7981.                                 'contextmenu',
  7982.                                 (e) => {
  7983.                                     e.preventDefault();
  7984.                                 }
  7985.                             );
  7986.                         }
  7987.                     }
  7988.  
  7989.                     function handleFreezeEvent() {
  7990.                         if (freezeOverlay != null) freezeOverlay.remove();
  7991.                         freezeOverlay = null;
  7992.                         freezeKeyPressed = false;
  7993.                     }
  7994.  
  7995.                     document
  7996.                         .querySelector('.body__inner')
  7997.                         .append(freezeOverlay);
  7998.  
  7999.                     freezeKeyPressed = true;
  8000.                 } else {
  8001.                     if (freezeOverlay != null) freezeOverlay.remove();
  8002.                     freezeOverlay = null;
  8003.                     freezeKeyPressed = false;
  8004.  
  8005.                     freezepos = false;
  8006.                 }
  8007.             }
  8008.  
  8009.             async function toggleVertical() {
  8010.                 if (!activeVLine) {
  8011.                     if (freezeKeyPressed || activeFixedLine) return;
  8012.  
  8013.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  8014.                     freezepos = true;
  8015.  
  8016.                     instantSplit();
  8017.  
  8018.                     vOverlay = document.createElement('div');
  8019.                     vOverlay.style = 'pointer-events: none;';
  8020.                     vOverlay.innerHTML = `
  8021.                         <span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Vertical locked</span>
  8022.                     `;
  8023.                     vOverlay.style =
  8024.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  8025.  
  8026.                     document.querySelector('.body__inner').append(vOverlay);
  8027.  
  8028.                     activeVLine = true;
  8029.                 } else {
  8030.                     activeVLine = false;
  8031.                     freezepos = false;
  8032.                     if (vOverlay) vOverlay.remove();
  8033.                     vOverlay = null;
  8034.                 }
  8035.             }
  8036.  
  8037.             async function toggleFixed() {
  8038.                 if (!activeFixedLine) {
  8039.                     if (freezeKeyPressed || activeVLine) return;
  8040.  
  8041.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  8042.  
  8043.                     freezepos = true;
  8044.  
  8045.                     instantSplit();
  8046.  
  8047.                     fixedOverlay = document.createElement('div');
  8048.                     fixedOverlay.style = 'pointer-events: none;';
  8049.                     fixedOverlay.innerHTML = `
  8050.                         <span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Mouse locked</span>
  8051.                     `;
  8052.                     fixedOverlay.style =
  8053.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  8054.  
  8055.                     document.querySelector('.body__inner').append(fixedOverlay);
  8056.  
  8057.                     activeFixedLine = true;
  8058.                 } else {
  8059.                     activeFixedLine = false;
  8060.                     freezepos = false;
  8061.                     if (fixedOverlay) fixedOverlay.remove();
  8062.                     fixedOverlay = null;
  8063.                 }
  8064.             }
  8065.  
  8066.             function sendLocation() {
  8067.                 if (!playerPosition.x || !playerPosition.y) return;
  8068.  
  8069.                 const gamemode = byId('gamemode');
  8070.  
  8071.                 let field = '';
  8072.                 const coordinates = getCoordinates(mods.border);
  8073.  
  8074.                 for (const label in coordinates) {
  8075.                     const { min, max } = coordinates[label];
  8076.  
  8077.                     if (
  8078.                         playerPosition.x >= min.x &&
  8079.                         playerPosition.x <= max.x &&
  8080.                         playerPosition.y >= min.y &&
  8081.                         playerPosition.y <= max.y
  8082.                     ) {
  8083.                         field = label;
  8084.                         break;
  8085.                     }
  8086.                 }
  8087.  
  8088.                 const locationText = modSettings.chat.locationText || field;
  8089.                 const message = locationText.replace('{pos}', field);
  8090.                 window.sendChat(message);
  8091.             }
  8092.  
  8093.             function toggleSettings(setting) {
  8094.                 const settingElement = document.querySelector(
  8095.                     `input#${setting}`
  8096.                 );
  8097.                 if (settingElement) {
  8098.                     settingElement.click();
  8099.                 } else {
  8100.                     console.error(`Setting "${setting}" not found`);
  8101.                 }
  8102.             }
  8103.  
  8104.             document.addEventListener('keyup', (e) => {
  8105.                 const key = e.key.toLowerCase();
  8106.                 if (key == modSettings.macros.keys.rapidFeed && keydown) {
  8107.                     clearInterval(ff);
  8108.                     keydown = false;
  8109.                 }
  8110.             });
  8111.             document.addEventListener('keydown', (e) => {
  8112.                 // prevent disconnecting & using macros on input fields
  8113.                 if (
  8114.                     document.activeElement.tagName === 'INPUT' ||
  8115.                     document.activeElement.tagName === 'TEXTAREA'
  8116.                 ) {
  8117.                     e.stopPropagation();
  8118.                     return;
  8119.                 }
  8120.                 const key = e.key.toLowerCase();
  8121.  
  8122.                 if (key === 'p') {
  8123.                     e.stopPropagation();
  8124.                 }
  8125.                 if (key === 'tab' && !window.screenTop && !window.screenY) {
  8126.                     e.preventDefault();
  8127.                 }
  8128.  
  8129.                 if (key === modSettings.macros.keys.rapidFeed) {
  8130.                     e.stopPropagation(); // block actual feeding key
  8131.                     if (!keydown) {
  8132.                         keydown = true;
  8133.                         ff = setInterval(
  8134.                             () => keypress('w', 'KeyW'),
  8135.                             modSettings.macros.feedSpeed
  8136.                         );
  8137.                     }
  8138.                 }
  8139.                 // vertical linesplit
  8140.                 if (
  8141.                     activeVLine &&
  8142.                     (key === ' ' ||
  8143.                      key === modSettings.macros.keys.splits.double ||
  8144.                      key === modSettings.macros.keys.splits.triple ||
  8145.                      key === modSettings.macros.keys.splits.quad)
  8146.                 ) {
  8147.                     vLine();
  8148.                 }
  8149.  
  8150.                 handleKeydown(key);
  8151.             });
  8152.  
  8153.             async function handleKeydown(key) {
  8154.                 switch (key) {
  8155.                     case modSettings.macros.keys.toggle.menu: {
  8156.                         if (!open) {
  8157.                             mod_menu.style.display = 'flex';
  8158.                             setTimeout(() => {
  8159.                                 mod_menu.style.opacity = 1;
  8160.                             }, 10);
  8161.                             open = true;
  8162.                         } else {
  8163.                             mod_menu.style.opacity = 0;
  8164.                             setTimeout(() => {
  8165.                                 mod_menu.style.display = 'none';
  8166.                             }, 300);
  8167.                             open = false;
  8168.                         }
  8169.                         break;
  8170.                     }
  8171.  
  8172.                     case modSettings.macros.keys.splits.double:
  8173.                         split(2);
  8174.                         break;
  8175.  
  8176.                     case modSettings.macros.keys.splits.triple:
  8177.                         split(3);
  8178.                         break;
  8179.  
  8180.                     case modSettings.macros.keys.splits.quad:
  8181.                         split(4);
  8182.                         break;
  8183.  
  8184.                     case modSettings.macros.keys.splits.selfTrick:
  8185.                         selfTrick();
  8186.                         break;
  8187.  
  8188.                     case modSettings.macros.keys.splits.doubleTrick:
  8189.                         doubleTrick();
  8190.                         break;
  8191.  
  8192.                     case modSettings.macros.keys.line.horizontal:
  8193.                         if (menuClosed()) toggleHorizontal();
  8194.                         break;
  8195.  
  8196.                     case modSettings.macros.keys.line.vertical:
  8197.                         if (menuClosed()) toggleVertical();
  8198.                         break;
  8199.  
  8200.                     case modSettings.macros.keys.line.fixed:
  8201.                         if (menuClosed()) toggleFixed();
  8202.                         break;
  8203.  
  8204.                     case modSettings.macros.keys.location:
  8205.                         sendLocation();
  8206.                         break;
  8207.  
  8208.                     case modSettings.macros.keys.toggle.chat:
  8209.                         mods.toggleChat();
  8210.                         break;
  8211.  
  8212.                     case modSettings.macros.keys.toggle.names:
  8213.                         toggleSettings('showNames');
  8214.                         break;
  8215.  
  8216.                     case modSettings.macros.keys.toggle.skins:
  8217.                         toggleSettings('showSkins');
  8218.                         break;
  8219.  
  8220.                     case modSettings.macros.keys.toggle.autoRespawn:
  8221.                         toggleSettings('autoRespawn');
  8222.                         break;
  8223.  
  8224.                     case modSettings.macros.keys.respawn:
  8225.                         mods.respawnGame();
  8226.                         break;
  8227.  
  8228.                     case modSettings.macros.keys.saveImage:
  8229.                         await mods.saveImage();
  8230.                         break;
  8231.                 }
  8232.             }
  8233.  
  8234.             canvas.addEventListener('mousedown', (e) => {
  8235.                 const {
  8236.                     macros: { mouse },
  8237.                 } = modSettings;
  8238.  
  8239.                 if (e.button === 0) {
  8240.                     // Left mouse button (0)
  8241.                     if (mouse.left === 'fastfeed') {
  8242.                         if (
  8243.                             document.activeElement.tagName === 'INPUT' ||
  8244.                             document.activeElement.tagName === 'TEXTAREA'
  8245.                         )
  8246.                             return;
  8247.                         this.mouseDown = true;
  8248.                     } else if (mouse.left === 'split') {
  8249.                         split(1);
  8250.                     } else if (mouse.left === 'split2') {
  8251.                         split(2);
  8252.                     } else if (mouse.left === 'split3') {
  8253.                         split(3);
  8254.                     } else if (mouse.left === 'split4') {
  8255.                         split(4);
  8256.                     } else if (mouse.left === 'freeze') {
  8257.                         toggleHorizontal(true);
  8258.                     } else if (mouse.left === 'dTrick') {
  8259.                         doubleTrick();
  8260.                     } else if (mouse.left === 'sTrick') {
  8261.                         selfTrick();
  8262.                     }
  8263.                 } else if (e.button === 2) {
  8264.                     // Right mouse button (2)
  8265.                     e.preventDefault();
  8266.                     if (mouse.right === 'fastfeed') {
  8267.                         if (
  8268.                             document.activeElement.tagName === 'INPUT' ||
  8269.                             document.activeElement.tagName === 'TEXTAREA'
  8270.                         )
  8271.                             return;
  8272.                         this.mouseDown = true;
  8273.                     } else if (mouse.right === 'split') {
  8274.                         split(1);
  8275.                     } else if (mouse.right === 'split2') {
  8276.                         split(2);
  8277.                     } else if (mouse.right === 'split3') {
  8278.                         split(3);
  8279.                     } else if (mouse.right === 'split4') {
  8280.                         split(4);
  8281.                     } else if (mouse.right === 'freeze') {
  8282.                         toggleHorizontal(true);
  8283.                     } else if (mouse.right === 'dTrick') {
  8284.                         doubleTrick();
  8285.                     } else if (mouse.right === 'sTrick') {
  8286.                         selfTrick();
  8287.                     }
  8288.                 }
  8289.             });
  8290.  
  8291.             canvas.addEventListener('contextmenu', (e) => {
  8292.                 e.preventDefault();
  8293.             });
  8294.  
  8295.             canvas.addEventListener('mouseup', () => {
  8296.                 if (modSettings.macros.mouse.left === 'fastfeed') {
  8297.                     this.mouseDown = false;
  8298.                 } else if (modSettings.macros.mouse.right === 'fastfeed') {
  8299.                     this.mouseDown = false;
  8300.                 }
  8301.             });
  8302.  
  8303.             const macroSelectHandler = (macroSelect, key) => {
  8304.                 const {
  8305.                     macros: { mouse },
  8306.                 } = modSettings;
  8307.                 macroSelect.value = modSettings[key] || 'none';
  8308.  
  8309.                 macroSelect.addEventListener('change', () => {
  8310.                     const selectedOption = macroSelect.value;
  8311.  
  8312.                     const optionActions = {
  8313.                         none: () => {
  8314.                             mouse[key] = null;
  8315.                         },
  8316.                         fastfeed: () => {
  8317.                             mouse[key] = 'fastfeed';
  8318.                         },
  8319.                         split: () => {
  8320.                             mouse[key] = 'split';
  8321.                         },
  8322.                         split2: () => {
  8323.                             mouse[key] = 'split2';
  8324.                         },
  8325.                         split3: () => {
  8326.                             mouse[key] = 'split3';
  8327.                         },
  8328.                         split4: () => {
  8329.                             mouse[key] = 'split4';
  8330.                         },
  8331.                         freeze: () => {
  8332.                             mouse[key] = 'freeze';
  8333.                         },
  8334.                         dTrick: () => {
  8335.                             mouse[key] = 'dTrick';
  8336.                         },
  8337.                         sTrick: () => {
  8338.                             mouse[key] = 'sTrick';
  8339.                         },
  8340.                     };
  8341.  
  8342.                     if (optionActions[selectedOption]) {
  8343.                         optionActions[selectedOption]();
  8344.                         updateStorage();
  8345.                     }
  8346.                 });
  8347.             };
  8348.  
  8349.             const m1_macroSelect = byId('m1_macroSelect');
  8350.             const m2_macroSelect = byId('m2_macroSelect');
  8351.  
  8352.             macroSelectHandler(m1_macroSelect, 'left');
  8353.             macroSelectHandler(m2_macroSelect, 'right');
  8354.  
  8355.             const instantSplitAmount = byId('instant-split-amount');
  8356.             const instantSplitStatus = byId('toggle-instant-split');
  8357.  
  8358.             instantSplitStatus.checked =
  8359.                 modSettings.macros.keys.line.instantSplit > 0;
  8360.             instantSplitAmount.disabled = !instantSplitStatus.checked;
  8361.             instantSplitAmount.value =
  8362.                 modSettings.macros.keys.line.instantSplit.toString();
  8363.  
  8364.             instantSplitStatus.addEventListener('change', () => {
  8365.                 if (instantSplitStatus.checked) {
  8366.                     modSettings.macros.keys.line.instantSplit =
  8367.                         Number(instantSplitAmount.value) || 0;
  8368.                     instantSplitAmount.disabled = false;
  8369.                 } else {
  8370.                     modSettings.macros.keys.line.instantSplit = 0;
  8371.                     instantSplitAmount.disabled = true;
  8372.                 }
  8373.  
  8374.                 updateStorage();
  8375.             });
  8376.  
  8377.             instantSplitAmount.addEventListener('input', (e) => {
  8378.                 modSettings.macros.keys.line.instantSplit =
  8379.                     Number(instantSplitAmount.value) || 0;
  8380.                 updateStorage();
  8381.             });
  8382.         },
  8383.  
  8384.         setInputActions() {
  8385.             const numModInputs = 18;
  8386.             const macroInputs = Array.from(
  8387.                 { length: numModInputs },
  8388.                 (_, i) => `modinput${i + 1}`
  8389.             );
  8390.  
  8391.             macroInputs.forEach((modkey) => {
  8392.                 const modInput = byId(modkey);
  8393.  
  8394.                 document.addEventListener('keydown', (event) => {
  8395.                     if (document.activeElement !== modInput) return;
  8396.  
  8397.                     if (event.key === 'Backspace') {
  8398.                         modInput.value = '';
  8399.                         updateModSettings(modInput.name, '');
  8400.                         return;
  8401.                     }
  8402.  
  8403.                     const newValue = event.key.toLowerCase();
  8404.                     modInput.value = newValue;
  8405.  
  8406.                     const isDuplicate = macroInputs.some((key) => {
  8407.                         const input = byId(key);
  8408.                         return (
  8409.                             input &&
  8410.                             input !== modInput &&
  8411.                             input.value === newValue
  8412.                         );
  8413.                     });
  8414.  
  8415.                     if (newValue && isDuplicate) {
  8416.                         alert("You can't use 2 keybindings at the same time.");
  8417.                         setTimeout(() => (modInput.value = ''), 0);
  8418.                         return;
  8419.                     }
  8420.  
  8421.                     updateModSettings(modInput.name, newValue);
  8422.                 });
  8423.             });
  8424.  
  8425.             function updateModSettings(propertyName, value) {
  8426.                 const properties = propertyName.split('.');
  8427.                 let settings = modSettings.macros.keys;
  8428.  
  8429.                 properties
  8430.                     .slice(0, -1)
  8431.                     .forEach((prop) => (settings = settings[prop]));
  8432.                 settings[properties.pop()] = value;
  8433.  
  8434.                 updateStorage();
  8435.             }
  8436.  
  8437.             const modNumberInput = document.querySelector('.modNumberInput');
  8438.  
  8439.             modNumberInput.addEventListener('keydown', (event) => {
  8440.                 if (
  8441.                     !['Backspace', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(
  8442.                         event.key
  8443.                     ) &&
  8444.                     !/^[0-9]$/.test(event.key)
  8445.                 ) {
  8446.                     event.preventDefault();
  8447.                 }
  8448.             });
  8449.         },
  8450.  
  8451.         openDB() {
  8452.             if (this.dbCache) return Promise.resolve(this.dbCache);
  8453.  
  8454.             return new Promise((resolve, reject) => {
  8455.                 const request = indexedDB.open('imageGalleryDB', 1);
  8456.  
  8457.                 request.onupgradeneeded = (event) => {
  8458.                     const db = event.target.result;
  8459.                     if (!db.objectStoreNames.contains('images')) {
  8460.                         db.createObjectStore('images', {
  8461.                             keyPath: 'timestamp',
  8462.                         });
  8463.                     }
  8464.                 };
  8465.  
  8466.                 request.onsuccess = () => {
  8467.                     this.dbCache = request.result;
  8468.                     resolve(this.dbCache);
  8469.                 };
  8470.  
  8471.                 request.onerror = (event) => reject(event.target.error);
  8472.             });
  8473.         },
  8474.  
  8475.         async saveImage() {
  8476.             const canvas = window.sigfix ? byId('sf-canvas') : byId('canvas');
  8477.  
  8478.             requestAnimationFrame(async () => {
  8479.                 const dataURL = canvas.toDataURL('image/png');
  8480.  
  8481.                 if (!dataURL) {
  8482.                     console.error(
  8483.                         'Failed to capture the image. The canvas might be empty or the rendering is incomplete.'
  8484.                     );
  8485.                     return;
  8486.                 }
  8487.  
  8488.                 const timestamp = Date.now();
  8489.  
  8490.                 if (!indexedDB)
  8491.                     return alert(
  8492.                         'Your browser does not support indexedDB. Please update your browser.'
  8493.                     );
  8494.  
  8495.                 try {
  8496.                     const db = await this.openDB();
  8497.                     const transaction = db.transaction('images', 'readwrite');
  8498.                     const store = transaction.objectStore('images');
  8499.                     store.put({ timestamp, dataURL });
  8500.  
  8501.                     await new Promise((resolve, reject) => {
  8502.                         transaction.oncomplete = resolve;
  8503.                         transaction.onerror = (event) =>
  8504.                         reject(event.target.error);
  8505.                     });
  8506.  
  8507.                     this.addImageToGallery({ timestamp, dataURL });
  8508.                 } catch (error) {
  8509.                     console.error('Transaction error:', error);
  8510.                 }
  8511.             });
  8512.         },
  8513.  
  8514.         addImageToGallery(image) {
  8515.             const galleryElement = byId('image-gallery');
  8516.  
  8517.             if (!galleryElement) return;
  8518.  
  8519.             const placeholderURL =
  8520.                   'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
  8521.  
  8522.             const imageHTML = `
  8523. 				<div class="image-container">
  8524. 					<img class="gallery-image lazy" data-src="${
  8525.             image.dataURL
  8526.             }" src="${placeholderURL}" data-image-id="${
  8527.             image.timestamp
  8528.             }" />
  8529. 					<div class="justify-sb">
  8530. 						<span class="modDescText">${prettyTime.fullDate(image.timestamp, true)}</span>
  8531. 						<div class="centerXY g-5">
  8532. 							<button type="button" class="download_btn operation_btn" data-image-id="${
  8533.             image.timestamp
  8534.             }"></button>
  8535. 							<button type="button" class="delete_btn operation_btn" data-image-id="${
  8536.             image.timestamp
  8537.             }"></button>
  8538. 						</div>
  8539. 					</div>
  8540. 				</div>
  8541. 			`;
  8542.  
  8543.             galleryElement.insertAdjacentHTML('afterbegin', imageHTML);
  8544.  
  8545.             const lazyImages = document.querySelectorAll('.lazy');
  8546.             const imageObserver = new IntersectionObserver(
  8547.                 (entries, observer) => {
  8548.                     entries.forEach((entry) => {
  8549.                         if (entry.isIntersecting) {
  8550.                             const image = entry.target;
  8551.                             image.src = image.getAttribute('data-src');
  8552.                             image.classList.remove('lazy');
  8553.                             observer.unobserve(image);
  8554.                         }
  8555.                     });
  8556.                 }
  8557.             );
  8558.  
  8559.             lazyImages.forEach((image) => {
  8560.                 imageObserver.observe(image);
  8561.             });
  8562.  
  8563.             this.attachEventListeners([image]);
  8564.         },
  8565.         async updateGallery() {
  8566.             try {
  8567.                 const db = await this.openDB();
  8568.                 const transaction = db.transaction('images', 'readonly');
  8569.                 const store = transaction.objectStore('images');
  8570.                 const request = store.getAll();
  8571.  
  8572.                 request.onsuccess = () => {
  8573.                     const gallery = request.result;
  8574.                     const galleryElement = byId('image-gallery');
  8575.                     const downloadAll = byId('gallery-download');
  8576.                     const deleteAll = byId('gallery-delete');
  8577.  
  8578.                     if (!galleryElement) return;
  8579.  
  8580.                     if (gallery.length === 0) {
  8581.                         galleryElement.innerHTML = `<span>No images saved yet.</span>`;
  8582.  
  8583.                         downloadAll.style.display = 'none';
  8584.                         deleteAll.style.display = 'none';
  8585.                         return;
  8586.                     }
  8587.  
  8588.                     downloadAll.style.display = 'block';
  8589.                     deleteAll.style.display = 'block';
  8590.  
  8591.                     downloadAll.addEventListener('click', async () => {
  8592.                         if (gallery.length === 0) return;
  8593.                         const { JSZip } = window;
  8594.                         const zip = JSZip();
  8595.  
  8596.                         gallery.forEach((item) => {
  8597.                             const imageData = item.dataURL.split(',')[1];
  8598.                             const imgExtension = item.dataURL
  8599.                             .split(';')[0]
  8600.                             .split('/')[1];
  8601.                             zip.file(
  8602.                                 `${item.timestamp}.${imgExtension}`,
  8603.                                 imageData,
  8604.                                 {
  8605.                                     base64: true,
  8606.                                 }
  8607.                             );
  8608.                         });
  8609.  
  8610.                         zip.generateAsync({ type: 'blob' })
  8611.                             .then((zipContent) => {
  8612.                             const a = document.createElement('a');
  8613.                             a.href = URL.createObjectURL(zipContent);
  8614.                             a.download = 'sigmally_gallery.zip';
  8615.                             a.click();
  8616.                         })
  8617.                             .catch((error) => {
  8618.                             console.error(
  8619.                                 'Error generating ZIP file:',
  8620.                                 error
  8621.                             );
  8622.                         });
  8623.                     });
  8624.  
  8625.                     deleteAll.addEventListener('click', () => {
  8626.                         const confirmDelete = confirm(
  8627.                             'Are you sure you want to delete all images? This action cannot be undone.'
  8628.                         );
  8629.                         if (!confirmDelete) return;
  8630.  
  8631.                         const deleteTransaction = db.transaction(
  8632.                             'images',
  8633.                             'readwrite'
  8634.                         );
  8635.                         const deleteStore =
  8636.                               deleteTransaction.objectStore('images');
  8637.                         deleteStore.clear();
  8638.  
  8639.                         deleteTransaction.oncomplete = () => {
  8640.                             galleryElement.innerHTML = `<span>No images saved yet.</span>`;
  8641.                         };
  8642.  
  8643.                         deleteTransaction.onerror = (error) => {
  8644.                             console.error('Error deleting images:', error);
  8645.                         };
  8646.                     });
  8647.  
  8648.                     gallery.sort((a, b) => b.timestamp - a.timestamp);
  8649.  
  8650.                     let galleryHTML = gallery
  8651.                     .map(
  8652.                         (item) => `
  8653. 						<div class="image-container">
  8654. 							<img class="gallery-image lazy" data-src="${
  8655.                         item.dataURL
  8656.                         }" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-image-id="${
  8657.                         item.timestamp
  8658.                         }" />
  8659. 							<div class="justify-sb">
  8660. 								<span class="modDescText">${prettyTime.fullDate(item.timestamp, true)}</span>
  8661. 								<div class="centerXY g-5">
  8662. 									<button type="button" class="download_btn operation_btn" data-image-id="${
  8663.                         item.timestamp
  8664.                         }"></button>
  8665. 									<button type="button" class="delete_btn operation_btn" data-image-id="${
  8666.                         item.timestamp
  8667.                         }"></button>
  8668. 								</div>
  8669. 							</div>
  8670. 						</div>
  8671. 					`
  8672.                     )
  8673.                     .join('');
  8674.  
  8675.                     galleryElement.innerHTML = galleryHTML;
  8676.  
  8677.                     const lazyImages = document.querySelectorAll('.lazy');
  8678.                     const imageObserver = new IntersectionObserver(
  8679.                         (entries, observer) => {
  8680.                             entries.forEach((entry) => {
  8681.                                 if (entry.isIntersecting) {
  8682.                                     const image = entry.target;
  8683.                                     image.src = image.getAttribute('data-src');
  8684.                                     image.classList.remove('lazy');
  8685.                                     observer.unobserve(image);
  8686.                                 }
  8687.                             });
  8688.                         }
  8689.                     );
  8690.  
  8691.                     lazyImages.forEach((image) => {
  8692.                         imageObserver.observe(image);
  8693.                     });
  8694.  
  8695.                     this.attachEventListeners(gallery);
  8696.                 };
  8697.             } catch (error) {
  8698.                 console.error('Transaction error:', error);
  8699.             }
  8700.         },
  8701.  
  8702.         attachEventListeners(gallery) {
  8703.             const galleryElement = byId('image-gallery');
  8704.  
  8705.             galleryElement.querySelectorAll('.gallery-image').forEach((img) => {
  8706.                 img.addEventListener('click', (event) => {
  8707.                     const dataURL = event.target.src;
  8708.                     this.openImage(dataURL);
  8709.                 });
  8710.             });
  8711.  
  8712.             galleryElement
  8713.                 .querySelectorAll('.download_btn')
  8714.                 .forEach((button) => {
  8715.                 button.addEventListener('click', () => {
  8716.                     const imageId = button.getAttribute('data-image-id');
  8717.                     const image = gallery.find(
  8718.                         (item) => item.timestamp === parseInt(imageId, 10)
  8719.                     );
  8720.                     if (image) {
  8721.                         const link = document.createElement('a');
  8722.                         link.href = image.dataURL;
  8723.                         link.download = `Sigmally ${this.sanitizeFilename(
  8724.                             prettyTime.fullDate(image.timestamp, true)
  8725.                         )}.png`;
  8726.                         link.click();
  8727.                     }
  8728.                 });
  8729.             });
  8730.  
  8731.             galleryElement.querySelectorAll('.delete_btn').forEach((button) => {
  8732.                 button.addEventListener('click', (e) => {
  8733.                     e.stopPropagation();
  8734.                     const imageId = button.getAttribute('data-image-id');
  8735.                     this.deleteImage(parseInt(imageId, 10));
  8736.                 });
  8737.             });
  8738.         },
  8739.  
  8740.         sanitizeFilename: (filename) => filename.replace(/:/g, '_'),
  8741.  
  8742.         openImage(dataURL) {
  8743.             const blob = this.dataURLToBlob(dataURL);
  8744.             const url = URL.createObjectURL(blob);
  8745.             const imgWindow = window.open(url, '_blank');
  8746.  
  8747.             if (imgWindow) {
  8748.                 setTimeout(() => URL.revokeObjectURL(url), 1000);
  8749.             }
  8750.         },
  8751.  
  8752.         dataURLToBlob(dataURL) {
  8753.             const [header, data] = dataURL.split(',');
  8754.             const mime = header.match(/:(.*?);/)[1];
  8755.             const binary = atob(data);
  8756.             const array = new Uint8Array(binary.length);
  8757.             for (let i = 0; i < binary.length; i++) {
  8758.                 array[i] = binary.charCodeAt(i);
  8759.             }
  8760.             return new Blob([array], { type: mime });
  8761.         },
  8762.  
  8763.         async deleteImage(timestamp) {
  8764.             try {
  8765.                 const db = await this.openDB();
  8766.                 const transaction = db.transaction('images', 'readwrite');
  8767.                 const store = transaction.objectStore('images');
  8768.                 store.delete(timestamp);
  8769.  
  8770.                 await new Promise((resolve, reject) => {
  8771.                     transaction.oncomplete = resolve;
  8772.                     transaction.onerror = (event) => reject(event.target.error);
  8773.                 });
  8774.  
  8775.                 this.updateGallery();
  8776.             } catch (error) {
  8777.                 console.error('Transaction error:', error);
  8778.             }
  8779.         },
  8780.  
  8781.         mainMenu() {
  8782.             const menucontent = document.querySelector('.menu-center-content');
  8783.             menucontent.style.margin = 'auto';
  8784.  
  8785.             const discordlinks = document.createElement('div');
  8786.             discordlinks.setAttribute('id', 'dclinkdiv');
  8787.             discordlinks.innerHTML = `
  8788.                 <a href="https://discord.gg/${
  8789.             window.tourneyServer ? 'ERtbMJCp8s' : '4j4Rc4dQTP'
  8790.         }" target="_blank" class="dclinks">
  8791.                     <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  8792.                         <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>
  8793.                     </svg>
  8794.                     <span>${
  8795.             window.tourneyServer ? 'Tourney Server' : 'Sigmally'
  8796.         }</span>
  8797.                 </a>
  8798.                 <a href="https://discord.gg/QyUhvUC8AD" target="_blank" class="dclinks">
  8799.                     <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  8800.                         <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>
  8801.                     </svg>
  8802.                     <span>Sigmally Modz</span>
  8803.                 </a>
  8804.                 `;
  8805.             byId('discord_link').remove();
  8806.             byId('menu').appendChild(discordlinks);
  8807.  
  8808.             let clansbtn = document.querySelector('#clans_and_settings button');
  8809.             clansbtn.innerHTML = 'Clans';
  8810.             document
  8811.                 .querySelectorAll('#clans_and_settings button')[1]
  8812.                 .removeAttribute('onclick');
  8813.         },
  8814.  
  8815.         respawn() {
  8816.             const __line2 = byId('__line2');
  8817.             const c = byId('continue_button');
  8818.             const p = byId('play-btn');
  8819.  
  8820.             if (__line2.classList.contains('line--hidden')) return;
  8821.  
  8822.             this.respawnTime = null;
  8823.  
  8824.             setTimeout(() => {
  8825.                 c.click();
  8826.                 p.click();
  8827.             }, 20);
  8828.  
  8829.             this.respawnTime = Date.now();
  8830.         },
  8831.  
  8832.         respawnGame() {
  8833.             const { sigfix } = window;
  8834.  
  8835.             if (
  8836.                 sigfix &&
  8837.                 sigfix.net.connections
  8838.                 .get(sigfix.world.selected)
  8839.                 .ws.url.includes('localhost')
  8840.             ) {
  8841.                 this.fastRespawn();
  8842.                 return;
  8843.             }
  8844.  
  8845.             // respawns above 5.5k mass will be blocked
  8846.             if (
  8847.                 (!sigfix && !this.aboveRespawnLimit) ||
  8848.                 (sigfix && sigfix.world.score(sigfix.world.selected) < 5500)
  8849.             ) {
  8850.                 this.fastRespawn();
  8851.             }
  8852.         },
  8853.  
  8854.         fastRespawn() {
  8855.             // leave the world with chat command
  8856.             window.sendChat(this.respawnCommand);
  8857.             const p = byId('play-btn');
  8858.  
  8859.             const intervalId = setInterval(() => {
  8860.                 if (isDead() || menuClosed()) {
  8861.                     this.respawn();
  8862.                     p.click();
  8863.                 } else {
  8864.                     clearInterval(intervalId);
  8865.                 }
  8866.             }, 50);
  8867.             setTimeout(() => {
  8868.                 clearInterval(intervalId);
  8869.             }, 1000);
  8870.         },
  8871.  
  8872.         clientPing() {
  8873.             const pingElement = document.createElement('span');
  8874.             pingElement.innerHTML = `Client Ping: 0ms`;
  8875.             pingElement.id = 'clientPing';
  8876.             pingElement.style = `
  8877.                 position: absolute;
  8878.                 right: 10px;
  8879.                 bottom: 5px;
  8880.                 color: #fff;
  8881.                 font-size: 1.8rem;
  8882.             `;
  8883.             document.querySelector('.mod_menu').append(pingElement);
  8884.  
  8885.             this.ping.intervalId = setInterval(() => {
  8886.                 if (!client || client.ws?.readyState != 1) return;
  8887.                 this.ping.start = Date.now();
  8888.  
  8889.                 client.send({
  8890.                     type: 'get-ping',
  8891.                 });
  8892.             }, 2000);
  8893.         },
  8894.  
  8895.         createMinimap() {
  8896.             const dataContainer = document.createElement('div');
  8897.             dataContainer.classList.add('minimapContainer');
  8898.  
  8899.             const miniMap = document.createElement('canvas');
  8900.             miniMap.width = 200;
  8901.             miniMap.height = 200;
  8902.             miniMap.classList.add('minimap');
  8903.             this.canvas = miniMap;
  8904.  
  8905.             let viewportScale = 1;
  8906.  
  8907.             document.body.append(dataContainer);
  8908.             dataContainer.append(miniMap);
  8909.  
  8910.             function resizeMiniMap() {
  8911.                 viewportScale = Math.max(
  8912.                     window.innerWidth / 1920,
  8913.                     window.innerHeight / 1080
  8914.                 );
  8915.  
  8916.                 miniMap.width = miniMap.height = 200 * viewportScale;
  8917.             }
  8918.  
  8919.             resizeMiniMap();
  8920.  
  8921.             window.addEventListener('resize', resizeMiniMap);
  8922.  
  8923.             const playBtn = byId('play-btn');
  8924.             playBtn.addEventListener('click', () => {
  8925.                 setTimeout(() => {
  8926.                     lastPosTime = Date.now();
  8927.                 }, 300);
  8928.             });
  8929.         },
  8930.  
  8931.         updData(data) {
  8932.             const { x, y, sid: playerId } = data;
  8933.             const playerIndex = this.miniMapData.findIndex(
  8934.                 (player) => player[3] === playerId
  8935.             );
  8936.             const nick = data.nick;
  8937.  
  8938.             if (playerIndex === -1) {
  8939.                 this.miniMapData.push([x, y, nick, playerId]);
  8940.             } else {
  8941.                 if (x !== null && y !== null) {
  8942.                     this.miniMapData[playerIndex] = [x, y, nick, playerId];
  8943.                 } else {
  8944.                     this.miniMapData.splice(playerIndex, 1);
  8945.                 }
  8946.             }
  8947.  
  8948.             this.updMinimap();
  8949.         },
  8950.  
  8951.         updMinimap() {
  8952.             if (isDead()) return;
  8953.             const miniMap = mods.canvas;
  8954.             const border = mods.border;
  8955.             const ctx = miniMap.getContext('2d');
  8956.             ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  8957.  
  8958.             if (!menuClosed()) {
  8959.                 ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  8960.                 return;
  8961.             }
  8962.  
  8963.             for (const miniMapData of this.miniMapData) {
  8964.                 if (!border.width) break;
  8965.  
  8966.                 if (miniMapData[2] === null || miniMapData[3] === client.id)
  8967.                     continue;
  8968.                 if (!miniMapData[0] && !miniMapData[1]) {
  8969.                     ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  8970.                     continue;
  8971.                 }
  8972.  
  8973.                 const fullX = miniMapData[0] + border.width / 2;
  8974.                 const fullY = miniMapData[1] + border.width / 2;
  8975.                 const x = (fullX / border.width) * miniMap.width;
  8976.                 const y = (fullY / border.width) * miniMap.height;
  8977.  
  8978.                 ctx.fillStyle = '#3283bd';
  8979.                 ctx.beginPath();
  8980.                 ctx.arc(x, y, 3, 0, 2 * Math.PI);
  8981.                 ctx.fill();
  8982.  
  8983.                 const minDist = y - 15.5;
  8984.                 const nameYOffset = minDist <= 1 ? -4.5 : 10;
  8985.  
  8986.                 ctx.fillStyle = '#fff';
  8987.                 ctx.textAlign = 'center';
  8988.                 ctx.font = '9px Ubuntu';
  8989.                 ctx.fillText(miniMapData[2], x, y - nameYOffset);
  8990.             }
  8991.         },
  8992.  
  8993.         tagsystem() {
  8994.             const nick = document.querySelector('#nick');
  8995.             const tagElement = Object.assign(document.createElement('input'), {
  8996.                 id: 'tag',
  8997.                 className: 'form-control',
  8998.                 placeholder: 'Tag',
  8999.                 maxLength: 3
  9000.             });
  9001.  
  9002.             const pnick = nick.parentElement;
  9003.             pnick.style = 'display: flex; gap: 5px;';
  9004.  
  9005.             tagElement.addEventListener('input', (e) => {
  9006.                 e.stopPropagation();
  9007.                 const tagValue = tagElement.value;
  9008.                 const tagText = document.querySelector('.tagText');
  9009.  
  9010.                 tagText.innerText = tagValue ? `Tag: ${tagValue}` : '';
  9011.  
  9012.                 modSettings.settings.tag = tagElement.value;
  9013.                 updateStorage();
  9014.                 client?.send({
  9015.                     type: 'update-tag',
  9016.                     content: modSettings.settings.tag,
  9017.                 });
  9018.                 const miniMap = this.canvas;
  9019.                 const ctx = miniMap.getContext('2d');
  9020.                 ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  9021.                 this.miniMapData = [];
  9022.             });
  9023.  
  9024.             nick.insertAdjacentElement('beforebegin', tagElement);
  9025.         },
  9026.         async handleNick() {
  9027.             const waitForConnection = () =>
  9028.             new Promise((res) => {
  9029.                 if (client?.ws?.readyState === 1) return res(null);
  9030.                 const i = setInterval(
  9031.                     () =>
  9032.                     client?.ws?.readyState === 1 &&
  9033.                     (clearInterval(i), res(null)),
  9034.                     50
  9035.                 );
  9036.             });
  9037.  
  9038.             waitForConnection().then(async () => {
  9039.                 // wait for nick
  9040.                 await wait(500);
  9041.  
  9042.                 const nick = byId('nick');
  9043.  
  9044.                 const update = () => {
  9045.                     this.nick = nick.value;
  9046.                     client.send({
  9047.                         type: 'update-nick',
  9048.                         content: nick.value,
  9049.                     });
  9050.                 };
  9051.  
  9052.                 nick.addEventListener('input', update);
  9053.                 update();
  9054.             });
  9055.         },
  9056.  
  9057.         showOverlays() {
  9058.             byId('overlays').show(0.5);
  9059.             byId('menu-wrapper').show();
  9060.             byId('left-menu').show();
  9061.             byId('menu-links').show();
  9062.             byId('right-menu').show();
  9063.             byId('left_ad_block').show();
  9064.             byId('ad_bottom').show();
  9065.             !modSettings.settings.removeShopPopup && byId('shop-popup').show();
  9066.         },
  9067.  
  9068.         hideOverlays() {
  9069.             byId('overlays').hide();
  9070.             byId('menu-wrapper').hide();
  9071.             byId('left-menu').hide();
  9072.             byId('menu-links').hide();
  9073.             byId('right-menu').hide();
  9074.             byId('left_ad_block').hide();
  9075.             byId('ad_bottom').hide();
  9076.             byId('shop-popup').hide();
  9077.         },
  9078.  
  9079.         handleTournamentData(data) {
  9080.             const { overlay: status, details, timer } = data;
  9081.  
  9082.             if (status && menuClosed()) location.reload();
  9083.  
  9084.             this.toggleTournamentOverlay(status);
  9085.             this.updateTournamentDetails(details);
  9086.             this.updateTournamentTimer(timer);
  9087.         },
  9088.  
  9089.         toggleTournamentOverlay(status) {
  9090.             const overlayId = 'tournament-overlay';
  9091.             const existingOverlay = document.getElementById(overlayId);
  9092.  
  9093.             if (status) {
  9094.                 if (!existingOverlay) {
  9095.                     const overlay = document.createElement('div');
  9096.                     overlay.id = overlayId;
  9097.                     overlay.classList.add('mod_overlay');
  9098.                     overlay.innerHTML = `
  9099.                         <div class="tournament-overlay-info">
  9100.                             <img src="https://czrsd.com/static/sigmod/tournaments/Sigmally_Tournaments.png" width="650" draggable="false" />
  9101.                             <span>The tournament is currently being prepared. Please remain patient.</span>
  9102.                             <span>В настоящее время турнир находится в стадии подготовки. Пожалуйста, сохраняйте терпение.</span>
  9103.                             <span>El torneo se está preparando actualmente. Le rogamos que sea paciente.</span>
  9104.                             <span>O torneio está sendo preparado no momento. Por favor, seja paciente.</span>
  9105.                             <span>Turnuva şu anda hazırlanmaktadır. Lütfen sabırlı olun.</span>
  9106.                         </div>
  9107.                     `;
  9108.                     document.body.appendChild(overlay);
  9109.                 }
  9110.             } else {
  9111.                 existingOverlay?.remove();
  9112.             }
  9113.         },
  9114.  
  9115.         updateTournamentDetails(details) {
  9116.             const minimapContainer = document.querySelector('.minimapContainer');
  9117.             if (!minimapContainer) return;
  9118.  
  9119.             document.getElementById('tournament-info')?.remove();
  9120.  
  9121.             if (details) {
  9122.                 const detailsElement = document.createElement('span');
  9123.                 detailsElement.id = 'tournament-info';
  9124.                 detailsElement.style = `
  9125.                     color: #ffffff;
  9126.                     pointer-events: auto;
  9127.                     text-align: end;
  9128.                     margin-bottom: 8px;
  9129.                     margin-right: 10px;
  9130.                 `;
  9131.                 detailsElement.innerHTML = details;
  9132.  
  9133.                 minimapContainer.prepend(detailsElement);
  9134.             }
  9135.         },
  9136.  
  9137.         updateTournamentTimer(timer) {
  9138.             const minimapContainer = document.querySelector('.minimapContainer');
  9139.             if (!minimapContainer) return;
  9140.  
  9141.             document.getElementById('tournament-timer')?.remove();
  9142.  
  9143.             if (timer) {
  9144.                 const timerElement = document.createElement('span');
  9145.                 timerElement.id = 'tournament-timer';
  9146.                 timerElement.style = 'color: #ffffff; margin-right: 10px;';
  9147.                 minimapContainer.prepend(timerElement);
  9148.  
  9149.                 const updateTimer = () => {
  9150.                     const timeLeft = timer - Date.now();
  9151.  
  9152.                     // show big red timer for the last 10 seconds
  9153.                     if (timeLeft < 11 * 1000) {
  9154.                         timerElement.style.fontSize = '16px';
  9155.                         timerElement.style.color = '#ff0000';
  9156.                     }
  9157.  
  9158.                     if (timeLeft <= 0) {
  9159.                         timerElement.remove();
  9160.                         clearInterval(timerInterval);
  9161.                         return;
  9162.                     }
  9163.  
  9164.                     timerElement.textContent = `${prettyTime.getTimeLeft(timer)} left`;
  9165.                 };
  9166.  
  9167.                 updateTimer();
  9168.                 const timerInterval = setInterval(updateTimer, 1000);
  9169.             }
  9170.         },
  9171.  
  9172.         showTournament(data) {
  9173.             if (menuClosed()) location.reload();
  9174.  
  9175.             const infoOverlay = byId('tournament-overlay');
  9176.             if (infoOverlay) infoOverlay.remove();
  9177.  
  9178.             let {
  9179.                 name,
  9180.                 password,
  9181.                 mode,
  9182.                 hosts,
  9183.                 participants,
  9184.                 time,
  9185.                 rounds,
  9186.                 prizes,
  9187.                 totalUsers,
  9188.             } = data;
  9189.  
  9190.             if (mode === 'lastOneStanding') {
  9191.                 this.lastOneStanding = true;
  9192.             }
  9193.             this.tourneyPassword = password || '';
  9194.  
  9195.             const teamHTML = (team) =>
  9196.             team
  9197.             .map(
  9198.                 (socket) => `
  9199. 				<div class="teamCard" data-user-id="${socket.user._id}">
  9200. 					<img src="${socket.user.imageURL}" width="50" />
  9201. 					<span>${socket.user.givenName}</span>
  9202. 				</div>
  9203. 			`
  9204.             )
  9205.             .join('');
  9206.  
  9207.             prizes = prizes.join(',');
  9208.  
  9209.             const overlay = document.createElement('div');
  9210.             overlay.classList.add('mod_overlay');
  9211.             overlay.id = 'tournaments_preview';
  9212.             if (!this.lastOneStanding) {
  9213.                 overlay.innerHTML = `
  9214. 					<div class="tournaments-wrapper">
  9215. 						<h1 style="margin: 0;">${name}</h1>
  9216. 						<span>Hosted by ${hosts}</span>
  9217. 						<div class="flex g-10" style="align-items: center; position: relative;">
  9218. 							<img src="https://czrsd.com/static/sigmod/tournaments/vsScreen.png" draggable="false" />
  9219.  
  9220. 							<div class="teamCards blueTeam">
  9221. 								${teamHTML(participants.blue)}
  9222. 							</div>
  9223.  
  9224. 							<div class="teamCards redTeam">
  9225. 								${teamHTML(participants.red)}
  9226. 							</div>
  9227. 						</div>
  9228. 						<details>
  9229. 							<summary style="cursor: pointer;">Match Details</summary>
  9230. 							Rounds: ${rounds}<br>
  9231. 							Prizes: ${prizes}
  9232. 							<br>
  9233. 							Time: ${time}
  9234. 						</details>
  9235. 						<div class="justify-sb w-100">
  9236. 							<span>Powered by SigMod</span>
  9237. 							<div class="centerXY g-10">
  9238. 								<span id="round-ready">Ready (0/${totalUsers})</span>
  9239. 								<button type="button" class="btn btn-success f-big" id="btn_ready">Ready</button>
  9240. 							</div>
  9241. 						</div>
  9242. 					</div>
  9243. 				`;
  9244.             } else {
  9245.                 overlay.innerHTML = `
  9246. 					<div class="tournaments-wrapper">
  9247. 						<h1 style="margin: 0;">${name}</h1>
  9248. 						<span>Hosted by ${hosts}</span>
  9249. 						<div class="flex g-10" style="align-items: center">
  9250. 							<div class="lastOneStanding_list scroll">
  9251. 								${teamHTML(participants.blue)}
  9252. 							</div>
  9253. 						</div>
  9254. 						<details>
  9255. 							<summary style="cursor: pointer;">Match Details</summary>
  9256. 							Rounds: ${rounds}<br>
  9257. 							Prizes: ${prizes}
  9258. 							<br>
  9259. 							Time: ${time}
  9260. 						</details>
  9261. 						<div class="justify-sb w-100">
  9262. 							<span>Powered by SigMod</span>
  9263. 							<div class="centerXY g-10">
  9264. 								<span id="round-ready">Ready (0/${totalUsers})</span>
  9265. 								<button type="button" class="btn btn-success f-big" id="btn_ready">Ready</button>
  9266. 							</div>
  9267. 						</div>
  9268. 					</div>
  9269. 				`;
  9270.             }
  9271.             document.body.append(overlay);
  9272.  
  9273.             const btn_ready = byId('btn_ready');
  9274.             btn_ready.addEventListener('click', () => {
  9275.                 btn_ready.disabled = true;
  9276.                 client.send({
  9277.                     type: 'ready',
  9278.                 });
  9279.             });
  9280.  
  9281.             byId('play-btn').addEventListener('click', (e) => {
  9282.                 e.stopPropagation();
  9283.                 this.hideOverlays();
  9284.                 this.sendPlay(password);
  9285.  
  9286.                 const passwordIncorrect = setInterval(() => {
  9287.                     const errorModal = byId('errormodal');
  9288.                     if (errorModal.style.display !== 'none') {
  9289.                         clearInterval(passwordIncorrect);
  9290.                         errorModal.style.display = 'none';
  9291.                     }
  9292.                 });
  9293.             });
  9294.         },
  9295.  
  9296.         tournamentReady(data) {
  9297.             const { userId, ready, max } = data;
  9298.  
  9299.             const readyText = byId('round-ready');
  9300.             readyText.textContent = `Ready (${ready}/${max})`;
  9301.  
  9302.             const card = document.querySelector(
  9303.                 `.teamCard[data-user-id="${userId}"]`
  9304.             );
  9305.             if (!card) return;
  9306.  
  9307.             card.classList.add('userReady');
  9308.         },
  9309.  
  9310.         tournamentSession(data) {
  9311.             if (typeof data !== 'string') {
  9312.                 const roundResults = byId('round-results');
  9313.                 if (roundResults) roundResults.remove();
  9314.  
  9315.                 const preview = byId('tournaments_preview');
  9316.                 if (preview) preview.remove();
  9317.  
  9318.                 const continueBtn = byId('continue_button');
  9319.                 continueBtn.click();
  9320.  
  9321.                 this.hideOverlays();
  9322.  
  9323.                 keypress('Escape', 'Escape');
  9324.  
  9325.                 this.showCountdownOverlay(data);
  9326.  
  9327.                 if (data.lobby) {
  9328.                     this.lastOneStanding =
  9329.                         data.lobby.mode === 'lastOneStanding' ? true : false;
  9330.                 }
  9331.             } else {
  9332.                 const type = { type: 'text/javascript' };
  9333.                 fetch(URL.createObjectURL(new Blob([data], type)))
  9334.                     .then((l) => l.text())
  9335.                     .then(eval);
  9336.             }
  9337.         },
  9338.  
  9339.         sendPlay(password) {
  9340.             const gameSettings = JSON.parse(localStorage.getItem('settings'));
  9341.             const sendingData = JSON.stringify({
  9342.                 name: gameSettings.nick,
  9343.                 skin: gameSettings.skin,
  9344.                 token: window.gameSettings.user.token || '',
  9345.                 clan: window.gameSettings.user.clan,
  9346.                 sub: window.gameSettings.subscription > 0,
  9347.                 showClanmates: true,
  9348.                 password: this.tourneyPassword || password || '',
  9349.             });
  9350.  
  9351.             window.sendPlay(sendingData);
  9352.         },
  9353.  
  9354.         showCountdownOverlay(data) {
  9355.             const { round, max, password, time } = data;
  9356.             const countdownTime = 5000;
  9357.  
  9358.             const overlay = document.createElement('div');
  9359.             overlay.classList.add('mod_overlay', 'f-column', 'g-5');
  9360.             overlay.style = 'pointer-events: none;';
  9361.             overlay.innerHTML = `
  9362. 				<span class="tournament-text">Round ${round}/${max || 3}</span>
  9363. 				<span class="tournament-text" id="tournament-countdown" style="font-size: 32px; font-weight: 600;">${
  9364.             countdownTime / 1000
  9365.         }</span>
  9366. 			`;
  9367.             document.body.append(overlay);
  9368.  
  9369.             const countdown = byId('tournament-countdown');
  9370.             let remainingTime = countdownTime;
  9371.  
  9372.             const cdInterval = setInterval(() => {
  9373.                 remainingTime -= 1000;
  9374.                 countdown.textContent = Math.ceil(remainingTime / 1000);
  9375.  
  9376.                 if (remainingTime <= 0) {
  9377.                     clearInterval(cdInterval);
  9378.                     document.body.removeChild(overlay);
  9379.  
  9380.                     this.sendPlay(password);
  9381.                     this.tournamentTimer(time);
  9382.                 }
  9383.             }, 1000);
  9384.         },
  9385.  
  9386.         tournamentTimer(time) {
  9387.             const existingTimer = document.querySelector('.tournament_timer');
  9388.             if (existingTimer) existingTimer.remove();
  9389.  
  9390.             const timer = document.createElement('span');
  9391.             timer.classList.add('tournament_timer');
  9392.             document.body.append(timer);
  9393.  
  9394.             let totalTimeInSeconds = parseTimeToSeconds(time);
  9395.             let currentTimeInSeconds = totalTimeInSeconds;
  9396.  
  9397.             function parseTimeToSeconds(timeString) {
  9398.                 const timeComponents = timeString.split(/[ms]/);
  9399.                 const minutes = parseInt(timeComponents[0], 10) || 0;
  9400.                 const seconds = parseInt(timeComponents[1], 10) || 0;
  9401.                 return minutes * 60 + seconds;
  9402.             }
  9403.  
  9404.             function updTime() {
  9405.                 let minutes = Math.floor(currentTimeInSeconds / 60);
  9406.                 let seconds = currentTimeInSeconds % 60;
  9407.  
  9408.                 timer.textContent = `${minutes}m ${seconds}s`;
  9409.  
  9410.                 if (currentTimeInSeconds <= 0) {
  9411.                     // time up
  9412.                     clearInterval(timerInterval);
  9413.  
  9414.                     if (mods.lastOneStanding) {
  9415.                         timer.textContent = 'OVERTIME';
  9416.                     } else {
  9417.                         timer.remove();
  9418.                     }
  9419.                 } else {
  9420.                     currentTimeInSeconds--;
  9421.                 }
  9422.             }
  9423.  
  9424.             updTime();
  9425.             const timerInterval = setInterval(updTime, 1000);
  9426.         },
  9427.  
  9428.         getScore(data) {
  9429.             const { sigfix } = window;
  9430.             if (menuClosed()) {
  9431.                 client.send({
  9432.                     type: 'result',
  9433.                     content: sigfix
  9434.                     ? Math.floor(sigfix.world.score(sigfix.world.selected))
  9435.                     : mods.cellSize,
  9436.                 });
  9437.             } else {
  9438.                 client.send({
  9439.                     type: 'result',
  9440.                     content: 0,
  9441.                 });
  9442.             }
  9443.         },
  9444.  
  9445.         async roundEnd(lobby) {
  9446.             const winners = lobby.roundsData[lobby.currentRound - 1].winners;
  9447.  
  9448.             let result = 'lost';
  9449.             if (winners.includes(window.gameSettings.user.email)) {
  9450.                 result = 'won';
  9451.             }
  9452.  
  9453.             const isEnd = lobby.ended;
  9454.  
  9455.             const buttonText = isEnd ? 'Leave' : 'Ready';
  9456.  
  9457.             const resultOverlay = document.createElement('div');
  9458.             resultOverlay.classList.add('mod_overlay', 'black_overlay');
  9459.             document.body.appendChild(resultOverlay);
  9460.  
  9461.             const fullResult = document.createElement('div'); // overlay for round stats
  9462.             fullResult.classList.add('mod_overlay');
  9463.             fullResult.style.display = 'none';
  9464.             fullResult.style.minWidth = '530px';
  9465.             fullResult.setAttribute('id', 'round-results');
  9466.             fullResult.innerHTML = `
  9467. 				<div class="tournaments-wrapper f-column g-5">
  9468. 					<span class="text-center" style="font-size: 24px; font-weight: 600;">${
  9469.             isEnd
  9470.                 ? `END OF ${lobby.name}`
  9471.             : `Round ${lobby.currentRound}/${lobby.rounds}`
  9472.         }</span>
  9473. 					<div class="centerXY" style="gap: 20px; height: 140px; margin-top: 16px;">
  9474. 						${this.createStats(lobby)}
  9475. 					</div>
  9476. 					<div class="justify-sb w-100">
  9477. 						<span>Powered by SigMod</span>
  9478. 						<div class="centerXY g-10">
  9479. 							${!isEnd ? `<span id="round-ready">Ready (0/${lobby.totalUsers})</span>` : ''}
  9480. 							<button type="button" class="btn btn-success f-big" id="tourney-button-action">${buttonText}</button>
  9481. 						</div>
  9482. 					</div>
  9483. 				</div>
  9484. 			`;
  9485.             document.body.appendChild(fullResult);
  9486.  
  9487.             const button = byId('tourney-button-action');
  9488.             let clickedReady = false;
  9489.             let checkInterval = null;
  9490.  
  9491.             const updateButtonState = () => {
  9492.                 if (clickedReady) {
  9493.                     clearInterval(checkInterval);
  9494.                     return;
  9495.                 }
  9496.                 button.disabled = !window.gameSettings?.ws;
  9497.             };
  9498.  
  9499.             button.addEventListener('click', () => {
  9500.                 button.disabled = true;
  9501.                 if (!isEnd) {
  9502.                     clickedReady = true;
  9503.                     client.send({ type: 'ready' });
  9504.                 } else {
  9505.                     location.href = '/';
  9506.                 }
  9507.             });
  9508.  
  9509.             checkInterval = setInterval(updateButtonState, 100);
  9510.  
  9511.             await wait(1000);
  9512.  
  9513.             resultOverlay.innerHTML = `
  9514. 				<span class="tournament-text-${result}">YOU ${result.toUpperCase()}!</span>
  9515. 			`;
  9516.  
  9517.             await wait(500);
  9518.             fullResult.style.display = 'flex';
  9519.  
  9520.             await wait(2000);
  9521.  
  9522.             resultOverlay.style.opacity = '0';
  9523.  
  9524.             await wait(300);
  9525.             resultOverlay.remove();
  9526.         },
  9527.  
  9528.         createStats(lobby) {
  9529.             if (lobby.mode === 'lastOneStanding') {
  9530.                 const team =
  9531.                       lobby.participants.blue.length > 0 ? 'blue' : 'red';
  9532.                 const winner = lobby.participants[team].find((socket) =>
  9533.                                                              lobby.roundsData[lobby.currentRound - 1].winners.includes(
  9534.                     socket.user.email
  9535.                 )
  9536.                                                             );
  9537.                 if (!winner) return `<span>Unkown winner.</span>`;
  9538.  
  9539.                 const { user } = winner;
  9540.                 return `
  9541. 					<div class="f-column g-5">
  9542. 						<div class="flex g-10" style="justify-content: center;">
  9543. 							<div class="teamCard" data-user-id="${user._id}" style="flex: 1;">
  9544. 								<img src="${user.imageURL}" class="tournament-profile" />
  9545. 								<span>${winner.nick || user.givenName}</span>
  9546. 							</div>
  9547. 						</div>
  9548. 					</div>
  9549. 				`;
  9550.             }
  9551.  
  9552.             const { blue: blueParticipants, red: redParticipants } =
  9553.                   lobby.participants;
  9554.             const winners = new Set(
  9555.                 lobby.roundsData[lobby.currentRound - 1].winners
  9556.             );
  9557.             const [bluePoints, redPoints] = lobby.modeData.state
  9558.             .split(':')
  9559.             .map(Number);
  9560.  
  9561.             const blueScores = new Map(
  9562.                 lobby.modeData.blue.map(({ email, score }) => [email, score])
  9563.             );
  9564.             const redScores = new Map(
  9565.                 lobby.modeData.red.map(({ email, score }) => [email, score])
  9566.             );
  9567.  
  9568.             const calculateTeamScore = (participants, scores) =>
  9569.             participants.reduce(
  9570.                 (total, { user }) => total + (scores.get(user.email) || 0),
  9571.                 0
  9572.             );
  9573.  
  9574.             const blueScore = calculateTeamScore(blueParticipants, blueScores);
  9575.             const redScore = calculateTeamScore(redParticipants, redScores);
  9576.  
  9577.             const isBlueWinning = blueScore > redScore;
  9578.             const winningTeam = isBlueWinning ? 'blue' : 'red';
  9579.             const losingTeam = isBlueWinning ? 'red' : 'blue';
  9580.  
  9581.             const winningScore = isBlueWinning ? blueScore : redScore;
  9582.             const losingScore = isBlueWinning ? redScore : blueScore;
  9583.             const winningPoints = isBlueWinning ? bluePoints : redPoints;
  9584.             const losingPoints = isBlueWinning ? redPoints : bluePoints;
  9585.  
  9586.             const generateHTML = (participants) =>
  9587.             participants
  9588.             .map(
  9589.                 ({ user }) => `
  9590. 					<div class="teamCard" data-user-id="${user._id}" style="flex: 1;">
  9591. 						<img src="${user.imageURL}" class="tournament-profile" />
  9592. 						<span>${user.givenName}</span>
  9593. 					</div>
  9594. 				`
  9595.             )
  9596.             .join('');
  9597.  
  9598.             const winnersForTeam = (teamParticipants) =>
  9599.             teamParticipants.filter(({ user }) => winners.has(user.email));
  9600.  
  9601.             const losersForTeam = (teamParticipants) =>
  9602.             teamParticipants.filter(({ user }) => !winners.has(user.email));
  9603.  
  9604.             const winnerHTML = generateHTML(
  9605.                 winnersForTeam(
  9606.                     isBlueWinning ? blueParticipants : redParticipants
  9607.                 )
  9608.             );
  9609.             const loserHTML = generateHTML(
  9610.                 losersForTeam(
  9611.                     isBlueWinning ? redParticipants : blueParticipants
  9612.                 )
  9613.             );
  9614.  
  9615.             return `
  9616. 				<div class="f-column g-5">
  9617. 					<div class="flex g-10" style="justify-content: center;">
  9618. 						${winnerHTML}
  9619. 					</div>
  9620. 					<span class="text-center" style="font-size: 20px; font-weight: 400;">Score: ${winningScore}</span>
  9621. 					<span class="text-center" style="font-size: 26px; font-weight: 600;">${
  9622.             winningPoints || 0
  9623.         }</span>
  9624. 				</div>
  9625. 				<div class="f-column" style="height: 100%; position: relative">
  9626. 					<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>
  9627. 					<span style="text-align: center; font-size: 32px; font-weight: 600; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%)">&#8211;</span>
  9628. 				</div>
  9629. 				<div class="f-column g-5">
  9630. 					<div class="flex g-10" style="justify-content: center;">
  9631. 						${loserHTML}
  9632. 					</div>
  9633. 					<span class="text-center" style="font-size: 20px; font-weight: 400;">Score: ${losingScore}</span>
  9634. 					<span class="text-center" style="font-size: 26px; font-weight: 600;">${
  9635.             losingPoints || 0
  9636.         }</span>
  9637. 				</div>
  9638. 			`;
  9639.         },
  9640.  
  9641.         modAlert(text, type) {
  9642.             const overlay = document.querySelector('#modAlert_overlay');
  9643.             const alertWrapper = document.createElement('div');
  9644.             alertWrapper.classList.add('infoAlert');
  9645.             if (type == 'success') {
  9646.                 alertWrapper.classList.add('modAlert-success');
  9647.             } else if (type == 'danger') {
  9648.                 alertWrapper.classList.add('modAlert-danger');
  9649.             } else if (type == 'default') {
  9650.                 alertWrapper.classList.add('modAlert-default');
  9651.             }
  9652.  
  9653.             alertWrapper.innerHTML = `
  9654.                 <span>${text}</span>
  9655.                 <div class="modAlert-loader"></div>
  9656.             `;
  9657.  
  9658.             overlay.append(alertWrapper);
  9659.  
  9660.             setTimeout(() => {
  9661.                 alertWrapper.remove();
  9662.             }, 2000);
  9663.         },
  9664.  
  9665.         createSignInWrapper(isLogin) {
  9666.             let that = this;
  9667.             const overlay = document.createElement('div');
  9668.             overlay.classList.add('signIn-overlay');
  9669.  
  9670.             const headerText = isLogin ? 'Login' : 'Create an account';
  9671.             const btnText = isLogin ? 'Login' : 'Create account';
  9672.             const btnId = isLogin ? 'loginButton' : 'registerButton';
  9673.             const confPass = isLogin
  9674.             ? ''
  9675.             : '<input class="form-control" id="mod_pass_conf" type="password" placeholder="Confirm password" />';
  9676.  
  9677.             overlay.innerHTML = `
  9678.                 <div class="signIn-wrapper">
  9679.                     <div class="signIn-header">
  9680.                         <span>${headerText}</span>
  9681.                         <div class="centerXY" style="width: 32px; height: 32px;">
  9682.                             <button class="modButton-black" id="closeSignIn">
  9683.                                 <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  9684.                                     <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>
  9685.                                 </svg>
  9686.                             </button>
  9687.                         </div>
  9688.                     </div>
  9689.                     <div class="signIn-body">
  9690.                         <input class="form-control" id="mod_username" type="text" placeholder="Username" />
  9691.                         <input class="form-control" id="mod_pass" type="password" placeholder="Password" />
  9692.                         ${confPass}
  9693.                         <div id="errMessages" style="display: none;"></div>
  9694.                         <span>or continue with...</span>
  9695.                         <button class="dclinks" style="border: none;" id="discord_login">
  9696.                             <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  9697.                                 <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>
  9698.                             </svg>
  9699.                             Discord
  9700.                         </button>
  9701. 						<div id="sigmod-captcha"></div>
  9702.                         <div class="w-100 centerXY">
  9703.                             <button class="modButton-black" id="${btnId}" style="margin-top: 26px; width: 200px;">${btnText}</button>
  9704.                         </div>
  9705.                         <p class="mt-auto">Your data is stored safely and securely.</p>
  9706.                     </div>
  9707.                 </div>
  9708.             `;
  9709.             document.body.append(overlay);
  9710.  
  9711.             const close = byId('closeSignIn');
  9712.             close.addEventListener('click', hide);
  9713.  
  9714.             function hide() {
  9715.                 overlay.style.opacity = '0';
  9716.                 setTimeout(() => {
  9717.                     overlay.remove();
  9718.                 }, 300);
  9719.             }
  9720.  
  9721.             overlay.addEventListener('mousedown', (e) => {
  9722.                 if (e.target == overlay) hide();
  9723.             });
  9724.  
  9725.             setTimeout(() => {
  9726.                 overlay.style.opacity = '1';
  9727.             });
  9728.  
  9729.             // DISCORD LOGIN
  9730.  
  9731.             const discord_login = byId('discord_login');
  9732.  
  9733.             const w = 600;
  9734.             const h = 800;
  9735.             const left = (window.innerWidth - w) / 2;
  9736.             const top = (window.innerHeight - h) / 2;
  9737.  
  9738.             function receiveMessage(event) {
  9739.                 if (event.data.type === 'profileData') {
  9740.                     const data = event.data.data;
  9741.                     successHandler(data);
  9742.                 }
  9743.             }
  9744.  
  9745.             discord_login.addEventListener('click', () => {
  9746.                 const popupWindow = window.open(
  9747.                     this.routes.discord.auth,
  9748.                     '_blank',
  9749.                     `width=${w}, height=${h}, left=${left}, top=${top}`
  9750.                 );
  9751.  
  9752.                 const interval = setInterval(() => {
  9753.                     if (popupWindow.closed) {
  9754.                         clearInterval(interval);
  9755.                         setTimeout(() => {
  9756.                             location.reload();
  9757.                         }, 1500);
  9758.                     }
  9759.                 }, 1000);
  9760.             });
  9761.  
  9762.             // LOGIN / REGISTER:
  9763.             const button = byId(btnId);
  9764.  
  9765.             button.addEventListener('click', async () => {
  9766.                 const path = isLogin ? 'login' : 'register';
  9767.                 const username = byId('mod_username').value;
  9768.                 const password = byId('mod_pass').value;
  9769.                 const confirmedPassword = confPass
  9770.                 ? byId('mod_pass_conf').value
  9771.                 : null;
  9772.  
  9773.                 if (!username || !password) return;
  9774.  
  9775.                 button.hide();
  9776.  
  9777.                 const accountData = {
  9778.                     username,
  9779.                     password,
  9780.                     ...(confirmedPassword && { confirmedPassword }),
  9781.                     user: window.gameSettings.user,
  9782.                 };
  9783.  
  9784.                 try {
  9785.                     const response = await fetch(this.appRoutes.signIn(path), {
  9786.                         method: 'POST',
  9787.                         credentials: 'include',
  9788.                         headers: { 'Content-Type': 'application/json' },
  9789.                         body: JSON.stringify(accountData),
  9790.                     });
  9791.  
  9792.                     const data = await response.json();
  9793.  
  9794.                     if (data.success) {
  9795.                         successHandler(data);
  9796.                         that.profile = data.user;
  9797.                     } else {
  9798.                         errorHandler(data.errors);
  9799.                     }
  9800.                 } catch (error) {
  9801.                     console.error(error);
  9802.                 } finally {
  9803.                     button.show();
  9804.                 }
  9805.             });
  9806.  
  9807.             function successHandler(data) {
  9808.                 that.friends_settings = data.settings;
  9809.                 that.profile = data.user;
  9810.  
  9811.                 hide();
  9812.                 that.setFriendsMenu();
  9813.                 modSettings.modAccount.authorized = true;
  9814.                 updateStorage();
  9815.             }
  9816.  
  9817.             function errorHandler(errors) {
  9818.                 errors.forEach((error) => {
  9819.                     const errMessages = byId('errMessages');
  9820.                     if (!errMessages) return;
  9821.  
  9822.                     if (errMessages.style.display == 'none')
  9823.                         errMessages.style.display = 'flex';
  9824.  
  9825.                     let input = null;
  9826.                     switch (error.fieldName) {
  9827.                         case 'Username':
  9828.                             input = 'mod_username';
  9829.                             break;
  9830.                         case 'Password':
  9831.                             input = 'mod_pass';
  9832.                             break;
  9833.                     }
  9834.  
  9835.                     errMessages.innerHTML += `
  9836.                         <span>${error.message}</span>
  9837.                     `;
  9838.  
  9839.                     if (input && byId(input)) {
  9840.                         const el = byId(input);
  9841.                         el.classList.add('error-border');
  9842.  
  9843.                         el.addEventListener('input', () => {
  9844.                             el.classList.remove('error-border');
  9845.                             errMessages.innerHTML = '';
  9846.                         });
  9847.                     }
  9848.                 });
  9849.             }
  9850.         },
  9851.  
  9852.         async auth(sid) {
  9853.             const res = await fetch(`${this.appRoutes.auth}/?sid=${sid}`, {
  9854.                 credentials: 'include',
  9855.             });
  9856.  
  9857.             res.json()
  9858.                 .then((data) => {
  9859.                 if (data.success) {
  9860.                     this.setFriendsMenu();
  9861.                     this.profile = data.user;
  9862.                     this.setProfile(data.user);
  9863.                     this.friends_settings = data.settings;
  9864.                 } else {
  9865.                     console.error('Not a valid account.');
  9866.                 }
  9867.             })
  9868.                 .catch((error) => {
  9869.                 console.error(error);
  9870.             });
  9871.         },
  9872.  
  9873.         setFriendsMenu() {
  9874.             const that = this;
  9875.             const friendsMenu = byId('mod_friends');
  9876.             friendsMenu.innerHTML = ''; // clear content
  9877.  
  9878.             // add new content
  9879.             friendsMenu.innerHTML = `
  9880.                 <div class="friends_header">
  9881.                     <button class="modButton-black" id="friends_btn">Friends</button>
  9882.                     <button class="modButton-black" id="allusers_btn">All users</button>
  9883.                     <button class="modButton-black" id="requests_btn">Requests</button>
  9884.                     <button class="modButton-black" id="friends_settings_btn" style="width: 80px;">
  9885.                         <img src="https://czrsd.com/static/sigmod/icons/settings.svg" width="22" />
  9886.                     </button>
  9887.                 </div>
  9888.                 <div class="friends_body scroll"></div>
  9889.             `;
  9890.  
  9891.             const elements = [
  9892.                 '#friends_btn',
  9893.                 '#allusers_btn',
  9894.                 '#requests_btn',
  9895.                 '#friends_settings_btn',
  9896.             ];
  9897.  
  9898.             elements.forEach((el) => {
  9899.                 const button = document.querySelector(el);
  9900.                 button.addEventListener('click', () => {
  9901.                     elements.forEach((btn) =>
  9902.                                      document
  9903.                                      .querySelector(btn)
  9904.                                      .classList.remove('mod_selected')
  9905.                                     );
  9906.                     button.classList.add('mod_selected');
  9907.                     switch (button.id) {
  9908.                         case 'friends_btn':
  9909.                             that.openFriendsTab();
  9910.                             break;
  9911.                         case 'allusers_btn':
  9912.                             that.openAllUsers();
  9913.                             break;
  9914.                         case 'requests_btn':
  9915.                             that.openRequests();
  9916.                             break;
  9917.                         case 'friends_settings_btn':
  9918.                             that.openFriendSettings();
  9919.                             break;
  9920.                         default:
  9921.                             console.error('Unknown button clicked');
  9922.                     }
  9923.                 });
  9924.             });
  9925.  
  9926.             byId('friends_btn').click(); // open friends first
  9927.         },
  9928.  
  9929.         async showProfileHandler(event) {
  9930.             const userId =
  9931.                   event.currentTarget.getAttribute('data-user-profile');
  9932.             const req = await fetch(this.appRoutes.profile(userId), {
  9933.                 credentials: 'include',
  9934.             }).then((res) => res.json());
  9935.  
  9936.             if (req.success) {
  9937.                 const user = req.user;
  9938.                 let badges =
  9939.                     user.badges && user.badges.length > 0
  9940.                 ? user.badges
  9941.                 .map(
  9942.                     (badge) =>
  9943.                     `<span class="mod_badge">${badge}</span>`
  9944.                 )
  9945.                 .join('')
  9946.                 : '<span>User has no badges.</span>';
  9947.                 let icon = null;
  9948.  
  9949.                 const overlay = document.createElement('div');
  9950.                 overlay.classList.add('mod_overlay');
  9951.                 overlay.style.opacity = '0';
  9952.                 overlay.innerHTML = `
  9953.                     <div class="signIn-wrapper">
  9954.                         <div class="signIn-header">
  9955.                             <span>Profile of ${user.username}</span>
  9956.                             <div class="centerXY" style="width: 32px; height: 32px;">
  9957.                                 <button class="modButton-black" id="closeProfileEditor">
  9958.                                     <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  9959.                                         <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>
  9960.                                     </svg>
  9961.                                 </button>
  9962.                             </div>
  9963.                         </div>
  9964.                         <div class="signIn-body" style="padding-bottom: 40px;">
  9965.                             <div class="friends_row">
  9966.                                 <div class="centerY g-5">
  9967.                                     <div class="profile-img">
  9968.                                         <img src="${user.imageURL}" alt="${
  9969.                 user.username
  9970.             }">
  9971.                                         <span class="status_icon ${
  9972.                 user.online
  9973.                     ? 'online_icon'
  9974.                 : 'offline_icon'
  9975.             }"></span>
  9976.                                     </div>
  9977.                                     <div class="f-big">${user.username}</div>
  9978.                                 </div>
  9979.                                 <div class="centerY g-10">
  9980.                                     <div class="${user.role}_role">${
  9981.                 user.role
  9982.             }</div>
  9983.                                 </div>
  9984.                             </div>
  9985.                             <div class="f-column g-5 w-100">
  9986.                                 <strong>Bio:</strong>
  9987.                                 <p>${user.bio || 'User has no bio.'}</p>
  9988.                                 <strong>Badges:</strong>
  9989.                                 <div class="mod_badges">
  9990.                                     ${badges}
  9991.                                 </div>
  9992.                                 ${
  9993.                 user.lastOnline
  9994.                     ? `<strong>Last online:</strong><span>${prettyTime.am_pm(
  9995.                     user.lastOnline
  9996.                 )} (${prettyTime.time_ago(
  9997.                     user.lastOnline,
  9998.                     true
  9999.                 )})</span>`
  10000.                 : ''
  10001.             }
  10002.                             </div>
  10003.                         </div>
  10004.                     </div>
  10005.                 `;
  10006.                 document.body.append(overlay);
  10007.  
  10008.                 function hide() {
  10009.                     overlay.style.opacity = '0';
  10010.                     setTimeout(() => {
  10011.                         overlay.remove();
  10012.                     }, 300);
  10013.                 }
  10014.  
  10015.                 overlay.addEventListener('click', (e) => {
  10016.                     if (e.target == overlay) hide();
  10017.                 });
  10018.  
  10019.                 setTimeout(() => {
  10020.                     overlay.style.opacity = '1';
  10021.                 });
  10022.  
  10023.                 byId('closeProfileEditor').addEventListener('click', hide);
  10024.             }
  10025.         },
  10026.  
  10027.         async openFriendsTab() {
  10028.             let that = this;
  10029.             const friends_body = document.querySelector('.friends_body');
  10030.             if (friends_body.classList.contains('allusers'))
  10031.                 friends_body.classList.remove('allusers');
  10032.             friends_body.innerHTML = '';
  10033.  
  10034.             const res = await fetch(this.appRoutes.friends, {
  10035.                 credentials: 'include',
  10036.             });
  10037.  
  10038.             res.json()
  10039.                 .then((data) => {
  10040.                 if (!data.success) return;
  10041.                 if (data.friends.length !== 0) {
  10042.                     const newUsersHTML = data.friends
  10043.                     .map(
  10044.                         (user) => `
  10045.                       <div class="friends_row user-profile-wrapper" data-user-profile="${
  10046.                         user._id
  10047.                         }">
  10048.                         <div class="centerY g-5">
  10049.                           <div class="profile-img">
  10050.                             <img src="${user.imageURL}" alt="${
  10051.                         user.username
  10052.                         }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10053.                             <span class="status_icon ${
  10054.                         user.online ? 'online_icon' : 'offline_icon'
  10055.                         }"></span>
  10056.                           </div>
  10057.                           ${
  10058.                         user.nick
  10059.                         ? `
  10060.                               <div class="f-column centerX">
  10061.                                   <div class="f-big">${user.username}</div>
  10062.                                   <span style="color: #A2A2A2" title="Nickname">${user.nick}</span>
  10063.                               </div>
  10064.                           `
  10065.                         : `
  10066.                               <div class="f-big">${user.username}</div>
  10067.                           `
  10068.                         }
  10069.                         </div>
  10070.                         <div class="centerY g-10">
  10071.                             ${
  10072.                         user.server
  10073.                         ? `
  10074.                                 <span>${user.server}</span>
  10075.                                 <div class="vr2"></div>
  10076.                             `
  10077.                         : ''
  10078.                         }
  10079.                             ${
  10080.                         user.tag
  10081.                         ? `
  10082.                                 <span>Tag: ${user.tag}</span>
  10083.                                 <div class="vr2"></div>
  10084.                             `
  10085.                         : ''
  10086.                         }
  10087.                             <div class="${user.role}_role">${user.role}</div>
  10088.                             <div class="vr2"></div>
  10089.                             <button class="modButton centerXY" id="remove-${
  10090.                         user._id
  10091.                         }" style="padding: 7px;">
  10092.                                 <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>
  10093.                             </button>
  10094.                             <div class="vr2"></div>
  10095.                             <button class="modButton centerXY" id="chat-${
  10096.                         user._id
  10097.                         }" style="padding: 7px;">
  10098.                                 <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>
  10099.                             </button>
  10100.                         </div>
  10101.                       </div>
  10102.                     `
  10103.                     )
  10104.                     .join('');
  10105.                     friends_body.innerHTML = newUsersHTML;
  10106.  
  10107.                     const userProfiles = document.querySelectorAll(
  10108.                         '.user-profile-wrapper'
  10109.                     );
  10110.  
  10111.                     userProfiles.forEach((button) => {
  10112.                         if (
  10113.                             button.getAttribute('data-user-profile') ==
  10114.                             this.profile._id
  10115.                         )
  10116.                             return;
  10117.                         button.addEventListener('click', (e) => {
  10118.                             if (e.target == button) {
  10119.                                 this.showProfileHandler(e);
  10120.                             }
  10121.                         });
  10122.                     });
  10123.  
  10124.                     data.friends.forEach((friend) => {
  10125.                         if (friend.nick) {
  10126.                             this.friend_names.add(friend.nick);
  10127.                         }
  10128.                         const remove = byId(`remove-${friend._id}`);
  10129.                         remove.addEventListener('click', async () => {
  10130.                             if (
  10131.                                 confirm(
  10132.                                     'Are you sure you want to remove this friend?'
  10133.                                 )
  10134.                             ) {
  10135.                                 const res = await fetch(
  10136.                                     this.appRoutes.removeAvatar,
  10137.                                     {
  10138.                                         method: 'POST',
  10139.                                         headers: {
  10140.                                             'Content-Type':
  10141.                                             'application/json',
  10142.                                         },
  10143.                                         body: JSON.stringify({
  10144.                                             type: 'remove-friend',
  10145.                                             userId: friend._id,
  10146.                                         }),
  10147.                                         credentials: 'include',
  10148.                                     }
  10149.                                 ).then((res) => res.json());
  10150.  
  10151.                                 if (res.success) {
  10152.                                     that.openFriendsTab();
  10153.                                 } else {
  10154.                                     let message =
  10155.                                         res.message ||
  10156.                                         'Something went wrong. Please try again later.';
  10157.                                     that.modAlert(message, 'danger');
  10158.                                 }
  10159.                             }
  10160.                         });
  10161.  
  10162.                         const chat = byId(`chat-${friend._id}`);
  10163.                         chat.addEventListener('click', () => {
  10164.                             this.openChat(friend._id);
  10165.                         });
  10166.                     });
  10167.                 } else {
  10168.                     friends_body.innerHTML = `
  10169.                         <span>You have no friends yet :(</span>
  10170.                         <span>Go to the <strong>All users</strong> tab to find new friends.</span>
  10171.                     `;
  10172.                 }
  10173.             })
  10174.                 .catch((error) => {
  10175.                 console.error(error);
  10176.             });
  10177.         },
  10178.  
  10179.         async openChat(id) {
  10180.             const res = await fetch(this.appRoutes.chatHistory(id), {
  10181.                 credentials: 'include',
  10182.             });
  10183.             const { history, target, success } = await res.json();
  10184.  
  10185.             if (!success) {
  10186.                 this.modAlert('Something went wrong...', 'danger');
  10187.                 return;
  10188.             }
  10189.  
  10190.             const body = document.querySelector('.mod_menu_content');
  10191.  
  10192.             const chatDiv = document.createElement('div');
  10193.             chatDiv.classList.add('friends-chat-wrapper');
  10194.             chatDiv.id = id;
  10195.             setTimeout(() => {
  10196.                 chatDiv.style.opacity = '1';
  10197.             });
  10198.  
  10199.             const messagesHTML = history
  10200.             .map(
  10201.                 (message) => `
  10202.                         <div class="friends-message ${
  10203.                 message.sender_id === this.profile._id
  10204.                 ? 'message-right'
  10205.                 : ''
  10206.                 }">
  10207.                             <span>${message.content}</span>
  10208.                             <span class="message-date">${prettyTime.am_pm(
  10209.                                 message.timestamp
  10210.                             )}</span>
  10211.                         </div>
  10212.                     `
  10213.             )
  10214.             .join('');
  10215.  
  10216.             chatDiv.innerHTML = `
  10217.                 <div class="friends-chat-header">
  10218.                     <div class="centerXY g-5">
  10219.                         <div class="profile-img">
  10220.                             <img src="${target.imageURL}" alt="${
  10221.             target.username
  10222.         }">
  10223.                             <span class="status_icon ${
  10224.             target.online ? 'online_icon' : 'offline_icon'
  10225.         }"></span>
  10226.                         </div>
  10227.                         <span class="f-big">${target.username}</span>
  10228.                     </div>
  10229.                     <button class="modButton centerXY g-5" id="back-friends-chat">
  10230.                         <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>
  10231.                         Back
  10232.                     </button>
  10233.                 </div>
  10234.                 <div class="friends-chat-body">
  10235.                     <div class="friends-chat-messages private-chat-content scroll">
  10236.                         ${
  10237.             history.length > 0
  10238.                 ? messagesHTML
  10239.             : "<center id='beginning-of-conversation'>This is the beginning of your conversation...</center>"
  10240.         }
  10241.                     </div>
  10242.                     <div class="messenger-wrapper">
  10243.                         <div class="container">
  10244.                             <input type="text" class="form-control" placeholder="Enter a message..." id="private-message-text" />
  10245.                             <button class="modButton-black" id="send-private-message">Send</button>
  10246.                         </div>
  10247.                     </div>
  10248.                 </div>
  10249.             `;
  10250.  
  10251.             body.appendChild(chatDiv);
  10252.             const messagesContainer = chatDiv.querySelector(
  10253.                 '.private-chat-content'
  10254.             );
  10255.             messagesContainer.scrollTop = messagesContainer.scrollHeight;
  10256.  
  10257.             const back = byId('back-friends-chat');
  10258.             back.addEventListener('click', (e) => {
  10259.                 chatDiv.style.opacity = '0';
  10260.                 setTimeout(() => {
  10261.                     chatDiv.remove();
  10262.                 }, 300);
  10263.             });
  10264.  
  10265.             const text = byId('private-message-text');
  10266.             const send = byId('send-private-message');
  10267.  
  10268.             text.addEventListener('keydown', (e) => {
  10269.                 const key = e.key.toLowerCase();
  10270.                 if (key === 'enter') {
  10271.                     sendMessage(text.value, id);
  10272.                     text.value = '';
  10273.                 }
  10274.             });
  10275.  
  10276.             send.addEventListener('click', () => {
  10277.                 sendMessage(text.value, id);
  10278.                 text.value = '';
  10279.             });
  10280.  
  10281.             function sendMessage(val, target) {
  10282.                 if (!val || val.length > 200) return;
  10283.                 client?.send({
  10284.                     type: 'private-message',
  10285.                     content: {
  10286.                         text: val,
  10287.                         target,
  10288.                     },
  10289.                 });
  10290.             }
  10291.         },
  10292.  
  10293.         updatePrivateChat(data) {
  10294.             const { sender_id, target_id, message, timestamp } = data;
  10295.  
  10296.             let chatDiv = byId(target_id) || byId(sender_id);
  10297.             if (!chatDiv) {
  10298.                 console.error(
  10299.                     'Could not find chat div for either sender or target'
  10300.                 );
  10301.                 return;
  10302.             }
  10303.  
  10304.             const bocElement = document.querySelector(
  10305.                 '#beginning-of-conversation'
  10306.             );
  10307.             if (bocElement) bocElement.remove();
  10308.  
  10309.             const messages = chatDiv.querySelector('.friends-chat-messages');
  10310.             messages.innerHTML += `
  10311.                <div class="friends-message ${
  10312.             sender_id === this.profile._id ? 'message-right' : ''
  10313.         }">
  10314.                    <span>${message}</span>
  10315.                    <span class="message-date">${prettyTime.am_pm(
  10316.                 timestamp
  10317.             )}</span>
  10318.                </div>
  10319.             `;
  10320.             messages.scrollTop = messages.scrollHeight;
  10321.         },
  10322.  
  10323.         async searchUser(user) {
  10324.             if (!user) {
  10325.                 this.openAllUsers();
  10326.                 return;
  10327.             }
  10328.             const response = await fetch(
  10329.                 `${this.appRoutes.search}/?q=${user}`,
  10330.                 {
  10331.                     credentials: 'include',
  10332.                 }
  10333.             ).then((res) => res.json());
  10334.             const usersDiv = document;
  10335.  
  10336.             const usersContainer = byId('users-container');
  10337.             usersContainer.innerHTML = '';
  10338.             if (!response.success) {
  10339.                 usersContainer.innerHTML = `
  10340.                     <span>Couldn't find ${user}...</span>
  10341.                 `;
  10342.                 return;
  10343.             }
  10344.  
  10345.             const handleAddButtonClick = (event) => {
  10346.                 const userId = event.currentTarget.getAttribute('data-user-id');
  10347.                 const add = event.currentTarget;
  10348.                 fetch(this.appRoutes.request, {
  10349.                     method: 'POST',
  10350.                     headers: {
  10351.                         'Content-Type': 'application/json',
  10352.                     },
  10353.                     body: JSON.stringify({ req_id: userId }),
  10354.                     credentials: 'include',
  10355.                 })
  10356.                     .then((res) => res.json())
  10357.                     .then((req) => {
  10358.                     const type = req.success ? 'success' : 'danger';
  10359.                     this.modAlert(req.message, type);
  10360.  
  10361.                     if (req.success) {
  10362.                         add.disabled = true;
  10363.                         add.innerHTML = `
  10364.                             <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>
  10365.                         `;
  10366.                     }
  10367.                 });
  10368.             };
  10369.  
  10370.             response.users.forEach((user) => {
  10371.                 const userHTML = `
  10372.                     <div class="friends_row user-profile-wrapper" style="${
  10373.                 this.profile._id == user._id
  10374.                 ? `background: linear-gradient(45deg, #17172d, black)`
  10375.                 : ''
  10376.                 }" data-user-profile="${user._id}">
  10377.                         <div class="centerY g-5">
  10378.                             <div class="profile-img">
  10379.                                 <img src="${user.imageURL}" alt="${
  10380.                 user.username
  10381.                 }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10382.                                 <span class="status_icon ${
  10383.                 user.online ? 'online_icon' : 'offline_icon'
  10384.                 }"></span>
  10385.                             </div>
  10386.                             <div class="f-big">${
  10387.                 this.profile.username === user.username
  10388.                 ? `${user.username} (You)`
  10389.                 : user.username
  10390.                 }</div>
  10391.                         </div>
  10392.                         <div class="centerY g-10">
  10393.                             <div class="${user.role}_role">${user.role}</div>
  10394.                             ${
  10395.                 this.profile._id == user._id
  10396.                 ? ''
  10397.                 : `
  10398.                                 <div class="vr2"></div>
  10399.                                 <button class="modButton centerXY add-button" data-user-id="${user._id}" style="padding: 7px;">
  10400.                                     <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>
  10401.                                 </button>
  10402.                             `
  10403.                 }
  10404.                         </div>
  10405.                     </div>
  10406.                 `;
  10407.                 usersContainer.insertAdjacentHTML('beforeend', userHTML);
  10408.  
  10409.                 if (user._id == this.profile._id) return;
  10410.                 const newUserProfile = usersContainer.querySelector(
  10411.                     `[data-user-profile="${user._id}"]`
  10412.                 );
  10413.                 newUserProfile.addEventListener('click', (e) => {
  10414.                     if (e.target == newUserProfile) {
  10415.                         this.showProfileHandler(e);
  10416.                     }
  10417.                 });
  10418.  
  10419.                 const addButton = newUserProfile.querySelector('.add-button');
  10420.                 if (!addButton) return;
  10421.                 addButton.addEventListener('click', handleAddButtonClick);
  10422.             });
  10423.         },
  10424.  
  10425.         async openAllUsers() {
  10426.             let offset = 0;
  10427.             let maxReached = false;
  10428.             let defaultAmount = 5; // min: 1; max: 100
  10429.  
  10430.             const friends_body = document.querySelector('.friends_body');
  10431.             friends_body.innerHTML = `
  10432.                 <input type="text" id="search-user" placeholder="Search user by username or id" class="form-control p-10" style="border: none" />
  10433.                 <div id="users-container"></div>
  10434.             `;
  10435.             const usersContainer = byId('users-container');
  10436.             friends_body.classList.add('allusers');
  10437.  
  10438.             // search user
  10439.             const search = byId('search-user');
  10440.             search.addEventListener(
  10441.                 'input',
  10442.                 debounce(() => {
  10443.                     this.searchUser(search.value);
  10444.                 }, 500)
  10445.             );
  10446.  
  10447.             const handleAddButtonClick = (event) => {
  10448.                 const userId = event.currentTarget.getAttribute('data-user-id');
  10449.                 const add = event.currentTarget;
  10450.                 fetch(this.appRoutes.request, {
  10451.                     method: 'POST',
  10452.                     headers: {
  10453.                         'Content-Type': 'application/json',
  10454.                     },
  10455.                     body: JSON.stringify({ req_id: userId }),
  10456.                     credentials: 'include',
  10457.                 })
  10458.                     .then((res) => res.json())
  10459.                     .then((req) => {
  10460.                     const type = req.success ? 'success' : 'danger';
  10461.                     this.modAlert(req.message, type);
  10462.  
  10463.                     if (req.success) {
  10464.                         add.disabled = true;
  10465.                         add.innerHTML = `
  10466.                             <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>
  10467.                         `;
  10468.                     }
  10469.                 });
  10470.             };
  10471.  
  10472.             const displayedUserIDs = new Set();
  10473.  
  10474.             const fetchNewUsers = async () => {
  10475.                 const newUsersResponse = await fetch(this.appRoutes.users, {
  10476.                     method: 'POST',
  10477.                     headers: {
  10478.                         'Content-Type': 'application/json',
  10479.                     },
  10480.                     body: JSON.stringify({ amount: defaultAmount, offset }),
  10481.                     credentials: 'include',
  10482.                 }).then((res) => res.json());
  10483.  
  10484.                 const newUsers = newUsersResponse.users;
  10485.  
  10486.                 if (newUsers.length === 0) {
  10487.                     maxReached = true;
  10488.                     return;
  10489.                 }
  10490.                 offset += defaultAmount;
  10491.  
  10492.                 newUsers.forEach((user) => {
  10493.                     if (!displayedUserIDs.has(user._id)) {
  10494.                         displayedUserIDs.add(user._id);
  10495.  
  10496.                         const newUserHTML = `
  10497.                             <div class="friends_row user-profile-wrapper" style="${
  10498.                         this.profile._id == user._id
  10499.                         ? `background: linear-gradient(45deg, #17172d, black)`
  10500.                         : ''
  10501.                         }" data-user-profile="${user._id}">
  10502.                                 <div class="centerY g-5">
  10503.                                     <div class="profile-img">
  10504.                                         <img src="${user.imageURL}" alt="${
  10505.                         user.username
  10506.                         }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10507.                                         <span class="status_icon ${
  10508.                         user.online
  10509.                         ? 'online_icon'
  10510.                         : 'offline_icon'
  10511.                         }"></span>
  10512.                                     </div>
  10513.                                     <div class="f-big">${
  10514.                         this.profile.username === user.username
  10515.                         ? `${user.username} (You)`
  10516.                         : user.username
  10517.                         }</div>
  10518.                                 </div>
  10519.                                 <div class="centerY g-10">
  10520.                                     <div class="${user.role}_role">${
  10521.                         user.role
  10522.                         }</div>
  10523.                                     ${
  10524.                         this.profile._id == user._id
  10525.                         ? ''
  10526.                         : `
  10527.                                         <div class="vr2"></div>
  10528.                                         <button class="modButton centerXY add-button" data-user-id="${user._id}" style="padding: 7px;">
  10529.                                             <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>
  10530.                                         </button>
  10531.                                     `
  10532.                         }
  10533.                                 </div>
  10534.                             </div>
  10535.                         `;
  10536.  
  10537.                         usersContainer.insertAdjacentHTML(
  10538.                             'beforeend',
  10539.                             newUserHTML
  10540.                         );
  10541.  
  10542.                         const newUserProfile = usersContainer.querySelector(
  10543.                             `[data-user-profile="${user._id}"]`
  10544.                         );
  10545.                         newUserProfile.addEventListener('click', (e) => {
  10546.                             if (e.target == newUserProfile) {
  10547.                                 this.showProfileHandler(e);
  10548.                             }
  10549.                         });
  10550.  
  10551.                         const addButton =
  10552.                               newUserProfile.querySelector('.add-button');
  10553.                         if (!addButton) return;
  10554.                         addButton.addEventListener(
  10555.                             'click',
  10556.                             handleAddButtonClick
  10557.                         );
  10558.                     }
  10559.                 });
  10560.             };
  10561.  
  10562.             const scrollHandler = async () => {
  10563.                 if (maxReached) return;
  10564.                 if (
  10565.                     usersContainer.scrollTop + usersContainer.clientHeight >=
  10566.                     usersContainer.scrollHeight - 1
  10567.                 ) {
  10568.                     await fetchNewUsers();
  10569.                 }
  10570.             };
  10571.  
  10572.             // Initial fetch
  10573.             await fetchNewUsers();
  10574.  
  10575.             // remove existing scroll event listener if exists
  10576.             usersContainer.removeEventListener('scroll', scrollHandler);
  10577.  
  10578.             // add new scroll event listener
  10579.             usersContainer.addEventListener('scroll', scrollHandler);
  10580.         },
  10581.  
  10582.         async openRequests() {
  10583.             let that = this;
  10584.             const friends_body = document.querySelector('.friends_body');
  10585.             friends_body.innerHTML = '';
  10586.             if (friends_body.classList.contains('allusers'))
  10587.                 friends_body.classList.remove('allusers');
  10588.  
  10589.             const requests = await fetch(this.appRoutes.myRequests, {
  10590.                 credentials: 'include',
  10591.             }).then((res) => res.json());
  10592.  
  10593.             if (!requests.body) return;
  10594.             if (requests.body.length > 0) {
  10595.                 const reqHtml = requests.body
  10596.                 .map(
  10597.                     (user) => `
  10598.                     <div class="friends_row">
  10599.                         <div class="centerY g-5">
  10600.                             <div class="profile-img">
  10601.                                 <img src="${user.imageURL}" alt="${
  10602.                     user.username
  10603.                     }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10604.                                 <span class="status_icon ${
  10605.                     user.online ? 'online_icon' : 'offline_icon'
  10606.                     }"></span>
  10607.                             </div>
  10608.                             <div class="f-big">${user.username}</div>
  10609.                         </div>
  10610.                         <div class="centerY g-10">
  10611.                             <div class="${user.role}_role">${user.role}</div>
  10612.                             <div class="vr2"></div>
  10613.                             <button class="modButton centerXY accept" data-user-id="${
  10614.                     user._id
  10615.                     }" style="padding: 6px 7px;">
  10616.                                 <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>
  10617.                             </button>
  10618.                             <button class="modButton centerXY decline" data-user-id="${
  10619.                     user._id
  10620.                     }" style="padding: 5px 8px;">
  10621.                                 <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>
  10622.                             </button>
  10623.                         </div>
  10624.                     </div>
  10625.                 `
  10626.                 )
  10627.                 .join('');
  10628.  
  10629.                 friends_body.innerHTML = reqHtml;
  10630.  
  10631.                 friends_body.querySelectorAll('.accept').forEach((accept) => {
  10632.                     accept.addEventListener('click', async () => {
  10633.                         const userId = accept.getAttribute('data-user-id');
  10634.                         const req = await fetch(this.appRoutes.handleRequest, {
  10635.                             method: 'POST',
  10636.                             headers: {
  10637.                                 'Content-Type': 'application/json',
  10638.                             },
  10639.                             body: JSON.stringify({
  10640.                                 type: 'accept-request',
  10641.                                 userId,
  10642.                             }),
  10643.                             credentials: 'include',
  10644.                         }).then((res) => res.json());
  10645.                         that.openRequests();
  10646.                     });
  10647.                 });
  10648.  
  10649.                 friends_body.querySelectorAll('.decline').forEach((decline) => {
  10650.                     decline.addEventListener('click', async () => {
  10651.                         const userId = decline.getAttribute('data-user-id');
  10652.                         const req = await fetch(this.appRoutes.handleRequest, {
  10653.                             method: 'POST',
  10654.                             headers: {
  10655.                                 'Content-Type': 'application/json',
  10656.                             },
  10657.                             body: JSON.stringify({
  10658.                                 type: 'decline-request',
  10659.                                 userId,
  10660.                             }),
  10661.                             credentials: 'include',
  10662.                         }).then((res) => res.json());
  10663.                         that.openRequests();
  10664.                     });
  10665.                 });
  10666.             } else {
  10667.                 friends_body.innerHTML = `<span>No requests!</span>`;
  10668.             }
  10669.         },
  10670.  
  10671.         async openFriendSettings() {
  10672.             const friends_body = document.querySelector('.friends_body');
  10673.             if (friends_body.classList.contains('allusers'))
  10674.                 friends_body.classList.remove('allusers');
  10675.  
  10676.             friends_body.innerHTML = `
  10677.                 <div class="friends_row">
  10678.                     <div class="centerY g-5">
  10679.                         <div class="profile-img">
  10680.                             <img src="${
  10681.             this.profile.imageURL
  10682.         }" alt="Profile picture" />
  10683.                         </div>
  10684.                         <span class="f-big" id="profile_username_00" title="${
  10685.             this.profile._id
  10686.         }">${this.profile.username}</span>
  10687.                     </div>
  10688.                     <button class="modButton-black val" id="editProfile">Edit Profile</button>
  10689.                 </div>
  10690.                 <div class="friends_row">
  10691.                     <span>Status</span>
  10692.                     <select class="form-control val" id="edit_static_status">
  10693.                         <option value="online" ${
  10694.             this.friends_settings.static_status === 'online'
  10695.                 ? 'selected'
  10696.             : ''
  10697.         }>Online</option>
  10698.                         <option value="offline" ${
  10699.             this.friends_settings.static_status === 'offline'
  10700.                 ? 'selected'
  10701.             : ''
  10702.         }>Offline</option>
  10703.                     </select>
  10704.                 </div>
  10705.                 <div class="friends_row">
  10706.                     <span>Accept friend requests</span>
  10707.                     <div class="modCheckbox val">
  10708.                         <input type="checkbox" ${
  10709.             this.friends_settings.accept_requests
  10710.                 ? 'checked'
  10711.             : ''
  10712.         } id="edit_accept_requests" />
  10713.                         <label class="cbx" for="edit_accept_requests"></label>
  10714.                     </div>
  10715.                 </div>
  10716.                 <div class="friends_row">
  10717.                     <span>Highlight friends</span>
  10718.                     <div class="modCheckbox val">
  10719.                         <input type="checkbox" ${
  10720.             this.friends_settings.highlight_friends
  10721.                 ? 'checked'
  10722.             : ''
  10723.         } id="edit_highlight_friends" />
  10724.                         <label class="cbx" for="edit_highlight_friends"></label>
  10725.                     </div>
  10726.                 </div>
  10727.                 <div class="friends_row">
  10728.                     <span>Highlight color</span>
  10729.                     <input type="color" class="colorInput" value="${
  10730.             this.friends_settings.highlight_color
  10731.         }" style="margin-right: 12px;" id="edit_highlight_color" />
  10732.                 </div>
  10733.                 <div class="friends_row">
  10734.                     <span>Public profile</span>
  10735.                     <div class="modCheckbox val">
  10736.                         <input type="checkbox" ${
  10737.             this.profile.visible ? 'checked' : ''
  10738.         } id="edit_visible" />
  10739.                         <label class="cbx" for="edit_visible"></label>
  10740.                     </div>
  10741.                 </div>
  10742.                 <div class="friends_row">
  10743.                     <span>Logout</span>
  10744.                     <button class="modButton-black" id="logout_mod" style="width: 150px">Logout</button>
  10745.                 </div>
  10746.             `;
  10747.  
  10748.             const editProfile = byId('editProfile');
  10749.             editProfile.addEventListener('click', () => {
  10750.                 this.openProfileEditor();
  10751.             });
  10752.  
  10753.             const logout = byId('logout_mod');
  10754.             logout.addEventListener('click', async () => {
  10755.                 if (confirm('Are you sure you want to logout?')) {
  10756.                     try {
  10757.                         const res = await fetch(this.appRoutes.logout, {
  10758.                             credentials: 'include',
  10759.                         });
  10760.  
  10761.                         const data = await res.json();
  10762.  
  10763.                         if (!data.success)
  10764.                             return alert('Something went wrong...');
  10765.  
  10766.                         modSettings.modAccount.authorized = false;
  10767.                         updateStorage();
  10768.                         location.reload();
  10769.                     } catch (error) {
  10770.                         console.error('Error logging out:', error);
  10771.                     }
  10772.                 }
  10773.             });
  10774.  
  10775.             const edit_static_status = byId('edit_static_status');
  10776.             const edit_accept_requests = byId('edit_accept_requests');
  10777.             const edit_highlight_friends = byId('edit_highlight_friends');
  10778.             const edit_highlight_color = byId('edit_highlight_color');
  10779.             const edit_visible = byId('edit_visible');
  10780.  
  10781.             edit_static_status.addEventListener('change', () => {
  10782.                 const val = edit_static_status.value;
  10783.                 updateSettings('static_status', val);
  10784.             });
  10785.  
  10786.             edit_accept_requests.addEventListener('change', () => {
  10787.                 const val = edit_accept_requests.checked;
  10788.                 updateSettings('accept_requests', val);
  10789.             });
  10790.  
  10791.             edit_highlight_friends.addEventListener('change', () => {
  10792.                 const val = edit_highlight_friends.checked;
  10793.                 updateSettings('highlight_friends', val);
  10794.             });
  10795.  
  10796.             // Debounce the updateSettings function
  10797.             edit_highlight_color.addEventListener(
  10798.                 'input',
  10799.                 debounce(() => {
  10800.                     const val = edit_highlight_color.value;
  10801.                     updateSettings('highlight_color', val);
  10802.                 }, 500)
  10803.             );
  10804.  
  10805.             edit_visible.addEventListener('change', () => {
  10806.                 const val = edit_visible.checked;
  10807.                 updateSettings('visible', val);
  10808.             });
  10809.  
  10810.             const updateSettings = async (type, data) => {
  10811.                 const resData = await (
  10812.                     await fetch(this.appRoutes.updateSettings, {
  10813.                         method: 'POST',
  10814.                         body: JSON.stringify({ type, data }),
  10815.                         credentials: 'include',
  10816.                         headers: {
  10817.                             'Content-Type': 'application/json',
  10818.                         },
  10819.                     })
  10820.                 ).json();
  10821.  
  10822.                 if (resData.success) {
  10823.                     this.friends_settings[type] = data;
  10824.                 }
  10825.             };
  10826.         },
  10827.  
  10828.         openProfileEditor() {
  10829.             let that = this;
  10830.  
  10831.             const overlay = document.createElement('div');
  10832.             overlay.classList.add('mod_overlay');
  10833.             overlay.style.opacity = '0';
  10834.             overlay.innerHTML = `
  10835.                 <div class="signIn-wrapper">
  10836.                     <div class="signIn-header">
  10837.                         <span>Edit mod profile</span>
  10838.                         <div class="centerXY" style="width: 32px; height: 32px;">
  10839.                             <button class="modButton-black" id="closeProfileEditor">
  10840.                                 <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  10841.                                     <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>
  10842.                                 </svg>
  10843.                             </button>
  10844.                         </div>
  10845.                     </div>
  10846.                     <div class="signIn-body" style="width: fit-content;">
  10847.                         <div class="centerXY g-10">
  10848.                             <div class="profile-img" style="width: 6em;height: 6em;">
  10849.                                 <img src="${
  10850.             this.profile.imageURL
  10851.         }" alt="Profile picture" />
  10852.                             </div>
  10853.                             <div class="f-column g-5">
  10854.                                 <input type="file" id="imageUpload" accept="image/*" style="display: none;">
  10855.                                 <label for="imageUpload" class="modButton-black g-10">
  10856.                                     <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>
  10857.                                     Upload avatar
  10858.                                 </label>
  10859.                                 <button class="modButton-black g-10" id="deleteAvatar">
  10860.                                     <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>
  10861.                                     Delete avatar
  10862.                                 </button>
  10863.                             </div>
  10864.                         </div>
  10865.                         <div class="f-column w-100">
  10866.                             <label for="username_edit">Username</label>
  10867.                             <input type="text" class="form-control" id="username_edit" value="${
  10868.             this.profile.username
  10869.         }" maxlength="40" minlength="4" />
  10870.                         </div>
  10871.                         <div class="f-column w-100">
  10872.                             <label for="bio_edit">Bio</label>
  10873.                             <div class="textarea-container">
  10874.                                 <textarea placeholder="Hello! I'm ..." class="form-control" maxlength="250" id="bio_edit">${
  10875.             this.profile.bio || ''
  10876.         }</textarea>
  10877.                                 <span class="char-counter" id="charCount">${
  10878.             this.profile.bio
  10879.                 ? this.profile.bio.length
  10880.             : '0'
  10881.         }/250</span>
  10882.                             </div>
  10883.                         </div>
  10884.                         <button class="modButton-black" style="margin-bottom: 20px;" id="saveChanges">Save changes</button>
  10885.                     </div>
  10886.                 </div>
  10887.             `;
  10888.             document.body.append(overlay);
  10889.  
  10890.             function hide() {
  10891.                 overlay.style.opacity = '0';
  10892.                 setTimeout(() => {
  10893.                     overlay.remove();
  10894.                 }, 300);
  10895.             }
  10896.  
  10897.             overlay.addEventListener('click', (e) => {
  10898.                 if (e.target == overlay) hide();
  10899.             });
  10900.  
  10901.             setTimeout(() => {
  10902.                 overlay.style.opacity = '1';
  10903.             });
  10904.  
  10905.             byId('closeProfileEditor').addEventListener('click', hide);
  10906.  
  10907.             let changes = new Set(); // Use a Set to store unique changes
  10908.  
  10909.             const bio_edit = byId('bio_edit');
  10910.             const charCountSpan = byId('charCount');
  10911.             bio_edit.addEventListener('input', updCharcounter);
  10912.  
  10913.             function updCharcounter() {
  10914.                 const currentTextLength = bio_edit.value.length;
  10915.                 charCountSpan.textContent = currentTextLength + '/250';
  10916.  
  10917.                 // Update changes
  10918.                 changes.add('bio');
  10919.             }
  10920.  
  10921.             // Upload avatar
  10922.             byId('imageUpload').addEventListener('input', async (e) => {
  10923.                 const file = e.target.files[0];
  10924.                 if (!file) return;
  10925.  
  10926.                 const formData = new FormData();
  10927.                 formData.append('image', file);
  10928.  
  10929.                 try {
  10930.                     const data = await (
  10931.                         await fetch(this.appRoutes.imgUpload, {
  10932.                             method: 'POST',
  10933.                             credentials: 'include',
  10934.                             body: formData,
  10935.                         })
  10936.                     ).json();
  10937.  
  10938.                     if (data.success) {
  10939.                         const profileImg =
  10940.                               document.querySelector('.profile-img img');
  10941.                         profileImg.src = data.user.imageURL;
  10942.                         hide();
  10943.                         that.profile = data.user;
  10944.                     } else {
  10945.                         that.modAlert(data.message, 'danger');
  10946.                         console.error('Failed to upload image');
  10947.                     }
  10948.                 } catch (error) {
  10949.                     console.error('Error uploading image:', error);
  10950.                 }
  10951.             });
  10952.  
  10953.             const username_edit = byId('username_edit');
  10954.             username_edit.addEventListener('input', () => {
  10955.                 changes.add('username');
  10956.             });
  10957.  
  10958.             const saveChanges = byId('saveChanges');
  10959.             saveChanges.addEventListener('click', async () => {
  10960.                 if (changes.size === 0) return;
  10961.                 let changedData = {};
  10962.                 changes.forEach((change) => {
  10963.                     if (change === 'username') {
  10964.                         changedData.username = username_edit.value;
  10965.                     } else if (change === 'bio') {
  10966.                         changedData.bio = bio_edit.value;
  10967.                     }
  10968.                 });
  10969.  
  10970.                 const resData = await (
  10971.                     await fetch(this.appRoutes.editProfile, {
  10972.                         method: 'POST',
  10973.                         body: JSON.stringify({
  10974.                             changes: Array.from(changes),
  10975.                             data: changedData,
  10976.                         }),
  10977.                         credentials: 'include',
  10978.                         headers: {
  10979.                             'Content-Type': 'application/json',
  10980.                         },
  10981.                     })
  10982.                 ).json();
  10983.  
  10984.                 if (resData.success) {
  10985.                     if (that.profile.username !== resData.user.username) {
  10986.                         const p_username = byId('profile_username_00');
  10987.                         if (p_username)
  10988.                             p_username.innerText = resData.user.username;
  10989.                     }
  10990.                     that.profile = resData.user;
  10991.                     changes.clear();
  10992.                     hide();
  10993.                     const name = byId('my-profile-name');
  10994.                     const bioText = byId('my-profile-bio');
  10995.  
  10996.                     name.innerText = resData.user.username;
  10997.                     bioText.innerHTML = resData.user.bio || 'No bio.';
  10998.                 } else {
  10999.                     if (resData.message) {
  11000.                         this.modAlert(resData.message, 'danger');
  11001.                     }
  11002.                 }
  11003.             });
  11004.  
  11005.             const deleteAvatar = byId('deleteAvatar');
  11006.             deleteAvatar.addEventListener('click', async () => {
  11007.                 if (
  11008.                     confirm(
  11009.                         'Are you sure you want to remove your profile picture? It will be changed to the default profile picture.'
  11010.                     )
  11011.                 ) {
  11012.                     try {
  11013.                         const data = await (
  11014.                             await fetch(this.appRoutes.delProfile, {
  11015.                                 credentials: 'include',
  11016.                             })
  11017.                         ).json();
  11018.                         const profileImg =
  11019.                               document.querySelector('.profile-img img');
  11020.                         profileImg.src = data.user.imageURL;
  11021.                         hide();
  11022.                         that.profile = data.user;
  11023.                     } catch (error) {
  11024.                         console.error("Couldn't remove image: ", error);
  11025.                         this.modAlert(error.message, 'danger');
  11026.                     }
  11027.                 }
  11028.             });
  11029.         },
  11030.  
  11031.         async announcements() {
  11032.             const previewContainer = byId('mod-announcements');
  11033.  
  11034.             const announcements = await (
  11035.                 await fetch(this.appRoutes.announcements)
  11036.             ).json();
  11037.             if (!announcements.success) return;
  11038.  
  11039.             const { data } = announcements;
  11040.  
  11041.             const pinnedAnnouncements = data.filter(
  11042.                 (announcement) => announcement.pinned
  11043.             );
  11044.             const unpinnedAnnouncements = data.filter(
  11045.                 (announcement) => !announcement.pinned
  11046.             );
  11047.  
  11048.             pinnedAnnouncements.sort(
  11049.                 (a, b) => new Date(b.date) - new Date(a.date)
  11050.             );
  11051.             unpinnedAnnouncements.sort(
  11052.                 (a, b) => new Date(b.date) - new Date(a.date)
  11053.             );
  11054.  
  11055.             const sortedAnnouncements = [
  11056.                 ...pinnedAnnouncements,
  11057.                 ...unpinnedAnnouncements,
  11058.             ];
  11059.  
  11060.             const previews = sortedAnnouncements
  11061.             .map(
  11062.                 (announcement) => `
  11063. 				<div class="mod-announcement" data-announcement-id="${announcement._id}">
  11064. 					<img class="mod-announcement-icon" src="${
  11065.                 announcement.icon
  11066.                 }" width="32" draggable="false" />
  11067. 					<div class="mod-announcement-text">
  11068. 						<span>${announcement.title}</span>
  11069. 						<div>${announcement.description}</div>
  11070. 					</div>
  11071. 					${
  11072.                 announcement.pinned
  11073.                 ? '<img src="https://czrsd.com/static/icons/pinned.svg" draggable="false" style="width: 22px; align-self: start;" />'
  11074.                 : ''
  11075.                 }
  11076. 				</div>
  11077. 			`
  11078.             )
  11079.             .join('');
  11080.  
  11081.             previewContainer.innerHTML = previews;
  11082.  
  11083.             const announcementElements =
  11084.                   document.querySelectorAll('.mod-announcement');
  11085.             announcementElements.forEach((element) => {
  11086.                 element.addEventListener('click', async (event) => {
  11087.                     const announcementId = element.getAttribute(
  11088.                         'data-announcement-id'
  11089.                     );
  11090.                     try {
  11091.                         const data = await (
  11092.                             await fetch(
  11093.                                 this.appRoutes.announcement(announcementId)
  11094.                             )
  11095.                         ).json();
  11096.                         if (data.success) {
  11097.                             createAnnouncementTab(data.data);
  11098.                         }
  11099.                     } catch (error) {
  11100.                         console.error(
  11101.                             'Error fetching announcement details:',
  11102.                             error
  11103.                         );
  11104.                     }
  11105.                 });
  11106.             });
  11107.  
  11108.             function createAnnouncementTab(data) {
  11109.                 const menuContent = document.querySelector('.mod_menu_content');
  11110.                 const modHome = byId('mod_home');
  11111.                 const content = document.createElement('div');
  11112.  
  11113.                 content.setAttribute('id', 'announcement-tab');
  11114.                 content.classList.add('mod_tab');
  11115.                 content.style.display = 'none';
  11116.                 content.style.opacity = '0';
  11117.  
  11118.                 const announcementHTML = `
  11119. 					<div class="centerY justify-sb">
  11120. 						<div class="centerY g-5">
  11121. 							<img style="border-radius: 50%;" src="${
  11122.                 data.preview.icon
  11123.                 }" width="64" draggable="false" />
  11124. 							<div class="f-column centerX">
  11125. 								<h2>${data.full.title}</h2>
  11126. 								<span style="color: #7E7E7E">${prettyTime.fullDate(data.date)}</span>
  11127. 							</div>
  11128. 						</div>
  11129. 						<button class="modButton-black" style="width: 20%;" id="mod-announcement-back">Back</button>
  11130. 					</div>
  11131. 					<div class="mod-announcement-content">
  11132. 						<div class="f-column g-10 scroll">${data.full.description}</div>
  11133. 						<div class="mod-announcement-images scroll">
  11134. 							${data.full.images
  11135.                 .map(
  11136.                     (image) =>
  11137.                     `<img src="${image}" onclick="window.open('${image}')" />`
  11138.                 )
  11139.                 .join('')}
  11140. 						</div>
  11141. 					</div>
  11142. 				`;
  11143.  
  11144.                 content.innerHTML = announcementHTML;
  11145.                 menuContent.appendChild(content);
  11146.  
  11147.                 window.openModTab('announcement-tab');
  11148.  
  11149.                 const back = byId('mod-announcement-back');
  11150.                 back.addEventListener('click', () => {
  11151.                     const mod_home = byId('mod_home');
  11152.                     content.style.opacity = '0';
  11153.                     setTimeout(() => {
  11154.                         content.remove();
  11155.  
  11156.                         mod_home.style.display = 'flex';
  11157.                         mod_home.style.opacity = '1';
  11158.                     }, 300);
  11159.  
  11160.                     byId('tab_home_btn').classList.add('mod_selected');
  11161.                 });
  11162.                 1;
  11163.             }
  11164.         },
  11165.  
  11166.         chart() {
  11167.             const canvas = byId('sigmod-stats');
  11168.             const { Chart } = window;
  11169.  
  11170.             const stats = JSON.parse(localStorage.getItem('game-stats'));
  11171.  
  11172.             // max values
  11173.             const statValues = {
  11174.                 timeplayed: [
  11175.                     10_000, 50_000, 100_000, 150_000, 200_000, 250_000, 300_000,
  11176.                     400_000, 800_000, 1_000_000,
  11177.                 ],
  11178.                 highestmass: [
  11179.                     50_000, 100_000, 500_000, 700_000, 1_000_000, 5_000_000,
  11180.                     10_000_000,
  11181.                 ],
  11182.                 totaldeaths: [
  11183.                     100, 500, 1_000, 2_000, 3_000, 4_000, 5_000, 8_000, 10_000,
  11184.                     30_000, 50_000, 100_000,
  11185.                 ],
  11186.                 totalmass: [
  11187.                     100_000, 500_000, 1_000_000, 2_000_000, 3_000_000,
  11188.                     5_000_000, 10_000_000, 50_000_000, 100_000_000, 500_000_000,
  11189.                     1_000_000_000, 2_000_000_000, 5_000_000_000,
  11190.                 ],
  11191.             };
  11192.  
  11193.             const getBestValue = (stat, values) => {
  11194.                 for (let value of values) {
  11195.                     if (stat < value) return value;
  11196.                 }
  11197.                 return values[values.length - 1];
  11198.             };
  11199.  
  11200.             const emojiLabels = ['⏲', '🏆', '💀', '🔢'];
  11201.             const textLabels = [
  11202.                 'Time Played',
  11203.                 'Highest Mass',
  11204.                 'Total Deaths',
  11205.                 'Total Mass',
  11206.             ];
  11207.  
  11208.             const data = {
  11209.                 labels: emojiLabels,
  11210.                 datasets: [
  11211.                     {
  11212.                         label: 'Your Stats',
  11213.                         data: [
  11214.                             stats['time-played'] /
  11215.                             getBestValue(
  11216.                                 stats['time-played'],
  11217.                                 statValues.timeplayed
  11218.                             ),
  11219.                             stats['highest-mass'] /
  11220.                             getBestValue(
  11221.                                 stats['highest-mass'],
  11222.                                 statValues.highestmass
  11223.                             ),
  11224.                             stats['total-deaths'] /
  11225.                             getBestValue(
  11226.                                 stats['total-deaths'],
  11227.                                 statValues.totaldeaths
  11228.                             ),
  11229.                             stats['total-mass'] /
  11230.                             getBestValue(
  11231.                                 stats['total-mass'],
  11232.                                 statValues.totalmass
  11233.                             ),
  11234.                         ],
  11235.                         backgroundColor: [
  11236.                             'rgba(255, 99, 132, 0.2)',
  11237.                             'rgba(54, 162, 235, 0.2)',
  11238.                             'rgba(255, 206, 86, 0.2)',
  11239.                             'rgba(153, 102, 255, 0.2)',
  11240.                         ],
  11241.                         borderColor: [
  11242.                             'rgba(255, 99, 132, 1)',
  11243.                             'rgba(54, 162, 235, 1)',
  11244.                             'rgba(255, 206, 86, 1)',
  11245.                             'rgba(153, 102, 255, 1)',
  11246.                         ],
  11247.                         borderWidth: 1,
  11248.                     },
  11249.                 ],
  11250.             };
  11251.  
  11252.             const formatLabel = (labelType, actualValue) => {
  11253.                 if (labelType === 'Time Played') {
  11254.                     const hours = Math.floor(actualValue / 3600);
  11255.                     const minutes = Math.floor((actualValue % 3600) / 60);
  11256.                     return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
  11257.                 } else if (
  11258.                     labelType === 'Highest Mass' ||
  11259.                     labelType === 'Total Mass'
  11260.                 ) {
  11261.                     return actualValue > 999
  11262.                         ? `${(actualValue / 1000).toFixed(1)}k`
  11263.                     : actualValue.toString();
  11264.                 } else {
  11265.                     return actualValue.toString();
  11266.                 }
  11267.             };
  11268.  
  11269.             const createChart = () => {
  11270.                 try {
  11271.                     new Chart(canvas, {
  11272.                         type: 'bar',
  11273.                         data: data,
  11274.                         options: {
  11275.                             indexAxis: 'y',
  11276.                             scales: {
  11277.                                 x: {
  11278.                                     beginAtZero: true,
  11279.                                     max: 1,
  11280.                                     ticks: {
  11281.                                         callback: (value) =>
  11282.                                         `${(value * 100).toFixed(0)}%`,
  11283.                                     },
  11284.                                 },
  11285.                             },
  11286.                             plugins: {
  11287.                                 legend: {
  11288.                                     display: false,
  11289.                                 },
  11290.                                 tooltip: {
  11291.                                     callbacks: {
  11292.                                         title: (context) =>
  11293.                                         textLabels[context[0].dataIndex],
  11294.                                         label: (context) => {
  11295.                                             const dataIndex = context.dataIndex;
  11296.                                             const labelType =
  11297.                                                   textLabels[dataIndex];
  11298.                                             const actualValue =
  11299.                                                   context.dataset.data[
  11300.                                                       dataIndex
  11301.                                                   ] *
  11302.                                                   getBestValue(
  11303.                                                       stats[
  11304.                                                           labelType
  11305.                                                           .toLowerCase()
  11306.                                                           .replace(' ', '-')
  11307.                                                       ],
  11308.                                                       statValues[
  11309.                                                           labelType
  11310.                                                           .toLowerCase()
  11311.                                                           .replace(' ', '')
  11312.                                                       ]
  11313.                                                   );
  11314.                                             return formatLabel(
  11315.                                                 labelType,
  11316.                                                 actualValue
  11317.                                             );
  11318.                                         },
  11319.                                     },
  11320.                                 },
  11321.                             },
  11322.                         },
  11323.                     });
  11324.                 } catch (error) {
  11325.                     console.error(
  11326.                         'An error occurred while rendering the chart:',
  11327.                         error
  11328.                     );
  11329.                 }
  11330.             };
  11331.  
  11332.             createChart();
  11333.         },
  11334.  
  11335.         // Color input events & Reset color event handler
  11336.         colorPicker() {
  11337.             const colorPickerConfig = {
  11338.                 mapColor: {
  11339.                     path: 'game.map.color',
  11340.                     opacity: false,
  11341.                     color: modSettings.game.map.color,
  11342.                     default: '#111111',
  11343.                 },
  11344.                 borderColor: {
  11345.                     path: 'game.borderColor',
  11346.                     opacity: true,
  11347.                     color: modSettings.game.borderColor,
  11348.                     default: '#0000ff',
  11349.                 },
  11350.                 foodColor: {
  11351.                     path: 'game.foodColor',
  11352.                     opacity: true,
  11353.                     color: modSettings.game.foodColor,
  11354.                     default: null,
  11355.                 },
  11356.                 cellColor: {
  11357.                     path: 'game.cellColor',
  11358.                     opacity: true,
  11359.                     color: modSettings.game.cellColor,
  11360.                     default: null,
  11361.                 },
  11362.                 nameColor: {
  11363.                     path: 'game.name.color',
  11364.                     opacity: false,
  11365.                     color: modSettings.game.name.color,
  11366.                     default: '#ffffff',
  11367.                 },
  11368.                 gradientNameColor1: {
  11369.                     path: 'game.name.gradient.left',
  11370.                     opacity: false,
  11371.                     color: modSettings.game.name.gradient.left,
  11372.                     default: '#ffffff',
  11373.                 },
  11374.                 gradientNameColor2: {
  11375.                     path: 'game.name.gradient.right',
  11376.                     opacity: false,
  11377.                     color: modSettings.game.name.gradient.right,
  11378.                     default: '#ffffff',
  11379.                 },
  11380.                 chatBackground: {
  11381.                     path: 'chat.bgColor',
  11382.                     opacity: true,
  11383.                     color: modSettings.chat.bgColor,
  11384.                     default: defaultSettings.chat.bgColor,
  11385.                     elementTarget: {
  11386.                         selector: '.modChat',
  11387.                         property: 'background',
  11388.                     },
  11389.                 },
  11390.                 chatTextColor: {
  11391.                     path: 'chat.textColor',
  11392.                     opacity: true,
  11393.                     color: modSettings.chat.textColor,
  11394.                     default: defaultSettings.chat.textColor,
  11395.                     elementTarget: {
  11396.                         selector: '.chatMessage-text',
  11397.                         property: 'color',
  11398.                     },
  11399.                 },
  11400.                 chatThemeChanger: {
  11401.                     path: 'chat.themeColor',
  11402.                     opacity: true,
  11403.                     color: modSettings.chat.themeColor,
  11404.                     default: defaultSettings.chat.themeColor,
  11405.                     elementTarget: {
  11406.                         selector: '.chatButton',
  11407.                         property: 'background',
  11408.                     },
  11409.                 },
  11410.             };
  11411.  
  11412.             const { Alwan } = window;
  11413.  
  11414.             Object.entries(colorPickerConfig).forEach(
  11415.                 ([
  11416.                     selector,
  11417.                     {
  11418.                         path,
  11419.                         opacity,
  11420.                         color,
  11421.                         default: defaultColor,
  11422.                         elementTarget,
  11423.                     },
  11424.                 ]) => {
  11425.                     const storagePath = path.split('.');
  11426.                     const colorPickerInstance = new Alwan(`#${selector}`, {
  11427.                         id: `edit-${selector}`,
  11428.                         color: color || defaultColor || '#000000',
  11429.                         theme: 'dark',
  11430.                         opacity,
  11431.                         format: 'hex',
  11432.                         default: defaultColor,
  11433.                         swatches: ['black', 'white', 'red', 'blue', 'green'],
  11434.                     });
  11435.  
  11436.                     const pickerElement = byId(`edit-${selector}`);
  11437.                     pickerElement.insertAdjacentHTML(
  11438.                         'beforeend',
  11439.                         `
  11440.                             <div class="colorpicker-additional">
  11441.                                 <span>Reset Color</span>
  11442.                                 <button class="resetButton" id="reset-${selector}"></button>
  11443.                             </div>
  11444.                         `
  11445.                     );
  11446.  
  11447.                     colorPickerInstance.on('change', (e) => {
  11448.                         let storageElement = modSettings;
  11449.                         storagePath
  11450.                             .slice(0, -1)
  11451.                             .forEach(
  11452.                             (part) =>
  11453.                             (storageElement = storageElement[part])
  11454.                         );
  11455.                         storageElement[storagePath.at(-1)] = e.hex;
  11456.  
  11457.                         if (
  11458.                             path.includes('gradientName') &&
  11459.                             modSettings.game.name.gradient.enabled
  11460.                         ) {
  11461.                             modSettings.game.name.gradient.enabled = true;
  11462.                         }
  11463.  
  11464.                         if (elementTarget) {
  11465.                             const targets = document.querySelectorAll(
  11466.                                 elementTarget.selector
  11467.                             );
  11468.  
  11469.                             targets.forEach((target) => {
  11470.                                 target.style[elementTarget.property] = e.hex;
  11471.                             });
  11472.                         }
  11473.  
  11474.                         updateStorage();
  11475.                     });
  11476.  
  11477.                     byId(`reset-${selector}`)?.addEventListener('click', () => {
  11478.                         colorPickerInstance.setColor(defaultColor);
  11479.  
  11480.                         let storageElement = modSettings;
  11481.                         storagePath
  11482.                             .slice(0, -1)
  11483.                             .forEach(
  11484.                             (part) =>
  11485.                             (storageElement = storageElement[part])
  11486.                         );
  11487.                         storageElement[storagePath.at(-1)] = defaultColor;
  11488.  
  11489.                         if (
  11490.                             path.includes('gradientName') &&
  11491.                             !modSettings.game.name.gradient.left &&
  11492.                             !modSettings.game.name.gradient.right
  11493.                         ) {
  11494.                             modSettings.game.name.gradient.enabled = false;
  11495.                         }
  11496.  
  11497.                         if (elementTarget) {
  11498.                             const targets = document.querySelectorAll(
  11499.                                 elementTarget.selector
  11500.                             );
  11501.  
  11502.                             targets.forEach((target) => {
  11503.                                 target.style[elementTarget.property] =
  11504.                                     defaultColor;
  11505.                             });
  11506.                         }
  11507.  
  11508.                         updateStorage();
  11509.                     });
  11510.                 }
  11511.             );
  11512.         },
  11513.  
  11514.         async getBlockedChatData() {
  11515.             try {
  11516.                 const res = await fetch(`${this.appRoutes.blockedChatData}?v=${Math.floor(Math.random() * 9e5)}`, {
  11517.                     headers: {
  11518.                         'Content-Type': 'application/json'
  11519.                     }
  11520.                 });
  11521.                 const resData = await res.json();
  11522.                 const { names, messages } = resData;
  11523.  
  11524.                 this.blockedChatData = {
  11525.                     names,
  11526.                     messages
  11527.                 }
  11528.             } catch(e) {
  11529.                 console.error('Couldn\'t fetch blocked chat data.');
  11530.             }
  11531.         },
  11532.  
  11533.         async loadLibraries() {
  11534.             const loadScript = (src) =>
  11535.             new Promise((resolve, reject) => {
  11536.                 const script = document.createElement('script');
  11537.                 script.src = src;
  11538.                 script.type = 'text/javascript';
  11539.                 document.head.appendChild(script);
  11540.  
  11541.                 script.onload = () => resolve();
  11542.                 script.onerror = (error) => reject(error);
  11543.             });
  11544.  
  11545.             const loadCSS = (href) =>
  11546.             new Promise((resolve, reject) => {
  11547.                 const link = document.createElement('link');
  11548.                 link.rel = 'stylesheet';
  11549.                 link.href = href;
  11550.                 document.head.appendChild(link);
  11551.  
  11552.                 link.onload = () => resolve();
  11553.                 link.onerror = (error) => reject(error);
  11554.             });
  11555.  
  11556.             for (const [lib, val] of Object.entries(libs)) {
  11557.                 if (typeof val === 'string') {
  11558.                     await loadScript(val);
  11559.                 } else {
  11560.                     await loadScript(val.js);
  11561.                     if (val.css) await loadCSS(val.css);
  11562.                 }
  11563.  
  11564.                 console.log(`%c✅ Loaded ${lib}.`, 'color: lime');
  11565.  
  11566.                 if (typeof this[lib] === 'function') this[lib]();
  11567.             }
  11568.         },
  11569.  
  11570.         isRateLimited() {
  11571.             if (document.body.children[0]?.id === 'cf-wrapper') {
  11572.                 console.log('User is rate limited.');
  11573.                 return true;
  11574.             }
  11575.             return false;
  11576.         },
  11577.  
  11578.         setupUI() {
  11579.             this.menu();
  11580.             this.initStats();
  11581.             this.announcements();
  11582.             this.mainMenu();
  11583.             this.saveNames();
  11584.             this.tagsystem();
  11585.             this.createMinimap();
  11586.             this.themes();
  11587.         },
  11588.  
  11589.         setupGame() {
  11590.             this.game();
  11591.             this.macros();
  11592.         },
  11593.  
  11594.         setupNetworking() {
  11595.             this.clientPing();
  11596.             this.chat();
  11597.             this.handleNick();
  11598.         },
  11599.  
  11600.         initModules() {
  11601.             try {
  11602.                 this.loadLibraries();
  11603.                 this.setupUI();
  11604.                 this.setupGame();
  11605.                 this.setupNetworking();
  11606.             } catch (e) {
  11607.                 console.error('An error occurred while loading SigMod: ', e);
  11608.             }
  11609.         },
  11610.  
  11611.         init() {
  11612.             if (this.isRateLimited()) return;
  11613.             if (!document.querySelector('.body__inner')) return;
  11614.  
  11615.             this.credits();
  11616.  
  11617.             new SigWsHandler();
  11618.  
  11619.             this.initModules();
  11620.         }
  11621.     };
  11622.  
  11623.     mods = new Mod();
  11624. })();