-
+
diff --git a/src/client/styles.css b/src/client/styles.css
index b5c61c956..f30f37b81 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -1,3 +1,22 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+/* Add custom scrollbar styles */
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.3);
+}
diff --git a/src/core/configuration/Config.ts b/src/core/configuration/Config.ts
index 584acb147..a5e2fa9b1 100644
--- a/src/core/configuration/Config.ts
+++ b/src/core/configuration/Config.ts
@@ -134,6 +134,7 @@ export interface Theme {
backgroundColor(): Colord;
falloutColor(): Colord;
font(): string;
+ textColor(playerInfo: PlayerInfo): string;
// unit color for alternate view
selfColor(): Colord;
allyColor(): Colord;
diff --git a/src/core/configuration/DefaultConfig.ts b/src/core/configuration/DefaultConfig.ts
index ac5cbed7b..dd28de5bf 100644
--- a/src/core/configuration/DefaultConfig.ts
+++ b/src/core/configuration/DefaultConfig.ts
@@ -20,7 +20,7 @@ import { UserSettings } from "../game/UserSettings";
import { GameConfig } from "../Schemas";
import { assertNever, within } from "../Util";
import { Config, GameEnv, ServerConfig, Theme } from "./Config";
-import { pastelTheme } from "./PastelTheme";
+import { pastelTheme, pastelThemeDark } from "./PastelTheme";
export abstract class DefaultServerConfig implements ServerConfig {
abstract env(): GameEnv;
@@ -245,7 +245,7 @@ export class DefaultConfig implements Config {
return 400;
}
theme(): Theme {
- return pastelTheme;
+ return this.userSettings().darkMode() ? pastelThemeDark : pastelTheme;
}
attackLogic(
diff --git a/src/core/configuration/PastelTheme.ts b/src/core/configuration/PastelTheme.ts
index e299f637f..414c7ba28 100644
--- a/src/core/configuration/PastelTheme.ts
+++ b/src/core/configuration/PastelTheme.ts
@@ -11,6 +11,7 @@ import { time } from "console";
import { PseudoRandom } from "../PseudoRandom";
import { simpleHash } from "../Util";
import { GameMap, TileRef } from "../game/GameMap";
+import { PlayerView } from "../game/GameView";
export const pastelTheme = new (class implements Theme {
private rand = new PseudoRandom(123);
@@ -251,6 +252,10 @@ export const pastelTheme = new (class implements Theme {
];
}
+ textColor(playerInfo: PlayerInfo): string {
+ return playerInfo.playerType == PlayerType.Human ? "#000000" : "#4D4D4D";
+ }
+
borderColor(playerInfo: PlayerInfo): Colord {
const tc = this.territoryColor(playerInfo).rgba;
return colord({
@@ -335,3 +340,331 @@ export const pastelTheme = new (class implements Theme {
return this._spawnHighlightColor;
}
})();
+
+export const pastelThemeDark = new (class implements Theme {
+ private rand = new PseudoRandom(123);
+
+ private background = colord({ r: 0, g: 0, b: 0 });
+ private land = colord({ r: 194, g: 193, b: 148 });
+ private shore = colord({ r: 134, g: 133, b: 88 });
+ private falloutColors = [
+ colord({ r: 120, g: 255, b: 71 }), // Original color
+ colord({ r: 130, g: 255, b: 85 }), // Slightly lighter
+ colord({ r: 110, g: 245, b: 65 }), // Slightly darker
+ colord({ r: 125, g: 255, b: 75 }), // Warmer tint
+ colord({ r: 115, g: 250, b: 68 }), // Cooler tint
+ ];
+ private water = colord({ r: 14, g: 11, b: 30 });
+ private shorelineWater = colord({ r: 50, g: 50, b: 50 });
+
+ private territoryColors: Colord[] = [
+ colord({ r: 230, g: 100, b: 100 }), // Bright Red
+ colord({ r: 100, g: 180, b: 230 }), // Sky Blue
+ colord({ r: 230, g: 180, b: 80 }), // Golden Yellow
+ colord({ r: 180, g: 100, b: 230 }), // Purple
+ colord({ r: 80, g: 200, b: 120 }), // Emerald Green
+ colord({ r: 230, g: 130, b: 180 }), // Pink
+ colord({ r: 100, g: 160, b: 80 }), // Olive Green
+ colord({ r: 230, g: 150, b: 100 }), // Peach
+ colord({ r: 80, g: 130, b: 190 }), // Navy Blue
+ colord({ r: 210, g: 210, b: 100 }), // Lime Yellow
+ colord({ r: 190, g: 100, b: 130 }), // Maroon
+ colord({ r: 100, g: 210, b: 210 }), // Turquoise
+ colord({ r: 210, g: 140, b: 80 }), // Light Orange
+ colord({ r: 150, g: 110, b: 190 }), // Lavender
+ colord({ r: 180, g: 210, b: 120 }), // Light Green
+ colord({ r: 210, g: 100, b: 160 }), // Hot Pink
+ colord({ r: 100, g: 140, b: 110 }), // Sea Green
+ colord({ r: 230, g: 180, b: 180 }), // Light Pink
+ colord({ r: 120, g: 120, b: 190 }), // Periwinkle
+ colord({ r: 190, g: 170, b: 100 }), // Sand
+ colord({ r: 100, g: 180, b: 160 }), // Aquamarine
+ colord({ r: 210, g: 160, b: 200 }), // Orchid
+ colord({ r: 170, g: 190, b: 100 }), // Yellow Green
+ colord({ r: 100, g: 130, b: 150 }), // Steel Blue
+ colord({ r: 230, g: 140, b: 140 }), // Salmon
+ colord({ r: 140, g: 180, b: 220 }), // Light Blue
+ colord({ r: 200, g: 160, b: 110 }), // Tan
+ colord({ r: 180, g: 130, b: 180 }), // Plum
+ colord({ r: 130, g: 200, b: 130 }), // Light Sea Green
+ colord({ r: 220, g: 120, b: 120 }), // Coral
+ colord({ r: 120, g: 160, b: 200 }), // Cornflower Blue
+ colord({ r: 200, g: 200, b: 140 }), // Khaki
+ colord({ r: 160, g: 120, b: 160 }), // Purple Gray
+ colord({ r: 140, g: 180, b: 140 }), // Dark Sea Green
+ colord({ r: 200, g: 130, b: 110 }), // Dark Salmon
+ colord({ r: 130, g: 170, b: 190 }), // Cadet Blue
+ colord({ r: 190, g: 180, b: 160 }), // Tan Gray
+ colord({ r: 170, g: 140, b: 190 }), // Medium Purple
+ colord({ r: 160, g: 190, b: 160 }), // Pale Green
+ colord({ r: 190, g: 150, b: 130 }), // Rosy Brown
+ colord({ r: 140, g: 150, b: 180 }), // Light Slate Gray
+ colord({ r: 180, g: 170, b: 140 }), // Dark Khaki
+ colord({ r: 150, g: 130, b: 150 }), // Thistle
+ colord({ r: 170, g: 190, b: 180 }), // Pale Blue Green
+ colord({ r: 190, g: 140, b: 150 }), // Puce
+ colord({ r: 130, g: 180, b: 170 }), // Medium Aquamarine
+ colord({ r: 180, g: 160, b: 180 }), // Mauve
+ colord({ r: 160, g: 180, b: 140 }), // Dark Olive Green
+ colord({ r: 170, g: 150, b: 170 }), // Dusty Rose
+ colord({ r: 100, g: 180, b: 230 }), // Sky Blue
+ colord({ r: 230, g: 180, b: 80 }), // Golden Yellow
+ colord({ r: 180, g: 100, b: 230 }), // Purple
+ colord({ r: 80, g: 200, b: 120 }), // Emerald Green
+ colord({ r: 230, g: 130, b: 180 }), // Pink
+ colord({ r: 100, g: 160, b: 80 }), // Olive Green
+ colord({ r: 230, g: 150, b: 100 }), // Peach
+ colord({ r: 80, g: 130, b: 190 }), // Navy Blue
+ colord({ r: 210, g: 210, b: 100 }), // Lime Yellow
+ colord({ r: 190, g: 100, b: 130 }), // Maroon
+ colord({ r: 100, g: 210, b: 210 }), // Turquoise
+ colord({ r: 210, g: 140, b: 80 }), // Light Orange
+ colord({ r: 150, g: 110, b: 190 }), // Lavender
+ colord({ r: 180, g: 210, b: 120 }), // Light Green
+ colord({ r: 210, g: 100, b: 160 }), // Hot Pink
+ colord({ r: 100, g: 140, b: 110 }), // Sea Green
+ colord({ r: 230, g: 180, b: 180 }), // Light Pink
+ colord({ r: 120, g: 120, b: 190 }), // Periwinkle
+ colord({ r: 190, g: 170, b: 100 }), // Sand
+ colord({ r: 100, g: 180, b: 160 }), // Aquamarine
+ colord({ r: 210, g: 160, b: 200 }), // Orchid
+ colord({ r: 170, g: 190, b: 100 }), // Yellow Green
+ colord({ r: 100, g: 130, b: 150 }), // Steel Blue
+ colord({ r: 230, g: 140, b: 140 }), // Salmon
+ colord({ r: 140, g: 180, b: 220 }), // Light Blue
+ colord({ r: 200, g: 160, b: 110 }), // Tan
+ colord({ r: 180, g: 130, b: 180 }), // Plum
+ colord({ r: 130, g: 200, b: 130 }), // Light Sea Green
+ colord({ r: 220, g: 120, b: 120 }), // Coral
+ colord({ r: 120, g: 160, b: 200 }), // Cornflower Blue
+ colord({ r: 200, g: 200, b: 140 }), // Khaki
+ colord({ r: 160, g: 120, b: 160 }), // Purple Gray
+ colord({ r: 140, g: 180, b: 140 }), // Dark Sea Green
+ colord({ r: 200, g: 130, b: 110 }), // Dark Salmon
+ colord({ r: 130, g: 170, b: 190 }), // Cadet Blue
+ colord({ r: 190, g: 180, b: 160 }), // Tan Gray
+ colord({ r: 170, g: 140, b: 190 }), // Medium Purple
+ colord({ r: 160, g: 190, b: 160 }), // Pale Green
+ colord({ r: 190, g: 150, b: 130 }), // Rosy Brown
+ colord({ r: 140, g: 150, b: 180 }), // Light Slate Gray
+ colord({ r: 180, g: 170, b: 140 }), // Dark Khaki
+ colord({ r: 150, g: 130, b: 150 }), // Thistle
+ colord({ r: 170, g: 190, b: 180 }), // Pale Blue Green
+ colord({ r: 190, g: 140, b: 150 }), // Puce
+ colord({ r: 130, g: 180, b: 170 }), // Medium Aquamarine
+ colord({ r: 180, g: 160, b: 180 }), // Mauve
+ colord({ r: 160, g: 180, b: 140 }), // Dark Olive Green
+ colord({ r: 170, g: 150, b: 170 }), // Dusty Rose
+ ];
+
+ private humanColors: Colord[] = [
+ // Original set
+ colord({ r: 235, g: 75, b: 75 }), // Bright Red
+ colord({ r: 67, g: 190, b: 84 }), // Fresh Green
+ colord({ r: 59, g: 130, b: 246 }), // Royal Blue
+ colord({ r: 245, g: 158, b: 11 }), // Amber
+ colord({ r: 236, g: 72, b: 153 }), // Deep Pink
+ colord({ r: 48, g: 178, b: 180 }), // Teal
+ colord({ r: 168, g: 85, b: 247 }), // Vibrant Purple
+ colord({ r: 251, g: 191, b: 36 }), // Marigold
+ colord({ r: 74, g: 222, b: 128 }), // Mint
+ colord({ r: 239, g: 68, b: 68 }), // Crimson
+ colord({ r: 34, g: 197, b: 94 }), // Emerald
+ colord({ r: 96, g: 165, b: 250 }), // Sky Blue
+ colord({ r: 249, g: 115, b: 22 }), // Tangerine
+ colord({ r: 192, g: 132, b: 252 }), // Lavender
+ colord({ r: 45, g: 212, b: 191 }), // Turquoise
+ colord({ r: 244, g: 114, b: 182 }), // Rose
+ colord({ r: 132, g: 204, b: 22 }), // Lime
+ colord({ r: 56, g: 189, b: 248 }), // Light Blue
+ colord({ r: 234, g: 179, b: 8 }), // Sunflower
+ colord({ r: 217, g: 70, b: 239 }), // Fuchsia
+ colord({ r: 16, g: 185, b: 129 }), // Sea Green
+ colord({ r: 251, g: 146, b: 60 }), // Light Orange
+ colord({ r: 147, g: 51, b: 234 }), // Bright Purple
+ colord({ r: 79, g: 70, b: 229 }), // Indigo
+ colord({ r: 245, g: 101, b: 101 }), // Coral
+ colord({ r: 134, g: 239, b: 172 }), // Light Green
+ colord({ r: 59, g: 130, b: 246 }), // Cerulean
+ colord({ r: 253, g: 164, b: 175 }), // Salmon Pink
+ colord({ r: 147, g: 197, b: 253 }), // Powder Blue
+ colord({ r: 252, g: 211, b: 77 }), // Golden
+ colord({ r: 190, g: 92, b: 251 }), // Amethyst
+ colord({ r: 82, g: 183, b: 136 }), // Jade
+ colord({ r: 248, g: 113, b: 113 }), // Warm Red
+ colord({ r: 99, g: 202, b: 253 }), // Azure
+ colord({ r: 240, g: 171, b: 252 }), // Orchid
+ colord({ r: 163, g: 230, b: 53 }), // Yellow Green
+ colord({ r: 234, g: 88, b: 12 }), // Burnt Orange
+ colord({ r: 125, g: 211, b: 252 }), // Crystal Blue
+ colord({ r: 251, g: 113, b: 133 }), // Watermelon
+ colord({ r: 52, g: 211, b: 153 }), // Spearmint
+ colord({ r: 167, g: 139, b: 250 }), // Periwinkle
+ colord({ r: 245, g: 158, b: 11 }), // Honey
+ colord({ r: 110, g: 231, b: 183 }), // Seafoam
+ colord({ r: 233, g: 213, b: 255 }), // Light Lilac
+ colord({ r: 202, g: 138, b: 4 }), // Rich Gold
+ colord({ r: 151, g: 255, b: 187 }), // Fresh Mint
+ colord({ r: 220, g: 38, b: 38 }), // Ruby
+ colord({ r: 124, g: 58, b: 237 }), // Royal Purple
+ colord({ r: 45, g: 212, b: 191 }), // Ocean
+ colord({ r: 252, g: 165, b: 165 }), // Peach
+
+ // Additional 50 colors
+ colord({ r: 179, g: 136, b: 255 }), // Light Purple
+ colord({ r: 133, g: 77, b: 14 }), // Chocolate
+ colord({ r: 52, g: 211, b: 153 }), // Aquamarine
+ colord({ r: 234, g: 179, b: 8 }), // Mustard
+ colord({ r: 236, g: 72, b: 153 }), // Hot Pink
+ colord({ r: 147, g: 197, b: 253 }), // Sky
+ colord({ r: 249, g: 115, b: 22 }), // Pumpkin
+ colord({ r: 167, g: 139, b: 250 }), // Iris
+ colord({ r: 16, g: 185, b: 129 }), // Pine
+ colord({ r: 251, g: 146, b: 60 }), // Mango
+ colord({ r: 192, g: 132, b: 252 }), // Wisteria
+ colord({ r: 79, g: 70, b: 229 }), // Sapphire
+ colord({ r: 245, g: 101, b: 101 }), // Salmon
+ colord({ r: 134, g: 239, b: 172 }), // Spring Green
+ colord({ r: 59, g: 130, b: 246 }), // Ocean Blue
+ colord({ r: 253, g: 164, b: 175 }), // Rose Gold
+ colord({ r: 16, g: 185, b: 129 }), // Forest
+ colord({ r: 252, g: 211, b: 77 }), // Sunshine
+ colord({ r: 190, g: 92, b: 251 }), // Grape
+ colord({ r: 82, g: 183, b: 136 }), // Eucalyptus
+ colord({ r: 248, g: 113, b: 113 }), // Cherry
+ colord({ r: 99, g: 202, b: 253 }), // Arctic
+ colord({ r: 240, g: 171, b: 252 }), // Lilac
+ colord({ r: 163, g: 230, b: 53 }), // Chartreuse
+ colord({ r: 234, g: 88, b: 12 }), // Rust
+ colord({ r: 125, g: 211, b: 252 }), // Ice Blue
+ colord({ r: 251, g: 113, b: 133 }), // Strawberry
+ colord({ r: 52, g: 211, b: 153 }), // Sage
+ colord({ r: 167, g: 139, b: 250 }), // Violet
+ colord({ r: 245, g: 158, b: 11 }), // Apricot
+ colord({ r: 110, g: 231, b: 183 }), // Mint Green
+ colord({ r: 233, g: 213, b: 255 }), // Thistle
+ colord({ r: 202, g: 138, b: 4 }), // Bronze
+ colord({ r: 151, g: 255, b: 187 }), // Pistachio
+ colord({ r: 220, g: 38, b: 38 }), // Fire Engine
+ colord({ r: 124, g: 58, b: 237 }), // Electric Purple
+ colord({ r: 45, g: 212, b: 191 }), // Caribbean
+ colord({ r: 252, g: 165, b: 165 }), // Melon
+ colord({ r: 168, g: 85, b: 247 }), // Byzantium
+ colord({ r: 74, g: 222, b: 128 }), // Kelly Green
+ colord({ r: 239, g: 68, b: 68 }), // Cardinal
+ colord({ r: 34, g: 197, b: 94 }), // Shamrock
+ colord({ r: 96, g: 165, b: 250 }), // Marina
+ colord({ r: 249, g: 115, b: 22 }), // Carrot
+ colord({ r: 192, g: 132, b: 252 }), // Heliotrope
+ colord({ r: 45, g: 212, b: 191 }), // Lagoon
+ colord({ r: 244, g: 114, b: 182 }), // Bubble Gum
+ colord({ r: 132, g: 204, b: 22 }), // Apple
+ colord({ r: 56, g: 189, b: 248 }), // Electric Blue
+ colord({ r: 234, g: 179, b: 8 }), // Daffodil
+ ];
+
+ private _selfColor = colord({ r: 0, g: 255, b: 0 });
+ private _allyColor = colord({ r: 255, g: 255, b: 0 });
+ private _enemyColor = colord({ r: 255, g: 0, b: 0 });
+
+ private _spawnHighlightColor = colord({ r: 255, g: 213, b: 79 });
+
+ territoryColor(playerInfo: PlayerInfo): Colord {
+ if (playerInfo.playerType == PlayerType.Human) {
+ return this.humanColors[
+ simpleHash(playerInfo.name) % this.humanColors.length
+ ];
+ }
+ return this.territoryColors[
+ simpleHash(playerInfo.name) % this.territoryColors.length
+ ];
+ }
+
+ textColor(playerInfo: PlayerInfo): string {
+ return playerInfo.playerType == PlayerType.Human ? "#ffffff" : "#dbdbdb";
+ }
+
+ borderColor(playerInfo: PlayerInfo): Colord {
+ const tc = this.territoryColor(playerInfo).rgba;
+ return colord({
+ r: Math.max(tc.r - 40, 0),
+ g: Math.max(tc.g - 40, 0),
+ b: Math.max(tc.b - 40, 0),
+ });
+ }
+ defendedBorderColor(playerInfo: PlayerInfo): Colord {
+ const bc = this.borderColor(playerInfo).rgba;
+ return colord({
+ r: Math.max(bc.r - 40, 0),
+ g: Math.max(bc.g - 40, 0),
+ b: Math.max(bc.b - 40, 0),
+ });
+ }
+
+ terrainColor(gm: GameMap, tile: TileRef): Colord {
+ let mag = gm.magnitude(tile);
+ if (gm.isShore(tile)) {
+ return this.shore;
+ }
+ switch (gm.terrainType(tile)) {
+ case TerrainType.Ocean:
+ case TerrainType.Lake:
+ const w = this.water.rgba;
+ if (gm.isShoreline(tile) && gm.isWater(tile)) {
+ return this.shorelineWater;
+ }
+ if (gm.magnitude(tile) < 10) {
+ return colord({
+ r: Math.max(w.r - 10 + mag, 0),
+ g: Math.max(w.g - 10 + mag, 0),
+ b: Math.max(w.b - 10 + mag, 0),
+ });
+ }
+ return this.water;
+ case TerrainType.Plains:
+ return colord({
+ r: 140,
+ g: 170 - 2 * mag,
+ b: 88,
+ });
+ case TerrainType.Highland:
+ return colord({
+ r: 150 + 2 * mag,
+ g: 133 + 2 * mag,
+ b: 88 + 2 * mag,
+ });
+ case TerrainType.Mountain:
+ return colord({
+ r: 180 + mag / 2,
+ g: 180 + mag / 2,
+ b: 180 + mag / 2,
+ });
+ }
+ }
+
+ backgroundColor(): Colord {
+ return this.background;
+ }
+
+ falloutColor(): Colord {
+ return this.rand.randElement(this.falloutColors);
+ }
+
+ font(): string {
+ return "Overpass, sans-serif";
+ }
+
+ selfColor(): Colord {
+ return this._selfColor;
+ }
+ allyColor(): Colord {
+ return this._allyColor;
+ }
+ enemyColor(): Colord {
+ return this._enemyColor;
+ }
+
+ spawnHighlightColor(): Colord {
+ return this._spawnHighlightColor;
+ }
+})();
diff --git a/src/core/game/UserSettings.ts b/src/core/game/UserSettings.ts
index 5c53987ed..6feb6db59 100644
--- a/src/core/game/UserSettings.ts
+++ b/src/core/game/UserSettings.ts
@@ -10,6 +10,7 @@ export class UserSettings {
set(key: string, value: boolean) {
localStorage.setItem(key, value ? "true" : "false");
+ document.body.classList.toggle("dark");
}
emojis() {
diff --git a/tailwind.config.js b/tailwind.config.js
index dca884547..bc87f585b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,4 +6,5 @@ export default {
extend: {},
},
plugins: [],
+ darkMode: "class",
};
From a2fa30cee24a3d9ad3e8aaeb89e2ccda4a21e9f8 Mon Sep 17 00:00:00 2001
From: NewHappyRabbit <31893343+NewHappyRabbit@users.noreply.github.com>
Date: Thu, 20 Feb 2025 01:46:00 +0200
Subject: [PATCH 2/2] Applied comments
---
src/client/graphics/layers/NameLayer.ts | 10 +-
src/client/graphics/layers/OptionsMenu.ts | 2 +
src/core/configuration/DefaultConfig.ts | 3 +-
src/core/configuration/PastelTheme.ts | 328 ---------------------
src/core/configuration/PastelThemeDark.ts | 342 ++++++++++++++++++++++
5 files changed, 351 insertions(+), 334 deletions(-)
create mode 100644 src/core/configuration/PastelThemeDark.ts
diff --git a/src/client/graphics/layers/NameLayer.ts b/src/client/graphics/layers/NameLayer.ts
index f3e696a8d..751df44a5 100644
--- a/src/client/graphics/layers/NameLayer.ts
+++ b/src/client/graphics/layers/NameLayer.ts
@@ -46,14 +46,13 @@ export class NameLayer implements Layer {
private container: HTMLDivElement;
private myPlayer: PlayerView | null = null;
private firstPlace: PlayerView | null = null;
- private theme: Theme;
+ private theme: Theme = this.game.config().theme();
constructor(
private game: GameView,
private transformHandler: TransformHandler,
private clientID: ClientID,
) {
- this.theme = game.config().theme();
this.traitorIconImage = new Image();
this.traitorIconImage.src = traitorIcon;
this.allianceIconImage = new Image();
@@ -73,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());
@@ -98,9 +101,6 @@ export class NameLayer implements Layer {
this.firstPlace = sorted[0];
}
- if (this.theme !== this.game.config().theme()) {
- this.theme = this.game.config().theme();
- }
for (const player of this.game.playerViews()) {
if (player.isAlive()) {
if (!this.seenPlayers.has(player)) {
diff --git a/src/client/graphics/layers/OptionsMenu.ts b/src/client/graphics/layers/OptionsMenu.ts
index 24d5c5827..98816c34b 100644
--- a/src/client/graphics/layers/OptionsMenu.ts
+++ b/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() {
diff --git a/src/core/configuration/DefaultConfig.ts b/src/core/configuration/DefaultConfig.ts
index dd28de5bf..d5bea4a21 100644
--- a/src/core/configuration/DefaultConfig.ts
+++ b/src/core/configuration/DefaultConfig.ts
@@ -20,7 +20,8 @@ import { UserSettings } from "../game/UserSettings";
import { GameConfig } from "../Schemas";
import { assertNever, within } from "../Util";
import { Config, GameEnv, ServerConfig, Theme } from "./Config";
-import { pastelTheme, pastelThemeDark } from "./PastelTheme";
+import { pastelTheme } from "./PastelTheme";
+import { pastelThemeDark } from "./PastelThemeDark";
export abstract class DefaultServerConfig implements ServerConfig {
abstract env(): GameEnv;
diff --git a/src/core/configuration/PastelTheme.ts b/src/core/configuration/PastelTheme.ts
index 414c7ba28..7a900da16 100644
--- a/src/core/configuration/PastelTheme.ts
+++ b/src/core/configuration/PastelTheme.ts
@@ -340,331 +340,3 @@ export const pastelTheme = new (class implements Theme {
return this._spawnHighlightColor;
}
})();
-
-export const pastelThemeDark = new (class implements Theme {
- private rand = new PseudoRandom(123);
-
- private background = colord({ r: 0, g: 0, b: 0 });
- private land = colord({ r: 194, g: 193, b: 148 });
- private shore = colord({ r: 134, g: 133, b: 88 });
- private falloutColors = [
- colord({ r: 120, g: 255, b: 71 }), // Original color
- colord({ r: 130, g: 255, b: 85 }), // Slightly lighter
- colord({ r: 110, g: 245, b: 65 }), // Slightly darker
- colord({ r: 125, g: 255, b: 75 }), // Warmer tint
- colord({ r: 115, g: 250, b: 68 }), // Cooler tint
- ];
- private water = colord({ r: 14, g: 11, b: 30 });
- private shorelineWater = colord({ r: 50, g: 50, b: 50 });
-
- private territoryColors: Colord[] = [
- colord({ r: 230, g: 100, b: 100 }), // Bright Red
- colord({ r: 100, g: 180, b: 230 }), // Sky Blue
- colord({ r: 230, g: 180, b: 80 }), // Golden Yellow
- colord({ r: 180, g: 100, b: 230 }), // Purple
- colord({ r: 80, g: 200, b: 120 }), // Emerald Green
- colord({ r: 230, g: 130, b: 180 }), // Pink
- colord({ r: 100, g: 160, b: 80 }), // Olive Green
- colord({ r: 230, g: 150, b: 100 }), // Peach
- colord({ r: 80, g: 130, b: 190 }), // Navy Blue
- colord({ r: 210, g: 210, b: 100 }), // Lime Yellow
- colord({ r: 190, g: 100, b: 130 }), // Maroon
- colord({ r: 100, g: 210, b: 210 }), // Turquoise
- colord({ r: 210, g: 140, b: 80 }), // Light Orange
- colord({ r: 150, g: 110, b: 190 }), // Lavender
- colord({ r: 180, g: 210, b: 120 }), // Light Green
- colord({ r: 210, g: 100, b: 160 }), // Hot Pink
- colord({ r: 100, g: 140, b: 110 }), // Sea Green
- colord({ r: 230, g: 180, b: 180 }), // Light Pink
- colord({ r: 120, g: 120, b: 190 }), // Periwinkle
- colord({ r: 190, g: 170, b: 100 }), // Sand
- colord({ r: 100, g: 180, b: 160 }), // Aquamarine
- colord({ r: 210, g: 160, b: 200 }), // Orchid
- colord({ r: 170, g: 190, b: 100 }), // Yellow Green
- colord({ r: 100, g: 130, b: 150 }), // Steel Blue
- colord({ r: 230, g: 140, b: 140 }), // Salmon
- colord({ r: 140, g: 180, b: 220 }), // Light Blue
- colord({ r: 200, g: 160, b: 110 }), // Tan
- colord({ r: 180, g: 130, b: 180 }), // Plum
- colord({ r: 130, g: 200, b: 130 }), // Light Sea Green
- colord({ r: 220, g: 120, b: 120 }), // Coral
- colord({ r: 120, g: 160, b: 200 }), // Cornflower Blue
- colord({ r: 200, g: 200, b: 140 }), // Khaki
- colord({ r: 160, g: 120, b: 160 }), // Purple Gray
- colord({ r: 140, g: 180, b: 140 }), // Dark Sea Green
- colord({ r: 200, g: 130, b: 110 }), // Dark Salmon
- colord({ r: 130, g: 170, b: 190 }), // Cadet Blue
- colord({ r: 190, g: 180, b: 160 }), // Tan Gray
- colord({ r: 170, g: 140, b: 190 }), // Medium Purple
- colord({ r: 160, g: 190, b: 160 }), // Pale Green
- colord({ r: 190, g: 150, b: 130 }), // Rosy Brown
- colord({ r: 140, g: 150, b: 180 }), // Light Slate Gray
- colord({ r: 180, g: 170, b: 140 }), // Dark Khaki
- colord({ r: 150, g: 130, b: 150 }), // Thistle
- colord({ r: 170, g: 190, b: 180 }), // Pale Blue Green
- colord({ r: 190, g: 140, b: 150 }), // Puce
- colord({ r: 130, g: 180, b: 170 }), // Medium Aquamarine
- colord({ r: 180, g: 160, b: 180 }), // Mauve
- colord({ r: 160, g: 180, b: 140 }), // Dark Olive Green
- colord({ r: 170, g: 150, b: 170 }), // Dusty Rose
- colord({ r: 100, g: 180, b: 230 }), // Sky Blue
- colord({ r: 230, g: 180, b: 80 }), // Golden Yellow
- colord({ r: 180, g: 100, b: 230 }), // Purple
- colord({ r: 80, g: 200, b: 120 }), // Emerald Green
- colord({ r: 230, g: 130, b: 180 }), // Pink
- colord({ r: 100, g: 160, b: 80 }), // Olive Green
- colord({ r: 230, g: 150, b: 100 }), // Peach
- colord({ r: 80, g: 130, b: 190 }), // Navy Blue
- colord({ r: 210, g: 210, b: 100 }), // Lime Yellow
- colord({ r: 190, g: 100, b: 130 }), // Maroon
- colord({ r: 100, g: 210, b: 210 }), // Turquoise
- colord({ r: 210, g: 140, b: 80 }), // Light Orange
- colord({ r: 150, g: 110, b: 190 }), // Lavender
- colord({ r: 180, g: 210, b: 120 }), // Light Green
- colord({ r: 210, g: 100, b: 160 }), // Hot Pink
- colord({ r: 100, g: 140, b: 110 }), // Sea Green
- colord({ r: 230, g: 180, b: 180 }), // Light Pink
- colord({ r: 120, g: 120, b: 190 }), // Periwinkle
- colord({ r: 190, g: 170, b: 100 }), // Sand
- colord({ r: 100, g: 180, b: 160 }), // Aquamarine
- colord({ r: 210, g: 160, b: 200 }), // Orchid
- colord({ r: 170, g: 190, b: 100 }), // Yellow Green
- colord({ r: 100, g: 130, b: 150 }), // Steel Blue
- colord({ r: 230, g: 140, b: 140 }), // Salmon
- colord({ r: 140, g: 180, b: 220 }), // Light Blue
- colord({ r: 200, g: 160, b: 110 }), // Tan
- colord({ r: 180, g: 130, b: 180 }), // Plum
- colord({ r: 130, g: 200, b: 130 }), // Light Sea Green
- colord({ r: 220, g: 120, b: 120 }), // Coral
- colord({ r: 120, g: 160, b: 200 }), // Cornflower Blue
- colord({ r: 200, g: 200, b: 140 }), // Khaki
- colord({ r: 160, g: 120, b: 160 }), // Purple Gray
- colord({ r: 140, g: 180, b: 140 }), // Dark Sea Green
- colord({ r: 200, g: 130, b: 110 }), // Dark Salmon
- colord({ r: 130, g: 170, b: 190 }), // Cadet Blue
- colord({ r: 190, g: 180, b: 160 }), // Tan Gray
- colord({ r: 170, g: 140, b: 190 }), // Medium Purple
- colord({ r: 160, g: 190, b: 160 }), // Pale Green
- colord({ r: 190, g: 150, b: 130 }), // Rosy Brown
- colord({ r: 140, g: 150, b: 180 }), // Light Slate Gray
- colord({ r: 180, g: 170, b: 140 }), // Dark Khaki
- colord({ r: 150, g: 130, b: 150 }), // Thistle
- colord({ r: 170, g: 190, b: 180 }), // Pale Blue Green
- colord({ r: 190, g: 140, b: 150 }), // Puce
- colord({ r: 130, g: 180, b: 170 }), // Medium Aquamarine
- colord({ r: 180, g: 160, b: 180 }), // Mauve
- colord({ r: 160, g: 180, b: 140 }), // Dark Olive Green
- colord({ r: 170, g: 150, b: 170 }), // Dusty Rose
- ];
-
- private humanColors: Colord[] = [
- // Original set
- colord({ r: 235, g: 75, b: 75 }), // Bright Red
- colord({ r: 67, g: 190, b: 84 }), // Fresh Green
- colord({ r: 59, g: 130, b: 246 }), // Royal Blue
- colord({ r: 245, g: 158, b: 11 }), // Amber
- colord({ r: 236, g: 72, b: 153 }), // Deep Pink
- colord({ r: 48, g: 178, b: 180 }), // Teal
- colord({ r: 168, g: 85, b: 247 }), // Vibrant Purple
- colord({ r: 251, g: 191, b: 36 }), // Marigold
- colord({ r: 74, g: 222, b: 128 }), // Mint
- colord({ r: 239, g: 68, b: 68 }), // Crimson
- colord({ r: 34, g: 197, b: 94 }), // Emerald
- colord({ r: 96, g: 165, b: 250 }), // Sky Blue
- colord({ r: 249, g: 115, b: 22 }), // Tangerine
- colord({ r: 192, g: 132, b: 252 }), // Lavender
- colord({ r: 45, g: 212, b: 191 }), // Turquoise
- colord({ r: 244, g: 114, b: 182 }), // Rose
- colord({ r: 132, g: 204, b: 22 }), // Lime
- colord({ r: 56, g: 189, b: 248 }), // Light Blue
- colord({ r: 234, g: 179, b: 8 }), // Sunflower
- colord({ r: 217, g: 70, b: 239 }), // Fuchsia
- colord({ r: 16, g: 185, b: 129 }), // Sea Green
- colord({ r: 251, g: 146, b: 60 }), // Light Orange
- colord({ r: 147, g: 51, b: 234 }), // Bright Purple
- colord({ r: 79, g: 70, b: 229 }), // Indigo
- colord({ r: 245, g: 101, b: 101 }), // Coral
- colord({ r: 134, g: 239, b: 172 }), // Light Green
- colord({ r: 59, g: 130, b: 246 }), // Cerulean
- colord({ r: 253, g: 164, b: 175 }), // Salmon Pink
- colord({ r: 147, g: 197, b: 253 }), // Powder Blue
- colord({ r: 252, g: 211, b: 77 }), // Golden
- colord({ r: 190, g: 92, b: 251 }), // Amethyst
- colord({ r: 82, g: 183, b: 136 }), // Jade
- colord({ r: 248, g: 113, b: 113 }), // Warm Red
- colord({ r: 99, g: 202, b: 253 }), // Azure
- colord({ r: 240, g: 171, b: 252 }), // Orchid
- colord({ r: 163, g: 230, b: 53 }), // Yellow Green
- colord({ r: 234, g: 88, b: 12 }), // Burnt Orange
- colord({ r: 125, g: 211, b: 252 }), // Crystal Blue
- colord({ r: 251, g: 113, b: 133 }), // Watermelon
- colord({ r: 52, g: 211, b: 153 }), // Spearmint
- colord({ r: 167, g: 139, b: 250 }), // Periwinkle
- colord({ r: 245, g: 158, b: 11 }), // Honey
- colord({ r: 110, g: 231, b: 183 }), // Seafoam
- colord({ r: 233, g: 213, b: 255 }), // Light Lilac
- colord({ r: 202, g: 138, b: 4 }), // Rich Gold
- colord({ r: 151, g: 255, b: 187 }), // Fresh Mint
- colord({ r: 220, g: 38, b: 38 }), // Ruby
- colord({ r: 124, g: 58, b: 237 }), // Royal Purple
- colord({ r: 45, g: 212, b: 191 }), // Ocean
- colord({ r: 252, g: 165, b: 165 }), // Peach
-
- // Additional 50 colors
- colord({ r: 179, g: 136, b: 255 }), // Light Purple
- colord({ r: 133, g: 77, b: 14 }), // Chocolate
- colord({ r: 52, g: 211, b: 153 }), // Aquamarine
- colord({ r: 234, g: 179, b: 8 }), // Mustard
- colord({ r: 236, g: 72, b: 153 }), // Hot Pink
- colord({ r: 147, g: 197, b: 253 }), // Sky
- colord({ r: 249, g: 115, b: 22 }), // Pumpkin
- colord({ r: 167, g: 139, b: 250 }), // Iris
- colord({ r: 16, g: 185, b: 129 }), // Pine
- colord({ r: 251, g: 146, b: 60 }), // Mango
- colord({ r: 192, g: 132, b: 252 }), // Wisteria
- colord({ r: 79, g: 70, b: 229 }), // Sapphire
- colord({ r: 245, g: 101, b: 101 }), // Salmon
- colord({ r: 134, g: 239, b: 172 }), // Spring Green
- colord({ r: 59, g: 130, b: 246 }), // Ocean Blue
- colord({ r: 253, g: 164, b: 175 }), // Rose Gold
- colord({ r: 16, g: 185, b: 129 }), // Forest
- colord({ r: 252, g: 211, b: 77 }), // Sunshine
- colord({ r: 190, g: 92, b: 251 }), // Grape
- colord({ r: 82, g: 183, b: 136 }), // Eucalyptus
- colord({ r: 248, g: 113, b: 113 }), // Cherry
- colord({ r: 99, g: 202, b: 253 }), // Arctic
- colord({ r: 240, g: 171, b: 252 }), // Lilac
- colord({ r: 163, g: 230, b: 53 }), // Chartreuse
- colord({ r: 234, g: 88, b: 12 }), // Rust
- colord({ r: 125, g: 211, b: 252 }), // Ice Blue
- colord({ r: 251, g: 113, b: 133 }), // Strawberry
- colord({ r: 52, g: 211, b: 153 }), // Sage
- colord({ r: 167, g: 139, b: 250 }), // Violet
- colord({ r: 245, g: 158, b: 11 }), // Apricot
- colord({ r: 110, g: 231, b: 183 }), // Mint Green
- colord({ r: 233, g: 213, b: 255 }), // Thistle
- colord({ r: 202, g: 138, b: 4 }), // Bronze
- colord({ r: 151, g: 255, b: 187 }), // Pistachio
- colord({ r: 220, g: 38, b: 38 }), // Fire Engine
- colord({ r: 124, g: 58, b: 237 }), // Electric Purple
- colord({ r: 45, g: 212, b: 191 }), // Caribbean
- colord({ r: 252, g: 165, b: 165 }), // Melon
- colord({ r: 168, g: 85, b: 247 }), // Byzantium
- colord({ r: 74, g: 222, b: 128 }), // Kelly Green
- colord({ r: 239, g: 68, b: 68 }), // Cardinal
- colord({ r: 34, g: 197, b: 94 }), // Shamrock
- colord({ r: 96, g: 165, b: 250 }), // Marina
- colord({ r: 249, g: 115, b: 22 }), // Carrot
- colord({ r: 192, g: 132, b: 252 }), // Heliotrope
- colord({ r: 45, g: 212, b: 191 }), // Lagoon
- colord({ r: 244, g: 114, b: 182 }), // Bubble Gum
- colord({ r: 132, g: 204, b: 22 }), // Apple
- colord({ r: 56, g: 189, b: 248 }), // Electric Blue
- colord({ r: 234, g: 179, b: 8 }), // Daffodil
- ];
-
- private _selfColor = colord({ r: 0, g: 255, b: 0 });
- private _allyColor = colord({ r: 255, g: 255, b: 0 });
- private _enemyColor = colord({ r: 255, g: 0, b: 0 });
-
- private _spawnHighlightColor = colord({ r: 255, g: 213, b: 79 });
-
- territoryColor(playerInfo: PlayerInfo): Colord {
- if (playerInfo.playerType == PlayerType.Human) {
- return this.humanColors[
- simpleHash(playerInfo.name) % this.humanColors.length
- ];
- }
- return this.territoryColors[
- simpleHash(playerInfo.name) % this.territoryColors.length
- ];
- }
-
- textColor(playerInfo: PlayerInfo): string {
- return playerInfo.playerType == PlayerType.Human ? "#ffffff" : "#dbdbdb";
- }
-
- borderColor(playerInfo: PlayerInfo): Colord {
- const tc = this.territoryColor(playerInfo).rgba;
- return colord({
- r: Math.max(tc.r - 40, 0),
- g: Math.max(tc.g - 40, 0),
- b: Math.max(tc.b - 40, 0),
- });
- }
- defendedBorderColor(playerInfo: PlayerInfo): Colord {
- const bc = this.borderColor(playerInfo).rgba;
- return colord({
- r: Math.max(bc.r - 40, 0),
- g: Math.max(bc.g - 40, 0),
- b: Math.max(bc.b - 40, 0),
- });
- }
-
- terrainColor(gm: GameMap, tile: TileRef): Colord {
- let mag = gm.magnitude(tile);
- if (gm.isShore(tile)) {
- return this.shore;
- }
- switch (gm.terrainType(tile)) {
- case TerrainType.Ocean:
- case TerrainType.Lake:
- const w = this.water.rgba;
- if (gm.isShoreline(tile) && gm.isWater(tile)) {
- return this.shorelineWater;
- }
- if (gm.magnitude(tile) < 10) {
- return colord({
- r: Math.max(w.r - 10 + mag, 0),
- g: Math.max(w.g - 10 + mag, 0),
- b: Math.max(w.b - 10 + mag, 0),
- });
- }
- return this.water;
- case TerrainType.Plains:
- return colord({
- r: 140,
- g: 170 - 2 * mag,
- b: 88,
- });
- case TerrainType.Highland:
- return colord({
- r: 150 + 2 * mag,
- g: 133 + 2 * mag,
- b: 88 + 2 * mag,
- });
- case TerrainType.Mountain:
- return colord({
- r: 180 + mag / 2,
- g: 180 + mag / 2,
- b: 180 + mag / 2,
- });
- }
- }
-
- backgroundColor(): Colord {
- return this.background;
- }
-
- falloutColor(): Colord {
- return this.rand.randElement(this.falloutColors);
- }
-
- font(): string {
- return "Overpass, sans-serif";
- }
-
- selfColor(): Colord {
- return this._selfColor;
- }
- allyColor(): Colord {
- return this._allyColor;
- }
- enemyColor(): Colord {
- return this._enemyColor;
- }
-
- spawnHighlightColor(): Colord {
- return this._spawnHighlightColor;
- }
-})();
diff --git a/src/core/configuration/PastelThemeDark.ts b/src/core/configuration/PastelThemeDark.ts
new file mode 100644
index 000000000..13f04a54b
--- /dev/null
+++ b/src/core/configuration/PastelThemeDark.ts
@@ -0,0 +1,342 @@
+import { Colord, colord, random } from "colord";
+import {
+ Game,
+ PlayerID,
+ PlayerInfo,
+ PlayerType,
+ TerrainType,
+} from "../game/Game";
+import { Theme } from "./Config";
+import { time } from "console";
+import { PseudoRandom } from "../PseudoRandom";
+import { simpleHash } from "../Util";
+import { GameMap, TileRef } from "../game/GameMap";
+import { PlayerView } from "../game/GameView";
+
+export const pastelThemeDark = new (class implements Theme {
+ private rand = new PseudoRandom(123);
+
+ private background = colord({ r: 0, g: 0, b: 0 });
+ private land = colord({ r: 194, g: 193, b: 148 });
+ private shore = colord({ r: 134, g: 133, b: 88 });
+ private falloutColors = [
+ colord({ r: 120, g: 255, b: 71 }), // Original color
+ colord({ r: 130, g: 255, b: 85 }), // Slightly lighter
+ colord({ r: 110, g: 245, b: 65 }), // Slightly darker
+ colord({ r: 125, g: 255, b: 75 }), // Warmer tint
+ colord({ r: 115, g: 250, b: 68 }), // Cooler tint
+ ];
+ private water = colord({ r: 14, g: 11, b: 30 });
+ private shorelineWater = colord({ r: 50, g: 50, b: 50 });
+
+ private territoryColors: Colord[] = [
+ colord({ r: 230, g: 100, b: 100 }), // Bright Red
+ colord({ r: 100, g: 180, b: 230 }), // Sky Blue
+ colord({ r: 230, g: 180, b: 80 }), // Golden Yellow
+ colord({ r: 180, g: 100, b: 230 }), // Purple
+ colord({ r: 80, g: 200, b: 120 }), // Emerald Green
+ colord({ r: 230, g: 130, b: 180 }), // Pink
+ colord({ r: 100, g: 160, b: 80 }), // Olive Green
+ colord({ r: 230, g: 150, b: 100 }), // Peach
+ colord({ r: 80, g: 130, b: 190 }), // Navy Blue
+ colord({ r: 210, g: 210, b: 100 }), // Lime Yellow
+ colord({ r: 190, g: 100, b: 130 }), // Maroon
+ colord({ r: 100, g: 210, b: 210 }), // Turquoise
+ colord({ r: 210, g: 140, b: 80 }), // Light Orange
+ colord({ r: 150, g: 110, b: 190 }), // Lavender
+ colord({ r: 180, g: 210, b: 120 }), // Light Green
+ colord({ r: 210, g: 100, b: 160 }), // Hot Pink
+ colord({ r: 100, g: 140, b: 110 }), // Sea Green
+ colord({ r: 230, g: 180, b: 180 }), // Light Pink
+ colord({ r: 120, g: 120, b: 190 }), // Periwinkle
+ colord({ r: 190, g: 170, b: 100 }), // Sand
+ colord({ r: 100, g: 180, b: 160 }), // Aquamarine
+ colord({ r: 210, g: 160, b: 200 }), // Orchid
+ colord({ r: 170, g: 190, b: 100 }), // Yellow Green
+ colord({ r: 100, g: 130, b: 150 }), // Steel Blue
+ colord({ r: 230, g: 140, b: 140 }), // Salmon
+ colord({ r: 140, g: 180, b: 220 }), // Light Blue
+ colord({ r: 200, g: 160, b: 110 }), // Tan
+ colord({ r: 180, g: 130, b: 180 }), // Plum
+ colord({ r: 130, g: 200, b: 130 }), // Light Sea Green
+ colord({ r: 220, g: 120, b: 120 }), // Coral
+ colord({ r: 120, g: 160, b: 200 }), // Cornflower Blue
+ colord({ r: 200, g: 200, b: 140 }), // Khaki
+ colord({ r: 160, g: 120, b: 160 }), // Purple Gray
+ colord({ r: 140, g: 180, b: 140 }), // Dark Sea Green
+ colord({ r: 200, g: 130, b: 110 }), // Dark Salmon
+ colord({ r: 130, g: 170, b: 190 }), // Cadet Blue
+ colord({ r: 190, g: 180, b: 160 }), // Tan Gray
+ colord({ r: 170, g: 140, b: 190 }), // Medium Purple
+ colord({ r: 160, g: 190, b: 160 }), // Pale Green
+ colord({ r: 190, g: 150, b: 130 }), // Rosy Brown
+ colord({ r: 140, g: 150, b: 180 }), // Light Slate Gray
+ colord({ r: 180, g: 170, b: 140 }), // Dark Khaki
+ colord({ r: 150, g: 130, b: 150 }), // Thistle
+ colord({ r: 170, g: 190, b: 180 }), // Pale Blue Green
+ colord({ r: 190, g: 140, b: 150 }), // Puce
+ colord({ r: 130, g: 180, b: 170 }), // Medium Aquamarine
+ colord({ r: 180, g: 160, b: 180 }), // Mauve
+ colord({ r: 160, g: 180, b: 140 }), // Dark Olive Green
+ colord({ r: 170, g: 150, b: 170 }), // Dusty Rose
+ colord({ r: 100, g: 180, b: 230 }), // Sky Blue
+ colord({ r: 230, g: 180, b: 80 }), // Golden Yellow
+ colord({ r: 180, g: 100, b: 230 }), // Purple
+ colord({ r: 80, g: 200, b: 120 }), // Emerald Green
+ colord({ r: 230, g: 130, b: 180 }), // Pink
+ colord({ r: 100, g: 160, b: 80 }), // Olive Green
+ colord({ r: 230, g: 150, b: 100 }), // Peach
+ colord({ r: 80, g: 130, b: 190 }), // Navy Blue
+ colord({ r: 210, g: 210, b: 100 }), // Lime Yellow
+ colord({ r: 190, g: 100, b: 130 }), // Maroon
+ colord({ r: 100, g: 210, b: 210 }), // Turquoise
+ colord({ r: 210, g: 140, b: 80 }), // Light Orange
+ colord({ r: 150, g: 110, b: 190 }), // Lavender
+ colord({ r: 180, g: 210, b: 120 }), // Light Green
+ colord({ r: 210, g: 100, b: 160 }), // Hot Pink
+ colord({ r: 100, g: 140, b: 110 }), // Sea Green
+ colord({ r: 230, g: 180, b: 180 }), // Light Pink
+ colord({ r: 120, g: 120, b: 190 }), // Periwinkle
+ colord({ r: 190, g: 170, b: 100 }), // Sand
+ colord({ r: 100, g: 180, b: 160 }), // Aquamarine
+ colord({ r: 210, g: 160, b: 200 }), // Orchid
+ colord({ r: 170, g: 190, b: 100 }), // Yellow Green
+ colord({ r: 100, g: 130, b: 150 }), // Steel Blue
+ colord({ r: 230, g: 140, b: 140 }), // Salmon
+ colord({ r: 140, g: 180, b: 220 }), // Light Blue
+ colord({ r: 200, g: 160, b: 110 }), // Tan
+ colord({ r: 180, g: 130, b: 180 }), // Plum
+ colord({ r: 130, g: 200, b: 130 }), // Light Sea Green
+ colord({ r: 220, g: 120, b: 120 }), // Coral
+ colord({ r: 120, g: 160, b: 200 }), // Cornflower Blue
+ colord({ r: 200, g: 200, b: 140 }), // Khaki
+ colord({ r: 160, g: 120, b: 160 }), // Purple Gray
+ colord({ r: 140, g: 180, b: 140 }), // Dark Sea Green
+ colord({ r: 200, g: 130, b: 110 }), // Dark Salmon
+ colord({ r: 130, g: 170, b: 190 }), // Cadet Blue
+ colord({ r: 190, g: 180, b: 160 }), // Tan Gray
+ colord({ r: 170, g: 140, b: 190 }), // Medium Purple
+ colord({ r: 160, g: 190, b: 160 }), // Pale Green
+ colord({ r: 190, g: 150, b: 130 }), // Rosy Brown
+ colord({ r: 140, g: 150, b: 180 }), // Light Slate Gray
+ colord({ r: 180, g: 170, b: 140 }), // Dark Khaki
+ colord({ r: 150, g: 130, b: 150 }), // Thistle
+ colord({ r: 170, g: 190, b: 180 }), // Pale Blue Green
+ colord({ r: 190, g: 140, b: 150 }), // Puce
+ colord({ r: 130, g: 180, b: 170 }), // Medium Aquamarine
+ colord({ r: 180, g: 160, b: 180 }), // Mauve
+ colord({ r: 160, g: 180, b: 140 }), // Dark Olive Green
+ colord({ r: 170, g: 150, b: 170 }), // Dusty Rose
+ ];
+
+ private humanColors: Colord[] = [
+ // Original set
+ colord({ r: 235, g: 75, b: 75 }), // Bright Red
+ colord({ r: 67, g: 190, b: 84 }), // Fresh Green
+ colord({ r: 59, g: 130, b: 246 }), // Royal Blue
+ colord({ r: 245, g: 158, b: 11 }), // Amber
+ colord({ r: 236, g: 72, b: 153 }), // Deep Pink
+ colord({ r: 48, g: 178, b: 180 }), // Teal
+ colord({ r: 168, g: 85, b: 247 }), // Vibrant Purple
+ colord({ r: 251, g: 191, b: 36 }), // Marigold
+ colord({ r: 74, g: 222, b: 128 }), // Mint
+ colord({ r: 239, g: 68, b: 68 }), // Crimson
+ colord({ r: 34, g: 197, b: 94 }), // Emerald
+ colord({ r: 96, g: 165, b: 250 }), // Sky Blue
+ colord({ r: 249, g: 115, b: 22 }), // Tangerine
+ colord({ r: 192, g: 132, b: 252 }), // Lavender
+ colord({ r: 45, g: 212, b: 191 }), // Turquoise
+ colord({ r: 244, g: 114, b: 182 }), // Rose
+ colord({ r: 132, g: 204, b: 22 }), // Lime
+ colord({ r: 56, g: 189, b: 248 }), // Light Blue
+ colord({ r: 234, g: 179, b: 8 }), // Sunflower
+ colord({ r: 217, g: 70, b: 239 }), // Fuchsia
+ colord({ r: 16, g: 185, b: 129 }), // Sea Green
+ colord({ r: 251, g: 146, b: 60 }), // Light Orange
+ colord({ r: 147, g: 51, b: 234 }), // Bright Purple
+ colord({ r: 79, g: 70, b: 229 }), // Indigo
+ colord({ r: 245, g: 101, b: 101 }), // Coral
+ colord({ r: 134, g: 239, b: 172 }), // Light Green
+ colord({ r: 59, g: 130, b: 246 }), // Cerulean
+ colord({ r: 253, g: 164, b: 175 }), // Salmon Pink
+ colord({ r: 147, g: 197, b: 253 }), // Powder Blue
+ colord({ r: 252, g: 211, b: 77 }), // Golden
+ colord({ r: 190, g: 92, b: 251 }), // Amethyst
+ colord({ r: 82, g: 183, b: 136 }), // Jade
+ colord({ r: 248, g: 113, b: 113 }), // Warm Red
+ colord({ r: 99, g: 202, b: 253 }), // Azure
+ colord({ r: 240, g: 171, b: 252 }), // Orchid
+ colord({ r: 163, g: 230, b: 53 }), // Yellow Green
+ colord({ r: 234, g: 88, b: 12 }), // Burnt Orange
+ colord({ r: 125, g: 211, b: 252 }), // Crystal Blue
+ colord({ r: 251, g: 113, b: 133 }), // Watermelon
+ colord({ r: 52, g: 211, b: 153 }), // Spearmint
+ colord({ r: 167, g: 139, b: 250 }), // Periwinkle
+ colord({ r: 245, g: 158, b: 11 }), // Honey
+ colord({ r: 110, g: 231, b: 183 }), // Seafoam
+ colord({ r: 233, g: 213, b: 255 }), // Light Lilac
+ colord({ r: 202, g: 138, b: 4 }), // Rich Gold
+ colord({ r: 151, g: 255, b: 187 }), // Fresh Mint
+ colord({ r: 220, g: 38, b: 38 }), // Ruby
+ colord({ r: 124, g: 58, b: 237 }), // Royal Purple
+ colord({ r: 45, g: 212, b: 191 }), // Ocean
+ colord({ r: 252, g: 165, b: 165 }), // Peach
+
+ // Additional 50 colors
+ colord({ r: 179, g: 136, b: 255 }), // Light Purple
+ colord({ r: 133, g: 77, b: 14 }), // Chocolate
+ colord({ r: 52, g: 211, b: 153 }), // Aquamarine
+ colord({ r: 234, g: 179, b: 8 }), // Mustard
+ colord({ r: 236, g: 72, b: 153 }), // Hot Pink
+ colord({ r: 147, g: 197, b: 253 }), // Sky
+ colord({ r: 249, g: 115, b: 22 }), // Pumpkin
+ colord({ r: 167, g: 139, b: 250 }), // Iris
+ colord({ r: 16, g: 185, b: 129 }), // Pine
+ colord({ r: 251, g: 146, b: 60 }), // Mango
+ colord({ r: 192, g: 132, b: 252 }), // Wisteria
+ colord({ r: 79, g: 70, b: 229 }), // Sapphire
+ colord({ r: 245, g: 101, b: 101 }), // Salmon
+ colord({ r: 134, g: 239, b: 172 }), // Spring Green
+ colord({ r: 59, g: 130, b: 246 }), // Ocean Blue
+ colord({ r: 253, g: 164, b: 175 }), // Rose Gold
+ colord({ r: 16, g: 185, b: 129 }), // Forest
+ colord({ r: 252, g: 211, b: 77 }), // Sunshine
+ colord({ r: 190, g: 92, b: 251 }), // Grape
+ colord({ r: 82, g: 183, b: 136 }), // Eucalyptus
+ colord({ r: 248, g: 113, b: 113 }), // Cherry
+ colord({ r: 99, g: 202, b: 253 }), // Arctic
+ colord({ r: 240, g: 171, b: 252 }), // Lilac
+ colord({ r: 163, g: 230, b: 53 }), // Chartreuse
+ colord({ r: 234, g: 88, b: 12 }), // Rust
+ colord({ r: 125, g: 211, b: 252 }), // Ice Blue
+ colord({ r: 251, g: 113, b: 133 }), // Strawberry
+ colord({ r: 52, g: 211, b: 153 }), // Sage
+ colord({ r: 167, g: 139, b: 250 }), // Violet
+ colord({ r: 245, g: 158, b: 11 }), // Apricot
+ colord({ r: 110, g: 231, b: 183 }), // Mint Green
+ colord({ r: 233, g: 213, b: 255 }), // Thistle
+ colord({ r: 202, g: 138, b: 4 }), // Bronze
+ colord({ r: 151, g: 255, b: 187 }), // Pistachio
+ colord({ r: 220, g: 38, b: 38 }), // Fire Engine
+ colord({ r: 124, g: 58, b: 237 }), // Electric Purple
+ colord({ r: 45, g: 212, b: 191 }), // Caribbean
+ colord({ r: 252, g: 165, b: 165 }), // Melon
+ colord({ r: 168, g: 85, b: 247 }), // Byzantium
+ colord({ r: 74, g: 222, b: 128 }), // Kelly Green
+ colord({ r: 239, g: 68, b: 68 }), // Cardinal
+ colord({ r: 34, g: 197, b: 94 }), // Shamrock
+ colord({ r: 96, g: 165, b: 250 }), // Marina
+ colord({ r: 249, g: 115, b: 22 }), // Carrot
+ colord({ r: 192, g: 132, b: 252 }), // Heliotrope
+ colord({ r: 45, g: 212, b: 191 }), // Lagoon
+ colord({ r: 244, g: 114, b: 182 }), // Bubble Gum
+ colord({ r: 132, g: 204, b: 22 }), // Apple
+ colord({ r: 56, g: 189, b: 248 }), // Electric Blue
+ colord({ r: 234, g: 179, b: 8 }), // Daffodil
+ ];
+
+ private _selfColor = colord({ r: 0, g: 255, b: 0 });
+ private _allyColor = colord({ r: 255, g: 255, b: 0 });
+ private _enemyColor = colord({ r: 255, g: 0, b: 0 });
+
+ private _spawnHighlightColor = colord({ r: 255, g: 213, b: 79 });
+
+ territoryColor(playerInfo: PlayerInfo): Colord {
+ if (playerInfo.playerType == PlayerType.Human) {
+ return this.humanColors[
+ simpleHash(playerInfo.name) % this.humanColors.length
+ ];
+ }
+ return this.territoryColors[
+ simpleHash(playerInfo.name) % this.territoryColors.length
+ ];
+ }
+
+ textColor(playerInfo: PlayerInfo): string {
+ return playerInfo.playerType == PlayerType.Human ? "#ffffff" : "#dbdbdb";
+ }
+
+ borderColor(playerInfo: PlayerInfo): Colord {
+ const tc = this.territoryColor(playerInfo).rgba;
+ return colord({
+ r: Math.max(tc.r - 40, 0),
+ g: Math.max(tc.g - 40, 0),
+ b: Math.max(tc.b - 40, 0),
+ });
+ }
+ defendedBorderColor(playerInfo: PlayerInfo): Colord {
+ const bc = this.borderColor(playerInfo).rgba;
+ return colord({
+ r: Math.max(bc.r - 40, 0),
+ g: Math.max(bc.g - 40, 0),
+ b: Math.max(bc.b - 40, 0),
+ });
+ }
+
+ terrainColor(gm: GameMap, tile: TileRef): Colord {
+ let mag = gm.magnitude(tile);
+ if (gm.isShore(tile)) {
+ return this.shore;
+ }
+ switch (gm.terrainType(tile)) {
+ case TerrainType.Ocean:
+ case TerrainType.Lake:
+ const w = this.water.rgba;
+ if (gm.isShoreline(tile) && gm.isWater(tile)) {
+ return this.shorelineWater;
+ }
+ if (gm.magnitude(tile) < 10) {
+ return colord({
+ r: Math.max(w.r - 10 + mag, 0),
+ g: Math.max(w.g - 10 + mag, 0),
+ b: Math.max(w.b - 10 + mag, 0),
+ });
+ }
+ return this.water;
+ case TerrainType.Plains:
+ return colord({
+ r: 140,
+ g: 170 - 2 * mag,
+ b: 88,
+ });
+ case TerrainType.Highland:
+ return colord({
+ r: 150 + 2 * mag,
+ g: 133 + 2 * mag,
+ b: 88 + 2 * mag,
+ });
+ case TerrainType.Mountain:
+ return colord({
+ r: 180 + mag / 2,
+ g: 180 + mag / 2,
+ b: 180 + mag / 2,
+ });
+ }
+ }
+
+ backgroundColor(): Colord {
+ return this.background;
+ }
+
+ falloutColor(): Colord {
+ return this.rand.randElement(this.falloutColors);
+ }
+
+ font(): string {
+ return "Overpass, sans-serif";
+ }
+
+ selfColor(): Colord {
+ return this._selfColor;
+ }
+ allyColor(): Colord {
+ return this._allyColor;
+ }
+ enemyColor(): Colord {
+ return this._enemyColor;
+ }
+
+ spawnHighlightColor(): Colord {
+ return this._spawnHighlightColor;
+ }
+})();