Files
Evan 19beab9a70 flags (#3985)
# Dynamic flag atlas (runtime TEXTURE_2D_ARRAY)

Replaces the build-time `flag-atlas.png` with a runtime
`TEXTURE_2D_ARRAY`
populated on demand from each player's server-resolved flag URL. Layers
are
deduped by URL (every "Mercia" bot shares one slot), so the per-game
working
set is bounded by unique flags, not player count.

## Why

The store will eventually ship hundreds of custom flags fetched from the
CDN,
which can't be baked into a static atlas. Moving to a runtime array also
lets
the catalog grow without bloating the client bundle.

## Side effect (bonus)

Human players' country flags (`country:US`, etc.) now display next to
their
names in-game. The old atlas only contained nation names, so non-nation
flags
were silently dropped.

## Notes

- Cell size is fixed at 128×85; loaded images are aspect-fit and
centered.
- Layer cap is 512 (clamped to `MAX_ARRAY_TEXTURE_LAYERS`). Past the
cap,
  further flag requests render no icon.
- Mipmaps are regenerated after each layer upload.
- Recommend store pipeline caps custom flag uploads at SVG or PNG ≤
256×170,
  ≤ 50 KB (decode-time RAM and bandwidth, not VRAM).


## 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
2026-05-22 13:19:22 +01:00

153 lines
5.4 KiB
TypeScript

import { describe, expect, test } from "vitest";
import { buildAssetUrl, rewriteAssetsForCdn } from "../src/core/AssetUrls";
describe("AssetUrls", () => {
test("returns hashed URLs for direct asset matches", () => {
expect(
buildAssetUrl("images/Favicon.svg", {
"images/Favicon.svg": "/_assets/images/Favicon.hash.svg",
}),
).toBe("/_assets/images/Favicon.hash.svg");
});
test("falls back to the unversioned path when manifest has no match", () => {
expect(buildAssetUrl("images/unknown.svg", {})).toBe("/images/unknown.svg");
});
test("falls back to the unversioned path for directory-like paths", () => {
const manifest = {
"maps/britanniaclassic/manifest.json":
"/_assets/maps/britanniaclassic/manifest.hash.json",
"maps/britanniaclassic/map.bin":
"/_assets/maps/britanniaclassic/map.hash.bin",
};
expect(buildAssetUrl("maps", manifest)).toBe("/maps");
expect(buildAssetUrl("maps/britanniaclassic", manifest)).toBe(
"/maps/britanniaclassic",
);
});
test("rejects dot segments in asset paths", () => {
expect(() => buildAssetUrl("../api/instance", {})).toThrow(
"Invalid asset path segment: ..",
);
expect(() => buildAssetUrl("images/%2e%2e/secret.svg", {})).toThrow(
"Invalid asset path segment: %2e%2e",
);
});
test("rejects empty asset paths", () => {
expect(() => buildAssetUrl("", {})).toThrow("Asset path must not be empty");
expect(() => buildAssetUrl("///", {})).toThrow(
"Asset path must not be empty",
);
});
test("prefixes baseUrl onto hashed URLs when provided", () => {
expect(
buildAssetUrl(
"images/Favicon.svg",
{ "images/Favicon.svg": "/_assets/images/Favicon.hash.svg" },
"https://cdn.example.com",
),
).toBe("https://cdn.example.com/_assets/images/Favicon.hash.svg");
});
test("preserves direct URL when baseUrl is empty string", () => {
expect(
buildAssetUrl(
"images/Favicon.svg",
{ "images/Favicon.svg": "/_assets/images/Favicon.hash.svg" },
"",
),
).toBe("/_assets/images/Favicon.hash.svg");
});
test("returns absolute http(s) URLs unchanged and ignores baseUrl", () => {
expect(
buildAssetUrl(
"https://example.com/foo.png",
{},
"https://cdn.example.com",
),
).toBe("https://example.com/foo.png");
expect(buildAssetUrl("HTTP://example.com/foo.png", {})).toBe(
"HTTP://example.com/foo.png",
);
});
// Manifest miss → keep same-origin; the CDN only serves what was explicitly
// hashed and uploaded, so unknown paths must not be prefixed.
test("does not prefix baseUrl on manifest misses", () => {
expect(
buildAssetUrl("images/unknown.svg", {}, "https://cdn.example.com"),
).toBe("/images/unknown.svg");
});
test("strips trailing slashes on baseUrl to avoid double slash", () => {
const manifest = {
"images/Favicon.svg": "/_assets/images/Favicon.hash.svg",
};
expect(
buildAssetUrl("images/Favicon.svg", manifest, "https://cdn.example.com/"),
).toBe("https://cdn.example.com/_assets/images/Favicon.hash.svg");
expect(
buildAssetUrl(
"images/Favicon.svg",
manifest,
"https://cdn.example.com///",
),
).toBe("https://cdn.example.com/_assets/images/Favicon.hash.svg");
});
});
describe("rewriteAssetsForCdn", () => {
test("rewrites src=/assets/ to EJS placeholder", () => {
const out = rewriteAssetsForCdn(
`<script type="module" crossorigin src="/assets/index-XXX.js"></script>`,
);
expect(out).toBe(
`<script type="module" crossorigin src="<%- locals.cdnBaseRaw || "" %>/assets/index-XXX.js"></script>`,
);
});
test("rewrites href=/assets/ for modulepreload and stylesheet links", () => {
const out = rewriteAssetsForCdn(
`<link rel="modulepreload" href="/assets/vendor-XXX.js">\n<link rel="stylesheet" href="/assets/index-XXX.css">`,
);
expect(out).toBe(
`<link rel="modulepreload" href="<%- locals.cdnBaseRaw || "" %>/assets/vendor-XXX.js">\n<link rel="stylesheet" href="<%- locals.cdnBaseRaw || "" %>/assets/index-XXX.css">`,
);
});
test("supports single-quoted attribute values", () => {
expect(rewriteAssetsForCdn(`<script src='/assets/x.js'></script>`)).toBe(
`<script src='<%- locals.cdnBaseRaw || "" %>/assets/x.js'></script>`,
);
});
test("does not rewrite /_assets/ (underscore manifest paths)", () => {
const html = `<link rel="icon" href="/_assets/images/Favicon.hash.svg">`;
expect(rewriteAssetsForCdn(html)).toBe(html);
});
test("does not rewrite already-absolute asset URLs", () => {
const html = `<script src="https://example.com/assets/foo.js"></script>`;
expect(rewriteAssetsForCdn(html)).toBe(html);
});
// Inline scripts containing the literal "/assets/..." string must survive
// unrewrite — the regex requires whitespace before src=/href=, and inside a
// JS string literal there's no preceding `src=`/`href=` token at all.
test("does not mangle /assets/ inside inline script string literals", () => {
const html = `<script>const url = "/assets/foo";</script>`;
expect(rewriteAssetsForCdn(html)).toBe(html);
});
test("does not match data-src or other custom attributes", () => {
const html = `<img data-src="/assets/foo.png">`;
expect(rewriteAssetsForCdn(html)).toBe(html);
});
});