From 2b52ae8df6a510fbdfa7d360baeedb1698d97200 Mon Sep 17 00:00:00 2001 From: MiraclePatrickLumowa Date: Thu, 25 Sep 2025 04:36:45 +0800 Subject: [PATCH] feat: autobuy,pixel art editor and stats refresh enhancement --- Auto-Image.js | 10371 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 10371 insertions(+) create mode 100644 Auto-Image.js diff --git a/Auto-Image.js b/Auto-Image.js new file mode 100644 index 0000000..fa8c943 --- /dev/null +++ b/Auto-Image.js @@ -0,0 +1,10371 @@ +// ==UserScript== +// @name WPlaceBot +// @namespace http://tampermonkey.net/ +// @version 2025-08-08.3 +// @description Bot +// @author Wbot +// @match https://wplace.live/* +// @grant none +// @icon +// ==/UserScript== +localStorage.removeItem("lp"); + +// Fallback translation function for when utils manager isn't loaded +function getText(key, params) { + // Try to get translation from loadedTranslations + try { + if (window.loadedTranslations && window.loadedTranslations[key]) { + let text = window.loadedTranslations[key]; + if (params) { + Object.keys(params).forEach(paramKey => { + text = text.replace(new RegExp(`{{${paramKey}}}`, 'g'), params[paramKey]); + }); + } + return text; + } + + // Try with state.language if available + if (window.state && window.state.language && window.loadedTranslations && window.loadedTranslations[window.state.language] && window.loadedTranslations[window.state.language][key]) { + let text = window.loadedTranslations[window.state.language][key]; + if (params) { + Object.keys(params).forEach(paramKey => { + text = text.replace(new RegExp(`{{${paramKey}}}`, 'g'), params[paramKey]); + }); + } + return text; + } + } catch (error) { + console.warn('Error in getText fallback:', error); + } + + return key; // Fallback to key if no translation found +} + +; (async () => { + // Prevent multiple instances of this script from running + if (window.WPLACE_AUTO_IMAGE_LOADED) { + console.log('%cโš ๏ธ Auto-Image script already loaded, skipping duplicate execution', 'color: #ff9800; font-weight: bold;'); + return; + } + window.WPLACE_AUTO_IMAGE_LOADED = true; + + console.log('%c๐Ÿš€ WPlace AutoBot Auto-Image Starting...', 'color: #00ff41; font-weight: bold; font-size: 16px;'); + + const buyTypes = [ + 'none', + 'max_charges', + 'paint_charges' + ]; + + // CONFIGURATION CONSTANTS + const CONFIG = { + COOLDOWN_DEFAULT: 31000, + TRANSPARENCY_THRESHOLD: 100, + WHITE_THRESHOLD: 250, + LOG_INTERVAL: 10, + PAINTING_SPEED: { + MIN: 1, // Minimum 1 pixel batch size + MAX: 1000, // Maximum 1000 pixels batch size + DEFAULT: 5, // Default 5 pixels batch size + }, + BATCH_MODE: 'normal', // "normal" or "random" - default to normal + RANDOM_BATCH_RANGE: { + MIN: 3, // Random range minimum + MAX: 20, // Random range maximum + }, + PAINTING_SPEED_ENABLED: false, // Off by default + AUTO_CAPTCHA_ENABLED: true, // Turnstile generator enabled by default + TOKEN_SOURCE: 'generator', // "generator", "manual", or "hybrid" - default to generator + COOLDOWN_CHARGE_THRESHOLD: 1, // Default wait threshold + // Desktop Notifications (defaults) + NOTIFICATIONS: { + ENABLED: false, + ON_CHARGES_REACHED: true, + ONLY_WHEN_UNFOCUSED: true, + REPEAT_MINUTES: 5, // repeat reminder while threshold condition holds + }, + OVERLAY: { + OPACITY_DEFAULT: 0.6, + BLUE_MARBLE_DEFAULT: false, + ditheringEnabled: false, + }, // --- START: Color data from colour-converter.js --- + // New color structure with proper ID mapping + COLOR_MAP: { + 0: { id: 1, name: 'Black', rgb: { r: 0, g: 0, b: 0 } }, + 1: { id: 2, name: 'Dark Gray', rgb: { r: 60, g: 60, b: 60 } }, + 2: { id: 3, name: 'Gray', rgb: { r: 120, g: 120, b: 120 } }, + 3: { id: 4, name: 'Light Gray', rgb: { r: 210, g: 210, b: 210 } }, + 4: { id: 5, name: 'White', rgb: { r: 255, g: 255, b: 255 } }, + 5: { id: 6, name: 'Deep Red', rgb: { r: 96, g: 0, b: 24 } }, + 6: { id: 7, name: 'Red', rgb: { r: 237, g: 28, b: 36 } }, + 7: { id: 8, name: 'Orange', rgb: { r: 255, g: 127, b: 39 } }, + 8: { id: 9, name: 'Gold', rgb: { r: 246, g: 170, b: 9 } }, + 9: { id: 10, name: 'Yellow', rgb: { r: 249, g: 221, b: 59 } }, + 10: { id: 11, name: 'Light Yellow', rgb: { r: 255, g: 250, b: 188 } }, + 11: { id: 12, name: 'Dark Green', rgb: { r: 14, g: 185, b: 104 } }, + 12: { id: 13, name: 'Green', rgb: { r: 19, g: 230, b: 123 } }, + 13: { id: 14, name: 'Light Green', rgb: { r: 135, g: 255, b: 94 } }, + 14: { id: 15, name: 'Dark Teal', rgb: { r: 12, g: 129, b: 110 } }, + 15: { id: 16, name: 'Teal', rgb: { r: 16, g: 174, b: 166 } }, + 16: { id: 17, name: 'Light Teal', rgb: { r: 19, g: 225, b: 190 } }, + 17: { id: 20, name: 'Cyan', rgb: { r: 96, g: 247, b: 242 } }, + 18: { id: 44, name: 'Light Cyan', rgb: { r: 187, g: 250, b: 242 } }, + 19: { id: 18, name: 'Dark Blue', rgb: { r: 40, g: 80, b: 158 } }, + 20: { id: 19, name: 'Blue', rgb: { r: 64, g: 147, b: 228 } }, + 21: { id: 21, name: 'Indigo', rgb: { r: 107, g: 80, b: 246 } }, + 22: { id: 22, name: 'Light Indigo', rgb: { r: 153, g: 177, b: 251 } }, + 23: { id: 23, name: 'Dark Purple', rgb: { r: 120, g: 12, b: 153 } }, + 24: { id: 24, name: 'Purple', rgb: { r: 170, g: 56, b: 185 } }, + 25: { id: 25, name: 'Light Purple', rgb: { r: 224, g: 159, b: 249 } }, + 26: { id: 26, name: 'Dark Pink', rgb: { r: 203, g: 0, b: 122 } }, + 27: { id: 27, name: 'Pink', rgb: { r: 236, g: 31, b: 128 } }, + 28: { id: 28, name: 'Light Pink', rgb: { r: 243, g: 141, b: 169 } }, + 29: { id: 29, name: 'Dark Brown', rgb: { r: 104, g: 70, b: 52 } }, + 30: { id: 30, name: 'Brown', rgb: { r: 149, g: 104, b: 42 } }, + 31: { id: 31, name: 'Beige', rgb: { r: 248, g: 178, b: 119 } }, + 32: { id: 52, name: 'Light Beige', rgb: { r: 255, g: 197, b: 165 } }, + 33: { id: 32, name: 'Medium Gray', rgb: { r: 170, g: 170, b: 170 } }, + 34: { id: 33, name: 'Dark Red', rgb: { r: 165, g: 14, b: 30 } }, + 35: { id: 34, name: 'Light Red', rgb: { r: 250, g: 128, b: 114 } }, + 36: { id: 35, name: 'Dark Orange', rgb: { r: 228, g: 92, b: 26 } }, + 37: { id: 37, name: 'Dark Goldenrod', rgb: { r: 156, g: 132, b: 49 } }, + 38: { id: 38, name: 'Goldenrod', rgb: { r: 197, g: 173, b: 49 } }, + 39: { id: 39, name: 'Light Goldenrod', rgb: { r: 232, g: 212, b: 95 } }, + 40: { id: 40, name: 'Dark Olive', rgb: { r: 74, g: 107, b: 58 } }, + 41: { id: 41, name: 'Olive', rgb: { r: 90, g: 148, b: 74 } }, + 42: { id: 42, name: 'Light Olive', rgb: { r: 132, g: 197, b: 115 } }, + 43: { id: 43, name: 'Dark Cyan', rgb: { r: 15, g: 121, b: 159 } }, + 44: { id: 45, name: 'Light Blue', rgb: { r: 125, g: 199, b: 255 } }, + 45: { id: 46, name: 'Dark Indigo', rgb: { r: 77, g: 49, b: 184 } }, + 46: { id: 47, name: 'Dark Slate Blue', rgb: { r: 74, g: 66, b: 132 } }, + 47: { id: 48, name: 'Slate Blue', rgb: { r: 122, g: 113, b: 196 } }, + 48: { id: 49, name: 'Light Slate Blue', rgb: { r: 181, g: 174, b: 241 } }, + 49: { id: 53, name: 'Dark Peach', rgb: { r: 155, g: 82, b: 73 } }, + 50: { id: 54, name: 'Peach', rgb: { r: 209, g: 128, b: 120 } }, + 51: { id: 55, name: 'Light Peach', rgb: { r: 250, g: 182, b: 164 } }, + 52: { id: 50, name: 'Light Brown', rgb: { r: 219, g: 164, b: 99 } }, + 53: { id: 56, name: 'Dark Tan', rgb: { r: 123, g: 99, b: 82 } }, + 54: { id: 57, name: 'Tan', rgb: { r: 156, g: 132, b: 107 } }, + 55: { id: 36, name: 'Light Tan', rgb: { r: 214, g: 181, b: 148 } }, + 56: { id: 51, name: 'Dark Beige', rgb: { r: 209, g: 128, b: 81 } }, + 57: { id: 61, name: 'Dark Stone', rgb: { r: 109, g: 100, b: 63 } }, + 58: { id: 62, name: 'Stone', rgb: { r: 148, g: 140, b: 107 } }, + 59: { id: 63, name: 'Light Stone', rgb: { r: 205, g: 197, b: 158 } }, + 60: { id: 58, name: 'Dark Slate', rgb: { r: 51, g: 57, b: 65 } }, + 61: { id: 59, name: 'Slate', rgb: { r: 109, g: 117, b: 141 } }, + 62: { id: 60, name: 'Light Slate', rgb: { r: 179, g: 185, b: 209 } }, + 63: { id: 0, name: 'Transparent', rgb: null }, + }, // --- END: Color data --- + // Optimized CSS Classes for reuse + CSS_CLASSES: { + BUTTON_PRIMARY: ` + background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); + color: white; border: none; border-radius: 8px; padding: 10px 16px; + cursor: pointer; font-weight: 500; transition: all 0.3s ease; + display: flex; align-items: center; gap: 8px; + `, + BUTTON_SECONDARY: ` + background: rgba(255,255,255,0.1); color: white; + border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; + padding: 8px 12px; cursor: pointer; transition: all 0.3s ease; + `, + MODERN_CARD: ` + background: rgba(255,255,255,0.1); border-radius: 12px; + padding: 18px; border: 1px solid rgba(255,255,255,0.1); + backdrop-filter: blur(5px); + `, + GRADIENT_TEXT: ` + background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); + -webkit-background-clip: text; -webkit-text-fill-color: transparent; + background-clip: text; font-weight: bold; + `, + }, + THEMES: { + 'Classic Autobot': { + primary: '#000000', + secondary: '#111111', + accent: '#222222', + text: '#ffffff', + highlight: '#775ce3', + success: '#00ff00', + error: '#ff0000', + warning: '#ffaa00', + fontFamily: "'Segoe UI', Roboto, sans-serif", + borderRadius: '12px', + borderStyle: 'solid', + borderWidth: '1px', + boxShadow: '0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1)', + backdropFilter: 'blur(10px)', + animations: { + glow: false, + scanline: false, + 'pixel-blink': false, + }, + }, + 'Classic Light': { + primary: '#E0E0E1', + secondary: '#FBFBFB', + accent: '#F3F3F3', + text: '#203C5D', + highlight: '#203C5D', + success: '#28a745', + error: '#dc3545', + warning: '#ffc107', + fontFamily: "'Segoe UI', Roboto, sans-serif", + borderRadius: '12px', + borderStyle: 'solid', + borderWidth: '1px', + boxShadow: '0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.08)', + backdropFilter: 'blur(10px)', + animations: { + glow: false, + scanline: false, + 'pixel-blink': false, + }, + }, + 'Neon Retro': { + primary: '#1a1a2e', + secondary: '#16213e', + accent: '#0f3460', + text: '#00ff41', + highlight: '#ff6b35', + success: '#39ff14', + error: '#ff073a', + warning: '#ffff00', + neon: '#00ffff', + purple: '#bf00ff', + pink: '#ff1493', + fontFamily: "'Press Start 2P', monospace", + borderRadius: '0', + borderStyle: 'solid', + borderWidth: '3px', + boxShadow: '0 0 20px rgba(0, 255, 65, 0.3), inset 0 0 20px rgba(0, 255, 65, 0.1)', + backdropFilter: 'none', + animations: { + glow: true, + scanline: true, + 'pixel-blink': true, + }, + }, + 'Neon Retro Cyan': { + primary: '#1959A1', + secondary: '#3C74AF', + accent: '#538CC0', + text: '#81DCF7', + highlight: '#EA9C00', + success: '#39ff14', + error: '#ff073a', + warning: '#ffff00', + neon: '00ffff', + purple: '#bf00ff', + pink: '#ff1493', + fontFamily: "'Press Start 2P', monospace", + borderRadius: '0', + borderStyle: 'solid', + borderWidth: '3px', + boxShadow: '0 0 20px rgba(234 156 0, 0.3), inset 0 0 20px rgba(234 156 0, 0.1)', + backdropFilter: 'none', + animations: { + glow: true, + scanline: true, + 'pixel-blink': true, + }, + }, + 'Neon Retro Light': { + primary: '#E0E0E1', + secondary: '#FBFBFB', + accent: '#F3F3F3', + text: '#203C5D', + highlight: '#203C5D', + success: '#39ff14', + error: '#ff073a', + warning: '#ffff00', + neon: '#203C5D', + purple: '#bf00ff', + pink: '#ff1493', + fontFamily: "'Press Start 2P', monospace", + borderRadius: '0', + borderStyle: 'solid', + borderWidth: '3px', + boxShadow: '0 0 20px rgba(234 156 0, 0.3), inset 0 0 20px rgba(234 156 0, 0.1)', + backdropFilter: 'none', + animations: { + glow: true, + scanline: true, + 'pixel-blink': true, + }, + }, + 'Acrylic': { + primary: '#00000080', + secondary: '#00000040', + accent: 'rgba(0,0,0,0.75)', + text: '#ffffff', + highlight: '#ffffff', + success: '#00e500', + error: '#e50000', + warning: '#e5e500', + fontFamily: "'Inter', 'Apple Color Emoji'", + borderRadius: '10px', + borderStyle: 'solid', + borderWidth: '0px', + boxShadow: 'none', + backdropFilter: 'blur(20px)', + animations: { + glow: false, + scanline: false, + 'pixel-blink': false, + }, + }, + }, + currentTheme: 'Classic Autobot', + PAINT_UNAVAILABLE: true, + COORDINATE_MODE: 'rows', + COORDINATE_DIRECTION: 'top-left', + COORDINATE_SNAKE: true, + COORDINATE_BLOCK_WIDTH: 6, + COORDINATE_BLOCK_HEIGHT: 2, + autoSwap: true, + autoBuy: buyTypes[2], + autoBuyToggle: false, + maxChargesStopEnable: false, + maxChargesBeforeStop: 1500, + }; + + // Expose CONFIG globally for the utils manager and other modules + window.CONFIG = CONFIG; + + const getCurrentTheme = () => CONFIG.THEMES[CONFIG.currentTheme]; + + const switchTheme = (themeName) => { + if (CONFIG.THEMES[themeName]) { + CONFIG.currentTheme = themeName; + saveThemePreference(); + + // APPLY THEME VARS/CLASS (new) + applyTheme(); + + // Recreate UI (kept for now) + createUI(); + } + }; + + // Add this helper (place it after getCurrentTheme/switchTheme definitions) + function applyTheme() { + const theme = getCurrentTheme(); + console.group('%c๐ŸŽจ Applying Theme in Auto-Image Script', 'color: #8b5cf6; font-weight: bold;'); + console.log(`%c๐ŸŽฏ Target theme: ${CONFIG.currentTheme}`, 'color: #8b5cf6;'); + + // Toggle theme class on documentElement so CSS vars cascade to our UI + document.documentElement.classList.remove( + 'wplace-theme-classic', + 'wplace-theme-classic-light', + 'wplace-theme-acrylic', + 'wplace-theme-neon', + 'wplace-theme-neon-cyan', + 'wplace-theme-neon-light' + ); + + let themeClass = 'wplace-theme-classic'; // default + let themeFileName = 'classic'; // corresponding file name + + if (CONFIG.currentTheme === 'Neon Retro') { + themeClass = 'wplace-theme-neon'; + themeFileName = 'neon'; + } else if (CONFIG.currentTheme === 'Classic Light') { + themeClass = 'wplace-theme-classic-light'; + themeFileName = 'classic-light'; + } else if (CONFIG.currentTheme === 'Neon Retro Cyan') { + themeClass = 'wplace-theme-neon-cyan'; + themeFileName = 'neon-cyan'; + } else if (CONFIG.currentTheme === 'Neon Retro Light') { + themeClass = 'wplace-theme-neon-light'; + themeFileName = 'neon-light'; + } else if (CONFIG.currentTheme === 'Acrylic') { + themeClass = 'wplace-theme-acrylic'; + themeFileName = 'acrylic'; + } + + document.documentElement.classList.add(themeClass); + console.log(`%cโœ… Applied theme class: ${themeClass}`, 'color: #8b5cf6;'); + + // Use extension's applyTheme helper if available (loads from local extension resources) + if (typeof window.applyTheme === 'function') { + console.log(`%c๐Ÿ”ง Using extension's applyTheme() helper for: ${themeFileName}`, 'color: #10b981; font-weight: bold;'); + const success = window.applyTheme(themeFileName); + if (success) { + console.log(`%cโœ… Theme CSS loaded from extension local resources`, 'color: #10b981; font-weight: bold;'); + console.log(` ๐Ÿ“ Source: Extension local file (themes/${themeFileName}.css)`); + console.log(` ๐Ÿš€ Performance: Instant load (no network request)`); + } else { + console.warn(`%cโš ๏ธ Extension theme loading failed, fallback to CSS classes only`, 'color: #f59e0b;'); + console.log(` ๐ŸŽจ Using CSS class: ${themeClass}`); + console.log(` ๐Ÿ“ Note: Theme variables may be limited without CSS file`); + } + } else { + console.log(`%c๐Ÿ“ Extension applyTheme() not available, using CSS class only`, 'color: #f59e0b;'); + console.log(` ๐ŸŽจ Using CSS class: ${themeClass}`); + console.log(` โš ๏ธ Note: Full theme styling requires extension helper function`); + } + + // Also set CSS variables explicitly in case you want runtime overrides + const root = document.documentElement; + const setVar = (k, v) => { + try { + root.style.setProperty(k, v); + } catch { } + }; + + setVar('--wplace-primary', theme.primary); + setVar('--wplace-secondary', theme.secondary); + setVar('--wplace-accent', theme.accent); + setVar('--wplace-text', theme.text); + setVar('--wplace-highlight', theme.highlight); + setVar('--wplace-success', theme.success); + setVar('--wplace-error', theme.error); + setVar('--wplace-warning', theme.warning); + + // Typography + look + setVar('--wplace-font', theme.fontFamily || "'Segoe UI', Roboto, sans-serif"); + setVar('--wplace-radius', '' + (theme.borderRadius || '12px')); + setVar('--wplace-border-style', '' + (theme.borderStyle || 'solid')); + setVar('--wplace-border-width', '' + (theme.borderWidth || '1px')); + setVar('--wplace-backdrop', '' + (theme.backdropFilter || 'blur(10px)')); + setVar('--wplace-border-color', 'rgba(255,255,255,0.1)'); + + console.log(`%c๐ŸŽจ Theme application complete`, 'color: #8b5cf6; font-weight: bold;'); + console.groupEnd(); + } + + const saveThemePreference = () => { + try { + localStorage.setItem('wplace-theme', CONFIG.currentTheme); + } catch (e) { + console.warn('Could not save theme preference:', e); + } + }; + + const loadThemePreference = () => { + try { + const saved = localStorage.getItem('wplace-theme'); + if (saved && CONFIG.THEMES[saved]) { + CONFIG.currentTheme = saved; + } + } catch (e) { + console.warn('Could not load theme preference:', e); + } + }; + + // Dynamically loaded translations + window.loadedTranslations = {}; + + // Available languages + const AVAILABLE_LANGUAGES = [ + 'en', + 'ru', + 'pt', + 'vi', + 'fr', + 'id', + 'tr', + 'zh-CN', + 'zh-TW', + 'ja', + 'ko', + 'uk', + ]; + + // Function to load translations from JSON file with retry mechanism + const loadTranslations = async (language, retryCount = 0) => { + if (window.loadedTranslations[language]) { + return window.loadedTranslations[language]; + } + + console.group(`%c๐ŸŒ Loading ${language.toUpperCase()} translations`, 'color: #06b6d4; font-weight: bold;'); + + // First try: Check if extension has loaded local resources + if (window.AUTOBOT_LANGUAGES && Object.keys(window.AUTOBOT_LANGUAGES).length > 0) { + console.log(`%c๐Ÿ” Checking extension local resources...`, 'color: #06b6d4;'); + + const langFile = language + '.json'; + if (window.AUTOBOT_LANGUAGES[langFile]) { + const translations = window.AUTOBOT_LANGUAGES[langFile]; + + // Validate that translations is an object with keys + if ( + typeof translations === 'object' && + translations !== null && + Object.keys(translations).length > 0 + ) { + window.loadedTranslations[language] = translations; + console.log(`%cโœ… Loaded ${language} translations from EXTENSION LOCAL FILES`, 'color: #10b981; font-weight: bold;'); + console.log(` ๐Ÿ“ Source: Extension local storage (chrome-extension://)`); + console.log(` ๐Ÿ“ Keys count: ${Object.keys(translations).length}`); + console.log(` ๐Ÿš€ Performance: Instant load (no network request)`); + console.groupEnd(); + return translations; + } + } else { + console.log(`%c๐Ÿ“ ${langFile} not found in extension resources`, 'color: #f59e0b;'); + console.log(` ๐Ÿ“‹ Available in extension: ${Object.keys(window.AUTOBOT_LANGUAGES).join(', ')}`); + } + } else { + console.log(`%c๐Ÿ“ No extension local resources available`, 'color: #f59e0b;'); + console.log(` ๐Ÿ” window.AUTOBOT_LANGUAGES: ${typeof window.AUTOBOT_LANGUAGES}`); + } + + // Second try: Use helper function if available + if (typeof window.getLanguage === 'function') { + console.log(`%c๐Ÿ”ง Trying extension getLanguage() helper...`, 'color: #06b6d4;'); + try { + const translations = window.getLanguage(language); + if ( + typeof translations === 'object' && + translations !== null && + Object.keys(translations).length > 0 + ) { + window.loadedTranslations[language] = translations; + console.log(`%cโœ… Loaded ${language} translations via extension helper`, 'color: #10b981; font-weight: bold;'); + console.log(` ๐Ÿ“ Source: Extension getLanguage() function`); + console.log(` ๐Ÿ“ Keys count: ${Object.keys(translations).length}`); + console.groupEnd(); + return translations; + } + } catch (error) { + console.warn(`%cโš ๏ธ Extension helper failed:`, 'color: #f59e0b;', error); + } + } + + // Fallback: Load from CDN (original behavior) + console.log(`%c๐ŸŒ Falling back to CDN loading...`, 'color: #8b5cf6;'); + const url = `https://wplace-autobot.github.io/WPlace-AutoBOT/main/lang/${language}.json`; + const maxRetries = 3; + const baseDelay = 1000; // 1 second + + try { + if (retryCount === 0) { + console.log(`๐Ÿ”„ Loading ${language} translations from CDN...`); + } else { + console.log( + `๐Ÿ”„ Retrying ${language} translations (attempt ${retryCount + 1}/${maxRetries + 1})...` + ); + } + + const response = await fetch(url); + if (response.ok) { + const translations = await response.json(); + + // Validate that translations is an object with keys + if ( + typeof translations === 'object' && + translations !== null && + Object.keys(translations).length > 0 + ) { + window.loadedTranslations[language] = translations; + console.log( + `%c๐Ÿ“š Loaded ${language} translations from CDN (${Object.keys(translations).length} keys)`, 'color: #f59e0b; font-weight: bold;' + ); + console.log(` ๐Ÿ“ Source: CDN (wplace-autobot.github.io)`); + console.log(` ๐ŸŒ URL: ${url}`); + console.log(` โš ๏ธ Performance: Network request required`); + console.groupEnd(); + return translations; + } else { + console.warn(`โŒ Invalid translation format for ${language}`); + throw new Error('Invalid translation format'); + } + } else { + console.warn( + `โŒ CDN returned HTTP ${response.status}: ${response.statusText} for ${language} translations` + ); + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + } catch (error) { + console.error( + `โŒ Failed to load ${language} translations from CDN (attempt ${retryCount + 1}):`, + error + ); + + // Retry with exponential backoff + if (retryCount < maxRetries) { + const delay = baseDelay * Math.pow(2, retryCount); + console.log(`โณ Retrying in ${delay}ms...`); + await new Promise((resolve) => setTimeout(resolve, delay)); + console.groupEnd(); + return loadTranslations(language, retryCount + 1); + } + } + + console.error(`%c๐Ÿ’ฅ All translation loading methods failed for ${language}`, 'color: #ef4444; font-weight: bold;'); + console.groupEnd(); + return null; + }; + + const loadLanguagePreference = async () => { + const savedLanguage = localStorage.getItem('wplace_language'); + const browserLocale = navigator.language; + const browserLanguage = browserLocale.split('-')[0]; + + let selectedLanguage = 'en'; // Default fallback + + try { + // Check if we have the saved language available + if (savedLanguage && AVAILABLE_LANGUAGES.includes(savedLanguage)) { + selectedLanguage = savedLanguage; + console.log(`๐Ÿ”„ Using saved language preference: ${selectedLanguage}`); + } + // Try full locale match (e.g. "zh-CN", "zh-TW" etc) + else if (AVAILABLE_LANGUAGES.includes(browserLocale)) { + selectedLanguage = browserLocale; + localStorage.setItem('wplace_language', browserLocale); + console.log(`๐Ÿ”„ Using browser locale: ${selectedLanguage}`); + } + // Try base language match (e.g. "en" for "en-US" or "en-GB" etc) + else if (AVAILABLE_LANGUAGES.includes(browserLanguage)) { + selectedLanguage = browserLanguage; + localStorage.setItem('wplace_language', browserLanguage); + console.log(`๐Ÿ”„ Using browser language: ${selectedLanguage}`); + } + // Use English as fallback + else { + console.log(`๐Ÿ”„ No matching language found, using English fallback`); + } + + // Set the language in state first + state.language = selectedLanguage; + + // Only load translations if not already loaded and not English (which should already be loaded) + if (selectedLanguage !== 'en' && !window.loadedTranslations[selectedLanguage]) { + const loaded = await loadTranslations(selectedLanguage); + if (!loaded) { + console.warn( + `โš ๏ธ Failed to load ${selectedLanguage} translations, falling back to English` + ); + state.language = 'en'; + localStorage.setItem('wplace_language', 'en'); + } + } + } catch (error) { + console.error(`โŒ Error in loadLanguagePreference:`, error); + state.language = 'en'; // Always ensure we have a valid language + } + }; + + // Simple user notification function for critical issues + const showTranslationWarning = (message) => { + try { + // Create a simple temporary notification banner + const warning = document.createElement('div'); + warning.style.cssText = ` + position: fixed; top: 10px; right: 10px; z-index: 10001; + background: rgba(255, 193, 7, 0.95); color: #212529; padding: 12px 16px; + border-radius: 8px; font-size: 14px; font-weight: 500; + box-shadow: 0 4px 12px rgba(0,0,0,0.3); border: 1px solid rgba(255, 193, 7, 0.8); + max-width: 300px; word-wrap: break-word; + `; + warning.textContent = message; + document.body.appendChild(warning); + + // Auto-remove after 8 seconds + setTimeout(() => { + if (warning.parentNode) { + warning.remove(); + } + }, 8000); + } catch (e) { + // If DOM manipulation fails, just log + console.warn('Failed to show translation warning UI:', e); + } + }; + + // Initialize translations function + const initializeTranslations = async () => { + try { + console.log('๐ŸŒ Initializing translation system...'); + + // Always ensure English is loaded as fallback first + if (!window.loadedTranslations['en']) { + const englishLoaded = await loadTranslations('en'); + if (!englishLoaded) { + console.warn('โš ๏ธ Failed to load English translations from CDN, using fallback'); + showTranslationWarning('โš ๏ธ Translation loading failed, using basic fallbacks'); + } + } + + // Then load user's language preference + await loadLanguagePreference(); + + console.log(`โœ… Translation system initialized. Active language: ${state.language}`); + } catch (error) { + console.error('โŒ Translation initialization failed:', error); + // Ensure state has a valid language even if loading fails + if (!state.language) { + state.language = 'en'; + } + console.warn('โš ๏ธ Using fallback translations due to initialization failure'); + showTranslationWarning('โš ๏ธ Translation system error, using basic English'); + } + }; + + // Emergency fallback TEXT (minimal) + const FALLBACK_TEXT = { + en: { + title: 'WPlace Auto-Image', + toggleOverlay: 'Toggle Overlay', + scanColors: 'Scan Colors', + uploadImage: 'Upload Image', + resizeImage: 'Resize Image', + selectPosition: 'Select Position', + startPainting: 'Start Painting', + stopPainting: 'Stop Painting', + progress: 'Progress', + pixels: 'Pixels', + charges: 'Charges', + batchSize: 'Batch Size', + cooldownSettings: 'Cooldown Settings', + waitCharges: 'Wait for Charges', + settings: 'Settings', + showStats: 'Show Statistics', + compactMode: 'Compact Mode', + minimize: 'Minimize', + tokenCapturedSuccess: 'Token captured successfully', + turnstileInstructions: 'Complete the verification', + hideTurnstileBtn: 'Hide', + notificationsNotSupported: 'Notifications not supported', + chargesReadyMessage: 'Charges are ready', + chargesReadyNotification: 'WPlace AutoBot', + initMessage: "Click 'Upload Image' to begin", + }, + }; + + // Safe translation function with multiple fallback levels + const getText = (key, replacements = {}) => { + // Try current language first + let text = window.loadedTranslations[state.language]?.[key]; + + // Fallback to English translations + if (!text && state.language !== 'en') { + text = window.loadedTranslations['en']?.[key]; + } + + // Fallback to hardcoded English + if (!text) { + text = FALLBACK_TEXT['en']?.[key]; + } + + // Last resort - return the key itself + if (!text) { + console.warn(`โš ๏ธ Missing translation for key: ${key}`); + return key; + } + + // Handle string replacements like {count}, {time}, etc. + return Object.entries(replacements).reduce((result, [placeholder, value]) => { + return result.replace(new RegExp(`\\{${placeholder}\\}`, 'g'), value); + }, text); + }; + + // UNIFIED ACCOUNT MANAGER + class AccountManager { + constructor() { + this.accounts = []; + this.currentIndex = 0; + } + + // Load accounts from storage + async loadAccounts() { + try { + // Get tokens from localStorage + const tokens = JSON.parse(localStorage.getItem("accounts")) || []; + + // Get account info from storage + const infoAccountsResult = await new Promise((resolve) => { + if (typeof chrome !== 'undefined' && chrome.storage) { + chrome.storage.local.get('infoAccounts', (result) => { + resolve(result.infoAccounts || []); + }); + } else { + // Fallback for when chrome storage isn't available + resolve([]); + } + }); + + console.log(`๐Ÿ“ฅ [ACCOUNT MANAGER] Loading ${tokens.length} accounts`); + + this.accounts = tokens.map((token, index) => { + const info = infoAccountsResult.find(acc => acc.token === token); + return { + token, + displayName: info?.displayName || info?.name || `Account ${index + 1}`, + ID: info?.ID || null, + Charges: info?.Charges || 0, + Max: info?.Max || 0, + Droplets: info?.Droplets || 0, + isCurrent: info?.isCurrent || false, + lastUsed: info?.lastUsed || null, + lastImported: info?.lastImported || null + }; + }); + + // Find current account index + this.currentIndex = this.accounts.findIndex(acc => acc.isCurrent); + if (this.currentIndex === -1) this.currentIndex = 0; + + console.log(`โœ… [ACCOUNT MANAGER] Loaded ${this.accounts.length} accounts, current index: ${this.currentIndex}`); + console.log(`๐ŸŽฏ [ACCOUNT MANAGER] Current account: ${this.getCurrentAccount()?.displayName || 'None'}`); + + // Auto-refresh account statuses after loading + if (this.accounts.length > 0) { + console.log('๐Ÿ”„ [ACCOUNT MANAGER] Auto-refreshing account statuses...'); + // Use setTimeout to avoid blocking the load operation + setTimeout(async () => { + try { + await fetchAllAccountDetails(); + console.log('โœ… [ACCOUNT MANAGER] Auto-refresh completed'); + } catch (error) { + console.warn('โš ๏ธ [ACCOUNT MANAGER] Auto-refresh failed:', error); + } + }, 100); + } + + return this.accounts; + } catch (error) { + console.error('โŒ [ACCOUNT MANAGER] Error loading accounts:', error); + this.accounts = []; + this.currentIndex = 0; + return []; + } + } + + // Simple linear switching + switchToNext() { + if (this.accounts.length === 0) return null; + + const previousIndex = this.currentIndex; + this.currentIndex = (this.currentIndex + 1) % this.accounts.length; + + console.log(`๐Ÿ”„ [ACCOUNT MANAGER] Switching: ${previousIndex} โ†’ ${this.currentIndex}`); + console.log(`๐ŸŽฏ [ACCOUNT MANAGER] Target: ${this.accounts[this.currentIndex].displayName}`); + + // Update current flags + this.accounts.forEach((acc, idx) => { + acc.isCurrent = idx === this.currentIndex; + }); + + return this.accounts[this.currentIndex]; + } + + getCurrentAccount() { + return this.accounts[this.currentIndex] || null; + } + + getAccountByIndex(index) { + return this.accounts[index] || null; + } + + updateAccountData(tokenOrData, dataObject = null) { + let accountData; + let targetAccount; + + if (dataObject !== null) { + // Called with (token, dataObject) format + const token = tokenOrData; + accountData = dataObject; + targetAccount = this.accounts.find(acc => acc.token === token); + if (!targetAccount) { + console.warn(`โš ๏ธ [ACCOUNT MANAGER] Account with token not found for update`); + return; + } + } else { + // Called with (dataObject) format - update current account + accountData = tokenOrData; + targetAccount = this.getCurrentAccount(); + } + + if (targetAccount && accountData) { + // Update all provided properties + if (accountData.charges !== undefined || accountData.Charges !== undefined) { + targetAccount.Charges = Math.floor(accountData.charges || accountData.Charges || 0); + } + if (accountData.max !== undefined || accountData.Max !== undefined) { + targetAccount.Max = Math.floor(accountData.max || accountData.Max || 0); + } + if (accountData.droplets !== undefined || accountData.Droplets !== undefined) { + targetAccount.Droplets = Math.floor(accountData.droplets || accountData.Droplets || 0); + } + if (accountData.id !== undefined || accountData.ID !== undefined) { + targetAccount.ID = accountData.id || accountData.ID || targetAccount.ID; + } + if (accountData.displayName !== undefined) { + targetAccount.displayName = accountData.displayName; + } + if (accountData.isCurrent !== undefined) { + // Clear isCurrent from all accounts first, then set for target + this.accounts.forEach(acc => acc.isCurrent = false); + targetAccount.isCurrent = accountData.isCurrent; + } + if (accountData.cooldown !== undefined) { + targetAccount.cooldown = accountData.cooldown; + } + + console.log(`๐Ÿ“Š [ACCOUNT MANAGER] Updated ${targetAccount.displayName}: โšก${targetAccount.Charges}/${targetAccount.Max} ๐Ÿ’ง${targetAccount.Droplets}${targetAccount.isCurrent ? ' (CURRENT)' : ''}`); + } + } + + getAccountCount() { + return this.accounts.length; + } + + getAllAccounts() { + return [...this.accounts]; // Return copy to prevent direct mutation + } + + setCurrentIndex(index) { + if (index >= 0 && index < this.accounts.length) { + this.currentIndex = index; + console.log(`๐Ÿ”„ [ACCOUNT MANAGER] Current index set to: ${index}`); + } else { + console.warn(`โš ๏ธ [ACCOUNT MANAGER] Invalid index ${index}, keeping current: ${this.currentIndex}`); + } + } + + getNextAccount() { + if (this.accounts.length === 0) return null; + const nextIndex = (this.currentIndex + 1) % this.accounts.length; + return this.accounts[nextIndex]; + } + } + + // Create global account manager instance + const accountManager = new AccountManager(); + + // GLOBAL STATE + const state = { + running: false, + imageLoaded: false, + processing: false, + totalPixels: 0, + paintedPixels: 0, + preFilteringDone: false, // Track if pre-filtering detection has been done this session + progressResetDone: false, // Track if progress reset has been done this save file session + availableColors: [], + activeColorPalette: [], // User-selected colors for conversion + paintWhitePixels: true, // Default to ON + fullChargeData: null, + fullChargeInterval: null, + paintTransparentPixels: false, // Default to OFF + displayCharges: 0, + preciseCurrentCharges: 0, + maxCharges: 1, // Default max charges + cooldown: CONFIG.COOLDOWN_DEFAULT, + imageData: null, + stopFlag: false, + colorsChecked: false, + startPosition: null, + selectingPosition: false, + region: null, + minimized: false, + lastPosition: { x: 0, y: 0 }, + lastPaintedPosition: { x: 0, y: 0 }, // Track last successfully painted coordinate + estimatedTime: 0, + language: 'en', + paintingSpeed: CONFIG.PAINTING_SPEED.DEFAULT, // pixels batch size + batchMode: CONFIG.BATCH_MODE, // "normal" or "random" + randomBatchMin: CONFIG.RANDOM_BATCH_RANGE.MIN, // Random range minimum + randomBatchMax: CONFIG.RANDOM_BATCH_RANGE.MAX, // Random range maximum + cooldownChargeThreshold: CONFIG.COOLDOWN_CHARGE_THRESHOLD, + chargesThresholdInterval: null, + tokenSource: CONFIG.TOKEN_SOURCE, // "generator" or "manual" + initialSetupComplete: false, // Track if initial startup setup is complete (only happens once) + overlayOpacity: CONFIG.OVERLAY.OPACITY_DEFAULT, + blueMarbleEnabled: CONFIG.OVERLAY.BLUE_MARBLE_DEFAULT, + ditheringEnabled: false, + // Advanced color matching settings + colorMatchingAlgorithm: 'lab', + enableChromaPenalty: true, + chromaPenaltyWeight: 0.15, + customTransparencyThreshold: CONFIG.TRANSPARENCY_THRESHOLD, + customWhiteThreshold: CONFIG.WHITE_THRESHOLD, + resizeSettings: null, + originalImage: null, + resizeIgnoreMask: null, + paintUnavailablePixels: CONFIG.PAINT_UNAVAILABLE, + // Coordinate generation settings + coordinateMode: CONFIG.COORDINATE_MODE, + coordinateDirection: CONFIG.COORDINATE_DIRECTION, + coordinateSnake: CONFIG.COORDINATE_SNAKE, + blockWidth: CONFIG.COORDINATE_BLOCK_WIDTH, + blockHeight: CONFIG.COORDINATE_BLOCK_HEIGHT, + notificationsEnabled: CONFIG.NOTIFICATIONS.ENABLED, + notifyOnChargesReached: CONFIG.NOTIFICATIONS.ON_CHARGES_REACHED, + notifyOnlyWhenUnfocused: CONFIG.NOTIFICATIONS.ONLY_WHEN_UNFOCUSED, + notificationIntervalMinutes: CONFIG.NOTIFICATIONS.REPEAT_MINUTES, + _lastChargesNotifyAt: 0, + _lastChargesBelow: true, + // Smart save tracking + _lastSavePixelCount: 0, + _lastSaveTime: 0, + _saveInProgress: false, + paintedMap: null, + accountIndex: 0, // Keep for backward compatibility with existing logic + // Legacy state removed - now using accountManager instead + isFetchingAllAccounts: false, + }; + + // Expose state globally for the utils manager and other modules + window.state = state; + + let _updateResizePreview = () => { }; + let _resizeDialogCleanup = null; + + // --- OVERLAY UPDATE: Optimized OverlayManager class with performance improvements --- + // OverlayManager class extracted to overlay-manager.js module + + // Overlay management is now handled by the OverlayManager module + // Check for overlay manager availability + if (!window.WPlaceOverlayManager) { + console.error('โŒ WPlaceOverlayManager not available - please ensure overlay-manager.js is loaded first'); + throw new Error('OverlayManager dependency not found'); + } + + // Ensure we only have ONE overlay manager instance globally + let overlayManager; + if (!window.autoImageOverlayManager) { + overlayManager = new window.WPlaceOverlayManager(); + window.autoImageOverlayManager = overlayManager; + console.log('๐ŸŽฏ Created NEW overlay manager instance'); + } else { + overlayManager = window.autoImageOverlayManager; + console.log('๐ŸŽฏ Using EXISTING overlay manager instance'); + } + + // Token management is now handled by the TokenManager module + // Global references for backward compatibility + if (!window.WPlaceTokenManager) { + console.error('โŒ WPlaceTokenManager not available - please ensure token-manager.js is loaded first'); + throw new Error('TokenManager dependency not found'); + } + + const tokenManager = window.WPlaceTokenManager; + const setTurnstileToken = (token) => tokenManager.setTurnstileToken(token); + const isTokenValid = () => tokenManager.isTokenValid(); + const invalidateToken = () => tokenManager.invalidateToken(); + const ensureToken = (forceRefresh = false) => tokenManager.ensureToken(forceRefresh); + + // Getter for the current token value + const getTurnstileToken = () => tokenManager.turnstileToken; + + // Token promise management + const createTokenPromise = () => { + tokenManager.tokenPromise = new Promise((resolve) => { + tokenManager._resolveToken = resolve; + }); + }; + + // Create global image processor instance for utility functions + if (!window.WPlaceImageProcessor) { + console.error('โŒ WPlaceImageProcessor not available - please ensure image-processor.js is loaded first'); + throw new Error('ImageProcessor dependency not found'); + } + + const globalImageProcessor = new window.WPlaceImageProcessor(); + + // Keep these constants for compatibility with other parts of the script + let retryCount = 0; + const MAX_RETRIES = 10; + const MAX_BATCH_RETRIES = 10; // Maximum attempts for batch sending + + function inject(callback) { + const script = document.createElement('script'); + script.textContent = `(${callback})();`; + document.documentElement?.appendChild(script); + script.remove(); + } + + inject(() => { + const fetchedBlobQueue = new Map(); + + window.addEventListener('message', (event) => { + const { source, blobID, blobData } = event.data; + if (source === 'auto-image-overlay' && blobID && blobData) { + const callback = fetchedBlobQueue.get(blobID); + if (typeof callback === 'function') { + callback(blobData); + } + fetchedBlobQueue.delete(blobID); + } + }); + + const originalFetch = window.fetch; + // Setup fetch interceptions + + window.fetch = async function (...args) { + const response = await originalFetch.apply(this, args); + const url = args[0] instanceof Request ? args[0].url : args[0]; + + // TILE REQUEST logging removed to reduce console spam + + if (typeof url === 'string') { + if (url.includes('https://backend.wplace.live/s0/pixel/')) { + try { + const payload = JSON.parse(args[1].body); + if (payload.t) { + console.log( + `๐Ÿ”โœ… Turnstile Token Captured - Type: ${typeof payload.t}, Value: ${payload.t + ? typeof payload.t === 'string' + ? payload.t.length > 50 + ? payload.t.substring(0, 50) + '...' + : payload.t + : JSON.stringify(payload.t) + : 'null/undefined' + }, Length: ${payload.t?.length || 0}` + ); + window.postMessage({ source: 'turnstile-capture', token: payload.t }, '*'); + } + } catch (_) { + /* ignore */ + } + } + + const contentType = response.headers.get('content-type') || ''; + if (contentType.includes('image/png') && url.includes('.png')) { + const cloned = response.clone(); + return new Promise(async (resolve) => { + const blobUUID = crypto.randomUUID(); + const originalBlob = await cloned.blob(); + + fetchedBlobQueue.set(blobUUID, (processedBlob) => { + resolve( + new Response(processedBlob, { + headers: cloned.headers, + status: cloned.status, + statusText: cloned.statusText, + }) + ); + }); + + window.postMessage( + { + source: 'auto-image-tile', + endpoint: url, + blobID: blobUUID, + blobData: originalBlob, + }, + '*' + ); + }); + } + } + + return response; + }; + }); + + window.addEventListener('message', (event) => { + const { source, endpoint, blobID, blobData } = event.data; + + if (source === 'auto-image-tile' && endpoint && blobID && blobData) { + overlayManager.processAndRespondToTileRequest(event.data); + } + + // Token capture is now handled by TokenManager module + // No need to handle 'turnstile-capture' events here + }); + + async function detectLanguage() { + try { + const response = await fetch('https://backend.wplace.live/me', { + credentials: 'include', + }); + const data = await response.json(); + state.language = data.language === 'pt' ? 'pt' : 'en'; + } catch { + state.language = navigator.language.startsWith('pt') ? 'pt' : 'en'; + } + } + + // UTILITY FUNCTIONS WRAPPER - Uses WPlaceUtilsManager for modular functionality + const Utils = { + // Basic utilities + sleep: (ms) => window.globalUtilsManager ? window.globalUtilsManager.sleep(ms) : new Promise(r => setTimeout(r, ms)), + dynamicSleep: (tickAndGetRemainingMs) => window.globalUtilsManager ? window.globalUtilsManager.dynamicSleep(tickAndGetRemainingMs) : Promise.resolve(), + waitForSelector: (selector, interval, timeout) => window.globalUtilsManager ? window.globalUtilsManager.waitForSelector(selector, interval, timeout) : Promise.resolve(null), + msToTimeText: (ms) => window.globalUtilsManager ? window.globalUtilsManager.msToTimeText(ms) : `${Math.ceil(ms / 1000)}s`, + createScrollToAdjust: (element, updateCallback, min, max, step) => window.globalUtilsManager ? window.globalUtilsManager.createScrollToAdjust(element, updateCallback, min, max, step) : () => { }, + + // Tile calculation + calculateTileRange: (startRegionX, startRegionY, startPixelX, startPixelY, width, height, tileSize) => + window.globalUtilsManager ? window.globalUtilsManager.calculateTileRange(startRegionX, startRegionY, startPixelX, startPixelY, width, height, tileSize) : {}, + + // Token management + loadTurnstile: () => window.globalUtilsManager ? window.globalUtilsManager.loadTurnstile() : Promise.resolve(), + ensureTurnstileContainer: () => window.globalUtilsManager ? window.globalUtilsManager.ensureTurnstileContainer() : Promise.resolve(), + ensureTurnstileOverlayContainer: () => window.globalUtilsManager ? window.globalUtilsManager.ensureTurnstileOverlayContainer() : Promise.resolve(), + executeTurnstile: (sitekey, action) => window.globalUtilsManager ? window.globalUtilsManager.executeTurnstile(sitekey, action) : Promise.resolve(null), + createTurnstileWidget: (sitekey, action) => window.globalUtilsManager ? window.globalUtilsManager.createTurnstileWidget(sitekey, action) : Promise.resolve(), + createTurnstileWidgetInteractive: (sitekey, action) => window.globalUtilsManager ? window.globalUtilsManager.createTurnstileWidgetInteractive(sitekey, action) : Promise.resolve(), + cleanupTurnstile: () => window.globalUtilsManager ? window.globalUtilsManager.cleanupTurnstile() : Promise.resolve(), + obtainSitekeyAndToken: (fallback) => window.globalUtilsManager ? window.globalUtilsManager.obtainSitekeyAndToken(fallback) : Promise.resolve(fallback), + + // DOM utilities + createElement: (tag, props, children) => window.globalUtilsManager ? window.globalUtilsManager.createElement(tag, props, children) : document.createElement(tag), + createButton: (id, text, icon, onClick, style) => { + if (window.globalUtilsManager) { + return window.globalUtilsManager.createButton(id, text, icon, onClick, style); + } + const btn = document.createElement('button'); + btn.id = id; + btn.innerHTML = `${icon ? `` : ''}${text}`; + if (onClick) btn.addEventListener('click', onClick); + return btn; + }, + + // Translation with fallback + t: (key, params) => { + if (window.globalUtilsManager) { + return window.globalUtilsManager.t(key, params); + } + return getText(key, params); + }, + showAlert: (message, type) => { + if (window.globalUtilsManager) { + window.globalUtilsManager.showAlert(message, type); + } else { + console.log(`Alert [${type}]: ${message}`); + } + }, + + hideAlert: () => { + // Remove existing alerts immediately with safety checks + const alerts = document.querySelectorAll('.wplace-alert-base'); + alerts.forEach(alert => { + try { + if (alert && alert.parentNode) { + alert.parentNode.removeChild(alert); + } + } catch (error) { + // Ignore removeChild errors if element was already removed + console.debug('Alert already removed:', error); + } + }); + }, + + // Color utilities + colorDistance: (a, b) => window.globalUtilsManager ? window.globalUtilsManager.colorDistance(a, b) : Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2) + Math.pow(a[2] - b[2], 2)), + findClosestPaletteColor: (r, g, b, palette) => window.globalUtilsManager ? window.globalUtilsManager.findClosestPaletteColor(r, g, b, palette) : [r, g, b], + isWhitePixel: (r, g, b) => window.globalUtilsManager ? window.globalUtilsManager.isWhitePixel(r, g, b) : (r > 240 && g > 240 && b > 240), + resolveColor: (targetRgb, availableColors, exactMatch) => window.globalUtilsManager ? window.globalUtilsManager.resolveColor(targetRgb, availableColors, exactMatch) : targetRgb, + + // CRITICAL FUNCTIONS - Direct implementations to ensure they work + createImageUploader: () => { + return new Promise((resolve, reject) => { + const input = document.createElement('input'); + input.type = 'file'; + input.accept = 'image/*'; + input.onchange = (e) => { + const file = e.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = () => resolve(reader.result); + reader.onerror = () => reject(new Error('File reading error')); + reader.readAsDataURL(file); + } else { + reject(new Error('No file selected')); + } + }; + input.click(); + }); + }, + + createFileUploader: () => { + return new Promise((resolve, reject) => { + const input = document.createElement('input'); + input.type = 'file'; + input.accept = '.json'; + input.onchange = (e) => { + const file = e.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = () => { + try { + const data = JSON.parse(reader.result); + resolve(data); + } catch (error) { + reject(new Error('Invalid JSON file')); + } + }; + reader.onerror = () => reject(new Error('File reading error')); + reader.readAsText(file); + } else { + reject(new Error('No file selected')); + } + }; + input.click(); + }); + }, + + createFileDownloader: (data, filename) => { + const blob = new Blob([data], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = filename; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + }, + + loadProgress: () => { + try { + const saved = localStorage.getItem('wplace-bot-progress'); + if (!saved) return null; + return JSON.parse(saved); + } catch (error) { + console.error('Error loading progress:', error); + return null; + } + }, + + saveProgress: () => { + try { + // Use utils manager to build proper save structure like old version + const data = window.globalUtilsManager ? + window.globalUtilsManager.buildProgressData() : + { + timestamp: Date.now(), + version: '2.2', + state: { + totalPixels: window.state.totalPixels, + paintedPixels: window.state.paintedPixels, + lastPosition: window.state.lastPosition, + startPosition: window.state.startPosition, + region: window.state.region, + imageLoaded: window.state.imageLoaded, + colorsChecked: window.state.colorsChecked, + coordinateMode: window.state.coordinateMode, + coordinateDirection: window.state.coordinateDirection, + coordinateSnake: window.state.coordinateSnake, + blockWidth: window.state.blockWidth, + blockHeight: window.state.blockHeight, + availableColors: window.state.availableColors, + }, + imageData: window.state.imageData ? { + width: window.state.imageData.width, + height: window.state.imageData.height, + pixels: Array.from(window.state.imageData.pixels), + totalPixels: window.state.imageData.totalPixels, + } : null, + paintedMapPacked: window.globalUtilsManager ? + window.globalUtilsManager.buildPaintedMapPacked() : null + }; + + localStorage.setItem('wplace-bot-progress', JSON.stringify(data)); + return true; + } catch (error) { + console.error('Error saving progress:', error); + return false; + } + }, + + clearProgress: () => { + try { + localStorage.removeItem('wplace-bot-progress'); + if (window.state) { + window.state.paintedMap = null; + window.state._lastSavePixelCount = 0; + window.state._lastSaveTime = 0; + } + return true; + } catch (error) { + console.error('Error clearing progress:', error); + return false; + } + }, + + restoreProgress: (savedData) => { + try { + console.log('๐Ÿ” [DEBUG] RestoreProgress: Starting restoration...'); + console.log('๐Ÿ” [DEBUG] SavedData exists:', !!savedData); + console.log('๐Ÿ” [DEBUG] SavedData.state exists:', !!savedData?.state); + + if (!savedData || !savedData.state) { + console.error('โŒ [DEBUG] RestoreProgress: Invalid savedData or missing state'); + return false; + } + + console.log('๐Ÿ” [DEBUG] Current window.state keys before restore:', Object.keys(window.state || {})); + console.log('๐Ÿ” [DEBUG] SavedData.state keys:', Object.keys(savedData.state)); + + console.log('๐Ÿ” [DEBUG] Performing Object.assign...'); + Object.assign(window.state, savedData.state); + + // Reset session-specific flags when loading a new save file + window.state.preFilteringDone = false; + window.state.progressResetDone = false; + console.log('๐Ÿ”„ Reset session flags for new save file load'); + + console.log('โœ… [DEBUG] Object.assign completed successfully'); + + // Restore available colors from old save files (backward compatibility) + if (savedData.state.availableColors && Array.isArray(savedData.state.availableColors)) { + console.log('๐Ÿ” [DEBUG] Restoring availableColors, count:', savedData.state.availableColors.length); + window.state.availableColors = savedData.state.availableColors; + window.state.colorsChecked = true; // Mark colors as checked + console.log('โœ… [DEBUG] AvailableColors restored successfully'); + } else { + console.log('โš ๏ธ [DEBUG] No availableColors found in savedData or not an array'); + } + + if (savedData.imageData) { + console.log('๐Ÿ” [DEBUG] Restoring imageData...'); + console.log('๐Ÿ” [DEBUG] ImageData type check - pixels is array:', Array.isArray(savedData.imageData.pixels)); + console.log('๐Ÿ” [DEBUG] ImageData pixels length:', savedData.imageData.pixels?.length); + + window.state.imageData = { + ...savedData.imageData, + pixels: new Uint8ClampedArray(savedData.imageData.pixels), + }; + console.log('โœ… [DEBUG] ImageData restored successfully'); + console.log('๐Ÿ” [DEBUG] Converted pixels to Uint8ClampedArray, length:', window.state.imageData.pixels.length); + } else { + console.log('โš ๏ธ [DEBUG] No imageData found in savedData'); + } + + if (savedData.paintedMap) { + console.log('๐Ÿ” [DEBUG] Restoring paintedMap...'); + window.state.paintedMap = savedData.paintedMap.map((row) => Array.from(row)); + console.log('โœ… [DEBUG] PaintedMap restored successfully'); + } else { + console.log('๐Ÿ” [DEBUG] No paintedMap found in savedData (this is normal for extracted data)'); + } + + console.log('โœ… [DEBUG] RestoreProgress completed successfully'); + console.log('๐Ÿ” [DEBUG] Final window.state.imageLoaded:', window.state.imageLoaded); + console.log('๐Ÿ” [DEBUG] Final window.state.totalPixels:', window.state.totalPixels); + + return true; + } catch (error) { + console.error('โŒ [DEBUG] Error in restoreProgress:', error); + console.error('โŒ [DEBUG] Error stack:', error.stack); + console.error('โŒ [DEBUG] SavedData structure at error:', JSON.stringify(savedData, null, 2)); + return false; + } + }, + + saveProgressToFile: () => { + try { + // Use utils manager to build proper save structure like old version + const progressData = window.globalUtilsManager ? + window.globalUtilsManager.buildProgressData() : + { + timestamp: Date.now(), + version: '2.2', + state: { + totalPixels: window.state.totalPixels, + paintedPixels: window.state.paintedPixels, + lastPosition: window.state.lastPosition, + startPosition: window.state.startPosition, + region: window.state.region, + imageLoaded: window.state.imageLoaded, + colorsChecked: window.state.colorsChecked, + coordinateMode: window.state.coordinateMode, + coordinateDirection: window.state.coordinateDirection, + coordinateSnake: window.state.coordinateSnake, + blockWidth: window.state.blockWidth, + blockHeight: window.state.blockHeight, + availableColors: window.state.availableColors, + }, + imageData: window.state.imageData ? { + width: window.state.imageData.width, + height: window.state.imageData.height, + pixels: Array.from(window.state.imageData.pixels), + totalPixels: window.state.imageData.totalPixels, + } : null, + paintedMapPacked: window.globalUtilsManager ? + window.globalUtilsManager.buildPaintedMapPacked() : null + }; + + const filename = `wplace-bot-progress-${new Date() + .toISOString() + .slice(0, 19) + .replace(/:/g, '-')}.json`; + Utils.createFileDownloader(JSON.stringify(progressData, null, 2), filename); + return true; + } catch (error) { + console.error('Error saving to file:', error); + return false; + } + }, + + loadProgressFromFile: async () => { + try { + console.log('๐Ÿ” [DEBUG] Starting file upload process...'); + const data = await Utils.createFileUploader(); + + console.log('๐Ÿ” [DEBUG] File upload completed. Data type:', typeof data); + console.log('๐Ÿ” [DEBUG] Data exists:', !!data); + + if (!data) { + console.error('โŒ [DEBUG] No data received from file uploader'); + throw new Error('No data received from file'); + } + + console.log('๐Ÿ” [DEBUG] Data keys:', Object.keys(data)); + console.log('๐Ÿ” [DEBUG] Data.state exists:', !!data.state); + console.log('๐Ÿ” [DEBUG] Data.imageData exists:', !!data.imageData); + console.log('๐Ÿ” [DEBUG] Data.version:', data.version); + console.log('๐Ÿ” [DEBUG] Data.timestamp:', data.timestamp); + + if (!data.state) { + console.error('โŒ [DEBUG] Missing state object in loaded data'); + console.log('๐Ÿ” [DEBUG] Available top-level keys:', Object.keys(data)); + throw new Error('Invalid file format - missing state object'); + } + + console.log('๐Ÿ” [DEBUG] State object keys:', Object.keys(data.state)); + console.log('๐Ÿ” [DEBUG] State.imageLoaded:', data.state.imageLoaded); + console.log('๐Ÿ” [DEBUG] State.totalPixels:', data.state.totalPixels); + console.log('๐Ÿ” [DEBUG] State.startPosition:', data.state.startPosition); + console.log('๐Ÿ” [DEBUG] State.region:', data.state.region); + + if (data.imageData) { + console.log('๐Ÿ” [DEBUG] ImageData width:', data.imageData.width); + console.log('๐Ÿ” [DEBUG] ImageData height:', data.imageData.height); + console.log('๐Ÿ” [DEBUG] ImageData pixels length:', data.imageData.pixels?.length); + console.log('๐Ÿ” [DEBUG] ImageData totalPixels:', data.imageData.totalPixels); + } + + console.log('๐Ÿ” [DEBUG] Calling restoreProgress...'); + const success = Utils.restoreProgress(data); + console.log('๐Ÿ” [DEBUG] RestoreProgress result:', success); + + return success; + } catch (error) { + console.error('โŒ [DEBUG] Error in loadProgressFromFile:', error); + console.error('โŒ [DEBUG] Error stack:', error.stack); + return false; + } + }, + + loadExtractedFileData: async () => { + try { + console.log('๐Ÿ” [DEBUG] Starting Art-Extractor file upload process...'); + const data = await Utils.createFileUploader(); + + console.log('๐Ÿ” [DEBUG] File upload completed. Data type:', typeof data); + console.log('๐Ÿ” [DEBUG] Data exists:', !!data); + console.log('๐Ÿ“– Raw loaded data:', data); + + if (!data) { + console.error('โŒ [DEBUG] No data received from file uploader'); + return null; + } + + console.log('๐Ÿ” [DEBUG] Data keys:', Object.keys(data)); + console.log('๐Ÿ” [DEBUG] Data.state exists:', !!data.state); + console.log('๐Ÿ” [DEBUG] Data.imageData exists:', !!data.imageData); + console.log('๐Ÿ” [DEBUG] Data.version:', data.version); + console.log('๐Ÿ” [DEBUG] Data.timestamp:', data.timestamp); + + console.log('๐Ÿ” [DEBUG] Returning raw data object for Load Extracted feature'); + return data; + } catch (error) { + console.error('โŒ [DEBUG] Error in loadExtractedFileData:', error); + return null; + } + }, + + // Other utilities - delegate to globalUtilsManager or provide simple fallbacks + extractAvailableColors: () => { + if (window.globalUtilsManager) { + return window.globalUtilsManager.extractAvailableColors(); + } else if (window.globalImageProcessor) { + return window.globalImageProcessor.extractAvailableColors(window.CONFIG.COLOR_MAP); + } else { + return []; + } + }, + formatTime: (ms) => window.globalUtilsManager ? window.globalUtilsManager.formatTime(ms) : `${Math.floor(ms / 1000)}s`, + calculateEstimatedTime: (remainingPixels, charges, cooldown) => window.globalUtilsManager ? window.globalUtilsManager.calculateEstimatedTime(remainingPixels, charges, cooldown) : 0, + initializePaintedMap: (width, height) => window.globalUtilsManager ? window.globalUtilsManager.initializePaintedMap(width, height) : console.log('Painted map not available'), + markPixelPainted: (x, y, regionX, regionY) => window.globalUtilsManager ? window.globalUtilsManager.markPixelPainted(x, y, regionX, regionY) : false, + isPixelPainted: (x, y, regionX, regionY) => window.globalUtilsManager ? window.globalUtilsManager.isPixelPainted(x, y, regionX, regionY) : false, + shouldAutoSave: () => window.globalUtilsManager ? window.globalUtilsManager.shouldAutoSave() : false, + performSmartSave: () => window.globalUtilsManager ? window.globalUtilsManager.performSmartSave() : false, + packPaintedMapToBase64: (paintedMap, width, height) => window.globalUtilsManager ? window.globalUtilsManager.packPaintedMapToBase64(paintedMap, width, height) : null, + unpackPaintedMapFromBase64: (base64, width, height) => window.globalUtilsManager ? window.globalUtilsManager.unpackPaintedMapFromBase64(base64, width, height) : null, + migrateProgressToV2: (saved) => window.globalUtilsManager ? window.globalUtilsManager.migrateProgressToV2(saved) : saved, + migrateProgressToV21: (saved) => window.globalUtilsManager ? window.globalUtilsManager.migrateProgressToV21(saved) : saved, + migrateProgressToV22: (data) => window.globalUtilsManager ? window.globalUtilsManager.migrateProgressToV22(data) : data, + buildPaintedMapPacked: () => window.globalUtilsManager ? window.globalUtilsManager.buildPaintedMapPacked() : null, + buildProgressData: () => window.globalUtilsManager ? window.globalUtilsManager.buildProgressData() : {}, + migrateProgress: (saved) => window.globalUtilsManager ? window.globalUtilsManager.migrateProgress(saved) : saved, + restoreOverlayFromData: () => window.globalUtilsManager ? window.globalUtilsManager.restoreOverlayFromData() : Promise.resolve(false), + updateCoordinateUI: (config) => window.globalUtilsManager ? window.globalUtilsManager.updateCoordinateUI(config) : console.log('Coordinate UI update not available'), + }; + + // IMAGE PROCESSOR WRAPPER - Uses WPlaceImageProcessor for modular functionality + class ImageProcessor { + constructor(imageSrc) { + // Create instance of the modular ImageProcessor + this._processor = new window.WPlaceImageProcessor(imageSrc); + + // Legacy compatibility properties + this.imageSrc = imageSrc; + this.img = null; + this.canvas = null; + this.ctx = null; + } + + async load() { + await this._processor.load(); + + // Update legacy properties for compatibility + this.img = this._processor.img; + this.canvas = this._processor.canvas; + this.ctx = this._processor.ctx; + } + + getDimensions() { + return this._processor.getDimensions(); + } + + getPixelData() { + return this._processor.getPixelData(); + } + + resize(newWidth, newHeight) { + const result = this._processor.resize(newWidth, newHeight); + + // Update legacy properties + this.img = this._processor.img; + this.canvas = this._processor.canvas; + this.ctx = this._processor.ctx; + + return result; + } + + generatePreview(width, height) { + return this._processor.generatePreview(width, height); + } + + // Cleanup method + cleanup() { + if (this._processor) { + this._processor.cleanup(); + } + } + } + + // WPLACE API SERVICE + const WPlaceService = { + async paintPixelInRegion(regionX, regionY, pixelX, pixelY, color) { + try { + await ensureToken(); + if (!getTurnstileToken()) return 'token_error'; + const payload = { + coords: [pixelX, pixelY], + colors: [color], + t: getTurnstileToken(), + fp: fpStr32, + }; + var token = await createWasmToken(regionX, regionY, payload); + const res = await fetch(`https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`, { + method: 'POST', + headers: { 'Content-Type': 'text/plain;charset=UTF-8', "x-pawtect-token": token }, + credentials: 'include', + body: JSON.stringify(payload), + }); + if (res.status === 403) { + console.error('โŒ 403 Forbidden. Turnstile token might be invalid or expired.'); + setTurnstileToken(null); + createTokenPromise(); + return 'token_error'; + } + const data = await res.json(); + return data?.painted === 1; + } catch (e) { + console.error('Paint request failed:', e); + return false; + } + }, + + async getCharges() { + try { + const res = await fetch("https://backend.wplace.live/me", { + credentials: "include", + }) + const data = await res.json() + return { + id: data.id, + charges: data.charges?.count || 0, + max: data.charges?.max || 1, + cooldown: data.charges?.next || CONFIG.COOLDOWN_DEFAULT, + droplets: data.droplets || 0, + } + } catch (e) { + console.error("Failed to get charges:", e) + return { + id: null, + charges: 0, + max: 1, + cooldown: CONFIG.COOLDOWN_DEFAULT, + droplets: 0, + } + } + }, + + async fetchCheck() { + try { + const res = await fetch("https://backend.wplace.live/me", { + credentials: "include", + }) + const data = await res.json() + return { + ID: data.id, + Username: data.username || data.name || null, + Charges: data.charges.count, + Max: data.charges.max, + Droplets: data.droplets + } + } catch (e) { + console.error("Failed to get ID:", e) + return { + + } + } + } + }; + + // Desktop Notification Manager + const NotificationManager = { + pollTimer: null, + pollIntervalMs: 60_000, + icon() { + const link = document.querySelector("link[rel~='icon']"); + return link?.href || location.origin + '/favicon.ico'; + }, + async requestPermission() { + if (!('Notification' in window)) { + Utils.showAlert(Utils.t('notificationsNotSupported'), 'warning'); + return 'denied'; + } + if (Notification.permission === 'granted') return 'granted'; + try { + const perm = await Notification.requestPermission(); + return perm; + } catch { + return Notification.permission; + } + }, + canNotify() { + return ( + state.notificationsEnabled && + typeof Notification !== 'undefined' && + Notification.permission === 'granted' + ); + }, + notify(title, body, tag = 'wplace-charges', force = false) { + if (!this.canNotify()) return false; + if (!force && state.notifyOnlyWhenUnfocused && document.hasFocus()) return false; + try { + new Notification(title, { + body, + tag, + renotify: true, + icon: this.icon(), + badge: this.icon(), + silent: false, + }); + return true; + } catch { + // Graceful fallback + Utils.showAlert(body, 'info'); + return false; + } + }, + resetEdgeTracking() { + state._lastChargesBelow = state.displayCharges < state.cooldownChargeThreshold; + state._lastChargesNotifyAt = 0; + }, + maybeNotifyChargesReached(force = false) { + if (!state.notificationsEnabled || !state.notifyOnChargesReached) return; + const reached = state.displayCharges >= state.cooldownChargeThreshold; + const now = Date.now(); + const repeatMs = Math.max(1, Number(state.notificationIntervalMinutes || 5)) * 60_000; + if (reached) { + const shouldEdge = state._lastChargesBelow || force; + const shouldRepeat = now - (state._lastChargesNotifyAt || 0) >= repeatMs; + if (shouldEdge || shouldRepeat) { + const msg = Utils.t('chargesReadyMessage', { + current: state.displayCharges, + max: state.maxCharges, + threshold: state.cooldownChargeThreshold, + }); + this.notify(Utils.t('chargesReadyNotification'), msg, 'wplace-notify-charges'); + state._lastChargesNotifyAt = now; + } + state._lastChargesBelow = false; + } else { + state._lastChargesBelow = true; + } + }, + startPolling() { + this.stopPolling(); + if (!state.notificationsEnabled || !state.notifyOnChargesReached) return; + // lightweight background polling + this.pollTimer = setInterval(async () => { + try { + const { charges, cooldown, max } = await WPlaceService.getCharges(); + state.displayCharges = Math.floor(charges); + state.cooldown = cooldown; + state.maxCharges = Math.max(1, Math.floor(max)); + this.maybeNotifyChargesReached(); + } catch { + /* ignore */ + } + }, this.pollIntervalMs); + }, + stopPolling() { + if (this.pollTimer) { + clearInterval(this.pollTimer); + this.pollTimer = null; + } + }, + syncFromState() { + this.resetEdgeTracking(); + if (state.notificationsEnabled && state.notifyOnChargesReached) this.startPolling(); + else this.stopPolling(); + }, + }; + + // COLOR MATCHING FUNCTION - Optimized with caching + const colorCache = new Map(); + + // UI UPDATE FUNCTIONS (declared early to avoid reference errors) + let updateUI = () => { }; + let updateStats = async () => { }; + let updateDataButtons = () => { }; + + function updateActiveColorPalette() { + state.activeColorPalette = []; + const activeSwatches = document.querySelectorAll('.wplace-color-swatch.active'); + if (activeSwatches) { + activeSwatches.forEach((swatch) => { + const rgbStr = swatch.getAttribute('data-rgb'); + if (rgbStr) { + const rgb = rgbStr.split(',').map(Number); + state.activeColorPalette.push(rgb); + } + }); + } + if (document.querySelector('.resize-container')?.style.display === 'block') { + _updateResizePreview(); + } + } + + function toggleAllColors(select, showingUnavailable = false) { + const swatches = document.querySelectorAll('.wplace-color-swatch'); + if (swatches) { + swatches.forEach((swatch) => { + // Only toggle colors that are available or if we're showing unavailable colors + const isUnavailable = swatch.classList.contains('unavailable'); + if (!isUnavailable || showingUnavailable) { + // Don't try to select unavailable colors + if (!isUnavailable) { + swatch.classList.toggle('active', select); + } + } + }); + } + updateActiveColorPalette(); + } + + function unselectAllPaidColors() { + const swatches = document.querySelectorAll('.wplace-color-swatch'); + if (swatches) { + swatches.forEach((swatch) => { + const colorId = parseInt(swatch.getAttribute('data-color-id'), 10); + if (!isNaN(colorId) && colorId >= 32) { + swatch.classList.toggle('active', false); + } + }); + } + updateActiveColorPalette(); + } + + function initializeColorPalette(container) { + const colorsContainer = container.querySelector('#colors-container'); + const showAllToggle = container.querySelector('#showAllColorsToggle'); + if (!colorsContainer) return; + + // Use already captured colors from state (captured during upload) + // Don't re-fetch colors here, use what was captured when user clicked upload + if (!state.availableColors || state.availableColors.length === 0) { + // If no colors have been captured yet, show message + colorsContainer.innerHTML = `
${Utils.t( + 'uploadImageFirst' + )}
`; + return; + } + + function populateColors(showUnavailable = false) { + colorsContainer.innerHTML = ''; + let availableCount = 0; + let totalCount = 0; + + // Convert COLOR_MAP to array and filter out transparent + const allColors = Object.values(CONFIG.COLOR_MAP).filter((color) => color.rgb !== null); + + allColors.forEach((colorData) => { + const { id, name, rgb } = colorData; + const rgbKey = `${rgb.r},${rgb.g},${rgb.b}`; + totalCount++; + + // Check if this color is available in the captured colors + const isAvailable = state.availableColors.some( + (c) => c.rgb[0] === rgb.r && c.rgb[1] === rgb.g && c.rgb[2] === rgb.b + ); + + // If not showing all colors and this color is not available, skip it + if (!showUnavailable && !isAvailable) { + return; + } + + if (isAvailable) availableCount++; + + const colorItem = Utils.createElement('div', { + className: 'wplace-color-item', + }); + const swatch = Utils.createElement('button', { + className: `wplace-color-swatch ${!isAvailable ? 'unavailable' : ''}`, + title: `${name} (ID: ${id})${!isAvailable ? ' (Unavailable)' : ''}`, + 'data-rgb': rgbKey, + 'data-color-id': id, + }); + swatch.style.backgroundColor = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`; + + // Make unavailable colors visually distinct + if (!isAvailable) { + swatch.style.opacity = '0.4'; + swatch.style.filter = 'grayscale(50%)'; + swatch.disabled = true; + } else { + // Select available colors by default + swatch.classList.add('active'); + } + + const nameLabel = Utils.createElement( + 'span', + { + className: 'wplace-color-item-name', + style: !isAvailable ? 'color: #888; font-style: italic;' : '', + }, + name + (!isAvailable ? ' (N/A)' : '') + ); + + // Only add click listener for available colors + if (isAvailable) { + swatch.addEventListener('click', () => { + swatch.classList.toggle('active'); + updateActiveColorPalette(); + }); + } + + colorItem.appendChild(swatch); + colorItem.appendChild(nameLabel); + colorsContainer.appendChild(colorItem); + }); + + updateActiveColorPalette(); + } + + // Initialize with only available colors + populateColors(false); + + // Add toggle functionality + if (showAllToggle) { + showAllToggle.addEventListener('change', (e) => { + populateColors(e.target.checked); + }); + } + + container + .querySelector('#selectAllBtn') + ?.addEventListener('click', () => toggleAllColors(true, showAllToggle?.checked)); + container + .querySelector('#unselectAllBtn') + ?.addEventListener('click', () => toggleAllColors(false, showAllToggle?.checked)); + container + .querySelector('#unselectPaidBtn') + ?.addEventListener('click', () => unselectAllPaidColors()); + } + + async function handleCaptcha(allowGeneration = true) { + const startTime = performance.now(); + + // Check user's token source preference + if (state.tokenSource === 'manual') { + console.log('๐ŸŽฏ Manual token source selected - using pixel placement automation'); + if (!allowGeneration) { + console.log('โŒ Token generation disabled during processing'); + return null; + } + return await tokenManager.handleCaptchaFallback(); + } + + // Generator mode (pure) or Hybrid mode - try generator first + try { + // Use optimized token generation with automatic sitekey detection + const { sitekey, token: preGeneratedToken } = await Utils.obtainSitekeyAndToken(); + + if (!sitekey) { + throw new Error('No valid sitekey found'); + } + + console.log('๐Ÿ”‘ Generating Turnstile token for sitekey:', sitekey); + console.log( + '๐Ÿงญ UA:', + navigator.userAgent.substring(0, 50) + '...', + 'Platform:', + navigator.platform + ); + + // Add additional checks before token generation + if (!window.turnstile) { + await Utils.loadTurnstile(); + } + + let token = null; + + // โœ… Reuse pre-generated token if available and valid + if ( + preGeneratedToken && + typeof preGeneratedToken === 'string' && + preGeneratedToken.length > 20 + ) { + console.log('โ™ป๏ธ Reusing pre-generated token from sitekey detection phase'); + token = preGeneratedToken; + } + // โœ… Or use globally cached token if still valid + else if (isTokenValid()) { + console.log('โ™ป๏ธ Using existing cached token (from previous operation)'); + token = getTurnstileToken(); + } + // โœ… Otherwise generate a new one (only if allowed) + else { + if (!allowGeneration) { + console.log('โŒ Token expired/missing but generation disabled during processing'); + return null; + } + console.log('๐Ÿ” No valid pre-generated or cached token, creating new one...'); + token = await Utils.executeTurnstile(sitekey, 'paint'); + if (token) { + setTurnstileToken(token); + } + } + + console.log( + `๐Ÿ” Token received - Type: ${typeof token}, Value: ${token + ? typeof token === 'string' + ? token.length > 50 + ? token.substring(0, 50) + '...' + : token + : JSON.stringify(token) + : 'null/undefined' + }, Length: ${token?.length || 0}` + ); + + // โœ… Final validation + if (typeof token === 'string' && token.length > 20) { + const duration = Math.round(performance.now() - startTime); + console.log(`โœ… Turnstile token generated successfully in ${duration}ms`); + return token; + } else { + throw new Error( + `Invalid or empty token received - Type: ${typeof token}, Value: ${JSON.stringify( + token + )}, Length: ${token?.length || 0}` + ); + } + } catch (error) { + const duration = Math.round(performance.now() - startTime); + console.error(`โŒ Turnstile token generation failed after ${duration}ms:`, error); + + // Fallback to manual pixel placement for hybrid mode + if (state.tokenSource === 'hybrid') { + console.log( + '๐Ÿ”„ Hybrid mode: Generator failed, automatically switching to manual pixel placement...' + ); + const fbToken = await tokenManager.handleCaptchaFallback(); + return fbToken; + } else { + // Pure generator mode - don't fallback, just fail + throw error; + } + } + } + + async function createUI() { + await detectLanguage(); + + const existingContainer = document.getElementById('wplace-image-bot-container'); + const existingStats = document.getElementById('wplace-stats-container'); + const existingSettings = document.getElementById('wplace-settings-container'); + const existingResizeContainer = document.querySelector('.resize-container'); + const existingResizeOverlay = document.querySelector('.resize-overlay'); + + if (existingContainer) existingContainer.remove(); + if (existingStats) existingStats.remove(); + if (existingSettings) existingSettings.remove(); + if (existingResizeContainer) existingResizeContainer.remove(); + if (existingResizeOverlay) existingResizeOverlay.remove(); + + loadThemePreference(); + await initializeTranslations(); + + const theme = getCurrentTheme(); + applyTheme(); // <- new: set CSS vars and theme class before building UI + + function appendLinkOnce(href, attributes = {}) { + // Check if a link with the same href already exists in the document head + const exists = Array.from(document.head.querySelectorAll('link')).some( + (link) => link.href === href + ); + if (exists) return; + + // Create a new link element + const link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = href; + + // Add any additional attributes (e.g., data-* attributes) + for (const [key, value] of Object.entries(attributes)) { + link.setAttribute(key, value); + } + + // Append the link element to the document head + document.head.appendChild(link); + } + + appendLinkOnce('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); + + if (theme.fontFamily.includes('Press Start 2P')) { + appendLinkOnce('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); + } + + // Load auto-image-styles.css - prioritize extension local resources + console.group('%c๐ŸŽจ Loading Auto-Image Styles', 'color: #8b5cf6; font-weight: bold;'); + + let stylesLoaded = false; + + // First try: Check if extension has loaded local CSS resources + if (window.AUTOBOT_THEMES && window.AUTOBOT_THEMES['auto-image-styles.css']) { + console.log('%c๐Ÿ” Found auto-image-styles.css in extension local resources!', 'color: #10b981; font-weight: bold;'); + + // Check if it's already injected by the extension + const existingStyle = document.getElementById('autobot-auto-image-styles'); + if (existingStyle) { + console.log('%cโœ… Styles already injected by extension - using local version', 'color: #10b981; font-weight: bold;'); + console.log(' ๐Ÿ“ Source: Extension local file (already in DOM)'); + console.log(' ๐Ÿ†” Element ID: autobot-auto-image-styles'); + stylesLoaded = true; + } else { + // Inject it ourselves + const styleElement = document.createElement('style'); + styleElement.id = 'autobot-auto-image-styles-script'; + styleElement.setAttribute('data-wplace-theme', 'true'); + styleElement.textContent = window.AUTOBOT_THEMES['auto-image-styles.css']; + document.head.appendChild(styleElement); + + console.log('%cโœ… Injected auto-image-styles.css from extension local resources', 'color: #10b981; font-weight: bold;'); + console.log(' ๐Ÿ“ Source: Extension local file'); + console.log(' ๐Ÿ“ Size: ' + window.AUTOBOT_THEMES['auto-image-styles.css'].length + ' characters'); + console.log(' ๐Ÿ†” Element ID: autobot-auto-image-styles-script'); + stylesLoaded = true; + } + } else { + console.log('%c๐Ÿ“ auto-image-styles.css not found in extension resources', 'color: #f59e0b;'); + console.log(' ๐Ÿ” window.AUTOBOT_THEMES:', typeof window.AUTOBOT_THEMES); + if (window.AUTOBOT_THEMES) { + console.log(' ๐Ÿ“‹ Available themes:', Object.keys(window.AUTOBOT_THEMES)); + } + } + + // Fallback: Load from CDN if local resources not available + if (!stylesLoaded) { + console.log('%c๐ŸŒ Falling back to CDN loading...', 'color: #8b5cf6;'); + appendLinkOnce( + 'https://wplace-autobot.github.io/WPlace-AutoBOT/main/auto-image-styles.css', + { 'data-wplace-theme': 'true' } + ); + console.log('%c๐Ÿ“š Loaded auto-image-styles.css from CDN (fallback)', 'color: #f59e0b; font-weight: bold;'); + console.log(' ๐Ÿ“ Source: CDN (wplace-autobot.github.io)'); + console.log(' ๐ŸŒ URL: https://wplace-autobot.github.io/WPlace-AutoBOT/main/auto-image-styles.css'); + console.log(' โš ๏ธ Performance: Network request required'); + } + + console.groupEnd(); + + // Ensure default theme is loaded from extension resources + if (window.applyTheme && typeof window.applyTheme === 'function') { + console.group('%c๐ŸŽจ Loading Default Theme from Extension', 'color: #8b5cf6; font-weight: bold;'); + + // Determine the current theme file name + let defaultTheme = 'classic'; // fallback + if (CONFIG.currentTheme === 'Neon Retro') { + defaultTheme = 'neon'; + } else if (CONFIG.currentTheme === 'Neon Retro Cyan') { + defaultTheme = 'neon-cyan'; + } else if (CONFIG.currentTheme === 'Neon Retro Light') { + defaultTheme = 'neon-light'; + } else if (CONFIG.currentTheme === 'Classic Light') { + defaultTheme = 'classic-light'; + } else if (CONFIG.currentTheme === 'Acrylic') { + defaultTheme = 'acrylic'; + } + + console.log(`%c๐ŸŽฏ Loading theme: ${defaultTheme} (${CONFIG.currentTheme})`, 'color: #8b5cf6;'); + const success = window.applyTheme(defaultTheme); + + if (success) { + console.log(`%cโœ… Default theme loaded from extension local resources`, 'color: #10b981; font-weight: bold;'); + console.log(` ๐Ÿ“ Source: Extension local file (themes/${defaultTheme}.css)`); + console.log(` ๐Ÿš€ Performance: Instant load (no CDN request)`); + console.log(` ๐ŸŽจ Theme: ${CONFIG.currentTheme}`); + } else { + console.warn(`%cโš ๏ธ Failed to load theme ${defaultTheme} from extension`, 'color: #f59e0b;'); + console.log(` ๐Ÿ“ Note: Theme CSS classes will still work`); + } + + console.groupEnd(); + } else { + console.warn(`%cโš ๏ธ Extension applyTheme() function not available`, 'color: #f59e0b; font-weight: bold;'); + console.log(` ๐Ÿ“ Themes will be limited to CSS classes only`); + } + + const container = document.createElement('div'); + container.id = 'wplace-image-bot-container'; + container.innerHTML = ` +
+
+ + ${Utils.t('title')} +
+
+ + + + +
+
+
+ +
+
+ ${Utils.t('initMessage')} +
+
+
+
+
+ + +
+
๐Ÿ–ผ๏ธ Image Management
+
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
๐ŸŽฎ Painting Control
+
+
+ + +
+
+ +
+
+
+ + +
+
โฑ๏ธ ${Utils.t('cooldownSettings')}
+
+ +
+
+ +
+
+ + + + ${Utils.t('charges')} + +
+
+
+
+ + +
+
๐Ÿ’พ Data Management
+
+
+ + +
+
+ + +
+
+
+
+ `; + + // Stats Window - Separate UI + const statsContainer = document.createElement('div'); + statsContainer.id = 'wplace-stats-container'; + statsContainer.style.display = 'none'; + statsContainer.innerHTML = ` +
+
+ + ${Utils.t('paintingStats')} +
+
+ + +
+
+
+
+
+
+
${Utils.t( + 'initMessage' + )}
+
+
+
+ +
+
+
+ + Account Swapper +
+ +
+
+ +
+
+
+ + Auto Buy Charges +
+ +
+
+ +
+
+ + All Accounts + +
+
+
Click the icon to load accounts.
+
+
+
+ `; + + // Modern Settings Container with Theme Support + // Use the theme variable already declared at the top of createUI function + const settingsContainer = document.createElement('div'); + settingsContainer.id = 'wplace-settings-container'; + + // Apply theme-based styling + const themeBackground = theme.primary + ? `linear-gradient(135deg, ${theme.primary} 0%, ${theme.secondary || theme.primary} 100%)` + : `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`; + + settingsContainer.className = 'wplace-settings-container-base'; + // Apply theme-specific background + settingsContainer.style.background = themeBackground; + settingsContainer.style.cssText += ` + min-width: 420px; + max-width: 480px; + z-index: 99999; + color: ${theme.text || 'white'}; + font-family: ${theme.fontFamily || "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"}; + box-shadow: ${theme.boxShadow || '0 20px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1)' + }; + backdrop-filter: ${theme.backdropFilter || 'blur(10px)'}; + overflow: hidden; + animation: settings-slide-in 0.4s ease-out; + ${theme.animations?.glow + ? ` + box-shadow: ${theme.boxShadow || '0 20px 40px rgba(0,0,0,0.3)'}, + 0 0 30px ${theme.highlight || theme.neon || '#00ffff'}; + ` + : '' + } + `; + + // noinspection CssInvalidFunction + settingsContainer.innerHTML = ` +
+
+

