From acf9687c7a804e4b2c92e943b3ab2ab76cb278f2 Mon Sep 17 00:00:00 2001
From: John Edvard Reiten <johnedvard89@gmail.com>
Date: Sat, 10 Sep 2022 22:47:34 +0900
Subject: [PATCH] feat: Toggle music

---
 src/Game.js       | 22 +++++++++++++++++-----
 src/gameEvents.js |  1 +
 src/index.html    |  1 +
 src/menu.js       | 11 +++++++++++
 src/sound.js      |  3 +++
 src/styles.css    |  3 +++
 6 files changed, 36 insertions(+), 5 deletions(-)

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 @@
         <button id="levelBtn">Select Level</button>
         <button id="bonusBtn">Bonus Content</button>
         <button id="goodiesBtn" disabled>Coil Goodies</button>
+        <button id="musicBtn">Music is ON</button>
       </div>
       <div id="bonus" class="overlay hide">
         <div id="coil-subscriber" class="hide">
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;