Implement drawboard functionality

AlexandruGhergut · Apr 29, 2016 · 449e3ed · 449e3ed
1 parent c822dac
commit 449e3ed
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 4 deletions.
diff --git 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
@@ -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
@@ -10,7 +10,7 @@
 	<body>
 		<script> 
 		</script>
-		<canvas id="myCanvas" width="200" height="100">	
+		<canvas id="drawboard" width="200" height="100">	
 		</canvas>
 
 		<div id = "chat">
@@ -34,5 +34,6 @@
 				appendMessage(message);
 			});
 		</script>
+		<script src = "assets/scripts/drawboard.js"></script>
 	</body>
 </html>
diff --git a/index.js b/index.js
@@ -5,14 +5,23 @@ 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"));
 
 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');