import { Subscription , Observable } from 'rxjs' ; import { Animal , ZooConfiguration } from './../../zoo/models' ; import { Component , OnInit , OnDestroy , Renderer2 } from '@angular/core' ; import { FormControl , FormGroup , Validators } from '@angular/forms' ; import { zooConfiguration } from './../../config' ; import { ZooService } from '../services/zoo.service' ; import { Store } from '@ngrx/store' ; import * as fromZoo from '../reducers' ; import { StageActions } from '../actions' ; @ Component ( { selector : 'app-stage' , templateUrl : `templates/stage.component.html` , styleUrls : [ 'css/stage.component.css' ] } ) export class StageComponent implements OnInit , OnDestroy { animals$ : Observable < Animal [ ] > ; score$ : Observable < number > ; gameState$ : Observable < string > ; constructor ( private zooService , private zooStore , private renderer2 ) { this . gameState$ = this . zooStore . select ( fromZoo . selectGameState ) ; } config : ZooConfiguration = zooConfiguration ; nameForm : FormGroup ; hadError = false ; hadSuccess = true ; keyDownUnlistener : any ; keyUpUnlistener : any ; ngOnInit ( ) { this . keyDownUnlistener = this . renderer2 . listen ( 'document' , 'keydown' , e => { } ) ; this . keyUpUnlistener = this . renderer2 . listen ( 'document' , 'keyup' , e => this . zooStore . dispatch ( StageActions . setGameState ( { gameState : 'DIE' } ) ) ) ; } generateAnimal ( textType ) { const codeIdxList = this . zooService . getRandomArray ( 0 , 25 , this . config . animalNumber ) ; const nameIdxList = this . zooService . getRandomArray ( - 1 , 6 , this . config . animalNumber ) ; const scaleIdxList = this . zooService . getRandomArray ( - 1 , 6 , this . config . animalNumber ) ; const leftList = this . zooService . getRandomArray ( 15 , 70 , this . config . animalNumber ) ; const topList = this . zooService . getRandomArray ( 40 , 60 , this . config . animalNumber ) ; for ( let idx = 0 ; idx < this . config . animalNumber ; idx ++ ) { const animal = { code : this . config . keyCodeMap [ codeIdxList [ idx ] ] . code , text : { underText : this . config . keyCodeMap [ codeIdxList [ idx ] ] . underText , upperText : this . config . keyCodeMap [ codeIdxList [ idx ] ] . upperText , tsText : this . config . keyCodeMap [ codeIdxList [ idx ] ] . tsText , } [ textType ] , name : this . config . animalName [ nameIdxList [ idx ] ] , isDie : false , property : { 'left.%' : leftList [ idx ] , 'top.%' : topList [ idx ] , scale : this . config . scalelist [ scaleIdxList [ idx ] ] , 'z-index' : - 100 } } ; this . zooStore . dispatch ( StageActions . appendAnimalToList ( { animal } ) ) ; } } onFormChange ( ) { } onStart ( ) { } ngOnDestroy ( ) { this . keyUpUnlistener ( ) ; this . keyDownUnlistener ( ) ; } }