-
-
-
- ${Utils.t('initMessage')}
-
-
-
-
-
-
-
🖼️ Image Management
-
-
-
- ${Utils.t('uploadImage')}
-
-
- ${Utils.t('resizeImage')}
-
-
-
-
- ${Utils.t('selectPosition')}
-
-
-
-
-
-
-
-
🎮 Painting Control
-
-
-
- ${Utils.t('startPainting')}
-
-
- ${Utils.t('stopPainting')}
-
-
-
-
- ${Utils.t('toggleOverlay')}
-
-
-
-
-
-
-
-
⏱️ ${Utils.t('cooldownSettings')}
-
-
${Utils.t('waitCharges')}:
-
-
-
-
-
-
-
💾 Data Management
-
-
-
- ${Utils.t('saveData')}
-
-
- ${Utils.t('loadData')}
-
-
-
-
- ${Utils.t('saveToFile')}
-
-
- ${Utils.t('loadFromFile')}
-
-
-
-
-
-
-
-
-
-
-
-
- 🤖 Automatic Token Generator (Recommended)
- 🔄 Generator + Auto Fallback
- 🎯 Manual Pixel Placement
-
-
- Generator mode creates tokens automatically. Hybrid mode falls back to manual when generator fails. Manual mode only uses pixel placement.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Blue Marble Effect
-
Renders a dithered "shredded" overlay.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${Utils.t('paintWhitePixels')}
-
-
- ${Utils.t('paintWhitePixelsDescription')}
-
-
-
-
-
-
-
- ${Utils.t('paintTransparentPixels')}
-
-
- ${Utils.t('paintTransparentPixelsDescription')}
-
-
-
-
-
${Utils.t('paintUnavailablePixels')}
-
${Utils.t('paintUnavailablePixelsDescription')}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 📦 Normal (Fixed Size)
- 🎲 Random (Range)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 🎲 Random batch size between min and max values
-
-
-
-
-
- ${Utils.t('enablePaintingSpeedLimit')}
-
-
-
-
-
-
-
-
-
-
-
-
-
- 📏 Rows (Horizontal Lines)
- 📐 Columns (Vertical Lines)
- ⭕ Circle Out (Center → Edges)
- ⭕ Circle In (Edges → Center)
- 🟫 Blocks (Ordered)
- 🎲 Shuffle Blocks (Random)
-
-
-
-
-
-
-
-
- ↖️ Top-Left
- ↗️ Top-Right
- ↙️ Bottom-Left
- ↘️ Bottom-Right
-
-
-
-
-
-
-
-
Snake Pattern
-
Alternate direction for each row/column (zigzag pattern)
-
-
-
-
-
-
-
- 🧱 Block dimensions for block-based generation modes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${Object.keys(CONFIG.THEMES)
- .map(
- (themeName) =>
- `${themeName} `
- )
- .join('')}
-
-
-
-
-
-
-
-
-
-
- 🇻🇳 Tiếng Việt
- 🇮🇩 Bahasa Indonesia
- 🇷🇺 Русский
- 🇺🇦 Українська
- 🇺🇸 English
- 🇧🇷 Português
- 🇫🇷 Français
- 🇹🇷 Türkçe
- 🇨🇳 简体中文
- 🇹🇼 繁體中文
- 🇯🇵 日本語
- 🇰🇷 한국어
-
-
-
-
} true if tiles are ready
+ */
+ async waitForTiles(
+ startRegionX,
+ startRegionY,
+ pixelWidth,
+ pixelHeight,
+ startPixelX = 0,
+ startPixelY = 0,
+ timeoutMs = 10000
+ ) {
+ const { startTileX, startTileY, endTileX, endTileY } = Utils.calculateTileRange(
+ startRegionX,
+ startRegionY,
+ startPixelX,
+ startPixelY,
+ pixelWidth,
+ pixelHeight,
+ this.tileSize
+ );
+
+ const requiredTiles = [];
+ for (let ty = startTileY; ty <= endTileY; ty++) {
+ for (let tx = startTileX; tx <= endTileX; tx++) {
+ requiredTiles.push(`${tx},${ty}`);
+ }
+ }
+
+ if (requiredTiles.length === 0) return true;
+
+ const startTime = Date.now();
+
+ while (Date.now() - startTime < timeoutMs) {
+ if (state.stopFlag) {
+ console.log('waitForTiles: stopped by user');
+ return false;
+ }
+
+ const missing = requiredTiles.filter((key) => !this.originalTiles.has(key));
+ if (missing.length === 0) {
+ console.log(`✅ All ${requiredTiles.length} required tiles are loaded`);
+ return true;
+ }
+
+ await Utils.sleep(100);
+ }
+
+ console.warn(`❌ Timeout waiting for tiles: ${requiredTiles.length} required,
+ ${requiredTiles.filter((k) => this.originalTiles.has(k)).length} loaded`);
+ return false;
+ }
+ }
+
+ const overlayManager = new OverlayManager();
+
+ // Optimized Turnstile token handling with improved caching and retry logic
+ let turnstileToken = null;
+ let tokenExpiryTime = 0;
+ let tokenGenerationInProgress = false;
+ let _resolveToken = null;
+ let tokenPromise = new Promise((resolve) => {
+ _resolveToken = resolve;
+ });
+ let retryCount = 0;
+ const MAX_RETRIES = 10;
+ const MAX_BATCH_RETRIES = 10; // Maximum attempts for batch sending
+ const TOKEN_LIFETIME = 240000; // 4 minutes (tokens typically last 5 min, use 4 for safety)
+
+ function setTurnstileToken(token) {
+ if (_resolveToken) {
+ _resolveToken(token);
+ _resolveToken = null;
+ }
+ turnstileToken = token;
+ tokenExpiryTime = Date.now() + TOKEN_LIFETIME;
+ console.log('✅ Turnstile token set successfully');
+ }
+
+ function isTokenValid() {
+ return turnstileToken && Date.now() < tokenExpiryTime;
+ }
+
+ function invalidateToken() {
+ turnstileToken = null;
+ tokenExpiryTime = 0;
+ console.log('🗑️ Token invalidated, will force fresh generation');
+ }
+
+ async function ensureToken(forceRefresh = false) {
+ // Return cached token if still valid and not forcing refresh
+ if (isTokenValid() && !forceRefresh) {
+ return turnstileToken;
+ }
+
+ // Invalidate token if forcing refresh
+ if (forceRefresh) invalidateToken();
+
+ // Avoid multiple simultaneous token generations
+ if (tokenGenerationInProgress) {
+ console.log('🔄 Token generation already in progress, waiting...');
+ await Utils.sleep(2000);
+ return isTokenValid() ? turnstileToken : null;
+ }
+
+ tokenGenerationInProgress = true;
+
+ try {
+ console.log('🔄 Token expired or missing, generating new one...');
+ const token = await handleCaptchaWithRetry();
+ if (token && token.length > 20) {
+ setTurnstileToken(token);
+ console.log('✅ Token captured and cached successfully');
+ return token;
+ }
+
+ console.log('⚠️ Invisible Turnstile failed, forcing browser automation...');
+ const fallbackToken = await handleCaptchaFallback();
+ if (fallbackToken && fallbackToken.length > 20) {
+ setTurnstileToken(fallbackToken);
+ console.log('✅ Fallback token captured successfully');
+ return fallbackToken;
+ }
+
+ console.log('❌ All token generation methods failed');
+ return null;
+ } finally {
+ tokenGenerationInProgress = false;
+ }
+ }
+
+ async function handleCaptchaWithRetry() {
+ const startTime = performance.now();
+
+ try {
+ const { sitekey, token: preGeneratedToken } = await Utils.obtainSitekeyAndToken();
+
+ if (!sitekey) {
+ throw new Error('No valid sitekey found');
+ }
+
+ console.log('🔑 Using sitekey:', sitekey);
+
+ if (typeof window !== 'undefined' && window.navigator) {
+ console.log(
+ '🧭 UA:',
+ window.navigator.userAgent.substring(0, 50) + '...',
+ 'Platform:',
+ window.navigator.platform
+ );
+ }
+
+ let token = null;
+
+ if (
+ preGeneratedToken &&
+ typeof preGeneratedToken === 'string' &&
+ preGeneratedToken.length > 20
+ ) {
+ console.log('♻️ Reusing pre-generated Turnstile token');
+ token = preGeneratedToken;
+ } else {
+ if (isTokenValid()) {
+ console.log('♻️ Using existing cached token (from previous session)');
+ token = turnstileToken;
+ } else {
+ console.log('🔐 Generating new token with executeTurnstile...');
+ token = await Utils.executeTurnstile(sitekey, 'paint');
+ if (token) setTurnstileToken(token);
+ }
+ }
+
+ if (token && typeof token === 'string' && token.length > 20) {
+ const elapsed = Math.round(performance.now() - startTime);
+ console.log(`✅ Turnstile token generated successfully in ${elapsed}ms`);
+ return token;
+ } else {
+ throw new Error(`Invalid or empty token received - Length: ${token?.length || 0}`);
+ }
+ } catch (error) {
+ const elapsed = Math.round(performance.now() - startTime);
+ console.error(`❌ Turnstile token generation failed after ${elapsed}ms:`, error);
+ throw error;
+ }
+ }
+ const randStr = (len, chars = 'abcdefghijklmnopqrstuvwxyz0123456789') =>
+ [...Array(len)].map(() => chars[(crypto?.getRandomValues?.(new Uint32Array(1))[0] % chars.length) || Math.floor(Math.random() * chars.length)]).join('')
+ const fpStr32 = randStr(32);
+ async function handleCaptchaFallback() {
+ // Implementation for fallback token generation would go here
+ // This is a placeholder for browser automation fallback
+ console.log('🔄 Attempting fallback token generation...');
+ return null;
+ }
+
+ 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;
+ window.fetch = async function (...args) {
+ const response = await originalFetch.apply(this, args);
+ const url = args[0] instanceof Request ? args[0].url : args[0];
+
+ if (typeof url === 'string') {
+ if (url.includes('https://backend.wplace.live/s0/pixel/')) {
+ try {
+ const payload = JSON.parse(args[1].body);
+ if (payload.t) {
+ // 📊 Debug log
+ 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, token } = event.data;
+
+ if (source === 'auto-image-tile' && endpoint && blobID && blobData) {
+ overlayManager.processAndRespondToTileRequest(event.data);
+ }
+
+ if (source === 'turnstile-capture' && token) {
+ setTurnstileToken(token);
+ if (document.querySelector('#statusText')?.textContent.includes('CAPTCHA')) {
+ Utils.showAlert(Utils.t('tokenCapturedSuccess'), 'success');
+ updateUI('colorsFound', 'success', { count: state.availableColors.length });
+ }
+ }
+ });
+
+ 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
+ const Utils = {
+ sleep: (ms) => new Promise((r) => setTimeout(r, ms)),
+
+ dynamicSleep: async function (tickAndGetRemainingMs) {
+ let remaining = Math.max(0, await tickAndGetRemainingMs());
+ while (remaining > 0) {
+ const interval = remaining > 5000 ? 2000 : remaining > 1000 ? 500 : 100;
+ await this.sleep(Math.min(interval, remaining));
+ remaining = Math.max(0, await tickAndGetRemainingMs());
+ }
+ },
+
+ waitForSelector: async (selector, interval = 200, timeout = 5000) => {
+ const start = Date.now();
+ while (Date.now() - start < timeout) {
+ const el = document.querySelector(selector);
+ if (el) return el;
+ await Utils.sleep(interval);
+ }
+ return null;
+ },
+
+ msToTimeText(ms) {
+ const totalSeconds = Math.ceil(ms / 1000);
+ const hours = Math.floor(totalSeconds / 3600);
+ const minutes = Math.floor((totalSeconds % 3600) / 60);
+ const seconds = totalSeconds % 60;
+
+ if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
+ if (minutes > 0) return `${minutes}m ${seconds}s`;
+ return `${seconds}s`;
+ },
+
+ // Debounced scroll-to-adjust handler for sliders
+ createScrollToAdjust: (element, updateCallback, min, max, step = 1) => {
+ let debounceTimer = null;
+
+ const handleWheel = (e) => {
+ // Only trigger when hovering over the slider
+ if (e.target !== element) return;
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ // Clear existing debounce timer
+ if (debounceTimer) {
+ clearTimeout(debounceTimer);
+ }
+
+ // Debounce the adjustment to make it precise
+ debounceTimer = setTimeout(() => {
+ const currentValue = parseInt(element.value) || 0;
+ const delta = e.deltaY > 0 ? -step : step;
+ const newValue = Math.max(min, Math.min(max, currentValue + delta));
+
+ if (newValue !== currentValue) {
+ element.value = newValue;
+ updateCallback(newValue);
+ }
+ }, 50); // 50ms debounce for precise control
+ };
+
+ element.addEventListener('wheel', handleWheel, { passive: false });
+
+ // Return cleanup function
+ return () => {
+ if (debounceTimer) clearTimeout(debounceTimer);
+ element.removeEventListener('wheel', handleWheel);
+ };
+ },
+
+ /**
+ * Calculate the range of tile coordinates (in region space) that cover a given image area.
+ * @param {number} startRegionX - Base region X
+ * @param {number} startRegionY - Base region Y
+ * @param {number} startPixelX - Starting pixel X within the region grid
+ * @param {number} startPixelY - Starting pixel Y within the region grid
+ * @param {number} width - Image width in pixels
+ * @param {number} height - Image height in pixels
+ * @param {number} tileSize - Size of a tile (default 1000)
+ * @returns {{ startTileX: number, startTileY: number, endTileX: number, endTileY: number }}
+ */
+ calculateTileRange(
+ startRegionX,
+ startRegionY,
+ startPixelX,
+ startPixelY,
+ width,
+ height,
+ tileSize = 1000
+ ) {
+ const endPixelX = startPixelX + width;
+ const endPixelY = startPixelY + height;
+
+ return {
+ startTileX: startRegionX + Math.floor(startPixelX / tileSize),
+ startTileY: startRegionY + Math.floor(startPixelY / tileSize),
+ endTileX: startRegionX + Math.floor((endPixelX - 1) / tileSize),
+ endTileY: startRegionY + Math.floor((endPixelY - 1) / tileSize),
+ };
+ }, // Turnstile Generator Integration - Optimized with widget reuse and proper cleanup
+ turnstileLoaded: false,
+ _turnstileContainer: null,
+ _turnstileOverlay: null,
+ _turnstileWidgetId: null,
+ _lastSitekey: null,
+
+ async loadTurnstile() {
+ // If Turnstile is already present, just resolve.
+ if (window.turnstile) {
+ this.turnstileLoaded = true;
+ return Promise.resolve();
+ }
+
+ return new Promise((resolve, reject) => {
+ // Avoid adding the script twice
+ if (
+ document.querySelector(
+ 'script[src^="https://challenges.cloudflare.com/turnstile/v0/api.js"]'
+ )
+ ) {
+ const checkReady = () => {
+ if (window.turnstile) {
+ this.turnstileLoaded = true;
+ resolve();
+ } else {
+ setTimeout(checkReady, 100);
+ }
+ };
+ return checkReady();
+ }
+
+ const script = document.createElement('script');
+ script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+ script.async = true;
+ script.defer = true;
+ script.onload = () => {
+ this.turnstileLoaded = true;
+ console.log('✅ Turnstile script loaded successfully');
+ resolve();
+ };
+ script.onerror = () => {
+ console.error('❌ Failed to load Turnstile script');
+ reject(new Error('Failed to load Turnstile'));
+ };
+ document.head.appendChild(script);
+ });
+ },
+
+ // Create or reuse the turnstile container - completely hidden for token generation
+ ensureTurnstileContainer() {
+ if (!this._turnstileContainer || !document.body.contains(this._turnstileContainer)) {
+ // Clean up old container if it exists
+ if (this._turnstileContainer) {
+ this._turnstileContainer.remove();
+ }
+
+ this._turnstileContainer = document.createElement('div');
+ this._turnstileContainer.className = 'wplace-turnstile-hidden';
+ this._turnstileContainer.setAttribute('aria-hidden', 'true');
+ this._turnstileContainer.id = 'turnstile-widget-container';
+ document.body.appendChild(this._turnstileContainer);
+ }
+ return this._turnstileContainer;
+ },
+
+ // Interactive overlay container for visible widgets when needed
+ ensureTurnstileOverlayContainer() {
+ if (this._turnstileOverlay && document.body.contains(this._turnstileOverlay)) {
+ return this._turnstileOverlay;
+ }
+
+ const overlay = document.createElement('div');
+ overlay.id = 'turnstile-overlay-container';
+ overlay.className = 'wplace-turnstile-overlay wplace-overlay-hidden';
+
+ const title = document.createElement('div');
+ title.textContent = Utils.t('turnstileInstructions');
+ title.className = 'wplace-turnstile-title';
+
+ const host = document.createElement('div');
+ host.id = 'turnstile-overlay-host';
+ host.className = 'wplace-turnstile-host';
+
+ const hideBtn = document.createElement('button');
+ hideBtn.textContent = Utils.t('hideTurnstileBtn');
+ hideBtn.className = 'wplace-turnstile-hide-btn';
+ hideBtn.addEventListener('click', () => overlay.remove());
+
+ overlay.appendChild(title);
+ overlay.appendChild(host);
+ overlay.appendChild(hideBtn);
+ document.body.appendChild(overlay);
+
+ this._turnstileOverlay = overlay;
+ return overlay;
+ },
+
+ async executeTurnstile(sitekey, action = 'paint') {
+ await this.loadTurnstile();
+
+ // Try reusing existing widget first if sitekey matches
+ if (this._turnstileWidgetId && this._lastSitekey === sitekey && window.turnstile?.execute) {
+ try {
+ console.log('🔄 Reusing existing Turnstile widget...');
+ const token = await Promise.race([
+ window.turnstile.execute(this._turnstileWidgetId, { action }),
+ new Promise((_, reject) =>
+ setTimeout(() => reject(new Error('Execute timeout')), 15000)
+ ),
+ ]);
+ if (token && token.length > 20) {
+ console.log('✅ Token generated via widget reuse');
+ return token;
+ }
+ } catch (error) {
+ console.log('� Widget reuse failed, will create a fresh widget:', error.message);
+ }
+ }
+
+ // Try invisible widget first
+ const invisibleToken = await this.createTurnstileWidget(sitekey, action);
+ if (invisibleToken && invisibleToken.length > 20) {
+ return invisibleToken;
+ }
+
+ console.log('� Falling back to interactive Turnstile (visible).');
+ return await this.createTurnstileWidgetInteractive(sitekey, action);
+ },
+
+ async createTurnstileWidget(sitekey, action) {
+ return new Promise((resolve) => {
+ try {
+ // Force cleanup of any existing widget
+ if (this._turnstileWidgetId && window.turnstile?.remove) {
+ try {
+ window.turnstile.remove(this._turnstileWidgetId);
+ console.log('🧹 Cleaned up existing Turnstile widget');
+ } catch (e) {
+ console.warn('⚠️ Widget cleanup warning:', e.message);
+ }
+ }
+
+ const container = this.ensureTurnstileContainer();
+ container.innerHTML = '';
+
+ // Verify Turnstile is available
+ if (!window.turnstile?.render) {
+ console.error('❌ Turnstile not available for rendering');
+ resolve(null);
+ return;
+ }
+
+ console.log('🔧 Creating invisible Turnstile widget...');
+ const widgetId = window.turnstile.render(container, {
+ sitekey,
+ action,
+ size: 'invisible',
+ retry: 'auto',
+ 'retry-interval': 8000,
+ callback: (token) => {
+ console.log('✅ Invisible Turnstile callback');
+ resolve(token);
+ },
+ 'error-callback': () => resolve(null),
+ 'timeout-callback': () => resolve(null),
+ });
+
+ this._turnstileWidgetId = widgetId;
+ this._lastSitekey = sitekey;
+
+ if (!widgetId) {
+ return resolve(null);
+ }
+
+ // Execute the widget and race with timeout
+ Promise.race([
+ window.turnstile.execute(widgetId, { action }),
+ new Promise((_, reject) =>
+ setTimeout(() => reject(new Error('Invisible execute timeout')), 12000)
+ ),
+ ])
+ .then(resolve)
+ .catch(() => resolve(null));
+ } catch (e) {
+ console.error('❌ Invisible Turnstile creation failed:', e);
+ resolve(null);
+ }
+ });
+ },
+
+ async createTurnstileWidgetInteractive(sitekey, action) {
+ // Create a visible widget that users can interact with if needed
+ console.log('🔄 Creating interactive Turnstile widget (visible)');
+
+ return new Promise((resolve) => {
+ try {
+ // Force cleanup of any existing widget
+ if (this._turnstileWidgetId && window.turnstile?.remove) {
+ try {
+ window.turnstile.remove(this._turnstileWidgetId);
+ } catch (e) {
+ console.warn('⚠️ Widget cleanup warning:', e.message);
+ }
+ }
+
+ const overlay = this.ensureTurnstileOverlayContainer();
+ overlay.classList.remove('wplace-overlay-hidden');
+ overlay.style.display = 'block';
+
+ const host = overlay.querySelector('#turnstile-overlay-host');
+ host.innerHTML = '';
+
+ // Set a timeout for interactive mode
+ const timeout = setTimeout(() => {
+ console.warn('⏰ Interactive Turnstile widget timeout');
+ overlay.classList.add('wplace-overlay-hidden');
+ overlay.style.display = 'none';
+ resolve(null);
+ }, 60000); // 60 seconds for user interaction
+
+ const widgetId = window.turnstile.render(host, {
+ sitekey,
+ action,
+ size: 'normal',
+ theme: 'light',
+ callback: (token) => {
+ clearTimeout(timeout);
+ overlay.classList.add('wplace-overlay-hidden');
+ overlay.style.display = 'none';
+ console.log('✅ Interactive Turnstile completed successfully');
+
+ if (typeof token === 'string' && token.length > 20) {
+ resolve(token);
+ } else {
+ console.warn('❌ Invalid token from interactive widget');
+ resolve(null);
+ }
+ },
+ 'error-callback': (error) => {
+ clearTimeout(timeout);
+ overlay.classList.add('wplace-overlay-hidden');
+ overlay.style.display = 'none';
+ console.warn('❌ Interactive Turnstile error:', error);
+ resolve(null);
+ },
+ });
+
+ this._turnstileWidgetId = widgetId;
+ this._lastSitekey = sitekey;
+
+ if (!widgetId) {
+ clearTimeout(timeout);
+ overlay.classList.add('wplace-overlay-hidden');
+ overlay.style.display = 'none';
+ console.warn('❌ Failed to create interactive Turnstile widget');
+ resolve(null);
+ } else {
+ console.log('✅ Interactive Turnstile widget created, waiting for user interaction...');
+ }
+ } catch (e) {
+ console.error('❌ Interactive Turnstile creation failed:', e);
+ resolve(null);
+ }
+ });
+ },
+
+ // Cleanup method for when the script is disabled/reloaded
+ cleanupTurnstile() {
+ if (this._turnstileWidgetId && window.turnstile?.remove) {
+ try {
+ window.turnstile.remove(this._turnstileWidgetId);
+ } catch (e) {
+ console.warn('Failed to cleanup Turnstile widget:', e);
+ }
+ }
+
+ if (this._turnstileContainer && document.body.contains(this._turnstileContainer)) {
+ this._turnstileContainer.remove();
+ }
+
+ if (this._turnstileOverlay && document.body.contains(this._turnstileOverlay)) {
+ this._turnstileOverlay.remove();
+ }
+
+ this._turnstileWidgetId = null;
+ this._turnstileContainer = null;
+ this._turnstileOverlay = null;
+ this._lastSitekey = null;
+ },
+
+ async obtainSitekeyAndToken(fallback = '0x4AAAAAABpqJe8FO0N84q0F') {
+ // Cache sitekey to avoid repeated DOM queries
+ if (this._cachedSitekey) {
+ console.log('🔍 Using cached sitekey:', this._cachedSitekey);
+
+ return isTokenValid()
+ ? {
+ sitekey: this._cachedSitekey,
+ token: turnstileToken,
+ }
+ : { sitekey: this._cachedSitekey, token: null };
+ }
+
+ // List of potential sitekeys to try
+ const potentialSitekeys = [
+ '0x4AAAAAABpqJe8FO0N84q0F', // WPlace common sitekey
+ '0x4AAAAAAAJ7xjKAp6Mt_7zw', // Alternative WPlace sitekey
+ '0x4AAAAAADm5QWx6Ov2LNF2g', // Another common sitekey
+ ];
+ const trySitekey = async (sitekey, source) => {
+ if (!sitekey || sitekey.length < 10) return null;
+
+ console.log(`🔍 Testing sitekey from ${source}:`, sitekey);
+ const token = await this.executeTurnstile(sitekey);
+
+ if (token && token.length >= 20) {
+ console.log(`✅ Valid token generated from ${source} sitekey`);
+ setTurnstileToken(token);
+ this._cachedSitekey = sitekey;
+ return { sitekey, token };
+ } else {
+ console.log(`❌ Failed to get token from ${source} sitekey`);
+ return null;
+ }
+ };
+
+ try {
+ // 1️⃣ data-sitekey attribute
+ const sitekeySel = document.querySelector('[data-sitekey]');
+ if (sitekeySel) {
+ const sitekey = sitekeySel.getAttribute('data-sitekey');
+ const result = await trySitekey(sitekey, 'data attribute');
+ if (result) {
+ return result;
+ }
+ }
+
+ // 2️⃣ Turnstile element
+ const turnstileEl = document.querySelector('.cf-turnstile');
+ if (turnstileEl?.dataset?.sitekey) {
+ const sitekey = turnstileEl.dataset.sitekey;
+ const result = await trySitekey(sitekey, 'turnstile element');
+ if (result) {
+ return result;
+ }
+ }
+
+ // 3️⃣ Meta tags
+ const metaTags = document.querySelectorAll(
+ 'meta[name*="turnstile"], meta[property*="turnstile"]'
+ );
+ for (const meta of metaTags) {
+ const content = meta.getAttribute('content');
+ const result = await trySitekey(content, 'meta tag');
+ if (result) {
+ return result;
+ }
+ }
+
+ // 4️⃣ Global variable
+ if (window.__TURNSTILE_SITEKEY) {
+ const result = await trySitekey(window.__TURNSTILE_SITEKEY, 'global variable');
+ if (result) {
+ return result;
+ }
+ }
+
+ // 5️⃣ Script tags
+ const scripts = document.querySelectorAll('script');
+ for (const script of scripts) {
+ const content = script.textContent || script.innerHTML;
+ const match = content.match(
+ /(?:sitekey|data-sitekey)['"\s\[\]:\=\(]*['"]?([0-9a-zA-Z_-]{20,})['"]?/i
+ );
+ if (match && match[1]) {
+ const extracted = match[1].replace(/['"]/g, '');
+ const result = await trySitekey(extracted, 'script content');
+ if (result) {
+ return result;
+ }
+ }
+ }
+
+ // 6️⃣ Known potential sitekeys
+ console.log('🔍 Testing known potential sitekeys...');
+ for (const testSitekey of potentialSitekeys) {
+ const result = await trySitekey(testSitekey, 'known list');
+ if (result) {
+ return result;
+ }
+ }
+ } catch (error) {
+ console.warn('⚠️ Error during sitekey detection:', error);
+ }
+
+ // 7️⃣ Fallback
+ console.log('🔧 Trying fallback sitekey:', fallback);
+ const fallbackResult = await trySitekey(fallback, 'fallback');
+ if (fallbackResult) {
+ return fallbackResult;
+ }
+
+ console.error('❌ No working sitekey or token found.');
+ return { sitekey: null, token: null };
+ },
+
+ createElement: (tag, props = {}, children = []) => {
+ const element = document.createElement(tag);
+
+ Object.entries(props).forEach(([key, value]) => {
+ if (key === 'style' && typeof value === 'object') {
+ Object.assign(element.style, value);
+ } else if (key === 'className') {
+ element.className = value;
+ } else if (key === 'innerHTML') {
+ element.innerHTML = value;
+ } else {
+ element.setAttribute(key, value);
+ }
+ });
+
+ if (typeof children === 'string') {
+ element.textContent = children;
+ } else if (Array.isArray(children)) {
+ children.forEach((child) => {
+ if (typeof child === 'string') {
+ element.appendChild(document.createTextNode(child));
+ } else {
+ element.appendChild(child);
+ }
+ });
+ }
+
+ return element;
+ },
+
+ createButton: (id, text, icon, onClick, style = CONFIG.CSS_CLASSES.BUTTON_PRIMARY) => {
+ const button = Utils.createElement('button', {
+ id: id,
+ style: style,
+ innerHTML: `${icon ? `${text} `,
+ });
+ if (onClick) button.addEventListener('click', onClick);
+ return button;
+ },
+
+ // Synchronous translation function for UI rendering
+ t: (key, params = {}) => {
+ // Try to get from cache first
+ const cacheKey = `${state.language}_${key}`;
+ if (translationCache.has(cacheKey)) {
+ let text = translationCache.get(cacheKey);
+ Object.keys(params).forEach((param) => {
+ text = text.replace(`{${param}}`, params[param]);
+ });
+ return text;
+ }
+
+ // Try dynamically loaded translations (already loaded)
+ if (loadedTranslations[state.language]?.[key]) {
+ let text = loadedTranslations[state.language][key];
+ // Cache for future use
+ translationCache.set(cacheKey, text);
+ Object.keys(params).forEach((param) => {
+ text = text.replace(`{${param}}`, params[param]);
+ });
+ return text;
+ }
+
+ // Fallback to English if current language failed
+ if (state.language !== 'en' && loadedTranslations['en']?.[key]) {
+ let text = loadedTranslations['en'][key];
+ Object.keys(params).forEach((param) => {
+ text = text.replace(`{${param}}`, params[param]);
+ });
+ return text;
+ }
+
+ // Final fallback to emergency fallback or key
+ let text = FALLBACK_TEXT[state.language]?.[key] || FALLBACK_TEXT.en?.[key] || key;
+ Object.keys(params).forEach((param) => {
+ text = text.replace(new RegExp(`\\{${param}\\}`, 'g'), params[param]);
+ });
+
+ // Log missing translations for debugging
+ if (text === key && key !== 'undefined') {
+ console.warn(`⚠️ Missing translation for key: ${key} (language: ${state.language})`);
+ }
+
+ return text;
+ },
+
+ showAlert: (message, type = 'info') => {
+ const alertDiv = document.createElement('div');
+ alertDiv.className = `wplace-alert-base wplace-alert-${type}`;
+
+ alertDiv.textContent = message;
+ document.body.appendChild(alertDiv);
+
+ setTimeout(() => {
+ alertDiv.style.animation = 'slide-down 0.3s ease-out reverse';
+ setTimeout(() => {
+ document.body.removeChild(alertDiv);
+ }, 300);
+ }, 4000);
+ },
+
+ 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)),
+ _labCache: new Map(), // key: (r<<16)|(g<<8)|b value: [L,a,b]
+ _rgbToLab: (r, g, b) => {
+ // sRGB -> linear
+ const srgbToLinear = (v) => {
+ v /= 255;
+ return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+ };
+ const rl = srgbToLinear(r);
+ const gl = srgbToLinear(g);
+ const bl = srgbToLinear(b);
+ let X = rl * 0.4124 + gl * 0.3576 + bl * 0.1805;
+ let Y = rl * 0.2126 + gl * 0.7152 + bl * 0.0722;
+ let Z = rl * 0.0193 + gl * 0.1192 + bl * 0.9505;
+ X /= 0.95047;
+ Y /= 1.0;
+ Z /= 1.08883;
+ const f = (t) => (t > 0.008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116);
+ const fX = f(X),
+ fY = f(Y),
+ fZ = f(Z);
+ const L = 116 * fY - 16;
+ const a = 500 * (fX - fY);
+ const b2 = 200 * (fY - fZ);
+ return [L, a, b2];
+ },
+ _lab: (r, g, b) => {
+ const key = (r << 16) | (g << 8) | b;
+ let v = Utils._labCache.get(key);
+ if (!v) {
+ v = Utils._rgbToLab(r, g, b);
+ Utils._labCache.set(key, v);
+ }
+ return v;
+ },
+ findClosestPaletteColor: (r, g, b, palette) => {
+ // Use provided palette or derive from COLOR_MAP
+ if (!palette || palette.length === 0) {
+ palette = Object.values(CONFIG.COLOR_MAP)
+ .filter((c) => c.rgb)
+ .map((c) => [c.rgb.r, c.rgb.g, c.rgb.b]);
+ }
+ if (state.colorMatchingAlgorithm === 'legacy') {
+ let menorDist = Infinity;
+ let cor = [0, 0, 0];
+ for (let i = 0; i < palette.length; i++) {
+ const [pr, pg, pb] = palette[i];
+ const rmean = (pr + r) / 2;
+ const rdiff = pr - r;
+ const gdiff = pg - g;
+ const bdiff = pb - b;
+ const dist = Math.sqrt(
+ (((512 + rmean) * rdiff * rdiff) >> 8) +
+ 4 * gdiff * gdiff +
+ (((767 - rmean) * bdiff * bdiff) >> 8)
+ );
+ if (dist < menorDist) {
+ menorDist = dist;
+ cor = [pr, pg, pb];
+ }
+ }
+ return cor;
+ }
+ // LAB algorithm
+ const [Lt, at, bt] = Utils._lab(r, g, b);
+ const targetChroma = Math.sqrt(at * at + bt * bt);
+ let best = null;
+ let bestDist = Infinity;
+ for (let i = 0; i < palette.length; i++) {
+ const [pr, pg, pb] = palette[i];
+ const [Lp, ap, bp] = Utils._lab(pr, pg, pb);
+ const dL = Lt - Lp;
+ const da = at - ap;
+ const db = bt - bp;
+ let dist = dL * dL + da * da + db * db;
+ if (state.enableChromaPenalty && targetChroma > 20) {
+ const candChroma = Math.sqrt(ap * ap + bp * bp);
+ if (candChroma < targetChroma) {
+ const chromaDiff = targetChroma - candChroma;
+ dist += chromaDiff * chromaDiff * state.chromaPenaltyWeight;
+ }
+ }
+ if (dist < bestDist) {
+ bestDist = dist;
+ best = palette[i];
+ if (bestDist === 0) break;
+ }
+ }
+ return best || [0, 0, 0];
+ },
+
+ isWhitePixel: (r, g, b) => {
+ const wt = state.customWhiteThreshold || CONFIG.WHITE_THRESHOLD;
+ return r >= wt && g >= wt && b >= wt;
+ },
+
+ resolveColor(targetRgb, availableColors, exactMatch = false) {
+ if (!availableColors || availableColors.length === 0) {
+ return {
+ id: null,
+ rgb: targetRgb,
+ };
+ }
+
+ const cacheKey = `${targetRgb[0]},${targetRgb[1]},${targetRgb[2]}|${state.colorMatchingAlgorithm}|${state.enableChromaPenalty ? 'c' : 'nc'
+ }|${state.chromaPenaltyWeight}|${exactMatch ? 'exact' : 'closest'}`;
+
+ if (colorCache.has(cacheKey)) return colorCache.get(cacheKey);
+
+ // Check for an exact color match in availableColors.
+ // If found, return the matched color with its ID.
+ // If not found, return the target color with null ID.
+ // Cache the result for future lookups.
+ if (exactMatch) {
+ const match = availableColors.find(
+ (c) => c.rgb[0] === targetRgb[0] && c.rgb[1] === targetRgb[1] && c.rgb[2] === targetRgb[2]
+ );
+ const result = match ? { id: match.id, rgb: [...match.rgb] } : { id: null, rgb: targetRgb };
+ colorCache.set(cacheKey, result);
+ return result;
+ }
+
+ // check for white using threshold
+ const whiteThreshold = state.customWhiteThreshold || CONFIG.WHITE_THRESHOLD;
+ if (
+ targetRgb[0] >= whiteThreshold &&
+ targetRgb[1] >= whiteThreshold &&
+ targetRgb[2] >= whiteThreshold
+ ) {
+ const whiteEntry = availableColors.find(
+ (c) =>
+ c.rgb[0] >= whiteThreshold && c.rgb[1] >= whiteThreshold && c.rgb[2] >= whiteThreshold
+ );
+ if (whiteEntry) {
+ const result = { id: whiteEntry.id, rgb: [...whiteEntry.rgb] };
+ colorCache.set(cacheKey, result);
+ return result;
+ }
+ }
+
+ // find nearest color
+ let bestId = availableColors[0].id;
+ let bestRgb = [...availableColors[0].rgb];
+ let bestScore = Infinity;
+
+ if (state.colorMatchingAlgorithm === 'legacy') {
+ for (let i = 0; i < availableColors.length; i++) {
+ const c = availableColors[i];
+ const [r, g, b] = c.rgb;
+ const rmean = (r + targetRgb[0]) / 2;
+ const rdiff = r - targetRgb[0];
+ const gdiff = g - targetRgb[1];
+ const bdiff = b - targetRgb[2];
+ const dist = Math.sqrt(
+ (((512 + rmean) * rdiff * rdiff) >> 8) +
+ 4 * gdiff * gdiff +
+ (((767 - rmean) * bdiff * bdiff) >> 8)
+ );
+ if (dist < bestScore) {
+ bestScore = dist;
+ bestId = c.id;
+ bestRgb = [...c.rgb];
+ if (dist === 0) break;
+ }
+ }
+ } else {
+ const [Lt, at, bt] = Utils._lab(targetRgb[0], targetRgb[1], targetRgb[2]);
+ const targetChroma = Math.sqrt(at * at + bt * bt);
+ const penaltyWeight = state.enableChromaPenalty ? state.chromaPenaltyWeight || 0.15 : 0;
+
+ for (let i = 0; i < availableColors.length; i++) {
+ const c = availableColors[i];
+ const [r, g, b] = c.rgb;
+ const [L2, a2, b2] = Utils._lab(r, g, b);
+ const dL = Lt - L2,
+ da = at - a2,
+ db = bt - b2;
+ let dist = dL * dL + da * da + db * db;
+
+ if (penaltyWeight > 0 && targetChroma > 20) {
+ const candChroma = Math.sqrt(a2 * a2 + b2 * b2);
+ if (candChroma < targetChroma) {
+ const cd = targetChroma - candChroma;
+ dist += cd * cd * penaltyWeight;
+ }
+ }
+
+ if (dist < bestScore) {
+ bestScore = dist;
+ bestId = c.id;
+ bestRgb = [...c.rgb];
+ if (dist === 0) break;
+ }
+ }
+ }
+
+ const result = { id: bestId, rgb: bestRgb };
+ colorCache.set(cacheKey, result);
+
+ // limit the size of the cache
+ if (colorCache.size > 15000) {
+ const firstKey = colorCache.keys().next().value;
+ colorCache.delete(firstKey);
+ }
+
+ return result;
+ },
+
+ createImageUploader: () =>
+ new Promise((resolve) => {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = 'image/png,image/jpeg';
+ input.onchange = () => {
+ const fr = new FileReader();
+ fr.onload = () => resolve(fr.result);
+ fr.readAsDataURL(input.files[0]);
+ };
+ 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);
+ },
+
+ createFileUploader: () =>
+ 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();
+ }),
+
+ extractAvailableColors: () => {
+ const colorElements = document.querySelectorAll('.tooltip button[id^="color-"]');
+ if (colorElements.length === 0) {
+ console.log('❌ No color elements found on page');
+ return null;
+ }
+ // Separate available and unavailable colors
+ const availableColors = [];
+ const unavailableColors = [];
+
+ Array.from(colorElements).forEach((el) => {
+ const id = Number.parseInt(el.id.replace('color-', ''));
+ if (id === 0) return; // Skip transparent color
+
+ const rgbStr = el.style.backgroundColor.match(/\d+/g);
+ if (!rgbStr || rgbStr.length < 3) {
+ console.warn(`Skipping color element ${el.id} — cannot parse RGB`);
+ return;
+ }
+ const rgb = rgbStr.map(Number);
+
+ // Find color name from COLOR_MAP
+ const colorInfo = Object.values(CONFIG.COLOR_MAP).find((color) => color.id === id);
+ const name = colorInfo ? colorInfo.name : `Unknown Color ${id}`;
+
+ const colorData = { id, name, rgb };
+
+ // Check if color is available (no SVG overlay means available)
+ if (!el.querySelector('svg')) {
+ availableColors.push(colorData);
+ } else {
+ unavailableColors.push(colorData);
+ }
+ });
+
+ // Console log detailed color information
+ console.log('=== CAPTURED COLORS STATUS ===');
+ console.log(`Total available colors: ${availableColors.length}`);
+ console.log(`Total unavailable colors: ${unavailableColors.length}`);
+ console.log(`Total colors scanned: ${availableColors.length + unavailableColors.length}`);
+
+ if (availableColors.length > 0) {
+ console.log('\n--- AVAILABLE COLORS ---');
+ availableColors.forEach((color, index) => {
+ console.log(
+ `${index + 1
+ }. ID: ${color.id}, Name: "${color.name}", RGB: (${color.rgb[0]}, ${color.rgb[1]}, ${color.rgb[2]})`
+ );
+ });
+ }
+
+ if (unavailableColors.length > 0) {
+ console.log('\n--- UNAVAILABLE COLORS ---');
+ unavailableColors.forEach((color, index) => {
+ console.log(
+ `${index + 1
+ }. ID: ${color.id}, Name: "${color.name}", RGB: (${color.rgb[0]}, ${color.rgb[1]}, ${color.rgb[2]}) [LOCKED]`
+ );
+ });
+ }
+
+ console.log('=== END COLOR STATUS ===');
+
+ return availableColors;
+ },
+
+ formatTime: (ms) => {
+ const seconds = Math.floor((ms / 1000) % 60);
+ const minutes = Math.floor((ms / (1000 * 60)) % 60);
+ const hours = Math.floor((ms / (1000 * 60 * 60)) % 24);
+ const days = Math.floor(ms / (1000 * 60 * 60 * 24));
+
+ let result = '';
+ if (days > 0) result += `${days}d `;
+ if (hours > 0 || days > 0) result += `${hours}h `;
+ if (minutes > 0 || hours > 0 || days > 0) result += `${minutes}m `;
+ result += `${seconds}s`;
+
+ return result;
+ },
+
+ calculateEstimatedTime: (remainingPixels, charges, cooldown) => {
+ if (remainingPixels <= 0) return 0;
+
+ const paintingSpeedDelay = state.paintingSpeed > 0 ? 1000 / state.paintingSpeed : 1000;
+ const timeFromSpeed = remainingPixels * paintingSpeedDelay;
+
+ const cyclesNeeded = Math.ceil(remainingPixels / Math.max(charges, 1));
+ const timeFromCharges = cyclesNeeded * cooldown;
+
+ return timeFromSpeed + timeFromCharges; // combine instead of taking max
+ },
+
+ // --- Painted pixel tracking helpers ---
+ initializePaintedMap: (width, height) => {
+ if (!state.paintedMap || state.paintedMap.length !== height) {
+ state.paintedMap = Array(height)
+ .fill()
+ .map(() => Array(width).fill(false));
+ console.log(`📋 Initialized painted map: ${width}x${height}`);
+ }
+ },
+
+ markPixelPainted: (x, y, regionX = 0, regionY = 0) => {
+ const actualX = x + regionX;
+ const actualY = y + regionY;
+
+ if (
+ state.paintedMap &&
+ state.paintedMap[actualY] &&
+ actualX >= 0 &&
+ actualX < state.paintedMap[actualY].length
+ ) {
+ state.paintedMap[actualY][actualX] = true;
+ }
+ },
+
+ isPixelPainted: (x, y, regionX = 0, regionY = 0) => {
+ const actualX = x + regionX;
+ const actualY = y + regionY;
+
+ if (
+ state.paintedMap &&
+ state.paintedMap[actualY] &&
+ actualX >= 0 &&
+ actualX < state.paintedMap[actualY].length
+ ) {
+ return state.paintedMap[actualY][actualX];
+ }
+ return false;
+ },
+
+ // Smart save - only save if significant changes
+ shouldAutoSave: () => {
+ const now = Date.now();
+ const pixelsSinceLastSave = state.paintedPixels - state._lastSavePixelCount;
+ const timeSinceLastSave = now - state._lastSaveTime;
+
+ // Save conditions:
+ // 1. Every 25 pixels (reduced from 50 for more frequent saves)
+ // 2. At least 30 seconds since last save (prevent spam)
+ // 3. Not already saving
+ return !state._saveInProgress && pixelsSinceLastSave >= 25 && timeSinceLastSave >= 30000;
+ },
+
+ performSmartSave: () => {
+ if (!Utils.shouldAutoSave()) return false;
+
+ state._saveInProgress = true;
+ const success = Utils.saveProgress();
+
+ if (success) {
+ state._lastSavePixelCount = state.paintedPixels;
+ state._lastSaveTime = Date.now();
+ console.log(`💾 Auto-saved at ${state.paintedPixels} pixels`);
+ }
+
+ state._saveInProgress = false;
+ return success;
+ },
+
+ // --- Data management helpers ---
+
+ // Base64 compression helpers for efficient storage
+ packPaintedMapToBase64: (paintedMap, width, height) => {
+ if (!paintedMap || !width || !height) return null;
+ const totalBits = width * height;
+ const byteLen = Math.ceil(totalBits / 8);
+ const bytes = new Uint8Array(byteLen);
+ let bitIndex = 0;
+ for (let y = 0; y < height; y++) {
+ const row = paintedMap[y];
+ for (let x = 0; x < width; x++) {
+ const bit = row && row[x] ? 1 : 0;
+ const b = bitIndex >> 3; // byte index
+ const o = bitIndex & 7; // bit offset
+ if (bit) bytes[b] |= 1 << o;
+ bitIndex++;
+ }
+ }
+ let binary = '';
+ const chunk = 0x8000;
+ for (let i = 0; i < bytes.length; i += chunk) {
+ binary += String.fromCharCode.apply(
+ null,
+ bytes.subarray(i, Math.min(i + chunk, bytes.length))
+ );
+ }
+ return btoa(binary);
+ },
+
+ unpackPaintedMapFromBase64: (base64, width, height) => {
+ if (!base64 || !width || !height) return null;
+ const binary = atob(base64);
+ const bytes = new Uint8Array(binary.length);
+ for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+ const map = Array(height)
+ .fill()
+ .map(() => Array(width).fill(false));
+ let bitIndex = 0;
+ for (let y = 0; y < height; y++) {
+ for (let x = 0; x < width; x++) {
+ const b = bitIndex >> 3;
+ const o = bitIndex & 7;
+ map[y][x] = ((bytes[b] >> o) & 1) === 1;
+ bitIndex++;
+ }
+ }
+ return map;
+ },
+
+ // Migration helpers for backward compatibility
+ migrateProgressToV2: (saved) => {
+ if (!saved) return saved;
+ const isV1 =
+ !saved.version ||
+ saved.version === '1' ||
+ saved.version === '1.0' ||
+ saved.version === '1.1';
+ if (!isV1) return saved;
+
+ try {
+ const migrated = { ...saved };
+ const width = migrated.imageData?.width;
+ const height = migrated.imageData?.height;
+ if (migrated.paintedMap && width && height) {
+ const data = Utils.packPaintedMapToBase64(migrated.paintedMap, width, height);
+ migrated.paintedMapPacked = { width, height, data };
+ }
+ delete migrated.paintedMap;
+ migrated.version = '2';
+ return migrated;
+ } catch (e) {
+ console.warn('Migration to v2 failed, using original data:', e);
+ return saved;
+ }
+ },
+
+ migrateProgressToV21: (saved) => {
+ if (!saved) return saved;
+ if (saved.version === '2.1') return saved;
+ const isV2 = saved.version === '2' || saved.version === '2.0';
+ const isV1 =
+ !saved.version ||
+ saved.version === '1' ||
+ saved.version === '1.0' ||
+ saved.version === '1.1';
+ if (!isV2 && !isV1) return saved; // save this for future
+ try {
+ const migrated = { ...saved };
+ // First migrate to v2 if needed
+ if (isV1) {
+ const width = migrated.imageData?.width;
+ const height = migrated.imageData?.height;
+ if (migrated.paintedMap && width && height) {
+ const data = Utils.packPaintedMapToBase64(migrated.paintedMap, width, height);
+ migrated.paintedMapPacked = { width, height, data };
+ }
+ delete migrated.paintedMap;
+ }
+ migrated.version = '2.1';
+ return migrated;
+ } catch (e) {
+ console.warn('Migration to v2.1 failed, using original data:', e);
+ return saved;
+ }
+ },
+
+ migrateProgressToV22: (data) => {
+ try {
+ const migrated = { ...data };
+ migrated.version = '2.2';
+
+ // Add new fields with default values
+ if (!migrated.state.coordinateMode) {
+ migrated.state.coordinateMode = CONFIG.COORDINATE_MODE;
+ }
+ if (!migrated.state.coordinateDirection) {
+ migrated.state.coordinateDirection = CONFIG.COORDINATE_DIRECTION;
+ }
+ if (!migrated.state.coordinateSnake) {
+ migrated.state.coordinateSnake = CONFIG.COORDINATE_SNAKE;
+ }
+ if (!migrated.state.blockWidth) {
+ migrated.state.blockWidth = CONFIG.COORDINATE_BLOCK_WIDTH;
+ }
+ if (!migrated.state.blockHeight) {
+ migrated.state.blockHeight = CONFIG.COORDINATE_BLOCK_HEIGHT;
+ }
+
+ return migrated;
+ } catch (e) {
+ console.warn('Migration to v2.2 failed, using original data:', e);
+ return data;
+ }
+ },
+
+ buildPaintedMapPacked() {
+ if (state.paintedMap && state.imageData) {
+ const data = Utils.packPaintedMapToBase64(
+ state.paintedMap,
+ state.imageData.width,
+ state.imageData.height
+ );
+ if (data) {
+ return {
+ width: state.imageData.width,
+ height: state.imageData.height,
+ data: data,
+ };
+ }
+ }
+ return null;
+ },
+
+ buildProgressData() {
+ return {
+ timestamp: Date.now(),
+ version: '2.2',
+ state: {
+ totalPixels: state.totalPixels,
+ paintedPixels: state.paintedPixels,
+ lastPosition: state.lastPosition,
+ startPosition: state.startPosition,
+ region: state.region,
+ imageLoaded: state.imageLoaded,
+ colorsChecked: state.colorsChecked,
+ coordinateMode: state.coordinateMode,
+ coordinateDirection: state.coordinateDirection,
+ coordinateSnake: state.coordinateSnake,
+ blockWidth: state.blockWidth,
+ blockHeight: state.blockHeight,
+ availableColors: state.availableColors,
+ },
+ imageData: state.imageData
+ ? {
+ width: state.imageData.width,
+ height: state.imageData.height,
+ pixels: Array.from(state.imageData.pixels),
+ totalPixels: state.imageData.totalPixels,
+ }
+ : null,
+ paintedMapPacked: Utils.buildPaintedMapPacked(),
+ };
+ },
+
+ migrateProgress(saved) {
+ if (!saved) return null;
+
+ let data = saved;
+ const ver = data.version;
+
+ // If version is missing or ≤ 1.x → first migrate to v2
+ if (!ver || ver === '1' || ver === '1.0' || ver === '1.1') {
+ data = Utils.migrateProgressToV2(data);
+ }
+
+ // If still older than v2.1 → migrate to 2.1
+ if (data.version === '2' || data.version === '2.0') {
+ data = Utils.migrateProgressToV21(data);
+ }
+
+ // If still older than v2.2 → migrate to 2.2
+ if (data.version === '2.1') {
+ data = Utils.migrateProgressToV22(data);
+ }
+
+ // Now data is guaranteed to be the latest version
+ return data;
+ },
+
+ saveProgress: () => {
+ try {
+ const progressData = Utils.buildProgressData(state);
+
+ localStorage.setItem('wplace-bot-progress', JSON.stringify(progressData));
+ return true;
+ } catch (error) {
+ console.error('Error saving progress:', error);
+ return false;
+ }
+ },
+
+ loadProgress: () => {
+ try {
+ const saved = localStorage.getItem('wplace-bot-progress');
+ if (!saved) return null;
+ let data = JSON.parse(saved);
+ const migrated = Utils.migrateProgress(data);
+
+ if (migrated && migrated !== data) {
+ try {
+ localStorage.setItem('wplace-bot-progress', JSON.stringify(migrated));
+ } catch { }
+ }
+ return migrated;
+ } catch (error) {
+ console.error('Error loading progress:', error);
+ return null;
+ }
+ },
+
+ clearProgress: () => {
+ try {
+ localStorage.removeItem('wplace-bot-progress');
+ // Also clear painted map from memory
+ state.paintedMap = null;
+ state._lastSavePixelCount = 0;
+ state._lastSaveTime = 0;
+ // Reset coordinate generation settings to their default values
+ state.coordinateMode = CONFIG.COORDINATE_MODE;
+ state.coordinateDirection = CONFIG.COORDINATE_DIRECTION;
+ state.coordinateSnake = CONFIG.COORDINATE_SNAKE;
+ state.blockWidth = CONFIG.COORDINATE_BLOCK_WIDTH;
+ state.blockHeight = CONFIG.COORDINATE_BLOCK_HEIGHT;
+ console.log('📋 Progress and painted map cleared');
+ return true;
+ } catch (error) {
+ console.error('Error clearing progress:', error);
+ return false;
+ }
+ },
+
+ restoreProgress: (savedData) => {
+ try {
+ Object.assign(state, savedData.state);
+
+ // Restore coordinate generation settings
+ if (savedData.state.coordinateMode) {
+ state.coordinateMode = savedData.state.coordinateMode;
+ }
+ if (savedData.state.coordinateDirection) {
+ state.coordinateDirection = savedData.state.coordinateDirection;
+ }
+ if (savedData.state.coordinateSnake !== undefined) {
+ state.coordinateSnake = savedData.state.coordinateSnake;
+ }
+ if (savedData.state.blockWidth) {
+ state.blockWidth = savedData.state.blockWidth;
+ }
+ if (savedData.state.blockHeight) {
+ state.blockHeight = savedData.state.blockHeight;
+ }
+
+ if (savedData.imageData) {
+ state.imageData = {
+ ...savedData.imageData,
+ pixels: new Uint8ClampedArray(savedData.imageData.pixels),
+ };
+
+ try {
+ const canvas = document.createElement('canvas');
+ canvas.width = state.imageData.width;
+ canvas.height = state.imageData.height;
+ const ctx = canvas.getContext('2d');
+ const imageData = new ImageData(
+ state.imageData.pixels,
+ state.imageData.width,
+ state.imageData.height
+ );
+ ctx.putImageData(imageData, 0, 0);
+ const proc = new ImageProcessor('');
+ proc.img = canvas;
+ proc.canvas = canvas;
+ proc.ctx = ctx;
+ state.imageData.processor = proc;
+ } catch (e) {
+ console.warn('Could not rebuild processor from saved image data:', e);
+ }
+ }
+
+ // Prefer packed form if available; fallback to legacy paintedMap array for backward compatibility
+ if (savedData.paintedMapPacked && savedData.paintedMapPacked.data) {
+ const { width, height, data } = savedData.paintedMapPacked;
+ state.paintedMap = Utils.unpackPaintedMapFromBase64(data, width, height);
+ } else if (savedData.paintedMap) {
+ state.paintedMap = savedData.paintedMap.map((row) => Array.from(row));
+ }
+
+ return true;
+ } catch (error) {
+ console.error('Error restoring progress:', error);
+ return false;
+ }
+ },
+
+ saveProgressToFile: () => {
+ try {
+ const progressData = Utils.buildProgressData();
+ 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 {
+ const data = await Utils.createFileUploader();
+ if (!data || !data.state) {
+ throw new Error('Invalid file format');
+ }
+ const migrated = Utils.migrateProgress(data);
+
+ const success = Utils.restoreProgress(migrated);
+ return success;
+ } catch (error) {
+ console.error('Error loading from file:', error);
+ throw error;
+ }
+ },
+
+ // Helper function to restore overlay from loaded data
+ restoreOverlayFromData: async () => {
+ if (!state.imageLoaded || !state.imageData || !state.startPosition || !state.region) {
+ return false;
+ }
+
+ try {
+ // Recreate ImageBitmap from loaded pixel data
+ const imageData = new ImageData(
+ state.imageData.pixels,
+ state.imageData.width,
+ state.imageData.height
+ );
+
+ const canvas = new OffscreenCanvas(state.imageData.width, state.imageData.height);
+ const ctx = canvas.getContext('2d');
+ ctx.putImageData(imageData, 0, 0);
+ const imageBitmap = await canvas.transferToImageBitmap();
+
+ // Set up overlay with restored data
+ await overlayManager.setImage(imageBitmap);
+ await overlayManager.setPosition(state.startPosition, state.region);
+ overlayManager.enable();
+
+ // Update overlay button state
+ const toggleOverlayBtn = document.getElementById('toggleOverlayBtn');
+ if (toggleOverlayBtn) {
+ toggleOverlayBtn.disabled = false;
+ toggleOverlayBtn.classList.add('active');
+ }
+
+ console.log('Overlay restored from data');
+ return true;
+ } catch (error) {
+ console.error('Failed to restore overlay from data:', error);
+ return false;
+ }
+ },
+
+ updateCoordinateUI({ mode, directionControls, snakeControls, blockControls }) {
+ const isLinear = mode === 'rows' || mode === 'columns';
+ const isBlock = mode === 'blocks' || mode === 'shuffle-blocks';
+
+ if (directionControls) directionControls.style.display = isLinear ? 'block' : 'none';
+ if (snakeControls) snakeControls.style.display = isLinear ? 'block' : 'none';
+ if (blockControls) blockControls.style.display = isBlock ? 'block' : 'none';
+ },
+ };
+
+ // IMAGE PROCESSOR CLASS
+ class ImageProcessor {
+ constructor(imageSrc) {
+ this.imageSrc = imageSrc;
+ this.img = null;
+ this.canvas = null;
+ this.ctx = null;
+ }
+
+ async load() {
+ return new Promise((resolve, reject) => {
+ this.img = new Image();
+ this.img.crossOrigin = 'anonymous';
+ this.img.onload = () => {
+ this.canvas = document.createElement('canvas');
+ this.ctx = this.canvas.getContext('2d');
+ this.canvas.width = this.img.width;
+ this.canvas.height = this.img.height;
+ this.ctx.drawImage(this.img, 0, 0);
+ resolve();
+ };
+ this.img.onerror = reject;
+ this.img.src = this.imageSrc;
+ });
+ }
+
+ getDimensions() {
+ return {
+ width: this.canvas.width,
+ height: this.canvas.height,
+ };
+ }
+
+ getPixelData() {
+ return this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
+ }
+
+ resize(newWidth, newHeight) {
+ const tempCanvas = document.createElement('canvas');
+ const tempCtx = tempCanvas.getContext('2d');
+
+ tempCanvas.width = newWidth;
+ tempCanvas.height = newHeight;
+
+ tempCtx.imageSmoothingEnabled = false;
+ tempCtx.drawImage(this.canvas, 0, 0, newWidth, newHeight);
+
+ this.canvas.width = newWidth;
+ this.canvas.height = newHeight;
+ this.ctx.imageSmoothingEnabled = false;
+ this.ctx.drawImage(tempCanvas, 0, 0);
+
+ return this.ctx.getImageData(0, 0, newWidth, newHeight).data;
+ }
+
+ generatePreview(width, height) {
+ const previewCanvas = document.createElement('canvas');
+ const previewCtx = previewCanvas.getContext('2d');
+
+ previewCanvas.width = width;
+ previewCanvas.height = height;
+
+ previewCtx.imageSmoothingEnabled = false;
+ previewCtx.drawImage(this.img, 0, 0, width, height);
+
+ return previewCanvas.toDataURL();
+ }
+ }
+
+ // WPLACE API SERVICE
+ const WPlaceService = {
+ async paintPixelInRegion(regionX, regionY, pixelX, pixelY, color) {
+ try {
+ await ensureToken();
+ if (!turnstileToken) return 'token_error';
+ const payload = {
+ coords: [pixelX, pixelY],
+ colors: [color],
+ t: turnstileToken,
+ 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.');
+ turnstileToken = null;
+ tokenPromise = new Promise((resolve) => {
+ _resolveToken = resolve;
+ });
+ 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,
+ 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 = (isManualRefresh) => { };
+ 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() {
+ const startTime = performance.now();
+
+ // Check user's token source preference
+ if (state.tokenSource === 'manual') {
+ console.log('🎯 Manual token source selected - using pixel placement automation');
+ return await 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 = turnstileToken;
+ }
+ // ✅ Otherwise generate a new one
+ else {
+ console.log('🔐 No valid pre-generated or cached token, creating new one...');
+ token = await Utils.executeTurnstile(sitekey, 'paint');
+ if (token) {
+ setTurnstileToken(token);
+ }
+ }
+
+ // 📊 Debug log
+ 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 handleCaptchaFallback();
+ return fbToken;
+ } else {
+ // Pure generator mode - don't fallback, just fail
+ throw error;
+ }
+ }
+ }
+
+ // Keep original method as fallback
+ async function handleCaptchaFallback() {
+ return new Promise(async (resolve, reject) => {
+ try {
+ // Ensure we have a fresh promise to await for a new token capture
+ if (!_resolveToken) {
+ tokenPromise = new Promise((res) => {
+ _resolveToken = res;
+ });
+ }
+ const timeoutPromise = Utils.sleep(20000).then(() =>
+ reject(new Error('Auto-CAPTCHA timed out.'))
+ );
+
+ const solvePromise = (async () => {
+ const mainPaintBtn = await Utils.waitForSelector(
+ 'button.btn.btn-primary.btn-lg, button.btn-primary.sm\\:btn-xl',
+ 200,
+ 10000
+ );
+ if (!mainPaintBtn) throw new Error('Could not find the main paint button.');
+ mainPaintBtn.click();
+ await Utils.sleep(500);
+
+ const transBtn = await Utils.waitForSelector('button#color-0', 200, 5000);
+ if (!transBtn) throw new Error('Could not find the transparent color button.');
+ transBtn.click();
+ await Utils.sleep(500);
+
+ const canvas = await Utils.waitForSelector('canvas', 200, 5000);
+ if (!canvas) throw new Error('Could not find the canvas element.');
+
+ canvas.setAttribute('tabindex', '0');
+ canvas.focus();
+ const rect = canvas.getBoundingClientRect();
+ const centerX = Math.round(rect.left + rect.width / 2);
+ const centerY = Math.round(rect.top + rect.height / 2);
+
+ canvas.dispatchEvent(
+ new MouseEvent('mousemove', {
+ clientX: centerX,
+ clientY: centerY,
+ bubbles: true,
+ })
+ );
+ canvas.dispatchEvent(
+ new KeyboardEvent('keydown', {
+ key: ' ',
+ code: 'Space',
+ bubbles: true,
+ })
+ );
+ await Utils.sleep(50);
+ canvas.dispatchEvent(
+ new KeyboardEvent('keyup', {
+ key: ' ',
+ code: 'Space',
+ bubbles: true,
+ })
+ );
+ await Utils.sleep(500);
+
+ // 800ms delay before sending confirmation
+ await Utils.sleep(800);
+
+ // Keep confirming until token is captured
+ const confirmLoop = async () => {
+ while (!turnstileToken) {
+ let confirmBtn = await Utils.waitForSelector(
+ 'button.btn.btn-primary.btn-lg, button.btn.btn-primary.sm\\:btn-xl'
+ );
+ if (!confirmBtn) {
+ const allPrimary = Array.from(document.querySelectorAll('button.btn-primary'));
+ confirmBtn = allPrimary.length ? allPrimary[allPrimary.length - 1] : null;
+ }
+ if (confirmBtn) {
+ confirmBtn.click();
+ }
+ await Utils.sleep(500); // 500ms delay between confirmation attempts
+ }
+ };
+
+ // Start confirmation loop and wait for token
+ confirmLoop();
+ const token = await tokenPromise;
+ await Utils.sleep(300); // small delay after token is captured
+ resolve(token);
+ })();
+
+ await Promise.race([solvePromise, timeoutPromise]);
+ } catch (error) {
+ console.error('Auto-CAPTCHA process failed:', error);
+ reject(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 === '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('initMessage')}
+
+
+
+
+
+
+
🖼️ Image Management
+
+
+
+ ${Utils.t('uploadImage')}
+
+
+ ${Utils.t('resizeImage')}
+
+
+
+
+ ${Utils.t('selectPosition')}
+
+
+
+
+
+
+
+
🎮 Painting Control
+
+
+
+ ${Utils.t('startPainting')}
+
+
+ ${Utils.t('stopPainting')}
+
+
+
+
+ ${Utils.t('toggleOverlay')}
+
+
+
+
+
+
+
+
⏱️ ${Utils.t('cooldownSettings')}
+
+
${Utils.t('waitCharges')}:
+
+
+
+
+
+
+
💾 Data Management
+
+
+
+ ${Utils.t('saveData')}
+
+
+ ${Utils.t('loadData')}
+
+
+
+
+ ${Utils.t('saveToFile')}
+
+
+ ${Utils.t('loadFromFile')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🤖 Automatic Token Generator (Recommended)
+ 🔄 Generator + Auto Fallback
+ 🎯 Manual Pixel Placement
+
+
+ Generator mode creates tokens automatically. Hybrid mode falls back to manual when generator fails. Manual mode only uses pixel placement.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Blue Marble Effect
+
Renders a dithered "shredded" overlay.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${Utils.t('paintWhitePixels')}
+
+
+ ${Utils.t('paintWhitePixelsDescription')}
+
+
+
+
+
+
+
+ ${Utils.t('paintTransparentPixels')}
+
+
+ ${Utils.t('paintTransparentPixelsDescription')}
+
+
+
+
+
${Utils.t('paintUnavailablePixels')}
+
${Utils.t('paintUnavailablePixelsDescription')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 📦 Normal (Fixed Size)
+ 🎲 Random (Range)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🎲 Random batch size between min and max values
+
+
+
+
+
+ ${Utils.t('enablePaintingSpeedLimit')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 📏 Rows (Horizontal Lines)
+ 📐 Columns (Vertical Lines)
+ ⭕ Circle Out (Center → Edges)
+ ⭕ Circle In (Edges → Center)
+ 🟫 Blocks (Ordered)
+ 🎲 Shuffle Blocks (Random)
+
+
+
+
+
+
+
+
+ ↖️ Top-Left
+ ↗️ Top-Right
+ ↙️ Bottom-Left
+ ↘️ Bottom-Right
+
+
+
+
+
+
+
+
Snake Pattern
+
Alternate direction for each row/column (zigzag pattern)
+
+
+
+
+
+
+
+ 🧱 Block dimensions for block-based generation modes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${Object.keys(CONFIG.THEMES)
+ .map(
+ (themeName) =>
+ `${themeName} `
+ )
+ .join('')}
+
+
+
+
+
+
+
+
+
+
+ 🇻🇳 Tiếng Việt
+ 🇮🇩 Bahasa Indonesia
+ 🇷🇺 Русский
+ 🇺🇦 Українська
+ 🇺🇸 English
+ 🇧🇷 Português
+ 🇫🇷 Français
+ 🇹🇷 Türkçe
+ 🇨🇳 简体中文
+ 🇹🇼 繁體中文
+ 🇯🇵 日本語
+ 🇰🇷 한국어
+
+
+
+
${Utils.t('resizeImage')}
+
+
+
+
+
+
+
+
+
+
+
+ ${Utils.t('showAllColorsIncluding')}
+
+
+
+ Select All
+ Unselect All
+ Unselect Paid
+
+
+
+
+
+
+
+
+ Algorithm
+
+ Perceptual (Lab)
+ Legacy (RGB)
+
+
+
+
+
Chroma Penalty
+
Preserve vivid colors (Lab only)
+
+
+
+
+
+
+
Enable Dithering
+
Floyd–Steinberg error diffusion in preview and applied output
+
+
+
+ Transparency
+
+
+ White Thresh
+
+
+
Reset Advanced
+
+
+
+ ${Utils.t('downloadPreview')}
+
+
+ ${Utils.t('apply')}
+
+
+ ${Utils.t('cancel')}
+
+
+ `;
+
+ 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 = 'FULL `;
+ } else {
+ fullChargeEl.innerHTML = `
+ ${timeText}
+ `;
+ }
+ }
+ }
+
+ updateStats = async (isManualRefresh = false) => {
+ const isForcedRefresh = isManualRefresh;
+ 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 = isForcedRefresh || isFirstCheck || isTimeToUpdate;
+
+ if (shouldCallApi) {
+ 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;
+ }
+
+ let imageStatsHTML = '';
+ if (state.imageLoaded) {
+ const progress =
+ state.totalPixels > 0 ? Math.round((state.paintedPixels / state.totalPixels) * 100) : 0;
+ const remainingPixels = state.totalPixels - state.paintedPixels;
+ state.estimatedTime = Utils.calculateEstimatedTime(
+ remainingPixels,
+ state.displayCharges,
+ state.cooldown
+ );
+ progressBar.style.width = `${progress}%`;
+
+ imageStatsHTML = `
+
+
+
${progress}%
+
+
+
${state.paintedPixels}/${state.totalPixels}
+
+
+
${Utils.formatTime(state.estimatedTime)}
+
`;
+ })
+ .join('');
+ }
+
+ statsArea.innerHTML = `
+ ${imageStatsHTML}
+
+
+
+
+ ${state.displayCharges} / ${state.maxCharges}
+
+
+
+
+
--:--:--
+
+
+
+ ${colorSwatchesHTML}
+
+
+
+
+ PIXEL ART ATTACKED!
+
+
+ Detected ${count} damaged pixels!
+
+ `;
+ } else if (type === 'repaired') {
+ notification.innerHTML = `
+
+
+
+ COMPLETELY REPAIRED!
+
+
+ All pixels have been restored!
+
+ `;
+ }
+
+ document.body.appendChild(notification);
+
+ setTimeout(() => {
+ if (notification.parentNode) {
+ notification.style.transition = 'opacity 0.5s ease';
+ notification.style.opacity = '0';
+ setTimeout(() => {
+ if (notification.parentNode) notification.remove();
+ }, 500);
+ }
+ }, 3000);
+ }
+
+ // Peaceful state display in main window
+ function showPeacefulState() {
+ const statusDiv = document.getElementById('status');
+ if (statusDiv && !state.running) {
+ statusDiv.innerHTML = `
+
+
+
No attacks detected - All secure
+
+ [${log.timestamp}] ${log.message}
+
`;
+ }).join('');
+
+ debugConsole.innerHTML = logsHtml;
+ debugConsole.scrollTop = debugConsole.scrollHeight;
+ }
+
+ async function updateCharges() {
+ try {
+ const { charges, max, cooldown } = await WPlaceService.getCharges();
+ state.displayCharges = Math.floor(charges);
+ state.maxCharges = Math.max(1, Math.floor(max));
+ state.cooldown = cooldown;
+
+ updateChargesDisplay();
+ } catch (error) {
+ if (!state.autonomousMode) {
+ Utils.addDebugLog(`Error updating charges: ${error.message}`, 'error');
+ }
+ }
+ }
+
+ function updateChargesDisplay() {
+ const chargesEl = document.getElementById('chargesInfo');
+ if (chargesEl) {
+ chargesEl.textContent = `Charges: ${state.displayCharges}/${state.maxCharges} (cooldown: ${Math.round(state.cooldown / 1000)}s)`;
+ }
+ }
+
+ function updateTokenStatus() {
+ const tokenEl = document.getElementById('tokenInfo');
+ if (tokenEl) {
+ // Remove existing classes first
+ tokenEl.className = '';
+
+ if (isTokenValid()) {
+ const remaining = Math.round((tokenExpiryTime - Date.now()) / 1000);
+ tokenEl.textContent = `Token: Valid (expires in ${remaining}s)`;
+ tokenEl.className = 'neon-text success';
+ } else {
+ tokenEl.textContent = 'Token: Not generated or expired';
+ tokenEl.className = 'neon-text warning';
+ }
+ }
+ }
+
+ // Update batch information display for new UI
+ function updateBatchInfo() {
+ const batchSizeEl = document.getElementById('batchSize');
+ const batchStatusEl = document.getElementById('batchStatus');
+ const smartModeEl = document.getElementById('smartBatchMode');
+ const manualModeEl = document.getElementById('manualBatchMode');
+ const manualControlsEl = document.getElementById('manualBatchControls');
+
+ // Update radio button states
+ if (smartModeEl && manualModeEl) {
+ smartModeEl.checked = state.autoBatchEnabled && state.batchOptimization;
+ manualModeEl.checked = !state.autoBatchEnabled || !state.batchOptimization;
+ }
+
+ // Update manual controls visibility
+ if (manualControlsEl) {
+ manualControlsEl.style.display = (!state.autoBatchEnabled || !state.batchOptimization) ? 'flex' : 'none';
+ }
+
+ // Update batch size input
+ if (batchSizeEl) {
+ batchSizeEl.value = state.currentBatchSize;
+ }
+
+ // Update status display
+ if (batchStatusEl) {
+ if (state.autoBatchEnabled && state.batchOptimization) {
+ batchStatusEl.textContent = `🧠 Smart Batch: AUTO (Current: ${state.currentBatchSize})`;
+ batchStatusEl.className = 'status-info';
+ } else {
+ batchStatusEl.textContent = `✋ Manual Batch: ${state.currentBatchSize} pixels fixed`;
+ batchStatusEl.className = 'status-warning';
+ }
+ }
+ }
+
+ function updateSystemStatus() {
+ const systemEl = document.getElementById('systemInfo');
+ if (systemEl) {
+ const autonomousStatus = state.autonomousMode ? 'AUTONOMOUS' : 'MANUAL';
+ const tokenMode = state.tokenSource.toUpperCase();
+ systemEl.textContent = `System: ${autonomousStatus} | Token: ${tokenMode} | Auto-refresh: ${state.autoTokenRefresh ? 'ON' : 'OFF'}`;
+ }
+ }
+
+ // Window dragging functionality
+ function makeWindowDraggable() {
+ const container = document.getElementById('wplace-repair-tool');
+ const header = document.getElementById('window-header');
+
+ let isDragging = false;
+ let currentX;
+ let currentY;
+ let initialX;
+ let initialY;
+ let xOffset = 0;
+ let yOffset = 0;
+
+ function dragStart(e) {
+ if (e.target.tagName === 'BUTTON' || e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') {
+ return;
+ }
+
+ initialX = e.clientX - xOffset;
+ initialY = e.clientY - yOffset;
+
+ if (e.target === header || header.contains(e.target)) {
+ isDragging = true;
+ container.style.cursor = 'grabbing';
+ }
+ }
+
+ function dragEnd() {
+ initialX = currentX;
+ initialY = currentY;
+ isDragging = false;
+ container.style.cursor = 'default';
+ }
+
+ function drag(e) {
+ if (isDragging) {
+ e.preventDefault();
+ currentX = e.clientX - initialX;
+ currentY = e.clientY - initialY;
+ xOffset = currentX;
+ yOffset = currentY;
+
+ container.style.transform = `translate(${currentX}px, ${currentY}px)`;
+ }
+ }
+
+ header.addEventListener('mousedown', dragStart);
+ document.addEventListener('mouseup', dragEnd);
+ document.addEventListener('mousemove', drag);
+ }
+
+ // Enhanced UI Creation with NEW IMPLEMENTATION
+ function createUI() {
+ const existing = document.getElementById('wplace-repair-tool');
+ if (existing) existing.remove();
+
+ const container = document.createElement('div');
+ container.id = 'wplace-repair-tool';
+ container.style.cssText = `
+ position: fixed; top: 20px; left: 20px; z-index: 10000;
+ background: #1a1a2e;
+ border: 3px solid #00ff41;
+ border-radius: 0;
+ min-width: 600px; max-width: 700px;
+ box-shadow:
+ 0 0 30px rgb(0 255 65 / 50%),
+ inset 0 0 30px rgb(0 255 65 / 10%),
+ 0 0 0 1px #00ff41;
+ color: #00ff41;
+ font-family: 'Press Start 2P', monospace, 'Courier New';
+ resize: both; overflow: hidden;
+ animation: neon-pulse 2s ease-in-out infinite alternate;
+ `;
+
+ // Add Neon theme styles
+ const neonStyles = document.createElement('style');
+ neonStyles.id = 'auto-repair-neon-styles';
+ neonStyles.textContent = `
+ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+ #wplace-repair-tool::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, #00ff41, transparent);
+ z-index: 1;
+ pointer-events: none;
+ animation: scanline 3s linear infinite;
+ opacity: 0.7;
+ }
+
+ .neon-btn {
+ background: #16213e !important;
+ border: 2px solid #00ff41 !important;
+ border-radius: 0 !important;
+ color: #00ff41 !important;
+ padding: 8px 15px !important;
+ font-family: 'Press Start 2P', monospace !important;
+ font-size: 8px !important;
+ text-transform: uppercase !important;
+ cursor: pointer !important;
+ transition: all 0.3s ease !important;
+ text-shadow: 0 0 8px #00ff41 !important;
+ letter-spacing: 1px !important;
+ margin: 4px !important;
+ }
+
+ .neon-btn:hover {
+ background: rgba(0,255,65,0.1) !important;
+ box-shadow: 0 0 20px rgb(0 255 65 / 60%) !important;
+ animation: pixel-blink 0.5s infinite !important;
+ }
+
+ .neon-btn:disabled {
+ background: #0d1117 !important;
+ border-color: #555 !important;
+ color: #555 !important;
+ text-shadow: none !important;
+ cursor: not-allowed !important;
+ }
+
+ .neon-btn.danger {
+ border-color: #ff073a !important;
+ color: #ff073a !important;
+ text-shadow: 0 0 8px #ff073a !important;
+ }
+
+ .neon-btn.danger:hover {
+ background: rgba(255, 7, 58, 0.1) !important;
+ box-shadow: 0 0 20px rgb(255 7 58 / 60%) !important;
+ }
+
+ .neon-btn.warning {
+ border-color: #ff6b35 !important;
+ color: #ff6b35 !important;
+ text-shadow: 0 0 8px #ff6b35 !important;
+ }
+
+ .neon-btn.warning:hover {
+ background: rgba(255, 107, 53, 0.1) !important;
+ box-shadow: 0 0 20px rgb(255 107 53 / 60%) !important;
+ }
+
+ .neon-input {
+ background: #16213e !important;
+ border: 2px solid #00ff41 !important;
+ border-radius: 0 !important;
+ color: #00ff41 !important;
+ padding: 6px 10px !important;
+ font-family: 'Press Start 2P', monospace !important;
+ font-size: 8px !important;
+ text-shadow: 0 0 5px #00ff41 !important;
+ }
+
+ .neon-input:focus {
+ outline: none !important;
+ box-shadow: 0 0 15px rgb(0 255 65 / 60%) !important;
+ animation: pixel-blink 0.5s infinite !important;
+ }
+
+ .neon-select {
+ background: #16213e !important;
+ border: 2px solid #00ff41 !important;
+ border-radius: 0 !important;
+ color: #00ff41 !important;
+ padding: 4px 8px !important;
+ font-family: 'Press Start 2P', monospace !important;
+ font-size: 7px !important;
+ text-shadow: 0 0 5px #00ff41 !important;
+ }
+
+ .neon-checkbox {
+ accent-color: #00ff41 !important;
+ transform: scale(1.2) !important;
+ margin-right: 8px !important;
+ }
+
+ /* Enhanced Batch Control Styles */
+ .batch-control-group {
+ display: flex !important;
+ align-items: center !important;
+ gap: 8px !important;
+ margin: 5px 0 !important;
+ padding: 8px !important;
+ background: rgba(0, 255, 65, 0.05) !important;
+ border: 1px solid rgba(0, 255, 65, 0.3) !important;
+ border-radius: 3px !important;
+ }
+
+ .batch-control-header {
+ text-align: center !important;
+ margin-bottom: 10px !important;
+ padding: 5px !important;
+ border-bottom: 1px solid rgba(0, 255, 65, 0.3) !important;
+ }
+
+ .batch-control-label {
+ color: #00ff41 !important;
+ font-family: 'Press Start 2P', monospace !important;
+ font-size: 6px !important;
+ text-shadow: 0 0 3px #00ff41 !important;
+ white-space: nowrap !important;
+ }
+
+ .batch-mode-selection {
+ margin: 10px 0 !important;
+ }
+
+ .batch-mode-option {
+ margin: 8px 0 !important;
+ padding: 6px !important;
+ background: rgba(0, 255, 65, 0.03) !important;
+ border: 1px solid rgba(0, 255, 65, 0.2) !important;
+ border-radius: 3px !important;
+ transition: all 0.3s ease !important;
+ }
+
+ .batch-mode-option:hover {
+ background: rgba(0, 255, 65, 0.08) !important;
+ border-color: rgba(0, 255, 65, 0.4) !important;
+ }
+
+ .batch-mode-label {
+ color: #00ff41 !important;
+ font-family: 'Press Start 2P', monospace !important;
+ font-size: 6px !important;
+ text-shadow: 0 0 3px #00ff41 !important;
+ margin-left: 8px !important;
+ }
+
+ .neon-radio {
+ accent-color: #00ff41 !important;
+ transform: scale(1.2) !important;
+ margin-right: 8px !important;
+ }
+
+ .batch-manual-controls {
+ display: flex !important;
+ align-items: center !important;
+ gap: 8px !important;
+ margin: 8px 0 !important;
+ padding: 8px !important;
+ background: rgba(0, 255, 65, 0.05) !important;
+ border: 1px solid rgba(0, 255, 65, 0.3) !important;
+ border-radius: 3px !important;
+ }
+
+ .batch-size-control {
+ display: flex !important;
+ align-items: center !important;
+ gap: 2px !important;
+ border: 1px solid #00ff41 !important;
+ border-radius: 3px !important;
+ background: #16213e !important;
+ overflow: hidden !important;
+ }
+
+ .batch-adjust-btn {
+ width: 20px !important;
+ height: 24px !important;
+ background: #16213e !important;
+ border: none !important;
+ color: #00ff41 !important;
+ font-family: 'Press Start 2P', monospace !important;
+ font-size: 8px !important;
+ cursor: pointer !important;
+ transition: all 0.3s ease !important;
+ text-shadow: 0 0 3px #00ff41 !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ }
+
+ .batch-adjust-btn:hover {
+ background: rgba(0, 255, 65, 0.1) !important;
+ box-shadow: 0 0 5px rgba(0, 255, 65, 0.3) !important;
+ }
+
+ .batch-adjust-btn:active {
+ background: rgba(0, 255, 65, 0.2) !important;
+ transform: scale(0.95) !important;
+ }
+
+ .batch-size-input {
+ width: 50px !important;
+ height: 24px !important;
+ background: #16213e !important;
+ border: none !important;
+ color: #00ff41 !important;
+ padding: 0 4px !important;
+ font-family: 'Press Start 2P', monospace !important;
+ font-size: 6px !important;
+ text-align: center !important;
+ text-shadow: 0 0 3px #00ff41 !important;
+ outline: none !important;
+ /* Hide browser default spinner buttons */
+ -webkit-appearance: none !important;
+ -moz-appearance: textfield !important;
+ }
+
+ /* Hide Chrome spinner buttons */
+ .batch-size-input::-webkit-outer-spin-button,
+ .batch-size-input::-webkit-inner-spin-button {
+ -webkit-appearance: none !important;
+ margin: 0 !important;
+ }
+
+ /* Hide Firefox spinner buttons */
+ .batch-size-input[type=number] {
+ -moz-appearance: textfield !important;
+ }
+
+ .status-info {
+ color: #00ff41 !important;
+ }
+
+ .status-warning {
+ color: #ff6b35 !important;
+ }
+
+ .neon-panel {
+ background: rgba(22, 33, 62, 0.3) !important;
+ border: 1px solid #00ff41 !important;
+ border-radius: 0 !important;
+ padding: 15px !important;
+ margin: 10px 0 !important;
+ box-shadow: inset 0 0 15px rgba(0, 255, 65, 0.1) !important;
+ }
+
+ .neon-text {
+ color: #00ff41 !important;
+ text-shadow: 0 0 5px #00ff41 !important;
+ font-family: 'Press Start 2P', monospace !important;
+ }
+
+ .neon-text.success {
+ color: #39ff14 !important;
+ text-shadow: 0 0 5px #39ff14 !important;
+ }
+
+ .neon-text.warning {
+ color: #ff6b35 !important;
+ text-shadow: 0 0 5px #ff6b35 !important;
+ }
+
+ .neon-text.danger {
+ color: #ff073a !important;
+ text-shadow: 0 0 5px #ff073a !important;
+ }
+
+ .neon-text.info {
+ color: #00ccff !important;
+ text-shadow: 0 0 5px #00ccff !important;
+ }
+
+ /* Custom scrollbar for debug console */
+ #debugConsole::-webkit-scrollbar {
+ width: 12px;
+ }
+
+ #debugConsole::-webkit-scrollbar-track {
+ background: #16213e;
+ border: 1px solid #00ff41;
+ }
+
+ #debugConsole::-webkit-scrollbar-thumb {
+ background: #00ff41;
+ border-radius: 0;
+ box-shadow: 0 0 10px #00ff41;
+ }
+
+ #debugConsole::-webkit-scrollbar-thumb:hover {
+ background: #39ff14;
+ box-shadow: 0 0 15px #39ff14;
+ }
+
+ /* Animations */
+ @keyframes neon-pulse {
+ 0% { box-shadow: 0 0 30px rgb(0 255 65 / 50%), inset 0 0 30px rgb(0 255 65 / 10%), 0 0 0 1px #00ff41; }
+ 100% { box-shadow: 0 0 40px rgb(0 255 65 / 70%), inset 0 0 40px rgb(0 255 65 / 15%), 0 0 0 1px #00ff41; }
+ }
+
+ @keyframes pixel-blink {
+ 0%, 50% { opacity: 1; }
+ 51%, 100% { opacity: 0.7; }
+ }
+
+ @keyframes scanline {
+ 0% { transform: translateY(-100%); }
+ 100% { transform: translateY(400px); }
+ }
+
+ @keyframes text-glow {
+ 0% { text-shadow: 0 0 15px #00ff41; }
+ 100% { text-shadow: 0 0 25px #00ff41, 0 0 35px #00ff41; }
+ }
+ `;
+
+ if (!document.getElementById('auto-repair-neon-styles')) {
+ document.head.appendChild(neonStyles);
+ }
+
+ container.innerHTML = `
+
+
+
+
+
+ ${Utils.t('autonomousModeActive')}
+
+
+ Charges: 0/1 (cooldown: 31s)
+
+
+ Token: Initializing...
+
+
+ System: AUTONOMOUS | Token: GENERATOR | Auto-refresh: ON
+
+
+ Auto-Batch: ON | Size: 5 | Opt: ON
+
+
+
+
+
+ 📁 ${Utils.t('loadFromFile')}
+
+
+
+ 🔧 ${Utils.t('repairPixels')}
+
+
+
+ 🎯 Force Token
+
+
+
+
+
+
+ ${Utils.t('enableAutoRepair')} (Enhanced)
+
+
+
+
+ ${Utils.t('repairInterval')}:
+ seconds
+
+
+
+
+ Auto Token Refresh
+
+
+ Generator
+ Hybrid
+ Manual
+
+
+
+
+
+
+
+
+
+
+
+
+
Batch Size:
+
+ -
+ +
+
+
pixels
+
+
+
+ 🔧 Repair Transparent Pixels
+
+
+
+
+
+
Image: Not loaded
+
Position: Not set
+
Colors: 0 available
+
Batch Mode: Auto (${state.currentBatchSize} pixels)
+
+
+
+
+
+
+ 📋 ${Utils.t('debug')} (Enhanced System)
+
+
+ ${Utils.t('clearDebug')}
+
+
+
+
+
[Ready] WPlace Autonomous Repair Tool v3.0
+
[Info] NEW Turnstile implementation active
+
[Info] Enhanced token management with preloading
+
[Info] ${Utils.t('tokenSystemReady')}
+
+
+
-
WPlace AutoBOT
-This project was fork from https://github.com/DarkModde/WPlace-AutoBOT
+This project was forked from https://github.com/DarkModde/WPlace-AutoBOT
- Consider checking out our discord: https://discord.gg/knkNRYyQcm
+Consider checking out our Discord: https://discord.gg/knkNRYyQcm
- Practical scripts with intuitive menus to make your life easier on WPlace !WPlace !
- If you're wondering—yes! These scripts were Developed by a team consisting of Brazilians, Vietnamese, and Indonesians. HUEHUE!
-
-
-
-
----
-
-🚀┃How to use the scripts:
-
+If you're wondering—yes! These scripts were Developed by a team consisting of Brazilians, Vietnamese, and Indonesians. HUEHUE!
- It’s super easy: copy one of the codes below, paste it into your browser’s bookmarks bar,
-
- 📖┃Tutorials
+>Load Temporary Add-on: Click on the Load Temporary Add-on... button.
+>Select File: Navigate into the folder you extracted and select the manifest.json file.
-1. None of the scripts will work if you close the browser tab. You must keep the WPlace tab open, even if it's in the background.
-> 2. Never run both scripts on the same page — this can bug your WPlace. If it happens, just refresh the page!
-> 3. If the script doesn’t detect the available colors, just click the "Paint" button to show them — only then start the Auto-Imager.
+For Mobile (Android Only):
+You can use the extension on Android using a browser that supports Chrome extensions, such as Kiwi Browser.
-
-
----
+📋┃To-do
+[x] Making AutoFarm working
-### 📋┃To-do
-
-- [x] Making AutoFarm working
- [ ] Merge both scripts into one
+
- [x] Add Overlay system
+
- [x] Add Cross Tiles Support
+
- [x] Add AutoCaptcha Solver
+
- [x] Add Correct Color Pixel Skip
+
- [x] Separate Css
----
-
-- Contributors:
-
-
` : ''}
+ 
+ 
+ 
+ No attacks detected - All secure
+ 
-
- 
-
- 
-
+