loading screen cancel btn

src/state/index.js

@@ -155,6 +155,7 @@ AFRAME.registerState({
     },
 
     beatloaderpreloadfinish: (state) => {
+      if (state.menuActive) { return; }  // Cancelled.
       state.challenge.isBeatsPreloaded = true;
     },
 
@@ -202,6 +203,7 @@ AFRAME.registerState({
      * ?debugstate=loading
      */
     debugloading: state => {
+      DEBUG_CHALLENGE.id = '-1';
       Object.assign(state.menuSelectedChallenge, DEBUG_CHALLENGE);
       Object.assign(state.challenge, DEBUG_CHALLENGE);
       state.menuActive = false;
@@ -427,6 +429,14 @@ AFRAME.registerState({
       state.isSongFetching = false;
     },
 
+    songloadcancel: state => {
+      state.challenge.isBeatsPreloaded = false;
+      state.challenge.isLoading = false;
+      state.isSongLoading = false;
+      state.isSongFetching = false;
+      state.menuActive = true;
+    },
+
     songloadfinish: (state) => {
       state.isSongFetching = false;
       state.isSongLoading = false;

src/templates/loading.html

@@ -46,5 +46,15 @@
       position="0 -0.38 0.004"
       visible="false">
     </a-entity>
+
+    <a-entity
+      id="loadingCancelButton"
+      mixin="bigMenuButton"
+      bind-toggle__raycastable="isSongLoading || isSongFetching"
+      position="0 -0.67 0.01"
+      proxy-event="event: click; to: a-scene; as: songloadcancel"
+      slice9="width: 0.77">
+      <a-entity mixin="font" text="align: center; color: #FAFAFA; wrapCount: 20; value: CANCEL" position="0 -0.065 0.001"></a-entity>
+    </a-entity>
   </a-entity>
 </a-entity>