Use element colors for team portraits

lib/catalog/element.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+
+import { elementBackgroundColor } from "@/lib/catalog/element";
+
+describe("catalog element backgrounds", () => {
+  it("maps every character element to its flat color", () => {
+    expect(elementBackgroundColor("Pyro")).toBe("#EF7938");
+    expect(elementBackgroundColor("Hydro")).toBe("#4CC2F1");
+    expect(elementBackgroundColor("Anemo")).toBe("#74C2A8");
+    expect(elementBackgroundColor("Electro")).toBe("#AF8EC1");
+    expect(elementBackgroundColor("Dendro")).toBe("#A5C83B");
+    expect(elementBackgroundColor("Cryo")).toBe("#9FD6E3");
+    expect(elementBackgroundColor("Geo")).toBe("#FAB632");
+  });
+
+  it("uses the neutral character background when the element is unavailable", () => {
+    expect(elementBackgroundColor(null)).toBe("#17383d");
+    expect(elementBackgroundColor(undefined)).toBe("#17383d");
+    expect(elementBackgroundColor("Unknown")).toBe("#17383d");
+  });
+});

lib/catalog/element.ts

@@ -0,0 +1,13 @@
+const elementBackgroundColors: Record<string, string> = {
+  Pyro: "#EF7938",
+  Hydro: "#4CC2F1",
+  Anemo: "#74C2A8",
+  Electro: "#AF8EC1",
+  Dendro: "#A5C83B",
+  Cryo: "#9FD6E3",
+  Geo: "#FAB632",
+};
+
+export function elementBackgroundColor(element: string | null | undefined): string {
+  return (element && elementBackgroundColors[element]) || "#17383d";
+}