From 61f1cd79b7af7ba435451ed7ac178aa182c57cc5 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Wed, 22 Apr 2026 13:54:23 +0700
Subject: [PATCH] refactor(loldle): align display labels with loldle.net grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/modules/loldle/compare.js       |  9 ++++----
 src/modules/loldle/render.js        |  2 +-
 tests/modules/loldle/render.test.js | 34 +++++++++++++++--------------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/modules/loldle/compare.js b/src/modules/loldle/compare.js
index d73a9ff..a77048e 100644
--- a/src/modules/loldle/compare.js
+++ b/src/modules/loldle/compare.js
@@ -6,14 +6,15 @@
  * range_type) are arrays, and `release_date` is an ISO "YYYY-MM-DD" string.
  */
 
+// Labels match loldle.net's classic-mode grid headers verbatim.
 export const CLASSIC_ATTRIBUTES = [
   { key: "gender", label: "Gender", type: "exact" },
   { key: "species", label: "Species", type: "multi" },
-  { key: "range_type", label: "Range", type: "multi" },
+  { key: "range_type", label: "Range type", type: "multi" },
   { key: "resource", label: "Resource", type: "exact" },
-  { key: "regions", label: "Region", type: "multi" },
-  { key: "positions", label: "Lane", type: "multi" },
-  { key: "release_date", label: "Year", type: "year" },
+  { key: "regions", label: "Region(s)", type: "multi" },
+  { key: "positions", label: "Position(s)", type: "multi" },
+  { key: "release_date", label: "Release year", type: "year" },
 ];
 
 /**
diff --git a/src/modules/loldle/render.js b/src/modules/loldle/render.js
index 43781c5..9312a99 100644
--- a/src/modules/loldle/render.js
+++ b/src/modules/loldle/render.js
@@ -9,7 +9,7 @@ import { escapeHtml } from "../../util/escape-html.js";
 
 const MARKER = { correct: "✅", partial: "🟨", wrong: "❌" };
 const ARROW = { up: "⬆️", down: "⬇️" };
-const NAME_LABEL = "Name";
+const NAME_LABEL = "Champion";
 const NAME_MARKER = "🎯";
 
 /**
diff --git a/tests/modules/loldle/render.test.js b/tests/modules/loldle/render.test.js
index 97df180..11fcbe6 100644
--- a/tests/modules/loldle/render.test.js
+++ b/tests/modules/loldle/render.test.js
@@ -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 8 → 2 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 12 → 6 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");
   });
 });