diff --git a/resources/lang/en.json b/resources/lang/en.json index e22b467c8e..9141af80de 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -1087,5 +1087,8 @@ "dismiss": "Dismiss", "go_to_item": "Go to item {num}", "firefox_warning": "OpenFront.io doesn't perform well with [Firefox-based browsers](https://simple.wikipedia.org/wiki/Web_browsers_based_on_Firefox). We recommend you to use a [Chromium-based browser](https://en.wikipedia.org/wiki/Chromium_(web_browser)#Browsers_based_on_Chromium) for best performance." + }, + "control_panel": { + "army_limit_warning": "You're near your army limit! Consider sending troops to teammates." } } diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts index f5ae86a934..b1ec8e308a 100644 --- a/src/client/graphics/layers/ControlPanel.ts +++ b/src/client/graphics/layers/ControlPanel.ts @@ -2,12 +2,12 @@ import { LitElement, html } from "lit"; import { customElement, state } from "lit/decorators.js"; import { assetUrl } from "../../../core/AssetUrls"; import { EventBus } from "../../../core/EventBus"; -import { Gold } from "../../../core/game/Game"; +import { GameMode, Gold } from "../../../core/game/Game"; import { GameView } from "../../../core/game/GameView"; import { UserSettings } from "../../../core/game/UserSettings"; import { ClientID } from "../../../core/Schemas"; import { AttackRatioEvent } from "../../InputHandler"; -import { renderNumber, renderTroops } from "../../Utils"; +import { renderNumber, renderTroops, translateText } from "../../Utils"; import { UIState } from "../UIState"; import { Layer } from "./Layer"; const goldCoinIcon = assetUrl("images/GoldCoinIcon.svg"); @@ -36,6 +36,9 @@ export class ControlPanel extends LitElement implements Layer { @state() private _isVisible = false; + @state() + private _showArmyLimitWarning: boolean = false; + @state() private _gold: Gold; @@ -87,14 +90,24 @@ export class ControlPanel extends LitElement implements Layer { this.updateTroopIncrease(); - this._maxTroops = this.game.config().maxTroops(player); + const config = this.game.config(); + this._maxTroops = config.maxTroops(player); this._gold = player.gold(); this._troops = player.troops(); this._attackingTroops = player .outgoingAttacks() .map((a) => a.troops) .reduce((a, b) => a + b, 0); - this.troopRate = this.game.config().troopIncreaseRate(player) * 10; + this.troopRate = config.troopIncreaseRate(player) * 10; + const isTeamGame = config.gameConfig().gameMode === GameMode.Team; + const canDonateTroops = config.donateTroops(); + if (isTeamGame && canDonateTroops) { + const ratio = this._troops / Math.max(this._maxTroops, 1); + this._showArmyLimitWarning = ratio >= config.armyLimitWarningThreshold(); + } else { + this._showArmyLimitWarning = false; + } + this.requestUpdate(); } @@ -258,8 +271,21 @@ export class ControlPanel extends LitElement implements Layer { `; } + private renderArmyLimitWarning() { + if (!this._showArmyLimitWarning) return html``; + return html` +