+ + ${Utils.t('settings')} +

+ +
+
+ +
+ + +
+ +
+ +

+ Generator mode creates tokens automatically. Hybrid mode falls back to manual when generator fails. Manual mode only uses pixel placement. +

+
+
+ + +
+ + +
+ + +
+ +
+ +
+
+ Overlay Opacity +
${Math.round(state.overlayOpacity * 100)}%
+
+ +
+ + +
+
+ + +
+ + +
+ + + + + + +
+
+ + +
+ + + +
+ + +
+ + +
+
+ ${Utils.t('batchSize')} +
+
+
+ +
+
+
+ + + + pixels +
+
+
+
+ ${CONFIG.PAINTING_SPEED.MIN} + ${CONFIG.PAINTING_SPEED.MAX} +
+
+ + +
+
+
+ + +
+
+ + +
+
+

+ ๐ŸŽฒ Random batch size between min and max values +

+
+ + + +
+ + +
+ + + +
+ + +
+ + +
+ + +
+ + +
+ +
+ + +
+
+
+ + +
+
+ + +
+
+

+ ๐Ÿงฑ Block dimensions for block-based generation modes +

+
+
+ + +
+ +
+ + + +
+ ${Utils.t('repeatEvery')} + + ${Utils.t('minutesPl')} +
+
+ + +
+
+
+ + +
+ +
+ +
+
+ + +
+ +
+ +
+
+
+ +
+ +
+ + + `; + + const resizeContainer = document.createElement('div'); + resizeContainer.className = 'resize-container'; + resizeContainer.innerHTML = ` +

