diff options
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/__layout.svelte | 6 | ||||
| -rw-r--r-- | src/routes/player/[player]/[profile].svelte | 32 | ||||
| -rw-r--r-- | src/routes/player/[player]/index.svelte (renamed from src/routes/player/[player].svelte) | 94 |
3 files changed, 88 insertions, 44 deletions
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index d1fca30..2da6384 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -3,6 +3,6 @@ import '../app.css' </script> -<main> - <slot /> -</main> +<nav /> + +<slot /> diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte new file mode 100644 index 0000000..c5276bc --- /dev/null +++ b/src/routes/player/[player]/[profile].svelte @@ -0,0 +1,32 @@ +<script lang="ts" context="module"> + import type { Load } from '@sveltejs/kit' + import { API_URL } from '$lib/api' + + export const load: Load = async ({ params, fetch }) => { + const player: string = params.player + const profile: string = params.profile + const res = await fetch(`${API_URL}player/${player}/${profile}`).then(r => r.json()) + return { + props: { + data: res, + }, + } + } +</script> + +<script lang="ts"> + import Head from '$lib/Head.svelte' + import Header from '$lib/Header.svelte' + import Username from '$lib/Username.svelte' + import { generateMetaDescription } from '$lib/profile' + + export let data +</script> + +<Head + title="{data.member.username}'s SkyBlock profile ({data.member.profileName})" + description={generateMetaDescription(data)} + metaTitle={(data.member.rank.name ? `[${data.member.rank.name}] ` : '') + + `${data.member.username}\'s SkyBlock profile (${data.member.profileName})`} +/> +<Header backArrowHref="/player/{data.member.username}" /> diff --git a/src/routes/player/[player].svelte b/src/routes/player/[player]/index.svelte index 2cce8e7..73dfb0c 100644 --- a/src/routes/player/[player].svelte +++ b/src/routes/player/[player]/index.svelte @@ -1,24 +1,34 @@ <script lang="ts" context="module"> - import { get } from '$lib/api' import type { Load } from '@sveltejs/kit' + import { API_URL } from '$lib/api' + export const load: Load = async ({ params, fetch }) => { const player: string = params.player - // if (browser) alert('doing get') - const res = await fetch(`https://skyblock-api.matdoes.dev/player/${player}`).then(r => r.json()) - // const res = await get(`player/${player}`) + const res = await fetch(`${API_URL}player/${player}?customization=true`).then(r => r.json()) + + console.log('res', res) + + if (!res.player) { + return { fallthrough: true } as unknown + } + + if (res.player.username !== player) { + return { + redirect: `/player/${res.player.username}`, + status: 302, + } + } + return { - props: { - data: res, - }, + props: { data: res }, } } </script> <script lang="ts"> - import Head from '$lib/Head.svelte' - import Header from '$lib/Header.svelte' - import { browser } from '$app/env' import Username from '$lib/Username.svelte' + import Header from '$lib/Header.svelte' + import Head from '$lib/Head.svelte' export let data @@ -34,7 +44,6 @@ } } - // {%- set activeProfileOnline = getTime() - 60 < activeProfileLastSave -%} const isActiveProfileOnline = Date.now() / 1000 - 60 < activeProfileLastSave </script> @@ -60,36 +69,39 @@ {/if} </svelte:head> -<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} - {#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> - {/each} -</ul> +<main> + <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} + {#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> + {/each} + </ul> +</main> <style> .profile-name { |