From 29470f7cece971d9a4d22f8cceb7e4e1ed264bbe Mon Sep 17 00:00:00 2001 From: Samir Boulema Date: Wed, 6 May 2026 13:53:30 +0200 Subject: [PATCH] feat: Render as table instead of list --- jest/fixtures/content.ts | 4 ++-- src/renderer.ts | 32 ++++++++++++++++++-------------- styles.css | 18 ++++++++++++------ 3 files changed, 32 insertions(+), 22 deletions(-) diff --git a/jest/fixtures/content.ts b/jest/fixtures/content.ts index dbe779c..d9d8d1e 100644 --- a/jest/fixtures/content.ts +++ b/jest/fixtures/content.ts @@ -23,7 +23,7 @@ Sideboard: 4 Ertai's Scorn`; export const EXAMPLE_DECK_1_HTML = ` -

Deck

52 / 60cards$32.25 / $45.23

Sideboard:

10 / 15cards$0.74 / $5.19

Buylist: 

1 Delver of Secrets // Insectile Aberration
+
Deck
Delver of Secrets // Insectile Aberration$1.23 / $1.64
Haughty Djinn$4.80 / $6.40
3Tolarian Terror$0.69
4Consider$7.24
4Essence Scatter$0.20
4Fading Hope$2.36
4Make Disappear consider Negate instead$0.44
Slip Out the Back$0.00 / $6.80
3Spell Pierce$0.27
3Thirst for Discovery$0.48
# Lands
20Island$1.80
1Otawara, Soaring City$12.74
Otherworldly Gaze$0.00 / $0.24
Reckoner Bankbuster$0.00 / $3.93
52 / 60cards$32.25 / $45.23
Sideboard:
2Disdainful Stroke$0.18
4Negate$0.36
4Out of the Way$0.20
Reckoner Bankbuster$0.00 / $3.93
Ertai's Scorn$0.00 / $0.52
10 / 15cards$0.74 / $5.19
Buylist: 
1 Delver of Secrets // Insectile Aberration
 1 Haughty Djinn
 4 Slip Out the Back
 1 Otherworldly Gaze
@@ -32,7 +32,7 @@ export const EXAMPLE_DECK_1_HTML = `
 
13 cards$17.43
`;
 
 export const EXAMPLE_DECK_1_HTML_WITHOUT_PRICES = `
-
Deck
52 / 60cards
Sideboard:
10 / 15cards
Buylist: 
1 Delver of Secrets // Insectile Aberration
+
Deck
Delver of Secrets // Insectile Aberration
Haughty Djinn
3Tolarian Terror
4Consider
4Essence Scatter
4Fading Hope
4Make Disappear consider Negate instead
Slip Out the Back
3Spell Pierce
3Thirst for Discovery
# Lands
20Island
1Otawara, Soaring City
Otherworldly Gaze
Reckoner Bankbuster
52 / 60cards
Sideboard:
2Disdainful Stroke
4Negate
4Out of the Way
Reckoner Bankbuster
Ertai's Scorn
10 / 15cards
Buylist: 
1 Delver of Secrets // Insectile Aberration
 1 Haughty Djinn
 4 Slip Out the Back
 1 Otherworldly Gaze
diff --git a/src/renderer.ts b/src/renderer.ts
index f873bfe..82d7240 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -265,19 +265,28 @@ export const renderDecklist = async (
 		// Create a heading
 		const sectionHeadingEl = sectionContainer.createEl("h3", { cls: "decklist__section-heading" });
 
-		// Create container for the list items
-		const sectionList = sectionContainer.createEl("ul", { cls: "decklist__section-list" });
+		// Create container for the table rows
+		const sectionList = sectionContainer.createEl("table", { cls: "decklist__section-list" });
+		const sectionListBody = sectionList.createEl("tbody");
 
 		const sectionMissingCardCounts: CardCounts = {};
 
 		// Create line item elements
 		linesBySection[section].forEach((line: Line) => {
-			const lineEl = sectionList.createEl("li", { cls: "decklist__section-list-item" });
+			const lineEl = sectionListBody.createEl("tr", { cls: "decklist__section-list-item" });
 
 			if (line.lineType === "card") {
-				const cardCountEl = lineEl.createSpan({ cls: "count" });
+				const cardCountCell = lineEl.createEl("td");
+				const cardCountEl = cardCountCell.createSpan({ cls: "count" });
 
-				const cardNameEl = lineEl.createSpan({ cls: "card-name" });
+				const cardNameCell = lineEl.createEl("td");
+				const cardNameEl = cardNameCell.createSpan({ cls: "card-name" });
+
+				const cardCommentsCell = lineEl.createEl("td");
+				const cardCommentsEl = cardCommentsCell.createSpan({ cls: "comment" });
+
+				const cardPriceCell = lineEl.createEl("td");
+				const cardPriceEl = cardPriceCell.createSpan({ cls: "card-price" });
 
 				// Add hyperlink when possible
 				if (line.cardName) {
@@ -301,20 +310,14 @@ export const renderDecklist = async (
 				}
 
 				if (line.errors && line.errors.length) {
-					lineEl.createSpan({
+					cardNameEl.createSpan({
 						cls: "error",
 						text: line.errors?.join(",") || "",
 					});
 				}
 
-				const cardCommentsEl = lineEl.createSpan({
-					cls: "comment",
-					text: line.comments?.join("#") || "",
-				});
+				cardCommentsEl.textContent = line.comments?.join("#") || "";
 
-				const cardPriceEl = lineEl.createSpan({
-					cls: "card-price",
-				});
 				let cardPrice;
 				if (line.cardName) {
 					cardPrice = getCardPrice(
@@ -436,7 +439,8 @@ export const renderDecklist = async (
 				}
 			} else if (line.lineType === "comment") {
 				// Comments
-				lineEl.createSpan({
+				const commentCell = lineEl.createEl("td", { attr: { colspan: "4" } });
+				commentCell.createSpan({
 					cls: "comment",
 					text: line.comments?.join(" ") || "",
 				});
diff --git a/styles.css b/styles.css
index 073afae..ef8e1b3 100644
--- a/styles.css
+++ b/styles.css
@@ -11,10 +11,16 @@ If your plugin does not need CSS, delete this file.
 	padding: 8px;
 }
 
-ul.decklist__section-list {
-	list-style: none;
+table.decklist__section-list {
+	border-collapse: collapse;
 	margin: 0;
 	padding: 0;
+	width: 100%;
+}
+
+table.decklist__section-list td {
+	padding: 0;
+	vertical-align: top;
 }
 
 .decklist__section-totals {
@@ -29,13 +35,13 @@ span.decklist__section-totals__count {
 	flex: 1;
 }
 
-.decklist__section-list-item {
+tr.decklist__section-list-item {
 	font-weight: 400;
-	display: flex;
 }
 
-.decklist__section-list-item span {
-	flex: 1;
+tr.decklist__section-list-item span {
+	display: block;
+	width: 100%;
 }
 
 .count {