diff --git a/src/lib/components/collection/CollectionCharacterPane.svelte b/src/lib/components/collection/CollectionCharacterPane.svelte new file mode 100644 index 00000000..9a6cdfa9 --- /dev/null +++ b/src/lib/components/collection/CollectionCharacterPane.svelte @@ -0,0 +1,303 @@ + + +
+ + + +
+ + Info + My Collection + +
+ +
+ {#if selectedTab === 'info'} + +
+ + + +
+ {:else if isEditing} + + + {:else} + +
+
+

Awakening

+

{displayAwakening()}

+
+ +
+

Over Mastery Rings

+
+

Ring 1: {displayRing(character.ring1)}

+

Ring 2: {displayRing(character.ring2)}

+

Ring 3: {displayRing(character.ring3)}

+

Ring 4: {displayRing(character.ring4)}

+
+
+ +
+

Aetherial Mastery

+

{displayRing(character.earring)}

+
+ +
+

Perpetuity Ring

+

{character.perpetuity ? 'Equipped' : 'Not equipped'}

+
+ + {#if isOwner} +
+ +
+ {/if} +
+ {/if} +
+
+ + diff --git a/src/lib/components/collection/CollectionFilters.svelte b/src/lib/components/collection/CollectionFilters.svelte index cb925a91..bbd596bd 100644 --- a/src/lib/components/collection/CollectionFilters.svelte +++ b/src/lib/components/collection/CollectionFilters.svelte @@ -189,8 +189,8 @@
{#if showFilters.element} -
- +
+ Element
{#each elements as element} + +
+
+ + diff --git a/src/routes/(app)/[username]/collection/+layout.server.ts b/src/routes/(app)/[username]/collection/+layout.server.ts new file mode 100644 index 00000000..c237adc2 --- /dev/null +++ b/src/routes/(app)/[username]/collection/+layout.server.ts @@ -0,0 +1,24 @@ +import type { LayoutServerLoad } from './$types' +import { error } from '@sveltejs/kit' +import { userAdapter } from '$lib/api/adapters/user.adapter' + +export const load: LayoutServerLoad = async ({ params, locals }) => { + const username = params.username + const isOwner = locals.session?.account?.username === username + + try { + // Get basic user info + const userInfo = await userAdapter.getInfo(username) + + return { + user: userInfo, + isOwner + } + } catch (e: any) { + // 403 means collection is private + if (e?.status === 403) { + throw error(403, 'This collection is private') + } + throw error(e?.status || 502, e?.message || 'Failed to load user') + } +} diff --git a/src/routes/(app)/[username]/collection/+layout.svelte b/src/routes/(app)/[username]/collection/+layout.svelte new file mode 100644 index 00000000..923f8ddc --- /dev/null +++ b/src/routes/(app)/[username]/collection/+layout.svelte @@ -0,0 +1,142 @@ + + + + {username}'s Collection + + +
+
+ {#if data.user?.avatar?.picture} + {`Avatar + {:else} + + {/if} +
+

{username}'s Collection

+ +
+
+ + + + +
+ {@render children()} +
+
+ + diff --git a/src/routes/(app)/[username]/collection/+page.ts b/src/routes/(app)/[username]/collection/+page.ts new file mode 100644 index 00000000..52df2dd1 --- /dev/null +++ b/src/routes/(app)/[username]/collection/+page.ts @@ -0,0 +1,7 @@ +import { redirect } from '@sveltejs/kit' +import type { PageLoad } from './$types' + +export const load: PageLoad = async ({ params }) => { + // Redirect to characters as the default collection tab + throw redirect(307, `/${params.username}/collection/characters`) +} diff --git a/src/routes/(app)/[username]/collection/characters/+page.server.ts b/src/routes/(app)/[username]/collection/characters/+page.server.ts new file mode 100644 index 00000000..5e459269 --- /dev/null +++ b/src/routes/(app)/[username]/collection/characters/+page.server.ts @@ -0,0 +1,23 @@ +import type { PageServerLoad } from './$types' +import { error } from '@sveltejs/kit' +import { collectionAdapter } from '$lib/api/adapters/collection.adapter' + +export const load: PageServerLoad = async ({ parent }) => { + const { user, isOwner } = await parent() + + try { + // Fetch the user's public character collection + const characters = await collectionAdapter.getPublicCharacters(user.id) + + return { + characters, + isOwner + } + } catch (e: any) { + // 403 means collection is private + if (e?.status === 403) { + throw error(403, 'This collection is private') + } + throw error(e?.status || 502, e?.message || 'Failed to load collection') + } +} diff --git a/src/routes/(app)/[username]/collection/characters/+page.svelte b/src/routes/(app)/[username]/collection/characters/+page.svelte new file mode 100644 index 00000000..dea00f8a --- /dev/null +++ b/src/routes/(app)/[username]/collection/characters/+page.svelte @@ -0,0 +1,438 @@ + + +
+ +
+ + + {#if data.isOwner} + + {/if} +
+ + +
+ {#if isLoading} +
+ +

Loading collection...

+
+ {:else if isEmpty} +
+ {#if data.isOwner} + +

Your collection is empty

+

Add characters to start building your collection

+ + {:else} + +

This collection is empty or private

+ {/if} +
+ {:else} +
+ {#each filteredCharacters as character (character.id)} + + {/each} +
+ + {#if showSentinel} +
+ {/if} + + {#if collectionQuery.isFetchingNextPage} +
+ + Loading more... +
+ {/if} + + {#if data.isOwner && !collectionQuery.hasNextPage && filteredCharacters.length > 0} +
+

{filteredCharacters.length} character{filteredCharacters.length === 1 ? '' : 's'} in your collection

+
+ {/if} + {/if} +
+
+ + +{#if data.isOwner} + +{/if} + +