From 8c902a70b80003ee48ee7e7ef4abf8987d9ac89b Mon Sep 17 00:00:00 2001 From: evanpelle Date: Mon, 26 Aug 2024 09:13:05 -0700 Subject: [PATCH] added spawn timer bar --- TODO.txt | 3 ++- src/client/ClientGame.ts | 2 +- src/client/graphics/GameRenderer.ts | 33 +++++++++++++++++++++++-- src/client/index.html | 3 ++- src/client/styles.css | 6 ++--- src/core/GameImpl.ts | 2 +- src/core/configuration/Config.ts | 2 +- src/core/configuration/DefaultConfig.ts | 2 +- src/core/configuration/DevConfig.ts | 2 +- src/core/execution/AttackExecution.ts | 2 +- src/core/execution/BotExecution.ts | 2 +- src/core/execution/PlayerExecution.ts | 2 +- src/core/execution/SpawnExecution.ts | 2 +- 13 files changed, 47 insertions(+), 16 deletions(-) diff --git a/TODO.txt b/TODO.txt index 995e2de38..3e4d0c4cd 100644 --- a/TODO.txt +++ b/TODO.txt @@ -45,7 +45,8 @@ * try vintage theme DONE 8/24/2023 * BUG: fix hotreload (priority queue breaks it) DONE 8/24/2024 * improve menu (keep highlighted when click, allow deselect lobby) DONE 8/25/2024 -* give time to (re) spawn at start of game +* give time to (re) spawn at start of game DONE 8/25/2024 +* show bar for long to respawn * store & delay tile updates for lag compensation * add shader to dim border * REFACTOR: remove player.info() diff --git a/src/client/ClientGame.ts b/src/client/ClientGame.ts index 41580c8b9..3b6b21557 100644 --- a/src/client/ClientGame.ts +++ b/src/client/ClientGame.ts @@ -16,7 +16,7 @@ export function createClientGame(name: string, clientID: ClientID, gameID: GameI let eventBus = new EventBus() let game = createGame(terrainMap, eventBus, config) let terrainRenderer = new TerrainRenderer(game) - let gameRenderer = new GameRenderer(game, config.theme(), terrainRenderer) + let gameRenderer = new GameRenderer(game, terrainRenderer) return new ClientGame( name, diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts index a4c73ec40..8cf17e96b 100644 --- a/src/client/graphics/GameRenderer.ts +++ b/src/client/graphics/GameRenderer.ts @@ -23,9 +23,11 @@ export class GameRenderer { private nameRenderer: NameRenderer; + private theme: Theme - constructor(private gs: Game, private theme: Theme, private terrainRenderer: TerrainRenderer) { - this.nameRenderer = new NameRenderer(gs, theme) + constructor(private gs: Game, private terrainRenderer: TerrainRenderer) { + this.theme = gs.config().theme() + this.nameRenderer = new NameRenderer(gs, this.theme) } initialize() { @@ -71,6 +73,10 @@ export class GameRenderer { this.context.fillStyle = this.theme.backgroundColor().toHex(); this.context.fillRect(0, 0, this.gs.width(), this.gs.height()); + // Save the current context state + this.context.save(); + + // Disable image smoothing for pixelated effect if (this.scale > 3) { this.context.imageSmoothingEnabled = false; @@ -101,9 +107,32 @@ export class GameRenderer { const [upperLeft, bottomRight] = this.boundingRect() this.nameRenderer.render(this.context, this.scale, upperLeft, bottomRight) + this.context.restore() + + this.renderUIBar() + + requestAnimationFrame(() => this.renderGame()); } + renderUIBar() { + if (!this.gs.inSpawnPhase()) { + return + } + + const barHeight = 15; + const barBackgroundWidth = this.canvas.width; + + const ratio = this.gs.ticks() / this.gs.config().numSpawnPhaseTurns() + + // Draw bar background + this.context.fillStyle = 'rgba(0, 0, 0, 0.5)'; + this.context.fillRect(0, 0, barBackgroundWidth, barHeight); + + this.context.fillStyle = 'rgba(0, 128, 255, 0.7)'; + this.context.fillRect(0, 0, barBackgroundWidth * ratio, barHeight); + } + tick() { this.nameRenderer.tick() } diff --git a/src/client/index.html b/src/client/index.html index 1c1fff888..27cacc53c 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -21,7 +21,7 @@
-

DEVLOG: 8/18/2024 - 8/25/2024

+

DEVLOG: 8/18/2024 - 8/26/2024

diff --git a/src/client/styles.css b/src/client/styles.css index e37864614..6994f38c5 100644 --- a/src/client/styles.css +++ b/src/client/styles.css @@ -44,7 +44,7 @@ h1 { #username { width: 100%; padding: 15px; - font-size: 18px; + font-size: 24px; border: 2px solid #007bff; border-radius: 5px; background-color: rgba(255, 255, 255, 0.8); @@ -57,8 +57,8 @@ h1 { .lobby-button { - width: 500px; - height: 500px; + width: 400px; + height: 400px; font-size: 24px; font-weight: bold; border: 3px solid #007bff; diff --git a/src/core/GameImpl.ts b/src/core/GameImpl.ts index 39cd94688..a6dcae1e3 100644 --- a/src/core/GameImpl.ts +++ b/src/core/GameImpl.ts @@ -256,7 +256,7 @@ export class GameImpl implements MutableGame { } inSpawnPhase(): boolean { - return this._ticks <= this.config().turnsUntilGameStart() + return this._ticks <= this.config().numSpawnPhaseTurns() } ticks(): number { diff --git a/src/core/configuration/Config.ts b/src/core/configuration/Config.ts index 78abdd62e..627475879 100644 --- a/src/core/configuration/Config.ts +++ b/src/core/configuration/Config.ts @@ -21,7 +21,7 @@ export interface Config { gameCreationRate(): number lobbyLifetime(): number numBots(): number - turnsUntilGameStart(): number + numSpawnPhaseTurns(): number } export interface PlayerConfig { diff --git a/src/core/configuration/DefaultConfig.ts b/src/core/configuration/DefaultConfig.ts index 0d0ea5283..0274a3a77 100644 --- a/src/core/configuration/DefaultConfig.ts +++ b/src/core/configuration/DefaultConfig.ts @@ -7,7 +7,7 @@ import {vintageTheme} from "./VintageTheme"; export class DefaultConfig implements Config { - turnsUntilGameStart(): number { + numSpawnPhaseTurns(): number { return 100 } numBots(): number { diff --git a/src/core/configuration/DevConfig.ts b/src/core/configuration/DevConfig.ts index c9912bc8c..0948f3c26 100644 --- a/src/core/configuration/DevConfig.ts +++ b/src/core/configuration/DevConfig.ts @@ -3,7 +3,7 @@ import {PlayerConfig} from "./Config"; import {DefaultConfig, DefaultPlayerConfig, defaultPlayerConfig} from "./DefaultConfig"; export const devConfig = new class extends DefaultConfig { - turnsUntilGameStart(): number { + numSpawnPhaseTurns(): number { return 100 } gameCreationRate(): number { diff --git a/src/core/execution/AttackExecution.ts b/src/core/execution/AttackExecution.ts index 323e2fd2d..72262eac5 100644 --- a/src/core/execution/AttackExecution.ts +++ b/src/core/execution/AttackExecution.ts @@ -71,7 +71,7 @@ export class AttackExecution implements Execution { if (!this.active) { return } - if (ticks < this.mg.config().turnsUntilGameStart()) { + if (ticks < this.mg.config().numSpawnPhaseTurns()) { return } diff --git a/src/core/execution/BotExecution.ts b/src/core/execution/BotExecution.ts index 4fe464f7b..e27386cb6 100644 --- a/src/core/execution/BotExecution.ts +++ b/src/core/execution/BotExecution.ts @@ -28,7 +28,7 @@ export class BotExecution implements Execution { tick(ticks: number) { - if (ticks < this.mg.config().turnsUntilGameStart()) { + if (ticks < this.mg.config().numSpawnPhaseTurns()) { return } diff --git a/src/core/execution/PlayerExecution.ts b/src/core/execution/PlayerExecution.ts index 446caf79d..2fcd9e2e6 100644 --- a/src/core/execution/PlayerExecution.ts +++ b/src/core/execution/PlayerExecution.ts @@ -19,7 +19,7 @@ export class PlayerExecution implements Execution { } tick(ticks: number) { - if (ticks < this.config.turnsUntilGameStart()) { + if (ticks < this.config.numSpawnPhaseTurns()) { return } this.player.setTroops(this.config.player().troopAdditionRate(this.player)) diff --git a/src/core/execution/SpawnExecution.ts b/src/core/execution/SpawnExecution.ts index a02bfa3e5..50a0dbc6f 100644 --- a/src/core/execution/SpawnExecution.ts +++ b/src/core/execution/SpawnExecution.ts @@ -23,7 +23,7 @@ export class SpawnExecution implements Execution { return } - if (ticks >= this.mg.config().turnsUntilGameStart()) { + if (ticks >= this.mg.config().numSpawnPhaseTurns()) { this.active = false return }