-
${Utils.t("estimatedTime")}
-
${Utils.formatTime(state.estimatedTime)}
+
+
Available Colors
+
+ ${colorSwatchesHTML}
+
- `
- : ""
- }
- `
+ `;
}
// Helper function to update data management buttons
@@ -3025,125 +3370,138 @@
updateDataButtons()
function showResizeDialog(processor) {
- const { width, height } = processor.getDimensions()
- const aspectRatio = width / height
+ const { width, height } = processor.getDimensions();
+ const aspectRatio = width / height;
- widthSlider.value = width
- heightSlider.value = height
- widthValue.textContent = width
- heightValue.textContent = height
- resizePreview.src = processor.img.src
+ widthSlider.value = width;
+ heightSlider.value = height;
+ widthSlider.max = width * 2; // Set a reasonable max
+ heightSlider.max = height * 2; // Set a reasonable max
+ widthValue.textContent = width;
+ heightValue.textContent = height;
+ zoomSlider.value = 1;
+ paintWhiteToggle.checked = state.paintWhitePixels;
- resizeOverlay.style.display = "block"
- resizeContainer.style.display = "block"
+ _updateResizePreview = () => {
+ const newWidth = parseInt(widthSlider.value, 10);
+ const newHeight = parseInt(heightSlider.value, 10);
+ const zoomLevel = parseFloat(zoomSlider.value);
- const updatePreview = () => {
- const newWidth = Number.parseInt(widthSlider.value)
- const newHeight = Number.parseInt(heightSlider.value)
+ widthValue.textContent = newWidth;
+ heightValue.textContent = newHeight;
- widthValue.textContent = newWidth
- heightValue.textContent = newHeight
+ const tempCanvas = document.createElement('canvas');
+ const tempCtx = tempCanvas.getContext('2d');
+ tempCanvas.width = newWidth;
+ tempCanvas.height = newHeight;
+ tempCtx.imageSmoothingEnabled = false;
+ tempCtx.drawImage(processor.img, 0, 0, newWidth, newHeight);
- resizePreview.src = processor.generatePreview(newWidth, newHeight)
- }
+ const imgData = tempCtx.getImageData(0, 0, newWidth, newHeight);
+ const data = imgData.data;
- widthSlider.addEventListener("input", () => {
- if (keepAspect.checked) {
- const newWidth = Number.parseInt(widthSlider.value)
- const newHeight = Math.round(newWidth / aspectRatio)
- heightSlider.value = newHeight
- }
- updatePreview()
- })
+ 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];
- heightSlider.addEventListener("input", () => {
- if (keepAspect.checked) {
- const newHeight = Number.parseInt(heightSlider.value)
- const newWidth = Math.round(newHeight * aspectRatio)
- widthSlider.value = newWidth
- }
- updatePreview()
- })
+ if (a < CONFIG.TRANSPARENCY_THRESHOLD || (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))) {
+ data[i + 3] = 0; // Make transparent
+ continue;
+ }
- confirmResize.onclick = () => {
- const newWidth = Number.parseInt(widthSlider.value)
- const newHeight = Number.parseInt(heightSlider.value)
+ const [nr, ng, nb] = Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette);
+ data[i] = nr;
+ data[i + 1] = ng;
+ data[i + 2] = nb;
+ data[i + 3] = 255;
+ }
+ tempCtx.putImageData(imgData, 0, 0);
+ resizePreview.src = tempCanvas.toDataURL();
+ resizePreview.style.transform = `scale(${zoomLevel})`;
+ };
- const newPixels = processor.resize(newWidth, newHeight)
+ const onWidthInput = () => {
+ if (keepAspect.checked) {
+ heightSlider.value = Math.round(parseInt(widthSlider.value, 10) / aspectRatio);
+ }
+ _updateResizePreview();
+ };
- let totalValidPixels = 0
- for (let y = 0; y < newHeight; y++) {
- for (let x = 0; x < newWidth; x++) {
- const idx = (y * newWidth + x) * 4
- const r = newPixels[idx]
- const g = newPixels[idx + 1]
- const b = newPixels[idx + 2]
- const alpha = newPixels[idx + 3]
+ const onHeightInput = () => {
+ if (keepAspect.checked) {
+ widthSlider.value = Math.round(parseInt(heightSlider.value, 10) * aspectRatio);
+ }
+ _updateResizePreview();
+ };
+
+ paintWhiteToggle.onchange = (e) => {
+ state.paintWhitePixels = e.target.checked;
+ _updateResizePreview();
+ };
+
+ zoomSlider.addEventListener('input', _updateResizePreview);
+ widthSlider.addEventListener("input", onWidthInput);
+ heightSlider.addEventListener("input", onHeightInput);
- if (alpha < CONFIG.TRANSPARENCY_THRESHOLD) continue
- if (Utils.isWhitePixel(r, g, b)) continue
+ confirmResize.onclick = () => {
+ const newWidth = parseInt(widthSlider.value, 10);
+ const newHeight = parseInt(heightSlider.value, 10);
+ const newPixels = processor.resize(newWidth, newHeight);
- totalValidPixels++
- }
- }
+ let totalValidPixels = 0;
+ for (let i = 0; i < newPixels.length; i += 4) {
+ const isTransparent = newPixels[i + 3] < CONFIG.TRANSPARENCY_THRESHOLD;
+ const isWhiteAndSkipped = !state.paintWhitePixels && Utils.isWhitePixel(newPixels[i], newPixels[i+1], newPixels[i+2]);
+ if (!isTransparent && !isWhiteAndSkipped) {
+ totalValidPixels++;
+ }
+ }
- state.imageData.pixels = newPixels
- state.imageData.width = newWidth
- state.imageData.height = newHeight
- state.imageData.totalPixels = totalValidPixels
- state.totalPixels = totalValidPixels
- state.paintedPixels = 0
+ state.imageData.pixels = newPixels;
+ state.imageData.width = newWidth;
+ state.imageData.height = newHeight;
+ state.imageData.totalPixels = totalValidPixels;
+ state.totalPixels = totalValidPixels;
+ state.paintedPixels = 0;
- updateStats()
- updateUI("resizeSuccess", "success", {
- width: newWidth,
- height: newHeight,
- })
+ updateStats();
+ updateUI("resizeSuccess", "success", { width: newWidth, height: newHeight });
+ closeResizeDialog();
+ };
- closeResizeDialog()
- }
+ downloadPreviewBtn.onclick = () => {
+ const link = document.createElement('a');
+ link.download = 'wplace-preview.png';
+ link.href = resizePreview.src;
+ link.click();
+ };
- cancelResize.onclick = closeResizeDialog
+ cancelResize.onclick = closeResizeDialog;
+
+ resizeOverlay.style.display = "block";
+ resizeContainer.style.display = "block";
+ _updateResizePreview(); // Initial preview
}
function closeResizeDialog() {
- resizeOverlay.style.display = "none"
- resizeContainer.style.display = "none"
- }
-
- if (initBotBtn) {
- initBotBtn.addEventListener("click", async () => {
- try {
- updateUI("checkingColors", "default")
-
- state.availableColors = Utils.extractAvailableColors()
-
- if (state.availableColors.length === 0) {
- Utils.showAlert(Utils.t("noColorsFound"), "error")
- updateUI("noColorsFound", "error")
- return
- }
-
- state.colorsChecked = true
- uploadBtn.disabled = false
- selectPosBtn.disabled = false
- initBotBtn.style.display = "none"
-
- updateUI("colorsFound", "success", {
- count: state.availableColors.length,
- })
- updateStats()
- } catch {
- updateUI("imageError", "error")
- }
- })
+ resizeOverlay.style.display = "none";
+ resizeContainer.style.display = "none";
+ _updateResizePreview = () => {}; // Clear the function to prevent memory leaks
}
if (uploadBtn) {
uploadBtn.addEventListener("click", async () => {
+ // First, automatically run the color check if it hasn't been done.
+ const colorsReady = await checkAndSetColors();
+ if (!colorsReady) {
+ // Stop if colors were not found. The error message is already shown.
+ return;
+ }
+
+ // If colors are ready, proceed with the original upload logic.
try {
updateUI("loadingImage", "default")
const imageSrc = await Utils.createImageUploader()
+ if (!imageSrc) return; // User cancelled the file dialog
const processor = new ImageProcessor(imageSrc)
await processor.load()
@@ -3151,20 +3509,13 @@
const { width, height } = processor.getDimensions()
const pixels = processor.getPixelData()
- let totalValidPixels = 0
- for (let y = 0; y < height; y++) {
- for (let x = 0; x < width; x++) {
- const idx = (y * width + x) * 4
- const r = pixels[idx]
- const g = pixels[idx + 1]
- const b = pixels[idx + 2]
- const alpha = pixels[idx + 3]
-
- if (alpha < CONFIG.TRANSPARENCY_THRESHOLD) continue
- if (Utils.isWhitePixel(r, g, b)) continue
-
- totalValidPixels++
- }
+ let totalValidPixels = 0;
+ for (let i = 0; i < pixels.length; i += 4) {
+ const isTransparent = pixels[i + 3] < CONFIG.TRANSPARENCY_THRESHOLD;
+ const isWhiteAndSkipped = !state.paintWhitePixels && Utils.isWhitePixel(pixels[i], pixels[i+1], pixels[i+2]);
+ if (!isTransparent && !isWhiteAndSkipped) {
+ totalValidPixels++;
+ }
}
state.imageData = {
@@ -3365,7 +3716,7 @@
const speed = parseInt(e.target.value) // Use integer instead of float
state.paintingSpeed = speed
speedValue.textContent = speed + " px/s" // Add px/s unit
-
+
// Save speed preference to localStorage
try {
localStorage.setItem("wplace-painting-speed", speed.toString())
@@ -3373,7 +3724,7 @@
console.warn("Could not save painting speed preference:", error)
}
})
-
+
// Load saved speed preference
try {
const savedSpeed = localStorage.getItem("wplace-painting-speed")
@@ -3420,6 +3771,8 @@
console.warn("Could not load painting speed enabled preference:", error)
}
}
+ // --- Initialize Color Palette UI ---
+ initializeColorPalette(resizeContainer);
}
async function processImage() {
@@ -3458,11 +3811,16 @@
const b = pixels[idx + 2]
const alpha = pixels[idx + 3]
- if (alpha < CONFIG.TRANSPARENCY_THRESHOLD) continue
- if (Utils.isWhitePixel(r, g, b)) continue
+ if (alpha < CONFIG.TRANSPARENCY_THRESHOLD || (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))) {
+ continue;
+ }
+
+ // Step 1: Quantize source pixel to the user's selected palette
+ const targetRgb = Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette);
+
+ // Step 2: Find the closest available in-game color to the quantized color
+ const colorId = findClosestColor(targetRgb, state.availableColors);
- const rgb = [r, g, b]
- const colorId = findClosestColor(rgb, state.availableColors)
const pixelX = startX + x
const pixelY = startY + y