[client] Add new debug display param & implement some chunk update request logic. It's buggy though apparently.

Nibriboard/ClientFiles/BoardWindow.js

@@ -200,7 +200,7 @@ class BoardWindow extends EventEmitter
 		
 		if(frameStart - this.lastFrameStart >= (1 / this.maxFps) * 1000)
 		{
-			this.update();
+			this.update(frameStart - this.lastFrameStart);
 			this.render(this.canvas, this.context);
 		}
 		
@@ -218,9 +218,12 @@ class BoardWindow extends EventEmitter
 	/**
 	 * Updates everything ready for the next frame to be rendered.
 	 */
-	update()
+	update(dt)
 	{
-		this.interface.updateDebugInfo(this);
+		if(typeof this.chunkCache != "undefined" && this.gridSize != -1)
+			this.chunkCache.update(dt, this.viewport);
+		
+		this.interface.updateDebugInfo(dt, this);
 	}
 	
 	/**

Nibriboard/ClientFiles/ChunkCache.js

@@ -26,7 +26,9 @@ class ChunkCache
 	 */
 	add(chunkData, override = false)
 	{
-		var hasChunk = this.cache.has(chunkData.chunkRef.toString());
+		var hasChunk = this.cache.has(chunkData.chunkRef.toString()) &&
+			this.cache.get(chunkData.chunkRef.toString()).requestedFromServer;
+		
 		if(!override && hasChunk)
 			throw new Error("Error: We already have a chunk at that location stored.");
 		
@@ -38,7 +40,7 @@ class ChunkCache
 	update(dt, visibleArea)
 	{
 		let chunkSize = this.boardWindow.gridSize;
-		let chunkArea = this.CalculateChunkArea(visibleArea, chunkSize);
+		let chunkArea = ChunkCache.CalculateChunkArea(visibleArea, chunkSize);
 		
 		// Collect a list of missing chunks
 		let missingChunks = [];
@@ -50,17 +52,21 @@ class ChunkCache
 					this.boardWindow.currentPlaneName,
 					cx / chunkSize, cy / chunkSize
 				);
-				if(!this.cache.has(cChunk)) {
+				if(!this.cache.has(cChunk.toString())) {
+					console.info(`Requesting ${cChunk}`);
 					missingChunks.push(cChunk);
+					this.cache.set(cChunk.toString(), { requestedFromServer: true });
 				}
 			}
 		}
 		
+		if(missingChunks.length > 0) {
 			// Asynchronously request them from the server
 			this.boardWindow.rippleLink.send({
 				"Event": "ChunkUpdateRequest",
 				"ForgottenChunks": missingChunks
-		})
+			});
+		}
 	}
 	
 	/**
@@ -75,7 +81,7 @@ class ChunkCache
 	{
 		context.save();
 		let chunkSize = this.boardWindow.gridSize;
-		let chunkArea = this.CalculateChunkArea(visibleArea, chunkSize);
+		let chunkArea = ChunkCache.CalculateChunkArea(visibleArea, chunkSize);
 		
 		for(let cx = chunkArea.x; cx <= chunkArea.x + chunkArea.width; cx += chunkSize)
 		{
@@ -89,7 +95,7 @@ class ChunkCache
 				);
 				
 				let chunk = this.cache.get(cChunk.toString());
-				if(typeof chunk != "undefined")
+				if(typeof chunk != "undefined" && !chunk.requestedFromServer)
 					chunk.render(canvas, context);
 				
 				if(this.showRenderedChunks) {

Nibriboard/ClientFiles/Interface.js

@@ -191,8 +191,9 @@ class Interface extends EventEmitter
 		this.sidebar.querySelector(".name").innerHTML = newName;
 	}
 	
-	updateDebugInfo(boardWindow)
+	updateDebugInfo(dt, boardWindow)
 	{
+		this.debugDisplay.querySelector("#debug-framespacing").value = `${dt}ms`;
 		this.debugDisplay.querySelector("#debug-viewport").value = boardWindow.viewport;
 	}
 }

Nibriboard/ClientFiles/Nibri.css

@@ -124,6 +124,8 @@ hr
     padding: 0.5em;
     
     z-index: 5000;
+    
+    text-align: right;
 }
 
 .debug-value

Nibriboard/ClientFiles/index.html

@@ -45,6 +45,9 @@
 		
 		<aside id="debuginfo">
 			<label>Viewport:</label> <output id="debug-viewport" class="debug-value">?</output>
+			<br />
+			<label>Frame spacing:</label> <output id="debug-framespacing" class="debug-value">?</output>
+			<br />
 			<small><em><kbd>g</kbd>: toggle grid, <kbd>c</kbd>: toggle chunk higlighting</small>
 		</aside>