From 733741012b300cdc35e0cbfa88e57f8c6705b9ee Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Thu, 4 Oct 2018 00:20:45 -0700
Subject: [PATCH] hook up pause menu actions (resume, restart, exit), but still
 need to force beats to reposition off audio.currentTime

---
 src/components/beat-pauser.js    | 16 ----------------
 src/components/saber-controls.js |  6 +++++-
 src/components/song.js           | 15 +++++++++++----
 src/index.html                   |  8 ++++----
 src/state/index.js               | 19 +++++++++++++++----
 src/templates/dialogs.html       | 19 +++++++++++++++----
 6 files changed, 50 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/beat-pauser.js

diff --git a/src/components/beat-pauser.js b/src/components/beat-pauser.js
deleted file mode 100644
index 8bbd47e..0000000
--- a/src/components/beat-pauser.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * 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();
-    }
-  }
-});
diff --git a/src/components/saber-controls.js b/src/components/saber-controls.js
index 08c6517..b4ceae7 100644
--- a/src/components/saber-controls.js
+++ b/src/components/saber-controls.js
@@ -1,7 +1,8 @@
 AFRAME.registerComponent('saber-controls', {
   schema: {
     bladeEnabled: {default: false},
-    hand: {default: 'right', oneOf: ['left', 'right']}
+    hand: {default: 'right', oneOf: ['left', 'right']},
+    isPaused: {default: false}
   },
 
   init: function () {
@@ -24,6 +25,9 @@ AFRAME.registerComponent('saber-controls', {
   update: function (oldData) {
     if (!oldData.bladeEnabled  && this.data.bladeEnabled) {
       this.bladeEl.emit('drawblade');
+      if (!oldData.isPaused) {
+        this.bladeEl.emit('drawbladesound');
+      }
     }
   },
 
diff --git a/src/components/song.js b/src/components/song.js
index e2cfd55..e09c892 100644
--- a/src/components/song.js
+++ b/src/components/song.js
@@ -12,10 +12,17 @@ AFRAME.registerComponent('song', {
 
   init: function () {
     // Use audio element for audioanalyser.
-    this.audio = document.createElement('audio');
-    this.audio.setAttribute('id', 'song');
-    this.audio.crossOrigin = 'anonymous';
-    this.el.sceneEl.appendChild(this.audio);
+    const audio = this.audio = document.createElement('audio');
+    audio.setAttribute('id', 'song');
+    audio.crossOrigin = 'anonymous';
+    this.el.sceneEl.appendChild(audio);
+
+    this.el.addEventListener('pausemenurestart', () => {
+      if (audio.paused) {
+        audio.currentTime = 0;
+        audio.play();
+      }
+    });
   },
 
   update: function (oldData) {
diff --git a/src/index.html b/src/index.html
index 3ba9a0f..be0debb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,7 +9,7 @@
     <audio id="introSong" src="assets/sounds/introSong.ogg" loop></audio>
 
     <a-scene
-      bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty; isPaused: isPaused"
+      bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty; isPaused: !isPlaying"
       bind__song="challengeId: challenge.id; isPlaying: isPlaying && !challenge.isLoading"
       bind__song-preview-system="selectedChallengeId: menuSelectedChallenge.id"
       bind__overlay="enabled: !isPlaying"
@@ -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" bind__pause="isPaused: isPaused" beat-pauser></a-entity>
+      <a-entity id="beatContainer" bind__pause="isPaused: !isPlaying"></a-entity>
 
       <a-entity id="cursorLaser" obj-model="obj: #laserObj" visible="false"></a-entity>
 
@@ -116,7 +116,7 @@
             bind__menu-controls="page: search.page; selectedChallengeId: menuSelectedChallenge.id"
             bind__pauser="enabled: isPlaying"
             bind__raycaster="enabled: {{ hand }}RaycasterActive"
-            bind__saber-controls="bladeEnabled: isPlaying"
+            bind__saber-controls="bladeEnabled: isPlaying; isPaused: isPaused"
             bind__trail="enabled: isPlaying"
             haptics="events: mouseenter; dur: 35; force: 0.075"
             saber-controls="hand: {{ hand }}"
@@ -140,7 +140,7 @@
                   class="blade"
                   geometry="primitive: box; height: 0.9; depth: 0.02; width: 0.02"
                   material="shader: flat; color: {{ bladeColor }}"
-                  play-sound="event: drawblade; sound: #saberDraw"
+                  play-sound="event: drawbladesound; sound: #saberDraw"
                   position="0 -0.55 0"></a-entity>
               </a-entity>
               <a-entity
diff --git a/src/state/index.js b/src/state/index.js
index f51f846..2e7e12e 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -123,6 +123,19 @@ AFRAME.registerState({
       state.isPaused = true;
     },
 
+    pausemenuresume: (state) => {
+      state.isPaused = false;
+    },
+
+    pausemenurestart: (state) => {
+      state.isPaused = false;
+    },
+
+    pausemenuexit: (state) => {
+      state.isPaused = false;
+      state.menu.active = true;
+    },
+
     /**
      * Start challenge.
      * Transfer staged challenge to the active challenge.
@@ -186,10 +199,8 @@ AFRAME.registerState({
    */
   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' &&
-                                 state.inVR;
+    state.leftRaycasterActive = !state.isPlaying && state.activeHand === 'left' && state.inVR;
+    state.rightRaycasterActive = !state.isPlaying && state.activeHand === 'right' && state.inVR;
   }
 });
 
diff --git a/src/templates/dialogs.html b/src/templates/dialogs.html
index cc36e4d..6226739 100644
--- a/src/templates/dialogs.html
+++ b/src/templates/dialogs.html
@@ -13,15 +13,26 @@
   text="align: center; wrapCount: 17; color: #AAA"></a-mixin>
 
 <a-entity id="pauseDialog" position="0 1.6 -2" bind__visible="isPaused">
-  <a-entity id="continueButton" mixin="dialogButton" position="0 0.35 0">
-    <a-entity mixin="dialogButtonText" text="value: CONTINUE" position="0 -0.070 0.01"></a-entity>
+  <a-entity
+    id="resumeButton"
+    mixin="dialogButton"
+    position="0 0.35 0"
+    proxy-event="event: click; to: a-scene; as: pausemenuresume">
+    <a-entity mixin="dialogButtonText" text="value: RESUME" position="0 -0.070 0.01"></a-entity>
   </a-entity>
 
-  <a-entity id="restartButton" mixin="dialogButton">
+  <a-entity
+    id="restartButton"
+    mixin="dialogButton"
+    proxy-event="event: click; to: a-scene; as: pausemenurestart">
     <a-entity mixin="dialogButtonText" text="value: RESTART SONG"></a-entity>
   </a-entity>
 
-  <a-entity id="exitButton" mixin="dialogButton" position="0 -0.35 0">
+  <a-entity
+    id="exitButton"
+    mixin="dialogButton"
+    position="0 -0.35 0"
+    proxy-event="event: click; to: a-scene; as: pausemenuexit">
     <a-entity mixin="dialogButtonText" text="value: EXIT TO MENU" position="0 -0.070 0.01"></a-entity>
   </a-entity>
 </a-entity>