added suport for the canvas to be saved on the reload of the server

.gitignore

@@ -1 +1,2 @@
 node_modules
+canvas_data.json

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "cookie-parser": "^1.4.6",
         "express": "^4.18.2",
+        "fs": "^0.0.1-security",
         "socket.io": "^4.7.1"
       }
     },
@@ -351,6 +352,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -1096,6 +1102,11 @@
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
     },
+    "fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",

package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "cookie-parser": "^1.4.6",
     "express": "^4.18.2",
+    "fs": "^0.0.1-security",
     "socket.io": "^4.7.1"
   },
   "name": "collaborative-pixel-art",

server.js

@@ -3,6 +3,7 @@ const express = require('express');
 const app = express();
 const http = require('http').createServer(app);
 const io = require('socket.io')(http);
+const fs = require('fs');
 
 const initialPixelColor = '#FFFFFF'; // Default color: White
 const canvasWidth = 50;
@@ -10,6 +11,33 @@ const canvasHeight = 50;
 let pixels = new Array(canvasWidth * canvasHeight).fill(initialPixelColor);
 let totalPixelsPlaced = 0; // Counter for total pixels placed by everyone
 
+// Function to save the canvas data and the total number of pixels placed to a JSON file
+function saveCanvasToJSON() {
+  const data = JSON.stringify({ pixels, totalPixelsPlaced });
+  fs.writeFileSync('canvas_data.json', data, 'utf8', (err) => {
+    if (err) {
+      console.error('Error saving canvas data:', err);
+    }
+  });
+}
+
+// Function to load the canvas data and the total number of pixels placed from the JSON file
+function loadCanvasFromJSON() {
+  try {
+    if (fs.existsSync('canvas_data.json')) {
+      const data = fs.readFileSync('canvas_data.json', 'utf8');
+      const jsonData = JSON.parse(data);
+      pixels = jsonData.pixels;
+      totalPixelsPlaced = jsonData.totalPixelsPlaced;
+    } else {
+      // If the file does not exist, create a new one with default pixel data
+      saveCanvasToJSON();
+    }
+  } catch (err) {
+    console.error('Error loading canvas data:', err);
+  }
+}
+
 app.use(express.static(__dirname + '/public'));
 
 io.on('connection', (socket) => {
@@ -29,20 +57,14 @@ io.on('connection', (socket) => {
     totalPixelsPlaced++;
     // Broadcast the updated total count to all clients
     io.emit('totalPixelsCount', totalPixelsPlaced);
+
+    // Save the updated canvas data to the JSON file
+    saveCanvasToJSON();
   });
 });
 
-// Function to clear the "yourPixelsPlaced" cookie
-function clearYourPixelsCookie(res) {
-  res.clearCookie('yourPixelsPlaced');
-}
-
 http.listen(3000, () => {
   console.log('Server started on http://localhost:3000');
+  // Load the canvas data from the JSON file when the server starts
+  loadCanvasFromJSON();
 });
-
-// Clear "yourPixelsPlaced" cookie when the server starts
-app.get('/', (req, res) => {
-  clearYourPixelsCookie(res);
-  res.sendFile(__dirname + '/public/index.html');
-});