feat:add bgm by Rikublender3d · Pull Request #17 · befoafsuger/rizap2025

Rikublender3d · 2025-12-14T03:34:53Z

Summary by CodeRabbit

Release Notes

New Features
- Added immersive audio system with background music and sound effects during gameplay interactions
UI/UX Improvements
- Enhanced layout spacing and visual presentation across multiple screens
- Reduced video recording time from 10 to 3 seconds
- Updated splash screen imagery
Improvements
- Refined score calculation methodology
- Enhanced logging for better debugging capabilities
- Updated app dependencies for stability and performance

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-14T03:35:03Z

Walkthrough

The pull request expands frontend app functionality with audio management (background music and sound effects), restructures navigation routes with expanded screen definitions, adjusts UI layout spacing globally with consistent padding adjustments, updates API score integration with enhanced logging, and bumps dependency versions for expo packages.

Changes

Cohort / File(s)	Change Summary
Splash & App Configuration `app.json`	Updated splash image reference from `splash-icon.png` to `dumbbell.png`; all other splash-screen properties retained.
Audio Management System `utils/audio.ts`	New AudioManager class introduced with lifecycle methods for background music and sound effects playback using expo-av; includes volume/enable toggles, persistent settings via AsyncStorage, and per-sound caching. Exports singleton `audioManager` instance.
Navigation Structure `app/_layout.tsx`	Replaced root Stack with headerShown globally disabled via screenOptions; added multiple Stack.Screen entries (index, battle, battle-game, battle-result, solo, settings, create-user, login-screen); modal screen now explicitly sets headerShown: true with modal presentation.
Score & API Integration `utils/score.ts`	Updated API target endpoint and disabled mock mode by default; expanded ScoreResponse interface with max_score, avg_score, last_score fields; enhanced logging throughout API lifecycle (pre-request, post-request, error handling); removed active mock data branch.
Home Screen `app/index.tsx`	Added audioManager initialization on mount and BGM playback control; integrated audio feedback (select SE) on navigation actions; injected dumbbell image UI element near XP display; adjusted layout spacing and placeholder button styling.
Battle System Screens `app/battle.tsx`, `app/battle-game.tsx`, `app/battle-result.tsx`	Replaced ScreenHeader component with themed Text element in battle.tsx; added consistent paddingTop: 80 across all three screens; battle-game.tsx now plays fight BGM on mount, hit SE after damage calculation, victory BGM on enemy defeat, and select SE on escape button; defeat handling stops BGM.
Recording & Solo Mode `app/solo.tsx`	Removed file:// prefix logic and use video.path directly; reduced recording duration from 10 to 3 seconds; changed score result null fallbacks from 'N/A' to '0'; updated button label accordingly; added paddingTop: 80 to container.
Auth & User Setup Screens `app/create-user.tsx`, `app/login-screen.tsx`	Added paddingTop: 80 to container styles for consistent vertical spacing across authentication flows.
UI Components `components/battle/EnemyCard.tsx`	Changed Text component import from react-native to themed Text component; no behavioral changes to rendering.
Dependencies `package.json`	Bumped expo ~54.0.27 → ~54.0.29; added expo-av ~16.0.8; increased expo-constants ~18.0.11 → ~18.0.12; updated expo-router ~6.0.17 → ~6.0.19.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

AudioManager implementation: Review AsyncStorage integration, expo-av API usage, singleton pattern, and lifecycle correctness across multiple screens
Score API endpoint migration: Verify new endpoint functionality, mock mode disabling implications, and logging comprehensiveness for debugging
Navigation route structure: Cross-check all screen definitions match actual file paths and that headerShown configuration applies correctly
UI padding consistency: Confirm paddingTop: 80 is applied uniformly and doesn't break layouts on various screen sizes
Audio integration points: Validate audio cue timing in battle-game.tsx (BGM/SE sequencing, cleanup on unmount) and home screen initialization

Possibly Related PRs

feat:add camera #15: Shares modifications to video recording and score upload flow (solo.tsx, battle-game.tsx, score.ts) with overlapping video path handling and scoring logic changes.
認証周り #8: Overlaps on navigation and layout changes affecting app._layout.tsx and index.tsx with similar route and UI structure adjustments.

Poem

