refactor(loldle): align display labels with loldle.net grid

Column headers now match loldle.net's classic-mode grid verbatim:
Range → Range type, Region → Region(s), Lane → Position(s),
Year → Release year. The champion row header becomes Champion (was
Name). Data field names already matched; only labels diverged.
This commit is contained in:
2026-04-22 13:54:23 +07:00
parent e1f7cdf645
commit 61f1cd79b7
3 changed files with 24 additions and 21 deletions
+18 -16
View File
@@ -5,13 +5,13 @@ import { renderBoard, renderGuess } from "../../../src/modules/loldle/render.js"
const sampleResults = [
{ key: "gender", label: "Gender", result: "correct", guessValue: "Male" },
{ key: "species", label: "Species", result: "correct", guessValue: "Human, Darkin" },
{ key: "attackType", label: "Range", result: "correct", guessValue: "Ranged" },
{ key: "range_type", label: "Range type", result: "correct", guessValue: "Ranged" },
{ key: "resource", label: "Resource", result: "correct", guessValue: "Mana" },
{ key: "region", label: "Region", result: "correct", guessValue: "Runeterra" },
{ key: "lane", label: "Lane", result: "partial", guessValue: "Jungle, Support" },
{ key: "regions", label: "Region(s)", result: "correct", guessValue: "Runeterra" },
{ key: "positions", label: "Position(s)", result: "partial", guessValue: "Jungle, Support" },
{
key: "release_date",
label: "Year",
label: "Release year",
result: "wrong",
direction: "up",
guessValue: "2011",
@@ -27,24 +27,24 @@ describe("renderGuess", () => {
it("uppercases champion name on the 🎯 row", () => {
const out = renderGuess("Rakan", sampleResults);
expect(out).toContain("🎯 Name");
expect(out).toContain("🎯 Champion");
expect(out).toContain("RAKAN");
expect(out).not.toContain(" Rakan");
});
it("auto-widths label column to the longest label (Resource = 8)", () => {
it("auto-widths label column to the longest label (Release year = 12)", () => {
const out = renderGuess("Brand", sampleResults);
// "Name" (4) padded to 8 → 4 trailing spaces + the single separator space.
expect(out).toContain("🎯 Name BRAND");
// "Resource" (8) = exact width, single separator space before value.
expect(out).toContain(" Resource Mana");
// "Gender" (6) padded to 82 trailing + 1 separator = 3 spaces before value.
expect(out).toContain("✅ Gender Male");
// "Champion" (8) padded to 12 → 4 trailing + 1 separator = 5 spaces.
expect(out).toContain("🎯 Champion BRAND");
// "Release year" (12) = exact width, single separator.
expect(out).toContain(" Release year 2011");
// "Gender" (6) padded to 126 trailing + 1 separator = 7 spaces.
expect(out).toContain("✅ Gender Male");
});
it("appends ⬆️ / ⬇️ year direction hints only when wrong", () => {
const up = renderGuess("Brand", sampleResults);
expect(up).toContain("❌ Year");
expect(up).toContain("❌ Release year");
expect(up).toContain("2011 ⬆️");
const correctYear = sampleResults.map((r) =>
@@ -56,7 +56,9 @@ describe("renderGuess", () => {
});
it("HTML-escapes values so < and > render literally", () => {
const evil = [{ key: "region", label: "Region", result: "wrong", guessValue: "<script>" }];
const evil = [
{ key: "regions", label: "Region(s)", result: "wrong", guessValue: "<script>" },
];
const out = renderGuess("Foo", evil);
expect(out).toContain("&lt;script&gt;");
expect(out).not.toContain("<script>");
@@ -75,7 +77,7 @@ describe("renderBoard", () => {
]);
expect(out.startsWith("<pre>")).toBe(true);
expect(out.endsWith("</pre>")).toBe(true);
expect(out).toContain("🎯 Name AHRI");
expect(out).toContain("🎯 Name BRAND");
expect(out).toContain("🎯 Champion AHRI");
expect(out).toContain("🎯 Champion BRAND");
});
});