diff options
| -rw-r--r-- | js/pixel-art/pixel/app.js | 25 | ||||
| -rw-r--r-- | js/pixel-art/pixel/index.html | 48 |
2 files changed, 72 insertions, 1 deletions
diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js index 087801c..e4a2235 100644 --- a/js/pixel-art/pixel/app.js +++ b/js/pixel-art/pixel/app.js @@ -10,6 +10,9 @@ let currentColor = '#000000'; let grid = Array(gridWidth).fill().map(() => Array(gridHeight).fill(null)); let offsetX = 0; let offsetY = 0; +const paletteToggle = document.getElementById('palette-toggle'); +const palette = document.getElementById('palette'); +let isPaletteVisible = true; // Event Listeners canvas.addEventListener('click', handleCanvasClick); @@ -19,6 +22,7 @@ document.getElementById('gridHeight').addEventListener('change', updateGridSize) document.getElementById('resetBtn').addEventListener('click', handleReset); document.getElementById('exportBtn').addEventListener('click', exportToPNG); window.addEventListener('keydown', handlePan); +paletteToggle.addEventListener('click', togglePalette); // Initialization resizeCanvas(); @@ -122,6 +126,7 @@ function saveToLocalStorage() { colorHistory: colorHistory, currentColor: currentColor, grid: grid, + isPaletteVisible: isPaletteVisible }; localStorage.setItem('pixelArtConfig', JSON.stringify(gridData)); } @@ -141,6 +146,12 @@ function loadFromLocalStorage() { document.getElementById('colorPicker').value = currentColor; centerGrid(); drawGrid(); + isPaletteVisible = gridData.isPaletteVisible ?? true; + if (!isPaletteVisible) { + palette.classList.add('hidden'); + paletteToggle.classList.add('hidden'); + paletteToggle.innerHTML = '🎨'; + } } else { initializeGrid(); centerGrid(); @@ -183,4 +194,18 @@ function handleCanvasClick(e) { drawGrid(); saveToLocalStorage(); } +} + +function togglePalette() { + isPaletteVisible = !isPaletteVisible; + + if (isPaletteVisible) { + palette.classList.remove('hidden'); + paletteToggle.classList.remove('hidden'); + paletteToggle.innerHTML = '☰'; + } else { + palette.classList.add('hidden'); + paletteToggle.classList.add('hidden'); + paletteToggle.innerHTML = '🎨'; + } } \ No newline at end of file diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html index 91f1813..610161c 100644 --- a/js/pixel-art/pixel/index.html +++ b/js/pixel-art/pixel/index.html @@ -21,7 +21,7 @@ display: block; } #palette { - position: absolute; + position: fixed; top: 10px; right: 10px; background-color: beige; @@ -29,6 +29,39 @@ border: 1px solid #ccc; border-radius: 5px; width: 150px; + transition: transform 0.3s ease-out; + max-height: 90vh; + overflow-y: auto; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + } + + #palette.hidden { + transform: translateX(calc(100% + 20px)); + } + + #palette-toggle { + position: fixed; + top: 10px; + right: 10px; + background-color: beige; + border: 1px solid #ccc; + border-radius: 5px 0 0 5px; + padding: 10px; + cursor: pointer; + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.3s ease-out; + } + + #palette-toggle.hidden { + transform: translateX(0); + } + + #palette-toggle:not(.hidden) { + transform: translateX(-170px); } #palette label, @@ -64,10 +97,23 @@ cursor: pointer; margin-right: 5px; } + + @media (max-width: 768px) { + #palette { + top: auto; + bottom: 10px; + } + + #palette-toggle { + top: auto; + bottom: 10px; + } + } </style> </head> <body> <canvas id="canvas"></canvas> + <button id="palette-toggle">☰</button> <div id="palette"> <label for="gridWidth">Grid Width:</label> <input type="number" id="gridWidth" value="16" min="1"> |