diff options
| author | elioat <elioat@tilde.institute> | 2024-12-22 11:19:05 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-12-22 11:19:05 -0500 |
| commit | 073d4a120186fc1e6d7e85dafe2d0f48841ea266 (patch) | |
| tree | 0f9a7f6a4217cd2b288175f46578188f1de88f0d /js/pixel-art/pixel | |
| parent | 40db3228a23e64804cd1e901beee2f0917dbcae8 (diff) | |
| download | tour-073d4a120186fc1e6d7e85dafe2d0f48841ea266.tar.gz | |
*
Diffstat (limited to 'js/pixel-art/pixel')
| -rw-r--r-- | js/pixel-art/pixel/app.js | 23 | ||||
| -rw-r--r-- | js/pixel-art/pixel/index.html | 35 |
2 files changed, 58 insertions, 0 deletions
diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js index 9dc9cd8..1fab676 100644 --- a/js/pixel-art/pixel/app.js +++ b/js/pixel-art/pixel/app.js @@ -36,6 +36,10 @@ 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('panUpBtn').addEventListener('click', () => handlePanButton('up')); +document.getElementById('panDownBtn').addEventListener('click', () => handlePanButton('down')); +document.getElementById('panLeftBtn').addEventListener('click', () => handlePanButton('left')); +document.getElementById('panRightBtn').addEventListener('click', () => handlePanButton('right')); // Initialization resizeCanvas(); @@ -293,4 +297,23 @@ function handleZoom(factor) { drawGrid(); saveToLocalStorage(); +} + +function handlePanButton(direction) { + const step = cellSize; + switch(direction) { + case 'up': + offsetY += step; + break; + case 'down': + offsetY -= step; + break; + case 'left': + offsetX += step; + break; + case 'right': + offsetX -= step; + break; + } + drawGrid(); } \ No newline at end of file diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html index c864a98..cc04595 100644 --- a/js/pixel-art/pixel/index.html +++ b/js/pixel-art/pixel/index.html @@ -120,6 +120,33 @@ flex: 1; padding: 4px; } + + .pan-controls { + display: flex; + flex-direction: column; + gap: 5px; + margin-top: 10px; + align-items: center; + } + + .pan-middle { + display: flex; + gap: 5px; + width: 100%; + } + + .pan-controls button { + padding: 8px; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + } + + .pan-middle button { + flex: 1; + } </style> </head> <body> @@ -139,6 +166,14 @@ <button id="zoomInBtn">🔍+</button> <button id="zoomOutBtn">🔍-</button> </div> + <div class="pan-controls"> + <button id="panUpBtn">⬆️</button> + <div class="pan-middle"> + <button id="panLeftBtn">⬅️</button> + <button id="panRightBtn">➡️</button> + </div> + <button id="panDownBtn">⬇️</button> + </div> <button id="resetBtn">Reset</button> </div> <script src="app.js"></script> |