More state refactoring

src/app/view/BaseView.ts

@@ -6,6 +6,20 @@ module SpaceTac.View {
         // Link to the root UI
         protected gameui: GameUI;
 
+        // Get the size of display
+        getWidth(): number {
+            return this.game.width || 1280;
+        }
+        getHeight(): number {
+            return this.game.height || 720;
+        }
+        getMidWidth(): number {
+            return this.getWidth() / 2;
+        }
+        getMidHeight(): number {
+            return this.getHeight() / 2;
+        }
+
         // Init the view
         init(...args: any[]) {
             this.gameui = <GameUI>this.game;

src/app/view/MainMenu.ts

@@ -1,15 +1,20 @@
+/// <reference path="BaseView.ts"/>
+
 module SpaceTac.View {
     "use strict";
 
-    export class MainMenu extends Phaser.State {
+    export class MainMenu extends BaseView {
         button_new_game: Phaser.Button;
         button_quick_battle: Phaser.Button;
         button_load_game: Phaser.Button;
 
         preload() {
-            this.button_new_game = this.addButton(1280 / 2 - 300, 400, "New Game", this.onNewGame);
-            this.button_quick_battle = this.addButton(1280 / 2, 400, "Quick Battle", this.onQuickBattle);
-            this.button_load_game = this.addButton(1280 / 2 + 300, 400, "Load Game", this.onLoadGame);
+            var basex = this.getMidWidth();
+            var y = Math.floor(this.getHeight() * 0.6);
+            var space = this.getWidth() * 0.2;
+            this.button_new_game = this.addButton(basex - space, y, "New Game", this.onNewGame);
+            this.button_quick_battle = this.addButton(basex, y, "Quick Battle", this.onQuickBattle);
+            this.button_load_game = this.addButton(basex + space, y, "Load Game", this.onLoadGame);
         }
 
         addButton(x: number, y: number, caption: string, callback: Function): Phaser.Button {

src/app/view/Preload.ts

@@ -1,7 +1,9 @@
+/// <reference path="BaseView.ts"/>
+
 module SpaceTac.View {
     "use strict";
 
-    export class Preload extends Phaser.State {
+    export class Preload extends BaseView {
         private preloadBar: Phaser.Sprite;
 
         preload() {
@@ -9,7 +11,8 @@ module SpaceTac.View {
             this.add.text(640, 340, "... Loading ...", {align: "center", font: "bold 20px Arial", fill: "#c0c0c0"})
                 .anchor.set(0.5, 0.5);
             this.preloadBar = this.add.sprite(0, 0, "preload-bar");
-            this.preloadBar.position.set((1280 - this.preloadBar.width) / 2, (720 - this.preloadBar.height) / 2);
+            this.preloadBar.anchor.set(0.5, 0.5);
+            this.preloadBar.position.set(this.getMidWidth(), this.getMidHeight());
             this.load.setPreloadSprite(this.preloadBar);
 
             // Load images

src/app/view/battle/Arena.ts

@@ -35,8 +35,8 @@ module SpaceTac.View {
             super(battleview.game);
 
             var background = new Phaser.Button(battleview.game, 0, 0, "battle-arena-background");
-            var expected_width = 1280 - 416;
-            var expected_height = 720 - 100;
+            var expected_width = battleview.getWidth() - 416;
+            var expected_height = battleview.getHeight() - 100;
             background.scale.set(expected_width / background.width, expected_height / background.height);
             this.background = background;
 

src/app/view/battle/BattleView.ts

@@ -170,7 +170,7 @@ module SpaceTac.View {
 
         // Display an animated "BATTLE" text in the center of the view
         displayFightMessage(): void {
-            var text = this.game.add.text(1280 / 2, 720 / 2, "BATTLE !",
+            var text = this.game.add.text(this.getMidWidth(), this.getMidHeight(), "BATTLE !",
                 {align: "center", font: "bold 42px Arial", fill: "#EE2233"});
             text.anchor.set(0.5, 0.5);
             this.game.tweens.create(text.scale).to({x: 3, y: 3}).start();