initial commit

src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import '../app.css';
+
+	let { children } = $props();
+</script>
+
+{@render children()}

src/routes/+page.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import Geolocation from 'svelte-geolocation';
+	import type { GeolocationError } from 'svelte-geolocation/Geolocation.svelte';
+
+	let getPosition: boolean = $state(false);
+	let loading: boolean = $state(false);
+	let position: GeolocationPosition | undefined = $state(undefined);
+	let error: GeolocationError | undefined = $state(undefined);
+
+	function flipGetPosition(): void {
+		getPosition = true;
+	}
+
+	function goToPlayer(): void {
+		goto(`/on-out?lat=${position?.coords.latitude}&long=${position?.coords.longitude}`);
+	}
+</script>
+
+{#if !getPosition}
+	<button onclick={flipGetPosition}> Find yourself </button>
+{:else if loading}
+	<p>Loading...</p>
+{:else if error}
+	<p>We can't seem to find you.</p>
+{:else}
+	<p>Your Position is set as: {position?.coords?.latitude}, {position?.coords?.longitude}</p>
+	<button onclick={goToPlayer}>Ok, on-out with it</button>
+{/if}
+
+<Geolocation {getPosition} bind:position bind:loading bind:error />

src/routes/on-out/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { page } from '$app/state';
+
+	const lat = $derived(page.url.searchParams.get('lat'));
+	const long = $derived(page.url.searchParams.get('long'));
+
+	$inspect(lat);
+	$inspect(long);
+</script>

src/routes/page.svelte.test.ts

@@ -0,0 +1,13 @@
+import { page } from '@vitest/browser/context';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import Page from './+page.svelte';
+
+describe('/+page.svelte', () => {
+	it('should render h1', async () => {
+		render(Page);
+
+		const heading = page.getByRole('heading', { level: 1 });
+		await expect.element(heading).toBeInTheDocument();
+	});
+});