Features: Team Game Spawn Color Tint (#2303)

## Description:

This PR addresses issue #2302: where there is no obvious information
about the self-player's team during the spawn phase of the game.

Currently, during TEAM games (where there is a set number of teams
defined), the self player's spawn highlight color is white, while all
other players are shown with a team-based spawn highlight color. This
makes it difficult to discern who is a teammate, especially since the
current live version (v0.26.7) uses green/yellow for other players to
depict teammate/other team, respectively.

Technically, the same is true for Duos, Trios, and Quads games, although
this has been addressed separately with PR #2298 by reverting to
green/yellow for teammate/other team players.

This PR changes the color of the self player's breathing spawn highlight
ring to match their assigned team color (with `alpha=0.5` for
transparency). The breathing ring is semi transparent on top of the
existing white static semi-transparent ring, giving the breathing ring a
**tint** of the team color instead of the exact team color.

This allows a player to immediately identify their assigned team and
maintains overall consistency with FFA, Duos, Trios, and Quads game
modes.

See below for example implementation. In this screenshot, the self
player is on the red team as shown by the red tint to the breathing
spawn highlight ring. The screenshot also shows some of the static white
semi-transparent ring around the spawn location. The self player's
teammate is to the top left of the image with a solid red spawn
highlight. The non-player (nation) opponent on the blue team is shown to
the bottom left. In online games, nations are not present in team games.
In single player or private lobby games they are shown as here, without
a spawn color highlight and only a territory color.

<img width="402" height="292" alt="Team Spawn Color Tint"
src="https://github.com/user-attachments/assets/5696a408-a633-4ec8-bf93-c8afa8e2e121"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

GlacialDrift
This commit is contained in:
Mike Harris
2025-10-29 16:39:07 -07:00
committed by GitHub
parent bb5ccbfa2c
commit 4ee3cbc255
9 changed files with 590 additions and 574 deletions
+6 -2
View File
@@ -1,4 +1,4 @@
import { Colord, extend } from "colord";
import { colord, Colord, extend } from "colord";
import labPlugin from "colord/plugins/lab";
import lchPlugin from "colord/plugins/lch";
import Color from "colorjs.io";
@@ -87,7 +87,11 @@ export class ColorAllocator {
assignTeamColor(team: Team): Colord {
const teamColors = this.getTeamColorVariations(team);
return teamColors[0];
const rgb = teamColors[0].toRgb();
rgb.r = Math.round(rgb.r);
rgb.g = Math.round(rgb.g);
rgb.b = Math.round(rgb.b);
return colord(rgb);
}
assignTeamPlayerColor(team: Team, playerId: string): Colord {
File diff suppressed because it is too large Load Diff
+18 -18
View File
@@ -17,35 +17,35 @@ export class PastelTheme implements Theme {
private teamColorAllocator = new ColorAllocator(humanColors, fallbackColors);
private nationColorAllocator = new ColorAllocator(nationColors, nationColors);
private background = colord({ r: 60, g: 60, b: 60 });
private shore = colord({ r: 223, g: 187, b: 132 });
private background = colord("rgb(60,60,60)");
private shore = colord("rgb(204,203,158)");
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
colord("rgb(120,255,71)"), // Original color
colord("rgb(130,255,85)"), // Slightly lighter
colord("rgb(110,245,65)"), // Slightly darker
colord("rgb(125,255,75)"), // Warmer tint
colord("rgb(115,250,68)"), // Cooler tint
];
private water = colord({ r: 80, g: 76, b: 179 });
private shorelineWater = colord({ r: 100, g: 110, b: 255 });
private water = colord("rgb(70,132,180)");
private shorelineWater = colord("rgb(100,143,255)");
/** Alternate View colors for self, green */
private _selfColor = colord({ r: 0, g: 255, b: 0 });
private _selfColor = colord("rgb(0,255,0)");
/** Alternate View colors for allies, yellow */
private _allyColor = colord({ r: 255, g: 255, b: 0 });
private _allyColor = colord("rgb(255,255,0)");
/** Alternate View colors for neutral, gray */
private _neutralColor = colord({ r: 128, g: 128, b: 128 });
private _neutralColor = colord("rgb(128,128,128)");
/** Alternate View colors for enemies, red */
private _enemyColor = colord({ r: 255, g: 0, b: 0 });
private _enemyColor = colord("rgb(255,0,0)");
/** Default spawn highlight colors for other players in FFA, yellow */
private _spawnHighlightColor = colord({ r: 255, g: 213, b: 79 });
private _spawnHighlightColor = colord("rgb(255,213,79)");
/** Added non-default spawn highlight colors for self, full white */
private _spawnHighlightSelfColor = colord({ r: 255, g: 255, b: 255 });
private _spawnHighlightSelfColor = colord("rgb(255,255,255)");
/** Added non-default spawn highlight colors for teammates, green */
private _spawnHighlightTeamColor = colord({ r: 0, g: 255, b: 0 });
private _spawnHighlightTeamColor = colord("rgb(0,255,0)");
/** Added non-default spawn highlight colors for enemies, red */
private _spawnHighlightEnemyColor = colord({ r: 255, g: 0, b: 0 });
private _spawnHighlightEnemyColor = colord("rgb(255,0,0)");
teamColor(team: Team): Colord {
return this.teamColorAllocator.assignTeamColor(team);
@@ -81,7 +81,7 @@ export class PastelTheme implements Theme {
}
focusedBorderColor(): Colord {
return colord({ r: 230, g: 230, b: 230 });
return colord("rgb(230,230,230)");
}
textColor(player: PlayerView): string {
+3 -3
View File
@@ -4,10 +4,10 @@ import { GameMap, TileRef } from "../game/GameMap";
import { PastelTheme } from "./PastelTheme";
export class PastelThemeDark extends PastelTheme {
private darkShore = colord({ r: 134, g: 133, b: 88 });
private darkShore = colord("rgb(134,133,88)");
private darkWater = colord({ r: 14, g: 11, b: 30 });
private darkShorelineWater = colord({ r: 50, g: 50, b: 50 });
private darkWater = colord("rgb(14,11,30)");
private darkShorelineWater = colord("rgb(50,50,50)");
terrainColor(gm: GameMap, tile: TileRef): Colord {
const mag = gm.magnitude(tile);