[client] Add better background to sidebar and create Interface class

Nibriboard/ClientFiles/BoardWindow.js

@@ -12,6 +12,7 @@ import OtherClient from './OtherClient';
 import Pencil from './Pencil';
 import { get } from './Utilities';
 import Keyboard from './Utilities/Keyboard';
+import Interface from './Interface';
 
 class BoardWindow extends EventEmitter
 {
@@ -79,8 +80,8 @@ class BoardWindow extends EventEmitter
 		this.canvas = canvas;
 		this.context = canvas.getContext("2d");
 		
-		// Grab a reference to the sidebar
+		// Grab a reference to the sidebar and wrap it in an Interface class instance
-		this.sidebar = document.getElementById("sidebar");
+		this.interface = new Interface(document.getElementById("sidebar"));
 		
 		// Create a map to store information about other clients in
 		this.otherClients = new Map();
@@ -331,8 +332,8 @@ class BoardWindow extends EventEmitter
 		this.Id = message.Id;
 		this.Colour = message.Colour;
 		
-		this.sidebar.querySelector(".name").style.borderTopColor = this.Colour;
+		this.interface.OurColour = this.Colour;
-		this.sidebar.querySelector(".connection-indicator").dataset.connected = "yes";
+		this.interface.setConnectedStatus(true);
 		
 		// The pencil that draws the lines
 		this.pencil = new Pencil(this.rippleLink, this, this.canvas);

Nibriboard/ClientFiles/Interface.js

@@ -2,7 +2,7 @@
 
 window.EventEmitter = require("event-emitter-es6");
 
-class Sidebar extends EventEmitter
+class Interface extends EventEmitter
 {
 	constructor(inSidebar)
 	{
@@ -49,6 +49,23 @@ class Sidebar extends EventEmitter
 			delete this.sidebar.querySelector(".connection-indicator").dataset.connected;
 	}
 	
+	/**
+	 * Fetches our colour from the ui.
+	 */
+	get OurColour()
+	{
+		return this.sidebar.querySelector(".name").style.borderTopColor;
+	}
+	/**
+	 * Sets the colour displayed just above the name
+	 * @param {HTMLColour} newColour The new colour to display jsut above the
+	 *                               name in the sidebar.
+	 */
+	set OurColour(newColour)
+	{
+		this.sidebar.querySelector(".name").style.borderTopColor = newColour;
+	}
+	
 	/**
 	 * Updates the username displayed.
 	 * @param  {string} newName The new name to display inthe sidebar.
@@ -61,4 +78,4 @@ class Sidebar extends EventEmitter
 	
 }
 
-export default Sidebar;
+export default Interface;

Nibriboard/ClientFiles/Nibri.css

@@ -22,7 +22,7 @@ body
     
     padding: 0.3em 0.45em;
     
-    background: hsla(27, 91%, 81%, 0.71);
+    background: url(/images/transparent-square-tiles.png), hsla(27, 100%, 59%, 0.71);
     box-shadow: 0.5em 0 1em rgba(185, 183, 183, 0.56);
 }
 

Nibriboard/ClientFiles/RippleLink.js

@@ -38,7 +38,7 @@ class RippleLink extends EventEmitter
 	
 	handleDisconnection(event) {
 		console.error("[ripple link] Lost connection.");
-		delete this.boardWindow.sidebar.querySelector(".connection-indicator").dataset.connected;
+		this.boardWindow.interface.setConnectedStatus(true);
 		
 		this.emit("disconnect", event);
 	}

Nibriboard/Nibriboard.csproj

@@ -107,6 +107,7 @@
     <EmbeddedResource Include="ClientFiles\Nibri.css" />
     <EmbeddedResource Include="ClientFiles\favicon.ico" />
     <EmbeddedResource Include="ClientFiles\nibriboard.svg" />
+    <EmbeddedResource Include="ClientFiles\images\transparent-square-tiles.png" />
   </ItemGroup>
   <ItemGroup>
     <Folder Include="RippleSpace\" />