Audio settings

client/src/pistols/components/Duel.tsx

@@ -40,7 +40,7 @@ export default function Duel({
         <h1 className='Quote'>{`“${message}”`}</h1>
         {(isFinished && animated == AnimationState.Finished) &&
           <Segment>
-            {challengeDescription}
+            <h3 className='Important'>{challengeDescription}</h3>
           </Segment>
         }
       </div>

client/src/pistols/components/GameContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { usePistolsContext, MenuKey } from '@/pistols/hooks/PistolsContext'
 import { GameState, useGameplayContext } from '@/pistols/hooks/GameplayContext'
-import { loadAudioAssets, isAudioAssetsLoaded } from '@/pistols/data/assets'
+import { loadAudioAssets, isAudioAssetsLoaded, AudioName } from '@/pistols/data/assets'
 import { ActionButton } from '@/pistols/components/ui/Buttons'
 import GameView from '@/pistols/components/GameView'
 import { useSettingsContext } from '../hooks/SettingsContext'
@@ -71,7 +71,7 @@ function GameStartOverlay({
   }, [isReady, hasInteracted])
 
   if (hasLoadedAudioAssets === true) {
-    return <GameAudios />
+    return <GameAudios isVisible={isVisible}/>
   }
 
   return (
@@ -82,14 +82,26 @@ function GameStartOverlay({
   )
 }
 
-const GameAudios = () => {
+const GameAudios = ({
+  isVisible
+}) => {
   const { musicEnabled, sfxEnabled } = useSettingsContext()
-  const { gameImpl, gameState, isPlaying } = useGameplayContext()
+  const { gameImpl } = useGameplayContext()
+
+  useEffect(() => {
+    const _play = (musicEnabled && isVisible)
+    gameImpl?.playAudio(AudioName.AMBIENT, _play)
+  }, [musicEnabled, isVisible])
+
+  useEffect(() => {
+    if (!isVisible) {
+      gameImpl?.stopAudio(AudioName.AMBIENT)
+    }
+  }, [isVisible])
 
   useEffect(() => {
-    const _play = (musicEnabled)
-    // gameImpl?.playAudio(AudioName.AMBIENT, _play)
-  }, [musicEnabled])
+    gameImpl?.setSfxEnabled(sfxEnabled)
+  }, [sfxEnabled])
 
   return <></>
 }

client/src/pistols/components/Menus.tsx

@@ -8,6 +8,7 @@ import { ChallengeState } from '@/pistols/utils/pistols'
 import AccountHeader from '@/pistols/components/account/AccountHeader'
 import { SPRITESHEETS } from '../data/assets'
 import { useGameplayContext } from '../hooks/GameplayContext'
+import { useSettingsContext } from '../hooks/SettingsContext'
 
 const Row = Grid.Row
 const Col = Grid.Column
@@ -72,12 +73,27 @@ export function MenuTavern({
 export function MenuDuel({
 }) {
   const router = useRouter()
+
+  const { settings, SettingsActions, dispatch } = useSettingsContext()
+  const _switch = (type, payload) => {
+    dispatch({
+      type,
+      payload,
+    })
+  }
+
   return (
     <div className='MenuDuel AlignCenter NoMouse'>
       <Menu secondary compact className='YesMouse' size='huge'>
         <Menu.Item onClick={() => router.push('/tavern')}>
           Back to Tavern
         </Menu.Item>
+        <Menu.Item onClick={() => _switch(SettingsActions.MUSIC_ENABLED, !settings.musicEnabled)}>
+          Music {settings.musicEnabled ? 'ON' : 'OFF'}
+        </Menu.Item>
+        <Menu.Item onClick={() => _switch(SettingsActions.SFX_ENABLED, !settings.sfxEnabled)}>
+          SFX {settings.sfxEnabled ? 'ON' : 'OFF'}
+        </Menu.Item>
       </Menu>
     </div>
   )

client/src/pistols/three/game.tsx

@@ -61,6 +61,8 @@ let _scene: THREE.Scene
 let _supportsExtension: boolean = true
 let _stats
 
+let _sfxEnabled = true
+
 
 export function dispose() {
   if (_animationRequest) cancelAnimationFrame(_animationRequest)
@@ -239,22 +241,22 @@ export function playActorAnimation(actorId: string, key: AnimName, callback: Fun
   _actor[actorId].setAnimation(key)
   _actor[actorId].playOnce(callback)
   if (key == AnimName.SHOOT) {
-    playAudio(AudioName.SHOOT)
+    playAudio(AudioName.SHOOT, _sfxEnabled)
   }
   if ([AnimName.SHOT_DEAD_FRONT, AnimName.SHOT_DEAD_BACK, AnimName.STRUCK_DEAD].includes(key)) {
-    playAudio(AudioName.BODY_FALL)
+    playAudio(AudioName.BODY_FALL, _sfxEnabled)
   }
   if ([AnimName.SHOT_INJURED_FRONT, AnimName.SHOT_INJURED_BACK, AnimName.STRUCK_INJURED].includes(key)) {
-    playAudio(AudioName.GRUNT_FEMALE)
+    playAudio(AudioName.GRUNT_FEMALE, _sfxEnabled)
   }
   if (key == AnimName.STRIKE_LIGHT) {
-    playAudio(AudioName.STRIKE_LIGHT)
+    playAudio(AudioName.STRIKE_LIGHT, _sfxEnabled)
   }
   if (key == AnimName.STRIKE_HEAVY) {
-    playAudio(AudioName.STRIKE_HEAVY)
+    playAudio(AudioName.STRIKE_HEAVY, _sfxEnabled)
   }
   if (key == AnimName.STRIKE_BLOCK) {
-    playAudio(AudioName.STRIKE_BLOCK)
+    playAudio(AudioName.STRIKE_BLOCK, _sfxEnabled)
   }
 }
 
@@ -483,3 +485,7 @@ export function stopAudio(name: AudioName) {
   const asset = AUDIO_ASSETS[name]
   asset?.object?.stop()
 }
+
+export function setSfxEnabled(enabled: boolean) {
+  _sfxEnabled = enabled
+}