Clean up bestiary window layout

Closes #675
arianne · Jul 9, 2024 · 0c32227 · 0c32227
1 parent a39f2e6
commit 0c32227
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/src/js/css/main.css b/src/js/css/main.css
@@ -41,6 +41,10 @@ input {
 	display: none;
 }
 
+.center-text {
+	text-align: center;
+}
+
 input:invalid {
 	border: 2px dashed red;
 }
@@ -600,6 +604,12 @@ div.logcolR {
 	overflow-y: scroll;
 }
 
+.bestiary-cell {
+	min-width: 3em;
+	min-height: 1em;
+	padding: 4px;
+}
+
 .progressbar {
 	border: 1px solid #005;
 	line-height: 5vh;

diff --git a/src/js/stendhal/event/BestiaryEvent.ts b/src/js/stendhal/event/BestiaryEvent.ts
@@ -52,8 +52,6 @@ export class BestiaryEvent extends RPEvent {
 
 		// --- contents --- //
 
-		// TODO: clean up columns
-
 		const content = new class extends DialogContentComponent {} ("empty-div-template");
 		content.setConfigId("bestiary");
 		content.componentElement.classList.add("bestiary");
@@ -63,16 +61,18 @@ export class BestiaryEvent extends RPEvent {
 		const col1 = document.createElement("div");
 		const col2 = document.createElement("div");
 		const col3 = document.createElement("div");
-		col1.className = "verticalgroup stretchgroup";
-		col2.className = "verticalgroup stretchgroup";
-		col3.className = "verticalgroup stretchgroup";
+		for (const col of [col1, col2, col3]) {
+			col.classList.add("verticalgroup", "stretchgroup");
+		}
 
 		const t1 = document.createElement("div");
 		const t2 = document.createElement("div");
 		const t3 = document.createElement("div");
-		t1.classList.add("shopcol");
-		t2.classList.add("shopcol");
-		t3.classList.add("shopcol");
+		for (const t of [t1, t2, t3]) {
+			t.classList.add("shopcol", "bestiary-cell");
+		}
+		t2.classList.add("center-text");
+		t3.classList.add("center-text");
 		t1.textContent = "Name";
 		t2.textContent = "Solo";
 		t3.textContent = "Shared";
@@ -83,9 +83,8 @@ export class BestiaryEvent extends RPEvent {
 
 		for (const e of this["enemies"].split(";")) {
 			const info = e.split(",");
-			// empty text will not render outline
-			let solo = "-";
-			let shared = "-";
+			let solo = "";
+			let shared = "";
 			if (info[1] == "true") {
 				solo = "✔";
 			}
@@ -96,9 +95,11 @@ export class BestiaryEvent extends RPEvent {
 			const l1 = document.createElement("div");
 			const l2 = document.createElement("div");
 			const l3 = document.createElement("div");
-			l1.classList.add("shopcol");
-			l2.classList.add("shopcol");
-			l3.classList.add("shopcol");
+			for (const li of [l1, l2, l3]) {
+				li.classList.add("shopcol", "bestiary-cell");
+			}
+			l2.classList.add("center-text");
+			l3.classList.add("center-text");
 
 			l1.textContent = info[0];
 			l2.textContent = solo;