Add mines

src/components/beat-loader.js

@@ -22,6 +22,7 @@ AFRAME.registerComponent('beat-loader', {
     this.beatContainer = document.getElementById('beatContainer');
     this.bpm = undefined;
     this.beatsTime = undefined;
+    this.onKeyDown = this.onKeyDown.bind(this);
 
     this.el.addEventListener('cleargame', this.clearBeats.bind(this));
   },
@@ -54,6 +55,30 @@ AFRAME.registerComponent('beat-loader', {
     xhr.send();
   },
 
+  onKeyDown: function (event) {
+    var keyCode = event.keyCode;
+    switch (keyCode) {
+      case 32: // Space
+        this.generateBeat({
+          _lineIndex: 2,
+          _lineLayer: 1,
+          _cutDirection: 1,
+          _type: 3
+        });
+        break;
+      default:
+        break;
+    }
+  },
+
+  play: function () {
+    window.addEventListener('keydown', this.onKeyDown);
+  },
+
+  pause: function () {
+    window.removeEventListener('keydown', this.onKeyDown);
+  },
+
   /**
    * Load the beat data into the game.
    */

src/components/beat.js

@@ -101,12 +101,12 @@ AFRAME.registerComponent('beat', {
     blockEl.object3D.scale.multiplyScalar(3.45).multiplyScalar(this.data.size);
 
     if (this.data.type === 'mine') {
-      let model = evt.detail.model.children[0];
-      model.material = this.el.sceneEl.components.stagecolors.mineMaterial;
+      let model = blockEl.getObject3D('mesh');
+      model.material = this.el.sceneEl.components['stage-colors'].mineMaterial;
+    } else {
+      signEl.setAttribute('material', SIGN_MATERIAL);
+      this.setObjModelFromTemplate(signEl, this.signModels[this.data.type]);
     }
-
-    signEl.setAttribute('material', SIGN_MATERIAL);
-    this.setObjModelFromTemplate(signEl, this.signModels[this.data.type]);
   },
 
   initColliders: function () {

src/index.html

@@ -28,6 +28,7 @@
       pool__beat-arrow-red="mixin: arrowRedBeat; size: 10; container: #beatContainer"
       pool__beat-dot-blue="mixin: dotBlueBeat; size: 10; container: #beatContainer"
       pool__beat-dot-red="mixin: dotRedBeat; size: 10; container: #beatContainer"
+      pool__beat-mine="mixin: mine; size: 10; container: #beatContainer"
       proxy-event__menuleft="event: menuchallengeunselect; to: .menuAnimation"
       proxy-event__menuright="event: menuchallengeselect; to: .menuAnimation"
       proxy-event__cleargame1="event: pausemenuexit; as: cleargame; to: a-scene"
@@ -45,6 +46,7 @@
         <a-asset-item id="logofrontUObj" src="assets/models/logofront-u.obj"></a-asset-item>
         <a-asset-item id="laserObj" src="assets/models/laser/laser.obj"></a-asset-item>
         <a-asset-item id="logoSparks" src="assets/models/logosparks.json"></a-asset-item>
+        <a-asset-item id="mineObj" src="assets/models/mine.obj"></a-asset-item>
         <a-asset-item id="sabercutParticles" src="assets/models/sabercut.json"></a-asset-item>
 
         <audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>
@@ -80,6 +82,7 @@
         <a-mixin id="dotBlueBeat" mixin="beat" beat="color: blue; type: dot"></a-mixin>
         <a-mixin id="dotRedBeat" mixin="beat" beat="color: red; type: dot"></a-mixin>
         <a-mixin id="gameoverAnimation" animation__gameover="dur: 1000; easing: easeOutQuad"></a-mixin>
+        <a-mixin id="mine" mixin="beat" beat="type: mine"></a-mixin>
 
         <a-mixin id="badBeat"
           geometry="primitive: plane"
@@ -92,6 +95,7 @@
       <a-entity id="arrowObjTemplate" obj-model="obj: #arrowObj" visible="false"></a-entity>
       <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="mineObjTemplate" obj-model="obj: #mineObj" visible="false"></a-entity>
 
       <a-entity id="cursorLaser" obj-model="obj: #laserObj" visible="false"></a-entity>