Sound on start the game

src/app/components/app.component.html

@@ -3,7 +3,7 @@
       <a-camera id="camera" #camera [attr.position]="getCameraPosition()">
         <a-text id="areaWarning" *ngIf="showPositionWarning" value="Warning you are out of play area!" color="red" position="0 -0.1 -0.5" height="0.5" width="1" align="center"></a-text>
       </a-camera>
-      <a-entity windows-motion-controls="hand: left" aabb-collider="objects: .plane"></a-entity>
+      <a-entity windows-motion-controls="hand: left" aabb-collider="objects: .plane" haptics="events: triggerdown; dur: 1000; force: 0.5"></a-entity>
       <a-entity laser-controls="hand: right" line="color: orange; opacity: 0.5; visible: true" aabb-collider="objects: .plane"></a-entity>
 
 

src/app/components/game/beat/beat.component.html

@@ -1,16 +1,19 @@
  <a-box
+  visible="true"
   id="beatComponent"
   obj-model="obj: url(assets/models/beat.obj)"
+  scale="1.5 1.5 1.5"
   #boxElement
   depth="0.3"
   height="0.3"
   width="0.3" 
   >
   <ng-container *ngIf="!isDot">
     <a-plane  
-            obj-model="obj: url(assets/models/arrow.obj)"
-            color="white"
-            scale="1 1 1">
+      obj-model="obj: url(assets/models/arrow.obj)"
+      position="0 0 0.01"
+      color="white"
+      >
     </a-plane>
     <a-plane color="white"
               class="plane"

src/app/components/game/beat/beat.component.ts

