Adds custom UI enhancements
目前為
// ==UserScript==
// @name AAC Enhanced
// @namespace http://tampermonkey.net/
// @version 1.7.0
// @copyright 2025, Asriel(https://greasyfork.org/de/users/1375984-asriel-aac)
// @license MIT
// @description Adds custom UI enhancements
// @author Asriel
// @icon https://i.ibb.co/z5CJ5zv/revanced.png
// @supportURL https://greasyfork.org/de/scripts/511351-aac-enhanced/feedback
// @include /^https?:\/\/(www\.)?anime\.academy\/chat/
// @grant none
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @require https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
// ==/UserScript==
(function() {
'use strict';
const scriptName = GM_info.script.name;
const scriptVersion = GM_info.script.version;
window.aacEnhancedScriptID = `${scriptName.replace(/\s+/g, '-')}-${scriptVersion}`;
console.log(window.aacEnhancedScriptID);
// Main Application Namespace
const AACApp = {
init: function() {
this.loadModules();
},
loadModules: function() {
TopWrapperIcon.init();
WallpaperChanger.init();
ChatArea.init();
}
};
// Top Wrapper Icon Module
const TopWrapperIcon = {
init: function() {
this.addIconToTopWrapper();
},
addIconToTopWrapper: function() {
const topWrapper = document.querySelector('.area');
if (topWrapper) {
const iconButton = this.createIconButton();
iconButton.addEventListener('click', () => Menu.createPlaceholderMenu());
topWrapper.appendChild(iconButton);
} else {
console.warn('[AAC Enhanced] Top wrapper not found. Icon could not be added.');
}
},
createIconButton: function() {
const iconButton = document.createElement('div');
iconButton.id = 'aac-topWrapperIcon';
iconButton.style.width = '40px';
iconButton.style.height = '40px';
iconButton.style.borderRadius = '50%';
iconButton.style.display = 'flex';
iconButton.style.alignItems = 'center';
iconButton.style.justifyContent = 'center';
iconButton.style.cursor = 'pointer';
iconButton.style.marginRight = '10px';
iconButton.style.boxShadow = '0 0 5px rgba(0, 0, 0, 0.2)';
const iconImage = document.createElement('img');
iconImage.src = 'https://i.ibb.co/z5CJ5zv/revanced.png';
iconImage.alt = 'Menu Icon';
iconImage.style.width = '100%';
iconImage.style.height = '100%';
iconImage.style.borderRadius = '50%';
iconButton.appendChild(iconImage);
return iconButton;
}
};
// Menu Module
const Menu = {
createPlaceholderMenu: function() {
const existingMenu = document.querySelector('#aac-placeholderMenu');
if (existingMenu) {
existingMenu.remove();
return;
}
const menu = this.createMenuElement();
document.body.appendChild(menu);
ChatArea.updateToggleButton();
this.updateToggleLeftbarButton();
},
createMenuElement: function() {
const menu = document.createElement('div');
menu.id = 'aac-placeholderMenu';
const iconButton = document.querySelector('#aac-topWrapperIcon');
const iconButtonRect = iconButton.getBoundingClientRect();
menu.style.position = 'absolute';
menu.style.top = `${iconButtonRect.bottom + window.scrollY + 10}px`;
menu.style.left = `${iconButtonRect.left + window.scrollX}px`;
menu.style.zIndex = '10001';
menu.style.padding = '20px';
menu.style.backgroundColor = '#fff';
menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
menu.style.borderRadius = '10px';
menu.style.textAlign = 'center';
const title = this.createTitleElement();
const wallpaperSectionTitle = document.createElement('h4');
wallpaperSectionTitle.innerText = 'Wallpaper Einstellungen';
wallpaperSectionTitle.style.marginTop = '20px';
wallpaperSectionTitle.style.marginBottom = '10px';
const wallpaperChangerButton = WallpaperChanger.createWallpaperChangerButton();
const savedWallpapersButton = WallpaperChanger.createSavedWallpapersButton();
const uiSettingsSectionTitle = document.createElement('h4');
uiSettingsSectionTitle.innerText = 'UI Einstellungen';
uiSettingsSectionTitle.style.marginTop = '20px';
uiSettingsSectionTitle.style.marginBottom = '10px';
const toggleChatAreaButton = ChatArea.createToggleChatAreaButton();
const toggleLeftbarButton = this.createToggleLeftbarButton();
// Add Reset Button to UI Settings
const resetChatAreaButton = document.createElement('button');
resetChatAreaButton.innerText = 'Chat Fenster Position zurücksetzen';
resetChatAreaButton.style.padding = '10px';
resetChatAreaButton.style.backgroundColor = '#573699';
resetChatAreaButton.style.color = '#fff';
resetChatAreaButton.style.border = 'none';
resetChatAreaButton.style.borderRadius = '5px';
resetChatAreaButton.style.cursor = 'pointer';
resetChatAreaButton.style.marginBottom = '10px';
resetChatAreaButton.addEventListener('click', () => ChatArea.resetChatAreaPosition());
// PNG Management Section
const pngSectionTitle = document.createElement('h4');
pngSectionTitle.innerText = 'PNG Management';
pngSectionTitle.style.marginTop = '20px';
pngSectionTitle.style.marginBottom = '10px';
const pngManagerButton = this.createPngManagerButton();
const closeButton = this.createCloseButton();
menu.appendChild(title);
menu.appendChild(wallpaperSectionTitle);
menu.appendChild(wallpaperChangerButton);
menu.appendChild(document.createElement('br'));
menu.appendChild(savedWallpapersButton);
menu.appendChild(document.createElement('br'));
menu.appendChild(uiSettingsSectionTitle);
menu.appendChild(toggleChatAreaButton);
menu.appendChild(document.createElement('br'));
menu.appendChild(toggleLeftbarButton);
menu.appendChild(document.createElement('br'));
menu.appendChild(resetChatAreaButton); // Moved here
menu.appendChild(document.createElement('br'));
// Append PNG Management section
menu.appendChild(pngSectionTitle);
menu.appendChild(pngManagerButton);
menu.appendChild(document.createElement('br'));
menu.appendChild(closeButton);
return menu;
},
createTitleElement: function() {
const title = document.createElement('h3');
title.innerText = 'AC-Enhanced Settings';
title.style.marginBottom = '20px';
return title;
},
createToggleLeftbarButton: function() {
const toggleLeftbarButton = document.createElement('button');
toggleLeftbarButton.id = 'aac-toggleLeftbarButton';
toggleLeftbarButton.style.padding = '10px';
toggleLeftbarButton.style.color = '#fff';
toggleLeftbarButton.style.border = 'none';
toggleLeftbarButton.style.borderRadius = '5px';
toggleLeftbarButton.style.cursor = 'pointer';
toggleLeftbarButton.style.marginBottom = '10px';
toggleLeftbarButton.addEventListener('click', () => Menu.toggleLeftbarVisibility());
return toggleLeftbarButton;
},
createResetChatAreaButton: function() {
const resetButton = document.createElement('button');
resetButton.innerText = 'Chat Fenster Position zurücksetzen';
resetButton.style.padding = '10px';
resetButton.style.backgroundColor = '#573699';
resetButton.style.color = '#fff';
resetButton.style.border = 'none';
resetButton.style.borderRadius = '5px';
resetButton.style.cursor = 'pointer';
resetButton.style.marginBottom = '10px';
resetButton.addEventListener('click', () => ChatArea.resetChatAreaPosition());
return resetButton;
},
createPngManagerButton: function() {
const pngManagerButton = document.createElement('button');
pngManagerButton.innerText = 'PNG Management';
pngManagerButton.style.padding = '10px';
pngManagerButton.style.backgroundColor = '#573699';
pngManagerButton.style.color = '#fff';
pngManagerButton.style.border = 'none';
pngManagerButton.style.borderRadius = '5px';
pngManagerButton.style.cursor = 'pointer';
pngManagerButton.style.marginBottom = '10px';
pngManagerButton.addEventListener('click', () => {
PngManager.createPngMenu();
});
return pngManagerButton;
},
createCloseButton: function() {
const closeButton = document.createElement('button');
closeButton.innerText = 'Schließen';
closeButton.style.padding = '10px';
closeButton.style.backgroundColor = '#ccc';
closeButton.style.color = '#000';
closeButton.style.border = 'none';
closeButton.style.borderRadius = '5px';
closeButton.style.cursor = 'pointer';
closeButton.addEventListener('click', () => {
const menu = document.querySelector('#aac-placeholderMenu');
if (menu) menu.remove();
});
return closeButton;
},
toggleLeftbarVisibility: function() {
const leftbar = document.querySelector('#leftbar');
const chatBox = document.querySelector('#chatverlaufbox');
if (!leftbar) return;
if (leftbar.style.visibility === 'hidden') {
leftbar.style.transition = 'visibility 0s, opacity 0.5s linear';
leftbar.style.opacity = '1';
leftbar.style.visibility = 'visible';
leftbar.style.pointerEvents = 'auto';
if (chatBox) chatBox.style.left = '250px';
localStorage.setItem('aac-leftbarVisibility', 'visible');
} else {
leftbar.style.transition = 'visibility 0s 0.5s, opacity 0.5s linear';
leftbar.style.opacity = '0';
leftbar.style.visibility = 'hidden';
leftbar.style.pointerEvents = 'none';
if (chatBox) chatBox.style.left = '0';
localStorage.setItem('aac-leftbarVisibility', 'hidden');
}
this.updateToggleLeftbarButton();
}
};
Menu.updateToggleLeftbarButton = function() {
const toggleLeftbarButton = document.querySelector('#aac-toggleLeftbarButton');
const leftbarVisible = localStorage.getItem('aac-leftbarVisibility') !== 'hidden';
if (toggleLeftbarButton) {
if (leftbarVisible) {
toggleLeftbarButton.innerText = 'User Liste verstecken';
toggleLeftbarButton.style.backgroundColor = '#573699';
} else {
toggleLeftbarButton.innerText = 'User Liste zeigen';
toggleLeftbarButton.style.backgroundColor = '#FF0000';
}
}
};
// Initialize the leftbar visibility state on load
document.addEventListener('DOMContentLoaded', () => {
sessionStorage.removeItem('aac-wallpaperChanged');
sessionStorage.removeItem('aac-chatAreaButtonState');
const leftbar = document.querySelector('#leftbar');
const chatBox = document.querySelector('#chatverlaufbox');
const toggleLeftbarButton = document.querySelector('#aac-toggleLeftbarButton');
if (leftbar) {
const leftbarVisible = localStorage.getItem('aac-leftbarVisibility') !== 'hidden';
leftbar.style.transition = 'visibility 0s, opacity 0.5s linear';
leftbar.style.opacity = leftbarVisible ? '1' : '0';
leftbar.style.visibility = leftbarVisible ? 'visible' : 'hidden';
leftbar.style.pointerEvents = leftbarVisible ? 'auto' : 'none';
if (chatBox) {
chatBox.style.left = leftbarVisible ? '250px' : '0'; // Ensure consistent positioning for chatbox
}
if (toggleLeftbarButton) {
toggleLeftbarButton.innerText = leftbarVisible ? 'User Liste verstecken' : 'User Liste zeigen';
toggleLeftbarButton.style.backgroundColor = leftbarVisible ? '#573699' : '#FF0000';
}
}
window.onbeforeunload = () => {}; // Disable confirmation popup when reloading the page
});
// PNG MANAGER
const PngManager = {
init: function() {
$(document).ready(() => {
this.loadSavedPngs();
});
},
loadSavedPngs: function() {
const savedPngs = JSON.parse(localStorage.getItem('aac-savedPngs') || '[]');
savedPngs.forEach((png, index) => {
if (png.active) {
this.createPngElement(png.url, index);
}
});
},
createPngMenu: function() {
const existingMenu = document.querySelector('#aac-pngMenu');
if (existingMenu) {
existingMenu.remove();
return;
}
const menu = document.createElement('div');
menu.id = 'aac-pngMenu';
menu.style.position = 'fixed';
menu.style.top = '50%';
menu.style.left = '50%';
menu.style.transform = 'translate(-50%, -50%)';
menu.style.zIndex = '10001';
menu.style.padding = '20px';
menu.style.backgroundColor = '#fff';
menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
menu.style.borderRadius = '10px';
menu.style.textAlign = 'center';
const title = document.createElement('h3');
title.innerText = 'PNG Management';
title.style.marginBottom = '20px';
menu.appendChild(title);
// Toggle Handles Button
const toggleHandlesButton = document.createElement('button');
toggleHandlesButton.innerText = 'Toggle Handles';
toggleHandlesButton.style.padding = '10px';
toggleHandlesButton.style.backgroundColor = '#573699';
toggleHandlesButton.style.color = '#fff';
toggleHandlesButton.style.border = 'none';
toggleHandlesButton.style.borderRadius = '5px';
toggleHandlesButton.style.cursor = 'pointer';
toggleHandlesButton.style.marginBottom = '10px';
toggleHandlesButton.addEventListener('click', () => {
const handles = document.querySelectorAll('.aac-png-handle');
const areHandlesVisible = handles[0].style.display !== 'none';
handles.forEach(handle => {
handle.style.display = areHandlesVisible ? 'none' : 'block';
});
// Save state to localStorage
localStorage.setItem('aac-png-handles-visible', !areHandlesVisible);
});
menu.appendChild(toggleHandlesButton);
const savedPngs = JSON.parse(localStorage.getItem('aac-savedPngs') || '[]');
savedPngs.forEach((png, index) => {
const pngContainer = document.createElement('div');
pngContainer.style.display = 'flex';
pngContainer.style.alignItems = 'center';
pngContainer.style.marginBottom = '10px';
const thumbnail = document.createElement('img');
thumbnail.src = png.url;
thumbnail.alt = png.name || `PNG ${index + 1}`;
thumbnail.style.width = '50px';
thumbnail.style.height = '50px';
thumbnail.style.objectFit = 'cover';
thumbnail.style.borderRadius = '5px';
thumbnail.style.marginRight = '10px';
const activateButton = document.createElement('button');
activateButton.innerText = png.active ? 'Ausblenden' : 'Einblenden';
activateButton.style.padding = '10px';
activateButton.style.marginRight = '5px';
activateButton.style.backgroundColor = png.active ? '#FF0000' : '#573699';
activateButton.style.color = '#fff';
activateButton.style.border = 'none';
activateButton.style.borderRadius = '5px';
activateButton.style.cursor = 'pointer';
activateButton.addEventListener('click', () => {
png.active = !png.active;
savedPngs[index] = png;
localStorage.setItem('aac-savedPngs', JSON.stringify(savedPngs));
if (png.active) {
this.createPngElement(png.url, index);
} else {
const existingPng = document.querySelector(`#aac-png-${index}`);
if (existingPng) existingPng.remove();
}
activateButton.innerText = png.active ? 'Ausblenden' : 'Einblenden';
activateButton.style.backgroundColor = png.active ? '#FF0000' : '#573699';
});
const deleteButton = document.createElement('button');
deleteButton.innerText = '✕';
deleteButton.style.marginLeft = '5px';
deleteButton.style.padding = '2px';
deleteButton.style.width = '20px';
deleteButton.style.height = '20px';
deleteButton.style.backgroundColor = '#FF0000';
deleteButton.style.color = '#fff';
deleteButton.style.border = 'none';
deleteButton.style.borderRadius = '3px';
deleteButton.style.cursor = 'pointer';
deleteButton.addEventListener('click', () => {
savedPngs.splice(index, 1);
localStorage.setItem('aac-savedPngs', JSON.stringify(savedPngs));
// Remove the entire container (including handles)
const existingPngContainer = document.querySelector(`#aac-png-container-${index}`);
if (existingPngContainer) existingPngContainer.remove();
menu.remove();
this.createPngMenu();
});
pngContainer.appendChild(thumbnail);
pngContainer.appendChild(activateButton);
pngContainer.appendChild(deleteButton);
menu.appendChild(pngContainer);
});
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/png';
fileInput.style.marginBottom = '10px';
fileInput.style.display = 'block';
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
if (file.size > 2560 * 2560) {
alert('Die PNG-Datei ist zu groß. Bitte wählen Sie eine Datei, die kleiner als 2,5 MB ist.');
return;
}
const reader = new FileReader();
reader.onload = (e) => {
const pngUrl = e.target.result;
let savedPngs = JSON.parse(localStorage.getItem('aac-savedPngs') || '[]');
if (savedPngs.length >= 5) {
alert('Du kannst maximal 5 PNG-Dateien speichern. Bitte lösche eine, bevor du eine neue hinzufügst.');
return;
}
savedPngs.push({ url: pngUrl, name: file.name, active: false });
localStorage.setItem('aac-savedPngs', JSON.stringify(savedPngs));
menu.remove();
this.createPngMenu();
};
reader.readAsDataURL(file);
}
});
const closeButton = document.createElement('button');
closeButton.innerText = 'Schließen';
closeButton.style.marginTop = '20px';
closeButton.style.padding = '10px';
closeButton.style.backgroundColor = '#ccc';
closeButton.style.color = '#000';
closeButton.style.border = 'none';
closeButton.style.borderRadius = '5px';
closeButton.style.cursor = 'pointer';
closeButton.addEventListener('click', () => {
menu.remove();
});
menu.appendChild(fileInput);
menu.appendChild(closeButton);
document.body.appendChild(menu);
},
createResizeHandle: function() {
const resizeHandle = document.createElement('div');
resizeHandle.classList.add('aac-png-handle');
resizeHandle.style.width = '15px';
resizeHandle.style.height = '15px';
resizeHandle.style.backgroundColor = '#573699'; // Purple for resizing
resizeHandle.style.border = '2px solid #fff';
resizeHandle.style.position = 'absolute';
resizeHandle.style.right = '0';
resizeHandle.style.bottom = '0';
resizeHandle.style.cursor = 'se-resize';
resizeHandle.title = 'Resize'; // Tooltip
return resizeHandle;
},
createRotateHandle: function() {
const rotateHandle = document.createElement('div');
rotateHandle.classList.add('aac-png-handle');
rotateHandle.style.width = '15px';
rotateHandle.style.height = '15px';
rotateHandle.style.backgroundColor = '#FF0000'; // Red for rotating
rotateHandle.style.border = '2px solid #fff';
rotateHandle.style.position = 'absolute';
rotateHandle.style.top = '0';
rotateHandle.style.right = '0';
rotateHandle.style.cursor = 'grab';
rotateHandle.title = 'Rotate'; // Tooltip
return rotateHandle;
},
createPngElement: function(url, index) {
const pngElement = document.createElement('img');
pngElement.src = url;
pngElement.id = `aac-png-${index}`;
// Set initial styles for the PNG
pngElement.style.position = 'absolute'; // Position relative to the container
pngElement.style.width = '150px';
pngElement.style.height = '150px';
pngElement.style.cursor = 'move';
pngElement.style.transformOrigin = 'center center'; // For rotation
// Container for the PNG and handles
const pngContainer = document.createElement('div');
pngContainer.id = `aac-png-container-${index}`; // Unique ID for the container
pngContainer.style.position = 'fixed';
pngContainer.style.top = '100px';
pngContainer.style.left = '100px';
pngContainer.style.zIndex = '10002';
pngContainer.style.pointerEvents = 'auto';
// Append the PNG to the container
pngContainer.appendChild(pngElement);
// Create and append handles
const resizeHandle = this.createResizeHandle();
const rotateHandle = this.createRotateHandle();
pngContainer.appendChild(resizeHandle);
pngContainer.appendChild(rotateHandle);
// Append the container to the body
document.body.appendChild(pngContainer);
let isDragging = false;
let isResizing = false;
let isRotating = false;
let startX, startY, initialLeft, initialTop, initialWidth, initialHeight, initialAngle;
// Dragging logic
pngContainer.addEventListener('mousedown', (e) => {
if (e.target === resizeHandle || e.target === rotateHandle) {
return; // Ignore mousedown on handles for dragging
}
e.preventDefault();
isDragging = true;
startX = e.clientX;
startY = e.clientY;
initialLeft = parseInt(pngContainer.style.left, 10) || 0;
initialTop = parseInt(pngContainer.style.top, 10) || 0;
pngElement.style.opacity = '0.6';
});
// Resizing logic
resizeHandle.addEventListener('mousedown', (e) => {
e.preventDefault();
isResizing = true;
startX = e.clientX;
startY = e.clientY;
initialWidth = pngElement.offsetWidth;
initialHeight = pngElement.offsetHeight;
});
// Rotating logic
rotateHandle.addEventListener('mousedown', (e) => {
e.preventDefault();
isRotating = true;
startX = e.clientX;
startY = e.clientY;
const transform = pngElement.style.transform;
initialAngle = transform ? parseFloat(transform.replace('rotate(', '').replace('deg)', '')) : 0;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
const newLeft = initialLeft + deltaX;
const newTop = initialTop + deltaY;
// Update container position
pngContainer.style.left = `${newLeft}px`;
pngContainer.style.top = `${newTop}px`;
}
if (isResizing) {
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
const newWidth = initialWidth + deltaX;
const newHeight = initialHeight + deltaY;
// Ensure minimum size
if (newWidth > 50 && newHeight > 50) {
pngElement.style.width = `${newWidth}px`;
pngElement.style.height = `${newHeight}px`;
}
}
if (isRotating) {
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
const angle = initialAngle + Math.atan2(deltaY, deltaX) * (180 / Math.PI);
pngElement.style.transform = `rotate(${angle}deg)`;
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
isResizing = false;
isRotating = false;
pngElement.style.opacity = '1';
});
}
};
// Load handle visibility state on page load
document.addEventListener('DOMContentLoaded', () => {
const handlesVisible = localStorage.getItem('aac-png-handles-visible') === 'true';
const handles = document.querySelectorAll('.aac-png-handle');
handles.forEach(handle => {
handle.style.display = handlesVisible ? 'block' : 'none';
});
});
// Wallpaper Changer Module
const WallpaperChanger = {
init: function() {
this.applySavedBackground();
},
applySavedBackground: function() {
const savedImageUrl = localStorage.getItem('aac-customBackgroundUrl');
if (savedImageUrl) {
this.applyCustomBackground(savedImageUrl);
} else {
this.resetToDefaultBackground();
}
},
applyCustomBackground: function(url) {
if (url) {
document.documentElement.style.cssText = `
background-image: url("${url}") !important;
background-color: #000 !important;
background-position: center center !important;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
`;
document.body.style.cssText = `
background-image: url("${url}") !important;
background-color: #000 !important;
background-position: center center !important;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
`;
}
},
resetToDefaultBackground: function() {
document.documentElement.style.cssText = '';
document.body.style.cssText = '';
localStorage.removeItem('aac-customBackgroundUrl');
},
createWallpaperChangerButton: function() {
const button = document.createElement('button');
button.innerText = 'Hintergrund ändern'; // Change Wallpaper -> Hintergrund ändern
button.style.padding = '10px';
button.style.backgroundColor = '#573699';
button.style.color = '#fff';
button.style.border = 'none';
button.style.borderRadius = '5px';
button.style.cursor = 'pointer';
button.style.marginBottom = '10px';
button.addEventListener('click', () => {
WallpaperChanger.createInputMenu();
const menu = document.querySelector('#aac-placeholderMenu');
if (menu) menu.remove();
});
return button;
},
createSavedWallpapersButton: function() {
const button = document.createElement('button');
button.innerText = 'Gespeicherte Hintergründe'; // Saved Wallpapers -> Gespeicherte Hintergründe
button.style.padding = '10px';
button.style.backgroundColor = '#573699';
button.style.color = '#fff';
button.style.border = 'none';
button.style.borderRadius = '5px';
button.style.cursor = 'pointer';
button.style.marginBottom = '10px';
button.addEventListener('click', () => {
WallpaperChanger.createSavedWallpapersMenu();
});
return button;
},
createSavedWallpapersMenu: function() {
const menu = document.createElement('div');
menu.style.position = 'fixed';
menu.style.top = '50%';
menu.style.left = '50%';
menu.style.transform = 'translate(-50%, -50%)';
menu.style.zIndex = '10001';
menu.style.padding = '20px';
menu.style.backgroundColor = '#fff';
menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
menu.style.borderRadius = '10px';
menu.style.textAlign = 'center';
const title = document.createElement('h3');
title.innerText = 'Gespeicherte Hintergründe';
title.style.marginBottom = '20px';
menu.appendChild(title);
const savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
savedWallpapers.forEach((wallpaper, index) => {
const wallpaperContainer = document.createElement('div');
wallpaperContainer.style.display = 'flex';
wallpaperContainer.style.alignItems = 'center';
wallpaperContainer.style.marginBottom = '10px';
const thumbnail = document.createElement('img');
thumbnail.src = wallpaper.url;
thumbnail.alt = wallpaper.name || `Wallpaper ${index + 1}`;
thumbnail.style.width = '50px';
thumbnail.style.height = '50px';
thumbnail.style.objectFit = 'cover';
thumbnail.style.borderRadius = '5px';
thumbnail.style.marginRight = '10px';
const wallpaperButton = document.createElement('button');
wallpaperButton.innerText = wallpaper.name || `Wallpaper ${index + 1}`;
wallpaperButton.style.padding = '10px';
wallpaperButton.style.backgroundColor = '#573699';
wallpaperButton.style.color = '#fff';
wallpaperButton.style.border = 'none';
wallpaperButton.style.borderRadius = '5px';
wallpaperButton.style.cursor = 'pointer';
wallpaperButton.style.marginRight = '5px';
wallpaperButton.addEventListener('click', () => {
WallpaperChanger.applyCustomBackground(wallpaper.url);
localStorage.setItem('aac-customBackgroundUrl', wallpaper.url); // Save the applied wallpaper URL
});
const deleteButton = document.createElement('button');
deleteButton.innerText = '✕';
deleteButton.style.marginLeft = '5px';
deleteButton.style.padding = '2px';
deleteButton.style.width = '20px';
deleteButton.style.height = '20px';
deleteButton.style.backgroundColor = '#FF0000';
deleteButton.style.color = '#fff';
deleteButton.style.border = 'none';
deleteButton.style.borderRadius = '3px';
deleteButton.style.cursor = 'pointer';
deleteButton.addEventListener('click', () => {
savedPngs.splice(index, 1);
localStorage.setItem('aac-savedPngs', JSON.stringify(savedPngs));
// Remove the entire container (including handles)
const existingPngContainer = document.querySelector(`#aac-png-container-${index}`);
if (existingPngContainer) existingPngContainer.remove();
menu.remove();
this.createPngMenu();
});
wallpaperContainer.appendChild(thumbnail);
wallpaperContainer.appendChild(wallpaperButton);
wallpaperContainer.appendChild(deleteButton);
menu.appendChild(wallpaperContainer);
});
// Add a button to reset to the default wallpaper
const resetButton = document.createElement('button');
resetButton.innerText = 'Standardhintergrund wiederherstellen'; // Reset to Default Background
resetButton.style.marginTop = '20px';
resetButton.style.padding = '10px';
resetButton.style.backgroundColor = '#ccc';
resetButton.style.color = '#000';
resetButton.style.border = 'none';
resetButton.style.borderRadius = '5px';
resetButton.style.cursor = 'pointer';
resetButton.addEventListener('click', () => {
WallpaperChanger.resetToDefaultBackground();
menu.remove();
});
menu.appendChild(resetButton);
const closeButton = document.createElement('button');
closeButton.innerText = 'Schließen';
closeButton.style.marginTop = '10px';
closeButton.style.padding = '10px';
closeButton.style.backgroundColor = '#ccc';
closeButton.style.color = '#000';
closeButton.style.border = 'none';
closeButton.style.borderRadius = '5px';
closeButton.style.cursor = 'pointer';
closeButton.addEventListener('click', () => {
menu.remove();
});
menu.appendChild(closeButton);
document.body.appendChild(menu);
},
createInputMenu: function() {
const menu = document.createElement('div');
menu.style.position = 'fixed';
menu.style.top = '50%';
menu.style.left = '50%';
menu.style.transform = 'translate(-50%, -50%)';
menu.style.zIndex = '10001';
menu.style.padding = '20px';
menu.style.backgroundColor = '#fff';
menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
menu.style.borderRadius = '10px';
menu.style.textAlign = 'center';
const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Bild-URL hier eingeben...'; // Enter image URL here...
input.value = localStorage.getItem('aac-customBackgroundUrl') || '';
input.style.width = '300px';
input.style.padding = '10px';
input.style.marginBottom = '10px';
input.style.border = '1px solid #ccc';
input.style.borderRadius = '5px';
const nameInput = document.createElement('input');
nameInput.type = 'text';
nameInput.placeholder = 'Geben Sie den Namen des Hintergrunds ein...'; // Enter wallpaper name...
nameInput.style.width = '300px';
nameInput.style.padding = '10px';
nameInput.style.marginBottom = '10px';
nameInput.style.border = '1px solid #ccc';
nameInput.style.borderRadius = '5px';
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.style.marginBottom = '10px';
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
// Check if file size exceeds 1 MB (1 MB = 1024 * 1024 bytes)
if (file.size > 2.5 * 1024 * 1024) {
alert('Die Bilddatei ist zu groß. Bitte wählen Sie eine Datei, die kleiner als 2,5 MB ist.');
return;
}
const reader = new FileReader();
reader.onload = (e) => {
const imageUrl = e.target.result;
input.value = imageUrl;
};
reader.readAsDataURL(file);
}
});
const applyButton = document.createElement('button');
applyButton.innerText = 'Hintergrund anwenden'; // Apply Background -> Hintergrund anwenden
applyButton.style.marginLeft = '10px';
applyButton.style.padding = '10px';
applyButton.style.backgroundColor = '#573699';
applyButton.style.color = '#fff';
applyButton.style.border = 'none';
applyButton.style.borderRadius = '5px';
applyButton.style.cursor = 'pointer';
applyButton.addEventListener('click', () => {
const imageUrl = input.value.trim();
const wallpaperName = nameInput.value.trim();
if (imageUrl && wallpaperName) {
localStorage.setItem('aac-customBackgroundUrl', imageUrl);
WallpaperChanger.applyCustomBackground(imageUrl);
sessionStorage.setItem('aac-wallpaperChanged', 'true');
menu.remove();
} else {
alert('Bitte geben Sie eine gültige URL und einen Namen ein.'); // Please enter a valid URL and name.
}
});
const saveButton = document.createElement('button');
saveButton.innerText = 'Hintergrund speichern'; // Save Wallpaper -> Hintergrund speichern
saveButton.style.marginTop = '10px';
saveButton.style.padding = '10px';
saveButton.style.backgroundColor = '#573699';
saveButton.style.color = '#fff';
saveButton.style.border = 'none';
saveButton.style.borderRadius = '5px';
saveButton.style.cursor = 'pointer';
saveButton.addEventListener('click', () => {
const imageUrl = input.value.trim();
const wallpaperName = nameInput.value.trim();
if (imageUrl && wallpaperName) {
let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
if (savedWallpapers.length >= 5) {
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.
return;
}
WallpaperChanger.saveWallpaper(imageUrl, wallpaperName);
alert('Hintergrund erfolgreich gespeichert.'); // Wallpaper saved successfully.
} else {
alert('Bitte geben Sie eine gültige URL und einen Namen ein.'); // Please enter a valid URL and name.
}
});
const closeButton = document.createElement('button');
closeButton.innerText = 'Schließen'; // Close -> Schließen
closeButton.style.marginTop = '10px';
closeButton.style.padding = '10px';
closeButton.style.backgroundColor = '#ccc';
closeButton.style.color = '#000';
closeButton.style.border = 'none';
closeButton.style.borderRadius = '5px';
closeButton.style.cursor = 'pointer';
closeButton.addEventListener('click', () => {
menu.remove();
});
menu.appendChild(input);
menu.appendChild(document.createElement('br'));
menu.appendChild(nameInput);
menu.appendChild(document.createElement('br'));
menu.appendChild(fileInput);
menu.appendChild(applyButton);
menu.appendChild(document.createElement('br'));
menu.appendChild(saveButton);
menu.appendChild(document.createElement('br'));
menu.appendChild(closeButton);
document.body.appendChild(menu);
},
saveWallpaper: function(url, name) {
let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
if (!savedWallpapers.some(wallpaper => wallpaper.url === url)) {
savedWallpapers.push({ url, name });
localStorage.setItem('aac-savedWallpapers', JSON.stringify(savedWallpapers));
}
},
deleteWallpaper: function(index) {
let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
savedWallpapers.splice(index, 1);
localStorage.setItem('aac-savedWallpapers', JSON.stringify(savedWallpapers));
}
};
// Chat Area Module
const ChatArea = {
isDraggable: false,
init: function() {
this.chatArea = document.querySelector('#graphicChatArea');
if (this.chatArea) {
this.centerChatArea();
this.chatArea.style.position = 'absolute';
const savedState = localStorage.getItem('aac-isChatAreaDraggable');
if (savedState === 'true') {
this.enableDraggable();
}
}
},
centerChatArea: function() {
if (this.chatArea) {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const chatWidth = this.chatArea.offsetWidth;
const chatHeight = this.chatArea.offsetHeight;
this.chatArea.style.left = `${(windowWidth - chatWidth) / 2}px`;
this.chatArea.style.top = `${(windowHeight - chatHeight) / 2}px`;
}
},
resetChatAreaPosition: function() {
this.centerChatArea();
console.log('[AAC Enhanced] Chat area position reset to center.');
},
toggleDraggable: function() {
if (!this.chatArea) return;
if (this.isDraggable) {
this.disableDraggable();
} else {
this.enableDraggable();
}
this.updateToggleButton();
},
enableDraggable: function() {
this.isDraggable = true;
localStorage.setItem('aac-isChatAreaDraggable', 'true');
sessionStorage.setItem('aac-chatAreaButtonState', 'true');
$(this.chatArea).draggable({
containment: 'document',
start: function() {
ChatArea.chatArea.classList.add('ui-draggable-enabled');
},
stop: function() {
ChatArea.chatArea.classList.remove('ui-draggable-enabled');
}
});
console.log('[AAC Enhanced] Chat area is now draggable.');
},
disableDraggable: function() {
this.isDraggable = false;
localStorage.setItem('aac-isChatAreaDraggable', 'false');
if ($(this.chatArea).draggable('instance')) {
$(this.chatArea).draggable('destroy');
}
console.log('[AAC Enhanced] Draggable functionality has been disabled.');
},
updateToggleButton: function() {
const toggleButton = document.querySelector('#aac-toggleChatAreaButton');
if (toggleButton) {
if (this.isDraggable) {
toggleButton.innerText = 'Verschiebbare Chat-Bereich deaktivieren'; // Disable Draggable Chat Area
toggleButton.style.backgroundColor = '#FF0000';
} else {
toggleButton.innerText = 'Verschiebbare Chat-Bereich aktivieren'; // Enable Draggable Chat Area
toggleButton.style.backgroundColor = '#573699';
}
}
},
createToggleChatAreaButton: function() {
const button = document.createElement('button');
button.id = 'aac-toggleChatAreaButton';
button.style.padding = '10px';
button.style.color = '#fff';
button.style.border = 'none';
button.style.borderRadius = '5px';
button.style.cursor = 'pointer';
button.style.marginBottom = '10px';
button.addEventListener('click', () => ChatArea.toggleDraggable());
return button;
}
};
AACApp.init();
})();