${Utils.t('resizeImage')}

+
+ + + + +
+ +
+ + + + +
+ + + + + + + 100% +
+ Drag to pan โ€ข Pinch to zoom โ€ข Doubleโ€‘tap to zoom +
+
+
+ +
+
+
+ + +
+
+
+
+
+
+
+ +
+ + 1 +
+
+
+ +
+ + 1 +
+
+
+
+ +
+ + + +
+
+ + + Shift = Row โ€ข Alt = Column +
+
+ +
+
+  Color Palette +
+
+
+ +
+
+ + + +
+
+
+
+ +
+
+  Advanced Color Matching +
+
+ + +
+
+ ${Utils.t('chromaWeight')} + ${state.chromaPenaltyWeight} +
+ +
+ +
+ + +
+ +
+
+ +
+ + + +
+ `; + + 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); + + // Show the main container after all elements are appended + container.style.display = 'block'; + + 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'); + + container.querySelectorAll('.wplace-section-title').forEach((title) => { + // Add a right-side arrow if it doesn't exist + if (!title.querySelector('i.arrow')) { + const arrow = document.createElement('i'); + arrow.className = 'fas fa-chevron-down arrow'; // FontAwesome down arrow + title.appendChild(arrow); + } + + // Click event to toggle collapse/expand of the section + title.addEventListener('click', () => { + const section = title.parentElement; + section.classList.toggle('collapsed'); + }); + }); + + // Disable load/upload buttons until initial setup is complete (startup only) + if (loadBtn) { + loadBtn.disabled = !state.initialSetupComplete; + loadBtn.title = state.initialSetupComplete + ? '' + : '๐Ÿ”„ Waiting for initial setup to complete...'; + } + if (loadFromFileBtn) { + loadFromFileBtn.disabled = !state.initialSetupComplete; + loadFromFileBtn.title = state.initialSetupComplete + ? '' + : '๐Ÿ”„ Waiting for initial setup to complete...'; + } + if (uploadBtn) { + uploadBtn.disabled = !state.initialSetupComplete; + uploadBtn.title = state.initialSetupComplete + ? '' + : '๐Ÿ”„ Waiting for initial setup to complete...'; + } + + const minimizeBtn = container.querySelector('#minimizeBtn'); + const compactBtn = container.querySelector('#compactBtn'); + const statsBtn = container.querySelector('#statsBtn'); + const toggleOverlayBtn = container.querySelector('#toggleOverlayBtn'); + 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 cooldownInput = container.querySelector('#cooldownInput'); + const cooldownDecrease = container.querySelector('#cooldownDecrease'); + const cooldownIncrease = container.querySelector('#cooldownIncrease'); + const cooldownValue = container.querySelector('#cooldownValue'); + + if (!uploadBtn || !selectPosBtn || !startBtn || !stopBtn) { + console.error('Some UI elements not found:', { + uploadBtn: !!uploadBtn, + selectPosBtn: !!selectPosBtn, + startBtn: !!startBtn, + stopBtn: !!stopBtn, + }); + } + + if (!statsContainer || !statsArea || !closeStatsBtn) { + // Note: base CSS now aligns with this layout: main panel at left:20px (width 280), stats at left:330px. + } + + 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 = Utils.t('showStats'); + } else { + statsContainer.style.display = 'block'; + statsBtn.innerHTML = ''; + statsBtn.title = Utils.t('hideStats'); + } + }); + + closeStatsBtn.addEventListener('click', () => { + statsContainer.style.display = 'none'; + statsBtn.innerHTML = ''; + statsBtn.title = Utils.t('showStats'); + }); + + if (refreshChargesBtn) { + refreshChargesBtn.addEventListener('click', async () => { + refreshChargesBtn.innerHTML = ''; + refreshChargesBtn.disabled = true; + + try { + await updateStats(); + await updateCurrentAccountInList(); + } catch (error) { + console.error('Error refreshing charges:', error); + } finally { + refreshChargesBtn.innerHTML = ''; + refreshChargesBtn.disabled = false; + } + }); + } + + // Account-related event handlers + const autoSwapToggle = statsContainer.querySelector('#autoSwapToggle'); + const refreshAllAccountsBtn = statsContainer.querySelector('#refreshAllAccountsBtn'); + + if (autoSwapToggle) { + autoSwapToggle.checked = CONFIG.autoSwap; + autoSwapToggle.addEventListener('change', (e) => { + CONFIG.autoSwap = e.target.checked; + console.log(`๐Ÿ”„ Auto-swap ${CONFIG.autoSwap ? 'enabled' : 'disabled'}`); + + // Handle autoBuy toggle dependency + const autoBuyToggle = statsContainer.querySelector('#autoBuyToggle'); + if (autoBuyToggle) { + if (!CONFIG.autoSwap) { + // If autoSwap is disabled, disable and uncheck autoBuy + autoBuyToggle.disabled = true; + autoBuyToggle.checked = false; + CONFIG.autoBuyToggle = false; + console.log(`๐Ÿ’ฐ Auto-buy disabled (requires auto-swap)`); + } else { + // If autoSwap is enabled, enable autoBuy toggle + autoBuyToggle.disabled = false; + } + } + }); + } + + // Auto Buy toggle logic + const autoBuyToggle = statsContainer.querySelector('#autoBuyToggle'); + if (autoBuyToggle) { + autoBuyToggle.checked = CONFIG.autoBuyToggle; + autoBuyToggle.disabled = !CONFIG.autoSwap; // Disable if autoSwap is off + + autoBuyToggle.addEventListener('change', (e) => { + CONFIG.autoBuyToggle = e.target.checked; + console.log(`๐Ÿ’ฐ Auto-buy ${CONFIG.autoBuyToggle ? 'enabled' : 'disabled'}`); + }); + } + + if (refreshAllAccountsBtn) { + refreshAllAccountsBtn.addEventListener('click', fetchAllAccountDetails); + } + } + if (statsContainer && statsBtn) { + // Stats container starts visible by default - user clicks button to hide + statsContainer.style.display = 'block'; + statsBtn.innerHTML = ''; + statsBtn.title = Utils.t('hideStats'); + } + + 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.classList.contains('show'); + if (isVisible) { + settingsContainer.style.animation = 'settings-fade-out 0.3s ease-out forwards'; + settingsContainer.classList.remove('show'); + setTimeout(() => { + settingsContainer.style.animation = ''; + }, 300); + } else { + settingsContainer.style.top = '50%'; + settingsContainer.style.left = '50%'; + settingsContainer.style.transform = 'translate(-50%, -50%)'; + settingsContainer.classList.add('show'); + settingsContainer.style.animation = 'settings-slide-in 0.4s ease-out'; + } + }); + + closeSettingsBtn.addEventListener('click', () => { + settingsContainer.style.animation = 'settings-fade-out 0.3s ease-out forwards'; + settingsContainer.classList.remove('show'); + setTimeout(() => { + settingsContainer.style.animation = ''; + settingsContainer.style.top = '50%'; + settingsContainer.style.left = '50%'; + settingsContainer.style.transform = 'translate(-50%, -50%)'; + }, 300); + }); + + applySettingsBtn.addEventListener('click', () => { + // Sync advanced settings before save + const colorAlgorithmSelect = document.getElementById('colorAlgorithmSelect'); + if (colorAlgorithmSelect) state.colorMatchingAlgorithm = colorAlgorithmSelect.value; + const enableChromaPenaltyToggle = document.getElementById('enableChromaPenaltyToggle'); + if (enableChromaPenaltyToggle) + state.enableChromaPenalty = enableChromaPenaltyToggle.checked; + const chromaPenaltyWeightSlider = document.getElementById('chromaPenaltyWeightSlider'); + if (chromaPenaltyWeightSlider) + state.chromaPenaltyWeight = parseFloat(chromaPenaltyWeightSlider.value) || 0.15; + const transparencyThresholdInput = document.getElementById('transparencyThresholdInput'); + if (transparencyThresholdInput) { + const v = parseInt(transparencyThresholdInput.value, 10); + if (!isNaN(v) && v >= 0 && v <= 255) state.customTransparencyThreshold = v; + } + const whiteThresholdInput = document.getElementById('whiteThresholdInput'); + if (whiteThresholdInput) { + const v = parseInt(whiteThresholdInput.value, 10); + if (!isNaN(v) && v >= 200 && v <= 255) state.customWhiteThreshold = v; + } + // Update functional thresholds + CONFIG.TRANSPARENCY_THRESHOLD = state.customTransparencyThreshold; + CONFIG.WHITE_THRESHOLD = state.customWhiteThreshold; + // Notifications + const notifEnabledToggle = document.getElementById('notifEnabledToggle'); + const notifOnChargesToggle = document.getElementById('notifOnChargesToggle'); + const notifOnlyUnfocusedToggle = document.getElementById('notifOnlyUnfocusedToggle'); + const notifIntervalInput = document.getElementById('notifIntervalInput'); + if (notifEnabledToggle) state.notificationsEnabled = !!notifEnabledToggle.checked; + if (notifOnChargesToggle) state.notifyOnChargesReached = !!notifOnChargesToggle.checked; + if (notifOnlyUnfocusedToggle) + state.notifyOnlyWhenUnfocused = !!notifOnlyUnfocusedToggle.checked; + if (notifIntervalInput) { + const v = parseInt(notifIntervalInput.value, 10); + if (!isNaN(v) && v >= 1 && v <= 60) state.notificationIntervalMinutes = v; + } + saveBotSettings(); + Utils.showAlert(Utils.t('settingsSaved'), 'success'); + closeSettingsBtn.click(); + NotificationManager.syncFromState(); + }); + + makeDraggable(settingsContainer); + + const tokenSourceSelect = settingsContainer.querySelector('#tokenSourceSelect'); + if (tokenSourceSelect) { + tokenSourceSelect.addEventListener('change', (e) => { + state.tokenSource = e.target.value; + saveBotSettings(); + console.log(`๐Ÿ”‘ Token source changed to: ${state.tokenSource}`); + const sourceNames = { + generator: 'Automatic Generator', + hybrid: 'Generator + Auto Fallback', + manual: 'Manual Pixel Placement', + }; + Utils.showAlert( + Utils.t('tokenSourceSet', { source: sourceNames[state.tokenSource] }), + 'success' + ); + }); + } + + // Batch mode controls + const batchModeSelect = settingsContainer.querySelector('#batchModeSelect'); + const normalBatchControls = settingsContainer.querySelector('#normalBatchControls'); + const randomBatchControls = settingsContainer.querySelector('#randomBatchControls'); + const randomBatchMin = settingsContainer.querySelector('#randomBatchMin'); + const randomBatchMax = settingsContainer.querySelector('#randomBatchMax'); + + if (batchModeSelect) { + batchModeSelect.addEventListener('change', (e) => { + state.batchMode = e.target.value; + + // Switch between normal and random controls + if (normalBatchControls && randomBatchControls) { + if (e.target.value === 'random') { + normalBatchControls.style.display = 'none'; + randomBatchControls.style.display = 'block'; + } else { + normalBatchControls.style.display = 'block'; + randomBatchControls.style.display = 'none'; + } + } + + saveBotSettings(); + console.log(`๐Ÿ“ฆ Batch mode changed to: ${state.batchMode}`); + Utils.showAlert( + Utils.t('batchModeSet', { + mode: + state.batchMode === 'random' ? Utils.t('randomRange') : Utils.t('normalFixedSize'), + }), + 'success' + ); + }); + } + + if (randomBatchMin) { + randomBatchMin.addEventListener('input', (e) => { + const min = parseInt(e.target.value); + if (min >= 1 && min <= 1000) { + state.randomBatchMin = min; + // Ensure min doesn't exceed max + if (randomBatchMax && min > state.randomBatchMax) { + state.randomBatchMax = min; + randomBatchMax.value = min; + } + saveBotSettings(); + } + }); + } + + if (randomBatchMax) { + randomBatchMax.addEventListener('input', (e) => { + const max = parseInt(e.target.value); + if (max >= 1 && max <= 1000) { + state.randomBatchMax = max; + // Ensure max doesn't go below min + if (randomBatchMin && max < state.randomBatchMin) { + state.randomBatchMin = max; + randomBatchMin.value = max; + } + saveBotSettings(); + } + }); + } + + const languageSelect = settingsContainer.querySelector('#languageSelect'); + if (languageSelect) { + languageSelect.addEventListener('change', async (e) => { + const newLanguage = e.target.value; + state.language = newLanguage; + localStorage.setItem('wplace_language', newLanguage); + + // Load the new language translations + await loadTranslations(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 overlayOpacitySlider = settingsContainer.querySelector('#overlayOpacitySlider'); + const overlayOpacityValue = settingsContainer.querySelector('#overlayOpacityValue'); + const enableBlueMarbleToggle = settingsContainer.querySelector('#enableBlueMarbleToggle'); + const settingsPaintWhiteToggle = settingsContainer.querySelector('#settingsPaintWhiteToggle'); + const settingsPaintTransparentToggle = settingsContainer.querySelector( + '#settingsPaintTransparentToggle' + ); + + if (overlayOpacitySlider && overlayOpacityValue) { + const updateOpacity = (newValue) => { + const opacity = parseFloat(newValue); + state.overlayOpacity = opacity; + overlayOpacitySlider.value = opacity; + overlayOpacityValue.textContent = `${Math.round(opacity * 100)}%`; + }; + + overlayOpacitySlider.addEventListener('input', (e) => { + updateOpacity(e.target.value); + }); + + // Add scroll-to-adjust for overlay opacity slider + Utils.createScrollToAdjust(overlayOpacitySlider, updateOpacity, 0, 1, 0.05); + } + + if (settingsPaintWhiteToggle) { + settingsPaintWhiteToggle.checked = state.paintWhitePixels; + settingsPaintWhiteToggle.addEventListener('change', (e) => { + state.paintWhitePixels = e.target.checked; + saveBotSettings(); + console.log(`๐ŸŽจ Paint white pixels: ${state.paintWhitePixels ? 'ON' : 'OFF'}`); + const statusText = state.paintWhitePixels + ? 'White pixels in the template will be painted' + : 'White pixels will be skipped'; + Utils.showAlert(statusText, 'success'); + }); + } + + if (settingsPaintTransparentToggle) { + settingsPaintTransparentToggle.checked = state.paintTransparentPixels; + settingsPaintTransparentToggle.addEventListener('change', (e) => { + state.paintTransparentPixels = e.target.checked; + saveBotSettings(); + console.log( + `๐ŸŽจ Paint transparent pixels: ${state.paintTransparentPixels ? 'ON' : 'OFF'}` + ); + const statusText = state.paintTransparentPixels + ? 'Transparent pixels in the template will be painted with the closest available color' + : 'Transparent pixels will be skipped'; + Utils.showAlert(statusText, 'success'); + }); + } + + // Speed controls - both slider and input + const speedSlider = settingsContainer.querySelector('#speedSlider'); + const speedInput = settingsContainer.querySelector('#speedInput'); + const speedDecrease = settingsContainer.querySelector('#speedDecrease'); + const speedIncrease = settingsContainer.querySelector('#speedIncrease'); + const speedValue = settingsContainer.querySelector('#speedValue'); + + if (speedSlider && speedInput && speedValue && speedDecrease && speedIncrease) { + const updateSpeed = (newValue) => { + const speed = Math.max(CONFIG.PAINTING_SPEED.MIN, Math.min(CONFIG.PAINTING_SPEED.MAX, parseInt(newValue))); + state.paintingSpeed = speed; + + // Update both controls (value shows in input, label shows unit only) + speedSlider.value = speed; + speedInput.value = speed; + speedValue.textContent = `pixels`; + + saveBotSettings(); + }; + + // Slider event listener + speedSlider.addEventListener('input', (e) => { + updateSpeed(e.target.value); + }); + + // Number input event listener + speedInput.addEventListener('input', (e) => { + updateSpeed(e.target.value); + }); + + // Decrease button + speedDecrease.addEventListener('click', () => { + updateSpeed(parseInt(speedInput.value) - 1); + }); + + // Increase button + speedIncrease.addEventListener('click', () => { + updateSpeed(parseInt(speedInput.value) + 1); + }); + + // Add scroll-to-adjust for speed slider + Utils.createScrollToAdjust(speedSlider, updateSpeed, CONFIG.PAINTING_SPEED.MIN, CONFIG.PAINTING_SPEED.MAX, 1); + } + + if (enableBlueMarbleToggle) { + enableBlueMarbleToggle.addEventListener('click', async () => { + state.blueMarbleEnabled = enableBlueMarbleToggle.checked; + if (state.imageLoaded && overlayManager.imageBitmap) { + Utils.showAlert(Utils.t('reprocessingOverlay'), 'info'); + await overlayManager.processImageIntoChunks(); + Utils.showAlert(Utils.t('overlayUpdated'), 'success'); + } + }); + } + + // Speed control toggle + const enableSpeedToggle = settingsContainer.querySelector('#enableSpeedToggle'); + if (enableSpeedToggle) { + enableSpeedToggle.addEventListener('change', (e) => { + CONFIG.PAINTING_SPEED_ENABLED = e.target.checked; + saveBotSettings(); + console.log(`โšก Batch speed control: ${CONFIG.PAINTING_SPEED_ENABLED ? 'ON' : 'OFF'}`); + const statusText = CONFIG.PAINTING_SPEED_ENABLED + ? 'Batch speed control enabled - will use configured batch size' + : 'Batch speed control disabled - will use all available charges immediately'; + Utils.showAlert(statusText, 'success'); + }); + } + + // (Advanced color listeners moved outside to work with resize dialog) + // (Advanced color listeners moved outside to work with resize dialog) + // Notifications listeners + const notifPermBtn = settingsContainer.querySelector('#notifRequestPermBtn'); + const notifTestBtn = settingsContainer.querySelector('#notifTestBtn'); + if (notifPermBtn) { + notifPermBtn.addEventListener('click', async () => { + const perm = await NotificationManager.requestPermission(); + if (perm === 'granted') Utils.showAlert(Utils.t('notificationsEnabled'), 'success'); + else Utils.showAlert(Utils.t('notificationsPermissionDenied'), 'warning'); + }); + } + if (notifTestBtn) { + notifTestBtn.addEventListener('click', () => { + NotificationManager.notify( + Utils.t('testNotificationTitle'), + Utils.t('testNotificationMessage'), + 'wplace-notify-test', + true + ); + }); + } + } + + 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 paintTransparentToggle = resizeContainer.querySelector('#paintTransparentToggle'); + const zoomSlider = resizeContainer.querySelector('#zoomSlider'); + const zoomValue = resizeContainer.querySelector('#zoomValue'); + const zoomInBtn = resizeContainer.querySelector('#zoomInBtn'); + const zoomOutBtn = resizeContainer.querySelector('#zoomOutBtn'); + const zoomFitBtn = resizeContainer.querySelector('#zoomFitBtn'); + const zoomActualBtn = resizeContainer.querySelector('#zoomActualBtn'); + const panModeBtn = resizeContainer.querySelector('#panModeBtn'); + const panStage = resizeContainer.querySelector('#resizePanStage'); + const canvasStack = resizeContainer.querySelector('#resizeCanvasStack'); + const baseCanvas = resizeContainer.querySelector('#resizeCanvas'); + const maskCanvas = resizeContainer.querySelector('#maskCanvas'); + const baseCtx = baseCanvas.getContext('2d'); + const maskCtx = maskCanvas.getContext('2d'); + const confirmResize = resizeContainer.querySelector('#confirmResize'); + const cancelResize = resizeContainer.querySelector('#cancelResize'); + const editImageBtn = resizeContainer.querySelector('#editImageBtn'); + const downloadPreviewBtn = resizeContainer.querySelector('#downloadPreviewBtn'); + const clearIgnoredBtn = resizeContainer.querySelector('#clearIgnoredBtn'); + + // Coordinate generation controls with smart visibility + const coordinateModeSelect = settingsContainer.querySelector('#coordinateModeSelect'); + const coordinateDirectionSelect = settingsContainer.querySelector('#coordinateDirectionSelect'); + const coordinateSnakeToggle = settingsContainer.querySelector('#coordinateSnakeToggle'); + const directionControls = settingsContainer.querySelector('#directionControls'); + const snakeControls = settingsContainer.querySelector('#snakeControls'); + const blockControls = settingsContainer.querySelector('#blockControls'); + const blockWidthInput = settingsContainer.querySelector('#blockWidthInput'); + const blockHeightInput = settingsContainer.querySelector('#blockHeightInput'); + const paintUnavailablePixelsToggle = settingsContainer.querySelector( + '#paintUnavailablePixelsToggle' + ); + + if (paintUnavailablePixelsToggle) { + paintUnavailablePixelsToggle.checked = state.paintUnavailablePixels; + paintUnavailablePixelsToggle.addEventListener('change', (e) => { + state.paintUnavailablePixels = e.target.checked; + saveBotSettings(); + console.log(`๐ŸŽจ Paint unavailable colors: ${state.paintUnavailablePixels ? 'ON' : 'OFF'}`); + const statusText = state.paintUnavailablePixels + ? 'Unavailable template colors will be painted with the closest available color' + : 'Unavailable template colors will be skipped'; + Utils.showAlert(statusText, 'success'); + }); + } + if (coordinateModeSelect) { + coordinateModeSelect.value = state.coordinateMode; + coordinateModeSelect.addEventListener('change', (e) => { + state.coordinateMode = e.target.value; + Utils.updateCoordinateUI({ + mode: state.coordinateMode, + directionControls, + snakeControls, + blockControls, + }); + saveBotSettings(); + console.log(`๐Ÿ”„ Coordinate mode changed to: ${state.coordinateMode}`); + Utils.showAlert(`Coordinate mode set to: ${state.coordinateMode}`, 'success'); + }); + } + + if (coordinateDirectionSelect) { + coordinateDirectionSelect.value = state.coordinateDirection; + coordinateDirectionSelect.addEventListener('change', (e) => { + state.coordinateDirection = e.target.value; + saveBotSettings(); + console.log(`๐Ÿงญ Coordinate direction changed to: ${state.coordinateDirection}`); + Utils.showAlert(`Coordinate direction set to: ${state.coordinateDirection}`, 'success'); + }); + } + + if (coordinateSnakeToggle) { + coordinateSnakeToggle.checked = state.coordinateSnake; + coordinateSnakeToggle.addEventListener('change', (e) => { + state.coordinateSnake = e.target.checked; + saveBotSettings(); + console.log(`๐Ÿ Snake pattern ${state.coordinateSnake ? 'enabled' : 'disabled'}`); + Utils.showAlert( + `Snake pattern ${state.coordinateSnake ? 'enabled' : 'disabled'}`, + 'success' + ); + }); + } + + if (blockWidthInput) { + blockWidthInput.value = state.blockWidth; + blockWidthInput.addEventListener('input', (e) => { + const width = parseInt(e.target.value); + if (width >= 1 && width <= 50) { + state.blockWidth = width; + saveBotSettings(); + } + }); + } + + if (blockHeightInput) { + blockHeightInput.value = state.blockHeight; + blockHeightInput.addEventListener('change', (e) => { + const height = parseInt(e.target.value); + if (height >= 1 && height <= 50) { + state.blockHeight = height; + saveBotSettings(); + } + }); + } + + if (compactBtn) { + compactBtn.addEventListener('click', () => { + container.classList.toggle('wplace-compact'); + const isCompact = container.classList.contains('wplace-compact'); + + if (isCompact) { + compactBtn.innerHTML = ''; + compactBtn.title = Utils.t('expandMode'); + } else { + compactBtn.innerHTML = ''; + compactBtn.title = Utils.t('compactMode'); + } + }); + } + + 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 = Utils.t('restore'); + } else { + container.classList.remove('wplace-minimized'); + content.classList.remove('wplace-hidden'); + minimizeBtn.innerHTML = ''; + minimizeBtn.title = Utils.t('minimize'); + } + saveBotSettings(); + }); + } + + if (toggleOverlayBtn) { + toggleOverlayBtn.addEventListener('click', () => { + const isEnabled = overlayManager.toggle(); + toggleOverlayBtn.classList.toggle('active', isEnabled); + toggleOverlayBtn.setAttribute('aria-pressed', isEnabled ? 'true' : 'false'); + Utils.showAlert(isEnabled ? Utils.t('overlayEnabled') : Utils.t('overlayDisabled'), 'info'); + }); + } + + if (state.minimized) { + container.classList.add('wplace-minimized'); + content.classList.add('wplace-hidden'); + if (minimizeBtn) { + minimizeBtn.innerHTML = ''; + minimizeBtn.title = Utils.t('restore'); + } + } else { + container.classList.remove('wplace-minimized'); + content.classList.remove('wplace-hidden'); + if (minimizeBtn) { + minimizeBtn.innerHTML = ''; + minimizeBtn.title = Utils.t('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(Utils.t('errorSavingProgress'), 'error'); + } + }); + } + + if (loadBtn) { + loadBtn.addEventListener('click', async () => { + const savedData = Utils.loadProgress(); + if (!savedData) { + updateUI('noSavedData', 'warning'); + Utils.showAlert(Utils.t('noSavedData'), 'warning'); + return; + } + + // CRITICAL FIX: If save file contains complete data, bypass initial setup check + // This matches old version behavior where save files could be loaded immediately + const hasCompleteData = savedData.state && savedData.imageData && + savedData.state.availableColors && + savedData.state.availableColors.length > 0; + + if (!state.initialSetupComplete && !hasCompleteData) { + Utils.showAlert(Utils.t('pleaseWaitInitialSetup'), '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) { + // CRITICAL FIX: Set initial setup complete if save had complete data + if (hasCompleteData) { + state.initialSetupComplete = true; + } + + updateUI('dataLoaded', 'success'); + Utils.showAlert(Utils.t('dataLoaded'), 'success'); + updateDataButtons(); + + // CRITICAL FIX: Force immediate stats update after save loading + await updateStats(); + + // Force stats display refresh by updating the stats container + const statsContainer = document.getElementById('wplace-stats-container'); + if (statsContainer && typeof updateStats === 'function') { + // Trigger a forced visual refresh of the stats + setTimeout(async () => { + await updateStats(); + }, 100); + } + + // Restore overlay if image data was loaded from localStorage + Utils.restoreOverlayFromData().catch((error) => { + console.error('Failed to restore overlay from localStorage:', error); + }); + + if (!state.colorsChecked) { + uploadBtn.disabled = false; + const loadExtractedBtn = document.getElementById('loadExtractedBtn'); + if (loadExtractedBtn) loadExtractedBtn.disabled = false; + } else { + uploadBtn.disabled = false; + const loadExtractedBtn = document.getElementById('loadExtractedBtn'); + if (loadExtractedBtn) loadExtractedBtn.disabled = false; + selectPosBtn.disabled = false; + } + + if (state.imageLoaded && state.startPosition && state.region && state.colorsChecked) { + startBtn.disabled = false; + } + } else { + Utils.showAlert(Utils.t('errorLoadingProgress'), '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 () => { + console.log('๐Ÿ” [DEBUG] Load from file button clicked'); + console.log('๐Ÿ” [DEBUG] Initial setup complete:', state.initialSetupComplete); + + try { + // First check if we can load the file - this will tell us if it has complete data + console.log('๐Ÿ” [DEBUG] Starting file upload...'); + const fileData = await Utils.createFileUploader(); + + console.log('๐Ÿ” [DEBUG] File data received:', !!fileData); + console.log('๐Ÿ” [DEBUG] File data keys:', fileData ? Object.keys(fileData) : 'N/A'); + + if (!fileData || !fileData.state) { + console.error('โŒ [DEBUG] Invalid file data or missing state'); + console.log('๐Ÿ” [DEBUG] FileData:', fileData); + Utils.showAlert(Utils.t('invalidFileFormat'), 'error'); + return; + } + + // CRITICAL FIX: If file contains complete data, bypass initial setup check + const hasCompleteData = fileData.state && fileData.imageData && + fileData.state.availableColors && + fileData.state.availableColors.length > 0; + + console.log('๐Ÿ” [DEBUG] Has complete data check:'); + console.log(' - fileData.state:', !!fileData.state); + console.log(' - fileData.imageData:', !!fileData.imageData); + console.log(' - fileData.state.availableColors:', !!fileData.state.availableColors); + console.log(' - availableColors length:', fileData.state.availableColors?.length); + console.log(' - hasCompleteData result:', hasCompleteData); + + if (!state.initialSetupComplete && !hasCompleteData) { + console.log('โš ๏ธ [DEBUG] Setup not complete and no complete data, showing warning'); + Utils.showAlert(Utils.t('pleaseWaitFileSetup'), 'warning'); + return; + } + + console.log('๐Ÿ” [DEBUG] Calling restoreProgress...'); + const success = Utils.restoreProgress(fileData); + console.log('๐Ÿ” [DEBUG] RestoreProgress result:', success); + + if (success) { + console.log('โœ… [DEBUG] File loaded successfully'); + + // CRITICAL FIX: Set initial setup complete if file had complete data + if (hasCompleteData) { + console.log('๐Ÿ” [DEBUG] Setting initialSetupComplete to true due to complete data'); + state.initialSetupComplete = true; + } + + updateUI('fileLoaded', 'success'); + Utils.showAlert(Utils.t('fileLoaded'), 'success'); + updateDataButtons(); + + console.log('๐Ÿ” [DEBUG] Updating stats...'); + await updateStats(); + + // Restore overlay if image data was loaded from file + console.log('๐Ÿ” [DEBUG] Attempting to restore overlay...'); + await Utils.restoreOverlayFromData().catch((error) => { + console.error('โŒ [DEBUG] Failed to restore overlay from file:', error); + }); + + console.log('๐Ÿ” [DEBUG] Updating button states after load...'); + console.log(' - state.colorsChecked:', state.colorsChecked); + console.log(' - state.imageLoaded:', state.imageLoaded); + console.log(' - state.startPosition:', !!state.startPosition); + console.log(' - state.region:', !!state.region); + + if (state.colorsChecked) { + console.log('๐Ÿ” [DEBUG] Enabling buttons due to colorsChecked'); + uploadBtn.disabled = false; + selectPosBtn.disabled = false; + resizeBtn.disabled = false; + } else { + console.log('๐Ÿ” [DEBUG] Only enabling upload button'); + uploadBtn.disabled = false; + } + + if (state.imageLoaded && state.startPosition && state.region && state.colorsChecked) { + console.log('๐Ÿ” [DEBUG] All conditions met, enabling start button'); + startBtn.disabled = false; + } else { + console.log('โš ๏ธ [DEBUG] Start button requirements not met'); + } + } else { + console.error('โŒ [DEBUG] RestoreProgress failed'); + Utils.showAlert('File loading failed - check console for details', 'error'); + } + } catch (error) { + console.error('โŒ [DEBUG] Error in file load process:', error); + console.error('โŒ [DEBUG] Error stack:', error.stack); + + if (error.message === 'Invalid JSON file') { + console.error('โŒ [DEBUG] Invalid JSON file detected'); + Utils.showAlert(Utils.t('invalidFileFormat'), 'error'); + } else { + console.error('โŒ [DEBUG] General file error:', error.message); + Utils.showAlert(`File error: ${error.message}`, 'error'); + } + } + }); + } + + updateUI = (messageKey, type = 'default', params = {}, silent = false) => { + const message = Utils.t(messageKey, params); + statusText.textContent = message; + statusText.className = `wplace-status status-${type}`; + + if (!silent) { + // Trigger animation only when silent = false + statusText.style.animation = 'none'; + void statusText.offsetWidth; // trick to restart the animation + statusText.style.animation = 'slide-in 0.3s ease-out'; + } + }; + + function updateChargeStatsDisplay(intervalMs) { + const currentChargesEl = document.getElementById('wplace-stat-charges-value'); + const fullChargeEl = document.getElementById('wplace-stat-fullcharge-value'); + if (!fullChargeEl && !currentChargesEl) return; + if (!state.fullChargeData) { + fullChargeEl.textContent = '--:--:--'; + return; + } + + const { current, max, cooldownMs, startTime, spentSinceShot } = state.fullChargeData; + const elapsed = Date.now() - startTime; + + // total charges including elapsed time and spent during painting since snapshot + const chargesGained = elapsed / cooldownMs; + const rawCharges = current + chargesGained - spentSinceShot; + const cappedCharges = Math.min(rawCharges, max); + + // rounding with 0.95 threshold + let displayCharges; + const fraction = cappedCharges - Math.floor(cappedCharges); + if (fraction >= 0.95) { + displayCharges = Math.ceil(cappedCharges); + } else { + displayCharges = Math.floor(cappedCharges); + } + + state.displayCharges = Math.max(0, displayCharges); + state.preciseCurrentCharges = cappedCharges; + + const remainingMs = getMsToTargetCharges(cappedCharges, max, state.cooldown, intervalMs); + const timeText = Utils.msToTimeText(remainingMs); + + if (currentChargesEl) { + currentChargesEl.innerHTML = `${state.displayCharges} / ${state.maxCharges}`; + } + + if ( + state.displayCharges < state.cooldownChargeThreshold && + !state.stopFlag && + state.running + ) { + updateChargesThresholdUI(intervalMs); + } + + if (fullChargeEl) { + if (state.displayCharges >= max) { + fullChargeEl.innerHTML = `FULL`; + } else { + fullChargeEl.innerHTML = ` + ${timeText} + `; + } + } + } + + updateStats = async (isManualRefresh = false) => { + const isFirstCheck = !state.fullChargeData?.startTime; + + const minUpdateInterval = 60_000; + const maxUpdateInterval = 90_000; + const randomUpdateThreshold = + minUpdateInterval + Math.random() * (maxUpdateInterval - minUpdateInterval); + const timeSinceLastUpdate = Date.now() - (state.fullChargeData?.startTime || 0); + const isTimeToUpdate = timeSinceLastUpdate >= randomUpdateThreshold; + + const shouldCallApi = isFirstCheck || isTimeToUpdate; + + const { charges, max, cooldown } = await WPlaceService.getCharges(); + state.displayCharges = Math.floor(charges); + state.preciseCurrentCharges = charges; + state.cooldown = cooldown; + state.maxCharges = Math.floor(max) > 1 ? Math.floor(max) : state.maxCharges; + + state.fullChargeData = { + current: charges, + max: max, + cooldownMs: cooldown, + startTime: Date.now(), + spentSinceShot: 0, + }; + // Evaluate notifications every time we refresh server-side charges + NotificationManager.maybeNotifyChargesReached(); + + if (state.fullChargeInterval) { + clearInterval(state.fullChargeInterval); + state.fullChargeInterval = null; + } + const intervalMs = 1000; + state.fullChargeInterval = setInterval( + () => updateChargeStatsDisplay(intervalMs), + intervalMs + ); + + if (cooldownSlider && cooldownSlider.max !== state.maxCharges) { + cooldownSlider.max = state.maxCharges; + } + if (cooldownInput && cooldownInput.max !== state.maxCharges) { + cooldownInput.max = state.maxCharges; + } + + // // Update current account charges in the account list + // await updateCurrentAccountInList(); + + let imageStatsHTML = ''; + if (state.imageLoaded) { + const progress = + state.totalPixels > 0 ? Math.round((state.paintedPixels / state.totalPixels) * 100) : 0; + const remainingPixels = state.totalPixels - state.paintedPixels; + + // Updated estimation calculation for new cooldown logic + // Now we wait for cooldownChargeThreshold before processing pixels + + // Calculate batch size (with fallback if function not yet defined) + let batchSize; + try { + batchSize = typeof calculateBatchSize === 'function' ? calculateBatchSize() : state.paintingSpeed || 5; + } catch (e) { + batchSize = state.paintingSpeed || 5; + } + + // Ensure batchSize is valid and not zero + batchSize = Math.max(1, Math.min(batchSize, remainingPixels)); + const batchesNeeded = Math.ceil(remainingPixels / batchSize); + + // Calculate time accounting for cooldown threshold behavior with safety checks + let estimatedMs = 0; + if (remainingPixels > 0 && Number.isFinite(state.cooldown) && state.cooldown > 0) { + // Current charges available check + const currentCharges = Math.max(0, state.displayCharges); + const thresholdCharges = Math.max(1, state.cooldownChargeThreshold || 1); + + if (currentCharges < thresholdCharges) { + // Need to wait for charges to reach threshold first + const chargesNeeded = thresholdCharges - currentCharges; + estimatedMs += chargesNeeded * state.cooldown; + } + + // Calculate painting time more accurately + // Each batch uses thresholdCharges, so calculate how many cycles we need + const pixelsPerCycle = Math.min(batchSize, thresholdCharges); + const cyclesNeeded = Math.ceil(remainingPixels / pixelsPerCycle); + + // Time between cycles (waiting for charges to regenerate) + if (cyclesNeeded > 1) { + const regenerationTime = (cyclesNeeded - 1) * thresholdCharges * state.cooldown; + estimatedMs += regenerationTime; + } + + // Add painting speed delay if enabled + if (CONFIG.PAINTING_SPEED_ENABLED && state.paintingSpeed > 0) { + const paintingDelay = remainingPixels * (1000 / state.paintingSpeed); + estimatedMs += paintingDelay; + } + } + + // Safety check to prevent infinity or invalid values + if (!Number.isFinite(estimatedMs) || estimatedMs < 0) { + estimatedMs = 0; + } + + state.estimatedTime = estimatedMs; + progressBar.style.width = `${progress}%`; + + imageStatsHTML = ` +
+
${Utils.t('progress')}
+
${progress}%
+
+
+
${Utils.t( + 'pixels' + )}
+
${state.paintedPixels}/${state.totalPixels}
+
+ `; + } + + let colorSwatchesHTML = ''; + state.availableColors = state.availableColors.filter( + (c) => c.name !== 'Unknown CoIor NaN' && c.id !== null + ); + + const availableColors = Utils.extractAvailableColors(); + const newCount = Array.isArray(availableColors) ? availableColors.length : 0; + + if (newCount === 0 && isManualRefresh) { + Utils.showAlert(Utils.t('noColorsFound'), 'warning'); + } else if (newCount > 0 && state.availableColors.length < newCount) { + const oldCount = state.availableColors.length; + + Utils.showAlert( + Utils.t('colorsUpdated', { + oldCount, + newCount: newCount, + diffCount: newCount - oldCount, + }), + 'success' + ); + state.availableColors = availableColors; + } + if (state.colorsChecked) { + colorSwatchesHTML = state.availableColors + .map((color) => { + const rgbString = `rgb(${color.rgb.join(',')})`; + return `
`; + }) + .join(''); + } + + // Calculate multi-account statistics + let totalAllCharges = 0; + let totalMaxCharges = 0; + const accounts = accountManager.getAllAccounts(); + if (accounts.length > 0) { + // Use real-time charges for current account, stored data for others + const currentAccount = accountManager.getCurrentAccount(); + totalAllCharges = accounts.reduce((sum, acc) => { + if (currentAccount && acc.token === currentAccount.token) { + // Use real-time data for current account + return sum + Math.floor(state.displayCharges || state.preciseCurrentCharges || 0); + } else { + // Use stored data for other accounts + return sum + Math.floor(acc.Charges || 0); + } + }, 0); + totalMaxCharges = accounts.reduce((sum, acc) => { + if (currentAccount && acc.token === currentAccount.token) { + // Use real-time max charges for current account + return sum + Math.floor(state.maxCharges || acc.Max || 0); + } else { + // Use stored data for other accounts + return sum + Math.floor(acc.Max || 0); + } + }, 0); + } + + statsArea.innerHTML = ` + ${imageStatsHTML} + ${accounts.length > 0 ? ` +
+
+ Total All Accounts Charges +
+
+ ${totalAllCharges}/${totalMaxCharges} +
+
+ ` : ''} +
+
+ ${Utils.t('charges')} +
+
+ ${state.displayCharges} / ${state.maxCharges} +
+
+
+
+ ${Utils.t('fullChargeIn')} +
+
--:--:--
+
+ ${state.colorsChecked + ? ` +
+
${Utils.t( + 'availableColors', + { count: state.availableColors.length } + )}
+
+ ${colorSwatchesHTML} +
+
+ ` + : '' + } + `; + + // should be after statsArea.innerHTML = '...'. todo make full stats ui update partial + updateChargeStatsDisplay(intervalMs); + }; + + updateDataButtons = () => { + const hasImageData = state.imageLoaded && state.imageData; + saveBtn.disabled = !hasImageData; + saveToFileBtn.disabled = !hasImageData; + }; + + updateDataButtons(); + + function showMoveArtworkPanel() { + // Create move artwork control panel like status panels + const movePanel = document.createElement('div'); + movePanel.id = 'moveArtworkPanel'; + movePanel.className = 'wplace-move-panel'; + + movePanel.innerHTML = ` +
+
+ + Move Artwork +
+
+ +
+
+
+
+ +
+ +
1px
+ +
+ +
+
+ `; + + // No overlay - append directly to body like other panels + document.body.appendChild(movePanel); + + // Make the panel draggable + makeDraggable(movePanel); + + // Add event listeners for movement + let currentMessageTimeout = null; + + function moveArtwork(deltaX, deltaY) { + if (state.startPosition && state.region) { + const newX = state.startPosition.x + deltaX; + const newY = state.startPosition.y + deltaY; + + console.log(`๐Ÿ”„ Moving artwork from (${state.startPosition.x}, ${state.startPosition.y}) to (${newX}, ${newY})`); + + state.startPosition.x = newX; + state.startPosition.y = newY; + + // Clear any existing message timeout and alerts immediately + if (currentMessageTimeout) { + clearTimeout(currentMessageTimeout); + currentMessageTimeout = null; + } + Utils.hideAlert(); // Hide current alert immediately + + // Update overlay position if available + if (overlayManager) { + overlayManager.setPosition(state.startPosition, state.region) + .then(() => { + console.log('โœ… Overlay position updated'); + Utils.showAlert(`Moved to position (${newX}, ${newY})`, 'success'); + // Set new timeout for this message + currentMessageTimeout = setTimeout(() => { + Utils.hideAlert(); + currentMessageTimeout = null; + }, 1500); // Message disappears after 1.5 seconds + }) + .catch(err => { + console.error('โŒ Failed to update overlay:', err); + Utils.showAlert('Failed to update overlay position', 'error'); + }); + } else { + Utils.showAlert(`Position updated to (${newX}, ${newY})`, 'success'); + // Set new timeout for this message + currentMessageTimeout = setTimeout(() => { + Utils.hideAlert(); + currentMessageTimeout = null; + }, 1500); + } + } else { + Utils.showAlert('Please select a position first before moving artwork', 'warning'); + } + } + + document.getElementById('moveUp').addEventListener('click', () => moveArtwork(0, -1)); + document.getElementById('moveDown').addEventListener('click', () => moveArtwork(0, 1)); + document.getElementById('moveLeft').addEventListener('click', () => moveArtwork(-1, 0)); + document.getElementById('moveRight').addEventListener('click', () => moveArtwork(1, 0)); + + // Close panel + function closeMovePanel() { + if (currentMessageTimeout) { + clearTimeout(currentMessageTimeout); + currentMessageTimeout = null; + } + Utils.hideAlert(); + document.body.removeChild(movePanel); + } + + document.getElementById('closeMovePanel').addEventListener('click', closeMovePanel); + } + + function showResizeDialog(processor) { + let baseProcessor = processor; + let width, height; + if (state.originalImage?.dataUrl) { + baseProcessor = new ImageProcessor(state.originalImage.dataUrl); + width = state.originalImage.width; + height = state.originalImage.height; + } else { + const dims = processor.getDimensions(); + width = dims.width; + height = dims.height; + } + const aspectRatio = width / height; + + const rs = state.resizeSettings; + widthSlider.max = width * 2; + heightSlider.max = height * 2; + let initialW = width; + let initialH = height; + if ( + rs && + Number.isFinite(rs.width) && + Number.isFinite(rs.height) && + rs.width > 0 && + rs.height > 0 + ) { + initialW = rs.width; + initialH = rs.height; + } + // Clamp to slider ranges + initialW = Math.max( + parseInt(widthSlider.min, 10) || 10, + Math.min(initialW, parseInt(widthSlider.max, 10)) + ); + initialH = Math.max( + parseInt(heightSlider.min, 10) || 10, + Math.min(initialH, parseInt(heightSlider.max, 10)) + ); + widthSlider.value = initialW; + heightSlider.value = initialH; + widthValue.textContent = initialW; + heightValue.textContent = initialH; + zoomSlider.value = 1; + if (zoomValue) zoomValue.textContent = '100%'; + paintWhiteToggle.checked = state.paintWhitePixels; + paintTransparentToggle.checked = state.paintTransparentPixels; + + let _previewTimer = null; + let _previewJobId = 0; + let _isDraggingSize = false; + let _zoomLevel = 1; + let _ditherWorkBuf = null; + let _ditherEligibleBuf = null; + const ensureDitherBuffers = (n) => { + if (!_ditherWorkBuf || _ditherWorkBuf.length !== n * 3) + _ditherWorkBuf = new Float32Array(n * 3); + if (!_ditherEligibleBuf || _ditherEligibleBuf.length !== n) + _ditherEligibleBuf = new Uint8Array(n); + return { work: _ditherWorkBuf, eligible: _ditherEligibleBuf }; + }; + let _maskImageData = null; + let _maskData = null; + let _dirty = null; + const _resetDirty = () => { + _dirty = { minX: Infinity, minY: Infinity, maxX: -1, maxY: -1 }; + }; + const _markDirty = (x, y) => { + if (!_dirty) _resetDirty(); + if (x < _dirty.minX) _dirty.minX = x; + if (y < _dirty.minY) _dirty.minY = y; + if (x > _dirty.maxX) _dirty.maxX = x; + if (y > _dirty.maxY) _dirty.maxY = y; + }; + const _flushDirty = () => { + if (!_dirty || _dirty.maxX < _dirty.minX || _dirty.maxY < _dirty.minY) return; + const x = Math.max(0, _dirty.minX); + const y = Math.max(0, _dirty.minY); + const w = Math.min(maskCanvas.width - x, _dirty.maxX - x + 1); + const h = Math.min(maskCanvas.height - y, _dirty.maxY - y + 1); + if (w > 0 && h > 0) maskCtx.putImageData(_maskImageData, 0, 0, x, y, w, h); + _resetDirty(); + }; + const _ensureMaskOverlayBuffers = (w, h, rebuildFromMask = false) => { + if (!_maskImageData || _maskImageData.width !== w || _maskImageData.height !== h) { + _maskImageData = maskCtx.createImageData(w, h); + _maskData = _maskImageData.data; + rebuildFromMask = true; + } + if (rebuildFromMask) { + const m = state.resizeIgnoreMask; + const md = _maskData; + md.fill(0); + if (m) { + for (let i = 0; i < m.length; i++) + if (m[i]) { + const p = i * 4; + md[p] = 255; + md[p + 1] = 0; + md[p + 2] = 0; + md[p + 3] = 150; + } + } + maskCtx.putImageData(_maskImageData, 0, 0); + _resetDirty(); + } + }; + const ensureMaskSize = (w, h) => { + if (!state.resizeIgnoreMask || state.resizeIgnoreMask.length !== w * h) { + state.resizeIgnoreMask = new Uint8Array(w * h); + } + baseCanvas.width = w; + baseCanvas.height = h; + maskCanvas.width = w; + maskCanvas.height = h; + maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height); + // Ensure overlay buffers exist and rebuild from mask when dimensions change + _ensureMaskOverlayBuffers(w, h, true); + }; + _updateResizePreview = async () => { + const jobId = ++_previewJobId; + const newWidth = parseInt(widthSlider.value, 10); + const newHeight = parseInt(heightSlider.value, 10); + _zoomLevel = parseFloat(zoomSlider.value); + + widthValue.textContent = newWidth; + heightValue.textContent = newHeight; + + ensureMaskSize(newWidth, newHeight); + canvasStack.style.width = newWidth + 'px'; + canvasStack.style.height = newHeight + 'px'; + baseCtx.imageSmoothingEnabled = false; + + if (!state.availableColors || state.availableColors.length === 0) { + if (baseProcessor !== processor && (!baseProcessor.img || !baseProcessor.canvas)) { + await baseProcessor.load(); + } + baseCtx.clearRect(0, 0, newWidth, newHeight); + baseCtx.drawImage(baseProcessor.img, 0, 0, newWidth, newHeight); + // Draw existing mask overlay buffer + maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height); + if (_maskImageData) maskCtx.putImageData(_maskImageData, 0, 0); + updateZoomLayout(); + return; + } + + if (baseProcessor !== processor && (!baseProcessor.img || !baseProcessor.canvas)) { + await baseProcessor.load(); + } + baseCtx.clearRect(0, 0, newWidth, newHeight); + baseCtx.drawImage(baseProcessor.img, 0, 0, newWidth, newHeight); + const imgData = baseCtx.getImageData(0, 0, newWidth, newHeight); + const data = imgData.data; + + const tThresh = state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD; + + const applyFSDither = () => { + const w = newWidth, + h = newHeight; + const n = w * h; + const { work, eligible } = ensureDitherBuffers(n); + for (let y = 0; y < h; y++) { + for (let x = 0; x < w; x++) { + const idx = y * w + x; + const i4 = idx * 4; + const r = data[i4], + g = data[i4 + 1], + b = data[i4 + 2], + a = data[i4 + 3]; + const isEligible = + (state.paintTransparentPixels || a >= tThresh) && + (state.paintWhitePixels || !Utils.isWhitePixel(r, g, b)); + eligible[idx] = isEligible ? 1 : 0; + work[idx * 3] = r; + work[idx * 3 + 1] = g; + work[idx * 3 + 2] = b; + if (!isEligible) { + data[i4 + 3] = 0; // transparent in preview overlay + } + } + } + + const diffuse = (nx, ny, er, eg, eb, factor) => { + if (nx < 0 || nx >= w || ny < 0 || ny >= h) return; + const nidx = ny * w + nx; + if (!eligible[nidx]) return; + const base = nidx * 3; + work[base] = Math.min(255, Math.max(0, work[base] + er * factor)); + work[base + 1] = Math.min(255, Math.max(0, work[base + 1] + eg * factor)); + work[base + 2] = Math.min(255, Math.max(0, work[base + 2] + eb * factor)); + }; + + for (let y = 0; y < h; y++) { + for (let x = 0; x < w; x++) { + const idx = y * w + x; + if (!eligible[idx]) continue; + const base = idx * 3; + const r0 = work[base], + g0 = work[base + 1], + b0 = work[base + 2]; + const [nr, ng, nb] = Utils.findClosestPaletteColor( + r0, + g0, + b0, + state.activeColorPalette + ); + const i4 = idx * 4; + data[i4] = nr; + data[i4 + 1] = ng; + data[i4 + 2] = nb; + data[i4 + 3] = 255; + + const er = r0 - nr; + const eg = g0 - ng; + const eb = b0 - nb; + + diffuse(x + 1, y, er, eg, eb, 7 / 16); + diffuse(x - 1, y + 1, er, eg, eb, 3 / 16); + diffuse(x, y + 1, er, eg, eb, 5 / 16); + diffuse(x + 1, y + 1, er, eg, eb, 1 / 16); + } + } + }; + + // Skip expensive dithering while user is dragging sliders + if (state.ditheringEnabled && !_isDraggingSize) { + applyFSDither(); + } else { + 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 ( + (!state.paintTransparentPixels && a < tThresh) || + (!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; + } + } + + if (jobId !== _previewJobId) return; + baseCtx.putImageData(imgData, 0, 0); + maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height); + if (_maskImageData) maskCtx.putImageData(_maskImageData, 0, 0); + updateZoomLayout(); + }; + + const onWidthInput = () => { + if (keepAspect.checked) { + heightSlider.value = Math.round(parseInt(widthSlider.value, 10) / aspectRatio); + } + _updateResizePreview(); + const curW = parseInt(widthSlider.value, 10); + const curH = parseInt(heightSlider.value, 10); + state.resizeSettings = { + baseWidth: width, + baseHeight: height, + width: curW, + height: curH, + }; + saveBotSettings(); + // Auto-fit after size changes + const fit = typeof computeFitZoom === 'function' ? computeFitZoom() : 1; + if (!isNaN(fit) && isFinite(fit)) applyZoom(fit); + }; + + const onHeightInput = () => { + if (keepAspect.checked) { + widthSlider.value = Math.round(parseInt(heightSlider.value, 10) * aspectRatio); + } + _updateResizePreview(); + const curW = parseInt(widthSlider.value, 10); + const curH = parseInt(heightSlider.value, 10); + state.resizeSettings = { + baseWidth: width, + baseHeight: height, + width: curW, + height: curH, + }; + saveBotSettings(); + // Auto-fit after size changes + const fit = typeof computeFitZoom === 'function' ? computeFitZoom() : 1; + if (!isNaN(fit) && isFinite(fit)) applyZoom(fit); + }; + + paintWhiteToggle.onchange = (e) => { + state.paintWhitePixels = e.target.checked; + _updateResizePreview(); + saveBotSettings(); + }; + + paintTransparentToggle.onchange = (e) => { + state.paintTransparentPixels = e.target.checked; + _updateResizePreview(); + saveBotSettings(); + }; + + let panX = 0, + panY = 0; + const clampPan = () => { + const wrapRect = panStage?.getBoundingClientRect() || { + width: 0, + height: 0, + }; + const w = (baseCanvas.width || 1) * _zoomLevel; + const h = (baseCanvas.height || 1) * _zoomLevel; + if (w <= wrapRect.width) { + panX = Math.floor((wrapRect.width - w) / 2); + } else { + const minX = wrapRect.width - w; + panX = Math.min(0, Math.max(minX, panX)); + } + if (h <= wrapRect.height) { + panY = Math.floor((wrapRect.height - h) / 2); + } else { + const minY = wrapRect.height - h; + panY = Math.min(0, Math.max(minY, panY)); + } + }; + let _panRaf = 0; + const applyPan = () => { + if (_panRaf) return; + _panRaf = requestAnimationFrame(() => { + clampPan(); + canvasStack.style.transform = `translate3d(${Math.round( + panX + )}px, ${Math.round(panY)}px, 0) scale(${_zoomLevel})`; + _panRaf = 0; + }); + }; + + const updateZoomLayout = () => { + const w = baseCanvas.width || 1, + h = baseCanvas.height || 1; + baseCanvas.style.width = w + 'px'; + baseCanvas.style.height = h + 'px'; + maskCanvas.style.width = w + 'px'; + maskCanvas.style.height = h + 'px'; + canvasStack.style.width = w + 'px'; + canvasStack.style.height = h + 'px'; + applyPan(); + }; + const applyZoom = (z) => { + _zoomLevel = Math.max(0.05, Math.min(20, z || 1)); + zoomSlider.value = _zoomLevel; + updateZoomLayout(); + if (zoomValue) zoomValue.textContent = `${Math.round(_zoomLevel * 100)}%`; + }; + zoomSlider.addEventListener('input', () => { + applyZoom(parseFloat(zoomSlider.value)); + }); + if (zoomInBtn) + zoomInBtn.addEventListener('click', () => applyZoom(parseFloat(zoomSlider.value) + 0.1)); + if (zoomOutBtn) + zoomOutBtn.addEventListener('click', () => applyZoom(parseFloat(zoomSlider.value) - 0.1)); + const computeFitZoom = () => { + const wrapRect = panStage?.getBoundingClientRect(); + if (!wrapRect) return 1; + const w = baseCanvas.width || 1; + const h = baseCanvas.height || 1; + const margin = 10; + const scaleX = (wrapRect.width - margin) / w; + const scaleY = (wrapRect.height - margin) / h; + return Math.max(0.05, Math.min(20, Math.min(scaleX, scaleY))); + }; + if (zoomFitBtn) + zoomFitBtn.addEventListener('click', () => { + applyZoom(computeFitZoom()); + centerInView(); + }); + if (zoomActualBtn) + zoomActualBtn.addEventListener('click', () => { + applyZoom(1); + centerInView(); + }); + + const centerInView = () => { + if (!panStage) return; + const rect = panStage.getBoundingClientRect(); + const w = (baseCanvas.width || 1) * _zoomLevel; + const h = (baseCanvas.height || 1) * _zoomLevel; + panX = Math.floor((rect.width - w) / 2); + panY = Math.floor((rect.height - h) / 2); + applyPan(); + }; + + let isPanning = false; + let startX = 0, + startY = 0, + startPanX = 0, + startPanY = 0; + let allowPan = false; // Space key + let panMode = false; // Explicit pan mode toggle for touch/one-button mice + const isPanMouseButton = (e) => e.button === 1 || e.button === 2; + const setCursor = (val) => { + if (panStage) panStage.style.cursor = val; + }; + const isPanActive = (e) => panMode || allowPan || isPanMouseButton(e); + const updatePanModeBtn = () => { + if (!panModeBtn) return; + panModeBtn.classList.toggle('active', panMode); + panModeBtn.setAttribute('aria-pressed', panMode ? 'true' : 'false'); + }; + if (panModeBtn) { + updatePanModeBtn(); + panModeBtn.addEventListener('click', () => { + panMode = !panMode; + updatePanModeBtn(); + setCursor(panMode ? 'grab' : ''); + }); + } + if (panStage) { + panStage.addEventListener('contextmenu', (e) => { + if (allowPan) e.preventDefault(); + }); + window.addEventListener('keydown', (e) => { + if (e.code === 'Space') { + allowPan = true; + setCursor('grab'); + } + }); + window.addEventListener('keyup', (e) => { + if (e.code === 'Space') { + allowPan = false; + if (!isPanning) setCursor(''); + } + }); + panStage.addEventListener('mousedown', (e) => { + if (!isPanActive(e)) return; + e.preventDefault(); + isPanning = true; + startX = e.clientX; + startY = e.clientY; + startPanX = panX; + startPanY = panY; + setCursor('grabbing'); + }); + window.addEventListener('mousemove', (e) => { + if (!isPanning) return; + const dx = e.clientX - startX; + const dy = e.clientY - startY; + panX = startPanX + dx; + panY = startPanY + dy; + applyPan(); + }); + window.addEventListener('mouseup', () => { + if (isPanning) { + isPanning = false; + setCursor(allowPan ? 'grab' : ''); + } + }); + panStage.addEventListener( + 'wheel', + (e) => { + if (!e.ctrlKey && !e.metaKey) return; + e.preventDefault(); + const rect = panStage.getBoundingClientRect(); + const cx = e.clientX - rect.left - panX; + const cy = e.clientY - rect.top - panY; + const before = _zoomLevel; + const step = Math.max(0.05, Math.min(0.5, Math.abs(e.deltaY) > 20 ? 0.2 : 0.1)); + const next = Math.max(0.05, Math.min(20, before + (e.deltaY > 0 ? -step : step))); + if (next === before) return; + const scale = next / before; + panX = panX - cx * (scale - 1); + panY = panY - cy * (scale - 1); + applyZoom(next); + }, + { passive: false } + ); + let lastTouchDist = null; + let touchStartTime = 0; + let doubleTapTimer = null; + panStage.addEventListener( + 'touchstart', + (e) => { + if (e.touches.length === 1) { + const t = e.touches[0]; + isPanning = true; + startX = t.clientX; + startY = t.clientY; + startPanX = panX; + startPanY = panY; + setCursor('grabbing'); + const now = Date.now(); + if (now - touchStartTime < 300) { + // double tap -> toggle 100%/fit + const z = Math.abs(_zoomLevel - 1) < 0.01 ? computeFitZoom() : 1; + applyZoom(z); + centerInView(); + if (doubleTapTimer) clearTimeout(doubleTapTimer); + } else { + touchStartTime = now; + doubleTapTimer = setTimeout(() => { + doubleTapTimer = null; + }, 320); + } + } else if (e.touches.length === 2) { + // Pinch start + const [a, b] = e.touches; + lastTouchDist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY); + } + }, + { passive: true } + ); + panStage.addEventListener( + 'touchmove', + (e) => { + if (e.touches.length === 1 && isPanning) { + const t = e.touches[0]; + const dx = t.clientX - startX; + const dy = t.clientY - startY; + panX = startPanX + dx; + panY = startPanY + dy; + applyPan(); + } else if (e.touches.length === 2 && lastTouchDist != null) { + e.preventDefault(); + const [a, b] = e.touches; + const dist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY); + const rect = panStage.getBoundingClientRect(); + const centerX = (a.clientX + b.clientX) / 2 - rect.left - panX; + const centerY = (a.clientY + b.clientY) / 2 - rect.top - panY; + const before = _zoomLevel; + const scale = dist / (lastTouchDist || dist); + const next = Math.max(0.05, Math.min(20, before * scale)); + if (next !== before) { + panX = panX - centerX * (next / before - 1); + panY = panY - centerY * (next / before - 1); + applyZoom(next); + } + lastTouchDist = dist; + } + }, + { passive: false } + ); + panStage.addEventListener('touchend', () => { + isPanning = false; + lastTouchDist = null; + setCursor(panMode || allowPan ? 'grab' : ''); + }); + } + const schedulePreview = () => { + if (_previewTimer) clearTimeout(_previewTimer); + const run = () => { + _previewTimer = null; + _updateResizePreview(); + }; + if (window.requestIdleCallback) { + _previewTimer = setTimeout(() => requestIdleCallback(run, { timeout: 150 }), 50); + } else { + _previewTimer = setTimeout(() => requestAnimationFrame(run), 50); + } + }; + // Track dragging to reduce work and skip dithering during drag + const markDragStart = () => { + _isDraggingSize = true; + }; + const markDragEnd = () => { + _isDraggingSize = false; + schedulePreview(); + }; + widthSlider.addEventListener('pointerdown', markDragStart); + heightSlider.addEventListener('pointerdown', markDragStart); + widthSlider.addEventListener('pointerup', markDragEnd); + heightSlider.addEventListener('pointerup', markDragEnd); + widthSlider.addEventListener('input', () => { + onWidthInput(); + schedulePreview(); + }); + heightSlider.addEventListener('input', () => { + onHeightInput(); + schedulePreview(); + }); + + // Mask painting UX: brush size, modes, row/column fills, and precise coords + let draggingMask = false; + let lastPaintX = -1, + lastPaintY = -1; + let brushSize = 1; + let rowColSize = 1; + let maskMode = 'ignore'; // 'ignore' | 'unignore' | 'toggle' + const brushEl = resizeContainer.querySelector('#maskBrushSize'); + const brushValEl = resizeContainer.querySelector('#maskBrushSizeValue'); + const btnIgnore = resizeContainer.querySelector('#maskModeIgnore'); + const btnUnignore = resizeContainer.querySelector('#maskModeUnignore'); + const btnToggle = resizeContainer.querySelector('#maskModeToggle'); + const clearIgnoredBtnEl = resizeContainer.querySelector('#clearIgnoredBtn'); + const invertMaskBtn = resizeContainer.querySelector('#invertMaskBtn'); + const rowColSizeEl = resizeContainer.querySelector('#rowColSize'); + const rowColSizeValEl = resizeContainer.querySelector('#rowColSizeValue'); + + const updateModeButtons = () => { + const map = [ + [btnIgnore, 'ignore'], + [btnUnignore, 'unignore'], + [btnToggle, 'toggle'], + ]; + for (const [el, m] of map) { + if (!el) continue; + const active = maskMode === m; + el.classList.toggle('active', active); + el.setAttribute('aria-pressed', active ? 'true' : 'false'); + } + }; + const setMode = (mode) => { + maskMode = mode; + updateModeButtons(); + }; + if (brushEl && brushValEl) { + brushEl.addEventListener('input', () => { + brushSize = parseInt(brushEl.value, 10) || 1; + brushValEl.textContent = brushSize; + }); + brushValEl.textContent = brushEl.value; + brushSize = parseInt(brushEl.value, 10) || 1; + } + if (rowColSizeEl && rowColSizeValEl) { + rowColSizeEl.addEventListener('input', () => { + rowColSize = parseInt(rowColSizeEl.value, 10) || 1; + rowColSizeValEl.textContent = rowColSize; + }); + rowColSizeValEl.textContent = rowColSizeEl.value; + rowColSize = parseInt(rowColSizeEl.value, 10) || 1; + } + if (btnIgnore) btnIgnore.addEventListener('click', () => setMode('ignore')); + if (btnUnignore) btnUnignore.addEventListener('click', () => setMode('unignore')); + if (btnToggle) btnToggle.addEventListener('click', () => setMode('toggle')); + // Initialize button state (default to toggle mode) + updateModeButtons(); + + const mapClientToPixel = (clientX, clientY) => { + // Compute without rounding until final step to avoid drift at higher zoom + const rect = baseCanvas.getBoundingClientRect(); + const scaleX = rect.width / baseCanvas.width; + const scaleY = rect.height / baseCanvas.height; + const dx = (clientX - rect.left) / scaleX; + const dy = (clientY - rect.top) / scaleY; + const x = Math.floor(dx); + const y = Math.floor(dy); + return { x, y }; + }; + + const ensureMask = (w, h) => { + if (!state.resizeIgnoreMask || state.resizeIgnoreMask.length !== w * h) { + state.resizeIgnoreMask = new Uint8Array(w * h); + } + }; + + const paintCircle = (cx, cy, radius, value) => { + const w = baseCanvas.width, + h = baseCanvas.height; + ensureMask(w, h); + const r2 = radius * radius; + for (let yy = cy - radius; yy <= cy + radius; yy++) { + if (yy < 0 || yy >= h) continue; + for (let xx = cx - radius; xx <= cx + radius; xx++) { + if (xx < 0 || xx >= w) continue; + const dx = xx - cx, + dy = yy - cy; + if (dx * dx + dy * dy <= r2) { + const idx = yy * w + xx; + let val = state.resizeIgnoreMask[idx]; + if (maskMode === 'toggle') { + val = val ? 0 : 1; + } else if (maskMode === 'ignore') { + val = 1; + } else { + val = 0; + } + state.resizeIgnoreMask[idx] = val; + if (_maskData) { + const p = idx * 4; + if (val) { + _maskData[p] = 255; + _maskData[p + 1] = 0; + _maskData[p + 2] = 0; + _maskData[p + 3] = 150; + } else { + _maskData[p] = 0; + _maskData[p + 1] = 0; + _maskData[p + 2] = 0; + _maskData[p + 3] = 0; + } + _markDirty(xx, yy); + } + } + } + } + }; + + const paintRow = (y, value) => { + const w = baseCanvas.width, + h = baseCanvas.height; + ensureMask(w, h); + if (y < 0 || y >= h) return; + + // Paint multiple rows based on rowColSize + const halfSize = Math.floor(rowColSize / 2); + const startY = Math.max(0, y - halfSize); + const endY = Math.min(h - 1, y + halfSize); + + for (let rowY = startY; rowY <= endY; rowY++) { + for (let x = 0; x < w; x++) { + const idx = rowY * w + x; + let val = state.resizeIgnoreMask[idx]; + if (maskMode === 'toggle') { + val = val ? 0 : 1; + } else if (maskMode === 'ignore') { + val = 1; + } else { + val = 0; + } + state.resizeIgnoreMask[idx] = val; + if (_maskData) { + const p = idx * 4; + if (val) { + _maskData[p] = 255; + _maskData[p + 1] = 0; + _maskData[p + 2] = 0; + _maskData[p + 3] = 150; + } else { + _maskData[p] = 0; + _maskData[p + 1] = 0; + _maskData[p + 2] = 0; + _maskData[p + 3] = 0; + } + } + } + if (_maskData) { + _markDirty(0, rowY); + _markDirty(w - 1, rowY); + } + } + }; + + const paintColumn = (x, value) => { + const w = baseCanvas.width, + h = baseCanvas.height; + ensureMask(w, h); + if (x < 0 || x >= w) return; + + // Paint multiple columns based on rowColSize + const halfSize = Math.floor(rowColSize / 2); + const startX = Math.max(0, x - halfSize); + const endX = Math.min(w - 1, x + halfSize); + + for (let colX = startX; colX <= endX; colX++) { + for (let y = 0; y < h; y++) { + const idx = y * w + colX; + let val = state.resizeIgnoreMask[idx]; + if (maskMode === 'toggle') { + val = val ? 0 : 1; + } else if (maskMode === 'ignore') { + val = 1; + } else { + val = 0; + } + state.resizeIgnoreMask[idx] = val; + if (_maskData) { + const p = idx * 4; + if (val) { + _maskData[p] = 255; + _maskData[p + 1] = 0; + _maskData[p + 2] = 0; + _maskData[p + 3] = 150; + } else { + _maskData[p] = 0; + _maskData[p + 1] = 0; + _maskData[p + 2] = 0; + _maskData[p + 3] = 0; + } + } + } + if (_maskData) { + _markDirty(colX, 0); + _markDirty(colX, h - 1); + } + } + }; + + const redrawMaskOverlay = () => { + // Only flush the dirty region; full rebuild happens on size change + _flushDirty(); + }; + + const handlePaint = (e) => { + // Suppress painting while panning + if ((e.buttons & 4) === 4 || (e.buttons & 2) === 2 || allowPan) return; + const { x, y } = mapClientToPixel(e.clientX, e.clientY); + const w = baseCanvas.width, + h = baseCanvas.height; + if (x < 0 || y < 0 || x >= w || y >= h) return; + const radius = Math.max(1, Math.floor(brushSize / 2)); + if (e.shiftKey) { + paintRow(y); + } else if (e.altKey) { + paintColumn(x); + } else { + paintCircle(x, y, radius); + } + lastPaintX = x; + lastPaintY = y; + redrawMaskOverlay(); + }; + + maskCanvas.addEventListener('mousedown', (e) => { + if (e.button === 1 || e.button === 2 || allowPan) return; // let pan handler manage + draggingMask = true; + handlePaint(e); + }); + // Avoid hijacking touch gestures for panning/zooming + maskCanvas.addEventListener( + 'touchstart', + (e) => { + /* let panStage handle */ + }, + { passive: true } + ); + maskCanvas.addEventListener( + 'touchmove', + (e) => { + /* let panStage handle */ + }, + { passive: true } + ); + maskCanvas.addEventListener( + 'touchend', + (e) => { + /* let panStage handle */ + }, + { passive: true } + ); + window.addEventListener('mousemove', (e) => { + if (draggingMask) handlePaint(e); + }); + window.addEventListener('mouseup', () => { + if (draggingMask) { + draggingMask = false; + saveBotSettings(); + } + }); + + if (clearIgnoredBtnEl) + clearIgnoredBtnEl.addEventListener('click', () => { + const w = baseCanvas.width, + h = baseCanvas.height; + if (state.resizeIgnoreMask) state.resizeIgnoreMask.fill(0); + _ensureMaskOverlayBuffers(w, h, true); + _updateResizePreview(); + saveBotSettings(); + }); + + if (invertMaskBtn) + invertMaskBtn.addEventListener('click', () => { + if (!state.resizeIgnoreMask) return; + for (let i = 0; i < state.resizeIgnoreMask.length; i++) + state.resizeIgnoreMask[i] = state.resizeIgnoreMask[i] ? 0 : 1; + const w = baseCanvas.width, + h = baseCanvas.height; + _ensureMaskOverlayBuffers(w, h, true); + _updateResizePreview(); + saveBotSettings(); + }); + + confirmResize.onclick = async () => { + const newWidth = parseInt(widthSlider.value, 10); + const newHeight = parseInt(heightSlider.value, 10); + + // Generate the final paletted image data + const tempCanvas = document.createElement('canvas'); + const tempCtx = tempCanvas.getContext('2d'); + tempCanvas.width = newWidth; + tempCanvas.height = newHeight; + tempCtx.imageSmoothingEnabled = false; + if (baseProcessor !== processor && (!baseProcessor.img || !baseProcessor.canvas)) { + await baseProcessor.load(); + } + tempCtx.drawImage(baseProcessor.img, 0, 0, newWidth, newHeight); + const imgData = tempCtx.getImageData(0, 0, newWidth, newHeight); + const data = imgData.data; + const tThresh2 = state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD; + let totalValidPixels = 0; + const mask = + state.resizeIgnoreMask && state.resizeIgnoreMask.length === newWidth * newHeight + ? state.resizeIgnoreMask + : null; + + const applyFSDitherFinal = async () => { + const w = newWidth, + h = newHeight; + const n = w * h; + const { work, eligible } = ensureDitherBuffers(n); + for (let y = 0; y < h; y++) { + for (let x = 0; x < w; x++) { + const idx = y * w + x; + const i4 = idx * 4; + const r = data[i4], + g = data[i4 + 1], + b = data[i4 + 2], + a = data[i4 + 3]; + const masked = mask && mask[idx]; + const isEligible = + !masked && + (state.paintTransparentPixels || a >= tThresh2) && + (state.paintWhitePixels || !Utils.isWhitePixel(r, g, b)); + eligible[idx] = isEligible ? 1 : 0; + work[idx * 3] = r; + work[idx * 3 + 1] = g; + work[idx * 3 + 2] = b; + if (!isEligible) { + data[i4 + 3] = 0; + } + } + // Yield to keep UI responsive + if ((y & 15) === 0) await Promise.resolve(); + } + + const diffuse = (nx, ny, er, eg, eb, factor) => { + if (nx < 0 || nx >= w || ny < 0 || ny >= h) return; + const nidx = ny * w + nx; + if (!eligible[nidx]) return; + const base = nidx * 3; + work[base] = Math.min(255, Math.max(0, work[base] + er * factor)); + work[base + 1] = Math.min(255, Math.max(0, work[base + 1] + eg * factor)); + work[base + 2] = Math.min(255, Math.max(0, work[base + 2] + eb * factor)); + }; + + for (let y = 0; y < h; y++) { + for (let x = 0; x < w; x++) { + const idx = y * w + x; + if (!eligible[idx]) continue; + const base = idx * 3; + const r0 = work[base], + g0 = work[base + 1], + b0 = work[base + 2]; + const [nr, ng, nb] = Utils.findClosestPaletteColor( + r0, + g0, + b0, + state.activeColorPalette + ); + const i4 = idx * 4; + data[i4] = nr; + data[i4 + 1] = ng; + data[i4 + 2] = nb; + data[i4 + 3] = 255; + totalValidPixels++; + + const er = r0 - nr; + const eg = g0 - ng; + const eb = b0 - nb; + + diffuse(x + 1, y, er, eg, eb, 7 / 16); + diffuse(x - 1, y + 1, er, eg, eb, 3 / 16); + diffuse(x, y + 1, er, eg, eb, 5 / 16); + diffuse(x + 1, y + 1, er, eg, eb, 1 / 16); + } + // Yield every row to reduce jank + await Promise.resolve(); + } + }; + + if (state.ditheringEnabled) { + await applyFSDitherFinal(); + } else { + 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]; + const masked = mask && mask[i >> 2]; + const isTransparent = (!state.paintTransparentPixels && a < tThresh2) || masked; + const isWhiteAndSkipped = !state.paintWhitePixels && Utils.isWhitePixel(r, g, b); + if (isTransparent || isWhiteAndSkipped) { + data[i + 3] = 0; // overlay transparency + continue; + } + totalValidPixels++; + 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); + + // Save the final pixel data for painting + // Persist the paletted (and possibly dithered) pixels so painting uses the same output seen in overlay + const palettedPixels = new Uint8ClampedArray(imgData.data); + state.imageData.pixels = palettedPixels; + state.imageData.width = newWidth; + state.imageData.height = newHeight; + state.imageData.totalPixels = totalValidPixels; + state.totalPixels = totalValidPixels; + state.paintedPixels = 0; + + state.resizeSettings = { + baseWidth: width, + baseHeight: height, + width: newWidth, + height: newHeight, + }; + saveBotSettings(); + + const finalImageBitmap = await createImageBitmap(tempCanvas); + await overlayManager.setImage(finalImageBitmap); + overlayManager.enable(); + toggleOverlayBtn.classList.add('active'); + toggleOverlayBtn.setAttribute('aria-pressed', 'true'); + + // Keep state.imageData.processor as the original-based source; painting uses paletted pixels already stored + + await updateStats(); + updateUI('resizeSuccess', 'success', { + width: newWidth, + height: newHeight, + }); + closeResizeDialog(); + }; + + downloadPreviewBtn.onclick = () => { + try { + const w = baseCanvas.width, + h = baseCanvas.height; + const out = document.createElement('canvas'); + out.width = w; + out.height = h; + const octx = out.getContext('2d'); + octx.imageSmoothingEnabled = false; + octx.drawImage(baseCanvas, 0, 0); + octx.drawImage(maskCanvas, 0, 0); + const link = document.createElement('a'); + link.download = 'wplace-preview.png'; + link.href = out.toDataURL(); + link.click(); + } catch (e) { + console.warn('Failed to download preview:', e); + } + }; + + cancelResize.onclick = closeResizeDialog; + + editImageBtn.onclick = () => { + showEditPanel(); + }; + + resizeOverlay.style.display = 'block'; + resizeContainer.style.display = 'block'; + + // Reinitialize color palette with current available colors + initializeColorPalette(resizeContainer); + + _updateResizePreview(); + _resizeDialogCleanup = () => { + try { + zoomSlider.replaceWith(zoomSlider.cloneNode(true)); + } catch { } + try { + if (zoomInBtn) zoomInBtn.replaceWith(zoomInBtn.cloneNode(true)); + } catch { } + try { + if (zoomOutBtn) zoomOutBtn.replaceWith(zoomOutBtn.cloneNode(true)); + } catch { } + }; + setTimeout(() => { + if (typeof computeFitZoom === 'function') { + const z = computeFitZoom(); + if (!isNaN(z) && isFinite(z)) { + applyZoom(z); + centerInView(); + } + } else { + centerInView(); + } + }, 0); + } + + function closeResizeDialog() { + try { + if (typeof _resizeDialogCleanup === 'function') { + _resizeDialogCleanup(); + } + } catch { } + resizeOverlay.style.display = 'none'; + resizeContainer.style.display = 'none'; + _updateResizePreview = () => { }; + try { + if (typeof cancelAnimationFrame === 'function' && _panRaf) { + cancelAnimationFrame(_panRaf); + } + } catch { } + try { + if (_previewTimer) { + clearTimeout(_previewTimer); + _previewTimer = null; + } + } catch { } + _maskImageData = null; + _maskData = null; + _dirty = null; + _ditherWorkBuf = null; + _ditherEligibleBuf = null; + _resizeDialogCleanup = null; + } + + function showEditPanel() { + try { + // Validate that we have a valid base canvas + if (!baseCanvas || !baseCanvas.width || !baseCanvas.height) { + Utils.showAlert('No image available for editing. Please upload an image first.', 'error'); + return; + } + + // Hide resize panel + resizeContainer.style.display = 'none'; + + // Create edit panel if it doesn't exist + let editOverlay = document.getElementById('editOverlay'); + if (!editOverlay) { + createEditPanel(); + editOverlay = document.getElementById('editOverlay'); + } + + // Get current image data from baseCanvas + const imageData = baseCanvas.toDataURL(); + + // Initialize edit panel with current image + initializeEditPanel(imageData); + + // Show edit panel + editOverlay.style.display = 'block'; + + console.log('โœจ Pixel Art Editor opened successfully'); + } catch (error) { + console.error('Error opening pixel art editor:', error); + Utils.showAlert('Failed to open pixel art editor. Please try again.', 'error'); + } + } + + function createEditPanel() { + const editOverlay = document.createElement('div'); + editOverlay.id = 'editOverlay'; + editOverlay.className = 'edit-overlay'; + + editOverlay.innerHTML = ` +
+
+
+

