diff options
| author | mat <27899617+mat-1@users.noreply.github.com> | 2022-03-19 22:39:38 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-19 22:39:38 +0000 |
| commit | 91eec9a7c7540d2ae2a368a77af1015c549c3ab5 (patch) | |
| tree | 4f54764fa708eb0bcb63c57dd35684a08e40bad3 /src/lib/sections/Slayers.svelte | |
| parent | 9b6c19abe45b5b5b1ff94ad8809d6730bb1f84a4 (diff) | |
| parent | a6553114302fd21548cae77639613a63b7133616 (diff) | |
| download | skyblock-stats-91eec9a7c7540d2ae2a368a77af1015c549c3ab5.tar.gz skyblock-stats-91eec9a7c7540d2ae2a368a77af1015c549c3ab5.tar.bz2 skyblock-stats-91eec9a7c7540d2ae2a368a77af1015c549c3ab5.zip | |
Merge pull request #1 from skyblockstats/slayers
Add slayers
Diffstat (limited to 'src/lib/sections/Slayers.svelte')
| -rw-r--r-- | src/lib/sections/Slayers.svelte | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/src/lib/sections/Slayers.svelte b/src/lib/sections/Slayers.svelte new file mode 100644 index 0000000..c5266df --- /dev/null +++ b/src/lib/sections/Slayers.svelte @@ -0,0 +1,70 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import { cleanId, toRomanNumerals } from '$lib/utils' + + export let data: CleanMemberProfile +</script> + +{#if data.member.slayers} + <div class="slayer-info-text"> + <p>Xp: <b>{data.member.slayers.xp}</b></p> + <p>Kills: <b>{data.member.slayers.kills}</b></p> + </div> + <div class="slayers-list"> + {#each data.member.slayers.bosses as slayer} + <div class="individual-slayer-data"> + <h3>{slayer.name ? cleanId(slayer.name) : cleanId(slayer.raw_name)}</h3> + <div class="slayer-info-text"> + <p>Xp: <b>{slayer.xp.toLocaleString()}</b></p> + <p>Level: <b>{slayer.level}</b></p> + </div> + <table> + <tr> + {#each slayer.tiers as tier} + <th>Tier {toRomanNumerals(tier.tier)}</th> + {/each} + </tr> + <tr> + {#each slayer.tiers as tier} + <td class="slayer-tier-kills"> + {tier.kills.toLocaleString()} + </td> + {/each} + </tr> + </table> + </div> + {/each} + </div> +{/if} + +<style> + p { + margin: 0; + } + + .slayer-tier-kills { + text-align: center; + } + + .slayer-info-text { + color: var(--theme-darker-text); + } + .slayer-info-text b { + color: var(--theme-main-text); + } + + .individual-slayer-data { + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); + padding: 0.75em; + border-radius: 1em; + } + + .slayers-list { + display: flex; + flex-wrap: wrap; + max-width: 40rem; + column-gap: 0.5rem; + row-gap: 0.5rem; + } +</style> |