diff options
| author | mat <github@matdoes.dev> | 2022-05-20 21:04:59 -0500 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-05-20 21:04:59 -0500 |
| commit | 3a4eb5cecc5851f8d62d62d5d4011d0f45afe0e5 (patch) | |
| tree | 7561d299655f0982f62d780439a3d022e2bde800 /src/lib/sections | |
| parent | fd4b49075a2cbdddac0af4c22c129d08cf5e5428 (diff) | |
| parent | 8d5fb47e3d0a847df959c8c30cb8138a9fbc4073 (diff) | |
| download | skyblock-stats-3a4eb5cecc5851f8d62d62d5d4011d0f45afe0e5.tar.gz skyblock-stats-3a4eb5cecc5851f8d62d62d5d4011d0f45afe0e5.tar.bz2 skyblock-stats-3a4eb5cecc5851f8d62d62d5d4011d0f45afe0e5.zip | |
Merge branch 'achievements'
Diffstat (limited to 'src/lib/sections')
| -rw-r--r-- | src/lib/sections/Achievements.svelte | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/src/lib/sections/Achievements.svelte b/src/lib/sections/Achievements.svelte new file mode 100644 index 0000000..61f320e --- /dev/null +++ b/src/lib/sections/Achievements.svelte @@ -0,0 +1,81 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import Tooltip from '$lib/Tooltip.svelte' + export let data: CleanMemberProfile +</script> + +{#if data.member.achievements} + <h3> + Tiered + <span class="achievement-count"> + ({data.member.achievements.tiered.filter(a => a.value).length}/{data.member.achievements + .tiered.length}) + </span> + </h3> + <ul> + {#each data.member.achievements.tiered as achievement} + <li class="achievement"> + <Tooltip> + <span slot="tooltip"> + {achievement.description} + </span> + + {#if achievement.value} + <span> + {achievement.name}: <b>{achievement.value}</b> + </span> + {:else} + <span class="achievement-locked"> + {achievement.name} + </span> + {/if} + </Tooltip> + </li> + {/each} + </ul> + + <h3> + Challenge + <span class="achievement-count"> + ({data.member.achievements.challenge.filter(a => a.unlocked).length}/{data.member.achievements + .challenge.length}) + </span> + </h3> + <ul> + {#each data.member.achievements.challenge as achievement} + <li class="achievement"> + <Tooltip> + <span slot="tooltip"> + {achievement.description} + </span> + + {#if achievement.unlocked} + <span> + {achievement.name} + </span> + {:else} + <span class="achievement-locked"> + {achievement.name} + </span> + {/if} + </Tooltip> + </li> + {/each} + </ul> +{/if} + +<style> + ul { + margin: 0; + padding-left: 1em; + } + + .achievement-locked { + opacity: 0.5; + } + + .achievement-count { + color: var(--theme-darker-text); + font-weight: normal; + } +</style> |