+
+ `;
+
+ return this.interactive
+ ? html`
+
+ `
+ : html`
+ ${this.showCta
+ ? html`
+
+
+ ${translateText("public_lobby.join")}
+
`
+ : ""}
+
+ ${this.gameConfig.gameMode === GameMode.Team
+ ? typeof teamCount === "string"
+ ? translateText(`public_lobby.teams_${teamCount}`)
+ : translateText("public_lobby.teams", {
+ num: teamCount ?? 0,
+ })
+ : translateText("game_mode.ffa")}
+
+ ${translateText(
+ `map.${this.gameConfig.gameMap.toLowerCase().replace(/\s+/g, "")}`,
+ )}
+
+ ${this.showDifficulty
+ ? html`
+ ${translateText(
+ "private_lobby.difficulty",
+ )}${this.formatDifficulty()}
+
`
+ : ""}
+
+ ${this.showPlayerCount &&
+ this.numClients !== undefined &&
+ this.maxPlayers !== undefined
+ ? html`
+
+ ${this.numClients} / ${this.maxPlayers}
+
`
+ : ""}
+ ${this.showTimer && timeDisplay
+ ? html`
+ ${timeDisplay}
+
`
+ : ""}
+ ${cardContent}
`;
+ }
+
+ private formatDifficulty(): string {
+ if (!this.gameConfig) return "";
+
+ const difficulty = this.gameConfig.difficulty;
+
+ // Difficulty is a string enum ("Easy", "Medium", "Hard", "Impossible")
+ const translated = translateText(`difficulty.${difficulty}`);
+ if (translated !== `difficulty.${difficulty}`) {
+ return translated;
+ }
+
+ return String(difficulty);
+ }
+
+ private handleClick() {
+ if (this.interactive && !this.debounced) {
+ this.dispatchEvent(
+ new CustomEvent("card-click", {
+ bubbles: true,
+ composed: true,
+ }),
+ );
+ }
+ }
+}
diff --git a/src/client/components/MaxTimerCard.ts b/src/client/components/MaxTimerCard.ts
new file mode 100644
index 0000000000..7631103478
--- /dev/null
+++ b/src/client/components/MaxTimerCard.ts
@@ -0,0 +1,191 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { translateText } from "../Utils";
+
+/**
+ * A specialized card component for the Max Timer option
+ * Displays a checkbox and a number input when checked
+ */
+@customElement("max-timer-card")
+export class MaxTimerCard extends LitElement {
+ /**
+ * Unique identifier for the checkbox input
+ */
+ @property({ type: String }) inputId: string = "max-timer";
+
+ /**
+ * Current value of the timer (undefined if disabled)
+ */
+ @property({ type: Number }) value?: number;
+
+ /**
+ * Whether the option is editable
+ */
+ @property({ type: Boolean }) editable: boolean = false;
+
+ /**
+ * Callback when the checkbox is toggled
+ */
+ @property({ attribute: false }) onToggle?: (enabled: boolean) => void;
+
+ /**
+ * Callback when the timer value changes
+ */
+ @property({ attribute: false }) onValueChange?: (value: number) => void;
+
+ static styles = css`
+ :host {
+ display: contents;
+ }
+
+ .option-card {
+ width: 100%;
+ min-width: 6.25rem;
+ max-width: 7.5rem;
+ padding: 0.25rem 0.25rem 0 0.25rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ background: rgba(30, 30, 30, 0.95);
+ border: 0.125rem solid rgba(255, 255, 255, 0.1);
+ border-radius: 0.5rem;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+ }
+
+ .option-card:hover {
+ transform: translateY(-0.125rem);
+ border-color: rgba(255, 255, 255, 0.3);
+ background: rgba(40, 40, 40, 0.95);
+ }
+
+ .option-card.selected {
+ border-color: #4a9eff;
+ background: rgba(74, 158, 255, 0.1);
+ }
+
+ .option-card-title {
+ font-size: 0.875rem;
+ color: #aaa;
+ text-align: center;
+ margin: 0 0 0.25rem 0;
+ }
+
+ .option-card input[type="checkbox"] {
+ opacity: 0;
+ position: absolute;
+ pointer-events: none;
+ }
+
+ label.option-card:hover {
+ transform: none;
+ }
+
+ .checkbox-icon {
+ width: 1rem;
+ height: 1rem;
+ border: 0.125rem solid #aaa;
+ border-radius: 0.375rem;
+ margin: 0.25rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease-in-out;
+ }
+
+ .option-card.selected .checkbox-icon {
+ border-color: #4a9eff;
+ background: #4a9eff;
+ }
+
+ .option-card.selected .checkbox-icon::after {
+ content: "✓";
+ color: white;
+ }
+
+ input[type="number"] {
+ width: 60px;
+ color: black;
+ text-align: right;
+ border-radius: 8px;
+ padding: 2px 4px;
+ border: 1px solid #ccc;
+ }
+ `;
+
+ render(): TemplateResult {
+ const isEnabled = this.value !== undefined;
+
+ if (this.editable) {
+ return html`
+
+
+ ${isEnabled
+ ? html` e.stopPropagation()}
+ />`
+ : ""}
+
+ `;
+ } else {
+ return html`
+
+ ${translateText("host_modal.max_timer")}
+
+
+
+ ${isEnabled
+ ? html`${this.value}`
+ : ""}
+
+ `;
+ }
+ }
+
+ private handleCardClick(e: Event) {
+ e.preventDefault();
+ e.stopPropagation();
+ if (this.onToggle) {
+ this.onToggle(this.value === undefined);
+ }
+ }
+
+ private handleValueInput(e: Event) {
+ const input = e.target as HTMLInputElement;
+ input.value = input.value.replace(/[e+-]/gi, "");
+ const val = parseInt(input.value);
+
+ if (isNaN(val) || val < 0 || val > 120) {
+ return;
+ }
+
+ if (this.onValueChange) {
+ this.onValueChange(val);
+ }
+ }
+
+ private handleKeyDown(e: KeyboardEvent) {
+ if (["-", "+", "e"].includes(e.key)) {
+ e.preventDefault();
+ }
+ }
+}
diff --git a/src/client/utilities/RenderUnitTypeOptions.ts b/src/client/utilities/RenderUnitTypeOptions.ts
deleted file mode 100644
index 0392935d6f..0000000000
--- a/src/client/utilities/RenderUnitTypeOptions.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-// renderUnitTypeOptions.ts
-import { html, TemplateResult } from "lit";
-import { UnitType } from "../../core/game/Game";
-import { translateText } from "../Utils";
-
-export interface UnitTypeRenderContext {
- disabledUnits: UnitType[];
- toggleUnit: (unit: UnitType, checked: boolean) => void;
-}
-
-const unitOptions: { type: UnitType; translationKey: string }[] = [
- { type: UnitType.City, translationKey: "unit_type.city" },
- { type: UnitType.DefensePost, translationKey: "unit_type.defense_post" },
- { type: UnitType.Port, translationKey: "unit_type.port" },
- { type: UnitType.Warship, translationKey: "unit_type.warship" },
- { type: UnitType.MissileSilo, translationKey: "unit_type.missile_silo" },
- { type: UnitType.SAMLauncher, translationKey: "unit_type.sam_launcher" },
- { type: UnitType.AtomBomb, translationKey: "unit_type.atom_bomb" },
- { type: UnitType.HydrogenBomb, translationKey: "unit_type.hydrogen_bomb" },
- { type: UnitType.MIRV, translationKey: "unit_type.mirv" },
- { type: UnitType.Factory, translationKey: "unit_type.factory" },
-];
-
-export function renderUnitTypeOptions({
- disabledUnits,
- toggleUnit,
-}: UnitTypeRenderContext): TemplateResult[] {
- return unitOptions.map(
- ({ type, translationKey }) => html`
-
- `,
- );
-}
+ ${translateText("host_modal.max_timer")}
+
+