diff options
| -rw-r--r-- | js/pixel-art/pixel/app.js | 22 | ||||
| -rw-r--r-- | js/pixel-art/pixel/index.html | 15 |
2 files changed, 23 insertions, 14 deletions
diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js index 97c3a1c..d2eddee 100644 --- a/js/pixel-art/pixel/app.js +++ b/js/pixel-art/pixel/app.js @@ -5,7 +5,16 @@ const defaultGridHeight = 16; let gridWidth = defaultGridWidth; let gridHeight = defaultGridHeight; let cellSize = 16; -let colorHistory = []; +let colorHistory = [ + '#000000', + '#ae8ce2', + '#2d5d9e', + '#43bef2', + '#99b213', + '#e5b42e', + '#c00f68', + '#ffffff' +]; let currentColor = '#000000'; let grid = Array(gridWidth).fill().map(() => Array(gridHeight).fill(null)); let offsetX = 0; @@ -37,8 +46,8 @@ document.getElementById('resetBtn').addEventListener('click', handleReset); document.getElementById('exportBtn').addEventListener('click', exportToPNG); window.addEventListener('keydown', handlePan); paletteToggle.addEventListener('click', togglePalette); -document.getElementById('zoomInBtn').addEventListener('click', () => handleZoom(1.5)); -document.getElementById('zoomOutBtn').addEventListener('click', () => handleZoom(0.666)); +document.getElementById('zoomInBtn').addEventListener('click', () => handleZoom(1.25)); +document.getElementById('zoomOutBtn').addEventListener('click', () => handleZoom(0.75)); document.getElementById('panUpBtn').addEventListener('click', () => handlePanButton('up')); document.getElementById('panDownBtn').addEventListener('click', () => handlePanButton('down')); document.getElementById('panLeftBtn').addEventListener('click', () => handlePanButton('left')); @@ -49,6 +58,7 @@ document.getElementById('newCanvasBtn').addEventListener('click', addNewCanvas); resizeCanvas(); loadFromLocalStorage(); +renderColorHistory(); function addNewCanvas() { @@ -165,17 +175,14 @@ function handleReset() { colorHistory = []; renderColorHistory(); - // Clear canvases and add a fresh one canvases = []; addNewCanvas(); - // Enable inputs for the fresh canvas document.getElementById('gridWidth').disabled = false; document.getElementById('gridHeight').disabled = false; document.getElementById('gridWidth').value = gridWidth; document.getElementById('gridHeight').value = gridHeight; - // Clear localStorage localStorage.removeItem('pixelArtConfig'); alert("Reset complete. You can now adjust the grid size until you place your first pixel."); @@ -198,7 +205,7 @@ function updateGridSize() { const newHeight = parseInt(document.getElementById('gridHeight').value); // Validate input - if (newWidth <= 0 || newHeight <= 0) return; + if (newWidth <= 0 || newHeight <= 0 || newWidth > 100 || newHeight > 100) return; gridWidth = newWidth; gridHeight = newHeight; @@ -282,6 +289,7 @@ function loadFromLocalStorage() { centerGrid(); drawGrid(); + renderColorHistory(); } function exportToPNG() { diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html index 74c0216..eea03b1 100644 --- a/js/pixel-art/pixel/index.html +++ b/js/pixel-art/pixel/index.html @@ -26,9 +26,9 @@ top: 0.625rem; right: 0.625rem; background-color: beige; - padding: 0.625rem; + padding: 0.5rem; border: 1px solid #ccc; - border-radius: 0.3125rem; + border-radius: 0.25rem; width: 10.625rem; transition: transform 0.3s ease-out; max-height: 90vh; @@ -44,11 +44,11 @@ #palette-toggle { position: fixed; - top: 0.625rem; - right: 0.625rem; + top: 1.025rem; + right: 0.025rem; background-color: beige; border: 1px solid #ccc; - border-radius: 0.3125rem 0 0 0.3125rem; + border-radius: 0.25rem 0 0 0.25rem; padding: 0.75rem; cursor: pointer; z-index: 1000; @@ -138,6 +138,7 @@ #palette-toggle { top: auto; + right: 0.625rem; bottom: 0.625rem; } @@ -154,11 +155,11 @@ <div style="display: flex; gap: 5px; margin-bottom: 10px;"> <div style="flex: 1;"> <label for="gridWidth">W:</label> - <input type="number" id="gridWidth" value="16" min="1" style="width: 90%;"> + <input type="number" id="gridWidth" value="16" min="1" max="100" style="width: 90%;"> </div> <div style="flex: 1;"> <label for="gridHeight">H:</label> - <input type="number" id="gridHeight" value="16" min="1" style="width: 90%;"> + <input type="number" id="gridHeight" value="16" min="1" max="100" style="width: 90%;"> </div> </div> <br> |