2017-02-09 00:00:35 +00:00
|
|
|
|
module TS.SpaceTac.UI {
|
2017-01-26 00:01:31 +00:00
|
|
|
|
// Group to display a star system
|
|
|
|
|
export class StarSystemDisplay extends Phaser.Image {
|
2017-05-10 16:49:08 +00:00
|
|
|
|
view: UniverseMapView
|
|
|
|
|
circles: Phaser.Group
|
|
|
|
|
starsystem: Star
|
|
|
|
|
player: Player
|
|
|
|
|
fleet_display: FleetDisplay
|
|
|
|
|
locations: [StarLocation, Phaser.Image, Phaser.Image][] = []
|
|
|
|
|
label: Phaser.Image
|
2017-01-26 00:01:31 +00:00
|
|
|
|
|
2017-02-09 00:00:35 +00:00
|
|
|
|
constructor(parent: UniverseMapView, starsystem: Star) {
|
2017-01-26 00:01:31 +00:00
|
|
|
|
super(parent.game, starsystem.x, starsystem.y, "map-starsystem-background");
|
2017-01-30 00:40:33 +00:00
|
|
|
|
|
2017-03-15 21:40:19 +00:00
|
|
|
|
this.view = parent;
|
|
|
|
|
|
2017-01-26 00:01:31 +00:00
|
|
|
|
this.anchor.set(0.5, 0.5);
|
|
|
|
|
|
|
|
|
|
let scale = this.width;
|
|
|
|
|
this.scale.set(starsystem.radius * 2 / scale);
|
|
|
|
|
|
|
|
|
|
this.starsystem = starsystem;
|
2017-01-30 00:40:33 +00:00
|
|
|
|
this.player = parent.player;
|
|
|
|
|
this.fleet_display = parent.player_fleet;
|
2017-01-26 00:01:31 +00:00
|
|
|
|
|
2017-01-26 23:01:04 +00:00
|
|
|
|
// Show boundary
|
2017-03-15 21:40:19 +00:00
|
|
|
|
this.circles = new Phaser.Group(this.game);
|
|
|
|
|
this.addChild(this.circles);
|
2017-01-26 23:01:04 +00:00
|
|
|
|
this.addCircle(starsystem.radius);
|
2017-01-26 00:01:31 +00:00
|
|
|
|
|
2017-01-26 23:01:04 +00:00
|
|
|
|
// Show locations
|
2017-01-30 00:40:33 +00:00
|
|
|
|
starsystem.locations.map(location => {
|
2017-01-29 18:34:38 +00:00
|
|
|
|
let location_sprite: Phaser.Image | null = null;
|
2017-03-23 18:58:09 +00:00
|
|
|
|
let fleet_move = () => {
|
|
|
|
|
if (location == this.player.fleet.location) {
|
|
|
|
|
if (location.shop) {
|
|
|
|
|
this.view.character_sheet.setShop(location.shop);
|
|
|
|
|
this.view.character_sheet.show(this.player.fleet.ships[0]);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.fleet_display.moveToLocation(location);
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-01-29 18:34:38 +00:00
|
|
|
|
|
2017-02-09 00:00:35 +00:00
|
|
|
|
if (location.type == StarLocationType.STAR) {
|
2017-01-30 00:40:33 +00:00
|
|
|
|
location_sprite = this.addImage(location.x, location.y, "map-location-star", fleet_move);
|
2017-02-09 00:00:35 +00:00
|
|
|
|
} else if (location.type == StarLocationType.PLANET) {
|
2017-01-30 00:40:33 +00:00
|
|
|
|
location_sprite = this.addImage(location.x, location.y, "map-location-planet", fleet_move);
|
2017-01-29 18:34:38 +00:00
|
|
|
|
location_sprite.rotation = Math.atan2(location.y, location.x);
|
2017-01-26 23:01:04 +00:00
|
|
|
|
this.addCircle(Math.sqrt(location.x * location.x + location.y * location.y), 1);
|
2017-02-09 00:00:35 +00:00
|
|
|
|
} else if (location.type == StarLocationType.WARP) {
|
2017-01-30 00:40:33 +00:00
|
|
|
|
location_sprite = this.addImage(location.x, location.y, "map-location-warp", fleet_move);
|
2017-01-29 18:34:38 +00:00
|
|
|
|
}
|
|
|
|
|
|
2017-03-15 21:40:19 +00:00
|
|
|
|
this.view.tooltip.bindDynamicText(<Phaser.Button>location_sprite, () => {
|
2017-03-23 18:58:09 +00:00
|
|
|
|
let visited = this.player.hasVisitedLocation(location);
|
|
|
|
|
let shop = (visited && !location.encounter && location.shop) ? " (shop present)" : "";
|
|
|
|
|
|
2017-03-15 21:40:19 +00:00
|
|
|
|
if (location == this.player.fleet.location) {
|
2017-03-23 18:58:09 +00:00
|
|
|
|
return `Current fleet location${shop}`;
|
2017-03-15 21:40:19 +00:00
|
|
|
|
} else {
|
|
|
|
|
let loctype = StarLocationType[location.type].toLowerCase();
|
|
|
|
|
let danger = (visited && location.encounter) ? " [enemy fleet detected !]" : "";
|
2017-03-23 18:58:09 +00:00
|
|
|
|
return `${visited ? "Visited" : "Unvisited"} ${loctype} - Move the fleet there${danger}${shop}`;
|
2017-03-15 21:40:19 +00:00
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2017-01-29 18:34:38 +00:00
|
|
|
|
if (location_sprite) {
|
2017-01-30 00:40:33 +00:00
|
|
|
|
let key = this.getVisitedKey(location);
|
|
|
|
|
let status_badge = this.addImage(location.x + 0.005, location.y + 0.005, key);
|
|
|
|
|
this.locations.push([location, location_sprite, status_badge]);
|
2017-01-26 00:01:31 +00:00
|
|
|
|
}
|
|
|
|
|
});
|
2017-05-10 16:49:08 +00:00
|
|
|
|
|
|
|
|
|
// Show name
|
|
|
|
|
this.label = new Phaser.Image(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.addChild(label_content);
|
|
|
|
|
this.addChild(this.label);
|
2017-01-26 00:01:31 +00:00
|
|
|
|
}
|
|
|
|
|
|
2017-01-30 00:40:33 +00:00
|
|
|
|
addImage(x: number, y: number, key: string, 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);
|
2017-01-26 00:01:31 +00:00
|
|
|
|
image.anchor.set(0.5, 0.5);
|
|
|
|
|
this.addChild(image);
|
|
|
|
|
return image;
|
|
|
|
|
}
|
2017-01-26 23:01:04 +00:00
|
|
|
|
|
2017-05-02 21:33:58 +00:00
|
|
|
|
addCircle(radius: number, width = 3, color = 0x424242): Phaser.Graphics {
|
2017-01-26 23:01:04 +00:00
|
|
|
|
let circle = this.game.add.graphics(0, 0);
|
|
|
|
|
circle.lineStyle(width, color);
|
|
|
|
|
circle.drawCircle(0, 0, radius * 2 / this.scale.x);
|
2017-03-15 21:40:19 +00:00
|
|
|
|
this.circles.add(circle);
|
2017-01-26 23:01:04 +00:00
|
|
|
|
return circle;
|
|
|
|
|
}
|
2017-01-30 00:40:33 +00:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Return the sprite code to use for visited status.
|
|
|
|
|
*/
|
2017-02-09 00:00:35 +00:00
|
|
|
|
getVisitedKey(location: StarLocation) {
|
2017-03-23 18:58:09 +00:00
|
|
|
|
if (this.player.hasVisitedLocation(location)) {
|
|
|
|
|
if (location.encounter) {
|
|
|
|
|
return "map-state-enemy";
|
|
|
|
|
} else if (location.shop) {
|
|
|
|
|
return "map-state-shop";
|
|
|
|
|
} else {
|
|
|
|
|
return "map-state-clear";
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
return "map-state-unknown";
|
|
|
|
|
}
|
2017-01-30 00:40:33 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Update displayed information, and fog of war
|
|
|
|
|
*/
|
2017-03-09 23:21:34 +00:00
|
|
|
|
updateInfo(level: number, focus: boolean) {
|
2017-01-30 00:40:33 +00:00
|
|
|
|
this.locations.forEach(info => {
|
|
|
|
|
info[2].loadTexture(this.getVisitedKey(info[0]));
|
|
|
|
|
});
|
2017-03-09 23:21:34 +00:00
|
|
|
|
|
|
|
|
|
// LOD
|
|
|
|
|
let detailed = focus && level == 2;
|
2017-05-10 16:49:08 +00:00
|
|
|
|
this.children.filter(child => child !== this.label).forEach(child => this.view.animations.setVisible(child, detailed, 300));
|
|
|
|
|
|
|
|
|
|
this.updateLabel(level);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Update label position and scaling
|
|
|
|
|
*/
|
|
|
|
|
updateLabel(zoom: number) {
|
|
|
|
|
this.label.visible = this.player.hasVisitedSystem(this.starsystem);
|
|
|
|
|
|
|
|
|
|
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 };
|
|
|
|
|
this.view.tweens.create(this.label.position).to(position, 500, Phaser.Easing.Cubic.InOut).start();
|
2017-01-30 00:40:33 +00:00
|
|
|
|
}
|
2017-01-26 00:01:31 +00:00
|
|
|
|
}
|
|
|
|
|
}
|