diff --git a/Auto-Image.js b/Auto-Image.js index 6833205..3550e28 100644 --- a/Auto-Image.js +++ b/Auto-Image.js @@ -1673,6 +1673,33 @@ color: ${theme.highlight}; } + /* Styles for the new color display in stats */ + .wplace-colors-section { + margin-top: 10px; + padding-top: 8px; + border-top: 1px solid rgba(255,255,255,0.05); + } + + .wplace-stat-colors-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(16px, 1fr)); + gap: 4px; + margin-top: 8px; + padding: 4px; + background: rgba(0,0,0,0.2); + border-radius: 4px; + max-height: 80px; /* Limit height and allow scrolling */ + overflow-y: auto; + } + + .wplace-stat-color-swatch { + width: 16px; + height: 16px; + border-radius: 3px; + border: 1px solid rgba(255,255,255,0.1); + box-shadow: inset 0 0 2px rgba(0,0,0,0.5); + } + .wplace-progress { width: 100%; background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(0,0,0,0.3)" : theme.secondary}; @@ -2344,7 +2371,7 @@
- ${Utils.t("waitingInit")} + ${Utils.t("initMessage")}
@@ -3273,43 +3300,63 @@ } updateStats = async () => { - if (!state.imageLoaded) return; // Only show stats if image is loaded + // Check if the bot has been initialized by checking for colors + if (!state.colorsChecked) { + statsArea.innerHTML = ` +
+
${Utils.t("initMessage")}
+
`; + return; + } - const { charges, cooldown } = await WPlaceService.getCharges() - state.currentCharges = Math.floor(charges) - state.cooldown = cooldown + const { charges, cooldown } = await WPlaceService.getCharges(); + state.currentCharges = Math.floor(charges); + state.cooldown = cooldown; - const progress = state.totalPixels > 0 ? Math.round((state.paintedPixels / state.totalPixels) * 100) : 0 - const remainingPixels = state.totalPixels - state.paintedPixels + // --- Generate HTML for Image-Specific Stats --- + let imageStatsHTML = ''; + if (state.imageLoaded) { + const progress = state.totalPixels > 0 ? Math.round((state.paintedPixels / state.totalPixels) * 100) : 0; + const remainingPixels = state.totalPixels - state.paintedPixels; + state.estimatedTime = Utils.calculateEstimatedTime(remainingPixels, state.currentCharges, state.cooldown); + progressBar.style.width = `${progress}%`; - state.estimatedTime = Utils.calculateEstimatedTime(remainingPixels, state.currentCharges, state.cooldown) + imageStatsHTML = ` +
+
${Utils.t("progress")}
+
${progress}%
+
+
+
${Utils.t("pixels")}
+
${state.paintedPixels}/${state.totalPixels}
+
+
+
${Utils.t("estimatedTime")}
+
${Utils.formatTime(state.estimatedTime)}
+
+ `; + } - progressBar.style.width = `${progress}%` + // --- Generate HTML for Available Colors --- + const colorSwatchesHTML = state.availableColors.map(color => { + const rgbString = `rgb(${color.rgb.join(',')})`; + return `
`; + }).join(''); + // --- Combine all stats and update the panel --- statsArea.innerHTML = ` -
-
${Utils.t("progress")}
-
${progress}%
-
-
-
${Utils.t("pixels")}
-
${state.paintedPixels}/${state.totalPixels}
-
+ ${imageStatsHTML}
${Utils.t("charges")}
${Math.floor(state.currentCharges)}
- ${ - state.imageLoaded - ? ` -
-
${Utils.t("estimatedTime")}
-
${Utils.formatTime(state.estimatedTime)}
+
+
Available Colors
+
+ ${colorSwatchesHTML} +
- ` - : "" - } - ` + `; } // Helper function to update data management buttons