Add SBTI personality leaderboard

Author: loethen

app/[locale]/(main)/games/sbti-test/components/SbtiTestGame.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from 'react';
 import Image from 'next/image';
 import { useLocale, useTranslations } from 'next-intl';
 import { cn } from '@/lib/utils';
+import { submitScoreToLeaderboard } from '@/lib/leaderboard';
 import {
     DIM_EXPLANATIONS,
     DRUNK_TRIGGER_QUESTION_ID,
@@ -197,6 +198,11 @@ export default function SbtiTestGame() {
         return () => window.clearTimeout(timeoutId);
     }, [answers, screen]);
 
+    useEffect(() => {
+        if (screen !== 'result' || !result) return;
+        void submitScoreToLeaderboard('sbti-test', 1, { mode: result.finalType.code });
+    }, [result, screen]);
+
     const visibleQuestions = useMemo(() => buildVisibleQuestions(questionDeck, answers), [answers, questionDeck]);
     const currentQuestion = visibleQuestions[currentQuestionIndex] ?? null;
     const isEnglish = locale === 'en';

app/[locale]/(main)/games/sbti-test/components/SbtiTypeLeaderboard.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { TYPE_LIBRARY } from '../data';
+import { EN_TYPE_COPY } from '../copy';
+
+type Entry = {
+    mode: string;
+    totalSubmissions: number;
+};
+
+type ResponseData = {
+    entries: Entry[];
+    totalSubmissions: number;
+};
+
+export default function SbtiTypeLeaderboard() {
+    const locale = useLocale();
+    const t = useTranslations('sbtiTest.leaderboard');
+    const [entries, setEntries] = useState<Entry[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    const fetchDistribution = useCallback(async () => {
+        try {
+            setLoading(true);
+            const res = await fetch('/api/leaderboard?gameId=sbti-test&aggregate=modeCounts', {
+                cache: 'no-store',
+            });
+
+            if (!res.ok) {
+                throw new Error('Failed to fetch leaderboard');
+            }
+
+            const data = await res.json() as ResponseData;
+            setEntries(data.entries);
+        } catch (error) {
+            console.error(error);
+            setEntries([]);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        void fetchDistribution();
+    }, [fetchDistribution]);
+
+    useEffect(() => {
+        const handleUpdate = (event: Event) => {
+            const customEvent = event as CustomEvent<{ gameId: string }>;
+            if (customEvent.detail?.gameId === 'sbti-test') {
+                void fetchDistribution();
+            }
+        };
+
+        window.addEventListener('leaderboardUpdated', handleUpdate);
+        return () => window.removeEventListener('leaderboardUpdated', handleUpdate);
+    }, [fetchDistribution]);
+
+    const localizedName = useCallback((code: string) => {
+        if (locale === 'en') {
+            return EN_TYPE_COPY[code]?.name || TYPE_LIBRARY[code as keyof typeof TYPE_LIBRARY]?.cn || code;
+        }
+
+        return TYPE_LIBRARY[code as keyof typeof TYPE_LIBRARY]?.cn || code;
+    }, [locale]);
+
+    const rankedEntries = useMemo(() => entries.map((entry) => ({
+        ...entry,
+        name: localizedName(entry.mode),
+    })), [entries, localizedName]);
+
+    if (loading) {
+        return (
+            <div className="w-full bg-background border rounded-xl overflow-hidden shadow-sm">
+                <div className="flex justify-center p-8 text-muted-foreground animate-pulse">
+                    {t('loading')}
+                </div>
+            </div>
+        );
+    }
+
+    if (rankedEntries.length === 0) {
+        return (
+            <div className="w-full bg-background border rounded-xl overflow-hidden shadow-sm">
+                <div className="p-8 text-center text-muted-foreground">
+                    {t('empty')}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="w-full bg-background border rounded-xl overflow-hidden shadow-sm">
+            <div className="max-h-[420px] overflow-y-auto">
+                <table className="w-full text-sm">
+                    <thead className="bg-muted/50 sticky top-0 backdrop-blur-sm z-10">
+                        <tr>
+                            <th className="text-left font-medium p-4 text-muted-foreground">{t('rank')}</th>
+                            <th className="text-left font-medium p-4 text-muted-foreground">{t('type')}</th>
+                            <th className="text-right font-medium p-4 text-muted-foreground">{t('count')}</th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y">
+                        {rankedEntries.map((entry, index) => (
+                            <tr key={entry.mode} className="hover:bg-muted/50 transition-colors">
+                                <td className="p-4">
+                                    <div className="flex items-center justify-center w-6 h-6 rounded-full font-bold bg-muted text-muted-foreground text-xs">
+                                        {index + 1}
+                                    </div>
+                                </td>
+                                <td className="p-4 font-medium text-foreground">
+                                    {entry.name}
+                                </td>
+                                <td className="p-4 text-right font-mono font-bold text-foreground">
+                                    {entry.totalSubmissions}
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}

app/[locale]/(main)/games/sbti-test/page.tsx

@@ -6,6 +6,7 @@ import { GamePageTemplate } from '@/components/GamePageTemplate';
 import { routing } from '@/i18n/routing';
 import { generateAlternates } from '@/lib/utils';
 import Game from './components/Game';
+import SbtiTypeLeaderboard from './components/SbtiTypeLeaderboard';
 
 export function generateStaticParams() {
     return routing.locales.map((locale) => ({ locale }));
@@ -118,6 +119,8 @@ export default function SbtiTestPage({ params }: { params: Promise<{ locale: str
                     <p>{t('credits.originalAuthor')}</p>
                 </>
             }
+            leaderboardIntro={<p>{t('leaderboard.description')}</p>}
+            leaderboardComponent={<SbtiTypeLeaderboard />}
             faq={faqItems}
             relatedGames={['cps-test', 'stroop-effect-test', 'spacebar-clicker']}
             structuredData={structuredData}

app/api/leaderboard/route.ts

@@ -273,13 +273,48 @@ export async function GET(req: NextRequest) {
     try {
         const { searchParams } = new URL(req.url);
         const gameId = searchParams.get("gameId");
+        const aggregate = searchParams.get("aggregate");
         const mode = searchParams.get("mode") || DEFAULT_LEADERBOARD_MODE;
 
-        if (!gameId || !isValidMode(mode)) {
+        if (!gameId) {
             return NextResponse.json({ error: "Missing or invalid parameters" }, { status: 400 });
         }
 
         const { db, bucket } = await getCloudflareBindings();
+
+        if (aggregate === "modeCounts") {
+            const rows = await db.prepare(
+                `SELECT mode, COUNT(*) AS totalSubmissions
+                 FROM leaderboard
+                 WHERE game_id = ?
+                   AND mode IS NOT NULL
+                   AND mode != ''
+                 GROUP BY mode
+                 ORDER BY totalSubmissions DESC, mode ASC`
+            ).bind(gameId).all();
+
+            const entries = rows.results.map((row) => ({
+                mode: String(row.mode ?? ""),
+                totalSubmissions: toNumber(row.totalSubmissions),
+            }));
+
+            return NextResponse.json(
+                {
+                    entries,
+                    totalSubmissions: entries.reduce((sum, entry) => sum + entry.totalSubmissions, 0),
+                },
+                {
+                    headers: {
+                        "Cache-Control": "public, max-age=30, s-maxage=30, stale-while-revalidate=120",
+                    },
+                }
+            );
+        }
+
+        if (!isValidMode(mode)) {
+            return NextResponse.json({ error: "Missing or invalid parameters" }, { status: 400 });
+        }
+
         let snapshot = await readSnapshot(bucket, gameId, mode);
 
         if (!snapshot) {

components/GamePageTemplate.tsx

@@ -55,6 +55,7 @@ interface GamePageTemplateProps {
     leaderboardFormatterType?: FormatterType;
     leaderboardMode?: string;
     leaderboardIntro?: React.ReactNode;
+    leaderboardComponent?: React.ReactNode;
     structuredData?: Record<string, unknown> | Array<Record<string, unknown>>;
 }
 
@@ -73,6 +74,7 @@ export function GamePageTemplate({
     leaderboardFormatterType,
     leaderboardMode,
     leaderboardIntro,
+    leaderboardComponent,
     structuredData
 }: GamePageTemplateProps) {
     const t = useTranslations('common');
@@ -130,7 +132,7 @@ export function GamePageTemplate({
             </section>
 
             {/* Leaderboard - Option */}
-            {hasLeaderboard && (
+            {(hasLeaderboard || leaderboardComponent) && (
                 <section className="max-w-6xl mx-auto mb-16 space-y-6">
                     <div className="space-y-2">
                         <h2 className="text-3xl font-bold text-center">
@@ -143,11 +145,13 @@ export function GamePageTemplate({
                         )}
                     </div>
                     <div className="rounded-lg">
-                        <LeaderboardDisplay
-                            gameId={gameId}
-                            formatterType={leaderboardFormatterType}
-                            mode={leaderboardMode}
-                        />
+                        {leaderboardComponent ?? (
+                            <LeaderboardDisplay
+                                gameId={gameId}
+                                formatterType={leaderboardFormatterType}
+                                mode={leaderboardMode}
+                            />
+                        )}
                     </div>
                 </section>
             )}

messages/en/compiled.json

@@ -3233,6 +3233,17 @@
       "originalAuthor": "Original concept credit: Bilibili creator @蛆肉儿串儿",
       "sourceCode": "Source mirror on GitHub"
     },
+    "leaderboard": {
+      "description": "See the current SBTI personality ranking and which result appears most often.",
+      "loading": "Counting which personalities people are getting...",
+      "empty": "Not enough results yet. Be the first to add one.",
+      "rank": "Rank",
+      "type": "Type",
+      "count": "Count",
+      "topLabel": "Current leader",
+      "topDescription": "This type is currently in first place with {count} submissions, out of {total} total recorded results.",
+      "totalSubmissions": "Total submissions"
+    },
     "gameUI": {
       "introEyebrow": "Trending personality quiz",
       "introTitle": "MBTI is old news. SBTI is here.",

messages/en/sbtiTest.json

@@ -85,6 +85,17 @@
       "originalAuthor": "Original concept credit: Bilibili creator @蛆肉儿串儿",
       "sourceCode": "Source mirror on GitHub"
     },
+    "leaderboard": {
+      "description": "See the current SBTI personality ranking and which result appears most often.",
+      "loading": "Counting which personalities people are getting...",
+      "empty": "Not enough results yet. Be the first to add one.",
+      "rank": "Rank",
+      "type": "Type",
+      "count": "Count",
+      "topLabel": "Current leader",
+      "topDescription": "This type is currently in first place with {count} submissions, out of {total} total recorded results.",
+      "totalSubmissions": "Total submissions"
+    },
     "gameUI": {
       "introEyebrow": "Trending personality quiz",
       "introTitle": "MBTI is old news. SBTI is here.",

messages/zh/compiled.json

@@ -3233,6 +3233,17 @@
       "originalAuthor": "原始创意作者：B站 @蛆肉儿串儿",
       "sourceCode": "GitHub 镜像源码"
     },
+    "leaderboard": {
+      "description": "查看当前 SBTI 人格排行榜，看看哪种人格结果最多。",
+      "loading": "正在统计大家都测成了什么人格...",
+      "empty": "还没有足够的数据，先去做一次测试吧。",
+      "rank": "排名",
+      "type": "人格",
+      "count": "次数",
+      "topLabel": "当前最多",
+      "topDescription": "{count} 次提交里，它目前排在第一。总共已经记录了 {total} 次结果。",
+      "totalSubmissions": "总提交次数"
+    },
     "gameUI": {
       "introEyebrow": "最近很火的人格测试",
       "introTitle": "MBTI 已经过时，SBTI 来了。",

messages/zh/sbtiTest.json

@@ -85,6 +85,17 @@
       "originalAuthor": "原始创意作者：B站 @蛆肉儿串儿",
       "sourceCode": "GitHub 镜像源码"
     },
+    "leaderboard": {
+      "description": "查看当前 SBTI 人格排行榜，看看哪种人格结果最多。",
+      "loading": "正在统计大家都测成了什么人格...",
+      "empty": "还没有足够的数据，先去做一次测试吧。",
+      "rank": "排名",
+      "type": "人格",
+      "count": "次数",
+      "topLabel": "当前最多",
+      "topDescription": "{count} 次提交里，它目前排在第一。总共已经记录了 {total} 次结果。",
+      "totalSubmissions": "总提交次数"
+    },
     "gameUI": {
       "introEyebrow": "最近很火的人格测试",
       "introTitle": "MBTI 已经过时，SBTI 来了。",