Create brush indicator

Nibriboard/ClientFiles/Interface.js

@@ -10,13 +10,23 @@ class Interface extends EventEmitter
 		
 		this.sidebar = inSidebar;
 		
-		this.currentToolElement = this.sidebar.querySelector(".tools .tool-selector[data-selected]");
+		this.brushIndicator = this.sidebar.querySelector(".brush-indicator");
-		this.currentTool = "brush";
+		
 		this.setupToolSelectors();
+		this.setupColourSelectors();
+		this.setupBrushWidthControls();
+		
+		this.updateBrushIndicator();
 	}
 	
+	/**
+	 * Sets up the event listeners on the tool selectors.
+	 */
 	setupToolSelectors()
 	{
+		this.currentToolElement = this.sidebar.querySelector(".tools .tool-selector[data-selected]");
+		this.currentTool = "brush";
+		
 		var toolSelectors = this.sidebar.querySelectorAll(".tools .tool-selector");
 		for(let i = 0; i < toolSelectors.length; i++)
 		{
@@ -25,6 +35,32 @@ class Interface extends EventEmitter
 		}
 	}
 	
+	/**
+	 * Sets up the event listeners on the colour selectors.
+	 */
+	setupColourSelectors()
+	{
+		this.currentColourElement = this.sidebar.querySelector(".palette .palette-colour[data-selected]");
+		this.currentColour = this.currentColourElement.style.backgroundColor;
+		
+		var colours = this.sidebar.querySelectorAll(".palette .palette-colour");
+		for (let i = 0; i < colours.length; i++) {
+			colours[i].addEventListener("mouseup", this.handleSelectColour.bind(this));
+			colours[i].addEventListener("touchend", this.handleSelectColour.bind(this));
+		}
+	}
+	
+	/**
+	 * Sets up the brush width controls
+	 */
+	setupBrushWidthControls()
+	{
+		this.brushWidthElement = this.sidebar.querySelector(".brush-width-controls");
+		this.currentBrushWidth = parseInt(this.brushWidthElement.value);
+		
+		this.brushWidthElement.addEventListener("input", this.handleBrushWidthChange.bind(this));
+	}
+	
 	/**
 	 * Handles tool changes requested by the user.
 	 */
@@ -38,6 +74,43 @@ class Interface extends EventEmitter
 		this.emit("toolchange", { newTool: this.currentTool });
 	}
 	
+	/**
+	 * Handles colour selection changes requested by the user.
+	 */
+	handleSelectColour(event)
+	{
+		delete this.currentColourElement.datasest.selected;
+		this.currentColourElement = event.target;
+		this.currentColourElement.dataset.selected = "yes";
+		this.currentColour = this.currentColourElement.style.backgroundColor;
+		
+		this.updateBrushIndicator();
+		
+		console.info("Selected colour", this.currentColour);
+		this.emit("colourchange", { newColour: this.currentColour });
+	}
+	
+	/**
+	 * Handles brush widdth changes requested by the user
+	 */
+	handleBrushWidthChange(event)
+	{
+		this.currentBrushWidth = parseInt(event.target.value);
+		
+		this.updateBrushIndicator();
+		
+		this.emit("brushwidthchange", { newWidth: this.currentLineWidth });
+	}
+	
+	updateBrushIndicator()
+	{
+		// The brush indicator is zoom-agnostic (for the moment, at least)
+		this.brushIndicator.style.width = `${this.currentBrushWidth}px`;
+		this.brushIndicator.style.height = this.brushIndicator.style.width;
+		
+		this.brushIndicator.style.backgroundColor = this.currentColour;
+	}
+	
 	/**
 	 * Sets the displayed connection status.
 	 * @param {bool} newStatus The new connection status to display. true = connected - false = disconnected.

Nibriboard/ClientFiles/Nibri.css

@@ -58,6 +58,11 @@ body
     border-top: 0.2em solid rgba(255, 255, 255, 0.3);
 }
 
+.brush-indicator
+{
+    border-radius: 50%;
+}
+
 .tool-selector
 {
     display: inline-block;
@@ -81,6 +86,11 @@ body
     cursor: pointer;
 }
 
+.palette-colour[data-selected]
+{
+    border: 0.2em dashed hsl(219, 87%, 54%);
+}
+
 .fps
 {
     top: 0.2em !important; right: 0.2em !important;

Nibriboard/ClientFiles/Pencil.js

@@ -47,8 +47,13 @@ class Pencil
 		// The time of the last push of the line to the server.
 		this.lastServerPush = 0;
 		
+		// Event Listeners
 		canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
 		canvas.addEventListener("mouseup", this.handleMouseUp.bind(this));
+		
+		this.boardWindow.interface.on("colourchange", (function(event) {
+		    this.currentColour = event.newColour;
+		}).bind(this))
 	}
 	
 	handleMouseMove(event) {

Nibriboard/ClientFiles/index.html

@@ -15,9 +15,9 @@
 			<hr />
 			
 			<section class="brush-settings">
-				<div class="current-brush"></div>
+				<div class="brush-indicator"></div>
 				
-				<input type="range" min="1" max="30" step="1" id="brush-width" />
+				<input type="range" min="1" max="30" step="0.1" class="brush-width-controls" />
 			</section>
 			
 			<section class="tools">
@@ -33,7 +33,7 @@
 				<span class="palette-colour" style="background-color: white;"></span>
 				<span class="palette-colour" style="background-color: black;"></span>
 				<span class="palette-colour" style="background-color: red;"></span>
-				<span class="palette-colour" style="background-color: orange;"></span>
+				<span class="palette-colour" style="background-color: orange;" data-selected></span>
 				<span class="palette-colour" style="background-color: darkgreen;"></span>
 				<span class="palette-colour" style="background-color: blue;"></span>
 				<span class="palette-colour" style="background-color: purple;"></span>