-
-
- ${Utils.t("initBot")}
-
-
- ${Utils.t("uploadImage")}
-
-
- ${Utils.t("resizeImage")}
-
-
- ${Utils.t("selectPosition")}
-
-
- ${Utils.t("startPainting")}
-
-
- ${Utils.t("stopPainting")}
-
-
- ${Utils.t("saveData")}
-
-
- ${Utils.t("loadData")}
+
+
+
+ ${Utils.t("waitingInit")}
+
+
+
+
🤖 Bot Setup
+
+
+ ${Utils.t("initBot")}
+
+
+
+
🖼️ Image Management
+
+
+
+ ${Utils.t("uploadImage")}
+
+
+ ${Utils.t("resizeImage")}
+
+
+
+
+ ${Utils.t("selectPosition")}
+
+
+
+
+
🎮 Painting Control
+
+
+
+ ${Utils.t("startPainting")}
+
+
+ ${Utils.t("stopPainting")}
+
+
+
+
+
💾 Data Management
+
+
+
+ ${Utils.t("saveData")}
+
+
+ ${Utils.t("loadData")}
+
+
+
+
+ ${Utils.t("saveToFile")}
+
+
+ ${Utils.t("loadFromFile")}
+
+
+
+
+ `;
+
+ // Stats Window - Separate UI
+ const statsContainer = document.createElement("div");
+ statsContainer.id = "wplace-stats-container";
+ statsContainer.style.display = "none";
+ statsContainer.innerHTML = `
+
+
-
-
- ${Utils.t("waitingInit")}
-
`;
@@ -914,6 +1385,46 @@
document.body.appendChild(container);
document.body.appendChild(resizeOverlay);
document.body.appendChild(resizeContainer);
+ document.body.appendChild(statsContainer);
+
+ // Query all UI elements after appending to DOM
+ const initBotBtn = container.querySelector("#initBotBtn");
+ const uploadBtn = container.querySelector("#uploadBtn");
+ const resizeBtn = container.querySelector("#resizeBtn");
+ const selectPosBtn = container.querySelector("#selectPosBtn");
+ const startBtn = container.querySelector("#startBtn");
+ const stopBtn = container.querySelector("#stopBtn");
+ const saveBtn = container.querySelector("#saveBtn");
+ const loadBtn = container.querySelector("#loadBtn");
+ const saveToFileBtn = container.querySelector("#saveToFileBtn");
+ const loadFromFileBtn = container.querySelector("#loadFromFileBtn");
+ const minimizeBtn = container.querySelector("#minimizeBtn");
+ const compactBtn = container.querySelector("#compactBtn");
+ const statsBtn = container.querySelector("#statsBtn");
+ const statusText = container.querySelector("#statusText");
+ const progressBar = container.querySelector("#progressBar");
+ const statsArea = statsContainer.querySelector("#statsArea");
+ const content = container.querySelector(".wplace-content");
+ const closeStatsBtn = statsContainer.querySelector("#closeStatsBtn");
+
+ // Check if all elements are found
+ if (!initBotBtn || !uploadBtn || !selectPosBtn || !startBtn || !stopBtn) {
+ console.error("Some UI elements not found:", {
+ initBotBtn: !!initBotBtn,
+ uploadBtn: !!uploadBtn,
+ selectPosBtn: !!selectPosBtn,
+ startBtn: !!startBtn,
+ stopBtn: !!stopBtn
+ });
+ }
+
+ if (!statsContainer || !statsArea || !closeStatsBtn) {
+ console.error("Stats UI elements not found:", {
+ statsContainer: !!statsContainer,
+ statsArea: !!statsArea,
+ closeStatsBtn: !!closeStatsBtn
+ });
+ }
const header = container.querySelector(".wplace-header");
let pos1 = 0,
@@ -929,8 +1440,12 @@
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
+ container.classList.add("wplace-dragging");
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
+
+ // Prevent text selection during drag
+ document.body.style.userSelect = "none";
}
function elementDrag(e) {
@@ -939,28 +1454,105 @@
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
- container.style.top = container.offsetTop - pos2 + "px";
- container.style.left = container.offsetLeft - pos1 + "px";
+
+ let newTop = container.offsetTop - pos2;
+ let newLeft = container.offsetLeft - pos1;
+
+ // Boundary checking to keep UI within viewport
+ const rect = container.getBoundingClientRect();
+ const maxTop = window.innerHeight - rect.height;
+ const maxLeft = window.innerWidth - rect.width;
+
+ newTop = Math.max(0, Math.min(newTop, maxTop));
+ newLeft = Math.max(0, Math.min(newLeft, maxLeft));
+
+ container.style.top = newTop + "px";
+ container.style.left = newLeft + "px";
}
function closeDragElement() {
+ container.classList.remove("wplace-dragging");
document.onmouseup = null;
document.onmousemove = null;
+ document.body.style.userSelect = "";
}
- const initBotBtn = container.querySelector("#initBotBtn");
- const uploadBtn = container.querySelector("#uploadBtn");
- const resizeBtn = container.querySelector("#resizeBtn");
- const selectPosBtn = container.querySelector("#selectPosBtn");
- const startBtn = container.querySelector("#startBtn");
- const stopBtn = container.querySelector("#stopBtn");
- const saveBtn = container.querySelector("#saveBtn");
- const loadBtn = container.querySelector("#loadBtn");
- const minimizeBtn = container.querySelector("#minimizeBtn");
- const statusText = container.querySelector("#statusText");
- const progressBar = container.querySelector("#progressBar");
- const statsArea = container.querySelector("#statsArea");
- const content = container.querySelector(".wplace-content");
+ function makeDraggable(element) {
+ let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+ const header = element.querySelector(".wplace-header");
+ header.onmousedown = dragMouseDown;
+
+ function dragMouseDown(e) {
+ if (e.target.closest(".wplace-header-btn")) return;
+
+ e.preventDefault();
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ element.classList.add("wplace-dragging");
+ document.onmouseup = closeDragElement;
+ document.onmousemove = elementDrag;
+
+ // Prevent text selection during drag
+ document.body.style.userSelect = "none";
+ }
+
+ function elementDrag(e) {
+ e.preventDefault();
+ pos1 = pos3 - e.clientX;
+ pos2 = pos4 - e.clientY;
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+
+ let newTop = element.offsetTop - pos2;
+ let newLeft = element.offsetLeft - pos1;
+
+ // Boundary checking to keep UI within viewport
+ const rect = element.getBoundingClientRect();
+ const maxTop = window.innerHeight - rect.height;
+ const maxLeft = window.innerWidth - rect.width;
+
+ newTop = Math.max(0, Math.min(newTop, maxTop));
+ newLeft = Math.max(0, Math.min(newLeft, maxLeft));
+
+ element.style.top = newTop + "px";
+ element.style.left = newLeft + "px";
+ }
+
+ function closeDragElement() {
+ element.classList.remove("wplace-dragging");
+ document.onmouseup = null;
+ document.onmousemove = null;
+ document.body.style.userSelect = "";
+ }
+ }
+
+ // Make stats container draggable
+ makeDraggable(statsContainer);
+
+ // Make main container draggable
+ makeDraggable(container);
+
+ // Stats window functionality
+ if (statsBtn && closeStatsBtn) {
+ statsBtn.addEventListener("click", () => {
+ const isVisible = statsContainer.style.display !== "none";
+ if (isVisible) {
+ statsContainer.style.display = "none";
+ statsBtn.innerHTML = '
';
+ statsBtn.title = "Show Stats";
+ } else {
+ statsContainer.style.display = "block";
+ statsBtn.innerHTML = '
';
+ statsBtn.title = "Hide Stats";
+ }
+ });
+
+ closeStatsBtn.addEventListener("click", () => {
+ statsContainer.style.display = "none";
+ statsBtn.innerHTML = '
';
+ statsBtn.title = "Show Stats";
+ });
+ }
const widthSlider = resizeContainer.querySelector("#widthSlider");
const heightSlider = resizeContainer.querySelector("#heightSlider");
@@ -971,16 +1563,142 @@
const confirmResize = resizeContainer.querySelector("#confirmResize");
const cancelResize = resizeContainer.querySelector("#cancelResize");
- minimizeBtn.addEventListener("click", () => {
- state.minimized = !state.minimized;
- if (state.minimized) {
- container.classList.add("wplace-minimized");
- minimizeBtn.innerHTML = '
';
- } else {
- container.classList.remove("wplace-minimized");
- minimizeBtn.innerHTML = '
';
- }
- });
+ // Compact mode functionality
+ if (compactBtn) {
+ compactBtn.addEventListener("click", () => {
+ container.classList.toggle("wplace-compact");
+ const isCompact = container.classList.contains("wplace-compact");
+
+ if (isCompact) {
+ compactBtn.innerHTML = '
';
+ compactBtn.title = "Expand Mode";
+ } else {
+ compactBtn.innerHTML = '
';
+ compactBtn.title = "Compact Mode";
+ }
+ });
+ }
+
+ // Minimize functionality
+ if (minimizeBtn) {
+ minimizeBtn.addEventListener("click", () => {
+ state.minimized = !state.minimized;
+ if (state.minimized) {
+ container.classList.add("wplace-minimized");
+ content.classList.add("wplace-hidden");
+ minimizeBtn.innerHTML = '
';
+ minimizeBtn.title = "Restore";
+ } else {
+ container.classList.remove("wplace-minimized");
+ content.classList.remove("wplace-hidden");
+ minimizeBtn.innerHTML = '
';
+ minimizeBtn.title = "Minimize";
+ }
+ });
+ }
+
+ // Save progress functionality
+ if (saveBtn) {
+ saveBtn.addEventListener("click", () => {
+ if (!state.imageLoaded) {
+ Utils.showAlert(Utils.t("missingRequirements"), "error");
+ return;
+ }
+
+ const success = Utils.saveProgress();
+ if (success) {
+ updateUI("autoSaved", "success");
+ Utils.showAlert(Utils.t("autoSaved"), "success");
+ } else {
+ Utils.showAlert("❌ Erro ao salvar progresso", "error");
+ }
+ });
+ }
+
+ // Load progress functionality
+ if (loadBtn) {
+ loadBtn.addEventListener("click", () => {
+ const savedData = Utils.loadProgress();
+ if (!savedData) {
+ updateUI("noSavedData", "warning");
+ Utils.showAlert(Utils.t("noSavedData"), "warning");
+ return;
+ }
+
+ // Show confirmation dialog
+ const confirmLoad = confirm(
+ `${Utils.t("savedDataFound")}\n\n` +
+ `Saved: ${new Date(savedData.timestamp).toLocaleString()}\n` +
+ `Progress: ${savedData.state.paintedPixels}/${savedData.state.totalPixels} pixels`
+ );
+
+ if (confirmLoad) {
+ const success = Utils.restoreProgress(savedData);
+ if (success) {
+ updateUI("dataLoaded", "success");
+ Utils.showAlert(Utils.t("dataLoaded"), "success");
+ updateDataButtons();
+
+ if (!state.colorsChecked) {
+ initBotBtn.style.display = "block";
+ }
+
+ if (state.imageLoaded && state.startPosition && state.region && state.colorsChecked) {
+ startBtn.disabled = false;
+ }
+ } else {
+ Utils.showAlert("❌ Erro ao carregar progresso", "error");
+ }
+ }
+ });
+ }
+
+ // Save to file functionality
+ if (saveToFileBtn) {
+ saveToFileBtn.addEventListener("click", () => {
+ const success = Utils.saveProgressToFile();
+ if (success) {
+ updateUI("fileSaved", "success");
+ Utils.showAlert(Utils.t("fileSaved"), "success");
+ } else {
+ Utils.showAlert(Utils.t("fileError"), "error");
+ }
+ });
+ }
+
+ // Load from file functionality
+ if (loadFromFileBtn) {
+ loadFromFileBtn.addEventListener("click", async () => {
+ try {
+ const success = await Utils.loadProgressFromFile();
+ if (success) {
+ updateUI("fileLoaded", "success");
+ Utils.showAlert(Utils.t("fileLoaded"), "success");
+ updateDataButtons();
+
+ // Auto-enable buttons after loading from file
+ if (state.colorsChecked) {
+ uploadBtn.disabled = false;
+ selectPosBtn.disabled = false;
+ resizeBtn.disabled = false;
+ initBotBtn.style.display = "none";
+ } else {
+ initBotBtn.style.display = "block";
+ }
+
+ if (state.imageLoaded && state.startPosition && state.region && state.colorsChecked) {
+ startBtn.disabled = false;
+ }
+ }
+ } catch (error) {
+ if (error.message === 'Invalid JSON file') {
+ Utils.showAlert(Utils.t("invalidFileFormat"), "error");
+ } else {
+ Utils.showAlert(Utils.t("fileError"), "error");
+ }
+ }
+ });
+ }
window.updateUI = (messageKey, type = "default", params = {}) => {
const message = Utils.t(messageKey, params);
@@ -1017,19 +1735,19 @@
-
${progress}%
+
${progress}%
Ce projet est un fork de https://github.com/DarkModde/WPlace-AutoBOT
+Join our discord: https://discord.gg/CBB4abRmGM
Des scripts pratiques avec des menus intuitifs pour vous faciliter la vie sur WPlace !
Este projeto foi bifurcado de https://github.com/DarkModde/WPlace-AutoBOT
+Junte-se ao nosso discord: https://discord.gg/CBB4abRmGM