-
-
- ${translateText("control_panel.pop")}:
- ${renderTroops(this._population)} /
- ${renderTroops(this._maxPopulation)}
- (+${renderTroops(this.popRate)})
-
-
- ${translateText("control_panel.gold")}:
- ${renderNumber(this._gold)}
- (+${renderNumber(this._goldPerSecond)}
- ${renderNumber(this._factories)}
- 
)
-
-
-
+
@@ -94,11 +94,20 @@ export class GameLeftSidebar extends LitElement implements Layer {
`
: null}
-
+
`
: null}
diff --git a/src/client/graphics/layers/GameRightSidebar.ts b/src/client/graphics/layers/GameRightSidebar.ts
new file mode 100644
index 000000000..7363efc60
--- /dev/null
+++ b/src/client/graphics/layers/GameRightSidebar.ts
@@ -0,0 +1,139 @@
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import exitIcon from "../../../../resources/images/ExitIconWhite.svg";
+import pauseIcon from "../../../../resources/images/PauseIconWhite.svg";
+import playIcon from "../../../../resources/images/PlayIconWhite.svg";
+import replayRegularIcon from "../../../../resources/images/ReplayRegularIconWhite.svg";
+import replaySolidIcon from "../../../../resources/images/ReplaySolidIconWhite.svg";
+import { EventBus } from "../../../core/EventBus";
+import { GameType } from "../../../core/game/Game";
+import { GameView } from "../../../core/game/GameView";
+import { PauseGameEvent } from "../../Transport";
+import { Layer } from "./Layer";
+
+@customElement("game-right-sidebar")
+export class GameRightSidebar extends LitElement implements Layer {
+ public game: GameView;
+ public eventBus: EventBus;
+ @state()
+ private _isSinglePlayer: boolean = false;
+
+ @state()
+ private _isReplayVisible: boolean = false;
+
+ @state()
+ private _isVisible: boolean = true;
+
+ @state()
+ private isPaused: boolean = false;
+
+ @state()
+ private isExistButtonVisible: boolean = true;
+
+ createRenderRoot() {
+ return this;
+ }
+
+ init() {
+ this._isSinglePlayer =
+ this.game?.config()?.gameConfig()?.gameType === GameType.Singleplayer ||
+ this.game.config().isReplay();
+ this._isVisible = true;
+ this.game.inSpawnPhase();
+ this.requestUpdate();
+ }
+
+ tick() {
+ if (!this.game.inSpawnPhase()) {
+ this.isExistButtonVisible = false;
+ }
+ }
+
+ private toggleReplayPanel(): void {
+ this._isReplayVisible = !this._isReplayVisible;
+ }
+
+ private onPauseButtonClick() {
+ this.isPaused = !this.isPaused;
+ this.eventBus.emit(new PauseGameEvent(this.isPaused));
+ }
+
+ private onExitButtonClick() {
+ const isAlive = this.game.myPlayer()?.isAlive();
+ if (isAlive) {
+ const isConfirmed = confirm("Are you sure you want to exit the game?");
+ if (!isConfirmed) return;
+ }
+ // redirect to the home page
+ window.location.href = "/";
+ }
+
+ render() {
+ return html`
+
+ `;
+ }
+}
diff --git a/src/client/graphics/layers/GameTopBar.ts b/src/client/graphics/layers/GameTopBar.ts
new file mode 100644
index 000000000..0b2109ac7
--- /dev/null
+++ b/src/client/graphics/layers/GameTopBar.ts
@@ -0,0 +1,471 @@
+import { html, LitElement } from "lit";
+import { customElement, query, state } from "lit/decorators.js";
+import cityIcon from "../../../../resources/images/CityIconWhite.svg";
+import darkModeIcon from "../../../../resources/images/DarkModeIconWhite.svg";
+import emojiIcon from "../../../../resources/images/EmojiIconWhite.svg";
+import exitIcon from "../../../../resources/images/ExitIconWhite.svg";
+import explosionIcon from "../../../../resources/images/ExplosionIconWhite.svg";
+import factoryIcon from "../../../../resources/images/FactoryIconWhite.svg";
+import goldCoinIcon from "../../../../resources/images/GoldCoinIcon.svg";
+import missileSiloIcon from "../../../../resources/images/MissileSiloUnit.png";
+import mouseIcon from "../../../../resources/images/MouseIconWhite.svg";
+import ninjaIcon from "../../../../resources/images/NinjaIconWhite.svg";
+import populationIcon from "../../../../resources/images/PopulationIconSolidWhite.svg";
+import portIcon from "../../../../resources/images/PortIcon.svg";
+import samLauncherIcon from "../../../../resources/images/SamLauncherUnitWhite.png";
+import settingsIcon from "../../../../resources/images/SettingIconWhite.svg";
+import defensePostIcon from "../../../../resources/images/ShieldIconWhite.svg";
+import treeIcon from "../../../../resources/images/TreeIconWhite.svg";
+import troopIcon from "../../../../resources/images/TroopIconWhite.svg";
+import workerIcon from "../../../../resources/images/WorkerIconWhite.svg";
+import { translateText } from "../../../client/Utils";
+import { EventBus } from "../../../core/EventBus";
+import { UnitType } from "../../../core/game/Game";
+import { GameUpdateType } from "../../../core/game/GameUpdates";
+import { GameView } from "../../../core/game/GameView";
+import { UserSettings } from "../../../core/game/UserSettings";
+import { AlternateViewEvent, RefreshGraphicsEvent } from "../../InputHandler";
+import { renderNumber, renderTroops } from "../../Utils";
+import { Layer } from "./Layer";
+
+@customElement("game-top-bar")
+export class GameTopBar extends LitElement implements Layer {
+ public game: GameView;
+ public eventBus: EventBus;
+ private _userSettings: UserSettings = new UserSettings();
+ private _population = 0;
+ private _troops = 0;
+ private _cities = 0;
+ private _factories = 0;
+ private _workers = 0;
+ private _missileSilo = 0;
+ private _port = 0;
+ private _defensePost = 0;
+ private _samLauncher = 0;
+ private _lastPopulationIncreaseRate = 0;
+ private _popRateIsIncreasing = false;
+ private hasWinner = false;
+
+ @state()
+ private showSettingsMenu = false;
+ @state()
+ private alternateView: boolean = false;
+
+ @state()
+ private timer: number = 0;
+
+ @query(".settings-container")
+ private settingsContainer!: HTMLElement;
+
+ createRenderRoot() {
+ return this;
+ }
+
+ init() {
+ this.requestUpdate();
+ }
+
+ tick() {
+ this.updatePopulationIncrease();
+ const player = this.game?.myPlayer();
+ if (!player) return;
+ this._troops = player.troops();
+ this._workers = player.workers();
+ this._cities = player.totalUnitLevels(UnitType.City);
+ this._missileSilo = player.totalUnitLevels(UnitType.MissileSilo);
+ this._port = player.totalUnitLevels(UnitType.Port);
+ this._defensePost = player.totalUnitLevels(UnitType.DefensePost);
+ this._samLauncher = player.totalUnitLevels(UnitType.SAMLauncher);
+ this._factories = player.totalUnitLevels(UnitType.Factory);
+ const updates = this.game.updatesSinceLastTick();
+ if (updates) {
+ this.hasWinner = this.hasWinner || updates[GameUpdateType.Win].length > 0;
+ }
+ if (this.game.inSpawnPhase()) {
+ this.timer = 0;
+ } else if (!this.hasWinner && this.game.ticks() % 10 === 0) {
+ this.timer++;
+ }
+ this.requestUpdate();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ window.addEventListener("click", this.handleOutsideClick, true);
+ }
+
+ disconnectedCallback() {
+ window.removeEventListener("click", this.handleOutsideClick, true);
+ super.disconnectedCallback();
+ }
+ private handleOutsideClick = (event: MouseEvent) => {
+ if (
+ this.showSettingsMenu &&
+ this.settingsContainer &&
+ !this.settingsContainer.contains(event.target as Node)
+ ) {
+ this.showSettingsMenu = false;
+ }
+ };
+
+ private onExitButtonClick() {
+ const isAlive = this.game.myPlayer()?.isAlive();
+ if (isAlive) {
+ const isConfirmed = confirm("Are you sure you want to exit the game?");
+ if (!isConfirmed) return;
+ }
+ // redirect to the home page
+ window.location.href = "/";
+ }
+
+ private onTerrainButtonClick() {
+ this.alternateView = !this.alternateView;
+ this.eventBus.emit(new AlternateViewEvent(this.alternateView));
+ this.requestUpdate();
+ }
+
+ private onToggleEmojisButtonClick() {
+ this._userSettings.toggleEmojis();
+ this.requestUpdate();
+ }
+
+ private onToggleSpecialEffectsButtonClick() {
+ this._userSettings.toggleFxLayer();
+ this.requestUpdate();
+ }
+
+ private onToggleDarkModeButtonClick() {
+ this._userSettings.toggleDarkMode();
+ this.requestUpdate();
+ this.eventBus.emit(new RefreshGraphicsEvent());
+ }
+
+ private onToggleRandomNameModeButtonClick() {
+ this._userSettings.toggleRandomName();
+ }
+ private onToggleLeftClickOpensMenu() {
+ this._userSettings.toggleLeftClickOpenMenu();
+ }
+
+ private toggleSettingsMenu() {
+ this.showSettingsMenu = !this.showSettingsMenu;
+ }
+
+ private updatePopulationIncrease() {
+ const player = this.game?.myPlayer();
+ if (player === null) return;
+ const popIncreaseRate = player.population() - this._population;
+ if (this.game.ticks() % 5 === 0) {
+ this._popRateIsIncreasing =
+ popIncreaseRate >= this._lastPopulationIncreaseRate;
+ this._lastPopulationIncreaseRate = popIncreaseRate;
+ }
+ }
+
+ private secondsToHms = (d: number): string => {
+ const h = Math.floor(d / 3600);
+ const m = Math.floor((d % 3600) / 60);
+ const s = Math.floor((d % 3600) % 60);
+ let time = d === 0 ? "-" : `${s}s`;
+ if (m > 0) time = `${m}m` + time;
+ if (h > 0) time = `${h}h` + time;
+ return time;
+ };
+
+ render() {
+ const myPlayer = this.game?.myPlayer();
+ if (!this.game || !myPlayer || this.game.inSpawnPhase()) {
+ return null;
+ }
+
+ const isAlt = this.game.config().isReplay();
+ if (isAlt) {
+ return html`
+
- ${this.isLeaderboardShow
- ? html` 
${this.isTeamGame
? html`
@@ -106,9 +115,14 @@ export class GameLeftSidebar extends LitElement implements Layer {
class="w-6 h-6 cursor-pointer"
@click=${this.toggleTeamLeaderboard}
>
- ${this.isTeamLeaderboardShow
- ? html`
+
+ `;
+ }
+ const popRate = myPlayer
+ ? this.game.config().populationIncreaseRate(myPlayer) * 10
+ : 0;
+ const maxPop = myPlayer ? this.game.config().maxPopulation(myPlayer) : 0;
+ const goldPerSecond = myPlayer
+ ? this.game.config().goldAdditionRate(myPlayer) * 10n
+ : 0n;
+
+ return html`
+
+ ${this.secondsToHms(this.timer)}
+
+
+
+ `;
+ }
+}
diff --git a/src/client/graphics/layers/HeadsUpMessage.ts b/src/client/graphics/layers/HeadsUpMessage.ts
index 5c1e206d9..95881a898 100644
--- a/src/client/graphics/layers/HeadsUpMessage.ts
+++ b/src/client/graphics/layers/HeadsUpMessage.ts
@@ -34,8 +34,8 @@ export class HeadsUpMessage extends LitElement implements Layer {
return html`
+ ${myPlayer?.isAlive() && !this.game.inSpawnPhase()
+ ? html`
+
+ `
+ : html``}
+
+
+
+
+ ${this.secondsToHms(this.timer)}
+
+
+ 
+ ${this.showSettingsMenu
+ ? html`
+
+
+
+
+
+
+
+
+
+
+ `
+ : null}
+ e.preventDefault()}
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index ca2c97354..161d40e7f 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -352,11 +352,11 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
return html`
e.preventDefault()}
>
${this.player !== null ? this.renderPlayerInfo(this.player) : ""}
${this.unit !== null ? this.renderUnitInfo(this.unit) : ""}
diff --git a/src/client/graphics/layers/ReplayPanel.ts b/src/client/graphics/layers/ReplayPanel.ts
index 622b233ff..0303485c9 100644
--- a/src/client/graphics/layers/ReplayPanel.ts
+++ b/src/client/graphics/layers/ReplayPanel.ts
@@ -1,7 +1,6 @@
import { html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
import { EventBus } from "../../../core/EventBus";
-import { GameType } from "../../../core/game/Game";
import { GameView } from "../../../core/game/GameView";
import { ReplaySpeedChangeEvent } from "../../InputHandler";
import {
@@ -16,27 +15,26 @@ export class ReplayPanel extends LitElement implements Layer {
public game: GameView | undefined;
public eventBus: EventBus | undefined;
+ @property({ type: Boolean })
+ visible: boolean = false;
+
@state()
private _replaySpeedMultiplier: number = defaultReplaySpeedMultiplier;
- private _isSinglePlayer: boolean = false;
- @state()
- private _isVisible = false;
+ @property({ type: Boolean })
+ isSingleplayer = false;
- init() {
- this._isSinglePlayer =
- this.game?.config().gameConfig().gameType === GameType.Singleplayer;
- if (this._isSinglePlayer) {
- this.setVisible(true);
- }
+ createRenderRoot() {
+ return this; // Enable Tailwind CSS
}
- tick() {
- if (!this._isVisible && this.game?.config().isReplay()) {
- this.setVisible(true);
- }
+ init() {}
- this.requestUpdate();
+ tick() {
+ if (!this.visible) return;
+ if (this.game!.ticks() % 10 === 0) {
+ this.requestUpdate();
+ }
}
onReplaySpeedChange(value: ReplaySpeedMultiplier) {
@@ -44,85 +42,45 @@ export class ReplayPanel extends LitElement implements Layer {
this.eventBus?.emit(new ReplaySpeedChangeEvent(value));
}
- renderLayer(context: CanvasRenderingContext2D) {
- // Render any necessary canvas elements
- }
-
- shouldTransform(): boolean {
+ renderLayer(_ctx: CanvasRenderingContext2D) {}
+ shouldTransform() {
return false;
}
- setVisible(visible: boolean) {
- this._isVisible = visible;
- this.requestUpdate();
- }
-
render() {
- if (!this._isVisible) {
- return html``;
- }
+ if (!this.visible) return html``;
return html`
) {
- // To use reduce, we'd need to allocate an array:
- // return Array.from(values).reduce((sum, v) => sum + v, 0);
let total = 0;
for (const value of values) {
total += value;
diff --git a/src/client/graphics/layers/TopBar.ts b/src/client/graphics/layers/TopBar.ts
deleted file mode 100644
index c6d58536a..000000000
--- a/src/client/graphics/layers/TopBar.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
-import { translateText } from "../../../client/Utils";
-import { GameView } from "../../../core/game/GameView";
-import { renderNumber, renderTroops } from "../../Utils";
-import { Layer } from "./Layer";
-
-@customElement("top-bar")
-export class TopBar extends LitElement implements Layer {
- public game: GameView;
- private isVisible = false;
- private _population = 0;
- private _lastPopulationIncreaseRate = 0;
- private _popRateIsIncreasing = false;
-
- createRenderRoot() {
- return this;
- }
-
- init() {
- this.isVisible = true;
- this.requestUpdate();
- }
-
- tick() {
- this.updatePopulationIncrease();
- this.requestUpdate();
- }
-
- private updatePopulationIncrease() {
- const player = this.game?.myPlayer();
- if (player === null) return;
- const popIncreaseRate = player.population() - this._population;
- if (this.game.ticks() % 5 === 0) {
- this._popRateIsIncreasing =
- popIncreaseRate >= this._lastPopulationIncreaseRate;
- this._lastPopulationIncreaseRate = popIncreaseRate;
- }
- }
-
- render() {
- if (!this.isVisible) {
- return html``;
- }
-
- const myPlayer = this.game?.myPlayer();
- if (!myPlayer?.isAlive() || this.game?.inSpawnPhase()) {
- return html``;
- }
-
- const popRate = this.game.config().populationIncreaseRate(myPlayer) * 10;
- const maxPop = this.game.config().maxPopulation(myPlayer);
- const goldPerSecond = this.game.config().goldAdditionRate(myPlayer) * 10n;
-
- return html`
-
e.preventDefault()}
+ @contextmenu=${(e: Event) => e.preventDefault()}
>
`;
}
- createRenderRoot() {
- return this; // Disable shadow DOM to allow Tailwind styles
+ private renderSpeedButton(value: ReplaySpeedMultiplier, label: string) {
+ const isActive = this._replaySpeedMultiplier === value;
+ return html`
+
+ `;
}
}
diff --git a/src/client/graphics/layers/SpawnTimer.ts b/src/client/graphics/layers/SpawnTimer.ts
index 081dbcb0b..c3a5f97cc 100644
--- a/src/client/graphics/layers/SpawnTimer.ts
+++ b/src/client/graphics/layers/SpawnTimer.ts
@@ -16,8 +16,11 @@ export class SpawnTimer implements Layer {
tick() {
if (this.game.inSpawnPhase()) {
- this.ratios[0] =
- this.game.ticks() / this.game.config().numSpawnPhaseTurns();
+ // During spawn phase, only one segment filling full width
+ this.ratios = [
+ this.game.ticks() / this.game.config().numSpawnPhaseTurns(),
+ ];
+ this.colors = ["rgba(0, 128, 255, 0.7)"];
return;
}
@@ -33,18 +36,17 @@ export class SpawnTimer implements Layer {
const team = player.team();
if (team === null) throw new Error("Team is null");
const tiles = teamTiles.get(team) ?? 0;
- const sum = tiles + player.numTilesOwned();
- teamTiles.set(team, sum);
+ teamTiles.set(team, tiles + player.numTilesOwned());
}
const theme = this.game.config().theme();
const total = sumIterator(teamTiles.values());
if (total === 0) return;
+
for (const [team, count] of teamTiles) {
const ratio = count / total;
- const color = theme.teamColor(team).toRgbString();
this.ratios.push(ratio);
- this.colors.push(color);
+ this.colors.push(theme.teamColor(team).toRgbString());
}
}
@@ -53,12 +55,23 @@ export class SpawnTimer implements Layer {
}
renderLayer(context: CanvasRenderingContext2D) {
- if (this.ratios === null) return;
- if (this.ratios.length === 0) return;
- if (this.colors.length === 0) return;
+ if (this.ratios.length === 0 || this.colors.length === 0) return;
const barHeight = 10;
const barWidth = this.transformHandler.width();
+ let yOffset: number;
+
+ if (this.game.inSpawnPhase()) {
+ // At spawn time, draw at top
+ yOffset = 0;
+ } else if (this.game.config().gameConfig().gameMode === GameMode.Team) {
+ // After spawn, only in team mode, offset based on screen width
+ const screenW = window.innerWidth;
+ yOffset = screenW > 1024 ? 80 : 58;
+ } else {
+ // Not spawn and not team mode: no bar
+ return;
+ }
let x = 0;
let filledRatio = 0;
@@ -67,7 +80,7 @@ export class SpawnTimer implements Layer {
const segmentWidth = barWidth * ratio;
context.fillStyle = this.colors[i];
- context.fillRect(x, 0, segmentWidth, barHeight);
+ context.fillRect(x, yOffset, segmentWidth, barHeight);
x += segmentWidth;
filledRatio += ratio;
@@ -76,8 +89,6 @@ export class SpawnTimer implements Layer {
}
function sumIterator(values: MapIterator
-
-
-
-
+ ${this.renderSpeedButton(ReplaySpeedMultiplier.slow, "×0.5")}
+ ${this.renderSpeedButton(ReplaySpeedMultiplier.normal, "×1")}
+ ${this.renderSpeedButton(ReplaySpeedMultiplier.fast, "×2")}
+ ${this.renderSpeedButton(ReplaySpeedMultiplier.fastest, "max")}
-
-
- `;
- }
-}
diff --git a/src/client/index.html b/src/client/index.html
index 77c4ece35..d0b166ef2 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -265,7 +265,6 @@
- ${translateText("control_panel.pop")}:
- ${renderTroops(myPlayer.population())} /
- ${renderTroops(maxPop)}
- (+${renderTroops(popRate)})
-
-
-
- ${translateText("control_panel.gold")}:
- ${renderNumber(myPlayer.gold())}
- (+${renderNumber(goldPerSecond)})
-
-
+
@@ -363,7 +359,8 @@