Display recent PSN games below Steam games

We need to redesign this whole Now playing page eventually

src/lib/components/Game.svelte

@@ -3,9 +3,10 @@
 
 	interface GameProps {
 		game?: SerializableGameInfo
+		type: 'steam' | 'psn'
 	}
 
-	let { game = undefined }: GameProps = $props()
+	let { game = undefined, type }: GameProps = $props()
 
 	let isHovering = $state(false)
 
@@ -21,12 +22,17 @@
 			scale.set(1)
 		}
 	})
+
+	const url =
+		type === 'steam'
+			? `https://store.steampowered.com/app/${game?.id}`
+			: `https://store.playstation.com/en-us/product/${game?.id}/`
 </script>
 
 <div class="game">
 	{#if game}
 		<a
-			href={`https://store.steampowered.com/app/${game.id}`}
+			href={url}
 			target="_blank"
 			rel="noopener noreferrer"
 			onmouseenter={() => (isHovering = true)}

src/routes/+page.svelte

@@ -11,7 +11,7 @@
 
 	export let data: PageData
 
-	$: ({ albums, games, error } = data)
+	$: ({ albums, steamGames, psnGames, error } = data)
 </script>
 
 <Page>
@@ -19,7 +19,9 @@
 		<h1 aria-label="@jedmund">
 			<Avatar />
 		</h1>
-		<Squiggly text="@jedmund is a software designer" />
+		<Squiggly
+			text="@jedmund is a software designer that helps you explore what your product can be, unburdened by what it has been"
+		/>
 	</svelte:fragment>
 
 	<ProjectList />
@@ -70,10 +72,22 @@
 	</section>
 
 	<section class="latest-games">
-		{#if games.length > 0}
+		{#if steamGames && steamGames.length > 0}
 			<ul>
-				{#each games.slice(0, 3) as game}
+				{#each steamGames.slice(0, 3) as game}
-					<Game {game} />
+					<Game {game} type="steam" />
+				{/each}
+			</ul>
+		{:else}
+			<p>Loading games...</p>
+		{/if}
+	</section>
+
+	<section class="latest-games">
+		{#if psnGames && psnGames.length > 0}
+			<ul>
+				{#each psnGames.slice(0, 3) as game}
+					<Game {game} type="psn" />
 				{/each}
 			</ul>
 		{:else}

src/routes/+page.ts

@@ -1,14 +1,19 @@
 import type { PageLoad } from './$types'
 import type { Album } from '$lib/types/lastfm'
-import type { GameInfoExtended, UserPlaytime } from 'steamapi'
+import type { RecentlyPlayedGame } from 'psn-api'
 
 export const load: PageLoad = async ({ fetch }) => {
 	try {
-		const [albums, games] = await Promise.all([fetchRecentAlbums(fetch), fetchRecentGames(fetch)])
+		const [albums, steamGames, psnGames] = await Promise.all([
-		console.log(games[0])
+			fetchRecentAlbums(fetch),
+			fetchRecentSteamGames(fetch),
+			fetchRecentPSNGames(fetch)
+		])
+
 		return {
 			albums,
-			games
+			steamGames: steamGames,
+			psnGames: psnGames
 		}
 	} catch (err) {
 		console.error('Error fetching data:', err)
@@ -27,10 +32,18 @@ async function fetchRecentAlbums(fetch: typeof window.fetch): Promise<Album[]> {
 	return musicData.albums
 }
 
-async function fetchRecentGames(fetch: typeof window.fetch): Promise<SerializableGameInfo[]> {
+async function fetchRecentSteamGames(fetch: typeof window.fetch): Promise<SerializableGameInfo[]> {
 	const response = await fetch('/api/steam')
 	if (!response.ok) {
 		throw new Error(`Failed to fetch recent game: ${response.status}`)
 	}
 	return await response.json()
 }
+
+async function fetchRecentPSNGames(fetch: typeof window.fetch): Promise<SerializableGameInfo[]> {
+	const response = await fetch('/api/psn')
+	if (!response.ok) {
+		throw new Error(`Failed to fetch recent game: ${response.status}`)
+	}
+	return await response.json()
+}