From 5e8b34173342fc7db347e5681d19652b8d849378 Mon Sep 17 00:00:00 2001 From: whidix Date: Sun, 8 Mar 2026 18:27:29 +0100 Subject: [PATCH] feat: remove debug logging and streamline location tracking display --- .../game/play/[sessionCode]/+page.svelte | 155 ++---------------- 1 file changed, 18 insertions(+), 137 deletions(-) diff --git a/src/routes/(game)/game/play/[sessionCode]/+page.svelte b/src/routes/(game)/game/play/[sessionCode]/+page.svelte index 3d30008..f1ee178 100644 --- a/src/routes/(game)/game/play/[sessionCode]/+page.svelte +++ b/src/routes/(game)/game/play/[sessionCode]/+page.svelte @@ -38,11 +38,6 @@ let locationPermission = $state<'prompt' | 'granted' | 'denied' | 'checking'>('prompt'); let distance = $state(null); let arrowRotation = $state(0); - type DebugLogEntry = { - ts: string; - event: string; - details?: Record; - }; type GpsSample = { lat: number; lon: number; @@ -52,19 +47,9 @@ headFromGps: number | null; timestamp: number; }; - let debugLogs = $state([]); let lastOrientationEvent = $state(null); let lastGpsSample = $state(null); - - function addDebug(event: string, details?: Record) { - const entry: DebugLogEntry = { - ts: new Date().toISOString(), - event, - details - }; - debugLogs = [entry, ...debugLogs].slice(0, 80); - console.log('[location-debug]', event, details ?? {}); - } + let debugNow = $state(Date.now()); // Calculate distance between two coordinates in meters (Haversine formula) function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number { @@ -122,31 +107,17 @@ // If we have device heading, rotate relative to it; otherwise just use absolute bearing arrowRotation = heading !== null ? bearing - heading : bearing; - addDebug('computed_distance_bearing', { - distance, - bearing, - heading, - arrowRotation - }); } else { distance = null; arrowRotation = 0; - addDebug('reset_distance_rotation', { - stepType: currentStep?.type ?? null, - isCurrentActiveStep, - hasUserCoords: userLat !== null && userLon !== null, - hasStepCoords: currentStep?.latitude != null && currentStep?.longitude != null - }); } }); // Check and request location permission async function checkLocationPermission() { - addDebug('check_location_permission_start'); if (!('geolocation' in navigator)) { locationError = 'Geolocation is not supported by your device'; locationPermission = 'denied'; - addDebug('check_location_permission_no_geolocation'); return false; } @@ -155,37 +126,24 @@ try { const result = await navigator.permissions.query({ name: 'geolocation' }); locationPermission = result.state as 'granted' | 'denied' | 'prompt'; - addDebug('check_location_permission_result', { - permission: result.state - }); // Listen for permission changes result.addEventListener('change', () => { locationPermission = result.state as 'granted' | 'denied' | 'prompt'; - addDebug('check_location_permission_changed', { - permission: result.state - }); }); return result.state === 'granted'; - } catch (e) { + } catch { // Some browsers don't support permissions API for geolocation - console.log('Permissions API not fully supported', e); - addDebug('check_location_permission_api_error', { - error: e instanceof Error ? e.message : String(e) - }); } } - addDebug('check_location_permission_fallback_prompt'); return false; } // Request device orientation permission (iOS 13+) async function requestOrientationPermission() { - addDebug('request_orientation_permission_start'); if (typeof DeviceOrientationEvent === 'undefined') { - addDebug('request_orientation_permission_no_api'); return false; } @@ -197,26 +155,18 @@ if (typeof DeviceOrientationEventTyped.requestPermission === 'function') { try { const permission = await DeviceOrientationEventTyped.requestPermission(); - addDebug('request_orientation_permission_result', { permission }); return permission === 'granted'; - } catch (error) { - console.error('Error requesting orientation permission:', error); - addDebug('request_orientation_permission_error', { - error: error instanceof Error ? error.message : String(error) - }); + } catch { return false; } } else { // Permission not required on this device - addDebug('request_orientation_permission_not_required'); return true; } } function startLocationTracking() { - addDebug('start_location_tracking_called'); if (!('geolocation' in navigator)) { - addDebug('start_location_tracking_no_geolocation'); return; } @@ -238,16 +188,6 @@ headFromGps: position.coords.heading, timestamp: position.timestamp }; - addDebug('watch_position_success', { - lat: userLat, - lon: userLon, - accuracy: position.coords.accuracy, - speed: position.coords.speed, - headFromGps: position.coords.heading - }); - console.log( - `[gps] lat=${position.coords.latitude.toFixed(6)} lon=${position.coords.longitude.toFixed(6)} acc=${Math.round(position.coords.accuracy)}m speed=${position.coords.speed ?? 'null'} alt=${position.coords.altitude ?? 'null'} heading=${position.coords.heading ?? 'null'}` - ); // Try to get device heading if available from GPS if (position.coords.heading !== null && position.coords.heading >= 0) { @@ -255,12 +195,6 @@ } }, (error) => { - console.error('Geolocation error:', error); - addDebug('watch_position_error', { - code: error.code, - message: error.message - }); - if (error.code === error.PERMISSION_DENIED) { locationError = 'Location access was denied. Please enable location in your browser settings.'; locationPermission = 'denied'; @@ -281,19 +215,12 @@ timeout: 10000 } ); - - addDebug('watch_position_started', { - watchId - }); } async function startOrientationTracking() { - addDebug('start_orientation_tracking_called'); // Request permission first const hasPermission = await requestOrientationPermission(); if (!hasPermission) { - console.log('Orientation permission denied or not available'); - addDebug('start_orientation_tracking_permission_denied'); return; } @@ -301,51 +228,37 @@ if (typeof DeviceOrientationEvent !== 'undefined') { const hasAbsoluteOrientation = 'ondeviceorientationabsolute' in window; const hasOrientation = 'ondeviceorientation' in window; - addDebug('start_orientation_tracking_capabilities', { - hasAbsoluteOrientation, - hasOrientation - }); if (hasAbsoluteOrientation) { window.addEventListener('deviceorientationabsolute', handleOrientation as EventListener); lastOrientationEvent = 'deviceorientationabsolute'; - addDebug('start_orientation_tracking_listener_added', { - event: 'deviceorientationabsolute' - }); } else if (hasOrientation) { window.addEventListener('deviceorientation', handleOrientation as EventListener); lastOrientationEvent = 'deviceorientation'; - addDebug('start_orientation_tracking_listener_added', { - event: 'deviceorientation' - }); } } } function startAllTracking() { - addDebug('start_all_tracking_called'); startLocationTracking(); void startOrientationTracking(); } function stopLocationTracking() { - addDebug('stop_tracking_called', { watchId }); if (watchId !== null) { navigator.geolocation.clearWatch(watchId); watchId = null; - addDebug('watch_position_stopped'); } window.removeEventListener('deviceorientationabsolute', handleOrientation as EventListener); window.removeEventListener('deviceorientation', handleOrientation as EventListener); - addDebug('orientation_listeners_removed'); } // Initialize location tracking onMount(() => { - addDebug('component_mounted', { - stepType: currentStep?.type ?? null, - isCurrentActiveStep - }); + const timerId = window.setInterval(() => { + debugNow = Date.now(); + }, 1000); + if (currentStep?.type === 'location' && isCurrentActiveStep) { checkLocationPermission().then(() => { startAllTracking(); @@ -353,6 +266,7 @@ } return () => { + window.clearInterval(timerId); stopLocationTracking(); }; }); @@ -361,16 +275,9 @@ $effect(() => { if (currentStep?.type === 'location' && isCurrentActiveStep) { if (watchId === null) { - addDebug('reactive_start_tracking', { - stepId: currentStep?.id ?? null - }); startAllTracking(); } } else if (watchId !== null) { - addDebug('reactive_stop_tracking', { - stepType: currentStep?.type ?? null, - isCurrentActiveStep - }); stopLocationTracking(); } }); @@ -380,31 +287,12 @@ lastOrientationEvent = event.type; if (e.absolute && e.alpha !== null) { heading = 360 - e.alpha; // Convert to compass heading - addDebug('orientation_update_absolute', { - eventType: event.type, - alpha: e.alpha, - heading - }); } else if (e.alpha !== null) { // Fallback for iOS with webkitCompassHeading const webkit = e as DeviceOrientationEvent & { webkitCompassHeading?: number }; if (webkit.webkitCompassHeading !== undefined) { heading = webkit.webkitCompassHeading; - addDebug('orientation_update_webkit', { - eventType: event.type, - webkitCompassHeading: webkit.webkitCompassHeading, - heading - }); - } else { - addDebug('orientation_update_no_heading', { - eventType: event.type, - alpha: e.alpha - }); } - } else { - addDebug('orientation_event_without_alpha', { - eventType: event.type - }); } } @@ -676,14 +564,16 @@
Client Debug Info
+
currentTime: {new Date(debugNow).toLocaleTimeString()}
step.id: {currentStep.id}
step.type: {currentStep.type}
isCurrentActiveStep: {String(isCurrentActiveStep)}
locationPermission: {locationPermission}
locationError: {locationError ?? 'null'}
watchId: {watchId ?? 'null'}
-
userLat: {userLat ?? 'null'}
-
userLon: {userLon ?? 'null'}
+
longitude: {userLon ?? 'null'}
+
latitude: {userLat ?? 'null'}
+
orientation(heading): {heading ?? 'null'}
lastGpsSample: {lastGpsSample ? `${lastGpsSample.lat.toFixed(6)}, ${lastGpsSample.lon.toFixed(6)}` : 'null'}
lastGpsAccuracy: {lastGpsSample ? `${Math.round(lastGpsSample.accuracy)}m` : 'null'}
lastGpsTimestamp: {lastGpsSample ? new Date(lastGpsSample.timestamp).toISOString() : 'null'}
@@ -691,23 +581,14 @@
stepLon: {currentStep.longitude ?? 'null'}
proximityRadius: {currentStep.proximityRadius ?? 'null'}
distance: {distance ?? 'null'}
-
heading: {heading ?? 'null'}
arrowRotation: {arrowRotation}
lastOrientationEvent: {lastOrientationEvent ?? 'null'}
-
Recent logs ({debugLogs.length})
-
- {#if debugLogs.length === 0} -
No logs yet
- {:else} - {#each debugLogs as log (log.ts + log.event)} -
-
[{log.ts}] {log.event}
- {#if log.details} - 
{JSON.stringify(log.details, null, 2)}
- {/if} -
- {/each} - {/if} +
debugArrow:
+
+
+
↑
+
+
{distance !== null ? `${distance}m` : '--'}