Updated map graphics

src/ui/Preload.ts

@@ -69,17 +69,15 @@ module TS.SpaceTac.UI {
             this.loadImage("battle/outcome/button-loot.png");
             this.loadImage("map/starsystem-background.png");
             this.loadImage("map/current-location.png");
-            this.loadImage("map/zoom-in.png");
-            this.loadImage("map/zoom-out.png");
             this.loadImage("map/name.png");
+            this.loadImage("map/orbit.png");
+            this.loadImage("map/boundaries.png");
+            this.loadSheet("map/button-zoom.png", 115, 191);
             this.loadImage("map/button-jump.png");
             this.loadImage("map/location-star.png");
             this.loadImage("map/location-planet.png");
             this.loadImage("map/location-warp.png");
-            this.loadImage("map/state-unknown.png");
-            this.loadImage("map/state-enemy.png");
-            this.loadImage("map/state-clear.png");
-            this.loadImage("map/state-shop.png");
+            this.loadSheet("map/status.png", 32, 32);
             this.loadImage("character/sheet.png");
             this.loadImage("character/close.png");
             this.loadImage("character/ship.png");

src/ui/map/StarSystemDisplay.ts

@@ -7,7 +7,7 @@ module TS.SpaceTac.UI {
         player: Player
         fleet_display: FleetDisplay
         locations: [StarLocation, Phaser.Image, Phaser.Image][] = []
-        label: Phaser.Image
+        label: Phaser.Button
 
         constructor(parent: UniverseMapView, starsystem: Star) {
             super(parent.game, starsystem.x, starsystem.y, "map-starsystem-background");
@@ -26,7 +26,9 @@ module TS.SpaceTac.UI {
             // Show boundary
             this.circles = new Phaser.Group(this.game);
             this.addChild(this.circles);
-            this.addCircle(starsystem.radius);
+            let boundaries = this.game.add.image(0, 0, "map-boundaries", 0, this.circles);
+            boundaries.anchor.set(0.5);
+            boundaries.scale.set(starsystem.radius / (this.scale.x * 256));
 
             // Show locations
             starsystem.locations.map(location => {
@@ -43,13 +45,14 @@ module TS.SpaceTac.UI {
                 }
 
                 if (location.type == StarLocationType.STAR) {
-                    location_sprite = this.addImage(location.x, location.y, "map-location-star", fleet_move);
+                    location_sprite = this.addImage(location.x, location.y, "map-location-star", 0, fleet_move);
                 } else if (location.type == StarLocationType.PLANET) {
-                    location_sprite = this.addImage(location.x, location.y, "map-location-planet", fleet_move);
+                    location_sprite = this.addImage(location.x, location.y, "map-location-planet", 0, fleet_move);
                     location_sprite.rotation = Math.atan2(location.y, location.x);
-                    this.addCircle(Math.sqrt(location.x * location.x + location.y * location.y), 1);
+                    this.addCircle(location.x, location.y);
                 } else if (location.type == StarLocationType.WARP) {
-                    location_sprite = this.addImage(location.x, location.y, "map-location-warp", fleet_move);
+                    location_sprite = this.addImage(location.x, location.y, "map-location-warp", 0, fleet_move);
+                    location_sprite.rotation = Math.atan2(location.y, location.x);
                 }
 
                 this.view.tooltip.bindDynamicText(<Phaser.Button>location_sprite, () => {
@@ -66,52 +69,64 @@ module TS.SpaceTac.UI {
                 });
 
                 if (location_sprite) {
-                    let key = this.getVisitedKey(location);
-                    let status_badge = this.addImage(location.x + 0.005, location.y + 0.005, key);
+                    let frame = this.getBadgeFrame(location);
+                    let status_badge = this.addImage(location.x + 0.005, location.y + 0.005, "map-status", frame);
                     this.locations.push([location, location_sprite, status_badge]);
                 }
             });
 
             // Show name
-            this.label = new Phaser.Image(this.game, 0, 460, "map-name");
+            this.label = new Phaser.Button(this.game, 0, 460, "map-name");
             this.label.anchor.set(0.5, 0.5);
-            let label_content = new Phaser.Text(this.game, 0, 0, this.starsystem.name, { align: "center", font: `32pt Arial`, fill: "#e2e3b8" })
-            label_content.anchor.set(0.5, 0.5);
+            this.label.input.useHandCursor = false;
+            let label_content = new Phaser.Text(this.game, 0, 0, this.starsystem.name, { align: "center", font: `32pt Arial`, fill: "#b8d2f1" });
+            label_content.anchor.set(0.6, 0.5);
             this.label.addChild(label_content);
+            let label_level = new Phaser.Text(this.game, 243, 30, this.starsystem.level.toString(), { align: "center", font: `24pt Arial`, fill: "#a0a0a0" });
+            label_level.anchor.set(0.6, 0.5);
+            this.label.addChild(label_level);
             this.addChild(this.label);
+            this.view.tooltip.bindStaticText(this.label, `Level ${this.starsystem.level} starsystem`);
         }
 
-        addImage(x: number, y: number, key: string, onclick: Function | null = null): Phaser.Image {
+        addImage(x: number, y: number, key: string, frame = 0, onclick: Function | null = null): Phaser.Image {
             x /= this.scale.x;
             y /= this.scale.y;
-            let image = onclick ? this.game.add.button(x, y, key, onclick) : this.game.add.image(x, y, key);
+            let image = onclick ? this.game.add.button(x, y, key, onclick, undefined, frame, frame) : this.game.add.image(x, y, key, frame);
             image.anchor.set(0.5, 0.5);
             this.addChild(image);
             return image;
         }
 
-        addCircle(radius: number, width = 3, color = 0x424242): Phaser.Graphics {
-            let circle = this.game.add.graphics(0, 0);
-            circle.lineStyle(width, color);
-            circle.drawCircle(0, 0, radius * 2 / this.scale.x);
+        /**
+         * Add an orbit marker
+         */
+        addCircle(x: number, y: number): void {
+            let radius = Math.sqrt(x * x + y * y);
+            let angle = Math.atan2(y, x);
+
+            let circle = this.game.add.image(0, 0, "map-orbit", 0, this.circles);
+            circle.anchor.set(0.5);
+            circle.scale.set(radius / (this.scale.x * 198));
+            circle.rotation = angle - 0.01;
+
             this.circles.add(circle);
-            return circle;
         }
 
         /**
-         * Return the sprite code to use for visited status.
+         * Return the frame to use for info badge.
          */
-        getVisitedKey(location: StarLocation) {
+        getBadgeFrame(location: StarLocation): number {
             if (this.player.hasVisitedLocation(location)) {
                 if (location.encounter) {
-                    return "map-state-enemy";
+                    return 2;
                 } else if (location.shop) {
-                    return "map-state-shop";
+                    return 3;
                 } else {
-                    return "map-state-clear";
+                    return 1;
                 }
             } else {
-                return "map-state-unknown";
+                return 0;
             }
         }
 
@@ -120,7 +135,7 @@ module TS.SpaceTac.UI {
          */
         updateInfo(level: number, focus: boolean) {
             this.locations.forEach(info => {
-                info[2].loadTexture(this.getVisitedKey(info[0]));
+                info[2].frame = this.getBadgeFrame(info[0]);
             });
 
             // LOD
@@ -139,7 +154,7 @@ module TS.SpaceTac.UI {
             let factor = (zoom == 2) ? 1 : (zoom == 1 ? 5 : 15);
             this.view.tweens.create(this.label.scale).to({ x: factor, y: factor }, 500, Phaser.Easing.Cubic.InOut).start();
 
-            let position = (zoom == 2) ? { x: -460, y: 460 } : { x: 0, y: 100 * factor };
+            let position = (zoom == 2) ? { x: -560, y: 440 } : { x: 0, y: (zoom == 1 ? 180 : 100) * factor };
             this.view.tweens.create(this.label.position).to(position, 500, Phaser.Easing.Cubic.InOut).start();
         }
     }

src/ui/map/UniverseMapView.ts

@@ -6,33 +6,36 @@ module TS.SpaceTac.UI {
      */
     export class UniverseMapView extends BaseView {
         // Displayed universe
-        universe = new Universe();
+        universe = new Universe()
 
         // Interacting player
-        player = new Player();
+        player = new Player()
 
         // Layers
-        layer_universe: Phaser.Group;
-        layer_overlay: Phaser.Group;
+        layer_universe: Phaser.Group
+        layer_overlay: Phaser.Group
 
         // Star systems
-        starsystems: StarSystemDisplay[] = [];
-        starlinks: Phaser.Graphics[] = [];
+        starsystems: StarSystemDisplay[] = []
+
+        // Links between stars
+        starlinks_group: Phaser.Group
+        starlinks: Phaser.Graphics[] = []
 
         // Fleets
-        player_fleet: FleetDisplay;
+        player_fleet: FleetDisplay
 
         // Frame to highlight current location
-        current_location: CurrentLocationMarker;
+        current_location: CurrentLocationMarker
 
         // Button to jump to another system
-        button_jump: Phaser.Button;
+        button_jump: Phaser.Button
 
         // Character sheet
-        character_sheet: CharacterSheet;
+        character_sheet: CharacterSheet
 
         // Zoom level
-        zoom = 0;
+        zoom = 0
 
         /**
          * Init the view, binding it to a universe
@@ -53,20 +56,21 @@ module TS.SpaceTac.UI {
             this.layer_universe = this.addLayer("universe");
             this.layer_overlay = this.addLayer("overlay");
 
+            this.starlinks_group = this.game.add.group(this.layer_universe);
             this.starlinks = this.universe.starlinks.map(starlink => {
                 let loc1 = starlink.first.getWarpLocationTo(starlink.second);
                 let loc2 = starlink.second.getWarpLocationTo(starlink.first);
 
                 let result = new Phaser.Graphics(this.game);
                 if (loc1 && loc2) {
-                    result.lineStyle(0.005, 0x8bbeff);
+                    result.lineStyle(0.01, 0x6cc7ce);
                     result.moveTo(starlink.first.x - 0.5 + loc1.x, starlink.first.y - 0.5 + loc1.y);
                     result.lineTo(starlink.second.x - 0.5 + loc2.x, starlink.second.y - 0.5 + loc2.y);
                 }
                 result.data.link = starlink;
                 return result;
             });
-            this.starlinks.forEach(starlink => this.layer_universe.add(starlink));
+            this.starlinks.forEach(starlink => this.starlinks_group.add(starlink));
 
             this.player_fleet = new FleetDisplay(this, this.player.fleet);
 
@@ -84,11 +88,11 @@ module TS.SpaceTac.UI {
             this.layer_universe.add(this.button_jump);
             this.tooltip.bindStaticText(this.button_jump, "Engage warp drive to jump to another star system");
 
-            let button = new Phaser.Button(this.game, 1520, 100, "map-zoom-in", () => this.setZoom(this.zoom + 1));
+            let button = new Phaser.Button(this.game, 1520, 100, "map-button-zoom", () => this.setZoom(this.zoom + 1), undefined, 1, 0);
             button.anchor.set(0.5, 0.5);
             this.layer_overlay.add(button);
             this.tooltip.bindStaticText(button, "Zoom in");
-            button = new Phaser.Button(this.game, 1520, 980, "map-zoom-out", () => this.setZoom(this.zoom - 1));
+            button = new Phaser.Button(this.game, 1520, 980, "map-button-zoom", () => this.setZoom(this.zoom - 1), undefined, 3, 2);
             button.anchor.set(0.5, 0.5);
             this.layer_overlay.add(button);
             this.tooltip.bindStaticText(button, "Zoom out");
@@ -167,10 +171,17 @@ module TS.SpaceTac.UI {
          */
         setCamera(x: number, y: number, span: number, duration = 500, easing = Phaser.Easing.Cubic.InOut) {
             let scale = 1000 / span;
-            this.tweens.create(this.layer_universe.position).to({ x: 800 - x * scale, y: 540 - y * scale }, duration, easing).start();
+            this.tweens.create(this.layer_universe.position).to({ x: 920 - x * scale, y: 540 - y * scale }, duration, easing).start();
             this.tweens.create(this.layer_universe.scale).to({ x: scale, y: scale }, duration, easing).start();
         }
 
+        /**
+         * Set the alpha value for all links
+         */
+        setLinksAlpha(alpha: number) {
+            this.game.add.tween(this.starlinks_group).to({ alpha: alpha }, 500 * Math.abs(this.starlinks_group.alpha - alpha)).start();
+        }
+
         /**
          * Set the current zoom level (0, 1 or 2)
          */
@@ -178,13 +189,16 @@ module TS.SpaceTac.UI {
             let current_star = this.player.fleet.location ? this.player.fleet.location.star : null;
             if (!current_star || level <= 0) {
                 this.setCamera(0, 0, this.universe.radius * 2);
+                this.setLinksAlpha(1);
                 this.zoom = 0;
             } else if (level == 1) {
                 // TODO Zoom to next-jump accessible
                 this.setCamera(current_star.x, current_star.y, this.universe.radius * 0.5);
+                this.setLinksAlpha(0.6);
                 this.zoom = 1;
             } else {
                 this.setCamera(current_star.x, current_star.y, current_star.radius * 2);
+                this.setLinksAlpha(0.2);
                 this.zoom = 2;
             }