Night Mode

.coderabbit.yaml

@@ -0,0 +1,2 @@
+reviews:
+  profile: assertive

resources/lang/en.json

@@ -312,6 +312,8 @@
     "tab_keybinds": "Keybinds",
     "dark_mode_label": "Dark Mode",
     "dark_mode_desc": "Toggle the site’s appearance between light and dark themes",
+    "night_mode_label": "Night Mode",
+    "night_mode_desc": "Puts the map into a night-time mode. Purely aesthetic.",
     "emojis_label": "Emojis",
     "emojis_desc": "Toggle whether emojis are shown in game",
     "alert_frame_label": "Alert Frame",

src/client/Main.ts

@@ -346,6 +346,12 @@ class Client {
       document.documentElement.classList.remove("dark");
     }
 
+    if (this.userSettings.nightMode()) {
+      document.documentElement.classList.add("night");
+    } else {
+      document.documentElement.classList.remove("night");
+    }
+
     // Attempt to join lobby
     this.handleHash();
 

src/client/UserSettingModal.ts

@@ -107,6 +107,30 @@ export class UserSettingModal extends LitElement {
     console.log("🌙 Dark Mode:", enabled ? "ON" : "OFF");
   }
 
+  toggleNightMode(e: CustomEvent<{ checked: boolean }>) {
+    const enabled = e.detail?.checked;
+
+    if (typeof enabled !== "boolean") {
+      console.warn("Unexpected toggle event payload", e);
+      return;
+    }
+    this.userSettings.set("settings.nightMode", enabled);
+
+    if (enabled) {
+      document.documentElement.classList.add("night");
+    } else {
+      document.documentElement.classList.remove("night");
+    }
+
+    this.dispatchEvent(
+      new CustomEvent("night-mode-changed", {
+        detail: { nightMode: enabled },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
   private toggleEmojis(e: CustomEvent<{ checked: boolean }>) {
     const enabled = e.detail?.checked;
     if (typeof enabled !== "boolean") return;
@@ -283,6 +307,16 @@ export class UserSettingModal extends LitElement {
           this.toggleDarkMode(e)}
       ></setting-toggle>
 
+      <!-- 🌙 Night Mode -->
+      <setting-toggle
+        label="${translateText("user_setting.night_mode_label")}"
+        description="${translateText("user_setting.night_mode_desc")}"
+        id="night-mode-toggle"
+        .checked=${this.userSettings.nightMode()}
+        @change=${(e: CustomEvent<{ checked: boolean }>) =>
+          this.toggleNightMode(e)}
+      ></setting-toggle>
+
       <!-- 😊 Emojis -->
       <setting-toggle
         label="${translateText("user_setting.emojis_label")}"

src/client/graphics/GameRenderer.ts

@@ -22,6 +22,7 @@ import { Leaderboard } from "./layers/Leaderboard";
 import { MainRadialMenu } from "./layers/MainRadialMenu";
 import { MultiTabModal } from "./layers/MultiTabModal";
 import { NameLayer } from "./layers/NameLayer";
+import { NightModeLayer } from "./layers/NightModeLayer";
 import { PerformanceOverlay } from "./layers/PerformanceOverlay";
 import { PlayerInfoOverlay } from "./layers/PlayerInfoOverlay";
 import { PlayerPanel } from "./layers/PlayerPanel";
@@ -244,6 +245,7 @@ export function createRenderer(
     new FxLayer(game),
     new UILayer(game, eventBus, transformHandler),
     new StructureIconsLayer(game, eventBus, uiState, transformHandler),
+    new NightModeLayer(game, transformHandler),
     new NameLayer(game, transformHandler, eventBus),
     eventsDisplay,
     chatDisplay,

src/client/graphics/layers/NightModeLayer.ts

@@ -0,0 +1,210 @@
+import { Cell, UnitType } from "../../../core/game/Game";
+import { GameView } from "../../../core/game/GameView";
+import { UserSettings } from "../../../core/game/UserSettings";
+import { TransformHandler } from "../TransformHandler";
+import { Layer } from "./Layer";
+
+export class NightModeLayer implements Layer {
+  private darkenColor: [number, number, number] = [0, 0, 0];
+  private darkenAlpha: number = 0.8;
+  private flashlightRadius: number = 50;
+  private userSettingsInstance = new UserSettings();
+  private mouseX: number = 0;
+  private mouseY: number = 0;
+  private maxCityLightLevel: number = 15;
+
+  private mouseMoveHandler = (e: MouseEvent) => this.handleMouseMove(e);
+
+  private handleMouseMove(event: MouseEvent) {
+    const rect = this.transformHandler.boundingRect();
+    this.mouseX = event.clientX - rect.left;
+    this.mouseY = event.clientY - rect.top;
+  }
+
+  init(): void {}
+  tick(): void {}
+  redraw(): void {}
+
+  constructor(
+    private game: GameView | null,
+    private transformHandler: TransformHandler,
+  ) {
+    document.addEventListener("mousemove", this.mouseMoveHandler);
+  }
+
+  // New method to set game reference after construction
+
+  renderLayer(context: CanvasRenderingContext2D): void {
+    if (!this.userSettingsInstance.nightMode()) return;
+
+    const width = this.transformHandler.width();
+    const height = this.transformHandler.boundingRect().height;
+    const cellSize = this.transformHandler.scale;
+
+    // Fill the entire screen with dark
+    context.fillStyle = `rgba(${this.darkenColor[0]}, ${this.darkenColor[1]}, ${this.darkenColor[2]}, ${this.darkenAlpha})`;
+    context.fillRect(0, 0, width, height);
+
+    // ===== NEW: Render city lights =====
+    if (this.game) {
+      this.renderCityLights(context, cellSize);
+    }
+
+    // Render flashlight effect around mouse
+    this.renderFlashlight(context, width, height, cellSize);
+  }
+
+  /**
+   * Renders illumination for all cities on the map.
+   * Creates a glow effect similar to satellite images of Earth at night.
+   */
+
+  private glowBitmaps: Map<number, ImageBitmap> = new Map();
+  //lazy generator & cache for little lag
+  private async getGlowBitmap(
+    level: number,
+    cellSize: number,
+  ): Promise<ImageBitmap> {
+    const cappedLevel = this.maxCityLightLevel;
+
+    // Check cache first
+    const cached = this.glowBitmaps.get(cappedLevel);
+    if (cached) return cached;
+
+    // Not in cache → generate, store, and return
+    const bitmap = await this.createGlowBitmap(cappedLevel, cellSize);
+    this.glowBitmaps.set(cappedLevel, bitmap);
+
+    return bitmap;
+  }
+
+  private async createGlowBitmap(
+    level: number,
+    cellSize: number,
+  ): Promise<ImageBitmap> {
+    const lightRadius = (10 + level * 2) * cellSize;
+    const size = lightRadius * 2;
+
+    // Use OffscreenCanvas for faster bitmap creation
+    const offscreen = new OffscreenCanvas(size, size);
+    const ctx = offscreen.getContext("2d")!;
+
+    // Glow gradient (you can customize color stops here)
+    const gradient = ctx.createRadialGradient(
+      lightRadius,
+      lightRadius,
+      0,
+      lightRadius,
+      lightRadius,
+      lightRadius,
+    );
+    gradient.addColorStop(0, "rgba(255, 230, 120, 0.8)");
+    gradient.addColorStop(0.4, "rgba(255, 180, 80, 0.4)");
+    gradient.addColorStop(1, "rgba(255, 140, 40, 0)");
+
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.arc(lightRadius, lightRadius, lightRadius, 0, Math.PI * 2);
+    ctx.fill();
+
+    return await createImageBitmap(offscreen);
+  }
+
+  private renderCityLights(
+    context: CanvasRenderingContext2D,
+    cellSize: number,
+  ): void {
+    // Get all cities in the game
+    const cities = this.game!.units(UnitType.City);
+
+    for (const city of cities) {
+      // Get city position
+      const tileRef = city.tile();
+      const cityX = this.game!.x(tileRef);
+      const cityY = this.game!.y(tileRef);
+
+      // Convert tile coordinates to screen coordinates
+      const screenPos = this.transformHandler.worldToScreenCoordinates(
+        new Cell(cityX, cityY),
+      );
+      const screenX = screenPos.x;
+      const screenY = screenPos.y;
+
+      // Get city level for scaling the light effect
+      const cityLevel = city.level();
+
+      // Render city glow - you can customize this pattern
+      this.renderCityGlow(context, screenX, screenY, cellSize, cityLevel);
+    }
+  }
+
+  /**
+   * Renders a glow effect for a single city.
+   * Customize this method to achieve your desired lighting pattern.
+   */
+  private async renderCityGlow(
+    context: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    cellSize: number,
+    level: number,
+  ): Promise<void> {
+    const glow = await this.getGlowBitmap(level, cellSize);
+
+    // Compute radius for positioning (still capped)
+    const cappedLevel = this.maxCityLightLevel;
+    const radius = (10 + cappedLevel * 2) * cellSize;
+
+    context.drawImage(glow, x - radius, y - radius);
+  }
+
+  /**
+   * Renders the flashlight effect around the mouse cursor.
+   * Extracted from original renderLayer for better organization.
+   */
+  private renderFlashlight(
+    context: CanvasRenderingContext2D,
+    width: number,
+    height: number,
+    cellSize: number,
+  ): void {
+    const startX =
+      Math.floor(
+        Math.max(this.mouseX - this.flashlightRadius * cellSize, 0) / cellSize,
+      ) * cellSize;
+    const endX =
+      Math.ceil(
+        Math.min(this.mouseX + this.flashlightRadius * cellSize, width) /
+          cellSize,
+      ) * cellSize;
+
+    const startY =
+      Math.floor(
+        Math.max(this.mouseY - this.flashlightRadius * cellSize, 0) / cellSize,
+      ) * cellSize;
+    const endY =
+      Math.ceil(
+        Math.min(this.mouseY + this.flashlightRadius * cellSize, height) /
+          cellSize,
+      ) * cellSize;
+
+    for (let y = startY; y < endY; y += cellSize) {
+      for (let x = startX; x < endX; x += cellSize) {
+        const dist = Math.hypot(
+          (this.mouseX - (x + cellSize / 2)) / cellSize,
+          (this.mouseY - (y + cellSize / 2)) / cellSize,
+        );
+
+        const brightness = Math.max(0, 1 - dist / this.flashlightRadius);
+
+        if (brightness > 0) {
+          context.fillStyle = `rgba(200,200,130,${(this.darkenAlpha / 2) * brightness})`;
+          context.fillRect(x, y, cellSize, cellSize);
+        }
+      }
+    }
+  }
+  destroy?(): void {
+    document.removeEventListener("mousemove", this.mouseMoveHandler);
+  }
+}

src/client/graphics/layers/SettingsModal.ts

@@ -6,6 +6,7 @@ import emojiIcon from "../../../../resources/images/EmojiIconWhite.svg";
 import exitIcon from "../../../../resources/images/ExitIconWhite.svg";
 import explosionIcon from "../../../../resources/images/ExplosionIconWhite.svg";
 import mouseIcon from "../../../../resources/images/MouseIconWhite.svg";
+import nightModeIcon from "../../../../resources/images/NightModeIconWhite.svg";
 import ninjaIcon from "../../../../resources/images/NinjaIconWhite.svg";
 import settingsIcon from "../../../../resources/images/SettingIconWhite.svg";
 import treeIcon from "../../../../resources/images/TreeIconWhite.svg";
@@ -136,6 +137,12 @@ export class SettingsModal extends LitElement implements Layer {
     this.requestUpdate();
   }
 
+  private onToggleNightModeButtonClick() {
+    this.userSettings.toggleNightMode();
+    this.eventBus.emit(new RefreshGraphicsEvent());
+    this.requestUpdate();
+  }
+
   private onToggleRandomNameModeButtonClick() {
     this.userSettings.toggleRandomName();
     this.requestUpdate();
@@ -321,6 +328,31 @@ export class SettingsModal extends LitElement implements Layer {
               </div>
             </button>
 
+            <button
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              @click="${this.onToggleNightModeButtonClick}"
+            >
+              <img
+                src=${nightModeIcon}
+                alt="nightModeIcon"
+                width="20"
+                height="20"
+              />
+              <div class="flex-1">
+                <div class="font-medium">
+                  ${translateText("user_setting.night_mode_label")}
+                </div>
+                <div class="text-sm text-slate-400">
+                  ${translateText("user_setting.night_mode_desc")}
+                </div>
+              </div>
+              <div class="text-sm text-slate-400">
+                ${this.userSettings.nightMode()
+                  ? translateText("user_setting.on")
+                  : translateText("user_setting.off")}
+              </div>
+            </button>
+
             <button
               class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
               @click="${this.onToggleSpecialEffectsButtonClick}"

src/core/game/UserSettings.ts

@@ -65,6 +65,10 @@ export class UserSettings {
     return this.get("settings.darkMode", false);
   }
 
+  nightMode() {
+    return this.get("settings.nightMode", false);
+  }
+
   leftClickOpensMenu() {
     return this.get("settings.leftClickOpensMenu", false);
   }
@@ -128,6 +132,15 @@ export class UserSettings {
     }
   }
 
+  toggleNightMode() {
+    this.set("settings.nightMode", !this.nightMode());
+    if (this.nightMode()) {
+      document.documentElement.classList.add("night");
+    } else {
+      document.documentElement.classList.remove("night");
+    }
+  }
+
   // For development only. Used for testing patterns, set in the console manually.
   getDevOnlyPattern(): PlayerPattern | undefined {
     const data = localStorage.getItem("dev-pattern") ?? undefined;