Add recent month top players block

Author: O4epegb

apps/api/src/app/getters/getTopStats.ts

@@ -25,8 +25,9 @@ export const getTopStats = async () => {
       ORDER BY titles DESC
       LIMIT 10;
     `,
-    prisma.$queryRaw<Array<{ playerId: string; winrate: number }>>`
+    prisma.$queryRaw<Array<{ playerId: string; winrate: number; games: number }>>`
       SELECT "playerId"
+        , CAST(COUNT("playerId") AS INTEGER) AS games
         , 1.0 * SUM(CASE WHEN "isWin" THEN 1 ELSE 0 END) / COUNT("playerId") AS winrate
       FROM "Game"
       GROUP BY "playerId"
@@ -87,8 +88,9 @@ export const getTopStats = async () => {
   })
 
   return {
-    byWinrate: winrates.map(({ playerId, winrate }) => ({
+    byWinrate: winrates.map(({ playerId, winrate, games }) => ({
       winrate,
+      games,
       name: players.find((x) => x.id === playerId)?.name,
     })),
     byWins: winners.map(({ playerId, _count }) => ({

apps/api/src/app/routes/top/index.ts

@@ -55,8 +55,9 @@ const getTopTitles = async (since?: Date) => {
 }
 
 const getTopWinrates = async (minGamesThresholdForWinrate: number, since?: Date) => {
-  return prisma.$queryRaw<Array<{ playerId: string; winrate: number }>>`
+  return prisma.$queryRaw<Array<{ playerId: string; winrate: number; games: number }>>`
     SELECT "playerId",
+           CAST(COUNT("playerId") AS INTEGER) AS games,
            1.0 * SUM(CASE WHEN "isWin" THEN 1 ELSE 0 END) / COUNT("playerId") AS winrate
     FROM "Game"
     ${since ? Prisma.sql`WHERE "endAt" >= ${since}` : Prisma.sql``}
@@ -106,8 +107,9 @@ const getTopStats = async ({
   return {
     gamesTotal,
     winsTotal,
-    byWinrate: winrates.map(({ playerId, winrate }) => ({
+    byWinrate: winrates.map(({ playerId, winrate, games }) => ({
       winrate,
+      games,
       name: players.find((x) => x.id === playerId)?.name,
     })),
     byWins: winners.map(({ playerId, _count }) => ({

apps/web/src/app/page.tsx

@@ -41,6 +41,10 @@ async function getData() {
     `/top?minGamesThresholdForWinrate=27&since=${encodeURIComponent(dayjs().subtract(1, 'year').toISOString())}`,
     { next: { revalidate: 300 }, cache: 'force-cache' },
   ).then((r) => r.json())
+  const topVeryRecentRes: { data: TopPlayers } = await fetchApi(
+    `/top?minGamesThresholdForWinrate=15&since=${encodeURIComponent(dayjs().subtract(1, 'month').toISOString())}`,
+    { next: { revalidate: 300 }, cache: 'force-cache' },
+  ).then((r) => r.json())
   const res = await fetchApi('/main', { next: { revalidate: 300 }, cache: 'force-cache' })
   const response: {
     data: {
@@ -68,6 +72,7 @@ async function getData() {
     topPlayers: topRes.data,
     topPlayersWithManyGames: topWithManyGamesRes.data,
     topPlayersRecent: topRecentRes.data,
+    topPlayersVeryRecent: topVeryRecentRes.data,
     nickname: sample(nicknames) ?? '',
   }
 }
@@ -89,6 +94,6 @@ type TopPlayers = {
   winsTotal: number
   minGamesThresholdForWinrate: number
   byWins: Array<Pick<Player, 'name'> & { wins: number }>
-  byWinrate: Array<Pick<Player, 'name'> & { winrate: number }>
+  byWinrate: Array<Pick<Player, 'name'> & { winrate: number; games: number }>
   byTitles: Array<Pick<Player, 'name'> & { titles: number }>
 }

apps/web/src/screens/main/List.tsx

@@ -15,6 +15,7 @@ export const List = ({
   items: Array<{
     name: string
     count?: string
+    secondaryCount?: string
   }>
   onLinkClick: (name: string) => void
   placeholder?: ReactNode
@@ -42,7 +43,16 @@ export const List = ({
             }}
           >
             <span className="overflow-hidden text-ellipsis whitespace-nowrap">{item.name}</span>
-            {item.count && <span className="tabular-nums">{item.count}</span>}
+            {item.count && (
+              <span className="ml-auto tabular-nums">
+                {item.secondaryCount && (
+                  <span className="mr-1 text-xs text-gray-400 dark:text-gray-500">
+                    {item.secondaryCount}
+                  </span>
+                )}
+                {item.count}
+              </span>
+            )}
           </Link>
         ))}
       </div>

apps/web/src/screens/main/Stats.tsx

@@ -35,6 +35,7 @@ export const Stats = memo(
     combosData,
     topPlayers,
     topPlayersRecent,
+    topPlayersVeryRecent,
     topPlayersWithManyGames,
     onLinkClick,
   }: Props & { onLinkClick: (name: string) => void }) => {
@@ -64,16 +65,25 @@ export const Stats = memo(
             <div className="flex justify-between gap-1">
               <h3 className="text-xl font-semibold">
                 Top Players{' '}
-                <span className="font-normal text-gray-600 dark:text-gray-400">(Last year)</span>
+                <span className="font-normal text-gray-600 dark:text-gray-400">(Last month)</span>
               </h3>
             </div>
             <TopList
               showFavorites
-              top={topPlayersRecent}
               favorites={favorites}
+              top={topPlayersVeryRecent}
               onLinkClick={onLinkClick}
             />
           </div>
+          <div className="space-y-1">
+            <div className="flex justify-between gap-1">
+              <h3 className="text-xl font-semibold">
+                Top Players{' '}
+                <span className="font-normal text-gray-600 dark:text-gray-400">(Last year)</span>
+              </h3>
+            </div>
+            <TopList top={topPlayersRecent} onLinkClick={onLinkClick} />
+          </div>
           <div className="space-y-1">
             <div className="flex justify-between gap-1">
               <h3 className="text-xl font-semibold">
@@ -248,6 +258,7 @@ const TopList = ({
           }
           items={top.byWinrate.map((item) => ({
             name: item.name,
+            secondaryCount: `${item.games}g`,
             count: formatNumber(item.winrate * 100, {
               maximumFractionDigits: 2,
               minimumFractionDigits: 2,