add music training component

includes phaser

angular-cli-build.js

@@ -11,6 +11,7 @@ module.exports = function(defaults) {
       'ng2-charts/bundles/ng2-charts.js',
       'chroma-js/chroma.js',
       'plotly.js/dist/plotly.js',
+      'phaser/dist/phaser.js',
       'systemjs/dist/system-polyfills.js',
       'systemjs/dist/system.src.js',
       'zone.js/dist/*.js',

package.json

@@ -31,6 +31,7 @@
     "ng2-charts": "^1.0.3",
     "nodemon": "^1.9.1",
     "openbci-sdk": "^0.3.4",
+    "phaser": "^2.4.7",
     "plotly.js": "^1.10.2",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",

src/app/dashboard.component.html

@@ -6,6 +6,7 @@
     <a [routerLink]="['/frequency/radar', { type: 'Radar' }]">Frequency Radar</a>
     <a [routerLink]="['/frequency/bands']">Frequency Bands</a>
     <a [routerLink]="['/topo']">Topo</a>
+    <a [routerLink]="['/music-training']">Music Training</a>
   </nav>
   <router-outlet></router-outlet>
 </main>

src/app/dashboard.component.ts

@@ -3,6 +3,7 @@ import { TimeSeriesComponent } from './time-series';
 import { FrequencyComponent } from './frequency';
 import { FrequencyBandsComponent } from './frequency-bands';
 import { TopoComponent } from './topo';
+import { MusicTrainingComponent } from './music-training';
 import { Routes, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES } from '@angular/router';
 
 @Component({
@@ -15,12 +16,13 @@ import { Routes, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES } from '@angular/ro
 })
 
 @Routes([
-  { path: '/', component: TopoComponent },
+  { path: '/', component: MusicTrainingComponent },
   { path: '/time-series', component: TimeSeriesComponent },
   { path: '/frequency/line', component: FrequencyComponent },
   { path: '/frequency/radar', component: FrequencyComponent },
   { path: '/frequency/bands', component: FrequencyBandsComponent },
-  { path: '/topo', component: TopoComponent }
+  { path: '/topo', component: TopoComponent },
+  { path: '/music-training', component: MusicTrainingComponent }
 ])
 
 export class DashboardComponent implements OnInit {

src/app/music-training/index.ts

@@ -0,0 +1 @@
+export { MusicTrainingComponent } from './music-training.component';

src/app/music-training/music-training.component.css

@@ -0,0 +1,20 @@
+
+:host {
+  display: block;
+  margin: 20px;
+  padding: 20px;
+  box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  background-color: #333333;
+  position: relative;
+  height: 100%;
+  width: 70%;
+}
+
+h2 {
+  position: absolute;
+  margin: 0;
+  top: 10px;
+  right: 20px;
+  font-weight: 300;
+  z-index: 1;
+}

src/app/music-training/music-training.component.html

@@ -0,0 +1,4 @@
+<section class="music" [ngClass]="{ 'loading': !data }">
+    <h2>Music Training</h2>
+    <div id="phaser"></div>
+</section>

src/app/music-training/music-training.component.spec.ts

@@ -0,0 +1,46 @@
+import {
+  beforeEach,
+  beforeEachProviders,
+  describe,
+  expect,
+  it,
+  inject,
+} from '@angular/core/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { MusicTrainingComponent } from './music-training.component';
+
+describe('Component: MusicTraining', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEachProviders(() => [MusicTrainingComponent]);
+  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
+    builder = tcb;
+  }));
+
+  it('should inject the component', inject([MusicTrainingComponent],
+      (component: MusicTrainingComponent) => {
+    expect(component).toBeTruthy();
+  }));
+
+  it('should create the component', inject([], () => {
+    return builder.createAsync(MusicTrainingComponentTestController)
+      .then((fixture: ComponentFixture<any>) => {
+        let query = fixture.debugElement.query(By.directive(MusicTrainingComponent));
+        expect(query).toBeTruthy();
+        expect(query.componentInstance).toBeTruthy();
+      });
+  }));
+});
+
+@Component({
+  selector: 'test',
+  template: `
+    <bci-music-training></bci-music-training>
+  `,
+  directives: [MusicTrainingComponent]
+})
+class MusicTrainingComponentTestController {
+}
+

src/app/music-training/music-training.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit, ElementRef } from '@angular/core';
+import * as io from 'socket.io-client';
+import { Constants } from '../shared/constants';
+
+declare var Phaser: any;
+
+@Component({
+  moduleId: module.id,
+  selector: 'bci-music-training',
+  templateUrl: 'music-training.component.html',
+  styleUrls: ['music-training.component.css'],
+  providers: [Constants]
+})
+export class MusicTrainingComponent implements OnInit {
+
+  game: any;
+  phaserElement: any;
+  socket: any;
+  constructor(private view: ElementRef, private constants: Constants) {
+    this.socket = io(constants.socket.url);
+  }
+
+  ngOnInit() {
+    this.phaserElement = this.view.nativeElement.querySelector('#phaser');
+    
+    this.game = new Phaser.Game(480, 480, Phaser.WEBGL, this.phaserElement.id, {
+        preload: this.preload, create: this.create, update: this.update
+    });
+    
+    this.socket.on(this.constants.socket.events.time, (data) => {
+      console.log('data from music component', data);
+    });
+  }
+  
+  preload () {
+    this.game.scale.scaleMode = Phaser.ScaleManager.NO_SCALE;
+    this.game.stage.backgroundColor = '#FF0000';
+  }
+  
+  create () {
+    this.game.physics.startSystem(Phaser.Physics.ARCADE);
+  }
+  
+  update () {
+    
+  }
+
+}

src/index.html

@@ -36,6 +36,7 @@
   <script src="vendor/chart.js/Chart.js"></script>
   <script src="vendor/chroma-js/chroma.js"></script>
   <script src="vendor/plotly.js/dist/plotly.js"></script>
+  <script src="vendor/phaser/dist/phaser.js"></script>
   <script src="vendor/es6-shim/es6-shim.js"></script>
   <script src="vendor/reflect-metadata/Reflect.js"></script>
   <script src="vendor/systemjs/dist/system.src.js"></script>

src/system-config.ts

@@ -7,7 +7,8 @@ const map: any = {
   'ng2-charts': 'vendor/ng2-charts/bundles/ng2-charts.js',
   'socket.io-client': 'vendor/socket.io-client/socket.io.js',
   'chroma-js': 'vendor/chroma-js/chroma.js',
-  'plotly': 'vendor/plotly.js/dist/plotly.js'
+  'plotly': 'vendor/plotly.js/dist/plotly.js',
+  'phaser': 'vendor/phaser/dist/phaser.js'
 };  
 
 /** User packages configuration. */
@@ -41,6 +42,7 @@ const barrels: string[] = [
   'app/frequency-bands',
   'app/frequency-band',
   'app/topo',
+  'app/music-training',
   /** @cli-barrel */
 ];