diff --git a/src/client/ClientGame.ts b/src/client/ClientGame.ts index 753a4f4a6..4547b09b0 100644 --- a/src/client/ClientGame.ts +++ b/src/client/ClientGame.ts @@ -118,6 +118,7 @@ export class ClientGame { this.ticksThisTurn++ console.log('client ticking') this.gs.tick() + this.renderer.tick() } private playerEvent(event: PlayerEvent) { diff --git a/src/client/GameRenderer.ts b/src/client/GameRenderer.ts index f001bcc59..d7ed065a2 100644 --- a/src/client/GameRenderer.ts +++ b/src/client/GameRenderer.ts @@ -11,6 +11,7 @@ class NameRender { } export class GameRenderer { + private tempCanvas; private scale: number = .8 private offsetX: number = 0 @@ -72,15 +73,6 @@ export class GameRenderer { this.context.fillStyle = this.theme.backgroundColor().toHex(); this.context.fillRect(0, 0, this.gs.width(), this.gs.height()); - // Create a temporary canvas for the game content - const tempCanvas = document.createElement('canvas'); - const tempCtx = tempCanvas.getContext('2d'); - tempCanvas.width = this.gs.width(); - tempCanvas.height = this.gs.height(); - - // Put the ImageData on the temp canvas - tempCtx.putImageData(this.imageData, 0, 0); - // Disable image smoothing for pixelated effect if (this.scale > 3) { this.context.imageSmoothingEnabled = false; @@ -98,14 +90,16 @@ export class GameRenderer { this.gs.height() / 2 - this.offsetY * this.scale ); - // Draw the game content from the temp canvas - this.context.drawImage( - tempCanvas, - -this.gs.width() / 2, - -this.gs.height() / 2, - this.gs.width(), - this.gs.height() - ); + if (this.tempCanvas != null) { + // Draw the game content from the temp canvas + this.context.drawImage( + this.tempCanvas, + -this.gs.width() / 2, + -this.gs.height() / 2, + this.gs.width(), + this.gs.height() + ); + } let numCalcs = 0 for (const player of this.gs.players()) { @@ -125,6 +119,17 @@ export class GameRenderer { requestAnimationFrame(() => this.renderGame()); } + tick() { + // Create a temporary canvas for the game content + this.tempCanvas = document.createElement('canvas'); + const tempCtx = this.tempCanvas.getContext('2d'); + this.tempCanvas.width = this.gs.width(); + this.tempCanvas.height = this.gs.height(); + + // Put the ImageData on the temp canvas + tempCtx.putImageData(this.imageData, 0, 0); + } + maybeRecalculatePlayerInfo(player: Player): boolean { if (!this.nameRenders.has(player)) { this.nameRenders.set(player, new NameRender(0, null, null))