rewards, working ui, general fixes, touch joystick support

.angular-cli.json

@@ -24,7 +24,8 @@
     "scripts": [
       "../node_modules/jquery/dist/jquery.min.js",
       "../node_modules/popper.js/dist/umd/popper.min.js",
-      "../node_modules/bootstrap/dist/js/bootstrap.min.js"
+      "../node_modules/bootstrap/dist/js/bootstrap.min.js",
+      "../node_modules/nipplejs/dist/nipplejs.min.js"
     ],
     "environmentSource": "environments/environment.ts",
     "environments": {

package.json

@@ -13,29 +13,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "5.1.2",
-    "@angular/compiler": "5.1.2",
-    "@angular/core": "5.1.2",
-    "@angular/forms": "5.1.2",
-    "@angular/http": "5.1.2",
-    "@angular/platform-browser": "5.1.2",
-    "@angular/platform-browser-dynamic": "5.1.2",
-    "@angular/router": "5.1.2",
+    "@angular/common": "5.1.3",
+    "@angular/compiler": "5.1.3",
+    "@angular/core": "5.1.3",
+    "@angular/forms": "5.1.3",
+    "@angular/http": "5.1.3",
+    "@angular/platform-browser": "5.1.3",
+    "@angular/platform-browser-dynamic": "5.1.3",
+    "@angular/router": "5.1.3",
     "babylonjs": "3.2.0-alpha0",
     "bootstrap": "4.0.0-beta",
     "core-js": "2.5.3",
     "jquery": "3.2.1",
+    "mobile-detect": "^1.4.1",
+    "nipplejs": "^0.6.8",
     "normalize.css": "7.0.0",
     "popper.js": "1.12.9",
     "rxjs": "5.5.6",
     "tether": "^1.4.3",
-    "zone.js": "0.8.18"
+    "zone.js": "0.8.19"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.2",
-    "@angular/compiler-cli": "5.1.2",
-    "@types/jasmine": "2.8.2",
-    "@types/node": "8.5.2",
+    "@angular/cli": "1.6.3",
+    "@angular/compiler-cli": "5.1.3",
+    "@types/jasmine": "2.8.3",
+    "@types/node": "8.5.7",
     "codelyzer": "4.0.2",
     "jasmine-core": "2.8.0",
     "jasmine-spec-reporter": "4.2.1",

src/app/app.component.css

@@ -2,7 +2,72 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   touch-action: none;
 }
