jawhng/hear-on-out
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add ability to set manual coords

Browse Source
This commit is contained in:
Georgi Durankiev
2025-12-29 16:17:38 +02:00
parent 07a5cca3b3
commit b9ed7de228
1 changed files with 89 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/routes/+page.svelte
View File

@@ -8,6 +8,11 @@
let position: GeolocationPosition | undefined = $state(undefined);
let error: GeolocationError | undefined = $state(undefined);
// Manual coordinate entry
let manualLat: string = $state('');
let manualLong: string = $state('');
let manualError: string = $state('');
let options = {
enableHighAccuracy: false, // Use WiFi/network location (faster than GPS)
timeout: 10000, // milliseconds - increased for better reliability
@@ -23,22 +28,101 @@
function goToPlayer(): void {
goto(`/on-out?lat=${position?.coords.latitude}&long=${position?.coords.longitude}`);
}
function goWithManualCoords(): void {
// Validate coordinates
const lat = parseFloat(manualLat);
const long = parseFloat(manualLong);
if (isNaN(lat) || isNaN(long)) {
manualError = 'Please enter valid numbers';
return;
}
if (lat < -90 || lat > 90) {
manualError = 'Latitude must be between -90 and 90';
return;
}
if (long < -180 || long > 180) {
manualError = 'Longitude must be between -180 and 180';
return;
}
manualError = '';
goto(`/on-out?lat=${lat}&long=${long}`);
}
</script>
<div class="flex min-h-screen flex-col items-center justify-center">
<div class="flex min-h-screen flex-col items-center justify-center gap-8 px-4">
{#if !getPosition}
<button class="animate-pulse cursor-crosshair text-xl hover:text-blue-400 transition-colors" onclick={flipGetPosition}>
Let me show you...
<button class="animate-pulse cursor-crosshair text-xl hover:opacity-70 transition-opacity" onclick={flipGetPosition}>
Let me find you...
</button>
<p class="text-base opacity-60">OR</p>
<div class="flex flex-col gap-4 w-full max-w-xs">
<input
type="text"
placeholder="Latitude (e.g., 40.7128)"
bind:value={manualLat}
class="px-4 py-2 bg-transparent border border-white/20 rounded-md text-center focus:border-white/40 focus:outline-none transition-colors"
/>
<input
type="text"
placeholder="Longitude (e.g., -74.0060)"
bind:value={manualLong}
class="px-4 py-2 bg-transparent border border-white/20 rounded-md text-center focus:border-white/40 focus:outline-none transition-colors"
/>
{#if manualError}
<p class="text-sm opacity-60 text-center">{manualError}</p>
{/if}
<button
class="px-6 py-2 cursor-crosshair border border-white/20 rounded-md hover:border-white/40 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
onclick={goWithManualCoords}
disabled={!manualLat || !manualLong}
>
Go
</button>
</div>
{:else if loading}
<p class="text-xl">Loading...</p>
{:else if error}
<p class="text-xl text-red-400">We can't seem to find you.</p>
<div class="flex flex-col gap-6 items-center">
<p class="text-xl opacity-60">We can't seem to find you.</p>
<p class="text-base opacity-60">Try entering coordinates manually:</p>
<div class="flex flex-col gap-4 w-full max-w-xs">
<input
type="text"
placeholder="Latitude (e.g., 40.7128)"
bind:value={manualLat}
class="px-4 py-2 bg-transparent border border-white/20 rounded-md text-center focus:border-white/40 focus:outline-none transition-colors"
/>
<input
type="text"
placeholder="Longitude (e.g., -74.0060)"
bind:value={manualLong}
class="px-4 py-2 bg-transparent border border-white/20 rounded-md text-center focus:border-white/40 focus:outline-none transition-colors"
/>
{#if manualError}
<p class="text-sm opacity-60 text-center">{manualError}</p>
{/if}
<button
class="px-6 py-2 cursor-crosshair border border-white/20 rounded-md hover:border-white/40 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
onclick={goWithManualCoords}
disabled={!manualLat || !manualLong}
>
Go
</button>
</div>
</div>
{:else}
<p class="mb-5 text-xl text-center px-4">
Your Position is set as: {position?.coords?.latitude}, {position?.coords?.longitude}
</p>
<button class="animate-pulse cursor-crosshair text-lg hover:text-blue-400 transition-colors" onclick={goToPlayer}
<button class="animate-pulse cursor-crosshair text-lg hover:opacity-70 transition-opacity" onclick={goToPlayer}
>Ok, on-out with it</button
>
{/if}