diff --git a/Auto-Image.js b/Auto-Image.js index 44ec6df..925c2ae 100644 --- a/Auto-Image.js +++ b/Auto-Image.js @@ -1,307 +1,584 @@ (async () => { + // CONFIGURATION CONSTANTS const CONFIG = { - START_X: 742, - START_Y: 1148, - PIXELS_PER_LINE: 100, - DELAY: 1000, + COOLDOWN_DEFAULT: 31000, + TRANSPARENCY_THRESHOLD: 100, + WHITE_THRESHOLD: 250, + LOG_INTERVAL: 10, THEME: { - primary: '#000000', - secondary: '#111111', - accent: '#222222', - text: '#ffffff', - highlight: '#775ce3', - success: '#00ff00', - error: '#ff0000' - } + primary: "#000000", + secondary: "#111111", + accent: "#222222", + text: "#ffffff", + highlight: "#775ce3", + success: "#00ff00", + error: "#ff0000", + warning: "#ffaa00", + }, }; + // BILINGUAL TEXT STRINGS + const TEXTS = { + pt: { + title: "WPlace Auto-Image", + initBot: "Iniciar Auto-BOT", + uploadImage: "Upload da Imagem", + resizeImage: "Redimensionar Imagem", + selectPosition: "Selecionar Posição", + startPainting: "Iniciar Pintura", + stopPainting: "Parar Pintura", + checkingColors: "🔍 Verificando cores disponíveis...", + noColorsFound: "❌ Abra a paleta de cores no site e tente novamente!", + colorsFound: "✅ {count} cores disponíveis encontradas", + loadingImage: "🖼️ Carregando imagem...", + imageLoaded: "✅ Imagem carregada com {count} pixels válidos", + imageError: "❌ Erro ao carregar imagem", + selectPositionAlert: + "Pinte o primeiro pixel na localização onde deseja que a arte comece!", + waitingPosition: "👆 Aguardando você pintar o pixel de referência...", + positionSet: "✅ Posição definida com sucesso!", + positionTimeout: "❌ Tempo esgotado para selecionar posição", + startPaintingMsg: "🎨 Iniciando pintura...", + paintingProgress: "🧱 Progresso: {painted}/{total} pixels...", + noCharges: "⌛ Sem cargas. Aguardando {time}...", + paintingStopped: "⏹️ Pintura interrompida pelo usuário", + paintingComplete: "✅ Pintura concluída! {count} pixels pintados.", + paintingError: "❌ Erro durante a pintura", + missingRequirements: + "❌ Carregue uma imagem e selecione uma posição primeiro", + progress: "Progresso", + pixels: "Pixels", + charges: "Cargas", + estimatedTime: "Tempo estimado", + initMessage: "Clique em 'Iniciar Auto-BOT' para começar", + waitingInit: "Aguardando inicialização...", + resizeSuccess: "✅ Imagem redimensionada para {width}x{height}", + paintingPaused: "⏸️ Pintura pausada na posição X: {x}, Y: {y}", + captchaNeeded: + "❗ Token CAPTCHA necessário. Pinte um pixel manualmente para continuar.", + saveData: "Salvar Progresso", + loadData: "Carregar Progresso", + autoSaved: "✅ Progresso salvo automaticamente", + dataLoaded: "✅ Progresso carregado com sucesso", + noSavedData: "❌ Nenhum progresso salvo encontrado", + savedDataFound: "✅ Progresso salvo encontrado! Carregar para continuar?", + savedDate: "Salvo em: {date}", + clickLoadToContinue: "Clique em 'Carregar Progresso' para continuar.", + }, + en: { + title: "WPlace Auto-Image", + initBot: "Start Auto-BOT", + uploadImage: "Upload Image", + resizeImage: "Resize Image", + selectPosition: "Select Position", + startPainting: "Start Painting", + stopPainting: "Stop Painting", + checkingColors: "🔍 Checking available colors...", + noColorsFound: "❌ Open the color palette on the site and try again!", + colorsFound: "✅ {count} available colors found", + loadingImage: "🖼️ Loading image...", + imageLoaded: "✅ Image loaded with {count} valid pixels", + imageError: "❌ Error loading image", + selectPositionAlert: + "Paint the first pixel at the location where you want the art to start!", + waitingPosition: "👆 Waiting for you to paint the reference pixel...", + positionSet: "✅ Position set successfully!", + positionTimeout: "❌ Timeout for position selection", + startPaintingMsg: "🎨 Starting painting...", + paintingProgress: "🧱 Progress: {painted}/{total} pixels...", + noCharges: "⌛ No charges. Waiting {time}...", + paintingStopped: "⏹️ Painting stopped by user", + paintingComplete: "✅ Painting complete! {count} pixels painted.", + paintingError: "❌ Error during painting", + missingRequirements: "❌ Load an image and select a position first", + progress: "Progress", + pixels: "Pixels", + charges: "Charges", + estimatedTime: "Estimated time", + initMessage: "Click 'Start Auto-BOT' to begin", + waitingInit: "Waiting for initialization...", + resizeSuccess: "✅ Image resized to {width}x{height}", + paintingPaused: "⏸️ Painting paused at position X: {x}, Y: {y}", + captchaNeeded: + "❗ CAPTCHA token needed. Paint one pixel manually to continue.", + saveData: "Save Progress", + loadData: "Load Progress", + autoSaved: "✅ Progress saved automatically", + dataLoaded: "✅ Progress loaded successfully", + noSavedData: "❌ No saved progress found", + savedDataFound: "✅ Saved progress found! Load to continue?", + savedDate: "Saved on: {date}", + clickLoadToContinue: "Click 'Load Progress' to continue.", + }, + }; + + // GLOBAL STATE const state = { running: false, - paintedCount: 0, - charges: { count: 0, max: 80, cooldownMs: 30000 }, - userInfo: null, - lastPixel: null, + imageLoaded: false, + processing: false, + totalPixels: 0, + paintedPixels: 0, + availableColors: [], + currentCharges: 0, + cooldown: CONFIG.COOLDOWN_DEFAULT, + imageData: null, + stopFlag: false, + colorsChecked: false, + startPosition: null, + selectingPosition: false, + region: null, minimized: false, - menuOpen: false, - language: 'en', - autoRefresh: true, - pausedForManual: false + lastPosition: { x: 0, y: 0 }, + estimatedTime: 0, + language: "en", }; - const sleep = ms => new Promise(r => setTimeout(r, ms)); - const 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 sleep(interval); - } - return null; - }; - - const originalFetch = window.fetch; + // Global variable to store the captured CAPTCHA token. let capturedCaptchaToken = null; - window.fetch = async (url, options = {}) => { - if (typeof url === 'string' && url.includes('https://backend.wplace.live/s0/pixel/')) { + + // Intercept the original window.fetch function to "listen" for network requests. + const originalFetch = window.fetch; + window.fetch = async (url, options) => { + // Check if the request is for painting a pixel on wplace. + if ( + typeof url === "string" && + url.includes("https://backend.wplace.live/s0/pixel/") + ) { try { - const payload = JSON.parse(options.body || '{}'); + const payload = JSON.parse(options.body); + // If the request body contains the 't' field, it's our CAPTCHA token. if (payload.t) { - console.log('✅ CAPTCHA Token Captured:', payload.t); + console.log("✅ CAPTCHA Token Captured:", payload.t); + // Store the token for our bot to use. capturedCaptchaToken = payload.t; - if (state.pausedForManual) { - state.pausedForManual = false; - state.running = true; - updateUI( - state.language === 'pt' ? '🚀 Pintura reiniciada!' : '🚀 Painting resumed!', - 'success' + // Notify the user that the token is captured and they can start the bot. + if ( + document + .querySelector("#statusText") + ?.textContent.includes("CAPTCHA") + ) { + Utils.showAlert( + "Token captured successfully! You can start the bot now.", + "success" ); - paintLoop(); + updateUI("colorsFound", "success", { + count: state.availableColors.length, + }); } } } catch (e) { + /* Ignore errors if the request body isn't valid JSON */ } } + // Finally, execute the original request, whether we inspected it or not. return originalFetch(url, options); }; - const fetchAPI = async (url, options = {}) => { + async function detectLanguage() { try { - const res = await fetch(url, { - credentials: 'include', - ...options - }); - return await res.json(); - } catch (e) { - return null; - } - }; - - const getRandomPosition = () => ({ - x: Math.floor(Math.random() * CONFIG.PIXELS_PER_LINE), - y: Math.floor(Math.random() * CONFIG.PIXELS_PER_LINE) - }); - - const paintPixel = async (x, y) => { - const randomColor = Math.floor(Math.random() * 31) + 1; - const url = `https://backend.wplace.live/s0/pixel/${CONFIG.START_X}/${CONFIG.START_Y}`; - const payload = JSON.stringify({ coords: [x, y], colors: [randomColor], t: capturedCaptchaToken }); - try { - const res = await originalFetch(url, { - method: 'POST', - headers: { 'Content-Type': 'text/plain;charset=UTF-8' }, - credentials: 'include', - body: payload - }); - if (res.status === 403) { - console.error('❌ 403 Forbidden. CAPTCHA token might be invalid or expired.'); - capturedCaptchaToken = null; - stoppedForToken = true; - return 'token_error'; - } - const data = await res.json(); - return data; - } catch (e) { - return null; - } - }; - - const getCharge = async () => { - const data = await fetchAPI('https://backend.wplace.live/me'); - if (data) { - state.userInfo = data; - state.charges = { - count: Math.floor(data.charges.count), - max: Math.floor(data.charges.max), - cooldownMs: data.charges.cooldownMs - }; - if (state.userInfo.level) { - state.userInfo.level = Math.floor(state.userInfo.level); - } - } - return state.charges; - }; - - const detectUserLocation = async () => { - try { - const response = await fetch('https://ipapi.co/json/'); + const response = await fetch("https://ipapi.co/json/"); const data = await response.json(); - if (data.country === 'BR') { - state.language = 'pt'; - } else if (data.country === 'US') { - state.language = 'en'; - } else { - state.language = 'en'; - } + state.language = data.country === "BR" ? "pt" : "en"; } catch { - state.language = 'en'; + state.language = "en"; } - }; + } - const paintLoop = async () => { - while (state.running) { - const { count, cooldownMs } = state.charges; - - if (count < 1 && state.autoRefresh) { - if (!state.pausedForManual) { - updateUI( - state.language === 'pt' - ? '⚡ Aguardando pelo menos 2 cargas para auto-refresh...' - : 'Waiting for at least 2 charges for auto-refresh...', - 'status' - ); - state.pausedForManual = true; - } - while (state.charges.count < 2) { - await sleep(60000); - await getCharge(); - updateStats(); - } - state.pausedForManual = false; - updateUI( - state.language === 'pt' ? '🔋 Cargas suficientes. Retomando...' : 'Sufficient charges. Resuming...', - 'success' - ); - continue; - } else if (count < 1) { - // manual mode fallback - updateUI(state.language === 'pt' ? `⌛ Sem cargas. Esperando ${Math.ceil(cooldownMs/1000)}s...` : `⌛ No charges. Waiting ${Math.ceil(cooldownMs/1000)}s...`, 'status'); - await sleep(cooldownMs); - await getCharge(); - continue; - } + // UTILITY FUNCTIONS + const Utils = { + sleep: (ms) => new Promise((r) => setTimeout(r, ms)), - const randomPos = getRandomPosition(); - const paintResult = await paintPixel(randomPos.x, randomPos.y); - if (paintResult === 'token_error') { - if (state.autoRefresh) { - await getCharge(); - if (state.charges.count < 2) { - if (!state.pausedForManual) { - updateUI( - state.language === 'pt' - ? '⚡ Aguardando pelo menos 2 cargas para auto-refresh...' - : 'Waiting for at least 2 charges for auto-refresh...', - 'status' - ); - state.pausedForManual = true; - } - while (state.charges.count < 2) { - await sleep(60000); - await getCharge(); - updateStats(); - } - state.pausedForManual = false; - } - updateUI( - state.language === 'pt' - ? '❌ Token expirado. Aguardando elemento Paint...' - : '❌ CAPTCHA token expired. Waiting for Paint button...', - 'error' - ); - const mainPaintBtn = await waitForSelector('button.btn.btn-primary.btn-lg, button.btn-primary.sm\\:btn-xl'); - if (mainPaintBtn) mainPaintBtn.click(); - await sleep(500); - updateUI( - state.language === 'pt' ? 'Selecionando transparente...' : 'Selecting transparent...', - 'status' - ); - const transBtn = await waitForSelector('button#color-0'); - if (transBtn) transBtn.click(); - await sleep(500); - const canvas = await waitForSelector('canvas'); - if (canvas) { - 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); - const moveEvt = new MouseEvent('mousemove', { - clientX: centerX, - clientY: centerY, - bubbles: true - }); - canvas.dispatchEvent(moveEvt); - const keyDown = new KeyboardEvent('keydown', { key: ' ', code: 'Space', bubbles: true }); - const keyUp = new KeyboardEvent('keyup', { key: ' ', code: 'Space', bubbles: true }); - canvas.dispatchEvent(keyDown); - canvas.dispatchEvent(keyUp); - } - await sleep(500); - updateUI( - state.language === 'pt' ? 'Confirmando pintura...' : 'Confirming paint...', - 'status' - ); - let confirmBtn = await 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; - } - confirmBtn?.click(); - } else { - // insufficient charges or auto-refresh disabled - if (state.autoRefresh && state.charges.count < 2) { - updateUI( - state.language === 'pt' - ? '⚡ Cargas insuficientes para auto-refresh. Por favor, clique manualmente.' - : 'Insufficient charges for auto-refresh. Please click manually.', - 'error' - ); - } - if (!state.pausedForManual) { - updateUI( - state.language === 'pt' - ? 'Auto-refresh desativado. Por favor, clique no botão pintura manualmente.' - : 'Auto-refresh disabled. Please click the Paint button manually.', - 'status' - ); - state.pausedForManual = true; - } - state.running = false; - return; - } - await sleep(1000); - continue; - } - - if (paintResult?.painted === 1) { - state.paintedCount++; - state.lastPixel = { - x: CONFIG.START_X + randomPos.x, - y: CONFIG.START_Y + randomPos.y, - time: new Date() + 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) + ), + + 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]); }; - state.charges.count--; - - document.getElementById('paintEffect').style.animation = 'pulse 0.5s'; - setTimeout(() => { - document.getElementById('paintEffect').style.animation = ''; - }, 500); - - updateUI(state.language === 'pt' ? '✅ Pixel pintado!' : '✅ Pixel painted!', 'success'); - } else { - updateUI(state.language === 'pt' ? '❌ Falha ao pintar' : '❌ Failed to paint', 'error'); - } + input.click(); + }), - await sleep(CONFIG.DELAY); - updateStats(); - } + extractAvailableColors: () => { + const colorElements = document.querySelectorAll('[id^="color-"]'); + return Array.from(colorElements) + .filter((el) => !el.querySelector("svg")) + .filter((el) => { + const id = parseInt(el.id.replace("color-", "")); + return id !== 0 && id !== 5; + }) + .map((el) => { + const id = parseInt(el.id.replace("color-", "")); + const rgbStr = el.style.backgroundColor.match(/\d+/g); + const rgb = rgbStr ? rgbStr.map(Number) : [0, 0, 0]; + return { id, rgb }; + }); + }, + + 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; + }, + + // Save/Load Progress Functions + saveProgress: () => { + try { + const progressData = { + version: "1.0", + timestamp: Date.now(), + state: { + imageLoaded: state.imageLoaded, + totalPixels: state.totalPixels, + paintedPixels: state.paintedPixels, + lastPosition: state.lastPosition, + startPosition: state.startPosition, + region: state.region, + paintedMap: state.paintedMap, + imageData: state.imageData, + availableColors: state.availableColors, + colorsChecked: state.colorsChecked, + language: state.language + } + }; + + localStorage.setItem('wplace-auto-image-progress', JSON.stringify(progressData)); + console.log('✅ Progress saved successfully'); + return true; + } catch (error) { + console.error('❌ Error saving progress:', error); + return false; + } + }, + + loadProgress: () => { + try { + const savedData = localStorage.getItem('wplace-auto-image-progress'); + if (!savedData) { + return null; + } + + const progressData = JSON.parse(savedData); + + // Validate data structure + if (!progressData.version || !progressData.state) { + return null; + } + + return progressData; + } catch (error) { + console.error('❌ Error loading progress:', error); + return null; + } + }, + + restoreProgress: (progressData) => { + try { + const savedState = progressData.state; + + // Restore state + state.imageLoaded = savedState.imageLoaded; + state.totalPixels = savedState.totalPixels; + state.paintedPixels = savedState.paintedPixels; + state.lastPosition = savedState.lastPosition || { x: 0, y: 0 }; + state.startPosition = savedState.startPosition; + state.region = savedState.region; + state.paintedMap = savedState.paintedMap; + state.imageData = savedState.imageData; + state.availableColors = savedState.availableColors; + state.language = savedState.language; + state.colorsChecked = savedState.availableColors && savedState.availableColors.length > 0; + + // Update UI to reflect restored state + if (state.imageLoaded) { + const initBotBtn = document.querySelector("#initBotBtn"); + const uploadBtn = document.querySelector("#uploadBtn"); + const resizeBtn = document.querySelector("#resizeBtn"); + const selectPosBtn = document.querySelector("#selectPosBtn"); + const startBtn = document.querySelector("#startBtn"); + const saveBtn = document.querySelector("#saveBtn"); + const progressBar = document.querySelector("#progressBar"); + + // Show/hide appropriate buttons based on state + if (state.colorsChecked) { + initBotBtn.style.display = "none"; + uploadBtn.disabled = false; + selectPosBtn.disabled = false; + } else { + initBotBtn.style.display = "block"; + uploadBtn.disabled = true; + selectPosBtn.disabled = true; + } + + resizeBtn.disabled = false; + saveBtn.disabled = false; + + if (state.startPosition && state.region) { + selectPosBtn.disabled = false; + startBtn.disabled = false; + } + + // Update progress bar + const progress = state.totalPixels > 0 ? Math.round((state.paintedPixels / state.totalPixels) * 100) : 0; + progressBar.style.width = `${progress}%`; + + // Update status message based on progress + if (state.paintedPixels > 0) { + if (state.lastPosition.x > 0 || state.lastPosition.y > 0) { + updateUI("paintingPaused", "warning", { + x: state.lastPosition.x, + y: state.lastPosition.y + }); + } else { + updateUI("paintingProgress", "default", { + painted: state.paintedPixels, + total: state.totalPixels, + }); + } + } else { + updateUI("imageLoaded", "success", { count: state.totalPixels }); + } + } + + // Update stats to show current progress + updateStats(); + return true; + } catch (error) { + console.error('❌ Error restoring progress:', error); + return false; + } + }, + + clearProgress: () => { + try { + localStorage.removeItem('wplace-auto-image-progress'); + console.log('✅ Progress data cleared'); + return true; + } catch (error) { + console.error('❌ Error clearing progress:', error); + return false; + } + }, + + hasSavedProgress: () => { + return localStorage.getItem('wplace-auto-image-progress') !== null; + }, + + showAlert: (message, type = "info") => { + const alert = document.createElement("div"); + alert.style.position = "fixed"; + alert.style.top = "20px"; + alert.style.left = "50%"; + alert.style.transform = "translateX(-50%)"; + alert.style.padding = "15px 20px"; + alert.style.background = CONFIG.THEME[type] || CONFIG.THEME.accent; + alert.style.color = CONFIG.THEME.text; + alert.style.borderRadius = "5px"; + alert.style.zIndex = "10000"; + alert.style.boxShadow = "0 3px 10px rgba(0,0,0,0.3)"; + alert.style.display = "flex"; + alert.style.alignItems = "center"; + alert.style.gap = "10px"; + + const icons = { + error: "exclamation-circle", + success: "check-circle", + warning: "exclamation-triangle", + info: "info-circle", + }; + + alert.innerHTML = ` + + ${message} + `; + + document.body.appendChild(alert); + + setTimeout(() => { + alert.style.opacity = "0"; + alert.style.transition = "opacity 0.5s"; + setTimeout(() => alert.remove(), 500); + }, 3000); + }, + + calculateEstimatedTime: (remainingPixels, currentCharges, cooldown) => { + const pixelsPerCharge = currentCharges > 0 ? currentCharges : 0; + const fullCycles = Math.ceil( + (remainingPixels - pixelsPerCharge) / Math.max(currentCharges, 1) + ); + return fullCycles * cooldown + (remainingPixels - 1) * 100; + }, + + isWhitePixel: (r, g, b) => { + return ( + r >= CONFIG.WHITE_THRESHOLD && + g >= CONFIG.WHITE_THRESHOLD && + b >= CONFIG.WHITE_THRESHOLD + ); + }, + + t: (key, params = {}) => { + let text = TEXTS[state.language][key] || TEXTS.en[key] || key; + for (const [k, v] of Object.entries(params)) { + text = text.replace(`{${k}}`, v); + } + return text; + }, }; - const createUI = () => { - if (state.menuOpen) return; - state.menuOpen = true; + // WPLACE API SERVICE + const WPlaceService = { + async paintPixelInRegion(regionX, regionY, pixelX, pixelY, color) { + try { + // Construct the payload including the captured 't' token. + const payload = { + coords: [pixelX, pixelY], + colors: [color], + t: capturedCaptchaToken, + }; + const res = await fetch( + `https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`, + { + method: "POST", + headers: { "Content-Type": "text/plain;charset=UTF-8" }, + credentials: "include", + body: JSON.stringify(payload), + } + ); - const fontAwesome = document.createElement('link'); - fontAwesome.rel = 'stylesheet'; - fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'; + // If we get a 403 Forbidden error, our token is likely expired. + if (res.status === 403) { + console.error( + "❌ 403 Forbidden. CAPTCHA token might be invalid or expired." + ); + capturedCaptchaToken = null; // Invalidate our stored token. + return "token_error"; // Return a special status to stop the bot. + } + + 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 { + charges: data.charges?.count || 0, + cooldown: data.charges?.cooldownMs || CONFIG.COOLDOWN_DEFAULT, + }; + } catch { + return { charges: 0, cooldown: CONFIG.COOLDOWN_DEFAULT }; + } + }, + }; + + class ImageProcessor { + constructor(imageSrc) { + this.imageSrc = imageSrc; + this.img = new Image(); + this.canvas = document.createElement("canvas"); + this.ctx = this.canvas.getContext("2d"); + this.previewCanvas = document.createElement("canvas"); + this.previewCtx = this.previewCanvas.getContext("2d"); + } + + async load() { + return new Promise((resolve, reject) => { + this.img.onload = () => { + 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; + }); + } + + getPixelData() { + return this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height) + .data; + } + + getDimensions() { + return { width: this.canvas.width, height: this.canvas.height }; + } + + resize(newWidth, newHeight) { + const tempCanvas = document.createElement("canvas"); + tempCanvas.width = newWidth; + tempCanvas.height = newHeight; + const tempCtx = tempCanvas.getContext("2d"); + + tempCtx.drawImage(this.img, 0, 0, newWidth, newHeight); + + this.canvas.width = newWidth; + this.canvas.height = newHeight; + this.ctx.drawImage(tempCanvas, 0, 0); + + return this.getPixelData(); + } + + generatePreview(newWidth, newHeight) { + this.previewCanvas.width = newWidth; + this.previewCanvas.height = newHeight; + this.previewCtx.imageSmoothingEnabled = false; + this.previewCtx.drawImage(this.img, 0, 0, newWidth, newHeight); + return this.previewCanvas.toDataURL(); + } + } + + function findClosestColor(rgb, palette) { + return palette.reduce( + (closest, current) => { + const currentDistance = Utils.colorDistance(rgb, current.rgb); + return currentDistance < closest.distance + ? { color: current, distance: currentDistance } + : closest; + }, + { color: palette[0], distance: Utils.colorDistance(rgb, palette[0].rgb) } + ).color.id; + } + + async function createUI() { + await detectLanguage(); + + const fontAwesome = document.createElement("link"); + fontAwesome.rel = "stylesheet"; + fontAwesome.href = + "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"; document.head.appendChild(fontAwesome); - const style = document.createElement('style'); + const style = document.createElement("style"); style.textContent = ` @keyframes pulse { - 0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }n + 0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); } } @@ -309,17 +586,17 @@ from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } - .wplace-bot-panel { + #wplace-image-bot-container { position: fixed; top: 20px; right: 20px; - width: 250px; + width: 300px; background: ${CONFIG.THEME.primary}; border: 1px solid ${CONFIG.THEME.accent}; border-radius: 8px; padding: 0; box-shadow: 0 5px 15px rgba(0,0,0,0.5); - z-index: 9999; + z-index: 9998; font-family: 'Segoe UI', Roboto, sans-serif; color: ${CONFIG.THEME.text}; animation: slideIn 0.4s ease-out; @@ -359,15 +636,15 @@ } .wplace-content { padding: 15px; - display: ${state.minimized ? 'none' : 'block'}; + display: block; } .wplace-controls { display: flex; + flex-direction: column; gap: 10px; margin-bottom: 15px; } .wplace-btn { - flex: 1; padding: 10px; border: none; border-radius: 6px; @@ -386,10 +663,28 @@ background: ${CONFIG.THEME.accent}; color: white; } + .wplace-btn-upload { + background: ${CONFIG.THEME.secondary}; + color: white; + border: 1px dashed ${CONFIG.THEME.text}; + } + .wplace-btn-start { + background: ${CONFIG.THEME.success}; + color: white; + } .wplace-btn-stop { background: ${CONFIG.THEME.error}; color: white; } + .wplace-btn-select { + background: ${CONFIG.THEME.highlight}; + color: black; + } + .wplace-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + transform: none !important; + } .wplace-stats { background: ${CONFIG.THEME.secondary}; padding: 12px; @@ -408,6 +703,18 @@ gap: 6px; opacity: 0.8; } + .wplace-progress { + width: 100%; + background: ${CONFIG.THEME.secondary}; + border-radius: 4px; + margin: 10px 0; + overflow: hidden; + } + .wplace-progress-bar { + height: 10px; + background: ${CONFIG.THEME.highlight}; + transition: width 0.3s; + } .wplace-status { padding: 8px; border-radius: 4px; @@ -425,6 +732,10 @@ background: rgba(255, 0, 0, 0.1); color: ${CONFIG.THEME.error}; } + .status-warning { + background: rgba(255, 165, 0, 0.1); + color: orange; + } #paintEffect { position: absolute; top: 0; @@ -434,213 +745,850 @@ pointer-events: none; border-radius: 8px; } + .position-info { + font-size: 13px; + margin-top: 5px; + padding: 5px; + background: ${CONFIG.THEME.secondary}; + border-radius: 4px; + text-align: center; + } + .wplace-minimized .wplace-content { + display: none; + } + .resize-container { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: ${CONFIG.THEME.primary}; + padding: 20px; + border-radius: 8px; + z-index: 10000; + box-shadow: 0 0 20px rgba(0,0,0,0.5); + max-width: 90%; + max-height: 90%; + overflow: auto; + } + .resize-preview { + max-width: 100%; + max-height: 300px; + margin: 10px 0; + border: 1px solid ${CONFIG.THEME.accent}; + } + .resize-controls { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 15px; + } + .resize-slider { + width: 100%; + } + .resize-buttons { + display: flex; + gap: 10px; + } + .resize-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.7); + z-index: 9999; + display: none; + } `; document.head.appendChild(style); - const translations = { - pt: { - title: "WPlace Auto-Farm", - start: "Iniciar", - stop: "Parar", - ready: "Pronto para começar", - user: "Usuário", - pixels: "Pixels", - charges: "Cargas", - level: "Level" - }, - en: { - title: "WPlace Auto-Farm", - start: "Start", - stop: "Stop", - ready: "Ready to start", - user: "User", - pixels: "Pixels", - charges: "Charges", - level: "Level" - } - }; - - const t = translations[state.language] || translations.en; - - const panel = document.createElement('div'); - panel.className = 'wplace-bot-panel'; - panel.innerHTML = ` -
+ const container = document.createElement("div"); + container.id = "wplace-image-bot-container"; + container.innerHTML = `
- - ${t.title} + + ${Utils.t("title")}
-
- - + + + + + + + +
+ +
+
-
${state.language === 'pt' ? 'Carregando...' : 'Loading...'}
+
${Utils.t( + "initMessage" + )}
- ${t.ready} + ${Utils.t("waitingInit")}
`; - - document.body.appendChild(panel); - - const header = panel.querySelector('.wplace-header'); - let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; - + + const resizeContainer = document.createElement("div"); + resizeContainer.className = "resize-container"; + resizeContainer.innerHTML = ` +

${Utils.t( + "resizeImage" + )}

+
+ + + + +
+ + +
+
+ `; + + const resizeOverlay = document.createElement("div"); + resizeOverlay.className = "resize-overlay"; + + document.body.appendChild(container); + document.body.appendChild(resizeOverlay); + document.body.appendChild(resizeContainer); + + const header = container.querySelector(".wplace-header"); + let pos1 = 0, + pos2 = 0, + pos3 = 0, + pos4 = 0; + header.onmousedown = dragMouseDown; - + function dragMouseDown(e) { - if (e.target.closest('.wplace-header-btn')) return; - - e = e || window.event; + if (e.target.closest(".wplace-header-btn")) return; + e.preventDefault(); pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } - + function elementDrag(e) { - e = e || window.event; e.preventDefault(); pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; - panel.style.top = (panel.offsetTop - pos2) + "px"; - panel.style.left = (panel.offsetLeft - pos1) + "px"; + container.style.top = container.offsetTop - pos2 + "px"; + container.style.left = container.offsetLeft - pos1 + "px"; } - + function closeDragElement() { document.onmouseup = null; document.onmousemove = null; } - - const toggleBtn = panel.querySelector('#toggleBtn'); - const minimizeBtn = panel.querySelector('#minimizeBtn'); - const statusText = panel.querySelector('#statusText'); - const content = panel.querySelector('.wplace-content'); - const statsArea = panel.querySelector('#statsArea'); - - toggleBtn.addEventListener('click', () => { - state.running = !state.running; - - if (state.running && !capturedCaptchaToken) { - updateUI(state.language === 'pt' ? '❌ Token não capturado. Clique em qualquer pixel primeiro.' : '❌ CAPTCHA token not captured. Please click any pixel manually first.', 'error'); - state.running = false; - return; - } - - if (state.running) { - toggleBtn.innerHTML = ` ${t.stop}`; - toggleBtn.classList.remove('wplace-btn-primary'); - toggleBtn.classList.add('wplace-btn-stop'); - updateUI(state.language === 'pt' ? '🚀 Pintura iniciada!' : '🚀 Painting started!', 'success'); - paintLoop(); - } else { - toggleBtn.innerHTML = ` ${t.start}`; - toggleBtn.classList.add('wplace-btn-primary'); - toggleBtn.classList.remove('wplace-btn-stop'); - statsArea.innerHTML = ''; - updateUI(state.language === 'pt' ? '⏹️ Parado' : '⏹️ Stopped', 'default'); - } - }); - - minimizeBtn.addEventListener('click', () => { - state.minimized = !state.minimized; - content.style.display = state.minimized ? 'none' : 'block'; - minimizeBtn.innerHTML = ``; - }); - - const autoRefreshCheckbox = panel.querySelector('#autoRefreshCheckbox'); - autoRefreshCheckbox.addEventListener('change', () => { - state.autoRefresh = autoRefreshCheckbox.checked; - }); - - window.addEventListener('beforeunload', () => { - state.menuOpen = false; - }); - }; - window.updateUI = (message, type = 'default') => { - const statusText = document.querySelector('#statusText'); - if (statusText) { + const initBotBtn = container.querySelector("#initBotBtn"); + 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 minimizeBtn = container.querySelector("#minimizeBtn"); + const statusText = container.querySelector("#statusText"); + const progressBar = container.querySelector("#progressBar"); + const statsArea = container.querySelector("#statsArea"); + const content = container.querySelector(".wplace-content"); + + const widthSlider = resizeContainer.querySelector("#widthSlider"); + const heightSlider = resizeContainer.querySelector("#heightSlider"); + const widthValue = resizeContainer.querySelector("#widthValue"); + const heightValue = resizeContainer.querySelector("#heightValue"); + const keepAspect = resizeContainer.querySelector("#keepAspect"); + const resizePreview = resizeContainer.querySelector("#resizePreview"); + const confirmResize = resizeContainer.querySelector("#confirmResize"); + const cancelResize = resizeContainer.querySelector("#cancelResize"); + + minimizeBtn.addEventListener("click", () => { + state.minimized = !state.minimized; + if (state.minimized) { + container.classList.add("wplace-minimized"); + minimizeBtn.innerHTML = ''; + } else { + container.classList.remove("wplace-minimized"); + minimizeBtn.innerHTML = ''; + } + }); + + window.updateUI = (messageKey, type = "default", params = {}) => { + const message = Utils.t(messageKey, params); statusText.textContent = message; statusText.className = `wplace-status status-${type}`; - statusText.style.animation = 'none'; + statusText.style.animation = "none"; void statusText.offsetWidth; - statusText.style.animation = 'slideIn 0.3s ease-out'; - } - }; + statusText.style.animation = "slideIn 0.3s ease-out"; + }; - window.updateStats = async () => { - await getCharge(); - const statsArea = document.querySelector('#statsArea'); - if (statsArea) { - const t = { - pt: { - user: "Usuário", - pixels: "Pixels", - charges: "Cargas", - level: "Level" - }, - en: { - user: "User", - pixels: "Pixels", - charges: "Charges", - level: "Level" - } - }[state.language] || { - user: "User", - pixels: "Pixels", - charges: "Charges", - level: "Level" - }; + window.updateStats = async () => { + if (!state.colorsChecked || !state.imageLoaded) return; + + const { charges, cooldown } = await WPlaceService.getCharges(); + state.currentCharges = Math.floor(charges); + state.cooldown = cooldown; + + const progress = + state.totalPixels > 0 + ? Math.round((state.paintedPixels / state.totalPixels) * 100) + : 0; + const remainingPixels = state.totalPixels - state.paintedPixels; + + state.estimatedTime = Utils.calculateEstimatedTime( + remainingPixels, + state.currentCharges, + state.cooldown + ); + + progressBar.style.width = `${progress}%`; statsArea.innerHTML = `
-
${t.user}
-
${state.userInfo.name}
+
${Utils.t( + "progress" + )}
+
${progress}%
-
${t.pixels}
-
${state.paintedCount}
+
${Utils.t( + "pixels" + )}
+
${state.paintedPixels}/${state.totalPixels}
-
${t.charges}
-
${Math.floor(state.charges.count)}/${Math.floor(state.charges.max)}
+
${Utils.t( + "charges" + )}
+
${Math.floor(state.currentCharges)}
+ ${ + state.imageLoaded + ? `
-
${t.level}
-
${state.userInfo?.level || '0'}
+
${Utils.t( + "estimatedTime" + )}
+
${Utils.formatTime(state.estimatedTime)}
+ ` + : "" + } `; + }; + + function showResizeDialog(processor) { + const { width, height } = processor.getDimensions(); + const aspectRatio = width / height; + + widthSlider.value = width; + heightSlider.value = height; + widthValue.textContent = width; + heightValue.textContent = height; + resizePreview.src = processor.img.src; + + resizeOverlay.style.display = "block"; + resizeContainer.style.display = "block"; + + const updatePreview = () => { + const newWidth = parseInt(widthSlider.value); + const newHeight = parseInt(heightSlider.value); + + widthValue.textContent = newWidth; + heightValue.textContent = newHeight; + + resizePreview.src = processor.generatePreview(newWidth, newHeight); + }; + + widthSlider.addEventListener("input", () => { + if (keepAspect.checked) { + const newWidth = parseInt(widthSlider.value); + const newHeight = Math.round(newWidth / aspectRatio); + heightSlider.value = newHeight; + } + updatePreview(); + }); + + heightSlider.addEventListener("input", () => { + if (keepAspect.checked) { + const newHeight = parseInt(heightSlider.value); + const newWidth = Math.round(newHeight * aspectRatio); + widthSlider.value = newWidth; + } + updatePreview(); + }); + + confirmResize.onclick = () => { + const newWidth = parseInt(widthSlider.value); + const newHeight = parseInt(heightSlider.value); + + const newPixels = processor.resize(newWidth, newHeight); + + let totalValidPixels = 0; + for (let y = 0; y < newHeight; y++) { + for (let x = 0; x < newWidth; x++) { + const idx = (y * newWidth + x) * 4; + const r = newPixels[idx]; + const g = newPixels[idx + 1]; + const b = newPixels[idx + 2]; + const alpha = newPixels[idx + 3]; + + if (alpha < CONFIG.TRANSPARENCY_THRESHOLD) continue; + if (Utils.isWhitePixel(r, g, b)) continue; + + totalValidPixels++; + } + } + + state.imageData.pixels = newPixels; + state.imageData.width = newWidth; + state.imageData.height = newHeight; + state.imageData.totalPixels = totalValidPixels; + state.totalPixels = totalValidPixels; + state.paintedPixels = 0; + + updateStats(); + updateUI("resizeSuccess", "success", { + width: newWidth, + height: newHeight, + }); + + closeResizeDialog(); + }; + + cancelResize.onclick = closeResizeDialog; } - }; + + function closeResizeDialog() { + resizeOverlay.style.display = "none"; + resizeContainer.style.display = "none"; + } + + initBotBtn.addEventListener("click", async () => { + try { + updateUI("checkingColors", "default"); + + state.availableColors = Utils.extractAvailableColors(); + + if (state.availableColors.length === 0) { + Utils.showAlert(Utils.t("noColorsFound"), "error"); + updateUI("noColorsFound", "error"); + return; + } + + state.colorsChecked = true; + uploadBtn.disabled = false; + selectPosBtn.disabled = false; + initBotBtn.style.display = "none"; + + updateUI("colorsFound", "success", { + count: state.availableColors.length, + }); + updateStats(); + } catch { + updateUI("imageError", "error"); + } + }); + + uploadBtn.addEventListener("click", async () => { + try { + updateUI("loadingImage", "default"); + const imageSrc = await Utils.createImageUploader(); + + const processor = new ImageProcessor(imageSrc); + await processor.load(); + + const { width, height } = processor.getDimensions(); + const pixels = processor.getPixelData(); + + let totalValidPixels = 0; + for (let y = 0; y < height; y++) { + for (let x = 0; x < width; x++) { + const idx = (y * width + x) * 4; + const r = pixels[idx]; + const g = pixels[idx + 1]; + const b = pixels[idx + 2]; + const alpha = pixels[idx + 3]; + + if (alpha < CONFIG.TRANSPARENCY_THRESHOLD) continue; + if (Utils.isWhitePixel(r, g, b)) continue; + + totalValidPixels++; + } + } + + state.imageData = { + width, + height, + pixels, + totalPixels: totalValidPixels, + processor, + }; + + state.totalPixels = totalValidPixels; + state.paintedPixels = 0; + state.imageLoaded = true; + state.lastPosition = { x: 0, y: 0 }; + + resizeBtn.disabled = false; + saveBtn.disabled = false; + + if (state.startPosition) { + startBtn.disabled = false; + } + + updateStats(); + updateUI("imageLoaded", "success", { count: totalValidPixels }); + } catch { + updateUI("imageError", "error"); + } + }); + + resizeBtn.addEventListener("click", () => { + if (state.imageLoaded && state.imageData.processor) { + showResizeDialog(state.imageData.processor); + } + }); + + selectPosBtn.addEventListener("click", async () => { + if (state.selectingPosition) return; + + state.selectingPosition = true; + state.startPosition = null; + state.region = null; + startBtn.disabled = true; + + Utils.showAlert(Utils.t("selectPositionAlert"), "info"); + updateUI("waitingPosition", "default"); + + const originalFetch = window.fetch; + + window.fetch = async (url, options) => { + if ( + typeof url === "string" && + url.includes("https://backend.wplace.live/s0/pixel/") && + options?.method?.toUpperCase() === "POST" + ) { + try { + const response = await originalFetch(url, options); + const clonedResponse = response.clone(); + const data = await clonedResponse.json(); + + if (data?.painted === 1) { + const regionMatch = url.match(/\/pixel\/(\d+)\/(\d+)/); + if (regionMatch && regionMatch.length >= 3) { + state.region = { + x: parseInt(regionMatch[1]), + y: parseInt(regionMatch[2]), + }; + } + + const payload = JSON.parse(options.body); + if (payload?.coords && Array.isArray(payload.coords)) { + state.startPosition = { + x: payload.coords[0], + y: payload.coords[1], + }; + state.lastPosition = { x: 0, y: 0 }; + + if (state.imageLoaded) { + startBtn.disabled = false; + } + + window.fetch = originalFetch; + state.selectingPosition = false; + updateUI("positionSet", "success"); + } + } + + return response; + } catch { + return originalFetch(url, options); + } + } + return originalFetch(url, options); + }; + + setTimeout(() => { + if (state.selectingPosition) { + window.fetch = originalFetch; + state.selectingPosition = false; + updateUI("positionTimeout", "error"); + Utils.showAlert(Utils.t("positionTimeout"), "error"); + } + }, 120000); + }); + + startBtn.addEventListener("click", async () => { + if (!state.imageLoaded || !state.startPosition || !state.region) { + updateUI("missingRequirements", "error"); + return; + } + if (!capturedCaptchaToken) { + updateUI("captchaNeeded", "error"); + Utils.showAlert(Utils.t("captchaNeeded"), "error"); + return; + } + + state.running = true; + state.stopFlag = false; + startBtn.disabled = true; + stopBtn.disabled = false; + uploadBtn.disabled = true; + selectPosBtn.disabled = true; + resizeBtn.disabled = true; + saveBtn.disabled = true; + + updateUI("startPaintingMsg", "success"); + + try { + await processImage(); + } catch { + updateUI("paintingError", "error"); + } finally { + state.running = false; + stopBtn.disabled = true; + saveBtn.disabled = false; + + if (!state.stopFlag) { + startBtn.disabled = true; + uploadBtn.disabled = false; + selectPosBtn.disabled = false; + resizeBtn.disabled = false; + } else { + startBtn.disabled = false; + } + } + }); + + stopBtn.addEventListener("click", () => { + state.stopFlag = true; + state.running = false; + stopBtn.disabled = true; + updateUI("paintingStopped", "warning"); + + // Auto save when stopping + if (state.imageLoaded && state.paintedPixels > 0) { + Utils.saveProgress(); + Utils.showAlert(Utils.t("autoSaved"), "success"); + } + }); + + saveBtn.addEventListener("click", () => { + if (!state.imageLoaded) { + Utils.showAlert(Utils.t("missingRequirements"), "error"); + return; + } + + const success = Utils.saveProgress(); + if (success) { + updateUI("autoSaved", "success"); + Utils.showAlert(Utils.t("autoSaved"), "success"); + } else { + Utils.showAlert("❌ Erro ao salvar progresso", "error"); + } + }); + + loadBtn.addEventListener("click", () => { + const savedData = Utils.loadProgress(); + if (!savedData) { + updateUI("noSavedData", "warning"); + Utils.showAlert(Utils.t("noSavedData"), "warning"); + return; + } + + // Show confirmation dialog + const confirmLoad = confirm( + `${Utils.t("savedDataFound")}\n\n` + + `Saved: ${new Date(savedData.timestamp).toLocaleString()}\n` + + `Progress: ${savedData.state.paintedPixels}/${savedData.state.totalPixels} pixels` + ); + + if (confirmLoad) { + const success = Utils.restoreProgress(savedData); + if (success) { + updateUI("dataLoaded", "success"); + Utils.showAlert(Utils.t("dataLoaded"), "success"); + + // Enable appropriate buttons + saveBtn.disabled = false; + + // Show init button if colors not checked yet + if (!state.colorsChecked) { + initBotBtn.style.display = "block"; + } + + if (state.imageLoaded && state.startPosition && state.region && state.colorsChecked) { + startBtn.disabled = false; + } + } else { + Utils.showAlert("❌ Erro ao carregar progresso", "error"); + } + } + }); + + // Check for saved progress on startup + const checkSavedProgress = () => { + const savedData = Utils.loadProgress(); + if (savedData && savedData.state.paintedPixels > 0) { + const savedDate = new Date(savedData.timestamp).toLocaleString(); + const progress = Math.round((savedData.state.paintedPixels / savedData.state.totalPixels) * 100); + + Utils.showAlert( + `${Utils.t("savedDataFound")}\n\n` + + `Saved: ${savedDate}\n` + + `Progress: ${savedData.state.paintedPixels}/${savedData.state.totalPixels} pixels (${progress}%)\n` + + `${Utils.t("clickLoadToContinue")}`, + "info" + ); + } + }; + + // Check for saved progress after a short delay to let UI settle + setTimeout(checkSavedProgress, 1000); + } + + async function processImage() { + const { width, height, pixels } = state.imageData; + const { x: startX, y: startY } = state.startPosition; + const { x: regionX, y: regionY } = state.region; + + let startRow = state.lastPosition.y || 0; + let startCol = state.lastPosition.x || 0; + + if (!state.paintedMap) { + state.paintedMap = Array(height) + .fill() + .map(() => Array(width).fill(false)); + } + + let pixelBatch = []; + + try { + outerLoop: for (let y = startRow; y < height; y++) { + for (let x = y === startRow ? startCol : 0; x < width; x++) { + if (state.stopFlag) { + if (pixelBatch.length > 0) { + await sendPixelBatch(pixelBatch, regionX, regionY); + } + state.lastPosition = { x, y }; + updateUI("paintingPaused", "warning", { x, y }); + break outerLoop; + } + + if (state.paintedMap[y][x]) continue; + + const idx = (y * width + x) * 4; + const r = pixels[idx]; + const g = pixels[idx + 1]; + const b = pixels[idx + 2]; + const alpha = pixels[idx + 3]; + + if (alpha < CONFIG.TRANSPARENCY_THRESHOLD) continue; + if (Utils.isWhitePixel(r, g, b)) continue; + + const rgb = [r, g, b]; + const colorId = findClosestColor(rgb, state.availableColors); + const pixelX = startX + x; + const pixelY = startY + y; + + pixelBatch.push({ + x: pixelX, + y: pixelY, + color: colorId, + localX: x, + localY: y, + }); + + if (pixelBatch.length >= Math.floor(state.currentCharges)) { + const success = await sendPixelBatch(pixelBatch, regionX, regionY); + + if (success === "token_error") { + state.stopFlag = true; + updateUI("captchaNeeded", "error"); + Utils.showAlert(Utils.t("captchaNeeded"), "error"); + break outerLoop; + } + + if (success) { + pixelBatch.forEach((pixel) => { + state.paintedMap[pixel.localY][pixel.localX] = true; + state.paintedPixels++; + }); + + state.currentCharges -= pixelBatch.length; + updateStats(); + updateUI("paintingProgress", "default", { + painted: state.paintedPixels, + total: state.totalPixels, + }); + + // Auto-save progress every 50 pixels + if (state.paintedPixels % 50 === 0) { + Utils.saveProgress(); + } + } + + pixelBatch = []; + + if (state.currentCharges < 1) { + updateUI("noCharges", "warning", { + time: Utils.formatTime(state.cooldown), + }); + await Utils.sleep(state.cooldown); + + const chargeUpdate = await WPlaceService.getCharges(); + state.currentCharges = chargeUpdate.charges; + state.cooldown = chargeUpdate.cooldown; + } + } + } + } + + if (pixelBatch.length > 0 && !state.stopFlag) { + const success = await sendPixelBatch(pixelBatch, regionX, regionY); + if (success) { + pixelBatch.forEach((pixel) => { + state.paintedMap[pixel.localY][pixel.localX] = true; + state.paintedPixels++; + }); + state.currentCharges -= pixelBatch.length; + } + } + } finally { + if (window._chargesInterval) clearInterval(window._chargesInterval); + window._chargesInterval = null; + } + + if (state.stopFlag) { + updateUI("paintingStopped", "warning"); + // Save progress when stopped + Utils.saveProgress(); + } else { + updateUI("paintingComplete", "success", { count: state.paintedPixels }); + state.lastPosition = { x: 0, y: 0 }; + state.paintedMap = null; + // Clear saved data when completed + Utils.clearProgress(); + } + + updateStats(); + } + + async function sendPixelBatch(pixelBatch, regionX, regionY) { + if (!capturedCaptchaToken) { + return "token_error"; + } + + const coords = []; + const colors = []; + + pixelBatch.forEach((pixel) => { + coords.push(pixel.x, pixel.y); + colors.push(pixel.color); + }); + + try { + const payload = { + coords: coords, + colors: colors, + t: capturedCaptchaToken, + }; + + const res = await fetch( + `https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`, + { + method: "POST", + headers: { "Content-Type": "text/plain;charset=UTF-8" }, + credentials: "include", + body: JSON.stringify(payload), + } + ); + + if (res.status === 403) { + console.error( + "❌ 403 Forbidden. CAPTCHA token might be invalid or expired." + ); + capturedCaptchaToken = null; + return "token_error"; + } + + const data = await res.json(); + return data?.painted === pixelBatch.length; + } catch (e) { + console.error("Batch paint request failed:", e); + return false; + } + } - await detectUserLocation(); createUI(); - await getCharge(); - updateStats(); })();