-
-
-
-
- ${Utils.t('batchSize')}
-
+
+
+
${CONFIG.PAINTING_SPEED.DEFAULT} (batch size)
${CONFIG.PAINTING_SPEED.MIN}
@@ -3976,7 +3969,7 @@
}
}
- #overlayOpacitySlider::-webkit-slider-thumb {
+ #speedSlider::-webkit-slider-thumb, #overlayOpacitySlider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
@@ -3987,12 +3980,12 @@
transition: all 0.2s ease;
}
- #overlayOpacitySlider::-webkit-slider-thumb:hover {
+ #speedSlider::-webkit-slider-thumb:hover, #overlayOpacitySlider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 0 0 3px #4facfe;
}
- #overlayOpacitySlider::-moz-range-thumb {
+ #speedSlider::-moz-range-thumb, #overlayOpacitySlider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
@@ -4039,71 +4032,6 @@
.wplace-settings-header:active {
background: rgba(255,255,255,0.2) !important;
}
-
- /* Input Group Styles */
- .wplace-input-group {
- display: flex;
- align-items: center;
- gap: 8px;
- margin: 8px 0;
- }
-
- .wplace-input-btn {
- background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
- color: white;
- border: none;
- border-radius: 6px;
- width: 32px;
- height: 32px;
- cursor: pointer;
- font-weight: bold;
- font-size: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.2s ease;
- box-shadow: 0 2px 4px rgba(0,0,0,0.2);
- }
-
- .wplace-input-btn:hover {
- transform: translateY(-1px);
- box-shadow: 0 4px 8px rgba(0,0,0,0.3);
- background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
- }
-
- .wplace-input-btn:active {
- transform: translateY(0);
- box-shadow: 0 2px 4px rgba(0,0,0,0.2);
- }
-
- .wplace-number-input {
- background: rgba(255,255,255,0.1);
- border: 1px solid rgba(255,255,255,0.2);
- border-radius: 6px;
- color: white;
- padding: 8px 12px;
- font-size: 14px;
- width: 80px;
- text-align: center;
- transition: all 0.2s ease;
- }
-
- .wplace-number-input:focus {
- outline: none;
- border-color: #4facfe;
- box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.3);
- background: rgba(255,255,255,0.15);
- }
-
- .wplace-input-value {
- color: rgba(255,255,255,0.8);
- font-size: 12px;
- margin-left: 8px;
- }
-
- .wplace-speed-input-container {
- margin: 10px 0;
- }
`;
@@ -4354,9 +4282,7 @@
const content = container.querySelector('.wplace-content');
const closeStatsBtn = statsContainer.querySelector('#closeStatsBtn');
const refreshChargesBtn = statsContainer.querySelector('#refreshChargesBtn');
- const cooldownInput = container.querySelector('#cooldownInput');
- const cooldownDecrease = container.querySelector('#cooldownDecrease');
- const cooldownIncrease = container.querySelector('#cooldownIncrease');
+ const cooldownSlider = container.querySelector('#cooldownSlider');
const cooldownValue = container.querySelector('#cooldownValue');
if (!uploadBtn || !selectPosBtn || !startBtn || !stopBtn) {
@@ -4718,29 +4644,15 @@
});
}
- // Speed input event listeners
- const speedInput = settingsContainer.querySelector('#speedInput');
- const speedDecrease = settingsContainer.querySelector('#speedDecrease');
- const speedIncrease = settingsContainer.querySelector('#speedIncrease');
+ // Speed slider event listener
+ const speedSlider = settingsContainer.querySelector('#speedSlider');
const speedValue = settingsContainer.querySelector('#speedValue');
- if (speedInput && speedValue && speedDecrease && speedIncrease) {
- const updateSpeed = (newValue) => {
- const speed = Math.max(CONFIG.PAINTING_SPEED.MIN, Math.min(CONFIG.PAINTING_SPEED.MAX, parseInt(newValue)));
+ if (speedSlider && speedValue) {
+ speedSlider.addEventListener('input', (e) => {
+ const speed = parseInt(e.target.value, 10);
state.paintingSpeed = speed;
- speedInput.value = speed;
+ speedValue.textContent = `${speed} (batch size)`;
saveBotSettings();
- };
-
- speedInput.addEventListener('input', (e) => {
- updateSpeed(e.target.value);
- });
-
- speedDecrease.addEventListener('click', () => {
- updateSpeed(parseInt(speedInput.value) - 1);
- });
-
- speedIncrease.addEventListener('click', () => {
- updateSpeed(parseInt(speedInput.value) + 1);
});
}
@@ -5182,8 +5094,8 @@
intervalMs
);
- if (cooldownInput && cooldownInput.max !== state.maxCharges) {
- cooldownInput.max = state.maxCharges;
+ if (cooldownSlider.max !== state.maxCharges) {
+ cooldownSlider.max = state.maxCharges;
}
let imageStatsHTML = '';
@@ -6670,25 +6582,13 @@
setTimeout(checkSavedProgress, 1000);
- if (cooldownInput && cooldownValue && cooldownDecrease && cooldownIncrease) {
- const updateCooldown = (newValue) => {
- const threshold = Math.max(1, Math.min(state.maxCharges || 999, parseInt(newValue)));
+ if (cooldownSlider && cooldownValue) {
+ cooldownSlider.addEventListener('input', (e) => {
+ const threshold = parseInt(e.target.value);
state.cooldownChargeThreshold = threshold;
- cooldownInput.value = threshold;
+ cooldownValue.textContent = threshold;
saveBotSettings();
NotificationManager.resetEdgeTracking(); // prevent spurious notify after threshold change
- };
-
- cooldownInput.addEventListener('input', (e) => {
- updateCooldown(e.target.value);
- });
-
- cooldownDecrease.addEventListener('click', () => {
- updateCooldown(parseInt(cooldownInput.value) - 1);
- });
-
- cooldownIncrease.addEventListener('click', () => {
- updateCooldown(parseInt(cooldownInput.value) + 1);
});
}
@@ -7572,10 +7472,10 @@
settingsPaintTransparentToggle.checked = state.paintTransparentPixels;
}
- const speedInput = document.getElementById('speedInput');
- if (speedInput) speedInput.value = state.paintingSpeed;
+ const speedSlider = document.getElementById('speedSlider');
+ if (speedSlider) speedSlider.value = state.paintingSpeed;
const speedValue = document.getElementById('speedValue');
- if (speedValue) speedValue.textContent = Utils.t('batchSize');
+ if (speedValue) speedValue.textContent = `${state.paintingSpeed} (batch size)`;
const enableSpeedToggle = document.getElementById('enableSpeedToggle');
if (enableSpeedToggle) enableSpeedToggle.checked = CONFIG.PAINTING_SPEED_ENABLED;
@@ -7606,10 +7506,10 @@
// AUTO_CAPTCHA_ENABLED is always true - no toggle to set
- const cooldownInput = document.getElementById('cooldownInput');
- if (cooldownInput) cooldownInput.value = state.cooldownChargeThreshold;
+ const cooldownSlider = document.getElementById('cooldownSlider');
+ if (cooldownSlider) cooldownSlider.value = state.cooldownChargeThreshold;
const cooldownValue = document.getElementById('cooldownValue');
- if (cooldownValue) cooldownValue.textContent = Utils.t('charges');
+ if (cooldownValue) cooldownValue.textContent = state.cooldownChargeThreshold;
const overlayOpacitySlider = document.getElementById('overlayOpacitySlider');
if (overlayOpacitySlider) overlayOpacitySlider.value = state.overlayOpacity;