diff options
Diffstat (limited to 'src/lib/sections/Zones.svelte')
| -rw-r--r-- | src/lib/sections/Zones.svelte | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/src/lib/sections/Zones.svelte b/src/lib/sections/Zones.svelte new file mode 100644 index 0000000..428ab79 --- /dev/null +++ b/src/lib/sections/Zones.svelte @@ -0,0 +1,38 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import { cleanId, toRomanNumerals } from '$lib/utils' + + export let data: CleanMemberProfile + + let zonesVisitedCount = data.member.visited_zones + ? data.member.visited_zones?.filter(z => z.visited).length + : 0 +</script> + +{#if data.member.visited_zones} + <p class="zones-visited-text"> + <span class="zones-visited-number"> + <b>{zonesVisitedCount}</b>/{data.member.visited_zones.length} zones visited + </span> + </p> + <ul> + {#each data.member.visited_zones.filter(z => z.visited) as zone} + <li>{cleanId(zone.name)}</li> + {/each} + {#each data.member.visited_zones.filter(z => !z.visited) as zone} + <li class="unvisited-zone">{cleanId(zone.name)}</li> + {/each} + </ul> +{/if} + +<style> + .zones-visited-text { + color: var(--theme-darker-text); + } + .zones-visited-number { + color: var(--theme-main-text); + } + .unvisited-zone { + opacity: 0.5; + } +</style> |