かき氷注文システム (Kakigori Client)

Next.jsで構築されたかき氷注文システムのフロントエンドアプリケーションです。デバイスのモーションセンサーを活用したインタラクティブな注文体験を提供します。

概要

このアプリケーションは以下の3つの主要な画面で構成されています：

1. ホーム画面 (/) - アプリケーションのエントリーポイント
2. 注文画面 (/order) - デバイスの回転運動を検出してかき氷を作成
3. シロップ選択画面 (/syrup-selection) - ピンボールゲーム形式でシロップを選択

技術スタック

• フレームワーク: Next.js 15.5.3 (App Router)
• 言語: TypeScript
• スタイリング: Tailwind CSS 4
• 物理演算: A-Frame 1.5.0 + aframe-physics-system
• ゲームエンジン: Phaser 3.90.0
• パッケージマネージャー: Bun
• リンター: Biome

機能

注文画面 (/order)

• デバイスのモーションセンサーを使用した回転運動の検出
• 目標周回数（30周）の達成で次の画面へ進行
• リアルタイムでの周回数表示と視覚的フィードバック
• iOS Safariでのセンサー権限リクエスト対応

シロップ選択画面 (/syrup-selection)

• 4種類のシロップ（いちご、メロン、ブルーハワイ、オレンジ）から選択
• ピンボールゲーム形式の迷路でシロップを選択
• デバイスの傾きセンサーを使用したボール操作
• 物理演算によるリアルなボールの動き
• システム正気度システム（壁衝突で減少）
• 広告システムとリスポーン機能

セットアップ

前提条件

• Node.js 18以上
• Bun（推奨）または npm/yarn

インストール

# 依存関係のインストール
bun install

# 開発サーバーの起動
bun run dev

開発サーバーの起動

# 通常の開発サーバー
bun run dev

# HTTPS対応の開発サーバー
bun run dev:https

ブラウザで http://localhost:3000 を開いてアプリケーションを確認できます。

その他のコマンド

# プロダクションビルド
bun run build

# プロダクションサーバーの起動
bun run start

# リンターの実行
bun run lint

# コードフォーマット
bun run format

プロジェクト構造

src/
├── app/
│   ├── page.tsx                    # ホーム画面
│   ├── order/
│   │   ├── page.tsx               # 注文画面
│   │   └── CircleMotionDetector.ts # 回転運動検出クラス
│   └── syrup-selection/
│       ├── page.tsx               # シロップ選択画面
│       ├── components/
│       │   └── MazeCanvas.tsx     # 迷路キャンバスコンポーネント
│       └── lib/
│           └── maze.ts            # 迷路生成ライブラリ
├── globals.css                    # グローバルスタイル
└── layout.tsx                     # ルートレイアウト

主要な機能詳細

回転運動検出 (CircleMotionDetector)

• デバイスのオイラー角と加速度センサーを組み合わせた回転検出
• 回転行列を使用した座標変換
• 履歴ベースの安定した検出アルゴリズム

迷路生成 (maze.ts)

• 再帰的バックトラッキングアルゴリズムによる迷路生成
• 必ずクリア可能な迷路の保証
• ゴールと複数のポケット（8個以上）の配置

物理演算システム

• A-Frameを使用した3D物理演算
• デバイスの傾きに応じたボールの動き
• 壁衝突検出とエラーポップアップ表示

対応ブラウザ

• モバイル: iOS Safari、Android Chrome
• デスクトップ: Chrome、Firefox、Safari（センサー機能は制限あり）

注意事項

• モーションセンサー機能はモバイルデバイスでのみ完全に動作します
• iOSではSafariでのみセンサーアクセスが可能です
• デスクトップでは物理演算は動作しますが、センサー入力は制限されます

開発

ブランチ命名規則

機能開発時は以下の形式でブランチを作成してください：

feature/t0waxx/<機能名>

コメント

コード内のコメントは日本語で記述してください。

ライセンス

このプロジェクトはハッカソン用に開発されたものです。