☰

AAC Enhanced plus AAC Utils

Adds custom UI enhancements

  1. // ==UserScript==
  2. // @name         AAC Enhanced plus AAC Utils
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.10.13
  5. // @copyright    2025, Asriel (https://gf.qytechs.cn/de/users/1375984-asriel-aac) 2022, Reimu(https://github.com/ReiwuKleiwu/AAC-Utils)
  6. // @license      MIT
  7. // @description  Adds custom UI enhancements
  8. // @author       Asriel / Nick S. aka. Slash
  9. // @icon         https://i.ibb.co/z5CJ5zv/revanced.png
  10. // @supportURL   https://gf.qytechs.cn/de/scripts/511351-aac-enhanced-plus-aac-utils/feedback
  11. // @include      /^https?:\/\/(www\.)?anime\.academy\/.*/
  12. // @grant        none
  13. // @require      https://code.jquery.com/jquery-3.6.0.min.js
  14. // @require      https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
  15. // ==/UserScript==
  16.  
  17.  
  18.  
  19. (function() {
  20.     'use strict';
  21.  
  22.  
  23.  
  24.     function addGlobalStyle(css) {
  25.         let head, style;
  26.         head = document.getElementsByTagName('head')[0];
  27.         if (!head) {
  28.             return;
  29.         }
  30.         style = document.createElement('style');
  31.         style.type = 'text/css';
  32.         style.innerHTML = css;
  33.         head.appendChild(style);
  34.     }
  35.  
  36.     addGlobalStyle(`
  37.             '.autocomplete-flex {' +
  38.       '  background-color: #484b52;' +
  39.       '  font-weight: 600;' +
  40.       '  display: flex;' +
  41.       '  align-items: center;' +
  42.       '  gap: 10px;' +
  43.       '  padding: 5px;' +
  44.       '}' +
  45.       '.autocomplete-flex:hover {' +
  46.       '  background-color: #5f646e;' +
  47.       '}' +
  48.       '' +
  49.       '.autocomplete-flex:focus {' +
  50.       '  background-color: #5f646e;' +
  51.       '}' +
  52.       '' +
  53.       '.name-link:hover {' +
  54.       '  text-decoration: none;' +
  55.       '}' +
  56.       '.autocomplete-icon {' +
  57.       '  width: 45px !important;' +
  58.       '  height: 45px !important;' +
  59.       '  border-radius: 50%;' +
  60.       '}' +
  61.       '.chatMessage {' +
  62.       '  transition: padding 0.4s ease 0s;' +
  63.       '}' +
  64.       '.chatMessage:hover {' +
  65.       '  padding-top: 5px;' +
  66.       '  padding-bottom: 5px;' +
  67.       '  position: relative;' +
  68.       '  background-color: #5f646e !important;' +
  69.       '  border-radius: 3px;' +
  70.       '  transition: padding 0.4s ease 0s;' +
  71.       '}' +
  72.       '.messageIcons {' +
  73.       '  display: flex;' +
  74.       '  justify-content: center;' +
  75.       '  align-items: center;' +
  76.       '  height: 32px;' +
  77.       '  width: 32px;' +
  78.       '  background-color: #484b52;' +
  79.       '  position: absolute;' +
  80.       '  right: 0;' +
  81.       '  top: -20px;' +
  82.       '  display: none;' +
  83.       '  border-radius: 3px;' +
  84.       '}' +
  85.       '.messageIcons:hover {' +
  86.       '  background-color: #5f646e;' +
  87.       '  filter: drop-shadow(5px 7px 14px black);' +
  88.       '}' +
  89.       '' +
  90.       '.collapsible-wrap {' +
  91.       '  margin: 10px 0 10px 0;' +
  92.       '}' +
  93.       '' +
  94.       '.collapsible-button {' +
  95.       '  cursor: pointer;' +
  96.       '  padding: 18px;' +
  97.       '  width: 100%;' +
  98.       '  text-align: left;' +
  99.       '  outline: none;' +
  100.       '  font-size: 15px;' +
  101.       '}' +
  102.       '' +
  103.       '.collapsible-button:focus {' +
  104.       '  transition: background-color 0.5s ease;' +
  105.       '  background-color: #3e1e80 !important;' +
  106.       '}' +
  107.       '' +
  108.       '.collapsible-button:hover {' +
  109.       '  transition: background-color 0.5s ease;' +
  110.       '}' +
  111.       '' +
  112.       '.active {' +
  113.       '  border-bottom-right-radius: 0 !important;' +
  114.       '  border-bottom-left-radius: 0 !important;' +
  115.       '  background-color: #3e1e80 !important;' +
  116.       '}' +
  117.       '' +
  118.       '.collapsible-button:after {' +
  119.       "  content: '\\002B';" +
  120.       '  font-weight: bold;' +
  121.       '  float: right;' +
  122.       '  margin-left: 5px;' +
  123.       '}' +
  124.       '' +
  125.       '.active:after {' +
  126.       "  content: '\\2212';" +
  127.       '}' +
  128.       '' +
  129.       '.collapsible-content {' +
  130.       '  padding: 0 10px;' +
  131.       '  max-height: 0;' +
  132.       '  overflow: hidden;' +
  133.       '  transition: max-height 0.2s ease-out;' +
  134.       '  background-color: #2c2f33;' +
  135.       '  border-bottom-left-radius: 3px;' +
  136.       '  border-bottom-right-radius: 3px;' +
  137.       '}' +
  138.       '' +
  139.       '.avatar-grid {' +
  140.       '  width: 100%;' +
  141.       '  display: grid;' +
  142.       '  grid-template-columns: repeat(auto-fill, 8em);' +
  143.       '  grid-gap: 10px 15px;' +
  144.       '}' +
  145.       '' +
  146.       '.avatar-div {' +
  147.       '  height: 80px;' +
  148.       '  width: 80px;' +
  149.       '  display: flex;' +
  150.       '  align-items: center;' +
  151.       '  justify-content: center;' +
  152.       '  gap: 5px;' +
  153.       '}' +
  154.       '' +
  155.       '.avatar-div:hover {' +
  156.       '  background-color: #484b52;' +
  157.       '  transition: background-color 0.5s ease;' +
  158.       '  border-radius: 3px;' +
  159.       '}' +
  160.       '' +
  161.       '.avatarIcon {' +
  162.       '  height: 20px;' +
  163.       '  width: 20px;' +
  164.       '  background-color: #3e1e80;' +
  165.       '  border-radius: 50%;' +
  166.       '  display: none;' +
  167.       '  align-items: center;' +
  168.       '  justify-content: center;' +
  169.       '}' +
  170.       '' +
  171.       '.avatarIcon:hover {' +
  172.       '  background-color: #6b36d9;' +
  173.       '  filter: drop-shadow(5px 7px 14px #2c2f33);' +
  174.       '  transition: background-color 0.5s ease;' +
  175.       '}' +
  176.       '' +
  177.       '.ionicon {' +
  178.       '  width: 13px;' +
  179.       '  height: 13px;' +
  180.       '  fill: #ddd;' +
  181.       '}' +
  182.       '' +
  183.       '.collection-selection {' +
  184.       '  position: absolute;' +
  185.       '  z-index: 10000;' +
  186.       '  margin-left: auto;' +
  187.       '  margin-right: auto;' +
  188.       '  right: 0;' +
  189.       '  left: 0;' +
  190.       '  top: 80px;' +
  191.       '  width: 300px;' +
  192.       '  background-color: #484b52;' +
  193.       '  padding: 10px;' +
  194.       '  text-align: center;' +
  195.       '  overflow: hidden scroll;' +
  196.       '  border-radius: 3px;' +
  197.       '  max-height: 200px;' +
  198.       '}' +
  199.       '' +
  200.       '.collection-selectable {' +
  201.       '  font-weight: 700;' +
  202.       '  padding: 10px 0;' +
  203.       '  margin-bottom: 5px;' +
  204.       '}' +
  205.       '' +
  206.       '.collection-selectable:hover {' +
  207.       '  background-color: #3e1e80;' +
  208.       '  border-radius: 3px;' +
  209.       '  transition: background-color 0.5s ease;' +
  210.       '  filter: drop-shadow(5px 7px 14px #2c2f33);' +
  211.       '}' +
  212.       '' +
  213.       '#createCollectionBtn {' +
  214.       '  font-weight: 700;' +
  215.       '}' +
  216.       '' +
  217.       '.removeCategory-btn {' +
  218.       '  background-color: #fd2f2f;' +
  219.       '}' +
  220.       '' +
  221.       '.request-delete-collection {' +
  222.       '  position: absolute;' +
  223.       '  z-index: 10000;' +
  224.       '  margin-left: auto;' +
  225.       '  margin-right: auto;' +
  226.       '  right: 0;' +
  227.       '  left: 0;' +
  228.       '  top: 80px;' +
  229.       '  width: 300px;' +
  230.       '  background-color: #484b52;' +
  231.       '  padding: 10px;' +
  232.       '  text-align: center;' +
  233.       '  overflow: hidden scroll;' +
  234.       '  border-radius: 3px;' +
  235.       '  max-height: 200px;' +
  236.       '}' +
  237.       '' +
  238.       '.message-image {' +
  239.       '  width: 100%;' +
  240.       '  height: auto;' +
  241.       '  border-radius: 3px;' +
  242.       '}' +
  243.       '' +
  244.       '.message-image-container {' +
  245.       '  margin-top: 5px;' +
  246.       '}' +
  247.       '' +
  248.       '#username-results {' +
  249.       '  border: none;' +
  250.       '  max-height: 200px;' +
  251.       '  overflow: hidden scroll;' +
  252.       '  max-width: 30%;' +
  253.       '  position: absolute;' +
  254.       '  left: 0;' +
  255.       '  right: 0;' +
  256.       '  bottom: calc(100% + 8px);' +
  257.       '  margin-left: 8px;' +
  258.       '  border-radius: 5px;' +
  259.       '}' +
  260.       ''
  261.     `);
  262.  
  263.     const scriptName = GM_info.script.name;
  264.     const scriptVersion = GM_info.script.version;
  265.     window.aacEnhancedScriptID = `${scriptName.replace(/\s+/g, '-')}-${scriptVersion}`;
  266.  
  267.     console.log(window.aacEnhancedScriptID);
  268.  
  269.     // Necessary for autoreconnect
  270.     window.onbeforeunload = null;
  271.  
  272.     // Access the AngularJS scope
  273.     const scope = angular.element(document.getElementById('topbar')).scope();
  274.  
  275.     // Global Socket Hook
  276.     const globalSocketReady = new Event('globalSocketReady');
  277.  
  278.     io.Socket.prototype.o_emit = io.Socket.prototype.o_emit || io.Socket.prototype.emit;
  279.     io.Socket.prototype.emit = function (eventName, ...args) {
  280.         if (!window.socket) {
  281.             window.socket = this;
  282.             window.dispatchEvent(globalSocketReady);
  283.         }
  284.  
  285.         window.dispatchEvent(new CustomEvent('socketEmit', { detail: { eventName: eventName, args: [...args] } }));
  286.  
  287.         return this.o_emit(eventName, ...args);
  288.     };
  289.  
  290.   /************************************
  291.    *
  292.    *
  293.    * Autoreconnect Modul
  294.    *
  295.    *
  296.    ************************************/
  297.  
  298.     const disconnectReasons = [
  299.         'transport error',
  300.         'transport close',
  301.         'io client disconnect',
  302.         'io server disconnect',
  303.         'ping timeout',
  304.     ];
  305.  
  306.     const disconnected = JSON.parse(localStorage.getItem('disconnected'));
  307.  
  308.     if (disconnected) {
  309.         localStorage.setItem('disconnected', JSON.stringify(false));
  310.         window.addEventListener('globalSocketReady', () => {
  311.             setTimeout(() => {
  312.                 window.socket.emit('moveAvatar', JSON.parse(localStorage.getItem('avatarPosition')));
  313.             }, 1500);
  314.         });
  315.     }
  316.  
  317.     window.addEventListener('socketEmit', (event) => {
  318.         if (event.detail.eventName === 'moveAvatar') {
  319.             localStorage.setItem('avatarPosition', JSON.stringify(event.detail.args[0]));
  320.         }
  321.         if (event.detail.eventName === 'disconnect' && disconnectReasons.includes(event.detail.args[0])) {
  322.             localStorage.setItem('disconnected', JSON.stringify(true));
  323.             location.reload();
  324.         }
  325.     });
  326.   /************************************
  327.    *
  328.    *
  329.    * Chatverlaufs Modul
  330.    *
  331.    *
  332.    ************************************/
  333.  
  334.     const maxStoredMessagesPerRoom = 500;
  335.     const maxMessageAge = 1000 * 60 * 60 * 2; // 2 hours
  336.  
  337.     window.addEventListener('globalSocketReady', () => {
  338.         window.socket.on('updateChatLines', (data) => {
  339.             const currentRoom = window.location.href.split('=')[1];
  340.  
  341.             let roomData;
  342.  
  343.             if (!localStorage.hasOwnProperty('rooms')) {
  344.                 localStorage.setItem('rooms', JSON.stringify({}));
  345.             }
  346.             if (!JSON.parse(localStorage.getItem('rooms')).hasOwnProperty(currentRoom)) {
  347.                 roomData = JSON.parse(localStorage.getItem('rooms'));
  348.                 roomData[currentRoom] = {
  349.                     messages: [],
  350.                 };
  351.                 roomData = JSON.stringify(roomData);
  352.                 localStorage.setItem('rooms', roomData);
  353.             }
  354.  
  355.             roomData = JSON.parse(localStorage.getItem('rooms'));
  356.             if (data.user !== 'System') roomData[currentRoom].messages.push(data);
  357.             if (roomData[currentRoom].messages.length > maxStoredMessagesPerRoom) roomData[currentRoom].messages.splice(0, 1);
  358.  
  359.             roomData = JSON.stringify(roomData);
  360.             localStorage.setItem('rooms', roomData);
  361.         });
  362.  
  363.         window.addEventListener('socketEmit', (event) => {
  364.             if (event.detail.eventName === 'changeRoom') {
  365.                 setTimeout(() => {
  366.                     restoreChatlogs();
  367.                 }, 100);
  368.             }
  369.         });
  370.  
  371.         restoreChatlogs();
  372.     });
  373.  
  374.     function restoreChatlogs() {
  375.         let currentRoomChatlogs = undefined;
  376.  
  377.         if (JSON.parse(localStorage.getItem('rooms'))) {
  378.             if (JSON.parse(localStorage.getItem('rooms'))[window.location.href.split('=')[1]]) {
  379.                 currentRoomChatlogs = JSON.parse(localStorage.getItem('rooms'))[window.location.href.split('=')[1]].messages;
  380.             }
  381.         } else {
  382.             return;
  383.         }
  384.  
  385.         if (currentRoomChatlogs) {
  386.             setTimeout(() => {
  387.                 for (const messageData of currentRoomChatlogs) {
  388.                     if (messageData.user !== 'System' && Date.now() - messageData.timestamp < maxMessageAge) {
  389.                         const message = {
  390.                             hasPremium: messageData.hasPremium,
  391.                             msg: messageData.chatLine,
  392.                             festername: messageData.festername,
  393.                             house: messageData.house ? messageData.house : null,
  394.                             color: undefined,
  395.                             user: messageData.user + ': ',
  396.                             timestamp: `${new Date(messageData.timestamp).toLocaleDateString('de-DE')} - ${new Date(
  397.                                 messageData.timestamp
  398.                             )
  399.                                 .toLocaleTimeString('de-DE')
  400.                                 .slice(0, -3)} Uhr`,
  401.                         };
  402.  
  403.                         scope.chatmsgs.push(message);
  404.                         document.getElementById('topbar').click(); // Refresh the chat
  405.                     }
  406.                 }
  407.             }, 1500);
  408.         }
  409.     }
  410.  
  411.  
  412. 	/************************************
  413. 	*
  414. 	*
  415. 	* Autocomplete usernames Modul
  416. 	*
  417. 	*
  418. 	************************************/
  419.     const chatArea = document.getElementById('graphicChatArea');
  420.     chatArea.style.border = 'none';
  421.  
  422.     const messageForm = document.getElementsByName('chatMsgForm')[0];
  423.     const messageInput = document.getElementById('chatline');
  424.  
  425.     messageInput.setAttribute('onKeyUp', 'showResults(this.value)');
  426.  
  427.     const resultDiv = document.createElement('div');
  428.     resultDiv.setAttribute('id', 'username-results');
  429.  
  430.     messageForm.appendChild(resultDiv);
  431.  
  432.     function showResults(value) {
  433.         const result = document.getElementById('username-results');
  434.  
  435.         result.style.display = 'block';
  436.  
  437.         if (!value.includes('@')) {
  438.             result.style.display = 'none';
  439.         }
  440.  
  441.         result.innerHTML = '';
  442.  
  443.         let list = '';
  444.  
  445.         const users = window.autocompleteMatch(value);
  446.  
  447.         for (const user in users) {
  448.             list += `<a class="name-link"><div class="autocomplete-flex autocomplete-list" onclick="replaceName(this.children[1].innerHTML)" tabindex="0"><img class="autocomplete-icon" src="/img/publicimg/skinthumbnails/${
  449.                 users[user].imgthumb
  450.             }"><div class="name-wrap">${users[user].username.split('@')[1]}</div></div></a>`;
  451.         }
  452.  
  453.         result.innerHTML = `<ul style="padding: 0px; margin: 0px;">${list}</ul>`;
  454.  
  455.         const autocompleteListElements = document.getElementsByClassName('autocomplete-list');
  456.  
  457.         for (const element of autocompleteListElements) {
  458.             element.addEventListener('keyup', function (event) {
  459.                 if (event.keyCode === 13) {
  460.                     window.replaceName(this.children[1].innerHTML);
  461.                 }
  462.             });
  463.         }
  464.     }
  465.  
  466.     function autocompleteMatch(input) {
  467.         if (input === '') {
  468.             return [];
  469.         }
  470.  
  471.         const scope = angular.element(document.getElementById('topbar')).scope();
  472.         const users = scope.chatterlist.filter((user) => user.room === scope.roomData.name);
  473.         const userObjects = users.map((user) => {
  474.             return { ...user, username: `@${user.username}` };
  475.         });
  476.  
  477.         const reg = new RegExp(`\\B@(${input.split('@')[1]}.*)$`, 'i');
  478.         return userObjects.filter((user) => {
  479.             if (user.username.match(reg)) {
  480.                 return user;
  481.             }
  482.         });
  483.     }
  484.  
  485.     function replaceName(username) {
  486.         const scope = angular.element(document.getElementById('topbar')).scope();
  487.         const messageInput = document.getElementById('chatline');
  488.  
  489.         scope.chatline = scope.chatline.replace(/\B@(\w*)$/, `${username} `);
  490.  
  491.         const resultDiv = document.getElementById('username-results');
  492.         resultDiv.style.display = 'none';
  493.  
  494.         messageInput.focus();
  495.     }
  496.  
  497.     window.replaceName = replaceName;
  498.     window.showResults = showResults;
  499.     window.autocompleteMatch = autocompleteMatch;
  500.  
  501.     // Main Application Namespace
  502.     const AACApp = {
  503.         init: function () {
  504.             console.log("[AAC Enhanced] Initializing...");
  505.             this.loadModules();
  506.         },
  507.  
  508.         loadModules: function () {
  509.             ChatLogger.init();  // 🔹 Chat Logger initialized seamlessly
  510.             TopWrapperIcon.init();
  511.             WallpaperChanger.init();
  512.             ChatArea.init();
  513.         }
  514.     };
  515.  
  516.   /************************************
  517.    *
  518.    *
  519.    * Video Präferenzen Modul
  520.    *
  521.    *
  522.    ************************************/
  523.  
  524.  
  525. const enableVideosInput = document.getElementById('checkAllowVideo');
  526. const enableVideos =
  527.     JSON.parse(localStorage.getItem('enableVideos')) === undefined
  528.         ? true
  529.         : JSON.parse(localStorage.getItem('enableVideos'));
  530.  
  531. scope.allowVideos = enableVideos;
  532. enableVideosInput.checked = enableVideos;
  533.  
  534. enableVideosInput.addEventListener('change', function () {
  535.     localStorage.setItem('enableVideos', JSON.stringify(this.checked));
  536. });
  537.  
  538.  
  539. 	/************************************
  540. 	*
  541. 	*
  542. 	* Microphone colorsaver Modul
  543. 	*
  544. 	*
  545. 	************************************/
  546. const microphoneBackgroundColor = JSON.parse(localStorage.getItem('microphoneBackgroundColor'));
  547. const microphoneTextColor = JSON.parse(localStorage.getItem('microphoneTextColor'));
  548.  
  549. if (microphoneBackgroundColor && microphoneTextColor) {
  550.     window.addEventListener('globalSocketReady', () => {
  551.         setTimeout(() => {
  552.             window.socket.emit('applyMicrophoneColor', {
  553.                 microphoneBackgroundColor: microphoneBackgroundColor,
  554.                 microphoneTextColor: microphoneTextColor,
  555.             });
  556.         }, 1500);
  557.     });
  558. }
  559.  
  560. window.addEventListener('socketEmit', (event) => {
  561.     if (event.detail.eventName === 'applyMicrophoneColor') {
  562.         localStorage.setItem('microphoneBackgroundColor', JSON.stringify(event.detail.args[0].microphoneBackgroundColor));
  563.         localStorage.setItem('microphoneTextColor', JSON.stringify(event.detail.args[0].microphoneTextColor));
  564.     }
  565. });
  566.   /************************************
  567.    *
  568.    *
  569.    *DM loading Fix Modul
  570.    *
  571.    *
  572.    ************************************/
  573.  
  574. window.addEventListener('globalSocketReady', () => {
  575.     window.socket.on('getPNList', () => {
  576.         const scope = angular.element(document.getElementById('topbar')).scope();
  577.         scope.loading = false;
  578.     });
  579. });
  580.  
  581.  
  582.  
  583.  
  584.  
  585.  
  586.  
  587.   /************************************
  588.    *
  589.    *
  590.    *Top Wrapper & Icon Modul
  591.    *
  592.    *
  593.    ************************************/
  594.  
  595.  
  596.     const TopWrapperIcon = {
  597.         init: function() {
  598.             this.addIconToTopWrapper();
  599.         },
  600.  
  601.         addIconToTopWrapper: function() {
  602.             const topWrapper = document.querySelector('.area');
  603.             if (topWrapper) {
  604.                 const iconButton = this.createIconButton();
  605.                 iconButton.addEventListener('click', () => Menu.createPlaceholderMenu());
  606.                 topWrapper.appendChild(iconButton);
  607.             } else {
  608.                 console.warn('[AAC Enhanced] Top wrapper not found. Icon could not be added.');
  609.             }
  610.         },
  611.  
  612.         createIconButton: function() {
  613.             const iconButton = document.createElement('div');
  614.             iconButton.id = 'aac-topWrapperIcon';
  615.             iconButton.style.width = '40px';
  616.             iconButton.style.height = '40px';
  617.             iconButton.style.borderRadius = '50%';
  618.             iconButton.style.display = 'flex';
  619.             iconButton.style.alignItems = 'center';
  620.             iconButton.style.justifyContent = 'center';
  621.             iconButton.style.cursor = 'pointer';
  622.             iconButton.style.marginRight = '10px';
  623.             iconButton.style.boxShadow = '0 0 5px rgba(0, 0, 0, 0.2)';
  624.  
  625.             const iconImage = document.createElement('img');
  626.             iconImage.src = 'https://i.ibb.co/z5CJ5zv/revanced.png';
  627.             iconImage.alt = 'Menu Icon';
  628.             iconImage.style.width = '100%';
  629.             iconImage.style.height = '100%';
  630.             iconImage.style.borderRadius = '50%';
  631.  
  632.             iconButton.appendChild(iconImage);
  633.             return iconButton;
  634.         }
  635.     };
  636.   /************************************
  637.    *
  638.    *
  639.    *Menü Modul
  640.    *
  641.    *
  642.    ************************************/
  643. const Menu = {
  644.     createPlaceholderMenu: function() {
  645.         const existingMenu = document.querySelector('#aac-placeholderMenu');
  646.         if (existingMenu) {
  647.             existingMenu.remove();
  648.             return;
  649.         }
  650.  
  651.         const menu = this.createMenuElement();
  652.         document.body.appendChild(menu);
  653.  
  654.         ChatArea.updateToggleButton();
  655.         this.updateToggleLeftbarButton();
  656.     },
  657.  
  658.     createMenuElement: function() {
  659.     const menu = document.createElement('div');
  660.     menu.id = 'aac-placeholderMenu';
  661.     const iconButton = document.querySelector('#aac-topWrapperIcon');
  662.     const iconButtonRect = iconButton.getBoundingClientRect();
  663.     menu.style.position = 'absolute';
  664.     menu.style.top = `${iconButtonRect.bottom + window.scrollY + 10}px`;
  665.     menu.style.left = `${iconButtonRect.left + window.scrollX}px`;
  666.     menu.style.zIndex = '10001';
  667.     menu.style.padding = '20px';
  668.     menu.style.backgroundColor = '#fff';
  669.     menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  670.     menu.style.borderRadius = '10px';
  671.     menu.style.textAlign = 'center';
  672.  
  673.     const title = this.createTitleElement();
  674.     const wallpaperSectionTitle = document.createElement('h4');
  675.     wallpaperSectionTitle.innerText = 'Wallpaper Einstellungen';
  676.     wallpaperSectionTitle.style.marginTop = '20px';
  677.     wallpaperSectionTitle.style.marginBottom = '10px';
  678.  
  679.     const wallpaperChangerButton = WallpaperChanger.createWallpaperChangerButton();
  680.     const savedWallpapersButton = WallpaperChanger.createSavedWallpapersButton();
  681.     const uiSettingsSectionTitle = document.createElement('h4');
  682.     uiSettingsSectionTitle.innerText = 'UI Einstellungen';
  683.     uiSettingsSectionTitle.style.marginTop = '20px';
  684.     uiSettingsSectionTitle.style.marginBottom = '10px';
  685.  
  686.     const toggleChatAreaButton = ChatArea.createToggleChatAreaButton();
  687.     const toggleLeftbarButton = this.createToggleLeftbarButton();
  688.  
  689.     // Add Reset Button to UI Settings
  690.     const resetChatAreaButton = document.createElement('button');
  691.     resetChatAreaButton.innerText = 'Chat Fenster Position zurücksetzen';
  692.     resetChatAreaButton.style.padding = '10px';
  693.     resetChatAreaButton.style.backgroundColor = '#573699';
  694.     resetChatAreaButton.style.color = '#fff';
  695.     resetChatAreaButton.style.border = 'none';
  696.     resetChatAreaButton.style.borderRadius = '5px';
  697.     resetChatAreaButton.style.cursor = 'pointer';
  698.     resetChatAreaButton.style.marginBottom = '10px';
  699.     resetChatAreaButton.addEventListener('click', () => ChatArea.resetChatAreaPosition());
  700.  
  701.     // PNG Management Section
  702.     const pngSectionTitle = document.createElement('h4');
  703.     pngSectionTitle.innerText = 'PNG Management';
  704.     pngSectionTitle.style.marginTop = '20px';
  705.     pngSectionTitle.style.marginBottom = '10px';
  706.  
  707.     const pngManagerButton = this.createPngManagerButton();
  708.  
  709.     const closeButton = this.createCloseButton();
  710.  
  711.     menu.appendChild(title);
  712.     menu.appendChild(wallpaperSectionTitle);
  713.     menu.appendChild(wallpaperChangerButton);
  714.     menu.appendChild(document.createElement('br'));
  715.     menu.appendChild(savedWallpapersButton);
  716.     menu.appendChild(document.createElement('br'));
  717.     menu.appendChild(uiSettingsSectionTitle);
  718.     menu.appendChild(toggleChatAreaButton);
  719.     menu.appendChild(document.createElement('br'));
  720.     menu.appendChild(toggleLeftbarButton);
  721.     menu.appendChild(document.createElement('br'));
  722.     menu.appendChild(resetChatAreaButton); // Moved here
  723.     menu.appendChild(document.createElement('br'));
  724.  
  725.     // Append PNG Management section
  726.     menu.appendChild(pngSectionTitle);
  727.     menu.appendChild(pngManagerButton);
  728.     menu.appendChild(document.createElement('br'));
  729.  
  730.     menu.appendChild(closeButton);
  731.  
  732.     return menu;
  733. },
  734.  
  735.     createTitleElement: function() {
  736.         const title = document.createElement('h3');
  737.         title.innerText = 'AC-Enhanced Settings';
  738.         title.style.marginBottom = '20px';
  739.         return title;
  740.     },
  741.  
  742.     createToggleLeftbarButton: function() {
  743.         const toggleLeftbarButton = document.createElement('button');
  744.         toggleLeftbarButton.id = 'aac-toggleLeftbarButton';
  745.         toggleLeftbarButton.style.padding = '10px';
  746.         toggleLeftbarButton.style.color = '#fff';
  747.         toggleLeftbarButton.style.border = 'none';
  748.         toggleLeftbarButton.style.borderRadius = '5px';
  749.         toggleLeftbarButton.style.cursor = 'pointer';
  750.         toggleLeftbarButton.style.marginBottom = '10px';
  751.  
  752.         toggleLeftbarButton.addEventListener('click', () => Menu.toggleLeftbarVisibility());
  753.  
  754.         return toggleLeftbarButton;
  755.     },
  756.  
  757.     createResetChatAreaButton: function() {
  758.         const resetButton = document.createElement('button');
  759.         resetButton.innerText = 'Chat Fenster Position zurücksetzen';
  760.         resetButton.style.padding = '10px';
  761.         resetButton.style.backgroundColor = '#573699';
  762.         resetButton.style.color = '#fff';
  763.         resetButton.style.border = 'none';
  764.         resetButton.style.borderRadius = '5px';
  765.         resetButton.style.cursor = 'pointer';
  766.         resetButton.style.marginBottom = '10px';
  767.  
  768.         resetButton.addEventListener('click', () => ChatArea.resetChatAreaPosition());
  769.  
  770.         return resetButton;
  771.     },
  772.  
  773.     createPngManagerButton: function() {
  774.         const pngManagerButton = document.createElement('button');
  775.         pngManagerButton.innerText = 'PNG Management';
  776.         pngManagerButton.style.padding = '10px';
  777.         pngManagerButton.style.backgroundColor = '#573699';
  778.         pngManagerButton.style.color = '#fff';
  779.         pngManagerButton.style.border = 'none';
  780.         pngManagerButton.style.borderRadius = '5px';
  781.         pngManagerButton.style.cursor = 'pointer';
  782.         pngManagerButton.style.marginBottom = '10px';
  783.  
  784.         pngManagerButton.addEventListener('click', () => {
  785.             PngManager.createPngMenu();
  786.         });
  787.  
  788.         return pngManagerButton;
  789.     },
  790.  
  791.     createCloseButton: function() {
  792.         const closeButton = document.createElement('button');
  793.         closeButton.innerText = 'Schließen';
  794.         closeButton.style.padding = '10px';
  795.         closeButton.style.backgroundColor = '#ccc';
  796.         closeButton.style.color = '#000';
  797.         closeButton.style.border = 'none';
  798.         closeButton.style.borderRadius = '5px';
  799.         closeButton.style.cursor = 'pointer';
  800.  
  801.         closeButton.addEventListener('click', () => {
  802.             const menu = document.querySelector('#aac-placeholderMenu');
  803.             if (menu) menu.remove();
  804.         });
  805.  
  806.         return closeButton;
  807.     },
  808.  
  809.     toggleLeftbarVisibility: function() {
  810.         const leftbar = document.querySelector('#leftbar');
  811.         const chatBox = document.querySelector('#chatverlaufbox');
  812.         if (!leftbar) return;
  813.  
  814.         if (leftbar.style.visibility === 'hidden') {
  815.             leftbar.style.transition = 'visibility 0s, opacity 0.5s linear';
  816.             leftbar.style.opacity = '1';
  817.             leftbar.style.visibility = 'visible';
  818.             leftbar.style.pointerEvents = 'auto';
  819.             if (chatBox) chatBox.style.left = '250px';
  820.             localStorage.setItem('aac-leftbarVisibility', 'visible');
  821.         } else {
  822.             leftbar.style.transition = 'visibility 0s 0.5s, opacity 0.5s linear';
  823.             leftbar.style.opacity = '0';
  824.             leftbar.style.visibility = 'hidden';
  825.             leftbar.style.pointerEvents = 'none';
  826.             if (chatBox) chatBox.style.left = '0';
  827.             localStorage.setItem('aac-leftbarVisibility', 'hidden');
  828.         }
  829.  
  830.         this.updateToggleLeftbarButton();
  831.     }
  832. };
  833.  
  834.  
  835.  
  836.  
  837.  
  838. Menu.updateToggleLeftbarButton = function() {
  839.     const toggleLeftbarButton = document.querySelector('#aac-toggleLeftbarButton');
  840.     const leftbarVisible = localStorage.getItem('aac-leftbarVisibility') !== 'hidden';
  841.  
  842.     if (toggleLeftbarButton) {
  843.         if (leftbarVisible) {
  844.             toggleLeftbarButton.innerText = 'User Liste verstecken';
  845.             toggleLeftbarButton.style.backgroundColor = '#573699';
  846.         } else {
  847.             toggleLeftbarButton.innerText = 'User Liste zeigen';
  848.             toggleLeftbarButton.style.backgroundColor = '#FF0000';
  849.         }
  850.     }
  851. };
  852.  
  853.  
  854.     // Initialize the leftbar visibility state on load
  855.     document.addEventListener('DOMContentLoaded', () => {
  856.         sessionStorage.removeItem('aac-wallpaperChanged');
  857.         sessionStorage.removeItem('aac-chatAreaButtonState');
  858.         const leftbar = document.querySelector('#leftbar');
  859.         const chatBox = document.querySelector('#chatverlaufbox');
  860.         const toggleLeftbarButton = document.querySelector('#aac-toggleLeftbarButton');
  861.         if (leftbar) {
  862.             const leftbarVisible = localStorage.getItem('aac-leftbarVisibility') !== 'hidden';
  863.             leftbar.style.transition = 'visibility 0s, opacity 0.5s linear';
  864.             leftbar.style.opacity = leftbarVisible ? '1' : '0';
  865.             leftbar.style.visibility = leftbarVisible ? 'visible' : 'hidden';
  866.             leftbar.style.pointerEvents = leftbarVisible ? 'auto' : 'none';
  867.             if (chatBox) {
  868.                 chatBox.style.left = leftbarVisible ? '250px' : '0'; // Ensure consistent positioning for chatbox
  869.             }
  870.             if (toggleLeftbarButton) {
  871.                 toggleLeftbarButton.innerText = leftbarVisible ? 'User Liste verstecken' : 'User Liste zeigen';
  872.                 toggleLeftbarButton.style.backgroundColor = leftbarVisible ? '#573699' : '#FF0000';
  873.             }
  874.         }
  875.         window.onbeforeunload = () => {}; // Disable confirmation popup when reloading the page
  876.     });
  877.  
  878.   /************************************
  879.    *
  880.    *
  881.    * PNG "Sticker" Modul
  882.    *
  883.    *
  884.    ************************************/
  885. const PngManager = {
  886.     init: function() {
  887.         $(document).ready(() => {
  888.             this.loadSavedPngs();
  889.         });
  890.     },
  891.  
  892.     loadSavedPngs: function() {
  893.         const savedPngs = JSON.parse(localStorage.getItem('aac-savedPngs') || '[]');
  894.         savedPngs.forEach((png, index) => {
  895.             if (png.active) {
  896.                 this.createPngElement(png.url, index);
  897.             }
  898.         });
  899.     },
  900.  
  901.     createPngMenu: function() {
  902.         const existingMenu = document.querySelector('#aac-pngMenu');
  903.         if (existingMenu) {
  904.             existingMenu.remove();
  905.             return;
  906.         }
  907.  
  908.         const menu = document.createElement('div');
  909.         menu.id = 'aac-pngMenu';
  910.         menu.style.position = 'fixed';
  911.         menu.style.top = '50%';
  912.         menu.style.left = '50%';
  913.         menu.style.transform = 'translate(-50%, -50%)';
  914.         menu.style.zIndex = '10001';
  915.         menu.style.padding = '20px';
  916.         menu.style.backgroundColor = '#fff';
  917.         menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  918.         menu.style.borderRadius = '10px';
  919.         menu.style.textAlign = 'center';
  920.  
  921.         const title = document.createElement('h3');
  922.         title.innerText = 'PNG Management';
  923.         title.style.marginBottom = '20px';
  924.         menu.appendChild(title);
  925.  
  926.         // Toggle Handles Button
  927.         const toggleHandlesButton = document.createElement('button');
  928.         toggleHandlesButton.innerText = 'Toggle Handles';
  929.         toggleHandlesButton.style.padding = '10px';
  930.         toggleHandlesButton.style.backgroundColor = '#573699';
  931.         toggleHandlesButton.style.color = '#fff';
  932.         toggleHandlesButton.style.border = 'none';
  933.         toggleHandlesButton.style.borderRadius = '5px';
  934.         toggleHandlesButton.style.cursor = 'pointer';
  935.         toggleHandlesButton.style.marginBottom = '10px';
  936.  
  937.         toggleHandlesButton.addEventListener('click', () => {
  938.             const handles = document.querySelectorAll('.aac-png-handle');
  939.             const areHandlesVisible = handles[0].style.display !== 'none';
  940.  
  941.             handles.forEach(handle => {
  942.                 handle.style.display = areHandlesVisible ? 'none' : 'block';
  943.             });
  944.  
  945.             // Save state to localStorage
  946.             localStorage.setItem('aac-png-handles-visible', !areHandlesVisible);
  947.         });
  948.  
  949.         menu.appendChild(toggleHandlesButton);
  950.  
  951.         const savedPngs = JSON.parse(localStorage.getItem('aac-savedPngs') || '[]');
  952.         savedPngs.forEach((png, index) => {
  953.             const pngContainer = document.createElement('div');
  954.             pngContainer.style.display = 'flex';
  955.             pngContainer.style.alignItems = 'center';
  956.             pngContainer.style.marginBottom = '10px';
  957.  
  958.             const thumbnail = document.createElement('img');
  959.             thumbnail.src = png.url;
  960.             thumbnail.alt = png.name || `PNG ${index + 1}`;
  961.             thumbnail.style.width = '50px';
  962.             thumbnail.style.height = '50px';
  963.             thumbnail.style.objectFit = 'cover';
  964.             thumbnail.style.borderRadius = '5px';
  965.             thumbnail.style.marginRight = '10px';
  966.  
  967.             const activateButton = document.createElement('button');
  968.             activateButton.innerText = png.active ? 'Ausblenden' : 'Einblenden';
  969.             activateButton.style.padding = '10px';
  970.             activateButton.style.marginRight = '5px';
  971.             activateButton.style.backgroundColor = png.active ? '#FF0000' : '#573699';
  972.             activateButton.style.color = '#fff';
  973.             activateButton.style.border = 'none';
  974.             activateButton.style.borderRadius = '5px';
  975.             activateButton.style.cursor = 'pointer';
  976.  
  977.             activateButton.addEventListener('click', () => {
  978.                 png.active = !png.active;
  979.                 savedPngs[index] = png;
  980.                 localStorage.setItem('aac-savedPngs', JSON.stringify(savedPngs));
  981.                 if (png.active) {
  982.                     this.createPngElement(png.url, index);
  983.                 } else {
  984.                     const existingPng = document.querySelector(`#aac-png-${index}`);
  985.                     if (existingPng) existingPng.remove();
  986.                 }
  987.                 activateButton.innerText = png.active ? 'Ausblenden' : 'Einblenden';
  988.                 activateButton.style.backgroundColor = png.active ? '#FF0000' : '#573699';
  989.             });
  990.  
  991.             const deleteButton = document.createElement('button');
  992.             deleteButton.innerText = '✕';
  993.             deleteButton.style.marginLeft = '5px';
  994.             deleteButton.style.padding = '2px';
  995.             deleteButton.style.width = '20px';
  996.             deleteButton.style.height = '20px';
  997.             deleteButton.style.backgroundColor = '#FF0000';
  998.             deleteButton.style.color = '#fff';
  999.             deleteButton.style.border = 'none';
  1000.             deleteButton.style.borderRadius = '3px';
  1001.             deleteButton.style.cursor = 'pointer';
  1002.  
  1003.             deleteButton.addEventListener('click', () => {
  1004.                 savedPngs.splice(index, 1);
  1005.                 localStorage.setItem('aac-savedPngs', JSON.stringify(savedPngs));
  1006.  
  1007.                 // Remove the entire container (including handles)
  1008.                 const existingPngContainer = document.querySelector(`#aac-png-container-${index}`);
  1009.                 if (existingPngContainer) existingPngContainer.remove();
  1010.  
  1011.     menu.remove();
  1012.     this.createPngMenu();
  1013. });
  1014.  
  1015.             pngContainer.appendChild(thumbnail);
  1016.             pngContainer.appendChild(activateButton);
  1017.             pngContainer.appendChild(deleteButton);
  1018.             menu.appendChild(pngContainer);
  1019.         });
  1020.  
  1021.         const fileInput = document.createElement('input');
  1022.         fileInput.type = 'file';
  1023.         fileInput.accept = 'image/png';
  1024.         fileInput.style.marginBottom = '10px';
  1025.         fileInput.style.display = 'block';
  1026.  
  1027.         fileInput.addEventListener('change', (event) => {
  1028.             const file = event.target.files[0];
  1029.             if (file) {
  1030.                 if (file.size > 2560 * 2560) {
  1031.                     alert('Die PNG-Datei ist zu groß. Bitte wählen Sie eine Datei, die kleiner als 2,5 MB ist.');
  1032.                     return;
  1033.                 }
  1034.  
  1035.                 const reader = new FileReader();
  1036.                 reader.onload = (e) => {
  1037.                     const pngUrl = e.target.result;
  1038.                     let savedPngs = JSON.parse(localStorage.getItem('aac-savedPngs') || '[]');
  1039.                     if (savedPngs.length >= 5) {
  1040.                         alert('Du kannst maximal 5 PNG-Dateien speichern. Bitte lösche eine, bevor du eine neue hinzufügst.');
  1041.                         return;
  1042.                     }
  1043.                     savedPngs.push({ url: pngUrl, name: file.name, active: false });
  1044.                     localStorage.setItem('aac-savedPngs', JSON.stringify(savedPngs));
  1045.                     menu.remove();
  1046.                     this.createPngMenu();
  1047.                 };
  1048.                 reader.readAsDataURL(file);
  1049.             }
  1050.         });
  1051.  
  1052.         const closeButton = document.createElement('button');
  1053.         closeButton.innerText = 'Schließen';
  1054.         closeButton.style.marginTop = '20px';
  1055.         closeButton.style.padding = '10px';
  1056.         closeButton.style.backgroundColor = '#ccc';
  1057.         closeButton.style.color = '#000';
  1058.         closeButton.style.border = 'none';
  1059.         closeButton.style.borderRadius = '5px';
  1060.         closeButton.style.cursor = 'pointer';
  1061.  
  1062.         closeButton.addEventListener('click', () => {
  1063.             menu.remove();
  1064.         });
  1065.  
  1066.         menu.appendChild(fileInput);
  1067.         menu.appendChild(closeButton);
  1068.  
  1069.         document.body.appendChild(menu);
  1070.     },
  1071.  
  1072.     createResizeHandle: function() {
  1073.     const resizeHandle = document.createElement('div');
  1074.     resizeHandle.classList.add('aac-png-handle');
  1075.     resizeHandle.style.width = '15px';
  1076.     resizeHandle.style.height = '15px';
  1077.     resizeHandle.style.backgroundColor = '#573699'; // Purple for resizing
  1078.     resizeHandle.style.border = '2px solid #fff';
  1079.     resizeHandle.style.position = 'absolute';
  1080.     resizeHandle.style.right = '0';
  1081.     resizeHandle.style.bottom = '0';
  1082.     resizeHandle.style.cursor = 'se-resize';
  1083.     resizeHandle.title = 'Resize'; // Tooltip
  1084.     return resizeHandle;
  1085. },
  1086.  
  1087. createRotateHandle: function() {
  1088.     const rotateHandle = document.createElement('div');
  1089.     rotateHandle.classList.add('aac-png-handle');
  1090.     rotateHandle.style.width = '15px';
  1091.     rotateHandle.style.height = '15px';
  1092.     rotateHandle.style.backgroundColor = '#FF0000'; // Red for rotating
  1093.     rotateHandle.style.border = '2px solid #fff';
  1094.     rotateHandle.style.position = 'absolute';
  1095.     rotateHandle.style.top = '0';
  1096.     rotateHandle.style.right = '0';
  1097.     rotateHandle.style.cursor = 'grab';
  1098.     rotateHandle.title = 'Rotate'; // Tooltip
  1099.     return rotateHandle;
  1100. },
  1101.  
  1102. createPngElement: function(url, index) {
  1103.     const pngElement = document.createElement('img');
  1104.     pngElement.src = url;
  1105.     pngElement.id = `aac-png-${index}`;
  1106.  
  1107.     // Set initial styles for the PNG
  1108.     pngElement.style.position = 'absolute'; // Position relative to the container
  1109.     pngElement.style.width = '150px';
  1110.     pngElement.style.height = '150px';
  1111.     pngElement.style.cursor = 'move';
  1112.     pngElement.style.transformOrigin = 'center center'; // For rotation
  1113.  
  1114.     // Container for the PNG and handles
  1115.     const pngContainer = document.createElement('div');
  1116.     pngContainer.id = `aac-png-container-${index}`; // Unique ID for the container
  1117.     pngContainer.style.position = 'fixed';
  1118.     pngContainer.style.top = '100px';
  1119.     pngContainer.style.left = '100px';
  1120.     pngContainer.style.zIndex = '10002';
  1121.     pngContainer.style.pointerEvents = 'auto';
  1122.  
  1123.     // Append the PNG to the container
  1124.     pngContainer.appendChild(pngElement);
  1125.  
  1126.     // Create and append handles
  1127.     const resizeHandle = this.createResizeHandle();
  1128.     const rotateHandle = this.createRotateHandle();
  1129.     pngContainer.appendChild(resizeHandle);
  1130.     pngContainer.appendChild(rotateHandle);
  1131.  
  1132.     // Append the container to the body
  1133.     document.body.appendChild(pngContainer);
  1134.  
  1135.     let isDragging = false;
  1136.     let isResizing = false;
  1137.     let isRotating = false;
  1138.     let startX, startY, initialLeft, initialTop, initialWidth, initialHeight, initialAngle;
  1139.  
  1140.     // Dragging logic
  1141.     pngContainer.addEventListener('mousedown', (e) => {
  1142.         if (e.target === resizeHandle || e.target === rotateHandle) {
  1143.             return; // Ignore mousedown on handles for dragging
  1144.         }
  1145.  
  1146.         e.preventDefault();
  1147.         isDragging = true;
  1148.         startX = e.clientX;
  1149.         startY = e.clientY;
  1150.         initialLeft = parseInt(pngContainer.style.left, 10) || 0;
  1151.         initialTop = parseInt(pngContainer.style.top, 10) || 0;
  1152.         pngElement.style.opacity = '0.6';
  1153.     });
  1154.  
  1155.     // Resizing logic
  1156.     resizeHandle.addEventListener('mousedown', (e) => {
  1157.         e.preventDefault();
  1158.         isResizing = true;
  1159.         startX = e.clientX;
  1160.         startY = e.clientY;
  1161.         initialWidth = pngElement.offsetWidth;
  1162.         initialHeight = pngElement.offsetHeight;
  1163.     });
  1164.  
  1165.     // Rotating logic
  1166.     rotateHandle.addEventListener('mousedown', (e) => {
  1167.         e.preventDefault();
  1168.         isRotating = true;
  1169.         startX = e.clientX;
  1170.         startY = e.clientY;
  1171.         const transform = pngElement.style.transform;
  1172.         initialAngle = transform ? parseFloat(transform.replace('rotate(', '').replace('deg)', '')) : 0;
  1173.     });
  1174.  
  1175.     document.addEventListener('mousemove', (e) => {
  1176.         if (isDragging) {
  1177.             const deltaX = e.clientX - startX;
  1178.             const deltaY = e.clientY - startY;
  1179.             const newLeft = initialLeft + deltaX;
  1180.             const newTop = initialTop + deltaY;
  1181.  
  1182.             // Update container position
  1183.             pngContainer.style.left = `${newLeft}px`;
  1184.             pngContainer.style.top = `${newTop}px`;
  1185.         }
  1186.  
  1187.         if (isResizing) {
  1188.             const deltaX = e.clientX - startX;
  1189.             const deltaY = e.clientY - startY;
  1190.             const newWidth = initialWidth + deltaX;
  1191.             const newHeight = initialHeight + deltaY;
  1192.  
  1193.             // Ensure minimum size
  1194.             if (newWidth > 50 && newHeight > 50) {
  1195.                 pngElement.style.width = `${newWidth}px`;
  1196.                 pngElement.style.height = `${newHeight}px`;
  1197.             }
  1198.         }
  1199.  
  1200.         if (isRotating) {
  1201.             const deltaX = e.clientX - startX;
  1202.             const deltaY = e.clientY - startY;
  1203.             const angle = initialAngle + Math.atan2(deltaY, deltaX) * (180 / Math.PI);
  1204.             pngElement.style.transform = `rotate(${angle}deg)`;
  1205.         }
  1206.     });
  1207.  
  1208.     document.addEventListener('mouseup', () => {
  1209.         isDragging = false;
  1210.         isResizing = false;
  1211.         isRotating = false;
  1212.         pngElement.style.opacity = '1';
  1213.     });
  1214. }
  1215. };
  1216.  
  1217. // Load handle visibility state on page load
  1218.     document.addEventListener('DOMContentLoaded', () => {
  1219.     const handlesVisible = localStorage.getItem('aac-png-handles-visible') === 'true';
  1220.     const handles = document.querySelectorAll('.aac-png-handle');
  1221.     handles.forEach(handle => {
  1222.         handle.style.display = handlesVisible ? 'block' : 'none';
  1223.     });
  1224. });
  1225.  
  1226.  
  1227.   /************************************
  1228.    *
  1229.    *
  1230.    * Wallpaper Modul
  1231.    *
  1232.    *
  1233.    ************************************/
  1234.  
  1235.  
  1236.     const WallpaperChanger = {
  1237.         init: function() {
  1238.             this.applySavedBackground();
  1239.         },
  1240.  
  1241.         applySavedBackground: function() {
  1242.             const savedImageUrl = localStorage.getItem('aac-customBackgroundUrl');
  1243.             if (savedImageUrl) {
  1244.                 this.applyCustomBackground(savedImageUrl);
  1245.             } else {
  1246.                 this.resetToDefaultBackground();
  1247.             }
  1248.         },
  1249.  
  1250.         applyCustomBackground: function(url) {
  1251.             if (url) {
  1252.                 document.documentElement.style.cssText = `
  1253.                     background-image: url("${url}") !important;
  1254.                     background-color: #000 !important;
  1255.                     background-position: center center !important;
  1256.                     background-attachment: fixed !important;
  1257.                     background-size: cover !important;
  1258.                     background-repeat: no-repeat !important;
  1259.                 `;
  1260.                 document.body.style.cssText = `
  1261.                     background-image: url("${url}") !important;
  1262.                     background-color: #000 !important;
  1263.                     background-position: center center !important;
  1264.                     background-attachment: fixed !important;
  1265.                     background-size: cover !important;
  1266.                     background-repeat: no-repeat !important;
  1267.                 `;
  1268.             }
  1269.         },
  1270.  
  1271.         resetToDefaultBackground: function() {
  1272.             document.documentElement.style.cssText = '';
  1273.             document.body.style.cssText = '';
  1274.             localStorage.removeItem('aac-customBackgroundUrl');
  1275.         },
  1276.  
  1277.  createWallpaperChangerButton: function() {
  1278.         const button = document.createElement('button');
  1279.         button.innerText = 'Hintergrund ändern'; // Change Wallpaper -> Hintergrund ändern
  1280.         button.style.padding = '10px';
  1281.         button.style.backgroundColor = '#573699';
  1282.         button.style.color = '#fff';
  1283.         button.style.border = 'none';
  1284.         button.style.borderRadius = '5px';
  1285.         button.style.cursor = 'pointer';
  1286.         button.style.marginBottom = '10px';
  1287.  
  1288.         button.addEventListener('click', () => {
  1289.             WallpaperChanger.createInputMenu();
  1290.             const menu = document.querySelector('#aac-placeholderMenu');
  1291.             if (menu) menu.remove();
  1292.         });
  1293.  
  1294.         return button;
  1295.     },
  1296.  
  1297. createSavedWallpapersButton: function() {
  1298.     const button = document.createElement('button');
  1299.     button.innerText = 'Gespeicherte Hintergründe'; // Saved Wallpapers -> Gespeicherte Hintergründe
  1300.     button.style.padding = '10px';
  1301.     button.style.backgroundColor = '#573699';
  1302.     button.style.color = '#fff';
  1303.     button.style.border = 'none';
  1304.     button.style.borderRadius = '5px';
  1305.     button.style.cursor = 'pointer';
  1306.     button.style.marginBottom = '10px';
  1307.  
  1308.     button.addEventListener('click', () => {
  1309.         WallpaperChanger.createSavedWallpapersMenu();
  1310.     });
  1311.  
  1312.     return button;
  1313. },
  1314.  
  1315. createSavedWallpapersMenu: function() {
  1316.     const menu = document.createElement('div');
  1317.     menu.style.position = 'fixed';
  1318.     menu.style.top = '50%';
  1319.     menu.style.left = '50%';
  1320.     menu.style.transform = 'translate(-50%, -50%)';
  1321.     menu.style.zIndex = '10001';
  1322.     menu.style.padding = '20px';
  1323.     menu.style.backgroundColor = '#fff';
  1324.     menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  1325.     menu.style.borderRadius = '10px';
  1326.     menu.style.textAlign = 'center';
  1327.  
  1328.     const title = document.createElement('h3');
  1329.     title.innerText = 'Gespeicherte Hintergründe';
  1330.     title.style.marginBottom = '20px';
  1331.     menu.appendChild(title);
  1332.  
  1333.     const savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
  1334.     savedWallpapers.forEach((wallpaper, index) => {
  1335.         const wallpaperContainer = document.createElement('div');
  1336.         wallpaperContainer.style.display = 'flex';
  1337.         wallpaperContainer.style.alignItems = 'center';
  1338.         wallpaperContainer.style.marginBottom = '10px';
  1339.  
  1340.         const thumbnail = document.createElement('img');
  1341.         thumbnail.src = wallpaper.url;
  1342.         thumbnail.alt = wallpaper.name || `Wallpaper ${index + 1}`;
  1343.         thumbnail.style.width = '50px';
  1344.         thumbnail.style.height = '50px';
  1345.         thumbnail.style.objectFit = 'cover';
  1346.         thumbnail.style.borderRadius = '5px';
  1347.         thumbnail.style.marginRight = '10px';
  1348.  
  1349.         const wallpaperButton = document.createElement('button');
  1350.         wallpaperButton.innerText = wallpaper.name || `Wallpaper ${index + 1}`;
  1351.         wallpaperButton.style.padding = '10px';
  1352.         wallpaperButton.style.backgroundColor = '#573699';
  1353.         wallpaperButton.style.color = '#fff';
  1354.         wallpaperButton.style.border = 'none';
  1355.         wallpaperButton.style.borderRadius = '5px';
  1356.         wallpaperButton.style.cursor = 'pointer';
  1357.         wallpaperButton.style.marginRight = '5px';
  1358.         wallpaperButton.addEventListener('click', () => {
  1359.             WallpaperChanger.applyCustomBackground(wallpaper.url);
  1360.             localStorage.setItem('aac-customBackgroundUrl', wallpaper.url); // Save the applied wallpaper URL
  1361.         });
  1362.  
  1363. const deleteButton = document.createElement('button');
  1364. deleteButton.innerText = '✕';
  1365. deleteButton.style.marginLeft = '5px';
  1366. deleteButton.style.padding = '2px';
  1367. deleteButton.style.width = '20px';
  1368. deleteButton.style.height = '20px';
  1369. deleteButton.style.backgroundColor = '#FF0000';
  1370. deleteButton.style.color = '#fff';
  1371. deleteButton.style.border = 'none';
  1372. deleteButton.style.borderRadius = '3px';
  1373. deleteButton.style.cursor = 'pointer';
  1374. deleteButton.addEventListener('click', () => {
  1375.     let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
  1376.  
  1377.     // Remove the selected wallpaper
  1378.     savedWallpapers.splice(index, 1);
  1379.     localStorage.setItem('aac-savedWallpapers', JSON.stringify(savedWallpapers));
  1380.  
  1381.     // Remove the wallpaper container
  1382.     wallpaperContainer.remove();
  1383.  
  1384.     // Refresh the menu to reflect the change
  1385.     menu.remove();
  1386.     WallpaperChanger.createSavedWallpapersMenu();
  1387. });
  1388.  
  1389.  
  1390.         wallpaperContainer.appendChild(thumbnail);
  1391.         wallpaperContainer.appendChild(wallpaperButton);
  1392.         wallpaperContainer.appendChild(deleteButton);
  1393.         menu.appendChild(wallpaperContainer);
  1394.     });
  1395.  
  1396.     // Add a button to reset to the default wallpaper
  1397.     const resetButton = document.createElement('button');
  1398.     resetButton.innerText = 'Standardhintergrund wiederherstellen'; // Reset to Default Background
  1399.     resetButton.style.marginTop = '20px';
  1400.     resetButton.style.padding = '10px';
  1401.     resetButton.style.backgroundColor = '#ccc';
  1402.     resetButton.style.color = '#000';
  1403.     resetButton.style.border = 'none';
  1404.     resetButton.style.borderRadius = '5px';
  1405.     resetButton.style.cursor = 'pointer';
  1406.     resetButton.addEventListener('click', () => {
  1407.         WallpaperChanger.resetToDefaultBackground();
  1408.         menu.remove();
  1409.     });
  1410.  
  1411.     menu.appendChild(resetButton);
  1412.  
  1413.     const closeButton = document.createElement('button');
  1414.     closeButton.innerText = 'Schließen';
  1415.     closeButton.style.marginTop = '10px';
  1416.     closeButton.style.padding = '10px';
  1417.     closeButton.style.backgroundColor = '#ccc';
  1418.     closeButton.style.color = '#000';
  1419.     closeButton.style.border = 'none';
  1420.     closeButton.style.borderRadius = '5px';
  1421.     closeButton.style.cursor = 'pointer';
  1422.     closeButton.addEventListener('click', () => {
  1423.         menu.remove();
  1424.     });
  1425.  
  1426.     menu.appendChild(closeButton);
  1427.     document.body.appendChild(menu);
  1428. },
  1429.  
  1430.         createInputMenu: function() {
  1431.             const menu = document.createElement('div');
  1432.             menu.style.position = 'fixed';
  1433.             menu.style.top = '50%';
  1434.             menu.style.left = '50%';
  1435.             menu.style.transform = 'translate(-50%, -50%)';
  1436.             menu.style.zIndex = '10001';
  1437.             menu.style.padding = '20px';
  1438.             menu.style.backgroundColor = '#fff';
  1439.             menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  1440.             menu.style.borderRadius = '10px';
  1441.             menu.style.textAlign = 'center';
  1442.  
  1443.             const input = document.createElement('input');
  1444.             input.type = 'text';
  1445.             input.placeholder = 'Bild-URL hier eingeben...'; // Enter image URL here...
  1446.             input.value = localStorage.getItem('aac-customBackgroundUrl') || '';
  1447.             input.style.width = '300px';
  1448.             input.style.padding = '10px';
  1449.             input.style.marginBottom = '10px';
  1450.             input.style.border = '1px solid #ccc';
  1451.             input.style.borderRadius = '5px';
  1452.  
  1453.             const nameInput = document.createElement('input');
  1454.             nameInput.type = 'text';
  1455.             nameInput.placeholder = 'Geben Sie den Namen des Hintergrunds ein...'; // Enter wallpaper name...
  1456.             nameInput.style.width = '300px';
  1457.             nameInput.style.padding = '10px';
  1458.             nameInput.style.marginBottom = '10px';
  1459.             nameInput.style.border = '1px solid #ccc';
  1460.             nameInput.style.borderRadius = '5px';
  1461.  
  1462.             const fileInput = document.createElement('input');
  1463.             fileInput.type = 'file';
  1464.             fileInput.accept = 'image/*';
  1465.             fileInput.style.marginBottom = '10px';
  1466.  
  1467.             fileInput.addEventListener('change', (event) => {
  1468.                 const file = event.target.files[0];
  1469.                 if (file) {
  1470.                     // Check if file size exceeds 1 MB (1 MB = 1024 * 1024 bytes)
  1471.                    if (file.size > 2.5 * 1024 * 1024) {
  1472.                        alert('Die Bilddatei ist zu groß. Bitte wählen Sie eine Datei, die kleiner als 2,5 MB ist.');
  1473.                        return;
  1474. }
  1475.  
  1476.                     const reader = new FileReader();
  1477.                     reader.onload = (e) => {
  1478.                         const imageUrl = e.target.result;
  1479.                         input.value = imageUrl;
  1480.                     };
  1481.                     reader.readAsDataURL(file);
  1482.                 }
  1483.             });
  1484.  
  1485.     const applyButton = document.createElement('button');
  1486.             applyButton.innerText = 'Hintergrund anwenden'; // Apply Background -> Hintergrund anwenden
  1487.             applyButton.style.marginLeft = '10px';
  1488.             applyButton.style.padding = '10px';
  1489.             applyButton.style.backgroundColor = '#573699';
  1490.             applyButton.style.color = '#fff';
  1491.             applyButton.style.border = 'none';
  1492.             applyButton.style.borderRadius = '5px';
  1493.             applyButton.style.cursor = 'pointer';
  1494.  
  1495.             applyButton.addEventListener('click', () => {
  1496.                 const imageUrl = input.value.trim();
  1497.                 const wallpaperName = nameInput.value.trim();
  1498.                 if (imageUrl && wallpaperName) {
  1499.                     localStorage.setItem('aac-customBackgroundUrl', imageUrl);
  1500.                     WallpaperChanger.applyCustomBackground(imageUrl);
  1501.                     sessionStorage.setItem('aac-wallpaperChanged', 'true');
  1502.                     menu.remove();
  1503.                 } else {
  1504.                     alert('Bitte geben Sie eine gültige URL und einen Namen ein.'); // Please enter a valid URL and name.
  1505.                 }
  1506.             });
  1507.  
  1508.     const saveButton = document.createElement('button');
  1509.             saveButton.innerText = 'Hintergrund speichern'; // Save Wallpaper -> Hintergrund speichern
  1510.             saveButton.style.marginTop = '10px';
  1511.             saveButton.style.padding = '10px';
  1512.             saveButton.style.backgroundColor = '#573699';
  1513.             saveButton.style.color = '#fff';
  1514.             saveButton.style.border = 'none';
  1515.             saveButton.style.borderRadius = '5px';
  1516.             saveButton.style.cursor = 'pointer';
  1517.  
  1518.             saveButton.addEventListener('click', () => {
  1519.                 const imageUrl = input.value.trim();
  1520.                 const wallpaperName = nameInput.value.trim();
  1521.                 if (imageUrl && wallpaperName) {
  1522.                     let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
  1523.                     if (savedWallpapers.length >= 5) {
  1524.                         alert('Du kannst maximal 5 Hintergründe speichern. Bitte lösche einen, bevor du einen neuen hinzufügst.'); // You can save a maximum of 5 wallpapers. Please delete one before adding a new one.
  1525.                         return;
  1526.                     }
  1527.                     WallpaperChanger.saveWallpaper(imageUrl, wallpaperName);
  1528.                     alert('Hintergrund erfolgreich gespeichert.'); // Wallpaper saved successfully.
  1529.                 } else {
  1530.                     alert('Bitte geben Sie eine gültige URL und einen Namen ein.'); // Please enter a valid URL and name.
  1531.                 }
  1532.             });
  1533.  
  1534.             const closeButton = document.createElement('button');
  1535.             closeButton.innerText = 'Schließen'; // Close -> Schließen
  1536.             closeButton.style.marginTop = '10px';
  1537.             closeButton.style.padding = '10px';
  1538.             closeButton.style.backgroundColor = '#ccc';
  1539.             closeButton.style.color = '#000';
  1540.             closeButton.style.border = 'none';
  1541.             closeButton.style.borderRadius = '5px';
  1542.             closeButton.style.cursor = 'pointer';
  1543.  
  1544.             closeButton.addEventListener('click', () => {
  1545.                 menu.remove();
  1546.             });
  1547.  
  1548.             menu.appendChild(input);
  1549.             menu.appendChild(document.createElement('br'));
  1550.             menu.appendChild(nameInput);
  1551.             menu.appendChild(document.createElement('br'));
  1552.             menu.appendChild(fileInput);
  1553.             menu.appendChild(applyButton);
  1554.             menu.appendChild(document.createElement('br'));
  1555.             menu.appendChild(saveButton);
  1556.             menu.appendChild(document.createElement('br'));
  1557.             menu.appendChild(closeButton);
  1558.  
  1559.             document.body.appendChild(menu);
  1560.         },
  1561.  
  1562.         saveWallpaper: function(url, name) {
  1563.             let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
  1564.             if (!savedWallpapers.some(wallpaper => wallpaper.url === url)) {
  1565.                 savedWallpapers.push({ url, name });
  1566.                 localStorage.setItem('aac-savedWallpapers', JSON.stringify(savedWallpapers));
  1567.             }
  1568.         },
  1569.  
  1570.         deleteWallpaper: function(index) {
  1571.             let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
  1572.             savedWallpapers.splice(index, 1);
  1573.             localStorage.setItem('aac-savedWallpapers', JSON.stringify(savedWallpapers));
  1574.         }
  1575.     };
  1576.  
  1577.   /************************************
  1578.    *
  1579.    *
  1580.    * Chat Area Modul
  1581.    *
  1582.    *
  1583.    ************************************/
  1584.  
  1585.  
  1586. const ChatArea = {
  1587.     isDraggable: false,
  1588.  
  1589.     init: function() {
  1590.         this.chatArea = document.querySelector('#graphicChatArea');
  1591.         if (this.chatArea) {
  1592.             this.centerChatArea();
  1593.             this.chatArea.style.position = 'absolute';
  1594.  
  1595.             const savedState = localStorage.getItem('aac-isChatAreaDraggable');
  1596.             if (savedState === 'true') {
  1597.                 this.enableDraggable();
  1598.             }
  1599.         }
  1600.     },
  1601.  
  1602.     centerChatArea: function() {
  1603.         if (this.chatArea) {
  1604.             const windowWidth = window.innerWidth;
  1605.             const windowHeight = window.innerHeight;
  1606.             const chatWidth = this.chatArea.offsetWidth;
  1607.             const chatHeight = this.chatArea.offsetHeight;
  1608.  
  1609.             this.chatArea.style.left = `${(windowWidth - chatWidth) / 2}px`;
  1610.             this.chatArea.style.top = `${(windowHeight - chatHeight) / 2}px`;
  1611.         }
  1612.     },
  1613.  
  1614.     resetChatAreaPosition: function() {
  1615.         this.centerChatArea();
  1616.         console.log('[AAC Enhanced] Chat area position reset to center.');
  1617.     },
  1618.  
  1619.     toggleDraggable: function() {
  1620.         if (!this.chatArea) return;
  1621.  
  1622.         if (this.isDraggable) {
  1623.             this.disableDraggable();
  1624.         } else {
  1625.             this.enableDraggable();
  1626.         }
  1627.  
  1628.         this.updateToggleButton();
  1629.     },
  1630.  
  1631.     enableDraggable: function() {
  1632.         this.isDraggable = true;
  1633.         localStorage.setItem('aac-isChatAreaDraggable', 'true');
  1634.         sessionStorage.setItem('aac-chatAreaButtonState', 'true');
  1635.  
  1636.         $(this.chatArea).draggable({
  1637.             containment: 'document',
  1638.             start: function() {
  1639.                 ChatArea.chatArea.classList.add('ui-draggable-enabled');
  1640.             },
  1641.             stop: function() {
  1642.                 ChatArea.chatArea.classList.remove('ui-draggable-enabled');
  1643.             }
  1644.         });
  1645.  
  1646.         console.log('[AAC Enhanced] Chat area is now draggable.');
  1647.     },
  1648.  
  1649.     disableDraggable: function() {
  1650.         this.isDraggable = false;
  1651.         localStorage.setItem('aac-isChatAreaDraggable', 'false');
  1652.  
  1653.         if ($(this.chatArea).draggable('instance')) {
  1654.             $(this.chatArea).draggable('destroy');
  1655.         }
  1656.  
  1657.         console.log('[AAC Enhanced] Draggable functionality has been disabled.');
  1658.     },
  1659.  
  1660.     updateToggleButton: function() {
  1661.         const toggleButton = document.querySelector('#aac-toggleChatAreaButton');
  1662.         if (toggleButton) {
  1663.             if (this.isDraggable) {
  1664.                 toggleButton.innerText = 'Verschiebbare Chat-Bereich deaktivieren'; // Disable Draggable Chat Area
  1665.                 toggleButton.style.backgroundColor = '#FF0000';
  1666.             } else {
  1667.                 toggleButton.innerText = 'Verschiebbare Chat-Bereich aktivieren'; // Enable Draggable Chat Area
  1668.                 toggleButton.style.backgroundColor = '#573699';
  1669.             }
  1670.         }
  1671.     },
  1672.  
  1673.     createToggleChatAreaButton: function() {
  1674.         const button = document.createElement('button');
  1675.         button.id = 'aac-toggleChatAreaButton';
  1676.         button.style.padding = '10px';
  1677.         button.style.color = '#fff';
  1678.         button.style.border = 'none';
  1679.         button.style.borderRadius = '5px';
  1680.         button.style.cursor = 'pointer';
  1681.         button.style.marginBottom = '10px';
  1682.  
  1683.         button.addEventListener('click', () => ChatArea.toggleDraggable());
  1684.  
  1685.         return button;
  1686.     }
  1687. };
  1688.  
  1689.   /************************************
  1690.    *
  1691.    *
  1692.    *Reply Modul & Image in Chat Modul
  1693.    *
  1694.    *
  1695.    ************************************/
  1696.  
  1697.  
  1698.  
  1699. const messageDiv = document.getElementsByClassName('chatverlauf')[0];
  1700.  
  1701. const messageObserverConfig = { childList: true };
  1702.  
  1703. const messagesMutationCallback = function (mutationsList) {
  1704.     for (const mutation of mutationsList) {
  1705.         // Reply-Message
  1706.         if (mutation.addedNodes.length) {
  1707.             const message = mutation.addedNodes[0];
  1708.             const chatMessageDiv = message.querySelectorAll(`[ng-bind-html^='chatmsg.msg']`)[0];
  1709.             const messageContent = chatMessageDiv.textContent;
  1710.             const isSystemMessage = message.classList.contains('systemMsg');
  1711.             const isEmojiMessage = message.querySelectorAll(`[ng-if='chatmsg.emojiImage']`).length > 0;
  1712.             const isOwnMessage = messageContent.startsWith(': ');
  1713.  
  1714.             message.style.paddingLeft = '1px';
  1715.  
  1716.             if (isEmojiMessage) {
  1717.                 continue;
  1718.             }
  1719.  
  1720.             if (isSystemMessage) {
  1721.                 continue;
  1722.             }
  1723.  
  1724.             message.classList.add('chatMessage');
  1725.  
  1726.             const messageIconsDiv = document.createElement('div');
  1727.  
  1728.             messageIconsDiv.classList.add('messageIcons');
  1729.             messageIconsDiv.innerHTML =
  1730.                 '<svg aria-hidden="true" class="svg-inline--fa fa-quote-right fa-w-16" focusable="false" data-prefix="fa" data-icon="quote-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="#d2d2d2" d="M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z"></path></svg>';
  1731.  
  1732.             message.appendChild(messageIconsDiv);
  1733.  
  1734.             message.addEventListener('mouseover', function () {
  1735.                 const iconDiv = this.children[this.children.length - 1];
  1736.                 iconDiv.style.display = 'flex';
  1737.             });
  1738.  
  1739.             message.addEventListener('mouseout', function () {
  1740.                 const iconDiv = this.children[this.children.length - 1];
  1741.                 iconDiv.style.display = 'none';
  1742.             });
  1743.  
  1744.             messageIconsDiv.addEventListener('click', function () {
  1745.                 const scope = angular.element(document.getElementById('topbar')).scope();
  1746.                 const messageInput = document.getElementById('chatline');
  1747.  
  1748.                 let username = '';
  1749.  
  1750.                 if (!isOwnMessage) {
  1751.                     username = chatMessageDiv.previousElementSibling.textContent.slice(0, -1);
  1752.                 } else {
  1753.                     username = chatMessageDiv.previousElementSibling.textContent;
  1754.                 }
  1755.  
  1756.                 if (scope.chatline === undefined) {
  1757.                     scope.chatline = '';
  1758.                 }
  1759.  
  1760.                 if (!isOwnMessage) {
  1761.                     scope.chatline += ` @${username} "${messageContent}" `;
  1762.                 } else {
  1763.                     scope.chatline += ` @${username} "${messageContent.split(': ')[1]}" `;
  1764.                 }
  1765.  
  1766.                 messageInput.focus();
  1767.             });
  1768.  
  1769. 	/************************************
  1770. 	*
  1771. 	*
  1772. 	*View Images in chat Modul
  1773. 	*
  1774. 	*
  1775. 	************************************/
  1776.  
  1777.             const imageUrlRegex = new RegExp(`(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|svg))`);
  1778.             const isImageUrl = messageContent.match(imageUrlRegex);
  1779.  
  1780.             if (isImageUrl) {
  1781.                 const imageUrl = isImageUrl[0];
  1782.                 const imageDiv = document.createElement('div');
  1783.                 const imageElement = document.createElement('img');
  1784.  
  1785.                 imageDiv.setAttribute('class', 'message-image-container');
  1786.                 imageElement.setAttribute('class', 'message-image');
  1787.  
  1788.                 imageElement.src = imageUrl;
  1789.  
  1790.                 imageDiv.appendChild(imageElement);
  1791.  
  1792.                 chatMessageDiv.appendChild(imageDiv);
  1793.             }
  1794.         }
  1795.     }
  1796. };
  1797.  
  1798. const messagesObserver = new MutationObserver(messagesMutationCallback);
  1799.  
  1800. messagesObserver.observe(messageDiv, messageObserverConfig);
  1801.  
  1802.  
  1803.   /************************************
  1804.    *
  1805.    *
  1806.    * Avatar-Collections Modul
  1807.    *
  1808.    *
  1809.    ************************************/
  1810.  
  1811.   if (!localStorage.hasOwnProperty('collections')) {
  1812.     localStorage.setItem('collections', JSON.stringify({ 'Keine Kategorie': { isDefault: true } }));
  1813.   }
  1814.   if (!localStorage.hasOwnProperty('avatars')) {
  1815.     localStorage.setItem('avatars', JSON.stringify({}));
  1816.   }
  1817.  
  1818.   window.addEventListener('globalSocketReady', () => {
  1819.     window.socket.on('getAvatarcase', (data) => {
  1820.       const avatars = data.avatars;
  1821.  
  1822.       const storageAvatars = JSON.parse(localStorage.getItem('avatars'));
  1823.  
  1824.       for (const avatar of avatars) {
  1825.         if (!storageAvatars[avatar.avatarid]) {
  1826.           storageAvatars[avatar.avatarid] = {
  1827.             id: avatar.avatarid,
  1828.             img: avatar.img,
  1829.             imgthumb: avatar.imgthumb,
  1830.             collection: 'Keine Kategorie',
  1831.           };
  1832.         }
  1833.       }
  1834.  
  1835.       localStorage.setItem('avatars', JSON.stringify(storageAvatars));
  1836.     });
  1837.     window.socket.emit('getAvatarcase');
  1838.   });
  1839.  
  1840.   window.addEventListener('socketEmit', (event) => {
  1841.     if (event.detail.eventName === 'deleteAvatar') {
  1842.       // Remove Avatar properly in case it gets deleted
  1843.       const avatarID = event.detail.args[0].avatarid;
  1844.       const avatarDiv = document.querySelectorAll(`[id^='${avatarID}']`)[0];
  1845.       avatarDiv.remove();
  1846.  
  1847.       const storageAvatars = JSON.parse(localStorage.getItem('avatars'));
  1848.  
  1849.       delete storageAvatars[avatarID];
  1850.  
  1851.       localStorage.setItem('avatars', JSON.stringify(storageAvatars));
  1852.     }
  1853.   });
  1854.  
  1855.   window.addAvatarToCollection = function (avatarID, collection) {
  1856.     const collections = JSON.parse(localStorage.getItem('collections'));
  1857.     if (!collections[collection]) {
  1858.       console.log(`Collection '${collection}' doesn't exist!`);
  1859.       return false;
  1860.     }
  1861.     const storageAvatars = JSON.parse(localStorage.getItem('avatars'));
  1862.  
  1863.     if (!storageAvatars[avatarID]) {
  1864.       console.log(`Avatar '${avatarID}' doesn't exist!`);
  1865.       return false;
  1866.     }
  1867.  
  1868.     storageAvatars[avatarID].collection = collection;
  1869.     localStorage.setItem('avatars', JSON.stringify(storageAvatars));
  1870.     return true;
  1871.   };
  1872.  
  1873.   window.removeAvatarFromCollection = function (avatarID) {
  1874.     const storageAvatars = JSON.parse(localStorage.getItem('avatars'));
  1875.     if (!storageAvatars[avatarID]) {
  1876.       console.log(`Avatar '${avatarID}' doesn't exist!`);
  1877.       return false;
  1878.     }
  1879.     storageAvatars[avatarID].collection = 'Keine Kategorie';
  1880.     localStorage.setItem('avatars', JSON.stringify(storageAvatars));
  1881.     return true;
  1882.   };
  1883.  
  1884.   window.addCollection = function (collection) {
  1885.     const collections = JSON.parse(localStorage.getItem('collections'));
  1886.     if (collections[collection]) {
  1887.       console.log(`Collection ${collection} already exists!`);
  1888.       return false;
  1889.     }
  1890.     collections[collection] = {
  1891.       isDefault: false,
  1892.     };
  1893.  
  1894.     localStorage.setItem('collections', JSON.stringify(collections));
  1895.     return true;
  1896.   };
  1897.  
  1898.   window.deleteCollection = function (collection) {
  1899.     const collections = JSON.parse(localStorage.getItem('collections'));
  1900.     if (!collections[collection]) {
  1901.       console.log(`Collection '${collection}' doesn't exist!`);
  1902.       return false;
  1903.     }
  1904.     if (collections[collection].isDefault) {
  1905.       console.log(`Default collections such as '${collection}' must not be deleted!`);
  1906.       return false;
  1907.     }
  1908.  
  1909.     const storageAvatars = JSON.parse(localStorage.getItem('avatars'));
  1910.  
  1911.     for (const avatar in storageAvatars) {
  1912.       if (storageAvatars[avatar].collection === collection) {
  1913.         storageAvatars[avatar].collection = 'Keine Kategorie';
  1914.       }
  1915.     }
  1916.  
  1917.     localStorage.setItem('avatars', JSON.stringify(storageAvatars));
  1918.  
  1919.     delete collections[collection];
  1920.  
  1921.     localStorage.setItem('collections', JSON.stringify(collections));
  1922.     return true;
  1923.   };
  1924.  
  1925.   // View
  1926.  
  1927.   const avatarcaseObserverConfig = { childList: true };
  1928.   const avatarcaseDiv = document.querySelector('[ng-hide="disconnectedClient"]').children[1];
  1929.  
  1930.   const avatarcaseMutationCallback = function (mutationsList) {
  1931.     for (const mutation of mutationsList) {
  1932.       for (const node of mutation.addedNodes) {
  1933.         if (node.id === 'avatarcase') {
  1934.           const acSelfAvatarElements = document.querySelectorAll('[ng-repeat="ownedAva in ownedAvas track by $index"]');
  1935.  
  1936.           setTimeout(() => {
  1937.             for (const element of acSelfAvatarElements) {
  1938.               element.remove();
  1939.             }
  1940.           }, 1200);
  1941.  
  1942.           const collections = JSON.parse(localStorage.getItem('collections'));
  1943.           const avatarCaseDiv = document.getElementsByClassName('avatarcase_main')[0];
  1944.  
  1945.           for (const collection in collections) {
  1946.             const collapsibleWrap = createCategoryElement(collection, node, avatarCaseDiv);
  1947.             avatarCaseDiv.append(collapsibleWrap);
  1948.           }
  1949.  
  1950.           const newCollectionFormDiv = document.createElement('div');
  1951.           const newCollectionInput = document.createElement('input');
  1952.           const newCollectionSubmitButton = document.createElement('button');
  1953.  
  1954.           newCollectionSubmitButton.textContent = 'Neue Kategorie erstellen';
  1955.           newCollectionSubmitButton.id = 'createCollectionBtn';
  1956.           newCollectionInput.id = 'createCollectionInput';
  1957.  
  1958.           newCollectionFormDiv.appendChild(newCollectionInput);
  1959.           newCollectionFormDiv.appendChild(newCollectionSubmitButton);
  1960.  
  1961.           newCollectionSubmitButton.addEventListener('click', function () {
  1962.             const input = document.getElementById('createCollectionInput');
  1963.             if (input.value !== '') {
  1964.               const successfullyAdded = window.addCollection(input.value);
  1965.  
  1966.               if (successfullyAdded) {
  1967.                 const collapsbileWrap = createCategoryElement(input.value, node);
  1968.                 avatarCaseDiv.insertBefore(collapsbileWrap, newCollectionFormDiv);
  1969.               }
  1970.             }
  1971.           });
  1972.  
  1973.           avatarCaseDiv.appendChild(newCollectionFormDiv);
  1974.         }
  1975.       }
  1976.     }
  1977.   };
  1978.  
  1979.   function createCategoryElement(collection, node) {
  1980.     const scope = angular.element(document.getElementById('topbar')).scope();
  1981.  
  1982.     const collapsibleWrap = document.createElement('div');
  1983.     const collapsibleButton = document.createElement('button');
  1984.     const collapsibleContent = document.createElement('div');
  1985.     const avatarGrid = document.createElement('div');
  1986.     const removeCategoryButton = document.createElement('button');
  1987.  
  1988.     collapsibleWrap.setAttribute('class', 'collapsible-wrap');
  1989.     collapsibleWrap.setAttribute('id', collection);
  1990.     collapsibleButton.setAttribute('class', 'collapsible-button');
  1991.     collapsibleContent.setAttribute('class', 'collapsible-content');
  1992.     removeCategoryButton.setAttribute('class', 'removeCategory-btn');
  1993.     avatarGrid.setAttribute('class', 'avatar-grid');
  1994.     collapsibleButton.textContent = collection;
  1995.     removeCategoryButton.textContent = 'Kategorie löschen';
  1996.  
  1997.     removeCategoryButton.addEventListener('click', function () {
  1998.       window.selectedCollection = this.parentElement.parentElement.id;
  1999.  
  2000.       const requestDeleteCollectionDiv = document.createElement('div');
  2001.       const cancelRequestBtn = document.createElement('button');
  2002.       const acceptRequestBtn = document.createElement('button');
  2003.  
  2004.       requestDeleteCollectionDiv.setAttribute('class', 'request-delete-collection');
  2005.  
  2006.       requestDeleteCollectionDiv.textContent = `Kategorie "${window.selectedCollection}" wirklich löschen?`;
  2007.       acceptRequestBtn.textContent = 'löschen';
  2008.       cancelRequestBtn.textContent = 'abbrechen';
  2009.  
  2010.       acceptRequestBtn.addEventListener('click', function () {
  2011.         const deletionSuccessfull = window.deleteCollection(window.selectedCollection);
  2012.  
  2013.         if (deletionSuccessfull) {
  2014.           const defaultCategory = document.getElementById('Keine Kategorie');
  2015.           const selecetedCategory = document.getElementById(window.selectedCollection);
  2016.  
  2017.           for (const avatar of selecetedCategory.children[1].children[0].children) {
  2018.             avatar.children[avatar.childElementCount - 1].remove();
  2019.             createAddToCollectionIcon(avatar, node);
  2020.             defaultCategory.children[1].children[0].appendChild(avatar);
  2021.           }
  2022.  
  2023.           selecetedCategory.remove();
  2024.         }
  2025.         this.parentElement.remove();
  2026.       });
  2027.  
  2028.       cancelRequestBtn.addEventListener('click', function () {
  2029.         this.parentElement.remove();
  2030.       });
  2031.  
  2032.       requestDeleteCollectionDiv.appendChild(cancelRequestBtn);
  2033.       requestDeleteCollectionDiv.appendChild(acceptRequestBtn);
  2034.  
  2035.       node.appendChild(requestDeleteCollectionDiv);
  2036.     });
  2037.  
  2038.     collapsibleContent.appendChild(avatarGrid);
  2039.  
  2040.     if (collection !== 'Keine Kategorie') {
  2041.       collapsibleContent.appendChild(removeCategoryButton);
  2042.     }
  2043.  
  2044.     collapsibleWrap.appendChild(collapsibleButton);
  2045.     collapsibleWrap.appendChild(collapsibleContent);
  2046.  
  2047.     const avatars = JSON.parse(localStorage.getItem('avatars'));
  2048.  
  2049.     for (const avatar in avatars) {
  2050.       if (avatars[avatar].collection === collection) {
  2051.         const avatarDiv = document.createElement('div');
  2052.         const deleteIconDiv = document.createElement('div');
  2053.         const selectIconDiv = document.createElement('div');
  2054.  
  2055.         avatarDiv.id = `${avatars[avatar].id}-${avatars[avatar].img}`;
  2056.         avatarDiv.setAttribute('class', 'avatar-div');
  2057.         avatarDiv.style.backgroundImage = `url('/img/publicimg/skinthumbnails/${avatars[avatar].imgthumb}')`;
  2058.  
  2059.         deleteIconDiv.setAttribute('class', 'avatarIcon');
  2060.         selectIconDiv.setAttribute('class', 'avatarIcon');
  2061.  
  2062.         deleteIconDiv.innerHTML =
  2063.           '<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Trash</title><path d="M296 64h-80a7.91 7.91 0 00-8 8v24h96V72a7.91 7.91 0 00-8-8z" fill="none"/><path d="M432 96h-96V72a40 40 0 00-40-40h-80a40 40 0 00-40 40v24H80a16 16 0 000 32h17l19 304.92c1.42 26.85 22 47.08 48 47.08h184c26.13 0 46.3-19.78 48-47l19-305h17a16 16 0 000-32zM192.57 416H192a16 16 0 01-16-15.43l-8-224a16 16 0 1132-1.14l8 224A16 16 0 01192.57 416zM272 400a16 16 0 01-32 0V176a16 16 0 0132 0zm32-304h-96V72a7.91 7.91 0 018-8h80a7.91 7.91 0 018 8zm32 304.57A16 16 0 01320 416h-.58A16 16 0 01304 399.43l8-224a16 16 0 1132 1.14z"/></svg>';
  2064.  
  2065.         selectIconDiv.innerHTML =
  2066.           '<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Shirt</title><path d="M256 96c33.08 0 60.71-25.78 64-58 .3-3-3-6-6-6a13 13 0 00-4.74.9c-.2.08-21.1 8.1-53.26 8.1s-53.1-8-53.26-8.1a16.21 16.21 0 00-5.3-.9h-.06a5.69 5.69 0 00-5.38 6c3.35 32.16 31 58 64 58z"/><path d="M485.29 89.9L356 44.64a4 4 0 00-5.27 3.16 96 96 0 01-189.38 0 4 4 0 00-5.35-3.16L26.71 89.9A16 16 0 0016.28 108l16.63 88a16 16 0 0013.92 12.9l48.88 5.52a8 8 0 017.1 8.19l-7.33 240.9a16 16 0 009.1 14.94A17.49 17.49 0 00112 480h288a17.49 17.49 0 007.42-1.55 16 16 0 009.1-14.94l-7.33-240.9a8 8 0 017.1-8.19l48.88-5.52a16 16 0 0013.92-12.9l16.63-88a16 16 0 00-10.43-18.1z"/></svg>';
  2067.  
  2068.         avatarDiv.appendChild(deleteIconDiv);
  2069.         avatarDiv.appendChild(selectIconDiv);
  2070.  
  2071.         selectIconDiv.addEventListener('click', function () {
  2072.           scope.changeAvatarTexture(this.parentElement.id.split('-')[1]);
  2073.         });
  2074.  
  2075.         deleteIconDiv.addEventListener('click', function () {
  2076.           scope.requestDeleteAvatar({ avatarid: this.parentElement.id.split('-')[0] });
  2077.         });
  2078.  
  2079.         if (collection === 'Keine Kategorie') {
  2080.           createAddToCollectionIcon(avatarDiv, node);
  2081.         } else {
  2082.           createRemoveFromCollectionIcon(avatarDiv, node);
  2083.         }
  2084.  
  2085.         avatarDiv.addEventListener('mouseover', function () {
  2086.           for (const child of this.children) {
  2087.             child.style.display = 'flex';
  2088.           }
  2089.         });
  2090.  
  2091.         avatarDiv.addEventListener('mouseout', function () {
  2092.           for (const child of this.children) {
  2093.             child.style.display = 'none';
  2094.           }
  2095.         });
  2096.  
  2097.         avatarGrid.appendChild(avatarDiv);
  2098.       }
  2099.     }
  2100.  
  2101.     collapsibleButton.addEventListener('click', function () {
  2102.       this.classList.toggle('active');
  2103.       const content = this.nextElementSibling;
  2104.  
  2105.       if (content.style.maxHeight) {
  2106.         content.style.maxHeight = null;
  2107.       } else {
  2108.         content.style.maxHeight = content.scrollHeight + 'px';
  2109.       }
  2110.     });
  2111.  
  2112.     return collapsibleWrap;
  2113.   }
  2114.  
  2115.   function createAddToCollectionIcon(avatarDiv, node) {
  2116.     const addToCollectionIcon = document.createElement('div');
  2117.  
  2118.     addToCollectionIcon.setAttribute('class', 'avatarIcon');
  2119.     addToCollectionIcon.innerHTML =
  2120.       '<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Bag Add</title><path d="M454.66 169.4A31.86 31.86 0 00432 160h-64v-16a112 112 0 00-224 0v16H80a32 32 0 00-32 32v216c0 39 33 72 72 72h272a72.22 72.22 0 0050.48-20.55 69.48 69.48 0 0021.52-50.2V192a31.78 31.78 0 00-9.34-22.6zM320 336h-48v48a16 16 0 01-32 0v-48h-48a16 16 0 010-32h48v-48a16 16 0 0132 0v48h48a16 16 0 010 32zm16-176H176v-16a80 80 0 01160 0z"/></svg>';
  2121.  
  2122.     addToCollectionIcon.addEventListener('click', function () {
  2123.       const collections = JSON.parse(localStorage.getItem('collections'));
  2124.       window.selectedAvatar = this.parentElement.id.split('-')[0];
  2125.  
  2126.       const collectionSelection = document.createElement('div');
  2127.       const cancelSelectionBtn = document.createElement('button');
  2128.  
  2129.       cancelSelectionBtn.textContent = 'abbrechen';
  2130.  
  2131.       collectionSelection.setAttribute('class', 'collection-selection');
  2132.       for (const collection in collections) {
  2133.         const collectionSelectable = document.createElement('div');
  2134.         collectionSelectable.setAttribute('class', 'collection-selectable');
  2135.         collectionSelectable.textContent = collection;
  2136.         collectionSelection.appendChild(collectionSelectable);
  2137.         collectionSelectable.addEventListener('click', function () {
  2138.           window.addAvatarToCollection(window.selectedAvatar, this.textContent);
  2139.           const avatarDiv = document.querySelectorAll(`[id^='${window.selectedAvatar}']`)[0];
  2140.           const newCollectionDiv = document.getElementById(this.textContent).children[1].children[0];
  2141.  
  2142.           avatarDiv.children[avatarDiv.childElementCount - 1].remove();
  2143.  
  2144.           createRemoveFromCollectionIcon(avatarDiv, node);
  2145.  
  2146.           for (const child of avatarDiv.children) {
  2147.             child.style.display = 'none';
  2148.           }
  2149.  
  2150.           newCollectionDiv.appendChild(avatarDiv);
  2151.  
  2152.           this.parentElement.remove();
  2153.         });
  2154.       }
  2155.  
  2156.       cancelSelectionBtn.addEventListener('click', function () {
  2157.         this.parentElement.remove();
  2158.       });
  2159.  
  2160.       collectionSelection.appendChild(cancelSelectionBtn);
  2161.       node.appendChild(collectionSelection);
  2162.     });
  2163.  
  2164.     avatarDiv.appendChild(addToCollectionIcon);
  2165.   }
  2166.  
  2167.   function createRemoveFromCollectionIcon(avatarDiv, node) {
  2168.     const removeFromCollectionIcon = document.createElement('div');
  2169.     removeFromCollectionIcon.setAttribute('class', 'avatarIcon');
  2170.     removeFromCollectionIcon.innerHTML =
  2171.       '<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Bag Remove</title><path d="M454.66 169.4A31.86 31.86 0 00432 160h-64v-16a112 112 0 00-224 0v16H80a32 32 0 00-32 32v216c0 39 33 72 72 72h272a72.22 72.22 0 0050.48-20.55 69.48 69.48 0 0021.52-50.2V192a31.78 31.78 0 00-9.34-22.6zM320 336H192a16 16 0 010-32h128a16 16 0 010 32zm16-176H176v-16a80 80 0 01160 0z"/></svg>';
  2172.  
  2173.     removeFromCollectionIcon.addEventListener('click', function () {
  2174.       const avatarDiv = this.parentElement;
  2175.       const newCollectionDiv = document.getElementById('Keine Kategorie').children[1].children[0];
  2176.  
  2177.       avatarDiv.children[avatarDiv.childElementCount - 1].remove();
  2178.  
  2179.       createAddToCollectionIcon(avatarDiv, node);
  2180.  
  2181.       for (const child of avatarDiv.children) {
  2182.         child.style.display = 'none';
  2183.       }
  2184.  
  2185.       window.removeAvatarFromCollection(avatarDiv.id.split('-')[0]);
  2186.       newCollectionDiv.appendChild(avatarDiv);
  2187.     });
  2188.  
  2189.     avatarDiv.appendChild(removeFromCollectionIcon);
  2190.   }
  2191.  
  2192.   const avatarcaseObserver = new MutationObserver(avatarcaseMutationCallback);
  2193.  
  2194.   avatarcaseObserver.observe(avatarcaseDiv, avatarcaseObserverConfig);
  2195.  
  2196.   /************************************
  2197.    *
  2198.    *
  2199.    * Marktplatz Popup Modul
  2200.    *
  2201.    *
  2202.    ************************************/
  2203.  
  2204.     function createMarktplatzPanel() {
  2205.     // Create Marktplatz Panel box
  2206.     const panelBox = document.createElement('div');
  2207.     panelBox.id = 'marktplatzPanel';
  2208.     panelBox.style.position = 'fixed';
  2209.     panelBox.style.width = '600px';
  2210.     panelBox.style.height = '700px';
  2211.     panelBox.style.backgroundColor = '#1e1e1e';
  2212.     panelBox.style.color = '#f0f0f0';
  2213.     panelBox.style.border = '1px solid #333';
  2214.     panelBox.style.borderRadius = '5px';
  2215.     panelBox.style.zIndex = '10000';
  2216.     panelBox.style.overflow = 'auto';
  2217.     panelBox.style.resize = 'both';
  2218.     panelBox.style.cursor = 'default';
  2219.     panelBox.style.userSelect = 'text';
  2220.  
  2221.     // Center the popup on the screen
  2222.     panelBox.style.left = '50%';
  2223.     panelBox.style.top = '50%';
  2224.     panelBox.style.transform = 'translate(-50%, -50%)';
  2225.  
  2226.     // Create a title bar for the panel box
  2227.     const titleBar = document.createElement('div');
  2228.     titleBar.style.cursor = 'move';
  2229.     titleBar.style.padding = '5px';
  2230.     titleBar.style.backgroundColor = '#333';
  2231.     titleBar.style.color = '#f0f0f0';
  2232.     titleBar.style.fontWeight = 'bold';
  2233.     titleBar.innerHTML = 'Marktplatz Panel (Drag Title Bar to Move)';
  2234.     titleBar.style.display = 'flex';
  2235.     titleBar.style.justifyContent = 'space-between';
  2236.     titleBar.style.alignItems = 'center';
  2237.  
  2238.     // Create a close button
  2239.     const closeButton = document.createElement('button');
  2240.     closeButton.innerText = '×';
  2241.     closeButton.style.background = '#ff4d4d';
  2242.     closeButton.style.color = '#fff';
  2243.     closeButton.style.border = 'none';
  2244.     closeButton.style.fontSize = '16px';
  2245.     closeButton.style.width = '25px';
  2246.     closeButton.style.height = '25px';
  2247.     closeButton.style.borderRadius = '50%';
  2248.     closeButton.style.cursor = 'pointer';
  2249.     closeButton.style.textAlign = 'center';
  2250.     closeButton.style.lineHeight = '25px';
  2251.     closeButton.style.fontWeight = 'bold';
  2252.     closeButton.style.marginRight = '5px';
  2253.     closeButton.addEventListener('click', function (event) {
  2254.         event.stopPropagation(); // Prevent drag triggering when clicking close
  2255.         panelBox.remove();
  2256.     });
  2257.  
  2258.     // Append close button and title bar
  2259.     titleBar.appendChild(closeButton);
  2260.     panelBox.appendChild(titleBar);
  2261.  
  2262.     // Create a container to load Marktplatz content
  2263.     const contentContainer = document.createElement('div');
  2264.     contentContainer.style.width = '100%';
  2265.     contentContainer.style.height = 'calc(100% - 30px)'; // Adjusting height for the title bar
  2266.     contentContainer.style.overflow = 'auto';
  2267.     contentContainer.style.background = '#282828';
  2268.     contentContainer.style.padding = '5px';
  2269.     panelBox.appendChild(contentContainer);
  2270.  
  2271.     // Load the Marktplatz page inside an iframe to ensure full functionality
  2272.     const iframe = document.createElement('iframe');
  2273.     iframe.src = 'https://anime.academy/marktplatz';
  2274.     iframe.style.width = '100%';
  2275.     iframe.style.height = '100%';
  2276.     iframe.style.border = 'none';
  2277.     iframe.style.background = '#1e1e1e';
  2278.     contentContainer.appendChild(iframe);
  2279.  
  2280.     // Append the panel box to the document body
  2281.     document.body.appendChild(panelBox);
  2282.  
  2283.     // Drag functionality for the title bar only
  2284.     let isDragging = false;
  2285.     let offsetX, offsetY;
  2286.  
  2287.     titleBar.addEventListener('mousedown', function (e) {
  2288.         isDragging = true;
  2289.         offsetX = e.clientX - panelBox.getBoundingClientRect().left;
  2290.         offsetY = e.clientY - panelBox.getBoundingClientRect().top;
  2291.     });
  2292.  
  2293.     document.addEventListener('mousemove', function (e) {
  2294.         if (isDragging) {
  2295.             panelBox.style.left = `${e.clientX - offsetX}px`;
  2296.             panelBox.style.top = `${e.clientY - offsetY}px`;
  2297.             panelBox.style.transform = 'none';
  2298.         }
  2299.     });
  2300.  
  2301.     document.addEventListener('mouseup', function () {
  2302.         isDragging = false;
  2303.     });
  2304. }
  2305.  
  2306. function attachMarktplatzListener() {
  2307.     document.addEventListener('click', function (event) {
  2308.         const target = event.target.closest('a[href="/marktplatz"]');
  2309.         if (target) {
  2310.             event.preventDefault(); // Prevent default opening in new tab
  2311.             if (!document.getElementById('marktplatzPanel')) {
  2312.                 createMarktplatzPanel();
  2313.             }
  2314.         }
  2315.     });
  2316. }
  2317.  
  2318.     attachMarktplatzListener();
  2319.  
  2320.     /************************************
  2321.      *
  2322.      *
  2323.      * Chat Logger Module
  2324.      *
  2325.      *
  2326.      ************************************/
  2327.     const ChatLogger = {
  2328.         CHAT_LOG_STORAGE_KEY: "aac_chat_logs",
  2329.         MAX_LOG_SIZE: 5000,
  2330.  
  2331.         init: function () {
  2332.             console.log("[Chat Logger] Initializing...");
  2333.             this.setupSocketHook();
  2334.             this.createDownloadButton();
  2335.         },
  2336.  
  2337.         setupSocketHook: function () {
  2338.             if (!window.socket) {
  2339.                 console.warn("[Chat Logger] No socket detected. Hooking into system...");
  2340.  
  2341.                 io.Socket.prototype.o_emit = io.Socket.prototype.o_emit || io.Socket.prototype.emit;
  2342.                 io.Socket.prototype.emit = function (eventName, ...args) {
  2343.                     if (!window.socket) {
  2344.                         window.socket = this;
  2345.                         window.dispatchEvent(new Event('globalSocketReady'));
  2346.                     }
  2347.                     return this.o_emit(eventName, ...args);
  2348.                 };
  2349.             }
  2350.  
  2351.             let attempt = 0;
  2352.             let checkInterval = setInterval(() => {
  2353.                 attempt++;
  2354.  
  2355.                 if (window.socket) {
  2356.                     console.log("[Chat Logger] Socket found, starting logger...");
  2357.                     clearInterval(checkInterval);
  2358.                     ChatLogger.listenForChatMessages();
  2359.                     return;
  2360.                 }
  2361.  
  2362.                 console.log(`[Chat Logger] Waiting for socket... (Attempt ${attempt})`);
  2363.  
  2364.                 if (attempt > 20) {
  2365.                     clearInterval(checkInterval);
  2366.                     console.error("[Chat Logger] Failed to detect socket.");
  2367.                 }
  2368.             }, 1000);
  2369.         },
  2370.  
  2371.         listenForChatMessages: function () {
  2372.             if (!window.socket) {
  2373.                 console.error("[Chat Logger] No socket connection found! Retrying...");
  2374.                 setTimeout(ChatLogger.listenForChatMessages, 1000);
  2375.                 return;
  2376.             }
  2377.  
  2378.             console.log("[Chat Logger] Attaching listener for chat messages...");
  2379.  
  2380.             window.socket.on('updateChatLines', (data) => {
  2381.                 console.log("[Chat Logger] Received chat message event:", data);
  2382.  
  2383.                 if (!data || !data.chatLine) {
  2384.                     console.warn("[Chat Logger] Empty or undefined message received.");
  2385.                     return;
  2386.                 }
  2387.  
  2388.                 const currentRoom = window.location.href.split('=')[1];
  2389.                 ChatLogger.saveChatMessage(currentRoom, data.user, data.chatLine);
  2390.             });
  2391.         },
  2392.  
  2393.         saveChatMessage: function (room, user, message) {
  2394.             if (!message || message.trim() === "") return;
  2395.  
  2396.             let chatLogs = JSON.parse(localStorage.getItem(ChatLogger.CHAT_LOG_STORAGE_KEY)) || {};
  2397.  
  2398.             if (!chatLogs[room]) {
  2399.                 chatLogs[room] = [];
  2400.             }
  2401.  
  2402.             chatLogs[room].push({
  2403.                 timestamp: Date.now(),
  2404.                 user: user,
  2405.                 message: message
  2406.             });
  2407.  
  2408.             if (chatLogs[room].length > ChatLogger.MAX_LOG_SIZE) {
  2409.                 chatLogs[room].shift();
  2410.             }
  2411.  
  2412.             localStorage.setItem(ChatLogger.CHAT_LOG_STORAGE_KEY, JSON.stringify(chatLogs));
  2413.             console.log(`[Chat Logger] Stored message: ${user}: ${message}`);
  2414.         },
  2415.  
  2416.         exportChatLogs: function () {
  2417.             let chatLogs = JSON.parse(localStorage.getItem(ChatLogger.CHAT_LOG_STORAGE_KEY)) || {};
  2418.  
  2419.             if (Object.keys(chatLogs).length === 0) {
  2420.                 alert("No chat logs available.");
  2421.                 console.warn("[Chat Logger] No logs found.");
  2422.                 return;
  2423.             }
  2424.  
  2425.             let logText = "";
  2426.             for (let room in chatLogs) {
  2427.                 logText += `Room: ${room}\n====================\n`;
  2428.                 logText += chatLogs[room].map(log =>
  2429.                     `[${new Date(log.timestamp).toLocaleString()}] ${log.user}: ${log.message}`
  2430.                 ).join("\n") + "\n\n";
  2431.             }
  2432.  
  2433.             let now = new Date();
  2434.             let formattedTime = now.toISOString().replace(/T/, '_').replace(/:/g, '-').split('.')[0];
  2435.             let fileName = `chatlog_${formattedTime}.txt`;
  2436.  
  2437.             let blob = new Blob([logText], { type: "text/plain" });
  2438.             let link = document.createElement("a");
  2439.  
  2440.             link.href = URL.createObjectURL(blob);
  2441.             link.download = fileName;
  2442.             document.body.appendChild(link);
  2443.             link.click();
  2444.             document.body.removeChild(link);
  2445.  
  2446.             console.log(`[Chat Logger] Chat logs downloaded as: ${fileName}`);
  2447.         },
  2448.  
  2449.         createDownloadButton: function () {
  2450.             setTimeout(() => {
  2451.                 let existingButton = document.getElementById("downloadChatLogsBtn");
  2452.                 if (existingButton) return;
  2453.  
  2454.                 let chatControls = document.querySelector(".controller");
  2455.                 if (!chatControls) {
  2456.                     console.warn("[Chat Logger] Could not find .controller div!");
  2457.                     return;
  2458.                 }
  2459.  
  2460.                 let button = document.createElement("span");
  2461.                 button.id = "downloadChatLogsBtn";
  2462.                 button.innerText = "💾 Logs";
  2463.                 button.style.padding = "5px 10px";
  2464.                 button.style.fontSize = "12px";
  2465.                 button.style.background = "#4CAF50";
  2466.                 button.style.color = "#fff";
  2467.                 button.style.borderRadius = "4px";
  2468.                 button.style.cursor = "pointer";
  2469.                 button.style.display = "inline-block";
  2470.                 button.style.marginLeft = "15px";
  2471.                 button.style.opacity = "0.85";
  2472.  
  2473.                 button.addEventListener("mouseenter", () => {
  2474.                     button.style.opacity = "1";
  2475.                 });
  2476.  
  2477.                 button.addEventListener("mouseleave", () => {
  2478.                     button.style.opacity = "0.85";
  2479.                 });
  2480.  
  2481.                 button.addEventListener("click", ChatLogger.exportChatLogs);
  2482.                 chatControls.appendChild(button);
  2483.  
  2484.                 console.log("[Chat Logger] Button added inside chat controls.");
  2485.             }, 2000);
  2486.         }
  2487.     };
  2488.  
  2489.    /************************************************************************************************************************************************************************************
  2490.    *
  2491.    *
  2492.    ************************************************************************************************************************************************************************************
  2493.    ************************************************************************************************************************************************************************************
  2494.    *
  2495.    *
  2496.    *
  2497.    * Mainpage Stuff
  2498.    *
  2499.    *
  2500.    *
  2501.    ************************************************************************************************************************************************************************************
  2502.    ************************************************************************************************************************************************************************************
  2503.    *
  2504.    *
  2505.    ************************************************************************************************************************************************************************************/
  2506.  
  2507.     /************************************
  2508.     *
  2509.     *
  2510.     * Show All Online Users Module
  2511.     *
  2512.     *
  2513.     ************************************/
  2514.  
  2515.  
  2516.  
  2517.     function fixOnlineUsers() {
  2518.         console.log("🔍 Looking for .onlineUsers...");
  2519.  
  2520.         const onlineUsersContainer = document.querySelector(".onlineUsers");
  2521.         if (!onlineUsersContainer) {
  2522.             console.warn("⚠️ .onlineUsers not found! Retrying in 1 second...");
  2523.             setTimeout(fixOnlineUsers, 1000);
  2524.             return;
  2525.         }
  2526.  
  2527.         console.log("✅ Found .onlineUsers! Removing limit...");
  2528.  
  2529.         // Get AngularJS scope
  2530.         const scope = angular.element(onlineUsersContainer).scope();
  2531.         if (!scope || !scope.usersOnline) {
  2532.             console.warn("⚠️ Angular scope not found! Retrying...");
  2533.             setTimeout(fixOnlineUsers, 1000);
  2534.             return;
  2535.         }
  2536.  
  2537.         // Remove the limit and force AngularJS to update
  2538.         scope.$apply(function () {
  2539.             scope.usersOnlineLimit = scope.usersOnline.length; // Set limit to total users
  2540.         });
  2541.  
  2542.         console.log(`✅ Showing all online users (${scope.usersOnline.length} total)`);
  2543.     }
  2544.  
  2545.     // Wait until AngularJS is ready
  2546.     document.addEventListener("DOMContentLoaded", fixOnlineUsers);
  2547.  
  2548.  
  2549.  
  2550.  
  2551.  
  2552. AACApp.init();
  2553. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址