Merge pull request #50 from NewHappyRabbit/darkmode

Added dark mode

src/client/graphics/GameRenderer.ts

@@ -118,7 +118,7 @@ export function createRenderer(
     new TerritoryLayer(game, eventBus),
     new StructureLayer(game, eventBus),
     new UnitLayer(game, eventBus, clientID),
-    new NameLayer(game, game.config().theme(), transformHandler, clientID),
+    new NameLayer(game, transformHandler, clientID),
     eventsDisplay,
     new RadialMenu(
       eventBus,

src/client/graphics/layers/Leaderboard.ts

@@ -114,7 +114,7 @@ export class Leaderboard extends LitElement implements Layer {
       top: 10px;
       left: 10px;
       z-index: 9999;
-      background-color: rgba(30, 30, 30, 0.7);
+      background-color: rgb(31 41 55 / 0.7);
       padding: 10px;
       box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
       border-radius: 10px;
@@ -136,7 +136,7 @@ export class Leaderboard extends LitElement implements Layer {
       color: white;
     }
     th {
-      background-color: rgba(44, 44, 44, 0.5);
+      background-color: rgb(31 41 55 / 0.5);
       color: white;
     }
     .myPlayer {
@@ -147,7 +147,7 @@ export class Leaderboard extends LitElement implements Layer {
       font-size: 1em;
     }
     tr:nth-child(even) {
-      background-color: rgba(44, 44, 44, 0.5);
+      background-color: rgb(31 41 55 / 0.5);
     }
     tbody tr {
       cursor: pointer;

src/client/graphics/layers/NameLayer.ts

@@ -26,6 +26,7 @@ class RenderInfo {
     public lastRenderCalc: number,
     public location: Cell,
     public fontSize: number,
+    public fontColor: string,
     public element: HTMLElement,
   ) {}
 }
@@ -45,10 +46,10 @@ export class NameLayer implements Layer {
   private container: HTMLDivElement;
   private myPlayer: PlayerView | null = null;
   private firstPlace: PlayerView | null = null;
+  private theme: Theme = this.game.config().theme();
 
   constructor(
     private game: GameView,
-    private theme: Theme,
     private transformHandler: TransformHandler,
     private clientID: ClientID,
   ) {
@@ -71,6 +72,10 @@ export class NameLayer implements Layer {
     return false;
   }
 
+  redraw() {
+    this.theme = this.game.config().theme();
+  }
+
   public init() {
     this.canvas = createCanvas();
     window.addEventListener("resize", () => this.resizeCanvas());
@@ -106,6 +111,7 @@ export class NameLayer implements Layer {
               0,
               null,
               0,
+              "",
               this.createPlayerElement(player),
             ),
           );
@@ -149,12 +155,10 @@ export class NameLayer implements Layer {
     element.style.alignItems = "center";
     element.style.gap = "0px";
 
-    const textColor = player.type() == PlayerType.Human ? "#000000" : "#4D4D4D";
-
     const nameDiv = document.createElement("div");
     nameDiv.classList.add("player-name");
     nameDiv.innerHTML = player.name();
-    nameDiv.style.color = textColor;
+    nameDiv.style.color = this.theme.textColor(player.info());
     nameDiv.style.fontFamily = this.theme.font();
     nameDiv.style.whiteSpace = "nowrap";
     nameDiv.style.overflow = "hidden";
@@ -178,7 +182,7 @@ export class NameLayer implements Layer {
     const troopsDiv = document.createElement("div");
     troopsDiv.classList.add("player-troops");
     troopsDiv.textContent = renderTroops(player.troops());
-    troopsDiv.style.color = textColor;
+    troopsDiv.style.color = this.theme.textColor(player.info());
     troopsDiv.style.fontFamily = this.theme.font();
     troopsDiv.style.zIndex = "3";
     troopsDiv.style.marginTop = "-5%";
@@ -219,6 +223,7 @@ export class NameLayer implements Layer {
     // Calculate base size and scale
     const baseSize = Math.max(1, Math.floor(render.player.nameLocation().size));
     render.fontSize = Math.max(4, Math.floor(baseSize * 0.4));
+    render.fontColor = this.theme.textColor(render.player.info());
 
     // Screen space calculations
     const size = this.transformHandler.scale * baseSize;
@@ -243,7 +248,9 @@ export class NameLayer implements Layer {
       ".player-troops",
     ) as HTMLDivElement;
     nameDiv.style.fontSize = `${render.fontSize}px`;
+    nameDiv.style.color = render.fontColor;
     troopsDiv.style.fontSize = `${render.fontSize}px`;
+    troopsDiv.style.color = render.fontColor;
     troopsDiv.textContent = renderTroops(render.player.troops());
 
     // Handle icons

src/client/graphics/layers/OptionsMenu.ts

@@ -7,6 +7,7 @@ import { GameView } from "../../../core/game/GameView";
 import { Layer } from "./Layer";
 import { GameUpdateType } from "../../../core/game/GameUpdates";
 import { UserSettings } from "../../../core/game/UserSettings";
+import { RefreshGraphicsEvent } from "../../InputHandler";
 
 const button = ({
   classes = "",
@@ -83,6 +84,7 @@ export class OptionsMenu extends LitElement implements Layer {
   private onToggleDarkModeButtonClick() {
     this.userSettings.toggleDarkMode();
     this.requestUpdate();
+    this.eventBus.emit(new RefreshGraphicsEvent());
   }
 
   init() {
@@ -156,11 +158,11 @@ export class OptionsMenu extends LitElement implements Layer {
             title: "Toggle Emojis",
             children: "🙂: " + (this.userSettings.emojis() ? "On" : "Off"),
           })}
-          <!-- ${button({
+          ${button({
             onClick: this.onToggleDarkModeButtonClick,
             title: "Dark Mode",
             children: "🌙: " + (this.userSettings.darkMode() ? "On" : "Off"),
-          })} -->
+          })}
         </div>
       </div>
     `;

src/client/graphics/layers/TerrainLayer.ts

@@ -1,16 +1,22 @@
 import { Layer } from "./Layer";
 import { GameView } from "../../../core/game/GameView";
+import { Theme } from "../../../core/configuration/Config";
 
 export class TerrainLayer implements Layer {
   private canvas: HTMLCanvasElement;
   private context: CanvasRenderingContext2D;
   private imageData: ImageData;
+  private theme: Theme;
 
   constructor(private game: GameView) {}
   shouldTransform(): boolean {
     return true;
   }
-  tick() {}
+  tick() {
+    if (this.game.config().theme() !== this.theme) {
+      this.redraw();
+    }
+  }
 
   init() {
     console.log("redrew terrain layer");
@@ -34,9 +40,9 @@ export class TerrainLayer implements Layer {
   }
 
   initImageData() {
-    const theme = this.game.config().theme();
+    this.theme = this.game.config().theme();
     this.game.forEachTile((tile) => {
-      let terrainColor = theme.terrainColor(this.game, tile);
+      let terrainColor = this.theme.terrainColor(this.game, tile);
       // TODO: isn'te tileref and index the same?
       const index = this.game.y(tile) * this.game.width() + this.game.x(tile);
       const offset = index * 4;