make territory more opaque, space bar makes territory invisible.

src/client/graphics/GameRenderer.ts

@@ -77,7 +77,7 @@ export function createRenderer(canvas: HTMLCanvasElement, game: Game, eventBus:
 		new TerritoryLayer(game, eventBus),
 		new StructureLayer(game, eventBus),
 		new UnitLayer(game, eventBus, clientID),
-		new NameLayer(game, game.config().theme(), transformHandler, clientID),
+		new NameLayer(game, eventBus, game.config().theme(), transformHandler, clientID),
 		new UILayer(eventBus, game, clientID, transformHandler),
 		eventsDisplay,
 		new RadialMenu(eventBus, game, transformHandler, clientID, emojiTable as EmojiTable, buildMenu, uiState),

src/client/graphics/layers/NameLayer.ts

@@ -11,6 +11,8 @@ import allianceIcon from '../../../../resources/images/AllianceIcon.png';
 import crownIcon from '../../../../resources/images/CrownIcon.png';
 import targetIcon from '../../../../resources/images/TargetIcon.png';
 import { ClientID } from "../../../core/Schemas"
+import { EventBus } from "../../../core/EventBus"
+import { AlternateViewEvent } from "../../InputHandler"
 
 
 class RenderInfo {
@@ -42,7 +44,17 @@ export class NameLayer implements Layer {
 
     private firstPlace: Player | null = null
 
-    constructor(private game: Game, private theme: Theme, private transformHandler: TransformHandler, private clientID: ClientID) {
+    private alternateView = false
+
+    constructor(
+        private game: Game,
+        private eventBus: EventBus,
+        private theme: Theme,
+        private transformHandler: TransformHandler,
+        private clientID: ClientID
+    ) {
+        this.eventBus.on(AlternateViewEvent, e => { this.alternateView = e.alternateView })
+
         this.traitorIconImage = new Image();
         this.traitorIconImage.src = traitorIcon;
 
@@ -146,6 +158,11 @@ export class NameLayer implements Layer {
     }
 
     renderPlayerInfo(render: RenderInfo, context: CanvasRenderingContext2D, scale: number, uppperLeft: Cell, bottomRight: Cell) {
+        if (this.alternateView) {
+            return
+        }
+
+
         const nameCenterX = Math.floor(render.location.x - this.game.width() / 2)
         const nameCenterY = Math.floor(render.location.y - this.game.height() / 2)
 

src/client/graphics/layers/TerritoryLayer.ts

@@ -8,6 +8,7 @@ import { Layer } from "./Layer";
 import { TransformHandler } from "../TransformHandler";
 import { EventBus } from "../../../core/EventBus";
 import { initRemoteSender } from "../../../core/Consolex";
+import { AlternateViewEvent } from "../../InputHandler";
 
 export class TerritoryLayer implements Layer {
     private canvas: HTMLCanvasElement
@@ -22,10 +23,11 @@ export class TerritoryLayer implements Layer {
     private highlightCanvas: HTMLCanvasElement
     private highlightContext: CanvasRenderingContext2D
 
+    private alternativeView = false
 
-    constructor(private game: Game, eventBus: EventBus) {
+
+    constructor(private game: Game, private eventBus: EventBus) {
         this.theme = game.config().theme()
-        eventBus.on(TileEvent, e => this.tileUpdate(e))
     }
 
     shouldTransform(): boolean {
@@ -58,11 +60,14 @@ export class TerritoryLayer implements Layer {
     }
 
     init(game: Game) {
-        console.log('redrew territory layer')
+        this.eventBus.on(TileEvent, e => this.tileUpdate(e))
+        this.eventBus.on(AlternateViewEvent, e => { this.alternativeView = e.alternateView })
         this.redraw()
     }
 
+
     redraw() {
+        console.log('redrew territory layer')
         this.canvas = document.createElement('canvas');
         this.context = this.canvas.getContext("2d")
 
@@ -94,6 +99,9 @@ export class TerritoryLayer implements Layer {
     renderLayer(context: CanvasRenderingContext2D) {
         this.renderTerritory()
         this.context.putImageData(this.imageData, 0, 0);
+        if (this.alternativeView) {
+            return
+        }
 
         context.drawImage(
             this.canvas,
@@ -155,7 +163,7 @@ export class TerritoryLayer implements Layer {
             this.paintCell(
                 tile.cell(),
                 this.theme.territoryColor(owner.info()),
-                110
+                150
             )
         }
     }