🎵 Hop, hop! The dumbbell dances in the light,
Audio beats sync the battle's fight,
Routes align, padding flows so right,
Phoenix rises from expo's update flight! 🐰✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.
Title check	❓ Inconclusive	The title 'feat:add bgm' is only partially related to the changeset. While BGM functionality is added, the PR includes extensive changes beyond audio: new navigation routes, UI layout adjustments, video handling, score calculation updates, and component refactoring.	Consider a more comprehensive title like 'feat: add audio system and restructure navigation' to better reflect the full scope of changes, or clarify if this PR should focus solely on BGM functionality.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/add-bgm

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 6

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

frontend/app/solo.tsx (1)

1-1: Critical: Update the lockfile to fix pipeline failure.

The pipeline is failing because pnpm-lock.yaml is out of sync with package.json. One dependency was added (expo-av@~16.0.8) and three were updated (expo, expo-constants, expo-router).

Run this command to update the lockfile:
cd frontend && pnpm install
Then commit the updated pnpm-lock.yaml file.

frontend/app/battle-game.tsx (1)

47-73: Add error handling for audio operations.

Similar to index.tsx, the audio initialization and BGM management lack error handling. Audio failures shouldn't crash the game screen.

Apply this diff:

 useEffect(() => {
   const init = async () => {
-    // 戦闘BGM再生
-    await audioManager.playBGM(require('@/assets/sounds/bgm/fight.mp3'))
-
-    const user = await getCurrentUser()
-    setUserLevel(user.level)
-    const maxHp = 100 + user.level * 10
-    setUserMaxHp(maxHp)
-    setUserHp(maxHp)
-
-    // 敵データを取得
-    const enemies = await getEnemies()
-    const enemy = enemies.find((e) => e.id === enemyId)
-    if (enemy) {
-      setEnemyMaxHp(enemy.hp)
-      setEnemyHp(enemy.hp)
-    }
-
-    addLog('戦闘開始！')
+    try {
+      // 戦闘BGM再生
+      await audioManager.playBGM(require('@/assets/sounds/bgm/fight.mp3'))
+    } catch (error) {
+      console.error('Failed to play battle BGM:', error)
+    }
+
+    try {
+      const user = await getCurrentUser()
+      setUserLevel(user.level)
+      const maxHp = 100 + user.level * 10
+      setUserMaxHp(maxHp)
+      setUserHp(maxHp)
+
+      // 敵データを取得
+      const enemies = await getEnemies()
+      const enemy = enemies.find((e) => e.id === enemyId)
+      if (enemy) {
+        setEnemyMaxHp(enemy.hp)
+        setEnemyHp(enemy.hp)
+      }
+
+      addLog('戦闘開始！')
+    } catch (error) {
+      console.error('Failed to initialize battle:', error)
+      addLog('初期化エラーが発生しました')
+    }
   }
   init()

   return () => {
-    // 画面離脱時にBGM停止する
-    audioManager.stopBGM()
+    try {
+      // 画面離脱時にBGM停止する
+      audioManager.stopBGM()
+    } catch (error) {
+      console.error('Failed to stop BGM:', error)
+    }
   }
 }, [enemyId])

🧹 Nitpick comments (6)

frontend/utils/audio.ts (1)
4-165: Consider adding a cleanup method for app lifecycle management.

Add a dispose() or cleanup() method to unload all sounds when the app closes or the audio manager is no longer needed.
async dispose() {
  try {
    await this.stopBGM()
    
    // Unload all cached SE sounds
    for (const [key, sound] of this.seCache.entries()) {
      await sound.unloadAsync()
      this.seCache.delete(key)
    }
    
    this.isInitialized = false
    console.log('🎵 AudioManager disposed')
  } catch (error) {
    console.error('❌ AudioManager disposal failed:', error)
  }
}
frontend/app/solo.tsx (2)
182-195: Consider distinguishing between zero scores and missing scores.

Displaying '0' when max_score, avg_score, or last_score is null might mislead users into thinking they scored zero, when in reality the score failed to compute or is unavailable.

Consider either:

Keep 'N/A' to clearly indicate missing data

Add additional context like '0 (failed)' or show an error message when scores are null

Use a different visual indicator (e.g., '--' or '?')

Apply this diff if you prefer the first option:
-              {scoreResult.max_score?.toFixed(1) ?? '0'}
+              {scoreResult.max_score?.toFixed(1) ?? 'N/A'}
...
-              {scoreResult.avg_score?.toFixed(1) ?? '0'}
+              {scoreResult.avg_score?.toFixed(1) ?? 'N/A'}
...
-              {scoreResult.last_score?.toFixed(1) ?? '0'}
+              {scoreResult.last_score?.toFixed(1) ?? 'N/A'}
61-62: Consider removing or reducing console logs for production.

