From 9e4af403ae6b19cd8e60e4733dff476a559f967a Mon Sep 17 00:00:00 2001
From: Isaiah Billingsley <iza.billingsley@gmail.com>
Date: Sun, 22 Feb 2026 15:42:21 -0500
Subject: [PATCH] Show ??? for missing bsr key, revert Expert+ spacing

---
 index.html |  2 +-
 main.js    | 13 +++++++------
 style.css  |  4 ++++
 types.d.ts |  4 +++-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 423c5c3..63c1c6d 100644
--- a/index.html
+++ b/index.html
@@ -22,8 +22,8 @@
 			<span id="difficulty">Easy</span>
 			<img id="characteristicIcon" src="images/characteristic/Standard.svg">
 			<span id="difficultyLabel">Diff Label</span>
+			<span id="type"></span>
 			<span id="bsrKey">25f</span>
-			<span id="type">WIP</span>
 		</div>
 	</div>
 	<script src="main.js"></script>
diff --git a/main.js b/main.js
index 3a2dec2..4476e30 100644
--- a/main.js
+++ b/main.js
@@ -55,25 +55,26 @@ const mapper = document.getElementById("mapper");
 const difficulty = document.getElementById("difficulty");
 const characteristicIcon = document.getElementById("characteristicIcon");
 const difficultyLabel = document.getElementById("difficultyLabel");
-const bsrKey = document.getElementById("bsrKey");
 const type = document.getElementById("type");
+const bsrKey = document.getElementById("bsrKey");
 
 /** @param {MapInfoChanged} data */
 async function updateMapInfo(data) {
 	const custom = data.level_id.startsWith("custom_level_");
+	const wip = custom && data.level_id.endsWith("WIP");
 	cover.style.backgroundImage = data.coverRaw ? `url("data:image/jpeg;base64,${data.coverRaw}")` : "";
 	title.textContent = data.name || "";
 	subTitle.textContent = data.sub_name || "";
 	artist.textContent = data.artist || "";
 	mapper.textContent = data.mapper || "";
-	difficulty.textContent = data.difficulty.replace("Plus", "\u2009+") || "";
-	characteristicIcon.setAttribute("src", `images/characteristic/${data.characteristic}.svg`);
+	difficulty.textContent = data.difficulty.replace("Plus", " +") || "";
+	characteristicIcon.src = `images/characteristic/${data.characteristic}.svg`;
 	difficultyLabel.textContent = ""; // BS+ does not provide label
-	bsrKey.textContent = data.BSRKey || ""; // Always empty?
-	type.textContent = !custom ? "OST" : data.level_id.endsWith(" WIP") ? "WIP" : "";
+	type.textContent = !custom ? "OST" : wip ? "WIP" : "";
+	bsrKey.textContent = data.BSRKey || "???"; // Always empty?
 
 	// Fetch extra info from BeatSaver
-	if (custom) {
+	if (custom && !wip) {
 		document.body.classList.add("loading");
 		try {
 			const response = await fetch(`https://api.beatsaver.com/maps/hash/${data.level_id.substring(13, 53)}`);
diff --git a/style.css b/style.css
index da838ce..6c4e662 100644
--- a/style.css
+++ b/style.css
@@ -112,3 +112,7 @@ body:not([data-game-state="Playing"]) {
 	content: "!bsr ";
 	letter-spacing: normal;
 }
+
+#type:not(:empty) + #bsrKey {
+	display: none;
+}
diff --git a/types.d.ts b/types.d.ts
index 069b57e..8e17f1e 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -64,5 +64,7 @@ type BeatSaberPlusEvent = HandshakeEvent | GameStateEvent | ResumeEvent | PauseE
 type MapInfoChanged = MapInfoChangedEvent["mapInfoChanged"];
 
 interface Document {
-	getElementById(elementId: string): HTMLElement; // Assume non-null
+	// Assume non-null
+	getElementById(elementId: `${string}Icon`): HTMLImageElement;
+	getElementById(elementId: string): HTMLElement;
 }