☰

SigMod Client (Macros)

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

当前为 2025-04-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         SigMod Client (Macros)
  3. // @version      10.2.0.2
  4. // @description  The best mod you can find for Sigmally - Agar.io: Macros, Friends, tag system (minimap, chat), color mod, custom skins, AutoRespawn, save names, themes and more!
  5. // @author       Cursed
  6. // @match        https://*.sigmally.com/*
  7. // @icon         https://czrsd.com/static/sigmod/SigMod25-rounded.png
  8. // @run-at       document-end
  9. // @license      MIT
  10. // @grant        none
  11. // @namespace    https://greasyfork.org/users/981958
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.     'use strict';
  16.     const version = 10;
  17.     const serverVersion = '4.0.3';
  18.     const storageVersion = 1.0;
  19.     const storageName = 'SigModClient-settings';
  20.     const headerAnim = 'https://czrsd.com/static/sigmod/sigmodclient.gif';
  21.  
  22.     const libs = {
  23.         chart: 'https://cdn.jsdelivr.net/npm/chart.js',
  24.         colorPicker: {
  25.             js: 'https://unpkg.com/alwan/dist/js/alwan.min.js',
  26.             css: 'https://unpkg.com/alwan/dist/css/alwan.min.css',
  27.         },
  28.         jszip: 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js',
  29.     };
  30.  
  31.     const defaultSettings = {
  32.         storageVersion,
  33.         macros: {
  34.             feedSpeed: 40,
  35.             keys: {
  36.                 rapidFeed: 'w',
  37.                 respawn: 'b',
  38.                 location: 'y',
  39.                 saveImage: null,
  40.                 splits: {
  41.                     double: 'd',
  42.                     triple: 'f',
  43.                     quad: 'g',
  44.                     doubleTrick: null,
  45.                     selfTrick: null,
  46.                 },
  47.                 line: {
  48.                     horizontal: 's',
  49.                     vertical: 't',
  50.                     fixed: null,
  51.                     instantSplit: 0,
  52.                 },
  53.                 toggle: {
  54.                     menu: 'v',
  55.                     chat: 'z',
  56.                     names: null,
  57.                     skins: null,
  58.                     autoRespawn: null,
  59.                 },
  60.             },
  61.             mouse: {
  62.                 left: null,
  63.                 right: null,
  64.             },
  65.         },
  66.         game: {
  67.             font: 'Ubuntu',
  68.             borderColor: null,
  69.             foodColor: null,
  70.             cellColor: null,
  71.             virusImage: '/assets/images/viruses/2.png',
  72.             shortenNames: false,
  73.             removeOutlines: false,
  74.             skins: {
  75.                 original: null,
  76.                 replacement: null,
  77.             },
  78.             map: {
  79.                 color: null,
  80.                 image: '',
  81.             },
  82.             name: {
  83.                 color: null,
  84.                 gradient: {
  85.                     enabled: false,
  86.                     left: null,
  87.                     right: null,
  88.                 },
  89.             },
  90.         },
  91.         themes: {
  92.             current: 'Dark',
  93.             custom: [],
  94.             inputBorderRadius: null,
  95.             menuBorderRadius: null,
  96.             inputBorder: '1px',
  97.             hideDiscordBtns: false,
  98.             hideLangs: false,
  99.         },
  100.         settings: {
  101.             tag: null,
  102.             savedNames: [],
  103.             autoRespawn: false,
  104.             playTimer: false,
  105.             mouseTracker: false,
  106.             autoClaimCoins: false,
  107.             showChallenges: false,
  108.             deathScreenPos: 'center',
  109.             removeShopPopup: false,
  110.         },
  111.         chat: {
  112.             bgColor: '#00000040',
  113.             textColor: '#ffffff',
  114.             compact: false,
  115.             themeColor: '#8a25e5',
  116.             showTime: true,
  117.             showNameColors: true,
  118.             showClientChat: false,
  119.             showChatButtons: true,
  120.             blurTag: false,
  121.             locationText: '{pos}',
  122.         },
  123.         modAccount: {
  124.             authorized: false,
  125.         },
  126.     };
  127.  
  128.     let modSettings;
  129.     const stored = localStorage.getItem(storageName);
  130.     try {
  131.         modSettings = stored ? JSON.parse(stored) : defaultSettings;
  132.     } catch (e) {
  133.         modSettings = defaultSettings;
  134.     }
  135.  
  136.     // really rare cases, but in case the storage structure changes completely again
  137.     if (
  138.         !modSettings.storageVersion ||
  139.         modSettings.storageVersion !== storageVersion
  140.     ) {
  141.         localStorage.removeItem(storageName);
  142.         location.reload();
  143.     }
  144.  
  145.     if (!stored) updateStorage();
  146.  
  147.     // intercept fetches
  148.     let fetchedUser = 0;
  149.     const originalFetch = window.fetch;
  150.  
  151.     window.fetch = new Proxy(originalFetch, {
  152.         async apply(target, thisArg, argumentsList) {
  153.             const [url] = argumentsList;
  154.             const response = await target.apply(thisArg, argumentsList);
  155.  
  156.             if (typeof url === 'string') {
  157.                 if (url.includes('/server/auth')) {
  158.                     const data = await response.clone().json();
  159.                     if (data) mods.handleGoogleAuth(data.body?.user);
  160.                 }
  161.             }
  162.  
  163.             return response;
  164.         },
  165.     });
  166.  
  167.     // for development
  168.     let isDev = false;
  169.     let port = 3001;
  170.  
  171.     // global sigmod
  172.     window.sigmod = {
  173.         version,
  174.         server_version: serverVersion,
  175.         storageName,
  176.         settings: modSettings,
  177.     };
  178.  
  179.     // Global gameSettings object to store the Sigmally WebSocket, User instance and playing status
  180.     /*
  181.      * @typedef {Object} User
  182.      * @property {string} _id
  183.      * @property {number} boost
  184.      * @property {Object.<string, number>} cards
  185.      * @property {string} clan
  186.      * @property {string} createTime
  187.      * @property {string} email
  188.      * @property {number} exp
  189.      * @property {string} fullName
  190.      * @property {string} givenName
  191.      * @property {number} gold
  192.      * @property {string} googleID
  193.      * @property {number} hourlyTime
  194.      * @property {string} imageURL
  195.      * @property {any[]} lastSkinUsed
  196.      * @property {number} level
  197.      * @property {number} nextLevel
  198.      * @property {number} progress
  199.      * @property {number} seasonExp
  200.      * @property {Object.<string, any>} sigma
  201.      * @property {string[]} skins
  202.      * @property {number} subscription
  203.      * @property {string} updateTime
  204.      * @property {string} token
  205.      *
  206.      * @property {WebSocket} ws
  207.      * @property {User} user
  208.      * @property {boolean} isPlaying
  209.      */
  210.     window.gameSettings = {
  211.         ws: null,
  212.         user: null,
  213.         isPlaying: false,
  214.     };
  215.  
  216.     // --------- HELPER FUNCTIONS --------- \\
  217.     // --- General
  218.     // --- Colors
  219.     // --- Game
  220.     // --- Time
  221.     // --- (Coordinates)
  222.  
  223.     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 buf = textEncoder.encode(json);
  538.             const view = new DataView(new ArrayBuffer(buf.byteLength + 2));
  539.  
  540.             view.setUint8(0, this.C[0x00]);
  541.             for (let i = 0; i < buf.byteLength; ++i)
  542.                 view.setUint8(1 + i, buf[i]);
  543.  
  544.  
  545.             this.sendPacket();
  546.         }
  547.  
  548.         sendChat(text) {
  549.             if (mods.aboveRespawnLimit && text === mods.respawnCommand) return;
  550.  
  551.             if (window.sigfix) {
  552.                 window.sigfix.net.chat(text);
  553.                 return;
  554.             }
  555.  
  556.             const messageBuf = textEncoder.encode(text);
  557.             const view = new DataView(new ArrayBuffer(messageBuf.byteLength + 3));
  558.  
  559.             view.setUint8(0, this.C[0x63]);
  560.  
  561.             for (let i = 0; i < messageBuf; ++i)
  562.                 view.setUint8(2 + i, messageBuf[i]);
  563.  
  564.             this.sendPacket(view);
  565.         }
  566.  
  567.         sendMouseMove(x, y) {
  568.             const {sigfix} = window;
  569.             if (sigfix) {
  570.                 sigfix.net.move(sigfix.world.selected, x, y);
  571.                 return;
  572.             }
  573.             const view = new DataView(new ArrayBuffer(14));
  574.  
  575.             view.setUint8(0, this.C[0x10]);
  576.             view.setInt32(1, x, true);
  577.             view.setInt32(5, y, true);
  578.  
  579.             this.sendPacket(view);
  580.         }
  581.  
  582.         removePlayer(id) {
  583.             const index = this.cells.players.indexOf(id);
  584.             if (index !== -1) {
  585.                 this.cells.players.splice(index, 1);
  586.             }
  587.         }
  588.  
  589.         handleMessage(event) {
  590.             const view = new DataView(event.data);
  591.             let o = 0;
  592.  
  593.             if (!this.handshake) {
  594.                 this.performHandshake(view, o);
  595.                 return;
  596.             }
  597.  
  598.             const r = view.getUint8(o++);
  599.             switch (this.R[r]) {
  600.                 case 0x63:
  601.                     this.handleChatMessage(view, o);
  602.                     break;
  603.                 case 0x40:
  604.                     this.updateBorder(view, o);
  605.                     break;
  606.             }
  607.         }
  608.  
  609.         performHandshake(view, o) {
  610.             let bytes = [];
  611.             let b;
  612.             while ((b = view.getUint8(o++)) !== 0) bytes.push(b);
  613.  
  614.             this.C.set(new Uint8Array(view.buffer.slice(o, o + 256)));
  615.             o += 256;
  616.  
  617.             for (const i in this.C) {
  618.                 this.R[this.C[i]] = ~~i;
  619.             }
  620.  
  621.             this.handshake = true;
  622.         }
  623.  
  624.         handleChatMessage(view, o) {
  625.             const flags = view.getUint8(o++);
  626.             const rgb = Array.from({ length: 3 }, () => view.getUint8(o++) / 255);
  627.             const hex = `#${rgb.map(c => Math.floor(c * 255).toString(16).padStart(2, '0')).join('')}`;
  628.  
  629.             let [name, message] = [];
  630.             [name, o] = getStringUTF8(view, o);
  631.             [message, o] = getStringUTF8(view, o);
  632.  
  633.             if (name.trim() === '') name = 'Unnamed';
  634.  
  635.             if (!mods.mutedUsers.includes(name) && !mods.spamMessage(name, message) && !modSettings.chat.showClientChat) {
  636.                 mods.updateChat({
  637.                     color: modSettings.chat.showNameColors ? hex : '#fafafa',
  638.                     name,
  639.                     message,
  640.                     time: modSettings.chat.showTime ? Date.now() : null,
  641.                 });
  642.             }
  643.         }
  644.  
  645.         updateBorder(view, o) {
  646.             const [left, top, right, bottom] = [
  647.                 view.getFloat64(o, true),
  648.                 view.getFloat64(o + 8, true),
  649.                 view.getFloat64(o + 16, true),
  650.                 view.getFloat64(o + 24, true)
  651.             ];
  652.  
  653.             mods.border = {
  654.                 left, top, right, bottom,
  655.                 width: right - left,
  656.                 height: bottom - top
  657.             }
  658.         }
  659.     }
  660.  
  661.     class SigFixHandler {
  662.         constructor() {
  663.             this.lastHadCells = false;
  664.             this.checkInterval = null;
  665.             this.updatePosInterval = null;
  666.             this.sendPosInterval = null;
  667.             this.init();
  668.         }
  669.  
  670.         overrideMoveFunction() {
  671.             if (!window.sigfix?.net?.move) return;
  672.  
  673.             const originalMove = window.sigfix.net.move;
  674.             let isHandlingFreeze = false;
  675.  
  676.             window.sigfix.net.move = (...args) => {
  677.                 if (freezepos && !isHandlingFreeze) {
  678.                     isHandlingFreeze = true;
  679.                     originalMove.call(this, playerPosition.x, playerPosition.y);
  680.                     isHandlingFreeze = false;
  681.                     return;
  682.                 }
  683.                 return originalMove.apply(this, args);
  684.             };
  685.         }
  686.  
  687.         calculatePlayerPosition() {
  688.             let ownX = 0, ownY = 0, ownN = 0;
  689.             const ownedCells = window.sigfix.world.views.get(window.sigfix.world.selected)?.owned || [];
  690.  
  691.             ownedCells.forEach(id => {
  692.                 const cell = window.sigfix.world.cells.get(id)?.merged;
  693.                 if (cell) {
  694.                     ownN++;
  695.                     ownX += cell.nx;
  696.                     ownY += cell.ny;
  697.                 }
  698.             });
  699.  
  700.             return ownN > 0 ? { x: ownX / ownN, y: ownY / ownN } : null;
  701.         }
  702.  
  703.         updatePlayerPos() {
  704.             const newPos = this.calculatePlayerPosition();
  705.             if (newPos) {
  706.                 playerPosition.x = newPos.x;
  707.                 playerPosition.y = newPos.y;
  708.                 this.lastHadCells = true;
  709.             } else if (this.lastHadCells) {
  710.                 playerPosition.x = null;
  711.                 playerPosition.y = null;
  712.                 this.sendPlayerPos();
  713.                 this.lastHadCells = false;
  714.             }
  715.         }
  716.  
  717.         sendPlayerPos() {
  718.             if (playerPosition.x !== null && playerPosition.y !== null && client?.ws?.readyState === 1 && modSettings.settings.tag) {
  719.                 client.send({
  720.                     type: 'position',
  721.                     content: { x: playerPosition.x, y: playerPosition.y }
  722.                 });
  723.             }
  724.         }
  725.  
  726.         startIntervals() {
  727.             this.updatePosInterval = setInterval(this.updatePlayerPos.bind(this));
  728.             this.sendPosInterval = setInterval(this.sendPlayerPos.bind(this), 300);
  729.         }
  730.  
  731.         checkSigFix() {
  732.             if (window.sigfix) {
  733.                 this.startIntervals();
  734.                 this.overrideMoveFunction();
  735.                 clearInterval(this.checkInterval);
  736.             }
  737.         }
  738.  
  739.         init() {
  740.             const checkSigFix = () => {
  741.                 this.checkSigFix();
  742.                 if (window.sigfix?.net) {
  743.                     setTimeout(() => { this.checkInterval = null; }, 1000);
  744.                 }
  745.             };
  746.  
  747.             this.checkInterval = setInterval(checkSigFix, 100);
  748.         }
  749.     }
  750.  
  751.     new SigFixHandler();
  752.  
  753.  
  754.     // --------- Mod Client --------- //
  755.     class modClient {
  756.         constructor() {
  757.             this.ws = null;
  758.             this.wsUrl = isDev
  759.                 ? `ws://localhost:${port}/ws`
  760.             : 'wss://mod.czrsd.com/ws';
  761.  
  762.             this.retries = 0;
  763.             this.maxRetries = 4;
  764.             this.updateAvailable = false;
  765.  
  766.             this.id = null;
  767.             this.connectedAmount = 0;
  768.  
  769.             this.connect();
  770.         }
  771.  
  772.         connect() {
  773.             this.ws = new WebSocket(this.wsUrl);
  774.             this.ws.binaryType = 'arraybuffer';
  775.             window.sigmod.ws = this.ws;
  776.  
  777.             this.ws.addEventListener('open', this.onOpen.bind(this));
  778.             this.ws.addEventListener('close', this.onClose.bind(this));
  779.             this.ws.addEventListener('message', this.onMessage.bind(this));
  780.             this.ws.addEventListener('error', this.onError.bind(this));
  781.         }
  782.  
  783.         async onOpen() {
  784.             this.connectedAmount++;
  785.             await this.waitForDOMLoad();
  786.  
  787.             this.updateClientInfo();
  788.             this.updateTagInfo();
  789.  
  790.             // Send nick if client got disconnected more than one time
  791.             if (this.connectedAmount > 1) {
  792.                 client.send({
  793.                     type: 'update-nick',
  794.                     content: mods.nick,
  795.                 });
  796.             }
  797.         }
  798.  
  799.         waitForDOMLoad() {
  800.             return new Promise((resolve) => setTimeout(resolve, 500));
  801.         }
  802.  
  803.         updateClientInfo() {
  804.             this.send({
  805.                 type: 'server-changed',
  806.                 content: getGameMode(),
  807.             });
  808.             this.send({
  809.                 type: 'version',
  810.                 content: serverVersion,
  811.             });
  812.         }
  813.  
  814.         updateTagInfo() {
  815.             const tagElement = document.querySelector('#tag');
  816.             const tagText = document.querySelector('.tagText');
  817.             const tagValue = this.getTagFromUrl();
  818.  
  819.             if (tagValue) {
  820.                 modSettings.settings.tag = tagValue;
  821.                 updateStorage();
  822.                 tagElement.value = tagValue;
  823.                 tagText.innerText = `Tag: ${tagValue}`;
  824.                 this.send({
  825.                     type: 'update-tag',
  826.                     content: modSettings.settings.tag,
  827.                 });
  828.             } else if (modSettings.settings.tag) {
  829.                 tagElement.value = modSettings.settings.tag;
  830.                 tagText.innerText = `Tag: ${modSettings.settings.tag}`;
  831.                 this.send({
  832.                     type: 'update-tag',
  833.                     content: modSettings.settings.tag,
  834.                 });
  835.             }
  836.         }
  837.  
  838.         getTagFromUrl() {
  839.             const urlParams = new URLSearchParams(window.location.search);
  840.             const tagValue = urlParams.get('tag');
  841.             return tagValue ? tagValue.replace(/\/$/, '') : null;
  842.         }
  843.  
  844.         onClose() {
  845.             if (this.updateAvailable) return;
  846.  
  847.             this.retries++;
  848.             if (this.retries > this.maxRetries)
  849.                 throw new Error('SigMod server down.');
  850.  
  851.             setTimeout(() => this.connect(), 2000); // auto reconnect with delay
  852.         }
  853.  
  854.         onMessage(event) {
  855.             const message = this.parseMessage(event.data);
  856.             if (!message || !message.type) return;
  857.  
  858.             switch (message.type) {
  859.                 case 'sid':
  860.                     this.handleSidMessage(message.content);
  861.                     break;
  862.                 case 'ping':
  863.                     this.handlePingMessage();
  864.                     break;
  865.                 case 'minimap-data':
  866.                     mods.updData(message.content);
  867.                     break;
  868.                 case 'chat-message':
  869.                     this.handleChatMessage(message.content);
  870.                     break;
  871.                 case 'private-message':
  872.                     mods.updatePrivateChat(message.content);
  873.                     break;
  874.                 case 'update-available':
  875.                     this.handleUpdateAvailable(message.content);
  876.                     break;
  877.                 case 'alert':
  878.                     mods.handleAlert(message.content);
  879.                     break;
  880.                 case 'tournament-preview':
  881.                     mods.tData = message.content;
  882.                     mods.showTournament(message.content);
  883.                     break;
  884.                 case 'tournament-message':
  885.                     mods.updateChat({
  886.                         name: '[TOURNAMENT]',
  887.                         message: message.content,
  888.                         time: modSettings.chat.showTime ? Date.now() : null,
  889.                     });
  890.                     break;
  891.                 case 'tournament-session':
  892.                     mods.tournamentSession(message.content);
  893.                     break;
  894.                 case 'get-score':
  895.                     mods.getScore(message.content);
  896.                     break;
  897.                 case 'round-end':
  898.                     mods.roundEnd(message.content);
  899.                     break;
  900.                 case 'round-ready':
  901.                     mods.tournamentReady(message.content);
  902.                     break;
  903.                 case 'tournament-data':
  904.                     mods.handleTournamentData(message.content);
  905.                     break;
  906.                 case 'error':
  907.                     mods.modAlert(message.content.message, 'danger');
  908.                     break;
  909.                 default:
  910.                     console.error('Unknown message type:', message.type);
  911.             }
  912.         }
  913.  
  914.         onError(event) {
  915.             console.error('WebSocket error:', event);
  916.         }
  917.  
  918.         send(data) {
  919.             if (!data || this.ws.readyState !== 1) return;
  920.             const binaryData = textEncoder.encode(JSON.stringify(data));
  921.             this.ws.send(binaryData);
  922.         }
  923.  
  924.         parseMessage(data) {
  925.             try {
  926.                 const stringData = textDecoder.decode(
  927.                     new Uint8Array(data)
  928.                 );
  929.                 return JSON.parse(stringData);
  930.             } catch (error) {
  931.                 console.error('Failed to parse message:', error);
  932.                 return null;
  933.             }
  934.         }
  935.  
  936.         handleSidMessage(content) {
  937.             this.id = content;
  938.             if (!modSettings.modAccount.authorized) return;
  939.  
  940.             setTimeout(() => {
  941.                 mods.auth(content);
  942.             }, 1000);
  943.         }
  944.  
  945.         handlePingMessage() {
  946.             mods.ping.latency = Date.now() - mods.ping.start;
  947.             mods.ping.end = Date.now();
  948.             byId('clientPing').innerHTML = `Client Ping: ${mods.ping.latency}ms`;
  949.         }
  950.  
  951.         handleChatMessage(content) {
  952.             if (!content) return;
  953.             let { admin, mod, vip, name, message, color } = content;
  954.  
  955.             name = this.formatChatName(admin, mod, vip, name);
  956.  
  957.             mods.updateChat({
  958.                 admin,
  959.                 mod,
  960.                 color,
  961.                 name,
  962.                 message,
  963.                 time: modSettings.chat.showTime ? Date.now() : null,
  964.             });
  965.         }
  966.  
  967.         formatChatName(admin, mod, vip, name) {
  968.             if (admin) name = '[Owner] ' + name;
  969.             if (mod) name = '[Mod] ' + name;
  970.             if (vip) name = '[VIP] ' + name;
  971.             if (!name) name = 'Unnamed';
  972.             return name;
  973.         }
  974.  
  975.         handleUpdateAvailable(content) {
  976.             byId('play-btn').setAttribute('disabled', 'disabled');
  977.             byId('spectate-btn').setAttribute('disabled', 'disabled');
  978.             this.updateAvailable = true;
  979.             this.createModAlert(content);
  980.         }
  981.  
  982.         createModAlert(content) {
  983.             const modAlert = document.createElement('div');
  984.             modAlert.classList.add('modAlert');
  985.             modAlert.innerHTML = `
  986.                 <span>You are using an old mod version. Please update.</span>
  987.                 <div class="flex centerXY g-5">
  988.                     <button
  989.                         class="modButton"
  990.                         style="width: 100%"
  991.                         onclick="window.open('${content}')"
  992.                     >Update</button>
  993.                 </div>
  994.             `;
  995.             document.body.append(modAlert);
  996.         }
  997.     }
  998.  
  999.     function randomPos() {
  1000.         let eventOptions = {
  1001.             clientX: Math.floor(Math.random() * window.innerWidth),
  1002.             clientY: Math.floor(Math.random() * window.innerHeight),
  1003.             bubbles: true,
  1004.             cancelable: true,
  1005.         };
  1006.  
  1007.         let event = new MouseEvent('mousemove', eventOptions);
  1008.  
  1009.         document.dispatchEvent(event);
  1010.     }
  1011.  
  1012.     let moveInterval = setInterval(randomPos);
  1013.     setTimeout(() => clearInterval(moveInterval), 600);
  1014.  
  1015.     // Disable chat before game settings actually load
  1016.     localStorage.setItem('settings', JSON.stringify({ ...JSON.parse(localStorage.getItem('settings')), showChat: false }));
  1017.  
  1018.     function addSettings() {
  1019.         const gameSettings = document.querySelector('.checkbox-grid');
  1020.         if (!gameSettings) return;
  1021.  
  1022.         const div = document.createElement('div');
  1023.         div.innerHTML = `
  1024.             <input type="checkbox" id="showNames">
  1025.             <label>Names</label>
  1026.             <input type="checkbox" id="showSkins">
  1027.             <label>Skins</label>
  1028.             <input type="checkbox" id="autoRespawn">
  1029.             <label>Auto Respawn</label>
  1030.             <input type="checkbox" id="autoClaimCoins">
  1031.             <label>Auto claim coins</label>
  1032.             <input type="checkbox" id="showPosition">
  1033.             <label>Position</label>
  1034.         `;
  1035.         while (div.children.length > 0) gameSettings.append(div.children[0]);
  1036.     }
  1037.     addSettings();
  1038.  
  1039.     async function checkDiscordLogin() {
  1040.         // popup window from discord login
  1041.         const urlParams = new URLSearchParams(window.location.search);
  1042.         let accessToken = urlParams.get('access_token');
  1043.         let refreshToken = urlParams.get('refresh_token');
  1044.  
  1045.         if (!accessToken || !refreshToken) return;
  1046.  
  1047.         const url = isDev
  1048.         ? `http://localhost:${port}/discord/login/`
  1049.         : 'https://mod.czrsd.com/discord/login/';
  1050.  
  1051.         const overlay = document.createElement('div');
  1052.         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`;
  1053.         overlay.innerHTML = `
  1054.                 <span style="font-size: 5rem; color: #fafafa;">Login...</span>
  1055.             `;
  1056.         document.body.append(overlay);
  1057.  
  1058.         setTimeout(async () => {
  1059.             if (refreshToken.endsWith('/')) {
  1060.                 refreshToken = refreshToken.substring(
  1061.                     0,
  1062.                     refreshToken.length - 1
  1063.                 );
  1064.             } else {
  1065.                 return;
  1066.             }
  1067.  
  1068.             await fetch(
  1069.                 `${url}?accessToken=${accessToken}&refreshToken=${refreshToken}`,
  1070.                 {
  1071.                     method: 'GET',
  1072.                     credentials: 'include',
  1073.                 }
  1074.             );
  1075.  
  1076.             modSettings.modAccount.authorized = true;
  1077.             updateStorage();
  1078.             window.close();
  1079.         }, 500);
  1080.     }
  1081.     checkDiscordLogin();
  1082.  
  1083.     let mods = {};
  1084.  
  1085.     let playerPosition = { x: null, y: null };
  1086.     let lastGetScore = 0;
  1087.     let lastPosTime = 0;
  1088.     let dead = false;
  1089.     let dead2 = false;
  1090.  
  1091.     function Mod() {
  1092.         this.nick = null;
  1093.         this.profile = {};
  1094.         this.friends_settings = window.sigmod.friends_settings = {};
  1095.         this.friend_names = window.sigmod.friend_names = new Set();
  1096.  
  1097.         this.splitKey = {
  1098.             keyCode: 32,
  1099.             code: 'Space',
  1100.             cancelable: true,
  1101.             composed: true,
  1102.             isTrusted: true,
  1103.             which: 32,
  1104.         };
  1105.  
  1106.         this.ping = {
  1107.             latency: NaN,
  1108.             intervalId: null,
  1109.             start: null,
  1110.             end: null,
  1111.         };
  1112.  
  1113.         this.dayTimer = null;
  1114.         this.challenges = [];
  1115.  
  1116.         this.scrolling = false;
  1117.         this.onContext = false;
  1118.         this.mouseDown = false;
  1119.  
  1120.         this.mouseX = 0;
  1121.         this.mouseY = 0;
  1122.  
  1123.         this.renderedMessages = 0;
  1124.         this.maxChatMessages = 200;
  1125.         this.mutedUsers = [];
  1126.         this.blockedChatData = {
  1127.             names: [],
  1128.             messages: []
  1129.         };
  1130.  
  1131.         this.respawnCommand = '/leaveworld';
  1132.         this.aboveRespawnLimit = false;
  1133.         this.cellSize = 0;
  1134.         this.miniMapData = [];
  1135.         this.border = {};
  1136.  
  1137.         this.dbCache = null;
  1138.  
  1139.         this.tourneyPassword = '';
  1140.         this.lastOneStanding = false;
  1141.  
  1142.         this.skins = [];
  1143.  
  1144.         this.virusImageLoaded = false;
  1145.         this.skinImageLoaded = false;
  1146.  
  1147.         this.routes = {
  1148.             discord: {
  1149.                 auth: isDev
  1150.                 ? 'https://discord.com/oauth2/authorize?client_id=1067097357780516874&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3001%2Fdiscord%2Fcallback&scope=identify'
  1151.                 : 'https://discord.com/oauth2/authorize?client_id=1067097357780516874&response_type=code&redirect_uri=https%3A%2F%2Fmod.czrsd.com%2Fdiscord%2Fcallback&scope=identify',
  1152.             },
  1153.         };
  1154.  
  1155.         // for SigMod specific
  1156.         this.appRoutes = {
  1157.             badge: isDev
  1158.             ? `http://localhost:${port}/badge`
  1159.             : 'https://mod.czrsd.com/badge',
  1160.             signIn: (path) =>
  1161.             isDev
  1162.             ? `http://localhost:${port}/${path}`
  1163.             : `https://mod.czrsd.com/${path}`,
  1164.             auth: isDev
  1165.             ? `http://localhost:${port}/auth`
  1166.             : `https://mod.czrsd.com/auth`,
  1167.             users: isDev
  1168.             ? `http://localhost:${port}/users`
  1169.             : `https://mod.czrsd.com/users`,
  1170.             search: isDev
  1171.             ? `http://localhost:${port}/search`
  1172.             : `https://mod.czrsd.com/search`,
  1173.             request: isDev
  1174.             ? `http://localhost:${port}/request`
  1175.             : `https://mod.czrsd.com/request`,
  1176.             friends: isDev
  1177.             ? `http://localhost:${port}/me/friends`
  1178.             : `https://mod.czrsd.com/me/friends`,
  1179.             profile: (id) =>
  1180.             isDev
  1181.             ? `http://localhost:${port}/profile/${id}`
  1182.             : `https://mod.czrsd.com/profile/${id}`,
  1183.             myRequests: isDev
  1184.             ? `http://localhost:${port}/me/requests`
  1185.             : `https://mod.czrsd.com/me/requests`,
  1186.             handleRequest: isDev
  1187.             ? `http://localhost:${port}/me/handle`
  1188.             : `https://mod.czrsd.com/me/handle`,
  1189.             logout: isDev
  1190.             ? `http://localhost:${port}/logout`
  1191.             : `https://mod.czrsd.com/logout`,
  1192.             imgUpload: isDev
  1193.             ? `http://localhost:${port}/me/upload`
  1194.             : `https://mod.czrsd.com/me/upload`,
  1195.             removeAvatar: isDev
  1196.             ? `http://localhost:${port}/me/handle`
  1197.             : `https://mod.czrsd.com/me/handle`,
  1198.             editProfile: isDev
  1199.             ? `http://localhost:${port}/me/edit`
  1200.             : `https://mod.czrsd.com/me/edit`,
  1201.             delProfile: isDev
  1202.             ? `http://localhost:${port}/me/remove`
  1203.             : `https://mod.czrsd.com/me/remove`,
  1204.             updateSettings: isDev
  1205.             ? `http://localhost:${port}/me/update-settings`
  1206.             : `https://mod.czrsd.com/me/update-settings`,
  1207.             chatHistory: (id) =>
  1208.             isDev
  1209.             ? `http://localhost:${port}/me/chat/${id}`
  1210.             : `https://mod.czrsd.com/me/chat/${id}`,
  1211.             onlineUsers: isDev
  1212.             ? `http://localhost:${port}/onlineUsers`
  1213.             : `https://mod.czrsd.com/onlineUsers`,
  1214.             announcements: isDev
  1215.             ? `http://localhost:${port}/announcements`
  1216.             : `https://mod.czrsd.com/announcements`,
  1217.             announcement: (id) =>
  1218.             isDev
  1219.             ? `http://localhost:${port}/announcement/${id}`
  1220.             : `https://mod.czrsd.com/announcement/${id}`,
  1221.             fonts: isDev
  1222.             ? `http://localhost:${port}/fonts`
  1223.             : 'https://mod.czrsd.com/fonts',
  1224.             blockedChatData: 'https://mod.czrsd.com/spam.json',
  1225.         };
  1226.  
  1227.         this.init();
  1228.     }
  1229.  
  1230.     Mod.prototype = {
  1231.         get style() {
  1232.             return `
  1233.         @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap');
  1234.  
  1235.         .mod_menu {
  1236.             position: absolute;
  1237.             top: 0;
  1238.             left: 0;
  1239.             width: 100%;
  1240.             height: 100vh;
  1241.             background: rgba(0, 0, 0, .6);
  1242.             z-index: 999999;
  1243.             display: flex;
  1244.             justify-content: center;
  1245.             align-items: center;
  1246.             color: #fff;
  1247.             transition: all .3s ease;
  1248.         }
  1249.  
  1250.         .mod_menu * {
  1251.             margin: 0;
  1252.             padding: 0;
  1253.             font-family: 'Ubuntu';
  1254.             box-sizing: border-box;
  1255.         }
  1256.  
  1257.         .mod_menu_wrapper {
  1258.             position: relative;
  1259.             display: flex;
  1260.             flex-direction: column;
  1261.             width: 700px;
  1262.             height: 500px;
  1263.             background: #111;
  1264.             border-radius: 12px;
  1265.             overflow: hidden;
  1266.             box-shadow: 0 5px 10px #000;
  1267.         }
  1268.  
  1269.         .mod_menu_header {
  1270.             display: flex;
  1271.             width: 100%;
  1272.             position: relative;
  1273.             height: 60px;
  1274.         }
  1275.  
  1276.         .mod_menu_header .header_img {
  1277.             width: 100%;
  1278.             height: 60px;
  1279.             object-fit: cover;
  1280.             object-position: center;
  1281.             position: absolute;
  1282.         }
  1283.  
  1284.         .mod_menu_header button {
  1285.             display: flex;
  1286.             justify-content: center;
  1287.             align-items: center;
  1288.             position: absolute;
  1289.             right: 10px;
  1290.             top: 30px;
  1291.             background: rgba(11, 11, 11, .7);
  1292.             width: 42px;
  1293.             height: 42px;
  1294.             font-size: 16px;
  1295.             transform: translateY(-50%);
  1296.         }
  1297.  
  1298.         .mod_menu_header button:hover {
  1299.             background: rgba(11, 11, 11, .5);
  1300.         }
  1301.  
  1302.         .mod_menu_inner {
  1303.             display: flex;
  1304.         }
  1305.  
  1306.         .mod_menu_navbar {
  1307.             display: flex;
  1308.             flex-direction: column;
  1309.             gap: 10px;
  1310.             min-width: 132px;
  1311.             padding: 10px;
  1312.             background: #181818;
  1313.             height: 440px;
  1314.         }
  1315.  
  1316.         .mod_nav_btn, .modButton-black {
  1317.             display: flex;
  1318.             justify-content: space-evenly;
  1319.             align-items: center;
  1320.             padding: 5px;
  1321.             background: #050505;
  1322.             border-radius: 8px;
  1323.             font-size: 16px;
  1324.             border: 1px solid transparent;
  1325.             outline: none;
  1326.             width: 100%;
  1327.             transition: all .3s ease;
  1328.         }
  1329.         label.modButton-black {
  1330.             font-weight: 400;
  1331.             cursor: pointer;
  1332.         }
  1333.  
  1334.         .modButton-black[disabled] {
  1335.             background: #333;
  1336.             cursor: default;
  1337.         }
  1338.  
  1339.         .mod_selected {
  1340.             border: 1px solid rgba(89, 89, 89, .9);
  1341.         }
  1342.  
  1343.         .mod_nav_btn img {
  1344.             width: 22px;
  1345.         }
  1346.  
  1347.         .mod_menu_content {
  1348.             width: 100%;
  1349.             padding: 10px;
  1350.             position: relative;
  1351. 			max-width: 568px;
  1352.         }
  1353.  
  1354.         .mod_tab {
  1355.             width: 100%;
  1356. 			height: 100%;
  1357.             display: flex;
  1358.             flex-direction: column;
  1359.             gap: 5px;
  1360.             overflow-y: auto;
  1361.             overflow-x: hidden;
  1362.             max-height: 420px;
  1363.             opacity: 1;
  1364.             transition: all .2s ease;
  1365.         }
  1366.         .modColItems {
  1367.             display: flex;
  1368.             flex-direction: column;
  1369.             align-items: center;
  1370.             gap: 15px;
  1371.             width: 100%;
  1372.         }
  1373.  
  1374.         .modColItems_2 {
  1375.             display: flex;
  1376.             flex-direction: column;
  1377.             align-items: start;
  1378.             justify-content: start;
  1379.             background: #050505;
  1380.             gap: 8px;
  1381.             border-radius: 0.5rem;
  1382.             padding: 10px;
  1383.             width: 100%;
  1384.         }
  1385.  
  1386.         .modRowItems {
  1387.             display: flex;
  1388.             justify-content: center;
  1389.             align-items: center;
  1390.             background: #050505;
  1391.             gap: 58px;
  1392.             border-radius: 0.5rem;
  1393.             padding: 10px;
  1394.             width: 100%;
  1395.         }
  1396.  
  1397.         .form-control {
  1398.             border-width: 1px;
  1399.         }
  1400.         .form-control.error-border {
  1401.             border-color: #AC3D3D;
  1402.         }
  1403.  
  1404. 		.modSlider {
  1405. 		  --thumb-color: #d9d9d9;
  1406. 		  -webkit-appearance: none;
  1407. 		  appearance: none;
  1408. 		  width: 100%;
  1409. 		  height: 8px;
  1410. 		  background: #333;
  1411. 		  border-radius: 5px;
  1412. 		  outline: none;
  1413. 		  transition: all 0.3s ease;
  1414. 		}
  1415.  
  1416. 		.modSlider::-webkit-slider-thumb {
  1417. 		  -webkit-appearance: none;
  1418. 		  appearance: none;
  1419. 		  width: 20px;
  1420. 		  height: 20px;
  1421. 		  border-radius: 50%;
  1422. 		  background: var(--thumb-color);
  1423. 		}
  1424.  
  1425. 		.modSlider::-moz-range-thumb {
  1426. 		  width: 20px;
  1427. 		  height: 20px;
  1428. 		  border-radius: 50%;
  1429. 		  background: var(--thumb-color);
  1430. 		}
  1431.  
  1432. 		.modSlider::-ms-thumb {
  1433. 		  width: 20px;
  1434. 		  height: 20px;
  1435. 		  border-radius: 50%;
  1436. 		  background: var(--thumb-color);
  1437. 		}
  1438.  
  1439.         input:focus, select:focus, button:focus{
  1440.              outline: none;
  1441.         }
  1442.         .macros_wrapper {
  1443.             display: flex;
  1444.             width: 100%;
  1445.             justify-content: center;
  1446.             flex-direction: column;
  1447.             gap: 10px;
  1448.             background: #050505;
  1449.             padding: 10px;
  1450.             border-radius: 0.75rem;
  1451.         }
  1452.         .macrosContainer {
  1453.             display: flex;
  1454.             width: 100%;
  1455.             justify-content: center;
  1456.             align-items: center;
  1457.             gap: 20px;
  1458.         }
  1459.         .macroRow {
  1460.             background: #121212;
  1461.             border-radius: 5px;
  1462.             padding: 7px;
  1463.             display: flex;
  1464.             justify-content: space-between;
  1465.             align-items: center;
  1466.             gap: 10px;
  1467.         }
  1468.         .keybinding {
  1469.             border-radius: 5px;
  1470.             background: #242424;
  1471.             border: none;
  1472.             color: #fff;
  1473.             padding: 2px 5px;
  1474.             max-width: 50px;
  1475.             font-weight: 500;
  1476.             text-align: center;
  1477.         }
  1478.         .closeBtn{
  1479.              width: 46px;
  1480.              background-color: transparent;
  1481. 			 display: flex;
  1482. 			 justify-content: center;
  1483. 			 align-items: center;
  1484.         }
  1485.         .select-btn {
  1486.             padding: 15px 20px;
  1487.             background: #222;
  1488.             border-radius: 2px;
  1489.             position: relative;
  1490.         }
  1491.  
  1492.         .select-btn:active {
  1493.             scale: 0.95
  1494.         }
  1495.  
  1496.         .select-btn::before {
  1497.             content: "...";
  1498.             font-size: 20px;
  1499.             color: #fff;
  1500.             position: absolute;
  1501.             top: 50%;
  1502.             left: 50%;
  1503.             transform: translate(-50%, -50%);
  1504.         }
  1505.          .text {
  1506.              user-select: none;
  1507.              font-weight: 500;
  1508.              text-align: left;
  1509.         }
  1510.          .modButton {
  1511.              background-color: #252525;
  1512.              border-radius: 4px;
  1513.              color: #fff;
  1514.              transition: all .3s;
  1515.              outline: none;
  1516.              padding: 7px;
  1517.              font-size: 13px;
  1518.              border: none;
  1519.         }
  1520.          .modButton:hover {
  1521.              background-color: #222
  1522.         }
  1523.          .modInput {
  1524.              background-color: #111;
  1525.              border: none;
  1526.              border-radius: 5px;
  1527.              position: relative;
  1528.              border-top-right-radius: 4px;
  1529.              border-top-left-radius: 4px;
  1530.              font-weight: 500;
  1531.              padding: 5px;
  1532.              color: #fff;
  1533.         }
  1534. 		.modNumberInput:disabled {
  1535. 			color: #777;
  1536. 		}
  1537.  
  1538.         .modCheckbox input[type="checkbox"] {
  1539.              display: none;
  1540.              visibility: hidden;
  1541.         }
  1542.         .modCheckbox label {
  1543.           display: inline-block;
  1544.         }
  1545.  
  1546.         .modCheckbox .cbx {
  1547.           position: relative;
  1548.           top: 1px;
  1549.           width: 17px;
  1550.           height: 17px;
  1551.           margin: 2px;
  1552.           border: 1px solid #c8ccd4;
  1553.           border-radius: 3px;
  1554.           vertical-align: middle;
  1555.           transition: background 0.1s ease;
  1556.           cursor: pointer;
  1557.         }
  1558.  
  1559.         .modCheckbox .cbx:after {
  1560.           content: '';
  1561.           position: absolute;
  1562.           top: 1px;
  1563.           left: 5px;
  1564.           width: 5px;
  1565.           height: 11px;
  1566.           opacity: 0;
  1567.           transform: rotate(45deg) scale(0);
  1568.           border-right: 2px solid #fff;
  1569.           border-bottom: 2px solid #fff;
  1570.           transition: all 0.3s ease;
  1571.           transition-delay: 0.15s;
  1572.         }
  1573.  
  1574.         .modCheckbox input[type="checkbox"]:checked ~ .cbx {
  1575.           border-color: transparent;
  1576.           background: #6871f1;
  1577.           box-shadow: 0 0 10px #2E2D80;
  1578.         }
  1579.  
  1580.         .modCheckbox input[type="checkbox"]:checked ~ .cbx:after {
  1581.           opacity: 1;
  1582.           transform: rotate(45deg) scale(1);
  1583.         }
  1584.  
  1585.          .SettingsButton{
  1586.              border: none;
  1587.              outline: none;
  1588.              margin-right: 10px;
  1589.              transition: all .3s ease;
  1590.         }
  1591.          .SettingsButton:hover {
  1592.              scale: 1.1;
  1593.         }
  1594.          .colorInput{
  1595.              background-color: transparent;
  1596.              width: 31px;
  1597.              height: 35px;
  1598.              border-radius: 50%;
  1599.              border: none;
  1600.         }
  1601.          .colorInput::-webkit-color-swatch {
  1602.              border-radius: 50%;
  1603.              border: 2px solid #fff;
  1604.         }
  1605.         .whiteBorder_colorInput::-webkit-color-swatch {
  1606.             border-color: #fff;
  1607.         }
  1608. 		.menu-center>div>.menu-center-content>div>div>.menu__form-group {
  1609. 			margin-bottom: 14px !important;
  1610. 		}
  1611.          #dclinkdiv {
  1612.              display: flex;
  1613.              flex-direction: row;
  1614.              margin-top: 10px;
  1615.         }
  1616.          .dclinks {
  1617.              width: calc(50% - 5px);
  1618.              height: 36px;
  1619.              display: flex;
  1620.              justify-content: center;
  1621.              align-items: center;
  1622.              background-color: rgba(88, 101, 242, 1);
  1623.              border-radius: 6px;
  1624.              margin: 0 auto;
  1625.              color: #fff;
  1626.         }
  1627.          #cm_close__settings {
  1628.              width: 50px;
  1629.              transition: all .3s ease;
  1630.         }
  1631.          #cm_close__settings svg:hover {
  1632.              scale: 1.1;
  1633.         }
  1634.          #cm_close__settings svg {
  1635.              transition: all .3s ease;
  1636.         }
  1637.          .modTitleText {
  1638.              text-align: center;
  1639.              font-size: 16px;
  1640.         }
  1641.         .modItem {
  1642.              display: flex;
  1643.              justify-content: center;
  1644.              align-items: center;
  1645.              flex-direction: column;
  1646.         }
  1647.         .accent_row {
  1648.             background: #111111;
  1649.         }
  1650.          .mod_tab-content {
  1651.              width: 100%;
  1652.              margin: 10px;
  1653.              overflow: auto;
  1654.              display: flex;
  1655.              flex-direction: column;
  1656.         }
  1657.  
  1658.         #Tab6 .mod_tab-content {
  1659.              overflow-y: auto;
  1660.              max-height: 230px;
  1661.              display: flex;
  1662.              flex-wrap: nowrap;
  1663.              flex-direction: column;
  1664.              gap: 10px;
  1665.         }
  1666.  
  1667.         .tab-content, #coins-tab, #chests-tab {
  1668.             overflow-x: hidden;
  1669.             justify-content: center;
  1670.         }
  1671.  
  1672.         #shop-skins-buttons::after {
  1673.             background: #050505;
  1674.         }
  1675.  
  1676. 		#sigma-status {
  1677. 			background: rgba(0, 0, 0, .6) !important;
  1678. 		}
  1679.  
  1680.          .w-100 {
  1681.              width: 100%
  1682.         }
  1683.          .btn:hover {
  1684.              color: unset;
  1685.         }
  1686.  
  1687.         #savedNames {
  1688.             background-color: #000;
  1689.             padding: 5px;
  1690.             border-radius: 5px;
  1691.             overflow-y: auto;
  1692.             height: 155px;
  1693.             background-image: url("https://raw.githubusercontent.com/Sigmally/SigMod/main/images/purple_gradient.png");
  1694.             background-size: cover;
  1695.             background-position: center;
  1696.             background-repeat: no-repeat;
  1697.             box-shadow: 0 0 10px #000;
  1698.         }
  1699.  
  1700.         .scroll {
  1701.             scroll-behavior: smooth;
  1702.         }
  1703.  
  1704.         /* Chrome, Safari */
  1705.         .scroll::-webkit-scrollbar {
  1706.             width: 7px;
  1707.         }
  1708.  
  1709.         .scroll::-webkit-scrollbar-track {
  1710.             background: #222;
  1711.             border-radius: 5px;
  1712.         }
  1713.  
  1714.         .scroll::-webkit-scrollbar-thumb {
  1715.             background-color: #333;
  1716.             border-radius: 5px;
  1717.         }
  1718.  
  1719.         .scroll::-webkit-scrollbar-thumb:hover {
  1720.             background: #353535;
  1721.         }
  1722.  
  1723.         /* Firefox */
  1724.         .scroll {
  1725.             scrollbar-width: thin;
  1726.             scrollbar-color: #333 #222;
  1727.         }
  1728.  
  1729.         .scroll:hover {
  1730.             scrollbar-color: #353535 #222;
  1731.         }
  1732.  
  1733.         .themes {
  1734.             display: flex;
  1735.             flex-direction: row;
  1736. 			flex: 1;
  1737.             flex-wrap: wrap;
  1738.             justify-content: center;
  1739.             width: 100%;
  1740. 			min-height: 254px;
  1741.             max-height: 420px;
  1742.             background: #000;
  1743.             border-radius: 5px;
  1744.             overflow-y: scroll;
  1745.             gap: 10px;
  1746.             padding: 5px;
  1747.         }
  1748.  
  1749.         .themeContent {
  1750.           width: 50px;
  1751.           height: 50px;
  1752.           border: 2px solid #222;
  1753.           border-radius: 50%;
  1754.           background-position: center;
  1755.         }
  1756.  
  1757.         .theme {
  1758.             height: 75px;
  1759.             display: flex;
  1760.             align-items: center;
  1761.             justify-content: center;
  1762.             flex-direction: column;
  1763.             cursor: pointer;
  1764.         }
  1765.          .delName {
  1766.              font-weight: 500;
  1767.              background: #e17e7e;
  1768.              height: 20px;
  1769.              border: none;
  1770.              border-radius: 5px;
  1771.              font-size: 10px;
  1772.              margin-left: 5px;
  1773.              color: #fff;
  1774.              display: flex;
  1775.              justify-content: center;
  1776.              align-items: center;
  1777.              width: 20px;
  1778.         }
  1779.          .NameDiv {
  1780.              display: flex;
  1781.              background: #111;
  1782.              border-radius: 5px;
  1783.              margin: 5px;
  1784.              padding: 3px 8px;
  1785.              height: 34px;
  1786.              align-items: center;
  1787.              justify-content: space-between;
  1788.              cursor: pointer;
  1789.              box-shadow: 0 5px 10px -2px #000;
  1790.         }
  1791.         .NameLabel {
  1792.             cursor: pointer;
  1793.             font-weight: 500;
  1794.             text-align: center;
  1795.             color: #fff;
  1796.         }
  1797.         .alwan {
  1798.             border-radius: 8px;
  1799.         }
  1800.         .colorpicker-additional {
  1801.             display: flex;
  1802.             justify-content: space-between;
  1803.             width: 100%;
  1804.             color: #fafafa;
  1805.             padding: 10px;
  1806.         }
  1807.         .resetButton {
  1808.             width: 25px;
  1809.             height: 25px;
  1810.             background-image: url("https://raw.githubusercontent.com/Sigmally/SigMod/main/images/reset.svg");
  1811.             background-color: transparent;
  1812. 			background-repeat: no-repeat;
  1813.             border: none;
  1814.         }
  1815.  
  1816.         .modAlert {
  1817.             position: fixed;
  1818.             top: 8%;
  1819.             left: 50%;
  1820.             transform: translate(-50%, -50%);
  1821.             z-index: 99995;
  1822.             background: #3F3F3F;
  1823.             border-radius: 10px;
  1824.             display: flex;
  1825.             flex-direction: column;
  1826.             gap: 5px;
  1827.             padding: 10px;
  1828.             color: #fff;
  1829.             max-width: 320px;
  1830.         }
  1831.  
  1832.         .alert_overlay {
  1833.             position: absolute;
  1834.             top: 0;
  1835.             left: 0;
  1836.             z-index: 999999999;
  1837.             pointer-events: none;
  1838.             width: 100%;
  1839.             height: 100vh;
  1840.             display: flex;
  1841.             flex-direction: column;
  1842.             justify-content: start;
  1843.             align-items: center;
  1844.         }
  1845.  
  1846.         .infoAlert {
  1847.             padding: 5px;
  1848.             border-radius: 5px;
  1849.             margin-top: 5px;
  1850.             color: #fff;
  1851.         }
  1852.  
  1853.         .modAlert-success {
  1854.             background: #5BA55C;
  1855.         }
  1856.         .modAlert-success .modAlert-loader {
  1857.             background: #6BD56D;
  1858.         }
  1859.         .modAlert-default {
  1860.             background: #151515;
  1861.         }
  1862.         .modAlert-default .modAlert-loader {
  1863.             background: #222;
  1864.         }
  1865.         .modAlert-danger {
  1866.             background: #D44121;
  1867.         }
  1868.         .modAlert-danger .modAlert-loader {
  1869.             background: #A5361E;
  1870.         }
  1871.         #free-coins .modAlert-danger {
  1872.             background: #fff !important;
  1873.         }
  1874.  
  1875.         .modAlert-loader {
  1876.             width: 100%;
  1877.             height: 2px;
  1878.             margin-top: 5px;
  1879.             transition: all .3s ease-in-out;
  1880.             animation: loadAlert 2s forwards;
  1881.         }
  1882.  
  1883.         @keyframes loadAlert {
  1884.             0% {
  1885.                 width: 100%;
  1886.             }
  1887.             100% {
  1888.                 width: 0%;
  1889.             }
  1890.         }
  1891.  
  1892.         .themeEditor {
  1893.             z-index: 999999999999;
  1894.             position: absolute;
  1895.             top: 50%;
  1896.             left: 50%;
  1897.             transform: translate(-50%, -50%);
  1898.             background: rgba(0, 0, 0, .85);
  1899.             color: #fff;
  1900.             padding: 10px;
  1901.             border-radius: 10px;
  1902.             box-shadow: 0 0 10px #000;
  1903.             width: 400px;
  1904.         }
  1905.  
  1906.         .theme_editor_header {
  1907.             display: flex;
  1908.             justify-content: space-between;
  1909.             align-items: center;
  1910.             gap: 10px;
  1911.         }
  1912.  
  1913.         .theme-editor-tab {
  1914.             display: flex;
  1915.             justify-content: center;
  1916.             align-items: start;
  1917.             flex-direction: column;
  1918.             margin-top: 10px
  1919.         }
  1920.  
  1921.         .themes_preview {
  1922.             width: 50px;
  1923.             height: 50px;
  1924.             border: 2px solid #fff;
  1925.             border-radius: 2px;
  1926.             display: flex;
  1927.             justify-content: center;
  1928.             align-items: center;
  1929.         }
  1930.  
  1931.         .sigmod-title {
  1932.             display: flex;
  1933.             flex-direction: column;
  1934.             align-items: center;
  1935.             gap: 2px;
  1936.         }
  1937.         .sigmod-title #title {
  1938.             width: fit-content;
  1939.         }
  1940.         #bycursed {
  1941.             font-family: "Titillium Web", sans-serif;
  1942. 			font-weight: 400;
  1943.             font-size: 16px;
  1944.         }
  1945.         #bycursed a {
  1946.             color: #71aee3;
  1947.         }
  1948.         .stats__item>span, #title, .stats-btn__text {
  1949.            color: #fff;
  1950.         }
  1951.  
  1952.         .top-users {
  1953.             overflow: hidden;
  1954.         }
  1955.         .top-users__inner {
  1956.             background: transparent;
  1957.         }
  1958.         .top-users__inner table {
  1959.             background-color: rgba(0, 0, 0, 0.6);
  1960.             color: #fff;
  1961.             border-radius: 6px;
  1962.             padding-top: 4px;
  1963.             padding-right: 6px;
  1964.         }
  1965.  
  1966.         .top-users_buttons button {
  1967.             background-color: rgba(0, 0, 0, 0.5);
  1968.             color: #fff;
  1969.         }
  1970.  
  1971.         .top-users_buttons button.active {
  1972.             background-color: rgba(0, 0, 0, 0.8);
  1973.         }
  1974.  
  1975.         .top-users__inner::-webkit-scrollbar-thumb {
  1976.             border: none;
  1977.         }
  1978.         #signInBtn, #nick, #gamemode, .form-control, .profile-header, .coins-num, #clan-members, .member-index, .member-level, #clan-requests {
  1979.             background: rgba(0, 0, 0, 0.4) !important;
  1980.             color: #fff !important;
  1981.         }
  1982.         .profile-name, #progress-next, .member-desc > p:first-child, #clan-leave > div, .clans-item > div > b, #clans-input input, #shop-nav button {
  1983.             color: #fff !important;
  1984.         }
  1985.         .head-desc, #shop-nav button {
  1986.             border: 1px solid #000;
  1987.         }
  1988.         #shop-nav button {
  1989.            transition: background .1s ease;
  1990.         }
  1991.         #shop-nav button:hover {
  1992.            background: #121212 !important;
  1993.         }
  1994.         #clan-handler, #request-handler, #clans-list, #clans-input, .clans-item button, #shop-content, .card-particles-bar-bg {
  1995.             background: #111 !important;
  1996.             color: #fff !important;
  1997.         }
  1998.         #clans_and_settings {
  1999.             height: auto !important;
  2000.         }
  2001.         .card-body {
  2002.             background: linear-gradient(180deg, #000 0%, #1b354c 100%);
  2003.         }
  2004.         .free-card:hover .card-body {
  2005.             background: linear-gradient(180deg, #111 0%, #1b354c 100%);
  2006.         }
  2007.         #shop-tab-body, #shop-nav, #shop-skins-buttons {
  2008.             background: #050505 !important;
  2009.         }
  2010.         #clan-leave {
  2011.             background: #111;
  2012.             bottom: -1px;
  2013.         }
  2014.         .sent {
  2015.             position: relative;
  2016.             width: 100px;
  2017.         }
  2018.  
  2019.         .sent::before {
  2020.             content: "Sent request";
  2021.             width: 100%;
  2022.             height: 10px;
  2023.             word-spacing: normal;
  2024.             white-space: nowrap;
  2025.             position: absolute;
  2026.             background: #4f79f9;
  2027.             display: flex;
  2028.             justify-content: center;
  2029.             align-items: center;
  2030.         }
  2031.  
  2032.         .btn, .sign-in-out-btn {
  2033.             transition: all .2s ease;
  2034.         }
  2035. 		.free-coins-body > div, .goldmodal-contain {
  2036. 			background: rgba(0, 0, 0, .5);
  2037. 		}
  2038.         #clan .connecting__content, #clans .connecting__content {
  2039.             background: #151515;
  2040.             color: #fff;
  2041.             box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  2042.         }
  2043.  
  2044.         .skin-select__icon-text {
  2045.             color: #fff;
  2046.         }
  2047.  
  2048.         .justify-sb {
  2049.             display: flex;
  2050.             align-items: center;
  2051.             justify-content: space-between;
  2052.         }
  2053.  
  2054.         .macro-extanded_input {
  2055.             width: 75px;
  2056.             text-align: center;
  2057.         }
  2058.         .form-control option {
  2059.             background: #111;
  2060.         }
  2061.  
  2062.         .stats-line {
  2063.             width: 100%;
  2064.             user-select: none;
  2065.             margin-bottom: 5px;
  2066.             padding: 5px;
  2067.             background: #050505;
  2068.             border: 1px solid var(--default-mod);
  2069.             border-radius: 5px;
  2070.         }
  2071.  
  2072.         .stats-info-text {
  2073.             color: #7d7d7d;
  2074.         }
  2075.  
  2076.         .setting-card-wrapper {
  2077.             margin-right: 10px;
  2078.             padding: 10px;
  2079.             background: #161616;
  2080.             border-radius: 5px;
  2081.             display: flex;
  2082.             flex-direction: column;
  2083. 			width: 100%;
  2084.         }
  2085.  
  2086.         .setting-card {
  2087.             display: flex;
  2088.             align-items: center;
  2089.             justify-content: space-between;
  2090.         }
  2091.  
  2092.         .setting-card-action {
  2093.             display: flex;
  2094.             align-items: center;
  2095.             gap: 5px;
  2096.             cursor: pointer;
  2097.         }
  2098.  
  2099.         .setting-card-action {
  2100.             width: 100%;
  2101.         }
  2102.  
  2103.         .setting-card-name {
  2104.             font-size: 16px;
  2105.             user-select: none;
  2106.             width: 100%;
  2107.         }
  2108.  
  2109.         .mod-small-modal {
  2110.             display: flex;
  2111.             flex-direction: column;
  2112.             gap: 10px;
  2113.             position: absolute;
  2114.             z-index: 99999;
  2115.             top: 50%;
  2116.             left: 50%;
  2117.             transform: translate(-50%, -50%);
  2118.             background: #191919;
  2119.             box-shadow: 0 5px 15px -2px #000;
  2120.             padding: 10px;
  2121.             border-radius: 5px;
  2122.         }
  2123.  
  2124.         .mod-small-modal-header {
  2125.             display: flex;
  2126.             justify-content: space-between;
  2127.             align-items: center;
  2128.         }
  2129.  
  2130.         .mod-small-modal-header h1 {
  2131.             font-size: 20px;
  2132.             font-weight: 500;
  2133.             margin: 0;
  2134.         }
  2135.  
  2136.         .mod-small-modal-content {
  2137.             display: flex;
  2138.             flex-direction: column;
  2139.             width: 100%;
  2140.             align-items: center;
  2141.         }
  2142.  
  2143.         .mod-small-modal-content_selectImage {
  2144.             display: flex;
  2145.             flex-direction: column;
  2146.             gap: 10px;
  2147.         }
  2148.  
  2149.         .imagePreview {
  2150.             min-width: 34px;
  2151.             width: 34px;
  2152.             height: 34px;
  2153.             border: 2px solid #353535;
  2154. 			border-radius: 5px;
  2155. 			background-size: contain;
  2156. 			background-repeat: no-repeat;
  2157. 			background-position: center;
  2158.  
  2159. 			/* for preview text */
  2160. 			display: flex;
  2161. 			justify-content: center;
  2162. 			align-items: center;
  2163. 			font-size: 7px;
  2164. 			overflow: hidden;
  2165. 			text-align: center;
  2166.         }
  2167.  
  2168.         .modChat {
  2169.             min-width: 450px;
  2170.             max-width: 450px;
  2171.             min-height: 285px;
  2172.             max-height: 285px;
  2173.             color: #fafafa;
  2174.             padding: 10px;
  2175.             position: absolute;
  2176.             bottom: 10px;
  2177.             left: 10px;
  2178.             z-index: 999;
  2179.             border-radius: .5rem;
  2180.             overflow: hidden;
  2181.             opacity: 1;
  2182.             transition: all .3s ease;
  2183.         }
  2184.  
  2185.         .modChat__inner {
  2186.             min-width: 430px;
  2187.             max-width: 430px;
  2188.             min-height: 265px;
  2189.             max-height: 265px;
  2190.             height: 100%;
  2191.             display: flex;
  2192.             flex-direction: column;
  2193.             gap: 5px;
  2194.             justify-content: flex-end;
  2195.             opacity: 1;
  2196.             transition: all .3s ease;
  2197.         }
  2198.  
  2199.         .mod-compact {
  2200.             transform: scale(0.78);
  2201.         }
  2202.         .mod-compact.modChat {
  2203.             left: -40px;
  2204.             bottom: -20px;
  2205.         }
  2206.         .mod-compact.chatAddedContainer {
  2207.             left: 350px;
  2208.             bottom: -17px;
  2209.         }
  2210.  
  2211.         #scroll-down-btn {
  2212.             position: absolute;
  2213.             bottom: 60px;
  2214.             left: 50%;
  2215.             transform: translateX(-50%);
  2216.             width: 80px;
  2217.             display:none;
  2218.             box-shadow:0 0 5px #000;
  2219.             z-index: 5;
  2220.         }
  2221.  
  2222.         .modchat-chatbuttons {
  2223.             margin-bottom: auto;
  2224.             display: flex;
  2225.             gap: 5px;
  2226.         }
  2227.  
  2228.         .chat-context {
  2229.             position: absolute;
  2230.             z-index: 999999;
  2231.             width: 100px;
  2232.             display: flex;
  2233.             flex-direction: column;
  2234.             justify-content: center;
  2235.             align-items: center;
  2236.             gap: 5px;
  2237.             background: #181818;
  2238.             border-radius: 5px;
  2239.         }
  2240.  
  2241.         .chat-context span {
  2242.             color: #fff;
  2243.             user-select: none;
  2244.             padding: 5px;
  2245.             white-space: nowrap;
  2246.         }
  2247.  
  2248.         .chat-context button {
  2249.             width: 100%;
  2250.             background-color: transparent;
  2251.             border: none;
  2252.             border-top: 2px solid #747474;
  2253.             outline: none;
  2254.             color: #fff;
  2255.             transition: all .3s ease;
  2256.         }
  2257.  
  2258.         .chat-context button:hover {
  2259.             backgrokund-color: #222;
  2260.         }
  2261.  
  2262.         .tagText {
  2263.             margin-left: auto;
  2264.             font-size: 14px;
  2265.         }
  2266.  
  2267.         #mod-messages {
  2268.             position: relative;
  2269.             display: flex;
  2270.             flex-direction: column;
  2271.             max-height: 185px;
  2272.             overflow-y: auto;
  2273.             direction: rtl;
  2274.             scroll-behavior: smooth;
  2275.         }
  2276.         .message {
  2277.             direction: ltr;
  2278.             margin: 2px 0 0 5px;
  2279.             text-overflow: ellipsis;
  2280.             max-width: 100%;
  2281.             display: flex;
  2282.             justify-content: space-between;
  2283.         }
  2284.  
  2285.         .message_name {
  2286.             user-select: none;
  2287.         }
  2288.  
  2289.         .chatMessage-text {
  2290.             max-width: 310px;
  2291.         }
  2292.  
  2293.         .message .time {
  2294.             color: rgba(255, 255, 255, 0.7);
  2295.             font-size: 12px;
  2296.         }
  2297.  
  2298.         #chatInputContainer {
  2299.             display: flex;
  2300.             gap: 5px;
  2301.             align-items: center;
  2302.             padding: 5px;
  2303.             background: rgba(25,25,25, .6);
  2304.             border-radius: .5rem;
  2305.             overflow: hidden;
  2306.         }
  2307.  
  2308.         .chatInput {
  2309.             flex-grow: 1;
  2310.             border: none;
  2311.             background: transparent;
  2312.             color: #fff;
  2313.             padding: 5px;
  2314.             outline: none;
  2315.             max-width: 100%;
  2316.         }
  2317.  
  2318.         .chatButton {
  2319.             background: #8a25e5;
  2320.             border: none;
  2321.             border-radius: 5px;
  2322.             padding: 5px 10px;
  2323.             height: 100%;
  2324.             color: #fff;
  2325.             transition: all 0.3s;
  2326.             cursor: pointer;
  2327.             display: flex;
  2328.             align-items: center;
  2329.             height: 28px;
  2330.             justify-content: center;
  2331.             gap: 5px;
  2332.         }
  2333.         .chatButton:hover {
  2334.             background: #7a25e5;
  2335.         }
  2336.         .chatCloseBtn {
  2337.             position: absolute;
  2338.             top: 50%;
  2339.             left: 50%;
  2340.             transform: translate(-50%, -50%);
  2341.         }
  2342.  
  2343.         .emojisContainer {
  2344.             display: flex;
  2345.             flex-direction: column;
  2346.             gap: 5px;
  2347.         }
  2348.         .chatAddedContainer {
  2349.             position: absolute;
  2350.             bottom: 10px;
  2351.             left: 465px;
  2352.             z-index: 9999;
  2353.             padding: 10px;
  2354.             background: #151515;
  2355.             border-radius: .5rem;
  2356.             min-width: 172px;
  2357.             max-width: 172px;
  2358.             min-height: 250px;
  2359.             max-height: 250px;
  2360.         }
  2361.         #categories {
  2362.             overflow-y: auto;
  2363.             max-height: calc(250px - 50px);
  2364.             gap: 2px;
  2365.         }
  2366.         .category {
  2367.             width: 100%;
  2368.             display: flex;
  2369.             flex-direction: column;
  2370.             gap: 2px;
  2371.         }
  2372.         .category span {
  2373.             color: #fafafa;
  2374.             font-size: 14px;
  2375.             text-align: center;
  2376.         }
  2377.  
  2378.         .emojiContainer {
  2379.             display: flex;
  2380.             flex-wrap: wrap;
  2381.             align-items: center;
  2382.             justify-content: center;
  2383.         }
  2384.  
  2385.         #categories .emoji {
  2386.             padding: 2px;
  2387.             border-radius: 5px;
  2388.             font-size: 16px;
  2389.             user-select: none;
  2390.             cursor: pointer;
  2391.         }
  2392.  
  2393.         .chatSettingsContainer {
  2394.             padding: 10px 3px;
  2395.         }
  2396.         .chatSettingsContainer .scroll {
  2397.             display: flex;
  2398.             flex-direction: column;
  2399.             gap: 10px;
  2400.             max-height: 235px;
  2401.             overflow-y: auto;
  2402.             padding: 0 10px;
  2403.         }
  2404.  
  2405.         .csBlock {
  2406.             border: 2px solid #050505;
  2407.             border-radius: .5rem;
  2408.             color: #fff;
  2409.             display: flex;
  2410.             align-items: center;
  2411.             flex-direction: column;
  2412.             gap: 5px;
  2413.             padding-bottom: 5px;
  2414.         }
  2415.  
  2416.         .csBlock .csBlockTitle {
  2417.             background: #080808;
  2418.             width: 100%;
  2419.             padding: 3px;
  2420.             text-align: center;
  2421.         }
  2422.  
  2423.         .csRow {
  2424.             display: flex;
  2425.             justify-content: space-between;
  2426.             align-items: center;
  2427.             padding: 0 5px;
  2428.             width: 100%;
  2429.         }
  2430.  
  2431.         .csRowName {
  2432.             display: flex;
  2433.             gap: 5px;
  2434.             align-items: start;
  2435.         }
  2436.  
  2437.         .csRowName .infoIcon {
  2438.             width: 14px;
  2439.             cursor: pointer;
  2440.         }
  2441.  
  2442.         .modInfoPopup {
  2443.             position: absolute;
  2444.             top: 2px;
  2445.             left: 58%;
  2446.             text-align: center;
  2447.             background: #151515;
  2448.             border: 1px solid #607bff;
  2449.             border-radius: 10px;
  2450.             transform: translateX(-50%);
  2451.             white-space: nowrap;
  2452.             padding: 5px;
  2453.             z-index: 99999;
  2454.         }
  2455.  
  2456.         .modInfoPopup::after {
  2457.             content: '';
  2458.             display: block;
  2459.             position: absolute;
  2460.             bottom: -7px;
  2461.             background: #151515;
  2462.             right: 50%;
  2463.             transform: translateX(-50%) rotate(-45deg);
  2464.             width: 12px;
  2465.             height: 12px;
  2466.             border-left: 1px solid #607bff;
  2467.             border-bottom: 1px solid #607bff;
  2468.         }
  2469.  
  2470.         .modInfoPopup p {
  2471.             margin: 0;
  2472.             font-size: 12px;
  2473.             color: #fff;
  2474.         }
  2475.  
  2476.         .minimapContainer {
  2477.             display: flex;
  2478.             flex-direction: column;
  2479.             align-items: end;
  2480.             pointer-events: none;
  2481.             position: absolute;
  2482.             bottom: 0;
  2483.             right: 0;
  2484.             z-index: 99999;
  2485.         }
  2486.         .minimap {
  2487.             border-radius: 2px;
  2488.             border-top: 1px solid rgba(255, 255, 255, .5);
  2489.             border-left: 1px solid rgba(255, 255, 255, .5);
  2490.             box-shadow: 0 0 4px rgba(255, 255, 255, .5);
  2491.         }
  2492.  
  2493.         #tag {
  2494.             width: 50px;
  2495.         }
  2496.  
  2497.         .blur {
  2498.             color: transparent!important;
  2499.             text-shadow: 0 0 6px hsl(0deg 0% 90% / 70%);
  2500.             transition: all .2s;
  2501.         }
  2502.  
  2503.         .blur:focus, .blur:hover {
  2504.             color: #fafafa!important;
  2505.             text-shadow: none;
  2506.         }
  2507.         .progress-row button {
  2508.             background: transparent;
  2509.         }
  2510.  
  2511.         #mod_home .justify-sb {
  2512.             z-index: 2;
  2513.         }
  2514.  
  2515.         .modTitleText {
  2516.             font-size: 15px;
  2517.             color: #fafafa;
  2518.             text-align: start;
  2519.         }
  2520.         .modDescText {
  2521.             text-align: start;
  2522.             font-size: 12px;
  2523.             color: #777;
  2524.         }
  2525.         .modButton-secondary {
  2526.             background-color: #171717;
  2527.             color: #fff;
  2528.             border: none;
  2529.             padding: 5px 15px;
  2530.             border-radius: 15px;
  2531.         }
  2532.         .vr {
  2533.             width: 2px;
  2534.             height: 250px;
  2535.             background-color: #fafafa;
  2536.         }
  2537.         .vr2 {
  2538.             width: 1px;
  2539.             height: 26px;
  2540.             background-color: #202020;
  2541.         }
  2542.  
  2543. 		.home-card-row {
  2544. 			display: flex;
  2545. 			flex-wrap: nowrap;
  2546. 			justify-content: space-between;
  2547. 			gap: 18px;
  2548. 		}
  2549.         .home-card-wrapper {
  2550.             display: flex;
  2551. 			flex: 1;
  2552.             flex-direction: column;
  2553.             gap: 5px;
  2554. 			width: 50%;
  2555.         }
  2556.         .home-card {
  2557.             display: flex;
  2558.             flex-direction: column;
  2559. 			justify-content: center;
  2560.             gap: 7px;
  2561.             border-radius: 5px;
  2562.             background: #050505;
  2563.             min-height: 164px;
  2564. 			max-height: 164px;
  2565. 			max-width: 256px;
  2566.             padding: 5px 10px;
  2567.         }
  2568. 		.quickAccess {
  2569. 			gap: 5px;
  2570. 			max-height: 164px;
  2571.             overflow-y: auto;
  2572. 			justify-content: start;
  2573.         }
  2574.  
  2575.         .quickAccess div.modRowItems {
  2576.             padding: 2px!important;
  2577.         }
  2578.  
  2579. 		#my-profile-badges {
  2580. 			display: flex;
  2581. 			flex-wrap: wrap;
  2582. 			gap: 5px;
  2583. 		}
  2584.         #my-profile-bio {
  2585.             overflow-y: scroll;
  2586.             max-height: 75px;
  2587.         }
  2588.  
  2589.         .brand_wrapper {
  2590.             position: relative;
  2591.             height: 72px;
  2592.             width: 100%;
  2593.             display: flex;
  2594.             justify-content: center;
  2595.             align-items: center;
  2596.         }
  2597. 		.brand_wrapper span {
  2598. 			font-size: 24px;
  2599. 			z-index: 2;
  2600. 			font-family: "Titillium Web", sans-serif;
  2601. 			font-weight: 600;
  2602. 			letter-spacing: 3px;
  2603. 		}
  2604.  
  2605.         .brand_img {
  2606.             position: absolute;
  2607.             top: 0;
  2608.             left: 0;
  2609.             width: 100%;
  2610.             height: 72px;
  2611.             border-radius: 10px;
  2612.             object-fit: cover;
  2613.             object-position: center;
  2614.             z-index: 1;
  2615.             box-shadow: 0 0 10px #000;
  2616.         }
  2617. 		.brand_credits {
  2618. 			position: relative;
  2619. 			font-size: 16px;
  2620. 			color: #D3A7FF;
  2621. 			list-style: none;
  2622. 			width: 100%;
  2623. 			display: flex;
  2624. 			justify-content: space-between;
  2625. 			padding: 0 24px;
  2626. 		}
  2627.  
  2628. 		.brand_credits li {
  2629. 			position: relative;
  2630. 			display: inline-block;
  2631. 			text-shadow: 0px 0px 8px #D3A7FF;
  2632. 		}
  2633.  
  2634. 		.brand_credits li:not(:last-child)::after {
  2635. 			content: '•';
  2636. 			position: absolute;
  2637. 			right: -20px;
  2638. 			color: #D3A7FF;
  2639. 		}
  2640.         .brand_yt {
  2641.             display: flex;
  2642.             justify-content: center;
  2643.             align-items: center;
  2644.             gap: 20px;
  2645.         }
  2646.         .yt_wrapper {
  2647.             display: flex;
  2648.             justify-content: center;
  2649.             align-items: center;
  2650.             gap: 10px;
  2651.             width: 122px;
  2652.             padding: 5px;
  2653.             background-color: #B63333;
  2654.             border-radius: 15px;
  2655.             cursor: pointer;
  2656.         }
  2657.         .yt_wrapper span {
  2658.             user-select: none;
  2659.         }
  2660.  
  2661.         .hidden_full {
  2662.             display: none !important;
  2663.             visibility: hidden;
  2664.         }
  2665.  
  2666.         .mod_overlay {
  2667.             position: absolute;
  2668.             top: 0;
  2669.             left: 0;
  2670.             width: 100%;
  2671.             height: 100vh;
  2672.             background: rgba(0, 0, 0, .7);
  2673.             z-index: 9999999;
  2674.             display: flex;
  2675.             justify-content: center;
  2676.             align-items: center;
  2677.             transition: all .3s ease;
  2678.         }
  2679.  
  2680. 		.black_overlay {
  2681. 			background: rgba(0, 0, 0, 0);
  2682. 			z-index: 99999999;
  2683. 			opacity: 1;
  2684. 			animation: 2s ease fadeInBlack forwards;
  2685. 		}
  2686.  
  2687. 		@keyframes fadeInBlack {
  2688. 			0% {
  2689. 				background: rgba(0, 0, 0, 0);
  2690. 			}
  2691. 			100% {
  2692. 				background: rgba(0, 0, 0, 1);
  2693. 			}
  2694. 		}
  2695.  
  2696. 		.default-modal {
  2697.             position: relative;
  2698.             display: flex;
  2699.             flex-direction: column;
  2700. 			min-width: 300px;
  2701.             background: #111;
  2702. 			color: #fafafa;
  2703.             border-radius: 12px;
  2704.             overflow: hidden;
  2705.             box-shadow: 0 5px 10px #000;
  2706. 		}
  2707.  
  2708. 		.default-modal-header {
  2709. 			display: flex;
  2710. 			justify-content: space-between;
  2711. 			align-items: center;
  2712. 			background: #1c1c1c;
  2713. 			padding: 5px 10px;
  2714. 		}
  2715.  
  2716. 		.default-modal-header h2 {
  2717. 			margin: 0;
  2718. 		}
  2719.  
  2720. 		.default-modal-body {
  2721. 			display: flex;
  2722. 			flex-direction: column;
  2723. 			gap: 6px;
  2724. 			padding: 15px;
  2725. 		}
  2726.  
  2727.         .tournament-overlay-info {
  2728.             display: flex;
  2729.             flex-direction: column;
  2730.             align-items: center;
  2731.             color: white;
  2732.             font-size: 28px;
  2733.             line-height: 1.4;
  2734.         }
  2735.  
  2736.         .tournament-overlay-info img {
  2737.             margin-bottom: 26px;
  2738.         }
  2739.  
  2740.         .tournaments-wrapper {
  2741. 		    font-family: 'Titillium Web', sans-serif;
  2742. 			font-weight: 400;
  2743.             position: absolute;
  2744.             top: 60%;
  2745.             left: 50%;
  2746.             transform: translate(-50%, -50%);
  2747.             background: #000;
  2748.             border: 2px solid #222222;
  2749.             border-radius: 1.125rem;
  2750.             padding: 1.5rem;
  2751.             color: #fafafa;
  2752.             display: flex;
  2753.             flex-direction: column;
  2754.             align-items: center;
  2755.             gap: 10px;
  2756.             min-width: 632px;
  2757.             opacity: 0;
  2758.             transition: all .3s ease;
  2759.             animation: 0.5s ease fadeIn forwards;
  2760.         }
  2761.         @keyframes fadeIn {
  2762.             0% {
  2763.                 top: 60%;
  2764.                 opacity: 0;
  2765.             }
  2766.             100% {
  2767.                 top: 50%;
  2768.                 opacity: 1;
  2769.             }
  2770.         }
  2771.         .tournaments h1 {
  2772.             margin: 0;
  2773. 			font-weight: 600;
  2774.         }
  2775.  
  2776. 		.teamCards {
  2777. 			display: flex;
  2778. 			gap: 5px;
  2779. 			position: absolute;
  2780. 			top: 50%;
  2781. 			transform: translate(-50%, -50%);
  2782. 		}
  2783.         .teamCard {
  2784.             display: flex;
  2785.             flex-direction: column;
  2786.             align-items: center;
  2787. 			background: rgba(0, 0, 0, 0.4);
  2788. 			border-radius: 12px;
  2789. 			padding: 6px;
  2790. 			height: fit-content;
  2791.         }
  2792. 		.teamCard.userReady {
  2793. 			border: 2px solid var(--green);
  2794. 		}
  2795.         .teamCard img {
  2796.             border-radius: 50%;
  2797.         }
  2798. 		.teamCard span {
  2799. 			font-size: 12px;
  2800. 		}
  2801.  
  2802. 		.redTeam {
  2803. 			left: 81%;
  2804. 		}
  2805.  
  2806. 		.blueTeam {
  2807. 			left: 24%;
  2808. 		}
  2809.  
  2810. 		.lastOneStanding_list {
  2811. 			display: flex;
  2812. 			flex-wrap: wrap;
  2813. 			gap: 8px;
  2814. 			width: 100%;
  2815. 			height: 240px;
  2816. 			max-height: 240px;
  2817. 			background: #050505;
  2818. 		}
  2819.  
  2820.         .tournament_timer {
  2821. 			position: absolute;
  2822. 			top: 20px;
  2823. 			left: 50%;
  2824. 			transform: translateX(-50%);
  2825.             color: #fff;
  2826.             font-size: 15px;
  2827. 			z-index: 99999;
  2828. 			user-select: none;
  2829. 			pointer-events: none;
  2830.         }
  2831.  
  2832.         details {
  2833.           border: 1px solid #aaa;
  2834.           border-radius: 4px;
  2835.           padding: 0.5em 0.5em 0;
  2836.           user-select: none;
  2837.           text-align: start;
  2838.         }
  2839.  
  2840.         summary {
  2841.           font-weight: bold;
  2842.           margin: -0.5em -0.5em 0;
  2843.           padding: 0.5em;
  2844.         }
  2845.  
  2846.         details[open] {
  2847.           padding: 0.5em;
  2848.         }
  2849.  
  2850.         details[open] summary {
  2851.           border-bottom: 1px solid #aaa;
  2852.           margin-bottom: 0.5em;
  2853.         }
  2854.         button[disabled] {
  2855.             filter: grayscale(1);
  2856.         }
  2857.  
  2858. 		.tournament-text-lost,
  2859. 		.tournament-text-won {
  2860. 			font-size: 6rem;
  2861. 			font-weight: 600;
  2862. 			font-family: 'Titillium Web', sans-serif;
  2863. 		}
  2864.  
  2865. 		.tournament-text-lost {
  2866. 			color: var(--red);
  2867. 		}
  2868. 		.tournament-text-won {
  2869. 			color: var(--green);
  2870. 		}
  2871.  
  2872.         .tournament_alert {
  2873.             position: absolute;
  2874.             top: 20px;
  2875.             left: 50%;
  2876.             transform: translateX(-50%);
  2877.             background: #151515;
  2878.             color: #fff;
  2879.             text-align: center;
  2880.             padding: 20px;
  2881.             z-index: 999999;
  2882.             border-radius: 10px;
  2883.             box-shadow: 0 0 10px #000;
  2884.             display: flex;
  2885.             gap: 10px;
  2886.         }
  2887.         .tournament-profile {
  2888.             width: 50px;
  2889.             height: 50px;
  2890.             border-radius: 50%;
  2891.             box-shadow: 0 0 10px #000;
  2892.         }
  2893.  
  2894.         .tournament-text {
  2895.             color: #fff;
  2896.             font-size: 24px;
  2897.         }
  2898.  
  2899.         .claimedBadgeWrapper {
  2900.             background: linear-gradient(232deg, #020405 1%, #04181E 100%);
  2901.             border-radius: 10px;
  2902.             width: 320px;
  2903.             height: 330px;
  2904.             box-shadow: 0 0 40px -20px #39bdff;
  2905.             display: flex;
  2906.             flex-direction: column;
  2907.             gap: 10px;
  2908.             align-items: center;
  2909.             justify-content: center;
  2910.             color: #fff;
  2911.             padding: 10px;
  2912.         }
  2913.  
  2914.         .btn-cyan {
  2915.             background: #53B6CC;
  2916.             border: none;
  2917.             border-radius: 5px;
  2918.             font-size: 16px;
  2919.             color: #fff;
  2920.             font-weight: 500;
  2921.             width: fit-content;
  2922.             padding: 5px 10px;
  2923.         }
  2924.  
  2925.         .playTimer {
  2926.             z-index: 2;
  2927.             position: absolute;
  2928.             top: 128px;
  2929.             left: 4px;
  2930.             color: #8d8d8d;
  2931.             font-size: 14px;
  2932.             font-weight: 500;
  2933.             user-select: none;
  2934.             pointer-events: none;
  2935.         }
  2936.  
  2937.         .mouseTracker {
  2938.             z-index: 2;
  2939.             position: absolute;
  2940.             top: 144px;
  2941.             left: 4px;
  2942.             color: #8d8d8d;
  2943.             font-size: 14px;
  2944.             font-weight: 500;
  2945.             user-select: none;
  2946.             pointer-events: none;
  2947.         }
  2948.  
  2949.         .modInput-wrapper {
  2950.           position: relative;
  2951.           display: inline-block;
  2952.           width: 100%;
  2953.         }
  2954.  
  2955.         .modInput-secondary {
  2956.           display: inline-block;
  2957.           width: 100%;
  2958.           padding: 10px 0 10px 15px;
  2959.           font-weight: 400;
  2960.           color: #E9E9E9;
  2961.           background: #050505;
  2962.           border: 0;
  2963.           border-radius: 3px;
  2964.           outline: 0;
  2965.           text-indent: 70px;
  2966.           transition: all .3s ease-in-out;
  2967.         }
  2968.         .modInput-secondary.t-indent-120 {
  2969.             text-indent: 120px;
  2970.         }
  2971.         .modInput-secondary::-webkit-input-placeholder {
  2972.           color: #050505;
  2973.           text-indent: 0;
  2974.           font-weight: 300;
  2975.         }
  2976.         .modInput-secondary + label {
  2977.           display: inline-block;
  2978.           position: absolute;
  2979.           top: 8px;
  2980.           left: 0;
  2981.           bottom: 8px;
  2982.           padding: 5px 15px;
  2983.           color: #E9E9E9;
  2984.           font-size: 11px;
  2985.           font-weight: 700;
  2986.           text-transform: uppercase;
  2987.           text-shadow: 0 1px 0 rgba(19, 74, 70, 0);
  2988.           transition: all .3s ease-in-out;
  2989.           border-radius: 3px;
  2990.           background: rgba(122, 134, 184, 0);
  2991.         }
  2992.         .modInput-secondary + label:after {
  2993.           position: absolute;
  2994.           content: "";
  2995.           width: 0;
  2996.           height: 0;
  2997.           top: 100%;
  2998.           left: 50%;
  2999.           margin-left: -3px;
  3000.           border-left: 3px solid transparent;
  3001.           border-right: 3px solid transparent;
  3002.           border-top: 3px solid rgba(122, 134, 184, 0);
  3003.           transition: all .3s ease-in-out;
  3004.         }
  3005.  
  3006.         .modInput-secondary:focus,
  3007.         .modInput-secondary:active {
  3008.           color: #E9E9E9;
  3009.           text-indent: 0;
  3010.           background: #050505;
  3011.         }
  3012.         .modInput-secondary:focus::-webkit-input-placeholder,
  3013.         .modInput-secondary:active::-webkit-input-placeholder {
  3014.           color: #aaa;
  3015.         }
  3016.         .modInput-secondary:focus + label,
  3017.         .modInput-secondary:active + label {
  3018.           color: #fff;
  3019.           text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  3020.           background: #7A86B8;
  3021.           transform: translateY(-40px);
  3022.         }
  3023.         .modInput-secondary:focus + label:after,
  3024.         .modInput-secondary:active + label:after {
  3025.           border-top: 4px solid #7A86B8;
  3026.         }
  3027.  
  3028.         /* Friends & account */
  3029.  
  3030.         .signIn-overlay {
  3031.             position: absolute;
  3032.             top: 0;
  3033.             left: 0;
  3034.             width: 100%;
  3035.             height: 100vh;
  3036.             background: rgba(0, 0, 0, .4);
  3037.             z-index: 999999;
  3038.             display: flex;
  3039.             justify-content: center;
  3040.             align-items: center;
  3041.             color: #E3E3E3;
  3042.             opacity: 0;
  3043.             transition: all .3s ease;
  3044.         }
  3045.  
  3046.         .signIn-wrapper {
  3047.             background: #111111;
  3048.             width: 450px;
  3049.             display: flex;
  3050.             flex-direction: column;
  3051.             align-items: center;
  3052.             border-radius: 10px;
  3053.             color: #fafafa;
  3054.         }
  3055.  
  3056.         .signIn-header {
  3057.             background: #181818;
  3058.             width: 100%;
  3059.             display: flex;
  3060.             justify-content: space-between;
  3061.             align-items: center;
  3062.             padding: 8px;
  3063.             border-radius: 10px 10px 0 0;
  3064.         }
  3065.         .signIn-header span {
  3066.             font-weight: 500;
  3067.             font-size: 20px;
  3068.         }
  3069.  
  3070.         .signIn-body {
  3071.             display: flex;
  3072.             flex-direction: column;
  3073.             gap: 10px;
  3074.             align-items: center;
  3075.             justify-content: start;
  3076.             padding: 40px 40px 5px 40px;
  3077.             width: 100%;
  3078.         }
  3079.  
  3080.         #errMessages {
  3081.             color: #AC3D3D;
  3082.             flex-direction: column;
  3083.             gap: 5px;
  3084.         }
  3085.  
  3086.         .friends_header {
  3087.             display: flex;
  3088.             flex-direction: row;
  3089.             justify-content: space-between;
  3090.             align-items: center;
  3091.             gap: 10px;
  3092.             width: 100%;
  3093.             padding: 10px;
  3094.         }
  3095.  
  3096.         .friends_body {
  3097.             position: relative;
  3098.             display: flex;
  3099.             flex-direction: column;
  3100.             align-items: center;
  3101.             gap: 6px;
  3102.             width: 100%;
  3103.             height: 360px;
  3104.             max-height: 360px;
  3105.             overflow-y: auto;
  3106.             padding-right: 10px;
  3107.         }
  3108.         .allusers {
  3109.             padding: 0;
  3110.         }
  3111.  
  3112.         #users-container {
  3113.             position: relative;
  3114.             display: flex;
  3115.             flex-direction: column;
  3116.             align-items: center;
  3117.             gap: 6px;
  3118.             width: 100%;
  3119.             height: 340px;
  3120.             max-height: 340px;
  3121.             overflow-y: auto;
  3122.             padding-right: 10px;
  3123.         }
  3124.  
  3125.         .profile-img {
  3126.             position: relative;
  3127.             width: 52px;
  3128.             height: 52px;
  3129.             border-radius: 100%;
  3130.             border: 1px solid #C8C9D9;
  3131.         }
  3132.  
  3133.         .profile-img img {
  3134.             width: 100%;
  3135.             height: 100%;
  3136.             border-radius: 100%;
  3137.         }
  3138.  
  3139.         .status_icon {
  3140.             position: absolute;
  3141.             width: 15px;
  3142.             height: 15px;
  3143.             top: 0;
  3144.             left: 0;
  3145.             border-radius: 50%;
  3146.         }
  3147.  
  3148.         .online_icon {
  3149.             background-color: #3DB239;
  3150.         }
  3151.         .offline_icon {
  3152.             background-color: #B23939;
  3153.         }
  3154.         .Owner_role {
  3155.             color: #3979B2;
  3156.         }
  3157.         .Moderator_role {
  3158.             color: #39B298;
  3159.         }
  3160.         .Vip_role {
  3161.             color: #E1A33E;
  3162.         }
  3163.  
  3164.         .friends_row {
  3165.             display: flex;
  3166.             flex-direction: row;
  3167.             width: 100%;
  3168.             justify-content: space-between;
  3169.             align-items: center;
  3170.             background: #090909;
  3171.             border-radius: 8px;
  3172.             padding: 10px;
  3173.         }
  3174.  
  3175.         .friends_row .val {
  3176.             width: fit-content;
  3177.             height: fit-content;
  3178.             padding: 5px 20px;
  3179.             box-sizing: content-box;
  3180.         }
  3181.  
  3182.         .user-profile-wrapper {
  3183.             cursor: pointer;
  3184.         }
  3185.         .user-profile-wrapper > .centerY.g-5 {
  3186.             pointer-events: none;
  3187.             user-select: none;
  3188.             cursor: pointer;
  3189.         }
  3190.  
  3191.         .textarea-container {
  3192.             position: relative;
  3193.             width: 100%;
  3194.         }
  3195.         .textarea-container textarea {
  3196.             width: 100%;
  3197.             height: 120px;
  3198.             resize: none;
  3199.         }
  3200.         .char-counter {
  3201.             position: absolute;
  3202.             bottom: 5px;
  3203.             right: 5px;
  3204.             color: gray;
  3205.         }
  3206.  
  3207.         .mod_badges {
  3208.             display: flex;
  3209.             flex-wrap: wrap;
  3210.             gap: 5px;
  3211.         }
  3212.  
  3213.         .mod_badge {
  3214.             width: fit-content;
  3215.             background: #222;
  3216.             color: #fafafa;
  3217.             padding: 2px 7px;
  3218.             border-radius: 9px;
  3219.         }
  3220.  
  3221.         .friends-chat-wrapper {
  3222.             position: absolute;
  3223.             top: 0;
  3224.             left: 0;
  3225.             width: 100%;
  3226.             height: 100%;
  3227.             background: #111111;
  3228.             display: flex;
  3229.             flex-direction: column;
  3230.             z-index: 999;
  3231.             opacity: 0;
  3232.             transition: all .3s ease;
  3233.         }
  3234.  
  3235.         .friends-chat-header {
  3236.             display: flex;
  3237.             justify-content: space-between;
  3238.             align-items: center;
  3239.             background: #050505;
  3240.             width: 100%;
  3241.             padding: 8px;
  3242.             height: 68px;
  3243.         }
  3244.  
  3245.         .friends-chat-body {
  3246.             height: calc(100% - 68px);
  3247.             display: flex;
  3248.             flex-direction: column;
  3249.         }
  3250.  
  3251.         .friends-chat-messages {
  3252.             height: 300px;
  3253.             overflow-y: auto;
  3254.             display: flex;
  3255.             flex-direction: column;
  3256.             gap: 5px;
  3257.             padding: 10px;
  3258.         }
  3259.         .friends-message {
  3260.             background: linear-gradient(180deg, rgb(12 12 12), #000);
  3261.             padding: 8px;
  3262.             border-radius: 12px;
  3263.             display: flex;
  3264.             flex-direction: column;
  3265. 			min-width: 80px;
  3266.             max-width: 200px;
  3267.             width: fit-content;
  3268.         }
  3269.  
  3270.         .message-date {
  3271.             color: #8a8989;
  3272.             font-size: 11px;
  3273.         }
  3274.  
  3275.         .message-right {
  3276.             align-self: flex-end;
  3277.         }
  3278.  
  3279.         .messenger-wrapper {
  3280.             width: 100%;
  3281.             height: 60px;
  3282.             padding: 10px;
  3283.         }
  3284.         .messenger-wrapper .container {
  3285.             display: flex;
  3286.             flex-direction: row;
  3287.             gap: 10px;
  3288.             width: 100%;
  3289.             background: #0a0a0a;
  3290.             padding: 10px 5px;
  3291.             border-radius: 10px;
  3292.         }
  3293.  
  3294.         .messenger-wrapper .container input {
  3295.             padding: 5px;
  3296.         }
  3297.         .messenger-wrapper .container button {
  3298.             width: 150px;
  3299.         }
  3300.  
  3301.         /* deathscreen challenges */
  3302.  
  3303.         #menu-wrapper {
  3304.             overflow-x: visible;
  3305.             overflow-y: visible;
  3306.         }
  3307.  
  3308.         .challenges_deathscreen {
  3309.             width: 450px;
  3310.             background: rgb(21, 21, 21);
  3311.             display: flex;
  3312.             flex-direction: column;
  3313.             gap: 8px;
  3314.             padding: 7px;
  3315.             border-radius: 10px;
  3316.             margin-bottom: 15px;
  3317.         }
  3318.  
  3319.         .challenges-col {
  3320.             display: flex;
  3321.             flex-direction: column;
  3322.             gap: 4px;
  3323.             align-items: center;
  3324.             width: 100%;
  3325.         }
  3326.         .challenge-row {
  3327.             display: flex;
  3328.             align-items: center;
  3329.             background: rgba(0, 0, 0, .4);
  3330.             justify-content: space-between;
  3331.             padding: 5px 10px;
  3332.             border-radius: 4px;
  3333.             width: 100%;
  3334.         }
  3335.  
  3336.         .challenges-title {
  3337.             font-size: 16px;
  3338.             font-weight: 600;
  3339.         }
  3340.  
  3341.         .challenge-best-secondary {
  3342.             background: #1d1d1d;
  3343.             border-radius: 10px;
  3344.             text-align: center;
  3345.             padding: 5px 8px;
  3346.             min-width: 130px;
  3347.         }
  3348.         .challenge-collect-secondary {
  3349.             background: #4C864B;
  3350.             border-radius: 10px;
  3351.             text-align: center;
  3352.             padding: 5px 8px;
  3353.             outline: none;
  3354.             border: none;
  3355.             min-width: 130px;
  3356.         }
  3357.  
  3358.         .alwan__reference {
  3359.             border-width: 2px !important;
  3360.         }
  3361.  
  3362. 		#mod-announcements {
  3363. 			display: flex;
  3364. 			flex-direction: column;
  3365. 			gap: 6px;
  3366. 			max-height: 144px;
  3367. 			overflow-y: auto;
  3368. 		}
  3369.  
  3370. 		.mod-announcement {
  3371. 			background: #111111;
  3372. 			border-radius: 4px;
  3373. 			display: flex;
  3374. 			gap: 3px;
  3375. 			width: 100%;
  3376. 			cursor: pointer;
  3377. 			padding: 5px 8px;
  3378. 		}
  3379.  
  3380. 		.mod-announcement-icon {
  3381. 			border-radius: 50%;
  3382. 			width: 35px;
  3383. 			height: 35px;
  3384. 			align-self: center;
  3385. 		}
  3386.  
  3387. 		.mod-announcement-text {
  3388. 			display: flex;
  3389. 			flex-direction: column;
  3390. 			gap: 3px;
  3391. 			overflow: hidden;
  3392. 			flex-grow: 1;
  3393. 		}
  3394.  
  3395. 		.mod-announcement-text > * {
  3396. 			overflow: hidden;
  3397. 			white-space: nowrap;
  3398. 			text-overflow: ellipsis;
  3399. 		}
  3400.  
  3401. 		.mod-announcement-text span {
  3402. 			font-size: 14px;
  3403. 			color: #ffffff;
  3404. 			flex-shrink: 0;
  3405. 		}
  3406.  
  3407. 		.mod-announcement-text p {
  3408. 			font-size: 10px;
  3409. 			color: #898989;
  3410. 			flex-shrink: 0;
  3411. 			margin: 0;
  3412. 		}
  3413.  
  3414. 		.mod-announcements-wrapper {
  3415. 			display: flex;
  3416. 			flex-direction: column;
  3417. 			gap: 10px;
  3418. 		}
  3419.  
  3420. 		.mod-announcement-content {
  3421. 			display: flex;
  3422. 			justify-content: space-between;
  3423. 			gap: 10px;
  3424. 			background-color: #050505;
  3425. 			padding: 10px;
  3426. 			border-radius: 10px;
  3427. 			background-image: url('https://czrsd.com/static/general/bg_blur.png');
  3428. 			background-repeat: no-repeat;
  3429. 			background-position: 300px 40%;
  3430. 			background-size: cover;
  3431. 		}
  3432.  
  3433. 		.mod-announcement-content p {
  3434. 			text-align: justify;
  3435. 			max-height: 330px;
  3436. 			overflow-y: auto;
  3437. 			padding-right: 10px;
  3438. 		}
  3439.  
  3440. 		.mod-announcement-images {
  3441. 			display: flex;
  3442. 			flex-direction: column;
  3443. 			gap: 20px;
  3444. 			min-width: 30%;
  3445. 			width: 30%;
  3446. 			max-height: 330px;
  3447. 			padding-right: 10px;
  3448. 			overflow-y: auto;
  3449. 		}
  3450.  
  3451. 		.mod-announcement-images img {
  3452. 			border-radius: 5px;
  3453. 			cursor: pointer;
  3454. 		}
  3455.  
  3456. 		#image-gallery {
  3457. 			display: flex;
  3458. 			flex-wrap: wrap;
  3459. 			gap: 5px;
  3460. 		}
  3461.  
  3462. 		.image-container {
  3463. 			display: flex;
  3464. 			flex-direction: column;
  3465. 		}
  3466.  
  3467. 		.image-container img {
  3468. 			width: 172px;
  3469. 			height: auto;
  3470. 			aspect-ratio: 16 / 9;
  3471. 			border-radius: 5px;
  3472. 			cursor: pointer;
  3473. 		}
  3474.  
  3475. 		.download_btn {
  3476. 			background: url('https://czrsd.com/static/sigmod/icons/download.svg');
  3477.  
  3478. 		}
  3479.  
  3480. 		.delete_btn {
  3481. 			background: url('https://czrsd.com/static/sigmod/icons/trash-bin.svg');
  3482. 		}
  3483.  
  3484. 		.operation_btn {
  3485. 			background-size: contain;
  3486. 			background-repeat: no-repeat;
  3487. 			border: none;
  3488. 			width: 22px;
  3489. 			height: 22px;
  3490. 		}
  3491.  
  3492. 		.sigmod-community {
  3493. 			display: flex;
  3494. 			flex-direction: column;
  3495. 			margin: auto;
  3496. 			border-radius: 10px;
  3497. 			width: 50%;
  3498. 			align-self: center;
  3499. 			font-size: 19px;
  3500. 			overflow: hidden;
  3501. 		}
  3502.  
  3503. 		.community-header {
  3504. 			background: linear-gradient(179deg, #000000, #0c0c0c);
  3505. 			text-align: center;
  3506. 			font-family: "Titillium Web", sans-serif;
  3507. 			padding: 6px;
  3508. 		}
  3509.  
  3510. 		.community-discord-logo {
  3511. 			background: rgb(88, 101, 242);
  3512. 			padding: 5px 12px;
  3513. 		}
  3514. 		.community-discord {
  3515. 			text-align: center;
  3516. 			padding: 10px;
  3517. 			background: #0c0c0c;
  3518. 			width: 100%;
  3519. 		}
  3520. 		.community-discord a {
  3521. 			font-family: "Titillium Web", sans-serif;
  3522. 		}
  3523.  
  3524. 		/* common */
  3525.         .flex {
  3526.              display: flex;
  3527.         }
  3528.         .centerX {
  3529.              display: flex;
  3530.              justify-content: center;
  3531.         }
  3532.         .centerY {
  3533.              display: flex;
  3534.              align-items: center;
  3535.         }
  3536.         .centerXY {
  3537.              display: flex;
  3538.              align-items: center;
  3539.              justify-content: center
  3540.         }
  3541.         .f-column {
  3542.              display: flex;
  3543.              flex-direction: column;
  3544.         }
  3545. 		mx-5 {
  3546. 			margin: 0 5px;
  3547. 		}
  3548.         .my-5 {
  3549.             margin: 5px 0;
  3550.         }
  3551. 		.mt-auto {
  3552. 			margin-top: auto !important;
  3553. 		}
  3554.         .g-2 {
  3555.             gap: 2px;
  3556.         }
  3557.         .g-5 {
  3558.             gap: 5px;
  3559.         }
  3560.         .g-10 {
  3561.             gap: 10px;
  3562.         }
  3563.         .p-2 {
  3564.             padding: 2px;
  3565.         }
  3566.         .p-5 {
  3567.             padding: 5px;
  3568.         }
  3569.         .p-10 {
  3570.             padding: 10px;
  3571.         }
  3572.         .rounded {
  3573.             border-radius: 6px;
  3574.         }
  3575.         .text-center {
  3576.             text-align: center;
  3577.         }
  3578.         .f-big {
  3579.             font-size: 18px;
  3580.         }
  3581.         .hidden {
  3582.              display: none;
  3583.         }
  3584.             `;
  3585.         },
  3586.         respawnTime: Date.now(),
  3587.         respawnCooldown: 1000,
  3588.         get friends_settings() {
  3589.             return this._friends_settings;
  3590.         },
  3591.         set friends_settings(value) {
  3592.             this._friends_settings = value;
  3593.             window.sigmod.friends_settings = value;
  3594.         },
  3595.         get friend_names() {
  3596.             return this._friend_names;
  3597.         },
  3598.  
  3599.         set friend_names(value) {
  3600.             this._friend_names = value;
  3601.             window.sigmod.friend_names = value;
  3602.         },
  3603.  
  3604.         async game() {
  3605.             const { fillRect, fillText, strokeText, arc, drawImage } =
  3606.                   CanvasRenderingContext2D.prototype;
  3607.  
  3608.             const showPosition = byId('showPosition');
  3609.             if (showPosition && !showPosition.checked) showPosition.click();
  3610.  
  3611.             const loadStorage = () => {
  3612.                 if (modSettings.virusImage) {
  3613.                     loadVirusImage(modSettings.virusImage);
  3614.                 }
  3615.  
  3616.                 if (modSettings.game.skins.original !== null) {
  3617.                     loadSkinImage(
  3618.                         modSettings.game.skins.original,
  3619.                         modSettings.game.skins.replacement
  3620.                     );
  3621.                 }
  3622.             };
  3623.  
  3624.             loadStorage();
  3625.  
  3626.             let cachedPattern = null;
  3627.             let patternCanvas = null;
  3628.             let isUpdatingPattern = false;
  3629.  
  3630.             function updatePattern(ctx) {
  3631.                 isUpdatingPattern = true;
  3632.                 loadPattern(ctx)
  3633.                     .then((pattern) => {
  3634.                     if (mods.mapImageLoaded) {
  3635.                         cachedPattern = pattern;
  3636.                         ctx.fillStyle = cachedPattern;
  3637.                         ctx.fillRect(
  3638.                             0,
  3639.                             0,
  3640.                             ctx.canvas.width,
  3641.                             ctx.canvas.height
  3642.                         );
  3643.                     } else {
  3644.                         clearPattern(ctx);
  3645.                     }
  3646.                     isUpdatingPattern = false;
  3647.                 })
  3648.                     .catch((e) => {
  3649.                     console.error('Error loading map image:', e);
  3650.                     clearPattern(ctx);
  3651.                     isUpdatingPattern = false;
  3652.                 });
  3653.             }
  3654.  
  3655.             function loadPattern(ctx) {
  3656.                 return new Promise((resolve, reject) => {
  3657.                     const img = new Image();
  3658.                     img.src = modSettings.game.map.image;
  3659.                     img.crossOrigin = 'Anonymous';
  3660.  
  3661.                     img.onload = () => {
  3662.                         if (!patternCanvas) {
  3663.                             patternCanvas = document.createElement('canvas');
  3664.                         }
  3665.                         patternCanvas.width = img.width;
  3666.                         patternCanvas.height = img.height;
  3667.                         const patternCtx = patternCanvas.getContext('2d');
  3668.                         patternCtx.drawImage(img, 0, 0);
  3669.  
  3670.                         const imageData = patternCtx.getImageData(
  3671.                             0,
  3672.                             0,
  3673.                             patternCanvas.width,
  3674.                             patternCanvas.height
  3675.                         );
  3676.                         const data = imageData.data;
  3677.                         mods.mapImageLoaded = !Array.from(data).some(
  3678.                             (_, i) => i % 4 === 3 && data[i] < 255
  3679.                         );
  3680.  
  3681.                         if (mods.mapImageLoaded) {
  3682.                             resolve(
  3683.                                 ctx.createPattern(patternCanvas, 'no-repeat')
  3684.                             );
  3685.                         } else {
  3686.                             resolve(null);
  3687.                         }
  3688.                     };
  3689.  
  3690.                     img.onerror = () =>
  3691.                     reject(new Error('Failed to load image.'));
  3692.                 });
  3693.             }
  3694.  
  3695.             function clearPattern(ctx) {
  3696.                 isUpdatingPattern = true;
  3697.                 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  3698.                 ctx.fillStyle = modSettings.game.map.color || '#111111';
  3699.                 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  3700.                 isUpdatingPattern = false;
  3701.             }
  3702.  
  3703.             window.addEventListener('resize', () => {
  3704.                 const canvas = document.getElementById('canvas');
  3705.                 if (canvas && modSettings.game.map.image) {
  3706.                     updatePattern(canvas.getContext('2d'));
  3707.                 }
  3708.             });
  3709.  
  3710.             /* CanvasRenderingContext2D.prototype */
  3711.  
  3712.             CanvasRenderingContext2D.prototype.fillRect = function (
  3713.             x,
  3714.              y,
  3715.              width,
  3716.              height
  3717.             ) {
  3718.                 if (this.canvas.id !== 'canvas')
  3719.                     return fillRect.apply(this, arguments);
  3720.  
  3721.                 const isCanvasSize =
  3722.                       (width + height) / 2 ===
  3723.                       (window.innerWidth + window.innerHeight) / 2;
  3724.  
  3725.                 if (isCanvasSize) {
  3726.                     if (modSettings.game.map.image && !mods.mapImageLoaded) {
  3727.                         mods.mapImageLoaded = true;
  3728.                         updatePattern(this);
  3729.                     } else if (
  3730.                         !modSettings.game.map.image ||
  3731.                         !mods.mapImageLoaded
  3732.                     ) {
  3733.                         if (!isUpdatingPattern) {
  3734.                             clearPattern(this);
  3735.                         }
  3736.                     } else {
  3737.                         this.fillStyle =
  3738.                             cachedPattern ||
  3739.                             modSettings.game.map.color ||
  3740.                             '#111111';
  3741.                     }
  3742.                 }
  3743.  
  3744.                 fillRect.apply(this, arguments);
  3745.             };
  3746.  
  3747.             CanvasRenderingContext2D.prototype.arc = function (
  3748.             x,
  3749.              y,
  3750.              radius,
  3751.              startAngle,
  3752.              endAngle,
  3753.              anticlockwise
  3754.             ) {
  3755.                 if (this.canvas.id !== 'canvas') return arc.apply(this, arguments);
  3756.  
  3757.                 if (radius >= 86 && modSettings.game.cellColor) {
  3758.                     this.fillStyle = modSettings.game.cellColor;
  3759.                 } else if (
  3760.                     radius <= 20 &&
  3761.                     modSettings.game.foodColor !== null
  3762.                 ) {
  3763.                     this.fillStyle = modSettings.game.foodColor;
  3764.                     this.strokeStyle = modSettings.game.foodColor;
  3765.                 }
  3766.  
  3767.                 arc.apply(this, arguments);
  3768.             };
  3769.  
  3770.             CanvasRenderingContext2D.prototype.fillText = function (
  3771.             text,
  3772.              x,
  3773.              y
  3774.             ) {
  3775.                 if (this.canvas.id !== 'canvas') return fillText.apply(this, arguments);
  3776.  
  3777.                 const currentFontSizeMatch = this.font.match(/^(\d+)px/);
  3778.                 const fontSize = currentFontSizeMatch
  3779.                 ? currentFontSizeMatch[0]
  3780.                 : '';
  3781.  
  3782.                 this.font = `${fontSize} ${modSettings.game.font || 'Ubuntu'}`;
  3783.  
  3784.                 if (
  3785.                     text === mods.nick &&
  3786.                     !modSettings.game.name.gradient.enabled &&
  3787.                     modSettings.game.name.color !== null
  3788.                 ) {
  3789.                     this.fillStyle = modSettings.game.name.color;
  3790.                 }
  3791.  
  3792.                 if (
  3793.                     text === mods.nick &&
  3794.                     modSettings.game.name.gradient.enabled
  3795.                 ) {
  3796.                     const width = this.measureText(text).width;
  3797.                     const fontSize = 8;
  3798.                     const gradient = this.createLinearGradient(
  3799.                         x - width / 2 + fontSize / 2,
  3800.                         y,
  3801.                         x + width / 2 - fontSize / 2,
  3802.                         y + fontSize
  3803.                     );
  3804.  
  3805.                     const color1 =
  3806.                           modSettings.game.name.gradient.left ?? '#ffffff';
  3807.                     const color2 =
  3808.                           modSettings.game.name.gradient.right ?? '#ffffff';
  3809.  
  3810.                     gradient.addColorStop(0, color1);
  3811.                     gradient.addColorStop(1, color2);
  3812.  
  3813.                     this.fillStyle = gradient;
  3814.                 }
  3815.  
  3816.                 if (!window.sigifx && text.startsWith('Score')) {
  3817.                     if (Date.now() - lastGetScore >= 250) {
  3818.                         const score = parseInt(text.split(': ')[1]);
  3819.  
  3820.                         mods.cellSize = score;
  3821.  
  3822.                         mods.aboveRespawnLimit = score >= 5500;
  3823.  
  3824.                         lastGetScore = Date.now();
  3825.                     }
  3826.                 }
  3827.  
  3828.                 if (!window.sigfix && text.startsWith('X:')) {
  3829.                     this.fillStyle = 'transparent';
  3830.  
  3831.                     const [, xValue, yValue] =
  3832.                           /X: (.*), Y: (.*)/.exec(text) || [];
  3833.                     if (!xValue) return;
  3834.  
  3835.                     const position = {
  3836.                         x: parseFloat(xValue),
  3837.                         y: parseFloat(yValue),
  3838.                     };
  3839.  
  3840.                     if (menuClosed() && !isDead()) {
  3841.                         if (position.x === 0 && position.y === 0) return;
  3842.  
  3843.                         playerPosition.x = position.x;
  3844.                         playerPosition.y = position.y;
  3845.  
  3846.                         // send position every 300 milliseconds
  3847.                         if (Date.now() - lastPosTime >= 300) {
  3848.                             if (modSettings.settings.tag && client?.ws?.readyState === 1) {
  3849.                                 client.send({
  3850.                                     type: 'position',
  3851.                                     content: {
  3852.                                         x: playerPosition.x,
  3853.                                         y: playerPosition.y,
  3854.                                     },
  3855.                                 });
  3856.                             }
  3857.                             lastPosTime = Date.now();
  3858.                         }
  3859.                     } else if (isDead() && !dead2) {
  3860.                         dead2 = true;
  3861.                         playerPosition.x = null;
  3862.                         playerPosition.y = null;
  3863.                         if (modSettings.settings.tag && client?.ws?.readyState === 1) {
  3864.                             client.send({
  3865.                                 type: 'position',
  3866.                                 content: { x: null, y: null },
  3867.                             });
  3868.                         }
  3869.                     }
  3870.                 }
  3871.  
  3872.                 if (modSettings.game.removeOutlines) {
  3873.                     this.shadowBlur = 0;
  3874.                     this.shadowColor = 'transparent';
  3875.                 }
  3876.  
  3877.                 if (text.length > 18 && modSettings.game.shortenNames) {
  3878.                     arguments[0] = text.slice(0, 18) + '...';
  3879.                 }
  3880.  
  3881.                 // only for leaderboard
  3882.                 const name = text.match(/\d+\.\s*(.+)/)?.[1];
  3883.  
  3884.                 if (
  3885.                     name &&
  3886.                     mods.friend_names.has(name) &&
  3887.                     mods.friends_settings.highlight_friends
  3888.                 ) {
  3889.                     this.fillStyle = mods.friends_settings.highlight_color;
  3890.                 }
  3891.  
  3892.                 fillText.apply(this, arguments);
  3893.             };
  3894.  
  3895.             CanvasRenderingContext2D.prototype.strokeText = function (
  3896.             text,
  3897.              x,
  3898.              y
  3899.             ) {
  3900.                 if (this.canvas.id !== 'canvas') return strokeText.apply(this, arguments);
  3901.  
  3902.                 const currentFontSizeMatch = this.font.match(/^(\d+)px/);
  3903.                 const fontSize = currentFontSizeMatch
  3904.                 ? currentFontSizeMatch[0]
  3905.                 : '';
  3906.  
  3907.                 this.font = `${fontSize} ${modSettings.game.font || 'Ubuntu'}`;
  3908.  
  3909.                 if (text.length > 18 && modSettings.game.shortenNames) {
  3910.                     arguments[0] = text.slice(0, 18) + '...';
  3911.                 }
  3912.  
  3913.                 if (modSettings.game.removeOutlines) {
  3914.                     this.shadowBlur = 0;
  3915.                     this.shadowColor = 'transparent';
  3916.                 } else {
  3917.                     this.shadowBlur = 7;
  3918.                     this.shadowColor = '#000';
  3919.                 }
  3920.  
  3921.                 strokeText.apply(this, arguments);
  3922.             };
  3923.  
  3924.             CanvasRenderingContext2D.prototype.drawImage = function (
  3925.             image,
  3926.              ...args
  3927.             ) {
  3928.                 if (this.canvas.id !== 'canvas')
  3929.                     return drawImage.call(this, image, ...args);
  3930.  
  3931.                 if (
  3932.                     image.src &&
  3933.                     (image.src.endsWith('2.png') ||
  3934.                      image.src.endsWith('2-min.png')) &&
  3935.                     modSettings.game.virusImage
  3936.                 ) {
  3937.                     if (mods.virusImageLoaded) {
  3938.                         return drawImage.call(this, mods.virusImage, ...args);
  3939.                     } else {
  3940.                         loadVirusImage(modSettings.game.virusImage).then(() => {
  3941.                             drawImage.call(this, mods.virusImage, ...args);
  3942.                         });
  3943.                         return;
  3944.                     }
  3945.                 }
  3946.  
  3947.                 if (
  3948.                     image instanceof HTMLImageElement &&
  3949.                     modSettings.game.skins.original &&
  3950.                     image.src.includes(`${modSettings.game.skins.original}.png`)
  3951.                 ) {
  3952.                     if (mods.skinImageLoaded) {
  3953.                         return drawImage.call(this, mods.skinImage, ...args);
  3954.                     } else {
  3955.                         loadSkinImage(
  3956.                             modSettings.game.skins.original,
  3957.                             modSettings.game.skins.replacement
  3958.                         ).then(() => {
  3959.                             drawImage.call(this, mods.skinImage, ...args);
  3960.                         });
  3961.                         return;
  3962.                     }
  3963.                 }
  3964.  
  3965.                 drawImage.call(this, image, ...args);
  3966.             };
  3967.  
  3968.             function loadVirusImage(imgSrc) {
  3969.                 return new Promise((resolve, reject) => {
  3970.                     const replacementVirus = new Image();
  3971.                     replacementVirus.src = imgSrc;
  3972.                     replacementVirus.crossOrigin = 'Anonymous';
  3973.  
  3974.                     replacementVirus.onload = () => {
  3975.                         mods.virusImage = replacementVirus;
  3976.                         mods.virusImageLoaded = true;
  3977.                         resolve();
  3978.                     };
  3979.  
  3980.                     replacementVirus.onerror = () => {
  3981.                         console.error('Failed to load virus image.');
  3982.                         reject(new Error('Failed to load virus image.'));
  3983.                     };
  3984.                 });
  3985.             }
  3986.  
  3987.             function loadSkinImage(originalSkinName, replacementImgSrc) {
  3988.                 return new Promise((resolve, reject) => {
  3989.                     const replacementSkin = new Image();
  3990.                     replacementSkin.src = replacementImgSrc;
  3991.                     replacementSkin.crossOrigin = 'Anonymous';
  3992.  
  3993.                     replacementSkin.onload = () => {
  3994.                         mods.skinImage = replacementSkin;
  3995.                         mods.skinImageLoaded = true;
  3996.                         resolve();
  3997.                     };
  3998.  
  3999.                     replacementSkin.onerror = () =>
  4000.                     reject(new Error('Failed to load skin image.'));
  4001.                 });
  4002.             }
  4003.  
  4004.             const modals = {
  4005.                 map: {
  4006.                     title: 'Map Image',
  4007.                     applyId: 'apply-map-image',
  4008.                     resetId: 'reset-map-image',
  4009.                     previewId: 'preview-mapImage',
  4010.                     modalId: 'map-modal',
  4011.                     storagePath: 'game.map.image',
  4012.                 },
  4013.                 virus: {
  4014.                     title: 'Virus Image',
  4015.                     applyId: 'apply-virus-image',
  4016.                     resetId: 'reset-virus-image',
  4017.                     previewId: 'preview-virusImage',
  4018.                     modalId: 'virus-modal',
  4019.                     storagePath: 'game.virusImage',
  4020.                 },
  4021.                 skin: {
  4022.                     title: 'Skin Replacement',
  4023.                     applyId: 'apply-skin-image',
  4024.                     resetId: 'reset-skin-image',
  4025.                     previewId: 'preview-skinImage',
  4026.                     modalId: 'skin-modal',
  4027.                     storagePath: [
  4028.                         'game.skins.original',
  4029.                         'game.skins.replacement',
  4030.                     ],
  4031.                     additional: true,
  4032.                 },
  4033.             };
  4034.  
  4035.             function createModal({
  4036.                 title,
  4037.                 applyId,
  4038.                 resetId,
  4039.                 previewId,
  4040.                 modalId,
  4041.                 additional,
  4042.             }) {
  4043.                 const additionalContent = additional
  4044.                 ? `
  4045. 					<span>Select a skin that should be replaced:</span>
  4046. 					<select class="form-control" id="skin-list"></select>
  4047. 					<span style="font-size: 12px;">Replacement image - Enter an image URL:</span>
  4048. 				`
  4049.                 : `
  4050. 					<span>Enter an image URL:</span>
  4051. 				`;
  4052.  
  4053.                 return `
  4054. 					<div class="default-modal">
  4055. 						<div class="default-modal-header">
  4056. 							<h2>${title}</h2>
  4057. 							<button class="btn closeBtn" id="closeCustomModal">
  4058. 								<svg width="22" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  4059. 									<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>
  4060. 								</svg>
  4061. 							</button>
  4062. 						</div>
  4063. 						<div class="default-modal-body">
  4064. 							${additionalContent}
  4065. 							<div class="centerXY g-10">
  4066. 								<input type="text" placeholder="https://i.imgur/..." class="form-control" id="image-url" />
  4067. 								<div class="imagePreview" id="${previewId}" title="Image Preview">
  4068. 									<span class="no-preview">No Preview Available</span>
  4069. 								</div>
  4070. 							</div>
  4071. 							<div class="centerXY g-10">
  4072. 								<button type="button" class="modButton-black" id="${applyId}">Apply Image</button>
  4073. 								<button type="button" class="resetButton" title="Reset ${title.toLowerCase()}" id="${resetId}"></button>
  4074. 							</div>
  4075. 						</div>
  4076. 					</div>
  4077. 				`;
  4078.             }
  4079.  
  4080.             function setupModalEvents(id, type) {
  4081.                 byId(id).addEventListener('click', async () => {
  4082.                     mods.customModal(
  4083.                         createModal(modals[type]),
  4084.                         modals[type].modalId
  4085.                     );
  4086.                     document
  4087.                         .querySelector('#closeCustomModal')
  4088.                         .addEventListener('click', () => closeModal(type));
  4089.  
  4090.                     const modal = modals[type];
  4091.                     const imageUrlInput = byId('image-url');
  4092.  
  4093.                     let initialUrl = '';
  4094.                     if (modal.additional && type === 'skin') {
  4095.                         const [originalPath, replacementPath] =
  4096.                               modal.storagePath;
  4097.                         initialUrl =
  4098.                             getNestedValue(modSettings, replacementPath) || '';
  4099.                         byId('skin-list').value =
  4100.                             getNestedValue(modSettings, originalPath) || '';
  4101.                     } else {
  4102.                         initialUrl =
  4103.                             getNestedValue(modSettings, modal.storagePath) ||
  4104.                             '';
  4105.                     }
  4106.                     imageUrlInput.value = initialUrl;
  4107.                     updatePreview(initialUrl);
  4108.  
  4109.                     imageUrlInput.addEventListener('input', (e) => {
  4110.                         updatePreview(e.target.value);
  4111.                     });
  4112.  
  4113.                     byId(modal.applyId).addEventListener('click', () =>
  4114.                                                          applyChanges(type)
  4115.                                                         );
  4116.                     byId(modal.resetId).addEventListener('click', () =>
  4117.                                                          resetChanges(type)
  4118.                                                         );
  4119.  
  4120.                     if (type === 'skin') {
  4121.                         const skinList = byId('skin-list');
  4122.                         const skins =
  4123.                               mods.skins.length > 0
  4124.                         ? mods.skins
  4125.                         : await fetch(
  4126.                             'https://one.sigmally.com/api/skins'
  4127.                         )
  4128.                         .then((response) => response.json())
  4129.                         .then((data) => {
  4130.                             const skinNames = data.data.map(
  4131.                                 (item) =>
  4132.                                 item.name.replace('.png', '')
  4133.                             );
  4134.                             mods.skins = skinNames;
  4135.                             return skinNames;
  4136.                         });
  4137.  
  4138.                         skinList.innerHTML = skins
  4139.                             .map(
  4140.                             (skin) =>
  4141.                             `<option value="${skin}" ${
  4142.                             skin === modSettings.game.skins.original
  4143.                             ? 'selected'
  4144.                             : ''
  4145.                             }>${skin}</option>`
  4146.                         )
  4147.                             .join('');
  4148.                     }
  4149.                 });
  4150.             }
  4151.  
  4152.             function getNestedValue(obj, path) {
  4153.                 return path
  4154.                     .split('.')
  4155.                     .reduce((acc, part) => acc && acc[part], obj);
  4156.             }
  4157.  
  4158.             function setNestedValue(obj, path, value) {
  4159.                 const parts = path.split('.');
  4160.                 const last = parts.pop();
  4161.                 const target = parts.reduce(
  4162.                     (acc, part) => (acc[part] = acc[part] || {}),
  4163.                     obj
  4164.                 );
  4165.                 target[last] = value;
  4166.             }
  4167.  
  4168.             function updatePreview(url) {
  4169.                 const preview = document.querySelector('.imagePreview');
  4170.                 const noPreviewSpan = document.querySelector('.no-preview');
  4171.  
  4172.                 const updateVisibility = (showPreview) => {
  4173.                     preview.style.backgroundImage = showPreview
  4174.                         ? `url(${url})`
  4175.                     : 'none';
  4176.                     noPreviewSpan.style.display = showPreview
  4177.                         ? 'none'
  4178.                     : 'block';
  4179.                 };
  4180.  
  4181.                 if (url) {
  4182.                     const img = new Image();
  4183.                     img.src = url;
  4184.                     img.onload = () => updateVisibility(true);
  4185.                     img.onerror = () => updateVisibility(false);
  4186.                 } else {
  4187.                     updateVisibility(false);
  4188.                 }
  4189.             }
  4190.  
  4191.             function applyChanges(type) {
  4192.                 let { title, storagePath, additional } = modals[type];
  4193.                 const url = byId('image-url').value;
  4194.  
  4195.                 mods[`${type}ImageLoaded`] = false;
  4196.  
  4197.                 if (additional && type === 'skin') {
  4198.                     const selectedSkin = byId('skin-list').value;
  4199.                     setNestedValue(modSettings, storagePath[0], selectedSkin);
  4200.                     setNestedValue(modSettings, storagePath[1], url);
  4201.                 } else {
  4202.                     setNestedValue(modSettings, storagePath, url);
  4203.                 }
  4204.  
  4205.                 updateStorage();
  4206.  
  4207.                 mods.modAlert(`Successfully applied ${title}.`, 'success');
  4208.             }
  4209.  
  4210.             function resetChanges(type) {
  4211.                 const { title, storagePath, additional } = modals[type];
  4212.  
  4213.                 if (additional && type === 'skin') {
  4214.                     setNestedValue(modSettings, storagePath[0], null);
  4215.                     setNestedValue(modSettings, storagePath[1], null);
  4216.                 } else {
  4217.                     setNestedValue(modSettings, storagePath, null);
  4218.                 }
  4219.  
  4220.                 mods[`${type}ImageLoaded`] = false;
  4221.  
  4222.                 updateStorage();
  4223.  
  4224.                 mods.modAlert(
  4225.                     `The ${title} has been successfully reset.`,
  4226.                     'success'
  4227.                 );
  4228.             }
  4229.  
  4230.             function closeModal(type) {
  4231.                 const overlay = byId(`${type}-modal`);
  4232.                 overlay.style.opacity = 0;
  4233.                 setTimeout(() => overlay.remove(), 300);
  4234.             }
  4235.  
  4236.             setupModalEvents('mapImageSelect', 'map');
  4237.             setupModalEvents('virusImageSelect', 'virus');
  4238.             setupModalEvents('skinReplaceSelect', 'skin');
  4239.  
  4240.             const shortenNames = byId('shortenNames');
  4241.             const removeOutlines = byId('removeOutlines');
  4242.  
  4243.             shortenNames.addEventListener('change', () => {
  4244.                 modSettings.game.shortenNames = shortenNames.checked;
  4245.                 updateStorage();
  4246.             });
  4247.             removeOutlines.addEventListener('change', () => {
  4248.                 modSettings.game.removeOutlines = removeOutlines.checked;
  4249.                 updateStorage();
  4250.             });
  4251.  
  4252.             const showNames = byId('mod-showNames');
  4253.             const showSkins = byId('mod-showSkins');
  4254.  
  4255.             const originalShowNames = byId('showNames');
  4256.             const originalShowSkins = byId('showSkins');
  4257.  
  4258.             function syncCheckboxes() {
  4259.                 if (showNames.checked !== originalShowNames.checked) {
  4260.                     originalShowNames.click();
  4261.                 }
  4262.                 if (showSkins.checked !== originalShowSkins.checked) {
  4263.                     originalShowSkins.click();
  4264.                 }
  4265.             }
  4266.  
  4267.             showNames.addEventListener('change', syncCheckboxes);
  4268.             showSkins.addEventListener('change', syncCheckboxes);
  4269.             syncCheckboxes();
  4270.  
  4271.             const deathScreenPos = byId('deathScreenPos');
  4272.             const deathScreen = byId('__line2');
  4273.  
  4274.             const applyMargin = (position) => {
  4275.                 switch (position) {
  4276.                     case 'left':
  4277.                         deathScreen.style.marginLeft = '0';
  4278.                         break;
  4279.                     case 'right':
  4280.                         deathScreen.style.marginRight = '0';
  4281.                         break;
  4282.                     case 'top':
  4283.                         deathScreen.style.marginTop = '20px';
  4284.                         break;
  4285.                     case 'bottom':
  4286.                         deathScreen.style.marginBottom = '20px';
  4287.                         break;
  4288.                     default:
  4289.                         deathScreen.style.margin = 'auto';
  4290.                 }
  4291.             };
  4292.  
  4293.             deathScreenPos.addEventListener('change', () => {
  4294.                 const selected = deathScreenPos.value;
  4295.                 applyMargin(selected);
  4296.                 modSettings.deathScreenPos = selected;
  4297.                 updateStorage();
  4298.             });
  4299.  
  4300.             const defaultPosition = modSettings.deathScreenPos || 'center';
  4301.  
  4302.             applyMargin(defaultPosition);
  4303.             deathScreenPos.value = defaultPosition;
  4304.         },
  4305.  
  4306.         customModal(children, id, zindex = '999999') {
  4307.             const overlay = document.createElement('div');
  4308.             overlay.classList.add('mod_overlay');
  4309.             id && overlay.setAttribute('id', id);
  4310.             overlay.innerHTML = children;
  4311.             overlay.style.zIndex = zindex;
  4312.             overlay.style.opacity = 0;
  4313.  
  4314.             document.body.append(overlay);
  4315.  
  4316.             setTimeout(() => {
  4317.                 overlay.style.opacity = '1';
  4318.             });
  4319.  
  4320.             const handleClickOutside = (e) => {
  4321.                 if (e.target === overlay) {
  4322.                     overlay.style.opacity = 0;
  4323.                     setTimeout(() => {
  4324.                         overlay.remove();
  4325.                         document.removeEventListener(
  4326.                             'click',
  4327.                             handleClickOutside
  4328.                         );
  4329.                     }, 300);
  4330.                 }
  4331.             };
  4332.  
  4333.             document.addEventListener('click', handleClickOutside);
  4334.         },
  4335.  
  4336.         handleGoogleAuth(user) {
  4337.             fetchedUser++;
  4338.             window.gameSettings.user = user;
  4339.  
  4340.             const chatSendInput = document.querySelector('#chatSendInput');
  4341.             if (chatSendInput) {
  4342.                 chatSendInput.placeholder = 'message...';
  4343.                 chatSendInput.disabled = false;
  4344.             }
  4345.  
  4346.             if (!client) client = new modClient();
  4347.  
  4348.             const waitForInit = () =>
  4349.             new Promise((res) => {
  4350.                 if (client.ws?.readyState === 1 && mods.nick)
  4351.                     return res(null);
  4352.                 const i = setInterval(
  4353.                     () =>
  4354.                     client.ws?.readyState === 1 &&
  4355.                     mods.nick &&
  4356.                     (clearInterval(i), res(null)),
  4357.                     50
  4358.                 );
  4359.             });
  4360.  
  4361.             waitForInit().then(() => {
  4362.                 client.send({
  4363.                     type: 'user',
  4364.                     content: { ...user, nick: mods.nick },
  4365.                 })
  4366.             });
  4367.  
  4368.             const claim = document.getElementById('free-chest-button');
  4369.             if (
  4370.                 fetchedUser === 1 &&
  4371.                 modSettings.settings.autoClaimCoins &&
  4372.                 claim?.style.display !== 'none'
  4373.             ) {
  4374.                 setTimeout(() => claim.click(), 500);
  4375.             }
  4376.         },
  4377.  
  4378.         async menu() {
  4379.             const mod_menu = document.createElement('div');
  4380.             mod_menu.classList.add('mod_menu');
  4381.             mod_menu.style.display = 'none';
  4382.             mod_menu.style.opacity = '0';
  4383.             mod_menu.innerHTML = `
  4384.                 <div class="mod_menu_wrapper">
  4385.                     <div class="mod_menu_header">
  4386.                         <img alt="Header image" src="${headerAnim}" draggable="false" class="header_img" />
  4387.                         <button type="button" class="modButton" id="closeBtn">
  4388.                             <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  4389.                                 <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>
  4390.                             </svg>
  4391.                         </button>
  4392.                     </div>
  4393.                     <div class="mod_menu_inner">
  4394.                         <div class="mod_menu_navbar">
  4395.                             <button class="mod_nav_btn mod_selected" id="tab_home_btn">
  4396.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/home%20(1).png" alt="Home Icon" />
  4397.                                 Home
  4398.                             </button>
  4399.                             <button class="mod_nav_btn" id="tab_macros_btn">
  4400.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/keyboard%20(1).png" alt="Keyboard Icon" />
  4401.                                 Macros
  4402.                             </button>
  4403.                             <button class="mod_nav_btn" id="tab_game_btn">
  4404.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/games.png" alt="Game Icon" />
  4405.                                 Game
  4406.                             </button>
  4407.                             <button class="mod_nav_btn" id="tab_name_btn">
  4408.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/836ca0f4c25fc6de2e429ee3583be5f860884a0c/images/icons/name.svg" alt="Name Icon" />
  4409.                                 Name
  4410.                             </button>
  4411.                             <button class="mod_nav_btn" id="tab_themes_btn">
  4412.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/theme.png" alt="Themes Icon" />
  4413.                                 Themes
  4414.                             </button>
  4415.                             <button class="mod_nav_btn" id="tab_gallery_btn">
  4416. 								<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>
  4417.                                 Gallery
  4418.                             </button>
  4419.  
  4420.                             <button class="mod_nav_btn" id="tab_friends_btn">
  4421.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/friends%20(1).png" alt="Friends Icon" />
  4422.                                 Friends
  4423.                             </button>
  4424.                             <button class="mod_nav_btn mt-auto" id="tab_info_btn">
  4425.                                 <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/icons/info.png" alt="Info Icon" />
  4426.                                 Info
  4427.                             </button>
  4428.                         </div>
  4429.                         <div class="mod_menu_content">
  4430.                             <div class="mod_tab" id="mod_home">
  4431.                                 <span class="text-center f-big" id="welcomeUser">Welcome ${
  4432.             this.nick || 'Guest'
  4433.         }, to the SigMod Client!</span>
  4434.                                 <div class="home-card-row">
  4435. 									<!-- CARD.1 -->
  4436. 									<div class="home-card-wrapper">
  4437. 										<span>Your stats</span>
  4438. 										<div class="home-card">
  4439. 											<canvas id="sigmod-stats" width="200" height="100"></canvas>
  4440. 										</div>
  4441. 									</div>
  4442. 									<!-- CARD.2 -->
  4443. 									<div class="home-card-wrapper">
  4444.                                         <span>Announcements</span>
  4445.                                         <div class="home-card" style="justify-content: start;">
  4446. 											<div id="mod-announcements">No announcements yet...</div>
  4447. 										</div>
  4448.                                     </div>
  4449.                                 </div>
  4450.                                 <div class="home-card-row">
  4451. 									<!-- CARD.3 -->
  4452.                                     <div class="home-card-wrapper">
  4453.                                         <span>Quick access</span>
  4454.                                         <div class="home-card quickAccess scroll" id="mod_qaccess"></div>
  4455.                                     </div>
  4456. 									<!-- CARD.4 -->
  4457.                                     <div class="home-card-wrapper">
  4458.                                         <span>Mod profile</span>
  4459.                                         <div class="home-card">
  4460.                                             <div class="justify-sb">
  4461.                                                 <div class="flex" style="align-items: center; gap: 5px;">
  4462.                                                     <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" />
  4463.                                                     <span id="my-profile-name">Guest</span>
  4464.                                                 </div>
  4465.                                                 <span id="my-profile-role">Guest</span>
  4466.                                             </div>
  4467. 											<div id="my-profile-badges"></div>
  4468.                                             <hr />
  4469.                                             <span id="my-profile-bio" class="scroll">No Bio.</span>
  4470.                                         </div>
  4471.                                     </div>
  4472.                                 </div>
  4473.                             </div>
  4474.                             <div class="mod_tab scroll" id="mod_macros" style="display: none">
  4475. 								<div class="modColItems">
  4476.                                     <div class="macros_wrapper">
  4477.                                         <span class="text-center f-big">Keybindings</span>
  4478.                                         <hr style="border-color: #3F3F3F">
  4479.                                         <div style="justify-content: center;">
  4480.                                             <div class="f-column g-10" style="align-items: center; justify-content: center;">
  4481.                                                 <div class="macrosContainer">
  4482.                                                     <div class="f-column g-10">
  4483.                                                         <label class="macroRow">
  4484.                                                           <span class="text">Rapid Feed</span>
  4485.                                                           <input type="text" name="rapidFeed" id="modinput1" class="keybinding" value="${
  4486.             modSettings.macros
  4487.                 .keys
  4488.                 .rapidFeed ||
  4489.                 ''
  4490.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4491.                                                         </label>
  4492.                                                         <label class="macroRow">
  4493.                                                           <span class="text">Double Split</span>
  4494.                                                           <input type="text" name="splits.double" id="modinput2" class="keybinding" value="${
  4495.             modSettings.macros
  4496.                 .keys.splits
  4497.                 .double || ''
  4498.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4499.                                                         </label>
  4500.                                                         <label class="macroRow">
  4501.                                                           <span class="text">Triple Split</span>
  4502.                                                           <input type="text" name="splits.triple" id="modinput3" class="keybinding" value="${
  4503.             modSettings.macros
  4504.                 .keys.splits
  4505.                 .triple || ''
  4506.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4507.                                                         </label>
  4508.                                                         <label class="macroRow">
  4509.                                                           <span class="text">Respawn</span>
  4510.                                                           <input type="text" name="respawn" id="modinput15" class="keybinding" value="${
  4511.             modSettings.macros
  4512.                 .keys
  4513.                 .respawn || ''
  4514.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4515.                                                         </label>
  4516.                                                     </div>
  4517.                                                     <div class="f-column g-10">
  4518.                                                         <label class="macroRow">
  4519.                                                           <span class="text">Quad Split</span>
  4520.                                                           <input type="text" name="splits.quad" id="modinput4" class="keybinding" value="${
  4521.             modSettings.macros
  4522.                 .keys.splits
  4523.                 .quad || ''
  4524.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4525.                                                         </label>
  4526.                                                         <label class="macroRow">
  4527.                                                           <span class="text">Horizontal Line</span>
  4528.                                                           <input type="text" name="line.horizontal" id="modinput5" class="keybinding" value="${
  4529.             modSettings.macros
  4530.                 .keys.line
  4531.                 .horizontal ||
  4532.                 ''
  4533.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4534.                                                         </label>
  4535.                                                         <label class="macroRow">
  4536.                                                           <span class="text">Vertical Line</span>
  4537.                                                           <input type="text" name="line.vertical" id="modinput7" class="keybinding" value="${
  4538.             modSettings.macros
  4539.                 .keys.line
  4540.                 .vertical ||
  4541.                 ''
  4542.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4543.                                                         </label>
  4544.                                                         <label class="macroRow">
  4545.                                                           <span class="text">Fixed Line</span>
  4546.                                                           <input type="text" name="line.fixed" id="modinput16" class="keybinding" value="${
  4547.             modSettings.macros
  4548.                 .keys.line
  4549.                 .fixed || ''
  4550.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4551.                                                         </label>
  4552.                                                     </div>
  4553.                                                 </div>
  4554.                                             </div>
  4555.                                         </div>
  4556.                                     </div>
  4557.                                     <div class="macros_wrapper">
  4558.                                         <span class="text-center f-big">Advanced Keybinding options</span>
  4559.                                         <div class="setting-card-wrapper">
  4560.                                             <div class="setting-card">
  4561.                                                 <div class="setting-card-action">
  4562.                                                     <span class="setting-card-name">Mouse macros</span>
  4563.                                                 </div>
  4564.                                             </div>
  4565.                                             <div class="setting-parameters" style="display: none;">
  4566.                                                 <div class="my-5">
  4567.                                                     <span class="stats-info-text">Feed or Split with mouse buttons</span>
  4568.                                                 </div>
  4569.                                                 <div class="stats-line justify-sb">
  4570.                                                     <span class="centerXY g-5">
  4571.                                                         Mouse Button 1
  4572.                                                         <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>
  4573.                                                     </span>
  4574.                                                     <select class="form-control macro-extanded_input" style="padding: 2px; text-align: left; width: 100px" id="m1_macroSelect">
  4575.                                                         <option value="none">None</option>
  4576.                                                         <option value="fastfeed">Fast Feed</option>
  4577.                                                         <option value="split">Split (1)</option>
  4578.                                                         <option value="split2">Double Split</option>
  4579.                                                         <option value="split3">Triple Split</option>
  4580.                                                         <option value="split4">Quad Split</option>
  4581.                                                         <option value="freeze">Horizontal Line</option>
  4582.                                                         <option value="dTrick">Double Trick</option>
  4583.                                                         <option value="sTrick">Self Trick</option>
  4584.                                                     </select>
  4585.                                                 </div>
  4586.                                                 <div class="stats-line justify-sb">
  4587.                                                     <span class="centerXY g-5">
  4588.                                                         Mouse Button 2
  4589.                                                         <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>
  4590.                                                     </span>
  4591.                                                     <select class="form-control" style="padding: 2px; text-align: left; width: 100px" id="m2_macroSelect">
  4592.                                                         <option value="none">None</option>
  4593.                                                         <option value="fastfeed">Fast Feed</option>
  4594.                                                         <option value="split">Split (1)</option>
  4595.                                                         <option value="split2">Double Split</option>
  4596.                                                         <option value="split3">Triple Split</option>
  4597.                                                         <option value="split4">Quad Split</option>
  4598.                                                         <option value="freeze">Horizontal Line</option>
  4599.                                                         <option value="dTrick">Double Trick</option>
  4600.                                                         <option value="sTrick">Self Trick</option>
  4601.                                                     </select>
  4602.                                                 </div>
  4603.                                             </div>
  4604.                                         </div>
  4605. 										<div class="setting-card-wrapper">
  4606.                                             <div class="setting-card">
  4607.                                                 <div class="setting-card-action">
  4608.                                                     <span class="setting-card-name">Rapid feed</span>
  4609.                                                 </div>
  4610.                                             </div>
  4611.  
  4612.                                             <div class="setting-parameters" style="display: none;">
  4613.                                                 <div class="my-5">
  4614.                                                     <span class="stats-info-text">Customize feeding</span>
  4615.                                                 </div>
  4616.                                                 <div class="stats-line justify-sb">
  4617.                                                     <span>Speed</span>
  4618. 													<div class="justify-sb g-5" style="width: 200px;">
  4619. 														<span class="mod_badge" id="macroSpeedText">${
  4620.             modSettings.macros
  4621.                 .feedSpeed ||
  4622.                 '50'
  4623.         }ms</span>
  4624. 														<input
  4625. 															type="range"
  4626. 															class="modSlider"
  4627. 															id="macroSpeed"
  4628. 															min="5"
  4629. 															max="100"
  4630. 															value="${modSettings.macros.feedSpeed || 50}"
  4631. 															step="5"
  4632. 															style="width: 134px;"
  4633. 														/>
  4634. 													</div>
  4635.                                                 </div>
  4636.                                             </div>
  4637.                                         </div>
  4638.                                         <div class="setting-card-wrapper">
  4639.                                             <div class="setting-card">
  4640.                                                 <div class="setting-card-action">
  4641.                                                     <span class="setting-card-name">Linesplits</span>
  4642.                                                 </div>
  4643.                                             </div>
  4644.  
  4645.                                             <div class="setting-parameters" style="display: none;">
  4646.                                                 <div class="my-5">
  4647.                                                     <span class="stats-info-text">Customize linesplits</span>
  4648.                                                 </div>
  4649.  
  4650.                                                 <div class="stats-line justify-sb">
  4651.                                                     <span>Instant split</span>
  4652. 													<div class="centerXY g-5">
  4653. 														<span class="modDescText">Splits - </span>
  4654. 														<input type="text" class="modInput modNumberInput text-center" placeholder="0" title="Splits" style="width: 30px;" id="instant-split-amount" onclick="this.select()" />
  4655. 														<div class="modCheckbox">
  4656. 														  <input id="toggle-instant-split" type="checkbox" checked />
  4657. 														  <label class="cbx" for="toggle-instant-split"></label>
  4658. 														</div>
  4659. 													</div>
  4660.                                                 </div>
  4661.                                             </div>
  4662.                                         </div>
  4663.                                         <div class="setting-card-wrapper">
  4664.                                             <div class="setting-card">
  4665.                                                 <div class="setting-card-action">
  4666.                                                     <span class="setting-card-name">Toggle Settings</span>
  4667.                                                 </div>
  4668.                                             </div>
  4669.  
  4670.                                             <div class="setting-parameters" style="display: none;">
  4671.                                                 <div class="my-5">
  4672.                                                     <span class="stats-info-text">Toggle settings with a keybind.</span>
  4673.                                                 </div>
  4674.  
  4675.                                                 <div class="stats-line justify-sb">
  4676.                                                     <span>Toggle Menu</span>
  4677.                                                     <input type="text" name="toggle.menu" id="modinput6" class="keybinding" value="${
  4678.             modSettings.macros.keys
  4679.                 .toggle.menu || ''
  4680.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4681.                                                 </div>
  4682.  
  4683.                                                 <div class="stats-line justify-sb">
  4684.                                                     <span>Toggle Names</span>
  4685.                                                     <input value="${
  4686.             modSettings.macros.keys
  4687.                 .toggle.names || ''
  4688.         }" placeholder="..." readonly id="modinput10" name="toggle.names" class="keybinding" onfocus="this.select();">
  4689.                                                 </div>
  4690.  
  4691.                                                 <div class="stats-line justify-sb">
  4692.                                                     <span>Toggle Skins</span>
  4693.                                                     <input value="${
  4694.             modSettings.macros.keys
  4695.                 .toggle.skins || ''
  4696.         }" placeholder="..." readonly id="modinput11" name="toggle.skins" class="keybinding" onfocus="this.select();">
  4697.                                                 </div>
  4698.  
  4699.                                                 <div class="stats-line justify-sb">
  4700.                                                 <span>Toggle Autorespawn</span>
  4701.                                                     <input value="${
  4702.             modSettings.macros.keys
  4703.                 .toggle
  4704.                 .autoRespawn || ''
  4705.         }" placeholder="..." readonly id="modinput12" name="toggle.autoRespawn" class="keybinding" onfocus="this.select();">
  4706.                                                 </div>
  4707.                                             </div>
  4708.                                         </div>
  4709.                                         <div class="setting-card-wrapper">
  4710.                                             <div class="setting-card">
  4711.                                                 <div class="setting-card-action">
  4712.                                                     <span class="setting-card-name">Tricksplits</span>
  4713.                                                 </div>
  4714.                                             </div>
  4715.                                             <div class="setting-parameters" style="display: none;">
  4716.                                                 <div class="my-5">
  4717.                                                     <span class="stats-info-text">Other split options - splits with delay</span>
  4718.                                                 </div>
  4719.                                                 <div class="stats-line justify-sb">
  4720.                                                     <span>Double Trick</span>
  4721.                                                     <input value="${
  4722.             modSettings.macros.keys
  4723.                 .splits
  4724.                 .doubleTrick || ''
  4725.         }" placeholder="..." readonly id="modinput13" name="splits.doubleTrick" class="keybinding" onfocus="this.select();">
  4726.                                                 </div>
  4727.                                                 <div class="stats-line justify-sb">
  4728.                                                     <span>Self Trick</span>
  4729.                                                     <input value="${
  4730.             modSettings.macros.keys
  4731.                 .splits.selfTrick ||
  4732.                 ''
  4733.         }" placeholder="..." readonly id="modinput14" name="splits.selfTrick" class="keybinding" onfocus="this.select();">
  4734.                                                 </div>
  4735.                                             </div>
  4736.                                         </div>
  4737.                                     </div>
  4738.                                 </div>
  4739.                             </div>
  4740.                             <div class="mod_tab scroll" id="mod_game" style="display: none">
  4741.                                 <div class="modColItems">
  4742.                                     <div class="modRowItems" style="align-items: start;">
  4743.                                         <div class="modColItems_2">
  4744.                                             <span style="font-style: italic;">~ Game Colors</span>
  4745.                                             <div class="justify-sb w-100 p-5 rounded">
  4746.                                                 <span class="text">Map</span>
  4747.                                                 <div id="mapColor"></div>
  4748.                                             </div>
  4749.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4750.                                                 <span class="text">Border</span>
  4751.                                                 <div id="borderColor"></div>
  4752.                                             </div>
  4753.                                             <div class="justify-sb w-100 p-5 rounded">
  4754.                                                 <span class="text" title="Does not work with jelly physics">Food</span>
  4755.                                                 <div id="foodColor"></div>
  4756.                                             </div>
  4757.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4758.                                                 <span class="text" title="Does not work with jelly physics">Cells</span>
  4759.                                                 <div id="cellColor"></div>
  4760.                                             </div>
  4761.                                         </div>
  4762.                                         <div class="modColItems_2">
  4763.                                             <span style="font-style: italic;">~ Game Images</span>
  4764.                                             <div class="justify-sb w-100 p-5 rounded">
  4765.                                                 <span class="text">Map Image</span>
  4766.                                                 <button class="btn select-btn" id="mapImageSelect"></button>
  4767.                                             </div>
  4768.                                             <div class="justify-sb w-100 accent_row p-5 rounded">
  4769.                                                 <span class="text">Virus Image</span>
  4770.                                                 <button class="btn select-btn" id="virusImageSelect"></button>
  4771.                                             </div>
  4772.                                             <div class="justify-sb w-100 p-5 rounded">
  4773.                                                 <span class="text">Replace Skins</span>
  4774.                                                 <button class="btn select-btn" id="skinReplaceSelect"></button>
  4775.                                             </div>
  4776.                                         </div>
  4777.                                     </div>
  4778.                                     <div class="modColItems_2">
  4779. 										<span style="font-style: italic;">~ Game Settings</span>
  4780. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4781. 											<span class="text">Font</span>
  4782. 											<div id="font-select-container"></div>
  4783. 										</div>
  4784. 										<div class="justify-sb w-100 p-10">
  4785. 											<span class="text">Names</span>
  4786. 											<div class="modCheckbox">
  4787. 											  <input id="mod-showNames" type="checkbox" ${
  4788.             JSON.parse(
  4789.                 localStorage.getItem(
  4790.                     'settings'
  4791.                 )
  4792.             )?.showNames
  4793.                 ? 'checked'
  4794.             : ''
  4795.         } />
  4796. 											  <label class="cbx" for="mod-showNames"></label>
  4797. 											</div>
  4798. 										</div>
  4799. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4800. 											<span class="text">Skins</span>
  4801. 											<div class="modCheckbox">
  4802. 											  <input id="mod-showSkins" type="checkbox" ${
  4803.             JSON.parse(
  4804.                 localStorage.getItem(
  4805.                     'settings'
  4806.                 )
  4807.             )?.showSkins
  4808.                 ? 'checked'
  4809.             : ''
  4810.         } />
  4811. 											  <label class="cbx" for="mod-showSkins"></label>
  4812. 											</div>
  4813. 										</div>
  4814. 										<div class="justify-sb w-100 p-10 rounded">
  4815. 											<span title="Long nicknames will be shorten on the leaderboard & ingame">Shorten names</span>
  4816. 											<div class="modCheckbox">
  4817. 											  <input id="shortenNames" type="checkbox" ${
  4818.             modSettings.game
  4819.                 .shortenNames && 'checked'
  4820.         } />
  4821. 											  <label class="cbx" for="shortenNames"></label>
  4822. 											</div>
  4823. 										</div>
  4824. 										<div class="justify-sb w-100 accent_row p-10">
  4825. 											<span>Text outlines & shadows</span>
  4826. 											<div class="modCheckbox">
  4827. 											  <input id="removeOutlines" type="checkbox" ${
  4828.             modSettings.gameShortenNames &&
  4829.                 'checked'
  4830.         } />
  4831. 											  <label class="cbx" for="removeOutlines"></label>
  4832. 											</div>
  4833. 										</div>
  4834. 										<div class="justify-sb w-100 rounded" style="padding: 5px 10px;">
  4835.                                         	<span class="text">Death screen Position</span>
  4836. 											<select id="deathScreenPos" class="form-control" style="width: 30%">
  4837. 												<option value="center" selected>Center</option>
  4838. 												<option value="left">Left</option>
  4839. 												<option value="right">Right</option>
  4840. 												<option value="top">Top</option>
  4841. 												<option value="bottom">Bottom</option>
  4842. 											</select>
  4843. 										</div>
  4844. 										<div class="justify-sb w-100 accent_row p-10 rounded">
  4845. 											<span class="text">Play timer</span>
  4846. 											<div class="modCheckbox">
  4847. 											  <input type="checkbox" id="playTimerToggle" ${
  4848.             modSettings.settings
  4849.                 .playTimer && 'checked'
  4850.         } />
  4851. 											  <label class="cbx" for="playTimerToggle"></label>
  4852. 											</div>
  4853. 										</div>
  4854. 										<div class="justify-sb w-100 p-10 rounded">
  4855. 											<span class="text">Mouse tracker</span>
  4856. 											<div class="modCheckbox">
  4857. 											  <input type="checkbox" id="mouseTrackerToggle" ${
  4858.             modSettings.settings
  4859.                 .mouseTracker && 'checked'
  4860.         } />
  4861. 											  <label class="cbx" for="mouseTrackerToggle"></label>
  4862. 											</div>
  4863. 										</div>
  4864.                                     </div>
  4865.                                     <div class="modRowItems justify-sb">
  4866.                                         <span class="text">Reset settings: </span>
  4867.                                         <button class="modButton-secondary" id="resetModSettings" type="button">Reset mod settings</button>
  4868.                                         <button class="modButton-secondary" id="resetGameSettings" type="button">Reset game settings</button>
  4869.                                     </div>
  4870.                                 </div>
  4871.                             </div>
  4872.  
  4873.                             <div class="mod_tab scroll" id="mod_name" style="display: none">
  4874.                             <div class="modColItems">
  4875.                                 <div class="modRowItems justify-sb" style="align-items: start;">
  4876.                                     <div class="f-column g-5" style="align-items: start; justify-content: start;">
  4877.                                         <span class="modTitleText">Name fonts & special characters</span>
  4878.                                         <span class="modDescText">Customize your name with special characters or fonts</span>
  4879.                                     </div>
  4880.                                     <div class="f-column g-5">
  4881.                                         <button class="modButton-secondary" onclick="window.open('https://nickfinder.com', '_blank')">Nickfinder</button>
  4882.                                         <button class="modButton-secondary" onclick="window.open('https://www.stylishnamemaker.com', '_blank')">Stylish Name</button>
  4883.                                         <button class="modButton-secondary" onclick="window.open('https://www.tell.wtf', '_blank')">Tell.wtf</button>
  4884.                                     </div>
  4885.                                 </div>
  4886.                                 <div class="modRowItems justify-sb">
  4887.                                     <div class="f-column g-5">
  4888.                                         <span class="modTitleText">Save names</span>
  4889.                                         <span class="modDescText">Save your names locally</span>
  4890.                                         <div class="flex g-5">
  4891.                                             <input class="modInput" placeholder="Enter a name..." id="saveNameValue" />
  4892.                                             <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>
  4893.                                         </div>
  4894.                                         <div id="savedNames" class="f-column scroll"></div>
  4895.                                     </div>
  4896.                                     <div class="vr"></div>
  4897.                                     <div class="f-column g-5">
  4898.                                         <span class="modTitleText">Name Color</span>
  4899.                                         <span class="modDescText">Customize your name color</span>
  4900.                                         <div class="justify-sb">
  4901.                                             <input type="color" value="#ffffff" id="nameColor" class="colorInput">
  4902.                                         </div>
  4903.                                         <span class="modTitleText">Gradient Name</span>
  4904.                                         <span class="modDescText">Customize your name with a gradient color</span>
  4905.                                         <div class="justify-sb">
  4906.                                             <div class="flex g-2" style="align-items: center">
  4907.                                                 <input type="color" value="#ffffff" id="gradientNameColor1" class="colorInput">
  4908.                                                 <span>➜ First color</span>
  4909.                                             </div>
  4910.                                         </div>
  4911.                                         <div class="justify-sb">
  4912.                                             <div class="flex g-2" style="align-items: center">
  4913.                                                 <input type="color" value="#ffffff" id="gradientNameColor2" class="colorInput">
  4914.                                                 <span>➜ Second color</span>
  4915.                                             </div>
  4916.                                         </div>
  4917.                                     </div>
  4918.                                 </div>
  4919.                             </div>
  4920.                             </div>
  4921.                             <div class="mod_tab scroll" id="mod_themes" style="display: none">
  4922. 								<span>Background presets</span>
  4923.                                 <div class="themes scroll" id="themes">
  4924.                                     <div class="theme" id="createTheme">
  4925.                                         <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>
  4926.                                         <div class="themeName text" style="color: #fff">Create</div>
  4927.                                     </div>
  4928.                                 </div>
  4929.  
  4930. 								<div class="modColItems_2" style="margin-top: 5px;">
  4931. 									<div class="justify-sb w-100 p-10">
  4932. 										<span>Input border radius</span>
  4933. 										<div class="centerXY g-10" style="width: 40%">
  4934.                                             <button id="reset_input_radius" class="resetButton"></button>
  4935.                                             <input type="range" class="modSlider" id="theme-inputBorderRadius" max="20" step="2" />
  4936.                                         </div>
  4937. 									</div>
  4938. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4939. 										<span>Menu border radius</span>
  4940.                                         <div class="centerXY g-10" style="width: 40%">
  4941.                                             <button id="reset_menu_radius" class="resetButton"></button>
  4942.                                             <input type="range" class="modSlider"id="theme-menuBorderRadius" max="50" step="2" />
  4943.                                         </div>
  4944. 									</div>
  4945. 									<div class="justify-sb w-100 p-10">
  4946. 										<span>Input border</span>
  4947. 										<div class="modCheckbox">
  4948. 										  <input id="theme-inputBorder" type="checkbox" />
  4949. 										  <label class="cbx" for="theme-inputBorder"></label>
  4950. 										</div>
  4951. 									</div>
  4952. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4953. 										<span>Challenges on deathscreen</span>
  4954. 										<div class="modCheckbox">
  4955. 										  <input id="showChallenges" type="checkbox" />
  4956. 										  <label class="cbx" for="showChallenges"></label>
  4957. 										</div>
  4958. 									</div>
  4959. 									<div class="justify-sb w-100 p-10">
  4960. 										<span>Remove shop popup</span>
  4961. 										<div class="modCheckbox">
  4962. 										  <input id="removeShopPopup" type="checkbox" />
  4963. 										  <label class="cbx" for="removeShopPopup"></label>
  4964. 										</div>
  4965. 									</div>
  4966. 									<div class="justify-sb w-100 p-10 accent_row rounded">
  4967. 										<span>Hide Discord Buttons</span>
  4968. 										<div class="modCheckbox">
  4969. 										  <input id="hideDiscordBtns" type="checkbox" />
  4970. 										  <label class="cbx" for="hideDiscordBtns"></label>
  4971. 										</div>
  4972. 									</div>
  4973. 									<div class="justify-sb w-100 p-10">
  4974. 										<span>Hide Language Buttons</span>
  4975. 										<div class="modCheckbox">
  4976. 										  <input id="hideLangs" type="checkbox" />
  4977. 										  <label class="cbx" for="hideLangs"></label>
  4978. 										</div>
  4979. 									</div>
  4980. 								</div>
  4981.                             </div>
  4982.                             <div class="mod_tab scroll" id="mod_gallery" style="display: none">
  4983. 								<div class="modColItems_2">
  4984. 									<label class="macroRow w-100">
  4985. 									  <span class="text">Keybind to save image</span>
  4986. 									  <input type="text" name="saveImage" id="modinput17" class="keybinding" value="${
  4987.             modSettings.macros.keys.saveImage ||
  4988.                 ''
  4989.         }" maxlength="1" onfocus="this.select()" placeholder="..." />
  4990. 									</label>
  4991. 								</div>
  4992. 								<div class="modColItems_2">
  4993. 									<span>Image gallery</span>
  4994. 									<div class="flex g-5">
  4995. 										<button class="modButton" id="gallery-download">Download all</button>
  4996. 										<button class="modButton" id="gallery-delete">Delete all</button>
  4997. 									</div>
  4998. 									<div id="image-gallery"></div>
  4999. 								</div>
  5000.                             </div>
  5001.                             <div class="mod_tab scroll centerXY" id="mod_friends" style="display: none">
  5002.                                 <div class="centerXY f-big" style="margin-top: 10px;">Connect and discover new friends with SigMod.</div>
  5003.                                 <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>
  5004.  
  5005.                                 <div class="centerXY f-column g-5" style="height: 300px; width: 165px;">
  5006.                                     <button class="modButton-black" id="createAccount">
  5007.                                         <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>
  5008.                                         Create account
  5009.                                     </button>
  5010.                                     <button class="modButton-black" id="login">
  5011.                                         <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>
  5012.                                         Login
  5013.                                     </button>
  5014.                                 </div>
  5015.                             </div>
  5016.                             <div class="mod_tab scroll f-column g-5 text-center" id="mod_info" style="display: none">
  5017.                                 <div class="brand_wrapper">
  5018.                                     <img src="https://czrsd.com/static/sigmod/info_bg_2.jpeg" alt="Info background" class="brand_img" />
  5019.                                     <span>SigMod V${version} by Cursed</span>
  5020.                                 </div>
  5021.                                 <span>Thanks to</span>
  5022.                                 <ul class="brand_credits">
  5023. 									<li>Jb</li>
  5024. 									<li>Black</li>
  5025. 									<li>8y8x</li>
  5026. 									<li>Dreamz</li>
  5027. 									<li>Ultra</li>
  5028. 									<li>Xaris</li>
  5029. 									<li>Benzofury</li>
  5030. 								</ul>
  5031.                                 <p>for contributing to the mod’s evolution into what it is today.</p>
  5032.  
  5033. 								<div class="sigmod-community">
  5034. 									<div class="community-header">
  5035. 										Community
  5036. 									</div>
  5037. 									<div class="flex">
  5038. 										<div class="community-discord-logo">
  5039. 											<svg width="31" height="30" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top: 3px;">
  5040. 												<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>
  5041. 											</svg>
  5042. 										</div>
  5043. 										<div class="community-discord">
  5044. 											<a href="https://dsc.gg/sigmodz" target="_blank">dsc.gg/sigmodz</a>
  5045. 										</div>
  5046. 									</div>
  5047. 								</div>
  5048.                                 <div>
  5049.                                    Install <a href="https://greasyfork.org/scripts/483587-sigmally-fixes-v2" target="_blank">Sigmally Fixes</a> for better performance!
  5050.                                 </div>
  5051.  
  5052.                                 <div class="mt-auto flex f-column g-10">
  5053. 									<div class="brand_yt">
  5054. 										<div class="yt_wrapper" onclick="window.open('https://www.youtube.com/@sigmallyCursed')">
  5055. 											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="26" height="26">
  5056. 												<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>
  5057. 											</svg>
  5058. 											<span style="font-size: 16px;">Cursed</span>
  5059. 										</div>
  5060. 										<div class="yt_wrapper" onclick="window.open('https://www.youtube.com/@sigmally')">
  5061. 											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="26" height="26">
  5062. 												<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>
  5063. 											</svg>
  5064. 											<span style="font-size: 16px;">Sigmally</span>
  5065. 										</div>
  5066. 									</div>
  5067. 									<div class="w-100 centerXY">
  5068. 										<div class="justify-sb" style="width: 50%;">
  5069. 											<a href="https://mod.czrsd.com/" target="_blank">Website</a>
  5070. 											<a href="https://mod.czrsd.com/changelog" target="_blank">Changelog</a>
  5071. 											<a href="https://mod.czrsd.com/tos" target="_blank">Terms of Service</a>
  5072. 										</div>
  5073. 									</div>
  5074. 								</div>
  5075.                             </div>
  5076.                         </div>
  5077.                     </div>
  5078.                 </div>
  5079.             `;
  5080.             document.body.append(mod_menu);
  5081.  
  5082.             const styleTag = document.createElement('style');
  5083.             styleTag.innerHTML = this.style;
  5084.             document.head.append(styleTag);
  5085.  
  5086.             this.getSettings();
  5087.             this.smallMods();
  5088.  
  5089.             mod_menu.addEventListener('click', (event) => {
  5090.                 if (event.target.closest('.mod_menu_wrapper')) return;
  5091.  
  5092.                 mod_menu.style.opacity = 0;
  5093.                 setTimeout(() => {
  5094.                     mod_menu.style.display = 'none';
  5095.                 }, 300);
  5096.             });
  5097.  
  5098.             function openModTab(tabId) {
  5099.                 const allTabs = document.getElementsByClassName('mod_tab');
  5100.                 const allTabButtons = document.querySelectorAll('.mod_nav_btn');
  5101.  
  5102.                 for (const tab of allTabs) {
  5103.                     tab.style.opacity = 0;
  5104.                     setTimeout(() => {
  5105.                         tab.style.display = 'none';
  5106.                     }, 200);
  5107.                 }
  5108.  
  5109.                 allTabButtons.forEach((tabBtn) =>
  5110.                                       tabBtn.classList.remove('mod_selected')
  5111.                                      );
  5112.  
  5113.                 if (tabId === 'mod_gallery') {
  5114.                     mods.updateGallery();
  5115.                 }
  5116.  
  5117.                 const selectedTab = byId(tabId);
  5118.                 setTimeout(() => {
  5119.                     selectedTab.style.display = 'flex';
  5120.                     setTimeout(() => {
  5121.                         selectedTab.style.opacity = 1;
  5122.                     }, 10);
  5123.                 }, 200);
  5124.                 this.id && this.classList.add('mod_selected');
  5125.             }
  5126.  
  5127.             window.openModTab = openModTab;
  5128.  
  5129.             document.querySelectorAll('.mod_nav_btn').forEach((tabBtn) => {
  5130.                 tabBtn.addEventListener('click', function () {
  5131.                     openModTab.call(
  5132.                         this,
  5133.                         this.id.replace('tab_', 'mod_').replace('_btn', '')
  5134.                     );
  5135.                 });
  5136.             });
  5137.  
  5138.             const openMenu = document.querySelectorAll(
  5139.                 '#clans_and_settings button'
  5140.             )[1];
  5141.             openMenu.removeAttribute('onclick');
  5142.             openMenu.addEventListener('click', () => {
  5143.                 mod_menu.style.display = 'flex';
  5144.                 setTimeout(() => {
  5145.                     mod_menu.style.opacity = 1;
  5146.                 }, 10);
  5147.             });
  5148.  
  5149.             const closeModal = byId('closeBtn');
  5150.             closeModal.addEventListener('click', () => {
  5151.                 mod_menu.style.opacity = 0;
  5152.                 setTimeout(() => {
  5153.                     mod_menu.style.display = 'none';
  5154.                 }, 300);
  5155.             });
  5156.  
  5157.             const fontSelectContainer = document.querySelector(
  5158.                 '#font-select-container'
  5159.             );
  5160.  
  5161.             try {
  5162.                 const fonts = await this.getGoogleFonts();
  5163.  
  5164.                 const { container: selectElement, selectButton } =
  5165.                       this.render_sm_select(
  5166.                           'Select Font',
  5167.                           fonts,
  5168.                           { width: '200px' },
  5169.                           modSettings.game.font
  5170.                       );
  5171.  
  5172.                 const resetFont = document.createElement('button');
  5173.                 resetFont.classList.add('resetButton');
  5174.  
  5175.                 resetFont.addEventListener('click', () => {
  5176.                     if (modSettings.game.font === 'Ubuntu') return;
  5177.  
  5178.                     modSettings.game.font = 'Ubuntu';
  5179.                     updateStorage();
  5180.                     selectElement.value = 'Ubuntu';
  5181.  
  5182.                     // just change the text of the selectButton
  5183.                     selectButton.querySelector('span').textContent = 'Ubuntu';
  5184.                 });
  5185.  
  5186.                 const container = document.createElement('div');
  5187.                 container.classList.add('centerXY', 'g-5');
  5188.                 container.append(resetFont, selectElement);
  5189.  
  5190.                 selectElement.addEventListener('change', (e) => {
  5191.                     const font = e.detail;
  5192.                     const link = document.createElement('link');
  5193.                     link.href = `https://fonts.googleapis.com/css2?family=${font}&display=swap`;
  5194.                     link.rel = 'stylesheet';
  5195.                     document.head.appendChild(link);
  5196.  
  5197.                     modSettings.game.font = font;
  5198.                     updateStorage();
  5199.                 });
  5200.  
  5201.                 fontSelectContainer.replaceWith(container);
  5202.             } catch (e) {
  5203.                 fontSelectContainer.replaceWith(
  5204.                     "Couldn't load fonts, try again later."
  5205.                 );
  5206.                 console.error(e);
  5207.             }
  5208.  
  5209.             if (modSettings.game.font !== 'Ubuntu') {
  5210.                 const link = document.createElement('link');
  5211.                 link.href = `https://fonts.googleapis.com/css2?family=${modSettings.game.font}&display=swap`;
  5212.                 link.rel = 'stylesheet';
  5213.                 document.head.appendChild(link);
  5214.             }
  5215.  
  5216.             const macroSettings = () => {
  5217.                 const allSettingNames =
  5218.                       document.querySelectorAll('.setting-card-name');
  5219.  
  5220.                 for (const settingName of Object.values(allSettingNames)) {
  5221.                     settingName.addEventListener('click', (event) => {
  5222.                         const settingCardWrappers = document.querySelectorAll(
  5223.                             '.setting-card-wrapper'
  5224.                         );
  5225.                         const currentWrapper = Object.values(
  5226.                             settingCardWrappers
  5227.                         ).filter(
  5228.                             (wrapper) =>
  5229.                             wrapper.querySelector('.setting-card-name')
  5230.                             .textContent === settingName.textContent
  5231.                         )[0];
  5232.                         const settingParameters = currentWrapper.querySelector(
  5233.                             '.setting-parameters'
  5234.                         );
  5235.  
  5236.                         settingParameters.style.display =
  5237.                             settingParameters.style.display === 'none'
  5238.                             ? 'block'
  5239.                         : 'none';
  5240.                     });
  5241.                 }
  5242.             };
  5243.             macroSettings();
  5244.  
  5245.             const playTimerToggle = byId('playTimerToggle');
  5246.             playTimerToggle.addEventListener('change', () => {
  5247.                 modSettings.playTimer = playTimerToggle.checked;
  5248.                 updateStorage();
  5249.             });
  5250.  
  5251.             const mouseTrackerToggle = byId('mouseTrackerToggle');
  5252.             mouseTrackerToggle.addEventListener('change', () => {
  5253.                 modSettings.mouseTracker = mouseTrackerToggle.checked;
  5254.                 updateStorage();
  5255.             });
  5256.  
  5257.             const macroSpeed = byId('macroSpeed');
  5258.             const macroSpeedText = byId('macroSpeedText');
  5259.  
  5260.             macroSpeed.addEventListener('input', () => {
  5261.                 modSettings.macros.feedSpeed = macroSpeed.value;
  5262.                 macroSpeedText.textContent = `${modSettings.macros.feedSpeed.toString()}ms`;
  5263.                 updateStorage();
  5264.             });
  5265.  
  5266.             // Reset settings - Mod
  5267.             const resetModSettings = byId('resetModSettings');
  5268.             resetModSettings.addEventListener('click', () => {
  5269.                 if (
  5270.                     confirm(
  5271.                         'Are you sure you want to reset the mod settings? A reload is required.'
  5272.                     )
  5273.                 ) {
  5274.                     this.removeStorage(storageName);
  5275.                     location.reload();
  5276.                 }
  5277.             });
  5278.  
  5279.             // Reset settings - Game
  5280.             const resetGameSettings = byId('resetGameSettings');
  5281.             resetGameSettings.addEventListener('click', () => {
  5282.                 if (
  5283.                     confirm(
  5284.                         'Are you sure you want to reset the game settings? Your nick and more settings will be lost. A reload is required.'
  5285.                     )
  5286.                 ) {
  5287.                     window.settings.gameSettings = null;
  5288.                     this.removeStorage('settings');
  5289.                     location.reload();
  5290.                 }
  5291.             });
  5292.  
  5293.             // EventListeners for auth buttons
  5294.             const createAccountBtn = byId('createAccount');
  5295.             const loginBtn = byId('login');
  5296.  
  5297.             createAccountBtn.addEventListener('click', () => {
  5298.                 this.createSignInWrapper(false);
  5299.             });
  5300.             loginBtn.addEventListener('click', () => {
  5301.                 this.createSignInWrapper(true);
  5302.             });
  5303.         },
  5304.  
  5305.         render_sm_select(label, items, style = {}, defaultValue) {
  5306.             const createElement = (tag, styles, text = '') => {
  5307.                 const el = document.createElement(tag);
  5308.                 el.textContent = text;
  5309.                 Object.assign(el.style, styles);
  5310.                 return el;
  5311.             };
  5312.  
  5313.             const defaultcontainerStyles = {
  5314.                 position: 'relative',
  5315.                 display: 'inline-block',
  5316.             };
  5317.  
  5318.             const container = createElement('div', {
  5319.                 ...defaultcontainerStyles,
  5320.                 ...style,
  5321.             });
  5322.  
  5323.             const selectButton = document.createElement('div');
  5324.             selectButton.style.cssText =
  5325.                 '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;';
  5326.  
  5327.             selectButton.innerHTML = `
  5328.                <span>${label}</span>
  5329.                <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#000000" width="20">
  5330.                  <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>
  5331.                </svg>
  5332.             `;
  5333.  
  5334.             if (defaultValue && items.includes(defaultValue)) {
  5335.                 selectButton.innerHTML = `<span>${defaultValue}</span> ${
  5336.                 selectButton.innerHTML.split('</svg>')[1]
  5337.             }`;
  5338.             }
  5339.  
  5340.             container.appendChild(selectButton);
  5341.  
  5342.             const dropdown = createElement('div', {
  5343.                 display: 'none',
  5344.                 position: 'absolute',
  5345.                 background: '#111',
  5346.                 color: '#fafafa',
  5347.                 borderRadius: '0 0 10px 10px',
  5348.                 padding: '5px 0',
  5349.                 zIndex: '999999',
  5350.                 maxHeight: '200px',
  5351.                 overflowY: 'auto',
  5352.             });
  5353.  
  5354.             const searchBox = createElement('input', {
  5355.                 width: '100%',
  5356.                 padding: '5px',
  5357.                 marginBottom: '5px',
  5358.                 background: '#222',
  5359.                 border: 'none',
  5360.                 color: '#fff',
  5361.             });
  5362.             searchBox.placeholder = 'Search...';
  5363.  
  5364.             dropdown.append(searchBox);
  5365.  
  5366.             items.forEach((item) => {
  5367.                 const option = createElement(
  5368.                     'div',
  5369.                     { padding: '5px', cursor: 'pointer' },
  5370.                     item
  5371.                 );
  5372.                 option.onclick = () => {
  5373.                     selectButton.innerHTML = `
  5374.                         <span>${item}</span>
  5375.                         <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#000000" width="20">
  5376.                           <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>
  5377.                         </svg>`;
  5378.                     dropdown.style.display = 'none';
  5379.                     container.dispatchEvent(
  5380.                         new CustomEvent('change', { detail: item })
  5381.                     );
  5382.                 };
  5383.                 option.onmouseover = (e) =>
  5384.                 (e.target.style.background = '#555');
  5385.                 option.onmouseout = (e) =>
  5386.                 (e.target.style.background = 'transparent');
  5387.                 dropdown.append(option);
  5388.             });
  5389.  
  5390.             container.append(dropdown);
  5391.  
  5392.             selectButton.onclick = () => {
  5393.                 dropdown.style.display =
  5394.                     dropdown.style.display === 'none' ? 'block' : 'none';
  5395.             };
  5396.  
  5397.             document.onclick = (e) => {
  5398.                 if (!container.contains(e.target))
  5399.                     dropdown.style.display = 'none';
  5400.             };
  5401.  
  5402.             searchBox.addEventListener('input', () => {
  5403.                 const filter = searchBox.value.toLowerCase();
  5404.                 Array.from(dropdown.children)
  5405.                     .slice(1)
  5406.                     .forEach((item) => {
  5407.                     item.style.display = item.textContent
  5408.                         .toLowerCase()
  5409.                         .includes(filter)
  5410.                         ? 'block'
  5411.                     : 'none';
  5412.                 });
  5413.             });
  5414.  
  5415.             return { container, selectButton };
  5416.         },
  5417.  
  5418.         setProfile(user) {
  5419.             const img = byId('my-profile-img');
  5420.             const name = byId('my-profile-name');
  5421.             const role = byId('my-profile-role');
  5422.             const bioText = byId('my-profile-bio');
  5423.             const badges = byId('my-profile-badges');
  5424.  
  5425.             const bio = user.bio ? user.bio : 'No bio.';
  5426.  
  5427.             img.src = user.imageURL;
  5428.             name.innerText = user.username;
  5429.             role.innerText = user.role;
  5430.             bioText.innerHTML = bio;
  5431.             badges.innerHTML =
  5432.                 user.badges && user.badges.length > 0
  5433.                 ? user.badges
  5434.                 .map(
  5435.                 (badge) =>
  5436.                 `<span class="mod_badge">${badge}</span>`
  5437.             )
  5438.                 .join('')
  5439.             : '<span>User has no badges.</span>';
  5440.  
  5441.             role.classList.add(`${user.role}_role`);
  5442.         },
  5443.  
  5444.         getSettings() {
  5445.             const mod_qaccess = document.querySelector('#mod_qaccess');
  5446.             const settingsGrid = document.querySelector(
  5447.                 '#settings > .checkbox-grid'
  5448.             );
  5449.             const settingsNames =
  5450.                   settingsGrid.querySelectorAll('label:not([class])');
  5451.             const inputs = settingsGrid.querySelectorAll('input');
  5452.  
  5453.             inputs.forEach((checkbox, index) => {
  5454.                 if (
  5455.                     checkbox.id === 'showMinimap' ||
  5456.                     checkbox.id === 'darkTheme'
  5457.                 )
  5458.                     return;
  5459.                 const modrow = document.createElement('div');
  5460.                 modrow.classList.add('justify-sb', 'p-2');
  5461.  
  5462.                 if (
  5463.                     checkbox.id === 'showChat' ||
  5464.                     checkbox.id === 'showPosition' ||
  5465.                     checkbox.id === 'showNames' ||
  5466.                     checkbox.id === 'showSkins'
  5467.                 ) {
  5468.                     modrow.style.display = 'none';
  5469.                 }
  5470.  
  5471.                 modrow.innerHTML = `
  5472.                     <span>${settingsNames[index].textContent}</span>
  5473.                     <div class="modCheckbox" id="${checkbox.id}_wrapper"></div>
  5474.                 `;
  5475.                 mod_qaccess.append(modrow);
  5476.  
  5477.                 const cbWrapper = byId(`${checkbox.id}_wrapper`);
  5478.                 cbWrapper.appendChild(checkbox);
  5479.  
  5480.                 cbWrapper.appendChild(
  5481.                     Object.assign(document.createElement('label'), {
  5482.                         classList: ['cbx'],
  5483.                         htmlFor: checkbox.id,
  5484.                     })
  5485.                 );
  5486.             });
  5487.         },
  5488.  
  5489.         themes() {
  5490.             const elements = [
  5491.                 '#menu',
  5492.                 '#title',
  5493.                 '.top-users',
  5494.                 '#left-menu',
  5495.                 '.menu-links',
  5496.                 '.menu--stats-mode',
  5497.                 '#left_ad_block',
  5498.                 '#ad_bottom',
  5499.                 '.ad-block',
  5500.                 '#left_ad_block > .right-menu',
  5501.                 '#text-block > .right-menu',
  5502.                 '#sigma-pass .connecting__content',
  5503.                 '#sigma-status',
  5504.                 '.alert',
  5505.             ];
  5506.  
  5507.             const customTextElements = [
  5508.                 '#challenge-coins .alert-heading',
  5509.                 '#sigma-pass h3',
  5510.                 '.alert *',
  5511.             ];
  5512.  
  5513.             let checkInterval;
  5514.             const appliedElements = new Set();
  5515.  
  5516.             window.themeElements = elements;
  5517.  
  5518.             const themeEditor = document.createElement('div');
  5519.             themeEditor.classList.add('themeEditor');
  5520.             themeEditor.style.display = 'none';
  5521.  
  5522.             themeEditor.innerHTML = `
  5523.                 <div class="theme_editor_header">
  5524.                     <h3>Theme Editor</h3>
  5525.                     <button class="btn closeBtn" id="closeThemeEditor">
  5526.                         <svg width="22" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  5527.                             <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>
  5528.                         </svg>
  5529.                     </button>
  5530.                 </div>
  5531.                 <hr />
  5532.                 <main class="theme_editor_content">
  5533.                     <div class="centerXY" style="justify-content: flex-end;gap: 10px">
  5534.                         <span class="text">Select Theme Type: </span>
  5535.                         <select class="form-control" style="background: #222; color: #fff; width: 150px" id="theme-type-select">
  5536.                             <option>Static Color</option>
  5537.                             <option>Gradient</option>
  5538.                             <option>Image / Gif</option>
  5539.                         </select>
  5540.                     </div>
  5541.  
  5542.                     <div id="theme_editor_color" class="theme-editor-tab">
  5543.                         <div class="centerXY">
  5544.                             <label for="theme-editor-bgcolorinput" class="text">Background color:</label>
  5545.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-bgcolorinput"/>
  5546.                         </div>
  5547.                         <div class="centerXY">
  5548.                             <label for="theme-editor-colorinput" class="text">Text color:</label>
  5549.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-colorinput"/>
  5550.                         </div>
  5551.                         <div style="background-color: #000000" class="themes_preview" id="color_preview">
  5552.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5553.                         </div>
  5554.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5555.                             <input type="text" class="form-control" style="background: #222; color: #fff;" maxlength="15" placeholder="Theme name..." id="colorThemeName"/>
  5556.                             <button class="btn btn-success" id="saveColorTheme">Save</button>
  5557.                         </div>
  5558.                     </div>
  5559.  
  5560.  
  5561.                     <div id="theme_editor_gradient" class="theme-editor-tab" style="display: none;">
  5562.                         <div class="centerXY">
  5563.                             <label for="theme-editor-gcolor1" class="text">Color 1:</label>
  5564.                             <input type="color" value="#000000" class="colorInput whiteBorder_colorInput" id="theme-editor-gcolor1"/>
  5565.                         </div>
  5566.                         <div class="centerXY">
  5567.                             <label for="theme-editor-g_color" class="text">Color 2:</label>
  5568.                             <input type="color" value="#ffffff" class="colorInput whiteBorder_colorInput" id="theme-editor-g_color"/>
  5569.                         </div>
  5570.                         <div class="centerXY">
  5571.                             <label for="theme-editor-gcolor2" class="text">Text Color:</label>
  5572.                             <input type="color" value="#ffffff" class="colorInput whiteBorder_colorInput" id="theme-editor-gcolor2"/>
  5573.                         </div>
  5574.  
  5575.                         <div class="centerXY" style="gap: 10px">
  5576.                             <label for="gradient-type" class="text">Gradient Type:</label>
  5577.                             <select id="gradient-type" class="form-control" style="background: #222; color: #fff; width: 120px;">
  5578.                                 <option value="linear">Linear</option>
  5579.                                 <option value="radial">Radial</option>
  5580.                             </select>
  5581.                         </div>
  5582.  
  5583.                         <div id="theme-editor-gradient_angle" class="centerY" style="gap: 10px; width: 100%">
  5584.                             <label for="g_angle" class="text" id="gradient_angle_text" style="width: 115px;">Angle (0deg):</label>
  5585.                             <input type="range" id="g_angle" value="0" min="0" max="360">
  5586.                         </div>
  5587.  
  5588.                         <div style="background: linear-gradient(0deg, #000, #fff)" class="themes_preview" id="gradient_preview">
  5589.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5590.                         </div>
  5591.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5592.                             <input type="text" class="form-control" style="background: #222; color: #fff;" placeholder="Theme name..." id="gradientThemeName"/>
  5593.                             <button class="btn btn-success" id="saveGradientTheme">Save</button>
  5594.                         </div>
  5595.                     </div>
  5596.  
  5597.                     <div id="theme_editor_image" class="theme-editor-tab" style="display: none">
  5598.                         <div class="centerXY">
  5599.                             <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"/>
  5600.                         </div>
  5601.                         <div class="centerXY" style="margin: 5px; gap: 5px;">
  5602.                             <label for="theme-editor-textcolorImage" class="text">Text Color: </label>
  5603.                             <input type="color" class="colorInput whiteBorder_colorInput" value="#ffffff" id="theme-editor-textcolorImage"/>
  5604.                         </div>
  5605.  
  5606.                         <div style="background: url('https://i.ibb.co/k6hn4v0/Galaxy-Example.png'); background-position: center; background-size: cover;" class="themes_preview" id="image_preview">
  5607.                             <span class="text" style="color: #fff; font-size: 9px;">preview</span>
  5608.                         </div>
  5609.                         <div class="centerY" style="gap: 10px; margin-top: 10px;">
  5610.                             <input type="text" class="form-control" style="background: #222; color: #fff;" placeholder="Theme name..." id="imageThemeName"/>
  5611.                             <button class="btn btn-success" id="saveImageTheme">Save</button>
  5612.                         </div>
  5613.                     </div>
  5614.                 </main>
  5615.             `;
  5616.  
  5617.             document.body.append(themeEditor);
  5618.  
  5619.             setTimeout(() => {
  5620.                 document
  5621.                     .querySelectorAll('.stats-btn__share-btn')[1]
  5622.                     .querySelector('rect')
  5623.                     .remove();
  5624.  
  5625.                 const themeTypeSelect = byId('theme-type-select');
  5626.                 const colorTab = byId('theme_editor_color');
  5627.                 const gradientTab = byId('theme_editor_gradient');
  5628.                 const imageTab = byId('theme_editor_image');
  5629.                 const gradientAngleDiv = byId('theme-editor-gradient_angle');
  5630.  
  5631.                 themeTypeSelect.addEventListener('change', function () {
  5632.                     const selectedOption = themeTypeSelect.value;
  5633.                     switch (selectedOption) {
  5634.                         case 'Static Color':
  5635.                             colorTab.style.display = 'flex';
  5636.                             gradientTab.style.display = 'none';
  5637.                             imageTab.style.display = 'none';
  5638.                             break;
  5639.                         case 'Gradient':
  5640.                             colorTab.style.display = 'none';
  5641.                             gradientTab.style.display = 'flex';
  5642.                             imageTab.style.display = 'none';
  5643.                             break;
  5644.                         case 'Image / Gif':
  5645.                             colorTab.style.display = 'none';
  5646.                             gradientTab.style.display = 'none';
  5647.                             imageTab.style.display = 'flex';
  5648.                             break;
  5649.                         default:
  5650.                             colorTab.style.display = 'flex';
  5651.                             gradientTab.style.display = 'none';
  5652.                             imageTab.style.display = 'none';
  5653.                     }
  5654.                 });
  5655.  
  5656.                 const colorInputs = document.querySelectorAll(
  5657.                     '#theme_editor_color .colorInput'
  5658.                 );
  5659.                 colorInputs.forEach((input) => {
  5660.                     input.addEventListener('input', function () {
  5661.                         const bgColorInput = byId(
  5662.                             'theme-editor-bgcolorinput'
  5663.                         ).value;
  5664.                         const textColorInput = byId(
  5665.                             'theme-editor-colorinput'
  5666.                         ).value;
  5667.  
  5668.                         applyColorTheme(bgColorInput, textColorInput);
  5669.                     });
  5670.                 });
  5671.  
  5672.                 const gradientInputs = document.querySelectorAll(
  5673.                     '#theme_editor_gradient .colorInput'
  5674.                 );
  5675.                 gradientInputs.forEach((input) => {
  5676.                     input.addEventListener('input', function () {
  5677.                         const gColor1 = byId('theme-editor-gcolor1').value;
  5678.                         const gColor2 = byId('theme-editor-g_color').value;
  5679.                         const gTextColor = byId('theme-editor-gcolor2').value;
  5680.                         const gAngle = byId('g_angle').value;
  5681.                         const gradientType = byId('gradient-type').value;
  5682.  
  5683.                         applyGradientTheme(
  5684.                             gColor1,
  5685.                             gColor2,
  5686.                             gTextColor,
  5687.                             gAngle,
  5688.                             gradientType
  5689.                         );
  5690.                     });
  5691.                 });
  5692.  
  5693.                 const imageInputs = document.querySelectorAll(
  5694.                     '#theme_editor_image .colorInput'
  5695.                 );
  5696.                 imageInputs.forEach((input) => {
  5697.                     input.addEventListener('input', function () {
  5698.                         const imageLinkInput = byId(
  5699.                             'theme-editor-imagelink'
  5700.                         ).value;
  5701.                         const textColorImageInput = byId(
  5702.                             'theme-editor-textcolorImage'
  5703.                         ).value;
  5704.  
  5705.                         let img;
  5706.                         if (imageLinkInput === '') {
  5707.                             img = 'https://i.ibb.co/k6hn4v0/Galaxy-Example.png';
  5708.                         } else {
  5709.                             img = imageLinkInput;
  5710.                         }
  5711.                         applyImageTheme(img, textColorImageInput);
  5712.                     });
  5713.                 });
  5714.                 const image_preview = byId('image_preview');
  5715.                 const image_link = byId('theme-editor-imagelink');
  5716.  
  5717.                 let isWriting = false;
  5718.                 let timeoutId;
  5719.  
  5720.                 image_link.addEventListener('input', () => {
  5721.                     if (!isWriting) {
  5722.                         isWriting = true;
  5723.                     } else {
  5724.                         clearTimeout(timeoutId);
  5725.                     }
  5726.  
  5727.                     timeoutId = setTimeout(() => {
  5728.                         const imageLinkInput = image_link.value;
  5729.                         const textColorImageInput = byId(
  5730.                             'theme-editor-textcolorImage'
  5731.                         ).value;
  5732.  
  5733.                         let img;
  5734.                         if (imageLinkInput === '') {
  5735.                             img = 'https://i.ibb.co/k6hn4v0/Galaxy-Example.png';
  5736.                         } else {
  5737.                             img = imageLinkInput;
  5738.                         }
  5739.  
  5740.                         applyImageTheme(img, textColorImageInput);
  5741.                         isWriting = false;
  5742.                     }, 1000);
  5743.                 });
  5744.  
  5745.                 const gradientTypeSelect = byId('gradient-type');
  5746.                 const angleInput = byId('g_angle');
  5747.  
  5748.                 gradientTypeSelect.addEventListener('change', function () {
  5749.                     const selectedType = gradientTypeSelect.value;
  5750.                     gradientAngleDiv.style.display =
  5751.                         selectedType === 'linear' ? 'flex' : 'none';
  5752.  
  5753.                     const gColor1 = byId('theme-editor-gcolor1').value;
  5754.                     const gColor2 = byId('theme-editor-g_color').value;
  5755.                     const gTextColor = byId('theme-editor-gcolor2').value;
  5756.                     const gAngle = byId('g_angle').value;
  5757.  
  5758.                     applyGradientTheme(
  5759.                         gColor1,
  5760.                         gColor2,
  5761.                         gTextColor,
  5762.                         gAngle,
  5763.                         selectedType
  5764.                     );
  5765.                 });
  5766.  
  5767.                 angleInput.addEventListener('input', function () {
  5768.                     const gradient_angle_text = byId('gradient_angle_text');
  5769.                     gradient_angle_text.innerText = `Angle (${angleInput.value}deg): `;
  5770.                     const gColor1 = byId('theme-editor-gcolor1').value;
  5771.                     const gColor2 = byId('theme-editor-g_color').value;
  5772.                     const gTextColor = byId('theme-editor-gcolor2').value;
  5773.                     const gAngle = byId('g_angle').value;
  5774.                     const gradientType = byId('gradient-type').value;
  5775.  
  5776.                     applyGradientTheme(
  5777.                         gColor1,
  5778.                         gColor2,
  5779.                         gTextColor,
  5780.                         gAngle,
  5781.                         gradientType
  5782.                     );
  5783.                 });
  5784.  
  5785.                 function applyColorTheme(bgColor, textColor) {
  5786.                     const previewDivs = document.querySelectorAll(
  5787.                         '#theme_editor_color .themes_preview'
  5788.                     );
  5789.                     previewDivs.forEach((previewDiv) => {
  5790.                         previewDiv.style.backgroundColor = bgColor;
  5791.                         const textSpan = previewDiv.querySelector('span.text');
  5792.                         textSpan.style.color = textColor;
  5793.                     });
  5794.                 }
  5795.  
  5796.                 function applyGradientTheme(
  5797.                 gColor1,
  5798.                  gColor2,
  5799.                  gTextColor,
  5800.                  gAngle,
  5801.                  gradientType
  5802.                 ) {
  5803.                     const previewDivs = document.querySelectorAll(
  5804.                         '#theme_editor_gradient .themes_preview'
  5805.                     );
  5806.                     previewDivs.forEach((previewDiv) => {
  5807.                         const gradient =
  5808.                               gradientType === 'linear'
  5809.                         ? `linear-gradient(${gAngle}deg, ${gColor1}, ${gColor2})`
  5810.                         : `radial-gradient(circle, ${gColor1}, ${gColor2})`;
  5811.                         previewDiv.style.background = gradient;
  5812.                         const textSpan = previewDiv.querySelector('span.text');
  5813.                         textSpan.style.color = gTextColor;
  5814.                     });
  5815.                 }
  5816.  
  5817.                 function applyImageTheme(imageLink, textColor) {
  5818.                     const previewDivs = document.querySelectorAll(
  5819.                         '#theme_editor_image .themes_preview'
  5820.                     );
  5821.                     previewDivs.forEach((previewDiv) => {
  5822.                         previewDiv.style.backgroundImage = `url('${imageLink}')`;
  5823.                         const textSpan = previewDiv.querySelector('span.text');
  5824.                         textSpan.style.color = textColor;
  5825.                     });
  5826.                 }
  5827.  
  5828.                 const createTheme = byId('createTheme');
  5829.                 createTheme.addEventListener('click', () => {
  5830.                     themeEditor.style.display = 'block';
  5831.                 });
  5832.  
  5833.                 const closeThemeEditor = byId('closeThemeEditor');
  5834.                 closeThemeEditor.addEventListener('click', () => {
  5835.                     themeEditor.style.display = 'none';
  5836.                 });
  5837.  
  5838.                 let themesDiv = byId('themes');
  5839.  
  5840.                 const saveTheme = (type) => {
  5841.                     const name = byId(`${type}ThemeName`).value;
  5842.                     if (!name) return;
  5843.  
  5844.                     let background, text;
  5845.                     if (type === 'color') {
  5846.                         background = byId('theme-editor-bgcolorinput').value;
  5847.                         text = byId('theme-editor-colorinput').value;
  5848.                     } else if (type === 'gradient') {
  5849.                         const gColor1 = byId('theme-editor-gcolor1').value;
  5850.                         const gColor2 = byId('theme-editor-g_color').value;
  5851.                         text = byId('theme-editor-gcolor2').value;
  5852.                         const gAngle = byId('g_angle').value;
  5853.                         const gradientType = byId('gradient-type').value;
  5854.                         background = gradientType === 'linear'
  5855.                             ? `linear-gradient(${gAngle}deg, ${gColor1}, ${gColor2})`
  5856.                         : `radial-gradient(circle, ${gColor1}, ${gColor2})`;
  5857.                     } else if (type === 'image') {
  5858.                         background = byId('theme-editor-imagelink').value;
  5859.                         text = byId('theme-editor-textcolorImage').value;
  5860.                         if (!background) return;
  5861.                     }
  5862.  
  5863.                     const theme = { name, background, text };
  5864.                     const themeCard = document.createElement('div');
  5865.                     themeCard.classList.add('theme');
  5866.                     themeCard.innerHTML = `
  5867.                         <div class="themeContent" style="background: ${background.includes('http') ? `url(${theme.preview || background})` : background}; background-size: cover; background-position: center"></div>
  5868.                         <div class="themeName text" style="color: #fff">${name}</div>
  5869.                     `;
  5870.  
  5871.                     themeCard.addEventListener('click', () => toggleTheme(theme));
  5872.                     themeCard.addEventListener('contextmenu', (ev) => {
  5873.                         ev.preventDefault();
  5874.                         if (confirm('Do you want to delete this Theme?')) {
  5875.                             themeCard.remove();
  5876.                             const index = modSettings.themes.custom.findIndex(t => t.name === name);
  5877.                             if (index !== -1) {
  5878.                                 modSettings.themes.custom.splice(index, 1);
  5879.                                 updateStorage();
  5880.                             }
  5881.                         }
  5882.                     });
  5883.  
  5884.                     themesDiv.appendChild(themeCard);
  5885.                     modSettings.themes.custom.push(theme);
  5886.                     updateStorage();
  5887.                     themeEditor.style.display = 'none';
  5888.                     themesDiv.scrollTop = themesDiv.scrollHeight;
  5889.                 };
  5890.  
  5891.                 byId('saveColorTheme').addEventListener('click', () => saveTheme('color'));
  5892.                 byId('saveGradientTheme').addEventListener('click', () => saveTheme('gradient'));
  5893.                 byId('saveImageTheme').addEventListener('click', () => saveTheme('image'));
  5894.             });
  5895.  
  5896.             const b_inner = document.querySelector('.body__inner');
  5897.             let bodyColorElements = b_inner.querySelectorAll(
  5898.                 '.body__inner > :not(.body__inner), #s-skin-select-icon-text'
  5899.             );
  5900.  
  5901.             const toggleColor = (element, background, text) => {
  5902.                 let image = `url("${background}")`;
  5903.                 if (background.includes('http')) {
  5904.                     element.style.background = image;
  5905.                     element.style.backgroundPosition = 'center';
  5906.                     element.style.backgroundSize = 'cover';
  5907.                     element.style.backgroundRepeat = 'no-repeat';
  5908.                 } else {
  5909.                     element.style.background = background;
  5910.                     element.style.backgroundRepeat = 'no-repeat';
  5911.                 }
  5912.                 element.style.color = text;
  5913.             };
  5914.  
  5915.             const openSVG = document.querySelector(
  5916.                 '#clans_and_settings > Button:nth-of-type(2) > svg'
  5917.             );
  5918.             const openSVGPath = openSVG.querySelector('path');
  5919.             openSVG.setAttribute('width', '36');
  5920.             openSVG.setAttribute('height', '36');
  5921.  
  5922.             const applyThemeToElement = (el, theme) => {
  5923.                 if (el.matches('#title')) {
  5924.                     el.style.color = theme.text;
  5925.                 } else {
  5926.                     toggleColor(el, theme.background, theme.text);
  5927.                 }
  5928.                 appliedElements.add(el);
  5929.             };
  5930.  
  5931.             const toggleTheme = (theme) => {
  5932.                 try {
  5933.                     if (checkInterval) clearInterval(checkInterval);
  5934.                     appliedElements.clear();
  5935.  
  5936.                     const applyTheme = () => {
  5937.                         let allApplied = true;
  5938.  
  5939.                         elements.forEach((selector) => {
  5940.                             const elements =
  5941.                                   document.querySelectorAll(selector);
  5942.                             elements.forEach((el) => {
  5943.                                 if (el && !appliedElements.has(el)) {
  5944.                                     applyThemeToElement(el, theme);
  5945.                                     allApplied = false;
  5946.                                 }
  5947.                             });
  5948.                         });
  5949.  
  5950.                         customTextElements.forEach((qs) => {
  5951.                             document.querySelectorAll(qs).forEach((el) => {
  5952.                                 if (!appliedElements.has(el)) {
  5953.                                     el.style.setProperty(
  5954.                                         'color',
  5955.                                         theme.text,
  5956.                                         'important'
  5957.                                     );
  5958.                                     appliedElements.add(el);
  5959.                                     allApplied = false;
  5960.                                 }
  5961.                             });
  5962.                         });
  5963.  
  5964.                         bodyColorElements.forEach((el) => {
  5965.                             if (!appliedElements.has(el)) {
  5966.                                 el.style.color = theme.text;
  5967.                                 appliedElements.add(el);
  5968.                                 allApplied = false;
  5969.                             }
  5970.                         });
  5971.  
  5972.                         if (allApplied) {
  5973.                             clearInterval(checkInterval);
  5974.                             return;
  5975.                         }
  5976.  
  5977.                         const isBright = (color) => {
  5978.                             if (!color.startsWith('#') || color.length !== 7)
  5979.                                 return false;
  5980.                             const r = parseInt(color.slice(1, 3), 16);
  5981.                             const g = parseInt(color.slice(3, 5), 16);
  5982.                             const b = parseInt(color.slice(5, 7), 16);
  5983.                             return r * 0.299 + g * 0.587 + b * 0.114 > 186;
  5984.                         };
  5985.  
  5986.                         openSVGPath.setAttribute(
  5987.                             'fill',
  5988.                             isBright(theme.text) ? theme.text : '#222'
  5989.                         );
  5990.  
  5991.                         modSettings.themes.current = theme.name;
  5992.                         updateStorage();
  5993.                     };
  5994.  
  5995.                     checkInterval = setInterval(applyTheme, 100);
  5996.                 } catch (e) {
  5997.                     console.error(e);
  5998.                 }
  5999.             };
  6000.  
  6001.             const themes = (window.themes = {
  6002.                 defaults: [
  6003.                     {
  6004.                         name: 'Dark',
  6005.                         background: '#151515',
  6006.                         text: '#FFFFFF',
  6007.                     },
  6008.                     {
  6009.                         name: 'White',
  6010.                         background: '#ffffff',
  6011.                         text: '#000000',
  6012.                     },
  6013.                     {
  6014.                         name: 'Transparent',
  6015.                         background: 'rgba(0, 0, 0,0)',
  6016.                         text: '#FFFFFF',
  6017.                     },
  6018.                 ],
  6019.                 orderly: [
  6020.                     {
  6021.                         name: 'THC',
  6022.                         background: 'linear-gradient(160deg, #9BEC7A, #117500)',
  6023.                         text: '#000000',
  6024.                     },
  6025.                     {
  6026.                         name: '4 AM',
  6027.                         background: 'linear-gradient(160deg, #8B0AE1, #111)',
  6028.                         text: '#FFFFFF',
  6029.                     },
  6030.                     {
  6031.                         name: 'OTO',
  6032.                         background: 'linear-gradient(160deg, #A20000, #050505)',
  6033.                         text: '#FFFFFF',
  6034.                     },
  6035.                     {
  6036.                         name: 'Gaming',
  6037.                         background:
  6038.                         'https://i.ibb.co/DwKkQfh/BG-1-lower-quality.jpg',
  6039.                         text: '#FFFFFF',
  6040.                     },
  6041.                     {
  6042.                         name: 'Shapes',
  6043.                         background: 'https://i.ibb.co/h8TmVyM/BG-2.png',
  6044.                         preview:
  6045.                         'https://czrsd.com/static/sigmod/themes/BG-2.jpg',
  6046.                         text: '#FFFFFF',
  6047.                     },
  6048.                     {
  6049.                         name: 'Blue',
  6050.                         background: 'https://i.ibb.co/9yQBfWj/BG-3.png',
  6051.                         preview:
  6052.                         'https://czrsd.com/static/sigmod/themes/BG-3.jpg',
  6053.                         text: '#FFFFFF',
  6054.                     },
  6055.                     {
  6056.                         name: 'Blue - 2',
  6057.                         background: 'https://i.ibb.co/7RJvNCX/BG-4.png',
  6058.                         preview:
  6059.                         'https://czrsd.com/static/sigmod/themes/BG-4.jpg',
  6060.                         text: '#FFFFFF',
  6061.                     },
  6062.                     {
  6063.                         name: 'Purple',
  6064.                         background: 'https://i.ibb.co/vxY15Tv/BG-5.png',
  6065.                         preview:
  6066.                         'https://czrsd.com/static/sigmod/themes/BG-5.jpg',
  6067.                         text: '#FFFFFF',
  6068.                     },
  6069.                     {
  6070.                         name: 'Orange Blue',
  6071.                         background: 'https://i.ibb.co/99nfFBN/BG-6.png',
  6072.                         preview:
  6073.                         'https://czrsd.com/static/sigmod/themes/BG-6.jpg',
  6074.                         text: '#FFFFFF',
  6075.                     },
  6076.                     {
  6077.                         name: 'Gradient',
  6078.                         background: 'https://i.ibb.co/hWMLwLS/BG-7.png',
  6079.                         preview:
  6080.                         'https://czrsd.com/static/sigmod/themes/BG-7.jpg',
  6081.                         text: '#FFFFFF',
  6082.                     },
  6083.                     {
  6084.                         name: 'Sky',
  6085.                         background: 'https://i.ibb.co/P4XqDFw/BG-9.png',
  6086.                         preview:
  6087.                         'https://czrsd.com/static/sigmod/themes/BG-9.jpg',
  6088.                         text: '#000000',
  6089.                     },
  6090.                     {
  6091.                         name: 'Sunset',
  6092.                         background: 'https://i.ibb.co/0BVbYHC/BG-10.png',
  6093.                         preview:
  6094.                         'https://czrsd.com/static/sigmod/themes/BG-10.jpg',
  6095.                         text: '#FFFFFF',
  6096.                     },
  6097.                     {
  6098.                         name: 'Galaxy',
  6099.                         background: 'https://i.ibb.co/MsssDKP/Galaxy.png',
  6100.                         preview:
  6101.                         'https://czrsd.com/static/sigmod/themes/Galaxy.jpg',
  6102.                         text: '#FFFFFF',
  6103.                     },
  6104.                     {
  6105.                         name: 'Planet',
  6106.                         background: 'https://i.ibb.co/KLqWM32/Planet.png',
  6107.                         preview:
  6108.                         'https://czrsd.com/static/sigmod/themes/Planet.jpg',
  6109.                         text: '#FFFFFF',
  6110.                     },
  6111.                     {
  6112.                         name: 'colorful',
  6113.                         background: 'https://i.ibb.co/VqtB3TX/colorful.png',
  6114.                         preview:
  6115.                         'https://czrsd.com/static/sigmod/themes/colorful.jpg',
  6116.                         text: '#FFFFFF',
  6117.                     },
  6118.                     {
  6119.                         name: 'Sunset - 2',
  6120.                         background: 'https://i.ibb.co/TLp2nvv/Sunset.png',
  6121.                         preview:
  6122.                         'https://czrsd.com/static/sigmod/themes/Sunset.jpg',
  6123.                         text: '#FFFFFF',
  6124.                     },
  6125.                     {
  6126.                         name: 'Epic',
  6127.                         background: 'https://i.ibb.co/kcv4tvn/Epic.png',
  6128.                         preview:
  6129.                         'https://czrsd.com/static/sigmod/themes/Epic.jpg',
  6130.                         text: '#FFFFFF',
  6131.                     },
  6132.                     {
  6133.                         name: 'Galaxy - 2',
  6134.                         background: 'https://i.ibb.co/smRs6V0/galaxy.png',
  6135.                         preview:
  6136.                         'https://czrsd.com/static/sigmod/themes/galaxy2.jpg',
  6137.                         text: '#FFFFFF',
  6138.                     },
  6139.                     {
  6140.                         name: 'Cloudy',
  6141.                         background: 'https://i.ibb.co/MCW7Bcd/cloudy.png',
  6142.                         preview:
  6143.                         'https://czrsd.com/static/sigmod/themes/cloudy.jpg',
  6144.                         text: '#000000',
  6145.                     },
  6146.                 ],
  6147.             });
  6148.  
  6149.             function createThemeCard(theme) {
  6150.                 const themeCard = document.createElement('div');
  6151.                 themeCard.classList.add('theme');
  6152.                 let themeBG;
  6153.                 if (theme.background.includes('http')) {
  6154.                     themeBG = `background: url(${
  6155.                     theme.preview || theme.background
  6156.                 })`;
  6157.                 } else {
  6158.                     themeBG = `background: ${theme.background}`;
  6159.                 }
  6160.                 themeCard.innerHTML = `
  6161.                   <div class="themeContent" style="${themeBG}; background-size: cover; background-position: center"></div>
  6162.                   <div class="themeName text" style="color: #fff">${theme.name}</div>
  6163.                 `;
  6164.  
  6165.                 themeCard.addEventListener('click', () => {
  6166.                     toggleTheme(theme);
  6167.                 });
  6168.  
  6169.                 if (modSettings.themes.custom.includes(theme)) {
  6170.                     themeCard.addEventListener(
  6171.                         'contextmenu',
  6172.                         (ev) => {
  6173.                             ev.preventDefault();
  6174.                             if (confirm('Do you want to delete this Theme?')) {
  6175.                                 themeCard.remove();
  6176.                                 const themeIndex =
  6177.                                       modSettings.themes.custom.findIndex(
  6178.                                           (addedTheme) =>
  6179.                                           addedTheme.name === theme.name
  6180.                                       );
  6181.                                 if (themeIndex !== -1) {
  6182.                                     modSettings.themes.custom.splice(
  6183.                                         themeIndex,
  6184.                                         1
  6185.                                     );
  6186.                                     updateStorage();
  6187.                                 }
  6188.                             }
  6189.                         },
  6190.                         false
  6191.                     );
  6192.                 }
  6193.  
  6194.                 return themeCard;
  6195.             }
  6196.  
  6197.             const themesContainer = byId('themes');
  6198.  
  6199.             themes.defaults.forEach((theme) => {
  6200.                 const themeCard = createThemeCard(theme);
  6201.                 themesContainer.append(themeCard);
  6202.             });
  6203.  
  6204.             const orderlyThemes = [
  6205.                 ...themes.orderly,
  6206.                 ...modSettings.themes.custom,
  6207.             ];
  6208.             orderlyThemes.sort((a, b) => a.name.localeCompare(b.name));
  6209.             orderlyThemes.forEach((theme) => {
  6210.                 const themeCard = createThemeCard(theme);
  6211.                 themesContainer.appendChild(themeCard);
  6212.             });
  6213.  
  6214.             const savedTheme = modSettings.themes.current;
  6215.             if (savedTheme) {
  6216.                 let selectedTheme;
  6217.                 selectedTheme = themes.defaults.find(
  6218.                     (theme) => theme.name === savedTheme
  6219.                 );
  6220.                 if (!selectedTheme) {
  6221.                     selectedTheme =
  6222.                         themes.orderly.find(
  6223.                         (theme) => theme.name === savedTheme
  6224.                     ) ||
  6225.                         modSettings.themes.custom.find(
  6226.                         (theme) => theme.name === savedTheme
  6227.                     );
  6228.                 }
  6229.  
  6230.                 if (selectedTheme) {
  6231.                     toggleTheme(selectedTheme);
  6232.                 }
  6233.             }
  6234.  
  6235.             const inputBorderRadius = byId('theme-inputBorderRadius');
  6236.             const menuBorderRadius = byId('theme-menuBorderRadius');
  6237.             const inputBorder = byId('theme-inputBorder');
  6238.  
  6239.             function setCSS(key, value, targets, property) {
  6240.                 modSettings.themes[key] = value;
  6241.                 targets.forEach((target) => {
  6242.                     document
  6243.                         .querySelectorAll(target)
  6244.                         .forEach((el) => (el.style[property] = value));
  6245.                 });
  6246.                 updateStorage();
  6247.             }
  6248.  
  6249.             inputBorderRadius.value = modSettings.themes.inputBorderRadius
  6250.                 ? modSettings.themes.inputBorderRadius.replace('px', '')
  6251.             : '4';
  6252.             menuBorderRadius.value = modSettings.themes.menuBorderRadius
  6253.                 ? modSettings.themes.menuBorderRadius.replace('px', '')
  6254.             : '15';
  6255.             inputBorder.checked = modSettings.themes.inputBorder
  6256.                 ? modSettings.themes.inputBorder === '1px'
  6257.             : '1px';
  6258.  
  6259.             setCSS(
  6260.                 'inputBorderRadius',
  6261.                 `${inputBorderRadius.value}px`,
  6262.                 ['.form-control'],
  6263.                 'borderRadius'
  6264.             );
  6265.             setCSS(
  6266.                 'menuBorderRadius',
  6267.                 `${menuBorderRadius.value}px`,
  6268.                 [...elements, '.text-block'],
  6269.                 'borderRadius'
  6270.             );
  6271.             setCSS(
  6272.                 'inputBorder',
  6273.                 inputBorder.checked ? '1px' : '0px',
  6274.                 ['.form-control'],
  6275.                 'borderWidth'
  6276.             );
  6277.  
  6278.             inputBorderRadius.addEventListener('input', () =>
  6279.                                                setCSS(
  6280.                 'inputBorderRadius',
  6281.                 `${inputBorderRadius.value}px`,
  6282.                 ['.form-control'],
  6283.                 'borderRadius'
  6284.             )
  6285.                                               );
  6286.             menuBorderRadius.addEventListener('input', () =>
  6287.                                               setCSS(
  6288.                 'menuBorderRadius',
  6289.                 `${menuBorderRadius.value}px`,
  6290.                 [...elements, '.text-block'],
  6291.                 'borderRadius'
  6292.             )
  6293.                                              );
  6294.             inputBorder.addEventListener('input', () =>
  6295.                                          setCSS(
  6296.                 'inputBorder',
  6297.                 inputBorder.checked ? '1px' : '0px',
  6298.                 ['.form-control'],
  6299.                 'borderWidth'
  6300.             )
  6301.                                         );
  6302.  
  6303.             const reset_input_radius = document.getElementById('reset_input_radius');
  6304.             const reset_menu_radius = document.getElementById('reset_menu_radius');
  6305.  
  6306.             reset_input_radius.addEventListener('click', () => {
  6307.                 const defaultBorderRadius = 4;
  6308.                 inputBorderRadius.value = defaultBorderRadius;
  6309.                 setCSS(
  6310.                     'inputBorderRadius',
  6311.                     `${defaultBorderRadius}px`,
  6312.                     ['.form-control'],
  6313.                     'borderRadius'
  6314.                 )
  6315.             });
  6316.  
  6317.             reset_menu_radius.addEventListener('click', () => {
  6318.                 const defaultBorderRadius = 15;
  6319.                 menuBorderRadius.value = defaultBorderRadius;
  6320.                 setCSS(
  6321.                     'menuBorderRadius',
  6322.                     `${defaultBorderRadius}px`,
  6323.                     [...elements, '.text-block'],
  6324.                     'borderRadius'
  6325.                 )
  6326.             });
  6327.  
  6328.  
  6329.             const hideDiscordBtns = document.getElementById('hideDiscordBtns');
  6330.             const dclinkdiv = document.getElementById('dclinkdiv');
  6331.  
  6332.             hideDiscordBtns.addEventListener('change', () => {
  6333.                 if (hideDiscordBtns.checked) {
  6334.                     dclinkdiv.classList.add('hidden_full');
  6335.                     modSettings.themes.hideDiscordBtns = true;
  6336.                 } else {
  6337.                     dclinkdiv.classList.remove('hidden_full');
  6338.                     modSettings.themes.hideDiscordBtns = false;
  6339.                 }
  6340.                 updateStorage();
  6341.             });
  6342.  
  6343.             if (modSettings.themes.hideDiscordBtns) {
  6344.                 dclinkdiv.classList.add('hidden_full');
  6345.                 hideDiscordBtns.checked = true;
  6346.             }
  6347.  
  6348.  
  6349.             const hideLangs = document.getElementById('hideLangs');
  6350.             const langsDiv = document.querySelector('.ch-lang');
  6351.  
  6352.             hideLangs.addEventListener('change', () => {
  6353.                 if (hideLangs.checked) {
  6354.                     langsDiv.classList.add('hidden_full');
  6355.                     modSettings.themes.hideLangs = true;
  6356.                 } else {
  6357.                     langsDiv.classList.remove('hidden_full');
  6358.                     modSettings.themes.hideLangs = false;
  6359.                 }
  6360.                 updateStorage();
  6361.             });
  6362.  
  6363.             if (modSettings.themes.hideLangs && langsDiv) {
  6364.                 langsDiv.classList.add('hidden_full');
  6365.                 hideLangs.checked = true;
  6366.             }
  6367.  
  6368.  
  6369.             const popup = byId('shop-popup');
  6370.             const removeShopPopup = byId('removeShopPopup');
  6371.             removeShopPopup.addEventListener('change', () => {
  6372.                 if (removeShopPopup.checked) {
  6373.                     popup.classList.add('hidden_full');
  6374.                     modSettings.settings.removeShopPopup = true;
  6375.                 } else {
  6376.                     popup.classList.remove('hidden_full');
  6377.                     modSettings.settings.removeShopPopup = false;
  6378.                 }
  6379.                 updateStorage();
  6380.             });
  6381.  
  6382.             if (modSettings.settings.removeShopPopup) {
  6383.                 popup.classList.add('hidden_full');
  6384.                 removeShopPopup.checked = true;
  6385.             }
  6386.         },
  6387.  
  6388.         isAuthenticated() {
  6389.             const name = byId('profile-name');
  6390.             if (name && (name !== 'Guest' || name !== 'undefined')) return true;
  6391.             else return false;
  6392.         },
  6393.  
  6394.         chat() {
  6395.             const chatDiv = document.createElement('div');
  6396.             chatDiv.classList.add('modChat');
  6397.             chatDiv.innerHTML = `
  6398.                 <div class="modChat__inner">
  6399.                     <button id="scroll-down-btn" class="modButton">↓</button>
  6400.                     <div class="modchat-chatbuttons">
  6401.                         <button class="chatButton" id="mainchat">Main</button>
  6402.                         <button class="chatButton" id="partychat">Party</button>
  6403.                         <span class="tagText"></span>
  6404.                     </div>
  6405.                     <div id="mod-messages" class="scroll"></div>
  6406.                     <div id="chatInputContainer">
  6407.                         <input type="text" id="chatSendInput" class="chatInput" placeholder="${this.isAuthenticated() ? 'message...' : 'Login to use the chat'}" maxlength="250" minlength="1" ${this.isAuthenticated() ? '' : 'disabled'} />
  6408.                         <button class="chatButton" id="openChatSettings">
  6409.                             <svg width="15" height="15" viewBox="0 0 20 20" fill="#fff" xmlns="http://www.w3.org/2000/svg">
  6410.                                 <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>
  6411.                             </svg>
  6412.                         </button>
  6413.                         <button class="chatButton" id="openEmojiMenu">😎</button>
  6414.                         <button id="sendButton" class="chatButton">
  6415.                             Send
  6416.                             <img src="https://raw.githubusercontent.com/Sigmally/SigMod/main/images/send.svg" width="20" height="20" draggable="false"/>
  6417.                         </button>
  6418.                     </div>
  6419.                 </div>
  6420.             `;
  6421.             document.body.append(chatDiv);
  6422.  
  6423.             const chatContainer = byId('mod-messages');
  6424.             const scrollDownButton = byId('scroll-down-btn');
  6425.  
  6426.             chatContainer.addEventListener('scroll', () => {
  6427.                 if (
  6428.                     chatContainer.scrollHeight - chatContainer.scrollTop >
  6429.                     300
  6430.                 ) {
  6431.                     scrollDownButton.style.display = 'block';
  6432.                 }
  6433.                 if (
  6434.                     chatContainer.scrollHeight - chatContainer.scrollTop <
  6435.                     299 &&
  6436.                     scrollDownButton.style.display === 'block'
  6437.                 ) {
  6438.                     scrollDownButton.style.display = 'none';
  6439.                 }
  6440.             });
  6441.  
  6442.             scrollDownButton.addEventListener('click', () => {
  6443.                 chatContainer.scrollTop = chatContainer.scrollHeight;
  6444.             });
  6445.  
  6446.             const main = byId('mainchat');
  6447.             const party = byId('partychat');
  6448.             main.addEventListener('click', () => {
  6449.                 if (!window.gameSettings.user) {
  6450.                     const chatSendInput = document.querySelector('#chatSendInput');
  6451.                     if (!chatSendInput) return;
  6452.  
  6453.                     chatSendInput.placeholder = 'Login to use the chat';
  6454.                     chatSendInput.disabled = true;
  6455.                 }
  6456.                 if (modSettings.chat.showClientChat) {
  6457.                     byId('mod-messages').innerHTML = '';
  6458.                     modSettings.chat.showClientChat = false;
  6459.                     updateStorage();
  6460.                 }
  6461.             });
  6462.             party.addEventListener('click', () => {
  6463.                 const chatSendInput = document.querySelector('#chatSendInput');
  6464.                 if (chatSendInput) {
  6465.                     chatSendInput.placeholder = 'message...';
  6466.                     chatSendInput.disabled = false;
  6467.                 }
  6468.  
  6469.                 if (!modSettings.chat.showClientChat) {
  6470.                     modSettings.chat.showClientChat = true;
  6471.                     updateStorage();
  6472.                 }
  6473.                 const modMessages = byId('mod-messages');
  6474.                 if (!modSettings.settings.tag) {
  6475.                     modMessages.innerHTML = `
  6476.                         <div class="message">
  6477.                             <span>
  6478.                                 <span style="color: #5a44eb" class="message_name">[SERVER]</span>: You need to be in a tag to use the SigMod party chat.
  6479.                             </span>
  6480.                         </div>
  6481.                     `;
  6482.                 } else {
  6483.                     modMessages.innerHTML = `
  6484.                         <div class="message">
  6485.                             <span>
  6486.                                 <span style="color: #5a44eb" class="message_name">[SERVER]</span>: Welcome to the SigMod party chat!
  6487.                             </span>
  6488.                         </div>
  6489.                     `;
  6490.                 }
  6491.             });
  6492.  
  6493.             if (modSettings.chat.showClientChat) {
  6494.                 const chatSendInput = document.querySelector('#chatSendInput');
  6495.                 if (!chatSendInput) return;
  6496.  
  6497.                 chatSendInput.placeholder = 'message...';
  6498.                 chatSendInput.disabled = false;
  6499.  
  6500.                 setTimeout(() => {
  6501.                     const modMessages = byId('mod-messages');
  6502.                     modMessages.innerHTML = `
  6503.                         <div class="message">
  6504.                             <span>
  6505.                                 <span style="color: #5a44eb" class="message_name">[SERVER]</span>: Welcome to the SigMod party chat!
  6506.                             </span>
  6507.                         </div>
  6508.                     `;
  6509.                 }, 1000);
  6510.             }
  6511.  
  6512.             const text = byId('chatSendInput');
  6513.             const send = byId('sendButton');
  6514.  
  6515.             send.addEventListener('click', () => {
  6516.                 let val = text.value;
  6517.                 if (val === '') return;
  6518.  
  6519.                 if (modSettings.chat.showClientChat) {
  6520.                     if (client?.ws?.readyState !== 1) return;
  6521.                     // party chat message
  6522.                     client.send({
  6523.                         type: 'chat-message',
  6524.                         content: {
  6525.                             message: val,
  6526.                         },
  6527.                     });
  6528.                 } else {
  6529.                     // Sigmally chat message: split text into parts if message is longer than 15 characters
  6530.                     if (val.length > 15) {
  6531.                         const parts = [];
  6532.                         let currentPart = '';
  6533.  
  6534.                         // split the input value into individual words
  6535.                         val.split(' ').forEach((word) => {
  6536.                             if (currentPart.length + word.length + 1 <= 15) {
  6537.                                 currentPart += (currentPart ? ' ' : '') + word;
  6538.                             } else {
  6539.                                 parts.push(currentPart);
  6540.                                 currentPart = word;
  6541.                             }
  6542.                         });
  6543.  
  6544.                         if (currentPart) {
  6545.                             parts.push(currentPart);
  6546.                         }
  6547.  
  6548.                         let index = 0;
  6549.                         const sendPart = () => {
  6550.                             if (index < parts.length) {
  6551.                                 window.sendChat(parts[index]);
  6552.                                 index++;
  6553.                                 setTimeout(sendPart, 1000); // 1s cooldown from sigmally
  6554.                             }
  6555.                         };
  6556.  
  6557.                         sendPart();
  6558.                     } else {
  6559.                         window.sendChat(val);
  6560.                     }
  6561.                 }
  6562.  
  6563.                 text.value = '';
  6564.                 text.blur();
  6565.             });
  6566.  
  6567.             this.chatSettings();
  6568.             this.emojiMenu();
  6569.             this.getBlockedChatData();
  6570.  
  6571.             const chatSettingsContainer = document.querySelector(
  6572.                 '.chatSettingsContainer'
  6573.             );
  6574.             const emojisContainer = document.querySelector('.emojisContainer');
  6575.  
  6576.             byId('openChatSettings').addEventListener('click', () => {
  6577.                 if (chatSettingsContainer.classList.contains('hidden_full')) {
  6578.                     chatSettingsContainer.classList.remove('hidden_full');
  6579.                     emojisContainer.classList.add('hidden_full');
  6580.                 } else {
  6581.                     chatSettingsContainer.classList.add('hidden_full');
  6582.                 }
  6583.             });
  6584.  
  6585.             const scrollUpButton = byId('scroll-down-btn');
  6586.             let focused = false;
  6587.             let typed = false;
  6588.  
  6589.             document.addEventListener('keydown', (e) => {
  6590.                 if (e.key === 'Enter' && text.value.length > 0) {
  6591.                     send.click();
  6592.                     focused = false;
  6593.                     scrollUpButton.click();
  6594.                 } else if (e.key === 'Enter') {
  6595.                     if (
  6596.                         document.activeElement.tagName === 'INPUT' ||
  6597.                         document.activeElement.tagName === 'TEXTAREA'
  6598.                     )
  6599.                         return;
  6600.  
  6601.                     focused ? text.blur() : text.focus();
  6602.                     focused = !focused;
  6603.                 }
  6604.             });
  6605.  
  6606.             text.addEventListener('input', () => {
  6607.                 typed = text.value.length > 1;
  6608.             });
  6609.  
  6610.             text.addEventListener('blur', () => {
  6611.                 focused = false;
  6612.             });
  6613.  
  6614.             text.addEventListener('keydown', (e) => {
  6615.                 const key = e.key.toLowerCase();
  6616.                 if (key === 'w') {
  6617.                     e.stopPropagation();
  6618.                 }
  6619.  
  6620.                 if (key === ' ') {
  6621.                     e.stopPropagation();
  6622.                 }
  6623.             });
  6624.  
  6625.             // switch to compact chat
  6626.             const chatElements = [
  6627.                 '.modChat',
  6628.                 '.emojisContainer',
  6629.                 '.chatSettingsContainer',
  6630.             ];
  6631.  
  6632.             const emojiBtn = byId('openEmojiMenu');
  6633.             const compactChat = byId('compactChat');
  6634.             compactChat.addEventListener('change', () => {
  6635.                 compactChat.checked ? compactMode() : defaultMode();
  6636.             });
  6637.  
  6638.             function compactMode() {
  6639.                 chatElements.forEach((querySelector) => {
  6640.                     const el = document.querySelector(querySelector);
  6641.                     if (el) {
  6642.                         el.classList.add('mod-compact');
  6643.                     }
  6644.                 });
  6645.                 emojiBtn.style.display = 'none';
  6646.  
  6647.                 modSettings.chat.compact = true;
  6648.                 updateStorage();
  6649.             }
  6650.  
  6651.             function defaultMode() {
  6652.                 chatElements.forEach((querySelector) => {
  6653.                     const el = document.querySelector(querySelector);
  6654.                     if (el) {
  6655.                         el.classList.remove('mod-compact');
  6656.                     }
  6657.                 });
  6658.                 emojiBtn.style.display = 'flex';
  6659.  
  6660.                 modSettings.chat.compact = false;
  6661.                 updateStorage();
  6662.             }
  6663.  
  6664.             if (modSettings.chat.compact) compactMode();
  6665.         },
  6666.  
  6667.         spamMessage(name, message) {
  6668.             return (
  6669.                 this.blockedChatData.names.some(n => name.toLowerCase().includes(n.toLowerCase())) ||
  6670.                 this.blockedChatData.messages.some(m => message.toLowerCase().includes(m.toLowerCase()))
  6671.             );
  6672.         },
  6673.  
  6674.         updateChat(data) {
  6675.             const chatContainer = byId('mod-messages');
  6676.             const isScrolledToBottom =
  6677.                   chatContainer.scrollHeight - chatContainer.scrollTop <=
  6678.                   chatContainer.clientHeight + 1;
  6679.             const isNearBottom =
  6680.                   chatContainer.scrollHeight - chatContainer.scrollTop - 200 <=
  6681.                   chatContainer.clientHeight;
  6682.  
  6683.             let { name, message, time = '' } = data;
  6684.             name = noXSS(name);
  6685.             time = data.time !== null ? prettyTime.am_pm(data.time) : '';
  6686.  
  6687.             const color = this.friend_names.has(name)
  6688.             ? this.friends_settings.highlight_color
  6689.             : data.color || '#ffffff';
  6690.             const glow =
  6691.                   this.friend_names.has(name) &&
  6692.                   this.friends_settings.highlight_friends
  6693.             ? `text-shadow: 0 1px 3px ${color}`
  6694.             : '';
  6695.             const id = rdmString(12);
  6696.  
  6697.             const chatMessage = document.createElement('div');
  6698.             chatMessage.classList.add('message');
  6699.             chatMessage.innerHTML = `
  6700.                 <div class="centerX" style="gap: 3px;">
  6701.                     <div class="flex">
  6702.                         <span style="color: ${color};${glow}" class="message_name" id="${id}">${name}</span>
  6703.                         <span>&#58;</span>
  6704.                     </div>
  6705.                     <span class="chatMessage-text"></span>
  6706.                 </div>
  6707.                 <span class="time">${time}</span>
  6708.             `;
  6709.             chatMessage.querySelector('.chatMessage-text').innerHTML = message;
  6710.  
  6711.             chatContainer.append(chatMessage);
  6712.             if (isScrolledToBottom || isNearBottom)
  6713.                 chatContainer.scrollTop = chatContainer.scrollHeight;
  6714.  
  6715.             if (name === this.nick) return;
  6716.  
  6717.             const nameEl = byId(id);
  6718.             nameEl.addEventListener('mousedown', (e) =>
  6719.                                     this.handleContextMenu(e, name)
  6720.                                    );
  6721.             nameEl.addEventListener('contextmenu', (e) => {
  6722.                 e.preventDefault();
  6723.                 e.stopPropagation();
  6724.             });
  6725.  
  6726.             if (++this.renderedMessages > this.maxChatMessages) {
  6727.                 chatContainer.removeChild(chatContainer.firstChild);
  6728.                 this.renderedMessages--;
  6729.             }
  6730.         },
  6731.  
  6732.         handleContextMenu(e, name) {
  6733.             if (this.onContext || e.button !== 2) return;
  6734.  
  6735.             const contextMenu = document.createElement('div');
  6736.             contextMenu.classList.add('chat-context');
  6737.             contextMenu.innerHTML = `
  6738.                 <span>${name}</span>
  6739.                 <button id="muteButton">Mute</button>
  6740.             `;
  6741.  
  6742.             Object.assign(contextMenu.style, {
  6743.                 top: `${e.clientY - 80}px`,
  6744.                 left: `${e.clientX}px`,
  6745.             });
  6746.  
  6747.             document.body.appendChild(contextMenu);
  6748.             this.onContext = true;
  6749.  
  6750.             byId('muteButton').addEventListener('click', () => {
  6751.                 const confirmMsg =
  6752.                       name === 'Spectator'
  6753.                 ? 'Are you sure you want to mute all spectators until you refresh the page?'
  6754.                 : `Are you sure you want to mute '${name}' until you refresh the page?`;
  6755.  
  6756.                 if (confirm(confirmMsg)) {
  6757.                     this.muteUser(name);
  6758.                     contextMenu.remove();
  6759.                 }
  6760.             });
  6761.  
  6762.             document.addEventListener('click', (event) => {
  6763.                 if (!contextMenu.contains(event.target)) {
  6764.                     this.onContext = false;
  6765.                     contextMenu.remove();
  6766.                 }
  6767.             });
  6768.         },
  6769.  
  6770.         muteUser(name) {
  6771.             this.mutedUsers.push(name);
  6772.  
  6773.             const msgNames = document.querySelectorAll('.message_name');
  6774.             msgNames.forEach((msgName) => {
  6775.                 if (msgName.innerHTML == name) {
  6776.                     const msgParent = msgName.closest('.message');
  6777.                     msgParent.remove();
  6778.                 }
  6779.             });
  6780.         },
  6781.  
  6782.         async getGoogleFonts() {
  6783.             const fontFamilies = await (
  6784.                 await fetch(this.appRoutes.fonts)
  6785.             ).json();
  6786.  
  6787.             return fontFamilies;
  6788.         },
  6789.  
  6790.         async getEmojis() {
  6791.             const response = await fetch(
  6792.                 'https://czrsd.com/static/sigmod/emojis.json'
  6793.             );
  6794.             return await response.json();
  6795.         },
  6796.  
  6797.         emojiMenu() {
  6798.             const updateEmojis = (searchTerm = '') => {
  6799.                 const emojisContainer =
  6800.                       document.querySelector('.emojisContainer');
  6801.                 const categoriesContainer =
  6802.                       emojisContainer.querySelector('#categories');
  6803.  
  6804.                 categoriesContainer.innerHTML = '';
  6805.                 window.emojis.forEach((emojiData) => {
  6806.                     const { emoji, description, category, tags } = emojiData;
  6807.                     if (
  6808.                         !searchTerm ||
  6809.                         tags.some((tag) =>
  6810.                                   tag.includes(searchTerm.toLowerCase())
  6811.                                  )
  6812.                     ) {
  6813.                         let categoryId = category
  6814.                         .replace(/\s+/g, '-')
  6815.                         .replace('&', 'and')
  6816.                         .toLowerCase();
  6817.                         let categoryDiv = categoriesContainer.querySelector(
  6818.                             `#${categoryId}`
  6819.                         );
  6820.                         if (!categoryDiv) {
  6821.                             categoryDiv = document.createElement('div');
  6822.                             categoryDiv.id = categoryId;
  6823.                             categoryDiv.classList.add('category');
  6824.                             categoryDiv.innerHTML = `<span>${category}</span><div class="emojiContainer"></div>`;
  6825.                             categoriesContainer.appendChild(categoryDiv);
  6826.                         }
  6827.                         const emojiContainer =
  6828.                               categoryDiv.querySelector('.emojiContainer');
  6829.                         const emojiDiv = document.createElement('div');
  6830.                         emojiDiv.classList.add('emoji');
  6831.                         emojiDiv.innerHTML = emoji;
  6832.                         emojiDiv.title = `${emoji} - ${description}`;
  6833.                         emojiDiv.addEventListener('click', () => {
  6834.                             const chatInput =
  6835.                                   document.querySelector('#chatSendInput');
  6836.                             chatInput.value += emoji;
  6837.                         });
  6838.                         emojiContainer.appendChild(emojiDiv);
  6839.                     }
  6840.                 });
  6841.             };
  6842.  
  6843.             const emojisContainer = document.createElement('div');
  6844.             emojisContainer.classList.add(
  6845.                 'chatAddedContainer',
  6846.                 'emojisContainer',
  6847.                 'hidden_full'
  6848.             );
  6849.             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>`;
  6850.  
  6851.             const chatInput = emojisContainer.querySelector('#searchEmoji');
  6852.             chatInput.addEventListener('input', (event) => {
  6853.                 const searchTerm = event.target.value.toLowerCase();
  6854.                 updateEmojis(searchTerm);
  6855.             });
  6856.  
  6857.             document.body.append(emojisContainer);
  6858.  
  6859.             const chatSettingsContainer = document.querySelector(
  6860.                 '.chatSettingsContainer'
  6861.             );
  6862.  
  6863.             byId('openEmojiMenu').addEventListener('click', () => {
  6864.                 if (!window.emojis) {
  6865.                     this.getEmojis().then((emojis) => {
  6866.                         window.emojis = emojis;
  6867.                         updateEmojis();
  6868.                     });
  6869.                 }
  6870.  
  6871.                 if (emojisContainer.classList.contains('hidden_full')) {
  6872.                     emojisContainer.classList.remove('hidden_full');
  6873.                     chatSettingsContainer.classList.add('hidden_full');
  6874.                 } else {
  6875.                     emojisContainer.classList.add('hidden_full');
  6876.                 }
  6877.             });
  6878.         },
  6879.  
  6880.         chatSettings() {
  6881.             const menu = document.createElement('div');
  6882.             menu.classList.add(
  6883.                 'chatAddedContainer',
  6884.                 'chatSettingsContainer',
  6885.                 'scroll',
  6886.                 'hidden_full'
  6887.             );
  6888.             menu.innerHTML = `
  6889.                 <div class="modInfoPopup" style="display: none">
  6890.                     <p>Send location in chat with keybind</p>
  6891.                 </div>
  6892.                 <div class="scroll">
  6893.                     <div class="csBlock">
  6894.                         <div class="csBlockTitle">
  6895.                             <span>Keybindings</span>
  6896.                         </div>
  6897.                         <div class="csRow">
  6898.                             <div class="csRowName">
  6899.                                 <span>Location</span>
  6900.                                 <span class="infoIcon">
  6901.                                     <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>
  6902.                                 </span>
  6903.                             </div>
  6904.                             <input type="text" name="location" id="modinput8" class="keybinding" value="${
  6905.             modSettings.macros.keys.location || ''
  6906.         }" placeholder="..." maxlength="1" onfocus="this.select()">
  6907.                         </div>
  6908.                         <div class="csRow">
  6909.                             <div class="csRowName">
  6910.                                 <span>Show / Hide</span>
  6911.                             </div>
  6912.                             <input type="text" name="toggle.chat" id="modinput9" class="keybinding" value="${
  6913.             modSettings.macros.keys.toggle.chat || ''
  6914.         }" placeholder="..." maxlength="1" onfocus="this.select()">
  6915.                         </div>
  6916.                     </div>
  6917.                     <div class="csBlock">
  6918.                         <div class="csBlockTitle">
  6919.                             <span>General</span>
  6920.                         </div>
  6921.                         <div class="csRow">
  6922.                             <div class="csRowName">
  6923.                                 <span>Time</span>
  6924.                             </div>
  6925.                             <div class="modCheckbox">
  6926.                               <input id="showChatTime" type="checkbox" checked />
  6927.                               <label class="cbx" for="showChatTime"></label>
  6928.                             </div>
  6929.                         </div>
  6930.                         <div class="csRow">
  6931.                             <div class="csRowName">
  6932.                                 <span>Name colors</span>
  6933.                             </div>
  6934.                             <div class="modCheckbox">
  6935.                               <input id="showNameColors" type="checkbox" checked />
  6936.                               <label class="cbx" for="showNameColors"></label>
  6937.                             </div>
  6938.                         </div>
  6939.                         <div class="csRow">
  6940.                             <div class="csRowName">
  6941.                                 <span>Party / Main</span>
  6942.                             </div>
  6943.                             <div class="modCheckbox">
  6944.                               <input id="showPartyMain" type="checkbox" checked />
  6945.                               <label class="cbx" for="showPartyMain"></label>
  6946.                             </div>
  6947.                         </div>
  6948.                         <div class="csRow">
  6949.                             <div class="csRowName">
  6950.                                 <span>Blur Tag</span>
  6951.                             </div>
  6952.                             <div class="modCheckbox">
  6953.                               <input id="blurTag" type="checkbox" checked />
  6954.                               <label class="cbx" for="blurTag"></label>
  6955.                             </div>
  6956.                         </div>
  6957.                         <div class="flex f-column g-5 centerXY" style="padding: 0 5px">
  6958.                             <div class="csRowName">
  6959.                                 <span>Location text</span>
  6960.                             </div>
  6961.                           <input type="text" id="locationText" placeholder="{pos}..." value="{pos}" class="form-control" />
  6962.                         </div>
  6963.                     </div>
  6964.                     <div class="csBlock">
  6965.                         <div class="csBlockTitle">
  6966.                             <span>Style</span>
  6967.                         </div>
  6968.                         <div class="csRow">
  6969.                             <div class="csRowName">
  6970.                                 <span>Compact chat</span>
  6971.                             </div>
  6972.                             <div class="modCheckbox">
  6973.                               <input id="compactChat" type="checkbox" ${
  6974.             modSettings.chat.compact ? 'checked' : ''
  6975.         } />
  6976.                               <label class="cbx" for="compactChat"></label>
  6977.                             </div>
  6978.                         </div>
  6979.                         <div class="csRow">
  6980.                             <div class="csRowName">
  6981.                                 <span>Text</span>
  6982.                             </div>
  6983. 							<div id="chatTextColor"></div>
  6984.                         </div>
  6985.                         <div class="csRow">
  6986.                             <div class="csRowName">
  6987.                                 <span>Background</span>
  6988.                             </div>
  6989. 							<div id="chatBackground"></div>
  6990.                         </div>
  6991.                         <div class="csRow">
  6992.                             <div class="csRowName">
  6993.                                 <span>Theme</span>
  6994.                             </div>
  6995. 							<div id="chatThemeChanger"></div>
  6996.                         </div>
  6997.                     </div>
  6998.                 </div>
  6999.             `;
  7000.             document.body.append(menu);
  7001.  
  7002.             const infoIcon = document.querySelector('.infoIcon');
  7003.             const modInfoPopup = document.querySelector('.modInfoPopup');
  7004.             let popupOpen = false;
  7005.  
  7006.             infoIcon.addEventListener('click', (event) => {
  7007.                 event.stopPropagation();
  7008.                 modInfoPopup.style.display = popupOpen ? 'none' : 'block';
  7009.                 popupOpen = !popupOpen;
  7010.             });
  7011.  
  7012.             document.addEventListener('click', (event) => {
  7013.                 if (popupOpen && !modInfoPopup.contains(event.target)) {
  7014.                     modInfoPopup.style.display = 'none';
  7015.                     popupOpen = false;
  7016.                 }
  7017.             });
  7018.  
  7019.             const showChatTime = document.querySelector('#showChatTime');
  7020.             const showNameColors = document.querySelector('#showNameColors');
  7021.  
  7022.             showChatTime.addEventListener('change', () => {
  7023.                 const timeElements = document.querySelectorAll('.time');
  7024.                 if (showChatTime.checked) {
  7025.                     modSettings.chat.showTime = true;
  7026.                     updateStorage();
  7027.                 } else {
  7028.                     modSettings.chat.showTime = false;
  7029.                     if (timeElements) {
  7030.                         timeElements.forEach((el) => (el.innerHTML = ''));
  7031.                     }
  7032.                     updateStorage();
  7033.                 }
  7034.             });
  7035.  
  7036.             showNameColors.addEventListener('change', () => {
  7037.                 const message_names =
  7038.                       document.querySelectorAll('.message_name');
  7039.                 if (showNameColors.checked) {
  7040.                     modSettings.chat.showNameColors = true;
  7041.                     updateStorage();
  7042.                 } else {
  7043.                     modSettings.chat.showNameColors = false;
  7044.                     if (message_names) {
  7045.                         message_names.forEach(
  7046.                             (el) => (el.style.color = '#fafafa')
  7047.                         );
  7048.                     }
  7049.                     updateStorage();
  7050.                 }
  7051.             });
  7052.  
  7053.             // remove old rgba val
  7054.             if (modSettings.chat.bgColor.includes('rgba')) {
  7055.                 modSettings.chat.bgColor = RgbaToHex(modSettings.chat.bgColor);
  7056.             }
  7057.  
  7058.             const modChat = document.querySelector('.modChat');
  7059.             modChat.style.background = modSettings.chat.bgColor;
  7060.  
  7061.             const showPartyMain = document.querySelector('#showPartyMain');
  7062.             const chatHeader = document.querySelector('.modchat-chatbuttons');
  7063.  
  7064.             const changeButtonsState = (show) => {
  7065.                 chatHeader.style.display = show ? 'flex' : 'none';
  7066.                 modChat.style.maxHeight = show ? '285px' : '250px';
  7067.                 modChat.style.minHeight = show ? '285px' : '250px';
  7068.                 const modChatInner = document.querySelector('.modChat__inner');
  7069.                 modChatInner.style.maxHeight = show ? '265px' : '230px';
  7070.                 modChatInner.style.minHeight = show ? '265px' : '230px';
  7071.             };
  7072.  
  7073.             showPartyMain.addEventListener('change', () => {
  7074.                 const show = showPartyMain.checked;
  7075.                 modSettings.chat.showChatButtons = show;
  7076.                 changeButtonsState(show);
  7077.                 updateStorage();
  7078.             });
  7079.  
  7080.             showPartyMain.checked = modSettings.chat.showChatButtons;
  7081.             changeButtonsState(modSettings.chat.showChatButtons);
  7082.  
  7083.             setTimeout(() => {
  7084.                 const blurTag = byId('blurTag');
  7085.                 const tagText = document.querySelector('.tagText');
  7086.                 const tagElement = document.querySelector('#tag');
  7087.                 blurTag.addEventListener('change', () => {
  7088.                     const state = blurTag.checked;
  7089.  
  7090.                     state
  7091.                         ? (tagText.classList.add('blur'),
  7092.                            tagElement.classList.add('blur'))
  7093.                     : (tagText.classList.remove('blur'),
  7094.                        tagElement.classList.remove('blur'));
  7095.                     modSettings.chat.blurTag = state;
  7096.                     updateStorage();
  7097.                 });
  7098.                 blurTag.checked = modSettings.chat.blurTag;
  7099.                 if (modSettings.chat.blurTag) {
  7100.                     tagText.classList.add('blur');
  7101.                     tagElement.classList.add('blur');
  7102.                 }
  7103.             });
  7104.  
  7105.             const locationText = byId('locationText');
  7106.             locationText.addEventListener('input', (e) => {
  7107.                 e.stopPropagation();
  7108.                 modSettings.chat.locationText = locationText.value;
  7109.             });
  7110.             locationText.value = modSettings.chat.locationText || '{pos}';
  7111.         },
  7112.  
  7113.         toggleChat() {
  7114.             const modChat = document.querySelector('.modChat');
  7115.             const modChatAdded = document.querySelectorAll(
  7116.                 '.chatAddedContainer'
  7117.             );
  7118.  
  7119.             const isModChatHidden =
  7120.                   modChat.style.display === 'none' ||
  7121.                   getComputedStyle(modChat).display === 'none';
  7122.  
  7123.             if (isModChatHidden) {
  7124.                 modChat.style.opacity = 0;
  7125.                 modChat.style.display = 'flex';
  7126.  
  7127.                 setTimeout(() => {
  7128.                     modChat.style.opacity = 1;
  7129.                 }, 10);
  7130.             } else {
  7131.                 modChat.style.opacity = 0;
  7132.                 modChatAdded.forEach((container) =>
  7133.                                      container.classList.add('hidden_full')
  7134.                                     );
  7135.  
  7136.                 setTimeout(() => {
  7137.                     modChat.style.display = 'none';
  7138.                 }, 300);
  7139.             }
  7140.         },
  7141.  
  7142.         smallMods() {
  7143.             const modAlert_overlay = document.createElement('div');
  7144.             modAlert_overlay.classList.add('alert_overlay');
  7145.             modAlert_overlay.id = 'modAlert_overlay';
  7146.             document.body.append(modAlert_overlay);
  7147.  
  7148.             const autoRespawn = byId('autoRespawn');
  7149.             if (modSettings.settings.autoRespawn) {
  7150.                 autoRespawn.checked = true;
  7151.             }
  7152.  
  7153.             autoRespawn.addEventListener('change', () => {
  7154.                 modSettings.settings.autoRespawn = autoRespawn.checked;
  7155.                 updateStorage();
  7156.             });
  7157.  
  7158.             const auto = byId('autoClaimCoins');
  7159.             auto.addEventListener('change', () => {
  7160.                 const checked = auto.checked;
  7161.                 modSettings.settings.autoClaimCoins = !!checked;
  7162.                 updateStorage();
  7163.             });
  7164.             if (modSettings.settings.autoClaimCoins) {
  7165.                 auto.checked = true;
  7166.             }
  7167.  
  7168.             const showChallenges = byId('showChallenges');
  7169.             showChallenges.addEventListener('change', () => {
  7170.                 if (showChallenges.checked) {
  7171.                     modSettings.showChallenges = true;
  7172.                 } else {
  7173.                     modSettings.showChallenges = false;
  7174.                 }
  7175.                 updateStorage();
  7176.             });
  7177.             if (modSettings.showChallenges) {
  7178.                 auto.checked = true;
  7179.             }
  7180.  
  7181.             const gameTitle = byId('title');
  7182.  
  7183.             const newTitle = document.createElement('div');
  7184.             newTitle.classList.add('sigmod-title');
  7185.             newTitle.innerHTML = `
  7186.                <h1 id="title">Sigmally</h1>
  7187.                <span id="bycursed">Mod by <a href="https://www.youtube.com/@sigmallyCursed/" target="_blank">Cursed</a></span>
  7188.             `;
  7189.             gameTitle.replaceWith(newTitle);
  7190.  
  7191.             const nickName = byId('nick');
  7192.             nickName.maxLength = 50;
  7193.             nickName.type = 'text';
  7194.  
  7195.             function updNick() {
  7196.                 const nick = nickName.value;
  7197.                 mods.nick = nick;
  7198.                 const welcome = byId('welcomeUser');
  7199.                 if (welcome) {
  7200.                     welcome.innerHTML = `Welcome ${
  7201.                     mods.nick || 'Unnamed'
  7202.                 }, to the SigMod Client!`;
  7203.                 }
  7204.             }
  7205.  
  7206.             nickName.addEventListener('input', () => {
  7207.                 updNick();
  7208.             });
  7209.  
  7210.             updNick();
  7211.  
  7212.             // Better grammar in the descriptions of the challenges
  7213.             setTimeout(() => {
  7214.                 window.shopLocales.challenge_tab.tasks = {
  7215.                     eaten: 'Eat %n food in a game.',
  7216.                     xp: 'Get %n XP in a game.',
  7217.                     alive: 'Stay alive for %n minutes in a game.',
  7218.                     pos: 'Reach top %n on leaderboard.',
  7219.                 };
  7220.             }, 1000);
  7221.  
  7222.             const topusersInner = document.querySelector('.top-users__inner');
  7223.             topusersInner.classList.add('scroll');
  7224.             topusersInner.style.border = 'none';
  7225.  
  7226.             byId('signOutBtn').addEventListener('click', () => {
  7227.                 window.gameSettings.user = null;
  7228.             });
  7229.  
  7230.             const mode = byId('gamemode');
  7231.             mode.addEventListener('change', () => {
  7232.                 client.send({
  7233.                     type: 'server-changed',
  7234.                     content: getGameMode(),
  7235.                 });
  7236.  
  7237.                 window.gameSettings.isPlaying = false;
  7238.  
  7239.                 const modMessages = document.querySelector('#mod-messages');
  7240.                 if (modMessages) {
  7241.                     modMessages.innerHTML = '';
  7242.                 }
  7243.             });
  7244.  
  7245.             // redirect to owned skins instead of free skins
  7246.             const ot = Element.prototype.openTab;
  7247.             Element.prototype.openTab = function (tab) {
  7248.                 if (!tab === 'skins') return;
  7249.  
  7250.                 setTimeout(() => {
  7251.                     Element.prototype.changeTab('owned');
  7252.                 }, 100);
  7253.  
  7254.                 ot.apply(this, arguments);
  7255.             };
  7256.  
  7257.             document.addEventListener('mousemove', (e) => {
  7258.                 this.mouseX = e.clientX + window.pageXOffset;
  7259.                 this.mouseY = e.clientY + window.pageYOffset;
  7260.  
  7261.                 const mouseTracker = document.querySelector('.mouseTracker');
  7262.                 if (!mouseTracker) return;
  7263.  
  7264.                 mouseTracker.innerText = `X: ${this.mouseX}; Y: ${this.mouseY}`;
  7265.             });
  7266.  
  7267.             if (location.search.includes('password')) {
  7268.                 const passwordField = byId('password');
  7269.                 if (passwordField) passwordField.style.display = 'none';
  7270.  
  7271.                 const password =
  7272.                       new URLSearchParams(location.search)
  7273.                 .get('password')
  7274.                 ?.split('/')[0] || '';
  7275.                 passwordField.value = password; // sigfixes should know the password when multiboxing
  7276.  
  7277.                 if (window.sigfix) return;
  7278.  
  7279.                 const playBtn = byId('play-btn');
  7280.                 playBtn.addEventListener('click', (e) => {
  7281.                     const waitForConnection = () =>
  7282.                     new Promise((res) => {
  7283.                         if (client?.ws?.readyState === 1) return res(null);
  7284.                         const i = setInterval(
  7285.                             () =>
  7286.                             client?.ws?.readyState === 1 &&
  7287.                             (clearInterval(i), res(null)),
  7288.                             50
  7289.                         );
  7290.                     });
  7291.  
  7292.                     waitForConnection().then(async () => {
  7293.                         await wait(500);
  7294.                         mods.sendPlay(password);
  7295.  
  7296.                         const interval = setInterval(() => {
  7297.                             const errormodal = byId('errormodal');
  7298.                             if (errormodal?.style.display !== 'none')
  7299.                                 errormodal.style.display = 'none';
  7300.                         });
  7301.  
  7302.                         setTimeout(() => clearInterval(interval), 1000);
  7303.                     });
  7304.                 });
  7305.             }
  7306.         },
  7307.  
  7308.         removeStorage(storage) {
  7309.             localStorage.removeItem(storage);
  7310.         },
  7311.  
  7312.         credits() {
  7313.             console.log(
  7314.                 `%c
  7315. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7316. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎░█▀▀▀█ ▀█▀ ░█▀▀█ ░█▀▄▀█ ░█▀▀▀█ ░█▀▀▄ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7317. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎─▀▀▀▄▄ ░█─ ░█─▄▄ ░█░█░█ ░█──░█ ░█─░█ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ V${version} ‎ ‎ ‎ ‎
  7318. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎░█▄▄▄█ ▄█▄ ░█▄▄█ ░█──░█ ░█▄▄▄█ ░█▄▄▀ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7319. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7320. ‎ ‎ ‎ ██████╗░██╗░░░██╗  ░█████╗░██╗░░░██╗██████╗░░██████╗███████╗██████╗░ ‎ ‎ ‎
  7321. ‎ ‎ ‎ ██╔══██╗╚██╗░██╔╝  ██╔══██╗██║░░░██║██╔══██╗██╔════╝██╔════╝██╔══██╗ ‎ ‎ ‎
  7322. ‎ ‎ ‎ ██████╦╝░╚████╔╝░  ██║░░╚═╝██║░░░██║██████╔╝╚█████╗░█████╗░░██║░░██║ ‎ ‎ ‎
  7323. ‎ ‎ ‎ ██╔══██╗░░╚██╔╝░░  ██║░░██╗██║░░░██║██╔══██╗░╚═══██╗██╔══╝░░██║░░██║ ‎ ‎ ‎
  7324. ‎ ‎ ‎ ██████╦╝░░░██║░░░  ╚█████╔╝╚██████╔╝██║░░██║██████╔╝███████╗██████╔╝ ‎ ‎ ‎
  7325. ‎ ‎ ‎ ╚═════╝░░░░╚═╝░░░  ░╚════╝░░╚═════╝░╚═╝░░╚═╝╚═════╝░╚══════╝╚═════╝░ ‎ ‎ ‎
  7326. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
  7327. `,
  7328.                 'background-color: black; color: green'
  7329.             );
  7330.         },
  7331.  
  7332.         handleAlert(data) {
  7333.             const { title, description, enabled, password } = data;
  7334.  
  7335.             if (location.pathname.includes('tournament') || client.updateAvailable) return;
  7336.  
  7337.             const hideAlert = Number(localStorage.getItem('hide-alert'));
  7338.             // Don't show alert if it has been closed the past 3 hours
  7339.             if (!enabled || (hideAlert && (Date.now() - hideAlert < 3 * 60 * 60 * 1000))) {
  7340.                 byId('scrim_alert')?.remove();
  7341.                 return;
  7342.             }
  7343.  
  7344.             localStorage.removeItem('hide-alert');
  7345.  
  7346.             const modAlert = document.createElement('div');
  7347.             modAlert.id = 'scrim_alert';
  7348.             modAlert.classList.add('modAlert');
  7349.             modAlert.innerHTML = `
  7350.                 <div class="flex justify-sb">
  7351.                     <strong>${title}</strong>
  7352.                     <button class="modButton" style="width: 35px;" id="close_scrim_alert">X</button>
  7353.                 </div>
  7354.                 <span>${description}</span>
  7355.                 <div class="flex" style="align-items: center; gap: 5px;">
  7356.                     <button id="join" class="modButton" style="width: 100%">Join</button>
  7357.                 </div>
  7358.             `;
  7359.             document.body.append(modAlert);
  7360.  
  7361.             const observer = new MutationObserver(() => {
  7362.                 modAlert.style.display = menuClosed() ? 'none' : 'flex';
  7363.             });
  7364.  
  7365.             observer.observe(document.body, {
  7366.                 attributes: true,
  7367.                 childList: true,
  7368.                 subtree: true,
  7369.             });
  7370.  
  7371.             const joinButton = byId('join');
  7372.             joinButton.addEventListener('click', () => {
  7373.                 location.href = `https://one.sigmally.com/tournament?password=${password}`;
  7374.             });
  7375.  
  7376.             const close = byId('close_scrim_alert');
  7377.             close.addEventListener('click', () => {
  7378.                 modAlert.remove();
  7379.                 // make it not that annoying
  7380.                 localStorage.setItem('hide-alert', Date.now());
  7381.             });
  7382.         },
  7383.  
  7384.         saveNames() {
  7385.             let savedNames = modSettings.settings.savedNames;
  7386.             let savedNamesOutput = byId('savedNames');
  7387.             let saveNameBtn = byId('saveName');
  7388.             let saveNameInput = byId('saveNameValue');
  7389.  
  7390.             const createNameDiv = (name) => {
  7391.                 let nameDiv = document.createElement('div');
  7392.                 nameDiv.classList.add('NameDiv');
  7393.  
  7394.                 let nameLabel = document.createElement('label');
  7395.                 nameLabel.classList.add('NameLabel');
  7396.                 nameLabel.innerText = name;
  7397.  
  7398.                 let delName = document.createElement('button');
  7399.                 delName.innerText = 'X';
  7400.                 delName.classList.add('delName');
  7401.  
  7402.                 nameDiv.addEventListener('click', () => {
  7403.                     const name = nameLabel.innerText;
  7404.                     navigator.clipboard.writeText(name).then(() => {
  7405.                         this.modAlert(
  7406.                             `Added the name '${name}' to your clipboard!`,
  7407.                             'success'
  7408.                         );
  7409.                     });
  7410.                 });
  7411.  
  7412.                 delName.addEventListener('click', () => {
  7413.                     if (
  7414.                         confirm(
  7415.                             "Are you sure you want to delete the name '" +
  7416.                             nameLabel.innerText +
  7417.                             "'?"
  7418.                         )
  7419.                     ) {
  7420.                         nameDiv.remove();
  7421.                         savedNames = savedNames.filter(
  7422.                             (n) => n !== nameLabel.innerText
  7423.                         );
  7424.                         modSettings.settings.savedNames = savedNames;
  7425.                         updateStorage();
  7426.                     }
  7427.                 });
  7428.  
  7429.                 nameDiv.appendChild(nameLabel);
  7430.                 nameDiv.appendChild(delName);
  7431.                 return nameDiv;
  7432.             };
  7433.  
  7434.             saveNameBtn.addEventListener('click', () => {
  7435.                 if (saveNameInput.value === '') return;
  7436.  
  7437.                 setTimeout(() => {
  7438.                     saveNameInput.value = '';
  7439.                 }, 10);
  7440.  
  7441.                 if (savedNames.includes(saveNameInput.value)) {
  7442.                     return;
  7443.                 }
  7444.  
  7445.                 let nameDiv = createNameDiv(saveNameInput.value);
  7446.                 savedNamesOutput.appendChild(nameDiv);
  7447.  
  7448.                 savedNames.push(saveNameInput.value);
  7449.                 modSettings.settings.savedNames = savedNames;
  7450.                 updateStorage();
  7451.             });
  7452.  
  7453.             if (savedNames.length > 0) {
  7454.                 savedNames.forEach((name) => {
  7455.                     let nameDiv = createNameDiv(name);
  7456.                     savedNamesOutput.appendChild(nameDiv);
  7457.                 });
  7458.             }
  7459.         },
  7460.  
  7461.         initStats() {
  7462.             // initialize player stats
  7463.             const statElements = [
  7464.                 'stat-time-played',
  7465.                 'stat-highest-mass',
  7466.                 'stat-total-deaths',
  7467.                 'stat-total-mass',
  7468.             ];
  7469.             this.storage = localStorage.getItem('game-stats');
  7470.  
  7471.             if (!this.storage) {
  7472.                 this.storage = {
  7473.                     'time-played': 0, // seconds
  7474.                     'highest-mass': 0,
  7475.                     'total-deaths': 0,
  7476.                     'total-mass': 0,
  7477.                 };
  7478.                 localStorage.setItem(
  7479.                     'game-stats',
  7480.                     JSON.stringify(this.storage)
  7481.                 );
  7482.             } else {
  7483.                 this.storage = JSON.parse(this.storage);
  7484.             }
  7485.  
  7486.             statElements.forEach((rawStat) => {
  7487.                 const stat = rawStat.replace('stat-', '');
  7488.                 const value = this.storage[stat];
  7489.                 this.updateStatElm(rawStat, value);
  7490.             });
  7491.  
  7492.             this.session.bind(this)();
  7493.         },
  7494.  
  7495.         updateStat(key, value) {
  7496.             this.storage[key] = value;
  7497.             localStorage.setItem('game-stats', JSON.stringify(this.storage));
  7498.             this.updateStatElm(key, value);
  7499.         },
  7500.  
  7501.         updateStatElm(stat, value) {
  7502.             const element = byId(stat);
  7503.  
  7504.             if (element) {
  7505.                 if (stat === 'stat-time-played') {
  7506.                     const hours = Math.floor(value / 3600);
  7507.                     const minutes = Math.floor((value % 3600) / 60);
  7508.                     const formattedTime =
  7509.                           hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
  7510.                     element.innerHTML = formattedTime;
  7511.                 } else {
  7512.                     const formattedValue =
  7513.                           stat === 'stat-highest-mass' ||
  7514.                           stat === 'stat-total-mass'
  7515.                     ? value > 999
  7516.                     ? `${(value / 1000).toFixed(1)}k`
  7517.                     : value.toString()
  7518.                     : value.toString();
  7519.                     element.innerHTML = formattedValue;
  7520.                 }
  7521.             }
  7522.         },
  7523.  
  7524.         session() {
  7525.             let playingInterval;
  7526.             let minPlaying = 0;
  7527.             let isPlaying = window.gameSettings.isPlaying;
  7528.  
  7529.             const playBtn = byId('play-btn');
  7530.             let a = null;
  7531.  
  7532.             playBtn.addEventListener('click', async () => {
  7533.                 if (isPlaying) return;
  7534.  
  7535.                 while (!window.gameSettings.isPlaying) {
  7536.                     await new Promise((resolve) => setTimeout(resolve, 200));
  7537.                 }
  7538.  
  7539.                 isPlaying = true;
  7540.                 let timer = null;
  7541.  
  7542.                 if (modSettings.playTimer) {
  7543.                     timer = document.createElement('span');
  7544.                     timer.classList.add('playTimer');
  7545.                     timer.innerText = '0m0s played';
  7546.                     document.body.append(timer);
  7547.                 }
  7548.  
  7549.                 // mouse tracker in session method so it's only visible when playing
  7550.                 if (modSettings.mouseTracker) {
  7551.                     const mouse = document.createElement('span');
  7552.                     mouse.classList.add('mouseTracker');
  7553.                     mouse.innerText = 'X: 0; Y: 0';
  7554.                     document.body.append(mouse);
  7555.  
  7556.                     if (!modSettings.playTimer) {
  7557.                         mouse.style.top = '128px';
  7558.                     }
  7559.                 }
  7560.  
  7561.                 let count = 0;
  7562.                 playingInterval = setInterval(() => {
  7563.                     count++;
  7564.                     this.storage['time-played']++;
  7565.                     if (count % 60 === 0) {
  7566.                         minPlaying++;
  7567.                     }
  7568.                     this.updateStat('time-played', this.storage['time-played']);
  7569.  
  7570.                     if (modSettings.playTimer) {
  7571.                         this.updateTimeStat(timer, count);
  7572.                     }
  7573.                 }, 1000);
  7574.             });
  7575.  
  7576.             setInterval(() => {
  7577.                 if (menuClosed() && byId('overlays').style.display !== 'none') {
  7578.                     byId('overlays').style.display = 'none';
  7579.                 }
  7580.  
  7581.                 if (isDead() && !dead) {
  7582.                     clearInterval(playingInterval);
  7583.                     dead = true;
  7584.  
  7585.                     const playTimer = document.querySelector('.playTimer');
  7586.                     if (playTimer) playTimer.remove();
  7587.  
  7588.                     const mouseTracker =
  7589.                           document.querySelector('.mouseTracker');
  7590.                     if (mouseTracker) mouseTracker.remove();
  7591.  
  7592.                     const score = parseFloat(byId('highest_mass').innerText);
  7593.                     const highest = this.storage['highest-mass'];
  7594.  
  7595.                     if (score > highest) {
  7596.                         this.storage['highest-mass'] = score;
  7597.                         this.updateStat(
  7598.                             'highest-mass',
  7599.                             this.storage['highest-mass']
  7600.                         );
  7601.                     }
  7602.  
  7603.                     this.storage['total-deaths']++;
  7604.                     this.updateStat(
  7605.                         'total-deaths',
  7606.                         this.storage['total-deaths']
  7607.                     );
  7608.  
  7609.                     this.storage['total-mass'] += score;
  7610.                     this.updateStat('total-mass', this.storage['total-mass']);
  7611.                     isPlaying = window.gameSettings.isPlaying = false;
  7612.  
  7613.                     if (this.lastOneStanding) {
  7614.                         client.send({
  7615.                             type: 'result',
  7616.                             content: null,
  7617.                         });
  7618.                         playBtn.disabled = true;
  7619.                     }
  7620.  
  7621.                     if (modSettings.showChallenges && window.gameSettings.user)
  7622.                         this.showChallenges();
  7623.                 } else if (!isDead()) {
  7624.                     dead = false;
  7625.                     const challengesDeathscreen = document.querySelector(
  7626.                         '.challenges_deathscreen'
  7627.                     );
  7628.                     if (challengesDeathscreen) challengesDeathscreen.remove();
  7629.                 }
  7630.             });
  7631.         },
  7632.         updateTimeStat(el, seconds) {
  7633.             const minutes = Math.floor(seconds / 60);
  7634.             const remainingSeconds = seconds % 60;
  7635.             const timeString = `${minutes}m${remainingSeconds}s`;
  7636.  
  7637.             el.innerText = `${timeString} played`;
  7638.         },
  7639.  
  7640.         async showChallenges() {
  7641.             const challengeData = await (
  7642.                 await fetch(
  7643.                     `https://sigmally.com/api/user/challenge/${window.gameSettings.user.email}`
  7644.                 )
  7645.             ).json();
  7646.  
  7647.             if (challengeData.status !== 'success') return;
  7648.  
  7649.             const shopLocales = window.shopLocales;
  7650.             let challengesCompleted = 0;
  7651.  
  7652.             const allChallenges = challengeData.data;
  7653.             allChallenges.forEach(({ status }) => {
  7654.                 if (status) challengesCompleted++;
  7655.             });
  7656.  
  7657.             let challenges;
  7658.             if (challengesCompleted === allChallenges.length) {
  7659.                 challenges = `<div class="challenge-row" style="justify-content: center;">All challenges completed.</div>`;
  7660.             } else {
  7661.                 challenges = allChallenges
  7662.                     .filter(({ status }) => !status)
  7663.                     .map(({ task, best, status, ready, goal }) => {
  7664.                     const desc = shopLocales.challenge_tab.tasks[
  7665.                         task
  7666.                     ].replace('%n', task === 'alive' ? goal / 60 : goal);
  7667.                     const btn = ready
  7668.                     ? `<button class="challenge-collect-secondary" onclick="this.challenge('${task}', ${status})">${shopLocales.challenge_tab.collect}</button>`
  7669.                     : `<div class="challenge-best-secondary">${
  7670.                     shopLocales.challenge_tab.result
  7671.                     }${Math.round(best)}${
  7672.                     task === 'alive' ? 's' : ''
  7673.                     }</div>`;
  7674.                     return `
  7675.                         <div class="challenge-row">
  7676.                           <div class="challenge-desc">${desc}</div>
  7677.                           ${btn}
  7678.                         </div>`;
  7679.                 })
  7680.                     .join('');
  7681.             }
  7682.  
  7683.             const modal = document.createElement('div');
  7684.             modal.classList.add('challenges_deathscreen');
  7685.             modal.innerHTML = `
  7686.                 <span class="challenges-title">Daily challenges</span>
  7687.                 <div class="challenges-col">${challenges}</div>
  7688.                 <span class="centerXY new-challenges">New challenges in 0h 0m 0s</span>
  7689.             `;
  7690.  
  7691.             const toggleColor = (element, background, text) => {
  7692.                 let image = `url("${background}")`;
  7693.                 if (background.includes('http')) {
  7694.                     element.style.background = image;
  7695.                     element.style.backgroundPosition = 'center';
  7696.                     element.style.backgroundSize = 'cover';
  7697.                     element.style.backgroundRepeat = 'no-repeat';
  7698.                 } else {
  7699.                     element.style.background = background;
  7700.                     element.style.backgroundRepeat = 'no-repeat';
  7701.                 }
  7702.                 element.style.color = text;
  7703.             };
  7704.  
  7705.             if (modSettings.themes.current !== 'Dark') {
  7706.                 let selectedTheme;
  7707.                 selectedTheme =
  7708.                     window.themes.defaults.find(
  7709.                     (theme) => theme.name === modSettings.themes.current
  7710.                 ) ||
  7711.                     modSettings.themes.custom.find(
  7712.                     (theme) => theme.name === modSettings.themes.current
  7713.                 ) ||
  7714.                     null;
  7715.                 if (!selectedTheme) {
  7716.                     selectedTheme =
  7717.                         window.themes.orderly.find(
  7718.                         (theme) => theme.name === modSettings.themes.current
  7719.                     ) ||
  7720.                         modSettings.themes.custom.find(
  7721.                         (theme) => theme.name === modSettings.themes.current
  7722.                     );
  7723.                 }
  7724.  
  7725.                 if (selectedTheme) {
  7726.                     toggleColor(
  7727.                         modal,
  7728.                         selectedTheme.background,
  7729.                         selectedTheme.text
  7730.                     );
  7731.                 }
  7732.             }
  7733.  
  7734.             document
  7735.                 .querySelector('.menu-wrapper--stats-mode')
  7736.                 .insertAdjacentElement('afterbegin', modal);
  7737.  
  7738.             if (challengesCompleted < allChallenges.length) {
  7739.                 document
  7740.                     .querySelectorAll('.challenge-collect-secondary')
  7741.                     .forEach((btn) => {
  7742.                     btn.addEventListener('click', () => {
  7743.                         const parentChallengeRow =
  7744.                               btn.closest('.challenge-row');
  7745.                         if (parentChallengeRow) {
  7746.                             setTimeout(() => {
  7747.                                 parentChallengeRow.remove();
  7748.                             }, 500);
  7749.                         }
  7750.                     });
  7751.                 });
  7752.             }
  7753.  
  7754.             this.createDayTimer();
  7755.         },
  7756.  
  7757.         timeToString(timeLeft) {
  7758.             const string = new Date(timeLeft).toISOString().slice(11, 19);
  7759.             const [hours, minutes, seconds] = string.split(':');
  7760.  
  7761.             return `${hours}h ${minutes}m ${seconds}s`;
  7762.         },
  7763.         toISODate: (date) => {
  7764.             const withTime = date ? new Date(date) : new Date();
  7765.             const [withoutTime] = withTime.toISOString().split('T');
  7766.             return withoutTime;
  7767.         },
  7768.         createDayTimer() {
  7769.             const oneDay = 1000 * 60 * 60 * 24;
  7770.             const getTime = () => {
  7771.                 const today = this.toISODate();
  7772.                 const from = new Date(today).getTime();
  7773.                 const to = from + oneDay;
  7774.  
  7775.                 const distance = to - Date.now();
  7776.                 const time = this.timeToString(distance);
  7777.                 return time;
  7778.             };
  7779.  
  7780.             const children = document.querySelector('.new-challenges');
  7781.             if (children) {
  7782.                 children.innerHTML = `New challenges in ${getTime()}`;
  7783.             }
  7784.  
  7785.             this.dayTimer = setInterval(() => {
  7786.                 const today = this.toISODate();
  7787.                 const from = new Date(today).getTime();
  7788.                 const to = from + oneDay;
  7789.  
  7790.                 const distance = to - Date.now();
  7791.                 const time = this.timeToString(distance);
  7792.  
  7793.                 const children = document.querySelector('.new-challenges');
  7794.                 if (!children || distance < 1000 || !isDead()) {
  7795.                     clearInterval(this.dayTimer);
  7796.                     return;
  7797.                 }
  7798.                 children.innerHTML = `New challenges in ${getTime()}`;
  7799.             }, 1000);
  7800.         },
  7801.  
  7802.         macros() {
  7803.             let that = this;
  7804.             const KEY_SPLIT = this.splitKey;
  7805.             let ff = null;
  7806.             let keydown = false;
  7807.             let open = false;
  7808.             const canvas = byId('canvas');
  7809.             const mod_menu = document.querySelector('.mod_menu');
  7810.  
  7811.             const freezeType = byId('freezeType');
  7812.             let freezeKeyPressed = false;
  7813.             let freezeMouseClicked = false;
  7814.             let freezeOverlay = null;
  7815.  
  7816.             let vOverlay = null;
  7817.             let vLocked = false;
  7818.             let activeVLine = false;
  7819.  
  7820.             let fixedOverlay = null;
  7821.             let fixedLocked = false;
  7822.             let activeFixedLine = false;
  7823.  
  7824.             /* intervals */
  7825.  
  7826.             // Respawn interval
  7827.             setInterval(() => {
  7828.                 if (
  7829.                     modSettings.settings.autoRespawn &&
  7830.                     this.respawnTime &&
  7831.                     Date.now() - this.respawnTime >= this.respawnCooldown
  7832.                 ) {
  7833.                     this.respawn();
  7834.                 }
  7835.             });
  7836.  
  7837.             // mouse fast feed interval
  7838.             setInterval(() => {
  7839.                 if (dead || !menuClosed() || !this.mouseDown) return;
  7840.                 keypress('w', 'KeyW');
  7841.             }, 50);
  7842.  
  7843.             async function split(times) {
  7844.                 if (times > 0) {
  7845.                     window.dispatchEvent(
  7846.                         new KeyboardEvent('keydown', KEY_SPLIT)
  7847.                     );
  7848.                     window.dispatchEvent(new KeyboardEvent('keyup', KEY_SPLIT));
  7849.                     split(times - 1);
  7850.                 }
  7851.             }
  7852.  
  7853.             async function selfTrick() {
  7854.                 let i = 4;
  7855.  
  7856.                 while (i--) {
  7857.                     split(1);
  7858.                     await wait(20);
  7859.                 }
  7860.             }
  7861.  
  7862.             async function doubleTrick() {
  7863.                 let i = 2;
  7864.  
  7865.                 while (i--) {
  7866.                     split(1);
  7867.                     await wait(20);
  7868.                 }
  7869.             }
  7870.  
  7871.             function mouseToScreenCenter() {
  7872.                 const screenCenterX = canvas.width / 2;
  7873.                 const screenCenterY = canvas.height / 2;
  7874.  
  7875.                 mousemove(screenCenterX, screenCenterY);
  7876.  
  7877.                 return {
  7878.                     x: screenCenterX,
  7879.                     y: screenCenterY,
  7880.                 };
  7881.             }
  7882.  
  7883.             async function instantSplit() {
  7884.                 await wait(300);
  7885.  
  7886.                 if (
  7887.                     modSettings.macros.keys.line.instantSplit &&
  7888.                     modSettings.macros.keys.line.instantSplit > 0
  7889.                 ) {
  7890.                     split(modSettings.macros.keys.line.instantSplit);
  7891.                 }
  7892.             }
  7893.  
  7894.             async function vLine() {
  7895.                 if (!activeVLine) return;
  7896.                 const x = playerPosition.x;
  7897.                 const y = playerPosition.y;
  7898.  
  7899.                 const offsetUpX = playerPosition.x;
  7900.                 const offsetUpY = playerPosition.y - 100;
  7901.                 const offsetDownX = playerPosition.x;
  7902.                 const offsetDownY = playerPosition.y + 100;
  7903.  
  7904.                 freezepos = false;
  7905.                 window.sendMouseMove(offsetUpX, offsetUpY);
  7906.                 freezepos = true;
  7907.  
  7908.                 await wait(50);
  7909.  
  7910.                 freezepos = false;
  7911.                 window.sendMouseMove(offsetDownX, offsetDownY);
  7912.                 freezepos = true;
  7913.             }
  7914.  
  7915.             async function toggleHorizontal(mouse = false) {
  7916.                 if (!freezeKeyPressed) {
  7917.                     if (activeVLine || activeFixedLine) return;
  7918.  
  7919.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  7920.                     freezepos = true;
  7921.  
  7922.                     instantSplit();
  7923.  
  7924.                     freezeOverlay = document.createElement('div');
  7925.                     freezeOverlay.innerHTML = `
  7926. 							<span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Movement Stopped</span>
  7927. 						`;
  7928.                     freezeOverlay.style =
  7929.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  7930.  
  7931.                     if (
  7932.                         mouse &&
  7933.                         (modSettings.macros.mouse.left === 'freeze' ||
  7934.                          modSettings.macros.mouse.right === 'freeze')
  7935.                     ) {
  7936.                         freezeOverlay.addEventListener('mousedown', (e) => {
  7937.                             if (
  7938.                                 e.button === 0 &&
  7939.                                 modSettings.macros.mouse.left === 'freeze'
  7940.                             ) {
  7941.                                 // Left mouse button (1)
  7942.                                 handleFreezeEvent();
  7943.                             }
  7944.                             if (
  7945.                                 e.button === 2 &&
  7946.                                 modSettings.macros.mouse.right === 'freeze'
  7947.                             ) {
  7948.                                 // Right mouse button (2)
  7949.                                 handleFreezeEvent();
  7950.                             }
  7951.                         });
  7952.  
  7953.                         if (modSettings.macros.mouse.right === 'freeze') {
  7954.                             freezeOverlay.addEventListener(
  7955.                                 'contextmenu',
  7956.                                 (e) => {
  7957.                                     e.preventDefault();
  7958.                                 }
  7959.                             );
  7960.                         }
  7961.                     }
  7962.  
  7963.                     function handleFreezeEvent() {
  7964.                         if (freezeOverlay != null) freezeOverlay.remove();
  7965.                         freezeOverlay = null;
  7966.                         freezeKeyPressed = false;
  7967.                     }
  7968.  
  7969.                     document
  7970.                         .querySelector('.body__inner')
  7971.                         .append(freezeOverlay);
  7972.  
  7973.                     freezeKeyPressed = true;
  7974.                 } else {
  7975.                     if (freezeOverlay != null) freezeOverlay.remove();
  7976.                     freezeOverlay = null;
  7977.                     freezeKeyPressed = false;
  7978.  
  7979.                     freezepos = false;
  7980.                 }
  7981.             }
  7982.  
  7983.             async function toggleVertical() {
  7984.                 if (!activeVLine) {
  7985.                     if (freezeKeyPressed || activeFixedLine) return;
  7986.  
  7987.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  7988.                     freezepos = true;
  7989.  
  7990.                     instantSplit();
  7991.  
  7992.                     vOverlay = document.createElement('div');
  7993.                     vOverlay.style = 'pointer-events: none;';
  7994.                     vOverlay.innerHTML = `
  7995.                         <span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Vertical locked</span>
  7996.                     `;
  7997.                     vOverlay.style =
  7998.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  7999.  
  8000.                     document.querySelector('.body__inner').append(vOverlay);
  8001.  
  8002.                     activeVLine = true;
  8003.                 } else {
  8004.                     activeVLine = false;
  8005.                     freezepos = false;
  8006.                     if (vOverlay) vOverlay.remove();
  8007.                     vOverlay = null;
  8008.                 }
  8009.             }
  8010.  
  8011.             async function toggleFixed() {
  8012.                 if (!activeFixedLine) {
  8013.                     if (freezeKeyPressed || activeVLine) return;
  8014.  
  8015.                     window.sendMouseMove(playerPosition.x, playerPosition.y);
  8016.  
  8017.                     freezepos = true;
  8018.  
  8019.                     instantSplit();
  8020.  
  8021.                     fixedOverlay = document.createElement('div');
  8022.                     fixedOverlay.style = 'pointer-events: none;';
  8023.                     fixedOverlay.innerHTML = `
  8024.                         <span style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 26px; user-select: none;">Mouse locked</span>
  8025.                     `;
  8026.                     fixedOverlay.style =
  8027.                         'position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; overflow: hidden; pointer-events: none;';
  8028.  
  8029.                     document.querySelector('.body__inner').append(fixedOverlay);
  8030.  
  8031.                     activeFixedLine = true;
  8032.                 } else {
  8033.                     activeFixedLine = false;
  8034.                     freezepos = false;
  8035.                     if (fixedOverlay) fixedOverlay.remove();
  8036.                     fixedOverlay = null;
  8037.                 }
  8038.             }
  8039.  
  8040.             function sendLocation() {
  8041.                 if (!playerPosition.x || !playerPosition.y) return;
  8042.  
  8043.                 const gamemode = byId('gamemode');
  8044.  
  8045.                 let field = '';
  8046.                 const coordinates = getCoordinates(mods.border);
  8047.  
  8048.                 for (const label in coordinates) {
  8049.                     const { min, max } = coordinates[label];
  8050.  
  8051.                     if (
  8052.                         playerPosition.x >= min.x &&
  8053.                         playerPosition.x <= max.x &&
  8054.                         playerPosition.y >= min.y &&
  8055.                         playerPosition.y <= max.y
  8056.                     ) {
  8057.                         field = label;
  8058.                         break;
  8059.                     }
  8060.                 }
  8061.  
  8062.                 const locationText = modSettings.chat.locationText || field;
  8063.                 const message = locationText.replace('{pos}', field);
  8064.                 window.sendChat(message);
  8065.             }
  8066.  
  8067.             function toggleSettings(setting) {
  8068.                 const settingElement = document.querySelector(
  8069.                     `input#${setting}`
  8070.                 );
  8071.                 if (settingElement) {
  8072.                     settingElement.click();
  8073.                 } else {
  8074.                     console.error(`Setting "${setting}" not found`);
  8075.                 }
  8076.             }
  8077.  
  8078.             document.addEventListener('keyup', (e) => {
  8079.                 const key = e.key.toLowerCase();
  8080.                 if (key == modSettings.macros.keys.rapidFeed && keydown) {
  8081.                     clearInterval(ff);
  8082.                     keydown = false;
  8083.                 }
  8084.             });
  8085.             document.addEventListener('keydown', (e) => {
  8086.                 // prevent disconnecting & using macros on input fields
  8087.                 if (
  8088.                     document.activeElement.tagName === 'INPUT' ||
  8089.                     document.activeElement.tagName === 'TEXTAREA'
  8090.                 ) {
  8091.                     e.stopPropagation();
  8092.                     return;
  8093.                 }
  8094.                 const key = e.key.toLowerCase();
  8095.  
  8096.                 if (key === 'p') {
  8097.                     e.stopPropagation();
  8098.                 }
  8099.                 if (key === 'tab' && !window.screenTop && !window.screenY) {
  8100.                     e.preventDefault();
  8101.                 }
  8102.  
  8103.                 if (key === modSettings.macros.keys.rapidFeed) {
  8104.                     e.stopPropagation(); // block actual feeding key
  8105.                     if (!keydown) {
  8106.                         keydown = true;
  8107.                         ff = setInterval(
  8108.                             () => keypress('w', 'KeyW'),
  8109.                             modSettings.macros.feedSpeed
  8110.                         );
  8111.                     }
  8112.                 }
  8113.                 // vertical linesplit
  8114.                 if (
  8115.                     activeVLine &&
  8116.                     (key === ' ' ||
  8117.                      key === modSettings.macros.keys.splits.double ||
  8118.                      key === modSettings.macros.keys.splits.triple ||
  8119.                      key === modSettings.macros.keys.splits.quad)
  8120.                 ) {
  8121.                     vLine();
  8122.                 }
  8123.  
  8124.                 handleKeydown(key);
  8125.             });
  8126.  
  8127.             async function handleKeydown(key) {
  8128.                 switch (key) {
  8129.                     case modSettings.macros.keys.toggle.menu: {
  8130.                         if (!open) {
  8131.                             mod_menu.style.display = 'flex';
  8132.                             setTimeout(() => {
  8133.                                 mod_menu.style.opacity = 1;
  8134.                             }, 10);
  8135.                             open = true;
  8136.                         } else {
  8137.                             mod_menu.style.opacity = 0;
  8138.                             setTimeout(() => {
  8139.                                 mod_menu.style.display = 'none';
  8140.                             }, 300);
  8141.                             open = false;
  8142.                         }
  8143.                         break;
  8144.                     }
  8145.  
  8146.                     case modSettings.macros.keys.splits.double:
  8147.                         split(2);
  8148.                         break;
  8149.  
  8150.                     case modSettings.macros.keys.splits.triple:
  8151.                         split(3);
  8152.                         break;
  8153.  
  8154.                     case modSettings.macros.keys.splits.quad:
  8155.                         split(4);
  8156.                         break;
  8157.  
  8158.                     case modSettings.macros.keys.splits.selfTrick:
  8159.                         selfTrick();
  8160.                         break;
  8161.  
  8162.                     case modSettings.macros.keys.splits.doubleTrick:
  8163.                         doubleTrick();
  8164.                         break;
  8165.  
  8166.                     case modSettings.macros.keys.line.horizontal:
  8167.                         if (menuClosed()) toggleHorizontal();
  8168.                         break;
  8169.  
  8170.                     case modSettings.macros.keys.line.vertical:
  8171.                         if (menuClosed()) toggleVertical();
  8172.                         break;
  8173.  
  8174.                     case modSettings.macros.keys.line.fixed:
  8175.                         if (menuClosed()) toggleFixed();
  8176.                         break;
  8177.  
  8178.                     case modSettings.macros.keys.location:
  8179.                         sendLocation();
  8180.                         break;
  8181.  
  8182.                     case modSettings.macros.keys.toggle.chat:
  8183.                         mods.toggleChat();
  8184.                         break;
  8185.  
  8186.                     case modSettings.macros.keys.toggle.names:
  8187.                         toggleSettings('showNames');
  8188.                         break;
  8189.  
  8190.                     case modSettings.macros.keys.toggle.skins:
  8191.                         toggleSettings('showSkins');
  8192.                         break;
  8193.  
  8194.                     case modSettings.macros.keys.toggle.autoRespawn:
  8195.                         toggleSettings('autoRespawn');
  8196.                         break;
  8197.  
  8198.                     case modSettings.macros.keys.respawn:
  8199.                         mods.respawnGame();
  8200.                         break;
  8201.  
  8202.                     case modSettings.macros.keys.saveImage:
  8203.                         await mods.saveImage();
  8204.                         break;
  8205.                 }
  8206.             }
  8207.  
  8208.             canvas.addEventListener('mousedown', (e) => {
  8209.                 const {
  8210.                     macros: { mouse },
  8211.                 } = modSettings;
  8212.  
  8213.                 if (e.button === 0) {
  8214.                     // Left mouse button (0)
  8215.                     if (mouse.left === 'fastfeed') {
  8216.                         if (
  8217.                             document.activeElement.tagName === 'INPUT' ||
  8218.                             document.activeElement.tagName === 'TEXTAREA'
  8219.                         )
  8220.                             return;
  8221.                         this.mouseDown = true;
  8222.                     } else if (mouse.left === 'split') {
  8223.                         split(1);
  8224.                     } else if (mouse.left === 'split2') {
  8225.                         split(2);
  8226.                     } else if (mouse.left === 'split3') {
  8227.                         split(3);
  8228.                     } else if (mouse.left === 'split4') {
  8229.                         split(4);
  8230.                     } else if (mouse.left === 'freeze') {
  8231.                         toggleHorizontal(true);
  8232.                     } else if (mouse.left === 'dTrick') {
  8233.                         doubleTrick();
  8234.                     } else if (mouse.left === 'sTrick') {
  8235.                         selfTrick();
  8236.                     }
  8237.                 } else if (e.button === 2) {
  8238.                     // Right mouse button (2)
  8239.                     e.preventDefault();
  8240.                     if (mouse.right === 'fastfeed') {
  8241.                         if (
  8242.                             document.activeElement.tagName === 'INPUT' ||
  8243.                             document.activeElement.tagName === 'TEXTAREA'
  8244.                         )
  8245.                             return;
  8246.                         this.mouseDown = true;
  8247.                     } else if (mouse.right === 'split') {
  8248.                         split(1);
  8249.                     } else if (mouse.right === 'split2') {
  8250.                         split(2);
  8251.                     } else if (mouse.right === 'split3') {
  8252.                         split(3);
  8253.                     } else if (mouse.right === 'split4') {
  8254.                         split(4);
  8255.                     } else if (mouse.right === 'freeze') {
  8256.                         toggleHorizontal(true);
  8257.                     } else if (mouse.right === 'dTrick') {
  8258.                         doubleTrick();
  8259.                     } else if (mouse.right === 'sTrick') {
  8260.                         selfTrick();
  8261.                     }
  8262.                 }
  8263.             });
  8264.  
  8265.             canvas.addEventListener('contextmenu', (e) => {
  8266.                 e.preventDefault();
  8267.             });
  8268.  
  8269.             canvas.addEventListener('mouseup', () => {
  8270.                 if (modSettings.macros.mouse.left === 'fastfeed') {
  8271.                     this.mouseDown = false;
  8272.                 } else if (modSettings.macros.mouse.right === 'fastfeed') {
  8273.                     this.mouseDown = false;
  8274.                 }
  8275.             });
  8276.  
  8277.             const macroSelectHandler = (macroSelect, key) => {
  8278.                 const {
  8279.                     macros: { mouse },
  8280.                 } = modSettings;
  8281.                 macroSelect.value = modSettings[key] || 'none';
  8282.  
  8283.                 macroSelect.addEventListener('change', () => {
  8284.                     const selectedOption = macroSelect.value;
  8285.  
  8286.                     const optionActions = {
  8287.                         none: () => {
  8288.                             mouse[key] = null;
  8289.                         },
  8290.                         fastfeed: () => {
  8291.                             mouse[key] = 'fastfeed';
  8292.                         },
  8293.                         split: () => {
  8294.                             mouse[key] = 'split';
  8295.                         },
  8296.                         split2: () => {
  8297.                             mouse[key] = 'split2';
  8298.                         },
  8299.                         split3: () => {
  8300.                             mouse[key] = 'split3';
  8301.                         },
  8302.                         split4: () => {
  8303.                             mouse[key] = 'split4';
  8304.                         },
  8305.                         freeze: () => {
  8306.                             mouse[key] = 'freeze';
  8307.                         },
  8308.                         dTrick: () => {
  8309.                             mouse[key] = 'dTrick';
  8310.                         },
  8311.                         sTrick: () => {
  8312.                             mouse[key] = 'sTrick';
  8313.                         },
  8314.                     };
  8315.  
  8316.                     if (optionActions[selectedOption]) {
  8317.                         optionActions[selectedOption]();
  8318.                         updateStorage();
  8319.                     }
  8320.                 });
  8321.             };
  8322.  
  8323.             const m1_macroSelect = byId('m1_macroSelect');
  8324.             const m2_macroSelect = byId('m2_macroSelect');
  8325.  
  8326.             macroSelectHandler(m1_macroSelect, 'left');
  8327.             macroSelectHandler(m2_macroSelect, 'right');
  8328.  
  8329.             const instantSplitAmount = byId('instant-split-amount');
  8330.             const instantSplitStatus = byId('toggle-instant-split');
  8331.  
  8332.             instantSplitStatus.checked =
  8333.                 modSettings.macros.keys.line.instantSplit > 0;
  8334.             instantSplitAmount.disabled = !instantSplitStatus.checked;
  8335.             instantSplitAmount.value =
  8336.                 modSettings.macros.keys.line.instantSplit.toString();
  8337.  
  8338.             instantSplitStatus.addEventListener('change', () => {
  8339.                 if (instantSplitStatus.checked) {
  8340.                     modSettings.macros.keys.line.instantSplit =
  8341.                         Number(instantSplitAmount.value) || 0;
  8342.                     instantSplitAmount.disabled = false;
  8343.                 } else {
  8344.                     modSettings.macros.keys.line.instantSplit = 0;
  8345.                     instantSplitAmount.disabled = true;
  8346.                 }
  8347.  
  8348.                 updateStorage();
  8349.             });
  8350.  
  8351.             instantSplitAmount.addEventListener('input', (e) => {
  8352.                 modSettings.macros.keys.line.instantSplit =
  8353.                     Number(instantSplitAmount.value) || 0;
  8354.                 updateStorage();
  8355.             });
  8356.         },
  8357.  
  8358.         setInputActions() {
  8359.             const numModInputs = 17;
  8360.             const macroInputs = Array.from(
  8361.                 { length: numModInputs },
  8362.                 (_, i) => `modinput${i + 1}`
  8363.             );
  8364.  
  8365.             macroInputs.forEach((modkey) => {
  8366.                 const modInput = byId(modkey);
  8367.  
  8368.                 document.addEventListener('keydown', (event) => {
  8369.                     if (document.activeElement !== modInput) return;
  8370.  
  8371.                     if (event.key === 'Backspace') {
  8372.                         modInput.value = '';
  8373.                         updateModSettings(modInput.name, '');
  8374.                         return;
  8375.                     }
  8376.  
  8377.                     const newValue = event.key.toLowerCase();
  8378.                     modInput.value = newValue;
  8379.  
  8380.                     const isDuplicate = macroInputs.some((key) => {
  8381.                         const input = byId(key);
  8382.                         return (
  8383.                             input &&
  8384.                             input !== modInput &&
  8385.                             input.value === newValue
  8386.                         );
  8387.                     });
  8388.  
  8389.                     if (newValue && isDuplicate) {
  8390.                         alert("You can't use 2 keybindings at the same time.");
  8391.                         setTimeout(() => (modInput.value = ''), 0);
  8392.                         return;
  8393.                     }
  8394.  
  8395.                     updateModSettings(modInput.name, newValue);
  8396.                 });
  8397.             });
  8398.  
  8399.             function updateModSettings(propertyName, value) {
  8400.                 const properties = propertyName.split('.');
  8401.                 let settings = modSettings.macros.keys;
  8402.  
  8403.                 properties
  8404.                     .slice(0, -1)
  8405.                     .forEach((prop) => (settings = settings[prop]));
  8406.                 settings[properties.pop()] = value;
  8407.  
  8408.                 updateStorage();
  8409.             }
  8410.  
  8411.             const modNumberInput = document.querySelector('.modNumberInput');
  8412.  
  8413.             modNumberInput.addEventListener('keydown', (event) => {
  8414.                 if (
  8415.                     !['Backspace', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(
  8416.                         event.key
  8417.                     ) &&
  8418.                     !/^[0-9]$/.test(event.key)
  8419.                 ) {
  8420.                     event.preventDefault();
  8421.                 }
  8422.             });
  8423.         },
  8424.  
  8425.         openDB() {
  8426.             if (this.dbCache) return Promise.resolve(this.dbCache);
  8427.  
  8428.             return new Promise((resolve, reject) => {
  8429.                 const request = indexedDB.open('imageGalleryDB', 1);
  8430.  
  8431.                 request.onupgradeneeded = (event) => {
  8432.                     const db = event.target.result;
  8433.                     if (!db.objectStoreNames.contains('images')) {
  8434.                         db.createObjectStore('images', {
  8435.                             keyPath: 'timestamp',
  8436.                         });
  8437.                     }
  8438.                 };
  8439.  
  8440.                 request.onsuccess = () => {
  8441.                     this.dbCache = request.result;
  8442.                     resolve(this.dbCache);
  8443.                 };
  8444.  
  8445.                 request.onerror = (event) => reject(event.target.error);
  8446.             });
  8447.         },
  8448.  
  8449.         async saveImage() {
  8450.             const canvas = window.sigfix ? byId('sf-canvas') : byId('canvas');
  8451.  
  8452.             requestAnimationFrame(async () => {
  8453.                 const dataURL = canvas.toDataURL('image/png');
  8454.  
  8455.                 if (!dataURL) {
  8456.                     console.error(
  8457.                         'Failed to capture the image. The canvas might be empty or the rendering is incomplete.'
  8458.                     );
  8459.                     return;
  8460.                 }
  8461.  
  8462.                 const timestamp = Date.now();
  8463.  
  8464.                 if (!indexedDB)
  8465.                     return alert(
  8466.                         'Your browser does not support indexedDB. Please update your browser.'
  8467.                     );
  8468.  
  8469.                 try {
  8470.                     const db = await this.openDB();
  8471.                     const transaction = db.transaction('images', 'readwrite');
  8472.                     const store = transaction.objectStore('images');
  8473.                     store.put({ timestamp, dataURL });
  8474.  
  8475.                     await new Promise((resolve, reject) => {
  8476.                         transaction.oncomplete = resolve;
  8477.                         transaction.onerror = (event) =>
  8478.                         reject(event.target.error);
  8479.                     });
  8480.  
  8481.                     this.addImageToGallery({ timestamp, dataURL });
  8482.                 } catch (error) {
  8483.                     console.error('Transaction error:', error);
  8484.                 }
  8485.             });
  8486.         },
  8487.  
  8488.         addImageToGallery(image) {
  8489.             const galleryElement = byId('image-gallery');
  8490.  
  8491.             if (!galleryElement) return;
  8492.  
  8493.             const placeholderURL =
  8494.                   'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
  8495.  
  8496.             const imageHTML = `
  8497. 				<div class="image-container">
  8498. 					<img class="gallery-image lazy" data-src="${
  8499.             image.dataURL
  8500.             }" src="${placeholderURL}" data-image-id="${
  8501.             image.timestamp
  8502.             }" />
  8503. 					<div class="justify-sb">
  8504. 						<span class="modDescText">${prettyTime.fullDate(image.timestamp, true)}</span>
  8505. 						<div class="centerXY g-5">
  8506. 							<button type="button" class="download_btn operation_btn" data-image-id="${
  8507.             image.timestamp
  8508.             }"></button>
  8509. 							<button type="button" class="delete_btn operation_btn" data-image-id="${
  8510.             image.timestamp
  8511.             }"></button>
  8512. 						</div>
  8513. 					</div>
  8514. 				</div>
  8515. 			`;
  8516.  
  8517.             galleryElement.insertAdjacentHTML('afterbegin', imageHTML);
  8518.  
  8519.             const lazyImages = document.querySelectorAll('.lazy');
  8520.             const imageObserver = new IntersectionObserver(
  8521.                 (entries, observer) => {
  8522.                     entries.forEach((entry) => {
  8523.                         if (entry.isIntersecting) {
  8524.                             const image = entry.target;
  8525.                             image.src = image.getAttribute('data-src');
  8526.                             image.classList.remove('lazy');
  8527.                             observer.unobserve(image);
  8528.                         }
  8529.                     });
  8530.                 }
  8531.             );
  8532.  
  8533.             lazyImages.forEach((image) => {
  8534.                 imageObserver.observe(image);
  8535.             });
  8536.  
  8537.             this.attachEventListeners([image]);
  8538.         },
  8539.         async updateGallery() {
  8540.             try {
  8541.                 const db = await this.openDB();
  8542.                 const transaction = db.transaction('images', 'readonly');
  8543.                 const store = transaction.objectStore('images');
  8544.                 const request = store.getAll();
  8545.  
  8546.                 request.onsuccess = () => {
  8547.                     const gallery = request.result;
  8548.                     const galleryElement = byId('image-gallery');
  8549.                     const downloadAll = byId('gallery-download');
  8550.                     const deleteAll = byId('gallery-delete');
  8551.  
  8552.                     if (!galleryElement) return;
  8553.  
  8554.                     if (gallery.length === 0) {
  8555.                         galleryElement.innerHTML = `<span>No images saved yet.</span>`;
  8556.  
  8557.                         downloadAll.style.display = 'none';
  8558.                         deleteAll.style.display = 'none';
  8559.                         return;
  8560.                     }
  8561.  
  8562.                     downloadAll.style.display = 'block';
  8563.                     deleteAll.style.display = 'block';
  8564.  
  8565.                     downloadAll.addEventListener('click', async () => {
  8566.                         if (gallery.length === 0) return;
  8567.                         const { JSZip } = window;
  8568.                         const zip = JSZip();
  8569.  
  8570.                         gallery.forEach((item) => {
  8571.                             const imageData = item.dataURL.split(',')[1];
  8572.                             const imgExtension = item.dataURL
  8573.                             .split(';')[0]
  8574.                             .split('/')[1];
  8575.                             zip.file(
  8576.                                 `${item.timestamp}.${imgExtension}`,
  8577.                                 imageData,
  8578.                                 {
  8579.                                     base64: true,
  8580.                                 }
  8581.                             );
  8582.                         });
  8583.  
  8584.                         zip.generateAsync({ type: 'blob' })
  8585.                             .then((zipContent) => {
  8586.                             const a = document.createElement('a');
  8587.                             a.href = URL.createObjectURL(zipContent);
  8588.                             a.download = 'sigmally_gallery.zip';
  8589.                             a.click();
  8590.                         })
  8591.                             .catch((error) => {
  8592.                             console.error(
  8593.                                 'Error generating ZIP file:',
  8594.                                 error
  8595.                             );
  8596.                         });
  8597.                     });
  8598.  
  8599.                     deleteAll.addEventListener('click', () => {
  8600.                         const confirmDelete = confirm(
  8601.                             'Are you sure you want to delete all images? This action cannot be undone.'
  8602.                         );
  8603.                         if (!confirmDelete) return;
  8604.  
  8605.                         const deleteTransaction = db.transaction(
  8606.                             'images',
  8607.                             'readwrite'
  8608.                         );
  8609.                         const deleteStore =
  8610.                               deleteTransaction.objectStore('images');
  8611.                         deleteStore.clear();
  8612.  
  8613.                         deleteTransaction.oncomplete = () => {
  8614.                             galleryElement.innerHTML = `<span>No images saved yet.</span>`;
  8615.                         };
  8616.  
  8617.                         deleteTransaction.onerror = (error) => {
  8618.                             console.error('Error deleting images:', error);
  8619.                         };
  8620.                     });
  8621.  
  8622.                     gallery.sort((a, b) => b.timestamp - a.timestamp);
  8623.  
  8624.                     let galleryHTML = gallery
  8625.                     .map(
  8626.                         (item) => `
  8627. 						<div class="image-container">
  8628. 							<img class="gallery-image lazy" data-src="${
  8629.                         item.dataURL
  8630.                         }" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-image-id="${
  8631.                         item.timestamp
  8632.                         }" />
  8633. 							<div class="justify-sb">
  8634. 								<span class="modDescText">${prettyTime.fullDate(item.timestamp, true)}</span>
  8635. 								<div class="centerXY g-5">
  8636. 									<button type="button" class="download_btn operation_btn" data-image-id="${
  8637.                         item.timestamp
  8638.                         }"></button>
  8639. 									<button type="button" class="delete_btn operation_btn" data-image-id="${
  8640.                         item.timestamp
  8641.                         }"></button>
  8642. 								</div>
  8643. 							</div>
  8644. 						</div>
  8645. 					`
  8646.                     )
  8647.                     .join('');
  8648.  
  8649.                     galleryElement.innerHTML = galleryHTML;
  8650.  
  8651.                     const lazyImages = document.querySelectorAll('.lazy');
  8652.                     const imageObserver = new IntersectionObserver(
  8653.                         (entries, observer) => {
  8654.                             entries.forEach((entry) => {
  8655.                                 if (entry.isIntersecting) {
  8656.                                     const image = entry.target;
  8657.                                     image.src = image.getAttribute('data-src');
  8658.                                     image.classList.remove('lazy');
  8659.                                     observer.unobserve(image);
  8660.                                 }
  8661.                             });
  8662.                         }
  8663.                     );
  8664.  
  8665.                     lazyImages.forEach((image) => {
  8666.                         imageObserver.observe(image);
  8667.                     });
  8668.  
  8669.                     this.attachEventListeners(gallery);
  8670.                 };
  8671.             } catch (error) {
  8672.                 console.error('Transaction error:', error);
  8673.             }
  8674.         },
  8675.  
  8676.         attachEventListeners(gallery) {
  8677.             const galleryElement = byId('image-gallery');
  8678.  
  8679.             galleryElement.querySelectorAll('.gallery-image').forEach((img) => {
  8680.                 img.addEventListener('click', (event) => {
  8681.                     const dataURL = event.target.src;
  8682.                     this.openImage(dataURL);
  8683.                 });
  8684.             });
  8685.  
  8686.             galleryElement
  8687.                 .querySelectorAll('.download_btn')
  8688.                 .forEach((button) => {
  8689.                 button.addEventListener('click', () => {
  8690.                     const imageId = button.getAttribute('data-image-id');
  8691.                     const image = gallery.find(
  8692.                         (item) => item.timestamp === parseInt(imageId, 10)
  8693.                     );
  8694.                     if (image) {
  8695.                         const link = document.createElement('a');
  8696.                         link.href = image.dataURL;
  8697.                         link.download = `Sigmally ${this.sanitizeFilename(
  8698.                             prettyTime.fullDate(image.timestamp, true)
  8699.                         )}.png`;
  8700.                         link.click();
  8701.                     }
  8702.                 });
  8703.             });
  8704.  
  8705.             galleryElement.querySelectorAll('.delete_btn').forEach((button) => {
  8706.                 button.addEventListener('click', (e) => {
  8707.                     e.stopPropagation();
  8708.                     const imageId = button.getAttribute('data-image-id');
  8709.                     this.deleteImage(parseInt(imageId, 10));
  8710.                 });
  8711.             });
  8712.         },
  8713.  
  8714.         sanitizeFilename: (filename) => filename.replace(/:/g, '_'),
  8715.  
  8716.         openImage(dataURL) {
  8717.             const blob = this.dataURLToBlob(dataURL);
  8718.             const url = URL.createObjectURL(blob);
  8719.             const imgWindow = window.open(url, '_blank');
  8720.  
  8721.             if (imgWindow) {
  8722.                 setTimeout(() => URL.revokeObjectURL(url), 1000);
  8723.             }
  8724.         },
  8725.  
  8726.         dataURLToBlob(dataURL) {
  8727.             const [header, data] = dataURL.split(',');
  8728.             const mime = header.match(/:(.*?);/)[1];
  8729.             const binary = atob(data);
  8730.             const array = new Uint8Array(binary.length);
  8731.             for (let i = 0; i < binary.length; i++) {
  8732.                 array[i] = binary.charCodeAt(i);
  8733.             }
  8734.             return new Blob([array], { type: mime });
  8735.         },
  8736.  
  8737.         async deleteImage(timestamp) {
  8738.             try {
  8739.                 const db = await this.openDB();
  8740.                 const transaction = db.transaction('images', 'readwrite');
  8741.                 const store = transaction.objectStore('images');
  8742.                 store.delete(timestamp);
  8743.  
  8744.                 await new Promise((resolve, reject) => {
  8745.                     transaction.oncomplete = resolve;
  8746.                     transaction.onerror = (event) => reject(event.target.error);
  8747.                 });
  8748.  
  8749.                 this.updateGallery();
  8750.             } catch (error) {
  8751.                 console.error('Transaction error:', error);
  8752.             }
  8753.         },
  8754.  
  8755.         mainMenu() {
  8756.             const menucontent = document.querySelector('.menu-center-content');
  8757.             menucontent.style.margin = 'auto';
  8758.  
  8759.             const discordlinks = document.createElement('div');
  8760.             discordlinks.setAttribute('id', 'dclinkdiv');
  8761.             discordlinks.innerHTML = `
  8762.                 <a href="https://discord.gg/${
  8763.             window.tourneyServer ? 'ERtbMJCp8s' : '4j4Rc4dQTP'
  8764.         }" 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>${
  8769.             window.tourneyServer ? 'Tourney Server' : 'Sigmally'
  8770.         }</span>
  8771.                 </a>
  8772.                 <a href="https://discord.gg/QyUhvUC8AD" target="_blank" class="dclinks">
  8773.                     <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  8774.                         <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>
  8775.                     </svg>
  8776.                     <span>Sigmally Modz</span>
  8777.                 </a>
  8778.                 `;
  8779.             byId('discord_link').remove();
  8780.             byId('menu').appendChild(discordlinks);
  8781.  
  8782.             let clansbtn = document.querySelector('#clans_and_settings button');
  8783.             clansbtn.innerHTML = 'Clans';
  8784.             document
  8785.                 .querySelectorAll('#clans_and_settings button')[1]
  8786.                 .removeAttribute('onclick');
  8787.         },
  8788.  
  8789.         respawn() {
  8790.             const __line2 = byId('__line2');
  8791.             const c = byId('continue_button');
  8792.             const p = byId('play-btn');
  8793.  
  8794.             if (__line2.classList.contains('line--hidden')) return;
  8795.  
  8796.             this.respawnTime = null;
  8797.  
  8798.             setTimeout(() => {
  8799.                 c.click();
  8800.                 p.click();
  8801.             }, 20);
  8802.  
  8803.             this.respawnTime = Date.now();
  8804.         },
  8805.  
  8806.         respawnGame() {
  8807.             const { sigfix } = window;
  8808.  
  8809.             if (
  8810.                 sigfix &&
  8811.                 sigfix.net.connections
  8812.                 .get(sigfix.world.selected)
  8813.                 .ws.url.includes('localhost')
  8814.             ) {
  8815.                 this.fastRespawn();
  8816.                 return;
  8817.             }
  8818.  
  8819.             // respawns above 5.5k mass will be blocked
  8820.             if (
  8821.                 (!sigfix && !this.aboveRespawnLimit) ||
  8822.                 (sigfix && sigfix.world.score(sigfix.world.selected) < 5500)
  8823.             ) {
  8824.                 this.fastRespawn();
  8825.             }
  8826.         },
  8827.  
  8828.         fastRespawn() {
  8829.             // leave the world with chat command
  8830.             window.sendChat(this.respawnCommand);
  8831.             const p = byId('play-btn');
  8832.  
  8833.             const intervalId = setInterval(() => {
  8834.                 if (isDead() || menuClosed()) {
  8835.                     this.respawn();
  8836.                     p.click();
  8837.                 } else {
  8838.                     clearInterval(intervalId);
  8839.                 }
  8840.             }, 50);
  8841.             setTimeout(() => {
  8842.                 clearInterval(intervalId);
  8843.             }, 1000);
  8844.         },
  8845.  
  8846.         clientPing() {
  8847.             const pingElement = document.createElement('span');
  8848.             pingElement.innerHTML = `Client Ping: 0ms`;
  8849.             pingElement.id = 'clientPing';
  8850.             pingElement.style = `
  8851.                 position: absolute;
  8852.                 right: 10px;
  8853.                 bottom: 5px;
  8854.                 color: #fff;
  8855.                 font-size: 1.8rem;
  8856.             `;
  8857.             document.querySelector('.mod_menu').append(pingElement);
  8858.  
  8859.             this.ping.intervalId = setInterval(() => {
  8860.                 if (!client || client.ws?.readyState != 1) return;
  8861.                 this.ping.start = Date.now();
  8862.  
  8863.                 client.send({
  8864.                     type: 'get-ping',
  8865.                 });
  8866.             }, 2000);
  8867.         },
  8868.  
  8869.         createMinimap() {
  8870.             const dataContainer = document.createElement('div');
  8871.             dataContainer.classList.add('minimapContainer');
  8872.  
  8873.             const miniMap = document.createElement('canvas');
  8874.             miniMap.width = 200;
  8875.             miniMap.height = 200;
  8876.             miniMap.classList.add('minimap');
  8877.             this.canvas = miniMap;
  8878.  
  8879.             let viewportScale = 1;
  8880.  
  8881.             document.body.append(dataContainer);
  8882.             dataContainer.append(miniMap);
  8883.  
  8884.             function resizeMiniMap() {
  8885.                 viewportScale = Math.max(
  8886.                     window.innerWidth / 1920,
  8887.                     window.innerHeight / 1080
  8888.                 );
  8889.  
  8890.                 miniMap.width = miniMap.height = 200 * viewportScale;
  8891.             }
  8892.  
  8893.             resizeMiniMap();
  8894.  
  8895.             window.addEventListener('resize', resizeMiniMap);
  8896.  
  8897.             const playBtn = byId('play-btn');
  8898.             playBtn.addEventListener('click', () => {
  8899.                 setTimeout(() => {
  8900.                     lastPosTime = Date.now();
  8901.                 }, 300);
  8902.             });
  8903.         },
  8904.  
  8905.         updData(data) {
  8906.             const { x, y, sid: playerId } = data;
  8907.             const playerIndex = this.miniMapData.findIndex(
  8908.                 (player) => player[3] === playerId
  8909.             );
  8910.             const nick = data.nick;
  8911.  
  8912.             if (playerIndex === -1) {
  8913.                 this.miniMapData.push([x, y, nick, playerId]);
  8914.             } else {
  8915.                 if (x !== null && y !== null) {
  8916.                     this.miniMapData[playerIndex] = [x, y, nick, playerId];
  8917.                 } else {
  8918.                     this.miniMapData.splice(playerIndex, 1);
  8919.                 }
  8920.             }
  8921.  
  8922.             this.updMinimap();
  8923.         },
  8924.  
  8925.         updMinimap() {
  8926.             if (isDead()) return;
  8927.             const miniMap = mods.canvas;
  8928.             const border = mods.border;
  8929.             const ctx = miniMap.getContext('2d');
  8930.             ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  8931.  
  8932.             if (!menuClosed()) {
  8933.                 ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  8934.                 return;
  8935.             }
  8936.  
  8937.             for (const miniMapData of this.miniMapData) {
  8938.                 if (!border.width) break;
  8939.  
  8940.                 if (miniMapData[2] === null || miniMapData[3] === client.id)
  8941.                     continue;
  8942.                 if (!miniMapData[0] && !miniMapData[1]) {
  8943.                     ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  8944.                     continue;
  8945.                 }
  8946.  
  8947.                 const fullX = miniMapData[0] + border.width / 2;
  8948.                 const fullY = miniMapData[1] + border.width / 2;
  8949.                 const x = (fullX / border.width) * miniMap.width;
  8950.                 const y = (fullY / border.width) * miniMap.height;
  8951.  
  8952.                 ctx.fillStyle = '#3283bd';
  8953.                 ctx.beginPath();
  8954.                 ctx.arc(x, y, 3, 0, 2 * Math.PI);
  8955.                 ctx.fill();
  8956.  
  8957.                 const minDist = y - 15.5;
  8958.                 const nameYOffset = minDist <= 1 ? -4.5 : 10;
  8959.  
  8960.                 ctx.fillStyle = '#fff';
  8961.                 ctx.textAlign = 'center';
  8962.                 ctx.font = '9px Ubuntu';
  8963.                 ctx.fillText(miniMapData[2], x, y - nameYOffset);
  8964.             }
  8965.         },
  8966.  
  8967.         tagsystem() {
  8968.             const nick = document.querySelector('#nick');
  8969.             const tagElement = Object.assign(document.createElement('input'), {
  8970.                 id: 'tag',
  8971.                 className: 'form-control',
  8972.                 placeholder: 'Tag',
  8973.                 maxLength: 3
  8974.             });
  8975.  
  8976.             const pnick = nick.parentElement;
  8977.             pnick.style = 'display: flex; gap: 5px;';
  8978.  
  8979.             tagElement.addEventListener('input', (e) => {
  8980.                 e.stopPropagation();
  8981.                 const tagValue = tagElement.value;
  8982.                 const tagText = document.querySelector('.tagText');
  8983.  
  8984.                 tagText.innerText = tagValue ? `Tag: ${tagValue}` : '';
  8985.  
  8986.                 modSettings.settings.tag = tagElement.value;
  8987.                 updateStorage();
  8988.                 client?.send({
  8989.                     type: 'update-tag',
  8990.                     content: modSettings.settings.tag,
  8991.                 });
  8992.                 const miniMap = this.canvas;
  8993.                 const ctx = miniMap.getContext('2d');
  8994.                 ctx.clearRect(0, 0, miniMap.width, miniMap.height);
  8995.                 this.miniMapData = [];
  8996.             });
  8997.  
  8998.             nick.insertAdjacentElement('beforebegin', tagElement);
  8999.         },
  9000.         async handleNick() {
  9001.             const waitForConnection = () =>
  9002.             new Promise((res) => {
  9003.                 if (client?.ws?.readyState === 1) return res(null);
  9004.                 const i = setInterval(
  9005.                     () =>
  9006.                     client?.ws?.readyState === 1 &&
  9007.                     (clearInterval(i), res(null)),
  9008.                     50
  9009.                 );
  9010.             });
  9011.  
  9012.             waitForConnection().then(async () => {
  9013.                 // wait for nick
  9014.                 await wait(500);
  9015.  
  9016.                 const nick = byId('nick');
  9017.  
  9018.                 const update = () => {
  9019.                     this.nick = nick.value;
  9020.                     client.send({
  9021.                         type: 'update-nick',
  9022.                         content: nick.value,
  9023.                     });
  9024.                 };
  9025.  
  9026.                 nick.addEventListener('input', update);
  9027.                 update();
  9028.             });
  9029.         },
  9030.  
  9031.         showOverlays() {
  9032.             byId('overlays').show(0.5);
  9033.             byId('menu-wrapper').show();
  9034.             byId('left-menu').show();
  9035.             byId('menu-links').show();
  9036.             byId('right-menu').show();
  9037.             byId('left_ad_block').show();
  9038.             byId('ad_bottom').show();
  9039.             !modSettings.settings.removeShopPopup && byId('shop-popup').show();
  9040.         },
  9041.  
  9042.         hideOverlays() {
  9043.             byId('overlays').hide();
  9044.             byId('menu-wrapper').hide();
  9045.             byId('left-menu').hide();
  9046.             byId('menu-links').hide();
  9047.             byId('right-menu').hide();
  9048.             byId('left_ad_block').hide();
  9049.             byId('ad_bottom').hide();
  9050.             byId('shop-popup').hide();
  9051.         },
  9052.  
  9053.         handleTournamentData(data) {
  9054.             const { overlay: status, details, timer } = data;
  9055.  
  9056.             if (status && menuClosed()) location.reload();
  9057.  
  9058.             this.toggleTournamentOverlay(status);
  9059.             this.updateTournamentDetails(details);
  9060.             this.updateTournamentTimer(timer);
  9061.         },
  9062.  
  9063.         toggleTournamentOverlay(status) {
  9064.             const overlayId = 'tournament-overlay';
  9065.             const existingOverlay = document.getElementById(overlayId);
  9066.  
  9067.             if (status) {
  9068.                 if (!existingOverlay) {
  9069.                     const overlay = document.createElement('div');
  9070.                     overlay.id = overlayId;
  9071.                     overlay.classList.add('mod_overlay');
  9072.                     overlay.innerHTML = `
  9073.                         <div class="tournament-overlay-info">
  9074.                             <img src="https://czrsd.com/static/sigmod/tournaments/Sigmally_Tournaments.png" width="650" draggable="false" />
  9075.                             <span>The tournament is currently being prepared. Please remain patient.</span>
  9076.                             <span>В настоящее время турнир находится в стадии подготовки. Пожалуйста, сохраняйте терпение.</span>
  9077.                             <span>El torneo se está preparando actualmente. Le rogamos que sea paciente.</span>
  9078.                             <span>O torneio está sendo preparado no momento. Por favor, seja paciente.</span>
  9079.                             <span>Turnuva şu anda hazırlanmaktadır. Lütfen sabırlı olun.</span>
  9080.                         </div>
  9081.                     `;
  9082.                     document.body.appendChild(overlay);
  9083.                 }
  9084.             } else {
  9085.                 existingOverlay?.remove();
  9086.             }
  9087.         },
  9088.  
  9089.         updateTournamentDetails(details) {
  9090.             const minimapContainer = document.querySelector('.minimapContainer');
  9091.             if (!minimapContainer) return;
  9092.  
  9093.             document.getElementById('tournament-info')?.remove();
  9094.  
  9095.             if (details) {
  9096.                 const detailsElement = document.createElement('span');
  9097.                 detailsElement.id = 'tournament-info';
  9098.                 detailsElement.style = `
  9099.                     color: #ffffff;
  9100.                     pointer-events: auto;
  9101.                     text-align: end;
  9102.                     margin-bottom: 8px;
  9103.                     margin-right: 10px;
  9104.                 `;
  9105.                 detailsElement.innerHTML = details;
  9106.  
  9107.                 minimapContainer.prepend(detailsElement);
  9108.             }
  9109.         },
  9110.  
  9111.         updateTournamentTimer(timer) {
  9112.             const minimapContainer = document.querySelector('.minimapContainer');
  9113.             if (!minimapContainer) return;
  9114.  
  9115.             document.getElementById('tournament-timer')?.remove();
  9116.  
  9117.             if (timer) {
  9118.                 const timerElement = document.createElement('span');
  9119.                 timerElement.id = 'tournament-timer';
  9120.                 timerElement.style = 'color: #ffffff; margin-right: 10px;';
  9121.                 minimapContainer.prepend(timerElement);
  9122.  
  9123.                 const updateTimer = () => {
  9124.                     const timeLeft = timer - Date.now();
  9125.  
  9126.                     // show big red timer for the last 10 seconds
  9127.                     if (timeLeft < 11 * 1000) {
  9128.                         timerElement.style.fontSize = '16px';
  9129.                         timerElement.style.color = '#ff0000';
  9130.                     }
  9131.  
  9132.                     if (timeLeft <= 0) {
  9133.                         timerElement.remove();
  9134.                         clearInterval(timerInterval);
  9135.                         return;
  9136.                     }
  9137.  
  9138.                     timerElement.textContent = `${prettyTime.getTimeLeft(timer)} left`;
  9139.                 };
  9140.  
  9141.                 updateTimer();
  9142.                 const timerInterval = setInterval(updateTimer, 1000);
  9143.             }
  9144.         },
  9145.  
  9146.         showTournament(data) {
  9147.             if (menuClosed()) location.reload();
  9148.  
  9149.             const infoOverlay = byId('tournament-overlay');
  9150.             if (infoOverlay) infoOverlay.remove();
  9151.  
  9152.             let {
  9153.                 name,
  9154.                 password,
  9155.                 mode,
  9156.                 hosts,
  9157.                 participants,
  9158.                 time,
  9159.                 rounds,
  9160.                 prizes,
  9161.                 totalUsers,
  9162.             } = data;
  9163.  
  9164.             if (mode === 'lastOneStanding') {
  9165.                 this.lastOneStanding = true;
  9166.             }
  9167.             this.tourneyPassword = password || '';
  9168.  
  9169.             const teamHTML = (team) =>
  9170.             team
  9171.             .map(
  9172.                 (socket) => `
  9173. 				<div class="teamCard" data-user-id="${socket.user._id}">
  9174. 					<img src="${socket.user.imageURL}" width="50" />
  9175. 					<span>${socket.user.givenName}</span>
  9176. 				</div>
  9177. 			`
  9178.             )
  9179.             .join('');
  9180.  
  9181.             prizes = prizes.join(',');
  9182.  
  9183.             const overlay = document.createElement('div');
  9184.             overlay.classList.add('mod_overlay');
  9185.             overlay.id = 'tournaments_preview';
  9186.             if (!this.lastOneStanding) {
  9187.                 overlay.innerHTML = `
  9188. 					<div class="tournaments-wrapper">
  9189. 						<h1 style="margin: 0;">${name}</h1>
  9190. 						<span>Hosted by ${hosts}</span>
  9191. 						<div class="flex g-10" style="align-items: center; position: relative;">
  9192. 							<img src="https://czrsd.com/static/sigmod/tournaments/vsScreen.png" draggable="false" />
  9193.  
  9194. 							<div class="teamCards blueTeam">
  9195. 								${teamHTML(participants.blue)}
  9196. 							</div>
  9197.  
  9198. 							<div class="teamCards redTeam">
  9199. 								${teamHTML(participants.red)}
  9200. 							</div>
  9201. 						</div>
  9202. 						<details>
  9203. 							<summary style="cursor: pointer;">Match Details</summary>
  9204. 							Rounds: ${rounds}<br>
  9205. 							Prizes: ${prizes}
  9206. 							<br>
  9207. 							Time: ${time}
  9208. 						</details>
  9209. 						<div class="justify-sb w-100">
  9210. 							<span>Powered by SigMod</span>
  9211. 							<div class="centerXY g-10">
  9212. 								<span id="round-ready">Ready (0/${totalUsers})</span>
  9213. 								<button type="button" class="btn btn-success f-big" id="btn_ready">Ready</button>
  9214. 							</div>
  9215. 						</div>
  9216. 					</div>
  9217. 				`;
  9218.             } else {
  9219.                 overlay.innerHTML = `
  9220. 					<div class="tournaments-wrapper">
  9221. 						<h1 style="margin: 0;">${name}</h1>
  9222. 						<span>Hosted by ${hosts}</span>
  9223. 						<div class="flex g-10" style="align-items: center">
  9224. 							<div class="lastOneStanding_list scroll">
  9225. 								${teamHTML(participants.blue)}
  9226. 							</div>
  9227. 						</div>
  9228. 						<details>
  9229. 							<summary style="cursor: pointer;">Match Details</summary>
  9230. 							Rounds: ${rounds}<br>
  9231. 							Prizes: ${prizes}
  9232. 							<br>
  9233. 							Time: ${time}
  9234. 						</details>
  9235. 						<div class="justify-sb w-100">
  9236. 							<span>Powered by SigMod</span>
  9237. 							<div class="centerXY g-10">
  9238. 								<span id="round-ready">Ready (0/${totalUsers})</span>
  9239. 								<button type="button" class="btn btn-success f-big" id="btn_ready">Ready</button>
  9240. 							</div>
  9241. 						</div>
  9242. 					</div>
  9243. 				`;
  9244.             }
  9245.             document.body.append(overlay);
  9246.  
  9247.             const btn_ready = byId('btn_ready');
  9248.             btn_ready.addEventListener('click', () => {
  9249.                 btn_ready.disabled = true;
  9250.                 client.send({
  9251.                     type: 'ready',
  9252.                 });
  9253.             });
  9254.  
  9255.             byId('play-btn').addEventListener('click', (e) => {
  9256.                 e.stopPropagation();
  9257.                 this.hideOverlays();
  9258.                 this.sendPlay(password);
  9259.  
  9260.                 const passwordIncorrect = setInterval(() => {
  9261.                     const errorModal = byId('errormodal');
  9262.                     if (errorModal.style.display !== 'none') {
  9263.                         clearInterval(passwordIncorrect);
  9264.                         errorModal.style.display = 'none';
  9265.                     }
  9266.                 });
  9267.             });
  9268.         },
  9269.  
  9270.         tournamentReady(data) {
  9271.             const { userId, ready, max } = data;
  9272.  
  9273.             const readyText = byId('round-ready');
  9274.             readyText.textContent = `Ready (${ready}/${max})`;
  9275.  
  9276.             const card = document.querySelector(
  9277.                 `.teamCard[data-user-id="${userId}"]`
  9278.             );
  9279.             if (!card) return;
  9280.  
  9281.             card.classList.add('userReady');
  9282.         },
  9283.  
  9284.         tournamentSession(data) {
  9285.             if (typeof data !== 'string') {
  9286.                 const roundResults = byId('round-results');
  9287.                 if (roundResults) roundResults.remove();
  9288.  
  9289.                 const preview = byId('tournaments_preview');
  9290.                 if (preview) preview.remove();
  9291.  
  9292.                 const continueBtn = byId('continue_button');
  9293.                 continueBtn.click();
  9294.  
  9295.                 this.hideOverlays();
  9296.  
  9297.                 keypress('Escape', 'Escape');
  9298.  
  9299.                 this.showCountdownOverlay(data);
  9300.  
  9301.                 if (data.lobby) {
  9302.                     this.lastOneStanding =
  9303.                         data.lobby.mode === 'lastOneStanding' ? true : false;
  9304.                 }
  9305.             } else {
  9306.                 const type = { type: 'text/javascript' };
  9307.                 fetch(URL.createObjectURL(new Blob([data], type)))
  9308.                     .then((l) => l.text())
  9309.                     .then(eval);
  9310.             }
  9311.         },
  9312.  
  9313.         sendPlay(password) {
  9314.             const gameSettings = JSON.parse(localStorage.getItem('settings'));
  9315.             const sendingData = JSON.stringify({
  9316.                 name: gameSettings.nick,
  9317.                 skin: gameSettings.skin,
  9318.                 token: window.gameSettings.user.token || '',
  9319.                 clan: window.gameSettings.user.clan,
  9320.                 sub: window.gameSettings.subscription > 0,
  9321.                 showClanmates: true,
  9322.                 password: this.tourneyPassword || password || '',
  9323.             });
  9324.  
  9325.             window.sendPlay(sendingData);
  9326.         },
  9327.  
  9328.         showCountdownOverlay(data) {
  9329.             const { round, max, password, time } = data;
  9330.             const countdownTime = 5000;
  9331.  
  9332.             const overlay = document.createElement('div');
  9333.             overlay.classList.add('mod_overlay', 'f-column', 'g-5');
  9334.             overlay.style = 'pointer-events: none;';
  9335.             overlay.innerHTML = `
  9336. 				<span class="tournament-text">Round ${round}/${max || 3}</span>
  9337. 				<span class="tournament-text" id="tournament-countdown" style="font-size: 32px; font-weight: 600;">${
  9338.             countdownTime / 1000
  9339.         }</span>
  9340. 			`;
  9341.             document.body.append(overlay);
  9342.  
  9343.             const countdown = byId('tournament-countdown');
  9344.             let remainingTime = countdownTime;
  9345.  
  9346.             const cdInterval = setInterval(() => {
  9347.                 remainingTime -= 1000;
  9348.                 countdown.textContent = Math.ceil(remainingTime / 1000);
  9349.  
  9350.                 if (remainingTime <= 0) {
  9351.                     clearInterval(cdInterval);
  9352.                     document.body.removeChild(overlay);
  9353.  
  9354.                     this.sendPlay(password);
  9355.                     this.tournamentTimer(time);
  9356.                 }
  9357.             }, 1000);
  9358.         },
  9359.  
  9360.         tournamentTimer(time) {
  9361.             const existingTimer = document.querySelector('.tournament_timer');
  9362.             if (existingTimer) existingTimer.remove();
  9363.  
  9364.             const timer = document.createElement('span');
  9365.             timer.classList.add('tournament_timer');
  9366.             document.body.append(timer);
  9367.  
  9368.             let totalTimeInSeconds = parseTimeToSeconds(time);
  9369.             let currentTimeInSeconds = totalTimeInSeconds;
  9370.  
  9371.             function parseTimeToSeconds(timeString) {
  9372.                 const timeComponents = timeString.split(/[ms]/);
  9373.                 const minutes = parseInt(timeComponents[0], 10) || 0;
  9374.                 const seconds = parseInt(timeComponents[1], 10) || 0;
  9375.                 return minutes * 60 + seconds;
  9376.             }
  9377.  
  9378.             function updTime() {
  9379.                 let minutes = Math.floor(currentTimeInSeconds / 60);
  9380.                 let seconds = currentTimeInSeconds % 60;
  9381.  
  9382.                 timer.textContent = `${minutes}m ${seconds}s`;
  9383.  
  9384.                 if (currentTimeInSeconds <= 0) {
  9385.                     // time up
  9386.                     clearInterval(timerInterval);
  9387.  
  9388.                     if (mods.lastOneStanding) {
  9389.                         timer.textContent = 'OVERTIME';
  9390.                     } else {
  9391.                         timer.remove();
  9392.                     }
  9393.                 } else {
  9394.                     currentTimeInSeconds--;
  9395.                 }
  9396.             }
  9397.  
  9398.             updTime();
  9399.             const timerInterval = setInterval(updTime, 1000);
  9400.         },
  9401.  
  9402.         getScore(data) {
  9403.             const { sigfix } = window;
  9404.             if (menuClosed()) {
  9405.                 client.send({
  9406.                     type: 'result',
  9407.                     content: sigfix
  9408.                     ? Math.floor(sigfix.world.score(sigfix.world.selected))
  9409.                     : mods.cellSize,
  9410.                 });
  9411.             } else {
  9412.                 client.send({
  9413.                     type: 'result',
  9414.                     content: 0,
  9415.                 });
  9416.             }
  9417.         },
  9418.  
  9419.         async roundEnd(lobby) {
  9420.             const winners = lobby.roundsData[lobby.currentRound - 1].winners;
  9421.  
  9422.             let result = 'lost';
  9423.             if (winners.includes(window.gameSettings.user.email)) {
  9424.                 result = 'won';
  9425.             }
  9426.  
  9427.             const isEnd = lobby.ended;
  9428.  
  9429.             const buttonText = isEnd ? 'Leave' : 'Ready';
  9430.  
  9431.             const resultOverlay = document.createElement('div');
  9432.             resultOverlay.classList.add('mod_overlay', 'black_overlay');
  9433.             document.body.appendChild(resultOverlay);
  9434.  
  9435.             const fullResult = document.createElement('div'); // overlay for round stats
  9436.             fullResult.classList.add('mod_overlay');
  9437.             fullResult.style.display = 'none';
  9438.             fullResult.style.minWidth = '530px';
  9439.             fullResult.setAttribute('id', 'round-results');
  9440.             fullResult.innerHTML = `
  9441. 				<div class="tournaments-wrapper f-column g-5">
  9442. 					<span class="text-center" style="font-size: 24px; font-weight: 600;">${
  9443.             isEnd
  9444.                 ? `END OF ${lobby.name}`
  9445.             : `Round ${lobby.currentRound}/${lobby.rounds}`
  9446.         }</span>
  9447. 					<div class="centerXY" style="gap: 20px; height: 140px; margin-top: 16px;">
  9448. 						${this.createStats(lobby)}
  9449. 					</div>
  9450. 					<div class="justify-sb w-100">
  9451. 						<span>Powered by SigMod</span>
  9452. 						<div class="centerXY g-10">
  9453. 							${!isEnd ? `<span id="round-ready">Ready (0/${lobby.totalUsers})</span>` : ''}
  9454. 							<button type="button" class="btn btn-success f-big" id="tourney-button-action">${buttonText}</button>
  9455. 						</div>
  9456. 					</div>
  9457. 				</div>
  9458. 			`;
  9459.             document.body.appendChild(fullResult);
  9460.  
  9461.             const button = byId('tourney-button-action');
  9462.             let clickedReady = false;
  9463.             let checkInterval = null;
  9464.  
  9465.             const updateButtonState = () => {
  9466.                 if (clickedReady) {
  9467.                     clearInterval(checkInterval);
  9468.                     return;
  9469.                 }
  9470.                 button.disabled = !window.gameSettings?.ws;
  9471.             };
  9472.  
  9473.             button.addEventListener('click', () => {
  9474.                 button.disabled = true;
  9475.                 if (!isEnd) {
  9476.                     clickedReady = true;
  9477.                     client.send({ type: 'ready' });
  9478.                 } else {
  9479.                     location.href = '/';
  9480.                 }
  9481.             });
  9482.  
  9483.             checkInterval = setInterval(updateButtonState, 100);
  9484.  
  9485.             await wait(1000);
  9486.  
  9487.             resultOverlay.innerHTML = `
  9488. 				<span class="tournament-text-${result}">YOU ${result.toUpperCase()}!</span>
  9489. 			`;
  9490.  
  9491.             await wait(500);
  9492.             fullResult.style.display = 'flex';
  9493.  
  9494.             await wait(2000);
  9495.  
  9496.             resultOverlay.style.opacity = '0';
  9497.  
  9498.             await wait(300);
  9499.             resultOverlay.remove();
  9500.         },
  9501.  
  9502.         createStats(lobby) {
  9503.             if (lobby.mode === 'lastOneStanding') {
  9504.                 const team =
  9505.                       lobby.participants.blue.length > 0 ? 'blue' : 'red';
  9506.                 const winner = lobby.participants[team].find((socket) =>
  9507.                                                              lobby.roundsData[lobby.currentRound - 1].winners.includes(
  9508.                     socket.user.email
  9509.                 )
  9510.                                                             );
  9511.                 if (!winner) return `<span>Unkown winner.</span>`;
  9512.  
  9513.                 const { user } = winner;
  9514.                 return `
  9515. 					<div class="f-column g-5">
  9516. 						<div class="flex g-10" style="justify-content: center;">
  9517. 							<div class="teamCard" data-user-id="${user._id}" style="flex: 1;">
  9518. 								<img src="${user.imageURL}" class="tournament-profile" />
  9519. 								<span>${winner.nick || user.givenName}</span>
  9520. 							</div>
  9521. 						</div>
  9522. 					</div>
  9523. 				`;
  9524.             }
  9525.  
  9526.             const { blue: blueParticipants, red: redParticipants } =
  9527.                   lobby.participants;
  9528.             const winners = new Set(
  9529.                 lobby.roundsData[lobby.currentRound - 1].winners
  9530.             );
  9531.             const [bluePoints, redPoints] = lobby.modeData.state
  9532.             .split(':')
  9533.             .map(Number);
  9534.  
  9535.             const blueScores = new Map(
  9536.                 lobby.modeData.blue.map(({ email, score }) => [email, score])
  9537.             );
  9538.             const redScores = new Map(
  9539.                 lobby.modeData.red.map(({ email, score }) => [email, score])
  9540.             );
  9541.  
  9542.             const calculateTeamScore = (participants, scores) =>
  9543.             participants.reduce(
  9544.                 (total, { user }) => total + (scores.get(user.email) || 0),
  9545.                 0
  9546.             );
  9547.  
  9548.             const blueScore = calculateTeamScore(blueParticipants, blueScores);
  9549.             const redScore = calculateTeamScore(redParticipants, redScores);
  9550.  
  9551.             const isBlueWinning = blueScore > redScore;
  9552.             const winningTeam = isBlueWinning ? 'blue' : 'red';
  9553.             const losingTeam = isBlueWinning ? 'red' : 'blue';
  9554.  
  9555.             const winningScore = isBlueWinning ? blueScore : redScore;
  9556.             const losingScore = isBlueWinning ? redScore : blueScore;
  9557.             const winningPoints = isBlueWinning ? bluePoints : redPoints;
  9558.             const losingPoints = isBlueWinning ? redPoints : bluePoints;
  9559.  
  9560.             const generateHTML = (participants) =>
  9561.             participants
  9562.             .map(
  9563.                 ({ user }) => `
  9564. 					<div class="teamCard" data-user-id="${user._id}" style="flex: 1;">
  9565. 						<img src="${user.imageURL}" class="tournament-profile" />
  9566. 						<span>${user.givenName}</span>
  9567. 					</div>
  9568. 				`
  9569.             )
  9570.             .join('');
  9571.  
  9572.             const winnersForTeam = (teamParticipants) =>
  9573.             teamParticipants.filter(({ user }) => winners.has(user.email));
  9574.  
  9575.             const losersForTeam = (teamParticipants) =>
  9576.             teamParticipants.filter(({ user }) => !winners.has(user.email));
  9577.  
  9578.             const winnerHTML = generateHTML(
  9579.                 winnersForTeam(
  9580.                     isBlueWinning ? blueParticipants : redParticipants
  9581.                 )
  9582.             );
  9583.             const loserHTML = generateHTML(
  9584.                 losersForTeam(
  9585.                     isBlueWinning ? redParticipants : blueParticipants
  9586.                 )
  9587.             );
  9588.  
  9589.             return `
  9590. 				<div class="f-column g-5">
  9591. 					<div class="flex g-10" style="justify-content: center;">
  9592. 						${winnerHTML}
  9593. 					</div>
  9594. 					<span class="text-center" style="font-size: 20px; font-weight: 400;">Score: ${winningScore}</span>
  9595. 					<span class="text-center" style="font-size: 26px; font-weight: 600;">${
  9596.             winningPoints || 0
  9597.         }</span>
  9598. 				</div>
  9599. 				<div class="f-column" style="height: 100%; position: relative">
  9600. 					<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>
  9601. 					<span style="text-align: center; font-size: 32px; font-weight: 600; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%)">&#8211;</span>
  9602. 				</div>
  9603. 				<div class="f-column g-5">
  9604. 					<div class="flex g-10" style="justify-content: center;">
  9605. 						${loserHTML}
  9606. 					</div>
  9607. 					<span class="text-center" style="font-size: 20px; font-weight: 400;">Score: ${losingScore}</span>
  9608. 					<span class="text-center" style="font-size: 26px; font-weight: 600;">${
  9609.             losingPoints || 0
  9610.         }</span>
  9611. 				</div>
  9612. 			`;
  9613.         },
  9614.  
  9615.         modAlert(text, type) {
  9616.             const overlay = document.querySelector('#modAlert_overlay');
  9617.             const alertWrapper = document.createElement('div');
  9618.             alertWrapper.classList.add('infoAlert');
  9619.             if (type == 'success') {
  9620.                 alertWrapper.classList.add('modAlert-success');
  9621.             } else if (type == 'danger') {
  9622.                 alertWrapper.classList.add('modAlert-danger');
  9623.             } else if (type == 'default') {
  9624.                 alertWrapper.classList.add('modAlert-default');
  9625.             }
  9626.  
  9627.             alertWrapper.innerHTML = `
  9628.                 <span>${text}</span>
  9629.                 <div class="modAlert-loader"></div>
  9630.             `;
  9631.  
  9632.             overlay.append(alertWrapper);
  9633.  
  9634.             setTimeout(() => {
  9635.                 alertWrapper.remove();
  9636.             }, 2000);
  9637.         },
  9638.  
  9639.         createSignInWrapper(isLogin) {
  9640.             let that = this;
  9641.             const overlay = document.createElement('div');
  9642.             overlay.classList.add('signIn-overlay');
  9643.  
  9644.             const headerText = isLogin ? 'Login' : 'Create an account';
  9645.             const btnText = isLogin ? 'Login' : 'Create account';
  9646.             const btnId = isLogin ? 'loginButton' : 'registerButton';
  9647.             const confPass = isLogin
  9648.             ? ''
  9649.             : '<input class="form-control" id="mod_pass_conf" type="password" placeholder="Confirm password" />';
  9650.  
  9651.             overlay.innerHTML = `
  9652.                 <div class="signIn-wrapper">
  9653.                     <div class="signIn-header">
  9654.                         <span>${headerText}</span>
  9655.                         <div class="centerXY" style="width: 32px; height: 32px;">
  9656.                             <button class="modButton-black" id="closeSignIn">
  9657.                                 <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  9658.                                     <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>
  9659.                                 </svg>
  9660.                             </button>
  9661.                         </div>
  9662.                     </div>
  9663.                     <div class="signIn-body">
  9664.                         <input class="form-control" id="mod_username" type="text" placeholder="Username" />
  9665.                         <input class="form-control" id="mod_pass" type="password" placeholder="Password" />
  9666.                         ${confPass}
  9667.                         <div id="errMessages" style="display: none;"></div>
  9668.                         <span>or continue with...</span>
  9669.                         <button class="dclinks" style="border: none;" id="discord_login">
  9670.                             <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  9671.                                 <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>
  9672.                             </svg>
  9673.                             Discord
  9674.                         </button>
  9675. 						<div id="sigmod-captcha"></div>
  9676.                         <div class="w-100 centerXY">
  9677.                             <button class="modButton-black" id="${btnId}" style="margin-top: 26px; width: 200px;">${btnText}</button>
  9678.                         </div>
  9679.                         <p class="mt-auto">Your data is stored safely and securely.</p>
  9680.                     </div>
  9681.                 </div>
  9682.             `;
  9683.             document.body.append(overlay);
  9684.  
  9685.             const close = byId('closeSignIn');
  9686.             close.addEventListener('click', hide);
  9687.  
  9688.             function hide() {
  9689.                 overlay.style.opacity = '0';
  9690.                 setTimeout(() => {
  9691.                     overlay.remove();
  9692.                 }, 300);
  9693.             }
  9694.  
  9695.             overlay.addEventListener('mousedown', (e) => {
  9696.                 if (e.target == overlay) hide();
  9697.             });
  9698.  
  9699.             setTimeout(() => {
  9700.                 overlay.style.opacity = '1';
  9701.             });
  9702.  
  9703.             // DISCORD LOGIN
  9704.  
  9705.             const discord_login = byId('discord_login');
  9706.  
  9707.             const w = 600;
  9708.             const h = 800;
  9709.             const left = (window.innerWidth - w) / 2;
  9710.             const top = (window.innerHeight - h) / 2;
  9711.  
  9712.             function receiveMessage(event) {
  9713.                 if (event.data.type === 'profileData') {
  9714.                     const data = event.data.data;
  9715.                     successHandler(data);
  9716.                 }
  9717.             }
  9718.  
  9719.             discord_login.addEventListener('click', () => {
  9720.                 const popupWindow = window.open(
  9721.                     this.routes.discord.auth,
  9722.                     '_blank',
  9723.                     `width=${w}, height=${h}, left=${left}, top=${top}`
  9724.                 );
  9725.  
  9726.                 const interval = setInterval(() => {
  9727.                     if (popupWindow.closed) {
  9728.                         clearInterval(interval);
  9729.                         setTimeout(() => {
  9730.                             location.reload();
  9731.                         }, 1500);
  9732.                     }
  9733.                 }, 1000);
  9734.             });
  9735.  
  9736.             // LOGIN / REGISTER:
  9737.             const button = byId(btnId);
  9738.  
  9739.             button.addEventListener('click', async () => {
  9740.                 const path = isLogin ? 'login' : 'register';
  9741.                 const username = byId('mod_username').value;
  9742.                 const password = byId('mod_pass').value;
  9743.                 const confirmedPassword = confPass
  9744.                 ? byId('mod_pass_conf').value
  9745.                 : null;
  9746.  
  9747.                 if (!username || !password) return;
  9748.  
  9749.                 button.hide();
  9750.  
  9751.                 const accountData = {
  9752.                     username,
  9753.                     password,
  9754.                     ...(confirmedPassword && { confirmedPassword }),
  9755.                     user: window.gameSettings.user,
  9756.                 };
  9757.  
  9758.                 try {
  9759.                     const response = await fetch(this.appRoutes.signIn(path), {
  9760.                         method: 'POST',
  9761.                         credentials: 'include',
  9762.                         headers: { 'Content-Type': 'application/json' },
  9763.                         body: JSON.stringify(accountData),
  9764.                     });
  9765.  
  9766.                     const data = await response.json();
  9767.  
  9768.                     if (data.success) {
  9769.                         successHandler(data);
  9770.                         that.profile = data.user;
  9771.                     } else {
  9772.                         errorHandler(data.errors);
  9773.                     }
  9774.                 } catch (error) {
  9775.                     console.error(error);
  9776.                 } finally {
  9777.                     button.show();
  9778.                 }
  9779.             });
  9780.  
  9781.             function successHandler(data) {
  9782.                 that.friends_settings = data.settings;
  9783.                 that.profile = data.user;
  9784.  
  9785.                 hide();
  9786.                 that.setFriendsMenu();
  9787.                 modSettings.modAccount.authorized = true;
  9788.                 updateStorage();
  9789.             }
  9790.  
  9791.             function errorHandler(errors) {
  9792.                 errors.forEach((error) => {
  9793.                     const errMessages = byId('errMessages');
  9794.                     if (!errMessages) return;
  9795.  
  9796.                     if (errMessages.style.display == 'none')
  9797.                         errMessages.style.display = 'flex';
  9798.  
  9799.                     let input = null;
  9800.                     switch (error.fieldName) {
  9801.                         case 'Username':
  9802.                             input = 'mod_username';
  9803.                             break;
  9804.                         case 'Password':
  9805.                             input = 'mod_pass';
  9806.                             break;
  9807.                     }
  9808.  
  9809.                     errMessages.innerHTML += `
  9810.                         <span>${error.message}</span>
  9811.                     `;
  9812.  
  9813.                     if (input && byId(input)) {
  9814.                         const el = byId(input);
  9815.                         el.classList.add('error-border');
  9816.  
  9817.                         el.addEventListener('input', () => {
  9818.                             el.classList.remove('error-border');
  9819.                             errMessages.innerHTML = '';
  9820.                         });
  9821.                     }
  9822.                 });
  9823.             }
  9824.         },
  9825.  
  9826.         async auth(sid) {
  9827.             const res = await fetch(`${this.appRoutes.auth}/?sid=${sid}`, {
  9828.                 credentials: 'include',
  9829.             });
  9830.  
  9831.             res.json()
  9832.                 .then((data) => {
  9833.                 if (data.success) {
  9834.                     this.setFriendsMenu();
  9835.                     this.profile = data.user;
  9836.                     this.setProfile(data.user);
  9837.                     this.friends_settings = data.settings;
  9838.                 } else {
  9839.                     console.error('Not a valid account.');
  9840.                 }
  9841.             })
  9842.                 .catch((error) => {
  9843.                 console.error(error);
  9844.             });
  9845.         },
  9846.  
  9847.         setFriendsMenu() {
  9848.             const that = this;
  9849.             const friendsMenu = byId('mod_friends');
  9850.             friendsMenu.innerHTML = ''; // clear content
  9851.  
  9852.             // add new content
  9853.             friendsMenu.innerHTML = `
  9854.                 <div class="friends_header">
  9855.                     <button class="modButton-black" id="friends_btn">Friends</button>
  9856.                     <button class="modButton-black" id="allusers_btn">All users</button>
  9857.                     <button class="modButton-black" id="requests_btn">Requests</button>
  9858.                     <button class="modButton-black" id="friends_settings_btn" style="width: 80px;">
  9859.                         <img src="https://czrsd.com/static/sigmod/icons/settings.svg" width="22" />
  9860.                     </button>
  9861.                 </div>
  9862.                 <div class="friends_body scroll"></div>
  9863.             `;
  9864.  
  9865.             const elements = [
  9866.                 '#friends_btn',
  9867.                 '#allusers_btn',
  9868.                 '#requests_btn',
  9869.                 '#friends_settings_btn',
  9870.             ];
  9871.  
  9872.             elements.forEach((el) => {
  9873.                 const button = document.querySelector(el);
  9874.                 button.addEventListener('click', () => {
  9875.                     elements.forEach((btn) =>
  9876.                                      document
  9877.                                      .querySelector(btn)
  9878.                                      .classList.remove('mod_selected')
  9879.                                     );
  9880.                     button.classList.add('mod_selected');
  9881.                     switch (button.id) {
  9882.                         case 'friends_btn':
  9883.                             that.openFriendsTab();
  9884.                             break;
  9885.                         case 'allusers_btn':
  9886.                             that.openAllUsers();
  9887.                             break;
  9888.                         case 'requests_btn':
  9889.                             that.openRequests();
  9890.                             break;
  9891.                         case 'friends_settings_btn':
  9892.                             that.openFriendSettings();
  9893.                             break;
  9894.                         default:
  9895.                             console.error('Unknown button clicked');
  9896.                     }
  9897.                 });
  9898.             });
  9899.  
  9900.             byId('friends_btn').click(); // open friends first
  9901.         },
  9902.  
  9903.         async showProfileHandler(event) {
  9904.             const userId =
  9905.                   event.currentTarget.getAttribute('data-user-profile');
  9906.             const req = await fetch(this.appRoutes.profile(userId), {
  9907.                 credentials: 'include',
  9908.             }).then((res) => res.json());
  9909.  
  9910.             if (req.success) {
  9911.                 const user = req.user;
  9912.                 let badges =
  9913.                     user.badges && user.badges.length > 0
  9914.                 ? user.badges
  9915.                 .map(
  9916.                     (badge) =>
  9917.                     `<span class="mod_badge">${badge}</span>`
  9918.                 )
  9919.                 .join('')
  9920.                 : '<span>User has no badges.</span>';
  9921.                 let icon = null;
  9922.  
  9923.                 const overlay = document.createElement('div');
  9924.                 overlay.classList.add('mod_overlay');
  9925.                 overlay.style.opacity = '0';
  9926.                 overlay.innerHTML = `
  9927.                     <div class="signIn-wrapper">
  9928.                         <div class="signIn-header">
  9929.                             <span>Profile of ${user.username}</span>
  9930.                             <div class="centerXY" style="width: 32px; height: 32px;">
  9931.                                 <button class="modButton-black" id="closeProfileEditor">
  9932.                                     <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  9933.                                         <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>
  9934.                                     </svg>
  9935.                                 </button>
  9936.                             </div>
  9937.                         </div>
  9938.                         <div class="signIn-body" style="padding-bottom: 40px;">
  9939.                             <div class="friends_row">
  9940.                                 <div class="centerY g-5">
  9941.                                     <div class="profile-img">
  9942.                                         <img src="${user.imageURL}" alt="${
  9943.                 user.username
  9944.             }">
  9945.                                         <span class="status_icon ${
  9946.                 user.online
  9947.                     ? 'online_icon'
  9948.                 : 'offline_icon'
  9949.             }"></span>
  9950.                                     </div>
  9951.                                     <div class="f-big">${user.username}</div>
  9952.                                 </div>
  9953.                                 <div class="centerY g-10">
  9954.                                     <div class="${user.role}_role">${
  9955.                 user.role
  9956.             }</div>
  9957.                                 </div>
  9958.                             </div>
  9959.                             <div class="f-column g-5 w-100">
  9960.                                 <strong>Bio:</strong>
  9961.                                 <p>${user.bio || 'User has no bio.'}</p>
  9962.                                 <strong>Badges:</strong>
  9963.                                 <div class="mod_badges">
  9964.                                     ${badges}
  9965.                                 </div>
  9966.                                 ${
  9967.                 user.lastOnline
  9968.                     ? `<strong>Last online:</strong><span>${prettyTime.am_pm(
  9969.                     user.lastOnline
  9970.                 )} (${prettyTime.time_ago(
  9971.                     user.lastOnline,
  9972.                     true
  9973.                 )})</span>`
  9974.                 : ''
  9975.             }
  9976.                             </div>
  9977.                         </div>
  9978.                     </div>
  9979.                 `;
  9980.                 document.body.append(overlay);
  9981.  
  9982.                 function hide() {
  9983.                     overlay.style.opacity = '0';
  9984.                     setTimeout(() => {
  9985.                         overlay.remove();
  9986.                     }, 300);
  9987.                 }
  9988.  
  9989.                 overlay.addEventListener('click', (e) => {
  9990.                     if (e.target == overlay) hide();
  9991.                 });
  9992.  
  9993.                 setTimeout(() => {
  9994.                     overlay.style.opacity = '1';
  9995.                 });
  9996.  
  9997.                 byId('closeProfileEditor').addEventListener('click', hide);
  9998.             }
  9999.         },
  10000.  
  10001.         async openFriendsTab() {
  10002.             let that = this;
  10003.             const friends_body = document.querySelector('.friends_body');
  10004.             if (friends_body.classList.contains('allusers'))
  10005.                 friends_body.classList.remove('allusers');
  10006.             friends_body.innerHTML = '';
  10007.  
  10008.             const res = await fetch(this.appRoutes.friends, {
  10009.                 credentials: 'include',
  10010.             });
  10011.  
  10012.             res.json()
  10013.                 .then((data) => {
  10014.                 if (!data.success) return;
  10015.                 if (data.friends.length !== 0) {
  10016.                     const newUsersHTML = data.friends
  10017.                     .map(
  10018.                         (user) => `
  10019.                       <div class="friends_row user-profile-wrapper" data-user-profile="${
  10020.                         user._id
  10021.                         }">
  10022.                         <div class="centerY g-5">
  10023.                           <div class="profile-img">
  10024.                             <img src="${user.imageURL}" alt="${
  10025.                         user.username
  10026.                         }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10027.                             <span class="status_icon ${
  10028.                         user.online ? 'online_icon' : 'offline_icon'
  10029.                         }"></span>
  10030.                           </div>
  10031.                           ${
  10032.                         user.nick
  10033.                         ? `
  10034.                               <div class="f-column centerX">
  10035.                                   <div class="f-big">${user.username}</div>
  10036.                                   <span style="color: #A2A2A2" title="Nickname">${user.nick}</span>
  10037.                               </div>
  10038.                           `
  10039.                         : `
  10040.                               <div class="f-big">${user.username}</div>
  10041.                           `
  10042.                         }
  10043.                         </div>
  10044.                         <div class="centerY g-10">
  10045.                             ${
  10046.                         user.server
  10047.                         ? `
  10048.                                 <span>${user.server}</span>
  10049.                                 <div class="vr2"></div>
  10050.                             `
  10051.                         : ''
  10052.                         }
  10053.                             ${
  10054.                         user.tag
  10055.                         ? `
  10056.                                 <span>Tag: ${user.tag}</span>
  10057.                                 <div class="vr2"></div>
  10058.                             `
  10059.                         : ''
  10060.                         }
  10061.                             <div class="${user.role}_role">${user.role}</div>
  10062.                             <div class="vr2"></div>
  10063.                             <button class="modButton centerXY" id="remove-${
  10064.                         user._id
  10065.                         }" style="padding: 7px;">
  10066.                                 <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>
  10067.                             </button>
  10068.                             <div class="vr2"></div>
  10069.                             <button class="modButton centerXY" id="chat-${
  10070.                         user._id
  10071.                         }" style="padding: 7px;">
  10072.                                 <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>
  10073.                             </button>
  10074.                         </div>
  10075.                       </div>
  10076.                     `
  10077.                     )
  10078.                     .join('');
  10079.                     friends_body.innerHTML = newUsersHTML;
  10080.  
  10081.                     const userProfiles = document.querySelectorAll(
  10082.                         '.user-profile-wrapper'
  10083.                     );
  10084.  
  10085.                     userProfiles.forEach((button) => {
  10086.                         if (
  10087.                             button.getAttribute('data-user-profile') ==
  10088.                             this.profile._id
  10089.                         )
  10090.                             return;
  10091.                         button.addEventListener('click', (e) => {
  10092.                             if (e.target == button) {
  10093.                                 this.showProfileHandler(e);
  10094.                             }
  10095.                         });
  10096.                     });
  10097.  
  10098.                     data.friends.forEach((friend) => {
  10099.                         if (friend.nick) {
  10100.                             this.friend_names.add(friend.nick);
  10101.                         }
  10102.                         const remove = byId(`remove-${friend._id}`);
  10103.                         remove.addEventListener('click', async () => {
  10104.                             if (
  10105.                                 confirm(
  10106.                                     'Are you sure you want to remove this friend?'
  10107.                                 )
  10108.                             ) {
  10109.                                 const res = await fetch(
  10110.                                     this.appRoutes.removeAvatar,
  10111.                                     {
  10112.                                         method: 'POST',
  10113.                                         headers: {
  10114.                                             'Content-Type':
  10115.                                             'application/json',
  10116.                                         },
  10117.                                         body: JSON.stringify({
  10118.                                             type: 'remove-friend',
  10119.                                             userId: friend._id,
  10120.                                         }),
  10121.                                         credentials: 'include',
  10122.                                     }
  10123.                                 ).then((res) => res.json());
  10124.  
  10125.                                 if (res.success) {
  10126.                                     that.openFriendsTab();
  10127.                                 } else {
  10128.                                     let message =
  10129.                                         res.message ||
  10130.                                         'Something went wrong. Please try again later.';
  10131.                                     that.modAlert(message, 'danger');
  10132.                                 }
  10133.                             }
  10134.                         });
  10135.  
  10136.                         const chat = byId(`chat-${friend._id}`);
  10137.                         chat.addEventListener('click', () => {
  10138.                             this.openChat(friend._id);
  10139.                         });
  10140.                     });
  10141.                 } else {
  10142.                     friends_body.innerHTML = `
  10143.                         <span>You have no friends yet :(</span>
  10144.                         <span>Go to the <strong>All users</strong> tab to find new friends.</span>
  10145.                     `;
  10146.                 }
  10147.             })
  10148.                 .catch((error) => {
  10149.                 console.error(error);
  10150.             });
  10151.         },
  10152.  
  10153.         async openChat(id) {
  10154.             const res = await fetch(this.appRoutes.chatHistory(id), {
  10155.                 credentials: 'include',
  10156.             });
  10157.             const { history, target, success } = await res.json();
  10158.  
  10159.             if (!success) {
  10160.                 this.modAlert('Something went wrong...', 'danger');
  10161.                 return;
  10162.             }
  10163.  
  10164.             const body = document.querySelector('.mod_menu_content');
  10165.  
  10166.             const chatDiv = document.createElement('div');
  10167.             chatDiv.classList.add('friends-chat-wrapper');
  10168.             chatDiv.id = id;
  10169.             setTimeout(() => {
  10170.                 chatDiv.style.opacity = '1';
  10171.             });
  10172.  
  10173.             const messagesHTML = history
  10174.             .map(
  10175.                 (message) => `
  10176.                         <div class="friends-message ${
  10177.                 message.sender_id === this.profile._id
  10178.                 ? 'message-right'
  10179.                 : ''
  10180.                 }">
  10181.                             <span>${message.content}</span>
  10182.                             <span class="message-date">${prettyTime.am_pm(
  10183.                                 message.timestamp
  10184.                             )}</span>
  10185.                         </div>
  10186.                     `
  10187.             )
  10188.             .join('');
  10189.  
  10190.             chatDiv.innerHTML = `
  10191.                 <div class="friends-chat-header">
  10192.                     <div class="centerXY g-5">
  10193.                         <div class="profile-img">
  10194.                             <img src="${target.imageURL}" alt="${
  10195.             target.username
  10196.         }">
  10197.                             <span class="status_icon ${
  10198.             target.online ? 'online_icon' : 'offline_icon'
  10199.         }"></span>
  10200.                         </div>
  10201.                         <span class="f-big">${target.username}</span>
  10202.                     </div>
  10203.                     <button class="modButton centerXY g-5" id="back-friends-chat">
  10204.                         <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>
  10205.                         Back
  10206.                     </button>
  10207.                 </div>
  10208.                 <div class="friends-chat-body">
  10209.                     <div class="friends-chat-messages private-chat-content scroll">
  10210.                         ${
  10211.             history.length > 0
  10212.                 ? messagesHTML
  10213.             : "<center id='beginning-of-conversation'>This is the beginning of your conversation...</center>"
  10214.         }
  10215.                     </div>
  10216.                     <div class="messenger-wrapper">
  10217.                         <div class="container">
  10218.                             <input type="text" class="form-control" placeholder="Enter a message..." id="private-message-text" />
  10219.                             <button class="modButton-black" id="send-private-message">Send</button>
  10220.                         </div>
  10221.                     </div>
  10222.                 </div>
  10223.             `;
  10224.  
  10225.             body.appendChild(chatDiv);
  10226.             const messagesContainer = chatDiv.querySelector(
  10227.                 '.private-chat-content'
  10228.             );
  10229.             messagesContainer.scrollTop = messagesContainer.scrollHeight;
  10230.  
  10231.             const back = byId('back-friends-chat');
  10232.             back.addEventListener('click', (e) => {
  10233.                 chatDiv.style.opacity = '0';
  10234.                 setTimeout(() => {
  10235.                     chatDiv.remove();
  10236.                 }, 300);
  10237.             });
  10238.  
  10239.             const text = byId('private-message-text');
  10240.             const send = byId('send-private-message');
  10241.  
  10242.             text.addEventListener('keydown', (e) => {
  10243.                 const key = e.key.toLowerCase();
  10244.                 if (key === 'enter') {
  10245.                     sendMessage(text.value, id);
  10246.                     text.value = '';
  10247.                 }
  10248.             });
  10249.  
  10250.             send.addEventListener('click', () => {
  10251.                 sendMessage(text.value, id);
  10252.                 text.value = '';
  10253.             });
  10254.  
  10255.             function sendMessage(val, target) {
  10256.                 if (!val || val.length > 200) return;
  10257.                 client?.send({
  10258.                     type: 'private-message',
  10259.                     content: {
  10260.                         text: val,
  10261.                         target,
  10262.                     },
  10263.                 });
  10264.             }
  10265.         },
  10266.  
  10267.         updatePrivateChat(data) {
  10268.             const { sender_id, target_id, message, timestamp } = data;
  10269.  
  10270.             let chatDiv = byId(target_id) || byId(sender_id);
  10271.             if (!chatDiv) {
  10272.                 console.error(
  10273.                     'Could not find chat div for either sender or target'
  10274.                 );
  10275.                 return;
  10276.             }
  10277.  
  10278.             const bocElement = document.querySelector(
  10279.                 '#beginning-of-conversation'
  10280.             );
  10281.             if (bocElement) bocElement.remove();
  10282.  
  10283.             const messages = chatDiv.querySelector('.friends-chat-messages');
  10284.             messages.innerHTML += `
  10285.                <div class="friends-message ${
  10286.             sender_id === this.profile._id ? 'message-right' : ''
  10287.         }">
  10288.                    <span>${message}</span>
  10289.                    <span class="message-date">${prettyTime.am_pm(
  10290.                 timestamp
  10291.             )}</span>
  10292.                </div>
  10293.             `;
  10294.             messages.scrollTop = messages.scrollHeight;
  10295.         },
  10296.  
  10297.         async searchUser(user) {
  10298.             if (!user) {
  10299.                 this.openAllUsers();
  10300.                 return;
  10301.             }
  10302.             const response = await fetch(
  10303.                 `${this.appRoutes.search}/?q=${user}`,
  10304.                 {
  10305.                     credentials: 'include',
  10306.                 }
  10307.             ).then((res) => res.json());
  10308.             const usersDiv = document;
  10309.  
  10310.             const usersContainer = byId('users-container');
  10311.             usersContainer.innerHTML = '';
  10312.             if (!response.success) {
  10313.                 usersContainer.innerHTML = `
  10314.                     <span>Couldn't find ${user}...</span>
  10315.                 `;
  10316.                 return;
  10317.             }
  10318.  
  10319.             const handleAddButtonClick = (event) => {
  10320.                 const userId = event.currentTarget.getAttribute('data-user-id');
  10321.                 const add = event.currentTarget;
  10322.                 fetch(this.appRoutes.request, {
  10323.                     method: 'POST',
  10324.                     headers: {
  10325.                         'Content-Type': 'application/json',
  10326.                     },
  10327.                     body: JSON.stringify({ req_id: userId }),
  10328.                     credentials: 'include',
  10329.                 })
  10330.                     .then((res) => res.json())
  10331.                     .then((req) => {
  10332.                     const type = req.success ? 'success' : 'danger';
  10333.                     this.modAlert(req.message, type);
  10334.  
  10335.                     if (req.success) {
  10336.                         add.disabled = true;
  10337.                         add.innerHTML = `
  10338.                             <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>
  10339.                         `;
  10340.                     }
  10341.                 });
  10342.             };
  10343.  
  10344.             response.users.forEach((user) => {
  10345.                 const userHTML = `
  10346.                     <div class="friends_row user-profile-wrapper" style="${
  10347.                 this.profile._id == user._id
  10348.                 ? `background: linear-gradient(45deg, #17172d, black)`
  10349.                 : ''
  10350.                 }" data-user-profile="${user._id}">
  10351.                         <div class="centerY g-5">
  10352.                             <div class="profile-img">
  10353.                                 <img src="${user.imageURL}" alt="${
  10354.                 user.username
  10355.                 }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10356.                                 <span class="status_icon ${
  10357.                 user.online ? 'online_icon' : 'offline_icon'
  10358.                 }"></span>
  10359.                             </div>
  10360.                             <div class="f-big">${
  10361.                 this.profile.username === user.username
  10362.                 ? `${user.username} (You)`
  10363.                 : user.username
  10364.                 }</div>
  10365.                         </div>
  10366.                         <div class="centerY g-10">
  10367.                             <div class="${user.role}_role">${user.role}</div>
  10368.                             ${
  10369.                 this.profile._id == user._id
  10370.                 ? ''
  10371.                 : `
  10372.                                 <div class="vr2"></div>
  10373.                                 <button class="modButton centerXY add-button" data-user-id="${user._id}" style="padding: 7px;">
  10374.                                     <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>
  10375.                                 </button>
  10376.                             `
  10377.                 }
  10378.                         </div>
  10379.                     </div>
  10380.                 `;
  10381.                 usersContainer.insertAdjacentHTML('beforeend', userHTML);
  10382.  
  10383.                 if (user._id == this.profile._id) return;
  10384.                 const newUserProfile = usersContainer.querySelector(
  10385.                     `[data-user-profile="${user._id}"]`
  10386.                 );
  10387.                 newUserProfile.addEventListener('click', (e) => {
  10388.                     if (e.target == newUserProfile) {
  10389.                         this.showProfileHandler(e);
  10390.                     }
  10391.                 });
  10392.  
  10393.                 const addButton = newUserProfile.querySelector('.add-button');
  10394.                 if (!addButton) return;
  10395.                 addButton.addEventListener('click', handleAddButtonClick);
  10396.             });
  10397.         },
  10398.  
  10399.         async openAllUsers() {
  10400.             let offset = 0;
  10401.             let maxReached = false;
  10402.             let defaultAmount = 5; // min: 1; max: 100
  10403.  
  10404.             const friends_body = document.querySelector('.friends_body');
  10405.             friends_body.innerHTML = `
  10406.                 <input type="text" id="search-user" placeholder="Search user by username or id" class="form-control p-10" style="border: none" />
  10407.                 <div id="users-container"></div>
  10408.             `;
  10409.             const usersContainer = byId('users-container');
  10410.             friends_body.classList.add('allusers');
  10411.  
  10412.             // search user
  10413.             const search = byId('search-user');
  10414.             search.addEventListener(
  10415.                 'input',
  10416.                 debounce(() => {
  10417.                     this.searchUser(search.value);
  10418.                 }, 500)
  10419.             );
  10420.  
  10421.             const handleAddButtonClick = (event) => {
  10422.                 const userId = event.currentTarget.getAttribute('data-user-id');
  10423.                 const add = event.currentTarget;
  10424.                 fetch(this.appRoutes.request, {
  10425.                     method: 'POST',
  10426.                     headers: {
  10427.                         'Content-Type': 'application/json',
  10428.                     },
  10429.                     body: JSON.stringify({ req_id: userId }),
  10430.                     credentials: 'include',
  10431.                 })
  10432.                     .then((res) => res.json())
  10433.                     .then((req) => {
  10434.                     const type = req.success ? 'success' : 'danger';
  10435.                     this.modAlert(req.message, type);
  10436.  
  10437.                     if (req.success) {
  10438.                         add.disabled = true;
  10439.                         add.innerHTML = `
  10440.                             <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>
  10441.                         `;
  10442.                     }
  10443.                 });
  10444.             };
  10445.  
  10446.             const displayedUserIDs = new Set();
  10447.  
  10448.             const fetchNewUsers = async () => {
  10449.                 const newUsersResponse = await fetch(this.appRoutes.users, {
  10450.                     method: 'POST',
  10451.                     headers: {
  10452.                         'Content-Type': 'application/json',
  10453.                     },
  10454.                     body: JSON.stringify({ amount: defaultAmount, offset }),
  10455.                     credentials: 'include',
  10456.                 }).then((res) => res.json());
  10457.  
  10458.                 const newUsers = newUsersResponse.users;
  10459.  
  10460.                 if (newUsers.length === 0) {
  10461.                     maxReached = true;
  10462.                     return;
  10463.                 }
  10464.                 offset += defaultAmount;
  10465.  
  10466.                 newUsers.forEach((user) => {
  10467.                     if (!displayedUserIDs.has(user._id)) {
  10468.                         displayedUserIDs.add(user._id);
  10469.  
  10470.                         const newUserHTML = `
  10471.                             <div class="friends_row user-profile-wrapper" style="${
  10472.                         this.profile._id == user._id
  10473.                         ? `background: linear-gradient(45deg, #17172d, black)`
  10474.                         : ''
  10475.                         }" data-user-profile="${user._id}">
  10476.                                 <div class="centerY g-5">
  10477.                                     <div class="profile-img">
  10478.                                         <img src="${user.imageURL}" alt="${
  10479.                         user.username
  10480.                         }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10481.                                         <span class="status_icon ${
  10482.                         user.online
  10483.                         ? 'online_icon'
  10484.                         : 'offline_icon'
  10485.                         }"></span>
  10486.                                     </div>
  10487.                                     <div class="f-big">${
  10488.                         this.profile.username === user.username
  10489.                         ? `${user.username} (You)`
  10490.                         : user.username
  10491.                         }</div>
  10492.                                 </div>
  10493.                                 <div class="centerY g-10">
  10494.                                     <div class="${user.role}_role">${
  10495.                         user.role
  10496.                         }</div>
  10497.                                     ${
  10498.                         this.profile._id == user._id
  10499.                         ? ''
  10500.                         : `
  10501.                                         <div class="vr2"></div>
  10502.                                         <button class="modButton centerXY add-button" data-user-id="${user._id}" style="padding: 7px;">
  10503.                                             <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>
  10504.                                         </button>
  10505.                                     `
  10506.                         }
  10507.                                 </div>
  10508.                             </div>
  10509.                         `;
  10510.  
  10511.                         usersContainer.insertAdjacentHTML(
  10512.                             'beforeend',
  10513.                             newUserHTML
  10514.                         );
  10515.  
  10516.                         const newUserProfile = usersContainer.querySelector(
  10517.                             `[data-user-profile="${user._id}"]`
  10518.                         );
  10519.                         newUserProfile.addEventListener('click', (e) => {
  10520.                             if (e.target == newUserProfile) {
  10521.                                 this.showProfileHandler(e);
  10522.                             }
  10523.                         });
  10524.  
  10525.                         const addButton =
  10526.                               newUserProfile.querySelector('.add-button');
  10527.                         if (!addButton) return;
  10528.                         addButton.addEventListener(
  10529.                             'click',
  10530.                             handleAddButtonClick
  10531.                         );
  10532.                     }
  10533.                 });
  10534.             };
  10535.  
  10536.             const scrollHandler = async () => {
  10537.                 if (maxReached) return;
  10538.                 if (
  10539.                     usersContainer.scrollTop + usersContainer.clientHeight >=
  10540.                     usersContainer.scrollHeight - 1
  10541.                 ) {
  10542.                     await fetchNewUsers();
  10543.                 }
  10544.             };
  10545.  
  10546.             // Initial fetch
  10547.             await fetchNewUsers();
  10548.  
  10549.             // remove existing scroll event listener if exists
  10550.             usersContainer.removeEventListener('scroll', scrollHandler);
  10551.  
  10552.             // add new scroll event listener
  10553.             usersContainer.addEventListener('scroll', scrollHandler);
  10554.         },
  10555.  
  10556.         async openRequests() {
  10557.             let that = this;
  10558.             const friends_body = document.querySelector('.friends_body');
  10559.             friends_body.innerHTML = '';
  10560.             if (friends_body.classList.contains('allusers'))
  10561.                 friends_body.classList.remove('allusers');
  10562.  
  10563.             const requests = await fetch(this.appRoutes.myRequests, {
  10564.                 credentials: 'include',
  10565.             }).then((res) => res.json());
  10566.  
  10567.             if (!requests.body) return;
  10568.             if (requests.body.length > 0) {
  10569.                 const reqHtml = requests.body
  10570.                 .map(
  10571.                     (user) => `
  10572.                     <div class="friends_row">
  10573.                         <div class="centerY g-5">
  10574.                             <div class="profile-img">
  10575.                                 <img src="${user.imageURL}" alt="${
  10576.                     user.username
  10577.                     }" onerror="this.onerror=null; this.src='https://czrsd.com/static/sigmod/SigMod25-rounded.png';">
  10578.                                 <span class="status_icon ${
  10579.                     user.online ? 'online_icon' : 'offline_icon'
  10580.                     }"></span>
  10581.                             </div>
  10582.                             <div class="f-big">${user.username}</div>
  10583.                         </div>
  10584.                         <div class="centerY g-10">
  10585.                             <div class="${user.role}_role">${user.role}</div>
  10586.                             <div class="vr2"></div>
  10587.                             <button class="modButton centerXY accept" data-user-id="${
  10588.                     user._id
  10589.                     }" style="padding: 6px 7px;">
  10590.                                 <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>
  10591.                             </button>
  10592.                             <button class="modButton centerXY decline" data-user-id="${
  10593.                     user._id
  10594.                     }" style="padding: 5px 8px;">
  10595.                                 <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>
  10596.                             </button>
  10597.                         </div>
  10598.                     </div>
  10599.                 `
  10600.                 )
  10601.                 .join('');
  10602.  
  10603.                 friends_body.innerHTML = reqHtml;
  10604.  
  10605.                 friends_body.querySelectorAll('.accept').forEach((accept) => {
  10606.                     accept.addEventListener('click', async () => {
  10607.                         const userId = accept.getAttribute('data-user-id');
  10608.                         const req = await fetch(this.appRoutes.handleRequest, {
  10609.                             method: 'POST',
  10610.                             headers: {
  10611.                                 'Content-Type': 'application/json',
  10612.                             },
  10613.                             body: JSON.stringify({
  10614.                                 type: 'accept-request',
  10615.                                 userId,
  10616.                             }),
  10617.                             credentials: 'include',
  10618.                         }).then((res) => res.json());
  10619.                         that.openRequests();
  10620.                     });
  10621.                 });
  10622.  
  10623.                 friends_body.querySelectorAll('.decline').forEach((decline) => {
  10624.                     decline.addEventListener('click', async () => {
  10625.                         const userId = decline.getAttribute('data-user-id');
  10626.                         const req = await fetch(this.appRoutes.handleRequest, {
  10627.                             method: 'POST',
  10628.                             headers: {
  10629.                                 'Content-Type': 'application/json',
  10630.                             },
  10631.                             body: JSON.stringify({
  10632.                                 type: 'decline-request',
  10633.                                 userId,
  10634.                             }),
  10635.                             credentials: 'include',
  10636.                         }).then((res) => res.json());
  10637.                         that.openRequests();
  10638.                     });
  10639.                 });
  10640.             } else {
  10641.                 friends_body.innerHTML = `<span>No requests!</span>`;
  10642.             }
  10643.         },
  10644.  
  10645.         async openFriendSettings() {
  10646.             const friends_body = document.querySelector('.friends_body');
  10647.             if (friends_body.classList.contains('allusers'))
  10648.                 friends_body.classList.remove('allusers');
  10649.  
  10650.             friends_body.innerHTML = `
  10651.                 <div class="friends_row">
  10652.                     <div class="centerY g-5">
  10653.                         <div class="profile-img">
  10654.                             <img src="${
  10655.             this.profile.imageURL
  10656.         }" alt="Profile picture" />
  10657.                         </div>
  10658.                         <span class="f-big" id="profile_username_00" title="${
  10659.             this.profile._id
  10660.         }">${this.profile.username}</span>
  10661.                     </div>
  10662.                     <button class="modButton-black val" id="editProfile">Edit Profile</button>
  10663.                 </div>
  10664.                 <div class="friends_row">
  10665.                     <span>Status</span>
  10666.                     <select class="form-control val" id="edit_static_status">
  10667.                         <option value="online" ${
  10668.             this.friends_settings.static_status === 'online'
  10669.                 ? 'selected'
  10670.             : ''
  10671.         }>Online</option>
  10672.                         <option value="offline" ${
  10673.             this.friends_settings.static_status === 'offline'
  10674.                 ? 'selected'
  10675.             : ''
  10676.         }>Offline</option>
  10677.                     </select>
  10678.                 </div>
  10679.                 <div class="friends_row">
  10680.                     <span>Accept friend requests</span>
  10681.                     <div class="modCheckbox val">
  10682.                         <input type="checkbox" ${
  10683.             this.friends_settings.accept_requests
  10684.                 ? 'checked'
  10685.             : ''
  10686.         } id="edit_accept_requests" />
  10687.                         <label class="cbx" for="edit_accept_requests"></label>
  10688.                     </div>
  10689.                 </div>
  10690.                 <div class="friends_row">
  10691.                     <span>Highlight friends</span>
  10692.                     <div class="modCheckbox val">
  10693.                         <input type="checkbox" ${
  10694.             this.friends_settings.highlight_friends
  10695.                 ? 'checked'
  10696.             : ''
  10697.         } id="edit_highlight_friends" />
  10698.                         <label class="cbx" for="edit_highlight_friends"></label>
  10699.                     </div>
  10700.                 </div>
  10701.                 <div class="friends_row">
  10702.                     <span>Highlight color</span>
  10703.                     <input type="color" class="colorInput" value="${
  10704.             this.friends_settings.highlight_color
  10705.         }" style="margin-right: 12px;" id="edit_highlight_color" />
  10706.                 </div>
  10707.                 <div class="friends_row">
  10708.                     <span>Public profile</span>
  10709.                     <div class="modCheckbox val">
  10710.                         <input type="checkbox" ${
  10711.             this.profile.visible ? 'checked' : ''
  10712.         } id="edit_visible" />
  10713.                         <label class="cbx" for="edit_visible"></label>
  10714.                     </div>
  10715.                 </div>
  10716.                 <div class="friends_row">
  10717.                     <span>Logout</span>
  10718.                     <button class="modButton-black" id="logout_mod" style="width: 150px">Logout</button>
  10719.                 </div>
  10720.             `;
  10721.  
  10722.             const editProfile = byId('editProfile');
  10723.             editProfile.addEventListener('click', () => {
  10724.                 this.openProfileEditor();
  10725.             });
  10726.  
  10727.             const logout = byId('logout_mod');
  10728.             logout.addEventListener('click', async () => {
  10729.                 if (confirm('Are you sure you want to logout?')) {
  10730.                     try {
  10731.                         const res = await fetch(this.appRoutes.logout, {
  10732.                             credentials: 'include',
  10733.                         });
  10734.  
  10735.                         const data = await res.json();
  10736.  
  10737.                         if (!data.success)
  10738.                             return alert('Something went wrong...');
  10739.  
  10740.                         modSettings.modAccount.authorized = false;
  10741.                         updateStorage();
  10742.                         location.reload();
  10743.                     } catch (error) {
  10744.                         console.error('Error logging out:', error);
  10745.                     }
  10746.                 }
  10747.             });
  10748.  
  10749.             const edit_static_status = byId('edit_static_status');
  10750.             const edit_accept_requests = byId('edit_accept_requests');
  10751.             const edit_highlight_friends = byId('edit_highlight_friends');
  10752.             const edit_highlight_color = byId('edit_highlight_color');
  10753.             const edit_visible = byId('edit_visible');
  10754.  
  10755.             edit_static_status.addEventListener('change', () => {
  10756.                 const val = edit_static_status.value;
  10757.                 updateSettings('static_status', val);
  10758.             });
  10759.  
  10760.             edit_accept_requests.addEventListener('change', () => {
  10761.                 const val = edit_accept_requests.checked;
  10762.                 updateSettings('accept_requests', val);
  10763.             });
  10764.  
  10765.             edit_highlight_friends.addEventListener('change', () => {
  10766.                 const val = edit_highlight_friends.checked;
  10767.                 updateSettings('highlight_friends', val);
  10768.             });
  10769.  
  10770.             // Debounce the updateSettings function
  10771.             edit_highlight_color.addEventListener(
  10772.                 'input',
  10773.                 debounce(() => {
  10774.                     const val = edit_highlight_color.value;
  10775.                     updateSettings('highlight_color', val);
  10776.                 }, 500)
  10777.             );
  10778.  
  10779.             edit_visible.addEventListener('change', () => {
  10780.                 const val = edit_visible.checked;
  10781.                 updateSettings('visible', val);
  10782.             });
  10783.  
  10784.             const updateSettings = async (type, data) => {
  10785.                 const resData = await (
  10786.                     await fetch(this.appRoutes.updateSettings, {
  10787.                         method: 'POST',
  10788.                         body: JSON.stringify({ type, data }),
  10789.                         credentials: 'include',
  10790.                         headers: {
  10791.                             'Content-Type': 'application/json',
  10792.                         },
  10793.                     })
  10794.                 ).json();
  10795.  
  10796.                 if (resData.success) {
  10797.                     this.friends_settings[type] = data;
  10798.                 }
  10799.             };
  10800.         },
  10801.  
  10802.         openProfileEditor() {
  10803.             let that = this;
  10804.  
  10805.             const overlay = document.createElement('div');
  10806.             overlay.classList.add('mod_overlay');
  10807.             overlay.style.opacity = '0';
  10808.             overlay.innerHTML = `
  10809.                 <div class="signIn-wrapper">
  10810.                     <div class="signIn-header">
  10811.                         <span>Edit mod profile</span>
  10812.                         <div class="centerXY" style="width: 32px; height: 32px;">
  10813.                             <button class="modButton-black" id="closeProfileEditor">
  10814.                                 <svg width="18" height="20" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
  10815.                                     <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>
  10816.                                 </svg>
  10817.                             </button>
  10818.                         </div>
  10819.                     </div>
  10820.                     <div class="signIn-body" style="width: fit-content;">
  10821.                         <div class="centerXY g-10">
  10822.                             <div class="profile-img" style="width: 6em;height: 6em;">
  10823.                                 <img src="${
  10824.             this.profile.imageURL
  10825.         }" alt="Profile picture" />
  10826.                             </div>
  10827.                             <div class="f-column g-5">
  10828.                                 <input type="file" id="imageUpload" accept="image/*" style="display: none;">
  10829.                                 <label for="imageUpload" class="modButton-black g-10">
  10830.                                     <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>
  10831.                                     Upload avatar
  10832.                                 </label>
  10833.                                 <button class="modButton-black g-10" id="deleteAvatar">
  10834.                                     <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>
  10835.                                     Delete avatar
  10836.                                 </button>
  10837.                             </div>
  10838.                         </div>
  10839.                         <div class="f-column w-100">
  10840.                             <label for="username_edit">Username</label>
  10841.                             <input type="text" class="form-control" id="username_edit" value="${
  10842.             this.profile.username
  10843.         }" maxlength="40" minlength="4" />
  10844.                         </div>
  10845.                         <div class="f-column w-100">
  10846.                             <label for="bio_edit">Bio</label>
  10847.                             <div class="textarea-container">
  10848.                                 <textarea placeholder="Hello! I'm ..." class="form-control" maxlength="250" id="bio_edit">${
  10849.             this.profile.bio || ''
  10850.         }</textarea>
  10851.                                 <span class="char-counter" id="charCount">${
  10852.             this.profile.bio
  10853.                 ? this.profile.bio.length
  10854.             : '0'
  10855.         }/250</span>
  10856.                             </div>
  10857.                         </div>
  10858.                         <button class="modButton-black" style="margin-bottom: 20px;" id="saveChanges">Save changes</button>
  10859.                     </div>
  10860.                 </div>
  10861.             `;
  10862.             document.body.append(overlay);
  10863.  
  10864.             function hide() {
  10865.                 overlay.style.opacity = '0';
  10866.                 setTimeout(() => {
  10867.                     overlay.remove();
  10868.                 }, 300);
  10869.             }
  10870.  
  10871.             overlay.addEventListener('click', (e) => {
  10872.                 if (e.target == overlay) hide();
  10873.             });
  10874.  
  10875.             setTimeout(() => {
  10876.                 overlay.style.opacity = '1';
  10877.             });
  10878.  
  10879.             byId('closeProfileEditor').addEventListener('click', hide);
  10880.  
  10881.             let changes = new Set(); // Use a Set to store unique changes
  10882.  
  10883.             const bio_edit = byId('bio_edit');
  10884.             const charCountSpan = byId('charCount');
  10885.             bio_edit.addEventListener('input', updCharcounter);
  10886.  
  10887.             function updCharcounter() {
  10888.                 const currentTextLength = bio_edit.value.length;
  10889.                 charCountSpan.textContent = currentTextLength + '/250';
  10890.  
  10891.                 // Update changes
  10892.                 changes.add('bio');
  10893.             }
  10894.  
  10895.             // Upload avatar
  10896.             byId('imageUpload').addEventListener('input', async (e) => {
  10897.                 const file = e.target.files[0];
  10898.                 if (!file) return;
  10899.  
  10900.                 const formData = new FormData();
  10901.                 formData.append('image', file);
  10902.  
  10903.                 try {
  10904.                     const data = await (
  10905.                         await fetch(this.appRoutes.imgUpload, {
  10906.                             method: 'POST',
  10907.                             credentials: 'include',
  10908.                             body: formData,
  10909.                         })
  10910.                     ).json();
  10911.  
  10912.                     if (data.success) {
  10913.                         const profileImg =
  10914.                               document.querySelector('.profile-img img');
  10915.                         profileImg.src = data.user.imageURL;
  10916.                         hide();
  10917.                         that.profile = data.user;
  10918.                     } else {
  10919.                         that.modAlert(data.message, 'danger');
  10920.                         console.error('Failed to upload image');
  10921.                     }
  10922.                 } catch (error) {
  10923.                     console.error('Error uploading image:', error);
  10924.                 }
  10925.             });
  10926.  
  10927.             const username_edit = byId('username_edit');
  10928.             username_edit.addEventListener('input', () => {
  10929.                 changes.add('username');
  10930.             });
  10931.  
  10932.             const saveChanges = byId('saveChanges');
  10933.             saveChanges.addEventListener('click', async () => {
  10934.                 if (changes.size === 0) return;
  10935.                 let changedData = {};
  10936.                 changes.forEach((change) => {
  10937.                     if (change === 'username') {
  10938.                         changedData.username = username_edit.value;
  10939.                     } else if (change === 'bio') {
  10940.                         changedData.bio = bio_edit.value;
  10941.                     }
  10942.                 });
  10943.  
  10944.                 const resData = await (
  10945.                     await fetch(this.appRoutes.editProfile, {
  10946.                         method: 'POST',
  10947.                         body: JSON.stringify({
  10948.                             changes: Array.from(changes),
  10949.                             data: changedData,
  10950.                         }),
  10951.                         credentials: 'include',
  10952.                         headers: {
  10953.                             'Content-Type': 'application/json',
  10954.                         },
  10955.                     })
  10956.                 ).json();
  10957.  
  10958.                 if (resData.success) {
  10959.                     if (that.profile.username !== resData.user.username) {
  10960.                         const p_username = byId('profile_username_00');
  10961.                         if (p_username)
  10962.                             p_username.innerText = resData.user.username;
  10963.                     }
  10964.                     that.profile = resData.user;
  10965.                     changes.clear();
  10966.                     hide();
  10967.                     const name = byId('my-profile-name');
  10968.                     const bioText = byId('my-profile-bio');
  10969.  
  10970.                     name.innerText = resData.user.username;
  10971.                     bioText.innerHTML = resData.user.bio || 'No bio.';
  10972.                 } else {
  10973.                     if (resData.message) {
  10974.                         this.modAlert(resData.message, 'danger');
  10975.                     }
  10976.                 }
  10977.             });
  10978.  
  10979.             const deleteAvatar = byId('deleteAvatar');
  10980.             deleteAvatar.addEventListener('click', async () => {
  10981.                 if (
  10982.                     confirm(
  10983.                         'Are you sure you want to remove your profile picture? It will be changed to the default profile picture.'
  10984.                     )
  10985.                 ) {
  10986.                     try {
  10987.                         const data = await (
  10988.                             await fetch(this.appRoutes.delProfile, {
  10989.                                 credentials: 'include',
  10990.                             })
  10991.                         ).json();
  10992.                         const profileImg =
  10993.                               document.querySelector('.profile-img img');
  10994.                         profileImg.src = data.user.imageURL;
  10995.                         hide();
  10996.                         that.profile = data.user;
  10997.                     } catch (error) {
  10998.                         console.error("Couldn't remove image: ", error);
  10999.                         this.modAlert(error.message, 'danger');
  11000.                     }
  11001.                 }
  11002.             });
  11003.         },
  11004.  
  11005.         async announcements() {
  11006.             const previewContainer = byId('mod-announcements');
  11007.  
  11008.             const announcements = await (
  11009.                 await fetch(this.appRoutes.announcements)
  11010.             ).json();
  11011.             if (!announcements.success) return;
  11012.  
  11013.             const { data } = announcements;
  11014.  
  11015.             const pinnedAnnouncements = data.filter(
  11016.                 (announcement) => announcement.pinned
  11017.             );
  11018.             const unpinnedAnnouncements = data.filter(
  11019.                 (announcement) => !announcement.pinned
  11020.             );
  11021.  
  11022.             pinnedAnnouncements.sort(
  11023.                 (a, b) => new Date(b.date) - new Date(a.date)
  11024.             );
  11025.             unpinnedAnnouncements.sort(
  11026.                 (a, b) => new Date(b.date) - new Date(a.date)
  11027.             );
  11028.  
  11029.             const sortedAnnouncements = [
  11030.                 ...pinnedAnnouncements,
  11031.                 ...unpinnedAnnouncements,
  11032.             ];
  11033.  
  11034.             const previews = sortedAnnouncements
  11035.             .map(
  11036.                 (announcement) => `
  11037. 				<div class="mod-announcement" data-announcement-id="${announcement._id}">
  11038. 					<img class="mod-announcement-icon" src="${
  11039.                 announcement.icon
  11040.                 }" width="32" draggable="false" />
  11041. 					<div class="mod-announcement-text">
  11042. 						<span>${announcement.title}</span>
  11043. 						<div>${announcement.description}</div>
  11044. 					</div>
  11045. 					${
  11046.                 announcement.pinned
  11047.                 ? '<img src="https://czrsd.com/static/icons/pinned.svg" draggable="false" style="width: 22px; align-self: start;" />'
  11048.                 : ''
  11049.                 }
  11050. 				</div>
  11051. 			`
  11052.             )
  11053.             .join('');
  11054.  
  11055.             previewContainer.innerHTML = previews;
  11056.  
  11057.             const announcementElements =
  11058.                   document.querySelectorAll('.mod-announcement');
  11059.             announcementElements.forEach((element) => {
  11060.                 element.addEventListener('click', async (event) => {
  11061.                     const announcementId = element.getAttribute(
  11062.                         'data-announcement-id'
  11063.                     );
  11064.                     try {
  11065.                         const data = await (
  11066.                             await fetch(
  11067.                                 this.appRoutes.announcement(announcementId)
  11068.                             )
  11069.                         ).json();
  11070.                         if (data.success) {
  11071.                             createAnnouncementTab(data.data);
  11072.                         }
  11073.                     } catch (error) {
  11074.                         console.error(
  11075.                             'Error fetching announcement details:',
  11076.                             error
  11077.                         );
  11078.                     }
  11079.                 });
  11080.             });
  11081.  
  11082.             function createAnnouncementTab(data) {
  11083.                 const menuContent = document.querySelector('.mod_menu_content');
  11084.                 const modHome = byId('mod_home');
  11085.                 const content = document.createElement('div');
  11086.  
  11087.                 content.setAttribute('id', 'announcement-tab');
  11088.                 content.classList.add('mod_tab');
  11089.                 content.style.display = 'none';
  11090.                 content.style.opacity = '0';
  11091.  
  11092.                 const announcementHTML = `
  11093. 					<div class="centerY justify-sb">
  11094. 						<div class="centerY g-5">
  11095. 							<img style="border-radius: 50%;" src="${
  11096.                 data.preview.icon
  11097.                 }" width="64" draggable="false" />
  11098. 							<div class="f-column centerX">
  11099. 								<h2>${data.full.title}</h2>
  11100. 								<span style="color: #7E7E7E">${prettyTime.fullDate(data.date)}</span>
  11101. 							</div>
  11102. 						</div>
  11103. 						<button class="modButton-black" style="width: 20%;" id="mod-announcement-back">Back</button>
  11104. 					</div>
  11105. 					<div class="mod-announcement-content">
  11106. 						<div class="f-column g-10 scroll">${data.full.description}</div>
  11107. 						<div class="mod-announcement-images scroll">
  11108. 							${data.full.images
  11109.                 .map(
  11110.                     (image) =>
  11111.                     `<img src="${image}" onclick="window.open('${image}')" />`
  11112.                 )
  11113.                 .join('')}
  11114. 						</div>
  11115. 					</div>
  11116. 				`;
  11117.  
  11118.                 content.innerHTML = announcementHTML;
  11119.                 menuContent.appendChild(content);
  11120.  
  11121.                 window.openModTab('announcement-tab');
  11122.  
  11123.                 const back = byId('mod-announcement-back');
  11124.                 back.addEventListener('click', () => {
  11125.                     const mod_home = byId('mod_home');
  11126.                     content.style.opacity = '0';
  11127.                     setTimeout(() => {
  11128.                         content.remove();
  11129.  
  11130.                         mod_home.style.display = 'flex';
  11131.                         mod_home.style.opacity = '1';
  11132.                     }, 300);
  11133.  
  11134.                     byId('tab_home_btn').classList.add('mod_selected');
  11135.                 });
  11136.                 1;
  11137.             }
  11138.         },
  11139.  
  11140.         chart() {
  11141.             const canvas = byId('sigmod-stats');
  11142.             const { Chart } = window;
  11143.  
  11144.             const stats = JSON.parse(localStorage.getItem('game-stats'));
  11145.  
  11146.             // max values
  11147.             const statValues = {
  11148.                 timeplayed: [
  11149.                     10_000, 50_000, 100_000, 150_000, 200_000, 250_000, 300_000,
  11150.                     400_000, 800_000, 1_000_000,
  11151.                 ],
  11152.                 highestmass: [
  11153.                     50_000, 100_000, 500_000, 700_000, 1_000_000, 5_000_000,
  11154.                     10_000_000,
  11155.                 ],
  11156.                 totaldeaths: [
  11157.                     100, 500, 1_000, 2_000, 3_000, 4_000, 5_000, 8_000, 10_000,
  11158.                     30_000, 50_000, 100_000,
  11159.                 ],
  11160.                 totalmass: [
  11161.                     100_000, 500_000, 1_000_000, 2_000_000, 3_000_000,
  11162.                     5_000_000, 10_000_000, 50_000_000, 100_000_000, 500_000_000,
  11163.                     1_000_000_000, 2_000_000_000, 5_000_000_000,
  11164.                 ],
  11165.             };
  11166.  
  11167.             const getBestValue = (stat, values) => {
  11168.                 for (let value of values) {
  11169.                     if (stat < value) return value;
  11170.                 }
  11171.                 return values[values.length - 1];
  11172.             };
  11173.  
  11174.             const emojiLabels = ['⏲', '🏆', '💀', '🔢'];
  11175.             const textLabels = [
  11176.                 'Time Played',
  11177.                 'Highest Mass',
  11178.                 'Total Deaths',
  11179.                 'Total Mass',
  11180.             ];
  11181.  
  11182.             const data = {
  11183.                 labels: emojiLabels,
  11184.                 datasets: [
  11185.                     {
  11186.                         label: 'Your Stats',
  11187.                         data: [
  11188.                             stats['time-played'] /
  11189.                             getBestValue(
  11190.                                 stats['time-played'],
  11191.                                 statValues.timeplayed
  11192.                             ),
  11193.                             stats['highest-mass'] /
  11194.                             getBestValue(
  11195.                                 stats['highest-mass'],
  11196.                                 statValues.highestmass
  11197.                             ),
  11198.                             stats['total-deaths'] /
  11199.                             getBestValue(
  11200.                                 stats['total-deaths'],
  11201.                                 statValues.totaldeaths
  11202.                             ),
  11203.                             stats['total-mass'] /
  11204.                             getBestValue(
  11205.                                 stats['total-mass'],
  11206.                                 statValues.totalmass
  11207.                             ),
  11208.                         ],
  11209.                         backgroundColor: [
  11210.                             'rgba(255, 99, 132, 0.2)',
  11211.                             'rgba(54, 162, 235, 0.2)',
  11212.                             'rgba(255, 206, 86, 0.2)',
  11213.                             'rgba(153, 102, 255, 0.2)',
  11214.                         ],
  11215.                         borderColor: [
  11216.                             'rgba(255, 99, 132, 1)',
  11217.                             'rgba(54, 162, 235, 1)',
  11218.                             'rgba(255, 206, 86, 1)',
  11219.                             'rgba(153, 102, 255, 1)',
  11220.                         ],
  11221.                         borderWidth: 1,
  11222.                     },
  11223.                 ],
  11224.             };
  11225.  
  11226.             const formatLabel = (labelType, actualValue) => {
  11227.                 if (labelType === 'Time Played') {
  11228.                     const hours = Math.floor(actualValue / 3600);
  11229.                     const minutes = Math.floor((actualValue % 3600) / 60);
  11230.                     return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
  11231.                 } else if (
  11232.                     labelType === 'Highest Mass' ||
  11233.                     labelType === 'Total Mass'
  11234.                 ) {
  11235.                     return actualValue > 999
  11236.                         ? `${(actualValue / 1000).toFixed(1)}k`
  11237.                     : actualValue.toString();
  11238.                 } else {
  11239.                     return actualValue.toString();
  11240.                 }
  11241.             };
  11242.  
  11243.             const createChart = () => {
  11244.                 try {
  11245.                     new Chart(canvas, {
  11246.                         type: 'bar',
  11247.                         data: data,
  11248.                         options: {
  11249.                             indexAxis: 'y',
  11250.                             scales: {
  11251.                                 x: {
  11252.                                     beginAtZero: true,
  11253.                                     max: 1,
  11254.                                     ticks: {
  11255.                                         callback: (value) =>
  11256.                                         `${(value * 100).toFixed(0)}%`,
  11257.                                     },
  11258.                                 },
  11259.                             },
  11260.                             plugins: {
  11261.                                 legend: {
  11262.                                     display: false,
  11263.                                 },
  11264.                                 tooltip: {
  11265.                                     callbacks: {
  11266.                                         title: (context) =>
  11267.                                         textLabels[context[0].dataIndex],
  11268.                                         label: (context) => {
  11269.                                             const dataIndex = context.dataIndex;
  11270.                                             const labelType =
  11271.                                                   textLabels[dataIndex];
  11272.                                             const actualValue =
  11273.                                                   context.dataset.data[
  11274.                                                       dataIndex
  11275.                                                   ] *
  11276.                                                   getBestValue(
  11277.                                                       stats[
  11278.                                                           labelType
  11279.                                                           .toLowerCase()
  11280.                                                           .replace(' ', '-')
  11281.                                                       ],
  11282.                                                       statValues[
  11283.                                                           labelType
  11284.                                                           .toLowerCase()
  11285.                                                           .replace(' ', '')
  11286.                                                       ]
  11287.                                                   );
  11288.                                             return formatLabel(
  11289.                                                 labelType,
  11290.                                                 actualValue
  11291.                                             );
  11292.                                         },
  11293.                                     },
  11294.                                 },
  11295.                             },
  11296.                         },
  11297.                     });
  11298.                 } catch (error) {
  11299.                     console.error(
  11300.                         'An error occurred while rendering the chart:',
  11301.                         error
  11302.                     );
  11303.                 }
  11304.             };
  11305.  
  11306.             createChart();
  11307.         },
  11308.  
  11309.         // Color input events & Reset color event handler
  11310.         colorPicker() {
  11311.             const colorPickerConfig = {
  11312.                 mapColor: {
  11313.                     path: 'game.map.color',
  11314.                     opacity: false,
  11315.                     color: modSettings.game.map.color,
  11316.                     default: '#111111',
  11317.                 },
  11318.                 borderColor: {
  11319.                     path: 'game.borderColor',
  11320.                     opacity: true,
  11321.                     color: modSettings.game.borderColor,
  11322.                     default: '#0000ff',
  11323.                 },
  11324.                 foodColor: {
  11325.                     path: 'game.foodColor',
  11326.                     opacity: true,
  11327.                     color: modSettings.game.foodColor,
  11328.                     default: null,
  11329.                 },
  11330.                 cellColor: {
  11331.                     path: 'game.cellColor',
  11332.                     opacity: true,
  11333.                     color: modSettings.game.cellColor,
  11334.                     default: null,
  11335.                 },
  11336.                 nameColor: {
  11337.                     path: 'game.name.color',
  11338.                     opacity: false,
  11339.                     color: modSettings.game.name.color,
  11340.                     default: '#ffffff',
  11341.                 },
  11342.                 gradientNameColor1: {
  11343.                     path: 'game.name.gradient.left',
  11344.                     opacity: false,
  11345.                     color: modSettings.game.name.gradient.left,
  11346.                     default: '#ffffff',
  11347.                 },
  11348.                 gradientNameColor2: {
  11349.                     path: 'game.name.gradient.right',
  11350.                     opacity: false,
  11351.                     color: modSettings.game.name.gradient.right,
  11352.                     default: '#ffffff',
  11353.                 },
  11354.                 chatBackground: {
  11355.                     path: 'chat.bgColor',
  11356.                     opacity: true,
  11357.                     color: modSettings.chat.bgColor,
  11358.                     default: defaultSettings.chat.bgColor,
  11359.                     elementTarget: {
  11360.                         selector: '.modChat',
  11361.                         property: 'background',
  11362.                     },
  11363.                 },
  11364.                 chatTextColor: {
  11365.                     path: 'chat.textColor',
  11366.                     opacity: true,
  11367.                     color: modSettings.chat.textColor,
  11368.                     default: defaultSettings.chat.textColor,
  11369.                     elementTarget: {
  11370.                         selector: '.chatMessage-text',
  11371.                         property: 'color',
  11372.                     },
  11373.                 },
  11374.                 chatThemeChanger: {
  11375.                     path: 'chat.themeColor',
  11376.                     opacity: true,
  11377.                     color: modSettings.chat.themeColor,
  11378.                     default: defaultSettings.chat.themeColor,
  11379.                     elementTarget: {
  11380.                         selector: '.chatButton',
  11381.                         property: 'background',
  11382.                     },
  11383.                 },
  11384.             };
  11385.  
  11386.             const { Alwan } = window;
  11387.  
  11388.             Object.entries(colorPickerConfig).forEach(
  11389.                 ([
  11390.                     selector,
  11391.                     {
  11392.                         path,
  11393.                         opacity,
  11394.                         color,
  11395.                         default: defaultColor,
  11396.                         elementTarget,
  11397.                     },
  11398.                 ]) => {
  11399.                     const storagePath = path.split('.');
  11400.                     const colorPickerInstance = new Alwan(`#${selector}`, {
  11401.                         id: `edit-${selector}`,
  11402.                         color: color || defaultColor || '#000000',
  11403.                         theme: 'dark',
  11404.                         opacity,
  11405.                         format: 'hex',
  11406.                         default: defaultColor,
  11407.                         swatches: ['black', 'white', 'red', 'blue', 'green'],
  11408.                     });
  11409.  
  11410.                     const pickerElement = byId(`edit-${selector}`);
  11411.                     pickerElement.insertAdjacentHTML(
  11412.                         'beforeend',
  11413.                         `
  11414.                             <div class="colorpicker-additional">
  11415.                                 <span>Reset Color</span>
  11416.                                 <button class="resetButton" id="reset-${selector}"></button>
  11417.                             </div>
  11418.                         `
  11419.                     );
  11420.  
  11421.                     colorPickerInstance.on('change', (e) => {
  11422.                         let storageElement = modSettings;
  11423.                         storagePath
  11424.                             .slice(0, -1)
  11425.                             .forEach(
  11426.                             (part) =>
  11427.                             (storageElement = storageElement[part])
  11428.                         );
  11429.                         storageElement[storagePath.at(-1)] = e.hex;
  11430.  
  11431.                         if (
  11432.                             path.includes('gradientName') &&
  11433.                             modSettings.game.name.gradient.enabled
  11434.                         ) {
  11435.                             modSettings.game.name.gradient.enabled = true;
  11436.                         }
  11437.  
  11438.                         if (elementTarget) {
  11439.                             const targets = document.querySelectorAll(
  11440.                                 elementTarget.selector
  11441.                             );
  11442.  
  11443.                             targets.forEach((target) => {
  11444.                                 target.style[elementTarget.property] = e.hex;
  11445.                             });
  11446.                         }
  11447.  
  11448.                         updateStorage();
  11449.                     });
  11450.  
  11451.                     byId(`reset-${selector}`)?.addEventListener('click', () => {
  11452.                         colorPickerInstance.setColor(defaultColor);
  11453.  
  11454.                         let storageElement = modSettings;
  11455.                         storagePath
  11456.                             .slice(0, -1)
  11457.                             .forEach(
  11458.                             (part) =>
  11459.                             (storageElement = storageElement[part])
  11460.                         );
  11461.                         storageElement[storagePath.at(-1)] = defaultColor;
  11462.  
  11463.                         if (
  11464.                             path.includes('gradientName') &&
  11465.                             !modSettings.game.name.gradient.left &&
  11466.                             !modSettings.game.name.gradient.right
  11467.                         ) {
  11468.                             modSettings.game.name.gradient.enabled = false;
  11469.                         }
  11470.  
  11471.                         if (elementTarget) {
  11472.                             const targets = document.querySelectorAll(
  11473.                                 elementTarget.selector
  11474.                             );
  11475.  
  11476.                             targets.forEach((target) => {
  11477.                                 target.style[elementTarget.property] =
  11478.                                     defaultColor;
  11479.                             });
  11480.                         }
  11481.  
  11482.                         updateStorage();
  11483.                     });
  11484.                 }
  11485.             );
  11486.         },
  11487.  
  11488.         async getBlockedChatData() {
  11489.             try {
  11490.                 const res = await fetch(`${this.appRoutes.blockedChatData}?v=${Math.floor(Math.random() * 9e5)}`, {
  11491.                     headers: {
  11492.                         'Content-Type': 'application/json'
  11493.                     }
  11494.                 });
  11495.                 const resData = await res.json();
  11496.                 const { names, messages } = resData;
  11497.  
  11498.                 this.blockedChatData = {
  11499.                     names,
  11500.                     messages
  11501.                 }
  11502.             } catch(e) {
  11503.                 console.error('Couldn\'t fetch blocked chat data.');
  11504.             }
  11505.         },
  11506.  
  11507.         async loadLibraries() {
  11508.             const loadScript = (src) =>
  11509.             new Promise((resolve, reject) => {
  11510.                 const script = document.createElement('script');
  11511.                 script.src = src;
  11512.                 script.type = 'text/javascript';
  11513.                 document.head.appendChild(script);
  11514.  
  11515.                 script.onload = () => resolve();
  11516.                 script.onerror = (error) => reject(error);
  11517.             });
  11518.  
  11519.             const loadCSS = (href) =>
  11520.             new Promise((resolve, reject) => {
  11521.                 const link = document.createElement('link');
  11522.                 link.rel = 'stylesheet';
  11523.                 link.href = href;
  11524.                 document.head.appendChild(link);
  11525.  
  11526.                 link.onload = () => resolve();
  11527.                 link.onerror = (error) => reject(error);
  11528.             });
  11529.  
  11530.             for (const [lib, val] of Object.entries(libs)) {
  11531.                 if (typeof val === 'string') {
  11532.                     await loadScript(val);
  11533.                 } else {
  11534.                     await loadScript(val.js);
  11535.                     if (val.css) await loadCSS(val.css);
  11536.                 }
  11537.  
  11538.                 console.log(`%c✅ Loaded ${lib}.`, 'color: lime');
  11539.  
  11540.                 if (typeof this[lib] === 'function') this[lib]();
  11541.             }
  11542.         },
  11543.  
  11544.         isRateLimited() {
  11545.             if (document.body.children[0]?.id === 'cf-wrapper') {
  11546.                 console.log('User is rate limited.');
  11547.                 return true;
  11548.             }
  11549.             return false;
  11550.         },
  11551.  
  11552.         setupUI() {
  11553.             this.menu();
  11554.             this.initStats();
  11555.             this.announcements();
  11556.             this.mainMenu();
  11557.             this.saveNames();
  11558.             this.tagsystem();
  11559.             this.createMinimap();
  11560.             this.themes();
  11561.         },
  11562.  
  11563.         setupGame() {
  11564.             this.game();
  11565.             this.macros();
  11566.         },
  11567.  
  11568.         setupNetworking() {
  11569.             this.clientPing();
  11570.             this.chat();
  11571.             this.handleNick();
  11572.         },
  11573.  
  11574.         initModules() {
  11575.             try {
  11576.                 this.loadLibraries();
  11577.                 this.setupUI();
  11578.                 this.setupGame();
  11579.                 this.setupNetworking();
  11580.  
  11581.                 // setup eventListeners for modInputs once every module has been loaded
  11582.                 this.setInputActions();
  11583.             } catch (e) {
  11584.                 console.error('An error occurred while loading SigMod: ', e);
  11585.             }
  11586.         },
  11587.  
  11588.         init() {
  11589.             if (this.isRateLimited()) return;
  11590.             if (!document.querySelector('.body__inner')) return;
  11591.  
  11592.             this.credits();
  11593.  
  11594.             new SigWsHandler();
  11595.  
  11596.             this.initModules();
  11597.         }
  11598.     };
  11599.  
  11600.     mods = new Mod();
  11601. })();