pause logic (not yet resume logic)

src/components/beat-loader.js

@@ -8,7 +8,8 @@ AFRAME.registerComponent('beat-loader', {
     beatAnticipationTime: {default: 2.0},
     beatSpeed: {default: 4.0},
     challengeId: {type: 'string'},
-    difficulty: {type: 'string'}
+    difficulty: {type: 'string'},
+    isPaused: {default: false}
   },
 
   orientations: [180, 0, 270, 90, 225, 135, 315, 45, 0],
@@ -53,6 +54,9 @@ AFRAME.registerComponent('beat-loader', {
     console.log('Finished loading challenge data.');
   },
 
+  /**
+   * Generate beats and stuff according to timestamp.
+   */
   tick: function (time, delta) {
     var audioEl = this.el.components.song.audio;
     var i;
@@ -62,7 +66,7 @@ AFRAME.registerComponent('beat-loader', {
     var msPerBeat;
     var noteTime;
 
-    if (!this.data.challengeId || !this.beatData || !audioEl) { return; }
+    if (this.data.isPaused || !this.data.challengeId || !this.beatData || !audioEl) { return; }
 
     notes = this.beatData._notes;
     obstacles = this.beatData._obstacles;

src/components/beat-pauser.js

@@ -0,0 +1,16 @@
+/**
+ * Pause all beats.
+ */
+AFRAME.registerComponent('beat-pauser', {
+  pause: function () {
+    for (let i = 0; i < this.el.children.length; i++) {
+      this.el.children[i].pause();
+    }
+  },
+
+  play: function () {
+    for (let i = 0; i < this.el.children.length; i++) {
+      this.el.children[i].play();
+    }
+  }
+});

src/components/pause.js

@@ -0,0 +1,13 @@
+AFRAME.registerComponent('pause', {
+  schema: {
+    isPaused: {default: false}
+  },
+
+  update: function () {
+    if (this.data.isPaused && this.el.isPlaying) {
+      this.el.pause();
+    } else if (!this.data.isPaused && !this.el.isPlaying && this.el.sceneEl.isPlaying) {
+      this.el.play();
+    }
+  }
+});

src/components/song.js

@@ -30,7 +30,7 @@ AFRAME.registerComponent('song', {
     }
 
     // Keep playback state up to date.
-    if ((data.isPlaying && data.challengeId) && this.audio.paused) {
+    if (data.isPlaying && data.challengeId && this.audio.paused) {
       console.log(`Playing ${this.audio.src}...`);
       this.data.analyserEl.setAttribute('audioanalyser', 'src', audio);
       audio.play();

src/index.html

@@ -9,15 +9,15 @@
     <audio id="introSong" src="assets/sounds/introSong.ogg" loop></audio>
 
     <a-scene
-      bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty"
-      bind__song="challengeId: challenge.id; isPlaying: !menu.active && !challenge.isLoading"
+      bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty; isPaused: isPaused"
+      bind__song="challengeId: challenge.id; isPlaying: isPlaying && !challenge.isLoading"
       bind__song-preview-system="selectedChallengeId: menuSelectedChallenge.id"
-      bind__overlay="enabled: menu.active"
+      bind__overlay="enabled: !isPlaying"
       console-shortcuts
       debug-controller
       effect-bloom="strength: 1"
       intro-song
-      overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh']"
+      overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #pauseDialog"
       pool__beat-arrow-blue="mixin: beat arrow-blue-beat; size: 5; container: #beatContainer"
       pool__beat-arrow-red="mixin: beat arrow-red-beat; size: 10; container: #beatContainer"
       pool__beat-dot-blue="mixin: beat dot-blue-beat; size: 10; container: #beatContainer"
@@ -79,7 +79,7 @@
       <a-entity id="beatObjTemplate" obj-model="obj: #beatObj" visible="false"></a-entity>
       <a-entity id="dotObjTemplate" obj-model="obj: #dotObj" visible="false"></a-entity>
 
-      <a-entity id="beatContainer"></a-entity>
+      <a-entity id="beatContainer" bind__pause="isPaused: isPaused" beat-pauser></a-entity>
 
       <a-entity id="cursorLaser" obj-model="obj: #laserObj" visible="false"></a-entity>
 
@@ -114,10 +114,10 @@
             mixin="raycaster"
             bind__hand-swapper="enabled: {{ otherHand }}RaycasterActive"
             bind__menu-controls="page: search.page; selectedChallengeId: menuSelectedChallenge.id"
-            bind__pauser="enabled: !menu.active"
+            bind__pauser="enabled: isPlaying"
             bind__raycaster="enabled: {{ hand }}RaycasterActive"
-            bind__saber-controls="bladeEnabled: !menu.active"
-            bind__trail="enabled: !menu.active"
+            bind__saber-controls="bladeEnabled: isPlaying"
+            bind__trail="enabled: isPlaying"
             haptics="events: mouseenter; dur: 35; force: 0.075"
             saber-controls="hand: {{ hand }}"
             thumb-controls
@@ -133,7 +133,7 @@
             <a-entity class="saberContainer" rotation="90 0 0">
               <a-entity
                 class="bladeContainer"
-                bind__visible="!menu.active"
+                bind__visible="isPlaying"
                 animation="property: scale; from: 0 0 0; to: 1 1 1; dur: 750; easing: linear; startEvents: drawblade"
                 scale="0.001 0.001 0.001">
                 <a-entity
@@ -160,7 +160,7 @@
               </a-entity>
             </a-entity>
 
-            <a-entity class="fakeGlow" rotation="90 0 0" position="0 0.01 0" bind__visible="menu.active">
+            <a-entity class="fakeGlow" rotation="90 0 0" position="0 0.01 0" bind__visible="!isPlaying">
               <a-entity geometry="primitive: cylinder; height: 0.1831; radius: 0.0055" material="color: {{ beamColor }}; shader: flat; opacity: 0.11"></a-entity>
               <a-entity geometry="primitive: cylinder; height: 0.1832; radius: 0.0065" material="color: {{ beamColor }}; shader: flat; opacity: 0.09"></a-entity>
               <a-entity geometry="primitive: cylinder; height: 0.1833; radius: 0.0075" material="color: {{ beamColor }}; shader: flat; opacity: 0.06"></a-entity>

src/state/index.js

@@ -27,8 +27,8 @@ AFRAME.registerState({
       songSubName: ''
     },
     inVR: false,
-    isPaused: false,
-    showKeyboard: false,
+    isPaused: false,  // Playing, but paused. Not active during menu.
+    isPlaying: false,  // Not in the menu AND not paused.
     menu: {
       active: true,
       playButtonText: 'Play'
@@ -56,7 +56,8 @@ AFRAME.registerState({
       hasPrev: false,
       results: [],
     },
-    searchResultsPage: []
+    searchResultsPage: [],
+    showKeyboard: false
   },
 
   handlers: {
@@ -184,6 +185,7 @@ AFRAME.registerState({
    * Post-process the state after each action.
    */
   computeState: (state) => {
+    state.isPlaying = !state.menu.active && !state.isPaused;
     state.leftRaycasterActive = state.menu.active && state.activeHand === 'left' &&
                                 state.inVR;
     state.rightRaycasterActive = state.menu.active && state.activeHand === 'right' &&

src/templates/gameUi.html

@@ -1,29 +1,29 @@
-<a-entity 
+<a-entity
   id="gameInfo"
   bind__visible="!menu.active && !!challenge.id && !challenge.isLoading">
   <a-entity position="0.80 0.01 -1.3">
-    <a-entity 
+    <a-entity
       id="score"
       bind__text="value: score.score"
       mixin="textFont"
       text="width: 2; color: #feffc1; letterSpacing: -2;"
-      rotation="-90 0 0">      
+      rotation="-90 0 0">
     </a-entity>
   </a-entity>
-  <a-entity 
+  <a-entity
     id="combo"
     bind__text="value: score.combo"
     mixin="textFont"
     text="width: 1; color: #feffc1; letterSpacing: -2; align: center"
     position="-1.8 1.2 -4"
-    scale="5 5 5">      
+    scale="5 5 5">
   </a-entity>
-  <a-entity 
+  <a-entity
     id="multiplier"
     bind__text="value: score.multiplier"
     mixin="textFont"
     text="width: 1; color: #feffc1; letterSpacing: -2; align: center"
     position="1.8 1.2 -4"
-    scale="5 5 5">      
+    scale="5 5 5">
   </a-entity>
 </a-entity>