Merge branch 'feature/sound-music-toggle'

petarov · bb22b0f55a4c60c518461e4857185bbd5305804d · petarov committed Jan 2, 2018 · Jan 2, 2018 · bb22b0f
2 parents 66ea024 + 2fedcde
commit bb22b0f55a4c60c518461e4857185bbd5305804d
Unified Split

Showing with 186 additions and 9 deletions.

+41 −7 src/audio.js

+2 −0 src/globals.js

+2 −0 src/index.js

+1 −0 src/states/index.js

+1 −1 src/states/loading.js

+8 −1 src/states/main-menu.js

+131 −0 src/states/options-audio.js
diff --git a/src/audio.js b/src/audio.js
@@ -2,6 +2,8 @@
 
 import Globals from './globals';
 
+const DEFAULT_FADEOUT = 2500;
+
 class Audio {
 
   static loadSfx(game) {
@@ -67,6 +69,9 @@ class Audio {
   constructor(game) {
     this.game = game;
 
+    this._soundsOn = Globals.noSounds == false;
+    this._musicOn = Globals.noMusic == false;
+
     this._current = null;
 
     // add all possible musics
@@ -169,8 +174,21 @@ class Audio {
     };
   }
 
+  _canPlay(audio) {
+    if (!audio) 
+      return true;
+
+    if (audio && audio.name in this.musics) {
+      return this._musicOn;
+    }
+
+    return this._soundsOn;
+  }
+
   play(audio, key = 0) {
-    if (Globals.noSfx) return;
+    if (!this._canPlay(audio)) {
+      return;
+    }
 
     if(Array.isArray(audio)) {
       if (key === true) {
@@ -188,7 +206,9 @@ class Audio {
   }
 
   stop(audio = null, key = 0) {
-    if (Globals.noSfx) return;
+    if (!this._canPlay(audio)) {
+      return;
+    }
 
     if(audio) {
       if(Array.isArray(audio))
@@ -203,20 +223,34 @@ class Audio {
   }
 
   fadeOut(audio, key = 0) {
-    if (Globals.noSfx) return;
-
-    const FADEOUT = 2500;
+    if (!this._canPlay(audio)) {
+      return;
+    }
 
     if(audio) {
       if(Array.isArray(audio))
         audio[key].stop();
       else
-        audio.fadeOut(FADEOUT);
+        audio.fadeOut(DEFAULT_FADEOUT);
     }
     else if(this._current) {
-      this._current.fadeOut(FADEOUT);
+      this._current.fadeOut(DEFAULT_FADEOUT);
     }
+  }
 
+  set soundsOn(value) {
+    this._soundsOn = value;
+    localStorage.setItem(`noSounds`, !value);
+  }
+  get soundsOn() {
+    return this._soundsOn;
+  }
+  set musicOn(value) {
+    this._musicOn = value;
+    localStorage.setItem(`noMusic`, !value);
+  }
+  get musicOn() {
+    return this._musicOn;
   }
 }
 
diff --git a/src/globals.js b/src/globals.js
@@ -13,6 +13,8 @@ const Globals = {
   debug: checkStringBoolean(localStorage.getItem(`debug`)),
   debugPhysics: checkStringBoolean(localStorage.getItem(`debugPhysics`)),
   showFPS: checkStringBoolean(localStorage.getItem(`showFPS`)),
+  noSounds: checkStringBoolean(localStorage.getItem(`noSounds`)),
+  noMusic: checkStringBoolean(localStorage.getItem(`noMusic`)),
   // maybe add dev-* key to items' names so we can cycle through options
   // list and assign values automatically
   ...URLOptions, // url options override localSotrage values
diff --git a/src/index.js b/src/index.js
@@ -6,6 +6,7 @@ import {
   Bootstrap,
   Preloader,
   MainMenu,
+  OptionsAudio,
   Options,
   Credits,
   Loading,
@@ -25,6 +26,7 @@ window.onload = function () {
   game.state.add('preload', Preloader);
   game.state.add('mainmenu', MainMenu);
   game.state.add('options', Options);
+  game.state.add('options-audio', OptionsAudio);
   game.state.add('credits', Credits);
   game.state.add('loading', Loading);
   game.state.add('intro', Intro);
diff --git a/src/states/index.js b/src/states/index.js
@@ -3,6 +3,7 @@ export * from './bootstrap';
 export * from './preloader';
 export * from './main-menu';
 export * from './options';
+export * from './options-audio';
 export * from './credits';
 export * from './loading';
 export * from './intro';
diff --git a/src/states/loading.js b/src/states/loading.js
@@ -48,7 +48,7 @@ class Loading extends Renderer {
 
     // load audios
     let nextStateText = '';
-    if(this.nextState == 'intro') {
+    if (this.nextState == 'intro' || this.nextState == 'options-audio') {
       Audio.loadMusic(this.game, 'maintheme');
       nextStateText = 'INTRO';
     }
diff --git a/src/states/main-menu.js b/src/states/main-menu.js
@@ -11,6 +11,7 @@ const MainMenuConsts = {
   options: [
     'PLAY',
     'CONTROLS',
+    'AUDIO',
     'CREDITS',
   ],
 };
@@ -105,8 +106,14 @@ class MainMenu extends Renderer {
       this.state.start('options');
     }
 
+    // start audio controls state
+    if (this.selectedOption == 2) {
+      this.audio.play(this.audio.sfx.hero.punch, 2);
+      this.state.start('options-audio');
+    }
+
     // start credits state
-    if(this.selectedOption == 2) {
+    if(this.selectedOption == 3) {
       this.audio.play(this.audio.sfx.hero.punch, 2);
       this.state.start('credits');
     }
diff --git a/src/states/options-audio.js b/src/states/options-audio.js
@@ -0,0 +1,131 @@
+// options-audio.js
+// Game audio options screen.
+
+import Audio from '../audio';
+import Globals from '../globals';
+import Controls from '../controls';
+
+import Renderer from './renderer';
+
+const AudioMenuConsts = {
+  options: [
+    'SOUND ON',
+    'MUSIC ON',
+    '< BACK'
+  ],
+};
+
+class OptionsAudio extends Renderer {
+
+  preload() {
+    Audio.loadMusic(this.game, 'boss');
+  }
+
+  create() {
+    super.create();
+
+    const screenCenter = this.game.world.centerX;
+
+    const menuTitle = this.game.add.bitmapText(screenCenter, 30,
+      Globals.bitmapFont, 'KickPunch', 30);
+    menuTitle.anchor.setTo(0.5);
+
+    // create a text for each option
+    this.selectedOption = 0;
+    this.optionTexts = [];
+    let ypos = this.game.world.height / AudioMenuConsts.options.length + 24;
+    for (const [i, option] of AudioMenuConsts.options.entries()) {
+      const text = this.game.add.bitmapText(screenCenter, ypos + 24 * i, Globals.bitmapFont, option, 12);
+      text.anchor.setTo(0.5);
+      this.optionTexts.push(text);
+    }
+    
+    // stop all sfx in menu
+    this.audio = new Audio(this.game);
+    this.audio.stop();
+
+    this.controls = new Controls(this.game, true);
+
+    // default options
+    this.updateOptions();
+  }
+
+  update() {
+    super.update();
+
+    for (const [i, option] of this.optionTexts.entries()) {
+      if (i == this.selectedOption)
+        option.tint = 0x000000;
+      else
+        option.tint = 0xffffff;
+    }
+
+    this.handleInput();
+  }
+
+  handleInput() {
+    if (this.controls.up) {
+      this.selectedOption--;
+      this.audio.play(this.audio.sfx.hero.punch, 2);
+    }
+    else if (this.controls.down) {
+      this.selectedOption++;
+      this.audio.play(this.audio.sfx.hero.punch, 1);
+    }
+    else if (this.controls.punch || this.controls.jump || this.controls.kick)
+      this.chooseOption();
+
+    if (this.selectedOption < 0)
+      this.selectedOption = 0;
+    if (this.selectedOption >= AudioMenuConsts.options.length)
+      this.selectedOption = AudioMenuConsts.options.length - 1;
+  }
+
+  chooseOption() {
+    if (this.selectedOption === 0) {
+      if (!this.audio.soundsOn) {
+        this.audio.soundsOn = true;
+        // test snd
+        this.audio.play(this.audio.sfx.hero.punch, 2);
+      } else {
+        this.audio.soundsOn = false;
+      }
+    }
+
+    if (this.selectedOption === 1) {
+      if (!this.audio.musicOn) {
+        this.audio.musicOn = true;
+        // test play
+        this.audio.musics.boss.volume = 1;
+        this.audio.play(this.audio.musics.boss);
+        this.audio.fadeOut(this.audio.musics.boss);
+      } else {
+        this.audio.musicOn = false;
+      }
+    }
+
+    if (this.selectedOption === 2) {
+      this.audio.play(this.audio.sfx.hero.punch, 2);
+      this.state.start('mainmenu');
+    }
+
+    this.updateOptions();
+  }
+
+  updateOptions() {
+    if (this.audio.soundsOn) {
+      this.optionTexts[0].setText('SOUND ON');
+    } else {
+      this.optionTexts[0].setText('SOUND OFF');
+    }
+
+    if (this.audio.musicOn) {
+      this.optionTexts[1].setText('MUSIC ON');
+    } else {
+      this.optionTexts[1].setText('MUSIC OFF');
+    }
+  }
+
+}
+
+export { OptionsAudio };