Merge branch 'main' into bomb-confirmation

src/client/HostLobbyModal.ts

@@ -45,6 +45,8 @@ export class HostLobbyModal extends LitElement {
   @state() private gameMode: GameMode = GameMode.FFA;
   @state() private teamCount: TeamCountConfig = 2;
   @state() private bots: number = 400;
+  @state() private spawnImmunity: boolean = false;
+  @state() private spawnImmunityDurationMinutes: number | undefined = undefined;
   @state() private infiniteGold: boolean = false;
   @state() private donateGold: boolean = false;
   @state() private infiniteTroops: boolean = false;
@@ -514,7 +516,7 @@ export class HostLobbyModal extends LitElement {
                             id="end-timer-value"
                             min="0"
                             max="120"
-                            .value=${String(this.maxTimerValue ?? "")}
+                            .value=${String(this.maxTimerValue ?? 0)}
                             style="width: 60px; color: black; text-align: right; border-radius: 8px;"
                             @input=${this.handleMaxTimerValueChanges}
                             @keydown=${this.handleMaxTimerValueKeyDown}
@@ -524,6 +526,47 @@ export class HostLobbyModal extends LitElement {
                     ${translateText("host_modal.max_timer")}
                   </div>
                 </label>
+
+                <label
+                  for="spawn-immunity"
+                  class="option-card  ${this.spawnImmunity ? "selected" : ""}"
+                >
+                  <div class="checkbox-icon"></div>
+                  <input
+                    type="checkbox"
+                    id="spawn-immunity"
+                    @change=${(e: Event) => {
+                      const checked = (e.target as HTMLInputElement).checked;
+                      if (!checked) {
+                        this.spawnImmunityDurationMinutes = undefined;
+                      }
+                      this.spawnImmunity = checked;
+                      this.putGameConfig();
+                    }}
+                    .checked=${this.spawnImmunity}
+                  />
+                    ${
+                      this.spawnImmunity === false
+                        ? ""
+                        : html`<input
+                            type="number"
+                            id="spawn-immunity-duration"
+                            min="0"
+                            max="120"
+                            step="1"
+                            .value=${String(
+                              this.spawnImmunityDurationMinutes ?? 0,
+                            )}
+                            style="width: 60px; color: black; text-align: right; border-radius: 8px;"
+                            @input=${this.handleSpawnImmunityDurationInput}
+                            @keydown=${this.handleSpawnImmunityDurationKeyDown}
+                          />`
+                    }
+                  <div class="option-card-title">
+                    <span>${translateText("host_modal.player_immunity_duration")}</span>
+                  </div>
+                </label>
+                
                 <hr style="width: 100%; border-top: 1px solid #444; margin: 16px 0;" />
 
                 <!-- Individual disables for structures/weapons -->
@@ -691,6 +734,23 @@ export class HostLobbyModal extends LitElement {
     this.putGameConfig();
   }
 
+  private handleSpawnImmunityDurationKeyDown(e: KeyboardEvent) {
+    if (["-", "+", "e", "E"].includes(e.key)) {
+      e.preventDefault();
+    }
+  }
+
+  private handleSpawnImmunityDurationInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    input.value = input.value.replace(/[eE+-]/g, "");
+    const value = parseInt(input.value, 10);
+    if (Number.isNaN(value) || value < 0 || value > 120) {
+      return;
+    }
+    this.spawnImmunityDurationMinutes = value;
+    this.putGameConfig();
+  }
+
   private handleRandomSpawnChange(e: Event) {
     this.randomSpawn = Boolean((e.target as HTMLInputElement).checked);
     this.putGameConfig();
@@ -757,6 +817,9 @@ export class HostLobbyModal extends LitElement {
   }
 
   private async putGameConfig() {
+    const spawnImmunityTicks = this.spawnImmunityDurationMinutes
+      ? this.spawnImmunityDurationMinutes * 60 * 10
+      : 0;
     this.dispatchEvent(
       new CustomEvent("update-game-config", {
         detail: {
@@ -775,6 +838,9 @@ export class HostLobbyModal extends LitElement {
             randomSpawn: this.randomSpawn,
             gameMode: this.gameMode,
             disabledUnits: this.disabledUnits,
+            spawnImmunityDuration: this.spawnImmunity
+              ? spawnImmunityTicks
+              : undefined,
             playerTeams: this.teamCount,
             ...(this.gameMode === GameMode.Team &&
             this.teamCount === HumansVsNations

src/client/LocalServer.ts

@@ -132,7 +132,10 @@ export class LocalServer {
       if (!this.lobbyConfig.gameRecord) {
         if (clientMsg.turnNumber % 100 === 0) {
           // In singleplayer, only store hash every 100 turns to reduce size of game record.
-          this.turns[clientMsg.turnNumber].hash = clientMsg.hash;
+          const turn = this.turns[clientMsg.turnNumber];
+          if (turn) {
+            turn.hash = clientMsg.hash;
+          }
         }
         return;
       }

src/client/components/FluentSlider.ts

@@ -84,7 +84,7 @@ export class FluentSlider extends LitElement {
     this.dispatchValueChange();
   }
 
-  private handleNumberChange(e: Event) {
+  private handleNumberInput(e: Event) {
     const target = e.target as HTMLInputElement;
     let val = target.valueAsNumber;
     if (isNaN(val)) {
@@ -93,11 +93,19 @@ export class FluentSlider extends LitElement {
     if (val < this.min) val = this.min;
     if (val > this.max) val = this.max;
     this.value = val;
+    // Don't dispatch value change on every input - only on blur/enter
+  }
+
+  private handleNumberComplete() {
+    // Dispatch the value change when editing is complete
     this.dispatchValueChange();
   }
 
   private handleNumberKeyDown(e: KeyboardEvent) {
-    if (e.key === "Enter") this.isEditing = false;
+    if (e.key === "Enter") {
+      this.isEditing = false;
+      this.handleNumberComplete();
+    }
   }
 
   private enableEditing() {
@@ -125,8 +133,11 @@ export class FluentSlider extends LitElement {
                 .min=${this.min}
                 .max=${this.max}
                 .valueAsNumber=${this.value}
-                @input=${this.handleNumberChange}
-                @blur=${() => (this.isEditing = false)}
+                @input=${this.handleNumberInput}
+                @blur=${() => {
+                  this.isEditing = false;
+                  this.handleNumberComplete();
+                }}
                 @keydown=${this.handleNumberKeyDown}
               />`
             : html`<span

src/client/graphics/GameRenderer.ts

@@ -18,6 +18,7 @@ import { FxLayer } from "./layers/FxLayer";
 import { GameLeftSidebar } from "./layers/GameLeftSidebar";
 import { GameRightSidebar } from "./layers/GameRightSidebar";
 import { HeadsUpMessage } from "./layers/HeadsUpMessage";
+import { ImmunityTimer } from "./layers/ImmunityTimer";
 import { Layer } from "./layers/Layer";
 import { Leaderboard } from "./layers/Leaderboard";
 import { MainRadialMenu } from "./layers/MainRadialMenu";
@@ -235,6 +236,14 @@ export function createRenderer(
   spawnTimer.game = game;
   spawnTimer.transformHandler = transformHandler;
 
+  const immunityTimer = document.querySelector(
+    "immunity-timer",
+  ) as ImmunityTimer;
+  if (!(immunityTimer instanceof ImmunityTimer)) {
+    console.error("immunity timer not found");
+  }
+  immunityTimer.game = game;
+
   // When updating these layers please be mindful of the order.
   // Try to group layers by the return value of shouldTransform.
   // Not grouping the layers may cause excessive calls to context.save() and context.restore().
@@ -263,6 +272,7 @@ export function createRenderer(
       playerPanel,
     ),
     spawnTimer,
+    immunityTimer,
     leaderboard,
     gameLeftSidebar,
     unitDisplay,

src/client/graphics/layers/ImmunityTimer.ts

@@ -0,0 +1,93 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { GameMode } from "../../../core/game/Game";
+import { GameView } from "../../../core/game/GameView";
+import { Layer } from "./Layer";
+
+@customElement("immunity-timer")
+export class ImmunityTimer extends LitElement implements Layer {
+  public game: GameView;
+
+  private isVisible = false;
+  private isActive = false;
+  private progressRatio = 0;
+
+  createRenderRoot() {
+    this.style.position = "fixed";
+    this.style.top = "0";
+    this.style.left = "0";
+    this.style.width = "100%";
+    this.style.height = "7px";
+    this.style.zIndex = "1000";
+    this.style.pointerEvents = "none";
+    return this;
+  }
+
+  init() {
+    this.isVisible = true;
+  }
+
+  tick() {
+    if (!this.game || !this.isVisible) {
+      return;
+    }
+
+    const showTeamOwnershipBar =
+      this.game.config().gameConfig().gameMode === GameMode.Team &&
+      !this.game.inSpawnPhase();
+
+    this.style.top = showTeamOwnershipBar ? "7px" : "0px";
+
+    const immunityDuration = this.game.config().spawnImmunityDuration();
+    const spawnPhaseTurns = this.game.config().numSpawnPhaseTurns();
+
+    if (immunityDuration <= 5 * 10 || this.game.inSpawnPhase()) {
+      this.setInactive();
+      return;
+    }
+
+    const immunityEnd = spawnPhaseTurns + immunityDuration;
+    const ticks = this.game.ticks();
+
+    if (ticks >= immunityEnd || ticks < spawnPhaseTurns) {
+      this.setInactive();
+      return;
+    }
+
+    const elapsedTicks = Math.max(0, ticks - spawnPhaseTurns);
+    this.progressRatio = Math.min(
+      1,
+      Math.max(0, elapsedTicks / immunityDuration),
+    );
+    this.isActive = true;
+    this.requestUpdate();
+  }
+
+  private setInactive() {
+    if (this.isActive) {
+      this.isActive = false;
+      this.requestUpdate();
+    }
+  }
+
+  shouldTransform(): boolean {
+    return false;
+  }
+
+  render() {
+    if (!this.isVisible || !this.isActive) {
+      return html``;
+    }
+
+    const widthPercent = this.progressRatio * 100;
+
+    return html`
+      <div class="w-full h-full flex z-[999]">
+        <div
+          class="h-full transition-all duration-100 ease-in-out"
+          style="width: ${widthPercent}%; background-color: rgba(255, 165, 0, 0.9);"
+        ></div>
+      </div>
+    `;
+  }
+}