diff --git a/Nibriboard/Client/NibriClient.cs b/Nibriboard/Client/NibriClient.cs index 4d95137..27fb162 100644 --- a/Nibriboard/Client/NibriClient.cs +++ b/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; diff --git a/Nibriboard/Client/NibriClientManager.cs b/Nibriboard/Client/NibriClientManager.cs index bcb42e8..0049ee0 100644 --- a/Nibriboard/Client/NibriClientManager.cs +++ b/Nibriboard/Client/NibriClientManager.cs @@ -37,7 +37,7 @@ namespace Nibriboard.Client /// Whether we want to accept the WebSocket connection attempt or not. 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; } /// diff --git a/Nibriboard/ClientFiles/BoardWindow.js b/Nibriboard/ClientFiles/BoardWindow.js index 3f92dc2..0719fa5 100644 --- a/Nibriboard/ClientFiles/BoardWindow.js +++ b/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"; - context.fillRect(10, 10, 100, 100); + this.renderOthers(canvas, context); + } + + 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(); } /** diff --git a/Nibriboard/NibriboardServer.cs b/Nibriboard/NibriboardServer.cs index 5477f57..71c01b6 100644 --- a/Nibriboard/NibriboardServer.cs +++ b/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" }; diff --git a/Nibriboard/RippleSpace/ClientState.cs b/Nibriboard/RippleSpace/ClientState.cs index a194f4f..560736b 100644 --- a/Nibriboard/RippleSpace/ClientState.cs +++ b/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 /// /// The colour associated with the client. /// + [JsonConverter(typeof(ToStringJsonConverter))] public ColourHSL Colour; ///