mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 16:10:53 +00:00
evanpelle
b07a59685e
## Description: The color allocator only checked if DeltaE met a threshold of 25, but most colors met that threshold, so it wasn't much better than random. Now it goes down the list of assigned colors to find the most unique color to add. Also changed algorithms from deltaE76 to deltaE2000 as that seemed to produce better results. The algorithm is O(n^2) so we cap distinct check at 50 colors, after that fall back to random selection. After 50 colors our color palette is pretty much exhausted anyways. Moved ColorAllocator to its own file ## 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: evan
101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
import { colord, Colord } from "colord";
|
|
import {
|
|
ColorAllocator,
|
|
selectDistinctColorIndex,
|
|
} from "../src/core/configuration/ColorAllocator";
|
|
import { blue, botColor, red, teal } from "../src/core/configuration/Colors";
|
|
import { ColoredTeams } from "../src/core/game/Game";
|
|
|
|
const mockColors: Colord[] = [
|
|
colord({ r: 255, g: 0, b: 0 }),
|
|
colord({ r: 0, g: 255, b: 0 }),
|
|
colord({ r: 0, g: 0, b: 255 }),
|
|
];
|
|
|
|
const fallbackMockColors: Colord[] = [
|
|
colord({ r: 0, g: 0, b: 0 }),
|
|
colord({ r: 255, g: 255, b: 255 }),
|
|
];
|
|
|
|
const fallbackColors = [...fallbackMockColors, ...mockColors];
|
|
|
|
describe("ColorAllocator", () => {
|
|
let allocator: ColorAllocator;
|
|
|
|
beforeEach(() => {
|
|
allocator = new ColorAllocator(mockColors, fallbackMockColors);
|
|
});
|
|
|
|
test("returns a unique color for each new ID", () => {
|
|
const c1 = allocator.assignColor("a");
|
|
const c2 = allocator.assignColor("b");
|
|
const c3 = allocator.assignColor("c");
|
|
|
|
expect(c1.isEqual(c2)).toBe(false);
|
|
expect(c1.isEqual(c3)).toBe(false);
|
|
expect(c2.isEqual(c3)).toBe(false);
|
|
});
|
|
|
|
test("returns the same color for the same ID", () => {
|
|
const c1 = allocator.assignColor("a");
|
|
const c2 = allocator.assignColor("a");
|
|
|
|
expect(c1.isEqual(c2)).toBe(true);
|
|
});
|
|
|
|
test("falls back when colors are exhausted", () => {
|
|
allocator.assignColor("1");
|
|
allocator.assignColor("2");
|
|
allocator.assignColor("3");
|
|
const fallback = allocator.assignColor("4");
|
|
const fallback2 = allocator.assignColor("5");
|
|
|
|
const match = fallbackColors.some((color) => color.isEqual(fallback));
|
|
expect(match).toBe(true);
|
|
|
|
const match2 = fallback.isEqual(fallback2);
|
|
expect(match2).toBe(false);
|
|
});
|
|
|
|
test("assignBotColor returns deterministic color from botColors", () => {
|
|
const allocator = new ColorAllocator(mockColors, mockColors);
|
|
|
|
const id1 = "bot123";
|
|
const id2 = "bot456";
|
|
|
|
const c1 = allocator.assignColor(id1);
|
|
const c2 = allocator.assignColor(id2);
|
|
const c1Again = allocator.assignColor(id1);
|
|
const c2Again = allocator.assignColor(id2);
|
|
|
|
expect(c1.isEqual(c1Again)).toBe(true);
|
|
expect(c2.isEqual(c2Again)).toBe(true);
|
|
});
|
|
|
|
test("assignTeamColor returns the expected static color for known teams", () => {
|
|
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.Bot)).toEqual(botColor);
|
|
});
|
|
});
|
|
|
|
describe("selectDistinctColor", () => {
|
|
test("returns the most distant color", () => {
|
|
const assignedColors = [colord({ r: 255, g: 0, b: 0 })]; // bright red
|
|
const availableColors = [
|
|
colord({ r: 254, g: 1, b: 1 }), // too close
|
|
colord({ r: 0, g: 255, b: 0 }), // distinct green
|
|
colord({ r: 0, g: 0, b: 255 }), // distinct blue
|
|
];
|
|
|
|
const result = selectDistinctColorIndex(availableColors, assignedColors);
|
|
expect(result).not.toBeNull();
|
|
const rgb = availableColors[result!].toRgb();
|
|
expect([
|
|
{ r: 0, g: 255, b: 0, a: 1 },
|
|
{ r: 0, g: 0, b: 255, a: 1 },
|
|
]).toContainEqual(rgb);
|
|
});
|
|
});
|