From 921a7b93b59f936cfe4e730f804f16f0e0878578 Mon Sep 17 00:00:00 2001 From: MiraclePatrickLumowa Date: Tue, 2 Sep 2025 03:24:44 +0800 Subject: [PATCH] added field input on cooldown and speed controls with --- Auto-Image.js | 302 ++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 279 insertions(+), 23 deletions(-) diff --git a/Auto-Image.js b/Auto-Image.js index 8b35f6a..945281f 100644 --- a/Auto-Image.js +++ b/Auto-Image.js @@ -194,7 +194,7 @@ currentTheme: 'Classic Autobot', PAINT_UNAVAILABLE: true, COORDINATE_MODE: 'rows', - COORDINATE_DIRECTION: 'bottom-left', + COORDINATE_DIRECTION: 'top-left', COORDINATE_SNAKE: true, COORDINATE_BLOCK_WIDTH: 6, COORDINATE_BLOCK_HEIGHT: 2, @@ -486,6 +486,7 @@ progress: 'Progress', pixels: 'Pixels', charges: 'Charges', + batchSize: 'Batch Size', initMessage: "Click 'Upload Image' to begin", }, }; @@ -3429,9 +3430,17 @@
⏱️ ${Utils.t('cooldownSettings')}
-
- - ${state.cooldownChargeThreshold} +
+
+ + ${state.cooldownChargeThreshold} +
+
+ + + + ${Utils.t('charges')} +
@@ -3725,11 +3734,21 @@ - +
-
- -
${CONFIG.PAINTING_SPEED.DEFAULT} (batch size)
+
+
+ +
${CONFIG.PAINTING_SPEED.DEFAULT} (batch size)
+
+
+
+ + + + ${Utils.t('batchSize')} +
+
${CONFIG.PAINTING_SPEED.MIN} @@ -3969,7 +3988,7 @@ } } - #speedSlider::-webkit-slider-thumb, #overlayOpacitySlider::-webkit-slider-thumb { + #speedSlider::-webkit-slider-thumb, #cooldownSlider::-webkit-slider-thumb, #overlayOpacitySlider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; @@ -3980,12 +3999,12 @@ transition: all 0.2s ease; } - #speedSlider::-webkit-slider-thumb:hover, #overlayOpacitySlider::-webkit-slider-thumb:hover { + #speedSlider::-webkit-slider-thumb:hover, #cooldownSlider::-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; } - #speedSlider::-moz-range-thumb, #overlayOpacitySlider::-moz-range-thumb { + #speedSlider::-moz-range-thumb, #cooldownSlider::-moz-range-thumb, #overlayOpacitySlider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; @@ -4032,6 +4051,173 @@ .wplace-settings-header:active { background: rgba(255,255,255,0.2) !important; } + + /* Dual Control Layout - Ultra Compact for Neon */ + .wplace-dual-control { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + margin: 2px 0; + flex-wrap: wrap; + } + + .wplace-slider-container { + display: flex; + align-items: center; + gap: 4px; + flex: 1; + min-width: 140px; + } + + .wplace-slider, .wplace-speed-slider { + flex: 1; + min-width: 80px; + height: 16px; + } + + .wplace-cooldown-value, .wplace-speed-value { + min-width: 50px; + text-align: center; + font-weight: 500; + color: rgba(255,255,255,0.9); + font-size: 10px; + } + + /* Input Group Styles - Ultra Compact */ + .wplace-input-group { + display: flex; + align-items: center; + gap: 2px; + flex-shrink: 0; + } + margin: 8px 0; + } + + .wplace-input-btn { + background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); + color: white; + border: none; + border-radius: 2px; + width: 18px; + height: 18px; + cursor: pointer; + font-weight: bold; + font-size: 11px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + } + font-size: 12px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + box-shadow: 0 1px 2px 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: 2px; + color: white; + padding: 1px 4px; + font-size: 10px; + width: 40px; + text-align: center; + transition: all 0.2s ease; + height: 18px; + } + + .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.7); + font-size: 9px; + margin-left: 2px; + white-space: nowrap; + } + + /* Neon Theme Specific Optimizations */ + .wplace-theme-neon .wplace-dual-control { + gap: 4px; + margin: 1px 0; + } + + .wplace-theme-neon .wplace-slider-container { + gap: 2px; + min-width: 120px; + } + + .wplace-theme-neon .wplace-slider, + .wplace-theme-neon .wplace-speed-slider { + height: 14px; + min-width: 70px; + } + + .wplace-theme-neon .wplace-input-btn { + width: 16px; + height: 16px; + font-size: 10px; + } + + .wplace-theme-neon .wplace-number-input { + width: 35px; + height: 16px; + font-size: 9px; + padding: 0 3px; + } + + .wplace-theme-neon .wplace-cooldown-value, + .wplace-theme-neon .wplace-speed-value { + font-size: 9px; + min-width: 40px; + } + + .wplace-theme-neon .wplace-input-value { + font-size: 8px; + } + + .wplace-speed-input-container { + margin: 2px 0; + } + + /* Custom Scrollbar for Content Area */ + .wplace-content::-webkit-scrollbar { + width: 6px; + } + + .wplace-content::-webkit-scrollbar-track { + background: rgba(255,255,255,0.1); + border-radius: 3px; + } + + .wplace-content::-webkit-scrollbar-thumb { + background: rgba(255,255,255,0.3); + border-radius: 3px; + } + + .wplace-content::-webkit-scrollbar-thumb:hover { + background: rgba(255,255,255,0.5); + } `; @@ -4283,6 +4469,10 @@ const closeStatsBtn = statsContainer.querySelector('#closeStatsBtn'); const refreshChargesBtn = statsContainer.querySelector('#refreshChargesBtn'); const cooldownSlider = container.querySelector('#cooldownSlider'); + const cooldownSliderValue = container.querySelector('#cooldownSliderValue'); + const cooldownInput = container.querySelector('#cooldownInput'); + const cooldownDecrease = container.querySelector('#cooldownDecrease'); + const cooldownIncrease = container.querySelector('#cooldownIncrease'); const cooldownValue = container.querySelector('#cooldownValue'); if (!uploadBtn || !selectPosBtn || !startBtn || !stopBtn) { @@ -4644,15 +4834,45 @@ }); } - // Speed slider event listener + // Speed controls - both slider and input const speedSlider = settingsContainer.querySelector('#speedSlider'); + const speedSliderValue = settingsContainer.querySelector('#speedSliderValue'); + const speedInput = settingsContainer.querySelector('#speedInput'); + const speedDecrease = settingsContainer.querySelector('#speedDecrease'); + const speedIncrease = settingsContainer.querySelector('#speedIncrease'); const speedValue = settingsContainer.querySelector('#speedValue'); - if (speedSlider && speedValue) { - speedSlider.addEventListener('input', (e) => { - const speed = parseInt(e.target.value, 10); + + if (speedSlider && speedSliderValue && speedInput && speedValue && speedDecrease && speedIncrease) { + const updateSpeed = (newValue) => { + const speed = Math.max(CONFIG.PAINTING_SPEED.MIN, Math.min(CONFIG.PAINTING_SPEED.MAX, parseInt(newValue))); state.paintingSpeed = speed; - speedValue.textContent = `${speed} (batch size)`; + + // Update both controls + speedSlider.value = speed; + speedInput.value = speed; + speedSliderValue.textContent = `${speed} (batch size)`; + saveBotSettings(); + }; + + // Slider event listener + speedSlider.addEventListener('input', (e) => { + updateSpeed(e.target.value); + }); + + // Number input event listener + speedInput.addEventListener('input', (e) => { + updateSpeed(e.target.value); + }); + + // Decrease button + speedDecrease.addEventListener('click', () => { + updateSpeed(parseInt(speedInput.value) - 1); + }); + + // Increase button + speedIncrease.addEventListener('click', () => { + updateSpeed(parseInt(speedInput.value) + 1); }); } @@ -5094,9 +5314,12 @@ intervalMs ); - if (cooldownSlider.max !== state.maxCharges) { + if (cooldownSlider && cooldownSlider.max !== state.maxCharges) { cooldownSlider.max = state.maxCharges; } + if (cooldownInput && cooldownInput.max !== state.maxCharges) { + cooldownInput.max = state.maxCharges; + } let imageStatsHTML = ''; if (state.imageLoaded) { @@ -6582,13 +6805,38 @@ setTimeout(checkSavedProgress, 1000); - if (cooldownSlider && cooldownValue) { - cooldownSlider.addEventListener('input', (e) => { - const threshold = parseInt(e.target.value); + if (cooldownSlider && cooldownSliderValue && cooldownInput && cooldownValue && cooldownDecrease && cooldownIncrease) { + const updateCooldown = (newValue) => { + const threshold = Math.max(1, Math.min(state.maxCharges || 999, parseInt(newValue))); state.cooldownChargeThreshold = threshold; - cooldownValue.textContent = threshold; + + // Update both controls + cooldownSlider.value = threshold; + cooldownInput.value = threshold; + cooldownSliderValue.textContent = threshold; + 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); }); } @@ -7473,9 +7721,13 @@ } const speedSlider = document.getElementById('speedSlider'); + const speedInput = document.getElementById('speedInput'); + const speedSliderValue = document.getElementById('speedSliderValue'); if (speedSlider) speedSlider.value = state.paintingSpeed; + if (speedInput) speedInput.value = state.paintingSpeed; + if (speedSliderValue) speedSliderValue.textContent = `${state.paintingSpeed} (batch size)`; const speedValue = document.getElementById('speedValue'); - if (speedValue) speedValue.textContent = `${state.paintingSpeed} (batch size)`; + if (speedValue) speedValue.textContent = Utils.t('batchSize'); const enableSpeedToggle = document.getElementById('enableSpeedToggle'); if (enableSpeedToggle) enableSpeedToggle.checked = CONFIG.PAINTING_SPEED_ENABLED; @@ -7507,9 +7759,13 @@ // AUTO_CAPTCHA_ENABLED is always true - no toggle to set const cooldownSlider = document.getElementById('cooldownSlider'); + const cooldownInput = document.getElementById('cooldownInput'); + const cooldownSliderValue = document.getElementById('cooldownSliderValue'); if (cooldownSlider) cooldownSlider.value = state.cooldownChargeThreshold; + if (cooldownInput) cooldownInput.value = state.cooldownChargeThreshold; + if (cooldownSliderValue) cooldownSliderValue.textContent = state.cooldownChargeThreshold; const cooldownValue = document.getElementById('cooldownValue'); - if (cooldownValue) cooldownValue.textContent = state.cooldownChargeThreshold; + if (cooldownValue) cooldownValue.textContent = Utils.t('charges'); const overlayOpacitySlider = document.getElementById('overlayOpacitySlider'); if (overlayOpacitySlider) overlayOpacitySlider.value = state.overlayOpacity;