Use synthesized game entries to render Game

src/lib/components/Game.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { spring } from 'svelte/motion'
+	import { parse } from 'tinyduration'
 
 	interface GameProps {
 		game?: SerializableGameInfo
-		type: 'steam' | 'psn'
 	}
 
-	let { game = undefined, type }: GameProps = $props()
+	let { game = undefined }: GameProps = $props()
 
 	let isHovering = $state(false)
 
@@ -17,16 +17,30 @@
 
 	$effect(() => {
 		if (isHovering) {
-			scale.set(1.1)
+			scale.set(1.06)
 		} else {
 			scale.set(1)
 		}
 	})
 
+	let hours = $state(0)
+	let minutes = $state(0)
+
+	if (game && game.playtime) {
+		if (game.platform === 'psn') {
+			const d = parse(game.playtime as string)
+			hours = d.hours || 0
+			minutes = d.minutes || 0
+		} else {
+			hours = Math.floor((game.playtime as number) / 3600)
+			minutes = (game.playtime as number) % 3600
+		}
+	}
+
 	const url =
-		type === 'steam'
+		game?.platform === 'steam'
 			? `https://store.steampowered.com/app/${game?.id}`
-			: `https://store.playstation.com/en-us/product/${game?.id}/`
+			: `https://store.playstation.com/en-us/concept/${game?.id}/`
 </script>
 
 <div class="game">
@@ -44,7 +58,7 @@
 					{game.name}
 				</span>
 				<p class="game-playtime">
-					{game.playtime} minutes played
+					{hours > 0 ? `${hours}h ` : ''}{minutes}m played
 				</p>
 			</div>
 		</a>

src/routes/+page.svelte

@@ -11,7 +11,7 @@
 
 	export let data: PageData
 
-	$: ({ albums, steamGames, psnGames, error } = data)
+	$: ({ albums, games, error } = data)
 </script>
 
 <Page>
@@ -72,22 +72,10 @@
 	</section>
 
 	<section class="latest-games">
-		{#if steamGames && steamGames.length > 0}
+		{#if games && games.length > 0}
 			<ul>
-				{#each steamGames.slice(0, 3) as 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 games.slice(0, 3) as game}
+					<Game {game} />
 				{/each}
 			</ul>
 		{:else}

src/routes/+page.ts

@@ -1,6 +1,5 @@
 import type { PageLoad } from './$types'
 import type { Album } from '$lib/types/lastfm'
-import type { RecentlyPlayedGame } from 'psn-api'
 
 export const load: PageLoad = async ({ fetch }) => {
 	try {
@@ -10,8 +9,18 @@ export const load: PageLoad = async ({ fetch }) => {
 			fetchRecentPSNGames(fetch)
 		])
 
+		const response = await fetch('/api/giantbomb', {
+			method: 'POST',
+			body: JSON.stringify({ games: psnGames }),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		})
+
+		const games = await response.json()
 		return {
 			albums,
+			games: games,
 			steamGames: steamGames,
 			psnGames: psnGames
 		}