move some stuff and change how constants are done

5 files changed, 185 insertions, 0 deletions

diff --git a/src/lib/minecraft/Inventory.svelte b/src/lib/minecraft/Inventory.svelte
new file mode 100644
index 0000000..3d3b9c0
--- /dev/null
+++ b/src/lib/minecraft/Inventory.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Item from './Item.svelte'
+
+	export let items
+	export let name = ''
+	export let pack = ''
+
+	if (name === 'inventory')
+		// in the inventory, the first 9 items are the hotbar and should be at the end
+		items = items.slice(9).concat(items.slice(0, 9))
+
+	// each item group has 9 items
+	let itemGroups = []
+	$: {
+		itemGroups = []
+		for (let i = 0; i < items.length; i += 9) {
+			itemGroups.push(items.slice(i, i + 9))
+		}
+	}
+</script>
+
+<div class:inventory-container-{name}={name !== ''}>
+	{#each itemGroups as itemGroup, groupIndex}
+		<div>
+			{#each itemGroup as item}
+				<Item {item} {pack} isslot />
+			{/each}
+		</div>
+	{/each}
+</div>
+
+<!-- {%- macro inventory(items, name='', pack='') -%}
+	<div{% if name %} class="inventory-container-{{ name }}"{% endif %}>
+		{%- if name == 'inventory' -%}
+			{%- set items = items|slice(9)|append(items|slice(0, 9)) -%}
+		{%- endif -%}
+
+		{%- for itemData in items -%}
+			{%- if loop.index0 > 0 and loop.index0 % 9 == 0 %}</div>{%- endif -%}
+			{%- if loop.index0 % 9 == 0 %}<div>{%- endif -%}
+			{{- item(itemData, slot=true, pack=pack) -}}
+		{%- endfor -%}
+		</div>
+	</div>
+{%- endmacro -%} -->
diff --git a/src/lib/minecraft/Item.svelte b/src/lib/minecraft/Item.svelte
new file mode 100644
index 0000000..86bd8f1
--- /dev/null
+++ b/src/lib/minecraft/Item.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { formattingCodeToHtml } from '$lib/utils'
+
+	export let item: any | null
+	export let isslot = true
+	export let pack = ''
+
+	$: itemLoreHtml = item.display.lore.map(l => formattingCodeToHtml(l)).join('<br>')
+	$: itemNameHtml = formattingCodeToHtml(item.display.name)
+</script>
+
+<!-- {#if data}{/if} -->
+
+<!-- {%- macro item(data, slot=true, pack='') -%}
+	{%- if data -%}
+		{%- set itemLoreHtml -%}
+			{%- for line in data.display.lore -%}
+				{{- line|formattingCodeToHtml -}}{% if not loop.last %}<br>{% endif %}
+			{%- endfor -%}
+		{%- endset -%}
+		{%- set itemNameHtml = data.display.name|formattingCodeToHtml -%}
+	{%- endif -%}
+	<span class="item{% if slot %} item-slot{% endif %}"{% if data %} data-lore-html="{{- itemLoreHtml -}}" data-name-html="{{- itemNameHtml -}}"{% endif %}>
+		{%- if data -%}
+			{%- set imageUrl = data|itemToUrl(pack) -%}
+			{%- if imageUrl -%}
+				<img loading="lazy" src="{{ imageUrl }}" alt="{{ data.display.name|removeFormattingCode }}"{% if imageUrl|startsWith('https://mc-heads.net/head/') %} class="item-custom-head"{% endif %}>
+			{%- endif -%}
+			{%- if data.count != 1 %}<span class="item-count">{{ data.count }}</span>{% endif -%}
+		{%- endif -%}
+	</span>
+{%- endmacro -%} -->
diff --git a/src/lib/minecraft/Username.svelte b/src/lib/minecraft/Username.svelte
new file mode 100644
index 0000000..d415511
--- /dev/null
+++ b/src/lib/minecraft/Username.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import ConditionalLink from '$lib/ConditionalLink.svelte'
+	import Head2d from '$lib/heads/Head2d.svelte'
+	import Head3d from '$lib/heads/Head3d.svelte'
+	import { formattingCodeToHtml } from './utils'
+
+	export let player
+	export let headType: null | '3d' | '2d' = null
+	export let hyperlinkToProfile = false
+	export let prefix = false
+</script>
+
+<!-- {%- macro username(player, headType=none, hyperlinkToProfile=false, prefix=false) -%}
+{%- if hyperlinkToProfile %}<a href="/player/{{ player.username }}{% if hyperlinkToProfile|isString %}/{{ hyperlinkToProfile }}{% endif %}">{% endif -%}
+{%- if headType === '3d' %}{{ head3d(player, isPartOfUsername=true) -}}
+{%- elif headType === '2d' %}{{ head2d(player, isPartOfUsername=true) -}}
+{%- endif -%}
+{%- if prefix -%}<span class="username-rank-prefix">{{ player.rank.colored|formattingCodeToHtml|safe }} </span>{%- endif -%}
+		<span class="username" style="color: {{ player.rank.color }}">{{ player.username }}</span>
+{%- if hyperlinkToProfile %}</a>{% endif -%}
+{%- endmacro -%} -->
+
+<ConditionalLink href="/player/{player.username}" isWrapped={hyperlinkToProfile}>
+	{#if headType == '3d'}
+		<Head3d {player} isPartOfUsername={true} />
+	{:else if headType == '2d'}
+		<Head2d {player} isPartOfUsername={true} />
+	{/if}
+	{#if prefix}
+		<span class="username-rank-prefix">
+			{@html formattingCodeToHtml(player.rank.colored)}
+		</span>
+	{/if}
+	<span class="username" style="color: {player.rank.color}">{player.username}</span>
+</ConditionalLink>
+
+<style>
+	.username {
+		/* usernames have the minecraft font */
+		font-family: Minecraft, sans-serif;
+		/* reduce the size of the text because the font is too big */
+		font-size: 0.8em;
+		overflow-wrap: anywhere;
+	}
+
+	.username-rank-prefix {
+		font-family: Minecraft, sans-serif;
+		font-size: 0.8em;
+		overflow-wrap: anywhere;
+	}
+</style>
diff --git a/src/lib/minecraft/heads/Head2d.svelte b/src/lib/minecraft/heads/Head2d.svelte
new file mode 100644
index 0000000..d4e9ca8
--- /dev/null
+++ b/src/lib/minecraft/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/minecraft/heads/Head3d.svelte b/src/lib/minecraft/heads/Head3d.svelte
new file mode 100644
index 0000000..f8d2657
--- /dev/null
+++ b/src/lib/minecraft/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>