diff options
| author | elioat <elioat@tilde.institute> | 2024-12-22 11:20:44 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-12-22 11:20:44 -0500 |
| commit | 5f170cb9bc24c3c2456538d433ffe59e90124f48 (patch) | |
| tree | c82beda4a32ffcadcb76131cf0b4b86f4b4f5c76 | |
| parent | 073d4a120186fc1e6d7e85dafe2d0f48841ea266 (diff) | |
| download | tour-5f170cb9bc24c3c2456538d433ffe59e90124f48.tar.gz | |
*
| -rw-r--r-- | js/pixel-art/pixel/app.js | 8 | ||||
| -rw-r--r-- | js/pixel-art/pixel/index.html | 8 |
2 files changed, 15 insertions, 1 deletions
diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js index 1fab676..e99b542 100644 --- a/js/pixel-art/pixel/app.js +++ b/js/pixel-art/pixel/app.js @@ -40,6 +40,7 @@ document.getElementById('panUpBtn').addEventListener('click', () => handlePanBut document.getElementById('panDownBtn').addEventListener('click', () => handlePanButton('down')); document.getElementById('panLeftBtn').addEventListener('click', () => handlePanButton('left')); document.getElementById('panRightBtn').addEventListener('click', () => handlePanButton('right')); +document.getElementById('centerViewBtn').addEventListener('click', resetView); // Initialization resizeCanvas(); @@ -316,4 +317,11 @@ function handlePanButton(direction) { break; } drawGrid(); +} + +function resetView() { + cellSize = 16; // Reset to default zoom + centerGrid(); + drawGrid(); + saveToLocalStorage(); } \ No newline at end of file diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html index cc04595..68d754f 100644 --- a/js/pixel-art/pixel/index.html +++ b/js/pixel-art/pixel/index.html @@ -147,6 +147,10 @@ .pan-middle button { flex: 1; } + + #centerViewBtn { + margin-top: 10px; + } </style> </head> <body> @@ -161,7 +165,6 @@ <label for="colorPicker">Select Color:</label> <input type="color" id="colorPicker" value="#000000"> <div id="colorHistory" class="color-history"></div> - <button id="exportBtn">Export as PNG</button> <div class="zoom-controls"> <button id="zoomInBtn">🔍+</button> <button id="zoomOutBtn">🔍-</button> @@ -174,6 +177,9 @@ </div> <button id="panDownBtn">⬇️</button> </div> + <button id="centerViewBtn">🎯 Center View</button> + <hr> + <button id="exportBtn">Export as PNG</button> <button id="resetBtn">Reset</button> </div> <script src="app.js"></script> |