[client] Finish refacotring the brush indicator with weird ellipse stuff :P

Nibriboard/ClientFiles/BoardWindow.js

@@ -103,10 +103,10 @@ class BoardWindow extends EventEmitter
 		    this.interface.seekColour("forwards");
 		}).bind(this));
 		this.keyboard.on("keyup-up", (function(event) {
-		    this.interface.updateBrushWidth(this.interface.currentBrushWidth + 2, true);
+		    this.interface.updateBrushWidth(this.interface.brushIndicator.width + 2, true);
 		}).bind(this));
 		this.keyboard.on("keyup-down", (function(event) {
-		    this.interface.updateBrushWidth(this.interface.currentBrushWidth - 2, true);
+		    this.interface.updateBrushWidth(this.interface.brushIndicator.width - 2, true);
 		}).bind(this));
 		this.keyboard.on("keyup-c", (function(event) {
 		    this.chunkCache.showRenderedChunks = !this.chunkCache.showRenderedChunks;

Nibriboard/ClientFiles/BrushIndicator.js

@@ -7,6 +7,8 @@ class BrushIndicator
 		this.canvas = canvas;
 		this.context = canvas.getContext("2d");
 		
+		this.canvas.height = this.canvas.width = 48;
+		
 		this.width = 10;
 		this.colour = "red";
 	}
@@ -19,11 +21,10 @@ class BrushIndicator
 		);
 		
 		this.context.beginPath();
-		this.context.arc(
+		this.context.ellipse(
 			this.canvas.width / 2, this.canvas.height / 2,
-			this.width / 2,
-			0, Math.PI * 2,
-			false
+			this.width / 3, this.width / 3,
+			0, 0, Math.PI * 2, false
 		);
 		this.context.fillStyle = this.colour;
 		this.context.fill();

Nibriboard/ClientFiles/Interface.js

@@ -2,6 +2,8 @@
 
 window.EventEmitter = require("event-emitter-es6");
 
+import BrushIndicator from './BrushIndicator.js';
+
 class Interface extends EventEmitter
 {
 	constructor(inBoardWindow, inSidebar, inDebugDisplay)

Nibriboard/ClientFiles/Nibri.css

@@ -74,22 +74,15 @@ hr
 
 .brush-settings
 {
-    display: flex; flex-direction: column;
+    display: flex; flex-direction: row;
     min-height: 5em;
 }
 
-.brush-preview-display
-{
-    flex: 1;
-}
-
-.brush-indicator
-{
-    position: relative;
-    top: 50%; left: 50%; transform: translate(-50%, -50%);
-    
-    margin: 1em 0 0 0;
-    border-radius: 50%;
+.brush-indicator  { flex: 0; }
+.brush-width-controls
+{   
+    flex: 3;
+    margin-top: 2em;
 }
 
 .tool-selector

Nibriboard/ClientFiles/Pencil.js

@@ -70,7 +70,7 @@ class Pencil
 		}).bind(this))
 		
 		// Look up the initial line with in the interface
-		this.currentLineWidth = inInterface.currentBrushWidth;
+		this.currentLineWidth = inInterface.brushIndicator.width;
 		// Listen for future updates fromt he interface
 		inInterface.on("brushwidthchange", (function(event) {
 		    this.currentLineWidth = event.newWidth;

Nibriboard/lib/GlidingSquirrel

@@ -1 +1 @@
-Subproject commit 62f67e924c652d84956ed2bbf87588fd5ae963a9
+Subproject commit 1e7878c76032ab87bbf2829c8be2f43ff85f5660