People can see other peoples' cursors! hooray! :D :D :D

Nibriboard/Client/NibriClient.cs

@@ -80,6 +80,8 @@ namespace Nibriboard.Client
 
 		public NibriClient(NibriClientManager inManager, WebSocket inClient)
 		{
+			Log.WriteLine("[Nibriboard/WebSocket] New NibriClient connected with id #{0}.", Id);
+
 			manager = inManager;
 			client = inClient;
 

Nibriboard/Client/NibriClientManager.cs

@@ -37,7 +37,7 @@ namespace Nibriboard.Client
 		/// <returns>Whether we want to accept the WebSocket connection attempt or not.</returns>
 		public bool WillAcceptRequest(string uri, string protocol)
 		{
-			Log.WriteLine("[Nibriboard/Websocket] Accepting new {0} connection.", protocol);
+			//Log.WriteLine("[Nibriboard/Websocket] Accepting new {0} connection.", protocol);
 			return clientSettings.WebsocketProtocol == protocol;
 		}
 		/// <summary>

Nibriboard/ClientFiles/BoardWindow.js

@@ -20,6 +20,14 @@ class BoardWindow extends EventEmitter
 		this.maxFps = 60;
 		// The target fps at which we should send sursor updates.
 		this.cursorUpdateFrequency = 5;
+		
+		// The radius of other clients' cursors.
+		this.otherCursorRadius = 10;
+		// The width of the lines in other clients' cursors.
+		this.otherCursorWidth = 2;
+		
+		// --~~~--
+		
 		// Setup the fps indicator in the top right corner
 		this.renderTimeIndicator = document.createElement("span");
 		this.renderTimeIndicator.innerHTML = "0ms";
@@ -41,6 +49,9 @@ class BoardWindow extends EventEmitter
 		// Grab a reference to the sidebar
 		this.sidebar = document.getElementById("sidebar");
 		
+		// Create a map to store information about other clients in
+		this.otherClients = new Map();
+		
 		// --~~~--
 		
 		// Setup the favicon thingy
@@ -93,8 +104,6 @@ class BoardWindow extends EventEmitter
 				InitialAbsCursorPosition: this.cursorPosition
 			});
 		}).bind(this));
-		// Create a map to store information about other clients in
-		this.otherClients = new Map();
 		
 		// Keep the server up to date on our viewport and cursor position
 		this.viewportSyncer = new ViewportSyncer(this.rippleLink, this.cursorUpdateFrequency)
@@ -148,8 +157,36 @@ class BoardWindow extends EventEmitter
 	{
 		context.clearRect(0, 0, canvas.width, canvas.height);
 		
-		context.fillStyle = "red";
+		this.renderOthers(canvas, context);
-		context.fillRect(10, 10, 100, 100);
+	}
+	
+	renderOthers(canvas, context)
+	{
+		context.save();
+		
+		for (let [clientId, clientData] of this.otherClients)
+		{
+			// TODO: Filter rendering by working out if this client is actually inside our viewport or not here
+			// TODO: Refactor the other client information out into another class.
+			context.save();
+			context.translate(clientData.AbsCursorPosition.X, clientData.AbsCursorPosition.Y);
+			
+			context.beginPath();
+			// Horizontal line
+			context.moveTo(-this.otherCursorRadius, 0);
+			context.lineTo(this.otherCursorRadius, 0);
+			// Vertical line
+			context.moveTo(0, -this.otherCursorRadius);
+			context.lineTo(0, this.otherCursorRadius);
+			
+			context.strokeStyle = clientData.Colour;
+			context.lineWidth = this.otherCursorWidth
+			context.stroke();
+			
+			context.restore();
+		}
+		
+		context.restore();
 	}
 	
 	/**

Nibriboard/NibriboardServer.cs

@@ -27,7 +27,7 @@ namespace Nibriboard
 			Port = inPort;
 
 			clientSettings = new ClientSettings() {
-				WebsocketHost = "localhost",
+				WebsocketHost = "192.168.0.56",
 				WebsocketPort = Port,
 				WebsocketPath = "/RipplespaceLink"
 			};

Nibriboard/RippleSpace/ClientState.cs

@@ -1,6 +1,8 @@
 using System;
 
 using SBRL.Utilities;
+using Newtonsoft.Json;
+using SBRL.Utilities.Solutions;
 
 namespace RippleSpace
 {
@@ -27,6 +29,7 @@ namespace RippleSpace
 		/// <summary>
 		/// The colour associated with the client.
 		/// </summary>
+		[JsonConverter(typeof(ToStringJsonConverter))]
 		public ColourHSL Colour;
 
 		/// <summary>