[client] Notify the server when we complete a line.

Nibriboard/ClientFiles/BoardWindow.js

@@ -9,6 +9,7 @@ window.panzoom = require("pan-zoom");
 import RippleLink from './RippleLink';
 import ViewportSyncer from './ViewportSyncer';
 import OtherClient from './OtherClient';
+import Pencil from './Pencil';
 import { get } from './Utilities';
 import Keyboard from './Utilities/Keyboard';
 
@@ -51,6 +52,11 @@ class BoardWindow extends EventEmitter
 			// The zoom level of the viewport. 1 = normal.
 			zoomLevel: 1
 		};
+		/**
+		 * The currents tate of the keyboard.
+		 * @type {Keyboard}
+		 */
+		this.keyboard = new Keyboard();
 		
 		// --~~~--
 		
@@ -64,7 +70,7 @@ class BoardWindow extends EventEmitter
 		// Create a map to store information about other clients in
 		this.otherClients = new Map();
 		
-		this.keyboard = new Keyboard();
+		
 		
 		// --~~~--
 		
@@ -172,6 +178,7 @@ class BoardWindow extends EventEmitter
 		context.clearRect(0, 0, canvas.width, canvas.height);
 		
 		this.renderOthers(canvas, context);
+		this.pencil.render(canvas, context);
 	}
 	
 	renderOthers(canvas, context)
@@ -237,6 +244,10 @@ class BoardWindow extends EventEmitter
 		this.viewport.zoomLevel += event.dz;
 	}
 	
+	/**
+	 * Handles the server's response to our handshake request
+	 * @param  {object} message The server's response to our handshake request.
+	 */
 	handleHandshakeResponse(message) {
 		console.log("Received handshake response");
 		
@@ -245,6 +256,9 @@ class BoardWindow extends EventEmitter
 		this.Colour = message.Colour;
 		
 		this.sidebar.style.borderTopColor = this.Colour;
+		
+		// The pencil that draws the lines
+		this.pencil = new Pencil(this.rippleLink, this);
 	}
 	
 	/**

Nibriboard/ClientFiles/Pencil.js

@@ -1,8 +1,9 @@
 "use strict";
 
-import Mouse from './Utilities/Mouse';
 import Vector from './Utilities/Vector';
 
+import Mouse from './Utilities/Mouse';
+
 var cuid = require("cuid");
 
 class Pencil
@@ -66,6 +67,13 @@ class Pencil
 	
 	handleMouseUp(event) {
 		sendUnsent();
+		// Tell the server that the line is complete
+		this.rippleLink.send({
+			Event: "LineComplete",
+			LineId: this.currentLineId,
+			LineWidth: this.currentLineWidth,
+			LineColour: this.currentColour
+		});
 		// Reset the current line segments
 		this.currentLineSegments = [];
 		// Regenerate the line id
@@ -87,6 +95,11 @@ class Pencil
 		this.unsentSegments = [];
 	}
 	
+	/**
+	 * Renders the line that is currently being drawn to the screen.
+	 * @param  {HTMLCanvasElement} canvas  The canvas to draw to.
+	 * @param  {CanvasRenderingContext2D} context The rendering context to use to draw to the canvas.
+	 */
 	render(canvas, context) {
 		if(this.currentLineSegments.length == 0)
 			return;