diff --git a/hw7/Claudio_Maggioni/app.js b/hw7/Claudio_Maggioni/app.js index f9d345a..b53fe80 100644 --- a/hw7/Claudio_Maggioni/app.js +++ b/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'); diff --git a/hw7/Claudio_Maggioni/public/scripts/app.js b/hw7/Claudio_Maggioni/public/scripts/app.js index 30cc546..4ae8db5 100644 --- a/hw7/Claudio_Maggioni/public/scripts/app.js +++ b/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,15 +512,22 @@ 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) { - this.mousedown = false; + } else { + if (e instanceof MouseEvent) { + this.mousedown = false; + } } } } diff --git a/hw7/Claudio_Maggioni/public/scripts/undo.js b/hw7/Claudio_Maggioni/public/scripts/undo.js index 05c7de9..192eeb2 100644 --- a/hw7/Claudio_Maggioni/public/scripts/undo.js +++ b/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([]); }; diff --git a/hw7/Claudio_Maggioni/readme.md b/hw7/Claudio_Maggioni/readme.md index e5aec12..ee9f762 100644 --- a/hw7/Claudio_Maggioni/readme.md +++ b/hw7/Claudio_Maggioni/readme.md @@ -4,3 +4,4 @@ - Task 6 - Task 7 - Access token fetching from authorization url +- Renato Zero parody lyrics