blob: 40fa67d35616d00de1efec5fa806ab4542f6a714 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<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 total-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.rawName)}</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;
}
.total-slayer-info-text {
margin: 0.5em 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>
|
