Started new map screen

src/GameUI.ts

@@ -30,7 +30,6 @@ module SpaceTac {
             this.state.add('router', View.Router);
             this.state.add('battle', View.BattleView);
             this.state.add('universe', View.UniverseMapView);
-            this.state.add('starsystem', View.StarSystemView);
 
             this.state.start('boot');
         }

src/view/Preload.ts

@@ -56,12 +56,11 @@ module SpaceTac.View {
             this.loadImage("battle/weapon/bullet.png");
             this.loadImage("common/standard-bar-background.png");
             this.loadImage("common/standard-bar-foreground.png");
-            this.loadImage("map/star-icon.png");
-            this.loadImage("map/fleet-icon.png");
-            this.loadImage("map/planet-icon.png");
-            this.loadImage("map/warp-icon.png");
-            this.loadImage("map/button-back.png");
-            this.loadImage("map/button-jump.png");
+            this.loadImage("map/starsystem-background.png");
+            this.loadImage("map/zoom-in.png");
+            this.loadImage("map/zoom-out.png");
+            this.loadImage("map/star.png");
+            this.loadImage("map/planet.png");
 
             // Load ships
             this.loadShip("scout");

src/view/map/StarSystemDisplay.ts

@@ -0,0 +1,37 @@
+module SpaceTac.View {
+    // Group to display a star system
+    export class StarSystemDisplay extends Phaser.Image {
+        starsystem: Game.Star;
+
+        constructor(parent: UniverseMapView, starsystem: Game.Star) {
+            super(parent.game, starsystem.x, starsystem.y, "map-starsystem-background");
+            this.anchor.set(0.5, 0.5);
+
+            let scale = this.width;
+            this.scale.set(starsystem.radius * 2 / scale);
+
+            this.starsystem = starsystem;
+
+            let boundary = this.game.add.graphics(0, 0);
+            boundary.lineStyle(3, 0x424242);
+            boundary.drawCircle(0, 0, scale);
+            this.addChild(boundary);
+
+            starsystem.locations.forEach(location => {
+                if (location.type == Game.StarLocationType.STAR) {
+                    this.addImage(location.x, location.y, "map-star");
+                } else if (location.type == Game.StarLocationType.PLANET) {
+                    let planet = this.addImage(location.x, location.y, "map-planet");
+                    planet.rotation = Math.atan2(location.y, location.x);
+                }
+            });
+        }
+
+        addImage(x: number, y: number, key: string): Phaser.Image {
+            let image = this.game.add.image(x * 0.5 / this.scale.x, y * 0.5 / this.scale.y, key);
+            image.anchor.set(0.5, 0.5);
+            this.addChild(image);
+            return image;
+        }
+    }
+}

src/view/map/StarSystemView.ts

@@ -1,121 +0,0 @@
-/// <reference path="../BaseView.ts"/>
-
-module SpaceTac.View {
-    // Interactive map of a star system
-    export class StarSystemView extends BaseView {
-
-        // Displayed star system
-        star: Game.Star;
-
-        // Interacting player
-        player: Game.Player;
-
-        // Group for the locations diplay
-        locations: Phaser.Group;
-
-        // Scaling used to transform game coordinates in screen ones
-        private scaling: number;
-
-        // Buttons
-        private button_back: Phaser.Button;
-        private button_jump: Phaser.Button;
-
-        // Init the view, binding it to a universe
-        init(star: Game.Star, player: Game.Player) {
-            super.init();
-
-            this.star = star;
-            this.player = player;
-        }
-
-        // Create view graphics
-        create() {
-            super.create();
-
-            this.locations = this.add.group();
-
-            var display_margin = 50;
-            var display_width = 720 - (display_margin * 2);
-            this.scaling = display_width / (this.star.radius * 2);
-            this.locations.position.set(display_margin + display_width / 2, display_margin + display_width / 2);
-            this.locations.scale.set(this.scaling);
-
-            // Buttons
-            this.button_back = this.add.button(0, 0, "map-button-back", this.onBackClicked, this);
-            this.button_back.input.useHandCursor = true;
-            this.button_jump = this.add.button(150, 0, "map-button-jump", this.onJumpClicked, this);
-            this.button_jump.input.useHandCursor = true;
-            this.button_jump.visible = false;
-
-            this.drawAll();
-
-            this.gameui.audio.startMusic("walking-along");
-        }
-
-        // Leaving the view, unbind and destroy
-        shutdown() {
-            this.star = null;
-            this.player = null;
-
-            super.shutdown();
-        }
-
-        // Redraw the view
-        drawAll(): void {
-            this.locations.removeAll(true, true);
-
-            // Draw location icons
-            this.drawLocations();
-
-            // Draw fleet
-            if (this.player.fleet.location.star === this.star) {
-                this.drawFleet();
-            }
-
-            // Buttons
-            this.button_jump.visible = this.player.fleet.location.jump_dest !== null;
-        }
-
-        // Draw the fleet marker
-        drawFleet(): void {
-            var location = this.player.fleet.location;
-            var fleet = this.add.sprite(location.x, location.y, "map-fleet-icon", 0, this.locations);
-            fleet.scale.set(1.0 / this.scaling, 1.0 / this.scaling);
-            fleet.anchor.set(0.5, -0.5);
-            this.game.tweens.create(fleet).to({angle: -360}, 5000, undefined, true, 0, -1);
-        }
-
-        // Redraw the locations map
-        drawLocations(): void {
-            this.star.locations.forEach((location: Game.StarLocation) => {
-                var key = "map-" + Game.StarLocationType[location.type].toLowerCase() + "-icon";
-                var sprite = this.add.button(location.x, location.y, key);
-                sprite.input.useHandCursor = true;
-                sprite.onInputUp.addOnce(() => {
-                    this.player.fleet.setLocation(location);
-
-                    if (this.player.getBattle()) {
-                        this.game.state.start("router", true, false);
-                    } else {
-                        this.drawAll();
-                    }
-                });
-                sprite.scale.set(1.0 / this.scaling, 1.0 / this.scaling);
-                sprite.anchor.set(0.5, 0.5);
-                this.locations.addChild(sprite);
-            });
-        }
-
-        // Called when "Back" is clicked, go back to universe map
-        onBackClicked(): void {
-            (<GameUI>this.game).star = null;
-            this.game.state.start("router", true, false);
-        }
-
-        // Called when "jump" is clicked, initiate sector jump, and go back to universe map
-        onJumpClicked(): void {
-            this.player.fleet.jump();
-            this.onBackClicked();
-        }
-    }
-}

src/view/map/UniverseMapView.ts

@@ -3,18 +3,18 @@
 module SpaceTac.View {
     // Interactive map of the universe
     export class UniverseMapView extends BaseView {
-
         // Displayed universe
         universe: Game.Universe;
 
         // Interacting player
         player: Game.Player;
 
-        // Group for the stars and links
-        private stars: Phaser.Group;
+        // Star systems
+        group: Phaser.Group;
+        starsystems: StarSystemDisplay[] = [];
 
-        // Scaling used to transform game coordinates in screen ones
-        private scaling: number;
+        // Zoom level
+        zoom = 0;
 
         // Init the view, binding it to a universe
         init(universe: Game.Universe, player: Game.Player) {
@@ -28,15 +28,15 @@ module SpaceTac.View {
         create() {
             super.create();
 
-            this.stars = this.add.group();
+            this.group = new Phaser.Group(this.game);
+            this.add.existing(this.group);
 
-            var display_margin = 50;
-            var display_width = 720 - (display_margin * 2);
-            this.scaling = display_width / (this.universe.radius * 2);
-            this.stars.position.set(display_margin + display_width / 2, display_margin + display_width / 2);
-            this.stars.scale.set(this.scaling);
+            this.starsystems = this.universe.stars.map(star => new StarSystemDisplay(this, star));
+            this.starsystems.forEach(starsystem => this.group.addChild(starsystem));
 
-            this.drawAll();
+            this.setZoom(2);
+            this.add.button(1830, 100, "map-zoom-in", () => this.setZoom(this.zoom + 1)).anchor.set(0.5, 0.5);
+            this.add.button(1830, 980, "map-zoom-out", () => this.setZoom(this.zoom - 1)).anchor.set(0.5, 0.5);
 
             this.gameui.audio.startMusic("walking-along");
 
@@ -52,63 +52,33 @@ module SpaceTac.View {
             super.shutdown();
         }
 
-        // Redraw the whole scene
-        drawAll(): void {
-            this.stars.removeAll(true, true);
-
-            this.drawStars();
-
-            this.drawFleet();
-        }
-
-        // Draw the fleet marker
-        drawFleet(): void {
-            var location = this.player.fleet.location.star;
-            var fleet = this.add.sprite(location.x, location.y, "map-fleet-icon", 0, this.stars);
-            fleet.scale.set(1.0 / this.scaling, 1.0 / this.scaling);
-            fleet.anchor.set(0.5, -0.5);
-            this.game.tweens.create(fleet).to({angle: -360}, 5000, undefined, true, 0, -1);
-        }
-
-        // Draw the stars and links
-        drawStars(): void {
-            this.universe.starlinks.forEach((link: Game.StarLink) => {
-                if (this.player.hasVisited(link.first) || this.player.hasVisited(link.second)) {
-                    var line = this.add.graphics(0, 0, this.stars);
-                    line.lineStyle(0.3, 0xA0A0A0);
-                    line.moveTo(link.first.x, link.first.y);
-                    line.lineTo(link.second.x, link.second.y);
-                }
-            });
-            this.universe.stars.forEach((star: Game.Star) => {
-                if (this.player.hasVisited(star)) {
-                    var sprite = new Phaser.Button(this.game, star.x, star.y, "map-star-icon");
-                    sprite.scale.set(1.0 / this.scaling, 1.0 / this.scaling);
-                    sprite.anchor.set(0.5, 0.5);
-
-                    sprite.onInputUp.add(() => {
-                        (<GameUI>this.game).star = star;
-                        this.game.state.start("router", true, false);
-                    });
-                    sprite.input.useHandCursor = true;
-
-                    this.stars.addChild(sprite);
-
-                    var name = new Phaser.Text(this.game, star.x, star.y, star.name,
-                        {align: "center", font: "bold 14px Arial", fill: "#90FEE3"});
-                    name.scale.set(1.0 / this.scaling, 1.0 / this.scaling);
-                    name.anchor.set(0.5, -0.4);
-                    this.stars.addChild(name);
-                }
-            });
-        }
-
         // Reveal the whole map (this is a cheat)
         revealAll(): void {
             this.universe.stars.forEach((star: Game.Star) => {
                 this.player.setVisited(star);
             });
-            this.drawAll();
+            // TODO Redraw
+        }
+
+        // Set the camera to center on a target, and to display a given span in height
+        setCamera(x: number, y: number, span: number) {
+            let scale = 1000 / span;
+            this.tweens.create(this.group.position).to({ x: 960 - x * scale, y: 540 - y * scale }).start();
+            this.tweens.create(this.group.scale).to({ x: scale, y: scale }).start();
+        }
+
+        setZoom(level: number) {
+            let current_star = this.player.fleet.location.star;
+            if (level <= 0) {
+                this.setCamera(0, 0, this.universe.radius * 2);
+                this.zoom = 0;
+            } else if (level == 1) {
+                this.setCamera(current_star.x, current_star.y, this.universe.radius * 0.5);
+                this.zoom = 1;
+            } else {
+                this.setCamera(current_star.x, current_star.y, current_star.radius * 2);
+                this.zoom = 2;
+            }
         }
     }
 }