+ `
+ : ''
+ }
+ `;
+
+ // should be after statsArea.innerHTML = '...'. todo make full stats ui update partial
+ updateChargeStatsDisplay(intervalMs);
+ };
+
+ updateDataButtons = () => {
+ const hasImageData = state.imageLoaded && state.imageData;
+ saveBtn.disabled = !hasImageData;
+ saveToFileBtn.disabled = !hasImageData;
+ };
+
+ updateDataButtons();
+
+ function showMoveArtworkPanel() {
+ // Create move artwork control panel like status panels
+ const movePanel = document.createElement('div');
+ movePanel.id = 'moveArtworkPanel';
+ movePanel.className = 'wplace-move-panel';
+
+ movePanel.innerHTML = `
+
+
+
+ Move Artwork
+
+
+
+
+
+
+
+
+
+
+
1px
+
+
+
+
+
+ `;
+
+ // No overlay - append directly to body like other panels
+ document.body.appendChild(movePanel);
+
+ // Make the panel draggable
+ makeDraggable(movePanel);
+
+ // Add event listeners for movement
+ let currentMessageTimeout = null;
+
+ function moveArtwork(deltaX, deltaY) {
+ if (state.startPosition && state.region) {
+ const newX = state.startPosition.x + deltaX;
+ const newY = state.startPosition.y + deltaY;
+
+ console.log(`š Moving artwork from (${state.startPosition.x}, ${state.startPosition.y}) to (${newX}, ${newY})`);
+
+ state.startPosition.x = newX;
+ state.startPosition.y = newY;
+
+ // Clear any existing message timeout and alerts immediately
+ if (currentMessageTimeout) {
+ clearTimeout(currentMessageTimeout);
+ currentMessageTimeout = null;
+ }
+ Utils.hideAlert(); // Hide current alert immediately
+
+ // Update overlay position if available
+ if (overlayManager) {
+ overlayManager.setPosition(state.startPosition, state.region)
+ .then(() => {
+ console.log('ā Overlay position updated');
+ Utils.showAlert(`Moved to position (${newX}, ${newY})`, 'success');
+ // Set new timeout for this message
+ currentMessageTimeout = setTimeout(() => {
+ Utils.hideAlert();
+ currentMessageTimeout = null;
+ }, 1500); // Message disappears after 1.5 seconds
+ })
+ .catch(err => {
+ console.error('ā Failed to update overlay:', err);
+ Utils.showAlert('Failed to update overlay position', 'error');
+ });
+ } else {
+ Utils.showAlert(`Position updated to (${newX}, ${newY})`, 'success');
+ // Set new timeout for this message
+ currentMessageTimeout = setTimeout(() => {
+ Utils.hideAlert();
+ currentMessageTimeout = null;
+ }, 1500);
+ }
+ } else {
+ Utils.showAlert('Please select a position first before moving artwork', 'warning');
+ }
+ }
+
+ document.getElementById('moveUp').addEventListener('click', () => moveArtwork(0, -1));
+ document.getElementById('moveDown').addEventListener('click', () => moveArtwork(0, 1));
+ document.getElementById('moveLeft').addEventListener('click', () => moveArtwork(-1, 0));
+ document.getElementById('moveRight').addEventListener('click', () => moveArtwork(1, 0));
+
+ // Close panel
+ function closeMovePanel() {
+ if (currentMessageTimeout) {
+ clearTimeout(currentMessageTimeout);
+ currentMessageTimeout = null;
+ }
+ Utils.hideAlert();
+ document.body.removeChild(movePanel);
+ }
+
+ document.getElementById('closeMovePanel').addEventListener('click', closeMovePanel);
+ }
+
+ function showResizeDialog(processor) {
+ let baseProcessor = processor;
+ let width, height;
+ if (state.originalImage?.dataUrl) {
+ baseProcessor = new ImageProcessor(state.originalImage.dataUrl);
+ width = state.originalImage.width;
+ height = state.originalImage.height;
+ } else {
+ const dims = processor.getDimensions();
+ width = dims.width;
+ height = dims.height;
+ }
+ const aspectRatio = width / height;
+
+ const rs = state.resizeSettings;
+ widthSlider.max = width * 2;
+ heightSlider.max = height * 2;
+ let initialW = width;
+ let initialH = height;
+ if (
+ rs &&
+ Number.isFinite(rs.width) &&
+ Number.isFinite(rs.height) &&
+ rs.width > 0 &&
+ rs.height > 0
+ ) {
+ initialW = rs.width;
+ initialH = rs.height;
+ }
+ // Clamp to slider ranges
+ initialW = Math.max(
+ parseInt(widthSlider.min, 10) || 10,
+ Math.min(initialW, parseInt(widthSlider.max, 10))
+ );
+ initialH = Math.max(
+ parseInt(heightSlider.min, 10) || 10,
+ Math.min(initialH, parseInt(heightSlider.max, 10))
+ );
+ widthSlider.value = initialW;
+ heightSlider.value = initialH;
+ widthValue.textContent = initialW;
+ heightValue.textContent = initialH;
+ zoomSlider.value = 1;
+ if (zoomValue) zoomValue.textContent = '100%';
+ paintWhiteToggle.checked = state.paintWhitePixels;
+ paintTransparentToggle.checked = state.paintTransparentPixels;
+
+ let _previewTimer = null;
+ let _previewJobId = 0;
+ let _isDraggingSize = false;
+ let _zoomLevel = 1;
+ let _ditherWorkBuf = null;
+ let _ditherEligibleBuf = null;
+ const ensureDitherBuffers = (n) => {
+ if (!_ditherWorkBuf || _ditherWorkBuf.length !== n * 3)
+ _ditherWorkBuf = new Float32Array(n * 3);
+ if (!_ditherEligibleBuf || _ditherEligibleBuf.length !== n)
+ _ditherEligibleBuf = new Uint8Array(n);
+ return { work: _ditherWorkBuf, eligible: _ditherEligibleBuf };
+ };
+ let _maskImageData = null;
+ let _maskData = null;
+ let _dirty = null;
+ const _resetDirty = () => {
+ _dirty = { minX: Infinity, minY: Infinity, maxX: -1, maxY: -1 };
+ };
+ const _markDirty = (x, y) => {
+ if (!_dirty) _resetDirty();
+ if (x < _dirty.minX) _dirty.minX = x;
+ if (y < _dirty.minY) _dirty.minY = y;
+ if (x > _dirty.maxX) _dirty.maxX = x;
+ if (y > _dirty.maxY) _dirty.maxY = y;
+ };
+ const _flushDirty = () => {
+ if (!_dirty || _dirty.maxX < _dirty.minX || _dirty.maxY < _dirty.minY) return;
+ const x = Math.max(0, _dirty.minX);
+ const y = Math.max(0, _dirty.minY);
+ const w = Math.min(maskCanvas.width - x, _dirty.maxX - x + 1);
+ const h = Math.min(maskCanvas.height - y, _dirty.maxY - y + 1);
+ if (w > 0 && h > 0) maskCtx.putImageData(_maskImageData, 0, 0, x, y, w, h);
+ _resetDirty();
+ };
+ const _ensureMaskOverlayBuffers = (w, h, rebuildFromMask = false) => {
+ if (!_maskImageData || _maskImageData.width !== w || _maskImageData.height !== h) {
+ _maskImageData = maskCtx.createImageData(w, h);
+ _maskData = _maskImageData.data;
+ rebuildFromMask = true;
+ }
+ if (rebuildFromMask) {
+ const m = state.resizeIgnoreMask;
+ const md = _maskData;
+ md.fill(0);
+ if (m) {
+ for (let i = 0; i < m.length; i++)
+ if (m[i]) {
+ const p = i * 4;
+ md[p] = 255;
+ md[p + 1] = 0;
+ md[p + 2] = 0;
+ md[p + 3] = 150;
+ }
+ }
+ maskCtx.putImageData(_maskImageData, 0, 0);
+ _resetDirty();
+ }
+ };
+ const ensureMaskSize = (w, h) => {
+ if (!state.resizeIgnoreMask || state.resizeIgnoreMask.length !== w * h) {
+ state.resizeIgnoreMask = new Uint8Array(w * h);
+ }
+ baseCanvas.width = w;
+ baseCanvas.height = h;
+ maskCanvas.width = w;
+ maskCanvas.height = h;
+ maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+ // Ensure overlay buffers exist and rebuild from mask when dimensions change
+ _ensureMaskOverlayBuffers(w, h, true);
+ };
+ _updateResizePreview = async () => {
+ const jobId = ++_previewJobId;
+ const newWidth = parseInt(widthSlider.value, 10);
+ const newHeight = parseInt(heightSlider.value, 10);
+ _zoomLevel = parseFloat(zoomSlider.value);
+
+ widthValue.textContent = newWidth;
+ heightValue.textContent = newHeight;
+
+ ensureMaskSize(newWidth, newHeight);
+ canvasStack.style.width = newWidth + 'px';
+ canvasStack.style.height = newHeight + 'px';
+ baseCtx.imageSmoothingEnabled = false;
+ if (!state.availableColors || state.availableColors.length === 0) {
+ if (baseProcessor !== processor && (!baseProcessor.img || !baseProcessor.canvas)) {
+ await baseProcessor.load();
+ }
+ baseCtx.clearRect(0, 0, newWidth, newHeight);
+ baseCtx.drawImage(baseProcessor.img, 0, 0, newWidth, newHeight);
+ // Draw existing mask overlay buffer
+ maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+ if (_maskImageData) maskCtx.putImageData(_maskImageData, 0, 0);
+ updateZoomLayout();
+ return;
+ }
+ if (baseProcessor !== processor && (!baseProcessor.img || !baseProcessor.canvas)) {
+ await baseProcessor.load();
+ }
+ baseCtx.clearRect(0, 0, newWidth, newHeight);
+ baseCtx.drawImage(baseProcessor.img, 0, 0, newWidth, newHeight);
+ const imgData = baseCtx.getImageData(0, 0, newWidth, newHeight);
+ const data = imgData.data;
+
+ const tThresh = state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD;
+
+ const applyFSDither = () => {
+ const w = newWidth,
+ h = newHeight;
+ const n = w * h;
+ const { work, eligible } = ensureDitherBuffers(n);
+ for (let y = 0; y < h; y++) {
+ for (let x = 0; x < w; x++) {
+ const idx = y * w + x;
+ const i4 = idx * 4;
+ const r = data[i4],
+ g = data[i4 + 1],
+ b = data[i4 + 2],
+ a = data[i4 + 3];
+ const isEligible =
+ (state.paintTransparentPixels || a >= tThresh) &&
+ (state.paintWhitePixels || !Utils.isWhitePixel(r, g, b));
+ eligible[idx] = isEligible ? 1 : 0;
+ work[idx * 3] = r;
+ work[idx * 3 + 1] = g;
+ work[idx * 3 + 2] = b;
+ if (!isEligible) {
+ data[i4 + 3] = 0; // transparent in preview overlay
+ }
+ }
+ }
+
+ const diffuse = (nx, ny, er, eg, eb, factor) => {
+ if (nx < 0 || nx >= w || ny < 0 || ny >= h) return;
+ const nidx = ny * w + nx;
+ if (!eligible[nidx]) return;
+ const base = nidx * 3;
+ work[base] = Math.min(255, Math.max(0, work[base] + er * factor));
+ work[base + 1] = Math.min(255, Math.max(0, work[base + 1] + eg * factor));
+ work[base + 2] = Math.min(255, Math.max(0, work[base + 2] + eb * factor));
+ };
+
+ for (let y = 0; y < h; y++) {
+ for (let x = 0; x < w; x++) {
+ const idx = y * w + x;
+ if (!eligible[idx]) continue;
+ const base = idx * 3;
+ const r0 = work[base],
+ g0 = work[base + 1],
+ b0 = work[base + 2];
+ const [nr, ng, nb] = Utils.findClosestPaletteColor(
+ r0,
+ g0,
+ b0,
+ state.activeColorPalette
+ );
+ const i4 = idx * 4;
+ data[i4] = nr;
+ data[i4 + 1] = ng;
+ data[i4 + 2] = nb;
+ data[i4 + 3] = 255;
+
+ const er = r0 - nr;
+ const eg = g0 - ng;
+ const eb = b0 - nb;
+
+ diffuse(x + 1, y, er, eg, eb, 7 / 16);
+ diffuse(x - 1, y + 1, er, eg, eb, 3 / 16);
+ diffuse(x, y + 1, er, eg, eb, 5 / 16);
+ diffuse(x + 1, y + 1, er, eg, eb, 1 / 16);
+ }
+ }
+ };
+
+ // Skip expensive dithering while user is dragging sliders
+ if (state.ditheringEnabled && !_isDraggingSize) {
+ applyFSDither();
+ } else {
+ for (let i = 0; i < data.length; i += 4) {
+ const r = data[i],
+ g = data[i + 1],
+ b = data[i + 2],
+ a = data[i + 3];
+ if (
+ (!state.paintTransparentPixels && a < tThresh) ||
+ (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))
+ ) {
+ data[i + 3] = 0;
+ continue;
+ }
+ const [nr, ng, nb] = Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette);
+ data[i] = nr;
+ data[i + 1] = ng;
+ data[i + 2] = nb;
+ data[i + 3] = 255;
+ }
+ }
+
+ if (jobId !== _previewJobId) return;
+ baseCtx.putImageData(imgData, 0, 0);
+ maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+ if (_maskImageData) maskCtx.putImageData(_maskImageData, 0, 0);
+ updateZoomLayout();
+ };
+
+ const onWidthInput = () => {
+ if (keepAspect.checked) {
+ heightSlider.value = Math.round(parseInt(widthSlider.value, 10) / aspectRatio);
+ }
+ _updateResizePreview();
+ const curW = parseInt(widthSlider.value, 10);
+ const curH = parseInt(heightSlider.value, 10);
+ state.resizeSettings = {
+ baseWidth: width,
+ baseHeight: height,
+ width: curW,
+ height: curH,
+ };
+ saveBotSettings();
+ // Auto-fit after size changes
+ const fit = typeof computeFitZoom === 'function' ? computeFitZoom() : 1;
+ if (!isNaN(fit) && isFinite(fit)) applyZoom(fit);
+ };
+
+ const onHeightInput = () => {
+ if (keepAspect.checked) {
+ widthSlider.value = Math.round(parseInt(heightSlider.value, 10) * aspectRatio);
+ }
+ _updateResizePreview();
+ const curW = parseInt(widthSlider.value, 10);
+ const curH = parseInt(heightSlider.value, 10);
+ state.resizeSettings = {
+ baseWidth: width,
+ baseHeight: height,
+ width: curW,
+ height: curH,
+ };
+ saveBotSettings();
+ // Auto-fit after size changes
+ const fit = typeof computeFitZoom === 'function' ? computeFitZoom() : 1;
+ if (!isNaN(fit) && isFinite(fit)) applyZoom(fit);
+ };
+
+ paintWhiteToggle.onchange = (e) => {
+ state.paintWhitePixels = e.target.checked;
+ _updateResizePreview();
+ saveBotSettings();
+ };
+
+ paintTransparentToggle.onchange = (e) => {
+ state.paintTransparentPixels = e.target.checked;
+ _updateResizePreview();
+ saveBotSettings();
+ };
+
+ let panX = 0,
+ panY = 0;
+ const clampPan = () => {
+ const wrapRect = panStage?.getBoundingClientRect() || {
+ width: 0,
+ height: 0,
+ };
+ const w = (baseCanvas.width || 1) * _zoomLevel;
+ const h = (baseCanvas.height || 1) * _zoomLevel;
+ if (w <= wrapRect.width) {
+ panX = Math.floor((wrapRect.width - w) / 2);
+ } else {
+ const minX = wrapRect.width - w;
+ panX = Math.min(0, Math.max(minX, panX));
+ }
+ if (h <= wrapRect.height) {
+ panY = Math.floor((wrapRect.height - h) / 2);
+ } else {
+ const minY = wrapRect.height - h;
+ panY = Math.min(0, Math.max(minY, panY));
+ }
+ };
+ let _panRaf = 0;
+ const applyPan = () => {
+ if (_panRaf) return;
+ _panRaf = requestAnimationFrame(() => {
+ clampPan();
+ canvasStack.style.transform = `translate3d(${Math.round(
+ panX
+ )}px, ${Math.round(panY)}px, 0) scale(${_zoomLevel})`;
+ _panRaf = 0;
+ });
+ };
+
+ const updateZoomLayout = () => {
+ const w = baseCanvas.width || 1,
+ h = baseCanvas.height || 1;
+ baseCanvas.style.width = w + 'px';
+ baseCanvas.style.height = h + 'px';
+ maskCanvas.style.width = w + 'px';
+ maskCanvas.style.height = h + 'px';
+ canvasStack.style.width = w + 'px';
+ canvasStack.style.height = h + 'px';
+ applyPan();
+ };
+ const applyZoom = (z) => {
+ _zoomLevel = Math.max(0.05, Math.min(20, z || 1));
+ zoomSlider.value = _zoomLevel;
+ updateZoomLayout();
+ if (zoomValue) zoomValue.textContent = `${Math.round(_zoomLevel * 100)}%`;
+ };
+ zoomSlider.addEventListener('input', () => {
+ applyZoom(parseFloat(zoomSlider.value));
+ });
+ if (zoomInBtn)
+ zoomInBtn.addEventListener('click', () => applyZoom(parseFloat(zoomSlider.value) + 0.1));
+ if (zoomOutBtn)
+ zoomOutBtn.addEventListener('click', () => applyZoom(parseFloat(zoomSlider.value) - 0.1));
+ const computeFitZoom = () => {
+ const wrapRect = panStage?.getBoundingClientRect();
+ if (!wrapRect) return 1;
+ const w = baseCanvas.width || 1;
+ const h = baseCanvas.height || 1;
+ const margin = 10;
+ const scaleX = (wrapRect.width - margin) / w;
+ const scaleY = (wrapRect.height - margin) / h;
+ return Math.max(0.05, Math.min(20, Math.min(scaleX, scaleY)));
+ };
+ if (zoomFitBtn)
+ zoomFitBtn.addEventListener('click', () => {
+ applyZoom(computeFitZoom());
+ centerInView();
+ });
+ if (zoomActualBtn)
+ zoomActualBtn.addEventListener('click', () => {
+ applyZoom(1);
+ centerInView();
+ });
+
+ const centerInView = () => {
+ if (!panStage) return;
+ const rect = panStage.getBoundingClientRect();
+ const w = (baseCanvas.width || 1) * _zoomLevel;
+ const h = (baseCanvas.height || 1) * _zoomLevel;
+ panX = Math.floor((rect.width - w) / 2);
+ panY = Math.floor((rect.height - h) / 2);
+ applyPan();
+ };
+
+ let isPanning = false;
+ let startX = 0,
+ startY = 0,
+ startPanX = 0,
+ startPanY = 0;
+ let allowPan = false; // Space key
+ let panMode = false; // Explicit pan mode toggle for touch/one-button mice
+ const isPanMouseButton = (e) => e.button === 1 || e.button === 2;
+ const setCursor = (val) => {
+ if (panStage) panStage.style.cursor = val;
+ };
+ const isPanActive = (e) => panMode || allowPan || isPanMouseButton(e);
+ const updatePanModeBtn = () => {
+ if (!panModeBtn) return;
+ panModeBtn.classList.toggle('active', panMode);
+ panModeBtn.setAttribute('aria-pressed', panMode ? 'true' : 'false');
+ };
+ if (panModeBtn) {
+ updatePanModeBtn();
+ panModeBtn.addEventListener('click', () => {
+ panMode = !panMode;
+ updatePanModeBtn();
+ setCursor(panMode ? 'grab' : '');
+ });
+ }
+ if (panStage) {
+ panStage.addEventListener('contextmenu', (e) => {
+ if (allowPan) e.preventDefault();
+ });
+ window.addEventListener('keydown', (e) => {
+ if (e.code === 'Space') {
+ allowPan = true;
+ setCursor('grab');
+ }
+ });
+ window.addEventListener('keyup', (e) => {
+ if (e.code === 'Space') {
+ allowPan = false;
+ if (!isPanning) setCursor('');
+ }
+ });
+ panStage.addEventListener('mousedown', (e) => {
+ if (!isPanActive(e)) return;
+ e.preventDefault();
+ isPanning = true;
+ startX = e.clientX;
+ startY = e.clientY;
+ startPanX = panX;
+ startPanY = panY;
+ setCursor('grabbing');
+ });
+ window.addEventListener('mousemove', (e) => {
+ if (!isPanning) return;
+ const dx = e.clientX - startX;
+ const dy = e.clientY - startY;
+ panX = startPanX + dx;
+ panY = startPanY + dy;
+ applyPan();
+ });
+ window.addEventListener('mouseup', () => {
+ if (isPanning) {
+ isPanning = false;
+ setCursor(allowPan ? 'grab' : '');
+ }
+ });
+ panStage.addEventListener(
+ 'wheel',
+ (e) => {
+ if (!e.ctrlKey && !e.metaKey) return;
+ e.preventDefault();
+ const rect = panStage.getBoundingClientRect();
+ const cx = e.clientX - rect.left - panX;
+ const cy = e.clientY - rect.top - panY;
+ const before = _zoomLevel;
+ const step = Math.max(0.05, Math.min(0.5, Math.abs(e.deltaY) > 20 ? 0.2 : 0.1));
+ const next = Math.max(0.05, Math.min(20, before + (e.deltaY > 0 ? -step : step)));
+ if (next === before) return;
+ const scale = next / before;
+ panX = panX - cx * (scale - 1);
+ panY = panY - cy * (scale - 1);
+ applyZoom(next);
+ },
+ { passive: false }
+ );
+ let lastTouchDist = null;
+ let touchStartTime = 0;
+ let doubleTapTimer = null;
+ panStage.addEventListener(
+ 'touchstart',
+ (e) => {
+ if (e.touches.length === 1) {
+ const t = e.touches[0];
+ isPanning = true;
+ startX = t.clientX;
+ startY = t.clientY;
+ startPanX = panX;
+ startPanY = panY;
+ setCursor('grabbing');
+ const now = Date.now();
+ if (now - touchStartTime < 300) {
+ // double tap -> toggle 100%/fit
+ const z = Math.abs(_zoomLevel - 1) < 0.01 ? computeFitZoom() : 1;
+ applyZoom(z);
+ centerInView();
+ if (doubleTapTimer) clearTimeout(doubleTapTimer);
+ } else {
+ touchStartTime = now;
+ doubleTapTimer = setTimeout(() => {
+ doubleTapTimer = null;
+ }, 320);
+ }
+ } else if (e.touches.length === 2) {
+ // Pinch start
+ const [a, b] = e.touches;
+ lastTouchDist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
+ }
+ },
+ { passive: true }
+ );
+ panStage.addEventListener(
+ 'touchmove',
+ (e) => {
+ if (e.touches.length === 1 && isPanning) {
+ const t = e.touches[0];
+ const dx = t.clientX - startX;
+ const dy = t.clientY - startY;
+ panX = startPanX + dx;
+ panY = startPanY + dy;
+ applyPan();
+ } else if (e.touches.length === 2 && lastTouchDist != null) {
+ e.preventDefault();
+ const [a, b] = e.touches;
+ const dist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
+ const rect = panStage.getBoundingClientRect();
+ const centerX = (a.clientX + b.clientX) / 2 - rect.left - panX;
+ const centerY = (a.clientY + b.clientY) / 2 - rect.top - panY;
+ const before = _zoomLevel;
+ const scale = dist / (lastTouchDist || dist);
+ const next = Math.max(0.05, Math.min(20, before * scale));
+ if (next !== before) {
+ panX = panX - centerX * (next / before - 1);
+ panY = panY - centerY * (next / before - 1);
+ applyZoom(next);
+ }
+ lastTouchDist = dist;
+ }
+ },
+ { passive: false }
+ );
+ panStage.addEventListener('touchend', () => {
+ isPanning = false;
+ lastTouchDist = null;
+ setCursor(panMode || allowPan ? 'grab' : '');
+ });
+ }
+ const schedulePreview = () => {
+ if (_previewTimer) clearTimeout(_previewTimer);
+ const run = () => {
+ _previewTimer = null;
+ _updateResizePreview();
+ };
+ if (window.requestIdleCallback) {
+ _previewTimer = setTimeout(() => requestIdleCallback(run, { timeout: 150 }), 50);
+ } else {
+ _previewTimer = setTimeout(() => requestAnimationFrame(run), 50);
+ }
+ };
+ // Track dragging to reduce work and skip dithering during drag
+ const markDragStart = () => {
+ _isDraggingSize = true;
+ };
+ const markDragEnd = () => {
+ _isDraggingSize = false;
+ schedulePreview();
+ };
+ widthSlider.addEventListener('pointerdown', markDragStart);
+ heightSlider.addEventListener('pointerdown', markDragStart);
+ widthSlider.addEventListener('pointerup', markDragEnd);
+ heightSlider.addEventListener('pointerup', markDragEnd);
+ widthSlider.addEventListener('input', () => {
+ onWidthInput();
+ schedulePreview();
+ });
+ heightSlider.addEventListener('input', () => {
+ onHeightInput();
+ schedulePreview();
+ });
+
+ // Mask painting UX: brush size, modes, row/column fills, and precise coords
+ let draggingMask = false;
+ let lastPaintX = -1,
+ lastPaintY = -1;
+ let brushSize = 1;
+ let rowColSize = 1;
+ let maskMode = 'ignore'; // 'ignore' | 'unignore' | 'toggle'
+ const brushEl = resizeContainer.querySelector('#maskBrushSize');
+ const brushValEl = resizeContainer.querySelector('#maskBrushSizeValue');
+ const btnIgnore = resizeContainer.querySelector('#maskModeIgnore');
+ const btnUnignore = resizeContainer.querySelector('#maskModeUnignore');
+ const btnToggle = resizeContainer.querySelector('#maskModeToggle');
+ const clearIgnoredBtnEl = resizeContainer.querySelector('#clearIgnoredBtn');
+ const invertMaskBtn = resizeContainer.querySelector('#invertMaskBtn');
+ const rowColSizeEl = resizeContainer.querySelector('#rowColSize');
+ const rowColSizeValEl = resizeContainer.querySelector('#rowColSizeValue');
+
+ const updateModeButtons = () => {
+ const map = [
+ [btnIgnore, 'ignore'],
+ [btnUnignore, 'unignore'],
+ [btnToggle, 'toggle'],
+ ];
+ for (const [el, m] of map) {
+ if (!el) continue;
+ const active = maskMode === m;
+ el.classList.toggle('active', active);
+ el.setAttribute('aria-pressed', active ? 'true' : 'false');
+ }
+ };
+ const setMode = (mode) => {
+ maskMode = mode;
+ updateModeButtons();
+ };
+ if (brushEl && brushValEl) {
+ brushEl.addEventListener('input', () => {
+ brushSize = parseInt(brushEl.value, 10) || 1;
+ brushValEl.textContent = brushSize;
+ });
+ brushValEl.textContent = brushEl.value;
+ brushSize = parseInt(brushEl.value, 10) || 1;
+ }
+ if (rowColSizeEl && rowColSizeValEl) {
+ rowColSizeEl.addEventListener('input', () => {
+ rowColSize = parseInt(rowColSizeEl.value, 10) || 1;
+ rowColSizeValEl.textContent = rowColSize;
+ });
+ rowColSizeValEl.textContent = rowColSizeEl.value;
+ rowColSize = parseInt(rowColSizeEl.value, 10) || 1;
+ }
+ if (btnIgnore) btnIgnore.addEventListener('click', () => setMode('ignore'));
+ if (btnUnignore) btnUnignore.addEventListener('click', () => setMode('unignore'));
+ if (btnToggle) btnToggle.addEventListener('click', () => setMode('toggle'));
+ // Initialize button state (default to toggle mode)
+ updateModeButtons();
+
+ const mapClientToPixel = (clientX, clientY) => {
+ // Compute without rounding until final step to avoid drift at higher zoom
+ const rect = baseCanvas.getBoundingClientRect();
+ const scaleX = rect.width / baseCanvas.width;
+ const scaleY = rect.height / baseCanvas.height;
+ const dx = (clientX - rect.left) / scaleX;
+ const dy = (clientY - rect.top) / scaleY;
+ const x = Math.floor(dx);
+ const y = Math.floor(dy);
+ return { x, y };
+ };
+
+ const ensureMask = (w, h) => {
+ if (!state.resizeIgnoreMask || state.resizeIgnoreMask.length !== w * h) {
+ state.resizeIgnoreMask = new Uint8Array(w * h);
+ }
+ };
+
+ const paintCircle = (cx, cy, radius, value) => {
+ const w = baseCanvas.width,
+ h = baseCanvas.height;
+ ensureMask(w, h);
+ const r2 = radius * radius;
+ for (let yy = cy - radius; yy <= cy + radius; yy++) {
+ if (yy < 0 || yy >= h) continue;
+ for (let xx = cx - radius; xx <= cx + radius; xx++) {
+ if (xx < 0 || xx >= w) continue;
+ const dx = xx - cx,
+ dy = yy - cy;
+ if (dx * dx + dy * dy <= r2) {
+ const idx = yy * w + xx;
+ let val = state.resizeIgnoreMask[idx];
+ if (maskMode === 'toggle') {
+ val = val ? 0 : 1;
+ } else if (maskMode === 'ignore') {
+ val = 1;
+ } else {
+ val = 0;
+ }
+ state.resizeIgnoreMask[idx] = val;
+ if (_maskData) {
+ const p = idx * 4;
+ if (val) {
+ _maskData[p] = 255;
+ _maskData[p + 1] = 0;
+ _maskData[p + 2] = 0;
+ _maskData[p + 3] = 150;
+ } else {
+ _maskData[p] = 0;
+ _maskData[p + 1] = 0;
+ _maskData[p + 2] = 0;
+ _maskData[p + 3] = 0;
+ }
+ _markDirty(xx, yy);
+ }
+ }
+ }
+ }
+ };
+
+ const paintRow = (y, value) => {
+ const w = baseCanvas.width,
+ h = baseCanvas.height;
+ ensureMask(w, h);
+ if (y < 0 || y >= h) return;
+
+ // Paint multiple rows based on rowColSize
+ const halfSize = Math.floor(rowColSize / 2);
+ const startY = Math.max(0, y - halfSize);
+ const endY = Math.min(h - 1, y + halfSize);
+
+ for (let rowY = startY; rowY <= endY; rowY++) {
+ for (let x = 0; x < w; x++) {
+ const idx = rowY * w + x;
+ let val = state.resizeIgnoreMask[idx];
+ if (maskMode === 'toggle') {
+ val = val ? 0 : 1;
+ } else if (maskMode === 'ignore') {
+ val = 1;
+ } else {
+ val = 0;
+ }
+ state.resizeIgnoreMask[idx] = val;
+ if (_maskData) {
+ const p = idx * 4;
+ if (val) {
+ _maskData[p] = 255;
+ _maskData[p + 1] = 0;
+ _maskData[p + 2] = 0;
+ _maskData[p + 3] = 150;
+ } else {
+ _maskData[p] = 0;
+ _maskData[p + 1] = 0;
+ _maskData[p + 2] = 0;
+ _maskData[p + 3] = 0;
+ }
+ }
+ }
+ if (_maskData) {
+ _markDirty(0, rowY);
+ _markDirty(w - 1, rowY);
+ }
+ }
+ };
+
+ const paintColumn = (x, value) => {
+ const w = baseCanvas.width,
+ h = baseCanvas.height;
+ ensureMask(w, h);
+ if (x < 0 || x >= w) return;
+
+ // Paint multiple columns based on rowColSize
+ const halfSize = Math.floor(rowColSize / 2);
+ const startX = Math.max(0, x - halfSize);
+ const endX = Math.min(w - 1, x + halfSize);
+
+ for (let colX = startX; colX <= endX; colX++) {
+ for (let y = 0; y < h; y++) {
+ const idx = y * w + colX;
+ let val = state.resizeIgnoreMask[idx];
+ if (maskMode === 'toggle') {
+ val = val ? 0 : 1;
+ } else if (maskMode === 'ignore') {
+ val = 1;
+ } else {
+ val = 0;
+ }
+ state.resizeIgnoreMask[idx] = val;
+ if (_maskData) {
+ const p = idx * 4;
+ if (val) {
+ _maskData[p] = 255;
+ _maskData[p + 1] = 0;
+ _maskData[p + 2] = 0;
+ _maskData[p + 3] = 150;
+ } else {
+ _maskData[p] = 0;
+ _maskData[p + 1] = 0;
+ _maskData[p + 2] = 0;
+ _maskData[p + 3] = 0;
+ }
+ }
+ }
+ if (_maskData) {
+ _markDirty(colX, 0);
+ _markDirty(colX, h - 1);
+ }
+ }
+ };
+
+ const redrawMaskOverlay = () => {
+ // Only flush the dirty region; full rebuild happens on size change
+ _flushDirty();
+ };
+
+ const handlePaint = (e) => {
+ // Suppress painting while panning
+ if ((e.buttons & 4) === 4 || (e.buttons & 2) === 2 || allowPan) return;
+ const { x, y } = mapClientToPixel(e.clientX, e.clientY);
+ const w = baseCanvas.width,
+ h = baseCanvas.height;
+ if (x < 0 || y < 0 || x >= w || y >= h) return;
+ const radius = Math.max(1, Math.floor(brushSize / 2));
+ if (e.shiftKey) {
+ paintRow(y);
+ } else if (e.altKey) {
+ paintColumn(x);
+ } else {
+ paintCircle(x, y, radius);
+ }
+ lastPaintX = x;
+ lastPaintY = y;
+ redrawMaskOverlay();
+ };
+
+ maskCanvas.addEventListener('mousedown', (e) => {
+ if (e.button === 1 || e.button === 2 || allowPan) return; // let pan handler manage
+ draggingMask = true;
+ handlePaint(e);
+ });
+ // Avoid hijacking touch gestures for panning/zooming
+ maskCanvas.addEventListener(
+ 'touchstart',
+ (e) => {
+ /* let panStage handle */
+ },
+ { passive: true }
+ );
+ maskCanvas.addEventListener(
+ 'touchmove',
+ (e) => {
+ /* let panStage handle */
+ },
+ { passive: true }
+ );
+ maskCanvas.addEventListener(
+ 'touchend',
+ (e) => {
+ /* let panStage handle */
+ },
+ { passive: true }
+ );
+ window.addEventListener('mousemove', (e) => {
+ if (draggingMask) handlePaint(e);
+ });
+ window.addEventListener('mouseup', () => {
+ if (draggingMask) {
+ draggingMask = false;
+ saveBotSettings();
+ }
+ });
+
+ if (clearIgnoredBtnEl)
+ clearIgnoredBtnEl.addEventListener('click', () => {
+ const w = baseCanvas.width,
+ h = baseCanvas.height;
+ if (state.resizeIgnoreMask) state.resizeIgnoreMask.fill(0);
+ _ensureMaskOverlayBuffers(w, h, true);
+ _updateResizePreview();
+ saveBotSettings();
+ });
+
+ if (invertMaskBtn)
+ invertMaskBtn.addEventListener('click', () => {
+ if (!state.resizeIgnoreMask) return;
+ for (let i = 0; i < state.resizeIgnoreMask.length; i++)
+ state.resizeIgnoreMask[i] = state.resizeIgnoreMask[i] ? 0 : 1;
+ const w = baseCanvas.width,
+ h = baseCanvas.height;
+ _ensureMaskOverlayBuffers(w, h, true);
+ _updateResizePreview();
+ saveBotSettings();
+ });
+
+ confirmResize.onclick = async () => {
+ const newWidth = parseInt(widthSlider.value, 10);
+ const newHeight = parseInt(heightSlider.value, 10);
+
+ // Generate the final paletted image data
+ const tempCanvas = document.createElement('canvas');
+ const tempCtx = tempCanvas.getContext('2d');
+ tempCanvas.width = newWidth;
+ tempCanvas.height = newHeight;
+ tempCtx.imageSmoothingEnabled = false;
+ if (baseProcessor !== processor && (!baseProcessor.img || !baseProcessor.canvas)) {
+ await baseProcessor.load();
+ }
+ tempCtx.drawImage(baseProcessor.img, 0, 0, newWidth, newHeight);
+ const imgData = tempCtx.getImageData(0, 0, newWidth, newHeight);
+ const data = imgData.data;
+ const tThresh2 = state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD;
+ let totalValidPixels = 0;
+ const mask =
+ state.resizeIgnoreMask && state.resizeIgnoreMask.length === newWidth * newHeight
+ ? state.resizeIgnoreMask
+ : null;
+
+ const applyFSDitherFinal = async () => {
+ const w = newWidth,
+ h = newHeight;
+ const n = w * h;
+ const { work, eligible } = ensureDitherBuffers(n);
+ for (let y = 0; y < h; y++) {
+ for (let x = 0; x < w; x++) {
+ const idx = y * w + x;
+ const i4 = idx * 4;
+ const r = data[i4],
+ g = data[i4 + 1],
+ b = data[i4 + 2],
+ a = data[i4 + 3];
+ const masked = mask && mask[idx];
+ const isEligible =
+ !masked &&
+ (state.paintTransparentPixels || a >= tThresh2) &&
+ (state.paintWhitePixels || !Utils.isWhitePixel(r, g, b));
+ eligible[idx] = isEligible ? 1 : 0;
+ work[idx * 3] = r;
+ work[idx * 3 + 1] = g;
+ work[idx * 3 + 2] = b;
+ if (!isEligible) {
+ data[i4 + 3] = 0;
+ }
+ }
+ // Yield to keep UI responsive
+ if ((y & 15) === 0) await Promise.resolve();
+ }
+
+ const diffuse = (nx, ny, er, eg, eb, factor) => {
+ if (nx < 0 || nx >= w || ny < 0 || ny >= h) return;
+ const nidx = ny * w + nx;
+ if (!eligible[nidx]) return;
+ const base = nidx * 3;
+ work[base] = Math.min(255, Math.max(0, work[base] + er * factor));
+ work[base + 1] = Math.min(255, Math.max(0, work[base + 1] + eg * factor));
+ work[base + 2] = Math.min(255, Math.max(0, work[base + 2] + eb * factor));
+ };
+
+ for (let y = 0; y < h; y++) {
+ for (let x = 0; x < w; x++) {
+ const idx = y * w + x;
+ if (!eligible[idx]) continue;
+ const base = idx * 3;
+ const r0 = work[base],
+ g0 = work[base + 1],
+ b0 = work[base + 2];
+ const [nr, ng, nb] = Utils.findClosestPaletteColor(
+ r0,
+ g0,
+ b0,
+ state.activeColorPalette
+ );
+ const i4 = idx * 4;
+ data[i4] = nr;
+ data[i4 + 1] = ng;
+ data[i4 + 2] = nb;
+ data[i4 + 3] = 255;
+ totalValidPixels++;
+
+ const er = r0 - nr;
+ const eg = g0 - ng;
+ const eb = b0 - nb;
+
+ diffuse(x + 1, y, er, eg, eb, 7 / 16);
+ diffuse(x - 1, y + 1, er, eg, eb, 3 / 16);
+ diffuse(x, y + 1, er, eg, eb, 5 / 16);
+ diffuse(x + 1, y + 1, er, eg, eb, 1 / 16);
+ }
+ // Yield every row to reduce jank
+ await Promise.resolve();
+ }
+ };
+
+ if (state.ditheringEnabled) {
+ await applyFSDitherFinal();
+ } else {
+ for (let i = 0; i < data.length; i += 4) {
+ const r = data[i],
+ g = data[i + 1],
+ b = data[i + 2],
+ a = data[i + 3];
+ const masked = mask && mask[i >> 2];
+ const isTransparent = (!state.paintTransparentPixels && a < tThresh2) || masked;
+ const isWhiteAndSkipped = !state.paintWhitePixels && Utils.isWhitePixel(r, g, b);
+ if (isTransparent || isWhiteAndSkipped) {
+ data[i + 3] = 0; // overlay transparency
+ continue;
+ }
+ totalValidPixels++;
+ const [nr, ng, nb] = Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette);
+ data[i] = nr;
+ data[i + 1] = ng;
+ data[i + 2] = nb;
+ data[i + 3] = 255;
+ }
+ }
+ tempCtx.putImageData(imgData, 0, 0);
+
+ // Save the final pixel data for painting
+ // Persist the paletted (and possibly dithered) pixels so painting uses the same output seen in overlay
+ const palettedPixels = new Uint8ClampedArray(imgData.data);
+ state.imageData.pixels = palettedPixels;
+ state.imageData.width = newWidth;
+ state.imageData.height = newHeight;
+ state.imageData.totalPixels = totalValidPixels;
+ state.totalPixels = totalValidPixels;
+ state.paintedPixels = 0;
+
+ state.resizeSettings = {
+ baseWidth: width,
+ baseHeight: height,
+ width: newWidth,
+ height: newHeight,
+ };
+ saveBotSettings();
+
+ const finalImageBitmap = await createImageBitmap(tempCanvas);
+ await overlayManager.setImage(finalImageBitmap);
+ overlayManager.enable();
+ toggleOverlayBtn.classList.add('active');
+ toggleOverlayBtn.setAttribute('aria-pressed', 'true');
+
+ // Keep state.imageData.processor as the original-based source; painting uses paletted pixels already stored
+
+ await updateStats();
+ updateUI('resizeSuccess', 'success', {
+ width: newWidth,
+ height: newHeight,
+ });
+ closeResizeDialog();
+ };
+
+ downloadPreviewBtn.onclick = () => {
+ try {
+ const w = baseCanvas.width,
+ h = baseCanvas.height;
+ const out = document.createElement('canvas');
+ out.width = w;
+ out.height = h;
+ const octx = out.getContext('2d');
+ octx.imageSmoothingEnabled = false;
+ octx.drawImage(baseCanvas, 0, 0);
+ octx.drawImage(maskCanvas, 0, 0);
+ const link = document.createElement('a');
+ link.download = 'wplace-preview.png';
+ link.href = out.toDataURL();
+ link.click();
+ } catch (e) {
+ console.warn('Failed to download preview:', e);
+ }
+ };
+
+ cancelResize.onclick = closeResizeDialog;
+
+ resizeOverlay.style.display = 'block';
+ resizeContainer.style.display = 'block';
+
+ // Reinitialize color palette with current available colors
+ initializeColorPalette(resizeContainer);
+
+ _updateResizePreview();
+ _resizeDialogCleanup = () => {
+ try {
+ zoomSlider.replaceWith(zoomSlider.cloneNode(true));
+ } catch { }
+ try {
+ if (zoomInBtn) zoomInBtn.replaceWith(zoomInBtn.cloneNode(true));
+ } catch { }
+ try {
+ if (zoomOutBtn) zoomOutBtn.replaceWith(zoomOutBtn.cloneNode(true));
+ } catch { }
+ };
+ setTimeout(() => {
+ if (typeof computeFitZoom === 'function') {
+ const z = computeFitZoom();
+ if (!isNaN(z) && isFinite(z)) {
+ applyZoom(z);
+ centerInView();
+ }
+ } else {
+ centerInView();
+ }
+ }, 0);
+ }
+
+ function closeResizeDialog() {
+ try {
+ if (typeof _resizeDialogCleanup === 'function') {
+ _resizeDialogCleanup();
+ }
+ } catch { }
+ resizeOverlay.style.display = 'none';
+ resizeContainer.style.display = 'none';
+ _updateResizePreview = () => { };
+ try {
+ if (typeof cancelAnimationFrame === 'function' && _panRaf) {
+ cancelAnimationFrame(_panRaf);
+ }
+ } catch { }
+ try {
+ if (_previewTimer) {
+ clearTimeout(_previewTimer);
+ _previewTimer = null;
+ }
+ } catch { }
+ _maskImageData = null;
+ _maskData = null;
+ _dirty = null;
+ _ditherWorkBuf = null;
+ _ditherEligibleBuf = null;
+ _resizeDialogCleanup = null;
+ }
+
+ if (uploadBtn) {
+ uploadBtn.addEventListener('click', async () => {
+ const availableColors = Utils.extractAvailableColors();
+ if (availableColors === null || availableColors.length < 10) {
+ updateUI('noColorsFound', 'error');
+ Utils.showAlert(Utils.t('noColorsFound'), 'error');
+ return;
+ }
+
+ if (!state.colorsChecked) {
+ state.availableColors = availableColors;
+ state.colorsChecked = true;
+ updateUI('colorsFound', 'success', { count: availableColors.length });
+ await updateStats();
+ selectPosBtn.disabled = false;
+ // Only enable resize button if image is also loaded
+ if (state.imageLoaded) {
+ resizeBtn.disabled = false;
+ }
+ }
+
+ try {
+ updateUI('loadingImage', 'default');
+ const imageSrc = await Utils.createImageUploader();
+ if (!imageSrc) {
+ updateUI('colorsFound', 'success', {
+ count: state.availableColors.length,
+ });
+ return;
+ }
+
+ const processor = new ImageProcessor(imageSrc);
+ await processor.load();
+
+ const { width, height } = processor.getDimensions();
+ const pixels = processor.getPixelData();
+
+ let totalValidPixels = 0;
+ for (let i = 0; i < pixels.length; i += 4) {
+ const isTransparent =
+ !state.paintTransparentPixels &&
+ pixels[i + 3] < (state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD);
+ const isWhiteAndSkipped =
+ !state.paintWhitePixels &&
+ Utils.isWhitePixel(pixels[i], pixels[i + 1], pixels[i + 2]);
+ if (!isTransparent && !isWhiteAndSkipped) {
+ totalValidPixels++;
+ }
+ }
+
+ state.imageData = {
+ width,
+ height,
+ pixels,
+ totalPixels: totalValidPixels,
+ processor,
+ };
+
+ state.totalPixels = totalValidPixels;
+ state.paintedPixels = 0;
+ state.imageLoaded = true;
+ // Keep existing lastPosition to continue from where we left off
+ // state.lastPosition = { x: 0, y: 0 }; // REMOVED: Don't reset position
+
+ // Initialize painted map for tracking
+ Utils.initializePaintedMap(width, height);
+
+ // New image: clear previous resize settings
+ state.resizeSettings = null;
+ // Also clear any previous ignore mask
+ state.resizeIgnoreMask = null;
+ // Save original image for this browser (dataUrl + dims)
+ state.originalImage = { dataUrl: imageSrc, width, height };
+ saveBotSettings();
+
+ // Use the original image for the overlay initially
+ const imageBitmap = await createImageBitmap(processor.img);
+ await overlayManager.setImage(imageBitmap);
+ overlayManager.enable();
+ toggleOverlayBtn.disabled = false;
+ toggleOverlayBtn.classList.add('active');
+ toggleOverlayBtn.setAttribute('aria-pressed', 'true');
+
+ // Only enable resize button if colors have also been captured
+ if (state.colorsChecked) {
+ resizeBtn.disabled = false;
+ }
+ saveBtn.disabled = false;
+
+ if (state.startPosition) {
+ startBtn.disabled = false;
+ }
+
+ await updateStats();
+ updateDataButtons();
+ updateUI('imageLoaded', 'success', { count: totalValidPixels });
+ } catch {
+ updateUI('imageError', 'error');
+ }
+ });
+ }
+
+ // Load Extracted button event listener - for loading Art-Extractor JSON files
+ const loadExtractedBtn = document.getElementById('loadExtractedBtn');
+ if (loadExtractedBtn) {
+ loadExtractedBtn.addEventListener('click', async () => {
+ try {
+ updateUI('loadingImage', 'default');
+ const fileData = await Utils.loadExtractedFileData();
+
+ if (!fileData) {
+ updateUI('ready', 'default');
+ return;
+ }
+
+ console.log('š Loading extracted artwork from Art-Extractor...');
+ console.log('š [DEBUG] Loaded file data structure:', {
+ hasState: !!fileData.state,
+ hasImageData: !!fileData.imageData,
+ topLevelKeys: Object.keys(fileData),
+ stateKeys: fileData.state ? Object.keys(fileData.state) : 'N/A',
+ imageDataKeys: fileData.imageData ? Object.keys(fileData.imageData) : 'N/A',
+ fileDataType: typeof fileData,
+ stateType: typeof fileData.state,
+ imageDataType: typeof fileData.imageData
+ });
+
+ // Validate the data structure before restoring
+ if (!fileData || typeof fileData !== 'object') {
+ throw new Error('Invalid file format: File data is not a valid object');
+ }
+
+ if (!fileData.state || typeof fileData.state !== 'object') {
+ console.error('ā State validation failed. FileData:', fileData);
+ throw new Error('Invalid file format: Missing or invalid state object. Please ensure you exported from Art-Extractor correctly.');
+ }
+
+ if (!fileData.imageData || typeof fileData.imageData !== 'object') {
+ console.error('ā ImageData validation failed. FileData:', fileData);
+ throw new Error('Invalid file format: Missing or invalid imageData object. Please ensure you completed the area scan in Art-Extractor.');
+ }
+
+ if (!fileData.imageData.pixels || !Array.isArray(fileData.imageData.pixels) || fileData.imageData.pixels.length === 0) {
+ console.error('ā Pixel data validation failed. ImageData:', fileData.imageData);
+ throw new Error('Invalid file format: No pixel data found. Please scan an area in Art-Extractor before exporting.');
+ }
+
+ // Ensure critical fields are present for Art-Extractor compatibility
+ if (!fileData.state.availableColors) {
+ console.warn('ā ļø No availableColors in file, using defaults');
+ fileData.state.availableColors = [];
+ }
+
+ // Use the existing restoreProgress function but with special handling
+ const restoreSuccess = await Utils.restoreProgress(fileData);
+
+ if (!restoreSuccess) {
+ throw new Error('Failed to restore progress data');
+ }
+
+ // After loading, we need to enter position selection mode like when uploading images
+ if (state.imageLoaded) {
+ console.log('šÆ Extracted artwork loaded, entering position selection mode...');
+
+ // Clear position data since Art-Extractor exports may have null positions for manual placement
+ state.startPosition = null;
+ state.region = null;
+ state.selectingPosition = true;
+
+ // For extracted files, force enable all necessary flags for full functionality
+ state.colorsChecked = true;
+ state.imageLoaded = true;
+
+ // Ensure image processor is available for extracted files
+ if (state.imageData && !state.imageData.processor) {
+ try {
+ // Create a temporary canvas to generate a data URL for the processor
+ const canvas = document.createElement('canvas');
+ canvas.width = state.imageData.width;
+ canvas.height = state.imageData.height;
+ const ctx = canvas.getContext('2d');
+
+ // Create image data from pixels
+ const imageData = new ImageData(
+ new Uint8ClampedArray(state.imageData.pixels),
+ state.imageData.width,
+ state.imageData.height
+ );
+ ctx.putImageData(imageData, 0, 0);
+
+ // Create processor with canvas data URL using the correct class
+ const dataUrl = canvas.toDataURL();
+ state.imageData.processor = new window.WPlaceImageProcessor(dataUrl);
+
+ // CRITICAL: Load the processor before using it
+ await state.imageData.processor.load();
+ console.log('š§ Created and loaded WPlaceImageProcessor for extracted artwork');
+ } catch (error) {
+ console.error('ā Failed to create image processor for extracted artwork:', error);
+ // Fallback: use global processor if available
+ if (window.globalImageProcessor) {
+ console.log('š Using global image processor as fallback');
+ state.imageData.processor = window.globalImageProcessor;
+ }
+ }
+ }
+
+ console.log('šØ Force-enabled all flags for extracted JSON to access resize panel');
+
+ // For extracted images, ensure overlay is enabled but don't set position yet
+ try {
+ if (overlayManager && state.imageData) {
+ // Create image bitmap from the restored image data
+ const canvas = new OffscreenCanvas(state.imageData.width, state.imageData.height);
+ const ctx = canvas.getContext('2d');
+ const imageData = new ImageData(
+ new Uint8ClampedArray(state.imageData.pixels),
+ state.imageData.width,
+ state.imageData.height
+ );
+ ctx.putImageData(imageData, 0, 0);
+ const imageBitmap = await canvas.transferToImageBitmap();
+
+ await overlayManager.setImage(imageBitmap);
+ overlayManager.enable();
+ console.log('ā Overlay enabled for extracted artwork');
+ }
+ } catch (overlayError) {
+ console.warn('ā ļø Could not set overlay for extracted artwork:', overlayError);
+ }
+
+ // For extracted images, don't try to set overlay position until user selects one
+ // The overlay should already be enabled from the restoreProgress function
+
+ // Update UI with custom message for extracted artwork
+ Utils.showAlert('šØ Extracted artwork loaded! Please click on the canvas to select where to place it.', 'info');
+ updateUI('ready', 'default'); // Use 'ready' instead of 'waitingPosition' to avoid translation issues
+
+ // Enable relevant buttons
+ selectPosBtn.disabled = false;
+ // Always enable resize button for extracted files since they have image processor
+ resizeBtn.disabled = false;
+ console.log('š§ Resize button enabled for extracted artwork');
+
+ // Enable move artwork button (will be fully enabled after position is set)
+ const moveArtworkBtn = document.getElementById('moveArtworkBtn');
+ if (moveArtworkBtn) {
+ moveArtworkBtn.disabled = false;
+ }
+
+ // Set up position selection like the regular selectPosBtn
+ const tempFetch = async (url, options) => {
+ if (
+ typeof url === 'string' &&
+ url.includes('/s0/pixel/') &&
+ options &&
+ options.method === 'POST'
+ ) {
+ let coords;
+ try {
+ const body = JSON.parse(options.body);
+ coords = body.coords;
+ } catch (e) {
+ return window.originalFetch(url, options);
+ }
+
+ const tileMatches = url.match(/\/s0\/pixel\/(\-?\d+)\/(\-?\d+)/);
+ if (tileMatches && coords && coords.length >= 2) {
+ const tileX = parseInt(tileMatches[1]);
+ const tileY = parseInt(tileMatches[2]);
+ const pixelX = coords[0];
+ const pixelY = coords[1];
+
+ state.startPosition = { x: pixelX, y: pixelY };
+ state.region = { x: tileX, y: tileY };
+ state.selectingPosition = false;
+
+ console.log('šÆ Position selected for extracted artwork:', {
+ startPosition: state.startPosition,
+ region: state.region
+ });
+
+ // Restore original fetch
+ window.fetch = window.originalFetch;
+
+ // Update overlay position with validation
+ try {
+ if (state.startPosition && state.region && overlayManager) {
+ await overlayManager.setPosition(state.startPosition, state.region);
+ console.log('ā Overlay position updated successfully');
+ } else {
+ console.warn('ā ļø Cannot set overlay position: missing startPosition or region');
+ }
+ } catch (positionError) {
+ console.error('ā Failed to set overlay position:', positionError);
+ }
+
+ startBtn.disabled = false;
+ selectPosBtn.textContent = Utils.t('selectPosition');
+
+ // Enable Move Artwork button when position is set
+ const moveArtworkBtn = document.getElementById('moveArtworkBtn');
+ if (moveArtworkBtn) {
+ moveArtworkBtn.disabled = false;
+ }
+
+ updateUI('ready', 'success');
+ Utils.showAlert('Position selected! Ready to start painting.', 'success');
+ }
+ }
+ return window.originalFetch(url, options);
+ };
+
+ // Store original fetch and replace with position capture
+ if (!window.originalFetch) {
+ window.originalFetch = window.fetch;
+ }
+ window.fetch = tempFetch;
+ }
+
+ } catch (error) {
+ console.error('ā Failed to load extracted artwork:', error);
+ Utils.showAlert(`Failed to load extracted artwork: ${error.message}`, 'error');
+ updateUI('ready', 'default');
+ }
+ });
+ }
+
+ if (resizeBtn) {
+ resizeBtn.addEventListener('click', () => {
+ console.log('š [DEBUG] Resize button clicked. State check:', {
+ imageLoaded: state.imageLoaded,
+ hasProcessor: !!(state.imageData && state.imageData.processor),
+ colorsChecked: state.colorsChecked,
+ hasAvailableColors: !!(state.availableColors && state.availableColors.length > 0)
+ });
+
+ if (state.imageLoaded && state.imageData && state.imageData.processor) {
+ showResizeDialog(state.imageData.processor);
+ } else {
+ let message = 'Please upload an image and check colors first.';
+ if (!state.imageLoaded) message = 'Please upload an image first.';
+ else if (!state.imageData || !state.imageData.processor) message = 'Image processor not available. Please reload the image.';
+ Utils.showAlert(message, 'warning');
+ }
+ });
+ }
+
+ // Move Artwork button event listener
+ const moveArtworkBtn = document.getElementById('moveArtworkBtn');
+ if (moveArtworkBtn) {
+ moveArtworkBtn.addEventListener('click', () => {
+ if (state.imageLoaded && (state.startPosition || state.selectingPosition)) {
+ showMoveArtworkPanel();
+ } else if (!state.imageLoaded) {
+ Utils.showAlert('Please upload or load an image first', 'warning');
+ } else {
+ Utils.showAlert('Please select a position for the artwork first', 'warning');
+ }
+ });
+ }
+
+ if (selectPosBtn) {
+ selectPosBtn.addEventListener('click', async () => {
+ if (state.selectingPosition) return;
+
+ state.selectingPosition = true;
+ state.startPosition = null;
+ state.region = null;
+ startBtn.disabled = true;
+
+ // Disable Move Artwork button when selecting new position
+ const moveArtworkBtn = document.getElementById('moveArtworkBtn');
+ if (moveArtworkBtn) {
+ moveArtworkBtn.disabled = true;
+ }
+
+ Utils.showAlert(Utils.t('selectPositionAlert'), 'info');
+ updateUI('waitingPosition', 'default');
+
+ const tempFetch = async (url, options) => {
+ if (
+ typeof url === 'string' &&
+ url.includes('https://backend.wplace.live/s0/pixel/') &&
+ options?.method?.toUpperCase() === 'POST'
+ ) {
+ try {
+ const response = await originalFetch(url, options);
+ const clonedResponse = response.clone();
+ const data = await clonedResponse.json();
+
+ if (data?.painted === 1) {
+ const regionMatch = url.match(/\/pixel\/(\d+)\/(\d+)/);
+ if (regionMatch && regionMatch.length >= 3) {
+ state.region = {
+ x: Number.parseInt(regionMatch[1]),
+ y: Number.parseInt(regionMatch[2]),
+ };
+ }
+
+ const payload = JSON.parse(options.body);
+ if (payload?.coords && Array.isArray(payload.coords)) {
+ state.startPosition = {
+ x: payload.coords[0],
+ y: payload.coords[1],
+ };
+ // Keep existing lastPosition to continue from where we left off
+ // state.lastPosition = { x: 0, y: 0 }; // REMOVED: Don't reset position
+
+ // Update overlay position with validation
+ try {
+ if (state.startPosition && state.region && overlayManager) {
+ await overlayManager.setPosition(state.startPosition, state.region);
+ console.log('ā Regular overlay position updated successfully');
+ } else {
+ console.warn('ā ļø Cannot set regular overlay position: missing startPosition or region');
+ }
+ } catch (positionError) {
+ console.error('ā Failed to set regular overlay position:', positionError);
+ }
+
+ if (state.imageLoaded) {
+ startBtn.disabled = false;
+
+ // Enable Move Artwork button when position is set
+ const moveArtworkBtn = document.getElementById('moveArtworkBtn');
+ if (moveArtworkBtn) {
+ moveArtworkBtn.disabled = false;
+ }
+ }
+
+ window.fetch = originalFetch;
+ state.selectingPosition = false;
+ updateUI('positionSet', 'success');
+ }
+ }
+
+ return response;
+ } catch {
+ return originalFetch(url, options);
+ }
+ }
+ return originalFetch(url, options);
+ };
+
+ const originalFetch = window.fetch;
+ window.fetch = tempFetch;
+
+ setTimeout(() => {
+ if (state.selectingPosition) {
+ window.fetch = originalFetch;
+ state.selectingPosition = false;
+ updateUI('positionTimeout', 'error');
+ Utils.showAlert(Utils.t('positionTimeout'), 'error');
+ }
+ }, 120000);
+ });
+ }
+
+ async function startPainting() {
+ if (!state.imageLoaded || !state.startPosition || !state.region) {
+ updateUI('missingRequirements', 'error');
+ return;
+ }
+ await ensureToken();
+ if (!getTurnstileToken()) return;
+
+ // Only reset painted pixels on first start of session (when pre-filtering hasn't been done)
+ if (!state.preFilteringDone) {
+ const savedPaintedPixels = state.paintedPixels; // Store original value
+ state.paintedPixels = 0;
+ console.log(`š First start this session - reset progress counter for accurate tracking (was: ${savedPaintedPixels})`);
+ await updateStats(); // Update UI to show 0 progress
+ } else {
+ console.log('š Continuing session - pre-filtering already done, keeping current progress');
+ }
+
+ state.running = true;
+ state.stopFlag = false;
+ startBtn.disabled = true;
+ stopBtn.disabled = false;
+ uploadBtn.disabled = true;
+ selectPosBtn.disabled = true;
+ resizeBtn.disabled = true;
+ saveBtn.disabled = true;
+ toggleOverlayBtn.disabled = true;
+
+ updateUI('startPaintingMsg', 'success');
+
+ try {
+ await getAccounts();
+ await processImage();
+ } catch (e) {
+ console.error('Unexpected error:', e);
+ updateUI('paintingError', 'error');
+ } finally {
+ state.running = false;
+ stopBtn.disabled = true;
+ saveBtn.disabled = false;
+
+ if (state.stopFlag) {
+ startBtn.disabled = false;
+ } else {
+ startBtn.disabled = true;
+ uploadBtn.disabled = false;
+ const loadExtractedBtn = document.getElementById('loadExtractedBtn');
+ if (loadExtractedBtn) loadExtractedBtn.disabled = false;
+ selectPosBtn.disabled = false;
+ resizeBtn.disabled = false;
+ }
+ toggleOverlayBtn.disabled = false;
+ }
+ }
+
+ if (startBtn) {
+ startBtn.addEventListener('click', startPainting);
+ }
+
+ if (stopBtn) {
+ stopBtn.addEventListener('click', () => {
+ state.stopFlag = true;
+ state.running = false;
+ stopBtn.disabled = true;
+ updateUI('paintingStoppedByUser', 'warning');
+
+ if (state.imageLoaded && state.paintedPixels > 0) {
+ Utils.saveProgress();
+ Utils.showAlert(Utils.t('autoSaved'), 'success');
+ }
+ });
+ }
+
+ const checkSavedProgress = () => {
+ const savedData = Utils.loadProgress();
+ if (savedData && savedData.state.paintedPixels > 0) {
+ const savedDate = new Date(savedData.timestamp).toLocaleString();
+ const progress = Math.round(
+ (savedData.state.paintedPixels / savedData.state.totalPixels) * 100
+ );
+
+ Utils.showAlert(
+ `${Utils.t('savedDataFound')}\n\n` +
+ `Saved: ${savedDate}\n` +
+ `Progress: ${savedData.state.paintedPixels}/${savedData.state.totalPixels} pixels (${progress}%)\n` +
+ `${Utils.t('clickLoadToContinue')}`,
+ 'info'
+ );
+ }
+ };
+
+ setTimeout(checkSavedProgress, 1000);
+
+ if (cooldownSlider && cooldownInput && cooldownValue && cooldownDecrease && cooldownIncrease) {
+ const updateCooldown = (newValue) => {
+ const threshold = Math.max(1, Math.min(state.maxCharges || 999, parseInt(newValue)));
+ state.cooldownChargeThreshold = threshold;
+
+ // Update both controls (value shows in input, label shows unit only)
+ cooldownSlider.value = threshold;
+ cooldownInput.value = threshold;
+ cooldownValue.textContent = `${Utils.t('charges')}`;
+
+ saveBotSettings();
+ NotificationManager.resetEdgeTracking(); // prevent spurious notify after threshold change
+ };
+
+ // Slider event listener
+ cooldownSlider.addEventListener('input', (e) => {
+ updateCooldown(e.target.value);
+ });
+
+ // Number input event listener
+ cooldownInput.addEventListener('input', (e) => {
+ updateCooldown(e.target.value);
+ });
+
+ // Decrease button
+ cooldownDecrease.addEventListener('click', () => {
+ updateCooldown(parseInt(cooldownInput.value) - 1);
+ });
+
+ // Increase button
+ cooldownIncrease.addEventListener('click', () => {
+ updateCooldown(parseInt(cooldownInput.value) + 1);
+ });
+
+ // Add scroll-to-adjust for cooldown slider
+ Utils.createScrollToAdjust(cooldownSlider, updateCooldown, 1, state.maxCharges, 1);
+ }
+
+ loadBotSettings();
+ // Ensure notification poller reflects current settings
+ NotificationManager.syncFromState();
+ }
+
+ function getMsToTargetCharges(current, target, cooldown, intervalMs = 0) {
+ const remainingCharges = target - current;
+ return Math.max(0, remainingCharges * cooldown - intervalMs);
+ }
+
+ function updateChargesThresholdUI(intervalMs) {
+ if (state.stopFlag) return;
+
+ const threshold = state.cooldownChargeThreshold;
+ const remainingMs = getMsToTargetCharges(
+ state.preciseCurrentCharges,
+ threshold,
+ state.cooldown,
+ intervalMs
+ );
+ const timeText = Utils.msToTimeText(remainingMs);
+
+ updateUI(
+ 'noChargesThreshold',
+ 'warning',
+ {
+ threshold,
+ current: state.displayCharges,
+ time: timeText,
+ },
+ true
+ );
+ }
+
+ function generateCoordinates(width, height, mode, direction, snake, blockWidth, blockHeight, startFromX = 0, startFromY = 0) {
+ const coords = [];
+ console.log(
+ 'Generating coordinates with \n mode:',
+ mode,
+ '\n direction:',
+ direction,
+ '\n snake:',
+ snake,
+ '\n blockWidth:',
+ blockWidth,
+ '\n blockHeight:',
+ blockHeight,
+ '\n startFromX:',
+ startFromX,
+ '\n startFromY:',
+ startFromY
+ );
+ // --------- Standard 4 corners traversal ----------
+ let xStart, xEnd, xStep;
+ let yStart, yEnd, yStep;
+ switch (direction) {
+ case 'top-left':
+ xStart = 0;
+ xEnd = width;
+ xStep = 1;
+ yStart = 0;
+ yEnd = height;
+ yStep = 1;
+ break;
+ case 'top-right':
+ xStart = width - 1;
+ xEnd = -1;
+ xStep = -1;
+ yStart = 0;
+ yEnd = height;
+ yStep = 1;
+ break;
+ case 'bottom-left':
+ xStart = 0;
+ xEnd = width;
+ xStep = 1;
+ yStart = height - 1;
+ yEnd = -1;
+ yStep = -1;
+ break;
+ case 'bottom-right':
+ xStart = width - 1;
+ xEnd = -1;
+ xStep = -1;
+ yStart = height - 1;
+ yEnd = -1;
+ yStep = -1;
+ break;
+ default:
+ throw new Error(`Unknown direction: ${direction}`);
+ }
+
+ // --------- Traversal modes ----------
+ if (mode === 'rows') {
+ for (let y = yStart; y !== yEnd; y += yStep) {
+ if (snake && (y - yStart) % 2 !== 0) {
+ for (let x = xEnd - xStep; x !== xStart - xStep; x -= xStep) {
+ coords.push([x, y]);
+ }
+ } else {
+ for (let x = xStart; x !== xEnd; x += xStep) {
+ coords.push([x, y]);
+ }
+ }
+ }
+ } else if (mode === 'columns') {
+ for (let x = xStart; x !== xEnd; x += xStep) {
+ if (snake && (x - xStart) % 2 !== 0) {
+ for (let y = yEnd - yStep; y !== yStart - yStep; y -= yStep) {
+ coords.push([x, y]);
+ }
+ } else {
+ for (let y = yStart; y !== yEnd; y += yStep) {
+ coords.push([x, y]);
+ }
+ }
+ }
+ } else if (mode === 'circle-out') {
+ const cx = Math.floor(width / 2);
+ const cy = Math.floor(height / 2);
+ const maxRadius = Math.ceil(Math.sqrt(cx * cx + cy * cy));
+
+ for (let r = 0; r <= maxRadius; r++) {
+ for (let y = cy - r; y <= cy + r; y++) {
+ for (let x = cx - r; x <= cx + r; x++) {
+ if (x >= 0 && x < width && y >= 0 && y < height) {
+ const dist = Math.max(Math.abs(x - cx), Math.abs(y - cy));
+ if (dist === r) coords.push([x, y]);
+ }
+ }
+ }
+ }
+ } else if (mode === 'circle-in') {
+ const cx = Math.floor(width / 2);
+ const cy = Math.floor(height / 2);
+ const maxRadius = Math.ceil(Math.sqrt(cx * cx + cy * cy));
+
+ for (let r = maxRadius; r >= 0; r--) {
+ for (let y = cy - r; y <= cy + r; y++) {
+ for (let x = cx - r; x <= cx + r; x++) {
+ if (x >= 0 && x < width && y >= 0 && y < height) {
+ const dist = Math.max(Math.abs(x - cx), Math.abs(y - cy));
+ if (dist === r) coords.push([x, y]);
+ }
+ }
+ }
+ }
+ } else if (mode === 'blocks' || mode === 'shuffle-blocks') {
+ const blocks = [];
+ for (let by = 0; by < height; by += blockHeight) {
+ for (let bx = 0; bx < width; bx += blockWidth) {
+ const block = [];
+ for (let y = by; y < Math.min(by + blockHeight, height); y++) {
+ for (let x = bx; x < Math.min(bx + blockWidth, width); x++) {
+ block.push([x, y]);
+ }
+ }
+ blocks.push(block);
+ }
+ }
+
+ if (mode === 'shuffle-blocks') {
+ // Simple Fisher-Yates shuffle
+ for (let i = blocks.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [blocks[i], blocks[j]] = [blocks[j], blocks[i]];
+ }
+ }
+
+ // Concatenate all blocks
+ for (const block of blocks) {
+ coords.push(...block);
+ }
+ } else {
+ throw new Error(`Unknown mode: ${mode}`);
+ }
+
+ // Filter coordinates to start from the specified position
+ if (startFromX > 0 || startFromY > 0) {
+ console.log(`š Filtering coordinates to resume from position (${startFromX}, ${startFromY})`);
+ let startIndex = -1;
+
+ // Find the starting position in the coordinate list
+ for (let i = 0; i < coords.length; i++) {
+ const [x, y] = coords[i];
+ if (x === startFromX && y === startFromY) {
+ startIndex = i;
+ break;
+ }
+ }
+
+ if (startIndex >= 0) {
+ // Resume from the found position (skip all previous coordinates)
+ const filteredCoords = coords.slice(startIndex);
+ console.log(`āļø Resuming: skipped ${startIndex} coordinates, continuing with ${filteredCoords.length} remaining`);
+ return filteredCoords;
+ } else {
+ console.warn(`ā ļø Resume position (${startFromX}, ${startFromY}) not found in coordinate list, starting from beginning`);
+ }
+ }
+
+ return coords;
+ }
+
+ async function flushPixelBatch(pixelBatch) {
+ if (!pixelBatch || pixelBatch.pixels.length === 0) return true;
+
+ const batchSize = pixelBatch.pixels.length;
+ console.log(
+ `š¦ Sending batch with ${batchSize} pixels (region: ${pixelBatch.regionX},${pixelBatch.regionY})`
+ );
+ const success = await sendBatchWithRetry(
+ pixelBatch.pixels,
+ pixelBatch.regionX,
+ pixelBatch.regionY
+ );
+ if (success) {
+ pixelBatch.pixels.forEach((p) => {
+ state.paintedPixels++;
+ Utils.markPixelPainted(p.x, p.y, pixelBatch.regionX, pixelBatch.regionY);
+ });
+
+ // IMPORTANT: Decrement charges locally to match Acc-Switch.js behavior
+ state.displayCharges = Math.max(0, state.displayCharges - batchSize);
+ state.preciseCurrentCharges = Math.max(0, state.preciseCurrentCharges - batchSize);
+
+ state.fullChargeData = {
+ ...state.fullChargeData,
+ spentSinceShot: state.fullChargeData.spentSinceShot + batchSize,
+ };
+ await updateStats();
+ // Update account list with new charges
+ await updateCurrentAccountInList();
+ // Progress tracking removed from UI to reduce visual clutter
+ Utils.performSmartSave();
+
+ if (CONFIG.PAINTING_SPEED_ENABLED && state.paintingSpeed > 0 && batchSize > 0) {
+ const delayPerPixel = 1000 / state.paintingSpeed;
+ const totalDelay = Math.max(100, delayPerPixel * batchSize);
+ await Utils.sleep(totalDelay);
+ }
+ } else {
+ console.error(`ā Batch failed permanently after retries. Stopping painting.`);
+ state.stopFlag = true;
+ updateUI('paintingBatchFailed', 'error');
+ }
+
+ pixelBatch.pixels = [];
+ return success;
+ }
+
+ async function processImage() {
+ console.log('š Starting auto-swap enabled painting workflow');
+
+ try {
+ // Main painting cycle - repeats until image complete or stopped
+ while (!state.stopFlag) {
+ console.log('š Phase 1: Starting painting session');
+ const paintingResult = await executePaintingSession();
+
+ if (paintingResult === 'completed') {
+ console.log('š Image painting completed!');
+ break;
+ }
+
+ if (paintingResult === 'stopped') {
+ console.log('ā¹ļø Painting stopped by user');
+ break;
+ }
+
+ if (paintingResult === 'charges_depleted') {
+ if (!CONFIG.autoSwap) {
+ // Original workflow: cooldown period
+ console.log('ā±ļø Phase 2: Entering cooldown period (auto-swap disabled)');
+ const cooldownResult = await executeCooldownPeriod();
+
+ if (cooldownResult === 'stopped') {
+ console.log('ā¹ļø Cooldown stopped by user');
+ break;
+ }
+
+ // Phase 3: Regenerate token for next painting session
+ console.log('š Phase 3: Regenerating token for next session');
+ const tokenResult = await regenerateTokenForNewSession();
+
+ if (!tokenResult) {
+ console.log('ā Failed to regenerate token, stopping');
+ state.stopFlag = true;
+ break;
+ }
+ } else {
+ // Auto-swap workflow: simplified logic
+ console.log('š Auto-swap enabled: checking account switching options');
+
+ // Retrieve fresh accounts list each time to avoid stale data
+ const accounts = JSON.parse(localStorage.getItem("accounts")) || [];
+ console.log(`š Retrieved ${accounts.length} accounts from localStorage`);
+
+ if (accounts.length <= 1) {
+ console.log('š Only one account available, using standard cooldown');
+ const cooldownResult = await executeCooldownPeriod();
+ if (cooldownResult === 'stopped') break;
+
+ const tokenResult = await regenerateTokenForNewSession();
+ if (!tokenResult) {
+ state.stopFlag = true;
+ break;
+ }
+ } else {
+ // Debug current state
+ console.log(`š Account Status - Current ID: ${state.originalAccountOrder[state.currentActiveIndex]?.orderId}, Total IDs: ${state.originalAccountOrder.length}`);
+
+ // Check if we're at the last ID in the sequence
+ const isLastAccount = state.currentActiveIndex >= state.originalAccountOrder.length - 1;
+ console.log(`š Is last ID? ${isLastAccount} (ID ${state.originalAccountOrder[state.currentActiveIndex]?.orderId} of ${state.originalAccountOrder.length})`);
+
+ if (!isLastAccount) {
+ // Switch to next ID immediately (no cooldown)
+ const nextId = state.originalAccountOrder[state.currentActiveIndex + 1]?.orderId;
+ console.log(`š Switching to next ID ${nextId} (${state.currentActiveIndex + 2}/${state.originalAccountOrder.length})`);
+ const switchResult = await switchToNextAccount(accounts);
+ if (!switchResult) {
+ console.log('ā Account switch failed, stopping');
+ state.stopFlag = true;
+ break;
+ }
+ // Continue painting with new account immediately
+ continue;
+ } else {
+ // Last account reached - use cooldown then switch to ID 1 (first account)
+ console.log('ā±ļø Last account reached, entering cooldown period');
+ console.log(`š Current ID: ${state.originalAccountOrder[state.currentActiveIndex]?.orderId}, Last ID: ${state.originalAccountOrder[state.originalAccountOrder.length - 1]?.orderId}`);
+
+ const cooldownResult = await executeCooldownPeriod();
+ if (cooldownResult === 'stopped') break;
+
+ // After cooldown, switch to ID 1 (first account in order)
+ console.log('š Cooldown complete, switching to ID 1 (first account)');
+ console.log(`š Before switch - Current ID: ${state.originalAccountOrder[state.currentActiveIndex]?.orderId}, Target: ID 1`);
+
+ const firstAccountInfo = state.originalAccountOrder[0]; // ID 1 is always at index 0
+ const firstAccountToken = firstAccountInfo?.token;
+
+ if (!firstAccountToken) {
+ console.log('ā First account (ID 1) token not found, stopping');
+ state.stopFlag = true;
+ break;
+ }
+
+ // Reset to first position (ID 1)
+ state.currentActiveIndex = 0;
+
+ // Update accountIndex to match the position in accounts array
+ const accountsIndex = accounts.findIndex(token => token === firstAccountToken);
+ if (accountsIndex !== -1) {
+ state.accountIndex = accountsIndex;
+ }
+
+ const switchResult = await switchToSpecificAccount(firstAccountToken, 0);
+ if (!switchResult) {
+ console.log('ā Switch to ID 1 failed, stopping');
+ state.stopFlag = true;
+ break;
+ }
+
+ console.log(`ā Successfully switched to ID 1 (${firstAccountInfo.displayName}). Cycle restarted.`);
+ // Continue painting with first account
+ continue;
+ }
+ }
+ }
+ }
+
+ console.log('š Cycle complete, starting next painting session');
+ }
+ } finally {
+ await finalizePaintingProcess();
+ }
+ }
+
+ // Phase 1: Execute a complete painting session using all available charges
+ async function executePaintingSession() {
+ console.log('šØ Starting painting session - using all charges until 0');
+ const { width, height, pixels } = state.imageData;
+ const { x: startX, y: startY } = state.startPosition;
+ const { x: regionX, y: regionY } = state.region;
+
+ // Check if we're working with restored data by looking for existing availableColors
+ const isRestoredData = state.availableColors && state.availableColors.length > 0 && state.colorsChecked;
+
+ if (!isRestoredData) {
+ // Wait for original tiles to load if needed
+ const tilesReady = await overlayManager.waitForTiles(
+ regionX,
+ regionY,
+ width,
+ height,
+ startX,
+ startY,
+ 10000 // timeout 10s
+ );
+
+ if (!tilesReady) {
+ updateUI('overlayTilesNotLoaded', 'error');
+ state.stopFlag = true;
+ return 'stopped';
+ }
+ }
+
+ let pixelBatch = null;
+ let skippedPixels = {
+ transparent: 0,
+ white: 0,
+ alreadyPainted: 0,
+ colorUnavailable: 0,
+ };
+
+ // IMPORTANT: Check charges once at start, then paint until depleted
+ console.log('š Checking initial charges for painting session');
+ const initialChargeCheck = await WPlaceService.getCharges();
+ state.displayCharges = Math.floor(initialChargeCheck.charges);
+ state.preciseCurrentCharges = initialChargeCheck.charges;
+ state.cooldown = initialChargeCheck.cooldown;
+ await updateStats();
+ if (state.displayCharges <= 0) {
+ console.log('ā” No charges available, skipping painting session');
+ return 'charges_depleted';
+ }
+
+ console.log(`š Starting with ${state.displayCharges} charges - painting until depleted`);
+
+ // Paint pixels until we run out of charges or complete the image
+ try {
+ const coords = generateCoordinates(
+ width,
+ height,
+ state.coordinateMode,
+ state.coordinateDirection,
+ state.coordinateSnake,
+ state.blockWidth,
+ state.blockHeight,
+ state.lastPosition.x,
+ state.lastPosition.y
+ );
+
+ // OPTIMIZATION: Pre-filter already painted pixels (happens only once per session)
+ let eligibleCoords = [];
+ let alreadyPaintedCount = 0;
+
+ // Log resume information if applicable
+ if (state.lastPosition.x > 0 || state.lastPosition.y > 0) {
+ console.log(`š Resuming painting from position (${state.lastPosition.x}, ${state.lastPosition.y})`);
+ console.log(`š Current progress: ${state.paintedPixels} pixels painted`);
+ }
+
+ if (!state.preFilteringDone) {
+ console.log('š Pre-filtering already painted pixels (one-time detection for this session)...');
+
+ for (const [x, y] of coords) {
+ const targetPixelInfo = checkPixelEligibility(x, y);
+
+ if (!targetPixelInfo.eligible) {
+ if (targetPixelInfo.reason !== 'alreadyPainted') {
+ skippedPixels[targetPixelInfo.reason]++;
+
+ }
+ continue;
+ }
+
+ // Check if already painted (only once per session)
+ let absX = startX + x;
+ let absY = startY + y;
+ let adderX = Math.floor(absX / 1000);
+ let adderY = Math.floor(absY / 1000);
+ let pixelX = absX % 1000;
+ let pixelY = absY % 1000;
+
+ try {
+ const tilePixelRGBA = await overlayManager.getTilePixelColor(
+ regionX + adderX,
+ regionY + adderY,
+ pixelX,
+ pixelY
+ );
+
+ if (tilePixelRGBA && Array.isArray(tilePixelRGBA)) {
+ const mappedCanvasColor = Utils.resolveColor(
+ tilePixelRGBA.slice(0, 3),
+ state.availableColors,
+ !state.paintUnavailablePixels // Use same parameter as target pixel
+ );
+ const isMatch = mappedCanvasColor.id === targetPixelInfo.mappedColorId;
+ if (isMatch) {
+ alreadyPaintedCount++;
+ // Add detected already-painted pixels to progress (after reset to 0)
+ state.paintedPixels++;
+ Utils.markPixelPainted(x, y, regionX + adderX, regionY + adderY);
+ continue; // Skip already painted pixels
+ }
+ }
+ } catch (e) {
+ // If we can't check, include the pixel (better to attempt than skip)
+ }
+
+ // Add eligible unpainted pixel to list
+ eligibleCoords.push([x, y, targetPixelInfo]);
+ }
+
+ // Mark pre-filtering as done for this session
+ state.preFilteringDone = true;
+
+ // Log pre-filtering results
+ if (alreadyPaintedCount > 0) {
+ console.log(`ā Pre-filter complete: ${alreadyPaintedCount} already painted pixels detected and added to progress`);
+ console.log('ā¹ļø This detection will not happen again until a new image/save is loaded');
+ // Update UI to reflect the new progress immediately
+ await updateStats();
+ }
+ skippedPixels.alreadyPainted = alreadyPaintedCount;
+ } else {
+ // Pre-filtering already done this session, just filter for basic eligibility
+ console.log('š Using existing pre-filter results (already done this session)');
+ for (const [x, y] of coords) {
+ const targetPixelInfo = checkPixelEligibility(x, y);
+
+ if (!targetPixelInfo.eligible) {
+ if (targetPixelInfo.reason !== 'alreadyPainted') {
+ skippedPixels[targetPixelInfo.reason]++;
+ }
+ continue;
+ }
+
+ // Only include pixels that haven't been marked as painted yet
+ let absX = startX + x;
+ let absY = startY + y;
+ let adderX = Math.floor(absX / 1000);
+ let adderY = Math.floor(absY / 1000);
+
+ if (!Utils.isPixelPainted(x, y, regionX + adderX, regionY + adderY)) {
+ eligibleCoords.push([x, y, targetPixelInfo]);
+ }
+ }
+ }
+
+ // Paint eligible pixels (already pre-filtered, no duplicate checks)
+ outerLoop: for (const [x, y, targetPixelInfo] of eligibleCoords) {
+ if (state.stopFlag) {
+ if (pixelBatch && pixelBatch.pixels.length > 0) {
+ console.log(`šÆ Sending last batch before stop with ${pixelBatch.pixels.length} pixels`);
+ await flushPixelBatch(pixelBatch);
+ }
+ state.lastPosition = { x, y };
+ // Removed 'Paused at' message from main panel to reduce UI clutter
+ return 'stopped';
+ }
+
+ // Check if we have charges left (local count, no API call)
+ if (state.displayCharges <= 0) {
+ // console.log("Try to buy paint charges");
+ // await purchase("paint_charges");
+ await updateStats();
+ if (state.displayCharges <= 0) {
+ console.log('ā” No charges left (local count), ending painting session');
+ if (pixelBatch && pixelBatch.pixels.length > 0) {
+ console.log(`šÆ Sending final batch with ${pixelBatch.pixels.length} pixels`);
+ await flushPixelBatch(pixelBatch);
+ }
+ state.lastPosition = { x, y };
+ return 'charges_depleted';
+ }
+ // else {
+ // console.log(`š Charges after purchase: ${state.displayCharges}, continuing painting`);
+ // }
+ }
+
+ let absX = startX + x;
+ let absY = startY + y;
+
+ let adderX = Math.floor(absX / 1000);
+ let adderY = Math.floor(absY / 1000);
+ let pixelX = absX % 1000;
+ let pixelY = absY % 1000;
+
+ const targetMappedColorId = targetPixelInfo.mappedColorId;
+
+ // Set up pixel batch for new region if needed
+ if (
+ !pixelBatch ||
+ pixelBatch.regionX !== regionX + adderX ||
+ pixelBatch.regionY !== regionY + adderY
+ ) {
+ if (pixelBatch && pixelBatch.pixels.length > 0) {
+ console.log(`š Sending region-change batch with ${pixelBatch.pixels.length} pixels`);
+ const success = await flushPixelBatch(pixelBatch);
+ if (!success) {
+ console.error(`ā Batch failed permanently after retries. Stopping painting.`);
+ state.stopFlag = true;
+ return 'stopped';
+ }
+ await updateStats();
+ }
+
+ pixelBatch = {
+ regionX: regionX + adderX,
+ regionY: regionY + adderY,
+ pixels: [],
+ };
+ }
+
+ // Add pixel to batch (no need to check again - already pre-filtered)
+ pixelBatch.pixels.push({
+ x: pixelX,
+ y: pixelY,
+ color: targetMappedColorId,
+ localX: x,
+ localY: y,
+ });
+
+ // Send batch if it's full
+ const maxBatchSize = calculateBatchSize();
+ if (pixelBatch.pixels.length >= maxBatchSize) {
+ console.log(`š¦ Sending batch with ${pixelBatch.pixels.length} pixels`);
+ const success = await flushPixelBatch(pixelBatch);
+ if (!success) {
+ console.error(`ā Batch failed permanently after retries. Stopping painting.`);
+ state.stopFlag = true;
+ return 'stopped';
+ }
+ pixelBatch.pixels = [];
+ await updateStats();
+ }
+ }
+
+ // Send final batch if any pixels remain
+ if (pixelBatch && pixelBatch.pixels.length > 0 && !state.stopFlag) {
+ console.log(`š Sending final batch with ${pixelBatch.pixels.length} pixels`);
+ const success = await flushPixelBatch(pixelBatch);
+ if (!success) {
+ console.warn(`ā ļø Final batch failed with ${pixelBatch.pixels.length} pixels`);
+ }
+ }
+
+ // If we completed the entire coordinate loop, image is complete
+ return state.stopFlag ? 'stopped' : 'completed';
+
+ } finally {
+ // Log skip statistics for this session
+ console.log(`š Session Statistics:`);
+ console.log(` New pixels painted: ${state.paintedPixels - (skippedPixels.alreadyPainted || 0)}`);
+ console.log(` Already painted detected: ${skippedPixels.alreadyPainted}`);
+ console.log(` Total progress: ${state.paintedPixels}`);
+ console.log(` Pre-filtered - Transparent: ${skippedPixels.transparent}`);
+ console.log(` Pre-filtered - White: ${skippedPixels.white}`);
+ console.log(` Pre-filtered - Color Unavailable: ${skippedPixels.colorUnavailable}`);
+ }
+ }
+
+ // Phase 2: Execute cooldown period - wait for target charges (NO token regeneration)
+ async function executeCooldownPeriod() {
+ console.log('ā±ļø Entering cooldown period - waiting for target charges');
+ console.log('š« NO token regeneration during cooldown (even if expired/invalid)');
+
+ // Check initial charges to calculate wait time
+ let chargeCheckCount = 0;
+ // const maxChargeChecks = 10; // REMOVED: No limit on API calls during cooldown
+
+ while (!state.stopFlag) {
+ chargeCheckCount++;
+
+ const { charges, cooldown } = await WPlaceService.getCharges();
+ state.displayCharges = Math.floor(charges);
+ state.preciseCurrentCharges = charges;
+ state.cooldown = cooldown;
+
+ if (state.displayCharges >= state.cooldownChargeThreshold) {
+ console.log(`ā Cooldown target reached: ${state.displayCharges}/${state.cooldownChargeThreshold}`);
+ NotificationManager.maybeNotifyChargesReached(true);
+ await updateStats();
+ return 'target_reached';
+ }
+
+ updateUI('noChargesThreshold', 'warning', {
+ time: Utils.msToTimeText(state.cooldown),
+ threshold: state.cooldownChargeThreshold,
+ current: state.displayCharges,
+ });
+ await updateStats();
+
+ // Smart delay calculation to reduce API calls
+ const chargesNeeded = state.cooldownChargeThreshold - state.displayCharges;
+ const estimatedWaitTime = chargesNeeded * state.cooldown;
+
+ // Use longer delays during cooldown to prevent rate limiting
+ let delayTime;
+ if (chargeCheckCount < 3) {
+ // First few checks - shorter delay
+ delayTime = Math.max(3000, state.cooldown); // 3 seconds minimum
+ } else if (estimatedWaitTime > 60000) {
+ // Long wait expected - check every 15 seconds
+ delayTime = 10000;
+ } else if (estimatedWaitTime > 30000) {
+ // Medium wait - check every 15 seconds
+ delayTime = 15000;
+ } else {
+ // Close to target - check every 5 seconds
+ delayTime = 5000;
+ }
+
+ console.log(`ā±ļø Cooldown check ${chargeCheckCount}: ${state.displayCharges}/${state.cooldownChargeThreshold} charges, waiting 10s before next check`);
+ await Utils.sleep(10000);
+
+ // REMOVED: No limit on charge checks - bot will wait infinitely until charges are available
+ // if (chargeCheckCount >= maxChargeChecks) {
+ // console.warn('ā ļø Max charge checks reached during cooldown, continuing anyway');
+ // break;
+ // }
+ }
+
+ return 'stopped';
+ }
+
+ // Phase 3: Regenerate token for new painting session
+ async function regenerateTokenForNewSession() {
+ console.log('š Regenerating token for new painting session');
+
+ try {
+ // Force regenerate token for new session
+ await ensureToken(true); // forceRefresh = true
+
+ if (!getTurnstileToken()) {
+ console.error('ā Failed to generate token for new session');
+ return false;
+ }
+
+ console.log('ā Token regenerated successfully for new session');
+ return true;
+ } catch (error) {
+ console.error('ā Token regeneration failed:', error);
+ return false;
+ }
+ }
+
+ // Finalize painting process cleanup
+ async function finalizePaintingProcess() {
+ console.log('š§¹ Finalizing painting process');
+
+ if (window._chargesInterval) {
+ clearInterval(window._chargesInterval);
+ window._chargesInterval = null;
+ }
+
+ if (state.stopFlag) {
+ // Save progress when stopped to preserve painted map
+ Utils.saveProgress();
+ } else {
+ updateUI('paintingComplete', 'success', { count: state.paintedPixels });
+ state.lastPosition = { x: 0, y: 0 }; // Only reset when truly complete
+ Utils.saveProgress(); // Save final complete state
+ overlayManager.clear();
+ const toggleOverlayBtn = document.getElementById('toggleOverlayBtn');
+ if (toggleOverlayBtn) {
+ toggleOverlayBtn.classList.remove('active');
+ toggleOverlayBtn.disabled = true;
+ }
+ }
+ }
+
+ // Helper function to check pixel eligibility (shared by painting functions)
+ function checkPixelEligibility(x, y) {
+ const { width, height, pixels } = state.imageData;
+ const transparencyThreshold = state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD;
+
+ // CRITICAL FIX: Check module availability before processing
+ if (!Utils || typeof Utils.isWhitePixel !== 'function') {
+ console.error('ā Utils module not available for pixel eligibility check');
+ return {
+ eligible: false,
+ reason: 'moduleUnavailable',
+ };
+ }
+
+ const idx = (y * width + x) * 4;
+ const r = pixels[idx],
+ g = pixels[idx + 1],
+ b = pixels[idx + 2],
+ a = pixels[idx + 3];
+
+ if (!state.paintTransparentPixels && a < transparencyThreshold)
+ return {
+ eligible: false,
+ reason: 'transparent',
+ };
+ if (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))
+ return {
+ eligible: false,
+ reason: 'white',
+ };
+
+ let targetRgb = Utils.isWhitePixel(r, g, b)
+ ? [255, 255, 255]
+ : Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette);
+
+ const mappedTargetColorId = Utils.resolveColor(
+ targetRgb,
+ state.availableColors,
+ !state.paintUnavailablePixels
+ );
+
+ if (!state.paintUnavailablePixels && !mappedTargetColorId.id) {
+ return {
+ eligible: false,
+ reason: 'colorUnavailable',
+ r,
+ g,
+ b,
+ a,
+ mappedColorId: mappedTargetColorId.id,
+ };
+ }
+ return { eligible: true, r, g, b, a, mappedColorId: mappedTargetColorId.id };
+ }
+
+ // Helper function to skip pixel and log the reason (minimized logging)
+ function skipPixel(reason, id, rgb, x, y, skippedPixels) {
+ // Minimize logging to prevent console flooding - only log non-routine skips
+ if (reason !== 'transparent' && reason !== 'alreadyPainted') {
+ console.log(`Skipped pixel for ${reason} (id: ${id}, (${rgb.join(', ')})) at (${x}, ${y})`);
+ }
+ skippedPixels[reason]++;
+ }
+ function calculateBatchSize() {
+ let targetBatchSize;
+
+ if (state.batchMode === 'random') {
+ // Generate random batch size within the specified range
+ const min = Math.max(1, state.randomBatchMin);
+ const max = Math.max(min, state.randomBatchMax);
+ targetBatchSize = Math.floor(Math.random() * (max - min + 1)) + min;
+ console.log(`š² Random batch size generated: ${targetBatchSize} (range: ${min}-${max})`);
+ } else {
+ // Normal mode - use the fixed paintingSpeed value
+ targetBatchSize = state.paintingSpeed;
+ }
+
+ // Always limit by available charges
+ const maxAllowed = state.displayCharges;
+ const finalBatchSize = Math.min(targetBatchSize, maxAllowed);
+
+ return finalBatchSize;
+ }
+
+ // Helper function to retry batch until success with exponential backoff
+ async function sendBatchWithRetry(pixels, regionX, regionY, maxRetries = MAX_BATCH_RETRIES) {
+ let attempt = 0;
+ while (attempt < maxRetries && !state.stopFlag) {
+ attempt++;
+ console.log(
+ `š Attempting to send batch (attempt ${attempt}/${maxRetries}) for region ${regionX},${regionY} with ${pixels.length} pixels`
+ );
+
+ const result = await sendPixelBatch(pixels, regionX, regionY);
+
+ if (result === true) {
+ console.log(`ā Batch succeeded on attempt ${attempt}`);
+ return true;
+ } else if (result === 'token_error') {
+ console.log(`š Token error on attempt ${attempt} - no token available during processing`);
+ console.log(`ā Stopping batch processing - tokens must be generated at startup/start button only`);
+ updateUI('captchaFailed', 'error');
+ return false; // Stop processing entirely - don't regenerate during processing
+ } else if (result === 'token_regenerated') {
+ console.log(`š Token regenerated on attempt ${attempt} after 403 error - retrying batch`);
+ updateUI('paintingPaused', 'warning', { message: 'Token refreshed, resuming...' });
+ // Don't count token regeneration as a failed attempt, retry immediately
+ attempt--;
+ await Utils.sleep(500); // Brief pause before retry
+ continue;
+ } else if (result === 'token_regeneration_failed') {
+ console.log(`ā Token regeneration failed on attempt ${attempt} after 403 error`);
+ updateUI('captchaFailed', 'error');
+ return false; // Stop processing if we can't get a valid token
+ } else if (result === 'invalid_token_error') {
+ console.log(`š Invalid token detected on attempt ${attempt}, regenerating...`);
+ updateUI('captchaSolving', 'warning');
+ try {
+ await handleCaptcha(true); // Allow generation for invalid token cases
+ // Don't count token regeneration as a failed attempt
+ attempt--;
+ continue;
+ } catch (e) {
+ console.error(`ā Token regeneration failed after invalid token on attempt ${attempt}:`, e);
+ updateUI('captchaFailed', 'error');
+ // Wait longer before retrying after token failure
+ await Utils.sleep(5000);
+ }
+ } else {
+ console.warn(`ā ļø Batch failed on attempt ${attempt}, retrying...`);
+ // Exponential backoff with jitter
+ const baseDelay = Math.min(1000 * Math.pow(2, attempt - 1), 30000); // Max 30s
+ const jitter = Math.random() * 1000; // Add up to 1s random delay
+ await Utils.sleep(baseDelay + jitter);
+ }
+ }
+
+ if (attempt >= maxRetries) {
+ console.error(
+ `ā Batch failed after ${maxRetries} attempts (MAX_BATCH_RETRIES=${MAX_BATCH_RETRIES}). This will stop painting to prevent infinite loops.`
+ );
+ updateUI('paintingError', 'error');
+ return false;
+ }
+
+ return false;
+ }
+
+ async function sendPixelBatch(pixelBatch, regionX, regionY) {
+ let token = getTurnstileToken();
+
+ // Don't auto-generate tokens during processing - return error if no token available
+ if (!token) {
+ console.warn('ā ļø No token available and auto-generation disabled during processing');
+ return 'token_error';
+ }
+
+ const coords = new Array(pixelBatch.length * 2);
+ const colors = new Array(pixelBatch.length);
+ for (let i = 0; i < pixelBatch.length; i++) {
+ const pixel = pixelBatch[i];
+ coords[i * 2] = pixel.x;
+ coords[i * 2 + 1] = pixel.y;
+ colors[i] = pixel.color;
+ }
+
+ try {
+ const payload = { coords, colors, t: token, fp: fpStr32 };
+ var wasmtoken = await createWasmToken(regionX, regionY, payload);
+ const res = await fetch(`https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'text/plain;charset=UTF-8', "x-pawtect-token": wasmtoken },
+ credentials: 'include',
+ body: JSON.stringify(payload),
+ });
+
+ if (res.status === 403) {
+ let data = null;
+ try {
+ data = await res.json();
+ } catch (_) { }
+ console.error('ā 403 Forbidden. Token invalid during painting - regeneration allowed.');
+
+ // 403 errors during painting allow token regeneration per workflow requirements
+ console.log('ļæ½ Token invalid (403) during painting - regenerating token as allowed by workflow');
+ setTurnstileToken(null);
+ createTokenPromise();
+
+ // Attempt to regenerate token immediately
+ const newToken = await ensureToken(true);
+ if (newToken) {
+ console.log('ā Token regenerated after 403 error, returning regenerate signal');
+ return 'token_regenerated';
+ } else {
+ console.error('ā Failed to regenerate token after 403 error');
+ return 'token_regeneration_failed';
+ }
+ }
+
+ const data = await res.json();
+ return data?.painted === pixelBatch.length;
+ } catch (e) {
+ console.error('Batch paint request failed:', e);
+ return false;
+ }
+ }
+
+ function saveBotSettings() {
+ try {
+ const settings = {
+ paintingSpeed: state.paintingSpeed,
+ paintingSpeedEnabled: document.getElementById('enableSpeedToggle')?.checked,
+ batchMode: state.batchMode, // "normal" or "random"
+ randomBatchMin: state.randomBatchMin,
+ randomBatchMax: state.randomBatchMax,
+ cooldownChargeThreshold: state.cooldownChargeThreshold,
+ tokenSource: state.tokenSource, // "generator", "hybrid", or "manual"
+ minimized: state.minimized,
+ overlayOpacity: state.overlayOpacity,
+ blueMarbleEnabled: document.getElementById('enableBlueMarbleToggle')?.checked,
+ ditheringEnabled: state.ditheringEnabled,
+ colorMatchingAlgorithm: state.colorMatchingAlgorithm,
+ enableChromaPenalty: state.enableChromaPenalty,
+ chromaPenaltyWeight: state.chromaPenaltyWeight,
+ customTransparencyThreshold: state.customTransparencyThreshold,
+ customWhiteThreshold: state.customWhiteThreshold,
+ paintWhitePixels: state.paintWhitePixels,
+ paintTransparentPixels: state.paintTransparentPixels,
+ resizeSettings: state.resizeSettings,
+ paintUnavailablePixels: state.paintUnavailablePixels,
+ coordinateMode: state.coordinateMode,
+ coordinateDirection: state.coordinateDirection,
+ coordinateSnake: state.coordinateSnake,
+ blockWidth: state.blockWidth,
+ blockHeight: state.blockHeight, // Save ignore mask (as base64) with its dimensions
+ resizeIgnoreMask:
+ state.resizeIgnoreMask &&
+ state.resizeSettings &&
+ state.resizeSettings.width * state.resizeSettings.height === state.resizeIgnoreMask.length
+ ? {
+ w: state.resizeSettings.width,
+ h: state.resizeSettings.height,
+ data: btoa(String.fromCharCode(...state.resizeIgnoreMask)),
+ }
+ : null, // Notifications
+ notificationsEnabled: state.notificationsEnabled,
+ notifyOnChargesReached: state.notifyOnChargesReached,
+ notifyOnlyWhenUnfocused: state.notifyOnlyWhenUnfocused,
+ notificationIntervalMinutes: state.notificationIntervalMinutes,
+ originalImage: state.originalImage,
+ };
+ CONFIG.PAINTING_SPEED_ENABLED = settings.paintingSpeedEnabled;
+ // AUTO_CAPTCHA_ENABLED is always true - no need to save/load
+
+ localStorage.setItem('wplace-bot-settings', JSON.stringify(settings));
+ } catch (e) {
+ console.warn('Could not save bot settings:', e);
+ }
+ }
+
+ function loadBotSettings() {
+ try {
+ const saved = localStorage.getItem('wplace-bot-settings');
+ if (!saved) return;
+ const settings = JSON.parse(saved);
+
+ state.paintingSpeed = settings.paintingSpeed || CONFIG.PAINTING_SPEED.DEFAULT;
+ state.batchMode = settings.batchMode || CONFIG.BATCH_MODE; // Default to "normal"
+ state.randomBatchMin = settings.randomBatchMin || CONFIG.RANDOM_BATCH_RANGE.MIN;
+ state.randomBatchMax = settings.randomBatchMax || CONFIG.RANDOM_BATCH_RANGE.MAX;
+ state.cooldownChargeThreshold =
+ settings.cooldownChargeThreshold || CONFIG.COOLDOWN_CHARGE_THRESHOLD;
+ state.tokenSource = settings.tokenSource || CONFIG.TOKEN_SOURCE; // Default to "generator"
+ state.minimized = settings.minimized ?? false;
+ CONFIG.PAINTING_SPEED_ENABLED = settings.paintingSpeedEnabled ?? false;
+ CONFIG.AUTO_CAPTCHA_ENABLED = settings.autoCaptchaEnabled ?? false;
+ state.overlayOpacity = settings.overlayOpacity ?? CONFIG.OVERLAY.OPACITY_DEFAULT;
+ state.blueMarbleEnabled = settings.blueMarbleEnabled ?? CONFIG.OVERLAY.BLUE_MARBLE_DEFAULT;
+ state.ditheringEnabled = settings.ditheringEnabled ?? false;
+ state.colorMatchingAlgorithm = settings.colorMatchingAlgorithm || 'lab';
+ state.enableChromaPenalty = settings.enableChromaPenalty ?? true;
+ state.chromaPenaltyWeight = settings.chromaPenaltyWeight ?? 0.15;
+ state.customTransparencyThreshold =
+ settings.customTransparencyThreshold ?? CONFIG.TRANSPARENCY_THRESHOLD;
+ state.customWhiteThreshold = settings.customWhiteThreshold ?? CONFIG.WHITE_THRESHOLD;
+ state.paintWhitePixels = settings.paintWhitePixels ?? true;
+ state.paintTransparentPixels = settings.paintTransparentPixels ?? false;
+ state.resizeSettings = settings.resizeSettings ?? null;
+ state.originalImage = settings.originalImage ?? null;
+ state.paintUnavailablePixels = settings.paintUnavailablePixels ?? CONFIG.PAINT_UNAVAILABLE;
+ state.coordinateMode = settings.coordinateMode ?? CONFIG.COORDINATE_MODE;
+ state.coordinateDirection = settings.coordinateDirection ?? CONFIG.COORDINATE_DIRECTION;
+ state.coordinateSnake = settings.coordinateSnake ?? CONFIG.COORDINATE_SNAKE;
+ state.blockWidth = settings.blockWidth ?? CONFIG.COORDINATE_BLOCK_WIDTH;
+ state.blockHeight = settings.blockHeight ?? CONFIG.COORDINATE_BLOCK_HEIGHT;
+ // Notifications
+ state.notificationsEnabled = settings.notificationsEnabled ?? CONFIG.NOTIFICATIONS.ENABLED;
+ state.notifyOnChargesReached =
+ settings.notifyOnChargesReached ?? CONFIG.NOTIFICATIONS.ON_CHARGES_REACHED;
+ state.notifyOnlyWhenUnfocused =
+ settings.notifyOnlyWhenUnfocused ?? CONFIG.NOTIFICATIONS.ONLY_WHEN_UNFOCUSED;
+ state.notificationIntervalMinutes =
+ settings.notificationIntervalMinutes ?? CONFIG.NOTIFICATIONS.REPEAT_MINUTES;
+ // Restore ignore mask if dims match current resizeSettings
+ if (
+ settings.resizeIgnoreMask &&
+ settings.resizeIgnoreMask.data &&
+ state.resizeSettings &&
+ settings.resizeIgnoreMask.w === state.resizeSettings.width &&
+ settings.resizeIgnoreMask.h === state.resizeSettings.height
+ ) {
+ try {
+ const bin = atob(settings.resizeIgnoreMask.data);
+ const arr = new Uint8Array(bin.length);
+ for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
+ state.resizeIgnoreMask = arr;
+ } catch {
+ state.resizeIgnoreMask = null;
+ }
+ } else {
+ state.resizeIgnoreMask = null;
+ }
+ // Initialize coordinate generation UI
+ const coordinateModeSelect = document.getElementById('coordinateModeSelect');
+ if (coordinateModeSelect) coordinateModeSelect.value = state.coordinateMode;
+
+ const coordinateDirectionSelect = document.getElementById('coordinateDirectionSelect');
+ if (coordinateDirectionSelect) coordinateDirectionSelect.value = state.coordinateDirection;
+
+ const coordinateSnakeToggle = document.getElementById('coordinateSnakeToggle');
+ if (coordinateSnakeToggle) coordinateSnakeToggle.checked = state.coordinateSnake;
+
+ const settingsContainer = document.getElementById('wplace-settings-container');
+ const directionControls = settingsContainer.querySelector('#directionControls');
+ const snakeControls = settingsContainer.querySelector('#snakeControls');
+ const blockControls = settingsContainer.querySelector('#blockControls');
+ Utils.updateCoordinateUI({
+ mode: state.coordinateMode,
+ directionControls,
+ snakeControls,
+ blockControls,
+ });
+
+ const paintUnavailablePixelsToggle = document.getElementById('paintUnavailablePixelsToggle');
+ if (paintUnavailablePixelsToggle) {
+ paintUnavailablePixelsToggle.checked = state.paintUnavailablePixels;
+ }
+
+ const settingsPaintWhiteToggle = settingsContainer.querySelector('#settingsPaintWhiteToggle');
+ if (settingsPaintWhiteToggle) {
+ settingsPaintWhiteToggle.checked = state.paintWhitePixels;
+ }
+
+ const settingsPaintTransparentToggle = settingsContainer.querySelector(
+ '#settingsPaintTransparentToggle'
+ );
+ if (settingsPaintTransparentToggle) {
+ settingsPaintTransparentToggle.checked = state.paintTransparentPixels;
+ }
+
+ const speedSlider = document.getElementById('speedSlider');
+ const speedInput = document.getElementById('speedInput');
+ const speedValue = document.getElementById('speedValue');
+ if (speedSlider) speedSlider.value = state.paintingSpeed;
+ if (speedInput) speedInput.value = state.paintingSpeed;
+ if (speedValue) speedValue.textContent = `pixels`;
+
+ const enableSpeedToggle = document.getElementById('enableSpeedToggle');
+ if (enableSpeedToggle) enableSpeedToggle.checked = CONFIG.PAINTING_SPEED_ENABLED;
+
+ // Batch mode UI initialization
+ const batchModeSelect = document.getElementById('batchModeSelect');
+ if (batchModeSelect) batchModeSelect.value = state.batchMode;
+
+ const normalBatchControls = document.getElementById('normalBatchControls');
+ const randomBatchControls = document.getElementById('randomBatchControls');
+
+ // Show/hide appropriate controls based on batch mode
+ if (normalBatchControls && randomBatchControls) {
+ if (state.batchMode === 'random') {
+ normalBatchControls.style.display = 'none';
+ randomBatchControls.style.display = 'block';
+ } else {
+ normalBatchControls.style.display = 'block';
+ randomBatchControls.style.display = 'none';
+ }
+ }
+
+ const randomBatchMin = document.getElementById('randomBatchMin');
+ if (randomBatchMin) randomBatchMin.value = state.randomBatchMin;
+
+ const randomBatchMax = document.getElementById('randomBatchMax');
+ if (randomBatchMax) randomBatchMax.value = state.randomBatchMax;
+
+ // AUTO_CAPTCHA_ENABLED is always true - no toggle to set
+
+ const cooldownSlider = document.getElementById('cooldownSlider');
+ const cooldownInput = document.getElementById('cooldownInput');
+ const cooldownValue = document.getElementById('cooldownValue');
+ if (cooldownSlider) cooldownSlider.value = state.cooldownChargeThreshold;
+ if (cooldownInput) cooldownInput.value = state.cooldownChargeThreshold;
+ if (cooldownValue) cooldownValue.textContent = `${Utils.t('charges')}`;
+
+ const overlayOpacitySlider = document.getElementById('overlayOpacitySlider');
+ if (overlayOpacitySlider) overlayOpacitySlider.value = state.overlayOpacity;
+ const overlayOpacityValue = document.getElementById('overlayOpacityValue');
+ if (overlayOpacityValue)
+ overlayOpacityValue.textContent = `${Math.round(state.overlayOpacity * 100)}%`;
+ const enableBlueMarbleToggle = document.getElementById('enableBlueMarbleToggle');
+ if (enableBlueMarbleToggle) enableBlueMarbleToggle.checked = state.blueMarbleEnabled;
+
+ const tokenSourceSelect = document.getElementById('tokenSourceSelect');
+ if (tokenSourceSelect) tokenSourceSelect.value = state.tokenSource;
+
+ const colorAlgorithmSelect = document.getElementById('colorAlgorithmSelect');
+ if (colorAlgorithmSelect) colorAlgorithmSelect.value = state.colorMatchingAlgorithm;
+ const enableChromaPenaltyToggle = document.getElementById('enableChromaPenaltyToggle');
+ if (enableChromaPenaltyToggle) enableChromaPenaltyToggle.checked = state.enableChromaPenalty;
+ const chromaPenaltyWeightSlider = document.getElementById('chromaPenaltyWeightSlider');
+ if (chromaPenaltyWeightSlider) chromaPenaltyWeightSlider.value = state.chromaPenaltyWeight;
+ const chromaWeightValue = document.getElementById('chromaWeightValue');
+ if (chromaWeightValue) chromaWeightValue.textContent = state.chromaPenaltyWeight;
+ const transparencyThresholdInput = document.getElementById('transparencyThresholdInput');
+ if (transparencyThresholdInput)
+ transparencyThresholdInput.value = state.customTransparencyThreshold;
+ const whiteThresholdInput = document.getElementById('whiteThresholdInput');
+ if (whiteThresholdInput) whiteThresholdInput.value = state.customWhiteThreshold;
+ // Notifications UI
+ const notifEnabledToggle = document.getElementById('notifEnabledToggle');
+ if (notifEnabledToggle) notifEnabledToggle.checked = state.notificationsEnabled;
+ const notifOnChargesToggle = document.getElementById('notifOnChargesToggle');
+ if (notifOnChargesToggle) notifOnChargesToggle.checked = state.notifyOnChargesReached;
+ const notifOnlyUnfocusedToggle = document.getElementById('notifOnlyUnfocusedToggle');
+ if (notifOnlyUnfocusedToggle)
+ notifOnlyUnfocusedToggle.checked = state.notifyOnlyWhenUnfocused;
+ const notifIntervalInput = document.getElementById('notifIntervalInput');
+ if (notifIntervalInput) notifIntervalInput.value = state.notificationIntervalMinutes;
+ NotificationManager.resetEdgeTracking();
+ } catch (e) {
+ console.warn('Could not load bot settings:', e);
+ }
+ }
+
+ // Initialize Turnstile generator integration
+ console.log('š WPlace Auto-Image with Turnstile Token Generator loaded');
+ console.log('š Turnstile token generator: ALWAYS ENABLED (Background mode)');
+ console.log('šÆ Manual pixel captcha solving: Available as fallback/alternative');
+ console.log('š± Turnstile widgets: DISABLED - pure background token generation only!');
+
+ // Generate fingerprint string for requests
+ if (!window.WPlaceTokenManager) {
+ console.error('ā WPlaceTokenManager not available - dependency loading issue');
+ return;
+ }
+ const fpStr32 = tokenManager._randStr(32);
+ console.log('š Generated fingerprint string for API requests');
+
+ // Function to enable file operations after initial startup setup is complete
+ function enableFileOperations() {
+ state.initialSetupComplete = true;
+
+ const loadBtn = document.querySelector('#loadBtn');
+ const loadFromFileBtn = document.querySelector('#loadFromFileBtn');
+ const uploadBtn = document.querySelector('#uploadBtn');
+
+ if (loadBtn) {
+ loadBtn.disabled = false;
+ loadBtn.title = '';
+ // Add a subtle animation to indicate the button is now available
+ loadBtn.style.animation = 'pulse 0.6s ease-in-out';
+ setTimeout(() => {
+ if (loadBtn) loadBtn.style.animation = '';
+ }, 600);
+ console.log('ā Load Progress button enabled after initial setup');
+ }
+
+ if (loadFromFileBtn) {
+ loadFromFileBtn.disabled = false;
+ loadFromFileBtn.title = '';
+ // Add a subtle animation to indicate the button is now available
+ loadFromFileBtn.style.animation = 'pulse 0.6s ease-in-out';
+ setTimeout(() => {
+ if (loadFromFileBtn) loadFromFileBtn.style.animation = '';
+ }, 600);
+ console.log('ā Load from File button enabled after initial setup');
+ }
+
+ if (uploadBtn) {
+ uploadBtn.disabled = false;
+ uploadBtn.title = '';
+ // Add a subtle animation to indicate the button is now available
+ uploadBtn.style.animation = 'pulse 0.6s ease-in-out';
+ setTimeout(() => {
+ if (uploadBtn) uploadBtn.style.animation = '';
+ }, 600);
+ console.log('ā Upload Image button enabled after initial setup');
+ }
+
+ // Enable Load Extracted button at the same time as Upload button
+ const loadExtractedBtn = document.getElementById('loadExtractedBtn');
+ if (loadExtractedBtn) {
+ loadExtractedBtn.disabled = false;
+ loadExtractedBtn.title = '';
+ console.log('ā Load Extracted button enabled after initial setup');
+ }
+
+ // Show a notification that file operations are now available
+ Utils.showAlert(Utils.t('fileOperationsAvailable'), 'success');
+ }
+
+ // Optimized token initialization with better timing and error handling
+ async function initializeTokenGenerator() {
+ // Skip if already have valid token
+ if (isTokenValid()) {
+ console.log('ā Valid token already available, skipping initialization');
+ updateUI('tokenReady', 'success');
+ enableFileOperations(); // Enable file operations since initial setup is complete
+ return;
+ }
+
+ try {
+ console.log('š§ Initializing Turnstile token generator...');
+ updateUI('initializingToken', 'default');
+
+ console.log('Attempting to load Turnstile script...');
+ await Utils.loadTurnstile();
+ console.log('Turnstile script loaded. Attempting to generate token...');
+
+ // Use TokenManager's handleCaptchaWithRetry method instead
+ const token = await tokenManager.handleCaptchaWithRetry();
+ if (token) {
+ setTurnstileToken(token);
+ console.log('ā Startup token generated successfully');
+ updateUI('tokenReady', 'success');
+ Utils.showAlert(Utils.t('tokenGeneratorReady'), 'success');
+ enableFileOperations(); // Enable file operations since initial setup is complete
+ } else {
+ console.warn(
+ 'ā ļø Startup token generation failed (no token received), will retry when needed'
+ );
+ updateUI('tokenRetryLater', 'warning');
+ // Still enable file operations even if initial token generation fails
+ // Users can load progress and use manual/hybrid modes
+ enableFileOperations();
+ }
+ } catch (error) {
+ console.error('ā Critical error during Turnstile initialization:', error); // More specific error
+ updateUI('tokenRetryLater', 'warning');
+ // Still enable file operations even if initial setup fails
+ // Users can load progress and use manual/hybrid modes
+ enableFileOperations();
+ // Don't show error alert for initialization failures, just log them
+ }
+ }
+
+ // Load theme preference immediately on startup before creating UI
+ loadThemePreference();
+ applyTheme();
+
+ var pawtect_chunk = null;
+
+ //find module if pawtect_chunk is null
+ pawtect_chunk ??= await findTokenModule("pawtect_wasm_bg.wasm");
+
+ async function createWasmToken(regionX, regionY, payload) {
+ try {
+ // Load the Pawtect module and WASM
+ const mod = await import(new URL('/_app/immutable/chunks/' + pawtect_chunk, location.origin).href);
+ let wasm;
+ try {
+ wasm = await mod._();
+ console.log('ā WASM initialized successfully');
+ } catch (wasmError) {
+ console.error('ā WASM initialization failed:', wasmError);
+ return null;
+ }
+ try {
+ try {
+ const me = await fetch(`https://backend.wplace.live/me`, { credentials: 'include' }).then(r => r.ok ? r.json() : null);
+ if (me?.id) {
+ mod.i(me.id);
+ console.log('ā user ID set:', me.id);
+ }
+ } catch { }
+ } catch (userIdError) {
+ console.log('ā ļø Error setting user ID:', userIdError.message);
+ }
+ try {
+ const testUrl = `https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`;
+ if (mod.r) {
+ mod.r(testUrl);
+ console.log('ā Request URL set:', testUrl);
+ } else {
+ console.log('ā ļø request_url function (mod.r) not available');
+ }
+ } catch (urlError) {
+ console.log('ā ļø Error setting request URL:', urlError.message);
+ }
+
+ // Create test payload
+
+ console.log('š payload:', payload);
+
+ // Encode payload
+ const enc = new TextEncoder();
+ const dec = new TextDecoder();
+ const bodyStr = JSON.stringify(payload);
+ const bytes = enc.encode(bodyStr);
+ console.log('š Payload size:', bytes.length, 'bytes');
+ console.log('š Payload string:', bodyStr);
+
+ // Allocate WASM memory with validation
+ let inPtr;
+ try {
+ if (!wasm.__wbindgen_malloc) {
+ console.error('ā __wbindgen_malloc function not found');
+ return null;
+ }
+
+ inPtr = wasm.__wbindgen_malloc(bytes.length, 1);
+ console.log('ā WASM memory allocated, pointer:', inPtr);
+
+ // Copy data to WASM memory
+ const wasmBuffer = new Uint8Array(wasm.memory.buffer, inPtr, bytes.length);
+ wasmBuffer.set(bytes);
+ console.log('ā Data copied to WASM memory');
+ } catch (memError) {
+ console.error('ā Memory allocation error:', memError);
+ return null;
+ }
+
+ // Call the WASM function
+ console.log('š Calling get_pawtected_endpoint_payload...');
+ let outPtr, outLen, token;
+ try {
+ const result = wasm.get_pawtected_endpoint_payload(inPtr, bytes.length);
+ console.log('ā Function called, result type:', typeof result, result);
+
+ if (Array.isArray(result) && result.length === 2) {
+ [outPtr, outLen] = result;
+ console.log('ā Got output pointer:', outPtr, 'length:', outLen);
+
+ // Decode the result
+ const outputBuffer = new Uint8Array(wasm.memory.buffer, outPtr, outLen);
+ token = dec.decode(outputBuffer);
+ console.log('ā Token decoded successfully');
+ } else {
+ console.error('ā Unexpected function result format:', result);
+ return null;
+ }
+ } catch (funcError) {
+ console.error('ā Function call error:', funcError);
+ console.error('Stack trace:', funcError.stack);
+ return null;
+ }
+
+ // Cleanup memory
+ try {
+ if (wasm.__wbindgen_free && outPtr && outLen) {
+ wasm.__wbindgen_free(outPtr, outLen, 1);
+ console.log('ā Output memory freed');
+ }
+ if (wasm.__wbindgen_free && inPtr) {
+ wasm.__wbindgen_free(inPtr, bytes.length, 1);
+ console.log('ā Input memory freed');
+ }
+ } catch (cleanupError) {
+ console.log('ā ļø Cleanup warning:', cleanupError.message);
+ }
+
+ // Display results
+ console.log('');
+ console.log('š SUCCESS!');
+ console.log('š Full token:');
+ console.log(token);
+ return token;
+ } catch (error) {
+ console.error('ā Failed to generate fp parameter:', error);
+ return null;
+ }
+ }
+
+ async function findTokenModule(str) {
+ console.log('š Searching for wasm Module...');
+ const links = Array.from(document.querySelectorAll('link[rel="modulepreload"][href$=".js"]'));
+
+ for (const link of links) {
+ try {
+ const url = new URL(link.getAttribute("href"), location.origin).href;
+ const code = await fetch(url).then(r => r.text());
+ if (code.includes(str)) {
+ console.log('ā Found wasm Module...');
+ return url.split('/').pop();
+ }
+ } catch { }
+ }
+ console.error(`ā Could not find Pawtect chunk: `, error);
+ }
+
+ async function purchase(type) {
+ // loadThemePreference()
+ let id;
+ let chargeMultiplier;
+ if (type === "max_charges") {
+ id = 70;
+ chargeMultiplier = 5;
+ } else if (type === "paint_charges") {
+ id = 80;
+ chargeMultiplier = 30;
+ } else {
+ console.error("Error: Invalid purchase type provided.");
+ return;
+ }
+ const { droplets } = await WPlaceService.getCharges();
+ console.log("There are currently : ", droplets, "droplets.");
+ try {
+ const amounts = Math.floor(droplets / 500);
+ if (amounts < 1) {
+ console.log("Not enough droplets to purchase.");
+ return;
+ }
+ const payload = {
+ "product": {
+ "id": id,
+ "amount": amounts
+ }
+ };
+ const res = fetch("https://backend.wplace.live/purchase", {
+ method: "POST",
+ headers: {
+ "Content-Type": "text/plain;charset=UTF-8"
+ },
+ body: JSON.stringify(payload),
+ credentials: "include"
+ });
+ // POST request completed
+ const { droplets: newDroplets } = await WPlaceService.getCharges();
+ if (droplets != newDroplets) {
+ console.log("Successfully bought", amounts * chargeMultiplier, type.replace('_', ' '), ".");
+ }
+ else {
+ console.log("Failed to buy charges");
+ }
+ } catch (e) {
+ console.error("An error occurred during the purchase:", e);
+ }
+ }
+ async function swapAccountTrigger(token) {
+ // STRICT GUARD: Only allow account switching during active painting sessions OR controlled refresh
+ if (!state.running && !state.isFetchingAllAccounts) {
+ console.warn('š Account switching blocked - only allowed during active painting or controlled refresh');
+ console.warn('š Current state.running:', state.running, 'state.isFetchingAllAccounts:', state.isFetchingAllAccounts);
+ return false;
+ }
+
+ localStorage.removeItem("lp");
+ if (!token) {
+ console.error('ā Cannot swap account: token is null or undefined');
+ return false;
+ }
+
+ console.log(`š Triggering account swap with token: ${token.substring(0, 20)}...`);
+ console.log('š¤ Sending setCookie message to extension...');
+
+ try {
+ window.postMessage({
+ source: 'my-userscript',
+ type: 'setCookie',
+ value: token
+ }, '*');
+
+ console.log('ā setCookie message sent successfully');
+ return true;
+ } catch (error) {
+ console.error('ā Failed to send setCookie message:', error);
+ return false;
+ }
+ }
+ async function getAccounts() {
+ return new Promise((resolve, reject) => {
+ console.log("Requesting accounts from extension...");
+ // Ask extension for accounts
+ window.postMessage({
+ source: "my-userscript",
+ type: "getAccounts"
+ }, "*");
+ function handler(event) {
+ if (event.source !== window) return;
+ if (event.data.source !== "extension") return;
+ if (event.data.type === "accountsData") {
+ window.removeEventListener("message", handler);
+ // Save to localStorage
+ try {
+ localStorage.setItem("accounts", JSON.stringify(event.data.accounts));
+ console.log("ā Accounts saved to localStorage:", event.data.accounts);
+ } catch (e) {
+ console.error("ā Failed to save accounts:", e);
+ }
+ resolve(event.data.accounts);
+ }
+ }
+ window.addEventListener("message", handler);
+ });
+ }
+ async function fetchAccount() {
+ const { ID, Charges, Max, Droplets } = await WPlaceService.fetchCheck();
+ console.log("User's ID :", ID);
+ console.log("User's Charges :", Charges, "/", Max);
+ console.log("User's Droplets :", Droplets);
+ }
+
+ async function fetchAllAccountDetails() {
+ if (state.isFetchingAllAccounts) {
+ Utils.showAlert("Already fetching account details.", "warning");
+ return;
+ }
+
+ state.isFetchingAllAccounts = true;
+
+ const refreshBtn = document.getElementById('refreshAllAccountsBtn');
+ if (refreshBtn) {
+ refreshBtn.innerHTML = '';
+ refreshBtn.disabled = true;
+ }
+
+ const accountsListArea = document.getElementById('accountsListArea');
+ if (accountsListArea) {
+ accountsListArea.innerHTML = `
Fetching account details...
`;
+ }
+
+ let originalToken = null;
+ let originalAccountData = null;
+
+ try {
+ await getAccounts();
+ const accountsTokens = JSON.parse(localStorage.getItem("accounts")) || [];
+ if (accountsTokens.length === 0) {
+ if (accountsListArea) accountsListArea.innerHTML = `
No accounts found.
`;
+ return;
+ }
+
+ // Store original account info to switch back later
+ originalAccountData = await WPlaceService.getCharges();
+ originalToken = accountsTokens.find(token => {
+ try {
+ const payload = JSON.parse(atob(token.split('.')[1]));
+ return payload.userId === originalAccountData.id;
+ } catch (e) {
+ return false;
+ }
+ });
+
+ state.allAccountsInfo = [];
+ renderAccountsList();
+
+ // Temporarily disable the strict guard for controlled refresh operation
+ const originalRunningState = state.running;
+ state.running = true; // Temporarily enable to allow controlled switching
+
+ console.log('š Temporarily enabling controlled account switching for refresh');
+
+ for (let i = 0; i < accountsTokens.length; i++) {
+ const token = accountsTokens[i];
+
+ console.log(`š Fetching details for account ${i + 1}/${accountsTokens.length}`);
+
+ // Controlled account switch for data fetching
+ const swapResult = await swapAccountTrigger(token);
+ if (!swapResult) {
+ console.warn(`ā ļø Failed to trigger swap for account ${i + 1}`);
+ continue;
+ }
+
+ // Wait for account switch to complete
+ let retries = 0;
+ let accountData = null;
+ while (retries < 8 && !accountData) {
+ // await Utils.sleep(1000);
+ try {
+ const fetchedInfo = await WPlaceService.fetchCheck();
+ const chargesInfo = await WPlaceService.getCharges();
+ if (fetchedInfo.ID) {
+ accountData = {
+ ...fetchedInfo,
+ Charges: Math.floor(chargesInfo.charges),
+ Max: Math.floor(chargesInfo.max),
+ Droplets: Math.floor(chargesInfo.droplets)
+ };
+ }
+ } catch (e) {
+ retries++;
+ console.warn(`ā ļø Retry ${retries}/8 for account ${i + 1}`);
+ }
+ }
+
+ if (accountData) {
+ const actualName = accountData.Username || accountData.name || `User${accountData.ID}`;
+ const isCurrentAccount = accountData.ID === originalAccountData.id;
+
+ state.allAccountsInfo.push({
+ ...accountData,
+ token,
+ displayName: actualName,
+ isCurrent: isCurrentAccount
+ });
+
+ console.log(`ā Fetched details for: ${actualName} (${accountData.Charges}/${accountData.Max} charges)`);
+ } else {
+ // Fallback for failed accounts
+ const fallbackName = `Account ${i + 1}`;
+ state.allAccountsInfo.push({
+ token,
+ ID: `...${token.slice(-4)}`,
+ displayName: fallbackName,
+ isCurrent: false,
+ error: 'Failed to fetch details'
+ });
+ console.warn(`ā Failed to fetch details for account ${i + 1}`);
+ }
+
+ renderAccountsList();
+ }
+
+ // Restore original state and switch back to original account
+ state.running = originalRunningState;
+ console.log('š Restored original running state and switching back to original account');
+
+ } catch (error) {
+ console.error("Error fetching all account details:", error);
+ if (accountsListArea) accountsListArea.innerHTML = `
Error loading accounts.
`;
+ } finally {
+ // Switch back to original account
+ if (originalToken) {
+ console.log('š Switching back to original account...');
+ const originalRunningState = state.running;
+ state.running = true; // Temporarily enable for switch back
+
+ await swapAccountTrigger(originalToken);
+ await Utils.sleep(2000);
+
+ // Verify we're back on the original account
+ try {
+ const verifyData = await WPlaceService.getCharges();
+ if (verifyData.id === originalAccountData.id) {
+ console.log('ā Successfully switched back to original account');
+ }
+ } catch (e) {
+ console.warn('ā ļø Could not verify switch back to original account');
+ }
+
+ state.running = originalRunningState; // Restore state
+ }
+
+ // Update current account info in the list
+ if (originalAccountData) {
+ const currentAccountInList = state.allAccountsInfo.find(acc => acc.ID === originalAccountData.id);
+ if (currentAccountInList) {
+ currentAccountInList.isCurrent = true;
+ currentAccountInList.Charges = Math.floor(originalAccountData.charges);
+ currentAccountInList.Max = Math.floor(originalAccountData.max);
+ currentAccountInList.Droplets = Math.floor(originalAccountData.droplets);
+ }
+ }
+
+ // Keep original account order - do NOT rearrange the array
+ // Instead, assign IDs based on current account being ID 1
+ const currentAccountIndex = state.allAccountsInfo.findIndex(acc => acc.isCurrent);
+
+ if (currentAccountIndex !== -1) {
+ console.log(`šÆ Current account found at array position ${currentAccountIndex}`);
+
+ // Assign IDs: current account gets ID 1, others get sequential IDs
+ state.allAccountsInfo.forEach((acc, index) => {
+ if (acc.isCurrent) {
+ acc.orderId = 1; // Current account always gets ID 1
+ } else {
+ // Other accounts get IDs based on their position relative to current
+ const relativePosition = index > currentAccountIndex ?
+ (index - currentAccountIndex + 1) :
+ (state.allAccountsInfo.length - currentAccountIndex + index + 1);
+ acc.orderId = relativePosition;
+ }
+ });
+
+ // Sort the display order by orderId for UI, but keep original array intact
+ const sortedForDisplay = [...state.allAccountsInfo].sort((a, b) => a.orderId - b.orderId);
+
+ // Create the switching order array (ID 1 first, then sequential)
+ state.originalAccountOrder = sortedForDisplay;
+
+ // Find the current account's position in the switching order (should be 0 since it's ID 1)
+ state.currentActiveIndex = 0; // Current account (ID 1) is always first in switching order
+ state.accountIndex = currentAccountIndex; // Keep track of original array position
+
+ console.log(`š Account IDs assigned:`);
+ state.allAccountsInfo.forEach((acc) => {
+ console.log(` Array pos ${state.allAccountsInfo.indexOf(acc)}: ID ${acc.orderId} - ${acc.displayName}${acc.isCurrent ? ' (CURRENT)' : ''}`);
+ });
+
+ console.log(`š Switching order (by ID):`);
+ state.originalAccountOrder.forEach((acc, idx) => {
+ console.log(` Switch pos ${idx}: ID ${acc.orderId} - ${acc.displayName}${acc.isCurrent ? ' (CURRENT)' : ''}`);
+ });
+ } else {
+ console.warn('ā ļø No current account found, using original order');
+ state.allAccountsInfo.forEach((acc, index) => {
+ acc.orderId = index + 1;
+ });
+ state.originalAccountOrder = [...state.allAccountsInfo];
+ state.currentActiveIndex = 0;
+ state.accountIndex = 0;
+ }
+
+ await updateStats();
+ renderAccountsList();
+
+ state.isFetchingAllAccounts = false;
+ if (refreshBtn) {
+ refreshBtn.innerHTML = '';
+ refreshBtn.disabled = false;
+ }
+
+ console.log('ā Account list refresh completed with full details');
+ }
+ }
+
+ // Function to update current account charges in the account list
+ async function updateCurrentAccountInList() {
+ if (state.allAccountsInfo.length === 0) return;
+
+ // Find current account in the list and update its charges
+ const currentAccountInList = state.allAccountsInfo.find(acc => acc.isCurrent);
+ if (currentAccountInList) {
+ const { charges, cooldown } = await WPlaceService.getCharges();
+ state.displayCharges = Math.floor(charges);
+ state.preciseCurrentCharges = charges;
+ await updateStats();
+ currentAccountInList.Charges = Math.floor(state.displayCharges || state.preciseCurrentCharges || 0);
+ currentAccountInList.Max = state.maxCharges;
+ // Re-render the account list to show updated charges
+ renderAccountsList();
+ }
+ }
+
+ // Function to update current account spotlight when switching during painting
+ async function updateCurrentAccountSpotlight() {
+ if (state.allAccountsInfo.length === 0) return;
+ await Utils.sleep(500); // Wait a bit for the switch to take effect
+ try {
+ const currentAccountData = await WPlaceService.getCharges();
+ console.log("Current account after switch:", currentAccountData);
+ console.log(`š Switched to account with ID: ${currentAccountData.id}`);
+
+ // Update all accounts to not be current
+ state.allAccountsInfo.forEach(acc => acc.isCurrent = false);
+
+ // Find and mark the new current account in the original array
+ const newCurrentAccount = state.allAccountsInfo.find(acc => acc.ID === currentAccountData.id);
+ if (newCurrentAccount) {
+ const currentAccountInfo = await WPlaceService.fetchCheck();
+ newCurrentAccount.isCurrent = true;
+ newCurrentAccount.Charges = Math.floor(currentAccountData.charges);
+ newCurrentAccount.Max = Math.floor(currentAccountData.max);
+ newCurrentAccount.Droplets = Math.floor(currentAccountData.droplets);
+ newCurrentAccount.displayName = currentAccountInfo.Username || currentAccountInfo.name || newCurrentAccount.displayName;
+
+ console.log(`šÆ Updated current account spotlight: ${newCurrentAccount.displayName} (ID ${newCurrentAccount.orderId})`);
+
+ // Update the switching order array to reflect the current account change
+ const switchingOrderIndex = state.originalAccountOrder.findIndex(acc => acc.orderId === newCurrentAccount.orderId);
+ if (switchingOrderIndex !== -1) {
+ state.originalAccountOrder[switchingOrderIndex] = newCurrentAccount;
+ // DON'T update currentActiveIndex here - it's managed by switchToNextAccount()
+ console.log(`šÆ Updated account data at switching order index ${switchingOrderIndex} (ID ${newCurrentAccount.orderId})`);
+ console.log(`š Current state: activeIndex=${state.currentActiveIndex}, expectedIndex=${switchingOrderIndex}`);
+ }
+ }
+
+ // Re-render the account list to show new current account
+ renderAccountsList();
+
+ } catch (error) {
+ console.warn('ā ļø Failed to update account spotlight:', error);
+ }
+ }
+
+ function renderAccountsList() {
+ const accountsListArea = document.getElementById('accountsListArea');
+ if (!accountsListArea) return;
+
+ accountsListArea.innerHTML = '';
+ if (state.allAccountsInfo.length === 0) {
+ accountsListArea.innerHTML = `
` : ''}
+ 
+ 
+ 
+ No attacks detected - All secure
+