Manual Pixel Art Editor

+
+ ๐Ÿ–ฑ๏ธ Left click: Draw | Right click/Ctrl+drag: Pan | Mouse wheel: Zoom +
+
+
+
+ + + + + +
+
+ + +
+
+
+ +
+
+
+
+ + + + + +
+ +
+ + + 1 + +
+ +
+ + + +
+
+ +
+
+
+ +
+
+
Navigator
+
+ +
+
+
+
+
+
+ +
+
+ Position: (0, 0) | Color: #000000 | Zoom: 100% +
+
+ +
+
+
+ +
+ +
+
+
+
+
+ + `; + + document.body.appendChild(editOverlay); + + // Set up event handlers + setupEditPanelEvents(); + } + + function setupEditPanelEvents() { + const editBackBtn = document.getElementById('editBackBtn'); + const editApplyBtn = document.getElementById('editApplyBtn'); + const paintBrush = document.getElementById('paintBrush'); + const eraseTool = document.getElementById('eraseTool'); + const eyedropperTool = document.getElementById('eyedropperTool'); + const fillTool = document.getElementById('fillTool'); + const brushSize = document.getElementById('brushSize'); + const brushSizeValue = document.getElementById('brushSizeValue'); + const showGrid = document.getElementById('showGrid'); + const undoBtn = document.getElementById('undoBtn'); + const redoBtn = document.getElementById('redoBtn'); + const resetViewBtn = document.getElementById('resetViewBtn'); + const editZoomIn = document.getElementById('editZoomIn'); + const editZoomOut = document.getElementById('editZoomOut'); + const zoomSelect = document.getElementById('zoomSelect'); + const zoomFit = document.getElementById('zoomFit'); + const zoom100 = document.getElementById('zoom100'); + const minimapCanvas = document.getElementById('minimapCanvas'); + + // Back to resize panel + editBackBtn.onclick = () => { + document.getElementById('editOverlay').style.display = 'none'; + resizeContainer.style.display = 'block'; + }; + + // Apply changes + editApplyBtn.onclick = () => { + applyEditChanges(); + document.getElementById('editOverlay').style.display = 'none'; + resizeContainer.style.display = 'block'; + }; + + // Tool selection + paintBrush.onclick = () => { + selectTool('paint'); + }; + + eraseTool.onclick = () => { + selectTool('erase'); + }; + + eyedropperTool.onclick = () => { + selectTool('eyedropper'); + }; + + fillTool.onclick = () => { + selectTool('fill'); + }; + + // Grid toggle + showGrid.onclick = () => { + editState.showGrid = !editState.showGrid; + showGrid.classList.toggle('active', editState.showGrid); + redrawCanvas(); + }; + + // Brush size + brushSize.oninput = () => { + brushSizeValue.textContent = brushSize.value; + updateBrushSize(parseInt(brushSize.value)); + }; + + // Undo/Redo + undoBtn.onclick = () => undoEdit(); + redoBtn.onclick = () => redoEdit(); + + // Reset view + resetViewBtn.onclick = () => resetEditView(); + + // Enhanced zoom controls + editZoomIn.onclick = () => zoomIn(); + editZoomOut.onclick = () => zoomOut(); + + zoomSelect.onchange = () => { + const newZoom = parseFloat(zoomSelect.value); + setZoom(newZoom); + }; + + zoomFit.onclick = () => fitToWindow(); + zoom100.onclick = () => setZoom(1); + + // Minimap navigation + if (minimapCanvas) { + minimapCanvas.onclick = (e) => navigateToMinimapPosition(e); + } + } + + const ZOOM_LEVELS = [0.1, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 24, 32]; + + let editState = { + currentTool: 'paint', + currentColor: '#000000', + currentColorId: null, + brushSize: 1, + zoom: 1, + panX: 0, + panY: 0, + undoStack: [], + redoStack: [], + isDrawing: false, + isPanning: false, + showGrid: false, + + mouseX: 0, + mouseY: 0, + canvasWidth: 0, + canvasHeight: 0, + updatePending: false, + lastPaintPos: null, + touchStart: null, + lastTouchDistance: 0, + lastTouchCenter: { x: 0, y: 0 } + }; + + function calculateOptimalPanelSize(imageWidth, imageHeight) { + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + + // Reserve minimal space for UI elements for almost fullscreen experience + const uiReserved = { + header: 80, + toolbar: 60, + bottomBar: 120, + padding: 40 + }; + + const maxCanvasWidth = viewportWidth - uiReserved.padding; + const maxCanvasHeight = viewportHeight - uiReserved.header - uiReserved.toolbar - uiReserved.bottomBar - uiReserved.padding; + + // Calculate optimal initial zoom to fit image + const scaleX = maxCanvasWidth / imageWidth; + const scaleY = maxCanvasHeight / imageHeight; + const initialZoom = Math.min(scaleX, scaleY, 1); // Don't zoom in initially + + return { + panelWidth: Math.min(viewportWidth * 0.95, imageWidth * initialZoom + uiReserved.colorPanel + uiReserved.padding), + panelHeight: Math.min(viewportHeight * 0.95, imageHeight * initialZoom + uiReserved.toolbar + uiReserved.statusBar + uiReserved.canvasToolbar + uiReserved.padding), + canvasWidth: Math.min(maxCanvasWidth, imageWidth * initialZoom), + canvasHeight: Math.min(maxCanvasHeight, imageHeight * initialZoom), + initialZoom: Math.max(0.1, initialZoom) + }; + } + + function initializeEditPanel(imageData) { + const editCanvas = document.getElementById('editCanvas'); + const ctx = editCanvas.getContext('2d'); + + // Reset edit state + editState.zoom = 1; + editState.panX = 0; + editState.panY = 0; + editState.undoStack = []; + editState.redoStack = []; + editState.currentTool = 'paint'; + editState.brushSize = 1; + editState.showGrid = false; + editState.isPanning = false; + editState.isDrawing = false; + editState.lastPaintPos = null; + + // Set canvas size to match baseCanvas + editCanvas.width = baseCanvas.width; + editCanvas.height = baseCanvas.height; + editState.canvasWidth = editCanvas.width; + editState.canvasHeight = editCanvas.height; + + // Configure canvas context for pixel art + ctx.imageSmoothingEnabled = false; + ctx.webkitImageSmoothingEnabled = false; + ctx.mozImageSmoothingEnabled = false; + ctx.msImageSmoothingEnabled = false; + + // Calculate optimal panel size + const panelSize = calculateOptimalPanelSize(editCanvas.width, editCanvas.height); + const editContainer = document.querySelector('.edit-container'); + if (editContainer) { + editContainer.style.width = panelSize.panelWidth + 'px'; + editContainer.style.height = panelSize.panelHeight + 'px'; + } + + // Setup canvas container + setupCanvasContainer(); + + // Load image onto canvas + const img = new Image(); + img.onload = () => { + ctx.clearRect(0, 0, editCanvas.width, editCanvas.height); + ctx.drawImage(img, 0, 0); + + // Always fit artwork to the visible area on start and center + fitToWindow(); + centerCanvas(); + + // Setup minimap + setupMinimap(); + + // Save initial state for undo + saveEditState(); + + // Set up canvas drawing events + setupCanvasDrawing(); + + // Initialize color palette + initializeEditColorPalette(); + + // Setup keyboard shortcuts + setupKeyboardShortcuts(); + + // Setup touch support + setupTouchSupport(); + + // Set initial tool + selectTool('paint'); + + // Update status bar + updateStatusBar(0, 0); + + // Center canvas initially + centerCanvas(); + }; + img.src = imageData; + } + + // mapClientToCanvas function for coordinate mapping + function mapClientToCanvas(clientX, clientY) { + const canvas = document.getElementById('editCanvas'); + const wrapper = document.getElementById('editCanvasWrapper'); + const container = document.getElementById('editCanvasContainer'); + + if (!canvas || !wrapper || !container) return null; + + // Get the actual canvas element bounds (after CSS transform) + const canvasRect = canvas.getBoundingClientRect(); + + // Calculate relative position within the actual canvas bounds + const relativeX = (clientX - canvasRect.left) / canvasRect.width * canvas.width; + const relativeY = (clientY - canvasRect.top) / canvasRect.height * canvas.height; + + // Convert to canvas coordinates + const canvasX = Math.floor(relativeX); + const canvasY = Math.floor(relativeY); + + // Bounds checking + if (canvasX < 0 || canvasX >= canvas.width || canvasY < 0 || canvasY >= canvas.height) { + return null; + } + + return { x: canvasX, y: canvasY }; + } + + function setupCanvasDrawing() { + const editCanvas = document.getElementById('editCanvas'); + const ctx = editCanvas.getContext('2d'); + + let isDrawing = false; + let isPanning = false; + let lastX = 0; + let lastY = 0; + let panStartX = 0; + let panStartY = 0; + + const getMousePos = (e) => { + return mapClientToCanvas(e.clientX, e.clientY); + }; + + editCanvas.onmousedown = (e) => { + if (e.button === 2 || e.ctrlKey) { // Right click or Ctrl+click for panning + editState.isPanning = true; + panStartX = e.clientX - editState.panX; + panStartY = e.clientY - editState.panY; + editCanvas.style.cursor = 'move'; + e.preventDefault(); + return; + } + + const pos = getMousePos(e); + if (!pos) return; + + if (editState.currentTool === 'eyedropper') { + handleEyedropper(pos.x, pos.y); + return; + } + + if (editState.currentTool === 'fill') { + floodFill(pos.x, pos.y, editState.currentColor); + saveEditState(); + return; + } + + editState.isDrawing = true; + editState.lastPaintPos = { x: pos.x, y: pos.y }; + lastX = pos.x; + lastY = pos.y; + + paintAtPosition(pos.x, pos.y, true); + }; + + editCanvas.onmousemove = (e) => { + const pos = getMousePos(e); + + if (pos) { + editState.mouseX = pos.x; + editState.mouseY = pos.y; + updateStatusBar(pos.x, pos.y); + } + + if (editState.isPanning) { + editState.panX = e.clientX - panStartX; + editState.panY = e.clientY - panStartY; + constrainPan(); + updateCanvasTransform(); + updateMinimap(); + return; + } + + if (!editState.isDrawing) { + return; + } + + if (pos && editState.lastPaintPos) { + paintAtPosition(pos.x, pos.y, true); + editState.lastPaintPos = { x: pos.x, y: pos.y }; + } + }; + + editCanvas.onmouseup = (e) => { + if (editState.isPanning) { + editState.isPanning = false; + selectTool(editState.currentTool); // Restore cursor + return; + } + + if (editState.isDrawing) { + editState.isDrawing = false; + editState.lastPaintPos = null; + saveEditState(); + } + }; + + editCanvas.onmouseleave = () => { + if (editState.isPanning) { + editState.isPanning = false; + selectTool(editState.currentTool); // Restore cursor + } + + if (editState.isDrawing) { + editState.isDrawing = false; + editState.lastPaintPos = null; + saveEditState(); + } + }; + + // Prevent context menu on right click + editCanvas.oncontextmenu = (e) => { + e.preventDefault(); + return false; + }; + + // Enhanced zoom with mouse wheel (zoom to cursor) + editCanvas.onwheel = (e) => { + e.preventDefault(); + const zoomFactor = e.deltaY < 0 ? 1.2 : 1/1.2; + zoomToPoint(editState.zoom * zoomFactor, e.clientX, e.clientY); + }; + } + + function paintAtPosition(x, y, isMouseDown = true) { + if (!isMouseDown || !editState.currentColor) return; + + const canvas = document.getElementById('editCanvas'); + const ctx = canvas.getContext('2d'); + + if (editState.lastPaintPos && editState.currentTool === 'paint') { + // Draw line from last position to current position + drawLine(ctx, editState.lastPaintPos.x, editState.lastPaintPos.y, x, y, editState.currentTool); + } else { + // Single brush stroke + drawBrush(ctx, x, y, editState.currentTool); + } + + editState.lastPaintPos = { x, y }; + + // Update minimap thumbnail + if (!editState.updatePending) { + editState.updatePending = true; + requestAnimationFrame(() => { + setupMinimap(); + editState.updatePending = false; + }); + } + } + + function drawBrush(ctx, x, y, tool) { + const size = editState.brushSize; + const halfSize = Math.floor(size / 2); + + if (tool === 'paint') { + ctx.fillStyle = editState.currentColor; + for (let dx = 0; dx < size; dx++) { + for (let dy = 0; dy < size; dy++) { + // Center the brush at the cursor position + const px = x - halfSize + dx; + const py = y - halfSize + dy; + + if (px >= 0 && px < ctx.canvas.width && py >= 0 && py < ctx.canvas.height) { + ctx.fillRect(px, py, 1, 1); + } + } + } + } else if (tool === 'erase') { + for (let dx = 0; dx < size; dx++) { + for (let dy = 0; dy < size; dy++) { + // Center the brush at the cursor position + const px = x - halfSize + dx; + const py = y - halfSize + dy; + + if (px >= 0 && px < ctx.canvas.width && py >= 0 && py < ctx.canvas.height) { + ctx.clearRect(px, py, 1, 1); + } + } + } + } + } + + function drawPixel(x, y) { + drawBrush(document.getElementById('editCanvas').getContext('2d'), x, y, 'paint'); + } + + function erasePixel(x, y) { + const editCanvas = document.getElementById('editCanvas'); + const ctx = editCanvas.getContext('2d'); + + const size = editState.brushSize; + const halfSize = Math.floor(size / 2); + + for (let dx = 0; dx < size; dx++) { + for (let dy = 0; dy < size; dy++) { + // Center the brush at the cursor position (consistent with drawBrush) + const px = x - halfSize + dx; + const py = y - halfSize + dy; + + if (px >= 0 && px < editCanvas.width && py >= 0 && py < editCanvas.height) { + ctx.clearRect(px, py, 1, 1); + } + } + } + } + + function drawLine(ctx, x1, y1, x2, y2, tool) { + // Bresenham's line algorithm with tool support + const dx = Math.abs(x2 - x1); + const dy = Math.abs(y2 - y1); + const sx = x1 < x2 ? 1 : -1; + const sy = y1 < y2 ? 1 : -1; + let err = dx - dy; + + let x = x1; + let y = y1; + + while (true) { + drawBrush(ctx, x, y, tool); + + if (x === x2 && y === y2) break; + + const e2 = 2 * err; + if (e2 > -dy) { + err -= dy; + x += sx; + } + if (e2 < dx) { + err += dx; + y += sy; + } + } + } + + function eraseLine(x1, y1, x2, y2) { + // Same as drawLine but with erase + const dx = Math.abs(x2 - x1); + const dy = Math.abs(y2 - y1); + const sx = x1 < x2 ? 1 : -1; + const sy = y1 < y2 ? 1 : -1; + let err = dx - dy; + + let x = x1; + let y = y1; + + while (true) { + erasePixel(x, y); + + if (x === x2 && y === y2) break; + + const e2 = 2 * err; + if (e2 > -dy) { + err -= dy; + x += sx; + } + if (e2 < dx) { + err += dx; + y += sy; + } + } + } + + function selectTool(tool) { + editState.currentTool = tool; + + document.querySelectorAll('.edit-tool').forEach(btn => { + btn.classList.remove('active'); + }); + + const editCanvas = document.getElementById('editCanvas'); + + switch(tool) { + case 'paint': + document.getElementById('paintBrush').classList.add('active'); + editCanvas.style.cursor = 'crosshair'; + break; + case 'erase': + document.getElementById('eraseTool').classList.add('active'); + editCanvas.style.cursor = 'not-allowed'; + break; + case 'eyedropper': + document.getElementById('eyedropperTool').classList.add('active'); + editCanvas.style.cursor = 'copy'; + break; + case 'fill': + document.getElementById('fillTool').classList.add('active'); + editCanvas.style.cursor = 'pointer'; + break; + } + } + + function updateBrushSize(size) { + editState.brushSize = size; + } + + function initializeEditColorPalette() { + const colorGrid = document.getElementById('editColorGrid'); + const currentColorDisplay = document.getElementById('currentColorDisplay'); + + colorGrid.innerHTML = ''; + + let availableColors = []; + + // Try to get colors from state first + if (state && state.availableColors && state.availableColors.length > 0) { + availableColors = state.availableColors.map(color => ({ + id: color.id, + name: color.name, + rgb: color.rgb, + hex: `#${color.rgb[0].toString(16).padStart(2,'0')}${color.rgb[1].toString(16).padStart(2,'0')}${color.rgb[2].toString(16).padStart(2,'0')}` + })); + } else { + // Fallback to CONFIG.COLOR_MAP + availableColors = Object.values(CONFIG.COLOR_MAP) + .filter(color => color.rgb !== null) + .map(color => ({ + id: color.id, + name: color.name, + rgb: [color.rgb.r, color.rgb.g, color.rgb.b], + hex: `#${color.rgb.r.toString(16).padStart(2,'0')}${color.rgb.g.toString(16).padStart(2,'0')}${color.rgb.b.toString(16).padStart(2,'0')}` + })); + } + + // Fallback to basic colors if nothing available + if (availableColors.length === 0) { + availableColors = [ + {id: 0, name: 'Black', rgb: [0,0,0], hex: '#000000'}, + {id: 1, name: 'White', rgb: [255,255,255], hex: '#ffffff'}, + {id: 2, name: 'Red', rgb: [255,0,0], hex: '#ff0000'}, + {id: 3, name: 'Green', rgb: [0,255,0], hex: '#00ff00'}, + {id: 4, name: 'Blue', rgb: [0,0,255], hex: '#0000ff'} + ]; + } + + // Update color count + const colorCount = document.getElementById('editColorCount'); + if (colorCount) { + colorCount.textContent = availableColors.length; + } + + availableColors.forEach(color => { + const colorBtn = document.createElement('button'); + colorBtn.className = 'color-btn'; + colorBtn.style.backgroundColor = color.hex; + colorBtn.title = `${color.name} (${color.hex})`; + colorBtn.dataset.colorId = color.id; + colorBtn.dataset.colorHex = color.hex; + + colorBtn.onclick = () => { + editState.currentColor = color.hex; + editState.currentColorId = color.id; + currentColorDisplay.style.backgroundColor = color.hex; + + // Update active color + document.querySelectorAll('.color-btn').forEach(btn => { + btn.classList.remove('selected'); + }); + colorBtn.classList.add('selected'); + + updateStatusBar(editState.mouseX, editState.mouseY); + }; + + colorGrid.appendChild(colorBtn); + }); + + // Set first color as default + if (availableColors.length > 0) { + editState.currentColor = availableColors[0].hex; + editState.currentColorId = availableColors[0].id; + currentColorDisplay.style.backgroundColor = availableColors[0].hex; + colorGrid.firstChild.classList.add('selected'); + } + } + + function saveEditState() { + const editCanvas = document.getElementById('editCanvas'); + const imageData = editCanvas.toDataURL(); + + editState.undoStack.push(imageData); + + // Limit undo stack size + if (editState.undoStack.length > 50) { + editState.undoStack.shift(); + } + + // Clear redo stack when new action is performed + editState.redoStack = []; + + updateUndoRedoButtons(); + } + + function undoEdit() { + if (editState.undoStack.length <= 1) return; + + const currentState = editState.undoStack.pop(); + editState.redoStack.push(currentState); + + const previousState = editState.undoStack[editState.undoStack.length - 1]; + loadEditState(previousState); + + updateUndoRedoButtons(); + } + + function redoEdit() { + if (editState.redoStack.length === 0) return; + + const nextState = editState.redoStack.pop(); + editState.undoStack.push(nextState); + + loadEditState(nextState); + + updateUndoRedoButtons(); + } + + function loadEditState(imageData) { + const editCanvas = document.getElementById('editCanvas'); + const ctx = editCanvas.getContext('2d'); + + const img = new Image(); + img.onload = () => { + ctx.clearRect(0, 0, editCanvas.width, editCanvas.height); + ctx.drawImage(img, 0, 0); + }; + img.src = imageData; + } + + function updateUndoRedoButtons() { + const undoBtn = document.getElementById('undoBtn'); + const redoBtn = document.getElementById('redoBtn'); + + if (undoBtn) { + undoBtn.disabled = editState.undoStack.length <= 1; + } + + if (redoBtn) { + redoBtn.disabled = editState.redoStack.length === 0; + } + } + + function updateCanvasTransform() { + const wrapper = document.getElementById('editCanvasWrapper'); + if (wrapper) { + wrapper.style.transform = `translate(${editState.panX}px, ${editState.panY}px) scale(${editState.zoom})`; + } + + // Update zoom select + const zoomSelect = document.getElementById('zoomSelect'); + if (zoomSelect) { + // If exact value exists, use it, otherwise show nearest but update displayed text + const exact = ZOOM_LEVELS.find(z => z === editState.zoom); + zoomSelect.value = exact != null ? exact : ZOOM_LEVELS.reduce((prev, curr) => Math.abs(curr - editState.zoom) < Math.abs(prev - editState.zoom) ? curr : prev); + // Also update status bar zoom text + updateStatusBar(editState.mouseX || 0, editState.mouseY || 0); + } + } + + function setupCanvasContainer() { + const canvasContainer = document.getElementById('editCanvasContainer'); + const editCanvas = document.getElementById('editCanvas'); + const wrapper = document.getElementById('editCanvasWrapper'); + + if (!canvasContainer || !wrapper) return; + + // Setup container styles + canvasContainer.style.cssText = ` + position: relative; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background: + linear-gradient(45deg, #f0f0f0 25%, transparent 25%), + linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #f0f0f0 75%), + linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); + background-size: 20px 20px; + background-position: 0 0, 0 10px, 10px -10px, -10px 0px; + background-color: #ddd; + `; + + // Setup wrapper styles + wrapper.style.cssText = ` + position: relative; + transform-origin: center center; + display: inline-block; + box-shadow: 0 4px 20px rgba(0,0,0,0.3); + border: 2px solid #333; + background: white; + `; + } + + function zoomToPoint(newZoom, clientX, clientY) { + const container = document.getElementById('editCanvasContainer'); + const wrapper = document.getElementById('editCanvasWrapper'); + + if (!container || !wrapper) return; + + newZoom = Math.max(0.1, Math.min(32, newZoom)); + + if (clientX !== undefined && clientY !== undefined) { + // Get current transform values + const oldZoom = editState.zoom; + const rect = container.getBoundingClientRect(); + + // Calculate zoom center point relative to container + const containerCenterX = rect.left + rect.width / 2; + const containerCenterY = rect.top + rect.height / 2; + + // Calculate offset to keep zoom point centered + const offsetX = (clientX - containerCenterX) * (1 - newZoom / oldZoom); + const offsetY = (clientY - containerCenterY) * (1 - newZoom / oldZoom); + + editState.panX += offsetX; + editState.panY += offsetY; + } + + editState.zoom = newZoom; + constrainPan(); + updateCanvasTransform(); + updateMinimap(); + updateStatusBar(editState.mouseX || 0, editState.mouseY || 0); + } + + function constrainPan() { + const container = document.getElementById('editCanvasContainer'); + const canvas = document.getElementById('editCanvas'); + + if (!container || !canvas) return; + + const containerRect = container.getBoundingClientRect(); + const scaledWidth = canvas.width * editState.zoom; + const scaledHeight = canvas.height * editState.zoom; + + // Small padding around edges to avoid snapping against borders + const padding = 10; + + // Calculate limits to keep canvas somewhat visible + const maxPanX = Math.max(0, (scaledWidth - containerRect.width) / 2 + padding); + const maxPanY = Math.max(0, (scaledHeight - containerRect.height) / 2 + padding); + + editState.panX = Math.max(-maxPanX, Math.min(maxPanX, editState.panX)); + editState.panY = Math.max(-maxPanY, Math.min(maxPanY, editState.panY)); + } + + function setZoom(zoom) { + zoomToPoint(zoom); + } + + function zoomIn() { + const currentIndex = ZOOM_LEVELS.findIndex(z => z >= editState.zoom); + const nextIndex = Math.min(currentIndex + 1, ZOOM_LEVELS.length - 1); + setZoom(ZOOM_LEVELS[nextIndex]); + } + + function zoomOut() { + const currentIndex = ZOOM_LEVELS.findIndex(z => z >= editState.zoom); + const prevIndex = Math.max(currentIndex - 1, 0); + setZoom(ZOOM_LEVELS[prevIndex]); + } + + function fitToWindow() { + const container = document.getElementById('editCanvasContainer'); + const canvas = document.getElementById('editCanvas'); + + if (!container || !canvas) return; + + const containerRect = container.getBoundingClientRect(); + const padding = 40; + + const scaleX = (containerRect.width - padding) / canvas.width; + const scaleY = (containerRect.height - padding) / canvas.height; + const fitZoom = Math.max(0.1, Math.min(scaleX, scaleY)); + + // Center the canvas + editState.zoom = fitZoom; + editState.panX = 0; + editState.panY = 0; + updateCanvasTransform(); + updateMinimap(); + updateStatusBar(editState.mouseX || 0, editState.mouseY || 0); + } + + function centerCanvas() { + editState.panX = 0; + editState.panY = 0; + updateCanvasTransform(); + updateMinimap(); + } + + function resetEditView() { + editState.zoom = 1; + editState.panX = 0; + editState.panY = 0; + + updateCanvasTransform(); + updateMinimap(); + } + + function setupMinimap() { + const minimapCanvas = document.getElementById('minimapCanvas'); + const editCanvas = document.getElementById('editCanvas'); + const minimapContainer = document.getElementById('minimapContainer'); + + if (!minimapCanvas || !editCanvas) return; + + // Show minimap only for larger images + if (editCanvas.width < 100 || editCanvas.height < 100) { + if (minimapContainer) minimapContainer.style.display = 'none'; + return; + } + + // Calculate minimap size + const maxSize = 150; + const scale = Math.min(maxSize / editCanvas.width, maxSize / editCanvas.height); + + minimapCanvas.width = editCanvas.width * scale; + minimapCanvas.height = editCanvas.height * scale; + + // Draw thumbnail + const minimapCtx = minimapCanvas.getContext('2d'); + minimapCtx.imageSmoothingEnabled = false; + minimapCtx.drawImage(editCanvas, 0, 0, minimapCanvas.width, minimapCanvas.height); + + // Update viewport indicator + updateMinimap(); + } + + function updateMinimap() { + const viewport = document.getElementById('minimapViewport'); + const minimapCanvas = document.getElementById('minimapCanvas'); + const container = document.getElementById('editCanvasContainer'); + const editCanvas = document.getElementById('editCanvas'); + + if (!viewport || !minimapCanvas || !container || !editCanvas) return; + + const containerRect = container.getBoundingClientRect(); + const scale = minimapCanvas.width / editCanvas.width; + + // Calculate visible area in minimap coordinates + const visibleWidth = Math.min(containerRect.width / editState.zoom * scale, minimapCanvas.width); + const visibleHeight = Math.min(containerRect.height / editState.zoom * scale, minimapCanvas.height); + + const viewportX = (minimapCanvas.width / 2) - (editState.panX / editState.zoom * scale) - (visibleWidth / 2); + const viewportY = (minimapCanvas.height / 2) - (editState.panY / editState.zoom * scale) - (visibleHeight / 2); + + viewport.style.width = `${visibleWidth}px`; + viewport.style.height = `${visibleHeight}px`; + viewport.style.left = `${Math.max(0, Math.min(minimapCanvas.width - visibleWidth, viewportX))}px`; + viewport.style.top = `${Math.max(0, Math.min(minimapCanvas.height - visibleHeight, viewportY))}px`; + } + + function navigateToMinimapPosition(e) { + const minimapCanvas = document.getElementById('minimapCanvas'); + const editCanvas = document.getElementById('editCanvas'); + + if (!minimapCanvas || !editCanvas) return; + + const rect = minimapCanvas.getBoundingClientRect(); + const x = (e.clientX - rect.left) / minimapCanvas.width; + const y = (e.clientY - rect.top) / minimapCanvas.height; + + // Convert to canvas coordinates and center + const targetX = (x - 0.5) * editCanvas.width * editState.zoom; + const targetY = (y - 0.5) * editCanvas.height * editState.zoom; + + editState.panX = -targetX; + editState.panY = -targetY; + + constrainPan(); + updateCanvasTransform(); + updateMinimap(); + } + + function updateStatusBar(x, y) { + const statusBar = document.getElementById('editStatusBar'); + if (statusBar) { + const zoomPercent = Math.round(editState.zoom * 100); + statusBar.textContent = `Position: (${x}, ${y}) | Color: ${editState.currentColor || '#000000'} | Zoom: ${zoomPercent}%`; + } + } + + function handleEyedropper(x, y) { + const editCanvas = document.getElementById('editCanvas'); + const ctx = editCanvas.getContext('2d'); + + if (x >= 0 && x < editCanvas.width && y >= 0 && y < editCanvas.height) { + const imageData = ctx.getImageData(x, y, 1, 1); + const [r, g, b] = imageData.data; + const pickedColor = `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`; + + editState.currentColor = pickedColor; + const currentColorDisplay = document.getElementById('currentColorDisplay'); + if (currentColorDisplay) { + currentColorDisplay.style.backgroundColor = pickedColor; + } + + // Try to find matching color in palette + document.querySelectorAll('.edit-color-btn').forEach(btn => { + btn.classList.remove('active'); + if (btn.dataset.colorHex === pickedColor) { + btn.classList.add('active'); + editState.currentColorId = parseInt(btn.dataset.colorId); + } + }); + + updateStatusBar(x, y); + } + } + + function floodFill(startX, startY, fillColor) { + const editCanvas = document.getElementById('editCanvas'); + const ctx = editCanvas.getContext('2d'); + const imageData = ctx.getImageData(0, 0, editCanvas.width, editCanvas.height); + const data = imageData.data; + + if (startX < 0 || startX >= editCanvas.width || startY < 0 || startY >= editCanvas.height) return; + + const startIndex = (startY * editCanvas.width + startX) * 4; + const startR = data[startIndex]; + const startG = data[startIndex + 1]; + const startB = data[startIndex + 2]; + const startA = data[startIndex + 3]; + + // Convert fill color to RGB + const fillR = parseInt(fillColor.slice(1, 3), 16); + const fillG = parseInt(fillColor.slice(3, 5), 16); + const fillB = parseInt(fillColor.slice(5, 7), 16); + + // Don't fill if the color is already the same + if (startR === fillR && startG === fillG && startB === fillB) return; + + const pixelsToCheck = [{x: startX, y: startY}]; + const checkedPixels = new Set(); + + while (pixelsToCheck.length > 0) { + const {x, y} = pixelsToCheck.pop(); + const key = `${x},${y}`; + + if (checkedPixels.has(key)) continue; + checkedPixels.add(key); + + if (x < 0 || x >= editCanvas.width || y < 0 || y >= editCanvas.height) continue; + + const index = (y * editCanvas.width + x) * 4; + const r = data[index]; + const g = data[index + 1]; + const b = data[index + 2]; + const a = data[index + 3]; + + if (r === startR && g === startG && b === startB && a === startA) { + data[index] = fillR; + data[index + 1] = fillG; + data[index + 2] = fillB; + data[index + 3] = 255; + + pixelsToCheck.push({x: x + 1, y}); + pixelsToCheck.push({x: x - 1, y}); + pixelsToCheck.push({x, y: y + 1}); + pixelsToCheck.push({x, y: y - 1}); + } + } + + ctx.putImageData(imageData, 0, 0); + } + + // Brush preview removed per user request + function hideBrushPreview() { + // No-op - brush preview disabled + } + + function drawGrid(ctx, width, height) { + if (!editState.showGrid || editState.zoom < 4) return; + + ctx.save(); + ctx.strokeStyle = 'rgba(128, 128, 128, 0.3)'; + ctx.lineWidth = 1 / editState.zoom; + + for (let x = 0; x <= width; x++) { + ctx.beginPath(); + ctx.moveTo(x, 0); + ctx.lineTo(x, height); + ctx.stroke(); + } + + for (let y = 0; y <= height; y++) { + ctx.beginPath(); + ctx.moveTo(0, y); + ctx.lineTo(width, y); + ctx.stroke(); + } + + ctx.restore(); + } + + function redrawCanvas() { + if (editState.undoStack.length === 0) return; + + const currentState = editState.undoStack[editState.undoStack.length - 1]; + const editCanvas = document.getElementById('editCanvas'); + const ctx = editCanvas.getContext('2d'); + + const img = new Image(); + img.onload = () => { + ctx.clearRect(0, 0, editCanvas.width, editCanvas.height); + ctx.drawImage(img, 0, 0); + drawGrid(ctx, editCanvas.width, editCanvas.height); + }; + img.src = currentState; + } + + function setupTouchSupport() { + const canvas = document.getElementById('editCanvas'); + if (!canvas) return; + + let touchStartTime = 0; + + canvas.addEventListener('touchstart', handleTouchStart, { passive: false }); + canvas.addEventListener('touchmove', handleTouchMove, { passive: false }); + canvas.addEventListener('touchend', handleTouchEnd, { passive: false }); + + function handleTouchStart(e) { + e.preventDefault(); + touchStartTime = Date.now(); + + if (e.touches.length === 1) { + // Single touch - start painting + const touch = e.touches[0]; + const coords = mapClientToCanvas(touch.clientX, touch.clientY); + if (coords) { + editState.isDrawing = true; + editState.lastPaintPos = { x: coords.x, y: coords.y }; + paintAtPosition(coords.x, coords.y, true); + } + } else if (e.touches.length === 2) { + // Two finger - prepare for zoom/pan + const touch1 = e.touches[0]; + const touch2 = e.touches[1]; + + editState.lastTouchDistance = Math.hypot( + touch2.clientX - touch1.clientX, + touch2.clientY - touch1.clientY + ); + + editState.lastTouchCenter = { + x: (touch1.clientX + touch2.clientX) / 2, + y: (touch1.clientY + touch2.clientY) / 2 + }; + } + } + + function handleTouchMove(e) { + e.preventDefault(); + + if (e.touches.length === 1 && editState.isDrawing) { + // Continue painting + const touch = e.touches[0]; + const coords = mapClientToCanvas(touch.clientX, touch.clientY); + if (coords) { + paintAtPosition(coords.x, coords.y, true); + } + } else if (e.touches.length === 2) { + // Pinch zoom and pan + const touch1 = e.touches[0]; + const touch2 = e.touches[1]; + + const currentDistance = Math.hypot( + touch2.clientX - touch1.clientX, + touch2.clientY - touch1.clientY + ); + + const currentCenter = { + x: (touch1.clientX + touch2.clientX) / 2, + y: (touch1.clientY + touch2.clientY) / 2 + }; + + // Zoom based on distance change + if (editState.lastTouchDistance > 0) { + const zoomFactor = currentDistance / editState.lastTouchDistance; + const newZoom = Math.max(0.1, Math.min(32, editState.zoom * zoomFactor)); + zoomToPoint(newZoom, currentCenter.x, currentCenter.y); + } + + // Pan based on center movement + editState.panX += currentCenter.x - editState.lastTouchCenter.x; + editState.panY += currentCenter.y - editState.lastTouchCenter.y; + + editState.lastTouchDistance = currentDistance; + editState.lastTouchCenter = currentCenter; + + constrainPan(); + updateCanvasTransform(); + updateMinimap(); + } + } + + function handleTouchEnd(e) { + e.preventDefault(); + + if (editState.isDrawing) { + editState.isDrawing = false; + editState.lastPaintPos = null; + saveEditState(); + } + + if (e.touches.length === 0) { + editState.lastTouchDistance = 0; + } + } + } + + function setupKeyboardShortcuts() { + document.addEventListener('keydown', (e) => { + // Only handle shortcuts when edit panel is visible + const editOverlay = document.getElementById('editOverlay'); + if (!editOverlay || editOverlay.style.display === 'none') return; + + // Prevent default for handled keys + const handledKeys = ['b', 'e', 'i', 'f', 'g', 'z', '[', ']']; + if (handledKeys.includes(e.key.toLowerCase()) || (e.ctrlKey && e.key.toLowerCase() === 'z')) { + e.preventDefault(); + } + + switch(e.key.toLowerCase()) { + case 'b': // Brush + selectTool('paint'); + break; + case 'e': // Erase + selectTool('erase'); + break; + case 'i': // Eyedropper + selectTool('eyedropper'); + break; + case 'f': // Fill + selectTool('fill'); + break; + case 'g': // Grid + const showGrid = document.getElementById('showGrid'); + if (showGrid) showGrid.click(); + break; + case 'z': + if (e.ctrlKey || e.metaKey) { + if (e.shiftKey) { + redoEdit(); + } else { + undoEdit(); + } + } + break; + case '=': + case '+': + if (e.ctrlKey || e.metaKey) { + zoomIn(); + } + break; + case '-': + if (e.ctrlKey || e.metaKey) { + zoomOut(); + } + break; + case '0': + if (e.ctrlKey || e.metaKey) { + fitToWindow(); + } + break; + case '1': + if (e.ctrlKey || e.metaKey) { + setZoom(1); + } + break; + case '[': // Decrease brush size + const brushSize = document.getElementById('brushSize'); + const currentSize = parseInt(brushSize.value); + if (currentSize > 1) { + brushSize.value = currentSize - 1; + document.getElementById('brushSizeValue').textContent = currentSize - 1; + updateBrushSize(currentSize - 1); + } + break; + case ']': // Increase brush size + const brushSize2 = document.getElementById('brushSize'); + const currentSize2 = parseInt(brushSize2.value); + if (currentSize2 < 20) { + brushSize2.value = currentSize2 + 1; + document.getElementById('brushSizeValue').textContent = currentSize2 + 1; + updateBrushSize(currentSize2 + 1); + } + break; + } + }); + } + + function applyEditChanges() { + try { + const editCanvas = document.getElementById('editCanvas'); + if (!editCanvas) { + throw new Error('Edit canvas not found'); + } + + // Find the resize canvas in the resize panel + const resizeCanvas = document.getElementById('resizeCanvas'); + if (!resizeCanvas) { + throw new Error('Resize canvas not found'); + } + + const baseCtx = resizeCanvas.getContext('2d'); + if (!baseCtx) { + throw new Error('Resize canvas context not available'); + } + + // Make sure the resize canvas has the same dimensions as the edit canvas + if (resizeCanvas.width !== editCanvas.width || resizeCanvas.height !== editCanvas.height) { + resizeCanvas.width = editCanvas.width; + resizeCanvas.height = editCanvas.height; + } + + // Clear resize canvas + baseCtx.clearRect(0, 0, resizeCanvas.width, resizeCanvas.height); + + // Copy edited image to resize canvas + baseCtx.imageSmoothingEnabled = false; + baseCtx.drawImage(editCanvas, 0, 0); + + // CRITICAL: Completely replace the template system with edited artwork + const editedImageData = editCanvas.toDataURL(); + + // Create new processor with edited image as the template + if (window.WPlaceImageProcessor) { + const newProcessor = new window.WPlaceImageProcessor(editedImageData); + newProcessor.load().then(() => { + // Get the processed pixel data from the edited canvas + const editCtx = editCanvas.getContext('2d'); + const editImageData = editCtx.getImageData(0, 0, editCanvas.width, editCanvas.height); + const pixels = editImageData.data; + + // Count valid pixels in the edited image + let totalValidPixels = 0; + for (let i = 0; i < pixels.length; i += 4) { + const a = pixels[i + 3]; + const r = pixels[i]; + const g = pixels[i + 1]; + const b = pixels[i + 2]; + + const isTransparent = !state.paintTransparentPixels && a < state.customTransparencyThreshold; + const isWhiteAndSkipped = !state.paintWhitePixels && Utils.isWhitePixel(r, g, b); + + if (!isTransparent && !isWhiteAndSkipped) { + totalValidPixels++; + } + } + + // COMPLETELY REBUILD state.imageData with the edited artwork + state.imageData = { + width: editCanvas.width, + height: editCanvas.height, + pixels: pixels, + totalPixels: totalValidPixels, + processor: newProcessor, + }; + + // CRITICAL: Update state.originalImage so resize panel uses edited artwork as base template + state.originalImage = { + dataUrl: editedImageData, + width: editCanvas.width, + height: editCanvas.height + }; + + // Update state with new totals + state.totalPixels = totalValidPixels; + state.paintedPixels = 0; // Reset progress since this is a new template + state.imageLoaded = true; + + // Update local processors + if (typeof processor !== 'undefined') { + processor = newProcessor; + console.log('๐Ÿ”„ Updated local processor with edited artwork'); + } + if (typeof baseProcessor !== 'undefined') { + baseProcessor = newProcessor; + console.log('๐Ÿ”„ Updated baseProcessor with edited artwork'); + } + + // Force regeneration of overlays by clearing cached mask data + if (typeof window._maskImageData !== 'undefined') { + delete window._maskImageData; + } + + // Update UI to reflect the new template + if (typeof updateUI === 'function') { + updateUI(); + } + + // Show loading and properly reload resize panel with new template + Utils.showAlert('Updating template... Please wait.', 'info'); + + // Give more time for template to fully update and force resize panel reload + setTimeout(() => { + // Hide edit overlay first + document.getElementById('editOverlay').style.display = 'none'; + + // Completely reload resize dialog with updated processor + setTimeout(() => { + // Clean up existing dialog + if (typeof _resizeDialogCleanup === 'function') { + _resizeDialogCleanup(); + } + + // Force complete reload of resize dialog with new processor + setTimeout(() => { + showResizeDialog(newProcessor); + + console.log('โœ… Template COMPLETELY replaced with edited artwork'); + console.log(`๐Ÿ“Š New template stats: ${editCanvas.width}x${editCanvas.height}, ${totalValidPixels} pixels`); + Utils.showAlert('Template successfully replaced with your edited artwork!', 'success'); + }, 100); + }, 300); + }, 100); + }).catch((error) => { + console.error('Failed to load new processor:', error); + Utils.showAlert('Failed to update template. Please try again.', 'error'); + }); + } else { + console.error('WPlaceImageProcessor not available'); + Utils.showAlert('Image processor not available. Please reload the page.', 'error'); + } + + console.log('โœ… Edit changes applied - template replacement in progress'); + } catch (error) { + console.error('Error applying edit changes:', error); + Utils.showAlert('Failed to apply changes. Please try again.', 'error'); + } + } + + if (uploadBtn) { + uploadBtn.addEventListener('click', async () => { + const availableColors = Utils.extractAvailableColors(); + if (availableColors === null || availableColors.length < 10) { + updateUI('noColorsFound', 'error'); + Utils.showAlert(Utils.t('noColorsFound'), 'error'); + return; + } + + if (!state.colorsChecked) { + state.availableColors = availableColors; + state.colorsChecked = true; + updateUI('colorsFound', 'success', { count: availableColors.length }); + await updateStats(); + selectPosBtn.disabled = false; + // Only enable resize button if image is also loaded + if (state.imageLoaded) { + resizeBtn.disabled = false; + } + } + + try { + updateUI('loadingImage', 'default'); + const imageSrc = await Utils.createImageUploader(); + if (!imageSrc) { + updateUI('colorsFound', 'success', { + count: state.availableColors.length, + }); + return; + } + + 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 = + !state.paintTransparentPixels && + pixels[i + 3] < (state.customTransparencyThreshold || 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; + + // Reset session-specific flags when a new image is loaded + state.preFilteringDone = false; + state.progressResetDone = false; + console.log('๐Ÿ”„ Reset session flags for new image load'); + + // Keep existing lastPosition to continue from where we left off + // state.lastPosition = { x: 0, y: 0 }; // REMOVED: Don't reset position + + // Initialize painted map for tracking + Utils.initializePaintedMap(width, height); + + // New image: clear previous resize settings + state.resizeSettings = null; + // Also clear any previous ignore mask + state.resizeIgnoreMask = null; + // Save original image for this browser (dataUrl + dims) + state.originalImage = { dataUrl: imageSrc, width, height }; + saveBotSettings(); + + // Use the original image for the overlay initially + const imageBitmap = await createImageBitmap(processor.img); + await overlayManager.setImage(imageBitmap); + overlayManager.enable(); + toggleOverlayBtn.disabled = false; + toggleOverlayBtn.classList.add('active'); + toggleOverlayBtn.setAttribute('aria-pressed', 'true'); + + // Only enable resize button if colors have also been captured + if (state.colorsChecked) { + resizeBtn.disabled = false; + } + saveBtn.disabled = false; + + if (state.startPosition) { + startBtn.disabled = false; + } + + await updateStats(); + updateDataButtons(); + updateUI('imageLoaded', 'success', { count: totalValidPixels }); + } catch { + updateUI('imageError', 'error'); + } + }); + } + + // Load Extracted button event listener - for loading Art-Extractor JSON files + const loadExtractedBtn = document.getElementById('loadExtractedBtn'); + if (loadExtractedBtn) { + loadExtractedBtn.addEventListener('click', async () => { + try { + updateUI('loadingImage', 'default'); + const fileData = await Utils.loadExtractedFileData(); + + if (!fileData) { + updateUI('ready', 'default'); + return; + } + + console.log('๐Ÿ“ Loading extracted artwork from Art-Extractor...'); + console.log('๐Ÿ” [DEBUG] Loaded file data structure:', { + hasState: !!fileData.state, + hasImageData: !!fileData.imageData, + topLevelKeys: Object.keys(fileData), + stateKeys: fileData.state ? Object.keys(fileData.state) : 'N/A', + imageDataKeys: fileData.imageData ? Object.keys(fileData.imageData) : 'N/A', + fileDataType: typeof fileData, + stateType: typeof fileData.state, + imageDataType: typeof fileData.imageData + }); + + // Validate the data structure before restoring + if (!fileData || typeof fileData !== 'object') { + throw new Error('Invalid file format: File data is not a valid object'); + } + + if (!fileData.state || typeof fileData.state !== 'object') { + console.error('โŒ State validation failed. FileData:', fileData); + throw new Error('Invalid file format: Missing or invalid state object. Please ensure you exported from Art-Extractor correctly.'); + } + + if (!fileData.imageData || typeof fileData.imageData !== 'object') { + console.error('โŒ ImageData validation failed. FileData:', fileData); + throw new Error('Invalid file format: Missing or invalid imageData object. Please ensure you completed the area scan in Art-Extractor.'); + } + + if (!fileData.imageData.pixels || !Array.isArray(fileData.imageData.pixels) || fileData.imageData.pixels.length === 0) { + console.error('โŒ Pixel data validation failed. ImageData:', fileData.imageData); + throw new Error('Invalid file format: No pixel data found. Please scan an area in Art-Extractor before exporting.'); + } + + // Ensure critical fields are present for Art-Extractor compatibility + if (!fileData.state.availableColors) { + console.warn('โš ๏ธ No availableColors in file, using defaults'); + fileData.state.availableColors = []; + } + + // Use the existing restoreProgress function but with special handling + const restoreSuccess = await Utils.restoreProgress(fileData); + + if (!restoreSuccess) { + throw new Error('Failed to restore progress data'); + } + + // After loading, we need to enter position selection mode like when uploading images + if (state.imageLoaded) { + console.log('๐ŸŽฏ Extracted artwork loaded, entering position selection mode...'); + + // Clear position data since Art-Extractor exports may have null positions for manual placement + state.startPosition = null; + state.region = null; + state.selectingPosition = true; + + // For extracted files, force enable all necessary flags for full functionality + state.colorsChecked = true; + state.imageLoaded = true; + + // Ensure image processor is available for extracted files + if (state.imageData && !state.imageData.processor) { + try { + // Create a temporary canvas to generate a data URL for the processor + const canvas = document.createElement('canvas'); + canvas.width = state.imageData.width; + canvas.height = state.imageData.height; + const ctx = canvas.getContext('2d'); + + // Create image data from pixels + const imageData = new ImageData( + new Uint8ClampedArray(state.imageData.pixels), + state.imageData.width, + state.imageData.height + ); + ctx.putImageData(imageData, 0, 0); + + // Create processor with canvas data URL using the correct class + const dataUrl = canvas.toDataURL(); + state.imageData.processor = new window.WPlaceImageProcessor(dataUrl); + + // CRITICAL: Load the processor before using it + await state.imageData.processor.load(); + console.log('๐Ÿ”ง Created and loaded WPlaceImageProcessor for extracted artwork'); + } catch (error) { + console.error('โŒ Failed to create image processor for extracted artwork:', error); + // Fallback: use global processor if available + if (window.globalImageProcessor) { + console.log('๐Ÿ”„ Using global image processor as fallback'); + state.imageData.processor = window.globalImageProcessor; + } + } + } + + console.log('๐ŸŽจ Force-enabled all flags for extracted JSON to access resize panel'); + + // For extracted images, ensure overlay is enabled but don't set position yet + try { + if (overlayManager && state.imageData) { + // Create image bitmap from the restored image data + const canvas = new OffscreenCanvas(state.imageData.width, state.imageData.height); + const ctx = canvas.getContext('2d'); + const imageData = new ImageData( + new Uint8ClampedArray(state.imageData.pixels), + state.imageData.width, + state.imageData.height + ); + ctx.putImageData(imageData, 0, 0); + const imageBitmap = await canvas.transferToImageBitmap(); + + await overlayManager.setImage(imageBitmap); + overlayManager.enable(); + console.log('โœ… Overlay enabled for extracted artwork'); + } + } catch (overlayError) { + console.warn('โš ๏ธ Could not set overlay for extracted artwork:', overlayError); + } + + // For extracted images, don't try to set overlay position until user selects one + // The overlay should already be enabled from the restoreProgress function + + // Update UI with custom message for extracted artwork + Utils.showAlert('๐ŸŽจ Extracted artwork loaded! Please click on the canvas to select where to place it.', 'info'); + updateUI('ready', 'default'); // Use 'ready' instead of 'waitingPosition' to avoid translation issues + + // Enable relevant buttons + selectPosBtn.disabled = false; + // Always enable resize button for extracted files since they have image processor + resizeBtn.disabled = false; + console.log('๐Ÿ”ง Resize button enabled for extracted artwork'); + + // Enable move artwork button (will be fully enabled after position is set) + const moveArtworkBtn = document.getElementById('moveArtworkBtn'); + if (moveArtworkBtn) { + moveArtworkBtn.disabled = false; + } + + // Set up position selection like the regular selectPosBtn + const tempFetch = async (url, options) => { + if ( + typeof url === 'string' && + url.includes('/s0/pixel/') && + options && + options.method === 'POST' + ) { + let coords; + try { + const body = JSON.parse(options.body); + coords = body.coords; + } catch (e) { + return window.originalFetch(url, options); + } + + const tileMatches = url.match(/\/s0\/pixel\/(\-?\d+)\/(\-?\d+)/); + if (tileMatches && coords && coords.length >= 2) { + const tileX = parseInt(tileMatches[1]); + const tileY = parseInt(tileMatches[2]); + const pixelX = coords[0]; + const pixelY = coords[1]; + + state.startPosition = { x: pixelX, y: pixelY }; + state.region = { x: tileX, y: tileY }; + state.selectingPosition = false; + + console.log('๐ŸŽฏ Position selected for extracted artwork:', { + startPosition: state.startPosition, + region: state.region + }); + + // Restore original fetch + window.fetch = window.originalFetch; + + // Update overlay position with validation + try { + if (state.startPosition && state.region && overlayManager) { + await overlayManager.setPosition(state.startPosition, state.region); + console.log('โœ… Overlay position updated successfully'); + } else { + console.warn('โš ๏ธ Cannot set overlay position: missing startPosition or region'); + } + } catch (positionError) { + console.error('โŒ Failed to set overlay position:', positionError); + } + + startBtn.disabled = false; + selectPosBtn.textContent = Utils.t('selectPosition'); + + // Enable Move Artwork button when position is set + const moveArtworkBtn = document.getElementById('moveArtworkBtn'); + if (moveArtworkBtn) { + moveArtworkBtn.disabled = false; + } + + updateUI('ready', 'success'); + Utils.showAlert('Position selected! Ready to start painting.', 'success'); + } + } + return window.originalFetch(url, options); + }; + + // Store original fetch and replace with position capture + if (!window.originalFetch) { + window.originalFetch = window.fetch; + } + window.fetch = tempFetch; + } + + } catch (error) { + console.error('โŒ Failed to load extracted artwork:', error); + Utils.showAlert(`Failed to load extracted artwork: ${error.message}`, 'error'); + updateUI('ready', 'default'); + } + }); + } + + if (resizeBtn) { + resizeBtn.addEventListener('click', () => { + console.log('๐Ÿ” [DEBUG] Resize button clicked. State check:', { + imageLoaded: state.imageLoaded, + hasProcessor: !!(state.imageData && state.imageData.processor), + colorsChecked: state.colorsChecked, + hasAvailableColors: !!(state.availableColors && state.availableColors.length > 0) + }); + + if (state.imageLoaded && state.imageData && state.imageData.processor) { + showResizeDialog(state.imageData.processor); + } else { + let message = 'Please upload an image and check colors first.'; + if (!state.imageLoaded) message = 'Please upload an image first.'; + else if (!state.imageData || !state.imageData.processor) message = 'Image processor not available. Please reload the image.'; + Utils.showAlert(message, 'warning'); + } + }); + } + + // Move Artwork button event listener + const moveArtworkBtn = document.getElementById('moveArtworkBtn'); + if (moveArtworkBtn) { + moveArtworkBtn.addEventListener('click', () => { + if (state.imageLoaded && (state.startPosition || state.selectingPosition)) { + showMoveArtworkPanel(); + } else if (!state.imageLoaded) { + Utils.showAlert('Please upload or load an image first', 'warning'); + } else { + Utils.showAlert('Please select a position for the artwork first', 'warning'); + } + }); + } + + if (selectPosBtn) { + selectPosBtn.addEventListener('click', async () => { + if (state.selectingPosition) return; + + state.selectingPosition = true; + state.startPosition = null; + state.region = null; + startBtn.disabled = true; + + // Disable Move Artwork button when selecting new position + const moveArtworkBtn = document.getElementById('moveArtworkBtn'); + if (moveArtworkBtn) { + moveArtworkBtn.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], + }; + // Keep existing lastPosition to continue from where we left off + // state.lastPosition = { x: 0, y: 0 }; // REMOVED: Don't reset position + + // Update overlay position with validation + try { + if (state.startPosition && state.region && overlayManager) { + await overlayManager.setPosition(state.startPosition, state.region); + console.log('โœ… Regular overlay position updated successfully'); + } else { + console.warn('โš ๏ธ Cannot set regular overlay position: missing startPosition or region'); + } + } catch (positionError) { + console.error('โŒ Failed to set regular overlay position:', positionError); + } + + if (state.imageLoaded) { + startBtn.disabled = false; + + // Enable Move Artwork button when position is set + const moveArtworkBtn = document.getElementById('moveArtworkBtn'); + if (moveArtworkBtn) { + moveArtworkBtn.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; + } + await ensureToken(); + if (!getTurnstileToken()) return; + + // Only reset progress once per save file load session + if (!state.progressResetDone) { + const savedPaintedPixels = state.paintedPixels; // Store original value + state.paintedPixels = 0; + state.progressResetDone = true; + console.log(`๐Ÿ”„ Reset pixel progress for new save file session (was: ${savedPaintedPixels})`); + await updateStats(); // Update UI to show 0 progress + } + + // Only reset painted pixels on first start of session (when pre-filtering hasn't been done) + if (!state.preFilteringDone) { + + // Perform progressive pixel detection from top-left to bottom-right + console.log('๐Ÿ” Starting progressive pixel detection from top-left to bottom-right...'); + await performProgressivePixelDetection(); + } else { + console.log('๐Ÿ”„ Continuing session - pre-filtering already done, but progress reset'); + } + + 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 getAccounts(); + await processImage(); + } catch (e) { + console.error('Unexpected error:', e); + updateUI('paintingError', 'error'); + } finally { + state.running = false; + stopBtn.disabled = true; + saveBtn.disabled = false; + + if (state.stopFlag) { + startBtn.disabled = false; + } else { + startBtn.disabled = true; + uploadBtn.disabled = false; + const loadExtractedBtn = document.getElementById('loadExtractedBtn'); + if (loadExtractedBtn) loadExtractedBtn.disabled = false; + selectPosBtn.disabled = false; + resizeBtn.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('paintingStoppedByUser', '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 && cooldownInput && cooldownValue && cooldownDecrease && cooldownIncrease) { + const updateCooldown = (newValue) => { + const threshold = Math.max(1, Math.min(state.maxCharges || 999, parseInt(newValue))); + state.cooldownChargeThreshold = threshold; + + // Update both controls (value shows in input, label shows unit only) + cooldownSlider.value = threshold; + cooldownInput.value = threshold; + cooldownValue.textContent = `${Utils.t('charges')}`; + + saveBotSettings(); + NotificationManager.resetEdgeTracking(); // prevent spurious notify after threshold change + }; + + // Slider event listener + cooldownSlider.addEventListener('input', (e) => { + updateCooldown(e.target.value); + }); + + // Number input event listener + cooldownInput.addEventListener('input', (e) => { + updateCooldown(e.target.value); + }); + + // Decrease button + cooldownDecrease.addEventListener('click', () => { + updateCooldown(parseInt(cooldownInput.value) - 1); + }); + + // Increase button + cooldownIncrease.addEventListener('click', () => { + updateCooldown(parseInt(cooldownInput.value) + 1); + }); + + // Add scroll-to-adjust for cooldown slider + Utils.createScrollToAdjust(cooldownSlider, updateCooldown, 1, state.maxCharges, 1); + + // Skip cooldown button event handler + const skipCooldownBtn = document.getElementById('skipCooldownBtn'); + if (skipCooldownBtn) { + skipCooldownBtn.addEventListener('click', () => { + if (state.preciseCurrentCharges < state.cooldownChargeThreshold) { + console.log(`[Auto-Image] Skip cooldown requested - resetting to account index 0`); + + // Reset to account index 0 (start new cycle) + state.currentActiveIndex = 0; + console.log(`๐Ÿ”„ Reset currentActiveIndex to 0 for new cycle`); + + // Reset charges to threshold to bypass cooldown + state.preciseCurrentCharges = state.cooldownChargeThreshold; + console.log(`[Auto-Image] Cooldown skipped! Charges set to threshold: ${state.cooldownChargeThreshold}`); + + // Switch to first account if we have multiple accounts + if (accountManager.getAccountCount() > 1) { + const firstAccountInfo = accountManager.getAccountByIndex(0); + if (firstAccountInfo && firstAccountInfo.token) { + console.log(`๐Ÿ”„ Switching to first account: index 0 (${firstAccountInfo.displayName})`); + // Get accounts array for the switch + const accounts = JSON.parse(localStorage.getItem("accounts")) || []; + if (accounts.length > 0) { + switchToSpecificAccount(firstAccountInfo.token, firstAccountInfo.displayName).then(() => { + console.log(`โœ… Successfully switched to account index 0 after cooldown skip`); + // Update UI immediately + updateChargesThresholdUI(0); + // Trigger immediate check for painting + if (state.isEnabled && !state.stopFlag) { + setTimeout(() => { + checkAndPaint(); + }, 100); + } + }).catch(err => { + console.error(`โŒ Failed to switch to account index 0:`, err); + }); + } else { + console.warn(`โš ๏ธ No accounts available for switching`); + } + } else { + console.warn(`โš ๏ธ First account info not found or missing token`); + } + } else { + console.log(`๐Ÿ“ Single account mode - no switching needed`); + // Update UI immediately + updateChargesThresholdUI(0); + // Trigger immediate check for painting + if (state.isEnabled && !state.stopFlag) { + setTimeout(() => { + checkAndPaint(); + }, 100); + } + } + } + }); + } + } + + loadBotSettings(); + // Ensure notification poller reflects current settings + NotificationManager.syncFromState(); + } + + function getMsToTargetCharges(current, target, cooldown, intervalMs = 0) { + const remainingCharges = target - current; + return Math.max(0, remainingCharges * cooldown - intervalMs); + } + + function updateChargesThresholdUI(intervalMs) { + if (state.stopFlag) return; + + const threshold = state.cooldownChargeThreshold; + const remainingMs = getMsToTargetCharges( + state.preciseCurrentCharges, + threshold, + state.cooldown, + intervalMs + ); + const timeText = Utils.msToTimeText(remainingMs); + + updateUI( + 'noChargesThreshold', + 'warning', + { + threshold, + current: state.displayCharges, + time: timeText, + }, + true + ); + + // Update skip cooldown button state + const skipCooldownBtn = document.getElementById('skipCooldownBtn'); + if (skipCooldownBtn) { + const isInCooldown = state.preciseCurrentCharges < threshold && remainingMs > 0; + skipCooldownBtn.disabled = !isInCooldown; + skipCooldownBtn.title = isInCooldown + ? `Skip cooldown (${timeText} remaining)` + : 'Skip cooldown (only available during cooldown)'; + } + } + + // Fast tile-based pixel detection from top-left to bottom-right + async function performProgressivePixelDetection() { + if (!state.imageLoaded || !state.imageData) { + console.log('โš ๏ธ No image loaded, skipping pixel detection'); + return; + } + + const startTime = performance.now(); + const { width, height } = state.imageData; + const startX = state.startPosition.x; + const startY = state.startPosition.y; + const regionX = state.region.x; + const regionY = state.region.y; + + let detectedPixels = 0; + let totalChecked = 0; + + console.log(`๐Ÿš€ Fast scanning ${width}x${height} image from top-left (0,0) to bottom-right (${width - 1},${height - 1})...`); + + updateUI('pixelDetection', 'info', { message: 'Fast detecting already painted pixels...' }); + + // Calculate affected tiles + const worldX1 = startX; + const worldY1 = startY; + const worldX2 = startX + width - 1; + const worldY2 = startY + height - 1; + + const startTileX = Math.floor(worldX1 / 1000); + const startTileY = Math.floor(worldY1 / 1000); + const endTileX = Math.floor(worldX2 / 1000); + const endTileY = Math.floor(worldY2 / 1000); + + console.log(`๐Ÿ“„ Processing tiles from (${startTileX},${startTileY}) to (${endTileX},${endTileY})`); + + // Cache for downloaded tile data + const tileDataCache = new Map(); + + // Download and cache all required tiles in parallel + const tilePromises = []; + for (let tileY = startTileY; tileY <= endTileY; tileY++) { + for (let tileX = startTileX; tileX <= endTileX; tileX++) { + const absoluteTileX = regionX + tileX; + const absoluteTileY = regionY + tileY; + const tileKey = `${absoluteTileX},${absoluteTileY}`; + + tilePromises.push( + downloadTileImageData(absoluteTileX, absoluteTileY).then(imageData => { + if (imageData) { + tileDataCache.set(tileKey, imageData); + } + }).catch(e => { + console.warn(`โš ๏ธ Failed to download tile ${absoluteTileX},${absoluteTileY}:`, e.message); + }) + ); + } + } + + // Wait for all tiles to download + await Promise.all(tilePromises); + console.log(`๐Ÿ“ฆ Downloaded ${tileDataCache.size} tiles for fast pixel checking`); + + // Fast pixel detection using cached tile data + for (let y = 0; y < height; y++) { + for (let x = 0; x < width; x++) { + totalChecked++; + + // Check if pixel is eligible for painting + const targetPixelInfo = checkPixelEligibility(x, y); + if (!targetPixelInfo.eligible) { + continue; // Skip non-eligible pixels + } + + // Calculate absolute world coordinates + const absX = startX + x; + const absY = startY + y; + const adderX = Math.floor(absX / 1000); + const adderY = Math.floor(absY / 1000); + const pixelX = absX % 1000; + const pixelY = absY % 1000; + const absoluteTileX = regionX + adderX; + const absoluteTileY = regionY + adderY; + + // Check if already marked as painted in local map + if (Utils.isPixelPainted(x, y, absoluteTileX, absoluteTileY)) { + detectedPixels++; + continue; + } + + // Fast pixel color check using cached tile data + const tileKey = `${absoluteTileX},${absoluteTileY}`; + const tileImageData = tileDataCache.get(tileKey); + + if (tileImageData) { + try { + // Direct array access - much faster than canvas operations + const tileWidth = tileImageData.width; + const tileHeight = tileImageData.height; + const data = tileImageData.data; + + // Ensure pixel coordinates are within tile bounds + if (pixelX >= 0 && pixelX < tileWidth && pixelY >= 0 && pixelY < tileHeight) { + const pixelIndex = (pixelY * tileWidth + pixelX) * 4; + const r = data[pixelIndex]; + const g = data[pixelIndex + 1]; + const b = data[pixelIndex + 2]; + const a = data[pixelIndex + 3]; + + // Check alpha threshold + const alphaThresh = state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD; + if (a >= alphaThresh) { + const existingMappedColor = Utils.resolveColor( + [r, g, b], + state.availableColors, + !state.paintUnavailablePixels + ); + const isAlreadyPainted = existingMappedColor.id === targetPixelInfo.mappedColorId; + + if (isAlreadyPainted) { + // Check if pixel is already marked as painted to avoid double counting + if (!Utils.isPixelPainted(x, y, absoluteTileX, absoluteTileY)) { + // Mark as painted in the map but DO NOT increment progress counter + // Progress counter should only reflect actual painting sequence position + Utils.markPixelPainted(x, y, absoluteTileX, absoluteTileY); + detectedPixels++; + } else { + // Pixel already tracked, just count it for detection stats + detectedPixels++; + } + } + } + } + } catch (e) { + // Skip pixels we can't check + console.warn(`โš ๏ธ Could not check pixel (${x}, ${y}):`, e.message); + } + } + + // Update progress periodically + if (totalChecked % 2500 === 0) { + const progress = Math.round((totalChecked / (width * height)) * 100); + updateUI('pixelDetection', 'info', { + message: `Fast detecting... ${progress}% (Found: ${detectedPixels})` + }); + // Yield control briefly to prevent UI blocking + await new Promise(resolve => setTimeout(resolve, 0)); + } + } + } + + const processingTime = Math.round(performance.now() - startTime); + console.log(`๐Ÿ Fast pixel detection complete in ${processingTime}ms:`); + console.log(` - Total pixels checked: ${totalChecked}`); + console.log(` - Already painted pixels found: ${detectedPixels}`); + console.log(` - Updated progress: ${state.paintedPixels}/${state.totalPixels}`); + console.log(` - Performance: ${Math.round(totalChecked / (processingTime / 1000))} pixels/second`); + + // Update progress display + await updateStats(); + updateUI('pixelDetectionComplete', 'success', { + message: `Found ${detectedPixels} already painted pixels in ${processingTime}ms` + }); + } + + // Fast tile download and ImageData extraction (similar to Art-Extractor approach) + async function downloadTileImageData(tileX, tileY) { + try { + const tileUrl = `https://backend.wplace.live/files/s0/tiles/${tileX}/${tileY}.png`; + const response = await fetch(tileUrl); + if (!response.ok) { + throw new Error(`HTTP ${response.status}`); + } + + const blob = await response.blob(); + return await processTileBlob(blob); + } catch (error) { + console.warn(`Failed to download tile ${tileX},${tileY}:`, error.message); + return null; + } + } + + // Process tile blob into ImageData (adapted from Art-Extractor) + async function processTileBlob(blob) { + try { + const img = new Image(); + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + return new Promise((resolve, reject) => { + img.onload = () => { + canvas.width = img.width; + canvas.height = img.height; + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, 0, 0); + const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + resolve(imageData); + }; + img.onerror = () => reject(new Error('Failed to load image')); + img.src = URL.createObjectURL(blob); + }); + } catch (error) { + console.error('Error processing tile blob:', error); + return null; + } + } + + function generateCoordinates(width, height, mode, direction, snake, blockWidth, blockHeight, startFromX = 0, startFromY = 0) { + const coords = []; + console.log( + 'Generating coordinates with \n mode:', + mode, + '\n direction:', + direction, + '\n snake:', + snake, + '\n blockWidth:', + blockWidth, + '\n blockHeight:', + blockHeight, + '\n startFromX:', + startFromX, + '\n startFromY:', + startFromY + ); + // --------- Standard 4 corners traversal ---------- + let xStart, xEnd, xStep; + let yStart, yEnd, yStep; + switch (direction) { + case 'top-left': + xStart = 0; + xEnd = width; + xStep = 1; + yStart = 0; + yEnd = height; + yStep = 1; + break; + case 'top-right': + xStart = width - 1; + xEnd = -1; + xStep = -1; + yStart = 0; + yEnd = height; + yStep = 1; + break; + case 'bottom-left': + xStart = 0; + xEnd = width; + xStep = 1; + yStart = height - 1; + yEnd = -1; + yStep = -1; + break; + case 'bottom-right': + xStart = width - 1; + xEnd = -1; + xStep = -1; + yStart = height - 1; + yEnd = -1; + yStep = -1; + break; + default: + throw new Error(`Unknown direction: ${direction}`); + } + + // --------- Traversal modes ---------- + if (mode === 'rows') { + for (let y = yStart; y !== yEnd; y += yStep) { + if (snake && (y - yStart) % 2 !== 0) { + for (let x = xEnd - xStep; x !== xStart - xStep; x -= xStep) { + coords.push([x, y]); + } + } else { + for (let x = xStart; x !== xEnd; x += xStep) { + coords.push([x, y]); + } + } + } + } else if (mode === 'columns') { + for (let x = xStart; x !== xEnd; x += xStep) { + if (snake && (x - xStart) % 2 !== 0) { + for (let y = yEnd - yStep; y !== yStart - yStep; y -= yStep) { + coords.push([x, y]); + } + } else { + for (let y = yStart; y !== yEnd; y += yStep) { + coords.push([x, y]); + } + } + } + } else if (mode === 'circle-out') { + const cx = Math.floor(width / 2); + const cy = Math.floor(height / 2); + const maxRadius = Math.ceil(Math.sqrt(cx * cx + cy * cy)); + + for (let r = 0; r <= maxRadius; r++) { + for (let y = cy - r; y <= cy + r; y++) { + for (let x = cx - r; x <= cx + r; x++) { + if (x >= 0 && x < width && y >= 0 && y < height) { + const dist = Math.max(Math.abs(x - cx), Math.abs(y - cy)); + if (dist === r) coords.push([x, y]); + } + } + } + } + } else if (mode === 'circle-in') { + const cx = Math.floor(width / 2); + const cy = Math.floor(height / 2); + const maxRadius = Math.ceil(Math.sqrt(cx * cx + cy * cy)); + + for (let r = maxRadius; r >= 0; r--) { + for (let y = cy - r; y <= cy + r; y++) { + for (let x = cx - r; x <= cx + r; x++) { + if (x >= 0 && x < width && y >= 0 && y < height) { + const dist = Math.max(Math.abs(x - cx), Math.abs(y - cy)); + if (dist === r) coords.push([x, y]); + } + } + } + } + } else if (mode === 'blocks' || mode === 'shuffle-blocks') { + const blocks = []; + for (let by = 0; by < height; by += blockHeight) { + for (let bx = 0; bx < width; bx += blockWidth) { + const block = []; + for (let y = by; y < Math.min(by + blockHeight, height); y++) { + for (let x = bx; x < Math.min(bx + blockWidth, width); x++) { + block.push([x, y]); + } + } + blocks.push(block); + } + } + + if (mode === 'shuffle-blocks') { + // Simple Fisher-Yates shuffle + for (let i = blocks.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [blocks[i], blocks[j]] = [blocks[j], blocks[i]]; + } + } + + // Concatenate all blocks + for (const block of blocks) { + coords.push(...block); + } + } else { + throw new Error(`Unknown mode: ${mode}`); + } + + // Filter coordinates to start from the specified position + if (startFromX > 0 || startFromY > 0) { + console.log(`๐Ÿ”„ Filtering coordinates to resume from position (${startFromX}, ${startFromY})`); + let startIndex = -1; + + // Find the starting position in the coordinate list + for (let i = 0; i < coords.length; i++) { + const [x, y] = coords[i]; + if (x === startFromX && y === startFromY) { + startIndex = i; + break; + } + } + + if (startIndex >= 0) { + // Resume from the found position (skip all previous coordinates) + const filteredCoords = coords.slice(startIndex); + console.log(`โœ‚๏ธ Resuming: skipped ${startIndex} coordinates, continuing with ${filteredCoords.length} remaining`); + return filteredCoords; + } else { + console.warn(`โš ๏ธ Resume position (${startFromX}, ${startFromY}) not found in coordinate list, starting from beginning`); + } + } + + return coords; + } + + async function flushPixelBatch(pixelBatch) { + if (!pixelBatch || pixelBatch.pixels.length === 0) return true; + + const batchSize = pixelBatch.pixels.length; + console.log( + `๐Ÿ“ฆ Sending batch with ${batchSize} pixels (region: ${pixelBatch.regionX},${pixelBatch.regionY})` + ); + const success = await sendBatchWithRetry( + pixelBatch.pixels, + pixelBatch.regionX, + pixelBatch.regionY + ); + if (success) { + // Only increment progress for actually painted pixels to prevent multiplication + const actuallyPaintedCount = pixelBatch.pixels.length; + state.paintedPixels += actuallyPaintedCount; + console.log(`๐Ÿ“Š Added ${actuallyPaintedCount} painted pixels to progress (total: ${state.paintedPixels})`); + + pixelBatch.pixels.forEach((p) => { + Utils.markPixelPainted(p.x, p.y, pixelBatch.regionX, pixelBatch.regionY); + }); + + // Update last painted position to the last pixel in the successful batch + if (pixelBatch.pixels.length > 0) { + const lastPixel = pixelBatch.pixels[pixelBatch.pixels.length - 1]; + state.lastPaintedPosition = { x: lastPixel.x, y: lastPixel.y }; + } + + // IMPORTANT: Decrement charges locally to match Acc-Switch.js behavior + state.displayCharges = Math.max(0, state.displayCharges - batchSize); + state.preciseCurrentCharges = Math.max(0, state.preciseCurrentCharges - batchSize); + + state.fullChargeData = { + ...state.fullChargeData, + spentSinceShot: state.fullChargeData.spentSinceShot + batchSize, + }; + await updateStats(); + // Update account list with new charges + await updateCurrentAccountInList(); + // Progress tracking removed from UI to reduce visual clutter + Utils.performSmartSave(); + + if (CONFIG.PAINTING_SPEED_ENABLED && state.paintingSpeed > 0 && batchSize > 0) { + const delayPerPixel = 1000 / state.paintingSpeed; + const totalDelay = Math.max(100, delayPerPixel * batchSize); + await Utils.sleep(totalDelay); + } + } else { + console.error(`โŒ Batch failed permanently after retries. Stopping painting.`); + state.stopFlag = true; + updateUI('paintingBatchFailed', 'error'); + } + + pixelBatch.pixels = []; + return success; + } + + async function processImage() { + console.log('๐Ÿš€ Starting auto-swap enabled painting workflow'); + + try { + // Main painting cycle - repeats until image complete or stopped + while (!state.stopFlag) { + console.log('๐Ÿ“‹ Phase 1: Starting painting session'); + const paintingResult = await executePaintingSession(); + + if (paintingResult === 'completed') { + console.log('๐ŸŽ‰ Image painting completed!'); + break; + } + + if (paintingResult === 'stopped') { + console.log('โน๏ธ Painting stopped by user'); + break; + } + + if (paintingResult === 'charges_depleted') { + if (CONFIG.autoBuyToggle && CONFIG.autoBuy != buyTypes[0]) { + console.log('Trying to buy more charges before stopping'); + const purchaseResult = await purchase(CONFIG.autoBuy); + if (purchaseResult == 2) { + console.log('โœ… Purchase successful, continuing painting'); + await updateStats(); + await updateCurrentAccountInList(); + continue; + } + else if (purchaseResult == 1) { + console.log('๐Ÿ˜ญ Not enough droplets to buy more charges, swapping account.'); + } + else { + console.log('๐Ÿค” Purchase failed.'); + } + } + else console.log('๐Ÿคซ Auto buy is disabled, wait for cooldown or swapping account.'); + if (!CONFIG.autoSwap) { + // Original workflow: cooldown period + console.log('โฑ๏ธ Phase 2: Entering cooldown period (auto-swap disabled)'); + const cooldownResult = await executeCooldownPeriod(); + + if (cooldownResult === 'stopped') { + console.log('โน๏ธ Cooldown stopped by user'); + break; + } + + // Phase 3: Regenerate token for next painting session + console.log('๐Ÿ”‘ Phase 3: Regenerating token for next session'); + const tokenResult = await regenerateTokenForNewSession(); + + if (!tokenResult) { + console.log('โŒ Failed to regenerate token, stopping'); + state.stopFlag = true; + break; + } + } else { + // Auto-swap workflow: simplified logic + console.log('๐Ÿ”„ Auto-swap enabled: checking account switching options'); + + // Retrieve fresh accounts list each time to avoid stale data + const accounts = JSON.parse(localStorage.getItem("accounts")) || []; + console.log(`๐Ÿ“Š Retrieved ${accounts.length} accounts from localStorage`); + + if (accounts.length <= 1) { + console.log('๐Ÿ“‹ Only one account available, using standard cooldown'); + const cooldownResult = await executeCooldownPeriod(); + if (cooldownResult === 'stopped') break; + + const tokenResult = await regenerateTokenForNewSession(); + if (!tokenResult) { + state.stopFlag = true; + break; + } + } else { + // Debug current state + const totalAccounts = accountManager.getAccountCount(); + console.log(`๐Ÿ“Š Account Status - Current index: ${accountManager.currentIndex}, Total accounts: ${totalAccounts}`); + + // Check if we're at the last account in the sequence + const isLastAccount = accountManager.currentIndex >= totalAccounts - 1; + console.log(`๐Ÿ” Is last account? ${isLastAccount} (index ${accountManager.currentIndex} of ${totalAccounts})`); + + if (!isLastAccount && totalAccounts > 1) { + // Update current account status before switching + console.log('๐Ÿ“Š Updating current account status before switch...'); + await updateCurrentAccountInList(); + + // Switch to next account immediately (no cooldown) - only if we have multiple accounts + const nextAccount = accountManager.getNextAccount(); + console.log(`๐Ÿ”„ Switching to next account: ${nextAccount?.displayName} (${accountManager.currentIndex + 2}/${totalAccounts})`); + const switchResult = await switchToNextAccount(accounts); + if (!switchResult) { + console.log('โŒ Account switch failed, stopping'); + state.stopFlag = true; + break; + } + // Continue painting with new account immediately + continue; + } else if (totalAccounts === 1) { + // Only one account available - use cooldown and continue with same account + console.log('โ„น๏ธ Only one account available, entering cooldown period'); + const cooldownResult = await executeCooldownPeriod(); + if (cooldownResult === 'stopped') break; + console.log('โœ… Cooldown complete, continuing with same account'); + continue; + } else { + // Last account reached - use cooldown then switch to first account + console.log('โฑ๏ธ Last account reached, entering cooldown period'); + console.log(`๐Ÿ“Š Current account: index ${accountManager.currentIndex}, Last account: index ${totalAccounts - 1}`); + + const cooldownResult = await executeCooldownPeriod(); + if (cooldownResult === 'stopped') break; + + // After cooldown, switch to first account + console.log('๐Ÿ” Cooldown complete, switching to first account'); + console.log(`๐Ÿ”„ Before switch - Current index: ${accountManager.currentIndex}, Target: index 0`); + + const firstAccountInfo = accountManager.getAccountByIndex(0); + const firstAccountToken = firstAccountInfo?.token; + + if (!firstAccountToken) { + console.log('โŒ First account token not found, stopping'); + state.stopFlag = true; + break; + } + + // Reset to first position + accountManager.setCurrentIndex(0); + + const switchResult = await switchToSpecificAccount(firstAccountToken, firstAccountInfo.displayName); + if (!switchResult) { + console.log('โŒ Switch to ID 1 failed, stopping'); + state.stopFlag = true; + break; + } + + console.log(`โœ… Successfully switched to ID 1 (${firstAccountInfo.displayName}). Cycle restarted.`); + // Continue painting with first account + continue; + } + } + } + } + + console.log('๐Ÿ”„ Cycle complete, starting next painting session'); + } + } finally { + await finalizePaintingProcess(); + } + } + + // Phase 1: Execute a complete painting session using all available charges + async function executePaintingSession() { + console.log('๐ŸŽจ Starting painting session - using all charges until 0'); + const { width, height, pixels } = state.imageData; + const { x: startX, y: startY } = state.startPosition; + const { x: regionX, y: regionY } = state.region; + + // Check if we're working with restored data by looking for existing availableColors + const isRestoredData = state.availableColors && state.availableColors.length > 0 && state.colorsChecked; + + if (!isRestoredData) { + // Wait for original tiles to load if needed + const tilesReady = await overlayManager.waitForTiles( + regionX, + regionY, + width, + height, + startX, + startY, + 10000 // timeout 10s + ); + + if (!tilesReady) { + updateUI('overlayTilesNotLoaded', 'error'); + state.stopFlag = true; + return 'stopped'; + } + } + + let pixelBatch = null; + let skippedPixels = { + transparent: 0, + white: 0, + alreadyPainted: 0, + colorUnavailable: 0, + }; + + // IMPORTANT: Check charges once at start, then paint until depleted + console.log('๐Ÿ”‹ Checking initial charges for painting session'); + const initialChargeCheck = await WPlaceService.getCharges(); + state.displayCharges = Math.floor(initialChargeCheck.charges); + state.preciseCurrentCharges = initialChargeCheck.charges; + state.cooldown = initialChargeCheck.cooldown; + await updateStats(); + if (state.displayCharges <= 0) { + console.log('โšก No charges available, skipping painting session'); + return 'charges_depleted'; + } + + console.log(`๐Ÿ”‹ Starting with ${state.displayCharges} charges - painting until depleted`); + + // Paint pixels until we run out of charges or complete the image + try { + // First generate coordinates without filtering to count skipped ones + const allCoords = generateCoordinates( + width, + height, + state.coordinateMode, + state.coordinateDirection, + state.coordinateSnake, + state.blockWidth, + state.blockHeight, + 0, // Don't filter here + 0 // Don't filter here + ); + + // Find how many coordinates are skipped and set progress accordingly + let skippedCoordinates = 0; + if (state.lastPosition.x > 0 || state.lastPosition.y > 0) { + const startingCoordIndex = allCoords.findIndex(([x, y]) => x === state.lastPosition.x && y === state.lastPosition.y); + skippedCoordinates = startingCoordIndex >= 0 ? startingCoordIndex : 0; + + if (skippedCoordinates > 0) { + // Set progress to exactly match skipped coordinates + state.paintedPixels = skippedCoordinates; + console.log(`๐Ÿ“ˆ Progress set to match skipped coordinates: ${skippedCoordinates} pixels`); + console.log(`๐Ÿ”„ Resuming painting from position (${state.lastPosition.x}, ${state.lastPosition.y})`); + console.log(`๐Ÿ“Š Current progress: ${state.paintedPixels} pixels painted`); + await updateStats(); // Update UI to show correct progress + } + } + + // Now generate the actual filtered coordinates for painting + const coords = generateCoordinates( + width, + height, + state.coordinateMode, + state.coordinateDirection, + state.coordinateSnake, + state.blockWidth, + state.blockHeight, + state.lastPosition.x, + state.lastPosition.y + ); + + // OPTIMIZATION: Pre-filter already painted pixels (happens only once per session) + let eligibleCoords = []; + let alreadyPaintedCount = 0; + + if (!state.preFilteringDone) { + console.log('๐Ÿ” Pre-filtering already painted pixels (one-time detection for this session)...'); + + for (const [x, y] of coords) { + const targetPixelInfo = checkPixelEligibility(x, y); + + if (!targetPixelInfo.eligible) { + if (targetPixelInfo.reason !== 'alreadyPainted') { + skippedPixels[targetPixelInfo.reason]++; + + } + continue; + } + + // Check if already painted (only once per session) + let absX = startX + x; + let absY = startY + y; + let adderX = Math.floor(absX / 1000); + let adderY = Math.floor(absY / 1000); + let pixelX = absX % 1000; + let pixelY = absY % 1000; + + try { + const tilePixelRGBA = await overlayManager.getTilePixelColor( + regionX + adderX, + regionY + adderY, + pixelX, + pixelY + ); + + if (tilePixelRGBA && Array.isArray(tilePixelRGBA)) { + const mappedCanvasColor = Utils.resolveColor( + tilePixelRGBA.slice(0, 3), + state.availableColors, + !state.paintUnavailablePixels // Use same parameter as target pixel + ); + const isMatch = mappedCanvasColor.id === targetPixelInfo.mappedColorId; + if (isMatch) { + alreadyPaintedCount++; + // Mark as painted in map but DO NOT increment progress counter + // Progress should only reflect actual painting sequence position + Utils.markPixelPainted(x, y, regionX + adderX, regionY + adderY); + continue; // Skip already painted pixels + } + } + } catch (e) { + // If we can't check, include the pixel (better to attempt than skip) + } + + // Add eligible unpainted pixel to list + eligibleCoords.push([x, y, targetPixelInfo]); + } + + // Mark pre-filtering as done for this session + state.preFilteringDone = true; + + // Log pre-filtering results + if (alreadyPaintedCount > 0) { + console.log(`โœ“ Pre-filter complete: ${alreadyPaintedCount} already painted pixels detected (not added to progress counter)`); + console.log('โ„น๏ธ This detection will not happen again until a new image/save is loaded'); + console.log('๐Ÿ“Š Progress counter only reflects actual painting sequence position'); + // No need to update stats since progress wasn't changed + } + skippedPixels.alreadyPainted = alreadyPaintedCount; + } else { + // Pre-filtering already done this session, just filter for basic eligibility + console.log('๐Ÿ” Using existing pre-filter results (already done this session)'); + for (const [x, y] of coords) { + const targetPixelInfo = checkPixelEligibility(x, y); + + if (!targetPixelInfo.eligible) { + if (targetPixelInfo.reason !== 'alreadyPainted') { + skippedPixels[targetPixelInfo.reason]++; + } + continue; + } + + // Only include pixels that haven't been marked as painted yet + let absX = startX + x; + let absY = startY + y; + let adderX = Math.floor(absX / 1000); + let adderY = Math.floor(absY / 1000); + + if (!Utils.isPixelPainted(x, y, regionX + adderX, regionY + adderY)) { + eligibleCoords.push([x, y, targetPixelInfo]); + } + } + } + + // Paint eligible pixels (already pre-filtered, no duplicate checks) + outerLoop: for (const [x, y, targetPixelInfo] of eligibleCoords) { + if (state.stopFlag) { + if (pixelBatch && pixelBatch.pixels.length > 0) { + console.log(`๐ŸŽฏ Sending last batch before stop with ${pixelBatch.pixels.length} pixels`); + await flushPixelBatch(pixelBatch); + } + state.lastPosition = { x, y }; + // Show paused coordinates in UI with proper translation template + // Use last painted position if available, otherwise use current position + const pausedX = state.lastPaintedPosition.x || x; + const pausedY = state.lastPaintedPosition.y || y; + updateUI('paintingPaused', 'warning', { x: pausedX, y: pausedY }); + console.log(`โธ๏ธ Painting paused after last painted coordinates (${pausedX}, ${pausedY})`); + return 'stopped'; + } + + // Check if we have charges left (local count, no API call) + if (state.displayCharges <= 0) { + // console.log("Try to buy paint charges"); + // await purchase("paint_charges"); + await updateStats(); + if (state.displayCharges <= 0) { + console.log('โšก No charges left (local count), ending painting session'); + if (pixelBatch && pixelBatch.pixels.length > 0) { + console.log(`๐ŸŽฏ Sending final batch with ${pixelBatch.pixels.length} pixels`); + await flushPixelBatch(pixelBatch); + } + state.lastPosition = { x, y }; + return 'charges_depleted'; + } + // else { + // console.log(`๐Ÿ”‹ Charges after purchase: ${state.displayCharges}, continuing painting`); + // } + } + + let absX = startX + x; + let absY = startY + y; + + let adderX = Math.floor(absX / 1000); + let adderY = Math.floor(absY / 1000); + let pixelX = absX % 1000; + let pixelY = absY % 1000; + + // CRITICAL FIX: Always check if pixel is already painted (both locally and on canvas) + if (Utils.isPixelPainted(x, y, regionX + adderX, regionY + adderY)) { + console.log(`โญ๏ธ Skipping already painted pixel at (${x}, ${y}) - marked in local map`); + continue; // Skip already painted pixels + } + + // REAL-TIME CANVAS CHECK: Verify against actual canvas state to prevent overpainting + try { + const existingColorRGBA = await overlayManager.getTilePixelColor( + regionX + adderX, + regionY + adderY, + pixelX, + pixelY + ).catch(() => null); + + if (existingColorRGBA && Array.isArray(existingColorRGBA)) { + const [er, eg, eb] = existingColorRGBA; + const existingMappedColor = Utils.resolveColor( + [er, eg, eb], + state.availableColors, + !state.paintUnavailablePixels + ); + const isAlreadyCorrect = existingMappedColor.id === targetPixelInfo.mappedColorId; + + if (isAlreadyCorrect) { + console.log(`โœ… Pixel at (${x}, ${y}) already has correct color (${existingMappedColor.id}) - marking as painted`); + // Mark it as painted in local map but DO NOT increment progress counter + // Progress should only reflect actual painting sequence position + Utils.markPixelPainted(x, y, regionX + adderX, regionY + adderY); + continue; // Skip painting this pixel + } + } + } catch (e) { + // If we can't check the canvas, proceed with painting (better to attempt than skip) + console.warn(`โš ๏ธ Could not verify canvas state for pixel (${x}, ${y}), proceeding with paint:`, e.message); + } + + const targetMappedColorId = targetPixelInfo.mappedColorId; + + // Set up pixel batch for new region if needed + if ( + !pixelBatch || + pixelBatch.regionX !== regionX + adderX || + pixelBatch.regionY !== regionY + adderY + ) { + if (pixelBatch && pixelBatch.pixels.length > 0) { + console.log(`๐ŸŒ Sending region-change batch with ${pixelBatch.pixels.length} pixels`); + const success = await flushPixelBatch(pixelBatch); + if (!success) { + console.error(`โŒ Batch failed permanently after retries. Stopping painting.`); + state.stopFlag = true; + return 'stopped'; + } + await updateStats(); + } + + pixelBatch = { + regionX: regionX + adderX, + regionY: regionY + adderY, + pixels: [], + }; + } + + // Add pixel to batch (no need to check again - already pre-filtered) + pixelBatch.pixels.push({ + x: pixelX, + y: pixelY, + color: targetMappedColorId, + localX: x, + localY: y, + }); + + // Send batch if it's full + const maxBatchSize = calculateBatchSize(); + if (pixelBatch.pixels.length >= maxBatchSize) { + console.log(`๐Ÿ“ฆ Sending batch with ${pixelBatch.pixels.length} pixels`); + const success = await flushPixelBatch(pixelBatch); + if (!success) { + console.error(`โŒ Batch failed permanently after retries. Stopping painting.`); + state.stopFlag = true; + return 'stopped'; + } + pixelBatch.pixels = []; + await updateStats(); + } + } + + // Send final batch if any pixels remain + if (pixelBatch && pixelBatch.pixels.length > 0 && !state.stopFlag) { + console.log(`๐Ÿ Sending final batch with ${pixelBatch.pixels.length} pixels`); + const success = await flushPixelBatch(pixelBatch); + if (!success) { + console.warn(`โš ๏ธ Final batch failed with ${pixelBatch.pixels.length} pixels`); + } + } + + // If we completed the entire coordinate loop, image is complete + return state.stopFlag ? 'stopped' : 'completed'; + + } finally { + // Log skip statistics for this session + console.log(`๐Ÿ“Š Session Statistics:`); + console.log(` New pixels painted: ${state.paintedPixels - (skippedPixels.alreadyPainted || 0)}`); + console.log(` Already painted detected: ${skippedPixels.alreadyPainted}`); + console.log(` Total progress: ${state.paintedPixels}`); + console.log(` Pre-filtered - Transparent: ${skippedPixels.transparent}`); + console.log(` Pre-filtered - White: ${skippedPixels.white}`); + console.log(` Pre-filtered - Color Unavailable: ${skippedPixels.colorUnavailable}`); + } + } + + // Phase 2: Execute cooldown period - wait for target charges (NO token regeneration) + async function executeCooldownPeriod() { + console.log('โฑ๏ธ Entering cooldown period - waiting for target charges'); + console.log('๐Ÿšซ NO token regeneration during cooldown (even if expired/invalid)'); + + // Check initial charges to calculate wait time + let chargeCheckCount = 0; + // const maxChargeChecks = 10; // REMOVED: No limit on API calls during cooldown + + while (!state.stopFlag) { + chargeCheckCount++; + + const { charges, cooldown } = await WPlaceService.getCharges(); + state.displayCharges = Math.floor(charges); + state.preciseCurrentCharges = charges; + state.cooldown = cooldown; + + if (state.displayCharges >= state.cooldownChargeThreshold) { + console.log(`โœ… Cooldown target reached: ${state.displayCharges}/${state.cooldownChargeThreshold}`); + NotificationManager.maybeNotifyChargesReached(true); + await updateStats(); + return 'target_reached'; + } + + updateUI('noChargesThreshold', 'warning', { + time: Utils.msToTimeText(state.cooldown), + threshold: state.cooldownChargeThreshold, + current: state.displayCharges, + }); + await updateStats(); + + // Smart delay calculation to reduce API calls + const chargesNeeded = state.cooldownChargeThreshold - state.displayCharges; + const estimatedWaitTime = chargesNeeded * state.cooldown; + + // Use longer delays during cooldown to prevent rate limiting + let delayTime; + if (chargeCheckCount < 3) { + // First few checks - shorter delay + delayTime = Math.max(3000, state.cooldown); // 3 seconds minimum + } else if (estimatedWaitTime > 60000) { + // Long wait expected - check every 15 seconds + delayTime = 10000; + } else if (estimatedWaitTime > 30000) { + // Medium wait - check every 15 seconds + delayTime = 15000; + } else { + // Close to target - check every 5 seconds + delayTime = 5000; + } + + console.log(`โฑ๏ธ Cooldown check ${chargeCheckCount}: ${state.displayCharges}/${state.cooldownChargeThreshold} charges, waiting 10s before next check`); + await Utils.sleep(10000); + + // REMOVED: No limit on charge checks - bot will wait infinitely until charges are available + // if (chargeCheckCount >= maxChargeChecks) { + // console.warn('โš ๏ธ Max charge checks reached during cooldown, continuing anyway'); + // break; + // } + } + + return 'stopped'; + } + + // Phase 3: Regenerate token for new painting session + async function regenerateTokenForNewSession() { + console.log('๐Ÿ”‘ Regenerating token for new painting session'); + + try { + // Force regenerate token for new session + await ensureToken(true); // forceRefresh = true + + if (!getTurnstileToken()) { + console.error('โŒ Failed to generate token for new session'); + return false; + } + + console.log('โœ… Token regenerated successfully for new session'); + return true; + } catch (error) { + console.error('โŒ Token regeneration failed:', error); + return false; + } + } + + // Finalize painting process cleanup + async function finalizePaintingProcess() { + console.log('๐Ÿงน Finalizing painting process'); + + if (window._chargesInterval) { + clearInterval(window._chargesInterval); + window._chargesInterval = null; + } + + if (state.stopFlag) { + // Save progress when stopped to preserve painted map + Utils.saveProgress(); + } else { + updateUI('paintingComplete', 'success', { count: state.paintedPixels }); + state.lastPosition = { x: 0, y: 0 }; // Only reset when truly complete + Utils.saveProgress(); // Save final complete state + overlayManager.clear(); + const toggleOverlayBtn = document.getElementById('toggleOverlayBtn'); + if (toggleOverlayBtn) { + toggleOverlayBtn.classList.remove('active'); + toggleOverlayBtn.disabled = true; + } + } + } + + // Helper function to check pixel eligibility (shared by painting functions) + function checkPixelEligibility(x, y) { + const { width, height, pixels } = state.imageData; + const transparencyThreshold = state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD; + + // CRITICAL FIX: Check module availability before processing + if (!Utils || typeof Utils.isWhitePixel !== 'function') { + console.error('โŒ Utils module not available for pixel eligibility check'); + return { + eligible: false, + reason: 'moduleUnavailable', + }; + } + + const idx = (y * width + x) * 4; + const r = pixels[idx], + g = pixels[idx + 1], + b = pixels[idx + 2], + a = pixels[idx + 3]; + + if (!state.paintTransparentPixels && a < transparencyThreshold) + return { + eligible: false, + reason: 'transparent', + }; + if (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b)) + return { + eligible: false, + reason: 'white', + }; + + let targetRgb = Utils.isWhitePixel(r, g, b) + ? [255, 255, 255] + : Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette); + + const mappedTargetColorId = Utils.resolveColor( + targetRgb, + state.availableColors, + !state.paintUnavailablePixels + ); + + if (!state.paintUnavailablePixels && !mappedTargetColorId.id) { + return { + eligible: false, + reason: 'colorUnavailable', + r, + g, + b, + a, + mappedColorId: mappedTargetColorId.id, + }; + } + return { eligible: true, r, g, b, a, mappedColorId: mappedTargetColorId.id }; + } + + // Helper function to skip pixel and log the reason (minimized logging) + function skipPixel(reason, id, rgb, x, y, skippedPixels) { + // Minimize logging to prevent console flooding - only log non-routine skips + if (reason !== 'transparent' && reason !== 'alreadyPainted') { + console.log(`Skipped pixel for ${reason} (id: ${id}, (${rgb.join(', ')})) at (${x}, ${y})`); + } + skippedPixels[reason]++; + } + function calculateBatchSize() { + let targetBatchSize; + + // If speed control is disabled, use all available charges + if (!CONFIG.PAINTING_SPEED_ENABLED) { + targetBatchSize = state.displayCharges; + console.log(`๐Ÿš€ Speed control disabled: using all ${targetBatchSize} available charges`); + return Math.max(1, targetBatchSize); + } + + if (state.batchMode === 'random') { + // Generate random batch size within the specified range + const min = Math.max(1, state.randomBatchMin); + const max = Math.max(min, state.randomBatchMax); + targetBatchSize = Math.floor(Math.random() * (max - min + 1)) + min; + console.log(`๐ŸŽฒ Random batch size generated: ${targetBatchSize} (range: ${min}-${max})`); + } else { + // Normal mode - use the fixed paintingSpeed value + targetBatchSize = state.paintingSpeed; + } + + // Always limit by available charges + const maxAllowed = state.displayCharges; + const finalBatchSize = Math.min(targetBatchSize, maxAllowed); + + return finalBatchSize; + } + + // Helper function to retry batch until success with exponential backoff + async function sendBatchWithRetry(pixels, regionX, regionY, maxRetries = MAX_BATCH_RETRIES) { + let attempt = 0; + while (attempt < maxRetries && !state.stopFlag) { + attempt++; + console.log( + `๐Ÿ”„ Attempting to send batch (attempt ${attempt}/${maxRetries}) for region ${regionX},${regionY} with ${pixels.length} pixels` + ); + + const result = await sendPixelBatch(pixels, regionX, regionY); + + if (result === true) { + console.log(`โœ… Batch succeeded on attempt ${attempt}`); + return true; + } else if (result === 'token_error') { + console.log(`๐Ÿ”‘ Token error on attempt ${attempt} - no token available during processing`); + console.log(`โŒ Stopping batch processing - tokens must be generated at startup/start button only`); + updateUI('captchaFailed', 'error'); + return false; // Stop processing entirely - don't regenerate during processing + } else if (result === 'token_regenerated') { + console.log(`๐Ÿ”„ Token regenerated on attempt ${attempt} after 403 error - retrying batch`); + updateUI('paintingPaused', 'warning', { message: 'Token refreshed, resuming...' }); + // Don't count token regeneration as a failed attempt, retry immediately + attempt--; + await Utils.sleep(500); // Brief pause before retry + continue; + } else if (result === 'token_regeneration_failed') { + console.log(`โŒ Token regeneration failed on attempt ${attempt} after 403 error`); + updateUI('captchaFailed', 'error'); + return false; // Stop processing if we can't get a valid token + } else if (result === 'invalid_token_error') { + console.log(`๐Ÿ”‘ Invalid token detected on attempt ${attempt}, regenerating...`); + updateUI('captchaSolving', 'warning'); + try { + await handleCaptcha(true); // Allow generation for invalid token cases + // Don't count token regeneration as a failed attempt + attempt--; + continue; + } catch (e) { + console.error(`โŒ Token regeneration failed after invalid token on attempt ${attempt}:`, e); + updateUI('captchaFailed', 'error'); + // Wait longer before retrying after token failure + await Utils.sleep(5000); + } + } else { + console.warn(`โš ๏ธ Batch failed on attempt ${attempt}, retrying...`); + // Exponential backoff with jitter + const baseDelay = Math.min(1000 * Math.pow(2, attempt - 1), 30000); // Max 30s + const jitter = Math.random() * 1000; // Add up to 1s random delay + await Utils.sleep(baseDelay + jitter); + } + } + + if (attempt >= maxRetries) { + console.error( + `โŒ Batch failed after ${maxRetries} attempts (MAX_BATCH_RETRIES=${MAX_BATCH_RETRIES}). This will stop painting to prevent infinite loops.` + ); + updateUI('paintingError', 'error'); + return false; + } + + return false; + } + + async function sendPixelBatch(pixelBatch, regionX, regionY) { + let token = getTurnstileToken(); + + // Don't auto-generate tokens during processing - return error if no token available + if (!token) { + console.warn('โš ๏ธ No token available and auto-generation disabled during processing'); + 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: token, fp: fpStr32 }; + var wasmtoken = await createWasmToken(regionX, regionY, payload); + const res = await fetch(`https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`, { + method: 'POST', + headers: { 'Content-Type': 'text/plain;charset=UTF-8', "x-pawtect-token": wasmtoken }, + credentials: 'include', + body: JSON.stringify(payload), + }); + + if (res.status === 403) { + let data = null; + try { + data = await res.json(); + } catch (_) { } + console.error('โŒ 403 Forbidden. Token invalid during painting - regeneration allowed.'); + + // 403 errors during painting allow token regeneration per workflow requirements + console.log('๏ฟฝ Token invalid (403) during painting - regenerating token as allowed by workflow'); + setTurnstileToken(null); + createTokenPromise(); + + // Attempt to regenerate token immediately + const newToken = await ensureToken(true); + if (newToken) { + console.log('โœ… Token regenerated after 403 error, returning regenerate signal'); + return 'token_regenerated'; + } else { + console.error('โŒ Failed to regenerate token after 403 error'); + return 'token_regeneration_failed'; + } + } + + const data = await res.json(); + return data?.painted === pixelBatch.length; + } catch (e) { + console.error('Batch paint request failed:', e); + return false; + } + } + + function saveBotSettings() { + try { + const settings = { + paintingSpeed: state.paintingSpeed, + paintingSpeedEnabled: document.getElementById('enableSpeedToggle')?.checked, + batchMode: state.batchMode, // "normal" or "random" + randomBatchMin: state.randomBatchMin, + randomBatchMax: state.randomBatchMax, + cooldownChargeThreshold: state.cooldownChargeThreshold, + tokenSource: state.tokenSource, // "generator", "hybrid", or "manual" + minimized: state.minimized, + overlayOpacity: state.overlayOpacity, + blueMarbleEnabled: document.getElementById('enableBlueMarbleToggle')?.checked, + ditheringEnabled: state.ditheringEnabled, + colorMatchingAlgorithm: state.colorMatchingAlgorithm, + enableChromaPenalty: state.enableChromaPenalty, + chromaPenaltyWeight: state.chromaPenaltyWeight, + customTransparencyThreshold: state.customTransparencyThreshold, + customWhiteThreshold: state.customWhiteThreshold, + paintWhitePixels: state.paintWhitePixels, + paintTransparentPixels: state.paintTransparentPixels, + resizeSettings: state.resizeSettings, + paintUnavailablePixels: state.paintUnavailablePixels, + coordinateMode: state.coordinateMode, + coordinateDirection: state.coordinateDirection, + coordinateSnake: state.coordinateSnake, + blockWidth: state.blockWidth, + blockHeight: state.blockHeight, // Save ignore mask (as base64) with its dimensions + resizeIgnoreMask: + state.resizeIgnoreMask && + state.resizeSettings && + state.resizeSettings.width * state.resizeSettings.height === state.resizeIgnoreMask.length + ? { + w: state.resizeSettings.width, + h: state.resizeSettings.height, + data: btoa(String.fromCharCode(...state.resizeIgnoreMask)), + } + : null, // Notifications + notificationsEnabled: state.notificationsEnabled, + notifyOnChargesReached: state.notifyOnChargesReached, + notifyOnlyWhenUnfocused: state.notifyOnlyWhenUnfocused, + notificationIntervalMinutes: state.notificationIntervalMinutes, + originalImage: state.originalImage, + }; + CONFIG.PAINTING_SPEED_ENABLED = settings.paintingSpeedEnabled; + // AUTO_CAPTCHA_ENABLED is always true - no need to save/load + + localStorage.setItem('wplace-bot-settings', JSON.stringify(settings)); + } catch (e) { + console.warn('Could not save bot settings:', e); + } + } + + function loadBotSettings() { + try { + const saved = localStorage.getItem('wplace-bot-settings'); + if (!saved) return; + const settings = JSON.parse(saved); + + state.paintingSpeed = settings.paintingSpeed || CONFIG.PAINTING_SPEED.DEFAULT; + state.batchMode = settings.batchMode || CONFIG.BATCH_MODE; // Default to "normal" + state.randomBatchMin = settings.randomBatchMin || CONFIG.RANDOM_BATCH_RANGE.MIN; + state.randomBatchMax = settings.randomBatchMax || CONFIG.RANDOM_BATCH_RANGE.MAX; + state.cooldownChargeThreshold = + settings.cooldownChargeThreshold || CONFIG.COOLDOWN_CHARGE_THRESHOLD; + state.tokenSource = settings.tokenSource || CONFIG.TOKEN_SOURCE; // Default to "generator" + 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.blueMarbleEnabled = settings.blueMarbleEnabled ?? CONFIG.OVERLAY.BLUE_MARBLE_DEFAULT; + state.ditheringEnabled = settings.ditheringEnabled ?? false; + state.colorMatchingAlgorithm = settings.colorMatchingAlgorithm || 'lab'; + state.enableChromaPenalty = settings.enableChromaPenalty ?? true; + state.chromaPenaltyWeight = settings.chromaPenaltyWeight ?? 0.15; + state.customTransparencyThreshold = + settings.customTransparencyThreshold ?? CONFIG.TRANSPARENCY_THRESHOLD; + state.customWhiteThreshold = settings.customWhiteThreshold ?? CONFIG.WHITE_THRESHOLD; + state.paintWhitePixels = settings.paintWhitePixels ?? true; + state.paintTransparentPixels = settings.paintTransparentPixels ?? false; + state.resizeSettings = settings.resizeSettings ?? null; + state.originalImage = settings.originalImage ?? null; + state.paintUnavailablePixels = settings.paintUnavailablePixels ?? CONFIG.PAINT_UNAVAILABLE; + state.coordinateMode = settings.coordinateMode ?? CONFIG.COORDINATE_MODE; + state.coordinateDirection = settings.coordinateDirection ?? CONFIG.COORDINATE_DIRECTION; + state.coordinateSnake = settings.coordinateSnake ?? CONFIG.COORDINATE_SNAKE; + state.blockWidth = settings.blockWidth ?? CONFIG.COORDINATE_BLOCK_WIDTH; + state.blockHeight = settings.blockHeight ?? CONFIG.COORDINATE_BLOCK_HEIGHT; + // Notifications + state.notificationsEnabled = settings.notificationsEnabled ?? CONFIG.NOTIFICATIONS.ENABLED; + state.notifyOnChargesReached = + settings.notifyOnChargesReached ?? CONFIG.NOTIFICATIONS.ON_CHARGES_REACHED; + state.notifyOnlyWhenUnfocused = + settings.notifyOnlyWhenUnfocused ?? CONFIG.NOTIFICATIONS.ONLY_WHEN_UNFOCUSED; + state.notificationIntervalMinutes = + settings.notificationIntervalMinutes ?? CONFIG.NOTIFICATIONS.REPEAT_MINUTES; + // Restore ignore mask if dims match current resizeSettings + if ( + settings.resizeIgnoreMask && + settings.resizeIgnoreMask.data && + state.resizeSettings && + settings.resizeIgnoreMask.w === state.resizeSettings.width && + settings.resizeIgnoreMask.h === state.resizeSettings.height + ) { + try { + const bin = atob(settings.resizeIgnoreMask.data); + const arr = new Uint8Array(bin.length); + for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i); + state.resizeIgnoreMask = arr; + } catch { + state.resizeIgnoreMask = null; + } + } else { + state.resizeIgnoreMask = null; + } + // Initialize coordinate generation UI + const coordinateModeSelect = document.getElementById('coordinateModeSelect'); + if (coordinateModeSelect) coordinateModeSelect.value = state.coordinateMode; + + const coordinateDirectionSelect = document.getElementById('coordinateDirectionSelect'); + if (coordinateDirectionSelect) coordinateDirectionSelect.value = state.coordinateDirection; + + const coordinateSnakeToggle = document.getElementById('coordinateSnakeToggle'); + if (coordinateSnakeToggle) coordinateSnakeToggle.checked = state.coordinateSnake; + + const settingsContainer = document.getElementById('wplace-settings-container'); + const directionControls = settingsContainer.querySelector('#directionControls'); + const snakeControls = settingsContainer.querySelector('#snakeControls'); + const blockControls = settingsContainer.querySelector('#blockControls'); + Utils.updateCoordinateUI({ + mode: state.coordinateMode, + directionControls, + snakeControls, + blockControls, + }); + + const paintUnavailablePixelsToggle = document.getElementById('paintUnavailablePixelsToggle'); + if (paintUnavailablePixelsToggle) { + paintUnavailablePixelsToggle.checked = state.paintUnavailablePixels; + } + + const settingsPaintWhiteToggle = settingsContainer.querySelector('#settingsPaintWhiteToggle'); + if (settingsPaintWhiteToggle) { + settingsPaintWhiteToggle.checked = state.paintWhitePixels; + } + + const settingsPaintTransparentToggle = settingsContainer.querySelector( + '#settingsPaintTransparentToggle' + ); + if (settingsPaintTransparentToggle) { + settingsPaintTransparentToggle.checked = state.paintTransparentPixels; + } + + const speedSlider = document.getElementById('speedSlider'); + const speedInput = document.getElementById('speedInput'); + const speedValue = document.getElementById('speedValue'); + if (speedSlider) speedSlider.value = state.paintingSpeed; + if (speedInput) speedInput.value = state.paintingSpeed; + if (speedValue) speedValue.textContent = `pixels`; + + const enableSpeedToggle = document.getElementById('enableSpeedToggle'); + if (enableSpeedToggle) enableSpeedToggle.checked = CONFIG.PAINTING_SPEED_ENABLED; + + // Batch mode UI initialization + const batchModeSelect = document.getElementById('batchModeSelect'); + if (batchModeSelect) batchModeSelect.value = state.batchMode; + + const normalBatchControls = document.getElementById('normalBatchControls'); + const randomBatchControls = document.getElementById('randomBatchControls'); + + // Show/hide appropriate controls based on batch mode + if (normalBatchControls && randomBatchControls) { + if (state.batchMode === 'random') { + normalBatchControls.style.display = 'none'; + randomBatchControls.style.display = 'block'; + } else { + normalBatchControls.style.display = 'block'; + randomBatchControls.style.display = 'none'; + } + } + + const randomBatchMin = document.getElementById('randomBatchMin'); + if (randomBatchMin) randomBatchMin.value = state.randomBatchMin; + + const randomBatchMax = document.getElementById('randomBatchMax'); + if (randomBatchMax) randomBatchMax.value = state.randomBatchMax; + + // AUTO_CAPTCHA_ENABLED is always true - no toggle to set + + const cooldownSlider = document.getElementById('cooldownSlider'); + const cooldownInput = document.getElementById('cooldownInput'); + const cooldownValue = document.getElementById('cooldownValue'); + if (cooldownSlider) cooldownSlider.value = state.cooldownChargeThreshold; + if (cooldownInput) cooldownInput.value = state.cooldownChargeThreshold; + if (cooldownValue) cooldownValue.textContent = `${Utils.t('charges')}`; + + const overlayOpacitySlider = document.getElementById('overlayOpacitySlider'); + if (overlayOpacitySlider) overlayOpacitySlider.value = state.overlayOpacity; + const overlayOpacityValue = document.getElementById('overlayOpacityValue'); + if (overlayOpacityValue) + overlayOpacityValue.textContent = `${Math.round(state.overlayOpacity * 100)}%`; + const enableBlueMarbleToggle = document.getElementById('enableBlueMarbleToggle'); + if (enableBlueMarbleToggle) enableBlueMarbleToggle.checked = state.blueMarbleEnabled; + + const tokenSourceSelect = document.getElementById('tokenSourceSelect'); + if (tokenSourceSelect) tokenSourceSelect.value = state.tokenSource; + + const colorAlgorithmSelect = document.getElementById('colorAlgorithmSelect'); + if (colorAlgorithmSelect) colorAlgorithmSelect.value = state.colorMatchingAlgorithm; + const enableChromaPenaltyToggle = document.getElementById('enableChromaPenaltyToggle'); + if (enableChromaPenaltyToggle) enableChromaPenaltyToggle.checked = state.enableChromaPenalty; + const chromaPenaltyWeightSlider = document.getElementById('chromaPenaltyWeightSlider'); + if (chromaPenaltyWeightSlider) chromaPenaltyWeightSlider.value = state.chromaPenaltyWeight; + const chromaWeightValue = document.getElementById('chromaWeightValue'); + if (chromaWeightValue) chromaWeightValue.textContent = state.chromaPenaltyWeight; + const transparencyThresholdInput = document.getElementById('transparencyThresholdInput'); + if (transparencyThresholdInput) + transparencyThresholdInput.value = state.customTransparencyThreshold; + const whiteThresholdInput = document.getElementById('whiteThresholdInput'); + if (whiteThresholdInput) whiteThresholdInput.value = state.customWhiteThreshold; + // Notifications UI + const notifEnabledToggle = document.getElementById('notifEnabledToggle'); + if (notifEnabledToggle) notifEnabledToggle.checked = state.notificationsEnabled; + const notifOnChargesToggle = document.getElementById('notifOnChargesToggle'); + if (notifOnChargesToggle) notifOnChargesToggle.checked = state.notifyOnChargesReached; + const notifOnlyUnfocusedToggle = document.getElementById('notifOnlyUnfocusedToggle'); + if (notifOnlyUnfocusedToggle) + notifOnlyUnfocusedToggle.checked = state.notifyOnlyWhenUnfocused; + const notifIntervalInput = document.getElementById('notifIntervalInput'); + if (notifIntervalInput) notifIntervalInput.value = state.notificationIntervalMinutes; + NotificationManager.resetEdgeTracking(); + } catch (e) { + console.warn('Could not load bot settings:', e); + } + } + + // Initialize Turnstile generator integration + console.log('๐Ÿš€ WPlace Auto-Image with Turnstile Token Generator loaded'); + console.log('๐Ÿ”‘ Turnstile token generator: ALWAYS ENABLED (Background mode)'); + console.log('๐ŸŽฏ Manual pixel captcha solving: Available as fallback/alternative'); + console.log('๐Ÿ“ฑ Turnstile widgets: DISABLED - pure background token generation only!'); + + // Generate fingerprint string for requests + if (!window.WPlaceTokenManager) { + console.error('โŒ WPlaceTokenManager not available - dependency loading issue'); + return; + } + const fpStr32 = tokenManager._randStr(32); + console.log('๐Ÿ”‘ Generated fingerprint string for API requests'); + + // Function to enable file operations after initial startup setup is complete + function enableFileOperations() { + state.initialSetupComplete = true; + + const loadBtn = document.querySelector('#loadBtn'); + const loadFromFileBtn = document.querySelector('#loadFromFileBtn'); + const uploadBtn = document.querySelector('#uploadBtn'); + + if (loadBtn) { + loadBtn.disabled = false; + loadBtn.title = ''; + // Add a subtle animation to indicate the button is now available + loadBtn.style.animation = 'pulse 0.6s ease-in-out'; + setTimeout(() => { + if (loadBtn) loadBtn.style.animation = ''; + }, 600); + console.log('โœ… Load Progress button enabled after initial setup'); + } + + if (loadFromFileBtn) { + loadFromFileBtn.disabled = false; + loadFromFileBtn.title = ''; + // Add a subtle animation to indicate the button is now available + loadFromFileBtn.style.animation = 'pulse 0.6s ease-in-out'; + setTimeout(() => { + if (loadFromFileBtn) loadFromFileBtn.style.animation = ''; + }, 600); + console.log('โœ… Load from File button enabled after initial setup'); + } + + if (uploadBtn) { + uploadBtn.disabled = false; + uploadBtn.title = ''; + // Add a subtle animation to indicate the button is now available + uploadBtn.style.animation = 'pulse 0.6s ease-in-out'; + setTimeout(() => { + if (uploadBtn) uploadBtn.style.animation = ''; + }, 600); + console.log('โœ… Upload Image button enabled after initial setup'); + } + + // Enable Load Extracted button at the same time as Upload button + const loadExtractedBtn = document.getElementById('loadExtractedBtn'); + if (loadExtractedBtn) { + loadExtractedBtn.disabled = false; + loadExtractedBtn.title = ''; + console.log('โœ… Load Extracted button enabled after initial setup'); + } + + // Show a notification that file operations are now available + Utils.showAlert(Utils.t('fileOperationsAvailable'), 'success'); + } + + // Optimized token initialization with better timing and error handling + async function initializeTokenGenerator() { + // Skip if already have valid token + if (isTokenValid()) { + console.log('โœ… Valid token already available, skipping initialization'); + updateUI('tokenReady', 'success'); + enableFileOperations(); // Enable file operations since initial setup is complete + return; + } + + try { + console.log('๐Ÿ”ง Initializing Turnstile token generator...'); + updateUI('initializingToken', 'default'); + + console.log('Attempting to load Turnstile script...'); + await Utils.loadTurnstile(); + console.log('Turnstile script loaded. Attempting to generate token...'); + + // Use TokenManager's handleCaptchaWithRetry method instead + const token = await tokenManager.handleCaptchaWithRetry(); + if (token) { + setTurnstileToken(token); + console.log('โœ… Startup token generated successfully'); + updateUI('tokenReady', 'success'); + Utils.showAlert(Utils.t('tokenGeneratorReady'), 'success'); + enableFileOperations(); // Enable file operations since initial setup is complete + } else { + console.warn( + 'โš ๏ธ Startup token generation failed (no token received), will retry when needed' + ); + updateUI('tokenRetryLater', 'warning'); + // Still enable file operations even if initial token generation fails + // Users can load progress and use manual/hybrid modes + enableFileOperations(); + } + } catch (error) { + console.error('โŒ Critical error during Turnstile initialization:', error); // More specific error + updateUI('tokenRetryLater', 'warning'); + // Still enable file operations even if initial setup fails + // Users can load progress and use manual/hybrid modes + enableFileOperations(); + // Don't show error alert for initialization failures, just log them + } + } + + // Load theme preference immediately on startup before creating UI + loadThemePreference(); + applyTheme(); + + var pawtect_chunk = null; + + //find module if pawtect_chunk is null + pawtect_chunk ??= await findTokenModule("pawtect_wasm_bg.wasm"); + + async function createWasmToken(regionX, regionY, payload) { + try { + // Load the Pawtect module and WASM + const mod = await import(new URL('/_app/immutable/chunks/' + pawtect_chunk, location.origin).href); + let wasm; + try { + wasm = await mod._(); + console.log('โœ… WASM initialized successfully'); + } catch (wasmError) { + console.error('โŒ WASM initialization failed:', wasmError); + return null; + } + try { + try { + const me = await fetch(`https://backend.wplace.live/me`, { credentials: 'include' }).then(r => r.ok ? r.json() : null); + if (me?.id) { + mod.i(me.id); + console.log('โœ… user ID set:', me.id); + } + } catch { } + } catch (userIdError) { + console.log('โš ๏ธ Error setting user ID:', userIdError.message); + } + try { + const testUrl = `https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`; + if (mod.r) { + mod.r(testUrl); + console.log('โœ… Request URL set:', testUrl); + } else { + console.log('โš ๏ธ request_url function (mod.r) not available'); + } + } catch (urlError) { + console.log('โš ๏ธ Error setting request URL:', urlError.message); + } + + // Create test payload + + console.log('๐Ÿ“ payload:', payload); + + // Encode payload + const enc = new TextEncoder(); + const dec = new TextDecoder(); + const bodyStr = JSON.stringify(payload); + const bytes = enc.encode(bodyStr); + console.log('๐Ÿ“ Payload size:', bytes.length, 'bytes'); + console.log('๐Ÿ“„ Payload string:', bodyStr); + + // Allocate WASM memory with validation + let inPtr; + try { + if (!wasm.__wbindgen_malloc) { + console.error('โŒ __wbindgen_malloc function not found'); + return null; + } + + inPtr = wasm.__wbindgen_malloc(bytes.length, 1); + console.log('โœ… WASM memory allocated, pointer:', inPtr); + + // Copy data to WASM memory + const wasmBuffer = new Uint8Array(wasm.memory.buffer, inPtr, bytes.length); + wasmBuffer.set(bytes); + console.log('โœ… Data copied to WASM memory'); + } catch (memError) { + console.error('โŒ Memory allocation error:', memError); + return null; + } + + // Call the WASM function + console.log('๐Ÿš€ Calling get_pawtected_endpoint_payload...'); + let outPtr, outLen, token; + try { + const result = wasm.get_pawtected_endpoint_payload(inPtr, bytes.length); + console.log('โœ… Function called, result type:', typeof result, result); + + if (Array.isArray(result) && result.length === 2) { + [outPtr, outLen] = result; + console.log('โœ… Got output pointer:', outPtr, 'length:', outLen); + + // Decode the result + const outputBuffer = new Uint8Array(wasm.memory.buffer, outPtr, outLen); + token = dec.decode(outputBuffer); + console.log('โœ… Token decoded successfully'); + } else { + console.error('โŒ Unexpected function result format:', result); + return null; + } + } catch (funcError) { + console.error('โŒ Function call error:', funcError); + console.error('Stack trace:', funcError.stack); + return null; + } + + // Cleanup memory + try { + if (wasm.__wbindgen_free && outPtr && outLen) { + wasm.__wbindgen_free(outPtr, outLen, 1); + console.log('โœ… Output memory freed'); + } + if (wasm.__wbindgen_free && inPtr) { + wasm.__wbindgen_free(inPtr, bytes.length, 1); + console.log('โœ… Input memory freed'); + } + } catch (cleanupError) { + console.log('โš ๏ธ Cleanup warning:', cleanupError.message); + } + + // Display results + console.log(''); + console.log('๐ŸŽ‰ SUCCESS!'); + console.log('๐Ÿ”‘ Full token:'); + console.log(token); + return token; + } catch (error) { + console.error('โŒ Failed to generate fp parameter:', error); + return null; + } + } + + async function findTokenModule(str) { + console.log('๐Ÿ”Ž Searching for wasm Module...'); + const links = Array.from(document.querySelectorAll('link[rel="modulepreload"][href$=".js"]')); + + for (const link of links) { + try { + const url = new URL(link.getAttribute("href"), location.origin).href; + const code = await fetch(url).then(r => r.text()); + if (code.includes(str)) { + console.log('โœ… Found wasm Module...'); + return url.split('/').pop(); + } + } catch { } + } + console.error(`โŒ Could not find Pawtect chunk: `, error); + } + + async function purchase(type) { + // loadThemePreference() + let id; + let chargeMultiplier; + if (type === "max_charges") { + id = 70; + chargeMultiplier = 5; + } else if (type === "paint_charges") { + id = 80; + chargeMultiplier = 30; + } else { + console.error("Error: Invalid purchase type provided."); + return; + } + const { droplets } = await WPlaceService.getCharges(); + console.log("There are currently : ", droplets, "droplets."); + try { + const amounts = Math.floor(droplets / 500); + if (amounts < 1) { + console.log("Not enough droplets to purchase."); + return; + } + const payload = { + "product": { + "id": id, + "amount": amounts + } + }; + const res = fetch("https://backend.wplace.live/purchase", { + method: "POST", + headers: { + "Content-Type": "text/plain;charset=UTF-8" + }, + body: JSON.stringify(payload), + credentials: "include" + }); + // POST request completed + const { droplets: newDroplets } = await WPlaceService.getCharges(); + if (droplets != newDroplets) { + console.log("Successfully bought", amounts * chargeMultiplier, type.replace('_', ' '), "."); + return 2; + } else { + console.log("Failed to buy charges"); + return 1; + } + } catch (e) { + console.error("An error occurred during the purchase:", e); + return 0; + } + } + async function swapAccountTrigger(token) { + // STRICT GUARD: Only allow account switching during active painting sessions OR controlled refresh + if (!state.running && !state.isFetchingAllAccounts) { + console.warn('๐Ÿ”’ Account switching blocked - only allowed during active painting or controlled refresh'); + console.warn('๐Ÿ”’ Current state.running:', state.running, 'state.isFetchingAllAccounts:', state.isFetchingAllAccounts); + return false; + } + + localStorage.removeItem("lp"); + if (!token) { + console.error('โŒ Cannot swap account: token is null or undefined'); + return false; + } + + console.log(`๐Ÿ”„ Triggering account swap with token: ${token.substring(0, 20)}...`); + console.log('๐Ÿ“ค Sending setCookie message to extension...'); + + try { + window.postMessage({ + source: 'my-userscript', + type: 'setCookie', + value: token + }, '*'); + + console.log('โœ… setCookie message sent successfully'); + return true; + } catch (error) { + console.error('โŒ Failed to send setCookie message:', error); + return false; + } + } + async function getAccounts() { + return new Promise((resolve, reject) => { + console.log("Requesting accounts from extension..."); + + // Set timeout for extension response + const timeout = setTimeout(() => { + window.removeEventListener("message", handler); + reject(new Error("Extension response timeout")); + }, 15000); // 15 second timeout (increased from 5 seconds) + + // Ask extension for accounts + window.postMessage({ + source: "my-userscript", + type: "getAccounts" + }, "*"); + + function handler(event) { + if (event.source !== window) return; + if (event.data.source !== "extension") return; + if (event.data.type === "accountsData") { + // Clear timeout and remove listener when we get the response + clearTimeout(timeout); + window.removeEventListener("message", handler); + + try { + localStorage.setItem("accounts", JSON.stringify(event.data.accounts)); + console.log("โœ… Accounts saved to localStorage:", event.data.accounts); + } catch (e) { + console.error("โŒ Failed to save accounts:", e); + } + resolve(event.data.accounts); + } + } + window.addEventListener("message", handler); + }); + } + + async function fetchAccount() { + const { ID, Charges, Max, Droplets } = await WPlaceService.fetchCheck(); + console.log("User's ID :", ID); + console.log("User's Charges :", Charges, "/", Max); + console.log("User's Droplets :", Droplets); + } + + async function fetchAllAccountDetails() { + if (state.isFetchingAllAccounts) { + Utils.showAlert("Already fetching account details.", "warning"); + return; + } + + state.isFetchingAllAccounts = true; + + const refreshBtn = document.getElementById('refreshAllAccountsBtn'); + if (refreshBtn) { + refreshBtn.innerHTML = ''; + refreshBtn.disabled = true; + } + + const accountsListArea = document.getElementById('accountsListArea'); + if (accountsListArea) { + accountsListArea.innerHTML = `
Loading accounts...
`; + } + + try { + // First, get accounts from the extension + console.log(`๐Ÿ”„ [FETCH] Requesting accounts from extension...`); + try { + await getAccounts(); + console.log(`โœ… [FETCH] Successfully retrieved accounts from extension`); + } catch (error) { + console.warn(`โš ๏ธ [FETCH] Failed to get accounts from extension:`, error); + // Continue anyway in case we have cached accounts + } + + // Load accounts using the new AccountManager + await accountManager.loadAccounts(); + + console.log(`โœ… [FETCH] Loaded ${accountManager.getAccountCount()} accounts from storage`); + + // Debug: Check if we actually have accounts + if (accountManager.getAccountCount() === 0) { + console.warn(`โš ๏ธ [FETCH] No accounts found in storage. Check localStorage 'accounts' and chrome.storage 'infoAccounts'`); + + // Check localStorage for accounts + const localStorageAccounts = JSON.parse(localStorage.getItem("accounts")) || []; + console.log(`๐Ÿ“‹ [DEBUG] localStorage accounts:`, localStorageAccounts); + + // Render empty state and return early + renderAccountsList(); + return; + } + + // Now fetch fresh data for each account + const accounts = accountManager.getAllAccounts(); + if (accounts.length > 0) { + console.log(`๐Ÿ”„ [FETCH] Fetching fresh data for ${accounts.length} accounts...`); + + // Remember the current account so we can switch back + const originalCurrentAccount = accounts.find(acc => acc.isCurrent); + + for (let i = 0; i < accounts.length; i++) { + const account = accounts[i]; + console.log(`๐Ÿ“Š [FETCH] Fetching data for account ${i + 1}: ${account.displayName}`); + + try { + // Switch to this account temporarily to fetch its data + console.log(`๐Ÿ”„ [FETCH] Switching to ${account.displayName} to fetch fresh data...`); + await switchToSpecificAccount(account.token, account.displayName); + await Utils.sleep(500); // Small delay to ensure switch takes effect + + // Fetch fresh account details + const accountData = await WPlaceService.getCharges(); + const accountInfo = await WPlaceService.fetchCheck(); + + // Update account with fresh data + accountManager.updateAccountData(account.token, { + ID: accountData.id || accountInfo.ID, + Charges: Math.floor(accountData.charges || 0), + Max: Math.floor(accountData.max || 0), + Droplets: Math.floor(accountData.droplets || 0), + displayName: accountInfo.Username || accountInfo.name || account.displayName + }); + + console.log(`โœ… [FETCH] Updated ${account.displayName}: โšก${Math.floor(accountData.charges)}/${Math.floor(accountData.max)} ๐Ÿ’ง${Math.floor(accountData.droplets)}`); + + } catch (error) { + console.warn(`โš ๏ธ [FETCH] Failed to fetch data for ${account.displayName}:`, error); + } + } + + // Switch back to the original current account if there was one + if (originalCurrentAccount) { + console.log(`๐Ÿ”™ [FETCH] Switching back to original current account: ${originalCurrentAccount.displayName}`); + try { + await switchToSpecificAccount(originalCurrentAccount.token, originalCurrentAccount.displayName); + await Utils.sleep(300); + + // Mark it as current again + accountManager.updateAccountData(originalCurrentAccount.token, { + isCurrent: true + }); + } catch (error) { + console.warn(`โš ๏ธ [FETCH] Failed to switch back to original account:`, error); + } + } + + console.log(`๐ŸŽฏ [FETCH] Completed fetching fresh data for all accounts`); + } + + // Render the accounts list with fresh data + renderAccountsList(); + + } catch (error) { + console.error('โŒ [FETCH] Error fetching account details:', error); + if (accountsListArea) { + accountsListArea.innerHTML = `
Error loading accounts.
`; + } + } finally { + state.isFetchingAllAccounts = false; + if (refreshBtn) { + refreshBtn.innerHTML = ''; + refreshBtn.disabled = false; + } + } + } + + // Function to update current account charges in the account list + async function updateCurrentAccountInList() { + if (accountManager.getAccountCount() === 0) return; + + // Find current account in the list and update its charges + const currentAccount = accountManager.getCurrentAccount(); + if (currentAccount) { + const { charges, cooldown, droplets } = await WPlaceService.getCharges(); + state.displayCharges = Math.floor(charges); + state.preciseCurrentCharges = charges; + await updateStats(); + + // Update the current account data in AccountManager + accountManager.updateAccountData(currentAccount.token, { + Charges: Math.floor(state.displayCharges || state.preciseCurrentCharges || 0), + Max: state.maxCharges, + Droplets: Math.floor(droplets) + }); + + // Re-render the account list to show updated charges + renderAccountsList(); + } + } + + // Function to update current account spotlight when switching during painting + async function updateCurrentAccountSpotlight() { + if (accountManager.getAccountCount() === 0) return; + await Utils.sleep(500); // Wait a bit for the switch to take effect + try { + const currentAccountData = await WPlaceService.getCharges(); + console.log("Current account after switch:", currentAccountData); + console.log(`๐Ÿ” Switched to account with ID: ${currentAccountData.id}`); + + // Find the current account in AccountManager and update it + const accounts = accountManager.getAllAccounts(); + const currentAccount = accounts.find(acc => acc.ID === currentAccountData.id); + + if (currentAccount) { + const currentAccountInfo = await WPlaceService.fetchCheck(); + + // Update account data in AccountManager + accountManager.updateAccountData(currentAccount.token, { + isCurrent: true, + Charges: Math.floor(currentAccountData.charges), + Max: Math.floor(currentAccountData.max), + Droplets: Math.floor(currentAccountData.droplets), + displayName: currentAccountInfo.Username || currentAccountInfo.name || currentAccount.displayName + }); + + console.log(`๐ŸŽฏ Updated current account spotlight: ${currentAccount.displayName}`); + + // Check for autobuy after account is loaded + if (CONFIG.autoBuyToggle && Math.floor(currentAccountData.droplets) > 500) { + console.log(`๐Ÿ’ฐ Account has ${Math.floor(currentAccountData.droplets)} droplets (>500), triggering autobuy...`); + try { + const purchaseResult = await purchase(CONFIG.autoBuy); + if (purchaseResult == 2) { + console.log('โœ… Autobuy successful after account switch'); + // Update charges after purchase + const updatedCharges = await WPlaceService.getCharges(); + accountManager.updateAccountData(currentAccount.token, { + Charges: Math.floor(updatedCharges.charges), + Droplets: Math.floor(updatedCharges.droplets) + }); + // Re-render account list to show updated status after purchase + renderAccountsList(); + } else { + console.log('โŒ Autobuy failed after account switch'); + } + } catch (error) { + console.error('โŒ Error during autobuy after account switch:', error); + } + } else if (CONFIG.autoBuyToggle) { + console.log(`๐Ÿ’ฐ Account has ${Math.floor(currentAccountData.droplets)} droplets (โ‰ค500), skipping autobuy`); + } + + // Re-render the account list to show new current account + renderAccountsList(); + + console.log(`๐Ÿ”’ PRESERVING currentActiveIndex: ${state.currentActiveIndex} (do not recalculate from isCurrent flag)`); + console.log(`๏ฟฝ Account at currentActiveIndex ${state.currentActiveIndex}: ${state.originalAccountOrder[state.currentActiveIndex]?.displayName} (ID ${state.originalAccountOrder[state.currentActiveIndex]?.orderId})`); + + // Update accountIndex to match original array position + const originalArrayIndex = state.allAccountsInfo.findIndex(acc => acc.isCurrent); + if (originalArrayIndex !== -1) { + state.accountIndex = originalArrayIndex; + } + + console.log(`๐Ÿ“Š Final state: activeIndex=${state.currentActiveIndex}, accountIndex=${state.accountIndex}, orderId=${newCurrentAccount.orderId}`); + + console.warn(`โš ๏ธ Could not find account ID ${newCurrentAccount.orderId} in switching order`); + + console.warn(`โš ๏ธ Could not find switched account with ID ${currentAccountData.id} in account list`); + } + + // Re-render the account list to show new current account + renderAccountsList(); + + } catch (error) { + console.warn('โš ๏ธ Failed to update account spotlight:', error); + } + } + + function renderAccountsList() { + const accountsListArea = document.getElementById('accountsListArea'); + if (!accountsListArea) return; + + accountsListArea.innerHTML = ''; + + const accounts = accountManager.getAllAccounts(); + console.log(`๐Ÿ” [RENDER] Rendering ${accounts.length} accounts`); + + // Debug: Log account data to see what we're working with + accounts.forEach((account, index) => { + console.log(`๐Ÿ“Š [RENDER] Account ${index + 1}: ${account.displayName} - โšก${account.Charges}/${account.Max} ๐Ÿ’ง${account.Droplets} ${account.isCurrent ? '(CURRENT)' : ''}`); + }); + + if (accounts.length === 0) { + // Don't show any placeholder - just leave empty + console.log(`๐Ÿ“ [RENDER] No accounts to display`); + return; + } + + accounts.forEach((account, index) => { + const item = createAccountItem(account, index); + accountsListArea.appendChild(item); + }); + + console.log(`โœ… [RENDER] Successfully rendered ${accounts.length} accounts`); + } + + function createAccountItem(account, index) { + const item = document.createElement('div'); + + // Determine if this is the current account + const isCurrentAccount = account.isCurrent; + const isNextInSequence = accountManager.currentIndex !== -1 && + ((accountManager.currentIndex + 1) % accountManager.getAccountCount()) === index; + + let itemClasses = 'wplace-account-item'; + if (isCurrentAccount) { + itemClasses += ' current'; + } else if (isNextInSequence) { + itemClasses += ' next-in-sequence'; + } + + item.className = itemClasses; + + // Create ordering number element with 1-based index for user display + const orderNumber = document.createElement('div'); + orderNumber.className = 'wplace-account-number'; + orderNumber.textContent = index + 1; // Show 1-based index for user-friendly display + + // Add visual indicator for current position in sequence + if (isCurrentAccount) { + orderNumber.style.background = '#2ecc71'; // Green color + orderNumber.style.color = 'white'; + orderNumber.style.boxShadow = '0 0 10px rgba(46, 204, 113, 0.8)'; + } else if (isNextInSequence) { + orderNumber.style.background = '#f39c12'; // Orange color for next + orderNumber.style.color = 'white'; + orderNumber.style.boxShadow = '0 0 8px rgba(243, 156, 18, 0.6)'; + } + + // Create account details + const details = document.createElement('div'); + details.className = 'wplace-account-details'; + + const accountName = document.createElement('div'); + accountName.className = 'wplace-account-name'; + const displayName = account.displayName || account.name || `Account ${index + 1}`; + accountName.textContent = displayName; + accountName.title = displayName; + + const accountStats = document.createElement('div'); + accountStats.className = 'wplace-account-stats'; + + // Safely handle undefined values + const charges = account.Charges !== undefined ? Math.floor(account.Charges) : 0; + const max = account.Max !== undefined ? Math.floor(account.Max) : 0; + const droplets = account.Droplets !== undefined ? Math.floor(account.Droplets) : 0; + + accountStats.innerHTML = ` + ${charges}/${max} + ${droplets} + `; + + details.appendChild(accountName); + details.appendChild(accountStats); + + // Add status indicators + const status = document.createElement('div'); + status.className = 'wplace-account-status'; + if (isCurrentAccount) { + status.innerHTML = ''; + } else if (isNextInSequence) { + status.innerHTML = ''; + } + + item.appendChild(orderNumber); + item.appendChild(details); + item.appendChild(status); + + return item; + } + + // SIMPLIFIED ACCOUNT SWITCHING + async function switchToNextAccount(accounts) { + console.log(`๐Ÿ”„ [SWITCH] Starting account switch`); + + // Validate we have accounts + if (accountManager.getAccountCount() === 0) { + console.error('โŒ No accounts available for switching'); + return false; + } + + // Get next account using simplified manager + const nextAccount = accountManager.switchToNext(); + if (!nextAccount) { + console.error('โŒ Failed to get next account'); + return false; + } + + console.log(`๐ŸŽฏ [SWITCH] Switching to: ${nextAccount.displayName} (index ${accountManager.currentIndex})`); + + // Ensure token exists + if (!nextAccount.token) { + console.error(`โŒ Missing token for account: ${nextAccount.displayName}`); + return false; + } + + console.log(`๏ฟฝ [SWITCH] Using token: ${nextAccount.token.substring(0, 20)}...`); + + // Perform the account switch + try { + await swapAccountTrigger(nextAccount.token); + + // Update account index for backward compatibility + state.accountIndex = accountManager.currentIndex; + + console.log(`โœ… [SWITCH] Successfully switched to ${nextAccount.displayName}`); + + // Wait a moment for the switch to fully complete + await new Promise(resolve => setTimeout(resolve, 1000)); + + // Update the account status and UI after successful switch + await updateCurrentAccountSpotlight(); + + return true; + } catch (error) { + console.error('โŒ [SWITCH] Account switch failed:', error); + return false; + } + } + + // SIMPLIFIED helper function for specific account switching + async function switchToSpecificAccount(token, accountName) { + console.log(`๐Ÿ”„ [SPECIFIC SWITCH] Attempting to switch to account: ${accountName}`); + console.log(`๐Ÿ”‘ [SPECIFIC SWITCH] Using token: ${token.substring(0, 20)}...`); + + await swapAccountTrigger(token); + + let maxRetries = 20; + let retryCount = 0; + let swapSuccess = false; + + while (!swapSuccess && retryCount < maxRetries) { + console.log(`โณ [SPECIFIC SWITCH] Waiting for account swap... (Attempt ${retryCount + 1}/${maxRetries})`); + //await new Promise(resolve => setTimeout(resolve, 1000)); + + try { + await fetchAccount(); + console.log('โœ… [SPECIFIC SWITCH] Account swap confirmed.'); + swapSuccess = true; + } catch (error) { + console.warn('โŒ [SPECIFIC SWITCH] Account swap not yet successful. Retrying...', error); + retryCount++; + + if (retryCount % 5 === 0) { + console.log('๐Ÿ”„ [SPECIFIC SWITCH] Re-triggering account swap...'); + await swapAccountTrigger(token); + await new Promise(resolve => setTimeout(resolve, 2000)); + } + } + } + + if (swapSuccess) { + const { charges, cooldown } = await WPlaceService.getCharges(); + state.displayCharges = Math.floor(charges); + state.preciseCurrentCharges = charges; + state.cooldown = cooldown; + Utils.performSmartSave(); + await updateStats(); + + // Update account data in manager + accountManager.updateAccountData({ charges, cooldown }); + + // Update the account status and UI after successful switch + await updateCurrentAccountSpotlight(); + + console.log(`โœ… [SPECIFIC SWITCH] Successfully switched to ${accountName} with ${Math.floor(charges)} charges`); + return true; + } else { + console.error(`โŒ [SPECIFIC SWITCH] Failed to swap to ${accountName} after multiple retries.`); + return false; + } + } + + // Wait for dependencies before initializing UI + async function waitForDependenciesAndInitialize() { + // Wait for all global managers to be available + let attempts = 0; + const maxAttempts = 50; // 5 seconds max wait + + while (attempts < maxAttempts) { + const managers = { + utilsManager: window.globalUtilsManager, + imageProcessor: window.globalImageProcessor, + overlayManager: window.globalOverlayManager, + tokenManager: window.globalTokenManager + }; + + const missingManagers = Object.entries(managers) + .filter(([name, manager]) => !manager) + .map(([name]) => name); + + if (missingManagers.length === 0) { + console.log('โœ… All global managers are available, initializing UI...'); + break; + } + + console.log(`โณ Waiting for managers: ${missingManagers.join(', ')} (attempt ${attempts + 1}/${maxAttempts})`); + await new Promise(resolve => setTimeout(resolve, 100)); + attempts++; + } + + if (attempts >= maxAttempts) { + console.warn('โš ๏ธ Some global managers not available after waiting, proceeding anyway...'); + console.log('Available managers:', { + utilsManager: !!window.globalUtilsManager, + imageProcessor: !!window.globalImageProcessor, + overlayManager: !!window.globalOverlayManager, + tokenManager: !!window.globalTokenManager + }); + } + + return createUI(); + } + + waitForDependenciesAndInitialize().then(() => { + // Generate token automatically after UI is ready + setTimeout(initializeTokenGenerator, 1000); + + // Quick initial account load from cache + setTimeout(async () => { + console.log('๐Ÿ”„ Initial account load from cache...'); + try { + await accountManager.loadAccounts(); + if (accountManager.getAccountCount() > 0) { + console.log(`โœ… Loaded ${accountManager.getAccountCount()} cached accounts`); + renderAccountsList(); + } else { + console.log('๐Ÿ“ญ No cached accounts found'); + } + } catch (error) { + console.warn('โš ๏ธ Initial account load failed:', error); + } + }, 500); + + // Auto-refresh account list on startup (with extension communication) + setTimeout(() => { + console.log('๐Ÿ”„ Auto-refreshing account list on startup...'); + fetchAllAccountDetails(); + }, 2000); + + // Attach advanced color matching listeners (resize dialog) + const advancedInit = () => { + const chromaSlider = document.getElementById('chromaPenaltyWeightSlider'); + const chromaValue = document.getElementById('chromaWeightValue'); + const resetBtn = document.getElementById('resetAdvancedColorBtn'); + const algoSelect = document.getElementById('colorAlgorithmSelect'); + const chromaToggle = document.getElementById('enableChromaPenaltyToggle'); + const transInput = document.getElementById('transparencyThresholdInput'); + const whiteInput = document.getElementById('whiteThresholdInput'); + const ditherToggle = document.getElementById('enableDitheringToggle'); + if (algoSelect) + algoSelect.addEventListener('change', (e) => { + state.colorMatchingAlgorithm = e.target.value; + saveBotSettings(); + _updateResizePreview(); + }); + if (chromaToggle) + chromaToggle.addEventListener('change', (e) => { + state.enableChromaPenalty = e.target.checked; + saveBotSettings(); + _updateResizePreview(); + }); + if (chromaSlider && chromaValue) + chromaSlider.addEventListener('input', (e) => { + state.chromaPenaltyWeight = parseFloat(e.target.value) || 0.15; + chromaValue.textContent = state.chromaPenaltyWeight.toFixed(2); + saveBotSettings(); + _updateResizePreview(); + }); + if (transInput) + transInput.addEventListener('change', (e) => { + const v = parseInt(e.target.value, 10); + if (!isNaN(v) && v >= 0 && v <= 255) { + state.customTransparencyThreshold = v; + CONFIG.TRANSPARENCY_THRESHOLD = v; + saveBotSettings(); + _updateResizePreview(); + } + }); + if (whiteInput) + whiteInput.addEventListener('change', (e) => { + const v = parseInt(e.target.value, 10); + if (!isNaN(v) && v >= 200 && v <= 255) { + state.customWhiteThreshold = v; + CONFIG.WHITE_THRESHOLD = v; + saveBotSettings(); + _updateResizePreview(); + } + }); + if (ditherToggle) + ditherToggle.addEventListener('change', (e) => { + state.ditheringEnabled = e.target.checked; + saveBotSettings(); + _updateResizePreview(); + }); + if (resetBtn) + resetBtn.addEventListener('click', () => { + state.colorMatchingAlgorithm = 'lab'; + state.enableChromaPenalty = true; + state.chromaPenaltyWeight = 0.15; + state.customTransparencyThreshold = CONFIG.TRANSPARENCY_THRESHOLD = 100; + state.customWhiteThreshold = CONFIG.WHITE_THRESHOLD = 250; + saveBotSettings(); + const a = document.getElementById('colorAlgorithmSelect'); + if (a) a.value = 'lab'; + const ct = document.getElementById('enableChromaPenaltyToggle'); + if (ct) ct.checked = true; + if (chromaSlider) chromaSlider.value = 0.15; + if (chromaValue) chromaValue.textContent = '0.15'; + if (transInput) transInput.value = 100; + if (whiteInput) whiteInput.value = 250; + _updateResizePreview(); + Utils.showAlert(Utils.t('advancedColorSettingsReset'), 'success'); + }); + }; + // Delay to ensure resize UI built + setTimeout(advancedInit, 500); + + // Add cleanup on page unload + window.addEventListener('beforeunload', () => { + Utils.cleanupTurnstile(); + }); + }); +})(); \ No newline at end of file