refactor: sound class to normal module

arcomage · Dec 3, 2021 · dfd7cb4 · dfd7cb4
1 parent 034932c
commit dfd7cb4
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 75 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,7 +13,7 @@ import { GameSizeContext } from './utils/GameSizeContext'
 import { minRootFontSize, smallRootFontScreenMax } from './constants/visuals'
 import { langInfo } from './i18n/langs'
 import SvgFilters from './components/effects/SvgFilters'
-import { Sound } from './utils/Sound'
+import { setVolume } from './utils/Sound'
 
 const App = () => {
   const dispatch = useAppDispatch()
@@ -33,7 +33,7 @@ const App = () => {
   useBeforeWindowUnloadWarning()
 
   useEffect(() => {
-    Sound.setVolume(volume)
+    setVolume(volume)
   }, [volume])
 
   useEffect(() => {

diff --git a/src/epics/cards/discardCardCoreEpic.ts b/src/epics/cards/discardCardCoreEpic.ts
@@ -22,7 +22,7 @@ import { isOfType } from 'typesafe-actions'
 import { ofType, StateObservable } from 'redux-observable'
 import { RootStateType } from '../../types/state'
 import { of, concat, EMPTY, Observable } from 'rxjs'
-import { Sound } from '../../utils/Sound'
+import { play } from '../../utils/Sound'
 import { cardTransitionDuration } from '../../constants/visuals'
 import getPan from '../../utils/getPan'
 
@@ -35,7 +35,7 @@ export default (
     withLatestFrom(state$),
     mergeMap(([action, state]) => {
       const { index, position, owner } = action
-      Sound.play('deal', null, getPan(state.cards.total[owner], position))
+      play('deal', null, getPan(state.cards.total[owner], position))
       return concat(
         state.game.isNewTurn
           ? of<RootActionType>({

diff --git a/src/epics/cards/drawCardCoreEpic.ts b/src/epics/cards/drawCardCoreEpic.ts
@@ -21,7 +21,7 @@ import { isOfType } from 'typesafe-actions'
 import { ofType, StateObservable } from 'redux-observable'
 import { RootStateType } from '../../types/state'
 import { concat, EMPTY, Observable, of } from 'rxjs'
-import { Sound } from '../../utils/Sound'
+import { play } from '../../utils/Sound'
 import {
   drawCardPre,
   cardTransitionDuration,
@@ -47,7 +47,7 @@ export default (
       const { n } = action
       const owner = state.game.playersTurn ? 'player' : 'opponent'
       const multiGameNumber = state.multiplayer.gameNumber
-      Sound.play(
+      play(
         'deal',
         null,
         getPan(state.cards.total[owner] + 1, state.cards.nextPos[owner]),

diff --git a/src/epics/cards/useCardCoreEpic.ts b/src/epics/cards/useCardCoreEpic.ts
@@ -23,7 +23,7 @@ import { isOfType } from 'typesafe-actions'
 import { ofType, StateObservable } from 'redux-observable'
 import { RootStateType } from '../../types/state'
 import { concat, EMPTY, Observable, of } from 'rxjs'
-import { Sound } from '../../utils/Sound'
+import { play } from '../../utils/Sound'
 import cards from '../../data/cards'
 import {
   cardNextStepDelay,
@@ -41,7 +41,7 @@ export default (
     mergeMap(([action, state]) => {
       const { n, index, position, owner } = action
       const special = cards[n].special
-      Sound.play('deal', null, getPan(state.cards.total[owner], position))
+      play('deal', null, getPan(state.cards.total[owner], position))
       return concat(
         state.game.isNewTurn
           ? of<RootActionType>({

diff --git a/src/epics/screen/screenEndEpic.ts b/src/epics/screen/screenEndEpic.ts
@@ -9,7 +9,7 @@ import { isOfType } from 'typesafe-actions'
 import { StateObservable } from 'redux-observable'
 import { isEndScreenNoCloseState, RootStateType } from '../../types/state'
 import { concat, Observable, of } from 'rxjs'
-import { Sound } from '../../utils/Sound'
+import { play } from '../../utils/Sound'
 
 const soundMap = { lose: 'defeat', tie: 'victory', win: 'victory' } as const
 
@@ -23,7 +23,7 @@ export default (
     mergeMap(([action, state]) => {
       const { payload } = action
       if (isEndScreenNoCloseState(payload)) {
-        Sound.play(soundMap[payload.type])
+        play(soundMap[payload.type])
       }
       return concat(
         of<RootActionType>({

diff --git a/src/epics/status/updateStatusEpic.ts b/src/epics/status/updateStatusEpic.ts
@@ -13,7 +13,7 @@ import { withLatestFrom, filter, mergeMap, takeUntil } from 'rxjs/operators'
 import { isOfType } from 'typesafe-actions'
 import { ofType, StateObservable } from 'redux-observable'
 import { RootStateType } from '../../types/state'
-import { Sound } from '../../utils/Sound'
+import { play } from '../../utils/Sound'
 import { concat, Observable, of } from 'rxjs'
 
 export default (
@@ -43,7 +43,7 @@ export default (
             }
           }
           if (!noSound) {
-            Sound.play(statusProp, increase, isPlayer)
+            play(statusProp, increase, isPlayer)
           }
           return {
             isPlayer,

diff --git a/src/utils/Sound.ts b/src/utils/Sound.ts
@@ -19,7 +19,8 @@ import defeatUrl from '../../assets/sfx/defeat.mp3'
 import { Howl, Howler } from 'howler'
 import { stereoPanValue } from '../constants/visuals'
 
-const soundAdditionalTypes = ['deal', 'victory', 'defeat'] as const // | 'typing' | 'start'
+const soundAdditionalTypes = ['deal', 'victory', 'defeat'] as const
+// 'typing', 'start'
 
 type soundTypeType =
   | keyof PersonStatusType
@@ -63,73 +64,65 @@ const audioMap = {
   defeat: 'defeat',
 }
 
-export class SoundClass {
-  audios: Record<string, Howl>
+Howler.autoUnlock = false
 
-  constructor(volume: number = 5) {
-    this.setVolume(volume)
-
-    this.audios = {
-      towerUp: this.loadAudio(towerUpUrl),
-      wallUp: this.loadAudio(wallUpUrl),
-      brickUp: this.loadAudio(brickUpUrl),
-      gemUp: this.loadAudio(gemUpUrl),
-      recruitUp: this.loadAudio(recruitUpUrl),
-      brickDown: this.loadAudio(brickDownUrl),
-      gemDown: this.loadAudio(gemDownUrl),
-      recruitDown: this.loadAudio(recruitDownUrl),
-      damage: this.loadAudio(damageUrl),
-      deal: this.loadAudio(dealUrl),
-      victory: this.loadAudio(victoryUrl),
-      defeat: this.loadAudio(defeatUrl),
-    }
-  }
+const loadAudio = (url: string) => {
+  return new Howl({
+    src: [url],
+  })
+}
 
-  loadAudio(url: string) {
-    return new Howl({
-      src: [url],
-    })
-  }
+const audios: Record<string, Howl> = {
+  towerUp: loadAudio(towerUpUrl),
+  wallUp: loadAudio(wallUpUrl),
+  brickUp: loadAudio(brickUpUrl),
+  gemUp: loadAudio(gemUpUrl),
+  recruitUp: loadAudio(recruitUpUrl),
+  brickDown: loadAudio(brickDownUrl),
+  gemDown: loadAudio(gemDownUrl),
+  recruitDown: loadAudio(recruitDownUrl),
+  damage: loadAudio(damageUrl),
+  deal: loadAudio(dealUrl),
+  victory: loadAudio(victoryUrl),
+  defeat: loadAudio(defeatUrl),
+}
 
-  setVolume(volume: number): void {
-    Howler.volume(volume / 10)
-  }
+export const setVolume = (volume: number): void => {
+  Howler.volume(volume / 10)
+}
 
-  /**
-   *
-   * @param type - sound type name
-   * @param increase - increase or decrease, only for `tower`, `wall` and resource-related
-   * @param pan - stereo pan value, `-1` to `1`,
-   * if it's boolean, then: `true`: -stereoPanValue (-0.8 for now, i.e. real left);
-   * `false`: stereoPanValue (0.8 for now, i.e. real right)
-   */
-  play(
-    type: soundTypeType,
-    increase: boolean | null = null,
-    pan: boolean | number = 0,
-  ): void {
-    const audioName: string = (() => {
-      const tempObj = audioMap[type]
-      if (hasOwnProperty(tempObj, 'up')) {
-        return tempObj[increase ? 'up' : 'down']
-      } else {
-        return tempObj
-      }
-    })()
+/**
+ *
+ * @param type - sound type name
+ * @param increase - increase or decrease, only for `tower`, `wall` and resource-related
+ * @param pan - stereo pan value, `-1` to `1`,
+ * if it's boolean, then: `true`: -stereoPanValue (-0.8 for now, i.e. real left);
+ * `false`: stereoPanValue (0.8 for now, i.e. real right)
+ */
+export const play = (
+  type: soundTypeType,
+  increase: boolean | null = null,
+  pan: boolean | number = 0,
+): void => {
+  const audioName: string = (() => {
+    const tempObj = audioMap[type]
+    if (hasOwnProperty(tempObj, 'up')) {
+      return tempObj[increase ? 'up' : 'down']
+    } else {
+      return tempObj
+    }
+  })()
 
-    const audio = this.audios[audioName]
+  const audio = audios[audioName]
 
-    const _pan: number = (() => {
-      if (typeof pan === 'boolean') {
-        return pan ? -stereoPanValue : stereoPanValue
-      } else {
-        return pan
-      }
-    })()
-    audio.stereo(_pan)
+  const _pan: number = (() => {
+    if (typeof pan === 'boolean') {
+      return pan ? -stereoPanValue : stereoPanValue
+    } else {
+      return pan
+    }
+  })()
+  audio.stereo(_pan)
 
-    audio.play()
-  }
+  audio.play()
 }
-
-export const Sound = new SoundClass()