diff --git a/src/client/graphics/layers/TerritoryLayer.ts b/src/client/graphics/layers/TerritoryLayer.ts index ce1b9a705..fd3f520ed 100644 --- a/src/client/graphics/layers/TerritoryLayer.ts +++ b/src/client/graphics/layers/TerritoryLayer.ts @@ -267,15 +267,13 @@ export class TerritoryLayer implements Layer { ) .filter((u) => u.unit.owner() == owner).length > 0 ) { - const useDefendedBorderColor = playerIsFocused - ? this.theme.focusedDefendedBorderColor() - : this.theme.defendedBorderColor(owner); - this.paintCell( - this.game.x(tile), - this.game.y(tile), - useDefendedBorderColor, - 255, - ); + const borderColors = this.theme.defendedBorderColors(owner); + const x = this.game.x(tile); + const y = this.game.y(tile); + const lightTile = + (x % 2 == 0 && y % 2 == 0) || (y % 2 == 1 && x % 2 == 1); + const borderColor = lightTile ? borderColors.light : borderColors.dark; + this.paintCell(x, y, borderColor, 255); } else { const useBorderColor = playerIsFocused ? this.theme.focusedBorderColor() diff --git a/src/core/configuration/Config.ts b/src/core/configuration/Config.ts index 9f55f8b52..93e2f54c9 100644 --- a/src/core/configuration/Config.ts +++ b/src/core/configuration/Config.ts @@ -143,9 +143,8 @@ export interface Theme { territoryColor(playerInfo: PlayerView): Colord; specialBuildingColor(playerInfo: PlayerView): Colord; borderColor(playerInfo: PlayerView): Colord; - defendedBorderColor(playerInfo: PlayerView): Colord; + defendedBorderColors(playerInfo: PlayerView): { light: Colord; dark: Colord }; focusedBorderColor(): Colord; - focusedDefendedBorderColor(): Colord; terrainColor(gm: GameMap, tile: TileRef): Colord; backgroundColor(): Colord; falloutColor(): Colord; diff --git a/src/core/configuration/PastelTheme.ts b/src/core/configuration/PastelTheme.ts index 9c4ac5d6c..8218268be 100644 --- a/src/core/configuration/PastelTheme.ts +++ b/src/core/configuration/PastelTheme.ts @@ -98,21 +98,17 @@ export const pastelTheme = new (class implements Theme { b: Math.max(tc.b - 40, 0), }); } - defendedBorderColor(player: PlayerView): Colord { - const bc = this.borderColor(player).rgba; - return colord({ - r: Math.max(bc.r - 40, 0), - g: Math.max(bc.g - 40, 0), - b: Math.max(bc.b - 40, 0), - }); + + defendedBorderColors(player: PlayerView): { light: Colord; dark: Colord } { + return { + light: this.territoryColor(player).darken(0.2), + dark: this.territoryColor(player).darken(0.4), + }; } focusedBorderColor(): Colord { return colord({ r: 230, g: 230, b: 230 }); } - focusedDefendedBorderColor(): Colord { - return colord({ r: 200, g: 200, b: 200 }); - } terrainColor(gm: GameMap, tile: TileRef): Colord { const mag = gm.magnitude(tile); diff --git a/src/core/configuration/PastelThemeDark.ts b/src/core/configuration/PastelThemeDark.ts index bc9dd8ddf..f1d52c824 100644 --- a/src/core/configuration/PastelThemeDark.ts +++ b/src/core/configuration/PastelThemeDark.ts @@ -98,21 +98,17 @@ export const pastelThemeDark = new (class implements Theme { b: Math.max(tc.b - 40, 0), }); } - defendedBorderColor(player: PlayerView): Colord { - const bc = this.borderColor(player).rgba; - return colord({ - r: Math.max(bc.r - 40, 0), - g: Math.max(bc.g - 40, 0), - b: Math.max(bc.b - 40, 0), - }); + + defendedBorderColors(player: PlayerView): { light: Colord; dark: Colord } { + return { + light: this.territoryColor(player).darken(0.2), + dark: this.territoryColor(player).darken(0.4), + }; } focusedBorderColor(): Colord { return colord({ r: 255, g: 255, b: 255 }); } - focusedDefendedBorderColor(): Colord { - return colord({ r: 215, g: 215, b: 215 }); - } terrainColor(gm: GameMap, tile: TileRef): Colord { const mag = gm.magnitude(tile);