diff --git a/src/Game.js b/src/Game.js
index 1d38be2..92c731d 100644
--- a/src/Game.js
+++ b/src/Game.js
@@ -1,7 +1,12 @@
import { init, initInput, GameLoop, on } from './kontra';
-import { RESTART_LEVEL, START_LEVEL, START_NEXT_LEVEL } from './gameEvents';
+import {
+ RESTART_LEVEL,
+ START_LEVEL,
+ START_NEXT_LEVEL,
+ TOGGLE_MUSIC,
+} from './gameEvents';
import { Level } from './Level';
-import { playSong } from './sound';
+import { playSong, stopSong } from './sound';
import { setGameHeight, setGameWidth } from './store';
import { bgc, bgc2, fgc, fgc2 } from './constants';
@@ -13,9 +18,8 @@ export class Game {
level;
constructor() {
// TODO (johnedvard) Play song after user interraction
- setTimeout(() => {
- playSong();
- }, 1000);
+
+ playSong();
const game = this;
let { canvas, context } = init();
@@ -53,7 +57,15 @@ export class Game {
on(START_NEXT_LEVEL, this.onStartNextLevel);
on(START_LEVEL, this.onStartLevel);
on(RESTART_LEVEL, this.onReStartLevel);
+ on(TOGGLE_MUSIC, this.onToggleMusic);
}
+ onToggleMusic = ({ isMusicOn = false }) => {
+ if (isMusicOn) {
+ playSong();
+ } else {
+ stopSong();
+ }
+ };
onStartNextLevel = () => {
this.level.destroy();
this.loadLevel({ levelId: this.level.levelId + 1 });
diff --git a/src/gameEvents.js b/src/gameEvents.js
index 7d769a4..0114504 100644
--- a/src/gameEvents.js
+++ b/src/gameEvents.js
@@ -11,3 +11,4 @@ export const NEAR_TOKENS_ADDED = 'n';
export const NFT_BUY = 'nb';
export const MONETIZATION_PROGRESS = 'mp';
export const PLAYER_DIED = 'pd';
+export const TOGGLE_MUSIC = 'tm';
diff --git a/src/index.html b/src/index.html
index d08d063..ee7261a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21,6 +21,7 @@
+
diff --git a/src/menu.js b/src/menu.js
index af69925..93fb1ce 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -10,6 +10,7 @@ import {
RESTART_LEVEL,
START_LEVEL,
START_NEXT_LEVEL,
+ TOGGLE_MUSIC,
} from './gameEvents';
import { fetchArcadianHeads } from './arcadianApi';
import {
@@ -21,6 +22,7 @@ import {
import { IPFS_BASE_PATH } from './near/nearConnection';
import { doesOwnNft, getNearLevel } from './utils';
import { initGameHints } from './gameHints';
+import { getIsPlaying } from './sound';
const overlayIds = ['main', 'bonus', 'levels', 'level-dialog', 'near-levels'];
const levels = 5;
@@ -175,6 +177,9 @@ const onContainerClick = (e) => {
showOverlay();
emit(RESTART_LEVEL);
break;
+ case 'musicBtn':
+ emit(TOGGLE_MUSIC, { isMusicOn: !getIsPlaying() });
+ break;
}
if (classList.contains('bone') || classList.contains('inverse')) {
@@ -222,6 +227,12 @@ const listenForGameEvents = () => {
on(LEVEL_COMPLETE, onLevelComplete);
on(NEAR_TOKENS_ADDED, onNearTokensAdded);
on(MONETIZATION_PROGRESS, onMonetizationProgress);
+ on(TOGGLE_MUSIC, onToggleMusic);
+};
+
+const onToggleMusic = () => {
+ const musicBtnEl = document.getElementById('musicBtn');
+ musicBtnEl.textContent = getIsPlaying() ? 'Music is ON' : 'Music is OFF';
};
const onLevelComplete = () => {
showOverlay('level-dialog');
diff --git a/src/sound.js b/src/sound.js
index 8584f82..8e83a39 100644
--- a/src/sound.js
+++ b/src/sound.js
@@ -4,6 +4,9 @@ import { zzfxM } from './zzfxm';
let myAudioNode = null;
let isPlaying = false;
let audioContext = zzfxX;
+export const getIsPlaying = () => {
+ return isPlaying;
+};
export const playBubble = () => {
zzfx(
...[, 1, 7, 0.02, 0.01, 0.02, 4, 0.5, , , 1, 0.01, , , 150, , 0.21, , 0.01]
diff --git a/src/styles.css b/src/styles.css
index 44dcb33..b489872 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -40,6 +40,9 @@ canvas {
align-items: center;
padding: 10px 20px;
}
+#musicBtn {
+ margin-top: 40px;
+}
#hamburger {
height: 9px;