+
+#zone_joystick {
+  position: absolute;
+  right: calc(100vw / 10);
+  bottom: calc((100vh / 10) * 3 - 35px);
+  width: 70px;
+  height: 70px;
+}
+
+#zone_joystick_bomb {
+  position: absolute;
+  left: calc(100vw / 10);
+  bottom: calc((100vh / 10) * 3 - 35px);
+  width: 70px;
+  height: 70px;
+  border-radius: 100%;
+  background: #30C5FF;
+  opacity: 0.5;
+}
+
+#zone_joystick_bomb.unavailable {
+  background: #653239;
+}
+
+.game-details {
+  position: absolute;
+  right: 20px;
+  top: 44px;
+  display: block;
+  z-index: 10001;
+  color: white;
+  font-size: 12px;
+  line-height: 20px;
+  background-color: #7283a0;
+  border-radius: 3px;
+}
+
+.game-details .row {
+  margin: 0;
+}
+
+.game-details .col,
+.game-details .col-auto {
+  padding: 5px;
+}
+
+.game-details-icon {
+  width: 16px;
+  height: 16px;
+  background-position: center center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.game-details-icon.bomb {
+  background-image: url('/assets/images/ui/icon-bomb.png');
+}
+
+.game-details-icon.speed {
+  background-image: url('/assets/images/ui/icon-speed.png');
+}
+
+.game-details-icon.power {
+  background-image: url('/assets/images/ui/icon-fire.png');
+}

src/app/app.component.html

@@ -1,2 +1,10 @@
 <canvas id="renderCanvas"></canvas>
-<router-outlet></router-outlet>
+<div *ngIf="gameMemoryStorage.isGameMode && gameMemoryStorage.currentPlayer && gameMemoryStorage.currentPlayer.stats" class="game-details">
+  <div class="row"><div class="col">{{gameMemoryStorage.currentPlayer.stats.maxBombs-gameMemoryStorage.currentPlayer.stats.currentBombsCount}}</div><div class="col-auto"><div class="game-details-icon bomb"></div></div></div>
+  <div class="row"><div class="col">{{gameMemoryStorage.currentPlayer.stats.bombPower}}</div><div class="col-auto"><div class="game-details-icon power"></div></div></div>
+  <div class="row"><div class="col">{{gameMemoryStorage.currentPlayer.stats.movingSpeed}}</div><div class="col-auto"><div class="game-details-icon speed"></div></div></div>
+</div>
+<div id="zone_joystick"></div>
+<div *ngIf="gameMemoryStorage.forceMobileControl && gameMemoryStorage.isGameMode" id="zone_joystick_bomb" (click)="placeBomb($event)"
+  [class.unavailable]="!gameMemoryStorage.currentPlayer || !gameMemoryStorage.currentPlayer.stats || gameMemoryStorage.currentPlayer.stats.currentBombsCount >= gameMemoryStorage.currentPlayer.stats.maxBombs"></div>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,40 +1,41 @@
-import { Component, AfterViewInit, Renderer } from '@angular/core';
+import { Component, AfterViewInit, Renderer, OnInit } from '@angular/core';
 
-import { texturesUrl, charactersData, themesData } from './config';
-import { GameRenderer } from './shared/engine';
-
-import { GameThemes } from './shared/game';
 
 import {
-  IBombermanGraphicsOptions, BombermanVeryLowGraphicsOptions, BombermanLowGraphicsOptions,
-  BombermanMediumGraphicsOptions, BombermanHighGraphicsOptions
+  BombermanVeryLowGraphicsOptions, BombermanLowGraphicsOptions, BombermanMediumGraphicsOptions, BombermanHighGraphicsOptions
 } from './shared/game/model/options';
 
 import { environment } from '../environments/environment';
 
 import { gameMemoryStorage } from './shared/gameMemoryStorage';
 
+import * as MobileDetect from 'mobile-detect';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements AfterViewInit {
+export class AppComponent implements AfterViewInit, OnInit {
   private globalKeyPress: Function;
   private globalKeyUp: Function;
   private globalKeyDown: Function;
-  constructor(renderer: Renderer) {
-    if (environment.graphicsOptions === 'low') {
-      gameMemoryStorage.graphicsOptions = new BombermanLowGraphicsOptions();
-    } else if (environment.graphicsOptions === 'medium') {
-      gameMemoryStorage.graphicsOptions = new BombermanMediumGraphicsOptions();
-    } else if (environment.graphicsOptions === 'high') {
-      gameMemoryStorage.graphicsOptions = new BombermanHighGraphicsOptions();
-    } else {
-      gameMemoryStorage.graphicsOptions = new BombermanVeryLowGraphicsOptions();
-    }
 
+  gameMemoryStorage = null;
+  constructor(renderer: Renderer) {
+    this.gameMemoryStorage = gameMemoryStorage;
+    this.gameMemoryStorage.initGraphicsOptions(
+      (environment.graphicsOptions === 'low' ?
+        new BombermanLowGraphicsOptions() :
+        (environment.graphicsOptions === 'medium' ?
+          new BombermanMediumGraphicsOptions() :
+          (environment.graphicsOptions === 'high' ?
+            new BombermanHighGraphicsOptions() :
+            new BombermanVeryLowGraphicsOptions()
+          )
+        )
+      )
+    );
     this.globalKeyPress = renderer.listenGlobal('document', 'keypress', (event) => {
       gameMemoryStorage.keyPressCallback(event);
     });
@@ -44,20 +45,24 @@ export class AppComponent implements AfterViewInit {
     this.globalKeyDown = renderer.listenGlobal('window', 'keydown', (event) => {
       gameMemoryStorage.keyDownCallback(event);
     });
+    const mobileDetect = new MobileDetect(window.navigator.userAgent);
+    if (environment.forceMobileControl || mobileDetect.mobile()) {
+      gameMemoryStorage.forceMobileControl = true;
+    }
   }
 
-  ngAfterViewInit() {
-    gameMemoryStorage.gameRenderer = new GameRenderer('renderCanvas', {
-      shadowEnabled: gameMemoryStorage.graphicsOptions.worldShadowEnabled,
-      shadowQuality: gameMemoryStorage.graphicsOptions.worldShadowQuality
-    });
-    gameMemoryStorage.gameRenderer.createScene();
+  placeBomb(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    gameMemoryStorage.keyPressCallback({ keyCode: 'internal_space' });
+  }
 
-    gameMemoryStorage.gameRenderer.getTextureGallery().initTextureObjects(texturesUrl);
-    gameMemoryStorage.gameRenderer.getCharacterGallery().initCharacterObjects(charactersData);
-    gameMemoryStorage.gameThemes = new GameThemes();
-    gameMemoryStorage.gameThemes.initGameThemes(themesData);
+  ngOnInit() {
+    gameMemoryStorage.initGamerRenderer('renderCanvas');
     gameMemoryStorage.enterMenuMode();
   }
 
+  ngAfterViewInit() {
+  }
+
 }

src/app/config/index.ts

@@ -1,3 +1,4 @@
 export * from './textures';
 export * from './characters';
 export * from './themes';
+export * from './rewards';

src/app/config/rewards.ts

@@ -0,0 +1,65 @@
+export const rewardsData = [
+  {
+    name: 'speed-increase',
+    enabled: true,
+    texture: 'rewards-speed-increase',
+    chances: 1,
+    stats: {
+      maxMovingSpeed: 1,
+    }
+  },
+  {
+    name: 'speed-decrease',
+    enabled: true,
+    texture: 'rewards-speed-decrease',
+    chances: 1,
+    stats: {
+      maxMovingSpeed: -1,
+    }
+  },
+  {
+    name: 'rewards-increase',
+    enabled: true,
+    texture: 'rewards-rewards-increase',
+    chances: 1,
+    stats: {
+      rewardsIncrease: 1,
+    }
+  },
+  {
+    name: 'energy-increase',
+    enabled: true,
+    texture: 'rewards-energy-increase',
+    chances: 1,
+    stats: {
+      bombPower: 1,
+    }
+  },
+  {
+    name: 'energy-decrease',
+    enabled: true,
+    texture: 'rewards-energy-decrease',
+    chances: 1,
+    stats: {
+      bombPower: -1,
+    }
+  },
+  {
+    name: 'detonate-later',
+    enabled: true,
+    texture: 'rewards-detonate-later',
+    chances: 1,
+    stats: {
+      bombTimeout: 1000,
+    }
+  },
+  {
+    name: 'bombs-increase',
+    enabled: true,
+    texture: 'rewards-bombs-increase',
+    chances: 1,
+    stats: {
+      maxBombs: 1,
+    }
+  }
+];

src/app/config/textures.ts

@@ -131,4 +131,10 @@ export const texturesUrl = [
     mq: 'rewards/speed-increase-hq.jpg',
     lq: 'rewards/speed-increase-hq.jpg'
   },
+  {
+    name: 'rewards-bombs-increase',
+    hq: 'rewards/bombs-increase-hq.jpg',
+    mq: 'rewards/bombs-increase-hq.jpg',
+    lq: 'rewards/bombs-increase-hq.jpg'
+  },
 ];

src/app/config/themes.ts

@@ -22,10 +22,10 @@ export const themesData = [
         'cube'
       ],
       indestructibleWalls: [
-        'cube', 'small-cube', 'cylinder', 'sphere'
+        'cube'
       ],
       destructibleWalls: [
-        'cube', 'small-cube', 'cylinder', 'sphere'
+        'cube', 'small-cube'
       ]
     },
     avilableCharacters: [

src/app/game/game.component.ts

@@ -15,7 +15,7 @@ export class GameComponent implements AfterViewInit {
   }
 
   ngAfterViewInit() {
-    if (!gameMemoryStorage.isGameMode()) {
+    if (!(gameMemoryStorage as any)._gameMode) {
       if (environment.openGameAutomatically) {
         gameMemoryStorage.enterGameMode();
         gameMemoryStorage.buildDemoGame();