[client] Finish ChunkCache renderer & start hooking up a chunk update mechanism

Nibriboard/ClientFiles/BoardWindow.js

@@ -13,6 +13,7 @@ import Pencil from './Pencil';
 import { get } from './Utilities';
 import Keyboard from './Utilities/Keyboard';
 import Interface from './Interface';
+import ChunkCache from './ChunkCache';
 
 class BoardWindow extends EventEmitter
 {
@@ -149,6 +150,7 @@ class BoardWindow extends EventEmitter
 	setup() {
 		this.rippleLink = new RippleLink(this.settings.WebsocketUri, this);
 		this.rippleLink.on("connect", (function(event) {
+			
 			// Send the handshake request
 			this.rippleLink.send({
 				Event: "HandshakeRequest",
@@ -224,6 +226,12 @@ class BoardWindow extends EventEmitter
 		if(this.displayGrid)
 			this.renderGrid(canvas, context);
 		
+		// Only render the visible chunks if the chunk cache has been created
+		// The chunk cache is only created once the ripple link connects successfully
+		// to the nibriboard server.
+		if(typeof this.chunkCache != "undefined" && this.gridSize != -1)
+			this.chunkCache.renderVisible(this.viewport, canvas, context);
+		
 		this.renderOthers(canvas, context);
 		// Render the currently active line
 		if(typeof this.pencil !== "undefined")
@@ -352,6 +360,8 @@ class BoardWindow extends EventEmitter
 		
 		// The pencil that draws the lines
 		this.pencil = new Pencil(this.rippleLink, this, this.canvas);
+		// The cache for the chunks
+		this.chunkCache = new ChunkCache(this);
 		
 		// Land on a default plane
 		// future ask the user which plane they want to join

Nibriboard/ClientFiles/ChunkCache.js

@@ -9,6 +9,8 @@ class ChunkCache
 	{
 		this.boardWindow = inBoardWindow;
 		this.cache = new Map();
+		
+		this.boardWindow.rippleLink.on("ChunkUpdate", this.handleChunkUpdate.bind(this));
 	}
 	
 	/**
@@ -31,15 +33,20 @@ class ChunkCache
 	 * @param	{CanvasRenderingContext2D}	context		The rendering context to
 	 * 												 	use to draw on the canvas.
 	 */
-	renderVisible(visibleArea, chunkSize, canvas, context)
+	renderVisible(visibleArea, canvas, context)
 	{
 		context.save();
-		
-		chunkArea = new Rectangle(
+		let chunkSize = this.boardWindow.gridSize;
+		let chunkArea = new Rectangle(
 			Math.floor(visibleArea.x / chunkSize) * chunkSize,
 			Math.floor(visibleArea.y / chunkSize) * chunkSize,
-			Math.floor((visibleArea.x + visibleArea.width) / chunkSize) * chunkSize,
-			Math.floor((visibleArea.y + visibleArea.height) / chunkSize) * chunkSize
+			(Math.floor((visibleArea.x + visibleArea.width) / chunkSize) * chunkSize),
+			(Math.floor((visibleArea.y + visibleArea.height) / chunkSize) * chunkSize)
+		);
+		
+		context.translate(
+			-Math.abs(visibleArea.x - chunkArea.x),
+			-Math.abs(visibleArea.y - chunkArea.y)
 		);
 		
 		for(let cx = chunkArea.x; cx <= chunkArea.x + chunkArea.width; cx += chunkSize)
@@ -51,12 +58,21 @@ class ChunkCache
 					cx, cy
 				);
 				let chunk = this.cache.get(cChunk.toString());
+				if(typeof chunk != "undefined")
 					chunk.render(canvas, context);
 			}
 		}
 		
 		context.restore();
 	}
+	
+	handleChunkUpdate(message)
+	{
+		for (let chunk of message.Chunks) {
+			//let newChunkRef = new ChunkReference();
+			let newChunk = new Chunk(chunk.Location)
+		}
+	}
 }
 
 export default ChunkCache;

Nibriboard/ClientFiles/ChunkReference.js

@@ -15,3 +15,5 @@ class ChunkReference extends Vector
 		return `ChunkReference: (${this.x}, ${this.y}, ${this.planeName})`;
 	}
 }
+
+export default ChunkReference;