This is the initial commit of the sveltekit version of On The Spectrum:

A game brought to you by Sludge and Friends

src/routes/play/+page.svelte

@@ -0,0 +1,72 @@
+<script>
+	let { data } = $props();
+
+	let mode = $state('adult');
+	let axes = $state({ x: [''], y: [''], empty: true });
+	let position = $state({ x: 0, y: 0 });
+	function generateAxes() {
+		// pull Axes in from data using a database
+		axes = { x: ['Spicy', 'Mild'], y: ['Expensive', 'Cheap'], empty: false };
+	}
+	function rollPosition() {
+		function rollD10() {
+			return Math.floor(Math.random() * 10) + 1;
+		}
+		position = { x: rollD10(), y: rollD10() };
+	}
+</script>
+
+<div>
+	<h2>On the Spectrum</h2>
+	<fieldset>
+		<legend>Adult Mode (18+)</legend>
+		<div>
+			<label>
+				<span>Adult</span>
+				<input bind:group={mode} type="radio" value="adult" />
+			</label>
+			<label>
+				<span>Family Friendly</span>
+				<input bind:group={mode} type="radio" value="family" />
+			</label>
+		</div>
+	</fieldset>
+	<fieldset>
+		<legend>Axes Generator</legend>
+		{#if axes.empty}
+			<div>
+				<h3>Click Generate!</h3>
+			</div>
+		{:else}
+			<div>
+				<div>
+					<h4>X-Axis</h4>
+					<p>{axes.x[0]} ↔ {axes.x[1]}</p>
+				</div>
+				<div>
+					<h4>Y-Axis</h4>
+					<p>{axes.y[0]} ↔ {axes.y[1]}</p>
+				</div>
+			</div>
+		{/if}
+		<div>
+			<button onclick={generateAxes}>Generate</button>
+		</div>
+	</fieldset>
+	<fieldset>
+		<legend>Position Roller</legend>
+		{#if position.x == 0}
+			<div>
+				<h3>Click Roll!</h3>
+			</div>
+		{:else}
+			<div>
+				<h4>Position</h4>
+				<p>X:{position.x} | Y:{position.y}</p>
+			</div>
+		{/if}
+		<div>
+			<button onclick={rollPosition}>Generate</button>
+		</div>
+	</fieldset>
+</div>