From 5aa0a2a001194ab1b5a02a2065e3f7fc8f4b47aa Mon Sep 17 00:00:00 2001 From: kyuketski Date: Sun, 31 Aug 2025 06:04:35 +0300 Subject: [PATCH] refactor(ui): centralize and standardize coordinate and theme settings in CONFIG - Move coordinate generation defaults (mode, direction, snake pattern, block size) and theme settings to CONFIG object. - Replace hardcoded values with references to CONFIG for consistency across coordinate mode, direction, snake pattern, block width, and height. - Add `paintUnavailablePixels` toggle to replace `strictSkipUnavailable` functionality and introduce a new "Paint Unavailable" toggle in the UI. - Refactor `updateCoordinateUI` function to accept parameters explicitly, move it to `Utils`, and dynamically toggle UI controls based on mode. - Standardize checkbox and slider styles by replacing inline ternary operators and `.wplace-blue-marble-checkbox` with cleaner logic and reusable `.wplace-settings-checkbox`. - Introduce new CSS class `.wplace-pixel-filter-controls` for pixel filter UI. - Update migration and theme selection logic to use CONFIG defaults and `CONFIG.THEMES` for backward compatibility. - Remove redundant inline conditional checks for default values in settings initialization. Benefits: - Improves maintainability by centralizing configuration settings and default values in CONFIG. - Reduces duplication of hardcoded values and UI update logic across the codebase. - Enhances flexibility for future UI updates, theme changes, and clarity of painting logic. - Aligns checkbox styling with reusable classes for consistency. Note: - Ensure CONFIG is properly initialized and all themes define required CONFIG properties to avoid runtime errors. --- Auto-Image.js | 171 ++++++++++++++++++++++++++---------------- auto-image-styles.css | 12 ++- 2 files changed, 118 insertions(+), 65 deletions(-) diff --git a/Auto-Image.js b/Auto-Image.js index d4968e5..e40f849 100644 --- a/Auto-Image.js +++ b/Auto-Image.js @@ -192,6 +192,12 @@ }, }, currentTheme: 'Classic Autobot', + PAINT_UNAVAILABLE: true, + COORDINATE_MODE: 'rows', + COORDINATE_DIRECTION: 'bottom-left', + COORDINATE_SNAKE: true, + COORDINATE_BLOCK_WIDTH: 6, + COORDINATE_BLOCK_HEIGHT: 2, }; const getCurrentTheme = () => CONFIG.THEMES[CONFIG.currentTheme]; @@ -557,14 +563,13 @@ resizeSettings: null, originalImage: null, resizeIgnoreMask: null, + paintUnavailablePixels: CONFIG.PAINT_UNAVAILABLE, // Coordinate generation settings - strictSkipUnavailable: false, - coordinateMode: 'rows', - coordinateDirection: 'bottom-left', - coordinateSnake: true, - blockWidth: 6, - blockHeight: 2, - // Notification prefs and runtime bookkeeping + coordinateMode: CONFIG.COORDINATE_MODE, + coordinateDirection: CONFIG.COORDINATE_DIRECTION, + coordinateSnake: CONFIG.COORDINATE_SNAKE, + blockWidth: CONFIG.COORDINATE_BLOCK_WIDTH, + blockHeight: CONFIG.COORDINATE_BLOCK_HEIGHT, notificationsEnabled: CONFIG.NOTIFICATIONS.ENABLED, notifyOnChargesReached: CONFIG.NOTIFICATIONS.ON_CHARGES_REACHED, notifyOnlyWhenUnfocused: CONFIG.NOTIFICATIONS.ONLY_WHEN_UNFOCUSED, @@ -2398,19 +2403,19 @@ // Add new fields with default values if (!migrated.state.coordinateMode) { - migrated.state.coordinateMode = 'rows'; + migrated.state.coordinateMode = CONFIG.COORDINATE_MODE; } if (!migrated.state.coordinateDirection) { - migrated.state.coordinateDirection = 'bottom-left'; + migrated.state.coordinateDirection = CONFIG.COORDINATE_DIRECTION; } if (!migrated.state.coordinateSnake) { - migrated.state.coordinateSnake = true; + migrated.state.coordinateSnake = CONFIG.COORDINATE_SNAKE; } if (!migrated.state.blockWidth) { - migrated.state.blockWidth = 6; + migrated.state.blockWidth = CONFIG.COORDINATE_BLOCK_WIDTH; } if (!migrated.state.blockHeight) { - migrated.state.blockHeight = 2; + migrated.state.blockHeight = CONFIG.COORDINATE_BLOCK_HEIGHT; } return migrated; @@ -2533,11 +2538,11 @@ state._lastSavePixelCount = 0; state._lastSaveTime = 0; // Reset coordinate generation settings to their default values - state.coordinateMode = 'rows'; - state.coordinateDirection = 'bottom-left'; - state.coordinateSnake = true; - state.blockWidth = 6; - state.blockHeight = 2; + state.coordinateMode = CONFIG.COORDINATE_MODE; + state.coordinateDirection = CONFIG.COORDINATE_DIRECTION; + state.coordinateSnake = CONFIG.COORDINATE_SNAKE; + state.blockWidth = CONFIG.COORDINATE_BLOCK_WIDTH; + state.blockHeight = CONFIG.COORDINATE_BLOCK_HEIGHT; console.log('📋 Progress and painted map cleared'); return true; } catch (error) { @@ -2678,6 +2683,15 @@ return false; } }, + + updateCoordinateUI({ mode, directionControls, snakeControls, blockControls }) { + const isLinear = mode === 'rows' || mode === 'columns'; + const isBlock = mode === 'blocks' || mode === 'shuffle-blocks'; + + if (directionControls) directionControls.style.display = isLinear ? 'block' : 'none'; + if (snakeControls) snakeControls.style.display = isLinear ? 'block' : 'none'; + if (blockControls) blockControls.style.display = isBlock ? 'block' : 'none'; + }, }; // IMAGE PROCESSOR CLASS @@ -3612,7 +3626,7 @@ @@ -3702,7 +3716,6 @@ -
@@ -3783,6 +3796,25 @@ + +
+ +
+