diff options
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/player/[player]/[profile].svelte | 62 | ||||
| -rw-r--r-- | src/routes/player/[player]/index.svelte | 26 | ||||
| -rw-r--r-- | src/routes/player/index.ts | 2 |
3 files changed, 73 insertions, 17 deletions
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte index dfb01ab..9c3fb31 100644 --- a/src/routes/player/[player]/[profile].svelte +++ b/src/routes/player/[player]/[profile].svelte @@ -5,31 +5,60 @@ 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}?customization=true`).then(r => + const data = await fetch(`${API_URL}player/${player}/${profile}?customization=true`).then(r => r.json() ) + + const constants = await fetch('/constants.json').then(r => r.json()) + return { props: { - data: res, + data, + constants, }, } } </script> <script lang="ts"> - import Head from '$lib/Head.svelte' - import Emoji from '$lib/Emoji.svelte' - import Header from '$lib/Header.svelte' + import Infobox from '$lib/sections/Infobox.svelte' + import { generateInfobox } from '$lib/profile' import Username from '$lib/Username.svelte' - import { generateMetaDescription } from '$lib/profile' - import { twemojiHtml } from '$lib/utils' + import Header from '$lib/Header.svelte' + import Emoji from '$lib/Emoji.svelte' + import { cleanId } from '$lib/utils' + import Head from '$lib/Head.svelte' + import Toc from '$lib/Toc.svelte' + import Skills from '$lib/sections/Skills.svelte' export let data + export let constants + + const categories = [ + 'skills', + 'deaths', + 'kills', + 'auctions', + 'fishing', + 'races', + 'misc', + 'minions', + 'zones', + 'collections', + 'leaderboards', + ] + + // cursed svelte :D + $: bodyStyle = `<style>:root{--background:url(${data.customization.backgroundUrl})}</style>` </script> +<svelte:head> + {@html bodyStyle} +</svelte:head> + <Head title="{data.member.username}'s SkyBlock profile ({data.member.profileName})" - description={generateMetaDescription(data)} + description={generateInfobox(data, constants, { meta: true }).join('\n')} metaTitle={(data.member.rank.name ? `[${data.member.rank.name}] ` : '') + `${data.member.username}\'s SkyBlock profile (${data.member.profileName})`} /> @@ -43,4 +72,21 @@ {/if} ({data.member.profileName}) </h1> + + <Infobox {data} {constants} /> + + <Toc {categories} /> + + {#if data.member.skills.length > 0} + <section id="skills" class="profile-skills"> + <h2>Skills</h2> + <Skills {data} /> + </section> + {/if} + <!-- {%- if data.member.skills|length > 0 -%} + <section id="skills" class="profile-skills"> + <h2>Skills</h2> + {%- include 'sections/skills.njk' -%} + </section> + {%- endif -%} --> </main> diff --git a/src/routes/player/[player]/index.svelte b/src/routes/player/[player]/index.svelte index 907761d..8704b09 100644 --- a/src/routes/player/[player]/index.svelte +++ b/src/routes/player/[player]/index.svelte @@ -4,23 +4,29 @@ export const load: Load = async ({ params, fetch }) => { const player: string = params.player - const res = await fetch(`${API_URL}player/${player}?customization=true`).then(r => r.json()) - console.log('res', res) + const data = await fetch(`${API_URL}player/${player}?customization=true`).then(r => r.json()) - if (!res.player) { + if (!data.player) { return { fallthrough: true } as unknown } - if (res.player.username !== player) { + // this should happen instantly + // const constants = await fetch('/_constants.json').then(r => r.json()) + + // console.log('constants', constants) + + if (data.player.username !== player) { return { - redirect: `/player/${res.player.username}`, + redirect: `/player/${data.player.username}`, status: 302, } } return { - props: { data: res }, + props: { + data, + }, } } </script> @@ -31,6 +37,7 @@ import Head from '$lib/Head.svelte' export let data + // export let constants let activeProfile = null let activeProfileLastSave: number = 0 @@ -53,7 +60,6 @@ <svelte:head> {@html bodyStyle} </svelte:head> -<!-- url('{data.customization.backgroundUrl}') --> <Head title="{data.player.username}'s SkyBlock profiles" /> <Header /> @@ -69,7 +75,11 @@ class:profile-list-item-online={profile.uuid === activeProfile.uuid && isActiveProfileOnline} > - <a class="profile-name" href="/player/{data.player.username}/{profile.name}"> + <a + class="profile-name" + href="/player/{data.player.username}/{profile.name}" + sveltekit:prefetch + > {profile.name} </a> <span class="profile-members"> diff --git a/src/routes/player/index.ts b/src/routes/player/index.ts index 6c36cd8..c9d1b90 100644 --- a/src/routes/player/index.ts +++ b/src/routes/player/index.ts @@ -8,5 +8,5 @@ export async function post({ request }) { headers: { location: `/player/${player}` } - }; + } }
\ No newline at end of file |