feat: Toggle music

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 });

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';

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">

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');

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]

src/styles.css

@@ -40,6 +40,9 @@ canvas {
   align-items: center;
   padding: 10px 20px;
 }
+#musicBtn {
+  margin-top: 40px;
+}
 
 #hamburger {
   height: 9px;