aboutsummaryrefslogtreecommitdiff
path: root/src/lib/sections/StatList.svelte
blob: 266ceb30863c0644ef568221ec60c079faa1c843 (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
<!-- 
	@component

	A sorted list of a user's stats, with the total sometimes being at the top.
-->
<script lang="ts">
	import { cleanId, millisecondsToTime } from '$lib/utils'
	import type { StatItem } from '$lib/APITypes'

	export let stats: StatItem[]
</script>

<ul>
	{#each stats as stat}
		<li class:total-stat={stat.categorizedName === 'total'}>
			<span class="stat-name">{cleanId(stat.categorizedName)}</span>:
			{#if stat.unit === 'time'}
				{millisecondsToTime(stat.value)}
			{:else}
				{stat.value.toLocaleString()}
			{/if}
		</li>
	{/each}
</ul>

<style>
	.total-stat .stat-name {
		font-weight: bold;
	}

	.total-stat {
		font-size: 1.2em;
		list-style-type: none;
		position: relative;
		right: 1em;
		bottom: 0.2em;
	}

	ul {
		margin-top: 0.5em;
	}
</style>