diff --git a/assets/css/style.css b/assets/css/style.css index 8db4bbc..cd81a61 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -7,8 +7,6 @@ html, body { canvas { float: left; - width: 50%; - height: 100%; } #chat { diff --git a/assets/scripts/drawboard.js b/assets/scripts/drawboard.js new file mode 100644 index 0000000..f06ade2 --- /dev/null +++ b/assets/scripts/drawboard.js @@ -0,0 +1,55 @@ +document.addEventListener("DOMContentLoaded", function() { + var mouse = { + click: false, + move: false, + pos: {x:0, y:0}, + pos_prev: false + } + + var canvas = document.getElementById("drawboard"); + canvas.width = window.innerWidth / 2; + canvas.height = window.innerHeight; + var context = canvas.getContext("2d"); + var width = canvas.width; + var height = canvas.height; + + canvas.onmousedown = function(e) { + mouse.click = true; + }; + + canvas.onmouseup = function(e) { + mouse.click = false; + }; + + canvas.onmousemove = function(e) { + mouse.pos.x = e.clientX / width; + mouse.pos.y = e.clientY / height; + mouse.move = true; + }; + + socket.on("draw_line", function(data) { + var line = data.line; + context.beginPath(); + context.lineWidth = 2; + context.moveTo(line[0].x * width, line[0].y * height); + context.lineTo(line[1].x * width, line[1].y * height); + context.stroke(); + }); + + window.onresize = function(e) { + canvas.width = window.innerWidth / 2; + canvas.height = window.innerHeight; + }; + + function drawLoop() { + if (mouse.click && mouse.move && mouse.pos_prev) { + socket.emit("draw_line", { line: [mouse.pos, mouse.pos_prev] }); + mouse.move = false; + } + + mouse.pos_prev = {x: mouse.pos.x, y: mouse.pos.y}; + setTimeout(drawLoop, 25); + } + + drawLoop(); +}); diff --git a/index.html b/index.html index 5daa701..9116266 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - +
@@ -34,5 +34,6 @@ appendMessage(message); }); + diff --git a/index.js b/index.js index 1b97b82..8dc3387 100644 --- a/index.js +++ b/index.js @@ -5,6 +5,7 @@ var io = require("socket.io")(http); var path = require("path"); var PORT = process.argv.length <= 2 ? 3000 : process.argv[2]; +var drawHistory = []; app.use("/assets/", express.static(__dirname + "/assets")); @@ -12,7 +13,15 @@ app.get('/', function(request, response){ response.sendFile(__dirname + "/index.html"); }); -io.on('connection', function(socket) { +io.on("connection", function(socket) { + for (var i in drawHistory) + socket.emit("draw_line", { line: drawHistory[i] } ); + + socket.on("draw_line", function(data) { + drawHistory.push(data.line); + io.emit("draw_line", { line: data.line } ); + }); + socket.on('disconnect', function(){ console.log('user disconnected'); io.emit('chat_message', 'user disconnected');