Added ValueBar

src/index.html

@@ -34,7 +34,9 @@
         var queryString = new jasmine.QueryString({
             getWindowLocation: function() { return window.location; }
         });
-        if (!queryString.getParam('onlytests')) {
+        if (queryString.getParam('onlytests')) {
+            document.getElementById("-space-tac").hidden = true;
+        } else {
             new SpaceTac.GameRouter();
         }
     };

src/scripts/view/Preload.ts

@@ -14,6 +14,8 @@ module SpaceTac.View {
             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");
+            this.load.image("ui-bar-standard-background", "assets/images/ui/bars/standard-background.png");
+            this.load.image("ui-bar-standard-foreground", "assets/images/ui/bars/standard-foreground.png");
         }
 
         create() {

src/scripts/view/battle/BattleView.ts

@@ -69,6 +69,11 @@ module SpaceTac.View {
                 new ShipListItem(battleview, 0, rank * 50, ship, ship.getPlayer() === player);
             });
 
+            // Add a test progress bar
+            var bar = ValueBar.newStandard(game, 300, 300);
+            bar.setValue(50, 100);
+            this.ui.add(bar);
+
             // Start processing the battle log
             this.log_processor = new LogProcessor(this);
         }

src/scripts/view/common/ValueBar.ts

@@ -0,0 +1,66 @@
+module SpaceTac.View {
+    "use strict";
+
+    // Bar to display a value (like a progress bar)
+    export class ValueBar extends Phaser.Sprite {
+        // Current value
+        private current: number;
+
+        // Maximal value
+        private maximal: number;
+
+        // Proportional value
+        private proportional: number;
+
+        // Sprite of internal bar (inside the background sprite)
+        private bar_sprite: Phaser.Sprite;
+
+        // Create a quick standard bar
+        static newStandard(game: Phaser.Game, x: number, y: number): ValueBar {
+            var result = new ValueBar(game, x, y, "ui-bar-standard-background");
+            result.setBarImage("ui-bar-standard-foreground", 5, 5);
+            return result;
+        }
+
+        // Build an value bar sprite
+        //  background is the key to the image to use as background
+        constructor(game: Phaser.Game, x: number, y: number, background: string) {
+            super(game, x, y, background);
+
+            this.setValue(0, 1000);
+        }
+
+        // Set an image to use for the bar
+        setBarImage(key: string, offset_x: number, offset_y: number): void {
+            this.bar_sprite = new Phaser.Sprite(this.game, offset_x, offset_y, key);
+            this.addChild(this.bar_sprite);
+        }
+
+        // Update graphics representation
+        update() {
+            if (this.bar_sprite) {
+                this.bar_sprite.scale.x = this.proportional;
+            }
+        }
+
+        // Set current value
+        setValue(current: number, maximal: number = -1) {
+            this.current = current;
+            if (maximal >= 0) {
+                this.maximal = maximal;
+            }
+            if (this.maximal === 0) {
+                this.proportional = 0;
+            } else {
+                this.proportional = this.current / this.maximal;
+            }
+
+            this.update();
+        }
+
+        // Get the proportional (in 0.0-1.0 range) value
+        getProportionalValue(): number {
+            return this.proportional;
+        }
+    }
+}

src/scripts/view/specs/Targetting.spec.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../definitions/jasmine.d.ts"/>
 
-module SpaceTac.View {
+module SpaceTac.View.Specs {
     "use strict";
 
     describe("Targetting", () => {

src/scripts/view/specs/TestGame.ts

@@ -0,0 +1,30 @@
+/// <reference path="../../definitions/jasmine.d.ts"/>
+
+module SpaceTac.View.Specs {
+    "use strict";
+
+    // Internal test state for Phaser
+    class TestState extends Phaser.State {
+        private testfunc: (game: Phaser.Game) => void;
+        private donefunc: () => void;
+
+        init(testfunc: (game: Phaser.Game) => void, donefunc: () => void) {
+            this.testfunc = testfunc;
+            this.donefunc = donefunc;
+        }
+
+        create() {
+            this.testfunc(this.game);
+            this.donefunc();
+        }
+    }
+
+    // Test game wrapper (use instead of jasmine 'it')
+    export function ingame_it(desc: string, func: (game: Phaser.Game) => void) {
+        it(desc, (done: () => void) => {
+            var game = new Phaser.Game(500, 500, Phaser.HEADLESS);
+            game.state.add("main", TestState);
+            game.state.start("main", true, true, func, done);
+        });
+    }
+}

src/scripts/view/specs/ValueBar.spec.ts

@@ -0,0 +1,25 @@
+/// <reference path="../../definitions/jasmine.d.ts"/>
+
+module SpaceTac.View.Specs {
+    "use strict";
+
+    describe("ValueBar", () => {
+        ingame_it("computes proportional value", (game: Phaser.Game) => {
+            var bar = ValueBar.newStandard(game, 0, 0);
+
+            expect(bar.getProportionalValue()).toBe(0);
+
+            bar.setValue(20, 100);
+
+            expect(bar.getProportionalValue()).toBeCloseTo(0.2, 0.000001);
+
+            bar.setValue(40);
+
+            expect(bar.getProportionalValue()).toBeCloseTo(0.4, 0.000001);
+
+            bar.setValue(0, 0);
+
+            expect(bar.getProportionalValue()).toBe(0);
+        });
+    });
+}