*

2 files changed, 81 insertions, 4 deletions

diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js
index d2eddee..8a7aceb 100644
--- a/js/pixel-art/pixel/app.js
+++ b/js/pixel-art/pixel/app.js
@@ -54,6 +54,8 @@ document.getElementById('panLeftBtn').addEventListener('click', () => handlePanB
 document.getElementById('panRightBtn').addEventListener('click', () => handlePanButton('right'));
 document.getElementById('centerViewBtn').addEventListener('click', resetView);
 document.getElementById('newCanvasBtn').addEventListener('click', addNewCanvas);
+document.getElementById('saveProjectBtn').addEventListener('click', saveProject);
+document.getElementById('loadProjectBtn').addEventListener('click', loadProject);
 
 
 resizeCanvas();
@@ -466,4 +468,79 @@ function resetView() {
         drawGrid();
         saveToLocalStorage();
     }
+}
+
+function saveProject() {
+    const now = new Date();
+    const formattedDate = now.toISOString().slice(0, 16).replace('T', '-').replace(':', '-');
+    
+    const projectName = prompt("Enter a name for your project", formattedDate);
+    if (!projectName) return; // User cancelled
+    
+    // First save to localStorage to ensure all current state is saved
+    saveToLocalStorage();
+    
+    // Get the data from localStorage and add our special header
+    const projectData = JSON.parse(localStorage.getItem('pixelArtConfig'));
+    const exportData = {
+        __projectHeader: "pppppp_v1",  // Add special header
+        timestamp: new Date().toISOString(),
+        data: projectData
+    };
+    
+    // Create and trigger download
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = `${projectName}.json`;
+    link.click();
+    URL.revokeObjectURL(link.href);
+}
+
+function loadProject() {
+    // AAAAH! Data loss!
+    const confirmLoad = confirm("Loading a project will replace your current work. Are you sure you want to proceed?");
+    if (!confirmLoad) return;
+    
+    // Create file input
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = '.json';
+    
+    fileInput.addEventListener('change', function(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+        
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            try {
+                const importedData = JSON.parse(e.target.result);
+                
+                // Check for our super special header
+                if (!importedData.__projectHeader || 
+                    importedData.__projectHeader !== "pppppp_v1") {
+                    throw new Error('This file is not a valid Pixel Art Project file');
+                }
+                
+                const projectData = importedData.data;
+                
+                // Validate the data has expected properties
+                if (!projectData.gridWidth || !projectData.gridHeight || !projectData.canvases) {
+                    throw new Error('Invalid project file format');
+                }
+                
+                // Save to localStorage
+                localStorage.setItem('pixelArtConfig', JSON.stringify(projectData));
+                
+                // Reload the page to apply changes
+                window.location.reload();
+                
+            } catch (error) {
+                alert('Error loading project file: ' + error.message);
+            }
+        };
+        reader.readAsText(file);
+    });
+    
+    fileInput.click();
 }
\ No newline at end of file
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html
index eea03b1..3d48f5e 100644
--- a/js/pixel-art/pixel/index.html
+++ b/js/pixel-art/pixel/index.html
@@ -65,7 +65,6 @@
             transform: translateX(-11.25rem);
         }
 
-        #palette label,
         #palette input,
         #palette button {
             display: block;
@@ -154,15 +153,14 @@
     <div id="palette">
         <div style="display: flex; gap: 5px; margin-bottom: 10px;">
             <div style="flex: 1;">
-                <label for="gridWidth">W:</label>
+                <label for="gridWidth">Width:</label>
                 <input type="number" id="gridWidth" value="16" min="1" max="100" style="width: 90%;">
             </div>
             <div style="flex: 1;">
-                <label for="gridHeight">H:</label>
+                <label for="gridHeight">Height:</label>
                 <input type="number" id="gridHeight" value="16" min="1" max="100" style="width: 90%;">
             </div>
         </div>
-        <br>
         <label for="colorPicker">Select Color:</label>
         <input type="color" id="colorPicker" value="#000000">
         <div id="colorHistory" class="color-history"></div>
@@ -182,6 +180,8 @@
         <button id="newCanvasBtn">➕ New Canvas</button>
         <hr>
         <button id="exportBtn">Export as PNG</button>
+        <button id="saveProjectBtn">Save Project</button>
+        <button id="loadProjectBtn">Load Project</button>
         <button id="resetBtn">Reset</button>
     </div>
     <script src="app.js"></script>