From 0c32227a7babe80379fea4f3acc058cdb0a69cda Mon Sep 17 00:00:00 2001
From: Jordan Irwin <antumdeluge@gmail.com>
Date: Tue, 9 Jul 2024 14:56:23 -0700
Subject: [PATCH] Clean up bestiary window layout

Closes https://github.com/arianne/stendhal/issues/675
---
 src/js/css/main.css                    | 10 +++++++++
 src/js/stendhal/event/BestiaryEvent.ts | 29 +++++++++++++-------------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/js/css/main.css b/src/js/css/main.css
index 9b9658e93f..47b6a10431 100644
--- 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
index 54f931125b..b6c3d1d47c 100644
--- 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;