diff --git a/Auto-Image.js b/Auto-Image.js index 1af501c..3b3bd89 100644 --- a/Auto-Image.js +++ b/Auto-Image.js @@ -1,3 +1,4 @@ +javascript ;(async () => { // CONFIGURATION CONSTANTS const CONFIG = { @@ -483,7 +484,7 @@ paintedPixels: 0, availableColors: [], activeColorPalette: [], // User-selected colors for conversion - paintWhitePixels: false, // New state for controlling white pixel painting + paintWhitePixels: true, // Default to ON currentCharges: 0, cooldown: CONFIG.COOLDOWN_DEFAULT, imageData: null, @@ -1118,7 +1119,8 @@ const key = rgb.join(','); const name = CONFIG.COLOR_NAMES[key] || `rgb(${key})`; const isPaid = CONFIG.PAID_COLORS.has(key); - + + const colorItem = Utils.createElement('div', { className: 'wplace-color-item' }); const swatch = Utils.createElement('button', { className: `wplace-color-swatch ${isPaid ? 'paid' : ''}`, title: name, @@ -1126,6 +1128,8 @@ }); swatch.style.backgroundColor = `rgb(${key})`; + const nameLabel = Utils.createElement('span', { className: 'wplace-color-item-name' }, name); + // Default state: free are active, paid are not if (!isPaid) { swatch.classList.add('active'); @@ -1135,11 +1139,14 @@ swatch.classList.toggle('active'); updateActiveColorPalette(); }); + + colorItem.appendChild(swatch); + colorItem.appendChild(nameLabel); if (isPaid) { - paidContainer.appendChild(swatch); + paidContainer.appendChild(colorItem); } else { - freeContainer.appendChild(swatch); + freeContainer.appendChild(colorItem); } }); @@ -1757,7 +1764,7 @@ overflow: auto; font-family: ${theme.fontFamily}; } - + .resize-preview-wrapper { display: flex; justify-content: center; @@ -1773,7 +1780,7 @@ max-width: none; /* Allow image to exceed wrapper for zoom */ transition: transform 0.1s ease; } - + .resize-controls { display: grid; grid-template-columns: 1fr 1fr; @@ -1851,11 +1858,24 @@ /* --- START: Color Palette Styles --- */ .wplace-color-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); - gap: 5px; + grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* Wider columns for name */ + gap: 10px; padding-top: 8px; - max-height: 150px; - overflow-y: auto; + } + .wplace-color-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + } + .wplace-color-item-name { + font-size: 9px; + color: #ccc; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; } .wplace-color-swatch { width: 22px; @@ -1865,6 +1885,7 @@ cursor: pointer; transition: transform 0.1s ease, box-shadow 0.2s ease; position: relative; + margin: 0 auto; } .wplace-color-swatch.paid { border-color: gold; @@ -2668,8 +2689,8 @@ Keep Aspect Ratio