about summary refs log tree commit diff stats
path: root/js/pixel-art
diff options
context:
space:
mode:
authorelioat <elioat@tilde.institute>2024-12-22 11:20:44 -0500
committerelioat <elioat@tilde.institute>2024-12-22 11:20:44 -0500
commit5f170cb9bc24c3c2456538d433ffe59e90124f48 (patch)
treec82beda4a32ffcadcb76131cf0b4b86f4b4f5c76 /js/pixel-art
parent073d4a120186fc1e6d7e85dafe2d0f48841ea266 (diff)
downloadtour-5f170cb9bc24c3c2456538d433ffe59e90124f48.tar.gz
*
Diffstat (limited to 'js/pixel-art')
-rw-r--r--js/pixel-art/pixel/app.js8
-rw-r--r--js/pixel-art/pixel/index.html8
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>