use GameView in renderers

src/client/graphics/GameRenderer.ts

@@ -19,9 +19,10 @@ import { StructureLayer } from "./layers/StructureLayer";
 import { PlayerInfoOverlay } from "./layers/PlayerInfoOverlay";
 import { consolex } from "../../core/Consolex";
 import { RefreshGraphicsEvent as RedrawGraphicsEvent } from "../InputHandler";
+import { GameView } from "../../core/GameView";
 
 
-export function createRenderer(canvas: HTMLCanvasElement, game: Game, eventBus: EventBus, clientID: ClientID): GameRenderer {
+export function createRenderer(canvas: HTMLCanvasElement, game: GameView, eventBus: EventBus, clientID: ClientID): GameRenderer {
 	const transformHandler = new TransformHandler(game, eventBus, canvas)
 
 	const uiState = { attackRatio: 20 }
@@ -44,6 +45,7 @@ export function createRenderer(canvas: HTMLCanvasElement, game: Game, eventBus:
 	}
 	leaderboard.clientID = clientID
 	leaderboard.eventBus = eventBus
+	leaderboard.game = game
 
 
 	const controlPanel = document.querySelector('control-panel') as ControlPanel;
@@ -53,6 +55,7 @@ export function createRenderer(canvas: HTMLCanvasElement, game: Game, eventBus:
 	controlPanel.clientID = clientID
 	controlPanel.eventBus = eventBus
 	controlPanel.uiState = uiState
+	controlPanel.game = game
 
 	const eventsDisplay = document.querySelector('events-display') as EventsDisplay;
 	if (!(eventsDisplay instanceof EventsDisplay)) {
@@ -94,7 +97,7 @@ export class GameRenderer {
 
 	private context: CanvasRenderingContext2D
 
-	constructor(private game: Game, private eventBus: EventBus, private canvas: HTMLCanvasElement, public transformHandler: TransformHandler, public uiState: UIState, private layers: Layer[]) {
+	constructor(private game: GameView, private eventBus: EventBus, private canvas: HTMLCanvasElement, public transformHandler: TransformHandler, public uiState: UIState, private layers: Layer[]) {
 		this.context = canvas.getContext("2d")
 	}
 
@@ -107,7 +110,7 @@ export class GameRenderer {
 			})
 		})
 
-		this.layers.forEach(l => l.init(this.game))
+		this.layers.forEach(l => l.init())
 
 		document.body.appendChild(this.canvas);
 		window.addEventListener('resize', () => this.resizeCanvas());

src/client/graphics/NameBoxCalculator.ts

@@ -1,4 +1,5 @@
 import { Game, Player, Tile, Cell } from '../../core/game/Game';
+import { GameView } from '../../core/GameView';
 import { calculateBoundingBox, within } from '../../core/Util';
 
 export interface Point {
@@ -14,7 +15,7 @@ export interface Rectangle {
 }
 
 
-export function placeName(game: Game, player: Player): [position: Cell, fontSize: number] {
+export function placeName(game: GameView, player: Player): [position: Cell, fontSize: number] {
     const boundingBox = calculateBoundingBox(player.borderTiles());
 
     const rawScalingFactor = (boundingBox.max.x - boundingBox.min.x) / 50
@@ -38,7 +39,7 @@ export function placeName(game: Game, player: Player): [position: Cell, fontSize
     return [center, fontSize]
 }
 
-export function createGrid(game: Game, player: Player, boundingBox: { min: Point; max: Point }, scalingFactor: number): boolean[][] {
+export function createGrid(game: GameView, player: Player, boundingBox: { min: Point; max: Point }, scalingFactor: number): boolean[][] {
     const scaledBoundingBox: { min: Point; max: Point } = {
         min: {
             x: Math.floor(boundingBox.min.x / scalingFactor),

src/client/graphics/TransformHandler.ts

@@ -5,6 +5,7 @@ import { calculateBoundingBox, calculateBoundingBoxCenter, manhattanDist } from
 import { ZoomEvent, DragEvent } from "../InputHandler";
 import { GoToPlayerEvent } from "./layers/Leaderboard";
 import { placeName } from "./NameBoxCalculator";
+import { GameView } from "../../core/GameView";
 
 export class TransformHandler {
     public scale: number = 1.8
@@ -14,7 +15,7 @@ export class TransformHandler {
     private target: Cell
     private intervalID = null
 
-    constructor(private game: Game, private eventBus: EventBus, private canvas: HTMLCanvasElement) {
+    constructor(private game: GameView, private eventBus: EventBus, private canvas: HTMLCanvasElement) {
         this.eventBus.on(ZoomEvent, (e) => this.onZoom(e))
         this.eventBus.on(DragEvent, (e) => this.onMove(e))
         this.eventBus.on(GoToPlayerEvent, (e) => this.onGoToPlayer(e))

src/client/graphics/layers/ControlPanel.ts

@@ -7,10 +7,11 @@ import { renderNumber, renderTroops } from '../../Utils';
 import { EventBus } from '../../../core/EventBus';
 import { UIState } from '../UIState';
 import { SendSetTargetTroopRatioEvent } from '../../Transport';
+import { GameView } from '../../../core/GameView';
 
 @customElement('control-panel')
 export class ControlPanel extends LitElement implements Layer {
-    private game: Game;
+    public game: GameView;
     public clientID: ClientID;
     public eventBus: EventBus;
     public uiState: UIState;
@@ -51,8 +52,7 @@ export class ControlPanel extends LitElement implements Layer {
     @state()
     private _goldPerSecond: number;
 
-    init(game: Game) {
-        this.game = game;
+    init() {
         this.attackRatio = .20;
         this.uiState.attackRatio = this.attackRatio;
         this.currentTroopRatio = this.targetTroopRatio;

src/client/graphics/layers/EventsDisplay.ts

@@ -17,6 +17,7 @@ import { Layer } from "./Layer";
 import { SendAllianceReplyIntentEvent } from "../../Transport";
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { onlyImages, sanitize } from '../../../core/Util';
+import { GameView } from '../../../core/GameView';
 
 interface Event {
   description: string;
@@ -35,7 +36,7 @@ interface Event {
 @customElement('events-display')
 export class EventsDisplay extends LitElement implements Layer {
   public eventBus: EventBus;
-  public game: Game;
+  public game: GameView;
   public clientID: ClientID;
 
   private events: Event[] = [];

src/client/graphics/layers/Layer.ts

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

src/client/graphics/layers/Leaderboard.ts

@@ -6,6 +6,7 @@ import { ClientID } from '../../../core/Schemas';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { EventBus, GameEvent } from '../../../core/EventBus';
 import { renderNumber } from '../../Utils';
+import { GameView } from '../../../core/GameView';
 
 interface Entry {
   name: string
@@ -23,12 +24,11 @@ export class GoToPlayerEvent implements GameEvent {
 @customElement('leader-board')
 export class Leaderboard extends LitElement implements Layer {
 
-  private game: Game
+  public game: GameView
   public clientID: ClientID
   public eventBus: EventBus
 
-  init(game: Game) {
-    this.game = game
+  init() {
   }
 
   tick() {

src/client/graphics/layers/NameLayer.ts

@@ -13,6 +13,7 @@ import targetIcon from '../../../../resources/images/TargetIcon.png';
 import { ClientID } from "../../../core/Schemas"
 import { EventBus } from "../../../core/EventBus"
 import { AlternateViewEvent } from "../../InputHandler"
+import { GameView } from "../../../core/GameView"
 
 
 class RenderInfo {
@@ -47,7 +48,7 @@ export class NameLayer implements Layer {
     private alternateView = false
 
     constructor(
-        private game: Game,
+        private game: GameView,
         private eventBus: EventBus,
         private theme: Theme,
         private transformHandler: TransformHandler,
@@ -72,7 +73,7 @@ export class NameLayer implements Layer {
         return true
     }
 
-    public init(game: Game) {
+    public init() {
 
     }
 

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -9,11 +9,12 @@ import { MouseMoveEvent } from '../../InputHandler';
 import { euclideanDist, distSortUnit } from '../../../core/Util';
 import { renderNumber, renderTroops } from '../../Utils';
 import { PauseGameEvent } from '../../Transport';
+import { GameView } from '../../../core/GameView';
 
 @customElement('player-info-overlay')
 export class PlayerInfoOverlay extends LitElement implements Layer {
     @property({ type: Object })
-    public game!: Game;
+    public game!: GameView;
 
     @property({ type: String })
     public clientID!: ClientID;
@@ -41,8 +42,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
 
     private _isActive = false
 
-    init(game: Game) {
-        this.game = game;
+    init() {
         this.eventBus.on(MouseMoveEvent, (e: MouseMoveEvent) => this.onMouseEvent(e));
         this._isActive = true
         this.showPauseButton = this.game.config().gameConfig().gameType == GameType.Singleplayer

src/client/graphics/layers/StructureLayer.ts

@@ -9,6 +9,7 @@ import anchorIcon from '../../../../resources/images/AnchorIcon.png';
 import missileSiloIcon from '../../../../resources/images/MissileSiloUnit.png';
 import shieldIcon from '../../../../resources/images/ShieldIcon.png';
 import cityIcon from '../../../../resources/images/CityIcon.png';
+import { GameView } from "../../../core/GameView";
 
 interface UnitRenderConfig {
     icon: string;
@@ -47,7 +48,7 @@ export class StructureLayer implements Layer {
         }
     };
 
-    constructor(private game: Game, private eventBus: EventBus) {
+    constructor(private game: GameView, private eventBus: EventBus) {
         this.theme = game.config().theme();
         this.loadUnitImages();
     }
@@ -69,7 +70,7 @@ export class StructureLayer implements Layer {
     tick() {
     }
 
-    init(game: Game) {
+    init() {
         this.eventBus.on(UnitEvent, e => this.onUnitEvent(e));
         this.redraw()
     }

src/client/graphics/layers/TerrainLayer.ts

@@ -3,6 +3,7 @@ import { Game } from "../../../core/game/Game";
 import { throws } from "assert";
 import { Layer } from "./Layer";
 import { TransformHandler } from "../TransformHandler";
+import { GameView } from "../../../core/GameView";
 
 export class TerrainLayer implements Layer {
     private canvas: HTMLCanvasElement
@@ -10,14 +11,14 @@ export class TerrainLayer implements Layer {
     private imageData: ImageData
 
 
-    constructor(private game: Game) { }
+    constructor(private game: GameView) { }
     shouldTransform(): boolean {
         return true
     }
     tick() {
     }
 
-    init(game: Game) {
+    init() {
         console.log('redrew terrain layer')
         this.redraw()
     }

src/client/graphics/layers/TerritoryLayer.ts

@@ -9,6 +9,7 @@ import { TransformHandler } from "../TransformHandler";
 import { EventBus } from "../../../core/EventBus";
 import { initRemoteSender } from "../../../core/Consolex";
 import { AlternateViewEvent } from "../../InputHandler";
+import { GameView } from "../../../core/GameView";
 
 export class TerritoryLayer implements Layer {
     private canvas: HTMLCanvasElement
@@ -26,7 +27,7 @@ export class TerritoryLayer implements Layer {
     private alternativeView = false
 
 
-    constructor(private game: Game, private eventBus: EventBus) {
+    constructor(private game: GameView, private eventBus: EventBus) {
         this.theme = game.config().theme()
     }
 
@@ -59,7 +60,7 @@ export class TerritoryLayer implements Layer {
         }
     }
 
-    init(game: Game) {
+    init() {
         this.eventBus.on(TileEvent, e => this.tileUpdate(e))
         this.eventBus.on(AlternateViewEvent, e => { this.alternativeView = e.alternateView })
         this.redraw()

src/client/graphics/layers/UILayer.ts

@@ -5,6 +5,7 @@ import { ClientID } from "../../../core/Schemas";
 import { Layer } from "./Layer";
 import { TransformHandler } from "../TransformHandler";
 import { consolex } from "../../../core/Consolex";
+import { GameView } from "../../../core/GameView";
 
 interface MenuOption {
     label: string;
@@ -20,7 +21,7 @@ export class UILayer implements Layer {
 
     constructor(
         private eventBus: EventBus,
-        private game: Game,
+        private game: GameView,
         private clientID: ClientID,
         private transformHandler: TransformHandler
     ) {
@@ -52,7 +53,7 @@ export class UILayer implements Layer {
     tick() {
     }
 
-    init(game: Game) {
+    init() {
         this.createWinModal()
         this.initRightClickMenu()
         this.eventBus.on(WinEvent, (e) => this.onWinEvent(e))

src/client/graphics/layers/UnitLayer.ts

@@ -6,6 +6,7 @@ import { Layer } from "./Layer";
 import { EventBus } from "../../../core/EventBus";
 import { AlternateViewEvent } from "../../InputHandler";
 import { ClientID } from "../../../core/Schemas";
+import { GameView } from "../../../core/GameView";
 
 enum Relationship {
     Self,
@@ -28,7 +29,7 @@ export class UnitLayer implements Layer {
     private oldShellTile = new Map<Unit, Tile>()
 
 
-    constructor(private game: Game, private eventBus: EventBus, private clientID: ClientID) {
+    constructor(private game: GameView, private eventBus: EventBus, private clientID: ClientID) {
         this.theme = game.config().theme();
     }
 
@@ -43,7 +44,7 @@ export class UnitLayer implements Layer {
         }
     }
 
-    init(game: Game) {
+    init() {
         this.eventBus.on(UnitEvent, e => this.onUnitEvent(e));
         this.eventBus.on(AlternateViewEvent, e => this.onAlternativeViewEvent(e))
         this.redraw()

src/client/graphics/layers/radial/BuildMenu.ts

@@ -14,6 +14,7 @@ import shieldIcon from '../../../../../resources/images/ShieldIconWhite.svg';
 import cityIcon from '../../../../../resources/images/CityIconWhite.svg';
 import { renderNumber } from '../../../Utils';
 import { ContextMenuEvent } from '../../../InputHandler';
+import { GameView } from '../../../../core/GameView';
 
 interface BuildItemDisplay {
     unitType: UnitType
@@ -35,7 +36,7 @@ const buildTable: BuildItemDisplay[][] = [
 
 @customElement('build-menu')
 export class BuildMenu extends LitElement {
-    public game: Game;
+    public game: GameView;
     public eventBus: EventBus;
     private myPlayer: Player;
     private clickedCell: Cell;

src/client/graphics/layers/radial/RadialMenu.ts

@@ -20,6 +20,7 @@ import { EmojiTable } from "./EmojiTable";
 import { UIState } from "../../UIState";
 import { BuildMenu } from "./BuildMenu";
 import { consolex } from "../../../../core/Consolex";
+import { GameView } from "../../../../core/GameView";
 
 
 enum Slot {
@@ -53,7 +54,7 @@ export class RadialMenu implements Layer {
 
     constructor(
         private eventBus: EventBus,
-        private game: Game,
+        private game: GameView,
         private transformHandler: TransformHandler,
         private clientID: ClientID,
         private emojiTable: EmojiTable,
@@ -363,7 +364,7 @@ export class RadialMenu implements Layer {
         }
 
         if (myPlayerBordersOcean && otherPlayerBordersOcean) {
-            const dst = targetTransportTile(this.game, tile)
+            const dst = targetTransportTile(this.game.width(), tile)
             if (dst != null) {
                 if (myPlayer.canBuild(UnitType.TransportShip, dst)) {
                     this.activateMenuElement(Slot.Boat, "#3f6ab1", boatIcon, () => {