feat: artist & creators listing

.env

@@ -1,12 +1,3 @@
 # Copy to .env.local and edit
-PUBLIC_API_ENDPOINT=
-PUBLIC_OPENGRAPH_ENDPOINT=
-PUBLIC_DISCORD_INVITE=
-PUBLIC_SUPPORT_MAIL=
-PUBLIC_GTM_ID=
-PUBLIC_GA_ID=
-
-PUBLIC_USE_ACCOUNT=
-
-PUBLIC_TELEMETRY_ENDPOINT=
-PUBLIC_TELEMETRY_API_KEY=
+PUBLIC_API_BASE=
+PUBLIC_ACCOUNT_SERVICE_URL=

package.json

@@ -23,7 +23,7 @@
 		"server.js"
 	],
 	"devDependencies": {
-		"@adofai-gg/ui": "1.2.0-beta.31",
+		"@adofai-gg/ui": "1.2.0-beta.35",
 		"@commitlint/cli": "^18.4.3",
 		"@commitlint/config-conventional": "^18.4.3",
 		"@fluent/bundle": "^0.18.0",

src/lib/components/UserListPanel.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { UserListItemModel, TranslationKey } from '@adofai-gg/ui'
+	import { UserList, Panel, PanelTitle, Translation } from '@adofai-gg/ui'
+
+	interface Props {
+		items: UserListItemModel[]
+		title: TranslationKey
+	}
+
+	const { items, title }: Props = $props()
+</script>
+
+<Panel>
+	<PanelTitle>
+		<Translation key={title} />
+	</PanelTitle>
+
+	<div class="user-list">
+		<UserList {items} />
+	</div>
+</Panel>
+
+<style lang="scss">
+	.user-list {
+		margin-top: 8px;
+	}
+</style>

src/lib/components/levelDetail/LevelDetailHeader.svelte

@@ -18,10 +18,15 @@
 >
 	<Container>
 		<div class="label-container">
-			<Tag color="yellow">legendary</Tag>
-			<Tag color="blue">recommended</Tag>
-			<Tag color="white">unlisted</Tag>
-			<Tag color="gray">hidden</Tag>
+			{#if level.quality === 'LEGENDARY'}
+				<Tag color="yellow">legendary</Tag>
+			{:else if level.quality === 'FEATURED'}
+				<Tag color="blue">recommended</Tag>
+			{:else if level.quality === 'HIDDEN'}
+				<Tag color="gray">hidden</Tag>
+			{:else if level.quality === 'UNLISTED'}
+				<Tag color="white">unlisted</Tag>
+			{/if}
 		</div>
 		<div class="level-title">
 			{level.title}

src/lib/localization/ko/level.ftl

@@ -1,3 +1,6 @@
 song-length = 노래 길이
 bpm = BPM
-tiles = 타일 수
+tiles = 타일 수
+
+artists = 아티스트
+creators = 레벨 제작자

src/lib/types/index.ts

@@ -3,6 +3,20 @@ export interface APITag {
 	name: string
 }
 
+export interface APIMember {
+	id: number
+	displayName: string
+	username: string | null
+	totalPp: number
+	avatar: string | null
+}
+
+export interface APIMusic {
+	id: number
+	name: string
+	artists: APIMember[]
+}
+
 export interface APILevel {
 	id: number
 	appendingTitle: string | null
@@ -21,7 +35,8 @@ export interface APILevel {
 	title: string
 	// file
 	// thumbnail
-	// creators
+	creators: APIMember[]
 	tags: APITag[]
 	epilepsyWarning: boolean
+	music: APIMusic
 }

src/lib/utils/avatar.ts

@@ -0,0 +1,15 @@
+import type { APIMember } from '../types'
+import { env } from '$env/dynamic/public'
+import defaultDark from '$lib/assets/defaultAvatars/dark.png'
+import defaultLight from '$lib/assets/defaultAvatars/light.png'
+
+export const getAvatarUrl = (
+	user: APIMember,
+	usage: 'artist' | 'creator' | null = null
+): string => {
+	if (!user.username) {
+		return usage === 'artist' ? defaultDark : defaultLight
+	}
+
+	return `${env.PUBLIC_ACCOUNT_SERVICE_URL}/content/avatars/${user}/${user.avatar ?? 'default'}`
+}

src/lib/utils/converter.ts

@@ -0,0 +1,11 @@
+import type { User } from '@adofai-gg/ui'
+import type { APIMember } from '../types'
+import { getAvatarUrl } from './avatar'
+
+export const convertUser = (from: APIMember, usage: 'artist' | 'creator' | null = null): User => {
+	return {
+		avatarURL: getAvatarUrl(from, usage),
+		displayName: from.displayName,
+		isAdmin: false
+	}
+}

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '$lib'
 	import '@adofai-gg/ui/dist/stylesheets/globals.scss'
 	import { IconProvider, Nav, Footer, setGlobalContext } from '@adofai-gg/ui'
 

src/routes/levels/[levelId]/+page.svelte

@@ -4,12 +4,37 @@
 	import type { PageData } from './$types'
 	import LevelMetadataArea from '~/lib/components/levelDetail/LevelMetadataArea.svelte'
 	import LevelTagDisplay from '~/lib/components/levelDetail/LevelTagDisplay.svelte'
+	import UserListPanel from '~/lib/components/UserListPanel.svelte'
+	import type { UserListItemModel } from '@adofai-gg/ui'
+	import { convertUser } from '~/lib/utils/converter'
 
 	interface Props {
 		data: PageData
 	}
 
 	const { data }: Props = $props()
+
+	let creators = $derived(
+		data.level.creators.map(
+			(x) =>
+				({
+					type: 'user',
+					data: convertUser(x, 'creator'),
+					href: `/users/${x.id}`
+				}) as UserListItemModel
+		)
+	)
+
+	let artists = $derived(
+		data.level.music.artists.map(
+			(x) =>
+				({
+					type: 'user',
+					data: convertUser(x, 'artist'),
+					href: `/users/${x.id}`
+				}) as UserListItemModel
+		)
+	)
 </script>
 
 <div class="level-detail-container">
@@ -20,6 +45,8 @@
 		</div>
 		<div class="meta-area">
 			<LevelTagDisplay level={data.level} />
+			<UserListPanel items={creators} title="level:artists" />
+			<UserListPanel items={artists} title="level:creators" />
 		</div>
 	</Container>
 </div>
@@ -38,7 +65,10 @@
 	}
 
 	.meta-area {
+		display: flex;
+		flex-direction: column;
 		grid-column: span 12;
+		gap: 20px;
 	}
 
 	@include breakpoint('md') {

src/routes/levels/[levelId]/+page.ts

@@ -14,6 +14,8 @@ export const load: PageLoad = async ({ params, fetch }) => {
 
 	const data: APILevel = await res.json()
 
+	console.log(data)
+
 	return {
 		level: data,
 		pageTitle: data.title