diff options
| author | mat <github@matdoes.dev> | 2022-02-15 16:09:12 +0000 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-02-15 16:09:12 +0000 |
| commit | 235fac70c745973f0fe3f18ea900922fa4b199f8 (patch) | |
| tree | bbc9db3a918d5bd2090be2c803b864784a7e0306 | |
| parent | e421ff5fe895bf75bd9379593d28b07c1df6d81e (diff) | |
| download | skyblock-stats-235fac70c745973f0fe3f18ea900922fa4b199f8.tar.gz skyblock-stats-235fac70c745973f0fe3f18ea900922fa4b199f8.tar.bz2 skyblock-stats-235fac70c745973f0fe3f18ea900922fa4b199f8.zip | |
profile list
| -rw-r--r-- | src/routes/player/[player].svelte | 97 |
1 files changed, 67 insertions, 30 deletions
diff --git a/src/routes/player/[player].svelte b/src/routes/player/[player].svelte index 7fcc39e..2cce8e7 100644 --- a/src/routes/player/[player].svelte +++ b/src/routes/player/[player].svelte @@ -23,7 +23,19 @@ export let data let activeProfile = null - let activeProfileLastSave: number + let activeProfileLastSave: number = 0 + + for (const profile of data.profiles) { + for (const member of profile.members) { + if (member.uuid === data.player.uuid && member.last_save > activeProfileLastSave) { + activeProfile = profile + activeProfileLastSave = member.last_save + } + } + } + + // {%- set activeProfileOnline = getTime() - 60 < activeProfileLastSave -%} + const isActiveProfileOnline = Date.now() / 1000 - 60 < activeProfileLastSave </script> <Head title="{data.player.username}'s SkyBlock profiles" /> @@ -48,36 +60,61 @@ {/if} </svelte:head> -<!-- {% endblock %} -{%- block main -%} - <h1>{{ render.username(data.player, headType='3d') }}'s profiles</h1> -{%- set activeProfile = null -%} -{%- set activeProfileLastSave = 0 -%} -{%- for profile in data.profiles -%} -{%- for member in profile.members -%} -{%- if member.uuid == data.player.uuid and member.last_save > activeProfileLastSave -%} -{%- set activeProfile = profile -%} -{%- set activeProfileLastSave = member.last_save -%} -{%- endif -%} -{%- endfor -%} -{%- endfor -%} -{%- set activeProfileOnline = getTime() - 60 < activeProfileLastSave -%} - <ul class="profile-list"> -{%- for profile in data.profiles -%} - <li class="profile-list-item{% if profile.uuid == activeProfile.uuid %} profile-list-item-active{% if activeProfileOnline %} profile-list-item-online{% endif %}{% endif %}"> - <a class="profile-name" href="/player/{{ data.player.username }}/{{ profile.name }}">{{ profile.name }}</a> -{#- This comment is necessary to remove the space between the profile name and the user list :) -#} +<h1><Username player={data.player} headType="3d" />'s profiles</h1> + +<ul class="profile-list"> + {#each data.profiles as profile} + <li + class="profile-list-item" + class:profile-list-item-active={profile.uuid === activeProfile.uuid} + class:profile-list-item-online={profile.uuid === activeProfile.uuid && isActiveProfileOnline} + > + <a class="profile-name" href="/player/{data.player.username}/{profile.name}"> + {profile.name} + </a> <span class="profile-members"> -{%- if profile.members|length > 1 %}{% for player in profile.members -%} -{#- don't unnecessarily hyperlink to the page it's already o -#} -{%- set hyperlinkToProfile = player.uuid != data.player.uuid -%} -{{- render.username(player, headType='2d', hyperlinkToProfile=hyperlinkToProfile) -}} -{%- endfor -%} -{%- else %}Solo{% endif -%} + {#if profile.members.length > 1} + {#each profile.members as player} + <span class="member"> + <Username + {player} + headType="2d" + hyperlinkToProfile={player.uuid != data.player.uuid} + /> + </span> + {/each} + {:else} + Solo + {/if} </span> </li> -{%- endfor -%} - <ul> -{%- endblock -%} --> + {/each} +</ul> -<h1><Username player={data.player} headType="3d" />'s profiles</h1> +<style> + .profile-name { + margin-right: 0.5em; + } + + .profile-members { + color: var(--theme-main-text); + } + .profile-members > .member { + margin-right: 0.35em; + } + + .profile-list { + font-size: 1.5em; + } + + .profile-list-item { + margin-bottom: 0.5em; + color: var(--theme-darker-text); + } + .profile-list-item-active { + color: #fff; + } + .profile-list-item-online { + color: #0e0; + } +</style> |