個人開発 » beatoraja

実装に着手しました。

• ブランチ: feature/412
• 対応方針: アバターアプリ(obs/avatar/)で状態フィードの phase(select/playing/result)に応じてペットの表示位置を切り替える。select=左下隅 / playing=右端中央 / result=中央やや右・下寄り(曲名とCHART INFOの間)。サイズは全ステート共通で位置のみ移動。

対応が完了しました。

概要¶

配信画面のステート(phase: select / playing / result)に応じて、アバター(obs/avatar/)の表示位置を画面内で自動的に移動させるようにした。各画面でゲームUI・スキン装飾を隠さない空き領域へアバターを寄せる。

変更点¶

• 状態フィードJSONの phase を利用し、#app に data-phase 属性を付与して CSS transform: translate() で位置を切り替え(サイズは全ステート共通・位置のみ移動)。
  • select → 左下隅 / playing → 右端中央 / result → 中央やや右・下寄り(曲名とCHART INFOの間) / 未知・未設定 → 中央
• AvatarController.applyPhasePosition(phase) を追加。main.js は state.phase が含まれる時だけ適用し、部分state更新では現在位置を維持。
• 移動は --ease-glide(easeOutQuint 720ms)で滑らかに補間。prefers-reduced-motion 時は200msへ短縮。
• テスト用フック window.__avatar.getPhase() を追加、README に仕様を追記。
• 変更ファイル: obs/avatar/src/avatar.js / obs/avatar/src/main.js / obs/avatar/styles.css / obs/avatar/tests/app.spec.js / obs/avatar/README.md(計5件)

テスト¶

• .\gradlew.bat test : 未実行(Java非変更のため対象外)
• npx playwright test(obs/avatar) : 9 passed(既存8 + 新規 phase テスト)

関連 MR¶

• !91 (feature/412 → develop)

補足¶

• translate 値はスクショから推定した基準値。実解像度・実レイアウトでの最終微調整は styles.css の #app[data-phase=...] で可能。