☰

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-12 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         SigMod Client (Macros)
  3. // @version      10.1.8.1
  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.             limit: 100,
  113.             bgColor: '#00000040',
  114.             textColor: '#ffffff',
  115.             compact: false,
  116.             themeColor: '#8a25e5',
  117.             showTime: true,
  118.             showNameColors: true,
  119.             showClientChat: false,
  120.             showChatButtons: true,
  121.             blurTag: false,
  122.             locationText: '{pos}',
  123.         },
  124.         modAccount: {
  125.             authorized: false,
  126.         },
  127.     };
  128.  
  129.     let modSettings;
  130.     const stored = localStorage.getItem(storageName);
  131.     try {
  132.         modSettings = stored ? JSON.parse(stored) : defaultSettings;
  133.     } catch (e) {
  134.         modSettings = defaultSettings;
  135.     }
  136.  
  137.     // really rare cases, but in case the storage structure changes completely again
  138.     if (
  139.         modSettings.storageVersion &&
  140.         modSettings.storageVersion !== storageVersion
  141.     ) {
  142.         localStorage.removeItem(storageName);
  143.         location.reload();
  144.     }
  145.  
  146.     if (!stored) updateStorage();
  147.  
  148.     // intercept fetches
  149.     let fetchedUser = 0;
  150.     const originalFetch = window.fetch;
  151.  
  152.     window.fetch = new Proxy(originalFetch, {
  153.         async apply(target, thisArg, argumentsList) {
  154.             const [url] = argumentsList;
  155.             const response = await target.apply(thisArg, argumentsList);
  156.  
  157.             if (typeof url === 'string') {
  158.                 if (url.includes('/server/auth')) {
  159.                     const data = await response.clone().json();
  160.                     if (data) mods.handleGoogleAuth(data.body?.user);
  161.                 }
  162.             }
  163.  
  164.             return response;
  165.         },
  166.     });
  167.  
  168.     // for development
  169.     let isDev = false;
  170.     let port = 3001;
  171.  
  172.     // global sigmod
  173.     window.sigmod = {
  174.         version,
  175.         server_version: serverVersion,
  176.         storageName,
  177.         settings: modSettings,
  178.     };
  179.  
  180.     // Global gameSettings object to store the Sigmally WebSocket, User instance and playing status
  181.     /*
  182.      * @typedef {Object} User
  183.      * @property {string} _id
  184.      * @property {number} boost
  185.      * @property {Object.<string, number>} cards
  186.      * @property {string} clan
  187.      * @property {string} createTime
  188.      * @property {string} email
  189.      * @property {number} exp
  190.      * @property {string} fullName
  191.      * @property {string} givenName
  192.      * @property {number} gold
  193.      * @property {string} googleID
  194.      * @property {number} hourlyTime
  195.      * @property {string} imageURL
  196.      * @property {any[]} lastSkinUsed
  197.      * @property {number} level
  198.      * @property {number} nextLevel
  199.      * @property {number} progress
  200.      * @property {number} seasonExp
  201.      * @property {Object.<string, any>} sigma
  202.      * @property {string[]} skins
  203.      * @property {number} subscription
  204.      * @property {string} updateTime
  205.      * @property {string} token
  206.      *
  207.      * @property {WebSocket} ws
  208.      * @property {User} user
  209.      * @property {boolean} isPlaying
  210.      */
  211.     window.gameSettings = {
  212.         ws: null,
  213.         user: null,
  214.         isPlaying: false,
  215.     };
  216.  
  217.     // --------- HELPER FUNCTIONS --------- \\
  218.     // --- General
  219.     // --- Colors
  220.     // --- Game
  221.     // --- Time
  222.     // --- (Coordinates)
  223.  
  224.     function updateStorage() {
  225.         localStorage.setItem(storageName, JSON.stringify(modSettings));
  226.     }
  227.  
  228.     const byId = (id) => document.getElementById(id);
  229.  
  230.     function debounce(func, delay) {
  231.         let timeoutId;
  232.         return function (...args) {
  233.             clearTimeout(timeoutId);
  234.             timeoutId = setTimeout(() => {
  235.                 func.apply(this, args);
  236.             }, delay);
  237.         };
  238.     }
  239.  
  240.     async function wait(ms) {
  241.         return new Promise((r) => setTimeout(r, ms));
  242.     }
  243.  
  244.     function noXSS(text) {
  245.         return text
  246.             .replace(/&/g, '&amp;')
  247.             .replace(/</g, '&lt;')
  248.             .replace(/>/g, '&gt;')
  249.             .replace(/"/g, '&quot;')
  250.             .replace(/'/g, '&#039;');
  251.     }
  252.  
  253.     function parsetxt(val) {
  254.         return /^(?:\{([^}]*)})?([^]*)/.exec(val)[2].trim();
  255.     }
  256.  
  257.     // generate random string
  258.     const rdmString = (length) => {
  259.         return [...Array(length)]
  260.             .map(() => Math.random().toString(36).charAt(2))
  261.             .join('');
  262.     };
  263.  
  264.     // --------- Colors --------- //
  265.  
  266.     // rgba values to hex color code
  267.     function RgbaToHex(code) {
  268.         const rgbaValues = code.match(/\d+/g);
  269.         const [r, g, b] = rgbaValues.slice(0, 3);
  270.         return `#${Number(r).toString(16).padStart(2, '0')}${Number(g)
  271.             .toString(16)
  272.             .padStart(2, '0')}${Number(b).toString(16).padStart(2, '0')}`;
  273.     }
  274.  
  275.     function bytesToHex(r, g, b) {
  276.         return (
  277.             '#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)
  278.         );
  279.     }
  280.  
  281.     // --------- Game --------- //
  282.  
  283.     function menuClosed() {
  284.         const menuWrapper = byId('menu-wrapper');
  285.  
  286.         return menuWrapper.style.display === 'none';
  287.     }
  288.  
  289.     function isDead() {
  290.         const __line2 = byId('__line2');
  291.         return !__line2.classList.contains('line--hidden');
  292.     }
  293.  
  294.     function getGameMode() {
  295.         const gameMode = byId('gamemode');
  296.         if (!gameMode.value) {
  297.             return 'Tourney';
  298.         }
  299.         const options = Object.values(gameMode.querySelectorAll('option'));
  300.         const selectedOption = options.filter(
  301.             (option) => option.value === gameMode.value
  302.         )[0];
  303.         return selectedOption.textContent.split(' ')[0];
  304.     }
  305.  
  306.     function keypress(key, keycode) {
  307.         const keyDownEvent = new KeyboardEvent('keydown', {
  308.             key: key,
  309.             code: keycode,
  310.         });
  311.         const keyUpEvent = new KeyboardEvent('keyup', {
  312.             key: key,
  313.             code: keycode,
  314.         });
  315.  
  316.         window.dispatchEvent(keyDownEvent);
  317.         window.dispatchEvent(keyUpEvent);
  318.     }
  319.  
  320.     function mousemove(sx, sy) {
  321.         const mouseMoveEvent = new MouseEvent('mousemove', {
  322.             clientX: sx,
  323.             clientY: sy,
  324.         });
  325.         const canvas = byId('canvas');
  326.         canvas.dispatchEvent(mouseMoveEvent);
  327.     }
  328.  
  329.     // time formatters
  330.     const prettyTime = {
  331.         fullDate: (dateTimestamp, time = false) => {
  332.             const date = new Date(dateTimestamp);
  333.             const day = String(date.getDate()).padStart(2, '0');
  334.             const month = String(date.getMonth() + 1).padStart(2, '0');
  335.             const year = date.getFullYear();
  336.             const formattedDate = `${day}.${month}.${year}`;
  337.  
  338.             if (time) {
  339.                 const hours = String(date.getHours()).padStart(2, '0');
  340.                 const minutes = String(date.getMinutes()).padStart(2, '0');
  341.                 const seconds = String(date.getSeconds()).padStart(2, '0');
  342.                 return `${hours}:${minutes}:${seconds} ${formattedDate}`;
  343.             }
  344.  
  345.             return formattedDate;
  346.         },
  347.         am_pm: (date) => {
  348.             if (!date) return '';
  349.  
  350.             const d = new Date(date);
  351.             const hours = d.getHours();
  352.             const minutes = String(d.getMinutes()).padStart(2, '0');
  353.             const ampm = hours >= 12 ? 'PM' : 'AM';
  354.             const formattedHours = (hours % 12 || 12)
  355.                 .toString()
  356.                 .padStart(2, '0');
  357.  
  358.             return `${formattedHours}:${minutes} ${ampm}`;
  359.         },
  360.         time_ago: (timestamp, isIso = false) => {
  361.             if (!timestamp) return '';
  362.             const currentTime = new Date();
  363.             const elapsedTime = isIso
  364.                 ? currentTime - new Date(timestamp)
  365.                 : currentTime - timestamp;
  366.  
  367.             const seconds = Math.floor(elapsedTime / 1000);
  368.             const minutes = Math.floor(seconds / 60);
  369.             const hours = Math.floor(minutes / 60);
  370.             const days = Math.floor(hours / 24);
  371.             const years = Math.floor(days / 365);
  372.  
  373.             if (years > 0) {
  374.                 return years === 1 ? '1 year ago' : `${years} years ago`;
  375.             } else if (days > 0) {
  376.                 return days === 1 ? '1 day ago' : `${days} days ago`;
  377.             } else if (hours > 0) {
  378.                 return hours === 1 ? '1 hour ago' : `${hours} hours ago`;
  379.             } else if (minutes > 0) {
  380.                 return minutes === 1
  381.                     ? '1 minute ago'
  382.                     : `${minutes} minutes ago`;
  383.             } else {
  384.                 return seconds <= 1 ? '1s>' : `${seconds}s ago`;
  385.             }
  386.         },
  387.         getTimeLeft(timestamp) {
  388.             let totalSeconds = Math.max(0, Math.floor((timestamp - Date.now()) / 1000));
  389.             const timeUnits = [['d', 86400], ['h', 3600], ['m', 60], ['s', 1]];
  390.             let result = '';
  391.  
  392.             for (const [unit, seconds] of timeUnits) {
  393.                 if (totalSeconds >= seconds) {
  394.                     const value = Math.floor(totalSeconds / seconds);
  395.                     totalSeconds %= seconds;
  396.                     result += `${value}${unit}`;
  397.                 }
  398.             }
  399.  
  400.             return result || '0s';
  401.         }
  402.     };
  403.  
  404.     const getCoordinates = (border, gridCount = 5) => {
  405.         const { left, top, width, height } = border;
  406.         const gridSize = width / gridCount;
  407.         const coordinates = {};
  408.  
  409.         for (let i = 0; i < gridCount; i++) {
  410.             for (let j = 0; j < gridCount; j++) {
  411.                 const label = String.fromCharCode(65 + i) + (j + 1);
  412.  
  413.                 coordinates[label] = {
  414.                     min: { x: left + i * gridSize, y: top + j * gridSize },
  415.                     max: { x: left + (i + 1) * gridSize, y: top + (j + 1) * gridSize },
  416.                 };
  417.             }
  418.         }
  419.  
  420.         return coordinates;
  421.     };
  422.  
  423.     class Reader {
  424.         constructor(view, offset, littleEndian) {
  425.             this._e = littleEndian;
  426.             if (view) this.repurpose(view, offset);
  427.         }
  428.  
  429.         repurpose(view, offset) {
  430.             this.view = view;
  431.             this._o = offset || 0;
  432.         }
  433.  
  434.         getUint8() {
  435.             return this.view.getUint8(this._o++, this._e);
  436.         }
  437.  
  438.         getFloat64() {
  439.             return this.view.getFloat64((this._o += 8) - 8, this._e);
  440.         }
  441.  
  442.         getStringUTF8(decode = true) {
  443.             let bytes = [];
  444.             let b;
  445.             while ((b = this.view.getUint8(this._o++)) !== 0) bytes.push(b);
  446.  
  447.             let uint8Array = new Uint8Array(bytes);
  448.             let decoder = new TextDecoder('utf-8');
  449.             let s = decoder.decode(uint8Array);
  450.  
  451.             return decode ? s : uint8Array;
  452.         }
  453.  
  454.         raw(len = 0) {
  455.             const buf = this.view.buffer.slice(this._o, this._o + len);
  456.             this._o += len;
  457.             return buf;
  458.         }
  459.     }
  460.  
  461.     const __buf = new DataView(new ArrayBuffer(8));
  462.  
  463.     class Writer {
  464.         constructor(littleEndian) {
  465.             this._e = littleEndian;
  466.             this.reset();
  467.         }
  468.  
  469.         reset() {
  470.             this._b = [];
  471.             this._o = 0;
  472.         }
  473.  
  474.         setUint8(a) {
  475.             if (a >= 0 && a < 256) this._b.push(a);
  476.             return this;
  477.         }
  478.  
  479.         setUint32(a) {
  480.             __buf.setUint32(0, a, this._e);
  481.             this._move(4);
  482.             return this;
  483.         }
  484.  
  485.         _move(b) {
  486.             for (let i = 0; i < b; i++) this._b.push(__buf.getUint8(i));
  487.         }
  488.  
  489.         setStringUTF8(s) {
  490.             const bytesStr = unescape(encodeURIComponent(s));
  491.             for (let i = 0, l = bytesStr.length; i < l; i++) {
  492.                 this._b.push(bytesStr.charCodeAt(i));
  493.             }
  494.             this._b.push(0);
  495.             return this;
  496.         }
  497.  
  498.         build() {
  499.             return new Uint8Array(this._b);
  500.         }
  501.     }
  502.  
  503.     // --------- END HELPER FUNCTIONS --------- //
  504.  
  505.     let client = null;
  506.     let freezepos = false;
  507.  
  508.     // --------- Sigmally WebSocket Handler --------- //
  509.     class SigWsHandler {
  510.         constructor() {
  511.             this.handshake = false;
  512.             this.C = new Uint8Array(256);
  513.             this.R = new Uint8Array(256);
  514.  
  515.             this.overrideWebSocketSend();
  516.         }
  517.  
  518.         overrideWebSocketSend() {
  519.             const handler = this;
  520.  
  521.             window.WebSocket = new Proxy(window.WebSocket, {
  522.                 construct(target, args) {
  523.                     const wsInstance = new target(...args);
  524.  
  525.                     if (args[0].includes('sigmally.com')) {
  526.                         handler.setupWebSocket(wsInstance);
  527.                     }
  528.  
  529.                     return wsInstance;
  530.                 },
  531.             });
  532.         }
  533.  
  534.         setupWebSocket(ws) {
  535.             window.gameSettings.ws = ws;
  536.  
  537.             // if 'save' is in localstorage, it indicates that you are logged in to Google; if that is the case, it
  538.             // will load the client after the authorization to load the modClient correctly.
  539.             // This loads the client instantly if you're not logged in to Google
  540.             if (!localStorage.getItem('save') && !client) {
  541.                 client = new modClient();
  542.             }
  543.  
  544.             ws.addEventListener('close', () => this.handleWebSocketClose());
  545.             ws.sendPacket = this.sendPacket.bind(this);
  546.  
  547.             window.sendPlay = this.sendPlay.bind(this);
  548.             window.sendChat = this.sendChat.bind(this);
  549.             window.sendMouseMove = this.sendMouseMove.bind(this);
  550.  
  551.             const originalSend = ws.send.bind(ws);
  552.             ws.send = (data) => {
  553.                 try {
  554.                     const arrayBuffer =
  555.                         data instanceof ArrayBuffer ? data : data.buffer;
  556.                     const dataView = new DataView(arrayBuffer);
  557.                     const reader = new Reader(dataView, 0, true);
  558.                     const r = reader.getUint8();
  559.  
  560.                     if (this.R[r] === 0) {
  561.                         window.gameSettings.isPlaying = true;
  562.                     }
  563.  
  564.                     if (!window.sigfix && freezepos && this.R[r] === 16) {
  565.                         return;
  566.                     }
  567.  
  568.                     originalSend(data);
  569.                 } catch (e) {
  570.                     console.error(e);
  571.                 }
  572.             };
  573.  
  574.             ws.addEventListener('message', (event) =>
  575.                 this.handleMessage(event)
  576.             );
  577.         }
  578.  
  579.         handleWebSocketClose() {
  580.             this.handshake = false;
  581.             window.gameSettings.isPlaying = false;
  582.  
  583.             playerPosition.x = null;
  584.             playerPosition.y = null;
  585.             byId('mod-messages').innerHTML = '';
  586.             setTimeout(mods.showOverlays, 500);
  587.         }
  588.  
  589.         sendPacket(packet) {
  590.             if (!window.gameSettings.ws) {
  591.                 console.error('WebSocket is not defined.');
  592.                 return;
  593.             }
  594.  
  595.             if (packet.build)
  596.                 return window.gameSettings.ws.send(packet.build());
  597.             window.gameSettings.ws.send(packet);
  598.         }
  599.  
  600.         sendPlay(playData) {
  601.             const { sigfix } = window;
  602.             if (sigfix) {
  603.                 sigfix.net.play(sigfix.world.selected, JSON.parse(playData));
  604.                 return;
  605.             }
  606.  
  607.             const writer = new Writer(true);
  608.             writer.setUint8(this.C[0x00]);
  609.             writer.setStringUTF8(playData);
  610.             this.sendPacket(writer);
  611.         }
  612.  
  613.         sendChat(text) {
  614.             if (mods.aboveRespawnLimit && text === mods.respawnCommand) return;
  615.  
  616.             if (window.sigfix) {
  617.                 window.sigfix.net.chat(text);
  618.                 return;
  619.             }
  620.  
  621.             const writer = new Writer();
  622.             writer.setUint8(this.C[0x63]);
  623.             writer.setUint8(0);
  624.             writer.setStringUTF8(text);
  625.             this.sendPacket(writer);
  626.         }
  627.  
  628.         sendMouseMove(x, y) {
  629.             const writer = new Writer(true);
  630.             writer.setUint8(this.C[0x10]);
  631.             writer.setUint32(x);
  632.             writer.setUint32(y);
  633.             writer._b.push(0, 0, 0, 0);
  634.             this.sendPacket(writer);
  635.         }
  636.  
  637.         removePlayer(id) {
  638.             const index = this.cells.players.indexOf(id);
  639.             if (index !== -1) {
  640.                 this.cells.players.splice(index, 1);
  641.             }
  642.         }
  643.  
  644.         handleMessage(event) {
  645.             const reader = new Reader(new DataView(event.data), 0, true);
  646.  
  647.             if (!this.handshake) {
  648.                 this.performHandshake(reader);
  649.                 return;
  650.             }
  651.  
  652.             const r = reader.getUint8();
  653.             switch (this.R[r]) {
  654.                 case 0x63:
  655.                     this.handleChatMessage(reader);
  656.                     break;
  657.                 case 0x40:
  658.                     this.updateBorder(reader);
  659.                     break;
  660.             }
  661.         }
  662.  
  663.         performHandshake(reader) {
  664.             reader.getStringUTF8(false);
  665.             this.C.set(new Uint8Array(reader.raw(256)));
  666.  
  667.             for (const i in this.C) {
  668.                 this.R[this.C[i]] = ~~i;
  669.             }
  670.  
  671.             this.handshake = true;
  672.         }
  673.  
  674.         handleChatMessage(reader) {
  675.             const flags = reader.getUint8();
  676.             const color = bytesToHex(
  677.                 reader.getUint8(),
  678.                 reader.getUint8(),
  679.                 reader.getUint8()
  680.             );
  681.             let name = reader.getStringUTF8();
  682.             const message = reader.getStringUTF8();
  683.             const server = !!(flags & 0x80);
  684.             const admin = !!(flags & 0x40);
  685.             const mod = !!(flags & 0x20);
  686.  
  687.             name = this.formatName(name, server, admin, mod);
  688.             if (mods.mutedUsers.includes(name)) return;
  689.  
  690.             if (mods.spamMessage(name, message)) return;
  691.  
  692.             if (!modSettings.chat.showClientChat) {
  693.                 mods.updateChat({
  694.                     server,
  695.                     admin,
  696.                     mod,
  697.                     color: modSettings.chat.showNameColors ? color : '#fafafa',
  698.                     name,
  699.                     message,
  700.                     time: modSettings.chat.showTime ? Date.now() : null,
  701.                 });
  702.             }
  703.         }
  704.  
  705.         formatName(name, server, admin, mod) {
  706.             if (server && name !== 'SERVER') name = '[SERVER]';
  707.             if (admin) name = '[ADMIN] ' + name;
  708.             if (mod) name = '[MOD] ' + name;
  709.             if (name === '') name = 'Unnamed';
  710.             return parsetxt(name);
  711.         }
  712.  
  713.         updateBorder(reader) {
  714.             mods.border.left = reader.getFloat64();
  715.             mods.border.top = reader.getFloat64();
  716.             mods.border.right = reader.getFloat64();
  717.             mods.border.bottom = reader.getFloat64();
  718.  
  719.             mods.border.width = mods.border.right - mods.border.left;
  720.             mods.border.height = mods.border.bottom - mods.border.top;
  721.             mods.border.centerX = (mods.border.left + mods.border.right) / 2;
  722.             mods.border.centerY = (mods.border.top + mods.border.bottom) / 2;
  723.         }
  724.     }
  725.  
  726.     class SigFixHandler {
  727.         constructor() {
  728.             this.lastHadCells = false;
  729.  
  730.             this.checkInterval = null;
  731.             this.updatePosInterval = null;
  732.             this.init();
  733.         }
  734.  
  735.         overrideMoveFunction() {
  736.             if (!window.sigfix?.net?.move) return;
  737.  
  738.             const originalMove = window.sigfix.net.move;
  739.             let isHandlingFreeze = false;
  740.  
  741.             window.sigfix.net.move = (...args) => {
  742.                 if (freezepos) {
  743.                     if (!isHandlingFreeze) {
  744.                         isHandlingFreeze = true;
  745.                         originalMove.call(
  746.                             this,
  747.                             playerPosition.x,
  748.                             playerPosition.y
  749.                         );
  750.                         isHandlingFreeze = false;
  751.                     }
  752.                     return;
  753.                 }
  754.                 return originalMove.apply(this, args);
  755.             };
  756.         }
  757.         updatePlayerPos() {
  758.             let myName = '';
  759.             let ownN = 0;
  760.             let ownX = 0;
  761.             let ownY = 0;
  762.             let hadCells = this.lastHadCells ?? true;
  763.  
  764.             const ownedCells = window.sigfix.world.views.get(window.sigfix.world.selected)?.owned || [];
  765.  
  766.             ownedCells.forEach(id => {
  767.                 const cell = window.sigfix.world.cells.get(id)?.merged;
  768.                 if (!cell) return;
  769.  
  770.                 myName = cell.name || 'An unnamed cell';
  771.                 ++ownN;
  772.                 ownX += cell.nx;
  773.                 ownY += cell.ny;
  774.             });
  775.  
  776.             if (ownN > 0) {
  777.                 ownX /= ownN;
  778.                 ownY /= ownN;
  779.  
  780.                 playerPosition.x = ownX;
  781.                 playerPosition.y = ownY;
  782.  
  783.                 if (client?.ws?.readyState === 1 && modSettings.settings.tag) {
  784.                     client.send({
  785.                         type: 'position',
  786.                         content: {
  787.                             x: playerPosition.x,
  788.                             y: playerPosition.y,
  789.                         },
  790.                     });
  791.                 }
  792.  
  793.                 this.lastHadCells = true;
  794.             } else if (hadCells) {
  795.                 if (client?.ws?.readyState === 1 && modSettings.settings.tag) {
  796.                     client.send({
  797.                         type: 'position',
  798.                         content: {
  799.                             x: null,
  800.                             y: null,
  801.                         },
  802.                     });
  803.                 }
  804.                 this.lastHadCells = false;
  805.             }
  806.         }
  807.  
  808.         init() {
  809.             const checkSigFix = () => {
  810.                 if (window.sigfix) {
  811.                     this.updatePosInterval = setInterval(this.updatePlayerPos, 300);
  812.                 }
  813.                 if (window.sigfix?.net) {
  814.                     this.overrideMoveFunction();
  815.                     clearInterval(this.checkInterval);
  816.  
  817.                     setTimeout(() => {
  818.                         if (window.sigfix?.net) {
  819.                             this.checkInterval = null;
  820.                         }
  821.                     }, 1000);
  822.                 }
  823.             };
  824.  
  825.             this.checkInterval = setInterval(checkSigFix, 100);
  826.         }
  827.     }
  828.  
  829.     new SigFixHandler();
  830.  
  831.     // --------- Mod Client --------- //
  832.     class modClient {
  833.         constructor() {
  834.             this.ws = null;
  835.             this.wsUrl = isDev
  836.                 ? `ws://localhost:${port}/ws`
  837.                 : 'wss://mod.czrsd.com/ws';
  838.  
  839.             this.retries = 0;
  840.             this.maxRetries = 4;
  841.             this.updateAvailable = false;
  842.  
  843.             this.id = null;
  844.  
  845.             this.connect();
  846.         }
  847.  
  848.         connect() {
  849.             this.ws = new WebSocket(this.wsUrl);
  850.             this.ws.binaryType = 'arraybuffer';
  851.  
  852.             this.ws.addEventListener('open', this.onOpen.bind(this));
  853.             this.ws.addEventListener('close', this.onClose.bind(this));
  854.             this.ws.addEventListener('message', this.onMessage.bind(this));
  855.             this.ws.addEventListener('error', this.onError.bind(this));
  856.         }
  857.  
  858.         async onOpen() {
  859.             await this.waitForDOMLoad();
  860.  
  861.             this.updateClientInfo();
  862.             this.updateTagInfo();
  863.         }
  864.  
  865.         waitForDOMLoad() {
  866.             return new Promise((resolve) => setTimeout(resolve, 500));
  867.         }
  868.  
  869.         updateClientInfo() {
  870.             this.send({
  871.                 type: 'server-changed',
  872.                 content: getGameMode(),
  873.             });
  874.             this.send({
  875.                 type: 'version',
  876.                 content: serverVersion,
  877.             });
  878.         }
  879.  
  880.         updateTagInfo() {
  881.             const tagElement = document.querySelector('#tag');
  882.             const tagText = document.querySelector('.tagText');
  883.             const tagValue = this.getTagFromUrl();
  884.  
  885.             if (tagValue) {
  886.                 modSettings.settings.tag = tagValue;
  887.                 updateStorage();
  888.                 tagElement.value = tagValue;
  889.                 tagText.innerText = `Tag: ${tagValue}`;
  890.                 this.send({
  891.                     type: 'update-tag',
  892.                     content: modSettings.settings.tag,
  893.                 });
  894.             } else if (modSettings.settings.tag) {
  895.                 tagElement.value = modSettings.settings.tag;
  896.                 tagText.innerText = `Tag: ${modSettings.settings.tag}`;
  897.                 this.send({
  898.                     type: 'update-tag',
  899.                     content: modSettings.settings.tag,
  900.                 });
  901.             }
  902.         }
  903.  
  904.         getTagFromUrl() {
  905.             const urlParams = new URLSearchParams(window.location.search);
  906.             const tagValue = urlParams.get('tag');
  907.             return tagValue ? tagValue.replace(/\/$/, '') : null;
  908.         }
  909.  
  910.         onClose() {
  911.             if (this.updateAvailable) return;
  912.  
  913.             this.retries++;
  914.             if (this.retries > this.maxRetries)
  915.                 throw new Error('SigMod server down.');
  916.  
  917.             setTimeout(() => this.connect(), 2000); // auto reconnect with delay
  918.         }
  919.  
  920.         onMessage(event) {
  921.             const message = this.parseMessage(event.data);
  922.             if (!message || !message.type) return;
  923.  
  924.             switch (message.type) {
  925.                 case 'sid':
  926.                     this.handleSidMessage(message.content);
  927.                     break;
  928.                 case 'ping':
  929.                     this.handlePingMessage();
  930.                     break;
  931.                 case 'minimap-data':
  932.                     mods.updData(message.content);
  933.                     break;
  934.                 case 'chat-message':
  935.                     this.handleChatMessage(message.content);
  936.                     break;
  937.                 case 'private-message':
  938.                     mods.updatePrivateChat(message.content);
  939.                     break;
  940.                 case 'update-available':
  941.                     this.handleUpdateAvailable(message.content);
  942.                     break;
  943.                 case 'alert':
  944.                     mods.handleAlert(message.content);
  945.                     break;
  946.                 case 'tournament-preview':
  947.                     mods.tData = message.content;
  948.                     mods.showTournament(message.content);
  949.                     break;
  950.                 case 'tournament-message':
  951.                     mods.updateChat({
  952.                         name: '[TOURNAMENT]',
  953.                         message: message.content,
  954.                         time: modSettings.chat.showTime ? Date.now() : null,
  955.                     });
  956.                     break;
  957.                 case 'tournament-session':
  958.                     mods.tournamentSession(message.content);
  959.                     break;
  960.                 case 'get-score':
  961.                     mods.getScore(message.content);
  962.                     break;
  963.                 case 'round-end':
  964.                     mods.roundEnd(message.content);
  965.                     break;
  966.                 case 'round-ready':
  967.                     mods.tournamentReady(message.content);
  968.                     break;
  969.                 case 'tournament-data':
  970.                     mods.handleTournamentData(message.content);
  971.                     break;
  972.                 case 'error':
  973.                     mods.modAlert(message.content.message, 'danger');
  974.                     break;
  975.                 default:
  976.                     console.error('Unknown message type:', message.type);
  977.             }
  978.         }
  979.  
  980.         onError(event) {
  981.             console.error('WebSocket error:', event);
  982.         }
  983.  
  984.         send(data) {
  985.             if (!data || this.ws.readyState !== 1) return;
  986.             const binaryData = new TextEncoder().encode(JSON.stringify(data));
  987.             this.ws.send(binaryData);
  988.         }
  989.  
  990.         parseMessage(data) {
  991.             try {
  992.                 const stringData = new TextDecoder().decode(
  993.                     new Uint8Array(data)
  994.                 );
  995.                 return JSON.parse(stringData);
  996.             } catch (error) {
  997.                 console.error('Failed to parse message:', error);
  998.                 return null;
  999.             }
  1000.         }
  1001.  
  1002.         handleSidMessage(content) {
  1003.             this.id = content;
  1004.             if (!modSettings.modAccount.authorized) return;
  1005.  
  1006.             setTimeout(() => {
  1007.                 mods.auth(content);
  1008.             }, 1000);
  1009.         }
  1010.  
  1011.         handlePingMessage() {
  1012.             const latency = Date.now() - mods.ping.start;
  1013.             mods.ping.end = Date.now();
  1014.             mods.ping.latency = latency;
  1015.             byId('clientPing').innerHTML = `Client Ping: ${latency}ms`;
  1016.         }
  1017.  
  1018.         handleChatMessage(content) {
  1019.             if (!content) return;
  1020.             let { admin, mod, vip, name, message, color } = content;
  1021.  
  1022.             name = this.formatChatName(admin, mod, vip, name);
  1023.  
  1024.             mods.updateChat({
  1025.                 admin,
  1026.                 mod,
  1027.                 color,
  1028.                 name,
  1029.                 message,
  1030.                 time: modSettings.chat.showTime ? Date.now() : null,
  1031.             });
  1032.         }
  1033.  
  1034.         formatChatName(admin, mod, vip, name) {
  1035.             if (admin) name = '[Owner] ' + name;
  1036.             if (mod) name = '[Mod] ' + name;
  1037.             if (vip) name = '[VIP] ' + name;
  1038.             if (!name) name = 'Unnamed';
  1039.             return name;
  1040.         }
  1041.  
  1042.         handleUpdateAvailable(content) {
  1043.             byId('play-btn').setAttribute('disabled', 'disabled');
  1044.             byId('spectate-btn').setAttribute('disabled', 'disabled');
  1045.             this.updateAvailable = true;
  1046.             this.createModAlert(content);
  1047.         }
  1048.  
  1049.         createModAlert(content) {
  1050.             const modAlert = document.createElement('div');
  1051.             modAlert.classList.add('modAlert');
  1052.             modAlert.innerHTML = `
  1053.                 <span>You are using an old mod version. Please update.</span>
  1054.                 <div class="flex centerXY g-5">
  1055.                     <button
  1056.                         class="modButton"
  1057.                         style="width: 100%"
  1058.                         onclick="window.open('${content}')"
  1059.                     >Update</button>
  1060.                 </div>
  1061.             `;
  1062.             document.body.append(modAlert);
  1063.         }
  1064.     }
  1065.  
  1066.     function randomPos() {
  1067.         let eventOptions = {
  1068.             clientX: Math.floor(Math.random() * window.innerWidth),
  1069.             clientY: Math.floor(Math.random() * window.innerHeight),
  1070.             bubbles: true,
  1071.             cancelable: true,
  1072.         };
  1073.  
  1074.         let event = new MouseEvent('mousemove', eventOptions);
  1075.  
  1076.         document.dispatchEvent(event);
  1077.     }
  1078.  
  1079.     let moveInterval = setInterval(randomPos);
  1080.     setTimeout(() => clearInterval(moveInterval), 600);
  1081.  
  1082.     function addSettings() {
  1083.         const gameSettings = document.querySelector('.checkbox-grid');
  1084.         if (!gameSettings) return;
  1085.  
  1086.         const div = document.createElement('div');
  1087.         div.innerHTML = `
  1088.             <input type="checkbox" id="showNames">
  1089.             <label>Names</label>
  1090.             <input type="checkbox" id="showSkins">
  1091.             <label>Skins</label>
  1092.             <input type="checkbox" id="autoRespawn">
  1093.             <label>Auto Respawn</label>
  1094.             <input type="checkbox" id="autoClaimCoins">
  1095.             <label>Auto claim coins</label>
  1096.             <input type="checkbox" id="showPosition">
  1097.             <label>Position</label>
  1098.         `;
  1099.         while (div.children.length > 0) gameSettings.append(div.children[0]);
  1100.     }
  1101.     addSettings();
  1102.  
  1103.     async function checkDiscordLogin() {
  1104.         // popup window from discord login
  1105.         const urlParams = new URLSearchParams(window.location.search);
  1106.         let accessToken = urlParams.get('access_token');
  1107.         let refreshToken = urlParams.get('refresh_token');
  1108.  
  1109.         if (!accessToken || !refreshToken) return;
  1110.  
  1111.         const url = isDev
  1112.             ? `http://localhost:${port}/discord/login/`
  1113.             : 'https://mod.czrsd.com/discord/login/';
  1114.  
  1115.         const overlay = document.createElement('div');
  1116.         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`;
  1117.         overlay.innerHTML = `
  1118.                 <span style="font-size: 5rem; color: #fafafa;">Login...</span>
  1119.             `;
  1120.         document.body.append(overlay);
  1121.  
  1122.         setTimeout(async () => {
  1123.             if (refreshToken.endsWith('/')) {
  1124.                 refreshToken = refreshToken.substring(
  1125.                     0,
  1126.                     refreshToken.length - 1
  1127.                 );
  1128.             } else {
  1129.                 return;
  1130.             }
  1131.  
  1132.             await fetch(
  1133.                 `${url}?accessToken=${accessToken}&refreshToken=${refreshToken}`,
  1134.                 {
  1135.                     method: 'GET',
  1136.                     credentials: 'include',
  1137.                 }
  1138.             );
  1139.  
  1140.             modSettings.modAccount.authorized = true;
  1141.             updateStorage();
  1142.             window.close();
  1143.         }, 500);
  1144.     }
  1145.     checkDiscordLogin();
  1146.  
  1147.     let mods = {};
  1148.  
  1149.     let playerPosition = { x: null, y: null };
  1150.     let lastGetScore = 0;
  1151.     let lastPosTime = 0;
  1152.     let dead = false;
  1153.     let dead2 = false;
  1154.  
  1155.     function Mod() {
  1156.         this.nick = null;
  1157.         this.profile = {};
  1158.         this.friends_settings = window.sigmod.friends_settings = {};
  1159.         this.friend_names = window.sigmod.friend_names = new Set();
  1160.  
  1161.         this.splitKey = {
  1162.             keyCode: 32,
  1163.             code: 'Space',
  1164.             cancelable: true,
  1165.             composed: true,
  1166.             isTrusted: true,
  1167.             which: 32,
  1168.         };
  1169.  
  1170.         this.ping = {
  1171.             latency: NaN,
  1172.             intervalId: null,
  1173.             start: null,
  1174.             end: null,
  1175.         };
  1176.  
  1177.         this.dayTimer = null;
  1178.         this.challenges = [];
  1179.  
  1180.         this.scrolling = false;
  1181.         this.onContext = false;
  1182.         this.mouseDown = false;
  1183.  
  1184.         this.mouseX = 0;
  1185.         this.mouseY = 0;
  1186.  
  1187.         this.renderedMessages = 0;
  1188.         this.maxChatMessages = 200;
  1189.         this.mutedUsers = [];
  1190.         this.blockedChatData = {
  1191.             names: [],
  1192.             messages: []
  1193.         };
  1194.  
  1195.         this.respawnCommand = '/leaveworld';
  1196.         this.aboveRespawnLimit = false;
  1197.         this.cellSize = 0;
  1198.         this.miniMapData = [];
  1199.         this.border = {};
  1200.  
  1201.         this.dbCache = null;
  1202.  
  1203.         this.tourneyPassword = '';
  1204.         this.lastOneStanding = false;
  1205.  
  1206.         this.skins = [];
  1207.  
  1208.         this.virusImageLoaded = false;
  1209.         this.skinImageLoaded = false;
  1210.  
  1211.         this.routes = {
  1212.             discord: {
  1213.                 auth: isDev
  1214.                     ? 'https://discord.com/oauth2/authorize?client_id=1067097357780516874&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3001%2Fdiscord%2Fcallback&scope=identify'
  1215.                     : 'https://discord.com/oauth2/authorize?client_id=1067097357780516874&response_type=code&redirect_uri=https%3A%2F%2Fmod.czrsd.com%2Fdiscord%2Fcallback&scope=identify',
  1216.             },
  1217.         };
  1218.  
  1219.         // for SigMod specific
  1220.         this.appRoutes = {
  1221.             badge: isDev
  1222.                 ? `http://localhost:${port}/badge`
  1223.                 : 'https://mod.czrsd.com/badge',
  1224.             signIn: (path) =>
  1225.                 isDev
  1226.                     ? `http://localhost:${port}/${path}`
  1227.                     : `https://mod.czrsd.com/${path}`,
  1228.             auth: isDev
  1229.                 ? `http://localhost:${port}/auth`
  1230.                 : `https://mod.czrsd.com/auth`,
  1231.             users: isDev
  1232.                 ? `http://localhost:${port}/users`
  1233.                 : `https://mod.czrsd.com/users`,
  1234.             search: isDev
  1235.                 ? `http://localhost:${port}/search`
  1236.                 : `https://mod.czrsd.com/search`,
  1237.             request: isDev
  1238.                 ? `http://localhost:${port}/request`
  1239.                 : `https://mod.czrsd.com/request`,
  1240.             friends: isDev
  1241.                 ? `http://localhost:${port}/me/friends`
  1242.                 : `https://mod.czrsd.com/me/friends`,
  1243.             profile: (id) =>
  1244.                 isDev
  1245.                     ? `http://localhost:${port}/profile/${id}`
  1246.                     : `https://mod.czrsd.com/profile/${id}`,
  1247.             myRequests: isDev
  1248.                 ? `http://localhost:${port}/me/requests`
  1249.                 : `https://mod.czrsd.com/me/requests`,
  1250.             handleRequest: isDev
  1251.                 ? `http://localhost:${port}/me/handle`
  1252.                 : `https://mod.czrsd.com/me/handle`,
  1253.             logout: isDev
  1254.                 ? `http://localhost:${port}/logout`
  1255.                 : `https://mod.czrsd.com/logout`,
  1256.             imgUpload: isDev
  1257.                 ? `http://localhost:${port}/me/upload`
  1258.                 : `https://mod.czrsd.com/me/upload`,
  1259.             removeAvatar: isDev
  1260.                 ? `http://localhost:${port}/me/handle`
  1261.                 : `https://mod.czrsd.com/me/handle`,
  1262.             editProfile: isDev
  1263.                 ? `http://localhost:${port}/me/edit`
  1264.                 : `https://mod.czrsd.com/me/edit`,
  1265.             delProfile: isDev
  1266.                 ? `http://localhost:${port}/me/remove`
  1267.                 : `https://mod.czrsd.com/me/remove`,
  1268.             updateSettings: isDev
  1269.                 ? `http://localhost:${port}/me/update-settings`
  1270.                 : `https://mod.czrsd.com/me/update-settings`,
  1271.             chatHistory: (id) =>
  1272.                 isDev
  1273.                     ? `http://localhost:${port}/me/chat/${id}`
  1274.                     : `https://mod.czrsd.com/me/chat/${id}`,
  1275.             onlineUsers: isDev
  1276.                 ? `http://localhost:${port}/onlineUsers`
  1277.                 : `https://mod.czrsd.com/onlineUsers`,
  1278.             announcements: isDev
  1279.                 ? `http://localhost:${port}/announcements`
  1280.                 : `https://mod.czrsd.com/announcements`,
  1281.             announcement: (id) =>
  1282.                 isDev
  1283.                     ? `http://localhost:${port}/announcement/${id}`
  1284.                     : `https://mod.czrsd.com/announcement/${id}`,
  1285.             fonts: isDev
  1286.                 ? `http://localhost:${port}/fonts`
  1287.                 : 'https://mod.czrsd.com/fonts',
  1288.             blockedChatData: 'https://mod.czrsd.com/spam.json',
  1289.         };
  1290.  
  1291.         this.init();
  1292.     }
  1293.  
  1294.     Mod.prototype = {
  1295.         get style() {
  1296.             return `
  1297.         @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap');
  1298.  
  1299.         .mod_menu {
  1300.             position: absolute;
  1301.             top: 0;
  1302.             left: 0;
  1303.             width: 100%;
  1304.             height: 100vh;
  1305.             background: rgba(0, 0, 0, .6);
  1306.             z-index: 999999;
  1307.             display: flex;
  1308.             justify-content: center;
  1309.             align-items: center;
  1310.             color: #fff;
  1311.             transition: all .3s ease;
  1312.         }
  1313.  
  1314.         .mod_menu * {
  1315.             margin: 0;
  1316.             padding: 0;
  1317.             font-family: 'Ubuntu';
  1318.             box-sizing: border-box;
  1319.         }
  1320.  
  1321.         .mod_menu_wrapper {
  1322.             position: relative;
  1323.             display: flex;
  1324.             flex-direction: column;
  1325.             width: 700px;
  1326.             height: 500px;
  1327.             background: #111;
  1328.             border-radius: 12px;
  1329.             overflow: hidden;
  1330.             box-shadow: 0 5px 10px #000;
  1331.         }
  1332.  
  1333.         .mod_menu_header {
  1334.             display: flex;
  1335.             width: 100%;
  1336.             position: relative;
  1337.             height: 60px;
  1338.         }
  1339.  
  1340.         .mod_menu_header .header_img {
  1341.             width: 100%;
  1342.             height: 60px;
  1343.             object-fit: cover;
  1344.             object-position: center;
  1345.             position: absolute;
  1346.         }
  1347.  
  1348.         .mod_menu_header button {
  1349.             display: flex;
  1350.             justify-content: center;
  1351.             align-items: center;
  1352.             position: absolute;
  1353.             right: 10px;
  1354.             top: 30px;
  1355.             background: rgba(11, 11, 11, .7);
  1356.             width: 42px;
  1357.             height: 42px;
  1358.             font-size: 16px;
  1359.             transform: translateY(-50%);
  1360.         }
  1361.  
  1362.         .mod_menu_header button:hover {
  1363.             background: rgba(11, 11, 11, .5);
  1364.         }
  1365.  
  1366.         .mod_menu_inner {
  1367.             display: flex;
  1368.         }
  1369.  
  1370.         .mod_menu_navbar {
  1371.             display: flex;
  1372.             flex-direction: column;
  1373.             gap: 10px;
  1374.             min-width: 132px;
  1375.             padding: 10px;
  1376.             background: #181818;
  1377.             height: 440px;
  1378.         }
  1379.  
  1380.         .mod_nav_btn, .modButton-black {
  1381.             display: flex;
  1382.             justify-content: space-evenly;
  1383.             align-items: center;
  1384.             padding: 5px;
  1385.             background: #050505;
  1386.             border-radius: 8px;
  1387.             font-size: 16px;
  1388.             border: 1px solid transparent;
  1389.             outline: none;
  1390.             width: 100%;
  1391.             transition: all .3s ease;
  1392.         }
  1393.         label.modButton-black {
  1394.             font-weight: 400;
  1395.             cursor: pointer;
  1396.         }
  1397.  
  1398.         .modButton-black[disabled] {
  1399.             background: #333;
  1400.             cursor: default;
  1401.         }
  1402.  
  1403.         .mod_selected {
  1404.             border: 1px solid rgba(89, 89, 89, .9);
  1405.         }
  1406.  
  1407.         .mod_nav_btn img {
  1408.             width: 22px;
  1409.         }
  1410.  
  1411.         .mod_menu_content {
  1412.             width: 100%;
  1413.             padding: 10px;
  1414.             position: relative;
  1415. 			max-width: 568px;
  1416.         }
  1417.  
  1418.         .mod_tab {
  1419.             width: 100%;
  1420. 			height: 100%;
  1421.             display: flex;
  1422.             flex-direction: column;
  1423.             gap: 5px;
  1424.             overflow-y: auto;
  1425.             overflow-x: hidden;
  1426.             max-height: 420px;
  1427.             opacity: 1;
  1428.             transition: all .2s ease;
  1429.         }
  1430.         .modColItems {
  1431.             display: flex;
  1432.             flex-direction: column;
  1433.             align-items: center;
  1434.             gap: 15px;
  1435.             width: 100%;
  1436.         }
  1437.  
  1438.         .modColItems_2 {
  1439.             display: flex;
  1440.             flex-direction: column;
  1441.             align-items: start;
  1442.             justify-content: start;
  1443.             background: #050505;
  1444.             gap: 8px;
  1445.             border-radius: 0.5rem;
  1446.             padding: 10px;
  1447.             width: 100%;
  1448.         }
  1449.  
  1450.         .modRowItems {
  1451.             display: flex;
  1452.             justify-content: center;
  1453.             align-items: center;
  1454.             background: #050505;
  1455.             gap: 58px;
  1456.             border-radius: 0.5rem;
  1457.             padding: 10px;
  1458.             width: 100%;
  1459.         }
  1460.  
  1461.         .form-control {
  1462.             border-width: 1px;
  1463.         }
  1464.         .form-control.error-border {
  1465.             border-color: #AC3D3D;
  1466.         }
  1467.  
  1468. 		.modSlider {
  1469. 		  --thumb-color: #d9d9d9;
  1470. 		  -webkit-appearance: none;
  1471. 		  appearance: none;
  1472. 		  width: 100%;
  1473. 		  height: 8px;
  1474. 		  background: #333;
  1475. 		  border-radius: 5px;
  1476. 		  outline: none;
  1477. 		  transition: all 0.3s ease;
  1478. 		}
  1479.  
  1480. 		.modSlider::-webkit-slider-thumb {
  1481. 		  -webkit-appearance: none;
  1482. 		  appearance: none;
  1483. 		  width: 20px;
  1484. 		  height: 20px;
  1485. 		  border-radius: 50%;
  1486. 		  background: var(--thumb-color);
  1487. 		}
  1488.  
  1489. 		.modSlider::-moz-range-thumb {
  1490. 		  width: 20px;
  1491. 		  height: 20px;
  1492. 		  border-radius: 50%;
  1493. 		  background: var(--thumb-color);
  1494. 		}
  1495.  
  1496. 		.modSlider::-ms-thumb {
  1497. 		  width: 20px;
  1498. 		  height: 20px;
  1499. 		  border-radius: 50%;
  1500. 		  background: var(--thumb-color);
  1501. 		}
  1502.  
  1503.         input:focus, select:focus, button:focus{
  1504.              outline: none;
  1505.         }
  1506.         .macros_wrapper {
  1507.             display: flex;
  1508.             width: 100%;
  1509.             justify-content: center;
  1510.             flex-direction: column;
  1511.             gap: 10px;
  1512.             background: #050505;
  1513.             padding: 10px;
  1514.             border-radius: 0.75rem;
  1515.         }
  1516.         .macrosContainer {
  1517.             display: flex;
  1518.             width: 100%;
  1519.             justify-content: center;
  1520.             align-items: center;
  1521.             gap: 20px;
  1522.         }
  1523.         .macroRow {
  1524.             background: #121212;
  1525.             border-radius: 5px;
  1526.             padding: 7px;
  1527.             display: flex;
  1528.             justify-content: space-between;
  1529.             align-items: center;
  1530.             gap: 10px;
  1531.         }
  1532.         .keybinding {
  1533.             border-radius: 5px;
  1534.             background: #242424;
  1535.             border: none;
  1536.             color: #fff;
  1537.             padding: 2px 5px;
  1538.             max-width: 50px;
  1539.             font-weight: 500;
  1540.             text-align: center;
  1541.         }
  1542.         .closeBtn{
  1543.              width: 46px;
  1544.              background-color: transparent;
  1545. 			 display: flex;
  1546. 			 justify-content: center;
  1547. 			 align-items: center;
  1548.         }
  1549.         .select-btn {
  1550.             padding: 15px 20px;
  1551.             background: #222;
  1552.             border-radius: 2px;
  1553.             position: relative;
  1554.         }
  1555.  
  1556.         .select-btn:active {
  1557.             scale: 0.95
  1558.         }
  1559.  
  1560.         .select-btn::before {
  1561.             content: "...";
  1562.             font-size: 20px;
  1563.             color: #fff;
  1564.             position: absolute;
  1565.             top: 50%;
  1566.             left: 50%;
  1567.             transform: translate(-50%, -50%);
  1568.         }
  1569.          .text {
  1570.              user-select: none;
  1571.              font-weight: 500;
  1572.              text-align: left;
  1573.         }
  1574.          .modButton {
  1575.              background-color: #252525;
  1576.              border-radius: 4px;
  1577.              color: #fff;
  1578.              transition: all .3s;
  1579.              outline: none;
  1580.              padding: 7px;
  1581.              font-size: 13px;
  1582.              border: none;
  1583.         }
  1584.          .modButton:hover {
  1585.              background-color: #222
  1586.         }
  1587.          .modInput {
  1588.              background-color: #111;
  1589.              border: none;
  1590.              border-radius: 5px;
  1591.              position: relative;
  1592.              border-top-right-radius: 4px;
  1593.              border-top-left-radius: 4px;
  1594.              font-weight: 500;
  1595.              padding: 5px;
  1596.              color: #fff;
  1597.         }
  1598. 		.modNumberInput:disabled {
  1599. 			color: #777;
  1600. 		}
  1601.  
  1602.         .modCheckbox input[type="checkbox"] {
  1603.              display: none;
  1604.              visibility: hidden;
  1605.         }
  1606.         .modCheckbox label {
  1607.           display: inline-block;
  1608.         }
  1609.  
  1610.         .modCheckbox .cbx {
  1611.           position: relative;
  1612.           top: 1px;
  1613.           width: 17px;
  1614.           height: 17px;
  1615.           margin: 2px;
  1616.           border: 1px solid #c8ccd4;
  1617.           border-radius: 3px;
  1618.           vertical-align: middle;
  1619.           transition: background 0.1s ease;
  1620.           cursor: pointer;
  1621.         }
  1622.  
  1623.         .modCheckbox .cbx:after {
  1624.           content: '';
  1625.           position: absolute;
  1626.           top: 1px;
  1627.           left: 5px;
  1628.           width: 5px;
  1629.           height: 11px;
  1630.           opacity: 0;
  1631.           transform: rotate(45deg) scale(0);
  1632.           border-right: 2px solid #fff;
  1633.           border-bottom: 2px solid #fff;
  1634.           transition: all 0.3s ease;
  1635.           transition-delay: 0.15s;
  1636.         }
  1637.  
  1638.         .modCheckbox input[type="checkbox"]:checked ~ .cbx {
  1639.           border-color: transparent;
  1640.           background: #6871f1;
  1641.           box-shadow: 0 0 10px #2E2D80;
  1642.         }
  1643.  
  1644.         .modCheckbox input[type="checkbox"]:checked ~ .cbx:after {
  1645.           opacity: 1;
  1646.           transform: rotate(45deg) scale(1);
  1647.         }
  1648.  
  1649.          .SettingsButton{
  1650.              border: none;
  1651.              outline: none;
  1652.              margin-right: 10px;
  1653.              transition: all .3s ease;
  1654.         }
  1655.          .SettingsButton:hover {
  1656.              scale: 1.1;
  1657.         }
  1658.          .colorInput{
  1659.              background-color: transparent;
  1660.              width: 31px;
  1661.              height: 35px;
  1662.              border-radius: 50%;
  1663.              border: none;
  1664.         }
  1665.          .colorInput::-webkit-color-swatch {
  1666.              border-radius: 50%;
  1667.              border: 2px solid #fff;
  1668.         }
  1669.         .whiteBorder_colorInput::-webkit-color-swatch {
  1670.             border-color: #fff;
  1671.         }
  1672. 		.menu-center>div>.menu-center-content>div>div>.menu__form-group {
  1673. 			margin-bottom: 14px !important;
  1674. 		}
  1675.          #dclinkdiv {
  1676.              display: flex;
  1677.              flex-direction: row;
  1678.              margin-top: 10px;
  1679.         }
  1680.          .dclinks {
  1681.              width: calc(50% - 5px);
  1682.              height: 36px;
  1683.              display: flex;
  1684.              justify-content: center;
  1685.              align-items: center;
  1686.              background-color: rgba(88, 101, 242, 1);
  1687.              border-radius: 6px;
  1688.              margin: 0 auto;
  1689.              color: #fff;
  1690.         }
  1691.          #cm_close__settings {
  1692.              width: 50px;
  1693.              transition: all .3s ease;
  1694.         }
  1695.          #cm_close__settings svg:hover {
  1696.              scale: 1.1;
  1697.         }
  1698.          #cm_close__settings svg {
  1699.              transition: all .3s ease;
  1700.         }
  1701.          .modTitleText {
  1702.              text-align: center;
  1703.              font-size: 16px;
  1704.         }
  1705.         .modItem {
  1706.              display: flex;
  1707.              justify-content: center;
  1708.              align-items: center;
  1709.              flex-direction: column;
  1710.         }
  1711.         .accent_row {
  1712.             background: #111111;
  1713.         }
  1714.          .mod_tab-content {
  1715.              width: 100%;
  1716.              margin: 10px;
  1717.              overflow: auto;
  1718.              display: flex;
  1719.              flex-direction: column;
  1720.         }
  1721.  
  1722.         #Tab6 .mod_tab-content {
  1723.              overflow-y: auto;
  1724.              max-height: 230px;
  1725.              display: flex;
  1726.              flex-wrap: nowrap;
  1727.              flex-direction: column;
  1728.              gap: 10px;
  1729.         }
  1730.  
  1731.         .tab-content, #coins-tab, #chests-tab {
  1732.             overflow-x: hidden;
  1733.             justify-content: center;
  1734.         }
  1735.  
  1736.         #shop-skins-buttons::after {
  1737.             background: #050505;
  1738.         }
  1739.  
  1740. 		#sigma-status {
  1741. 			background: rgba(0, 0, 0, .6) !important;
  1742. 		}
  1743.  
  1744.          .w-100 {
  1745.              width: 100%
  1746.         }
  1747.          .btn:hover {
  1748.              color: unset;
  1749.         }
  1750.  
  1751.         #savedNames {
  1752.             background-color: #000;
  1753.             padding: 5px;
  1754.             border-radius: 5px;
  1755.             overflow-y: auto;
  1756.             height: 155px;
  1757.             background-image: url("https://raw.githubusercontent.com/Sigmally/SigMod/main/images/purple_gradient.png");
  1758.             background-size: cover;
  1759.             background-position: center;
  1760.             background-repeat: no-repeat;
  1761.             box-shadow: 0 0 10px #000;
  1762.         }
  1763.  
  1764.         .scroll {
  1765.             scroll-behavior: smooth;
  1766.         }
  1767.  
  1768.         /* Chrome, Safari */
  1769.         .scroll::-webkit-scrollbar {
  1770.             width: 7px;
  1771.         }
  1772.  
  1773.         .scroll::-webkit-scrollbar-track {
  1774.             background: #222;
  1775.             border-radius: 5px;
  1776.         }
  1777.  
  1778.         .scroll::-webkit-scrollbar-thumb {
  1779.             background-color: #333;
  1780.             border-radius: 5px;
  1781.         }
  1782.  
  1783.         .scroll::-webkit-scrollbar-thumb:hover {
  1784.             background: #353535;
  1785.         }
  1786.  
  1787.         /* Firefox */
  1788.         .scroll {
  1789.             scrollbar-width: thin;
  1790.             scrollbar-color: #333 #222;
  1791.         }
  1792.  
  1793.         .scroll:hover {
  1794.             scrollbar-color: #353535 #222;
  1795.         }
  1796.  
  1797.         .themes {
  1798.             display: flex;
  1799.             flex-direction: row;
  1800. 			flex: 1;
  1801.             flex-wrap: wrap;
  1802.             justify-content: center;
  1803.             width: 100%;
  1804. 			min-height: 254px;
  1805.             max-height: 420px;
  1806.             background: #000;
  1807.             border-radius: 5px;
  1808.             overflow-y: scroll;
  1809.             gap: 10px;
  1810.             padding: 5px;
  1811.         }
  1812.  
  1813.         .themeContent {
  1814.           width: 50px;
  1815.           height: 50px;
  1816.           border: 2px solid #222;
  1817.           border-radius: 50%;
  1818.           background-position: center;
  1819.         }
  1820.  
  1821.         .theme {
  1822.             height: 75px;
  1823.             display: flex;
  1824.             align-items: center;
  1825.             justify-content: center;
  1826.             flex-direction: column;
  1827.             cursor: pointer;
  1828.         }
  1829.          .delName {
  1830.              font-weight: 500;
  1831.              background: #e17e7e;
  1832.              height: 20px;
  1833.              border: none;
  1834.              border-radius: 5px;
  1835.              font-size: 10px;
  1836.              margin-left: 5px;
  1837.              color: #fff;
  1838.              display: flex;
  1839.              justify-content: center;
  1840.              align-items: center;
  1841.              width: 20px;
  1842.         }
  1843.          .NameDiv {
  1844.              display: flex;
  1845.              background: #111;
  1846.              border-radius: 5px;
  1847.              margin: 5px;
  1848.              padding: 3px 8px;
  1849.              height: 34px;
  1850.              align-items: center;
  1851.              justify-content: space-between;
  1852.              cursor: pointer;
  1853.              box-shadow: 0 5px 10px -2px #000;
  1854.         }
  1855.         .NameLabel {
  1856.             cursor: pointer;
  1857.             font-weight: 500;
  1858.             text-align: center;
  1859.             color: #fff;
  1860.         }
  1861.         .alwan {
  1862.             border-radius: 8px;
  1863.         }
  1864.         .colorpicker-additional {
  1865.             display: flex;
  1866.             justify-content: space-between;
  1867.             width: 100%;
  1868.             color: #fafafa;
  1869.             padding: 10px;
  1870.         }
  1871.         .resetButton {
  1872.             width: 25px;
  1873.             height: 25px;
  1874.             background-image: url("https://raw.githubusercontent.com/Sigmally/SigMod/main/images/reset.svg");
  1875.             background-color: transparent;
  1876. 			background-repeat: no-repeat;
  1877.             border: none;
  1878.         }
  1879.  
  1880.         .modAlert {
  1881.             position: fixed;
  1882.             top: 8%;
  1883.             left: 50%;
  1884.             transform: translate(-50%, -50%);
  1885.             z-index: 99995;
  1886.             background: #3F3F3F;
  1887.             border-radius: 10px;
  1888.             display: flex;
  1889.             flex-direction: column;
  1890.             gap: 5px;
  1891.             padding: 10px;
  1892.             color: #fff;
  1893.             max-width: 320px;
  1894.         }
  1895.  
  1896.         .alert_overlay {
  1897.             position: absolute;
  1898.             top: 0;
  1899.             left: 0;
  1900.             z-index: 999999999;
  1901.             pointer-events: none;
  1902.             width: 100%;
  1903.             height: 100vh;
  1904.             display: flex;
  1905.             flex-direction: column;
  1906.             justify-content: start;
  1907.             align-items: center;
  1908.         }
  1909.  
  1910.         .infoAlert {
  1911.             padding: 5px;
  1912.             border-radius: 5px;
  1913.             margin-top: 5px;
  1914.             color: #fff;
  1915.         }
  1916.  
  1917.         .modAlert-success {
  1918.             background: #5BA55C;
  1919.         }
  1920.         .modAlert-success .modAlert-loader {
  1921.             background: #6BD56D;
  1922.         }
  1923.         .modAlert-default {
  1924.             background: #151515;
  1925.         }
  1926.         .modAlert-default .modAlert-loader {
  1927.             background: #222;
  1928.         }
  1929.         .modAlert-danger {
  1930.             background: #D44121;
  1931.         }
  1932.         .modAlert-danger .modAlert-loader {
  1933.             background: #A5361E;
  1934.         }
  1935.         #free-coins .modAlert-danger {
  1936.             background: #fff !important;
  1937.         }
  1938.  
  1939.         .modAlert-loader {
  1940.             width: 100%;
  1941.             height: 2px;
  1942.             margin-top: 5px;
  1943.             transition: all .3s ease-in-out;
  1944.             animation: loadAlert 2s forwards;
  1945.         }
  1946.  
  1947.         @keyframes loadAlert {
  1948.             0% {
  1949.                 width: 100%;
  1950.             }
  1951.             100% {
  1952.                 width: 0%;
  1953.             }
  1954.         }
  1955.  
  1956.         .themeEditor {
  1957.             z-index: 999999999999;
  1958.             position: absolute;
  1959.             top: 50%;
  1960.             left: 50%;
  1961.             transform: translate(-50%, -50%);
  1962.             background: rgba(0, 0, 0, .85);
  1963.             color: #fff;
  1964.             padding: 10px;
  1965.             border-radius: 10px;
  1966.             box-shadow: 0 0 10px #000;
  1967.             width: 400px;
  1968.         }
  1969.  
  1970.         .theme_editor_header {
  1971.             display: flex;
  1972.             justify-content: space-between;
  1973.             align-items: center;
  1974.             gap: 10px;
  1975.         }
  1976.  
  1977.         .theme-editor-tab {
  1978.             display: flex;
  1979.             justify-content: center;
  1980.             align-items: start;
  1981.             flex-direction: column;
  1982.             margin-top: 10px
  1983.         }
  1984.  
  1985.         .themes_preview {
  1986.             width: 50px;
  1987.             height: 50px;
  1988.             border: 2px solid #fff;
  1989.             border-radius: 2px;
  1990.             display: flex;
  1991.             justify-content: center;
  1992.             align-items: center;
  1993.         }
  1994.  
  1995.         .sigmod-title {
  1996.             display: flex;
  1997.             flex-direction: column;
  1998.             align-items: center;
  1999.             gap: 2px;
  2000.         }
  2001.         .sigmod-title #title {
  2002.             width: fit-content;
  2003.         }
  2004.         #bycursed {
  2005.             font-family: "Titillium Web", sans-serif;
  2006. 			font-weight: 400;
  2007.             font-size: 16px;
  2008.         }
  2009.         #bycursed a {
  2010.             color: #71aee3;
  2011.         }
  2012.         .stats__item>span, #title, .stats-btn__text {
  2013.            color: #fff;
  2014.         }
  2015.  
  2016.         .top-users__inner::-webkit-scrollbar-thumb {
  2017.             border: none;
  2018.         }
  2019.         #signInBtn, #nick, #gamemode, .form-control, .profile-header, .coins-num, #clan-members, .member-index, .member-level, #clan-requests {
  2020.             background: rgba(0, 0, 0, 0.4) !important;
  2021.             color: #fff !important;
  2022.         }
  2023.         .profile-name, #progress-next, .member-desc > p:first-child, #clan-leave > div, .clans-item > div > b, #clans-input input, #shop-nav button {
  2024.             color: #fff !important;
  2025.         }
  2026.         .head-desc, #shop-nav button {
  2027.             border: 1px solid #000;
  2028.         }
  2029.         #shop-nav button {
  2030.            transition: background .1s ease;
  2031.         }
  2032.         #shop-nav button:hover {
  2033.            background: #121212 !important;
  2034.         }
  2035.         #clan-handler, #request-handler, #clans-list, #clans-input, .clans-item button, #shop-content, .card-particles-bar-bg {
  2036.             background: #111 !important;
  2037.             color: #fff !important;
  2038.         }
  2039.         #clans_and_settings {
  2040.             height: auto !important;
  2041.         }
  2042.         .card-body {
  2043.             background: linear-gradient(180deg, #000 0%, #1b354c 100%);
  2044.         }
  2045.         .free-card:hover .card-body {
  2046.             background: linear-gradient(180deg, #111 0%, #1b354c 100%);
  2047.         }
  2048.         #shop-tab-body, #shop-nav, #shop-skins-buttons {
  2049.             background: #050505 !important;
  2050.         }
  2051.         #clan-leave {
  2052.             background: #111;
  2053.             bottom: -1px;
  2054.         }
  2055.         .sent {
  2056.             position: relative;
  2057.             width: 100px;
  2058.         }
  2059.  
  2060.         .sent::before {
  2061.             content: "Sent request";
  2062.             width: 100%;
  2063.             height: 10px;
  2064.             word-spacing: normal;
  2065.             white-space: nowrap;
  2066.             position: absolute;
  2067.             background: #4f79f9;
  2068.             display: flex;
  2069.             justify-content: center;
  2070.             align-items: center;
  2071.         }
  2072.  
  2073.         .btn, .sign-in-out-btn {
  2074.             transition: all .2s ease;
  2075.         }
  2076. 		.free-coins-body > div, .goldmodal-contain {
  2077. 			background: rgba(0, 0, 0, .5);
  2078. 		}
  2079.         #clan .connecting__content, #clans .connecting__content {
  2080.             background: #151515;
  2081.             color: #fff;
  2082.             box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  2083.         }
  2084.  
  2085.         .skin-select__icon-text {
  2086.             color: #fff;
  2087.         }
  2088.  
  2089.         .justify-sb {
  2090.             display: flex;
  2091.             align-items: center;
  2092.             justify-content: space-between;
  2093.         }
  2094.  
  2095.         .macro-extanded_input {
  2096.             width: 75px;
  2097.             text-align: center;
  2098.         }
  2099.         .form-control option {
  2100.             background: #111;
  2101.         }
  2102.  
  2103.         .stats-line {
  2104.             width: 100%;
  2105.             user-select: none;
  2106.             margin-bottom: 5px;
  2107.             padding: 5px;
  2108.             background: #050505;
  2109.             border: 1px solid var(--default-mod);
  2110.             border-radius: 5px;
  2111.         }
  2112.  
  2113.         .stats-info-text {
  2114.             color: #7d7d7d;
  2115.         }
  2116.  
  2117.         .setting-card-wrapper {
  2118.             margin-right: 10px;
  2119.             padding: 10px;
  2120.             background: #161616;
  2121.             border-radius: 5px;
  2122.             display: flex;
  2123.             flex-direction: column;
  2124. 			width: 100%;
  2125.         }
  2126.  
  2127.         .setting-card {
  2128.             display: flex;
  2129.             align-items: center;
  2130.             justify-content: space-between;
  2131.         }
  2132.  
  2133.         .setting-card-action {
  2134.             display: flex;
  2135.             align-items: center;
  2136.             gap: 5px;
  2137.             cursor: pointer;
  2138.         }
  2139.  
  2140.         .setting-card-action {
  2141.             width: 100%;
  2142.         }
  2143.  
  2144.         .setting-card-name {
  2145.             font-size: 16px;
  2146.             user-select: none;
  2147.             width: 100%;
  2148.         }
  2149.  
  2150.         .mod-small-modal {
  2151.             display: flex;
  2152.             flex-direction: column;
  2153.             gap: 10px;
  2154.             position: absolute;
  2155.             z-index: 99999;
  2156.             top: 50%;
  2157.             left: 50%;
  2158.             transform: translate(-50%, -50%);
  2159.             background: #191919;
  2160.             box-shadow: 0 5px 15px -2px #000;
  2161.             padding: 10px;
  2162.             border-radius: 5px;
  2163.         }
  2164.  
  2165.         .mod-small-modal-header {
  2166.             display: flex;
  2167.             justify-content: space-between;
  2168.             align-items: center;
  2169.         }
  2170.  
  2171.         .mod-small-modal-header h1 {
  2172.             font-size: 20px;
  2173.             font-weight: 500;
  2174.             margin: 0;
  2175.         }
  2176.  
  2177.         .mod-small-modal-content {
  2178.             display: flex;
  2179.             flex-direction: column;
  2180.             width: 100%;
  2181.             align-items: center;
  2182.         }
  2183.  
  2184.         .mod-small-modal-content_selectImage {
  2185.             display: flex;
  2186.             flex-direction: column;
  2187.             gap: 10px;
  2188.         }
  2189.  
  2190.         .imagePreview {
  2191.             min-width: 34px;
  2192.             width: 34px;
  2193.             height: 34px;
  2194.             border: 2px solid #353535;
  2195. 			border-radius: 5px;
  2196. 			background-size: contain;
  2197. 			background-repeat: no-repeat;
  2198. 			background-position: center;
  2199.  
  2200. 			/* for preview text */
  2201. 			display: flex;
  2202. 			justify-content: center;
  2203. 			align-items: center;
  2204. 			font-size: 7px;
  2205. 			overflow: hidden;
  2206. 			text-align: center;
  2207.         }
  2208.  
  2209.         .modChat {
  2210.             min-width: 450px;
  2211.             max-width: 450px;
  2212.             min-height: 285px;
  2213.             max-height: 285px;
  2214.             color: #fafafa;
  2215.             padding: 10px;
  2216.             position: absolute;
  2217.             bottom: 10px;
  2218.             left: 10px;
  2219.             z-index: 999;
  2220.             border-radius: .5rem;
  2221.             overflow: hidden;
  2222.             opacity: 1;
  2223.             transition: all .3s ease;
  2224.         }
  2225.  
  2226.         .modChat__inner {
  2227.             min-width: 430px;
  2228.             max-width: 430px;
  2229.             min-height: 265px;
  2230.             max-height: 265px;
  2231.             height: 100%;
  2232.             display: flex;
  2233.             flex-direction: column;
  2234.             gap: 5px;
  2235.             justify-content: flex-end;
  2236.             opacity: 1;
  2237.             transition: all .3s ease;
  2238.         }
  2239.  
  2240.         .mod-compact {
  2241.             transform: scale(0.78);
  2242.         }
  2243.         .mod-compact.modChat {
  2244.             left: -40px;
  2245.             bottom: -20px;
  2246.         }
  2247.         .mod-compact.chatAddedContainer {
  2248.             left: 350px;
  2249.             bottom: -17px;
  2250.         }
  2251.  
  2252.         #scroll-down-btn {
  2253.             position: absolute;
  2254.             bottom: 60px;
  2255.             left: 50%;
  2256.             transform: translateX(-50%);
  2257.             width: 80px;
  2258.             display:none;
  2259.             box-shadow:0 0 5px #000;
  2260.             z-index: 5;
  2261.         }
  2262.  
  2263.         .modchat-chatbuttons {
  2264.             margin-bottom: auto;
  2265.             display: flex;
  2266.             gap: 5px;
  2267.         }
  2268.  
  2269.         .chat-context {
  2270.             position: absolute;
  2271.             z-index: 999999;
  2272.             width: 100px;
  2273.             display: flex;
  2274.             flex-direction: column;
  2275.             justify-content: center;
  2276.             align-items: center;
  2277.             gap: 5px;
  2278.             background: #181818;
  2279.             border-radius: 5px;
  2280.         }
  2281.  
  2282.         .chat-context span {
  2283.             color: #fff;
  2284.             user-select: none;
  2285.             padding: 5px;
  2286.             white-space: nowrap;
  2287.         }
  2288.  
  2289.         .chat-context button {
  2290.             width: 100%;
  2291.             background-color: transparent;
  2292.             border: none;
  2293.             border-top: 2px solid #747474;
  2294.             outline: none;
  2295.             color: #fff;
  2296.             transition: all .3s ease;
  2297.         }
  2298.  
  2299.         .chat-context button:hover {
  2300.             backgrokund-color: #222;
  2301.         }
  2302.  
  2303.         .tagText {
  2304.             margin-left: auto;
  2305.             font-size: 14px;
  2306.         }
  2307.  
  2308.         #mod-messages {
  2309.             position: relative;
  2310.             display: flex;
  2311.             flex-direction: column;
  2312.             max-height: 185px;
  2313.             overflow-y: auto;
  2314.             direction: rtl;
  2315.             scroll-behavior: smooth;
  2316.         }
  2317.         .message {
  2318.             direction: ltr;
  2319.             margin: 2px 0 0 5px;
  2320.             text-overflow: ellipsis;
  2321.             white-space: nowrap;
  2322.             max-width: 100%;
  2323.             display: flex;
  2324.             justify-content: space-between;
  2325.             align-items: center;
  2326.         }
  2327.  
  2328.         .message_name {
  2329.             user-select: none;
  2330.         }
  2331.  
  2332.         .message .time {
  2333.             color: rgba(255, 255, 255, 0.7);
  2334.             font-size: 12px;
  2335.         }
  2336.  
  2337.         #chatInputContainer {
  2338.             display: flex;
  2339.             gap: 5px;
  2340.             align-items: center;
  2341.             padding: 5px;
  2342.             background: rgba(25,25,25, .6);
  2343.             border-radius: .5rem;
  2344.             overflow: hidden;
  2345.         }
  2346.  
  2347.         .chatInput {
  2348.             flex-grow: 1;
  2349.             border: none;
  2350.             background: transparent;
  2351.             color: #fff;
  2352.             padding: 5px;
  2353.             outline: none;
  2354.             max-width: 100%;
  2355.         }
  2356.  
  2357.         .chatButton {
  2358.             background: #8a25e5;
  2359.             border: none;
  2360.             border-radius: 5px;
  2361.             padding: 5px 10px;
  2362.             height: 100%;
  2363.             color: #fff;
  2364.             transition: all 0.3s;
  2365.             cursor: pointer;
  2366.             display: flex;
  2367.             align-items: center;
  2368.             height: 28px;
  2369.             justify-content: center;
  2370.             gap: 5px;
  2371.         }
  2372.         .chatButton:hover {
  2373.             background: #7a25e5;
  2374.         }
  2375.         .chatCloseBtn {
  2376.             position: absolute;
  2377.             top: 50%;
  2378.             left: 50%;
  2379.             transform: translate(-50%, -50%);
  2380.         }
  2381.  
  2382.         .emojisContainer {
  2383.             display: flex;
  2384.             flex-direction: column;
  2385.             gap: 5px;
  2386.         }
  2387.         .chatAddedContainer {
  2388.             position: absolute;
  2389.             bottom: 10px;
  2390.             left: 465px;
  2391.             z-index: 9999;
  2392.             padding: 10px;
  2393.             background: #151515;
  2394.             border-radius: .5rem;
  2395.             min-width: 172px;
  2396.             max-width: 172px;
  2397.             min-height: 250px;
  2398.             max-height: 250px;
  2399.         }
  2400.         #categories {
  2401.             overflow-y: auto;
  2402.             max-height: calc(250px - 50px);
  2403.             gap: 2px;
  2404.         }
  2405.         .category {
  2406.             width: 100%;
  2407.             display: flex;
  2408.             flex-direction: column;
  2409.             gap: 2px;
  2410.         }
  2411.         .category span {
  2412.             color: #fafafa;
  2413.             font-size: 14px;
  2414.             text-align: center;
  2415.         }
  2416.  
  2417.         .emojiContainer {
  2418.             display: flex;
  2419.             flex-wrap: wrap;
  2420.             align-items: center;
  2421.             justify-content: center;
  2422.         }
  2423.  
  2424.         #categories .emoji {
  2425.             padding: 2px;
  2426.             border-radius: 5px;
  2427.             font-size: 16px;
  2428.             user-select: none;
  2429.             cursor: pointer;
  2430.         }
  2431.  
  2432.         .chatSettingsContainer {
  2433.             padding: 10px 3px;
  2434.         }
  2435.         .chatSettingsContainer .scroll {
  2436.             display: flex;
  2437.             flex-direction: column;
  2438.             gap: 10px;
  2439.             max-height: 235px;
  2440.             overflow-y: auto;
  2441.             padding: 0 10px;
  2442.         }
  2443.  
  2444.         .csBlock {
  2445.             border: 2px solid #050505;
  2446.             border-radius: .5rem;
  2447.             color: #fff;
  2448.             display: flex;
  2449.             align-items: center;
  2450.             flex-direction: column;
  2451.             gap: 5px;
  2452.             padding-bottom: 5px;
  2453.         }
  2454.  
  2455.         .csBlock .csBlockTitle {
  2456.             background: #080808;
  2457.             width: 100%;
  2458.             padding: 3px;
  2459.             text-align: center;
  2460.         }
  2461.  
  2462.         .csRow {
  2463.             display: flex;
  2464.             justify-content: space-between;
  2465.             align-items: center;
  2466.             padding: 0 5px;
  2467.             width: 100%;
  2468.         }
  2469.  
  2470.         .csRowName {
  2471.             display: flex;
  2472.             gap: 5px;
  2473.             align-items: start;
  2474.         }
  2475.  
  2476.         .csRowName .infoIcon {
  2477.             width: 14px;
  2478.             cursor: pointer;
  2479.         }
  2480.  
  2481.         .modInfoPopup {
  2482.             position: absolute;
  2483.             top: 2px;
  2484.             left: 58%;
  2485.             text-align: center;
  2486.             background: #151515;
  2487.             border: 1px solid #607bff;
  2488.             border-radius: 10px;
  2489.             transform: translateX(-50%);
  2490.             white-space: nowrap;
  2491.             padding: 5px;
  2492.             z-index: 99999;
  2493.         }
  2494.  
  2495.         .modInfoPopup::after {
  2496.             content: '';
  2497.             display: block;
  2498.             position: absolute;
  2499.             bottom: -7px;
  2500.             background: #151515;
  2501.             right: 50%;
  2502.             transform: translateX(-50%) rotate(-45deg);
  2503.             width: 12px;
  2504.             height: 12px;
  2505.             border-left: 1px solid #607bff;
  2506.             border-bottom: 1px solid #607bff;
  2507.         }
  2508.  
  2509.         .modInfoPopup p {
  2510.             margin: 0;
  2511.             font-size: 12px;
  2512.             color: #fff;
  2513.         }
  2514.  
  2515.         .minimapContainer {
  2516.             display: flex;
  2517.             flex-direction: column;
  2518.             align-items: end;
  2519.             pointer-events: none;
  2520.             position: absolute;
  2521.             bottom: 0;
  2522.             right: 0;
  2523.             z-index: 99999;
  2524.         }
  2525.         .minimap {
  2526.             border-radius: 2px;
  2527.             border-top: 1px solid rgba(255, 255, 255, .5);
  2528.             border-left: 1px solid rgba(255, 255, 255, .5);
  2529.             box-shadow: 0 0 4px rgba(255, 255, 255, .5);
  2530.         }
  2531.  
  2532.         #tag {
  2533.             width: 50px;
  2534.         }
  2535.  
  2536.         .blur {
  2537.             color: transparent!important;
  2538.             text-shadow: 0 0 6px hsl(0deg 0% 90% / 70%);
  2539.             transition: all .2s;
  2540.         }
  2541.  
  2542.         .blur:focus, .blur:hover {
  2543.             color: #fafafa!important;
  2544.             text-shadow: none;
  2545.         }
  2546.         .progress-row button {
  2547.             background: transparent;
  2548.         }
  2549.  
  2550.         #mod_home .justify-sb {
  2551.             z-index: 2;
  2552.         }
  2553.  
  2554.         .modTitleText {
  2555.             font-size: 15px;
  2556.             color: #fafafa;
  2557.             text-align: start;
  2558.         }
  2559.         .modDescText {
  2560.             text-align: start;
  2561.             font-size: 12px;
  2562.             color: #777;
  2563.         }
  2564.         .modButton-secondary {
  2565.             background-color: #171717;
  2566.             color: #fff;
  2567.             border: none;
  2568.             padding: 5px 15px;
  2569.             border-radius: 15px;
  2570.         }
  2571.         .vr {
  2572.             width: 2px;
  2573.             height: 250px;
  2574.             background-color: #fafafa;
  2575.         }
  2576.         .vr2 {
  2577.             width: 1px;
  2578.             height: 26px;
  2579.             background-color: #202020;
  2580.         }
  2581.  
  2582. 		.home-card-row {
  2583. 			display: flex;
  2584. 			flex-wrap: nowrap;
  2585. 			justify-content: space-between;
  2586. 			gap: 18px;
  2587. 		}
  2588.         .home-card-wrapper {
  2589.             display: flex;
  2590. 			flex: 1;
  2591.             flex-direction: column;
  2592.             gap: 5px;
  2593. 			width: 50%;
  2594.         }
  2595.         .home-card {
  2596.             display: flex;
  2597.             flex-direction: column;
  2598. 			justify-content: center;
  2599.             gap: 7px;
  2600.             border-radius: 5px;
  2601.             background: #050505;
  2602.             min-height: 164px;
  2603. 			max-height: 164px;
  2604. 			max-width: 256px;
  2605.             padding: 5px 10px;
  2606.         }
  2607. 		.quickAccess {
  2608. 			gap: 5px;
  2609. 			max-height: 164px;
  2610.             overflow-y: auto;
  2611. 			justify-content: start;
  2612.         }
  2613.  
  2614.         .quickAccess div.modRowItems {
  2615.             padding: 2px!important;
  2616.         }
  2617.  
  2618. 		#my-profile-badges {
  2619. 			display: flex;
  2620. 			flex-wrap: wrap;
  2621. 			gap: 5px;
  2622. 		}
  2623.         #my-profile-bio {
  2624.             overflow-y: scroll;
  2625.             max-height: 75px;
  2626.         }
  2627.  
  2628.         .brand_wrapper {
  2629.             position: relative;
  2630.             height: 72px;
  2631.             width: 100%;
  2632.             display: flex;
  2633.             justify-content: center;
  2634.             align-items: center;
  2635.         }
  2636. 		.brand_wrapper span {
  2637. 			font-size: 24px;
  2638. 			z-index: 2;
  2639. 			font-family: "Titillium Web", sans-serif;
  2640. 			font-weight: 600;
  2641. 			letter-spacing: 3px;
  2642. 		}
  2643.  
  2644.         .brand_img {
  2645.             position: absolute;
  2646.             top: 0;
  2647.             left: 0;
  2648.             width: 100%;
  2649.             height: 72px;
  2650.             border-radius: 10px;
  2651.             object-fit: cover;
  2652.             object-position: center;
  2653.             z-index: 1;
  2654.             box-shadow: 0 0 10px #000;
  2655.         }
  2656. 		.brand_credits {
  2657. 			position: relative;
  2658. 			font-size: 16px;
  2659. 			color: #D3A7FF;
  2660. 			list-style: none;
  2661. 			width: 100%;
  2662. 			display: flex;
  2663. 			justify-content: space-between;
  2664. 			padding: 0 24px;
  2665. 		}
  2666.  
  2667. 		.brand_credits li {
  2668. 			position: relative;
  2669. 			display: inline-block;
  2670. 			text-shadow: 0px 0px 8px #D3A7FF;
  2671. 		}
  2672.  
  2673. 		.brand_credits li:not(:last-child)::after {
  2674. 			content: '•';
  2675. 			position: absolute;
  2676. 			right: -20px;
  2677. 			color: #D3A7FF;
  2678. 		}
  2679.         .brand_yt {
  2680.             display: flex;
  2681.             justify-content: center;
  2682.             align-items: center;
  2683.             gap: 20px;
  2684.         }
  2685.         .yt_wrapper {
  2686.             display: flex;
  2687.             justify-content: center;
  2688.             align-items: center;
  2689.             gap: 10px;
  2690.             width: 122px;
  2691.             padding: 5px;
  2692.             background-color: #B63333;
  2693.             border-radius: 15px;
  2694.             cursor: pointer;
  2695.         }
  2696.         .yt_wrapper span {
  2697.             user-select: none;
  2698.         }
  2699.  
  2700.         .hidden_full {
  2701.             display: none !important;
  2702.             visibility: hidden;
  2703.         }
  2704.  
  2705.         .mod_overlay {
  2706.             position: absolute;
  2707.             top: 0;
  2708.             left: 0;
  2709.             width: 100%;
  2710.             height: 100vh;
  2711.             background: rgba(0, 0, 0, .7);
  2712.             z-index: 9999999;
  2713.             display: flex;
  2714.             justify-content: center;
  2715.             align-items: center;
  2716.             transition: all .3s ease;
  2717.         }
  2718.  
  2719. 		.black_overlay {
  2720. 			background: rgba(0, 0, 0, 0);
  2721. 			z-index: 99999999;
  2722. 			opacity: 1;
  2723. 			animation: 2s ease fadeInBlack forwards;
  2724. 		}
  2725.  
  2726. 		@keyframes fadeInBlack {
  2727. 			0% {
  2728. 				background: rgba(0, 0, 0, 0);
  2729. 			}
  2730. 			100% {
  2731. 				background: rgba(0, 0, 0, 1);
  2732. 			}
  2733. 		}
  2734.  
  2735. 		.default-modal {
  2736.             position: relative;
  2737.             display: flex;
  2738.             flex-direction: column;
  2739. 			min-width: 300px;
  2740.             background: #111;
  2741. 			color: #fafafa;
  2742.             border-radius: 12px;
  2743.             overflow: hidden;
  2744.             box-shadow: 0 5px 10px #000;
  2745. 		}
  2746.  
  2747. 		.default-modal-header {
  2748. 			display: flex;
  2749. 			justify-content: space-between;
  2750. 			align-items: center;
  2751. 			background: #1c1c1c;
  2752. 			padding: 5px 10px;
  2753. 		}
  2754.  
  2755. 		.default-modal-header h2 {
  2756. 			margin: 0;
  2757. 		}
  2758.  
  2759. 		.default-modal-body {
  2760. 			display: flex;
  2761. 			flex-direction: column;
  2762. 			gap: 6px;
  2763. 			padding: 15px;
  2764. 		}
  2765.  
  2766.         .tournament-overlay-info {
  2767.             display: flex;
  2768.             flex-direction: column;
  2769.             align-items: center;
  2770.             color: white;
  2771.             font-size: 28px;
  2772.             line-height: 1.4;
  2773.         }
  2774.  
  2775.         .tournament-overlay-info img {
  2776.             margin-bottom: 26px;
  2777.         }
  2778.  
  2779.         .tournaments-wrapper {
  2780. 		    font-family: 'Titillium Web', sans-serif;
  2781. 			font-weight: 400;
  2782.             position: absolute;
  2783.             top: 60%;
  2784.             left: 50%;
  2785.             transform: translate(-50%, -50%);
  2786.             background: #000;
  2787.             border: 2px solid #222222;
  2788.             border-radius: 1.125rem;
  2789.             padding: 1.5rem;
  2790.             color: #fafafa;
  2791.             display: flex;
  2792.             flex-direction: column;
  2793.             align-items: center;
  2794.             gap: 10px;
  2795.             min-width: 632px;
  2796.             opacity: 0;
  2797.             transition: all .3s ease;
  2798.             animation: 0.5s ease fadeIn forwards;
  2799.         }
  2800.         @keyframes fadeIn {
  2801.             0% {
  2802.                 top: 60%;
  2803.                 opacity: 0;
  2804.             }
  2805.             100% {
  2806.                 top: 50%;
  2807.                 opacity: 1;
  2808.             }
  2809.         }
  2810.         .tournaments h1 {
  2811.             margin: 0;
  2812. 			font-weight: 600;
  2813.         }
  2814.  
  2815. 		.teamCards {
  2816. 			display: flex;
  2817. 			gap: 5px;
  2818. 			position: absolute;
  2819. 			top: 50%;
  2820. 			transform: translate(-50%, -50%);
  2821. 		}
  2822.         .teamCard {
  2823.             display: flex;
  2824.             flex-direction: column;
  2825.             align-items: center;
  2826. 			background: rgba(0, 0, 0, 0.4);
  2827. 			border-radius: 12px;
  2828. 			padding: 6px;
  2829. 			height: fit-content;
  2830.         }
  2831. 		.teamCard.userReady {
  2832. 			border: 2px solid var(--green);
  2833. 		}
  2834.         .teamCard img {
  2835.             border-radius: 50%;
  2836.         }
  2837. 		.teamCard span {
  2838. 			font-size: 12px;
  2839. 		}
  2840.  
  2841. 		.redTeam {
  2842. 			left: 81%;
  2843. 		}
  2844.  
  2845. 		.blueTeam {
  2846. 			left: 24%;
  2847. 		}
  2848.  
  2849. 		.lastOneStanding_list {
  2850. 			display: flex;
  2851. 			flex-wrap: wrap;
  2852. 			gap: 8px;
  2853. 			width: 100%;
  2854. 			height: 240px;
  2855. 			max-height: 240px;
  2856. 			background: #050505;
  2857. 		}
  2858.  
  2859.         .tournament_timer {
  2860. 			position: absolute;
  2861. 			top: 20px;
  2862. 			left: 50%;
  2863. 			transform: translateX(-50%);
  2864.             color: #fff;
  2865.             font-size: 15px;
  2866. 			z-index: 99999;
  2867. 			user-select: none;
  2868. 			pointer-events: none;
  2869.         }
  2870.  
  2871.         details {
  2872.           border: 1px solid #aaa;
  2873.           border-radius: 4px;
  2874.           padding: 0.5em 0.5em 0;
  2875.           user-select: none;
  2876.           text-align: start;
  2877.         }
  2878.  
  2879.         summary {
  2880.           font-weight: bold;
  2881.           margin: -0.5em -0.5em 0;
  2882.           padding: 0.5em;
  2883.         }
  2884.  
  2885.         details[open] {
  2886.           padding: 0.5em;
  2887.         }
  2888.  
  2889.         details[open] summary {
  2890.           border-bottom: 1px solid #aaa;
  2891.           margin-bottom: 0.5em;
  2892.         }
  2893.         button[disabled] {
  2894.             filter: grayscale(1);
  2895.         }
  2896.  
  2897. 		.tournament-text-lost,
  2898. 		.tournament-text-won {
  2899. 			font-size: 6rem;
  2900. 			font-weight: 600;
  2901. 			font-family: 'Titillium Web', sans-serif;
  2902. 		}
  2903.  
  2904. 		.tournament-text-lost {
  2905. 			color: var(--red);
  2906. 		}
  2907. 		.tournament-text-won {
  2908. 			color: var(--green);
  2909. 		}
  2910.  
  2911.         .tournament_alert {
  2912.             position: absolute;
  2913.             top: 20px;
  2914.             left: 50%;
  2915.             transform: translateX(-50%);
  2916.             background: #151515;
  2917.             color: #fff;
  2918.             text-align: center;
  2919.             padding: 20px;
  2920.             z-index: 999999;
  2921.             border-radius: 10px;
  2922.             box-shadow: 0 0 10px #000;
  2923.             display: flex;
  2924.             gap: 10px;
  2925.         }
  2926.         .tournament-profile {
  2927.             width: 50px;
  2928.             height: 50px;
  2929.             border-radius: 50%;
  2930.             box-shadow: 0 0 10px #000;
  2931.         }
  2932.  
  2933.         .tournament-text {
  2934.             color: #fff;
  2935.             font-size: 24px;
  2936.         }
  2937.  
  2938.         .claimedBadgeWrapper {
  2939.             background: linear-gradient(232deg, #020405 1%, #04181E 100%);
  2940.             border-radius: 10px;
  2941.             width: 320px;
  2942.             height: 330px;
  2943.             box-shadow: 0 0 40px -20px #39bdff;
  2944.             display: flex;
  2945.             flex-direction: column;
  2946.             gap: 10px;
  2947.             align-items: center;
  2948.             justify-content: center;
  2949.             color: #fff;
  2950.             padding: 10px;
  2951.         }
  2952.  
  2953.         .btn-cyan {
  2954.             background: #53B6CC;
  2955.             border: none;
  2956.             border-radius: 5px;
  2957.             font-size: 16px;
  2958.             color: #fff;
  2959.             font-weight: 500;
  2960.             width: fit-content;
  2961.             padding: 5px 10px;
  2962.         }
  2963.  
  2964.         .playTimer {
  2965.             z-index: 2;
  2966.             position: absolute;
  2967.             top: 128px;
  2968.             left: 4px;
  2969.             color: #8d8d8d;
  2970.             font-size: 14px;
  2971.             font-weight: 500;
  2972.             user-select: none;
  2973.             pointer-events: none;
  2974.         }
  2975.  
  2976.         .mouseTracker {
  2977.             z-index: 2;
  2978.             position: absolute;
  2979.             top: 144px;
  2980.             left: 4px;
  2981.             color: #8d8d8d;
  2982.             font-size: 14px;
  2983.             font-weight: 500;
  2984.             user-select: none;
  2985.             pointer-events: none;
  2986.         }
  2987.  
  2988.         .modInput-wrapper {
  2989.           position: relative;
  2990.           display: inline-block;
  2991.           width: 100%;
  2992.         }
  2993.  
  2994.         .modInput-secondary {
  2995.           display: inline-block;
  2996.           width: 100%;
  2997.           padding: 10px 0 10px 15px;
  2998.           font-weight: 400;
  2999.           color: #E9E9E9;
  3000.           background: #050505;
  3001.           border: 0;
  3002.           border-radius: 3px;
  3003.           outline: 0;
  3004.           text-indent: 70px;
  3005.           transition: all .3s ease-in-out;
  3006.         }
  3007.         .modInput-secondary.t-indent-120 {
  3008.             text-indent: 120px;
  3009.         }
  3010.         .modInput-secondary::-webkit-input-placeholder {
  3011.           color: #050505;
  3012.           text-indent: 0;
  3013.           font-weight: 300;
  3014.         }
  3015.         .modInput-secondary + label {
  3016.           display: inline-block;
  3017.           position: absolute;
  3018.           top: 8px;
  3019.           left: 0;
  3020.           bottom: 8px;
  3021.           padding: 5px 15px;
  3022.           color: #E9E9E9;
  3023.           font-size: 11px;
  3024.           font-weight: 700;
  3025.           text-transform: uppercase;
  3026.           text-shadow: 0 1px 0 rgba(19, 74, 70, 0);
  3027.           transition: all .3s ease-in-out;
  3028.           border-radius: 3px;
  3029.           background: rgba(122, 134, 184, 0);
  3030.         }
  3031.         .modInput-secondary + label:after {
  3032.           position: absolute;
  3033.           content: "";
  3034.           width: 0;
  3035.           height: 0;
  3036.           top: 100%;
  3037.           left: 50%;
  3038.           margin-left: -3px;
  3039.           border-left: 3px solid transparent;
  3040.           border-right: 3px solid transparent;
  3041.           border-top: 3px solid rgba(122, 134, 184, 0);
  3042.           transition: all .3s ease-in-out;
  3043.         }
  3044.  
  3045.         .modInput-secondary:focus,
  3046.         .modInput-secondary:active {
  3047.           color: #E9E9E9;
  3048.           text-indent: 0;
  3049.           background: #050505;
  3050.         }
  3051.         .modInput-secondary:focus::-webkit-input-placeholder,
  3052.         .modInput-secondary:active::-webkit-input-placeholder {
  3053.           color: #aaa;
  3054.         }
  3055.         .modInput-secondary:focus + label,
  3056.         .modInput-secondary:active + label {
  3057.           color: #fff;
  3058.           text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  3059.           background: #7A86B8;
  3060.           transform: translateY(-40px);
  3061.         }
  3062.         .modInput-secondary:focus + label:after,
  3063.         .modInput-secondary:active + label:after {
  3064.           border-top: 4px solid #7A86B8;
  3065.         }
  3066.  
  3067.         /* Friends & account */
  3068.  
  3069.         .signIn-overlay {
  3070.             position: absolute;
  3071.             top: 0;
  3072.             left: 0;
  3073.             width: 100%;
  3074.             height: 100vh;
  3075.             background: rgba(0, 0, 0, .4);
  3076.             z-index: 999999;
  3077.             display: flex;
  3078.             justify-content: center;
  3079.             align-items: center;
  3080.             color: #E3E3E3;
  3081.             opacity: 0;
  3082.             transition: all .3s ease;
  3083.         }
  3084.  
  3085.         .signIn-wrapper {
  3086.             background: #111111;
  3087.             width: 450px;
  3088.             display: flex;
  3089.             flex-direction: column;
  3090.             align-items: center;
  3091.             border-radius: 10px;
  3092.             color: #fafafa;
  3093.         }
  3094.  
  3095.         .signIn-header {
  3096.             background: #181818;
  3097.             width: 100%;
  3098.             display: flex;
  3099.             justify-content: space-between;
  3100.             align-items: center;
  3101.             padding: 8px;
  3102.             border-radius: 10px 10px 0 0;
  3103.         }
  3104.         .signIn-header span {
  3105.             font-weight: 500;
  3106.             font-size: 20px;
  3107.         }
  3108.  
  3109.         .signIn-body {
  3110.             display: flex;
  3111.             flex-direction: column;
  3112.             gap: 10px;
  3113.             align-items: center;
  3114.             justify-content: start;
  3115.             padding: 40px 40px 5px 40px;
  3116.             width: 100%;
  3117.         }
  3118.  
  3119.         #errMessages {
  3120.             color: #AC3D3D;
  3121.             flex-direction: column;
  3122.             gap: 5px;
  3123.         }
  3124.  
  3125.         .friends_header {
  3126.             display: flex;
  3127.             flex-direction: row;
  3128.             justify-content: space-between;
  3129.             align-items: center;
  3130.             gap: 10px;
  3131.             width: 100%;
  3132.             padding: 10px;
  3133.         }
  3134.  
  3135.         .friends_body {
  3136.             position: relative;
  3137.             display: flex;
  3138.             flex-direction: column;
  3139.             align-items: center;
  3140.             gap: 6px;
  3141.             width: 100%;
  3142.             height: 360px;
  3143.             max-height: 360px;
  3144.             overflow-y: auto;
  3145.             padding-right: 10px;
  3146.         }
  3147.         .allusers {
  3148.             padding: 0;
  3149.         }
  3150.  
  3151.         #users-container {
  3152.             position: relative;
  3153.             display: flex;
  3154.             flex-direction: column;
  3155.             align-items: center;
  3156.             gap: 6px;
  3157.             width: 100%;
  3158.             height: 340px;
  3159.             max-height: 340px;
  3160.             overflow-y: auto;
  3161.             padding-right: 10px;
  3162.         }
  3163.  
  3164.         .profile-img {
  3165.             position: relative;
  3166.             width: 52px;
  3167.             height: 52px;
  3168.             border-radius: 100%;
  3169.             border: 1px solid #C8C9D9;
  3170.         }
  3171.  
  3172.         .profile-img img {
  3173.             width: 100%;
  3174.             height: 100%;
  3175.             border-radius: 100%;
  3176.         }
  3177.  
  3178.         .status_icon {
  3179.             position: absolute;
  3180.             width: 15px;
  3181.             height: 15px;
  3182.             top: 0;
  3183.             left: 0;
  3184.             border-radius: 50%;
  3185.         }
  3186.  
  3187.         .online_icon {
  3188.             background-color: #3DB239;
  3189.         }
  3190.         .offline_icon {
  3191.             background-color: #B23939;
  3192.         }
  3193.         .Owner_role {
  3194.             color: #3979B2;
  3195.         }
  3196.         .Moderator_role {
  3197.             color: #39B298;
  3198.         }
  3199.         .Vip_role {
  3200.             color: #E1A33E;
  3201.         }
  3202.  
  3203.         .friends_row {
  3204.             display: flex;
  3205.             flex-direction: row;
  3206.             width: 100%;
  3207.             justify-content: space-between;
  3208.             align-items: center;
  3209.             background: #090909;
  3210.             border-radius: 8px;
  3211.             padding: 10px;
  3212.         }
  3213.  
  3214.         .friends_row .val {
  3215.             width: fit-content;
  3216.             height: fit-content;
  3217.             padding: 5px 20px;
  3218.             box-sizing: content-box;
  3219.         }
  3220.  
  3221.         .user-profile-wrapper {
  3222.             cursor: pointer;
  3223.         }
  3224.         .user-profile-wrapper > .centerY.g-5 {
  3225.             pointer-events: none;
  3226.             user-select: none;
  3227.             cursor: pointer;
  3228.         }
  3229.  
  3230.         .textarea-container {
  3231.             position: relative;
  3232.             width: 100%;
  3233.         }
  3234.         .textarea-container textarea {
  3235.             width: 100%;
  3236.             height: 120px;
  3237.             resize: none;
  3238.         }
  3239.         .char-counter {
  3240.             position: absolute;
  3241.             bottom: 5px;
  3242.             right: 5px;
  3243.             color: gray;
  3244.         }
  3245.  
  3246.         .mod_badges {
  3247.             display: flex;
  3248.             flex-wrap: wrap;
  3249.             gap: 5px;
  3250.         }
  3251.  
  3252.         .mod_badge {
  3253.             width: fit-content;
  3254.             background: #222;
  3255.             color: #fafafa;
  3256.             padding: 2px 7px;
  3257.             border-radius: 9px;
  3258.         }
  3259.  
  3260.         .friends-chat-wrapper {
  3261.             position: absolute;
  3262.             top: 0;
  3263.             left: 0;
  3264.             width: 100%;
  3265.             height: 100%;
  3266.             background: #111111;
  3267.             display: flex;
  3268.             flex-direction: column;
  3269.             z-index: 999;
  3270.             opacity: 0;
  3271.             transition: all .3s ease;
  3272.         }
  3273.  
  3274.         .friends-chat-header {
  3275.             display: flex;
  3276.             justify-content: space-between;
  3277.             align-items: center;
  3278.             background: #050505;
  3279.             width: 100%;
  3280.             padding: 8px;
  3281.             height: 68px;
  3282.         }
  3283.  
  3284.         .friends-chat-body {
  3285.             height: calc(100% - 68px);
  3286.             display: flex;
  3287.             flex-direction: column;
  3288.         }
  3289.  
  3290.         .friends-chat-messages {
  3291.             height: 300px;
  3292.             overflow-y: auto;
  3293.             display: flex;
  3294.             flex-direction: column;
  3295.             gap: 5px;
  3296.             padding: 10px;
  3297.         }
  3298.         .friends-message {
  3299.             background: linear-gradient(180deg, rgb(12 12 12), #000);
  3300.             padding: 8px;
  3301.             border-radius: 12px;
  3302.             display: flex;
  3303.             flex-direction: column;
  3304. 			min-width: 80px;
  3305.             max-width: 200px;
  3306.             width: fit-content;
  3307.         }
  3308.  
  3309.         .message-date {
  3310.             color: #8a8989;
  3311.             font-size: 11px;
  3312.         }
  3313.  
  3314.         .message-right {
  3315.             align-self: flex-end;
  3316.         }
  3317.  
  3318.         .messenger-wrapper {
  3319.             width: 100%;
  3320.             height: 60px;
  3321.             padding: 10px;
  3322.         }
  3323.         .messenger-wrapper .container {
  3324.             display: flex;
  3325.             flex-direction: row;
  3326.             gap: 10px;
  3327.             width: 100%;
  3328.             background: #0a0a0a;
  3329.             padding: 10px 5px;
  3330.             border-radius: 10px;
  3331.         }
  3332.  
  3333.         .messenger-wrapper .container input {
  3334.             padding: 5px;
  3335.         }
  3336.         .messenger-wrapper .container button {
  3337.             width: 150px;
  3338.         }
  3339.  
  3340.         /* deathscreen challenges */
  3341.  
  3342.         #menu-wrapper {
  3343.             overflow-x: visible;
  3344.             overflow-y: visible;
  3345.         }
  3346.  
  3347.         .challenges_deathscreen {
  3348.             width: 450px;
  3349.             background: rgb(21, 21, 21);
  3350.             display: flex;
  3351.             flex-direction: column;
  3352.             gap: 8px;
  3353.             padding: 7px;
  3354.             border-radius: 10px;
  3355.             margin-bottom: 15px;
  3356.         }
  3357.  
  3358.         .challenges-col {
  3359.             display: flex;
  3360.             flex-direction: column;
  3361.             gap: 4px;
  3362.             align-items: center;
  3363.             width: 100%;
  3364.         }
  3365.         .challenge-row {
  3366.             display: flex;
  3367.             align-items: center;
  3368.             background: rgba(0, 0, 0, .4);
  3369.             justify-content: space-between;
  3370.             padding: 5px 10px;
  3371.             border-radius: 4px;
  3372.             width: 100%;
  3373.         }
  3374.  
  3375.         .challenges-title {
  3376.             font-size: 16px;
  3377.             font-weight: 600;
  3378.         }
  3379.  
  3380.         .challenge-best-secondary {
  3381.             background: #1d1d1d;
  3382.             border-radius: 10px;
  3383.             text-align: center;
  3384.             padding: 5px 8px;
  3385.             min-width: 130px;
  3386.         }
  3387.         .challenge-collect-secondary {
  3388.             background: #4C864B;
  3389.             border-radius: 10px;
  3390.             text-align: center;
  3391.             padding: 5px 8px;
  3392.             outline: none;
  3393.             border: none;
  3394.             min-width: 130px;
  3395.         }
  3396.  
  3397.         .alwan__reference {
  3398.             border-width: 2px !important;
  3399.         }
  3400.  
  3401. 		#mod-announcements {
  3402. 			display: flex;
  3403. 			flex-direction: column;
  3404. 			gap: 6px;
  3405. 			max-height: 144px;
  3406. 			overflow-y: auto;
  3407. 		}
  3408.  
  3409. 		.mod-announcement {
  3410. 			background: #111111;
  3411. 			border-radius: 4px;
  3412. 			display: flex;
  3413. 			gap: 3px;
  3414. 			width: 100%;
  3415. 			cursor: pointer;
  3416. 			padding: 5px 8px;
  3417. 		}
  3418.  
  3419. 		.mod-announcement-icon {
  3420. 			border-radius: 50%;
  3421. 			width: 35px;
  3422. 			height: 35px;
  3423. 			align-self: center;
  3424. 		}
  3425.  
  3426. 		.mod-announcement-text {
  3427. 			display: flex;
  3428. 			flex-direction: column;
  3429. 			gap: 3px;
  3430. 			overflow: hidden;
  3431. 			flex-grow: 1;
  3432. 		}
  3433.  
  3434. 		.mod-announcement-text > * {
  3435. 			overflow: hidden;
  3436. 			white-space: nowrap;
  3437. 			text-overflow: ellipsis;
  3438. 		}
  3439.  
  3440. 		.mod-announcement-text span {
  3441. 			font-size: 14px;
  3442. 			color: #ffffff;
  3443. 			flex-shrink: 0;
  3444. 		}
  3445.  
  3446. 		.mod-announcement-text p {
  3447. 			font-size: 10px;
  3448. 			color: #898989;
  3449. 			flex-shrink: 0;
  3450. 			margin: 0;
  3451. 		}
  3452.  
  3453. 		.mod-announcements-wrapper {
  3454. 			display: flex;
  3455. 			flex-direction: column;
  3456. 			gap: 10px;
  3457. 		}
  3458.  
  3459. 		.mod-announcement-content {
  3460. 			display: flex;
  3461. 			justify-content: space-between;
  3462. 			gap: 10px;
  3463. 			background-color: #050505;
  3464. 			padding: 10px;
  3465. 			border-radius: 10px;
  3466. 			background-image: url('https://czrsd.com/static/general/bg_blur.png');
  3467. 			background-repeat: no-repeat;
  3468. 			background-position: 300px 40%;
  3469. 			background-size: cover;
  3470. 		}
  3471.  
  3472. 		.mod-announcement-content p {
  3473. 			text-align: justify;
  3474. 			max-height: 330px;
  3475. 			overflow-y: auto;
  3476. 			padding-right: 10px;
  3477. 		}
  3478.  
  3479. 		.mod-announcement-images {
  3480. 			display: flex;
  3481. 			flex-direction: column;
  3482. 			gap: 20px;
  3483. 			min-width: 30%;
  3484. 			width: 30%;
  3485. 			max-height: 330px;
  3486. 			padding-right: 10px;
  3487. 			overflow-y: auto;
  3488. 		}
  3489.  
  3490. 		.mod-announcement-images img {
  3491. 			border-radius: 5px;
  3492. 			cursor: pointer;
  3493. 		}
  3494.  
  3495. 		#image-gallery {
  3496. 			display: flex;
  3497. 			flex-wrap: wrap;
  3498. 			gap: 5px;
  3499. 		}
  3500.  
  3501. 		.image-container {
  3502. 			display: flex;
  3503. 			flex-direction: column;
  3504. 		}
  3505.  
  3506. 		.image-container img {
  3507. 			width: 172px;
  3508. 			height: auto;
  3509. 			aspect-ratio: 16 / 9;
  3510. 			border-radius: 5px;
  3511. 			cursor: pointer;
  3512. 		}
  3513.  
  3514. 		.download_btn {
  3515. 			background: url('https://czrsd.com/static/sigmod/icons/download.svg');
  3516.  
  3517. 		}
  3518.  
  3519. 		.delete_btn {
  3520. 			background: url('https://czrsd.com/static/sigmod/icons/trash-bin.svg');
  3521. 		}
  3522.  
  3523. 		.operation_btn {
  3524. 			background-size: contain;
  3525. 			background-repeat: no-repeat;
  3526. 			border: none;
  3527. 			width: 22px;
  3528. 			height: 22px;
  3529. 		}
  3530.  
  3531. 		.sigmod-community {
  3532. 			display: flex;
  3533. 			flex-direction: column;
  3534. 			margin: auto;
  3535. 			border-radius: 10px;
  3536. 			width: 50%;
  3537. 			align-self: center;
  3538. 			font-size: 19px;
  3539. 			overflow: hidden;
  3540. 		}
  3541.  
  3542. 		.community-header {
  3543. 			background: linear-gradient(179deg, #000000, #0c0c0c);
  3544. 			text-align: center;
  3545. 			font-family: "Titillium Web", sans-serif;
  3546. 			padding: 6px;
  3547. 		}
  3548.  
  3549. 		.community-discord-logo {
  3550. 			background: rgb(88, 101, 242);
  3551. 			padding: 5px 12px;
  3552. 		}
  3553. 		.community-discord {
  3554. 			text-align: center;
  3555. 			padding: 10px;
  3556. 			background: #0c0c0c;
  3557. 			width: 100%;
  3558. 		}
  3559. 		.community-discord a {
  3560. 			font-family: "Titillium Web", sans-serif;
  3561. 		}
  3562.  
  3563. 		/* common */
  3564.         .flex {
  3565.              display: flex;
  3566.         }
  3567.         .centerX {
  3568.              display: flex;
  3569.              justify-content: center;
  3570.         }
  3571.         .centerY {
  3572.              display: flex;
  3573.              align-items: center;
  3574.         }
  3575.         .centerXY {
  3576.              display: flex;
  3577.              align-items: center;
  3578.              justify-content: center
  3579.         }
  3580.         .f-column {
  3581.              display: flex;
  3582.              flex-direction: column;
  3583.         }
  3584. 		mx-5 {
  3585. 			margin: 0 5px;
  3586. 		}
  3587.         .my-5 {
  3588.             margin: 5px 0;
  3589.         }
  3590. 		.mt-auto {
  3591. 			margin-top: auto !important;
  3592. 		}
  3593.         .g-2 {
  3594.             gap: 2px;
  3595.         }
  3596.         .g-5 {
  3597.             gap: 5px;
  3598.         }
  3599.         .g-10 {
  3600.             gap: 10px;
  3601.         }
  3602.         .p-2 {
  3603.             padding: 2px;
  3604.         }
  3605.         .p-5 {
  3606.             padding: 5px;
  3607.         }
  3608.         .p-10 {
  3609.             padding: 10px;
  3610.         }
  3611.         .rounded {
  3612.             border-radius: 6px;
  3613.         }
  3614.         .text-center {
  3615.             text-align: center;
  3616.         }
  3617.         .f-big {
  3618.             font-size: 18px;
  3619.         }
  3620.         .hidden {
  3621.              display: none;
  3622.         }
  3623.             `;
  3624.         },
  3625.         respawnTime: Date.now(),
  3626.         respawnCooldown: 1000,
  3627.         get friends_settings() {
  3628.             return this._friends_settings;
  3629.         },
  3630.         set friends_settings(value) {
  3631.             this._friends_settings = value;
  3632.             window.sigmod.friends_settings = value;
  3633.         },
  3634.         get friend_names() {
  3635.             return this._friend_names;
  3636.         },
  3637.  
  3638.         set friend_names(value) {
  3639.             this._friend_names = value;
  3640.             window.sigmod.friend_names = value;
  3641.         },
  3642.  
  3643.         async game() {
  3644.             const { fillRect, fillText, strokeText, arc, drawImage } =
  3645.                 CanvasRenderingContext2D.prototype;
  3646.  
  3647.             const showPosition = byId('showPosition');
  3648.             if (showPosition && !showPosition.checked) showPosition.click();
  3649.  
  3650.             const loadStorage = () => {
  3651.                 if (modSettings.virusImage) {
  3652.                     loadVirusImage(modSettings.virusImage);
  3653.                 }
  3654.  
  3655.                 if (modSettings.game.skins.original !== null) {
  3656.                     loadSkinImage(
  3657.                         modSettings.game.skins.original,
  3658.                         modSettings.game.skins.replacement
  3659.                     );
  3660.                 }
  3661.             };
  3662.  
  3663.             loadStorage();
  3664.  
  3665.             let cachedPattern = null;
  3666.             let patternCanvas = null;
  3667.             let isUpdatingPattern = false;
  3668.  
  3669.             function updatePattern(ctx) {
  3670.                 isUpdatingPattern = true;
  3671.                 loadPattern(ctx)
  3672.                     .then((pattern) => {
  3673.                         if (mods.mapImageLoaded) {
  3674.                             cachedPattern = pattern;
  3675.                             ctx.fillStyle = cachedPattern;
  3676.                             ctx.fillRect(
  3677.                                 0,
  3678.                                 0,
  3679.                                 ctx.canvas.width,
  3680.                                 ctx.canvas.height
  3681.                             );
  3682.                         } else {
  3683.                             clearPattern(ctx);
  3684.                         }
  3685.                         isUpdatingPattern = false;
  3686.                     })
  3687.                     .catch((e) => {
  3688.                         console.error('Error loading map image:', e);
  3689.                         clearPattern(ctx);
  3690.                         isUpdatingPattern = false;
  3691.                     });
  3692.             }
  3693.  
  3694.             function loadPattern(ctx) {
  3695.                 return new Promise((resolve, reject) => {
  3696.                     const img = new Image();
  3697.                     img.src = modSettings.game.map.image;
  3698.                     img.crossOrigin = 'Anonymous';
  3699.  
  3700.                     img.onload = () => {
  3701.                         if (!patternCanvas) {
  3702.                             patternCanvas = document.createElement('canvas');
  3703.                         }
  3704.                         patternCanvas.width = img.width;
  3705.                         patternCanvas.height = img.height;
  3706.                         const patternCtx = patternCanvas.getContext('2d');
  3707.                         patternCtx.drawImage(img, 0, 0);
  3708.  
  3709.                         const imageData = patternCtx.getImageData(
  3710.                             0,
  3711.                             0,
  3712.                             patternCanvas.width,
  3713.                             patternCanvas.height
  3714.                         );
  3715.                         const data = imageData.data;
  3716.                         mods.mapImageLoaded = !Array.from(data).some(
  3717.                             (_, i) => i % 4 === 3 && data[i] < 255
  3718.                         );
  3719.  
  3720.                         if (mods.mapImageLoaded) {
  3721.                             resolve(
  3722.                                 ctx.createPattern(patternCanvas, 'no-repeat')
  3723.                             );
  3724.                         } else {
  3725.                             resolve(null);
  3726.                         }
  3727.                     };
  3728.  
  3729.                     img.onerror = () =>
  3730.                         reject(new Error('Failed to load image.'));
  3731.                 });
  3732.             }
  3733.  
  3734.             function clearPattern(ctx) {
  3735.                 isUpdatingPattern = true;
  3736.                 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  3737.                 ctx.fillStyle = modSettings.game.map.color || '#111111';
  3738.                 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  3739.                 isUpdatingPattern = false;
  3740.             }
  3741.  
  3742.             window.addEventListener('resize', () => {
  3743.                 const canvas = document.getElementById('canvas');
  3744.                 if (canvas && modSettings.game.map.image) {
  3745.                     updatePattern(canvas.getContext('2d'));
  3746.                 }
  3747.             });
  3748.  
  3749.             /* CanvasRenderingContext2D.prototype */
  3750.  
  3751.             CanvasRenderingContext2D.prototype.fillRect = function (
  3752.                 x,
  3753.                 y,
  3754.                 width,
  3755.                 height
  3756.             ) {
  3757.                 if (this.canvas.id !== 'canvas')
  3758.                     return fillRect.apply(this, arguments);
  3759.  
  3760.                 const isCanvasSize =
  3761.                     (width + height) / 2 ===
  3762.                     (window.innerWidth + window.innerHeight) / 2;
  3763.  
  3764.                 if (isCanvasSize) {
  3765.                     if (modSettings.game.map.image && !mods.mapImageLoaded) {
  3766.                         mods.mapImageLoaded = true;
  3767.                         updatePattern(this);
  3768.                     } else if (
  3769.                         !modSettings.game.map.image ||
  3770.                         !mods.mapImageLoaded
  3771.                     ) {
  3772.                         if (!isUpdatingPattern) {
  3773.                             clearPattern(this);
  3774.                         }
  3775.                     } else {
  3776.                         this.fillStyle =
  3777.                             cachedPattern ||
  3778.                             modSettings.game.map.color ||
  3779.                             '#111111';
  3780.                     }
  3781.                 }
  3782.  
  3783.                 fillRect.apply(this, arguments);
  3784.             };
  3785.  
  3786.             CanvasRenderingContext2D.prototype.arc = function (
  3787.                 x,
  3788.                 y,
  3789.                 radius,
  3790.                 startAngle,
  3791.                 endAngle,
  3792.                 anticlockwise
  3793.             ) {
  3794.                 if (this.canvas.id !== 'canvas') return arc.apply(this, arguments);
  3795.  
  3796.                 if (radius >= 86 && modSettings.game.cellColor) {
  3797.                     this.fillStyle = modSettings.game.cellColor;
  3798.                 } else if (
  3799.                     radius <= 20 &&
  3800.                     modSettings.game.foodColor !== null
  3801.                 ) {
  3802.                     this.fillStyle = modSettings.game.foodColor;
  3803.                     this.strokeStyle = modSettings.game.foodColor;
  3804.                 }
  3805.  
  3806.                 arc.apply(this, arguments);
  3807.             };
  3808.  
  3809.             CanvasRenderingContext2D.prototype.fillText = function (
  3810.                 text,
  3811.                 x,
  3812.                 y
  3813.             ) {
  3814.                 if (this.canvas.id !== 'canvas') return fillText.apply(this, arguments);
  3815.  
  3816.                 const currentFontSizeMatch = this.font.match(/^(\d+)px/);
  3817.                 const fontSize = currentFontSizeMatch
  3818.                     ? currentFontSizeMatch[0]
  3819.                     : '';
  3820.  
  3821.                 this.font = `${fontSize} ${modSettings.game.font || 'Ubuntu'}`;
  3822.  
  3823.                 if (
  3824.                     text === mods.nick &&
  3825.                     !modSettings.game.name.gradient.enabled &&
  3826.                     modSettings.game.name.color !== null
  3827.                 ) {
  3828.                     this.fillStyle = modSettings.game.name.color;
  3829.                 }
  3830.  
  3831.                 if (
  3832.                     text === mods.nick &&
  3833.                     modSettings.game.name.gradient.enabled
  3834.                 ) {
  3835.                     const width = this.measureText(text).width;
  3836.                     const fontSize = 8;
  3837.                     const gradient = this.createLinearGradient(
  3838.                         x - width / 2 + fontSize / 2,
  3839.                         y,
  3840.                         x + width / 2 - fontSize / 2,
  3841.                         y + fontSize
  3842.                     );
  3843.  
  3844.                     const color1 =
  3845.                         modSettings.game.name.gradient.left ?? '#ffffff';
  3846.                     const color2 =
  3847.                         modSettings.game.name.gradient.right ?? '#ffffff';
  3848.  
  3849.                     gradient.addColorStop(0, color1);
  3850.                     gradient.addColorStop(1, color2);
  3851.  
  3852.                     this.fillStyle = gradient;
  3853.                 }
  3854.  
  3855.                 if (!window.sigifx && text.startsWith('Score')) {
  3856.                     if (Date.now() - lastGetScore >= 250) {
  3857.                         const score = parseInt(text.split(': ')[1]);
  3858.  
  3859.                         mods.cellSize = score;
  3860.  
  3861.                         mods.aboveRespawnLimit = score >= 5500;
  3862.  
  3863.                         lastGetScore = Date.now();
  3864.                     }
  3865.                 }
  3866.  
  3867.                 if (!window.sigfix && text.startsWith('X:')) {
  3868.                     this.fillStyle = 'transparent';
  3869.  
  3870.                     const [, xValue, yValue] =
  3871.                     /X: (.*), Y: (.*)/.exec(text) || [];
  3872.                     if (!xValue) return;
  3873.  
  3874.                     const position = {
  3875.                         x: parseFloat(xValue),
  3876.                         y: parseFloat(yValue),
  3877.                     };
  3878.  
  3879.                     if (menuClosed() && !isDead()) {
  3880.                         if (position.x === 0 && position.y === 0) return;
  3881.  
  3882.                         playerPosition.x = position.x;
  3883.                         playerPosition.y = position.y;
  3884.  
  3885.                         // send position every 300 milliseconds
  3886.                         if (Date.now() - lastPosTime >= 300) {
  3887.                             if (modSettings.settings.tag && client?.ws?.readyState === 1) {
  3888.                                 client.send({
  3889.                                     type: 'position',
  3890.                                     content: {
  3891.                                         x: playerPosition.x,
  3892.                                         y: playerPosition.y,
  3893.                                     },
  3894.                                 });
  3895.                             }
  3896.                             lastPosTime = Date.now();
  3897.                         }
  3898.                     } else if (isDead() && !dead2) {
  3899.                         dead2 = true;
  3900.                         playerPosition.x = null;
  3901.                         playerPosition.y = null;
  3902.                         if (modSettings.settings.tag && client?.ws?.readyState === 1) {
  3903.                             client.send({
  3904.                                 type: 'position',
  3905.                                 content: { x: null, y: null },
  3906.                             });
  3907.                         }
  3908.                     }
  3909.                 }
  3910.  
  3911.                 if (modSettings.game.removeOutlines) {
  3912.                     this.shadowBlur = 0;
  3913.                     this.shadowColor = 'transparent';
  3914.                 }
  3915.  
  3916.                 if (text.length > 18 && modSettings.game.shortenNames) {
  3917.                     arguments[0] = text.slice(0, 18) + '...';
  3918.                 }
  3919.  
  3920.                 // only for leaderboard
  3921.                 const name = text.match(/\d+\.\s*(.+)/)?.[1];
  3922.  
  3923.                 if (
  3924.                     name &&
  3925.                     mods.friend_names.has(name) &&
  3926.                     mods.friends_settings.highlight_friends
  3927.                 ) {
  3928.                     this.fillStyle = mods.friends_settings.highlight_color;
  3929.                 }
  3930.  
  3931.                 fillText.apply(this, arguments);
  3932.             };
  3933.  
  3934.             CanvasRenderingContext2D.prototype.strokeText = function (
  3935.                 text,
  3936.                 x,
  3937.                 y
  3938.             ) {
  3939.                 if (this.canvas.id !== 'canvas') return strokeText.apply(this, arguments);
  3940.  
  3941.                 const currentFontSizeMatch = this.font.match(/^(\d+)px/);
  3942.                 const fontSize = currentFontSizeMatch
  3943.                     ? currentFontSizeMatch[0]
  3944.                     : '';
  3945.  
  3946.                 this.font = `${fontSize} ${modSettings.game.font || 'Ubuntu'}`;
  3947.  
  3948.                 if (text.length > 18 && modSettings.game.shortenNames) {
  3949.                     arguments[0] = text.slice(0, 18) + '...';
  3950.                 }
  3951.  
  3952.                 if (modSettings.game.removeOutlines) {
  3953.                     this.shadowBlur = 0;
  3954.                     this.shadowColor = 'transparent';
  3955.                 } else {
  3956.                     this.shadowBlur = 7;
  3957.                     this.shadowColor = '#000';
  3958.                 }
  3959.  
  3960.                 strokeText.apply(this, arguments);
  3961.             };
  3962.  
  3963.             CanvasRenderingContext2D.prototype.drawImage = function (
  3964.                 image,
  3965.                 ...args
  3966.             ) {
  3967.                 if (this.canvas.id !== 'canvas')
  3968.                     return drawImage.call(this, image, ...args);
  3969.  
  3970.                 if (
  3971.                     image.src &&
  3972.                     (image.src.endsWith('2.png') ||
  3973.                         image.src.endsWith('2-min.png')) &&
  3974.                     modSettings.game.virusImage
  3975.                 ) {
  3976.                     if (mods.virusImageLoaded) {
  3977.                         return drawImage.call(this, mods.virusImage, ...args);
  3978.                     } else {
  3979.                         loadVirusImage(modSettings.game.virusImage).then(() => {
  3980.                             drawImage.call(this, mods.virusImage, ...args);
  3981.                         });
  3982.                         return;
  3983.                     }
  3984.                 }
  3985.  
  3986.                 if (
  3987.                     image instanceof HTMLImageElement &&
  3988.                     modSettings.game.skins.original &&
  3989.                     image.src.includes(`${modSettings.game.skins.original}.png`)
  3990.                 ) {
  3991.                     if (mods.skinImageLoaded) {
  3992.                         return drawImage.call(this, mods.skinImage, ...args);
  3993.                     } else {
  3994.                         loadSkinImage(
  3995.                             modSettings.game.skins.original,
  3996.                             modSettings.game.skins.replacement
  3997.                         ).then(() => {
  3998.                             drawImage.call(this, mods.skinImage, ...args);
  3999.                         });
  4000.                         return;
  4001.                     }
  4002.                 }
  4003.  
  4004.                 drawImage.call(this, image, ...args);
  4005.             };
  4006.  
  4007.             function loadVirusImage(imgSrc) {
  4008.                 return new Promise((resolve, reject) => {
  4009.                     const replacementVirus = new Image();
  4010.                     replacementVirus.src = imgSrc;
  4011.                     replacementVirus.crossOrigin = 'Anonymous';
  4012.  
  4013.                     replacementVirus.onload = () => {
  4014.                         mods.virusImage = replacementVirus;
  4015.                         mods.virusImageLoaded = true;
  4016.                         resolve();
  4017.                     };
  4018.  
  4019.                     replacementVirus.onerror = () => {
  4020.                         console.error('Failed to load virus image.');
  4021.                         reject(new Error('Failed to load virus image.'));
  4022.                     };
  4023.                 });
  4024.             }
  4025.  
  4026.             function loadSkinImage(originalSkinName, replacementImgSrc) {
  4027.                 return new Promise((resolve, reject) => {
  4028.                     const replacementSkin = new Image();
  4029.                     replacementSkin.src = replacementImgSrc;
  4030.                     replacementSkin.crossOrigin = 'Anonymous';
  4031.  
  4032.                     replacementSkin.onload = () => {
  4033.                         mods.skinImage = replacementSkin;
  4034.                         mods.skinImageLoaded = true;
  4035.                         resolve();
  4036.                     };
  4037.  
  4038.                     replacementSkin.onerror = () =>
  4039.                         reject(new Error('Failed to load skin image.'));
  4040.                 });
  4041.             }
  4042.  
  4043.             const modals = {
  4044.                 map: {
  4045.                     title: 'Map Image',
  4046.                     applyId: 'apply-map-image',
  4047.                     resetId: 'reset-map-image',
  4048.                     previewId: 'preview-mapImage',
  4049.                     modalId: 'map-modal',
  4050.                     storagePath: 'game.map.image',
  4051.                 },
  4052.                 virus: {
  4053.                     title: 'Virus Image',
  4054.                     applyId: 'apply-virus-image',
  4055.                     resetId: 'reset-virus-image',
  4056.                     previewId: 'preview-virusImage',
  4057.                     modalId: 'virus-modal',
  4058.                     storagePath: 'game.virusImage',
  4059.                 },
  4060.                 skin: {
  4061.                     title: 'Skin Replacement',
  4062.                     applyId: 'apply-skin-image',
  4063.                     resetId: 'reset-skin-image',
  4064.                     previewId: 'preview-skinImage',
  4065.                     modalId: 'skin-modal',
  4066.                     storagePath: [
  4067.                         'game.skins.original',
  4068.                         'game.skins.replacement',
  4069.                     ],
  4070.                     additional: true,
  4071.                 },
  4072.             };
  4073.  
  4074.             function createModal({
  4075.                                      title,
  4076.                                      applyId,
  4077.                                      resetId,
  4078.                                      previewId,
  4079.                                      modalId,
  4080.                                      additional,
  4081.                                  }) {
  4082.                 const additionalContent = additional
  4083.                     ? `
  4084. 					<span>Select a skin that should be replaced:</span>
  4085. 					<select class="form-control" id="skin-list"></select>
  4086. 					<span style="font-size: 12px;">Replacement image - Enter an image URL:</span>
  4087. 				`
  4088.                     : `
  4089. 					<span>Enter an image URL:</span>
  4090. 				`;
  4091.  
  4092.                 return `
  4093. 					<div class="default-modal">
  4094. 						<div class="default-modal-header">
  4095. 							<h2>${title}</h2>
  4096. 							<button class="btn closeBtn" id="closeCustomModal">
  4097. 								<svg width="22" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  4098. 									<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>
  4099. 								</svg>
  4100. 							</button>
  4101. 						</div>
  4102. 						<div class="default-modal-body">
  4103. 							${additionalContent}
  4104. 							<div class="centerXY g-10">
  4105. 								<input type="text" placeholder="https://i.imgur/..." class="form-control" id="image-url" />
  4106. 								<div class="imagePreview" id="${previewId}" title="Image Preview">
  4107. 									<span class="no-preview">No Preview Available</span>
  4108. 								</div>
  4109. 							</div>
  4110. 							<div class="centerXY g-10">
  4111. 								<button type="button" class="modButton-black" id="${applyId}">Apply Image</button>
  4112. 								<button type="button" class="resetButton" title="Reset ${title.toLowerCase()}" id="${resetId}"></button>
  4113. 							</div>
  4114. 						</div>
  4115. 					</div>
  4116. 				`;
  4117.             }
  4118.  
  4119.             function setupModalEvents(id, type) {
  4120.                 byId(id).addEventListener('click', async () => {
  4121.                     mods.customModal(
  4122.                         createModal(modals[type]),
  4123.                         modals[type].modalId
  4124.                     );
  4125.                     document
  4126.                         .querySelector('#closeCustomModal')
  4127.                         .addEventListener('click', () => closeModal(type));
  4128.  
  4129.                     const modal = modals[type];
  4130.                     const imageUrlInput = byId('image-url');
  4131.  
  4132.                     let initialUrl = '';
  4133.                     if (modal.additional && type === 'skin') {
  4134.                         const [originalPath, replacementPath] =
  4135.                             modal.storagePath;
  4136.                         initialUrl =
  4137.                             getNestedValue(modSettings, replacementPath) || '';
  4138.                         byId('skin-list').value =
  4139.                             getNestedValue(modSettings, originalPath) || '';
  4140.                     } else {
  4141.                         initialUrl =
  4142.                             getNestedValue(modSettings, modal.storagePath) ||
  4143.                             '';
  4144.                     }
  4145.                     imageUrlInput.value = initialUrl;
  4146.                     updatePreview(initialUrl);
  4147.  
  4148.                     imageUrlInput.addEventListener('input', (e) => {
  4149.                         updatePreview(e.target.value);
  4150.                     });
  4151.  
  4152.                     byId(modal.applyId).addEventListener('click', () =>
  4153.                         applyChanges(type)
  4154.                     );
  4155.                     byId(modal.resetId).addEventListener('click', () =>
  4156.                         resetChanges(type)
  4157.                     );
  4158.  
  4159.                     if (type === 'skin') {
  4160.                         const skinList = byId('skin-list');
  4161.                         const skins =
  4162.                             mods.skins.length > 0
  4163.                                 ? mods.skins
  4164.                                 : await fetch(
  4165.                                     'https://one.sigmally.com/api/skins'
  4166.                                 )
  4167.                                     .then((response) => response.json())
  4168.                                     .then((data) => {
  4169.                                         const skinNames = data.data.map(
  4170.                                             (item) =>
  4171.                                                 item.name.replace('.png', '')
  4172.                                         );
  4173.                                         mods.skins = skinNames;
  4174.                                         return skinNames;
  4175.                                     });
  4176.  
  4177.                         skinList.innerHTML = skins
  4178.                             .map(
  4179.                                 (skin) =>
  4180.                                     `<option value="${skin}" ${
  4181.                                         skin === modSettings.game.skins.original
  4182.                                             ? 'selected'
  4183.                                             : ''
  4184.                                     }>${skin}</option>`
  4185.                             )
  4186.                             .join('');
  4187.                     }
  4188.                 });
  4189.             }
  4190.  
  4191.             function getNestedValue(obj, path) {
  4192.                 return path
  4193.                     .split('.')
  4194.                     .reduce((acc, part) => acc && acc[part], obj);
  4195.             }
  4196.  
  4197.             function setNestedValue(obj, path, value) {
  4198.                 const parts = path.split('.');
  4199.                 const last = parts.pop();
  4200.                 const target = parts.reduce(
  4201.                     (acc, part) => (acc[part] = acc[part] || {}),
  4202.                     obj
  4203.                 );
  4204.                 target[last] = value;
  4205.             }
  4206.  
  4207.             function updatePreview(url) {
  4208.                 const preview = document.querySelector('.imagePreview');
  4209.                 const noPreviewSpan = document.querySelector('.no-preview');
  4210.  
  4211.                 const updateVisibility = (showPreview) => {
  4212.                     preview.style.backgroundImage = showPreview
  4213.                         ? `url(${url})`
  4214.                         : 'none';
  4215.                     noPreviewSpan.style.display = showPreview
  4216.                         ? 'none'
  4217.                         : 'block';
  4218.                 };
  4219.  
  4220.                 if (url) {
  4221.                     const img = new Image();
  4222.                     img.src = url;
  4223.                     img.onload = () => updateVisibility(true);
  4224.                     img.onerror = () => updateVisibility(false);
  4225.                 } else {
  4226.                     updateVisibility(false);
  4227.                 }
  4228.             }
  4229.  
  4230.             function applyChanges(type) {
  4231.                 let { title, storagePath, additional } = modals[type];
  4232.                 const url = byId('image-url').value;
  4233.  
  4234.                 mods[`${type}ImageLoaded`] = false;
  4235.  
  4236.                 if (additional && type === 'skin') {
  4237.                     const selectedSkin = byId('skin-list').value;
  4238.                     setNestedValue(modSettings, storagePath[0], selectedSkin);
  4239.                     setNestedValue(modSettings, storagePath[1], url);
  4240.                 } else {
  4241.                     setNestedValue(modSettings, storagePath, url);
  4242.                 }
  4243.  
  4244.                 updateStorage();
  4245.  
  4246.                 mods.modAlert(`Successfully applied ${title}.`, 'success');
  4247.             }
  4248.  
  4249.             function resetChanges(type) {
  4250.                 const { title, storagePath, additional } = modals[type];
  4251.  
  4252.                 if (additional && type === 'skin') {
  4253.                     setNestedValue(modSettings, storagePath[0], null);
  4254.                     setNestedValue(modSettings, storagePath[1], null);
  4255.                 } else {
  4256.                     setNestedValue(modSettings, storagePath, null);
  4257.                 }
  4258.  
  4259.                 mods[`${type}ImageLoaded`] = false;
  4260.  
  4261.                 updateStorage();
  4262.  
  4263.                 mods.modAlert(
  4264.                     `The ${title} has been successfully reset.`,
  4265.                     'success'
  4266.                 );
  4267.             }
  4268.  
  4269.             function closeModal(type) {
  4270.                 const overlay = byId(`${type}-modal`);
  4271.                 overlay.style.opacity = 0;
  4272.                 setTimeout(() => overlay.remove(), 300);
  4273.             }
  4274.  
  4275.             setupModalEvents('mapImageSelect', 'map');
  4276.             setupModalEvents('virusImageSelect', 'virus');
  4277.             setupModalEvents('skinReplaceSelect', 'skin');
  4278.  
  4279.             const shortenNames = byId('shortenNames');
  4280.             const removeOutlines = byId('removeOutlines');
  4281.  
  4282.             shortenNames.addEventListener('change', () => {
  4283.                 modSettings.game.shortenNames = shortenNames.checked;
  4284.                 updateStorage();
  4285.             });
  4286.             removeOutlines.addEventListener('change', () => {
  4287.                 modSettings.game.removeOutlines = removeOutlines.checked;
  4288.                 updateStorage();
  4289.             });
  4290.  
  4291.             const showNames = byId('mod-showNames');
  4292.             const showSkins = byId('mod-showSkins');
  4293.  
  4294.             const originalShowNames = byId('showNames');
  4295.             const originalShowSkins = byId('showSkins');
  4296.  
  4297.             function syncCheckboxes() {
  4298.                 if (showNames.checked !== originalShowNames.checked) {
  4299.                     originalShowNames.click();
  4300.                 }
  4301.                 if (showSkins.checked !== originalShowSkins.checked) {
  4302.                     originalShowSkins.click();
  4303.                 }
  4304.             }
  4305.  
  4306.             showNames.addEventListener('change', syncCheckboxes);
  4307.             showSkins.addEventListener('change', syncCheckboxes);
  4308.  
  4309.             const deathScreenPos = byId('deathScreenPos');
  4310.             const deathScreen = byId('__line2');
  4311.  
  4312.             const applyMargin = (position) => {
  4313.                 switch (position) {
  4314.                     case 'left':
  4315.                         deathScreen.style.marginLeft = '0';
  4316.                         break;
  4317.                     case 'right':
  4318.                         deathScreen.style.marginRight = '0';
  4319.                         break;
  4320.                     case 'top':
  4321.                         deathScreen.style.marginTop = '20px';
  4322.                         break;
  4323.                     case 'bottom':
  4324.                         deathScreen.style.marginBottom = '20px';
  4325.                         break;
  4326.                     default:
  4327.                         deathScreen.style.margin = 'auto';
  4328.                 }
  4329.             };
  4330.  
  4331.             deathScreenPos.addEventListener('change', () => {
  4332.                 const selected = deathScreenPos.value;
  4333.                 applyMargin(selected);
  4334.                 modSettings.deathScreenPos = selected;
  4335.                 updateStorage();
  4336.             });
  4337.  
  4338.             const defaultPosition = modSettings.deathScreenPos || 'center';
  4339.  
  4340.             applyMargin(defaultPosition);
  4341.             deathScreenPos.value = defaultPosition;
  4342.         },
  4343.  
  4344.         customModal(children, id, zindex = '999999') {
  4345.             const overlay = document.createElement('div');
  4346.             overlay.classList.add('mod_overlay');
  4347.             id && overlay.setAttribute('id', id);
  4348.             overlay.innerHTML = children;
  4349.             overlay.style.zIndex = zindex;
  4350.             overlay.style.opacity = 0;
  4351.  
  4352.             document.body.append(overlay);
  4353.  
  4354.             setTimeout(() => {
  4355.                 overlay.style.opacity = '1';
  4356.             });
  4357.  
  4358.             const handleClickOutside = (e) => {
  4359.                 if (e.target === overlay) {
  4360.                     overlay.style.opacity = 0;
  4361.                     setTimeout(() => {
  4362.                         overlay.remove();
  4363.                         document.removeEventListener(
  4364.                             'click',
  4365.                             handleClickOutside
  4366.                         );
  4367.                     }, 300);
  4368.                 }
  4369.             };
  4370.  
  4371.             document.addEventListener('click', handleClickOutside);
  4372.         },
  4373.  
  4374.         handleGoogleAuth(user) {
  4375.             fetchedUser++;
  4376.             window.gameSettings.user = user;
  4377.             if (!client) client = new modClient();
  4378.  
  4379.             const waitForInit = () =>
  4380.                 new Promise((res) => {
  4381.                     if (client.ws?.readyState === 1 && mods.nick)
  4382.                         return res(null);
  4383.                     const i = setInterval(
  4384.                         () =>
  4385.                             client.ws?.readyState === 1 &&
  4386.                             mods.nick &&
  4387.                             (clearInterval(i), res(null)),
  4388.                         50
  4389.                     );
  4390.                 });
  4391.  
  4392.             waitForInit().then(() =>
  4393.                 client.send({
  4394.                     type: 'user',
  4395.                     content: { ...user, nick: mods.nick },
  4396.                 })
  4397.             );
  4398.  
  4399.             const claim = document.getElementById('free-chest-button');
  4400.             if (
  4401.                 fetchedUser === 1 &&
  4402.                 modSettings.settings.autoClaimCoins &&
  4403.                 claim?.style.display !== 'none'
  4404.             ) {
  4405.                 setTimeout(() => claim.click(), 500);
  4406.             }
  4407.         },
  4408.  
  4409.         async menu() {
  4410.             const mod_menu = document.createElement('div');
  4411.             mod_menu.classList.add('mod_menu');
  4412.             mod_menu.style.display = 'none';
  4413.             mod_menu.style.opacity = '0';
  4414.             mod_menu.innerHTML = `
  4415.                 <div class="mod_menu_wrapper">
  4416.                     <div class="mod_menu_header">
  4417.                         <img alt="Header image" src="${headerAnim}" draggable="false" class="header_img" />
  4418.                         <button type="button" class="modButton" id="closeBtn">
  4419.                             <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  4420.                                 <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>
  4421.                             </svg>
  4422.                         </button>
  4423.                     </div>
  4424.                     <div class="mod_menu_inner">
  4425.                         <div class="mod_menu_navbar">
  4426.                             <button class="mod_nav_btn mod_selected" id="tab_home_btn">
  4427.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/home%20(1).png" alt="Home Icon" />
  4428.                                 Home
  4429.                             </button>
  4430.                             <button class="mod_nav_btn" id="tab_macros_btn">
  4431.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/keyboard%20(1).png" alt="Keyboard Icon" />
  4432.                                 Macros
  4433.                             </button>
  4434.                             <button class="mod_nav_btn" id="tab_game_btn">
  4435.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/games.png" alt="Game Icon" />
  4436.                                 Game
  4437.                             </button>
  4438.                             <button class="mod_nav_btn" id="tab_name_btn">
  4439.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/836ca0f4c25fc6de2e429ee3583be5f860884a0c/images/icons/name.svg" alt="Name Icon" />
  4440.                                 Name
  4441.                             </button>
  4442.                             <button class="mod_nav_btn" id="tab_themes_btn">
  4443.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/theme.png" alt="Themes Icon" />
  4444.                                 Themes
  4445.                             </button>
  4446.                             <button class="mod_nav_btn" id="tab_gallery_btn">
  4447. 								<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>
  4448.                                 Gallery
  4449.                             </button>
  4450.  
  4451.                             <button class="mod_nav_btn" id="tab_friends_btn">
  4452.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/friends%20(1).png" alt="Friends Icon" />
  4453.                                 Friends
  4454.                             </button>
  4455.                             <button class="mod_nav_btn mt-auto" id="tab_info_btn">
  4456.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/info.png" alt="Info Icon" />
  4457.                                 Info
  4458.                             </button>
  4459.                         </div>
  4460.                         <div class="mod_menu_content">
  4461.                             <div class="mod_tab" id="mod_home">
  4462.                                 <span class="text-center f-big" id="welcomeUser">Welcome ${
  4463.                 this.nick || 'Guest'
  4464.             }, to the SigMod Client!</span>
  4465.                                 <div class="home-card-row">
  4466. 									<!-- CARD.1 -->
  4467. 									<div class="home-card-wrapper">
  4468. 										<span>Your stats</span>
  4469. 										<div class="home-card">
  4470. 											<canvas id="sigmod-stats" width="200" height="100"></canvas>
  4471. 										</div>
  4472. 									</div>
  4473. 									<!-- CARD.2 -->
  4474. 									<div class="home-card-wrapper">
  4475.                                         <span>Announcements</span>
  4476.                                         <div class="home-card" style="justify-content: start;">
  4477. 											<div id="mod-announcements">No announcements yet...</div>
  4478. 										</div>
  4479.                                     </div>
  4480.                                 </div>
  4481.                                 <div class="home-card-row">
  4482. 									<!-- CARD.3 -->
  4483.                                     <div class="home-card-wrapper">
  4484.                                         <span>Quick access</span>
  4485.                                         <div class="home-card quickAccess scroll" id="mod_qaccess"></div>
  4486.                                     </div>
  4487. 									<!-- CARD.4 -->
  4488.                                     <div class="home-card-wrapper">
  4489.                                         <span>Mod profile</span>
  4490.                                         <div class="home-card">
  4491.                                             <div class="justify-sb">
  4492.                                                 <div class="flex" style="align-items: center; gap: 5px;">
  4493.                                                     <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" />
  4494.                                                     <span id="my-profile-name">Guest</span>
  4495.                                                 </div>
  4496.                                                 <span id="my-profile-role">Guest</span>
  4497.                                             </div>
  4498. 											<div id="my-profile-badges"></div>
  4499.                                             <hr />
  4500.                                             <span id="my-profile-bio" class="scroll">No Bio.</span>
  4501.                                         </div>
  4502.                                     </div>
  4503.                                 </div>
  4504.                             </div>
  4505.                             <div class="mod_tab scroll" id="mod_macros" style="display: none">
  4506. 								<div class="modColItems">
  4507.                                     <div class="macros_wrapper">
  4508.                                         <span class="text-center f-big">Keybindings</span>
  4509.                                         <hr style="border-color: #3F3F3F">
  4510.                                         <div style="justify-content: center;">
  4511.                                             <div class="f-column g-10" style="align-items: center; justify-content: center;">
  4512.                                                 <div class="macrosContainer">
  4513.                                                     <div class="f-column g-10">
  4514.                                                         <label class="macroRow">
  4515.                                                           <span class="text">Rapid Feed</span>
  4516.                                                           <input type="text" name="rapidFeed" id="modinput1" class="keybinding" value="${
  4517.                 modSettings.macros
  4518.                     .keys
  4519.                     .rapidFeed ||
  4520.                 ''
  4521.             }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4522.                                                         </label>
  4523.                                                         <label class="macroRow">
  4524.                                                           <span class="text">Double Split</span>
  4525.                                                           <input type="text" name="splits.double" id="modinput2" class="keybinding" value="${
  4526.                 modSettings.macros
  4527.                     .keys.splits
  4528.                     .double || ''
  4529.             }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4530.                                                         </label>
  4531.                                                         <label class="macroRow">
  4532.                                                           <span class="text">Triple Split</span>
  4533.                                                           <input type="text" name="splits.triple" id="modinput3" class="keybinding" value="${
  4534.                 modSettings.macros
  4535.                     .keys.splits
  4536.                     .triple || ''
  4537.             }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4538.                                                         </label>
  4539.                                                         <label class="macroRow">
  4540.                                                           <span class="text">Respawn</span>
  4541.                                                           <input type="text" name="respawn" id="modinput16" class="keybinding" value="${
  4542.                 modSettings.macros
  4543.                     .keys
  4544.                     .respawn || ''
  4545.             }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4546.                                                         </label>
  4547.                                                     </div>
  4548.                                                     <div class="f-column g-10">
  4549.                                                         <label class="macroRow">
  4550.                                                           <span class="text">Quad Split</span>
  4551.                                                           <input type="text" name="splits.quad" id="modinput4" class="keybinding" value="${
  4552.                 modSettings.macros
  4553.                     .keys.splits
  4554.                     .quad || ''
  4555.             }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4556.                                                         </label>
  4557.                                                         <label class="macroRow">
  4558.                                                           <span class="text">Horizontal Line</span>
  4559.                                                           <input type="text" name="line.horizontal" id="modinput5" class="keybinding" value="${
  4560.                 modSettings.macros
  4561.                     .keys.line
  4562.                     .horizontal ||
  4563.                 ''
  4564.             }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4565.                                                         </label>
  4566.                                                         <label class="macroRow">
  4567.                                                           <span class="text">Vertical Line</span>
  4568.                                                           <input type="text" name="line.vertical" id="modinput8" class="keybinding" value="${
  4569.                 modSettings.macros
  4570.                     .keys.line
  4571.                     .vertical ||
  4572.                 ''
  4573.             }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4574.                                                         </label>
  4575.                                                         <label class="macroRow">
  4576.                                                           <span class="text">Fixed Line</span>
  4577.                                                           <input type="text" name="line.fixed" id="modinput18" class="keybinding" value="${
  4578.                 modSettings.macros
  4579.                     .keys.line
  4580.                     .fixed || ''
  4581.             }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4582.                                                         </label>
  4583.                                                     </div>
  4584.                                                 </div>
  4585.                                             </div>
  4586.                                         </div>
  4587.                                     </div>
  4588.                                     <div class="macros_wrapper">
  4589.                                         <span class="text-center f-big">Advanced Keybinding options</span>
  4590.                                         <div class="setting-card-wrapper">
  4591.                                             <div class="setting-card">
  4592.                                                 <div class="setting-card-action">
  4593.                                                     <span class="setting-card-name">Mouse macros</span>
  4594.                                                 </div>
  4595.                                             </div>
  4596.                                             <div class="setting-parameters" style="display: none;">
  4597.                                                 <div class="my-5">
  4598.                                                     <span class="stats-info-text">Feed or Split with mouse buttons</span>
  4599.                                                 </div>
  4600.                                                 <div class="stats-line justify-sb">
  4601.                                                     <span class="centerXY g-5">
  4602.                                                         Mouse Button 1
  4603.                                                         <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>
  4604.                                                     </span>
  4605.                                                     <select class="form-control macro-extanded_input" style="padding: 2px; text-align: left; width: 100px" id="m1_macroSelect">
  4606.                                                         <option value="none">None</option>
  4607.                                                         <option value="fastfeed">Fast Feed</option>
  4608.                                                         <option value="split">Split (1)</option>
  4609.                                                         <option value="split2">Double Split</option>
  4610.                                                         <option value="split3">Triple Split</option>
  4611.                                                         <option value="split4">Quad Split</option>
  4612.                                                         <option value="freeze">Horizontal Line</option>
  4613.                                                         <option value="dTrick">Double Trick</option>
  4614.                                                         <option value="sTrick">Self Trick</option>
  4615.                                                     </select>
  4616.                                                 </div>
  4617.                                                 <div class="stats-line justify-sb">
  4618.                                                     <span class="centerXY g-5">
  4619.                                                         Mouse Button 2
  4620.                                                         <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>
  4621.                                                     </span>
  4622.                                                     <select class="form-control" style="padding: 2px; text-align: left; width: 100px" id="m2_macroSelect">
  4623.                                                         <option value="none">None</option>
  4624.                                                         <option value="fastfeed">Fast Feed</option>
  4625.                                                         <option value="split">Split (1)</option>
  4626.                                                         <option value="split2">Double Split</option>
  4627.                                                         <option value="split3">Triple Split</option>
  4628.                                                         <option value="split4">Quad Split</option>
  4629.                                                         <option value="freeze">Horizontal Line</option>
  4630.                                                         <option value="dTrick">Double Trick</option>
  4631.                                                         <option value="sTrick">Self Trick</option>
  4632.                                                     </select>
  4633.                                                 </div>
  4634.                                             </div>
  4635.                                         </div>
  4636. 										<div class="setting-card-wrapper">
  4637.                                             <div class="setting-card">
  4638.                                                 <div class="setting-card-action">
  4639.                                                     <span class="setting-card-name">Rapid feed</span>
  4640.                                                 </div>
  4641.                                             </div>
  4642.  
  4643.                                             <div class="setting-parameters" style="display: none;">
  4644.                                                 <div class="my-5">
  4645.                                                     <span class="stats-info-text">Customize feeding</span>
  4646.                                                 </div>
  4647.                                                 <div class="stats-line justify-sb">
  4648.                                                     <span>Speed</span>
  4649. 													<div class="justify-sb g-5" style="width: 200px;">
  4650. 														<span class="mod_badge" id="macroSpeedText">${
  4651.                 modSettings.macros
  4652.                     .feedSpeed ||
  4653.                 '50'
  4654.             }ms</span>
  4655. 														<input
  4656. 															type="range"
  4657. 															class="modSlider"
  4658. 															id="macroSpeed"
  4659. 															min="5"
  4660. 															max="100"
  4661. 															value="${modSettings.macros.feedSpeed || 50}"
  4662. 															step="5"
  4663. 															style="width: 134px;"
  4664. 														/>
  4665. 													</div>
  4666.                                                 </div>
  4667.                                             </div>
  4668.                                         </div>
  4669.                                         <div class="setting-card-wrapper">
  4670.                                             <div class="setting-card">
  4671.                                                 <div class="setting-card-action">
  4672.                                                     <span class="setting-card-name">Linesplits</span>
  4673.                                                 </div>
  4674.                                             </div>
  4675.  
  4676.                                             <div class="setting-parameters" style="display: none;">
  4677.                                                 <div class="my-5">
  4678.                                                     <span class="stats-info-text">Customize linesplits</span>
  4679.                                                 </div>
  4680.  
  4681.                                                 <div class="stats-line justify-sb">
  4682.                                                     <span>Instant split</span>
  4683. 													<div class="centerXY g-5">
  4684. 														<span class="modDescText">Splits - </span>
  4685. 														<input type="text" class="modInput modNumberInput text-center" placeholder="0" title="Splits" style="width: 30px;" id="instant-split-amount" onclick="this.select()" />
  4686. 														<div class="modCheckbox">
  4687. 														  <input id="toggle-instant-split" type="checkbox" checked />
  4688. 														  <label class="cbx" for="toggle-instant-split"></label>
  4689. 														</div>
  4690. 													</div>
  4691.                                                 </div>
  4692.                                             </div>
  4693.                                         </div>
  4694.                                         <div class="setting-card-wrapper">
  4695.                                             <div class="setting-card">
  4696.                                                 <div class="setting-card-action">
  4697.                                                     <span class="setting-card-name">Toggle Settings</span>
  4698.                                                 </div>
  4699.                                             </div>
  4700.  
  4701.                                             <div class="setting-parameters" style="display: none;">
  4702.                                                 <div class="my-5">
  4703.                                                     <span class="stats-info-text">Toggle settings with a keybind.</span>
  4704.                                                 </div>
  4705.  
  4706.                                                 <div class="stats-line justify-sb">
  4707.                                                     <span>Toggle Menu</span>
  4708.                                                     <input type="text" name="toggle.menu" id="modinput6" class="keybinding" value="${
  4709.                 modSettings.macros.keys
  4710.                     .toggle.menu || ''
  4711.             }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4712.                                                 </div>
  4713.  
  4714.                                                 <div class="stats-line justify-sb">
  4715.                                                     <span>Toggle Names</span>
  4716.                                                     <input value="${
  4717.                 modSettings.macros.keys
  4718.                     .toggle.names || ''
  4719.             }" placeholder="..." readonly id="modinput11" name="toggle.names" class="keybinding" onfocus="this.select();">
  4720.                                                 </div>
  4721.  
  4722.                                                 <div class="stats-line justify-sb">
  4723.                                                     <span>Toggle Skins</span>
  4724.                                                     <input value="${
  4725.                 modSettings.macros.keys
  4726.                     .toggle.skins || ''
  4727.             }" placeholder="..." readonly id="modinput12" name="toggle.skins" class="keybinding" onfocus="this.select();">
  4728.                                                 </div>
  4729.  
  4730.                                                 <div class="stats-line justify-sb">
  4731.                                                 <span>Toggle Autorespawn</span>
  4732.                                                     <input value="${
  4733.                 modSettings.macros.keys
  4734.                     .toggle
  4735.                     .autoRespawn || ''
  4736.             }" placeholder="..." readonly id="modinput13" name="toggle.autoRespawn" class="keybinding" onfocus="this.select();">
  4737.                                                 </div>
  4738.                                             </div>
  4739.                                         </div>
  4740.                                         <div class="setting-card-wrapper">
  4741.                                             <div class="setting-card">
  4742.                                                 <div class="setting-card-action">
  4743.                                                     <span class="setting-card-name">Tricksplits</span>
  4744.                                                 </div>
  4745.                                             </div>
  4746.                                             <div class="setting-parameters" style="display: none;">
  4747.                                                 <div class="my-5">
  4748.                                                     <span class="stats-info-text">Other split options - splits with delay</span>
  4749.                                                 </div>
  4750.                                                 <div class="stats-line justify-sb">
  4751.                                                     <span>Double Trick</span>
  4752.                                                     <input value="${
  4753.                 modSettings.macros.keys
  4754.                     .splits
  4755.                     .doubleTrick || ''
  4756.             }" placeholder="..." readonly id="modinput14" name="splits.doubleTrick" class="keybinding" onfocus="this.select();">
  4757.                                                 </div>
  4758.                                                 <div class="stats-line justify-sb">
  4759.                                                     <span>Self Trick</span>
  4760.                                                     <input value="${
  4761.                 modSettings.macros.keys
  4762.                     .splits.selfTrick ||
  4763.                 ''
  4764.             }" placeholder="..." readonly id="modinput15" name="splits.selfTrick" class="keybinding" onfocus="this.select();">
  4765.                                                 </div>
  4766.                                             </div>
  4767.                                         </div>
  4768.                                     </div>
  4769.                                 </div>
  4770.                             </div>
  4771.                             <div class="mod_tab scroll" id="mod_game" style="display: none">
  4772.                                 <div class="modColItems">
  4773.                                     <div class="modRowItems" style="align-items: start;">
  4774.                                         <div class="modColItems_2">
  4775.                                             <span style="font-style: italic;">~ Game Colors</span>
  4776.                                             <div class="justify-sb w-100 p-5 rounded">
  4777.                                                 <span class="text">Map</span>
  4778.                                                 <div id="mapColor"></div>
  4779.                                             </div>
  4780.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4781.                                                 <span class="text">Border</span>
  4782.                                                 <div id="borderColor"></div>
  4783.                                             </div>
  4784.                                             <div class="justify-sb w-100 p-5 rounded">
  4785.                                                 <span class="text" title="Does not work with jelly physics">Food</span>
  4786.                                                 <div id="foodColor"></div>
  4787.                                             </div>
  4788.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4789.                                                 <span class="text" title="Does not work with jelly physics">Cells</span>
  4790.                                                 <div id="cellColor"></div>
  4791.                                             </div>
  4792.                                         </div>
  4793.                                         <div class="modColItems_2">
  4794.                                             <span style="font-style: italic;">~ Game Images</span>
  4795.                                             <div class="justify-sb w-100 p-5 rounded">
  4796.                                                 <span class="text">Map Image</span>
  4797.                                                 <button class="btn select-btn" id="mapImageSelect"></button>
  4798.                                             </div>
  4799.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4800.                                                 <span class="text">Virus Image</span>
  4801.                                                 <button class="btn select-btn" id="virusImageSelect"></button>
  4802.                                             </div>
  4803.                                             <div class="justify-sb w-100 p-5 rounded">
  4804.                                                 <span class="text">Replace Skins</span>
  4805.                                                 <button class="btn select-btn" id="skinReplaceSelect"></button>
  4806.                                             </div>
  4807.                                         </div>
  4808.                                     </div>
  4809.                                     <div class="modColItems_2">
  4810. 										<span style="font-style: italic;">~ Game Settings</span>
  4811. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4812. 											<span class="text">Font</span>
  4813. 											<div id="font-select-container"></div>
  4814. 										</div>
  4815. 										<div class="justify-sb w-100 p-10">
  4816. 											<span class="text">Names</span>
  4817. 											<div class="modCheckbox">
  4818. 											  <input id="mod-showNames" type="checkbox" ${
  4819.                 JSON.parse(
  4820.                     localStorage.getItem(
  4821.                         'settings'
  4822.                     )
  4823.                 )?.showNames
  4824.                     ? 'checked'
  4825.                     : ''
  4826.             } />
  4827. 											  <label class="cbx" for="mod-showNames"></label>
  4828. 											</div>
  4829. 										</div>
  4830. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4831. 											<span class="text">Skins</span>
  4832. 											<div class="modCheckbox">
  4833. 											  <input id="mod-showSkins" type="checkbox" ${
  4834.                 JSON.parse(
  4835.                     localStorage.getItem(
  4836.                         'settings'
  4837.                     )
  4838.                 )?.showSkins
  4839.                     ? 'checked'
  4840.                     : ''
  4841.             } />
  4842. 											  <label class="cbx" for="mod-showSkins"></label>
  4843. 											</div>
  4844. 										</div>
  4845. 										<div class="justify-sb w-100 p-10 rounded">
  4846. 											<span title="Long nicknames will be shorten on the leaderboard & ingame">Shorten names</span>
  4847. 											<div class="modCheckbox">
  4848. 											  <input id="shortenNames" type="checkbox" ${
  4849.                 modSettings.game
  4850.                     .shortenNames && 'checked'
  4851.             } />
  4852. 											  <label class="cbx" for="shortenNames"></label>
  4853. 											</div>
  4854. 										</div>
  4855. 										<div class="justify-sb w-100 accent_row p-10">
  4856. 											<span>Text outlines & shadows</span>
  4857. 											<div class="modCheckbox">
  4858. 											  <input id="removeOutlines" type="checkbox" ${
  4859.                 modSettings.gameShortenNames &&
  4860.                 'checked'
  4861.             } />
  4862. 											  <label class="cbx" for="removeOutlines"></label>
  4863. 											</div>
  4864. 										</div>
  4865. 										<div class="justify-sb w-100 rounded" style="padding: 5px 10px;">
  4866.                                         	<span class="text">Death screen Position</span>
  4867. 											<select id="deathScreenPos" class="form-control" style="width: 30%">
  4868. 												<option value="center" selected>Center</option>
  4869. 												<option value="left">Left</option>
  4870. 												<option value="right">Right</option>
  4871. 												<option value="top">Top</option>
  4872. 												<option value="bottom">Bottom</option>
  4873. 											</select>
  4874. 										</div>
  4875. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4876. 											<span class="text">Play timer</span>
  4877. 											<div class="modCheckbox">
  4878. 											  <input type="checkbox" id="playTimerToggle" ${
  4879.                 modSettings.settings
  4880.                     .playTimer && 'checked'
  4881.             } />
  4882. 											  <label class="cbx" for="playTimerToggle"></label>
  4883. 											</div>
  4884. 										</div>
  4885. 										<div class="justify-sb w-100 p-10 rounded">
  4886. 											<span class="text">Mouse tracker</span>
  4887. 											<div class="modCheckbox">
  4888. 											  <input type="checkbox" id="mouseTrackerToggle" ${
  4889.                 modSettings.settings
  4890.                     .mouseTracker && 'checked'
  4891.             } />
  4892. 											  <label class="cbx" for="mouseTrackerToggle"></label>
  4893. 											</div>
  4894. 										</div>
  4895.                                     </div>
  4896.                                     <div class="modRowItems justify-sb">
  4897.                                         <span class="text">Reset settings: </span>
  4898.                                         <button class="modButton-secondary" id="resetModSettings" type="button">Reset mod settings</button>
  4899.                                         <button class="modButton-secondary" id="resetGameSettings" type="button">Reset game settings</button>
  4900.                                     </div>
  4901.                                 </div>
  4902.                             </div>
  4903.  
  4904.                             <div class="mod_tab scroll" id="mod_name" style="display: none">
  4905.                             <div class="modColItems">
  4906.                                 <div class="modRowItems justify-sb" style="align-items: start;">
  4907.                                     <div class="f-column g-5" style="align-items: start; justify-content: start;">
  4908.                                         <span class="modTitleText">Name fonts & special characters</span>
  4909.                                         <span class="modDescText">Customize your name with special characters or fonts</span>
  4910.                                     </div>
  4911.                                     <div class="f-column g-5">
  4912.                                         <button class="modButton-secondary" onclick="window.open('https://nickfinder.com', '_blank')">Nickfinder</button>
  4913.                                         <button class="modButton-secondary" onclick="window.open('https://www.stylishnamemaker.com', '_blank')">Stylish Name</button>
  4914.                                         <button class="modButton-secondary" onclick="window.open('https://www.tell.wtf', '_blank')">Tell.wtf</button>
  4915.                                     </div>
  4916.                                 </div>
  4917.                                 <div class="modRowItems justify-sb">
  4918.                                     <div class="f-column g-5">
  4919.                                         <span class="modTitleText">Save names</span>
  4920.                                         <span class="modDescText">Save your names locally</span>
  4921.                                         <div class="flex g-5">
  4922.                                             <input class="modInput" placeholder="Enter a name..." id="saveNameValue" />
  4923.                                             <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>
  4924.                                         </div>
  4925.                                         <div id="savedNames" class="f-column scroll"></div>
  4926.                                     </div>
  4927.                                     <div class="vr"></div>
  4928.                                     <div class="f-column g-5">
  4929.                                         <span class="modTitleText">Name Color</span>
  4930.                                         <span class="modDescText">Customize your name color</span>
  4931.                                         <div class="justify-sb">
  4932.                                             <input type="color" value="#ffffff" id="nameColor" class="colorInput">
  4933.                                         </div>
  4934.                                         <span class="modTitleText">Gradient Name</span>
  4935.                                         <span class="modDescText">Customize your name with a gradient color</span>
  4936.                                         <div class="justify-sb">
  4937.                                             <div class="flex g-2" style="align-items: center">
  4938.                                                 <input type="color" value="#ffffff" id="gradientNameColor1" class="colorInput">
  4939.                                                 <span>➜ First color</span>
  4940.                                             </div>
  4941.                                         </div>
  4942.                                         <div class="justify-sb">
  4943.                                             <div class="flex g-2" style="align-items: center">
  4944.                                                 <input type="color" value="#ffffff" id="gradientNameColor2" class="colorInput">
  4945.                                                 <span>➜ Second color</span>
  4946.                                             </div>
  4947.                                         </div>
  4948.                                     </div>
  4949.                                 </div>
  4950.                             </div>
  4951.                             </div>
  4952.                             <div class="mod_tab scroll" id="mod_themes" style="display: none">
  4953. 								<span>Background presets</span>
  4954.                                 <div class="themes scroll" id="themes">
  4955.                                     <div class="theme" id="createTheme">
  4956.                                         <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>
  4957.                                         <div class="themeName text" style="color: #fff">Create</div>
  4958.                                     </div>
  4959.                                 </div>
  4960.  
  4961. 								<div class="modColItems_2" style="margin-top: 5px;">
  4962. 									<div class="justify-sb w-100 p-10">
  4963. 										<span>Input border radius</span>
  4964. 										<div class="centerXY g-10" style="width: 40%">
  4965.                                             <button id="reset_input_radius" class="resetButton"></button>
  4966.                                             <input type="range" class="modSlider" id="theme-inputBorderRadius" max="20" step="2" />
  4967.                                         </div>
  4968. 									</div>
  4969. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4970. 										<span>Menu border radius</span>
  4971.                                         <div class="centerXY g-10" style="width: 40%">
  4972.                                             <button id="reset_menu_radius" class="resetButton"></button>
  4973.                                             <input type="range" class="modSlider"id="theme-menuBorderRadius" max="50" step="2" />
  4974.                                         </div>
  4975. 									</div>
  4976. 									<div class="justify-sb w-100 p-10">
  4977. 										<span>Input border</span>
  4978. 										<div class="modCheckbox">
  4979. 										  <input id="theme-inputBorder" type="checkbox" />
  4980. 										  <label class="cbx" for="theme-inputBorder"></label>
  4981. 										</div>
  4982. 									</div>
  4983. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4984. 										<span>Challenges on deathscreen</span>
  4985. 										<div class="modCheckbox">
  4986. 										  <input id="showChallenges" type="checkbox" />
  4987. 										  <label class="cbx" for="showChallenges"></label>
  4988. 										</div>
  4989. 									</div>
  4990. 									<div class="justify-sb w-100 p-10">
  4991. 										<span>Remove shop popup</span>
  4992. 										<div class="modCheckbox">
  4993. 										  <input id="removeShopPopup" type="checkbox" />
  4994. 										  <label class="cbx" for="removeShopPopup"></label>
  4995. 										</div>
  4996. 									</div>
  4997. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4998. 										<span>Hide Discord Buttons</span>
  4999. 										<div class="modCheckbox">
  5000. 										  <input id="hideDiscordBtns" type="checkbox" />
  5001. 										  <label class="cbx" for="hideDiscordBtns"></label>
  5002. 										</div>
  5003. 									</div>
  5004. 									<div class="justify-sb w-100 p-10">
  5005. 										<span>Hide Language Buttons</span>
  5006. 										<div class="modCheckbox">
  5007. 										  <input id="hideLangs" type="checkbox" />
  5008. 										  <label class="cbx" for="hideLangs"></label>
  5009. 										</div>
  5010. 									</div>
  5011. 								</div>
  5012.                             </div>
  5013.                             <div class="mod_tab scroll" id="mod_gallery" style="display: none">
  5014. 								<div class="modColItems_2">
  5015. 									<label class="macroRow w-100">
  5016. 									  <span class="text">Keybind to save image</span>
  5017. 									  <input type="text" name="saveImage" id="modinput17" class="keybinding" value="${
  5018.                 modSettings.macros.keys.saveImage ||
  5019.                 ''
  5020.             }" maxlength="1" onfocus="this.select()" placeholder="..." />
  5021. 									</label>
  5022. 								</div>
  5023. 								<div class="modColItems_2">
  5024. 									<span>Image gallery</span>
  5025. 									<div class="flex g-5">
  5026. 										<button class="modButton" id="gallery-download">Download all</button>
  5027. 										<button class="modButton" id="gallery-delete">Delete all</button>
  5028. 									</div>
  5029. 									<div id="image-gallery"></div>
  5030. 								</div>
  5031.                             </div>
  5032.                             <div class="mod_tab scroll centerXY" id="mod_friends" style="display: none">
  5033.                                 <div class="centerXY f-big" style="margin-top: 10px;">Connect and discover new friends with SigMod.</div>
  5034.                                 <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>
  5035.  
  5036.                                 <div class="centerXY f-column g-5" style="height: 300px; width: 165px;">
  5037.                                     <button class="modButton-black" id="createAccount">
  5038.                                         <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>
  5039.                                         Create account
  5040.                                     </button>
  5041.                                     <button class="modButton-black" id="login">
  5042.                                         <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>
  5043.                                         Login
  5044.                                     </button>
  5045.                                 </div>
  5046.                             </div>
  5047.                             <div class="mod_tab scroll f-column g-5 text-center" id="mod_info" style="display: none">
  5048.                                 <div class="brand_wrapper">
  5049.                                     <img src="https://czrsd.com/static/sigmod/info_bg_2.jpeg" alt="Info background" class="brand_img" />
  5050.                                     <span>SigMod V${version} by Cursed</span>
  5051.                                 </div>
  5052.                                 <span>Thanks to</span>
  5053.                                 <ul class="brand_credits">
  5054. 									<li>Jb</li>
  5055. 									<li>Black</li>
  5056. 									<li>8y8x</li>
  5057. 									<li>Dreamz</li>
  5058. 									<li>Ultra</li>
  5059. 									<li>Xaris</li>
  5060. 									<li>Benzofury</li>
  5061. 								</ul>
  5062.                                 <p>for contributing to the mod’s evolution into what it is today.</p>
  5063.  
  5064. 								<div class="sigmod-community">
  5065. 									<div class="community-header">
  5066. 										Community
  5067. 									</div>
  5068. 									<div class="flex">
  5069. 										<div class="community-discord-logo">
  5070. 											<svg width="31" height="30" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top: 3px;">
  5071. 												<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>
  5072. 											</svg>
  5073. 										</div>
  5074. 										<div class="community-discord">
  5075. 											<a href="https://dsc.gg/sigmodz" target="_blank">dsc.gg/sigmodz</a>
  5076. 										</div>
  5077. 									</div>
  5078. 								</div>
  5079.                                 <div>
  5080.                                    Install <a href="https://greasyfork.org/scripts/483587-sigmally-fixes-v2" target="_blank">Sigmally Fixes</a> for better performance!
  5081.                                 </div>
  5082.  
  5083.                                 <div class="mt-auto flex f-column g-10">
  5084. 									<div class="brand_yt">
  5085. 										<div class="yt_wrapper" onclick="window.open('https://www.youtube.com/@sigmallyCursed')">
  5086. 											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="26" height="26">
  5087. 												<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>
  5088. 											</svg>
  5089. 											<span style="font-size: 16px;">Cursed</span>
  5090. 										</div>
  5091. 										<div class="yt_wrapper" onclick="window.open('https://www.youtube.com/@sigmally')">
  5092. 											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="26" height="26">
  5093. 												<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>
  5094. 											</svg>
  5095. 											<span style="font-size: 16px;">Sigmally</span>
  5096. 										</div>
  5097. 									</div>
  5098. 									<div class="w-100 centerXY">
  5099. 										<div class="justify-sb" style="width: 50%;">
  5100. 											<a href="https://mod.czrsd.com/" target="_blank">Website</a>
  5101. 											<a href="https://mod.czrsd.com/changelog" target="_blank">Changelog</a>
  5102. 											<a href="https://mod.czrsd.com/tos" target="_blank">Terms of Service</a>
  5103. 										</div>
  5104. 									</div>
  5105. 								</div>
  5106.                             </div>
  5107.                         </div>
  5108.                     </div>
  5109.                 </div>
  5110.             `;
  5111.             document.body.append(mod_menu);
  5112.  
  5113.             const styleTag = document.createElement('style');
  5114.             styleTag.innerHTML = this.style;
  5115.             document.head.append(styleTag);
  5116.  
  5117.             this.getSettings();
  5118.             this.smallMods();
  5119.             this.setInputActions();
  5120.  
  5121.             mod_menu.addEventListener('click', (event) => {
  5122.                 if (event.target.closest('.mod_menu_wrapper')) return;
  5123.  
  5124.                 mod_menu.style.opacity = 0;
  5125.                 setTimeout(() => {
  5126.                     mod_menu.style.display = 'none';
  5127.                 }, 300);
  5128.             });
  5129.  
  5130.             function openModTab(tabId) {
  5131.                 const allTabs = document.getElementsByClassName('mod_tab');
  5132.                 const allTabButtons = document.querySelectorAll('.mod_nav_btn');
  5133.  
  5134.                 for (const tab of allTabs) {
  5135.                     tab.style.opacity = 0;
  5136.                     setTimeout(() => {
  5137.                         tab.style.display = 'none';
  5138.                     }, 200);
  5139.                 }
  5140.  
  5141.                 allTabButtons.forEach((tabBtn) =>
  5142.                     tabBtn.classList.remove('mod_selected')
  5143.                 );
  5144.  
  5145.                 if (tabId === 'mod_gallery') {
  5146.                     mods.updateGallery();
  5147.                 }
  5148.  
  5149.                 const selectedTab = byId(tabId);
  5150.                 setTimeout(() => {
  5151.                     selectedTab.style.display = 'flex';
  5152.                     setTimeout(() => {
  5153.                         selectedTab.style.opacity = 1;
  5154.                     }, 10);
  5155.                 }, 200);
  5156.                 this.id && this.classList.add('mod_selected');
  5157.             }
  5158.  
  5159.             window.openModTab = openModTab;
  5160.  
  5161.             document.querySelectorAll('.mod_nav_btn').forEach((tabBtn) => {
  5162.                 tabBtn.addEventListener('click', function () {
  5163.                     openModTab.call(
  5164.                         this,
  5165.                         this.id.replace('tab_', 'mod_').replace('_btn', '')
  5166.                     );
  5167.                 });
  5168.             });
  5169.  
  5170.             const openMenu = document.querySelectorAll(
  5171.                 '#clans_and_settings button'
  5172.             )[1];
  5173.             openMenu.removeAttribute('onclick');
  5174.             openMenu.addEventListener('click', () => {
  5175.                 mod_menu.style.display = 'flex';
  5176.                 setTimeout(() => {
  5177.                     mod_menu.style.opacity = 1;
  5178.                 }, 10);
  5179.             });
  5180.  
  5181.             const closeModal = byId('closeBtn');
  5182.             closeModal.addEventListener('click', () => {
  5183.                 mod_menu.style.opacity = 0;
  5184.                 setTimeout(() => {
  5185.                     mod_menu.style.display = 'none';
  5186.                 }, 300);
  5187.             });
  5188.  
  5189.             const fontSelectContainer = document.querySelector(
  5190.                 '#font-select-container'
  5191.             );
  5192.  
  5193.             try {
  5194.                 const fonts = await this.getGoogleFonts();
  5195.  
  5196.                 const { container: selectElement, selectButton } =
  5197.                     this.render_sm_select(
  5198.                         'Select Font',
  5199.                         fonts,
  5200.                         { width: '200px' },
  5201.                         modSettings.game.font
  5202.                     );
  5203.  
  5204.                 const resetFont = document.createElement('button');
  5205.                 resetFont.classList.add('resetButton');
  5206.  
  5207.                 resetFont.addEventListener('click', () => {
  5208.                     if (modSettings.game.font === 'Ubuntu') return;
  5209.  
  5210.                     modSettings.game.font = 'Ubuntu';
  5211.                     updateStorage();
  5212.                     selectElement.value = 'Ubuntu';
  5213.  
  5214.                     // just change the text of the selectButton
  5215.                     selectButton.querySelector('span').textContent = 'Ubuntu';
  5216.                 });
  5217.  
  5218.                 const container = document.createElement('div');
  5219.                 container.classList.add('centerXY', 'g-5');
  5220.                 container.append(resetFont, selectElement);
  5221.  
  5222.                 selectElement.addEventListener('change', (e) => {
  5223.                     const font = e.detail;
  5224.                     const link = document.createElement('link');
  5225.                     link.href = `https://fonts.googleapis.com/css2?family=${font}&display=swap`;
  5226.                     link.rel = 'stylesheet';
  5227.                     document.head.appendChild(link);
  5228.  
  5229.                     modSettings.game.font = font;
  5230.                     updateStorage();
  5231.                 });
  5232.  
  5233.                 fontSelectContainer.replaceWith(container);
  5234.             } catch (e) {
  5235.                 fontSelectContainer.replaceWith(
  5236.                     "Couldn't load fonts, try again later."
  5237.                 );
  5238.                 console.error(e);
  5239.             }
  5240.  
  5241.             if (modSettings.game.font !== 'Ubuntu') {
  5242.                 const link = document.createElement('link');
  5243.                 link.href = `https://fonts.googleapis.com/css2?family=${modSettings.game.font}&display=swap`;
  5244.                 link.rel = 'stylesheet';
  5245.                 document.head.appendChild(link);
  5246.             }
  5247.  
  5248.             const macroSettings = () => {
  5249.                 const allSettingNames =
  5250.                       document.querySelectorAll('.setting-card-name');
  5251.  
  5252.                 for (const settingName of Object.values(allSettingNames)) {
  5253.                     settingName.addEventListener('click', (event) => {
  5254.                         const settingCardWrappers = document.querySelectorAll(
  5255.                             '.setting-card-wrapper'
  5256.                         );
  5257.                         const currentWrapper = Object.values(
  5258.                             settingCardWrappers
  5259.                         ).filter(
  5260.                             (wrapper) =>
  5261.                             wrapper.querySelector('.setting-card-name')
  5262.                             .textContent === settingName.textContent
  5263.                         )[0];
  5264.                         const settingParameters = currentWrapper.querySelector(
  5265.                             '.setting-parameters'
  5266.                         );
  5267.  
  5268.                         settingParameters.style.display =
  5269.                             settingParameters.style.display === 'none'
  5270.                             ? 'block'
  5271.                         : 'none';
  5272.                     });
  5273.                 }
  5274.             };
  5275.             macroSettings();
  5276.  
  5277.             const playTimerToggle = byId('playTimerToggle');
  5278.             playTimerToggle.addEventListener('change', () => {
  5279.                 modSettings.playTimer = playTimerToggle.checked;
  5280.                 updateStorage();
  5281.             });
  5282.  
  5283.             const mouseTrackerToggle = byId('mouseTrackerToggle');
  5284.             mouseTrackerToggle.addEventListener('change', () => {
  5285.                 modSettings.mouseTracker = mouseTrackerToggle.checked;
  5286.                 updateStorage();
  5287.             });
  5288.  
  5289.             const macroSpeed = byId('macroSpeed');
  5290.             const macroSpeedText = byId('macroSpeedText');
  5291.  
  5292.             macroSpeed.addEventListener('input', () => {
  5293.                 modSettings.macros.feedSpeed = macroSpeed.value;
  5294.                 macroSpeedText.textContent = `${modSettings.macros.feedSpeed.toString()}ms`;
  5295.                 updateStorage();
  5296.             });
  5297.  
  5298.             // Reset settings - Mod
  5299.             const resetModSettings = byId('resetModSettings');
  5300.             resetModSettings.addEventListener('click', () => {
  5301.                 if (
  5302.                     confirm(
  5303.                         'Are you sure you want to reset the mod settings? A reload is required.'
  5304.                     )
  5305.                 ) {
  5306.                     this.removeStorage(storageName);
  5307.                     location.reload();
  5308.                 }
  5309.             });
  5310.  
  5311.             // Reset settings - Game
  5312.             const resetGameSettings = byId('resetGameSettings');
  5313.             resetGameSettings.addEventListener('click', () => {
  5314.                 if (
  5315.                     confirm(
  5316.                         'Are you sure you want to reset the game settings? Your nick and more settings will be lost. A reload is required.'
  5317.                     )
  5318.                 ) {
  5319.                     window.settings.gameSettings = null;
  5320.                     this.removeStorage('settings');
  5321.                     location.reload();
  5322.                 }
  5323.             });
  5324.  
  5325.             // EventListeners for auth buttons
  5326.             const createAccountBtn = byId('createAccount');
  5327.             const loginBtn = byId('login');
  5328.  
  5329.             createAccountBtn.addEventListener('click', () => {
  5330.                 this.createSignInWrapper(false);
  5331.             });
  5332.             loginBtn.addEventListener('click', () => {
  5333.                 this.createSignInWrapper(true);
  5334.             });
  5335.         },
  5336.  
  5337.         render_sm_select(label, items, style = {}, defaultValue) {
  5338.             const createElement = (tag, styles, text = '') => {
  5339.                 const el = document.createElement(tag);
  5340.                 el.textContent = text;
  5341.                 Object.assign(el.style, styles);
  5342.                 return el;
  5343.             };
  5344.  
  5345.             const defaultcontainerStyles = {
  5346.                 position: 'relative',
  5347.                 display: 'inline-block',
  5348.             };
  5349.  
  5350.             const container = createElement('div', {
  5351.                 ...defaultcontainerStyles,
  5352.                 ...style,
  5353.             });
  5354.  
  5355.             const selectButton = document.createElement('div');
  5356.             selectButton.style.cssText =
  5357.                 '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;';
  5358.  
  5359.             selectButton.innerHTML = `
  5360.                <span>${label}</span>
  5361.                <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#000000" width="20">
  5362.                  <path fill="#fafafa" d="M13.098 8H6.902c-.751 0-1.172.754-.708 1.268L9.292 12.7c.36.399 1.055.399 1.416 0l3.098-3.433C14.27 8.754 13.849 8 13.098 8Z"></path>
  5363.                </svg>
  5364.             `;
  5365.  
  5366.             if (defaultValue && items.includes(defaultValue)) {
  5367.                 selectButton.innerHTML = `<span>${defaultValue}</span> ${
  5368.                     selectButton.innerHTML.split('</svg>')[1]
  5369.                 }`;
  5370.             }
  5371.  
  5372.             container.appendChild(selectButton);
  5373.  
  5374.             const dropdown = createElement('div', {
  5375.                 display: 'none',
  5376.                 position: 'absolute',
  5377.                 background: '#111',
  5378.                 color: '#fafafa',
  5379.                 borderRadius: '0 0 10px 10px',
  5380.                 padding: '5px 0',
  5381.                 zIndex: '999999',
  5382.                 maxHeight: '200px',
  5383.                 overflowY: 'auto',
  5384.             });
  5385.  
  5386.             const searchBox = createElement('input', {
  5387.                 width: '100%',
  5388.                 padding: '5px',
  5389.                 marginBottom: '5px',
  5390.                 background: '#222',
  5391.                 border: 'none',
  5392.                 color: '#fff',
  5393.             });
  5394.             searchBox.placeholder = 'Search...';
  5395.  
  5396.             dropdown.append(searchBox);
  5397.  
  5398.             items.forEach((item) => {
  5399.                 const option = createElement(
  5400.                     'div',
  5401.                     { padding: '5px', cursor: 'pointer' },
  5402.                     item
  5403.                 );
  5404.                 option.onclick = () => {
  5405.                     selectButton.innerHTML = `
  5406.                         <span>${item}</span>
  5407.                         <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#000000" width="20">
  5408.                           <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>
  5409.                         </svg>`;
  5410.                     dropdown.style.display = 'none';
  5411.                     container.dispatchEvent(
  5412.                         new CustomEvent('change', { detail: item })
  5413.                     );
  5414.                 };
  5415.                 option.onmouseover = (e) =>
  5416.                     (e.target.style.background = '#555');
  5417.                 option.onmouseout = (e) =>
  5418.                     (e.target.style.background = 'transparent');
  5419.                 dropdown.append(option);
  5420.             });
  5421.  
  5422.             container.append(dropdown);
  5423.  
  5424.             selectButton.onclick = () => {
  5425.                 dropdown.style.display =
  5426.                     dropdown.style.display === 'none' ? 'block' : 'none';
  5427.             };
  5428.  
  5429.             document.onclick = (e) => {
  5430.                 if (!container.contains(e.target))
  5431.                     dropdown.style.display = 'none';
  5432.             };
  5433.  
  5434.             searchBox.addEventListener('input', () => {
  5435.                 const filter = searchBox.value.toLowerCase();
  5436.                 Array.from(dropdown.children)
  5437.                     .slice(1)
  5438.                     .forEach((item) => {
  5439.                         item.style.display = item.textContent
  5440.                             .toLowerCase()
  5441.                             .includes(filter)
  5442.                             ? 'block'
  5443.                             : 'none';
  5444.                     });
  5445.             });
  5446.  
  5447.             return { container, selectButton };
  5448.         },
  5449.  
  5450.         setProfile(user) {
  5451.             const img = byId('my-profile-img');
  5452.             const name = byId('my-profile-name');
  5453.             const role = byId('my-profile-role');
  5454.             const bioText = byId('my-profile-bio');
  5455.             const badges = byId('my-profile-badges');
  5456.  
  5457.             const bio = user.bio ? user.bio : 'No bio.';
  5458.  
  5459.             img.src = user.imageURL;
  5460.             name.innerText = user.username;
  5461.             role.innerText = user.role;
  5462.             bioText.innerHTML = bio;
  5463.             badges.innerHTML =
  5464.                 user.badges && user.badges.length > 0
  5465.                     ? user.badges
  5466.                         .map(
  5467.                             (badge) =>
  5468.                                 `<span class="mod_badge">${badge}</span>`
  5469.                         )
  5470.                         .join('')
  5471.                     : '<span>User has no badges.</span>';
  5472.  
  5473.             role.classList.add(`${user.role}_role`);
  5474.         },
  5475.  
  5476.         getSettings() {
  5477.             const mod_qaccess = document.querySelector('#mod_qaccess');
  5478.             const settingsGrid = document.querySelector(
  5479.                 '#settings > .checkbox-grid'
  5480.             );
  5481.             const settingsNames =
  5482.                 settingsGrid.querySelectorAll('label:not([class])');
  5483.             const inputs = settingsGrid.querySelectorAll('input');
  5484.  
  5485.             inputs.forEach((checkbox, index) => {
  5486.                 if (
  5487.                     checkbox.id === 'showChat' ||
  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 === 'showPosition' ||
  5497.                     checkbox.id === 'showNames' ||
  5498.                     checkbox.id === 'showSkins'
  5499.                 ) {
  5500.                     modrow.style.display = 'none';
  5501.                 }
  5502.  
  5503.                 modrow.innerHTML = `
  5504.                     <span>${settingsNames[index].textContent}</span>
  5505.                     <div class="modCheckbox" id="${checkbox.id}_wrapper"></div>
  5506.                 `;
  5507.                 mod_qaccess.append(modrow);
  5508.  
  5509.                 const cbWrapper = byId(`${checkbox.id}_wrapper`);
  5510.                 cbWrapper.appendChild(checkbox);
  5511.  
  5512.                 cbWrapper.appendChild(
  5513.                     Object.assign(document.createElement('label'), {
  5514.                         classList: ['cbx'],
  5515.                         htmlFor: checkbox.id,
  5516.                     })
  5517.                 );
  5518.             });
  5519.         },
  5520.  
  5521.         themes() {
  5522.             const elements = [
  5523.                 '#menu',
  5524.                 '#title',
  5525.                 '.top-users__inner',
  5526.                 '#left-menu',
  5527.                 '.menu-links',
  5528.                 '.menu--stats-mode',
  5529.                 '#left_ad_block',
  5530.                 '#ad_bottom',
  5531.                 '.ad-block',
  5532.                 '#left_ad_block > .right-menu',
  5533.                 '#text-block > .right-menu',
  5534.                 '#sigma-pass .connecting__content',
  5535.                 '#sigma-status',
  5536.                 '.alert',
  5537.             ];
  5538.  
  5539.             const customTextElements = [
  5540.                 '#challenge-coins .alert-heading',
  5541.                 '#sigma-pass h3',
  5542.                 '.alert *',
  5543.             ];
  5544.  
  5545.             let checkInterval;
  5546.             const appliedElements = new Set();
  5547.  
  5548.             window.themeElements = elements;
  5549.  
  5550.             const themeEditor = document.createElement('div');
  5551.             themeEditor.classList.add('themeEditor');
  5552.             themeEditor.style.display = 'none';
  5553.  
  5554.             themeEditor.innerHTML = `
  5555.                 <div class="theme_editor_header">
  5556.                     <h3>Theme Editor</h3>
  5557.                     <button class="btn closeBtn" id="closeThemeEditor">
  5558.                         <svg width="22" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  5559.                             <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>
  5560.                         </svg>
  5561.                     </button>
  5562.                 </div>
  5563.                 <hr />
  5564.                 <main class="theme_editor_content">
  5565.                     <div class="centerXY" style="justify-content: flex-end;gap: 10px">
  5566.                         <span class="text">Select Theme Type: </span>
  5567.                         <select class="form-control" style="background: #222; color: #fff; width: 150px" id="theme-type-select">
  5568.                             <option>Static Color</option>
  5569.                             <option>Gradient</option>
  5570.                             <option>Image / Gif</option>
  5571.                         </select>
  5572.                     </div>
  5573.  
  5574.                     <div id="theme_editor_color" class="theme-editor-tab">
  5575.                         <div class="centerXY">
  5576.                             <label for="theme-editor-bgcolorinput" class="text">Background color:</label>
  5577.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-bgcolorinput"/>
  5578.                         </div>
  5579.                         <div class="centerXY">
  5580.                             <label for="theme-editor-colorinput" class="text">Text color:</label>
  5581.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-colorinput"/>
  5582.                         </div>
  5583.                         <div style="background-color: #000000" class="themes_preview" id="color_preview">
  5584.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5585.                         </div>
  5586.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5587.                             <input type="text" class="form-control" style="background: #222; color: #fff;" maxlength="15" placeholder="Theme name..." id="colorThemeName"/>
  5588.                             <button class="btn btn-success" id="saveColorTheme">Save</button>
  5589.                         </div>
  5590.                     </div>
  5591.  
  5592.  
  5593.                     <div id="theme_editor_gradient" class="theme-editor-tab" style="display: none;">
  5594.                         <div class="centerXY">
  5595.                             <label for="theme-editor-gcolor1" class="text">Color 1:</label>
  5596.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-gcolor1"/>
  5597.                         </div>
  5598.                         <div class="centerXY">
  5599.                             <label for="theme-editor-g_color" class="text">Color 2:</label>
  5600.                             <input type="color" value="#ffffff" class="colorInput whiteBorder_colorInput" id="theme-editor-g_color"/>
  5601.                         </div>
  5602.                         <div class="centerXY">
  5603.                             <label for="theme-editor-gcolor2" class="text">Text Color:</label>
  5604.                             <input type="color" value="#ffffff" class="colorInput whiteBorder_colorInput" id="theme-editor-gcolor2"/>
  5605.                         </div>
  5606.  
  5607.                         <div class="centerXY" style="gap: 10px">
  5608.                             <label for="gradient-type" class="text">Gradient Type:</label>
  5609.                             <select id="gradient-type" class="form-control" style="background: #222; color: #fff; width: 120px;">
  5610.                                 <option value="linear">Linear</option>
  5611.                                 <option value="radial">Radial</option>
  5612.                             </select>
  5613.                         </div>
  5614.  
  5615.                         <div id="theme-editor-gradient_angle" class="centerY" style="gap: 10px; width: 100%">
  5616.                             <label for="g_angle" class="text" id="gradient_angle_text" style="width: 115px;">Angle (0deg):</label>
  5617.                             <input type="range" id="g_angle" value="0" min="0" max="360">
  5618.                         </div>
  5619.  
  5620.                         <div style="background: linear-gradient(0deg, #000, #fff)" class="themes_preview" id="gradient_preview">
  5621.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5622.                         </div>
  5623.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5624.                             <input type="text" class="form-control" style="background: #222; color: #fff;" placeholder="Theme name..." id="GradientThemeName"/>
  5625.                             <button class="btn btn-success" id="saveGradientTheme">Save</button>
  5626.                         </div>
  5627.                     </div>
  5628.  
  5629.                     <div id="theme_editor_image" class="theme-editor-tab" style="display: none">
  5630.                         <div class="centerXY">
  5631.                             <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"/>
  5632.                         </div>
  5633.                         <div class="centerXY" style="margin: 5px; gap: 5px;">
  5634.                             <label for="theme-editor-textcolorImage" class="text">Text Color: </label>
  5635.                             <input type="color" class="colorInput whiteBorder_colorInput" value="#ffffff" id="theme-editor-textcolorImage"/>
  5636.                         </div>
  5637.  
  5638.                         <div style="background: url('https://i.ibb.co/k6hn4v0/Galaxy-Example.png'); background-position: center; background-size: cover;" class="themes_preview" id="image_preview">
  5639.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5640.                         </div>
  5641.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5642.                             <input type="text" class="form-control" style="background: #222; color: #fff;" placeholder="Theme name..." id="imageThemeName"/>
  5643.                             <button class="btn btn-success" id="saveImageTheme">Save</button>
  5644.                         </div>
  5645.                     </div>
  5646.                 </main>
  5647.             `;
  5648.  
  5649.             document.body.append(themeEditor);
  5650.  
  5651.             setTimeout(() => {
  5652.                 document
  5653.                     .querySelectorAll('.stats-btn__share-btn')[1]
  5654.                     .querySelector('rect')
  5655.                     .remove();
  5656.  
  5657.                 const themeTypeSelect = byId('theme-type-select');
  5658.                 const colorTab = byId('theme_editor_color');
  5659.                 const gradientTab = byId('theme_editor_gradient');
  5660.                 const imageTab = byId('theme_editor_image');
  5661.                 const gradientAngleDiv = byId('theme-editor-gradient_angle');
  5662.  
  5663.                 themeTypeSelect.addEventListener('change', function () {
  5664.                     const selectedOption = themeTypeSelect.value;
  5665.                     switch (selectedOption) {
  5666.                         case 'Static Color':
  5667.                             colorTab.style.display = 'flex';
  5668.                             gradientTab.style.display = 'none';
  5669.                             imageTab.style.display = 'none';
  5670.                             break;
  5671.                         case 'Gradient':
  5672.                             colorTab.style.display = 'none';
  5673.                             gradientTab.style.display = 'flex';
  5674.                             imageTab.style.display = 'none';
  5675.                             break;
  5676.                         case 'Image / Gif':
  5677.                             colorTab.style.display = 'none';
  5678.                             gradientTab.style.display = 'none';
  5679.                             imageTab.style.display = 'flex';
  5680.                             break;
  5681.                         default:
  5682.                             colorTab.style.display = 'flex';
  5683.                             gradientTab.style.display = 'none';
  5684.                             imageTab.style.display = 'none';
  5685.                     }
  5686.                 });
  5687.  
  5688.                 const colorInputs = document.querySelectorAll(
  5689.                     '#theme_editor_color .colorInput'
  5690.                 );
  5691.                 colorInputs.forEach((input) => {
  5692.                     input.addEventListener('input', function () {
  5693.                         const bgColorInput = byId(
  5694.                             'theme-editor-bgcolorinput'
  5695.                         ).value;
  5696.                         const textColorInput = byId(
  5697.                             'theme-editor-colorinput'
  5698.                         ).value;
  5699.  
  5700.                         applyColorTheme(bgColorInput, textColorInput);
  5701.                     });
  5702.                 });
  5703.  
  5704.                 const gradientInputs = document.querySelectorAll(
  5705.                     '#theme_editor_gradient .colorInput'
  5706.                 );
  5707.                 gradientInputs.forEach((input) => {
  5708.                     input.addEventListener('input', function () {
  5709.                         const gColor1 = byId('theme-editor-gcolor1').value;
  5710.                         const gColor2 = byId('theme-editor-g_color').value;
  5711.                         const gTextColor = byId('theme-editor-gcolor2').value;
  5712.                         const gAngle = byId('g_angle').value;
  5713.                         const gradientType = byId('gradient-type').value;
  5714.  
  5715.                         applyGradientTheme(
  5716.                             gColor1,
  5717.                             gColor2,
  5718.                             gTextColor,
  5719.                             gAngle,
  5720.                             gradientType
  5721.                         );
  5722.                     });
  5723.                 });
  5724.  
  5725.                 const imageInputs = document.querySelectorAll(
  5726.                     '#theme_editor_image .colorInput'
  5727.                 );
  5728.                 imageInputs.forEach((input) => {
  5729.                     input.addEventListener('input', function () {
  5730.                         const imageLinkInput = byId(
  5731.                             'theme-editor-imagelink'
  5732.                         ).value;
  5733.                         const textColorImageInput = byId(
  5734.                             'theme-editor-textcolorImage'
  5735.                         ).value;
  5736.  
  5737.                         let img;
  5738.                         if (imageLinkInput === '') {
  5739.                             img = 'https://i.ibb.co/k6hn4v0/Galaxy-Example.png';
  5740.                         } else {
  5741.                             img = imageLinkInput;
  5742.                         }
  5743.                         applyImageTheme(img, textColorImageInput);
  5744.                     });
  5745.                 });
  5746.                 const image_preview = byId('image_preview');
  5747.                 const image_link = byId('theme-editor-imagelink');
  5748.  
  5749.                 let isWriting = false;
  5750.                 let timeoutId;
  5751.  
  5752.                 image_link.addEventListener('input', () => {
  5753.                     if (!isWriting) {
  5754.                         isWriting = true;
  5755.                     } else {
  5756.                         clearTimeout(timeoutId);
  5757.                     }
  5758.  
  5759.                     timeoutId = setTimeout(() => {
  5760.                         const imageLinkInput = image_link.value;
  5761.                         const textColorImageInput = byId(
  5762.                             'theme-editor-textcolorImage'
  5763.                         ).value;
  5764.  
  5765.                         let img;
  5766.                         if (imageLinkInput === '') {
  5767.                             img = 'https://i.ibb.co/k6hn4v0/Galaxy-Example.png';
  5768.                         } else {
  5769.                             img = imageLinkInput;
  5770.                         }
  5771.  
  5772.                         applyImageTheme(img, textColorImageInput);
  5773.                         isWriting = false;
  5774.                     }, 1000);
  5775.                 });
  5776.  
  5777.                 const gradientTypeSelect = byId('gradient-type');
  5778.                 const angleInput = byId('g_angle');
  5779.  
  5780.                 gradientTypeSelect.addEventListener('change', function () {
  5781.                     const selectedType = gradientTypeSelect.value;
  5782.                     gradientAngleDiv.style.display =
  5783.                         selectedType === 'linear' ? 'flex' : 'none';
  5784.  
  5785.                     const gColor1 = byId('theme-editor-gcolor1').value;
  5786.                     const gColor2 = byId('theme-editor-g_color').value;
  5787.                     const gTextColor = byId('theme-editor-gcolor2').value;
  5788.                     const gAngle = byId('g_angle').value;
  5789.  
  5790.                     applyGradientTheme(
  5791.                         gColor1,
  5792.                         gColor2,
  5793.                         gTextColor,
  5794.                         gAngle,
  5795.                         selectedType
  5796.                     );
  5797.                 });
  5798.  
  5799.                 angleInput.addEventListener('input', function () {
  5800.                     const gradient_angle_text = byId('gradient_angle_text');
  5801.                     gradient_angle_text.innerText = `Angle (${angleInput.value}deg): `;
  5802.                     const gColor1 = byId('theme-editor-gcolor1').value;
  5803.                     const gColor2 = byId('theme-editor-g_color').value;
  5804.                     const gTextColor = byId('theme-editor-gcolor2').value;
  5805.                     const gAngle = byId('g_angle').value;
  5806.                     const gradientType = byId('gradient-type').value;
  5807.  
  5808.                     applyGradientTheme(
  5809.                         gColor1,
  5810.                         gColor2,
  5811.                         gTextColor,
  5812.                         gAngle,
  5813.                         gradientType
  5814.                     );
  5815.                 });
  5816.  
  5817.                 function applyColorTheme(bgColor, textColor) {
  5818.                     const previewDivs = document.querySelectorAll(
  5819.                         '#theme_editor_color .themes_preview'
  5820.                     );
  5821.                     previewDivs.forEach((previewDiv) => {
  5822.                         previewDiv.style.backgroundColor = bgColor;
  5823.                         const textSpan = previewDiv.querySelector('span.text');
  5824.                         textSpan.style.color = textColor;
  5825.                     });
  5826.                 }
  5827.  
  5828.                 function applyGradientTheme(
  5829.                     gColor1,
  5830.                     gColor2,
  5831.                     gTextColor,
  5832.                     gAngle,
  5833.                     gradientType
  5834.                 ) {
  5835.                     const previewDivs = document.querySelectorAll(
  5836.                         '#theme_editor_gradient .themes_preview'
  5837.                     );
  5838.                     previewDivs.forEach((previewDiv) => {
  5839.                         const gradient =
  5840.                             gradientType === 'linear'
  5841.                                 ? `linear-gradient(${gAngle}deg, ${gColor1}, ${gColor2})`
  5842.                                 : `radial-gradient(circle, ${gColor1}, ${gColor2})`;
  5843.                         previewDiv.style.background = gradient;
  5844.                         const textSpan = previewDiv.querySelector('span.text');
  5845.                         textSpan.style.color = gTextColor;
  5846.                     });
  5847.                 }
  5848.  
  5849.                 function applyImageTheme(imageLink, textColor) {
  5850.                     const previewDivs = document.querySelectorAll(
  5851.                         '#theme_editor_image .themes_preview'
  5852.                     );
  5853.                     previewDivs.forEach((previewDiv) => {
  5854.                         previewDiv.style.backgroundImage = `url('${imageLink}')`;
  5855.                         const textSpan = previewDiv.querySelector('span.text');
  5856.                         textSpan.style.color = textColor;
  5857.                     });
  5858.                 }
  5859.  
  5860.                 const createTheme = byId('createTheme');
  5861.                 createTheme.addEventListener('click', () => {
  5862.                     themeEditor.style.display = 'block';
  5863.                 });
  5864.  
  5865.                 const closeThemeEditor = byId('closeThemeEditor');
  5866.                 closeThemeEditor.addEventListener('click', () => {
  5867.                     themeEditor.style.display = 'none';
  5868.                 });
  5869.  
  5870.                 let themesDiv = byId('themes');
  5871.  
  5872.                 const saveColorThemeBtn = byId('saveColorTheme');
  5873.                 const saveGradientThemeBtn = byId('saveGradientTheme');
  5874.                 const saveImageThemeBtn = byId('saveImageTheme');
  5875.  
  5876.                 saveColorThemeBtn.addEventListener('click', () => {
  5877.                     const name = byId('colorThemeName').value;
  5878.                     const bgColorInput = byId(
  5879.                         'theme-editor-bgcolorinput'
  5880.                     ).value;
  5881.                     const textColorInput = byId(
  5882.                         'theme-editor-colorinput'
  5883.                     ).value;
  5884.  
  5885.                     if (name === '') return;
  5886.  
  5887.                     const theme = {
  5888.                         name: name,
  5889.                         background: bgColorInput,
  5890.                         text: textColorInput,
  5891.                     };
  5892.  
  5893.                     const themeCard = document.createElement('div');
  5894.                     themeCard.classList.add('theme');
  5895.                     let themeBG;
  5896.                     if (theme.background.includes('http')) {
  5897.                         themeBG = `background: url(${
  5898.                             theme.preview || theme.background
  5899.                         })`;
  5900.                     } else {
  5901.                         themeBG = `background: ${theme.background}`;
  5902.                     }
  5903.                     themeCard.innerHTML = `
  5904.                         <div class="themeContent" style="${themeBG}; background-size: cover; background-position: center"></div>
  5905.                         <div class="themeName text" style="color: #fff">${theme.name}</div>
  5906.                     `;
  5907.  
  5908.                     themeCard.addEventListener('click', () => {
  5909.                         toggleTheme(theme);
  5910.                     });
  5911.  
  5912.                     themeCard.addEventListener('contextmenu', (ev) => {
  5913.                         ev.preventDefault();
  5914.                         if (confirm('Do you want to delete this Theme?')) {
  5915.                             themeCard.remove();
  5916.                             const themeIndex =
  5917.                                 modSettings.themes.custom.findIndex(
  5918.                                     (addedTheme) =>
  5919.                                         addedTheme.name === theme.name
  5920.                                 );
  5921.                             if (themeIndex !== -1) {
  5922.                                 modSettings.themes.custom.splice(themeIndex, 1);
  5923.                                 updateStorage();
  5924.                             }
  5925.                         }
  5926.                     });
  5927.  
  5928.                     themesDiv.appendChild(themeCard);
  5929.  
  5930.                     modSettings.themes.custom.push(theme);
  5931.                     updateStorage();
  5932.  
  5933.                     themeEditor.style.display = 'none';
  5934.                     themesDiv.scrollTop = themesDiv.scrollHeight;
  5935.                 });
  5936.  
  5937.                 saveGradientThemeBtn.addEventListener('click', () => {
  5938.                     const name = byId('GradientThemeName').value;
  5939.                     const gColor1 = byId('theme-editor-gcolor1').value;
  5940.                     const gColor2 = byId('theme-editor-g_color').value;
  5941.                     const gTextColor = byId('theme-editor-gcolor2').value;
  5942.                     const gAngle = byId('g_angle').value;
  5943.                     const gradientType = byId('gradient-type').value;
  5944.  
  5945.                     if (name === '') return;
  5946.  
  5947.                     let gradient_radial_linear = () => {
  5948.                         if (gradientType === 'linear') {
  5949.                             return `${gradientType}-gradient(${gAngle}deg, ${gColor1}, ${gColor2})`;
  5950.                         } else if (gradientType === 'radial') {
  5951.                             return `${gradientType}-gradient(circle, ${gColor1}, ${gColor2})`;
  5952.                         }
  5953.                     };
  5954.                     const theme = {
  5955.                         name: name,
  5956.                         background: gradient_radial_linear(),
  5957.                         text: gTextColor,
  5958.                     };
  5959.  
  5960.                     const themeCard = document.createElement('div');
  5961.                     themeCard.classList.add('theme');
  5962.                     let themeBG;
  5963.                     if (theme.background.includes('http')) {
  5964.                         themeBG = `background: url(${
  5965.                             theme.preview || theme.background
  5966.                         })`;
  5967.                     } else {
  5968.                         themeBG = `background: ${theme.background}`;
  5969.                     }
  5970.                     themeCard.innerHTML = `
  5971.                         <div class="themeContent" style="${themeBG}; background-size: cover; background-position: center"></div>
  5972.                         <div class="themeName text" style="color: #fff">${theme.name}</div>
  5973.                     `;
  5974.  
  5975.                     themeCard.addEventListener('click', () => {
  5976.                         toggleTheme(theme);
  5977.                     });
  5978.  
  5979.                     themeCard.addEventListener('contextmenu', (ev) => {
  5980.                         ev.preventDefault();
  5981.                         if (confirm('Do you want to delete this Theme?')) {
  5982.                             themeCard.remove();
  5983.                             const themeIndex =
  5984.                                 modSettings.themes.custom.findIndex(
  5985.                                     (addedTheme) =>
  5986.                                         addedTheme.name === theme.name
  5987.                                 );
  5988.                             if (themeIndex !== -1) {
  5989.                                 modSettings.themes.custom.splice(themeIndex, 1);
  5990.                                 updateStorage();
  5991.                             }
  5992.                         }
  5993.                     });
  5994.  
  5995.                     themesDiv.appendChild(themeCard);
  5996.  
  5997.                     modSettings.themes.custom.push(theme);
  5998.                     updateStorage();
  5999.  
  6000.                     themeEditor.style.display = 'none';
  6001.                     themesDiv.scrollTop = themesDiv.scrollHeight;
  6002.                 });
  6003.  
  6004.                 saveImageThemeBtn.addEventListener('click', () => {
  6005.                     const name = byId('imageThemeName').value;
  6006.                     const imageLink = byId('theme-editor-imagelink').value;
  6007.                     const textColorImageInput = byId(
  6008.                         'theme-editor-textcolorImage'
  6009.                     ).value;
  6010.  
  6011.                     if (name === '' || imageLink === '') return;
  6012.  
  6013.                     const theme = {
  6014.                         name: name,
  6015.                         background: imageLink,
  6016.                         text: textColorImageInput,
  6017.                     };
  6018.  
  6019.                     const themeCard = document.createElement('div');
  6020.                     themeCard.classList.add('theme');
  6021.                     let themeBG;
  6022.                     if (theme.background.includes('http')) {
  6023.                         themeBG = `background: url(${
  6024.                             theme.preview || theme.background
  6025.                         })`;
  6026.                     } else {
  6027.                         themeBG = `background: ${theme.background}`;
  6028.                     }
  6029.                     themeCard.innerHTML = `
  6030.                         <div class="themeContent" style="${themeBG}; background-size: cover; background-position: center"></div>
  6031.                         <div class="themeName text" style="color: #fff">${theme.name}</div>
  6032.                     `;
  6033.  
  6034.                     themeCard.addEventListener('click', () => {
  6035.                         toggleTheme(theme);
  6036.                     });
  6037.  
  6038.                     themeCard.addEventListener('contextmenu', (ev) => {
  6039.                         ev.preventDefault();
  6040.                         if (confirm('Do you want to delete this Theme?')) {
  6041.                             themeCard.remove();
  6042.                             const themeIndex =
  6043.                                 modSettings.themes.custom.findIndex(
  6044.                                     (addedTheme) =>
  6045.                                         addedTheme.name === theme.name
  6046.                                 );
  6047.                             if (themeIndex !== -1) {
  6048.                                 modSettings.themes.custom.splice(themeIndex, 1);
  6049.                                 updateStorage();
  6050.                             }
  6051.                         }
  6052.                     });
  6053.  
  6054.                     themesDiv.appendChild(themeCard);
  6055.  
  6056.                     modSettings.themes.custom.push(theme);
  6057.                     updateStorage();
  6058.  
  6059.                     themeEditor.style.display = 'none';
  6060.                     themesDiv.scrollTop = themesDiv.scrollHeight;
  6061.                 });
  6062.             });
  6063.  
  6064.             const b_inner = document.querySelector('.body__inner');
  6065.             let bodyColorElements = b_inner.querySelectorAll(
  6066.                 '.body__inner > :not(.body__inner), #s-skin-select-icon-text'
  6067.             );
  6068.  
  6069.             const toggleColor = (element, background, text) => {
  6070.                 let image = `url("${background}")`;
  6071.                 if (background.includes('http')) {
  6072.                     element.style.background = image;
  6073.                     element.style.backgroundPosition = 'center';
  6074.                     element.style.backgroundSize = 'cover';
  6075.                     element.style.backgroundRepeat = 'no-repeat';
  6076.                 } else {
  6077.                     element.style.background = background;
  6078.                     element.style.backgroundRepeat = 'no-repeat';
  6079.                 }
  6080.                 element.style.color = text;
  6081.             };
  6082.  
  6083.             const openSVG = document.querySelector(
  6084.                 '#clans_and_settings > Button:nth-of-type(2) > svg'
  6085.             );
  6086.             const openSVGPath = openSVG.querySelector('path');
  6087.             openSVG.setAttribute('width', '36');
  6088.             openSVG.setAttribute('height', '36');
  6089.  
  6090.             const applyThemeToElement = (el, theme) => {
  6091.                 if (el.matches('#title')) {
  6092.                     el.style.color = theme.text;
  6093.                 } else {
  6094.                     toggleColor(el, theme.background, theme.text);
  6095.                 }
  6096.                 appliedElements.add(el);
  6097.             };
  6098.  
  6099.             const toggleTheme = (theme) => {
  6100.                 try {
  6101.                     if (checkInterval) clearInterval(checkInterval);
  6102.                     appliedElements.clear();
  6103.  
  6104.                     const applyTheme = () => {
  6105.                         let allApplied = true;
  6106.  
  6107.                         elements.forEach((selector) => {
  6108.                             const elements =
  6109.                                 document.querySelectorAll(selector);
  6110.                             elements.forEach((el) => {
  6111.                                 if (el && !appliedElements.has(el)) {
  6112.                                     applyThemeToElement(el, theme);
  6113.                                     allApplied = false;
  6114.                                 }
  6115.                             });
  6116.                         });
  6117.  
  6118.                         customTextElements.forEach((qs) => {
  6119.                             document.querySelectorAll(qs).forEach((el) => {
  6120.                                 if (!appliedElements.has(el)) {
  6121.                                     el.style.setProperty(
  6122.                                         'color',
  6123.                                         theme.text,
  6124.                                         'important'
  6125.                                     );
  6126.                                     appliedElements.add(el);
  6127.                                     allApplied = false;
  6128.                                 }
  6129.                             });
  6130.                         });
  6131.  
  6132.                         bodyColorElements.forEach((el) => {
  6133.                             if (!appliedElements.has(el)) {
  6134.                                 el.style.color = theme.text;
  6135.                                 appliedElements.add(el);
  6136.                                 allApplied = false;
  6137.                             }
  6138.                         });
  6139.  
  6140.                         if (allApplied) {
  6141.                             clearInterval(checkInterval);
  6142.                             return;
  6143.                         }
  6144.  
  6145.                         const isBright = (color) => {
  6146.                             if (!color.startsWith('#') || color.length !== 7)
  6147.                                 return false;
  6148.                             const r = parseInt(color.slice(1, 3), 16);
  6149.                             const g = parseInt(color.slice(3, 5), 16);
  6150.                             const b = parseInt(color.slice(5, 7), 16);
  6151.                             return r * 0.299 + g * 0.587 + b * 0.114 > 186;
  6152.                         };
  6153.  
  6154.                         openSVGPath.setAttribute(
  6155.                             'fill',
  6156.                             isBright(theme.text) ? theme.text : '#222'
  6157.                         );
  6158.  
  6159.                         modSettings.themes.current = theme.name;
  6160.                         updateStorage();
  6161.                     };
  6162.  
  6163.                     checkInterval = setInterval(applyTheme, 100);
  6164.                 } catch (e) {
  6165.                     console.error(e);
  6166.                 }
  6167.             };
  6168.  
  6169.             const themes = (window.themes = {
  6170.                 defaults: [
  6171.                     {
  6172.                         name: 'Dark',
  6173.                         background: '#151515',
  6174.                         text: '#FFFFFF',
  6175.                     },
  6176.                     {
  6177.                         name: 'White',
  6178.                         background: '#ffffff',
  6179.                         text: '#000000',
  6180.                     },
  6181.                     {
  6182.                         name: 'Transparent',
  6183.                         background: 'rgba(0, 0, 0,0)',
  6184.                         text: '#FFFFFF',
  6185.                     },
  6186.                 ],
  6187.                 orderly: [
  6188.                     {
  6189.                         name: 'THC',
  6190.                         background: 'linear-gradient(160deg, #9BEC7A, #117500)',
  6191.                         text: '#000000',
  6192.                     },
  6193.                     {
  6194.                         name: '4 AM',
  6195.                         background: 'linear-gradient(160deg, #8B0AE1, #111)',
  6196.                         text: '#FFFFFF',
  6197.                     },
  6198.                     {
  6199.                         name: 'OTO',
  6200.                         background: 'linear-gradient(160deg, #A20000, #050505)',
  6201.                         text: '#FFFFFF',
  6202.                     },
  6203.                     {
  6204.                         name: 'Gaming',
  6205.                         background:
  6206.                             'https://i.ibb.co/DwKkQfh/BG-1-lower-quality.jpg',
  6207.                         text: '#FFFFFF',
  6208.                     },
  6209.                     {
  6210.                         name: 'Shapes',
  6211.                         background: 'https://i.ibb.co/h8TmVyM/BG-2.png',
  6212.                         preview:
  6213.                             'https://czrsd.com/static/sigmod/themes/BG-2.jpg',
  6214.                         text: '#FFFFFF',
  6215.                     },
  6216.                     {
  6217.                         name: 'Blue',
  6218.                         background: 'https://i.ibb.co/9yQBfWj/BG-3.png',
  6219.                         preview:
  6220.                             'https://czrsd.com/static/sigmod/themes/BG-3.jpg',
  6221.                         text: '#FFFFFF',
  6222.                     },
  6223.                     {
  6224.                         name: 'Blue - 2',
  6225.                         background: 'https://i.ibb.co/7RJvNCX/BG-4.png',
  6226.                         preview:
  6227.                             'https://czrsd.com/static/sigmod/themes/BG-4.jpg',
  6228.                         text: '#FFFFFF',
  6229.                     },
  6230.                     {
  6231.                         name: 'Purple',
  6232.                         background: 'https://i.ibb.co/vxY15Tv/BG-5.png',
  6233.                         preview:
  6234.                             'https://czrsd.com/static/sigmod/themes/BG-5.jpg',
  6235.                         text: '#FFFFFF',
  6236.                     },
  6237.                     {
  6238.                         name: 'Orange Blue',
  6239.                         background: 'https://i.ibb.co/99nfFBN/BG-6.png',
  6240.                         preview:
  6241.                             'https://czrsd.com/static/sigmod/themes/BG-6.jpg',
  6242.                         text: '#FFFFFF',
  6243.                     },
  6244.                     {
  6245.                         name: 'Gradient',
  6246.                         background: 'https://i.ibb.co/hWMLwLS/BG-7.png',
  6247.                         preview:
  6248.                             'https://czrsd.com/static/sigmod/themes/BG-7.jpg',
  6249.                         text: '#FFFFFF',
  6250.                     },
  6251.                     {
  6252.                         name: 'Sky',
  6253.                         background: 'https://i.ibb.co/P4XqDFw/BG-9.png',
  6254.                         preview:
  6255.                             'https://czrsd.com/static/sigmod/themes/BG-9.jpg',
  6256.                         text: '#000000',
  6257.                     },
  6258.                     {
  6259.                         name: 'Sunset',
  6260.                         background: 'https://i.ibb.co/0BVbYHC/BG-10.png',
  6261.                         preview:
  6262.                             'https://czrsd.com/static/sigmod/themes/BG-10.jpg',
  6263.                         text: '#FFFFFF',
  6264.                     },
  6265.                     {
  6266.                         name: 'Galaxy',
  6267.                         background: 'https://i.ibb.co/MsssDKP/Galaxy.png',
  6268.                         preview:
  6269.                             'https://czrsd.com/static/sigmod/themes/Galaxy.jpg',
  6270.                         text: '#FFFFFF',
  6271.                     },
  6272.                     {
  6273.                         name: 'Planet',
  6274.                         background: 'https://i.ibb.co/KLqWM32/Planet.png',
  6275.                         preview:
  6276.                             'https://czrsd.com/static/sigmod/themes/Planet.jpg',
  6277.                         text: '#FFFFFF',
  6278.                     },
  6279.                     {
  6280.                         name: 'colorful',
  6281.                         background: 'https://i.ibb.co/VqtB3TX/colorful.png',
  6282.                         preview:
  6283.                             'https://czrsd.com/static/sigmod/themes/colorful.jpg',
  6284.                         text: '#FFFFFF',
  6285.                     },
  6286.                     {
  6287.                         name: 'Sunset - 2',
  6288.                         background: 'https://i.ibb.co/TLp2nvv/Sunset.png',
  6289.                         preview:
  6290.                             'https://czrsd.com/static/sigmod/themes/Sunset.jpg',
  6291.                         text: '#FFFFFF',
  6292.                     },
  6293.                     {
  6294.                         name: 'Epic',
  6295.                         background: 'https://i.ibb.co/kcv4tvn/Epic.png',
  6296.                         preview:
  6297.                             'https://czrsd.com/static/sigmod/themes/Epic.jpg',
  6298.                         text: '#FFFFFF',
  6299.                     },
  6300.                     {
  6301.                         name: 'Galaxy - 2',
  6302.                         background: 'https://i.ibb.co/smRs6V0/galaxy.png',
  6303.                         preview:
  6304.                             'https://czrsd.com/static/sigmod/themes/galaxy2.jpg',
  6305.                         text: '#FFFFFF',
  6306.                     },
  6307.                     {
  6308.                         name: 'Cloudy',
  6309.                         background: 'https://i.ibb.co/MCW7Bcd/cloudy.png',
  6310.                         preview:
  6311.                             'https://czrsd.com/static/sigmod/themes/cloudy.jpg',
  6312.                         text: '#000000',
  6313.                     },
  6314.                 ],
  6315.             });
  6316.  
  6317.             function createThemeCard(theme) {
  6318.                 const themeCard = document.createElement('div');
  6319.                 themeCard.classList.add('theme');
  6320.                 let themeBG;
  6321.                 if (theme.background.includes('http')) {
  6322.                     themeBG = `background: url(${
  6323.                         theme.preview || theme.background
  6324.                     })`;
  6325.                 } else {
  6326.                     themeBG = `background: ${theme.background}`;
  6327.                 }
  6328.                 themeCard.innerHTML = `
  6329.                   <div class="themeContent" style="${themeBG}; background-size: cover; background-position: center"></div>
  6330.                   <div class="themeName text" style="color: #fff">${theme.name}</div>
  6331.                 `;
  6332.  
  6333.                 themeCard.addEventListener('click', () => {
  6334.                     toggleTheme(theme);
  6335.                 });
  6336.  
  6337.                 if (modSettings.themes.custom.includes(theme)) {
  6338.                     themeCard.addEventListener(
  6339.                         'contextmenu',
  6340.                         (ev) => {
  6341.                             ev.preventDefault();
  6342.                             if (confirm('Do you want to delete this Theme?')) {
  6343.                                 themeCard.remove();
  6344.                                 const themeIndex =
  6345.                                     modSettings.themes.custom.findIndex(
  6346.                                         (addedTheme) =>
  6347.                                             addedTheme.name === theme.name
  6348.                                     );
  6349.                                 if (themeIndex !== -1) {
  6350.                                     modSettings.themes.custom.splice(
  6351.                                         themeIndex,
  6352.                                         1
  6353.                                     );
  6354.                                     updateStorage();
  6355.                                 }
  6356.                             }
  6357.                         },
  6358.                         false
  6359.                     );
  6360.                 }
  6361.  
  6362.                 return themeCard;
  6363.             }
  6364.  
  6365.             const themesContainer = byId('themes');
  6366.  
  6367.             themes.defaults.forEach((theme) => {
  6368.                 const themeCard = createThemeCard(theme);
  6369.                 themesContainer.append(themeCard);
  6370.             });
  6371.  
  6372.             const orderlyThemes = [
  6373.                 ...themes.orderly,
  6374.                 ...modSettings.themes.custom,
  6375.             ];
  6376.             orderlyThemes.sort((a, b) => a.name.localeCompare(b.name));
  6377.             orderlyThemes.forEach((theme) => {
  6378.                 const themeCard = createThemeCard(theme);
  6379.                 themesContainer.appendChild(themeCard);
  6380.             });
  6381.  
  6382.             const savedTheme = modSettings.themes.current;
  6383.             if (savedTheme) {
  6384.                 let selectedTheme;
  6385.                 selectedTheme = themes.defaults.find(
  6386.                     (theme) => theme.name === savedTheme
  6387.                 );
  6388.                 if (!selectedTheme) {
  6389.                     selectedTheme =
  6390.                         themes.orderly.find(
  6391.                             (theme) => theme.name === savedTheme
  6392.                         ) ||
  6393.                         modSettings.themes.custom.find(
  6394.                             (theme) => theme.name === savedTheme
  6395.                         );
  6396.                 }
  6397.  
  6398.                 if (selectedTheme) {
  6399.                     toggleTheme(selectedTheme);
  6400.                 }
  6401.             }
  6402.  
  6403.             const inputBorderRadius = byId('theme-inputBorderRadius');
  6404.             const menuBorderRadius = byId('theme-menuBorderRadius');
  6405.             const inputBorder = byId('theme-inputBorder');
  6406.  
  6407.             function setCSS(key, value, targets, property) {
  6408.                 modSettings.themes[key] = value;
  6409.                 targets.forEach((target) => {
  6410.                     document
  6411.                         .querySelectorAll(target)
  6412.                         .forEach((el) => (el.style[property] = value));
  6413.                 });
  6414.                 updateStorage();
  6415.             }
  6416.  
  6417.             inputBorderRadius.value = modSettings.themes.inputBorderRadius
  6418.                 ? modSettings.themes.inputBorderRadius.replace('px', '')
  6419.                 : '4';
  6420.             menuBorderRadius.value = modSettings.themes.menuBorderRadius
  6421.                 ? modSettings.themes.menuBorderRadius.replace('px', '')
  6422.                 : '15';
  6423.             inputBorder.checked = modSettings.themes.inputBorder
  6424.                 ? modSettings.themes.inputBorder === '1px'
  6425.                 : '1px';
  6426.  
  6427.             setCSS(
  6428.                 'inputBorderRadius',
  6429.                 `${inputBorderRadius.value}px`,
  6430.                 ['.form-control'],
  6431.                 'borderRadius'
  6432.             );
  6433.             setCSS(
  6434.                 'menuBorderRadius',
  6435.                 `${menuBorderRadius.value}px`,
  6436.                 [...elements, '.text-block'],
  6437.                 'borderRadius'
  6438.             );
  6439.             setCSS(
  6440.                 'inputBorder',
  6441.                 inputBorder.checked ? '1px' : '0px',
  6442.                 ['.form-control'],
  6443.                 'borderWidth'
  6444.             );
  6445.  
  6446.             inputBorderRadius.addEventListener('input', () =>
  6447.                 setCSS(
  6448.                     'inputBorderRadius',
  6449.                     `${inputBorderRadius.value}px`,
  6450.                     ['.form-control'],
  6451.                     'borderRadius'
  6452.                 )
  6453.             );
  6454.             menuBorderRadius.addEventListener('input', () =>
  6455.                 setCSS(
  6456.                     'menuBorderRadius',
  6457.                     `${menuBorderRadius.value}px`,
  6458.                     [...elements, '.text-block'],
  6459.                     'borderRadius'
  6460.                 )
  6461.             );
  6462.             inputBorder.addEventListener('input', () =>
  6463.                 setCSS(
  6464.                     'inputBorder',
  6465.                     inputBorder.checked ? '1px' : '0px',
  6466.                     ['.form-control'],
  6467.                     'borderWidth'
  6468.                 )
  6469.             );
  6470.  
  6471.             const reset_input_radius = document.getElementById('reset_input_radius');
  6472.             const reset_menu_radius = document.getElementById('reset_menu_radius');
  6473.  
  6474.             reset_input_radius.addEventListener('click', () => {
  6475.                 const defaultBorderRadius = 4;
  6476.                 inputBorderRadius.value = defaultBorderRadius;
  6477.                 setCSS(
  6478.                     'inputBorderRadius',
  6479.                     `${defaultBorderRadius}px`,
  6480.                     ['.form-control'],
  6481.                     'borderRadius'
  6482.                 )
  6483.             });
  6484.  
  6485.             reset_menu_radius.addEventListener('click', () => {
  6486.                 const defaultBorderRadius = 15;
  6487.                 menuBorderRadius.value = defaultBorderRadius;
  6488.                 setCSS(
  6489.                     'menuBorderRadius',
  6490.                     `${defaultBorderRadius}px`,
  6491.                     [...elements, '.text-block'],
  6492.                     'borderRadius'
  6493.                 )
  6494.             });
  6495.  
  6496.  
  6497.             const hideDiscordBtns = document.getElementById('hideDiscordBtns');
  6498.             const dclinkdiv = document.getElementById('dclinkdiv');
  6499.  
  6500.             hideDiscordBtns.addEventListener('change', () => {
  6501.                 if (hideDiscordBtns.checked) {
  6502.                     dclinkdiv.classList.add('hidden_full');
  6503.                     modSettings.themes.hideDiscordBtns = true;
  6504.                 } else {
  6505.                     dclinkdiv.classList.remove('hidden_full');
  6506.                     modSettings.themes.hideDiscordBtns = false;
  6507.                 }
  6508.                 updateStorage();
  6509.             });
  6510.  
  6511.             if (modSettings.themes.hideDiscordBtns) {
  6512.                 dclinkdiv.classList.add('hidden_full');
  6513.                 hideDiscordBtns.checked = true;
  6514.             }
  6515.  
  6516.  
  6517.             const hideLangs = document.getElementById('hideLangs');
  6518.             const langsDiv = document.querySelector('.ch-lang');
  6519.  
  6520.             hideLangs.addEventListener('change', () => {
  6521.                 if (hideLangs.checked) {
  6522.                     langsDiv.classList.add('hidden_full');
  6523.                     modSettings.themes.hideLangs = true;
  6524.                 } else {
  6525.                     langsDiv.classList.remove('hidden_full');
  6526.                     modSettings.themes.hideLangs = false;
  6527.                 }
  6528.                 updateStorage();
  6529.             });
  6530.  
  6531.             if (modSettings.themes.hideLangs && langsDiv) {
  6532.                 langsDiv.classList.add('hidden_full');
  6533.                 hideLangs.checked = true;
  6534.             }
  6535.  
  6536.  
  6537.             const popup = byId('shop-popup');
  6538.             const removeShopPopup = byId('removeShopPopup');
  6539.             removeShopPopup.addEventListener('change', () => {
  6540.                 if (removeShopPopup.checked) {
  6541.                     popup.classList.add('hidden_full');
  6542.                     modSettings.settings.removeShopPopup = true;
  6543.                 } else {
  6544.                     popup.classList.remove('hidden_full');
  6545.                     modSettings.settings.removeShopPopup = false;
  6546.                 }
  6547.                 updateStorage();
  6548.             });
  6549.  
  6550.             if (modSettings.settings.removeShopPopup) {
  6551.                 popup.classList.add('hidden_full');
  6552.                 removeShopPopup.checked = true;
  6553.             }
  6554.         },
  6555.  
  6556.         chat() {
  6557.             // disable old chat
  6558.             setTimeout(() => {
  6559.                 const showChat = document.querySelector('#showChat');
  6560.                 if (showChat && showChat.checked) {
  6561.                     showChat.click();
  6562.                 }
  6563.                 if (showChat) {
  6564.                     showChat.remove();
  6565.                 }
  6566.             }, 300);
  6567.  
  6568.             // If someone uninstalls the mod, the chat is visible again
  6569.             window.addEventListener('beforeunload', () => {
  6570.                 localStorage.setItem(
  6571.                     'settings',
  6572.                     JSON.stringify({
  6573.                         ...JSON.parse(localStorage.getItem('settings')),
  6574.                         showChat: true,
  6575.                     })
  6576.                 );
  6577.             });
  6578.  
  6579.             const chatDiv = document.createElement('div');
  6580.             chatDiv.classList.add('modChat');
  6581.             chatDiv.innerHTML = `
  6582.                 <div class="modChat__inner">
  6583.                     <button id="scroll-down-btn" class="modButton">↓</button>
  6584.                     <div class="modchat-chatbuttons">
  6585.                         <button class="chatButton" id="mainchat">Main</button>
  6586.                         <button class="chatButton" id="partychat">Party</button>
  6587.                         <span class="tagText"></span>
  6588.                     </div>
  6589.                     <div id="mod-messages" class="scroll"></div>
  6590.                     <div id="chatInputContainer">
  6591.                         <input type="text" id="chatSendInput" class="chatInput" placeholder="message..." maxlength="250" minlength="1" />
  6592.                         <button class="chatButton" id="openChatSettings">
  6593.                             <svg width="15" height="15" viewBox="0 0 20 20" fill="#fff" xmlns="http://www.w3.org/2000/svg">
  6594.                                 <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>
  6595.                             </svg>
  6596.                         </button>
  6597.                         <button class="chatButton" id="openEmojiMenu">😎</button>
  6598.                         <button id="sendButton" class="chatButton">
  6599.                             Send
  6600.                             <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/send.svg" width="20" height="20" draggable="false"/>
  6601.                         </button>
  6602.                     </div>
  6603.                 </div>
  6604.             `;
  6605.             document.body.append(chatDiv);
  6606.  
  6607.             const chatContainer = byId('mod-messages');
  6608.             const scrollDownButton = byId('scroll-down-btn');
  6609.  
  6610.             chatContainer.addEventListener('scroll', () => {
  6611.                 if (
  6612.                     chatContainer.scrollHeight - chatContainer.scrollTop >
  6613.                     300
  6614.                 ) {
  6615.                     scrollDownButton.style.display = 'block';
  6616.                 }
  6617.                 if (
  6618.                     chatContainer.scrollHeight - chatContainer.scrollTop <
  6619.                     299 &&
  6620.                     scrollDownButton.style.display === 'block'
  6621.                 ) {
  6622.                     scrollDownButton.style.display = 'none';
  6623.                 }
  6624.             });
  6625.  
  6626.             scrollDownButton.addEventListener('click', () => {
  6627.                 chatContainer.scrollTop = chatContainer.scrollHeight;
  6628.             });
  6629.  
  6630.             const messageCount = chatContainer.children.length;
  6631.             const messageLimit = modSettings.chat.limit;
  6632.             if (messageCount > messageLimit) {
  6633.                 const messagesToRemove = messageCount - messageLimit;
  6634.                 for (let i = 0; i < messagesToRemove; i++) {
  6635.                     chatContainer.removeChild(chatContainer.firstChild);
  6636.                 }
  6637.             }
  6638.  
  6639.             const main = byId('mainchat');
  6640.             const party = byId('partychat');
  6641.             main.addEventListener('click', () => {
  6642.                 if (modSettings.chat.showClientChat) {
  6643.                     byId('mod-messages').innerHTML = '';
  6644.                     modSettings.chat.showClientChat = false;
  6645.                     updateStorage();
  6646.                 }
  6647.             });
  6648.             party.addEventListener('click', () => {
  6649.                 if (!modSettings.chat.showClientChat) {
  6650.                     modSettings.chat.showClientChat = true;
  6651.                     updateStorage();
  6652.                 }
  6653.                 const modMessages = byId('mod-messages');
  6654.                 if (!modSettings.settings.tag) {
  6655.                     modMessages.innerHTML = `
  6656.                         <div class="message">
  6657.                             <span>
  6658.                                 <span style="color: #5a44eb" class="message_name">[SERVER]</span>: You need to be in a tag to use the SigMod party chat.
  6659.                             </span>
  6660.                         </div>
  6661.                     `;
  6662.                 } else {
  6663.                     modMessages.innerHTML = `
  6664.                         <div class="message">
  6665.                             <span>
  6666.                                 <span style="color: #5a44eb" class="message_name">[SERVER]</span>: Welcome to the SigMod party chat!
  6667.                             </span>
  6668.                         </div>
  6669.                     `;
  6670.                 }
  6671.             });
  6672.  
  6673.             if (modSettings.chat.showClientChat) {
  6674.                 const modMessages = byId('mod-messages');
  6675.                 if (modMessages.children.length > 1) return;
  6676.                 modMessages.innerHTML = `
  6677.                     <div class="message">
  6678.                         <span>
  6679.                             <span style="color: #5a44eb" class="message_name">[SERVER]</span>: Welcome to the SigMod party chat!
  6680.                         </span>
  6681.                     </div>
  6682.                 `;
  6683.             }
  6684.  
  6685.             const text = byId('chatSendInput');
  6686.             const send = byId('sendButton');
  6687.  
  6688.             send.addEventListener('click', () => {
  6689.                 let val = text.value;
  6690.                 if (val === '') return;
  6691.  
  6692.                 if (modSettings.chat.showClientChat) {
  6693.                     // party chat message
  6694.                     client.send({
  6695.                         type: 'chat-message',
  6696.                         content: {
  6697.                             message: val,
  6698.                         },
  6699.                     });
  6700.                 } else {
  6701.                     // Sigmally chat message - split text into parts if message is
  6702.                     // longer than 15 characters.
  6703.                     if (val.length > 15) {
  6704.                         const parts = [];
  6705.                         let currentPart = '';
  6706.  
  6707.                         val.split(' ').forEach((word) => {
  6708.                             // Split the input value into individual words
  6709.                             if (currentPart.length + word.length + 1 <= 15) {
  6710.                                 // if adding the current word to the current part does not exceed the length limit
  6711.                                 currentPart += (currentPart ? ' ' : '') + word;
  6712.                                 // add the current word to the current part with a space separator
  6713.                             } else {
  6714.                                 // if adding the current word exceeds the length limit
  6715.                                 parts.push(currentPart);
  6716.                                 currentPart = word;
  6717.                             }
  6718.                         });
  6719.  
  6720.                         if (currentPart) {
  6721.                             // Push the last current part to the parts array
  6722.                             parts.push(currentPart);
  6723.                         }
  6724.  
  6725.                         let index = 0;
  6726.                         const sendPart = () => {
  6727.                             // If there are still parts left to send
  6728.                             if (index < parts.length) {
  6729.                                 window.sendChat(parts[index]);
  6730.                                 index++;
  6731.                                 setTimeout(sendPart, 1000); // 1s cooldown from sigmally
  6732.                             }
  6733.                         };
  6734.  
  6735.                         sendPart();
  6736.                     } else {
  6737.                         window.sendChat(val);
  6738.                     }
  6739.                 }
  6740.  
  6741.                 text.value = '';
  6742.                 text.blur();
  6743.             });
  6744.  
  6745.             this.chatSettings();
  6746.             this.emojiMenu();
  6747.             this.getBlockedChatData();
  6748.  
  6749.             const chatSettingsContainer = document.querySelector(
  6750.                 '.chatSettingsContainer'
  6751.             );
  6752.             const emojisContainer = document.querySelector('.emojisContainer');
  6753.  
  6754.             byId('openChatSettings').addEventListener('click', () => {
  6755.                 if (chatSettingsContainer.classList.contains('hidden_full')) {
  6756.                     chatSettingsContainer.classList.remove('hidden_full');
  6757.                     emojisContainer.classList.add('hidden_full');
  6758.                 } else {
  6759.                     chatSettingsContainer.classList.add('hidden_full');
  6760.                 }
  6761.             });
  6762.  
  6763.             const scrollUpButton = byId('scroll-down-btn');
  6764.             let focused = false;
  6765.             let typed = false;
  6766.  
  6767.             document.addEventListener('keydown', (e) => {
  6768.                 if (e.key === 'Enter' && text.value.length > 0) {
  6769.                     send.click();
  6770.                     focused = false;
  6771.                     scrollUpButton.click();
  6772.                 } else if (e.key === 'Enter') {
  6773.                     if (
  6774.                         document.activeElement.tagName === 'INPUT' ||
  6775.                         document.activeElement.tagName === 'TEXTAREA'
  6776.                     )
  6777.                         return;
  6778.  
  6779.                     focused ? text.blur() : text.focus();
  6780.                     focused = !focused;
  6781.                 }
  6782.             });
  6783.  
  6784.             text.addEventListener('input', () => {
  6785.                 typed = text.value.length > 1;
  6786.             });
  6787.  
  6788.             text.addEventListener('blur', () => {
  6789.                 focused = false;
  6790.             });
  6791.  
  6792.             text.addEventListener('keydown', (e) => {
  6793.                 const key = e.key.toLowerCase();
  6794.                 if (key === 'w') {
  6795.                     e.stopPropagation();
  6796.                 }
  6797.  
  6798.                 if (key === ' ') {
  6799.                     e.stopPropagation();
  6800.                 }
  6801.             });
  6802.  
  6803.             // switch to compact chat
  6804.             const chatElements = [
  6805.                 '.modChat',
  6806.                 '.emojisContainer',
  6807.                 '.chatSettingsContainer',
  6808.             ];
  6809.  
  6810.             const emojiBtn = byId('openEmojiMenu');
  6811.             const compactChat = byId('compactChat');
  6812.             compactChat.addEventListener('change', () => {
  6813.                 compactChat.checked ? compactMode() : defaultMode();
  6814.             });
  6815.  
  6816.             function compactMode() {
  6817.                 chatElements.forEach((querySelector) => {
  6818.                     const el = document.querySelector(querySelector);
  6819.                     if (el) {
  6820.                         el.classList.add('mod-compact');
  6821.                     }
  6822.                 });
  6823.                 emojiBtn.style.display = 'none';
  6824.  
  6825.                 modSettings.chat.compact = true;
  6826.                 updateStorage();
  6827.             }
  6828.  
  6829.             function defaultMode() {
  6830.                 chatElements.forEach((querySelector) => {
  6831.                     const el = document.querySelector(querySelector);
  6832.                     if (el) {
  6833.                         el.classList.remove('mod-compact');
  6834.                     }
  6835.                 });
  6836.                 emojiBtn.style.display = 'flex';
  6837.  
  6838.                 modSettings.chat.compact = false;
  6839.                 updateStorage();
  6840.             }
  6841.  
  6842.             if (modSettings.chat.compact) compactMode();
  6843.         },
  6844.  
  6845.         spamMessage(name, message) {
  6846.             return (
  6847.                 this.blockedChatData.names.some(n => name.toLowerCase().includes(n.toLowerCase())) ||
  6848.                 this.blockedChatData.messages.some(m => message.toLowerCase().includes(m.toLowerCase()))
  6849.             );
  6850.         },
  6851.  
  6852.         updateChat(data) {
  6853.             const chatContainer = byId('mod-messages');
  6854.             const isScrolledToBottom =
  6855.                 chatContainer.scrollHeight - chatContainer.scrollTop <=
  6856.                 chatContainer.clientHeight + 1;
  6857.             const isNearBottom =
  6858.                 chatContainer.scrollHeight - chatContainer.scrollTop - 200 <=
  6859.                 chatContainer.clientHeight;
  6860.  
  6861.             let { name, message, time = '' } = data;
  6862.             name = noXSS(name);
  6863.             message = noXSS(message);
  6864.             time = data.time !== null ? prettyTime.am_pm(data.time) : '';
  6865.  
  6866.             const color = this.friend_names.has(name)
  6867.                 ? this.friends_settings.highlight_color
  6868.                 : data.color || '#ffffff';
  6869.             const glow =
  6870.                 this.friend_names.has(name) &&
  6871.                 this.friends_settings.highlight_friends
  6872.                     ? `text-shadow: 0 1px 3px ${color}`
  6873.                     : '';
  6874.             const id = rdmString(12);
  6875.  
  6876.             const chatMessage = document.createElement('div');
  6877.             chatMessage.classList.add('message');
  6878.             chatMessage.innerHTML = `
  6879.                 <div class="centerXY" style="gap: 3px;">
  6880.                     <div class="flex">
  6881.                         <span style="color: ${color};${glow}" class="message_name" id="${id}">${name}</span>
  6882.                         <span>&#58;</span>
  6883.                     </div>
  6884.                     <span class="chatMessage-text">${message}</span>
  6885.                 </div>
  6886.                 <span class="time">${time}</span>
  6887.             `;
  6888.  
  6889.             chatContainer.append(chatMessage);
  6890.             if (isScrolledToBottom || isNearBottom)
  6891.                 chatContainer.scrollTop = chatContainer.scrollHeight;
  6892.  
  6893.             if (name === this.nick) return;
  6894.  
  6895.             const nameEl = byId(id);
  6896.             nameEl.addEventListener('mousedown', (e) =>
  6897.                 this.handleContextMenu(e, name)
  6898.             );
  6899.             nameEl.addEventListener('contextmenu', (e) => {
  6900.                 e.preventDefault();
  6901.                 e.stopPropagation();
  6902.             });
  6903.  
  6904.             if (++this.renderedMessages > this.maxChatMessages) {
  6905.                 chatContainer.removeChild(chatContainer.firstChild);
  6906.                 this.renderedMessages--;
  6907.             }
  6908.         },
  6909.  
  6910.         handleContextMenu(e, name) {
  6911.             if (this.onContext || e.button !== 2) return;
  6912.  
  6913.             const contextMenu = document.createElement('div');
  6914.             contextMenu.classList.add('chat-context');
  6915.             contextMenu.innerHTML = `
  6916.                 <span>${name}</span>
  6917.                 <button id="muteButton">Mute</button>
  6918.             `;
  6919.  
  6920.             Object.assign(contextMenu.style, {
  6921.                 top: `${e.clientY - 80}px`,
  6922.                 left: `${e.clientX}px`,
  6923.             });
  6924.  
  6925.             document.body.appendChild(contextMenu);
  6926.             this.onContext = true;
  6927.  
  6928.             byId('muteButton').addEventListener('click', () => {
  6929.                 const confirmMsg =
  6930.                     name === 'Spectator'
  6931.                         ? 'Are you sure you want to mute all spectators until you refresh the page?'
  6932.                         : `Are you sure you want to mute '${name}' until you refresh the page?`;
  6933.  
  6934.                 if (confirm(confirmMsg)) {
  6935.                     this.muteUser(name);
  6936.                     contextMenu.remove();
  6937.                 }
  6938.             });
  6939.  
  6940.             document.addEventListener('click', (event) => {
  6941.                 if (!contextMenu.contains(event.target)) {
  6942.                     this.onContext = false;
  6943.                     contextMenu.remove();
  6944.                 }
  6945.             });
  6946.         },
  6947.  
  6948.         muteUser(name) {
  6949.             this.mutedUsers.push(name);
  6950.  
  6951.             const msgNames = document.querySelectorAll('.message_name');
  6952.             msgNames.forEach((msgName) => {
  6953.                 if (msgName.innerHTML == name) {
  6954.                     const msgParent = msgName.closest('.message');
  6955.                     msgParent.remove();
  6956.                 }
  6957.             });
  6958.         },
  6959.  
  6960.         async getGoogleFonts() {
  6961.             const fontFamilies = await (
  6962.                 await fetch(this.appRoutes.fonts)
  6963.             ).json();
  6964.  
  6965.             return fontFamilies;
  6966.         },
  6967.  
  6968.         async getEmojis() {
  6969.             const response = await fetch(
  6970.                 'https://czrsd.com/static/sigmod/emojis.json'
  6971.             );
  6972.             return await response.json();
  6973.         },
  6974.  
  6975.         emojiMenu() {
  6976.             const updateEmojis = (searchTerm = '') => {
  6977.                 const emojisContainer =
  6978.                     document.querySelector('.emojisContainer');
  6979.                 const categoriesContainer =
  6980.                     emojisContainer.querySelector('#categories');
  6981.  
  6982.                 categoriesContainer.innerHTML = '';
  6983.                 window.emojis.forEach((emojiData) => {
  6984.                     const { emoji, description, category, tags } = emojiData;
  6985.                     if (
  6986.                         !searchTerm ||
  6987.                         tags.some((tag) =>
  6988.                             tag.includes(searchTerm.toLowerCase())
  6989.                         )
  6990.                     ) {
  6991.                         let categoryId = category
  6992.                             .replace(/\s+/g, '-')
  6993.                             .replace('&', 'and')
  6994.                             .toLowerCase();
  6995.                         let categoryDiv = categoriesContainer.querySelector(
  6996.                             `#${categoryId}`
  6997.                         );
  6998.                         if (!categoryDiv) {
  6999.                             categoryDiv = document.createElement('div');
  7000.                             categoryDiv.id = categoryId;
  7001.                             categoryDiv.classList.add('category');
  7002.                             categoryDiv.innerHTML = `<span>${category}</span><div class="emojiContainer"></div>`;
  7003.                             categoriesContainer.appendChild(categoryDiv);
  7004.                         }
  7005.                         const emojiContainer =
  7006.                             categoryDiv.querySelector('.emojiContainer');
  7007.                         const emojiDiv = document.createElement('div');
  7008.                         emojiDiv.classList.add('emoji');
  7009.                         emojiDiv.innerHTML = emoji;
  7010.                         emojiDiv.title = `${emoji} - ${description}`;
  7011.                         emojiDiv.addEventListener('click', () => {
  7012.                             const chatInput =
  7013.                                 document.querySelector('#chatSendInput');
  7014.                             chatInput.value += emoji;
  7015.                         });
  7016.                         emojiContainer.appendChild(emojiDiv);
  7017.                     }
  7018.                 });
  7019.             };
  7020.  
  7021.             const emojisContainer = document.createElement('div');
  7022.             emojisContainer.classList.add(
  7023.                 'chatAddedContainer',
  7024.                 'emojisContainer',
  7025.                 'hidden_full'
  7026.             );
  7027.             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>`;
  7028.  
  7029.             const chatInput = emojisContainer.querySelector('#searchEmoji');
  7030.             chatInput.addEventListener('input', (event) => {
  7031.                 const searchTerm = event.target.value.toLowerCase();
  7032.                 updateEmojis(searchTerm);
  7033.             });
  7034.  
  7035.             document.body.append(emojisContainer);
  7036.  
  7037.             const chatSettingsContainer = document.querySelector(
  7038.                 '.chatSettingsContainer'
  7039.             );
  7040.  
  7041.             byId('openEmojiMenu').addEventListener('click', () => {
  7042.                 if (!window.emojis) {
  7043.                     this.getEmojis().then((emojis) => {
  7044.                         window.emojis = emojis;
  7045.                         updateEmojis();
  7046.                     });
  7047.                 }
  7048.  
  7049.                 if (emojisContainer.classList.contains('hidden_full')) {
  7050.                     emojisContainer.classList.remove('hidden_full');
  7051.                     chatSettingsContainer.classList.add('hidden_full');
  7052.                 } else {
  7053.                     emojisContainer.classList.add('hidden_full');
  7054.                 }
  7055.             });
  7056.         },
  7057.  
  7058.         chatSettings() {
  7059.             const menu = document.createElement('div');
  7060.             menu.classList.add(
  7061.                 'chatAddedContainer',
  7062.                 'chatSettingsContainer',
  7063.                 'scroll',
  7064.                 'hidden_full'
  7065.             );
  7066.             menu.innerHTML = `
  7067.                 <div class="modInfoPopup" style="display: none">
  7068.                     <p>Send location in chat with keybind</p>
  7069.                 </div>
  7070.                 <div class="scroll">
  7071.                     <div class="csBlock">
  7072.                         <div class="csBlockTitle">
  7073.                             <span>Keybindings</span>
  7074.                         </div>
  7075.                         <div class="csRow">
  7076.                             <div class="csRowName">
  7077.                                 <span>Location</span>
  7078.                                 <span class="infoIcon">
  7079.                                     <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>
  7080.                                 </span>
  7081.                             </div>
  7082.                             <input type="text" name="location" id="modinput9" class="keybinding" value="${
  7083.                 modSettings.macros.keys.location || ''
  7084.             }" placeholder="..." maxlength="1" onfocus="this.select()">
  7085.                         </div>
  7086.                         <div class="csRow">
  7087.                             <div class="csRowName">
  7088.                                 <span>Show / Hide</span>
  7089.                             </div>
  7090.                             <input type="text" name="toggle.chat" id="modinput10" class="keybinding" value="${
  7091.                 modSettings.macros.keys.toggle.chat || ''
  7092.             }" placeholder="..." maxlength="1" onfocus="this.select()">
  7093.                         </div>
  7094.                     </div>
  7095.                     <div class="csBlock">
  7096.                         <div class="csBlockTitle">
  7097.                             <span>General</span>
  7098.                         </div>
  7099.                         <div class="csRow">
  7100.                             <div class="csRowName">
  7101.                                 <span>Time</span>
  7102.                             </div>
  7103.                             <div class="modCheckbox">
  7104.                               <input id="showChatTime" type="checkbox" checked />
  7105.                               <label class="cbx" for="showChatTime"></label>
  7106.                             </div>
  7107.                         </div>
  7108.                         <div class="csRow">
  7109.                             <div class="csRowName">
  7110.                                 <span>Name colors</span>
  7111.                             </div>
  7112.                             <div class="modCheckbox">
  7113.                               <input id="showNameColors" type="checkbox" checked />
  7114.                               <label class="cbx" for="showNameColors"></label>
  7115.                             </div>
  7116.                         </div>
  7117.                         <div class="csRow">
  7118.                             <div class="csRowName">
  7119.                                 <span>Party / Main</span>
  7120.                             </div>
  7121.                             <div class="modCheckbox">
  7122.                               <input id="showPartyMain" type="checkbox" checked />
  7123.                               <label class="cbx" for="showPartyMain"></label>
  7124.                             </div>
  7125.                         </div>
  7126.                         <div class="csRow">
  7127.                             <div class="csRowName">
  7128.                                 <span>Blur Tag</span>
  7129.                             </div>
  7130.                             <div class="modCheckbox">
  7131.                               <input id="blurTag" type="checkbox" checked />
  7132.                               <label class="cbx" for="blurTag"></label>
  7133.                             </div>
  7134.                         </div>
  7135.                         <div class="flex f-column g-5 centerXY" style="padding: 0 5px">
  7136.                             <div class="csRowName">
  7137.                                 <span>Location text</span>
  7138.                             </div>
  7139.                           <input type="text" id="locationText" placeholder="{pos}..." value="{pos}" class="form-control" />
  7140.                         </div>
  7141.                     </div>
  7142.                     <div class="csBlock">
  7143.                         <div class="csBlockTitle">
  7144.                             <span>Style</span>
  7145.                         </div>
  7146.                         <div class="csRow">
  7147.                             <div class="csRowName">
  7148.                                 <span>Compact chat</span>
  7149.                             </div>
  7150.                             <div class="modCheckbox">
  7151.                               <input id="compactChat" type="checkbox" ${
  7152.                 modSettings.chat.compact ? 'checked' : ''
  7153.             } />
  7154.                               <label class="cbx" for="compactChat"></label>
  7155.                             </div>
  7156.                         </div>
  7157.                         <div class="csRow">
  7158.                             <div class="csRowName">
  7159.                                 <span>Text</span>
  7160.                             </div>
  7161. 							<div id="chatTextColor"></div>
  7162.                         </div>
  7163.                         <div class="csRow">
  7164.                             <div class="csRowName">
  7165.                                 <span>Background</span>
  7166.                             </div>
  7167. 							<div id="chatBackground"></div>
  7168.                         </div>
  7169.                         <div class="csRow">
  7170.                             <div class="csRowName">
  7171.                                 <span>Theme</span>
  7172.                             </div>
  7173. 							<div id="chatThemeChanger"></div>
  7174.                         </div>
  7175.                     </div>
  7176.                 </div>
  7177.             `;
  7178.             document.body.append(menu);
  7179.  
  7180.             const infoIcon = document.querySelector('.infoIcon');
  7181.             const modInfoPopup = document.querySelector('.modInfoPopup');
  7182.             let popupOpen = false;
  7183.  
  7184.             infoIcon.addEventListener('click', (event) => {
  7185.                 event.stopPropagation();
  7186.                 modInfoPopup.style.display = popupOpen ? 'none' : 'block';
  7187.                 popupOpen = !popupOpen;
  7188.             });
  7189.  
  7190.             document.addEventListener('click', (event) => {
  7191.                 if (popupOpen && !modInfoPopup.contains(event.target)) {
  7192.                     modInfoPopup.style.display = 'none';
  7193.                     popupOpen = false;
  7194.                 }
  7195.             });
  7196.  
  7197.             const showChatTime = document.querySelector('#showChatTime');
  7198.             const showNameColors = document.querySelector('#showNameColors');
  7199.  
  7200.             showChatTime.addEventListener('change', () => {
  7201.                 const timeElements = document.querySelectorAll('.time');
  7202.                 if (showChatTime.checked) {
  7203.                     modSettings.chat.showTime = true;
  7204.                     updateStorage();
  7205.                 } else {
  7206.                     modSettings.chat.showTime = false;
  7207.                     if (timeElements) {
  7208.                         timeElements.forEach((el) => (el.innerHTML = ''));
  7209.                     }
  7210.                     updateStorage();
  7211.                 }
  7212.             });
  7213.  
  7214.             showNameColors.addEventListener('change', () => {
  7215.                 const message_names =
  7216.                     document.querySelectorAll('.message_name');
  7217.                 if (showNameColors.checked) {
  7218.                     modSettings.chat.showNameColors = true;
  7219.                     updateStorage();
  7220.                 } else {
  7221.                     modSettings.chat.showNameColors = false;
  7222.                     if (message_names) {
  7223.                         message_names.forEach(
  7224.                             (el) => (el.style.color = '#fafafa')
  7225.                         );
  7226.                     }
  7227.                     updateStorage();
  7228.                 }
  7229.             });
  7230.  
  7231.             // remove old rgba val
  7232.             if (modSettings.chat.bgColor.includes('rgba')) {
  7233.                 modSettings.chat.bgColor = RgbaToHex(modSettings.chat.bgColor);
  7234.             }
  7235.  
  7236.             const modChat = document.querySelector('.modChat');
  7237.             modChat.style.background = modSettings.chat.bgColor;
  7238.  
  7239.             const showPartyMain = document.querySelector('#showPartyMain');
  7240.             const chatHeader = document.querySelector('.modchat-chatbuttons');
  7241.  
  7242.             const changeButtonsState = (show) => {
  7243.                 chatHeader.style.display = show ? 'flex' : 'none';
  7244.                 modChat.style.maxHeight = show ? '285px' : '250px';
  7245.                 modChat.style.minHeight = show ? '285px' : '250px';
  7246.                 const modChatInner = document.querySelector('.modChat__inner');
  7247.                 modChatInner.style.maxHeight = show ? '265px' : '230px';
  7248.                 modChatInner.style.minHeight = show ? '265px' : '230px';
  7249.             };
  7250.  
  7251.             showPartyMain.addEventListener('change', () => {
  7252.                 const show = showPartyMain.checked;
  7253.                 modSettings.chat.showChatButtons = show;
  7254.                 changeButtonsState(show);
  7255.                 updateStorage();
  7256.             });
  7257.  
  7258.             showPartyMain.checked = modSettings.chat.showChatButtons;
  7259.             changeButtonsState(modSettings.chat.showChatButtons);
  7260.  
  7261.             setTimeout(() => {
  7262.                 const blurTag = byId('blurTag');
  7263.                 const tagText = document.querySelector('.tagText');
  7264.                 const tagElement = document.querySelector('#tag');
  7265.                 blurTag.addEventListener('change', () => {
  7266.                     const state = blurTag.checked;
  7267.  
  7268.                     state
  7269.                         ? (tagText.classList.add('blur'),
  7270.                             tagElement.classList.add('blur'))
  7271.                         : (tagText.classList.remove('blur'),
  7272.                             tagElement.classList.remove('blur'));
  7273.                     modSettings.chat.blurTag = state;
  7274.                     updateStorage();
  7275.                 });
  7276.                 blurTag.checked = modSettings.chat.blurTag;
  7277.                 if (modSettings.chat.blurTag) {
  7278.                     tagText.classList.add('blur');
  7279.                     tagElement.classList.add('blur');
  7280.                 }
  7281.             });
  7282.  
  7283.             const locationText = byId('locationText');
  7284.             locationText.addEventListener('input', (e) => {
  7285.                 e.stopPropagation();
  7286.                 modSettings.chat.locationText = locationText.value;
  7287.             });
  7288.             locationText.value = modSettings.chat.locationText || '{pos}';
  7289.         },
  7290.  
  7291.         toggleChat() {
  7292.             const modChat = document.querySelector('.modChat');
  7293.             const modChatAdded = document.querySelectorAll(
  7294.                 '.chatAddedContainer'
  7295.             );
  7296.  
  7297.             const isModChatHidden =
  7298.                 modChat.style.display === 'none' ||
  7299.                 getComputedStyle(modChat).display === 'none';
  7300.  
  7301.             if (isModChatHidden) {
  7302.                 modChat.style.opacity = 0;
  7303.                 modChat.style.display = 'flex';
  7304.  
  7305.                 setTimeout(() => {
  7306.                     modChat.style.opacity = 1;
  7307.                 }, 10);
  7308.             } else {
  7309.                 modChat.style.opacity = 0;
  7310.                 modChatAdded.forEach((container) =>
  7311.                     container.classList.add('hidden_full')
  7312.                 );
  7313.  
  7314.                 setTimeout(() => {
  7315.                     modChat.style.display = 'none';
  7316.                 }, 300);
  7317.             }
  7318.         },
  7319.  
  7320.         smallMods() {
  7321.             const modAlert_overlay = document.createElement('div');
  7322.             modAlert_overlay.classList.add('alert_overlay');
  7323.             modAlert_overlay.id = 'modAlert_overlay';
  7324.             document.body.append(modAlert_overlay);
  7325.  
  7326.             const autoRespawn = byId('autoRespawn');
  7327.             if (modSettings.settings.autoRespawn) {
  7328.                 autoRespawn.checked = true;
  7329.             }
  7330.  
  7331.             autoRespawn.addEventListener('change', () => {
  7332.                 modSettings.settings.autoRespawn = autoRespawn.checked;
  7333.                 updateStorage();
  7334.             });
  7335.  
  7336.             const auto = byId('autoClaimCoins');
  7337.             auto.addEventListener('change', () => {
  7338.                 const checked = auto.checked;
  7339.                 modSettings.settings.autoClaimCoins = !!checked;
  7340.                 updateStorage();
  7341.             });
  7342.             if (modSettings.settings.autoClaimCoins) {
  7343.                 auto.checked = true;
  7344.             }
  7345.  
  7346.             const showChallenges = byId('showChallenges');
  7347.             showChallenges.addEventListener('change', () => {
  7348.                 if (showChallenges.checked) {
  7349.                     modSettings.showChallenges = true;
  7350.                 } else {
  7351.                     modSettings.showChallenges = false;
  7352.                 }
  7353.                 updateStorage();
  7354.             });
  7355.             if (modSettings.showChallenges) {
  7356.                 auto.checked = true;
  7357.             }
  7358.  
  7359.             const gameTitle = byId('title');
  7360.  
  7361.             const newTitle = document.createElement('div');
  7362.             newTitle.classList.add('sigmod-title');
  7363.             newTitle.innerHTML = `
  7364.                <h1 id="title">Sigmally</h1>
  7365.                <span id="bycursed">Mod by <a href="https://www.youtube.com/@sigmallyCursed/" target="_blank">Cursed</a></span>
  7366.             `;
  7367.             gameTitle.replaceWith(newTitle);
  7368.  
  7369.             const nickName = byId('nick');
  7370.             nickName.maxLength = 50;
  7371.             nickName.type = 'text';
  7372.  
  7373.             function updNick() {
  7374.                 const nick = nickName.value;
  7375.                 mods.nick = nick;
  7376.                 const welcome = byId('welcomeUser');
  7377.                 if (welcome) {
  7378.                     welcome.innerHTML = `Welcome ${
  7379.                         mods.nick || 'Unnamed'
  7380.                     }, to the SigMod Client!`;
  7381.                 }
  7382.             }
  7383.  
  7384.             nickName.addEventListener('input', () => {
  7385.                 updNick();
  7386.             });
  7387.  
  7388.             updNick();
  7389.  
  7390.             // Better grammar in the descriptions of the challenges
  7391.             setTimeout(() => {
  7392.                 window.shopLocales.challenge_tab.tasks = {
  7393.                     eaten: 'Eat %n food in a game.',
  7394.                     xp: 'Get %n XP in a game.',
  7395.                     alive: 'Stay alive for %n minutes in a game.',
  7396.                     pos: 'Reach top %n on leaderboard.',
  7397.                 };
  7398.             }, 1000);
  7399.  
  7400.             const topusersInner = document.querySelector('.top-users__inner');
  7401.             topusersInner.classList.add('scroll');
  7402.             topusersInner.style.border = 'none';
  7403.  
  7404.             byId('signOutBtn').addEventListener('click', () => {
  7405.                 window.gameSettings.user = null;
  7406.             });
  7407.  
  7408.             const mode = byId('gamemode');
  7409.             mode.addEventListener('change', () => {
  7410.                 client.send({
  7411.                     type: 'server-changed',
  7412.                     content: getGameMode(),
  7413.                 });
  7414.  
  7415.                 window.gameSettings.isPlaying = false;
  7416.  
  7417.                 const modMessages = document.querySelector('#mod-messages');
  7418.                 if (modMessages) {
  7419.                     modMessages.innerHTML = '';
  7420.                 }
  7421.             });
  7422.  
  7423.             // redirect to owned skins instead of free skins
  7424.             const ot = Element.prototype.openTab;
  7425.             Element.prototype.openTab = function (tab) {
  7426.                 if (!tab === 'skins') return;
  7427.  
  7428.                 setTimeout(() => {
  7429.                     Element.prototype.changeTab('owned');
  7430.                 }, 100);
  7431.  
  7432.                 ot.apply(this, arguments);
  7433.             };
  7434.  
  7435.             document.addEventListener('mousemove', (e) => {
  7436.                 this.mouseX = e.clientX + window.pageXOffset;
  7437.                 this.mouseY = e.clientY + window.pageYOffset;
  7438.  
  7439.                 const mouseTracker = document.querySelector('.mouseTracker');
  7440.                 if (!mouseTracker) return;
  7441.  
  7442.                 mouseTracker.innerText = `X: ${this.mouseX}; Y: ${this.mouseY}`;
  7443.             });
  7444.  
  7445.             if (location.search.includes('password')) {
  7446.                 const passwordField = byId('password');
  7447.                 if (passwordField) passwordField.style.display = 'none';
  7448.  
  7449.                 const password =
  7450.                     new URLSearchParams(location.search)
  7451.                         .get('password')
  7452.                         ?.split('/')[0] || '';
  7453.                 passwordField.value = password; // sigfixes should know the password when multiboxing
  7454.  
  7455.                 if (window.sigfix) return;
  7456.  
  7457.                 const playBtn = byId('play-btn');
  7458.                 playBtn.addEventListener('click', (e) => {
  7459.                     const waitForConnection = () =>
  7460.                         new Promise((res) => {
  7461.                             if (client?.ws?.readyState === 1) return res(null);
  7462.                             const i = setInterval(
  7463.                                 () =>
  7464.                                     client?.ws?.readyState === 1 &&
  7465.                                     (clearInterval(i), res(null)),
  7466.                                 50
  7467.                             );
  7468.                         });
  7469.  
  7470.                     waitForConnection().then(async () => {
  7471.                         await wait(500);
  7472.                         mods.sendPlay(password);
  7473.  
  7474.                         const interval = setInterval(() => {
  7475.                             const errormodal = byId('errormodal');
  7476.                             if (errormodal?.style.display !== 'none')
  7477.                                 errormodal.style.display = 'none';
  7478.                         });
  7479.  
  7480.                         setTimeout(() => clearInterval(interval), 1000);
  7481.                     });
  7482.                 });
  7483.             }
  7484.         },
  7485.  
  7486.         removeStorage(storage) {
  7487.             localStorage.removeItem(storage);
  7488.         },
  7489.  
  7490.         credits() {
  7491.             console.log(
  7492.                 `%c
  7493. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7494. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎░█▀▀▀█ ▀█▀ ░█▀▀█ ░█▀▄▀█ ░█▀▀▀█ ░█▀▀▄ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7495. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎─▀▀▀▄▄ ░█─ ░█─▄▄ ░█░█░█ ░█──░█ ░█─░█ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ V${version} ‎ ‎ ‎ ‎
  7496. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎░█▄▄▄█ ▄█▄ ░█▄▄█ ░█──░█ ░█▄▄▄█ ░█▄▄▀ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7497. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7498. ‎ ‎ ‎ ██████╗░██╗░░░██╗  ░█████╗░██╗░░░██╗██████╗░░██████╗███████╗██████╗░ ‎ ‎ ‎
  7499. ‎ ‎ ‎ ██╔══██╗╚██╗░██╔╝  ██╔══██╗██║░░░██║██╔══██╗██╔════╝██╔════╝██╔══██╗ ‎ ‎ ‎
  7500. ‎ ‎ ‎ ██████╦╝░╚████╔╝░  ██║░░╚═╝██║░░░██║██████╔╝╚█████╗░█████╗░░██║░░██║ ‎ ‎ ‎
  7501. ‎ ‎ ‎ ██╔══██╗░░╚██╔╝░░  ██║░░██╗██║░░░██║██╔══██╗░╚═══██╗██╔══╝░░██║░░██║ ‎ ‎ ‎
  7502. ‎ ‎ ‎ ██████╦╝░░░██║░░░  ╚█████╔╝╚██████╔╝██║░░██║██████╔╝███████╗██████╔╝ ‎ ‎ ‎
  7503. ‎ ‎ ‎ ╚═════╝░░░░╚═╝░░░  ░╚════╝░░╚═════╝░╚═╝░░╚═╝╚═════╝░╚══════╝╚═════╝░ ‎ ‎ ‎
  7504. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7505. `,
  7506.                 'background-color: black; color: green'
  7507.             );
  7508.         },
  7509.  
  7510.         handleAlert(data) {
  7511.             const { title, description, enabled, password } = data;
  7512.  
  7513.             if (location.pathname.includes('tournament') || client.updateAvailable) return;
  7514.  
  7515.             if (!enabled || sessionStorage.getItem('hide-alert')) {
  7516.                 byId('scrim_alert')?.remove();
  7517.                 return;
  7518.             }
  7519.  
  7520.             const modAlert = document.createElement('div');
  7521.             modAlert.id = 'scrim_alert';
  7522.             modAlert.classList.add('modAlert');
  7523.             modAlert.innerHTML = `
  7524.                 <div class="flex justify-sb">
  7525.                     <strong>${title}</strong>
  7526.                     <button class="modButton" style="width: 35px;" id="close_scrim_alert">X</button>
  7527.                 </div>
  7528.                 <span>${description}</span>
  7529.                 <div class="flex" style="align-items: center; gap: 5px;">
  7530.                     <button id="join" class="modButton" style="width: 100%">Join</button>
  7531.                 </div>
  7532.             `;
  7533.             document.body.append(modAlert);
  7534.  
  7535.             const observer = new MutationObserver(() => {
  7536.                 modAlert.style.display = menuClosed() ? 'none' : 'flex';
  7537.             });
  7538.  
  7539.             observer.observe(document.body, {
  7540.                 attributes: true,
  7541.                 childList: true,
  7542.                 subtree: true,
  7543.             });
  7544.  
  7545.             const joinButton = byId('join');
  7546.             joinButton.addEventListener('click', () => {
  7547.                 location.href = `https://one.sigmally.com/tournament?password=${password}`;
  7548.             });
  7549.  
  7550.             const close = byId('close_scrim_alert');
  7551.             close.addEventListener('click', () => {
  7552.                 modAlert.remove();
  7553.                 // make it not that annoying
  7554.                 sessionStorage.setItem('hide-alert', true);
  7555.             });
  7556.         },
  7557.  
  7558.         saveNames() {
  7559.             let savedNames = modSettings.settings.savedNames;
  7560.             let savedNamesOutput = byId('savedNames');
  7561.             let saveNameBtn = byId('saveName');
  7562.             let saveNameInput = byId('saveNameValue');
  7563.  
  7564.             const createNameDiv = (name) => {
  7565.                 let nameDiv = document.createElement('div');
  7566.                 nameDiv.classList.add('NameDiv');
  7567.  
  7568.                 let nameLabel = document.createElement('label');
  7569.                 nameLabel.classList.add('NameLabel');
  7570.                 nameLabel.innerText = name;
  7571.  
  7572.                 let delName = document.createElement('button');
  7573.                 delName.innerText = 'X';
  7574.                 delName.classList.add('delName');
  7575.  
  7576.                 nameDiv.addEventListener('click', () => {
  7577.                     const name = nameLabel.innerText;
  7578.                     navigator.clipboard.writeText(name).then(() => {
  7579.                         this.modAlert(
  7580.                             `Added the name '${name}' to your clipboard!`,
  7581.                             'success'
  7582.                         );
  7583.                     });
  7584.                 });
  7585.  
  7586.                 delName.addEventListener('click', () => {
  7587.                     if (
  7588.                         confirm(
  7589.                             "Are you sure you want to delete the name '" +
  7590.                             nameLabel.innerText +
  7591.                             "'?"
  7592.                         )
  7593.                     ) {
  7594.                         nameDiv.remove();
  7595.                         savedNames = savedNames.filter(
  7596.                             (n) => n !== nameLabel.innerText
  7597.                         );
  7598.                         modSettings.settings.savedNames = savedNames;
  7599.                         updateStorage();
  7600.                     }
  7601.                 });
  7602.  
  7603.                 nameDiv.appendChild(nameLabel);
  7604.                 nameDiv.appendChild(delName);
  7605.                 return nameDiv;
  7606.             };
  7607.  
  7608.             saveNameBtn.addEventListener('click', () => {
  7609.                 if (saveNameInput.value === '') return;
  7610.  
  7611.                 setTimeout(() => {
  7612.                     saveNameInput.value = '';
  7613.                 }, 10);
  7614.  
  7615.                 if (savedNames.includes(saveNameInput.value)) {
  7616.                     return;
  7617.                 }
  7618.  
  7619.                 let nameDiv = createNameDiv(saveNameInput.value);
  7620.                 savedNamesOutput.appendChild(nameDiv);
  7621.  
  7622.                 savedNames.push(saveNameInput.value);
  7623.                 modSettings.settings.savedNames = savedNames;
  7624.                 updateStorage();
  7625.             });
  7626.  
  7627.             if (savedNames.length > 0) {
  7628.                 savedNames.forEach((name) => {
  7629.                     let nameDiv = createNameDiv(name);
  7630.                     savedNamesOutput.appendChild(nameDiv);
  7631.                 });
  7632.             }
  7633.         },
  7634.  
  7635.         initStats() {
  7636.             // initialize player stats
  7637.             const statElements = [
  7638.                 'stat-time-played',
  7639.                 'stat-highest-mass',
  7640.                 'stat-total-deaths',
  7641.                 'stat-total-mass',
  7642.             ];
  7643.             this.storage = localStorage.getItem('game-stats');
  7644.  
  7645.             if (!this.storage) {
  7646.                 this.storage = {
  7647.                     'time-played': 0, // seconds
  7648.                     'highest-mass': 0,
  7649.                     'total-deaths': 0,
  7650.                     'total-mass': 0,
  7651.                 };
  7652.                 localStorage.setItem(
  7653.                     'game-stats',
  7654.                     JSON.stringify(this.storage)
  7655.                 );
  7656.             } else {
  7657.                 this.storage = JSON.parse(this.storage);
  7658.             }
  7659.  
  7660.             statElements.forEach((rawStat) => {
  7661.                 const stat = rawStat.replace('stat-', '');
  7662.                 const value = this.storage[stat];
  7663.                 this.updateStatElm(rawStat, value);
  7664.             });
  7665.  
  7666.             this.session.bind(this)();
  7667.         },
  7668.  
  7669.         updateStat(key, value) {
  7670.             this.storage[key] = value;
  7671.             localStorage.setItem('game-stats', JSON.stringify(this.storage));
  7672.             this.updateStatElm(key, value);
  7673.         },
  7674.  
  7675.         updateStatElm(stat, value) {
  7676.             const element = byId(stat);
  7677.  
  7678.             if (element) {
  7679.                 if (stat === 'stat-time-played') {
  7680.                     const hours = Math.floor(value / 3600);
  7681.                     const minutes = Math.floor((value % 3600) / 60);
  7682.                     const formattedTime =
  7683.                         hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
  7684.                     element.innerHTML = formattedTime;
  7685.                 } else {
  7686.                     const formattedValue =
  7687.                         stat === 'stat-highest-mass' ||
  7688.                         stat === 'stat-total-mass'
  7689.                             ? value > 999
  7690.                                 ? `${(value / 1000).toFixed(1)}k`
  7691.                                 : value.toString()
  7692.                             : value.toString();
  7693.                     element.innerHTML = formattedValue;
  7694.                 }
  7695.             }
  7696.         },
  7697.  
  7698.         session() {
  7699.             let playingInterval;
  7700.             let minPlaying = 0;
  7701.             let isPlaying = window.gameSettings.isPlaying;
  7702.  
  7703.             const playBtn = byId('play-btn');
  7704.             let a = null;
  7705.  
  7706.             playBtn.addEventListener('click', async () => {
  7707.                 if (isPlaying) return;
  7708.  
  7709.                 while (!window.gameSettings.isPlaying) {
  7710.                     await new Promise((resolve) => setTimeout(resolve, 200));
  7711.                 }
  7712.  
  7713.                 isPlaying = true;
  7714.                 let timer = null;
  7715.  
  7716.                 if (modSettings.playTimer) {
  7717.                     timer = document.createElement('span');
  7718.                     timer.classList.add('playTimer');
  7719.                     timer.innerText = '0m0s played';
  7720.                     document.body.append(timer);
  7721.                 }
  7722.  
  7723.                 // mouse tracker in session method so it's only visible when playing
  7724.                 if (modSettings.mouseTracker) {
  7725.                     const mouse = document.createElement('span');
  7726.                     mouse.classList.add('mouseTracker');
  7727.                     mouse.innerText = 'X: 0; Y: 0';
  7728.                     document.body.append(mouse);
  7729.  
  7730.                     if (!modSettings.playTimer) {
  7731.                         mouse.style.top = '128px';
  7732.                     }
  7733.                 }
  7734.  
  7735.                 let count = 0;
  7736.                 playingInterval = setInterval(() => {
  7737.                     count++;
  7738.                     this.storage['time-played']++;
  7739.                     if (count % 60 === 0) {
  7740.                         minPlaying++;
  7741.                     }
  7742.                     this.updateStat('time-played', this.storage['time-played']);
  7743.  
  7744.                     if (modSettings.playTimer) {
  7745.                         this.updateTimeStat(timer, count);
  7746.                     }
  7747.                 }, 1000);
  7748.             });
  7749.  
  7750.             setInterval(() => {
  7751.                 if (menuClosed() && byId('overlays').style.display !== 'none') {
  7752.                     byId('overlays').style.display = 'none';
  7753.                 }
  7754.  
  7755.                 if (isDead() && !dead) {
  7756.                     clearInterval(playingInterval);
  7757.                     dead = true;
  7758.  
  7759.                     const playTimer = document.querySelector('.playTimer');
  7760.                     if (playTimer) playTimer.remove();
  7761.  
  7762.                     const mouseTracker =
  7763.                         document.querySelector('.mouseTracker');
  7764.                     if (mouseTracker) mouseTracker.remove();
  7765.  
  7766.                     const score = parseFloat(byId('highest_mass').innerText);
  7767.                     const highest = this.storage['highest-mass'];
  7768.  
  7769.                     if (score > highest) {
  7770.                         this.storage['highest-mass'] = score;
  7771.                         this.updateStat(
  7772.                             'highest-mass',
  7773.                             this.storage['highest-mass']
  7774.                         );
  7775.                     }
  7776.  
  7777.                     this.storage['total-deaths']++;
  7778.                     this.updateStat(
  7779.                         'total-deaths',
  7780.                         this.storage['total-deaths']
  7781.                     );
  7782.  
  7783.                     this.storage['total-mass'] += score;
  7784.                     this.updateStat('total-mass', this.storage['total-mass']);
  7785.                     isPlaying = window.gameSettings.isPlaying = false;
  7786.  
  7787.                     if (this.lastOneStanding) {
  7788.                         client.send({
  7789.                             type: 'result',
  7790.                             content: null,
  7791.                         });
  7792.                         playBtn.disabled = true;
  7793.                     }
  7794.  
  7795.                     if (modSettings.showChallenges && window.gameSettings.user)
  7796.                         this.showChallenges();
  7797.                 } else if (!isDead()) {
  7798.                     dead = false;
  7799.                     const challengesDeathscreen = document.querySelector(
  7800.                         '.challenges_deathscreen'
  7801.                     );
  7802.                     if (challengesDeathscreen) challengesDeathscreen.remove();
  7803.                 }
  7804.             });
  7805.         },
  7806.         updateTimeStat(el, seconds) {
  7807.             const minutes = Math.floor(seconds / 60);
  7808.             const remainingSeconds = seconds % 60;
  7809.             const timeString = `${minutes}m${remainingSeconds}s`;
  7810.  
  7811.             el.innerText = `${timeString} played`;
  7812.         },
  7813.  
  7814.         async showChallenges() {
  7815.             const challengeData = await (
  7816.                 await fetch(
  7817.                     `https://sigmally.com/api/user/challenge/${window.gameSettings.user.email}`
  7818.                 )
  7819.             ).json();
  7820.  
  7821.             if (challengeData.status !== 'success') return;
  7822.  
  7823.             const shopLocales = window.shopLocales;
  7824.             let challengesCompleted = 0;
  7825.  
  7826.             const allChallenges = challengeData.data;
  7827.             allChallenges.forEach(({ status }) => {
  7828.                 if (status) challengesCompleted++;
  7829.             });
  7830.  
  7831.             let challenges;
  7832.             if (challengesCompleted === allChallenges.length) {
  7833.                 challenges = `<div class="challenge-row" style="justify-content: center;">All challenges completed.</div>`;
  7834.             } else {
  7835.                 challenges = allChallenges
  7836.                     .filter(({ status }) => !status)
  7837.                     .map(({ task, best, status, ready, goal }) => {
  7838.                         const desc = shopLocales.challenge_tab.tasks[
  7839.                             task
  7840.                             ].replace('%n', task === 'alive' ? goal / 60 : goal);
  7841.                         const btn = ready
  7842.                             ? `<button class="challenge-collect-secondary" onclick="this.challenge('${task}', ${status})">${shopLocales.challenge_tab.collect}</button>`
  7843.                             : `<div class="challenge-best-secondary">${
  7844.                                 shopLocales.challenge_tab.result
  7845.                             }${Math.round(best)}${
  7846.                                 task === 'alive' ? 's' : ''
  7847.                             }</div>`;
  7848.                         return `
  7849.                         <div class="challenge-row">
  7850.                           <div class="challenge-desc">${desc}</div>
  7851.                           ${btn}
  7852.                         </div>`;
  7853.                     })
  7854.                     .join('');
  7855.             }
  7856.  
  7857.             const modal = document.createElement('div');
  7858.             modal.classList.add('challenges_deathscreen');
  7859.             modal.innerHTML = `
  7860.                 <span class="challenges-title">Daily challenges</span>
  7861.                 <div class="challenges-col">${challenges}</div>
  7862.                 <span class="centerXY new-challenges">New challenges in 0h 0m 0s</span>
  7863.             `;
  7864.  
  7865.             const toggleColor = (element, background, text) => {
  7866.                 let image = `url("${background}")`;
  7867.                 if (background.includes('http')) {
  7868.                     element.style.background = image;
  7869.                     element.style.backgroundPosition = 'center';
  7870.                     element.style.backgroundSize = 'cover';
  7871.                     element.style.backgroundRepeat = 'no-repeat';
  7872.                 } else {
  7873.                     element.style.background = background;
  7874.                     element.style.backgroundRepeat = 'no-repeat';
  7875.                 }
  7876.                 element.style.color = text;
  7877.             };
  7878.  
  7879.             if (modSettings.themes.current !== 'Dark') {
  7880.                 let selectedTheme;
  7881.                 selectedTheme =
  7882.                     window.themes.defaults.find(
  7883.                         (theme) => theme.name === modSettings.themes.current
  7884.                     ) ||
  7885.                     modSettings.themes.custom.find(
  7886.                         (theme) => theme.name === modSettings.themes.current
  7887.                     ) ||
  7888.                     null;
  7889.                 if (!selectedTheme) {
  7890.                     selectedTheme =
  7891.                         window.themes.orderly.find(
  7892.                             (theme) => theme.name === modSettings.themes.current
  7893.                         ) ||
  7894.                         modSettings.themes.custom.find(
  7895.                             (theme) => theme.name === modSettings.themes.current
  7896.                         );
  7897.                 }
  7898.  
  7899.                 if (selectedTheme) {
  7900.                     toggleColor(
  7901.                         modal,
  7902.                         selectedTheme.background,
  7903.                         selectedTheme.text
  7904.                     );
  7905.                 }
  7906.             }
  7907.  
  7908.             document
  7909.                 .querySelector('.menu-wrapper--stats-mode')
  7910.                 .insertAdjacentElement('afterbegin', modal);
  7911.  
  7912.             if (challengesCompleted < allChallenges.length) {
  7913.                 document
  7914.                     .querySelectorAll('.challenge-collect-secondary')
  7915.                     .forEach((btn) => {
  7916.                         btn.addEventListener('click', () => {
  7917.                             const parentChallengeRow =
  7918.                                 btn.closest('.challenge-row');
  7919.                             if (parentChallengeRow) {
  7920.                                 setTimeout(() => {
  7921.                                     parentChallengeRow.remove();
  7922.                                 }, 500);
  7923.                             }
  7924.                         });
  7925.                     });
  7926.             }
  7927.  
  7928.             this.createDayTimer();
  7929.         },
  7930.  
  7931.         timeToString(timeLeft) {
  7932.             const string = new Date(timeLeft).toISOString().slice(11, 19);
  7933.             const [hours, minutes, seconds] = string.split(':');
  7934.  
  7935.             return `${hours}h ${minutes}m ${seconds}s`;
  7936.         },
  7937.         toISODate: (date) => {
  7938.             const withTime = date ? new Date(date) : new Date();
  7939.             const [withoutTime] = withTime.toISOString().split('T');
  7940.             return withoutTime;
  7941.         },
  7942.         createDayTimer() {
  7943.             const oneDay = 1000 * 60 * 60 * 24;
  7944.             const getTime = () => {
  7945.                 const today = this.toISODate();
  7946.                 const from = new Date(today).getTime();
  7947.                 const to = from + oneDay;
  7948.  
  7949.                 const distance = to - Date.now();
  7950.                 const time = this.timeToString(distance);
  7951.                 return time;
  7952.             };
  7953.  
  7954.             const children = document.querySelector('.new-challenges');
  7955.             if (children) {
  7956.                 children.innerHTML = `New challenges in ${getTime()}`;
  7957.             }
  7958.  
  7959.             this.dayTimer = setInterval(() => {
  7960.                 const today = this.toISODate();
  7961.                 const from = new Date(today).getTime();
  7962.                 const to = from + oneDay;
  7963.  
  7964.                 const distance = to - Date.now();
  7965.                 const time = this.timeToString(distance);
  7966.  
  7967.                 const children = document.querySelector('.new-challenges');
  7968.                 if (!children || distance < 1000 || !isDead()) {
  7969.                     clearInterval(this.dayTimer);
  7970.                     return;
  7971.                 }
  7972.                 children.innerHTML = `New challenges in ${getTime()}`;
  7973.             }, 1000);
  7974.         },
  7975.  
  7976.         macros() {
  7977.             let that = this;
  7978.             const KEY_SPLIT = this.splitKey;
  7979.             let ff = null;
  7980.             let keydown = false;
  7981.             let open = false;
  7982.             const canvas = byId('canvas');
  7983.             const mod_menu = document.querySelector('.mod_menu');
  7984.  
  7985.             const freezeType = byId('freezeType');
  7986.             let freezeKeyPressed = false;
  7987.             let freezeMouseClicked = false;
  7988.             let freezeOverlay = null;
  7989.  
  7990.             let vOverlay = null;
  7991.             let vLocked = false;
  7992.             let activeVLine = false;
  7993.  
  7994.             let fixedOverlay = null;
  7995.             let fixedLocked = false;
  7996.             let activeFixedLine = false;
  7997.  
  7998.             /* intervals */
  7999.  
  8000.             // Respawn interval
  8001.             setInterval(() => {
  8002.                 if (
  8003.                     modSettings.settings.autoRespawn &&
  8004.                     this.respawnTime &&
  8005.                     Date.now() - this.respawnTime >= this.respawnCooldown
  8006.                 ) {
  8007.                     this.respawn();
  8008.                 }
  8009.             });
  8010.  
  8011.             // mouse fast feed interval
  8012.             setInterval(() => {
  8013.                 if (dead || !menuClosed() || !this.mouseDown) return;
  8014.                 keypress('w', 'KeyW');
  8015.             }, 50);
  8016.  
  8017.             async function split(times) {
  8018.                 if (times > 0) {
  8019.                     window.dispatchEvent(
  8020.                         new KeyboardEvent('keydown', KEY_SPLIT)
  8021.                     );
  8022.                     window.dispatchEvent(new KeyboardEvent('keyup', KEY_SPLIT));
  8023.                     split(times - 1);
  8024.                 }
  8025.             }
  8026.  
  8027.             async function selfTrick() {
  8028.                 let i = 4;
  8029.  
  8030.                 while (i--) {
  8031.                     split(1);
  8032.                     await wait(20);
  8033.                 }
  8034.             }
  8035.  
  8036.             async function doubleTrick() {
  8037.                 let i = 2;
  8038.  
  8039.                 while (i--) {
  8040.                     split(1);
  8041.                     await wait(20);
  8042.                 }
  8043.             }
  8044.  
  8045.             function mouseToScreenCenter() {
  8046.                 const screenCenterX = canvas.width / 2;
  8047.                 const screenCenterY = canvas.height / 2;
  8048.  
  8049.                 mousemove(screenCenterX, screenCenterY);
  8050.  
  8051.                 return {
  8052.                     x: screenCenterX,
  8053.                     y: screenCenterY,
  8054.                 };
  8055.             }
  8056.  
  8057.             async function instantSplit() {
  8058.                 await wait(300);
  8059.  
  8060.                 if (
  8061.                     modSettings.macros.keys.line.instantSplit &&
  8062.                     modSettings.macros.keys.line.instantSplit > 0
  8063.                 ) {
  8064.                     split(modSettings.macros.keys.line.instantSplit);
  8065.                 }
  8066.             }
  8067.  
  8068.             async function vLine() {
  8069.                 if (!activeVLine) return;
  8070.                 const x = playerPosition.x;
  8071.                 const y = playerPosition.y;
  8072.  
  8073.                 const offsetUpX = playerPosition.x;
  8074.                 const offsetUpY = playerPosition.y - 100;
  8075.                 const offsetDownX = playerPosition.x;
  8076.                 const offsetDownY = playerPosition.y + 100;
  8077.  
  8078.                 freezepos = false;
  8079.                 window.sendMouseMove(offsetUpX, offsetUpY);
  8080.                 freezepos = true;
  8081.  
  8082.                 await wait(50);
  8083.  
  8084.                 freezepos = false;
  8085.                 window.sendMouseMove(offsetDownX, offsetDownY);
  8086.                 freezepos = true;
  8087.             }
  8088.  
  8089.             async function toggleHorizontal(mouse = false) {
  8090.                 if (!freezeKeyPressed) {
  8091.                     if (activeVLine || activeFixedLine) return;
  8092.  
  8093.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  8094.                     freezepos = true;
  8095.  
  8096.                     instantSplit();
  8097.  
  8098.                     freezeOverlay = document.createElement('div');
  8099.                     freezeOverlay.innerHTML = `
  8100. 							<span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Movement Stopped</span>
  8101. 						`;
  8102.                     freezeOverlay.style =
  8103.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  8104.  
  8105.                     if (
  8106.                         mouse &&
  8107.                         (modSettings.macros.mouse.left === 'freeze' ||
  8108.                             modSettings.macros.mouse.right === 'freeze')
  8109.                     ) {
  8110.                         freezeOverlay.addEventListener('mousedown', (e) => {
  8111.                             if (
  8112.                                 e.button === 0 &&
  8113.                                 modSettings.macros.mouse.left === 'freeze'
  8114.                             ) {
  8115.                                 // Left mouse button (1)
  8116.                                 handleFreezeEvent();
  8117.                             }
  8118.                             if (
  8119.                                 e.button === 2 &&
  8120.                                 modSettings.macros.mouse.right === 'freeze'
  8121.                             ) {
  8122.                                 // Right mouse button (2)
  8123.                                 handleFreezeEvent();
  8124.                             }
  8125.                         });
  8126.  
  8127.                         if (modSettings.macros.mouse.right === 'freeze') {
  8128.                             freezeOverlay.addEventListener(
  8129.                                 'contextmenu',
  8130.                                 (e) => {
  8131.                                     e.preventDefault();
  8132.                                 }
  8133.                             );
  8134.                         }
  8135.                     }
  8136.  
  8137.                     function handleFreezeEvent() {
  8138.                         if (freezeOverlay != null) freezeOverlay.remove();
  8139.                         freezeOverlay = null;
  8140.                         freezeKeyPressed = false;
  8141.                     }
  8142.  
  8143.                     document
  8144.                         .querySelector('.body__inner')
  8145.                         .append(freezeOverlay);
  8146.  
  8147.                     freezeKeyPressed = true;
  8148.                 } else {
  8149.                     if (freezeOverlay != null) freezeOverlay.remove();
  8150.                     freezeOverlay = null;
  8151.                     freezeKeyPressed = false;
  8152.  
  8153.                     freezepos = false;
  8154.                 }
  8155.             }
  8156.  
  8157.             async function toggleVertical() {
  8158.                 if (!activeVLine) {
  8159.                     if (freezeKeyPressed || activeFixedLine) return;
  8160.  
  8161.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  8162.                     freezepos = true;
  8163.  
  8164.                     instantSplit();
  8165.  
  8166.                     vOverlay = document.createElement('div');
  8167.                     vOverlay.style = 'pointer-events: none;';
  8168.                     vOverlay.innerHTML = `
  8169.                         <span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Vertical locked</span>
  8170.                     `;
  8171.                     vOverlay.style =
  8172.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  8173.  
  8174.                     document.querySelector('.body__inner').append(vOverlay);
  8175.  
  8176.                     activeVLine = true;
  8177.                 } else {
  8178.                     activeVLine = false;
  8179.                     freezepos = false;
  8180.                     if (vOverlay) vOverlay.remove();
  8181.                     vOverlay = null;
  8182.                 }
  8183.             }
  8184.  
  8185.             async function toggleFixed() {
  8186.                 if (!activeFixedLine) {
  8187.                     if (freezeKeyPressed || activeVLine) return;
  8188.  
  8189.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  8190.  
  8191.                     freezepos = true;
  8192.  
  8193.                     instantSplit();
  8194.  
  8195.                     fixedOverlay = document.createElement('div');
  8196.                     fixedOverlay.style = 'pointer-events: none;';
  8197.                     fixedOverlay.innerHTML = `
  8198.                         <span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Mouse locked</span>
  8199.                     `;
  8200.                     fixedOverlay.style =
  8201.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  8202.  
  8203.                     document.querySelector('.body__inner').append(fixedOverlay);
  8204.  
  8205.                     activeFixedLine = true;
  8206.                 } else {
  8207.                     activeFixedLine = false;
  8208.                     freezepos = false;
  8209.                     if (fixedOverlay) fixedOverlay.remove();
  8210.                     fixedOverlay = null;
  8211.                 }
  8212.             }
  8213.  
  8214.             function sendLocation() {
  8215.                 if (!playerPosition.x || !playerPosition.y) return;
  8216.  
  8217.                 const gamemode = byId('gamemode');
  8218.  
  8219.                 let field = '';
  8220.                 const coordinates = getCoordinates(mods.border);
  8221.  
  8222.                 for (const label in coordinates) {
  8223.                     const { min, max } = coordinates[label];
  8224.  
  8225.                     if (
  8226.                         playerPosition.x >= min.x &&
  8227.                         playerPosition.x <= max.x &&
  8228.                         playerPosition.y >= min.y &&
  8229.                         playerPosition.y <= max.y
  8230.                     ) {
  8231.                         field = label;
  8232.                         break;
  8233.                     }
  8234.                 }
  8235.  
  8236.                 const locationText = modSettings.chat.locationText || field;
  8237.                 const message = locationText.replace('{pos}', field);
  8238.                 window.sendChat(message);
  8239.             }
  8240.  
  8241.             function toggleSettings(setting) {
  8242.                 const settingElement = document.querySelector(
  8243.                     `input#${setting}`
  8244.                 );
  8245.                 if (settingElement) {
  8246.                     settingElement.click();
  8247.                 } else {
  8248.                     console.error(`Setting "${setting}" not found`);
  8249.                 }
  8250.             }
  8251.  
  8252.             document.addEventListener('keyup', (e) => {
  8253.                 const key = e.key.toLowerCase();
  8254.                 if (key == modSettings.macros.keys.rapidFeed && keydown) {
  8255.                     clearInterval(ff);
  8256.                     keydown = false;
  8257.                 }
  8258.             });
  8259.             document.addEventListener('keydown', (e) => {
  8260.                 // prevent disconnecting & using macros on input fields
  8261.                 if (
  8262.                     document.activeElement.tagName === 'INPUT' ||
  8263.                     document.activeElement.tagName === 'TEXTAREA'
  8264.                 ) {
  8265.                     e.stopPropagation();
  8266.                     return;
  8267.                 }
  8268.                 const key = e.key.toLowerCase();
  8269.  
  8270.                 if (key === 'p') {
  8271.                     e.stopPropagation();
  8272.                 }
  8273.                 if (key === 'tab' && !window.screenTop && !window.screenY) {
  8274.                     e.preventDefault();
  8275.                 }
  8276.  
  8277.                 if (key === modSettings.macros.keys.rapidFeed) {
  8278.                     e.stopPropagation(); // block actual feeding key
  8279.                     if (!keydown) {
  8280.                         keydown = true;
  8281.                         ff = setInterval(
  8282.                             () => keypress('w', 'KeyW'),
  8283.                             modSettings.macros.feedSpeed
  8284.                         );
  8285.                     }
  8286.                 }
  8287.                 // vertical linesplit
  8288.                 if (
  8289.                     activeVLine &&
  8290.                     (key === ' ' ||
  8291.                         key === modSettings.macros.keys.splits.double ||
  8292.                         key === modSettings.macros.keys.splits.triple ||
  8293.                         key === modSettings.macros.keys.splits.quad)
  8294.                 ) {
  8295.                     vLine();
  8296.                 }
  8297.  
  8298.                 handleKeydown(key);
  8299.             });
  8300.  
  8301.             async function handleKeydown(key) {
  8302.                 switch (key) {
  8303.                     case modSettings.macros.keys.toggle.menu: {
  8304.                         if (!open) {
  8305.                             mod_menu.style.display = 'flex';
  8306.                             setTimeout(() => {
  8307.                                 mod_menu.style.opacity = 1;
  8308.                             }, 10);
  8309.                             open = true;
  8310.                         } else {
  8311.                             mod_menu.style.opacity = 0;
  8312.                             setTimeout(() => {
  8313.                                 mod_menu.style.display = 'none';
  8314.                             }, 300);
  8315.                             open = false;
  8316.                         }
  8317.                         break;
  8318.                     }
  8319.  
  8320.                     case modSettings.macros.keys.splits.double:
  8321.                         split(2);
  8322.                         break;
  8323.  
  8324.                     case modSettings.macros.keys.splits.triple:
  8325.                         split(3);
  8326.                         break;
  8327.  
  8328.                     case modSettings.macros.keys.splits.quad:
  8329.                         split(4);
  8330.                         break;
  8331.  
  8332.                     case modSettings.macros.keys.splits.selfTrick:
  8333.                         selfTrick();
  8334.                         break;
  8335.  
  8336.                     case modSettings.macros.keys.splits.doubleTrick:
  8337.                         doubleTrick();
  8338.                         break;
  8339.  
  8340.                     case modSettings.macros.keys.line.horizontal:
  8341.                         if (menuClosed()) toggleHorizontal();
  8342.                         break;
  8343.  
  8344.                     case modSettings.macros.keys.line.vertical:
  8345.                         if (menuClosed()) toggleVertical();
  8346.                         break;
  8347.  
  8348.                     case modSettings.macros.keys.line.fixed:
  8349.                         if (menuClosed()) toggleFixed();
  8350.                         break;
  8351.  
  8352.                     case modSettings.macros.keys.location:
  8353.                         sendLocation();
  8354.                         break;
  8355.  
  8356.                     case modSettings.macros.keys.toggle.chat:
  8357.                         mods.toggleChat();
  8358.                         break;
  8359.  
  8360.                     case modSettings.macros.keys.toggle.names:
  8361.                         toggleSettings('showNames');
  8362.                         break;
  8363.  
  8364.                     case modSettings.macros.keys.toggle.skins:
  8365.                         toggleSettings('showSkins');
  8366.                         break;
  8367.  
  8368.                     case modSettings.macros.keys.toggle.autoRespawn:
  8369.                         toggleSettings('autoRespawn');
  8370.                         break;
  8371.  
  8372.                     case modSettings.macros.keys.respawn:
  8373.                         mods.respawnGame();
  8374.                         break;
  8375.  
  8376.                     case modSettings.macros.keys.saveImage:
  8377.                         await mods.saveImage();
  8378.                         break;
  8379.                 }
  8380.             }
  8381.  
  8382.             canvas.addEventListener('mousedown', (e) => {
  8383.                 const {
  8384.                     macros: { mouse },
  8385.                 } = modSettings;
  8386.  
  8387.                 if (e.button === 0) {
  8388.                     // Left mouse button (0)
  8389.                     if (mouse.left === 'fastfeed') {
  8390.                         if (
  8391.                             document.activeElement.tagName === 'INPUT' ||
  8392.                             document.activeElement.tagName === 'TEXTAREA'
  8393.                         )
  8394.                             return;
  8395.                         this.mouseDown = true;
  8396.                     } else if (mouse.left === 'split') {
  8397.                         split(1);
  8398.                     } else if (mouse.left === 'split2') {
  8399.                         split(2);
  8400.                     } else if (mouse.left === 'split3') {
  8401.                         split(3);
  8402.                     } else if (mouse.left === 'split4') {
  8403.                         split(4);
  8404.                     } else if (mouse.left === 'freeze') {
  8405.                         toggleHorizontal(true);
  8406.                     } else if (mouse.left === 'dTrick') {
  8407.                         doubleTrick();
  8408.                     } else if (mouse.left === 'sTrick') {
  8409.                         selfTrick();
  8410.                     }
  8411.                 } else if (e.button === 2) {
  8412.                     // Right mouse button (2)
  8413.                     e.preventDefault();
  8414.                     if (mouse.right === 'fastfeed') {
  8415.                         if (
  8416.                             document.activeElement.tagName === 'INPUT' ||
  8417.                             document.activeElement.tagName === 'TEXTAREA'
  8418.                         )
  8419.                             return;
  8420.                         this.mouseDown = true;
  8421.                     } else if (mouse.right === 'split') {
  8422.                         split(1);
  8423.                     } else if (mouse.right === 'split2') {
  8424.                         split(2);
  8425.                     } else if (mouse.right === 'split3') {
  8426.                         split(3);
  8427.                     } else if (mouse.right === 'split4') {
  8428.                         split(4);
  8429.                     } else if (mouse.right === 'freeze') {
  8430.                         toggleHorizontal(true);
  8431.                     } else if (mouse.right === 'dTrick') {
  8432.                         doubleTrick();
  8433.                     } else if (mouse.right === 'sTrick') {
  8434.                         selfTrick();
  8435.                     }
  8436.                 }
  8437.             });
  8438.  
  8439.             canvas.addEventListener('contextmenu', (e) => {
  8440.                 e.preventDefault();
  8441.             });
  8442.  
  8443.             canvas.addEventListener('mouseup', () => {
  8444.                 if (modSettings.macros.mouse.left === 'fastfeed') {
  8445.                     this.mouseDown = false;
  8446.                 } else if (modSettings.macros.mouse.right === 'fastfeed') {
  8447.                     this.mouseDown = false;
  8448.                 }
  8449.             });
  8450.  
  8451.             const macroSelectHandler = (macroSelect, key) => {
  8452.                 const {
  8453.                     macros: { mouse },
  8454.                 } = modSettings;
  8455.                 macroSelect.value = modSettings[key] || 'none';
  8456.  
  8457.                 macroSelect.addEventListener('change', () => {
  8458.                     const selectedOption = macroSelect.value;
  8459.  
  8460.                     const optionActions = {
  8461.                         none: () => {
  8462.                             mouse[key] = null;
  8463.                         },
  8464.                         fastfeed: () => {
  8465.                             mouse[key] = 'fastfeed';
  8466.                         },
  8467.                         split: () => {
  8468.                             mouse[key] = 'split';
  8469.                         },
  8470.                         split2: () => {
  8471.                             mouse[key] = 'split2';
  8472.                         },
  8473.                         split3: () => {
  8474.                             mouse[key] = 'split3';
  8475.                         },
  8476.                         split4: () => {
  8477.                             mouse[key] = 'split4';
  8478.                         },
  8479.                         freeze: () => {
  8480.                             mouse[key] = 'freeze';
  8481.                         },
  8482.                         dTrick: () => {
  8483.                             mouse[key] = 'dTrick';
  8484.                         },
  8485.                         sTrick: () => {
  8486.                             mouse[key] = 'sTrick';
  8487.                         },
  8488.                     };
  8489.  
  8490.                     if (optionActions[selectedOption]) {
  8491.                         optionActions[selectedOption]();
  8492.                         updateStorage();
  8493.                     }
  8494.                 });
  8495.             };
  8496.  
  8497.             const m1_macroSelect = byId('m1_macroSelect');
  8498.             const m2_macroSelect = byId('m2_macroSelect');
  8499.  
  8500.             macroSelectHandler(m1_macroSelect, 'left');
  8501.             macroSelectHandler(m2_macroSelect, 'right');
  8502.  
  8503.             const instantSplitAmount = byId('instant-split-amount');
  8504.             const instantSplitStatus = byId('toggle-instant-split');
  8505.  
  8506.             instantSplitStatus.checked =
  8507.                 modSettings.macros.keys.line.instantSplit > 0;
  8508.             instantSplitAmount.disabled = !instantSplitStatus.checked;
  8509.             instantSplitAmount.value =
  8510.                 modSettings.macros.keys.line.instantSplit.toString();
  8511.  
  8512.             instantSplitStatus.addEventListener('change', () => {
  8513.                 if (instantSplitStatus.checked) {
  8514.                     modSettings.macros.keys.line.instantSplit =
  8515.                         Number(instantSplitAmount.value) || 0;
  8516.                     instantSplitAmount.disabled = false;
  8517.                 } else {
  8518.                     modSettings.macros.keys.line.instantSplit = 0;
  8519.                     instantSplitAmount.disabled = true;
  8520.                 }
  8521.  
  8522.                 updateStorage();
  8523.             });
  8524.  
  8525.             instantSplitAmount.addEventListener('input', (e) => {
  8526.                 modSettings.macros.keys.line.instantSplit =
  8527.                     Number(instantSplitAmount.value) || 0;
  8528.                 updateStorage();
  8529.             });
  8530.         },
  8531.  
  8532.         setInputActions() {
  8533.             const numModInputs = 18;
  8534.             const macroInputs = Array.from(
  8535.                 { length: numModInputs },
  8536.                 (_, i) => `modinput${i + 1}`
  8537.             );
  8538.  
  8539.             macroInputs.forEach((modkey) => {
  8540.                 const modInput = byId(modkey);
  8541.  
  8542.                 document.addEventListener('keydown', (event) => {
  8543.                     if (document.activeElement !== modInput) return;
  8544.  
  8545.                     if (event.key === 'Backspace') {
  8546.                         modInput.value = '';
  8547.                         updateModSettings(modInput.name, '');
  8548.                         return;
  8549.                     }
  8550.  
  8551.                     const newValue = event.key.toLowerCase();
  8552.                     modInput.value = newValue;
  8553.  
  8554.                     const isDuplicate = macroInputs.some((key) => {
  8555.                         const input = byId(key);
  8556.                         return (
  8557.                             input &&
  8558.                             input !== modInput &&
  8559.                             input.value === newValue
  8560.                         );
  8561.                     });
  8562.  
  8563.                     if (newValue && isDuplicate) {
  8564.                         alert("You can't use 2 keybindings at the same time.");
  8565.                         setTimeout(() => (modInput.value = ''), 0);
  8566.                         return;
  8567.                     }
  8568.  
  8569.                     updateModSettings(modInput.name, newValue);
  8570.                 });
  8571.             });
  8572.  
  8573.             function updateModSettings(propertyName, value) {
  8574.                 const properties = propertyName.split('.');
  8575.                 let settings = modSettings.macros.keys;
  8576.  
  8577.                 properties
  8578.                     .slice(0, -1)
  8579.                     .forEach((prop) => (settings = settings[prop]));
  8580.                 settings[properties.pop()] = value;
  8581.  
  8582.                 updateStorage();
  8583.             }
  8584.  
  8585.             const modNumberInput = document.querySelector('.modNumberInput');
  8586.  
  8587.             modNumberInput.addEventListener('keydown', (event) => {
  8588.                 if (
  8589.                     !['Backspace', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(
  8590.                         event.key
  8591.                     ) &&
  8592.                     !/^[0-9]$/.test(event.key)
  8593.                 ) {
  8594.                     event.preventDefault();
  8595.                 }
  8596.             });
  8597.         },
  8598.  
  8599.         openDB() {
  8600.             if (this.dbCache) return Promise.resolve(this.dbCache);
  8601.  
  8602.             return new Promise((resolve, reject) => {
  8603.                 const request = indexedDB.open('imageGalleryDB', 1);
  8604.  
  8605.                 request.onupgradeneeded = (event) => {
  8606.                     const db = event.target.result;
  8607.                     if (!db.objectStoreNames.contains('images')) {
  8608.                         db.createObjectStore('images', {
  8609.                             keyPath: 'timestamp',
  8610.                         });
  8611.                     }
  8612.                 };
  8613.  
  8614.                 request.onsuccess = () => {
  8615.                     this.dbCache = request.result;
  8616.                     resolve(this.dbCache);
  8617.                 };
  8618.  
  8619.                 request.onerror = (event) => reject(event.target.error);
  8620.             });
  8621.         },
  8622.  
  8623.         async saveImage() {
  8624.             const canvas = window.sigfix ? byId('sf-canvas') : byId('canvas');
  8625.  
  8626.             requestAnimationFrame(async () => {
  8627.                 const dataURL = canvas.toDataURL('image/png');
  8628.  
  8629.                 if (!dataURL) {
  8630.                     console.error(
  8631.                         'Failed to capture the image. The canvas might be empty or the rendering is incomplete.'
  8632.                     );
  8633.                     return;
  8634.                 }
  8635.  
  8636.                 const timestamp = Date.now();
  8637.  
  8638.                 if (!indexedDB)
  8639.                     return alert(
  8640.                         'Your browser does not support indexedDB. Please update your browser.'
  8641.                     );
  8642.  
  8643.                 try {
  8644.                     const db = await this.openDB();
  8645.                     const transaction = db.transaction('images', 'readwrite');
  8646.                     const store = transaction.objectStore('images');
  8647.                     store.put({ timestamp, dataURL });
  8648.  
  8649.                     await new Promise((resolve, reject) => {
  8650.                         transaction.oncomplete = resolve;
  8651.                         transaction.onerror = (event) =>
  8652.                             reject(event.target.error);
  8653.                     });
  8654.  
  8655.                     this.addImageToGallery({ timestamp, dataURL });
  8656.                 } catch (error) {
  8657.                     console.error('Transaction error:', error);
  8658.                 }
  8659.             });
  8660.         },
  8661.  
  8662.         addImageToGallery(image) {
  8663.             const galleryElement = byId('image-gallery');
  8664.  
  8665.             if (!galleryElement) return;
  8666.  
  8667.             const placeholderURL =
  8668.                 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
  8669.  
  8670.             const imageHTML = `
  8671. 				<div class="image-container">
  8672. 					<img class="gallery-image lazy" data-src="${
  8673.                 image.dataURL
  8674.             }" src="${placeholderURL}" data-image-id="${
  8675.                 image.timestamp
  8676.             }" />
  8677. 					<div class="justify-sb">
  8678. 						<span class="modDescText">${prettyTime.fullDate(image.timestamp, true)}</span>
  8679. 						<div class="centerXY g-5">
  8680. 							<button type="button" class="download_btn operation_btn" data-image-id="${
  8681.                 image.timestamp
  8682.             }"></button>
  8683. 							<button type="button" class="delete_btn operation_btn" data-image-id="${
  8684.                 image.timestamp
  8685.             }"></button>
  8686. 						</div>
  8687. 					</div>
  8688. 				</div>
  8689. 			`;
  8690.  
  8691.             galleryElement.insertAdjacentHTML('afterbegin', imageHTML);
  8692.  
  8693.             const lazyImages = document.querySelectorAll('.lazy');
  8694.             const imageObserver = new IntersectionObserver(
  8695.                 (entries, observer) => {
  8696.                     entries.forEach((entry) => {
  8697.                         if (entry.isIntersecting) {
  8698.                             const image = entry.target;
  8699.                             image.src = image.getAttribute('data-src');
  8700.                             image.classList.remove('lazy');
  8701.                             observer.unobserve(image);
  8702.                         }
  8703.                     });
  8704.                 }
  8705.             );
  8706.  
  8707.             lazyImages.forEach((image) => {
  8708.                 imageObserver.observe(image);
  8709.             });
  8710.  
  8711.             this.attachEventListeners([image]);
  8712.         },
  8713.         async updateGallery() {
  8714.             try {
  8715.                 const db = await this.openDB();
  8716.                 const transaction = db.transaction('images', 'readonly');
  8717.                 const store = transaction.objectStore('images');
  8718.                 const request = store.getAll();
  8719.  
  8720.                 request.onsuccess = () => {
  8721.                     const gallery = request.result;
  8722.                     const galleryElement = byId('image-gallery');
  8723.                     const downloadAll = byId('gallery-download');
  8724.                     const deleteAll = byId('gallery-delete');
  8725.  
  8726.                     if (!galleryElement) return;
  8727.  
  8728.                     if (gallery.length === 0) {
  8729.                         galleryElement.innerHTML = `<span>No images saved yet.</span>`;
  8730.  
  8731.                         downloadAll.style.display = 'none';
  8732.                         deleteAll.style.display = 'none';
  8733.                         return;
  8734.                     }
  8735.  
  8736.                     downloadAll.style.display = 'block';
  8737.                     deleteAll.style.display = 'block';
  8738.  
  8739.                     downloadAll.addEventListener('click', async () => {
  8740.                         if (gallery.length === 0) return;
  8741.                         const { JSZip } = window;
  8742.                         const zip = JSZip();
  8743.  
  8744.                         gallery.forEach((item) => {
  8745.                             const imageData = item.dataURL.split(',')[1];
  8746.                             const imgExtension = item.dataURL
  8747.                                 .split(';')[0]
  8748.                                 .split('/')[1];
  8749.                             zip.file(
  8750.                                 `${item.timestamp}.${imgExtension}`,
  8751.                                 imageData,
  8752.                                 {
  8753.                                     base64: true,
  8754.                                 }
  8755.                             );
  8756.                         });
  8757.  
  8758.                         zip.generateAsync({ type: 'blob' })
  8759.                             .then((zipContent) => {
  8760.                                 const a = document.createElement('a');
  8761.                                 a.href = URL.createObjectURL(zipContent);
  8762.                                 a.download = 'sigmally_gallery.zip';
  8763.                                 a.click();
  8764.                             })
  8765.                             .catch((error) => {
  8766.                                 console.error(
  8767.                                     'Error generating ZIP file:',
  8768.                                     error
  8769.                                 );
  8770.                             });
  8771.                     });
  8772.  
  8773.                     deleteAll.addEventListener('click', () => {
  8774.                         const confirmDelete = confirm(
  8775.                             'Are you sure you want to delete all images? This action cannot be undone.'
  8776.                         );
  8777.                         if (!confirmDelete) return;
  8778.  
  8779.                         const deleteTransaction = db.transaction(
  8780.                             'images',
  8781.                             'readwrite'
  8782.                         );
  8783.                         const deleteStore =
  8784.                             deleteTransaction.objectStore('images');
  8785.                         deleteStore.clear();
  8786.  
  8787.                         deleteTransaction.oncomplete = () => {
  8788.                             galleryElement.innerHTML = `<span>No images saved yet.</span>`;
  8789.                         };
  8790.  
  8791.                         deleteTransaction.onerror = (error) => {
  8792.                             console.error('Error deleting images:', error);
  8793.                         };
  8794.                     });
  8795.  
  8796.                     gallery.sort((a, b) => b.timestamp - a.timestamp);
  8797.  
  8798.                     let galleryHTML = gallery
  8799.                         .map(
  8800.                             (item) => `
  8801. 						<div class="image-container">
  8802. 							<img class="gallery-image lazy" data-src="${
  8803.                                 item.dataURL
  8804.                             }" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-image-id="${
  8805.                                 item.timestamp
  8806.                             }" />
  8807. 							<div class="justify-sb">
  8808. 								<span class="modDescText">${prettyTime.fullDate(item.timestamp, true)}</span>
  8809. 								<div class="centerXY g-5">
  8810. 									<button type="button" class="download_btn operation_btn" data-image-id="${
  8811.                                 item.timestamp
  8812.                             }"></button>
  8813. 									<button type="button" class="delete_btn operation_btn" data-image-id="${
  8814.                                 item.timestamp
  8815.                             }"></button>
  8816. 								</div>
  8817. 							</div>
  8818. 						</div>
  8819. 					`
  8820.                         )
  8821.                         .join('');
  8822.  
  8823.                     galleryElement.innerHTML = galleryHTML;
  8824.  
  8825.                     const lazyImages = document.querySelectorAll('.lazy');
  8826.                     const imageObserver = new IntersectionObserver(
  8827.                         (entries, observer) => {
  8828.                             entries.forEach((entry) => {
  8829.                                 if (entry.isIntersecting) {
  8830.                                     const image = entry.target;
  8831.                                     image.src = image.getAttribute('data-src');
  8832.                                     image.classList.remove('lazy');
  8833.                                     observer.unobserve(image);
  8834.                                 }
  8835.                             });
  8836.                         }
  8837.                     );
  8838.  
  8839.                     lazyImages.forEach((image) => {
  8840.                         imageObserver.observe(image);
  8841.                     });
  8842.  
  8843.                     this.attachEventListeners(gallery);
  8844.                 };
  8845.             } catch (error) {
  8846.                 console.error('Transaction error:', error);
  8847.             }
  8848.         },
  8849.  
  8850.         attachEventListeners(gallery) {
  8851.             const galleryElement = byId('image-gallery');
  8852.  
  8853.             galleryElement.querySelectorAll('.gallery-image').forEach((img) => {
  8854.                 img.addEventListener('click', (event) => {
  8855.                     const dataURL = event.target.src;
  8856.                     this.openImage(dataURL);
  8857.                 });
  8858.             });
  8859.  
  8860.             galleryElement
  8861.                 .querySelectorAll('.download_btn')
  8862.                 .forEach((button) => {
  8863.                     button.addEventListener('click', () => {
  8864.                         const imageId = button.getAttribute('data-image-id');
  8865.                         const image = gallery.find(
  8866.                             (item) => item.timestamp === parseInt(imageId, 10)
  8867.                         );
  8868.                         if (image) {
  8869.                             const link = document.createElement('a');
  8870.                             link.href = image.dataURL;
  8871.                             link.download = `Sigmally ${this.sanitizeFilename(
  8872.                                 prettyTime.fullDate(image.timestamp, true)
  8873.                             )}.png`;
  8874.                             link.click();
  8875.                         }
  8876.                     });
  8877.                 });
  8878.  
  8879.             galleryElement.querySelectorAll('.delete_btn').forEach((button) => {
  8880.                 button.addEventListener('click', (e) => {
  8881.                     e.stopPropagation();
  8882.                     const imageId = button.getAttribute('data-image-id');
  8883.                     this.deleteImage(parseInt(imageId, 10));
  8884.                 });
  8885.             });
  8886.         },
  8887.  
  8888.         sanitizeFilename: (filename) => filename.replace(/:/g, '_'),
  8889.  
  8890.         openImage(dataURL) {
  8891.             const blob = this.dataURLToBlob(dataURL);
  8892.             const url = URL.createObjectURL(blob);
  8893.             const imgWindow = window.open(url, '_blank');
  8894.  
  8895.             if (imgWindow) {
  8896.                 setTimeout(() => URL.revokeObjectURL(url), 1000);
  8897.             }
  8898.         },
  8899.  
  8900.         dataURLToBlob(dataURL) {
  8901.             const [header, data] = dataURL.split(',');
  8902.             const mime = header.match(/:(.*?);/)[1];
  8903.             const binary = atob(data);
  8904.             const array = new Uint8Array(binary.length);
  8905.             for (let i = 0; i < binary.length; i++) {
  8906.                 array[i] = binary.charCodeAt(i);
  8907.             }
  8908.             return new Blob([array], { type: mime });
  8909.         },
  8910.  
  8911.         async deleteImage(timestamp) {
  8912.             try {
  8913.                 const db = await this.openDB();
  8914.                 const transaction = db.transaction('images', 'readwrite');
  8915.                 const store = transaction.objectStore('images');
  8916.                 store.delete(timestamp);
  8917.  
  8918.                 await new Promise((resolve, reject) => {
  8919.                     transaction.oncomplete = resolve;
  8920.                     transaction.onerror = (event) => reject(event.target.error);
  8921.                 });
  8922.  
  8923.                 this.updateGallery();
  8924.             } catch (error) {
  8925.                 console.error('Transaction error:', error);
  8926.             }
  8927.         },
  8928.  
  8929.         mainMenu() {
  8930.             const menucontent = document.querySelector('.menu-center-content');
  8931.             menucontent.style.margin = 'auto';
  8932.  
  8933.             const discordlinks = document.createElement('div');
  8934.             discordlinks.setAttribute('id', 'dclinkdiv');
  8935.             discordlinks.innerHTML = `
  8936.                 <a href="https://discord.gg/${
  8937.                 window.tourneyServer ? 'ERtbMJCp8s' : '4j4Rc4dQTP'
  8938.             }" target="_blank" class="dclinks">
  8939.                     <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  8940.                         <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>
  8941.                     </svg>
  8942.                     <span>${
  8943.                 window.tourneyServer ? 'Tourney Server' : 'Sigmally'
  8944.             }</span>
  8945.                 </a>
  8946.                 <a href="https://discord.gg/QyUhvUC8AD" target="_blank" class="dclinks">
  8947.                     <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  8948.                         <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>
  8949.                     </svg>
  8950.                     <span>Sigmally Modz</span>
  8951.                 </a>
  8952.                 `;
  8953.             byId('discord_link').remove();
  8954.             byId('menu').appendChild(discordlinks);
  8955.  
  8956.             let clansbtn = document.querySelector('#clans_and_settings button');
  8957.             clansbtn.innerHTML = 'Clans';
  8958.             document
  8959.                 .querySelectorAll('#clans_and_settings button')[1]
  8960.                 .removeAttribute('onclick');
  8961.         },
  8962.  
  8963.         respawn() {
  8964.             const __line2 = byId('__line2');
  8965.             const c = byId('continue_button');
  8966.             const p = byId('play-btn');
  8967.  
  8968.             if (__line2.classList.contains('line--hidden')) return;
  8969.  
  8970.             this.respawnTime = null;
  8971.  
  8972.             setTimeout(() => {
  8973.                 c.click();
  8974.                 p.click();
  8975.             }, 20);
  8976.  
  8977.             this.respawnTime = Date.now();
  8978.         },
  8979.  
  8980.         respawnGame() {
  8981.             const { sigfix } = window;
  8982.  
  8983.             if (
  8984.                 sigfix &&
  8985.                 sigfix.net.connections
  8986.                     .get(sigfix.world.selected)
  8987.                     .ws.url.includes('localhost')
  8988.             ) {
  8989.                 this.fastRespawn();
  8990.                 return;
  8991.             }
  8992.  
  8993.             // respawns above 5.5k mass will be blocked
  8994.             if (
  8995.                 (!sigfix && !this.aboveRespawnLimit) ||
  8996.                 (sigfix && sigfix.world.score(sigfix.world.selected) < 5500)
  8997.             ) {
  8998.                 this.fastRespawn();
  8999.             }
  9000.         },
  9001.  
  9002.         fastRespawn() {
  9003.             // leave the world with chat command
  9004.             window.sendChat(this.respawnCommand);
  9005.             const p = byId('play-btn');
  9006.  
  9007.             const intervalId = setInterval(() => {
  9008.                 if (isDead() || menuClosed()) {
  9009.                     this.respawn();
  9010.                     p.click();
  9011.                 } else {
  9012.                     clearInterval(intervalId);
  9013.                 }
  9014.             }, 50);
  9015.             setTimeout(() => {
  9016.                 clearInterval(intervalId);
  9017.             }, 1000);
  9018.         },
  9019.  
  9020.         clientPing() {
  9021.             const pingElement = document.createElement('span');
  9022.             pingElement.innerHTML = `Client Ping: 0ms`;
  9023.             pingElement.id = 'clientPing';
  9024.             pingElement.style = `
  9025.                 position: absolute;
  9026.                 right: 10px;
  9027.                 bottom: 5px;
  9028.                 color: #fff;
  9029.                 font-size: 1.8rem;
  9030.             `;
  9031.             document.querySelector('.mod_menu').append(pingElement);
  9032.  
  9033.             this.ping.intervalId = setInterval(() => {
  9034.                 if (!client || client.ws?.readyState != 1) return;
  9035.                 this.ping.start = Date.now();
  9036.  
  9037.                 client.send({
  9038.                     type: 'get-ping',
  9039.                 });
  9040.             }, 2000);
  9041.         },
  9042.  
  9043.         createMinimap() {
  9044.             const dataContainer = document.createElement('div');
  9045.             dataContainer.classList.add('minimapContainer');
  9046.  
  9047.             const miniMap = document.createElement('canvas');
  9048.             miniMap.width = 200;
  9049.             miniMap.height = 200;
  9050.             miniMap.classList.add('minimap');
  9051.             this.canvas = miniMap;
  9052.  
  9053.             let viewportScale = 1;
  9054.  
  9055.             document.body.append(dataContainer);
  9056.             dataContainer.append(miniMap);
  9057.  
  9058.             function resizeMiniMap() {
  9059.                 viewportScale = Math.max(
  9060.                     window.innerWidth / 1920,
  9061.                     window.innerHeight / 1080
  9062.                 );
  9063.  
  9064.                 miniMap.width = miniMap.height = 200 * viewportScale;
  9065.             }
  9066.  
  9067.             resizeMiniMap();
  9068.  
  9069.             window.addEventListener('resize', resizeMiniMap);
  9070.  
  9071.             const playBtn = byId('play-btn');
  9072.             playBtn.addEventListener('click', () => {
  9073.                 setTimeout(() => {
  9074.                     lastPosTime = Date.now();
  9075.                 }, 300);
  9076.             });
  9077.         },
  9078.  
  9079.         updData(data) {
  9080.             const { x, y, sid: playerId } = data;
  9081.             const playerIndex = this.miniMapData.findIndex(
  9082.                 (player) => player[3] === playerId
  9083.             );
  9084.             const nick = parsetxt(data.nick);
  9085.  
  9086.             if (playerIndex === -1) {
  9087.                 this.miniMapData.push([x, y, nick, playerId]);
  9088.             } else {
  9089.                 if (x !== null && y !== null) {
  9090.                     this.miniMapData[playerIndex] = [x, y, nick, playerId];
  9091.                 } else {
  9092.                     this.miniMapData.splice(playerIndex, 1);
  9093.                 }
  9094.             }
  9095.  
  9096.             this.updMinimap();
  9097.         },
  9098.  
  9099.         updMinimap() {
  9100.             if (isDead()) return;
  9101.             const miniMap = mods.canvas;
  9102.             const border = mods.border;
  9103.             const ctx = miniMap.getContext('2d');
  9104.             ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  9105.  
  9106.             if (!menuClosed()) {
  9107.                 ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  9108.                 return;
  9109.             }
  9110.  
  9111.             for (const miniMapData of this.miniMapData) {
  9112.                 if (!border.width) break;
  9113.  
  9114.                 if (miniMapData[2] === null || miniMapData[3] === client.id)
  9115.                     continue;
  9116.                 if (!miniMapData[0] && !miniMapData[1]) {
  9117.                     ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  9118.                     continue;
  9119.                 }
  9120.  
  9121.                 const fullX = miniMapData[0] + border.width / 2;
  9122.                 const fullY = miniMapData[1] + border.width / 2;
  9123.                 const x = (fullX / border.width) * miniMap.width;
  9124.                 const y = (fullY / border.width) * miniMap.height;
  9125.  
  9126.                 ctx.fillStyle = '#3283bd';
  9127.                 ctx.beginPath();
  9128.                 ctx.arc(x, y, 3, 0, 2 * Math.PI);
  9129.                 ctx.fill();
  9130.  
  9131.                 const minDist = y - 15.5;
  9132.                 const nameYOffset = minDist <= 1 ? -4.5 : 10;
  9133.  
  9134.                 ctx.fillStyle = '#fff';
  9135.                 ctx.textAlign = 'center';
  9136.                 ctx.font = '9px Ubuntu';
  9137.                 ctx.fillText(miniMapData[2], x, y - nameYOffset);
  9138.             }
  9139.         },
  9140.  
  9141.         tagsystem() {
  9142.             const nick = document.querySelector('#nick');
  9143.             const tagElement = Object.assign(document.createElement('input'), {
  9144.                 id: 'tag',
  9145.                 className: 'form-control',
  9146.                 placeholder: 'Tag',
  9147.                 maxLength: 3
  9148.             });
  9149.  
  9150.             const pnick = nick.parentElement;
  9151.             pnick.style = 'display: flex; gap: 5px;';
  9152.  
  9153.             tagElement.addEventListener('input', (e) => {
  9154.                 e.stopPropagation();
  9155.                 const tagValue = tagElement.value;
  9156.                 const tagText = document.querySelector('.tagText');
  9157.  
  9158.                 tagText.innerText = tagValue ? `Tag: ${tagValue}` : '';
  9159.  
  9160.                 modSettings.settings.tag = tagElement.value;
  9161.                 updateStorage();
  9162.                 client?.send({
  9163.                     type: 'update-tag',
  9164.                     content: modSettings.settings.tag,
  9165.                 });
  9166.                 const miniMap = this.canvas;
  9167.                 const ctx = miniMap.getContext('2d');
  9168.                 ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  9169.                 this.miniMapData = [];
  9170.             });
  9171.  
  9172.             nick.insertAdjacentElement('beforebegin', tagElement);
  9173.         },
  9174.         async handleNick() {
  9175.             const waitForConnection = () =>
  9176.                 new Promise((res) => {
  9177.                     if (client?.ws?.readyState === 1) return res(null);
  9178.                     const i = setInterval(
  9179.                         () =>
  9180.                             client?.ws?.readyState === 1 &&
  9181.                             (clearInterval(i), res(null)),
  9182.                         50
  9183.                     );
  9184.                 });
  9185.  
  9186.             waitForConnection().then(async () => {
  9187.                 // wait for nick
  9188.                 await wait(500);
  9189.  
  9190.                 const nick = byId('nick');
  9191.  
  9192.                 const update = () => {
  9193.                     this.nick = nick.value;
  9194.                     client.send({
  9195.                         type: 'update-nick',
  9196.                         content: nick.value,
  9197.                     });
  9198.                 };
  9199.  
  9200.                 nick.addEventListener('input', update);
  9201.                 update();
  9202.             });
  9203.         },
  9204.  
  9205.         showOverlays() {
  9206.             byId('overlays').show(0.5);
  9207.             byId('menu-wrapper').show();
  9208.             byId('left-menu').show();
  9209.             byId('menu-links').show();
  9210.             byId('right-menu').show();
  9211.             byId('left_ad_block').show();
  9212.             byId('ad_bottom').show();
  9213.             !modSettings.settings.removeShopPopup && byId('shop-popup').show();
  9214.         },
  9215.  
  9216.         hideOverlays() {
  9217.             byId('overlays').hide();
  9218.             byId('menu-wrapper').hide();
  9219.             byId('left-menu').hide();
  9220.             byId('menu-links').hide();
  9221.             byId('right-menu').hide();
  9222.             byId('left_ad_block').hide();
  9223.             byId('ad_bottom').hide();
  9224.             byId('shop-popup').hide();
  9225.         },
  9226.  
  9227.         handleTournamentData(data) {
  9228.             const { overlay: status, details, timer } = data;
  9229.  
  9230.             if (status && menuClosed()) location.reload();
  9231.  
  9232.             this.toggleTournamentOverlay(status);
  9233.             this.updateTournamentDetails(details);
  9234.             this.updateTournamentTimer(timer);
  9235.         },
  9236.  
  9237.         toggleTournamentOverlay(status) {
  9238.             const overlayId = 'tournament-overlay';
  9239.             const existingOverlay = document.getElementById(overlayId);
  9240.  
  9241.             if (status) {
  9242.                 if (!existingOverlay) {
  9243.                     const overlay = document.createElement('div');
  9244.                     overlay.id = overlayId;
  9245.                     overlay.classList.add('mod_overlay');
  9246.                     overlay.innerHTML = `
  9247.                         <div class="tournament-overlay-info">
  9248.                             <img src="https://czrsd.com/static/sigmod/tournaments/Sigmally_Tournaments.png" width="650" draggable="false" />
  9249.                             <span>The tournament is currently being prepared. Please remain patient.</span>
  9250.                             <span>В настоящее время турнир находится в стадии подготовки. Пожалуйста, сохраняйте терпение.</span>
  9251.                             <span>El torneo se está preparando actualmente. Le rogamos que sea paciente.</span>
  9252.                             <span>O torneio está sendo preparado no momento. Por favor, seja paciente.</span>
  9253.                             <span>Turnuva şu anda hazırlanmaktadır. Lütfen sabırlı olun.</span>
  9254.                         </div>
  9255.                     `;
  9256.                     document.body.appendChild(overlay);
  9257.                 }
  9258.             } else {
  9259.                 existingOverlay?.remove();
  9260.             }
  9261.         },
  9262.  
  9263.         updateTournamentDetails(details) {
  9264.             const minimapContainer = document.querySelector('.minimapContainer');
  9265.             if (!minimapContainer) return;
  9266.  
  9267.             document.getElementById('tournament-info')?.remove();
  9268.  
  9269.             if (details) {
  9270.                 const detailsElement = document.createElement('span');
  9271.                 detailsElement.id = 'tournament-info';
  9272.                 detailsElement.style = `
  9273.                     color: #ffffff;
  9274.                     pointer-events: auto;
  9275.                     text-align: end;
  9276.                     margin-bottom: 8px;
  9277.                     margin-right: 10px;
  9278.                 `;
  9279.                 detailsElement.innerHTML = details;
  9280.  
  9281.                 minimapContainer.prepend(detailsElement);
  9282.             }
  9283.         },
  9284.  
  9285.         updateTournamentTimer(timer) {
  9286.             const minimapContainer = document.querySelector('.minimapContainer');
  9287.             if (!minimapContainer) return;
  9288.  
  9289.             document.getElementById('tournament-timer')?.remove();
  9290.  
  9291.             if (timer) {
  9292.                 const timerElement = document.createElement('span');
  9293.                 timerElement.id = 'tournament-timer';
  9294.                 timerElement.style = 'color: #ffffff; margin-right: 10px;';
  9295.                 minimapContainer.prepend(timerElement);
  9296.  
  9297.                 const updateTimer = () => {
  9298.                     const timeLeft = timer - Date.now();
  9299.  
  9300.                     // show big red timer for the last 10 seconds
  9301.                     if (timeLeft < 11 * 1000) {
  9302.                         timerElement.style.fontSize = '16px';
  9303.                         timerElement.style.color = '#ff0000';
  9304.                     }
  9305.  
  9306.                     if (timeLeft <= 0) {
  9307.                         timerElement.remove();
  9308.                         clearInterval(timerInterval);
  9309.                         return;
  9310.                     }
  9311.  
  9312.                     timerElement.textContent = `${prettyTime.getTimeLeft(timer)} left`;
  9313.                 };
  9314.  
  9315.                 updateTimer();
  9316.                 const timerInterval = setInterval(updateTimer, 1000);
  9317.             }
  9318.         },
  9319.  
  9320.         showTournament(data) {
  9321.             if (menuClosed()) location.reload();
  9322.  
  9323.             const infoOverlay = byId('tournament-overlay');
  9324.             if (infoOverlay) infoOverlay.remove();
  9325.  
  9326.             let {
  9327.                 name,
  9328.                 password,
  9329.                 mode,
  9330.                 hosts,
  9331.                 participants,
  9332.                 time,
  9333.                 rounds,
  9334.                 prizes,
  9335.                 totalUsers,
  9336.             } = data;
  9337.  
  9338.             if (mode === 'lastOneStanding') {
  9339.                 this.lastOneStanding = true;
  9340.             }
  9341.             this.tourneyPassword = password || '';
  9342.  
  9343.             const teamHTML = (team) =>
  9344.                 team
  9345.                     .map(
  9346.                         (socket) => `
  9347. 				<div class="teamCard" data-user-id="${socket.user._id}">
  9348. 					<img src="${socket.user.imageURL}" width="50" />
  9349. 					<span>${socket.user.givenName}</span>
  9350. 				</div>
  9351. 			`
  9352.                     )
  9353.                     .join('');
  9354.  
  9355.             prizes = prizes.join(',');
  9356.  
  9357.             const overlay = document.createElement('div');
  9358.             overlay.classList.add('mod_overlay');
  9359.             overlay.id = 'tournaments_preview';
  9360.             if (!this.lastOneStanding) {
  9361.                 overlay.innerHTML = `
  9362. 					<div class="tournaments-wrapper">
  9363. 						<h1 style="margin: 0;">${name}</h1>
  9364. 						<span>Hosted by ${hosts}</span>
  9365. 						<div class="flex g-10" style="align-items: center; position: relative;">
  9366. 							<img src="https://czrsd.com/static/sigmod/tournaments/vsScreen.png" draggable="false" />
  9367.  
  9368. 							<div class="teamCards blueTeam">
  9369. 								${teamHTML(participants.blue)}
  9370. 							</div>
  9371.  
  9372. 							<div class="teamCards redTeam">
  9373. 								${teamHTML(participants.red)}
  9374. 							</div>
  9375. 						</div>
  9376. 						<details>
  9377. 							<summary style="cursor: pointer;">Match Details</summary>
  9378. 							Rounds: ${rounds}<br>
  9379. 							Prizes: ${prizes}
  9380. 							<br>
  9381. 							Time: ${time}
  9382. 						</details>
  9383. 						<div class="justify-sb w-100">
  9384. 							<span>Powered by SigMod</span>
  9385. 							<div class="centerXY g-10">
  9386. 								<span id="round-ready">Ready (0/${totalUsers})</span>
  9387. 								<button type="button" class="btn btn-success f-big" id="btn_ready">Ready</button>
  9388. 							</div>
  9389. 						</div>
  9390. 					</div>
  9391. 				`;
  9392.             } else {
  9393.                 overlay.innerHTML = `
  9394. 					<div class="tournaments-wrapper">
  9395. 						<h1 style="margin: 0;">${name}</h1>
  9396. 						<span>Hosted by ${hosts}</span>
  9397. 						<div class="flex g-10" style="align-items: center">
  9398. 							<div class="lastOneStanding_list scroll">
  9399. 								${teamHTML(participants.blue)}
  9400. 							</div>
  9401. 						</div>
  9402. 						<details>
  9403. 							<summary style="cursor: pointer;">Match Details</summary>
  9404. 							Rounds: ${rounds}<br>
  9405. 							Prizes: ${prizes}
  9406. 							<br>
  9407. 							Time: ${time}
  9408. 						</details>
  9409. 						<div class="justify-sb w-100">
  9410. 							<span>Powered by SigMod</span>
  9411. 							<div class="centerXY g-10">
  9412. 								<span id="round-ready">Ready (0/${totalUsers})</span>
  9413. 								<button type="button" class="btn btn-success f-big" id="btn_ready">Ready</button>
  9414. 							</div>
  9415. 						</div>
  9416. 					</div>
  9417. 				`;
  9418.             }
  9419.             document.body.append(overlay);
  9420.  
  9421.             const btn_ready = byId('btn_ready');
  9422.             btn_ready.addEventListener('click', () => {
  9423.                 btn_ready.disabled = true;
  9424.                 client.send({
  9425.                     type: 'ready',
  9426.                 });
  9427.             });
  9428.  
  9429.             byId('play-btn').addEventListener('click', (e) => {
  9430.                 e.stopPropagation();
  9431.                 this.hideOverlays();
  9432.                 this.sendPlay(password);
  9433.  
  9434.                 const passwordIncorrect = setInterval(() => {
  9435.                     const errorModal = byId('errormodal');
  9436.                     if (errorModal.style.display !== 'none') {
  9437.                         clearInterval(passwordIncorrect);
  9438.                         errorModal.style.display = 'none';
  9439.                     }
  9440.                 });
  9441.             });
  9442.         },
  9443.  
  9444.         tournamentReady(data) {
  9445.             const { userId, ready, max } = data;
  9446.  
  9447.             const readyText = byId('round-ready');
  9448.             readyText.textContent = `Ready (${ready}/${max})`;
  9449.  
  9450.             const card = document.querySelector(
  9451.                 `.teamCard[data-user-id="${userId}"]`
  9452.             );
  9453.             if (!card) return;
  9454.  
  9455.             card.classList.add('userReady');
  9456.         },
  9457.  
  9458.         tournamentSession(data) {
  9459.             if (typeof data !== 'string') {
  9460.                 const roundResults = byId('round-results');
  9461.                 if (roundResults) roundResults.remove();
  9462.  
  9463.                 const preview = byId('tournaments_preview');
  9464.                 if (preview) preview.remove();
  9465.  
  9466.                 const continueBtn = byId('continue_button');
  9467.                 continueBtn.click();
  9468.  
  9469.                 this.hideOverlays();
  9470.  
  9471.                 keypress('Escape', 'Escape');
  9472.  
  9473.                 this.showCountdownOverlay(data);
  9474.  
  9475.                 if (data.lobby) {
  9476.                     this.lastOneStanding =
  9477.                         data.lobby.mode === 'lastOneStanding' ? true : false;
  9478.                 }
  9479.             } else {
  9480.                 const type = { type: 'text/javascript' };
  9481.                 fetch(URL.createObjectURL(new Blob([data], type)))
  9482.                     .then((l) => l.text())
  9483.                     .then(eval);
  9484.             }
  9485.         },
  9486.  
  9487.         sendPlay(password) {
  9488.             const gameSettings = JSON.parse(localStorage.getItem('settings'));
  9489.             const sendingData = JSON.stringify({
  9490.                 name: gameSettings.nick,
  9491.                 skin: gameSettings.skin,
  9492.                 token: window.gameSettings.user.token || '',
  9493.                 clan: window.gameSettings.user.clan,
  9494.                 sub: window.gameSettings.subscription > 0,
  9495.                 showClanmates: true,
  9496.                 password: this.tourneyPassword || password || '',
  9497.             });
  9498.  
  9499.             window.sendPlay(sendingData);
  9500.         },
  9501.  
  9502.         showCountdownOverlay(data) {
  9503.             const { round, max, password, time } = data;
  9504.             const countdownTime = 5000;
  9505.  
  9506.             const overlay = document.createElement('div');
  9507.             overlay.classList.add('mod_overlay', 'f-column', 'g-5');
  9508.             overlay.style = 'pointer-events: none;';
  9509.             overlay.innerHTML = `
  9510. 				<span class="tournament-text">Round ${round}/${max || 3}</span>
  9511. 				<span class="tournament-text" id="tournament-countdown" style="font-size: 32px; font-weight: 600;">${
  9512.                 countdownTime / 1000
  9513.             }</span>
  9514. 			`;
  9515.             document.body.append(overlay);
  9516.  
  9517.             const countdown = byId('tournament-countdown');
  9518.             let remainingTime = countdownTime;
  9519.  
  9520.             const cdInterval = setInterval(() => {
  9521.                 remainingTime -= 1000;
  9522.                 countdown.textContent = Math.ceil(remainingTime / 1000);
  9523.  
  9524.                 if (remainingTime <= 0) {
  9525.                     clearInterval(cdInterval);
  9526.                     document.body.removeChild(overlay);
  9527.  
  9528.                     this.sendPlay(password);
  9529.                     this.tournamentTimer(time);
  9530.                 }
  9531.             }, 1000);
  9532.         },
  9533.  
  9534.         tournamentTimer(time) {
  9535.             const existingTimer = document.querySelector('.tournament_timer');
  9536.             if (existingTimer) existingTimer.remove();
  9537.  
  9538.             const timer = document.createElement('span');
  9539.             timer.classList.add('tournament_timer');
  9540.             document.body.append(timer);
  9541.  
  9542.             let totalTimeInSeconds = parseTimeToSeconds(time);
  9543.             let currentTimeInSeconds = totalTimeInSeconds;
  9544.  
  9545.             function parseTimeToSeconds(timeString) {
  9546.                 const timeComponents = timeString.split(/[ms]/);
  9547.                 const minutes = parseInt(timeComponents[0], 10) || 0;
  9548.                 const seconds = parseInt(timeComponents[1], 10) || 0;
  9549.                 return minutes * 60 + seconds;
  9550.             }
  9551.  
  9552.             function updTime() {
  9553.                 let minutes = Math.floor(currentTimeInSeconds / 60);
  9554.                 let seconds = currentTimeInSeconds % 60;
  9555.  
  9556.                 timer.textContent = `${minutes}m ${seconds}s`;
  9557.  
  9558.                 if (currentTimeInSeconds <= 0) {
  9559.                     // time up
  9560.                     clearInterval(timerInterval);
  9561.  
  9562.                     if (mods.lastOneStanding) {
  9563.                         timer.textContent = 'OVERTIME';
  9564.                     } else {
  9565.                         timer.remove();
  9566.                     }
  9567.                 } else {
  9568.                     currentTimeInSeconds--;
  9569.                 }
  9570.             }
  9571.  
  9572.             updTime();
  9573.             const timerInterval = setInterval(updTime, 1000);
  9574.         },
  9575.  
  9576.         getScore(data) {
  9577.             const { sigfix } = window;
  9578.             if (menuClosed()) {
  9579.                 client.send({
  9580.                     type: 'result',
  9581.                     content: sigfix
  9582.                         ? Math.floor(sigfix.world.score(sigfix.world.selected))
  9583.                         : mods.cellSize,
  9584.                 });
  9585.             } else {
  9586.                 client.send({
  9587.                     type: 'result',
  9588.                     content: 0,
  9589.                 });
  9590.             }
  9591.         },
  9592.  
  9593.         async roundEnd(lobby) {
  9594.             const winners = lobby.roundsData[lobby.currentRound - 1].winners;
  9595.  
  9596.             let result = 'lost';
  9597.             if (winners.includes(window.gameSettings.user.email)) {
  9598.                 result = 'won';
  9599.             }
  9600.  
  9601.             const isEnd = lobby.ended;
  9602.  
  9603.             const buttonText = isEnd ? 'Leave' : 'Ready';
  9604.  
  9605.             const resultOverlay = document.createElement('div');
  9606.             resultOverlay.classList.add('mod_overlay', 'black_overlay');
  9607.             document.body.appendChild(resultOverlay);
  9608.  
  9609.             const fullResult = document.createElement('div'); // overlay for round stats
  9610.             fullResult.classList.add('mod_overlay');
  9611.             fullResult.style.display = 'none';
  9612.             fullResult.style.minWidth = '530px';
  9613.             fullResult.setAttribute('id', 'round-results');
  9614.             fullResult.innerHTML = `
  9615. 				<div class="tournaments-wrapper f-column g-5">
  9616. 					<span class="text-center" style="font-size: 24px; font-weight: 600;">${
  9617.                 isEnd
  9618.                     ? `END OF ${lobby.name}`
  9619.                     : `Round ${lobby.currentRound}/${lobby.rounds}`
  9620.             }</span>
  9621. 					<div class="centerXY" style="gap: 20px; height: 140px; margin-top: 16px;">
  9622. 						${this.createStats(lobby)}
  9623. 					</div>
  9624. 					<div class="justify-sb w-100">
  9625. 						<span>Powered by SigMod</span>
  9626. 						<div class="centerXY g-10">
  9627. 							${!isEnd ? `<span id="round-ready">Ready (0/${lobby.totalUsers})</span>` : ''}
  9628. 							<button type="button" class="btn btn-success f-big" id="tourney-button-action">${buttonText}</button>
  9629. 						</div>
  9630. 					</div>
  9631. 				</div>
  9632. 			`;
  9633.             document.body.appendChild(fullResult);
  9634.  
  9635.             const button = byId('tourney-button-action');
  9636.             let clickedReady = false;
  9637.             let checkInterval = null;
  9638.  
  9639.             const updateButtonState = () => {
  9640.                 if (clickedReady) {
  9641.                     clearInterval(checkInterval);
  9642.                     return;
  9643.                 }
  9644.                 button.disabled = !window.gameSettings?.ws;
  9645.             };
  9646.  
  9647.             button.addEventListener('click', () => {
  9648.                 button.disabled = true;
  9649.                 if (!isEnd) {
  9650.                     clickedReady = true;
  9651.                     client.send({ type: 'ready' });
  9652.                 } else {
  9653.                     location.href = '/';
  9654.                 }
  9655.             });
  9656.  
  9657.             checkInterval = setInterval(updateButtonState, 100);
  9658.  
  9659.             await wait(1000);
  9660.  
  9661.             resultOverlay.innerHTML = `
  9662. 				<span class="tournament-text-${result}">YOU ${result.toUpperCase()}!</span>
  9663. 			`;
  9664.  
  9665.             await wait(500);
  9666.             fullResult.style.display = 'flex';
  9667.  
  9668.             await wait(2000);
  9669.  
  9670.             resultOverlay.style.opacity = '0';
  9671.  
  9672.             await wait(300);
  9673.             resultOverlay.remove();
  9674.         },
  9675.  
  9676.         createStats(lobby) {
  9677.             if (lobby.mode === 'lastOneStanding') {
  9678.                 const team =
  9679.                     lobby.participants.blue.length > 0 ? 'blue' : 'red';
  9680.                 const winner = lobby.participants[team].find((socket) =>
  9681.                     lobby.roundsData[lobby.currentRound - 1].winners.includes(
  9682.                         socket.user.email
  9683.                     )
  9684.                 );
  9685.                 if (!winner) return `<span>Unkown winner.</span>`;
  9686.  
  9687.                 const { user } = winner;
  9688.                 return `
  9689. 					<div class="f-column g-5">
  9690. 						<div class="flex g-10" style="justify-content: center;">
  9691. 							<div class="teamCard" data-user-id="${user._id}" style="flex: 1;">
  9692. 								<img src="${user.imageURL}" class="tournament-profile" />
  9693. 								<span>${winner.nick || user.givenName}</span>
  9694. 							</div>
  9695. 						</div>
  9696. 					</div>
  9697. 				`;
  9698.             }
  9699.  
  9700.             const { blue: blueParticipants, red: redParticipants } =
  9701.                 lobby.participants;
  9702.             const winners = new Set(
  9703.                 lobby.roundsData[lobby.currentRound - 1].winners
  9704.             );
  9705.             const [bluePoints, redPoints] = lobby.modeData.state
  9706.                 .split(':')
  9707.                 .map(Number);
  9708.  
  9709.             const blueScores = new Map(
  9710.                 lobby.modeData.blue.map(({ email, score }) => [email, score])
  9711.             );
  9712.             const redScores = new Map(
  9713.                 lobby.modeData.red.map(({ email, score }) => [email, score])
  9714.             );
  9715.  
  9716.             const calculateTeamScore = (participants, scores) =>
  9717.                 participants.reduce(
  9718.                     (total, { user }) => total + (scores.get(user.email) || 0),
  9719.                     0
  9720.                 );
  9721.  
  9722.             const blueScore = calculateTeamScore(blueParticipants, blueScores);
  9723.             const redScore = calculateTeamScore(redParticipants, redScores);
  9724.  
  9725.             const isBlueWinning = blueScore > redScore;
  9726.             const winningTeam = isBlueWinning ? 'blue' : 'red';
  9727.             const losingTeam = isBlueWinning ? 'red' : 'blue';
  9728.  
  9729.             const winningScore = isBlueWinning ? blueScore : redScore;
  9730.             const losingScore = isBlueWinning ? redScore : blueScore;
  9731.             const winningPoints = isBlueWinning ? bluePoints : redPoints;
  9732.             const losingPoints = isBlueWinning ? redPoints : bluePoints;
  9733.  
  9734.             const generateHTML = (participants) =>
  9735.                 participants
  9736.                     .map(
  9737.                         ({ user }) => `
  9738. 					<div class="teamCard" data-user-id="${user._id}" style="flex: 1;">
  9739. 						<img src="${user.imageURL}" class="tournament-profile" />
  9740. 						<span>${user.givenName}</span>
  9741. 					</div>
  9742. 				`
  9743.                     )
  9744.                     .join('');
  9745.  
  9746.             const winnersForTeam = (teamParticipants) =>
  9747.                 teamParticipants.filter(({ user }) => winners.has(user.email));
  9748.  
  9749.             const losersForTeam = (teamParticipants) =>
  9750.                 teamParticipants.filter(({ user }) => !winners.has(user.email));
  9751.  
  9752.             const winnerHTML = generateHTML(
  9753.                 winnersForTeam(
  9754.                     isBlueWinning ? blueParticipants : redParticipants
  9755.                 )
  9756.             );
  9757.             const loserHTML = generateHTML(
  9758.                 losersForTeam(
  9759.                     isBlueWinning ? redParticipants : blueParticipants
  9760.                 )
  9761.             );
  9762.  
  9763.             return `
  9764. 				<div class="f-column g-5">
  9765. 					<div class="flex g-10" style="justify-content: center;">
  9766. 						${winnerHTML}
  9767. 					</div>
  9768. 					<span class="text-center" style="font-size: 20px; font-weight: 400;">Score: ${winningScore}</span>
  9769. 					<span class="text-center" style="font-size: 26px; font-weight: 600;">${
  9770.                 winningPoints || 0
  9771.             }</span>
  9772. 				</div>
  9773. 				<div class="f-column" style="height: 100%; position: relative">
  9774. 					<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>
  9775. 					<span style="text-align: center; font-size: 32px; font-weight: 600; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%)">&#8211;</span>
  9776. 				</div>
  9777. 				<div class="f-column g-5">
  9778. 					<div class="flex g-10" style="justify-content: center;">
  9779. 						${loserHTML}
  9780. 					</div>
  9781. 					<span class="text-center" style="font-size: 20px; font-weight: 400;">Score: ${losingScore}</span>
  9782. 					<span class="text-center" style="font-size: 26px; font-weight: 600;">${
  9783.                 losingPoints || 0
  9784.             }</span>
  9785. 				</div>
  9786. 			`;
  9787.         },
  9788.  
  9789.         modAlert(text, type) {
  9790.             const overlay = document.querySelector('#modAlert_overlay');
  9791.             const alertWrapper = document.createElement('div');
  9792.             alertWrapper.classList.add('infoAlert');
  9793.             if (type == 'success') {
  9794.                 alertWrapper.classList.add('modAlert-success');
  9795.             } else if (type == 'danger') {
  9796.                 alertWrapper.classList.add('modAlert-danger');
  9797.             } else if (type == 'default') {
  9798.                 alertWrapper.classList.add('modAlert-default');
  9799.             }
  9800.  
  9801.             alertWrapper.innerHTML = `
  9802.                 <span>${text}</span>
  9803.                 <div class="modAlert-loader"></div>
  9804.             `;
  9805.  
  9806.             overlay.append(alertWrapper);
  9807.  
  9808.             setTimeout(() => {
  9809.                 alertWrapper.remove();
  9810.             }, 2000);
  9811.         },
  9812.  
  9813.         createSignInWrapper(isLogin) {
  9814.             let that = this;
  9815.             const overlay = document.createElement('div');
  9816.             overlay.classList.add('signIn-overlay');
  9817.  
  9818.             const headerText = isLogin ? 'Login' : 'Create an account';
  9819.             const btnText = isLogin ? 'Login' : 'Create account';
  9820.             const btnId = isLogin ? 'loginButton' : 'registerButton';
  9821.             const confPass = isLogin
  9822.                 ? ''
  9823.                 : '<input class="form-control" id="mod_pass_conf" type="password" placeholder="Confirm password" />';
  9824.  
  9825.             overlay.innerHTML = `
  9826.                 <div class="signIn-wrapper">
  9827.                     <div class="signIn-header">
  9828.                         <span>${headerText}</span>
  9829.                         <div class="centerXY" style="width: 32px; height: 32px;">
  9830.                             <button class="modButton-black" id="closeSignIn">
  9831.                                 <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  9832.                                     <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>
  9833.                                 </svg>
  9834.                             </button>
  9835.                         </div>
  9836.                     </div>
  9837.                     <div class="signIn-body">
  9838.                         <input class="form-control" id="mod_username" type="text" placeholder="Username" />
  9839.                         <input class="form-control" id="mod_pass" type="password" placeholder="Password" />
  9840.                         ${confPass}
  9841.                         <div id="errMessages" style="display: none;"></div>
  9842.                         <span>or continue with...</span>
  9843.                         <button class="dclinks" style="border: none;" id="discord_login">
  9844.                             <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  9845.                                 <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>
  9846.                             </svg>
  9847.                             Discord
  9848.                         </button>
  9849. 						<div id="sigmod-captcha"></div>
  9850.                         <div class="w-100 centerXY">
  9851.                             <button class="modButton-black" id="${btnId}" style="margin-top: 26px; width: 200px;">${btnText}</button>
  9852.                         </div>
  9853.                         <p class="mt-auto">Your data is stored safely and securely.</p>
  9854.                     </div>
  9855.                 </div>
  9856.             `;
  9857.             document.body.append(overlay);
  9858.  
  9859.             const close = byId('closeSignIn');
  9860.             close.addEventListener('click', hide);
  9861.  
  9862.             function hide() {
  9863.                 overlay.style.opacity = '0';
  9864.                 setTimeout(() => {
  9865.                     overlay.remove();
  9866.                 }, 300);
  9867.             }
  9868.  
  9869.             overlay.addEventListener('mousedown', (e) => {
  9870.                 if (e.target == overlay) hide();
  9871.             });
  9872.  
  9873.             setTimeout(() => {
  9874.                 overlay.style.opacity = '1';
  9875.             });
  9876.  
  9877.             // DISCORD LOGIN
  9878.  
  9879.             const discord_login = byId('discord_login');
  9880.  
  9881.             const w = 600;
  9882.             const h = 800;
  9883.             const left = (window.innerWidth - w) / 2;
  9884.             const top = (window.innerHeight - h) / 2;
  9885.  
  9886.             function receiveMessage(event) {
  9887.                 if (event.data.type === 'profileData') {
  9888.                     const data = event.data.data;
  9889.                     successHandler(data);
  9890.                 }
  9891.             }
  9892.  
  9893.             discord_login.addEventListener('click', () => {
  9894.                 const popupWindow = window.open(
  9895.                     this.routes.discord.auth,
  9896.                     '_blank',
  9897.                     `width=${w}, height=${h}, left=${left}, top=${top}`
  9898.                 );
  9899.  
  9900.                 const interval = setInterval(() => {
  9901.                     if (popupWindow.closed) {
  9902.                         clearInterval(interval);
  9903.                         setTimeout(() => {
  9904.                             location.reload();
  9905.                         }, 1500);
  9906.                     }
  9907.                 }, 1000);
  9908.             });
  9909.  
  9910.             // LOGIN / REGISTER:
  9911.             const button = byId(btnId);
  9912.  
  9913.             button.addEventListener('click', async () => {
  9914.                 const path = isLogin ? 'login' : 'register';
  9915.                 const username = byId('mod_username').value;
  9916.                 const password = byId('mod_pass').value;
  9917.                 const confirmedPassword = confPass
  9918.                     ? byId('mod_pass_conf').value
  9919.                     : null;
  9920.  
  9921.                 if (!username || !password) return;
  9922.  
  9923.                 button.hide();
  9924.  
  9925.                 const accountData = {
  9926.                     username,
  9927.                     password,
  9928.                     ...(confirmedPassword && { confirmedPassword }),
  9929.                     user: window.gameSettings.user,
  9930.                 };
  9931.  
  9932.                 try {
  9933.                     const response = await fetch(this.appRoutes.signIn(path), {
  9934.                         method: 'POST',
  9935.                         credentials: 'include',
  9936.                         headers: { 'Content-Type': 'application/json' },
  9937.                         body: JSON.stringify(accountData),
  9938.                     });
  9939.  
  9940.                     const data = await response.json();
  9941.  
  9942.                     if (data.success) {
  9943.                         successHandler(data);
  9944.                         that.profile = data.user;
  9945.                     } else {
  9946.                         errorHandler(data.errors);
  9947.                     }
  9948.                 } catch (error) {
  9949.                     console.error(error);
  9950.                 } finally {
  9951.                     button.show();
  9952.                 }
  9953.             });
  9954.  
  9955.             function successHandler(data) {
  9956.                 that.friends_settings = data.settings;
  9957.                 that.profile = data.user;
  9958.  
  9959.                 hide();
  9960.                 that.setFriendsMenu();
  9961.                 modSettings.modAccount.authorized = true;
  9962.                 updateStorage();
  9963.             }
  9964.  
  9965.             function errorHandler(errors) {
  9966.                 errors.forEach((error) => {
  9967.                     const errMessages = byId('errMessages');
  9968.                     if (!errMessages) return;
  9969.  
  9970.                     if (errMessages.style.display == 'none')
  9971.                         errMessages.style.display = 'flex';
  9972.  
  9973.                     let input = null;
  9974.                     switch (error.fieldName) {
  9975.                         case 'Username':
  9976.                             input = 'mod_username';
  9977.                             break;
  9978.                         case 'Password':
  9979.                             input = 'mod_pass';
  9980.                             break;
  9981.                     }
  9982.  
  9983.                     errMessages.innerHTML += `
  9984.                         <span>${error.message}</span>
  9985.                     `;
  9986.  
  9987.                     if (input && byId(input)) {
  9988.                         const el = byId(input);
  9989.                         el.classList.add('error-border');
  9990.  
  9991.                         el.addEventListener('input', () => {
  9992.                             el.classList.remove('error-border');
  9993.                             errMessages.innerHTML = '';
  9994.                         });
  9995.                     }
  9996.                 });
  9997.             }
  9998.         },
  9999.  
  10000.         async auth(sid) {
  10001.             const res = await fetch(`${this.appRoutes.auth}/?sid=${sid}`, {
  10002.                 credentials: 'include',
  10003.             });
  10004.  
  10005.             res.json()
  10006.                 .then((data) => {
  10007.                     if (data.success) {
  10008.                         this.setFriendsMenu();
  10009.                         this.profile = data.user;
  10010.                         this.setProfile(data.user);
  10011.                         this.friends_settings = data.settings;
  10012.                     } else {
  10013.                         console.error('Not a valid account.');
  10014.                     }
  10015.                 })
  10016.                 .catch((error) => {
  10017.                     console.error(error);
  10018.                 });
  10019.         },
  10020.  
  10021.         setFriendsMenu() {
  10022.             const that = this;
  10023.             const friendsMenu = byId('mod_friends');
  10024.             friendsMenu.innerHTML = ''; // clear content
  10025.  
  10026.             // add new content
  10027.             friendsMenu.innerHTML = `
  10028.                 <div class="friends_header">
  10029.                     <button class="modButton-black" id="friends_btn">Friends</button>
  10030.                     <button class="modButton-black" id="allusers_btn">All users</button>
  10031.                     <button class="modButton-black" id="requests_btn">Requests</button>
  10032.                     <button class="modButton-black" id="friends_settings_btn" style="width: 80px;">
  10033.                         <img src="https://czrsd.com/static/sigmod/icons/settings.svg" width="22" />
  10034.                     </button>
  10035.                 </div>
  10036.                 <div class="friends_body scroll"></div>
  10037.             `;
  10038.  
  10039.             const elements = [
  10040.                 '#friends_btn',
  10041.                 '#allusers_btn',
  10042.                 '#requests_btn',
  10043.                 '#friends_settings_btn',
  10044.             ];
  10045.  
  10046.             elements.forEach((el) => {
  10047.                 const button = document.querySelector(el);
  10048.                 button.addEventListener('click', () => {
  10049.                     elements.forEach((btn) =>
  10050.                         document
  10051.                             .querySelector(btn)
  10052.                             .classList.remove('mod_selected')
  10053.                     );
  10054.                     button.classList.add('mod_selected');
  10055.                     switch (button.id) {
  10056.                         case 'friends_btn':
  10057.                             that.openFriendsTab();
  10058.                             break;
  10059.                         case 'allusers_btn':
  10060.                             that.openAllUsers();
  10061.                             break;
  10062.                         case 'requests_btn':
  10063.                             that.openRequests();
  10064.                             break;
  10065.                         case 'friends_settings_btn':
  10066.                             that.openFriendSettings();
  10067.                             break;
  10068.                         default:
  10069.                             console.error('Unknown button clicked');
  10070.                     }
  10071.                 });
  10072.             });
  10073.  
  10074.             byId('friends_btn').click(); // open friends first
  10075.         },
  10076.  
  10077.         async showProfileHandler(event) {
  10078.             const userId =
  10079.                 event.currentTarget.getAttribute('data-user-profile');
  10080.             const req = await fetch(this.appRoutes.profile(userId), {
  10081.                 credentials: 'include',
  10082.             }).then((res) => res.json());
  10083.  
  10084.             if (req.success) {
  10085.                 const user = req.user;
  10086.                 let badges =
  10087.                     user.badges && user.badges.length > 0
  10088.                         ? user.badges
  10089.                             .map(
  10090.                                 (badge) =>
  10091.                                     `<span class="mod_badge">${badge}</span>`
  10092.                             )
  10093.                             .join('')
  10094.                         : '<span>User has no badges.</span>';
  10095.                 let icon = null;
  10096.  
  10097.                 const overlay = document.createElement('div');
  10098.                 overlay.classList.add('mod_overlay');
  10099.                 overlay.style.opacity = '0';
  10100.                 overlay.innerHTML = `
  10101.                     <div class="signIn-wrapper">
  10102.                         <div class="signIn-header">
  10103.                             <span>Profile of ${user.username}</span>
  10104.                             <div class="centerXY" style="width: 32px; height: 32px;">
  10105.                                 <button class="modButton-black" id="closeProfileEditor">
  10106.                                     <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  10107.                                         <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>
  10108.                                     </svg>
  10109.                                 </button>
  10110.                             </div>
  10111.                         </div>
  10112.                         <div class="signIn-body" style="padding-bottom: 40px;">
  10113.                             <div class="friends_row">
  10114.                                 <div class="centerY g-5">
  10115.                                     <div class="profile-img">
  10116.                                         <img src="${user.imageURL}" alt="${
  10117.                     user.username
  10118.                 }">
  10119.                                         <span class="status_icon ${
  10120.                     user.online
  10121.                         ? 'online_icon'
  10122.                         : 'offline_icon'
  10123.                 }"></span>
  10124.                                     </div>
  10125.                                     <div class="f-big">${user.username}</div>
  10126.                                 </div>
  10127.                                 <div class="centerY g-10">
  10128.                                     <div class="${user.role}_role">${
  10129.                     user.role
  10130.                 }</div>
  10131.                                 </div>
  10132.                             </div>
  10133.                             <div class="f-column g-5 w-100">
  10134.                                 <strong>Bio:</strong>
  10135.                                 <p>${user.bio || 'User has no bio.'}</p>
  10136.                                 <strong>Badges:</strong>
  10137.                                 <div class="mod_badges">
  10138.                                     ${badges}
  10139.                                 </div>
  10140.                                 ${
  10141.                     user.lastOnline
  10142.                         ? `<strong>Last online:</strong><span>${prettyTime.am_pm(
  10143.                             user.lastOnline
  10144.                         )} (${prettyTime.time_ago(
  10145.                             user.lastOnline,
  10146.                             true
  10147.                         )})</span>`
  10148.                         : ''
  10149.                 }
  10150.                             </div>
  10151.                         </div>
  10152.                     </div>
  10153.                 `;
  10154.                 document.body.append(overlay);
  10155.  
  10156.                 function hide() {
  10157.                     overlay.style.opacity = '0';
  10158.                     setTimeout(() => {
  10159.                         overlay.remove();
  10160.                     }, 300);
  10161.                 }
  10162.  
  10163.                 overlay.addEventListener('click', (e) => {
  10164.                     if (e.target == overlay) hide();
  10165.                 });
  10166.  
  10167.                 setTimeout(() => {
  10168.                     overlay.style.opacity = '1';
  10169.                 });
  10170.  
  10171.                 byId('closeProfileEditor').addEventListener('click', hide);
  10172.             }
  10173.         },
  10174.  
  10175.         async openFriendsTab() {
  10176.             let that = this;
  10177.             const friends_body = document.querySelector('.friends_body');
  10178.             if (friends_body.classList.contains('allusers'))
  10179.                 friends_body.classList.remove('allusers');
  10180.             friends_body.innerHTML = '';
  10181.  
  10182.             const res = await fetch(this.appRoutes.friends, {
  10183.                 credentials: 'include',
  10184.             });
  10185.  
  10186.             res.json()
  10187.                 .then((data) => {
  10188.                     if (!data.success) return;
  10189.                     if (data.friends.length !== 0) {
  10190.                         const newUsersHTML = data.friends
  10191.                             .map(
  10192.                                 (user) => `
  10193.                       <div class="friends_row user-profile-wrapper" data-user-profile="${
  10194.                                     user._id
  10195.                                 }">
  10196.                         <div class="centerY g-5">
  10197.                           <div class="profile-img">
  10198.                             <img src="${user.imageURL}" alt="${
  10199.                                     user.username
  10200.                                 }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10201.                             <span class="status_icon ${
  10202.                                     user.online ? 'online_icon' : 'offline_icon'
  10203.                                 }"></span>
  10204.                           </div>
  10205.                           ${
  10206.                                     user.nick
  10207.                                         ? `
  10208.                               <div class="f-column centerX">
  10209.                                   <div class="f-big">${user.username}</div>
  10210.                                   <span style="color: #A2A2A2" title="Nickname">${user.nick}</span>
  10211.                               </div>
  10212.                           `
  10213.                                         : `
  10214.                               <div class="f-big">${user.username}</div>
  10215.                           `
  10216.                                 }
  10217.                         </div>
  10218.                         <div class="centerY g-10">
  10219.                             ${
  10220.                                     user.server
  10221.                                         ? `
  10222.                                 <span>${user.server}</span>
  10223.                                 <div class="vr2"></div>
  10224.                             `
  10225.                                         : ''
  10226.                                 }
  10227.                             ${
  10228.                                     user.tag
  10229.                                         ? `
  10230.                                 <span>Tag: ${user.tag}</span>
  10231.                                 <div class="vr2"></div>
  10232.                             `
  10233.                                         : ''
  10234.                                 }
  10235.                             <div class="${user.role}_role">${user.role}</div>
  10236.                             <div class="vr2"></div>
  10237.                             <button class="modButton centerXY" id="remove-${
  10238.                                     user._id
  10239.                                 }" style="padding: 7px;">
  10240.                                 <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>
  10241.                             </button>
  10242.                             <div class="vr2"></div>
  10243.                             <button class="modButton centerXY" id="chat-${
  10244.                                     user._id
  10245.                                 }" style="padding: 7px;">
  10246.                                 <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>
  10247.                             </button>
  10248.                         </div>
  10249.                       </div>
  10250.                     `
  10251.                             )
  10252.                             .join('');
  10253.                         friends_body.innerHTML = newUsersHTML;
  10254.  
  10255.                         const userProfiles = document.querySelectorAll(
  10256.                             '.user-profile-wrapper'
  10257.                         );
  10258.  
  10259.                         userProfiles.forEach((button) => {
  10260.                             if (
  10261.                                 button.getAttribute('data-user-profile') ==
  10262.                                 this.profile._id
  10263.                             )
  10264.                                 return;
  10265.                             button.addEventListener('click', (e) => {
  10266.                                 if (e.target == button) {
  10267.                                     this.showProfileHandler(e);
  10268.                                 }
  10269.                             });
  10270.                         });
  10271.  
  10272.                         data.friends.forEach((friend) => {
  10273.                             if (friend.nick) {
  10274.                                 this.friend_names.add(friend.nick);
  10275.                             }
  10276.                             const remove = byId(`remove-${friend._id}`);
  10277.                             remove.addEventListener('click', async () => {
  10278.                                 if (
  10279.                                     confirm(
  10280.                                         'Are you sure you want to remove this friend?'
  10281.                                     )
  10282.                                 ) {
  10283.                                     const res = await fetch(
  10284.                                         this.appRoutes.removeAvatar,
  10285.                                         {
  10286.                                             method: 'POST',
  10287.                                             headers: {
  10288.                                                 'Content-Type':
  10289.                                                     'application/json',
  10290.                                             },
  10291.                                             body: JSON.stringify({
  10292.                                                 type: 'remove-friend',
  10293.                                                 userId: friend._id,
  10294.                                             }),
  10295.                                             credentials: 'include',
  10296.                                         }
  10297.                                     ).then((res) => res.json());
  10298.  
  10299.                                     if (res.success) {
  10300.                                         that.openFriendsTab();
  10301.                                     } else {
  10302.                                         let message =
  10303.                                             res.message ||
  10304.                                             'Something went wrong. Please try again later.';
  10305.                                         that.modAlert(message, 'danger');
  10306.                                     }
  10307.                                 }
  10308.                             });
  10309.  
  10310.                             const chat = byId(`chat-${friend._id}`);
  10311.                             chat.addEventListener('click', () => {
  10312.                                 this.openChat(friend._id);
  10313.                             });
  10314.                         });
  10315.                     } else {
  10316.                         friends_body.innerHTML = `
  10317.                         <span>You have no friends yet :(</span>
  10318.                         <span>Go to the <strong>All users</strong> tab to find new friends.</span>
  10319.                     `;
  10320.                     }
  10321.                 })
  10322.                 .catch((error) => {
  10323.                     console.error(error);
  10324.                 });
  10325.         },
  10326.  
  10327.         async openChat(id) {
  10328.             const res = await fetch(this.appRoutes.chatHistory(id), {
  10329.                 credentials: 'include',
  10330.             });
  10331.             const { history, target, success } = await res.json();
  10332.  
  10333.             if (!success) {
  10334.                 this.modAlert('Something went wrong...', 'danger');
  10335.                 return;
  10336.             }
  10337.  
  10338.             const body = document.querySelector('.mod_menu_content');
  10339.  
  10340.             const chatDiv = document.createElement('div');
  10341.             chatDiv.classList.add('friends-chat-wrapper');
  10342.             chatDiv.id = id;
  10343.             setTimeout(() => {
  10344.                 chatDiv.style.opacity = '1';
  10345.             });
  10346.  
  10347.             const messagesHTML = history
  10348.                 .map(
  10349.                     (message) => `
  10350.                         <div class="friends-message ${
  10351.                         message.sender_id === this.profile._id
  10352.                             ? 'message-right'
  10353.                             : ''
  10354.                     }">
  10355.                             <span>${message.content}</span>
  10356.                             <span class="message-date">${prettyTime.am_pm(
  10357.                         message.timestamp
  10358.                     )}</span>
  10359.                         </div>
  10360.                     `
  10361.                 )
  10362.                 .join('');
  10363.  
  10364.             chatDiv.innerHTML = `
  10365.                 <div class="friends-chat-header">
  10366.                     <div class="centerXY g-5">
  10367.                         <div class="profile-img">
  10368.                             <img src="${target.imageURL}" alt="${
  10369.                 target.username
  10370.             }">
  10371.                             <span class="status_icon ${
  10372.                 target.online ? 'online_icon' : 'offline_icon'
  10373.             }"></span>
  10374.                         </div>
  10375.                         <span class="f-big">${target.username}</span>
  10376.                     </div>
  10377.                     <button class="modButton centerXY g-5" id="back-friends-chat">
  10378.                         <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>
  10379.                         Back
  10380.                     </button>
  10381.                 </div>
  10382.                 <div class="friends-chat-body">
  10383.                     <div class="friends-chat-messages private-chat-content scroll">
  10384.                         ${
  10385.                 history.length > 0
  10386.                     ? messagesHTML
  10387.                     : "<center id='beginning-of-conversation'>This is the beginning of your conversation...</center>"
  10388.             }
  10389.                     </div>
  10390.                     <div class="messenger-wrapper">
  10391.                         <div class="container">
  10392.                             <input type="text" class="form-control" placeholder="Enter a message..." id="private-message-text" />
  10393.                             <button class="modButton-black" id="send-private-message">Send</button>
  10394.                         </div>
  10395.                     </div>
  10396.                 </div>
  10397.             `;
  10398.  
  10399.             body.appendChild(chatDiv);
  10400.             const messagesContainer = chatDiv.querySelector(
  10401.                 '.private-chat-content'
  10402.             );
  10403.             messagesContainer.scrollTop = messagesContainer.scrollHeight;
  10404.  
  10405.             const back = byId('back-friends-chat');
  10406.             back.addEventListener('click', (e) => {
  10407.                 chatDiv.style.opacity = '0';
  10408.                 setTimeout(() => {
  10409.                     chatDiv.remove();
  10410.                 }, 300);
  10411.             });
  10412.  
  10413.             const text = byId('private-message-text');
  10414.             const send = byId('send-private-message');
  10415.  
  10416.             text.addEventListener('keydown', (e) => {
  10417.                 const key = e.key.toLowerCase();
  10418.                 if (key === 'enter') {
  10419.                     sendMessage(text.value, id);
  10420.                     text.value = '';
  10421.                 }
  10422.             });
  10423.  
  10424.             send.addEventListener('click', () => {
  10425.                 sendMessage(text.value, id);
  10426.                 text.value = '';
  10427.             });
  10428.  
  10429.             function sendMessage(val, target) {
  10430.                 if (!val || val.length > 200) return;
  10431.                 client.send({
  10432.                     type: 'private-message',
  10433.                     content: {
  10434.                         text: val,
  10435.                         target,
  10436.                     },
  10437.                 });
  10438.             }
  10439.         },
  10440.  
  10441.         updatePrivateChat(data) {
  10442.             const { sender_id, target_id, message, timestamp } = data;
  10443.  
  10444.             let chatDiv = byId(target_id) || byId(sender_id);
  10445.             if (!chatDiv) {
  10446.                 console.error(
  10447.                     'Could not find chat div for either sender or target'
  10448.                 );
  10449.                 return;
  10450.             }
  10451.  
  10452.             const bocElement = document.querySelector(
  10453.                 '#beginning-of-conversation'
  10454.             );
  10455.             if (bocElement) bocElement.remove();
  10456.  
  10457.             const messages = chatDiv.querySelector('.friends-chat-messages');
  10458.             messages.innerHTML += `
  10459.                <div class="friends-message ${
  10460.                 sender_id === this.profile._id ? 'message-right' : ''
  10461.             }">
  10462.                    <span>${message}</span>
  10463.                    <span class="message-date">${prettyTime.am_pm(
  10464.                 timestamp
  10465.             )}</span>
  10466.                </div>
  10467.             `;
  10468.             messages.scrollTop = messages.scrollHeight;
  10469.         },
  10470.  
  10471.         async searchUser(user) {
  10472.             if (!user) {
  10473.                 this.openAllUsers();
  10474.                 return;
  10475.             }
  10476.             const response = await fetch(
  10477.                 `${this.appRoutes.search}/?q=${user}`,
  10478.                 {
  10479.                     credentials: 'include',
  10480.                 }
  10481.             ).then((res) => res.json());
  10482.             const usersDiv = document;
  10483.  
  10484.             const usersContainer = byId('users-container');
  10485.             usersContainer.innerHTML = '';
  10486.             if (!response.success) {
  10487.                 usersContainer.innerHTML = `
  10488.                     <span>Couldn't find ${user}...</span>
  10489.                 `;
  10490.                 return;
  10491.             }
  10492.  
  10493.             const handleAddButtonClick = (event) => {
  10494.                 const userId = event.currentTarget.getAttribute('data-user-id');
  10495.                 const add = event.currentTarget;
  10496.                 fetch(this.appRoutes.request, {
  10497.                     method: 'POST',
  10498.                     headers: {
  10499.                         'Content-Type': 'application/json',
  10500.                     },
  10501.                     body: JSON.stringify({ req_id: userId }),
  10502.                     credentials: 'include',
  10503.                 })
  10504.                     .then((res) => res.json())
  10505.                     .then((req) => {
  10506.                         const type = req.success ? 'success' : 'danger';
  10507.                         this.modAlert(req.message, type);
  10508.  
  10509.                         if (req.success) {
  10510.                             add.disabled = true;
  10511.                             add.innerHTML = `
  10512.                             <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>
  10513.                         `;
  10514.                         }
  10515.                     });
  10516.             };
  10517.  
  10518.             response.users.forEach((user) => {
  10519.                 const userHTML = `
  10520.                     <div class="friends_row user-profile-wrapper" style="${
  10521.                     this.profile._id == user._id
  10522.                         ? `background: linear-gradient(45deg, #17172d, black)`
  10523.                         : ''
  10524.                 }" data-user-profile="${user._id}">
  10525.                         <div class="centerY g-5">
  10526.                             <div class="profile-img">
  10527.                                 <img src="${user.imageURL}" alt="${
  10528.                     user.username
  10529.                 }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10530.                                 <span class="status_icon ${
  10531.                     user.online ? 'online_icon' : 'offline_icon'
  10532.                 }"></span>
  10533.                             </div>
  10534.                             <div class="f-big">${
  10535.                     this.profile.username === user.username
  10536.                         ? `${user.username} (You)`
  10537.                         : user.username
  10538.                 }</div>
  10539.                         </div>
  10540.                         <div class="centerY g-10">
  10541.                             <div class="${user.role}_role">${user.role}</div>
  10542.                             ${
  10543.                     this.profile._id == user._id
  10544.                         ? ''
  10545.                         : `
  10546.                                 <div class="vr2"></div>
  10547.                                 <button class="modButton centerXY add-button" data-user-id="${user._id}" style="padding: 7px;">
  10548.                                     <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>
  10549.                                 </button>
  10550.                             `
  10551.                 }
  10552.                         </div>
  10553.                     </div>
  10554.                 `;
  10555.                 usersContainer.insertAdjacentHTML('beforeend', userHTML);
  10556.  
  10557.                 if (user._id == this.profile._id) return;
  10558.                 const newUserProfile = usersContainer.querySelector(
  10559.                     `[data-user-profile="${user._id}"]`
  10560.                 );
  10561.                 newUserProfile.addEventListener('click', (e) => {
  10562.                     if (e.target == newUserProfile) {
  10563.                         this.showProfileHandler(e);
  10564.                     }
  10565.                 });
  10566.  
  10567.                 const addButton = newUserProfile.querySelector('.add-button');
  10568.                 if (!addButton) return;
  10569.                 addButton.addEventListener('click', handleAddButtonClick);
  10570.             });
  10571.         },
  10572.  
  10573.         async openAllUsers() {
  10574.             let offset = 0;
  10575.             let maxReached = false;
  10576.             let defaultAmount = 5; // min: 1; max: 100
  10577.  
  10578.             const friends_body = document.querySelector('.friends_body');
  10579.             friends_body.innerHTML = `
  10580.                 <input type="text" id="search-user" placeholder="Search user by username or id" class="form-control p-10" style="border: none" />
  10581.                 <div id="users-container"></div>
  10582.             `;
  10583.             const usersContainer = byId('users-container');
  10584.             friends_body.classList.add('allusers');
  10585.  
  10586.             // search user
  10587.             const search = byId('search-user');
  10588.             search.addEventListener(
  10589.                 'input',
  10590.                 debounce(() => {
  10591.                     this.searchUser(search.value);
  10592.                 }, 500)
  10593.             );
  10594.  
  10595.             const handleAddButtonClick = (event) => {
  10596.                 const userId = event.currentTarget.getAttribute('data-user-id');
  10597.                 const add = event.currentTarget;
  10598.                 fetch(this.appRoutes.request, {
  10599.                     method: 'POST',
  10600.                     headers: {
  10601.                         'Content-Type': 'application/json',
  10602.                     },
  10603.                     body: JSON.stringify({ req_id: userId }),
  10604.                     credentials: 'include',
  10605.                 })
  10606.                     .then((res) => res.json())
  10607.                     .then((req) => {
  10608.                         const type = req.success ? 'success' : 'danger';
  10609.                         this.modAlert(req.message, type);
  10610.  
  10611.                         if (req.success) {
  10612.                             add.disabled = true;
  10613.                             add.innerHTML = `
  10614.                             <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>
  10615.                         `;
  10616.                         }
  10617.                     });
  10618.             };
  10619.  
  10620.             const displayedUserIDs = new Set();
  10621.  
  10622.             const fetchNewUsers = async () => {
  10623.                 const newUsersResponse = await fetch(this.appRoutes.users, {
  10624.                     method: 'POST',
  10625.                     headers: {
  10626.                         'Content-Type': 'application/json',
  10627.                     },
  10628.                     body: JSON.stringify({ amount: defaultAmount, offset }),
  10629.                     credentials: 'include',
  10630.                 }).then((res) => res.json());
  10631.  
  10632.                 const newUsers = newUsersResponse.users;
  10633.  
  10634.                 if (newUsers.length === 0) {
  10635.                     maxReached = true;
  10636.                     return;
  10637.                 }
  10638.                 offset += defaultAmount;
  10639.  
  10640.                 newUsers.forEach((user) => {
  10641.                     if (!displayedUserIDs.has(user._id)) {
  10642.                         displayedUserIDs.add(user._id);
  10643.  
  10644.                         const newUserHTML = `
  10645.                             <div class="friends_row user-profile-wrapper" style="${
  10646.                             this.profile._id == user._id
  10647.                                 ? `background: linear-gradient(45deg, #17172d, black)`
  10648.                                 : ''
  10649.                         }" data-user-profile="${user._id}">
  10650.                                 <div class="centerY g-5">
  10651.                                     <div class="profile-img">
  10652.                                         <img src="${user.imageURL}" alt="${
  10653.                             user.username
  10654.                         }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10655.                                         <span class="status_icon ${
  10656.                             user.online
  10657.                                 ? 'online_icon'
  10658.                                 : 'offline_icon'
  10659.                         }"></span>
  10660.                                     </div>
  10661.                                     <div class="f-big">${
  10662.                             this.profile.username === user.username
  10663.                                 ? `${user.username} (You)`
  10664.                                 : user.username
  10665.                         }</div>
  10666.                                 </div>
  10667.                                 <div class="centerY g-10">
  10668.                                     <div class="${user.role}_role">${
  10669.                             user.role
  10670.                         }</div>
  10671.                                     ${
  10672.                             this.profile._id == user._id
  10673.                                 ? ''
  10674.                                 : `
  10675.                                         <div class="vr2"></div>
  10676.                                         <button class="modButton centerXY add-button" data-user-id="${user._id}" style="padding: 7px;">
  10677.                                             <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>
  10678.                                         </button>
  10679.                                     `
  10680.                         }
  10681.                                 </div>
  10682.                             </div>
  10683.                         `;
  10684.  
  10685.                         usersContainer.insertAdjacentHTML(
  10686.                             'beforeend',
  10687.                             newUserHTML
  10688.                         );
  10689.  
  10690.                         const newUserProfile = usersContainer.querySelector(
  10691.                             `[data-user-profile="${user._id}"]`
  10692.                         );
  10693.                         newUserProfile.addEventListener('click', (e) => {
  10694.                             if (e.target == newUserProfile) {
  10695.                                 this.showProfileHandler(e);
  10696.                             }
  10697.                         });
  10698.  
  10699.                         const addButton =
  10700.                             newUserProfile.querySelector('.add-button');
  10701.                         if (!addButton) return;
  10702.                         addButton.addEventListener(
  10703.                             'click',
  10704.                             handleAddButtonClick
  10705.                         );
  10706.                     }
  10707.                 });
  10708.             };
  10709.  
  10710.             const scrollHandler = async () => {
  10711.                 if (maxReached) return;
  10712.                 if (
  10713.                     usersContainer.scrollTop + usersContainer.clientHeight >=
  10714.                     usersContainer.scrollHeight - 1
  10715.                 ) {
  10716.                     await fetchNewUsers();
  10717.                 }
  10718.             };
  10719.  
  10720.             // Initial fetch
  10721.             await fetchNewUsers();
  10722.  
  10723.             // remove existing scroll event listener if exists
  10724.             usersContainer.removeEventListener('scroll', scrollHandler);
  10725.  
  10726.             // add new scroll event listener
  10727.             usersContainer.addEventListener('scroll', scrollHandler);
  10728.         },
  10729.  
  10730.         async openRequests() {
  10731.             let that = this;
  10732.             const friends_body = document.querySelector('.friends_body');
  10733.             friends_body.innerHTML = '';
  10734.             if (friends_body.classList.contains('allusers'))
  10735.                 friends_body.classList.remove('allusers');
  10736.  
  10737.             const requests = await fetch(this.appRoutes.myRequests, {
  10738.                 credentials: 'include',
  10739.             }).then((res) => res.json());
  10740.  
  10741.             if (!requests.body) return;
  10742.             if (requests.body.length > 0) {
  10743.                 const reqHtml = requests.body
  10744.                     .map(
  10745.                         (user) => `
  10746.                     <div class="friends_row">
  10747.                         <div class="centerY g-5">
  10748.                             <div class="profile-img">
  10749.                                 <img src="${user.imageURL}" alt="${
  10750.                             user.username
  10751.                         }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10752.                                 <span class="status_icon ${
  10753.                             user.online ? 'online_icon' : 'offline_icon'
  10754.                         }"></span>
  10755.                             </div>
  10756.                             <div class="f-big">${user.username}</div>
  10757.                         </div>
  10758.                         <div class="centerY g-10">
  10759.                             <div class="${user.role}_role">${user.role}</div>
  10760.                             <div class="vr2"></div>
  10761.                             <button class="modButton centerXY accept" data-user-id="${
  10762.                             user._id
  10763.                         }" style="padding: 6px 7px;">
  10764.                                 <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>
  10765.                             </button>
  10766.                             <button class="modButton centerXY decline" data-user-id="${
  10767.                             user._id
  10768.                         }" style="padding: 5px 8px;">
  10769.                                 <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>
  10770.                             </button>
  10771.                         </div>
  10772.                     </div>
  10773.                 `
  10774.                     )
  10775.                     .join('');
  10776.  
  10777.                 friends_body.innerHTML = reqHtml;
  10778.  
  10779.                 friends_body.querySelectorAll('.accept').forEach((accept) => {
  10780.                     accept.addEventListener('click', async () => {
  10781.                         const userId = accept.getAttribute('data-user-id');
  10782.                         const req = await fetch(this.appRoutes.handleRequest, {
  10783.                             method: 'POST',
  10784.                             headers: {
  10785.                                 'Content-Type': 'application/json',
  10786.                             },
  10787.                             body: JSON.stringify({
  10788.                                 type: 'accept-request',
  10789.                                 userId,
  10790.                             }),
  10791.                             credentials: 'include',
  10792.                         }).then((res) => res.json());
  10793.                         that.openRequests();
  10794.                     });
  10795.                 });
  10796.  
  10797.                 friends_body.querySelectorAll('.decline').forEach((decline) => {
  10798.                     decline.addEventListener('click', async () => {
  10799.                         const userId = decline.getAttribute('data-user-id');
  10800.                         const req = await fetch(this.appRoutes.handleRequest, {
  10801.                             method: 'POST',
  10802.                             headers: {
  10803.                                 'Content-Type': 'application/json',
  10804.                             },
  10805.                             body: JSON.stringify({
  10806.                                 type: 'decline-request',
  10807.                                 userId,
  10808.                             }),
  10809.                             credentials: 'include',
  10810.                         }).then((res) => res.json());
  10811.                         that.openRequests();
  10812.                     });
  10813.                 });
  10814.             } else {
  10815.                 friends_body.innerHTML = `<span>No requests!</span>`;
  10816.             }
  10817.         },
  10818.  
  10819.         async openFriendSettings() {
  10820.             const friends_body = document.querySelector('.friends_body');
  10821.             if (friends_body.classList.contains('allusers'))
  10822.                 friends_body.classList.remove('allusers');
  10823.  
  10824.             friends_body.innerHTML = `
  10825.                 <div class="friends_row">
  10826.                     <div class="centerY g-5">
  10827.                         <div class="profile-img">
  10828.                             <img src="${
  10829.                 this.profile.imageURL
  10830.             }" alt="Profile picture" />
  10831.                         </div>
  10832.                         <span class="f-big" id="profile_username_00" title="${
  10833.                 this.profile._id
  10834.             }">${this.profile.username}</span>
  10835.                     </div>
  10836.                     <button class="modButton-black val" id="editProfile">Edit Profile</button>
  10837.                 </div>
  10838.                 <div class="friends_row">
  10839.                     <span>Status</span>
  10840.                     <select class="form-control val" id="edit_static_status">
  10841.                         <option value="online" ${
  10842.                 this.friends_settings.static_status === 'online'
  10843.                     ? 'selected'
  10844.                     : ''
  10845.             }>Online</option>
  10846.                         <option value="offline" ${
  10847.                 this.friends_settings.static_status === 'offline'
  10848.                     ? 'selected'
  10849.                     : ''
  10850.             }>Offline</option>
  10851.                     </select>
  10852.                 </div>
  10853.                 <div class="friends_row">
  10854.                     <span>Accept friend requests</span>
  10855.                     <div class="modCheckbox val">
  10856.                         <input type="checkbox" ${
  10857.                 this.friends_settings.accept_requests
  10858.                     ? 'checked'
  10859.                     : ''
  10860.             } id="edit_accept_requests" />
  10861.                         <label class="cbx" for="edit_accept_requests"></label>
  10862.                     </div>
  10863.                 </div>
  10864.                 <div class="friends_row">
  10865.                     <span>Highlight friends</span>
  10866.                     <div class="modCheckbox val">
  10867.                         <input type="checkbox" ${
  10868.                 this.friends_settings.highlight_friends
  10869.                     ? 'checked'
  10870.                     : ''
  10871.             } id="edit_highlight_friends" />
  10872.                         <label class="cbx" for="edit_highlight_friends"></label>
  10873.                     </div>
  10874.                 </div>
  10875.                 <div class="friends_row">
  10876.                     <span>Highlight color</span>
  10877.                     <input type="color" class="colorInput" value="${
  10878.                 this.friends_settings.highlight_color
  10879.             }" style="margin-right: 12px;" id="edit_highlight_color" />
  10880.                 </div>
  10881.                 <div class="friends_row">
  10882.                     <span>Public profile</span>
  10883.                     <div class="modCheckbox val">
  10884.                         <input type="checkbox" ${
  10885.                 this.profile.visible ? 'checked' : ''
  10886.             } id="edit_visible" />
  10887.                         <label class="cbx" for="edit_visible"></label>
  10888.                     </div>
  10889.                 </div>
  10890.                 <div class="friends_row">
  10891.                     <span>Logout</span>
  10892.                     <button class="modButton-black" id="logout_mod" style="width: 150px">Logout</button>
  10893.                 </div>
  10894.             `;
  10895.  
  10896.             const editProfile = byId('editProfile');
  10897.             editProfile.addEventListener('click', () => {
  10898.                 this.openProfileEditor();
  10899.             });
  10900.  
  10901.             const logout = byId('logout_mod');
  10902.             logout.addEventListener('click', async () => {
  10903.                 if (confirm('Are you sure you want to logout?')) {
  10904.                     try {
  10905.                         const res = await fetch(this.appRoutes.logout, {
  10906.                             credentials: 'include',
  10907.                         });
  10908.  
  10909.                         const data = await res.json();
  10910.  
  10911.                         if (!data.success)
  10912.                             return alert('Something went wrong...');
  10913.  
  10914.                         modSettings.modAccount.authorized = false;
  10915.                         updateStorage();
  10916.                         location.reload();
  10917.                     } catch (error) {
  10918.                         console.error('Error logging out:', error);
  10919.                     }
  10920.                 }
  10921.             });
  10922.  
  10923.             const edit_static_status = byId('edit_static_status');
  10924.             const edit_accept_requests = byId('edit_accept_requests');
  10925.             const edit_highlight_friends = byId('edit_highlight_friends');
  10926.             const edit_highlight_color = byId('edit_highlight_color');
  10927.             const edit_visible = byId('edit_visible');
  10928.  
  10929.             edit_static_status.addEventListener('change', () => {
  10930.                 const val = edit_static_status.value;
  10931.                 updateSettings('static_status', val);
  10932.             });
  10933.  
  10934.             edit_accept_requests.addEventListener('change', () => {
  10935.                 const val = edit_accept_requests.checked;
  10936.                 updateSettings('accept_requests', val);
  10937.             });
  10938.  
  10939.             edit_highlight_friends.addEventListener('change', () => {
  10940.                 const val = edit_highlight_friends.checked;
  10941.                 updateSettings('highlight_friends', val);
  10942.             });
  10943.  
  10944.             // Debounce the updateSettings function
  10945.             edit_highlight_color.addEventListener(
  10946.                 'input',
  10947.                 debounce(() => {
  10948.                     const val = edit_highlight_color.value;
  10949.                     updateSettings('highlight_color', val);
  10950.                 }, 500)
  10951.             );
  10952.  
  10953.             edit_visible.addEventListener('change', () => {
  10954.                 const val = edit_visible.checked;
  10955.                 updateSettings('visible', val);
  10956.             });
  10957.  
  10958.             const updateSettings = async (type, data) => {
  10959.                 const resData = await (
  10960.                     await fetch(this.appRoutes.updateSettings, {
  10961.                         method: 'POST',
  10962.                         body: JSON.stringify({ type, data }),
  10963.                         credentials: 'include',
  10964.                         headers: {
  10965.                             'Content-Type': 'application/json',
  10966.                         },
  10967.                     })
  10968.                 ).json();
  10969.  
  10970.                 if (resData.success) {
  10971.                     this.friends_settings[type] = data;
  10972.                 }
  10973.             };
  10974.         },
  10975.  
  10976.         openProfileEditor() {
  10977.             let that = this;
  10978.  
  10979.             const overlay = document.createElement('div');
  10980.             overlay.classList.add('mod_overlay');
  10981.             overlay.style.opacity = '0';
  10982.             overlay.innerHTML = `
  10983.                 <div class="signIn-wrapper">
  10984.                     <div class="signIn-header">
  10985.                         <span>Edit mod profile</span>
  10986.                         <div class="centerXY" style="width: 32px; height: 32px;">
  10987.                             <button class="modButton-black" id="closeProfileEditor">
  10988.                                 <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  10989.                                     <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>
  10990.                                 </svg>
  10991.                             </button>
  10992.                         </div>
  10993.                     </div>
  10994.                     <div class="signIn-body" style="width: fit-content;">
  10995.                         <div class="centerXY g-10">
  10996.                             <div class="profile-img" style="width: 6em;height: 6em;">
  10997.                                 <img src="${
  10998.                 this.profile.imageURL
  10999.             }" alt="Profile picture" />
  11000.                             </div>
  11001.                             <div class="f-column g-5">
  11002.                                 <input type="file" id="imageUpload" accept="image/*" style="display: none;">
  11003.                                 <label for="imageUpload" class="modButton-black g-10">
  11004.                                     <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>
  11005.                                     Upload avatar
  11006.                                 </label>
  11007.                                 <button class="modButton-black g-10" id="deleteAvatar">
  11008.                                     <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>
  11009.                                     Delete avatar
  11010.                                 </button>
  11011.                             </div>
  11012.                         </div>
  11013.                         <div class="f-column w-100">
  11014.                             <label for="username_edit">Username</label>
  11015.                             <input type="text" class="form-control" id="username_edit" value="${
  11016.                 this.profile.username
  11017.             }" maxlength="40" minlength="4" />
  11018.                         </div>
  11019.                         <div class="f-column w-100">
  11020.                             <label for="bio_edit">Bio</label>
  11021.                             <div class="textarea-container">
  11022.                                 <textarea placeholder="Hello! I'm ..." class="form-control" maxlength="250" id="bio_edit">${
  11023.                 this.profile.bio || ''
  11024.             }</textarea>
  11025.                                 <span class="char-counter" id="charCount">${
  11026.                 this.profile.bio
  11027.                     ? this.profile.bio.length
  11028.                     : '0'
  11029.             }/250</span>
  11030.                             </div>
  11031.                         </div>
  11032.                         <button class="modButton-black" style="margin-bottom: 20px;" id="saveChanges">Save changes</button>
  11033.                     </div>
  11034.                 </div>
  11035.             `;
  11036.             document.body.append(overlay);
  11037.  
  11038.             function hide() {
  11039.                 overlay.style.opacity = '0';
  11040.                 setTimeout(() => {
  11041.                     overlay.remove();
  11042.                 }, 300);
  11043.             }
  11044.  
  11045.             overlay.addEventListener('click', (e) => {
  11046.                 if (e.target == overlay) hide();
  11047.             });
  11048.  
  11049.             setTimeout(() => {
  11050.                 overlay.style.opacity = '1';
  11051.             });
  11052.  
  11053.             byId('closeProfileEditor').addEventListener('click', hide);
  11054.  
  11055.             let changes = new Set(); // Use a Set to store unique changes
  11056.  
  11057.             const bio_edit = byId('bio_edit');
  11058.             const charCountSpan = byId('charCount');
  11059.             bio_edit.addEventListener('input', updCharcounter);
  11060.  
  11061.             function updCharcounter() {
  11062.                 const currentTextLength = bio_edit.value.length;
  11063.                 charCountSpan.textContent = currentTextLength + '/250';
  11064.  
  11065.                 // Update changes
  11066.                 changes.add('bio');
  11067.             }
  11068.  
  11069.             // Upload avatar
  11070.             byId('imageUpload').addEventListener('input', async (e) => {
  11071.                 const file = e.target.files[0];
  11072.                 if (!file) return;
  11073.  
  11074.                 const formData = new FormData();
  11075.                 formData.append('image', file);
  11076.  
  11077.                 try {
  11078.                     const data = await (
  11079.                         await fetch(this.appRoutes.imgUpload, {
  11080.                             method: 'POST',
  11081.                             credentials: 'include',
  11082.                             body: formData,
  11083.                         })
  11084.                     ).json();
  11085.  
  11086.                     if (data.success) {
  11087.                         const profileImg =
  11088.                             document.querySelector('.profile-img img');
  11089.                         profileImg.src = data.user.imageURL;
  11090.                         hide();
  11091.                         that.profile = data.user;
  11092.                     } else {
  11093.                         that.modAlert(data.message, 'danger');
  11094.                         console.error('Failed to upload image');
  11095.                     }
  11096.                 } catch (error) {
  11097.                     console.error('Error uploading image:', error);
  11098.                 }
  11099.             });
  11100.  
  11101.             const username_edit = byId('username_edit');
  11102.             username_edit.addEventListener('input', () => {
  11103.                 changes.add('username');
  11104.             });
  11105.  
  11106.             const saveChanges = byId('saveChanges');
  11107.             saveChanges.addEventListener('click', async () => {
  11108.                 if (changes.size === 0) return;
  11109.                 let changedData = {};
  11110.                 changes.forEach((change) => {
  11111.                     if (change === 'username') {
  11112.                         changedData.username = username_edit.value;
  11113.                     } else if (change === 'bio') {
  11114.                         changedData.bio = bio_edit.value;
  11115.                     }
  11116.                 });
  11117.  
  11118.                 const resData = await (
  11119.                     await fetch(this.appRoutes.editProfile, {
  11120.                         method: 'POST',
  11121.                         body: JSON.stringify({
  11122.                             changes: Array.from(changes),
  11123.                             data: changedData,
  11124.                         }),
  11125.                         credentials: 'include',
  11126.                         headers: {
  11127.                             'Content-Type': 'application/json',
  11128.                         },
  11129.                     })
  11130.                 ).json();
  11131.  
  11132.                 if (resData.success) {
  11133.                     if (that.profile.username !== resData.user.username) {
  11134.                         const p_username = byId('profile_username_00');
  11135.                         if (p_username)
  11136.                             p_username.innerText = resData.user.username;
  11137.                     }
  11138.                     that.profile = resData.user;
  11139.                     changes.clear();
  11140.                     hide();
  11141.                     const name = byId('my-profile-name');
  11142.                     const bioText = byId('my-profile-bio');
  11143.  
  11144.                     name.innerText = resData.user.username;
  11145.                     bioText.innerHTML = resData.user.bio || 'No bio.';
  11146.                 } else {
  11147.                     if (resData.message) {
  11148.                         this.modAlert(resData.message, 'danger');
  11149.                     }
  11150.                 }
  11151.             });
  11152.  
  11153.             const deleteAvatar = byId('deleteAvatar');
  11154.             deleteAvatar.addEventListener('click', async () => {
  11155.                 if (
  11156.                     confirm(
  11157.                         'Are you sure you want to remove your profile picture? It will be changed to the default profile picture.'
  11158.                     )
  11159.                 ) {
  11160.                     try {
  11161.                         const data = await (
  11162.                             await fetch(this.appRoutes.delProfile, {
  11163.                                 credentials: 'include',
  11164.                             })
  11165.                         ).json();
  11166.                         const profileImg =
  11167.                             document.querySelector('.profile-img img');
  11168.                         profileImg.src = data.user.imageURL;
  11169.                         hide();
  11170.                         that.profile = data.user;
  11171.                     } catch (error) {
  11172.                         console.error("Couldn't remove image: ", error);
  11173.                         this.modAlert(error.message, 'danger');
  11174.                     }
  11175.                 }
  11176.             });
  11177.         },
  11178.  
  11179.         async announcements() {
  11180.             const previewContainer = byId('mod-announcements');
  11181.  
  11182.             const announcements = await (
  11183.                 await fetch(this.appRoutes.announcements)
  11184.             ).json();
  11185.             if (!announcements.success) return;
  11186.  
  11187.             const { data } = announcements;
  11188.  
  11189.             const pinnedAnnouncements = data.filter(
  11190.                 (announcement) => announcement.pinned
  11191.             );
  11192.             const unpinnedAnnouncements = data.filter(
  11193.                 (announcement) => !announcement.pinned
  11194.             );
  11195.  
  11196.             pinnedAnnouncements.sort(
  11197.                 (a, b) => new Date(b.date) - new Date(a.date)
  11198.             );
  11199.             unpinnedAnnouncements.sort(
  11200.                 (a, b) => new Date(b.date) - new Date(a.date)
  11201.             );
  11202.  
  11203.             const sortedAnnouncements = [
  11204.                 ...pinnedAnnouncements,
  11205.                 ...unpinnedAnnouncements,
  11206.             ];
  11207.  
  11208.             const previews = sortedAnnouncements
  11209.                 .map(
  11210.                     (announcement) => `
  11211. 				<div class="mod-announcement" data-announcement-id="${announcement._id}">
  11212. 					<img class="mod-announcement-icon" src="${
  11213.                         announcement.icon
  11214.                     }" width="32" draggable="false" />
  11215. 					<div class="mod-announcement-text">
  11216. 						<span>${announcement.title}</span>
  11217. 						<div>${announcement.description}</div>
  11218. 					</div>
  11219. 					${
  11220.                         announcement.pinned
  11221.                             ? '<img src="https://czrsd.com/static/icons/pinned.svg" draggable="false" style="width: 22px; align-self: start;" />'
  11222.                             : ''
  11223.                     }
  11224. 				</div>
  11225. 			`
  11226.                 )
  11227.                 .join('');
  11228.  
  11229.             previewContainer.innerHTML = previews;
  11230.  
  11231.             const announcementElements =
  11232.                 document.querySelectorAll('.mod-announcement');
  11233.             announcementElements.forEach((element) => {
  11234.                 element.addEventListener('click', async (event) => {
  11235.                     const announcementId = element.getAttribute(
  11236.                         'data-announcement-id'
  11237.                     );
  11238.                     try {
  11239.                         const data = await (
  11240.                             await fetch(
  11241.                                 this.appRoutes.announcement(announcementId)
  11242.                             )
  11243.                         ).json();
  11244.                         if (data.success) {
  11245.                             createAnnouncementTab(data.data);
  11246.                         }
  11247.                     } catch (error) {
  11248.                         console.error(
  11249.                             'Error fetching announcement details:',
  11250.                             error
  11251.                         );
  11252.                     }
  11253.                 });
  11254.             });
  11255.  
  11256.             function createAnnouncementTab(data) {
  11257.                 const menuContent = document.querySelector('.mod_menu_content');
  11258.                 const modHome = byId('mod_home');
  11259.                 const content = document.createElement('div');
  11260.  
  11261.                 content.setAttribute('id', 'announcement-tab');
  11262.                 content.classList.add('mod_tab');
  11263.                 content.style.display = 'none';
  11264.                 content.style.opacity = '0';
  11265.  
  11266.                 const announcementHTML = `
  11267. 					<div class="centerY justify-sb">
  11268. 						<div class="centerY g-5">
  11269. 							<img style="border-radius: 50%;" src="${
  11270.                     data.preview.icon
  11271.                 }" width="64" draggable="false" />
  11272. 							<div class="f-column centerX">
  11273. 								<h2>${data.full.title}</h2>
  11274. 								<span style="color: #7E7E7E">${prettyTime.fullDate(data.date)}</span>
  11275. 							</div>
  11276. 						</div>
  11277. 						<button class="modButton-black" style="width: 20%;" id="mod-announcement-back">Back</button>
  11278. 					</div>
  11279. 					<div class="mod-announcement-content">
  11280. 						<div class="f-column g-10 scroll">${data.full.description}</div>
  11281. 						<div class="mod-announcement-images scroll">
  11282. 							${data.full.images
  11283.                     .map(
  11284.                         (image) =>
  11285.                             `<img src="${image}" onclick="window.open('${image}')" />`
  11286.                     )
  11287.                     .join('')}
  11288. 						</div>
  11289. 					</div>
  11290. 				`;
  11291.  
  11292.                 content.innerHTML = announcementHTML;
  11293.                 menuContent.appendChild(content);
  11294.  
  11295.                 window.openModTab('announcement-tab');
  11296.  
  11297.                 const back = byId('mod-announcement-back');
  11298.                 back.addEventListener('click', () => {
  11299.                     const mod_home = byId('mod_home');
  11300.                     content.style.opacity = '0';
  11301.                     setTimeout(() => {
  11302.                         content.remove();
  11303.  
  11304.                         mod_home.style.display = 'flex';
  11305.                         mod_home.style.opacity = '1';
  11306.                     }, 300);
  11307.  
  11308.                     byId('tab_home_btn').classList.add('mod_selected');
  11309.                 });
  11310.                 1;
  11311.             }
  11312.         },
  11313.  
  11314.         chart() {
  11315.             const canvas = byId('sigmod-stats');
  11316.             const { Chart } = window;
  11317.  
  11318.             const stats = JSON.parse(localStorage.getItem('game-stats'));
  11319.  
  11320.             // max values
  11321.             const statValues = {
  11322.                 timeplayed: [
  11323.                     10_000, 50_000, 100_000, 150_000, 200_000, 250_000, 300_000,
  11324.                     400_000, 800_000, 1_000_000,
  11325.                 ],
  11326.                 highestmass: [
  11327.                     50_000, 100_000, 500_000, 700_000, 1_000_000, 5_000_000,
  11328.                     10_000_000,
  11329.                 ],
  11330.                 totaldeaths: [
  11331.                     100, 500, 1_000, 2_000, 3_000, 4_000, 5_000, 8_000, 10_000,
  11332.                     30_000, 50_000, 100_000,
  11333.                 ],
  11334.                 totalmass: [
  11335.                     100_000, 500_000, 1_000_000, 2_000_000, 3_000_000,
  11336.                     5_000_000, 10_000_000, 50_000_000, 100_000_000, 500_000_000,
  11337.                     1_000_000_000, 2_000_000_000, 5_000_000_000,
  11338.                 ],
  11339.             };
  11340.  
  11341.             const getBestValue = (stat, values) => {
  11342.                 for (let value of values) {
  11343.                     if (stat < value) return value;
  11344.                 }
  11345.                 return values[values.length - 1];
  11346.             };
  11347.  
  11348.             const emojiLabels = ['⏲', '🏆', '💀', '🔢'];
  11349.             const textLabels = [
  11350.                 'Time Played',
  11351.                 'Highest Mass',
  11352.                 'Total Deaths',
  11353.                 'Total Mass',
  11354.             ];
  11355.  
  11356.             const data = {
  11357.                 labels: emojiLabels,
  11358.                 datasets: [
  11359.                     {
  11360.                         label: 'Your Stats',
  11361.                         data: [
  11362.                             stats['time-played'] /
  11363.                             getBestValue(
  11364.                                 stats['time-played'],
  11365.                                 statValues.timeplayed
  11366.                             ),
  11367.                             stats['highest-mass'] /
  11368.                             getBestValue(
  11369.                                 stats['highest-mass'],
  11370.                                 statValues.highestmass
  11371.                             ),
  11372.                             stats['total-deaths'] /
  11373.                             getBestValue(
  11374.                                 stats['total-deaths'],
  11375.                                 statValues.totaldeaths
  11376.                             ),
  11377.                             stats['total-mass'] /
  11378.                             getBestValue(
  11379.                                 stats['total-mass'],
  11380.                                 statValues.totalmass
  11381.                             ),
  11382.                         ],
  11383.                         backgroundColor: [
  11384.                             'rgba(255, 99, 132, 0.2)',
  11385.                             'rgba(54, 162, 235, 0.2)',
  11386.                             'rgba(255, 206, 86, 0.2)',
  11387.                             'rgba(153, 102, 255, 0.2)',
  11388.                         ],
  11389.                         borderColor: [
  11390.                             'rgba(255, 99, 132, 1)',
  11391.                             'rgba(54, 162, 235, 1)',
  11392.                             'rgba(255, 206, 86, 1)',
  11393.                             'rgba(153, 102, 255, 1)',
  11394.                         ],
  11395.                         borderWidth: 1,
  11396.                     },
  11397.                 ],
  11398.             };
  11399.  
  11400.             const formatLabel = (labelType, actualValue) => {
  11401.                 if (labelType === 'Time Played') {
  11402.                     const hours = Math.floor(actualValue / 3600);
  11403.                     const minutes = Math.floor((actualValue % 3600) / 60);
  11404.                     return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
  11405.                 } else if (
  11406.                     labelType === 'Highest Mass' ||
  11407.                     labelType === 'Total Mass'
  11408.                 ) {
  11409.                     return actualValue > 999
  11410.                         ? `${(actualValue / 1000).toFixed(1)}k`
  11411.                         : actualValue.toString();
  11412.                 } else {
  11413.                     return actualValue.toString();
  11414.                 }
  11415.             };
  11416.  
  11417.             const createChart = () => {
  11418.                 try {
  11419.                     new Chart(canvas, {
  11420.                         type: 'bar',
  11421.                         data: data,
  11422.                         options: {
  11423.                             indexAxis: 'y',
  11424.                             scales: {
  11425.                                 x: {
  11426.                                     beginAtZero: true,
  11427.                                     max: 1,
  11428.                                     ticks: {
  11429.                                         callback: (value) =>
  11430.                                             `${(value * 100).toFixed(0)}%`,
  11431.                                     },
  11432.                                 },
  11433.                             },
  11434.                             plugins: {
  11435.                                 legend: {
  11436.                                     display: false,
  11437.                                 },
  11438.                                 tooltip: {
  11439.                                     callbacks: {
  11440.                                         title: (context) =>
  11441.                                             textLabels[context[0].dataIndex],
  11442.                                         label: (context) => {
  11443.                                             const dataIndex = context.dataIndex;
  11444.                                             const labelType =
  11445.                                                 textLabels[dataIndex];
  11446.                                             const actualValue =
  11447.                                                 context.dataset.data[
  11448.                                                     dataIndex
  11449.                                                     ] *
  11450.                                                 getBestValue(
  11451.                                                     stats[
  11452.                                                         labelType
  11453.                                                             .toLowerCase()
  11454.                                                             .replace(' ', '-')
  11455.                                                         ],
  11456.                                                     statValues[
  11457.                                                         labelType
  11458.                                                             .toLowerCase()
  11459.                                                             .replace(' ', '')
  11460.                                                         ]
  11461.                                                 );
  11462.                                             return formatLabel(
  11463.                                                 labelType,
  11464.                                                 actualValue
  11465.                                             );
  11466.                                         },
  11467.                                     },
  11468.                                 },
  11469.                             },
  11470.                         },
  11471.                     });
  11472.                 } catch (error) {
  11473.                     console.error(
  11474.                         'An error occurred while rendering the chart:',
  11475.                         error
  11476.                     );
  11477.                 }
  11478.             };
  11479.  
  11480.             createChart();
  11481.         },
  11482.  
  11483.         // Color input events & Reset color event handler
  11484.         colorPicker() {
  11485.             const colorPickerConfig = {
  11486.                 mapColor: {
  11487.                     path: 'game.map.color',
  11488.                     opacity: false,
  11489.                     color: modSettings.game.map.color,
  11490.                     default: '#111111',
  11491.                 },
  11492.                 borderColor: {
  11493.                     path: 'game.borderColor',
  11494.                     opacity: true,
  11495.                     color: modSettings.game.borderColor,
  11496.                     default: '#0000ff',
  11497.                 },
  11498.                 foodColor: {
  11499.                     path: 'game.foodColor',
  11500.                     opacity: true,
  11501.                     color: modSettings.game.foodColor,
  11502.                     default: null,
  11503.                 },
  11504.                 cellColor: {
  11505.                     path: 'game.cellColor',
  11506.                     opacity: true,
  11507.                     color: modSettings.game.cellColor,
  11508.                     default: null,
  11509.                 },
  11510.                 nameColor: {
  11511.                     path: 'game.name.color',
  11512.                     opacity: false,
  11513.                     color: modSettings.game.name.color,
  11514.                     default: '#ffffff',
  11515.                 },
  11516.                 gradientNameColor1: {
  11517.                     path: 'game.name.gradient.left',
  11518.                     opacity: false,
  11519.                     color: modSettings.game.name.gradient.left,
  11520.                     default: '#ffffff',
  11521.                 },
  11522.                 gradientNameColor2: {
  11523.                     path: 'game.name.gradient.right',
  11524.                     opacity: false,
  11525.                     color: modSettings.game.name.gradient.right,
  11526.                     default: '#ffffff',
  11527.                 },
  11528.                 chatBackground: {
  11529.                     path: 'chat.bgColor',
  11530.                     opacity: true,
  11531.                     color: modSettings.chat.bgColor,
  11532.                     default: defaultSettings.chat.bgColor,
  11533.                     elementTarget: {
  11534.                         selector: '.modChat',
  11535.                         property: 'background',
  11536.                     },
  11537.                 },
  11538.                 chatTextColor: {
  11539.                     path: 'chat.textColor',
  11540.                     opacity: true,
  11541.                     color: modSettings.chat.textColor,
  11542.                     default: defaultSettings.chat.textColor,
  11543.                     elementTarget: {
  11544.                         selector: '.chatMessage-text',
  11545.                         property: 'color',
  11546.                     },
  11547.                 },
  11548.                 chatThemeChanger: {
  11549.                     path: 'chat.themeColor',
  11550.                     opacity: true,
  11551.                     color: modSettings.chat.themeColor,
  11552.                     default: defaultSettings.chat.themeColor,
  11553.                     elementTarget: {
  11554.                         selector: '.chatButton',
  11555.                         property: 'background',
  11556.                     },
  11557.                 },
  11558.             };
  11559.  
  11560.             const { Alwan } = window;
  11561.  
  11562.             Object.entries(colorPickerConfig).forEach(
  11563.                 ([
  11564.                      selector,
  11565.                      {
  11566.                          path,
  11567.                          opacity,
  11568.                          color,
  11569.                          default: defaultColor,
  11570.                          elementTarget,
  11571.                      },
  11572.                  ]) => {
  11573.                     const storagePath = path.split('.');
  11574.                     const colorPickerInstance = new Alwan(`#${selector}`, {
  11575.                         id: `edit-${selector}`,
  11576.                         color: color || defaultColor || '#000000',
  11577.                         theme: 'dark',
  11578.                         opacity,
  11579.                         format: 'hex',
  11580.                         default: defaultColor,
  11581.                         swatches: ['black', 'white', 'red', 'blue', 'green'],
  11582.                     });
  11583.  
  11584.                     const pickerElement = byId(`edit-${selector}`);
  11585.                     pickerElement.insertAdjacentHTML(
  11586.                         'beforeend',
  11587.                         `
  11588.                             <div class="colorpicker-additional">
  11589.                                 <span>Reset Color</span>
  11590.                                 <button class="resetButton" id="reset-${selector}"></button>
  11591.                             </div>
  11592.                         `
  11593.                     );
  11594.  
  11595.                     colorPickerInstance.on('change', (e) => {
  11596.                         let storageElement = modSettings;
  11597.                         storagePath
  11598.                             .slice(0, -1)
  11599.                             .forEach(
  11600.                                 (part) =>
  11601.                                     (storageElement = storageElement[part])
  11602.                             );
  11603.                         storageElement[storagePath.at(-1)] = e.hex;
  11604.  
  11605.                         if (
  11606.                             path.includes('gradientName') &&
  11607.                             modSettings.game.name.gradient.enabled
  11608.                         ) {
  11609.                             modSettings.game.name.gradient.enabled = true;
  11610.                         }
  11611.  
  11612.                         if (elementTarget) {
  11613.                             const targets = document.querySelectorAll(
  11614.                                 elementTarget.selector
  11615.                             );
  11616.  
  11617.                             targets.forEach((target) => {
  11618.                                 target.style[elementTarget.property] = e.hex;
  11619.                             });
  11620.                         }
  11621.  
  11622.                         updateStorage();
  11623.                     });
  11624.  
  11625.                     byId(`reset-${selector}`)?.addEventListener('click', () => {
  11626.                         colorPickerInstance.setColor(defaultColor);
  11627.  
  11628.                         let storageElement = modSettings;
  11629.                         storagePath
  11630.                             .slice(0, -1)
  11631.                             .forEach(
  11632.                                 (part) =>
  11633.                                     (storageElement = storageElement[part])
  11634.                             );
  11635.                         storageElement[storagePath.at(-1)] = defaultColor;
  11636.  
  11637.                         if (
  11638.                             path.includes('gradientName') &&
  11639.                             !modSettings.game.name.gradient.left &&
  11640.                             !modSettings.game.name.gradient.right
  11641.                         ) {
  11642.                             modSettings.game.name.gradient.enabled = false;
  11643.                         }
  11644.  
  11645.                         if (elementTarget) {
  11646.                             const targets = document.querySelectorAll(
  11647.                                 elementTarget.selector
  11648.                             );
  11649.  
  11650.                             targets.forEach((target) => {
  11651.                                 target.style[elementTarget.property] =
  11652.                                     defaultColor;
  11653.                             });
  11654.                         }
  11655.  
  11656.                         updateStorage();
  11657.                     });
  11658.                 }
  11659.             );
  11660.         },
  11661.  
  11662.         async getBlockedChatData() {
  11663.             try {
  11664.                 const res = await fetch(`${this.appRoutes.blockedChatData}?v=${Math.floor(Math.random() * 9e5)}`, {
  11665.                     headers: {
  11666.                         'Content-Type': 'application/json'
  11667.                     }
  11668.                 });
  11669.                 const resData = await res.json();
  11670.                 const { names, messages } = resData;
  11671.  
  11672.                 this.blockedChatData = {
  11673.                     names,
  11674.                     messages
  11675.                 }
  11676.             } catch(e) {
  11677.                 console.error('Couldn\'t fetch blocked chat data.');
  11678.             }
  11679.         },
  11680.  
  11681.         async loadLibraries() {
  11682.             const loadScript = (src) =>
  11683.                 new Promise((resolve, reject) => {
  11684.                     const script = document.createElement('script');
  11685.                     script.src = src;
  11686.                     script.type = 'text/javascript';
  11687.                     document.head.appendChild(script);
  11688.  
  11689.                     script.onload = () => resolve();
  11690.                     script.onerror = (error) => reject(error);
  11691.                 });
  11692.  
  11693.             const loadCSS = (href) =>
  11694.                 new Promise((resolve, reject) => {
  11695.                     const link = document.createElement('link');
  11696.                     link.rel = 'stylesheet';
  11697.                     link.href = href;
  11698.                     document.head.appendChild(link);
  11699.  
  11700.                     link.onload = () => resolve();
  11701.                     link.onerror = (error) => reject(error);
  11702.                 });
  11703.  
  11704.             for (const [lib, val] of Object.entries(libs)) {
  11705.                 if (typeof val === 'string') {
  11706.                     await loadScript(val);
  11707.                 } else {
  11708.                     await loadScript(val.js);
  11709.                     if (val.css) await loadCSS(val.css);
  11710.                 }
  11711.  
  11712.                 console.log(`%c✅ Loaded ${lib}.`, 'color: lime');
  11713.  
  11714.                 if (typeof this[lib] === 'function') this[lib]();
  11715.             }
  11716.         },
  11717.  
  11718.         isRateLimited() {
  11719.             if (document.body.children[0]?.id === 'cf-wrapper') {
  11720.                 console.log('User is rate limited.');
  11721.                 return true;
  11722.             }
  11723.             return false;
  11724.         },
  11725.  
  11726.         setupUI() {
  11727.             this.menu();
  11728.             this.initStats();
  11729.             this.announcements();
  11730.             this.mainMenu();
  11731.             this.saveNames();
  11732.             this.tagsystem();
  11733.             this.createMinimap();
  11734.             this.themes();
  11735.         },
  11736.  
  11737.         setupGame() {
  11738.             this.game();
  11739.             this.macros();
  11740.         },
  11741.  
  11742.         setupNetworking() {
  11743.             this.clientPing();
  11744.             this.chat();
  11745.             this.handleNick();
  11746.         },
  11747.  
  11748.         initModules() {
  11749.             try {
  11750.                 this.loadLibraries();
  11751.                 this.setupUI();
  11752.                 this.setupGame();
  11753.                 this.setupNetworking();
  11754.             } catch (e) {
  11755.                 console.error('An error occurred while loading SigMod: ', e);
  11756.             }
  11757.         },
  11758.  
  11759.         init() {
  11760.             if (this.isRateLimited()) return;
  11761.             if (!document.querySelector('.body__inner')) return;
  11762.  
  11763.             this.credits();
  11764.  
  11765.             new SigWsHandler();
  11766.  
  11767.             this.initModules();
  11768.         }
  11769.     };
  11770.  
  11771.     mods = new Mod();
  11772. })();