2 files changed, 57 insertions, 0 deletions
diff --git a/src/lib/heads/Head2d.svelte b/src/lib/heads/Head2d.svelte
new file mode 100644
index 0000000..d4e9ca8
--- /dev/null
+++ b/src/lib/heads/Head2d.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	export let player
+	export let isPartOfUsername = false
+</script>
+
+<img
+	loading="lazy"
+	class="head head2d"
+	class:userHead={isPartOfUsername}
+	src="https://crafatar.com/avatars/{player.uuid}?size=8&overlay"
+	alt="{player.username}'s face"
+/>
+
+<style>
+	.head {
+		user-select: none;
+	}
+
+	.head2d {
+		/* pixelated rendering on 2d heads */
+		image-rendering: crisp-edges;
+		image-rendering: pixelated;
+		/* make the head centered correctly */
+		position: relative;
+		top: 0.1em;
+		/* same size as font */
+		height: 1em;
+		width: 1em;
+	}
+</style>
diff --git a/src/lib/heads/Head3d.svelte b/src/lib/heads/Head3d.svelte
new file mode 100644
index 0000000..f8d2657
--- /dev/null
+++ b/src/lib/heads/Head3d.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	export let player
+	export let isPartOfUsername = false
+</script>
+
+<img
+	loading="lazy"
+	class="head head3d"
+	class:userHead={isPartOfUsername}
+	src="https://www.mc-heads.net/head/{player.uuid}/128"
+	alt="{player.username}'s head"
+/>
+
+<style>
+	.head {
+		user-select: none;
+	}
+
+	.head3d {
+		/* make the head centered correctly */
+		position: relative;
+		top: 0.2em;
+		/* same size as font */
+		height: 1em;
+		width: 1em;
+	}
+</style>