☰

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!

  1. // ==UserScript==
  2. // @name         SigMod Client (Macros)
  3. // @version      10.2.0.3
  4. // @description  The best mod you can find for Sigmally - Agar.io: Macros, Friends, tag system (minimap, chat), color mod, custom skins, AutoRespawn, save names, themes and more!
  5. // @author       Cursed
  6. // @match        https://*.sigmally.com/*
  7. // @icon         https://czrsd.com/static/sigmod/SigMod25-rounded.png
  8. // @run-at       document-end
  9. // @license      MIT
  10. // @grant        none
  11. // @namespace    https://greasyfork.org/users/981958
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.     'use strict';
  16.     const version = 10;
  17.     const serverVersion = '4.0.3';
  18.     const storageVersion = 1.0;
  19.     const storageName = 'SigModClient-settings';
  20.     const headerAnim = 'https://czrsd.com/static/sigmod/sigmodclient.gif';
  21.  
  22.     const libs = {
  23.         chart: 'https://cdn.jsdelivr.net/npm/chart.js',
  24.         colorPicker: {
  25.             js: 'https://unpkg.com/alwan/dist/js/alwan.min.js',
  26.             css: 'https://unpkg.com/alwan/dist/css/alwan.min.css',
  27.         },
  28.         jszip: 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js',
  29.     };
  30.  
  31.     const defaultSettings = {
  32.         storageVersion,
  33.         macros: {
  34.             feedSpeed: 40,
  35.             keys: {
  36.                 rapidFeed: 'w',
  37.                 respawn: 'b',
  38.                 location: 'y',
  39.                 saveImage: null,
  40.                 splits: {
  41.                     double: 'd',
  42.                     triple: 'f',
  43.                     quad: 'g',
  44.                     doubleTrick: null,
  45.                     selfTrick: null,
  46.                 },
  47.                 line: {
  48.                     horizontal: 's',
  49.                     vertical: 't',
  50.                     fixed: null,
  51.                     instantSplit: 0,
  52.                 },
  53.                 toggle: {
  54.                     menu: 'v',
  55.                     chat: 'z',
  56.                     names: null,
  57.                     skins: null,
  58.                     autoRespawn: null,
  59.                 },
  60.             },
  61.             mouse: {
  62.                 left: null,
  63.                 right: null,
  64.             },
  65.         },
  66.         game: {
  67.             font: 'Ubuntu',
  68.             borderColor: null,
  69.             foodColor: null,
  70.             cellColor: null,
  71.             virusImage: '/assets/images/viruses/2.png',
  72.             shortenNames: false,
  73.             removeOutlines: false,
  74.             skins: {
  75.                 original: null,
  76.                 replacement: null,
  77.             },
  78.             map: {
  79.                 color: null,
  80.                 image: '',
  81.             },
  82.             name: {
  83.                 color: null,
  84.                 gradient: {
  85.                     enabled: false,
  86.                     left: null,
  87.                     right: null,
  88.                 },
  89.             },
  90.         },
  91.         themes: {
  92.             current: 'Dark',
  93.             custom: [],
  94.             inputBorderRadius: null,
  95.             menuBorderRadius: null,
  96.             inputBorder: '1px',
  97.             hideDiscordBtns: false,
  98.             hideLangs: false,
  99.         },
  100.         settings: {
  101.             tag: null,
  102.             savedNames: [],
  103.             autoRespawn: false,
  104.             playTimer: false,
  105.             mouseTracker: false,
  106.             autoClaimCoins: false,
  107.             showChallenges: false,
  108.             deathScreenPos: 'center',
  109.             removeShopPopup: false,
  110.         },
  111.         chat: {
  112.             bgColor: '#00000040',
  113.             textColor: '#ffffff',
  114.             compact: false,
  115.             themeColor: '#8a25e5',
  116.             showTime: true,
  117.             showNameColors: true,
  118.             showClientChat: false,
  119.             showChatButtons: true,
  120.             blurTag: false,
  121.             locationText: '{pos}',
  122.         },
  123.         modAccount: {
  124.             authorized: false,
  125.         },
  126.     };
  127.  
  128.     let modSettings;
  129.     const stored = localStorage.getItem(storageName);
  130.     try {
  131.         modSettings = stored ? JSON.parse(stored) : defaultSettings;
  132.     } catch (e) {
  133.         modSettings = defaultSettings;
  134.     }
  135.  
  136.     // really rare cases, but in case the storage structure changes completely again
  137.     if (
  138.         !modSettings.storageVersion ||
  139.         modSettings.storageVersion !== storageVersion
  140.     ) {
  141.         localStorage.removeItem(storageName);
  142.         location.reload();
  143.     }
  144.  
  145.     if (!stored) updateStorage();
  146.  
  147.     // intercept fetches
  148.     let fetchedUser = 0;
  149.     const originalFetch = window.fetch;
  150.  
  151.     window.fetch = new Proxy(originalFetch, {
  152.         async apply(target, thisArg, argumentsList) {
  153.             const [url] = argumentsList;
  154.             const response = await target.apply(thisArg, argumentsList);
  155.  
  156.             if (typeof url === 'string') {
  157.                 if (url.includes('/server/auth')) {
  158.                     const data = await response.clone().json();
  159.                     if (data) mods.handleGoogleAuth(data.body?.user);
  160.                 }
  161.             }
  162.  
  163.             return response;
  164.         },
  165.     });
  166.  
  167.     // for development
  168.     let isDev = false;
  169.     let port = 3001;
  170.  
  171.     // global sigmod
  172.     window.sigmod = {
  173.         version,
  174.         server_version: serverVersion,
  175.         storageName,
  176.         settings: modSettings,
  177.     };
  178.  
  179.     // Global gameSettings object to store the Sigmally WebSocket, User instance and playing status
  180.     /*
  181.      * @typedef {Object} User
  182.      * @property {string} _id
  183.      * @property {number} boost
  184.      * @property {Object.<string, number>} cards
  185.      * @property {string} clan
  186.      * @property {string} createTime
  187.      * @property {string} email
  188.      * @property {number} exp
  189.      * @property {string} fullName
  190.      * @property {string} givenName
  191.      * @property {number} gold
  192.      * @property {string} googleID
  193.      * @property {number} hourlyTime
  194.      * @property {string} imageURL
  195.      * @property {any[]} lastSkinUsed
  196.      * @property {number} level
  197.      * @property {number} nextLevel
  198.      * @property {number} progress
  199.      * @property {number} seasonExp
  200.      * @property {Object.<string, any>} sigma
  201.      * @property {string[]} skins
  202.      * @property {number} subscription
  203.      * @property {string} updateTime
  204.      * @property {string} token
  205.      *
  206.      * @property {WebSocket} ws
  207.      * @property {User} user
  208.      * @property {boolean} isPlaying
  209.      */
  210.     window.gameSettings = {
  211.         ws: null,
  212.         user: null,
  213.         isPlaying: false,
  214.     };
  215.  
  216.     // --------- HELPER FUNCTIONS --------- \\
  217.     // --- General
  218.     // --- Colors
  219.     // --- Game
  220.     // --- Time
  221.     // --- (Coordinates)
  222.  
  223.     function updateStorage() {
  224.         localStorage.setItem(storageName, JSON.stringify(modSettings));
  225.     }
  226.  
  227.     const byId = (id) => document.getElementById(id);
  228.  
  229.     const debounce = (func, delay) => {
  230.         let timeoutId;
  231.         return function (...args) {
  232.             clearTimeout(timeoutId);
  233.             timeoutId = setTimeout(() => {
  234.                 func.apply(this, args);
  235.             }, delay);
  236.         };
  237.     }
  238.  
  239.     const wait = async (ms) => {
  240.         return new Promise((r) => setTimeout(r, ms));
  241.     }
  242.  
  243.     const noXSS = (text) => {
  244.         return text
  245.             .replace(/&/g, '&amp;')
  246.             .replace(/</g, '&lt;')
  247.             .replace(/>/g, '&gt;')
  248.             .replace(/"/g, '&quot;')
  249.             .replace(/'/g, '&#039;');
  250.     }
  251.  
  252.     // generate random string
  253.     const rdmString = (length) => {
  254.         return [...Array(length)]
  255.             .map(() => Math.random().toString(36).charAt(2))
  256.             .join('');
  257.     };
  258.  
  259.     const textEncoder = new TextEncoder();
  260.     const textDecoder = new TextDecoder();
  261.  
  262.     // --------- Colors --------- //
  263.  
  264.     // rgba values to hex color code
  265.     const RgbaToHex = (code) => {
  266.         const rgbaValues = code.match(/\d+/g);
  267.         const [r, g, b] = rgbaValues.slice(0, 3);
  268.         return `#${Number(r).toString(16).padStart(2, '0')}${Number(g)
  269.             .toString(16)
  270.             .padStart(2, '0')}${Number(b).toString(16).padStart(2, '0')}`;
  271.     }
  272.  
  273.     const bytesToHex = (r, g, b) => {
  274.         return (
  275.             '#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)
  276.         );
  277.     }
  278.  
  279.     // --------- Game --------- //
  280.  
  281.     const menuClosed = () => {
  282.         const menuWrapper = byId('menu-wrapper');
  283.  
  284.         return menuWrapper.style.display === 'none';
  285.     }
  286.  
  287.     const isDead = () => {
  288.         const __line2 = byId('__line2');
  289.         return !__line2.classList.contains('line--hidden');
  290.     }
  291.  
  292.     const getGameMode = () => {
  293.         const gameMode = byId('gamemode');
  294.         if (!gameMode.value) {
  295.             return 'Tourney';
  296.         }
  297.         const options = Object.values(gameMode.querySelectorAll('option'));
  298.         const selectedOption = options.filter(
  299.             (option) => option.value === gameMode.value
  300.         )[0];
  301.         return selectedOption.textContent.split(' ')[0];
  302.     }
  303.  
  304.     function keypress(key, keycode) {
  305.         const keyDownEvent = new KeyboardEvent('keydown', {
  306.             key: key,
  307.             code: keycode,
  308.         });
  309.         const keyUpEvent = new KeyboardEvent('keyup', {
  310.             key: key,
  311.             code: keycode,
  312.         });
  313.  
  314.         window.dispatchEvent(keyDownEvent);
  315.         window.dispatchEvent(keyUpEvent);
  316.     }
  317.  
  318.     function mousemove(sx, sy) {
  319.         const mouseMoveEvent = new MouseEvent('mousemove', {
  320.             clientX: sx,
  321.             clientY: sy,
  322.         });
  323.         const canvas = byId('canvas');
  324.         canvas.dispatchEvent(mouseMoveEvent);
  325.     }
  326.  
  327.     const getCoordinates = (border, gridCount = 5) => {
  328.         const { left, top, width, height } = border;
  329.         const gridSize = width / gridCount;
  330.         const coordinates = {};
  331.  
  332.         for (let i = 0; i < gridCount; i++) {
  333.             for (let j = 0; j < gridCount; j++) {
  334.                 const label = String.fromCharCode(65 + i) + (j + 1);
  335.  
  336.                 coordinates[label] = {
  337.                     min: { x: left + i * gridSize, y: top + j * gridSize },
  338.                     max: { x: left + (i + 1) * gridSize, y: top + (j + 1) * gridSize },
  339.                 };
  340.             }
  341.         }
  342.  
  343.         return coordinates;
  344.     };
  345.  
  346.     // time formatters
  347.     const prettyTime = {
  348.         fullDate: (dateTimestamp, time = false) => {
  349.             const date = new Date(dateTimestamp);
  350.             const day = String(date.getDate()).padStart(2, '0');
  351.             const month = String(date.getMonth() + 1).padStart(2, '0');
  352.             const year = date.getFullYear();
  353.             const formattedDate = `${day}.${month}.${year}`;
  354.  
  355.             if (time) {
  356.                 const hours = String(date.getHours()).padStart(2, '0');
  357.                 const minutes = String(date.getMinutes()).padStart(2, '0');
  358.                 const seconds = String(date.getSeconds()).padStart(2, '0');
  359.                 return `${hours}:${minutes}:${seconds} ${formattedDate}`;
  360.             }
  361.  
  362.             return formattedDate;
  363.         },
  364.         am_pm: (date) => {
  365.             if (!date) return '';
  366.  
  367.             const d = new Date(date);
  368.             const hours = d.getHours();
  369.             const minutes = String(d.getMinutes()).padStart(2, '0');
  370.             const ampm = hours >= 12 ? 'PM' : 'AM';
  371.             const formattedHours = (hours % 12 || 12)
  372.             .toString()
  373.             .padStart(2, '0');
  374.  
  375.             return `${formattedHours}:${minutes} ${ampm}`;
  376.         },
  377.         time_ago: (timestamp, isIso = false) => {
  378.             if (!timestamp) return '';
  379.             const currentTime = new Date();
  380.             const elapsedTime = isIso
  381.             ? currentTime - new Date(timestamp)
  382.             : currentTime - timestamp;
  383.  
  384.             const seconds = Math.floor(elapsedTime / 1000);
  385.             const minutes = Math.floor(seconds / 60);
  386.             const hours = Math.floor(minutes / 60);
  387.             const days = Math.floor(hours / 24);
  388.             const years = Math.floor(days / 365);
  389.  
  390.             if (years > 0) {
  391.                 return years === 1 ? '1 year ago' : `${years} years ago`;
  392.             } else if (days > 0) {
  393.                 return days === 1 ? '1 day ago' : `${days} days ago`;
  394.             } else if (hours > 0) {
  395.                 return hours === 1 ? '1 hour ago' : `${hours} hours ago`;
  396.             } else if (minutes > 0) {
  397.                 return minutes === 1
  398.                     ? '1 minute ago'
  399.                 : `${minutes} minutes ago`;
  400.             } else {
  401.                 return seconds <= 1 ? '1s>' : `${seconds}s ago`;
  402.             }
  403.         },
  404.         getTimeLeft(timestamp) {
  405.             let totalSeconds = Math.max(0, Math.floor((timestamp - Date.now()) / 1000));
  406.             const timeUnits = [['d', 86400], ['h', 3600], ['m', 60], ['s', 1]];
  407.             let result = '';
  408.  
  409.             for (const [unit, seconds] of timeUnits) {
  410.                 if (totalSeconds >= seconds) {
  411.                     const value = Math.floor(totalSeconds / seconds);
  412.                     totalSeconds %= seconds;
  413.                     result += `${value}${unit}`;
  414.                 }
  415.             }
  416.  
  417.             return result || '0s';
  418.         }
  419.     };
  420.  
  421.     const getStringUTF8 = (view, o) => {
  422.         const startOffset = o;
  423.  
  424.         while (view.getUint8(o) !== 0 && o < view.byteLength) {
  425.             o++;
  426.         }
  427.  
  428.         return o > startOffset
  429.             ? [new TextDecoder().decode(new DataView(view.buffer, startOffset, o - startOffset)), o + 1]
  430.         : ['', o + 1];
  431.     };
  432.  
  433.  
  434.     // --------- END HELPER FUNCTIONS --------- //
  435.  
  436.     let client = null;
  437.     let freezepos = false;
  438.  
  439.     // --------- Sigmally WebSocket Handler --------- //
  440.     class SigWsHandler {
  441.         constructor() {
  442.             this.handshake = false;
  443.             this.C = new Uint8Array(256);
  444.             this.R = new Uint8Array(256);
  445.  
  446.             this.overrideWebSocketSend();
  447.         }
  448.  
  449.         overrideWebSocketSend() {
  450.             const handler = this;
  451.  
  452.             window.WebSocket = new Proxy(window.WebSocket, {
  453.                 construct(target, args) {
  454.                     const wsInstance = new target(...args);
  455.  
  456.                     if (args[0].includes('sigmally.com')) {
  457.                         handler.setupWebSocket(wsInstance);
  458.                     }
  459.  
  460.                     return wsInstance;
  461.                 },
  462.             });
  463.         }
  464.  
  465.         setupWebSocket(ws) {
  466.             window.gameSettings.ws = ws;
  467.  
  468.             // if 'save' is in localstorage, it indicates that you are logged in to Google; if that is the case, it
  469.             // will load the client after the authorization to load the modClient correctly.
  470.             // This loads the client instantly if you're not logged in to Google
  471.             if (!localStorage.getItem('save') && !client) {
  472.                 client = new modClient();
  473.             }
  474.  
  475.             ws.addEventListener('close', () => this.handleWebSocketClose());
  476.             ws.sendPacket = this.sendPacket.bind(this);
  477.  
  478.             window.sendPlay = this.sendPlay.bind(this);
  479.             window.sendChat = this.sendChat.bind(this);
  480.             window.sendMouseMove = this.sendMouseMove.bind(this);
  481.  
  482.             const originalSend = ws.send.bind(ws);
  483.             ws.send = (data) => {
  484.                 try {
  485.                     const arrayBuffer =
  486.                           data instanceof ArrayBuffer ? data : data.buffer;
  487.                     const view = new DataView(arrayBuffer);
  488.  
  489.                     const r = view.getUint8();
  490.  
  491.                     if (this.R[r] === 0) {
  492.                         window.gameSettings.isPlaying = true;
  493.                     }
  494.  
  495.                     if (!window.sigfix && freezepos && this.R[r] === 16) {
  496.                         return;
  497.                     }
  498.  
  499.                     originalSend(data);
  500.                 } catch (e) {
  501.                     console.error(e);
  502.                 }
  503.             };
  504.  
  505.             ws.addEventListener('message', (event) =>
  506.                                 this.handleMessage(event)
  507.                                );
  508.         }
  509.  
  510.         handleWebSocketClose() {
  511.             this.handshake = false;
  512.             window.gameSettings.isPlaying = false;
  513.  
  514.             playerPosition.x = null;
  515.             playerPosition.y = null;
  516.             byId('mod-messages').innerHTML = '';
  517.             setTimeout(mods.showOverlays, 500);
  518.         }
  519.  
  520.         sendPacket(packet) {
  521.             if (!window.gameSettings.ws) {
  522.                 console.error('WebSocket is not defined.');
  523.                 return;
  524.             }
  525.  
  526.             window.gameSettings.ws.send(packet);
  527.         }
  528.  
  529.         sendPlay(playData) {
  530.             const { sigfix } = window;
  531.             if (sigfix) {
  532.                 sigfix.net.play(sigfix.world.selected, JSON.parse(playData));
  533.                 return;
  534.             }
  535.  
  536.             const json = JSON.stringify(playData);
  537.             const encoded = textEncoder.encode(json);
  538.             const buf = new Uint8Array(encoded.length + 2);
  539.  
  540.             buf[0] = this.C[0x00];
  541.             buf.set(encoded, 1);
  542.  
  543.             this.sendPacket(buf);
  544.         }
  545.  
  546.         sendChat(text) {
  547.             if (mods.aboveRespawnLimit && text === mods.respawnCommand) return;
  548.             if (window.sigfix) return window.sigfix.net.chat(text);
  549.  
  550.             const encoded = textEncoder.encode(text);
  551.             const buf = new Uint8Array(encoded.byteLength + 3);
  552.  
  553.             buf[0] = this.C[0x63];
  554.             buf.set(encoded, 2);
  555.  
  556.             this.sendPacket(buf);
  557.         }
  558.  
  559.         sendMouseMove(x, y) {
  560.             const {sigfix} = window;
  561.             if (sigfix) {
  562.                 sigfix.net.move(sigfix.world.selected, x, y);
  563.                 return;
  564.             }
  565.             const view = new DataView(new ArrayBuffer(14));
  566.  
  567.             view.setUint8(0, this.C[0x10]);
  568.             view.setInt32(1, x, true);
  569.             view.setInt32(5, y, true);
  570.  
  571.             this.sendPacket(view);
  572.         }
  573.  
  574.         removePlayer(id) {
  575.             const index = this.cells.players.indexOf(id);
  576.             if (index !== -1) {
  577.                 this.cells.players.splice(index, 1);
  578.             }
  579.         }
  580.  
  581.         handleMessage(event) {
  582.             const view = new DataView(event.data);
  583.             let o = 0;
  584.  
  585.             if (!this.handshake) {
  586.                 this.performHandshake(view, o);
  587.                 return;
  588.             }
  589.  
  590.             const r = view.getUint8(o++);
  591.             switch (this.R[r]) {
  592.                 case 0x63:
  593.                     this.handleChatMessage(view, o);
  594.                     break;
  595.                 case 0x40:
  596.                     this.updateBorder(view, o);
  597.                     break;
  598.             }
  599.         }
  600.  
  601.         performHandshake(view, o) {
  602.             let bytes = [];
  603.             let b;
  604.             while ((b = view.getUint8(o++)) !== 0) bytes.push(b);
  605.  
  606.             this.C.set(new Uint8Array(view.buffer.slice(o, o + 256)));
  607.             o += 256;
  608.  
  609.             for (const i in this.C) {
  610.                 this.R[this.C[i]] = ~~i;
  611.             }
  612.  
  613.             this.handshake = true;
  614.         }
  615.  
  616.         handleChatMessage(view, o) {
  617.             const flags = view.getUint8(o++);
  618.             const rgb = Array.from({ length: 3 }, () => view.getUint8(o++) / 255);
  619.             const hex = `#${rgb.map(c => Math.floor(c * 255).toString(16).padStart(2, '0')).join('')}`;
  620.  
  621.             let [name, message] = [];
  622.             [name, o] = getStringUTF8(view, o);
  623.             [message, o] = getStringUTF8(view, o);
  624.  
  625.             if (name.trim() === '') name = 'Unnamed';
  626.  
  627.             if (!mods.mutedUsers.includes(name) && !mods.spamMessage(name, message) && !modSettings.chat.showClientChat) {
  628.                 mods.updateChat({
  629.                     color: modSettings.chat.showNameColors ? hex : '#fafafa',
  630.                     name,
  631.                     message,
  632.                     time: modSettings.chat.showTime ? Date.now() : null,
  633.                 });
  634.             }
  635.         }
  636.  
  637.         updateBorder(view, o) {
  638.             const [left, top, right, bottom] = [
  639.                 view.getFloat64(o, true),
  640.                 view.getFloat64(o + 8, true),
  641.                 view.getFloat64(o + 16, true),
  642.                 view.getFloat64(o + 24, true)
  643.             ];
  644.  
  645.             mods.border = {
  646.                 left, top, right, bottom,
  647.                 width: right - left,
  648.                 height: bottom - top
  649.             }
  650.         }
  651.     }
  652.  
  653.     class SigFixHandler {
  654.         constructor() {
  655.             this.lastHadCells = false;
  656.             this.checkInterval = null;
  657.             this.updatePosInterval = null;
  658.             this.sendPosInterval = null;
  659.             this.init();
  660.         }
  661.  
  662.         overrideMoveFunction() {
  663.             if (!window.sigfix?.net?.move) return;
  664.  
  665.             const originalMove = window.sigfix.net.move;
  666.             let isHandlingFreeze = false;
  667.  
  668.             window.sigfix.net.move = (...args) => {
  669.                 if (freezepos && !isHandlingFreeze) {
  670.                     isHandlingFreeze = true;
  671.                     originalMove.call(this, playerPosition.x, playerPosition.y);
  672.                     isHandlingFreeze = false;
  673.                     return;
  674.                 }
  675.                 return originalMove.apply(this, args);
  676.             };
  677.         }
  678.  
  679.         calculatePlayerPosition() {
  680.             let ownX = 0, ownY = 0, ownN = 0;
  681.             const ownedCells = window.sigfix.world.views.get(window.sigfix.world.selected)?.owned || [];
  682.  
  683.             ownedCells.forEach(id => {
  684.                 const cell = window.sigfix.world.cells.get(id)?.merged;
  685.                 if (cell) {
  686.                     ownN++;
  687.                     ownX += cell.nx;
  688.                     ownY += cell.ny;
  689.                 }
  690.             });
  691.  
  692.             return ownN > 0 ? { x: ownX / ownN, y: ownY / ownN } : null;
  693.         }
  694.  
  695.         updatePlayerPos() {
  696.             const newPos = this.calculatePlayerPosition();
  697.             if (newPos) {
  698.                 playerPosition.x = newPos.x;
  699.                 playerPosition.y = newPos.y;
  700.                 this.lastHadCells = true;
  701.             } else if (this.lastHadCells) {
  702.                 playerPosition.x = null;
  703.                 playerPosition.y = null;
  704.                 this.sendPlayerPos();
  705.                 this.lastHadCells = false;
  706.             }
  707.         }
  708.  
  709.         sendPlayerPos() {
  710.             if (playerPosition.x !== null && playerPosition.y !== null && client?.ws?.readyState === 1 && modSettings.settings.tag) {
  711.                 client.send({
  712.                     type: 'position',
  713.                     content: { x: playerPosition.x, y: playerPosition.y }
  714.                 });
  715.             }
  716.         }
  717.  
  718.         startIntervals() {
  719.             this.updatePosInterval = setInterval(this.updatePlayerPos.bind(this));
  720.             this.sendPosInterval = setInterval(this.sendPlayerPos.bind(this), 300);
  721.         }
  722.  
  723.         checkSigFix() {
  724.             if (window.sigfix) {
  725.                 this.startIntervals();
  726.                 this.overrideMoveFunction();
  727.                 clearInterval(this.checkInterval);
  728.             }
  729.         }
  730.  
  731.         init() {
  732.             const checkSigFix = () => {
  733.                 this.checkSigFix();
  734.                 if (window.sigfix?.net) {
  735.                     setTimeout(() => { this.checkInterval = null; }, 1000);
  736.                 }
  737.             };
  738.  
  739.             this.checkInterval = setInterval(checkSigFix, 100);
  740.         }
  741.     }
  742.  
  743.     new SigFixHandler();
  744.  
  745.  
  746.     // --------- Mod Client --------- //
  747.     class modClient {
  748.         constructor() {
  749.             this.ws = null;
  750.             this.wsUrl = isDev
  751.                 ? `ws://localhost:${port}/ws`
  752.             : 'wss://mod.czrsd.com/ws';
  753.  
  754.             this.retries = 0;
  755.             this.maxRetries = 4;
  756.             this.updateAvailable = false;
  757.  
  758.             this.id = null;
  759.             this.connectedAmount = 0;
  760.  
  761.             this.connect();
  762.         }
  763.  
  764.         connect() {
  765.             this.ws = new WebSocket(this.wsUrl);
  766.             this.ws.binaryType = 'arraybuffer';
  767.             window.sigmod.ws = this.ws;
  768.  
  769.             this.ws.addEventListener('open', this.onOpen.bind(this));
  770.             this.ws.addEventListener('close', this.onClose.bind(this));
  771.             this.ws.addEventListener('message', this.onMessage.bind(this));
  772.             this.ws.addEventListener('error', this.onError.bind(this));
  773.         }
  774.  
  775.         async onOpen() {
  776.             this.connectedAmount++;
  777.             await this.waitForDOMLoad();
  778.  
  779.             this.updateClientInfo();
  780.             this.updateTagInfo();
  781.  
  782.             // Send nick if client got disconnected more than one time
  783.             if (this.connectedAmount > 1) {
  784.                 client.send({
  785.                     type: 'update-nick',
  786.                     content: mods.nick,
  787.                 });
  788.             }
  789.         }
  790.  
  791.         waitForDOMLoad() {
  792.             return new Promise((resolve) => setTimeout(resolve, 500));
  793.         }
  794.  
  795.         updateClientInfo() {
  796.             this.send({
  797.                 type: 'server-changed',
  798.                 content: getGameMode(),
  799.             });
  800.             this.send({
  801.                 type: 'version',
  802.                 content: serverVersion,
  803.             });
  804.         }
  805.  
  806.         updateTagInfo() {
  807.             const tagElement = document.querySelector('#tag');
  808.             const tagText = document.querySelector('.tagText');
  809.             const tagValue = this.getTagFromUrl();
  810.  
  811.             if (tagValue) {
  812.                 modSettings.settings.tag = tagValue;
  813.                 updateStorage();
  814.                 tagElement.value = tagValue;
  815.                 tagText.innerText = `Tag: ${tagValue}`;
  816.                 this.send({
  817.                     type: 'update-tag',
  818.                     content: modSettings.settings.tag,
  819.                 });
  820.             } else if (modSettings.settings.tag) {
  821.                 tagElement.value = modSettings.settings.tag;
  822.                 tagText.innerText = `Tag: ${modSettings.settings.tag}`;
  823.                 this.send({
  824.                     type: 'update-tag',
  825.                     content: modSettings.settings.tag,
  826.                 });
  827.             }
  828.         }
  829.  
  830.         getTagFromUrl() {
  831.             const urlParams = new URLSearchParams(window.location.search);
  832.             const tagValue = urlParams.get('tag');
  833.             return tagValue ? tagValue.replace(/\/$/, '') : null;
  834.         }
  835.  
  836.         onClose() {
  837.             if (this.updateAvailable) return;
  838.  
  839.             this.retries++;
  840.             if (this.retries > this.maxRetries)
  841.                 throw new Error('SigMod server down.');
  842.  
  843.             setTimeout(() => this.connect(), 2000); // auto reconnect with delay
  844.         }
  845.  
  846.         onMessage(event) {
  847.             const message = this.parseMessage(event.data);
  848.             if (!message || !message.type) return;
  849.  
  850.             switch (message.type) {
  851.                 case 'sid':
  852.                     this.handleSidMessage(message.content);
  853.                     break;
  854.                 case 'ping':
  855.                     this.handlePingMessage();
  856.                     break;
  857.                 case 'minimap-data':
  858.                     mods.updData(message.content);
  859.                     break;
  860.                 case 'chat-message':
  861.                     this.handleChatMessage(message.content);
  862.                     break;
  863.                 case 'private-message':
  864.                     mods.updatePrivateChat(message.content);
  865.                     break;
  866.                 case 'update-available':
  867.                     this.handleUpdateAvailable(message.content);
  868.                     break;
  869.                 case 'alert':
  870.                     mods.handleAlert(message.content);
  871.                     break;
  872.                 case 'tournament-preview':
  873.                     mods.tData = message.content;
  874.                     mods.showTournament(message.content);
  875.                     break;
  876.                 case 'tournament-message':
  877.                     mods.updateChat({
  878.                         name: '[TOURNAMENT]',
  879.                         message: message.content,
  880.                         time: modSettings.chat.showTime ? Date.now() : null,
  881.                     });
  882.                     break;
  883.                 case 'tournament-session':
  884.                     mods.tournamentSession(message.content);
  885.                     break;
  886.                 case 'get-score':
  887.                     mods.getScore(message.content);
  888.                     break;
  889.                 case 'round-end':
  890.                     mods.roundEnd(message.content);
  891.                     break;
  892.                 case 'round-ready':
  893.                     mods.tournamentReady(message.content);
  894.                     break;
  895.                 case 'tournament-data':
  896.                     mods.handleTournamentData(message.content);
  897.                     break;
  898.                 case 'error':
  899.                     mods.modAlert(message.content.message, 'danger');
  900.                     break;
  901.                 default:
  902.                     console.error('Unknown message type:', message.type);
  903.             }
  904.         }
  905.  
  906.         onError(event) {
  907.             console.error('WebSocket error:', event);
  908.         }
  909.  
  910.         send(data) {
  911.             if (!data || this.ws.readyState !== 1) return;
  912.             const binaryData = textEncoder.encode(JSON.stringify(data));
  913.             this.ws.send(binaryData);
  914.         }
  915.  
  916.         parseMessage(data) {
  917.             try {
  918.                 const stringData = textDecoder.decode(
  919.                     new Uint8Array(data)
  920.                 );
  921.                 return JSON.parse(stringData);
  922.             } catch (error) {
  923.                 console.error('Failed to parse message:', error);
  924.                 return null;
  925.             }
  926.         }
  927.  
  928.         handleSidMessage(content) {
  929.             this.id = content;
  930.             if (!modSettings.modAccount.authorized) return;
  931.  
  932.             setTimeout(() => {
  933.                 mods.auth(content);
  934.             }, 1000);
  935.         }
  936.  
  937.         handlePingMessage() {
  938.             mods.ping.latency = Date.now() - mods.ping.start;
  939.             mods.ping.end = Date.now();
  940.             byId('clientPing').innerHTML = `Client Ping: ${mods.ping.latency}ms`;
  941.         }
  942.  
  943.         handleChatMessage(content) {
  944.             if (!content) return;
  945.             let { admin, mod, vip, name, message, color } = content;
  946.  
  947.             name = this.formatChatName(admin, mod, vip, name);
  948.  
  949.             mods.updateChat({
  950.                 admin,
  951.                 mod,
  952.                 color,
  953.                 name,
  954.                 message,
  955.                 time: modSettings.chat.showTime ? Date.now() : null,
  956.             });
  957.         }
  958.  
  959.         formatChatName(admin, mod, vip, name) {
  960.             if (admin) name = '[Owner] ' + name;
  961.             if (mod) name = '[Mod] ' + name;
  962.             if (vip) name = '[VIP] ' + name;
  963.             if (!name) name = 'Unnamed';
  964.             return name;
  965.         }
  966.  
  967.         handleUpdateAvailable(content) {
  968.             byId('play-btn').setAttribute('disabled', 'disabled');
  969.             byId('spectate-btn').setAttribute('disabled', 'disabled');
  970.             this.updateAvailable = true;
  971.             this.createModAlert(content);
  972.         }
  973.  
  974.         createModAlert(content) {
  975.             const modAlert = document.createElement('div');
  976.             modAlert.classList.add('modAlert');
  977.             modAlert.innerHTML = `
  978.                 <span>You are using an old mod version. Please update.</span>
  979.                 <div class="flex centerXY g-5">
  980.                     <button
  981.                         class="modButton"
  982.                         style="width: 100%"
  983.                         onclick="window.open('${content}')"
  984.                     >Update</button>
  985.                 </div>
  986.             `;
  987.             document.body.append(modAlert);
  988.         }
  989.     }
  990.  
  991.     function randomPos() {
  992.         let eventOptions = {
  993.             clientX: Math.floor(Math.random() * window.innerWidth),
  994.             clientY: Math.floor(Math.random() * window.innerHeight),
  995.             bubbles: true,
  996.             cancelable: true,
  997.         };
  998.  
  999.         let event = new MouseEvent('mousemove', eventOptions);
  1000.  
  1001.         document.dispatchEvent(event);
  1002.     }
  1003.  
  1004.     let moveInterval = setInterval(randomPos);
  1005.     setTimeout(() => clearInterval(moveInterval), 600);
  1006.  
  1007.     // Disable chat before game settings actually load
  1008.     localStorage.setItem('settings', JSON.stringify({ ...JSON.parse(localStorage.getItem('settings')), showChat: false }));
  1009.  
  1010.     function addSettings() {
  1011.         const gameSettings = document.querySelector('.checkbox-grid');
  1012.         if (!gameSettings) return;
  1013.  
  1014.         const div = document.createElement('div');
  1015.         div.innerHTML = `
  1016.             <input type="checkbox" id="showNames">
  1017.             <label>Names</label>
  1018.             <input type="checkbox" id="showSkins">
  1019.             <label>Skins</label>
  1020.             <input type="checkbox" id="autoRespawn">
  1021.             <label>Auto Respawn</label>
  1022.             <input type="checkbox" id="autoClaimCoins">
  1023.             <label>Auto claim coins</label>
  1024.             <input type="checkbox" id="showPosition">
  1025.             <label>Position</label>
  1026.         `;
  1027.         while (div.children.length > 0) gameSettings.append(div.children[0]);
  1028.     }
  1029.     addSettings();
  1030.  
  1031.     async function checkDiscordLogin() {
  1032.         // popup window from discord login
  1033.         const urlParams = new URLSearchParams(window.location.search);
  1034.         let accessToken = urlParams.get('access_token');
  1035.         let refreshToken = urlParams.get('refresh_token');
  1036.  
  1037.         if (!accessToken || !refreshToken) return;
  1038.  
  1039.         const url = isDev
  1040.         ? `http://localhost:${port}/discord/login/`
  1041.         : 'https://mod.czrsd.com/discord/login/';
  1042.  
  1043.         const overlay = document.createElement('div');
  1044.         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`;
  1045.         overlay.innerHTML = `
  1046.                 <span style="font-size: 5rem; color: #fafafa;">Login...</span>
  1047.             `;
  1048.         document.body.append(overlay);
  1049.  
  1050.         setTimeout(async () => {
  1051.             if (refreshToken.endsWith('/')) {
  1052.                 refreshToken = refreshToken.substring(
  1053.                     0,
  1054.                     refreshToken.length - 1
  1055.                 );
  1056.             } else {
  1057.                 return;
  1058.             }
  1059.  
  1060.             await fetch(
  1061.                 `${url}?accessToken=${accessToken}&refreshToken=${refreshToken}`,
  1062.                 {
  1063.                     method: 'GET',
  1064.                     credentials: 'include',
  1065.                 }
  1066.             );
  1067.  
  1068.             modSettings.modAccount.authorized = true;
  1069.             updateStorage();
  1070.             window.close();
  1071.         }, 500);
  1072.     }
  1073.     checkDiscordLogin();
  1074.  
  1075.     let mods = {};
  1076.  
  1077.     let playerPosition = { x: null, y: null };
  1078.     let lastGetScore = 0;
  1079.     let lastPosTime = 0;
  1080.     let dead = false;
  1081.     let dead2 = false;
  1082.  
  1083.     function Mod() {
  1084.         this.nick = null;
  1085.         this.profile = {};
  1086.         this.friends_settings = window.sigmod.friends_settings = {};
  1087.         this.friend_names = window.sigmod.friend_names = new Set();
  1088.  
  1089.         this.splitKey = {
  1090.             keyCode: 32,
  1091.             code: 'Space',
  1092.             cancelable: true,
  1093.             composed: true,
  1094.             isTrusted: true,
  1095.             which: 32,
  1096.         };
  1097.  
  1098.         this.ping = {
  1099.             latency: NaN,
  1100.             intervalId: null,
  1101.             start: null,
  1102.             end: null,
  1103.         };
  1104.  
  1105.         this.dayTimer = null;
  1106.         this.challenges = [];
  1107.  
  1108.         this.scrolling = false;
  1109.         this.onContext = false;
  1110.         this.mouseDown = false;
  1111.  
  1112.         this.mouseX = 0;
  1113.         this.mouseY = 0;
  1114.  
  1115.         this.renderedMessages = 0;
  1116.         this.maxChatMessages = 200;
  1117.         this.mutedUsers = [];
  1118.         this.blockedChatData = {
  1119.             names: [],
  1120.             messages: []
  1121.         };
  1122.  
  1123.         this.respawnCommand = '/leaveworld';
  1124.         this.aboveRespawnLimit = false;
  1125.         this.cellSize = 0;
  1126.         this.miniMapData = [];
  1127.         this.border = {};
  1128.  
  1129.         this.dbCache = null;
  1130.  
  1131.         this.tourneyPassword = '';
  1132.         this.lastOneStanding = false;
  1133.  
  1134.         this.skins = [];
  1135.  
  1136.         this.virusImageLoaded = false;
  1137.         this.skinImageLoaded = false;
  1138.  
  1139.         this.routes = {
  1140.             discord: {
  1141.                 auth: isDev
  1142.                 ? 'https://discord.com/oauth2/authorize?client_id=1067097357780516874&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3001%2Fdiscord%2Fcallback&scope=identify'
  1143.                 : 'https://discord.com/oauth2/authorize?client_id=1067097357780516874&response_type=code&redirect_uri=https%3A%2F%2Fmod.czrsd.com%2Fdiscord%2Fcallback&scope=identify',
  1144.             },
  1145.         };
  1146.  
  1147.         // for SigMod specific
  1148.         this.appRoutes = {
  1149.             badge: isDev
  1150.             ? `http://localhost:${port}/badge`
  1151.             : 'https://mod.czrsd.com/badge',
  1152.             signIn: (path) =>
  1153.             isDev
  1154.             ? `http://localhost:${port}/${path}`
  1155.             : `https://mod.czrsd.com/${path}`,
  1156.             auth: isDev
  1157.             ? `http://localhost:${port}/auth`
  1158.             : `https://mod.czrsd.com/auth`,
  1159.             users: isDev
  1160.             ? `http://localhost:${port}/users`
  1161.             : `https://mod.czrsd.com/users`,
  1162.             search: isDev
  1163.             ? `http://localhost:${port}/search`
  1164.             : `https://mod.czrsd.com/search`,
  1165.             request: isDev
  1166.             ? `http://localhost:${port}/request`
  1167.             : `https://mod.czrsd.com/request`,
  1168.             friends: isDev
  1169.             ? `http://localhost:${port}/me/friends`
  1170.             : `https://mod.czrsd.com/me/friends`,
  1171.             profile: (id) =>
  1172.             isDev
  1173.             ? `http://localhost:${port}/profile/${id}`
  1174.             : `https://mod.czrsd.com/profile/${id}`,
  1175.             myRequests: isDev
  1176.             ? `http://localhost:${port}/me/requests`
  1177.             : `https://mod.czrsd.com/me/requests`,
  1178.             handleRequest: isDev
  1179.             ? `http://localhost:${port}/me/handle`
  1180.             : `https://mod.czrsd.com/me/handle`,
  1181.             logout: isDev
  1182.             ? `http://localhost:${port}/logout`
  1183.             : `https://mod.czrsd.com/logout`,
  1184.             imgUpload: isDev
  1185.             ? `http://localhost:${port}/me/upload`
  1186.             : `https://mod.czrsd.com/me/upload`,
  1187.             removeAvatar: isDev
  1188.             ? `http://localhost:${port}/me/handle`
  1189.             : `https://mod.czrsd.com/me/handle`,
  1190.             editProfile: isDev
  1191.             ? `http://localhost:${port}/me/edit`
  1192.             : `https://mod.czrsd.com/me/edit`,
  1193.             delProfile: isDev
  1194.             ? `http://localhost:${port}/me/remove`
  1195.             : `https://mod.czrsd.com/me/remove`,
  1196.             updateSettings: isDev
  1197.             ? `http://localhost:${port}/me/update-settings`
  1198.             : `https://mod.czrsd.com/me/update-settings`,
  1199.             chatHistory: (id) =>
  1200.             isDev
  1201.             ? `http://localhost:${port}/me/chat/${id}`
  1202.             : `https://mod.czrsd.com/me/chat/${id}`,
  1203.             onlineUsers: isDev
  1204.             ? `http://localhost:${port}/onlineUsers`
  1205.             : `https://mod.czrsd.com/onlineUsers`,
  1206.             announcements: isDev
  1207.             ? `http://localhost:${port}/announcements`
  1208.             : `https://mod.czrsd.com/announcements`,
  1209.             announcement: (id) =>
  1210.             isDev
  1211.             ? `http://localhost:${port}/announcement/${id}`
  1212.             : `https://mod.czrsd.com/announcement/${id}`,
  1213.             fonts: isDev
  1214.             ? `http://localhost:${port}/fonts`
  1215.             : 'https://mod.czrsd.com/fonts',
  1216.             blockedChatData: 'https://mod.czrsd.com/spam.json',
  1217.         };
  1218.  
  1219.         this.init();
  1220.     }
  1221.  
  1222.     Mod.prototype = {
  1223.         get style() {
  1224.             return `
  1225.         @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap');
  1226.  
  1227.         .mod_menu {
  1228.             position: absolute;
  1229.             top: 0;
  1230.             left: 0;
  1231.             width: 100%;
  1232.             height: 100vh;
  1233.             background: rgba(0, 0, 0, .6);
  1234.             z-index: 999999;
  1235.             display: flex;
  1236.             justify-content: center;
  1237.             align-items: center;
  1238.             color: #fff;
  1239.             transition: all .3s ease;
  1240.         }
  1241.  
  1242.         .mod_menu * {
  1243.             margin: 0;
  1244.             padding: 0;
  1245.             font-family: 'Ubuntu';
  1246.             box-sizing: border-box;
  1247.         }
  1248.  
  1249.         .mod_menu_wrapper {
  1250.             position: relative;
  1251.             display: flex;
  1252.             flex-direction: column;
  1253.             width: 700px;
  1254.             height: 500px;
  1255.             background: #111;
  1256.             border-radius: 12px;
  1257.             overflow: hidden;
  1258.             box-shadow: 0 5px 10px #000;
  1259.         }
  1260.  
  1261.         .mod_menu_header {
  1262.             display: flex;
  1263.             width: 100%;
  1264.             position: relative;
  1265.             height: 60px;
  1266.         }
  1267.  
  1268.         .mod_menu_header .header_img {
  1269.             width: 100%;
  1270.             height: 60px;
  1271.             object-fit: cover;
  1272.             object-position: center;
  1273.             position: absolute;
  1274.         }
  1275.  
  1276.         .mod_menu_header button {
  1277.             display: flex;
  1278.             justify-content: center;
  1279.             align-items: center;
  1280.             position: absolute;
  1281.             right: 10px;
  1282.             top: 30px;
  1283.             background: rgba(11, 11, 11, .7);
  1284.             width: 42px;
  1285.             height: 42px;
  1286.             font-size: 16px;
  1287.             transform: translateY(-50%);
  1288.         }
  1289.  
  1290.         .mod_menu_header button:hover {
  1291.             background: rgba(11, 11, 11, .5);
  1292.         }
  1293.  
  1294.         .mod_menu_inner {
  1295.             display: flex;
  1296.         }
  1297.  
  1298.         .mod_menu_navbar {
  1299.             display: flex;
  1300.             flex-direction: column;
  1301.             gap: 10px;
  1302.             min-width: 132px;
  1303.             padding: 10px;
  1304.             background: #181818;
  1305.             height: 440px;
  1306.         }
  1307.  
  1308.         .mod_nav_btn, .modButton-black {
  1309.             display: flex;
  1310.             justify-content: space-evenly;
  1311.             align-items: center;
  1312.             padding: 5px;
  1313.             background: #050505;
  1314.             border-radius: 8px;
  1315.             font-size: 16px;
  1316.             border: 1px solid transparent;
  1317.             outline: none;
  1318.             width: 100%;
  1319.             transition: all .3s ease;
  1320.         }
  1321.         label.modButton-black {
  1322.             font-weight: 400;
  1323.             cursor: pointer;
  1324.         }
  1325.  
  1326.         .modButton-black[disabled] {
  1327.             background: #333;
  1328.             cursor: default;
  1329.         }
  1330.  
  1331.         .mod_selected {
  1332.             border: 1px solid rgba(89, 89, 89, .9);
  1333.         }
  1334.  
  1335.         .mod_nav_btn img {
  1336.             width: 22px;
  1337.         }
  1338.  
  1339.         .mod_menu_content {
  1340.             width: 100%;
  1341.             padding: 10px;
  1342.             position: relative;
  1343. 			max-width: 568px;
  1344.         }
  1345.  
  1346.         .mod_tab {
  1347.             width: 100%;
  1348. 			height: 100%;
  1349.             display: flex;
  1350.             flex-direction: column;
  1351.             gap: 5px;
  1352.             overflow-y: auto;
  1353.             overflow-x: hidden;
  1354.             max-height: 420px;
  1355.             opacity: 1;
  1356.             transition: all .2s ease;
  1357.         }
  1358.         .modColItems {
  1359.             display: flex;
  1360.             flex-direction: column;
  1361.             align-items: center;
  1362.             gap: 15px;
  1363.             width: 100%;
  1364.         }
  1365.  
  1366.         .modColItems_2 {
  1367.             display: flex;
  1368.             flex-direction: column;
  1369.             align-items: start;
  1370.             justify-content: start;
  1371.             background: #050505;
  1372.             gap: 8px;
  1373.             border-radius: 0.5rem;
  1374.             padding: 10px;
  1375.             width: 100%;
  1376.         }
  1377.  
  1378.         .modRowItems {
  1379.             display: flex;
  1380.             justify-content: center;
  1381.             align-items: center;
  1382.             background: #050505;
  1383.             gap: 58px;
  1384.             border-radius: 0.5rem;
  1385.             padding: 10px;
  1386.             width: 100%;
  1387.         }
  1388.  
  1389.         .form-control {
  1390.             border-width: 1px;
  1391.         }
  1392.         .form-control.error-border {
  1393.             border-color: #AC3D3D;
  1394.         }
  1395.  
  1396. 		.modSlider {
  1397. 		  --thumb-color: #d9d9d9;
  1398. 		  -webkit-appearance: none;
  1399. 		  appearance: none;
  1400. 		  width: 100%;
  1401. 		  height: 8px;
  1402. 		  background: #333;
  1403. 		  border-radius: 5px;
  1404. 		  outline: none;
  1405. 		  transition: all 0.3s ease;
  1406. 		}
  1407.  
  1408. 		.modSlider::-webkit-slider-thumb {
  1409. 		  -webkit-appearance: none;
  1410. 		  appearance: none;
  1411. 		  width: 20px;
  1412. 		  height: 20px;
  1413. 		  border-radius: 50%;
  1414. 		  background: var(--thumb-color);
  1415. 		}
  1416.  
  1417. 		.modSlider::-moz-range-thumb {
  1418. 		  width: 20px;
  1419. 		  height: 20px;
  1420. 		  border-radius: 50%;
  1421. 		  background: var(--thumb-color);
  1422. 		}
  1423.  
  1424. 		.modSlider::-ms-thumb {
  1425. 		  width: 20px;
  1426. 		  height: 20px;
  1427. 		  border-radius: 50%;
  1428. 		  background: var(--thumb-color);
  1429. 		}
  1430.  
  1431.         input:focus, select:focus, button:focus{
  1432.              outline: none;
  1433.         }
  1434.         .macros_wrapper {
  1435.             display: flex;
  1436.             width: 100%;
  1437.             justify-content: center;
  1438.             flex-direction: column;
  1439.             gap: 10px;
  1440.             background: #050505;
  1441.             padding: 10px;
  1442.             border-radius: 0.75rem;
  1443.         }
  1444.         .macrosContainer {
  1445.             display: flex;
  1446.             width: 100%;
  1447.             justify-content: center;
  1448.             align-items: center;
  1449.             gap: 20px;
  1450.         }
  1451.         .macroRow {
  1452.             background: #121212;
  1453.             border-radius: 5px;
  1454.             padding: 7px;
  1455.             display: flex;
  1456.             justify-content: space-between;
  1457.             align-items: center;
  1458.             gap: 10px;
  1459.         }
  1460.         .keybinding {
  1461.             border-radius: 5px;
  1462.             background: #242424;
  1463.             border: none;
  1464.             color: #fff;
  1465.             padding: 2px 5px;
  1466.             max-width: 50px;
  1467.             font-weight: 500;
  1468.             text-align: center;
  1469.         }
  1470.         .closeBtn{
  1471.              width: 46px;
  1472.              background-color: transparent;
  1473. 			 display: flex;
  1474. 			 justify-content: center;
  1475. 			 align-items: center;
  1476.         }
  1477.         .select-btn {
  1478.             padding: 15px 20px;
  1479.             background: #222;
  1480.             border-radius: 2px;
  1481.             position: relative;
  1482.         }
  1483.  
  1484.         .select-btn:active {
  1485.             scale: 0.95
  1486.         }
  1487.  
  1488.         .select-btn::before {
  1489.             content: "...";
  1490.             font-size: 20px;
  1491.             color: #fff;
  1492.             position: absolute;
  1493.             top: 50%;
  1494.             left: 50%;
  1495.             transform: translate(-50%, -50%);
  1496.         }
  1497.          .text {
  1498.              user-select: none;
  1499.              font-weight: 500;
  1500.              text-align: left;
  1501.         }
  1502.          .modButton {
  1503.              background-color: #252525;
  1504.              border-radius: 4px;
  1505.              color: #fff;
  1506.              transition: all .3s;
  1507.              outline: none;
  1508.              padding: 7px;
  1509.              font-size: 13px;
  1510.              border: none;
  1511.         }
  1512.          .modButton:hover {
  1513.              background-color: #222
  1514.         }
  1515.          .modInput {
  1516.              background-color: #111;
  1517.              border: none;
  1518.              border-radius: 5px;
  1519.              position: relative;
  1520.              border-top-right-radius: 4px;
  1521.              border-top-left-radius: 4px;
  1522.              font-weight: 500;
  1523.              padding: 5px;
  1524.              color: #fff;
  1525.         }
  1526. 		.modNumberInput:disabled {
  1527. 			color: #777;
  1528. 		}
  1529.  
  1530.         .modCheckbox input[type="checkbox"] {
  1531.              display: none;
  1532.              visibility: hidden;
  1533.         }
  1534.         .modCheckbox label {
  1535.           display: inline-block;
  1536.         }
  1537.  
  1538.         .modCheckbox .cbx {
  1539.           position: relative;
  1540.           top: 1px;
  1541.           width: 17px;
  1542.           height: 17px;
  1543.           margin: 2px;
  1544.           border: 1px solid #c8ccd4;
  1545.           border-radius: 3px;
  1546.           vertical-align: middle;
  1547.           transition: background 0.1s ease;
  1548.           cursor: pointer;
  1549.         }
  1550.  
  1551.         .modCheckbox .cbx:after {
  1552.           content: '';
  1553.           position: absolute;
  1554.           top: 1px;
  1555.           left: 5px;
  1556.           width: 5px;
  1557.           height: 11px;
  1558.           opacity: 0;
  1559.           transform: rotate(45deg) scale(0);
  1560.           border-right: 2px solid #fff;
  1561.           border-bottom: 2px solid #fff;
  1562.           transition: all 0.3s ease;
  1563.           transition-delay: 0.15s;
  1564.         }
  1565.  
  1566.         .modCheckbox input[type="checkbox"]:checked ~ .cbx {
  1567.           border-color: transparent;
  1568.           background: #6871f1;
  1569.           box-shadow: 0 0 10px #2E2D80;
  1570.         }
  1571.  
  1572.         .modCheckbox input[type="checkbox"]:checked ~ .cbx:after {
  1573.           opacity: 1;
  1574.           transform: rotate(45deg) scale(1);
  1575.         }
  1576.  
  1577.          .SettingsButton{
  1578.              border: none;
  1579.              outline: none;
  1580.              margin-right: 10px;
  1581.              transition: all .3s ease;
  1582.         }
  1583.          .SettingsButton:hover {
  1584.              scale: 1.1;
  1585.         }
  1586.          .colorInput{
  1587.              background-color: transparent;
  1588.              width: 31px;
  1589.              height: 35px;
  1590.              border-radius: 50%;
  1591.              border: none;
  1592.         }
  1593.          .colorInput::-webkit-color-swatch {
  1594.              border-radius: 50%;
  1595.              border: 2px solid #fff;
  1596.         }
  1597.         .whiteBorder_colorInput::-webkit-color-swatch {
  1598.             border-color: #fff;
  1599.         }
  1600. 		.menu-center>div>.menu-center-content>div>div>.menu__form-group {
  1601. 			margin-bottom: 14px !important;
  1602. 		}
  1603.          #dclinkdiv {
  1604.              display: flex;
  1605.              flex-direction: row;
  1606.              margin-top: 10px;
  1607.         }
  1608.          .dclinks {
  1609.              width: calc(50% - 5px);
  1610.              height: 36px;
  1611.              display: flex;
  1612.              justify-content: center;
  1613.              align-items: center;
  1614.              background-color: rgba(88, 101, 242, 1);
  1615.              border-radius: 6px;
  1616.              margin: 0 auto;
  1617.              color: #fff;
  1618.         }
  1619.          #cm_close__settings {
  1620.              width: 50px;
  1621.              transition: all .3s ease;
  1622.         }
  1623.          #cm_close__settings svg:hover {
  1624.              scale: 1.1;
  1625.         }
  1626.          #cm_close__settings svg {
  1627.              transition: all .3s ease;
  1628.         }
  1629.          .modTitleText {
  1630.              text-align: center;
  1631.              font-size: 16px;
  1632.         }
  1633.         .modItem {
  1634.              display: flex;
  1635.              justify-content: center;
  1636.              align-items: center;
  1637.              flex-direction: column;
  1638.         }
  1639.         .accent_row {
  1640.             background: #111111;
  1641.         }
  1642.          .mod_tab-content {
  1643.              width: 100%;
  1644.              margin: 10px;
  1645.              overflow: auto;
  1646.              display: flex;
  1647.              flex-direction: column;
  1648.         }
  1649.  
  1650.         #Tab6 .mod_tab-content {
  1651.              overflow-y: auto;
  1652.              max-height: 230px;
  1653.              display: flex;
  1654.              flex-wrap: nowrap;
  1655.              flex-direction: column;
  1656.              gap: 10px;
  1657.         }
  1658.  
  1659.         .tab-content, #coins-tab, #chests-tab {
  1660.             overflow-x: hidden;
  1661.             justify-content: center;
  1662.         }
  1663.  
  1664.         #shop-skins-buttons::after {
  1665.             background: #050505;
  1666.         }
  1667.  
  1668. 		#sigma-status {
  1669. 			background: rgba(0, 0, 0, .6) !important;
  1670. 		}
  1671.  
  1672.          .w-100 {
  1673.              width: 100%
  1674.         }
  1675.          .btn:hover {
  1676.              color: unset;
  1677.         }
  1678.  
  1679.         #savedNames {
  1680.             background-color: #000;
  1681.             padding: 5px;
  1682.             border-radius: 5px;
  1683.             overflow-y: auto;
  1684.             height: 155px;
  1685.             background-image: url("https://raw.githubusercontent.com/Sigmally/SigMod/main/images/purple_gradient.png");
  1686.             background-size: cover;
  1687.             background-position: center;
  1688.             background-repeat: no-repeat;
  1689.             box-shadow: 0 0 10px #000;
  1690.         }
  1691.  
  1692.         .scroll {
  1693.             scroll-behavior: smooth;
  1694.         }
  1695.  
  1696.         /* Chrome, Safari */
  1697.         .scroll::-webkit-scrollbar {
  1698.             width: 7px;
  1699.         }
  1700.  
  1701.         .scroll::-webkit-scrollbar-track {
  1702.             background: #222;
  1703.             border-radius: 5px;
  1704.         }
  1705.  
  1706.         .scroll::-webkit-scrollbar-thumb {
  1707.             background-color: #333;
  1708.             border-radius: 5px;
  1709.         }
  1710.  
  1711.         .scroll::-webkit-scrollbar-thumb:hover {
  1712.             background: #353535;
  1713.         }
  1714.  
  1715.         /* Firefox */
  1716.         .scroll {
  1717.             scrollbar-width: thin;
  1718.             scrollbar-color: #333 #222;
  1719.         }
  1720.  
  1721.         .scroll:hover {
  1722.             scrollbar-color: #353535 #222;
  1723.         }
  1724.  
  1725.         .themes {
  1726.             display: flex;
  1727.             flex-direction: row;
  1728. 			flex: 1;
  1729.             flex-wrap: wrap;
  1730.             justify-content: center;
  1731.             width: 100%;
  1732. 			min-height: 254px;
  1733.             max-height: 420px;
  1734.             background: #000;
  1735.             border-radius: 5px;
  1736.             overflow-y: scroll;
  1737.             gap: 10px;
  1738.             padding: 5px;
  1739.         }
  1740.  
  1741.         .themeContent {
  1742.           width: 50px;
  1743.           height: 50px;
  1744.           border: 2px solid #222;
  1745.           border-radius: 50%;
  1746.           background-position: center;
  1747.         }
  1748.  
  1749.         .theme {
  1750.             height: 75px;
  1751.             display: flex;
  1752.             align-items: center;
  1753.             justify-content: center;
  1754.             flex-direction: column;
  1755.             cursor: pointer;
  1756.         }
  1757.          .delName {
  1758.              font-weight: 500;
  1759.              background: #e17e7e;
  1760.              height: 20px;
  1761.              border: none;
  1762.              border-radius: 5px;
  1763.              font-size: 10px;
  1764.              margin-left: 5px;
  1765.              color: #fff;
  1766.              display: flex;
  1767.              justify-content: center;
  1768.              align-items: center;
  1769.              width: 20px;
  1770.         }
  1771.          .NameDiv {
  1772.              display: flex;
  1773.              background: #111;
  1774.              border-radius: 5px;
  1775.              margin: 5px;
  1776.              padding: 3px 8px;
  1777.              height: 34px;
  1778.              align-items: center;
  1779.              justify-content: space-between;
  1780.              cursor: pointer;
  1781.              box-shadow: 0 5px 10px -2px #000;
  1782.         }
  1783.         .NameLabel {
  1784.             cursor: pointer;
  1785.             font-weight: 500;
  1786.             text-align: center;
  1787.             color: #fff;
  1788.         }
  1789.         .alwan {
  1790.             border-radius: 8px;
  1791.         }
  1792.         .colorpicker-additional {
  1793.             display: flex;
  1794.             justify-content: space-between;
  1795.             width: 100%;
  1796.             color: #fafafa;
  1797.             padding: 10px;
  1798.         }
  1799.         .resetButton {
  1800.             width: 25px;
  1801.             height: 25px;
  1802.             background-image: url("https://raw.githubusercontent.com/Sigmally/SigMod/main/images/reset.svg");
  1803.             background-color: transparent;
  1804. 			background-repeat: no-repeat;
  1805.             border: none;
  1806.         }
  1807.  
  1808.         .modAlert {
  1809.             position: fixed;
  1810.             top: 8%;
  1811.             left: 50%;
  1812.             transform: translate(-50%, -50%);
  1813.             z-index: 99995;
  1814.             background: #3F3F3F;
  1815.             border-radius: 10px;
  1816.             display: flex;
  1817.             flex-direction: column;
  1818.             gap: 5px;
  1819.             padding: 10px;
  1820.             color: #fff;
  1821.             max-width: 320px;
  1822.         }
  1823.  
  1824.         .alert_overlay {
  1825.             position: absolute;
  1826.             top: 0;
  1827.             left: 0;
  1828.             z-index: 999999999;
  1829.             pointer-events: none;
  1830.             width: 100%;
  1831.             height: 100vh;
  1832.             display: flex;
  1833.             flex-direction: column;
  1834.             justify-content: start;
  1835.             align-items: center;
  1836.         }
  1837.  
  1838.         .infoAlert {
  1839.             padding: 5px;
  1840.             border-radius: 5px;
  1841.             margin-top: 5px;
  1842.             color: #fff;
  1843.         }
  1844.  
  1845.         .modAlert-success {
  1846.             background: #5BA55C;
  1847.         }
  1848.         .modAlert-success .modAlert-loader {
  1849.             background: #6BD56D;
  1850.         }
  1851.         .modAlert-default {
  1852.             background: #151515;
  1853.         }
  1854.         .modAlert-default .modAlert-loader {
  1855.             background: #222;
  1856.         }
  1857.         .modAlert-danger {
  1858.             background: #D44121;
  1859.         }
  1860.         .modAlert-danger .modAlert-loader {
  1861.             background: #A5361E;
  1862.         }
  1863.         #free-coins .modAlert-danger {
  1864.             background: #fff !important;
  1865.         }
  1866.  
  1867.         .modAlert-loader {
  1868.             width: 100%;
  1869.             height: 2px;
  1870.             margin-top: 5px;
  1871.             transition: all .3s ease-in-out;
  1872.             animation: loadAlert 2s forwards;
  1873.         }
  1874.  
  1875.         @keyframes loadAlert {
  1876.             0% {
  1877.                 width: 100%;
  1878.             }
  1879.             100% {
  1880.                 width: 0%;
  1881.             }
  1882.         }
  1883.  
  1884.         .themeEditor {
  1885.             z-index: 999999999999;
  1886.             position: absolute;
  1887.             top: 50%;
  1888.             left: 50%;
  1889.             transform: translate(-50%, -50%);
  1890.             background: rgba(0, 0, 0, .85);
  1891.             color: #fff;
  1892.             padding: 10px;
  1893.             border-radius: 10px;
  1894.             box-shadow: 0 0 10px #000;
  1895.             width: 400px;
  1896.         }
  1897.  
  1898.         .theme_editor_header {
  1899.             display: flex;
  1900.             justify-content: space-between;
  1901.             align-items: center;
  1902.             gap: 10px;
  1903.         }
  1904.  
  1905.         .theme-editor-tab {
  1906.             display: flex;
  1907.             justify-content: center;
  1908.             align-items: start;
  1909.             flex-direction: column;
  1910.             margin-top: 10px
  1911.         }
  1912.  
  1913.         .themes_preview {
  1914.             width: 50px;
  1915.             height: 50px;
  1916.             border: 2px solid #fff;
  1917.             border-radius: 2px;
  1918.             display: flex;
  1919.             justify-content: center;
  1920.             align-items: center;
  1921.         }
  1922.  
  1923.         .sigmod-title {
  1924.             display: flex;
  1925.             flex-direction: column;
  1926.             align-items: center;
  1927.             gap: 2px;
  1928.         }
  1929.         .sigmod-title #title {
  1930.             width: fit-content;
  1931.         }
  1932.         #bycursed {
  1933.             font-family: "Titillium Web", sans-serif;
  1934. 			font-weight: 400;
  1935.             font-size: 16px;
  1936.         }
  1937.         #bycursed a {
  1938.             color: #71aee3;
  1939.         }
  1940.         .stats__item>span, #title, .stats-btn__text {
  1941.            color: #fff;
  1942.         }
  1943.  
  1944.         .top-users {
  1945.             overflow: hidden;
  1946.         }
  1947.         .top-users__inner {
  1948.             background: transparent;
  1949.         }
  1950.         .top-users__inner table {
  1951.             background-color: rgba(0, 0, 0, 0.6);
  1952.             color: #fff;
  1953.             border-radius: 6px;
  1954.             padding-top: 4px;
  1955.             padding-right: 6px;
  1956.         }
  1957.  
  1958.         .top-users_buttons button {
  1959.             background-color: rgba(0, 0, 0, 0.5);
  1960.             color: #fff;
  1961.         }
  1962.  
  1963.         .top-users_buttons button.active {
  1964.             background-color: rgba(0, 0, 0, 0.8);
  1965.         }
  1966.  
  1967.         .top-users__inner::-webkit-scrollbar-thumb {
  1968.             border: none;
  1969.         }
  1970.         #signInBtn, #nick, #gamemode, .form-control, .profile-header, .coins-num, #clan-members, .member-index, .member-level, #clan-requests {
  1971.             background: rgba(0, 0, 0, 0.4) !important;
  1972.             color: #fff !important;
  1973.         }
  1974.         .profile-name, #progress-next, .member-desc > p:first-child, #clan-leave > div, .clans-item > div > b, #clans-input input, #shop-nav button {
  1975.             color: #fff !important;
  1976.         }
  1977.         .head-desc, #shop-nav button {
  1978.             border: 1px solid #000;
  1979.         }
  1980.         #shop-nav button {
  1981.            transition: background .1s ease;
  1982.         }
  1983.         #shop-nav button:hover {
  1984.            background: #121212 !important;
  1985.         }
  1986.         #clan-handler, #request-handler, #clans-list, #clans-input, .clans-item button, #shop-content, .card-particles-bar-bg {
  1987.             background: #111 !important;
  1988.             color: #fff !important;
  1989.         }
  1990.         #clans_and_settings {
  1991.             height: auto !important;
  1992.         }
  1993.         .card-body {
  1994.             background: linear-gradient(180deg, #000 0%, #1b354c 100%);
  1995.         }
  1996.         .free-card:hover .card-body {
  1997.             background: linear-gradient(180deg, #111 0%, #1b354c 100%);
  1998.         }
  1999.         #shop-tab-body, #shop-nav, #shop-skins-buttons {
  2000.             background: #050505 !important;
  2001.         }
  2002.         #clan-leave {
  2003.             background: #111;
  2004.             bottom: -1px;
  2005.         }
  2006.         .sent {
  2007.             position: relative;
  2008.             width: 100px;
  2009.         }
  2010.  
  2011.         .sent::before {
  2012.             content: "Sent request";
  2013.             width: 100%;
  2014.             height: 10px;
  2015.             word-spacing: normal;
  2016.             white-space: nowrap;
  2017.             position: absolute;
  2018.             background: #4f79f9;
  2019.             display: flex;
  2020.             justify-content: center;
  2021.             align-items: center;
  2022.         }
  2023.  
  2024.         .btn, .sign-in-out-btn {
  2025.             transition: all .2s ease;
  2026.         }
  2027. 		.free-coins-body > div, .goldmodal-contain {
  2028. 			background: rgba(0, 0, 0, .5);
  2029. 		}
  2030.         #clan .connecting__content, #clans .connecting__content {
  2031.             background: #151515;
  2032.             color: #fff;
  2033.             box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  2034.         }
  2035.  
  2036.         .skin-select__icon-text {
  2037.             color: #fff;
  2038.         }
  2039.  
  2040.         .justify-sb {
  2041.             display: flex;
  2042.             align-items: center;
  2043.             justify-content: space-between;
  2044.         }
  2045.  
  2046.         .macro-extanded_input {
  2047.             width: 75px;
  2048.             text-align: center;
  2049.         }
  2050.         .form-control option {
  2051.             background: #111;
  2052.         }
  2053.  
  2054.         .stats-line {
  2055.             width: 100%;
  2056.             user-select: none;
  2057.             margin-bottom: 5px;
  2058.             padding: 5px;
  2059.             background: #050505;
  2060.             border: 1px solid var(--default-mod);
  2061.             border-radius: 5px;
  2062.         }
  2063.  
  2064.         .stats-info-text {
  2065.             color: #7d7d7d;
  2066.         }
  2067.  
  2068.         .setting-card-wrapper {
  2069.             margin-right: 10px;
  2070.             padding: 10px;
  2071.             background: #161616;
  2072.             border-radius: 5px;
  2073.             display: flex;
  2074.             flex-direction: column;
  2075. 			width: 100%;
  2076.         }
  2077.  
  2078.         .setting-card {
  2079.             display: flex;
  2080.             align-items: center;
  2081.             justify-content: space-between;
  2082.         }
  2083.  
  2084.         .setting-card-action {
  2085.             display: flex;
  2086.             align-items: center;
  2087.             gap: 5px;
  2088.             cursor: pointer;
  2089.         }
  2090.  
  2091.         .setting-card-action {
  2092.             width: 100%;
  2093.         }
  2094.  
  2095.         .setting-card-name {
  2096.             font-size: 16px;
  2097.             user-select: none;
  2098.             width: 100%;
  2099.         }
  2100.  
  2101.         .mod-small-modal {
  2102.             display: flex;
  2103.             flex-direction: column;
  2104.             gap: 10px;
  2105.             position: absolute;
  2106.             z-index: 99999;
  2107.             top: 50%;
  2108.             left: 50%;
  2109.             transform: translate(-50%, -50%);
  2110.             background: #191919;
  2111.             box-shadow: 0 5px 15px -2px #000;
  2112.             padding: 10px;
  2113.             border-radius: 5px;
  2114.         }
  2115.  
  2116.         .mod-small-modal-header {
  2117.             display: flex;
  2118.             justify-content: space-between;
  2119.             align-items: center;
  2120.         }
  2121.  
  2122.         .mod-small-modal-header h1 {
  2123.             font-size: 20px;
  2124.             font-weight: 500;
  2125.             margin: 0;
  2126.         }
  2127.  
  2128.         .mod-small-modal-content {
  2129.             display: flex;
  2130.             flex-direction: column;
  2131.             width: 100%;
  2132.             align-items: center;
  2133.         }
  2134.  
  2135.         .mod-small-modal-content_selectImage {
  2136.             display: flex;
  2137.             flex-direction: column;
  2138.             gap: 10px;
  2139.         }
  2140.  
  2141.         .imagePreview {
  2142.             min-width: 34px;
  2143.             width: 34px;
  2144.             height: 34px;
  2145.             border: 2px solid #353535;
  2146. 			border-radius: 5px;
  2147. 			background-size: contain;
  2148. 			background-repeat: no-repeat;
  2149. 			background-position: center;
  2150.  
  2151. 			/* for preview text */
  2152. 			display: flex;
  2153. 			justify-content: center;
  2154. 			align-items: center;
  2155. 			font-size: 7px;
  2156. 			overflow: hidden;
  2157. 			text-align: center;
  2158.         }
  2159.  
  2160.         .modChat {
  2161.             min-width: 450px;
  2162.             max-width: 450px;
  2163.             min-height: 285px;
  2164.             max-height: 285px;
  2165.             color: #fafafa;
  2166.             padding: 10px;
  2167.             position: absolute;
  2168.             bottom: 10px;
  2169.             left: 10px;
  2170.             z-index: 999;
  2171.             border-radius: .5rem;
  2172.             overflow: hidden;
  2173.             opacity: 1;
  2174.             transition: all .3s ease;
  2175.         }
  2176.  
  2177.         .modChat__inner {
  2178.             min-width: 430px;
  2179.             max-width: 430px;
  2180.             min-height: 265px;
  2181.             max-height: 265px;
  2182.             height: 100%;
  2183.             display: flex;
  2184.             flex-direction: column;
  2185.             gap: 5px;
  2186.             justify-content: flex-end;
  2187.             opacity: 1;
  2188.             transition: all .3s ease;
  2189.         }
  2190.  
  2191.         .mod-compact {
  2192.             transform: scale(0.78);
  2193.         }
  2194.         .mod-compact.modChat {
  2195.             left: -40px;
  2196.             bottom: -20px;
  2197.         }
  2198.         .mod-compact.chatAddedContainer {
  2199.             left: 350px;
  2200.             bottom: -17px;
  2201.         }
  2202.  
  2203.         #scroll-down-btn {
  2204.             position: absolute;
  2205.             bottom: 60px;
  2206.             left: 50%;
  2207.             transform: translateX(-50%);
  2208.             width: 80px;
  2209.             display:none;
  2210.             box-shadow:0 0 5px #000;
  2211.             z-index: 5;
  2212.         }
  2213.  
  2214.         .modchat-chatbuttons {
  2215.             margin-bottom: auto;
  2216.             display: flex;
  2217.             gap: 5px;
  2218.         }
  2219.  
  2220.         .chat-context {
  2221.             position: absolute;
  2222.             z-index: 999999;
  2223.             width: 100px;
  2224.             display: flex;
  2225.             flex-direction: column;
  2226.             justify-content: center;
  2227.             align-items: center;
  2228.             gap: 5px;
  2229.             background: #181818;
  2230.             border-radius: 5px;
  2231.         }
  2232.  
  2233.         .chat-context span {
  2234.             color: #fff;
  2235.             user-select: none;
  2236.             padding: 5px;
  2237.             white-space: nowrap;
  2238.         }
  2239.  
  2240.         .chat-context button {
  2241.             width: 100%;
  2242.             background-color: transparent;
  2243.             border: none;
  2244.             border-top: 2px solid #747474;
  2245.             outline: none;
  2246.             color: #fff;
  2247.             transition: all .3s ease;
  2248.         }
  2249.  
  2250.         .chat-context button:hover {
  2251.             backgrokund-color: #222;
  2252.         }
  2253.  
  2254.         .tagText {
  2255.             margin-left: auto;
  2256.             font-size: 14px;
  2257.         }
  2258.  
  2259.         #mod-messages {
  2260.             position: relative;
  2261.             display: flex;
  2262.             flex-direction: column;
  2263.             max-height: 185px;
  2264.             overflow-y: auto;
  2265.             direction: rtl;
  2266.             scroll-behavior: smooth;
  2267.         }
  2268.         .message {
  2269.             direction: ltr;
  2270.             margin: 2px 0 0 5px;
  2271.             text-overflow: ellipsis;
  2272.             max-width: 100%;
  2273.             display: flex;
  2274.             justify-content: space-between;
  2275.         }
  2276.  
  2277.         .message_name {
  2278.             user-select: none;
  2279.         }
  2280.  
  2281.         .chatMessage-text {
  2282.             max-width: 310px;
  2283.         }
  2284.  
  2285.         .message .time {
  2286.             color: rgba(255, 255, 255, 0.7);
  2287.             font-size: 12px;
  2288.         }
  2289.  
  2290.         #chatInputContainer {
  2291.             display: flex;
  2292.             gap: 5px;
  2293.             align-items: center;
  2294.             padding: 5px;
  2295.             background: rgba(25,25,25, .6);
  2296.             border-radius: .5rem;
  2297.             overflow: hidden;
  2298.         }
  2299.  
  2300.         .chatInput {
  2301.             flex-grow: 1;
  2302.             border: none;
  2303.             background: transparent;
  2304.             color: #fff;
  2305.             padding: 5px;
  2306.             outline: none;
  2307.             max-width: 100%;
  2308.         }
  2309.  
  2310.         .chatButton {
  2311.             background: #8a25e5;
  2312.             border: none;
  2313.             border-radius: 5px;
  2314.             padding: 5px 10px;
  2315.             height: 100%;
  2316.             color: #fff;
  2317.             transition: all 0.3s;
  2318.             cursor: pointer;
  2319.             display: flex;
  2320.             align-items: center;
  2321.             height: 28px;
  2322.             justify-content: center;
  2323.             gap: 5px;
  2324.         }
  2325.         .chatButton:hover {
  2326.             background: #7a25e5;
  2327.         }
  2328.         .chatCloseBtn {
  2329.             position: absolute;
  2330.             top: 50%;
  2331.             left: 50%;
  2332.             transform: translate(-50%, -50%);
  2333.         }
  2334.  
  2335.         .emojisContainer {
  2336.             display: flex;
  2337.             flex-direction: column;
  2338.             gap: 5px;
  2339.         }
  2340.         .chatAddedContainer {
  2341.             position: absolute;
  2342.             bottom: 10px;
  2343.             left: 465px;
  2344.             z-index: 9999;
  2345.             padding: 10px;
  2346.             background: #151515;
  2347.             border-radius: .5rem;
  2348.             min-width: 172px;
  2349.             max-width: 172px;
  2350.             min-height: 250px;
  2351.             max-height: 250px;
  2352.         }
  2353.         #categories {
  2354.             overflow-y: auto;
  2355.             max-height: calc(250px - 50px);
  2356.             gap: 2px;
  2357.         }
  2358.         .category {
  2359.             width: 100%;
  2360.             display: flex;
  2361.             flex-direction: column;
  2362.             gap: 2px;
  2363.         }
  2364.         .category span {
  2365.             color: #fafafa;
  2366.             font-size: 14px;
  2367.             text-align: center;
  2368.         }
  2369.  
  2370.         .emojiContainer {
  2371.             display: flex;
  2372.             flex-wrap: wrap;
  2373.             align-items: center;
  2374.             justify-content: center;
  2375.         }
  2376.  
  2377.         #categories .emoji {
  2378.             padding: 2px;
  2379.             border-radius: 5px;
  2380.             font-size: 16px;
  2381.             user-select: none;
  2382.             cursor: pointer;
  2383.         }
  2384.  
  2385.         .chatSettingsContainer {
  2386.             padding: 10px 3px;
  2387.         }
  2388.         .chatSettingsContainer .scroll {
  2389.             display: flex;
  2390.             flex-direction: column;
  2391.             gap: 10px;
  2392.             max-height: 235px;
  2393.             overflow-y: auto;
  2394.             padding: 0 10px;
  2395.         }
  2396.  
  2397.         .csBlock {
  2398.             border: 2px solid #050505;
  2399.             border-radius: .5rem;
  2400.             color: #fff;
  2401.             display: flex;
  2402.             align-items: center;
  2403.             flex-direction: column;
  2404.             gap: 5px;
  2405.             padding-bottom: 5px;
  2406.         }
  2407.  
  2408.         .csBlock .csBlockTitle {
  2409.             background: #080808;
  2410.             width: 100%;
  2411.             padding: 3px;
  2412.             text-align: center;
  2413.         }
  2414.  
  2415.         .csRow {
  2416.             display: flex;
  2417.             justify-content: space-between;
  2418.             align-items: center;
  2419.             padding: 0 5px;
  2420.             width: 100%;
  2421.         }
  2422.  
  2423.         .csRowName {
  2424.             display: flex;
  2425.             gap: 5px;
  2426.             align-items: start;
  2427.         }
  2428.  
  2429.         .csRowName .infoIcon {
  2430.             width: 14px;
  2431.             cursor: pointer;
  2432.         }
  2433.  
  2434.         .modInfoPopup {
  2435.             position: absolute;
  2436.             top: 2px;
  2437.             left: 58%;
  2438.             text-align: center;
  2439.             background: #151515;
  2440.             border: 1px solid #607bff;
  2441.             border-radius: 10px;
  2442.             transform: translateX(-50%);
  2443.             white-space: nowrap;
  2444.             padding: 5px;
  2445.             z-index: 99999;
  2446.         }
  2447.  
  2448.         .modInfoPopup::after {
  2449.             content: '';
  2450.             display: block;
  2451.             position: absolute;
  2452.             bottom: -7px;
  2453.             background: #151515;
  2454.             right: 50%;
  2455.             transform: translateX(-50%) rotate(-45deg);
  2456.             width: 12px;
  2457.             height: 12px;
  2458.             border-left: 1px solid #607bff;
  2459.             border-bottom: 1px solid #607bff;
  2460.         }
  2461.  
  2462.         .modInfoPopup p {
  2463.             margin: 0;
  2464.             font-size: 12px;
  2465.             color: #fff;
  2466.         }
  2467.  
  2468.         .minimapContainer {
  2469.             display: flex;
  2470.             flex-direction: column;
  2471.             align-items: end;
  2472.             pointer-events: none;
  2473.             position: absolute;
  2474.             bottom: 0;
  2475.             right: 0;
  2476.             z-index: 99999;
  2477.         }
  2478.         .minimap {
  2479.             border-radius: 2px;
  2480.             border-top: 1px solid rgba(255, 255, 255, .5);
  2481.             border-left: 1px solid rgba(255, 255, 255, .5);
  2482.             box-shadow: 0 0 4px rgba(255, 255, 255, .5);
  2483.         }
  2484.  
  2485.         #tag {
  2486.             width: 50px;
  2487.         }
  2488.  
  2489.         .blur {
  2490.             color: transparent!important;
  2491.             text-shadow: 0 0 6px hsl(0deg 0% 90% / 70%);
  2492.             transition: all .2s;
  2493.         }
  2494.  
  2495.         .blur:focus, .blur:hover {
  2496.             color: #fafafa!important;
  2497.             text-shadow: none;
  2498.         }
  2499.         .progress-row button {
  2500.             background: transparent;
  2501.         }
  2502.  
  2503.         #mod_home .justify-sb {
  2504.             z-index: 2;
  2505.         }
  2506.  
  2507.         .modTitleText {
  2508.             font-size: 15px;
  2509.             color: #fafafa;
  2510.             text-align: start;
  2511.         }
  2512.         .modDescText {
  2513.             text-align: start;
  2514.             font-size: 12px;
  2515.             color: #777;
  2516.         }
  2517.         .modButton-secondary {
  2518.             background-color: #171717;
  2519.             color: #fff;
  2520.             border: none;
  2521.             padding: 5px 15px;
  2522.             border-radius: 15px;
  2523.         }
  2524.         .vr {
  2525.             width: 2px;
  2526.             height: 250px;
  2527.             background-color: #fafafa;
  2528.         }
  2529.         .vr2 {
  2530.             width: 1px;
  2531.             height: 26px;
  2532.             background-color: #202020;
  2533.         }
  2534.  
  2535. 		.home-card-row {
  2536. 			display: flex;
  2537. 			flex-wrap: nowrap;
  2538. 			justify-content: space-between;
  2539. 			gap: 18px;
  2540. 		}
  2541.         .home-card-wrapper {
  2542.             display: flex;
  2543. 			flex: 1;
  2544.             flex-direction: column;
  2545.             gap: 5px;
  2546. 			width: 50%;
  2547.         }
  2548.         .home-card {
  2549.             display: flex;
  2550.             flex-direction: column;
  2551. 			justify-content: center;
  2552.             gap: 7px;
  2553.             border-radius: 5px;
  2554.             background: #050505;
  2555.             min-height: 164px;
  2556. 			max-height: 164px;
  2557. 			max-width: 256px;
  2558.             padding: 5px 10px;
  2559.         }
  2560. 		.quickAccess {
  2561. 			gap: 5px;
  2562. 			max-height: 164px;
  2563.             overflow-y: auto;
  2564. 			justify-content: start;
  2565.         }
  2566.  
  2567.         .quickAccess div.modRowItems {
  2568.             padding: 2px!important;
  2569.         }
  2570.  
  2571. 		#my-profile-badges {
  2572. 			display: flex;
  2573. 			flex-wrap: wrap;
  2574. 			gap: 5px;
  2575. 		}
  2576.         #my-profile-bio {
  2577.             overflow-y: scroll;
  2578.             max-height: 75px;
  2579.         }
  2580.  
  2581.         .brand_wrapper {
  2582.             position: relative;
  2583.             height: 72px;
  2584.             width: 100%;
  2585.             display: flex;
  2586.             justify-content: center;
  2587.             align-items: center;
  2588.         }
  2589. 		.brand_wrapper span {
  2590. 			font-size: 24px;
  2591. 			z-index: 2;
  2592. 			font-family: "Titillium Web", sans-serif;
  2593. 			font-weight: 600;
  2594. 			letter-spacing: 3px;
  2595. 		}
  2596.  
  2597.         .brand_img {
  2598.             position: absolute;
  2599.             top: 0;
  2600.             left: 0;
  2601.             width: 100%;
  2602.             height: 72px;
  2603.             border-radius: 10px;
  2604.             object-fit: cover;
  2605.             object-position: center;
  2606.             z-index: 1;
  2607.             box-shadow: 0 0 10px #000;
  2608.         }
  2609. 		.brand_credits {
  2610. 			position: relative;
  2611. 			font-size: 16px;
  2612. 			color: #D3A7FF;
  2613. 			list-style: none;
  2614. 			width: 100%;
  2615. 			display: flex;
  2616. 			justify-content: space-between;
  2617. 			padding: 0 24px;
  2618. 		}
  2619.  
  2620. 		.brand_credits li {
  2621. 			position: relative;
  2622. 			display: inline-block;
  2623. 			text-shadow: 0px 0px 8px #D3A7FF;
  2624. 		}
  2625.  
  2626. 		.brand_credits li:not(:last-child)::after {
  2627. 			content: '•';
  2628. 			position: absolute;
  2629. 			right: -20px;
  2630. 			color: #D3A7FF;
  2631. 		}
  2632.         .brand_yt {
  2633.             display: flex;
  2634.             justify-content: center;
  2635.             align-items: center;
  2636.             gap: 20px;
  2637.         }
  2638.         .yt_wrapper {
  2639.             display: flex;
  2640.             justify-content: center;
  2641.             align-items: center;
  2642.             gap: 10px;
  2643.             width: 122px;
  2644.             padding: 5px;
  2645.             background-color: #B63333;
  2646.             border-radius: 15px;
  2647.             cursor: pointer;
  2648.         }
  2649.         .yt_wrapper span {
  2650.             user-select: none;
  2651.         }
  2652.  
  2653.         .hidden_full {
  2654.             display: none !important;
  2655.             visibility: hidden;
  2656.         }
  2657.  
  2658.         .mod_overlay {
  2659.             position: absolute;
  2660.             top: 0;
  2661.             left: 0;
  2662.             width: 100%;
  2663.             height: 100vh;
  2664.             background: rgba(0, 0, 0, .7);
  2665.             z-index: 9999999;
  2666.             display: flex;
  2667.             justify-content: center;
  2668.             align-items: center;
  2669.             transition: all .3s ease;
  2670.         }
  2671.  
  2672. 		.black_overlay {
  2673. 			background: rgba(0, 0, 0, 0);
  2674. 			z-index: 99999999;
  2675. 			opacity: 1;
  2676. 			animation: 2s ease fadeInBlack forwards;
  2677. 		}
  2678.  
  2679. 		@keyframes fadeInBlack {
  2680. 			0% {
  2681. 				background: rgba(0, 0, 0, 0);
  2682. 			}
  2683. 			100% {
  2684. 				background: rgba(0, 0, 0, 1);
  2685. 			}
  2686. 		}
  2687.  
  2688. 		.default-modal {
  2689.             position: relative;
  2690.             display: flex;
  2691.             flex-direction: column;
  2692. 			min-width: 300px;
  2693.             background: #111;
  2694. 			color: #fafafa;
  2695.             border-radius: 12px;
  2696.             overflow: hidden;
  2697.             box-shadow: 0 5px 10px #000;
  2698. 		}
  2699.  
  2700. 		.default-modal-header {
  2701. 			display: flex;
  2702. 			justify-content: space-between;
  2703. 			align-items: center;
  2704. 			background: #1c1c1c;
  2705. 			padding: 5px 10px;
  2706. 		}
  2707.  
  2708. 		.default-modal-header h2 {
  2709. 			margin: 0;
  2710. 		}
  2711.  
  2712. 		.default-modal-body {
  2713. 			display: flex;
  2714. 			flex-direction: column;
  2715. 			gap: 6px;
  2716. 			padding: 15px;
  2717. 		}
  2718.  
  2719.         .tournament-overlay-info {
  2720.             display: flex;
  2721.             flex-direction: column;
  2722.             align-items: center;
  2723.             color: white;
  2724.             font-size: 28px;
  2725.             line-height: 1.4;
  2726.         }
  2727.  
  2728.         .tournament-overlay-info img {
  2729.             margin-bottom: 26px;
  2730.         }
  2731.  
  2732.         .tournaments-wrapper {
  2733. 		    font-family: 'Titillium Web', sans-serif;
  2734. 			font-weight: 400;
  2735.             position: absolute;
  2736.             top: 60%;
  2737.             left: 50%;
  2738.             transform: translate(-50%, -50%);
  2739.             background: #000;
  2740.             border: 2px solid #222222;
  2741.             border-radius: 1.125rem;
  2742.             padding: 1.5rem;
  2743.             color: #fafafa;
  2744.             display: flex;
  2745.             flex-direction: column;
  2746.             align-items: center;
  2747.             gap: 10px;
  2748.             min-width: 632px;
  2749.             opacity: 0;
  2750.             transition: all .3s ease;
  2751.             animation: 0.5s ease fadeIn forwards;
  2752.         }
  2753.         @keyframes fadeIn {
  2754.             0% {
  2755.                 top: 60%;
  2756.                 opacity: 0;
  2757.             }
  2758.             100% {
  2759.                 top: 50%;
  2760.                 opacity: 1;
  2761.             }
  2762.         }
  2763.         .tournaments h1 {
  2764.             margin: 0;
  2765. 			font-weight: 600;
  2766.         }
  2767.  
  2768. 		.teamCards {
  2769. 			display: flex;
  2770. 			gap: 5px;
  2771. 			position: absolute;
  2772. 			top: 50%;
  2773. 			transform: translate(-50%, -50%);
  2774. 		}
  2775.         .teamCard {
  2776.             display: flex;
  2777.             flex-direction: column;
  2778.             align-items: center;
  2779. 			background: rgba(0, 0, 0, 0.4);
  2780. 			border-radius: 12px;
  2781. 			padding: 6px;
  2782. 			height: fit-content;
  2783.         }
  2784. 		.teamCard.userReady {
  2785. 			border: 2px solid var(--green);
  2786. 		}
  2787.         .teamCard img {
  2788.             border-radius: 50%;
  2789.         }
  2790. 		.teamCard span {
  2791. 			font-size: 12px;
  2792. 		}
  2793.  
  2794. 		.redTeam {
  2795. 			left: 81%;
  2796. 		}
  2797.  
  2798. 		.blueTeam {
  2799. 			left: 24%;
  2800. 		}
  2801.  
  2802. 		.lastOneStanding_list {
  2803. 			display: flex;
  2804. 			flex-wrap: wrap;
  2805. 			gap: 8px;
  2806. 			width: 100%;
  2807. 			height: 240px;
  2808. 			max-height: 240px;
  2809. 			background: #050505;
  2810. 		}
  2811.  
  2812.         .tournament_timer {
  2813. 			position: absolute;
  2814. 			top: 20px;
  2815. 			left: 50%;
  2816. 			transform: translateX(-50%);
  2817.             color: #fff;
  2818.             font-size: 15px;
  2819. 			z-index: 99999;
  2820. 			user-select: none;
  2821. 			pointer-events: none;
  2822.         }
  2823.  
  2824.         details {
  2825.           border: 1px solid #aaa;
  2826.           border-radius: 4px;
  2827.           padding: 0.5em 0.5em 0;
  2828.           user-select: none;
  2829.           text-align: start;
  2830.         }
  2831.  
  2832.         summary {
  2833.           font-weight: bold;
  2834.           margin: -0.5em -0.5em 0;
  2835.           padding: 0.5em;
  2836.         }
  2837.  
  2838.         details[open] {
  2839.           padding: 0.5em;
  2840.         }
  2841.  
  2842.         details[open] summary {
  2843.           border-bottom: 1px solid #aaa;
  2844.           margin-bottom: 0.5em;
  2845.         }
  2846.         button[disabled] {
  2847.             filter: grayscale(1);
  2848.         }
  2849.  
  2850. 		.tournament-text-lost,
  2851. 		.tournament-text-won {
  2852. 			font-size: 6rem;
  2853. 			font-weight: 600;
  2854. 			font-family: 'Titillium Web', sans-serif;
  2855. 		}
  2856.  
  2857. 		.tournament-text-lost {
  2858. 			color: var(--red);
  2859. 		}
  2860. 		.tournament-text-won {
  2861. 			color: var(--green);
  2862. 		}
  2863.  
  2864.         .tournament_alert {
  2865.             position: absolute;
  2866.             top: 20px;
  2867.             left: 50%;
  2868.             transform: translateX(-50%);
  2869.             background: #151515;
  2870.             color: #fff;
  2871.             text-align: center;
  2872.             padding: 20px;
  2873.             z-index: 999999;
  2874.             border-radius: 10px;
  2875.             box-shadow: 0 0 10px #000;
  2876.             display: flex;
  2877.             gap: 10px;
  2878.         }
  2879.         .tournament-profile {
  2880.             width: 50px;
  2881.             height: 50px;
  2882.             border-radius: 50%;
  2883.             box-shadow: 0 0 10px #000;
  2884.         }
  2885.  
  2886.         .tournament-text {
  2887.             color: #fff;
  2888.             font-size: 24px;
  2889.         }
  2890.  
  2891.         .claimedBadgeWrapper {
  2892.             background: linear-gradient(232deg, #020405 1%, #04181E 100%);
  2893.             border-radius: 10px;
  2894.             width: 320px;
  2895.             height: 330px;
  2896.             box-shadow: 0 0 40px -20px #39bdff;
  2897.             display: flex;
  2898.             flex-direction: column;
  2899.             gap: 10px;
  2900.             align-items: center;
  2901.             justify-content: center;
  2902.             color: #fff;
  2903.             padding: 10px;
  2904.         }
  2905.  
  2906.         .btn-cyan {
  2907.             background: #53B6CC;
  2908.             border: none;
  2909.             border-radius: 5px;
  2910.             font-size: 16px;
  2911.             color: #fff;
  2912.             font-weight: 500;
  2913.             width: fit-content;
  2914.             padding: 5px 10px;
  2915.         }
  2916.  
  2917.         .playTimer {
  2918.             z-index: 2;
  2919.             position: absolute;
  2920.             top: 128px;
  2921.             left: 4px;
  2922.             color: #8d8d8d;
  2923.             font-size: 14px;
  2924.             font-weight: 500;
  2925.             user-select: none;
  2926.             pointer-events: none;
  2927.         }
  2928.  
  2929.         .mouseTracker {
  2930.             z-index: 2;
  2931.             position: absolute;
  2932.             top: 144px;
  2933.             left: 4px;
  2934.             color: #8d8d8d;
  2935.             font-size: 14px;
  2936.             font-weight: 500;
  2937.             user-select: none;
  2938.             pointer-events: none;
  2939.         }
  2940.  
  2941.         .modInput-wrapper {
  2942.           position: relative;
  2943.           display: inline-block;
  2944.           width: 100%;
  2945.         }
  2946.  
  2947.         .modInput-secondary {
  2948.           display: inline-block;
  2949.           width: 100%;
  2950.           padding: 10px 0 10px 15px;
  2951.           font-weight: 400;
  2952.           color: #E9E9E9;
  2953.           background: #050505;
  2954.           border: 0;
  2955.           border-radius: 3px;
  2956.           outline: 0;
  2957.           text-indent: 70px;
  2958.           transition: all .3s ease-in-out;
  2959.         }
  2960.         .modInput-secondary.t-indent-120 {
  2961.             text-indent: 120px;
  2962.         }
  2963.         .modInput-secondary::-webkit-input-placeholder {
  2964.           color: #050505;
  2965.           text-indent: 0;
  2966.           font-weight: 300;
  2967.         }
  2968.         .modInput-secondary + label {
  2969.           display: inline-block;
  2970.           position: absolute;
  2971.           top: 8px;
  2972.           left: 0;
  2973.           bottom: 8px;
  2974.           padding: 5px 15px;
  2975.           color: #E9E9E9;
  2976.           font-size: 11px;
  2977.           font-weight: 700;
  2978.           text-transform: uppercase;
  2979.           text-shadow: 0 1px 0 rgba(19, 74, 70, 0);
  2980.           transition: all .3s ease-in-out;
  2981.           border-radius: 3px;
  2982.           background: rgba(122, 134, 184, 0);
  2983.         }
  2984.         .modInput-secondary + label:after {
  2985.           position: absolute;
  2986.           content: "";
  2987.           width: 0;
  2988.           height: 0;
  2989.           top: 100%;
  2990.           left: 50%;
  2991.           margin-left: -3px;
  2992.           border-left: 3px solid transparent;
  2993.           border-right: 3px solid transparent;
  2994.           border-top: 3px solid rgba(122, 134, 184, 0);
  2995.           transition: all .3s ease-in-out;
  2996.         }
  2997.  
  2998.         .modInput-secondary:focus,
  2999.         .modInput-secondary:active {
  3000.           color: #E9E9E9;
  3001.           text-indent: 0;
  3002.           background: #050505;
  3003.         }
  3004.         .modInput-secondary:focus::-webkit-input-placeholder,
  3005.         .modInput-secondary:active::-webkit-input-placeholder {
  3006.           color: #aaa;
  3007.         }
  3008.         .modInput-secondary:focus + label,
  3009.         .modInput-secondary:active + label {
  3010.           color: #fff;
  3011.           text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  3012.           background: #7A86B8;
  3013.           transform: translateY(-40px);
  3014.         }
  3015.         .modInput-secondary:focus + label:after,
  3016.         .modInput-secondary:active + label:after {
  3017.           border-top: 4px solid #7A86B8;
  3018.         }
  3019.  
  3020.         /* Friends & account */
  3021.  
  3022.         .signIn-overlay {
  3023.             position: absolute;
  3024.             top: 0;
  3025.             left: 0;
  3026.             width: 100%;
  3027.             height: 100vh;
  3028.             background: rgba(0, 0, 0, .4);
  3029.             z-index: 999999;
  3030.             display: flex;
  3031.             justify-content: center;
  3032.             align-items: center;
  3033.             color: #E3E3E3;
  3034.             opacity: 0;
  3035.             transition: all .3s ease;
  3036.         }
  3037.  
  3038.         .signIn-wrapper {
  3039.             background: #111111;
  3040.             width: 450px;
  3041.             display: flex;
  3042.             flex-direction: column;
  3043.             align-items: center;
  3044.             border-radius: 10px;
  3045.             color: #fafafa;
  3046.         }
  3047.  
  3048.         .signIn-header {
  3049.             background: #181818;
  3050.             width: 100%;
  3051.             display: flex;
  3052.             justify-content: space-between;
  3053.             align-items: center;
  3054.             padding: 8px;
  3055.             border-radius: 10px 10px 0 0;
  3056.         }
  3057.         .signIn-header span {
  3058.             font-weight: 500;
  3059.             font-size: 20px;
  3060.         }
  3061.  
  3062.         .signIn-body {
  3063.             display: flex;
  3064.             flex-direction: column;
  3065.             gap: 10px;
  3066.             align-items: center;
  3067.             justify-content: start;
  3068.             padding: 40px 40px 5px 40px;
  3069.             width: 100%;
  3070.         }
  3071.  
  3072.         #errMessages {
  3073.             color: #AC3D3D;
  3074.             flex-direction: column;
  3075.             gap: 5px;
  3076.         }
  3077.  
  3078.         .friends_header {
  3079.             display: flex;
  3080.             flex-direction: row;
  3081.             justify-content: space-between;
  3082.             align-items: center;
  3083.             gap: 10px;
  3084.             width: 100%;
  3085.             padding: 10px;
  3086.         }
  3087.  
  3088.         .friends_body {
  3089.             position: relative;
  3090.             display: flex;
  3091.             flex-direction: column;
  3092.             align-items: center;
  3093.             gap: 6px;
  3094.             width: 100%;
  3095.             height: 360px;
  3096.             max-height: 360px;
  3097.             overflow-y: auto;
  3098.             padding-right: 10px;
  3099.         }
  3100.         .allusers {
  3101.             padding: 0;
  3102.         }
  3103.  
  3104.         #users-container {
  3105.             position: relative;
  3106.             display: flex;
  3107.             flex-direction: column;
  3108.             align-items: center;
  3109.             gap: 6px;
  3110.             width: 100%;
  3111.             height: 340px;
  3112.             max-height: 340px;
  3113.             overflow-y: auto;
  3114.             padding-right: 10px;
  3115.         }
  3116.  
  3117.         .profile-img {
  3118.             position: relative;
  3119.             width: 52px;
  3120.             height: 52px;
  3121.             border-radius: 100%;
  3122.             border: 1px solid #C8C9D9;
  3123.         }
  3124.  
  3125.         .profile-img img {
  3126.             width: 100%;
  3127.             height: 100%;
  3128.             border-radius: 100%;
  3129.         }
  3130.  
  3131.         .status_icon {
  3132.             position: absolute;
  3133.             width: 15px;
  3134.             height: 15px;
  3135.             top: 0;
  3136.             left: 0;
  3137.             border-radius: 50%;
  3138.         }
  3139.  
  3140.         .online_icon {
  3141.             background-color: #3DB239;
  3142.         }
  3143.         .offline_icon {
  3144.             background-color: #B23939;
  3145.         }
  3146.         .Owner_role {
  3147.             color: #3979B2;
  3148.         }
  3149.         .Moderator_role {
  3150.             color: #39B298;
  3151.         }
  3152.         .Vip_role {
  3153.             color: #E1A33E;
  3154.         }
  3155.  
  3156.         .friends_row {
  3157.             display: flex;
  3158.             flex-direction: row;
  3159.             width: 100%;
  3160.             justify-content: space-between;
  3161.             align-items: center;
  3162.             background: #090909;
  3163.             border-radius: 8px;
  3164.             padding: 10px;
  3165.         }
  3166.  
  3167.         .friends_row .val {
  3168.             width: fit-content;
  3169.             height: fit-content;
  3170.             padding: 5px 20px;
  3171.             box-sizing: content-box;
  3172.         }
  3173.  
  3174.         .user-profile-wrapper {
  3175.             cursor: pointer;
  3176.         }
  3177.         .user-profile-wrapper > .centerY.g-5 {
  3178.             pointer-events: none;
  3179.             user-select: none;
  3180.             cursor: pointer;
  3181.         }
  3182.  
  3183.         .textarea-container {
  3184.             position: relative;
  3185.             width: 100%;
  3186.         }
  3187.         .textarea-container textarea {
  3188.             width: 100%;
  3189.             height: 120px;
  3190.             resize: none;
  3191.         }
  3192.         .char-counter {
  3193.             position: absolute;
  3194.             bottom: 5px;
  3195.             right: 5px;
  3196.             color: gray;
  3197.         }
  3198.  
  3199.         .mod_badges {
  3200.             display: flex;
  3201.             flex-wrap: wrap;
  3202.             gap: 5px;
  3203.         }
  3204.  
  3205.         .mod_badge {
  3206.             width: fit-content;
  3207.             background: #222;
  3208.             color: #fafafa;
  3209.             padding: 2px 7px;
  3210.             border-radius: 9px;
  3211.         }
  3212.  
  3213.         .friends-chat-wrapper {
  3214.             position: absolute;
  3215.             top: 0;
  3216.             left: 0;
  3217.             width: 100%;
  3218.             height: 100%;
  3219.             background: #111111;
  3220.             display: flex;
  3221.             flex-direction: column;
  3222.             z-index: 999;
  3223.             opacity: 0;
  3224.             transition: all .3s ease;
  3225.         }
  3226.  
  3227.         .friends-chat-header {
  3228.             display: flex;
  3229.             justify-content: space-between;
  3230.             align-items: center;
  3231.             background: #050505;
  3232.             width: 100%;
  3233.             padding: 8px;
  3234.             height: 68px;
  3235.         }
  3236.  
  3237.         .friends-chat-body {
  3238.             height: calc(100% - 68px);
  3239.             display: flex;
  3240.             flex-direction: column;
  3241.         }
  3242.  
  3243.         .friends-chat-messages {
  3244.             height: 300px;
  3245.             overflow-y: auto;
  3246.             display: flex;
  3247.             flex-direction: column;
  3248.             gap: 5px;
  3249.             padding: 10px;
  3250.         }
  3251.         .friends-message {
  3252.             background: linear-gradient(180deg, rgb(12 12 12), #000);
  3253.             padding: 8px;
  3254.             border-radius: 12px;
  3255.             display: flex;
  3256.             flex-direction: column;
  3257. 			min-width: 80px;
  3258.             max-width: 200px;
  3259.             width: fit-content;
  3260.         }
  3261.  
  3262.         .message-date {
  3263.             color: #8a8989;
  3264.             font-size: 11px;
  3265.         }
  3266.  
  3267.         .message-right {
  3268.             align-self: flex-end;
  3269.         }
  3270.  
  3271.         .messenger-wrapper {
  3272.             width: 100%;
  3273.             height: 60px;
  3274.             padding: 10px;
  3275.         }
  3276.         .messenger-wrapper .container {
  3277.             display: flex;
  3278.             flex-direction: row;
  3279.             gap: 10px;
  3280.             width: 100%;
  3281.             background: #0a0a0a;
  3282.             padding: 10px 5px;
  3283.             border-radius: 10px;
  3284.         }
  3285.  
  3286.         .messenger-wrapper .container input {
  3287.             padding: 5px;
  3288.         }
  3289.         .messenger-wrapper .container button {
  3290.             width: 150px;
  3291.         }
  3292.  
  3293.         /* deathscreen challenges */
  3294.  
  3295.         #menu-wrapper {
  3296.             overflow-x: visible;
  3297.             overflow-y: visible;
  3298.         }
  3299.  
  3300.         .challenges_deathscreen {
  3301.             width: 450px;
  3302.             background: rgb(21, 21, 21);
  3303.             display: flex;
  3304.             flex-direction: column;
  3305.             gap: 8px;
  3306.             padding: 7px;
  3307.             border-radius: 10px;
  3308.             margin-bottom: 15px;
  3309.         }
  3310.  
  3311.         .challenges-col {
  3312.             display: flex;
  3313.             flex-direction: column;
  3314.             gap: 4px;
  3315.             align-items: center;
  3316.             width: 100%;
  3317.         }
  3318.         .challenge-row {
  3319.             display: flex;
  3320.             align-items: center;
  3321.             background: rgba(0, 0, 0, .4);
  3322.             justify-content: space-between;
  3323.             padding: 5px 10px;
  3324.             border-radius: 4px;
  3325.             width: 100%;
  3326.         }
  3327.  
  3328.         .challenges-title {
  3329.             font-size: 16px;
  3330.             font-weight: 600;
  3331.         }
  3332.  
  3333.         .challenge-best-secondary {
  3334.             background: #1d1d1d;
  3335.             border-radius: 10px;
  3336.             text-align: center;
  3337.             padding: 5px 8px;
  3338.             min-width: 130px;
  3339.         }
  3340.         .challenge-collect-secondary {
  3341.             background: #4C864B;
  3342.             border-radius: 10px;
  3343.             text-align: center;
  3344.             padding: 5px 8px;
  3345.             outline: none;
  3346.             border: none;
  3347.             min-width: 130px;
  3348.         }
  3349.  
  3350.         .alwan__reference {
  3351.             border-width: 2px !important;
  3352.         }
  3353.  
  3354. 		#mod-announcements {
  3355. 			display: flex;
  3356. 			flex-direction: column;
  3357. 			gap: 6px;
  3358. 			max-height: 144px;
  3359. 			overflow-y: auto;
  3360. 		}
  3361.  
  3362. 		.mod-announcement {
  3363. 			background: #111111;
  3364. 			border-radius: 4px;
  3365. 			display: flex;
  3366. 			gap: 3px;
  3367. 			width: 100%;
  3368. 			cursor: pointer;
  3369. 			padding: 5px 8px;
  3370. 		}
  3371.  
  3372. 		.mod-announcement-icon {
  3373. 			border-radius: 50%;
  3374. 			width: 35px;
  3375. 			height: 35px;
  3376. 			align-self: center;
  3377. 		}
  3378.  
  3379. 		.mod-announcement-text {
  3380. 			display: flex;
  3381. 			flex-direction: column;
  3382. 			gap: 3px;
  3383. 			overflow: hidden;
  3384. 			flex-grow: 1;
  3385. 		}
  3386.  
  3387. 		.mod-announcement-text > * {
  3388. 			overflow: hidden;
  3389. 			white-space: nowrap;
  3390. 			text-overflow: ellipsis;
  3391. 		}
  3392.  
  3393. 		.mod-announcement-text span {
  3394. 			font-size: 14px;
  3395. 			color: #ffffff;
  3396. 			flex-shrink: 0;
  3397. 		}
  3398.  
  3399. 		.mod-announcement-text p {
  3400. 			font-size: 10px;
  3401. 			color: #898989;
  3402. 			flex-shrink: 0;
  3403. 			margin: 0;
  3404. 		}
  3405.  
  3406. 		.mod-announcements-wrapper {
  3407. 			display: flex;
  3408. 			flex-direction: column;
  3409. 			gap: 10px;
  3410. 		}
  3411.  
  3412. 		.mod-announcement-content {
  3413. 			display: flex;
  3414. 			justify-content: space-between;
  3415. 			gap: 10px;
  3416. 			background-color: #050505;
  3417. 			padding: 10px;
  3418. 			border-radius: 10px;
  3419. 			background-image: url('https://czrsd.com/static/general/bg_blur.png');
  3420. 			background-repeat: no-repeat;
  3421. 			background-position: 300px 40%;
  3422. 			background-size: cover;
  3423. 		}
  3424.  
  3425. 		.mod-announcement-content p {
  3426. 			text-align: justify;
  3427. 			max-height: 330px;
  3428. 			overflow-y: auto;
  3429. 			padding-right: 10px;
  3430. 		}
  3431.  
  3432. 		.mod-announcement-images {
  3433. 			display: flex;
  3434. 			flex-direction: column;
  3435. 			gap: 20px;
  3436. 			min-width: 30%;
  3437. 			width: 30%;
  3438. 			max-height: 330px;
  3439. 			padding-right: 10px;
  3440. 			overflow-y: auto;
  3441. 		}
  3442.  
  3443. 		.mod-announcement-images img {
  3444. 			border-radius: 5px;
  3445. 			cursor: pointer;
  3446. 		}
  3447.  
  3448. 		#image-gallery {
  3449. 			display: flex;
  3450. 			flex-wrap: wrap;
  3451. 			gap: 5px;
  3452. 		}
  3453.  
  3454. 		.image-container {
  3455. 			display: flex;
  3456. 			flex-direction: column;
  3457. 		}
  3458.  
  3459. 		.image-container img {
  3460. 			width: 172px;
  3461. 			height: auto;
  3462. 			aspect-ratio: 16 / 9;
  3463. 			border-radius: 5px;
  3464. 			cursor: pointer;
  3465. 		}
  3466.  
  3467. 		.download_btn {
  3468. 			background: url('https://czrsd.com/static/sigmod/icons/download.svg');
  3469.  
  3470. 		}
  3471.  
  3472. 		.delete_btn {
  3473. 			background: url('https://czrsd.com/static/sigmod/icons/trash-bin.svg');
  3474. 		}
  3475.  
  3476. 		.operation_btn {
  3477. 			background-size: contain;
  3478. 			background-repeat: no-repeat;
  3479. 			border: none;
  3480. 			width: 22px;
  3481. 			height: 22px;
  3482. 		}
  3483.  
  3484. 		.sigmod-community {
  3485. 			display: flex;
  3486. 			flex-direction: column;
  3487. 			margin: auto;
  3488. 			border-radius: 10px;
  3489. 			width: 50%;
  3490. 			align-self: center;
  3491. 			font-size: 19px;
  3492. 			overflow: hidden;
  3493. 		}
  3494.  
  3495. 		.community-header {
  3496. 			background: linear-gradient(179deg, #000000, #0c0c0c);
  3497. 			text-align: center;
  3498. 			font-family: "Titillium Web", sans-serif;
  3499. 			padding: 6px;
  3500. 		}
  3501.  
  3502. 		.community-discord-logo {
  3503. 			background: rgb(88, 101, 242);
  3504. 			padding: 5px 12px;
  3505. 		}
  3506. 		.community-discord {
  3507. 			text-align: center;
  3508. 			padding: 10px;
  3509. 			background: #0c0c0c;
  3510. 			width: 100%;
  3511. 		}
  3512. 		.community-discord a {
  3513. 			font-family: "Titillium Web", sans-serif;
  3514. 		}
  3515.  
  3516. 		/* common */
  3517.         .flex {
  3518.              display: flex;
  3519.         }
  3520.         .centerX {
  3521.              display: flex;
  3522.              justify-content: center;
  3523.         }
  3524.         .centerY {
  3525.              display: flex;
  3526.              align-items: center;
  3527.         }
  3528.         .centerXY {
  3529.              display: flex;
  3530.              align-items: center;
  3531.              justify-content: center
  3532.         }
  3533.         .f-column {
  3534.              display: flex;
  3535.              flex-direction: column;
  3536.         }
  3537. 		mx-5 {
  3538. 			margin: 0 5px;
  3539. 		}
  3540.         .my-5 {
  3541.             margin: 5px 0;
  3542.         }
  3543. 		.mt-auto {
  3544. 			margin-top: auto !important;
  3545. 		}
  3546.         .g-2 {
  3547.             gap: 2px;
  3548.         }
  3549.         .g-5 {
  3550.             gap: 5px;
  3551.         }
  3552.         .g-10 {
  3553.             gap: 10px;
  3554.         }
  3555.         .p-2 {
  3556.             padding: 2px;
  3557.         }
  3558.         .p-5 {
  3559.             padding: 5px;
  3560.         }
  3561.         .p-10 {
  3562.             padding: 10px;
  3563.         }
  3564.         .rounded {
  3565.             border-radius: 6px;
  3566.         }
  3567.         .text-center {
  3568.             text-align: center;
  3569.         }
  3570.         .f-big {
  3571.             font-size: 18px;
  3572.         }
  3573.         .hidden {
  3574.              display: none;
  3575.         }
  3576.             `;
  3577.         },
  3578.         respawnTime: Date.now(),
  3579.         respawnCooldown: 1000,
  3580.         get friends_settings() {
  3581.             return this._friends_settings;
  3582.         },
  3583.         set friends_settings(value) {
  3584.             this._friends_settings = value;
  3585.             window.sigmod.friends_settings = value;
  3586.         },
  3587.         get friend_names() {
  3588.             return this._friend_names;
  3589.         },
  3590.  
  3591.         set friend_names(value) {
  3592.             this._friend_names = value;
  3593.             window.sigmod.friend_names = value;
  3594.         },
  3595.  
  3596.         async game() {
  3597.             const { fillRect, fillText, strokeText, arc, drawImage } =
  3598.                   CanvasRenderingContext2D.prototype;
  3599.  
  3600.             const showPosition = byId('showPosition');
  3601.             if (showPosition && !showPosition.checked) showPosition.click();
  3602.  
  3603.             const loadStorage = () => {
  3604.                 if (modSettings.virusImage) {
  3605.                     loadVirusImage(modSettings.virusImage);
  3606.                 }
  3607.  
  3608.                 if (modSettings.game.skins.original !== null) {
  3609.                     loadSkinImage(
  3610.                         modSettings.game.skins.original,
  3611.                         modSettings.game.skins.replacement
  3612.                     );
  3613.                 }
  3614.             };
  3615.  
  3616.             loadStorage();
  3617.  
  3618.             let cachedPattern = null;
  3619.             let patternCanvas = null;
  3620.             let isUpdatingPattern = false;
  3621.  
  3622.             function updatePattern(ctx) {
  3623.                 isUpdatingPattern = true;
  3624.                 loadPattern(ctx)
  3625.                     .then((pattern) => {
  3626.                     if (mods.mapImageLoaded) {
  3627.                         cachedPattern = pattern;
  3628.                         ctx.fillStyle = cachedPattern;
  3629.                         ctx.fillRect(
  3630.                             0,
  3631.                             0,
  3632.                             ctx.canvas.width,
  3633.                             ctx.canvas.height
  3634.                         );
  3635.                     } else {
  3636.                         clearPattern(ctx);
  3637.                     }
  3638.                     isUpdatingPattern = false;
  3639.                 })
  3640.                     .catch((e) => {
  3641.                     console.error('Error loading map image:', e);
  3642.                     clearPattern(ctx);
  3643.                     isUpdatingPattern = false;
  3644.                 });
  3645.             }
  3646.  
  3647.             function loadPattern(ctx) {
  3648.                 return new Promise((resolve, reject) => {
  3649.                     const img = new Image();
  3650.                     img.src = modSettings.game.map.image;
  3651.                     img.crossOrigin = 'Anonymous';
  3652.  
  3653.                     img.onload = () => {
  3654.                         if (!patternCanvas) {
  3655.                             patternCanvas = document.createElement('canvas');
  3656.                         }
  3657.                         patternCanvas.width = img.width;
  3658.                         patternCanvas.height = img.height;
  3659.                         const patternCtx = patternCanvas.getContext('2d');
  3660.                         patternCtx.drawImage(img, 0, 0);
  3661.  
  3662.                         const imageData = patternCtx.getImageData(
  3663.                             0,
  3664.                             0,
  3665.                             patternCanvas.width,
  3666.                             patternCanvas.height
  3667.                         );
  3668.                         const data = imageData.data;
  3669.                         mods.mapImageLoaded = !Array.from(data).some(
  3670.                             (_, i) => i % 4 === 3 && data[i] < 255
  3671.                         );
  3672.  
  3673.                         if (mods.mapImageLoaded) {
  3674.                             resolve(
  3675.                                 ctx.createPattern(patternCanvas, 'no-repeat')
  3676.                             );
  3677.                         } else {
  3678.                             resolve(null);
  3679.                         }
  3680.                     };
  3681.  
  3682.                     img.onerror = () =>
  3683.                     reject(new Error('Failed to load image.'));
  3684.                 });
  3685.             }
  3686.  
  3687.             function clearPattern(ctx) {
  3688.                 isUpdatingPattern = true;
  3689.                 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  3690.                 ctx.fillStyle = modSettings.game.map.color || '#111111';
  3691.                 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  3692.                 isUpdatingPattern = false;
  3693.             }
  3694.  
  3695.             window.addEventListener('resize', () => {
  3696.                 const canvas = document.getElementById('canvas');
  3697.                 if (canvas && modSettings.game.map.image) {
  3698.                     updatePattern(canvas.getContext('2d'));
  3699.                 }
  3700.             });
  3701.  
  3702.             /* CanvasRenderingContext2D.prototype */
  3703.  
  3704.             CanvasRenderingContext2D.prototype.fillRect = function (
  3705.             x,
  3706.              y,
  3707.              width,
  3708.              height
  3709.             ) {
  3710.                 if (this.canvas.id !== 'canvas')
  3711.                     return fillRect.apply(this, arguments);
  3712.  
  3713.                 const isCanvasSize =
  3714.                       (width + height) / 2 ===
  3715.                       (window.innerWidth + window.innerHeight) / 2;
  3716.  
  3717.                 if (isCanvasSize) {
  3718.                     if (modSettings.game.map.image && !mods.mapImageLoaded) {
  3719.                         mods.mapImageLoaded = true;
  3720.                         updatePattern(this);
  3721.                     } else if (
  3722.                         !modSettings.game.map.image ||
  3723.                         !mods.mapImageLoaded
  3724.                     ) {
  3725.                         if (!isUpdatingPattern) {
  3726.                             clearPattern(this);
  3727.                         }
  3728.                     } else {
  3729.                         this.fillStyle =
  3730.                             cachedPattern ||
  3731.                             modSettings.game.map.color ||
  3732.                             '#111111';
  3733.                     }
  3734.                 }
  3735.  
  3736.                 fillRect.apply(this, arguments);
  3737.             };
  3738.  
  3739.             CanvasRenderingContext2D.prototype.arc = function (
  3740.             x,
  3741.              y,
  3742.              radius,
  3743.              startAngle,
  3744.              endAngle,
  3745.              anticlockwise
  3746.             ) {
  3747.                 if (this.canvas.id !== 'canvas') return arc.apply(this, arguments);
  3748.  
  3749.                 if (radius >= 86 && modSettings.game.cellColor) {
  3750.                     this.fillStyle = modSettings.game.cellColor;
  3751.                 } else if (
  3752.                     radius <= 20 &&
  3753.                     modSettings.game.foodColor !== null
  3754.                 ) {
  3755.                     this.fillStyle = modSettings.game.foodColor;
  3756.                     this.strokeStyle = modSettings.game.foodColor;
  3757.                 }
  3758.  
  3759.                 arc.apply(this, arguments);
  3760.             };
  3761.  
  3762.             CanvasRenderingContext2D.prototype.fillText = function (
  3763.             text,
  3764.              x,
  3765.              y
  3766.             ) {
  3767.                 if (this.canvas.id !== 'canvas') return fillText.apply(this, arguments);
  3768.  
  3769.                 const currentFontSizeMatch = this.font.match(/^(\d+)px/);
  3770.                 const fontSize = currentFontSizeMatch
  3771.                 ? currentFontSizeMatch[0]
  3772.                 : '';
  3773.  
  3774.                 this.font = `${fontSize} ${modSettings.game.font || 'Ubuntu'}`;
  3775.  
  3776.                 if (
  3777.                     text === mods.nick &&
  3778.                     !modSettings.game.name.gradient.enabled &&
  3779.                     modSettings.game.name.color !== null
  3780.                 ) {
  3781.                     this.fillStyle = modSettings.game.name.color;
  3782.                 }
  3783.  
  3784.                 if (
  3785.                     text === mods.nick &&
  3786.                     modSettings.game.name.gradient.enabled
  3787.                 ) {
  3788.                     const width = this.measureText(text).width;
  3789.                     const fontSize = 8;
  3790.                     const gradient = this.createLinearGradient(
  3791.                         x - width / 2 + fontSize / 2,
  3792.                         y,
  3793.                         x + width / 2 - fontSize / 2,
  3794.                         y + fontSize
  3795.                     );
  3796.  
  3797.                     const color1 =
  3798.                           modSettings.game.name.gradient.left ?? '#ffffff';
  3799.                     const color2 =
  3800.                           modSettings.game.name.gradient.right ?? '#ffffff';
  3801.  
  3802.                     gradient.addColorStop(0, color1);
  3803.                     gradient.addColorStop(1, color2);
  3804.  
  3805.                     this.fillStyle = gradient;
  3806.                 }
  3807.  
  3808.                 if (!window.sigifx && text.startsWith('Score')) {
  3809.                     if (Date.now() - lastGetScore >= 250) {
  3810.                         const score = parseInt(text.split(': ')[1]);
  3811.  
  3812.                         mods.cellSize = score;
  3813.  
  3814.                         mods.aboveRespawnLimit = score >= 5500;
  3815.  
  3816.                         lastGetScore = Date.now();
  3817.                     }
  3818.                 }
  3819.  
  3820.                 if (!window.sigfix && text.startsWith('X:')) {
  3821.                     this.fillStyle = 'transparent';
  3822.  
  3823.                     const [, xValue, yValue] =
  3824.                           /X: (.*), Y: (.*)/.exec(text) || [];
  3825.                     if (!xValue) return;
  3826.  
  3827.                     const position = {
  3828.                         x: parseFloat(xValue),
  3829.                         y: parseFloat(yValue),
  3830.                     };
  3831.  
  3832.                     if (menuClosed() && !isDead()) {
  3833.                         if (position.x === 0 && position.y === 0) return;
  3834.  
  3835.                         playerPosition.x = position.x;
  3836.                         playerPosition.y = position.y;
  3837.  
  3838.                         // send position every 300 milliseconds
  3839.                         if (Date.now() - lastPosTime >= 300) {
  3840.                             if (modSettings.settings.tag && client?.ws?.readyState === 1) {
  3841.                                 client.send({
  3842.                                     type: 'position',
  3843.                                     content: {
  3844.                                         x: playerPosition.x,
  3845.                                         y: playerPosition.y,
  3846.                                     },
  3847.                                 });
  3848.                             }
  3849.                             lastPosTime = Date.now();
  3850.                         }
  3851.                     } else if (isDead() && !dead2) {
  3852.                         dead2 = true;
  3853.                         playerPosition.x = null;
  3854.                         playerPosition.y = null;
  3855.                         if (modSettings.settings.tag && client?.ws?.readyState === 1) {
  3856.                             client.send({
  3857.                                 type: 'position',
  3858.                                 content: { x: null, y: null },
  3859.                             });
  3860.                         }
  3861.                     }
  3862.                 }
  3863.  
  3864.                 if (modSettings.game.removeOutlines) {
  3865.                     this.shadowBlur = 0;
  3866.                     this.shadowColor = 'transparent';
  3867.                 }
  3868.  
  3869.                 if (text.length > 18 && modSettings.game.shortenNames) {
  3870.                     arguments[0] = text.slice(0, 18) + '...';
  3871.                 }
  3872.  
  3873.                 // only for leaderboard
  3874.                 const name = text.match(/\d+\.\s*(.+)/)?.[1];
  3875.  
  3876.                 if (
  3877.                     name &&
  3878.                     mods.friend_names.has(name) &&
  3879.                     mods.friends_settings.highlight_friends
  3880.                 ) {
  3881.                     this.fillStyle = mods.friends_settings.highlight_color;
  3882.                 }
  3883.  
  3884.                 fillText.apply(this, arguments);
  3885.             };
  3886.  
  3887.             CanvasRenderingContext2D.prototype.strokeText = function (
  3888.             text,
  3889.              x,
  3890.              y
  3891.             ) {
  3892.                 if (this.canvas.id !== 'canvas') return strokeText.apply(this, arguments);
  3893.  
  3894.                 const currentFontSizeMatch = this.font.match(/^(\d+)px/);
  3895.                 const fontSize = currentFontSizeMatch
  3896.                 ? currentFontSizeMatch[0]
  3897.                 : '';
  3898.  
  3899.                 this.font = `${fontSize} ${modSettings.game.font || 'Ubuntu'}`;
  3900.  
  3901.                 if (text.length > 18 && modSettings.game.shortenNames) {
  3902.                     arguments[0] = text.slice(0, 18) + '...';
  3903.                 }
  3904.  
  3905.                 if (modSettings.game.removeOutlines) {
  3906.                     this.shadowBlur = 0;
  3907.                     this.shadowColor = 'transparent';
  3908.                 } else {
  3909.                     this.shadowBlur = 7;
  3910.                     this.shadowColor = '#000';
  3911.                 }
  3912.  
  3913.                 strokeText.apply(this, arguments);
  3914.             };
  3915.  
  3916.             CanvasRenderingContext2D.prototype.drawImage = function (
  3917.             image,
  3918.              ...args
  3919.             ) {
  3920.                 if (this.canvas.id !== 'canvas')
  3921.                     return drawImage.call(this, image, ...args);
  3922.  
  3923.                 if (
  3924.                     image.src &&
  3925.                     (image.src.endsWith('2.png') ||
  3926.                      image.src.endsWith('2-min.png')) &&
  3927.                     modSettings.game.virusImage
  3928.                 ) {
  3929.                     if (mods.virusImageLoaded) {
  3930.                         return drawImage.call(this, mods.virusImage, ...args);
  3931.                     } else {
  3932.                         loadVirusImage(modSettings.game.virusImage).then(() => {
  3933.                             drawImage.call(this, mods.virusImage, ...args);
  3934.                         });
  3935.                         return;
  3936.                     }
  3937.                 }
  3938.  
  3939.                 if (
  3940.                     image instanceof HTMLImageElement &&
  3941.                     modSettings.game.skins.original &&
  3942.                     image.src.includes(`${modSettings.game.skins.original}.png`)
  3943.                 ) {
  3944.                     if (mods.skinImageLoaded) {
  3945.                         return drawImage.call(this, mods.skinImage, ...args);
  3946.                     } else {
  3947.                         loadSkinImage(
  3948.                             modSettings.game.skins.original,
  3949.                             modSettings.game.skins.replacement
  3950.                         ).then(() => {
  3951.                             drawImage.call(this, mods.skinImage, ...args);
  3952.                         });
  3953.                         return;
  3954.                     }
  3955.                 }
  3956.  
  3957.                 drawImage.call(this, image, ...args);
  3958.             };
  3959.  
  3960.             function loadVirusImage(imgSrc) {
  3961.                 return new Promise((resolve, reject) => {
  3962.                     const replacementVirus = new Image();
  3963.                     replacementVirus.src = imgSrc;
  3964.                     replacementVirus.crossOrigin = 'Anonymous';
  3965.  
  3966.                     replacementVirus.onload = () => {
  3967.                         mods.virusImage = replacementVirus;
  3968.                         mods.virusImageLoaded = true;
  3969.                         resolve();
  3970.                     };
  3971.  
  3972.                     replacementVirus.onerror = () => {
  3973.                         console.error('Failed to load virus image.');
  3974.                         reject(new Error('Failed to load virus image.'));
  3975.                     };
  3976.                 });
  3977.             }
  3978.  
  3979.             function loadSkinImage(originalSkinName, replacementImgSrc) {
  3980.                 return new Promise((resolve, reject) => {
  3981.                     const replacementSkin = new Image();
  3982.                     replacementSkin.src = replacementImgSrc;
  3983.                     replacementSkin.crossOrigin = 'Anonymous';
  3984.  
  3985.                     replacementSkin.onload = () => {
  3986.                         mods.skinImage = replacementSkin;
  3987.                         mods.skinImageLoaded = true;
  3988.                         resolve();
  3989.                     };
  3990.  
  3991.                     replacementSkin.onerror = () =>
  3992.                     reject(new Error('Failed to load skin image.'));
  3993.                 });
  3994.             }
  3995.  
  3996.             const modals = {
  3997.                 map: {
  3998.                     title: 'Map Image',
  3999.                     applyId: 'apply-map-image',
  4000.                     resetId: 'reset-map-image',
  4001.                     previewId: 'preview-mapImage',
  4002.                     modalId: 'map-modal',
  4003.                     storagePath: 'game.map.image',
  4004.                 },
  4005.                 virus: {
  4006.                     title: 'Virus Image',
  4007.                     applyId: 'apply-virus-image',
  4008.                     resetId: 'reset-virus-image',
  4009.                     previewId: 'preview-virusImage',
  4010.                     modalId: 'virus-modal',
  4011.                     storagePath: 'game.virusImage',
  4012.                 },
  4013.                 skin: {
  4014.                     title: 'Skin Replacement',
  4015.                     applyId: 'apply-skin-image',
  4016.                     resetId: 'reset-skin-image',
  4017.                     previewId: 'preview-skinImage',
  4018.                     modalId: 'skin-modal',
  4019.                     storagePath: [
  4020.                         'game.skins.original',
  4021.                         'game.skins.replacement',
  4022.                     ],
  4023.                     additional: true,
  4024.                 },
  4025.             };
  4026.  
  4027.             function createModal({
  4028.                 title,
  4029.                 applyId,
  4030.                 resetId,
  4031.                 previewId,
  4032.                 modalId,
  4033.                 additional,
  4034.             }) {
  4035.                 const additionalContent = additional
  4036.                 ? `
  4037. 					<span>Select a skin that should be replaced:</span>
  4038. 					<select class="form-control" id="skin-list"></select>
  4039. 					<span style="font-size: 12px;">Replacement image - Enter an image URL:</span>
  4040. 				`
  4041.                 : `
  4042. 					<span>Enter an image URL:</span>
  4043. 				`;
  4044.  
  4045.                 return `
  4046. 					<div class="default-modal">
  4047. 						<div class="default-modal-header">
  4048. 							<h2>${title}</h2>
  4049. 							<button class="btn closeBtn" id="closeCustomModal">
  4050. 								<svg width="22" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  4051. 									<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>
  4052. 								</svg>
  4053. 							</button>
  4054. 						</div>
  4055. 						<div class="default-modal-body">
  4056. 							${additionalContent}
  4057. 							<div class="centerXY g-10">
  4058. 								<input type="text" placeholder="https://i.imgur/..." class="form-control" id="image-url" />
  4059. 								<div class="imagePreview" id="${previewId}" title="Image Preview">
  4060. 									<span class="no-preview">No Preview Available</span>
  4061. 								</div>
  4062. 							</div>
  4063. 							<div class="centerXY g-10">
  4064. 								<button type="button" class="modButton-black" id="${applyId}">Apply Image</button>
  4065. 								<button type="button" class="resetButton" title="Reset ${title.toLowerCase()}" id="${resetId}"></button>
  4066. 							</div>
  4067. 						</div>
  4068. 					</div>
  4069. 				`;
  4070.             }
  4071.  
  4072.             function setupModalEvents(id, type) {
  4073.                 byId(id).addEventListener('click', async () => {
  4074.                     mods.customModal(
  4075.                         createModal(modals[type]),
  4076.                         modals[type].modalId
  4077.                     );
  4078.                     document
  4079.                         .querySelector('#closeCustomModal')
  4080.                         .addEventListener('click', () => closeModal(type));
  4081.  
  4082.                     const modal = modals[type];
  4083.                     const imageUrlInput = byId('image-url');
  4084.  
  4085.                     let initialUrl = '';
  4086.                     if (modal.additional && type === 'skin') {
  4087.                         const [originalPath, replacementPath] =
  4088.                               modal.storagePath;
  4089.                         initialUrl =
  4090.                             getNestedValue(modSettings, replacementPath) || '';
  4091.                         byId('skin-list').value =
  4092.                             getNestedValue(modSettings, originalPath) || '';
  4093.                     } else {
  4094.                         initialUrl =
  4095.                             getNestedValue(modSettings, modal.storagePath) ||
  4096.                             '';
  4097.                     }
  4098.                     imageUrlInput.value = initialUrl;
  4099.                     updatePreview(initialUrl);
  4100.  
  4101.                     imageUrlInput.addEventListener('input', (e) => {
  4102.                         updatePreview(e.target.value);
  4103.                     });
  4104.  
  4105.                     byId(modal.applyId).addEventListener('click', () =>
  4106.                                                          applyChanges(type)
  4107.                                                         );
  4108.                     byId(modal.resetId).addEventListener('click', () =>
  4109.                                                          resetChanges(type)
  4110.                                                         );
  4111.  
  4112.                     if (type === 'skin') {
  4113.                         const skinList = byId('skin-list');
  4114.                         const skins =
  4115.                               mods.skins.length > 0
  4116.                         ? mods.skins
  4117.                         : await fetch(
  4118.                             'https://one.sigmally.com/api/skins'
  4119.                         )
  4120.                         .then((response) => response.json())
  4121.                         .then((data) => {
  4122.                             const skinNames = data.data.map(
  4123.                                 (item) =>
  4124.                                 item.name.replace('.png', '')
  4125.                             );
  4126.                             mods.skins = skinNames;
  4127.                             return skinNames;
  4128.                         });
  4129.  
  4130.                         skinList.innerHTML = skins
  4131.                             .map(
  4132.                             (skin) =>
  4133.                             `<option value="${skin}" ${
  4134.                             skin === modSettings.game.skins.original
  4135.                             ? 'selected'
  4136.                             : ''
  4137.                             }>${skin}</option>`
  4138.                         )
  4139.                             .join('');
  4140.                     }
  4141.                 });
  4142.             }
  4143.  
  4144.             function getNestedValue(obj, path) {
  4145.                 return path
  4146.                     .split('.')
  4147.                     .reduce((acc, part) => acc && acc[part], obj);
  4148.             }
  4149.  
  4150.             function setNestedValue(obj, path, value) {
  4151.                 const parts = path.split('.');
  4152.                 const last = parts.pop();
  4153.                 const target = parts.reduce(
  4154.                     (acc, part) => (acc[part] = acc[part] || {}),
  4155.                     obj
  4156.                 );
  4157.                 target[last] = value;
  4158.             }
  4159.  
  4160.             function updatePreview(url) {
  4161.                 const preview = document.querySelector('.imagePreview');
  4162.                 const noPreviewSpan = document.querySelector('.no-preview');
  4163.  
  4164.                 const updateVisibility = (showPreview) => {
  4165.                     preview.style.backgroundImage = showPreview
  4166.                         ? `url(${url})`
  4167.                     : 'none';
  4168.                     noPreviewSpan.style.display = showPreview
  4169.                         ? 'none'
  4170.                     : 'block';
  4171.                 };
  4172.  
  4173.                 if (url) {
  4174.                     const img = new Image();
  4175.                     img.src = url;
  4176.                     img.onload = () => updateVisibility(true);
  4177.                     img.onerror = () => updateVisibility(false);
  4178.                 } else {
  4179.                     updateVisibility(false);
  4180.                 }
  4181.             }
  4182.  
  4183.             function applyChanges(type) {
  4184.                 let { title, storagePath, additional } = modals[type];
  4185.                 const url = byId('image-url').value;
  4186.  
  4187.                 mods[`${type}ImageLoaded`] = false;
  4188.  
  4189.                 if (additional && type === 'skin') {
  4190.                     const selectedSkin = byId('skin-list').value;
  4191.                     setNestedValue(modSettings, storagePath[0], selectedSkin);
  4192.                     setNestedValue(modSettings, storagePath[1], url);
  4193.                 } else {
  4194.                     setNestedValue(modSettings, storagePath, url);
  4195.                 }
  4196.  
  4197.                 updateStorage();
  4198.  
  4199.                 mods.modAlert(`Successfully applied ${title}.`, 'success');
  4200.             }
  4201.  
  4202.             function resetChanges(type) {
  4203.                 const { title, storagePath, additional } = modals[type];
  4204.  
  4205.                 if (additional && type === 'skin') {
  4206.                     setNestedValue(modSettings, storagePath[0], null);
  4207.                     setNestedValue(modSettings, storagePath[1], null);
  4208.                 } else {
  4209.                     setNestedValue(modSettings, storagePath, null);
  4210.                 }
  4211.  
  4212.                 mods[`${type}ImageLoaded`] = false;
  4213.  
  4214.                 updateStorage();
  4215.  
  4216.                 mods.modAlert(
  4217.                     `The ${title} has been successfully reset.`,
  4218.                     'success'
  4219.                 );
  4220.             }
  4221.  
  4222.             function closeModal(type) {
  4223.                 const overlay = byId(`${type}-modal`);
  4224.                 overlay.style.opacity = 0;
  4225.                 setTimeout(() => overlay.remove(), 300);
  4226.             }
  4227.  
  4228.             setupModalEvents('mapImageSelect', 'map');
  4229.             setupModalEvents('virusImageSelect', 'virus');
  4230.             setupModalEvents('skinReplaceSelect', 'skin');
  4231.  
  4232.             const shortenNames = byId('shortenNames');
  4233.             const removeOutlines = byId('removeOutlines');
  4234.  
  4235.             shortenNames.addEventListener('change', () => {
  4236.                 modSettings.game.shortenNames = shortenNames.checked;
  4237.                 updateStorage();
  4238.             });
  4239.             removeOutlines.addEventListener('change', () => {
  4240.                 modSettings.game.removeOutlines = removeOutlines.checked;
  4241.                 updateStorage();
  4242.             });
  4243.  
  4244.             const showNames = byId('mod-showNames');
  4245.             const showSkins = byId('mod-showSkins');
  4246.  
  4247.             const originalShowNames = byId('showNames');
  4248.             const originalShowSkins = byId('showSkins');
  4249.  
  4250.             function syncCheckboxes() {
  4251.                 if (showNames.checked !== originalShowNames.checked) {
  4252.                     originalShowNames.click();
  4253.                 }
  4254.                 if (showSkins.checked !== originalShowSkins.checked) {
  4255.                     originalShowSkins.click();
  4256.                 }
  4257.             }
  4258.  
  4259.             showNames.addEventListener('change', syncCheckboxes);
  4260.             showSkins.addEventListener('change', syncCheckboxes);
  4261.             syncCheckboxes();
  4262.  
  4263.             const deathScreenPos = byId('deathScreenPos');
  4264.             const deathScreen = byId('__line2');
  4265.  
  4266.             const applyMargin = (position) => {
  4267.                 switch (position) {
  4268.                     case 'left':
  4269.                         deathScreen.style.marginLeft = '0';
  4270.                         break;
  4271.                     case 'right':
  4272.                         deathScreen.style.marginRight = '0';
  4273.                         break;
  4274.                     case 'top':
  4275.                         deathScreen.style.marginTop = '20px';
  4276.                         break;
  4277.                     case 'bottom':
  4278.                         deathScreen.style.marginBottom = '20px';
  4279.                         break;
  4280.                     default:
  4281.                         deathScreen.style.margin = 'auto';
  4282.                 }
  4283.             };
  4284.  
  4285.             deathScreenPos.addEventListener('change', () => {
  4286.                 const selected = deathScreenPos.value;
  4287.                 applyMargin(selected);
  4288.                 modSettings.deathScreenPos = selected;
  4289.                 updateStorage();
  4290.             });
  4291.  
  4292.             const defaultPosition = modSettings.deathScreenPos || 'center';
  4293.  
  4294.             applyMargin(defaultPosition);
  4295.             deathScreenPos.value = defaultPosition;
  4296.         },
  4297.  
  4298.         customModal(children, id, zindex = '999999') {
  4299.             const overlay = document.createElement('div');
  4300.             overlay.classList.add('mod_overlay');
  4301.             id && overlay.setAttribute('id', id);
  4302.             overlay.innerHTML = children;
  4303.             overlay.style.zIndex = zindex;
  4304.             overlay.style.opacity = 0;
  4305.  
  4306.             document.body.append(overlay);
  4307.  
  4308.             setTimeout(() => {
  4309.                 overlay.style.opacity = '1';
  4310.             });
  4311.  
  4312.             const handleClickOutside = (e) => {
  4313.                 if (e.target === overlay) {
  4314.                     overlay.style.opacity = 0;
  4315.                     setTimeout(() => {
  4316.                         overlay.remove();
  4317.                         document.removeEventListener(
  4318.                             'click',
  4319.                             handleClickOutside
  4320.                         );
  4321.                     }, 300);
  4322.                 }
  4323.             };
  4324.  
  4325.             document.addEventListener('click', handleClickOutside);
  4326.         },
  4327.  
  4328.         handleGoogleAuth(user) {
  4329.             fetchedUser++;
  4330.             window.gameSettings.user = user;
  4331.  
  4332.             const chatSendInput = document.querySelector('#chatSendInput');
  4333.             if (chatSendInput) {
  4334.                 chatSendInput.placeholder = 'message...';
  4335.                 chatSendInput.disabled = false;
  4336.             }
  4337.  
  4338.             if (!client) client = new modClient();
  4339.  
  4340.             const waitForInit = () =>
  4341.             new Promise((res) => {
  4342.                 if (client.ws?.readyState === 1 && mods.nick)
  4343.                     return res(null);
  4344.                 const i = setInterval(
  4345.                     () =>
  4346.                     client.ws?.readyState === 1 &&
  4347.                     mods.nick &&
  4348.                     (clearInterval(i), res(null)),
  4349.                     50
  4350.                 );
  4351.             });
  4352.  
  4353.             waitForInit().then(() => {
  4354.                 client.send({
  4355.                     type: 'user',
  4356.                     content: { ...user, nick: mods.nick },
  4357.                 })
  4358.             });
  4359.  
  4360.             const claim = document.getElementById('free-chest-button');
  4361.             if (
  4362.                 fetchedUser === 1 &&
  4363.                 modSettings.settings.autoClaimCoins &&
  4364.                 claim?.style.display !== 'none'
  4365.             ) {
  4366.                 setTimeout(() => claim.click(), 500);
  4367.             }
  4368.         },
  4369.  
  4370.         async menu() {
  4371.             const mod_menu = document.createElement('div');
  4372.             mod_menu.classList.add('mod_menu');
  4373.             mod_menu.style.display = 'none';
  4374.             mod_menu.style.opacity = '0';
  4375.             mod_menu.innerHTML = `
  4376.                 <div class="mod_menu_wrapper">
  4377.                     <div class="mod_menu_header">
  4378.                         <img alt="Header image" src="${headerAnim}" draggable="false" class="header_img" />
  4379.                         <button type="button" class="modButton" id="closeBtn">
  4380.                             <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  4381.                                 <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>
  4382.                             </svg>
  4383.                         </button>
  4384.                     </div>
  4385.                     <div class="mod_menu_inner">
  4386.                         <div class="mod_menu_navbar">
  4387.                             <button class="mod_nav_btn mod_selected" id="tab_home_btn">
  4388.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/home%20(1).png" alt="Home Icon" />
  4389.                                 Home
  4390.                             </button>
  4391.                             <button class="mod_nav_btn" id="tab_macros_btn">
  4392.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/keyboard%20(1).png" alt="Keyboard Icon" />
  4393.                                 Macros
  4394.                             </button>
  4395.                             <button class="mod_nav_btn" id="tab_game_btn">
  4396.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/games.png" alt="Game Icon" />
  4397.                                 Game
  4398.                             </button>
  4399.                             <button class="mod_nav_btn" id="tab_name_btn">
  4400.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/836ca0f4c25fc6de2e429ee3583be5f860884a0c/images/icons/name.svg" alt="Name Icon" />
  4401.                                 Name
  4402.                             </button>
  4403.                             <button class="mod_nav_btn" id="tab_themes_btn">
  4404.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/theme.png" alt="Themes Icon" />
  4405.                                 Themes
  4406.                             </button>
  4407.                             <button class="mod_nav_btn" id="tab_gallery_btn">
  4408. 								<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>
  4409.                                 Gallery
  4410.                             </button>
  4411.  
  4412.                             <button class="mod_nav_btn" id="tab_friends_btn">
  4413.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/friends%20(1).png" alt="Friends Icon" />
  4414.                                 Friends
  4415.                             </button>
  4416.                             <button class="mod_nav_btn mt-auto" id="tab_info_btn">
  4417.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/info.png" alt="Info Icon" />
  4418.                                 Info
  4419.                             </button>
  4420.                         </div>
  4421.                         <div class="mod_menu_content">
  4422.                             <div class="mod_tab" id="mod_home">
  4423.                                 <span class="text-center f-big" id="welcomeUser">Welcome ${
  4424.             this.nick || 'Guest'
  4425.         }, to the SigMod Client!</span>
  4426.                                 <div class="home-card-row">
  4427. 									<!-- CARD.1 -->
  4428. 									<div class="home-card-wrapper">
  4429. 										<span>Your stats</span>
  4430. 										<div class="home-card">
  4431. 											<canvas id="sigmod-stats" width="200" height="100"></canvas>
  4432. 										</div>
  4433. 									</div>
  4434. 									<!-- CARD.2 -->
  4435. 									<div class="home-card-wrapper">
  4436.                                         <span>Announcements</span>
  4437.                                         <div class="home-card" style="justify-content: start;">
  4438. 											<div id="mod-announcements">No announcements yet...</div>
  4439. 										</div>
  4440.                                     </div>
  4441.                                 </div>
  4442.                                 <div class="home-card-row">
  4443. 									<!-- CARD.3 -->
  4444.                                     <div class="home-card-wrapper">
  4445.                                         <span>Quick access</span>
  4446.                                         <div class="home-card quickAccess scroll" id="mod_qaccess"></div>
  4447.                                     </div>
  4448. 									<!-- CARD.4 -->
  4449.                                     <div class="home-card-wrapper">
  4450.                                         <span>Mod profile</span>
  4451.                                         <div class="home-card">
  4452.                                             <div class="justify-sb">
  4453.                                                 <div class="flex" style="align-items: center; gap: 5px;">
  4454.                                                     <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" />
  4455.                                                     <span id="my-profile-name">Guest</span>
  4456.                                                 </div>
  4457.                                                 <span id="my-profile-role">Guest</span>
  4458.                                             </div>
  4459. 											<div id="my-profile-badges"></div>
  4460.                                             <hr />
  4461.                                             <span id="my-profile-bio" class="scroll">No Bio.</span>
  4462.                                         </div>
  4463.                                     </div>
  4464.                                 </div>
  4465.                             </div>
  4466.                             <div class="mod_tab scroll" id="mod_macros" style="display: none">
  4467. 								<div class="modColItems">
  4468.                                     <div class="macros_wrapper">
  4469.                                         <span class="text-center f-big">Keybindings</span>
  4470.                                         <hr style="border-color: #3F3F3F">
  4471.                                         <div style="justify-content: center;">
  4472.                                             <div class="f-column g-10" style="align-items: center; justify-content: center;">
  4473.                                                 <div class="macrosContainer">
  4474.                                                     <div class="f-column g-10">
  4475.                                                         <label class="macroRow">
  4476.                                                           <span class="text">Rapid Feed</span>
  4477.                                                           <input type="text" name="rapidFeed" id="modinput1" class="keybinding" value="${
  4478.             modSettings.macros
  4479.                 .keys
  4480.                 .rapidFeed ||
  4481.                 ''
  4482.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4483.                                                         </label>
  4484.                                                         <label class="macroRow">
  4485.                                                           <span class="text">Double Split</span>
  4486.                                                           <input type="text" name="splits.double" id="modinput2" class="keybinding" value="${
  4487.             modSettings.macros
  4488.                 .keys.splits
  4489.                 .double || ''
  4490.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4491.                                                         </label>
  4492.                                                         <label class="macroRow">
  4493.                                                           <span class="text">Triple Split</span>
  4494.                                                           <input type="text" name="splits.triple" id="modinput3" class="keybinding" value="${
  4495.             modSettings.macros
  4496.                 .keys.splits
  4497.                 .triple || ''
  4498.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4499.                                                         </label>
  4500.                                                         <label class="macroRow">
  4501.                                                           <span class="text">Respawn</span>
  4502.                                                           <input type="text" name="respawn" id="modinput15" class="keybinding" value="${
  4503.             modSettings.macros
  4504.                 .keys
  4505.                 .respawn || ''
  4506.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4507.                                                         </label>
  4508.                                                     </div>
  4509.                                                     <div class="f-column g-10">
  4510.                                                         <label class="macroRow">
  4511.                                                           <span class="text">Quad Split</span>
  4512.                                                           <input type="text" name="splits.quad" id="modinput4" class="keybinding" value="${
  4513.             modSettings.macros
  4514.                 .keys.splits
  4515.                 .quad || ''
  4516.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4517.                                                         </label>
  4518.                                                         <label class="macroRow">
  4519.                                                           <span class="text">Horizontal Line</span>
  4520.                                                           <input type="text" name="line.horizontal" id="modinput5" class="keybinding" value="${
  4521.             modSettings.macros
  4522.                 .keys.line
  4523.                 .horizontal ||
  4524.                 ''
  4525.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4526.                                                         </label>
  4527.                                                         <label class="macroRow">
  4528.                                                           <span class="text">Vertical Line</span>
  4529.                                                           <input type="text" name="line.vertical" id="modinput7" class="keybinding" value="${
  4530.             modSettings.macros
  4531.                 .keys.line
  4532.                 .vertical ||
  4533.                 ''
  4534.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4535.                                                         </label>
  4536.                                                         <label class="macroRow">
  4537.                                                           <span class="text">Fixed Line</span>
  4538.                                                           <input type="text" name="line.fixed" id="modinput16" class="keybinding" value="${
  4539.             modSettings.macros
  4540.                 .keys.line
  4541.                 .fixed || ''
  4542.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4543.                                                         </label>
  4544.                                                     </div>
  4545.                                                 </div>
  4546.                                             </div>
  4547.                                         </div>
  4548.                                     </div>
  4549.                                     <div class="macros_wrapper">
  4550.                                         <span class="text-center f-big">Advanced Keybinding options</span>
  4551.                                         <div class="setting-card-wrapper">
  4552.                                             <div class="setting-card">
  4553.                                                 <div class="setting-card-action">
  4554.                                                     <span class="setting-card-name">Mouse macros</span>
  4555.                                                 </div>
  4556.                                             </div>
  4557.                                             <div class="setting-parameters" style="display: none;">
  4558.                                                 <div class="my-5">
  4559.                                                     <span class="stats-info-text">Feed or Split with mouse buttons</span>
  4560.                                                 </div>
  4561.                                                 <div class="stats-line justify-sb">
  4562.                                                     <span class="centerXY g-5">
  4563.                                                         Mouse Button 1
  4564.                                                         <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>
  4565.                                                     </span>
  4566.                                                     <select class="form-control macro-extanded_input" style="padding: 2px; text-align: left; width: 100px" id="m1_macroSelect">
  4567.                                                         <option value="none">None</option>
  4568.                                                         <option value="fastfeed">Fast Feed</option>
  4569.                                                         <option value="split">Split (1)</option>
  4570.                                                         <option value="split2">Double Split</option>
  4571.                                                         <option value="split3">Triple Split</option>
  4572.                                                         <option value="split4">Quad Split</option>
  4573.                                                         <option value="freeze">Horizontal Line</option>
  4574.                                                         <option value="dTrick">Double Trick</option>
  4575.                                                         <option value="sTrick">Self Trick</option>
  4576.                                                     </select>
  4577.                                                 </div>
  4578.                                                 <div class="stats-line justify-sb">
  4579.                                                     <span class="centerXY g-5">
  4580.                                                         Mouse Button 2
  4581.                                                         <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>
  4582.                                                     </span>
  4583.                                                     <select class="form-control" style="padding: 2px; text-align: left; width: 100px" id="m2_macroSelect">
  4584.                                                         <option value="none">None</option>
  4585.                                                         <option value="fastfeed">Fast Feed</option>
  4586.                                                         <option value="split">Split (1)</option>
  4587.                                                         <option value="split2">Double Split</option>
  4588.                                                         <option value="split3">Triple Split</option>
  4589.                                                         <option value="split4">Quad Split</option>
  4590.                                                         <option value="freeze">Horizontal Line</option>
  4591.                                                         <option value="dTrick">Double Trick</option>
  4592.                                                         <option value="sTrick">Self Trick</option>
  4593.                                                     </select>
  4594.                                                 </div>
  4595.                                             </div>
  4596.                                         </div>
  4597. 										<div class="setting-card-wrapper">
  4598.                                             <div class="setting-card">
  4599.                                                 <div class="setting-card-action">
  4600.                                                     <span class="setting-card-name">Rapid feed</span>
  4601.                                                 </div>
  4602.                                             </div>
  4603.  
  4604.                                             <div class="setting-parameters" style="display: none;">
  4605.                                                 <div class="my-5">
  4606.                                                     <span class="stats-info-text">Customize feeding</span>
  4607.                                                 </div>
  4608.                                                 <div class="stats-line justify-sb">
  4609.                                                     <span>Speed</span>
  4610. 													<div class="justify-sb g-5" style="width: 200px;">
  4611. 														<span class="mod_badge" id="macroSpeedText">${
  4612.             modSettings.macros
  4613.                 .feedSpeed ||
  4614.                 '50'
  4615.         }ms</span>
  4616. 														<input
  4617. 															type="range"
  4618. 															class="modSlider"
  4619. 															id="macroSpeed"
  4620. 															min="5"
  4621. 															max="100"
  4622. 															value="${modSettings.macros.feedSpeed || 50}"
  4623. 															step="5"
  4624. 															style="width: 134px;"
  4625. 														/>
  4626. 													</div>
  4627.                                                 </div>
  4628.                                             </div>
  4629.                                         </div>
  4630.                                         <div class="setting-card-wrapper">
  4631.                                             <div class="setting-card">
  4632.                                                 <div class="setting-card-action">
  4633.                                                     <span class="setting-card-name">Linesplits</span>
  4634.                                                 </div>
  4635.                                             </div>
  4636.  
  4637.                                             <div class="setting-parameters" style="display: none;">
  4638.                                                 <div class="my-5">
  4639.                                                     <span class="stats-info-text">Customize linesplits</span>
  4640.                                                 </div>
  4641.  
  4642.                                                 <div class="stats-line justify-sb">
  4643.                                                     <span>Instant split</span>
  4644. 													<div class="centerXY g-5">
  4645. 														<span class="modDescText">Splits - </span>
  4646. 														<input type="text" class="modInput modNumberInput text-center" placeholder="0" title="Splits" style="width: 30px;" id="instant-split-amount" onclick="this.select()" />
  4647. 														<div class="modCheckbox">
  4648. 														  <input id="toggle-instant-split" type="checkbox" checked />
  4649. 														  <label class="cbx" for="toggle-instant-split"></label>
  4650. 														</div>
  4651. 													</div>
  4652.                                                 </div>
  4653.                                             </div>
  4654.                                         </div>
  4655.                                         <div class="setting-card-wrapper">
  4656.                                             <div class="setting-card">
  4657.                                                 <div class="setting-card-action">
  4658.                                                     <span class="setting-card-name">Toggle Settings</span>
  4659.                                                 </div>
  4660.                                             </div>
  4661.  
  4662.                                             <div class="setting-parameters" style="display: none;">
  4663.                                                 <div class="my-5">
  4664.                                                     <span class="stats-info-text">Toggle settings with a keybind.</span>
  4665.                                                 </div>
  4666.  
  4667.                                                 <div class="stats-line justify-sb">
  4668.                                                     <span>Toggle Menu</span>
  4669.                                                     <input type="text" name="toggle.menu" id="modinput6" class="keybinding" value="${
  4670.             modSettings.macros.keys
  4671.                 .toggle.menu || ''
  4672.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4673.                                                 </div>
  4674.  
  4675.                                                 <div class="stats-line justify-sb">
  4676.                                                     <span>Toggle Names</span>
  4677.                                                     <input value="${
  4678.             modSettings.macros.keys
  4679.                 .toggle.names || ''
  4680.         }" placeholder="..." readonly id="modinput10" name="toggle.names" class="keybinding" onfocus="this.select();">
  4681.                                                 </div>
  4682.  
  4683.                                                 <div class="stats-line justify-sb">
  4684.                                                     <span>Toggle Skins</span>
  4685.                                                     <input value="${
  4686.             modSettings.macros.keys
  4687.                 .toggle.skins || ''
  4688.         }" placeholder="..." readonly id="modinput11" name="toggle.skins" class="keybinding" onfocus="this.select();">
  4689.                                                 </div>
  4690.  
  4691.                                                 <div class="stats-line justify-sb">
  4692.                                                 <span>Toggle Autorespawn</span>
  4693.                                                     <input value="${
  4694.             modSettings.macros.keys
  4695.                 .toggle
  4696.                 .autoRespawn || ''
  4697.         }" placeholder="..." readonly id="modinput12" name="toggle.autoRespawn" class="keybinding" onfocus="this.select();">
  4698.                                                 </div>
  4699.                                             </div>
  4700.                                         </div>
  4701.                                         <div class="setting-card-wrapper">
  4702.                                             <div class="setting-card">
  4703.                                                 <div class="setting-card-action">
  4704.                                                     <span class="setting-card-name">Tricksplits</span>
  4705.                                                 </div>
  4706.                                             </div>
  4707.                                             <div class="setting-parameters" style="display: none;">
  4708.                                                 <div class="my-5">
  4709.                                                     <span class="stats-info-text">Other split options - splits with delay</span>
  4710.                                                 </div>
  4711.                                                 <div class="stats-line justify-sb">
  4712.                                                     <span>Double Trick</span>
  4713.                                                     <input value="${
  4714.             modSettings.macros.keys
  4715.                 .splits
  4716.                 .doubleTrick || ''
  4717.         }" placeholder="..." readonly id="modinput13" name="splits.doubleTrick" class="keybinding" onfocus="this.select();">
  4718.                                                 </div>
  4719.                                                 <div class="stats-line justify-sb">
  4720.                                                     <span>Self Trick</span>
  4721.                                                     <input value="${
  4722.             modSettings.macros.keys
  4723.                 .splits.selfTrick ||
  4724.                 ''
  4725.         }" placeholder="..." readonly id="modinput14" name="splits.selfTrick" class="keybinding" onfocus="this.select();">
  4726.                                                 </div>
  4727.                                             </div>
  4728.                                         </div>
  4729.                                     </div>
  4730.                                 </div>
  4731.                             </div>
  4732.                             <div class="mod_tab scroll" id="mod_game" style="display: none">
  4733.                                 <div class="modColItems">
  4734.                                     <div class="modRowItems" style="align-items: start;">
  4735.                                         <div class="modColItems_2">
  4736.                                             <span style="font-style: italic;">~ Game Colors</span>
  4737.                                             <div class="justify-sb w-100 p-5 rounded">
  4738.                                                 <span class="text">Map</span>
  4739.                                                 <div id="mapColor"></div>
  4740.                                             </div>
  4741.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4742.                                                 <span class="text">Border</span>
  4743.                                                 <div id="borderColor"></div>
  4744.                                             </div>
  4745.                                             <div class="justify-sb w-100 p-5 rounded">
  4746.                                                 <span class="text" title="Does not work with jelly physics">Food</span>
  4747.                                                 <div id="foodColor"></div>
  4748.                                             </div>
  4749.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4750.                                                 <span class="text" title="Does not work with jelly physics">Cells</span>
  4751.                                                 <div id="cellColor"></div>
  4752.                                             </div>
  4753.                                         </div>
  4754.                                         <div class="modColItems_2">
  4755.                                             <span style="font-style: italic;">~ Game Images</span>
  4756.                                             <div class="justify-sb w-100 p-5 rounded">
  4757.                                                 <span class="text">Map Image</span>
  4758.                                                 <button class="btn select-btn" id="mapImageSelect"></button>
  4759.                                             </div>
  4760.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4761.                                                 <span class="text">Virus Image</span>
  4762.                                                 <button class="btn select-btn" id="virusImageSelect"></button>
  4763.                                             </div>
  4764.                                             <div class="justify-sb w-100 p-5 rounded">
  4765.                                                 <span class="text">Replace Skins</span>
  4766.                                                 <button class="btn select-btn" id="skinReplaceSelect"></button>
  4767.                                             </div>
  4768.                                         </div>
  4769.                                     </div>
  4770.                                     <div class="modColItems_2">
  4771. 										<span style="font-style: italic;">~ Game Settings</span>
  4772. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4773. 											<span class="text">Font</span>
  4774. 											<div id="font-select-container"></div>
  4775. 										</div>
  4776. 										<div class="justify-sb w-100 p-10">
  4777. 											<span class="text">Names</span>
  4778. 											<div class="modCheckbox">
  4779. 											  <input id="mod-showNames" type="checkbox" ${
  4780.             JSON.parse(
  4781.                 localStorage.getItem(
  4782.                     'settings'
  4783.                 )
  4784.             )?.showNames
  4785.                 ? 'checked'
  4786.             : ''
  4787.         } />
  4788. 											  <label class="cbx" for="mod-showNames"></label>
  4789. 											</div>
  4790. 										</div>
  4791. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4792. 											<span class="text">Skins</span>
  4793. 											<div class="modCheckbox">
  4794. 											  <input id="mod-showSkins" type="checkbox" ${
  4795.             JSON.parse(
  4796.                 localStorage.getItem(
  4797.                     'settings'
  4798.                 )
  4799.             )?.showSkins
  4800.                 ? 'checked'
  4801.             : ''
  4802.         } />
  4803. 											  <label class="cbx" for="mod-showSkins"></label>
  4804. 											</div>
  4805. 										</div>
  4806. 										<div class="justify-sb w-100 p-10 rounded">
  4807. 											<span title="Long nicknames will be shorten on the leaderboard & ingame">Shorten names</span>
  4808. 											<div class="modCheckbox">
  4809. 											  <input id="shortenNames" type="checkbox" ${
  4810.             modSettings.game
  4811.                 .shortenNames && 'checked'
  4812.         } />
  4813. 											  <label class="cbx" for="shortenNames"></label>
  4814. 											</div>
  4815. 										</div>
  4816. 										<div class="justify-sb w-100 accent_row p-10">
  4817. 											<span>Text outlines & shadows</span>
  4818. 											<div class="modCheckbox">
  4819. 											  <input id="removeOutlines" type="checkbox" ${
  4820.             modSettings.gameShortenNames &&
  4821.                 'checked'
  4822.         } />
  4823. 											  <label class="cbx" for="removeOutlines"></label>
  4824. 											</div>
  4825. 										</div>
  4826. 										<div class="justify-sb w-100 rounded" style="padding: 5px 10px;">
  4827.                                         	<span class="text">Death screen Position</span>
  4828. 											<select id="deathScreenPos" class="form-control" style="width: 30%">
  4829. 												<option value="center" selected>Center</option>
  4830. 												<option value="left">Left</option>
  4831. 												<option value="right">Right</option>
  4832. 												<option value="top">Top</option>
  4833. 												<option value="bottom">Bottom</option>
  4834. 											</select>
  4835. 										</div>
  4836. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4837. 											<span class="text">Play timer</span>
  4838. 											<div class="modCheckbox">
  4839. 											  <input type="checkbox" id="playTimerToggle" ${
  4840.             modSettings.settings
  4841.                 .playTimer && 'checked'
  4842.         } />
  4843. 											  <label class="cbx" for="playTimerToggle"></label>
  4844. 											</div>
  4845. 										</div>
  4846. 										<div class="justify-sb w-100 p-10 rounded">
  4847. 											<span class="text">Mouse tracker</span>
  4848. 											<div class="modCheckbox">
  4849. 											  <input type="checkbox" id="mouseTrackerToggle" ${
  4850.             modSettings.settings
  4851.                 .mouseTracker && 'checked'
  4852.         } />
  4853. 											  <label class="cbx" for="mouseTrackerToggle"></label>
  4854. 											</div>
  4855. 										</div>
  4856.                                     </div>
  4857.                                     <div class="modRowItems justify-sb">
  4858.                                         <span class="text">Reset settings: </span>
  4859.                                         <button class="modButton-secondary" id="resetModSettings" type="button">Reset mod settings</button>
  4860.                                         <button class="modButton-secondary" id="resetGameSettings" type="button">Reset game settings</button>
  4861.                                     </div>
  4862.                                 </div>
  4863.                             </div>
  4864.  
  4865.                             <div class="mod_tab scroll" id="mod_name" style="display: none">
  4866.                             <div class="modColItems">
  4867.                                 <div class="modRowItems justify-sb" style="align-items: start;">
  4868.                                     <div class="f-column g-5" style="align-items: start; justify-content: start;">
  4869.                                         <span class="modTitleText">Name fonts & special characters</span>
  4870.                                         <span class="modDescText">Customize your name with special characters or fonts</span>
  4871.                                     </div>
  4872.                                     <div class="f-column g-5">
  4873.                                         <button class="modButton-secondary" onclick="window.open('https://nickfinder.com', '_blank')">Nickfinder</button>
  4874.                                         <button class="modButton-secondary" onclick="window.open('https://www.stylishnamemaker.com', '_blank')">Stylish Name</button>
  4875.                                         <button class="modButton-secondary" onclick="window.open('https://www.tell.wtf', '_blank')">Tell.wtf</button>
  4876.                                     </div>
  4877.                                 </div>
  4878.                                 <div class="modRowItems justify-sb">
  4879.                                     <div class="f-column g-5">
  4880.                                         <span class="modTitleText">Save names</span>
  4881.                                         <span class="modDescText">Save your names locally</span>
  4882.                                         <div class="flex g-5">
  4883.                                             <input class="modInput" placeholder="Enter a name..." id="saveNameValue" />
  4884.                                             <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>
  4885.                                         </div>
  4886.                                         <div id="savedNames" class="f-column scroll"></div>
  4887.                                     </div>
  4888.                                     <div class="vr"></div>
  4889.                                     <div class="f-column g-5">
  4890.                                         <span class="modTitleText">Name Color</span>
  4891.                                         <span class="modDescText">Customize your name color</span>
  4892.                                         <div class="justify-sb">
  4893.                                             <input type="color" value="#ffffff" id="nameColor" class="colorInput">
  4894.                                         </div>
  4895.                                         <span class="modTitleText">Gradient Name</span>
  4896.                                         <span class="modDescText">Customize your name with a gradient color</span>
  4897.                                         <div class="justify-sb">
  4898.                                             <div class="flex g-2" style="align-items: center">
  4899.                                                 <input type="color" value="#ffffff" id="gradientNameColor1" class="colorInput">
  4900.                                                 <span>➜ First color</span>
  4901.                                             </div>
  4902.                                         </div>
  4903.                                         <div class="justify-sb">
  4904.                                             <div class="flex g-2" style="align-items: center">
  4905.                                                 <input type="color" value="#ffffff" id="gradientNameColor2" class="colorInput">
  4906.                                                 <span>➜ Second color</span>
  4907.                                             </div>
  4908.                                         </div>
  4909.                                     </div>
  4910.                                 </div>
  4911.                             </div>
  4912.                             </div>
  4913.                             <div class="mod_tab scroll" id="mod_themes" style="display: none">
  4914. 								<span>Background presets</span>
  4915.                                 <div class="themes scroll" id="themes">
  4916.                                     <div class="theme" id="createTheme">
  4917.                                         <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>
  4918.                                         <div class="themeName text" style="color: #fff">Create</div>
  4919.                                     </div>
  4920.                                 </div>
  4921.  
  4922. 								<div class="modColItems_2" style="margin-top: 5px;">
  4923. 									<div class="justify-sb w-100 p-10">
  4924. 										<span>Input border radius</span>
  4925. 										<div class="centerXY g-10" style="width: 40%">
  4926.                                             <button id="reset_input_radius" class="resetButton"></button>
  4927.                                             <input type="range" class="modSlider" id="theme-inputBorderRadius" max="20" step="2" />
  4928.                                         </div>
  4929. 									</div>
  4930. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4931. 										<span>Menu border radius</span>
  4932.                                         <div class="centerXY g-10" style="width: 40%">
  4933.                                             <button id="reset_menu_radius" class="resetButton"></button>
  4934.                                             <input type="range" class="modSlider"id="theme-menuBorderRadius" max="50" step="2" />
  4935.                                         </div>
  4936. 									</div>
  4937. 									<div class="justify-sb w-100 p-10">
  4938. 										<span>Input border</span>
  4939. 										<div class="modCheckbox">
  4940. 										  <input id="theme-inputBorder" type="checkbox" />
  4941. 										  <label class="cbx" for="theme-inputBorder"></label>
  4942. 										</div>
  4943. 									</div>
  4944. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4945. 										<span>Challenges on deathscreen</span>
  4946. 										<div class="modCheckbox">
  4947. 										  <input id="showChallenges" type="checkbox" />
  4948. 										  <label class="cbx" for="showChallenges"></label>
  4949. 										</div>
  4950. 									</div>
  4951. 									<div class="justify-sb w-100 p-10">
  4952. 										<span>Remove shop popup</span>
  4953. 										<div class="modCheckbox">
  4954. 										  <input id="removeShopPopup" type="checkbox" />
  4955. 										  <label class="cbx" for="removeShopPopup"></label>
  4956. 										</div>
  4957. 									</div>
  4958. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4959. 										<span>Hide Discord Buttons</span>
  4960. 										<div class="modCheckbox">
  4961. 										  <input id="hideDiscordBtns" type="checkbox" />
  4962. 										  <label class="cbx" for="hideDiscordBtns"></label>
  4963. 										</div>
  4964. 									</div>
  4965. 									<div class="justify-sb w-100 p-10">
  4966. 										<span>Hide Language Buttons</span>
  4967. 										<div class="modCheckbox">
  4968. 										  <input id="hideLangs" type="checkbox" />
  4969. 										  <label class="cbx" for="hideLangs"></label>
  4970. 										</div>
  4971. 									</div>
  4972. 								</div>
  4973.                             </div>
  4974.                             <div class="mod_tab scroll" id="mod_gallery" style="display: none">
  4975. 								<div class="modColItems_2">
  4976. 									<label class="macroRow w-100">
  4977. 									  <span class="text">Keybind to save image</span>
  4978. 									  <input type="text" name="saveImage" id="modinput17" class="keybinding" value="${
  4979.             modSettings.macros.keys.saveImage ||
  4980.                 ''
  4981.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4982. 									</label>
  4983. 								</div>
  4984. 								<div class="modColItems_2">
  4985. 									<span>Image gallery</span>
  4986. 									<div class="flex g-5">
  4987. 										<button class="modButton" id="gallery-download">Download all</button>
  4988. 										<button class="modButton" id="gallery-delete">Delete all</button>
  4989. 									</div>
  4990. 									<div id="image-gallery"></div>
  4991. 								</div>
  4992.                             </div>
  4993.                             <div class="mod_tab scroll centerXY" id="mod_friends" style="display: none">
  4994.                                 <div class="centerXY f-big" style="margin-top: 10px;">Connect and discover new friends with SigMod.</div>
  4995.                                 <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>
  4996.  
  4997.                                 <div class="centerXY f-column g-5" style="height: 300px; width: 165px;">
  4998.                                     <button class="modButton-black" id="createAccount">
  4999.                                         <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>
  5000.                                         Create account
  5001.                                     </button>
  5002.                                     <button class="modButton-black" id="login">
  5003.                                         <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>
  5004.                                         Login
  5005.                                     </button>
  5006.                                 </div>
  5007.                             </div>
  5008.                             <div class="mod_tab scroll f-column g-5 text-center" id="mod_info" style="display: none">
  5009.                                 <div class="brand_wrapper">
  5010.                                     <img src="https://czrsd.com/static/sigmod/info_bg_2.jpeg" alt="Info background" class="brand_img" />
  5011.                                     <span>SigMod V${version} by Cursed</span>
  5012.                                 </div>
  5013.                                 <span>Thanks to</span>
  5014.                                 <ul class="brand_credits">
  5015. 									<li>Jb</li>
  5016. 									<li>Black</li>
  5017. 									<li>8y8x</li>
  5018. 									<li>Dreamz</li>
  5019. 									<li>Ultra</li>
  5020. 									<li>Xaris</li>
  5021. 									<li>Benzofury</li>
  5022. 								</ul>
  5023.                                 <p>for contributing to the mod’s evolution into what it is today.</p>
  5024.  
  5025. 								<div class="sigmod-community">
  5026. 									<div class="community-header">
  5027. 										Community
  5028. 									</div>
  5029. 									<div class="flex">
  5030. 										<div class="community-discord-logo">
  5031. 											<svg width="31" height="30" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top: 3px;">
  5032. 												<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>
  5033. 											</svg>
  5034. 										</div>
  5035. 										<div class="community-discord">
  5036. 											<a href="https://dsc.gg/sigmodz" target="_blank">dsc.gg/sigmodz</a>
  5037. 										</div>
  5038. 									</div>
  5039. 								</div>
  5040.                                 <div>
  5041.                                    Install <a href="https://greasyfork.org/scripts/483587-sigmally-fixes-v2" target="_blank">Sigmally Fixes</a> for better performance!
  5042.                                 </div>
  5043.  
  5044.                                 <div class="mt-auto flex f-column g-10">
  5045. 									<div class="brand_yt">
  5046. 										<div class="yt_wrapper" onclick="window.open('https://www.youtube.com/@sigmallyCursed')">
  5047. 											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="26" height="26">
  5048. 												<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>
  5049. 											</svg>
  5050. 											<span style="font-size: 16px;">Cursed</span>
  5051. 										</div>
  5052. 										<div class="yt_wrapper" onclick="window.open('https://www.youtube.com/@sigmally')">
  5053. 											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="26" height="26">
  5054. 												<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>
  5055. 											</svg>
  5056. 											<span style="font-size: 16px;">Sigmally</span>
  5057. 										</div>
  5058. 									</div>
  5059. 									<div class="w-100 centerXY">
  5060. 										<div class="justify-sb" style="width: 50%;">
  5061. 											<a href="https://mod.czrsd.com/" target="_blank">Website</a>
  5062. 											<a href="https://mod.czrsd.com/changelog" target="_blank">Changelog</a>
  5063. 											<a href="https://mod.czrsd.com/tos" target="_blank">Terms of Service</a>
  5064. 										</div>
  5065. 									</div>
  5066. 								</div>
  5067.                             </div>
  5068.                         </div>
  5069.                     </div>
  5070.                 </div>
  5071.             `;
  5072.             document.body.append(mod_menu);
  5073.  
  5074.             const styleTag = document.createElement('style');
  5075.             styleTag.innerHTML = this.style;
  5076.             document.head.append(styleTag);
  5077.  
  5078.             this.getSettings();
  5079.             this.smallMods();
  5080.  
  5081.             mod_menu.addEventListener('click', (event) => {
  5082.                 if (event.target.closest('.mod_menu_wrapper')) return;
  5083.  
  5084.                 mod_menu.style.opacity = 0;
  5085.                 setTimeout(() => {
  5086.                     mod_menu.style.display = 'none';
  5087.                 }, 300);
  5088.             });
  5089.  
  5090.             function openModTab(tabId) {
  5091.                 const allTabs = document.getElementsByClassName('mod_tab');
  5092.                 const allTabButtons = document.querySelectorAll('.mod_nav_btn');
  5093.  
  5094.                 for (const tab of allTabs) {
  5095.                     tab.style.opacity = 0;
  5096.                     setTimeout(() => {
  5097.                         tab.style.display = 'none';
  5098.                     }, 200);
  5099.                 }
  5100.  
  5101.                 allTabButtons.forEach((tabBtn) =>
  5102.                                       tabBtn.classList.remove('mod_selected')
  5103.                                      );
  5104.  
  5105.                 if (tabId === 'mod_gallery') {
  5106.                     mods.updateGallery();
  5107.                 }
  5108.  
  5109.                 const selectedTab = byId(tabId);
  5110.                 setTimeout(() => {
  5111.                     selectedTab.style.display = 'flex';
  5112.                     setTimeout(() => {
  5113.                         selectedTab.style.opacity = 1;
  5114.                     }, 10);
  5115.                 }, 200);
  5116.                 this.id && this.classList.add('mod_selected');
  5117.             }
  5118.  
  5119.             window.openModTab = openModTab;
  5120.  
  5121.             document.querySelectorAll('.mod_nav_btn').forEach((tabBtn) => {
  5122.                 tabBtn.addEventListener('click', function () {
  5123.                     openModTab.call(
  5124.                         this,
  5125.                         this.id.replace('tab_', 'mod_').replace('_btn', '')
  5126.                     );
  5127.                 });
  5128.             });
  5129.  
  5130.             const openMenu = document.querySelectorAll(
  5131.                 '#clans_and_settings button'
  5132.             )[1];
  5133.             openMenu.removeAttribute('onclick');
  5134.             openMenu.addEventListener('click', () => {
  5135.                 mod_menu.style.display = 'flex';
  5136.                 setTimeout(() => {
  5137.                     mod_menu.style.opacity = 1;
  5138.                 }, 10);
  5139.             });
  5140.  
  5141.             const closeModal = byId('closeBtn');
  5142.             closeModal.addEventListener('click', () => {
  5143.                 mod_menu.style.opacity = 0;
  5144.                 setTimeout(() => {
  5145.                     mod_menu.style.display = 'none';
  5146.                 }, 300);
  5147.             });
  5148.  
  5149.             const fontSelectContainer = document.querySelector(
  5150.                 '#font-select-container'
  5151.             );
  5152.  
  5153.             try {
  5154.                 const fonts = await this.getGoogleFonts();
  5155.  
  5156.                 const { container: selectElement, selectButton } =
  5157.                       this.render_sm_select(
  5158.                           'Select Font',
  5159.                           fonts,
  5160.                           { width: '200px' },
  5161.                           modSettings.game.font
  5162.                       );
  5163.  
  5164.                 const resetFont = document.createElement('button');
  5165.                 resetFont.classList.add('resetButton');
  5166.  
  5167.                 resetFont.addEventListener('click', () => {
  5168.                     if (modSettings.game.font === 'Ubuntu') return;
  5169.  
  5170.                     modSettings.game.font = 'Ubuntu';
  5171.                     updateStorage();
  5172.                     selectElement.value = 'Ubuntu';
  5173.  
  5174.                     // just change the text of the selectButton
  5175.                     selectButton.querySelector('span').textContent = 'Ubuntu';
  5176.                 });
  5177.  
  5178.                 const container = document.createElement('div');
  5179.                 container.classList.add('centerXY', 'g-5');
  5180.                 container.append(resetFont, selectElement);
  5181.  
  5182.                 selectElement.addEventListener('change', (e) => {
  5183.                     const font = e.detail;
  5184.                     const link = document.createElement('link');
  5185.                     link.href = `https://fonts.googleapis.com/css2?family=${font}&display=swap`;
  5186.                     link.rel = 'stylesheet';
  5187.                     document.head.appendChild(link);
  5188.  
  5189.                     modSettings.game.font = font;
  5190.                     updateStorage();
  5191.                 });
  5192.  
  5193.                 fontSelectContainer.replaceWith(container);
  5194.             } catch (e) {
  5195.                 fontSelectContainer.replaceWith(
  5196.                     "Couldn't load fonts, try again later."
  5197.                 );
  5198.                 console.error(e);
  5199.             }
  5200.  
  5201.             if (modSettings.game.font !== 'Ubuntu') {
  5202.                 const link = document.createElement('link');
  5203.                 link.href = `https://fonts.googleapis.com/css2?family=${modSettings.game.font}&display=swap`;
  5204.                 link.rel = 'stylesheet';
  5205.                 document.head.appendChild(link);
  5206.             }
  5207.  
  5208.             const macroSettings = () => {
  5209.                 const allSettingNames =
  5210.                       document.querySelectorAll('.setting-card-name');
  5211.  
  5212.                 for (const settingName of Object.values(allSettingNames)) {
  5213.                     settingName.addEventListener('click', (event) => {
  5214.                         const settingCardWrappers = document.querySelectorAll(
  5215.                             '.setting-card-wrapper'
  5216.                         );
  5217.                         const currentWrapper = Object.values(
  5218.                             settingCardWrappers
  5219.                         ).filter(
  5220.                             (wrapper) =>
  5221.                             wrapper.querySelector('.setting-card-name')
  5222.                             .textContent === settingName.textContent
  5223.                         )[0];
  5224.                         const settingParameters = currentWrapper.querySelector(
  5225.                             '.setting-parameters'
  5226.                         );
  5227.  
  5228.                         settingParameters.style.display =
  5229.                             settingParameters.style.display === 'none'
  5230.                             ? 'block'
  5231.                         : 'none';
  5232.                     });
  5233.                 }
  5234.             };
  5235.             macroSettings();
  5236.  
  5237.             const playTimerToggle = byId('playTimerToggle');
  5238.             playTimerToggle.addEventListener('change', () => {
  5239.                 modSettings.playTimer = playTimerToggle.checked;
  5240.                 updateStorage();
  5241.             });
  5242.  
  5243.             const mouseTrackerToggle = byId('mouseTrackerToggle');
  5244.             mouseTrackerToggle.addEventListener('change', () => {
  5245.                 modSettings.mouseTracker = mouseTrackerToggle.checked;
  5246.                 updateStorage();
  5247.             });
  5248.  
  5249.             const macroSpeed = byId('macroSpeed');
  5250.             const macroSpeedText = byId('macroSpeedText');
  5251.  
  5252.             macroSpeed.addEventListener('input', () => {
  5253.                 modSettings.macros.feedSpeed = macroSpeed.value;
  5254.                 macroSpeedText.textContent = `${modSettings.macros.feedSpeed.toString()}ms`;
  5255.                 updateStorage();
  5256.             });
  5257.  
  5258.             // Reset settings - Mod
  5259.             const resetModSettings = byId('resetModSettings');
  5260.             resetModSettings.addEventListener('click', () => {
  5261.                 if (
  5262.                     confirm(
  5263.                         'Are you sure you want to reset the mod settings? A reload is required.'
  5264.                     )
  5265.                 ) {
  5266.                     this.removeStorage(storageName);
  5267.                     location.reload();
  5268.                 }
  5269.             });
  5270.  
  5271.             // Reset settings - Game
  5272.             const resetGameSettings = byId('resetGameSettings');
  5273.             resetGameSettings.addEventListener('click', () => {
  5274.                 if (
  5275.                     confirm(
  5276.                         'Are you sure you want to reset the game settings? Your nick and more settings will be lost. A reload is required.'
  5277.                     )
  5278.                 ) {
  5279.                     window.settings.gameSettings = null;
  5280.                     this.removeStorage('settings');
  5281.                     location.reload();
  5282.                 }
  5283.             });
  5284.  
  5285.             // EventListeners for auth buttons
  5286.             const createAccountBtn = byId('createAccount');
  5287.             const loginBtn = byId('login');
  5288.  
  5289.             createAccountBtn.addEventListener('click', () => {
  5290.                 this.createSignInWrapper(false);
  5291.             });
  5292.             loginBtn.addEventListener('click', () => {
  5293.                 this.createSignInWrapper(true);
  5294.             });
  5295.         },
  5296.  
  5297.         render_sm_select(label, items, style = {}, defaultValue) {
  5298.             const createElement = (tag, styles, text = '') => {
  5299.                 const el = document.createElement(tag);
  5300.                 el.textContent = text;
  5301.                 Object.assign(el.style, styles);
  5302.                 return el;
  5303.             };
  5304.  
  5305.             const defaultcontainerStyles = {
  5306.                 position: 'relative',
  5307.                 display: 'inline-block',
  5308.             };
  5309.  
  5310.             const container = createElement('div', {
  5311.                 ...defaultcontainerStyles,
  5312.                 ...style,
  5313.             });
  5314.  
  5315.             const selectButton = document.createElement('div');
  5316.             selectButton.style.cssText =
  5317.                 '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;';
  5318.  
  5319.             selectButton.innerHTML = `
  5320.                <span>${label}</span>
  5321.                <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#000000" width="20">
  5322.                  <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>
  5323.                </svg>
  5324.             `;
  5325.  
  5326.             if (defaultValue && items.includes(defaultValue)) {
  5327.                 selectButton.innerHTML = `<span>${defaultValue}</span> ${
  5328.                 selectButton.innerHTML.split('</svg>')[1]
  5329.             }`;
  5330.             }
  5331.  
  5332.             container.appendChild(selectButton);
  5333.  
  5334.             const dropdown = createElement('div', {
  5335.                 display: 'none',
  5336.                 position: 'absolute',
  5337.                 background: '#111',
  5338.                 color: '#fafafa',
  5339.                 borderRadius: '0 0 10px 10px',
  5340.                 padding: '5px 0',
  5341.                 zIndex: '999999',
  5342.                 maxHeight: '200px',
  5343.                 overflowY: 'auto',
  5344.             });
  5345.  
  5346.             const searchBox = createElement('input', {
  5347.                 width: '100%',
  5348.                 padding: '5px',
  5349.                 marginBottom: '5px',
  5350.                 background: '#222',
  5351.                 border: 'none',
  5352.                 color: '#fff',
  5353.             });
  5354.             searchBox.placeholder = 'Search...';
  5355.  
  5356.             dropdown.append(searchBox);
  5357.  
  5358.             items.forEach((item) => {
  5359.                 const option = createElement(
  5360.                     'div',
  5361.                     { padding: '5px', cursor: 'pointer' },
  5362.                     item
  5363.                 );
  5364.                 option.onclick = () => {
  5365.                     selectButton.innerHTML = `
  5366.                         <span>${item}</span>
  5367.                         <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#000000" width="20">
  5368.                           <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>
  5369.                         </svg>`;
  5370.                     dropdown.style.display = 'none';
  5371.                     container.dispatchEvent(
  5372.                         new CustomEvent('change', { detail: item })
  5373.                     );
  5374.                 };
  5375.                 option.onmouseover = (e) =>
  5376.                 (e.target.style.background = '#555');
  5377.                 option.onmouseout = (e) =>
  5378.                 (e.target.style.background = 'transparent');
  5379.                 dropdown.append(option);
  5380.             });
  5381.  
  5382.             container.append(dropdown);
  5383.  
  5384.             selectButton.onclick = () => {
  5385.                 dropdown.style.display =
  5386.                     dropdown.style.display === 'none' ? 'block' : 'none';
  5387.             };
  5388.  
  5389.             document.onclick = (e) => {
  5390.                 if (!container.contains(e.target))
  5391.                     dropdown.style.display = 'none';
  5392.             };
  5393.  
  5394.             searchBox.addEventListener('input', () => {
  5395.                 const filter = searchBox.value.toLowerCase();
  5396.                 Array.from(dropdown.children)
  5397.                     .slice(1)
  5398.                     .forEach((item) => {
  5399.                     item.style.display = item.textContent
  5400.                         .toLowerCase()
  5401.                         .includes(filter)
  5402.                         ? 'block'
  5403.                     : 'none';
  5404.                 });
  5405.             });
  5406.  
  5407.             return { container, selectButton };
  5408.         },
  5409.  
  5410.         setProfile(user) {
  5411.             const img = byId('my-profile-img');
  5412.             const name = byId('my-profile-name');
  5413.             const role = byId('my-profile-role');
  5414.             const bioText = byId('my-profile-bio');
  5415.             const badges = byId('my-profile-badges');
  5416.  
  5417.             const bio = user.bio ? user.bio : 'No bio.';
  5418.  
  5419.             img.src = user.imageURL;
  5420.             name.innerText = user.username;
  5421.             role.innerText = user.role;
  5422.             bioText.innerHTML = bio;
  5423.             badges.innerHTML =
  5424.                 user.badges && user.badges.length > 0
  5425.                 ? user.badges
  5426.                 .map(
  5427.                 (badge) =>
  5428.                 `<span class="mod_badge">${badge}</span>`
  5429.             )
  5430.                 .join('')
  5431.             : '<span>User has no badges.</span>';
  5432.  
  5433.             role.classList.add(`${user.role}_role`);
  5434.         },
  5435.  
  5436.         getSettings() {
  5437.             const mod_qaccess = document.querySelector('#mod_qaccess');
  5438.             const settingsGrid = document.querySelector(
  5439.                 '#settings > .checkbox-grid'
  5440.             );
  5441.             const settingsNames =
  5442.                   settingsGrid.querySelectorAll('label:not([class])');
  5443.             const inputs = settingsGrid.querySelectorAll('input');
  5444.  
  5445.             inputs.forEach((checkbox, index) => {
  5446.                 if (
  5447.                     checkbox.id === 'showMinimap' ||
  5448.                     checkbox.id === 'darkTheme'
  5449.                 )
  5450.                     return;
  5451.                 const modrow = document.createElement('div');
  5452.                 modrow.classList.add('justify-sb', 'p-2');
  5453.  
  5454.                 if (
  5455.                     checkbox.id === 'showChat' ||
  5456.                     checkbox.id === 'showPosition' ||
  5457.                     checkbox.id === 'showNames' ||
  5458.                     checkbox.id === 'showSkins'
  5459.                 ) {
  5460.                     modrow.style.display = 'none';
  5461.                 }
  5462.  
  5463.                 modrow.innerHTML = `
  5464.                     <span>${settingsNames[index].textContent}</span>
  5465.                     <div class="modCheckbox" id="${checkbox.id}_wrapper"></div>
  5466.                 `;
  5467.                 mod_qaccess.append(modrow);
  5468.  
  5469.                 const cbWrapper = byId(`${checkbox.id}_wrapper`);
  5470.                 cbWrapper.appendChild(checkbox);
  5471.  
  5472.                 cbWrapper.appendChild(
  5473.                     Object.assign(document.createElement('label'), {
  5474.                         classList: ['cbx'],
  5475.                         htmlFor: checkbox.id,
  5476.                     })
  5477.                 );
  5478.             });
  5479.         },
  5480.  
  5481.         themes() {
  5482.             const elements = [
  5483.                 '#menu',
  5484.                 '#title',
  5485.                 '.top-users',
  5486.                 '#left-menu',
  5487.                 '.menu-links',
  5488.                 '.menu--stats-mode',
  5489.                 '#left_ad_block',
  5490.                 '#ad_bottom',
  5491.                 '.ad-block',
  5492.                 '#left_ad_block > .right-menu',
  5493.                 '#text-block > .right-menu',
  5494.                 '#sigma-pass .connecting__content',
  5495.                 '#sigma-status',
  5496.                 '.alert',
  5497.             ];
  5498.  
  5499.             const customTextElements = [
  5500.                 '#challenge-coins .alert-heading',
  5501.                 '#sigma-pass h3',
  5502.                 '.alert *',
  5503.             ];
  5504.  
  5505.             let checkInterval;
  5506.             const appliedElements = new Set();
  5507.  
  5508.             window.themeElements = elements;
  5509.  
  5510.             const themeEditor = document.createElement('div');
  5511.             themeEditor.classList.add('themeEditor');
  5512.             themeEditor.style.display = 'none';
  5513.  
  5514.             themeEditor.innerHTML = `
  5515.                 <div class="theme_editor_header">
  5516.                     <h3>Theme Editor</h3>
  5517.                     <button class="btn closeBtn" id="closeThemeEditor">
  5518.                         <svg width="22" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  5519.                             <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>
  5520.                         </svg>
  5521.                     </button>
  5522.                 </div>
  5523.                 <hr />
  5524.                 <main class="theme_editor_content">
  5525.                     <div class="centerXY" style="justify-content: flex-end;gap: 10px">
  5526.                         <span class="text">Select Theme Type: </span>
  5527.                         <select class="form-control" style="background: #222; color: #fff; width: 150px" id="theme-type-select">
  5528.                             <option>Static Color</option>
  5529.                             <option>Gradient</option>
  5530.                             <option>Image / Gif</option>
  5531.                         </select>
  5532.                     </div>
  5533.  
  5534.                     <div id="theme_editor_color" class="theme-editor-tab">
  5535.                         <div class="centerXY">
  5536.                             <label for="theme-editor-bgcolorinput" class="text">Background color:</label>
  5537.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-bgcolorinput"/>
  5538.                         </div>
  5539.                         <div class="centerXY">
  5540.                             <label for="theme-editor-colorinput" class="text">Text color:</label>
  5541.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-colorinput"/>
  5542.                         </div>
  5543.                         <div style="background-color: #000000" class="themes_preview" id="color_preview">
  5544.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5545.                         </div>
  5546.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5547.                             <input type="text" class="form-control" style="background: #222; color: #fff;" maxlength="15" placeholder="Theme name..." id="colorThemeName"/>
  5548.                             <button class="btn btn-success" id="saveColorTheme">Save</button>
  5549.                         </div>
  5550.                     </div>
  5551.  
  5552.  
  5553.                     <div id="theme_editor_gradient" class="theme-editor-tab" style="display: none;">
  5554.                         <div class="centerXY">
  5555.                             <label for="theme-editor-gcolor1" class="text">Color 1:</label>
  5556.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-gcolor1"/>
  5557.                         </div>
  5558.                         <div class="centerXY">
  5559.                             <label for="theme-editor-g_color" class="text">Color 2:</label>
  5560.                             <input type="color" value="#ffffff" class="colorInput whiteBorder_colorInput" id="theme-editor-g_color"/>
  5561.                         </div>
  5562.                         <div class="centerXY">
  5563.                             <label for="theme-editor-gcolor2" class="text">Text Color:</label>
  5564.                             <input type="color" value="#ffffff" class="colorInput whiteBorder_colorInput" id="theme-editor-gcolor2"/>
  5565.                         </div>
  5566.  
  5567.                         <div class="centerXY" style="gap: 10px">
  5568.                             <label for="gradient-type" class="text">Gradient Type:</label>
  5569.                             <select id="gradient-type" class="form-control" style="background: #222; color: #fff; width: 120px;">
  5570.                                 <option value="linear">Linear</option>
  5571.                                 <option value="radial">Radial</option>
  5572.                             </select>
  5573.                         </div>
  5574.  
  5575.                         <div id="theme-editor-gradient_angle" class="centerY" style="gap: 10px; width: 100%">
  5576.                             <label for="g_angle" class="text" id="gradient_angle_text" style="width: 115px;">Angle (0deg):</label>
  5577.                             <input type="range" id="g_angle" value="0" min="0" max="360">
  5578.                         </div>
  5579.  
  5580.                         <div style="background: linear-gradient(0deg, #000, #fff)" class="themes_preview" id="gradient_preview">
  5581.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5582.                         </div>
  5583.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5584.                             <input type="text" class="form-control" style="background: #222; color: #fff;" placeholder="Theme name..." id="gradientThemeName"/>
  5585.                             <button class="btn btn-success" id="saveGradientTheme">Save</button>
  5586.                         </div>
  5587.                     </div>
  5588.  
  5589.                     <div id="theme_editor_image" class="theme-editor-tab" style="display: none">
  5590.                         <div class="centerXY">
  5591.                             <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"/>
  5592.                         </div>
  5593.                         <div class="centerXY" style="margin: 5px; gap: 5px;">
  5594.                             <label for="theme-editor-textcolorImage" class="text">Text Color: </label>
  5595.                             <input type="color" class="colorInput whiteBorder_colorInput" value="#ffffff" id="theme-editor-textcolorImage"/>
  5596.                         </div>
  5597.  
  5598.                         <div style="background: url('https://i.ibb.co/k6hn4v0/Galaxy-Example.png'); background-position: center; background-size: cover;" class="themes_preview" id="image_preview">
  5599.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5600.                         </div>
  5601.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5602.                             <input type="text" class="form-control" style="background: #222; color: #fff;" placeholder="Theme name..." id="imageThemeName"/>
  5603.                             <button class="btn btn-success" id="saveImageTheme">Save</button>
  5604.                         </div>
  5605.                     </div>
  5606.                 </main>
  5607.             `;
  5608.  
  5609.             document.body.append(themeEditor);
  5610.  
  5611.             setTimeout(() => {
  5612.                 document
  5613.                     .querySelectorAll('.stats-btn__share-btn')[1]
  5614.                     .querySelector('rect')
  5615.                     .remove();
  5616.  
  5617.                 const themeTypeSelect = byId('theme-type-select');
  5618.                 const colorTab = byId('theme_editor_color');
  5619.                 const gradientTab = byId('theme_editor_gradient');
  5620.                 const imageTab = byId('theme_editor_image');
  5621.                 const gradientAngleDiv = byId('theme-editor-gradient_angle');
  5622.  
  5623.                 themeTypeSelect.addEventListener('change', function () {
  5624.                     const selectedOption = themeTypeSelect.value;
  5625.                     switch (selectedOption) {
  5626.                         case 'Static Color':
  5627.                             colorTab.style.display = 'flex';
  5628.                             gradientTab.style.display = 'none';
  5629.                             imageTab.style.display = 'none';
  5630.                             break;
  5631.                         case 'Gradient':
  5632.                             colorTab.style.display = 'none';
  5633.                             gradientTab.style.display = 'flex';
  5634.                             imageTab.style.display = 'none';
  5635.                             break;
  5636.                         case 'Image / Gif':
  5637.                             colorTab.style.display = 'none';
  5638.                             gradientTab.style.display = 'none';
  5639.                             imageTab.style.display = 'flex';
  5640.                             break;
  5641.                         default:
  5642.                             colorTab.style.display = 'flex';
  5643.                             gradientTab.style.display = 'none';
  5644.                             imageTab.style.display = 'none';
  5645.                     }
  5646.                 });
  5647.  
  5648.                 const colorInputs = document.querySelectorAll(
  5649.                     '#theme_editor_color .colorInput'
  5650.                 );
  5651.                 colorInputs.forEach((input) => {
  5652.                     input.addEventListener('input', function () {
  5653.                         const bgColorInput = byId(
  5654.                             'theme-editor-bgcolorinput'
  5655.                         ).value;
  5656.                         const textColorInput = byId(
  5657.                             'theme-editor-colorinput'
  5658.                         ).value;
  5659.  
  5660.                         applyColorTheme(bgColorInput, textColorInput);
  5661.                     });
  5662.                 });
  5663.  
  5664.                 const gradientInputs = document.querySelectorAll(
  5665.                     '#theme_editor_gradient .colorInput'
  5666.                 );
  5667.                 gradientInputs.forEach((input) => {
  5668.                     input.addEventListener('input', function () {
  5669.                         const gColor1 = byId('theme-editor-gcolor1').value;
  5670.                         const gColor2 = byId('theme-editor-g_color').value;
  5671.                         const gTextColor = byId('theme-editor-gcolor2').value;
  5672.                         const gAngle = byId('g_angle').value;
  5673.                         const gradientType = byId('gradient-type').value;
  5674.  
  5675.                         applyGradientTheme(
  5676.                             gColor1,
  5677.                             gColor2,
  5678.                             gTextColor,
  5679.                             gAngle,
  5680.                             gradientType
  5681.                         );
  5682.                     });
  5683.                 });
  5684.  
  5685.                 const imageInputs = document.querySelectorAll(
  5686.                     '#theme_editor_image .colorInput'
  5687.                 );
  5688.                 imageInputs.forEach((input) => {
  5689.                     input.addEventListener('input', function () {
  5690.                         const imageLinkInput = byId(
  5691.                             'theme-editor-imagelink'
  5692.                         ).value;
  5693.                         const textColorImageInput = byId(
  5694.                             'theme-editor-textcolorImage'
  5695.                         ).value;
  5696.  
  5697.                         let img;
  5698.                         if (imageLinkInput === '') {
  5699.                             img = 'https://i.ibb.co/k6hn4v0/Galaxy-Example.png';
  5700.                         } else {
  5701.                             img = imageLinkInput;
  5702.                         }
  5703.                         applyImageTheme(img, textColorImageInput);
  5704.                     });
  5705.                 });
  5706.                 const image_preview = byId('image_preview');
  5707.                 const image_link = byId('theme-editor-imagelink');
  5708.  
  5709.                 let isWriting = false;
  5710.                 let timeoutId;
  5711.  
  5712.                 image_link.addEventListener('input', () => {
  5713.                     if (!isWriting) {
  5714.                         isWriting = true;
  5715.                     } else {
  5716.                         clearTimeout(timeoutId);
  5717.                     }
  5718.  
  5719.                     timeoutId = setTimeout(() => {
  5720.                         const imageLinkInput = image_link.value;
  5721.                         const textColorImageInput = byId(
  5722.                             'theme-editor-textcolorImage'
  5723.                         ).value;
  5724.  
  5725.                         let img;
  5726.                         if (imageLinkInput === '') {
  5727.                             img = 'https://i.ibb.co/k6hn4v0/Galaxy-Example.png';
  5728.                         } else {
  5729.                             img = imageLinkInput;
  5730.                         }
  5731.  
  5732.                         applyImageTheme(img, textColorImageInput);
  5733.                         isWriting = false;
  5734.                     }, 1000);
  5735.                 });
  5736.  
  5737.                 const gradientTypeSelect = byId('gradient-type');
  5738.                 const angleInput = byId('g_angle');
  5739.  
  5740.                 gradientTypeSelect.addEventListener('change', function () {
  5741.                     const selectedType = gradientTypeSelect.value;
  5742.                     gradientAngleDiv.style.display =
  5743.                         selectedType === 'linear' ? 'flex' : 'none';
  5744.  
  5745.                     const gColor1 = byId('theme-editor-gcolor1').value;
  5746.                     const gColor2 = byId('theme-editor-g_color').value;
  5747.                     const gTextColor = byId('theme-editor-gcolor2').value;
  5748.                     const gAngle = byId('g_angle').value;
  5749.  
  5750.                     applyGradientTheme(
  5751.                         gColor1,
  5752.                         gColor2,
  5753.                         gTextColor,
  5754.                         gAngle,
  5755.                         selectedType
  5756.                     );
  5757.                 });
  5758.  
  5759.                 angleInput.addEventListener('input', function () {
  5760.                     const gradient_angle_text = byId('gradient_angle_text');
  5761.                     gradient_angle_text.innerText = `Angle (${angleInput.value}deg): `;
  5762.                     const gColor1 = byId('theme-editor-gcolor1').value;
  5763.                     const gColor2 = byId('theme-editor-g_color').value;
  5764.                     const gTextColor = byId('theme-editor-gcolor2').value;
  5765.                     const gAngle = byId('g_angle').value;
  5766.                     const gradientType = byId('gradient-type').value;
  5767.  
  5768.                     applyGradientTheme(
  5769.                         gColor1,
  5770.                         gColor2,
  5771.                         gTextColor,
  5772.                         gAngle,
  5773.                         gradientType
  5774.                     );
  5775.                 });
  5776.  
  5777.                 function applyColorTheme(bgColor, textColor) {
  5778.                     const previewDivs = document.querySelectorAll(
  5779.                         '#theme_editor_color .themes_preview'
  5780.                     );
  5781.                     previewDivs.forEach((previewDiv) => {
  5782.                         previewDiv.style.backgroundColor = bgColor;
  5783.                         const textSpan = previewDiv.querySelector('span.text');
  5784.                         textSpan.style.color = textColor;
  5785.                     });
  5786.                 }
  5787.  
  5788.                 function applyGradientTheme(
  5789.                 gColor1,
  5790.                  gColor2,
  5791.                  gTextColor,
  5792.                  gAngle,
  5793.                  gradientType
  5794.                 ) {
  5795.                     const previewDivs = document.querySelectorAll(
  5796.                         '#theme_editor_gradient .themes_preview'
  5797.                     );
  5798.                     previewDivs.forEach((previewDiv) => {
  5799.                         const gradient =
  5800.                               gradientType === 'linear'
  5801.                         ? `linear-gradient(${gAngle}deg, ${gColor1}, ${gColor2})`
  5802.                         : `radial-gradient(circle, ${gColor1}, ${gColor2})`;
  5803.                         previewDiv.style.background = gradient;
  5804.                         const textSpan = previewDiv.querySelector('span.text');
  5805.                         textSpan.style.color = gTextColor;
  5806.                     });
  5807.                 }
  5808.  
  5809.                 function applyImageTheme(imageLink, textColor) {
  5810.                     const previewDivs = document.querySelectorAll(
  5811.                         '#theme_editor_image .themes_preview'
  5812.                     );
  5813.                     previewDivs.forEach((previewDiv) => {
  5814.                         previewDiv.style.backgroundImage = `url('${imageLink}')`;
  5815.                         const textSpan = previewDiv.querySelector('span.text');
  5816.                         textSpan.style.color = textColor;
  5817.                     });
  5818.                 }
  5819.  
  5820.                 const createTheme = byId('createTheme');
  5821.                 createTheme.addEventListener('click', () => {
  5822.                     themeEditor.style.display = 'block';
  5823.                 });
  5824.  
  5825.                 const closeThemeEditor = byId('closeThemeEditor');
  5826.                 closeThemeEditor.addEventListener('click', () => {
  5827.                     themeEditor.style.display = 'none';
  5828.                 });
  5829.  
  5830.                 let themesDiv = byId('themes');
  5831.  
  5832.                 const saveTheme = (type) => {
  5833.                     const name = byId(`${type}ThemeName`).value;
  5834.                     if (!name) return;
  5835.  
  5836.                     let background, text;
  5837.                     if (type === 'color') {
  5838.                         background = byId('theme-editor-bgcolorinput').value;
  5839.                         text = byId('theme-editor-colorinput').value;
  5840.                     } else if (type === 'gradient') {
  5841.                         const gColor1 = byId('theme-editor-gcolor1').value;
  5842.                         const gColor2 = byId('theme-editor-g_color').value;
  5843.                         text = byId('theme-editor-gcolor2').value;
  5844.                         const gAngle = byId('g_angle').value;
  5845.                         const gradientType = byId('gradient-type').value;
  5846.                         background = gradientType === 'linear'
  5847.                             ? `linear-gradient(${gAngle}deg, ${gColor1}, ${gColor2})`
  5848.                         : `radial-gradient(circle, ${gColor1}, ${gColor2})`;
  5849.                     } else if (type === 'image') {
  5850.                         background = byId('theme-editor-imagelink').value;
  5851.                         text = byId('theme-editor-textcolorImage').value;
  5852.                         if (!background) return;
  5853.                     }
  5854.  
  5855.                     const theme = { name, background, text };
  5856.                     const themeCard = document.createElement('div');
  5857.                     themeCard.classList.add('theme');
  5858.                     themeCard.innerHTML = `
  5859.                         <div class="themeContent" style="background: ${background.includes('http') ? `url(${theme.preview || background})` : background}; background-size: cover; background-position: center"></div>
  5860.                         <div class="themeName text" style="color: #fff">${name}</div>
  5861.                     `;
  5862.  
  5863.                     themeCard.addEventListener('click', () => toggleTheme(theme));
  5864.                     themeCard.addEventListener('contextmenu', (ev) => {
  5865.                         ev.preventDefault();
  5866.                         if (confirm('Do you want to delete this Theme?')) {
  5867.                             themeCard.remove();
  5868.                             const index = modSettings.themes.custom.findIndex(t => t.name === name);
  5869.                             if (index !== -1) {
  5870.                                 modSettings.themes.custom.splice(index, 1);
  5871.                                 updateStorage();
  5872.                             }
  5873.                         }
  5874.                     });
  5875.  
  5876.                     themesDiv.appendChild(themeCard);
  5877.                     modSettings.themes.custom.push(theme);
  5878.                     updateStorage();
  5879.                     themeEditor.style.display = 'none';
  5880.                     themesDiv.scrollTop = themesDiv.scrollHeight;
  5881.                 };
  5882.  
  5883.                 byId('saveColorTheme').addEventListener('click', () => saveTheme('color'));
  5884.                 byId('saveGradientTheme').addEventListener('click', () => saveTheme('gradient'));
  5885.                 byId('saveImageTheme').addEventListener('click', () => saveTheme('image'));
  5886.             });
  5887.  
  5888.             const b_inner = document.querySelector('.body__inner');
  5889.             let bodyColorElements = b_inner.querySelectorAll(
  5890.                 '.body__inner > :not(.body__inner), #s-skin-select-icon-text'
  5891.             );
  5892.  
  5893.             const toggleColor = (element, background, text) => {
  5894.                 let image = `url("${background}")`;
  5895.                 if (background.includes('http')) {
  5896.                     element.style.background = image;
  5897.                     element.style.backgroundPosition = 'center';
  5898.                     element.style.backgroundSize = 'cover';
  5899.                     element.style.backgroundRepeat = 'no-repeat';
  5900.                 } else {
  5901.                     element.style.background = background;
  5902.                     element.style.backgroundRepeat = 'no-repeat';
  5903.                 }
  5904.                 element.style.color = text;
  5905.             };
  5906.  
  5907.             const openSVG = document.querySelector(
  5908.                 '#clans_and_settings > Button:nth-of-type(2) > svg'
  5909.             );
  5910.             const openSVGPath = openSVG.querySelector('path');
  5911.             openSVG.setAttribute('width', '36');
  5912.             openSVG.setAttribute('height', '36');
  5913.  
  5914.             const applyThemeToElement = (el, theme) => {
  5915.                 if (el.matches('#title')) {
  5916.                     el.style.color = theme.text;
  5917.                 } else {
  5918.                     toggleColor(el, theme.background, theme.text);
  5919.                 }
  5920.                 appliedElements.add(el);
  5921.             };
  5922.  
  5923.             const toggleTheme = (theme) => {
  5924.                 try {
  5925.                     if (checkInterval) clearInterval(checkInterval);
  5926.                     appliedElements.clear();
  5927.  
  5928.                     const applyTheme = () => {
  5929.                         let allApplied = true;
  5930.  
  5931.                         elements.forEach((selector) => {
  5932.                             const elements =
  5933.                                   document.querySelectorAll(selector);
  5934.                             elements.forEach((el) => {
  5935.                                 if (el && !appliedElements.has(el)) {
  5936.                                     applyThemeToElement(el, theme);
  5937.                                     allApplied = false;
  5938.                                 }
  5939.                             });
  5940.                         });
  5941.  
  5942.                         customTextElements.forEach((qs) => {
  5943.                             document.querySelectorAll(qs).forEach((el) => {
  5944.                                 if (!appliedElements.has(el)) {
  5945.                                     el.style.setProperty(
  5946.                                         'color',
  5947.                                         theme.text,
  5948.                                         'important'
  5949.                                     );
  5950.                                     appliedElements.add(el);
  5951.                                     allApplied = false;
  5952.                                 }
  5953.                             });
  5954.                         });
  5955.  
  5956.                         bodyColorElements.forEach((el) => {
  5957.                             if (!appliedElements.has(el)) {
  5958.                                 el.style.color = theme.text;
  5959.                                 appliedElements.add(el);
  5960.                                 allApplied = false;
  5961.                             }
  5962.                         });
  5963.  
  5964.                         if (allApplied) {
  5965.                             clearInterval(checkInterval);
  5966.                             return;
  5967.                         }
  5968.  
  5969.                         const isBright = (color) => {
  5970.                             if (!color.startsWith('#') || color.length !== 7)
  5971.                                 return false;
  5972.                             const r = parseInt(color.slice(1, 3), 16);
  5973.                             const g = parseInt(color.slice(3, 5), 16);
  5974.                             const b = parseInt(color.slice(5, 7), 16);
  5975.                             return r * 0.299 + g * 0.587 + b * 0.114 > 186;
  5976.                         };
  5977.  
  5978.                         openSVGPath.setAttribute(
  5979.                             'fill',
  5980.                             isBright(theme.text) ? theme.text : '#222'
  5981.                         );
  5982.  
  5983.                         modSettings.themes.current = theme.name;
  5984.                         updateStorage();
  5985.                     };
  5986.  
  5987.                     checkInterval = setInterval(applyTheme, 100);
  5988.                 } catch (e) {
  5989.                     console.error(e);
  5990.                 }
  5991.             };
  5992.  
  5993.             const themes = (window.themes = {
  5994.                 defaults: [
  5995.                     {
  5996.                         name: 'Dark',
  5997.                         background: '#151515',
  5998.                         text: '#FFFFFF',
  5999.                     },
  6000.                     {
  6001.                         name: 'White',
  6002.                         background: '#ffffff',
  6003.                         text: '#000000',
  6004.                     },
  6005.                     {
  6006.                         name: 'Transparent',
  6007.                         background: 'rgba(0, 0, 0,0)',
  6008.                         text: '#FFFFFF',
  6009.                     },
  6010.                 ],
  6011.                 orderly: [
  6012.                     {
  6013.                         name: 'THC',
  6014.                         background: 'linear-gradient(160deg, #9BEC7A, #117500)',
  6015.                         text: '#000000',
  6016.                     },
  6017.                     {
  6018.                         name: '4 AM',
  6019.                         background: 'linear-gradient(160deg, #8B0AE1, #111)',
  6020.                         text: '#FFFFFF',
  6021.                     },
  6022.                     {
  6023.                         name: 'OTO',
  6024.                         background: 'linear-gradient(160deg, #A20000, #050505)',
  6025.                         text: '#FFFFFF',
  6026.                     },
  6027.                     {
  6028.                         name: 'Gaming',
  6029.                         background:
  6030.                         'https://i.ibb.co/DwKkQfh/BG-1-lower-quality.jpg',
  6031.                         text: '#FFFFFF',
  6032.                     },
  6033.                     {
  6034.                         name: 'Shapes',
  6035.                         background: 'https://i.ibb.co/h8TmVyM/BG-2.png',
  6036.                         preview:
  6037.                         'https://czrsd.com/static/sigmod/themes/BG-2.jpg',
  6038.                         text: '#FFFFFF',
  6039.                     },
  6040.                     {
  6041.                         name: 'Blue',
  6042.                         background: 'https://i.ibb.co/9yQBfWj/BG-3.png',
  6043.                         preview:
  6044.                         'https://czrsd.com/static/sigmod/themes/BG-3.jpg',
  6045.                         text: '#FFFFFF',
  6046.                     },
  6047.                     {
  6048.                         name: 'Blue - 2',
  6049.                         background: 'https://i.ibb.co/7RJvNCX/BG-4.png',
  6050.                         preview:
  6051.                         'https://czrsd.com/static/sigmod/themes/BG-4.jpg',
  6052.                         text: '#FFFFFF',
  6053.                     },
  6054.                     {
  6055.                         name: 'Purple',
  6056.                         background: 'https://i.ibb.co/vxY15Tv/BG-5.png',
  6057.                         preview:
  6058.                         'https://czrsd.com/static/sigmod/themes/BG-5.jpg',
  6059.                         text: '#FFFFFF',
  6060.                     },
  6061.                     {
  6062.                         name: 'Orange Blue',
  6063.                         background: 'https://i.ibb.co/99nfFBN/BG-6.png',
  6064.                         preview:
  6065.                         'https://czrsd.com/static/sigmod/themes/BG-6.jpg',
  6066.                         text: '#FFFFFF',
  6067.                     },
  6068.                     {
  6069.                         name: 'Gradient',
  6070.                         background: 'https://i.ibb.co/hWMLwLS/BG-7.png',
  6071.                         preview:
  6072.                         'https://czrsd.com/static/sigmod/themes/BG-7.jpg',
  6073.                         text: '#FFFFFF',
  6074.                     },
  6075.                     {
  6076.                         name: 'Sky',
  6077.                         background: 'https://i.ibb.co/P4XqDFw/BG-9.png',
  6078.                         preview:
  6079.                         'https://czrsd.com/static/sigmod/themes/BG-9.jpg',
  6080.                         text: '#000000',
  6081.                     },
  6082.                     {
  6083.                         name: 'Sunset',
  6084.                         background: 'https://i.ibb.co/0BVbYHC/BG-10.png',
  6085.                         preview:
  6086.                         'https://czrsd.com/static/sigmod/themes/BG-10.jpg',
  6087.                         text: '#FFFFFF',
  6088.                     },
  6089.                     {
  6090.                         name: 'Galaxy',
  6091.                         background: 'https://i.ibb.co/MsssDKP/Galaxy.png',
  6092.                         preview:
  6093.                         'https://czrsd.com/static/sigmod/themes/Galaxy.jpg',
  6094.                         text: '#FFFFFF',
  6095.                     },
  6096.                     {
  6097.                         name: 'Planet',
  6098.                         background: 'https://i.ibb.co/KLqWM32/Planet.png',
  6099.                         preview:
  6100.                         'https://czrsd.com/static/sigmod/themes/Planet.jpg',
  6101.                         text: '#FFFFFF',
  6102.                     },
  6103.                     {
  6104.                         name: 'colorful',
  6105.                         background: 'https://i.ibb.co/VqtB3TX/colorful.png',
  6106.                         preview:
  6107.                         'https://czrsd.com/static/sigmod/themes/colorful.jpg',
  6108.                         text: '#FFFFFF',
  6109.                     },
  6110.                     {
  6111.                         name: 'Sunset - 2',
  6112.                         background: 'https://i.ibb.co/TLp2nvv/Sunset.png',
  6113.                         preview:
  6114.                         'https://czrsd.com/static/sigmod/themes/Sunset.jpg',
  6115.                         text: '#FFFFFF',
  6116.                     },
  6117.                     {
  6118.                         name: 'Epic',
  6119.                         background: 'https://i.ibb.co/kcv4tvn/Epic.png',
  6120.                         preview:
  6121.                         'https://czrsd.com/static/sigmod/themes/Epic.jpg',
  6122.                         text: '#FFFFFF',
  6123.                     },
  6124.                     {
  6125.                         name: 'Galaxy - 2',
  6126.                         background: 'https://i.ibb.co/smRs6V0/galaxy.png',
  6127.                         preview:
  6128.                         'https://czrsd.com/static/sigmod/themes/galaxy2.jpg',
  6129.                         text: '#FFFFFF',
  6130.                     },
  6131.                     {
  6132.                         name: 'Cloudy',
  6133.                         background: 'https://i.ibb.co/MCW7Bcd/cloudy.png',
  6134.                         preview:
  6135.                         'https://czrsd.com/static/sigmod/themes/cloudy.jpg',
  6136.                         text: '#000000',
  6137.                     },
  6138.                 ],
  6139.             });
  6140.  
  6141.             function createThemeCard(theme) {
  6142.                 const themeCard = document.createElement('div');
  6143.                 themeCard.classList.add('theme');
  6144.                 let themeBG;
  6145.                 if (theme.background.includes('http')) {
  6146.                     themeBG = `background: url(${
  6147.                     theme.preview || theme.background
  6148.                 })`;
  6149.                 } else {
  6150.                     themeBG = `background: ${theme.background}`;
  6151.                 }
  6152.                 themeCard.innerHTML = `
  6153.                   <div class="themeContent" style="${themeBG}; background-size: cover; background-position: center"></div>
  6154.                   <div class="themeName text" style="color: #fff">${theme.name}</div>
  6155.                 `;
  6156.  
  6157.                 themeCard.addEventListener('click', () => {
  6158.                     toggleTheme(theme);
  6159.                 });
  6160.  
  6161.                 if (modSettings.themes.custom.includes(theme)) {
  6162.                     themeCard.addEventListener(
  6163.                         'contextmenu',
  6164.                         (ev) => {
  6165.                             ev.preventDefault();
  6166.                             if (confirm('Do you want to delete this Theme?')) {
  6167.                                 themeCard.remove();
  6168.                                 const themeIndex =
  6169.                                       modSettings.themes.custom.findIndex(
  6170.                                           (addedTheme) =>
  6171.                                           addedTheme.name === theme.name
  6172.                                       );
  6173.                                 if (themeIndex !== -1) {
  6174.                                     modSettings.themes.custom.splice(
  6175.                                         themeIndex,
  6176.                                         1
  6177.                                     );
  6178.                                     updateStorage();
  6179.                                 }
  6180.                             }
  6181.                         },
  6182.                         false
  6183.                     );
  6184.                 }
  6185.  
  6186.                 return themeCard;
  6187.             }
  6188.  
  6189.             const themesContainer = byId('themes');
  6190.  
  6191.             themes.defaults.forEach((theme) => {
  6192.                 const themeCard = createThemeCard(theme);
  6193.                 themesContainer.append(themeCard);
  6194.             });
  6195.  
  6196.             const orderlyThemes = [
  6197.                 ...themes.orderly,
  6198.                 ...modSettings.themes.custom,
  6199.             ];
  6200.             orderlyThemes.sort((a, b) => a.name.localeCompare(b.name));
  6201.             orderlyThemes.forEach((theme) => {
  6202.                 const themeCard = createThemeCard(theme);
  6203.                 themesContainer.appendChild(themeCard);
  6204.             });
  6205.  
  6206.             const savedTheme = modSettings.themes.current;
  6207.             if (savedTheme) {
  6208.                 let selectedTheme;
  6209.                 selectedTheme = themes.defaults.find(
  6210.                     (theme) => theme.name === savedTheme
  6211.                 );
  6212.                 if (!selectedTheme) {
  6213.                     selectedTheme =
  6214.                         themes.orderly.find(
  6215.                         (theme) => theme.name === savedTheme
  6216.                     ) ||
  6217.                         modSettings.themes.custom.find(
  6218.                         (theme) => theme.name === savedTheme
  6219.                     );
  6220.                 }
  6221.  
  6222.                 if (selectedTheme) {
  6223.                     toggleTheme(selectedTheme);
  6224.                 }
  6225.             }
  6226.  
  6227.             const inputBorderRadius = byId('theme-inputBorderRadius');
  6228.             const menuBorderRadius = byId('theme-menuBorderRadius');
  6229.             const inputBorder = byId('theme-inputBorder');
  6230.  
  6231.             function setCSS(key, value, targets, property) {
  6232.                 modSettings.themes[key] = value;
  6233.                 targets.forEach((target) => {
  6234.                     document
  6235.                         .querySelectorAll(target)
  6236.                         .forEach((el) => (el.style[property] = value));
  6237.                 });
  6238.                 updateStorage();
  6239.             }
  6240.  
  6241.             inputBorderRadius.value = modSettings.themes.inputBorderRadius
  6242.                 ? modSettings.themes.inputBorderRadius.replace('px', '')
  6243.             : '4';
  6244.             menuBorderRadius.value = modSettings.themes.menuBorderRadius
  6245.                 ? modSettings.themes.menuBorderRadius.replace('px', '')
  6246.             : '15';
  6247.             inputBorder.checked = modSettings.themes.inputBorder
  6248.                 ? modSettings.themes.inputBorder === '1px'
  6249.             : '1px';
  6250.  
  6251.             setCSS(
  6252.                 'inputBorderRadius',
  6253.                 `${inputBorderRadius.value}px`,
  6254.                 ['.form-control'],
  6255.                 'borderRadius'
  6256.             );
  6257.             setCSS(
  6258.                 'menuBorderRadius',
  6259.                 `${menuBorderRadius.value}px`,
  6260.                 [...elements, '.text-block'],
  6261.                 'borderRadius'
  6262.             );
  6263.             setCSS(
  6264.                 'inputBorder',
  6265.                 inputBorder.checked ? '1px' : '0px',
  6266.                 ['.form-control'],
  6267.                 'borderWidth'
  6268.             );
  6269.  
  6270.             inputBorderRadius.addEventListener('input', () =>
  6271.                                                setCSS(
  6272.                 'inputBorderRadius',
  6273.                 `${inputBorderRadius.value}px`,
  6274.                 ['.form-control'],
  6275.                 'borderRadius'
  6276.             )
  6277.                                               );
  6278.             menuBorderRadius.addEventListener('input', () =>
  6279.                                               setCSS(
  6280.                 'menuBorderRadius',
  6281.                 `${menuBorderRadius.value}px`,
  6282.                 [...elements, '.text-block'],
  6283.                 'borderRadius'
  6284.             )
  6285.                                              );
  6286.             inputBorder.addEventListener('input', () =>
  6287.                                          setCSS(
  6288.                 'inputBorder',
  6289.                 inputBorder.checked ? '1px' : '0px',
  6290.                 ['.form-control'],
  6291.                 'borderWidth'
  6292.             )
  6293.                                         );
  6294.  
  6295.             const reset_input_radius = document.getElementById('reset_input_radius');
  6296.             const reset_menu_radius = document.getElementById('reset_menu_radius');
  6297.  
  6298.             reset_input_radius.addEventListener('click', () => {
  6299.                 const defaultBorderRadius = 4;
  6300.                 inputBorderRadius.value = defaultBorderRadius;
  6301.                 setCSS(
  6302.                     'inputBorderRadius',
  6303.                     `${defaultBorderRadius}px`,
  6304.                     ['.form-control'],
  6305.                     'borderRadius'
  6306.                 )
  6307.             });
  6308.  
  6309.             reset_menu_radius.addEventListener('click', () => {
  6310.                 const defaultBorderRadius = 15;
  6311.                 menuBorderRadius.value = defaultBorderRadius;
  6312.                 setCSS(
  6313.                     'menuBorderRadius',
  6314.                     `${defaultBorderRadius}px`,
  6315.                     [...elements, '.text-block'],
  6316.                     'borderRadius'
  6317.                 )
  6318.             });
  6319.  
  6320.  
  6321.             const hideDiscordBtns = document.getElementById('hideDiscordBtns');
  6322.             const dclinkdiv = document.getElementById('dclinkdiv');
  6323.  
  6324.             hideDiscordBtns.addEventListener('change', () => {
  6325.                 if (hideDiscordBtns.checked) {
  6326.                     dclinkdiv.classList.add('hidden_full');
  6327.                     modSettings.themes.hideDiscordBtns = true;
  6328.                 } else {
  6329.                     dclinkdiv.classList.remove('hidden_full');
  6330.                     modSettings.themes.hideDiscordBtns = false;
  6331.                 }
  6332.                 updateStorage();
  6333.             });
  6334.  
  6335.             if (modSettings.themes.hideDiscordBtns) {
  6336.                 dclinkdiv.classList.add('hidden_full');
  6337.                 hideDiscordBtns.checked = true;
  6338.             }
  6339.  
  6340.  
  6341.             const hideLangs = document.getElementById('hideLangs');
  6342.             const langsDiv = document.querySelector('.ch-lang');
  6343.  
  6344.             hideLangs.addEventListener('change', () => {
  6345.                 if (hideLangs.checked) {
  6346.                     langsDiv.classList.add('hidden_full');
  6347.                     modSettings.themes.hideLangs = true;
  6348.                 } else {
  6349.                     langsDiv.classList.remove('hidden_full');
  6350.                     modSettings.themes.hideLangs = false;
  6351.                 }
  6352.                 updateStorage();
  6353.             });
  6354.  
  6355.             if (modSettings.themes.hideLangs && langsDiv) {
  6356.                 langsDiv.classList.add('hidden_full');
  6357.                 hideLangs.checked = true;
  6358.             }
  6359.  
  6360.  
  6361.             const popup = byId('shop-popup');
  6362.             const removeShopPopup = byId('removeShopPopup');
  6363.             removeShopPopup.addEventListener('change', () => {
  6364.                 if (removeShopPopup.checked) {
  6365.                     popup.classList.add('hidden_full');
  6366.                     modSettings.settings.removeShopPopup = true;
  6367.                 } else {
  6368.                     popup.classList.remove('hidden_full');
  6369.                     modSettings.settings.removeShopPopup = false;
  6370.                 }
  6371.                 updateStorage();
  6372.             });
  6373.  
  6374.             if (modSettings.settings.removeShopPopup) {
  6375.                 popup.classList.add('hidden_full');
  6376.                 removeShopPopup.checked = true;
  6377.             }
  6378.         },
  6379.  
  6380.         isAuthenticated() {
  6381.             const name = byId('profile-name');
  6382.             if (name && (name !== 'Guest' || name !== 'undefined')) return true;
  6383.             else return false;
  6384.         },
  6385.  
  6386.         chat() {
  6387.             const chatDiv = document.createElement('div');
  6388.             chatDiv.classList.add('modChat');
  6389.             chatDiv.innerHTML = `
  6390.                 <div class="modChat__inner">
  6391.                     <button id="scroll-down-btn" class="modButton">↓</button>
  6392.                     <div class="modchat-chatbuttons">
  6393.                         <button class="chatButton" id="mainchat">Main</button>
  6394.                         <button class="chatButton" id="partychat">Party</button>
  6395.                         <span class="tagText"></span>
  6396.                     </div>
  6397.                     <div id="mod-messages" class="scroll"></div>
  6398.                     <div id="chatInputContainer">
  6399.                         <input type="text" id="chatSendInput" class="chatInput" placeholder="${this.isAuthenticated() ? 'message...' : 'Login to use the chat'}" maxlength="250" minlength="1" ${this.isAuthenticated() ? '' : 'disabled'} />
  6400.                         <button class="chatButton" id="openChatSettings">
  6401.                             <svg width="15" height="15" viewBox="0 0 20 20" fill="#fff" xmlns="http://www.w3.org/2000/svg">
  6402.                                 <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>
  6403.                             </svg>
  6404.                         </button>
  6405.                         <button class="chatButton" id="openEmojiMenu">😎</button>
  6406.                         <button id="sendButton" class="chatButton">
  6407.                             Send
  6408.                             <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/send.svg" width="20" height="20" draggable="false"/>
  6409.                         </button>
  6410.                     </div>
  6411.                 </div>
  6412.             `;
  6413.             document.body.append(chatDiv);
  6414.  
  6415.             const chatContainer = byId('mod-messages');
  6416.             const scrollDownButton = byId('scroll-down-btn');
  6417.  
  6418.             chatContainer.addEventListener('scroll', () => {
  6419.                 if (
  6420.                     chatContainer.scrollHeight - chatContainer.scrollTop >
  6421.                     300
  6422.                 ) {
  6423.                     scrollDownButton.style.display = 'block';
  6424.                 }
  6425.                 if (
  6426.                     chatContainer.scrollHeight - chatContainer.scrollTop <
  6427.                     299 &&
  6428.                     scrollDownButton.style.display === 'block'
  6429.                 ) {
  6430.                     scrollDownButton.style.display = 'none';
  6431.                 }
  6432.             });
  6433.  
  6434.             scrollDownButton.addEventListener('click', () => {
  6435.                 chatContainer.scrollTop = chatContainer.scrollHeight;
  6436.             });
  6437.  
  6438.             const main = byId('mainchat');
  6439.             const party = byId('partychat');
  6440.             main.addEventListener('click', () => {
  6441.                 if (!window.gameSettings.user) {
  6442.                     const chatSendInput = document.querySelector('#chatSendInput');
  6443.                     if (!chatSendInput) return;
  6444.  
  6445.                     chatSendInput.placeholder = 'Login to use the chat';
  6446.                     chatSendInput.disabled = true;
  6447.                 }
  6448.                 if (modSettings.chat.showClientChat) {
  6449.                     byId('mod-messages').innerHTML = '';
  6450.                     modSettings.chat.showClientChat = false;
  6451.                     updateStorage();
  6452.                 }
  6453.             });
  6454.             party.addEventListener('click', () => {
  6455.                 const chatSendInput = document.querySelector('#chatSendInput');
  6456.                 if (chatSendInput) {
  6457.                     chatSendInput.placeholder = 'message...';
  6458.                     chatSendInput.disabled = false;
  6459.                 }
  6460.  
  6461.                 if (!modSettings.chat.showClientChat) {
  6462.                     modSettings.chat.showClientChat = true;
  6463.                     updateStorage();
  6464.                 }
  6465.                 const modMessages = byId('mod-messages');
  6466.                 if (!modSettings.settings.tag) {
  6467.                     modMessages.innerHTML = `
  6468.                         <div class="message">
  6469.                             <span>
  6470.                                 <span style="color: #5a44eb" class="message_name">[SERVER]</span>: You need to be in a tag to use the SigMod party chat.
  6471.                             </span>
  6472.                         </div>
  6473.                     `;
  6474.                 } else {
  6475.                     modMessages.innerHTML = `
  6476.                         <div class="message">
  6477.                             <span>
  6478.                                 <span style="color: #5a44eb" class="message_name">[SERVER]</span>: Welcome to the SigMod party chat!
  6479.                             </span>
  6480.                         </div>
  6481.                     `;
  6482.                 }
  6483.             });
  6484.  
  6485.             if (modSettings.chat.showClientChat) {
  6486.                 const chatSendInput = document.querySelector('#chatSendInput');
  6487.                 if (!chatSendInput) return;
  6488.  
  6489.                 chatSendInput.placeholder = 'message...';
  6490.                 chatSendInput.disabled = false;
  6491.  
  6492.                 setTimeout(() => {
  6493.                     const modMessages = byId('mod-messages');
  6494.                     modMessages.innerHTML = `
  6495.                         <div class="message">
  6496.                             <span>
  6497.                                 <span style="color: #5a44eb" class="message_name">[SERVER]</span>: Welcome to the SigMod party chat!
  6498.                             </span>
  6499.                         </div>
  6500.                     `;
  6501.                 }, 1000);
  6502.             }
  6503.  
  6504.             const text = byId('chatSendInput');
  6505.             const send = byId('sendButton');
  6506.  
  6507.             send.addEventListener('click', () => {
  6508.                 let val = text.value;
  6509.                 if (val === '') return;
  6510.  
  6511.                 if (modSettings.chat.showClientChat) {
  6512.                     if (client?.ws?.readyState !== 1) return;
  6513.                     // party chat message
  6514.                     client.send({
  6515.                         type: 'chat-message',
  6516.                         content: {
  6517.                             message: val,
  6518.                         },
  6519.                     });
  6520.                 } else {
  6521.                     // Sigmally chat message: split text into parts if message is longer than 15 characters
  6522.                     if (val.length > 15) {
  6523.                         const parts = [];
  6524.                         let currentPart = '';
  6525.  
  6526.                         // split the input value into individual words
  6527.                         val.split(' ').forEach((word) => {
  6528.                             if (currentPart.length + word.length + 1 <= 15) {
  6529.                                 currentPart += (currentPart ? ' ' : '') + word;
  6530.                             } else {
  6531.                                 parts.push(currentPart);
  6532.                                 currentPart = word;
  6533.                             }
  6534.                         });
  6535.  
  6536.                         if (currentPart) {
  6537.                             parts.push(currentPart);
  6538.                         }
  6539.  
  6540.                         let index = 0;
  6541.                         const sendPart = () => {
  6542.                             if (index < parts.length) {
  6543.                                 window.sendChat(parts[index]);
  6544.                                 index++;
  6545.                                 setTimeout(sendPart, 1000); // 1s cooldown from sigmally
  6546.                             }
  6547.                         };
  6548.  
  6549.                         sendPart();
  6550.                     } else {
  6551.                         window.sendChat(val);
  6552.                     }
  6553.                 }
  6554.  
  6555.                 text.value = '';
  6556.                 text.blur();
  6557.             });
  6558.  
  6559.             this.chatSettings();
  6560.             this.emojiMenu();
  6561.             this.getBlockedChatData();
  6562.  
  6563.             const chatSettingsContainer = document.querySelector(
  6564.                 '.chatSettingsContainer'
  6565.             );
  6566.             const emojisContainer = document.querySelector('.emojisContainer');
  6567.  
  6568.             byId('openChatSettings').addEventListener('click', () => {
  6569.                 if (chatSettingsContainer.classList.contains('hidden_full')) {
  6570.                     chatSettingsContainer.classList.remove('hidden_full');
  6571.                     emojisContainer.classList.add('hidden_full');
  6572.                 } else {
  6573.                     chatSettingsContainer.classList.add('hidden_full');
  6574.                 }
  6575.             });
  6576.  
  6577.             const scrollUpButton = byId('scroll-down-btn');
  6578.             let focused = false;
  6579.             let typed = false;
  6580.  
  6581.             document.addEventListener('keydown', (e) => {
  6582.                 if (e.key === 'Enter' && text.value.length > 0) {
  6583.                     send.click();
  6584.                     focused = false;
  6585.                     scrollUpButton.click();
  6586.                 } else if (e.key === 'Enter') {
  6587.                     if (
  6588.                         document.activeElement.tagName === 'INPUT' ||
  6589.                         document.activeElement.tagName === 'TEXTAREA'
  6590.                     )
  6591.                         return;
  6592.  
  6593.                     focused ? text.blur() : text.focus();
  6594.                     focused = !focused;
  6595.                 }
  6596.             });
  6597.  
  6598.             text.addEventListener('input', () => {
  6599.                 typed = text.value.length > 1;
  6600.             });
  6601.  
  6602.             text.addEventListener('blur', () => {
  6603.                 focused = false;
  6604.             });
  6605.  
  6606.             text.addEventListener('keydown', (e) => {
  6607.                 const key = e.key.toLowerCase();
  6608.                 if (key === 'w') {
  6609.                     e.stopPropagation();
  6610.                 }
  6611.  
  6612.                 if (key === ' ') {
  6613.                     e.stopPropagation();
  6614.                 }
  6615.             });
  6616.  
  6617.             // switch to compact chat
  6618.             const chatElements = [
  6619.                 '.modChat',
  6620.                 '.emojisContainer',
  6621.                 '.chatSettingsContainer',
  6622.             ];
  6623.  
  6624.             const emojiBtn = byId('openEmojiMenu');
  6625.             const compactChat = byId('compactChat');
  6626.             compactChat.addEventListener('change', () => {
  6627.                 compactChat.checked ? compactMode() : defaultMode();
  6628.             });
  6629.  
  6630.             function compactMode() {
  6631.                 chatElements.forEach((querySelector) => {
  6632.                     const el = document.querySelector(querySelector);
  6633.                     if (el) {
  6634.                         el.classList.add('mod-compact');
  6635.                     }
  6636.                 });
  6637.                 emojiBtn.style.display = 'none';
  6638.  
  6639.                 modSettings.chat.compact = true;
  6640.                 updateStorage();
  6641.             }
  6642.  
  6643.             function defaultMode() {
  6644.                 chatElements.forEach((querySelector) => {
  6645.                     const el = document.querySelector(querySelector);
  6646.                     if (el) {
  6647.                         el.classList.remove('mod-compact');
  6648.                     }
  6649.                 });
  6650.                 emojiBtn.style.display = 'flex';
  6651.  
  6652.                 modSettings.chat.compact = false;
  6653.                 updateStorage();
  6654.             }
  6655.  
  6656.             if (modSettings.chat.compact) compactMode();
  6657.         },
  6658.  
  6659.         spamMessage(name, message) {
  6660.             return (
  6661.                 this.blockedChatData.names.some(n => name.toLowerCase().includes(n.toLowerCase())) ||
  6662.                 this.blockedChatData.messages.some(m => message.toLowerCase().includes(m.toLowerCase()))
  6663.             );
  6664.         },
  6665.  
  6666.         updateChat(data) {
  6667.             const chatContainer = byId('mod-messages');
  6668.             const isScrolledToBottom =
  6669.                   chatContainer.scrollHeight - chatContainer.scrollTop <=
  6670.                   chatContainer.clientHeight + 1;
  6671.             const isNearBottom =
  6672.                   chatContainer.scrollHeight - chatContainer.scrollTop - 200 <=
  6673.                   chatContainer.clientHeight;
  6674.  
  6675.             let { name, message, time = '' } = data;
  6676.             name = noXSS(name);
  6677.             time = data.time !== null ? prettyTime.am_pm(data.time) : '';
  6678.  
  6679.             const color = this.friend_names.has(name)
  6680.             ? this.friends_settings.highlight_color
  6681.             : data.color || '#ffffff';
  6682.             const glow =
  6683.                   this.friend_names.has(name) &&
  6684.                   this.friends_settings.highlight_friends
  6685.             ? `text-shadow: 0 1px 3px ${color}`
  6686.             : '';
  6687.             const id = rdmString(12);
  6688.  
  6689.             const chatMessage = document.createElement('div');
  6690.             chatMessage.classList.add('message');
  6691.             chatMessage.innerHTML = `
  6692.                 <div class="centerX" style="gap: 3px;">
  6693.                     <div class="flex">
  6694.                         <span style="color: ${color};${glow}" class="message_name" id="${id}">${name}</span>
  6695.                         <span>&#58;</span>
  6696.                     </div>
  6697.                     <span class="chatMessage-text"></span>
  6698.                 </div>
  6699.                 <span class="time">${time}</span>
  6700.             `;
  6701.             chatMessage.querySelector('.chatMessage-text').innerHTML = message;
  6702.  
  6703.             chatContainer.append(chatMessage);
  6704.             if (isScrolledToBottom || isNearBottom)
  6705.                 chatContainer.scrollTop = chatContainer.scrollHeight;
  6706.  
  6707.             if (name === this.nick) return;
  6708.  
  6709.             const nameEl = byId(id);
  6710.             nameEl.addEventListener('mousedown', (e) =>
  6711.                                     this.handleContextMenu(e, name)
  6712.                                    );
  6713.             nameEl.addEventListener('contextmenu', (e) => {
  6714.                 e.preventDefault();
  6715.                 e.stopPropagation();
  6716.             });
  6717.  
  6718.             if (++this.renderedMessages > this.maxChatMessages) {
  6719.                 chatContainer.removeChild(chatContainer.firstChild);
  6720.                 this.renderedMessages--;
  6721.             }
  6722.         },
  6723.  
  6724.         handleContextMenu(e, name) {
  6725.             if (this.onContext || e.button !== 2) return;
  6726.  
  6727.             const contextMenu = document.createElement('div');
  6728.             contextMenu.classList.add('chat-context');
  6729.             contextMenu.innerHTML = `
  6730.                 <span>${name}</span>
  6731.                 <button id="muteButton">Mute</button>
  6732.             `;
  6733.  
  6734.             Object.assign(contextMenu.style, {
  6735.                 top: `${e.clientY - 80}px`,
  6736.                 left: `${e.clientX}px`,
  6737.             });
  6738.  
  6739.             document.body.appendChild(contextMenu);
  6740.             this.onContext = true;
  6741.  
  6742.             byId('muteButton').addEventListener('click', () => {
  6743.                 const confirmMsg =
  6744.                       name === 'Spectator'
  6745.                 ? 'Are you sure you want to mute all spectators until you refresh the page?'
  6746.                 : `Are you sure you want to mute '${name}' until you refresh the page?`;
  6747.  
  6748.                 if (confirm(confirmMsg)) {
  6749.                     this.muteUser(name);
  6750.                     contextMenu.remove();
  6751.                 }
  6752.             });
  6753.  
  6754.             document.addEventListener('click', (event) => {
  6755.                 if (!contextMenu.contains(event.target)) {
  6756.                     this.onContext = false;
  6757.                     contextMenu.remove();
  6758.                 }
  6759.             });
  6760.         },
  6761.  
  6762.         muteUser(name) {
  6763.             this.mutedUsers.push(name);
  6764.  
  6765.             const msgNames = document.querySelectorAll('.message_name');
  6766.             msgNames.forEach((msgName) => {
  6767.                 if (msgName.innerHTML == name) {
  6768.                     const msgParent = msgName.closest('.message');
  6769.                     msgParent.remove();
  6770.                 }
  6771.             });
  6772.         },
  6773.  
  6774.         async getGoogleFonts() {
  6775.             const fontFamilies = await (
  6776.                 await fetch(this.appRoutes.fonts)
  6777.             ).json();
  6778.  
  6779.             return fontFamilies;
  6780.         },
  6781.  
  6782.         async getEmojis() {
  6783.             const response = await fetch(
  6784.                 'https://czrsd.com/static/sigmod/emojis.json'
  6785.             );
  6786.             return await response.json();
  6787.         },
  6788.  
  6789.         emojiMenu() {
  6790.             const updateEmojis = (searchTerm = '') => {
  6791.                 const emojisContainer =
  6792.                       document.querySelector('.emojisContainer');
  6793.                 const categoriesContainer =
  6794.                       emojisContainer.querySelector('#categories');
  6795.  
  6796.                 categoriesContainer.innerHTML = '';
  6797.                 window.emojis.forEach((emojiData) => {
  6798.                     const { emoji, description, category, tags } = emojiData;
  6799.                     if (
  6800.                         !searchTerm ||
  6801.                         tags.some((tag) =>
  6802.                                   tag.includes(searchTerm.toLowerCase())
  6803.                                  )
  6804.                     ) {
  6805.                         let categoryId = category
  6806.                         .replace(/\s+/g, '-')
  6807.                         .replace('&', 'and')
  6808.                         .toLowerCase();
  6809.                         let categoryDiv = categoriesContainer.querySelector(
  6810.                             `#${categoryId}`
  6811.                         );
  6812.                         if (!categoryDiv) {
  6813.                             categoryDiv = document.createElement('div');
  6814.                             categoryDiv.id = categoryId;
  6815.                             categoryDiv.classList.add('category');
  6816.                             categoryDiv.innerHTML = `<span>${category}</span><div class="emojiContainer"></div>`;
  6817.                             categoriesContainer.appendChild(categoryDiv);
  6818.                         }
  6819.                         const emojiContainer =
  6820.                               categoryDiv.querySelector('.emojiContainer');
  6821.                         const emojiDiv = document.createElement('div');
  6822.                         emojiDiv.classList.add('emoji');
  6823.                         emojiDiv.innerHTML = emoji;
  6824.                         emojiDiv.title = `${emoji} - ${description}`;
  6825.                         emojiDiv.addEventListener('click', () => {
  6826.                             const chatInput =
  6827.                                   document.querySelector('#chatSendInput');
  6828.                             chatInput.value += emoji;
  6829.                         });
  6830.                         emojiContainer.appendChild(emojiDiv);
  6831.                     }
  6832.                 });
  6833.             };
  6834.  
  6835.             const emojisContainer = document.createElement('div');
  6836.             emojisContainer.classList.add(
  6837.                 'chatAddedContainer',
  6838.                 'emojisContainer',
  6839.                 'hidden_full'
  6840.             );
  6841.             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>`;
  6842.  
  6843.             const chatInput = emojisContainer.querySelector('#searchEmoji');
  6844.             chatInput.addEventListener('input', (event) => {
  6845.                 const searchTerm = event.target.value.toLowerCase();
  6846.                 updateEmojis(searchTerm);
  6847.             });
  6848.  
  6849.             document.body.append(emojisContainer);
  6850.  
  6851.             const chatSettingsContainer = document.querySelector(
  6852.                 '.chatSettingsContainer'
  6853.             );
  6854.  
  6855.             byId('openEmojiMenu').addEventListener('click', () => {
  6856.                 if (!window.emojis) {
  6857.                     this.getEmojis().then((emojis) => {
  6858.                         window.emojis = emojis;
  6859.                         updateEmojis();
  6860.                     });
  6861.                 }
  6862.  
  6863.                 if (emojisContainer.classList.contains('hidden_full')) {
  6864.                     emojisContainer.classList.remove('hidden_full');
  6865.                     chatSettingsContainer.classList.add('hidden_full');
  6866.                 } else {
  6867.                     emojisContainer.classList.add('hidden_full');
  6868.                 }
  6869.             });
  6870.         },
  6871.  
  6872.         chatSettings() {
  6873.             const menu = document.createElement('div');
  6874.             menu.classList.add(
  6875.                 'chatAddedContainer',
  6876.                 'chatSettingsContainer',
  6877.                 'scroll',
  6878.                 'hidden_full'
  6879.             );
  6880.             menu.innerHTML = `
  6881.                 <div class="modInfoPopup" style="display: none">
  6882.                     <p>Send location in chat with keybind</p>
  6883.                 </div>
  6884.                 <div class="scroll">
  6885.                     <div class="csBlock">
  6886.                         <div class="csBlockTitle">
  6887.                             <span>Keybindings</span>
  6888.                         </div>
  6889.                         <div class="csRow">
  6890.                             <div class="csRowName">
  6891.                                 <span>Location</span>
  6892.                                 <span class="infoIcon">
  6893.                                     <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>
  6894.                                 </span>
  6895.                             </div>
  6896.                             <input type="text" name="location" id="modinput8" class="keybinding" value="${
  6897.             modSettings.macros.keys.location || ''
  6898.         }" placeholder="..." maxlength="1" onfocus="this.select()">
  6899.                         </div>
  6900.                         <div class="csRow">
  6901.                             <div class="csRowName">
  6902.                                 <span>Show / Hide</span>
  6903.                             </div>
  6904.                             <input type="text" name="toggle.chat" id="modinput9" class="keybinding" value="${
  6905.             modSettings.macros.keys.toggle.chat || ''
  6906.         }" placeholder="..." maxlength="1" onfocus="this.select()">
  6907.                         </div>
  6908.                     </div>
  6909.                     <div class="csBlock">
  6910.                         <div class="csBlockTitle">
  6911.                             <span>General</span>
  6912.                         </div>
  6913.                         <div class="csRow">
  6914.                             <div class="csRowName">
  6915.                                 <span>Time</span>
  6916.                             </div>
  6917.                             <div class="modCheckbox">
  6918.                               <input id="showChatTime" type="checkbox" checked />
  6919.                               <label class="cbx" for="showChatTime"></label>
  6920.                             </div>
  6921.                         </div>
  6922.                         <div class="csRow">
  6923.                             <div class="csRowName">
  6924.                                 <span>Name colors</span>
  6925.                             </div>
  6926.                             <div class="modCheckbox">
  6927.                               <input id="showNameColors" type="checkbox" checked />
  6928.                               <label class="cbx" for="showNameColors"></label>
  6929.                             </div>
  6930.                         </div>
  6931.                         <div class="csRow">
  6932.                             <div class="csRowName">
  6933.                                 <span>Party / Main</span>
  6934.                             </div>
  6935.                             <div class="modCheckbox">
  6936.                               <input id="showPartyMain" type="checkbox" checked />
  6937.                               <label class="cbx" for="showPartyMain"></label>
  6938.                             </div>
  6939.                         </div>
  6940.                         <div class="csRow">
  6941.                             <div class="csRowName">
  6942.                                 <span>Blur Tag</span>
  6943.                             </div>
  6944.                             <div class="modCheckbox">
  6945.                               <input id="blurTag" type="checkbox" checked />
  6946.                               <label class="cbx" for="blurTag"></label>
  6947.                             </div>
  6948.                         </div>
  6949.                         <div class="flex f-column g-5 centerXY" style="padding: 0 5px">
  6950.                             <div class="csRowName">
  6951.                                 <span>Location text</span>
  6952.                             </div>
  6953.                           <input type="text" id="locationText" placeholder="{pos}..." value="{pos}" class="form-control" />
  6954.                         </div>
  6955.                     </div>
  6956.                     <div class="csBlock">
  6957.                         <div class="csBlockTitle">
  6958.                             <span>Style</span>
  6959.                         </div>
  6960.                         <div class="csRow">
  6961.                             <div class="csRowName">
  6962.                                 <span>Compact chat</span>
  6963.                             </div>
  6964.                             <div class="modCheckbox">
  6965.                               <input id="compactChat" type="checkbox" ${
  6966.             modSettings.chat.compact ? 'checked' : ''
  6967.         } />
  6968.                               <label class="cbx" for="compactChat"></label>
  6969.                             </div>
  6970.                         </div>
  6971.                         <div class="csRow">
  6972.                             <div class="csRowName">
  6973.                                 <span>Text</span>
  6974.                             </div>
  6975. 							<div id="chatTextColor"></div>
  6976.                         </div>
  6977.                         <div class="csRow">
  6978.                             <div class="csRowName">
  6979.                                 <span>Background</span>
  6980.                             </div>
  6981. 							<div id="chatBackground"></div>
  6982.                         </div>
  6983.                         <div class="csRow">
  6984.                             <div class="csRowName">
  6985.                                 <span>Theme</span>
  6986.                             </div>
  6987. 							<div id="chatThemeChanger"></div>
  6988.                         </div>
  6989.                     </div>
  6990.                 </div>
  6991.             `;
  6992.             document.body.append(menu);
  6993.  
  6994.             const infoIcon = document.querySelector('.infoIcon');
  6995.             const modInfoPopup = document.querySelector('.modInfoPopup');
  6996.             let popupOpen = false;
  6997.  
  6998.             infoIcon.addEventListener('click', (event) => {
  6999.                 event.stopPropagation();
  7000.                 modInfoPopup.style.display = popupOpen ? 'none' : 'block';
  7001.                 popupOpen = !popupOpen;
  7002.             });
  7003.  
  7004.             document.addEventListener('click', (event) => {
  7005.                 if (popupOpen && !modInfoPopup.contains(event.target)) {
  7006.                     modInfoPopup.style.display = 'none';
  7007.                     popupOpen = false;
  7008.                 }
  7009.             });
  7010.  
  7011.             const showChatTime = document.querySelector('#showChatTime');
  7012.             const showNameColors = document.querySelector('#showNameColors');
  7013.  
  7014.             showChatTime.addEventListener('change', () => {
  7015.                 const timeElements = document.querySelectorAll('.time');
  7016.                 if (showChatTime.checked) {
  7017.                     modSettings.chat.showTime = true;
  7018.                     updateStorage();
  7019.                 } else {
  7020.                     modSettings.chat.showTime = false;
  7021.                     if (timeElements) {
  7022.                         timeElements.forEach((el) => (el.innerHTML = ''));
  7023.                     }
  7024.                     updateStorage();
  7025.                 }
  7026.             });
  7027.  
  7028.             showNameColors.addEventListener('change', () => {
  7029.                 const message_names =
  7030.                       document.querySelectorAll('.message_name');
  7031.                 if (showNameColors.checked) {
  7032.                     modSettings.chat.showNameColors = true;
  7033.                     updateStorage();
  7034.                 } else {
  7035.                     modSettings.chat.showNameColors = false;
  7036.                     if (message_names) {
  7037.                         message_names.forEach(
  7038.                             (el) => (el.style.color = '#fafafa')
  7039.                         );
  7040.                     }
  7041.                     updateStorage();
  7042.                 }
  7043.             });
  7044.  
  7045.             // remove old rgba val
  7046.             if (modSettings.chat.bgColor.includes('rgba')) {
  7047.                 modSettings.chat.bgColor = RgbaToHex(modSettings.chat.bgColor);
  7048.             }
  7049.  
  7050.             const modChat = document.querySelector('.modChat');
  7051.             modChat.style.background = modSettings.chat.bgColor;
  7052.  
  7053.             const showPartyMain = document.querySelector('#showPartyMain');
  7054.             const chatHeader = document.querySelector('.modchat-chatbuttons');
  7055.  
  7056.             const changeButtonsState = (show) => {
  7057.                 chatHeader.style.display = show ? 'flex' : 'none';
  7058.                 modChat.style.maxHeight = show ? '285px' : '250px';
  7059.                 modChat.style.minHeight = show ? '285px' : '250px';
  7060.                 const modChatInner = document.querySelector('.modChat__inner');
  7061.                 modChatInner.style.maxHeight = show ? '265px' : '230px';
  7062.                 modChatInner.style.minHeight = show ? '265px' : '230px';
  7063.             };
  7064.  
  7065.             showPartyMain.addEventListener('change', () => {
  7066.                 const show = showPartyMain.checked;
  7067.                 modSettings.chat.showChatButtons = show;
  7068.                 changeButtonsState(show);
  7069.                 updateStorage();
  7070.             });
  7071.  
  7072.             showPartyMain.checked = modSettings.chat.showChatButtons;
  7073.             changeButtonsState(modSettings.chat.showChatButtons);
  7074.  
  7075.             setTimeout(() => {
  7076.                 const blurTag = byId('blurTag');
  7077.                 const tagText = document.querySelector('.tagText');
  7078.                 const tagElement = document.querySelector('#tag');
  7079.                 blurTag.addEventListener('change', () => {
  7080.                     const state = blurTag.checked;
  7081.  
  7082.                     state
  7083.                         ? (tagText.classList.add('blur'),
  7084.                            tagElement.classList.add('blur'))
  7085.                     : (tagText.classList.remove('blur'),
  7086.                        tagElement.classList.remove('blur'));
  7087.                     modSettings.chat.blurTag = state;
  7088.                     updateStorage();
  7089.                 });
  7090.                 blurTag.checked = modSettings.chat.blurTag;
  7091.                 if (modSettings.chat.blurTag) {
  7092.                     tagText.classList.add('blur');
  7093.                     tagElement.classList.add('blur');
  7094.                 }
  7095.             });
  7096.  
  7097.             const locationText = byId('locationText');
  7098.             locationText.addEventListener('input', (e) => {
  7099.                 e.stopPropagation();
  7100.                 modSettings.chat.locationText = locationText.value;
  7101.             });
  7102.             locationText.value = modSettings.chat.locationText || '{pos}';
  7103.         },
  7104.  
  7105.         toggleChat() {
  7106.             const modChat = document.querySelector('.modChat');
  7107.             const modChatAdded = document.querySelectorAll(
  7108.                 '.chatAddedContainer'
  7109.             );
  7110.  
  7111.             const isModChatHidden =
  7112.                   modChat.style.display === 'none' ||
  7113.                   getComputedStyle(modChat).display === 'none';
  7114.  
  7115.             if (isModChatHidden) {
  7116.                 modChat.style.opacity = 0;
  7117.                 modChat.style.display = 'flex';
  7118.  
  7119.                 setTimeout(() => {
  7120.                     modChat.style.opacity = 1;
  7121.                 }, 10);
  7122.             } else {
  7123.                 modChat.style.opacity = 0;
  7124.                 modChatAdded.forEach((container) =>
  7125.                                      container.classList.add('hidden_full')
  7126.                                     );
  7127.  
  7128.                 setTimeout(() => {
  7129.                     modChat.style.display = 'none';
  7130.                 }, 300);
  7131.             }
  7132.         },
  7133.  
  7134.         smallMods() {
  7135.             const modAlert_overlay = document.createElement('div');
  7136.             modAlert_overlay.classList.add('alert_overlay');
  7137.             modAlert_overlay.id = 'modAlert_overlay';
  7138.             document.body.append(modAlert_overlay);
  7139.  
  7140.             const autoRespawn = byId('autoRespawn');
  7141.             if (modSettings.settings.autoRespawn) {
  7142.                 autoRespawn.checked = true;
  7143.             }
  7144.  
  7145.             autoRespawn.addEventListener('change', () => {
  7146.                 modSettings.settings.autoRespawn = autoRespawn.checked;
  7147.                 updateStorage();
  7148.             });
  7149.  
  7150.             const auto = byId('autoClaimCoins');
  7151.             auto.addEventListener('change', () => {
  7152.                 const checked = auto.checked;
  7153.                 modSettings.settings.autoClaimCoins = !!checked;
  7154.                 updateStorage();
  7155.             });
  7156.             if (modSettings.settings.autoClaimCoins) {
  7157.                 auto.checked = true;
  7158.             }
  7159.  
  7160.             const showChallenges = byId('showChallenges');
  7161.             showChallenges.addEventListener('change', () => {
  7162.                 if (showChallenges.checked) {
  7163.                     modSettings.showChallenges = true;
  7164.                 } else {
  7165.                     modSettings.showChallenges = false;
  7166.                 }
  7167.                 updateStorage();
  7168.             });
  7169.             if (modSettings.showChallenges) {
  7170.                 auto.checked = true;
  7171.             }
  7172.  
  7173.             const gameTitle = byId('title');
  7174.  
  7175.             const newTitle = document.createElement('div');
  7176.             newTitle.classList.add('sigmod-title');
  7177.             newTitle.innerHTML = `
  7178.                <h1 id="title">Sigmally</h1>
  7179.                <span id="bycursed">Mod by <a href="https://www.youtube.com/@sigmallyCursed/" target="_blank">Cursed</a></span>
  7180.             `;
  7181.             gameTitle.replaceWith(newTitle);
  7182.  
  7183.             const nickName = byId('nick');
  7184.             nickName.maxLength = 50;
  7185.             nickName.type = 'text';
  7186.  
  7187.             function updNick() {
  7188.                 const nick = nickName.value;
  7189.                 mods.nick = nick;
  7190.                 const welcome = byId('welcomeUser');
  7191.                 if (welcome) {
  7192.                     welcome.innerHTML = `Welcome ${
  7193.                     mods.nick || 'Unnamed'
  7194.                 }, to the SigMod Client!`;
  7195.                 }
  7196.             }
  7197.  
  7198.             nickName.addEventListener('input', () => {
  7199.                 updNick();
  7200.             });
  7201.  
  7202.             updNick();
  7203.  
  7204.             // Better grammar in the descriptions of the challenges
  7205.             setTimeout(() => {
  7206.                 window.shopLocales.challenge_tab.tasks = {
  7207.                     eaten: 'Eat %n food in a game.',
  7208.                     xp: 'Get %n XP in a game.',
  7209.                     alive: 'Stay alive for %n minutes in a game.',
  7210.                     pos: 'Reach top %n on leaderboard.',
  7211.                 };
  7212.             }, 1000);
  7213.  
  7214.             const topusersInner = document.querySelector('.top-users__inner');
  7215.             topusersInner.classList.add('scroll');
  7216.             topusersInner.style.border = 'none';
  7217.  
  7218.             byId('signOutBtn').addEventListener('click', () => {
  7219.                 window.gameSettings.user = null;
  7220.             });
  7221.  
  7222.             const mode = byId('gamemode');
  7223.             mode.addEventListener('change', () => {
  7224.                 client.send({
  7225.                     type: 'server-changed',
  7226.                     content: getGameMode(),
  7227.                 });
  7228.  
  7229.                 window.gameSettings.isPlaying = false;
  7230.  
  7231.                 const modMessages = document.querySelector('#mod-messages');
  7232.                 if (modMessages) {
  7233.                     modMessages.innerHTML = '';
  7234.                 }
  7235.             });
  7236.  
  7237.             // redirect to owned skins instead of free skins
  7238.             const ot = Element.prototype.openTab;
  7239.             Element.prototype.openTab = function (tab) {
  7240.                 if (!tab === 'skins') return;
  7241.  
  7242.                 setTimeout(() => {
  7243.                     Element.prototype.changeTab('owned');
  7244.                 }, 100);
  7245.  
  7246.                 ot.apply(this, arguments);
  7247.             };
  7248.  
  7249.             document.addEventListener('mousemove', (e) => {
  7250.                 this.mouseX = e.clientX + window.pageXOffset;
  7251.                 this.mouseY = e.clientY + window.pageYOffset;
  7252.  
  7253.                 const mouseTracker = document.querySelector('.mouseTracker');
  7254.                 if (!mouseTracker) return;
  7255.  
  7256.                 mouseTracker.innerText = `X: ${this.mouseX}; Y: ${this.mouseY}`;
  7257.             });
  7258.  
  7259.             if (location.search.includes('password')) {
  7260.                 const passwordField = byId('password');
  7261.                 if (passwordField) passwordField.style.display = 'none';
  7262.  
  7263.                 const password =
  7264.                       new URLSearchParams(location.search)
  7265.                 .get('password')
  7266.                 ?.split('/')[0] || '';
  7267.                 passwordField.value = password; // sigfixes should know the password when multiboxing
  7268.  
  7269.                 if (window.sigfix) return;
  7270.  
  7271.                 const playBtn = byId('play-btn');
  7272.                 playBtn.addEventListener('click', (e) => {
  7273.                     const waitForConnection = () =>
  7274.                     new Promise((res) => {
  7275.                         if (client?.ws?.readyState === 1) return res(null);
  7276.                         const i = setInterval(
  7277.                             () =>
  7278.                             client?.ws?.readyState === 1 &&
  7279.                             (clearInterval(i), res(null)),
  7280.                             50
  7281.                         );
  7282.                     });
  7283.  
  7284.                     waitForConnection().then(async () => {
  7285.                         await wait(500);
  7286.                         mods.sendPlay(password);
  7287.  
  7288.                         const interval = setInterval(() => {
  7289.                             const errormodal = byId('errormodal');
  7290.                             if (errormodal?.style.display !== 'none')
  7291.                                 errormodal.style.display = 'none';
  7292.                         });
  7293.  
  7294.                         setTimeout(() => clearInterval(interval), 1000);
  7295.                     });
  7296.                 });
  7297.             }
  7298.         },
  7299.  
  7300.         removeStorage(storage) {
  7301.             localStorage.removeItem(storage);
  7302.         },
  7303.  
  7304.         credits() {
  7305.             console.log(
  7306.                 `%c
  7307. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7308. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎░█▀▀▀█ ▀█▀ ░█▀▀█ ░█▀▄▀█ ░█▀▀▀█ ░█▀▀▄ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7309. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎─▀▀▀▄▄ ░█─ ░█─▄▄ ░█░█░█ ░█──░█ ░█─░█ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ V${version} ‎ ‎ ‎ ‎
  7310. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎░█▄▄▄█ ▄█▄ ░█▄▄█ ░█──░█ ░█▄▄▄█ ░█▄▄▀ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7311. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7312. ‎ ‎ ‎ ██████╗░██╗░░░██╗  ░█████╗░██╗░░░██╗██████╗░░██████╗███████╗██████╗░ ‎ ‎ ‎
  7313. ‎ ‎ ‎ ██╔══██╗╚██╗░██╔╝  ██╔══██╗██║░░░██║██╔══██╗██╔════╝██╔════╝██╔══██╗ ‎ ‎ ‎
  7314. ‎ ‎ ‎ ██████╦╝░╚████╔╝░  ██║░░╚═╝██║░░░██║██████╔╝╚█████╗░█████╗░░██║░░██║ ‎ ‎ ‎
  7315. ‎ ‎ ‎ ██╔══██╗░░╚██╔╝░░  ██║░░██╗██║░░░██║██╔══██╗░╚═══██╗██╔══╝░░██║░░██║ ‎ ‎ ‎
  7316. ‎ ‎ ‎ ██████╦╝░░░██║░░░  ╚█████╔╝╚██████╔╝██║░░██║██████╔╝███████╗██████╔╝ ‎ ‎ ‎
  7317. ‎ ‎ ‎ ╚═════╝░░░░╚═╝░░░  ░╚════╝░░╚═════╝░╚═╝░░╚═╝╚═════╝░╚══════╝╚═════╝░ ‎ ‎ ‎
  7318. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7319. `,
  7320.                 'background-color: black; color: green'
  7321.             );
  7322.         },
  7323.  
  7324.         handleAlert(data) {
  7325.             const { title, description, enabled, password } = data;
  7326.  
  7327.             if (location.pathname.includes('tournament') || client.updateAvailable) return;
  7328.  
  7329.             const hideAlert = Number(localStorage.getItem('hide-alert'));
  7330.             // Don't show alert if it has been closed the past 3 hours
  7331.             if (!enabled || (hideAlert && (Date.now() - hideAlert < 3 * 60 * 60 * 1000))) {
  7332.                 byId('scrim_alert')?.remove();
  7333.                 return;
  7334.             }
  7335.  
  7336.             localStorage.removeItem('hide-alert');
  7337.  
  7338.             const modAlert = document.createElement('div');
  7339.             modAlert.id = 'scrim_alert';
  7340.             modAlert.classList.add('modAlert');
  7341.             modAlert.innerHTML = `
  7342.                 <div class="flex justify-sb">
  7343.                     <strong>${title}</strong>
  7344.                     <button class="modButton" style="width: 35px;" id="close_scrim_alert">X</button>
  7345.                 </div>
  7346.                 <span>${description}</span>
  7347.                 <div class="flex" style="align-items: center; gap: 5px;">
  7348.                     <button id="join" class="modButton" style="width: 100%">Join</button>
  7349.                 </div>
  7350.             `;
  7351.             document.body.append(modAlert);
  7352.  
  7353.             const observer = new MutationObserver(() => {
  7354.                 modAlert.style.display = menuClosed() ? 'none' : 'flex';
  7355.             });
  7356.  
  7357.             observer.observe(document.body, {
  7358.                 attributes: true,
  7359.                 childList: true,
  7360.                 subtree: true,
  7361.             });
  7362.  
  7363.             const joinButton = byId('join');
  7364.             joinButton.addEventListener('click', () => {
  7365.                 location.href = `https://one.sigmally.com/tournament?password=${password}`;
  7366.             });
  7367.  
  7368.             const close = byId('close_scrim_alert');
  7369.             close.addEventListener('click', () => {
  7370.                 modAlert.remove();
  7371.                 // make it not that annoying
  7372.                 localStorage.setItem('hide-alert', Date.now());
  7373.             });
  7374.         },
  7375.  
  7376.         saveNames() {
  7377.             let savedNames = modSettings.settings.savedNames;
  7378.             let savedNamesOutput = byId('savedNames');
  7379.             let saveNameBtn = byId('saveName');
  7380.             let saveNameInput = byId('saveNameValue');
  7381.  
  7382.             const createNameDiv = (name) => {
  7383.                 let nameDiv = document.createElement('div');
  7384.                 nameDiv.classList.add('NameDiv');
  7385.  
  7386.                 let nameLabel = document.createElement('label');
  7387.                 nameLabel.classList.add('NameLabel');
  7388.                 nameLabel.innerText = name;
  7389.  
  7390.                 let delName = document.createElement('button');
  7391.                 delName.innerText = 'X';
  7392.                 delName.classList.add('delName');
  7393.  
  7394.                 nameDiv.addEventListener('click', () => {
  7395.                     const name = nameLabel.innerText;
  7396.                     navigator.clipboard.writeText(name).then(() => {
  7397.                         this.modAlert(
  7398.                             `Added the name '${name}' to your clipboard!`,
  7399.                             'success'
  7400.                         );
  7401.                     });
  7402.                 });
  7403.  
  7404.                 delName.addEventListener('click', () => {
  7405.                     if (
  7406.                         confirm(
  7407.                             "Are you sure you want to delete the name '" +
  7408.                             nameLabel.innerText +
  7409.                             "'?"
  7410.                         )
  7411.                     ) {
  7412.                         nameDiv.remove();
  7413.                         savedNames = savedNames.filter(
  7414.                             (n) => n !== nameLabel.innerText
  7415.                         );
  7416.                         modSettings.settings.savedNames = savedNames;
  7417.                         updateStorage();
  7418.                     }
  7419.                 });
  7420.  
  7421.                 nameDiv.appendChild(nameLabel);
  7422.                 nameDiv.appendChild(delName);
  7423.                 return nameDiv;
  7424.             };
  7425.  
  7426.             saveNameBtn.addEventListener('click', () => {
  7427.                 if (saveNameInput.value === '') return;
  7428.  
  7429.                 setTimeout(() => {
  7430.                     saveNameInput.value = '';
  7431.                 }, 10);
  7432.  
  7433.                 if (savedNames.includes(saveNameInput.value)) {
  7434.                     return;
  7435.                 }
  7436.  
  7437.                 let nameDiv = createNameDiv(saveNameInput.value);
  7438.                 savedNamesOutput.appendChild(nameDiv);
  7439.  
  7440.                 savedNames.push(saveNameInput.value);
  7441.                 modSettings.settings.savedNames = savedNames;
  7442.                 updateStorage();
  7443.             });
  7444.  
  7445.             if (savedNames.length > 0) {
  7446.                 savedNames.forEach((name) => {
  7447.                     let nameDiv = createNameDiv(name);
  7448.                     savedNamesOutput.appendChild(nameDiv);
  7449.                 });
  7450.             }
  7451.         },
  7452.  
  7453.         initStats() {
  7454.             // initialize player stats
  7455.             const statElements = [
  7456.                 'stat-time-played',
  7457.                 'stat-highest-mass',
  7458.                 'stat-total-deaths',
  7459.                 'stat-total-mass',
  7460.             ];
  7461.             this.storage = localStorage.getItem('game-stats');
  7462.  
  7463.             if (!this.storage) {
  7464.                 this.storage = {
  7465.                     'time-played': 0, // seconds
  7466.                     'highest-mass': 0,
  7467.                     'total-deaths': 0,
  7468.                     'total-mass': 0,
  7469.                 };
  7470.                 localStorage.setItem(
  7471.                     'game-stats',
  7472.                     JSON.stringify(this.storage)
  7473.                 );
  7474.             } else {
  7475.                 this.storage = JSON.parse(this.storage);
  7476.             }
  7477.  
  7478.             statElements.forEach((rawStat) => {
  7479.                 const stat = rawStat.replace('stat-', '');
  7480.                 const value = this.storage[stat];
  7481.                 this.updateStatElm(rawStat, value);
  7482.             });
  7483.  
  7484.             this.session.bind(this)();
  7485.         },
  7486.  
  7487.         updateStat(key, value) {
  7488.             this.storage[key] = value;
  7489.             localStorage.setItem('game-stats', JSON.stringify(this.storage));
  7490.             this.updateStatElm(key, value);
  7491.         },
  7492.  
  7493.         updateStatElm(stat, value) {
  7494.             const element = byId(stat);
  7495.  
  7496.             if (element) {
  7497.                 if (stat === 'stat-time-played') {
  7498.                     const hours = Math.floor(value / 3600);
  7499.                     const minutes = Math.floor((value % 3600) / 60);
  7500.                     const formattedTime =
  7501.                           hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
  7502.                     element.innerHTML = formattedTime;
  7503.                 } else {
  7504.                     const formattedValue =
  7505.                           stat === 'stat-highest-mass' ||
  7506.                           stat === 'stat-total-mass'
  7507.                     ? value > 999
  7508.                     ? `${(value / 1000).toFixed(1)}k`
  7509.                     : value.toString()
  7510.                     : value.toString();
  7511.                     element.innerHTML = formattedValue;
  7512.                 }
  7513.             }
  7514.         },
  7515.  
  7516.         session() {
  7517.             let playingInterval;
  7518.             let minPlaying = 0;
  7519.             let isPlaying = window.gameSettings.isPlaying;
  7520.  
  7521.             const playBtn = byId('play-btn');
  7522.             let a = null;
  7523.  
  7524.             playBtn.addEventListener('click', async () => {
  7525.                 if (isPlaying) return;
  7526.  
  7527.                 while (!window.gameSettings.isPlaying) {
  7528.                     await new Promise((resolve) => setTimeout(resolve, 200));
  7529.                 }
  7530.  
  7531.                 isPlaying = true;
  7532.                 let timer = null;
  7533.  
  7534.                 if (modSettings.playTimer) {
  7535.                     timer = document.createElement('span');
  7536.                     timer.classList.add('playTimer');
  7537.                     timer.innerText = '0m0s played';
  7538.                     document.body.append(timer);
  7539.                 }
  7540.  
  7541.                 // mouse tracker in session method so it's only visible when playing
  7542.                 if (modSettings.mouseTracker) {
  7543.                     const mouse = document.createElement('span');
  7544.                     mouse.classList.add('mouseTracker');
  7545.                     mouse.innerText = 'X: 0; Y: 0';
  7546.                     document.body.append(mouse);
  7547.  
  7548.                     if (!modSettings.playTimer) {
  7549.                         mouse.style.top = '128px';
  7550.                     }
  7551.                 }
  7552.  
  7553.                 let count = 0;
  7554.                 playingInterval = setInterval(() => {
  7555.                     count++;
  7556.                     this.storage['time-played']++;
  7557.                     if (count % 60 === 0) {
  7558.                         minPlaying++;
  7559.                     }
  7560.                     this.updateStat('time-played', this.storage['time-played']);
  7561.  
  7562.                     if (modSettings.playTimer) {
  7563.                         this.updateTimeStat(timer, count);
  7564.                     }
  7565.                 }, 1000);
  7566.             });
  7567.  
  7568.             setInterval(() => {
  7569.                 if (menuClosed() && byId('overlays').style.display !== 'none') {
  7570.                     byId('overlays').style.display = 'none';
  7571.                 }
  7572.  
  7573.                 if (isDead() && !dead) {
  7574.                     clearInterval(playingInterval);
  7575.                     dead = true;
  7576.  
  7577.                     const playTimer = document.querySelector('.playTimer');
  7578.                     if (playTimer) playTimer.remove();
  7579.  
  7580.                     const mouseTracker =
  7581.                           document.querySelector('.mouseTracker');
  7582.                     if (mouseTracker) mouseTracker.remove();
  7583.  
  7584.                     const score = parseFloat(byId('highest_mass').innerText);
  7585.                     const highest = this.storage['highest-mass'];
  7586.  
  7587.                     if (score > highest) {
  7588.                         this.storage['highest-mass'] = score;
  7589.                         this.updateStat(
  7590.                             'highest-mass',
  7591.                             this.storage['highest-mass']
  7592.                         );
  7593.                     }
  7594.  
  7595.                     this.storage['total-deaths']++;
  7596.                     this.updateStat(
  7597.                         'total-deaths',
  7598.                         this.storage['total-deaths']
  7599.                     );
  7600.  
  7601.                     this.storage['total-mass'] += score;
  7602.                     this.updateStat('total-mass', this.storage['total-mass']);
  7603.                     isPlaying = window.gameSettings.isPlaying = false;
  7604.  
  7605.                     if (this.lastOneStanding) {
  7606.                         client.send({
  7607.                             type: 'result',
  7608.                             content: null,
  7609.                         });
  7610.                         playBtn.disabled = true;
  7611.                     }
  7612.  
  7613.                     if (modSettings.showChallenges && window.gameSettings.user)
  7614.                         this.showChallenges();
  7615.                 } else if (!isDead()) {
  7616.                     dead = false;
  7617.                     const challengesDeathscreen = document.querySelector(
  7618.                         '.challenges_deathscreen'
  7619.                     );
  7620.                     if (challengesDeathscreen) challengesDeathscreen.remove();
  7621.                 }
  7622.             });
  7623.         },
  7624.         updateTimeStat(el, seconds) {
  7625.             const minutes = Math.floor(seconds / 60);
  7626.             const remainingSeconds = seconds % 60;
  7627.             const timeString = `${minutes}m${remainingSeconds}s`;
  7628.  
  7629.             el.innerText = `${timeString} played`;
  7630.         },
  7631.  
  7632.         async showChallenges() {
  7633.             const challengeData = await (
  7634.                 await fetch(
  7635.                     `https://sigmally.com/api/user/challenge/${window.gameSettings.user.email}`
  7636.                 )
  7637.             ).json();
  7638.  
  7639.             if (challengeData.status !== 'success') return;
  7640.  
  7641.             const shopLocales = window.shopLocales;
  7642.             let challengesCompleted = 0;
  7643.  
  7644.             const allChallenges = challengeData.data;
  7645.             allChallenges.forEach(({ status }) => {
  7646.                 if (status) challengesCompleted++;
  7647.             });
  7648.  
  7649.             let challenges;
  7650.             if (challengesCompleted === allChallenges.length) {
  7651.                 challenges = `<div class="challenge-row" style="justify-content: center;">All challenges completed.</div>`;
  7652.             } else {
  7653.                 challenges = allChallenges
  7654.                     .filter(({ status }) => !status)
  7655.                     .map(({ task, best, status, ready, goal }) => {
  7656.                     const desc = shopLocales.challenge_tab.tasks[
  7657.                         task
  7658.                     ].replace('%n', task === 'alive' ? goal / 60 : goal);
  7659.                     const btn = ready
  7660.                     ? `<button class="challenge-collect-secondary" onclick="this.challenge('${task}', ${status})">${shopLocales.challenge_tab.collect}</button>`
  7661.                     : `<div class="challenge-best-secondary">${
  7662.                     shopLocales.challenge_tab.result
  7663.                     }${Math.round(best)}${
  7664.                     task === 'alive' ? 's' : ''
  7665.                     }</div>`;
  7666.                     return `
  7667.                         <div class="challenge-row">
  7668.                           <div class="challenge-desc">${desc}</div>
  7669.                           ${btn}
  7670.                         </div>`;
  7671.                 })
  7672.                     .join('');
  7673.             }
  7674.  
  7675.             const modal = document.createElement('div');
  7676.             modal.classList.add('challenges_deathscreen');
  7677.             modal.innerHTML = `
  7678.                 <span class="challenges-title">Daily challenges</span>
  7679.                 <div class="challenges-col">${challenges}</div>
  7680.                 <span class="centerXY new-challenges">New challenges in 0h 0m 0s</span>
  7681.             `;
  7682.  
  7683.             const toggleColor = (element, background, text) => {
  7684.                 let image = `url("${background}")`;
  7685.                 if (background.includes('http')) {
  7686.                     element.style.background = image;
  7687.                     element.style.backgroundPosition = 'center';
  7688.                     element.style.backgroundSize = 'cover';
  7689.                     element.style.backgroundRepeat = 'no-repeat';
  7690.                 } else {
  7691.                     element.style.background = background;
  7692.                     element.style.backgroundRepeat = 'no-repeat';
  7693.                 }
  7694.                 element.style.color = text;
  7695.             };
  7696.  
  7697.             if (modSettings.themes.current !== 'Dark') {
  7698.                 let selectedTheme;
  7699.                 selectedTheme =
  7700.                     window.themes.defaults.find(
  7701.                     (theme) => theme.name === modSettings.themes.current
  7702.                 ) ||
  7703.                     modSettings.themes.custom.find(
  7704.                     (theme) => theme.name === modSettings.themes.current
  7705.                 ) ||
  7706.                     null;
  7707.                 if (!selectedTheme) {
  7708.                     selectedTheme =
  7709.                         window.themes.orderly.find(
  7710.                         (theme) => theme.name === modSettings.themes.current
  7711.                     ) ||
  7712.                         modSettings.themes.custom.find(
  7713.                         (theme) => theme.name === modSettings.themes.current
  7714.                     );
  7715.                 }
  7716.  
  7717.                 if (selectedTheme) {
  7718.                     toggleColor(
  7719.                         modal,
  7720.                         selectedTheme.background,
  7721.                         selectedTheme.text
  7722.                     );
  7723.                 }
  7724.             }
  7725.  
  7726.             document
  7727.                 .querySelector('.menu-wrapper--stats-mode')
  7728.                 .insertAdjacentElement('afterbegin', modal);
  7729.  
  7730.             if (challengesCompleted < allChallenges.length) {
  7731.                 document
  7732.                     .querySelectorAll('.challenge-collect-secondary')
  7733.                     .forEach((btn) => {
  7734.                     btn.addEventListener('click', () => {
  7735.                         const parentChallengeRow =
  7736.                               btn.closest('.challenge-row');
  7737.                         if (parentChallengeRow) {
  7738.                             setTimeout(() => {
  7739.                                 parentChallengeRow.remove();
  7740.                             }, 500);
  7741.                         }
  7742.                     });
  7743.                 });
  7744.             }
  7745.  
  7746.             this.createDayTimer();
  7747.         },
  7748.  
  7749.         timeToString(timeLeft) {
  7750.             const string = new Date(timeLeft).toISOString().slice(11, 19);
  7751.             const [hours, minutes, seconds] = string.split(':');
  7752.  
  7753.             return `${hours}h ${minutes}m ${seconds}s`;
  7754.         },
  7755.         toISODate: (date) => {
  7756.             const withTime = date ? new Date(date) : new Date();
  7757.             const [withoutTime] = withTime.toISOString().split('T');
  7758.             return withoutTime;
  7759.         },
  7760.         createDayTimer() {
  7761.             const oneDay = 1000 * 60 * 60 * 24;
  7762.             const getTime = () => {
  7763.                 const today = this.toISODate();
  7764.                 const from = new Date(today).getTime();
  7765.                 const to = from + oneDay;
  7766.  
  7767.                 const distance = to - Date.now();
  7768.                 const time = this.timeToString(distance);
  7769.                 return time;
  7770.             };
  7771.  
  7772.             const children = document.querySelector('.new-challenges');
  7773.             if (children) {
  7774.                 children.innerHTML = `New challenges in ${getTime()}`;
  7775.             }
  7776.  
  7777.             this.dayTimer = setInterval(() => {
  7778.                 const today = this.toISODate();
  7779.                 const from = new Date(today).getTime();
  7780.                 const to = from + oneDay;
  7781.  
  7782.                 const distance = to - Date.now();
  7783.                 const time = this.timeToString(distance);
  7784.  
  7785.                 const children = document.querySelector('.new-challenges');
  7786.                 if (!children || distance < 1000 || !isDead()) {
  7787.                     clearInterval(this.dayTimer);
  7788.                     return;
  7789.                 }
  7790.                 children.innerHTML = `New challenges in ${getTime()}`;
  7791.             }, 1000);
  7792.         },
  7793.  
  7794.         macros() {
  7795.             let that = this;
  7796.             const KEY_SPLIT = this.splitKey;
  7797.             let ff = null;
  7798.             let keydown = false;
  7799.             let open = false;
  7800.             const canvas = byId('canvas');
  7801.             const mod_menu = document.querySelector('.mod_menu');
  7802.  
  7803.             const freezeType = byId('freezeType');
  7804.             let freezeKeyPressed = false;
  7805.             let freezeMouseClicked = false;
  7806.             let freezeOverlay = null;
  7807.  
  7808.             let vOverlay = null;
  7809.             let vLocked = false;
  7810.             let activeVLine = false;
  7811.  
  7812.             let fixedOverlay = null;
  7813.             let fixedLocked = false;
  7814.             let activeFixedLine = false;
  7815.  
  7816.             /* intervals */
  7817.  
  7818.             // Respawn interval
  7819.             setInterval(() => {
  7820.                 if (
  7821.                     modSettings.settings.autoRespawn &&
  7822.                     this.respawnTime &&
  7823.                     Date.now() - this.respawnTime >= this.respawnCooldown
  7824.                 ) {
  7825.                     this.respawn();
  7826.                 }
  7827.             });
  7828.  
  7829.             // mouse fast feed interval
  7830.             setInterval(() => {
  7831.                 if (dead || !menuClosed() || !this.mouseDown) return;
  7832.                 keypress('w', 'KeyW');
  7833.             }, 50);
  7834.  
  7835.             async function split(times) {
  7836.                 if (times > 0) {
  7837.                     window.dispatchEvent(
  7838.                         new KeyboardEvent('keydown', KEY_SPLIT)
  7839.                     );
  7840.                     window.dispatchEvent(new KeyboardEvent('keyup', KEY_SPLIT));
  7841.                     split(times - 1);
  7842.                 }
  7843.             }
  7844.  
  7845.             async function selfTrick() {
  7846.                 let i = 4;
  7847.  
  7848.                 while (i--) {
  7849.                     split(1);
  7850.                     await wait(20);
  7851.                 }
  7852.             }
  7853.  
  7854.             async function doubleTrick() {
  7855.                 let i = 2;
  7856.  
  7857.                 while (i--) {
  7858.                     split(1);
  7859.                     await wait(20);
  7860.                 }
  7861.             }
  7862.  
  7863.             function mouseToScreenCenter() {
  7864.                 const screenCenterX = canvas.width / 2;
  7865.                 const screenCenterY = canvas.height / 2;
  7866.  
  7867.                 mousemove(screenCenterX, screenCenterY);
  7868.  
  7869.                 return {
  7870.                     x: screenCenterX,
  7871.                     y: screenCenterY,
  7872.                 };
  7873.             }
  7874.  
  7875.             async function instantSplit() {
  7876.                 await wait(300);
  7877.  
  7878.                 if (
  7879.                     modSettings.macros.keys.line.instantSplit &&
  7880.                     modSettings.macros.keys.line.instantSplit > 0
  7881.                 ) {
  7882.                     split(modSettings.macros.keys.line.instantSplit);
  7883.                 }
  7884.             }
  7885.  
  7886.             async function vLine() {
  7887.                 if (!activeVLine) return;
  7888.                 const x = playerPosition.x;
  7889.                 const y = playerPosition.y;
  7890.  
  7891.                 const offsetUpX = playerPosition.x;
  7892.                 const offsetUpY = playerPosition.y - 100;
  7893.                 const offsetDownX = playerPosition.x;
  7894.                 const offsetDownY = playerPosition.y + 100;
  7895.  
  7896.                 freezepos = false;
  7897.                 window.sendMouseMove(offsetUpX, offsetUpY);
  7898.                 freezepos = true;
  7899.  
  7900.                 await wait(50);
  7901.  
  7902.                 freezepos = false;
  7903.                 window.sendMouseMove(offsetDownX, offsetDownY);
  7904.                 freezepos = true;
  7905.             }
  7906.  
  7907.             async function toggleHorizontal(mouse = false) {
  7908.                 if (!freezeKeyPressed) {
  7909.                     if (activeVLine || activeFixedLine) return;
  7910.  
  7911.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  7912.                     freezepos = true;
  7913.  
  7914.                     instantSplit();
  7915.  
  7916.                     freezeOverlay = document.createElement('div');
  7917.                     freezeOverlay.innerHTML = `
  7918. 							<span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Movement Stopped</span>
  7919. 						`;
  7920.                     freezeOverlay.style =
  7921.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  7922.  
  7923.                     if (
  7924.                         mouse &&
  7925.                         (modSettings.macros.mouse.left === 'freeze' ||
  7926.                          modSettings.macros.mouse.right === 'freeze')
  7927.                     ) {
  7928.                         freezeOverlay.addEventListener('mousedown', (e) => {
  7929.                             if (
  7930.                                 e.button === 0 &&
  7931.                                 modSettings.macros.mouse.left === 'freeze'
  7932.                             ) {
  7933.                                 // Left mouse button (1)
  7934.                                 handleFreezeEvent();
  7935.                             }
  7936.                             if (
  7937.                                 e.button === 2 &&
  7938.                                 modSettings.macros.mouse.right === 'freeze'
  7939.                             ) {
  7940.                                 // Right mouse button (2)
  7941.                                 handleFreezeEvent();
  7942.                             }
  7943.                         });
  7944.  
  7945.                         if (modSettings.macros.mouse.right === 'freeze') {
  7946.                             freezeOverlay.addEventListener(
  7947.                                 'contextmenu',
  7948.                                 (e) => {
  7949.                                     e.preventDefault();
  7950.                                 }
  7951.                             );
  7952.                         }
  7953.                     }
  7954.  
  7955.                     function handleFreezeEvent() {
  7956.                         if (freezeOverlay != null) freezeOverlay.remove();
  7957.                         freezeOverlay = null;
  7958.                         freezeKeyPressed = false;
  7959.                     }
  7960.  
  7961.                     document
  7962.                         .querySelector('.body__inner')
  7963.                         .append(freezeOverlay);
  7964.  
  7965.                     freezeKeyPressed = true;
  7966.                 } else {
  7967.                     if (freezeOverlay != null) freezeOverlay.remove();
  7968.                     freezeOverlay = null;
  7969.                     freezeKeyPressed = false;
  7970.  
  7971.                     freezepos = false;
  7972.                 }
  7973.             }
  7974.  
  7975.             async function toggleVertical() {
  7976.                 if (!activeVLine) {
  7977.                     if (freezeKeyPressed || activeFixedLine) return;
  7978.  
  7979.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  7980.                     freezepos = true;
  7981.  
  7982.                     instantSplit();
  7983.  
  7984.                     vOverlay = document.createElement('div');
  7985.                     vOverlay.style = 'pointer-events: none;';
  7986.                     vOverlay.innerHTML = `
  7987.                         <span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Vertical locked</span>
  7988.                     `;
  7989.                     vOverlay.style =
  7990.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  7991.  
  7992.                     document.querySelector('.body__inner').append(vOverlay);
  7993.  
  7994.                     activeVLine = true;
  7995.                 } else {
  7996.                     activeVLine = false;
  7997.                     freezepos = false;
  7998.                     if (vOverlay) vOverlay.remove();
  7999.                     vOverlay = null;
  8000.                 }
  8001.             }
  8002.  
  8003.             async function toggleFixed() {
  8004.                 if (!activeFixedLine) {
  8005.                     if (freezeKeyPressed || activeVLine) return;
  8006.  
  8007.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  8008.  
  8009.                     freezepos = true;
  8010.  
  8011.                     instantSplit();
  8012.  
  8013.                     fixedOverlay = document.createElement('div');
  8014.                     fixedOverlay.style = 'pointer-events: none;';
  8015.                     fixedOverlay.innerHTML = `
  8016.                         <span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Mouse locked</span>
  8017.                     `;
  8018.                     fixedOverlay.style =
  8019.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  8020.  
  8021.                     document.querySelector('.body__inner').append(fixedOverlay);
  8022.  
  8023.                     activeFixedLine = true;
  8024.                 } else {
  8025.                     activeFixedLine = false;
  8026.                     freezepos = false;
  8027.                     if (fixedOverlay) fixedOverlay.remove();
  8028.                     fixedOverlay = null;
  8029.                 }
  8030.             }
  8031.  
  8032.             function sendLocation() {
  8033.                 if (!playerPosition.x || !playerPosition.y) return;
  8034.  
  8035.                 const gamemode = byId('gamemode');
  8036.  
  8037.                 let field = '';
  8038.                 const coordinates = getCoordinates(mods.border);
  8039.  
  8040.                 for (const label in coordinates) {
  8041.                     const { min, max } = coordinates[label];
  8042.  
  8043.                     if (
  8044.                         playerPosition.x >= min.x &&
  8045.                         playerPosition.x <= max.x &&
  8046.                         playerPosition.y >= min.y &&
  8047.                         playerPosition.y <= max.y
  8048.                     ) {
  8049.                         field = label;
  8050.                         break;
  8051.                     }
  8052.                 }
  8053.  
  8054.                 const locationText = modSettings.chat.locationText || field;
  8055.                 const message = locationText.replace('{pos}', field);
  8056.                 window.sendChat(message);
  8057.             }
  8058.  
  8059.             function toggleSettings(setting) {
  8060.                 const settingElement = document.querySelector(
  8061.                     `input#${setting}`
  8062.                 );
  8063.                 if (settingElement) {
  8064.                     settingElement.click();
  8065.                 } else {
  8066.                     console.error(`Setting "${setting}" not found`);
  8067.                 }
  8068.             }
  8069.  
  8070.             document.addEventListener('keyup', (e) => {
  8071.                 const key = e.key.toLowerCase();
  8072.                 if (key == modSettings.macros.keys.rapidFeed && keydown) {
  8073.                     clearInterval(ff);
  8074.                     keydown = false;
  8075.                 }
  8076.             });
  8077.             document.addEventListener('keydown', (e) => {
  8078.                 // prevent disconnecting & using macros on input fields
  8079.                 if (
  8080.                     document.activeElement.tagName === 'INPUT' ||
  8081.                     document.activeElement.tagName === 'TEXTAREA'
  8082.                 ) {
  8083.                     e.stopPropagation();
  8084.                     return;
  8085.                 }
  8086.                 const key = e.key.toLowerCase();
  8087.  
  8088.                 if (key === 'p') {
  8089.                     e.stopPropagation();
  8090.                 }
  8091.                 if (key === 'tab' && !window.screenTop && !window.screenY) {
  8092.                     e.preventDefault();
  8093.                 }
  8094.  
  8095.                 if (key === modSettings.macros.keys.rapidFeed) {
  8096.                     e.stopPropagation(); // block actual feeding key
  8097.                     if (!keydown) {
  8098.                         keydown = true;
  8099.                         ff = setInterval(
  8100.                             () => keypress('w', 'KeyW'),
  8101.                             modSettings.macros.feedSpeed
  8102.                         );
  8103.                     }
  8104.                 }
  8105.                 // vertical linesplit
  8106.                 if (
  8107.                     activeVLine &&
  8108.                     (key === ' ' ||
  8109.                      key === modSettings.macros.keys.splits.double ||
  8110.                      key === modSettings.macros.keys.splits.triple ||
  8111.                      key === modSettings.macros.keys.splits.quad)
  8112.                 ) {
  8113.                     vLine();
  8114.                 }
  8115.  
  8116.                 handleKeydown(key);
  8117.             });
  8118.  
  8119.             async function handleKeydown(key) {
  8120.                 switch (key) {
  8121.                     case modSettings.macros.keys.toggle.menu: {
  8122.                         if (!open) {
  8123.                             mod_menu.style.display = 'flex';
  8124.                             setTimeout(() => {
  8125.                                 mod_menu.style.opacity = 1;
  8126.                             }, 10);
  8127.                             open = true;
  8128.                         } else {
  8129.                             mod_menu.style.opacity = 0;
  8130.                             setTimeout(() => {
  8131.                                 mod_menu.style.display = 'none';
  8132.                             }, 300);
  8133.                             open = false;
  8134.                         }
  8135.                         break;
  8136.                     }
  8137.  
  8138.                     case modSettings.macros.keys.splits.double:
  8139.                         split(2);
  8140.                         break;
  8141.  
  8142.                     case modSettings.macros.keys.splits.triple:
  8143.                         split(3);
  8144.                         break;
  8145.  
  8146.                     case modSettings.macros.keys.splits.quad:
  8147.                         split(4);
  8148.                         break;
  8149.  
  8150.                     case modSettings.macros.keys.splits.selfTrick:
  8151.                         selfTrick();
  8152.                         break;
  8153.  
  8154.                     case modSettings.macros.keys.splits.doubleTrick:
  8155.                         doubleTrick();
  8156.                         break;
  8157.  
  8158.                     case modSettings.macros.keys.line.horizontal:
  8159.                         if (menuClosed()) toggleHorizontal();
  8160.                         break;
  8161.  
  8162.                     case modSettings.macros.keys.line.vertical:
  8163.                         if (menuClosed()) toggleVertical();
  8164.                         break;
  8165.  
  8166.                     case modSettings.macros.keys.line.fixed:
  8167.                         if (menuClosed()) toggleFixed();
  8168.                         break;
  8169.  
  8170.                     case modSettings.macros.keys.location:
  8171.                         sendLocation();
  8172.                         break;
  8173.  
  8174.                     case modSettings.macros.keys.toggle.chat:
  8175.                         mods.toggleChat();
  8176.                         break;
  8177.  
  8178.                     case modSettings.macros.keys.toggle.names:
  8179.                         toggleSettings('showNames');
  8180.                         break;
  8181.  
  8182.                     case modSettings.macros.keys.toggle.skins:
  8183.                         toggleSettings('showSkins');
  8184.                         break;
  8185.  
  8186.                     case modSettings.macros.keys.toggle.autoRespawn:
  8187.                         toggleSettings('autoRespawn');
  8188.                         break;
  8189.  
  8190.                     case modSettings.macros.keys.respawn:
  8191.                         mods.respawnGame();
  8192.                         break;
  8193.  
  8194.                     case modSettings.macros.keys.saveImage:
  8195.                         await mods.saveImage();
  8196.                         break;
  8197.                 }
  8198.             }
  8199.  
  8200.             canvas.addEventListener('mousedown', (e) => {
  8201.                 const {
  8202.                     macros: { mouse },
  8203.                 } = modSettings;
  8204.  
  8205.                 if (e.button === 0) {
  8206.                     // Left mouse button (0)
  8207.                     if (mouse.left === 'fastfeed') {
  8208.                         if (
  8209.                             document.activeElement.tagName === 'INPUT' ||
  8210.                             document.activeElement.tagName === 'TEXTAREA'
  8211.                         )
  8212.                             return;
  8213.                         this.mouseDown = true;
  8214.                     } else if (mouse.left === 'split') {
  8215.                         split(1);
  8216.                     } else if (mouse.left === 'split2') {
  8217.                         split(2);
  8218.                     } else if (mouse.left === 'split3') {
  8219.                         split(3);
  8220.                     } else if (mouse.left === 'split4') {
  8221.                         split(4);
  8222.                     } else if (mouse.left === 'freeze') {
  8223.                         toggleHorizontal(true);
  8224.                     } else if (mouse.left === 'dTrick') {
  8225.                         doubleTrick();
  8226.                     } else if (mouse.left === 'sTrick') {
  8227.                         selfTrick();
  8228.                     }
  8229.                 } else if (e.button === 2) {
  8230.                     // Right mouse button (2)
  8231.                     e.preventDefault();
  8232.                     if (mouse.right === 'fastfeed') {
  8233.                         if (
  8234.                             document.activeElement.tagName === 'INPUT' ||
  8235.                             document.activeElement.tagName === 'TEXTAREA'
  8236.                         )
  8237.                             return;
  8238.                         this.mouseDown = true;
  8239.                     } else if (mouse.right === 'split') {
  8240.                         split(1);
  8241.                     } else if (mouse.right === 'split2') {
  8242.                         split(2);
  8243.                     } else if (mouse.right === 'split3') {
  8244.                         split(3);
  8245.                     } else if (mouse.right === 'split4') {
  8246.                         split(4);
  8247.                     } else if (mouse.right === 'freeze') {
  8248.                         toggleHorizontal(true);
  8249.                     } else if (mouse.right === 'dTrick') {
  8250.                         doubleTrick();
  8251.                     } else if (mouse.right === 'sTrick') {
  8252.                         selfTrick();
  8253.                     }
  8254.                 }
  8255.             });
  8256.  
  8257.             canvas.addEventListener('contextmenu', (e) => {
  8258.                 e.preventDefault();
  8259.             });
  8260.  
  8261.             canvas.addEventListener('mouseup', () => {
  8262.                 if (modSettings.macros.mouse.left === 'fastfeed') {
  8263.                     this.mouseDown = false;
  8264.                 } else if (modSettings.macros.mouse.right === 'fastfeed') {
  8265.                     this.mouseDown = false;
  8266.                 }
  8267.             });
  8268.  
  8269.             const macroSelectHandler = (macroSelect, key) => {
  8270.                 const {
  8271.                     macros: { mouse },
  8272.                 } = modSettings;
  8273.                 macroSelect.value = modSettings[key] || 'none';
  8274.  
  8275.                 macroSelect.addEventListener('change', () => {
  8276.                     const selectedOption = macroSelect.value;
  8277.  
  8278.                     const optionActions = {
  8279.                         none: () => {
  8280.                             mouse[key] = null;
  8281.                         },
  8282.                         fastfeed: () => {
  8283.                             mouse[key] = 'fastfeed';
  8284.                         },
  8285.                         split: () => {
  8286.                             mouse[key] = 'split';
  8287.                         },
  8288.                         split2: () => {
  8289.                             mouse[key] = 'split2';
  8290.                         },
  8291.                         split3: () => {
  8292.                             mouse[key] = 'split3';
  8293.                         },
  8294.                         split4: () => {
  8295.                             mouse[key] = 'split4';
  8296.                         },
  8297.                         freeze: () => {
  8298.                             mouse[key] = 'freeze';
  8299.                         },
  8300.                         dTrick: () => {
  8301.                             mouse[key] = 'dTrick';
  8302.                         },
  8303.                         sTrick: () => {
  8304.                             mouse[key] = 'sTrick';
  8305.                         },
  8306.                     };
  8307.  
  8308.                     if (optionActions[selectedOption]) {
  8309.                         optionActions[selectedOption]();
  8310.                         updateStorage();
  8311.                     }
  8312.                 });
  8313.             };
  8314.  
  8315.             const m1_macroSelect = byId('m1_macroSelect');
  8316.             const m2_macroSelect = byId('m2_macroSelect');
  8317.  
  8318.             macroSelectHandler(m1_macroSelect, 'left');
  8319.             macroSelectHandler(m2_macroSelect, 'right');
  8320.  
  8321.             const instantSplitAmount = byId('instant-split-amount');
  8322.             const instantSplitStatus = byId('toggle-instant-split');
  8323.  
  8324.             instantSplitStatus.checked =
  8325.                 modSettings.macros.keys.line.instantSplit > 0;
  8326.             instantSplitAmount.disabled = !instantSplitStatus.checked;
  8327.             instantSplitAmount.value =
  8328.                 modSettings.macros.keys.line.instantSplit.toString();
  8329.  
  8330.             instantSplitStatus.addEventListener('change', () => {
  8331.                 if (instantSplitStatus.checked) {
  8332.                     modSettings.macros.keys.line.instantSplit =
  8333.                         Number(instantSplitAmount.value) || 0;
  8334.                     instantSplitAmount.disabled = false;
  8335.                 } else {
  8336.                     modSettings.macros.keys.line.instantSplit = 0;
  8337.                     instantSplitAmount.disabled = true;
  8338.                 }
  8339.  
  8340.                 updateStorage();
  8341.             });
  8342.  
  8343.             instantSplitAmount.addEventListener('input', (e) => {
  8344.                 modSettings.macros.keys.line.instantSplit =
  8345.                     Number(instantSplitAmount.value) || 0;
  8346.                 updateStorage();
  8347.             });
  8348.         },
  8349.  
  8350.         setInputActions() {
  8351.             const numModInputs = 17;
  8352.             const macroInputs = Array.from(
  8353.                 { length: numModInputs },
  8354.                 (_, i) => `modinput${i + 1}`
  8355.             );
  8356.  
  8357.             macroInputs.forEach((modkey) => {
  8358.                 const modInput = byId(modkey);
  8359.  
  8360.                 document.addEventListener('keydown', (event) => {
  8361.                     if (document.activeElement !== modInput) return;
  8362.  
  8363.                     if (event.key === 'Backspace') {
  8364.                         modInput.value = '';
  8365.                         updateModSettings(modInput.name, '');
  8366.                         return;
  8367.                     }
  8368.  
  8369.                     const newValue = event.key.toLowerCase();
  8370.                     modInput.value = newValue;
  8371.  
  8372.                     const isDuplicate = macroInputs.some((key) => {
  8373.                         const input = byId(key);
  8374.                         return (
  8375.                             input &&
  8376.                             input !== modInput &&
  8377.                             input.value === newValue
  8378.                         );
  8379.                     });
  8380.  
  8381.                     if (newValue && isDuplicate) {
  8382.                         alert("You can't use 2 keybindings at the same time.");
  8383.                         setTimeout(() => (modInput.value = ''), 0);
  8384.                         return;
  8385.                     }
  8386.  
  8387.                     updateModSettings(modInput.name, newValue);
  8388.                 });
  8389.             });
  8390.  
  8391.             function updateModSettings(propertyName, value) {
  8392.                 const properties = propertyName.split('.');
  8393.                 let settings = modSettings.macros.keys;
  8394.  
  8395.                 properties
  8396.                     .slice(0, -1)
  8397.                     .forEach((prop) => (settings = settings[prop]));
  8398.                 settings[properties.pop()] = value;
  8399.  
  8400.                 updateStorage();
  8401.             }
  8402.  
  8403.             const modNumberInput = document.querySelector('.modNumberInput');
  8404.  
  8405.             modNumberInput.addEventListener('keydown', (event) => {
  8406.                 if (
  8407.                     !['Backspace', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(
  8408.                         event.key
  8409.                     ) &&
  8410.                     !/^[0-9]$/.test(event.key)
  8411.                 ) {
  8412.                     event.preventDefault();
  8413.                 }
  8414.             });
  8415.         },
  8416.  
  8417.         openDB() {
  8418.             if (this.dbCache) return Promise.resolve(this.dbCache);
  8419.  
  8420.             return new Promise((resolve, reject) => {
  8421.                 const request = indexedDB.open('imageGalleryDB', 1);
  8422.  
  8423.                 request.onupgradeneeded = (event) => {
  8424.                     const db = event.target.result;
  8425.                     if (!db.objectStoreNames.contains('images')) {
  8426.                         db.createObjectStore('images', {
  8427.                             keyPath: 'timestamp',
  8428.                         });
  8429.                     }
  8430.                 };
  8431.  
  8432.                 request.onsuccess = () => {
  8433.                     this.dbCache = request.result;
  8434.                     resolve(this.dbCache);
  8435.                 };
  8436.  
  8437.                 request.onerror = (event) => reject(event.target.error);
  8438.             });
  8439.         },
  8440.  
  8441.         async saveImage() {
  8442.             const canvas = window.sigfix ? byId('sf-canvas') : byId('canvas');
  8443.  
  8444.             requestAnimationFrame(async () => {
  8445.                 const dataURL = canvas.toDataURL('image/png');
  8446.  
  8447.                 if (!dataURL) {
  8448.                     console.error(
  8449.                         'Failed to capture the image. The canvas might be empty or the rendering is incomplete.'
  8450.                     );
  8451.                     return;
  8452.                 }
  8453.  
  8454.                 const timestamp = Date.now();
  8455.  
  8456.                 if (!indexedDB)
  8457.                     return alert(
  8458.                         'Your browser does not support indexedDB. Please update your browser.'
  8459.                     );
  8460.  
  8461.                 try {
  8462.                     const db = await this.openDB();
  8463.                     const transaction = db.transaction('images', 'readwrite');
  8464.                     const store = transaction.objectStore('images');
  8465.                     store.put({ timestamp, dataURL });
  8466.  
  8467.                     await new Promise((resolve, reject) => {
  8468.                         transaction.oncomplete = resolve;
  8469.                         transaction.onerror = (event) =>
  8470.                         reject(event.target.error);
  8471.                     });
  8472.  
  8473.                     this.addImageToGallery({ timestamp, dataURL });
  8474.                 } catch (error) {
  8475.                     console.error('Transaction error:', error);
  8476.                 }
  8477.             });
  8478.         },
  8479.  
  8480.         addImageToGallery(image) {
  8481.             const galleryElement = byId('image-gallery');
  8482.  
  8483.             if (!galleryElement) return;
  8484.  
  8485.             const placeholderURL =
  8486.                   'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
  8487.  
  8488.             const imageHTML = `
  8489. 				<div class="image-container">
  8490. 					<img class="gallery-image lazy" data-src="${
  8491.             image.dataURL
  8492.             }" src="${placeholderURL}" data-image-id="${
  8493.             image.timestamp
  8494.             }" />
  8495. 					<div class="justify-sb">
  8496. 						<span class="modDescText">${prettyTime.fullDate(image.timestamp, true)}</span>
  8497. 						<div class="centerXY g-5">
  8498. 							<button type="button" class="download_btn operation_btn" data-image-id="${
  8499.             image.timestamp
  8500.             }"></button>
  8501. 							<button type="button" class="delete_btn operation_btn" data-image-id="${
  8502.             image.timestamp
  8503.             }"></button>
  8504. 						</div>
  8505. 					</div>
  8506. 				</div>
  8507. 			`;
  8508.  
  8509.             galleryElement.insertAdjacentHTML('afterbegin', imageHTML);
  8510.  
  8511.             const lazyImages = document.querySelectorAll('.lazy');
  8512.             const imageObserver = new IntersectionObserver(
  8513.                 (entries, observer) => {
  8514.                     entries.forEach((entry) => {
  8515.                         if (entry.isIntersecting) {
  8516.                             const image = entry.target;
  8517.                             image.src = image.getAttribute('data-src');
  8518.                             image.classList.remove('lazy');
  8519.                             observer.unobserve(image);
  8520.                         }
  8521.                     });
  8522.                 }
  8523.             );
  8524.  
  8525.             lazyImages.forEach((image) => {
  8526.                 imageObserver.observe(image);
  8527.             });
  8528.  
  8529.             this.attachEventListeners([image]);
  8530.         },
  8531.         async updateGallery() {
  8532.             try {
  8533.                 const db = await this.openDB();
  8534.                 const transaction = db.transaction('images', 'readonly');
  8535.                 const store = transaction.objectStore('images');
  8536.                 const request = store.getAll();
  8537.  
  8538.                 request.onsuccess = () => {
  8539.                     const gallery = request.result;
  8540.                     const galleryElement = byId('image-gallery');
  8541.                     const downloadAll = byId('gallery-download');
  8542.                     const deleteAll = byId('gallery-delete');
  8543.  
  8544.                     if (!galleryElement) return;
  8545.  
  8546.                     if (gallery.length === 0) {
  8547.                         galleryElement.innerHTML = `<span>No images saved yet.</span>`;
  8548.  
  8549.                         downloadAll.style.display = 'none';
  8550.                         deleteAll.style.display = 'none';
  8551.                         return;
  8552.                     }
  8553.  
  8554.                     downloadAll.style.display = 'block';
  8555.                     deleteAll.style.display = 'block';
  8556.  
  8557.                     downloadAll.addEventListener('click', async () => {
  8558.                         if (gallery.length === 0) return;
  8559.                         const { JSZip } = window;
  8560.                         const zip = JSZip();
  8561.  
  8562.                         gallery.forEach((item) => {
  8563.                             const imageData = item.dataURL.split(',')[1];
  8564.                             const imgExtension = item.dataURL
  8565.                             .split(';')[0]
  8566.                             .split('/')[1];
  8567.                             zip.file(
  8568.                                 `${item.timestamp}.${imgExtension}`,
  8569.                                 imageData,
  8570.                                 {
  8571.                                     base64: true,
  8572.                                 }
  8573.                             );
  8574.                         });
  8575.  
  8576.                         zip.generateAsync({ type: 'blob' })
  8577.                             .then((zipContent) => {
  8578.                             const a = document.createElement('a');
  8579.                             a.href = URL.createObjectURL(zipContent);
  8580.                             a.download = 'sigmally_gallery.zip';
  8581.                             a.click();
  8582.                         })
  8583.                             .catch((error) => {
  8584.                             console.error(
  8585.                                 'Error generating ZIP file:',
  8586.                                 error
  8587.                             );
  8588.                         });
  8589.                     });
  8590.  
  8591.                     deleteAll.addEventListener('click', () => {
  8592.                         const confirmDelete = confirm(
  8593.                             'Are you sure you want to delete all images? This action cannot be undone.'
  8594.                         );
  8595.                         if (!confirmDelete) return;
  8596.  
  8597.                         const deleteTransaction = db.transaction(
  8598.                             'images',
  8599.                             'readwrite'
  8600.                         );
  8601.                         const deleteStore =
  8602.                               deleteTransaction.objectStore('images');
  8603.                         deleteStore.clear();
  8604.  
  8605.                         deleteTransaction.oncomplete = () => {
  8606.                             galleryElement.innerHTML = `<span>No images saved yet.</span>`;
  8607.                         };
  8608.  
  8609.                         deleteTransaction.onerror = (error) => {
  8610.                             console.error('Error deleting images:', error);
  8611.                         };
  8612.                     });
  8613.  
  8614.                     gallery.sort((a, b) => b.timestamp - a.timestamp);
  8615.  
  8616.                     let galleryHTML = gallery
  8617.                     .map(
  8618.                         (item) => `
  8619. 						<div class="image-container">
  8620. 							<img class="gallery-image lazy" data-src="${
  8621.                         item.dataURL
  8622.                         }" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-image-id="${
  8623.                         item.timestamp
  8624.                         }" />
  8625. 							<div class="justify-sb">
  8626. 								<span class="modDescText">${prettyTime.fullDate(item.timestamp, true)}</span>
  8627. 								<div class="centerXY g-5">
  8628. 									<button type="button" class="download_btn operation_btn" data-image-id="${
  8629.                         item.timestamp
  8630.                         }"></button>
  8631. 									<button type="button" class="delete_btn operation_btn" data-image-id="${
  8632.                         item.timestamp
  8633.                         }"></button>
  8634. 								</div>
  8635. 							</div>
  8636. 						</div>
  8637. 					`
  8638.                     )
  8639.                     .join('');
  8640.  
  8641.                     galleryElement.innerHTML = galleryHTML;
  8642.  
  8643.                     const lazyImages = document.querySelectorAll('.lazy');
  8644.                     const imageObserver = new IntersectionObserver(
  8645.                         (entries, observer) => {
  8646.                             entries.forEach((entry) => {
  8647.                                 if (entry.isIntersecting) {
  8648.                                     const image = entry.target;
  8649.                                     image.src = image.getAttribute('data-src');
  8650.                                     image.classList.remove('lazy');
  8651.                                     observer.unobserve(image);
  8652.                                 }
  8653.                             });
  8654.                         }
  8655.                     );
  8656.  
  8657.                     lazyImages.forEach((image) => {
  8658.                         imageObserver.observe(image);
  8659.                     });
  8660.  
  8661.                     this.attachEventListeners(gallery);
  8662.                 };
  8663.             } catch (error) {
  8664.                 console.error('Transaction error:', error);
  8665.             }
  8666.         },
  8667.  
  8668.         attachEventListeners(gallery) {
  8669.             const galleryElement = byId('image-gallery');
  8670.  
  8671.             galleryElement.querySelectorAll('.gallery-image').forEach((img) => {
  8672.                 img.addEventListener('click', (event) => {
  8673.                     const dataURL = event.target.src;
  8674.                     this.openImage(dataURL);
  8675.                 });
  8676.             });
  8677.  
  8678.             galleryElement
  8679.                 .querySelectorAll('.download_btn')
  8680.                 .forEach((button) => {
  8681.                 button.addEventListener('click', () => {
  8682.                     const imageId = button.getAttribute('data-image-id');
  8683.                     const image = gallery.find(
  8684.                         (item) => item.timestamp === parseInt(imageId, 10)
  8685.                     );
  8686.                     if (image) {
  8687.                         const link = document.createElement('a');
  8688.                         link.href = image.dataURL;
  8689.                         link.download = `Sigmally ${this.sanitizeFilename(
  8690.                             prettyTime.fullDate(image.timestamp, true)
  8691.                         )}.png`;
  8692.                         link.click();
  8693.                     }
  8694.                 });
  8695.             });
  8696.  
  8697.             galleryElement.querySelectorAll('.delete_btn').forEach((button) => {
  8698.                 button.addEventListener('click', (e) => {
  8699.                     e.stopPropagation();
  8700.                     const imageId = button.getAttribute('data-image-id');
  8701.                     this.deleteImage(parseInt(imageId, 10));
  8702.                 });
  8703.             });
  8704.         },
  8705.  
  8706.         sanitizeFilename: (filename) => filename.replace(/:/g, '_'),
  8707.  
  8708.         openImage(dataURL) {
  8709.             const blob = this.dataURLToBlob(dataURL);
  8710.             const url = URL.createObjectURL(blob);
  8711.             const imgWindow = window.open(url, '_blank');
  8712.  
  8713.             if (imgWindow) {
  8714.                 setTimeout(() => URL.revokeObjectURL(url), 1000);
  8715.             }
  8716.         },
  8717.  
  8718.         dataURLToBlob(dataURL) {
  8719.             const [header, data] = dataURL.split(',');
  8720.             const mime = header.match(/:(.*?);/)[1];
  8721.             const binary = atob(data);
  8722.             const array = new Uint8Array(binary.length);
  8723.             for (let i = 0; i < binary.length; i++) {
  8724.                 array[i] = binary.charCodeAt(i);
  8725.             }
  8726.             return new Blob([array], { type: mime });
  8727.         },
  8728.  
  8729.         async deleteImage(timestamp) {
  8730.             try {
  8731.                 const db = await this.openDB();
  8732.                 const transaction = db.transaction('images', 'readwrite');
  8733.                 const store = transaction.objectStore('images');
  8734.                 store.delete(timestamp);
  8735.  
  8736.                 await new Promise((resolve, reject) => {
  8737.                     transaction.oncomplete = resolve;
  8738.                     transaction.onerror = (event) => reject(event.target.error);
  8739.                 });
  8740.  
  8741.                 this.updateGallery();
  8742.             } catch (error) {
  8743.                 console.error('Transaction error:', error);
  8744.             }
  8745.         },
  8746.  
  8747.         mainMenu() {
  8748.             const menucontent = document.querySelector('.menu-center-content');
  8749.             menucontent.style.margin = 'auto';
  8750.  
  8751.             const discordlinks = document.createElement('div');
  8752.             discordlinks.setAttribute('id', 'dclinkdiv');
  8753.             discordlinks.innerHTML = `
  8754.                 <a href="https://discord.gg/${
  8755.             window.tourneyServer ? 'ERtbMJCp8s' : '4j4Rc4dQTP'
  8756.         }" target="_blank" class="dclinks">
  8757.                     <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  8758.                         <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>
  8759.                     </svg>
  8760.                     <span>${
  8761.             window.tourneyServer ? 'Tourney Server' : 'Sigmally'
  8762.         }</span>
  8763.                 </a>
  8764.                 <a href="https://discord.gg/QyUhvUC8AD" target="_blank" class="dclinks">
  8765.                     <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  8766.                         <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>
  8767.                     </svg>
  8768.                     <span>Sigmally Modz</span>
  8769.                 </a>
  8770.                 `;
  8771.             byId('discord_link').remove();
  8772.             byId('menu').appendChild(discordlinks);
  8773.  
  8774.             let clansbtn = document.querySelector('#clans_and_settings button');
  8775.             clansbtn.innerHTML = 'Clans';
  8776.             document
  8777.                 .querySelectorAll('#clans_and_settings button')[1]
  8778.                 .removeAttribute('onclick');
  8779.         },
  8780.  
  8781.         respawn() {
  8782.             const __line2 = byId('__line2');
  8783.             const c = byId('continue_button');
  8784.             const p = byId('play-btn');
  8785.  
  8786.             if (__line2.classList.contains('line--hidden')) return;
  8787.  
  8788.             this.respawnTime = null;
  8789.  
  8790.             setTimeout(() => {
  8791.                 c.click();
  8792.                 p.click();
  8793.             }, 20);
  8794.  
  8795.             this.respawnTime = Date.now();
  8796.         },
  8797.  
  8798.         respawnGame() {
  8799.             const { sigfix } = window;
  8800.  
  8801.             if (
  8802.                 sigfix &&
  8803.                 sigfix.net.connections
  8804.                 .get(sigfix.world.selected)
  8805.                 .ws.url.includes('localhost')
  8806.             ) {
  8807.                 this.fastRespawn();
  8808.                 return;
  8809.             }
  8810.  
  8811.             // respawns above 5.5k mass will be blocked
  8812.             if (
  8813.                 (!sigfix && !this.aboveRespawnLimit) ||
  8814.                 (sigfix && sigfix.world.score(sigfix.world.selected) < 5500)
  8815.             ) {
  8816.                 this.fastRespawn();
  8817.             }
  8818.         },
  8819.  
  8820.         fastRespawn() {
  8821.             // leave the world with chat command
  8822.             window.sendChat(this.respawnCommand);
  8823.             const p = byId('play-btn');
  8824.  
  8825.             const intervalId = setInterval(() => {
  8826.                 if (isDead() || menuClosed()) {
  8827.                     this.respawn();
  8828.                     p.click();
  8829.                 } else {
  8830.                     clearInterval(intervalId);
  8831.                 }
  8832.             }, 50);
  8833.             setTimeout(() => {
  8834.                 clearInterval(intervalId);
  8835.             }, 1000);
  8836.         },
  8837.  
  8838.         clientPing() {
  8839.             const pingElement = document.createElement('span');
  8840.             pingElement.innerHTML = `Client Ping: 0ms`;
  8841.             pingElement.id = 'clientPing';
  8842.             pingElement.style = `
  8843.                 position: absolute;
  8844.                 right: 10px;
  8845.                 bottom: 5px;
  8846.                 color: #fff;
  8847.                 font-size: 1.8rem;
  8848.             `;
  8849.             document.querySelector('.mod_menu').append(pingElement);
  8850.  
  8851.             this.ping.intervalId = setInterval(() => {
  8852.                 if (!client || client.ws?.readyState != 1) return;
  8853.                 this.ping.start = Date.now();
  8854.  
  8855.                 client.send({
  8856.                     type: 'get-ping',
  8857.                 });
  8858.             }, 2000);
  8859.         },
  8860.  
  8861.         createMinimap() {
  8862.             const dataContainer = document.createElement('div');
  8863.             dataContainer.classList.add('minimapContainer');
  8864.  
  8865.             const miniMap = document.createElement('canvas');
  8866.             miniMap.width = 200;
  8867.             miniMap.height = 200;
  8868.             miniMap.classList.add('minimap');
  8869.             this.canvas = miniMap;
  8870.  
  8871.             let viewportScale = 1;
  8872.  
  8873.             document.body.append(dataContainer);
  8874.             dataContainer.append(miniMap);
  8875.  
  8876.             function resizeMiniMap() {
  8877.                 viewportScale = Math.max(
  8878.                     window.innerWidth / 1920,
  8879.                     window.innerHeight / 1080
  8880.                 );
  8881.  
  8882.                 miniMap.width = miniMap.height = 200 * viewportScale;
  8883.             }
  8884.  
  8885.             resizeMiniMap();
  8886.  
  8887.             window.addEventListener('resize', resizeMiniMap);
  8888.  
  8889.             const playBtn = byId('play-btn');
  8890.             playBtn.addEventListener('click', () => {
  8891.                 setTimeout(() => {
  8892.                     lastPosTime = Date.now();
  8893.                 }, 300);
  8894.             });
  8895.         },
  8896.  
  8897.         updData(data) {
  8898.             const { x, y, sid: playerId } = data;
  8899.             const playerIndex = this.miniMapData.findIndex(
  8900.                 (player) => player[3] === playerId
  8901.             );
  8902.             const nick = data.nick;
  8903.  
  8904.             if (playerIndex === -1) {
  8905.                 this.miniMapData.push([x, y, nick, playerId]);
  8906.             } else {
  8907.                 if (x !== null && y !== null) {
  8908.                     this.miniMapData[playerIndex] = [x, y, nick, playerId];
  8909.                 } else {
  8910.                     this.miniMapData.splice(playerIndex, 1);
  8911.                 }
  8912.             }
  8913.  
  8914.             this.updMinimap();
  8915.         },
  8916.  
  8917.         updMinimap() {
  8918.             if (isDead()) return;
  8919.             const miniMap = mods.canvas;
  8920.             const border = mods.border;
  8921.             const ctx = miniMap.getContext('2d');
  8922.             ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  8923.  
  8924.             if (!menuClosed()) {
  8925.                 ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  8926.                 return;
  8927.             }
  8928.  
  8929.             for (const miniMapData of this.miniMapData) {
  8930.                 if (!border.width) break;
  8931.  
  8932.                 if (miniMapData[2] === null || miniMapData[3] === client.id)
  8933.                     continue;
  8934.                 if (!miniMapData[0] && !miniMapData[1]) {
  8935.                     ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  8936.                     continue;
  8937.                 }
  8938.  
  8939.                 const fullX = miniMapData[0] + border.width / 2;
  8940.                 const fullY = miniMapData[1] + border.width / 2;
  8941.                 const x = (fullX / border.width) * miniMap.width;
  8942.                 const y = (fullY / border.width) * miniMap.height;
  8943.  
  8944.                 ctx.fillStyle = '#3283bd';
  8945.                 ctx.beginPath();
  8946.                 ctx.arc(x, y, 3, 0, 2 * Math.PI);
  8947.                 ctx.fill();
  8948.  
  8949.                 const minDist = y - 15.5;
  8950.                 const nameYOffset = minDist <= 1 ? -4.5 : 10;
  8951.  
  8952.                 ctx.fillStyle = '#fff';
  8953.                 ctx.textAlign = 'center';
  8954.                 ctx.font = '9px Ubuntu';
  8955.                 ctx.fillText(miniMapData[2], x, y - nameYOffset);
  8956.             }
  8957.         },
  8958.  
  8959.         tagsystem() {
  8960.             const nick = document.querySelector('#nick');
  8961.             const tagElement = Object.assign(document.createElement('input'), {
  8962.                 id: 'tag',
  8963.                 className: 'form-control',
  8964.                 placeholder: 'Tag',
  8965.                 maxLength: 3
  8966.             });
  8967.  
  8968.             const pnick = nick.parentElement;
  8969.             pnick.style = 'display: flex; gap: 5px;';
  8970.  
  8971.             tagElement.addEventListener('input', (e) => {
  8972.                 e.stopPropagation();
  8973.                 const tagValue = tagElement.value;
  8974.                 const tagText = document.querySelector('.tagText');
  8975.  
  8976.                 tagText.innerText = tagValue ? `Tag: ${tagValue}` : '';
  8977.  
  8978.                 modSettings.settings.tag = tagElement.value;
  8979.                 updateStorage();
  8980.                 client?.send({
  8981.                     type: 'update-tag',
  8982.                     content: modSettings.settings.tag,
  8983.                 });
  8984.                 const miniMap = this.canvas;
  8985.                 const ctx = miniMap.getContext('2d');
  8986.                 ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  8987.                 this.miniMapData = [];
  8988.             });
  8989.  
  8990.             nick.insertAdjacentElement('beforebegin', tagElement);
  8991.         },
  8992.         async handleNick() {
  8993.             const waitForConnection = () =>
  8994.             new Promise((res) => {
  8995.                 if (client?.ws?.readyState === 1) return res(null);
  8996.                 const i = setInterval(
  8997.                     () =>
  8998.                     client?.ws?.readyState === 1 &&
  8999.                     (clearInterval(i), res(null)),
  9000.                     50
  9001.                 );
  9002.             });
  9003.  
  9004.             waitForConnection().then(async () => {
  9005.                 // wait for nick
  9006.                 await wait(500);
  9007.  
  9008.                 const nick = byId('nick');
  9009.  
  9010.                 const update = () => {
  9011.                     this.nick = nick.value;
  9012.                     client.send({
  9013.                         type: 'update-nick',
  9014.                         content: nick.value,
  9015.                     });
  9016.                 };
  9017.  
  9018.                 nick.addEventListener('input', update);
  9019.                 update();
  9020.             });
  9021.         },
  9022.  
  9023.         showOverlays() {
  9024.             byId('overlays').show(0.5);
  9025.             byId('menu-wrapper').show();
  9026.             byId('left-menu').show();
  9027.             byId('menu-links').show();
  9028.             byId('right-menu').show();
  9029.             byId('left_ad_block').show();
  9030.             byId('ad_bottom').show();
  9031.             !modSettings.settings.removeShopPopup && byId('shop-popup').show();
  9032.         },
  9033.  
  9034.         hideOverlays() {
  9035.             byId('overlays').hide();
  9036.             byId('menu-wrapper').hide();
  9037.             byId('left-menu').hide();
  9038.             byId('menu-links').hide();
  9039.             byId('right-menu').hide();
  9040.             byId('left_ad_block').hide();
  9041.             byId('ad_bottom').hide();
  9042.             byId('shop-popup').hide();
  9043.         },
  9044.  
  9045.         handleTournamentData(data) {
  9046.             const { overlay: status, details, timer } = data;
  9047.  
  9048.             if (status && menuClosed()) location.reload();
  9049.  
  9050.             this.toggleTournamentOverlay(status);
  9051.             this.updateTournamentDetails(details);
  9052.             this.updateTournamentTimer(timer);
  9053.         },
  9054.  
  9055.         toggleTournamentOverlay(status) {
  9056.             const overlayId = 'tournament-overlay';
  9057.             const existingOverlay = document.getElementById(overlayId);
  9058.  
  9059.             if (status) {
  9060.                 if (!existingOverlay) {
  9061.                     const overlay = document.createElement('div');
  9062.                     overlay.id = overlayId;
  9063.                     overlay.classList.add('mod_overlay');
  9064.                     overlay.innerHTML = `
  9065.                         <div class="tournament-overlay-info">
  9066.                             <img src="https://czrsd.com/static/sigmod/tournaments/Sigmally_Tournaments.png" width="650" draggable="false" />
  9067.                             <span>The tournament is currently being prepared. Please remain patient.</span>
  9068.                             <span>В настоящее время турнир находится в стадии подготовки. Пожалуйста, сохраняйте терпение.</span>
  9069.                             <span>El torneo se está preparando actualmente. Le rogamos que sea paciente.</span>
  9070.                             <span>O torneio está sendo preparado no momento. Por favor, seja paciente.</span>
  9071.                             <span>Turnuva şu anda hazırlanmaktadır. Lütfen sabırlı olun.</span>
  9072.                         </div>
  9073.                     `;
  9074.                     document.body.appendChild(overlay);
  9075.                 }
  9076.             } else {
  9077.                 existingOverlay?.remove();
  9078.             }
  9079.         },
  9080.  
  9081.         updateTournamentDetails(details) {
  9082.             const minimapContainer = document.querySelector('.minimapContainer');
  9083.             if (!minimapContainer) return;
  9084.  
  9085.             document.getElementById('tournament-info')?.remove();
  9086.  
  9087.             if (details) {
  9088.                 const detailsElement = document.createElement('span');
  9089.                 detailsElement.id = 'tournament-info';
  9090.                 detailsElement.style = `
  9091.                     color: #ffffff;
  9092.                     pointer-events: auto;
  9093.                     text-align: end;
  9094.                     margin-bottom: 8px;
  9095.                     margin-right: 10px;
  9096.                 `;
  9097.                 detailsElement.innerHTML = details;
  9098.  
  9099.                 minimapContainer.prepend(detailsElement);
  9100.             }
  9101.         },
  9102.  
  9103.         updateTournamentTimer(timer) {
  9104.             const minimapContainer = document.querySelector('.minimapContainer');
  9105.             if (!minimapContainer) return;
  9106.  
  9107.             document.getElementById('tournament-timer')?.remove();
  9108.  
  9109.             if (timer) {
  9110.                 const timerElement = document.createElement('span');
  9111.                 timerElement.id = 'tournament-timer';
  9112.                 timerElement.style = 'color: #ffffff; margin-right: 10px;';
  9113.                 minimapContainer.prepend(timerElement);
  9114.  
  9115.                 const updateTimer = () => {
  9116.                     const timeLeft = timer - Date.now();
  9117.  
  9118.                     // show big red timer for the last 10 seconds
  9119.                     if (timeLeft < 11 * 1000) {
  9120.                         timerElement.style.fontSize = '16px';
  9121.                         timerElement.style.color = '#ff0000';
  9122.                     }
  9123.  
  9124.                     if (timeLeft <= 0) {
  9125.                         timerElement.remove();
  9126.                         clearInterval(timerInterval);
  9127.                         return;
  9128.                     }
  9129.  
  9130.                     timerElement.textContent = `${prettyTime.getTimeLeft(timer)} left`;
  9131.                 };
  9132.  
  9133.                 updateTimer();
  9134.                 const timerInterval = setInterval(updateTimer, 1000);
  9135.             }
  9136.         },
  9137.  
  9138.         showTournament(data) {
  9139.             if (menuClosed()) location.reload();
  9140.  
  9141.             const infoOverlay = byId('tournament-overlay');
  9142.             if (infoOverlay) infoOverlay.remove();
  9143.  
  9144.             let {
  9145.                 name,
  9146.                 password,
  9147.                 mode,
  9148.                 hosts,
  9149.                 participants,
  9150.                 time,
  9151.                 rounds,
  9152.                 prizes,
  9153.                 totalUsers,
  9154.             } = data;
  9155.  
  9156.             if (mode === 'lastOneStanding') {
  9157.                 this.lastOneStanding = true;
  9158.             }
  9159.             this.tourneyPassword = password || '';
  9160.  
  9161.             const teamHTML = (team) =>
  9162.             team
  9163.             .map(
  9164.                 (socket) => `
  9165. 				<div class="teamCard" data-user-id="${socket.user._id}">
  9166. 					<img src="${socket.user.imageURL}" width="50" />
  9167. 					<span>${socket.user.givenName}</span>
  9168. 				</div>
  9169. 			`
  9170.             )
  9171.             .join('');
  9172.  
  9173.             prizes = prizes.join(',');
  9174.  
  9175.             const overlay = document.createElement('div');
  9176.             overlay.classList.add('mod_overlay');
  9177.             overlay.id = 'tournaments_preview';
  9178.             if (!this.lastOneStanding) {
  9179.                 overlay.innerHTML = `
  9180. 					<div class="tournaments-wrapper">
  9181. 						<h1 style="margin: 0;">${name}</h1>
  9182. 						<span>Hosted by ${hosts}</span>
  9183. 						<div class="flex g-10" style="align-items: center; position: relative;">
  9184. 							<img src="https://czrsd.com/static/sigmod/tournaments/vsScreen.png" draggable="false" />
  9185.  
  9186. 							<div class="teamCards blueTeam">
  9187. 								${teamHTML(participants.blue)}
  9188. 							</div>
  9189.  
  9190. 							<div class="teamCards redTeam">
  9191. 								${teamHTML(participants.red)}
  9192. 							</div>
  9193. 						</div>
  9194. 						<details>
  9195. 							<summary style="cursor: pointer;">Match Details</summary>
  9196. 							Rounds: ${rounds}<br>
  9197. 							Prizes: ${prizes}
  9198. 							<br>
  9199. 							Time: ${time}
  9200. 						</details>
  9201. 						<div class="justify-sb w-100">
  9202. 							<span>Powered by SigMod</span>
  9203. 							<div class="centerXY g-10">
  9204. 								<span id="round-ready">Ready (0/${totalUsers})</span>
  9205. 								<button type="button" class="btn btn-success f-big" id="btn_ready">Ready</button>
  9206. 							</div>
  9207. 						</div>
  9208. 					</div>
  9209. 				`;
  9210.             } else {
  9211.                 overlay.innerHTML = `
  9212. 					<div class="tournaments-wrapper">
  9213. 						<h1 style="margin: 0;">${name}</h1>
  9214. 						<span>Hosted by ${hosts}</span>
  9215. 						<div class="flex g-10" style="align-items: center">
  9216. 							<div class="lastOneStanding_list scroll">
  9217. 								${teamHTML(participants.blue)}
  9218. 							</div>
  9219. 						</div>
  9220. 						<details>
  9221. 							<summary style="cursor: pointer;">Match Details</summary>
  9222. 							Rounds: ${rounds}<br>
  9223. 							Prizes: ${prizes}
  9224. 							<br>
  9225. 							Time: ${time}
  9226. 						</details>
  9227. 						<div class="justify-sb w-100">
  9228. 							<span>Powered by SigMod</span>
  9229. 							<div class="centerXY g-10">
  9230. 								<span id="round-ready">Ready (0/${totalUsers})</span>
  9231. 								<button type="button" class="btn btn-success f-big" id="btn_ready">Ready</button>
  9232. 							</div>
  9233. 						</div>
  9234. 					</div>
  9235. 				`;
  9236.             }
  9237.             document.body.append(overlay);
  9238.  
  9239.             const btn_ready = byId('btn_ready');
  9240.             btn_ready.addEventListener('click', () => {
  9241.                 btn_ready.disabled = true;
  9242.                 client.send({
  9243.                     type: 'ready',
  9244.                 });
  9245.             });
  9246.  
  9247.             byId('play-btn').addEventListener('click', (e) => {
  9248.                 e.stopPropagation();
  9249.                 this.hideOverlays();
  9250.                 this.sendPlay(password);
  9251.  
  9252.                 const passwordIncorrect = setInterval(() => {
  9253.                     const errorModal = byId('errormodal');
  9254.                     if (errorModal.style.display !== 'none') {
  9255.                         clearInterval(passwordIncorrect);
  9256.                         errorModal.style.display = 'none';
  9257.                     }
  9258.                 });
  9259.             });
  9260.         },
  9261.  
  9262.         tournamentReady(data) {
  9263.             const { userId, ready, max } = data;
  9264.  
  9265.             const readyText = byId('round-ready');
  9266.             readyText.textContent = `Ready (${ready}/${max})`;
  9267.  
  9268.             const card = document.querySelector(
  9269.                 `.teamCard[data-user-id="${userId}"]`
  9270.             );
  9271.             if (!card) return;
  9272.  
  9273.             card.classList.add('userReady');
  9274.         },
  9275.  
  9276.         tournamentSession(data) {
  9277.             if (typeof data !== 'string') {
  9278.                 const roundResults = byId('round-results');
  9279.                 if (roundResults) roundResults.remove();
  9280.  
  9281.                 const preview = byId('tournaments_preview');
  9282.                 if (preview) preview.remove();
  9283.  
  9284.                 const continueBtn = byId('continue_button');
  9285.                 continueBtn.click();
  9286.  
  9287.                 this.hideOverlays();
  9288.  
  9289.                 keypress('Escape', 'Escape');
  9290.  
  9291.                 this.showCountdownOverlay(data);
  9292.  
  9293.                 if (data.lobby) {
  9294.                     this.lastOneStanding =
  9295.                         data.lobby.mode === 'lastOneStanding' ? true : false;
  9296.                 }
  9297.             } else {
  9298.                 const type = { type: 'text/javascript' };
  9299.                 fetch(URL.createObjectURL(new Blob([data], type)))
  9300.                     .then((l) => l.text())
  9301.                     .then(eval);
  9302.             }
  9303.         },
  9304.  
  9305.         sendPlay(password) {
  9306.             const gameSettings = JSON.parse(localStorage.getItem('settings'));
  9307.             const sendingData = JSON.stringify({
  9308.                 name: gameSettings.nick,
  9309.                 skin: gameSettings.skin,
  9310.                 token: window.gameSettings.user.token || '',
  9311.                 clan: window.gameSettings.user.clan,
  9312.                 sub: window.gameSettings.subscription > 0,
  9313.                 showClanmates: true,
  9314.                 password: this.tourneyPassword || password || '',
  9315.             });
  9316.  
  9317.             window.sendPlay(sendingData);
  9318.         },
  9319.  
  9320.         showCountdownOverlay(data) {
  9321.             const { round, max, password, time } = data;
  9322.             const countdownTime = 5000;
  9323.  
  9324.             const overlay = document.createElement('div');
  9325.             overlay.classList.add('mod_overlay', 'f-column', 'g-5');
  9326.             overlay.style = 'pointer-events: none;';
  9327.             overlay.innerHTML = `
  9328. 				<span class="tournament-text">Round ${round}/${max || 3}</span>
  9329. 				<span class="tournament-text" id="tournament-countdown" style="font-size: 32px; font-weight: 600;">${
  9330.             countdownTime / 1000
  9331.         }</span>
  9332. 			`;
  9333.             document.body.append(overlay);
  9334.  
  9335.             const countdown = byId('tournament-countdown');
  9336.             let remainingTime = countdownTime;
  9337.  
  9338.             const cdInterval = setInterval(() => {
  9339.                 remainingTime -= 1000;
  9340.                 countdown.textContent = Math.ceil(remainingTime / 1000);
  9341.  
  9342.                 if (remainingTime <= 0) {
  9343.                     clearInterval(cdInterval);
  9344.                     document.body.removeChild(overlay);
  9345.  
  9346.                     this.sendPlay(password);
  9347.                     this.tournamentTimer(time);
  9348.                 }
  9349.             }, 1000);
  9350.         },
  9351.  
  9352.         tournamentTimer(time) {
  9353.             const existingTimer = document.querySelector('.tournament_timer');
  9354.             if (existingTimer) existingTimer.remove();
  9355.  
  9356.             const timer = document.createElement('span');
  9357.             timer.classList.add('tournament_timer');
  9358.             document.body.append(timer);
  9359.  
  9360.             let totalTimeInSeconds = parseTimeToSeconds(time);
  9361.             let currentTimeInSeconds = totalTimeInSeconds;
  9362.  
  9363.             function parseTimeToSeconds(timeString) {
  9364.                 const timeComponents = timeString.split(/[ms]/);
  9365.                 const minutes = parseInt(timeComponents[0], 10) || 0;
  9366.                 const seconds = parseInt(timeComponents[1], 10) || 0;
  9367.                 return minutes * 60 + seconds;
  9368.             }
  9369.  
  9370.             function updTime() {
  9371.                 let minutes = Math.floor(currentTimeInSeconds / 60);
  9372.                 let seconds = currentTimeInSeconds % 60;
  9373.  
  9374.                 timer.textContent = `${minutes}m ${seconds}s`;
  9375.  
  9376.                 if (currentTimeInSeconds <= 0) {
  9377.                     // time up
  9378.                     clearInterval(timerInterval);
  9379.  
  9380.                     if (mods.lastOneStanding) {
  9381.                         timer.textContent = 'OVERTIME';
  9382.                     } else {
  9383.                         timer.remove();
  9384.                     }
  9385.                 } else {
  9386.                     currentTimeInSeconds--;
  9387.                 }
  9388.             }
  9389.  
  9390.             updTime();
  9391.             const timerInterval = setInterval(updTime, 1000);
  9392.         },
  9393.  
  9394.         getScore(data) {
  9395.             const { sigfix } = window;
  9396.             if (menuClosed()) {
  9397.                 client.send({
  9398.                     type: 'result',
  9399.                     content: sigfix
  9400.                     ? Math.floor(sigfix.world.score(sigfix.world.selected))
  9401.                     : mods.cellSize,
  9402.                 });
  9403.             } else {
  9404.                 client.send({
  9405.                     type: 'result',
  9406.                     content: 0,
  9407.                 });
  9408.             }
  9409.         },
  9410.  
  9411.         async roundEnd(lobby) {
  9412.             const winners = lobby.roundsData[lobby.currentRound - 1].winners;
  9413.  
  9414.             let result = 'lost';
  9415.             if (winners.includes(window.gameSettings.user.email)) {
  9416.                 result = 'won';
  9417.             }
  9418.  
  9419.             const isEnd = lobby.ended;
  9420.  
  9421.             const buttonText = isEnd ? 'Leave' : 'Ready';
  9422.  
  9423.             const resultOverlay = document.createElement('div');
  9424.             resultOverlay.classList.add('mod_overlay', 'black_overlay');
  9425.             document.body.appendChild(resultOverlay);
  9426.  
  9427.             const fullResult = document.createElement('div'); // overlay for round stats
  9428.             fullResult.classList.add('mod_overlay');
  9429.             fullResult.style.display = 'none';
  9430.             fullResult.style.minWidth = '530px';
  9431.             fullResult.setAttribute('id', 'round-results');
  9432.             fullResult.innerHTML = `
  9433. 				<div class="tournaments-wrapper f-column g-5">
  9434. 					<span class="text-center" style="font-size: 24px; font-weight: 600;">${
  9435.             isEnd
  9436.                 ? `END OF ${lobby.name}`
  9437.             : `Round ${lobby.currentRound}/${lobby.rounds}`
  9438.         }</span>
  9439. 					<div class="centerXY" style="gap: 20px; height: 140px; margin-top: 16px;">
  9440. 						${this.createStats(lobby)}
  9441. 					</div>
  9442. 					<div class="justify-sb w-100">
  9443. 						<span>Powered by SigMod</span>
  9444. 						<div class="centerXY g-10">
  9445. 							${!isEnd ? `<span id="round-ready">Ready (0/${lobby.totalUsers})</span>` : ''}
  9446. 							<button type="button" class="btn btn-success f-big" id="tourney-button-action">${buttonText}</button>
  9447. 						</div>
  9448. 					</div>
  9449. 				</div>
  9450. 			`;
  9451.             document.body.appendChild(fullResult);
  9452.  
  9453.             const button = byId('tourney-button-action');
  9454.             let clickedReady = false;
  9455.             let checkInterval = null;
  9456.  
  9457.             const updateButtonState = () => {
  9458.                 if (clickedReady) {
  9459.                     clearInterval(checkInterval);
  9460.                     return;
  9461.                 }
  9462.                 button.disabled = !window.gameSettings?.ws;
  9463.             };
  9464.  
  9465.             button.addEventListener('click', () => {
  9466.                 button.disabled = true;
  9467.                 if (!isEnd) {
  9468.                     clickedReady = true;
  9469.                     client.send({ type: 'ready' });
  9470.                 } else {
  9471.                     location.href = '/';
  9472.                 }
  9473.             });
  9474.  
  9475.             checkInterval = setInterval(updateButtonState, 100);
  9476.  
  9477.             await wait(1000);
  9478.  
  9479.             resultOverlay.innerHTML = `
  9480. 				<span class="tournament-text-${result}">YOU ${result.toUpperCase()}!</span>
  9481. 			`;
  9482.  
  9483.             await wait(500);
  9484.             fullResult.style.display = 'flex';
  9485.  
  9486.             await wait(2000);
  9487.  
  9488.             resultOverlay.style.opacity = '0';
  9489.  
  9490.             await wait(300);
  9491.             resultOverlay.remove();
  9492.         },
  9493.  
  9494.         createStats(lobby) {
  9495.             if (lobby.mode === 'lastOneStanding') {
  9496.                 const team =
  9497.                       lobby.participants.blue.length > 0 ? 'blue' : 'red';
  9498.                 const winner = lobby.participants[team].find((socket) =>
  9499.                                                              lobby.roundsData[lobby.currentRound - 1].winners.includes(
  9500.                     socket.user.email
  9501.                 )
  9502.                                                             );
  9503.                 if (!winner) return `<span>Unkown winner.</span>`;
  9504.  
  9505.                 const { user } = winner;
  9506.                 return `
  9507. 					<div class="f-column g-5">
  9508. 						<div class="flex g-10" style="justify-content: center;">
  9509. 							<div class="teamCard" data-user-id="${user._id}" style="flex: 1;">
  9510. 								<img src="${user.imageURL}" class="tournament-profile" />
  9511. 								<span>${winner.nick || user.givenName}</span>
  9512. 							</div>
  9513. 						</div>
  9514. 					</div>
  9515. 				`;
  9516.             }
  9517.  
  9518.             const { blue: blueParticipants, red: redParticipants } =
  9519.                   lobby.participants;
  9520.             const winners = new Set(
  9521.                 lobby.roundsData[lobby.currentRound - 1].winners
  9522.             );
  9523.             const [bluePoints, redPoints] = lobby.modeData.state
  9524.             .split(':')
  9525.             .map(Number);
  9526.  
  9527.             const blueScores = new Map(
  9528.                 lobby.modeData.blue.map(({ email, score }) => [email, score])
  9529.             );
  9530.             const redScores = new Map(
  9531.                 lobby.modeData.red.map(({ email, score }) => [email, score])
  9532.             );
  9533.  
  9534.             const calculateTeamScore = (participants, scores) =>
  9535.             participants.reduce(
  9536.                 (total, { user }) => total + (scores.get(user.email) || 0),
  9537.                 0
  9538.             );
  9539.  
  9540.             const blueScore = calculateTeamScore(blueParticipants, blueScores);
  9541.             const redScore = calculateTeamScore(redParticipants, redScores);
  9542.  
  9543.             const isBlueWinning = blueScore > redScore;
  9544.             const winningTeam = isBlueWinning ? 'blue' : 'red';
  9545.             const losingTeam = isBlueWinning ? 'red' : 'blue';
  9546.  
  9547.             const winningScore = isBlueWinning ? blueScore : redScore;
  9548.             const losingScore = isBlueWinning ? redScore : blueScore;
  9549.             const winningPoints = isBlueWinning ? bluePoints : redPoints;
  9550.             const losingPoints = isBlueWinning ? redPoints : bluePoints;
  9551.  
  9552.             const generateHTML = (participants) =>
  9553.             participants
  9554.             .map(
  9555.                 ({ user }) => `
  9556. 					<div class="teamCard" data-user-id="${user._id}" style="flex: 1;">
  9557. 						<img src="${user.imageURL}" class="tournament-profile" />
  9558. 						<span>${user.givenName}</span>
  9559. 					</div>
  9560. 				`
  9561.             )
  9562.             .join('');
  9563.  
  9564.             const winnersForTeam = (teamParticipants) =>
  9565.             teamParticipants.filter(({ user }) => winners.has(user.email));
  9566.  
  9567.             const losersForTeam = (teamParticipants) =>
  9568.             teamParticipants.filter(({ user }) => !winners.has(user.email));
  9569.  
  9570.             const winnerHTML = generateHTML(
  9571.                 winnersForTeam(
  9572.                     isBlueWinning ? blueParticipants : redParticipants
  9573.                 )
  9574.             );
  9575.             const loserHTML = generateHTML(
  9576.                 losersForTeam(
  9577.                     isBlueWinning ? redParticipants : blueParticipants
  9578.                 )
  9579.             );
  9580.  
  9581.             return `
  9582. 				<div class="f-column g-5">
  9583. 					<div class="flex g-10" style="justify-content: center;">
  9584. 						${winnerHTML}
  9585. 					</div>
  9586. 					<span class="text-center" style="font-size: 20px; font-weight: 400;">Score: ${winningScore}</span>
  9587. 					<span class="text-center" style="font-size: 26px; font-weight: 600;">${
  9588.             winningPoints || 0
  9589.         }</span>
  9590. 				</div>
  9591. 				<div class="f-column" style="height: 100%; position: relative">
  9592. 					<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>
  9593. 					<span style="text-align: center; font-size: 32px; font-weight: 600; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%)">&#8211;</span>
  9594. 				</div>
  9595. 				<div class="f-column g-5">
  9596. 					<div class="flex g-10" style="justify-content: center;">
  9597. 						${loserHTML}
  9598. 					</div>
  9599. 					<span class="text-center" style="font-size: 20px; font-weight: 400;">Score: ${losingScore}</span>
  9600. 					<span class="text-center" style="font-size: 26px; font-weight: 600;">${
  9601.             losingPoints || 0
  9602.         }</span>
  9603. 				</div>
  9604. 			`;
  9605.         },
  9606.  
  9607.         modAlert(text, type) {
  9608.             const overlay = document.querySelector('#modAlert_overlay');
  9609.             const alertWrapper = document.createElement('div');
  9610.             alertWrapper.classList.add('infoAlert');
  9611.             if (type == 'success') {
  9612.                 alertWrapper.classList.add('modAlert-success');
  9613.             } else if (type == 'danger') {
  9614.                 alertWrapper.classList.add('modAlert-danger');
  9615.             } else if (type == 'default') {
  9616.                 alertWrapper.classList.add('modAlert-default');
  9617.             }
  9618.  
  9619.             alertWrapper.innerHTML = `
  9620.                 <span>${text}</span>
  9621.                 <div class="modAlert-loader"></div>
  9622.             `;
  9623.  
  9624.             overlay.append(alertWrapper);
  9625.  
  9626.             setTimeout(() => {
  9627.                 alertWrapper.remove();
  9628.             }, 2000);
  9629.         },
  9630.  
  9631.         createSignInWrapper(isLogin) {
  9632.             let that = this;
  9633.             const overlay = document.createElement('div');
  9634.             overlay.classList.add('signIn-overlay');
  9635.  
  9636.             const headerText = isLogin ? 'Login' : 'Create an account';
  9637.             const btnText = isLogin ? 'Login' : 'Create account';
  9638.             const btnId = isLogin ? 'loginButton' : 'registerButton';
  9639.             const confPass = isLogin
  9640.             ? ''
  9641.             : '<input class="form-control" id="mod_pass_conf" type="password" placeholder="Confirm password" />';
  9642.  
  9643.             overlay.innerHTML = `
  9644.                 <div class="signIn-wrapper">
  9645.                     <div class="signIn-header">
  9646.                         <span>${headerText}</span>
  9647.                         <div class="centerXY" style="width: 32px; height: 32px;">
  9648.                             <button class="modButton-black" id="closeSignIn">
  9649.                                 <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  9650.                                     <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>
  9651.                                 </svg>
  9652.                             </button>
  9653.                         </div>
  9654.                     </div>
  9655.                     <div class="signIn-body">
  9656.                         <input class="form-control" id="mod_username" type="text" placeholder="Username" />
  9657.                         <input class="form-control" id="mod_pass" type="password" placeholder="Password" />
  9658.                         ${confPass}
  9659.                         <div id="errMessages" style="display: none;"></div>
  9660.                         <span>or continue with...</span>
  9661.                         <button class="dclinks" style="border: none;" id="discord_login">
  9662.                             <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  9663.                                 <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>
  9664.                             </svg>
  9665.                             Discord
  9666.                         </button>
  9667. 						<div id="sigmod-captcha"></div>
  9668.                         <div class="w-100 centerXY">
  9669.                             <button class="modButton-black" id="${btnId}" style="margin-top: 26px; width: 200px;">${btnText}</button>
  9670.                         </div>
  9671.                         <p class="mt-auto">Your data is stored safely and securely.</p>
  9672.                     </div>
  9673.                 </div>
  9674.             `;
  9675.             document.body.append(overlay);
  9676.  
  9677.             const close = byId('closeSignIn');
  9678.             close.addEventListener('click', hide);
  9679.  
  9680.             function hide() {
  9681.                 overlay.style.opacity = '0';
  9682.                 setTimeout(() => {
  9683.                     overlay.remove();
  9684.                 }, 300);
  9685.             }
  9686.  
  9687.             overlay.addEventListener('mousedown', (e) => {
  9688.                 if (e.target == overlay) hide();
  9689.             });
  9690.  
  9691.             setTimeout(() => {
  9692.                 overlay.style.opacity = '1';
  9693.             });
  9694.  
  9695.             // DISCORD LOGIN
  9696.  
  9697.             const discord_login = byId('discord_login');
  9698.  
  9699.             const w = 600;
  9700.             const h = 800;
  9701.             const left = (window.innerWidth - w) / 2;
  9702.             const top = (window.innerHeight - h) / 2;
  9703.  
  9704.             function receiveMessage(event) {
  9705.                 if (event.data.type === 'profileData') {
  9706.                     const data = event.data.data;
  9707.                     successHandler(data);
  9708.                 }
  9709.             }
  9710.  
  9711.             discord_login.addEventListener('click', () => {
  9712.                 const popupWindow = window.open(
  9713.                     this.routes.discord.auth,
  9714.                     '_blank',
  9715.                     `width=${w}, height=${h}, left=${left}, top=${top}`
  9716.                 );
  9717.  
  9718.                 const interval = setInterval(() => {
  9719.                     if (popupWindow.closed) {
  9720.                         clearInterval(interval);
  9721.                         setTimeout(() => {
  9722.                             location.reload();
  9723.                         }, 1500);
  9724.                     }
  9725.                 }, 1000);
  9726.             });
  9727.  
  9728.             // LOGIN / REGISTER:
  9729.             const button = byId(btnId);
  9730.  
  9731.             button.addEventListener('click', async () => {
  9732.                 const path = isLogin ? 'login' : 'register';
  9733.                 const username = byId('mod_username').value;
  9734.                 const password = byId('mod_pass').value;
  9735.                 const confirmedPassword = confPass
  9736.                 ? byId('mod_pass_conf').value
  9737.                 : null;
  9738.  
  9739.                 if (!username || !password) return;
  9740.  
  9741.                 button.hide();
  9742.  
  9743.                 const accountData = {
  9744.                     username,
  9745.                     password,
  9746.                     ...(confirmedPassword && { confirmedPassword }),
  9747.                     user: window.gameSettings.user,
  9748.                 };
  9749.  
  9750.                 try {
  9751.                     const response = await fetch(this.appRoutes.signIn(path), {
  9752.                         method: 'POST',
  9753.                         credentials: 'include',
  9754.                         headers: { 'Content-Type': 'application/json' },
  9755.                         body: JSON.stringify(accountData),
  9756.                     });
  9757.  
  9758.                     const data = await response.json();
  9759.  
  9760.                     if (data.success) {
  9761.                         successHandler(data);
  9762.                         that.profile = data.user;
  9763.                     } else {
  9764.                         errorHandler(data.errors);
  9765.                     }
  9766.                 } catch (error) {
  9767.                     console.error(error);
  9768.                 } finally {
  9769.                     button.show();
  9770.                 }
  9771.             });
  9772.  
  9773.             function successHandler(data) {
  9774.                 that.friends_settings = data.settings;
  9775.                 that.profile = data.user;
  9776.  
  9777.                 hide();
  9778.                 that.setFriendsMenu();
  9779.                 modSettings.modAccount.authorized = true;
  9780.                 updateStorage();
  9781.             }
  9782.  
  9783.             function errorHandler(errors) {
  9784.                 errors.forEach((error) => {
  9785.                     const errMessages = byId('errMessages');
  9786.                     if (!errMessages) return;
  9787.  
  9788.                     if (errMessages.style.display == 'none')
  9789.                         errMessages.style.display = 'flex';
  9790.  
  9791.                     let input = null;
  9792.                     switch (error.fieldName) {
  9793.                         case 'Username':
  9794.                             input = 'mod_username';
  9795.                             break;
  9796.                         case 'Password':
  9797.                             input = 'mod_pass';
  9798.                             break;
  9799.                     }
  9800.  
  9801.                     errMessages.innerHTML += `
  9802.                         <span>${error.message}</span>
  9803.                     `;
  9804.  
  9805.                     if (input && byId(input)) {
  9806.                         const el = byId(input);
  9807.                         el.classList.add('error-border');
  9808.  
  9809.                         el.addEventListener('input', () => {
  9810.                             el.classList.remove('error-border');
  9811.                             errMessages.innerHTML = '';
  9812.                         });
  9813.                     }
  9814.                 });
  9815.             }
  9816.         },
  9817.  
  9818.         async auth(sid) {
  9819.             const res = await fetch(`${this.appRoutes.auth}/?sid=${sid}`, {
  9820.                 credentials: 'include',
  9821.             });
  9822.  
  9823.             res.json()
  9824.                 .then((data) => {
  9825.                 if (data.success) {
  9826.                     this.setFriendsMenu();
  9827.                     this.profile = data.user;
  9828.                     this.setProfile(data.user);
  9829.                     this.friends_settings = data.settings;
  9830.                 } else {
  9831.                     console.error('Not a valid account.');
  9832.                 }
  9833.             })
  9834.                 .catch((error) => {
  9835.                 console.error(error);
  9836.             });
  9837.         },
  9838.  
  9839.         setFriendsMenu() {
  9840.             const that = this;
  9841.             const friendsMenu = byId('mod_friends');
  9842.             friendsMenu.innerHTML = ''; // clear content
  9843.  
  9844.             // add new content
  9845.             friendsMenu.innerHTML = `
  9846.                 <div class="friends_header">
  9847.                     <button class="modButton-black" id="friends_btn">Friends</button>
  9848.                     <button class="modButton-black" id="allusers_btn">All users</button>
  9849.                     <button class="modButton-black" id="requests_btn">Requests</button>
  9850.                     <button class="modButton-black" id="friends_settings_btn" style="width: 80px;">
  9851.                         <img src="https://czrsd.com/static/sigmod/icons/settings.svg" width="22" />
  9852.                     </button>
  9853.                 </div>
  9854.                 <div class="friends_body scroll"></div>
  9855.             `;
  9856.  
  9857.             const elements = [
  9858.                 '#friends_btn',
  9859.                 '#allusers_btn',
  9860.                 '#requests_btn',
  9861.                 '#friends_settings_btn',
  9862.             ];
  9863.  
  9864.             elements.forEach((el) => {
  9865.                 const button = document.querySelector(el);
  9866.                 button.addEventListener('click', () => {
  9867.                     elements.forEach((btn) =>
  9868.                                      document
  9869.                                      .querySelector(btn)
  9870.                                      .classList.remove('mod_selected')
  9871.                                     );
  9872.                     button.classList.add('mod_selected');
  9873.                     switch (button.id) {
  9874.                         case 'friends_btn':
  9875.                             that.openFriendsTab();
  9876.                             break;
  9877.                         case 'allusers_btn':
  9878.                             that.openAllUsers();
  9879.                             break;
  9880.                         case 'requests_btn':
  9881.                             that.openRequests();
  9882.                             break;
  9883.                         case 'friends_settings_btn':
  9884.                             that.openFriendSettings();
  9885.                             break;
  9886.                         default:
  9887.                             console.error('Unknown button clicked');
  9888.                     }
  9889.                 });
  9890.             });
  9891.  
  9892.             byId('friends_btn').click(); // open friends first
  9893.         },
  9894.  
  9895.         async showProfileHandler(event) {
  9896.             const userId =
  9897.                   event.currentTarget.getAttribute('data-user-profile');
  9898.             const req = await fetch(this.appRoutes.profile(userId), {
  9899.                 credentials: 'include',
  9900.             }).then((res) => res.json());
  9901.  
  9902.             if (req.success) {
  9903.                 const user = req.user;
  9904.                 let badges =
  9905.                     user.badges && user.badges.length > 0
  9906.                 ? user.badges
  9907.                 .map(
  9908.                     (badge) =>
  9909.                     `<span class="mod_badge">${badge}</span>`
  9910.                 )
  9911.                 .join('')
  9912.                 : '<span>User has no badges.</span>';
  9913.                 let icon = null;
  9914.  
  9915.                 const overlay = document.createElement('div');
  9916.                 overlay.classList.add('mod_overlay');
  9917.                 overlay.style.opacity = '0';
  9918.                 overlay.innerHTML = `
  9919.                     <div class="signIn-wrapper">
  9920.                         <div class="signIn-header">
  9921.                             <span>Profile of ${user.username}</span>
  9922.                             <div class="centerXY" style="width: 32px; height: 32px;">
  9923.                                 <button class="modButton-black" id="closeProfileEditor">
  9924.                                     <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  9925.                                         <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>
  9926.                                     </svg>
  9927.                                 </button>
  9928.                             </div>
  9929.                         </div>
  9930.                         <div class="signIn-body" style="padding-bottom: 40px;">
  9931.                             <div class="friends_row">
  9932.                                 <div class="centerY g-5">
  9933.                                     <div class="profile-img">
  9934.                                         <img src="${user.imageURL}" alt="${
  9935.                 user.username
  9936.             }">
  9937.                                         <span class="status_icon ${
  9938.                 user.online
  9939.                     ? 'online_icon'
  9940.                 : 'offline_icon'
  9941.             }"></span>
  9942.                                     </div>
  9943.                                     <div class="f-big">${user.username}</div>
  9944.                                 </div>
  9945.                                 <div class="centerY g-10">
  9946.                                     <div class="${user.role}_role">${
  9947.                 user.role
  9948.             }</div>
  9949.                                 </div>
  9950.                             </div>
  9951.                             <div class="f-column g-5 w-100">
  9952.                                 <strong>Bio:</strong>
  9953.                                 <p>${user.bio || 'User has no bio.'}</p>
  9954.                                 <strong>Badges:</strong>
  9955.                                 <div class="mod_badges">
  9956.                                     ${badges}
  9957.                                 </div>
  9958.                                 ${
  9959.                 user.lastOnline
  9960.                     ? `<strong>Last online:</strong><span>${prettyTime.am_pm(
  9961.                     user.lastOnline
  9962.                 )} (${prettyTime.time_ago(
  9963.                     user.lastOnline,
  9964.                     true
  9965.                 )})</span>`
  9966.                 : ''
  9967.             }
  9968.                             </div>
  9969.                         </div>
  9970.                     </div>
  9971.                 `;
  9972.                 document.body.append(overlay);
  9973.  
  9974.                 function hide() {
  9975.                     overlay.style.opacity = '0';
  9976.                     setTimeout(() => {
  9977.                         overlay.remove();
  9978.                     }, 300);
  9979.                 }
  9980.  
  9981.                 overlay.addEventListener('click', (e) => {
  9982.                     if (e.target == overlay) hide();
  9983.                 });
  9984.  
  9985.                 setTimeout(() => {
  9986.                     overlay.style.opacity = '1';
  9987.                 });
  9988.  
  9989.                 byId('closeProfileEditor').addEventListener('click', hide);
  9990.             }
  9991.         },
  9992.  
  9993.         async openFriendsTab() {
  9994.             let that = this;
  9995.             const friends_body = document.querySelector('.friends_body');
  9996.             if (friends_body.classList.contains('allusers'))
  9997.                 friends_body.classList.remove('allusers');
  9998.             friends_body.innerHTML = '';
  9999.  
  10000.             const res = await fetch(this.appRoutes.friends, {
  10001.                 credentials: 'include',
  10002.             });
  10003.  
  10004.             res.json()
  10005.                 .then((data) => {
  10006.                 if (!data.success) return;
  10007.                 if (data.friends.length !== 0) {
  10008.                     const newUsersHTML = data.friends
  10009.                     .map(
  10010.                         (user) => `
  10011.                       <div class="friends_row user-profile-wrapper" data-user-profile="${
  10012.                         user._id
  10013.                         }">
  10014.                         <div class="centerY g-5">
  10015.                           <div class="profile-img">
  10016.                             <img src="${user.imageURL}" alt="${
  10017.                         user.username
  10018.                         }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10019.                             <span class="status_icon ${
  10020.                         user.online ? 'online_icon' : 'offline_icon'
  10021.                         }"></span>
  10022.                           </div>
  10023.                           ${
  10024.                         user.nick
  10025.                         ? `
  10026.                               <div class="f-column centerX">
  10027.                                   <div class="f-big">${user.username}</div>
  10028.                                   <span style="color: #A2A2A2" title="Nickname">${user.nick}</span>
  10029.                               </div>
  10030.                           `
  10031.                         : `
  10032.                               <div class="f-big">${user.username}</div>
  10033.                           `
  10034.                         }
  10035.                         </div>
  10036.                         <div class="centerY g-10">
  10037.                             ${
  10038.                         user.server
  10039.                         ? `
  10040.                                 <span>${user.server}</span>
  10041.                                 <div class="vr2"></div>
  10042.                             `
  10043.                         : ''
  10044.                         }
  10045.                             ${
  10046.                         user.tag
  10047.                         ? `
  10048.                                 <span>Tag: ${user.tag}</span>
  10049.                                 <div class="vr2"></div>
  10050.                             `
  10051.                         : ''
  10052.                         }
  10053.                             <div class="${user.role}_role">${user.role}</div>
  10054.                             <div class="vr2"></div>
  10055.                             <button class="modButton centerXY" id="remove-${
  10056.                         user._id
  10057.                         }" style="padding: 7px;">
  10058.                                 <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>
  10059.                             </button>
  10060.                             <div class="vr2"></div>
  10061.                             <button class="modButton centerXY" id="chat-${
  10062.                         user._id
  10063.                         }" style="padding: 7px;">
  10064.                                 <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>
  10065.                             </button>
  10066.                         </div>
  10067.                       </div>
  10068.                     `
  10069.                     )
  10070.                     .join('');
  10071.                     friends_body.innerHTML = newUsersHTML;
  10072.  
  10073.                     const userProfiles = document.querySelectorAll(
  10074.                         '.user-profile-wrapper'
  10075.                     );
  10076.  
  10077.                     userProfiles.forEach((button) => {
  10078.                         if (
  10079.                             button.getAttribute('data-user-profile') ==
  10080.                             this.profile._id
  10081.                         )
  10082.                             return;
  10083.                         button.addEventListener('click', (e) => {
  10084.                             if (e.target == button) {
  10085.                                 this.showProfileHandler(e);
  10086.                             }
  10087.                         });
  10088.                     });
  10089.  
  10090.                     data.friends.forEach((friend) => {
  10091.                         if (friend.nick) {
  10092.                             this.friend_names.add(friend.nick);
  10093.                         }
  10094.                         const remove = byId(`remove-${friend._id}`);
  10095.                         remove.addEventListener('click', async () => {
  10096.                             if (
  10097.                                 confirm(
  10098.                                     'Are you sure you want to remove this friend?'
  10099.                                 )
  10100.                             ) {
  10101.                                 const res = await fetch(
  10102.                                     this.appRoutes.removeAvatar,
  10103.                                     {
  10104.                                         method: 'POST',
  10105.                                         headers: {
  10106.                                             'Content-Type':
  10107.                                             'application/json',
  10108.                                         },
  10109.                                         body: JSON.stringify({
  10110.                                             type: 'remove-friend',
  10111.                                             userId: friend._id,
  10112.                                         }),
  10113.                                         credentials: 'include',
  10114.                                     }
  10115.                                 ).then((res) => res.json());
  10116.  
  10117.                                 if (res.success) {
  10118.                                     that.openFriendsTab();
  10119.                                 } else {
  10120.                                     let message =
  10121.                                         res.message ||
  10122.                                         'Something went wrong. Please try again later.';
  10123.                                     that.modAlert(message, 'danger');
  10124.                                 }
  10125.                             }
  10126.                         });
  10127.  
  10128.                         const chat = byId(`chat-${friend._id}`);
  10129.                         chat.addEventListener('click', () => {
  10130.                             this.openChat(friend._id);
  10131.                         });
  10132.                     });
  10133.                 } else {
  10134.                     friends_body.innerHTML = `
  10135.                         <span>You have no friends yet :(</span>
  10136.                         <span>Go to the <strong>All users</strong> tab to find new friends.</span>
  10137.                     `;
  10138.                 }
  10139.             })
  10140.                 .catch((error) => {
  10141.                 console.error(error);
  10142.             });
  10143.         },
  10144.  
  10145.         async openChat(id) {
  10146.             const res = await fetch(this.appRoutes.chatHistory(id), {
  10147.                 credentials: 'include',
  10148.             });
  10149.             const { history, target, success } = await res.json();
  10150.  
  10151.             if (!success) {
  10152.                 this.modAlert('Something went wrong...', 'danger');
  10153.                 return;
  10154.             }
  10155.  
  10156.             const body = document.querySelector('.mod_menu_content');
  10157.  
  10158.             const chatDiv = document.createElement('div');
  10159.             chatDiv.classList.add('friends-chat-wrapper');
  10160.             chatDiv.id = id;
  10161.             setTimeout(() => {
  10162.                 chatDiv.style.opacity = '1';
  10163.             });
  10164.  
  10165.             const messagesHTML = history
  10166.             .map(
  10167.                 (message) => `
  10168.                         <div class="friends-message ${
  10169.                 message.sender_id === this.profile._id
  10170.                 ? 'message-right'
  10171.                 : ''
  10172.                 }">
  10173.                             <span>${message.content}</span>
  10174.                             <span class="message-date">${prettyTime.am_pm(
  10175.                                 message.timestamp
  10176.                             )}</span>
  10177.                         </div>
  10178.                     `
  10179.             )
  10180.             .join('');
  10181.  
  10182.             chatDiv.innerHTML = `
  10183.                 <div class="friends-chat-header">
  10184.                     <div class="centerXY g-5">
  10185.                         <div class="profile-img">
  10186.                             <img src="${target.imageURL}" alt="${
  10187.             target.username
  10188.         }">
  10189.                             <span class="status_icon ${
  10190.             target.online ? 'online_icon' : 'offline_icon'
  10191.         }"></span>
  10192.                         </div>
  10193.                         <span class="f-big">${target.username}</span>
  10194.                     </div>
  10195.                     <button class="modButton centerXY g-5" id="back-friends-chat">
  10196.                         <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>
  10197.                         Back
  10198.                     </button>
  10199.                 </div>
  10200.                 <div class="friends-chat-body">
  10201.                     <div class="friends-chat-messages private-chat-content scroll">
  10202.                         ${
  10203.             history.length > 0
  10204.                 ? messagesHTML
  10205.             : "<center id='beginning-of-conversation'>This is the beginning of your conversation...</center>"
  10206.         }
  10207.                     </div>
  10208.                     <div class="messenger-wrapper">
  10209.                         <div class="container">
  10210.                             <input type="text" class="form-control" placeholder="Enter a message..." id="private-message-text" />
  10211.                             <button class="modButton-black" id="send-private-message">Send</button>
  10212.                         </div>
  10213.                     </div>
  10214.                 </div>
  10215.             `;
  10216.  
  10217.             body.appendChild(chatDiv);
  10218.             const messagesContainer = chatDiv.querySelector(
  10219.                 '.private-chat-content'
  10220.             );
  10221.             messagesContainer.scrollTop = messagesContainer.scrollHeight;
  10222.  
  10223.             const back = byId('back-friends-chat');
  10224.             back.addEventListener('click', (e) => {
  10225.                 chatDiv.style.opacity = '0';
  10226.                 setTimeout(() => {
  10227.                     chatDiv.remove();
  10228.                 }, 300);
  10229.             });
  10230.  
  10231.             const text = byId('private-message-text');
  10232.             const send = byId('send-private-message');
  10233.  
  10234.             text.addEventListener('keydown', (e) => {
  10235.                 const key = e.key.toLowerCase();
  10236.                 if (key === 'enter') {
  10237.                     sendMessage(text.value, id);
  10238.                     text.value = '';
  10239.                 }
  10240.             });
  10241.  
  10242.             send.addEventListener('click', () => {
  10243.                 sendMessage(text.value, id);
  10244.                 text.value = '';
  10245.             });
  10246.  
  10247.             function sendMessage(val, target) {
  10248.                 if (!val || val.length > 200) return;
  10249.                 client?.send({
  10250.                     type: 'private-message',
  10251.                     content: {
  10252.                         text: val,
  10253.                         target,
  10254.                     },
  10255.                 });
  10256.             }
  10257.         },
  10258.  
  10259.         updatePrivateChat(data) {
  10260.             const { sender_id, target_id, message, timestamp } = data;
  10261.  
  10262.             let chatDiv = byId(target_id) || byId(sender_id);
  10263.             if (!chatDiv) {
  10264.                 console.error(
  10265.                     'Could not find chat div for either sender or target'
  10266.                 );
  10267.                 return;
  10268.             }
  10269.  
  10270.             const bocElement = document.querySelector(
  10271.                 '#beginning-of-conversation'
  10272.             );
  10273.             if (bocElement) bocElement.remove();
  10274.  
  10275.             const messages = chatDiv.querySelector('.friends-chat-messages');
  10276.             messages.innerHTML += `
  10277.                <div class="friends-message ${
  10278.             sender_id === this.profile._id ? 'message-right' : ''
  10279.         }">
  10280.                    <span>${message}</span>
  10281.                    <span class="message-date">${prettyTime.am_pm(
  10282.                 timestamp
  10283.             )}</span>
  10284.                </div>
  10285.             `;
  10286.             messages.scrollTop = messages.scrollHeight;
  10287.         },
  10288.  
  10289.         async searchUser(user) {
  10290.             if (!user) {
  10291.                 this.openAllUsers();
  10292.                 return;
  10293.             }
  10294.             const response = await fetch(
  10295.                 `${this.appRoutes.search}/?q=${user}`,
  10296.                 {
  10297.                     credentials: 'include',
  10298.                 }
  10299.             ).then((res) => res.json());
  10300.             const usersDiv = document;
  10301.  
  10302.             const usersContainer = byId('users-container');
  10303.             usersContainer.innerHTML = '';
  10304.             if (!response.success) {
  10305.                 usersContainer.innerHTML = `
  10306.                     <span>Couldn't find ${user}...</span>
  10307.                 `;
  10308.                 return;
  10309.             }
  10310.  
  10311.             const handleAddButtonClick = (event) => {
  10312.                 const userId = event.currentTarget.getAttribute('data-user-id');
  10313.                 const add = event.currentTarget;
  10314.                 fetch(this.appRoutes.request, {
  10315.                     method: 'POST',
  10316.                     headers: {
  10317.                         'Content-Type': 'application/json',
  10318.                     },
  10319.                     body: JSON.stringify({ req_id: userId }),
  10320.                     credentials: 'include',
  10321.                 })
  10322.                     .then((res) => res.json())
  10323.                     .then((req) => {
  10324.                     const type = req.success ? 'success' : 'danger';
  10325.                     this.modAlert(req.message, type);
  10326.  
  10327.                     if (req.success) {
  10328.                         add.disabled = true;
  10329.                         add.innerHTML = `
  10330.                             <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>
  10331.                         `;
  10332.                     }
  10333.                 });
  10334.             };
  10335.  
  10336.             response.users.forEach((user) => {
  10337.                 const userHTML = `
  10338.                     <div class="friends_row user-profile-wrapper" style="${
  10339.                 this.profile._id == user._id
  10340.                 ? `background: linear-gradient(45deg, #17172d, black)`
  10341.                 : ''
  10342.                 }" data-user-profile="${user._id}">
  10343.                         <div class="centerY g-5">
  10344.                             <div class="profile-img">
  10345.                                 <img src="${user.imageURL}" alt="${
  10346.                 user.username
  10347.                 }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10348.                                 <span class="status_icon ${
  10349.                 user.online ? 'online_icon' : 'offline_icon'
  10350.                 }"></span>
  10351.                             </div>
  10352.                             <div class="f-big">${
  10353.                 this.profile.username === user.username
  10354.                 ? `${user.username} (You)`
  10355.                 : user.username
  10356.                 }</div>
  10357.                         </div>
  10358.                         <div class="centerY g-10">
  10359.                             <div class="${user.role}_role">${user.role}</div>
  10360.                             ${
  10361.                 this.profile._id == user._id
  10362.                 ? ''
  10363.                 : `
  10364.                                 <div class="vr2"></div>
  10365.                                 <button class="modButton centerXY add-button" data-user-id="${user._id}" style="padding: 7px;">
  10366.                                     <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>
  10367.                                 </button>
  10368.                             `
  10369.                 }
  10370.                         </div>
  10371.                     </div>
  10372.                 `;
  10373.                 usersContainer.insertAdjacentHTML('beforeend', userHTML);
  10374.  
  10375.                 if (user._id == this.profile._id) return;
  10376.                 const newUserProfile = usersContainer.querySelector(
  10377.                     `[data-user-profile="${user._id}"]`
  10378.                 );
  10379.                 newUserProfile.addEventListener('click', (e) => {
  10380.                     if (e.target == newUserProfile) {
  10381.                         this.showProfileHandler(e);
  10382.                     }
  10383.                 });
  10384.  
  10385.                 const addButton = newUserProfile.querySelector('.add-button');
  10386.                 if (!addButton) return;
  10387.                 addButton.addEventListener('click', handleAddButtonClick);
  10388.             });
  10389.         },
  10390.  
  10391.         async openAllUsers() {
  10392.             let offset = 0;
  10393.             let maxReached = false;
  10394.             let defaultAmount = 5; // min: 1; max: 100
  10395.  
  10396.             const friends_body = document.querySelector('.friends_body');
  10397.             friends_body.innerHTML = `
  10398.                 <input type="text" id="search-user" placeholder="Search user by username or id" class="form-control p-10" style="border: none" />
  10399.                 <div id="users-container"></div>
  10400.             `;
  10401.             const usersContainer = byId('users-container');
  10402.             friends_body.classList.add('allusers');
  10403.  
  10404.             // search user
  10405.             const search = byId('search-user');
  10406.             search.addEventListener(
  10407.                 'input',
  10408.                 debounce(() => {
  10409.                     this.searchUser(search.value);
  10410.                 }, 500)
  10411.             );
  10412.  
  10413.             const handleAddButtonClick = (event) => {
  10414.                 const userId = event.currentTarget.getAttribute('data-user-id');
  10415.                 const add = event.currentTarget;
  10416.                 fetch(this.appRoutes.request, {
  10417.                     method: 'POST',
  10418.                     headers: {
  10419.                         'Content-Type': 'application/json',
  10420.                     },
  10421.                     body: JSON.stringify({ req_id: userId }),
  10422.                     credentials: 'include',
  10423.                 })
  10424.                     .then((res) => res.json())
  10425.                     .then((req) => {
  10426.                     const type = req.success ? 'success' : 'danger';
  10427.                     this.modAlert(req.message, type);
  10428.  
  10429.                     if (req.success) {
  10430.                         add.disabled = true;
  10431.                         add.innerHTML = `
  10432.                             <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>
  10433.                         `;
  10434.                     }
  10435.                 });
  10436.             };
  10437.  
  10438.             const displayedUserIDs = new Set();
  10439.  
  10440.             const fetchNewUsers = async () => {
  10441.                 const newUsersResponse = await fetch(this.appRoutes.users, {
  10442.                     method: 'POST',
  10443.                     headers: {
  10444.                         'Content-Type': 'application/json',
  10445.                     },
  10446.                     body: JSON.stringify({ amount: defaultAmount, offset }),
  10447.                     credentials: 'include',
  10448.                 }).then((res) => res.json());
  10449.  
  10450.                 const newUsers = newUsersResponse.users;
  10451.  
  10452.                 if (newUsers.length === 0) {
  10453.                     maxReached = true;
  10454.                     return;
  10455.                 }
  10456.                 offset += defaultAmount;
  10457.  
  10458.                 newUsers.forEach((user) => {
  10459.                     if (!displayedUserIDs.has(user._id)) {
  10460.                         displayedUserIDs.add(user._id);
  10461.  
  10462.                         const newUserHTML = `
  10463.                             <div class="friends_row user-profile-wrapper" style="${
  10464.                         this.profile._id == user._id
  10465.                         ? `background: linear-gradient(45deg, #17172d, black)`
  10466.                         : ''
  10467.                         }" data-user-profile="${user._id}">
  10468.                                 <div class="centerY g-5">
  10469.                                     <div class="profile-img">
  10470.                                         <img src="${user.imageURL}" alt="${
  10471.                         user.username
  10472.                         }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10473.                                         <span class="status_icon ${
  10474.                         user.online
  10475.                         ? 'online_icon'
  10476.                         : 'offline_icon'
  10477.                         }"></span>
  10478.                                     </div>
  10479.                                     <div class="f-big">${
  10480.                         this.profile.username === user.username
  10481.                         ? `${user.username} (You)`
  10482.                         : user.username
  10483.                         }</div>
  10484.                                 </div>
  10485.                                 <div class="centerY g-10">
  10486.                                     <div class="${user.role}_role">${
  10487.                         user.role
  10488.                         }</div>
  10489.                                     ${
  10490.                         this.profile._id == user._id
  10491.                         ? ''
  10492.                         : `
  10493.                                         <div class="vr2"></div>
  10494.                                         <button class="modButton centerXY add-button" data-user-id="${user._id}" style="padding: 7px;">
  10495.                                             <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>
  10496.                                         </button>
  10497.                                     `
  10498.                         }
  10499.                                 </div>
  10500.                             </div>
  10501.                         `;
  10502.  
  10503.                         usersContainer.insertAdjacentHTML(
  10504.                             'beforeend',
  10505.                             newUserHTML
  10506.                         );
  10507.  
  10508.                         const newUserProfile = usersContainer.querySelector(
  10509.                             `[data-user-profile="${user._id}"]`
  10510.                         );
  10511.                         newUserProfile.addEventListener('click', (e) => {
  10512.                             if (e.target == newUserProfile) {
  10513.                                 this.showProfileHandler(e);
  10514.                             }
  10515.                         });
  10516.  
  10517.                         const addButton =
  10518.                               newUserProfile.querySelector('.add-button');
  10519.                         if (!addButton) return;
  10520.                         addButton.addEventListener(
  10521.                             'click',
  10522.                             handleAddButtonClick
  10523.                         );
  10524.                     }
  10525.                 });
  10526.             };
  10527.  
  10528.             const scrollHandler = async () => {
  10529.                 if (maxReached) return;
  10530.                 if (
  10531.                     usersContainer.scrollTop + usersContainer.clientHeight >=
  10532.                     usersContainer.scrollHeight - 1
  10533.                 ) {
  10534.                     await fetchNewUsers();
  10535.                 }
  10536.             };
  10537.  
  10538.             // Initial fetch
  10539.             await fetchNewUsers();
  10540.  
  10541.             // remove existing scroll event listener if exists
  10542.             usersContainer.removeEventListener('scroll', scrollHandler);
  10543.  
  10544.             // add new scroll event listener
  10545.             usersContainer.addEventListener('scroll', scrollHandler);
  10546.         },
  10547.  
  10548.         async openRequests() {
  10549.             let that = this;
  10550.             const friends_body = document.querySelector('.friends_body');
  10551.             friends_body.innerHTML = '';
  10552.             if (friends_body.classList.contains('allusers'))
  10553.                 friends_body.classList.remove('allusers');
  10554.  
  10555.             const requests = await fetch(this.appRoutes.myRequests, {
  10556.                 credentials: 'include',
  10557.             }).then((res) => res.json());
  10558.  
  10559.             if (!requests.body) return;
  10560.             if (requests.body.length > 0) {
  10561.                 const reqHtml = requests.body
  10562.                 .map(
  10563.                     (user) => `
  10564.                     <div class="friends_row">
  10565.                         <div class="centerY g-5">
  10566.                             <div class="profile-img">
  10567.                                 <img src="${user.imageURL}" alt="${
  10568.                     user.username
  10569.                     }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10570.                                 <span class="status_icon ${
  10571.                     user.online ? 'online_icon' : 'offline_icon'
  10572.                     }"></span>
  10573.                             </div>
  10574.                             <div class="f-big">${user.username}</div>
  10575.                         </div>
  10576.                         <div class="centerY g-10">
  10577.                             <div class="${user.role}_role">${user.role}</div>
  10578.                             <div class="vr2"></div>
  10579.                             <button class="modButton centerXY accept" data-user-id="${
  10580.                     user._id
  10581.                     }" style="padding: 6px 7px;">
  10582.                                 <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>
  10583.                             </button>
  10584.                             <button class="modButton centerXY decline" data-user-id="${
  10585.                     user._id
  10586.                     }" style="padding: 5px 8px;">
  10587.                                 <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>
  10588.                             </button>
  10589.                         </div>
  10590.                     </div>
  10591.                 `
  10592.                 )
  10593.                 .join('');
  10594.  
  10595.                 friends_body.innerHTML = reqHtml;
  10596.  
  10597.                 friends_body.querySelectorAll('.accept').forEach((accept) => {
  10598.                     accept.addEventListener('click', async () => {
  10599.                         const userId = accept.getAttribute('data-user-id');
  10600.                         const req = await fetch(this.appRoutes.handleRequest, {
  10601.                             method: 'POST',
  10602.                             headers: {
  10603.                                 'Content-Type': 'application/json',
  10604.                             },
  10605.                             body: JSON.stringify({
  10606.                                 type: 'accept-request',
  10607.                                 userId,
  10608.                             }),
  10609.                             credentials: 'include',
  10610.                         }).then((res) => res.json());
  10611.                         that.openRequests();
  10612.                     });
  10613.                 });
  10614.  
  10615.                 friends_body.querySelectorAll('.decline').forEach((decline) => {
  10616.                     decline.addEventListener('click', async () => {
  10617.                         const userId = decline.getAttribute('data-user-id');
  10618.                         const req = await fetch(this.appRoutes.handleRequest, {
  10619.                             method: 'POST',
  10620.                             headers: {
  10621.                                 'Content-Type': 'application/json',
  10622.                             },
  10623.                             body: JSON.stringify({
  10624.                                 type: 'decline-request',
  10625.                                 userId,
  10626.                             }),
  10627.                             credentials: 'include',
  10628.                         }).then((res) => res.json());
  10629.                         that.openRequests();
  10630.                     });
  10631.                 });
  10632.             } else {
  10633.                 friends_body.innerHTML = `<span>No requests!</span>`;
  10634.             }
  10635.         },
  10636.  
  10637.         async openFriendSettings() {
  10638.             const friends_body = document.querySelector('.friends_body');
  10639.             if (friends_body.classList.contains('allusers'))
  10640.                 friends_body.classList.remove('allusers');
  10641.  
  10642.             friends_body.innerHTML = `
  10643.                 <div class="friends_row">
  10644.                     <div class="centerY g-5">
  10645.                         <div class="profile-img">
  10646.                             <img src="${
  10647.             this.profile.imageURL
  10648.         }" alt="Profile picture" />
  10649.                         </div>
  10650.                         <span class="f-big" id="profile_username_00" title="${
  10651.             this.profile._id
  10652.         }">${this.profile.username}</span>
  10653.                     </div>
  10654.                     <button class="modButton-black val" id="editProfile">Edit Profile</button>
  10655.                 </div>
  10656.                 <div class="friends_row">
  10657.                     <span>Status</span>
  10658.                     <select class="form-control val" id="edit_static_status">
  10659.                         <option value="online" ${
  10660.             this.friends_settings.static_status === 'online'
  10661.                 ? 'selected'
  10662.             : ''
  10663.         }>Online</option>
  10664.                         <option value="offline" ${
  10665.             this.friends_settings.static_status === 'offline'
  10666.                 ? 'selected'
  10667.             : ''
  10668.         }>Offline</option>
  10669.                     </select>
  10670.                 </div>
  10671.                 <div class="friends_row">
  10672.                     <span>Accept friend requests</span>
  10673.                     <div class="modCheckbox val">
  10674.                         <input type="checkbox" ${
  10675.             this.friends_settings.accept_requests
  10676.                 ? 'checked'
  10677.             : ''
  10678.         } id="edit_accept_requests" />
  10679.                         <label class="cbx" for="edit_accept_requests"></label>
  10680.                     </div>
  10681.                 </div>
  10682.                 <div class="friends_row">
  10683.                     <span>Highlight friends</span>
  10684.                     <div class="modCheckbox val">
  10685.                         <input type="checkbox" ${
  10686.             this.friends_settings.highlight_friends
  10687.                 ? 'checked'
  10688.             : ''
  10689.         } id="edit_highlight_friends" />
  10690.                         <label class="cbx" for="edit_highlight_friends"></label>
  10691.                     </div>
  10692.                 </div>
  10693.                 <div class="friends_row">
  10694.                     <span>Highlight color</span>
  10695.                     <input type="color" class="colorInput" value="${
  10696.             this.friends_settings.highlight_color
  10697.         }" style="margin-right: 12px;" id="edit_highlight_color" />
  10698.                 </div>
  10699.                 <div class="friends_row">
  10700.                     <span>Public profile</span>
  10701.                     <div class="modCheckbox val">
  10702.                         <input type="checkbox" ${
  10703.             this.profile.visible ? 'checked' : ''
  10704.         } id="edit_visible" />
  10705.                         <label class="cbx" for="edit_visible"></label>
  10706.                     </div>
  10707.                 </div>
  10708.                 <div class="friends_row">
  10709.                     <span>Logout</span>
  10710.                     <button class="modButton-black" id="logout_mod" style="width: 150px">Logout</button>
  10711.                 </div>
  10712.             `;
  10713.  
  10714.             const editProfile = byId('editProfile');
  10715.             editProfile.addEventListener('click', () => {
  10716.                 this.openProfileEditor();
  10717.             });
  10718.  
  10719.             const logout = byId('logout_mod');
  10720.             logout.addEventListener('click', async () => {
  10721.                 if (confirm('Are you sure you want to logout?')) {
  10722.                     try {
  10723.                         const res = await fetch(this.appRoutes.logout, {
  10724.                             credentials: 'include',
  10725.                         });
  10726.  
  10727.                         const data = await res.json();
  10728.  
  10729.                         if (!data.success)
  10730.                             return alert('Something went wrong...');
  10731.  
  10732.                         modSettings.modAccount.authorized = false;
  10733.                         updateStorage();
  10734.                         location.reload();
  10735.                     } catch (error) {
  10736.                         console.error('Error logging out:', error);
  10737.                     }
  10738.                 }
  10739.             });
  10740.  
  10741.             const edit_static_status = byId('edit_static_status');
  10742.             const edit_accept_requests = byId('edit_accept_requests');
  10743.             const edit_highlight_friends = byId('edit_highlight_friends');
  10744.             const edit_highlight_color = byId('edit_highlight_color');
  10745.             const edit_visible = byId('edit_visible');
  10746.  
  10747.             edit_static_status.addEventListener('change', () => {
  10748.                 const val = edit_static_status.value;
  10749.                 updateSettings('static_status', val);
  10750.             });
  10751.  
  10752.             edit_accept_requests.addEventListener('change', () => {
  10753.                 const val = edit_accept_requests.checked;
  10754.                 updateSettings('accept_requests', val);
  10755.             });
  10756.  
  10757.             edit_highlight_friends.addEventListener('change', () => {
  10758.                 const val = edit_highlight_friends.checked;
  10759.                 updateSettings('highlight_friends', val);
  10760.             });
  10761.  
  10762.             // Debounce the updateSettings function
  10763.             edit_highlight_color.addEventListener(
  10764.                 'input',
  10765.                 debounce(() => {
  10766.                     const val = edit_highlight_color.value;
  10767.                     updateSettings('highlight_color', val);
  10768.                 }, 500)
  10769.             );
  10770.  
  10771.             edit_visible.addEventListener('change', () => {
  10772.                 const val = edit_visible.checked;
  10773.                 updateSettings('visible', val);
  10774.             });
  10775.  
  10776.             const updateSettings = async (type, data) => {
  10777.                 const resData = await (
  10778.                     await fetch(this.appRoutes.updateSettings, {
  10779.                         method: 'POST',
  10780.                         body: JSON.stringify({ type, data }),
  10781.                         credentials: 'include',
  10782.                         headers: {
  10783.                             'Content-Type': 'application/json',
  10784.                         },
  10785.                     })
  10786.                 ).json();
  10787.  
  10788.                 if (resData.success) {
  10789.                     this.friends_settings[type] = data;
  10790.                 }
  10791.             };
  10792.         },
  10793.  
  10794.         openProfileEditor() {
  10795.             let that = this;
  10796.  
  10797.             const overlay = document.createElement('div');
  10798.             overlay.classList.add('mod_overlay');
  10799.             overlay.style.opacity = '0';
  10800.             overlay.innerHTML = `
  10801.                 <div class="signIn-wrapper">
  10802.                     <div class="signIn-header">
  10803.                         <span>Edit mod profile</span>
  10804.                         <div class="centerXY" style="width: 32px; height: 32px;">
  10805.                             <button class="modButton-black" id="closeProfileEditor">
  10806.                                 <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  10807.                                     <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>
  10808.                                 </svg>
  10809.                             </button>
  10810.                         </div>
  10811.                     </div>
  10812.                     <div class="signIn-body" style="width: fit-content;">
  10813.                         <div class="centerXY g-10">
  10814.                             <div class="profile-img" style="width: 6em;height: 6em;">
  10815.                                 <img src="${
  10816.             this.profile.imageURL
  10817.         }" alt="Profile picture" />
  10818.                             </div>
  10819.                             <div class="f-column g-5">
  10820.                                 <input type="file" id="imageUpload" accept="image/*" style="display: none;">
  10821.                                 <label for="imageUpload" class="modButton-black g-10">
  10822.                                     <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>
  10823.                                     Upload avatar
  10824.                                 </label>
  10825.                                 <button class="modButton-black g-10" id="deleteAvatar">
  10826.                                     <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>
  10827.                                     Delete avatar
  10828.                                 </button>
  10829.                             </div>
  10830.                         </div>
  10831.                         <div class="f-column w-100">
  10832.                             <label for="username_edit">Username</label>
  10833.                             <input type="text" class="form-control" id="username_edit" value="${
  10834.             this.profile.username
  10835.         }" maxlength="40" minlength="4" />
  10836.                         </div>
  10837.                         <div class="f-column w-100">
  10838.                             <label for="bio_edit">Bio</label>
  10839.                             <div class="textarea-container">
  10840.                                 <textarea placeholder="Hello! I'm ..." class="form-control" maxlength="250" id="bio_edit">${
  10841.             this.profile.bio || ''
  10842.         }</textarea>
  10843.                                 <span class="char-counter" id="charCount">${
  10844.             this.profile.bio
  10845.                 ? this.profile.bio.length
  10846.             : '0'
  10847.         }/250</span>
  10848.                             </div>
  10849.                         </div>
  10850.                         <button class="modButton-black" style="margin-bottom: 20px;" id="saveChanges">Save changes</button>
  10851.                     </div>
  10852.                 </div>
  10853.             `;
  10854.             document.body.append(overlay);
  10855.  
  10856.             function hide() {
  10857.                 overlay.style.opacity = '0';
  10858.                 setTimeout(() => {
  10859.                     overlay.remove();
  10860.                 }, 300);
  10861.             }
  10862.  
  10863.             overlay.addEventListener('click', (e) => {
  10864.                 if (e.target == overlay) hide();
  10865.             });
  10866.  
  10867.             setTimeout(() => {
  10868.                 overlay.style.opacity = '1';
  10869.             });
  10870.  
  10871.             byId('closeProfileEditor').addEventListener('click', hide);
  10872.  
  10873.             let changes = new Set(); // Use a Set to store unique changes
  10874.  
  10875.             const bio_edit = byId('bio_edit');
  10876.             const charCountSpan = byId('charCount');
  10877.             bio_edit.addEventListener('input', updCharcounter);
  10878.  
  10879.             function updCharcounter() {
  10880.                 const currentTextLength = bio_edit.value.length;
  10881.                 charCountSpan.textContent = currentTextLength + '/250';
  10882.  
  10883.                 // Update changes
  10884.                 changes.add('bio');
  10885.             }
  10886.  
  10887.             // Upload avatar
  10888.             byId('imageUpload').addEventListener('input', async (e) => {
  10889.                 const file = e.target.files[0];
  10890.                 if (!file) return;
  10891.  
  10892.                 const formData = new FormData();
  10893.                 formData.append('image', file);
  10894.  
  10895.                 try {
  10896.                     const data = await (
  10897.                         await fetch(this.appRoutes.imgUpload, {
  10898.                             method: 'POST',
  10899.                             credentials: 'include',
  10900.                             body: formData,
  10901.                         })
  10902.                     ).json();
  10903.  
  10904.                     if (data.success) {
  10905.                         const profileImg =
  10906.                               document.querySelector('.profile-img img');
  10907.                         profileImg.src = data.user.imageURL;
  10908.                         hide();
  10909.                         that.profile = data.user;
  10910.                     } else {
  10911.                         that.modAlert(data.message, 'danger');
  10912.                         console.error('Failed to upload image');
  10913.                     }
  10914.                 } catch (error) {
  10915.                     console.error('Error uploading image:', error);
  10916.                 }
  10917.             });
  10918.  
  10919.             const username_edit = byId('username_edit');
  10920.             username_edit.addEventListener('input', () => {
  10921.                 changes.add('username');
  10922.             });
  10923.  
  10924.             const saveChanges = byId('saveChanges');
  10925.             saveChanges.addEventListener('click', async () => {
  10926.                 if (changes.size === 0) return;
  10927.                 let changedData = {};
  10928.                 changes.forEach((change) => {
  10929.                     if (change === 'username') {
  10930.                         changedData.username = username_edit.value;
  10931.                     } else if (change === 'bio') {
  10932.                         changedData.bio = bio_edit.value;
  10933.                     }
  10934.                 });
  10935.  
  10936.                 const resData = await (
  10937.                     await fetch(this.appRoutes.editProfile, {
  10938.                         method: 'POST',
  10939.                         body: JSON.stringify({
  10940.                             changes: Array.from(changes),
  10941.                             data: changedData,
  10942.                         }),
  10943.                         credentials: 'include',
  10944.                         headers: {
  10945.                             'Content-Type': 'application/json',
  10946.                         },
  10947.                     })
  10948.                 ).json();
  10949.  
  10950.                 if (resData.success) {
  10951.                     if (that.profile.username !== resData.user.username) {
  10952.                         const p_username = byId('profile_username_00');
  10953.                         if (p_username)
  10954.                             p_username.innerText = resData.user.username;
  10955.                     }
  10956.                     that.profile = resData.user;
  10957.                     changes.clear();
  10958.                     hide();
  10959.                     const name = byId('my-profile-name');
  10960.                     const bioText = byId('my-profile-bio');
  10961.  
  10962.                     name.innerText = resData.user.username;
  10963.                     bioText.innerHTML = resData.user.bio || 'No bio.';
  10964.                 } else {
  10965.                     if (resData.message) {
  10966.                         this.modAlert(resData.message, 'danger');
  10967.                     }
  10968.                 }
  10969.             });
  10970.  
  10971.             const deleteAvatar = byId('deleteAvatar');
  10972.             deleteAvatar.addEventListener('click', async () => {
  10973.                 if (
  10974.                     confirm(
  10975.                         'Are you sure you want to remove your profile picture? It will be changed to the default profile picture.'
  10976.                     )
  10977.                 ) {
  10978.                     try {
  10979.                         const data = await (
  10980.                             await fetch(this.appRoutes.delProfile, {
  10981.                                 credentials: 'include',
  10982.                             })
  10983.                         ).json();
  10984.                         const profileImg =
  10985.                               document.querySelector('.profile-img img');
  10986.                         profileImg.src = data.user.imageURL;
  10987.                         hide();
  10988.                         that.profile = data.user;
  10989.                     } catch (error) {
  10990.                         console.error("Couldn't remove image: ", error);
  10991.                         this.modAlert(error.message, 'danger');
  10992.                     }
  10993.                 }
  10994.             });
  10995.         },
  10996.  
  10997.         async announcements() {
  10998.             const previewContainer = byId('mod-announcements');
  10999.  
  11000.             const announcements = await (
  11001.                 await fetch(this.appRoutes.announcements)
  11002.             ).json();
  11003.             if (!announcements.success) return;
  11004.  
  11005.             const { data } = announcements;
  11006.  
  11007.             const pinnedAnnouncements = data.filter(
  11008.                 (announcement) => announcement.pinned
  11009.             );
  11010.             const unpinnedAnnouncements = data.filter(
  11011.                 (announcement) => !announcement.pinned
  11012.             );
  11013.  
  11014.             pinnedAnnouncements.sort(
  11015.                 (a, b) => new Date(b.date) - new Date(a.date)
  11016.             );
  11017.             unpinnedAnnouncements.sort(
  11018.                 (a, b) => new Date(b.date) - new Date(a.date)
  11019.             );
  11020.  
  11021.             const sortedAnnouncements = [
  11022.                 ...pinnedAnnouncements,
  11023.                 ...unpinnedAnnouncements,
  11024.             ];
  11025.  
  11026.             const previews = sortedAnnouncements
  11027.             .map(
  11028.                 (announcement) => `
  11029. 				<div class="mod-announcement" data-announcement-id="${announcement._id}">
  11030. 					<img class="mod-announcement-icon" src="${
  11031.                 announcement.icon
  11032.                 }" width="32" draggable="false" />
  11033. 					<div class="mod-announcement-text">
  11034. 						<span>${announcement.title}</span>
  11035. 						<div>${announcement.description}</div>
  11036. 					</div>
  11037. 					${
  11038.                 announcement.pinned
  11039.                 ? '<img src="https://czrsd.com/static/icons/pinned.svg" draggable="false" style="width: 22px; align-self: start;" />'
  11040.                 : ''
  11041.                 }
  11042. 				</div>
  11043. 			`
  11044.             )
  11045.             .join('');
  11046.  
  11047.             previewContainer.innerHTML = previews;
  11048.  
  11049.             const announcementElements =
  11050.                   document.querySelectorAll('.mod-announcement');
  11051.             announcementElements.forEach((element) => {
  11052.                 element.addEventListener('click', async (event) => {
  11053.                     const announcementId = element.getAttribute(
  11054.                         'data-announcement-id'
  11055.                     );
  11056.                     try {
  11057.                         const data = await (
  11058.                             await fetch(
  11059.                                 this.appRoutes.announcement(announcementId)
  11060.                             )
  11061.                         ).json();
  11062.                         if (data.success) {
  11063.                             createAnnouncementTab(data.data);
  11064.                         }
  11065.                     } catch (error) {
  11066.                         console.error(
  11067.                             'Error fetching announcement details:',
  11068.                             error
  11069.                         );
  11070.                     }
  11071.                 });
  11072.             });
  11073.  
  11074.             function createAnnouncementTab(data) {
  11075.                 const menuContent = document.querySelector('.mod_menu_content');
  11076.                 const modHome = byId('mod_home');
  11077.                 const content = document.createElement('div');
  11078.  
  11079.                 content.setAttribute('id', 'announcement-tab');
  11080.                 content.classList.add('mod_tab');
  11081.                 content.style.display = 'none';
  11082.                 content.style.opacity = '0';
  11083.  
  11084.                 const announcementHTML = `
  11085. 					<div class="centerY justify-sb">
  11086. 						<div class="centerY g-5">
  11087. 							<img style="border-radius: 50%;" src="${
  11088.                 data.preview.icon
  11089.                 }" width="64" draggable="false" />
  11090. 							<div class="f-column centerX">
  11091. 								<h2>${data.full.title}</h2>
  11092. 								<span style="color: #7E7E7E">${prettyTime.fullDate(data.date)}</span>
  11093. 							</div>
  11094. 						</div>
  11095. 						<button class="modButton-black" style="width: 20%;" id="mod-announcement-back">Back</button>
  11096. 					</div>
  11097. 					<div class="mod-announcement-content">
  11098. 						<div class="f-column g-10 scroll">${data.full.description}</div>
  11099. 						<div class="mod-announcement-images scroll">
  11100. 							${data.full.images
  11101.                 .map(
  11102.                     (image) =>
  11103.                     `<img src="${image}" onclick="window.open('${image}')" />`
  11104.                 )
  11105.                 .join('')}
  11106. 						</div>
  11107. 					</div>
  11108. 				`;
  11109.  
  11110.                 content.innerHTML = announcementHTML;
  11111.                 menuContent.appendChild(content);
  11112.  
  11113.                 window.openModTab('announcement-tab');
  11114.  
  11115.                 const back = byId('mod-announcement-back');
  11116.                 back.addEventListener('click', () => {
  11117.                     const mod_home = byId('mod_home');
  11118.                     content.style.opacity = '0';
  11119.                     setTimeout(() => {
  11120.                         content.remove();
  11121.  
  11122.                         mod_home.style.display = 'flex';
  11123.                         mod_home.style.opacity = '1';
  11124.                     }, 300);
  11125.  
  11126.                     byId('tab_home_btn').classList.add('mod_selected');
  11127.                 });
  11128.                 1;
  11129.             }
  11130.         },
  11131.  
  11132.         chart() {
  11133.             const canvas = byId('sigmod-stats');
  11134.             const { Chart } = window;
  11135.  
  11136.             const stats = JSON.parse(localStorage.getItem('game-stats'));
  11137.  
  11138.             // max values
  11139.             const statValues = {
  11140.                 timeplayed: [
  11141.                     10_000, 50_000, 100_000, 150_000, 200_000, 250_000, 300_000,
  11142.                     400_000, 800_000, 1_000_000,
  11143.                 ],
  11144.                 highestmass: [
  11145.                     50_000, 100_000, 500_000, 700_000, 1_000_000, 5_000_000,
  11146.                     10_000_000,
  11147.                 ],
  11148.                 totaldeaths: [
  11149.                     100, 500, 1_000, 2_000, 3_000, 4_000, 5_000, 8_000, 10_000,
  11150.                     30_000, 50_000, 100_000,
  11151.                 ],
  11152.                 totalmass: [
  11153.                     100_000, 500_000, 1_000_000, 2_000_000, 3_000_000,
  11154.                     5_000_000, 10_000_000, 50_000_000, 100_000_000, 500_000_000,
  11155.                     1_000_000_000, 2_000_000_000, 5_000_000_000,
  11156.                 ],
  11157.             };
  11158.  
  11159.             const getBestValue = (stat, values) => {
  11160.                 for (let value of values) {
  11161.                     if (stat < value) return value;
  11162.                 }
  11163.                 return values[values.length - 1];
  11164.             };
  11165.  
  11166.             const emojiLabels = ['⏲', '🏆', '💀', '🔢'];
  11167.             const textLabels = [
  11168.                 'Time Played',
  11169.                 'Highest Mass',
  11170.                 'Total Deaths',
  11171.                 'Total Mass',
  11172.             ];
  11173.  
  11174.             const data = {
  11175.                 labels: emojiLabels,
  11176.                 datasets: [
  11177.                     {
  11178.                         label: 'Your Stats',
  11179.                         data: [
  11180.                             stats['time-played'] /
  11181.                             getBestValue(
  11182.                                 stats['time-played'],
  11183.                                 statValues.timeplayed
  11184.                             ),
  11185.                             stats['highest-mass'] /
  11186.                             getBestValue(
  11187.                                 stats['highest-mass'],
  11188.                                 statValues.highestmass
  11189.                             ),
  11190.                             stats['total-deaths'] /
  11191.                             getBestValue(
  11192.                                 stats['total-deaths'],
  11193.                                 statValues.totaldeaths
  11194.                             ),
  11195.                             stats['total-mass'] /
  11196.                             getBestValue(
  11197.                                 stats['total-mass'],
  11198.                                 statValues.totalmass
  11199.                             ),
  11200.                         ],
  11201.                         backgroundColor: [
  11202.                             'rgba(255, 99, 132, 0.2)',
  11203.                             'rgba(54, 162, 235, 0.2)',
  11204.                             'rgba(255, 206, 86, 0.2)',
  11205.                             'rgba(153, 102, 255, 0.2)',
  11206.                         ],
  11207.                         borderColor: [
  11208.                             'rgba(255, 99, 132, 1)',
  11209.                             'rgba(54, 162, 235, 1)',
  11210.                             'rgba(255, 206, 86, 1)',
  11211.                             'rgba(153, 102, 255, 1)',
  11212.                         ],
  11213.                         borderWidth: 1,
  11214.                     },
  11215.                 ],
  11216.             };
  11217.  
  11218.             const formatLabel = (labelType, actualValue) => {
  11219.                 if (labelType === 'Time Played') {
  11220.                     const hours = Math.floor(actualValue / 3600);
  11221.                     const minutes = Math.floor((actualValue % 3600) / 60);
  11222.                     return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
  11223.                 } else if (
  11224.                     labelType === 'Highest Mass' ||
  11225.                     labelType === 'Total Mass'
  11226.                 ) {
  11227.                     return actualValue > 999
  11228.                         ? `${(actualValue / 1000).toFixed(1)}k`
  11229.                     : actualValue.toString();
  11230.                 } else {
  11231.                     return actualValue.toString();
  11232.                 }
  11233.             };
  11234.  
  11235.             const createChart = () => {
  11236.                 try {
  11237.                     new Chart(canvas, {
  11238.                         type: 'bar',
  11239.                         data: data,
  11240.                         options: {
  11241.                             indexAxis: 'y',
  11242.                             scales: {
  11243.                                 x: {
  11244.                                     beginAtZero: true,
  11245.                                     max: 1,
  11246.                                     ticks: {
  11247.                                         callback: (value) =>
  11248.                                         `${(value * 100).toFixed(0)}%`,
  11249.                                     },
  11250.                                 },
  11251.                             },
  11252.                             plugins: {
  11253.                                 legend: {
  11254.                                     display: false,
  11255.                                 },
  11256.                                 tooltip: {
  11257.                                     callbacks: {
  11258.                                         title: (context) =>
  11259.                                         textLabels[context[0].dataIndex],
  11260.                                         label: (context) => {
  11261.                                             const dataIndex = context.dataIndex;
  11262.                                             const labelType =
  11263.                                                   textLabels[dataIndex];
  11264.                                             const actualValue =
  11265.                                                   context.dataset.data[
  11266.                                                       dataIndex
  11267.                                                   ] *
  11268.                                                   getBestValue(
  11269.                                                       stats[
  11270.                                                           labelType
  11271.                                                           .toLowerCase()
  11272.                                                           .replace(' ', '-')
  11273.                                                       ],
  11274.                                                       statValues[
  11275.                                                           labelType
  11276.                                                           .toLowerCase()
  11277.                                                           .replace(' ', '')
  11278.                                                       ]
  11279.                                                   );
  11280.                                             return formatLabel(
  11281.                                                 labelType,
  11282.                                                 actualValue
  11283.                                             );
  11284.                                         },
  11285.                                     },
  11286.                                 },
  11287.                             },
  11288.                         },
  11289.                     });
  11290.                 } catch (error) {
  11291.                     console.error(
  11292.                         'An error occurred while rendering the chart:',
  11293.                         error
  11294.                     );
  11295.                 }
  11296.             };
  11297.  
  11298.             createChart();
  11299.         },
  11300.  
  11301.         // Color input events & Reset color event handler
  11302.         colorPicker() {
  11303.             const colorPickerConfig = {
  11304.                 mapColor: {
  11305.                     path: 'game.map.color',
  11306.                     opacity: false,
  11307.                     color: modSettings.game.map.color,
  11308.                     default: '#111111',
  11309.                 },
  11310.                 borderColor: {
  11311.                     path: 'game.borderColor',
  11312.                     opacity: true,
  11313.                     color: modSettings.game.borderColor,
  11314.                     default: '#0000ff',
  11315.                 },
  11316.                 foodColor: {
  11317.                     path: 'game.foodColor',
  11318.                     opacity: true,
  11319.                     color: modSettings.game.foodColor,
  11320.                     default: null,
  11321.                 },
  11322.                 cellColor: {
  11323.                     path: 'game.cellColor',
  11324.                     opacity: true,
  11325.                     color: modSettings.game.cellColor,
  11326.                     default: null,
  11327.                 },
  11328.                 nameColor: {
  11329.                     path: 'game.name.color',
  11330.                     opacity: false,
  11331.                     color: modSettings.game.name.color,
  11332.                     default: '#ffffff',
  11333.                 },
  11334.                 gradientNameColor1: {
  11335.                     path: 'game.name.gradient.left',
  11336.                     opacity: false,
  11337.                     color: modSettings.game.name.gradient.left,
  11338.                     default: '#ffffff',
  11339.                 },
  11340.                 gradientNameColor2: {
  11341.                     path: 'game.name.gradient.right',
  11342.                     opacity: false,
  11343.                     color: modSettings.game.name.gradient.right,
  11344.                     default: '#ffffff',
  11345.                 },
  11346.                 chatBackground: {
  11347.                     path: 'chat.bgColor',
  11348.                     opacity: true,
  11349.                     color: modSettings.chat.bgColor,
  11350.                     default: defaultSettings.chat.bgColor,
  11351.                     elementTarget: {
  11352.                         selector: '.modChat',
  11353.                         property: 'background',
  11354.                     },
  11355.                 },
  11356.                 chatTextColor: {
  11357.                     path: 'chat.textColor',
  11358.                     opacity: true,
  11359.                     color: modSettings.chat.textColor,
  11360.                     default: defaultSettings.chat.textColor,
  11361.                     elementTarget: {
  11362.                         selector: '.chatMessage-text',
  11363.                         property: 'color',
  11364.                     },
  11365.                 },
  11366.                 chatThemeChanger: {
  11367.                     path: 'chat.themeColor',
  11368.                     opacity: true,
  11369.                     color: modSettings.chat.themeColor,
  11370.                     default: defaultSettings.chat.themeColor,
  11371.                     elementTarget: {
  11372.                         selector: '.chatButton',
  11373.                         property: 'background',
  11374.                     },
  11375.                 },
  11376.             };
  11377.  
  11378.             const { Alwan } = window;
  11379.  
  11380.             Object.entries(colorPickerConfig).forEach(
  11381.                 ([
  11382.                     selector,
  11383.                     {
  11384.                         path,
  11385.                         opacity,
  11386.                         color,
  11387.                         default: defaultColor,
  11388.                         elementTarget,
  11389.                     },
  11390.                 ]) => {
  11391.                     const storagePath = path.split('.');
  11392.                     const colorPickerInstance = new Alwan(`#${selector}`, {
  11393.                         id: `edit-${selector}`,
  11394.                         color: color || defaultColor || '#000000',
  11395.                         theme: 'dark',
  11396.                         opacity,
  11397.                         format: 'hex',
  11398.                         default: defaultColor,
  11399.                         swatches: ['black', 'white', 'red', 'blue', 'green'],
  11400.                     });
  11401.  
  11402.                     const pickerElement = byId(`edit-${selector}`);
  11403.                     pickerElement.insertAdjacentHTML(
  11404.                         'beforeend',
  11405.                         `
  11406.                             <div class="colorpicker-additional">
  11407.                                 <span>Reset Color</span>
  11408.                                 <button class="resetButton" id="reset-${selector}"></button>
  11409.                             </div>
  11410.                         `
  11411.                     );
  11412.  
  11413.                     colorPickerInstance.on('change', (e) => {
  11414.                         let storageElement = modSettings;
  11415.                         storagePath
  11416.                             .slice(0, -1)
  11417.                             .forEach(
  11418.                             (part) =>
  11419.                             (storageElement = storageElement[part])
  11420.                         );
  11421.                         storageElement[storagePath.at(-1)] = e.hex;
  11422.  
  11423.                         if (
  11424.                             path.includes('gradientName') &&
  11425.                             modSettings.game.name.gradient.enabled
  11426.                         ) {
  11427.                             modSettings.game.name.gradient.enabled = true;
  11428.                         }
  11429.  
  11430.                         if (elementTarget) {
  11431.                             const targets = document.querySelectorAll(
  11432.                                 elementTarget.selector
  11433.                             );
  11434.  
  11435.                             targets.forEach((target) => {
  11436.                                 target.style[elementTarget.property] = e.hex;
  11437.                             });
  11438.                         }
  11439.  
  11440.                         updateStorage();
  11441.                     });
  11442.  
  11443.                     byId(`reset-${selector}`)?.addEventListener('click', () => {
  11444.                         colorPickerInstance.setColor(defaultColor);
  11445.  
  11446.                         let storageElement = modSettings;
  11447.                         storagePath
  11448.                             .slice(0, -1)
  11449.                             .forEach(
  11450.                             (part) =>
  11451.                             (storageElement = storageElement[part])
  11452.                         );
  11453.                         storageElement[storagePath.at(-1)] = defaultColor;
  11454.  
  11455.                         if (
  11456.                             path.includes('gradientName') &&
  11457.                             !modSettings.game.name.gradient.left &&
  11458.                             !modSettings.game.name.gradient.right
  11459.                         ) {
  11460.                             modSettings.game.name.gradient.enabled = false;
  11461.                         }
  11462.  
  11463.                         if (elementTarget) {
  11464.                             const targets = document.querySelectorAll(
  11465.                                 elementTarget.selector
  11466.                             );
  11467.  
  11468.                             targets.forEach((target) => {
  11469.                                 target.style[elementTarget.property] =
  11470.                                     defaultColor;
  11471.                             });
  11472.                         }
  11473.  
  11474.                         updateStorage();
  11475.                     });
  11476.                 }
  11477.             );
  11478.         },
  11479.  
  11480.         async getBlockedChatData() {
  11481.             try {
  11482.                 const res = await fetch(`${this.appRoutes.blockedChatData}?v=${Math.floor(Math.random() * 9e5)}`, {
  11483.                     headers: {
  11484.                         'Content-Type': 'application/json'
  11485.                     }
  11486.                 });
  11487.                 const resData = await res.json();
  11488.                 const { names, messages } = resData;
  11489.  
  11490.                 this.blockedChatData = {
  11491.                     names,
  11492.                     messages
  11493.                 }
  11494.             } catch(e) {
  11495.                 console.error('Couldn\'t fetch blocked chat data.');
  11496.             }
  11497.         },
  11498.  
  11499.         async loadLibraries() {
  11500.             const loadScript = (src) =>
  11501.             new Promise((resolve, reject) => {
  11502.                 const script = document.createElement('script');
  11503.                 script.src = src;
  11504.                 script.type = 'text/javascript';
  11505.                 document.head.appendChild(script);
  11506.  
  11507.                 script.onload = () => resolve();
  11508.                 script.onerror = (error) => reject(error);
  11509.             });
  11510.  
  11511.             const loadCSS = (href) =>
  11512.             new Promise((resolve, reject) => {
  11513.                 const link = document.createElement('link');
  11514.                 link.rel = 'stylesheet';
  11515.                 link.href = href;
  11516.                 document.head.appendChild(link);
  11517.  
  11518.                 link.onload = () => resolve();
  11519.                 link.onerror = (error) => reject(error);
  11520.             });
  11521.  
  11522.             for (const [lib, val] of Object.entries(libs)) {
  11523.                 if (typeof val === 'string') {
  11524.                     await loadScript(val);
  11525.                 } else {
  11526.                     await loadScript(val.js);
  11527.                     if (val.css) await loadCSS(val.css);
  11528.                 }
  11529.  
  11530.                 console.log(`%c✅ Loaded ${lib}.`, 'color: lime');
  11531.  
  11532.                 if (typeof this[lib] === 'function') this[lib]();
  11533.             }
  11534.         },
  11535.  
  11536.         isRateLimited() {
  11537.             if (document.body.children[0]?.id === 'cf-wrapper') {
  11538.                 console.log('User is rate limited.');
  11539.                 return true;
  11540.             }
  11541.             return false;
  11542.         },
  11543.  
  11544.         setupUI() {
  11545.             this.menu();
  11546.             this.initStats();
  11547.             this.announcements();
  11548.             this.mainMenu();
  11549.             this.saveNames();
  11550.             this.tagsystem();
  11551.             this.createMinimap();
  11552.             this.themes();
  11553.         },
  11554.  
  11555.         setupGame() {
  11556.             this.game();
  11557.             this.macros();
  11558.         },
  11559.  
  11560.         setupNetworking() {
  11561.             this.clientPing();
  11562.             this.chat();
  11563.             this.handleNick();
  11564.         },
  11565.  
  11566.         initModules() {
  11567.             try {
  11568.                 this.loadLibraries();
  11569.                 this.setupUI();
  11570.                 this.setupGame();
  11571.                 this.setupNetworking();
  11572.  
  11573.                 // setup eventListeners for modInputs once every module has been loaded
  11574.                 this.setInputActions();
  11575.             } catch (e) {
  11576.                 console.error('An error occurred while loading SigMod: ', e);
  11577.             }
  11578.         },
  11579.  
  11580.         init() {
  11581.             if (this.isRateLimited()) return;
  11582.             if (!document.querySelector('.body__inner')) return;
  11583.  
  11584.             this.credits();
  11585.  
  11586.             new SigWsHandler();
  11587.  
  11588.             this.initModules();
  11589.         }
  11590.     };
  11591.  
  11592.     mods = new Mod();
  11593. })();