1 files changed, 78 insertions, 53 deletions

diff --git a/js/map-maker/map.js b/js/map-maker/map.js
index 08f910a..3620191 100644
--- a/js/map-maker/map.js
+++ b/js/map-maker/map.js
@@ -11,6 +11,7 @@ let grid = [];
 let history = []; // undo stack
 let offsetX = 0;
 let offsetY = 0;
+let selectedNumber = 0;
 
 const initializeGrid = () => {
     grid = Array.from({ length: gridHeight }, () => Array(gridWidth).fill(0));
@@ -72,7 +73,18 @@ const drawGrid = () => {
     });
 };
 
-window.addEventListener('keydown', (e) => {
+const saveGrid = () => {
+    localStorage.setItem('grid', JSON.stringify(grid));
+};
+
+const loadGrid = () => {
+    const savedGrid = localStorage.getItem('grid');
+    if (savedGrid) {
+        grid = JSON.parse(savedGrid);
+    }
+};
+
+const handleKeyDown = (e) => {
     switch (e.key) {
         case 'ArrowUp':
             offsetY -= cellSize;
@@ -86,71 +98,84 @@ window.addEventListener('keydown', (e) => {
         case 'ArrowRight':
             offsetX += cellSize;
             break;
+        case 'h':
+            alert(`Controls:
+                - Arrow keys to move the map
+                - Click to place a tile
+                - Number keys, 0 - 9, to select a tile type
+                - Z to undo
+                - C to clear the grid
+                - E to export the grid as json
+                - S to export the grid as a png
+                - H to display this help text
+            `);
+            break;
+        case 'z':
+            if (history.length > 0) {
+                const lastChange = history.pop(); // Pop last change from history
+                grid[lastChange.y][lastChange.x] = lastChange.state; // Revert state
+                drawGrid();
+            }
+            break;
+        case 'c':
+            if (window.confirm('Are you sure you want to clear the grid?')) {
+                initializeGrid();
+                drawGrid();
+            }
+            break;
+        case 'e':
+            const mapName = prompt('Please enter a name for the map:');
+            if (mapName) {
+                if (window.confirm(`Are you sure you want to export the grid as ${mapName}?`)) {
+                    exportGridAsJson(mapName);
+                }
+            }
+            break;
+        case 's':
+            const imgName = prompt('Please enter a name for the image:');
+            if (imgName) {
+                exportGridAsPng(imgName);
+            }
+            break;
+        default:
+            if (e.key >= '0' && e.key <= '9') {
+                selectedNumber = parseInt(e.key);
+            }
+            break;
     }
     drawGrid();
-});
-
-let selectedNumber = 0; 
+};
 
-canvas.addEventListener('click', (e) => {
+const handleCanvasClick = (e) => {
     const x = Math.floor((e.clientX + offsetX) / cellSize);
     const y = Math.floor((e.clientY + offsetY) / cellSize);
     history.push({ x, y, state: grid[y][x] }); // Push current state to history
     grid[y][x] = selectedNumber; // Set state to selectedNumber
     drawGrid();
-});
-
-window.addEventListener('keydown', (e) => {
-    if (e.key >= '0' && e.key <= '9') {
-        selectedNumber = parseInt(e.key);
-    }
-});
-
-window.addEventListener('keydown', (e) => {
-    if (e.key === 'z' && history.length > 0) {
-        const lastChange = history.pop(); // Pop last change from history
-        grid[lastChange.y][lastChange.x] = lastChange.state; // Revert state
-        drawGrid();
-    }
-});
-
-window.addEventListener('keydown', function(e) {
-    if (e.key === 'c') {
-        if (window.confirm('Are you sure you want to clear the grid?')) {
-            initializeGrid();
-            drawGrid();
-        }
-    }
-});
-
-window.addEventListener('keydown', function(e) {
-    if (e.key === 'e') {
-        const mapName = prompt('Please enter a name for the map:');
-        if (mapName) {
-            if (window.confirm(`Are you sure you want to export the grid as ${mapName}?`)) {
-                const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(grid));
-                const downloadAnchorNode = document.createElement('a');
-                downloadAnchorNode.setAttribute("href", dataStr);
-                downloadAnchorNode.setAttribute("download", `${mapName}.json`);
-                document.body.appendChild(downloadAnchorNode); // evidently this is required for firefox
-                downloadAnchorNode.click();
-                downloadAnchorNode.remove();
-            }
-        }
-    }
-});
+};
 
-const saveGrid = () => {
-    localStorage.setItem('grid', JSON.stringify(grid));
+const exportGridAsJson = (mapName) => {
+    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(grid));
+    const downloadAnchorNode = document.createElement('a');
+    downloadAnchorNode.setAttribute("href", dataStr);
+    downloadAnchorNode.setAttribute("download", `${mapName}.json`);
+    document.body.appendChild(downloadAnchorNode); // evidently this is required for firefox
+    downloadAnchorNode.click();
+    downloadAnchorNode.remove();
 };
 
-const loadGrid = () => {
-    const savedGrid = localStorage.getItem('grid');
-    if (savedGrid) {
-        grid = JSON.parse(savedGrid);
-    }
+const exportGridAsPng = (imgName) => {
+    const dataUrl = canvas.toDataURL('image/png');
+    const downloadAnchorNode = document.createElement('a');
+    downloadAnchorNode.setAttribute("href", dataUrl);
+    downloadAnchorNode.setAttribute("download", `${imgName}.png`);
+    document.body.appendChild(downloadAnchorNode);
+    downloadAnchorNode.click();
+    downloadAnchorNode.remove();
 };
 
+window.addEventListener('keydown', handleKeyDown);
+canvas.addEventListener('click', handleCanvasClick);
 window.onload = () => {
     initializeGrid();
     loadGrid();