@@ -33,6 +33,7 @@ export class BeatComponent implements OnInit, AfterViewInit {
   public showBox: boolean = true;
   public index: number;
   public isDot = false;
+  public isVisible = true;
 
   constructor() { }
 
@@ -53,8 +54,8 @@ export class BeatComponent implements OnInit, AfterViewInit {
 
   firstPlaneColided(): void {
     if (this.beatCutDirection === BeatCutDirection.DOT) {
-      // fail
-      this.removeElement.emit(this.index);
+      this.playerScored.emit(false);
+      this._destroyAframeCompomponent();
     } else {
       this._firstPlaneColided = true;
     }
@@ -63,36 +64,41 @@ export class BeatComponent implements OnInit, AfterViewInit {
   secondPlaneColided(): void {
     if (this._firstPlaneColided && this.beatCutDirection !== BeatCutDirection.DOT) {
       // OK
-      console.log("El cubo ha sido cortado");
-      this.removeElement.emit(this.index);
       this.playerScored.emit(true);
+      this._destroyAframeCompomponent();
     } else {
-      // fail
-      this.removeElement.emit(this.index);
       this.playerScored.emit(false);
+      this._destroyAframeCompomponent();
     }
   }
 
   firstDotPlaneColided(): void {
     this._firstDotPlaneColided = true;
+    this._destroyAframeCompomponent();
   }
 
   secondDotPlaneColided(): void {
     if (this._firstDotPlaneColided) {
       // OK
-      console.log("El cubo ha sido cortado");
-      this.removeElement.emit(this.index);
       this.playerScored.emit(true);
+      this._destroyAframeCompomponent();
     } else {
       // fail
-      this.removeElement.emit(this.index);
       this.playerScored.emit(false);
+      this._destroyAframeCompomponent();
     }
   }
 
+  private _destroyAframeCompomponent() {
+    this.boxElement.nativeElement.setAttribute('visible', 'false');
+    // this.boxElement.nativeElement.parentNode.removeChild(this.boxElement.nativeElement);
+    this.removeElement.emit(this.index);
+    this.boxElement.nativeElement.remove();
+  }
+
   private _listenAnimationComplete(): void {
     this.boxElement.nativeElement.addEventListener('animationcomplete', ()=> {
-      this.removeElement.emit(this.index);
+      this._destroyAframeCompomponent();
       this.playerScored.emit(false);
     });
   }
@@ -118,21 +124,21 @@ export class BeatComponent implements OnInit, AfterViewInit {
 
     switch (this.beatPosition.verticalPosition) {
       case VerticalPositions.bottom:
-        this.y = 1.1;
+        this.y = 0.9;
         break;
       case VerticalPositions.middle:
-        this.y = 1.6;
+        this.y = 1.4;
         break;
       case VerticalPositions.top:
-        this.y = 2.1;
+        this.y = 1.9;
         break;
       default:
         this.y = 0;
         break;
     }
 
     if (!!this.beatPosition) {
-          this.z = -10;
+          this.z = -15;
     } else {
          this.z = 0;
     }

src/app/components/game/game.component.html

@@ -5,3 +5,52 @@
 <a-entity [attr.text] = "failedText"
           position="-0.55 1.8 -3"></a-entity>
 
+<a-gui-button #playButton
+    id="playButton"
+    visible="false"
+    position="0 1.6 -2"
+    value="Play the song"
+    font-size="80px"
+    width="1" height="0.4"
+    font-family="Impact"
+    (click)="playTheSong()"
+    toggle="true"
+>
+</a-gui-button>
+
+<ng-container *ngFor="let position of boxPositionList">
+    <a-box #scenarioBox
+            depth="0.3"
+            height="0.3"
+            width="2.1"
+            color="black"
+            [attr.position]="position"
+    >
+    </a-box>
+</ng-container>
+<ng-container>
+    <a-box 
+        depth="0.3"
+        height="0.3"
+        width="7"
+        rotation="0 0 0"
+        color="black"
+        position="-1 1 3"
+        animation="property: rotation; to: 0 0 90; dur: 2000"
+        animation__2="property: position; to: -0.9 -3 -5.5"
+    >
+    </a-box>
+    <a-box
+        depth="0.3"
+        height="0.3"
+        width="7"
+        rotation="0 0 0"
+        color="black"
+        position="-1 1 3"
+        animation="property: rotation; to: 0 0 90; dur: 2000"
+        animation__2="property: position; to: 0.9 -3 -5.5"
+    >
+    </a-box>
+</ng-container>
+
+

src/app/components/game/game.component.ts

@@ -1,35 +1,77 @@
-import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
-import { BeatService } from 'src/app/services/beat.service';
+import { Component, OnInit, ViewChild, ViewContainerRef, ViewChildren, AfterViewInit } from '@angular/core';
+import { GameService } from 'src/app/services/game.service';
+import { timeout } from 'q';
 
 @Component({
   selector: 'a-game',
   templateUrl: './game.component.html',
   styleUrls: ['./game.component.css']
 })
-export class GameComponent implements OnInit {
+export class GameComponent implements OnInit, AfterViewInit {
 
   @ViewChild('beatContainer', { read: ViewContainerRef }) beatContainer: ViewContainerRef;
+  @ViewChild('playButton') playButton;
+  @ViewChildren('scenarioBox') scenarioBoxList;
 
-  constructor(private _beatSrv: BeatService) {  }
+  constructor(private _gameSrv: GameService) {  }
 
 
 
   ngOnInit() {
-    this.startBeatCreation();
-    this._beatSrv.beatContainer = this.beatContainer;
+    this._gameSrv.beatContainer = this.beatContainer;
   }
 
-  startBeatCreation() {
-    this._beatSrv.startBeatsCreation(this.beatContainer);
+  ngAfterViewInit() {
+    this._setAnimationToSecenariosBoxeList();
+    setTimeout(() => {
+      this.playButton.nativeElement.setAttribute('visible', 'true');
+    }, 7000);
+  }
+
+  public playTheSong() {
+    this.playButton.nativeElement.setAttribute('animation', 'property: rotation; to: 0 360 0; loop: true; dur: 1000');
+    this._gameSrv.playTheSong().subscribe( () => {
+      this.playButton.nativeElement.setAttribute('visible', 'false');
+    });
   }
 
   get scoreText(): string {
-    return 'font: mozillavr; width: 3; value: Cuted beats: '+ this._beatSrv.destroyedBeats;
+    return 'font: mozillavr; width: 3; value: Cuted beats: '+ this._gameSrv.destroyedBeats;
   }
   get failedText(): string {
-    return 'font: mozillavr; width: 3; value: Failed beats: '+ this._beatSrv.failedBeats;
+    return 'font: mozillavr; width: 3; value: Failed beats: '+ this._gameSrv.failedBeats;
   }
 
-
-
+  get boxPositionList(): string[] {
+    let x = -5;
+    let y = 0;
+    let boxPositionList = [];
+    for (let index = 0; index < 10; index++) {
+      for (let index = 0; index < 4; index++) {
+        boxPositionList.push(`${x} ${y} 2`);
+        x = x + 2.1;
+      }
+      y = y + 0.5;
+      x = -5;    
+    }
+    return boxPositionList;
+  }
+  private _setAnimationToSecenariosBoxeList() {
+    const numOfBoxes = 35
+    let x = 0;
+    let y = 0.5;
+    let z = -15;
+    let boxListIndex = 0;
+    let boxList = this.scenarioBoxList.toArray().slice(0, numOfBoxes);
+    let delay = 0;
+    for (let index = 0; index < numOfBoxes; index++) {
+      const box = boxList[boxListIndex];
+      box.nativeElement.setAttribute('animation',
+      `property: position; dur: 1000; to: ${x} ${y} ${z}; delay: ${delay}`
+      );
+      z = (Math.round(z * 100)/100) + 0.3;
+      boxListIndex++;
+      delay += 200;
+    }
+  }
 }

src/app/components/menu/single-player-menu/single-player-menu.component.html

@@ -116,7 +116,7 @@
       font-family="Impact"
       margin="0.05 0.05 0.05 0.05"
       toggle="true"
-      (click)="selectTheDifficulty('easy')"
+      (click)="selectTheDifficulty(0)"
     >
     </a-gui-button>
     <a-gui-button *ngIf="selectedSong.difficulties.normal === true"
@@ -127,7 +127,7 @@
       font-family="Impact"
       margin="0.05 0.05 0.05 0.05"
       toggle="true"
-      (click)="selectTheDifficulty('normal')"
+      (click)="selectTheDifficulty(1)"
     >
     </a-gui-button>
     <a-gui-button *ngIf="selectedSong.difficulties.hard === true"
@@ -138,7 +138,7 @@
       font-family="Impact"
       margin="0.05 0.05 0.05 0.05"
       toggle="true"
-      (click)="selectTheDifficulty('hard')"
+      (click)="selectTheDifficulty(2)"
     >
     </a-gui-button>
     <a-gui-button *ngIf="selectedSong.difficulties.expert === true"
@@ -149,7 +149,7 @@
       font-family="Impact"
       margin="0.05 0.05 0.05 0.05"
       toggle="true"
-      (click)="selectTheDifficulty('expert')"
+      (click)="selectTheDifficulty(3)"
     >
     </a-gui-button>
     <a-gui-button *ngIf="selectedSong.difficulties.expertPlus === true"
@@ -160,7 +160,7 @@
       font-family="Impact"
       margin="0.05 0.05 0.05 0.05"
       toggle="true"
-      (click)="selectTheDifficulty('expertPlus')"
+      (click)="selectTheDifficulty(4)"
     >
     </a-gui-button>
   </ng-container>

src/app/components/menu/single-player-menu/single-player-menu.component.ts

@@ -4,6 +4,7 @@ import { SceneOrchestratorService } from 'src/app/services/scene-orchestrator.se
 import { Scene } from 'src/app/shared/scene/scene.enum';
 import { SongService } from 'src/app/services/song.service';
 import { Subscription } from 'rxjs';
+import { GameService } from 'src/app/services/game.service';
 
 @Component({
   selector: 'a-single-player-menu',
@@ -13,12 +14,13 @@ import { Subscription } from 'rxjs';
 export class SinglePlayerMenuComponent implements OnInit {
 
   constructor(private _sceneOrchestratorSrv: SceneOrchestratorService,
-    private _songSrv: SongService) { }
+              private _songSrv: SongService,
+              private _gameSrv: GameService) { }
 
   private _songs: Song[];
   private _songsToBeShown: Song[];
   private _selectedSong: Song;
-  private _selectedDifficulty: string = '';
+  private _selectedDifficulty: number;
   private _songSrvSubscription: Subscription;
   private _showSongDifficulties: boolean = false;
   private _showSongInfo: boolean = false;
@@ -79,7 +81,7 @@ export class SinglePlayerMenuComponent implements OnInit {
     this.showSongInfo = false;
   }
 
-  selectTheDifficulty(difficulty: string) {
+  selectTheDifficulty(difficulty: number) {
     this._selectedDifficulty = difficulty;
     this.showSongInfo = true;
   }
@@ -105,6 +107,8 @@ export class SinglePlayerMenuComponent implements OnInit {
   }
 
   goToGame() {
+    this._gameSrv.setCurrentSong(this.selectedSong);
+    this._gameSrv.setCurrentDifficultie(this._selectedDifficulty);
     this._sceneOrchestratorSrv.actualScene = Scene.game;
   }