From 34e3fbdb249aeb6d50ce93a7ede44c89df21c520 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Lemaire?= Date: Thu, 8 Jan 2015 01:00:00 +0100 Subject: [PATCH] Added ValueBar --- src/index.html | 4 +- src/scripts/view/Preload.ts | 2 + src/scripts/view/battle/BattleView.ts | 5 ++ src/scripts/view/common/ValueBar.ts | 66 +++++++++++++++++++++++ src/scripts/view/specs/Targetting.spec.ts | 2 +- src/scripts/view/specs/TestGame.ts | 30 +++++++++++ src/scripts/view/specs/ValueBar.spec.ts | 25 +++++++++ 7 files changed, 132 insertions(+), 2 deletions(-) create mode 100644 src/scripts/view/common/ValueBar.ts create mode 100644 src/scripts/view/specs/TestGame.ts create mode 100644 src/scripts/view/specs/ValueBar.spec.ts diff --git a/src/index.html b/src/index.html index 2b14687..7a075bf 100644 --- a/src/index.html +++ b/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(); } }; diff --git a/src/scripts/view/Preload.ts b/src/scripts/view/Preload.ts index d21e89d..ddc2acf 100644 --- a/src/scripts/view/Preload.ts +++ b/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() { diff --git a/src/scripts/view/battle/BattleView.ts b/src/scripts/view/battle/BattleView.ts index b01303a..38a3b20 100644 --- a/src/scripts/view/battle/BattleView.ts +++ b/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); } diff --git a/src/scripts/view/common/ValueBar.ts b/src/scripts/view/common/ValueBar.ts new file mode 100644 index 0000000..3a66e33 --- /dev/null +++ b/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; + } + } +} diff --git a/src/scripts/view/specs/Targetting.spec.ts b/src/scripts/view/specs/Targetting.spec.ts index 0f1a09c..83a4386 100644 --- a/src/scripts/view/specs/Targetting.spec.ts +++ b/src/scripts/view/specs/Targetting.spec.ts @@ -1,6 +1,6 @@ /// -module SpaceTac.View { +module SpaceTac.View.Specs { "use strict"; describe("Targetting", () => { diff --git a/src/scripts/view/specs/TestGame.ts b/src/scripts/view/specs/TestGame.ts new file mode 100644 index 0000000..497adcc --- /dev/null +++ b/src/scripts/view/specs/TestGame.ts @@ -0,0 +1,30 @@ +/// + +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); + }); + } +} diff --git a/src/scripts/view/specs/ValueBar.spec.ts b/src/scripts/view/specs/ValueBar.spec.ts new file mode 100644 index 0000000..ed8de79 --- /dev/null +++ b/src/scripts/view/specs/ValueBar.spec.ts @@ -0,0 +1,25 @@ +/// + +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); + }); + }); +}