diff --git a/resources/images/PortIcon.svg b/resources/images/PortIcon.svg index 7ed7015d0..fdeb6c599 100644 --- a/resources/images/PortIcon.svg +++ b/resources/images/PortIcon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/resources/images/SoldierIcon.svg b/resources/images/SoldierIcon.svg new file mode 100644 index 000000000..fa4118a3a --- /dev/null +++ b/resources/images/SoldierIcon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/resources/lang/en.json b/resources/lang/en.json index 487c6c47d..d9966976e 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -733,29 +733,6 @@ "show_control": "Show Control", "show_units": "Show Units" }, - "player_info_overlay": { - "type": "Type", - "bot": "Bot", - "nation": "Nation", - "player": "Player", - "team": "Team", - "alliance_timeout": "Alliance ends in", - "troops": "Troops", - "maxtroops": "Max troops", - "a_troops": "Attacking troops", - "gold": "Gold", - "ports": "Ports", - "cities": "Cities", - "factories": "Factories", - "missile_launchers": "Missile launchers", - "sams": "SAMs", - "warships": "Warships", - "health": "Health", - "attitude": "Attitude", - "levels": "Levels", - "wilderness_title": "Wilderness", - "irradiated_wilderness_title": "Irradiated Wilderness" - }, "events_display": { "retreating": "retreating", "retaliate": "Retaliate", diff --git a/src/client/graphics/layers/InGameHeaderAd.ts b/src/client/graphics/layers/InGameHeaderAd.ts index f3925508a..3233daf39 100644 --- a/src/client/graphics/layers/InGameHeaderAd.ts +++ b/src/client/graphics/layers/InGameHeaderAd.ts @@ -21,7 +21,8 @@ export class InGameHeaderAd extends LitElement implements Layer { } init() { - this.showHeaderAd(); + // TODO: move ad and re-enable. + // this.showHeaderAd(); } private showHeaderAd(): void { diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts index 20868a226..db1ee65df 100644 --- a/src/client/graphics/layers/PlayerInfoOverlay.ts +++ b/src/client/graphics/layers/PlayerInfoOverlay.ts @@ -32,6 +32,7 @@ import goldCoinIcon from "/images/GoldCoinIcon.svg?url"; import missileSiloIcon from "/images/MissileSiloIconWhite.svg?url"; import portIcon from "/images/PortIcon.svg?url"; import samLauncherIcon from "/images/SamLauncherIconWhite.svg?url"; +import soldierIcon from "/images/SoldierIcon.svg?url"; function euclideanDistWorld( coord: { x: number; y: number }, @@ -73,12 +74,6 @@ export class PlayerInfoOverlay extends LitElement implements Layer { @state() private unit: UnitView | null = null; - @state() - private isWilderness: boolean = false; - - @state() - private isIrradiatedWilderness: boolean = false; - @state() private _isInfoVisible: boolean = false; @@ -86,8 +81,6 @@ export class PlayerInfoOverlay extends LitElement implements Layer { private lastMouseUpdate = 0; - private showDetails = true; - init() { this.eventBus.on(MouseMoveEvent, (e: MouseMoveEvent) => this.onMouseEvent(e), @@ -112,8 +105,6 @@ export class PlayerInfoOverlay extends LitElement implements Layer { this.setVisible(false); this.unit = null; this.player = null; - this.isWilderness = false; - this.isIrradiatedWilderness = false; } public maybeShow(x: number, y: number) { @@ -134,13 +125,6 @@ export class PlayerInfoOverlay extends LitElement implements Layer { this.playerProfile = p; }); this.setVisible(true); - } else if (owner && !owner.isPlayer() && this.game.isLand(tile)) { - if (this.game.hasFallout(tile)) { - this.isIrradiatedWilderness = true; - } else { - this.isWilderness = true; - } - this.setVisible(true); } else if (!this.game.isLand(tile)) { const units = this.game .units(UnitType.Warship, UnitType.TradeShip, UnitType.TransportShip) @@ -201,28 +185,17 @@ export class PlayerInfoOverlay extends LitElement implements Layer { } } - private displayUnitCount( - player: PlayerView, - type: UnitType, - icon: string, - description: string, - ) { + private displayUnitCount(player: PlayerView, type: UnitType, icon: string) { return !this.game.config().isUnitDisabled(type) ? html`
${translateText(description)} - ${player.totalUnitLevels(type)} + ${player.totalUnitLevels(type)}
` : ""; } @@ -268,7 +241,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer { const myPlayer = this.game.myPlayer(); const isFriendly = myPlayer?.isFriendly(player); const isAllied = myPlayer?.isAlliedWith(player); - let relationHtml: TemplateResult | null = null; + let allianceHtml: TemplateResult | null = null; const maxTroops = this.game.config().maxTroops(player); const attackingTroops = player .outgoingAttacks() @@ -276,34 +249,17 @@ export class PlayerInfoOverlay extends LitElement implements Layer { .reduce((a, b) => a + b, 0); const totalTroops = player.troops(); - if (player.type() === PlayerType.Nation && myPlayer !== null && !isAllied) { - const relation = - this.playerProfile?.relations[myPlayer.smallID()] ?? Relation.Neutral; - const relationClass = this.getRelationClass(relation); - const relationName = this.getRelationName(relation); - - relationHtml = html` - ${relationName} - `; - } - if (isAllied) { const alliance = myPlayer ?.alliances() .find((alliance) => alliance.other === player.id()); if (alliance !== undefined) { - relationHtml = html` - ${translateText("player_info_overlay.alliance_timeout")} + ${this.allianceExpirationText(alliance)} - `; + `; } } let playerType = ""; @@ -320,128 +276,83 @@ export class PlayerInfoOverlay extends LitElement implements Layer { } return html` -
- - - - ${this.showDetails - ? html` - ${player.team() !== null - ? html`
- ${translateText("player_info_overlay.team")}: - ${player.team()} -
` - : ""} -
${playerType} ${relationHtml}
- ${player.troops() >= 1 - ? html`
- ${translateText("player_info_overlay.troops")} - - ${renderTroops(player.troops())} - -
` - : ""} - ${maxTroops >= 1 - ? html`
- ${translateText("player_info_overlay.maxtroops")} - - ${renderTroops(maxTroops)} - -
` - : ""} - ${attackingTroops >= 1 - ? html`
- ${translateText("player_info_overlay.a_troops")} - - ${renderTroops(attackingTroops)} - -
` - : ""} - ${this.renderTroopBar(totalTroops, attackingTroops, maxTroops)} -
- ${translateText("player_info_overlay.gold")} - ${renderNumber(player.gold())} -
-
- ${this.displayUnitCount( - player, - UnitType.City, - cityIcon, - "player_info_overlay.cities", - )} - ${this.displayUnitCount( - player, - UnitType.Factory, - factoryIcon, - "player_info_overlay.factories", - )} - ${this.displayUnitCount( - player, - UnitType.Port, - portIcon, - "player_info_overlay.ports", - )} - ${this.displayUnitCount( - player, - UnitType.MissileSilo, - missileSiloIcon, - "player_info_overlay.missile_launchers", - )} - ${this.displayUnitCount( - player, - UnitType.SAMLauncher, - samLauncherIcon, - "player_info_overlay.sams", - )} - ${this.displayUnitCount( - player, - UnitType.Warship, - warshipIcon, - "player_info_overlay.warships", - )} -
- ` - : ""} +
+ +
+
+ + ${renderNumber(player.gold())} +
+
+ ${this.renderTroopBar(totalTroops, attackingTroops, maxTroops)} +
+
+ +
+
+ ${player.cosmetics.flag + ? player.cosmetics.flag!.startsWith("!") + ? html`
{ + if (el instanceof HTMLElement) { + requestAnimationFrame(() => { + renderPlayerFlag(player.cosmetics.flag!, el); + }); + } + })} + >
` + : html`` + : html``} + ${player.name()} + ${player.team() !== null && player.type() !== PlayerType.Bot + ? html`
+ ${playerType} + [${player.team()}] +
` + : html`${playerType}`} + ${this.renderPlayerNameIcons(player)} ${allianceHtml ?? ""} +
+
+ ${this.displayUnitCount(player, UnitType.City, cityIcon)} + ${this.displayUnitCount(player, UnitType.Factory, factoryIcon)} + ${this.displayUnitCount(player, UnitType.Port, portIcon)} + ${this.displayUnitCount( + player, + UnitType.MissileSilo, + missileSiloIcon, + )} + ${this.displayUnitCount( + player, + UnitType.SAMLauncher, + samLauncherIcon, + )} + ${this.displayUnitCount(player, UnitType.Warship, warshipIcon)} +
+
`; } @@ -463,7 +374,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer { return html`
${greenPercent > 0 @@ -479,6 +390,25 @@ export class PlayerInfoOverlay extends LitElement implements Layer { >
` : ""}
+
+ ${renderTroops(totalTroops)} + ${renderTroops(maxTroops)} +
+
`; } @@ -497,18 +427,12 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
${unit.type()}
${unit.hasHealth() - ? html` -
- ${translateText("player_info_overlay.health")}: - ${unit.health()} -
- ` + ? html`
Health: ${unit.health()}
` : ""} ${unit.type() === UnitType.TransportShip ? html`
- ${translateText("player_info_overlay.troops")}: - ${renderTroops(unit.troops())} + Troops: ${renderTroops(unit.troops())}
` : ""} @@ -528,21 +452,12 @@ export class PlayerInfoOverlay extends LitElement implements Layer { return html`
e.preventDefault()} >
- ${this.isWilderness || this.isIrradiatedWilderness - ? html`
- ${translateText( - this.isIrradiatedWilderness - ? "player_info_overlay.irradiated_wilderness_title" - : "player_info_overlay.wilderness_title", - )} -
` - : ""} ${this.player !== null ? this.renderPlayerInfo(this.player) : ""} ${this.unit !== null ? this.renderUnitInfo(this.unit) : ""}
diff --git a/src/client/graphics/layers/UnitDisplay.ts b/src/client/graphics/layers/UnitDisplay.ts index c08bcb183..5caac75d1 100644 --- a/src/client/graphics/layers/UnitDisplay.ts +++ b/src/client/graphics/layers/UnitDisplay.ts @@ -13,6 +13,7 @@ import { Layer } from "./Layer"; import warshipIcon from "/images/BattleshipIconWhite.svg?url"; import cityIcon from "/images/CityIconWhite.svg?url"; import factoryIcon from "/images/FactoryIconWhite.svg?url"; +import goldCoinIcon from "/images/GoldCoinIcon.svg?url"; import mirvIcon from "/images/MIRVIcon.svg?url"; import missileSiloIcon from "/images/MissileSiloIconWhite.svg?url"; import hydrogenBombIcon from "/images/MushroomCloudIconWhite.svg?url"; @@ -256,11 +257,11 @@ export class UnitDisplay extends LitElement implements Layer {
${translateText("build_menu.desc." + structureKey)}
-
+
+ ${renderNumber(this.cost(unitType))} - ${translateText("player_info_overlay.gold")}
`