diff options
| author | mat <github@matdoes.dev> | 2022-03-27 17:48:35 -0500 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-03-27 17:48:35 -0500 |
| commit | 13125a56267f2a88ed0a38833ea6bc1a7e64775c (patch) | |
| tree | f4966310f9a2fb76a9072a79e92eb32b6a65f795 /src/lib/sections | |
| parent | c76570072611b61aaf8f0db5f6870ffaf4e6d422 (diff) | |
| download | skyblock-stats-13125a56267f2a88ed0a38833ea6bc1a7e64775c.tar.gz skyblock-stats-13125a56267f2a88ed0a38833ea6bc1a7e64775c.tar.bz2 skyblock-stats-13125a56267f2a88ed0a38833ea6bc1a7e64775c.zip | |
Add harp
Diffstat (limited to 'src/lib/sections')
| -rw-r--r-- | src/lib/sections/Harp.svelte | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/src/lib/sections/Harp.svelte b/src/lib/sections/Harp.svelte new file mode 100644 index 0000000..438f354 --- /dev/null +++ b/src/lib/sections/Harp.svelte @@ -0,0 +1,70 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import Emoji from '$lib/Emoji.svelte' + import { cleanId, millisecondsToTime, toTitleCase } from '$lib/utils' + + export let data: CleanMemberProfile +</script> + +<div class="info-text primary-info-text"> + <p>Claimed Melody's hair: <Emoji value={data.member.harp.claimedMelodysHair ? '✅' : '❌'} /></p> + {#if data.member.harp.selected} + <p> + Selected song: + <b class="info-text-value">{toTitleCase(cleanId(data.member.harp.selected.id))}</b> + <span class="harp-selection-timeago"> + {millisecondsToTime(Date.now() - data.member.harp.selected.timestamp)} ago + </span> + </p> + {/if} +</div> +<div class="harp-songs-list"> + {#each data.member.harp.songs as song} + <div class="harp-song" class:selected-harp-song={song.id === data.member.harp.selected?.id}> + <h3>{toTitleCase(cleanId(song.id))}</h3> + <div class="info-text"> + {#if song.completions} + <p>Completions: <b class="info-text-value">{song.completions}</b></p> + <p>Perfect completions: <b class="info-text-value">{song.perfectCompletions}</b></p> + {:else} + <p>Progress: <b class="info-text-value">{Math.floor(song.progress * 100)}%</b></p> + {/if} + </div> + </div> + {/each} +</div> + +<style> + p { + margin: 0; + } + + .primary-info-text { + margin: 0.5em 0; + } + + .info-text { + color: var(--theme-darker-text); + } + .info-text .info-text-value { + color: var(--theme-main-text); + } + + .harp-songs-list { + display: flex; + flex-wrap: wrap; + max-width: 40rem; + column-gap: 0.5rem; + row-gap: 0.5rem; + } + .harp-song { + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); + padding: 0.75em; + border-radius: 1em; + width: 12em; + } + .selected-harp-song { + border: 1px solid rgba(255, 255, 255, 0.2); + } +</style> |