diff options
Diffstat (limited to 'src/lib/sections')
| -rw-r--r-- | src/lib/sections/Infobox.svelte | 36 | ||||
| -rw-r--r-- | src/lib/sections/Inventories.svelte | 2 | ||||
| -rw-r--r-- | src/lib/sections/Skills.svelte | 1 | ||||
| -rw-r--r-- | src/lib/sections/StatList.svelte | 42 |
4 files changed, 55 insertions, 26 deletions
diff --git a/src/lib/sections/Infobox.svelte b/src/lib/sections/Infobox.svelte index 756987d..7670dec 100644 --- a/src/lib/sections/Infobox.svelte +++ b/src/lib/sections/Infobox.svelte @@ -2,37 +2,23 @@ import { generateInfobox } from '$lib/profile' import Username from '$lib/minecraft/Username.svelte' import Emoji from '$lib/Emoji.svelte' + import { onMount } from 'svelte' export let data -</script> -<!-- <div id="infobox"> - <h2>{{ render.username(data.member, prefix=true) }} ({{ data.member.profileName }})</h2> - <p>{{ '💾'|twemojiHtml|safe }} Last save: {% if getTime() - data.member.last_save < 60 * 60 * 24 * 7 %}{{ ((getTime() - data.member.last_save) * 1000)|cleannumber('time') }} ago {% else %}{{ data.member.last_save|cleannumber('date') }}{% endif %}</p> - <p>{{ '🚶'|twemojiHtml|safe }} Profile created: {% if getTime() - data.member.first_join < 60 * 60 * 24 * 7 %}{{ ((getTime() - data.member.first_join) * 1000)|cleannumber('time') }} ago {% else %}{{ data.member.first_join|cleannumber('date') }}{% endif %}</p> - <p>{{ '✨'|twemojiHtml|safe }} Fairy souls: {{ data.member.fairy_souls.total }}/{{ getConstants().max_fairy_souls }}</p> -{%- if data.profile.minion_count == getConstants().max_minions -%}<p>{{ '🤖'|twemojiHtml|safe }} Minion count: {{ data.profile.minion_count }}</p>{% endif %} -{%- set mostSignificantKillsStat = {} -%} -{%- set mostSignificantDeathsStat = {} -%} -{%- for stat in data.member.stats -%} -{%- if stat.category == 'kills' and stat.rawName != 'kills' and stat.value >= 200000 and stat.value > (mostSignificantKillsStat.value or 0) -%} -{%- set mostSignificantKillsStat = stat -%} -{%- endif -%} -{%- if stat.category == 'deaths' and stat.rawName != 'deaths' and stat.value >= 1000000 and stat.value > (mostSignificantDeathsStat.value or 0) -%} -{%- set mostSignificantDeathsStat = stat -%} -{%- endif -%} -{%- endfor -%} -{%- if mostSignificantKillsStat.value -%} - <p>{{ '⚔️'|twemojiHtml|safe }} {{ mostSignificantKillsStat.value|cleannumber(mostSignificantKillsStat.unit or mostSignificantKillsStat.rawName|clean|lower) }}</p> -{%- endif -%} -{%- if mostSignificantDeathsStat.value -%} - <p>{{ '☠'|twemojiHtml|safe }} {{ mostSignificantDeathsStat.value|cleannumber(mostSignificantDeathsStat.unit or mostSignificantDeathsStat.rawName|clean|lower) }}</p> -{%- endif -%} -</div> --> + // onMount(() => { + // // reload the data every second so the infobox updates + // const interval = setInterval(() => { + // data = data + // }, 1000) + + // return () => clearInterval(interval) + // }) +</script> <div id="infobox"> <h2><Username player={data.member} prefix /> ({data.member.profileName})</h2> - {#each generateInfobox(data, { meta: false }) as item} + {#each generateInfobox(data) as item} <p><Emoji value={item} /></p> {/each} </div> diff --git a/src/lib/sections/Inventories.svelte b/src/lib/sections/Inventories.svelte index 49a00c2..42607b6 100644 --- a/src/lib/sections/Inventories.svelte +++ b/src/lib/sections/Inventories.svelte @@ -27,7 +27,7 @@ {#each displayingInventories as inventoryName} {#if inventoryName === selectedInventoryName} <div id={inventoryName} class="inventory-content"> - <Inventory items={data.member.inventories[inventoryName]} {pack} /> + <Inventory items={data.member.inventories[inventoryName]} {pack} name={inventoryName} /> </div> {/if} {/each} diff --git a/src/lib/sections/Skills.svelte b/src/lib/sections/Skills.svelte index 7111c43..6e1efdb 100644 --- a/src/lib/sections/Skills.svelte +++ b/src/lib/sections/Skills.svelte @@ -70,5 +70,6 @@ } ul > li { width: 10em; + margin: 0.25em 0.25em 0 0; } </style> diff --git a/src/lib/sections/StatList.svelte b/src/lib/sections/StatList.svelte new file mode 100644 index 0000000..266ceb3 --- /dev/null +++ b/src/lib/sections/StatList.svelte @@ -0,0 +1,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> |