diff --git a/src/lib/components/FeaturedProfiles.svelte b/src/lib/components/FeaturedProfiles.svelte index 537526b..04dc224 100644 --- a/src/lib/components/FeaturedProfiles.svelte +++ b/src/lib/components/FeaturedProfiles.svelte @@ -6,35 +6,47 @@ const mobile = new IsMobile(); const players = [ - { name: 'ドラ右 (Doramigi)', id: 1815290, imageUrl: '/images/recaps/ドラ右.webp' }, - { name: 'Miya', id: 1002311, imageUrl: '/images/recaps/Miya.webp' }, - { name: 'あcola (acola)', id: 1787719, imageUrl: '/images/recaps/あcola.webp' }, - { name: 'Hurt', id: 836465, imageUrl: '/images/recaps/Hurt.webp' }, - { name: 'Sparg0', id: 94369, imageUrl: '/images/recaps/Sparg0.webp' }, - { name: 'Sonix', id: 165614, imageUrl: '/images/recaps/Sonix.webp' }, - { name: 'Syrup', id: 767151, imageUrl: '/images/recaps/Syrup.webp' }, - { name: 'Zomba', id: 252388, imageUrl: '/images/recaps/Zomba.webp' }, - { name: 'カルメロ (Carmelo)', id: 2262042, imageUrl: '/images/recaps/カルメロ.webp' }, - { name: 'らる (Raru)', id: 1787715, imageUrl: '/images/recaps/らる.webp' }, - { name: 'Shuton', id: 134839, imageUrl: '/images/recaps/Shuton.webp' }, - { name: 'Tweek', id: 10213, imageUrl: '/images/recaps/Tweek.webp' }, - { name: 'Glutonny', id: 2613, imageUrl: '/images/recaps/Glutonny.webp' }, - { name: 'MkLeo', id: 41259, imageUrl: '/images/recaps/MkLeo.webp' }, + { + name: 'ドラ右 (Doramigi)', + slug: '82f63ee2', + imageUrl: '/images/recaps/ドラ右.webp' + }, + { name: 'Miya', slug: 'd8016ec8', imageUrl: '/images/recaps/Miya.webp' }, + { + name: 'あcola (acola)', + slug: '830dec1e', + imageUrl: '/images/recaps/あcola.webp' + }, + { name: 'Hurt', slug: '9b4e3c26', imageUrl: '/images/recaps/Hurt.webp' }, + { name: 'Sparg0', slug: 'b5230de8', imageUrl: '/images/recaps/Sparg0.webp' }, + { name: 'Sonix', slug: '0301d9f0', imageUrl: '/images/recaps/Sonix.webp' }, + { name: 'Syrup', slug: '0f333fd3', imageUrl: '/images/recaps/Syrup.webp' }, + { name: 'Zomba', slug: '880cbc79', imageUrl: '/images/recaps/Zomba.webp' }, + { + name: 'カルメロ (Carmelo)', + slug: '9e3d38c6', + imageUrl: '/images/recaps/カルメロ.webp' + }, + { name: 'らる (Raru)', slug: '50b1e9a9', imageUrl: '/images/recaps/らる.webp' }, + { name: 'Shuton', slug: '993a6b60', imageUrl: '/images/recaps/Shuton.webp' }, + { name: 'Tweek', slug: '0d650c15', imageUrl: '/images/recaps/Tweek.webp' }, + { name: 'Glutonny', slug: '7611d833', imageUrl: '/images/recaps/Glutonny.webp' }, + { name: 'MkLeo', slug: '3f297e74', imageUrl: '/images/recaps/MkLeo.webp' }, { name: 'たまPだいふく (TamaPDaifuku)', - id: 1816581, + slug: 'f2633635', imageUrl: '/images/recaps/たまPだいふく.webp' }, - { name: 'Light', id: 95011, imageUrl: '/images/recaps/Light.webp' }, - { name: 'Peabnut', id: 37364, imageUrl: '/images/recaps/Peabnut.webp' }, - { name: 'Asimo', id: 964831, imageUrl: '/images/recaps/Asimo.webp' }, - { name: 'Wrath', id: 52384, imageUrl: '/images/recaps/Wrath.webp' }, - { name: 'Tea', id: 399160, imageUrl: '/images/recaps/Tea.webp' } + { name: 'Light', slug: 'e2974569', imageUrl: '/images/recaps/Light.webp' }, + { name: 'Peabnut', slug: '9160966b', imageUrl: '/images/recaps/Peabnut.webp' }, + { name: 'Asimo', slug: 'ffa84c87', imageUrl: '/images/recaps/Asimo.webp' }, + { name: 'Wrath', slug: '9e90ab19', imageUrl: '/images/recaps/Wrath.webp' }, + { name: 'Tea', slug: 'ab90c078', imageUrl: '/images/recaps/Tea.webp' } ]; type FeaturedProfile = (typeof players)[number]; - const urlToRecap = (player: FeaturedProfile) => `/user/${player.id}`; + const urlToRecap = (player: FeaturedProfile) => `/user/${player.slug}`;
@@ -46,7 +58,7 @@
- {#each players as player (player.id)} + {#each players as player (player.slug)} {m['search.no_results']()} {:else if results.length > 0} - {#each results as player (player.id)} + {#each results as player (player.slug)} + {@const slug = player.slug.replace('user/', '')}
{#if player.image} diff --git a/src/lib/remotes/players.remote.ts b/src/lib/remotes/players.remote.ts index f6ea328..a322eb0 100644 --- a/src/lib/remotes/players.remote.ts +++ b/src/lib/remotes/players.remote.ts @@ -63,12 +63,12 @@ export const searchPlayerQuery = query(v.pipe(v.string(), v.trim()), async (game return ( res.data.players?.nodes ?.map((player) => { - // By design a user always has an id and a gamerTag + // By design a user always has a gamerTag and a slug // Typescript skill issue here - if (!player?.user?.id || !player?.gamerTag) return null; + if (!player?.gamerTag || !player?.user?.slug) return null; return { - id: parseInt(player.user.id), + slug: player.user.slug, gamerTag: player.gamerTag, prefix: player.prefix, image: player.user.images?.[0]?.url || '', @@ -87,12 +87,12 @@ export const searchPlayerQuery = query(v.pipe(v.string(), v.trim()), async (game }); export type PlayerResult = { - id: number; + slug: string; gamerTag: string; image: string; country: string; nbEvent: number; - lastEvent: number; + lastEvent?: number; }; type PlayerStats = { @@ -155,11 +155,11 @@ type PlayerStats = { */ export const getPlayerStats = query( v.object({ - userId: v.pipe(v.number(), v.minValue(1)), + slug: v.pipe(v.string(), v.minLength(1)), year: v.pipe(v.number(), v.minValue(2000), v.maxValue(new Date().getFullYear())) }), - async ({ userId, year }) => { - const key = makeRecapStatsKey(year, userId); + async ({ slug, year }) => { + const key = makeRecapStatsKey(year, slug); if (env.ALLOW_CACHING === 'true') { const cached = await redis.get(key); @@ -169,7 +169,7 @@ export const getPlayerStats = query( // Get userinfo const { data: { user } - } = await fetchStartGG(getUserInfo, { userId: userId.toString() }); + } = await fetchStartGG(getUserInfo, { slug }); if (!user) error(404, 'User not found'); const userInfo = { @@ -185,11 +185,15 @@ export const getPlayerStats = query( } }; - const stringUserId = userId.toString(); + const userId = user.id; + + if (!userId) { + error(500, 'User ID not found'); + } // Get attended events - const eventsIds = await getThisYearEvents(stringUserId, year); - const events = await getEvents(stringUserId, eventsIds); + const eventsIds = await getThisYearEvents(slug, year); + const events = await getEvents(userId, eventsIds); // Count the number of tournaments attended by month const tournamentsByMonth = aggregateTournamentsByMonth(events); diff --git a/src/lib/server/redis.ts b/src/lib/server/redis.ts index 6fd44b7..a1d2671 100644 --- a/src/lib/server/redis.ts +++ b/src/lib/server/redis.ts @@ -8,26 +8,26 @@ export const redis = new Redis(env.REDIS_URL as string, options); /** * Creates a key pointing to a video URL for the user's recap for a given year * @param year year of the recap to get - * @param userId start.gg id of the player + * @param userSlug start.gg slug of the player * @returns A redis key pointing to a recap URL for the user for a given year */ -export const makeRecapUrlKey = (year: number, userId: number): string => - `recap:url:${year}:${userId}`; +export const makeRecapUrlKey = (year: number, userSlug: string): string => + `recap:url:${year}:${userSlug}`; /** * Creates a key pointing to a still image URL for the user's recap for a given year * @param year year of the recap to get - * @param userId start.gg id of the player + * @param userSlug start.gg slug of the player * @returns A redis key pointing to a recap still image URL for the user for a given year */ -export const makeStillUrlKey = (year: number, userId: number): string => - `recap:still:url:${year}:${userId}`; +export const makeStillUrlKey = (year: number, userSlug: string): string => + `recap:still:url:${year}:${userSlug}`; /** * Creates a key pointing to stats for a user in a given year * @param year year of the recap to get - * @param userId start.gg id of the player + * @param userSlug start.gg slug of the player * @returns A redis key pointing to stats for a given player in a given year */ -export const makeRecapStatsKey = (year: number, userId: number | '*'): string => - `recap:stats:${year}:${userId}`; +export const makeRecapStatsKey = (year: number, userSlug: string | '*'): string => + `recap:stats:${year}:${userSlug}`; diff --git a/src/lib/startgg/helpers.ts b/src/lib/startgg/helpers.ts index 6bf1edf..4aadc10 100644 --- a/src/lib/startgg/helpers.ts +++ b/src/lib/startgg/helpers.ts @@ -78,14 +78,14 @@ export function aggregateTournamentsByMonth( * Given a user ID and a year, fetches all events for that user in the specified year. * It retrieves the page info to determine the total number of pages and then fetches * each page of events until it reaches events from previous years. - * @param userId The ID of the user whose events to fetch. + * @param slug The slug of the user whose events to fetch. * @param year The year for which to fetch events. * @returns An array of events for the specified user in the specified year. */ -export const getThisYearEvents = async (userId: string, year: number) => { +export const getThisYearEvents = async (slug: string, year: number) => { // Get page info const tournamentEventsPageInfoRes = await fetchStartGG(getTournamentsEventsPageInfo, { - userId + slug }); const pages = tournamentEventsPageInfoRes.data?.user?.events?.pageInfo?.totalPages; @@ -97,7 +97,7 @@ export const getThisYearEvents = async (userId: string, year: number) => { for (let page = 1; page <= pages && shouldContinue; page++) { const paginatedTournamentsEventsRes = await fetchStartGG(getPaginatedTournamentsEventsStartAt, { page: page, - userId + slug }); const pageEvents = paginatedTournamentsEventsRes?.data.user?.events?.nodes || []; diff --git a/src/lib/startgg/queries.ts b/src/lib/startgg/queries.ts index 4fe47a4..f6be945 100644 --- a/src/lib/startgg/queries.ts +++ b/src/lib/startgg/queries.ts @@ -16,6 +16,7 @@ export const searchPlayerByGamerTag = graphql(` gamerTag user { id + slug location { country } @@ -33,17 +34,18 @@ export const searchPlayerByGamerTag = graphql(` } `); -export const getUserById = graphql(` - query GetUserById($id: ID!) { - user(id: $id) { +export const getUserBySlug = graphql(` + query GetUserBySlug($slug: String!) { + user(slug: $slug) { id + slug } } `); export const getTournamentsEventsPageInfo = graphql(` - query GetTournamentsEventsPageInfo($userId: ID!) { - user(id: $userId) { + query GetTournamentsEventsPageInfo($slug: String!) { + user(slug: $slug) { events( query: { filter: { videogameId: [1386], eventType: 1, past: true, upcoming: false } @@ -60,8 +62,8 @@ export const getTournamentsEventsPageInfo = graphql(` `); export const getPaginatedTournamentsEventsStartAt = graphql(` - query GetTournamentsEventsStartAt($userId: ID!, $page: Int!) { - user(id: $userId) { + query GetTournamentsEventsStartAt($slug: String!, $page: Int!) { + user(slug: $slug) { events( query: { filter: { videogameId: [1386], eventType: 1 } @@ -79,8 +81,9 @@ export const getPaginatedTournamentsEventsStartAt = graphql(` `); export const getUserInfo = graphql(` - query GetUserInfo($userId: ID!) { - user(id: $userId) { + query GetUserInfo($slug: String!) { + user(slug: $slug) { + id images(type: "profile") { url } diff --git a/src/routes/(app)/user/[slug]/+page.server.ts b/src/routes/(app)/user/[slug]/+page.server.ts new file mode 100644 index 0000000..5f75742 --- /dev/null +++ b/src/routes/(app)/user/[slug]/+page.server.ts @@ -0,0 +1,14 @@ +import { fetchStartGG } from '$lib/startgg/fetch'; +import { getUserBySlug } from '$lib/startgg/queries'; +import { redirect } from '@sveltejs/kit'; + +export const load = async ({ params }) => { + const slug = `user/${params.slug}`; + const { + data: { user } + } = await fetchStartGG(getUserBySlug, { slug }); + + if (!user || !user.slug) throw redirect(302, '/'); + + return { userSlug: user.slug }; +}; diff --git a/src/routes/(app)/user/[userId]/+page.svelte b/src/routes/(app)/user/[slug]/+page.svelte similarity index 97% rename from src/routes/(app)/user/[userId]/+page.svelte rename to src/routes/(app)/user/[slug]/+page.svelte index 188e45b..f071744 100644 --- a/src/routes/(app)/user/[userId]/+page.svelte +++ b/src/routes/(app)/user/[slug]/+page.svelte @@ -24,7 +24,7 @@ let renderingProgress = $state(undefined); let downloadButtonProps = $state(); - let userId = $derived(data.userId); + let userSlug = $derived(data.userSlug); let shareUrl = $derived(page.url.href); let isDebug = $derived(page.url.searchParams.get('debug') === 'true'); @@ -47,7 +47,7 @@ // Trigger the render const renderReq = await fetch(`/api/render`, { method: 'POST', - body: JSON.stringify({ stats, userId, filename, year }) + body: JSON.stringify({ stats, userSlug, filename, year }) }); if (!renderReq.ok) { @@ -68,7 +68,7 @@ const checkProgress = async () => { const progressReq = await fetch('/api/render/progress', { method: 'POST', - body: JSON.stringify({ renderId, bucketName, userId: data.userId, year }) + body: JSON.stringify({ renderId, bucketName, userSlug, year }) }); if (!progressReq.ok) { @@ -116,7 +116,7 @@ try { const renderReq = await fetch(`/api/render/still`, { method: 'POST', - body: JSON.stringify({ stats, userId }) + body: JSON.stringify({ stats, userSlug }) }); if (!renderReq.ok) { @@ -136,7 +136,7 @@
- {#await getPlayerStats({ userId, year: 2025 })} + {#await getPlayerStats({ slug: userSlug, year: 2025 })}

{m['recap.loading']({ year: YEAR })}

diff --git a/src/routes/(app)/user/[userId]/+page.server.ts b/src/routes/(app)/user/[userId]/+page.server.ts deleted file mode 100644 index a3ed9a2..0000000 --- a/src/routes/(app)/user/[userId]/+page.server.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { fetchStartGG } from '$lib/startgg/fetch'; -import { getUserById } from '$lib/startgg/queries'; -import { redirect } from '@sveltejs/kit'; - -export const load = async ({ params }) => { - const { - data: { user } - } = await fetchStartGG(getUserById, { id: params.userId }); - - if (!user || !user.id) throw redirect(302, '/'); - - return { userId: parseInt(user.id) }; -}; diff --git a/src/routes/api/render/+server.ts b/src/routes/api/render/+server.ts index 65b25a0..b3eddec 100644 --- a/src/routes/api/render/+server.ts +++ b/src/routes/api/render/+server.ts @@ -8,7 +8,7 @@ import 'dotenv/config'; import { z } from 'zod'; const schema = z.object({ - userId: z.number(), + userSlug: z.string(), stats: mainSchema, filename: z.string() }); @@ -23,7 +23,7 @@ export const POST: RequestHandler = async ({ request }) => { } // Check if a render is not available - const key = makeRecapUrlKey(results.data.stats.thisIsMyRecapProps.year, results.data.userId); + const key = makeRecapUrlKey(results.data.stats.thisIsMyRecapProps.year, results.data.userSlug); const videoUrl = await redis.get(key); if (videoUrl) { return json({ diff --git a/src/routes/api/render/progress/+server.ts b/src/routes/api/render/progress/+server.ts index 6374d63..59612fb 100644 --- a/src/routes/api/render/progress/+server.ts +++ b/src/routes/api/render/progress/+server.ts @@ -7,7 +7,7 @@ const schema = z.object({ renderId: z.string(), bucketName: z.string(), year: z.number(), - userId: z.number() + userSlug: z.string() }); export const POST = async ({ request }) => { @@ -20,7 +20,7 @@ export const POST = async ({ request }) => { }); } - const { renderId, bucketName, year, userId } = result.data; + const { renderId, bucketName, year, userSlug } = result.data; const functionName = speculateFunctionName({ diskSizeInMb: 2048, @@ -50,7 +50,7 @@ export const POST = async ({ request }) => { if (renderProgress.done && renderProgress.outputFile) { // Store the outputFile URL into redis - await redis.set(makeRecapUrlKey(year, userId), renderProgress.outputFile); + await redis.set(makeRecapUrlKey(year, userSlug), renderProgress.outputFile); return json({ type: 'done', diff --git a/src/routes/api/render/still/+server.ts b/src/routes/api/render/still/+server.ts index 6c797d8..5997783 100644 --- a/src/routes/api/render/still/+server.ts +++ b/src/routes/api/render/still/+server.ts @@ -7,7 +7,7 @@ import 'dotenv/config'; import { z } from 'zod'; const schema = z.object({ - userId: z.number(), + userSlug: z.string(), stats: mainSchema }); @@ -20,11 +20,11 @@ export const POST: RequestHandler = async ({ request }) => { }); } - const { userId, stats } = results.data; + const { userSlug, stats } = results.data; const year = stats.thisIsMyRecapProps.year; // Check if a render is available in cache - const key = makeStillUrlKey(year, userId); + const key = makeStillUrlKey(year, userSlug); const cachedUrl = await redis.get(key); if (cachedUrl) { return json({ diff --git a/src/routes/api/stats/+server.ts b/src/routes/api/stats/+server.ts index 9c4f0d3..55ccee5 100644 --- a/src/routes/api/stats/+server.ts +++ b/src/routes/api/stats/+server.ts @@ -5,14 +5,14 @@ import { json } from '@sveltejs/kit'; export const GET = async ({ url }) => { if (!dev) return json({ error: 'Not available in production' }, { status: 403 }); - const userId = url.searchParams.get('userId'); - if (!userId) { - return json({ error: 'Missing userId parameter' }, { status: 400 }); + const slug = url.searchParams.get('slug'); + if (!slug) { + return json({ error: 'Missing slug parameter' }, { status: 400 }); } const YEAR = 2025; const stats = await getPlayerStats({ - userId: parseInt(userId), + slug, year: YEAR }); diff --git a/src/routes/api/user/[userId]/stats/pretty/+server.ts b/src/routes/api/user/[userId]/stats/pretty/+server.ts deleted file mode 100644 index 5d9be92..0000000 --- a/src/routes/api/user/[userId]/stats/pretty/+server.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { dev } from '$app/environment'; -import { getPlayerStats } from '$lib/remotes/players.remote'; -import type { MainProps } from '$remotion/Main'; -import { error, json } from '@sveltejs/kit'; - -export const GET = async ({ params }) => { - if (!dev) error(404); - if (!params.userId) error(404); - - const userId = parseInt(params.userId); - const year = 2025; - - const stats = await getPlayerStats({ userId, year }); - - const videoProps: MainProps = { - thisIsMyRecapProps: { - year: stats.year, - user: stats.user - }, - tournamentsProps: { - year: stats.year, - attendance: stats.tournamentsByMonth - }, - performancesProps: { - performances: stats.bestPerformances - }, - favouriteCharactersProps: { - characters: stats.mostPlayedCharactersByPlayer - }, - highestUpsetProps: stats.highestUpset, - game5WarriorProps: { - totalSets: stats.sets.lastgames.count, - wins: stats.sets.lastgames.winCount, - winRate: stats.sets.lastgames.winRate - }, - worstMatchupsProps: { - matchups: stats.worstMatchups - }, - gauntletProps: stats.gauntlet, - cleanSweepProps: { - totalSets: stats.sets.total, - totalSweeps: stats.sets.cleansweeps - }, - dqProps: { - totalDQs: stats.dqs - }, - dayOfWeekActivityProps: { - activity: stats.dayOfWeekActivity - }, - busterRunProps: stats.worstPerformance, - rivalryProps: stats.rivalry, - gameStats: stats.gameStats, - setsPlayed: stats.sets.total - }; - - return json(videoProps); -};