-
+
@@ -331,7 +334,7 @@
Options
-
-
+
+
-
-
-
-
-
+ ${
+ this.players.length === 1
+ ? translateText("host_modal.waiting")
+ : translateText("host_modal.start")
+ }
+
`;
diff --git a/src/client/JoinPrivateLobbyModal.ts b/src/client/JoinPrivateLobbyModal.ts
index 1afd669f4..23a32ecbf 100644
--- a/src/client/JoinPrivateLobbyModal.ts
+++ b/src/client/JoinPrivateLobbyModal.ts
@@ -4,6 +4,7 @@ import { consolex } from "../core/Consolex";
import { GameInfo, GameRecord } from "../core/Schemas";
import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
import { JoinLobbyEvent } from "./Main";
+import { translateText } from "../client/Utils";
import "./components/baseComponents/Modal";
import "./components/baseComponents/Button";
@@ -22,12 +23,12 @@ export class JoinPrivateLobbyModal extends LitElement {
render() {
return html`
-
`;
+const 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;
+};
+
@customElement("options-menu")
export class OptionsMenu extends LitElement implements Layer {
public game: GameView;
@@ -141,11 +151,11 @@ export class OptionsMenu extends LitElement implements Layer {
children: this.isPaused ? "▶️" : "⏸",
})}
- ${this.timer}
+ ${secondsToHms(this.timer)}
${button({
onClick: this.onExitButtonClick,
@@ -161,7 +171,7 @@ export class OptionsMenu extends LitElement implements Layer {
+ ${player.flag()
+ ? html`![](${"/flags/")
`
+ : ""}
${player.name()}
Type: ${playerType}
@@ -269,11 +275,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/StructureLayer.ts b/src/client/graphics/layers/StructureLayer.ts
index 9e8fa4ea5..3bb61bba6 100644
--- a/src/client/graphics/layers/StructureLayer.ts
+++ b/src/client/graphics/layers/StructureLayer.ts
@@ -12,15 +12,30 @@ import cityIcon from "../../../../resources/images/buildings/cityAlt1.png";
import { GameView, UnitView } from "../../../core/game/GameView";
import { Cell, UnitType } from "../../../core/game/Game";
import { GameUpdateType } from "../../../core/game/GameUpdates";
-import { euclDistFN } from "../../../core/game/GameMap";
+import {
+ euclDistFN,
+ manhattanDistFN,
+ rectDistFN,
+ hexDistFN,
+} from "../../../core/game/GameMap";
const underConstructionColor = colord({ r: 150, g: 150, b: 150 });
const reloadingColor = colord({ r: 255, g: 0, b: 0 });
+type DistanceFunction = typeof euclDistFN;
+
+enum UnitBorderType {
+ Round,
+ Diamond,
+ Square,
+ Hexagon,
+}
+
interface UnitRenderConfig {
icon: string;
borderRadius: number;
territoryRadius: number;
+ borderType: UnitBorderType;
}
export class StructureLayer implements Layer {
@@ -35,26 +50,31 @@ export class StructureLayer implements Layer {
icon: anchorIcon,
borderRadius: 8.525,
territoryRadius: 6.525,
+ borderType: UnitBorderType.Round,
},
[UnitType.City]: {
icon: cityIcon,
borderRadius: 8.525,
territoryRadius: 6.525,
+ borderType: UnitBorderType.Round,
},
[UnitType.MissileSilo]: {
icon: missileSiloIcon,
- borderRadius: 9.5,
- territoryRadius: 6,
+ borderRadius: 8.525,
+ territoryRadius: 6.525,
+ borderType: UnitBorderType.Square,
},
[UnitType.DefensePost]: {
icon: shieldIcon,
- borderRadius: 9.5,
- territoryRadius: 6,
+ borderRadius: 8.525,
+ territoryRadius: 6.525,
+ borderType: UnitBorderType.Hexagon,
},
[UnitType.SAMLauncher]: {
icon: SAMMissileIcon,
- borderRadius: 10,
- territoryRadius: 6,
+ borderRadius: 8.525,
+ territoryRadius: 6.525,
+ borderType: UnitBorderType.Square,
},
};
@@ -68,6 +88,7 @@ export class StructureLayer implements Layer {
icon: SAMMissileReloadingIcon,
borderRadius: 8.525,
territoryRadius: 6.525,
+ borderType: UnitBorderType.Square,
});
}
@@ -91,7 +112,7 @@ export class StructureLayer implements Layer {
);
this.unitIcons.set(unitType, iconData);
console.log(
- `icond data width height: ${iconData.width}, ${iconData.height}`,
+ `icon data width height: ${iconData.width}, ${iconData.height}`,
);
};
}
@@ -141,6 +162,51 @@ export class StructureLayer implements Layer {
return unitType in this.unitConfigs;
}
+ private drawBorder(
+ unit: UnitView,
+ borderColor: Colord,
+ config: UnitRenderConfig,
+ distanceFN: DistanceFunction,
+ ) {
+ // Draw border and territory
+ for (const tile of this.game.bfs(
+ unit.tile(),
+ distanceFN(unit.tile(), config.borderRadius, true),
+ )) {
+ this.paintCell(
+ new Cell(this.game.x(tile), this.game.y(tile)),
+ borderColor,
+ 255,
+ );
+ }
+
+ for (const tile of this.game.bfs(
+ unit.tile(),
+ distanceFN(unit.tile(), config.territoryRadius, true),
+ )) {
+ this.paintCell(
+ new Cell(this.game.x(tile), this.game.y(tile)),
+ unit.type() == UnitType.Construction
+ ? underConstructionColor
+ : this.theme.territoryColor(unit.owner().info()),
+ 130,
+ );
+ }
+ }
+
+ private getDrawFN(type: UnitBorderType) {
+ switch (type) {
+ case UnitBorderType.Round:
+ return euclDistFN;
+ case UnitBorderType.Diamond:
+ return manhattanDistFN;
+ case UnitBorderType.Square:
+ return rectDistFN;
+ case UnitBorderType.Hexagon:
+ return hexDistFN;
+ }
+ }
+
private handleUnitRendering(unit: UnitView) {
const unitType = unit.constructionType() ?? unit.type();
let iconType = unitType;
@@ -157,17 +223,16 @@ export class StructureLayer implements Layer {
if (!config || !icon) return;
+ const drawFunction = this.getDrawFN(config.borderType);
// Clear previous rendering
for (const tile of this.game.bfs(
unit.tile(),
- euclDistFN(unit.tile(), config.borderRadius, true),
+ drawFunction(unit.tile(), config.borderRadius, true),
)) {
this.clearCell(new Cell(this.game.x(tile), this.game.y(tile)));
}
- if (!unit.isActive()) {
- return;
- }
+ if (!unit.isActive()) return;
let borderColor = this.theme.borderColor(unit.owner().info());
if (unitType == UnitType.SAMLauncher && unit.isSamCooldown()) {
@@ -176,30 +241,7 @@ export class StructureLayer implements Layer {
borderColor = underConstructionColor;
}
- // Draw border and territory
- for (const tile of this.game.bfs(
- unit.tile(),
- euclDistFN(unit.tile(), config.borderRadius, true),
- )) {
- this.paintCell(
- new Cell(this.game.x(tile), this.game.y(tile)),
- borderColor,
- 255,
- );
- }
-
- for (const tile of this.game.bfs(
- unit.tile(),
- euclDistFN(unit.tile(), config.territoryRadius, true),
- )) {
- this.paintCell(
- new Cell(this.game.x(tile), this.game.y(tile)),
- unit.type() == UnitType.Construction
- ? underConstructionColor
- : this.theme.territoryColor(unit.owner().info()),
- 130,
- );
- }
+ this.drawBorder(unit, borderColor, config, drawFunction);
const startX = this.game.x(unit.tile()) - Math.floor(icon.width / 2);
const startY = this.game.y(unit.tile()) - Math.floor(icon.height / 2);
diff --git a/src/client/index.html b/src/client/index.html
index 22a7fce4e..698c73c49 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -218,7 +218,7 @@
@@ -304,7 +304,10 @@
class="text-center appearance-none w-full bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md border-none cursor-pointer transition-colors duration-300"
>
+
+
+
- v0.20.0
+ v0.21.0