🧖 Browser Sauna Simulator

ブラウザで楽しむ疑似サウナ体験アプリです。

サウナ → 水風呂 → 外気浴（ととのう）の3ステージを巡り、外気浴からまたサウナへ戻って何セットでも繰り返せます。1セットは約1〜2分で、いつ次へ進んでも構いません。音はすべて Web Audio API でその場で生成しており、音声ファイルは使っていません。

機能

• サウナ室 — 温度・湿度・滞在時間（目安 50秒）を表示。ロウリュでストーブから蒸気が上がり、温度と湿度が上がります
• 水風呂 — 水温 16°C。滞在時間（目安 20秒）と心拍（演出）を表示し、波紋で冷たさを描きます
• 外気浴（ととのう） — 吸う／吐くを4秒ずつ案内する呼吸ガイド付き。ととのいの段階名とひと言を表示し、「もう一度サウナへ」で次のセットに進みます
• 終了画面 — どのステージからでも「体験を終える」で音がフェードアウトし、完了したセット数・入室からの滞在時間・セットごとのととのい度を表示。この端末での通算回数・累計セット数と前回の日付も添えます。「トップに戻る」か「もう一度入室する」を選べます
• 景色だけを見る — 右上の「景色」で見出しと操作パネルを隠せます（呼吸ガイドは残ります）
• 設定（右上）— 景色（2D／3D）・天気（晴れ／雨／雪）・季節・時間帯・音量・全画面をまとめて変更
• 3Dサウナ（試験版） — 「設定」の「3Dを試す」で、見回せる3Dのサウナ・水風呂・庭に切り替え（初回は2D、選択は保存）。季節（春／夏／秋／冬）と時間帯（自動／昼／夕暮れ／夜）を選べ、音はストーブと注水口の位置から聞こえます。読み込みに失敗したときは2Dのまま続けます
• 全画面表示（Fullscreen API 対応ブラウザのみ。iPhone の Safari では表示されません）
• 入室中は画面が自動で消えないようにします（Screen Wake Lock API 対応ブラウザのみ）
• prefers-reduced-motion: reduce の環境では呼吸リングなどの動きを抑え、文字の案内を残します

ヘッドホンでの利用がおすすめです。URL に ?view=3d / ?view=2d を付けると表示モードを指定でき、?sound=off を付けるとミュートのまま入室します。

キーボードショートカット

キー	操作
Space	サウナではロウリュ、水風呂・外気浴では次のステージへ
M	ミュート切り替え（入室後）
U	UI の表示・非表示（入室後）
矢印キー	3D表示中の見回し（ドラッグでも操作できます）
F	全画面の切り替え

入力欄の操作中や修飾キー付きの入力では反応しません。キーボードでフォーカスしたボタン上の Space は、そのボタンの押下になります。

技術スタック

• React 19
• TypeScript
• Vite
• Three.js（3D表示。2Dで使うときは読み込みません）
• Web Audio API（環境音・ロウリュ・空間音響）
• Vitest・Playwright（テスト）

開発

# パッケージのインストール
bun install

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

ビルド・検証

bun run build は型チェックを行わないため、CI と同じく個別に実行します。

# 型チェック（プロジェクト参照ごとに検査）
bunx tsc -b

# 単体テスト・Lint・フォーマット確認
bun run test
bun run lint
bun run format:check

# 本番ビルドを実行する場合
bun run build

# ビルドしたアプリのプレビュー
bun run preview

# 実ブラウザでの回帰検証（本番ビルドを作り、インストール済みの Google Chrome で実行）
bun run test:browser

長時間の継続利用（test:browser:soak）・静止画（test:browser:visual）・低速回線（test:browser:network）などの検証は e2e/CLAUDE.md を、3D表示の作業状況は docs/3d-sauna-progress.md を参照してください。