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

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');
-});