refactored terrain render into separate class

src/client/ClientGame.ts

@@ -8,23 +8,25 @@ import {InputHandler, MouseUpEvent, ZoomEvent, DragEvent, MouseDownEvent} from "
 import {ClientID, ClientIntentMessageSchema, ClientJoinMessageSchema, ClientLeaveMessageSchema, ClientMessageSchema, GameID, Intent, ServerMessage, ServerMessageSchema, ServerSyncMessage, Turn} from "../core/Schemas";
 import {TerrainMap} from "../core/TerrainMapLoader";
 import {bfs, manhattanDist} from "../core/Util";
+import {TerrainRenderer} from "./graphics/TerrainRenderer";
 
 
 
 export function createClientGame(name: string, clientID: ClientID, gameID: GameID, config: Config, terrainMap: TerrainMap): ClientGame {
     let eventBus = new EventBus()
-    let gs = createGame(terrainMap, eventBus, config)
-    let gameRenderer = new GameRenderer(gs, config.theme(), document.createElement("canvas"))
+    let game = createGame(terrainMap, eventBus, config)
+    let terrainRenderer = new TerrainRenderer(game)
+    let gameRenderer = new GameRenderer(game, config.theme(), terrainRenderer)
 
     return new ClientGame(
         name,
         clientID,
         gameID,
         eventBus,
-        gs,
+        game,
         gameRenderer,
         new InputHandler(eventBus),
-        new Executor(gs)
+        new Executor(game)
     )
 }
 

src/client/graphics/GameRenderer.ts

@@ -5,12 +5,13 @@ import {DragEvent, ZoomEvent} from "../InputHandler";
 import {NameRenderer} from "./NameRenderer";
 import {bfs, manhattanDist} from "../../core/Util";
 import {PseudoRandom} from "../../core/PseudoRandom";
+import {TerrainRenderer} from "./TerrainRenderer";
 
 
 
 export class GameRenderer {
-	private backgroundCanvas: HTMLCanvasElement
 	private territoryCanvas: HTMLCanvasElement
+	private canvas: HTMLCanvasElement
 
 	private territoryContext: CanvasRenderingContext2D
 
@@ -20,14 +21,10 @@ export class GameRenderer {
 
 	private context: CanvasRenderingContext2D
 
-	private imageData: ImageData
 
 	private nameRenderer: NameRenderer;
 
-	private random = new PseudoRandom(123)
-
-	constructor(private gs: Game, private theme: Theme, private canvas: HTMLCanvasElement) {
-		this.context = canvas.getContext("2d")
+	constructor(private gs: Game, private theme: Theme, private terrainRenderer: TerrainRenderer) {
 		this.nameRenderer = new NameRenderer(gs, theme)
 	}
 
@@ -42,21 +39,14 @@ export class GameRenderer {
 		this.canvas.style.width = '100%';
 		this.canvas.style.height = '100%';
 
-		this.imageData = this.context.getImageData(0, 0, this.gs.width(), this.gs.height())
-		this.initImageData()
 		this.nameRenderer.initialize()
+		this.terrainRenderer.init()
 
 
 		document.body.appendChild(this.canvas);
 		window.addEventListener('resize', () => this.resizeCanvas());
 		this.resizeCanvas();
 
-		this.backgroundCanvas = document.createElement('canvas');
-		const backgroundCtx = this.backgroundCanvas.getContext('2d');
-		this.backgroundCanvas.width = this.gs.width();
-		this.backgroundCanvas.height = this.gs.height();
-		backgroundCtx.putImageData(this.imageData, 0, 0);
-
 
 		this.territoryCanvas = document.createElement('canvas')
 		this.territoryCanvas.width = this.gs.width();
@@ -66,18 +56,6 @@ export class GameRenderer {
 		requestAnimationFrame(() => this.renderGame());
 	}
 
-	initImageData() {
-		this.gs.forEachTile((tile) => {
-			let terrainColor = this.theme.terrainColor(tile)
-			const index = (tile.cell().y * this.gs.width()) + tile.cell().x
-			const offset = index * 4
-			this.imageData.data[offset] = terrainColor.rgba.r;
-			this.imageData.data[offset + 1] = terrainColor.rgba.g;
-			this.imageData.data[offset + 2] = terrainColor.rgba.b;
-			this.imageData.data[offset + 3] = terrainColor.rgba.a * 255 | 0
-		})
-	}
-
 	resizeCanvas() {
 		this.canvas.width = window.innerWidth;
 		this.canvas.height = window.innerHeight;
@@ -110,14 +88,7 @@ export class GameRenderer {
 			this.gs.height() / 2 - this.offsetY * this.scale
 		);
 
-		// Draw the game content from the temp canvas
-		this.context.drawImage(
-			this.backgroundCanvas,
-			-this.gs.width() / 2,
-			-this.gs.height() / 2,
-			this.gs.width(),
-			this.gs.height()
-		);
+		this.terrainRenderer.draw(this.context)
 
 		this.context.drawImage(
 			this.territoryCanvas,

src/client/graphics/TerrainRenderer.ts

@@ -34,4 +34,14 @@ export class TerrainRenderer {
             this.imageData.data[offset + 3] = terrainColor.rgba.a * 255 | 0
         })
     }
+
+    draw(context: CanvasRenderingContext2D) {
+        context.drawImage(
+            this.canvas,
+            -this.game.width() / 2,
+            -this.game.height() / 2,
+            this.game.width(),
+            this.game.height()
+        )
+    }
 }