Added messages system (basic at the moment)

src/app/GameUI.ts

@@ -32,10 +32,10 @@ module SpaceTac {
         saveGame(): boolean {
             if (typeof(Storage) !== "undefined") {
                 localStorage.setItem("spacetac-savegame", this.session.saveToString());
-                console.log("Game saved");
+                (<View.BaseView>this.state.getCurrentState()).messages.addMessage("Game saved");
                 return true;
             } else {
-                console.error("localStorage not available");
+                (<View.BaseView>this.state.getCurrentState()).messages.addMessage("Your browser does not support saving");
             }
         }
 

src/app/definitions/phaser.d.ts

@@ -1451,7 +1451,7 @@ declare module Phaser {
         addAll(property: string, amount: number, checkAlive: boolean, checkVisible: boolean): void;
         addAt(child: any, index: number, silent?: boolean): any;
         addMultiple(children: any[], silent?: boolean): any[];
-        bringToTop(): PIXI.DisplayObject;
+        bringToTop(child?: any): PIXI.DisplayObject;
         callAll(method: string, context: any, ...parameters: any[]): void;
         callAllExists(callback: Function, existsValue: boolean, ...parameters: any[]): void;
         callbackFromArray(child: any, callback: Function, length: number): void;

src/app/view/BaseView.ts

@@ -6,6 +6,9 @@ module SpaceTac.View {
         // Link to the root UI
         protected gameui: GameUI;
 
+        // Message notifications
+        messages: Messages;
+
         // Get the size of display
         getWidth(): number {
             return this.game.width || 1280;
@@ -27,6 +30,9 @@ module SpaceTac.View {
 
         // Create view graphics
         create() {
+            // Notifications
+            this.messages = new Messages(this);
+
             // Key mapping
             var key_s = this.input.keyboard.addKey(Phaser.Keyboard.S);
             key_s.onUp.add(() => {

src/app/view/battle/BattleView.ts

@@ -113,15 +113,6 @@ module SpaceTac.View {
             // Key mapping
             var key_space = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
             key_space.onUp.add(this.onSpaceKeyPressed, this);
-            var key_s = this.input.keyboard.addKey(Phaser.Keyboard.S);
-            key_s.onUp.add(() => {
-                (<GameUI>this.game).saveGame();
-            });
-            var key_l = this.input.keyboard.addKey(Phaser.Keyboard.L);
-            key_l.onUp.add(() => {
-                (<GameUI>this.game).loadGame();
-                this.game.state.start("router");
-            });
         }
 
         // Leaving the view, we unbind the battle

src/app/view/common/Messages.ts

@@ -0,0 +1,58 @@
+module SpaceTac.View {
+    "use strict";
+
+    // A single displayed message
+    class Message extends Phaser.Group {
+        text: Phaser.Text;
+
+        constructor(parent: Phaser.Group, text: string, duration: number) {
+            super(parent.game);
+
+            this.text = new Phaser.Text(parent.game, 0, 0, text,
+                {font: "bold 14px Arial", fill: "#90FEE3"});
+            this.addChild(this.text);
+
+            setTimeout(() => {
+                this.hide();
+            }, duration);
+        }
+
+        // Hide the message
+        hide() {
+            var tween = this.game.tweens.create(this);
+            tween.to({y: this.y + 50, alpha: 0}, 400, Phaser.Easing.Circular.In);
+            tween.onComplete.addOnce(() => {
+                this.destroy();
+            });
+            tween.start();
+        }
+    }
+
+    // Visual notifications of game-related messages (eg. "Game saved"...)
+    export class Messages {
+        // Link to parent view
+        private parent: BaseView;
+
+        // Main group to hold the visual messages
+        private container: Phaser.Group;
+
+        constructor(parent: BaseView) {
+            this.parent = parent;
+
+            this.container = new Phaser.Group(parent.game);
+            parent.add.existing(this.container);
+        }
+
+        // Add a new message to the notifications
+        addMessage(text: string, duration: number = 5000): void {
+            this.container.forEachExists((child: Message) => {
+                child.y += 30;
+            }, this);
+
+            var message = new Message(this.container, text, duration);
+            this.container.addChild(message);
+
+            this.parent.world.bringToTop(this.container);
+        }
+    }
+}