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 { 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 { UIState } from "../UIState";
import { Layer } from "./Layer";
const goldCoinIcon = assetUrl("images/GoldCoinIcon.svg");
const soldierIcon = assetUrl("images/SoldierIcon.svg");
const swordIcon = assetUrl("images/SwordIcon.svg");
@customElement("control-panel")
export class ControlPanel extends LitElement implements Layer {
public game: GameView;
public clientID: ClientID;
public eventBus: EventBus;
public uiState: UIState;
@state()
private attackRatio: number = 0.2;
@state()
private _maxTroops: number;
@state()
private troopRate: number;
@state()
private _troops: number;
@state()
private _isVisible = false;
@state()
private _gold: Gold;
@state()
private _attackingTroops: number = 0;
private _troopRateIsIncreasing: boolean = true;
private _lastTroopIncreaseRate: number;
getTickIntervalMs() {
return 100;
}
init() {
this.attackRatio = new UserSettings().attackRatio();
this.uiState.attackRatio = this.attackRatio;
this.eventBus.on(AttackRatioEvent, (event) => {
let newAttackRatio = this.attackRatio + event.attackRatio / 100;
if (newAttackRatio < 0.01) {
newAttackRatio = 0.01;
}
if (newAttackRatio > 1) {
newAttackRatio = 1;
}
if (newAttackRatio === 0.11 && this.attackRatio === 0.01) {
// If we're changing the ratio from 1%, then set it to 10% instead of 11% to keep a consistency
newAttackRatio = 0.1;
}
this.attackRatio = newAttackRatio;
this.onAttackRatioChange(this.attackRatio);
});
}
tick() {
if (!this._isVisible && !this.game.inSpawnPhase()) {
this.setVisibile(true);
}
const player = this.game.myPlayer();
if (player === null || !player.isAlive()) {
this.setVisibile(false);
return;
}
this.updateTroopIncrease();
this._maxTroops = this.game.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.requestUpdate();
}
private updateTroopIncrease() {
const player = this.game?.myPlayer();
if (player === null) return;
const troopIncreaseRate = this.game.config().troopIncreaseRate(player);
this._troopRateIsIncreasing =
troopIncreaseRate >= this._lastTroopIncreaseRate;
this._lastTroopIncreaseRate = troopIncreaseRate;
}
onAttackRatioChange(newRatio: number) {
this.uiState.attackRatio = newRatio;
}
renderLayer(context: CanvasRenderingContext2D) {
// Render any necessary canvas elements
}
shouldTransform(): boolean {
return false;
}
setVisibile(visible: boolean) {
this._isVisible = visible;
this.requestUpdate();
}
private handleRatioSliderInput(e: Event) {
const input = e.target as HTMLInputElement;
const value = Number(input.value);
this.attackRatio = value / 100;
this.onAttackRatioChange(this.attackRatio);
}
private handleRatioSliderPointerUp(e: Event) {
(e.target as HTMLInputElement).blur();
}
private calculateTroopBar(): { greenPercent: number; orangePercent: number } {
const base = Math.max(this._maxTroops, 1);
const greenPercentRaw = (this._troops / base) * 100;
const orangePercentRaw = (this._attackingTroops / base) * 100;
const greenPercent = Math.max(0, Math.min(100, greenPercentRaw));
const orangePercent = Math.max(
0,
Math.min(100 - greenPercent, orangePercentRaw),
);
return { greenPercent, orangePercent };
}
private renderMobileTroopBar() {
const { greenPercent, orangePercent } = this.calculateTroopBar();
return html`
${greenPercent > 0
? html`
`
: ""}
${orangePercent > 0
? html`
`
: ""}
${renderTroops(this._troops)}
${renderTroops(this._maxTroops)}
+${renderTroops(this.troopRate)}/s
`;
}
private renderDesktopTroopBar() {
const { greenPercent, orangePercent } = this.calculateTroopBar();
return html`
${greenPercent > 0
? html`
`
: ""}
${orangePercent > 0
? html`
`
: ""}
${renderTroops(this._troops)}
/
${renderTroops(this._maxTroops)}
`;
}
private renderDesktop() {
return html`
+${renderTroops(this.troopRate)}/s
${this.renderDesktopTroopBar()}
${renderNumber(this._gold)}
`;
}
private renderMobile() {
return html`
`;
}
render() {
return html`
e.preventDefault()}
>
${this.renderMobile()}
${this.renderDesktop()}