Added mouse move capture on arena background (for space targets)

src/scripts/view/Preload.ts

@@ -8,9 +8,10 @@ module SpaceTac.View {
             this.load.setPreloadSprite(this.preloadBar);
 
             // Load assets
-            this.load.image("ui-shiplist-own", "assets/images/ui/shiplist-own.png");
-            this.load.image("ui-shiplist-enemy", "assets/images/ui/shiplist-enemy.png");
-            this.load.image("arena-ship", "assets/images/arena/ship01.png");
+            this.load.image("ui-shiplist-own", "assets/images/battle/shiplist-own.png");
+            this.load.image("ui-shiplist-enemy", "assets/images/battle/shiplist-enemy.png");
+            this.load.image("ui-arena-background", "assets/images/battle/arena-background.png");
+            this.load.image("arena-ship", "assets/images/battle/ship01.png");
         }
 
         create() {

src/scripts/view/battle/Arena.ts

@@ -0,0 +1,31 @@
+module SpaceTac.View {
+    // Graphical representation of a battle
+    //  This is the area in the BattleView that will display ships with their real positions
+    export class Arena extends Phaser.Group {
+        background: Phaser.Image;
+        private input_callback: any;
+
+        constructor(battleview: BattleView) {
+            super(battleview.game);
+
+            var background = new Phaser.Image(battleview.game, 0, 0, 'ui-arena-background');
+            background.scale.set(5, 5);
+            background.inputEnabled = true;
+            this.background = background;
+
+            // Watch mouse move to capture hovering over background
+            this.input_callback = this.game.input.addMoveCallback((pointer) => {
+                var point = new Phaser.Point();
+                if (battleview.game.input.hitTest(background, pointer, point)) {
+                    battleview.cursorInSpace(point.x, point.y);
+                }
+            }, null);
+
+            this.add(this.background);
+        }
+
+        destroy() {
+            this.game.input.deleteMoveCallback(this.input_callback);
+        }
+    }
+}

src/scripts/view/battle/BattleView.ts

@@ -12,7 +12,7 @@ module SpaceTac.View {
         ui: UIGroup;
 
         // Battleground container
-        arena: Phaser.Group;
+        arena: Arena;
 
         // Targetting mode (null if we're not in this mode)
         targetting: Targetting;
@@ -44,13 +44,11 @@ module SpaceTac.View {
             var game = this.game;
             var player = this.player;
 
+            this.arena = new Arena(battleview);
+            game.add.existing(this.arena);
+
             this.ui = new UIGroup(game);
             game.add.existing(this.ui);
-            var ui = this.ui;
-
-            this.arena = new Phaser.Group(game);
-            game.add.existing(this.arena);
-            var arena = this.arena;
 
             this.card_playing = new ShipCard(this, 500, 0);
             this.card_hovered = new ShipCard(this, 500, 300);
@@ -113,6 +111,13 @@ module SpaceTac.View {
             }
         }
 
+        // Method called when cursor moves in space
+        cursorInSpace(x: number, y: number): void {
+            if (!this.ship_hovered) {
+                console.log("In space", x, y);
+            }
+        }
+
         // Set the currently hovered ship
         setShipHovered(ship: Game.Ship): void {
             this.ship_hovered = ship;

src/scripts/view/battle/ShipArenaSprite.ts

@@ -10,6 +10,7 @@ module SpaceTac.View {
 
             battleview.arena.add(this);
 
+            this.input.useHandCursor = true;
             this.onInputOver.add(() => {
                 battleview.cursorOnShip(ship);
             });

src/scripts/view/battle/ShipListItem.ts

@@ -11,6 +11,7 @@ module SpaceTac.View {
             super(battleview.game, x, y, owned ? 'ui-shiplist-own' : 'ui-shiplist-enemy');
             battleview.ui.add(this);
 
+            this.input.useHandCursor = true;
             this.onInputOver.add(() => {
                 battleview.cursorOnShip(ship);
             });