Definitely not an easter egg

src/components/misc/musicselectionmodal.svelte

@@ -3,6 +3,7 @@
 	import musicStore from '../../stores/musicStore';
 
 	export let show = false;
+	let showMusicMan = false;
 
 	/**
 	 * @type {{ musicTitle: string; musicUrl: string; musicArtist: string; }[]}
@@ -28,12 +29,17 @@
 	<div
 		on:click={() => {
 			show = !show;
+			showMusicMan = false;
 		}}
 		class="h-screen w-screen bg-opacity-60 bg-black fixed top-0 left-0 z-10 py-20 "
 	>
-		<div class="h-full w-3/4 bg-red-100 mx-auto rounded-xl overflow-auto pb-3">
+		<div on:click|stopPropagation class="h-full w-3/4 bg-red-100 mx-auto rounded-xl overflow-auto pb-3">
 			<div class="w-full bg-indigo-200 rounded-t-xl p-3">
-				<span>Music Selection</span>
+				<span
+					on:click={() => {
+						showMusicMan = true;
+					}}>Music Selection</span
+				>
 			</div>
 			<div class="grid grid-cols-1 lg:grid-cols-2">
 				{#each musicSelection as v}
@@ -46,6 +52,19 @@
 						{v.musicArtist} - {v.musicTitle}
 					</ul>
 				{/each}
+				{#if showMusicMan}
+					<ul on:click={() => {
+						setSong({
+							musicTitle: 'MUUUSIC MAN!',
+							musicArtist: 'MatPat',
+							musicUrl: '/music/MUUUSIC-MAN!.opus'
+						})
+					}}
+						class="ml-3 mt-3 hover:cursor-pointer underline shadow-lg hover:shadow-xl w-max bg-indigo-100 p-2 rounded-md"
+					>
+						MUSIC MAN!!
+					</ul>
+				{/if}
 			</div>
 		</div>
 	</div>

src/routes/__layout.svelte

@@ -19,7 +19,7 @@
 			$CurrentMusicStore.musicUrl = $musicStore[0].musicUrl;
 		}
 
-		$CurrentMusicStore.paused = !$CurrentMusicStore.paused
+		$CurrentMusicStore.paused = !$CurrentMusicStore.paused;
 		return;
 	}
 
@@ -38,22 +38,28 @@
 	<!-- Possible alert header -->
 	<!--<AlertHeader text='ALERT'/>-->
 	<div class="bg-slate-100 w-full h-min md:h-10 lg:pl-20">
-		<button on:click={onMusicToggle} class="bg-white border-black border rounded h-min w-20">
-			{#if musicPaused}
-				<span class="font-mono">▶</span>
-				Play
-			{:else}
-				<span class="font-mono ">⏸&#xFE0E;</span>
-				Pause
-			{/if}
-		</button>
-		<button class="bg-white border-black border rounded h-min"
-			on:click={() => {
-				modalShow = !modalShow;
-			}}>Show music selection</button
-		>
-		<br class="block md:hidden">
-		<span>Current song: {musicArtist} - {musicTitle}</span>
+		<div class="h-full">
+			<button
+				on:click={onMusicToggle}
+				class="bg-white border-black border rounded h-min w-20 my-auto"
+			>
+				{#if musicPaused}
+					<span class="font-mono">▶</span>
+					Play
+				{:else}
+					<span class="font-mono ">⏸&#xFE0E;</span>
+					Pause
+				{/if}
+			</button>
+			<button
+				class="bg-white border-black border rounded h-min"
+				on:click={() => {
+					modalShow = !modalShow;
+				}}>Show music selection</button
+			>
+			<br class="block md:hidden" />
+			<span>Current song: {musicArtist} - {musicTitle}</span>
+		</div>
 	</div>
 	<!-- Header -->
 	<Header />