From adc2cd0d0f006776ccb982a19a98934cd8855132 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Sat, 19 Mar 2022 15:42:03 -0500
Subject: Add random backgrounds for players based on UUID

---
 src/lib/BackgroundImage.svelte | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

(limited to 'src/lib/BackgroundImage.svelte')

diff --git a/src/lib/BackgroundImage.svelte b/src/lib/BackgroundImage.svelte
index 94bbc3f..fd62170 100644
--- a/src/lib/BackgroundImage.svelte
+++ b/src/lib/BackgroundImage.svelte
@@ -1,26 +1,30 @@
 <script lang="ts">
-	import { browser } from '$app/env'
-
 	import { onDestroy } from 'svelte'
+	import { browser } from '$app/env'
 
 	export let url: string
 
-	// cursed svelte :D
-	$: bodyStyle =
-		'<sty' + 'le id="background-image-style">:root{--background:url(' + url + ')}</st' + 'yle>'
+	function updateUrl() {
+		if (!browser) return
+
+		for (const styleEl of document.getElementsByClassName('background-image-style'))
+			styleEl.innerHTML = ''
+
+		// add bodyStyle to the head
+		const style = document.createElement('style')
+		style.classList.add('background-image-style')
+		style.innerHTML = `:root{--background:url(${url})}`
+		document.head.appendChild(style)
+	}
+
+	$: [url, updateUrl()]
 
 	// get rid of the body style when we leave the page
 	// not doing this will sometimes cause the background to stay
 	onDestroy(() => {
-		bodyStyle = ''
-		// hack since sometimes the style is not removed
 		if (browser) {
-			let styleEl = document.getElementById('background-image-style')
-			if (styleEl) styleEl.innerHTML = ''
+			for (const styleEl of document.getElementsByClassName('background-image-style'))
+				styleEl.innerHTML = ''
 		}
 	})
 </script>
-
-<svelte:head>
-	{@html bodyStyle}
-</svelte:head>
-- 
cgit