alt-r to redraw graphics

src/client/InputHandler.ts

@@ -48,6 +48,10 @@ export class AlternateViewEvent implements GameEvent {
     constructor(public readonly alternateView: boolean) { }
 }
 
+export class RefreshGraphicsEvent implements GameEvent {
+
+}
+
 export class InputHandler {
 
     private lastPointerX: number = 0;
@@ -96,6 +100,10 @@ export class InputHandler {
                 this.alternateView = false
                 this.eventBus.emit(new AlternateViewEvent(false))
             }
+            if (e.key.toLowerCase() === 'r' && e.altKey && !e.ctrlKey) {
+                e.preventDefault();
+                this.eventBus.emit(new RefreshGraphicsEvent())
+            }
         });
     }
 

src/client/graphics/GameRenderer.ts

@@ -18,6 +18,7 @@ import { UnitLayer } from "./layers/UnitLayer";
 import { StructureLayer } from "./layers/StructureLayer";
 import { PlayerInfoOverlay } from "./layers/PlayerInfoOverlay";
 import { consolex } from "../../core/Consolex";
+import { RefreshGraphicsEvent as RedrawGraphicsEvent } from "../InputHandler";
 
 
 export function createRenderer(canvas: HTMLCanvasElement, game: Game, eventBus: EventBus, clientID: ClientID): GameRenderer {
@@ -98,6 +99,14 @@ export class GameRenderer {
 	}
 
 	initialize() {
+		this.eventBus.on(RedrawGraphicsEvent, (e) => {
+			this.layers.forEach(l => {
+				if (l.redraw) {
+					l.redraw()
+				}
+			})
+		})
+
 		this.layers.forEach(l => l.init(this.game))
 
 		document.body.appendChild(this.canvas);

src/client/graphics/layers/Layer.ts

@@ -1,9 +1,9 @@
-import {Game} from "../../../core/game/Game"
-import {TransformHandler} from "../TransformHandler"
+import { Game } from "../../../core/game/Game"
 
 export interface Layer {
     init(game: Game)
     tick()
     renderLayer(context: CanvasRenderingContext2D)
     shouldTransform(): boolean
+    redraw?(): void
 }

src/client/graphics/layers/StructureLayer.ts

@@ -70,12 +70,17 @@ export class StructureLayer implements Layer {
     }
 
     init(game: Game) {
+        this.eventBus.on(UnitEvent, e => this.onUnitEvent(e));
+        this.redraw()
+    }
+
+    redraw() {
+        console.log('structure layer redrawing')
         this.canvas = document.createElement('canvas');
         this.context = this.canvas.getContext("2d", { alpha: true });
         this.canvas.width = this.game.width();
         this.canvas.height = this.game.height();
-
-        this.eventBus.on(UnitEvent, e => this.onUnitEvent(e));
+        this.game.units().forEach(u => this.handleUnitRendering(new UnitEvent(u, u.tile())))
     }
 
     renderLayer(context: CanvasRenderingContext2D) {

src/client/graphics/layers/TerrainLayer.ts

@@ -1,8 +1,8 @@
-import {inherits} from "util"
-import {Game} from "../../../core/game/Game";
-import {throws} from "assert";
-import {Layer} from "./Layer";
-import {TransformHandler} from "../TransformHandler";
+import { inherits } from "util"
+import { Game } from "../../../core/game/Game";
+import { throws } from "assert";
+import { Layer } from "./Layer";
+import { TransformHandler } from "../TransformHandler";
 
 export class TerrainLayer implements Layer {
     private canvas: HTMLCanvasElement
@@ -18,6 +18,11 @@ export class TerrainLayer implements Layer {
     }
 
     init(game: Game) {
+        console.log('redrew terrain layer')
+        this.redraw()
+    }
+
+    redraw(): void {
         this.canvas = document.createElement('canvas');
         this.context = this.canvas.getContext("2d")
 

src/client/graphics/layers/TerritoryLayer.ts

@@ -7,6 +7,7 @@ import { Theme } from "../../../core/configuration/Config";
 import { Layer } from "./Layer";
 import { TransformHandler } from "../TransformHandler";
 import { EventBus } from "../../../core/EventBus";
+import { initRemoteSender } from "../../../core/Consolex";
 
 export class TerritoryLayer implements Layer {
     private canvas: HTMLCanvasElement
@@ -57,6 +58,11 @@ export class TerritoryLayer implements Layer {
     }
 
     init(game: Game) {
+        console.log('redrew territory layer')
+        this.redraw()
+    }
+
+    redraw() {
         this.canvas = document.createElement('canvas');
         this.context = this.canvas.getContext("2d")
 
@@ -71,6 +77,10 @@ export class TerritoryLayer implements Layer {
         this.highlightContext = this.highlightCanvas.getContext("2d", { alpha: true });
         this.highlightCanvas.width = this.game.width();
         this.highlightCanvas.height = this.game.height();
+
+        this.game.forEachTile(t => {
+            this.paintTerritory(t)
+        })
     }
 
     initImageData() {

src/client/graphics/layers/UnitLayer.ts

@@ -44,14 +44,9 @@ export class UnitLayer implements Layer {
     }
 
     init(game: Game) {
-        this.canvas = document.createElement('canvas');
-        this.context = this.canvas.getContext("2d");
-
-        this.canvas.width = this.game.width();
-        this.canvas.height = this.game.height();
-
         this.eventBus.on(UnitEvent, e => this.onUnitEvent(e));
         this.eventBus.on(AlternateViewEvent, e => this.onAlternativeViewEvent(e))
+        this.redraw()
     }
 
     renderLayer(context: CanvasRenderingContext2D) {
@@ -71,6 +66,11 @@ export class UnitLayer implements Layer {
 
 
     redraw() {
+        this.canvas = document.createElement('canvas');
+        this.context = this.canvas.getContext("2d");
+
+        this.canvas.width = this.game.width();
+        this.canvas.height = this.game.height();
         for (const unit of this.game.units()) {
             this.onUnitEvent(new UnitEvent(unit, unit.tile()))
         }