Enchance chunk hightlighting and add keyboard control

Nibriboard/ClientFiles/BoardWindow.js

@@ -95,7 +95,7 @@ class BoardWindow extends EventEmitter
 		this.otherClients = new Map();
 		
 		/**
-		 * The currents tate of the keyboard.
+		 * The current state of the keyboard.
 		 * @type {Keyboard}
 		 */
 		this.keyboard = new Keyboard();
@@ -116,6 +116,9 @@ class BoardWindow extends EventEmitter
 		this.keyboard.on("keyup-down", (function(event) {
 		    this.interface.updateBrushWidth(this.interface.currentBrushWidth - 2, true);
 		}).bind(this));
+		this.keyboard.on("keyup-c", (function(event) {
+		    this.chunkCache.showRenderedChunks = !this.chunkCache.showRenderedChunks;
+		}).bind(this));
 		
 		// --~~~--
 		

Nibriboard/ClientFiles/ChunkCache.js

@@ -13,7 +13,7 @@ class ChunkCache
 		this.cache = new Map();
 		
 		// Whether to highlight rendered chunks. Useful for debugging purposes.
-		this.showRenderedChunks = true;
+		this.showRenderedChunks = false;
 		
 		this.boardWindow.rippleLink.on("ChunkUpdate", this.handleChunkUpdate.bind(this));
 	}
@@ -66,17 +66,15 @@ class ChunkCache
 					cx / chunkSize, cy / chunkSize
 				);
 				
-				// todo Render the purple box slightly different if we don't
-				// actually have a chunk form the server to render
-				if(this.showRenderedChunks) {
-					context.beginPath();
-					context.fillStyle = "hsla(270.5, 79.6%, 55.9%, 0.5)";
-					context.fillRect(cx, cy, chunkSize, chunkSize);
-				}
-				
 				let chunk = this.cache.get(cChunk.toString());
 				if(typeof chunk != "undefined")
 					chunk.render(canvas, context);
+				
+				if(this.showRenderedChunks) {
+					context.beginPath();
+					context.fillStyle = `hsla(270.5, 79.6%, 55.9%, ${typeof chunk != "undefined" ? 0.3 : 0.1})`;
+					context.fillRect(cx, cy, chunkSize, chunkSize);
+				}
 			}
 		}
 		

Nibriboard/ClientFiles/index.html

@@ -45,7 +45,7 @@
 		
 		<aside id="debuginfo">
 			<label>Viewport:</label> <output id="debug-viewport" class="debug-value">?</output>
-			
+			<small><em><kbd>g</kbd>: toggle grid, <kbd>c</kbd>: toggle chunk higlighting</small>
 		</aside>
 		
 		<canvas id="canvas-main"></canvas>

Nibriboard/Nibriboard.csproj

@@ -51,7 +51,7 @@
     </Reference>
     <Reference Include="System.Drawing" />
     <Reference Include="Newtonsoft.Json">
-      <HintPath>..\packages\Newtonsoft.Json.10.0.1\lib\net45\Newtonsoft.Json.dll</HintPath>
+      <HintPath>..\packages\Newtonsoft.Json.10.0.3\lib\net45\Newtonsoft.Json.dll</HintPath>
     </Reference>
   </ItemGroup>
   <ItemGroup>

Nibriboard/packages.config

@@ -2,5 +2,5 @@
 <packages>
   <package id="IotWeb" version="0.8.6" targetFramework="net452" />
   <package id="MimeSharp" version="1.0.0" targetFramework="net45" />
-  <package id="Newtonsoft.Json" version="10.0.1" targetFramework="net461" />
+  <package id="Newtonsoft.Json" version="10.0.3" targetFramework="net461" />
 </packages>