add more things

src/routes/retro/MusicPlayer.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import Forward from './icons/Forward.svelte'
+	import Backward from './icons/Backward.svelte'
+	import Pause from './icons/Pause.svelte'
+	import Play from './icons/Play.svelte'
+	import { browser } from '$app/environment'
+	import { onMount } from 'svelte'
+
+	let musicPlayerEl: HTMLAudioElement | undefined = undefined
+
+	let playing = false
+	let volume = 50
+
+	$: if (musicPlayerEl) musicPlayerEl.volume = volume / 100
+	$: if (musicPlayerEl) {
+		if (playing) {
+			musicPlayerEl.play()
+		} else {
+			musicPlayerEl.pause()
+		}
+	}
+	$: console.log(playing)
+
+	const SONGS = [
+		'C418 - Thunderbird',
+		'Garoad - Every Day Is Night',
+		'Peppsen - Blueprint',
+		'Epic Mountain - Stellar Engines',
+		"Toby Fox - A CYBER'S WORLD",
+		'Toby Fox - Faint Glow',
+		'Toby Fox - My Castle Town',
+	]
+	function shuffleArray(array: any[]) {
+		for (var i = array.length - 1; i > 0; i--) {
+			var j = Math.floor(Math.random() * (i + 1))
+			var temp = array[i]
+			array[i] = array[j]
+			array[j] = temp
+		}
+	}
+	if (browser) shuffleArray(SONGS)
+
+	let currentSongIndex = 0
+	let currentSong: string
+	$: {
+		currentSong = SONGS[currentSongIndex]
+	}
+
+	let currentSong_: string | null = null
+	$: if (musicPlayerEl) {
+		if (currentSong_ !== currentSong) {
+			const newSrc = `/retro/music/${currentSong}.mp3`
+			musicPlayerEl.src = newSrc
+			musicPlayerEl.load()
+			currentSong_ = currentSong
+		}
+	}
+
+	function nextSong() {
+		currentSongIndex = (currentSongIndex + 1) % SONGS.length
+	}
+
+	function prevSong() {
+		currentSongIndex = (currentSongIndex - 1 + SONGS.length) % SONGS.length
+	}
+</script>
+
+<audio bind:this={musicPlayerEl} on:ended={nextSong} />
+
+<table class="music-player">
+	<tr>
+		<td>
+			<button on:click={prevSong}>
+				<Backward />
+			</button>
+		</td>
+		<td>
+			<button on:click={() => (playing = !playing)}>
+				{#if playing}
+					<Pause />
+				{:else}
+					<Play />
+				{/if}
+			</button>
+		</td>
+		<td>
+			<button on:click={nextSong}>
+				<Forward />
+			</button>
+		</td>
+		<td>
+			<span class="song-name-container">
+				<span class="song-name">Now playing: {playing ? currentSong : 'Nothing'}</span>
+			</span>
+		</td>
+		<td>
+			<input type="range" min="0" max="100" class="volume-slider" bind:value={volume} />
+		</td>
+	</tr>
+</table>
+
+<style>
+	.music-player {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+
+		background: linear-gradient(0deg, #600, #800);
+		border: 1px solid #000;
+
+		width: 300px;
+	}
+
+	button {
+		border: none;
+		background: none;
+		padding: 0;
+		margin: 0;
+		cursor: pointer;
+		width: 2em;
+		height: 2em;
+		fill: #fff;
+		filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
+
+		/* vertically center */
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.song-name-container {
+		box-shadow: inset 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
+		padding: 0.3em;
+		font-family: sans-serif;
+		border-radius: 0.2em;
+
+		width: 300px;
+		display: block;
+		overflow: auto;
+	}
+
+	.song-name {
+		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+		white-space: nowrap;
+	}
+
+	.volume-slider {
+		width: 100px;
+	}
+</style>

src/routes/retro/icons/Backward.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"
+	><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path
+		d="M267.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160L64 241V96c0-17.7-14.3-32-32-32S0 78.3 0 96V416c0 17.7 14.3 32 32 32s32-14.3 32-32V271l11.5 9.6 192 160z"
+	/></svg
+>

src/routes/retro/icons/Forward.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"
+	><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path
+		d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241V96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V271l-11.5 9.6-192 160z"
+	/></svg
+>

src/routes/retro/icons/Pause.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"
+	><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path
+		d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"
+	/></svg
+>

src/routes/retro/icons/Play.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"
+	><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path
+		d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"
+	/></svg
+>

static/retro/buttons/README.md

@@ -0,0 +1 @@
+buttons are in the static directory so vite doesn't inline them because ie5 [doesn't like big base64 data urls](https://support.microsoft.com/en-us/topic/maximum-url-length-is-2-083-characters-in-internet-explorer-174e7c8a-6666-f4e0-6fd6-908b53c12246).