arena: Allow camera scrolling with mouse drag

src/MainUI.ts

@@ -38,9 +38,6 @@ module TK.SpaceTac {
         // Debug mode
         debug = false
 
-        // Current scaling
-        scaling = 1
-
         constructor(private testmode = false) {
             super({
                 width: 1920,

src/ui/BaseView.ts

@@ -137,14 +137,11 @@ module TK.SpaceTac.UI {
         /**
          * Get proportional locations on screen
          */
-        getScaling(): number {
-            return this.gameui.scaling;
+        getX(propx: number): number {
+            return propx * this.getWidth();
         }
-        getX(propx: number, scaled = true): number {
-            return propx * 1920 * (scaled ? this.getScaling() : 1);
-        }
-        getY(propy: number, scaled = true): number {
-            return propy * 1080 * (scaled ? this.getScaling() : 1);
+        getY(propy: number): number {
+            return propy * this.getHeight();
         }
 
         /**

src/ui/battle/Arena.spec.ts

@@ -0,0 +1,17 @@
+/// <reference path="../TestGame.ts"/>
+
+module TK.SpaceTac.UI.Specs {
+    testing("Arena", test => {
+        let testgame = setupBattleview(test);
+
+        test.case("scrolls the camera", check => {
+            let arena = testgame.view.arena;
+            expect(arena.container.x).toEqual(0);
+            expect(arena.container.y).toEqual(0);
+
+            arena.scrollCamera(50, -12);
+            expect(arena.container.x).toEqual(50);
+            expect(arena.container.y).toEqual(-12);
+        });
+    });
+}

src/ui/battle/Arena.ts

@@ -8,15 +8,9 @@ module TK.SpaceTac.UI {
         // Link to battleview
         view: BattleView
 
-        // Boundaries of the arena
-        private boundaries: IBounded = { x: 0, y: 0, width: 1808, height: 948 }
-
         // Hint for weapon or move range
         range_hint: RangeHint
 
-        // Input capture
-        private mouse_capture?: UIImage
-
         // List of ship sprites
         private ship_sprites: ArenaShip[] = []
 
@@ -54,7 +48,6 @@ module TK.SpaceTac.UI {
                 builder = builder.in(container);
             }
             this.container = container;
-            container.setPosition(this.boundaries.x, this.boundaries.y);
 
             this.setupMouseCapture();
 
@@ -94,33 +87,44 @@ module TK.SpaceTac.UI {
             let view = this.view;
             let button_down = false;
 
-            let background = new UIBuilder(view, this.container).image("battle-arena-background");
-            background.setName("mouse-capture");
-            background.setScale(this.boundaries.width / background.width, this.boundaries.height / background.height)
+            let zone = new UIBuilder(view, this.container).capture("arena-events");
 
-            // Capture clicks on background
-            background.setInteractive();
-            background.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
+            // Capture clicks
+            zone.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
+                console.error(pointer);
                 button_down = (pointer.buttons == 1);
             });
-            background.on("pointerup", (pointer: Phaser.Input.Pointer) => {
+            zone.on("pointerup", () => {
                 if (button_down) {
+                    // TODO Only if no significant drag happened
                     button_down = false;
                     this.callbacks_click.forEach(callback => callback());
                 }
             });
-            background.on("pointerout", () => {
+            zone.on("pointerout", () => {
                 this.callbacks_hover.forEach(callback => callback(null, null));
             });
 
-            // Watch mouse move to capture hovering over background
-            background.on("pointermove", (pointer: Phaser.Input.Pointer) => {
-                let location = new ArenaLocation(pointer.x / this.view.getScaling(), pointer.y / this.view.getScaling());
-                let ship = this.getShip(location);
-                this.callbacks_hover.forEach(callback => callback(location, ship));
-            }, null);
+            // Watch mouse move to capture hovering
+            zone.on("pointermove", (pointer: Phaser.Input.Pointer) => {
+                if (button_down) {
+                    let dx = pointer.x - pointer.prevPosition.x;
+                    let dy = pointer.y - pointer.prevPosition.y;
+                    this.scrollCamera(dx, dy);
+                } else {
+                    let location = new ArenaLocation(pointer.x - this.container.x, pointer.y - this.container.y);
+                    let ship = this.getShip(location);
+                    this.callbacks_hover.forEach(callback => callback(location, ship));
+                }
+            });
+        }
 
-            this.mouse_capture = background;
+        /**
+         * Scroll the camera of a given relative amount
+         */
+        scrollCamera(dx: number, dy: number): void {
+            this.container.setPosition(this.container.x + dx, this.container.y + dy);
+            this.callbacks_hover.forEach(callback => callback(null, null));
         }
 
         /**
@@ -274,18 +278,8 @@ module TK.SpaceTac.UI {
         /**
          * Get the boundaries of the arena on display
          */
-        getBoundaries(scaled = false): IBounded {
-            if (scaled) {
-                let scaling = this.view.getScaling();
-                return {
-                    x: Math.ceil(this.boundaries.x * scaling),
-                    y: Math.ceil(this.boundaries.y * scaling),
-                    width: Math.floor(this.boundaries.width * scaling),
-                    height: Math.floor(this.boundaries.height * scaling),
-                }
-            } else {
-                return this.boundaries;
-            }
+        getBoundaries(): IBounded {
+            return { x: 0, y: 0, width: this.view.getWidth(), height: this.view.getHeight() };
         }
 
         /**

src/ui/battle/ShipTooltip.ts

@@ -21,7 +21,7 @@ module TK.SpaceTac.UI {
 
             let builder = this.getBuilder();
 
-            builder.configure(10, 6, this.battleview.arena.getBoundaries(true));
+            builder.configure(10, 6, this.battleview.arena.getBoundaries());
 
             ShipTooltip.fillInfo(builder, ship, this.battleview.battle, this.battleview.player);
 

src/ui/common/UIBuilder.spec.ts

@@ -187,6 +187,16 @@ module TK.SpaceTac.UI.Specs {
             check.equals(a, 3);
         })
 
+        test.case("can create capture zones", check => {
+            let builder = new UIBuilder(testgame.view);
+
+            builder.capture("test-capture1");
+            checkcomp(["View layers", "base", 0], UIMouseCapture, "test-capture1", { x: 0, y: 0, width: 1920, height: 1080 });
+
+            builder.capture("test-capture2", 5, 10, 20, 30);
+            checkcomp(["View layers", "base", 1], UIMouseCapture, "test-capture2", { x: 5, y: 10, width: 20, height: 30 });
+        })
+
         test.case("creates sub-builders, preserving text style", check => {
             let base_style = new UITextStyle();
             base_style.width = 123;

src/ui/common/UIBuilder.ts

@@ -108,7 +108,7 @@ module TK.SpaceTac.UI {
         /**
          * Internal method to add to the parent
          */
-        private add(child: UIText | UIImage | UIButton | UIContainer | UIGraphics): void {
+        private add(child: UIText | UIImage | UIButton | UIContainer | UIGraphics | UIMouseCapture): void {
             if (this.parent instanceof UIImage) {
                 let gparent = this.parent.parentContainer;
                 if (gparent) {
@@ -236,6 +236,18 @@ module TK.SpaceTac.UI {
             return result;
         }
 
+        /**
+         * Add a mouse capture area
+         */
+        capture(name: string, x = 0, y = 0, width = this.parent.width || this.view.getWidth(), height = this.parent.height || this.view.getHeight()) {
+            let result = new UIMouseCapture(this.view, x, y, width, height);
+            result.setOrigin(0);
+            result.setName(name);
+            result.setInteractive();
+            this.add(result);
+            return result;
+        }
+
         /**
          * Change the content of an component
          * 

src/ui/common/UIMouseCapture.ts

@@ -0,0 +1,7 @@
+module TK.SpaceTac.UI {
+    /**
+     * UI component to capture mouse events on an area
+     */
+    export class UIMouseCapture extends Phaser.GameObjects.Zone {
+    }
+}