ludo-base

Ludo-Baseは、Base上に構築された分散型Ludoゲーム体験であり、Farcasterへの対応を想定して設計されたNext.js 16アプリケーションです。グラスモーフィズムのダッシュボードインターフェースに、オンチェーンウォレット接続とマルチプレイヤー向けルームフローを組み合わせています。 機能 - ゲームロビー：ピル型のセクションヘッダー、水平方向のゲームモード選択、マッチタイプ（1v1、2v2、4P）、数値入力・ステッパー・クイック選択チップを備えたエントリー料の賭け金エリア、および「QUICK MATCH」と「WITH FRIENDS」のコールトゥアクションボタンを備えたセットアップフロー。 - ゲームプレイ：app/components/Board.tsxでコアとなるLudoボードを実装し、app/components/SnakesBoard.tsxでヘビと梯子のバリアントを提供します。 - マルチプレイヤー：PeerJSとhooks/TeamUpContext.tsxを用いて、友人とプレイするためのルームホスト/参加状態を管理します。 - 永続化：lib/matchRecorder.tsに、Supabaseをバックエンドとした試合結果の永続化ヘルパーが含まれています。 - ウォレットおよびオンチェーン：WagmiとCoinbase OnchainKitにより、Baseネットワークのウォレット統合を実現しています。 技術スタック Next.js 16 (App Router), React 19, TypeScript 5, Tailwind CSS 4, Framer Motion, Wagmi + Coinbase OnchainKit, Supabase, PeerJS。 UIデザイン 視覚的な方向性は、ダークなターミナル風グラスサーフェスに、フォーカスおよびアクティブ状態を示すシアンのアクセント（#00E5FF）を配しています。背景にはチャコール/グラファイトのグラデーション（#0B0F14から#141A22）と微細なテクスチャノイズを使用し、サポートテキストには等幅フォントを採用しています。また、リポジトリ相対の絶対ファイルパス、PascalCaseによるReactコンポーネント名、モバイルとデスクトップで一貫したアクション優先の短いインターフェースコピーなどの規約が定められています。 ローカルでの実行 Node.js 20+とnpmが必要です。npm installで依存関係をインストールし、npm run devで開発サーバーを起動します（http://localhost:3000で動作）。本番ビルドはnpm run build後にnpm startを実行し、リンティングはnpm run lintで可能です。.env.localファイルを作成し、ウォレット/ネットワーク、Supabase、Farcaster/Neynar統合に必要な値を設定する必要があります。 ステータスと注意点 READMEによると、2026年3月時点の状態であり、最近の変更履歴ではロビーのレイアウトとパディングの整合性、賭け金コントロールのスタイリング、マッチタイプの状態、テーマおよびフッターの調整に焦点が当てられています。バックエンドの接続拡張に伴い、一部のパネルでは依然としてプレースホルダーやモックデータが使用されており、TeamUpおよび試合永続化フローについては、再接続やエッジケースへの対応に向けた継続的な強化が必要です。リポジトリにはゲーム設計ドキュメントとビジュアルアセットガイドが含まれています。