diff --git a/frontend/src/lib/index.ts b/frontend/src/lib/index.ts index 40d5ff9..958b2fa 100644 --- a/frontend/src/lib/index.ts +++ b/frontend/src/lib/index.ts @@ -279,11 +279,13 @@ export let ADVENTURE_TYPE_ICONS = { other: '❓' }; -type AdventureType = keyof typeof ADVENTURE_TYPE_ICONS; - -export function getAdventureTypeLabel(type: AdventureType) { - const typeObj = ADVENTURE_TYPE_ICONS[type]; - return typeObj; +export function getAdventureTypeLabel(type: string) { + // return the emoji ADVENTURE_TYPE_ICONS label for the given type if not found return ? emoji + if (type in ADVENTURE_TYPE_ICONS) { + return ADVENTURE_TYPE_ICONS[type as keyof typeof ADVENTURE_TYPE_ICONS]; + } else { + return '❓'; + } } export function getRandomBackground() { diff --git a/frontend/src/routes/map/+page.svelte b/frontend/src/routes/map/+page.svelte index 89b03d5..bcf2625 100644 --- a/frontend/src/routes/map/+page.svelte +++ b/frontend/src/routes/map/+page.svelte @@ -3,6 +3,7 @@ import { DefaultMarker, MapEvents, MapLibre, Popup, Marker } from 'svelte-maplibre'; import { t } from 'svelte-i18n'; import type { Adventure, VisitedRegion } from '$lib/types.js'; + import { getAdventureTypeLabel } from '$lib'; export let data; let createModalOpen: boolean = false; @@ -20,6 +21,14 @@ ); } + // Reset the longitude and latitude when the newMarker is set to null so new adventures are not created at the wrong location + $: { + if (!newMarker) { + newLongitude = null; + newLatitude = null; + } + } + console.log(data); let showVisited: boolean = true; @@ -110,24 +119,11 @@ lngLat={[adventure.longitude, adventure.latitude]} class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-{adventure.is_visited ? 'red' - : 'blue'}-300 text-black shadow-md" + : 'blue'}-300 text-black shadow-2xl focus:outline-2 focus:outline-black" > - - - + + {getAdventureTypeLabel(adventure.type)} +
{adventure.name}

@@ -167,7 +163,7 @@ {#each visitedRegions as region} {#if showGeo} -

{name}
-

{region.name}

+
{region.name}
+

{region.region}

{/if}