Files
OpenFrontIO/src/core/CosmeticSchemas.ts
T
evanpelle a26585a47b Add support for colored patterns (#2062)
## Description:

Add support for colored territory patterns/skins

* Refactored & updated territory pattern rendering to render colored
skins
* rename public from pattern to skin (keep pattern name internally, too
difficult to rename)
* Moved all territory color logic to PlayerView
* Updated WinModal to show colored skins
* Refactored decode logic into a separate function: decodePatternData
* Refactored/updated how cosmetics are sent to server. Players now send
a PlayerCosmeticRefsSchema in the ClientJoinMessage.
PlayerCosmeticRefsSchema just contains names of the cosmetics, and the
server replaces the names/references with actual cosmetic data
* Refactored PastelThemeDark: have it extend Pastel theme so duplicate
logic can be removed.
* 

## 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:

evan
2025-09-18 20:00:15 -07:00

97 lines
2.3 KiB
TypeScript

import { base64url } from "jose";
import { z } from "zod/v4";
import { decodePatternData } from "./PatternDecoder";
import { PlayerPattern } from "./Schemas";
export type Cosmetics = z.infer<typeof CosmeticsSchema>;
export type Pattern = z.infer<typeof PatternSchema>;
export type PatternName = z.infer<typeof PatternNameSchema>;
export type Product = z.infer<typeof ProductSchema>;
export type ColorPalette = z.infer<typeof ColorPaletteSchema>;
export type PatternData = z.infer<typeof PatternDataSchema>;
export const ProductSchema = z.object({
productId: z.string(),
priceId: z.string(),
price: z.string(),
});
export const PatternNameSchema = z
.string()
.regex(/^[a-z0-9_]+$/)
.max(32);
export const PatternDataSchema = z
.string()
.max(1403)
.base64url()
.refine(
(val) => {
try {
decodePatternData(val, base64url.decode);
return true;
} catch (e) {
if (e instanceof Error) {
console.error(JSON.stringify(e.message, null, 2));
} else {
console.error(String(e));
}
return false;
}
},
{
message: "Invalid pattern",
},
);
export const ColorPaletteSchema = z.object({
name: z.string(),
primaryColor: z.string(),
secondaryColor: z.string(),
});
export const PatternSchema = z.object({
name: PatternNameSchema,
pattern: PatternDataSchema,
colorPalettes: z
.object({
name: z.string(),
isArchived: z.boolean(),
})
.array()
.optional(),
affiliateCode: z.string().nullable(),
product: ProductSchema.nullable(),
});
// Schema for resources/cosmetics/cosmetics.json
export const CosmeticsSchema = z.object({
colorPalettes: z.record(z.string(), ColorPaletteSchema).optional(),
patterns: z.record(z.string(), PatternSchema),
flag: z
.object({
layers: z.record(
z.string(),
z.object({
name: z.string(),
flares: z.array(z.string()).optional(),
}),
),
color: z.record(
z.string(),
z.object({
color: z.string(),
name: z.string(),
flares: z.array(z.string()).optional(),
}),
),
})
.optional(),
});
export const DefaultPattern = {
name: "default",
patternData: "AAAAAA",
colorPalette: undefined,
} satisfies PlayerPattern;