HW7: done task 8

hw7/Claudio_Maggioni/app.js

@@ -66,16 +66,16 @@ io.on('connection', (socket) => {
 
   socket.emit('sessionId', { id: id++ });
 
-  socket.on('message', (msg) => {
-    console.log('message: ',msg);
-    msg.user = encodeURIComponent(msg.user);
-    msg.text = encodeURIComponent(msg.text);
-    socket.broadcast.emit('message', msg);
-  });
-
   socket.on('disconnect', () => {
     console.log('client disconnected');
   });
+
+  for (const e of ['canvas.draw', 'canvas.undo', 'canvas.clear']) {
+    socket.on(e, (arr) => {
+      console.log(e, arr);
+      socket.broadcast.emit(e, arr);
+    });
+  }
 });
 
 const eventBus = require('./pubsub');

hw7/Claudio_Maggioni/public/scripts/app.js

@@ -222,33 +222,33 @@ class App {
   }
 
   initSocket() {
-    const socket = io();
+    this.socket = io();
 
-    socket.on('connect', () => {
+    this.socket.on('connect', () => {
       console.log('Socket connected');
     });
 
-    socket.on('sessionId', (msg) => {
+    this.socket.on('sessionId', (msg) => {
       console.log('Socket session id is', msg.id);
       this.socketSessionId = msg.id;
     });
 
-    socket.on('disconnect', (reason) => {
+    this.socket.on('disconnect', (reason) => {
       console.log('Socket disconnected');
     });
 
-    socket.on('reconnect', (attemptNumber) => {
+    this.socket.on('reconnect', (attemptNumber) => {
       console.log('Socket reconnected');
     });
 
-    socket.on('favorite.created', (msg) => {
+    this.socket.on('favorite.created', (msg) => {
       if (msg.socketid != this.socketSessionId) {
         console.log(msg);
         this.renderFavorite(msg, 'top');
       }
     });
 
-    socket.on('favorite.updated', (msg) => {
+    this.socket.on('favorite.updated', (msg) => {
       if (msg.socketid != this.socketSessionId) {
         this.renderFavorite(msg, document
           .getElementById('favorite_' + msg._id));
@@ -256,11 +256,40 @@ class App {
       console.log(msg);
     });
 
-    socket.on('favorite.deleted', (msg) => {
+    this.socket.on('favorite.deleted', (msg) => {
       if (msg.socketid != this.socketSessionId) {
         document.getElementById('favorite_' + msg._id).remove();
       }
     });
+
+    this.socket.on('canvas.draw', (arr) => {
+      console.log('canvas.draw recieved', arr);
+
+      const m = this.mousedown;
+      this.mousedown = false;
+      if (m) {
+        const last = history.pop();
+        history.pushAll(arr);
+        history.pushAll(last);
+      } else {
+        history.pushAll(arr);
+      }
+      this.redrawAll();
+
+      this.mousedown = m;
+    });
+
+    this.socket.on('canvas.clear', () => {
+      this.clear();
+      this.background = null;
+      this.history.clear();
+      this.redrawAll();
+    });
+
+    this.socket.on('canvas.undo', () => {
+      history.pop();
+      this.redrawAll();
+    });
   }
 
   constructor(conf) {
@@ -326,6 +355,7 @@ class App {
           this.erase();
           this.background = null;
           history.clear();
+          this.socket.emit('canvas.clear', null);
         });
       }
 
@@ -333,6 +363,7 @@ class App {
         this.buttons.undo.addEventListener('click', () => {
           history.pop();
           this.redrawAll();
+          this.socket.emit('canvas.undo', null);
         });
       }
 
@@ -481,18 +512,25 @@ class App {
       this._brush.draw(this.ctx, this.strokeStyle, e.offsetX, e.offsetY);
 
       if (record) {
-        history.push(new Stroke(this.brush, this.strokeStyle,
+        const lastArr = history.push(new Stroke(this.brush, this.strokeStyle,
           e.offsetX, e.offsetY));
+
+        if (!beginNew) {
+          console.log('canvas.draw submit', lastArr);
+          this.socket.emit('canvas.draw', lastArr);
+        }
       }
 
       if (beginNew) {
         this.ctx.beginPath();
         this.ctx.moveTo(e.offsetX, e.offsetY);
-      } else if (e instanceof MouseEvent) {
+      } else {
+        if (e instanceof MouseEvent) {
           this.mousedown = false;
         }
       }
     }
+  }
 
   endPath(e, record = true) {
     this.draw(e, false, record);

hw7/Claudio_Maggioni/public/scripts/undo.js

@@ -9,6 +9,10 @@ history.pop = () => {
   return history.paths.pop();
 };
 
+history.pushAll = arr => {
+  history.paths.push(arr);
+}
+
 history.initializeNewPath = () => {
   history.paths.push([]);
 };

hw7/Claudio_Maggioni/readme.md

@@ -4,3 +4,4 @@
 - Task 6
 - Task 7
 - Access token fetching from authorization url
+- Renato Zero parody lyrics