Players on the same team get a distinct color based on the team color (#1297)

## Description:

Instead of all teams having the same color, they get a different color.

### 2 teams


![blue-red](https://github.com/user-attachments/assets/7ec88d25-af1d-42de-8cda-f0ffdc7029d5)

### All teams


![all-teams](https://github.com/user-attachments/assets/97f8a51b-b5a4-40ec-8a96-f749547d354c)

## 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
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

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

pineappleprince

---------

Co-authored-by: Drills Kibo <59177241+drillskibo@users.noreply.github.com>
Co-authored-by: Scott Anderson <662325+scottanderson@users.noreply.github.com>

tests/Colors.test.ts

@@ -3,7 +3,16 @@ import {
   ColorAllocator,
   selectDistinctColorIndex,
 } from "../src/core/configuration/ColorAllocator";
-import { blue, botColor, red, teal } from "../src/core/configuration/Colors";
+import {
+  blue,
+  botColor,
+  green,
+  orange,
+  purple,
+  red,
+  teal,
+  yellow,
+} from "../src/core/configuration/Colors";
 import { ColoredTeams } from "../src/core/game/Game";
 
 const mockColors: Colord[] = [
@@ -72,12 +81,69 @@ describe("ColorAllocator", () => {
     expect(c2.isEqual(c2Again)).toBe(true);
   });
 
-  test("assignTeamColor returns the expected static color for known teams", () => {
+  test("assignTeamColor returns the base color from the team", () => {
     expect(allocator.assignTeamColor(ColoredTeams.Blue)).toEqual(blue);
     expect(allocator.assignTeamColor(ColoredTeams.Red)).toEqual(red);
     expect(allocator.assignTeamColor(ColoredTeams.Teal)).toEqual(teal);
+    expect(allocator.assignTeamColor(ColoredTeams.Purple)).toEqual(purple);
+    expect(allocator.assignTeamColor(ColoredTeams.Yellow)).toEqual(yellow);
+    expect(allocator.assignTeamColor(ColoredTeams.Orange)).toEqual(orange);
+    expect(allocator.assignTeamColor(ColoredTeams.Green)).toEqual(green);
     expect(allocator.assignTeamColor(ColoredTeams.Bot)).toEqual(botColor);
   });
+
+  test("assignTeamPlayerColor always returns the same color for the same playerID", () => {
+    const playerId = "player123";
+
+    const blueColor1 = allocator.assignTeamPlayerColor(
+      ColoredTeams.Blue,
+      playerId,
+    );
+    const blueColor2 = allocator.assignTeamPlayerColor(
+      ColoredTeams.Blue,
+      playerId,
+    );
+
+    expect(blueColor1.isEqual(blueColor2)).toBe(true);
+
+    const redColor1 = allocator.assignTeamPlayerColor(
+      ColoredTeams.Red,
+      playerId,
+    );
+    const redColor2 = allocator.assignTeamPlayerColor(
+      ColoredTeams.Red,
+      playerId,
+    );
+
+    expect(redColor1.isEqual(redColor2)).toBe(true);
+  });
+
+  test("assignTeamPlayerColor returns a different color when the playerID is different", () => {
+    const playerIdOne = "player1";
+    const playerIdTwo = "player2";
+
+    const blueColorPlayerOne = allocator.assignTeamPlayerColor(
+      ColoredTeams.Blue,
+      playerIdOne,
+    );
+    const blueColorPlayerTwo = allocator.assignTeamPlayerColor(
+      ColoredTeams.Blue,
+      playerIdTwo,
+    );
+
+    expect(blueColorPlayerOne.isEqual(blueColorPlayerTwo)).toBe(false);
+
+    const redColorPlayerOne = allocator.assignTeamPlayerColor(
+      ColoredTeams.Red,
+      playerIdOne,
+    );
+    const redColorPlayerTwo = allocator.assignTeamPlayerColor(
+      ColoredTeams.Red,
+      playerIdTwo,
+    );
+
+    expect(redColorPlayerOne.isEqual(redColorPlayerTwo)).toBe(false);
+  });
 });
 
 describe("selectDistinctColor", () => {