refactor interface name layers

src/client/graphics/layers/Layer.ts

@@ -3,6 +3,6 @@ import {TransformHandler} from "../TransformHandler"
 export interface Layer {
     init()
     tick()
-    render(context: CanvasRenderingContext2D, transformHandler: TransformHandler)
+    render(context: CanvasRenderingContext2D)
     shouldTransform(): boolean
 }

src/client/graphics/layers/NameLayer.ts

@@ -25,13 +25,10 @@ export class NameLayer implements Layer {
     private refreshRate = 1000
 
     private rand = new PseudoRandom(10)
-    private renderInfo: Map<Player, RenderInfo> = new Map()
-    private context: CanvasRenderingContext2D
-    private canvas: HTMLCanvasElement
     private renders: RenderInfo[] = []
     private seenPlayers: Set<Player> = new Set()
 
-    constructor(private game: Game, private theme: Theme) {
+    constructor(private game: Game, private theme: Theme, private transformHandler: TransformHandler) {
 
     }
     shouldTransform(): boolean {
@@ -40,14 +37,7 @@ export class NameLayer implements Layer {
 
 
     public init() {
-        this.canvas = document.createElement('canvas');
-        this.context = this.canvas.getContext('2d');
 
-        this.canvas.style.position = 'fixed';
-        this.canvas.style.left = '0';
-        this.canvas.style.top = '0';
-        this.canvas.width = this.game.width();
-        this.canvas.height = this.game.height();
     }
 
     // TODO: remove tick, move this to render
@@ -80,12 +70,12 @@ export class NameLayer implements Layer {
         }
     }
 
-    public render(mainContex: CanvasRenderingContext2D, transformHandler: TransformHandler) {
-        const [upperLeft, bottomRight] = transformHandler.screenBoundingRect()
+    public render(mainContex: CanvasRenderingContext2D) {
+        const [upperLeft, bottomRight] = this.transformHandler.screenBoundingRect()
         for (const render of this.renders) {
             render.isVisible = this.isVisible(render, upperLeft, bottomRight)
-            if (render.player.isAlive() && render.isVisible && render.fontSize * transformHandler.scale > 10) {
-                this.renderPlayerInfo(render, mainContex, transformHandler.scale, upperLeft, bottomRight)
+            if (render.player.isAlive() && render.isVisible && render.fontSize * this.transformHandler.scale > 10) {
+                this.renderPlayerInfo(render, mainContex, this.transformHandler.scale, upperLeft, bottomRight)
             }
         }
     }

src/client/graphics/layers/TerrainLayer.ts

@@ -41,7 +41,7 @@ export class TerrainLayer implements Layer {
         })
     }
 
-    render(context: CanvasRenderingContext2D, transformHandler: TransformHandler) {
+    render(context: CanvasRenderingContext2D) {
         context.drawImage(
             this.canvas,
             -this.game.width() / 2,

src/client/graphics/layers/TerritoryLayer.ts

@@ -50,7 +50,7 @@ export class TerritoryLayer implements Layer {
         })
     }
 
-    render(context: CanvasRenderingContext2D, transformHandler: TransformHandler) {
+    render(context: CanvasRenderingContext2D) {
         this.renderTerritory()
         this.context.putImageData(this.imageData, 0, 0);
         context.drawImage(

src/client/graphics/layers/UILayer.ts

@@ -22,16 +22,16 @@ export class UILayer implements Layer {
     private customMenu = document.getElementById('customMenu');
 
 
-    constructor(private eventBus: EventBus, private game: Game, private theme: Theme, private clientID: ClientID) {
+    constructor(private eventBus: EventBus, private game: Game, private theme: Theme, private clientID: ClientID, private transformHandler: TransformHandler) {
 
     }
-    render(context: CanvasRenderingContext2D, transformHandler: TransformHandler) {
+    render(context: CanvasRenderingContext2D) {
         if (!this.game.inSpawnPhase()) {
             return
         }
 
         const barHeight = 15;
-        const barBackgroundWidth = transformHandler.width();
+        const barBackgroundWidth = this.transformHandler.width();
 
         const ratio = this.game.ticks() / this.game.config().numSpawnPhaseTurns()
 
@@ -219,9 +219,25 @@ export class UILayer implements Layer {
     }
 
     private onRightClick(e: RightClickEvent) {
+        const cell = this.transformHandler.screenToWorldCoordinates(e.x, e.y)
+        const tile = this.game.tile(cell)
+        if (!tile.hasOwner()) {
+            return
+        }
+        const owner = tile.owner() as Player
+        if (owner.clientID() == this.clientID) {
+            return
+        }
+
         this.customMenu!.style.display = 'block';
         this.customMenu!.style.left = `${e.x}px`;
         this.customMenu!.style.top = `${e.y}px`;
+        this.populateMenu([
+            {
+                label: "Request Alliance",
+                action: (): void => { },
+            }
+        ])
     }
 
     private populateMenu(options: MenuOption[]) {