-
-
-
+
+
-
-
-
-
-
- ![]()
-
-
+
+
-
-
-
+
+ ${CONFIG.PAINTING_SPEED.DEFAULT} px/s
-
+
+
+
+
+ ${CONFIG.PAINTING_SPEED.DEFAULT} px/s
+ ${CONFIG.PAINTING_SPEED.MIN}
+ ${CONFIG.PAINTING_SPEED.MAX}
+
+
-
-
+
+
`
const resizeContainer = document.createElement("div")
resizeContainer.className = "resize-container"
resizeContainer.innerHTML = `
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
${Utils.t("resizeImage")}
+${Utils.t("resizeImage")}
-
-
-
-
+
+
+
+
+
-
+
+
+
+
-
-
-
-
-
-
- -
-
-
-
-
+
+
+ ![Resized image preview will appear here.]()
+
+
+
+
`
+ const resizeOverlay = document.createElement("div")
+ resizeOverlay.className = "resize-overlay"
+
document.body.appendChild(container)
+ document.body.appendChild(resizeOverlay)
+ document.body.appendChild(resizeContainer)
document.body.appendChild(statsContainer)
document.body.appendChild(settingsContainer)
- document.body.appendChild(resizeContainer)
- const resizeOverlay = Utils.createElement('div', { className: 'resize-overlay' });
- document.body.appendChild(resizeOverlay);
const uploadBtn = container.querySelector("#uploadBtn")
const resizeBtn = container.querySelector("#resizeBtn")
const selectPosBtn = container.querySelector("#selectPosBtn")
const startBtn = container.querySelector("#startBtn")
const stopBtn = container.querySelector("#stopBtn")
+ const saveBtn = container.querySelector("#saveBtn")
+ const loadBtn = container.querySelector("#loadBtn")
+ const saveToFileBtn = container.querySelector("#saveToFileBtn")
+ const loadFromFileBtn = container.querySelector("#loadFromFileBtn")
+ const minimizeBtn = container.querySelector("#minimizeBtn")
+ const compactBtn = container.querySelector("#compactBtn")
+ const statsBtn = container.querySelector("#statsBtn")
const toggleOverlayBtn = container.querySelector("#toggleOverlayBtn");
-
- makeDraggable(container)
- makeDraggable(statsContainer)
- makeDraggable(settingsContainer)
+ const statusText = container.querySelector("#statusText")
+ const progressBar = container.querySelector("#progressBar")
+ const statsArea = statsContainer.querySelector("#statsArea")
+ const content = container.querySelector(".wplace-content")
+ const closeStatsBtn = statsContainer.querySelector("#closeStatsBtn")
+ const refreshChargesBtn = statsContainer.querySelector("#refreshChargesBtn")
+ const cooldownSlider = container.querySelector("#cooldownSlider");
+ const cooldownValue = container.querySelector("#cooldownValue");
- settingsContainer.querySelector("#settingsBtn")?.addEventListener("click", () => settingsContainer.style.display = 'block');
- settingsContainer.querySelector("#closeSettingsBtn").addEventListener("click", () => settingsContainer.style.display = 'none');
- settingsContainer.querySelector("#applySettingsBtn").addEventListener("click", () => {
+ if (!uploadBtn || !selectPosBtn || !startBtn || !stopBtn) {
+ console.error("Some UI elements not found:", {
+ uploadBtn: !!uploadBtn,
+ selectPosBtn: !!selectPosBtn,
+ startBtn: !!startBtn,
+ stopBtn: !!stopBtn,
+ })
+ }
+
+ if (!statsContainer || !statsArea || !closeStatsBtn) {
+ console.error("Stats UI elements not found:", {
+ statsContainer: !!statsContainer,
+ statsArea: !!statsArea,
+ closeStatsBtn: !!closeStatsBtn,
+ })
+ }
+
+ const header = container.querySelector(".wplace-header")
+
+ makeDraggable(container)
+
+ function makeDraggable(element) {
+ let pos1 = 0,
+ pos2 = 0,
+ pos3 = 0,
+ pos4 = 0
+ let isDragging = false
+ const header = element.querySelector(".wplace-header") || element.querySelector(".wplace-settings-header")
+
+ if (!header) {
+ console.warn("No draggable header found for element:", element)
+ return
+ }
+
+ header.onmousedown = dragMouseDown
+
+ function dragMouseDown(e) {
+ if (e.target.closest(".wplace-header-btn") || e.target.closest("button")) return
+
+ e.preventDefault()
+ isDragging = true
+
+ const rect = element.getBoundingClientRect()
+
+ element.style.transform = "none"
+ element.style.top = rect.top + "px"
+ element.style.left = rect.left + "px"
+
+ pos3 = e.clientX
+ pos4 = e.clientY
+ element.classList.add("wplace-dragging")
+ document.onmouseup = closeDragElement
+ document.onmousemove = elementDrag
+
+ document.body.style.userSelect = "none"
+ }
+
+ function elementDrag(e) {
+ if (!isDragging) return
+
+ e.preventDefault()
+ pos1 = pos3 - e.clientX
+ pos2 = pos4 - e.clientY
+ pos3 = e.clientX
+ pos4 = e.clientY
+
+ let newTop = element.offsetTop - pos2
+ let newLeft = element.offsetLeft - pos1
+
+ const rect = element.getBoundingClientRect()
+ const maxTop = window.innerHeight - rect.height
+ const maxLeft = window.innerWidth - rect.width
+
+ newTop = Math.max(0, Math.min(newTop, maxTop))
+ newLeft = Math.max(0, Math.min(newLeft, maxLeft))
+
+ element.style.top = newTop + "px"
+ element.style.left = newLeft + "px"
+ }
+
+ function closeDragElement() {
+ isDragging = false
+ element.classList.remove("wplace-dragging")
+ document.onmouseup = null
+ document.onmousemove = null
+ document.body.style.userSelect = ""
+ }
+ }
+
+ makeDraggable(statsContainer)
+ makeDraggable(container)
+
+ if (statsBtn && closeStatsBtn) {
+ statsBtn.addEventListener("click", () => {
+ const isVisible = statsContainer.style.display !== "none"
+ if (isVisible) {
+ statsContainer.style.display = "none"
+ statsBtn.innerHTML = ''
+ statsBtn.title = "Show Stats"
+ } else {
+ statsContainer.style.display = "block"
+ statsBtn.innerHTML = ''
+ statsBtn.title = "Hide Stats"
+ }
+ })
+
+ closeStatsBtn.addEventListener("click", () => {
+ statsContainer.style.display = "none"
+ statsBtn.innerHTML = ''
+ statsBtn.title = "Show Stats"
+ })
+
+ if (refreshChargesBtn) {
+ refreshChargesBtn.addEventListener("click", async () => {
+ refreshChargesBtn.innerHTML = ''
+ refreshChargesBtn.disabled = true
+
+ try {
+ await updateStats()
+ } catch (error) {
+ console.error("Error refreshing charges:", error)
+ } finally {
+ refreshChargesBtn.innerHTML = ''
+ refreshChargesBtn.disabled = false
+ }
+ })
+ }
+ }
+
+ const settingsBtn = container.querySelector("#settingsBtn")
+ const closeSettingsBtn = settingsContainer.querySelector("#closeSettingsBtn")
+ const applySettingsBtn = settingsContainer.querySelector("#applySettingsBtn");
+
+
+ if (settingsBtn && closeSettingsBtn && applySettingsBtn) {
+ settingsBtn.addEventListener("click", () => {
+ const isVisible = settingsContainer.style.display !== "none"
+ if (isVisible) {
+ settingsContainer.style.animation = "settingsFadeOut 0.3s ease-out forwards"
+ setTimeout(() => {
+ settingsContainer.style.display = "none"
+ settingsContainer.style.animation = ""
+ }, 300)
+ } else {
+ settingsContainer.style.top = "50%"
+ settingsContainer.style.left = "50%"
+ settingsContainer.style.transform = "translate(-50%, -50%)"
+ settingsContainer.style.display = "block"
+ settingsContainer.style.animation = "settingsSlideIn 0.4s ease-out"
+ }
+ })
+
+ closeSettingsBtn.addEventListener("click", () => {
+ settingsContainer.style.animation = "settingsFadeOut 0.3s ease-out forwards"
+ setTimeout(() => {
+ settingsContainer.style.display = "none"
+ settingsContainer.style.animation = ""
+ settingsContainer.style.top = "50%"
+ settingsContainer.style.left = "50%"
+ settingsContainer.style.transform = "translate(-50%, -50%)"
+ }, 300)
+ })
+
+ applySettingsBtn.addEventListener("click", () => {
saveBotSettings();
Utils.showAlert(Utils.t("settingsSaved"), "success");
- settingsContainer.style.display = 'none';
- });
- settingsContainer.querySelector("#languageSelect").addEventListener("change", (e) => {
- state.language = e.target.value;
- localStorage.setItem('wplace_language', state.language);
- createUI();
- });
- settingsContainer.querySelector("#overlayShreadEffectToggle").addEventListener('change', (e) => {
- state.overlayShreadEffect = e.target.checked;
- if (overlayManager.imageBitmap) overlayManager.processImageIntoChunks();
- });
- settingsContainer.querySelector("#overlayFollowPaletteToggle").addEventListener('change', (e) => {
- state.overlayFollowPalette = e.target.checked;
- if (overlayManager.imageBitmap) overlayManager.processImageIntoChunks();
- });
- const overlayOpacitySlider = settingsContainer.querySelector("#overlayOpacitySlider");
- const overlayOpacityValue = settingsContainer.querySelector("#overlayOpacityValue");
- overlayOpacitySlider.addEventListener('input', (e) => {
- const opacity = parseInt(e.target.value, 10);
- state.overlayOpacity = opacity / 100;
- overlayOpacityValue.textContent = `${opacity}%`;
- });
-
- statsContainer.querySelector("#statsBtn")?.addEventListener("click", () => statsContainer.style.display = statsContainer.style.display === 'none' ? 'block' : 'none');
- statsContainer.querySelector("#closeStatsBtn").addEventListener("click", () => statsContainer.style.display = 'none');
- statsContainer.querySelector("#refreshChargesBtn").addEventListener("click", updateStats);
-
- toggleOverlayBtn.addEventListener('click', () => {
- const isEnabled = overlayManager.toggle();
- toggleOverlayBtn.classList.toggle('active', isEnabled);
- Utils.showAlert(`Overlay ${isEnabled ? 'enabled' : 'disabled'}.`, 'info');
- });
+ closeSettingsBtn.click();
+ });
- uploadBtn.addEventListener("click", async () => {
+ makeDraggable(settingsContainer)
+
+ const languageSelect = settingsContainer.querySelector("#languageSelect")
+ if (languageSelect) {
+ languageSelect.addEventListener("change", (e) => {
+ const newLanguage = e.target.value
+ state.language = newLanguage
+ localStorage.setItem('wplace_language', newLanguage)
+
+ setTimeout(() => {
+ settingsContainer.style.display = "none"
+ createUI()
+ }, 100)
+ })
+ }
+
+ const themeSelect = settingsContainer.querySelector("#themeSelect")
+ if (themeSelect) {
+ themeSelect.addEventListener("change", (e) => {
+ const newTheme = e.target.value
+ switchTheme(newTheme)
+ })
+ }
+
+ const primaryColor = settingsContainer.querySelector("#primaryColor")
+ const primaryColorText = settingsContainer.querySelector("#primaryColorText")
+ const secondaryColor = settingsContainer.querySelector("#secondaryColor")
+ const secondaryColorText = settingsContainer.querySelector("#secondaryColorText")
+ const highlightColor = settingsContainer.querySelector("#highlightColor")
+ const highlightColorText = settingsContainer.querySelector("#highlightColorText")
+ const borderRadiusSlider = settingsContainer.querySelector("#borderRadiusSlider")
+ const borderRadiusValue = settingsContainer.querySelector("#borderRadiusValue")
+ const applyChangesBtn = settingsContainer.querySelector("#applyThemeChanges")
+ const resetDefaultsBtn = settingsContainer.querySelector("#resetThemeDefaults")
+
+ if (primaryColor && primaryColorText) {
+ primaryColor.addEventListener("input", (e) => {
+ primaryColorText.value = e.target.value
+ })
+ primaryColorText.addEventListener("input", (e) => {
+ if (/^#[0-9A-F]{6}$/i.test(e.target.value)) {
+ primaryColor.value = e.target.value
+ }
+ })
+ }
+
+ if (secondaryColor && secondaryColorText) {
+ secondaryColor.addEventListener("input", (e) => {
+ secondaryColorText.value = e.target.value
+ })
+ secondaryColorText.addEventListener("input", (e) => {
+ if (/^#[0-9A-F]{6}$/i.test(e.target.value)) {
+ secondaryColor.value = e.target.value
+ }
+ })
+ }
+
+ if (highlightColor && highlightColorText) {
+ highlightColor.addEventListener("input", (e) => {
+ highlightColorText.value = e.target.value
+ })
+ highlightColorText.addEventListener("input", (e) => {
+ if (/^#[0-9A-F]{6}$/i.test(e.target.value)) {
+ highlightColor.value = e.target.value
+ }
+ })
+ }
+
+ if (borderRadiusSlider && borderRadiusValue) {
+ borderRadiusSlider.addEventListener("input", (e) => {
+ borderRadiusValue.textContent = e.target.value + "px"
+ })
+ }
+
+ if (applyChangesBtn) {
+ applyChangesBtn.addEventListener("click", () => {
+ const currentTheme = getCurrentTheme()
+ const currentThemeName = CONFIG.currentTheme
+
+ const newValues = {
+ primary: primaryColorText?.value || currentTheme.primary,
+ secondary: secondaryColorText?.value || currentTheme.secondary,
+ highlight: highlightColorText?.value || currentTheme.highlight,
+ borderRadius: (borderRadiusSlider?.value || 0) + "px",
+ animations: {
+ glow: settingsContainer.querySelector("#glowAnimation")?.checked || false,
+ scanline: settingsContainer.querySelector("#scanlineAnimation")?.checked || false,
+ pixelBlink: settingsContainer.querySelector("#pixelBlinkAnimation")?.checked || false
+ }
+ }
+
+ CONFIG.THEMES[currentThemeName] = {
+ ...currentTheme,
+ ...newValues
+ }
+
+ saveThemePreference()
+ setTimeout(() => {
+ settingsContainer.style.display = "none"
+ createUI()
+ }, 100)
+ })
+ }
+
+ if (resetDefaultsBtn) {
+ resetDefaultsBtn.addEventListener("click", () => {
+ const confirmReset = confirm("Reset theme to default settings?")
+ if (confirmReset) {
+ location.reload()
+ }
+ })
+ }
+ }
+
+ const widthSlider = resizeContainer.querySelector("#widthSlider")
+ const heightSlider = resizeContainer.querySelector("#heightSlider")
+ const widthValue = resizeContainer.querySelector("#widthValue")
+ const heightValue = resizeContainer.querySelector("#heightValue")
+ const keepAspect = resizeContainer.querySelector("#keepAspect")
+ const paintWhiteToggle = resizeContainer.querySelector("#paintWhiteToggle");
+ const zoomSlider = resizeContainer.querySelector("#zoomSlider");
+ const resizePreview = resizeContainer.querySelector("#resizePreview")
+ const confirmResize = resizeContainer.querySelector("#confirmResize")
+ const cancelResize = resizeContainer.querySelector("#cancelResize")
+ const downloadPreviewBtn = resizeContainer.querySelector("#downloadPreviewBtn");
+
+ if (compactBtn) {
+ compactBtn.addEventListener("click", () => {
+ container.classList.toggle("wplace-compact")
+ const isCompact = container.classList.contains("wplace-compact")
+
+ if (isCompact) {
+ compactBtn.innerHTML = ''
+ compactBtn.title = "Expand Mode"
+ } else {
+ compactBtn.innerHTML = ''
+ compactBtn.title = "Compact Mode"
+ }
+ })
+ }
+
+ if (minimizeBtn) {
+ minimizeBtn.addEventListener("click", () => {
+ state.minimized = !state.minimized
+ if (state.minimized) {
+ container.classList.add("wplace-minimized")
+ content.classList.add("wplace-hidden")
+ minimizeBtn.innerHTML = ''
+ minimizeBtn.title = "Restore"
+ } else {
+ container.classList.remove("wplace-minimized")
+ content.classList.remove("wplace-hidden")
+ minimizeBtn.innerHTML = ''
+ minimizeBtn.title = "Minimize"
+ }
+ saveBotSettings()
+ })
+ }
+
+ if (toggleOverlayBtn) {
+ toggleOverlayBtn.addEventListener('click', () => {
+ const isEnabled = overlayManager.toggle();
+ toggleOverlayBtn.classList.toggle('active', isEnabled);
+ Utils.showAlert(`Overlay ${isEnabled ? 'enabled' : 'disabled'}.`, 'info');
+ });
+ }
+
+ if (state.minimized) {
+ container.classList.add("wplace-minimized")
+ content.classList.add("wplace-hidden")
+ if (minimizeBtn) {
+ minimizeBtn.innerHTML = ''
+ minimizeBtn.title = "Restore"
+ }
+ } else {
+ container.classList.remove("wplace-minimized")
+ content.classList.remove("wplace-hidden")
+ if (minimizeBtn) {
+ minimizeBtn.innerHTML = ''
+ minimizeBtn.title = "Minimize"
+ }
+ }
+
+ if (saveBtn) {
+ saveBtn.addEventListener("click", () => {
+ if (!state.imageLoaded) {
+ Utils.showAlert(Utils.t("missingRequirements"), "error")
+ return
+ }
+
+ const success = Utils.saveProgress()
+ if (success) {
+ updateUI("autoSaved", "success")
+ Utils.showAlert(Utils.t("autoSaved"), "success")
+ } else {
+ Utils.showAlert("❌ Erro ao salvar progresso", "error")
+ }
+ })
+ }
+
+ if (loadBtn) {
+ loadBtn.addEventListener("click", () => {
+ const savedData = Utils.loadProgress()
+ if (!savedData) {
+ updateUI("noSavedData", "warning")
+ Utils.showAlert(Utils.t("noSavedData"), "warning")
+ return
+ }
+
+ const confirmLoad = confirm(
+ `${Utils.t("savedDataFound")}\n\n` +
+ `Saved: ${new Date(savedData.timestamp).toLocaleString()}\n` +
+ `Progress: ${savedData.state.paintedPixels}/${savedData.state.totalPixels} pixels`,
+ )
+
+ if (confirmLoad) {
+ const success = Utils.restoreProgress(savedData)
+ if (success) {
+ updateUI("dataLoaded", "success")
+ Utils.showAlert(Utils.t("dataLoaded"), "success")
+ updateDataButtons()
+
+ updateStats()
+
+ if (!state.colorsChecked) {
+ uploadBtn.disabled = false;
+ } else {
+ uploadBtn.disabled = false;
+ selectPosBtn.disabled = false;
+ }
+
+ if (state.imageLoaded && state.startPosition && state.region && state.colorsChecked) {
+ startBtn.disabled = false
+ }
+ } else {
+ Utils.showAlert("❌ Erro ao carregar progresso", "error")
+ }
+ }
+ })
+ }
+
+ if (saveToFileBtn) {
+ saveToFileBtn.addEventListener("click", () => {
+ const success = Utils.saveProgressToFile()
+ if (success) {
+ updateUI("fileSaved", "success")
+ Utils.showAlert(Utils.t("fileSaved"), "success")
+ } else {
+ Utils.showAlert(Utils.t("fileError"), "error")
+ }
+ })
+ }
+
+ if (loadFromFileBtn) {
+ loadFromFileBtn.addEventListener("click", async () => {
+ try {
+ const success = await Utils.loadProgressFromFile()
+ if (success) {
+ updateUI("fileLoaded", "success")
+ Utils.showAlert(Utils.t("fileLoaded"), "success")
+ updateDataButtons()
+
+ await updateStats()
+
+ if (state.colorsChecked) {
+ uploadBtn.disabled = false
+ selectPosBtn.disabled = false
+ resizeBtn.disabled = false
+ } else {
+ uploadBtn.disabled = false;
+ }
+
+ if (state.imageLoaded && state.startPosition && state.region && state.colorsChecked) {
+ startBtn.disabled = false
+ }
+ }
+ } catch (error) {
+ if (error.message === "Invalid JSON file") {
+ Utils.showAlert(Utils.t("invalidFileFormat"), "error")
+ } else {
+ Utils.showAlert(Utils.t("fileError"), "error")
+ }
+ }
+ })
+ }
+
+ updateUI = (messageKey, type = "default", params = {}) => {
+ const message = Utils.t(messageKey, params)
+ statusText.textContent = message
+ statusText.className = `wplace-status status-${type}`
+ statusText.style.animation = "none"
+ void statusText.offsetWidth
+ statusText.style.animation = "slideIn 0.3s ease-out"
+ }
+
+ updateStats = async () => {
+ const { charges, cooldown, max } = await WPlaceService.getCharges();
+ state.currentCharges = Math.floor(charges);
+ state.cooldown = cooldown;
+ state.maxCharges = Math.floor(max) > 1 ? Math.floor(max) : state.maxCharges;
+
+ if (cooldownSlider.max != state.maxCharges) {
+ cooldownSlider.max = state.maxCharges;
+ }
+
+ let imageStatsHTML = '';
+ if (state.imageLoaded) {
+ const progress = state.totalPixels > 0 ? Math.round((state.paintedPixels / state.totalPixels) * 100) : 0;
+ const remainingPixels = state.totalPixels - state.paintedPixels;
+ state.estimatedTime = Utils.calculateEstimatedTime(remainingPixels, state.currentCharges, state.cooldown);
+ progressBar.style.width = `${progress}%`;
+
+ imageStatsHTML = `
+
+ Color Palette
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ ${Utils.t("progress")}
+ ${progress}%
+
+
+ ${Utils.t("pixels")}
+ ${state.paintedPixels}/${state.totalPixels}
+
+
+ `;
+ }
+
+ let colorSwatchesHTML = '';
+ if (state.colorsChecked) {
+ colorSwatchesHTML = state.availableColors.map(color => {
+ const rgbString = `rgb(${color.rgb.join(',')})`;
+ return ``;
+ }).join('');
+ }
+
+ statsArea.innerHTML = `
+ ${imageStatsHTML}
+ ${Utils.t("estimatedTime")}
+ ${Utils.formatTime(state.estimatedTime)}
+
+
+ ${state.colorsChecked ? `
+ ${Utils.t("charges")}
+ ${Math.floor(state.currentCharges)} / ${state.maxCharges}
+
+
+ ` : ''}
+ `;
+ }
+
+ updateDataButtons = () => {
+ const hasImageData = state.imageLoaded && state.imageData
+ saveBtn.disabled = !hasImageData
+ saveToFileBtn.disabled = !hasImageData
+ }
+
+ updateDataButtons()
+
+ function showResizeDialog(processor) {
+ const { width, height } = processor.getDimensions();
+ const aspectRatio = width / height;
+
+ widthSlider.value = width;
+ heightSlider.value = height;
+ widthSlider.max = width * 2;
+ heightSlider.max = height * 2;
+ widthValue.textContent = width;
+ heightValue.textContent = height;
+ zoomSlider.value = 1;
+ paintWhiteToggle.checked = state.paintWhitePixels;
+
+ _updateResizePreview = async () => {
+ const newWidth = parseInt(widthSlider.value, 10);
+ const newHeight = parseInt(heightSlider.value, 10);
+ const zoomLevel = parseFloat(zoomSlider.value);
+
+ widthValue.textContent = newWidth;
+ heightValue.textContent = newHeight;
+
+ const tempCanvas = document.createElement('canvas');
+ const tempCtx = tempCanvas.getContext('2d');
+ tempCanvas.width = newWidth;
+ tempCanvas.height = newHeight;
+ tempCtx.imageSmoothingEnabled = false;
+ tempCtx.drawImage(processor.img, 0, 0, newWidth, newHeight);
+
+ const imgData = tempCtx.getImageData(0, 0, newWidth, newHeight);
+ const data = imgData.data;
+
+ for (let i = 0; i < data.length; i += 4) {
+ const r = data[i], g = data[i + 1], b = data[i + 2], a = data[i + 3];
+
+ if (a < CONFIG.TRANSPARENCY_THRESHOLD || (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))) {
+ data[i + 3] = 0;
+ continue;
+ }
+
+ const [nr, ng, nb] = Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette);
+ data[i] = nr;
+ data[i + 1] = ng;
+ data[i + 2] = nb;
+ data[i + 3] = 255;
+ }
+ tempCtx.putImageData(imgData, 0, 0);
+ resizePreview.src = tempCanvas.toDataURL();
+ resizePreview.style.transform = `scale(${zoomLevel})`;
+
+ const finalImageBitmap = await createImageBitmap(tempCanvas);
+ await overlayManager.setImage(finalImageBitmap);
+ };
+
+ const onWidthInput = () => {
+ if (keepAspect.checked) {
+ heightSlider.value = Math.round(parseInt(widthSlider.value, 10) / aspectRatio);
+ }
+ _updateResizePreview();
+ };
+
+ const onHeightInput = () => {
+ if (keepAspect.checked) {
+ widthSlider.value = Math.round(parseInt(heightSlider.value, 10) * aspectRatio);
+ }
+ _updateResizePreview();
+ };
+
+ paintWhiteToggle.onchange = (e) => {
+ state.paintWhitePixels = e.target.checked;
+ _updateResizePreview();
+ };
+
+ zoomSlider.addEventListener('input', _updateResizePreview);
+ widthSlider.addEventListener("input", onWidthInput);
+ heightSlider.addEventListener("input", onHeightInput);
+
+ confirmResize.onclick = async () => {
+ const newWidth = parseInt(widthSlider.value, 10);
+ const newHeight = parseInt(heightSlider.value, 10);
+ const newPixels = processor.resize(newWidth, newHeight);
+
+ let totalValidPixels = 0;
+ for (let i = 0; i < newPixels.length; i += 4) {
+ const isTransparent = newPixels[i + 3] < CONFIG.TRANSPARENCY_THRESHOLD;
+ const isWhiteAndSkipped = !state.paintWhitePixels && Utils.isWhitePixel(newPixels[i], newPixels[i+1], newPixels[i+2]);
+ if (!isTransparent && !isWhiteAndSkipped) {
+ totalValidPixels++;
+ }
+ }
+
+ state.imageData.pixels = newPixels;
+ state.imageData.width = newWidth;
+ state.imageData.height = newHeight;
+ state.imageData.totalPixels = totalValidPixels;
+ state.totalPixels = totalValidPixels;
+ state.paintedPixels = 0;
+
+ const finalImageBitmap = await createImageBitmap(processor.canvas);
+ await overlayManager.setImage(finalImageBitmap);
+ overlayManager.enable();
+ toggleOverlayBtn.classList.add('active');
+
+ updateStats();
+ updateUI("resizeSuccess", "success", { width: newWidth, height: newHeight });
+ closeResizeDialog();
+ };
+
+ downloadPreviewBtn.onclick = () => {
+ const link = document.createElement('a');
+ link.download = 'wplace-preview.png';
+ link.href = resizePreview.src;
+ link.click();
+ };
+
+ cancelResize.onclick = closeResizeDialog;
+
+ resizeOverlay.style.display = "block";
+ resizeContainer.style.display = "block";
+ _updateResizePreview();
+ }
+
+ function closeResizeDialog() {
+ resizeOverlay.style.display = "none";
+ resizeContainer.style.display = "none";
+ _updateResizePreview = () => {};
+ }
+
+ if (uploadBtn) {
+ uploadBtn.addEventListener("click", async () => {
const availableColors = Utils.extractAvailableColors();
if (availableColors.length < 10) {
updateUI("noColorsFound", "error");
@@ -2859,6 +3843,7 @@ window.addEventListener('message', (event) => {
updateStats();
selectPosBtn.disabled = false;
}
+
try {
updateUI("loadingImage", "default")
const imageSrc = await Utils.createImageUploader()
@@ -2866,190 +3851,233 @@ window.addEventListener('message', (event) => {
updateUI("colorsFound", "success", { count: state.availableColors.length });
return;
}
- const processor = new ImageProcessor(imageSrc);
- await processor.load();
- state.imageData = { processor }; // Store processor for resizing
- state.imageLoaded = true;
- resizeBtn.disabled = false;
+
+ const processor = new ImageProcessor(imageSrc)
+ await processor.load()
+
+ const { width, height } = processor.getDimensions()
+ const pixels = processor.getPixelData()
+
+ let totalValidPixels = 0;
+ for (let i = 0; i < pixels.length; i += 4) {
+ const isTransparent = pixels[i + 3] < CONFIG.TRANSPARENCY_THRESHOLD;
+ const isWhiteAndSkipped = !state.paintWhitePixels && Utils.isWhitePixel(pixels[i], pixels[i+1], pixels[i+2]);
+ if (!isTransparent && !isWhiteAndSkipped) {
+ totalValidPixels++;
+ }
+ }
+
+ state.imageData = {
+ width,
+ height,
+ pixels,
+ totalPixels: totalValidPixels,
+ processor,
+ }
+
+ state.totalPixels = totalValidPixels
+ state.paintedPixels = 0
+ state.imageLoaded = true
+ state.lastPosition = { x: 0, y: 0 }
+
+ const imageBitmap = await createImageBitmap(processor.img);
+ await overlayManager.setImage(imageBitmap);
+ overlayManager.enable();
toggleOverlayBtn.disabled = false;
- updateUI("imageLoaded", "success", { count: 0 }); // Count is unknown until resize
- showResizeDialog(processor);
+ toggleOverlayBtn.classList.add('active');
+
+ resizeBtn.disabled = false
+ saveBtn.disabled = false
+
+ if (state.startPosition) {
+ startBtn.disabled = false
+ }
+
+ updateStats()
+ updateDataButtons()
+ updateUI("imageLoaded", "success", { count: totalValidPixels })
} catch {
updateUI("imageError", "error")
}
- });
+ })
+ }
- resizeBtn.addEventListener("click", () => {
+ if (resizeBtn) {
+ resizeBtn.addEventListener("click", () => {
if (state.imageLoaded && state.imageData.processor) {
showResizeDialog(state.imageData.processor)
}
- });
-
- selectPosBtn.addEventListener("click", async () => {
- if (state.selectingPosition) return;
- state.selectingPosition = true;
- state.startPosition = null;
- state.region = null;
- startBtn.disabled = true;
- Utils.showAlert(Utils.t("selectPositionAlert"), "info");
- updateUI("waitingPosition", "default");
- const originalFetch = window.fetch;
- window.fetch = async (url, options) => {
- if (typeof url === "string" && url.includes("/pixel/") && options?.method === "POST") {
- const response = await originalFetch(url, options);
- const data = await response.clone().json();
- if (data?.painted === 1) {
- const regionMatch = url.match(/\/pixel\/(\d+)\/(\d+)/);
- if (regionMatch) state.region = { x: +regionMatch[1], y: +regionMatch[2] };
- const payload = JSON.parse(options.body);
- state.startPosition = { x: payload.coords[0], y: payload.coords[1] };
- state.lastPosition = { x: 0, y: 0 };
- await overlayManager.setPosition(state.startPosition, state.region);
- if (state.imageLoaded) startBtn.disabled = false;
- window.fetch = originalFetch;
- state.selectingPosition = false;
- updateUI("positionSet", "success");
- }
- return response;
- }
- return originalFetch(url, options);
- };
- setTimeout(() => {
- if (state.selectingPosition) {
- window.fetch = originalFetch;
- state.selectingPosition = false;
- updateUI("positionTimeout", "error");
- }
- }, 120000);
- });
-
- startBtn.addEventListener("click", () => {
- // ... start painting logic
- });
- stopBtn.addEventListener("click", () => {
- // ... stop painting logic
- });
-
- function showResizeDialog(processor) {
- const { width, height } = processor.getDimensions();
- const aspectRatio = width / height;
- const widthSlider = resizeContainer.querySelector("#widthSlider");
- const heightSlider = resizeContainer.querySelector("#heightSlider");
- const widthValue = resizeContainer.querySelector("#widthValue");
- const heightValue = resizeContainer.querySelector("#heightValue");
- const keepAspect = resizeContainer.querySelector("#keepAspect");
- const paintWhiteToggle = resizeContainer.querySelector("#paintWhiteToggle");
- const resizePreview = resizeContainer.querySelector("#resizePreview");
-
- widthSlider.value = width;
- heightSlider.value = height;
- widthSlider.max = width * 2;
- heightSlider.max = height * 2;
- widthValue.textContent = width;
- heightValue.textContent = height;
- paintWhiteToggle.checked = state.paintWhitePixels;
-
- _updateResizePreview = () => {
- const newWidth = parseInt(widthSlider.value, 10);
- const newHeight = parseInt(heightSlider.value, 10);
- widthValue.textContent = newWidth;
- heightValue.textContent = newHeight;
- const tempCanvas = document.createElement('canvas');
- tempCanvas.width = newWidth;
- tempCanvas.height = newHeight;
- const tempCtx = tempCanvas.getContext('2d');
- tempCtx.imageSmoothingEnabled = false;
- tempCtx.drawImage(processor.img, 0, 0, newWidth, newHeight);
- const imgData = tempCtx.getImageData(0, 0, newWidth, newHeight);
- const data = imgData.data;
- for (let i = 0; i < data.length; i += 4) {
- const r = data[i], g = data[i+1], b = data[i+2], a = data[i+3];
- if (a < CONFIG.TRANSPARENCY_THRESHOLD || (!state.paintWhitePixels && Utils.isWhitePixel(r,g,b))) {
- data[i + 3] = 0; continue;
- }
- const [nr, ng, nb] = Utils.findClosestPaletteColor(r,g,b, state.activeColorPalette);
- data[i] = nr; data[i+1] = ng; data[i+2] = nb;
- }
- tempCtx.putImageData(imgData, 0, 0);
- resizePreview.src = tempCanvas.toDataURL();
- };
-
- widthSlider.oninput = () => {
- if (keepAspect.checked) heightSlider.value = Math.round(widthSlider.value / aspectRatio);
- _updateResizePreview();
- };
- heightSlider.oninput = () => {
- if (keepAspect.checked) widthSlider.value = Math.round(heightSlider.value * aspectRatio);
- _updateResizePreview();
- };
- paintWhiteToggle.onchange = (e) => {
- state.paintWhitePixels = e.target.checked;
- _updateResizePreview();
- };
-
- resizeContainer.querySelector("#confirmResize").onclick = async () => {
- const newWidth = parseInt(widthSlider.value, 10);
- const newHeight = parseInt(heightSlider.value, 10);
- const finalCanvas = document.createElement('canvas');
- finalCanvas.width = newWidth;
- finalCanvas.height = newHeight;
- const finalCtx = finalCanvas.getContext('2d');
- finalCtx.imageSmoothingEnabled = false;
- finalCtx.drawImage(processor.img, 0, 0, newWidth, newHeight);
- const imgData = finalCtx.getImageData(0, 0, newWidth, newHeight);
- const data = imgData.data;
- let totalValidPixels = 0;
- for (let i = 0; i < data.length; i += 4) {
- const r = data[i], g = data[i+1], b = data[i+2], a = data[i+3];
- if (a < CONFIG.TRANSPARENCY_THRESHOLD || (!state.paintWhitePixels && Utils.isWhitePixel(r,g,b))) {
- data[i + 3] = 0; continue;
- }
- const [nr, ng, nb] = Utils.findClosestPaletteColor(r,g,b, state.activeColorPalette);
- data[i] = nr; data[i+1] = ng; data[i+2] = nb;
- data[i+3] = 255;
- totalValidPixels++;
- }
- finalCtx.putImageData(imgData, 0, 0);
-
- state.imageData = {
- ...state.imageData,
- pixels: data,
- width: newWidth,
- height: newHeight,
- totalPixels: totalValidPixels
- };
- state.totalPixels = totalValidPixels;
- state.paintedPixels = 0;
-
- const finalImageBitmap = await createImageBitmap(finalCanvas);
- await overlayManager.setImage(finalImageBitmap);
- overlayManager.enable();
- toggleOverlayBtn.classList.add('active');
- updateStats();
- updateUI("resizeSuccess", "success", { width: newWidth, height: newHeight });
- closeResizeDialog();
- };
-
- resizeContainer.querySelector("#cancelResize").onclick = closeResizeDialog;
-
- resizeOverlay.style.display = "block";
- resizeContainer.style.display = "block";
- _updateResizePreview();
+ })
}
- function closeResizeDialog() {
- document.querySelector(".resize-overlay").style.display = "none";
- document.querySelector(".resize-container").style.display = "none";
- _updateResizePreview = () => {};
+ if (selectPosBtn) {
+ selectPosBtn.addEventListener("click", async () => {
+ if (state.selectingPosition) return
+
+ state.selectingPosition = true
+ state.startPosition = null
+ state.region = null
+ startBtn.disabled = true
+
+ Utils.showAlert(Utils.t("selectPositionAlert"), "info")
+ updateUI("waitingPosition", "default")
+
+ const tempFetch = async (url, options) => {
+ if (
+ typeof url === "string" &&
+ url.includes("https://backend.wplace.live/s0/pixel/") &&
+ options?.method?.toUpperCase() === "POST"
+ ) {
+ try {
+ const response = await originalFetch(url, options)
+ const clonedResponse = response.clone()
+ const data = await clonedResponse.json()
+
+ if (data?.painted === 1) {
+ const regionMatch = url.match(/\/pixel\/(\d+)\/(\d+)/)
+ if (regionMatch && regionMatch.length >= 3) {
+ state.region = {
+ x: Number.parseInt(regionMatch[1]),
+ y: Number.parseInt(regionMatch[2]),
+ }
+ }
+
+ const payload = JSON.parse(options.body)
+ if (payload?.coords && Array.isArray(payload.coords)) {
+ state.startPosition = {
+ x: payload.coords[0],
+ y: payload.coords[1],
+ }
+ state.lastPosition = { x: 0, y: 0 }
+
+ await overlayManager.setPosition(state.startPosition, state.region);
+
+ if (state.imageLoaded) {
+ startBtn.disabled = false
+ }
+
+ window.fetch = originalFetch
+ state.selectingPosition = false
+ updateUI("positionSet", "success")
+ }
+ }
+
+ return response
+ } catch {
+ return originalFetch(url, options)
+ }
+ }
+ return originalFetch(url, options)
+ }
+
+ const originalFetch = window.fetch;
+ window.fetch = tempFetch;
+
+ setTimeout(() => {
+ if (state.selectingPosition) {
+ window.fetch = originalFetch
+ state.selectingPosition = false
+ updateUI("positionTimeout", "error")
+ Utils.showAlert(Utils.t("positionTimeout"), "error")
+ }
+ }, 120000)
+ })
+ }
+
+ async function startPainting() {
+ if (!state.imageLoaded || !state.startPosition || !state.region) {
+ updateUI("missingRequirements", "error")
+ return false
+ }
+ await ensureToken()
+ if (!turnstileToken) return false
+
+ state.running = true
+ state.stopFlag = false
+ startBtn.disabled = true
+ stopBtn.disabled = false
+ uploadBtn.disabled = true
+ selectPosBtn.disabled = true
+ resizeBtn.disabled = true
+ saveBtn.disabled = true
+ toggleOverlayBtn.disabled = true;
+
+ updateUI("startPaintingMsg", "success")
+
+ try {
+ await processImage()
+ return true
+ } catch {
+ updateUI("paintingError", "error")
+ return false
+ } finally {
+ state.running = false
+ stopBtn.disabled = true
+ saveBtn.disabled = false
+
+ if (!state.stopFlag) {
+ startBtn.disabled = true
+ uploadBtn.disabled = false
+ selectPosBtn.disabled = false
+ resizeBtn.disabled = false
+ } else {
+ startBtn.disabled = false
+ }
+ toggleOverlayBtn.disabled = false;
+ }
+ }
+
+ if (startBtn) {
+ startBtn.addEventListener("click", startPainting)
+ }
+
+ if (stopBtn) {
+ stopBtn.addEventListener("click", () => {
+ state.stopFlag = true
+ state.running = false
+ stopBtn.disabled = true
+ updateUI("paintingStopped", "warning")
+
+ if (state.imageLoaded && state.paintedPixels > 0) {
+ Utils.saveProgress()
+ Utils.showAlert(Utils.t("autoSaved"), "success")
+ }
+ })
+ }
+
+ const checkSavedProgress = () => {
+ const savedData = Utils.loadProgress()
+ if (savedData && savedData.state.paintedPixels > 0) {
+ const savedDate = new Date(savedData.timestamp).toLocaleString()
+ const progress = Math.round((savedData.state.paintedPixels / savedData.state.totalPixels) * 100)
+
+ Utils.showAlert(
+ `${Utils.t("savedDataFound")}\n\n` +
+ `Saved: ${savedDate}\n` +
+ `Progress: ${savedData.state.paintedPixels}/${savedData.state.totalPixels} pixels (${progress}%)\n` +
+ `${Utils.t("clickLoadToContinue")}`,
+ "info",
+ )
+ }
+ }
+
+ setTimeout(checkSavedProgress, 1000)
+
+ if (cooldownSlider && cooldownValue) {
+ cooldownSlider.addEventListener("input", (e) => {
+ const threshold = parseInt(e.target.value);
+ state.cooldownChargeThreshold = threshold;
+ cooldownValue.textContent = threshold;
+ saveBotSettings();
+ });
}
loadBotSettings();
+
initializeColorPalette(resizeContainer);
}
- // ... (rest of the script logic like processImage, sendPixelBatch, etc.)
-
- async function processImage() {
+ async function processImage() {
const { width, height, pixels } = state.imageData
const { x: startX, y: startY } = state.startPosition
const { x: regionX, y: regionY } = state.region
@@ -3085,9 +4113,18 @@ window.addEventListener('message', (event) => {
const b = pixels[idx + 2]
const alpha = pixels[idx + 3]
- if (alpha < CONFIG.TRANSPARENCY_THRESHOLD) continue;
+ if (alpha < CONFIG.TRANSPARENCY_THRESHOLD || (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))) {
+ continue;
+ }
- const colorId = findClosestColor([r,g,b], state.availableColors);
+ let targetRgb;
+ if (Utils.isWhitePixel(r, g, b)) {
+ targetRgb = [255, 255, 255];
+ } else {
+ targetRgb = Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette);
+ }
+
+ const colorId = findClosestColor(targetRgb, state.availableColors);
const pixelX = startX + x
const pixelY = startY + y
@@ -3176,36 +4213,85 @@ window.addEventListener('message', (event) => {
}
}
+
+ if (pixelBatch.length > 0 && !state.stopFlag) {
+ const success = await sendPixelBatch(pixelBatch, regionX, regionY)
+ if (success) {
+ pixelBatch.forEach((pixel) => {
+ state.paintedMap[pixel.localY][pixel.localX] = true
+ state.paintedPixels++
+ })
+ state.currentCharges -= pixelBatch.length
+ if (CONFIG.PAINTING_SPEED_ENABLED && state.paintingSpeed > 0 && pixelBatch.length > 0) {
+ const delayPerPixel = 1000 / state.paintingSpeed
+ const totalDelay = Math.max(100, delayPerPixel * pixelBatch.length)
+ await Utils.sleep(totalDelay)
+ }
+ }
+ }
} finally {
- // Cleanup
+ if (window._chargesInterval) clearInterval(window._chargesInterval)
+ window._chargesInterval = null
}
+
+ if (state.stopFlag) {
+ updateUI("paintingStopped", "warning")
+ Utils.saveProgress()
+ } else {
+ updateUI("paintingComplete", "success", { count: state.paintedPixels })
+ state.lastPosition = { x: 0, y: 0 }
+ state.paintedMap = null
+ Utils.clearProgress()
+ overlayManager.clear();
+ const toggleOverlayBtn = document.getElementById('toggleOverlayBtn');
+ if (toggleOverlayBtn) {
+ toggleOverlayBtn.classList.remove('active');
+ toggleOverlayBtn.disabled = true;
+ }
+ }
+
+ updateStats()
}
async function sendPixelBatch(pixelBatch, regionX, regionY) {
- if (!turnstileToken) {
- tokenPromise = new Promise((resolve) => { _resolveToken = resolve });
+ if (!turnstileToken) {
+ tokenPromise = new Promise((resolve) => { _resolveToken = resolve });
+ return "token_error"
+ }
+
+ const coords = new Array(pixelBatch.length * 2)
+ const colors = new Array(pixelBatch.length)
+ for (let i = 0; i < pixelBatch.length; i++) {
+ const pixel = pixelBatch[i]
+ coords[i * 2] = pixel.x
+ coords[i * 2 + 1] = pixel.y
+ colors[i] = pixel.color
+ }
+
+ try {
+ const payload = { coords, colors, t: turnstileToken }
+
+ const res = await fetch(`https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`, {
+ method: "POST",
+ headers: { "Content-Type": "text/plain;charset=UTF-8" },
+ credentials: "include",
+ body: JSON.stringify(payload),
+ })
+
+ if (res.status === 403) {
+ let data = null
+ try { data = await res.json() } catch (_) {}
+ console.error("❌ 403 Forbidden. Turnstile token might be invalid or expired.")
+ turnstileToken = null
+ tokenPromise = new Promise((resolve) => { _resolveToken = resolve })
return "token_error"
}
- const coords = pixelBatch.map(p => [p.x, p.y]).flat();
- const colors = pixelBatch.map(p => p.color);
- try {
- const payload = { coords, colors, t: turnstileToken }
- const res = await fetch(`https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`, {
- method: "POST",
- headers: { "Content-Type": "text/plain;charset=UTF-8" },
- credentials: "include",
- body: JSON.stringify(payload),
- });
- if (res.status === 403) {
- turnstileToken = null;
- return "token_error";
- }
- const data = await res.json();
- return data?.painted === pixelBatch.length;
- } catch (e) {
- console.error("Batch paint request failed:", e);
- return false;
- }
+ const data = await res.json()
+ return data?.painted === pixelBatch.length
+ } catch (e) {
+ console.error("Batch paint request failed:", e)
+ return false
+ }
}
function saveBotSettings() {
@@ -3216,12 +4302,10 @@ window.addEventListener('message', (event) => {
autoCaptchaEnabled: document.getElementById('enableAutoCaptchaToggle')?.checked,
cooldownChargeThreshold: state.cooldownChargeThreshold,
minimized: state.minimized,
- overlayOpacity: state.overlayOpacity,
- overlayShreadEffect: state.overlayShreadEffect,
- overlayFollowPalette: state.overlayFollowPalette,
};
CONFIG.PAINTING_SPEED_ENABLED = settings.paintingSpeedEnabled;
CONFIG.AUTO_CAPTCHA_ENABLED = settings.autoCaptchaEnabled;
+
localStorage.setItem("wplace-bot-settings", JSON.stringify(settings));
} catch (e) {
console.warn("Could not save bot settings:", e);
@@ -3239,30 +4323,23 @@ window.addEventListener('message', (event) => {
state.minimized = settings.minimized ?? false;
CONFIG.PAINTING_SPEED_ENABLED = settings.paintingSpeedEnabled ?? false;
CONFIG.AUTO_CAPTCHA_ENABLED = settings.autoCaptchaEnabled ?? false;
- state.overlayOpacity = settings.overlayOpacity ?? CONFIG.OVERLAY_OPACITY_DEFAULT;
- state.overlayShreadEffect = settings.overlayShreadEffect ?? CONFIG.OVERLAY_SHREAD_EFFECT_DEFAULT;
- state.overlayFollowPalette = settings.overlayFollowPalette ?? CONFIG.OVERLAY_FOLLOW_PALETTE_DEFAULT;
const speedSlider = document.getElementById('speedSlider');
if (speedSlider) speedSlider.value = state.paintingSpeed;
const speedValue = document.getElementById('speedValue');
if (speedValue) speedValue.textContent = `${state.paintingSpeed} px/s`;
+
const enableSpeedToggle = document.getElementById('enableSpeedToggle');
if (enableSpeedToggle) enableSpeedToggle.checked = CONFIG.PAINTING_SPEED_ENABLED;
+
const enableAutoCaptchaToggle = document.getElementById('enableAutoCaptchaToggle');
if (enableAutoCaptchaToggle) enableAutoCaptchaToggle.checked = CONFIG.AUTO_CAPTCHA_ENABLED;
+
const cooldownSlider = document.getElementById('cooldownSlider');
if (cooldownSlider) cooldownSlider.value = state.cooldownChargeThreshold;
const cooldownValue = document.getElementById('cooldownValue');
if (cooldownValue) cooldownValue.textContent = state.cooldownChargeThreshold;
- const overlayShreadEffectToggle = document.getElementById('overlayShreadEffectToggle');
- if (overlayShreadEffectToggle) overlayShreadEffectToggle.checked = state.overlayShreadEffect;
- const overlayFollowPaletteToggle = document.getElementById('overlayFollowPaletteToggle');
- if (overlayFollowPaletteToggle) overlayFollowPaletteToggle.checked = state.overlayFollowPalette;
- const overlayOpacitySlider = document.getElementById('overlayOpacitySlider');
- if (overlayOpacitySlider) overlayOpacitySlider.value = state.overlayOpacity * 100;
- const overlayOpacityValue = document.getElementById('overlayOpacityValue');
- if (overlayOpacityValue) overlayOpacityValue.textContent = `${Math.round(state.overlayOpacity * 100)}%`;
+
} catch (e) {
console.warn("Could not load bot settings:", e);
}
Available Colors (${state.availableColors.length})
+
+ ${colorSwatchesHTML}
+
+