VRChatカードゲーム「ぷぷりえーる」のデッキ構築・ゲームプレイができるwebアプリ

https://pplale.vercel.app/

ぷぷりえーるとは

VRChatのイベント「ロリっ子喫茶ぷぷりえ」のカードゲームで、VRChat上でプレイできます。 幼女デッキとお菓子デッキを使って相手のお貸しポイントを先に無くした方が勝ち！

推しのカードでデッキを構築しよう！

ゲームプレイもついにwebでできるように!!

開発について

ドキュメントの入口は docsの目次。CPUの評価式・重み・探索・学習は CPU仕様 を参照。

能力説明とイチゴ・ぶどうのFAQは ルール・裁定集 を参照。 カード効果の機械向け処理と、提供ルールへの対応状況は カード効果の実装状況 を参照。 Next.js / game-core の分離方針、Vercelへの配置、未確定ルールは 対戦ゲームの設計 を参照。 ゲーム本体の独立パッケージは packages/game-core に置く。

ゲームは /game/。開くとフレンドと集まれるルームに入り、招待リンク（Discordに貼れる）で友だちを呼んで対戦・観戦したり、空席にCPUを呼んだりできる（集まって遊べるルームの設計）。ひとりでのCPU対戦・両側操作は /game/cpu/。Firebaseの保存済みデッキも読み込める。/game/editor/ には新カードの効果を試す盤面も用意している。操作と対応範囲は 盤面エミュレータ を参照。

開発環境のセットアップ

このプロジェクトは mise でNode.jsのバージョンを管理している。

mise install
pnpm install --frozen-lockfile
pnpm run dev

miseをシェルへ有効化し、このディレクトリで指定のNode.jsが選ばれている状態で実行する。 パッケージマネージャーは pnpm を使う（pnpm-lock.yaml が正）。pnpm workspaces が packages/game-core をリポジトリ内でリンクするため、game-core を npm に公開する必要はない。 mise run install と mise run dev も、それぞれ同じpnpmコマンドを呼び出す補助タスクとして利用できる。

ルーム（フレンドとの対戦・CPUを呼ぶ・招待）まで手元で試すときは、ルームサーバーとWebアプリをまとめて起動する。

pnpm run dev:rooms   # ルームサーバー http://localhost:8099 と http://localhost:3000/game/

ルームサーバーが応答してから、そこにつないだ pnpm run dev を始める。Ctrl+C で両方止まる。ルームはプロセス内に持つので、止めると消える（REDIS_URL を付ければそのRedisを使う）。ポートは ROOM_PORT・PORT で変えられる。別の人として入るときはシークレットウィンドウを使う。 型チェック・Lint・カードデータ検査をまとめて実行する場合は mise run check を使う。

開発経緯

VRChatのカードゲーム「ぷぷりえーる」は、VRChatのワールド内でデッキを構築する必要があり、保存は各自がデッキデータをメモする必要がありました。これをブラウザ上で構築してユーザーごとに保存できるようにしたいと思い開発を開始しました。

また、2Pickで構築したいという要望や、webアプリがあったらいいなという話があったため、このプロジェクトを進めることになりました。

技術

短期間で必要な機能を形にするため、Next.jsを使い、AIも活用しながらハッカソン並みの速度で開発した。 VRChatでユーザーと話し、要望を聞きながら実装を繰り返している。 現在のスタイリングにはPanda CSSを使用し、ユーザーごとのデッキ保存にはFirebaseを利用している。

カードの追加・画像更新

カード画像はリポジトリのサイズを抑えるため WebP（幅800px）で管理している。 画像を追加・更新するときは以下の手順で行う。

1. PNG画像を public/images/yojo|sweet|playable/ に置く
2. src/data/*.json にカードを追加する（imageUrl は .png のままでOK）
3. pnpm run cards:optimize を実行 → WebP変換 + JSONの imageUrl を .webp に自動更新
4. pnpm run cards:check で整合性チェック（CIでも自動実行される）

pnpm run cards:optimize
pnpm run cards:check

• .png の参照が残ったままだと cards:check がエラーになる（変換し忘れ防止）
• 元のPNGは不要になったら削除してよい（git履歴に残っている）

OGP用カードPNG（public/og-cards/{yojo,sweet,playable}/）と一覧用WebP（public/deck-thumbnails/）はGit管理しない。 pnpm run build・pnpm run dev・pnpm run test:deck-images の前に自動生成する。 手動では pnpm run cards:generate を使う。元画像または生成スクリプトの更新時だけ作り直し、OGP用PNGは可逆圧縮する。 生成物は内容ハッシュ付きで .next/cache/pplale-assets/ に保存し、public/ へハードリンクする。.next/cache は next build でもVercel・CI・Dockerのビルドキャッシュでも保持されるため、クリーンなチェックアウトでも変更のないカードは再生成しない。 caption.png と profile-bg.jpg は引き続き同梱する。 クリーンな環境でもテスト用ヘルパーの型を解決できるよう、本番ビルドとルームサーバーテストの前にgame-coreも自動でビルドする。

環境変数について

firebaseを使うためには必要です。

NEXT_PUBLIC_CPU_SERVER_URL（任意）: CPU サーバーの URL。設定すると「さいきょう」がそのモデルを使い、同意したプレイヤーの対戦記録を送る（services/cpu-server）。