The file contains multiple console.log statements for debugging. While helpful during development, excessive logging in production can impact performance and expose internal details.

Consider:

Using a logging utility that respects environment (e.g., only log in __DEV__)

Reducing log verbosity for production builds

Using a structured logging library

Example:
if (__DEV__) {
  console.log('📹 Using video.path directly:', videoUri)
}
frontend/app/battle-game.tsx (1)
176-177: Consider adding defeat audio feedback.

Currently, victory plays a special BGM but defeat only stops the music. For better UX symmetry and player feedback, consider adding a defeat sound effect or BGM.

Example:
 if (newUserHp <= 0) {
   setIsGameOver(true)
   setWinner('enemy')
   addLog('やられた...')
   audioManager.stopBGM()
+  await audioManager.playSE(require('@/assets/sounds/se/se_defeat.wav'))
   return
 }
frontend/utils/score.ts (2)
42-48: Reduce console logging for production.

The file contains extensive console logging with emojis and multiple log statements per operation. While useful for debugging, this is excessive for production and may impact performance.

Consider:

Use environment-based logging (only log in development)

Reduce the number of log statements

Use a structured logging library

Example refactor:
export const uploadVideoForScore = async (
  videoUri: string,
  mode: Mode
): Promise<string> => {
  if (__DEV__) {
    console.log('Uploading video:', { videoUri, mode })
  }

  const formData = new FormData()
  const filename = `video_${Date.now()}.mp4`

  formData.append('file', {
    uri: videoUri,
    type: 'video/mp4',
    name: filename,
  } as any)

  formData.append('mode', mode as string)

  try {
    const response = await fetch(SCORE_API_URL, {
      method: 'POST',
      body: formData,
    })

    if (__DEV__) {
      console.log('API response:', { 
        status: response.status, 
        statusText: response.statusText 
      })
    }

    if (!response.ok) {
      const errorText = await response.text()
      console.error('API Error:', errorText)
      throw new Error(`HTTP ${response.status}: ${errorText}`)
    }

    const responseText = await response.text()
    
    if (__DEV__) {
      try {
        const parsed = JSON.parse(responseText)
        console.log('Parsed response:', parsed)
      } catch (e) {
        console.warn('Response is not valid JSON')
      }
    }

    return responseText
  } catch (error) {
    console.error('Upload failed:', error)
    throw error
  }
}
Also applies to: 79-119

70-74: Document the FormData type cast.

The as any cast bypasses TypeScript's type checking for the file blob. While this is common in React Native due to platform differences, adding a comment explaining why it's necessary would improve code maintainability.
 formData.append('file', {
   uri: videoUri,
   type: 'video/mp4',
   name: filename,
-} as any)
+} as any) // React Native FormData accepts uri-based file objects
Alternatively, if you want stronger typing, create a type definition:
interface ReactNativeFile {
  uri: string
  type: string
  name: string
}

formData.append('file', {
  uri: videoUri,
  type: 'video/mp4',
  name: filename,
} as unknown as ReactNativeFile)

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6064606 and 3d6693a.

⛔ Files ignored due to path filters (8)

frontend/assets/images/dumbbell.png is excluded by !**/*.png
frontend/assets/images/icon.png is excluded by !**/*.png
frontend/assets/sounds/bgm/bgm.wav is excluded by !**/*.wav
frontend/assets/sounds/bgm/fight.mp3 is excluded by !**/*.mp3
frontend/assets/sounds/bgm/victory.mp3 is excluded by !**/*.mp3
frontend/assets/sounds/se/se_hit_001.wav is excluded by !**/*.wav
frontend/assets/sounds/se/se_select_002.wav is excluded by !**/*.wav
frontend/bun.lock is excluded by !**/*.lock

📒 Files selected for processing (13)

frontend/app.json (2 hunks)
frontend/app/_layout.tsx (1 hunks)
frontend/app/battle-game.tsx (9 hunks)
frontend/app/battle-result.tsx (1 hunks)
frontend/app/battle.tsx (3 hunks)
frontend/app/create-user.tsx (1 hunks)
frontend/app/index.tsx (7 hunks)
frontend/app/login-screen.tsx (1 hunks)
frontend/app/solo.tsx (5 hunks)
frontend/components/battle/EnemyCard.tsx (1 hunks)
frontend/package.json (1 hunks)
frontend/utils/audio.ts (1 hunks)
frontend/utils/score.ts (3 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

frontend/**/*.{ts,tsx}