Show profile and player uuids under infobox

1 files changed, 24 insertions, 7 deletions

diff --git a/src/lib/sections/Infobox.svelte b/src/lib/sections/Infobox.svelte
index 7670dec..dd59265 100644
--- a/src/lib/sections/Infobox.svelte
+++ b/src/lib/sections/Infobox.svelte
@@ -16,24 +16,41 @@
 	// })
 </script>
 
-<div id="infobox">
-	<h2><Username player={data.member} prefix /> ({data.member.profileName})</h2>
-	{#each generateInfobox(data) as item}
-		<p><Emoji value={item} /></p>
-	{/each}
+<div id="infobox-container">
+	<div id="infobox">
+		<h2><Username player={data.member} prefix /> ({data.member.profileName})</h2>
+		{#each generateInfobox(data) as item}
+			<p><Emoji value={item} /></p>
+		{/each}
+	</div>
+	<div id="infobox-extra">
+		<p>Player UUID:</p>
+		<b><code>{data.member.uuid}</code></b>
+		<p>Profile UUID:</p>
+		<b><code>{data.profile.uuid}</code></b>
+	</div>
 </div>
 
 <style>
-	#infobox {
+	#infobox-container {
 		float: right;
 		max-width: 95%;
+		width: 20em;
+	}
+	#infobox {
 		background-color: rgba(20, 20, 20, 0.4);
 		padding: 1em;
 		margin-top: 2em;
-		width: 20em;
 		border-radius: 0.5em;
 		box-shadow: 0 0 1em #000;
 	}
+	#infobox-extra {
+		opacity: 0.5;
+		margin-top: 0.5rem;
+	}
+	#infobox-extra p {
+		margin: 0;
+	}
 	p {
 		margin: 0 0 0.25em 0;
 	}