blob: 74530d1acffb6d9271bfa74fa966f16662f69d99 (
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<script lang="ts">
import type { CleanMemberProfile } from '$lib/APITypes'
import Emoji from '$lib/Emoji.svelte'
import ListItemWithIcon from '$lib/ListItemWithIcon.svelte'
import { cleanId, skyblockTime } from '$lib/utils'
export let data: CleanMemberProfile
$: bagData = data.member.accessoryBagUpgrades
</script>
<span class="accessory-bag-upgrades">
<h3>Upgrades</h3>
<div class="accessory-bag-info-text">
<p>Purchased: <b>{bagData.upgrades.purchased}</b></p>
<p>Coins spent: <b>{bagData.upgrades.coinsSpent.toLocaleString()}</b></p>
<p>Extra slots: <b>{bagData.upgrades.extraSlots}</b></p>
</div>
<h3>Powers</h3>
{#if bagData.powers.selected}
<p class="accessory-bag-info-text">
Selected: <b>{cleanId(bagData.powers.selected)}</b>
</p>
{/if}
<ul>
{#each bagData.powers.list as power}
<li>
{#if bagData.powers.selected === power}
<b>{cleanId(power)}</b>
{:else}
{cleanId(power)}
{/if}
</li>
{/each}
</ul>
<div class="tuning-templates">
{#each bagData.tuningTemplates as template, template_index}
<div class="tuning-template">
<h3>Template #{template_index + 1}</h3>
<div class="accessory-bag-info-text">
{#each Object.entries(template) as [statName, statValue]}
<p>{cleanId(statName)}: <b>{statValue}</b></p>
{/each}
</div>
</div>
{/each}
</div>
</span>
<style>
p,
ul {
margin: 0;
}
ul {
padding-left: 1.5em;
}
h3 {
margin: 0.5em 0 0 0;
}
.accessory-bag-info-text {
color: var(--theme-darker-text);
}
.accessory-bag-info-text b {
color: var(--theme-main-text);
}
.tuning-templates {
display: flex;
flex-wrap: wrap;
max-width: 40rem;
column-gap: 0.5rem;
row-gap: 0.5rem;
margin-top: 1rem;
}
.tuning-template {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
padding: 0.75em;
border-radius: 1em;
}
.tuning-template h3 {
margin: 0;
}
.accessory-bag-upgrades {
/* width: 5rem; */
}
@media only screen and (min-width: 1160px) {
.accessory-bag-upgrades {
display: inline-grid;
position: relative;
top: -1.5em;
left: 0.5em;
}
}
</style>
|
