公開中 · 趣味

Pokepedia

ゲームボーイのバトル風のシルエットクイズです。ポケモンの名前を当てるとモンスターボールを投げて、シール帳に入ります。初代151匹の図鑑もあります。

概要

2023年にJSPのチームプロジェクトでポケモン図鑑をつくりました。これはそれを今のスタックでひとりでつくり直したものです。ほとんどは楽しいから、そして小さなアプリをどこまで磨けるか試したくて。

いまはゲームがトップページです。シルエットが出てきたら、3つの言語のどれかで名前を答えると、トレーナーがモンスターボールを投げます。3回まちがえるとゲームオーバー。登録は不要で、ゲストとして遊べます。あとからGoogleを連携しても、シールとスコアはそのまま残ります。

シルエットバトル: 「たたかう」で答え、「ヒント」で名前の半分、「スキップ」「にげる」も。矢印キーとZキーでも遊べます。ピカチュウ、Pikachu、피카츄のどれでも正解です。
モンスターボールを投げる: 正解すると、ゲームボーイの灰色で手描きしたトレーナーがボールを投げてから、ポケモンが姿を見せます。連続正解でスコアと色違いの確率が上がります。
図鑑: 151匹を1ページに。3つの言語の名前か番号で検索でき、タイプの絞り込みと並び順はURLに残ります。
詳細カード: 能力値、特性、進化。アートワークはマウスや指に合わせて傾くホログラムカードで、タップすると色違いに変わります。
シール帳とランキング: 色違いも含めて埋めていく151枠と、みんなのベスト記録のランキング。
スマホで遊べる: ゲームボーイ全体が小さな画面に収まり、バトル中に指で触ってもページがスクロールしません。

アプリ: Next.js 16 (App Router, RSC, Server Actions) · React 19 · TypeScript
UI: Tailwind CSS v4 · Motion · Zustand · next-intl
データ: Supabase — Postgres, Auth, Storage · Row Level Security · RPC · pg_cron
テスト: Vitest · Playwright
ホスティング: Vercel（東京）· Supabase（東京）· Analytics · Speed Insights

進行中の問題が持っているのは、意味のないファイル名のシルエットと伏せ字の名前だけ。答えはprivateスキーマに置いています。

ルールは素のTypeScriptです。スコア、シール、次の問題はひとつのPostgres関数で書き込むので、二重送信でも二重に加算されません。

回答に1.6〜2.5秒かかっていました。関数はワシントン、DBは東京。関数を東京に移し、往復を8回から3回に減らして約0.25秒になりました。

ポケモンおよび関連する名称・アートワークの権利は任天堂、株式会社ポケモン、クリーチャーズ、ゲームフリークに帰属します。非公式・非営利のファンプロジェクトです。