export class MyApp {
  @ViewChild("myNav") nav: NavController;

  rootPage: any = LearnPage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    this.pages = [
      { title: 'Learn', component: LearnPage },
      { title: 'Work', component: WorkPage},
      { title: 'Play', component: PlayPage}
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }
}

<ion-menu [content]="content">
<ion-header>
  <ion-toolbar>
    <ion-title>Menu</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
      {{p.title}}
    </button>
  </ion-list>
</ion-content>

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Learn</ion-title>
  </ion-navbar>
</ion-header>


<ion-content>
  <div class="padding-default">
    <grid class="canvas-disable"></grid>
  </div>
  <ion-item no-lines class="padding-default">
    <ion-select class="default-select" [(ngModel)]="number" (ionChange)="onChange()">
      <ion-option *ngFor="let number of numbers" [value]="number">{{number}} {{shape}}</ion-option>
    </ion-select>
  </ion-item>
</ion-content>

export class LearnPage {
  @ViewChild(Select) select: Select;

  shape: string = shapeNames.SQUARE;
  number: number = 1;
  numbers: number[] = Array.from(Array(100),(x,i)=>i+1);

  constructor(public events: Events, public eventNames: EventNames) {

  }

  ngAfterViewInit() {
    this.events.publish(this.eventNames.GRID_COUNT, this.number, this.shape);
  }

  onChange() {
    this.events.publish(this.eventNames.GRID_COUNT, this.number, this.shape);
  }
}

<div #rendererContainer></div>

export class GridComponent {
  @ViewChild('rendererContainer') rendererContainer: ElementRef;

  canvasWidth: any;
  grid: Shape[][];
  color: number = 0xff0000;

  renderer = new THREE.WebGLRenderer();
  scene = null;
  camera = null;
  mesh = null;

  constructor(public events: Events, public eventNames: EventNames) {
    this.canvasWidth = window.innerWidth * 86 / 100;
    this.grid = new Array<Array<Shape>>();
    for (let y = 0; y < 10; y++) {
      let row: Shape[] = new Array<Shape>();
      for (let x = 0; x < 10; x++) {
        row.push(new Shape(y * 10 + x));
      }
      this.grid.push(row);
    }

    this.scene = new THREE.Scene();
    this.camera = new THREE.OrthographicCamera(0, this.canvasWidth, 0, this.canvasWidth, 1, 1000);
    this.drawGrid();
    this.events.subscribe(this.eventNames.GRID_COUNT, (x, s) => { this.count(x, s); });
    console.log("Suscribe");
  }

  ngAfterViewInit() {
    this.renderer.setSize(this.canvasWidth, this.canvasWidth);
   this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
    this.renderer.render(this.scene, this.camera);
  }

  ngOnDestroy() {
    console.log("Grid ngOnDestroy");
    this.events.unsubscribe(this.eventNames.GRID_COUNT);
  }

  drawGrid() {
    let size = this.canvasWidth + 1;
    let divisions = 10;
    let gridHelper = new THREE.GridHelper(size, divisions, 0x000000, 0x000000);
    gridHelper.rotation.x = Math.PI / 2;
    gridHelper.position.z = -900;
    gridHelper.position.x = this.canvasWidth / 2;
    gridHelper.position.y = this.canvasWidth / 2;
    this.scene.add(gridHelper);

    let material = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
    let plane = new THREE.Mesh(new THREE.PlaneGeometry(this.canvasWidth, this.canvasWidth), material);
    plane.position.z = -1000;
    plane.position.x = this.canvasWidth / 2;
    plane.position.y = this.canvasWidth / 2;
    this.scene.add(plane);
  }

  drawMesh(shape: Shape, x, y) {
    let geometry = new THREE.BoxGeometry(this.canvasWidth / 11, this.canvasWidth / 11, this.canvasWidth / 11);
    let material = new THREE.MeshBasicMaterial({ color: this.color });
    this.mesh = new THREE.Mesh(geometry, material);
    this.mesh.position.z = -100;
    this.mesh.position.x = x * this.canvasWidth / 10 + this.canvasWidth / 20;
    this.mesh.position.y = y * this.canvasWidth / 10 + this.canvasWidth / 20;
    this.mesh.name = shape.id
    shape.mesh = this.mesh;
    this.scene.add(this.mesh);
    this.renderer.render(this.scene, this.camera);
    shape.filled = !shape.filled;
  }

  count(x: number, s: string) {
    console.log("Count event received");
    while (this.scene.children.length > 0) {
      this.scene.remove(this.scene.children[0]);
    }
    this.drawGrid();
    for (let i = 0; i < x; i++) {
      this.drawMesh(this.grid[i % 10][Math.floor(i / 10)], i % 10, Math.floor(i / 10));
    }
  }
}