@@ -713,6 +721,8 @@ export class PlayerPanel extends LitElement implements Layer {
return html``;
}
const other = owner as PlayerView;
+ const myGoldNum = my.gold();
+ const myTroopsNum = Number(my.troops());
return html`
+ `;
+ }
+
+ render() {
+ if (!this.open) return html``;
+
+ const percent = this.percentOfBasis(this.sendAmount);
+ const allowed = this.limitAmount(this.sendAmount);
+
+ return html`
+
+
this.closeModal()}
+ >
+
+
+
e.stopPropagation()}
+ >
+ ${this.renderHeader()} ${this.renderAvailable()}
+ ${!this.isTargetAlive() ? this.renderDeadNote() : html``}
+ ${this.renderPresets(percent)} ${this.renderSlider(percent)}
+ ${this.mode === "troops"
+ ? this.renderCapacityNote(allowed)
+ : html``}
+ ${this.renderSummary(allowed)} ${this.renderActions()}
+ ${this.renderSliderStyles()}
+
+
+
+ `;
+ }
+}
diff --git a/src/client/graphics/layers/StructureDrawingUtils.ts b/src/client/graphics/layers/StructureDrawingUtils.ts
index d2c3cbb44..a3693dc74 100644
--- a/src/client/graphics/layers/StructureDrawingUtils.ts
+++ b/src/client/graphics/layers/StructureDrawingUtils.ts
@@ -18,9 +18,10 @@ export const STRUCTURE_SHAPES: Partial
> = {
[UnitType.DefensePost]: "octagon",
[UnitType.SAMLauncher]: "square",
[UnitType.MissileSilo]: "triangle",
+ [UnitType.Warship]: "cross",
[UnitType.AtomBomb]: "cross",
[UnitType.HydrogenBomb]: "cross",
- [UnitType.Warship]: "cross",
+ [UnitType.MIRV]: "cross",
};
export const LEVEL_SCALE_FACTOR = 3;
export const ICON_SCALE_FACTOR_ZOOMED_IN = 3.5;
diff --git a/src/client/graphics/layers/TerritoryLayer.ts b/src/client/graphics/layers/TerritoryLayer.ts
index ce84ad98b..59670db17 100644
--- a/src/client/graphics/layers/TerritoryLayer.ts
+++ b/src/client/graphics/layers/TerritoryLayer.ts
@@ -149,6 +149,11 @@ export class TerritoryLayer implements Layer {
if (!this.game.inSpawnPhase()) {
return;
}
+
+ this.spawnHighlight();
+ }
+
+ private spawnHighlight() {
if (this.game.ticks() % 5 === 0) {
return;
}
@@ -159,11 +164,18 @@ export class TerritoryLayer implements Layer {
this.game.width(),
this.game.height(),
);
+
+ this.drawFocusedPlayerHighlight();
+
const humans = this.game
.playerViews()
.filter((p) => p.type() === PlayerType.Human);
+ const focusedPlayer = this.game.focusedPlayer();
for (const human of humans) {
+ if (human === focusedPlayer) {
+ continue;
+ }
const center = human.nameLocation();
if (!center) {
continue;
@@ -190,37 +202,34 @@ export class TerritoryLayer implements Layer {
}
}
}
+ }
+
+ private drawFocusedPlayerHighlight() {
+ const focusedPlayer = this.game.focusedPlayer();
+
+ if (!focusedPlayer) {
+ return;
+ }
+ const center = focusedPlayer.nameLocation();
+ if (!center) {
+ return;
+ }
// Breathing border animation
- this.borderAnimTime += 1;
- const minPadding = 3;
- const maxPadding = 8;
+ this.borderAnimTime += 3;
+ const minPadding = 6;
+ const maxPadding = 12;
// Range: [minPadding..maxPadding]
const breathingPadding =
minPadding +
(maxPadding - minPadding) *
(0.5 + 0.5 * Math.sin(this.borderAnimTime * 0.3));
- if (focusedPlayer) {
- // Clear previous animated border
- if (this.highlightContext) {
- this.highlightContext.clearRect(
- 0,
- 0,
- this.game.width(),
- this.game.height(),
- );
- }
-
- const center = focusedPlayer.nameLocation();
- if (center) {
- this.drawBreathingRing(
- center.x,
- center.y,
- breathingPadding,
- this.theme.spawnHighlightColor(),
- );
- }
- }
+ this.drawBreathingRing(
+ center.x,
+ center.y,
+ breathingPadding,
+ this.theme.spawnHighlightColor(),
+ );
}
init() {
@@ -560,7 +569,7 @@ export class TerritoryLayer implements Layer {
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, Math.PI * 2);
ctx.strokeStyle = color.toRgbString();
- ctx.lineWidth = 2;
+ ctx.lineWidth = 4;
ctx.stroke();
}
}
diff --git a/src/client/graphics/layers/UnitDisplay.ts b/src/client/graphics/layers/UnitDisplay.ts
index a78766616..d2ae6a93f 100644
--- a/src/client/graphics/layers/UnitDisplay.ts
+++ b/src/client/graphics/layers/UnitDisplay.ts
@@ -3,7 +3,8 @@ import { customElement } from "lit/decorators.js";
import warshipIcon from "../../../../resources/images/BattleshipIconWhite.svg";
import cityIcon from "../../../../resources/images/CityIconWhite.svg";
import factoryIcon from "../../../../resources/images/FactoryIconWhite.svg";
-import missileSiloIcon from "../../../../resources/images/MissileSiloUnit.png";
+import mirvIcon from "../../../../resources/images/MIRVIcon.svg";
+import missileSiloIcon from "../../../../resources/images/MissileSiloIconWhite.svg";
import hydrogenBombIcon from "../../../../resources/images/MushroomCloudIconWhite.svg";
import atomBombIcon from "../../../../resources/images/NukeIconWhite.svg";
import portIcon from "../../../../resources/images/PortIcon.svg";
@@ -59,7 +60,8 @@ export class UnitDisplay extends LitElement implements Layer {
config.isUnitDisabled(UnitType.SAMLauncher) &&
config.isUnitDisabled(UnitType.Warship) &&
config.isUnitDisabled(UnitType.AtomBomb) &&
- config.isUnitDisabled(UnitType.HydrogenBomb);
+ config.isUnitDisabled(UnitType.HydrogenBomb) &&
+ config.isUnitDisabled(UnitType.MIRV);
this.requestUpdate();
}
@@ -78,6 +80,7 @@ export class UnitDisplay extends LitElement implements Layer {
switch (item) {
case UnitType.AtomBomb:
case UnitType.HydrogenBomb:
+ case UnitType.MIRV:
return (
this.cost(item) <= (player?.gold() ?? 0n) &&
(player?.units(UnitType.MissileSilo).length ?? 0) > 0
@@ -124,7 +127,7 @@ export class UnitDisplay extends LitElement implements Layer {
return html`